feat(ui/flux): add builder confirmation popup

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}

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%)
+  }
+}

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"
     />
   )
 }