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

package/CHANGELOG.md

@@ -1,5 +1,63 @@
 # @backstage/plugin-catalog-react
 
+## 1.9.1
+
+### Patch Changes
+
+- ceebf2ca4ba7: Fixed a issue where `CatalogPage` wasn't using the chosen `initiallySelectedFilter` as intended.
+- Updated dependencies
+  - @backstage/integration-react@1.1.21
+
+## 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

package/alpha/package.json

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

package/dist/index.d.ts

@@ -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 */

package/dist/index.esm.js

@@ -13,9 +13,9 @@ 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, EmptyState } from '@backstage/core-components';
+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';
@@ -52,6 +52,7 @@ 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 useDeepCompareEffect from 'react-use/lib/useDeepCompareEffect';
 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';
@@ -1431,7 +1432,7 @@ const useStyles$e = makeStyles(
       alignItems: "center"
     },
     icon: {
-      marginLeft: theme.spacing(0.5),
+      marginRight: theme.spacing(0.5),
       color: theme.palette.text.secondary,
       lineHeight: 0
     }
@@ -1439,15 +1440,15 @@ const useStyles$e = makeStyles(
   { name: "CatalogReactEntityDisplayName" }
 );
 const EntityDisplayName = (props) => {
-  const { entityRef, noIcon, noTooltip, defaultKind, defaultNamespace } = props;
+  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;
@@ -1478,6 +1479,7 @@ const EntityRefLink = forwardRef(
       defaultNamespace,
       title,
       children,
+      hideIcon,
       ...linkProps
     } = props;
     const entityRoute = useEntityRoute(props.entityRef);
@@ -1486,7 +1488,8 @@ const EntityRefLink = forwardRef(
       {
         entityRef,
         defaultKind,
-        defaultNamespace
+        defaultNamespace,
+        hideIcon
       }
     );
     return /* @__PURE__ */ React.createElement(Link, { ...linkProps, ref, to: entityRoute }, content);
@@ -1523,10 +1526,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 }));
   }));
 }
 
@@ -2324,13 +2327,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,
@@ -2668,58 +2672,48 @@ function useOwnedEntitiesCount() {
     // load only on mount
     []
   );
-  const prevRequest = useRef();
-  const request = useMemo(() => {
-    const { user, owners, ...allFilters } = filters;
-    const compacted = compact(Object.values(allFilters));
-    const allFilter = reduceCatalogFilters(compacted);
-    const { ["metadata.name"]: metadata, ...filter2 } = allFilter;
-    const countFilter = getOwnedCountClaims(owners, ownershipEntityRefs);
-    if ((ownershipEntityRefs == null ? void 0 : ownershipEntityRefs.length) === 0 || countFilter === void 0 || Object.keys(filter2).length === 0) {
-      prevRequest.current = void 0;
-      return void 0;
-    }
-    const newRequest = {
-      filter: {
-        ...filter2,
-        "relations.ownedBy": countFilter
-      },
-      limit: 0
-    };
-    if (isEqual(newRequest, prevRequest.current)) {
-      return prevRequest.current;
-    }
-    prevRequest.current = newRequest;
-    return newRequest;
-  }, [filters, ownershipEntityRefs]);
+  const { user, owners, ...allFilters } = filters;
+  const { ["metadata.name"]: metadata, ...filter } = reduceCatalogFilters(
+    compact(Object.values(allFilters))
+  );
   const [{ value: count, loading: loadingEntityOwnership }, fetchEntities] = useAsyncFn(
-    async (req, ownershipEntityRefsParam) => {
-      if (ownershipEntityRefsParam && !req) {
+    async (req) => {
+      const ownedClaims = getOwnedCountClaims(
+        req.owners,
+        req.ownershipEntityRefs
+      );
+      if (ownedClaims === void 0) {
         return 0;
       }
-      const { totalItems } = await catalogApi.queryEntities(req);
+      const { totalItems } = await catalogApi.queryEntities({
+        filter: {
+          ...req.filter,
+          "relations.ownedBy": ownedClaims
+        },
+        limit: 0
+      });
       return totalItems;
     },
     [],
     { loading: true }
   );
-  useEffect(() => {
-    if (ownershipEntityRefs) {
-      if (request && Object.keys(request).length === 0) {
-        return;
-      }
-      fetchEntities(request, ownershipEntityRefs);
+  useDeepCompareEffect(() => {
+    if (Object.keys(filter).length === 0) {
+      return;
     }
-  }, [fetchEntities, request, ownershipEntityRefs]);
+    if (ownershipEntityRefs === void 0) {
+      return;
+    }
+    fetchEntities({ ownershipEntityRefs, owners, filter });
+  }, [ownershipEntityRefs, owners, filter]);
   const loading = loadingEntityRefs || loadingEntityOwnership;
-  const filter = useMemo(
-    () => EntityUserFilter.owned(ownershipEntityRefs != null ? ownershipEntityRefs : []),
-    [ownershipEntityRefs]
-  );
   return {
     count,
     loading,
-    filter,
+    filter: useMemo(
+      () => EntityUserFilter.owned(ownershipEntityRefs != null ? ownershipEntityRefs : []),
+      [ownershipEntityRefs]
+    ),
     ownershipEntityRefs
   };
 }
@@ -2975,7 +2969,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),