feat(ingestion) Add Save & Run button to managed ingestion builder (#5579)

datahub-web-react/src/app/ingest/source/IngestionSourceList.tsx

@@ -111,59 +111,6 @@ export const IngestionSourceList = () => {
     const focusSource =
         (focusSourceUrn && filteredSources.find((source) => source.urn === focusSourceUrn)) || undefined;
 
-    const onCreateOrUpdateIngestionSourceSuccess = () => {
-        setTimeout(() => refetch(), 2000);
-        setIsBuildingSource(false);
-        setFocusSourceUrn(undefined);
-    };
-
-    const createOrUpdateIngestionSource = (input: UpdateIngestionSourceInput, resetState: () => void) => {
-        if (focusSourceUrn) {
-            // Update:
-            updateIngestionSource({ variables: { urn: focusSourceUrn as string, input } })
-                .then(() => {
-                    message.success({
-                        content: `Successfully updated ingestion source!`,
-                        duration: 3,
-                    });
-                    onCreateOrUpdateIngestionSourceSuccess();
-                    resetState();
-                })
-                .catch((e) => {
-                    message.destroy();
-                    message.error({
-                        content: `Failed to update ingestion source!: \n ${e.message || ''}`,
-                        duration: 3,
-                    });
-                });
-        } else {
-            // Create
-            createIngestionSource({ variables: { input } })
-                .then(() => {
-                    setTimeout(() => refetch(), 2000);
-                    setIsBuildingSource(false);
-                    setFocusSourceUrn(undefined);
-                    resetState();
-                    message.success({
-                        content: `Successfully created ingestion source!`,
-                        duration: 3,
-                    });
-                    // onCreateOrUpdateIngestionSourceSuccess();
-                })
-                .catch((e) => {
-                    message.destroy();
-                    message.error({
-                        content: `Failed to create ingestion source!: \n ${e.message || ''}`,
-                        duration: 3,
-                    });
-                });
-        }
-    };
-
-    const onChangePage = (newPage: number) => {
-        setPage(newPage);
-    };
-
     const onRefresh = () => {
         refetch();
         // Used to force a re-render of the child execution request list.
@@ -194,6 +141,70 @@ export const IngestionSourceList = () => {
             });
     };
 
+    const onCreateOrUpdateIngestionSourceSuccess = () => {
+        setTimeout(() => refetch(), 2000);
+        setIsBuildingSource(false);
+        setFocusSourceUrn(undefined);
+    };
+
+    const createOrUpdateIngestionSource = (
+        input: UpdateIngestionSourceInput,
+        resetState: () => void,
+        shouldRun?: boolean,
+    ) => {
+        if (focusSourceUrn) {
+            // Update:
+            updateIngestionSource({ variables: { urn: focusSourceUrn as string, input } })
+                .then(() => {
+                    message.success({
+                        content: `Successfully updated ingestion source!`,
+                        duration: 3,
+                    });
+                    onCreateOrUpdateIngestionSourceSuccess();
+                    resetState();
+                    if (shouldRun) executeIngestionSource(focusSourceUrn);
+                })
+                .catch((e) => {
+                    message.destroy();
+                    message.error({
+                        content: `Failed to update ingestion source!: \n ${e.message || ''}`,
+                        duration: 3,
+                    });
+                });
+        } else {
+            // Create
+            createIngestionSource({ variables: { input } })
+                .then((result) => {
+                    message.loading({ content: 'Loading...', duration: 2 });
+                    setTimeout(() => {
+                        refetch();
+                        message.success({
+                            content: `Successfully created ingestion source!`,
+                            duration: 3,
+                        });
+                        if (shouldRun && result.data?.createIngestionSource) {
+                            executeIngestionSource(result.data.createIngestionSource);
+                        }
+                    }, 2000);
+                    setIsBuildingSource(false);
+                    setFocusSourceUrn(undefined);
+                    resetState();
+                    // onCreateOrUpdateIngestionSourceSuccess();
+                })
+                .catch((e) => {
+                    message.destroy();
+                    message.error({
+                        content: `Failed to create ingestion source!: \n ${e.message || ''}`,
+                        duration: 3,
+                    });
+                });
+        }
+    };
+
+    const onChangePage = (newPage: number) => {
+        setPage(newPage);
+    };
+
     const deleteIngestionSource = async (urn: string) => {
         removeIngestionSourceMutation({
             variables: { urn },
@@ -214,7 +225,7 @@ export const IngestionSourceList = () => {
             });
     };
 
-    const onSubmit = (recipeBuilderState: SourceBuilderState, resetState: () => void) => {
+    const onSubmit = (recipeBuilderState: SourceBuilderState, resetState: () => void, shouldRun?: boolean) => {
         createOrUpdateIngestionSource(
             {
                 type: recipeBuilderState.type as string,
@@ -236,6 +247,7 @@ export const IngestionSourceList = () => {
                 },
             },
             resetState,
+            shouldRun,
         );
     };
 

datahub-web-react/src/app/ingest/source/builder/IngestionSourceBuilderModal.tsx

@@ -59,7 +59,7 @@ export enum IngestionSourceBuilderStep {
 type Props = {
     initialState?: SourceBuilderState;
     visible: boolean;
-    onSubmit?: (input: SourceBuilderState, resetState: () => void) => void;
+    onSubmit?: (input: SourceBuilderState, resetState: () => void, shouldRun?: boolean) => void;
     onCancel?: () => void;
 };
 
@@ -98,11 +98,15 @@ export const IngestionSourceBuilderModal = ({ initialState, visible, onSubmit, o
         onCancel?.();
     };
 
-    const submit = () => {
+    const submit = (shouldRun?: boolean) => {
-        onSubmit?.(ingestionBuilderState, () => {
+        onSubmit?.(
+            ingestionBuilderState,
+            () => {
                 setStepStack([initialStep]);
                 setIngestionBuilderState({});
-        });
+            },
+            shouldRun,
+        );
     };
 
     const currentStep = stepStack[stepStack.length - 1];

datahub-web-react/src/app/ingest/source/builder/NameSourceStep.tsx

@@ -9,6 +9,10 @@ const ControlsContainer = styled.div`
     margin-top: 8px;
 `;
 
+const SaveButton = styled(Button)`
+    margin-right: 15px;
+`;
+
 export const NameSourceStep = ({ state, updateState, prev, submit }: StepProps) => {
     const setName = (stagedName: string) => {
         const newState: SourceBuilderState = {
@@ -40,9 +44,9 @@ export const NameSourceStep = ({ state, updateState, prev, submit }: StepProps)
         updateState(newState);
     };
 
-    const onClickCreate = () => {
+    const onClickCreate = (shouldRun?: boolean) => {
         if (state.name !== undefined && state.name.length > 0) {
-            submit();
+            submit(shouldRun);
         }
     };
 
@@ -93,9 +97,21 @@ export const NameSourceStep = ({ state, updateState, prev, submit }: StepProps)
             </Form>
             <ControlsContainer>
                 <Button onClick={prev}>Previous</Button>
-                <Button disabled={!(state.name !== undefined && state.name.length > 0)} onClick={onClickCreate}>
+                <div>
-                    Done
+                    <SaveButton
+                        disabled={!(state.name !== undefined && state.name.length > 0)}
+                        onClick={() => onClickCreate(false)}
+                    >
+                        Save
+                    </SaveButton>
+                    <Button
+                        disabled={!(state.name !== undefined && state.name.length > 0)}
+                        onClick={() => onClickCreate(true)}
+                        type="primary"
+                    >
+                        Save & Run
                     </Button>
+                </div>
             </ControlsContainer>
         </>
     );

datahub-web-react/src/app/ingest/source/builder/types.ts

@@ -21,7 +21,7 @@ export type StepProps = {
     updateState: (newState: SourceBuilderState) => void;
     goTo: (step: IngestionSourceBuilderStep) => void;
     prev?: () => void;
-    submit: () => void;
+    submit: (shouldRun?: boolean) => void;
     cancel: () => void;
 };