badges: introduce badges field on entity about card.

Signed-off-by: Andreas Stenius <git@astekk.se>

plugins/badges/src/BadgesClientApi.ts

@@ -0,0 +1,62 @@
+/*
+ * Copyright 2021 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 { generatePath } from 'react-router';
+import { createApiRef, ConfigApi, DiscoveryApi } from '@backstage/core';
+import { Entity, ENTITY_DEFAULT_NAMESPACE } from '@backstage/catalog-model';
+import { entityRoute } from '@backstage/plugin-catalog-react';
+
+export class BadgesClientApi {
+  private readonly configApi: ConfigApi;
+  private readonly discoveryApi: DiscoveryApi;
+
+  constructor(options: { configApi: ConfigApi; discoveryApi: DiscoveryApi }) {
+    this.configApi = options.configApi;
+    this.discoveryApi = options.discoveryApi;
+  }
+
+  async getEntityPoweredByMarkdownCode(entity: Entity): string {
+    const badge = await this.getEntityPoweredByBadgeURL(entity);
+    const target = this.getEntityLink(entity);
+    return `[![Powered by Backstage](${badge})](${target})`;
+  }
+
+  async getEntityPoweredByBadgeURL(entity: Entity): string {
+    const routeParams = this.getEntityRouteParams(entity);
+    const path = generatePath(entityRoute.path, routeParams);
+    return `${await this.discoveryApi.getBaseUrl('badges')}/entity/${path}`;
+  }
+
+  private getEntityLink(entity: Entity): string {
+    const routeParams = this.getEntityRouteParams(entity);
+    const path = generatePath(entityRoute.path, routeParams);
+    return `${this.configApi.getString('app.baseUrl')}/catalog/${path}`;
+  }
+
+  private getEntityRouteParams(entity: Entity) {
+    return {
+      kind: entity.kind.toLowerCase(),
+      namespace:
+        entity.metadata.namespace?.toLowerCase() ?? ENTITY_DEFAULT_NAMESPACE,
+      name: entity.metadata.name,
+    };
+  }
+}
+
+export const badgesClientApiRef = createApiRef<typeof BadgesClientApi>({
+  id: 'plugin.badges.client',
+  description: 'Used by the badges plugin to create badge URLs',
+});

plugins/badges/src/components/BadgesDrawer.tsx

@@ -0,0 +1,63 @@
+/*
+ * Copyright 2021 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 React, { useState } from 'react';
+import { Button, Drawer, Grid, Typography } from '@material-ui/core';
+import { CodeSnippet, Content, InfoCard, useApi } from '@backstage/core';
+
+const BadgeCard = ({ title, badgeUrl, markdownCode }) => (
+  <Grid item>
+    <InfoCard title={title}>
+      <Typography paragraph>
+        Paste the following snippet in your <code>README.md</code> or other
+        markdown file for this badge:
+      </Typography>
+      <img src={badgeUrl} alt="Badge preview" />
+      <CodeSnippet text={markdownCode} showCopyCodeButton />
+    </InfoCard>
+  </Grid>
+);
+
+const BadgesDrawerContent = ({ badges, toggleDrawer }) => (
+  <Content>
+    <Grid container direction="column" spacing={4}>
+      {badges.map((badge, idx) => (
+        <BadgeCard key={idx} {...badge} />
+      ))}
+      <Grid item>
+        <Button color="primary" onClick={() => toggleDrawer(false)}>
+          Close
+        </Button>
+      </Grid>
+    </Grid>
+  </Content>
+);
+
+export const BadgesDrawer = ({ badges }) => {
+  const [isOpen, toggleDrawer] = useState(false);
+
+  return (
+    <>
+      <Button onClick={() => toggleDrawer(!isOpen)}>
+        {badges.map(({ badgeUrl, title }, idx) => (
+          <img key={idx} src={badgeUrl} alt={title} />
+        ))}
+      </Button>
+      <Drawer anchor="right" open={isOpen} onClose={() => toggleDrawer(false)}>
+        <BadgesDrawerContent badges={badges} toggleDrawer={toggleDrawer} />
+      </Drawer>
+    </>
+  );
+};

plugins/badges/src/components/EntityBadgesCard.tsx

@@ -14,27 +14,22 @@
  * limitations under the License.
  */
 import React from 'react';
+import { useAsync } from 'react-use';
 import { Typography } from '@material-ui/core';
-import { CodeSnippet, InfoCard } from '@backstage/core';
+import { CodeSnippet, InfoCard, useApi } from '@backstage/core';
+import { ENTITY_DEFAULT_NAMESPACE } from '@backstage/catalog-model';
 import { useEntity } from '@backstage/plugin-catalog-react';
+import { badgesClientApiRef } from '../BadgesClientApi';
 
 export const EntityBadgesCard = () => {
+  const badgesClientApi = useApi(badgesClientApiRef);
   const { entity } = useEntity();
-
-  // TODO: extract kind, namespace, entity name from entity data...
-  const { kind, namespace, name } = {
-    kind: 'Component',
-    namespace: 'default',
-    name: 'demo',
-  };
-
-  // TODO: get url for backstage and the badges api
-  const backstage_ui = 'http://localhost:3000';
-  const backstage_api = 'http://localhost:7000';
-
-  const badge = `${backstage_api}/badges/entity/${namespace}/${kind}/${name}`.toLowerCase();
-  const target = `${backstage_ui}/catalog/${namespace}/${kind}/${name}`.toLowerCase();
-  const markdown_code = `[![Powered by Backstage](${badge})](${target})`;
+  const { value, loading, error } = useAsync(async () => {
+    return {
+      badge: await badgesClientApi.getEntityPoweredByBadgeURL(entity),
+      markdown: await badgesClientApi.getEntityPoweredByMarkdownCode(entity),
+    };
+  }, [badgesClientApi, entity]);
 
   return (
     <InfoCard title="Badges">
@@ -42,8 +37,8 @@ export const EntityBadgesCard = () => {
         Paste the following snippet in your <code>README.md</code> or other
         markdown file, to get a powered by backstage badge:
       </Typography>
-      <img src={badge} alt="Powered by Backstage badge" />
-      <CodeSnippet text={markdown_code} showCopyCodeButton />
+      {value && <img src={value.badge} alt="Powered by Backstage badge" />}
+      {value && <CodeSnippet text={value.markdown} showCopyCodeButton />}
     </InfoCard>
   );
 };

plugins/badges/src/components/EntityBadgesField.tsx

@@ -0,0 +1,52 @@
+/*
+ * Copyright 2021 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 React from 'react';
+import { useAsync } from 'react-use';
+import { Progress, useApi, WarningPanel } from '@backstage/core';
+import { useEntity } from '@backstage/plugin-catalog-react';
+import { badgesClientApiRef } from '../BadgesClientApi';
+import { BadgesDrawer } from './BadgesDrawer';
+
+export const EntityBadgesField = () => {
+  const badgesClientApi = useApi(badgesClientApiRef);
+  const { entity } = useEntity();
+  const { value, loading, error } = useAsync(async () => {
+    return {
+      badge: await badgesClientApi.getEntityPoweredByBadgeURL(entity),
+      markdown: await badgesClientApi.getEntityPoweredByMarkdownCode(entity),
+    };
+  }, [badgesClientApi, entity]);
+
+  const badges = [];
+
+  if (value) {
+    badges.push({
+      title: 'Powered by Backstage',
+      badgeUrl: value.badge,
+      markdownCode: value.markdown,
+    });
+  }
+
+  return (
+    <div>
+      {loading && <Progress />}
+      {error && (
+        <WarningPanel title="Failed to get badge" message={`Error: ${error}`} />
+      )}
+      {badges.length > 0 && <BadgesDrawer badges={badges} />}
+    </div>
+  );
+};

plugins/badges/src/index.ts

@@ -13,4 +13,5 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export { badgesPlugin, EntityBadgesCard } from './plugin';
+
+export * from './plugin';

plugins/badges/src/plugin.ts

@@ -13,12 +13,36 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { createPlugin, createComponentExtension } from '@backstage/core';
+import {
+  createApiFactory,
+  createComponentExtension,
+  createPlugin,
+  configApiRef,
+  discoveryApiRef,
+} from '@backstage/core';
+import { badgesClientApiRef, BadgesClientApi } from './BadgesClientApi';
 
 export const badgesPlugin = createPlugin({
   id: 'badges',
+  apis: [
+    createApiFactory({
+      api: badgesClientApiRef,
+      deps: { configApi: configApiRef, discoveryApi: discoveryApiRef },
+      factory: ({ configApi, discoveryApi }) =>
+        new BadgesClientApi({ configApi, discoveryApi }),
+    }),
+  ],
 });
 
+export const EntityBadgesField = badgesPlugin.provide(
+  createComponentExtension({
+    component: {
+      lazy: () =>
+        import('./components/EntityBadgesField').then(m => m.EntityBadgesField),
+    },
+  }),
+);
+
 export const EntityBadgesCard = badgesPlugin.provide(
   createComponentExtension({
     component: {