feat(theme): add plugins to test common components and issues

Signed-off-by: Christoph Jerolimov <[email protected]>

workspaces/theme/package.json

@@ -14,7 +14,7 @@
     "tsc:full": "tsc --skipLibCheck false --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",
     "build-image": "yarn workspace backend build-image",
     "clean": "backstage-cli repo clean",
     "test": "backstage-cli repo test",

workspaces/theme/packages/app/package.json

@@ -45,7 +45,10 @@
     "@backstage/theme": "^0.6.0",
     "@material-ui/core": "^4.12.2",
     "@material-ui/icons": "^4.9.1",
-    "@red-hat-developer-hub/theme": "workspace:^",
+    "@red-hat-developer-hub/backstage-plugin-bsc-test": "workspace:^",
+    "@red-hat-developer-hub/backstage-plugin-mui4-test": "workspace:^",
+    "@red-hat-developer-hub/backstage-plugin-mui5-test": "workspace:^",
+    "@red-hat-developer-hub/backstage-plugin-theme": "workspace:^",
     "react": "^18.0.2",
     "react-dom": "^18.0.2",
     "react-router": "^6.3.0",

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

@@ -51,6 +51,9 @@ 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 { BSCTestPage } from '@red-hat-developer-hub/backstage-plugin-bsc-test';
+import { MUI4TestPage } from '@red-hat-developer-hub/backstage-plugin-mui4-test';
+import { MUI5TestPage } from '@red-hat-developer-hub/backstage-plugin-mui5-test';
 
 const app = createApp({
   apis,
@@ -110,6 +113,9 @@ const routes = (
     </Route>
     <Route path="/settings" element={<UserSettingsPage />} />
     <Route path="/catalog-graph" element={<CatalogGraphPage />} />
+    <Route path="/bsc-tests" element={<BSCTestPage />} />
+    <Route path="/mui4-tests" element={<MUI4TestPage />} />
+    <Route path="/mui5-tests" element={<MUI5TestPage />} />
   </FlatRoutes>
 );
 

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

@@ -92,6 +92,10 @@ export const Root = ({ children }: PropsWithChildren<{}>) => (
         <SidebarItem icon={CreateComponentIcon} to="create" text="Create..." />
         {/* End global nav */}
         <SidebarDivider />
+        <SidebarItem icon={ExtensionIcon} to="bsc-tests" text="BSC tests" />
+        <SidebarItem icon={ExtensionIcon} to="mui4-tests" text="MUI v4 tests" />
+        <SidebarItem icon={ExtensionIcon} to="mui5-tests" text="MUI v5 tests" />
+        <SidebarDivider />
         <SidebarScrollWrapper>
           {/* Items in this group will be scrollable if they run out of space */}
         </SidebarScrollWrapper>

workspaces/theme/plugins/bsc-test/README.md

@@ -0,0 +1,13 @@
+# bsc-test
+
+Welcome to the bsc-test plugin!
+
+_This plugin was created through the Backstage CLI_
+
+## Getting started
+
+Your plugin has been added to the example app in this repository, meaning you'll be able to access it by running `yarn start` in the root directory, and then navigating to [/bsc-test](http://localhost:3000/bsc-test).
+
+You can also serve the plugin in isolation by running `yarn start` in the plugin directory.
+This method of serving the plugin provides quicker iteration speed and a faster startup and hot reloads.
+It is only meant for local development, and the setup for it can be found inside the [/dev](./dev) directory.

workspaces/theme/plugins/bsc-test/dev/index.tsx

@@ -0,0 +1,27 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * 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 React from 'react';
+import { createDevApp } from '@backstage/dev-utils';
+import { bscTestPlugin, BSCTestPage } from '../src/plugin';
+
+createDevApp()
+  .registerPlugin(bscTestPlugin)
+  .addPage({
+    element: <BSCTestPage />,
+    title: 'Root Page',
+    path: '/bsc-test',
+  })
+  .render();

workspaces/theme/plugins/bsc-test/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@red-hat-developer-hub/backstage-plugin-bsc-test",
+  "version": "0.1.0",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "license": "Apache-2.0",
+  "private": true,
+  "publishConfig": {
+    "access": "public",
+    "main": "dist/index.esm.js",
+    "types": "dist/index.d.ts"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/redhat-developer/rhdh-plugins",
+    "directory": "workspaces/theme/plugins/bsc-test"
+  },
+  "backstage": {
+    "role": "frontend-plugin",
+    "pluginId": "bsc-test",
+    "pluginPackages": [
+      "@red-hat-developer-hub/backstage-plugin-bsc-test"
+    ]
+  },
+  "sideEffects": false,
+  "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/core-components": "^0.15.1",
+    "@backstage/core-plugin-api": "^1.10.0",
+    "@backstage/plugin-user-settings": "^0.8.16"
+  },
+  "peerDependencies": {
+    "react": "^16.13.1 || ^17.0.0 || ^18.0.0"
+  },
+  "devDependencies": {
+    "@backstage/cli": "^0.28.0",
+    "@backstage/core-app-api": "^1.15.1",
+    "@backstage/dev-utils": "^1.1.2",
+    "@backstage/test-utils": "^1.7.0",
+    "@testing-library/jest-dom": "^6.0.0",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.0.0",
+    "msw": "^1.0.0",
+    "react": "^16.13.1 || ^17.0.0 || ^18.0.0"
+  },
+  "files": [
+    "dist"
+  ]
+}

workspaces/theme/plugins/bsc-test/report.api.md

@@ -0,0 +1,25 @@
+## API Report File for "@red-hat-developer-hub/backstage-plugin-bsc-test"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+/// <reference types="react" />
+
+import { BackstagePlugin } from '@backstage/core-plugin-api';
+import { JSX as JSX_2 } from 'react';
+import { RouteRef } from '@backstage/core-plugin-api';
+
+// @public (undocumented)
+export const BSCTestPage: () => JSX_2.Element;
+
+// @public (undocumented)
+export const bscTestPlugin: BackstagePlugin<
+  {
+    root: RouteRef<undefined>;
+  },
+  {},
+  {}
+>;
+
+// (No @packageDocumentation comment for this package)
+```

workspaces/theme/plugins/bsc-test/src/components/BSCTestPage.tsx

@@ -0,0 +1,43 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * 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 React from 'react';
+import { Page, Header, TabbedLayout } from '@backstage/core-components';
+import { UserSettingsThemeToggle } from '@backstage/plugin-user-settings';
+
+import { TableExample } from './TableExample';
+import { CardsExample } from './CardExample';
+
+export const BSCTestPage = () => {
+  return (
+    <Page themeId="tool">
+      <Header title="Backstage Components Tests">
+        <UserSettingsThemeToggle />
+      </Header>
+      <TabbedLayout>
+        <TabbedLayout.Route
+          path="/table-example"
+          title="Table example"
+          children={<TableExample />}
+        />
+        <TabbedLayout.Route
+          path="/card-example"
+          title="Card example"
+          children={<CardsExample />}
+        />
+      </TabbedLayout>
+    </Page>
+  );
+};

workspaces/theme/plugins/bsc-test/src/components/CardExample.tsx

@@ -0,0 +1,30 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * 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 React from 'react';
+import { InfoCard } from '@backstage/core-components';
+
+export const CardsExample = () => {
+  return (
+    <InfoCard title="Information card">
+      <h1>Headline 1</h1>
+      <h2>Headline 2</h2>
+      <h3>Headline 3</h3>
+      <h4>Headline 4</h4>
+      <h5>Headline 5</h5>
+      <h6>Headline 6</h6>
+    </InfoCard>
+  );
+};