[ui] Improve typechecking on qs usage #29083

hellendag · 2025-04-07T21:46:17Z

Summary & Motivation

Following the recent JS error involving parsed querystrings crashing the page, try to lock down types on our qs usage in useQueryPersistedState and similar hooks that make use of encode/decode behavior.

This PR makes use of the qs.ParsedQs type, which is the type returned by qs.parse itself. This replaces our current {[key: string]: any} type, which at present leaves us with no real recourse for typechecking our parsed values.

Now, encode/decode functions will have to be much more careful about the types involved. For instance, in the case of the error hotfixed by #28791, the decode function would now have to refine the value for qs['open-nodes'] in order to satisfy the Set<string> type in its return value. If qs['open-nodes'] were an object (as in the error case), the new Set(...) would fail typechecking, and the developer would be forced to provide it an array of strings extracted from the qs argument.

How I Tested These Changes

TS, lint, jest.

hellendag · 2025-04-07T21:46:33Z

[ui] Improve typechecking on qs usage #29083 👈 (View in Graphite)
master

This stack of pull requests is managed by Graphite. Learn more about stacking.

github-actions · 2025-04-07T21:48:34Z

Deploy preview for dagit-storybook ready!

✅ Preview
https://dagit-storybook-ig1gcvn0o-elementl.vercel.app
https://dish-fe-842-try-to-improve.components-storybook.dagster-docs.io

Built with commit 1dfd9ce.
This pull request is being automatically deployed with vercel-action

github-actions · 2025-04-07T21:49:07Z

Deploy preview for dagit-core-storybook ready!

✅ Preview
https://dagit-core-storybook-hrvxd0so6-elementl.vercel.app
https://dish-fe-842-try-to-improve.core-storybook.dagster-docs.io

Built with commit 1dfd9ce.
This pull request is being automatically deployed with vercel-action

hellendag · 2025-04-07T21:52:46Z

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


I made a few changes like this to ensure that the type arguments specified for useQueryPersistedState etc can satisfy QueryPersistedDataType.

hellendag · 2025-04-07T21:53:48Z

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

+        if (Array.isArray(openNodes)) {
+          return new Set(openNodes.map((node) => String(node)));
+        }
+        return new Set();


This is our bug case. We now explicitly check that the value provided via qs is an array, and cast the contents to string to match the expected return type.

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

hellendag · 2025-04-07T21:54:45Z

js_modules/dagster-ui/packages/ui-core/src/hooks/__tests__/useQueryPersistedState.test.tsx

@@ -239,7 +244,7 @@ describe('useQueryPersistedState', () => {
    });
    await userEvent.click(screen.getByText(`{"enableA":false,"enableB":true}`));
    await waitFor(() => {
-      expect(querySearch).toEqual('');
+      expect(querySearch).toEqual('?enableA=true&enableB=false');


Not sure why this was expecting empty string before...

Hmm this is interesting actually - I think the reason is because the values were being set back to the default specified on like 225, and default values were omitted from the query string. I wonder if the defaults are sometimes used as the query-ified form and sometimes used as the state-form, so changing them to false above broke this?

hellendag · 2025-04-07T21:55:26Z

js_modules/dagster-ui/packages/ui-core/src/hooks/useQueryPersistedState.tsx

+  | string
+  | undefined
+  | number
+  | boolean
  | null;


The idea here is to more or less match the recursiveness of what qs is able to encode, and clean up these any types.

js_modules/dagster-ui/packages/ui-core/src/hooks/useQueryPersistedFilterState.tsx

salazarm

lgtm!

bengotow

Ahh this is great, I am definitely guilty of not thinking of the string[] vs string problem...

bengotow · 2025-04-14T16:15:13Z

js_modules/dagster-ui/packages/ui-core/src/hooks/__tests__/useQueryPersistedState.test.tsx

@@ -239,7 +244,7 @@ describe('useQueryPersistedState', () => {
    });
    await userEvent.click(screen.getByText(`{"enableA":false,"enableB":true}`));
    await waitFor(() => {
-      expect(querySearch).toEqual('');
+      expect(querySearch).toEqual('?enableA=true&enableB=false');


Hmm this is interesting actually - I think the reason is because the values were being set back to the default specified on like 225, and default values were omitted from the query string. I wonder if the defaults are sometimes used as the query-ified form and sometimes used as the state-form, so changing them to false above broke this?

graphite-app · 2025-04-25T14:14:02Z

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

+          .filter((s): s is AssetPartitionStatus =>
+            DISPLAYED_STATUSES.includes(s as AssetPartitionStatus),


The type guard function contains a type assertion (s as AssetPartitionStatus) inside the guard itself, which undermines the purpose of the type guard. This pattern could allow invalid values to pass type checking if the assertion succeeds but the actual value isn't a valid AssetPartitionStatus.

Consider refactoring to a more reliable approach, such as:

.filter((s): s is AssetPartitionStatus => typeof s === 'string' && DISPLAYED_STATUSES.includes(s as AssetPartitionStatus) )

Or using a string literal union check if AssetPartitionStatus is an enum or string union type.

Suggested change

.filter((s): s is AssetPartitionStatus =>

DISPLAYED_STATUSES.includes(s as AssetPartitionStatus),

.filter((s): s is AssetPartitionStatus =>

typeof s === 'string' && DISPLAYED_STATUSES.includes(s as AssetPartitionStatus),

Spotted by Diamond

Is this helpful? React 👍 or 👎 to let us know.

[INTERNAL_BRANCH=dish/qs-in-cloud]

hellendag · 2025-04-25T15:45:35Z

Merge activity

Apr 25, 10:45 AM CDT: A user started a stack merge that includes this pull request via Graphite.
Apr 25, 10:45 AM CDT: @hellendag merged this pull request with Graphite.

hellendag requested review from bengotow and salazarm April 7, 2025 21:51

hellendag marked this pull request as ready for review April 7, 2025 21:51

hellendag commented Apr 7, 2025

View reviewed changes

graphite-app bot reviewed Apr 7, 2025

View reviewed changes

js_modules/dagster-ui/packages/ui-core/src/hooks/useQueryPersistedFilterState.tsx Show resolved Hide resolved

salazarm approved these changes Apr 9, 2025

View reviewed changes

hellendag force-pushed the dish/fe-842-try-to-improve branch 2 times, most recently from 35d82c0 to 76467fa Compare April 10, 2025 15:59

bengotow approved these changes Apr 14, 2025

View reviewed changes

hellendag force-pushed the dish/fe-842-try-to-improve branch from 76467fa to 24931c8 Compare April 25, 2025 14:10

graphite-app bot reviewed Apr 25, 2025

View reviewed changes

[ui] Improve typechecking on qs usage

1dfd9ce

[INTERNAL_BRANCH=dish/qs-in-cloud]

hellendag force-pushed the dish/fe-842-try-to-improve branch from 24931c8 to 1dfd9ce Compare April 25, 2025 15:02

hellendag merged commit 4a43a7c into master Apr 25, 2025
7 of 8 checks passed

hellendag deleted the dish/fe-842-try-to-improve branch April 25, 2025 15:45

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[ui] Improve typechecking on qs usage #29083

[ui] Improve typechecking on qs usage #29083

Uh oh!

hellendag commented Apr 7, 2025 •

edited

Loading

Uh oh!

hellendag commented Apr 7, 2025

Uh oh!

github-actions bot commented Apr 7, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Apr 7, 2025 •

edited

Loading

Uh oh!

hellendag Apr 7, 2025

Uh oh!

hellendag Apr 7, 2025

Uh oh!

Uh oh!

hellendag Apr 7, 2025

Uh oh!

bengotow Apr 14, 2025

Uh oh!

hellendag Apr 7, 2025

Uh oh!

Uh oh!

salazarm left a comment

Uh oh!

bengotow left a comment

Uh oh!

bengotow Apr 14, 2025

Uh oh!

graphite-app bot Apr 25, 2025

Uh oh!

hellendag commented Apr 25, 2025 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

		.filter((s): s is AssetPartitionStatus =>
		DISPLAYED_STATUSES.includes(s as AssetPartitionStatus),

[ui] Improve typechecking on qs usage #29083

[ui] Improve typechecking on qs usage #29083

Uh oh!

Conversation

hellendag commented Apr 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary & Motivation

How I Tested These Changes

Uh oh!

hellendag commented Apr 7, 2025

Uh oh!

github-actions bot commented Apr 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Apr 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

hellendag Apr 7, 2025

Choose a reason for hiding this comment

Uh oh!

hellendag Apr 7, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

hellendag Apr 7, 2025

Choose a reason for hiding this comment

Uh oh!

bengotow Apr 14, 2025

Choose a reason for hiding this comment

Uh oh!

hellendag Apr 7, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

salazarm left a comment

Choose a reason for hiding this comment

Uh oh!

bengotow left a comment

Choose a reason for hiding this comment

Uh oh!

bengotow Apr 14, 2025

Choose a reason for hiding this comment

Uh oh!

graphite-app bot Apr 25, 2025

Choose a reason for hiding this comment

Uh oh!

hellendag commented Apr 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Merge activity

Uh oh!

Uh oh!

Uh oh!

hellendag commented Apr 7, 2025 •

edited

Loading

github-actions bot commented Apr 7, 2025 •

edited

Loading

github-actions bot commented Apr 7, 2025 •

edited

Loading

hellendag commented Apr 25, 2025 •

edited

Loading