@backstage/core-components 0.12.0-next.0 → 0.12.0-next.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @backstage/core-components
 
+## 0.12.0-next.1
+
+### Patch Changes
+
+- b4fb5c8ecc: MissingAnnotationEmptyState now accepts either a string or an array of strings to support multiple missing annotations.
+- Updated dependencies
+  - @backstage/config@1.0.4-next.0
+  - @backstage/core-plugin-api@1.1.0-next.0
+  - @backstage/errors@1.1.3-next.0
+  - @backstage/theme@0.2.16
+  - @backstage/version-bridge@1.0.1
+
 ## 0.12.0-next.0
 
 ### Minor Changes

package/dist/index.d.ts

@@ -576,7 +576,7 @@ declare function EmptyState(props: Props$h): JSX.Element;
 declare type EmptyStateImageClassKey = 'generalImg';
 
 declare type Props$g = {
-    annotation: string;
+    annotation: string | string[];
     readMoreUrl?: string;
 };
 declare type MissingAnnotationEmptyStateClassKey = 'code';

package/dist/index.esm.js

@@ -1045,7 +1045,7 @@ function EmptyState(props) {
   }) : missing.customImage));
 }
 
-const COMPONENT_YAML = `apiVersion: backstage.io/v1alpha1
+const COMPONENT_YAML_TEMPLATE = `apiVersion: backstage.io/v1alpha1
 kind: Component
 metadata:
   name: example
@@ -1056,6 +1056,11 @@ spec:
   type: website
   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)
+);
 const useStyles$J = makeStyles(
   (theme) => ({
     code: {
@@ -1066,24 +1071,35 @@ const useStyles$J = makeStyles(
   }),
   { name: "BackstageMissingAnnotationEmptyState" }
 );
+function generateLineNumbers(lineCount) {
+  return Array.from(Array(lineCount + 1).keys(), (i) => i + ANNOTATION_LINE);
+}
+function generateComponentYaml(annotations) {
+  const annotationYaml = annotations.map((ann) => ANNOTATION_YAML.replace("ANNOTATION", ann)).join("\n");
+  return COMPONENT_YAML_TEMPLATE.replace(ANNOTATION_YAML, annotationYaml);
+}
+function generateDescription(annotations) {
+  const isSingular = annotations.length <= 1;
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, "The ", isSingular ? "annotation" : "annotations", " ", annotations.map((ann) => /* @__PURE__ */ React.createElement("code", null, ann)).reduce((prev, curr) => /* @__PURE__ */ React.createElement(React.Fragment, null, prev, ", ", curr)), " ", isSingular ? "is" : "are", " missing. You need to add the", " ", isSingular ? "annotation" : "annotations", " to your component if you want to enable this tool.");
+}
 function MissingAnnotationEmptyState(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$J();
-  const description = /* @__PURE__ */ React.createElement(React.Fragment, null, "The ", /* @__PURE__ */ React.createElement("code", null, annotation), " annotation is missing. You need to add the annotation to your component if you want to enable this tool.");
   return /* @__PURE__ */ React.createElement(EmptyState, {
     missing: "field",
     title: "Missing Annotation",
-    description,
+    description: generateDescription(annotations),
     action: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Typography, {
       variant: "body1"
     }, "Add the annotation to your component YAML as shown in the highlighted example below:"), /* @__PURE__ */ React.createElement("div", {
       className: classes.code
     }, /* @__PURE__ */ React.createElement(CodeSnippet, {
-      text: COMPONENT_YAML.replace("ANNOTATION", annotation),
+      text: generateComponentYaml(annotations),
       language: "yaml",
       showLineNumbers: true,
-      highlightedNumbers: [6, 7],
+      highlightedNumbers: generateLineNumbers(annotations.length),
       customStyle: { background: "inherit", fontSize: "115%" }
     })), /* @__PURE__ */ React.createElement(Button$1, {
       color: "primary",