@backstage/plugin-catalog-react 0.9.0 → 1.0.1-next.1

package/CHANGELOG.md

@@ -1,5 +1,79 @@
 # @backstage/plugin-catalog-react
 
+## 1.0.1-next.1
+
+### Patch Changes
+
+- 0ffd88a90e: Prevent permissions with types other than `ResourcePermission<'catalog-entity'>` from being used with the `useEntityPermission` hook.
+- 4af82967f4: Decouple tags picker from backend entities
+
+  `EntityTagPicker` fetches all the tags independently and it doesn't require all the entities to be available client side.
+
+- 37b04b5a5e: Removed broken link from Labels section of entity inspector.
+- 4431873583: Update `usePermission` usage.
+- Updated dependencies
+  - @backstage/integration@1.1.0-next.1
+  - @backstage/plugin-permission-react@0.4.0-next.0
+  - @backstage/plugin-permission-common@0.6.0-next.0
+  - @backstage/plugin-catalog-common@1.0.1-next.1
+
+## 1.0.1-next.0
+
+### Patch Changes
+
+- a496cee4d1: Add support for string refs to the `EntityRefLinks` component
+- d34900af81: Added a new `NextScaffolderRouter` which will eventually replace the exiting router
+- Updated dependencies
+  - @backstage/catalog-model@1.0.1-next.0
+  - @backstage/integration@1.0.1-next.0
+  - @backstage/core-components@0.9.3-next.0
+  - @backstage/catalog-client@1.0.1-next.0
+
+## 1.0.0
+
+### Major Changes
+
+- b58c70c223: This package has been promoted to v1.0! To understand how this change affects the package, please check out our [versioning policy](https://backstage.io/docs/overview/versioning-policy).
+
+### Minor Changes
+
+- f7fb7295e6: **BREAKING**: Removed the deprecated `favoriteEntityTooltip` and `favoriteEntityIcon` functions.
+- 4cd92028b8: **BREAKING**: The following deprecated annotation reading helper functions were removed:
+
+  - `getEntityMetadataViewUrl`, use `entity.metadata.annotations?.[ANNOTATION_VIEW_URL]` instead.
+  - `getEntityMetadataEditUrl`, use `entity.metadata.annotations?.[ANNOTATION_EDIT_URL]` instead.
+
+- 1f2757bb07: **BREAKING**: The `useEntity` hook no longer returns loading or error states, and will throw an error if the entity is not immediately available. In practice this means that `useEntity` can only be used in contexts where the entity is guaranteed to have been loaded, for example inside an `EntityLayout`. To access the loading state of the entity, use `useAsyncEntity` instead.
+- 0f3520d499: **BREAKING**: Removed the deprecated `formatEntityRefTitle`, use `humanizeEntityRef` instead.
+
+### Patch Changes
+
+- a422d7ce5e: chore(deps): bump `@testing-library/react` from 11.2.6 to 12.1.3
+- c689d7a94c: Added `CatalogFilterLayout`, which replaces `FilteredEntityLayout` from `@backstage/plugin-catalog`, as well as `FilterContainer` and `EntityListContainer`. It is used like this:
+
+  ```tsx
+  <CatalogFilterLayout>
+    <CatalogFilterLayout.Filters>
+      {/* filter drawer, for example <EntityTypePicker /> and friends */}
+    </CatalogFilterLayout.Filters>
+    <CatalogFilterLayout.Content>
+      {/* content view, for example a <CatalogTable /> */}
+    </CatalogFilterLayout.Content>
+  </CatalogFilterLayout>
+  ```
+
+- Updated dependencies
+  - @backstage/core-components@0.9.2
+  - @backstage/core-plugin-api@1.0.0
+  - @backstage/version-bridge@1.0.0
+  - @backstage/plugin-permission-react@0.3.4
+  - @backstage/catalog-model@1.0.0
+  - @backstage/integration@1.0.0
+  - @backstage/catalog-client@1.0.0
+  - @backstage/errors@1.0.0
+  - @backstage/types@1.0.0
+  - @backstage/plugin-permission-common@0.5.3
+
 ## 0.9.0
 
 ### Minor Changes

package/alpha/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backstage/plugin-catalog-react",
-  "version": "0.9.0",
+  "version": "1.0.1-next.1",
   "main": "../dist/index.esm.js",
   "types": "../dist/index.alpha.d.ts"
 }

package/dist/index.alpha.d.ts

@@ -17,10 +17,10 @@ import { IconButton } from '@material-ui/core';
 import { LinkProps } from '@backstage/core-components';
 import { Observable } from '@backstage/types';
 import { Overrides } from '@material-ui/core/styles/overrides';
-import { Permission } from '@backstage/plugin-permission-common';
 import { PropsWithChildren } from 'react';
 import { default as React_2 } from 'react';
 import { ReactNode } from 'react';
+import { ResourcePermission } from '@backstage/plugin-permission-common';
 import { RouteRef } from '@backstage/core-plugin-api';
 import { ScmIntegrationRegistry } from '@backstage/integration';
 import { StyleRules } from '@material-ui/core/styles/withStyles';
@@ -62,6 +62,19 @@ export { CatalogApi }
  */
 export declare const catalogApiRef: ApiRef<CatalogApi>;
 
+/** @public */
+export declare const CatalogFilterLayout: {
+    (props: {
+        children: React_2.ReactNode;
+    }): JSX.Element;
+    Filters: (props: {
+        children: React_2.ReactNode;
+    }) => JSX.Element;
+    Content: (props: {
+        children: React_2.ReactNode;
+    }) => JSX.Element;
+};
+
 /** @public */
 export declare type CatalogReactComponentsNameToClassKey = {
     CatalogReactUserListPicker: CatalogReactUserListPickerClassKey;
@@ -282,7 +295,7 @@ export declare type EntityRefLinkProps = {
  *
  * @public
  */
-export declare const EntityRefLinks: ({ entityRefs, defaultKind, ...linkProps }: EntityRefLinksProps) => JSX.Element;
+export declare function EntityRefLinks(props: EntityRefLinksProps): JSX.Element;
 
 /**
  * Props for {@link EntityRefLink}.
@@ -290,7 +303,7 @@ export declare const EntityRefLinks: ({ entityRefs, defaultKind, ...linkProps }:
  * @public
  */
 export declare type EntityRefLinksProps = {
-    entityRefs: (Entity | CompoundEntityRef)[];
+    entityRefs: (string | Entity | CompoundEntityRef)[];
     defaultKind?: string;
 } & Omit<LinkProps, 'to'>;
 
@@ -432,37 +445,11 @@ export declare interface EntityTypePickerProps {
  */
 export declare const FavoriteEntity: (props: FavoriteEntityProps) => JSX.Element;
 
-/**
- * @public
- * @deprecated due to low utility value.
- */
-export declare const favoriteEntityIcon: (isStarred: boolean) => JSX.Element;
-
 /** @public */
 export declare type FavoriteEntityProps = ComponentProps<typeof IconButton> & {
     entity: Entity;
 };
 
-/**
- * @public
- * @deprecated due to low utility value.
- */
-export declare const favoriteEntityTooltip: (isStarred: boolean) => "Remove from favorites" | "Add to favorites";
-
-/** @public @deprecated please use {@link humanizeEntityRef} instead */
-export declare const formatEntityRefTitle: typeof humanizeEntityRef;
-
-/**
- * @public
- * @deprecated use entity.metadata.annotations?.[ANNOTATION_EDIT_URL] instead.
- */
-export declare function getEntityMetadataEditUrl(entity: Entity): string | undefined;
-
-/**
- * @public
- * @deprecated use entity.metadata.annotations?.[ANNOTATION_VIEW_URL] instead. */
-export declare function getEntityMetadataViewUrl(entity: Entity): string | undefined;
-
 /**
  * Get the related entity references.
  *
@@ -571,12 +558,6 @@ export declare function useAsyncEntity<TEntity extends Entity = Entity>(): Entit
  */
 export declare function useEntity<TEntity extends Entity = Entity>(): {
     entity: TEntity;
-    /** @deprecated use {@link useAsyncEntity} instead */
-    loading: boolean;
-    /** @deprecated use {@link useAsyncEntity} instead */
-    error?: Error;
-    /** @deprecated use {@link useAsyncEntity} instead */
-    refresh?: VoidFunction;
 };
 
 /**
@@ -604,14 +585,14 @@ export declare function useEntityOwnership(): {
  * A thin wrapper around the
  * {@link @backstage/plugin-permission-react#usePermission} hook which uses the
  * current entity in context to make an authorization request for the given
- * permission.
+ * {@link @backstage/plugin-catalog-common#CatalogEntityPermission}.
  *
  * Note: this hook blocks the permission request until the entity has loaded in
  * context. If you have the entityRef and need concurrent requests, use the
  * `usePermission` hook directly.
  * @alpha
  */
-export declare function useEntityPermission(permission: Permission): {
+export declare function useEntityPermission(permission: ResourcePermission<'catalog-entity'>): {
     loading: boolean;
     allowed: boolean;
     error?: Error;

package/dist/index.beta.d.ts

@@ -17,10 +17,10 @@ import { IconButton } from '@material-ui/core';
 import { LinkProps } from '@backstage/core-components';
 import { Observable } from '@backstage/types';
 import { Overrides } from '@material-ui/core/styles/overrides';
-import { Permission } from '@backstage/plugin-permission-common';
 import { PropsWithChildren } from 'react';
 import { default as React_2 } from 'react';
 import { ReactNode } from 'react';
+import { ResourcePermission } from '@backstage/plugin-permission-common';
 import { RouteRef } from '@backstage/core-plugin-api';
 import { ScmIntegrationRegistry } from '@backstage/integration';
 import { StyleRules } from '@material-ui/core/styles/withStyles';
@@ -62,6 +62,19 @@ export { CatalogApi }
  */
 export declare const catalogApiRef: ApiRef<CatalogApi>;
 
+/** @public */
+export declare const CatalogFilterLayout: {
+    (props: {
+        children: React_2.ReactNode;
+    }): JSX.Element;
+    Filters: (props: {
+        children: React_2.ReactNode;
+    }) => JSX.Element;
+    Content: (props: {
+        children: React_2.ReactNode;
+    }) => JSX.Element;
+};
+
 /** @public */
 export declare type CatalogReactComponentsNameToClassKey = {
     CatalogReactUserListPicker: CatalogReactUserListPickerClassKey;
@@ -282,7 +295,7 @@ export declare type EntityRefLinkProps = {
  *
  * @public
  */
-export declare const EntityRefLinks: ({ entityRefs, defaultKind, ...linkProps }: EntityRefLinksProps) => JSX.Element;
+export declare function EntityRefLinks(props: EntityRefLinksProps): JSX.Element;
 
 /**
  * Props for {@link EntityRefLink}.
@@ -290,7 +303,7 @@ export declare const EntityRefLinks: ({ entityRefs, defaultKind, ...linkProps }:
  * @public
  */
 export declare type EntityRefLinksProps = {
-    entityRefs: (Entity | CompoundEntityRef)[];
+    entityRefs: (string | Entity | CompoundEntityRef)[];
     defaultKind?: string;
 } & Omit<LinkProps, 'to'>;
 
@@ -432,37 +445,11 @@ export declare interface EntityTypePickerProps {
  */
 export declare const FavoriteEntity: (props: FavoriteEntityProps) => JSX.Element;
 
-/**
- * @public
- * @deprecated due to low utility value.
- */
-export declare const favoriteEntityIcon: (isStarred: boolean) => JSX.Element;
-
 /** @public */
 export declare type FavoriteEntityProps = ComponentProps<typeof IconButton> & {
     entity: Entity;
 };
 
-/**
- * @public
- * @deprecated due to low utility value.
- */
-export declare const favoriteEntityTooltip: (isStarred: boolean) => "Remove from favorites" | "Add to favorites";
-
-/** @public @deprecated please use {@link humanizeEntityRef} instead */
-export declare const formatEntityRefTitle: typeof humanizeEntityRef;
-
-/**
- * @public
- * @deprecated use entity.metadata.annotations?.[ANNOTATION_EDIT_URL] instead.
- */
-export declare function getEntityMetadataEditUrl(entity: Entity): string | undefined;
-
-/**
- * @public
- * @deprecated use entity.metadata.annotations?.[ANNOTATION_VIEW_URL] instead. */
-export declare function getEntityMetadataViewUrl(entity: Entity): string | undefined;
-
 /**
  * Get the related entity references.
  *
@@ -562,12 +549,6 @@ export declare function useAsyncEntity<TEntity extends Entity = Entity>(): Entit
  */
 export declare function useEntity<TEntity extends Entity = Entity>(): {
     entity: TEntity;
-    /** @deprecated use {@link useAsyncEntity} instead */
-    loading: boolean;
-    /** @deprecated use {@link useAsyncEntity} instead */
-    error?: Error;
-    /** @deprecated use {@link useAsyncEntity} instead */
-    refresh?: VoidFunction;
 };
 
 /**

package/dist/index.d.ts

@@ -17,10 +17,10 @@ import { IconButton } from '@material-ui/core';
 import { LinkProps } from '@backstage/core-components';
 import { Observable } from '@backstage/types';
 import { Overrides } from '@material-ui/core/styles/overrides';
-import { Permission } from '@backstage/plugin-permission-common';
 import { PropsWithChildren } from 'react';
 import { default as React_2 } from 'react';
 import { ReactNode } from 'react';
+import { ResourcePermission } from '@backstage/plugin-permission-common';
 import { RouteRef } from '@backstage/core-plugin-api';
 import { ScmIntegrationRegistry } from '@backstage/integration';
 import { StyleRules } from '@material-ui/core/styles/withStyles';
@@ -62,6 +62,19 @@ export { CatalogApi }
  */
 export declare const catalogApiRef: ApiRef<CatalogApi>;
 
+/** @public */
+export declare const CatalogFilterLayout: {
+    (props: {
+        children: React_2.ReactNode;
+    }): JSX.Element;
+    Filters: (props: {
+        children: React_2.ReactNode;
+    }) => JSX.Element;
+    Content: (props: {
+        children: React_2.ReactNode;
+    }) => JSX.Element;
+};
+
 /** @public */
 export declare type CatalogReactComponentsNameToClassKey = {
     CatalogReactUserListPicker: CatalogReactUserListPickerClassKey;
@@ -282,7 +295,7 @@ export declare type EntityRefLinkProps = {
  *
  * @public
  */
-export declare const EntityRefLinks: ({ entityRefs, defaultKind, ...linkProps }: EntityRefLinksProps) => JSX.Element;
+export declare function EntityRefLinks(props: EntityRefLinksProps): JSX.Element;
 
 /**
  * Props for {@link EntityRefLink}.
@@ -290,7 +303,7 @@ export declare const EntityRefLinks: ({ entityRefs, defaultKind, ...linkProps }:
  * @public
  */
 export declare type EntityRefLinksProps = {
-    entityRefs: (Entity | CompoundEntityRef)[];
+    entityRefs: (string | Entity | CompoundEntityRef)[];
     defaultKind?: string;
 } & Omit<LinkProps, 'to'>;
 
@@ -432,37 +445,11 @@ export declare interface EntityTypePickerProps {
  */
 export declare const FavoriteEntity: (props: FavoriteEntityProps) => JSX.Element;
 
-/**
- * @public
- * @deprecated due to low utility value.
- */
-export declare const favoriteEntityIcon: (isStarred: boolean) => JSX.Element;
-
 /** @public */
 export declare type FavoriteEntityProps = ComponentProps<typeof IconButton> & {
     entity: Entity;
 };
 
-/**
- * @public
- * @deprecated due to low utility value.
- */
-export declare const favoriteEntityTooltip: (isStarred: boolean) => "Remove from favorites" | "Add to favorites";
-
-/** @public @deprecated please use {@link humanizeEntityRef} instead */
-export declare const formatEntityRefTitle: typeof humanizeEntityRef;
-
-/**
- * @public
- * @deprecated use entity.metadata.annotations?.[ANNOTATION_EDIT_URL] instead.
- */
-export declare function getEntityMetadataEditUrl(entity: Entity): string | undefined;
-
-/**
- * @public
- * @deprecated use entity.metadata.annotations?.[ANNOTATION_VIEW_URL] instead. */
-export declare function getEntityMetadataViewUrl(entity: Entity): string | undefined;
-
 /**
  * Get the related entity references.
  *
@@ -562,12 +549,6 @@ export declare function useAsyncEntity<TEntity extends Entity = Entity>(): Entit
  */
 export declare function useEntity<TEntity extends Entity = Entity>(): {
     entity: TEntity;
-    /** @deprecated use {@link useAsyncEntity} instead */
-    loading: boolean;
-    /** @deprecated use {@link useAsyncEntity} instead */
-    error?: Error;
-    /** @deprecated use {@link useAsyncEntity} instead */
-    refresh?: VoidFunction;
 };
 
 /**

package/dist/index.esm.js

@@ -1,7 +1,9 @@
 export { CATALOG_FILTER_EXISTS } from '@backstage/catalog-client';
 import { createApiRef, useApi, createRouteRef, useRouteRef, identityApiRef, alertApiRef, useApp, configApiRef } from '@backstage/core-plugin-api';
 import ObservableImpl from 'zen-observable';
-import React, { createContext, useState, useMemo, useCallback, useContext, forwardRef, useEffect, useRef, useLayoutEffect, Fragment } from 'react';
+import React, { useState, createContext, useMemo, useCallback, useContext, forwardRef, useEffect, useRef, useLayoutEffect, Fragment } from 'react';
+import { Grid, useMediaQuery, useTheme, Button, Drawer, Box, Typography, Tooltip, makeStyles, FormControlLabel, Checkbox, TextField, Toolbar, FormControl, Input, InputAdornment, IconButton, withStyles, DialogContentText, ListItemText as ListItemText$1, ListSubheader as ListSubheader$1, Card, CardContent, ListItem, ListItemIcon, List, Dialog, DialogTitle, DialogContent, Tabs, Tab, DialogActions, Divider, MenuItem, ListItemSecondaryAction } from '@material-ui/core';
+import FilterListIcon from '@material-ui/icons/FilterList';
 import { Alert, Autocomplete } from '@material-ui/lab';
 import { createVersionedContext, createVersionedValueMap, useVersionedContext, getOrCreateGlobalSingleton } from '@backstage/version-bridge';
 import { compact, isEqual, groupBy, chunk } from 'lodash';
@@ -10,12 +12,11 @@ import { useLocation, useNavigate } from 'react-router';
 import useAsyncFn from 'react-use/lib/useAsyncFn';
 import useDebounce from 'react-use/lib/useDebounce';
 import useMountedState from 'react-use/lib/useMountedState';
-import { ANNOTATION_VIEW_URL, ANNOTATION_EDIT_URL, parseEntityRef, ANNOTATION_SOURCE_LOCATION, parseLocationRef, RELATION_MEMBER_OF, getCompoundEntityRef, stringifyEntityRef, RELATION_OWNED_BY, DEFAULT_NAMESPACE, RELATION_PART_OF, ANNOTATION_LOCATION, ANNOTATION_ORIGIN_LOCATION } from '@backstage/catalog-model';
+import { parseEntityRef, ANNOTATION_SOURCE_LOCATION, parseLocationRef, RELATION_MEMBER_OF, getCompoundEntityRef, stringifyEntityRef, RELATION_OWNED_BY, DEFAULT_NAMESPACE, RELATION_PART_OF, ANNOTATION_LOCATION, ANNOTATION_ORIGIN_LOCATION } from '@backstage/catalog-model';
 import useAsync from 'react-use/lib/useAsync';
 import isEqual$1 from 'lodash/isEqual';
 import sortBy from 'lodash/sortBy';
 import { Link, OverflowTooltip, Table, Select, Progress, ResponseErrorPanel, DependencyGraph, DependencyGraphTypes, CodeSnippet } from '@backstage/core-components';
-import { Tooltip, makeStyles, Box, Typography, FormControlLabel, Checkbox, TextField, Toolbar, FormControl, Input, InputAdornment, IconButton, withStyles, DialogContentText, ListItemText as ListItemText$1, ListSubheader as ListSubheader$1, Card, CardContent, ListItem, ListItemIcon, List, Dialog, DialogTitle, DialogContent, Tabs, Tab, DialogActions, Button, Divider, MenuItem, ListItemSecondaryAction } from '@material-ui/core';
 import useObservable from 'react-use/lib/useObservable';
 import { usePermission } from '@backstage/plugin-permission-react';
 import CheckBoxIcon from '@material-ui/icons/CheckBox';
@@ -69,6 +70,48 @@ class MockStarredEntitiesApi {
   }
 }
 
+const Filters = (props) => {
+  const isMidSizeScreen = useMediaQuery((theme2) => theme2.breakpoints.down("md"));
+  const theme = useTheme();
+  const [filterDrawerOpen, setFilterDrawerOpen] = useState(false);
+  return isMidSizeScreen ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Button, {
+    style: { marginTop: theme.spacing(1), marginLeft: theme.spacing(1) },
+    onClick: () => setFilterDrawerOpen(true),
+    startIcon: /* @__PURE__ */ React.createElement(FilterListIcon, null)
+  }, "Filters"), /* @__PURE__ */ React.createElement(Drawer, {
+    open: filterDrawerOpen,
+    onClose: () => setFilterDrawerOpen(false),
+    anchor: "left",
+    disableAutoFocus: true,
+    keepMounted: true,
+    variant: "temporary"
+  }, /* @__PURE__ */ React.createElement(Box, {
+    m: 2
+  }, /* @__PURE__ */ React.createElement(Typography, {
+    variant: "h6",
+    component: "h2",
+    style: { marginBottom: theme.spacing(1) }
+  }, "Filters"), props.children))) : /* @__PURE__ */ React.createElement(Grid, {
+    item: true,
+    lg: 2
+  }, props.children);
+};
+const Content = (props) => {
+  return /* @__PURE__ */ React.createElement(Grid, {
+    item: true,
+    xs: 12,
+    lg: 10
+  }, props.children);
+};
+const CatalogFilterLayout = (props) => {
+  return /* @__PURE__ */ React.createElement(Grid, {
+    container: true,
+    style: { position: "relative" }
+  }, props.children);
+};
+CatalogFilterLayout.Filters = Filters;
+CatalogFilterLayout.Content = Content;
+
 const NewEntityContext = createVersionedContext("entity-context");
 const AsyncEntityProvider = ({
   children,
@@ -99,10 +142,9 @@ function useEntity() {
     throw new Error("EntityContext v1 not available");
   }
   if (!value.entity) {
-    console.warn("DEPRECATION: useEntity hook is being called outside of an EntityLayout where the entity has not been loaded. If this is intentional, please use useAsyncEntity instead. This warning will be replaced with an error in future releases.");
+    throw new Error("useEntity hook is being called outside of an EntityLayout where the entity has not been loaded. If this is intentional, please use useAsyncEntity instead.");
   }
-  const { entity, loading, error, refresh } = value;
-  return { entity, loading, error, refresh };
+  return { entity: value.entity };
 }
 function useAsyncEntity() {
   const versionedHolder = useVersionedContext("entity-context");
@@ -129,15 +171,6 @@ function reduceEntityFilters(filters) {
   return (entity) => filters.every((filter) => !filter.filterEntity || filter.filterEntity(entity));
 }
 
-function getEntityMetadataViewUrl(entity) {
-  var _a;
-  return (_a = entity.metadata.annotations) == null ? void 0 : _a[ANNOTATION_VIEW_URL];
-}
-function getEntityMetadataEditUrl(entity) {
-  var _a;
-  return (_a = entity.metadata.annotations) == null ? void 0 : _a[ANNOTATION_EDIT_URL];
-}
-
 function getEntityRelations(entity, relationType, filter) {
   var _a;
   let entityNames = ((_a = entity == null ? void 0 : entity.relations) == null ? void 0 : _a.filter((r) => r.type === relationType).map((r) => parseEntityRef(r.targetRef))) || [];
@@ -278,7 +311,6 @@ function entityRouteParams(entity) {
   };
 }
 
-const formatEntityRefTitle = humanizeEntityRef;
 function humanizeEntityRef(entityRef, opts) {
   const defaultKind = opts == null ? void 0 : opts.defaultKind;
   let kind;
@@ -336,17 +368,16 @@ const EntityRefLink = forwardRef((props, ref) => {
   }, link) : link;
 });
 
-const EntityRefLinks = ({
-  entityRefs,
-  defaultKind,
-  ...linkProps
-}) => /* @__PURE__ */ React.createElement(React.Fragment, null, entityRefs.map((r, i) => /* @__PURE__ */ React.createElement(React.Fragment, {
-  key: i
-}, i > 0 && ", ", /* @__PURE__ */ React.createElement(EntityRefLink, {
-  ...linkProps,
-  entityRef: r,
-  defaultKind
-}))));
+function EntityRefLinks(props) {
+  const { entityRefs, defaultKind, ...linkProps } = props;
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, entityRefs.map((r, i) => /* @__PURE__ */ React.createElement(React.Fragment, {
+    key: i
+  }, i > 0 && ", ", /* @__PURE__ */ React.createElement(EntityRefLink, {
+    ...linkProps,
+    entityRef: r,
+    defaultKind
+  }))));
+}
 
 class EntityKindFilter {
   constructor(value) {
@@ -609,12 +640,19 @@ function useEntityOwnership() {
 }
 
 function useEntityPermission(permission) {
-  const { entity, loading: loadingEntity, error: entityError } = useEntity();
+  const {
+    entity,
+    loading: loadingEntity,
+    error: entityError
+  } = useAsyncEntity();
   const {
     allowed,
     loading: loadingPermission,
     error: permissionError
-  } = usePermission(permission, entity ? stringifyEntityRef(entity) : void 0);
+  } = usePermission({
+    permission,
+    resourceRef: entity ? stringifyEntityRef(entity) : void 0
+  });
   if (loadingEntity || loadingPermission) {
     return { loading: true, allowed: false };
   }
@@ -792,6 +830,7 @@ const EntitySearchBar = () => {
   return /* @__PURE__ */ React.createElement(Toolbar, {
     className: classes.searchToolbar
   }, /* @__PURE__ */ React.createElement(FormControl, null, /* @__PURE__ */ React.createElement(Input, {
+    "aria-label": "search",
     id: "input-with-icon-adornment",
     className: classes.input,
     placeholder: "Search",
@@ -993,7 +1032,17 @@ const checkedIcon = /* @__PURE__ */ React.createElement(CheckBoxIcon, {
 const EntityTagPicker = () => {
   var _a, _b;
   const classes = useStyles$7();
-  const { updateFilters, backendEntities, filters, queryParameters } = useEntityList();
+  const { updateFilters, filters, queryParameters } = useEntityList();
+  const catalogApi = useApi(catalogApiRef);
+  const { value: availableTags } = useAsync(async () => {
+    var _a2;
+    const facet = "metadata.tags";
+    const { facets } = await catalogApi.getEntityFacets({
+      facets: [facet],
+      filter: (_a2 = filters.kind) == null ? void 0 : _a2.getCatalogFilters()
+    });
+    return facets[facet].map(({ value }) => value);
+  }, [filters.kind]);
   const queryParamTags = useMemo(() => [queryParameters.tags].flat().filter(Boolean), [queryParameters]);
   const [selectedTags, setSelectedTags] = useState(queryParamTags.length ? queryParamTags : (_b = (_a = filters.tags) == null ? void 0 : _a.values) != null ? _b : []);
   useEffect(() => {
@@ -1006,10 +1055,7 @@ const EntityTagPicker = () => {
       tags: selectedTags.length ? new EntityTagFilter(selectedTags) : void 0
     });
   }, [selectedTags, updateFilters]);
-  const availableTags = useMemo(() => [
-    ...new Set(backendEntities.flatMap((e) => e.metadata.tags).filter(Boolean))
-  ].sort(), [backendEntities]);
-  if (!availableTags.length)
+  if (!(availableTags == null ? void 0 : availableTags.length))
     return null;
   return /* @__PURE__ */ React.createElement(Box, {
     pb: 1,
@@ -1083,11 +1129,10 @@ const YellowStar = withStyles({
     color: "#f3ba37"
   }
 })(Star);
-const favoriteEntityTooltip = (isStarred) => isStarred ? "Remove from favorites" : "Add to favorites";
-const favoriteEntityIcon = (isStarred) => isStarred ? /* @__PURE__ */ React.createElement(YellowStar, null) : /* @__PURE__ */ React.createElement(StarBorder, null);
 const FavoriteEntity = (props) => {
   const { toggleStarredEntity, isStarredEntity } = useStarredEntity(props.entity);
   return /* @__PURE__ */ React.createElement(IconButton, {
+    "aria-label": "favorite",
     color: "inherit",
     ...props,
     onClick: () => toggleStarredEntity()
@@ -1496,9 +1541,7 @@ function OverviewPage(props) {
     entry
   }))), !!Object.keys(metadata.labels || {}).length && /* @__PURE__ */ React.createElement(List, {
     dense: true,
-    subheader: /* @__PURE__ */ React.createElement(ListSubheader, null, "Labels", /* @__PURE__ */ React.createElement(HelpIcon, {
-      to: "https://backstage.io/docs/features/software-catalog/well-known-labels"
-    }))
+    subheader: /* @__PURE__ */ React.createElement(ListSubheader, null, "Labels")
   }, Object.entries(metadata.labels).map((entry) => /* @__PURE__ */ React.createElement(KeyValueListItem, {
     key: entry[0],
     indent: true,
@@ -2022,5 +2065,5 @@ const MockEntityListContextProvider = ({
   }, children);
 };
 
-export { AsyncEntityProvider, EntityKindFilter, EntityKindPicker, EntityLifecycleFilter, EntityLifecyclePicker, EntityListContext, EntityListProvider, EntityOwnerFilter, EntityOwnerPicker, EntityProvider, EntityRefLink, EntityRefLinks, EntitySearchBar, EntityTable, EntityTagFilter, EntityTagPicker, EntityTextFilter, EntityTypeFilter, EntityTypePicker, FavoriteEntity, InspectEntityDialog, MockEntityListContextProvider, MockStarredEntitiesApi, UnregisterEntityDialog, UserListFilter, UserListPicker, catalogApiRef, columnFactories, entityRouteParams, entityRouteRef, favoriteEntityIcon, favoriteEntityTooltip, formatEntityRefTitle, getEntityMetadataEditUrl, getEntityMetadataViewUrl, getEntityRelations, getEntitySourceLocation, humanizeEntityRef, isOwnerOf, starredEntitiesApiRef, useAsyncEntity, useEntity, useEntityList, useEntityOwnership, useEntityPermission, useEntityTypeFilter, useRelatedEntities, useStarredEntities, useStarredEntity };
+export { AsyncEntityProvider, CatalogFilterLayout, EntityKindFilter, EntityKindPicker, EntityLifecycleFilter, EntityLifecyclePicker, EntityListContext, EntityListProvider, EntityOwnerFilter, EntityOwnerPicker, EntityProvider, EntityRefLink, EntityRefLinks, EntitySearchBar, EntityTable, EntityTagFilter, EntityTagPicker, EntityTextFilter, EntityTypeFilter, EntityTypePicker, FavoriteEntity, InspectEntityDialog, MockEntityListContextProvider, MockStarredEntitiesApi, UnregisterEntityDialog, UserListFilter, UserListPicker, catalogApiRef, columnFactories, entityRouteParams, entityRouteRef, getEntityRelations, getEntitySourceLocation, humanizeEntityRef, isOwnerOf, starredEntitiesApiRef, useAsyncEntity, useEntity, useEntityList, useEntityOwnership, useEntityPermission, useEntityTypeFilter, useRelatedEntities, useStarredEntities, useStarredEntity };
 //# sourceMappingURL=index.esm.js.map