feat: toggle run all notifications

querybook/server/datasources/datadoc.py

@@ -381,26 +381,32 @@ def run_data_doc(id):
 
 
 @register("/datadoc/<int:id>/run/", methods=["POST"])
-def adhoc_run_data_doc(id):
+def adhoc_run_data_doc(id, send_notification=False):
     assert_can_write(id)
     verify_data_doc_permission(id)
 
     notifier_name = get_user_preferred_notifier(current_user.id)
 
+    notifications = (
+        [
+            {
+                "config": {"to_user": [current_user.id]},
+                "on": 0,
+                "with": notifier_name,
+            }
+        ]
+        if send_notification
+        else []
+    )
+
     celery.send_task(
         "tasks.run_datadoc.run_datadoc",
         args=[],
         kwargs={
             "doc_id": id,
             "user_id": current_user.id,
             "execution_type": QueryExecutionType.ADHOC.value,
-            "notifications": [
-                {
-                    "config": {"to_user": [current_user.id]},
-                    "on": 0,
-                    "with": notifier_name,
-                }
-            ],
+            "notifications": notifications,
         },
     )
 

querybook/webapp/components/DataDocRightSidebar/DataDocRunAllButton.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback, useMemo, useRef } from 'react';
 import toast from 'react-hot-toast';
 
 import { ComponentType, ElementType } from 'const/analytics';
@@ -9,7 +9,8 @@ import { sendConfirm } from 'lib/querybookUI';
 import { makeLatestQueryExecutionsSelector } from 'redux/queryExecutions/selector';
 import { DataDocResource } from 'resource/dataDoc';
 import { IconButton } from 'ui/Button/IconButton';
-import { Message } from 'ui/Message/Message';
+
+import { DataDocRunAllButtonConfirm } from './DataDocRunAllButtonConfirm';
 
 interface IProps {
     docId: number;
@@ -27,43 +28,38 @@ export const DataDocRunAllButton: React.FunctionComponent<IProps> = ({
         () => latestQueryExecutions.some((q) => q.status < 3),
         [latestQueryExecutions]
     );
-
-    const ConfirmMessageDOM = useCallback(
-        () => (
-            <div>
-                {hasQueryRunning && (
-                    <Message type="warning" className="mb8">
-                        There are some query cells still running. Do you want to
-                        run anyway?
-                    </Message>
-                )}
-                <div>
-                    {`You will be executing ${queryCells.length} query cells sequentially. If any of them
-                fails, the sequence of execution will be stopped.`}
-                </div>
-            </div>
-        ),
-        [queryCells.length, hasQueryRunning]
-    );
+    const notification = useRef(true);
 
     const onRunAll = useCallback(() => {
         sendConfirm({
             header: 'Run All Cells',
-            message: ConfirmMessageDOM(),
+            message: (
+                <DataDocRunAllButtonConfirm
+                    defaultNotification={notification.current}
+                    onNotificationChange={(value) => {
+                        notification.current = value;
+                    }}
+                    hasQueryRunning={hasQueryRunning}
+                    queryCells={queryCells}
+                />
+            ),
             onConfirm: () => {
                 trackClick({
                     component: ComponentType.DATADOC_PAGE,
                     element: ElementType.RUN_ALL_CELLS_BUTTON,
                 });
-                toast.promise(DataDocResource.run(docId), {
-                    loading: null,
-                    success: 'DataDoc execution started!',
-                    error: 'Failed to start the execution',
-                });
+                toast.promise(
+                    DataDocResource.run(docId, notification.current),
+                    {
+                        loading: null,
+                        success: 'DataDoc execution started!',
+                        error: 'Failed to start the execution',
+                    }
+                );
             },
             confirmText: 'Run',
         });
-    }, [ConfirmMessageDOM, docId]);
+    }, [docId, hasQueryRunning, notification, queryCells]);
 
     return (
         <IconButton

querybook/webapp/components/DataDocRightSidebar/DataDocRunAllButtonConfirm.tsx

@@ -0,0 +1,53 @@
+import React, { useCallback, useState } from 'react';
+
+import { useQueryCells } from 'hooks/dataDoc/useQueryCells';
+import { Message } from 'ui/Message/Message';
+import { ToggleSwitch } from 'ui/ToggleSwitch/ToggleSwitch';
+
+interface IProps {
+    defaultNotification: boolean;
+    onNotificationChange: (notification: boolean) => void;
+    hasQueryRunning: boolean;
+    queryCells: ReturnType<typeof useQueryCells>;
+}
+
+export const DataDocRunAllButtonConfirm: React.FunctionComponent<IProps> = ({
+    defaultNotification,
+    onNotificationChange,
+    hasQueryRunning,
+    queryCells,
+}) => {
+    const [notification, setNotification] = useState(defaultNotification);
+
+    const internalNotificationChange = useCallback(
+        (value: boolean) => {
+            onNotificationChange(value);
+            setNotification(value);
+        },
+        [onNotificationChange, setNotification]
+    );
+
+    return (
+        <div>
+            {hasQueryRunning && (
+                <Message type="warning" className="mb8">
+                    There are some query cells still running. Do you want to run
+                    anyway?
+                </Message>
+            )}
+            <div>
+                {`You will be executing ${queryCells.length} query cells sequentially. If any of them
+            fails, the sequence of execution will be stopped.`}
+            </div>
+            <br />
+            <div className="flex-row">
+                <ToggleSwitch
+                    checked={notification}
+                    onChange={internalNotificationChange}
+                />
+
+                <span className="ml4">Send Notification when Finished</span>
+            </div>
+        </div>
+    );
+};

querybook/webapp/resource/dataDoc.ts

@@ -101,7 +101,10 @@ export const DataDocResource = {
         }>(`/favorite_data_doc/${docId}/`),
     unfavorite: (docId: number) => ds.delete(`/favorite_data_doc/${docId}/`),
 
-    run: (docId: number) => ds.save<null>(`/datadoc/${docId}/run/`),
+    run: (docId: number, sendNotification: boolean = false) =>
+        ds.save<null>(`/datadoc/${docId}/run/`, {
+            send_notification: sendNotification,
+        }),
 
     getDAGExport: (docId: number) =>
         ds.fetch<IDataDocSavedDAGExport>(`/datadoc/${docId}/dag_export/`),