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

package/CHANGELOG.md

@@ -1,5 +1,68 @@
 # @backstage/plugin-catalog-react
 
+## 1.9.0
+
+### Minor Changes
+
+- 1e5b7d993a: Added an `EntityPresentationApi` and associated `entityPresentationApiRef`. This
+  API lets you control how references to entities (e.g. in links, headings,
+  iconography etc) are represented in the user interface.
+
+  Usage of this API is initially added to the `EntityRefLink` and `EntityRefLinks`
+  components, so that they can render richer, more correct representation of
+  entity refs. There's also a new `EntityDisplayName` component, which works just like
+  the `EntityRefLink` but without the link.
+
+  Along with that change, the `fetchEntities` and `getTitle` props of
+  `EntityRefLinksProps` are deprecated and no longer used, since the same need
+  instead is fulfilled (and by default always enabled) by the
+  `entityPresentationApiRef`.
+
+- 1fd53fa0c6: The `UserListPicker` component has undergone improvements to enhance its performance.
+
+  The previous implementation inferred the number of owned and starred entities based on the entities available in the `EntityListContext`. The updated version no longer relies on the `EntityListContext` for inference, allowing for better decoupling.
+
+  The component now loads the entities' count asynchronously, resulting in improved performance and responsiveness. For this purpose, some of the exported filters such as `EntityTagFilter`, `EntityOwnerFilter`, `EntityLifecycleFilter` and `EntityNamespaceFilter` have now the `getCatalogFilters` method implemented.
+
+### Patch Changes
+
+- 2ad1bacef7: Add EntityRef to Entity Inspector UI
+- 6c2b872153: Add official support for React 18.
+- 69ee8d75f4: Remove `button` prop from used MaterialUI `MenuItem` component fixing incompatibility with MaterialUI v5.
+- 0bf6ebda88: Added new APIs at the `/alpha` subpath for creating entity page cards and content for the new frontend system.
+- 77f009b35d: Internal updates to match changes in the experimental `@backstage/frontend-plugin-api`.
+- 71c97e7d73: The `spec.type` field in entities will now always be rendered as a string.
+- 69c14904b6: Move the `EntityRefLink` icon to the left hand side as per Material-UI guidelines
+- 000dcd01af: Removed unnecessary `@backstage/integration` dependency, replaced by `@backstage/integration-react`.
+- 6c357184e2: Export `MissingAnnotationEmptyState` from `@backstage/plugin-catalog-react`
+- Updated dependencies
+  - @backstage/core-components@0.13.8
+  - @backstage/frontend-plugin-api@0.3.0
+  - @backstage/integration-react@1.1.21
+  - @backstage/core-plugin-api@1.8.0
+  - @backstage/plugin-permission-react@0.4.17
+  - @backstage/version-bridge@1.0.7
+  - @backstage/theme@0.4.4
+  - @backstage/catalog-client@1.4.6
+  - @backstage/plugin-permission-common@0.7.10
+  - @backstage/catalog-model@1.4.3
+  - @backstage/errors@1.2.3
+  - @backstage/types@1.1.1
+  - @backstage/plugin-catalog-common@1.0.18
+
+## 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",
   "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}.
@@ -259,8 +259,8 @@ type CatalogReactEntityDisplayNameClassKey = 'root' | 'icon';
  */
 type EntityDisplayNameProps = {
     entityRef: Entity | CompoundEntityRef | string;
-    noIcon?: boolean;
-    noTooltip?: boolean;
+    hideIcon?: boolean;
+    disableTooltip?: boolean;
     defaultKind?: string;
     defaultNamespace?: string;
 };
@@ -283,6 +283,7 @@ type EntityRefLinkProps = {
     /** @deprecated This option should no longer be used; presentation is requested through the {@link entityPresentationApiRef} instead */
     title?: string;
     children?: React.ReactNode;
+    hideIcon?: boolean;
 } & Omit<LinkProps, 'to'>;
 /**
  * Shows a clickable link to an entity.
@@ -299,6 +300,7 @@ declare const EntityRefLink: (props: EntityRefLinkProps) => JSX.Element;
 type EntityRefLinksProps<TRef extends string | CompoundEntityRef | Entity> = {
     defaultKind?: string;
     entityRefs: TRef[];
+    hideIcons?: boolean;
     /** @deprecated This option is no longer used; presentation is handled by entityPresentationApiRef instead */
     fetchEntities?: boolean;
     /** @deprecated This option is no longer used; presentation is handled by entityPresentationApiRef instead */
@@ -714,6 +716,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 +899,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

@@ -13,10 +13,10 @@ import PersonIcon from '@material-ui/icons/Person';
 import get from 'lodash/get';
 import React, { useState, useEffect, useMemo, createContext, useCallback, useContext, useRef, memo, forwardRef, useLayoutEffect, Fragment } from 'react';
 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 { 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, ListItemSecondaryAction, Dialog, DialogTitle, DialogContent, Tabs, Tab, DialogActions, Divider, MenuItem } 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, CopyTextButton, 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,14 +1424,14 @@ const EntityOwnerPicker = (props) => {
   )));
 };
 
-const useStyles$d = makeStyles(
+const useStyles$e = makeStyles(
   (theme) => ({
     root: {
       display: "inline-flex",
       alignItems: "center"
     },
     icon: {
-      marginLeft: theme.spacing(0.5),
+      marginRight: theme.spacing(0.5),
       color: theme.palette.text.secondary,
       lineHeight: 0
     }
@@ -1435,15 +1439,15 @@ const useStyles$d = makeStyles(
   { name: "CatalogReactEntityDisplayName" }
 );
 const EntityDisplayName = (props) => {
-  const { entityRef, noIcon, noTooltip, defaultKind, defaultNamespace } = props;
-  const classes = useStyles$d();
+  const { entityRef, hideIcon, disableTooltip, defaultKind, defaultNamespace } = props;
+  const classes = useStyles$e();
   const { primaryTitle, secondaryTitle, Icon } = useEntityPresentation(
     entityRef,
     { defaultKind, defaultNamespace }
   );
   let content = /* @__PURE__ */ React.createElement(React.Fragment, null, primaryTitle);
-  content = /* @__PURE__ */ React.createElement(Box, { component: "span", className: classes.root }, content, Icon && !noIcon ? /* @__PURE__ */ React.createElement(Box, { component: "span", className: classes.icon }, /* @__PURE__ */ React.createElement(Icon, { fontSize: "inherit" })) : null);
-  if (secondaryTitle && !noTooltip) {
+  content = /* @__PURE__ */ React.createElement(Box, { component: "span", className: classes.root }, Icon && !hideIcon ? /* @__PURE__ */ React.createElement(Box, { component: "span", className: classes.icon }, /* @__PURE__ */ React.createElement(Icon, { fontSize: "inherit" })) : null, content);
+  if (secondaryTitle && !disableTooltip) {
     content = /* @__PURE__ */ React.createElement(Tooltip, { enterDelay: 1500, title: secondaryTitle }, content);
   }
   return content;
@@ -1474,6 +1478,7 @@ const EntityRefLink = forwardRef(
       defaultNamespace,
       title,
       children,
+      hideIcon,
       ...linkProps
     } = props;
     const entityRoute = useEntityRoute(props.entityRef);
@@ -1482,7 +1487,8 @@ const EntityRefLink = forwardRef(
       {
         entityRef,
         defaultKind,
-        defaultNamespace
+        defaultNamespace,
+        hideIcon
       }
     );
     return /* @__PURE__ */ React.createElement(Link, { ...linkProps, ref, to: entityRoute }, content);
@@ -1519,10 +1525,10 @@ function useEntityRoute(entityRef) {
 }
 
 function EntityRefLinks(props) {
-  const { entityRefs, ...linkProps } = props;
+  const { entityRefs, hideIcons, ...linkProps } = props;
   return /* @__PURE__ */ React.createElement(React.Fragment, null, entityRefs.map((r, i) => {
     const entityRefString = typeof r === "string" ? r : stringifyEntityRef(r);
-    return /* @__PURE__ */ React.createElement(React.Fragment, { key: `${i}.${entityRefString}` }, i > 0 && ", ", /* @__PURE__ */ React.createElement(EntityRefLink, { ...linkProps, entityRef: r }));
+    return /* @__PURE__ */ React.createElement(React.Fragment, { key: `${i}.${entityRefString}` }, i > 0 && ", ", /* @__PURE__ */ React.createElement(EntityRefLink, { ...linkProps, entityRef: r, hideIcon: hideIcons }));
   }));
 }
 
@@ -1565,7 +1571,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 +1589,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 +1658,7 @@ const EntityPeekAheadPopover = (props) => {
   ));
 };
 
-const useStyles$b = makeStyles(
+const useStyles$c = makeStyles(
   (_theme) => ({
     searchToolbar: {
       paddingLeft: 0,
@@ -1666,7 +1672,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 +1837,7 @@ const componentEntityColumns = [
   columnFactories.createMetadataDescriptionColumn()
 ];
 
-const useStyles$a = makeStyles((theme) => ({
+const useStyles$b = makeStyles((theme) => ({
   empty: {
     padding: theme.spacing(2),
     display: "flex",
@@ -1847,7 +1853,7 @@ const EntityTable = (props) => {
     columns,
     tableOptions = {}
   } = props;
-  const classes = useStyles$a();
+  const classes = useStyles$b();
   const tableStyle = {
     minWidth: "0",
     width: "100%"
@@ -1879,12 +1885,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 +1996,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 +2050,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 +2145,7 @@ function AncestryPage(props) {
   )));
 }
 
-const useStyles$7 = makeStyles((theme) => ({
+const useStyles$8 = makeStyles((theme) => ({
   root: {
     display: "flex",
     flexDirection: "column"
@@ -2156,7 +2162,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 +2173,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 +2200,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 +2284,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 +2305,7 @@ function JsonPage(props) {
   ))));
 }
 
-const useStyles$5 = makeStyles({
+const useStyles$6 = makeStyles({
   root: {
     display: "flex",
     flexDirection: "column"
@@ -2307,7 +2313,7 @@ const useStyles$5 = makeStyles({
 });
 function OverviewPage(props) {
   var _a, _b, _c;
-  const classes = useStyles$5();
+  const classes = useStyles$6();
   const {
     apiVersion,
     kind,
@@ -2320,13 +2326,14 @@ function OverviewPage(props) {
     sortBy(relations, (r) => r.targetRef),
     "type"
   );
+  const entityRef = stringifyEntityRef(props.entity);
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(DialogContentText, { variant: "h2" }, "Overview"), /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement(Container, { title: "Identity" }, /* @__PURE__ */ React.createElement(List, { dense: true }, /* @__PURE__ */ React.createElement(ListItem, null, /* @__PURE__ */ React.createElement(ListItemText, { primary: "apiVersion", secondary: apiVersion })), /* @__PURE__ */ React.createElement(ListItem, null, /* @__PURE__ */ React.createElement(ListItemText, { primary: "kind", secondary: kind })), (spec == null ? void 0 : spec.type) && /* @__PURE__ */ React.createElement(ListItem, null, /* @__PURE__ */ React.createElement(
     ListItemText,
     {
       primary: "spec.type",
       secondary: (_a = spec.type) == null ? void 0 : _a.toString()
     }
-  )), metadata.uid && /* @__PURE__ */ React.createElement(ListItem, null, /* @__PURE__ */ React.createElement(ListItemText, { primary: "uid", secondary: metadata.uid })), metadata.etag && /* @__PURE__ */ React.createElement(ListItem, null, /* @__PURE__ */ React.createElement(ListItemText, { primary: "etag", secondary: metadata.etag })))), /* @__PURE__ */ React.createElement(Container, { title: "Metadata" }, !!Object.keys(metadata.annotations || {}).length && /* @__PURE__ */ React.createElement(
+  )), metadata.uid && /* @__PURE__ */ React.createElement(ListItem, null, /* @__PURE__ */ React.createElement(ListItemText, { primary: "uid", secondary: metadata.uid }), /* @__PURE__ */ React.createElement(ListItemSecondaryAction, null, /* @__PURE__ */ React.createElement(CopyTextButton, { text: metadata.uid }))), metadata.etag && /* @__PURE__ */ React.createElement(ListItem, null, /* @__PURE__ */ React.createElement(ListItemText, { primary: "etag", secondary: metadata.etag }), /* @__PURE__ */ React.createElement(ListItemSecondaryAction, null, /* @__PURE__ */ React.createElement(CopyTextButton, { text: metadata.etag }))), /* @__PURE__ */ React.createElement(ListItem, null, /* @__PURE__ */ React.createElement(ListItemText, { primary: "entityRef", secondary: entityRef }), /* @__PURE__ */ React.createElement(ListItemSecondaryAction, null, /* @__PURE__ */ React.createElement(CopyTextButton, { text: entityRef }))))), /* @__PURE__ */ React.createElement(Container, { title: "Metadata" }, !!Object.keys(metadata.annotations || {}).length && /* @__PURE__ */ React.createElement(
     List,
     {
       dense: true,
@@ -2368,7 +2375,7 @@ function YamlPage(props) {
   ))));
 }
 
-const useStyles$4 = makeStyles((theme) => ({
+const useStyles$5 = makeStyles((theme) => ({
   fullHeightDialog: {
     height: "calc(100% - 64px)"
   },
@@ -2389,7 +2396,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 +2417,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 +2521,7 @@ function useUnregisterEntityDialogState(entity) {
   };
 }
 
-const useStyles$3 = makeStyles({
+const useStyles$4 = makeStyles({
   advancedButton: {
     fontSize: "0.7em"
   },
@@ -2530,7 +2537,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 +2826,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 +2885,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 {
@@ -2971,7 +2978,6 @@ const UserListPicker = (props) => {
       {
         role: "none presentation",
         key: item.id,
-        button: true,
         divider: true,
         onClick: () => setSelectedUserFilter(item.id),
         selected: item.id === ((_a2 = filters.user) == null ? void 0 : _a2.value),
@@ -2988,7 +2994,7 @@ const UserListPicker = (props) => {
   }))))));
 };
 
-const useStyles$1 = makeStyles(
+const useStyles$2 = makeStyles(
   {
     input: {}
   },
@@ -2999,7 +3005,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 +3062,7 @@ const EntityProcessingStatusPicker = () => {
   )));
 };
 
-const useStyles = makeStyles(
+const useStyles$1 = makeStyles(
   {
     input: {}
   },
@@ -3065,7 +3071,7 @@ const useStyles = makeStyles(
   }
 );
 const EntityNamespacePicker = () => {
-  const classes = useStyles();
+  const classes = useStyles$1();
   return /* @__PURE__ */ React.createElement(
     EntityAutocompletePicker,
     {
@@ -3078,6 +3084,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 +3196,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