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) {