@backstage/plugin-catalog-react 1.6.0-next.2 → 1.7.0-next.0

package/CHANGELOG.md

@@ -1,5 +1,71 @@
 # @backstage/plugin-catalog-react
 
+## 1.7.0-next.0
+
+### Minor Changes
+
+- cb4c15989b6b: The `EntityOwnerPicker` component has undergone improvements to enhance its performance.
+
+  The component now loads entities asynchronously, resulting in improved performance and responsiveness. Instead of loading all entities upfront, they are now loaded in batches as the user scrolls.
+  The previous implementation inferred users and groups displayed by the `EntityOwnerPicker` component based on the entities available in the `EntityListContext`. The updated version no longer relies on the `EntityListContext` for inference, allowing for better decoupling and improved performance.
+
+### Patch Changes
+
+- Updated dependencies
+  - @backstage/catalog-client@1.4.2-next.0
+  - @backstage/theme@0.4.0-next.0
+  - @backstage/integration@1.4.5
+  - @backstage/core-components@0.13.2-next.0
+  - @backstage/core-plugin-api@1.5.1
+  - @backstage/plugin-permission-react@0.4.12
+  - @backstage/catalog-model@1.3.0
+  - @backstage/errors@1.1.5
+  - @backstage/types@1.0.2
+  - @backstage/version-bridge@1.0.4
+  - @backstage/plugin-catalog-common@1.0.13
+  - @backstage/plugin-permission-common@0.7.5
+
+## 1.6.0
+
+### Minor Changes
+
+- 2258dcae970: Added an entity namespace filter and column on the default catalog page.
+
+  If you have a custom version of the catalog page, you can add this filter in your CatalogPage code:
+
+  ```ts
+  <CatalogFilterLayout>
+    <CatalogFilterLayout.Filters>
+      <EntityTypePicker />
+      <UserListPicker initialFilter={initiallySelectedFilter} />
+      <EntityTagPicker />
+      /* if you want namespace picker */
+      <EntityNamespacePicker />
+    </CatalogFilterLayout.Filters>
+    <CatalogFilterLayout.Content>
+      <CatalogTable columns={columns} actions={actions} />
+    </CatalogFilterLayout.Content>
+  </CatalogFilterLayout>
+  ```
+
+  The namespace column can be added using `createNamespaceColumn();`. This is only needed if you customized the columns for CatalogTable.
+
+### Patch Changes
+
+- Updated dependencies
+  - @backstage/theme@0.3.0
+  - @backstage/integration@1.4.5
+  - @backstage/core-components@0.13.1
+  - @backstage/catalog-client@1.4.1
+  - @backstage/catalog-model@1.3.0
+  - @backstage/core-plugin-api@1.5.1
+  - @backstage/errors@1.1.5
+  - @backstage/types@1.0.2
+  - @backstage/version-bridge@1.0.4
+  - @backstage/plugin-catalog-common@1.0.13
+  - @backstage/plugin-permission-common@0.7.5
+  - @backstage/plugin-permission-react@0.4.12
+
 ## 1.6.0-next.2
 
 ### Patch Changes

package/alpha/package.json

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

package/dist/index.d.ts

@@ -143,7 +143,8 @@ declare function EntityRefLinks<TRef extends string | CompoundEntityRef | Entity
  * @param defaultNamespace - if set to false then namespace is never omitted,
  * if set to string which matches namespace of entity then omitted
  *
- * @public */
+ * @public
+ **/
 declare function humanizeEntityRef(entityRef: Entity | CompoundEntityRef, opts?: {
     defaultKind?: string;
     defaultNamespace?: string | false;

package/dist/index.esm.js

@@ -1,5 +1,5 @@
 export { CATALOG_FILTER_EXISTS } from '@backstage/catalog-client';
-import { createApiRef, useApi, identityApiRef, alertApiRef, errorApiRef, createRouteRef, useRouteRef, useApiHolder, useApp, configApiRef } from '@backstage/core-plugin-api';
+import { createApiRef, useApi, identityApiRef, alertApiRef, createRouteRef, useRouteRef, useApiHolder, useApp, configApiRef } from '@backstage/core-plugin-api';
 import ObservableImpl from 'zen-observable';
 import React, { useState, createContext, useMemo, useCallback, useContext, useEffect, useRef, forwardRef, memo, useLayoutEffect, Fragment } from 'react';
 import { Grid, useMediaQuery, useTheme, Button, Drawer, Box, Typography, makeStyles, FormControlLabel, Checkbox, 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';
@@ -22,6 +22,9 @@ import CheckBoxIcon from '@material-ui/icons/CheckBox';
 import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import { Autocomplete, Alert } from '@material-ui/lab';
+import { useDebouncedEffect } from '@react-hookz/web';
+import PersonIcon from '@material-ui/icons/Person';
+import GroupIcon from '@material-ui/icons/Group';
 import get from 'lodash/get';
 import { getOrCreateGlobalSingleton } from '@backstage/version-bridge';
 import HoverPopover from 'material-ui-popup-state/HoverPopover';
@@ -838,14 +841,14 @@ function humanizeEntityRef(entityRef, opts) {
   kind = defaultKind && defaultKind.toLocaleLowerCase("en-US") === kind ? void 0 : kind;
   return `${kind ? `${kind}:` : ""}${namespace ? `${namespace}/` : ""}${name}`;
 }
-function humanizeEntity(entity, opts) {
+function humanizeEntity(entity, defaultName) {
   for (const path of ["spec.profile.displayName", "metadata.title"]) {
     const value = get(entity, path);
     if (value && typeof value === "string") {
       return value;
     }
   }
-  return humanizeEntityRef(entity, opts);
+  return defaultName;
 }
 
 const useStyles$e = makeStyles(
@@ -863,75 +866,53 @@ const EntityOwnerPicker = () => {
   const classes = useStyles$e();
   const {
     updateFilters,
-    backendEntities,
     filters,
     queryParameters: { owners: ownersParameter }
   } = useEntityList();
   const catalogApi = useApi(catalogApiRef);
-  const errorApi = useApi(errorApiRef);
+  const [text, setText] = useState("");
+  const [{ value, loading }, handleFetch] = useAsyncFn(
+    async (request) => {
+      const initialRequest = request;
+      const cursorRequest = request;
+      const limit = 20;
+      if (cursorRequest.cursor) {
+        const response = await catalogApi.queryEntities({
+          cursor: cursorRequest.cursor,
+          limit
+        });
+        return {
+          ...response,
+          items: [...cursorRequest.prev, ...response.items]
+        };
+      }
+      return catalogApi.queryEntities({
+        fullTextFilter: {
+          term: initialRequest.text || "",
+          fields: [
+            "metadata.name",
+            "kind",
+            "spec.profile.displayname",
+            "metadata.title"
+          ]
+        },
+        filter: { kind: ["User", "Group"] },
+        orderFields: [{ field: "metadata.name", order: "asc" }],
+        limit
+      });
+    },
+    [text]
+  );
+  useDebouncedEffect(() => handleFetch({ text }), [text], 250);
+  const availableOwners = (value == null ? void 0 : value.items) || [];
   const queryParamOwners = useMemo(
     () => [ownersParameter].flat().filter(Boolean),
     [ownersParameter]
   );
   const [selectedOwners, setSelectedOwners] = useState(
-    queryParamOwners.length ? new EntityOwnerFilter(queryParamOwners).values : (_b = (_a = filters.owners) == null ? void 0 : _a.values) != null ? _b : []
+    queryParamOwners.length ? queryParamOwners : (_b = (_a = filters.owners) == null ? void 0 : _a.values) != null ? _b : []
   );
-  const {
-    loading,
-    error,
-    value: ownerEntities
-  } = useAsync(async () => {
-    const ownerEntityRefs = [
-      ...new Set(
-        backendEntities.flatMap(
-          (e) => getEntityRelations(e, RELATION_OWNED_BY).map(
-            (o) => stringifyEntityRef(o)
-          )
-        ).filter(Boolean)
-      )
-    ];
-    const { items: ownerEntitiesOrNull } = await catalogApi.getEntitiesByRefs({
-      entityRefs: ownerEntityRefs,
-      fields: [
-        "kind",
-        "metadata.name",
-        "metadata.title",
-        "metadata.namespace",
-        "spec.profile.displayName"
-      ]
-    });
-    const owners = ownerEntitiesOrNull.map((entity, index) => {
-      if (entity) {
-        return {
-          label: humanizeEntity(entity, { defaultKind: "Group" }),
-          entityRef: stringifyEntityRef(entity)
-        };
-      }
-      return {
-        label: humanizeEntityRef(parseEntityRef(ownerEntityRefs[index]), {
-          defaultKind: "group"
-        }),
-        entityRef: ownerEntityRefs[index]
-      };
-    });
-    return owners.sort(
-      (a, b) => a.label.localeCompare(b.label, "en-US", {
-        ignorePunctuation: true,
-        caseFirst: "upper"
-      })
-    );
-  }, [backendEntities]);
-  useEffect(() => {
-    if (error) {
-      errorApi.post(
-        {
-          ...error,
-          message: `EntityOwnerPicker failed to initialize: ${error.message}`
-        },
-        {}
-      );
-    }
-  }, [error, errorApi]);
+  const { getEntity, setEntity } = useSelectedOwners(selectedOwners);
   useEffect(() => {
     if (queryParamOwners.length) {
       const filter = new EntityOwnerFilter(queryParamOwners);
@@ -939,41 +920,64 @@ const EntityOwnerPicker = () => {
     }
   }, [queryParamOwners]);
   useEffect(() => {
-    if (!loading && ownerEntities) {
-      updateFilters({
-        owners: selectedOwners.length && ownerEntities.length ? new EntityOwnerFilter(selectedOwners) : void 0
-      });
-    }
-  }, [selectedOwners, updateFilters, ownerEntities, loading]);
-  if (!loading && !(ownerEntities == null ? void 0 : ownerEntities.length))
+    updateFilters({
+      owners: selectedOwners.length ? new EntityOwnerFilter(selectedOwners) : void 0
+    });
+  }, [selectedOwners, updateFilters]);
+  if (["user", "group"].includes(
+    ((_c = filters.kind) == null ? void 0 : _c.value.toLocaleLowerCase("en-US")) || ""
+  )) {
     return null;
+  }
   return /* @__PURE__ */ React.createElement(Box, { pb: 1, pt: 1 }, /* @__PURE__ */ React.createElement(Typography, { variant: "button", component: "label" }, "Owner", /* @__PURE__ */ React.createElement(
     Autocomplete,
     {
       multiple: true,
       disableCloseOnSelect: true,
       loading,
-      options: ownerEntities || [],
-      value: (_c = ownerEntities == null ? void 0 : ownerEntities.filter(
-        (e) => selectedOwners.some((f) => f === e.entityRef)
-      )) != null ? _c : [],
-      onChange: (_, value) => setSelectedOwners(value.map((e) => e.entityRef)),
-      getOptionLabel: (option) => option.label,
-      renderOption: (option, { selected }) => /* @__PURE__ */ React.createElement(
-        FormControlLabel,
-        {
-          control: /* @__PURE__ */ React.createElement(
-            Checkbox,
-            {
-              icon: icon$2,
-              checkedIcon: checkedIcon$2,
-              checked: selected
-            }
-          ),
-          onClick: (event) => event.preventDefault(),
-          label: option.label
+      options: availableOwners,
+      value: selectedOwners,
+      getOptionSelected: (o, v) => {
+        if (typeof v === "string") {
+          return stringifyEntityRef(o) === v;
         }
-      ),
+        return o === v;
+      },
+      getOptionLabel: (o) => {
+        const entity = typeof o === "string" ? getEntity(o) || o : o;
+        return typeof entity === "string" ? entity : humanizeEntity(entity, entity.metadata.name);
+      },
+      onChange: (_, owners) => {
+        setText("");
+        setSelectedOwners(
+          owners.map((e) => {
+            const entityRef = typeof e === "string" ? e : stringifyEntityRef(e);
+            if (typeof e !== "string") {
+              setEntity(e);
+            }
+            return entityRef;
+          })
+        );
+      },
+      filterOptions: (x) => x,
+      renderOption: (entity, { selected }) => {
+        const isGroup = entity.kind === "Group";
+        return /* @__PURE__ */ React.createElement(
+          FormControlLabel,
+          {
+            control: /* @__PURE__ */ React.createElement(
+              Checkbox,
+              {
+                icon: icon$2,
+                checkedIcon: checkedIcon$2,
+                checked: selected
+              }
+            ),
+            onClick: (event) => event.preventDefault(),
+            label: /* @__PURE__ */ React.createElement(Box, { display: "flex", flexWrap: "wrap", alignItems: "center" }, isGroup ? /* @__PURE__ */ React.createElement(GroupIcon, { fontSize: "small" }) : /* @__PURE__ */ React.createElement(PersonIcon, { fontSize: "small" }), "\xA0", humanizeEntity(entity, entity.metadata.name))
+          }
+        );
+      },
       size: "small",
       popupIcon: /* @__PURE__ */ React.createElement(ExpandMoreIcon, { "data-testid": "owner-picker-expand" }),
       renderInput: (params) => /* @__PURE__ */ React.createElement(
@@ -981,12 +985,53 @@ const EntityOwnerPicker = () => {
         {
           ...params,
           className: classes.input,
+          onChange: (e) => {
+            setText(e.currentTarget.value);
+          },
           variant: "outlined"
         }
-      )
+      ),
+      ListboxProps: {
+        onScroll: (e) => {
+          const element = e.currentTarget;
+          const hasReachedEnd = Math.abs(
+            element.scrollHeight - element.clientHeight - element.scrollTop
+          ) < 1;
+          if (hasReachedEnd && (value == null ? void 0 : value.pageInfo.nextCursor)) {
+            handleFetch({
+              cursor: value.pageInfo.nextCursor,
+              prev: value.items
+            });
+          }
+        },
+        "data-testid": "owner-picker-listbox"
+      }
     }
   )));
 };
+function useSelectedOwners(initialSelectedOwnersRefs) {
+  const allEntities = useRef({});
+  const catalogApi = useApi(catalogApiRef);
+  useAsync(async () => {
+    if (initialSelectedOwnersRefs.length === 0) {
+      return;
+    }
+    const initialSelectedEntities = await catalogApi.getEntitiesByRefs({
+      entityRefs: initialSelectedOwnersRefs
+    });
+    initialSelectedEntities.items.forEach((e) => {
+      if (e) {
+        allEntities.current[stringifyEntityRef(e)] = e;
+      }
+    });
+  }, []);
+  return {
+    getEntity: (entityRef) => allEntities.current[entityRef],
+    setEntity: (entity) => {
+      allEntities.current[stringifyEntityRef(entity)] = entity;
+    }
+  };
+}
 
 const entityRouteRef = getOrCreateGlobalSingleton(
   "catalog:entity-route-ref",