Merge pull request #4337 from SDA-SE/feat/fossa-port

Ports the Fossa Plugin to the new plugin model

.changeset/pretty-melons-prove.md

@@ -0,0 +1,8 @@
+---
+'@backstage/plugin-fossa': minor
+---
+
+Port FOSSA plugin to new extension model.
+
+If you are using the FOSSA plugin adjust the plugin import from `plugin` to
+`fossaPlugin` and replace `<FossaCard entity={...} ...>` with `<EntityFossaCard />`.

plugins/fossa/README.md

@@ -19,21 +19,21 @@ yarn add @backstage/plugin-fossa
 ```js
 // packages/app/src/plugins.ts
 
-export { plugin as Fossa } from '@backstage/plugin-fossa';
+export { fossaPlugin } from '@backstage/plugin-fossa';
 ```
 
-3. Add the `FossaCard` to the EntityPage:
+3. Add the `EntityFossaCard` to the EntityPage:
 
 ```jsx
 // packages/app/src/components/catalog/EntityPage.tsx
 
-import { FossaCard } from '@backstage/plugin-fossa';
+import { EntityFossaCard } from '@backstage/plugin-fossa';
 
 const OverviewContent = ({ entity }: { entity: Entity }) => (
   <Grid container spacing={3} alignItems="stretch">
     // ...
     <Grid item xs={12} sm={6} md={4}>
-      <FossaCard entity={entity} />
+      <EntityFossaCard />
     </Grid>
     // ...
   </Grid>

plugins/fossa/dev/index.tsx

@@ -14,21 +14,28 @@
  * limitations under the License.
  */
 
-import { createDevApp } from '@backstage/dev-utils';
-import {
-  Content,
-  createPlugin,
-  createRouteRef,
-  Header,
-  Page,
-} from '@backstage/core';
-import React from 'react';
-import { Grid } from '@material-ui/core';
-import { FossaApi, fossaApiRef } from '../src/api';
-import { FossaCard } from '../src';
 import { Entity } from '@backstage/catalog-model';
+import { Content, Header, Page } from '@backstage/core';
+import { createDevApp } from '@backstage/dev-utils';
+import { EntityProvider } from '@backstage/plugin-catalog-react';
+import { Grid } from '@material-ui/core';
+import React from 'react';
+import { EntityFossaCard } from '../src';
+import { FossaApi, fossaApiRef } from '../src/api';
 import { FOSSA_PROJECT_NAME_ANNOTATION } from '../src/components/useProjectName';
 
+const entity = (name?: string) =>
+  ({
+    apiVersion: 'backstage.io/v1alpha1',
+    kind: 'Component',
+    metadata: {
+      annotations: {
+        [FOSSA_PROJECT_NAME_ANNOTATION]: name,
+      },
+      name: name,
+    },
+  } as Entity);
+
 createDevApp()
   .registerApi({
     api: fossaApiRef,
@@ -76,58 +83,51 @@ createDevApp()
         },
       } as FossaApi),
   })
-  .registerPlugin(
-    createPlugin({
-      id: 'fossa-demo',
-      register({ router }) {
-        const entity = (name?: string) =>
-          ({
-            apiVersion: 'backstage.io/v1alpha1',
-            kind: 'Component',
-            metadata: {
-              annotations: {
-                [FOSSA_PROJECT_NAME_ANNOTATION]: name,
-              },
-              name: name,
-            },
-          } as Entity);
-
-        const ExamplePage = () => (
-          <Page themeId="home">
-            <Header title="Fossa" />
-            <Content>
-              <Grid container>
-                <Grid item xs={12} sm={6} md={4}>
-                  <FossaCard entity={entity('empty')} />
-                </Grid>
-                <Grid item xs={12} sm={6} md={4}>
-                  <FossaCard entity={entity('error')} />
-                </Grid>
-                <Grid item xs={12} sm={6} md={4}>
-                  <FossaCard entity={entity('never')} />
-                </Grid>
-                <Grid item xs={12} sm={6} md={4}>
-                  <FossaCard entity={entity('zero-deps')} />
-                </Grid>
-                <Grid item xs={12} sm={6} md={4}>
-                  <FossaCard entity={entity('issues')} />
-                </Grid>
-                <Grid item xs={12} sm={6} md={4}>
-                  <FossaCard entity={entity('no-issues')} />
-                </Grid>
-                <Grid item xs={12}>
-                  <FossaCard entity={entity(undefined)} />
-                </Grid>
-              </Grid>
-            </Content>
-          </Page>
-        );
-
-        router.addRoute(
-          createRouteRef({ path: '/', title: 'Fossa' }),
-          ExamplePage,
-        );
-      },
-    }),
-  )
+  .addPage({
+    title: 'Entity Content',
+    element: (
+      <Page themeId="home">
+        <Header title="Fossa" />
+        <Content>
+          <Grid container>
+            <Grid item xs={12} sm={6} md={4}>
+              <EntityProvider entity={entity('empty')}>
+                <EntityFossaCard />
+              </EntityProvider>
+            </Grid>
+            <Grid item xs={12} sm={6} md={4}>
+              <EntityProvider entity={entity('error')}>
+                <EntityFossaCard />
+              </EntityProvider>
+            </Grid>
+            <Grid item xs={12} sm={6} md={4}>
+              <EntityProvider entity={entity('never')}>
+                <EntityFossaCard />
+              </EntityProvider>
+            </Grid>
+            <Grid item xs={12} sm={6} md={4}>
+              <EntityProvider entity={entity('zero-deps')}>
+                <EntityFossaCard />
+              </EntityProvider>
+            </Grid>
+            <Grid item xs={12} sm={6} md={4}>
+              <EntityProvider entity={entity('issues')}>
+                <EntityFossaCard />
+              </EntityProvider>
+            </Grid>
+            <Grid item xs={12} sm={6} md={4}>
+              <EntityProvider entity={entity('no-issues')}>
+                <EntityFossaCard />
+              </EntityProvider>
+            </Grid>
+            <Grid item xs={12}>
+              <EntityProvider entity={entity(undefined)}>
+                <EntityFossaCard />
+              </EntityProvider>
+            </Grid>
+          </Grid>
+        </Content>
+      </Page>
+    ),
+  })
   .render();

plugins/fossa/package.json

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

plugins/fossa/src/components/FossaCard/FossaCard.tsx

@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 
-import React from 'react';
 import {
   EmptyState,
   InfoCard,
@@ -22,15 +21,16 @@ import {
   Progress,
   useApi,
 } from '@backstage/core';
-import { useAsync } from 'react-use';
-import { Entity } from '@backstage/catalog-model';
-import { fossaApiRef } from '../../api';
+import { useEntity } from '@backstage/plugin-catalog-react';
+import { Grid, Tooltip } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
+import React from 'react';
+import { useAsync } from 'react-use';
+import { fossaApiRef } from '../../api';
 import {
   FOSSA_PROJECT_NAME_ANNOTATION,
   useProjectName,
 } from '../useProjectName';
-import { Grid, Tooltip } from '@material-ui/core';
 
 const useStyles = makeStyles(theme => ({
   numberError: {
@@ -65,13 +65,8 @@ const useStyles = makeStyles(theme => ({
   },
 }));
 
-export const FossaCard = ({
-  entity,
-  variant = 'gridItem',
-}: {
-  entity: Entity;
-  variant?: string;
-}) => {
+export const FossaCard = () => {
+  const { entity } = useEntity();
   const fossaApi = useApi(fossaApiRef);
 
   const projectTitle = useProjectName(entity);
@@ -96,7 +91,7 @@ export const FossaCard = ({
       <InfoCard
         title="License Findings"
         deepLink={deepLink}
-        variant={variant}
+        variant="gridItem"
         className={
           !loading && (!projectTitle || !value) ? classes.disabled : undefined
         }

plugins/fossa/src/extensions.tsx

@@ -0,0 +1,26 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * 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 { createComponentExtension } from '@backstage/core';
+import { fossaPlugin } from './plugin';
+
+export const EntityFossaCard = fossaPlugin.provide(
+  createComponentExtension({
+    component: {
+      lazy: () => import('./components/FossaCard').then(m => m.FossaCard),
+    },
+  }),
+);

plugins/fossa/src/index.ts

@@ -14,5 +14,5 @@
  * limitations under the License.
  */
 
-export { plugin } from './plugin';
-export * from './components';
+export { fossaPlugin } from './plugin';
+export { EntityFossaCard } from './extensions';

plugins/fossa/src/plugin.test.ts

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

plugins/fossa/src/plugin.ts

@@ -22,7 +22,7 @@ import {
 } from '@backstage/core';
 import { fossaApiRef, FossaClient } from './api';
 
-export const plugin = createPlugin({
+export const fossaPlugin = createPlugin({
   id: 'fossa',
   apis: [
     createApiFactory({