Merge pull request #35 from mozilla-services/wstuckey/obs-368-upgrade…

…-backstage

OBS-368 upgrade backstage to 1.32.0

.gitignore

@@ -15,7 +15,7 @@ coverage
 # Dependencies
 node_modules/
 
-# Yarn 3 files
+# Yarn files
 .pnp.*
 .yarn/*
 !.yarn/patches

.yarnrc.yml

@@ -1,3 +1,3 @@
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-4.0.1.cjs
+yarnPath: .yarn/releases/yarn-4.4.1.cjs

app-config.production.yaml

@@ -19,7 +19,7 @@ backend:
   # all interfaces, the most permissive setting. The right value depends on your specific deployment.
   listen: ':${PORT}'
 
-  # config options: https://node-postgres.com/api/client
+  # config options: https://node-postgres.com/apis/client
   database:
     client: pg
     connection:

app-config.yaml

@@ -42,7 +42,7 @@ integrations:
   github:
     - host: github.com
       # This is a Personal Access Token or PAT from GitHub. You can find out how to generate this token, and more information
-      # about setting up the GitHub integration here: https://backstage.io/docs/getting-started/configuration#setting-up-a-github-integration
+      # about setting up the GitHub integration here: https://backstage.io/docs/integrations/github/locations#configuration
       token: ${GITHUB_TOKEN}
     ### Example for how to add your GitHub Enterprise instance using the API:
     # - host: ghe.example.net
@@ -70,7 +70,10 @@ techdocs:
 
 auth:
   # see https://backstage.io/docs/auth/ to learn about auth providers
-  providers: {}
+  environment: 'development'
+  providers:
+    # See https://backstage.io/docs/auth/guest/provider
+    guest: {}
 
 scaffolder:
   # see https://backstage.io/docs/features/software-templates/configuration for software template options
@@ -102,3 +105,21 @@ catalog:
       target: ../../examples/org.yaml
       rules:
         - allow: [User, Group]
+
+    ## Uncomment these lines to add more example data
+    # - type: url
+    #   target: https://github.com/backstage/backstage/blob/master/packages/catalog-model/examples/all.yaml
+
+    ## Uncomment these lines to add an example org
+    # - type: url
+    #   target: https://github.com/backstage/backstage/blob/master/packages/catalog-model/examples/acme-corp.yaml
+    #   rules:
+    #     - allow: [User, Group]
+
+kubernetes:
+  # see https://backstage.io/docs/features/kubernetes/configuration for kubernetes configuration options
+
+# see https://backstage.io/docs/permissions/getting-started for more on the permission framework
+permission:
+  # setting this to `false` will disable permissions
+  enabled: true

backstage.json

@@ -1,3 +1,3 @@
 {
-  "version": "1.26.4"
+  "version": "1.32.0"
 }

package.json

@@ -6,7 +6,7 @@
     "node": "18 || 20"
   },
   "scripts": {
-    "dev": "concurrently \"yarn start\" \"yarn start-backend\"",
+    "dev": "yarn workspaces foreach -A --include backend --include app --parallel -v -i run start",
     "start": "yarn workspace app start",
     "start-backend": "yarn workspace backend start",
     "build:backend": "yarn workspace backend build",
@@ -31,19 +31,17 @@
     ]
   },
   "devDependencies": {
-    "@backstage/cli": "^0.26.4",
+    "@backstage/cli": "^0.28.0",
     "@backstage/e2e-test-utils": "^0.1.1",
     "@playwright/test": "^1.32.3",
     "@spotify/prettier-config": "^12.0.0",
-    "concurrently": "^8.0.0",
-    "lerna": "^7.3.0",
-    "node-gyp": "^9.0.0",
+    "node-gyp": "^10.0.0",
     "prettier": "^2.3.2",
-    "typescript": "~5.2.0"
+    "typescript": "~5.4.0"
   },
   "resolutions": {
-    "@types/react": "^17",
-    "@types/react-dom": "^17"
+    "@types/react": "^18",
+    "@types/react-dom": "^18"
   },
   "prettier": "@spotify/prettier-config",
   "lint-staged": {
@@ -55,5 +53,5 @@
       "prettier --write"
     ]
   },
-  "packageManager": "yarn@4.0.1"
+  "packageManager": "yarn@4.4.1"
 }

packages/app/e2e-tests/app.test.ts

@@ -19,5 +19,9 @@ import { test, expect } from '@playwright/test';
 test('App should render the welcome page', async ({ page }) => {
   await page.goto('/');
 
+  const enterButton = page.getByRole('button', { name: 'Enter' });
+  await expect(enterButton).toBeVisible();
+  await enterButton.click();
+
   await expect(page.getByText('My Company Catalog')).toBeVisible();
 });

packages/app/package.json

@@ -16,44 +16,43 @@
   "dependencies": {
     "@backstage-community/plugin-github-actions": "^0.6.16",
     "@backstage-community/plugin-tech-radar": "^0.7.4",
-    "@backstage/app-defaults": "^1.5.4",
-    "@backstage/catalog-model": "^1.4.5",
-    "@backstage/cli": "^0.26.4",
-    "@backstage/core-app-api": "^1.12.4",
-    "@backstage/core-components": "^0.14.5",
-    "@backstage/core-plugin-api": "^1.9.2",
-    "@backstage/integration-react": "^1.1.26",
-    "@backstage/plugin-api-docs": "^0.11.4",
-    "@backstage/plugin-catalog": "^1.19.0",
-    "@backstage/plugin-catalog-common": "^1.0.22",
-    "@backstage/plugin-catalog-graph": "^0.4.4",
-    "@backstage/plugin-catalog-import": "^0.10.10",
-    "@backstage/plugin-catalog-react": "^1.11.3",
-    "@backstage/plugin-org": "^0.6.24",
-    "@backstage/plugin-permission-react": "^0.4.22",
-    "@backstage/plugin-scaffolder": "^1.19.3",
-    "@backstage/plugin-search": "^1.4.10",
-    "@backstage/plugin-search-react": "^1.7.10",
-    "@backstage/plugin-techdocs": "^1.10.4",
-    "@backstage/plugin-techdocs-module-addons-contrib": "^1.1.9",
-    "@backstage/plugin-techdocs-react": "^1.2.3",
-    "@backstage/plugin-user-settings": "^0.8.5",
-    "@backstage/theme": "^0.5.3",
+    "@backstage/app-defaults": "^1.5.12",
+    "@backstage/catalog-model": "^1.7.0",
+    "@backstage/cli": "^0.28.0",
+    "@backstage/core-app-api": "^1.15.1",
+    "@backstage/core-components": "^0.15.1",
+    "@backstage/core-plugin-api": "^1.10.0",
+    "@backstage/integration-react": "^1.2.0",
+    "@backstage/plugin-api-docs": "^0.11.11",
+    "@backstage/plugin-catalog": "^1.24.0",
+    "@backstage/plugin-catalog-common": "^1.1.0",
+    "@backstage/plugin-catalog-graph": "^0.4.11",
+    "@backstage/plugin-catalog-import": "^0.12.5",
+    "@backstage/plugin-catalog-react": "^1.14.0",
+    "@backstage/plugin-kubernetes": "^0.11.16",
+    "@backstage/plugin-org": "^0.6.31",
+    "@backstage/plugin-permission-react": "^0.4.27",
+    "@backstage/plugin-scaffolder": "^1.26.0",
+    "@backstage/plugin-search": "^1.4.18",
+    "@backstage/plugin-search-react": "^1.8.1",
+    "@backstage/plugin-techdocs": "^1.11.0",
+    "@backstage/plugin-techdocs-module-addons-contrib": "^1.1.16",
+    "@backstage/plugin-techdocs-react": "^1.2.9",
+    "@backstage/plugin-user-settings": "^0.8.14",
+    "@backstage/theme": "^0.6.0",
     "@material-ui/core": "^4.12.2",
     "@material-ui/icons": "^4.9.1",
-    "history": "^5.0.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.0.2",
+    "react-dom": "^18.0.2",
     "react-router": "^6.3.0",
-    "react-router-dom": "^6.3.0",
-    "react-use": "^17.2.4"
+    "react-router-dom": "^6.3.0"
   },
   "devDependencies": {
-    "@backstage/test-utils": "^1.5.4",
+    "@backstage/test-utils": "^1.7.0",
     "@playwright/test": "^1.32.3",
-    "@testing-library/dom": "^8.0.0",
-    "@testing-library/jest-dom": "^5.10.1",
-    "@testing-library/react": "^12.1.3",
+    "@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"

packages/app/public/index.html

@@ -6,7 +6,7 @@
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
-      content="Backstage is an open platform for building developer portals"
+      content="Backstage is an open source framework for building developer portals"
     />
     <!--
       manifest.json provides metadata used when your web app is installed on a
@@ -41,7 +41,7 @@
       href="<%= publicPath %>/safari-pinned-tab.svg"
       color="#5bbad5"
     />
-    <title><%= config.getString('app.title') %></title>
+    <title><%= config.getOptionalString('app.title') ?? 'Backstage' %></title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

packages/app/src/App.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { renderWithEffects } from '@backstage/test-utils';
+import { render, waitFor } from '@testing-library/react';
 import App from './App';
 
 describe('App', () => {
@@ -20,7 +20,10 @@ describe('App', () => {
       ] as any,
     };
 
-    const rendered = await renderWithEffects(<App />);
-    expect(rendered.baseElement).toBeInTheDocument();
+    const rendered = render(<App />);
+
+    await waitFor(() => {
+      expect(rendered.baseElement).toBeInTheDocument();
+    });
   });
 });

packages/app/src/App.tsx

@@ -1,28 +1,49 @@
 import React from 'react';
 import { Navigate, Route } from 'react-router-dom';
-
-import { createApp } from '@backstage/app-defaults';
-import { AppRouter, FlatRoutes } from '@backstage/core-app-api';
-import { AlertDisplay, OAuthRequestDialog, ProxiedSignInPage } from '@backstage/core-components';
 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 {
+  CatalogEntityPage,
+  CatalogIndexPage,
+  catalogPlugin,
+} from '@backstage/plugin-catalog';
+import {
+  CatalogImportPage,
+  catalogImportPlugin,
+} from '@backstage/plugin-catalog-import';
 import { ScaffolderPage, scaffolderPlugin } from '@backstage/plugin-scaffolder';
+import { orgPlugin } from '@backstage/plugin-org';
 import { SearchPage } from '@backstage/plugin-search';
-import { TechRadarPage } from '@backstage-community/plugin-tech-radar';
-import { TechDocsIndexPage, techdocsPlugin, TechDocsReaderPage } from '@backstage/plugin-techdocs';
-import { ReportIssue } from '@backstage/plugin-techdocs-module-addons-contrib';
+import {
+  TechDocsIndexPage,
+  techdocsPlugin,
+  TechDocsReaderPage,
+} from '@backstage/plugin-techdocs';
 import { TechDocsAddons } from '@backstage/plugin-techdocs-react';
+import { ReportIssue } from '@backstage/plugin-techdocs-module-addons-contrib';
 import { UserSettingsPage } from '@backstage/plugin-user-settings';
-
 import { apis } from './apis';
 import { entityPage } from './components/catalog/EntityPage';
-import { Root } from './components/Root';
 import { searchPage } from './components/search/SearchPage';
+import { Root } from './components/Root';
+
+import {
+  AlertDisplay,
+  OAuthRequestDialog,
+  ProxiedSignInPage,
+  SignInPage,
+} from '@backstage/core-components';
+import { createApp } from '@backstage/app-defaults';
+import { AppRouter, FlatRoutes } from '@backstage/core-app-api';
+import { CatalogGraphPage } from '@backstage/plugin-catalog-graph';
+import { RequirePermission } from '@backstage/plugin-permission-react';
+import { catalogEntityCreatePermission } from '@backstage/plugin-catalog-common/alpha';
+import {
+  configApiRef,
+  googleAuthApiRef,
+  useApi,
+} from '@backstage/core-plugin-api';
+
+// import { TechRadarPage } from '@backstage-community/plugin-tech-radar';
 
 const app = createApp({
   apis,
@@ -44,7 +65,13 @@ const app = createApp({
     });
   },
   components: {
-    SignInPage: props => <ProxiedSignInPage {...props} provider="gcp-iap" />,
+    SignInPage: props => {
+      const configApi = useApi(configApiRef);
+      if (configApi.getOptionalString('auth.environment') === 'development') {
+        return <SignInPage {...props} providers={['guest']} />;
+      }
+      return <ProxiedSignInPage {...props} provider="gcp-iap" />;
+    },
   },
 });
 
@@ -69,10 +96,6 @@ const routes = (
     </Route>
     <Route path="/create" element={<ScaffolderPage />} />
     <Route path="/api-docs" element={<ApiExplorerPage />} />
-    <Route
-      path="/tech-radar"
-      element={<TechRadarPage width={1500} height={800} />}
-    />
     <Route
       path="/catalog-import"
       element={

packages/app/src/components/Root/Root.tsx

@@ -2,7 +2,6 @@ import React, { PropsWithChildren } from 'react';
 import { makeStyles } from '@material-ui/core';
 import HomeIcon from '@material-ui/icons/Home';
 import ExtensionIcon from '@material-ui/icons/Extension';
-import MapIcon from '@material-ui/icons/MyLocation';
 import LibraryBooks from '@material-ui/icons/LibraryBooks';
 import CreateComponentIcon from '@material-ui/icons/AddCircleOutline';
 import LogoFull from './LogoFull';
@@ -26,6 +25,8 @@ import {
 } 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';
 
 const useSidebarLogoStyles = makeStyles({
   root: {
@@ -66,13 +67,18 @@ export const Root = ({ children }: PropsWithChildren<{}>) => (
       <SidebarGroup label="Menu" icon={<MenuIcon />}>
         {/* Global nav, not org-specific */}
         <SidebarItem icon={HomeIcon} to="catalog" text="Home" />
+        <MyGroupsSidebarItem
+          singularTitle="My Group"
+          pluralTitle="My Groups"
+          icon={GroupIcon}
+        />
         <SidebarItem icon={ExtensionIcon} to="api-docs" text="APIs" />
         <SidebarItem icon={LibraryBooks} to="docs" text="Docs" />
         <SidebarItem icon={CreateComponentIcon} to="create" text="Create..." />
         {/* End global nav */}
         <SidebarDivider />
         <SidebarScrollWrapper>
-          <SidebarItem icon={MapIcon} to="tech-radar" text="Tech Radar" />
+          {/* Items in this group will be scrollable if they run out of space */}
         </SidebarScrollWrapper>
       </SidebarGroup>
       <SidebarSpace />