[dagit] Break apart LaunchpadSessionContainer (#8101)

dagster-io · May 27, 2022 · 46722df · 46722df
1 parent 1e9ac3d
commit 46722df
Show file tree

Hide file tree

Showing 5 changed files with 149 additions and 53 deletions.
diff --git a/js_modules/dagit/packages/core/src/app/ExecutionSessionStorage.tsx b/js_modules/dagit/packages/core/src/app/ExecutionSessionStorage.tsx
@@ -1,6 +1,8 @@
 import * as React from 'react';
 
 import {getJSONForKey, useStateWithStorage} from '../hooks/useStateWithStorage';
+import {LaunchpadSessionContainerPartitionSetsFragment} from '../launchpad/types/LaunchpadSessionContainerPartitionSetsFragment';
+import {LaunchpadSessionContainerPipelineFragment} from '../launchpad/types/LaunchpadSessionContainerPipelineFragment';
 import {buildRepoAddress} from '../workspace/buildRepoAddress';
 import {RepoAddress} from '../workspace/types';
 
@@ -79,6 +81,24 @@ export function applyChangesToSession(
   };
 }
 
+export const createSingleSession = (initial: IExecutionSessionChanges = {}, key?: string) => {
+  return {
+    name: 'New Run',
+    runConfigYaml: '',
+    mode: null,
+    base: null,
+    needsRefresh: false,
+    solidSelection: null,
+    solidSelectionQuery: '*',
+    flattenGraphs: false,
+    tags: null,
+    runId: undefined,
+    ...initial,
+    configChangedSinceRun: false,
+    key: key || `s${Date.now()}`,
+  };
+};
+
 export function applyCreateSession(
   data: IStorageData,
   initial: IExecutionSessionChanges = {},
@@ -89,21 +109,7 @@ export function applyCreateSession(
     current: key,
     sessions: {
       ...data.sessions,
-      [key]: {
-        name: 'New Run',
-        runConfigYaml: '',
-        mode: null,
-        base: null,
-        needsRefresh: false,
-        solidSelection: null,
-        solidSelectionQuery: '*',
-        flattenGraphs: false,
-        tags: null,
-        runId: undefined,
-        ...initial,
-        configChangedSinceRun: false,
-        key,
-      },
+      [key]: createSingleSession(initial, key),
     },
     selectedExecutionType: data.selectedExecutionType,
   };
@@ -215,3 +221,30 @@ export const useInvalidateConfigsForRepo = () => {
 
   return onSave;
 };
+
+export const useInitialDataForMode = (
+  pipeline: LaunchpadSessionContainerPipelineFragment,
+  partitionSets: LaunchpadSessionContainerPartitionSetsFragment,
+) => {
+  const {isJob, presets} = pipeline;
+  const partitionSetsForMode = partitionSets.results;
+
+  return React.useMemo(() => {
+    const presetsForMode = isJob ? (presets.length ? [presets[0]] : []) : presets;
+
+    if (presetsForMode.length === 1 && partitionSetsForMode.length === 0) {
+      return {
+        base: {presetName: presetsForMode[0].name, tags: null},
+        runConfigYaml: presetsForMode[0].runConfigYaml,
+      };
+    }
+
+    if (!presetsForMode.length && partitionSetsForMode.length === 1) {
+      return {
+        base: {partitionsSetName: partitionSetsForMode[0].name, partitionName: null, tags: null},
+      };
+    }
+
+    return {};
+  }, [isJob, partitionSetsForMode, presets]);
+};
diff --git a/js_modules/dagit/packages/core/src/launchpad/LaunchpadManySessionsContainer.tsx b/js_modules/dagit/packages/core/src/launchpad/LaunchpadManySessionsContainer.tsx
@@ -0,0 +1,54 @@
+import * as React from 'react';
+
+import {
+  applyChangesToSession,
+  applyCreateSession,
+  IExecutionSessionChanges,
+  useExecutionSessionStorage,
+  useInitialDataForMode,
+} from '../app/ExecutionSessionStorage';
+import {RepoAddress} from '../workspace/types';
+
+import LaunchpadSessionContainer from './LaunchpadSessionContainer';
+import {LaunchpadTabs} from './LaunchpadTabs';
+import {LaunchpadSessionContainerPartitionSetsFragment} from './types/LaunchpadSessionContainerPartitionSetsFragment';
+import {LaunchpadSessionContainerPipelineFragment} from './types/LaunchpadSessionContainerPipelineFragment';
+
+interface Props {
+  pipeline: LaunchpadSessionContainerPipelineFragment;
+  partitionSets: LaunchpadSessionContainerPartitionSetsFragment;
+  repoAddress: RepoAddress;
+}
+
+export const LaunchpadManySessionsContainer = (props: Props) => {
+  const {pipeline, partitionSets, repoAddress} = props;
+
+  const initialDataForMode = useInitialDataForMode(pipeline, partitionSets);
+  const [data, onSave] = useExecutionSessionStorage(repoAddress, pipeline.name, initialDataForMode);
+
+  const onCreateSession = () => {
+    onSave(applyCreateSession(data, initialDataForMode));
+  };
+
+  const onSaveSession = (changes: IExecutionSessionChanges) => {
+    onSave(applyChangesToSession(data, data.current, changes));
+  };
+
+  const currentSession = data.sessions[data.current];
+
+  return (
+    <>
+      <LaunchpadTabs data={data} onCreate={onCreateSession} onSave={onSave} />
+      <LaunchpadSessionContainer
+        session={currentSession}
+        onSave={onSaveSession}
+        pipeline={pipeline}
+        partitionSets={partitionSets}
+        repoAddress={repoAddress}
+      />
+    </>
+  );
+};
+
+// eslint-disable-next-line import/no-default-export
+export default LaunchpadManySessionsContainer;
diff --git a/js_modules/dagit/packages/core/src/launchpad/LaunchpadRoot.tsx b/js_modules/dagit/packages/core/src/launchpad/LaunchpadRoot.tsx
@@ -17,7 +17,7 @@ import {LaunchpadSessionError} from './LaunchpadSessionError';
 import {LaunchpadSessionLoading} from './LaunchpadSessionLoading';
 import {LaunchpadRootQuery, LaunchpadRootQueryVariables} from './types/LaunchpadRootQuery';
 
-const LaunchpadSessionContainer = React.lazy(() => import('./LaunchpadSessionContainer'));
+const LaunchpadManySessionsContainer = React.lazy(() => import('./LaunchpadManySessionsContainer'));
 
 export const LaunchpadRoot: React.FC<{repoAddress: RepoAddress}> = (props) => {
   const {repoAddress} = props;
@@ -114,7 +114,7 @@ const LaunchpadAllowedRoot: React.FC<Props> = (props) => {
 
   return (
     <React.Suspense fallback={<div />}>
-      <LaunchpadSessionContainer
+      <LaunchpadManySessionsContainer
         pipeline={pipelineOrError}
         partitionSets={partitionSetsOrError}
         repoAddress={repoAddress}

diff --git a/js_modules/dagit/packages/core/src/launchpad/LaunchpadSessionContainer.tsx b/js_modules/dagit/packages/core/src/launchpad/LaunchpadSessionContainer.tsx
@@ -16,12 +16,10 @@ import * as yaml from 'yaml';
 
 import {showCustomAlert} from '../app/CustomAlertProvider';
 import {
-  applyChangesToSession,
-  applyCreateSession,
+  IExecutionSession,
   IExecutionSessionChanges,
   PipelineRunTag,
   SessionBase,
-  useExecutionSessionStorage,
 } from '../app/ExecutionSessionStorage';
 import {PythonErrorInfo} from '../app/PythonErrorInfo';
 import {ShortcutHandler} from '../app/ShortcutHandler';
@@ -45,7 +43,6 @@ import {
 import {ConfigEditorHelp} from './ConfigEditorHelp';
 import {ConfigEditorModePicker} from './ConfigEditorModePicker';
 import {LaunchRootExecutionButton} from './LaunchRootExecutionButton';
-import {LaunchpadTabs} from './LaunchpadTabs';
 import {LoadingOverlay} from './LoadingOverlay';
 import {OpSelector} from './OpSelector';
 import {RunPreview, RUN_PREVIEW_VALIDATION_FRAGMENT} from './RunPreview';
@@ -73,6 +70,8 @@ const LOADING_RUN_PREVIEW = `Checking config...`;
 type Preset = ConfigEditorGeneratorPipelineFragment_presets;
 
 interface LaunchpadSessionContainerProps {
+  session: IExecutionSession;
+  onSave: (changes: IExecutionSessionChanges) => void;
   pipeline: LaunchpadSessionContainerPipelineFragment;
   partitionSets: LaunchpadSessionContainerPartitionSetsFragment;
   repoAddress: RepoAddress;
@@ -135,7 +134,7 @@ const initialState: ILaunchpadSessionState = {
 };
 
 const LaunchpadSessionContainer: React.FC<LaunchpadSessionContainerProps> = (props) => {
-  const {partitionSets, pipeline, repoAddress} = props;
+  const {session: currentSession, onSave, partitionSets, pipeline, repoAddress} = props;
 
   const client = useApolloClient();
   const [state, dispatch] = React.useReducer(reducer, initialState);
@@ -145,31 +144,7 @@ const LaunchpadSessionContainer: React.FC<LaunchpadSessionContainerProps> = (pro
   const editorSplitPanelContainer = React.useRef<SplitPanelContainer | null>(null);
   const previewCounter = React.useRef(0);
 
-  const {isJob, presets} = pipeline;
-
-  const initialDataForMode = React.useMemo(() => {
-    const presetsForMode = isJob ? (presets.length ? [presets[0]] : []) : presets;
-    const partitionSetsForMode = partitionSets.results;
-
-    if (presetsForMode.length === 1 && partitionSetsForMode.length === 0) {
-      return {
-        base: {presetName: presetsForMode[0].name, tags: null},
-        runConfigYaml: presetsForMode[0].runConfigYaml,
-      };
-    }
-
-    if (!presetsForMode.length && partitionSetsForMode.length === 1) {
-      return {
-        base: {partitionsSetName: partitionSetsForMode[0].name, partitionName: null, tags: null},
-      };
-    }
-
-    return {};
-  }, [isJob, partitionSets.results, presets]);
-
-  const [data, onSave] = useExecutionSessionStorage(repoAddress, pipeline.name, initialDataForMode);
-
-  const currentSession = data.sessions[data.current];
+  const {isJob} = pipeline;
   const tagsFromSession = React.useMemo(() => currentSession.tags || [], [currentSession]);
 
   const pipelineSelector = {
@@ -197,7 +172,7 @@ const LaunchpadSessionContainer: React.FC<LaunchpadSessionContainerProps> = (pro
   });
 
   const onSaveSession = (changes: IExecutionSessionChanges) => {
-    onSave(applyChangesToSession(data, data.current, changes));
+    onSave(changes);
   };
 
   const onConfigChange = (config: any) => {
@@ -499,10 +474,6 @@ const LaunchpadSessionContainer: React.FC<LaunchpadSessionContainerProps> = (pro
   const onConfigLoading = () => dispatch({type: 'toggle-config-loading', payload: true});
   const onConfigLoaded = () => dispatch({type: 'toggle-config-loading', payload: false});
 
-  const onCreateSession = () => {
-    onSave(applyCreateSession(data, initialDataForMode));
-  };
-
   const {
     preview,
     previewLoading,
@@ -526,7 +497,6 @@ const LaunchpadSessionContainer: React.FC<LaunchpadSessionContainerProps> = (pro
 
   return (
     <>
-      <LaunchpadTabs data={data} onCreate={onCreateSession} onSave={onSave} />
       <SplitPanelContainer
         axis="vertical"
         identifier="execution"

diff --git a/js_modules/dagit/packages/core/src/launchpad/LaunchpadSingleSessionContainer.tsx b/js_modules/dagit/packages/core/src/launchpad/LaunchpadSingleSessionContainer.tsx
@@ -0,0 +1,39 @@
+import * as React from 'react';
+
+import {
+  createSingleSession,
+  IExecutionSessionChanges,
+  useInitialDataForMode,
+} from '../app/ExecutionSessionStorage';
+import {RepoAddress} from '../workspace/types';
+
+import LaunchpadSessionContainer from './LaunchpadSessionContainer';
+import {LaunchpadSessionContainerPartitionSetsFragment} from './types/LaunchpadSessionContainerPartitionSetsFragment';
+import {LaunchpadSessionContainerPipelineFragment} from './types/LaunchpadSessionContainerPipelineFragment';
+
+interface Props {
+  pipeline: LaunchpadSessionContainerPipelineFragment;
+  partitionSets: LaunchpadSessionContainerPartitionSetsFragment;
+  repoAddress: RepoAddress;
+}
+
+export const LaunchpadSingleSessionContainer = (props: Props) => {
+  const {pipeline, partitionSets, repoAddress} = props;
+
+  const initialDataForMode = useInitialDataForMode(pipeline, partitionSets);
+
+  const [session, saveSession] = React.useState(() => createSingleSession(initialDataForMode));
+  const onSaveSession = React.useCallback((changes: IExecutionSessionChanges) => {
+    saveSession((current) => ({...current, ...changes}));
+  }, []);
+
+  return (
+    <LaunchpadSessionContainer
+      session={session}
+      onSave={onSaveSession}
+      pipeline={pipeline}
+      partitionSets={partitionSets}
+      repoAddress={repoAddress}
+    />
+  );
+};