@backstage/plugin-catalog-react 3.2.1 → 3.2.2

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @backstage/plugin-catalog-react
 
+## 3.2.2
+
+### Patch Changes
+
+- a131165: Fixed `EntityOwnerPicker` crashing with `Entity reference "<name>" had missing or empty kind` when the `owners` query parameter contains humanized entity refs, as produced by the `OwnershipCard` links in `@backstage/plugin-org`.
+
+  Query parameters were stored as-is in the initial state and only converted to full entity refs by an effect, which runs after the first render. That first render passed the raw value to the entity presentation API, whose `parseEntityRef` call rejects a ref without a kind. The same raw value was also sent to `catalogApi.getEntitiesByRefs` on mount, and made the option checkboxes render unselected until the effect ran.
+
+  The query parameters are now normalized through `EntityOwnerFilter` when the state is initialized, matching what the existing effect already did and what the `filters` code path already produced.
+
 ## 3.2.1
 
 ### Patch Changes

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

@@ -97,7 +97,7 @@ const EntityOwnerPicker = (props) => {
     [ownersParameter]
   );
   const [selectedOwners, setSelectedOwners] = useState(
-    queryParamOwners.length ? queryParamOwners : filters.owners?.values ?? []
+    queryParamOwners.length ? new EntityOwnerFilter(queryParamOwners).values : filters.owners?.values ?? []
   );
   const [{ value, loading }, handleFetch, cache] = useFetchEntities({
     mode,

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

@@ -1 +1 @@
-{"version":3,"file":"EntityOwnerPicker.esm.js","sources":["../../../src/components/EntityOwnerPicker/EntityOwnerPicker.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 {\n  Entity,\n  parseEntityRef,\n  stringifyEntityRef,\n} from '@backstage/catalog-model';\nimport Box from '@material-ui/core/Box';\nimport Checkbox from '@material-ui/core/Checkbox';\nimport FormControlLabel from '@material-ui/core/FormControlLabel';\nimport Typography from '@material-ui/core/Typography';\nimport Tooltip from '@material-ui/core/Tooltip';\nimport { makeStyles } from '@material-ui/core/styles';\nimport CheckBoxIcon from '@material-ui/icons/CheckBox';\nimport CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';\nimport { MouseEvent, useEffect, useMemo, useState } from 'react';\nimport { useEntityList } from '../../hooks/useEntityListProvider';\nimport { EntityOwnerFilter } from '../../filters';\nimport { useDebouncedEffect } from '@react-hookz/web';\nimport PersonIcon from '@material-ui/icons/Person';\nimport GroupIcon from '@material-ui/icons/Group';\nimport {\n  entityPresentationApiRef,\n  entityPresentationSnapshot,\n} from '../../apis';\nimport { useFetchEntities } from './useFetchEntities';\nimport { VirtualizedListbox } from './VirtualizedListbox';\nimport { withStyles } from '@material-ui/core/styles';\nimport { useEntityPresentation } from '../../apis';\nimport { catalogReactTranslationRef } from '../../translation';\nimport { useApiHolder } from '@backstage/core-plugin-api';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { CatalogAutocomplete } from '../CatalogAutocomplete';\n\n/** @public */\nexport type CatalogReactEntityOwnerPickerClassKey = 'input';\n\nconst useStyles = makeStyles(\n  {\n    root: {},\n    label: {},\n    input: {},\n    fullWidth: { width: '100%' },\n    boxLabel: {\n      width: '100%',\n      textOverflow: 'ellipsis',\n      overflow: 'hidden',\n    },\n  },\n  { name: 'CatalogReactEntityOwnerPicker' },\n);\n\n/** @public */\nexport type FixedWidthFormControlLabelClassKey = 'label' | 'root';\n\nconst FixedWidthFormControlLabel = withStyles(\n  _theme => ({\n    label: {\n      width: '100%',\n    },\n    root: {\n      width: '90%',\n    },\n  }),\n  { name: 'FixedWidthFormControlLabel' },\n)(FormControlLabel);\n\nconst icon = <CheckBoxOutlineBlankIcon fontSize=\"small\" />;\nconst checkedIcon = <CheckBoxIcon fontSize=\"small\" />;\n\n/**\n * @public\n */\nexport type EntityOwnerPickerProps = {\n  mode?: 'owners-only' | 'all';\n};\n\nfunction RenderOptionLabel(props: {\n  entity: Entity;\n  isSelected: boolean;\n  mode: 'owners-only' | 'all';\n}) {\n  const classes = useStyles();\n  const isGroup = props.entity.kind.toLocaleLowerCase('en-US') === 'group';\n  // owners-only stubs lack title/displayName; pass ref string so the presentation API fetches the full entity.\n  const entityOrRef: Entity | string =\n    props.mode === 'owners-only'\n      ? stringifyEntityRef(props.entity)\n      : props.entity;\n  const { primaryTitle: title } = useEntityPresentation(entityOrRef);\n  return (\n    <Box className={classes.fullWidth}>\n      <FixedWidthFormControlLabel\n        className={classes.fullWidth}\n        control={\n          <Checkbox\n            icon={icon}\n            checkedIcon={checkedIcon}\n            checked={props.isSelected}\n          />\n        }\n        onClick={event => event.preventDefault()}\n        label={\n          <Tooltip title={title}>\n            <Box display=\"flex\" alignItems=\"center\">\n              {isGroup ? (\n                <GroupIcon fontSize=\"small\" />\n              ) : (\n                <PersonIcon fontSize=\"small\" />\n              )}\n              &nbsp;\n              <Box className={classes.boxLabel}>\n                <Typography noWrap>{title}</Typography>\n              </Box>\n            </Box>\n          </Tooltip>\n        }\n      />\n    </Box>\n  );\n}\n\n/** @public */\nexport const EntityOwnerPicker = (props?: EntityOwnerPickerProps) => {\n  const classes = useStyles();\n  const { mode = 'owners-only' } = props || {};\n  const apis = useApiHolder();\n  const entityPresentationApi = apis.get(entityPresentationApiRef);\n  const {\n    updateFilters,\n    filters,\n    queryParameters: { owners: ownersParameter },\n  } = useEntityList();\n\n  const [text, setText] = useState('');\n  const { t } = useTranslationRef(catalogReactTranslationRef);\n\n  const queryParamOwners = useMemo(\n    () => [ownersParameter].flat().filter(Boolean) as string[],\n    [ownersParameter],\n  );\n\n  const [selectedOwners, setSelectedOwners] = useState<string[]>(\n    queryParamOwners.length ? queryParamOwners : filters.owners?.values ?? [],\n  );\n\n  const [{ value, loading }, handleFetch, cache] = useFetchEntities({\n    mode,\n    initialSelectedOwnersRefs: selectedOwners,\n  });\n  useDebouncedEffect(\n    () => handleFetch({ text: text.toLocaleLowerCase('en-US') }),\n    [text, handleFetch],\n    250,\n  );\n\n  const availableOwners = value?.items || [];\n\n  // Set selected owners on query parameter updates; this happens at initial page load and from\n  // external updates to the page location.\n  useEffect(() => {\n    if (queryParamOwners.length) {\n      const filter = new EntityOwnerFilter(queryParamOwners);\n      setSelectedOwners(filter.values);\n    }\n  }, [queryParamOwners]);\n\n  useEffect(() => {\n    updateFilters({\n      owners: selectedOwners.length\n        ? new EntityOwnerFilter(selectedOwners)\n        : undefined,\n    });\n  }, [selectedOwners, updateFilters]);\n\n  if (\n    ['user', 'group'].includes(\n      filters.kind?.value.toLocaleLowerCase('en-US') || '',\n    )\n  ) {\n    return null;\n  }\n\n  return (\n    <Box className={classes.root} pb={1} pt={1}>\n      <CatalogAutocomplete<Entity, true>\n        label={t('entityOwnerPicker.title')}\n        multiple\n        disableCloseOnSelect\n        loading={loading}\n        options={availableOwners}\n        value={selectedOwners as unknown as Entity[]}\n        getOptionSelected={(o, v) => {\n          if (typeof v === 'string') {\n            return stringifyEntityRef(o) === v;\n          }\n          return o === v;\n        }}\n        getOptionLabel={o => {\n          if (mode === 'owners-only') {\n            // Stubs have no title; use string ref so entityPresentationSnapshot hits the API cache.\n            const ref = typeof o === 'string' ? o : stringifyEntityRef(o);\n            return entityPresentationSnapshot(\n              ref,\n              undefined,\n              entityPresentationApi,\n            ).primaryTitle;\n          }\n          const entity =\n            typeof o === 'string'\n              ? cache.getEntity(o) ||\n                parseEntityRef(o, {\n                  defaultKind: 'group',\n                  defaultNamespace: 'default',\n                })\n              : o;\n          return entityPresentationSnapshot(\n            entity,\n            undefined,\n            entityPresentationApi,\n          ).primaryTitle;\n        }}\n        onChange={(_: object, owners) => {\n          setText('');\n          setSelectedOwners(\n            owners.map(e => {\n              const entityRef =\n                typeof e === 'string' ? e : stringifyEntityRef(e);\n\n              if (typeof e !== 'string') {\n                cache.setEntity(e);\n              }\n              return entityRef;\n            }),\n          );\n        }}\n        filterOptions={x => x}\n        renderOption={(entity, { selected }) => {\n          return (\n            <RenderOptionLabel\n              entity={entity}\n              isSelected={selected}\n              mode={mode}\n            />\n          );\n        }}\n        name=\"owner-picker\"\n        onInputChange={(_e, inputValue) => {\n          setText(inputValue);\n        }}\n        ListboxComponent={VirtualizedListbox}\n        ListboxProps={{\n          onScroll: (e: MouseEvent) => {\n            const element = e.currentTarget;\n            const hasReachedEnd =\n              Math.abs(\n                element.scrollHeight - element.clientHeight - element.scrollTop,\n              ) < 1;\n\n            if (hasReachedEnd && value?.cursor) {\n              handleFetch({ items: value.items, cursor: value.cursor });\n            }\n          },\n          'data-testid': 'owner-picker-listbox',\n        }}\n        LabelProps={{ className: classes.label }}\n        TextFieldProps={{ className: classes.input }}\n      />\n    </Box>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"EntityOwnerPicker.esm.js","sources":["../../../src/components/EntityOwnerPicker/EntityOwnerPicker.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 {\n  Entity,\n  parseEntityRef,\n  stringifyEntityRef,\n} from '@backstage/catalog-model';\nimport Box from '@material-ui/core/Box';\nimport Checkbox from '@material-ui/core/Checkbox';\nimport FormControlLabel from '@material-ui/core/FormControlLabel';\nimport Typography from '@material-ui/core/Typography';\nimport Tooltip from '@material-ui/core/Tooltip';\nimport { makeStyles } from '@material-ui/core/styles';\nimport CheckBoxIcon from '@material-ui/icons/CheckBox';\nimport CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';\nimport { MouseEvent, useEffect, useMemo, useState } from 'react';\nimport { useEntityList } from '../../hooks/useEntityListProvider';\nimport { EntityOwnerFilter } from '../../filters';\nimport { useDebouncedEffect } from '@react-hookz/web';\nimport PersonIcon from '@material-ui/icons/Person';\nimport GroupIcon from '@material-ui/icons/Group';\nimport {\n  entityPresentationApiRef,\n  entityPresentationSnapshot,\n} from '../../apis';\nimport { useFetchEntities } from './useFetchEntities';\nimport { VirtualizedListbox } from './VirtualizedListbox';\nimport { withStyles } from '@material-ui/core/styles';\nimport { useEntityPresentation } from '../../apis';\nimport { catalogReactTranslationRef } from '../../translation';\nimport { useApiHolder } from '@backstage/core-plugin-api';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { CatalogAutocomplete } from '../CatalogAutocomplete';\n\n/** @public */\nexport type CatalogReactEntityOwnerPickerClassKey = 'input';\n\nconst useStyles = makeStyles(\n  {\n    root: {},\n    label: {},\n    input: {},\n    fullWidth: { width: '100%' },\n    boxLabel: {\n      width: '100%',\n      textOverflow: 'ellipsis',\n      overflow: 'hidden',\n    },\n  },\n  { name: 'CatalogReactEntityOwnerPicker' },\n);\n\n/** @public */\nexport type FixedWidthFormControlLabelClassKey = 'label' | 'root';\n\nconst FixedWidthFormControlLabel = withStyles(\n  _theme => ({\n    label: {\n      width: '100%',\n    },\n    root: {\n      width: '90%',\n    },\n  }),\n  { name: 'FixedWidthFormControlLabel' },\n)(FormControlLabel);\n\nconst icon = <CheckBoxOutlineBlankIcon fontSize=\"small\" />;\nconst checkedIcon = <CheckBoxIcon fontSize=\"small\" />;\n\n/**\n * @public\n */\nexport type EntityOwnerPickerProps = {\n  mode?: 'owners-only' | 'all';\n};\n\nfunction RenderOptionLabel(props: {\n  entity: Entity;\n  isSelected: boolean;\n  mode: 'owners-only' | 'all';\n}) {\n  const classes = useStyles();\n  const isGroup = props.entity.kind.toLocaleLowerCase('en-US') === 'group';\n  // owners-only stubs lack title/displayName; pass ref string so the presentation API fetches the full entity.\n  const entityOrRef: Entity | string =\n    props.mode === 'owners-only'\n      ? stringifyEntityRef(props.entity)\n      : props.entity;\n  const { primaryTitle: title } = useEntityPresentation(entityOrRef);\n  return (\n    <Box className={classes.fullWidth}>\n      <FixedWidthFormControlLabel\n        className={classes.fullWidth}\n        control={\n          <Checkbox\n            icon={icon}\n            checkedIcon={checkedIcon}\n            checked={props.isSelected}\n          />\n        }\n        onClick={event => event.preventDefault()}\n        label={\n          <Tooltip title={title}>\n            <Box display=\"flex\" alignItems=\"center\">\n              {isGroup ? (\n                <GroupIcon fontSize=\"small\" />\n              ) : (\n                <PersonIcon fontSize=\"small\" />\n              )}\n              &nbsp;\n              <Box className={classes.boxLabel}>\n                <Typography noWrap>{title}</Typography>\n              </Box>\n            </Box>\n          </Tooltip>\n        }\n      />\n    </Box>\n  );\n}\n\n/** @public */\nexport const EntityOwnerPicker = (props?: EntityOwnerPickerProps) => {\n  const classes = useStyles();\n  const { mode = 'owners-only' } = props || {};\n  const apis = useApiHolder();\n  const entityPresentationApi = apis.get(entityPresentationApiRef);\n  const {\n    updateFilters,\n    filters,\n    queryParameters: { owners: ownersParameter },\n  } = useEntityList();\n\n  const [text, setText] = useState('');\n  const { t } = useTranslationRef(catalogReactTranslationRef);\n\n  const queryParamOwners = useMemo(\n    () => [ownersParameter].flat().filter(Boolean) as string[],\n    [ownersParameter],\n  );\n\n  // Query parameters may contain humanized refs (e.g. `guests` rather than\n  // `group:default/guests`), so they are normalized before being stored.\n  const [selectedOwners, setSelectedOwners] = useState<string[]>(\n    queryParamOwners.length\n      ? new EntityOwnerFilter(queryParamOwners).values\n      : filters.owners?.values ?? [],\n  );\n\n  const [{ value, loading }, handleFetch, cache] = useFetchEntities({\n    mode,\n    initialSelectedOwnersRefs: selectedOwners,\n  });\n  useDebouncedEffect(\n    () => handleFetch({ text: text.toLocaleLowerCase('en-US') }),\n    [text, handleFetch],\n    250,\n  );\n\n  const availableOwners = value?.items || [];\n\n  // Set selected owners on query parameter updates; this happens at initial page load and from\n  // external updates to the page location.\n  useEffect(() => {\n    if (queryParamOwners.length) {\n      const filter = new EntityOwnerFilter(queryParamOwners);\n      setSelectedOwners(filter.values);\n    }\n  }, [queryParamOwners]);\n\n  useEffect(() => {\n    updateFilters({\n      owners: selectedOwners.length\n        ? new EntityOwnerFilter(selectedOwners)\n        : undefined,\n    });\n  }, [selectedOwners, updateFilters]);\n\n  if (\n    ['user', 'group'].includes(\n      filters.kind?.value.toLocaleLowerCase('en-US') || '',\n    )\n  ) {\n    return null;\n  }\n\n  return (\n    <Box className={classes.root} pb={1} pt={1}>\n      <CatalogAutocomplete<Entity, true>\n        label={t('entityOwnerPicker.title')}\n        multiple\n        disableCloseOnSelect\n        loading={loading}\n        options={availableOwners}\n        value={selectedOwners as unknown as Entity[]}\n        getOptionSelected={(o, v) => {\n          if (typeof v === 'string') {\n            return stringifyEntityRef(o) === v;\n          }\n          return o === v;\n        }}\n        getOptionLabel={o => {\n          if (mode === 'owners-only') {\n            // Stubs have no title; use string ref so entityPresentationSnapshot hits the API cache.\n            const ref = typeof o === 'string' ? o : stringifyEntityRef(o);\n            return entityPresentationSnapshot(\n              ref,\n              undefined,\n              entityPresentationApi,\n            ).primaryTitle;\n          }\n          const entity =\n            typeof o === 'string'\n              ? cache.getEntity(o) ||\n                parseEntityRef(o, {\n                  defaultKind: 'group',\n                  defaultNamespace: 'default',\n                })\n              : o;\n          return entityPresentationSnapshot(\n            entity,\n            undefined,\n            entityPresentationApi,\n          ).primaryTitle;\n        }}\n        onChange={(_: object, owners) => {\n          setText('');\n          setSelectedOwners(\n            owners.map(e => {\n              const entityRef =\n                typeof e === 'string' ? e : stringifyEntityRef(e);\n\n              if (typeof e !== 'string') {\n                cache.setEntity(e);\n              }\n              return entityRef;\n            }),\n          );\n        }}\n        filterOptions={x => x}\n        renderOption={(entity, { selected }) => {\n          return (\n            <RenderOptionLabel\n              entity={entity}\n              isSelected={selected}\n              mode={mode}\n            />\n          );\n        }}\n        name=\"owner-picker\"\n        onInputChange={(_e, inputValue) => {\n          setText(inputValue);\n        }}\n        ListboxComponent={VirtualizedListbox}\n        ListboxProps={{\n          onScroll: (e: MouseEvent) => {\n            const element = e.currentTarget;\n            const hasReachedEnd =\n              Math.abs(\n                element.scrollHeight - element.clientHeight - element.scrollTop,\n              ) < 1;\n\n            if (hasReachedEnd && value?.cursor) {\n              handleFetch({ items: value.items, cursor: value.cursor });\n            }\n          },\n          'data-testid': 'owner-picker-listbox',\n        }}\n        LabelProps={{ className: classes.label }}\n        TextFieldProps={{ className: classes.input }}\n      />\n    </Box>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmDA,MAAM,SAAA,GAAY,UAAA;AAAA,EAChB;AAAA,IACE,MAAM,EAAC;AAAA,IACP,OAAO,EAAC;AAAA,IACR,OAAO,EAAC;AAAA,IACR,SAAA,EAAW,EAAE,KAAA,EAAO,MAAA,EAAO;AAAA,IAC3B,QAAA,EAAU;AAAA,MACR,KAAA,EAAO,MAAA;AAAA,MACP,YAAA,EAAc,UAAA;AAAA,MACd,QAAA,EAAU;AAAA;AACZ,GACF;AAAA,EACA,EAAE,MAAM,+BAAA;AACV,CAAA;AAKA,MAAM,0BAAA,GAA6B,UAAA;AAAA,EACjC,CAAA,MAAA,MAAW;AAAA,IACT,KAAA,EAAO;AAAA,MACL,KAAA,EAAO;AAAA,KACT;AAAA,IACA,IAAA,EAAM;AAAA,MACJ,KAAA,EAAO;AAAA;AACT,GACF,CAAA;AAAA,EACA,EAAE,MAAM,4BAAA;AACV,CAAA,CAAE,gBAAgB,CAAA;AAElB,MAAM,IAAA,mBAAO,GAAA,CAAC,wBAAA,EAAA,EAAyB,QAAA,EAAS,OAAA,EAAQ,CAAA;AACxD,MAAM,WAAA,mBAAc,GAAA,CAAC,YAAA,EAAA,EAAa,QAAA,EAAS,OAAA,EAAQ,CAAA;AASnD,SAAS,kBAAkB,KAAA,EAIxB;AACD,EAAA,MAAM,UAAU,SAAA,EAAU;AAC1B,EAAA,MAAM,UAAU,KAAA,CAAM,MAAA,CAAO,IAAA,CAAK,iBAAA,CAAkB,OAAO,CAAA,KAAM,OAAA;AAEjE,EAAA,MAAM,WAAA,GACJ,MAAM,IAAA,KAAS,aAAA,GACX,mBAAmB,KAAA,CAAM,MAAM,IAC/B,KAAA,CAAM,MAAA;AACZ,EAAA,MAAM,EAAE,YAAA,EAAc,KAAA,EAAM,GAAI,sBAAsB,WAAW,CAAA;AACjE,EAAA,uBACE,GAAA,CAAC,GAAA,EAAA,EAAI,SAAA,EAAW,OAAA,CAAQ,SAAA,EACtB,QAAA,kBAAA,GAAA;AAAA,IAAC,0BAAA;AAAA,IAAA;AAAA,MACC,WAAW,OAAA,CAAQ,SAAA;AAAA,MACnB,OAAA,kBACE,GAAA;AAAA,QAAC,QAAA;AAAA,QAAA;AAAA,UACC,IAAA;AAAA,UACA,WAAA;AAAA,UACA,SAAS,KAAA,CAAM;AAAA;AAAA,OACjB;AAAA,MAEF,OAAA,EAAS,CAAA,KAAA,KAAS,KAAA,CAAM,cAAA,EAAe;AAAA,MACvC,KAAA,sBACG,OAAA,EAAA,EAAQ,KAAA,EACP,+BAAC,GAAA,EAAA,EAAI,OAAA,EAAQ,MAAA,EAAO,UAAA,EAAW,QAAA,EAC5B,QAAA,EAAA;AAAA,QAAA,OAAA,mBACC,GAAA,CAAC,aAAU,QAAA,EAAS,OAAA,EAAQ,oBAE5B,GAAA,CAAC,UAAA,EAAA,EAAW,UAAS,OAAA,EAAQ,CAAA;AAAA,QAC7B,MAAA;AAAA,wBAEF,GAAA,CAAC,GAAA,EAAA,EAAI,SAAA,EAAW,OAAA,CAAQ,QAAA,EACtB,8BAAC,UAAA,EAAA,EAAW,MAAA,EAAM,IAAA,EAAE,QAAA,EAAA,KAAA,EAAM,CAAA,EAC5B;AAAA,OAAA,EACF,CAAA,EACF;AAAA;AAAA,GAEJ,EACF,CAAA;AAEJ;AAGO,MAAM,iBAAA,GAAoB,CAAC,KAAA,KAAmC;AACnE,EAAA,MAAM,UAAU,SAAA,EAAU;AAC1B,EAAA,MAAM,EAAE,IAAA,GAAO,aAAA,EAAc,GAAI,SAAS,EAAC;AAC3C,EAAA,MAAM,OAAO,YAAA,EAAa;AAC1B,EAAA,MAAM,qBAAA,GAAwB,IAAA,CAAK,GAAA,CAAI,wBAAwB,CAAA;AAC/D,EAAA,MAAM;AAAA,IACJ,aAAA;AAAA,IACA,OAAA;AAAA,IACA,eAAA,EAAiB,EAAE,MAAA,EAAQ,eAAA;AAAgB,MACzC,aAAA,EAAc;AAElB,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,SAAS,EAAE,CAAA;AACnC,EAAA,MAAM,EAAE,CAAA,EAAE,GAAI,iBAAA,CAAkB,0BAA0B,CAAA;AAE1D,EAAA,MAAM,gBAAA,GAAmB,OAAA;AAAA,IACvB,MAAM,CAAC,eAAe,EAAE,IAAA,EAAK,CAAE,OAAO,OAAO,CAAA;AAAA,IAC7C,CAAC,eAAe;AAAA,GAClB;AAIA,EAAA,MAAM,CAAC,cAAA,EAAgB,iBAAiB,CAAA,GAAI,QAAA;AAAA,IAC1C,gBAAA,CAAiB,MAAA,GACb,IAAI,iBAAA,CAAkB,gBAAgB,EAAE,MAAA,GACxC,OAAA,CAAQ,MAAA,EAAQ,MAAA,IAAU;AAAC,GACjC;AAEA,EAAA,MAAM,CAAC,EAAE,KAAA,EAAO,OAAA,IAAW,WAAA,EAAa,KAAK,IAAI,gBAAA,CAAiB;AAAA,IAChE,IAAA;AAAA,IACA,yBAAA,EAA2B;AAAA,GAC5B,CAAA;AACD,EAAA,kBAAA;AAAA,IACE,MAAM,YAAY,EAAE,IAAA,EAAM,KAAK,iBAAA,CAAkB,OAAO,GAAG,CAAA;AAAA,IAC3D,CAAC,MAAM,WAAW,CAAA;AAAA,IAClB;AAAA,GACF;AAEA,EAAA,MAAM,eAAA,GAAkB,KAAA,EAAO,KAAA,IAAS,EAAC;AAIzC,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,iBAAiB,MAAA,EAAQ;AAC3B,MAAA,MAAM,MAAA,GAAS,IAAI,iBAAA,CAAkB,gBAAgB,CAAA;AACrD,MAAA,iBAAA,CAAkB,OAAO,MAAM,CAAA;AAAA,IACjC;AAAA,EACF,CAAA,EAAG,CAAC,gBAAgB,CAAC,CAAA;AAErB,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,aAAA,CAAc;AAAA,MACZ,QAAQ,cAAA,CAAe,MAAA,GACnB,IAAI,iBAAA,CAAkB,cAAc,CAAA,GACpC;AAAA,KACL,CAAA;AAAA,EACH,CAAA,EAAG,CAAC,cAAA,EAAgB,aAAa,CAAC,CAAA;AAElC,EAAA,IACE,CAAC,MAAA,EAAQ,OAAO,CAAA,CAAE,QAAA;AAAA,IAChB,OAAA,CAAQ,IAAA,EAAM,KAAA,CAAM,iBAAA,CAAkB,OAAO,CAAA,IAAK;AAAA,GACpD,EACA;AACA,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,uBACE,GAAA,CAAC,OAAI,SAAA,EAAW,OAAA,CAAQ,MAAM,EAAA,EAAI,CAAA,EAAG,IAAI,CAAA,EACvC,QAAA,kBAAA,GAAA;AAAA,IAAC,mBAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,EAAE,yBAAyB,CAAA;AAAA,MAClC,QAAA,EAAQ,IAAA;AAAA,MACR,oBAAA,EAAoB,IAAA;AAAA,MACpB,OAAA;AAAA,MACA,OAAA,EAAS,eAAA;AAAA,MACT,KAAA,EAAO,cAAA;AAAA,MACP,iBAAA,EAAmB,CAAC,CAAA,EAAG,CAAA,KAAM;AAC3B,QAAA,IAAI,OAAO,MAAM,QAAA,EAAU;AACzB,UAAA,OAAO,kBAAA,CAAmB,CAAC,CAAA,KAAM,CAAA;AAAA,QACnC;AACA,QAAA,OAAO,CAAA,KAAM,CAAA;AAAA,MACf,CAAA;AAAA,MACA,gBAAgB,CAAA,CAAA,KAAK;AACnB,QAAA,IAAI,SAAS,aAAA,EAAe;AAE1B,UAAA,MAAM,MAAM,OAAO,CAAA,KAAM,QAAA,GAAW,CAAA,GAAI,mBAAmB,CAAC,CAAA;AAC5D,UAAA,OAAO,0BAAA;AAAA,YACL,GAAA;AAAA,YACA,MAAA;AAAA,YACA;AAAA,WACF,CAAE,YAAA;AAAA,QACJ;AACA,QAAA,MAAM,MAAA,GACJ,OAAO,CAAA,KAAM,QAAA,GACT,MAAM,SAAA,CAAU,CAAC,CAAA,IACjB,cAAA,CAAe,CAAA,EAAG;AAAA,UAChB,WAAA,EAAa,OAAA;AAAA,UACb,gBAAA,EAAkB;AAAA,SACnB,CAAA,GACD,CAAA;AACN,QAAA,OAAO,0BAAA;AAAA,UACL,MAAA;AAAA,UACA,MAAA;AAAA,UACA;AAAA,SACF,CAAE,YAAA;AAAA,MACJ,CAAA;AAAA,MACA,QAAA,EAAU,CAAC,CAAA,EAAW,MAAA,KAAW;AAC/B,QAAA,OAAA,CAAQ,EAAE,CAAA;AACV,QAAA,iBAAA;AAAA,UACE,MAAA,CAAO,IAAI,CAAA,CAAA,KAAK;AACd,YAAA,MAAM,YACJ,OAAO,CAAA,KAAM,QAAA,GAAW,CAAA,GAAI,mBAAmB,CAAC,CAAA;AAElD,YAAA,IAAI,OAAO,MAAM,QAAA,EAAU;AACzB,cAAA,KAAA,CAAM,UAAU,CAAC,CAAA;AAAA,YACnB;AACA,YAAA,OAAO,SAAA;AAAA,UACT,CAAC;AAAA,SACH;AAAA,MACF,CAAA;AAAA,MACA,eAAe,CAAA,CAAA,KAAK,CAAA;AAAA,MACpB,YAAA,EAAc,CAAC,MAAA,EAAQ,EAAE,UAAS,KAAM;AACtC,QAAA,uBACE,GAAA;AAAA,UAAC,iBAAA;AAAA,UAAA;AAAA,YACC,MAAA;AAAA,YACA,UAAA,EAAY,QAAA;AAAA,YACZ;AAAA;AAAA,SACF;AAAA,MAEJ,CAAA;AAAA,MACA,IAAA,EAAK,cAAA;AAAA,MACL,aAAA,EAAe,CAAC,EAAA,EAAI,UAAA,KAAe;AACjC,QAAA,OAAA,CAAQ,UAAU,CAAA;AAAA,MACpB,CAAA;AAAA,MACA,gBAAA,EAAkB,kBAAA;AAAA,MAClB,YAAA,EAAc;AAAA,QACZ,QAAA,EAAU,CAAC,CAAA,KAAkB;AAC3B,UAAA,MAAM,UAAU,CAAA,CAAE,aAAA;AAClB,UAAA,MAAM,gBACJ,IAAA,CAAK,GAAA;AAAA,YACH,OAAA,CAAQ,YAAA,GAAe,OAAA,CAAQ,YAAA,GAAe,OAAA,CAAQ;AAAA,WACxD,GAAI,CAAA;AAEN,UAAA,IAAI,aAAA,IAAiB,OAAO,MAAA,EAAQ;AAClC,YAAA,WAAA,CAAY,EAAE,KAAA,EAAO,KAAA,CAAM,OAAO,MAAA,EAAQ,KAAA,CAAM,QAAQ,CAAA;AAAA,UAC1D;AAAA,QACF,CAAA;AAAA,QACA,aAAA,EAAe;AAAA,OACjB;AAAA,MACA,UAAA,EAAY,EAAE,SAAA,EAAW,OAAA,CAAQ,KAAA,EAAM;AAAA,MACvC,cAAA,EAAgB,EAAE,SAAA,EAAW,OAAA,CAAQ,KAAA;AAAM;AAAA,GAC7C,EACF,CAAA;AAEJ;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backstage/plugin-catalog-react",
-  "version": "3.2.1",
+  "version": "3.2.2",
   "description": "A frontend library that helps other Backstage plugins interact with the catalog",
   "backstage": {
     "role": "web-library",