@backstage/plugin-catalog-react 1.9.0-next.1 → 1.9.0-next.2

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @backstage/plugin-catalog-react
 
+## 1.9.0-next.2
+
+### Patch Changes
+
+- [#20962](https://github.com/backstage/backstage/pull/20962) [`000dcd01af`](https://github.com/backstage/backstage/commit/000dcd01afaa4a06b67da20c3590a7753af4f532) Thanks [@Rugvip](https://github.com/Rugvip)! - Removed unnecessary `@backstage/integration` dependency, replaced by `@backstage/integration-react`.
+
+- [#20842](https://github.com/backstage/backstage/pull/20842) [`6c357184e2`](https://github.com/backstage/backstage/commit/6c357184e27d86796fac6005ec6a597f994aa19d) Thanks [@benjdlambert](https://github.com/benjdlambert)! - Export `MissingAnnotationEmptyState` from `@backstage/plugin-catalog-react`
+
+- Updated dependencies
+  - @backstage/core-components@0.13.8-next.2
+  - @backstage/frontend-plugin-api@0.3.0-next.2
+  - @backstage/integration-react@1.1.21-next.1
+
 ## 1.9.0-next.1
 
 ### Patch Changes

package/alpha/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backstage/plugin-catalog-react",
-  "version": "1.9.0-next.1",
+  "version": "1.9.0-next.2",
   "main": "../dist/alpha.esm.js",
   "module": "../dist/alpha.esm.js",
   "types": "../dist/alpha.d.ts"

package/dist/index.d.ts

@@ -11,7 +11,7 @@ import { LinkProps, InfoCardVariants, TableColumn, TableOptions } from '@backsta
 import { IconButton, TextFieldProps } from '@material-ui/core';
 import { Overrides } from '@material-ui/core/styles/overrides';
 import { StyleRules } from '@material-ui/core/styles/withStyles';
-import { ScmIntegrationRegistry } from '@backstage/integration';
+import { scmIntegrationsApiRef } from '@backstage/integration-react';
 
 /**
  * The API reference for the {@link @backstage/catalog-client#CatalogApi}.
@@ -714,6 +714,17 @@ type EntityAutocompletePickerProps<T extends DefaultEntityFilters = DefaultEntit
 /** @public */
 declare function EntityAutocompletePicker<T extends DefaultEntityFilters = DefaultEntityFilters, Name extends AllowedEntityFilters<T> = AllowedEntityFilters<T>>(props: EntityAutocompletePickerProps<T, Name>): React.JSX.Element | null;
 
+/** @public */
+type MissingAnnotationEmptyStateClassKey = 'code';
+/**
+ * @public
+ * Renders an empty state when an annotation is missing from an entity.
+ */
+declare function MissingAnnotationEmptyState(props: {
+    annotation: string | string[];
+    readMoreUrl?: string;
+}): React.JSX.Element;
+
 /** @public */
 type EntityLoadingStatus<TEntity extends Entity = Entity> = {
     entity?: TEntity;
@@ -886,6 +897,6 @@ type EntitySourceLocation = {
     integrationType?: string;
 };
 /** @public */
-declare function getEntitySourceLocation(entity: Entity, scmIntegrationsApi: ScmIntegrationRegistry): EntitySourceLocation | undefined;
+declare function getEntitySourceLocation(entity: Entity, scmIntegrationsApi: typeof scmIntegrationsApiRef.T): EntitySourceLocation | undefined;
 
-export { AllowedEntityFilters, AsyncEntityProvider, AsyncEntityProviderProps, BackstageOverrides, CatalogFilterLayout, CatalogReactComponentsNameToClassKey, CatalogReactEntityDisplayNameClassKey, CatalogReactEntityLifecyclePickerClassKey, CatalogReactEntityNamespacePickerClassKey, CatalogReactEntityOwnerPickerClassKey, CatalogReactEntityProcessingStatusPickerClassKey, CatalogReactEntitySearchBarClassKey, CatalogReactEntityTagPickerClassKey, CatalogReactUserListPickerClassKey, DefaultEntityFilters, EntityAutocompletePicker, EntityAutocompletePickerProps, EntityDisplayName, EntityDisplayNameProps, EntityErrorFilter, EntityFilter, EntityKindFilter, EntityKindPicker, EntityKindPickerProps, EntityLifecycleFilter, EntityLifecyclePicker, EntityListContext, EntityListContextProps, EntityListProvider, EntityLoadingStatus, EntityNamespaceFilter, EntityNamespacePicker, EntityOrphanFilter, EntityOwnerFilter, EntityOwnerPicker, EntityOwnerPickerProps, EntityPeekAheadPopover, EntityPeekAheadPopoverProps, EntityPresentationApi, EntityProcessingStatusPicker, EntityProvider, EntityProviderProps, EntityRefLink, EntityRefLinkProps, EntityRefLinks, EntityRefLinksProps, EntityRefPresentation, EntityRefPresentationSnapshot, EntitySearchBar, EntitySourceLocation, EntityTable, EntityTableProps, EntityTagFilter, EntityTagPicker, EntityTagPickerProps, EntityTextFilter, EntityTypeFilter, EntityTypePicker, EntityTypePickerProps, EntityUserFilter, FavoriteEntity, FavoriteEntityProps, InspectEntityDialog, MockEntityListContextProvider, MockStarredEntitiesApi, StarredEntitiesApi, UnregisterEntityDialog, UnregisterEntityDialogProps, UserListFilter, UserListFilterKind, UserListPicker, UserListPickerProps, catalogApiRef, columnFactories, defaultEntityPresentation, entityPresentationApiRef, entityRouteParams, entityRouteRef, getEntityRelations, getEntitySourceLocation, humanizeEntityRef, starredEntitiesApiRef, useAsyncEntity, useEntity, useEntityList, useEntityOwnership, useEntityPresentation, useEntityTypeFilter, useRelatedEntities, useStarredEntities, useStarredEntity };
+export { AllowedEntityFilters, AsyncEntityProvider, AsyncEntityProviderProps, BackstageOverrides, CatalogFilterLayout, CatalogReactComponentsNameToClassKey, CatalogReactEntityDisplayNameClassKey, CatalogReactEntityLifecyclePickerClassKey, CatalogReactEntityNamespacePickerClassKey, CatalogReactEntityOwnerPickerClassKey, CatalogReactEntityProcessingStatusPickerClassKey, CatalogReactEntitySearchBarClassKey, CatalogReactEntityTagPickerClassKey, CatalogReactUserListPickerClassKey, DefaultEntityFilters, EntityAutocompletePicker, EntityAutocompletePickerProps, EntityDisplayName, EntityDisplayNameProps, EntityErrorFilter, EntityFilter, EntityKindFilter, EntityKindPicker, EntityKindPickerProps, EntityLifecycleFilter, EntityLifecyclePicker, EntityListContext, EntityListContextProps, EntityListProvider, EntityLoadingStatus, EntityNamespaceFilter, EntityNamespacePicker, EntityOrphanFilter, EntityOwnerFilter, EntityOwnerPicker, EntityOwnerPickerProps, EntityPeekAheadPopover, EntityPeekAheadPopoverProps, EntityPresentationApi, EntityProcessingStatusPicker, EntityProvider, EntityProviderProps, EntityRefLink, EntityRefLinkProps, EntityRefLinks, EntityRefLinksProps, EntityRefPresentation, EntityRefPresentationSnapshot, EntitySearchBar, EntitySourceLocation, EntityTable, EntityTableProps, EntityTagFilter, EntityTagPicker, EntityTagPickerProps, EntityTextFilter, EntityTypeFilter, EntityTypePicker, EntityTypePickerProps, EntityUserFilter, FavoriteEntity, FavoriteEntityProps, InspectEntityDialog, MissingAnnotationEmptyState, MissingAnnotationEmptyStateClassKey, MockEntityListContextProvider, MockStarredEntitiesApi, StarredEntitiesApi, UnregisterEntityDialog, UnregisterEntityDialogProps, UserListFilter, UserListFilterKind, UserListPicker, UserListPickerProps, catalogApiRef, columnFactories, defaultEntityPresentation, entityPresentationApiRef, entityRouteParams, entityRouteRef, getEntityRelations, getEntitySourceLocation, humanizeEntityRef, starredEntitiesApiRef, useAsyncEntity, useEntity, useEntityList, useEntityOwnership, useEntityPresentation, useEntityTypeFilter, useRelatedEntities, useStarredEntities, useStarredEntity };

package/dist/index.esm.js

@@ -15,8 +15,8 @@ import React, { useState, useEffect, useMemo, createContext, useCallback, useCon
 import ObservableImpl from 'zen-observable';
 import { Grid, useMediaQuery, useTheme, Button, Drawer, Box, Typography, FormControlLabel, Checkbox, makeStyles, TextField, Tooltip, IconButton, Card, CardContent, Chip, CardActions, Toolbar, FormControl, Input, InputAdornment, withStyles, DialogContentText, ListItemText as ListItemText$1, ListSubheader as ListSubheader$1, ListItem, ListItemIcon, List, Dialog, DialogTitle, DialogContent, Tabs, Tab, DialogActions, Divider, MenuItem, ListItemSecondaryAction } from '@material-ui/core';
 import FilterListIcon from '@material-ui/icons/FilterList';
-import { Select, Link, ResponseErrorPanel, Progress, OverflowTooltip, Table, DependencyGraph, DependencyGraphTypes, CodeSnippet } from '@backstage/core-components';
-import { g as getEntityRelations } from './esm/useEntity-de64059a.esm.js';
+import { Select, Link, ResponseErrorPanel, Progress, OverflowTooltip, Table, DependencyGraph, DependencyGraphTypes, CodeSnippet, EmptyState } from '@backstage/core-components';
+import { g as getEntityRelations, u as useEntity } from './esm/useEntity-de64059a.esm.js';
 export { A as AsyncEntityProvider, E as EntityProvider, g as getEntityRelations, a as useAsyncEntity, u as useEntity } from './esm/useEntity-de64059a.esm.js';
 import { compact, isEqual, debounce, intersection } from 'lodash';
 import qs from 'qs';
@@ -52,6 +52,10 @@ import YAML from 'yaml';
 import Alert$1 from '@material-ui/lab/Alert';
 import { assertError } from '@backstage/errors';
 import SettingsIcon from '@material-ui/icons/Settings';
+import Box$1 from '@material-ui/core/Box';
+import Button$1 from '@material-ui/core/Button';
+import { makeStyles as makeStyles$1 } from '@material-ui/core/styles';
+import Typography$1 from '@material-ui/core/Typography';
 
 const catalogApiRef = createApiRef({
   id: "plugin.catalog.service"
@@ -958,7 +962,7 @@ const EntityAutocompletePickerOption = memo((props) => {
   );
 });
 
-const useStyles$g = makeStyles(
+const useStyles$h = makeStyles(
   {
     input: {}
   },
@@ -967,7 +971,7 @@ const useStyles$g = makeStyles(
   }
 );
 function EntityAutocompletePickerInput(params) {
-  const classes = useStyles$g();
+  const classes = useStyles$h();
   return /* @__PURE__ */ React.createElement(
     TextField,
     {
@@ -1055,7 +1059,7 @@ function EntityAutocompletePicker(props) {
   )));
 }
 
-const useStyles$f = makeStyles(
+const useStyles$g = makeStyles(
   {
     input: {}
   },
@@ -1065,7 +1069,7 @@ const useStyles$f = makeStyles(
 );
 const EntityLifecyclePicker = (props) => {
   const { initialFilter = [] } = props;
-  const classes = useStyles$f();
+  const classes = useStyles$g();
   return /* @__PURE__ */ React.createElement(
     EntityAutocompletePicker,
     {
@@ -1287,7 +1291,7 @@ function useSelectedOwners({
   };
 }
 
-const useStyles$e = makeStyles(
+const useStyles$f = makeStyles(
   {
     input: {}
   },
@@ -1299,7 +1303,7 @@ const icon$1 = /* @__PURE__ */ React.createElement(CheckBoxOutlineBlankIcon, { f
 const checkedIcon$1 = /* @__PURE__ */ React.createElement(CheckBoxIcon, { fontSize: "small" });
 const EntityOwnerPicker = (props) => {
   var _a, _b, _c;
-  const classes = useStyles$e();
+  const classes = useStyles$f();
   const { mode = "owners-only" } = props || {};
   const {
     updateFilters,
@@ -1420,7 +1424,7 @@ const EntityOwnerPicker = (props) => {
   )));
 };
 
-const useStyles$d = makeStyles(
+const useStyles$e = makeStyles(
   (theme) => ({
     root: {
       display: "inline-flex",
@@ -1436,7 +1440,7 @@ const useStyles$d = makeStyles(
 );
 const EntityDisplayName = (props) => {
   const { entityRef, noIcon, noTooltip, defaultKind, defaultNamespace } = props;
-  const classes = useStyles$d();
+  const classes = useStyles$e();
   const { primaryTitle, secondaryTitle, Icon } = useEntityPresentation(
     entityRef,
     { defaultKind, defaultNamespace }
@@ -1565,7 +1569,7 @@ const UserCardActions = (props) => {
   return email ? /* @__PURE__ */ React.createElement(EmailCardAction, { email }) : null;
 };
 
-const useStyles$c = makeStyles(() => {
+const useStyles$d = makeStyles(() => {
   return {
     popoverPaper: {
       width: "30em"
@@ -1583,7 +1587,7 @@ const maxTagChips = 4;
 const EntityPeekAheadPopover = (props) => {
   var _a, _b, _c, _d;
   const { entityRef, children, delayTime = 500 } = props;
-  const classes = useStyles$c();
+  const classes = useStyles$d();
   const apiHolder = useApiHolder();
   const popupState = usePopupState({
     variant: "popover",
@@ -1652,7 +1656,7 @@ const EntityPeekAheadPopover = (props) => {
   ));
 };
 
-const useStyles$b = makeStyles(
+const useStyles$c = makeStyles(
   (_theme) => ({
     searchToolbar: {
       paddingLeft: 0,
@@ -1666,7 +1670,7 @@ const useStyles$b = makeStyles(
 );
 const EntitySearchBar = () => {
   var _a, _b;
-  const classes = useStyles$b();
+  const classes = useStyles$c();
   const { filters, updateFilters } = useEntityList();
   const [search, setSearch] = useState((_b = (_a = filters.text) == null ? void 0 : _a.value) != null ? _b : "");
   useDebounce(
@@ -1831,7 +1835,7 @@ const componentEntityColumns = [
   columnFactories.createMetadataDescriptionColumn()
 ];
 
-const useStyles$a = makeStyles((theme) => ({
+const useStyles$b = makeStyles((theme) => ({
   empty: {
     padding: theme.spacing(2),
     display: "flex",
@@ -1847,7 +1851,7 @@ const EntityTable = (props) => {
     columns,
     tableOptions = {}
   } = props;
-  const classes = useStyles$a();
+  const classes = useStyles$b();
   const tableStyle = {
     minWidth: "0",
     width: "100%"
@@ -1879,12 +1883,12 @@ EntityTable.columns = columnFactories;
 EntityTable.systemEntityColumns = systemEntityColumns;
 EntityTable.componentEntityColumns = componentEntityColumns;
 
-const useStyles$9 = makeStyles(
+const useStyles$a = makeStyles(
   { input: {} },
   { name: "CatalogReactEntityTagPicker" }
 );
 const EntityTagPicker = (props) => {
-  const classes = useStyles$9();
+  const classes = useStyles$a();
   return /* @__PURE__ */ React.createElement(
     EntityAutocompletePicker,
     {
@@ -1990,7 +1994,7 @@ function EntityKindIcon(props) {
   return /* @__PURE__ */ React.createElement(Icon, { ...otherProps });
 }
 
-const useStyles$8 = makeStyles((theme) => ({
+const useStyles$9 = makeStyles((theme) => ({
   node: {
     fill: theme.palette.grey[300],
     stroke: theme.palette.grey[300],
@@ -2044,7 +2048,7 @@ function useAncestry(root) {
   };
 }
 function CustomNode({ node }) {
-  const classes = useStyles$8();
+  const classes = useStyles$9();
   const navigate = useNavigate();
   const entityRoute = useRouteRef(entityRouteRef);
   const [width, setWidth] = useState(0);
@@ -2139,7 +2143,7 @@ function AncestryPage(props) {
   )));
 }
 
-const useStyles$7 = makeStyles((theme) => ({
+const useStyles$8 = makeStyles((theme) => ({
   root: {
     display: "flex",
     flexDirection: "column"
@@ -2156,7 +2160,7 @@ const useStyles$7 = makeStyles((theme) => ({
   }
 }));
 function ListItemText(props) {
-  const classes = useStyles$7();
+  const classes = useStyles$8();
   return /* @__PURE__ */ React.createElement(
     ListItemText$1,
     {
@@ -2167,7 +2171,7 @@ function ListItemText(props) {
   );
 }
 function ListSubheader(props) {
-  const classes = useStyles$7();
+  const classes = useStyles$8();
   return /* @__PURE__ */ React.createElement(ListSubheader$1, { className: classes.monospace }, props.children);
 }
 function Container(props) {
@@ -2194,11 +2198,11 @@ function KeyValueListItem(props) {
   ));
 }
 function HelpIcon(props) {
-  const classes = useStyles$7();
+  const classes = useStyles$8();
   return /* @__PURE__ */ React.createElement(Link, { to: props.to, className: classes.helpIcon }, /* @__PURE__ */ React.createElement(HelpOutlineIcon, { fontSize: "inherit" }));
 }
 
-const useStyles$6 = makeStyles({
+const useStyles$7 = makeStyles({
   root: {
     display: "flex",
     flexDirection: "column"
@@ -2278,7 +2282,7 @@ function Contents$1(props) {
   ));
 }
 function ColocatedPage(props) {
-  const classes = useStyles$6();
+  const classes = useStyles$7();
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(DialogContentText, { variant: "h2" }, "Colocated"), /* @__PURE__ */ React.createElement(DialogContentText, null, "These are the entities that are colocated with this entity - as in, they originated from the same data source (e.g. came from the same YAML file), or from the same origin (e.g. the originally registered URL)."), /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement(Contents$1, { entity: props.entity })));
 }
 
@@ -2299,7 +2303,7 @@ function JsonPage(props) {
   ))));
 }
 
-const useStyles$5 = makeStyles({
+const useStyles$6 = makeStyles({
   root: {
     display: "flex",
     flexDirection: "column"
@@ -2307,7 +2311,7 @@ const useStyles$5 = makeStyles({
 });
 function OverviewPage(props) {
   var _a, _b, _c;
-  const classes = useStyles$5();
+  const classes = useStyles$6();
   const {
     apiVersion,
     kind,
@@ -2368,7 +2372,7 @@ function YamlPage(props) {
   ))));
 }
 
-const useStyles$4 = makeStyles((theme) => ({
+const useStyles$5 = makeStyles((theme) => ({
   fullHeightDialog: {
     height: "calc(100% - 64px)"
   },
@@ -2389,7 +2393,7 @@ const useStyles$4 = makeStyles((theme) => ({
 }));
 function TabPanel(props) {
   const { children, value, index, ...other } = props;
-  const classes = useStyles$4();
+  const classes = useStyles$5();
   return /* @__PURE__ */ React.createElement(
     "div",
     {
@@ -2410,7 +2414,7 @@ function a11yProps(index) {
   };
 }
 function InspectEntityDialog(props) {
-  const classes = useStyles$4();
+  const classes = useStyles$5();
   const [activeTab, setActiveTab] = React.useState(0);
   useEffect(() => {
     setActiveTab(0);
@@ -2514,7 +2518,7 @@ function useUnregisterEntityDialogState(entity) {
   };
 }
 
-const useStyles$3 = makeStyles({
+const useStyles$4 = makeStyles({
   advancedButton: {
     fontSize: "0.7em"
   },
@@ -2530,7 +2534,7 @@ const Contents = ({
   var _a;
   const alertApi = useApi(alertApiRef);
   const configApi = useApi(configApiRef);
-  const classes = useStyles$3();
+  const classes = useStyles$4();
   const state = useUnregisterEntityDialogState(entity);
   const [showDelete, setShowDelete] = useState(false);
   const [busy, setBusy] = useState(false);
@@ -2819,7 +2823,7 @@ function useStarredEntitiesCount() {
   return { count, loading, filter };
 }
 
-const useStyles$2 = makeStyles(
+const useStyles$3 = makeStyles(
   (theme) => ({
     root: {
       backgroundColor: "rgba(0, 0, 0, .11)",
@@ -2878,7 +2882,7 @@ function getFilterGroups(orgName) {
 const UserListPicker = (props) => {
   var _a;
   const { initialFilter, availableFilters } = props;
-  const classes = useStyles$2();
+  const classes = useStyles$3();
   const configApi = useApi(configApiRef);
   const orgName = (_a = configApi.getOptionalString("organization.name")) != null ? _a : "Company";
   const {
@@ -2988,7 +2992,7 @@ const UserListPicker = (props) => {
   }))))));
 };
 
-const useStyles$1 = makeStyles(
+const useStyles$2 = makeStyles(
   {
     input: {}
   },
@@ -2999,7 +3003,7 @@ const useStyles$1 = makeStyles(
 const icon = /* @__PURE__ */ React.createElement(CheckBoxOutlineBlankIcon, { fontSize: "small" });
 const checkedIcon = /* @__PURE__ */ React.createElement(CheckBoxIcon, { fontSize: "small" });
 const EntityProcessingStatusPicker = () => {
-  const classes = useStyles$1();
+  const classes = useStyles$2();
   const { updateFilters } = useEntityList();
   const [selectedAdvancedItems, setSelectedAdvancedItems] = useState(
     []
@@ -3056,7 +3060,7 @@ const EntityProcessingStatusPicker = () => {
   )));
 };
 
-const useStyles = makeStyles(
+const useStyles$1 = makeStyles(
   {
     input: {}
   },
@@ -3065,7 +3069,7 @@ const useStyles = makeStyles(
   }
 );
 const EntityNamespacePicker = () => {
-  const classes = useStyles();
+  const classes = useStyles$1();
   return /* @__PURE__ */ React.createElement(
     EntityAutocompletePicker,
     {
@@ -3078,6 +3082,79 @@ const EntityNamespacePicker = () => {
   );
 };
 
+const useStyles = makeStyles$1(
+  (theme) => ({
+    code: {
+      borderRadius: 6,
+      margin: theme.spacing(2, 0),
+      background: theme.palette.type === "dark" ? "#444" : theme.palette.common.white
+    }
+  }),
+  { name: "BackstageMissingAnnotationEmptyState" }
+);
+function generateYamlExample(annotations, entity) {
+  var _a, _b;
+  const kind = (entity == null ? void 0 : entity.kind) || "Component";
+  const name = (entity == null ? void 0 : entity.metadata.name) || "example";
+  const type = ((_a = entity == null ? void 0 : entity.spec) == null ? void 0 : _a.type) || "website";
+  const owner = ((_b = entity == null ? void 0 : entity.spec) == null ? void 0 : _b.owner) || "user:default/guest";
+  const yamlText = `apiVersion: backstage.io/v1alpha1
+kind: ${kind}
+metadata:
+  name: ${name}
+  annotations:${annotations.map((ann) => `
+    ${ann}: value`).join("")}
+spec:
+  type: ${type}
+  owner: ${owner}`;
+  let line = 6;
+  const lineNumbers = [];
+  annotations.forEach(() => {
+    lineNumbers.push(line);
+    line++;
+  });
+  return {
+    yamlText,
+    lineNumbers
+  };
+}
+function generateDescription(annotations, entityKind = "Component") {
+  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 ", entityKind, " if you want to enable this tool.");
+}
+function MissingAnnotationEmptyState(props) {
+  let entity;
+  try {
+    const entityContext = useEntity();
+    entity = entityContext.entity;
+  } catch (err) {
+  }
+  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 entityKind = (entity == null ? void 0 : entity.kind) || "Component";
+  const { yamlText, lineNumbers } = generateYamlExample(annotations, entity);
+  return /* @__PURE__ */ React.createElement(
+    EmptyState,
+    {
+      missing: "field",
+      title: "Missing Annotation",
+      description: generateDescription(annotations, entityKind),
+      action: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Typography$1, { variant: "body1" }, "Add the annotation to your ", entityKind, " YAML as shown in the highlighted example below:"), /* @__PURE__ */ React.createElement(Box$1, { className: classes.code }, /* @__PURE__ */ React.createElement(
+        CodeSnippet,
+        {
+          text: yamlText,
+          language: "yaml",
+          showLineNumbers: true,
+          highlightedNumbers: lineNumbers,
+          customStyle: { background: "inherit", fontSize: "115%" }
+        }
+      )), /* @__PURE__ */ React.createElement(Button$1, { color: "primary", component: Link, to: url }, "Read more"))
+    }
+  );
+}
+
 function MockEntityListContextProvider(props) {
   var _a;
   const { children, value } = props;
@@ -3117,5 +3194,5 @@ function MockEntityListContextProvider(props) {
   return /* @__PURE__ */ React.createElement(EntityListContext.Provider, { value: resolvedValue }, children);
 }
 
-export { CatalogFilterLayout, EntityAutocompletePicker, EntityDisplayName, EntityErrorFilter, EntityKindFilter, EntityKindPicker, EntityLifecycleFilter, EntityLifecyclePicker, EntityListContext, EntityListProvider, EntityNamespaceFilter, EntityNamespacePicker, EntityOrphanFilter, EntityOwnerFilter, EntityOwnerPicker, EntityPeekAheadPopover, EntityProcessingStatusPicker, EntityRefLink, EntityRefLinks, EntitySearchBar, EntityTable, EntityTagFilter, EntityTagPicker, EntityTextFilter, EntityTypeFilter, EntityTypePicker, EntityUserFilter, FavoriteEntity, InspectEntityDialog, MockEntityListContextProvider, MockStarredEntitiesApi, UnregisterEntityDialog, UserListFilter, UserListPicker, catalogApiRef, columnFactories, defaultEntityPresentation, entityPresentationApiRef, entityRouteParams, entityRouteRef, getEntitySourceLocation, humanizeEntityRef, starredEntitiesApiRef, useEntityList, useEntityOwnership, useEntityPresentation, useEntityTypeFilter, useRelatedEntities, useStarredEntities, useStarredEntity };
+export { CatalogFilterLayout, EntityAutocompletePicker, EntityDisplayName, EntityErrorFilter, EntityKindFilter, EntityKindPicker, EntityLifecycleFilter, EntityLifecyclePicker, EntityListContext, EntityListProvider, EntityNamespaceFilter, EntityNamespacePicker, EntityOrphanFilter, EntityOwnerFilter, EntityOwnerPicker, EntityPeekAheadPopover, EntityProcessingStatusPicker, EntityRefLink, EntityRefLinks, EntitySearchBar, EntityTable, EntityTagFilter, EntityTagPicker, EntityTextFilter, EntityTypeFilter, EntityTypePicker, EntityUserFilter, FavoriteEntity, InspectEntityDialog, MissingAnnotationEmptyState, MockEntityListContextProvider, MockStarredEntitiesApi, UnregisterEntityDialog, UserListFilter, UserListPicker, catalogApiRef, columnFactories, defaultEntityPresentation, entityPresentationApiRef, entityRouteParams, entityRouteRef, getEntitySourceLocation, humanizeEntityRef, starredEntitiesApiRef, useEntityList, useEntityOwnership, useEntityPresentation, useEntityTypeFilter, useRelatedEntities, useStarredEntities, useStarredEntity };
 //# sourceMappingURL=index.esm.js.map