From d5b0b924371f1419d08cdd8aec1b9050d6736394 Mon Sep 17 00:00:00 2001
From: Pavel Zavora <pavel.zavora@bonitoo.io>
Date: Mon, 21 Mar 2022 06:24:36 +0100
Subject: [PATCH 1/7] feat(ui/flux): detect custom script

---
 .../components/TimeMachine/FluxQueryMaker.tsx     |  2 ++
 .../fluxQueryBuilder/FluxQueryBuilder.tsx         | 15 +++++++++++++--
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/ui/src/shared/components/TimeMachine/FluxQueryMaker.tsx b/ui/src/shared/components/TimeMachine/FluxQueryMaker.tsx
index 37276f946..cf7a1fd46 100644
--- a/ui/src/shared/components/TimeMachine/FluxQueryMaker.tsx
+++ b/ui/src/shared/components/TimeMachine/FluxQueryMaker.tsx
@@ -90,6 +90,7 @@ class FluxQueryMaker extends PureComponent<Props, State> {
       fluxProportions,
       onSetFluxProportions,
       timeRange,
+      script,
     } = this.props
     if (!this.state.isWizardActive) {
       const {suggestions, draftScriptStatus} = this.state
@@ -172,6 +173,7 @@ class FluxQueryMaker extends PureComponent<Props, State> {
 
     return (
       <FluxQueryBuilder
+        script={script}
         source={source}
         timeRange={timeRange}
         onSubmit={this.handleSubmitBuilderScript}
diff --git a/ui/src/shared/components/TimeMachine/fluxQueryBuilder/FluxQueryBuilder.tsx b/ui/src/shared/components/TimeMachine/fluxQueryBuilder/FluxQueryBuilder.tsx
index b30bce078..14d72be21 100644
--- a/ui/src/shared/components/TimeMachine/fluxQueryBuilder/FluxQueryBuilder.tsx
+++ b/ui/src/shared/components/TimeMachine/fluxQueryBuilder/FluxQueryBuilder.tsx
@@ -32,7 +32,7 @@ import {timeRangeLabel} from '../../TimeRangeLabel'
 interface OwnProps extends TimeMachineQueryProps {
   onSubmit: (script: string) => void
   onShowEditor: () => void
-  isRunnable: boolean
+  script: string
 }
 
 type Props = OwnProps & typeof mdtp & ReturnType<typeof mstp>
@@ -48,6 +48,7 @@ const FluxQueryBuilder = ({
   onSubmit,
   onShowEditor,
   onAddTagSelector,
+  script: editorScript,
 }: Props) => {
   const [defaultPeriod, timeRangeText] = useMemo(
     () => [
@@ -56,6 +57,14 @@ const FluxQueryBuilder = ({
     ],
     [timeRange, timeZone]
   )
+  // isCustomScript detects if the supplied script contains user changes
+  const isCustomScript = useMemo(() => {
+    if (!editorScript) {
+      return false
+    }
+    const builtScript = buildQuery(builderState)
+    return editorScript !== builtScript
+  }, [editorScript])
 
   return (
     <div className="flux-query-builder" data-testid="flux-query-builder">
@@ -130,7 +139,9 @@ const FluxQueryBuilder = ({
             />
             <Button
               size={ComponentSize.ExtraSmall}
-              color={ComponentColor.Primary}
+              color={
+                isCustomScript ? ComponentColor.Warning : ComponentColor.Primary
+              }
               onClick={() => {
                 try {
                   const script = buildQuery(builderState)

From 526d70583ec2f821cd41f4861317542c4c6e3e6b Mon Sep 17 00:00:00 2001
From: Pavel Zavora <pavel.zavora@bonitoo.io>
Date: Mon, 21 Mar 2022 07:19:44 +0100
Subject: [PATCH 2/7] feat(ui/flux): add FluxQueryBuilderSubmit component

---
 .../fluxQueryBuilder/FluxQueryBuilder.tsx     | 39 +++++++------------
 .../FluxQueryBuilderSubmit.tsx                | 36 +++++++++++++++++
 2 files changed, 51 insertions(+), 24 deletions(-)
 create mode 100644 ui/src/shared/components/TimeMachine/fluxQueryBuilder/FluxQueryBuilderSubmit.tsx

diff --git a/ui/src/shared/components/TimeMachine/fluxQueryBuilder/FluxQueryBuilder.tsx b/ui/src/shared/components/TimeMachine/fluxQueryBuilder/FluxQueryBuilder.tsx
index 14d72be21..dbe727b6e 100644
--- a/ui/src/shared/components/TimeMachine/fluxQueryBuilder/FluxQueryBuilder.tsx
+++ b/ui/src/shared/components/TimeMachine/fluxQueryBuilder/FluxQueryBuilder.tsx
@@ -1,5 +1,5 @@
 // Libraries
-import React, {useMemo} from 'react'
+import React, {useCallback, useMemo} from 'react'
 import {connect} from 'react-redux'
 import copyToClipboard from 'copy-to-clipboard'
 
@@ -9,7 +9,6 @@ import FancyScrollbar from '../../FancyScrollbar'
 import {
   Button,
   ButtonShape,
-  ComponentColor,
   ComponentSize,
   ComponentStatus,
   IconFont,
@@ -28,6 +27,7 @@ import timeRangeWindowPeriod from './util/timeRangeWindowPeriod'
 import {RemoteDataState, TimeZones} from 'src/types'
 import {buildQuery} from './util/generateFlux'
 import {timeRangeLabel} from '../../TimeRangeLabel'
+import FluxQueryBuilderSubmit from './FluxQueryBuilderSubmit'
 
 interface OwnProps extends TimeMachineQueryProps {
   onSubmit: (script: string) => void
@@ -65,6 +65,15 @@ const FluxQueryBuilder = ({
     const builtScript = buildQuery(builderState)
     return editorScript !== builtScript
   }, [editorScript])
+  const submitAction = useCallback(() => {
+    try {
+      const script = buildQuery(builderState)
+      onSubmit(script)
+    } catch (ex) {
+      console.error(ex)
+      notify(fluxWizardError('Unable to build flux script: ' + ex.message))
+    }
+  }, [builderState, notify])
 
   return (
     <div className="flux-query-builder" data-testid="flux-query-builder">
@@ -137,28 +146,10 @@ const FluxQueryBuilder = ({
                 e.preventDefault()
               }}
             />
-            <Button
-              size={ComponentSize.ExtraSmall}
-              color={
-                isCustomScript ? ComponentColor.Warning : ComponentColor.Primary
-              }
-              onClick={() => {
-                try {
-                  const script = buildQuery(builderState)
-                  onSubmit(script)
-                } catch (ex) {
-                  console.error(ex)
-                  notify(
-                    fluxWizardError(
-                      'Unable to build flux script: ' + ex.message
-                    )
-                  )
-                }
-              }}
-              status={
-                isRunnable ? ComponentStatus.Default : ComponentStatus.Disabled
-              }
-              text="Submit"
+            <FluxQueryBuilderSubmit
+              isCustomScript={isCustomScript}
+              isRunnable={isRunnable}
+              submitAction={submitAction}
             />
           </div>
         </AggregationSelector>
diff --git a/ui/src/shared/components/TimeMachine/fluxQueryBuilder/FluxQueryBuilderSubmit.tsx b/ui/src/shared/components/TimeMachine/fluxQueryBuilder/FluxQueryBuilderSubmit.tsx
new file mode 100644
index 000000000..d7c1865bb
--- /dev/null
+++ b/ui/src/shared/components/TimeMachine/fluxQueryBuilder/FluxQueryBuilderSubmit.tsx
@@ -0,0 +1,36 @@
+// Libraries
+import React from 'react'
+import {
+  Button,
+  ComponentColor,
+  ComponentSize,
+  ComponentStatus,
+} from 'src/reusable_ui'
+
+interface Props {
+  isCustomScript: boolean
+  isRunnable: boolean
+  submitAction: () => void
+}
+
+const FluxQueryBuilderSubmit = ({
+  isCustomScript,
+  isRunnable,
+  submitAction,
+}: Props) => {
+  // TODO require confirmation when isCustomScript
+  // Submitting the query builder will discard any changes you have made
+  // using Flux. This cannot be recovered.
+
+  return (
+    <Button
+      size={ComponentSize.ExtraSmall}
+      color={isCustomScript ? ComponentColor.Warning : ComponentColor.Primary}
+      onClick={submitAction}
+      status={isRunnable ? ComponentStatus.Default : ComponentStatus.Disabled}
+      text="Submit"
+    />
+  )
+}
+
+export default FluxQueryBuilderSubmit

From f067d3d5abf7562e4078c22059fd27c620a9eb13 Mon Sep 17 00:00:00 2001
From: Pavel Zavora <pavel.zavora@bonitoo.io>
Date: Mon, 21 Mar 2022 09:59:57 +0100
Subject: [PATCH 3/7] feat(ui/flux): add builder confirmation popup

---
 .../components/TimeMachine/FluxQueryMaker.tsx |  3 +-
 .../fluxQueryBuilder/FluxQueryBuilder.scss    | 29 +++++++++
 .../FluxQueryBuilderSubmit.tsx                | 59 +++++++++++++++++--
 3 files changed, 83 insertions(+), 8 deletions(-)

diff --git a/ui/src/shared/components/TimeMachine/FluxQueryMaker.tsx b/ui/src/shared/components/TimeMachine/FluxQueryMaker.tsx
index cf7a1fd46..77ded6d46 100644
--- a/ui/src/shared/components/TimeMachine/FluxQueryMaker.tsx
+++ b/ui/src/shared/components/TimeMachine/FluxQueryMaker.tsx
@@ -90,7 +90,6 @@ class FluxQueryMaker extends PureComponent<Props, State> {
       fluxProportions,
       onSetFluxProportions,
       timeRange,
-      script,
     } = this.props
     if (!this.state.isWizardActive) {
       const {suggestions, draftScriptStatus} = this.state
@@ -173,7 +172,7 @@ class FluxQueryMaker extends PureComponent<Props, State> {
 
     return (
       <FluxQueryBuilder
-        script={script}
+        script={draftScript}
         source={source}
         timeRange={timeRange}
         onSubmit={this.handleSubmitBuilderScript}
diff --git a/ui/src/shared/components/TimeMachine/fluxQueryBuilder/FluxQueryBuilder.scss b/ui/src/shared/components/TimeMachine/fluxQueryBuilder/FluxQueryBuilder.scss
index 06304603f..7227b6eaf 100644
--- a/ui/src/shared/components/TimeMachine/fluxQueryBuilder/FluxQueryBuilder.scss
+++ b/ui/src/shared/components/TimeMachine/fluxQueryBuilder/FluxQueryBuilder.scss
@@ -185,6 +185,9 @@ $flux-form-control-checkbox-gap: 20px;
     margin-right: 4px;
     &:last-child {
       flex-grow: 1;
+      .fqb--submit {
+        width: 100%;
+      }
     }
   }
 }
@@ -208,3 +211,29 @@ button.flux-query-builder--add-card-button {
   font-size: 13px;
   margin-left: 4px;
 }
+
+.fqb--confirm-popup {
+  position: fixed;
+  align-items: center;
+  width: 350px;
+  user-select: none;
+  padding: 8px;
+  background-color: #202028;
+  border-color: #ff8564;
+  border-style: solid;
+  border-width: 2px;
+  border-radius: 6px;
+  box-shadow: 0 0 5px 0 #dc4e58;
+  font-size: 1.1em;
+  display: flex;
+  z-index: 5000;
+
+  span {
+    margin: 0 8px
+  }
+  > button {
+    color: #fff;
+    background: #bf3d5e;
+    background-image: linear-gradient(45deg, rgb(191, 61, 94) 0%, rgb(249, 95, 83) 100%)
+  }
+}
diff --git a/ui/src/shared/components/TimeMachine/fluxQueryBuilder/FluxQueryBuilderSubmit.tsx b/ui/src/shared/components/TimeMachine/fluxQueryBuilder/FluxQueryBuilderSubmit.tsx
index d7c1865bb..d8d2a2690 100644
--- a/ui/src/shared/components/TimeMachine/fluxQueryBuilder/FluxQueryBuilderSubmit.tsx
+++ b/ui/src/shared/components/TimeMachine/fluxQueryBuilder/FluxQueryBuilderSubmit.tsx
@@ -1,11 +1,12 @@
 // Libraries
-import React from 'react'
+import React, {useRef, useState} from 'react'
 import {
   Button,
   ComponentColor,
   ComponentSize,
   ComponentStatus,
 } from 'src/reusable_ui'
+import {ClickOutside} from '../../ClickOutside'
 
 interface Props {
   isCustomScript: boolean
@@ -18,17 +19,63 @@ const FluxQueryBuilderSubmit = ({
   isRunnable,
   submitAction,
 }: Props) => {
-  // TODO require confirmation when isCustomScript
-  // Submitting the query builder will discard any changes you have made
-  // using Flux. This cannot be recovered.
-
+  const [showConfirm, setShowConfirm] = useState(false)
+  const buttonRef = useRef<HTMLDivElement>()
+  if (isCustomScript && isRunnable) {
+    // TODO require confirmation when isCustomScript
+    // Submitting the query builder will discard any changes you have made
+    // using Flux. This cannot be recovered.
+    return (
+      <div ref={buttonRef}>
+        <Button
+          size={ComponentSize.ExtraSmall}
+          color={ComponentColor.Primary}
+          onClick={() => setShowConfirm(true)}
+          status={
+            isRunnable ? ComponentStatus.Default : ComponentStatus.Disabled
+          }
+          text="Submit"
+          customClass="fqb--submit"
+        />
+        {showConfirm ? (
+          <div
+            className="fqb--confirm-popup"
+            style={{
+              left: `${
+                buttonRef.current.getBoundingClientRect().right - 350
+              }px`,
+            }}
+          >
+            <span>
+              Submitting the query builder will overwrite the editor script and
+              can thus discard any changes you have made using Flux. This cannot
+              be recovered.
+            </span>
+            <ClickOutside onClickOutside={() => setShowConfirm(false)}>
+              <Button
+                size={ComponentSize.ExtraSmall}
+                color={ComponentColor.Danger}
+                onClick={() => {
+                  setShowConfirm(false)
+                  submitAction()
+                }}
+                status={ComponentStatus.Default}
+                text="OK"
+              />
+            </ClickOutside>
+          </div>
+        ) : null}
+      </div>
+    )
+  }
   return (
     <Button
       size={ComponentSize.ExtraSmall}
-      color={isCustomScript ? ComponentColor.Warning : ComponentColor.Primary}
+      color={ComponentColor.Primary}
       onClick={submitAction}
       status={isRunnable ? ComponentStatus.Default : ComponentStatus.Disabled}
       text="Submit"
+      customClass="fqb--submit"
     />
   )
 }

From df3b840d42aba947ddb04b99b71fdb2c47a49e1e Mon Sep 17 00:00:00 2001
From: Pavel Zavora <pavel.zavora@bonitoo.io>
Date: Mon, 21 Mar 2022 11:38:58 +0100
Subject: [PATCH 4/7] feat(ui/flux): confirm script overwrite only when
 necessary

---
 .../fluxQueryBuilder/FluxQueryBuilder.tsx     |  26 +---
 .../FluxQueryBuilderSubmit.tsx                | 121 +++++++++++++-----
 2 files changed, 92 insertions(+), 55 deletions(-)

diff --git a/ui/src/shared/components/TimeMachine/fluxQueryBuilder/FluxQueryBuilder.tsx b/ui/src/shared/components/TimeMachine/fluxQueryBuilder/FluxQueryBuilder.tsx
index dbe727b6e..d900ba741 100644
--- a/ui/src/shared/components/TimeMachine/fluxQueryBuilder/FluxQueryBuilder.tsx
+++ b/ui/src/shared/components/TimeMachine/fluxQueryBuilder/FluxQueryBuilder.tsx
@@ -1,5 +1,5 @@
 // Libraries
-import React, {useCallback, useMemo} from 'react'
+import React, {useMemo} from 'react'
 import {connect} from 'react-redux'
 import copyToClipboard from 'copy-to-clipboard'
 
@@ -17,7 +17,6 @@ import AggregationSelector from './AggregationSelector'
 import TagSelector from './TagSelector'
 import {notify as notifyActionCreator} from 'src/shared/actions/notifications'
 import {
-  fluxWizardError,
   notifyCopyToClipboardFailed,
   notifyCopyToClipboardSuccess,
 } from 'src/shared/copy/notifications'
@@ -57,23 +56,6 @@ const FluxQueryBuilder = ({
     ],
     [timeRange, timeZone]
   )
-  // isCustomScript detects if the supplied script contains user changes
-  const isCustomScript = useMemo(() => {
-    if (!editorScript) {
-      return false
-    }
-    const builtScript = buildQuery(builderState)
-    return editorScript !== builtScript
-  }, [editorScript])
-  const submitAction = useCallback(() => {
-    try {
-      const script = buildQuery(builderState)
-      onSubmit(script)
-    } catch (ex) {
-      console.error(ex)
-      notify(fluxWizardError('Unable to build flux script: ' + ex.message))
-    }
-  }, [builderState, notify])
 
   return (
     <div className="flux-query-builder" data-testid="flux-query-builder">
@@ -147,9 +129,11 @@ const FluxQueryBuilder = ({
               }}
             />
             <FluxQueryBuilderSubmit
-              isCustomScript={isCustomScript}
               isRunnable={isRunnable}
-              submitAction={submitAction}
+              builderState={builderState}
+              editorScript={editorScript}
+              notify={notify}
+              onSubmit={onSubmit}
             />
           </div>
         </AggregationSelector>
diff --git a/ui/src/shared/components/TimeMachine/fluxQueryBuilder/FluxQueryBuilderSubmit.tsx b/ui/src/shared/components/TimeMachine/fluxQueryBuilder/FluxQueryBuilderSubmit.tsx
index d8d2a2690..dc72425dc 100644
--- a/ui/src/shared/components/TimeMachine/fluxQueryBuilder/FluxQueryBuilderSubmit.tsx
+++ b/ui/src/shared/components/TimeMachine/fluxQueryBuilder/FluxQueryBuilderSubmit.tsx
@@ -1,43 +1,96 @@
 // Libraries
-import React, {useRef, useState} from 'react'
+import React, {useMemo, useRef, useState} from 'react'
 import {
   Button,
   ComponentColor,
   ComponentSize,
   ComponentStatus,
 } from 'src/reusable_ui'
+import {fluxWizardError} from 'src/shared/copy/notifications'
+import {PublishNotificationActionCreator} from 'src/types/actions/notifications'
 import {ClickOutside} from '../../ClickOutside'
+import {QueryBuilderState} from './types'
+import {buildQuery} from './util/generateFlux'
 
 interface Props {
-  isCustomScript: boolean
   isRunnable: boolean
-  submitAction: () => void
+  onSubmit: (s: string) => void
+  editorScript: string
+  builderState: QueryBuilderState
+  notify: PublishNotificationActionCreator
 }
+const EMPTY_FN = () => {}
 
 const FluxQueryBuilderSubmit = ({
-  isCustomScript,
+  builderState,
   isRunnable,
-  submitAction,
+  editorScript,
+  onSubmit,
+  notify,
 }: Props) => {
+  if (!isRunnable) {
+    return (
+      <Button
+        size={ComponentSize.ExtraSmall}
+        color={ComponentColor.Primary}
+        onClick={EMPTY_FN}
+        status={ComponentStatus.Disabled}
+        text="Submit"
+        customClass="fqb--submit"
+      />
+    )
+  }
+
   const [showConfirm, setShowConfirm] = useState(false)
   const buttonRef = useRef<HTMLDivElement>()
-  if (isCustomScript && isRunnable) {
-    // TODO require confirmation when isCustomScript
-    // Submitting the query builder will discard any changes you have made
-    // using Flux. This cannot be recovered.
-    return (
-      <div ref={buttonRef}>
+  const lastConfirmedBuilderState = useMemo(() => {
+    return builderState
+  }, [editorScript])
+
+  return (
+    <div ref={buttonRef}>
+      {!showConfirm ? (
         <Button
           size={ComponentSize.ExtraSmall}
           color={ComponentColor.Primary}
-          onClick={() => setShowConfirm(true)}
-          status={
-            isRunnable ? ComponentStatus.Default : ComponentStatus.Disabled
-          }
+          onClick={() => {
+            try {
+              const script = buildQuery(builderState)
+              const lastScript = buildQuery(lastConfirmedBuilderState)
+              // submit directly if editor is empty, the generated query is the same as the editor query
+              // or if the builder was used to generate the new script
+              if (
+                !editorScript ||
+                script === editorScript ||
+                editorScript === lastScript
+              ) {
+                onSubmit(script)
+              } else {
+                setShowConfirm(true)
+              }
+            } catch (ex) {
+              console.error(ex)
+              notify(
+                fluxWizardError('Unable to build flux script: ' + ex.message)
+              )
+            }
+          }}
+          status={ComponentStatus.Default}
           text="Submit"
           customClass="fqb--submit"
         />
-        {showConfirm ? (
+      ) : (
+        <>
+          <Button
+            size={ComponentSize.ExtraSmall}
+            color={ComponentColor.Primary}
+            onClick={EMPTY_FN}
+            status={
+              isRunnable ? ComponentStatus.Default : ComponentStatus.Disabled
+            }
+            text="Submit"
+            customClass="fqb--submit"
+          />
           <div
             className="fqb--confirm-popup"
             style={{
@@ -47,36 +100,36 @@ const FluxQueryBuilderSubmit = ({
             }}
           >
             <span>
-              Submitting the query builder will overwrite the editor script and
-              can thus discard any changes you have made using Flux. This cannot
-              be recovered.
+              Submitting the Script Builder will overwrite the existing Flux
+              script, any changes you have made using Flux will be discarded.
+              This cannot be recovered.
             </span>
             <ClickOutside onClickOutside={() => setShowConfirm(false)}>
               <Button
                 size={ComponentSize.ExtraSmall}
                 color={ComponentColor.Danger}
                 onClick={() => {
-                  setShowConfirm(false)
-                  submitAction()
+                  try {
+                    const script = buildQuery(builderState)
+                    setShowConfirm(false)
+                    onSubmit(script)
+                  } catch (ex) {
+                    console.error(ex)
+                    notify(
+                      fluxWizardError(
+                        'Unable to build flux script: ' + ex.message
+                      )
+                    )
+                  }
                 }}
                 status={ComponentStatus.Default}
                 text="OK"
               />
             </ClickOutside>
           </div>
-        ) : null}
-      </div>
-    )
-  }
-  return (
-    <Button
-      size={ComponentSize.ExtraSmall}
-      color={ComponentColor.Primary}
-      onClick={submitAction}
-      status={isRunnable ? ComponentStatus.Default : ComponentStatus.Disabled}
-      text="Submit"
-      customClass="fqb--submit"
-    />
+        </>
+      )}
+    </div>
   )
 }
 

From d033e9ee9678fa910eb2cbdd0be6dab3afa95f14 Mon Sep 17 00:00:00 2001
From: Pavel Zavora <pavel.zavora@bonitoo.io>
Date: Mon, 21 Mar 2022 12:00:22 +0100
Subject: [PATCH 5/7] chore: update changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index aeab62346..60999075d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -15,6 +15,7 @@
 1. [#5856](https://github.com/influxdata/chronograf/pull/5856): Add alert rule options to not send alert on state recovery and send regardless of state change.
 1. [#5893](https://github.com/influxdata/chronograf/pull/5893): Make aggregation function selection optional.
 1. [#5894](https://github.com/influxdata/chronograf/pull/5894): Autocomplete builtin `v` object in Flux editor.
+1. [#5895](https://github.com/influxdata/chronograf/pull/5895): Warn before overriding the existing Flux Editor script.
 
 ### Bug Fixes
 

From 2ef79656954ef3c842b422ff14bb66d1b9e6b220 Mon Sep 17 00:00:00 2001
From: Pavel Zavora <pavel.zavora@bonitoo.io>
Date: Mon, 21 Mar 2022 14:52:45 +0100
Subject: [PATCH 6/7] chore(ui/flux): improve tooltips

---
 .../TimeMachine/fluxQueryBuilder/FluxQueryBuilder.tsx       | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/ui/src/shared/components/TimeMachine/fluxQueryBuilder/FluxQueryBuilder.tsx b/ui/src/shared/components/TimeMachine/fluxQueryBuilder/FluxQueryBuilder.tsx
index d900ba741..48bf57a61 100644
--- a/ui/src/shared/components/TimeMachine/fluxQueryBuilder/FluxQueryBuilder.tsx
+++ b/ui/src/shared/components/TimeMachine/fluxQueryBuilder/FluxQueryBuilder.tsx
@@ -97,7 +97,7 @@ const FluxQueryBuilder = ({
             <Button
               shape={ButtonShape.Square}
               size={ComponentSize.ExtraSmall}
-              titleText="Copy builder query to clipboard"
+              titleText="Copy builder script to clipboard"
               icon={IconFont.Duplicate}
               status={
                 isRunnable ? ComponentStatus.Default : ComponentStatus.Disabled
@@ -115,12 +115,12 @@ const FluxQueryBuilder = ({
                   success
                     ? notifyCopyToClipboardSuccess(
                         null,
-                        'Query builder flux script has been copied to clipboard.',
+                        'Builder script has been copied to clipboard.',
                         ''
                       )
                     : notifyCopyToClipboardFailed(
                         null,
-                        'Query builder flux script was not copied to clipboard.',
+                        'Builder script was not copied to clipboard.',
                         ''
                       )
                 )

From 0323d09cdf1a41daeacbb20bcc737a84641bec71 Mon Sep 17 00:00:00 2001
From: Pavel Zavora <pavel.zavora@bonitoo.io>
Date: Mon, 21 Mar 2022 15:40:55 +0100
Subject: [PATCH 7/7] feat(ui/flux): add caret to query builder overwrite
 confirmation

---
 .../fluxQueryBuilder/FluxQueryBuilder.scss        | 15 ++++++++++++++-
 .../fluxQueryBuilder/FluxQueryBuilderSubmit.tsx   | 12 +++++++++++-
 2 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/ui/src/shared/components/TimeMachine/fluxQueryBuilder/FluxQueryBuilder.scss b/ui/src/shared/components/TimeMachine/fluxQueryBuilder/FluxQueryBuilder.scss
index 7227b6eaf..3d6fbd2fa 100644
--- a/ui/src/shared/components/TimeMachine/fluxQueryBuilder/FluxQueryBuilder.scss
+++ b/ui/src/shared/components/TimeMachine/fluxQueryBuilder/FluxQueryBuilder.scss
@@ -228,7 +228,7 @@ button.flux-query-builder--add-card-button {
   display: flex;
   z-index: 5000;
 
-  span {
+  .fqb--confirm-label {
     margin: 0 8px
   }
   > button {
@@ -237,3 +237,16 @@ button.flux-query-builder--add-card-button {
     background-image: linear-gradient(45deg, rgb(191, 61, 94) 0%, rgb(249, 95, 83) 100%)
   }
 }
+.fqb--confirm-caret {
+  content: "";
+  width: 0;
+  height: 0;
+  position: fixed;
+  border-top: 6px solid transparent;
+  border-bottom: 6px solid #ff8564;
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  margin-top: -12px;
+  margin-left: -3px;
+  z-index: 9999;
+}
diff --git a/ui/src/shared/components/TimeMachine/fluxQueryBuilder/FluxQueryBuilderSubmit.tsx b/ui/src/shared/components/TimeMachine/fluxQueryBuilder/FluxQueryBuilderSubmit.tsx
index dc72425dc..02293df04 100644
--- a/ui/src/shared/components/TimeMachine/fluxQueryBuilder/FluxQueryBuilderSubmit.tsx
+++ b/ui/src/shared/components/TimeMachine/fluxQueryBuilder/FluxQueryBuilderSubmit.tsx
@@ -99,7 +99,7 @@ const FluxQueryBuilderSubmit = ({
               }px`,
             }}
           >
-            <span>
+            <span className="fqb--confirm-label">
               Submitting the Script Builder will overwrite the existing Flux
               script, any changes you have made using Flux will be discarded.
               This cannot be recovered.
@@ -127,6 +127,16 @@ const FluxQueryBuilderSubmit = ({
               />
             </ClickOutside>
           </div>
+          <span
+            className="fqb--confirm-caret"
+            style={{
+              left: `${
+                buttonRef.current.getBoundingClientRect().left +
+                buttonRef.current.getBoundingClientRect().width / 2
+              }px`,
+              top: `${buttonRef.current.getBoundingClientRect().bottom}px`,
+            }}
+          />
         </>
       )}
     </div>