diff --git a/airbyte-webapp/src/components/CreateConnection/CreateConnectionNameField.tsx b/airbyte-webapp/src/components/CreateConnection/CreateConnectionNameField.tsx index 5948738b5090..6b450c3f9223 100644 --- a/airbyte-webapp/src/components/CreateConnection/CreateConnectionNameField.tsx +++ b/airbyte-webapp/src/components/CreateConnection/CreateConnectionNameField.tsx @@ -16,13 +16,13 @@ export const CreateConnectionNameField = () => {
}> {({ field, meta }: FieldProps) => ( - +
} - message={formatMessage({ + infoTooltipContent={formatMessage({ id: "form.connectionName.message", })} /> diff --git a/airbyte-webapp/src/components/CreateConnection/DataResidency.tsx b/airbyte-webapp/src/components/CreateConnection/DataResidency.tsx index 19863551e2b4..a1cc35db4e07 100644 --- a/airbyte-webapp/src/components/CreateConnection/DataResidency.tsx +++ b/airbyte-webapp/src/components/CreateConnection/DataResidency.tsx @@ -26,12 +26,13 @@ export const DataResidency: React.FC = ({ name = "geography"
{({ field, form }: FieldProps) => ( - +
} - message={ + infoTooltipContent={ Connection name* - -
+ - Pick a name to help you identify this connection + + + + + @@ -90,12 +105,27 @@ exports[`CreateConnectionForm should render 1`] = ` class="" > Replication frequency* - -
+ - Set how often data should sync to the destination + + + + + @@ -214,12 +244,27 @@ exports[`CreateConnectionForm should render 1`] = ` class="" > Destination Namespace* - -
+ - Define the location where the data will be stored in the destination + + + + + @@ -322,12 +367,27 @@ exports[`CreateConnectionForm should render 1`] = ` class="" > Destination Stream Prefix (Optional) - -
+ - Add a prefix to stream names (ex. “airbyte_” causes “projects” => “airbyte_projects”) + + + + + diff --git a/airbyte-webapp/src/components/LabeledControl/ControlLabels.module.scss b/airbyte-webapp/src/components/LabeledControl/ControlLabels.module.scss index af7b055a7cde..1468e65b1598 100644 --- a/airbyte-webapp/src/components/LabeledControl/ControlLabels.module.scss +++ b/airbyte-webapp/src/components/LabeledControl/ControlLabels.module.scss @@ -1,5 +1,5 @@ -@use "../../scss/colors"; -@use "../../scss/variables"; +@use "scss/colors"; +@use "scss/variables"; .controlContainer { width: 100%; diff --git a/airbyte-webapp/src/components/connection/UpdateConnectionDataResidency/UpdateConnectionDataResidency.module.scss b/airbyte-webapp/src/components/connection/UpdateConnectionDataResidency/UpdateConnectionDataResidency.module.scss index 7b68578ce9f9..d1cd836220d1 100644 --- a/airbyte-webapp/src/components/connection/UpdateConnectionDataResidency/UpdateConnectionDataResidency.module.scss +++ b/airbyte-webapp/src/components/connection/UpdateConnectionDataResidency/UpdateConnectionDataResidency.module.scss @@ -4,6 +4,10 @@ justify-content: space-between; } +.label { + width: 100%; +} + .dropdownWrapper { display: flex; flex: 1 0 310px; diff --git a/airbyte-webapp/src/components/connection/UpdateConnectionDataResidency/UpdateConnectionDataResidency.tsx b/airbyte-webapp/src/components/connection/UpdateConnectionDataResidency/UpdateConnectionDataResidency.tsx index bff661856ad9..e350b464fc26 100644 --- a/airbyte-webapp/src/components/connection/UpdateConnectionDataResidency/UpdateConnectionDataResidency.tsx +++ b/airbyte-webapp/src/components/connection/UpdateConnectionDataResidency/UpdateConnectionDataResidency.tsx @@ -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"; @@ -43,11 +44,11 @@ export const UpdateConnectionDataResidency: React.FC = () => { return (
-
+
} - message={ + infoTooltipContent={ { {node} ), - docLink: (node: React.ReactNode) => ( - - {node} - - ), + docLink: () => , }} /> } diff --git a/airbyte-webapp/src/locales/en.json b/airbyte-webapp/src/locales/en.json index 49b7a1d5b886..35f0e9fda57a 100644 --- a/airbyte-webapp/src/locales/en.json +++ b/airbyte-webapp/src/locales/en.json @@ -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", @@ -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", @@ -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'}", @@ -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", @@ -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 add IP addresses to your allowlist. Learn more.", + "connection.geographyDescription": "Choose where the data for this connection will be processed. Depending on your network configuration, you may need to add IP addresses to your allowlist. ", "connection.geography.auto": "Airbyte Default", "connection.geography.us": "United States", "connection.geography.eu": "European Union", @@ -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", diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/__snapshots__/ConnectionReplicationTab.test.tsx.snap b/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/__snapshots__/ConnectionReplicationTab.test.tsx.snap index b8d60981c950..cd975243beb4 100644 --- a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/__snapshots__/ConnectionReplicationTab.test.tsx.snap +++ b/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/__snapshots__/ConnectionReplicationTab.test.tsx.snap @@ -36,12 +36,27 @@ exports[`ConnectionReplicationTab should render 1`] = ` class="" > Replication frequency* - -
+ - Set how often data should sync to the destination + + + + + @@ -160,12 +175,27 @@ exports[`ConnectionReplicationTab should render 1`] = ` class="" > Destination Namespace* - -
+ - Define the location where the data will be stored in the destination + + + + + @@ -268,12 +298,27 @@ exports[`ConnectionReplicationTab should render 1`] = ` class="" > Destination Stream Prefix (Optional) - -
+ - Add a prefix to stream names (ex. “airbyte_” causes “projects” => “airbyte_projects”) + + + + + diff --git a/airbyte-webapp/src/views/Connection/ConnectionForm/ConnectionFormFields.tsx b/airbyte-webapp/src/views/Connection/ConnectionForm/ConnectionFormFields.tsx index 07e7ea82f720..edd8f05d5812 100644 --- a/airbyte-webapp/src/views/Connection/ConnectionForm/ConnectionFormFields.tsx +++ b/airbyte-webapp/src/views/Connection/ConnectionForm/ConnectionFormFields.tsx @@ -72,14 +72,14 @@ export const ConnectionFormFields: React.FC = ({ valu {values.namespaceDefinition === NamespaceDefinitionType.customformat && ( {({ field, meta }: FieldProps) => ( - +
} - message={} + infoTooltipContent={} />
@@ -97,14 +97,15 @@ export const ConnectionFormFields: React.FC = ({ valu )} {({ field }: FieldProps) => ( - +
diff --git a/airbyte-webapp/src/views/Connection/ConnectionForm/ScheduleField/ScheduleField.tsx b/airbyte-webapp/src/views/Connection/ConnectionForm/ScheduleField/ScheduleField.tsx index b9d267c8d5e2..368c39c97576 100644 --- a/airbyte-webapp/src/views/Connection/ConnectionForm/ScheduleField/ScheduleField.tsx +++ b/airbyte-webapp/src/views/Connection/ConnectionForm/ScheduleField/ScheduleField.tsx @@ -135,7 +135,7 @@ export const ScheduleField: React.FC = () => { {({ field, meta, form }: FieldProps) => ( <> - +
{ label={formatMessage({ id: "form.frequency", })} - message={formatMessage({ + infoTooltipContent={formatMessage({ id: "form.frequency.message", })} /> @@ -161,7 +161,7 @@ export const ScheduleField: React.FC = () => {
{isCron(form) && ( - +
{ label={formatMessage({ id: "form.cronExpression", })} - message={formatMessage( + infoTooltipContent={formatMessage( { id: "form.cronExpression.message", }, @@ -186,7 +186,7 @@ export const ScheduleField: React.FC = () => {
- + > = ({ field, const [, meta] = useField(field.name); return ( - +
} - message={} + infoTooltipContent={} />
diff --git a/airbyte-webapp/src/views/Connection/ConnectionForm/components/NonBreakingChangesPreferenceField.tsx b/airbyte-webapp/src/views/Connection/ConnectionForm/components/NonBreakingChangesPreferenceField.tsx index 1e0e34d316fa..35eb5421ec5d 100644 --- a/airbyte-webapp/src/views/Connection/ConnectionForm/components/NonBreakingChangesPreferenceField.tsx +++ b/airbyte-webapp/src/views/Connection/ConnectionForm/components/NonBreakingChangesPreferenceField.tsx @@ -28,14 +28,14 @@ export const NonBreakingChangesPreferenceField: React.FC> = ( const { mode } = useConnectionFormService(); return ( - +