[dagit] Add a helper for building instance/runs paths, resolved #6847 (…

…#6848)

js_modules/dagit/packages/core/src/assets/AssetEvents.tsx

@@ -12,14 +12,14 @@ import {
 } from '@dagster-io/ui';
 import flatMap from 'lodash/flatMap';
 import uniq from 'lodash/uniq';
-import qs from 'qs';
 import * as React from 'react';
 import {Link} from 'react-router-dom';
 
 import {useStateWithStorage} from '../hooks/useStateWithStorage';
 import {METADATA_ENTRY_FRAGMENT} from '../metadata/MetadataEntry';
 import {SidebarSection} from '../pipelines/SidebarComponents';
 import {titleForRun} from '../runs/RunUtils';
+import {runsPathWithFilters} from '../runs/RunsFilterInput';
 import {RepositorySelector} from '../types/globalTypes';
 import {CurrentRunsBanner} from '../workspace/asset-graph/CurrentRunsBanner';
 import {LiveDataForNode} from '../workspace/asset-graph/Utils';
@@ -326,13 +326,11 @@ export const AssetEvents: React.FC<Props> = ({
                 : jobRunsThatDidntMaterializeAsset.jobNames[0]}{' '}
               ran{' '}
               <Link
-                to={`/instance/runs?${
-                  jobRunsThatDidntMaterializeAsset.jobNames.length > 1
-                    ? ''
-                    : qs.stringify({
-                        'q[]': `job:${jobRunsThatDidntMaterializeAsset.jobNames[0]}`,
-                      })
-                }`}
+                to={runsPathWithFilters(
+                  jobRunsThatDidntMaterializeAsset.jobNames.length === 1
+                    ? [{token: 'job', value: jobRunsThatDidntMaterializeAsset.jobNames[0]}]
+                    : [],
+                )}
               >
                 {jobRunsThatDidntMaterializeAsset.count} times
               </Link>{' '}

js_modules/dagit/packages/core/src/gantt/GanttChart.tsx

@@ -23,6 +23,7 @@ import {
   IStepMetadata,
   IStepState,
 } from '../runs/RunMetadataProvider';
+import {runsPathWithFilters} from '../runs/RunsFilterInput';
 import {StepSelection} from '../runs/StepSelection';
 import {GraphQueryInput} from '../ui/GraphQueryInput';
 
@@ -808,7 +809,11 @@ export const QueuedState = ({runId}: {runId: string}) => (
           icon="arrow_forward"
           title="Run Queued"
           description="This run is queued for execution and will start soon."
-          action={<Link to="/instance/runs?q=status%3AQUEUED">View queued runs</Link>}
+          action={
+            <Link to={runsPathWithFilters([{token: 'status', value: 'QUEUED'}])}>
+              View queued runs
+            </Link>
+          }
         />
       }
       firstInitialPercent={70}

js_modules/dagit/packages/core/src/instance/InstanceBackfills.tsx

@@ -38,6 +38,7 @@ import {
   successStatuses,
 } from '../runs/RunStatuses';
 import {DagsterTag} from '../runs/RunTag';
+import {runsPathWithFilters} from '../runs/RunsFilterInput';
 import {TerminationDialog} from '../runs/TerminationDialog';
 import {useCursorPaginatedQuery} from '../runs/useCursorPaginatedQuery';
 import {TimestampDisplay} from '../schedules/TimestampDisplay';
@@ -281,9 +282,12 @@ const BackfillRow = ({
   const history = useHistory();
   const {canCancelPartitionBackfill, canLaunchPartitionBackfill} = usePermissions();
   const counts = React.useMemo(() => getProgressCounts(backfill), [backfill]);
-  const runsUrl = `/instance/runs?${qs.stringify({
-    q: [stringFromValue([{token: 'tag', value: `dagster/backfill=${backfill.backfillId}`}])],
-  })}`;
+  const runsUrl = runsPathWithFilters([
+    {
+      token: 'tag',
+      value: `dagster/backfill=${backfill.backfillId}`,
+    },
+  ]);
 
   const repoAddress = backfill.partitionSet
     ? buildRepoAddress(

js_modules/dagit/packages/core/src/partitions/PartitionRunMatrix.stories.tsx

@@ -1,9 +1,9 @@
-import {TokenizingFieldValue} from '@dagster-io/ui';
 import {Meta} from '@storybook/react/types-6-0';
 import faker from 'faker';
 import moment from 'moment';
 import * as React from 'react';
 
+import {RunFilterToken} from '../runs/RunsFilterInput';
 import {StorybookProvider} from '../testing/StorybookProvider';
 import {RunStatus, StepEventStatus} from '../types/globalTypes';
 
@@ -34,10 +34,10 @@ interface ISolidHandle {
 // to make them work just filter our sample data.
 function simulateTagFilteringInQuery(
   runs: PartitionSetLoaderRunFragment[],
-  runTags: TokenizingFieldValue[],
+  runFilters: RunFilterToken[],
 ) {
   return runs.filter((r) =>
-    runTags.every((t) => r.tags.some((rt) => `${rt.key}=${rt.value}` === t.value)),
+    runFilters.every((t) => r.tags.some((rt) => `${rt.key}=${rt.value}` === t.value)),
   );
 }
 
@@ -123,7 +123,7 @@ const PipelineMocks = {
 };
 
 export const BasicTestCases = () => {
-  const [runTags, setRunTags] = React.useState<TokenizingFieldValue[]>([]);
+  const [runFilters, setRunFilters] = React.useState<RunFilterToken[]>([]);
   const [stepQuery, setStepQuery] = React.useState('');
   const partitions: {name: string; runs: PartitionSetLoaderRunFragment[]}[] = [];
 
@@ -230,22 +230,22 @@ export const BasicTestCases = () => {
       <PartitionRunMatrix
         pipelineName="TestPipeline"
         repoAddress={{name: 'Test', location: 'TestLocation'}}
-        runTags={runTags}
-        setRunTags={setRunTags}
+        runFilters={runFilters}
+        setRunFilters={setRunFilters}
         stepQuery={stepQuery}
         setStepQuery={setStepQuery}
         partitions={partitions.map((p) => ({
           ...p,
           runsLoaded: true,
-          runs: simulateTagFilteringInQuery(p.runs, runTags),
+          runs: simulateTagFilteringInQuery(p.runs, runFilters),
         }))}
       />
     </StorybookProvider>
   );
 };
 
 export const LargeDataset = () => {
-  const [runTags, setRunTags] = React.useState<TokenizingFieldValue[]>([]);
+  const [runFilters, setRunFilters] = React.useState<RunFilterToken[]>([]);
   const [stepQuery, setStepQuery] = React.useState('');
   const partitions = React.useMemo(() => {
     const results: {name: string; runs: PartitionSetLoaderRunFragment[]}[] = [];
@@ -277,14 +277,14 @@ export const LargeDataset = () => {
       <PartitionRunMatrix
         pipelineName="TestPipeline"
         repoAddress={{name: 'Test', location: 'TestLocation'}}
-        runTags={runTags}
-        setRunTags={setRunTags}
+        runFilters={runFilters}
+        setRunFilters={setRunFilters}
         stepQuery={stepQuery}
         setStepQuery={setStepQuery}
         partitions={partitions.map((p) => ({
           ...p,
           runsLoaded: true,
-          runs: simulateTagFilteringInQuery(p.runs, runTags),
+          runs: simulateTagFilteringInQuery(p.runs, runFilters),
         }))}
       />
     </StorybookProvider>

js_modules/dagit/packages/core/src/partitions/PartitionRunMatrix.tsx

@@ -10,7 +10,6 @@ import {
   MenuLink,
   MenuWIP,
   Popover,
-  TokenizingFieldValue,
   FontFamily,
 } from '@dagster-io/ui';
 import qs from 'qs';
@@ -21,6 +20,7 @@ import {OptionsContainer, OptionsDivider} from '../gantt/VizComponents';
 import {useViewport} from '../gantt/useViewport';
 import {QueryPersistedStateConfig, useQueryPersistedState} from '../hooks/useQueryPersistedState';
 import {GRAPH_EXPLORER_SOLID_HANDLE_FRAGMENT} from '../pipelines/GraphExplorer';
+import {RunFilterToken} from '../runs/RunsFilterInput';
 import {repoAddressToSelector} from '../workspace/repoAddressToSelector';
 import {RepoAddress} from '../workspace/types';
 
@@ -72,16 +72,16 @@ interface PartitionRunMatrixProps {
   pipelineName: string;
   partitions: PartitionRuns[];
   repoAddress: RepoAddress;
-  runTags: TokenizingFieldValue[];
-  setRunTags: (val: TokenizingFieldValue[]) => void;
+  runFilters: RunFilterToken[];
+  setRunFilters: (val: RunFilterToken[]) => void;
   stepQuery: string;
   setStepQuery: (val: string) => void;
 }
 
-const _backfillIdFromTags = (runTags: TokenizingFieldValue[]) => {
-  const [backfillId] = runTags
-    .filter((_) => _.token === 'tag' && _.value.startsWith('dagster/backfill='))
-    .map((_) => _.value.split('=')[1]);
+const _backfillIdFromTags = (runFilters: RunFilterToken[]) => {
+  const [backfillId] = runFilters
+    .filter(({token, value}) => token === 'tag' && value.startsWith('dagster/backfill='))
+    .map(({value}) => value.split('=')[1]);
   return backfillId;
 };
 
@@ -220,15 +220,15 @@ export const PartitionRunMatrix: React.FC<PartitionRunMatrixProps> = (props) =>
             (a, b) => [...a, ...b.runs],
             [] as {tags: {key: string; value: string}[]}[],
           )}
-          onChange={props.setRunTags}
-          tokens={props.runTags}
+          onChange={props.setRunFilters}
+          tokens={props.runFilters}
         />
-        {props.runTags.length && _backfillIdFromTags(props.runTags) ? (
+        {props.runFilters.length && _backfillIdFromTags(props.runFilters) ? (
           <Box flex={{grow: 1}} margin={{left: 12, right: 8}}>
             <PartitionProgress
               pipelineName={props.pipelineName}
               repoAddress={props.repoAddress}
-              backfillId={_backfillIdFromTags(props.runTags)}
+              backfillId={_backfillIdFromTags(props.runFilters)}
             />
           </Box>
         ) : null}

js_modules/dagit/packages/core/src/partitions/PartitionView.tsx

@@ -44,7 +44,7 @@ export const PartitionView: React.FC<PartitionViewProps> = ({
   onChangePartitionSet,
   repoAddress,
 }) => {
-  const [runTags, setRunTags] = useQueryPersistedRunFilters(RunTagsSupportedTokens);
+  const [runFilters, setRunFilters] = useQueryPersistedRunFilters(RunTagsSupportedTokens);
   const [stepQuery = '', setStepQuery] = useQueryPersistedState<string>({queryKey: 'stepQuery'});
   const [showBackfillSetup, setShowBackfillSetup] = React.useState(false);
   const [blockDialog, setBlockDialog] = React.useState(false);
@@ -60,7 +60,7 @@ export const PartitionView: React.FC<PartitionViewProps> = ({
     setPageSize,
   } = useChunkedPartitionsQuery(
     partitionSet.name,
-    runTags,
+    runFilters,
     repoAddress,
     // only query by job name if there is only one partition set
     isJob && partitionSets.length === 1 ? pipelineName : undefined,
@@ -114,7 +114,7 @@ export const PartitionView: React.FC<PartitionViewProps> = ({
             onCancel={() => setShowBackfillSetup(false)}
             onLaunch={(backfillId, stepQuery) => {
               setStepQuery(stepQuery);
-              setRunTags([{token: 'tag', value: `dagster/backfill=${backfillId}`}]);
+              setRunFilters([{token: 'tag', value: `dagster/backfill=${backfillId}`}]);
               setShowBackfillSetup(false);
             }}
             onSubmit={onSubmit}
@@ -155,8 +155,8 @@ export const PartitionView: React.FC<PartitionViewProps> = ({
           partitions={partitions}
           pipelineName={pipelineName}
           repoAddress={repoAddress}
-          runTags={runTags}
-          setRunTags={setRunTags}
+          runFilters={runFilters}
+          setRunFilters={setRunFilters}
           stepQuery={stepQuery}
           setStepQuery={setStepQuery}
         />

js_modules/dagit/packages/core/src/partitions/RunTagsTokenizingField.tsx

@@ -1,18 +1,13 @@
-import {
-  TokenizingField,
-  TokenizingFieldValue,
-  stringFromValue,
-  tokenizedValuesFromString,
-} from '@dagster-io/ui';
+import {TokenizingField, stringFromValue, tokenizedValuesFromString} from '@dagster-io/ui';
 import uniq from 'lodash/uniq';
 import * as React from 'react';
 
-import {RunFilterTokenType} from '../runs/RunsFilterInput';
+import {RunFilterToken, RunFilterTokenType} from '../runs/RunsFilterInput';
 
 interface RunTagsTokenizingFieldProps {
   runs: {tags: {key: string; value: string}[]}[];
-  tokens: TokenizingFieldValue[];
-  onChange: (tokens: TokenizingFieldValue[]) => void;
+  tokens: RunFilterToken[];
+  onChange: (tokens: RunFilterToken[]) => void;
 }
 
 // BG TODO: This should most likely be folded into RunsFilterInput, but that component loads autocompletions
@@ -40,7 +35,7 @@ export const RunTagsTokenizingField: React.FC<RunTagsTokenizingFieldProps> = ({
     <TokenizingField
       small
       values={search}
-      onChange={onChange}
+      onChange={(values) => onChange(values as RunFilterToken[])}
       placeholder="Filter partition runs..."
       suggestionProviders={suggestions}
       loading={false}

js_modules/dagit/packages/core/src/partitions/useChunkedPartitionsQuery.tsx

@@ -1,11 +1,11 @@
 import {gql, useApolloClient, ApolloClient} from '@apollo/client';
-import {TokenizingFieldValue} from '@dagster-io/ui';
 import * as React from 'react';
 
 import {PYTHON_ERROR_FRAGMENT} from '../app/PythonErrorInfo';
 import {PythonErrorFragment} from '../app/types/PythonErrorFragment';
 import {QueryPersistedStateConfig, useQueryPersistedState} from '../hooks/useQueryPersistedState';
 import {DagsterTag} from '../runs/RunTag';
+import {RunFilterToken} from '../runs/RunsFilterInput';
 import {RunStatus} from '../types/globalTypes';
 import {repoAddressToSelector} from '../workspace/repoAddressToSelector';
 import {RepoAddress} from '../workspace/types';
@@ -68,7 +68,7 @@ const InitialDataState: DataState = {
  */
 export function useChunkedPartitionsQuery(
   partitionSetName: string,
-  runsFilter: TokenizingFieldValue[],
+  runsFilter: RunFilterToken[],
   repoAddress: RepoAddress,
   jobName?: string,
 ) {

js_modules/dagit/packages/core/src/runs/RunTable.tsx

@@ -1,14 +1,5 @@
 import {gql} from '@apollo/client';
-import {
-  Box,
-  Checkbox,
-  ColorsWIP,
-  IconWIP,
-  NonIdealState,
-  Table,
-  Mono,
-  TokenizingFieldValue,
-} from '@dagster-io/ui';
+import {Box, Checkbox, ColorsWIP, IconWIP, NonIdealState, Table, Mono} from '@dagster-io/ui';
 import * as React from 'react';
 import {Link} from 'react-router-dom';
 import styled from 'styled-components/macro';
@@ -33,11 +24,12 @@ import {canceledStatuses, queuedStatuses} from './RunStatuses';
 import {RunStepKeysAssetList} from './RunStepKeysAssetList';
 import {RunTags} from './RunTags';
 import {RunElapsed, RunTime, RUN_TIME_FRAGMENT, titleForRun} from './RunUtils';
+import {RunFilterToken} from './RunsFilterInput';
 import {RunTableRunFragment} from './types/RunTableRunFragment';
 
 interface RunTableProps {
   runs: RunTableRunFragment[];
-  onSetFilter: (search: TokenizingFieldValue[]) => void;
+  onSetFilter: (search: RunFilterToken[]) => void;
   nonIdealState?: React.ReactNode;
   actionBarComponents?: React.ReactNode;
   highlightedIds?: string[];
@@ -180,7 +172,7 @@ export const RUN_TABLE_RUN_FRAGMENT = gql`
 const RunRow: React.FC<{
   run: RunTableRunFragment;
   canTerminateOrDelete: boolean;
-  onSetFilter: (search: TokenizingFieldValue[]) => void;
+  onSetFilter: (search: RunFilterToken[]) => void;
   checked?: boolean;
   onToggleChecked?: (values: {checked: boolean; shiftKey: boolean}) => void;
   additionalColumns?: React.ReactNode[];

js_modules/dagit/packages/core/src/runs/RunTags.tsx

@@ -1,7 +1,8 @@
-import {Box, TokenizingFieldValue} from '@dagster-io/ui';
+import {Box} from '@dagster-io/ui';
 import * as React from 'react';
 
 import {RunTag} from './RunTag';
+import {RunFilterToken} from './RunsFilterInput';
 
 interface RunTagType {
   key: string;
@@ -11,7 +12,7 @@ interface RunTagType {
 export const RunTags: React.FC<{
   tags: RunTagType[];
   mode: string | null;
-  onSetFilter?: (search: TokenizingFieldValue[]) => void;
+  onSetFilter?: (search: RunFilterToken[]) => void;
 }> = React.memo(({tags, onSetFilter, mode}) => {
   if (!tags.length) {
     return null;