-
Notifications
You must be signed in to change notification settings - Fork 4.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Updates error view with new design (#13197)
* Update error occurred view with updated design Add the ability to set CTA button text and click handler Migrate to SCSS module Signed-off-by: Edmundo Ruiz Ghanem <edmundo@airbyte.io> * Move error view title string to en file * Remove navigation stuff from BaseClearView because it's no longer used Update error views to have go back cta * Update errorView.title from three dots to ellipsis Co-authored-by: Tim Roes <tim@airbyte.io> * Remove alt text from ErrorOccurredView image Co-authored-by: Tim Roes <tim@airbyte.io> * Crop biting-nails img and update style Co-authored-by: Tim Roes <tim@airbyte.io>
- Loading branch information
Showing
12 changed files
with
125 additions
and
86 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
34 changes: 34 additions & 0 deletions
34
airbyte-webapp/src/views/common/ErrorOccurredView/ErrorOccurredView.module.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,34 @@ | ||
@use "../../../scss/colors"; | ||
|
||
.errorOccurredView { | ||
min-height: 400px; | ||
height: calc(100% - 70px); | ||
width: 100%; | ||
display: flex; | ||
align-items: center; | ||
flex-direction: column; | ||
justify-content: center; | ||
text-align: center; | ||
|
||
.octavia { | ||
width: 100px; | ||
height: 128px; | ||
margin-bottom: 24px; | ||
} | ||
|
||
background: radial-gradient( | ||
35.57% 35.57% at 50% 50%, | ||
colors.$whiteColor 0%, | ||
colors.$whiteColor 55.87%, | ||
colors.$backgroundColor 100% | ||
); | ||
|
||
.content { | ||
max-width: 600px; | ||
text-align: center; | ||
} | ||
|
||
.message { | ||
margin-bottom: 30px; | ||
} | ||
} |
31 changes: 31 additions & 0 deletions
31
airbyte-webapp/src/views/common/ErrorOccurredView/ErrorOccurredView.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,31 @@ | ||
import React from "react"; | ||
import { FormattedMessage } from "react-intl"; | ||
|
||
import { Button, H2 } from "components"; | ||
|
||
import styles from "./ErrorOccurredView.module.scss"; | ||
|
||
interface ErrorOccurredViewProps { | ||
message: React.ReactNode; | ||
ctaButtonText?: React.ReactNode; | ||
onCtaButtonClick?: React.MouseEventHandler; | ||
} | ||
|
||
export const ErrorOccurredView: React.FC<ErrorOccurredViewProps> = ({ message, onCtaButtonClick, ctaButtonText }) => { | ||
return ( | ||
<div className={styles.errorOccurredView}> | ||
<div className={styles.content}> | ||
<img src="/images/octavia/biting-nails.png" alt="" className={styles.octavia} /> | ||
<H2 center> | ||
<FormattedMessage id="errorView.title" /> | ||
</H2> | ||
<p className={styles.message}>{message}</p> | ||
{onCtaButtonClick && ctaButtonText && ( | ||
<Button size="xl" onClick={onCtaButtonClick}> | ||
{ctaButtonText} | ||
</Button> | ||
)} | ||
</div> | ||
</div> | ||
); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
export * from "./ErrorOccurredView"; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,22 +1,25 @@ | ||
import React from "react"; | ||
import { FormattedMessage } from "react-intl"; | ||
import { useNavigate } from "react-router-dom"; | ||
|
||
import { ErrorOccurredView } from "views/common/ErrorOccurredView"; | ||
|
||
interface StartOverErrorViewProps { | ||
message?: string; | ||
onReset?: () => void; | ||
hideHeader?: boolean; | ||
} | ||
|
||
export const StartOverErrorView: React.FC<StartOverErrorViewProps> = ({ message, onReset, hideHeader }) => { | ||
export const StartOverErrorView: React.FC<StartOverErrorViewProps> = ({ message, onReset }) => { | ||
const navigate = useNavigate(); | ||
|
||
return ( | ||
<ErrorOccurredView | ||
message={message ?? <FormattedMessage id="errorView.notFound" />} | ||
onBackClick={() => { | ||
ctaButtonText={<FormattedMessage id="ui.goBack" />} | ||
onCtaButtonClick={() => { | ||
onReset?.(); | ||
navigate(".."); | ||
}} | ||
hideHeader={hideHeader} | ||
/> | ||
); | ||
}; |