feat: add edit and delete functionality (#6127)

* feat: add edit and delete functionality

* chore: make suggested design and PR changes

* chore: clear results and cancel the query

Author: asalem1

src/dataExplorer/components/DeleteScript.tsx

@@ -0,0 +1,81 @@
+import React, {FC, useContext} from 'react'
+import {Button, ComponentColor, IconFont, Overlay} from '@influxdata/clockface'
+import './SaveAsScript.scss'
+import {CLOUD} from 'src/shared/constants'
+import {PersistanceContext} from 'src/dataExplorer/context/persistance'
+import {useHistory} from 'react-router-dom'
+import {useSelector, useDispatch} from 'react-redux'
+import {getOrg} from 'src/organizations/selectors'
+import {notify} from 'src/shared/actions/notifications'
+import {deleteScriptFail} from 'src/shared/copy/notifications/categories/scripts'
+import {ResultsContext} from 'src/dataExplorer/components/ResultsContext'
+import {RemoteDataState} from 'src/types'
+import {QueryContext} from 'src/shared/contexts/query'
+
+let deleteScript
+
+if (CLOUD) {
+  deleteScript = require('src/client/scriptsRoutes').deleteScript
+}
+
+interface Props {
+  onBack: () => void
+  onClose: () => void
+}
+
+const DeleteScript: FC<Props> = ({onBack, onClose}) => {
+  const {resource} = useContext(PersistanceContext)
+  const {cancel} = useContext(QueryContext)
+  const {setStatus, setResult} = useContext(ResultsContext)
+  const history = useHistory()
+  const dispatch = useDispatch()
+  const org = useSelector(getOrg)
+
+  const handleDeleteScript = async () => {
+    if (resource.data?.id) {
+      try {
+        const resp = await deleteScript({scriptID: resource.data.id})
+
+        if (resp.status !== 204) {
+          throw new Error(resp.data.message)
+        }
+
+        setStatus(RemoteDataState.NotStarted)
+        setResult(null)
+        cancel()
+        history.replace(`/orgs/${org.id}/data-explorer/from/script/`)
+        onClose()
+      } catch (error) {
+        dispatch(notify(deleteScriptFail(resource.data?.name)))
+      }
+    }
+  }
+  return (
+    <Overlay.Container maxWidth={500}>
+      <Overlay.Header
+        title="Are you sure you want to delete?"
+        onDismiss={onClose}
+      />
+      <Overlay.Body>
+        "{resource.data?.name}" will be deleted. Once deleted, this action
+        cannot be undone.
+      </Overlay.Body>
+      <Overlay.Footer>
+        <Button
+          color={ComponentColor.Tertiary}
+          onClick={onClose}
+          text="cancel"
+        />
+        <Button color={ComponentColor.Secondary} onClick={onBack} text="back" />
+        <Button
+          color={ComponentColor.Danger}
+          onClick={handleDeleteScript}
+          text="delete"
+          icon={IconFont.Trash_New}
+        />
+      </Overlay.Footer>
+    </Overlay.Container>
+  )
+}
+
+export {DeleteScript}

src/dataExplorer/components/FluxQueryBuilder.tsx

@@ -38,14 +38,17 @@ import {RemoteDataState} from 'src/types'
 import './FluxQueryBuilder.scss'
 
 export enum OverlayType {
+  DELETE = 'delete',
+  EDIT = 'edit',
   NEW = 'new',
   OPEN = 'open',
   SAVE = 'save',
 }
 
 const FluxQueryBuilder: FC = () => {
   const history = useHistory()
-  const {hasChanged, vertical, setVertical} = useContext(PersistanceContext)
+  const {hasChanged, resource, vertical, setVertical} =
+    useContext(PersistanceContext)
   const [overlayType, setOverlayType] = useState<OverlayType | null>(null)
   const [isOverlayVisible, setIsOverlayVisible] = useState(false)
   const {cancel} = useContext(QueryContext)
@@ -93,6 +96,7 @@ const FluxQueryBuilder: FC = () => {
           <Overlay visible={overlayType !== null}>
             <SaveAsScript
               type={overlayType}
+              setOverlayType={setOverlayType}
               onClose={() => setOverlayType(null)}
             />
           </Overlay>
@@ -162,6 +166,15 @@ const FluxQueryBuilder: FC = () => {
                     icon={IconFont.SaveOutline}
                   />
                 )}
+                {isFlagEnabled('saveAsScript') && resource?.data?.id && (
+                  <Button
+                    className="flux-query-builder__action-button"
+                    onClick={() => setOverlayType(OverlayType.EDIT)}
+                    status={ComponentStatus.Default}
+                    text="Edit"
+                    icon={IconFont.Pencil}
+                  />
+                )}
               </div>
               {isFlagEnabled('userFeedback') && (
                 <button

src/dataExplorer/components/SaveAsScript.scss

@@ -6,3 +6,7 @@
   display: block;
   margin: -10px 0 12px 0;
 }
+
+.edit-overlay__delete-script {
+  margin-top: 16px;
+}

src/dataExplorer/components/SaveAsScript.tsx

@@ -4,6 +4,7 @@ import {
   ComponentColor,
   ComponentStatus,
   Form,
+  IconFont,
   Input,
   InputLabel,
   InputType,
@@ -25,16 +26,18 @@ import {
 } from 'src/shared/copy/notifications/categories/scripts'
 import {getOrg} from 'src/organizations/selectors'
 import OpenScript from 'src/dataExplorer/components/OpenScript'
+import {DeleteScript} from 'src/dataExplorer/components/DeleteScript'
 
 interface Props {
   onClose: () => void
+  setOverlayType: (type: OverlayType) => void
   type: OverlayType | null
 }
 
-const SaveAsScript: FC<Props> = ({onClose, type}) => {
+const SaveAsScript: FC<Props> = ({onClose, setOverlayType, type}) => {
   const dispatch = useDispatch()
   const history = useHistory()
-  const {hasChanged, resource, setResource, clearCompositionSelection, save} =
+  const {hasChanged, resource, setResource, save} =
     useContext(PersistanceContext)
   const {cancel} = useContext(QueryContext)
   const {setStatus, setResult} = useContext(ResultsContext)
@@ -67,6 +70,10 @@ const SaveAsScript: FC<Props> = ({onClose, type}) => {
     })
   }
 
+  const handleBackClick = () => {
+    setOverlayType(OverlayType.EDIT)
+  }
+
   const handleUpdateName = (event: ChangeEvent<HTMLInputElement>) => {
     setResource({
       ...resource,
@@ -80,14 +87,13 @@ const SaveAsScript: FC<Props> = ({onClose, type}) => {
   const clear = useCallback(() => {
     cancel()
     setStatus(RemoteDataState.NotStarted)
-    clearCompositionSelection()
     setResult(null)
 
     history.replace(`/orgs/${org.id}/data-explorer/from/script`)
     if (type !== OverlayType.OPEN) {
       onClose()
     }
-  }, [onClose, setStatus, setResult, cancel, history, org?.id])
+  }, [onClose, setStatus, setResult, cancel, history, org?.id, type])
 
   const handleSaveScript = () => {
     save()
@@ -108,6 +114,10 @@ const SaveAsScript: FC<Props> = ({onClose, type}) => {
       })
   }
 
+  const handleDeleteScript = () => {
+    setOverlayType(OverlayType.DELETE)
+  }
+
   if (type == null) {
     return null
   }
@@ -121,6 +131,13 @@ const SaveAsScript: FC<Props> = ({onClose, type}) => {
       overlayTitle = 'Do you want to save your script first?'
     }
   }
+  if (type === OverlayType.EDIT) {
+    overlayTitle = 'Edit Script Details'
+  }
+
+  if (type === OverlayType.DELETE) {
+    return <DeleteScript onBack={handleBackClick} onClose={onClose} />
+  }
 
   if (!hasChanged && type === OverlayType.OPEN) {
     return <OpenScript onCancel={handleClose} onClose={onClose} />
@@ -141,6 +158,9 @@ const SaveAsScript: FC<Props> = ({onClose, type}) => {
       saveText = 'Yes, Save'
     }
   }
+  if (type === OverlayType.EDIT) {
+    saveText = 'Update'
+  }
 
   return (
     <Overlay.Container maxWidth={540}>
@@ -170,6 +190,16 @@ const SaveAsScript: FC<Props> = ({onClose, type}) => {
             value={resource?.data?.description}
             onChange={handleUpdateDescription}
           />
+          {type === OverlayType.EDIT && (
+            <Button
+              icon={IconFont.Trash_New}
+              className="edit-overlay__delete-script"
+              color={ComponentColor.Danger}
+              onClick={handleDeleteScript}
+              text="Delete Script"
+              testID="flux-query-builder--no-save"
+            />
+          )}
         </Form>
       </Overlay.Body>
       <Overlay.Footer>
@@ -178,7 +208,7 @@ const SaveAsScript: FC<Props> = ({onClose, type}) => {
           onClick={handleClose}
           text="Cancel"
         />
-        {type !== OverlayType.SAVE && (
+        {(type === OverlayType.NEW || type === OverlayType.OPEN) && (
           <Button
             color={ComponentColor.Default}
             onClick={clear}

src/shared/copy/notifications/categories/scripts.ts

@@ -15,3 +15,8 @@ export const scriptSaveSuccess = (scriptName: string): Notification => ({
   ...defaultSuccessNotification,
   message: `${scriptName} has been saved`,
 })
+
+export const deleteScriptFail = (scriptName: string): Notification => ({
+  ...defaultErrorNotification,
+  message: `${scriptName} failed to delete`,
+})