feat(ai-experience): Integrate new ai-experience backend plugin (#594)

* add ai-experience backend plugin

* add ai-experience common plugin

* integrate backend plugin with frontend plugin

* add ai learning paths

* update the application to include global header and github login

* fix sonarcloud issues

* add links to catalog pages

* update readme and fix spacing issues in the grids

* add app-config.dynamic.yaml

Author: karthikjeeyar

workspaces/ai-integrations/package.json

@@ -15,7 +15,7 @@
     "tsc:full": "tsc --skipLibCheck true --incremental false",
     "build:all": "backstage-cli repo build --all",
     "build:api-reports": "yarn build:api-reports:only --tsc",
-    "build:api-reports:only": "backstage-repo-tools api-reports -o ae-wrong-input-file-type --validate-release-tags",
+    "build:api-reports:only": "backstage-repo-tools api-reports -o ae-wrong-input-file-type,ae-undocumented --validate-release-tags",
     "clean": "backstage-cli repo clean",
     "test": "backstage-cli repo test",
     "test:all": "backstage-cli repo test --coverage",

workspaces/ai-integrations/packages/app/package.json

@@ -47,6 +47,8 @@
     "@material-ui/core": "^4.12.2",
     "@material-ui/icons": "^4.9.1",
     "@red-hat-developer-hub/backstage-plugin-ai-experience": "workspace:^",
+    "@red-hat-developer-hub/backstage-plugin-global-header": "^1.4.0",
+    "@redhat-developer/red-hat-developer-hub-theme": "^0.5.0",
     "react": "^18.0.2",
     "react-dom": "^18.0.2",
     "react-router": "^6.3.0",

workspaces/ai-integrations/packages/app/src/App.tsx

@@ -40,6 +40,7 @@ import { apis } from './apis';
 import { entityPage } from './components/catalog/EntityPage';
 import { searchPage } from './components/search/SearchPage';
 import { Root } from './components/Root';
+import { getThemes } from '@redhat-developer/red-hat-developer-hub-theme';
 
 import {
   AlertDisplay,
@@ -52,6 +53,14 @@ import { CatalogGraphPage } from '@backstage/plugin-catalog-graph';
 import { RequirePermission } from '@backstage/plugin-permission-react';
 import { catalogEntityCreatePermission } from '@backstage/plugin-catalog-common/alpha';
 import { AiExperiencePage } from '@red-hat-developer-hub/backstage-plugin-ai-experience';
+import { githubAuthApiRef } from '@backstage/core-plugin-api';
+
+const githubProvider = {
+  id: 'github-auth-provider',
+  title: 'GitHub',
+  message: 'Sign in using GitHub',
+  apiRef: githubAuthApiRef,
+};
 
 const app = createApp({
   apis,
@@ -72,15 +81,19 @@ const app = createApp({
       catalogIndex: catalogPlugin.routes.catalogIndex,
     });
   },
+  themes: getThemes(),
   components: {
-    SignInPage: props => <SignInPage {...props} auto providers={['guest']} />,
+    SignInPage: props => (
+      <SignInPage {...props} auto providers={['guest', githubProvider]} />
+    ),
   },
 });
 
 const routes = (
   <FlatRoutes>
-    <Route path="/" element={<Navigate to="catalog" />} />
+    <Route path="/" element={<Navigate to="home" />} />
     <Route path="/catalog" element={<CatalogIndexPage />} />
+    <Route path="/home" element={<AiExperiencePage />} />
     <Route
       path="/catalog/:namespace/:kind/:name"
       element={<CatalogEntityPage />}
@@ -111,7 +124,6 @@ const routes = (
     </Route>
     <Route path="/settings" element={<UserSettingsPage />} />
     <Route path="/catalog-graph" element={<CatalogGraphPage />} />
-    <Route path="/ai-experience" element={<AiExperiencePage />} />
   </FlatRoutes>
 );
 

workspaces/ai-integrations/packages/app/src/components/Root/Root.tsx

@@ -37,11 +37,16 @@ import {
   SidebarSpace,
   useSidebarOpenState,
   Link,
+  CatalogIcon,
 } from '@backstage/core-components';
 import MenuIcon from '@material-ui/icons/Menu';
 import SearchIcon from '@material-ui/icons/Search';
 import { MyGroupsSidebarItem } from '@backstage/plugin-org';
 import GroupIcon from '@material-ui/icons/People';
+import {
+  GlobalHeaderComponent,
+  defaultGlobalHeaderComponentsMountPoints,
+} from '@red-hat-developer-hub/backstage-plugin-global-header';
 
 const useSidebarLogoStyles = makeStyles({
   root: {
@@ -73,6 +78,9 @@ const SidebarLogo = () => {
 
 export const Root = ({ children }: PropsWithChildren<{}>) => (
   <SidebarPage>
+    <GlobalHeaderComponent
+      globalHeaderMountPoints={defaultGlobalHeaderComponentsMountPoints}
+    />
     <Sidebar>
       <SidebarLogo />
       <SidebarGroup label="Search" icon={<SearchIcon />} to="/search">
@@ -81,7 +89,8 @@ export const Root = ({ children }: PropsWithChildren<{}>) => (
       <SidebarDivider />
       <SidebarGroup label="Menu" icon={<MenuIcon />}>
         {/* Global nav, not org-specific */}
-        <SidebarItem icon={HomeIcon} to="catalog" text="Home" />
+        <SidebarItem icon={HomeIcon} to="home" text="Home" />
+        <SidebarItem icon={CatalogIcon} to="catalog" text="Catalog" />
         <MyGroupsSidebarItem
           singularTitle="My Group"
           pluralTitle="My Groups"

workspaces/ai-integrations/packages/backend/package.json

@@ -45,6 +45,7 @@
     "@backstage/plugin-search-backend-module-techdocs": "^0.4.0",
     "@backstage/plugin-search-backend-node": "^1.3.9",
     "@backstage/plugin-techdocs-backend": "^2.0.0",
+    "@red-hat-developer-hub/backstage-plugin-ai-experience-backend": "workspace:^",
     "@red-hat-developer-hub/backstage-plugin-catalog-backend-module-model-catalog": "workspace:^",
     "app": "link:../app",
     "better-sqlite3": "^9.0.0",

workspaces/ai-integrations/packages/backend/src/index.ts

@@ -72,4 +72,10 @@ backend.add(
 backend.add(catalogModuleRHDHRHOAILocationsExtensionPoint);
 backend.add(catalogModuleRHDHRHOAIReaderProcessor);
 backend.add(catalogModuleRHDHRHOAIEntityProvider);
+backend.add(
+  import('@red-hat-developer-hub/backstage-plugin-ai-experience-backend'),
+);
+
+backend.add(import('@backstage/plugin-auth-backend-module-github-provider'));
+
 backend.start();

workspaces/ai-integrations/plugins/ai-experience-backend/.eslintrc.js

@@ -0,0 +1,16 @@
+/*
+ * 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/ai-integrations/plugins/ai-experience-backend/README.md

@@ -0,0 +1,30 @@
+# ai-experience
+
+This plugin backend was templated using the Backstage CLI. You should replace this text with a description of your plugin backend.
+
+## Installation
+
+This plugin is installed via the `@red-hat-developer-hub/backstage-plugin-ai-experience-backend` package. To install it to your backend package, run the following command:
+
+```bash
+# From your root directory
+yarn --cwd packages/backend add @red-hat-developer-hub/backstage-plugin-ai-experience-backend
+```
+
+Then add the plugin to your backend in `packages/backend/src/index.ts`:
+
+```ts
+const backend = createBackend();
+// ...
+backend.add(
+  import('@red-hat-developer-hub/backstage-plugin-ai-experience-backend'),
+);
+```
+
+## Development
+
+This plugin backend can be started in a standalone mode from directly in this
+package with `yarn start`. It is a limited setup that is most convenient when
+developing the plugin backend itself.
+
+If you want to run the entire project, including the frontend, run `yarn dev` from the root directory.

workspaces/ai-integrations/plugins/ai-experience-backend/dev/index.ts

@@ -0,0 +1,35 @@
+/*
+ * 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 { createBackend } from '@backstage/backend-defaults';
+import { mockServices } from '@backstage/backend-test-utils';
+import { catalogServiceMock } from '@backstage/plugin-catalog-node/testUtils';
+
+const backend = createBackend();
+
+backend.add(mockServices.auth.factory());
+backend.add(mockServices.httpAuth.factory());
+
+// TEMPLATE NOTE:
+// Rather than using a real catalog you can use a mock with a fixed set of entities.
+backend.add(
+  catalogServiceMock.factory({
+    entities: [],
+  }),
+);
+
+backend.add(import('../src'));
+
+backend.start();

workspaces/ai-integrations/plugins/ai-experience-backend/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@red-hat-developer-hub/backstage-plugin-ai-experience-backend",
+  "version": "0.1.0",
+  "license": "Apache-2.0",
+  "private": true,
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "publishConfig": {
+    "access": "public",
+    "main": "dist/index.cjs.js",
+    "types": "dist/index.d.ts"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/redhat-developer/rhdh-plugins",
+    "directory": "workspaces/ai-integrations/plugins/ai-experience-backend"
+  },
+  "backstage": {
+    "role": "backend-plugin",
+    "pluginId": "ai-experience",
+    "pluginPackages": [
+      "@red-hat-developer-hub/backstage-plugin-ai-experience",
+      "@red-hat-developer-hub/backstage-plugin-ai-experience-backend",
+      "@red-hat-developer-hub/backstage-plugin-ai-experience-common"
+    ]
+  },
+  "scripts": {
+    "start": "backstage-cli package start",
+    "build": "backstage-cli package build",
+    "lint": "backstage-cli package lint",
+    "test": "backstage-cli package test",
+    "clean": "backstage-cli package clean",
+    "prepack": "backstage-cli package prepack",
+    "postpack": "backstage-cli package postpack"
+  },
+  "dependencies": {
+    "@backstage/backend-defaults": "^0.8.2",
+    "@backstage/backend-plugin-api": "^1.2.1",
+    "@backstage/catalog-client": "^1.9.1",
+    "@backstage/errors": "^1.2.7",
+    "@backstage/plugin-catalog-node": "^1.16.1",
+    "@red-hat-developer-hub/backstage-plugin-ai-experience-common": "workspace:^",
+    "express": "^4.17.1",
+    "express-promise-router": "^4.1.0",
+    "zod": "^3.22.4"
+  },
+  "devDependencies": {
+    "@backstage/backend-test-utils": "^1.3.1",
+    "@backstage/cli": "^0.31.0",
+    "@types/express": "^4.17.6",
+    "@types/supertest": "^2.0.12",
+    "supertest": "^6.2.4"
+  },
+  "files": [
+    "dist"
+  ]
+}