fix: forward errors (#5913)

Co-authored-by: drdelambre <drdelambre>

Author: drdelambre

src/dataExplorer/components/FluxQueryBuilder.tsx

@@ -45,8 +45,7 @@ export enum OverlayType {
 
 const FluxQueryBuilder: FC = () => {
   const history = useHistory()
-  const {hasChanged, query, vertical, setVertical} =
-    useContext(PersistanceContext)
+  const {hasChanged, vertical, setVertical} = useContext(PersistanceContext)
   const [overlayType, setOverlayType] = useState<OverlayType | null>(null)
   const [isOverlayVisible, setIsOverlayVisible] = useState(false)
   const {cancel} = useContext(QueryContext)
@@ -139,11 +138,6 @@ const FluxQueryBuilder: FC = () => {
                   onClick={handleNewScript}
                   text={isFlagEnabled('saveAsScript') ? 'New Script' : 'Clear'}
                   icon={IconFont.Plus_New}
-                  status={
-                    query.length === 0
-                      ? ComponentStatus.Disabled
-                      : ComponentStatus.Default
-                  }
                   testID="flux-query-builder--new-script"
                 />
                 {isFlagEnabled('saveAsScript') && (

src/dataExplorer/components/SaveAsScript.scss

@@ -1,3 +1,8 @@
 .save-script-overlay__warning-text {
   margin-bottom: 25px;
 }
+
+.save-script--error {
+  display: block;
+  margin: -10px 0 12px 0;
+}

src/dataExplorer/components/SaveAsScript.tsx

@@ -1,4 +1,4 @@
-import React, {FC, useContext, useCallback, ChangeEvent} from 'react'
+import React, {FC, useContext, useCallback, ChangeEvent, useState} from 'react'
 import {
   Button,
   ComponentColor,
@@ -38,6 +38,7 @@ const SaveAsScript: FC<Props> = ({onClose, type}) => {
     useContext(PersistanceContext)
   const {cancel} = useContext(QueryContext)
   const {setStatus, setResult} = useContext(ResultsContext)
+  const [error, setError] = useState<string>()
   const org = useSelector(getOrg)
 
   const handleClose = () => {
@@ -89,21 +90,22 @@ const SaveAsScript: FC<Props> = ({onClose, type}) => {
   }, [onClose, setStatus, setResult, cancel, history, org?.id])
 
   const handleSaveScript = () => {
-    try {
-      save().then(() => {
+    save()
+      .then(() => {
+        setError(null)
         dispatch(notify(scriptSaveSuccess(resource?.data?.name ?? '')))
+        if (type !== OverlayType.OPEN) {
+          onClose()
+        }
+
         if (type === OverlayType.NEW) {
           clear()
         }
       })
-    } catch (error) {
-      dispatch(notify(scriptSaveFail(resource?.data?.name ?? '')))
-      console.error({error})
-    } finally {
-      if (type !== OverlayType.OPEN) {
-        onClose()
-      }
-    }
+      .catch(error => {
+        dispatch(notify(scriptSaveFail(resource?.data?.name ?? '')))
+        setError(error.message)
+      })
   }
 
   if (type == null) {
@@ -153,12 +155,13 @@ const SaveAsScript: FC<Props> = ({onClose, type}) => {
             type={InputType.Text}
             value={resource?.data?.name}
             onChange={handleUpdateName}
-            status={
-              resource?.data?.id
-                ? ComponentStatus.Disabled
-                : ComponentStatus.Default
-            }
+            status={error ? ComponentStatus.Error : ComponentStatus.Default}
           />
+          {error && (
+            <div className="cf-form--element-error save-script--error">
+              {error}
+            </div>
+          )}
           <InputLabel>Description</InputLabel>
           <Input
             name="description"
@@ -179,7 +182,7 @@ const SaveAsScript: FC<Props> = ({onClose, type}) => {
           <Button
             color={ComponentColor.Default}
             onClick={clear}
-            text="No, Delete"
+            text="No, Discard"
             testID="flux-query-builder--no-save"
           />
         )}

src/dataExplorer/components/resources/types/script/index.ts

@@ -58,7 +58,11 @@ export default function script(register) {
             description: data.description,
             script: data.script,
           },
-        }).then(() => {
+        }).then(resp => {
+          if (resp.status !== 201) {
+            throw new Error(resp.data.message)
+          }
+
           return resource
         })
       }
@@ -71,17 +75,17 @@ export default function script(register) {
           language: 'flux',
         },
       }).then(resp => {
-        if (resp.status === 201) {
-          return {
-            ...resource,
-            data: {
-              ...data,
-              id: resp.data.id,
-            },
-          }
+        if (resp.status !== 201) {
+          throw new Error(resp.data.message)
         }
 
-        return resource
+        return {
+          ...resource,
+          data: {
+            ...data,
+            id: resp.data.id,
+          },
+        }
       })
     },
   })