@backstage/plugin-search-react 1.8.3 → 1.8.4-next.0

package/CHANGELOG.md

@@ -1,13 +1,14 @@
 # @backstage/plugin-search-react
 
-## 1.8.3
+## 1.8.4-next.0
 
 ### Patch Changes
 
+- d311c84: Use Select from core-components and update Lifecycle filter to use Select instead checkboxes.
 - Updated dependencies
-  - @backstage/frontend-plugin-api@0.9.2
-  - @backstage/theme@0.6.2
-  - @backstage/core-components@0.16.1
+  - @backstage/frontend-plugin-api@0.9.3-next.0
+  - @backstage/theme@0.6.3-next.0
+  - @backstage/core-components@0.16.2-next.0
   - @backstage/core-plugin-api@1.10.1
   - @backstage/types@1.2.0
   - @backstage/version-bridge@1.0.10

package/dist/components/SearchFilter/SearchFilter.esm.js

@@ -1,13 +1,12 @@
-import React from 'react';
+import React, { useRef } from 'react';
+import { capitalize } from 'lodash';
+import { v4 } from 'uuid';
 import FormControl from '@material-ui/core/FormControl';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
-import InputLabel from '@material-ui/core/InputLabel';
 import Checkbox from '@material-ui/core/Checkbox';
-import Select from '@material-ui/core/Select';
-import MenuItem from '@material-ui/core/MenuItem';
 import FormLabel from '@material-ui/core/FormLabel';
-import Typography from '@material-ui/core/Typography';
 import { makeStyles } from '@material-ui/core/styles';
+import { Select } from '@backstage/core-components';
 import { useSearch } from '../../context/SearchContext.esm.js';
 import { AutocompleteFilter } from './SearchFilter.Autocomplete.esm.js';
 import { useDefaultFilterValue, useAsyncFilterValues } from './hooks.esm.js';
@@ -100,7 +99,6 @@ const SelectFilter = (props) => {
     values: givenValues,
     valuesDebounceMs
   } = props;
-  const classes = useStyles();
   useDefaultFilterValue(name, defaultValue);
   const asyncValues = typeof givenValues === "function" ? givenValues : void 0;
   const defaultValues = typeof givenValues === "function" ? void 0 : givenValues;
@@ -110,16 +108,16 @@ const SelectFilter = (props) => {
     defaultValues,
     valuesDebounceMs
   );
+  const allOptionValue = useRef(v4());
+  const allOption = { value: allOptionValue.current, label: "All" };
   const { filters, setFilters } = useSearch();
-  const handleChange = (e) => {
-    const {
-      target: { value }
-    } = e;
+  const handleChange = (value) => {
     setFilters((prevFilters) => {
       const { [name]: filter, ...others } = prevFilters;
-      return value ? { ...others, [name]: value } : others;
+      return value !== allOptionValue.current ? { ...others, [name]: value } : others;
     });
   };
+  const items = [allOption, ...values.map((value) => ({ value, label: value }))];
   return /* @__PURE__ */ React.createElement(
     FormControl,
     {
@@ -129,16 +127,14 @@ const SelectFilter = (props) => {
       fullWidth: true,
       "data-testid": "search-selectfilter-next"
     },
-    label ? /* @__PURE__ */ React.createElement(InputLabel, { className: classes.label, margin: "dense" }, label) : null,
     /* @__PURE__ */ React.createElement(
       Select,
       {
-        variant: "outlined",
-        value: filters[name] || "",
-        onChange: handleChange
-      },
-      /* @__PURE__ */ React.createElement(MenuItem, { value: "" }, /* @__PURE__ */ React.createElement("em", null, "All")),
-      values.map((value) => /* @__PURE__ */ React.createElement(MenuItem, { key: value, value }, /* @__PURE__ */ React.createElement(Typography, { variant: "inherit", noWrap: true }, value)))
+        label: label ?? capitalize(name),
+        selected: filters[name] || allOptionValue.current,
+        onChange: handleChange,
+        items
+      }
     )
   );
 };

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

@@ -1 +1 @@
-{"version":3,"file":"SearchFilter.esm.js","sources":["../../../src/components/SearchFilter/SearchFilter.tsx"],"sourcesContent":["/*\n * Copyright 2022 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, { ReactElement, ChangeEvent } from 'react';\nimport FormControl from '@material-ui/core/FormControl';\nimport FormControlLabel from '@material-ui/core/FormControlLabel';\nimport InputLabel from '@material-ui/core/InputLabel';\nimport Checkbox from '@material-ui/core/Checkbox';\nimport Select from '@material-ui/core/Select';\nimport MenuItem from '@material-ui/core/MenuItem';\nimport FormLabel from '@material-ui/core/FormLabel';\nimport Typography from '@material-ui/core/Typography';\nimport { makeStyles } from '@material-ui/core/styles';\n\nimport { useSearch } from '../../context';\nimport {\n  AutocompleteFilter,\n  SearchAutocompleteFilterProps,\n} from './SearchFilter.Autocomplete';\nimport { useAsyncFilterValues, useDefaultFilterValue } from './hooks';\n\nconst useStyles = makeStyles({\n  label: {\n    textTransform: 'capitalize',\n  },\n  checkboxWrapper: {\n    display: 'flex',\n    alignItems: 'center',\n    width: '100%',\n  },\n  textWrapper: {\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n  },\n});\n\n/**\n * @public\n */\nexport type SearchFilterComponentProps = {\n  className?: string;\n  name: string;\n  label?: string;\n  /**\n   * Either an array of values directly, or an async function to return a list\n   * of values to be used in the filter. In the autocomplete filter, the last\n   * input value is provided as an input to allow values to be filtered. This\n   * function is debounced and values cached.\n   */\n  values?: string[] | ((partial: string) => Promise<string[]>);\n  defaultValue?: string[] | string | null;\n  /**\n   * Debounce time in milliseconds, used when values is an async callback.\n   * Defaults to 250ms.\n   */\n  valuesDebounceMs?: number;\n};\n\n/**\n * @public\n */\nexport type SearchFilterWrapperProps = SearchFilterComponentProps & {\n  component: (props: SearchFilterComponentProps) => ReactElement;\n  debug?: boolean;\n};\n\n/**\n * @public\n */\nexport const CheckboxFilter = (props: SearchFilterComponentProps) => {\n  const {\n    className,\n    defaultValue,\n    label,\n    name,\n    values: givenValues = [],\n    valuesDebounceMs,\n  } = props;\n  const classes = useStyles();\n  const { filters, setFilters } = useSearch();\n  useDefaultFilterValue(name, defaultValue);\n  const asyncValues =\n    typeof givenValues === 'function' ? givenValues : undefined;\n  const defaultValues =\n    typeof givenValues === 'function' ? undefined : givenValues;\n  const { value: values = [], loading } = useAsyncFilterValues(\n    asyncValues,\n    '',\n    defaultValues,\n    valuesDebounceMs,\n  );\n\n  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n    const {\n      target: { value, checked },\n    } = e;\n\n    setFilters(prevFilters => {\n      const { [name]: filter, ...others } = prevFilters;\n      const rest = ((filter as string[]) || []).filter(i => i !== value);\n      const items = checked ? [...rest, value] : rest;\n      return items.length ? { ...others, [name]: items } : others;\n    });\n  };\n\n  return (\n    <FormControl\n      className={className}\n      disabled={loading}\n      fullWidth\n      data-testid=\"search-checkboxfilter-next\"\n    >\n      {label ? <FormLabel className={classes.label}>{label}</FormLabel> : null}\n      {values.map((value: string) => (\n        <FormControlLabel\n          key={value}\n          classes={{\n            root: classes.checkboxWrapper,\n            label: classes.textWrapper,\n          }}\n          label={value}\n          control={\n            <Checkbox\n              color=\"primary\"\n              inputProps={{ 'aria-labelledby': value }}\n              value={value}\n              name={value}\n              onChange={handleChange}\n              checked={((filters[name] as string[]) ?? []).includes(value)}\n            />\n          }\n        />\n      ))}\n    </FormControl>\n  );\n};\n\n/**\n * @public\n */\nexport const SelectFilter = (props: SearchFilterComponentProps) => {\n  const {\n    className,\n    defaultValue,\n    label,\n    name,\n    values: givenValues,\n    valuesDebounceMs,\n  } = props;\n  const classes = useStyles();\n  useDefaultFilterValue(name, defaultValue);\n  const asyncValues =\n    typeof givenValues === 'function' ? givenValues : undefined;\n  const defaultValues =\n    typeof givenValues === 'function' ? undefined : givenValues;\n  const { value: values = [], loading } = useAsyncFilterValues(\n    asyncValues,\n    '',\n    defaultValues,\n    valuesDebounceMs,\n  );\n  const { filters, setFilters } = useSearch();\n\n  const handleChange = (e: ChangeEvent<{ value: unknown }>) => {\n    const {\n      target: { value },\n    } = e;\n\n    setFilters(prevFilters => {\n      const { [name]: filter, ...others } = prevFilters;\n      return value ? { ...others, [name]: value as string } : others;\n    });\n  };\n\n  return (\n    <FormControl\n      disabled={loading}\n      className={className}\n      variant=\"filled\"\n      fullWidth\n      data-testid=\"search-selectfilter-next\"\n    >\n      {label ? (\n        <InputLabel className={classes.label} margin=\"dense\">\n          {label}\n        </InputLabel>\n      ) : null}\n      <Select\n        variant=\"outlined\"\n        value={filters[name] || ''}\n        onChange={handleChange}\n      >\n        <MenuItem value=\"\">\n          <em>All</em>\n        </MenuItem>\n        {values.map((value: string) => (\n          <MenuItem key={value} value={value}>\n            <Typography variant=\"inherit\" noWrap>\n              {value}\n            </Typography>\n          </MenuItem>\n        ))}\n      </Select>\n    </FormControl>\n  );\n};\n\n/**\n * @public\n */\nconst SearchFilter = (props: SearchFilterWrapperProps) => {\n  const { component: Element, ...elementProps } = props;\n  return <Element {...elementProps} />;\n};\n\nSearchFilter.Checkbox = (\n  props: Omit<SearchFilterWrapperProps, 'component'> &\n    SearchFilterComponentProps,\n) => <SearchFilter {...props} component={CheckboxFilter} />;\n\nSearchFilter.Select = (\n  props: Omit<SearchFilterWrapperProps, 'component'> &\n    SearchFilterComponentProps,\n) => <SearchFilter {...props} component={SelectFilter} />;\n\n/**\n * A control surface for a given filter field name, rendered as an autocomplete\n * textfield. A hard-coded list of values may be provided, or an async function\n * which returns values may be provided instead.\n *\n * @public\n */\nSearchFilter.Autocomplete = (props: SearchAutocompleteFilterProps) => (\n  <SearchFilter {...props} component={AutocompleteFilter} />\n);\n\nexport { SearchFilter };\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"SearchFilter.esm.js","sources":["../../../src/components/SearchFilter/SearchFilter.tsx"],"sourcesContent":["/*\n * Copyright 2022 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, { ReactElement, ChangeEvent, useRef } from 'react';\nimport { capitalize } from 'lodash';\nimport { v4 as uuid } from 'uuid';\nimport FormControl from '@material-ui/core/FormControl';\nimport FormControlLabel from '@material-ui/core/FormControlLabel';\nimport Checkbox from '@material-ui/core/Checkbox';\nimport FormLabel from '@material-ui/core/FormLabel';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { Select, SelectedItems } from '@backstage/core-components';\n\nimport { useSearch } from '../../context';\nimport {\n  AutocompleteFilter,\n  SearchAutocompleteFilterProps,\n} from './SearchFilter.Autocomplete';\nimport { useAsyncFilterValues, useDefaultFilterValue } from './hooks';\n\nconst useStyles = makeStyles({\n  label: {\n    textTransform: 'capitalize',\n  },\n  checkboxWrapper: {\n    display: 'flex',\n    alignItems: 'center',\n    width: '100%',\n  },\n  textWrapper: {\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n  },\n});\n\n/**\n * @public\n */\nexport type SearchFilterComponentProps = {\n  className?: string;\n  name: string;\n  label?: string;\n  /**\n   * Either an array of values directly, or an async function to return a list\n   * of values to be used in the filter. In the autocomplete filter, the last\n   * input value is provided as an input to allow values to be filtered. This\n   * function is debounced and values cached.\n   */\n  values?: string[] | ((partial: string) => Promise<string[]>);\n  defaultValue?: string[] | string | null;\n  /**\n   * Debounce time in milliseconds, used when values is an async callback.\n   * Defaults to 250ms.\n   */\n  valuesDebounceMs?: number;\n};\n\n/**\n * @public\n */\nexport type SearchFilterWrapperProps = SearchFilterComponentProps & {\n  component: (props: SearchFilterComponentProps) => ReactElement;\n  debug?: boolean;\n};\n\n/**\n * @public\n */\nexport const CheckboxFilter = (props: SearchFilterComponentProps) => {\n  const {\n    className,\n    defaultValue,\n    label,\n    name,\n    values: givenValues = [],\n    valuesDebounceMs,\n  } = props;\n  const classes = useStyles();\n  const { filters, setFilters } = useSearch();\n  useDefaultFilterValue(name, defaultValue);\n  const asyncValues =\n    typeof givenValues === 'function' ? givenValues : undefined;\n  const defaultValues =\n    typeof givenValues === 'function' ? undefined : givenValues;\n  const { value: values = [], loading } = useAsyncFilterValues(\n    asyncValues,\n    '',\n    defaultValues,\n    valuesDebounceMs,\n  );\n\n  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n    const {\n      target: { value, checked },\n    } = e;\n\n    setFilters(prevFilters => {\n      const { [name]: filter, ...others } = prevFilters;\n      const rest = ((filter as string[]) || []).filter(i => i !== value);\n      const items = checked ? [...rest, value] : rest;\n      return items.length ? { ...others, [name]: items } : others;\n    });\n  };\n\n  return (\n    <FormControl\n      className={className}\n      disabled={loading}\n      fullWidth\n      data-testid=\"search-checkboxfilter-next\"\n    >\n      {label ? <FormLabel className={classes.label}>{label}</FormLabel> : null}\n      {values.map((value: string) => (\n        <FormControlLabel\n          key={value}\n          classes={{\n            root: classes.checkboxWrapper,\n            label: classes.textWrapper,\n          }}\n          label={value}\n          control={\n            <Checkbox\n              color=\"primary\"\n              inputProps={{ 'aria-labelledby': value }}\n              value={value}\n              name={value}\n              onChange={handleChange}\n              checked={((filters[name] as string[]) ?? []).includes(value)}\n            />\n          }\n        />\n      ))}\n    </FormControl>\n  );\n};\n\n/**\n * @public\n */\nexport const SelectFilter = (props: SearchFilterComponentProps) => {\n  const {\n    className,\n    defaultValue,\n    label,\n    name,\n    values: givenValues,\n    valuesDebounceMs,\n  } = props;\n  useDefaultFilterValue(name, defaultValue);\n  const asyncValues =\n    typeof givenValues === 'function' ? givenValues : undefined;\n  const defaultValues =\n    typeof givenValues === 'function' ? undefined : givenValues;\n  const { value: values = [], loading } = useAsyncFilterValues(\n    asyncValues,\n    '',\n    defaultValues,\n    valuesDebounceMs,\n  );\n  const allOptionValue = useRef(uuid());\n  const allOption = { value: allOptionValue.current, label: 'All' };\n  const { filters, setFilters } = useSearch();\n\n  const handleChange = (value: SelectedItems) => {\n    setFilters(prevFilters => {\n      const { [name]: filter, ...others } = prevFilters;\n      return value !== allOptionValue.current\n        ? { ...others, [name]: value as string }\n        : others;\n    });\n  };\n\n  const items = [allOption, ...values.map(value => ({ value, label: value }))];\n\n  return (\n    <FormControl\n      disabled={loading}\n      className={className}\n      variant=\"filled\"\n      fullWidth\n      data-testid=\"search-selectfilter-next\"\n    >\n      <Select\n        label={label ?? capitalize(name)}\n        selected={(filters[name] || allOptionValue.current) as string}\n        onChange={handleChange}\n        items={items}\n      />\n    </FormControl>\n  );\n};\n\n/**\n * @public\n */\nconst SearchFilter = (props: SearchFilterWrapperProps) => {\n  const { component: Element, ...elementProps } = props;\n  return <Element {...elementProps} />;\n};\n\nSearchFilter.Checkbox = (\n  props: Omit<SearchFilterWrapperProps, 'component'> &\n    SearchFilterComponentProps,\n) => <SearchFilter {...props} component={CheckboxFilter} />;\n\nSearchFilter.Select = (\n  props: Omit<SearchFilterWrapperProps, 'component'> &\n    SearchFilterComponentProps,\n) => <SearchFilter {...props} component={SelectFilter} />;\n\n/**\n * A control surface for a given filter field name, rendered as an autocomplete\n * textfield. A hard-coded list of values may be provided, or an async function\n * which returns values may be provided instead.\n *\n * @public\n */\nSearchFilter.Autocomplete = (props: SearchAutocompleteFilterProps) => (\n  <SearchFilter {...props} component={AutocompleteFilter} />\n);\n\nexport { SearchFilter };\n"],"names":["uuid"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backstage/plugin-search-react",
-  "version": "1.8.3",
+  "version": "1.8.4-next.0",
   "backstage": {
     "role": "web-library",
     "pluginId": "search",
@@ -64,26 +64,27 @@
     "test": "backstage-cli package test"
   },
   "dependencies": {
-    "@backstage/core-components": "^0.16.1",
-    "@backstage/core-plugin-api": "^1.10.1",
-    "@backstage/frontend-plugin-api": "^0.9.2",
-    "@backstage/plugin-search-common": "^1.2.15",
-    "@backstage/theme": "^0.6.2",
-    "@backstage/types": "^1.2.0",
-    "@backstage/version-bridge": "^1.0.10",
+    "@backstage/core-components": "0.16.2-next.0",
+    "@backstage/core-plugin-api": "1.10.1",
+    "@backstage/frontend-plugin-api": "0.9.3-next.0",
+    "@backstage/plugin-search-common": "1.2.15",
+    "@backstage/theme": "0.6.3-next.0",
+    "@backstage/types": "1.2.0",
+    "@backstage/version-bridge": "1.0.10",
     "@material-ui/core": "^4.12.2",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "4.0.0-alpha.61",
     "lodash": "^4.17.21",
     "qs": "^6.9.4",
-    "react-use": "^17.3.2"
+    "react-use": "^17.3.2",
+    "uuid": "^11.0.2"
   },
   "devDependencies": {
-    "@backstage/cli": "^0.29.2",
-    "@backstage/core-app-api": "^1.15.2",
-    "@backstage/frontend-app-api": "^0.10.2",
-    "@backstage/frontend-test-utils": "^0.2.3",
-    "@backstage/test-utils": "^1.7.2",
+    "@backstage/cli": "0.29.3-next.0",
+    "@backstage/core-app-api": "1.15.3-next.0",
+    "@backstage/frontend-app-api": "0.10.3-next.0",
+    "@backstage/frontend-test-utils": "0.2.4-next.0",
+    "@backstage/test-utils": "1.7.3-next.0",
     "@testing-library/dom": "^10.0.0",
     "@testing-library/jest-dom": "^6.0.0",
     "@testing-library/react": "^16.0.0",