feat: consolidated runall code into one react hook, use from run all …

…and from all from here buttons

querybook/webapp/components/DataDocCell/DataDocCell.tsx

@@ -1,11 +1,5 @@
 import clsx from 'clsx';
-import React, {
-    useCallback,
-    useContext,
-    useEffect,
-    useMemo,
-    useRef,
-} from 'react';
+import React, { useCallback, useContext, useEffect, useMemo } from 'react';
 import { useSelector } from 'react-redux';
 
 import { DataDocCellControl } from 'components/DataDoc/DataDocCellControl';
@@ -28,15 +22,9 @@ import { getShareUrl } from 'lib/data-doc/data-doc-utils';
 import * as dataDocActions from 'redux/dataDoc/action';
 import * as dataDocSelectors from 'redux/dataDoc/selector';
 import { IStoreState } from 'redux/store/types';
-import { useQueryCells } from '../../hooks/dataDoc/useQueryCells';
-import { makeLatestQueryExecutionsSelector } from '../../redux/queryExecutions/selector';
-import { sendConfirm } from '../../lib/querybookUI';
-import { DataDocRunAllButtonConfirm } from '../DataDocRightSidebar/DataDocRunAllButtonConfirm';
-import toast from 'react-hot-toast';
-import { DataDocResource } from '../../resource/dataDoc';
-import { QueryExecutionStatus } from '../../const/queryExecution';
 
 import './DataDocCell.scss';
+import { useRunAllFromIndex } from 'hooks/dataDoc/useRunAllFromIndex';
 
 interface IDataDocCellProps {
     docId: number;
@@ -62,53 +50,6 @@ function getEstimatedCellHeight(cell: IDataCell) {
     return 80;
 }
 
-function useRunAll(docId, index) {
-    let queryCells = useQueryCells(docId);
-    queryCells = queryCells.slice(index);
-
-    const latestQueryExecutions = useMakeSelector(
-        makeLatestQueryExecutionsSelector,
-        queryCells.map((c) => c.id) ?? []
-    );
-    const hasQueryRunning = useMemo(
-        () => latestQueryExecutions.some((q) => QueryExecutionStatus.DONE),
-        [latestQueryExecutions]
-    );
-    const notification = useRef(true);
-
-    const onRunAll = useCallback(() => {
-        sendConfirm({
-            header: 'Run all cells below',
-            message: (
-                <DataDocRunAllButtonConfirm
-                    defaultNotification={notification.current}
-                    onNotificationChange={(value) => {
-                        notification.current = value;
-                    }}
-                    hasQueryRunning={hasQueryRunning}
-                    queryCells={queryCells}
-                />
-            ),
-            onConfirm: () => {
-                trackClick({
-                    component: ComponentType.DATADOC_PAGE,
-                    element: ElementType.RUN_ALL_FROM_CELL_BUTTON,
-                });
-                toast.promise(
-                    DataDocResource.run(docId, notification.current, index),
-                    {
-                        loading: null,
-                        success: 'DataDoc execution started!',
-                        error: 'Failed to start the execution',
-                    }
-                );
-            },
-            confirmText: 'Run',
-        });
-        return null;
-    }, [docId, hasQueryRunning, notification, queryCells]);
-}
-
 // renders cell
 export const DataDocCell: React.FunctionComponent<IDataDocCellProps> =
     React.memo(
@@ -140,6 +81,12 @@ export const DataDocCell: React.FunctionComponent<IDataDocCellProps> =
                 fullScreenCellIndex,
             } = useContext(DataDocContext);
 
+            const onRunAllFromIndex = useRunAllFromIndex(
+                docId,
+                queryIndexInDoc
+            );
+            console.log(onRunAllFromIndex);
+
             const cellIdtoUid = useMakeSelector(
                 dataDocSelectors.makeDataDocCursorByCellIdSelector,
                 docId
@@ -246,7 +193,7 @@ export const DataDocCell: React.FunctionComponent<IDataDocCellProps> =
                         templatedVariables,
                         isFullScreen,
                         toggleFullScreen,
-                        useRunAll,
+                        onRunAllFromIndex,
                     };
                     cellDOM = <DataDocQueryCell {...allProps} />;
                 } else if (cell.cell_type === 'chart') {

querybook/webapp/components/DataDocQueryCell/DataDocQueryCell.tsx

@@ -93,7 +93,7 @@ interface IOwnProps {
     onUpKeyPressed?: () => any;
     onDownKeyPressed?: () => any;
     toggleFullScreen: () => any;
-    useRunAll: (docId: number, index: number) => any;
+    onRunAllFromIndex: () => any;
 }
 type IProps = IOwnProps & StateProps & DispatchProps;
 
@@ -548,12 +548,12 @@ class DataDocQueryCellComponent extends React.PureComponent<IProps, IState> {
 
         additionalButtons.push({
             name: 'Run From Current Cell',
-            onClick: this.props.useRunAll(
-                this.props.docId,
-                this.props.queryIndexInDoc
-            ),
+            onClick: () => {
+                this.props.onRunAllFromIndex();
+            },
             icon: 'FastForward',
-            tooltip: 'Run all cells in the current datadoc after this cell',
+            tooltip:
+                'Run all cells in the current datadoc starting from this cell',
             tooltipPos: 'left',
         });
 

querybook/webapp/components/DataDocRightSidebar/DataDocRunAllButton.tsx

@@ -1,16 +1,8 @@
-import React, { useCallback, useMemo, useRef } from 'react';
-import toast from 'react-hot-toast';
+import React from 'react';
 
-import { ComponentType, ElementType } from 'const/analytics';
-import { useQueryCells } from 'hooks/dataDoc/useQueryCells';
-import { useMakeSelector } from 'hooks/redux/useMakeSelector';
-import { trackClick } from 'lib/analytics';
-import { sendConfirm } from 'lib/querybookUI';
-import { makeLatestQueryExecutionsSelector } from 'redux/queryExecutions/selector';
-import { DataDocResource } from 'resource/dataDoc';
 import { IconButton } from 'ui/Button/IconButton';
 
-import { DataDocRunAllButtonConfirm } from './DataDocRunAllButtonConfirm';
+import { useRunAllFromIndex } from '../../hooks/dataDoc/useRunAllFromIndex';
 
 interface IProps {
     docId: number;
@@ -19,47 +11,7 @@ interface IProps {
 export const DataDocRunAllButton: React.FunctionComponent<IProps> = ({
     docId,
 }) => {
-    const queryCells = useQueryCells(docId);
-    const latestQueryExecutions = useMakeSelector(
-        makeLatestQueryExecutionsSelector,
-        queryCells.map((c) => c.id) ?? []
-    );
-    const hasQueryRunning = useMemo(
-        () => latestQueryExecutions.some((q) => q.status < 3),
-        [latestQueryExecutions]
-    );
-    const notification = useRef(true);
-
-    const onRunAll = useCallback(() => {
-        sendConfirm({
-            header: 'Run All Cells',
-            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, notification.current),
-                    {
-                        loading: null,
-                        success: 'DataDoc execution started!',
-                        error: 'Failed to start the execution',
-                    }
-                );
-            },
-            confirmText: 'Run',
-        });
-    }, [docId, hasQueryRunning, notification, queryCells]);
+    const onRunAll = useRunAllFromIndex(docId, null);
 
     return (
         <IconButton

querybook/webapp/components/DataDocRightSidebar/DataDocRunAllButtonConfirm.tsx

@@ -1,21 +1,24 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 
 import { useQueryCells } from 'hooks/dataDoc/useQueryCells';
 import { Message } from 'ui/Message/Message';
 import { ToggleSwitch } from 'ui/ToggleSwitch/ToggleSwitch';
+import { useMakeSelector } from '../../hooks/redux/useMakeSelector';
+import { makeLatestQueryExecutionsSelector } from '../../redux/queryExecutions/selector';
+import { QueryExecutionStatus } from '../../const/queryExecution';
 
 interface IProps {
     defaultNotification: boolean;
     onNotificationChange: (notification: boolean) => void;
-    hasQueryRunning: boolean;
-    queryCells: ReturnType<typeof useQueryCells>;
+    docId: number;
+    index?: number;
 }
 
 export const DataDocRunAllButtonConfirm: React.FunctionComponent<IProps> = ({
     defaultNotification,
     onNotificationChange,
-    hasQueryRunning,
-    queryCells,
+    docId,
+    index,
 }) => {
     const [notification, setNotification] = useState(defaultNotification);
 
@@ -27,6 +30,20 @@ export const DataDocRunAllButtonConfirm: React.FunctionComponent<IProps> = ({
         [onNotificationChange, setNotification]
     );
 
+    let queryCells = useQueryCells(docId);
+    if (index !== undefined) {
+        queryCells = queryCells.slice(index);
+    }
+
+    const latestQueryExecutions = useMakeSelector(
+        makeLatestQueryExecutionsSelector,
+        queryCells.map((c) => c.id) ?? []
+    );
+    const hasQueryRunning = useMemo(
+        () => latestQueryExecutions.some((q) => QueryExecutionStatus.DONE),
+        [latestQueryExecutions]
+    );
+
     return (
         <div>
             {hasQueryRunning && (

querybook/webapp/hooks/dataDoc/useRunAllFromIndex.tsx

@@ -0,0 +1,47 @@
+import React, { useCallback, useRef } from 'react';
+import { sendConfirm } from '../../lib/querybookUI';
+import { DataDocRunAllButtonConfirm } from '../../components/DataDocRightSidebar/DataDocRunAllButtonConfirm';
+import { trackClick } from '../../lib/analytics';
+import { ComponentType, ElementType } from '../../const/analytics';
+import toast from 'react-hot-toast';
+import { DataDocResource } from '../../resource/dataDoc';
+
+export function useRunAllFromIndex(docId: number, index?: number) {
+    const header =
+        index === undefined ? 'Run All Cells' : 'Run all cells below';
+
+    const notification = useRef(true);
+
+    const onRunAll = useCallback(() => {
+        sendConfirm({
+            header,
+            message: (
+                <DataDocRunAllButtonConfirm
+                    defaultNotification={notification.current}
+                    onNotificationChange={(value) => {
+                        notification.current = value;
+                    }}
+                    docId={docId}
+                    index={index}
+                />
+            ),
+            onConfirm: () => {
+                trackClick({
+                    component: ComponentType.DATADOC_PAGE,
+                    element: ElementType.RUN_ALL_FROM_CELL_BUTTON,
+                });
+                toast.promise(
+                    DataDocResource.run(docId, notification.current, index),
+                    {
+                        loading: null,
+                        success: 'DataDoc execution started!',
+                        error: 'Failed to start the execution',
+                    }
+                );
+            },
+            confirmText: 'Run',
+        });
+        return null;
+    }, [docId, notification]);
+    return onRunAll;
+}

querybook/webapp/resource/dataDoc.ts

@@ -107,7 +107,7 @@ export const DataDocResource = {
         startIndex: number = 0
     ) =>
         ds.save<null>(`/datadoc/${docId}/run/`, {
-            startIndex,
+            start_index: startIndex,
             send_notification: sendNotification,
         }),