github-actions: migrate to new composability API

.changeset/selfish-years-pump.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-github-actions': patch
+---
+
+Migrate to new composability API, exporting the plugin instance as `githubActionsPlugin`, the entity content as `EntityGitHubActionsContent`, entity conditional as `isGitHubActionsAvailable`, and entity cards as `EntityLatestGitHubActionRunCard`, `EntityLatestGitHubActionsForBranchCard`, and `EntityRecentGitHubActionsRunsCard`.

plugins/github-actions/dev/index.tsx

@@ -15,6 +15,6 @@
  */
 
 import { createDevApp } from '@backstage/dev-utils';
-import { plugin } from '../src/plugin';
+import { githubActionsPlugin } from '../src/plugin';
 
-createDevApp().registerPlugin(plugin).render();
+createDevApp().registerPlugin(githubActionsPlugin).render();

plugins/github-actions/package.json

@@ -33,6 +33,7 @@
   },
   "dependencies": {
     "@backstage/catalog-model": "^0.7.0",
+    "@backstage/plugin-catalog-react": "^0.0.1",
     "@backstage/core": "^0.5.0",
     "@backstage/integration": "^0.3.1",
     "@backstage/theme": "^0.2.2",

plugins/github-actions/src/components/Cards/Cards.tsx

@@ -17,6 +17,7 @@ import React, { useEffect } from 'react';
 import { useWorkflowRuns } from '../useWorkflowRuns';
 import { WorkflowRun, WorkflowRunsTable } from '../WorkflowRunsTable';
 import { Entity } from '@backstage/catalog-model';
+import { useEntity } from '@backstage/plugin-catalog-react';
 import { readGitHubIntegrationConfigs } from '@backstage/integration';
 import { WorkflowRunStatus } from '../WorkflowRunStatus';
 import {
@@ -81,11 +82,11 @@ const WidgetContent = ({
 };
 
 export const LatestWorkflowRunCard = ({
-  entity,
   branch = 'master',
   // Display the card full height suitable for
   variant,
 }: Props) => {
+  const { entity } = useEntity();
   const config = useApi(configApiRef);
   const errorApi = useApi(errorApiRef);
   // TODO: Get github hostname from metadata annotation
@@ -121,17 +122,21 @@ export const LatestWorkflowRunCard = ({
 };
 
 type Props = {
-  entity: Entity;
+  /** @deprecated The entity is now grabbed from context instead */
+  entity?: Entity;
   branch: string;
   variant?: string;
 };
 
 export const LatestWorkflowsForBranchCard = ({
-  entity,
   branch = 'master',
   variant,
-}: Props) => (
-  <InfoCard title={`Last ${branch} build`} variant={variant}>
-    <WorkflowRunsTable branch={branch} entity={entity} />
-  </InfoCard>
-);
+}: Props) => {
+  const { entity } = useEntity();
+
+  return (
+    <InfoCard title={`Last ${branch} build`} variant={variant}>
+      <WorkflowRunsTable branch={branch} entity={entity} />
+    </InfoCard>
+  );
+};

plugins/github-actions/src/components/Cards/RecentWorkflowRunsCard.tsx

@@ -23,6 +23,7 @@ import {
   useApi,
 } from '@backstage/core';
 import { readGitHubIntegrationConfigs } from '@backstage/integration';
+import { useEntity } from '@backstage/plugin-catalog-react';
 import { Button, Link } from '@material-ui/core';
 import React, { useEffect } from 'react';
 import { generatePath, Link as RouterLink } from 'react-router-dom';
@@ -33,7 +34,8 @@ import { WorkflowRunStatus } from '../WorkflowRunStatus';
 const firstLine = (message: string): string => message.split('\n')[0];
 
 export type Props = {
-  entity: Entity;
+  /** @deprecated The entity is now grabbed from context instead */
+  entity?: Entity;
   branch?: string;
   dense?: boolean;
   limit?: number;
@@ -41,12 +43,12 @@ export type Props = {
 };
 
 export const RecentWorkflowRunsCard = ({
-  entity,
   branch,
   dense = false,
   limit = 5,
   variant,
 }: Props) => {
+  const { entity } = useEntity();
   const config = useApi(configApiRef);
   const errorApi = useApi(errorApiRef);
   // TODO: Get github hostname from metadata annotation

plugins/github-actions/src/components/Router.tsx

@@ -15,6 +15,7 @@
  */
 import React from 'react';
 import { Entity } from '@backstage/catalog-model';
+import { useEntity } from '@backstage/plugin-catalog-react';
 import { Routes, Route } from 'react-router';
 import { rootRouteRef, buildRouteRef } from '../plugin';
 import { WorkflowRunDetails } from './WorkflowRunDetails';
@@ -25,10 +26,20 @@ import { MissingAnnotationEmptyState } from '@backstage/core';
 export const isPluginApplicableToEntity = (entity: Entity) =>
   Boolean(entity.metadata.annotations?.[GITHUB_ACTIONS_ANNOTATION]);
 
-export const Router = ({ entity }: { entity: Entity }) =>
-  !isPluginApplicableToEntity(entity) ? (
-    <MissingAnnotationEmptyState annotation={GITHUB_ACTIONS_ANNOTATION} />
-  ) : (
+type Props = {
+  /** @deprecated The entity is now grabbed from context instead */
+  entity?: Entity;
+};
+
+export const Router = (_props: Props) => {
+  const { entity } = useEntity();
+
+  if (!isPluginApplicableToEntity(entity)) {
+    return (
+      <MissingAnnotationEmptyState annotation={GITHUB_ACTIONS_ANNOTATION} />
+    );
+  }
+  return (
     <Routes>
       <Route
         path={`/${rootRouteRef.path}`}
@@ -41,3 +52,4 @@ export const Router = ({ entity }: { entity: Entity }) =>
       )
     </Routes>
   );
+};

plugins/github-actions/src/index.ts

@@ -14,8 +14,19 @@
  * limitations under the License.
  */
 
-export { plugin } from './plugin';
+export {
+  githubActionsPlugin,
+  githubActionsPlugin as plugin,
+  EntityGitHubActionsContent,
+  EntityLatestGitHubActionRunCard,
+  EntityLatestGitHubActionsForBranchCard,
+  EntityRecentGitHubActionsRunsCard,
+} from './plugin';
 export * from './api';
-export { Router, isPluginApplicableToEntity } from './components/Router';
+export {
+  Router,
+  isPluginApplicableToEntity,
+  isPluginApplicableToEntity as isGitHubActionsAvailable,
+} from './components/Router';
 export * from './components/Cards';
 export { GITHUB_ACTIONS_ANNOTATION } from './components/useProjectName';

plugins/github-actions/src/plugin.test.ts

@@ -14,10 +14,10 @@
  * limitations under the License.
  */
 
-import { plugin } from './plugin';
+import { githubActionsPlugin } from './plugin';
 
 describe('github-actions', () => {
   it('should export plugin', () => {
-    expect(plugin).toBeDefined();
+    expect(githubActionsPlugin).toBeDefined();
   });
 });

plugins/github-actions/src/plugin.ts

@@ -20,6 +20,8 @@ import {
   createRouteRef,
   createApiFactory,
   githubAuthApiRef,
+  createRoutableExtension,
+  createComponentExtension,
 } from '@backstage/core';
 import { githubActionsApiRef, GithubActionsClient } from './api';
 
@@ -34,7 +36,7 @@ export const buildRouteRef = createRouteRef({
   title: 'GitHub Actions Workflow Run',
 });
 
-export const plugin = createPlugin({
+export const githubActionsPlugin = createPlugin({
   id: 'github-actions',
   apis: [
     createApiFactory({
@@ -44,4 +46,41 @@ export const plugin = createPlugin({
         new GithubActionsClient({ configApi, githubAuthApi }),
     }),
   ],
+  routes: {
+    entityContent: rootRouteRef,
+  },
 });
+
+export const EntityGitHubActionsContent = githubActionsPlugin.provide(
+  createRoutableExtension({
+    component: () => import('./components/Router').then(m => m.Router),
+    mountPoint: rootRouteRef,
+  }),
+);
+
+export const EntityLatestGitHubActionRunCard = githubActionsPlugin.provide(
+  createComponentExtension({
+    component: {
+      lazy: () =>
+        import('./components/Cards').then(m => m.LatestWorkflowRunCard),
+    },
+  }),
+);
+
+export const EntityLatestGitHubActionsForBranchCard = githubActionsPlugin.provide(
+  createComponentExtension({
+    component: {
+      lazy: () =>
+        import('./components/Cards').then(m => m.LatestWorkflowsForBranchCard),
+    },
+  }),
+);
+
+export const EntityRecentGitHubActionsRunsCard = githubActionsPlugin.provide(
+  createComponentExtension({
+    component: {
+      lazy: () =>
+        import('./components/Cards').then(m => m.RecentWorkflowRunsCard),
+    },
+  }),
+);