Add multi-annotation capability to missing annotation feedback

Signed-off-by: Jasper Herzberg <jasper.herzberg@sda.se>

.changeset/little-plums-look.md

@@ -0,0 +1,5 @@
+---
+'@backstage/core-components': minor
+---
+
+MissingAnnotationEmptyState now accepts either a string or an array of strings to support multiple missing annotations.

packages/core-components/src/components/EmptyState/EmptyState.stories.tsx

@@ -28,7 +28,9 @@ const containerStyle = { width: '100%', height: '100vh' };
 
 export const MissingAnnotation = () => (
   <div style={containerStyle}>
-    <MissingAnnotationEmptyState annotation="backstage.io/example" />
+    <MissingAnnotationEmptyState
+      annotation={['backstage.io/foo', 'backstage.io/bar']}
+    />
   </div>
 );
 

packages/core-components/src/components/EmptyState/MissingAnnotationEmptyState.tsx

@@ -23,7 +23,7 @@ import { Link } from '../Link';
 import { EmptyState } from './EmptyState';
 import { CodeSnippet } from '../CodeSnippet';
 
-const COMPONENT_YAML = `apiVersion: backstage.io/v1alpha1
+const COMPONENT_YAML_TEMPLATE = `apiVersion: backstage.io/v1alpha1
 kind: Component
 metadata:
   name: example
@@ -35,8 +35,14 @@ spec:
   lifecycle: production
   owner: user:guest`;
 
+const ANNOTATION_REGEXP = /^.*ANNOTATION.*$/m;
+const ANNOTATION_YAML = COMPONENT_YAML_TEMPLATE.match(ANNOTATION_REGEXP)![0];
+const ANNOTATION_LINE = COMPONENT_YAML_TEMPLATE.split('\n').findIndex(line =>
+  ANNOTATION_REGEXP.test(line),
+);
+
 type Props = {
-  annotation: string;
+  annotation: string | string[];
   readMoreUrl?: string;
 };
 
@@ -53,23 +59,50 @@ const useStyles = makeStyles<BackstageTheme>(
   { name: 'BackstageMissingAnnotationEmptyState' },
 );
 
+function generateLineNumbers(lineCount: number) {
+  return Array.from(Array(lineCount + 1).keys(), i => i + ANNOTATION_LINE);
+}
+
+function generateComponentYaml(annotations: string[]) {
+  const annotationYaml = annotations
+    .map(ann => ANNOTATION_YAML.replace('ANNOTATION', ann))
+    .join('\n');
+
+  return COMPONENT_YAML_TEMPLATE.replace(ANNOTATION_YAML, annotationYaml);
+}
+
+function generateDescription(annotations: string[]) {
+  const isSingular = annotations.length <= 1;
+  return (
+    <>
+      The {isSingular ? 'annotation' : 'annotations'}{' '}
+      {annotations
+        .map(ann => <code>{ann}</code>)
+        .reduce((prev, curr) => (
+          <>
+            {prev}, {curr}
+          </>
+        ))}{' '}
+      {isSingular ? 'is' : 'are'} missing. You need to add the{' '}
+      {isSingular ? 'annotation' : 'annotations'} to your component if you want
+      to enable this tool.
+    </>
+  );
+}
+
 export function MissingAnnotationEmptyState(props: Props) {
   const { annotation, readMoreUrl } = props;
+  const annotations = Array.isArray(annotation) ? annotation : [annotation];
   const url =
     readMoreUrl ||
     'https://backstage.io/docs/features/software-catalog/well-known-annotations';
   const classes = useStyles();
-  const description = (
-    <>
-      The <code>{annotation}</code> annotation is missing. You need to add the
-      annotation to your component if you want to enable this tool.
-    </>
-  );
+
   return (
     <EmptyState
       missing="field"
       title="Missing Annotation"
-      description={description}
+      description={generateDescription(annotations)}
       action={
         <>
           <Typography variant="body1">
@@ -78,10 +111,10 @@ export function MissingAnnotationEmptyState(props: Props) {
           </Typography>
           <div className={classes.code}>
             <CodeSnippet
-              text={COMPONENT_YAML.replace('ANNOTATION', annotation)}
+              text={generateComponentYaml(annotations)}
               language="yaml"
               showLineNumbers
-              highlightedNumbers={[6, 7]}
+              highlightedNumbers={generateLineNumbers(annotations.length)}
               customStyle={{ background: 'inherit', fontSize: '115%' }}
             />
           </div>