Add 401 error message and cleanup error page (#12548)

* Add unauthorized message when 401 error occurs and clean up error page * Update BaseClearView logo handling to use link instead of direct click on img and enable the link to always go to the parent to re-resolve * Cleanup status check logic on ResourceNotFoundErrorBoundary
airbytehq · May 13, 2022 · 4741f9b · 4741f9b
1 parent 0bb3e3b
commit 4741f9b
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 38 deletions.
diff --git a/airbyte-webapp/src/components/BaseClearView/BaseClearView.tsx b/airbyte-webapp/src/components/BaseClearView/BaseClearView.tsx
@@ -1,4 +1,6 @@
 import React from "react";
+import { useIntl } from "react-intl";
+import { Link } from "react-router-dom";
 import styled from "styled-components";
 
 import Version from "components/Version";
@@ -13,7 +15,7 @@ const Content = styled.div`
   justify-content: space-between;
 `;
 
-const Img = styled.img`
+const LogoImg = styled.img`
   width: 90px;
   height: 94px;
   margin-bottom: 20px;
@@ -25,12 +27,19 @@ const MainInfo = styled.div`
   flex-direction: column;
 `;
 
-const BaseClearView: React.FC = (props) => {
+interface BaseClearViewProps {
+  onBackClick?: React.MouseEventHandler;
+}
+
+const BaseClearView: React.FC<BaseClearViewProps> = ({ children, onBackClick }) => {
+  const { formatMessage } = useIntl();
   return (
     <Content>
       <MainInfo>
-        <Img src="/logo.png" alt="logo" />
-        {props.children}
+        <Link to=".." onClick={onBackClick}>
+          <LogoImg src="/logo.png" alt={formatMessage({ id: "ui.goBack" })} />
+        </Link>
+        {children}
       </MainInfo>
       <Version />
     </Content>

diff --git a/airbyte-webapp/src/locales/en.json b/airbyte-webapp/src/locales/en.json
@@ -491,10 +491,11 @@
   "demo.message.body": "You cannot add or edit any connectors. You will see error messages on purpose if you try to do so.",
 
   "docs.notFoundError": "We were not able to receive docs. Please click the link above to open docs on our website",
-  "errorView.startOver": "Continue using the app",
-  "errorView.notFound": "Resource not found",
+  "errorView.notFound": "Resource not found.",
+  "errorView.notAuthorized": "You don’t have permission to access this page.",
   "errorView.unknown": "Unknown",
 
+  "ui.goBack": "Go back",
   "ui.input.showPassword": "Show password",
   "ui.input.hidePassword": "Hide password",
   "ui.keyValuePair": "{key}: {value}",

diff --git a/airbyte-webapp/src/views/common/ErrorOccurredView.tsx b/airbyte-webapp/src/views/common/ErrorOccurredView.tsx
@@ -10,15 +10,18 @@ const Content = styled(ContentCard)`
   padding: 50px 15px;
 `;
 
-const ErrorOccurredView: React.FC<{ message: React.ReactNode }> = ({ message, children }) => {
+interface ErrorOccurredViewProps {
+  message: React.ReactNode;
+  onBackClick?: React.MouseEventHandler;
+}
+
+export const ErrorOccurredView: React.FC<ErrorOccurredViewProps> = ({ message, onBackClick, children }) => {
   return (
-    <BaseClearView>
+    <BaseClearView onBackClick={onBackClick}>
       <Content>
         <H4 center>{message}</H4>
         {children}
       </Content>
     </BaseClearView>
   );
 };
-
-export { ErrorOccurredView };
diff --git a/airbyte-webapp/src/views/common/ResorceNotFoundErrorBoundary.tsx b/airbyte-webapp/src/views/common/ResorceNotFoundErrorBoundary.tsx
@@ -15,11 +15,11 @@ export class ResourceNotFoundErrorBoundary extends React.Component<
   BoundaryState
 > {
   static getDerivedStateFromError(error: CommonRequestError): BoundaryState {
-    console.log(error.status);
-    if (error.status === 422 || error.status === 404) {
+    if ([401, 404, 422].includes(error.status)) {
+      const messageId = error.status === 401 ? "errorView.notAuthorized" : "errorView.notFound";
       return {
         hasError: true,
-        message: <FormattedMessage id="errorView.notFound" />,
+        message: <FormattedMessage id={messageId} />,
       };
     } else {
       throw error;

diff --git a/airbyte-webapp/src/views/common/StartOverErrorView.tsx b/airbyte-webapp/src/views/common/StartOverErrorView.tsx
@@ -1,35 +1,20 @@
 import React from "react";
 import { FormattedMessage } from "react-intl";
-import styled from "styled-components";
 
-import { Button } from "components";
-
-import useRouter from "hooks/useRouter";
 import { ErrorOccurredView } from "views/common/ErrorOccurredView";
 
-const ResetSection = styled.div`
-  margin-top: 30px;
-  display: flex;
-  justify-content: space-around;
-`;
-
-export const StartOverErrorView: React.FC<{
+interface StartOverErrorViewProps {
   message?: string;
   onReset?: () => void;
-}> = ({ message, onReset }) => {
-  const { push } = useRouter();
+}
+
+export const StartOverErrorView: React.FC<StartOverErrorViewProps> = ({ message, onReset }) => {
   return (
-    <ErrorOccurredView message={message ?? <FormattedMessage id="errorView.notFound" />}>
-      <ResetSection>
-        <Button
-          onClick={() => {
-            push("..");
-            onReset?.();
-          }}
-        >
-          <FormattedMessage id="errorView.startOver" />
-        </Button>
-      </ResetSection>
-    </ErrorOccurredView>
+    <ErrorOccurredView
+      message={message ?? <FormattedMessage id="errorView.notFound" />}
+      onBackClick={() => {
+        onReset?.();
+      }}
+    />
   );
 };