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

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @backstage/plugin-catalog-react
 
+## 1.14.3-next.1
+
+### Patch Changes
+
+- d97a2cd: Fixed an issue causing the `EntityOwnerPicker` to reset scrolling when more elements are loaded.
+- Updated dependencies
+  - @backstage/catalog-client@1.9.0-next.1
+  - @backstage/core-components@0.16.2-next.1
+  - @backstage/catalog-model@1.7.1
+  - @backstage/core-compat-api@0.3.4-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/types@1.2.0
+  - @backstage/version-bridge@1.0.10
+  - @backstage/plugin-catalog-common@1.1.1
+  - @backstage/plugin-permission-common@0.8.2
+  - @backstage/plugin-permission-react@0.4.28
+
 ## 1.14.3-next.0
 
 ### Patch Changes

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

@@ -121,7 +121,7 @@ const EntityOwnerPicker = (props) => {
   return /* @__PURE__ */ React.createElement(Box, { className: classes.root, pb: 1, pt: 1 }, /* @__PURE__ */ React.createElement(Typography, { className: classes.label, variant: "button", component: "label" }, t("entityOwnerPicker.title"), /* @__PURE__ */ React.createElement(
     Autocomplete,
     {
-      PopperComponent: (popperProps) => /* @__PURE__ */ React.createElement("div", { ...popperProps }, popperProps.children),
+      PopperComponent: Popper,
       multiple: true,
       disableCloseOnSelect: true,
       loading,
@@ -184,6 +184,9 @@ const EntityOwnerPicker = (props) => {
     }
   )));
 };
+function Popper({ children }) {
+  return /* @__PURE__ */ React.createElement("div", null, children);
+}
 
 export { EntityOwnerPicker };
 //# sourceMappingURL=EntityOwnerPicker.esm.js.map

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 TextField from '@material-ui/core/TextField';\nimport Typography from '@material-ui/core/Typography';\nimport Tooltip from '@material-ui/core/Tooltip';\nimport { createStyles, makeStyles, Theme } from '@material-ui/core/styles';\nimport CheckBoxIcon from '@material-ui/icons/CheckBox';\nimport CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';\nimport ExpandMoreIcon from '@material-ui/icons/ExpandMore';\nimport Autocomplete from '@material-ui/lab/Autocomplete';\nimport React, { useEffect, useMemo, useState, ReactNode } 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';\n\n/** @public */\nexport type CatalogReactEntityOwnerPickerClassKey = 'input';\n\nconst useStyles = makeStyles(\n  (theme: Theme) =>\n    createStyles({\n      root: {},\n      label: {\n        textTransform: 'none',\n        fontWeight: 'bold',\n      },\n      input: {\n        backgroundColor: theme.palette.background.paper,\n      },\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(\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      <Typography className={classes.label} variant=\"button\" component=\"label\">\n        {t('entityOwnerPicker.title')}\n        <Autocomplete\n          PopperComponent={popperProps => (\n            <div {...popperProps}>{popperProps.children as ReactNode}</div>\n          )}\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          size=\"small\"\n          popupIcon={<ExpandMoreIcon data-testid=\"owner-picker-expand\" />}\n          renderInput={params => (\n            <TextField\n              {...params}\n              className={classes.input}\n              onChange={e => {\n                setText(e.currentTarget.value);\n              }}\n              variant=\"outlined\"\n            />\n          )}\n          ListboxProps={{\n            onScroll: (e: React.MouseEvent) => {\n              const element = e.currentTarget;\n              const hasReachedEnd =\n                Math.abs(\n                  element.scrollHeight -\n                    element.clientHeight -\n                    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        />\n      </Typography>\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 TextField from '@material-ui/core/TextField';\nimport Typography from '@material-ui/core/Typography';\nimport Tooltip from '@material-ui/core/Tooltip';\nimport { createStyles, makeStyles, Theme } from '@material-ui/core/styles';\nimport CheckBoxIcon from '@material-ui/icons/CheckBox';\nimport CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';\nimport ExpandMoreIcon from '@material-ui/icons/ExpandMore';\nimport Autocomplete from '@material-ui/lab/Autocomplete';\nimport React, { useEffect, useMemo, useState, ReactNode } 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 { PopperProps } from '@material-ui/core/Popper';\n\n/** @public */\nexport type CatalogReactEntityOwnerPickerClassKey = 'input';\n\nconst useStyles = makeStyles(\n  (theme: Theme) =>\n    createStyles({\n      root: {},\n      label: {\n        textTransform: 'none',\n        fontWeight: 'bold',\n      },\n      input: {\n        backgroundColor: theme.palette.background.paper,\n      },\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(\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      <Typography className={classes.label} variant=\"button\" component=\"label\">\n        {t('entityOwnerPicker.title')}\n        <Autocomplete\n          PopperComponent={Popper}\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          size=\"small\"\n          popupIcon={<ExpandMoreIcon data-testid=\"owner-picker-expand\" />}\n          renderInput={params => (\n            <TextField\n              {...params}\n              className={classes.input}\n              onChange={e => {\n                setText(e.currentTarget.value);\n              }}\n              variant=\"outlined\"\n            />\n          )}\n          ListboxProps={{\n            onScroll: (e: React.MouseEvent) => {\n              const element = e.currentTarget;\n              const hasReachedEnd =\n                Math.abs(\n                  element.scrollHeight -\n                    element.clientHeight -\n                    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        />\n      </Typography>\n    </Box>\n  );\n};\n\nfunction Popper({ children }: PopperProps) {\n  return <div>{children as ReactNode}</div>;\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.0",
+  "version": "1.14.3-next.1",
   "description": "A frontend library that helps other Backstage plugins interact with the catalog",
   "backstage": {
     "role": "web-library",
@@ -73,14 +73,14 @@
     "test": "backstage-cli package test"
   },
   "dependencies": {
-    "@backstage/catalog-client": "1.8.1-next.0",
+    "@backstage/catalog-client": "1.9.0-next.1",
     "@backstage/catalog-model": "1.7.1",
-    "@backstage/core-compat-api": "0.3.4-next.0",
-    "@backstage/core-components": "0.16.2-next.0",
+    "@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.0",
-    "@backstage/frontend-test-utils": "0.2.4-next.0",
+    "@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",
@@ -100,7 +100,7 @@
     "zen-observable": "^0.10.0"
   },
   "devDependencies": {
-    "@backstage/cli": "0.29.3-next.0",
+    "@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",