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/examples/entities.yaml b/examples/entities.yaml index b1cd8f9d..63d7e5d8 100644 --- a/examples/entities.yaml +++ b/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 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 = ( @@ -138,9 +141,13 @@ const overviewContent = ( - - - + + + + + + + ); 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 = ( + + ... ++ ++ ++ ++ ++ ++ ++ + +) +``` + Add annotations to types that have Humanitec apps display: ```yaml diff --git a/plugins/humanitec/src/components/HumanitecCardComponent.test.tsx b/plugins/humanitec/src/components/HumanitecCardComponent.test.tsx new file mode 100644 index 00000000..b9fd85a7 --- /dev/null +++ b/plugins/humanitec/src/components/HumanitecCardComponent.test.tsx @@ -0,0 +1,36 @@ +import { Entity } from '@backstage/catalog-model'; +import { hasHumanitecAnnotations } from './HumanitecCardComponent'; + +describe('', () => { + 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(); + }); +}); diff --git a/plugins/humanitec/src/components/HumanitecCardComponent.tsx b/plugins/humanitec/src/components/HumanitecCardComponent.tsx index 634c9ffe..d043e8cc 100644 --- a/plugins/humanitec/src/components/HumanitecCardComponent.tsx +++ b/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(); 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 = () + ); + } else if ( + data instanceof Error && + data.message === HUMANITEC_MISSING_ANNOTATION_ERROR + ) { + content = ; } else { - content = () + content = ; } let action: ReactNode = null; @@ -54,11 +61,11 @@ export function HumanitecCardComponent({ }: HumanitecCardComponentProps) { - ) + ); } return ( - + - ) + ); +} + +export async function hasHumanitecAnnotations(entity: Entity) { + return !!( + entity.metadata.annotations && + 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';