From dae7953806e012fedd4b70864e719f80bbd5a447 Mon Sep 17 00:00:00 2001
From: alexpaxton <thealexpaxton@gmail.com>
Date: Tue, 26 May 2020 15:02:36 -0700
Subject: [PATCH] feat: change "Submit" to "Run Notebook" (#18230)

---
 .../notebooks/components/header/Buttons.tsx   |  9 +++++++-
 .../components/SubmitQueryButton.tsx          | 21 ++++++++++++++++---
 2 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/ui/src/notebooks/components/header/Buttons.tsx b/ui/src/notebooks/components/header/Buttons.tsx
index 9e425517c6..86b3270145 100644
--- a/ui/src/notebooks/components/header/Buttons.tsx
+++ b/ui/src/notebooks/components/header/Buttons.tsx
@@ -1,14 +1,19 @@
+// Libraries
 import React, {FC, useContext, useCallback} from 'react'
 
+// Contexts
 import {NotebookContext} from 'src/notebooks/context/notebook'
 import {TimeProvider, TimeContext, TimeBlock} from 'src/notebooks/context/time'
 import AppSettingProvider from 'src/notebooks/context/app'
 
+// Components
 import TimeZoneDropdown from 'src/notebooks/components/header/TimeZoneDropdown'
 import TimeRangeDropdown from 'src/notebooks/components/header/TimeRangeDropdown'
 import AutoRefreshDropdown from 'src/notebooks/components/header/AutoRefreshDropdown'
-
 import {SubmitQueryButton} from 'src/timeMachine/components/SubmitQueryButton'
+import {IconFont} from '@influxdata/clockface'
+
+// Types
 import {RemoteDataState} from 'src/types'
 
 export interface TimeContextProps {
@@ -44,6 +49,8 @@ const Buttons: FC = () => {
           <TimeRangeDropdown context={timeContext[id]} update={update} />
           <AutoRefreshDropdown context={timeContext[id]} update={update} />
           <SubmitQueryButton
+            text="Run Notebook"
+            icon={IconFont.Play}
             submitButtonDisabled={false}
             queryStatus={RemoteDataState.NotStarted}
             onSubmit={submit}
diff --git a/ui/src/timeMachine/components/SubmitQueryButton.tsx b/ui/src/timeMachine/components/SubmitQueryButton.tsx
index 7eda3c1d18..84df88327c 100644
--- a/ui/src/timeMachine/components/SubmitQueryButton.tsx
+++ b/ui/src/timeMachine/components/SubmitQueryButton.tsx
@@ -8,6 +8,7 @@ import {
   ComponentColor,
   ComponentSize,
   ComponentStatus,
+  IconFont,
 } from '@influxdata/clockface'
 
 // Actions
@@ -29,18 +30,32 @@ interface DispatchProps {
   onSubmit: typeof saveAndExecuteQueries | (() => void)
 }
 
-type Props = StateProps & DispatchProps
+interface OwnProps {
+  text?: string
+  icon?: IconFont
+  testID?: string
+}
+
+type Props = OwnProps & StateProps & DispatchProps
 
 class SubmitQueryButton extends PureComponent<Props> {
+  public static defaultProps = {
+    text: 'Submit',
+    testID: 'time-machine-submit-button',
+  }
+
   public render() {
+    const {text, icon, testID} = this.props
+
     return (
       <Button
-        text="Submit"
+        text={text}
+        icon={icon}
         size={ComponentSize.Small}
         status={this.buttonStatus}
         onClick={this.handleClick}
         color={ComponentColor.Primary}
-        testID="time-machine-submit-button"
+        testID={testID}
       />
     )
   }