@backstage/plugin-catalog-react 1.0.0 → 1.0.1-next.2

package/CHANGELOG.md

@@ -1,5 +1,45 @@
 # @backstage/plugin-catalog-react
 
+## 1.0.1-next.2
+
+### Patch Changes
+
+- 4be0d1e777: Changed catalog filter components to only pay attention to query parameters relevant to the component.
+- 5d5fdbe541: Columns in CatalogTable now change depending on the entity kind, ensuring only relevant columns are displayed.
+- 99063c39ae: Minor API report cleanup
+- Updated dependencies
+  - @backstage/core-components@0.9.3-next.1
+  - @backstage/catalog-model@1.0.1-next.1
+
+## 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

package/alpha/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backstage/plugin-catalog-react",
-  "version": "1.0.0",
+  "version": "1.0.1-next.2",
   "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';
@@ -259,7 +259,7 @@ export declare const EntityOwnerPicker: () => JSX.Element | null;
  *
  * @public
  */
-export declare const EntityProvider: ({ entity, children }: EntityProviderProps) => JSX.Element;
+export declare const EntityProvider: (props: EntityProviderProps) => JSX.Element;
 
 /**
  * Properties for the EntityProvider component.
@@ -295,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}.
@@ -303,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'>;
 
@@ -585,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';
@@ -259,7 +259,7 @@ export declare const EntityOwnerPicker: () => JSX.Element | null;
  *
  * @public
  */
-export declare const EntityProvider: ({ entity, children }: EntityProviderProps) => JSX.Element;
+export declare const EntityProvider: (props: EntityProviderProps) => JSX.Element;
 
 /**
  * Properties for the EntityProvider component.
@@ -295,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}.
@@ -303,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'>;
 

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';
@@ -259,7 +259,7 @@ export declare const EntityOwnerPicker: () => JSX.Element | null;
  *
  * @public
  */
-export declare const EntityProvider: ({ entity, children }: EntityProviderProps) => JSX.Element;
+export declare const EntityProvider: (props: EntityProviderProps) => JSX.Element;
 
 /**
  * Properties for the EntityProvider component.
@@ -295,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}.
@@ -303,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'>;
 

package/dist/index.esm.js

@@ -125,12 +125,12 @@ const AsyncEntityProvider = ({
     value: createVersionedValueMap({ 1: value })
   }, children);
 };
-const EntityProvider = ({ entity, children }) => /* @__PURE__ */ React.createElement(AsyncEntityProvider, {
-  entity,
-  loading: !Boolean(entity),
+const EntityProvider = (props) => /* @__PURE__ */ React.createElement(AsyncEntityProvider, {
+  entity: props.entity,
+  loading: !Boolean(props.entity),
   error: void 0,
   refresh: void 0,
-  children
+  children: props.children
 });
 function useEntity() {
   const versionedHolder = useVersionedContext("entity-context");
@@ -368,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) {
@@ -480,16 +479,16 @@ function useEntityTypeFilter() {
   const catalogApi = useApi(catalogApiRef);
   const {
     filters: { kind: kindFilter, type: typeFilter },
-    queryParameters,
+    queryParameters: { type: typeParameter },
     updateFilters
   } = useEntityList();
-  const queryParamTypes = useMemo(() => [queryParameters.type].flat().filter(Boolean), [queryParameters]);
-  const [selectedTypes, setSelectedTypes] = useState(queryParamTypes.length ? queryParamTypes : (_a = typeFilter == null ? void 0 : typeFilter.getTypes()) != null ? _a : []);
+  const flattenedQueryTypes = useMemo(() => [typeParameter].flat().filter(Boolean), [typeParameter]);
+  const [selectedTypes, setSelectedTypes] = useState(flattenedQueryTypes.length ? flattenedQueryTypes : (_a = typeFilter == null ? void 0 : typeFilter.getTypes()) != null ? _a : []);
   useEffect(() => {
-    if (queryParamTypes.length) {
-      setSelectedTypes(queryParamTypes);
+    if (flattenedQueryTypes.length) {
+      setSelectedTypes(flattenedQueryTypes);
     }
-  }, [queryParamTypes]);
+  }, [flattenedQueryTypes]);
   const [availableTypes, setAvailableTypes] = useState([]);
   const kind = useMemo(() => kindFilter == null ? void 0 : kindFilter.value, [kindFilter]);
   const {
@@ -650,7 +649,10 @@ function useEntityPermission(permission) {
     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 };
   }
@@ -663,8 +665,11 @@ function useEntityPermission(permission) {
 const EntityKindPicker = (props) => {
   var _a;
   const { initialFilter, hidden } = props;
-  const { updateFilters, queryParameters } = useEntityList();
-  const [selectedKind] = useState((_a = [queryParameters.kind].flat()[0]) != null ? _a : initialFilter);
+  const {
+    updateFilters,
+    queryParameters: { kind: kindParameter }
+  } = useEntityList();
+  const [selectedKind] = useState((_a = [kindParameter].flat()[0]) != null ? _a : initialFilter);
   useEffect(() => {
     updateFilters({
       kind: selectedKind ? new EntityKindFilter(selectedKind) : void 0
@@ -691,8 +696,13 @@ const checkedIcon$2 = /* @__PURE__ */ React.createElement(CheckBoxIcon, {
 const EntityLifecyclePicker = () => {
   var _a, _b;
   const classes = useStyles$b();
-  const { updateFilters, backendEntities, filters, queryParameters } = useEntityList();
-  const queryParamLifecycles = useMemo(() => [queryParameters.lifecycles].flat().filter(Boolean), [queryParameters]);
+  const {
+    updateFilters,
+    backendEntities,
+    filters,
+    queryParameters: { lifecycles: lifecyclesParameter }
+  } = useEntityList();
+  const queryParamLifecycles = useMemo(() => [lifecyclesParameter].flat().filter(Boolean), [lifecyclesParameter]);
   const [selectedLifecycles, setSelectedLifecycles] = useState(queryParamLifecycles.length ? queryParamLifecycles : (_b = (_a = filters.lifecycles) == null ? void 0 : _a.values) != null ? _b : []);
   useEffect(() => {
     if (queryParamLifecycles.length) {
@@ -757,8 +767,13 @@ const checkedIcon$1 = /* @__PURE__ */ React.createElement(CheckBoxIcon, {
 const EntityOwnerPicker = () => {
   var _a, _b;
   const classes = useStyles$a();
-  const { updateFilters, backendEntities, filters, queryParameters } = useEntityList();
-  const queryParamOwners = useMemo(() => [queryParameters.owners].flat().filter(Boolean), [queryParameters]);
+  const {
+    updateFilters,
+    backendEntities,
+    filters,
+    queryParameters: { owners: ownersParameter }
+  } = useEntityList();
+  const queryParamOwners = useMemo(() => [ownersParameter].flat().filter(Boolean), [ownersParameter]);
   const [selectedOwners, setSelectedOwners] = useState(queryParamOwners.length ? queryParamOwners : (_b = (_a = filters.owners) == null ? void 0 : _a.values) != null ? _b : []);
   useEffect(() => {
     if (queryParamOwners.length) {
@@ -828,6 +843,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",
@@ -1029,8 +1045,22 @@ const checkedIcon = /* @__PURE__ */ React.createElement(CheckBoxIcon, {
 const EntityTagPicker = () => {
   var _a, _b;
   const classes = useStyles$7();
-  const { updateFilters, backendEntities, filters, queryParameters } = useEntityList();
-  const queryParamTags = useMemo(() => [queryParameters.tags].flat().filter(Boolean), [queryParameters]);
+  const {
+    updateFilters,
+    filters,
+    queryParameters: { tags: tagsParameter }
+  } = 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(() => [tagsParameter].flat().filter(Boolean), [tagsParameter]);
   const [selectedTags, setSelectedTags] = useState(queryParamTags.length ? queryParamTags : (_b = (_a = filters.tags) == null ? void 0 : _a.values) != null ? _b : []);
   useEffect(() => {
     if (queryParamTags.length) {
@@ -1042,10 +1072,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,
@@ -1122,6 +1149,7 @@ const YellowStar = withStyles({
 const FavoriteEntity = (props) => {
   const { toggleStarredEntity, isStarredEntity } = useStarredEntity(props.entity);
   return /* @__PURE__ */ React.createElement(IconButton, {
+    "aria-label": "favorite",
     color: "inherit",
     ...props,
     onClick: () => toggleStarredEntity()
@@ -1530,9 +1558,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,
@@ -1953,20 +1979,20 @@ const UserListPicker = (props) => {
     filters,
     updateFilters,
     backendEntities,
-    queryParameters,
+    queryParameters: { kind: kindParameter, user: userParameter },
     loading: loadingBackendEntities
   } = useEntityList();
   const userAndGroupFilterIds = ["starred", "all"];
   const filterGroups = getFilterGroups(orgName).map((filterGroup) => ({
     ...filterGroup,
-    items: filterGroup.items.filter(({ id }) => ["group", "user"].some((kind) => kind === queryParameters.kind) ? userAndGroupFilterIds.includes(id) : !availableFilters || availableFilters.includes(id))
+    items: filterGroup.items.filter(({ id }) => ["group", "user"].some((kind) => kind === kindParameter) ? userAndGroupFilterIds.includes(id) : !availableFilters || availableFilters.includes(id))
   })).filter(({ items }) => !!items.length);
   const { isStarredEntity } = useStarredEntities();
   const { isOwnedEntity, loading: loadingEntityOwnership } = useEntityOwnership();
   const loading = loadingBackendEntities || loadingEntityOwnership;
   const ownedFilter = useMemo(() => new UserListFilter("owned", isOwnedEntity, isStarredEntity), [isOwnedEntity, isStarredEntity]);
   const starredFilter = useMemo(() => new UserListFilter("starred", isOwnedEntity, isStarredEntity), [isOwnedEntity, isStarredEntity]);
-  const queryParamUserFilter = useMemo(() => [queryParameters.user].flat()[0], [queryParameters]);
+  const queryParamUserFilter = useMemo(() => [userParameter].flat()[0], [userParameter]);
   const [selectedUserFilter, setSelectedUserFilter] = useState(queryParamUserFilter != null ? queryParamUserFilter : initialFilter);
   const entitiesWithoutUserFilter = useMemo(() => backendEntities.filter(reduceEntityFilters(compact(Object.values({ ...filters, user: void 0 })))), [filters, backendEntities]);
   const filterCounts = useMemo(() => ({