feat(github-deployments): add support for new frontend system

Adding github-deployments support for the new frontend system.

Signed-off-by: Craig Tracey <craig@arctir.com>

workspaces/github-deployments/.changeset/shiny-seals-greet.md

@@ -0,0 +1,5 @@
+---
+'@backstage-community/plugin-github-deployments': patch
+---
+
+Adding support for the new frontend system, available at the `/alpha` export.

workspaces/github-deployments/plugins/github-deployments/README.md

@@ -67,3 +67,31 @@ integrations:
     - host: 'your-github-host.com'
       apiBaseUrl: 'https://api.your-github-host.com'
 ```
+
+## Integrating with the new Frontend System
+
+Follow this section if you are using Backstage's [new frontend system](https://backstage.io/docs/frontend-system/).
+
+1. Import `githubDeploymentsPlugin` in your `App.tsx` and add it to your app's `features` array:
+
+```typescript
+import githubDeploymentsPlugin from '@backstage-community/plugin-github-deployments/alpha';
+// ...
+export const app = createApp({
+  features: [
+    // ...
+    githubDeploymentsPlugin,
+    // ...
+  ],
+});
+```
+
+2. Next, enable your desired extensions in `app-config.yaml`
+
+```yaml
+app:
+  extensions:
+    - entity-card:github-deployments/overview
+```
+
+3. Whichever extensions you've enabled should now appear in your entity page.

workspaces/github-deployments/plugins/github-deployments/package.json

@@ -10,9 +10,22 @@
     ]
   },
   "publishConfig": {
-    "access": "public",
-    "main": "dist/index.esm.js",
-    "types": "dist/index.d.ts"
+    "access": "public"
+  },
+  "exports": {
+    ".": "./src/index.ts",
+    "./alpha": "./src/alpha.ts",
+    "./package.json": "./package.json"
+  },
+  "typesVersions": {
+    "*": {
+      "alpha": [
+        "src/alpha.ts"
+      ],
+      "package.json": [
+        "package.json"
+      ]
+    }
   },
   "homepage": "https://backstage.io",
   "repository": {
@@ -38,9 +51,11 @@
   },
   "dependencies": {
     "@backstage/catalog-model": "^1.7.0",
+    "@backstage/core-compat-api": "^0.3.1",
     "@backstage/core-components": "^0.15.1",
     "@backstage/core-plugin-api": "^1.10.0",
     "@backstage/errors": "^1.2.4",
+    "@backstage/frontend-plugin-api": "^0.9.0",
     "@backstage/integration": "^1.15.1",
     "@backstage/integration-react": "^1.2.0",
     "@backstage/plugin-catalog-react": "^1.14.0",
@@ -55,6 +70,7 @@
     "@backstage/cli": "^0.28.0",
     "@backstage/core-app-api": "^1.15.1",
     "@backstage/dev-utils": "^1.1.2",
+    "@backstage/frontend-test-utils": "^0.2.1",
     "@backstage/test-utils": "^1.7.0",
     "@testing-library/dom": "^10.0.0",
     "@testing-library/jest-dom": "^6.0.0",

workspaces/github-deployments/plugins/github-deployments/report-alpha.api.md

@@ -0,0 +1,74 @@
+## API Report File for "@backstage-community/plugin-github-deployments"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+/// <reference types="react" />
+
+import { AnyApiFactory } from '@backstage/core-plugin-api';
+import { ConfigurableExtensionDataRef } from '@backstage/frontend-plugin-api';
+import { Entity } from '@backstage/catalog-model';
+import { ExtensionDefinition } from '@backstage/frontend-plugin-api';
+import { FrontendPlugin } from '@backstage/frontend-plugin-api';
+import { JSX as JSX_2 } from 'react';
+import { RouteRef } from '@backstage/frontend-plugin-api';
+
+// @alpha (undocumented)
+const _default: FrontendPlugin<
+  {
+    entityContent: RouteRef<undefined>;
+  },
+  {},
+  {
+    'entity-card:github-deployments/overview': ExtensionDefinition<{
+      kind: 'entity-card';
+      name: 'overview';
+      config: {
+        filter: string | undefined;
+      };
+      configInput: {
+        filter?: string | undefined;
+      };
+      output:
+        | ConfigurableExtensionDataRef<JSX_2.Element, 'core.reactElement', {}>
+        | ConfigurableExtensionDataRef<
+            (entity: Entity) => boolean,
+            'catalog.entity-filter-function',
+            {
+              optional: true;
+            }
+          >
+        | ConfigurableExtensionDataRef<
+            string,
+            'catalog.entity-filter-expression',
+            {
+              optional: true;
+            }
+          >;
+      inputs: {};
+      params: {
+        loader: () => Promise<JSX.Element>;
+        filter?: string | ((entity: Entity) => boolean) | undefined;
+      };
+    }>;
+    'api:github-deployments': ExtensionDefinition<{
+      kind: 'api';
+      name: undefined;
+      config: {};
+      configInput: {};
+      output: ConfigurableExtensionDataRef<
+        AnyApiFactory,
+        'core.api.factory',
+        {}
+      >;
+      inputs: {};
+      params: {
+        factory: AnyApiFactory;
+      };
+    }>;
+  }
+>;
+export default _default;
+
+// (No @packageDocumentation comment for this package)
+```

workspaces/github-deployments/plugins/github-deployments/src/alpha.ts

@@ -0,0 +1,33 @@
+/*
+ * 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 { convertLegacyRouteRefs } from '@backstage/core-compat-api';
+import { createFrontendPlugin } from '@backstage/frontend-plugin-api';
+import {
+  entityGithubDeploymentsCard,
+  githubDeploymentsApiExtension,
+} from './alpha/index';
+import { rootRouteRef } from './routes';
+
+/**
+ * @alpha
+ */
+export default createFrontendPlugin({
+  id: 'github-deployments',
+  routes: convertLegacyRouteRefs({
+    entityContent: rootRouteRef,
+  }),
+  extensions: [entityGithubDeploymentsCard, githubDeploymentsApiExtension],
+});

workspaces/github-deployments/plugins/github-deployments/src/alpha/apis.ts

@@ -0,0 +1,39 @@
+/*
+ * 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 { scmIntegrationsApiRef } from '@backstage/integration-react';
+import {
+  ApiBlueprint,
+  createApiFactory,
+  githubAuthApiRef,
+} from '@backstage/frontend-plugin-api';
+import { githubDeploymentsApiRef, GithubDeploymentsApiClient } from '../api';
+
+/**
+ * @alpha
+ */
+export const githubDeploymentsApiExtension = ApiBlueprint.make({
+  params: {
+    factory: createApiFactory({
+      api: githubDeploymentsApiRef,
+      deps: {
+        scmIntegrationsApi: scmIntegrationsApiRef,
+        githubAuthApi: githubAuthApiRef,
+      },
+      factory: ({ scmIntegrationsApi, githubAuthApi }) =>
+        new GithubDeploymentsApiClient({ scmIntegrationsApi, githubAuthApi }),
+    }),
+  },
+});

workspaces/github-deployments/plugins/github-deployments/src/alpha/entityCards.test.tsx

@@ -0,0 +1,72 @@
+/*
+ * 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 { screen, waitFor } from '@testing-library/react';
+import {
+  createExtensionTester,
+  renderInTestApp,
+  TestApiProvider,
+} from '@backstage/frontend-test-utils';
+import * as cards from './entityCards';
+import { EntityProvider } from '@backstage/plugin-catalog-react';
+import { Entity } from '@backstage/catalog-model';
+import React from 'react';
+import {
+  GithubDeployment,
+  GithubDeploymentsApi,
+  githubDeploymentsApiRef,
+} from '../api';
+
+const entityComponent = {
+  metadata: {
+    annotations: {
+      'github.com/project-slug': 'backstage/backstage',
+      'backstage.io/source-location':
+        'url:https://github.com/backstage/backstage',
+    },
+    name: 'backstage',
+  },
+  apiVersion: 'backstage.io/v1alpha1',
+  kind: 'Component',
+} as unknown as Entity;
+
+const mockGithubDeployementsApi = {
+  listDeployments: async (): Promise<GithubDeployment[]> => {
+    return [] as GithubDeployment[];
+  },
+} as GithubDeploymentsApi;
+
+const apis = [[githubDeploymentsApiRef, mockGithubDeployementsApi]] as const;
+
+describe('Entity card extensions', () => {
+  it('should render', async () => {
+    renderInTestApp(
+      <TestApiProvider apis={apis}>
+        <EntityProvider entity={entityComponent}>
+          {createExtensionTester(
+            cards.entityGithubDeploymentsCard,
+          ).reactElement()}
+        </EntityProvider>
+      </TestApiProvider>,
+    );
+
+    await waitFor(
+      () => {
+        expect(screen.getByText('GitHub Deployments')).toBeInTheDocument();
+      },
+      { timeout: 5000 },
+    );
+  });
+});

workspaces/github-deployments/plugins/github-deployments/src/alpha/entityCards.tsx

@@ -0,0 +1,31 @@
+/*
+ * 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 { EntityCardBlueprint } from '@backstage/plugin-catalog-react/alpha';
+
+/**
+ * @alpha
+ */
+export const entityGithubDeploymentsCard = EntityCardBlueprint.make({
+  name: 'overview',
+  params: {
+    filter: 'kind:component',
+    loader: () =>
+      import('../components/GithubDeploymentsCard').then(m => (
+        <m.GithubDeploymentsCard />
+      )),
+  },
+});

workspaces/github-deployments/plugins/github-deployments/src/alpha/index.ts

@@ -0,0 +1,17 @@
+/*
+ * 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.
+ */
+export * from './apis';
+export * from './entityCards';

workspaces/github-deployments/plugins/github-deployments/src/components/GithubDeploymentsCard.tsx

@@ -96,6 +96,7 @@ export const GithubDeploymentsCard = (props: {
     <MissingAnnotationEmptyState annotation={GITHUB_PROJECT_SLUG_ANNOTATION} />
   ) : (
     <GithubDeploymentsComponent
+      data-testid="deployments-component"
       projectSlug={
         entity?.metadata.annotations?.[GITHUB_PROJECT_SLUG_ANNOTATION] || ''
       }

workspaces/github-deployments/plugins/github-deployments/src/routes.ts

@@ -0,0 +1,20 @@
+/*
+ * Copyright 2022 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 { createRouteRef } from '@backstage/core-plugin-api';
+
+export const rootRouteRef = createRouteRef({
+  id: 'github-deployments',
+});

workspaces/github-deployments/yarn.lock

@@ -2519,10 +2519,13 @@ __metadata:
     "@backstage/catalog-model": ^1.7.0
     "@backstage/cli": ^0.28.0
     "@backstage/core-app-api": ^1.15.1
+    "@backstage/core-compat-api": ^0.3.1
     "@backstage/core-components": ^0.15.1
     "@backstage/core-plugin-api": ^1.10.0
     "@backstage/dev-utils": ^1.1.2
     "@backstage/errors": ^1.2.4
+    "@backstage/frontend-plugin-api": ^0.9.0
+    "@backstage/frontend-test-utils": ^0.2.1
     "@backstage/integration": ^1.15.1
     "@backstage/integration-react": ^1.2.0
     "@backstage/plugin-catalog-react": ^1.14.0