diff --git a/plugins/catalog-react/src/components/EntityNamespacePicker/EntityNamespacePicker.tsx b/plugins/catalog-react/src/components/EntityNamespacePicker/EntityNamespacePicker.tsx index 30df7fc175..98bcc610b2 100644 --- a/plugins/catalog-react/src/components/EntityNamespacePicker/EntityNamespacePicker.tsx +++ b/plugins/catalog-react/src/components/EntityNamespacePicker/EntityNamespacePicker.tsx @@ -14,22 +14,11 @@ * limitations under the License. */ -import { Entity } from '@backstage/catalog-model'; -import { - Box, - Checkbox, - FormControlLabel, - makeStyles, - TextField, - Typography, -} from '@material-ui/core'; -import CheckBoxIcon from '@material-ui/icons/CheckBox'; -import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank'; -import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; -import { Autocomplete } from '@material-ui/lab'; -import React, { useEffect, useMemo, useState } from 'react'; -import { useEntityList } from '../../hooks/useEntityListProvider'; +import { makeStyles } from '@material-ui/core'; + +import React from 'react'; import { EntityNamespaceFilter } from '../../filters'; +import { EntityAutocompletePicker } from '../EntityAutocompletePicker'; /** @public */ export type CatalogReactEntityNamespacePickerClassKey = 'input'; @@ -43,97 +32,16 @@ const useStyles = makeStyles( }, ); -const icon = ; -const checkedIcon = ; - /** @public */ -export const EntityNamespacePicker = (props: { initialFilter?: string[] }) => { - const { initialFilter = [] } = props; +export const EntityNamespacePicker = () => { const classes = useStyles(); - const { - updateFilters, - backendEntities, - filters, - queryParameters: { namespace: namespaceParameter }, - } = useEntityList(); - - const queryParamNamespace = useMemo( - () => [namespaceParameter].flat().filter(Boolean) as string[], - [namespaceParameter], - ); - - const [selectedNamespace, setSelectedNamespace] = useState( - queryParamNamespace.length - ? queryParamNamespace - : filters.namespace?.values ?? initialFilter, - ); - - // Set selected namespace on query parameter updates; this happens at initial page load and from - // external updates to the page location. - useEffect(() => { - if (queryParamNamespace.length) { - setSelectedNamespace(queryParamNamespace); - } - }, [queryParamNamespace]); - - const availableNamespace = useMemo( - () => - [ - ...new Set( - backendEntities - .map((e: Entity) => e.metadata.namespace) - .filter(Boolean) as string[], - ), - ].sort(), - [backendEntities], - ); - - useEffect(() => { - updateFilters({ - namespace: - selectedNamespace.length && availableNamespace.length - ? new EntityNamespaceFilter(selectedNamespace) - : undefined, - }); - }, [selectedNamespace, updateFilters, availableNamespace]); - - if (!availableNamespace.length) return null; - - if (availableNamespace.every(namespace => namespace === 'default')) - return null; - return ( - - - Namespace - setSelectedNamespace(value)} - renderOption={(option, { selected }) => ( - - } - label={option} - /> - )} - size="small" - popupIcon={} - renderInput={params => ( - - )} - /> - - + ); };