feat(orchestrator): Add NFS for orchestrator and orchestrator-form-widgets plugins

workspaces/orchestrator/.changeset/early-colts-care.md

@@ -0,0 +1,6 @@
+---
+'@red-hat-developer-hub/backstage-plugin-orchestrator-form-widgets': minor
+'@red-hat-developer-hub/backstage-plugin-orchestrator': minor
+---
+
+Add NFS support in orchestrator and orchestarator-form-widget plugins

workspaces/orchestrator/.eslintignore

@@ -3,4 +3,4 @@ dist-dynamic
 dist-scalprum
 !.eslintrc.js
 !.prettierrc.js
-coverage
+coverage

workspaces/orchestrator/.prettierignore

@@ -5,5 +5,6 @@ coverage
 .eslintrc.js
 generated
 report.api.md
+report-alpha.api.md
 
 entities/skeleton/templates/${{values.workflow_id}}/${{values.workflow_id}}.yaml

workspaces/orchestrator/app-config.yaml

@@ -1,6 +1,17 @@
 app:
   title: RHDH Plugins
   baseUrl: http://localhost:3000
+  extensions:
+    - 'api:app/app-language':
+        config:
+          defaultLanguage: en
+          availableLanguages:
+            - en
+            - de
+            - es
+            - fr
+            - it
+            - ja
 
 organization:
   name: Red Hat

workspaces/orchestrator/docs/static-plugin-installation.md

@@ -78,6 +78,27 @@ Follow these instructions to install the orchestrator plugin in a Backstage envi
    );
    ```
 
+### New frontend system (NFS)
+
+If your app uses `createApp` from `@backstage/frontend-defaults`, add the orchestrator plugin and its translation module as features:
+
+```tsx title="packages/app/src/App.tsx"
+import { createApp } from '@backstage/frontend-defaults';
+import orchestratorPlugin, {
+  orchestratorTranslationsModule,
+} from '@red-hat-developer-hub/backstage-plugin-orchestrator/alpha';
+import orchestratorFormWidgetsPlugin from '@red-hat-developer-hub/backstage-plugin-orchestrator-form-widgets/alpha';
+
+export default createApp({
+  features: [
+    // ... your other features (catalog, nav, etc.)
+    orchestratorPlugin,
+    orchestratorTranslationsModule,
+    orchestratorFormWidgetsPlugin,
+  ],
+});
+```
+
 ## Configuration
 
 Add the following configuration to your `app-config.yaml`:

workspaces/orchestrator/package.json

@@ -9,6 +9,7 @@
     "tsc": "tsc",
     "dev": "yarn workspaces foreach -A --include backend --include app --parallel --jobs unlimited -v -i run start",
     "start": "backstage-cli repo start",
+    "start:legacy": "backstage-cli repo start packages/app-legacy packages/backend",
     "dev:debug": "LOG_LEVEL=debug yarn dev",
     "tsc:full": "tsc --skipLibCheck true --incremental false",
     "build:all": "backstage-cli repo build --all",

workspaces/orchestrator/packages/app-legacy/.eslintignore

@@ -0,0 +1 @@
+public

workspaces/orchestrator/packages/app-legacy/.eslintrc.js

@@ -0,0 +1,17 @@
+/*
+ * Copyright Red Hat, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+module.exports = require('@backstage/cli/config/eslint-factory')(__dirname);

workspaces/orchestrator/packages/app-legacy/package.json

@@ -0,0 +1,89 @@
+{
+  "name": "app-legacy",
+  "version": "0.0.3",
+  "private": true,
+  "bundled": true,
+  "backstage": {
+    "role": "frontend"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/redhat-developer/rhdh-plugins",
+    "directory": "workspaces/orchestrator/packages/app-legacy"
+  },
+  "scripts": {
+    "start": "backstage-cli package start",
+    "build": "backstage-cli package build",
+    "clean": "backstage-cli package clean",
+    "test": "backstage-cli package test",
+    "lint": "backstage-cli package lint"
+  },
+  "dependencies": {
+    "@backstage-community/plugin-rbac": "^1.33.2",
+    "@backstage/app-defaults": "^1.7.4",
+    "@backstage/catalog-model": "^1.7.6",
+    "@backstage/cli": "^0.35.3",
+    "@backstage/core-app-api": "^1.19.4",
+    "@backstage/core-components": "^0.18.6",
+    "@backstage/core-plugin-api": "^1.12.2",
+    "@backstage/integration-react": "^1.2.14",
+    "@backstage/plugin-api-docs": "^0.13.3",
+    "@backstage/plugin-catalog": "^1.32.2",
+    "@backstage/plugin-catalog-common": "^1.1.7",
+    "@backstage/plugin-catalog-graph": "^0.5.6",
+    "@backstage/plugin-catalog-import": "^0.13.9",
+    "@backstage/plugin-catalog-react": "^1.21.6",
+    "@backstage/plugin-notifications": "^0.5.13",
+    "@backstage/plugin-org": "^0.6.48",
+    "@backstage/plugin-permission-react": "^0.4.39",
+    "@backstage/plugin-scaffolder": "^1.35.2",
+    "@backstage/plugin-search": "^1.5.3",
+    "@backstage/plugin-search-react": "^1.10.2",
+    "@backstage/plugin-signals": "^0.0.27",
+    "@backstage/plugin-techdocs": "^1.16.2",
+    "@backstage/plugin-techdocs-module-addons-contrib": "^1.1.32",
+    "@backstage/plugin-techdocs-react": "^1.3.7",
+    "@backstage/plugin-user-settings": "^0.8.31",
+    "@backstage/theme": "^0.7.1",
+    "@backstage/ui": "^0.11.2",
+    "@mui/icons-material": "5.18.0",
+    "@mui/lab": "5.0.0-alpha.177",
+    "@mui/material": "5.18.0",
+    "@mui/styles": "5.18.0",
+    "@red-hat-developer-hub/backstage-plugin-orchestrator": "workspace:^",
+    "@red-hat-developer-hub/backstage-plugin-orchestrator-form-widgets": "workspace:^",
+    "@red-hat-developer-hub/backstage-plugin-theme": "^0.12.0",
+    "custom-authentication-provider-module": "workspace:^",
+    "history": "^5.3.0",
+    "react": "^18.0.2",
+    "react-dom": "^18.0.2",
+    "react-router": "^6.3.0",
+    "react-router-dom": "^6.3.0",
+    "react-use": "^17.4.0"
+  },
+  "devDependencies": {
+    "@backstage/test-utils": "^1.7.14",
+    "@playwright/test": "1.58.2",
+    "@testing-library/dom": "^9.0.0",
+    "@testing-library/jest-dom": "^6.0.0",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.0.0",
+    "@types/react-dom": "*",
+    "cross-env": "^7.0.0"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "files": [
+    "dist"
+  ]
+}

workspaces/orchestrator/packages/app-legacy/src/App.tsx

@@ -0,0 +1,164 @@
+/*
+ * Copyright Red Hat, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { createApp } from '@backstage/app-defaults';
+import { AppRouter, FlatRoutes } from '@backstage/core-app-api';
+import {
+  AlertDisplay,
+  OAuthRequestDialog,
+  SignInPage,
+} from '@backstage/core-components';
+import { githubAuthApiRef, gitlabAuthApiRef } from '@backstage/core-plugin-api';
+import { apiDocsPlugin, ApiExplorerPage } from '@backstage/plugin-api-docs';
+import {
+  CatalogEntityPage,
+  CatalogIndexPage,
+  catalogPlugin,
+} from '@backstage/plugin-catalog';
+import { catalogEntityCreatePermission } from '@backstage/plugin-catalog-common/alpha';
+import { CatalogGraphPage } from '@backstage/plugin-catalog-graph';
+import {
+  CatalogImportPage,
+  catalogImportPlugin,
+} from '@backstage/plugin-catalog-import';
+import { orgPlugin } from '@backstage/plugin-org';
+import { RequirePermission } from '@backstage/plugin-permission-react';
+import { ScaffolderPage, scaffolderPlugin } from '@backstage/plugin-scaffolder';
+import { SearchPage } from '@backstage/plugin-search';
+import {
+  TechDocsIndexPage,
+  techdocsPlugin,
+  TechDocsReaderPage,
+} from '@backstage/plugin-techdocs';
+import { ReportIssue } from '@backstage/plugin-techdocs-module-addons-contrib';
+import { TechDocsAddons } from '@backstage/plugin-techdocs-react';
+import { UserSettingsPage } from '@backstage/plugin-user-settings';
+import { OrchestratorPage } from '@red-hat-developer-hub/backstage-plugin-orchestrator';
+import { orchestratorFormWidgetsPlugin } from '@red-hat-developer-hub/backstage-plugin-orchestrator-form-widgets';
+import { customAuthProviderPlugin } from 'custom-authentication-provider-module';
+import { getThemes } from '@red-hat-developer-hub/backstage-plugin-theme';
+import { NotificationsPage } from '@backstage/plugin-notifications';
+import { SignalsDisplay } from '@backstage/plugin-signals';
+import { RbacPage } from '@backstage-community/plugin-rbac';
+import { Navigate, Route } from 'react-router-dom';
+import { apis } from './apis';
+import { entityPage } from './components/catalog/EntityPage';
+import { Root } from './components/Root';
+import { searchPage } from './components/search/SearchPage';
+import { orchestratorTranslations } from '@red-hat-developer-hub/backstage-plugin-orchestrator';
+
+const app = createApp({
+  apis,
+  bindRoutes({ bind }) {
+    bind(catalogPlugin.externalRoutes, {
+      createComponent: scaffolderPlugin.routes.root,
+      viewTechDoc: techdocsPlugin.routes.docRoot,
+      createFromTemplate: scaffolderPlugin.routes.selectedTemplate,
+    });
+    bind(apiDocsPlugin.externalRoutes, {
+      registerApi: catalogImportPlugin.routes.importPage,
+    });
+    bind(scaffolderPlugin.externalRoutes, {
+      registerComponent: catalogImportPlugin.routes.importPage,
+      viewTechDoc: techdocsPlugin.routes.docRoot,
+    });
+    bind(orgPlugin.externalRoutes, {
+      catalogIndex: catalogPlugin.routes.catalogIndex,
+    });
+  },
+  components: {
+    SignInPage: props => (
+      <SignInPage
+        {...props}
+        auto
+        providers={[
+          'guest',
+          {
+            id: 'github-auth-provider',
+            title: 'GitHub',
+            message: 'Sign in using GitHub',
+            apiRef: githubAuthApiRef,
+          },
+          {
+            id: 'gitlab-auth-provider',
+            title: 'GitLab',
+            message: 'Sign in using GitLab',
+            apiRef: gitlabAuthApiRef,
+          },
+        ]}
+      />
+    ),
+  },
+  themes: getThemes(),
+  __experimentalTranslations: {
+    availableLanguages: ['en', 'de', 'es', 'fr', 'it', 'ja'],
+    resources: [orchestratorTranslations],
+  },
+  /* Hardcoded deployment of the Orchestrator Form Widget library in our DEV-only instance.
+    In a production deployment, the plugin will be loaded dynamically. */
+  plugins: [orchestratorFormWidgetsPlugin, customAuthProviderPlugin],
+});
+
+const routes = (
+  <FlatRoutes>
+    <Route path="/" element={<Navigate to="catalog" />} />
+    <Route path="/catalog" element={<CatalogIndexPage />} />
+    <Route
+      path="/catalog/:namespace/:kind/:name"
+      element={<CatalogEntityPage />}
+    >
+      {entityPage}
+    </Route>
+    <Route path="/docs" element={<TechDocsIndexPage />} />
+    <Route
+      path="/docs/:namespace/:kind/:name/*"
+      element={<TechDocsReaderPage />}
+    >
+      <TechDocsAddons>
+        <ReportIssue />
+      </TechDocsAddons>
+    </Route>
+    <Route path="/create" element={<ScaffolderPage />} />
+    <Route path="/api-docs" element={<ApiExplorerPage />} />
+    <Route
+      path="/catalog-import"
+      element={
+        <RequirePermission permission={catalogEntityCreatePermission}>
+          <CatalogImportPage />
+        </RequirePermission>
+      }
+    />
+    <Route path="/search" element={<SearchPage />}>
+      {searchPage}
+    </Route>
+    <Route path="/settings" element={<UserSettingsPage />} />
+    <Route path="/catalog-graph" element={<CatalogGraphPage />} />
+    <Route path="/notifications" element={<NotificationsPage />} />
+    <Route path="/orchestrator" element={<OrchestratorPage />} />
+    <Route path="/rbac" element={<RbacPage />} />
+  </FlatRoutes>
+);
+
+export default app.createRoot(
+  <>
+    <AlertDisplay />
+    <OAuthRequestDialog />
+    <SignalsDisplay />
+    <AppRouter>
+      <Root>{routes}</Root>
+    </AppRouter>
+  </>,
+);

workspaces/orchestrator/packages/app-legacy/src/index.tsx

@@ -0,0 +1,22 @@
+/*
+ * Copyright Red Hat, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import '@backstage/cli/asset-types';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+import '@backstage/ui/css/styles.css';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(<App />);

workspaces/orchestrator/packages/app/.eslintignore

@@ -1 +1 @@
-public
+public