Merge pull request #10581 from backstage/timbonicus/destructure-query-params

Destructure query params in pickers

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({

plugins/catalog-react/src/components/EntityLifecyclePicker/EntityLifecyclePicker.tsx

@@ -49,12 +49,16 @@ const checkedIcon = <CheckBoxIcon fontSize="small" />;
 /** @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(

plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx

@@ -51,12 +51,16 @@ const checkedIcon = <CheckBoxIcon fontSize="small" />;
 /** @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(

plugins/catalog-react/src/components/EntityTagPicker/EntityTagPicker.tsx

@@ -51,7 +51,11 @@ const checkedIcon = <CheckBoxIcon fontSize="small" />;
 /** @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(

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(

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<string[]>([]);
   const kind = useMemo(() => kindFilter?.value, [kindFilter]);