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 => (
-
- )}
- />
-
-
+
);
};