feat: hasHumanitecAnnotations function

.changeset/slimy-crews-joke.md

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

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.tsx

@@ -2,7 +2,11 @@ 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 {
+  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 +16,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 +44,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 +60,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 +76,14 @@ export function HumanitecCardComponent({ }: HumanitecCardComponentProps) {
         {content}
       </CardContent>
     </Card>
-  )
+  );
+}
+
+export function hasHumanitecAnnotations(): boolean {
+
+  const { entity } = useEntity<HumanitecAnnotationedEntity>();
+  return !!(
+    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';