feat(quickstart): migrate quickstart plugin to NFS (#2842)

Signed-off-by: Rohit Rai <rohitkrai03@gmail.com>

Author: rohitkrai03

workspaces/quickstart/.changeset/real-pugs-write.md

@@ -0,0 +1,5 @@
+---
+'@red-hat-developer-hub/backstage-plugin-quickstart': minor
+---
+
+Added support for NFS

workspaces/quickstart/app-config-dev.yaml

@@ -1,6 +1,16 @@
 app:
   title: Scaffolded Backstage App
   baseUrl: http://localhost:3001
+
+  # Enable all packages by default, this will discover packages from packages/app/package.json
+  packages: all
+
+  extensions:
+    - api:app/app-language:
+        config:
+          availableLanguages: ['en', 'de', 'es', 'fr', 'it', 'ja']
+          defaultLanguage: 'en'
+
   quickstart:
     - title: Set up authentication
       titleKey: steps.setupAuthentication.title

workspaces/quickstart/app-config.yaml

@@ -1,6 +1,16 @@
 app:
   title: Scaffolded Backstage App
   baseUrl: http://localhost:3000
+
+  # Enable all packages by default, this will discover packages from packages/app/package.json
+  packages: all
+
+  extensions:
+    - api:app/app-language:
+        config:
+          availableLanguages: ['en', 'de', 'es', 'fr', 'it', 'ja']
+          defaultLanguage: 'en'
+
   quickstart:
     - title: Set up authentication
       titleKey: steps.setupAuthentication.title

workspaces/quickstart/e2e-tests/quick-start-developer.spec.ts

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { test, TestInfo } from '@playwright/test';
+import { test, expect, TestInfo } from '@playwright/test';
 import { UIhelper, switchToLocale } from './utils/helper';
 import { getTranslations, QuickstartMessages } from './utils/translations';
 import { runAccessibilityTests } from './utils/accessibility';
@@ -143,7 +143,7 @@ test.describe('Test Quick Start plugin', () => {
     await uiHelper.clickButtonByText(
       translations.steps.exploreSelfServiceTemplates.ctaTitle,
     );
-    await uiHelper.verifyHeading('Create a new component');
+    await expect(page).toHaveURL(/\/create/);
     await page.getByText(translations.steps.findAllLearningPaths.title).click();
     await uiHelper.verifyButtonURL(
       translations.steps.findAllLearningPaths.ctaTitle,

workspaces/quickstart/package.json

@@ -23,7 +23,12 @@
     "prettier:fix": "prettier --write .",
     "new": "backstage-cli new --scope @red-hat-developer-hub",
     "postinstall": "cd ../../ && yarn install",
-    "test:e2e": "playwright test"
+    "test:e2e": "yarn test:e2e:all",
+    "test:e2e:legacy": "APP_MODE=legacy playwright test",
+    "test:e2e:nfs": "APP_MODE=nfs playwright test",
+    "test:e2e:all": "yarn test:e2e:legacy && yarn test:e2e:nfs",
+    "test:e2e:ci": "yarn test:e2e:all",
+    "playwright": "bash -c 'if [[ $@ == test ]]; then yarn test:e2e:all; else npx playwright \"$@\"; fi' _"
   },
   "workspaces": {
     "packages": [

workspaces/quickstart/packages/app/package.json

@@ -43,6 +43,10 @@
     "@backstage/ui": "^0.13.1",
     "@material-ui/core": "^4.12.2",
     "@material-ui/icons": "^4.9.1",
+    "@mui/icons-material": "5.18.0",
+    "@mui/material": "5.18.0",
+    "@red-hat-developer-hub/backstage-plugin-app-react": "^0.0.3",
+    "@red-hat-developer-hub/backstage-plugin-quickstart": "workspace:^",
     "react": "^18.0.2",
     "react-dom": "^18.0.2",
     "react-router": "^6.30.2",

workspaces/quickstart/packages/app/src/App.tsx

@@ -14,9 +14,19 @@
  * limitations under the License.
  */
 import { createApp } from '@backstage/frontend-defaults';
-import catalogPlugin from '@backstage/plugin-catalog/alpha';
+import { appDrawerModule } from '@red-hat-developer-hub/backstage-plugin-app-react/alpha';
+import quickstartPlugin, {
+  quickstartInitModule,
+  quickstartTranslationsModule,
+} from '@red-hat-developer-hub/backstage-plugin-quickstart/alpha';
 import { navModule } from './modules/nav';
 
 export default createApp({
-  features: [catalogPlugin, navModule],
+  features: [
+    appDrawerModule,
+    quickstartPlugin,
+    quickstartInitModule,
+    quickstartTranslationsModule,
+    navModule,
+  ],
 });

workspaces/quickstart/packages/app/src/modules/nav/Sidebar.tsx

@@ -22,34 +22,44 @@ import {
   SidebarSpace,
 } from '@backstage/core-components';
 import { NavContentBlueprint } from '@backstage/plugin-app-react';
+import { useAppDrawer } from '@red-hat-developer-hub/backstage-plugin-app-react';
+import WavingHandOutlinedIcon from '@mui/icons-material/WavingHandOutlined';
+import HomeIcon from '@material-ui/icons/Home';
 import { SidebarLogo } from './SidebarLogo';
 import MenuIcon from '@material-ui/icons/Menu';
+import SearchIcon from '@material-ui/icons/Search';
+import { SidebarSearchModal } from '@backstage/plugin-search';
 import { UserSettingsSignInAvatar } from '@backstage/plugin-user-settings';
 
+const QUICKSTART_DRAWER_ID = 'quickstart';
+
 export const SidebarContent = NavContentBlueprint.make({
   params: {
     component: ({ navItems }) => {
       const nav = navItems.withComponent(item => (
         <SidebarItem icon={() => item.icon} to={item.href} text={item.title} />
       ));
 
-      // Skipped items
-      nav.take('page:search'); // Using search modal instead
+      nav.take('page:search');
+      nav.take('page:catalog');
 
       return (
         <Sidebar>
           <SidebarLogo />
+          <SidebarGroup label="Search" icon={<SearchIcon />} to="/search">
+            <SidebarSearchModal />
+          </SidebarGroup>
           <SidebarDivider />
           <SidebarGroup label="Menu" icon={<MenuIcon />}>
-            {nav.take('page:catalog')}
+            <SidebarItem icon={HomeIcon} to="/catalog" text="Home" />
             {nav.take('page:scaffolder')}
             <SidebarDivider />
             <SidebarScrollWrapper>
               {nav.rest({ sortBy: 'title' })}
             </SidebarScrollWrapper>
           </SidebarGroup>
           <SidebarSpace />
-          <SidebarDivider />
+          <QuickstartSidebarItem />
           <SidebarDivider />
           <SidebarGroup
             label="Settings"
@@ -64,3 +74,14 @@ export const SidebarContent = NavContentBlueprint.make({
     },
   },
 });
+
+function QuickstartSidebarItem() {
+  const { toggleDrawer } = useAppDrawer();
+  return (
+    <SidebarItem
+      text="Quick start"
+      icon={WavingHandOutlinedIcon}
+      onClick={() => toggleDrawer(QUICKSTART_DRAWER_ID)}
+    />
+  );
+}

workspaces/quickstart/packages/app/src/modules/nav/SidebarLogo.tsx

@@ -43,7 +43,12 @@ export const SidebarLogo = () => {
 
   return (
     <div className={classes.root}>
-      <Link to="/" underline="none" className={classes.link} aria-label="Home">
+      <Link
+        to="/catalog"
+        underline="none"
+        className={classes.link}
+        aria-label="Home"
+      >
         {isOpen ? <LogoFull /> : <LogoIcon />}
       </Link>
     </div>

workspaces/quickstart/plugins/quickstart/package.json

@@ -38,10 +38,13 @@
     "@backstage-community/plugin-rbac-common": "^1.19.0",
     "@backstage/core-components": "^0.18.8",
     "@backstage/core-plugin-api": "^1.12.4",
+    "@backstage/frontend-plugin-api": "^0.15.1",
+    "@backstage/plugin-app-react": "^0.2.1",
     "@backstage/plugin-permission-react": "^0.4.41",
     "@backstage/theme": "^0.7.2",
     "@mui/icons-material": "5.18.0",
     "@mui/material": "5.18.0",
+    "@red-hat-developer-hub/backstage-plugin-app-react": "^0.0.3",
     "@red-hat-developer-hub/backstage-plugin-theme": "^0.12.0",
     "react-use": "^17.6.0"
   },
@@ -62,14 +65,14 @@
   },
   "exports": {
     ".": "./src/index.ts",
-    "./alpha": "./src/alpha.ts",
+    "./alpha": "./src/alpha/index.tsx",
     "./dev": "./dev/CustomDrawer.tsx",
     "./package.json": "./package.json"
   },
   "typesVersions": {
     "*": {
       "alpha": [
-        "src/alpha.ts"
+        "src/alpha/index.tsx"
       ],
       "dev": [
         "dev/CustomDrawer.tsx"
@@ -88,7 +91,7 @@
   "scalprum": {
     "name": "red-hat-developer-hub.backstage-plugin-quickstart",
     "exposedModules": {
-      "Alpha": "./src/alpha.ts",
+      "Alpha": "./src/alpha/index.tsx",
       "PluginRoot": "./src/index.ts",
       "QuickstartPlugin": "./src/index.ts"
     }