forked from airbytehq/airbyte
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
🪟 🧹 Display returned error messages on replication view (airbytehq#16280
) * display error messages if they exist * get it working with styled components first * migrate to scss module * use variables and text component * add data-id back for cypress * cleanup from pr review
- Loading branch information
1 parent
cc79dc4
commit 241d334
Showing
6 changed files
with
90 additions
and
51 deletions.
There are no files selected for viewing
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
25 changes: 25 additions & 0 deletions
25
airbyte-webapp/src/views/Connection/ConnectionForm/components/EditControls.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,25 @@ | ||
@use "../../../../scss/colors"; | ||
@use "../../../../scss/variables"; | ||
|
||
.content { | ||
display: flex; | ||
justify-content: flex-end; | ||
align-items: center; | ||
flex-direction: row; | ||
margin-top: variables.$spacing-lg; | ||
gap: variables.$spacing-lg; | ||
padding: variables.$spacing-sm; | ||
} | ||
|
||
.controlButton { | ||
margin-left: variables.$spacing-md; | ||
} | ||
|
||
// currently only implemented on transformation view form card, margins are specific to that implementation | ||
// todo: standardize the margin sizes here | ||
.line { | ||
min-width: 100%; | ||
height: variables.$border-thin; | ||
background: colors.$grey; | ||
margin: variables.$spacing-lg -27px 0 -24px; | ||
} |
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
16 changes: 16 additions & 0 deletions
16
airbyte-webapp/src/views/Connection/ConnectionForm/components/ResponseMessage.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,16 @@ | ||
@use "../../../../scss/colors"; | ||
|
||
.message { | ||
overflow: hidden; | ||
text-overflow: ellipsis; | ||
white-space: nowrap; | ||
flex: 1; | ||
} | ||
|
||
.success { | ||
color: colors.$green; | ||
} | ||
|
||
.error { | ||
color: colors.$red; | ||
} |
33 changes: 33 additions & 0 deletions
33
airbyte-webapp/src/views/Connection/ConnectionForm/components/ResponseMessage.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,33 @@ | ||
import classnames from "classnames"; | ||
|
||
import { Text } from "components/base/Text"; | ||
|
||
import styles from "./ResponseMessage.module.scss"; | ||
|
||
interface ResponseMessageProps { | ||
successMessage?: React.ReactNode; | ||
errorMessage?: React.ReactNode; | ||
dirty: boolean; | ||
} | ||
export const ResponseMessage: React.FC<ResponseMessageProps> = ({ successMessage, errorMessage, dirty }) => { | ||
const messageStyle = classnames(styles.message, { | ||
[styles.success]: successMessage, | ||
[styles.error]: errorMessage, | ||
}); | ||
if (errorMessage) { | ||
return ( | ||
<Text as="div" size="lg" className={messageStyle}> | ||
{errorMessage} | ||
</Text> | ||
); | ||
} | ||
|
||
if (successMessage && !dirty) { | ||
return ( | ||
<Text as="div" size="lg" className={messageStyle} data-id="success-result"> | ||
{successMessage} | ||
</Text> | ||
); | ||
} | ||
return null; | ||
}; |