[ui] Improve typechecking on qs usage

Author: hellendag

js_modules/dagster-ui/packages/ui-components/src/components/TokenizingField.tsx

@@ -28,10 +28,10 @@ interface ActiveSuggestionInfo {
   idx: number;
 }
 
-export interface TokenizingFieldValue {
+export type TokenizingFieldValue = {
   token?: string;
   value: string;
-}
+};
 
 interface TokenizingFieldProps {
   values: TokenizingFieldValue[];

js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetGraphExplorer.tsx

@@ -266,7 +266,12 @@ const AssetGraphExplorerWithData = ({
   const [expandedGroups, setExpandedGroups] = useQueryAndLocalStoragePersistedState<string[]>({
     localStorageKey: `asset-graph-open-graph-nodes-${viewType}-${explorerPath.pipelineName}`,
     encode: (arr) => ({expanded: arr.length ? arr.join(',') : undefined}),
-    decode: (qs) => (qs.expanded || '').split(',').filter(Boolean),
+    decode: (qs) => {
+      if (typeof qs.expanded === 'string') {
+        return qs.expanded.split(',').filter(Boolean);
+      }
+      return [];
+    },
     isEmptyState: (val) => val.length === 0,
   });
   const focusGroupIdAfterLayoutRef = React.useRef('');

js_modules/dagster-ui/packages/ui-core/src/asset-graph/sidebar/Sidebar.tsx

@@ -102,7 +102,11 @@ export const AssetGraphExplorerSidebar = React.memo(
         return {'open-nodes': Array.from(val)};
       },
       decode: (qs) => {
-        return new Set(qs['open-nodes']);
+        const openNodes = qs['open-nodes'];
+        if (Array.isArray(openNodes)) {
+          return new Set(openNodes.map((node) => String(node)));
+        }
+        return new Set();
       },
       isEmptyState: (val) => val.size === 0,
     });

js_modules/dagster-ui/packages/ui-core/src/assets/AllIndividualEventsButton.tsx

@@ -311,10 +311,10 @@ export const AllIndividualEventsButton = ({
   children: React.ReactNode;
   disabled?: boolean;
 }) => {
-  const [_open, setOpen] = useQueryPersistedState({
+  const [_open, setOpen] = useQueryPersistedState<boolean>({
     queryKey: 'showAllEvents',
-    decode: (qs) => (qs.showAllEvents === 'true' ? true : false),
-    encode: (b) => ({showAllEvents: b || undefined}),
+    decode: (qs) => typeof qs.showAllEvents === 'string' && qs.showAllEvents === 'true',
+    encode: (b) => ({showAllEvents: b ? 'true' : undefined}),
   });
   const [focusedTimestamp, setFocusedTimestamp] = React.useState<string | undefined>();
   const groups = React.useMemo(

js_modules/dagster-ui/packages/ui-core/src/assets/AssetPartitions.tsx

@@ -52,7 +52,7 @@ interface Props {
   isLoadingDefinition: boolean;
 }
 
-const DISPLAYED_STATUSES = [
+const DISPLAYED_STATUSES: AssetPartitionStatus[] = [
   AssetPartitionStatus.MISSING,
   AssetPartitionStatus.MATERIALIZING,
   AssetPartitionStatus.MATERIALIZED,
@@ -88,10 +88,17 @@ export const AssetPartitions = ({
   const [statusFilters, setStatusFilters] = useQueryPersistedState<AssetPartitionStatus[]>({
     defaults: {status: [...DISPLAYED_STATUSES].sort().join(',')},
     encode: (val) => ({status: [...val].sort().join(',')}),
-    decode: (qs) =>
-      (qs.status || '')
-        .split(',')
-        .filter((s: AssetPartitionStatus) => DISPLAYED_STATUSES.includes(s)),
+    decode: (qs) => {
+      const status = qs.status;
+      if (typeof status === 'string') {
+        return status
+          .split(',')
+          .filter((s): s is AssetPartitionStatus =>
+            DISPLAYED_STATUSES.includes(s as AssetPartitionStatus),
+          );
+      }
+      return [];
+    },
   });
 
   const [searchValues, setSearchValues] = useState<string[]>([]);

js_modules/dagster-ui/packages/ui-core/src/assets/AutoMaterializePolicyPage/AssetAutomaterializePolicyPage.tsx

@@ -33,7 +33,7 @@ export const AssetAutomaterializePolicyPage = ({
   >({
     queryKey: 'evaluation',
     decode: (raw) => {
-      return raw.evaluation;
+      return typeof raw.evaluation === 'string' ? raw.evaluation : undefined;
     },
     encode: (raw) => {
       // Reset the selected partition

js_modules/dagster-ui/packages/ui-core/src/assets/types.tsx

@@ -11,7 +11,7 @@ export type AssetDefinition = Extract<
 
 export type AssetLineageScope = 'neighbors' | 'upstream' | 'downstream';
 
-export interface AssetViewParams {
+export type AssetViewParams = {
   view?: string;
   lineageScope?: AssetLineageScope;
   lineageDepth?: number;
@@ -23,4 +23,4 @@ export interface AssetViewParams {
   default_range?: string;
   column?: string;
   showAllEvents?: boolean;
-}
+};

js_modules/dagster-ui/packages/ui-core/src/assets/useAssetDefinitionFilterState.oss.tsx

@@ -12,7 +12,6 @@ import {
 import {useQueryPersistedState} from '../hooks/useQueryPersistedState';
 import {doesFilterArrayMatchValueArray} from '../ui/Filters/doesFilterArrayMatchValueArray';
 import {Tag} from '../ui/Filters/useDefinitionTagFilter';
-import {buildRepoAddress} from '../workspace/buildRepoAddress';
 import {RepoAddress} from '../workspace/types';
 
 type Nullable<T> = {
@@ -42,6 +41,18 @@ export type AssetFilterType = AssetFilterBaseType & {
   selectAllFilters: Array<keyof AssetFilterBaseType>;
 };
 
+const parseJSONArraySafely = (value: qs.ParsedQs[string] | undefined) => {
+  if (typeof value === 'string') {
+    try {
+      const parsed = JSON.parse(value);
+      if (Array.isArray(parsed)) {
+        return parsed;
+      }
+    } catch {}
+  }
+  return [];
+};
+
 export const useAssetDefinitionFilterState = ({isEnabled = true}: {isEnabled?: boolean}) => {
   const [filters, setFilters] = useQueryPersistedState<AssetFilterType>({
     encode: isEnabled
@@ -55,20 +66,19 @@ export const useAssetDefinitionFilterState = ({isEnabled = true}: {isEnabled?: b
           selectAllFilters: selectAllFilters?.length ? JSON.stringify(selectAllFilters) : undefined,
         })
       : () => ({}),
-    decode: (qs) => ({
-      groups: qs.groups && isEnabled ? JSON.parse(qs.groups) : [],
-      kinds: qs.kinds && isEnabled ? JSON.parse(qs.kinds) : [],
-      changedInBranch: qs.changedInBranch && isEnabled ? JSON.parse(qs.changedInBranch) : [],
-      owners: qs.owners && isEnabled ? JSON.parse(qs.owners) : [],
-      tags: qs.tags && isEnabled ? JSON.parse(qs.tags) : [],
-      codeLocations:
-        qs.codeLocations && isEnabled
-          ? JSON.parse(qs.codeLocations).map((repo: RepoAddress) =>
-              buildRepoAddress(repo.name, repo.location),
-            )
-          : [],
-      selectAllFilters: qs.selectAllFilters ? JSON.parse(qs.selectAllFilters) : [],
-    }),
+    decode: (qs) => {
+      // JSON will be parsed safely, but we are not verifying the types within the arrays themselves
+      // so there could be downstream issues if the arrays are of incorrect types.
+      return {
+        groups: isEnabled ? parseJSONArraySafely(qs.groups) : [],
+        kinds: isEnabled ? parseJSONArraySafely(qs.kinds) : [],
+        changedInBranch: isEnabled ? parseJSONArraySafely(qs.changedInBranch) : [],
+        owners: isEnabled ? parseJSONArraySafely(qs.owners) : [],
+        tags: isEnabled ? parseJSONArraySafely(qs.tags) : [],
+        codeLocations: isEnabled ? parseJSONArraySafely(qs.codeLocations) : [],
+        selectAllFilters: isEnabled ? parseJSONArraySafely(qs.selectAllFilters) : [],
+      };
+    },
   });
 
   const filterFn = useCallback(

js_modules/dagster-ui/packages/ui-core/src/assets/useAssetEventsFilters.tsx

@@ -42,21 +42,30 @@ export const useAssetEventsFilters = ({assetKey, assetNode}: Config) => {
           type: typeValues.map((t) => t.key),
         };
       }
+
+      let dateRange: {start: number | null; end: number | null} | undefined;
+      if (raw?.dateRange && typeof raw.dateRange !== 'string' && !Array.isArray(raw.dateRange)) {
+        dateRange = {
+          start: typeof raw.dateRange.start === 'string' ? parseInt(raw.dateRange.start) : null,
+          end: typeof raw.dateRange.end === 'string' ? parseInt(raw.dateRange.end) : null,
+        };
+      }
+
       return {
-        partitions: raw?.partitions,
-        dateRange: raw?.dateRange
-          ? {
-              start: raw.dateRange.start ? parseInt(raw.dateRange.start) : null,
-              end: raw.dateRange.end ? parseInt(raw.dateRange.end) : null,
-            }
-          : undefined,
-        status: raw?.status,
-        type: raw?.type,
+        partitions: Array.isArray(raw?.partitions) ? raw.partitions.map(String) : [],
+        dateRange,
+        status: Array.isArray(raw?.status) ? raw.status.map(String) : [],
+        type: Array.isArray(raw?.type) ? raw.type.map(String) : [],
       };
     },
     encode: (raw) => ({
       partitions: raw.partitions,
-      dateRange: raw.dateRange,
+      dateRange: raw.dateRange
+        ? {
+            start: raw.dateRange.start ? String(raw.dateRange.start) : undefined,
+            end: raw.dateRange.end ? String(raw.dateRange.end) : undefined,
+          }
+        : undefined,
       status: raw.status,
       type: raw.type,
     }),

js_modules/dagster-ui/packages/ui-core/src/assets/useAssetViewParams.tsx

@@ -1,12 +1,14 @@
+import qs from 'qs';
+
 import {AssetViewParams} from './types';
 import {useQueryPersistedState} from '../hooks/useQueryPersistedState';
 
-export const decode = ({lineageDepth, showAllEvents, ...rest}: {[key: string]: any}) => {
+export const decode = ({lineageDepth, showAllEvents, ...rest}: qs.ParsedQs) => {
   const result: AssetViewParams = {...rest};
-  if (lineageDepth !== undefined) {
+  if (typeof lineageDepth === 'string') {
     result.lineageDepth = Number(lineageDepth);
   }
-  if (showAllEvents !== undefined) {
+  if (typeof showAllEvents === 'string') {
     result.showAllEvents =
       showAllEvents === 'true' ? true : showAllEvents === 'false' ? false : undefined;
   }