@backstage/plugin-catalog-react 1.21.3 → 1.21.4-next.1

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # @backstage/plugin-catalog-react
 
+## 1.21.4-next.1
+
+### Patch Changes
+
+- 6d39141: Fixed an issue where `EntityOwnerPicker` failed to filter options when the input text contained uppercase characters.
+- Updated dependencies
+  - @backstage/core-components@0.18.4-next.1
+
+## 1.21.4-next.0
+
+### Patch Changes
+
+- d02db50: Remove unnecessary use of `compatWrapper` and `convertLegacyRouteRef`(s) for the new frontend system.
+- Updated dependencies
+  - @backstage/frontend-plugin-api@0.13.2-next.0
+  - @backstage/core-plugin-api@1.12.1-next.0
+  - @backstage/core-compat-api@0.5.5-next.0
+  - @backstage/frontend-test-utils@0.4.2-next.0
+  - @backstage/integration-react@1.2.13-next.0
+  - @backstage/core-components@0.18.4-next.0
+  - @backstage/plugin-permission-react@0.4.39-next.0
+  - @backstage/catalog-client@1.12.1
+  - @backstage/catalog-model@1.7.6
+  - @backstage/errors@1.2.7
+  - @backstage/types@1.2.2
+  - @backstage/version-bridge@1.0.11
+  - @backstage/plugin-catalog-common@1.1.7
+  - @backstage/plugin-permission-common@0.9.3
+
 ## 1.21.3
 
 ### Patch Changes

package/dist/alpha.d.ts

@@ -400,8 +400,8 @@ declare const catalogReactTranslationRef: _backstage_core_plugin_api_alpha.Trans
     readonly "entityTableColumnTitle.description": "Description";
     readonly "entityTableColumnTitle.domain": "Domain";
     readonly "entityTableColumnTitle.system": "System";
-    readonly "entityTableColumnTitle.tags": "Tags";
     readonly "entityTableColumnTitle.namespace": "Namespace";
+    readonly "entityTableColumnTitle.tags": "Tags";
     readonly "entityTableColumnTitle.lifecycle": "Lifecycle";
     readonly "entityTableColumnTitle.owner": "Owner";
     readonly "entityTableColumnTitle.targets": "Targets";

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

@@ -98,7 +98,11 @@ const EntityOwnerPicker = (props) => {
     mode,
     initialSelectedOwnersRefs: selectedOwners
   });
-  useDebouncedEffect(() => handleFetch({ text }), [text, handleFetch], 250);
+  useDebouncedEffect(
+    () => handleFetch({ text: text.toLocaleLowerCase("en-US") }),
+    [text, handleFetch],
+    250
+  );
   const availableOwners = value?.items || [];
   useEffect(() => {
     if (queryParamOwners.length) {

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 { humanizeEntity, humanizeEntityRef } from '../EntityRefLink/humanize';\nimport { useFetchEntities } from './useFetchEntities';\nimport { withStyles } from '@material-ui/core/styles';\nimport { useEntityPresentation } from '../../apis';\nimport { catalogReactTranslationRef } from '../../translation';\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: { entity: Entity; isSelected: boolean }) {\n  const classes = useStyles();\n  const isGroup = props.entity.kind.toLocaleLowerCase('en-US') === 'group';\n  const { primaryTitle: title } = useEntityPresentation(props.entity);\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 {\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(() => handleFetch({ text }), [text, handleFetch], 250);\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          const entity =\n            typeof o === 'string'\n              ? cache.getEntity(o) ||\n                parseEntityRef(o, {\n                  defaultKind: 'group',\n                  defaultNamespace: 'default',\n                })\n              : o;\n          return humanizeEntity(entity, humanizeEntityRef(entity));\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 <RenderOptionLabel entity={entity} isSelected={selected} />;\n        }}\n        name=\"owner-picker\"\n        onInputChange={(_e, inputValue) => {\n          setText(inputValue);\n        }}\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 { humanizeEntity, humanizeEntityRef } from '../EntityRefLink/humanize';\nimport { useFetchEntities } from './useFetchEntities';\nimport { withStyles } from '@material-ui/core/styles';\nimport { useEntityPresentation } from '../../apis';\nimport { catalogReactTranslationRef } from '../../translation';\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: { entity: Entity; isSelected: boolean }) {\n  const classes = useStyles();\n  const isGroup = props.entity.kind.toLocaleLowerCase('en-US') === 'group';\n  const { primaryTitle: title } = useEntityPresentation(props.entity);\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 {\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          const entity =\n            typeof o === 'string'\n              ? cache.getEntity(o) ||\n                parseEntityRef(o, {\n                  defaultKind: 'group',\n                  defaultNamespace: 'default',\n                })\n              : o;\n          return humanizeEntity(entity, humanizeEntityRef(entity));\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 <RenderOptionLabel entity={entity} isSelected={selected} />;\n        }}\n        name=\"owner-picker\"\n        onInputChange={(_e, inputValue) => {\n          setText(inputValue);\n        }}\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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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backstage/plugin-catalog-react",
-  "version": "1.21.3",
+  "version": "1.21.4-next.1",
   "description": "A frontend library that helps other Backstage plugins interact with the catalog",
   "backstage": {
     "role": "web-library",
@@ -73,20 +73,20 @@
     "test": "backstage-cli package test"
   },
   "dependencies": {
-    "@backstage/catalog-client": "^1.12.1",
-    "@backstage/catalog-model": "^1.7.6",
-    "@backstage/core-compat-api": "^0.5.4",
-    "@backstage/core-components": "^0.18.3",
-    "@backstage/core-plugin-api": "^1.12.0",
-    "@backstage/errors": "^1.2.7",
-    "@backstage/frontend-plugin-api": "^0.13.0",
-    "@backstage/frontend-test-utils": "^0.4.1",
-    "@backstage/integration-react": "^1.2.12",
-    "@backstage/plugin-catalog-common": "^1.1.7",
-    "@backstage/plugin-permission-common": "^0.9.3",
-    "@backstage/plugin-permission-react": "^0.4.38",
-    "@backstage/types": "^1.2.2",
-    "@backstage/version-bridge": "^1.0.11",
+    "@backstage/catalog-client": "1.12.1",
+    "@backstage/catalog-model": "1.7.6",
+    "@backstage/core-compat-api": "0.5.5-next.0",
+    "@backstage/core-components": "0.18.4-next.1",
+    "@backstage/core-plugin-api": "1.12.1-next.0",
+    "@backstage/errors": "1.2.7",
+    "@backstage/frontend-plugin-api": "0.13.2-next.0",
+    "@backstage/frontend-test-utils": "0.4.2-next.0",
+    "@backstage/integration-react": "1.2.13-next.0",
+    "@backstage/plugin-catalog-common": "1.1.7",
+    "@backstage/plugin-permission-common": "0.9.3",
+    "@backstage/plugin-permission-react": "0.4.39-next.0",
+    "@backstage/types": "1.2.2",
+    "@backstage/version-bridge": "1.0.11",
     "@material-ui/core": "^4.12.2",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "4.0.0-alpha.61",
@@ -100,11 +100,11 @@
     "zen-observable": "^0.10.0"
   },
   "devDependencies": {
-    "@backstage/cli": "^0.34.5",
-    "@backstage/core-app-api": "^1.19.2",
-    "@backstage/plugin-catalog-common": "^1.1.7",
-    "@backstage/plugin-scaffolder-common": "^1.7.3",
-    "@backstage/test-utils": "^1.7.13",
+    "@backstage/cli": "0.34.6-next.1",
+    "@backstage/core-app-api": "1.19.3-next.0",
+    "@backstage/plugin-catalog-common": "1.1.7",
+    "@backstage/plugin-scaffolder-common": "1.7.4-next.0",
+    "@backstage/test-utils": "1.7.14-next.0",
     "@testing-library/dom": "^10.0.0",
     "@testing-library/jest-dom": "^6.0.0",
     "@testing-library/react": "^16.0.0",