Adds a new partition page behind a feature flag (#7617)

* add gated new partitions page

individual new components

* fix up run loader fragment

* rebase

js_modules/dagit/packages/core/src/app/Flags.tsx

@@ -10,6 +10,7 @@ export enum FeatureFlag {
   flagDebugConsoleLogging = 'flagDebugConsoleLogging',
   flagAlwaysCollapseNavigation = 'flagAlwaysCollapseNavigation',
   flagDisableWebsockets = 'flagDisableWebsockets',
+  flagNewPartitionsView = 'flagNewPartitionsView',
 }
 
 export const getFeatureFlags: () => FeatureFlag[] = memoize(

js_modules/dagit/packages/core/src/app/SettingsRoot.tsx

@@ -131,6 +131,16 @@ const SettingsRoot = () => {
                 />
               ),
             },
+            {
+              key: 'New partitions view (experimental)',
+              value: (
+                <Checkbox
+                  format="switch"
+                  checked={flags.includes(FeatureFlag.flagNewPartitionsView)}
+                  onChange={() => toggleFlag(FeatureFlag.flagNewPartitionsView)}
+                />
+              ),
+            },
           ]}
         />
       </Box>

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

@@ -21,6 +21,11 @@ import {PythonErrorInfo, PYTHON_ERROR_FRAGMENT} from '../app/PythonErrorInfo';
 import {displayNameForAssetKey} from '../asset-graph/Utils';
 import {PartitionHealthSummary, usePartitionHealthData} from '../assets/PartitionHealthSummary';
 import {AssetKey} from '../assets/types';
+import {LAUNCH_PARTITION_BACKFILL_MUTATION} from '../instance/BackfillUtils';
+import {
+  LaunchPartitionBackfill,
+  LaunchPartitionBackfillVariables,
+} from '../instance/types/LaunchPartitionBackfill';
 import {CONFIG_PARTITION_SELECTION_QUERY} from '../launchpad/ConfigEditorConfigPicker';
 import {
   ConfigPartitionSelectionQuery,
@@ -31,15 +36,7 @@ import {
   PartitionRangeInput,
   stringForSpan,
 } from '../partitions/PartitionRangeInput';
-import {
-  LAUNCH_PARTITION_BACKFILL_MUTATION,
-  showBackfillErrorToast,
-  showBackfillSuccessToast,
-} from '../partitions/PartitionsBackfill';
-import {
-  LaunchPartitionBackfill,
-  LaunchPartitionBackfillVariables,
-} from '../partitions/types/LaunchPartitionBackfill';
+import {showBackfillErrorToast, showBackfillSuccessToast} from '../partitions/PartitionsBackfill';
 import {DagsterTag} from '../runs/RunTag';
 import {handleLaunchResult, LAUNCH_PIPELINE_EXECUTION_MUTATION} from '../runs/RunUtils';
 import {

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

@@ -0,0 +1,43 @@
+import {Button, DialogBody, DialogFooter, Dialog} from '@dagster-io/ui';
+import * as React from 'react';
+
+import {BackfillTableFragment} from './types/BackfillTableFragment';
+
+interface Props {
+  backfill?: BackfillTableFragment;
+  onClose: () => void;
+}
+export const BackfillPartitionsRequestedDialog = ({backfill, onClose}: Props) => {
+  if (!backfill) {
+    return null;
+  }
+  if (!backfill.partitionSet) {
+    return null;
+  }
+
+  return (
+    <Dialog
+      isOpen={!!backfill}
+      title={
+        <span>
+          Partitions requested for backfill:{' '}
+          <span style={{fontFamily: 'monospace'}}>{backfill.backfillId}</span>
+        </span>
+      }
+      onClose={onClose}
+    >
+      <DialogBody>
+        <div style={{maxHeight: '80vh', overflowY: 'auto'}}>
+          {backfill.partitionNames.map((partitionName: string) => (
+            <div key={partitionName}>{partitionName}</div>
+          ))}
+        </div>
+      </DialogBody>
+      <DialogFooter>
+        <Button intent="none" onClick={onClose}>
+          Close
+        </Button>
+      </DialogFooter>
+    </Dialog>
+  );
+};

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

@@ -0,0 +1,103 @@
+import {Button, DialogBody, DialogFooter, Dialog} from '@dagster-io/ui';
+import * as React from 'react';
+
+import {PartitionStepStatus} from '../partitions/PartitionStepStatus';
+import {usePartitionStepQuery} from '../partitions/usePartitionStepQuery';
+import {RunFilterToken} from '../runs/RunsFilterInput';
+import {buildRepoAddress} from '../workspace/buildRepoAddress';
+import {RepoAddress} from '../workspace/types';
+
+import {
+  BackfillTableFragment,
+  BackfillTableFragment_partitionSet,
+} from './types/BackfillTableFragment';
+
+interface Props {
+  backfill?: BackfillTableFragment;
+  onClose: () => void;
+}
+export const BackfillStepStatusDialog = ({backfill, onClose}: Props) => {
+  if (!backfill) {
+    return null;
+  }
+  if (!backfill.partitionSet) {
+    return null;
+  }
+  const repoAddress = buildRepoAddress(
+    backfill.partitionSet.repositoryOrigin.repositoryName,
+    backfill.partitionSet.repositoryOrigin.repositoryLocationName,
+  );
+  return (
+    <BackfillStepStatusDialogContent
+      backfill={backfill}
+      partitionSet={backfill.partitionSet}
+      repoAddress={repoAddress}
+      onClose={onClose}
+    />
+  );
+};
+
+interface ContentProps {
+  backfill: BackfillTableFragment;
+  partitionSet: BackfillTableFragment_partitionSet;
+  repoAddress: RepoAddress;
+  onClose: () => void;
+}
+
+export const BackfillStepStatusDialogContent = ({
+  backfill,
+  partitionSet,
+  repoAddress,
+  onClose,
+}: ContentProps) => {
+  const [pageSize, setPageSize] = React.useState(60);
+  const [offset, setOffset] = React.useState<number>(0);
+  const runsFilter = React.useMemo(() => {
+    const token: RunFilterToken = {token: 'tag', value: `dagster/backfill=${backfill.backfillId}`};
+    return [token];
+  }, [backfill.backfillId]);
+  const partitions = usePartitionStepQuery(
+    partitionSet.name,
+    backfill.partitionNames,
+    pageSize,
+    runsFilter,
+    partitionSet.pipelineName,
+    offset,
+    !backfill,
+  );
+
+  if (!backfill) {
+    return null;
+  }
+
+  return (
+    <Dialog
+      isOpen={!!backfill}
+      title={
+        <span>
+          Step status for backfill:{' '}
+          <span style={{fontFamily: 'monospace'}}>{backfill.backfillId}</span>
+        </span>
+      }
+      onClose={onClose}
+      style={{width: '80vw'}}
+    >
+      <DialogBody>
+        <PartitionStepStatus
+          partitionNames={backfill.partitionNames}
+          partitions={partitions}
+          pipelineName={partitionSet?.pipelineName}
+          repoAddress={repoAddress}
+          setPageSize={setPageSize}
+          offset={offset}
+          setOffset={setOffset}
+        />
+      </DialogBody>
+      <DialogFooter>
+        <Button intent="none" onClick={onClose}>
+          Close
+        </Button>
+      </DialogFooter>
+    </Dialog>
+  );
+};