🪟 🎨 Show Schema Update Errors to User (#18008)

* show schema update error * remove test code * use i18n for error message label and string * update snapshot of create connection * fix intl string parsing * update snapshot
airbytehq · Oct 19, 2022 · 19e6fad · 19e6fad
1 parent b564f3e
commit 19e6fad
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 13 deletions.
diff --git a/airbyte-webapp/src/components/CreateConnection/SchemaError.tsx b/airbyte-webapp/src/components/CreateConnection/SchemaError.tsx
@@ -12,7 +12,7 @@ export const SchemaError = ({ schemaError }: { schemaError: SchemaErrorType }) =
   const { refreshSchema } = useConnectionFormService();
   return (
     <Card>
-      <TryAfterErrorBlock onClick={refreshSchema} />
+      <TryAfterErrorBlock onClick={refreshSchema} message={schemaError?.message} />
       {job && <JobItem job={job} />}
     </Card>
   );

diff --git a/airbyte-webapp/src/components/CreateConnection/TryAfterErrorBlock.tsx b/airbyte-webapp/src/components/CreateConnection/TryAfterErrorBlock.tsx
@@ -8,18 +8,25 @@ import { Text } from "components/ui/Text";
 import styles from "./TryAfterErrorBlock.module.scss";
 
 interface TryAfterErrorBlockProps {
-  message?: React.ReactNode;
+  message?: string;
   onClick: () => void;
 }
 
-export const TryAfterErrorBlock: React.FC<TryAfterErrorBlockProps> = ({ message, onClick }) => (
-  <div className={styles.container}>
-    <StatusIcon big />
-    <Text as="p" size="lg" centered className={styles.message}>
-      {message || <FormattedMessage id="form.schemaFailed" />}
-    </Text>
-    <Button className={styles.retryButton} onClick={onClick} variant="danger">
-      <FormattedMessage id="form.tryAgain" />
-    </Button>
-  </div>
-);
+export const TryAfterErrorBlock: React.FC<TryAfterErrorBlockProps> = ({ message, onClick }) => {
+  return (
+    <div className={styles.container}>
+      <StatusIcon big />
+      <Text as="p" size="lg" centered className={styles.message}>
+        <FormattedMessage id="form.schemaFailed" />
+      </Text>
+      {message && (
+        <Text as="p" size="lg" centered className={styles.message}>
+          <FormattedMessage id="form.error" values={{ message }} />
+        </Text>
+      )}
+      <Button className={styles.retryButton} onClick={onClick} variant="danger">
+        <FormattedMessage id="form.tryAgain" />
+      </Button>
+    </div>
+  );
+};
diff --git a/...e-webapp/src/components/CreateConnection/__snapshots__/CreateConnectionForm.test.tsx.snap b/...e-webapp/src/components/CreateConnection/__snapshots__/CreateConnectionForm.test.tsx.snap
@@ -996,6 +996,11 @@ exports[`CreateConnectionForm should render with an error 1`] = `
         >
           Failed to fetch schema. Please try again
         </p>
+        <p
+          class="<removed-for-snapshot-test>"
+        >
+          Error: Test Error
+        </p>
         <button
           class="<removed-for-snapshot-test>"
         >

diff --git a/airbyte-webapp/src/locales/en.json b/airbyte-webapp/src/locales/en.json
@@ -24,6 +24,7 @@
   "sidebar.recipes": "Tutorials - Use cases",
 
   "form.continue": "Continue",
+  "form.error": "Error: {message}",
   "form.yourEmail": "Your email",
   "form.email.placeholder": "[email protected]",
   "form.email.error": "Enter a valid email",