Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update form field labels in connection form to match design #21036

Merged
merged 10 commits into from
Jan 11, 2023
Merged

Update form field labels in connection form to match design #21036

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
901a90d
Update form field labels in connection form to match design
Jan 4, 2023
71081f9
Update form field labels in connection form to match design
Jan 4, 2023
410cafe
Update form field labels in connection form to match design
Jan 5, 2023
89857e7
Update form field labels in connection form to match design
Jan 6, 2023
f8166d8
Update form field labels in connection form to match design
Jan 6, 2023
b2da157
Update form field labels in connection form to match design
Jan 10, 2023
4e30293
Update form field labels in connection form to match design
Jan 10, 2023
f4f65df
Update form field labels in connection form to match design
Jan 10, 2023
5c552da
Update airbyte-webapp/src/views/Connection/ConnectionForm/ConnectionF…
Jan 10, 2023
1358c0a
Update form field labels in connection form to match design
Jan 10, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions airbyte-webapp/src/components/CreateConnection/CreateConnectionNameField.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,13 +16,13 @@ export const CreateConnectionNameField = () => {
<Section title={<FormattedMessage id="connection.title" />}>
<Field name="name">
{({ field, meta }: FieldProps<string>) => (
<FlexContainer alignItems="flex-start">
<FlexContainer alignItems="center">
<div className={styles.leftFieldCol}>
<ControlLabels
nextLine
error={!!meta.error && meta.touched}
label={<FormattedMessage id="form.connectionName" />}
message={formatMessage({
infoTooltipContent={formatMessage({
id: "form.connectionName.message",
})}
/>
Expand Down
5 changes: 3 additions & 2 deletions airbyte-webapp/src/components/CreateConnection/DataResidency.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,12 +26,13 @@ export const DataResidency: React.FC<DataResidencyProps> = ({ name = "geography"
<Section title={formatMessage({ id: "connection.geographyTitle" })}>
<Field name={name}>
{({ field, form }: FieldProps<Geography>) => (
<FlexContainer alignItems="flex-start">
<FlexContainer alignItems="center">
<div className={styles.leftFieldCol}>
<ControlLabels
nextLine
optional
label={<FormattedMessage id="connection.geographyTitle" />}
message={
infoTooltipContent={
<FormattedMessage
id="connection.geographyDescription"
values={{
Expand Down
84 changes: 72 additions & 12 deletions ...e-webapp/src/components/CreateConnection/__snapshots__/CreateConnectionForm.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,12 +33,27 @@ exports[`CreateConnectionForm should render 1`] = `
class="<removed-for-snapshot-test>"
>
Connection name*
<span>
<br />
<span
class="<removed-for-snapshot-test>"
>
<span
class="<removed-for-snapshot-test>"
>
Pick a name to help you identify this connection
<span
class="<removed-for-snapshot-test>"
>
<svg
fill="none"
height="14"
viewBox="0 0 14 14"
width="14"
>
<path
d="M7.00016 13.6663C3.31816 13.6663 0.333496 10.6817 0.333496 6.99967C0.333496 3.31767 3.31816 0.333008 7.00016 0.333008C10.6822 0.333008 13.6668 3.31767 13.6668 6.99967C13.6668 10.6817 10.6822 13.6663 7.00016 13.6663ZM7.00016 12.333C8.41465 12.333 9.77121 11.7711 10.7714 10.7709C11.7716 9.77072 12.3335 8.41416 12.3335 6.99967C12.3335 5.58519 11.7716 4.22863 10.7714 3.22844C9.77121 2.22824 8.41465 1.66634 7.00016 1.66634C5.58567 1.66634 4.22912 2.22824 3.22893 3.22844C2.22873 4.22863 1.66683 5.58519 1.66683 6.99967C1.66683 8.41416 2.22873 9.77072 3.22893 10.7709C4.22912 11.7711 5.58567 12.333 7.00016 12.333ZM6.3335 3.66634H7.66683V4.99967H6.3335V3.66634ZM6.3335 6.33301H7.66683V10.333H6.3335V6.33301Z"
fill="currentColor"
/>
</svg>
</span>
</span>
</span>
</label>
Expand Down Expand Up @@ -90,12 +105,27 @@ exports[`CreateConnectionForm should render 1`] = `
class="<removed-for-snapshot-test>"
>
Replication frequency*
<span>
<br />
<span
class="<removed-for-snapshot-test>"
>
<span
class="<removed-for-snapshot-test>"
>
Set how often data should sync to the destination
<span
class="<removed-for-snapshot-test>"
>
<svg
fill="none"
height="14"
viewBox="0 0 14 14"
width="14"
>
<path
d="M7.00016 13.6663C3.31816 13.6663 0.333496 10.6817 0.333496 6.99967C0.333496 3.31767 3.31816 0.333008 7.00016 0.333008C10.6822 0.333008 13.6668 3.31767 13.6668 6.99967C13.6668 10.6817 10.6822 13.6663 7.00016 13.6663ZM7.00016 12.333C8.41465 12.333 9.77121 11.7711 10.7714 10.7709C11.7716 9.77072 12.3335 8.41416 12.3335 6.99967C12.3335 5.58519 11.7716 4.22863 10.7714 3.22844C9.77121 2.22824 8.41465 1.66634 7.00016 1.66634C5.58567 1.66634 4.22912 2.22824 3.22893 3.22844C2.22873 4.22863 1.66683 5.58519 1.66683 6.99967C1.66683 8.41416 2.22873 9.77072 3.22893 10.7709C4.22912 11.7711 5.58567 12.333 7.00016 12.333ZM6.3335 3.66634H7.66683V4.99967H6.3335V3.66634ZM6.3335 6.33301H7.66683V10.333H6.3335V6.33301Z"
fill="currentColor"
/>
</svg>
</span>
</span>
</span>
</label>
Expand Down Expand Up @@ -214,12 +244,27 @@ exports[`CreateConnectionForm should render 1`] = `
class="<removed-for-snapshot-test>"
>
Destination Namespace*
<span>
<br />
<span
class="<removed-for-snapshot-test>"
>
<span
class="<removed-for-snapshot-test>"
>
Define the location where the data will be stored in the destination
<span
class="<removed-for-snapshot-test>"
>
<svg
fill="none"
height="14"
viewBox="0 0 14 14"
width="14"
>
<path
d="M7.00016 13.6663C3.31816 13.6663 0.333496 10.6817 0.333496 6.99967C0.333496 3.31767 3.31816 0.333008 7.00016 0.333008C10.6822 0.333008 13.6668 3.31767 13.6668 6.99967C13.6668 10.6817 10.6822 13.6663 7.00016 13.6663ZM7.00016 12.333C8.41465 12.333 9.77121 11.7711 10.7714 10.7709C11.7716 9.77072 12.3335 8.41416 12.3335 6.99967C12.3335 5.58519 11.7716 4.22863 10.7714 3.22844C9.77121 2.22824 8.41465 1.66634 7.00016 1.66634C5.58567 1.66634 4.22912 2.22824 3.22893 3.22844C2.22873 4.22863 1.66683 5.58519 1.66683 6.99967C1.66683 8.41416 2.22873 9.77072 3.22893 10.7709C4.22912 11.7711 5.58567 12.333 7.00016 12.333ZM6.3335 3.66634H7.66683V4.99967H6.3335V3.66634ZM6.3335 6.33301H7.66683V10.333H6.3335V6.33301Z"
fill="currentColor"
/>
</svg>
</span>
</span>
</span>
</label>
Expand Down Expand Up @@ -322,12 +367,27 @@ exports[`CreateConnectionForm should render 1`] = `
class="<removed-for-snapshot-test>"
>
Destination Stream Prefix (Optional)
<span>
<br />
<span
class="<removed-for-snapshot-test>"
>
<span
class="<removed-for-snapshot-test>"
>
Add a prefix to stream names (ex. “airbyte_” causes “projects” =&gt; “airbyte_projects”)
<span
class="<removed-for-snapshot-test>"
>
<svg
fill="none"
height="14"
viewBox="0 0 14 14"
width="14"
>
<path
d="M7.00016 13.6663C3.31816 13.6663 0.333496 10.6817 0.333496 6.99967C0.333496 3.31767 3.31816 0.333008 7.00016 0.333008C10.6822 0.333008 13.6668 3.31767 13.6668 6.99967C13.6668 10.6817 10.6822 13.6663 7.00016 13.6663ZM7.00016 12.333C8.41465 12.333 9.77121 11.7711 10.7714 10.7709C11.7716 9.77072 12.3335 8.41416 12.3335 6.99967C12.3335 5.58519 11.7716 4.22863 10.7714 3.22844C9.77121 2.22824 8.41465 1.66634 7.00016 1.66634C5.58567 1.66634 4.22912 2.22824 3.22893 3.22844C2.22873 4.22863 1.66683 5.58519 1.66683 6.99967C1.66683 8.41416 2.22873 9.77072 3.22893 10.7709C4.22912 11.7711 5.58567 12.333 7.00016 12.333ZM6.3335 3.66634H7.66683V4.99967H6.3335V3.66634ZM6.3335 6.33301H7.66683V10.333H6.3335V6.33301Z"
fill="currentColor"
/>
</svg>
</span>
</span>
</span>
</label>
Expand Down
4 changes: 2 additions & 2 deletions airbyte-webapp/src/components/LabeledControl/ControlLabels.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
@use "../../scss/colors";
@use "../../scss/variables";
@use "scss/colors";
@use "scss/variables";

.controlContainer {
width: 100%;
Expand Down
2 changes: 1 addition & 1 deletion ...src/components/connection/UpdateConnectionDataResidency/UpdateConnectionDataResidency.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ export const UpdateConnectionDataResidency: React.FC = () => {
<ControlLabels
nextLine
label={<FormattedMessage id="connection.geographyTitle" />}
message={
infoTooltipContent={
<FormattedMessage
id="connection.geographyDescription"
values={{
Expand Down
12 changes: 6 additions & 6 deletions airbyte-webapp/src/locales/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@
"form.searchName": "search by name...",
"form.noResult": "No result",
"form.noConnectorFound": "No matching connector found",
"form.connectionName": "Connection name*",
"form.connectionName": "Connection name",
"form.connectionName.placeholder": "Name",
"form.sourceName": "Source name",
"form.destinationName": "Destination name",
Expand Down Expand Up @@ -96,7 +96,7 @@
"form.dockerError": "Could not find docker image",
"form.edit": "Edit",
"form.done": "Done",
"form.prefix": "Destination Stream Prefix (Optional)",
"form.prefix": "Destination Stream Prefix",
"form.prefix.message": "Add a prefix to stream names (ex. “airbyte_” causes “projects” => “airbyte_projects”)",
"form.prefix.placeholder": "prefix",
"form.nameSearch": "Search stream name",
Expand All @@ -122,7 +122,7 @@
"connectionForm.normalization.title": "Normalization",
"connectionForm.operations.notSupported": "Normalization and Transformation operations are not supported for this connection.",
"connectionForm.transformation.title": "Transformation",
"connectionForm.namespaceDefinition.title": "Destination Namespace*",
"connectionForm.namespaceDefinition.title": "Destination Namespace",
"connectionForm.namespaceDefinition.subtitle": "Define the location where the data will be stored in the destination",
"connectionForm.namespaceFormat.title": "Namespace Custom Format",
"connectionForm.namespaceFormat.subtitle": "A format string to use as namespace in the destination. Special variables: $'{SOURCE_NAMESPACE'}",
Expand Down Expand Up @@ -151,7 +151,7 @@
"connectionForm.bulkEdit.cancel": "Cancel",
"connectionForm.bulkEdit.apply": "Apply",
"connectionForm.bulkEdit.pillButtonLabel.notAvailable": "Not available",
"connectionForm.nonBreakingChangesPreference.label": "Non-breaking schema updates detected*",
"connectionForm.nonBreakingChangesPreference.label": "Non-breaking schema updates detected",
"connectionForm.nonBreakingChangesPreference.message": "Set how Airbyte handles syncs when it detects a non-breaking schema change in the source",
"connectionForm.nonBreakingChangesPreference.ignore": "Ignore",
"connectionForm.nonBreakingChangesPreference.disable": "Disable connection",
Expand Down Expand Up @@ -432,8 +432,8 @@
"connection.schemaChange.nonBreaking": "Non-breaking schema updates detected",
"connection.schemaChange.reviewAction": "Review changes",

"form.frequency": "Replication frequency*",
"form.cronExpression": "Cron expression*",
"form.frequency": "Replication frequency",
"form.cronExpression": "Cron expression",
"form.cronExpression.placeholder": "Cron expression",
"form.cronExpression.error": "Invalid cron expression",
"form.cronExpression.underOneHourNotAllowed": "Syncs cannot execute more frequently than once per hour",
Expand Down
63 changes: 54 additions & 9 deletions ...nectionPage/pages/ConnectionItemPage/__snapshots__/ConnectionReplicationTab.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,12 +36,27 @@ exports[`ConnectionReplicationTab should render 1`] = `
class="<removed-for-snapshot-test>"
>
Replication frequency*
<span>
<br />
<span
class="<removed-for-snapshot-test>"
>
<span
class="<removed-for-snapshot-test>"
>
Set how often data should sync to the destination
<span
class="<removed-for-snapshot-test>"
>
<svg
fill="none"
height="14"
viewBox="0 0 14 14"
width="14"
>
<path
d="M7.00016 13.6663C3.31816 13.6663 0.333496 10.6817 0.333496 6.99967C0.333496 3.31767 3.31816 0.333008 7.00016 0.333008C10.6822 0.333008 13.6668 3.31767 13.6668 6.99967C13.6668 10.6817 10.6822 13.6663 7.00016 13.6663ZM7.00016 12.333C8.41465 12.333 9.77121 11.7711 10.7714 10.7709C11.7716 9.77072 12.3335 8.41416 12.3335 6.99967C12.3335 5.58519 11.7716 4.22863 10.7714 3.22844C9.77121 2.22824 8.41465 1.66634 7.00016 1.66634C5.58567 1.66634 4.22912 2.22824 3.22893 3.22844C2.22873 4.22863 1.66683 5.58519 1.66683 6.99967C1.66683 8.41416 2.22873 9.77072 3.22893 10.7709C4.22912 11.7711 5.58567 12.333 7.00016 12.333ZM6.3335 3.66634H7.66683V4.99967H6.3335V3.66634ZM6.3335 6.33301H7.66683V10.333H6.3335V6.33301Z"
fill="currentColor"
/>
</svg>
</span>
</span>
</span>
</label>
Expand Down Expand Up @@ -160,12 +175,27 @@ exports[`ConnectionReplicationTab should render 1`] = `
class="<removed-for-snapshot-test>"
>
Destination Namespace*
<span>
<br />
<span
class="<removed-for-snapshot-test>"
>
<span
class="<removed-for-snapshot-test>"
>
Define the location where the data will be stored in the destination
<span
class="<removed-for-snapshot-test>"
>
<svg
fill="none"
height="14"
viewBox="0 0 14 14"
width="14"
>
<path
d="M7.00016 13.6663C3.31816 13.6663 0.333496 10.6817 0.333496 6.99967C0.333496 3.31767 3.31816 0.333008 7.00016 0.333008C10.6822 0.333008 13.6668 3.31767 13.6668 6.99967C13.6668 10.6817 10.6822 13.6663 7.00016 13.6663ZM7.00016 12.333C8.41465 12.333 9.77121 11.7711 10.7714 10.7709C11.7716 9.77072 12.3335 8.41416 12.3335 6.99967C12.3335 5.58519 11.7716 4.22863 10.7714 3.22844C9.77121 2.22824 8.41465 1.66634 7.00016 1.66634C5.58567 1.66634 4.22912 2.22824 3.22893 3.22844C2.22873 4.22863 1.66683 5.58519 1.66683 6.99967C1.66683 8.41416 2.22873 9.77072 3.22893 10.7709C4.22912 11.7711 5.58567 12.333 7.00016 12.333ZM6.3335 3.66634H7.66683V4.99967H6.3335V3.66634ZM6.3335 6.33301H7.66683V10.333H6.3335V6.33301Z"
fill="currentColor"
/>
</svg>
</span>
</span>
</span>
</label>
Expand Down Expand Up @@ -268,12 +298,27 @@ exports[`ConnectionReplicationTab should render 1`] = `
class="<removed-for-snapshot-test>"
>
Destination Stream Prefix (Optional)
<span>
<br />
<span
class="<removed-for-snapshot-test>"
>
<span
class="<removed-for-snapshot-test>"
>
Add a prefix to stream names (ex. “airbyte_” causes “projects” =&gt; “airbyte_projects”)
<span
class="<removed-for-snapshot-test>"
>
<svg
fill="none"
height="14"
viewBox="0 0 14 14"
width="14"
>
<path
d="M7.00016 13.6663C3.31816 13.6663 0.333496 10.6817 0.333496 6.99967C0.333496 3.31767 3.31816 0.333008 7.00016 0.333008C10.6822 0.333008 13.6668 3.31767 13.6668 6.99967C13.6668 10.6817 10.6822 13.6663 7.00016 13.6663ZM7.00016 12.333C8.41465 12.333 9.77121 11.7711 10.7714 10.7709C11.7716 9.77072 12.3335 8.41416 12.3335 6.99967C12.3335 5.58519 11.7716 4.22863 10.7714 3.22844C9.77121 2.22824 8.41465 1.66634 7.00016 1.66634C5.58567 1.66634 4.22912 2.22824 3.22893 3.22844C2.22873 4.22863 1.66683 5.58519 1.66683 6.99967C1.66683 8.41416 2.22873 9.77072 3.22893 10.7709C4.22912 11.7711 5.58567 12.333 7.00016 12.333ZM6.3335 3.66634H7.66683V4.99967H6.3335V3.66634ZM6.3335 6.33301H7.66683V10.333H6.3335V6.33301Z"
fill="currentColor"
/>
</svg>
</span>
</span>
</span>
</label>
Expand Down
Loading