cloudbuild: migrate to now composability API

.changeset/four-rings-push.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-cloudbuild': patch
+---
+
+Migrate to new composability API, exporting the plugin instance as `cloudbuildPlugin`, the entity content as `EntityCloudbuildContent`, the entity conditional as `isCloudbuildAvailable`, and entity cards as `EntityLatestCloudbuildRunCard` and `EntityLatestCloudbuildsForBranchCard`.

plugins/cloudbuild/dev/index.tsx

@@ -14,6 +14,6 @@
  * limitations under the License.
  */
 import { createDevApp } from '@backstage/dev-utils';
-import { plugin } from '../src/plugin';
+import { cloudbuildPlugin } from '../src/plugin';
 
-createDevApp().registerPlugin(plugin).render();
+createDevApp().registerPlugin(cloudbuildPlugin).render();

plugins/cloudbuild/package.json

@@ -31,6 +31,7 @@
   },
   "dependencies": {
     "@backstage/catalog-model": "^0.7.0",
+    "@backstage/plugin-catalog-react": "^0.0.1",
     "@backstage/core": "^0.5.0",
     "@backstage/theme": "^0.2.2",
     "@material-ui/core": "^4.11.0",

plugins/cloudbuild/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 { WorkflowRunStatus } from '../WorkflowRunStatus';
 import { Link, Theme, makeStyles, LinearProgress } from '@material-ui/core';
 import {
@@ -72,12 +73,13 @@ const WidgetContent = ({
 };
 
 export const LatestWorkflowRunCard = ({
-  entity,
   branch = 'master',
 }: {
-  entity: Entity;
+  /** @deprecated The entity is now grabbed from context instead */
+  entity?: Entity;
   branch: string;
 }) => {
+  const { entity } = useEntity();
   const errorApi = useApi(errorApiRef);
   const projectId = entity?.metadata.annotations?.[CLOUDBUILD_ANNOTATION] || '';
 
@@ -104,13 +106,17 @@ export const LatestWorkflowRunCard = ({
 };
 
 export const LatestWorkflowsForBranchCard = ({
-  entity,
   branch = 'master',
 }: {
-  entity: Entity;
+  /** @deprecated The entity is now grabbed from context instead */
+  entity?: Entity;
   branch: string;
-}) => (
-  <InfoCard title={`Last ${branch} build`}>
-    <WorkflowRunsTable entity={entity} />
-  </InfoCard>
-);
+}) => {
+  const { entity } = useEntity();
+
+  return (
+    <InfoCard title={`Last ${branch} build`}>
+      <WorkflowRunsTable entity={entity} />
+    </InfoCard>
+  );
+};

plugins/cloudbuild/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,11 +26,19 @@ import { MissingAnnotationEmptyState } from '@backstage/core';
 export const isPluginApplicableToEntity = (entity: Entity) =>
   Boolean(entity.metadata.annotations?.[CLOUDBUILD_ANNOTATION]);
 
-export const Router = ({ entity }: { entity: Entity }) =>
-  // TODO(shmidt-i): move warning to a separate standardized component
-  !isPluginApplicableToEntity(entity) ? (
-    <MissingAnnotationEmptyState annotation={CLOUDBUILD_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)) {
+    // TODO(shmidt-i): move warning to a separate standardized component
+    return <MissingAnnotationEmptyState annotation={CLOUDBUILD_ANNOTATION} />;
+  }
+  return (
     <Routes>
       <Route
         path={`/${rootRouteRef.path}`}
@@ -42,3 +51,4 @@ export const Router = ({ entity }: { entity: Entity }) =>
       )
     </Routes>
   );
+};

plugins/cloudbuild/src/index.ts

@@ -13,8 +13,18 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export { plugin } from './plugin';
+export {
+  cloudbuildPlugin,
+  cloudbuildPlugin as plugin,
+  EntityCloudbuildContent,
+  EntityLatestCloudbuildRunCard,
+  EntityLatestCloudbuildsForBranchCard,
+} from './plugin';
 export * from './api';
-export { Router, isPluginApplicableToEntity } from './components/Router';
+export {
+  Router,
+  isPluginApplicableToEntity,
+  isPluginApplicableToEntity as isCloudbuildAvailable,
+} from './components/Router';
 export * from './components/Cards';
 export { CLOUDBUILD_ANNOTATION } from './components/useProjectName';

plugins/cloudbuild/src/plugin.test.ts

@@ -13,10 +13,10 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { plugin } from './plugin';
+import { cloudbuildPlugin } from './plugin';
 
 describe('cloudbuild', () => {
   it('should export plugin', () => {
-    expect(plugin).toBeDefined();
+    expect(cloudbuildPlugin).toBeDefined();
   });
 });

plugins/cloudbuild/src/plugin.ts

@@ -18,6 +18,8 @@ import {
   createRouteRef,
   createApiFactory,
   googleAuthApiRef,
+  createRoutableExtension,
+  createComponentExtension,
 } from '@backstage/core';
 import { cloudbuildApiRef, CloudbuildClient } from './api';
 
@@ -31,7 +33,7 @@ export const buildRouteRef = createRouteRef({
   title: 'Cloudbuild Run',
 });
 
-export const plugin = createPlugin({
+export const cloudbuildPlugin = createPlugin({
   id: 'cloudbuild',
   apis: [
     createApiFactory({
@@ -42,4 +44,32 @@ export const plugin = createPlugin({
       },
     }),
   ],
+  routes: {
+    entityContent: rootRouteRef,
+  },
 });
+
+export const EntityCloudbuildContent = cloudbuildPlugin.provide(
+  createRoutableExtension({
+    component: () => import('./components/Router').then(m => m.Router),
+    mountPoint: rootRouteRef,
+  }),
+);
+
+export const EntityLatestCloudbuildRunCard = cloudbuildPlugin.provide(
+  createComponentExtension({
+    component: {
+      lazy: () =>
+        import('./components/Cards').then(m => m.LatestWorkflowRunCard),
+    },
+  }),
+);
+
+export const EntityLatestCloudbuildsForBranchCard = cloudbuildPlugin.provide(
+  createComponentExtension({
+    component: {
+      lazy: () =>
+        import('./components/Cards').then(m => m.LatestWorkflowsForBranchCard),
+    },
+  }),
+);