-
Notifications
You must be signed in to change notification settings - Fork 4.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
🪟🎉 Connector builder: Integrate connector form for test input (#20385)
* move connector builder components into the same shared components/connectorBuilder directory * move diff over from poc branch * save current progress * add modal for adding streams * focus stream after adding and reset button style * add reset confirm modal and select view on add * style global config and streams buttons * styling improvements * handle long stream names better * pull in connector manifest schema directly * add box shadows to resizable panels * upgrade orval and use connector manifest schema directly * remove airbyte protocol from connector builder api spec * generate python models from openapi change * fix position of yaml toggle * handle no stream case with better looking message * group global fields into single object and fix console error * confirmation modal on toggling dirty form + cleanup * fix connector name display * undo change to manifest schema * remove commented code * remove unnecessary change * fix spacing * use shadow mixin for connector img * add comment about connector img * change onSubmit to no-op * remove console log * clean up styling * simplify sidebar to remove StreamSelectButton component * swap colors of toggle * move FormikPatch to src/core/form * move types up to connectorBuilder/ level * use grid display for ui yaml toggle button * use spread instead of setting array index directly * add intl in missing places * pull connector manifest schema in through separate openapi spec * use correct intl string id * throttle setting json manifest in yaml editor * use button prop instead of manually styling * consolidate AddStreamButton styles * fix sidebar flex styles * use specific flex properties instead of flex * clean up download and reset button styles * use row-reverse for yaml editor download button * fix stream selector styles to remove margins * give connector setup guide panel same corner and shadow styles * remove blur from page display * set view to stream when selected in test panel * add placeholder when stream name is empty * switch to index-based stream selection to preserve testing panel selected stream on rename * handle empty name in stream selector * make connector form work in connector builder * fix small stuff * add warning label * review comments * adjust translation Co-authored-by: lmossman <lake@airbyte.io>
- Loading branch information
Showing
21 changed files
with
412 additions
and
128 deletions.
There are no files selected for viewing
32 changes: 28 additions & 4 deletions
32
airbyte-webapp/src/components/connectorBuilder/StreamTestingPanel/ConfigMenu.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 |
---|---|---|
@@ -1,7 +1,31 @@ | ||
@use "scss/colors"; | ||
@use "scss/variables"; | ||
|
||
.modalContent { | ||
height: 60vh; | ||
overflow: visible; | ||
background-color: colors.$grey-100; | ||
.formContent { | ||
max-height: 60vh; | ||
overflow: auto; | ||
} | ||
|
||
.inputFormModalFooter { | ||
border-top: variables.$border-thin solid colors.$grey-100; | ||
gap: variables.$spacing-md; | ||
padding: 0 variables.$spacing-xl; | ||
margin: 0 -1 * variables.$spacing-xl; | ||
} | ||
|
||
.inputFormModalFooter > * { | ||
// need to overwrite the margin of the button wrapper used within create controls | ||
// TODO refactor so this isn't necessary | ||
margin-top: variables.$spacing-lg !important; | ||
} | ||
|
||
.warningBox { | ||
margin-bottom: variables.$spacing-lg; | ||
background-color: colors.$blue-50; | ||
} | ||
|
||
.warningBoxContainer { | ||
display: flex; | ||
gap: variables.$spacing-md; | ||
align-items: center; | ||
} |
108 changes: 80 additions & 28 deletions
108
airbyte-webapp/src/components/connectorBuilder/StreamTestingPanel/ConfigMenu.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
9 changes: 9 additions & 0 deletions
9
...pp/src/components/connectorBuilder/StreamTestingPanel/ConfigMenuErrorBoundary.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,9 @@ | ||
@use "scss/colors"; | ||
@use "scss/variables"; | ||
|
||
.errorContent { | ||
display: flex; | ||
flex-direction: column; | ||
gap: variables.$spacing-lg; | ||
align-items: flex-end; | ||
} |
66 changes: 66 additions & 0 deletions
66
...yte-webapp/src/components/connectorBuilder/StreamTestingPanel/ConfigMenuErrorBoundary.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,66 @@ | ||
import React from "react"; | ||
import { FormattedMessage } from "react-intl"; | ||
|
||
import { Button } from "components/ui/Button"; | ||
import { InfoBox } from "components/ui/InfoBox"; | ||
|
||
import { FormBuildError, isFormBuildError } from "core/form/FormBuildError"; | ||
import { EditorView } from "services/connectorBuilder/ConnectorBuilderStateService"; | ||
|
||
import styles from "./ConfigMenuErrorBoundary.module.scss"; | ||
|
||
interface ApiErrorBoundaryState { | ||
error?: string | FormBuildError; | ||
} | ||
|
||
interface ApiErrorBoundaryProps { | ||
closeAndSwitchToYaml: () => void; | ||
currentView: EditorView; | ||
} | ||
|
||
export class ConfigMenuErrorBoundaryComponent extends React.Component< | ||
React.PropsWithChildren<ApiErrorBoundaryProps>, | ||
ApiErrorBoundaryState | ||
> { | ||
state: ApiErrorBoundaryState = {}; | ||
|
||
static getDerivedStateFromError(error: { message: string; __type?: string }): ApiErrorBoundaryState { | ||
if (isFormBuildError(error)) { | ||
return { error }; | ||
} | ||
|
||
return { error: error.message }; | ||
} | ||
render(): React.ReactNode { | ||
const { children, currentView, closeAndSwitchToYaml } = this.props; | ||
const { error } = this.state; | ||
|
||
if (!error) { | ||
return children; | ||
} | ||
return ( | ||
<div className={styles.errorContent}> | ||
<InfoBox> | ||
<FormattedMessage | ||
id="connectorBuilder.inputsError" | ||
values={{ error: typeof error === "string" ? error : <FormattedMessage id={error.message} /> }} | ||
/>{" "} | ||
<a | ||
target="_blank" | ||
href="https://docs.airbyte.com/connector-development/connector-specification-reference" | ||
rel="noreferrer" | ||
> | ||
<FormattedMessage id="connectorBuilder.inputsErrorDocumentation" /> | ||
</a> | ||
</InfoBox> | ||
<Button onClick={closeAndSwitchToYaml}> | ||
{currentView === "ui" ? ( | ||
<FormattedMessage id="connectorBuilder.goToYaml" /> | ||
) : ( | ||
<FormattedMessage id="connectorBuilder.close" /> | ||
)} | ||
</Button> | ||
</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
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
8 changes: 8 additions & 0 deletions
8
airbyte-webapp/src/core/domain/connectorBuilder/PatchedConnectorManifest.ts
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,8 @@ | ||
import { SourceDefinitionSpecificationDraft } from "core/domain/connector"; | ||
|
||
import { ConnectorManifest } from "../../request/ConnectorManifest"; | ||
|
||
// Patching this type as required until the upstream schema is updated | ||
export interface PatchedConnectorManifest extends ConnectorManifest { | ||
spec?: SourceDefinitionSpecificationDraft; | ||
} |
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
Oops, something went wrong.