diff --git a/.changeset/khaki-cougars-lick.md b/.changeset/khaki-cougars-lick.md new file mode 100644 index 0000000000..1723cd0636 --- /dev/null +++ b/.changeset/khaki-cougars-lick.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-catalog-react': patch +--- + +Changed catalog filter components to only pay attention to query parameters relevant to the component. diff --git a/plugins/catalog-react/src/components/EntityKindPicker/EntityKindPicker.tsx b/plugins/catalog-react/src/components/EntityKindPicker/EntityKindPicker.tsx index 1891f83df7..4cfd141509 100644 --- a/plugins/catalog-react/src/components/EntityKindPicker/EntityKindPicker.tsx +++ b/plugins/catalog-react/src/components/EntityKindPicker/EntityKindPicker.tsx @@ -33,10 +33,11 @@ export interface EntityKindPickerProps { export const EntityKindPicker = (props: EntityKindPickerProps) => { const { initialFilter, hidden } = props; - const { updateFilters, queryParameters } = useEntityList(); - const [selectedKind] = useState( - [queryParameters.kind].flat()[0] ?? initialFilter, - ); + const { + updateFilters, + queryParameters: { kind: kindParameter }, + } = useEntityList(); + const [selectedKind] = useState([kindParameter].flat()[0] ?? initialFilter); useEffect(() => { updateFilters({ diff --git a/plugins/catalog-react/src/components/EntityLifecyclePicker/EntityLifecyclePicker.tsx b/plugins/catalog-react/src/components/EntityLifecyclePicker/EntityLifecyclePicker.tsx index a05914fd6d..994cf4b145 100644 --- a/plugins/catalog-react/src/components/EntityLifecyclePicker/EntityLifecyclePicker.tsx +++ b/plugins/catalog-react/src/components/EntityLifecyclePicker/EntityLifecyclePicker.tsx @@ -49,12 +49,16 @@ const checkedIcon = ; /** @public */ export const EntityLifecyclePicker = () => { const classes = useStyles(); - const { updateFilters, backendEntities, filters, queryParameters } = - useEntityList(); + const { + updateFilters, + backendEntities, + filters, + queryParameters: { lifecycles: lifecyclesParameter }, + } = useEntityList(); const queryParamLifecycles = useMemo( - () => [queryParameters.lifecycles].flat().filter(Boolean) as string[], - [queryParameters], + () => [lifecyclesParameter].flat().filter(Boolean) as string[], + [lifecyclesParameter], ); const [selectedLifecycles, setSelectedLifecycles] = useState( diff --git a/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx b/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx index ec2c8126e5..a669f95132 100644 --- a/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx +++ b/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx @@ -51,12 +51,16 @@ const checkedIcon = ; /** @public */ export const EntityOwnerPicker = () => { const classes = useStyles(); - const { updateFilters, backendEntities, filters, queryParameters } = - useEntityList(); + const { + updateFilters, + backendEntities, + filters, + queryParameters: { owners: ownersParameter }, + } = useEntityList(); const queryParamOwners = useMemo( - () => [queryParameters.owners].flat().filter(Boolean) as string[], - [queryParameters], + () => [ownersParameter].flat().filter(Boolean) as string[], + [ownersParameter], ); const [selectedOwners, setSelectedOwners] = useState( diff --git a/plugins/catalog-react/src/components/EntityTagPicker/EntityTagPicker.tsx b/plugins/catalog-react/src/components/EntityTagPicker/EntityTagPicker.tsx index ddb70c6d31..f943ee5289 100644 --- a/plugins/catalog-react/src/components/EntityTagPicker/EntityTagPicker.tsx +++ b/plugins/catalog-react/src/components/EntityTagPicker/EntityTagPicker.tsx @@ -51,7 +51,11 @@ const checkedIcon = ; /** @public */ export const EntityTagPicker = () => { const classes = useStyles(); - const { updateFilters, filters, queryParameters } = useEntityList(); + const { + updateFilters, + filters, + queryParameters: { tags: tagsParameter }, + } = useEntityList(); const catalogApi = useApi(catalogApiRef); const { value: availableTags } = useAsync(async () => { @@ -65,8 +69,8 @@ export const EntityTagPicker = () => { }, [filters.kind]); const queryParamTags = useMemo( - () => [queryParameters.tags].flat().filter(Boolean) as string[], - [queryParameters], + () => [tagsParameter].flat().filter(Boolean) as string[], + [tagsParameter], ); const [selectedTags, setSelectedTags] = useState( diff --git a/plugins/catalog-react/src/components/UserListPicker/UserListPicker.tsx b/plugins/catalog-react/src/components/UserListPicker/UserListPicker.tsx index d281bb31a8..843852085b 100644 --- a/plugins/catalog-react/src/components/UserListPicker/UserListPicker.tsx +++ b/plugins/catalog-react/src/components/UserListPicker/UserListPicker.tsx @@ -134,7 +134,7 @@ export const UserListPicker = (props: UserListPickerProps) => { filters, updateFilters, backendEntities, - queryParameters, + queryParameters: { kind: kindParameter, user: userParameter }, loading: loadingBackendEntities, } = useEntityList(); @@ -146,7 +146,7 @@ export const UserListPicker = (props: UserListPickerProps) => { ...filterGroup, items: filterGroup.items.filter(({ id }) => // TODO: avoid hardcoding kinds here - ['group', 'user'].some(kind => kind === queryParameters.kind) + ['group', 'user'].some(kind => kind === kindParameter) ? userAndGroupFilterIds.includes(id) : !availableFilters || availableFilters.includes(id), ), @@ -170,8 +170,8 @@ export const UserListPicker = (props: UserListPickerProps) => { ); const queryParamUserFilter = useMemo( - () => [queryParameters.user].flat()[0], - [queryParameters], + () => [userParameter].flat()[0], + [userParameter], ); const [selectedUserFilter, setSelectedUserFilter] = useState( diff --git a/plugins/catalog-react/src/hooks/useEntityTypeFilter.tsx b/plugins/catalog-react/src/hooks/useEntityTypeFilter.tsx index 9971536138..8e8c1b24d7 100644 --- a/plugins/catalog-react/src/hooks/useEntityTypeFilter.tsx +++ b/plugins/catalog-react/src/hooks/useEntityTypeFilter.tsx @@ -38,26 +38,28 @@ export function useEntityTypeFilter(): { const catalogApi = useApi(catalogApiRef); const { filters: { kind: kindFilter, type: typeFilter }, - queryParameters, + queryParameters: { type: typeParameter }, updateFilters, } = useEntityList(); - const queryParamTypes = useMemo( - () => [queryParameters.type].flat().filter(Boolean) as string[], - [queryParameters], + const flattenedQueryTypes = useMemo( + () => [typeParameter].flat().filter(Boolean) as string[], + [typeParameter], ); const [selectedTypes, setSelectedTypes] = useState( - queryParamTypes.length ? queryParamTypes : typeFilter?.getTypes() ?? [], + flattenedQueryTypes.length + ? flattenedQueryTypes + : typeFilter?.getTypes() ?? [], ); // Set selected types on query parameter updates; this happens at initial page load and from // external updates to the page location. useEffect(() => { - if (queryParamTypes.length) { - setSelectedTypes(queryParamTypes); + if (flattenedQueryTypes.length) { + setSelectedTypes(flattenedQueryTypes); } - }, [queryParamTypes]); + }, [flattenedQueryTypes]); const [availableTypes, setAvailableTypes] = useState([]); const kind = useMemo(() => kindFilter?.value, [kindFilter]);