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

* 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)
airbytehq · Jan 11, 2023 · 4b5cf8b · 4b5cf8b
1 parent 74dec83
commit 4b5cf8b
Show file tree

Hide file tree

Showing 12 changed files with 162 additions and 54 deletions.
diff --git a/airbyte-webapp/src/components/CreateConnection/CreateConnectionNameField.tsx b/airbyte-webapp/src/components/CreateConnection/CreateConnectionNameField.tsx
@@ -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",
                 })}
               />

diff --git 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<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={{

diff --git a/...e-webapp/src/components/CreateConnection/__snapshots__/CreateConnectionForm.test.tsx.snap b/...e-webapp/src/components/CreateConnection/__snapshots__/CreateConnectionForm.test.tsx.snap
@@ -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>
@@ -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>
@@ -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>
@@ -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>

diff --git 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/...onents/connection/UpdateConnectionDataResidency/UpdateConnectionDataResidency.module.scss b/...onents/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/...src/components/connection/UpdateConnectionDataResidency/UpdateConnectionDataResidency.tsx b/...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 (
     <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={{
@@ -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} />,
                 }}
               />
             }

diff --git 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 <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",
@@ -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",