Set up CI for plugins (#10)

This will lint, test, and publish individual plugins.

.github/workflows/publish.yaml

@@ -0,0 +1,32 @@
+name: Publish
+
+# This workflow will publish releases published on GitHub to NPM.
+
+on:
+  release:
+    types:
+      - released
+  workflow_dispatch:
+    inputs:
+      tag:
+        description: The tag to publish (for example "coder/v0.0.0")
+        type: string
+        required: true
+
+concurrency: ${{ github.workflow }}-${{ github.ref }}
+
+jobs:
+  npm:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: robinraju/release-downloader@v1.9
+        with:
+          tag: ${{ github.event.inputs.tag || github.ref_name }}
+          fileName: "*.tgz"
+      # Although we are publishing the tarball, yarn will not actually look at
+      # the package.json in the tarball so we have to extract it first.
+      - run: tar -xf *.tgz
+      - run: mv package/package.json package.json
+      - run: yarn publish *.tgz
+        env:
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

.github/workflows/release.yaml

@@ -0,0 +1,54 @@
+name: Release
+
+# This workflow will draft a release for a plugin when tagged.  The tag format
+# is <name>/v<version> without the backstage-plugin- prefix, e.g. coder/v0.0.0
+
+on:
+  push:
+    tags:
+      - "*/v*"
+
+permissions:
+  contents: write # For creating releases.
+
+concurrency: ${{ github.workflow }}-${{ github.ref }}
+
+jobs:
+  split-tag:
+    runs-on: ubuntu-latest
+    outputs:
+      plugin: ${{ steps.split.outputs.plugin }}
+      version: ${{ steps.split.outputs.version }}
+    steps:
+      - env:
+          TAG: ${{ github.ref_name }}
+        id: split
+        run: |
+          parts=(${TAG//\/v/ })
+          echo "plugin=${parts[0]}" >> $GITHUB_OUTPUT
+          echo "version=${parts[1]}" >> $GITHUB_OUTPUT
+  plugin:
+    needs: split-tag
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: plugins/backstage-plugin-${{ needs.split-tag.outputs.plugin }}
+    name: ${{ needs.split-tag.outputs.plugin }} v${{ needs.split-tag.outputs.version }}
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: .node-version
+          cache: yarn
+      - run: yarn install --frozen-lockfile
+      - run: yarn lint
+      - run: yarn tsc
+      - run: yarn test
+      - run: yarn build
+      # Version it with the version in the tag and upload it to a draft release.
+      - run: yarn version --new-version ${{ needs.split-tag.outputs.version }}
+      - run: yarn pack
+      - uses: softprops/action-gh-release@v1
+        with:
+          draft: true
+          files: plugins/backstage-plugin-${{ needs.split-tag.outputs.plugin }}/*.tgz

.github/workflows/test.yaml

@@ -0,0 +1,63 @@
+name: Test
+
+# This workflow will lint and test a plugin whenever it or CI changes.
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+
+# Cancel in-progress runs for pull requests when developers push changes.
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: ${{ github.ref != 'refs/heads/main' }}
+
+jobs:
+  changes:
+    runs-on: ubuntu-latest
+    outputs:
+      plugins: ${{ steps.filter.outputs.changes }}
+    steps:
+      # Pull requests do not need to check out the code to detect changes
+      # because the action fetches changed files through the API.
+      - uses: actions/checkout@v4
+        if: github.event_name != 'pull_request'
+      - uses: dorny/paths-filter@v3
+        id: filter
+        with:
+          filters: |
+            coder:
+              - ".github/workflows/build.yaml"
+              - "plugins/backstage-plugin-coder/**"
+  plugin:
+    needs: changes
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        plugin: ${{ fromJSON(needs.changes.outputs.plugins) }}
+    name: ${{ matrix.plugin }}
+    defaults:
+      run:
+        working-directory: plugins/backstage-plugin-${{ matrix.plugin }}
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: .node-version
+          cache: yarn
+      - run: yarn install --frozen-lockfile
+      - run: yarn lint
+      - run: yarn tsc
+      - run: yarn test
+      - run: yarn build
+      # Version it with the SHA and upload to the run as an artifact in case
+      # someone needs to download it for testing.
+      - run: yarn version --new-version "0.0.0-devel+$GITHUB_SHA"
+      - run: yarn pack
+      - uses: actions/upload-artifact@v4
+        with:
+          name: ${{ matrix.plugin }}
+          path: plugins/backstage-plugin-${{ matrix.plugin }}/*.tgz

.node-version

@@ -0,0 +1 @@
+18.19.0

.yarnrc

@@ -0,0 +1,4 @@
+# We add the tags ourselves and do not commit the version bump; prevent Yarn
+# from trying to do so.
+version-git-tag false
+version-commit-hooks false

README.md

@@ -1,10 +1,36 @@
 # [Backstage](https://backstage.io)
 
-This is your newly scaffolded Backstage App, Good Luck!
+## Contributing
 
-To start the app, run:
+To start the app:
 
 ```sh
 yarn install
 yarn dev
 ```
+
+To run an individual plugin:
+
+```sh
+cd plugins/backstage-plugin-$name
+yarn install
+yarn start
+```
+
+Note that the Coder plugin does not support running like this as it currently
+uses a backend proxy that is not available when running independently of the
+Backstage app.
+
+## Releasing
+
+To draft a release for a plugin push a tag named `$name/v$version` without the
+`backstage-plugin-` prefix.  For example:
+
+```sh
+git tag -a coder/v0.0.0 -m "coder v0.0.0"
+git push origin coder/v0.0.0
+```
+
+This will kick off an action that will create a draft release for the plugin.
+Once you have reviewed the release you can publish it and another action will
+publish the plugin to NPM.

packages/app/package.json

@@ -39,7 +39,7 @@
     "@backstage/plugin-techdocs-react": "^1.1.15",
     "@backstage/plugin-user-settings": "^0.8.0",
     "@backstage/theme": "^0.5.0",
-    "@coder/backstage-plugin-coder": "^0.1.0",
+    "@coder/backstage-plugin-coder": "^0.0.0",
     "@material-ui/core": "^4.12.2",
     "@material-ui/icons": "^4.9.1",
     "history": "^5.0.0",

packages/app/src/App.tsx

@@ -79,13 +79,6 @@ const app = createApp({
   },
 });
 
-/**
- * 2024-02-13 - The version of TechDocsAddons that Backstage ships with makes
- * the TypeScript compiler complain when you try to render it as JSX. This seems
- * like it's just a type mismatch issue, and things still work at runtime
- */
-const FixedTechDocsAddons = TechDocsAddons as React.FC<unknown>;
-
 const routes = (
   <FlatRoutes>
     <Route path="/" element={<Navigate to="catalog" />} />
@@ -101,9 +94,9 @@ const routes = (
       path="/docs/:namespace/:kind/:name/*"
       element={<TechDocsReaderPage />}
     >
-      <FixedTechDocsAddons>
+      <TechDocsAddons>
         <ReportIssue />
-      </FixedTechDocsAddons>
+      </TechDocsAddons>
     </Route>
     <Route path="/create" element={<ScaffolderPage />} />
     <Route path="/api-docs" element={<ApiExplorerPage />} />

packages/app/src/components/catalog/EntityPage.tsx

@@ -60,18 +60,11 @@ import { ReportIssue } from '@backstage/plugin-techdocs-module-addons-contrib';
 
 import { CoderWorkspacesCard } from '@coder/backstage-plugin-coder';
 
-/**
- * 2024-02-13 - The version of TechDocsAddons that Backstage ships with makes
- * the TypeScript compiler complain when you try to render it as JSX. This seems
- * like it's just a type mismatch issue, and things still work at runtime
- */
-const FixedTechDocsAddons = TechDocsAddons as React.FC<unknown>;
-
 const techdocsContent = (
   <EntityTechdocsContent>
-    <FixedTechDocsAddons>
+    <TechDocsAddons>
       <ReportIssue />
-    </FixedTechDocsAddons>
+    </TechDocsAddons>
   </EntityTechdocsContent>
 );
 

plugins/backstage-plugin-coder/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coder/backstage-plugin-coder",
-  "version": "0.1.0",
+  "version": "0.0.0",
   "main": "src/index.ts",
   "types": "src/index.ts",
   "license": "Apache-2.0",

plugins/backstage-plugin-coder/src/components/CoderErrorBoundary/CoderErrorBoundary.tsx

@@ -1,6 +1,5 @@
 import React, {
   type ErrorInfo,
-  type FC,
   type ReactNode,
   Component,
 } from 'react';
@@ -39,7 +38,7 @@ class ErrorBoundaryCore extends Component<
   }
 
   componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
-    this.props.onError(error, errorInfo.componentStack);
+    this.props.onError(error, errorInfo.componentStack || "no details");
   }
 
   render() {
@@ -53,10 +52,10 @@ type CoderErrorBoundaryProps = {
   fallbackUi?: ReactNode;
 };
 
-export const CoderErrorBoundary: FC<CoderErrorBoundaryProps> = ({
+export const CoderErrorBoundary = ({
   children,
   fallbackUi,
-}) => {
+}: CoderErrorBoundaryProps) => {
   const errorApi = useApi(errorApiRef);
   const fallbackContent = fallbackUi ?? <FallbackUi />;
 

yarn.lock

@@ -9571,7 +9571,7 @@ anymatch@^3.0.3, anymatch@~3.1.2:
     "@backstage/plugin-techdocs-react" "^1.1.15"
     "@backstage/plugin-user-settings" "^0.8.0"
     "@backstage/theme" "^0.5.0"
-    "@coder/backstage-plugin-coder" "^0.1.0"
+    "@coder/backstage-plugin-coder" "^0.0.0"
     "@material-ui/core" "^4.12.2"
     "@material-ui/icons" "^4.9.1"
     history "^5.0.0"