[ui] Save sensor type, instigation type, backfill status filters to URL

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

@@ -25,6 +25,7 @@ import {
 import {useTrackPageView} from '../app/analytics';
 import {BulkActionStatus} from '../graphql/types';
 import {useDocumentTitle} from '../hooks/useDocumentTitle';
+import {useQueryPersistedState} from '../hooks/useQueryPersistedState';
 import {DaemonNotRunningAlertBody} from '../partitions/BackfillMessaging';
 import {useCursorPaginatedQuery} from '../runs/useCursorPaginatedQuery';
 import {useFilters} from '../ui/Filters';
@@ -66,6 +67,10 @@ export const InstanceBackfills = () => {
     InstanceHealthForBackfillsQueryVariables
   >(INSTANCE_HEALTH_FOR_BACKFILLS_QUERY);
 
+  const [statusState, setStatusState] = useQueryPersistedState<Set<BulkActionStatus>>({
+    encode: (vals) => ({status: vals.size ? Array.from(vals).join(',') : undefined}),
+    decode: (qs) => new Set((qs.status?.split(',') as BulkActionStatus[]) || []),
+  });
   const statusFilter = useStaticSetFilter<BulkActionStatus>({
     name: 'Status',
     icon: 'status',
@@ -74,10 +79,10 @@ export const InstanceBackfills = () => {
     closeOnSelect: true,
     renderLabel: ({value}) => <div>{labelForBackfillStatus(value)}</div>,
     getStringValue: (status) => labelForBackfillStatus(status),
+    state: statusState,
+    onStateChanged: setStatusState,
   });
 
-  const {state: statusState} = statusFilter;
-
   const {button, activeFiltersJsx} = useFilters({filters: [statusFilter]});
 
   const {queryResult, paginationProps} = useCursorPaginatedQuery<

js_modules/dagster-ui/packages/ui-core/src/overview/OverviewSensors.tsx

@@ -1,6 +1,6 @@
 import {gql, useQuery} from '@apollo/client';
 import {Box, Colors, NonIdealState, Spinner, TextInput, Tooltip} from '@dagster-io/ui-components';
-import {useContext, useMemo, useState} from 'react';
+import {useContext, useMemo} from 'react';
 
 import {BASIC_INSTIGATION_STATE_FRAGMENT} from './BasicInstigationStateFragment';
 import {OverviewSensorTable} from './OverviewSensorsTable';
@@ -61,11 +61,13 @@ export const OverviewSensors = () => {
     defaults: {search: ''},
   });
 
+  const [sensorTypes, setSensorTypes] = useQueryPersistedState<Set<SensorType>>({
+    encode: (vals) => ({sensorType: vals.size ? Array.from(vals).join(',') : undefined}),
+    decode: (qs) => new Set((qs.sensorType?.split(',') as SensorType[]) || []),
+  });
+
   const codeLocationFilter = useCodeLocationFilter();
   const runningStateFilter = useInstigationStatusFilter();
-
-  const [sensorTypes, setSensorTypes] = useState<Set<SensorType>>(() => new Set());
-
   const sensorTypeFilter = useStaticSetFilter({
     name: 'Sensor type',
     allValues: ALL_SENSOR_TYPE_FILTERS,

js_modules/dagster-ui/packages/ui-core/src/resources/WorkspaceResourcesRoot.tsx

@@ -1,6 +1,6 @@
 import {gql, useQuery} from '@apollo/client';
 import {Box, Colors, NonIdealState, Spinner, TextInput} from '@dagster-io/ui-components';
-import {useMemo, useState} from 'react';
+import {useMemo} from 'react';
 
 import {VirtualizedResourceTable} from './VirtualizedResourceTable';
 import {
@@ -11,6 +11,7 @@ import {PYTHON_ERROR_FRAGMENT} from '../app/PythonErrorFragment';
 import {FIFTEEN_SECONDS, useQueryRefreshAtInterval} from '../app/QueryRefresh';
 import {useTrackPageView} from '../app/analytics';
 import {useDocumentTitle} from '../hooks/useDocumentTitle';
+import {useQueryPersistedState} from '../hooks/useQueryPersistedState';
 import {WorkspaceHeader} from '../workspace/WorkspaceHeader';
 import {repoAddressAsHumanString} from '../workspace/repoAddressAsString';
 import {repoAddressToSelector} from '../workspace/repoAddressToSelector';
@@ -22,7 +23,10 @@ export const WorkspaceResourcesRoot = ({repoAddress}: {repoAddress: RepoAddress}
   const repoName = repoAddressAsHumanString(repoAddress);
   useDocumentTitle(`Resources: ${repoName}`);
 
-  const [searchValue, setSearchValue] = useState('');
+  const [searchValue, setSearchValue] = useQueryPersistedState<string>({
+    queryKey: 'search',
+    defaults: {search: ''},
+  });
 
   const selector = repoAddressToSelector(repoAddress);
 

js_modules/dagster-ui/packages/ui-core/src/ui/Filters/useInstigationStatusFilter.tsx

@@ -1,7 +1,12 @@
 import {useStaticSetFilter} from './useStaticSetFilter';
 import {InstigationStatus} from '../../graphql/types';
+import {useQueryPersistedState} from '../../hooks/useQueryPersistedState';
 
 export const useInstigationStatusFilter = () => {
+  const [state, onStateChanged] = useQueryPersistedState<Set<InstigationStatus>>({
+    encode: (vals) => ({instigationStatus: vals.size ? Array.from(vals).join(',') : undefined}),
+    decode: (qs) => new Set((qs.instigationStatus?.split(',') as InstigationStatus[]) || []),
+  });
   return useStaticSetFilter<InstigationStatus>({
     name: 'Running state',
     icon: 'toggle_off',
@@ -13,6 +18,8 @@ export const useInstigationStatusFilter = () => {
     renderLabel: ({value}) => (
       <span>{value === InstigationStatus.RUNNING ? 'Running' : 'Stopped'}</span>
     ),
+    state,
+    onStateChanged,
     getStringValue: (value) => value,
   });
 };