diff --git a/.changeset/little-plums-look.md b/.changeset/little-plums-look.md
new file mode 100644
index 0000000000..45b3c0f341
--- /dev/null
+++ b/.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.
diff --git a/packages/core-components/src/components/EmptyState/EmptyState.stories.tsx b/packages/core-components/src/components/EmptyState/EmptyState.stories.tsx
index 65e9641dd0..f87d0a82ce 100644
--- a/packages/core-components/src/components/EmptyState/EmptyState.stories.tsx
+++ b/packages/core-components/src/components/EmptyState/EmptyState.stories.tsx
@@ -28,7 +28,9 @@ const containerStyle = { width: '100%', height: '100vh' };
export const MissingAnnotation = () => (
-
+
);
diff --git a/packages/core-components/src/components/EmptyState/MissingAnnotationEmptyState.tsx b/packages/core-components/src/components/EmptyState/MissingAnnotationEmptyState.tsx
index 8d8416a241..59596e6d2b 100644
--- a/packages/core-components/src/components/EmptyState/MissingAnnotationEmptyState.tsx
+++ b/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(
{ 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 => {ann})
+ .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 {annotation} annotation is missing. You need to add the
- annotation to your component if you want to enable this tool.
- >
- );
+
return (
@@ -78,10 +111,10 @@ export function MissingAnnotationEmptyState(props: Props) {