[ui] Fix code location page status filters (#25229)

## Summary & Motivation

Fix `useCodeLocationPageFilters` when an invalid query param is used.

- If `status` is a non-array string, discard it. (This is the bug that
was reported, where perhaps the user just modified the URL manually?)
- Use a query parameter array instead of JSON encoding.

## How I Tested These Changes

View code location list, filter on status. Verify that it works
correctly and updates the URL accordingly, e.g.
`?status%5B%5D=Loaded&status%5B%5D=Failed`.

Modify the parameter manually to be `?status=failed`, verify that the
page loads correctly with no JS errors, and ignores the invalid
parameter.

## Changelog

[ui] Fix an issue in the code locations page where invalid query
parameters could crash the page.

js_modules/dagster-ui/packages/ui-core/src/instance/useCodeLocationPageFilters.tsx

@@ -22,13 +22,12 @@ export const useCodeLocationPageFilters = () => {
   const queryString = searchValue.toLocaleLowerCase();
 
   const [filters, setFilters] = useQueryPersistedState<CodeLocationFilters>({
-    encode: ({status}) => ({
-      status: status?.length ? JSON.stringify(status) : undefined,
-    }),
+    encode: ({status}) => {
+      return {status: Array.isArray(status) ? status : undefined};
+    },
     decode: (qs) => {
-      return {
-        status: qs.status ? JSON.parse(qs.status) : [],
-      };
+      const status = Array.isArray(qs?.status) ? qs.status : [];
+      return {status};
     },
   });
 

js_modules/dagster-ui/packages/ui-core/src/nav/useCodeLocationsStatus.tsx

@@ -1,4 +1,5 @@
 import {Box, ButtonLink, Colors} from '@dagster-io/ui-components';
+import qs from 'qs';
 import {useCallback, useContext, useLayoutEffect, useMemo, useRef, useState} from 'react';
 import {useHistory} from 'react-router-dom';
 import {atom, useRecoilValue} from 'recoil';
@@ -35,7 +36,11 @@ export const useCodeLocationsStatus = (): StatusAndMessage | null => {
   const [showSpinner, setShowSpinner] = useState(false);
 
   const onClickViewButton = useCallback((statuses: CodeLocationRowStatusType[]) => {
-    historyRef.current.push(`/locations?status=${JSON.stringify(statuses)}`);
+    const params =
+      statuses.length > 0
+        ? qs.stringify({status: statuses}, {arrayFormat: 'brackets', addQueryPrefix: true})
+        : '';
+    historyRef.current.push(`/locations${params}`);
   }, []);
 
   // Reload the workspace, but don't toast about it.