Improve commit error message in data editor changes modal

edgedb · Jul 19, 2023 · 0f75c7f · 0f75c7f
1 parent ebc205e
commit 0f75c7f
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 12 deletions.
diff --git a/shared/studio/tabs/dataview/editsModal.module.scss b/shared/studio/tabs/dataview/editsModal.module.scss
@@ -35,23 +35,35 @@
   }
 }
 
-.statementError {
+.errorMessage {
   background: rgba(222, 83, 83, 0.1);
   color: #de5353;
   padding: 7px 8px;
   border-radius: 4px;
   margin-top: 6px;
   display: flex;
   align-items: center;
-  max-width: 60ch;
   line-height: 20px;
   font-size: 14px;
 
   svg {
+    flex-shrink: 0;
     fill: currentColor;
     height: 15px;
     margin-right: 6px;
   }
+
+  .errorName {
+    font-weight: 500;
+  }
+
+  .errorDetails {
+    color: #8d6363;
+
+    @include darkTheme {
+      color: #ba6b6b;
+    }
+  }
 }
 
 .codeBlockParam {
@@ -87,7 +99,3 @@
   --buttonTextColour: #de5353;
   margin-right: auto;
 }
-
-.errorMessage {
-  color: #de5353;
-}
diff --git a/shared/studio/tabs/dataview/reviewEditsModal.tsx b/shared/studio/tabs/dataview/reviewEditsModal.tsx
@@ -12,6 +12,11 @@ import {Modal, ModalOverlay} from "@edgedb/common/ui/modal";
 import Button from "@edgedb/common/ui/button";
 import {WarningIcon} from "../../icons";
 
+import {
+  ErrorDetails,
+  extractErrorDetails,
+} from "../../utils/extractErrorDetails";
+
 import {renderValue} from "@edgedb/inspector/buildScalar";
 import inspectorStyles from "@edgedb/inspector/inspector.module.scss";
 
@@ -29,7 +34,7 @@ export const ReviewEditsModal = observer(function ReviewEditsModal({
   const {openModal} = useModal();
 
   const [commiting, setCommitting] = useState(false);
-  const [commitError, setCommitError] = useState("");
+  const [commitError, setCommitError] = useState<ErrorDetails | null>(null);
 
   const {params, statements} = state.edits.generateStatements();
 
@@ -64,8 +69,7 @@ export const ReviewEditsModal = observer(function ReviewEditsModal({
                   state.refreshAllViews();
                   openModal(null);
                 } catch (e: any) {
-                  console.log(e);
-                  setCommitError(e.message);
+                  setCommitError(extractErrorDetails(e));
                 }
                 setCommitting(false);
               }}
@@ -104,7 +108,7 @@ export const ReviewEditsModal = observer(function ReviewEditsModal({
               />
               <div className={styles.statementMessages}>
                 {error ? (
-                  <div className={styles.statementError}>
+                  <div className={styles.errorMessage}>
                     <WarningIcon />
                     {error}
                   </div>
@@ -123,7 +127,20 @@ export const ReviewEditsModal = observer(function ReviewEditsModal({
             )}
           </pre>
         </details> */}
-        <div className={styles.errorMessage}>{commitError}</div>
+        {commitError ? (
+          <div className={styles.errorMessage}>
+            <WarningIcon />
+            <div>
+              <span className={styles.errorName}>{commitError.name}</span>:{" "}
+              {commitError.msg}
+              {commitError.details ? (
+                <div className={styles.errorDetails}>
+                  Details: {commitError.details}
+                </div>
+              ) : null}
+            </div>
+          </div>
+        ) : null}
       </Modal>
     </ModalOverlay>
   );

diff --git a/shared/studio/utils/extractErrorDetails.ts b/shared/studio/utils/extractErrorDetails.ts
@@ -33,7 +33,7 @@ function tryParseInt(val: any) {
   return null;
 }
 
-export function extractErrorDetails(err: any, query: string): ErrorDetails {
+export function extractErrorDetails(err: any, query?: string): ErrorDetails {
   if (!(err instanceof Error)) {
     throw new Error(`Fatal Error: cannot handle non error as error: ${err}`);
   }
@@ -53,6 +53,10 @@ export function extractErrorDetails(err: any, query: string): ErrorDetails {
       errDetails.details = utf8Decoder.decode(details);
     }
 
+    if (!query) {
+      return errDetails;
+    }
+
     const lineStart = tryParseInt(attrs.get(ErrorField.lineStart));
     const lineEnd = tryParseInt(attrs.get(ErrorField.lineEnd));
     const colStart = tryParseInt(attrs.get(ErrorField.utf16ColumnStart));