From ccc4416a7ddd9e65c136264ddc814d65ca9e3f16 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Johannes=20W=C3=BCrbach?= <johannes.wuerbach@googlemail.com>
Date: Mon, 17 Jun 2024 14:46:32 +0200
Subject: [PATCH] feat: hasHumanitecAnnotations function

---
 .changeset/slimy-crews-joke.md                |  5 +++
 package.json                                  |  3 +-
 .../app/src/components/catalog/EntityPage.tsx | 15 ++++++--
 plugins/humanitec/README.md                   | 20 ++++++++++
 .../src/components/HumanitecCardComponent.tsx | 37 +++++++++++++------
 plugins/humanitec/src/index.ts                |  2 +-
 6 files changed, 65 insertions(+), 17 deletions(-)
 create mode 100644 .changeset/slimy-crews-joke.md

diff --git a/.changeset/slimy-crews-joke.md b/.changeset/slimy-crews-joke.md
new file mode 100644
index 00000000..c26cb500
--- /dev/null
+++ b/.changeset/slimy-crews-joke.md
@@ -0,0 +1,5 @@
+---
+'@humanitec/backstage-plugin': minor
+---
+
+Add hasHumanitecAnnotations function for conditional rendering
diff --git a/package.json b/package.json
index 710f036e..22c46719 100644
--- a/package.json
+++ b/package.json
@@ -59,5 +59,6 @@
   },
   "dependencies": {
     "@changesets/cli": "^2.27.1"
-  }
+  },
+  "packageManager": "yarn@1.22.21+sha512.ca75da26c00327d26267ce33536e5790f18ebd53266796fbb664d2a4a5116308042dd8ee7003b276a20eace7d3c5561c3577bdd71bcb67071187af124779620a"
 }
diff --git a/packages/app/src/components/catalog/EntityPage.tsx b/packages/app/src/components/catalog/EntityPage.tsx
index 38ab8a34..4f7cf66c 100644
--- a/packages/app/src/components/catalog/EntityPage.tsx
+++ b/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>
 );
 
diff --git a/plugins/humanitec/README.md b/plugins/humanitec/README.md
index 9afe663d..287ba49e 100644
--- a/plugins/humanitec/README.md
+++ b/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
diff --git a/plugins/humanitec/src/components/HumanitecCardComponent.tsx b/plugins/humanitec/src/components/HumanitecCardComponent.tsx
index 634c9ffe..ba1f95fb 100644
--- a/plugins/humanitec/src/components/HumanitecCardComponent.tsx
+++ b/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]
+  );
 }
diff --git a/plugins/humanitec/src/index.ts b/plugins/humanitec/src/index.ts
index 8ae4547f..d980945a 100644
--- a/plugins/humanitec/src/index.ts
+++ b/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';