Show error from BE for create connector modal (#3449)

airbytehq · May 19, 2021 · 3cef890 · 3cef890
1 parent 7b68534
commit 3cef890
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 7 deletions.
diff --git a/airbyte-webapp/src/core/resources/BaseResource.ts b/airbyte-webapp/src/core/resources/BaseResource.ts
@@ -43,8 +43,11 @@ export default abstract class BaseResource extends Resource {
     if (response.status >= 200 && response.status < 300) {
       return response.status === 204 ? {} : await response.json();
     } else {
+      const result = await response.json();
+
       const e = new NetworkError(response);
       e.status = response.status;
+      e.message = result.message;
       throw e;
     }
   }

diff --git a/airbyte-webapp/src/pages/AdminPage/components/CreateConnector.tsx b/airbyte-webapp/src/pages/AdminPage/components/CreateConnector.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { FormattedMessage } from "react-intl";
+import { FormattedMessage, useIntl } from "react-intl";
 import { useFetcher } from "rest-hooks";
 
 import Button from "components/Button";
@@ -31,6 +31,8 @@ const CreateConnector: React.FC<IProps> = ({ type }) => {
     setErrorMessage("");
   };
 
+  const formatMessage = useIntl().formatMessage;
+
   const createSourceDefinition = useFetcher(
     SourceDefinitionResource.createShape()
   );
@@ -59,7 +61,7 @@ const CreateConnector: React.FC<IProps> = ({ type }) => {
         state: { sourceDefinitionId: result.sourceDefinitionId },
       });
     } catch (e) {
-      setErrorMessage("form.dockerError");
+      setErrorMessage(e.message || formatMessage({ id: "form.dockerError" }));
     }
   };
 
@@ -94,7 +96,7 @@ const CreateConnector: React.FC<IProps> = ({ type }) => {
         state: { destinationDefinitionId: result.destinationDefinitionId },
       });
     } catch (e) {
-      setErrorMessage("form.validationError");
+      setErrorMessage(e.message || formatMessage({ id: "form.dockerError" }));
     }
   };
 

diff --git a/airbyte-webapp/src/pages/AdminPage/components/CreateConnectorModal.tsx b/airbyte-webapp/src/pages/AdminPage/components/CreateConnectorModal.tsx
@@ -24,13 +24,14 @@ export type IProps = {
 
 const Content = styled.div`
   width: 585px;
-  padding: 19px 41px 36px 36px;
+  padding: 19px 41px 30px 36px;
 `;
 
 const ButtonContent = styled.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
+  min-height: 40px;
 `;
 
 const ButtonWithMargin = styled(Button)`
@@ -76,6 +77,7 @@ const ErrorBlock = styled.div`
   font-size: 12px;
   line-height: 18px;
   color: ${({ theme }) => theme.darkPrimaryColor};
+  max-width: 320px;
 `;
 
 const ErrorText = styled.div`
@@ -211,9 +213,7 @@ const CreateConnectorModal: React.FC<IProps> = ({
                 {errorMessage ? (
                   <ErrorBlock>
                     <Error />
-                    <ErrorText>
-                      <FormattedMessage id={errorMessage} />
-                    </ErrorText>
+                    <ErrorText>{errorMessage}</ErrorText>
                   </ErrorBlock>
                 ) : (
                   <div />