feat: update naming conventions and saving restrictions (#5584)

asalem1 · web-flow · commit 712a7d61b210 · 2022-08-31T10:49:14.000-07:00
diff --git a/cypress/e2e/shared/fluxQueryBuilder.test.ts b/cypress/e2e/shared/fluxQueryBuilder.test.ts
@@ -24,9 +24,7 @@ describe('FluxQueryBuilder', () => {
               if (!$toggle.hasClass('active')) {
                 // hasClass is a jQuery function
                 $toggle.click()
-                cy.getByTestID('flux-query-builder--menu').contains(
-                  'New Script'
-                )
+                cy.getByTestID('flux-query-builder--menu').contains('Clear')
               }
             })
           })
diff --git a/src/dataExplorer/components/DataExplorerPage.tsx b/src/dataExplorer/components/DataExplorerPage.tsx
@@ -62,15 +62,20 @@ const DataExplorerPageHeader: FC = () => {
   }
 
   let pageTitle = <Page.Title title="Data Explorer" />
+
   if (fluxQueryBuilder && resource?.data?.hasOwnProperty('name')) {
-    pageTitle = (
-      <RenamablePageTitle
-        onRename={handleRename}
-        name={resource?.data?.name || ''}
-        placeholder="Untitled Script"
-        maxLength={100}
-      />
-    )
+    if (resource?.data?.type === ResourceType.Scripts) {
+      pageTitle = <Page.Title title={resource?.data?.name ?? ''} />
+    } else {
+      pageTitle = (
+        <RenamablePageTitle
+          onRename={handleRename}
+          name={resource?.data?.name || ''}
+          placeholder="Untitled Script"
+          maxLength={100}
+        />
+      )
+    }
   }
 
   return (
diff --git a/src/dataExplorer/components/FluxQueryBuilder.tsx b/src/dataExplorer/components/FluxQueryBuilder.tsx
@@ -1,7 +1,10 @@
 import React, {FC, useState, useContext} from 'react'
+import {useHistory} from 'react-router-dom'
+import {useSelector} from 'react-redux'
 
 // Components
 import {
+  ComponentColor,
   DraggableResizer,
   FlexBox,
   FlexDirection,
@@ -25,10 +28,14 @@ import ResultsPane from 'src/dataExplorer/components/ResultsPane'
 import Sidebar from 'src/dataExplorer/components/Sidebar'
 import Schema from 'src/dataExplorer/components/Schema'
 import SaveAsScript from 'src/dataExplorer/components/SaveAsScript'
+import {QueryContext} from 'src/shared/contexts/query'
+import {ResultsContext} from 'src/dataExplorer/components/ResultsContext'
+import {isFlagEnabled} from 'src/shared/utils/featureFlag'
+import {getOrg} from 'src/organizations/selectors'
+import {RemoteDataState} from 'src/types'
 
 // Styles
 import './FluxQueryBuilder.scss'
-import {isFlagEnabled} from 'src/shared/utils/featureFlag'
 
 export enum OverlayType {
   NEW = 'new',
@@ -37,28 +44,77 @@ export enum OverlayType {
 }
 
 const FluxQueryBuilder: FC = () => {
-  const {
-    query,
-    setQuery,
-    vertical,
-    setVertical,
-    clearSchemaSelection,
-  } = useContext(PersistanceContext)
+  const history = useHistory()
+  const {hasChanged, query, vertical, setVertical} = useContext(
+    PersistanceContext
+  )
   const [overlayType, setOverlayType] = useState<OverlayType | null>(null)
+  const [isOverlayVisible, setIsOverlayVisible] = useState(false)
+  const {cancel} = useContext(QueryContext)
+  const {setStatus, setResult} = useContext(ResultsContext)
+  const org = useSelector(getOrg)
+
+  const handleClear = () => {
+    cancel()
+    setStatus(RemoteDataState.NotStarted)
+    setResult(null)
+
+    history.replace(`/orgs/${org.id}/data-explorer/from/script`)
+
+    if (!isFlagEnabled('saveAsScript')) {
+      setIsOverlayVisible(false)
+    }
+  }
+
+  const handleNewScript = () => {
+    if (isFlagEnabled('saveAsScript')) {
+      if (hasChanged) {
+        setOverlayType(OverlayType.NEW)
+      } else {
+        handleClear()
+      }
+    } else {
+      if (hasChanged) {
+        setIsOverlayVisible(true)
+      } else {
+        handleClear()
+      }
+    }
+  }
 
   return (
     <EditorProvider>
       <SidebarProvider>
-        <Overlay visible={overlayType !== null}>
-          <SaveAsScript
-            type={overlayType}
-            onClose={() => setOverlayType(null)}
-            onClear={() => {
-              clearSchemaSelection()
-              setQuery('')
-            }}
-          />
-        </Overlay>
+        {isFlagEnabled('saveAsScript') ? (
+          <Overlay visible={overlayType !== null}>
+            <SaveAsScript
+              type={overlayType}
+              onClose={() => setOverlayType(null)}
+            />
+          </Overlay>
+        ) : (
+          <Overlay visible={isOverlayVisible}>
+            <Overlay.Container maxWidth={500}>
+              <Overlay.Header title="Caution" />
+              <Overlay.Body>
+                This operation will wipe out your existing query text. Are you
+                sure you want to continue clearing your existing query?
+              </Overlay.Body>
+              <Overlay.Footer>
+                <Button
+                  color={ComponentColor.Default}
+                  onClick={() => setIsOverlayVisible(false)}
+                  text="No"
+                />
+                <Button
+                  color={ComponentColor.Primary}
+                  onClick={handleClear}
+                  text="Yes"
+                />
+              </Overlay.Footer>
+            </Overlay.Container>
+          </Overlay>
+        )}
         <FlexBox
           className="flux-query-builder--container"
           direction={FlexDirection.Column}
@@ -70,8 +126,8 @@ const FluxQueryBuilder: FC = () => {
             data-testid="flux-query-builder--menu"
           >
             <Button
-              onClick={() => setOverlayType(OverlayType.NEW)}
-              text="New Script"
+              onClick={handleNewScript}
+              text={isFlagEnabled('saveAsScript') ? 'New Script' : 'Clear'}
               icon={IconFont.Plus_New}
               status={
                 query.length === 0
@@ -92,9 +148,9 @@ const FluxQueryBuilder: FC = () => {
                 className="flux-query-builder__action-button"
                 onClick={() => setOverlayType(OverlayType.SAVE)}
                 status={
-                  query.length === 0
-                    ? ComponentStatus.Disabled
-                    : ComponentStatus.Default
+                  hasChanged
+                    ? ComponentStatus.Default
+                    : ComponentStatus.Disabled
                 }
                 text="Save"
                 icon={IconFont.Save}
diff --git a/src/dataExplorer/components/OpenScript.tsx b/src/dataExplorer/components/OpenScript.tsx
@@ -25,10 +25,11 @@ if (CLOUD) {
 }
 
 interface Props {
+  onCancel: () => void
   onClose: () => void
 }
 
-const OpenScript: FC<Props> = ({onClose}) => {
+const OpenScript: FC<Props> = ({onCancel, onClose}) => {
   const [scripts, setScripts] = useState([])
   const [loading, setLoading] = useState(RemoteDataState.NotStarted)
   const [searchTerm, setSearchTerm] = useState('')
@@ -123,7 +124,7 @@ const OpenScript: FC<Props> = ({onClose}) => {
     }
     return (
       <Overlay.Container maxWidth={500}>
-        <Overlay.Header title="Open Script" onDismiss={onClose} />
+        <Overlay.Header title="Open Script" onDismiss={onCancel} />
         <Overlay.Body>
           <Input
             className="data-source--search"
@@ -138,14 +139,14 @@ const OpenScript: FC<Props> = ({onClose}) => {
         <Overlay.Footer>
           <Button
             color={ComponentColor.Tertiary}
-            onClick={onClose}
+            onClick={onCancel}
             text="Cancel"
           />
           {CLOUD && (
             <Button
               color={ComponentColor.Primary}
               status={
-                scripts.length === 0
+                scripts.length === 0 || Object.keys(selectedScript).length === 0
                   ? ComponentStatus.Disabled
                   : ComponentStatus.Default
               }
diff --git a/src/dataExplorer/components/SaveAsScript.tsx b/src/dataExplorer/components/SaveAsScript.tsx
@@ -27,19 +27,36 @@ import {getOrg} from 'src/organizations/selectors'
 import OpenScript from 'src/dataExplorer/components/OpenScript'
 
 interface Props {
-  onClear: () => void
   onClose: () => void
   type: OverlayType | null
 }
 
-const SaveAsScript: FC<Props> = ({onClose, onClear, type}) => {
+const SaveAsScript: FC<Props> = ({onClose, type}) => {
   const dispatch = useDispatch()
   const history = useHistory()
-  const {query, resource, setResource, save} = useContext(PersistanceContext)
+  const {hasChanged, resource, setResource, save} = useContext(
+    PersistanceContext
+  )
   const {cancel} = useContext(QueryContext)
   const {setStatus, setResult} = useContext(ResultsContext)
   const org = useSelector(getOrg)
 
+  const handleClose = () => {
+    if (!resource?.data?.id) {
+      // clear out any meta data that's been set by the user prior to saving
+      // if they decide to cancel out of the process and close the modal
+      delete resource.data?.name
+      delete resource.data?.description
+      setResource({
+        ...resource,
+        data: {
+          ...(resource?.data ?? {}),
+        },
+      })
+    }
+    onClose()
+  }
+
   const handleUpdateDescription = (event: ChangeEvent<HTMLInputElement>) => {
     setResource({
       ...resource,
@@ -64,7 +81,6 @@ const SaveAsScript: FC<Props> = ({onClose, onClear, type}) => {
     cancel()
     setStatus(RemoteDataState.NotStarted)
     setResult(null)
-    onClear()
 
     history.replace(`/orgs/${org.id}/data-explorer/from/script`)
     if (type !== OverlayType.OPEN) {
@@ -75,17 +91,13 @@ const SaveAsScript: FC<Props> = ({onClose, onClear, type}) => {
   const handleSaveScript = () => {
     try {
       save().then(() => {
-        dispatch(
-          notify(scriptSaveSuccess(resource?.data?.name ?? 'Untitled Script'))
-        )
+        dispatch(notify(scriptSaveSuccess(resource?.data?.name ?? '')))
         if (type === OverlayType.NEW) {
           clear()
         }
       })
     } catch (error) {
-      dispatch(
-        notify(scriptSaveFail(resource?.data?.name ?? 'Untitled Script'))
-      )
+      dispatch(notify(scriptSaveFail(resource?.data?.name ?? '')))
       console.error({error})
     } finally {
       if (type !== OverlayType.OPEN) {
@@ -104,15 +116,36 @@ const SaveAsScript: FC<Props> = ({onClose, onClear, type}) => {
     overlayTitle = 'Do you want to save your Script first?'
   }
 
-  if (query.length === 0) {
-    return <OpenScript onClose={onClose} />
+  if (!hasChanged && type === OverlayType.OPEN) {
+    return <OpenScript onCancel={handleClose} onClose={onClose} />
+  }
+
+  const displayWarning =
+    (type === OverlayType.NEW && !resource?.data?.name) ||
+    (type === OverlayType.OPEN && !resource?.data?.name) ||
+    (type === OverlayType.OPEN && hasChanged && resource?.data?.id)
+
+  let saveText = 'Save'
+
+  if (resource?.data?.id) {
+    if (type === OverlayType.SAVE) {
+      saveText = 'Update'
+    } else {
+      saveText = 'Yes, Update'
+    }
+  } else {
+    if (type === OverlayType.SAVE) {
+      saveText = 'Save'
+    } else {
+      saveText = 'Yes, Save'
+    }
   }
 
   return (
     <Overlay.Container maxWidth={500}>
-      <Overlay.Header title={overlayTitle} onDismiss={onClose} />
+      <Overlay.Header title={overlayTitle} onDismiss={handleClose} />
       <Overlay.Body>
-        {type !== OverlayType.SAVE && (
+        {displayWarning && (
           <div className="save-script-overlay__warning-text">
             "{resource?.data?.name ?? 'Untitled Script'}" will be overwritten by
             a new one if you don’t save it.
@@ -127,6 +160,11 @@ const SaveAsScript: FC<Props> = ({onClose, onClear, type}) => {
             type={InputType.Text}
             value={resource?.data?.name}
             onChange={handleUpdateName}
+            status={
+              resource?.data?.id
+                ? ComponentStatus.Disabled
+                : ComponentStatus.Default
+            }
           />
           <InputLabel>Description</InputLabel>
           <Input
@@ -141,7 +179,7 @@ const SaveAsScript: FC<Props> = ({onClose, onClear, type}) => {
       <Overlay.Footer>
         <Button
           color={ComponentColor.Tertiary}
-          onClick={onClose}
+          onClick={handleClose}
           text="Cancel"
         />
         {type !== OverlayType.SAVE && (
@@ -161,7 +199,7 @@ const SaveAsScript: FC<Props> = ({onClose, onClear, type}) => {
                 : ComponentStatus.Default
             }
             onClick={handleSaveScript}
-            text={type === OverlayType.SAVE ? 'Save' : 'Yes, Save'}
+            text={saveText}
           />
         )}
       </Overlay.Footer>
diff --git a/src/dataExplorer/components/resources/TemplatePage.tsx b/src/dataExplorer/components/resources/TemplatePage.tsx
@@ -12,9 +12,12 @@ import {
 } from 'src/dataExplorer/context/persistance'
 
 const Template: FC = () => {
-  const {setQuery, setResource, clearSchemaSelection} = useContext(
-    PersistanceContext
-  )
+  const {
+    setQuery,
+    setHasChanged,
+    setResource,
+    clearSchemaSelection,
+  } = useContext(PersistanceContext)
   const params = useParams()[0].split('/')
   const org = useSelector(getOrg)
   const history = useHistory()
@@ -43,6 +46,7 @@ const Template: FC = () => {
       setQuery(data.flux)
       setResource(data)
       history.replace(`/orgs/${org.id}/data-explorer`)
+      setHasChanged(false)
     })
   }, [params])
 
diff --git a/src/dataExplorer/components/resources/types/script/index.ts b/src/dataExplorer/components/resources/types/script/index.ts
diff --git a/src/dataExplorer/context/persistance.tsx b/src/dataExplorer/context/persistance.tsx
