@backstage/plugin-catalog-react 1.4.1-next.2 → 1.5.0

package/CHANGELOG.md

@@ -1,5 +1,83 @@
 # @backstage/plugin-catalog-react
 
+## 1.5.0
+
+### Minor Changes
+
+- a49fb39df5a: Attempt to load entity owner names in the EntityOwnerPicker through the `by-refs` endpoint. If `spec.profile.displayName` or `metadata.title` are populated, we now attempt to show those before showing the `humanizeEntityRef`'d version.
+
+  **BREAKING**: `EntityOwnerFilter` now uses the full entity ref instead of the `humanizeEntityRef`. If you rely on `EntityOwnerFilter.values` or the `queryParameters.owners` of `useEntityList`, you will need to adjust your code like the following.
+
+  ```tsx
+  const { queryParameters: { owners } } = useEntityList();
+  // or
+  const { filter: { owners } } = useEntityList();
+
+  // Instead of,
+  if (owners.some(ref => ref === humanizeEntityRef(myEntity))) ...
+
+  // You'll need to use,
+  if (owners.some(ref => ref === stringifyEntityRef(myEntity))) ...
+  ```
+
+### Patch Changes
+
+- 81bee24c5de: Fixed bug in catalog filters where you could not click on the text to select a value.
+- 8e00acb28db: Small tweaks to remove warnings in the console during development (mainly focusing on techdocs)
+- d1f5324dff7: Reverted the check if the selected options list is different than the query parameters list before invoking `setSelectedOptions` method. This was preventing updating list items when a query string was already present in the URL when loading the page.
+- 2898b6c8d52: Minor type tweaks for TypeScript 5.0
+- e0c6e8b9c3c: Update peer dependencies
+- Updated dependencies
+  - @backstage/core-components@0.13.0
+  - @backstage/catalog-client@1.4.1
+  - @backstage/plugin-permission-common@0.7.5
+  - @backstage/theme@0.2.19
+  - @backstage/core-plugin-api@1.5.1
+  - @backstage/catalog-model@1.3.0
+  - @backstage/plugin-permission-react@0.4.12
+  - @backstage/version-bridge@1.0.4
+  - @backstage/integration@1.4.4
+  - @backstage/errors@1.1.5
+  - @backstage/types@1.0.2
+  - @backstage/plugin-catalog-common@1.0.13
+
+## 1.5.0-next.3
+
+### Minor Changes
+
+- a49fb39df5a: Attempt to load entity owner names in the EntityOwnerPicker through the `by-refs` endpoint. If `spec.profile.displayName` or `metadata.title` are populated, we now attempt to show those before showing the `humanizeEntityRef`'d version.
+
+  **BREAKING**: `EntityOwnerFilter` now uses the full entity ref instead of the `humanizeEntityRef`. If you rely on `EntityOwnerFilter.values` or the `queryParameters.owners` of `useEntityList`, you will need to adjust your code like the following.
+
+  ```tsx
+  const { queryParameters: { owners } } = useEntityList();
+  // or
+  const { filter: { owners } } = useEntityList();
+
+  // Instead of,
+  if (owners.some(ref => ref === humanizeEntityRef(myEntity))) ...
+
+  // You'll need to use,
+  if (owners.some(ref => ref === stringifyEntityRef(myEntity))) ...
+  ```
+
+### Patch Changes
+
+- d1f5324dff7: Reverted the check if the selected options list is different than the query parameters list before invoking `setSelectedOptions` method. This was preventing updating list items when a query string was already present in the URL when loading the page.
+- Updated dependencies
+  - @backstage/catalog-model@1.3.0-next.0
+  - @backstage/core-components@0.13.0-next.3
+  - @backstage/catalog-client@1.4.1-next.1
+  - @backstage/core-plugin-api@1.5.1-next.1
+  - @backstage/errors@1.1.5
+  - @backstage/integration@1.4.4-next.0
+  - @backstage/theme@0.2.19-next.0
+  - @backstage/types@1.0.2
+  - @backstage/version-bridge@1.0.4-next.0
+  - @backstage/plugin-catalog-common@1.0.13-next.1
+  - @backstage/plugin-permission-common@0.7.5-next.0
+  - @backstage/plugin-permission-react@0.4.12-next.1
+
 ## 1.4.1-next.2
 
 ### Patch Changes

package/alpha/package.json

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

package/dist/index.d.ts

@@ -430,11 +430,17 @@ declare class EntityTextFilter implements EntityFilter {
 /**
  * Filter matching entities that are owned by group.
  * @public
+ *
+ * CAUTION: This class may contain both full and partial entity refs.
  */
 declare class EntityOwnerFilter implements EntityFilter {
     readonly values: string[];
     constructor(values: string[]);
     filterEntity(entity: Entity): boolean;
+    /**
+     * Get the URL query parameter value. May be a mix of full and humanized entity refs.
+     * @returns list of entity refs.
+     */
     toQueryValue(): string[];
 }
 /**

package/dist/index.esm.js

@@ -1,21 +1,20 @@
 export { CATALOG_FILTER_EXISTS } from '@backstage/catalog-client';
-import { createApiRef, createRouteRef, useRouteRef, useApi, identityApiRef, alertApiRef, useApiHolder, useApp, configApiRef } from '@backstage/core-plugin-api';
+import { createApiRef, useApi, identityApiRef, alertApiRef, errorApiRef, createRouteRef, useRouteRef, useApiHolder, useApp, configApiRef } from '@backstage/core-plugin-api';
 import ObservableImpl from 'zen-observable';
-import React, { useState, forwardRef, createContext, useMemo, useCallback, useContext, useEffect, useRef, memo, useLayoutEffect, Fragment } from 'react';
-import { Grid, useMediaQuery, useTheme, Button, Drawer, Box, Typography, Tooltip, makeStyles, FormControlLabel, Checkbox, TextField, 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 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';
 import FilterListIcon from '@material-ui/icons/FilterList';
-import { Link, Progress, ErrorPanel, Select, ResponseErrorPanel, OverflowTooltip, Table, DependencyGraph, DependencyGraphTypes, CodeSnippet } from '@backstage/core-components';
-import { DEFAULT_NAMESPACE, parseEntityRef, ANNOTATION_SOURCE_LOCATION, parseLocationRef, RELATION_OWNED_BY, stringifyEntityRef, getCompoundEntityRef, isUserEntity, isGroupEntity, RELATION_PART_OF, ANNOTATION_LOCATION, ANNOTATION_ORIGIN_LOCATION } from '@backstage/catalog-model';
-import { getOrCreateGlobalSingleton } from '@backstage/version-bridge';
-import useAsync from 'react-use/lib/useAsync';
+import { Select, Link, Progress, ErrorPanel, ResponseErrorPanel, OverflowTooltip, Table, DependencyGraph, DependencyGraphTypes, CodeSnippet } from '@backstage/core-components';
+import { ANNOTATION_SOURCE_LOCATION, parseLocationRef, stringifyEntityRef, parseEntityRef, RELATION_OWNED_BY, DEFAULT_NAMESPACE, getCompoundEntityRef, isUserEntity, isGroupEntity, RELATION_PART_OF, ANNOTATION_LOCATION, ANNOTATION_ORIGIN_LOCATION } from '@backstage/catalog-model';
 import { g as getEntityRelations } 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, groupBy, chunk, debounce } from 'lodash';
+import { compact, isEqual, groupBy, chunk, debounce } from 'lodash';
 import qs from 'qs';
 import { useLocation, useNavigate } from 'react-router-dom';
 import useAsyncFn from 'react-use/lib/useAsyncFn';
 import useDebounce from 'react-use/lib/useDebounce';
 import useMountedState from 'react-use/lib/useMountedState';
+import useAsync from 'react-use/lib/useAsync';
 import isEqual$1 from 'lodash/isEqual';
 import sortBy from 'lodash/sortBy';
 import useObservable from 'react-use/lib/useObservable';
@@ -23,6 +22,8 @@ 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 get from 'lodash/get';
+import { getOrCreateGlobalSingleton } from '@backstage/version-bridge';
 import HoverPopover from 'material-ui-popup-state/HoverPopover';
 import { usePopupState, bindHover, bindPopover } from 'material-ui-popup-state/hooks';
 import InfoIcon from '@material-ui/icons/Info';
@@ -118,158 +119,6 @@ const CatalogFilterLayout = (props) => {
 CatalogFilterLayout.Filters = Filters;
 CatalogFilterLayout.Content = Content;
 
-const entityRouteRef = getOrCreateGlobalSingleton(
-  "catalog:entity-route-ref",
-  () => createRouteRef({
-    id: "catalog:entity",
-    params: ["namespace", "kind", "name"]
-  })
-);
-function entityRouteParams(entity) {
-  var _a, _b;
-  return {
-    kind: entity.kind.toLocaleLowerCase("en-US"),
-    namespace: (_b = (_a = entity.metadata.namespace) == null ? void 0 : _a.toLocaleLowerCase("en-US")) != null ? _b : DEFAULT_NAMESPACE,
-    name: entity.metadata.name
-  };
-}
-
-function humanizeEntityRef(entityRef, opts) {
-  const defaultKind = opts == null ? void 0 : opts.defaultKind;
-  let kind;
-  let namespace;
-  let name;
-  if ("metadata" in entityRef) {
-    kind = entityRef.kind;
-    namespace = entityRef.metadata.namespace;
-    name = entityRef.metadata.name;
-  } else {
-    kind = entityRef.kind;
-    namespace = entityRef.namespace;
-    name = entityRef.name;
-  }
-  if (namespace === void 0 || namespace === "") {
-    namespace = DEFAULT_NAMESPACE;
-  }
-  if ((opts == null ? void 0 : opts.defaultNamespace) !== void 0) {
-    if ((opts == null ? void 0 : opts.defaultNamespace) === namespace) {
-      namespace = void 0;
-    }
-  } else if (namespace === DEFAULT_NAMESPACE) {
-    namespace = void 0;
-  }
-  kind = kind.toLocaleLowerCase("en-US");
-  kind = defaultKind && defaultKind.toLocaleLowerCase("en-US") === kind ? void 0 : kind;
-  return `${kind ? `${kind}:` : ""}${namespace ? `${namespace}/` : ""}${name}`;
-}
-
-const EntityRefLink = forwardRef(
-  (props, ref) => {
-    var _a;
-    const { entityRef, defaultKind, title, children, ...linkProps } = props;
-    const entityRoute = useRouteRef(entityRouteRef);
-    let kind;
-    let namespace;
-    let name;
-    if (typeof entityRef === "string") {
-      const parsed = parseEntityRef(entityRef);
-      kind = parsed.kind;
-      namespace = parsed.namespace;
-      name = parsed.name;
-    } else if ("metadata" in entityRef) {
-      kind = entityRef.kind;
-      namespace = entityRef.metadata.namespace;
-      name = entityRef.metadata.name;
-    } else {
-      kind = entityRef.kind;
-      namespace = entityRef.namespace;
-      name = entityRef.name;
-    }
-    kind = kind.toLocaleLowerCase("en-US");
-    namespace = (_a = namespace == null ? void 0 : namespace.toLocaleLowerCase("en-US")) != null ? _a : DEFAULT_NAMESPACE;
-    const routeParams = { kind, namespace, name };
-    const formattedEntityRefTitle = humanizeEntityRef(
-      { kind, namespace, name },
-      { defaultKind }
-    );
-    const link = /* @__PURE__ */ React.createElement(Link, { ...linkProps, ref, to: entityRoute(routeParams) }, children, !children && (title != null ? title : formattedEntityRefTitle));
-    return title ? /* @__PURE__ */ React.createElement(Tooltip, { title: formattedEntityRefTitle }, link) : link;
-  }
-);
-
-function FetchedEntityRefLinks(props) {
-  const { entityRefs, defaultKind, getTitle, ...linkProps } = props;
-  const catalogApi = useApi(catalogApiRef);
-  const {
-    value: entities = new Array(),
-    loading,
-    error
-  } = useAsync(async () => {
-    const refs = entityRefs.reduce((acc, current) => {
-      if (typeof current === "object" && "metadata" in current) {
-        return acc;
-      }
-      return [...acc, parseEntityRef(current)];
-    }, new Array());
-    const pureEntities = entityRefs.filter(
-      (ref) => typeof ref === "object" && "metadata" in ref
-    );
-    return refs.length > 0 ? [
-      ...(await catalogApi.getEntities({
-        filter: refs.map((ref) => ({
-          kind: ref.kind,
-          "metadata.namespace": ref.namespace,
-          "metadata.name": ref.name
-        }))
-      })).items,
-      ...pureEntities
-    ] : pureEntities;
-  }, [entityRefs]);
-  if (loading) {
-    return /* @__PURE__ */ React.createElement(Progress, null);
-  }
-  if (error) {
-    return /* @__PURE__ */ React.createElement(ErrorPanel, { error });
-  }
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, entities.map((r, i) => {
-    return /* @__PURE__ */ React.createElement(React.Fragment, { key: i }, i > 0 && ", ", /* @__PURE__ */ React.createElement(
-      EntityRefLink,
-      {
-        ...linkProps,
-        defaultKind,
-        entityRef: r,
-        title: getTitle(r)
-      }
-    ));
-  }));
-}
-
-function EntityRefLinks(props) {
-  const { entityRefs, defaultKind, fetchEntities, getTitle, ...linkProps } = props;
-  if (fetchEntities) {
-    return /* @__PURE__ */ React.createElement(
-      FetchedEntityRefLinks,
-      {
-        ...linkProps,
-        defaultKind,
-        entityRefs,
-        getTitle
-      }
-    );
-  }
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, entityRefs.map((r, i) => {
-    return /* @__PURE__ */ React.createElement(React.Fragment, { key: i }, i > 0 && ", ", /* @__PURE__ */ React.createElement(
-      EntityRefLink,
-      {
-        ...linkProps,
-        defaultKind,
-        entityRef: r,
-        title: getTitle ? getTitle(r) : void 0
-      }
-    ));
-  }));
-}
-
 function reduceCatalogFilters(filters) {
   return filters.reduce((compoundFilter, filter) => {
     return {
@@ -366,15 +215,28 @@ class EntityTextFilter {
 }
 class EntityOwnerFilter {
   constructor(values) {
-    this.values = values;
+    this.values = values.reduce((fullRefs, ref) => {
+      try {
+        fullRefs.push(
+          stringifyEntityRef(parseEntityRef(ref, { defaultKind: "Group" }))
+        );
+        return fullRefs;
+      } catch (err) {
+        return fullRefs;
+      }
+    }, []);
   }
   filterEntity(entity) {
     return this.values.some(
       (v) => getEntityRelations(entity, RELATION_OWNED_BY).some(
-        (o) => humanizeEntityRef(o, { defaultKind: "group" }) === v
+        (o) => stringifyEntityRef(o) === v
       )
     );
   }
+  /**
+   * Get the URL query parameter value. May be a mix of full and humanized entity refs.
+   * @returns list of entity refs.
+   */
   toQueryValue() {
     return this.values;
   }
@@ -937,6 +799,44 @@ const EntityLifecyclePicker = (props) => {
   )));
 };
 
+function humanizeEntityRef(entityRef, opts) {
+  const defaultKind = opts == null ? void 0 : opts.defaultKind;
+  let kind;
+  let namespace;
+  let name;
+  if ("metadata" in entityRef) {
+    kind = entityRef.kind;
+    namespace = entityRef.metadata.namespace;
+    name = entityRef.metadata.name;
+  } else {
+    kind = entityRef.kind;
+    namespace = entityRef.namespace;
+    name = entityRef.name;
+  }
+  if (namespace === void 0 || namespace === "") {
+    namespace = DEFAULT_NAMESPACE;
+  }
+  if ((opts == null ? void 0 : opts.defaultNamespace) !== void 0) {
+    if ((opts == null ? void 0 : opts.defaultNamespace) === namespace) {
+      namespace = void 0;
+    }
+  } else if (namespace === DEFAULT_NAMESPACE) {
+    namespace = void 0;
+  }
+  kind = kind.toLocaleLowerCase("en-US");
+  kind = defaultKind && defaultKind.toLocaleLowerCase("en-US") === kind ? void 0 : kind;
+  return `${kind ? `${kind}:` : ""}${namespace ? `${namespace}/` : ""}${name}`;
+}
+function humanizeEntity(entity, opts) {
+  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);
+}
+
 const useStyles$d = makeStyles(
   {
     input: {}
@@ -948,7 +848,7 @@ const useStyles$d = makeStyles(
 const icon$2 = /* @__PURE__ */ React.createElement(CheckBoxOutlineBlankIcon, { fontSize: "small" });
 const checkedIcon$2 = /* @__PURE__ */ React.createElement(CheckBoxIcon, { fontSize: "small" });
 const EntityOwnerPicker = () => {
-  var _a, _b;
+  var _a, _b, _c;
   const classes = useStyles$d();
   const {
     updateFilters,
@@ -956,45 +856,98 @@ const EntityOwnerPicker = () => {
     filters,
     queryParameters: { owners: ownersParameter }
   } = useEntityList();
+  const catalogApi = useApi(catalogApiRef);
+  const errorApi = useApi(errorApiRef);
   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 : []
+    queryParamOwners.length ? new EntityOwnerFilter(queryParamOwners).values : (_b = (_a = filters.owners) == null ? void 0 : _a.values) != null ? _b : []
   );
-  useEffect(() => {
-    if (queryParamOwners.length) {
-      setSelectedOwners(queryParamOwners);
-    }
-  }, [queryParamOwners]);
-  const availableOwners = useMemo(
-    () => [
+  const {
+    loading,
+    error,
+    value: ownerEntities
+  } = useAsync(async () => {
+    const ownerEntityRefs = [
       ...new Set(
         backendEntities.flatMap(
           (e) => getEntityRelations(e, RELATION_OWNED_BY).map(
-            (o) => humanizeEntityRef(o, { defaultKind: "group" })
+            (o) => stringifyEntityRef(o)
           )
         ).filter(Boolean)
       )
-    ].sort(),
-    [backendEntities]
-  );
-  useEffect(() => {
-    updateFilters({
-      owners: selectedOwners.length && availableOwners.length ? new EntityOwnerFilter(selectedOwners) : void 0
+    ];
+    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]
+      };
     });
-  }, [selectedOwners, updateFilters, availableOwners]);
-  if (!availableOwners.length)
+    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]);
+  useEffect(() => {
+    if (queryParamOwners.length) {
+      const filter = new EntityOwnerFilter(queryParamOwners);
+      setSelectedOwners(filter.values);
+    }
+  }, [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))
     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,
-      options: availableOwners,
-      value: selectedOwners,
-      onChange: (_, value) => setSelectedOwners(value),
+      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,
         {
@@ -1007,7 +960,7 @@ const EntityOwnerPicker = () => {
             }
           ),
           onClick: (event) => event.preventDefault(),
-          label: option
+          label: option.label
         }
       ),
       size: "small",
@@ -1024,6 +977,129 @@ const EntityOwnerPicker = () => {
   )));
 };
 
+const entityRouteRef = getOrCreateGlobalSingleton(
+  "catalog:entity-route-ref",
+  () => createRouteRef({
+    id: "catalog:entity",
+    params: ["namespace", "kind", "name"]
+  })
+);
+function entityRouteParams(entity) {
+  var _a, _b;
+  return {
+    kind: entity.kind.toLocaleLowerCase("en-US"),
+    namespace: (_b = (_a = entity.metadata.namespace) == null ? void 0 : _a.toLocaleLowerCase("en-US")) != null ? _b : DEFAULT_NAMESPACE,
+    name: entity.metadata.name
+  };
+}
+
+const EntityRefLink = forwardRef(
+  (props, ref) => {
+    var _a;
+    const { entityRef, defaultKind, title, children, ...linkProps } = props;
+    const entityRoute = useRouteRef(entityRouteRef);
+    let kind;
+    let namespace;
+    let name;
+    if (typeof entityRef === "string") {
+      const parsed = parseEntityRef(entityRef);
+      kind = parsed.kind;
+      namespace = parsed.namespace;
+      name = parsed.name;
+    } else if ("metadata" in entityRef) {
+      kind = entityRef.kind;
+      namespace = entityRef.metadata.namespace;
+      name = entityRef.metadata.name;
+    } else {
+      kind = entityRef.kind;
+      namespace = entityRef.namespace;
+      name = entityRef.name;
+    }
+    kind = kind.toLocaleLowerCase("en-US");
+    namespace = (_a = namespace == null ? void 0 : namespace.toLocaleLowerCase("en-US")) != null ? _a : DEFAULT_NAMESPACE;
+    const routeParams = { kind, namespace, name };
+    const formattedEntityRefTitle = humanizeEntityRef(
+      { kind, namespace, name },
+      { defaultKind }
+    );
+    const link = /* @__PURE__ */ React.createElement(Link, { ...linkProps, ref, to: entityRoute(routeParams) }, children, !children && (title != null ? title : formattedEntityRefTitle));
+    return title ? /* @__PURE__ */ React.createElement(Tooltip, { title: formattedEntityRefTitle }, link) : link;
+  }
+);
+
+function FetchedEntityRefLinks(props) {
+  const { entityRefs, defaultKind, getTitle, ...linkProps } = props;
+  const catalogApi = useApi(catalogApiRef);
+  const {
+    value: entities = new Array(),
+    loading,
+    error
+  } = useAsync(async () => {
+    const refs = entityRefs.reduce((acc, current) => {
+      if (typeof current === "object" && "metadata" in current) {
+        return acc;
+      }
+      return [...acc, parseEntityRef(current)];
+    }, new Array());
+    const pureEntities = entityRefs.filter(
+      (ref) => typeof ref === "object" && "metadata" in ref
+    );
+    return refs.length > 0 ? [
+      ...(await catalogApi.getEntities({
+        filter: refs.map((ref) => ({
+          kind: ref.kind,
+          "metadata.namespace": ref.namespace,
+          "metadata.name": ref.name
+        }))
+      })).items,
+      ...pureEntities
+    ] : pureEntities;
+  }, [entityRefs]);
+  if (loading) {
+    return /* @__PURE__ */ React.createElement(Progress, null);
+  }
+  if (error) {
+    return /* @__PURE__ */ React.createElement(ErrorPanel, { error });
+  }
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, entities.map((r, i) => {
+    return /* @__PURE__ */ React.createElement(React.Fragment, { key: i }, i > 0 && ", ", /* @__PURE__ */ React.createElement(
+      EntityRefLink,
+      {
+        ...linkProps,
+        defaultKind,
+        entityRef: r,
+        title: getTitle(r)
+      }
+    ));
+  }));
+}
+
+function EntityRefLinks(props) {
+  const { entityRefs, defaultKind, fetchEntities, getTitle, ...linkProps } = props;
+  if (fetchEntities) {
+    return /* @__PURE__ */ React.createElement(
+      FetchedEntityRefLinks,
+      {
+        ...linkProps,
+        defaultKind,
+        entityRefs,
+        getTitle
+      }
+    );
+  }
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, entityRefs.map((r, i) => {
+    return /* @__PURE__ */ React.createElement(React.Fragment, { key: i }, i > 0 && ", ", /* @__PURE__ */ React.createElement(
+      EntityRefLink,
+      {
+        ...linkProps,
+        defaultKind,
+        entityRef: r,
+        title: getTitle ? getTitle(r) : void 0
+      }
+    ));
+  }));
+}
+
 const EntityCardActions = (props) => {
   const entityRoute = useRouteRef(entityRouteRef);
   return /* @__PURE__ */ React.createElement(
@@ -1441,10 +1517,10 @@ function EntityAutocompletePicker(props) {
     queryParameters.length ? queryParameters : (_b = (_a = filters[name]) == null ? void 0 : _a.values) != null ? _b : []
   );
   useEffect(() => {
-    if (queryParameters.length && !_.isEqual(selectedOptions, queryParameters)) {
+    if (queryParameters.length) {
       setSelectedOptions(queryParameters);
     }
-  }, [selectedOptions, queryParameters]);
+  }, [queryParameters]);
   const availableOptions = Object.keys(availableValues != null ? availableValues : {});
   const shouldAddFilter = selectedOptions.length && availableOptions.length;
   useEffect(() => {