@backstage/plugin-catalog-react 1.14.3-next.1 → 1.14.3-next.2

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @backstage/plugin-catalog-react
 
+## 1.14.3-next.2
+
+### Patch Changes
+
+- 95092a6: Fixed an issue where `<CatalogFilterLayout.Filters />` would re-render its children on page load for smaller screens, potentially leading to unnecessary additional backend requests.
+- 4a43398: Fixed an issue where the `EntityOwnerPicker` component failed to load when the `mode` prop was set to `owners-only`. In this mode, the `EntityOwnerPicker` does not load details about the owners, such as `displayName` or `title`. To display these details, use `mode=all` instead.
+- Updated dependencies
+  - @backstage/core-compat-api@0.3.4-next.2
+  - @backstage/errors@1.2.6-next.0
+  - @backstage/catalog-client@1.9.0-next.2
+  - @backstage/catalog-model@1.7.2-next.0
+  - @backstage/core-components@0.16.2-next.2
+  - @backstage/core-plugin-api@1.10.2-next.0
+  - @backstage/frontend-plugin-api@0.9.3-next.2
+  - @backstage/frontend-test-utils@0.2.4-next.2
+  - @backstage/integration-react@1.2.2-next.1
+  - @backstage/types@1.2.0
+  - @backstage/version-bridge@1.0.10
+  - @backstage/plugin-catalog-common@1.1.2-next.0
+  - @backstage/plugin-permission-common@0.8.3-next.0
+  - @backstage/plugin-permission-react@0.4.29-next.0
+
 ## 1.14.3-next.1
 
 ### Patch Changes

package/dist/components/CatalogFilterLayout/CatalogFilterLayout.esm.js

@@ -12,7 +12,8 @@ import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
 
 const Filters = (props) => {
   const isScreenSmallerThanBreakpoint = useMediaQuery(
-    (theme2) => theme2.breakpoints.down(props.options?.drawerBreakpoint ?? "md")
+    (theme2) => theme2.breakpoints.down(props.options?.drawerBreakpoint ?? "md"),
+    { noSsr: true }
   );
   const theme = useTheme();
   const [filterDrawerOpen, setFilterDrawerOpen] = useState(false);

package/dist/components/CatalogFilterLayout/CatalogFilterLayout.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"CatalogFilterLayout.esm.js","sources":["../../../src/components/CatalogFilterLayout/CatalogFilterLayout.tsx"],"sourcesContent":["/*\n * Copyright 2021 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React, { useState } from 'react';\nimport Box from '@material-ui/core/Box';\nimport Button from '@material-ui/core/Button';\nimport Drawer from '@material-ui/core/Drawer';\nimport Grid from '@material-ui/core/Grid';\nimport Typography from '@material-ui/core/Typography';\nimport useMediaQuery from '@material-ui/core/useMediaQuery';\nimport { Theme, useTheme } from '@material-ui/core/styles';\nimport FilterListIcon from '@material-ui/icons/FilterList';\nimport { catalogReactTranslationRef } from '../../translation';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\n\n/** @public */\nexport const Filters = (props: {\n  children: React.ReactNode;\n  options?: {\n    drawerBreakpoint?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number;\n    drawerAnchor?: 'left' | 'right' | 'top' | 'bottom';\n  };\n}) => {\n  const isScreenSmallerThanBreakpoint = useMediaQuery((theme: Theme) =>\n    theme.breakpoints.down(props.options?.drawerBreakpoint ?? 'md'),\n  );\n  const theme = useTheme();\n  const [filterDrawerOpen, setFilterDrawerOpen] = useState<boolean>(false);\n  const { t } = useTranslationRef(catalogReactTranslationRef);\n\n  return isScreenSmallerThanBreakpoint ? (\n    <>\n      <Button\n        style={{ marginTop: theme.spacing(1), marginLeft: theme.spacing(1) }}\n        onClick={() => setFilterDrawerOpen(true)}\n        startIcon={<FilterListIcon />}\n      >\n        {t('catalogFilter.buttonTitle')}\n      </Button>\n      <Drawer\n        open={filterDrawerOpen}\n        onClose={() => setFilterDrawerOpen(false)}\n        anchor={props.options?.drawerAnchor ?? 'left'}\n        disableAutoFocus\n        keepMounted\n        variant=\"temporary\"\n      >\n        <Box m={2}>\n          <Typography\n            variant=\"h6\"\n            component=\"h2\"\n            style={{ marginBottom: theme.spacing(1) }}\n          >\n            {t('catalogFilter.title')}\n          </Typography>\n          {props.children}\n        </Box>\n      </Drawer>\n    </>\n  ) : (\n    <Grid item lg={2}>\n      {props.children}\n    </Grid>\n  );\n};\n\n/** @public */\nexport const Content = (props: { children: React.ReactNode }) => {\n  return (\n    <Grid item xs={12} lg={10}>\n      {props.children}\n    </Grid>\n  );\n};\n\n/** @public */\nexport const CatalogFilterLayout = (props: { children: React.ReactNode }) => {\n  return (\n    <Grid container style={{ position: 'relative' }}>\n      {props.children}\n    </Grid>\n  );\n};\n\nCatalogFilterLayout.Filters = Filters;\nCatalogFilterLayout.Content = Content;\n"],"names":["theme"],"mappings":";;;;;;;;;;;;AA6Ba,MAAA,OAAA,GAAU,CAAC,KAMlB,KAAA;AACJ,EAAA,MAAM,6BAAgC,GAAA,aAAA;AAAA,IAAc,CAACA,WACnDA,MAAM,CAAA,WAAA,CAAY,KAAK,KAAM,CAAA,OAAA,EAAS,oBAAoB,IAAI;AAAA,GAChE;AACA,EAAA,MAAM,QAAQ,QAAS,EAAA;AACvB,EAAA,MAAM,CAAC,gBAAA,EAAkB,mBAAmB,CAAA,GAAI,SAAkB,KAAK,CAAA;AACvE,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,0BAA0B,CAAA;AAE1D,EAAA,OAAO,gDAEH,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,EAAE,SAAA,EAAW,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA,EAAG,UAAY,EAAA,KAAA,CAAM,OAAQ,CAAA,CAAC,CAAE,EAAA;AAAA,MACnE,OAAA,EAAS,MAAM,mBAAA,CAAoB,IAAI,CAAA;AAAA,MACvC,SAAA,sCAAY,cAAe,EAAA,IAAA;AAAA,KAAA;AAAA,IAE1B,EAAE,2BAA2B;AAAA,GAEhC,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,IAAM,EAAA,gBAAA;AAAA,MACN,OAAA,EAAS,MAAM,mBAAA,CAAoB,KAAK,CAAA;AAAA,MACxC,MAAA,EAAQ,KAAM,CAAA,OAAA,EAAS,YAAgB,IAAA,MAAA;AAAA,MACvC,gBAAgB,EAAA,IAAA;AAAA,MAChB,WAAW,EAAA,IAAA;AAAA,MACX,OAAQ,EAAA;AAAA,KAAA;AAAA,oBAER,KAAA,CAAA,aAAA,CAAC,GAAI,EAAA,EAAA,CAAA,EAAG,CACN,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,OAAQ,EAAA,IAAA;AAAA,QACR,SAAU,EAAA,IAAA;AAAA,QACV,OAAO,EAAE,YAAA,EAAc,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAE;AAAA,OAAA;AAAA,MAEvC,EAAE,qBAAqB;AAAA,KAC1B,EACC,MAAM,QACT;AAAA,GAEJ,oBAEC,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,MAAI,IAAC,EAAA,EAAA,EAAI,CACZ,EAAA,EAAA,KAAA,CAAM,QACT,CAAA;AAEJ;AAGa,MAAA,OAAA,GAAU,CAAC,KAAyC,KAAA;AAC/D,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,QAAK,IAAI,EAAA,IAAA,EAAC,IAAI,EAAI,EAAA,EAAA,EAAI,EACpB,EAAA,EAAA,KAAA,CAAM,QACT,CAAA;AAEJ;AAGa,MAAA,mBAAA,GAAsB,CAAC,KAAyC,KAAA;AAC3E,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,IAAK,EAAA,EAAA,SAAA,EAAS,IAAC,EAAA,KAAA,EAAO,EAAE,QAAU,EAAA,UAAA,EAChC,EAAA,EAAA,KAAA,CAAM,QACT,CAAA;AAEJ;AAEA,mBAAA,CAAoB,OAAU,GAAA,OAAA;AAC9B,mBAAA,CAAoB,OAAU,GAAA,OAAA;;;;"}
+{"version":3,"file":"CatalogFilterLayout.esm.js","sources":["../../../src/components/CatalogFilterLayout/CatalogFilterLayout.tsx"],"sourcesContent":["/*\n * Copyright 2021 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React, { useState } from 'react';\nimport Box from '@material-ui/core/Box';\nimport Button from '@material-ui/core/Button';\nimport Drawer from '@material-ui/core/Drawer';\nimport Grid from '@material-ui/core/Grid';\nimport Typography from '@material-ui/core/Typography';\nimport useMediaQuery from '@material-ui/core/useMediaQuery';\nimport { Theme, useTheme } from '@material-ui/core/styles';\nimport FilterListIcon from '@material-ui/icons/FilterList';\nimport { catalogReactTranslationRef } from '../../translation';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\n\n/** @public */\nexport const Filters = (props: {\n  children: React.ReactNode;\n  options?: {\n    drawerBreakpoint?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number;\n    drawerAnchor?: 'left' | 'right' | 'top' | 'bottom';\n  };\n}) => {\n  const isScreenSmallerThanBreakpoint = useMediaQuery(\n    (theme: Theme) =>\n      theme.breakpoints.down(props.options?.drawerBreakpoint ?? 'md'),\n    { noSsr: true },\n  );\n  const theme = useTheme();\n  const [filterDrawerOpen, setFilterDrawerOpen] = useState<boolean>(false);\n  const { t } = useTranslationRef(catalogReactTranslationRef);\n\n  return isScreenSmallerThanBreakpoint ? (\n    <>\n      <Button\n        style={{ marginTop: theme.spacing(1), marginLeft: theme.spacing(1) }}\n        onClick={() => setFilterDrawerOpen(true)}\n        startIcon={<FilterListIcon />}\n      >\n        {t('catalogFilter.buttonTitle')}\n      </Button>\n      <Drawer\n        open={filterDrawerOpen}\n        onClose={() => setFilterDrawerOpen(false)}\n        anchor={props.options?.drawerAnchor ?? 'left'}\n        disableAutoFocus\n        keepMounted\n        variant=\"temporary\"\n      >\n        <Box m={2}>\n          <Typography\n            variant=\"h6\"\n            component=\"h2\"\n            style={{ marginBottom: theme.spacing(1) }}\n          >\n            {t('catalogFilter.title')}\n          </Typography>\n          {props.children}\n        </Box>\n      </Drawer>\n    </>\n  ) : (\n    <Grid item lg={2}>\n      {props.children}\n    </Grid>\n  );\n};\n\n/** @public */\nexport const Content = (props: { children: React.ReactNode }) => {\n  return (\n    <Grid item xs={12} lg={10}>\n      {props.children}\n    </Grid>\n  );\n};\n\n/** @public */\nexport const CatalogFilterLayout = (props: { children: React.ReactNode }) => {\n  return (\n    <Grid container style={{ position: 'relative' }}>\n      {props.children}\n    </Grid>\n  );\n};\n\nCatalogFilterLayout.Filters = Filters;\nCatalogFilterLayout.Content = Content;\n"],"names":["theme"],"mappings":";;;;;;;;;;;;AA6Ba,MAAA,OAAA,GAAU,CAAC,KAMlB,KAAA;AACJ,EAAA,MAAM,6BAAgC,GAAA,aAAA;AAAA,IACpC,CAACA,WACCA,MAAM,CAAA,WAAA,CAAY,KAAK,KAAM,CAAA,OAAA,EAAS,oBAAoB,IAAI,CAAA;AAAA,IAChE,EAAE,OAAO,IAAK;AAAA,GAChB;AACA,EAAA,MAAM,QAAQ,QAAS,EAAA;AACvB,EAAA,MAAM,CAAC,gBAAA,EAAkB,mBAAmB,CAAA,GAAI,SAAkB,KAAK,CAAA;AACvE,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,0BAA0B,CAAA;AAE1D,EAAA,OAAO,gDAEH,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,EAAE,SAAA,EAAW,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA,EAAG,UAAY,EAAA,KAAA,CAAM,OAAQ,CAAA,CAAC,CAAE,EAAA;AAAA,MACnE,OAAA,EAAS,MAAM,mBAAA,CAAoB,IAAI,CAAA;AAAA,MACvC,SAAA,sCAAY,cAAe,EAAA,IAAA;AAAA,KAAA;AAAA,IAE1B,EAAE,2BAA2B;AAAA,GAEhC,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,IAAM,EAAA,gBAAA;AAAA,MACN,OAAA,EAAS,MAAM,mBAAA,CAAoB,KAAK,CAAA;AAAA,MACxC,MAAA,EAAQ,KAAM,CAAA,OAAA,EAAS,YAAgB,IAAA,MAAA;AAAA,MACvC,gBAAgB,EAAA,IAAA;AAAA,MAChB,WAAW,EAAA,IAAA;AAAA,MACX,OAAQ,EAAA;AAAA,KAAA;AAAA,oBAER,KAAA,CAAA,aAAA,CAAC,GAAI,EAAA,EAAA,CAAA,EAAG,CACN,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,OAAQ,EAAA,IAAA;AAAA,QACR,SAAU,EAAA,IAAA;AAAA,QACV,OAAO,EAAE,YAAA,EAAc,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAE;AAAA,OAAA;AAAA,MAEvC,EAAE,qBAAqB;AAAA,KAC1B,EACC,MAAM,QACT;AAAA,GAEJ,oBAEC,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,MAAI,IAAC,EAAA,EAAA,EAAI,CACZ,EAAA,EAAA,KAAA,CAAM,QACT,CAAA;AAEJ;AAGa,MAAA,OAAA,GAAU,CAAC,KAAyC,KAAA;AAC/D,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,QAAK,IAAI,EAAA,IAAA,EAAC,IAAI,EAAI,EAAA,EAAA,EAAI,EACpB,EAAA,EAAA,KAAA,CAAM,QACT,CAAA;AAEJ;AAGa,MAAA,mBAAA,GAAsB,CAAC,KAAyC,KAAA;AAC3E,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,IAAK,EAAA,EAAA,SAAA,EAAS,IAAC,EAAA,KAAA,EAAO,EAAE,QAAU,EAAA,UAAA,EAChC,EAAA,EAAA,KAAA,CAAM,QACT,CAAA;AAEJ;AAEA,mBAAA,CAAoB,OAAU,GAAA,OAAA;AAC9B,mBAAA,CAAoB,OAAU,GAAA,OAAA;;;;"}

package/dist/components/EntityOwnerPicker/useFacetsEntities.esm.js

@@ -2,9 +2,8 @@ import { useApi } from '@backstage/core-plugin-api';
 import useAsyncFn from 'react-use/esm/useAsyncFn';
 import { catalogApiRef } from '../../api.esm.js';
 import { useState } from 'react';
-import get from 'lodash/get';
+import { parseEntityRef } from '@backstage/catalog-model';
 
-const maybeString = (value) => typeof value === "string" ? value : void 0;
 function useFacetsEntities({ enabled }) {
   const catalogApi = useApi(catalogApiRef);
   const [facetsPromise] = useState(async () => {
@@ -12,21 +11,21 @@ function useFacetsEntities({ enabled }) {
       return [];
     }
     const facet = "relations.ownedBy";
-    const facetsResponse = await catalogApi.getEntityFacets({
-      facets: [facet]
-    });
-    const entityRefs = facetsResponse.facets[facet]?.map((e) => e.value) ?? [];
-    return catalogApi.getEntitiesByRefs({ entityRefs }).then(
-      (resp) => resp.items.filter((entity) => entity !== void 0).map((entity) => entity).sort(
-        (a, b) => (a.metadata.namespace || "").localeCompare(
-          b.metadata.namespace || "",
-          "en-US"
-        ) || (maybeString(get(a, "spec.profile.displayName")) || a.metadata.title || a.metadata.name).localeCompare(
-          maybeString(get(b, "spec.profile.displayName")) || b.metadata.title || b.metadata.name,
+    return catalogApi.getEntityFacets({ facets: [facet] }).then(
+      (response) => response.facets[facet].map((e) => e.value).map((ref) => {
+        const { kind, name, namespace } = parseEntityRef(ref);
+        return {
+          apiVersion: "backstage.io/v1beta1",
+          kind,
+          metadata: { name, namespace }
+        };
+      }).sort(
+        (a, b) => a.kind.localeCompare(b.kind, "en-US") || a.metadata.namespace.localeCompare(
+          b.metadata.namespace,
           "en-US"
-        ) || a.kind.localeCompare(b.kind, "en-US")
+        ) || a.metadata.name.localeCompare(b.metadata.name, "en-US")
       )
-    ).then((entities) => entities).catch(() => []);
+    ).catch(() => []);
   });
   return useAsyncFn(
     async (request, options) => {
@@ -80,9 +79,7 @@ function encodeCursor({
 }
 function filterEntity(text, entity) {
   const normalizedText = text.trim();
-  return entity.kind.includes(normalizedText) || entity.metadata.namespace?.includes(normalizedText) || entity.metadata.name.includes(normalizedText) || entity.metadata.title?.includes(normalizedText) || get(entity, "spec.profile.displayName")?.includes(
-    normalizedText
-  );
+  return entity.kind.includes(normalizedText) || entity.metadata.namespace?.includes(normalizedText) || entity.metadata.name.includes(normalizedText);
 }
 
 export { useFacetsEntities };

package/dist/components/EntityOwnerPicker/useFacetsEntities.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFacetsEntities.esm.js","sources":["../../../src/components/EntityOwnerPicker/useFacetsEntities.ts"],"sourcesContent":["/*\n * Copyright 2023 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport { useApi } from '@backstage/core-plugin-api';\nimport useAsyncFn from 'react-use/esm/useAsyncFn';\nimport { catalogApiRef } from '../../api';\nimport { useState } from 'react';\nimport { Entity } from '@backstage/catalog-model';\nimport get from 'lodash/get';\n\ntype FacetsCursor = {\n  start: number;\n  text: string;\n};\n\ntype FacetsEntitiesResponse = {\n  items: Entity[];\n  cursor?: string;\n};\n\ntype FacetsInitialRequest = {\n  text: string;\n};\n\nconst maybeString = (value: unknown): string | undefined =>\n  typeof value === 'string' ? value : undefined;\n\n/**\n * This hook asynchronously loads the entity owners using the facets endpoint.\n * EntityOwnerPicker uses this hook when mode=\"owners-only\" is passed as prop.\n * All the owners are kept internally in memory and rendered in batches once requested\n * by the frontend. The values returned by this hook are compatible with `useQueryEntities`\n * hook, which is also used by EntityOwnerPicker.\n */\nexport function useFacetsEntities({ enabled }: { enabled: boolean }) {\n  const catalogApi = useApi(catalogApiRef);\n\n  const [facetsPromise] = useState(async () => {\n    if (!enabled) {\n      return [];\n    }\n    const facet = 'relations.ownedBy';\n    const facetsResponse = await catalogApi.getEntityFacets({\n      facets: [facet],\n    });\n    const entityRefs = facetsResponse.facets[facet]?.map(e => e.value) ?? [];\n\n    return catalogApi\n      .getEntitiesByRefs({ entityRefs })\n      .then(resp =>\n        resp.items\n          .filter(entity => entity !== undefined)\n          .map(entity => entity as Entity)\n          .sort(\n            (a, b) =>\n              (a.metadata.namespace || '').localeCompare(\n                b.metadata.namespace || '',\n                'en-US',\n              ) ||\n              (\n                maybeString(get(a, 'spec.profile.displayName')) ||\n                a.metadata.title ||\n                a.metadata.name\n              ).localeCompare(\n                maybeString(get(b, 'spec.profile.displayName')) ||\n                  b.metadata.title ||\n                  b.metadata.name,\n                'en-US',\n              ) ||\n              a.kind.localeCompare(b.kind, 'en-US'),\n          ),\n      )\n      .then(entities => entities)\n      .catch(() => []);\n  });\n\n  return useAsyncFn<\n    (\n      request: FacetsInitialRequest | FacetsEntitiesResponse,\n      options?: { limit?: number },\n    ) => Promise<FacetsEntitiesResponse>\n  >(\n    async (request, options) => {\n      const facets = await facetsPromise;\n\n      if (!facets) {\n        return {\n          items: [],\n        };\n      }\n\n      const limit = options?.limit ?? 20;\n\n      const { text, start } = decodeCursor(request);\n      const filteredRefs = facets.filter(e => filterEntity(text, e));\n      const end = start + limit;\n      return {\n        items: filteredRefs.slice(0, end),\n        ...encodeCursor({\n          entities: filteredRefs,\n          limit: end,\n          payload: {\n            text,\n            start: end,\n          },\n        }),\n      };\n    },\n    [facetsPromise],\n    { loading: true, value: { items: [] } },\n  );\n}\n\nfunction decodeCursor(\n  request: FacetsInitialRequest | FacetsEntitiesResponse,\n): FacetsCursor {\n  if (isFacetsResponse(request) && request.cursor) {\n    return JSON.parse(atob(request.cursor));\n  }\n  return {\n    text: (request as FacetsInitialRequest).text || '',\n    start: 0,\n  };\n}\n\nfunction isFacetsResponse(\n  request: FacetsInitialRequest | FacetsEntitiesResponse,\n): request is FacetsEntitiesResponse {\n  return !!(request as FacetsEntitiesResponse).cursor;\n}\n\nfunction encodeCursor({\n  entities,\n  limit,\n  payload,\n}: {\n  entities: Entity[];\n  limit: number;\n  payload: { text: string; start: number };\n}) {\n  if (entities.length > limit) {\n    return { cursor: btoa(JSON.stringify(payload)) };\n  }\n  return {};\n}\n\nfunction filterEntity(text: string, entity: Entity) {\n  const normalizedText = text.trim();\n  return (\n    entity.kind.includes(normalizedText) ||\n    entity.metadata.namespace?.includes(normalizedText) ||\n    entity.metadata.name.includes(normalizedText) ||\n    entity.metadata.title?.includes(normalizedText) ||\n    (get(entity, 'spec.profile.displayName') as unknown as string)?.includes(\n      normalizedText,\n    )\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"useFacetsEntities.esm.js","sources":["../../../src/components/EntityOwnerPicker/useFacetsEntities.ts"],"sourcesContent":["/*\n * Copyright 2023 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport { useApi } from '@backstage/core-plugin-api';\nimport useAsyncFn from 'react-use/esm/useAsyncFn';\nimport { catalogApiRef } from '../../api';\nimport { useState } from 'react';\nimport { Entity, parseEntityRef } from '@backstage/catalog-model';\n\ntype FacetsCursor = {\n  start: number;\n  text: string;\n};\n\ntype FacetsEntitiesResponse = {\n  items: Entity[];\n  cursor?: string;\n};\n\ntype FacetsInitialRequest = {\n  text: string;\n};\n\n/**\n * This hook asynchronously loads the entity owners using the facets endpoint.\n * EntityOwnerPicker uses this hook when mode=\"owners-only\" is passed as prop.\n * All the owners are kept internally in memory and rendered in batches once requested\n * by the frontend. The values returned by this hook are compatible with `useQueryEntities`\n * hook, which is also used by EntityOwnerPicker.\n * In this mode, the EntityOwnerPicker won't show detailed information of the owners.\n */\nexport function useFacetsEntities({ enabled }: { enabled: boolean }) {\n  const catalogApi = useApi(catalogApiRef);\n\n  const [facetsPromise] = useState(async () => {\n    if (!enabled) {\n      return [];\n    }\n    const facet = 'relations.ownedBy';\n\n    return catalogApi\n      .getEntityFacets({ facets: [facet] })\n      .then(response =>\n        response.facets[facet]\n          .map(e => e.value)\n          .map(ref => {\n            const { kind, name, namespace } = parseEntityRef(ref);\n            return {\n              apiVersion: 'backstage.io/v1beta1',\n              kind,\n              metadata: { name, namespace },\n            };\n          })\n          .sort(\n            (a, b) =>\n              a.kind.localeCompare(b.kind, 'en-US') ||\n              a.metadata.namespace.localeCompare(\n                b.metadata.namespace,\n                'en-US',\n              ) ||\n              a.metadata.name.localeCompare(b.metadata.name, 'en-US'),\n          ),\n      )\n      .catch(() => []);\n  });\n\n  return useAsyncFn<\n    (\n      request: FacetsInitialRequest | FacetsEntitiesResponse,\n      options?: { limit?: number },\n    ) => Promise<FacetsEntitiesResponse>\n  >(\n    async (request, options) => {\n      const facets = await facetsPromise;\n\n      if (!facets) {\n        return {\n          items: [],\n        };\n      }\n\n      const limit = options?.limit ?? 20;\n\n      const { text, start } = decodeCursor(request);\n      const filteredRefs = facets.filter(e => filterEntity(text, e));\n      const end = start + limit;\n      return {\n        items: filteredRefs.slice(0, end),\n        ...encodeCursor({\n          entities: filteredRefs,\n          limit: end,\n          payload: {\n            text,\n            start: end,\n          },\n        }),\n      };\n    },\n    [facetsPromise],\n    { loading: true, value: { items: [] } },\n  );\n}\n\nfunction decodeCursor(\n  request: FacetsInitialRequest | FacetsEntitiesResponse,\n): FacetsCursor {\n  if (isFacetsResponse(request) && request.cursor) {\n    return JSON.parse(atob(request.cursor));\n  }\n  return {\n    text: (request as FacetsInitialRequest).text || '',\n    start: 0,\n  };\n}\n\nfunction isFacetsResponse(\n  request: FacetsInitialRequest | FacetsEntitiesResponse,\n): request is FacetsEntitiesResponse {\n  return !!(request as FacetsEntitiesResponse).cursor;\n}\n\nfunction encodeCursor({\n  entities,\n  limit,\n  payload,\n}: {\n  entities: Entity[];\n  limit: number;\n  payload: { text: string; start: number };\n}) {\n  if (entities.length > limit) {\n    return { cursor: btoa(JSON.stringify(payload)) };\n  }\n  return {};\n}\n\nfunction filterEntity(text: string, entity: Entity) {\n  const normalizedText = text.trim();\n  return (\n    entity.kind.includes(normalizedText) ||\n    entity.metadata.namespace?.includes(normalizedText) ||\n    entity.metadata.name.includes(normalizedText)\n  );\n}\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backstage/plugin-catalog-react",
-  "version": "1.14.3-next.1",
+  "version": "1.14.3-next.2",
   "description": "A frontend library that helps other Backstage plugins interact with the catalog",
   "backstage": {
     "role": "web-library",
@@ -73,18 +73,18 @@
     "test": "backstage-cli package test"
   },
   "dependencies": {
-    "@backstage/catalog-client": "1.9.0-next.1",
-    "@backstage/catalog-model": "1.7.1",
-    "@backstage/core-compat-api": "0.3.4-next.1",
-    "@backstage/core-components": "0.16.2-next.1",
-    "@backstage/core-plugin-api": "1.10.1",
-    "@backstage/errors": "1.2.5",
-    "@backstage/frontend-plugin-api": "0.9.3-next.1",
-    "@backstage/frontend-test-utils": "0.2.4-next.1",
-    "@backstage/integration-react": "1.2.2-next.0",
-    "@backstage/plugin-catalog-common": "1.1.1",
-    "@backstage/plugin-permission-common": "0.8.2",
-    "@backstage/plugin-permission-react": "0.4.28",
+    "@backstage/catalog-client": "1.9.0-next.2",
+    "@backstage/catalog-model": "1.7.2-next.0",
+    "@backstage/core-compat-api": "0.3.4-next.2",
+    "@backstage/core-components": "0.16.2-next.2",
+    "@backstage/core-plugin-api": "1.10.2-next.0",
+    "@backstage/errors": "1.2.6-next.0",
+    "@backstage/frontend-plugin-api": "0.9.3-next.2",
+    "@backstage/frontend-test-utils": "0.2.4-next.2",
+    "@backstage/integration-react": "1.2.2-next.1",
+    "@backstage/plugin-catalog-common": "1.1.2-next.0",
+    "@backstage/plugin-permission-common": "0.8.3-next.0",
+    "@backstage/plugin-permission-react": "0.4.29-next.0",
     "@backstage/types": "1.2.0",
     "@backstage/version-bridge": "1.0.10",
     "@material-ui/core": "^4.12.2",
@@ -100,11 +100,11 @@
     "zen-observable": "^0.10.0"
   },
   "devDependencies": {
-    "@backstage/cli": "0.29.3-next.1",
-    "@backstage/core-app-api": "1.15.3-next.0",
-    "@backstage/plugin-catalog-common": "1.1.1",
-    "@backstage/plugin-scaffolder-common": "1.5.8-next.0",
-    "@backstage/test-utils": "1.7.3-next.0",
+    "@backstage/cli": "0.29.3-next.2",
+    "@backstage/core-app-api": "1.15.3-next.1",
+    "@backstage/plugin-catalog-common": "1.1.2-next.0",
+    "@backstage/plugin-scaffolder-common": "1.5.8-next.1",
+    "@backstage/test-utils": "1.7.3-next.1",
     "@testing-library/dom": "^10.0.0",
     "@testing-library/jest-dom": "^6.0.0",
     "@testing-library/react": "^16.0.0",