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]);