feature/catalog updates

cfn-parameters.json

@@ -28,6 +28,8 @@
 	"PgPassword": $secrets.POSTGRES_PASSWORD,
 	"AuthGoogleClientId": $secrets.AUTH_GOOGLE_CLIENT_ID,
 	"AuthGoogleClientSecret": $secrets.AUTH_GOOGLE_CLIENT_SECRET,
+	"AuthGithubClientId": $secrets.AUTH_GITHUB_CLIENT_ID,
+	"AuthGithubClientSecret": $secrets.AUTH_GITHUB_CLIENT_SECRET,
 	"BackstageAppUrl": $vars.BACKSTAGE_APP_URL,
 	"BackstageBackendUrl": $vars.BACKSTAGE_BACKEND_URL,
 	"ServerlessOpsCatalogApiUrl": $vars.SERVERLESSOPS_CATALOG_API_URL,

src/app-config.production.yaml

@@ -47,6 +47,13 @@ auth:
             - resolver: emailMatchingUserEntityProfileEmail
             - resolver: emailLocalPartMatchingUserEntityName
             - resolver: emailMatchingUserEntityAnnotation
+    github:
+      production:
+        clientId: ${AUTH_GITHUB_CLIENT_ID}
+        clientSecret: ${AUTH_GITHUB_CLIENT_SECRET}
+        signIn:
+          resolvers:
+            - resolver: emailMatchingUserEntityProfileEmail
 
 integrations:
   github:

src/app-config.yaml

@@ -9,13 +9,47 @@ app:
     # Configure the catalog index page to be the root page, this is normally mounted on /catalog
     - page:catalog:
         config:
-          path: /
+          pagination:
+            mode: offset
+            limit: 20
+          #path: /
     - catalog-filter:catalog/kind:
         config:
           initialFilter: domain
     - catalog-filter:catalog/list:
         config:
           initialFilter: all
+
+    # Catalog page tabs
+    - page:catalog/entity:
+        config:
+          showNavItemIcons: true
+    - entity-content:catalog/overview:
+        config:
+          icon: catalog
+          group: false
+    - entity-content:api-docs/definition:
+        config:
+          icon: kind:api
+          group: false
+    - entity-content:api-docs/apis:
+        config:
+          icon: kind:api
+          group: false
+    - entity-content:techdocs:
+        config:
+          icon: techdocs
+          group: false
+    # NOTE: Setting `disabled: true` causes to hide the page causes crashes. I assume it's
+    # related to not being fully ported to the new frontend system at the current time. As a
+    # result we're using this filter that will always fails.
+    - entity-content:github-actions:
+        config:
+          filter:
+            kind: false
+    - entity-content:github-issues/entity:
+        disabled: true
+
     - sub-page:scaffolder/templates:
         config:
           groups:

src/packages/app/package.json

@@ -14,6 +14,9 @@
     "lint": "backstage-cli package lint"
   },
   "dependencies": {
+    "@backstage-community/plugin-github-actions": "^1.2.0",
+    "@backstage-community/plugin-github-deployments": "^1.2.0",
+    "@backstage-community/plugin-github-issues": "^1.2.1",
     "@backstage/cli": "backstage:^",
     "@backstage/core-components": "backstage:^",
     "@backstage/core-plugin-api": "backstage:^",
@@ -37,8 +40,9 @@
     "@backstage/plugin-techdocs-module-addons-contrib": "backstage:^",
     "@backstage/plugin-user-settings": "backstage:^",
     "@backstage/ui": "backstage:^",
+    "@internal/backstage-plugin-app-module-nav": "workspace:^",
+    "@internal/backstage-plugin-catalog-module-serverlessops": "workspace:^",
     "@internal/backstage-plugin-scaffolder-entity-pickers": "workspace:^",
-    "@internal/backstage-plugin-serverlessops-catalog": "workspace:^",
     "@material-ui/core": "^4.12.2",
     "@material-ui/icons": "^4.9.1",
     "react": "^18.0.2",

src/packages/app/src/App.tsx

@@ -1,12 +1,19 @@
 import { createApp } from '@backstage/frontend-defaults';
 import catalogPlugin from '@backstage/plugin-catalog/alpha';
-import serverlessOpsCatalogPlugin from '@internal/backstage-plugin-serverlessops-catalog';
 import { navModule } from './modules/nav';
 import { configApiRef, googleAuthApiRef, useApi } from '@backstage/core-plugin-api';
 import { SignInPageBlueprint } from '@backstage/plugin-app-react';
 import { SignInPage } from '@backstage/core-components';
 import { createFrontendModule } from '@backstage/frontend-plugin-api';
 
+// external plugins
+import githubActionsPlugin from '@backstage-community/plugin-github-actions/alpha';
+import githubDeploymentsPlugin from '@backstage-community/plugin-github-deployments/alpha';
+import githubIssuesPlugin from '@backstage-community/plugin-github-issues/alpha';
+// local plugins
+import serverlessOpsCatalogModule from '@internal/backstage-plugin-catalog-module-serverlessops';
+import appModuleNav from '@internal/backstage-plugin-app-module-nav';
+
 const signInPage = SignInPageBlueprint.make({
   params: {
     loader: async () => props => {
@@ -48,7 +55,11 @@ export default createApp({
   features: [
     catalogPlugin,
     navModule,
-    serverlessOpsCatalogPlugin,
+    githubActionsPlugin,
+    githubDeploymentsPlugin,
+    githubIssuesPlugin,
+    serverlessOpsCatalogModule,
+    appModuleNav,
     createFrontendModule({
       pluginId: 'app',
       extensions: [signInPage],

src/plugins/app-module-nav/README.md

@@ -0,0 +1,5 @@
+# @internal/backstage-plugin-app-module-nav
+
+The nav frontend module for the app plugin.
+
+_This plugin was created through the Backstage CLI_

src/plugins/app-module-nav/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@internal/backstage-plugin-app-module-nav",
+  "version": "0.1.0",
+  "license": "UNLICENSED",
+  "private": true,
+  "description": "The nav frontend module for the app plugin.",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "publishConfig": {
+    "access": "public",
+    "main": "dist/index.cjs.js",
+    "module": "dist/index.esm.js",
+    "types": "dist/index.d.ts"
+  },
+  "backstage": {
+    "role": "frontend-plugin-module",
+    "pluginId": "app",
+    "pluginPackage": "@backstage/plugin-app"
+  },
+  "sideEffects": false,
+  "scripts": {
+    "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/frontend-plugin-api": "backstage:^"
+  },
+  "devDependencies": {
+    "@backstage/cli": "backstage:^",
+    "@testing-library/jest-dom": "^6.0.0"
+  },
+  "files": [
+    "dist"
+  ]
+}

src/plugins/app-module-nav/src/index.ts

@@ -0,0 +1 @@
+export { appModuleNav as default } from './module';

src/plugins/app-module-nav/src/module.tsx

@@ -0,0 +1,19 @@
+import { createFrontendModule } from '@backstage/frontend-plugin-api';
+import { NavContentBlueprint } from '@backstage/plugin-app-react';
+import { SidebarContentOverrideComponent } from './nav/SidebarOverride';
+
+export const SidebarContentOverride = NavContentBlueprint.make({
+    params: {
+        component: ({ navItems }: { navItems: any }) => (
+            <SidebarContentOverrideComponent navItems={navItems} />
+        ),
+    },
+});
+
+
+export const appModuleNav = createFrontendModule({
+  pluginId: 'app',
+  extensions: [
+    SidebarContentOverride,
+  ],
+});

src/plugins/app-module-nav/src/nav/SidebarOverride.test.tsx

@@ -0,0 +1,32 @@
+import { SidebarContentOverrideComponent } from './SidebarOverride';
+
+jest.mock('@backstage/core-components', () => ({
+  Sidebar: ({ children }: any) => <div>{children}</div>,
+  SidebarDivider: () => <div />,
+  SidebarGroup: ({ children }: any) => <div>{children}</div>,
+  SidebarItem: ({ text }: any) => <div>{text}</div>,
+  SidebarScrollWrapper: ({ children }: any) => <div>{children}</div>,
+  SidebarSpace: () => <div />,
+}));
+
+jest.mock('@backstage/plugin-search', () => ({ SidebarSearchModal: () => <div>Search</div> }));
+jest.mock('@backstage/plugin-user-settings', () => ({ UserSettingsSignInAvatar: () => <div>Settings</div> }));
+jest.mock('@backstage/plugin-notifications', () => ({ NotificationsSidebarItem: () => <div>Notifications</div> }));
+
+describe('SidebarContentOverrideComponent', () => {
+  it('removes the hidden navigation items before rendering the sidebar', () => {
+    const take = jest.fn(() => null);
+    const rest = jest.fn(() => []);
+
+    const navItems = {
+      withComponent: jest.fn(() => ({ take, rest })),
+    } as any;
+
+    SidebarContentOverrideComponent({ navItems });
+
+    expect(take).toHaveBeenCalledWith('page:search');
+    expect(take).toHaveBeenCalledWith('page:api-docs');
+    expect(take).toHaveBeenCalledWith('page:notifications');
+    expect(take).toHaveBeenCalledWith('page:catalog-import');
+  });
+});

src/plugins/app-module-nav/src/nav/SidebarOverride.tsx

@@ -0,0 +1,56 @@
+import {
+  Sidebar,
+  SidebarDivider,
+  SidebarGroup,
+  SidebarItem,
+  SidebarScrollWrapper,
+  SidebarSpace,
+} from '@backstage/core-components';
+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';
+import { NotificationsSidebarItem } from '@backstage/plugin-notifications';
+
+export function SidebarContentOverrideComponent({ navItems }: { navItems: any }) {
+  const nav = navItems.withComponent((item: any) => (
+    <SidebarItem icon={() => item.icon} to={item.href} text={item.title} />
+  ));
+
+  nav.take('page:search');
+  nav.take('page:api-docs');
+  nav.take('page:notifications');
+  nav.take('page:catalog-import');
+
+  return (
+    <Sidebar>
+      <SidebarGroup label="Search" icon={<SearchIcon />} to="/search">
+        <SidebarSearchModal />
+      </SidebarGroup>
+      <SidebarDivider />
+      <SidebarGroup label="Menu" icon={<MenuIcon />}>
+        {nav.take('page:catalog')}
+        {nav.take('page:catalog-graph')}
+        {nav.take('page:scaffolder')}
+        <SidebarDivider />
+        <SidebarScrollWrapper>
+          {nav.take('page:serverlessops-catalog/serverlessops-catalog-tabbed-directory-index')}
+          {nav.rest({ sortBy: 'title' })}
+        </SidebarScrollWrapper>
+      </SidebarGroup>
+      <SidebarSpace />
+      <SidebarDivider />
+      <NotificationsSidebarItem />
+      <SidebarDivider />
+      <SidebarGroup
+        label="Settings"
+        icon={<UserSettingsSignInAvatar />}
+        to="/settings"
+      >
+        {nav.take('page:catalog-unprocessed-entities')}
+        {nav.take('page:app-visualizer')}
+        {nav.take('page:user-settings')}
+      </SidebarGroup>
+    </Sidebar>
+  );
+}

src/plugins/app-module-nav/src/nav/index.ts

@@ -0,0 +1,7 @@
+import { createFrontendModule } from '@backstage/frontend-plugin-api';
+import { SidebarContentOverride } from './SidebarOverride';
+
+export const serverlessOpsCatalogNavModule = createFrontendModule({
+  pluginId: 'serverlessops-catalog',
+  extensions: [SidebarContentOverride],
+});

src/plugins/catalog-module-serverlessops/.eslintrc.js

@@ -0,0 +1 @@
+module.exports = require('@backstage/cli/config/eslint-factory')(__dirname);

src/plugins/catalog-module-serverlessops/dev/index.tsx

@@ -0,0 +1,6 @@
+import { createDevApp } from '@backstage/frontend-dev-utils'
+import serverlessOpsCatalogModule from '../src'
+
+createDevApp({
+    features: [serverlessOpsCatalogModule],
+})

src/plugins/serverlessops-catalog/package.json → src/plugins/catalog-module-serverlessops/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@internal/backstage-plugin-serverlessops-catalog",
+  "name": "@internal/backstage-plugin-catalog-module-serverlessops",
   "version": "0.1.0",
   "main": "src/index.ts",
   "types": "src/index.ts",
@@ -11,8 +11,9 @@
     "types": "dist/index.d.ts"
   },
   "backstage": {
-    "role": "frontend-plugin",
-    "pluginId": "serverlessops-catalog"
+    "role": "frontend-plugin-module",
+    "pluginId": "catalog",
+    "moduleId": "serverlessops"
   },
   "sideEffects": false,
   "scripts": {
@@ -42,7 +43,10 @@
     "@material-ui/core": "^4.9.13",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "4.0.0-alpha.61",
-    "react-use": "^17.2.4"
+    "@remixicon/react": "^4.9.0",
+    "@roadiehq/backstage-plugin-github-insights": "^3.5.0",
+    "react-use": "^17.2.4",
+    "zod": "^4.4.3"
   },
   "peerDependencies": {
     "react": "^16.13.1 || ^17.0.0 || ^18.0.0",

src/plugins/catalog-module-serverlessops/src/components/CatalogEntityContent/ActivityCatalogEntityContent.tsx

@@ -0,0 +1,13 @@
+import { Grid } from '@material-ui/core';
+import { GithubIssuesCard } from '@backstage-community/plugin-github-issues'
+
+export const ActivityCatalogEntityContent = () => {
+
+  return (
+    <Grid container spacing={3} alignItems="stretch">
+      <Grid item xs={12}>
+        <GithubIssuesCard itemsPerPage={10} itemsPerRepo={50} />
+      </Grid>
+    </Grid>
+  );
+};