feat: hasHumanitecAnnotations function

.changeset/slimy-crews-joke.md

@@ -0,0 +1,5 @@
+---
+'@humanitec/backstage-plugin': minor
+---
+
+Add hasHumanitecAnnotations function for conditional rendering

examples/entities.yaml

@@ -22,6 +22,18 @@ spec:
   system: examples
   providesApis: [example-grpc-api]
 ---
+# https://backstage.io/docs/features/software-catalog/descriptor-format#kind-component
+apiVersion: backstage.io/v1alpha1
+kind: Component
+metadata:
+  name: example-service-without
+spec:
+  type: service
+  lifecycle: experimental
+  owner: guests
+  system: examples
+  providesApis: [example-grpc-api]
+---
 # https://backstage.io/docs/features/software-catalog/descriptor-format#kind-api
 apiVersion: backstage.io/v1alpha1
 kind: API

package.json

@@ -59,5 +59,6 @@
   },
   "dependencies": {
     "@changesets/cli": "^2.27.1"
-  }
+  },
+  "packageManager": "[email protected]+sha512.ca75da26c00327d26267ce33536e5790f18ebd53266796fbb664d2a4a5116308042dd8ee7003b276a20eace7d3c5561c3577bdd71bcb67071187af124779620a"
 }

packages/app/src/components/catalog/EntityPage.tsx

@@ -57,7 +57,10 @@ import {
 
 import { TechDocsAddons } from '@backstage/plugin-techdocs-react';
 import { ReportIssue } from '@backstage/plugin-techdocs-module-addons-contrib';
-import { HumanitecCardComponent } from '@humanitec/backstage-plugin';
+import {
+  HumanitecCardComponent,
+  hasHumanitecAnnotations,
+} from '@humanitec/backstage-plugin';
 
 const techdocsContent = (
   <EntityTechdocsContent>
@@ -138,9 +141,13 @@ const overviewContent = (
     <Grid item md={8} xs={12}>
       <EntityHasSubcomponentsCard variant="gridItem" />
     </Grid>
-    <Grid item md={6}>
-      <HumanitecCardComponent />
-    </Grid>
+    <EntitySwitch>
+      <EntitySwitch.Case if={hasHumanitecAnnotations}>
+        <Grid item md={6}>
+          <HumanitecCardComponent />
+        </Grid>
+      </EntitySwitch.Case>
+    </EntitySwitch>
   </Grid>
 );
 

plugins/humanitec/README.md

@@ -33,6 +33,26 @@ const overviewContent = (
 )
 ```
 
+In case the Humanitec component should only be display when the entity has Humanitec annotations configured,
+the code could look like the following:
+
+```diff
++ import { HumanitecCardComponent, hasHumanitecAnnotations } from '@humanitec/backstage-plugin';
+...
+const overviewContent = (
+  <Grid container>
+    ...
++   <EntitySwitch>
++     <EntitySwitch.Case if={hasHumanitecAnnotations}>
++       <Grid item md={6}>
++         <HumanitecCardComponent />
++       </Grid>
++     </EntitySwitch.Case>
++   </EntitySwitch>
+  </Grid>
+)
+```
+
 Add annotations to types that have Humanitec apps display:
 
 ```yaml

plugins/humanitec/src/components/HumanitecCardComponent.test.tsx

@@ -0,0 +1,36 @@
+import { Entity } from '@backstage/catalog-model';
+import { hasHumanitecAnnotations } from './HumanitecCardComponent';
+
+describe('<HumanitecCardComponent />', () => {
+  it('returns hasHumanitecAnnotations truthy if the entity has humanitec annotations', async () => {
+    const entity: Entity = {
+      apiVersion: 'v1',
+      kind: 'Component',
+      metadata: {
+        name: 'software',
+        annotations: {
+          'humanitec.com/orgId': 'orgId',
+          'humanitec.com/appId': 'appId',
+        },
+      },
+    };
+
+    const hasAnnotations = await hasHumanitecAnnotations(entity);
+
+    expect(hasAnnotations).toBeTruthy();
+  });
+
+  it('returns hasHumanitecAnnotations falsy if the entity has no humanitec annotations', async () => {
+    const entity: Entity = {
+      apiVersion: 'v1',
+      kind: 'Component',
+      metadata: {
+        name: 'software',
+      },
+    };
+
+    const hasAnnotations = await hasHumanitecAnnotations(entity);
+
+    expect(hasAnnotations).toBeFalsy();
+  });
+});

plugins/humanitec/src/components/HumanitecCardComponent.tsx

@@ -2,7 +2,12 @@ import { useEntity } from '@backstage/plugin-catalog-react';
 import { Button, Card, CardContent, Divider } from '@material-ui/core';
 import CardHeader from '@material-ui/core/CardHeader';
 import React, { ReactNode } from 'react';
-import { HUMANITEC_APP_ID_ANNOTATION, HUMANITEC_MISSING_ANNOTATION_ERROR, HUMANITEC_ORG_ID_ANNOTATION } from '../annotations';
+import { Entity } from '@backstage/catalog-model';
+import {
+  HUMANITEC_APP_ID_ANNOTATION,
+  HUMANITEC_MISSING_ANNOTATION_ERROR,
+  HUMANITEC_ORG_ID_ANNOTATION,
+} from '../annotations';
 import { useAppInfo } from '../hooks/useAppInfo';
 import { useHumanitecParams } from '../hooks/useHumanitecParams';
 import { useStyles } from '../hooks/useStyles';
@@ -12,10 +17,9 @@ import { HumanitecCardContent } from './HumanitecCardContent';
 import { HumanitecErrorState } from './HumanitecErrorState';
 import { HumanitecLogoIcon } from './HumanitecLogoIcon';
 
-interface HumanitecCardComponentProps {
-}
+interface HumanitecCardComponentProps {}
 
-export function HumanitecCardComponent({ }: HumanitecCardComponentProps) {
+export function HumanitecCardComponent({}: HumanitecCardComponentProps) {
   const { entity } = useEntity<HumanitecAnnotationedEntity>();
 
   const orgId = entity.metadata.annotations[HUMANITEC_ORG_ID_ANNOTATION];
@@ -41,11 +45,14 @@ export function HumanitecCardComponent({ }: HumanitecCardComponentProps) {
         selectedWorkload={params?.workloadId}
         actions={actions}
       />
-    )
-  } else if (data instanceof Error && data.message === HUMANITEC_MISSING_ANNOTATION_ERROR) {
-    content = (<HumanitecAnnotationsEmptyState />)
+    );
+  } else if (
+    data instanceof Error &&
+    data.message === HUMANITEC_MISSING_ANNOTATION_ERROR
+  ) {
+    content = <HumanitecAnnotationsEmptyState />;
   } else {
-    content = (<HumanitecErrorState error={data} />)
+    content = <HumanitecErrorState error={data} />;
   }
 
   let action: ReactNode = null;
@@ -54,11 +61,11 @@ export function HumanitecCardComponent({ }: HumanitecCardComponentProps) {
       <Button component="a" startIcon={<HumanitecLogoIcon />} href={appUrl}>
         Humanitec App
       </Button>
-    )
+    );
   }
 
   return (
-    <Card className={`${classes.cardClass}`} >
+    <Card className={`${classes.cardClass}`}>
       <CardHeader
         action={action}
         className={classes.cardHeader}
@@ -70,5 +77,13 @@ export function HumanitecCardComponent({ }: HumanitecCardComponentProps) {
         {content}
       </CardContent>
     </Card>
-  )
+  );
+}
+
+export async function hasHumanitecAnnotations(entity: Entity) {
+  return !!(
+    entity.metadata.annotations &&
+    entity.metadata.annotations[HUMANITEC_ORG_ID_ANNOTATION] &&
+    entity.metadata.annotations[HUMANITEC_APP_ID_ANNOTATION]
+  );
 }

plugins/humanitec/src/index.ts

@@ -1,3 +1,3 @@
 export { humanitecPlugin } from './plugin';
-export { HumanitecCardComponent } from './components/HumanitecCardComponent';
+export { HumanitecCardComponent, hasHumanitecAnnotations } from './components/HumanitecCardComponent';
 export { ValidateHumanitecAppIDFieldExtension } from './scaffolder/ValidateHumanitecAppID';