Skip to content

Commit

Permalink
Update form field labels in connection form to match design (#21036)
Browse files Browse the repository at this point in the history
* Update form field labels in connection form to match design

- Replaced ControlLabels message property with infoTooltipContent
- Replaced property "flex-start" to "center" for FlexContainer (New Connection)
  • Loading branch information
Mark Berger authored Jan 11, 2023
1 parent 74dec83 commit 4b5cf8b
Show file tree
Hide file tree
Showing 12 changed files with 162 additions and 54 deletions.
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
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
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
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
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,10 @@
justify-content: space-between;
}

.label {
width: 100%;
}

.dropdownWrapper {
display: flex;
flex: 1 0 310px;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { ControlLabels } from "components/LabeledControl";
import { Card } from "components/ui/Card";
import { Spinner } from "components/ui/Spinner";
import { ToastType } from "components/ui/Toast";
import { TooltipLearnMoreLink } from "components/ui/Tooltip";

import { Geography } from "core/request/AirbyteClient";
import { useConnectionEditService } from "hooks/services/ConnectionEdit/ConnectionEditService";
Expand Down Expand Up @@ -43,11 +44,11 @@ export const UpdateConnectionDataResidency: React.FC = () => {
return (
<Card withPadding>
<div className={styles.wrapper}>
<div>
<div className={styles.label}>
<ControlLabels
nextLine
label={<FormattedMessage id="connection.geographyTitle" />}
message={
infoTooltipContent={
<FormattedMessage
id="connection.geographyDescription"
values={{
Expand All @@ -56,11 +57,7 @@ export const UpdateConnectionDataResidency: React.FC = () => {
{node}
</a>
),
docLink: (node: React.ReactNode) => (
<a href={links.connectionDataResidency} target="_blank" rel="noreferrer">
{node}
</a>
),
docLink: () => <TooltipLearnMoreLink url={links.connectionDataResidency} />,
}}
/>
}
Expand Down
14 changes: 7 additions & 7 deletions airbyte-webapp/src/locales/en.json
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 @@ -389,7 +389,7 @@

"connection.geographyTitle": "Data residency",
"connection.requestNewGeography": "Request a new geography",
"connection.geographyDescription": "Choose where the data for this connection will be processed. Depending on your network configuration, you may need to <ipLink>add IP addresses</ipLink> to your allowlist. <docLink>Learn more</docLink>.",
"connection.geographyDescription": "Choose where the data for this connection will be processed. Depending on your network configuration, you may need to <ipLink>add IP addresses</ipLink> to your allowlist. <docLink></docLink>",
"connection.geography.auto": "Airbyte Default",
"connection.geography.us": "United States",
"connection.geography.eu": "European Union",
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
Loading

0 comments on commit 4b5cf8b

Please sign in to comment.