From 410cafe73e3dc3ca60f6ed65c89db41f6c14e273 Mon Sep 17 00:00:00 2001
From: Mark Berger <mark.berger@globallogic.com>
Date: Fri, 6 Jan 2023 01:42:19 +0200
Subject: [PATCH] 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)
---
 .../CreateConnection/CreateConnectionNameField.tsx        | 4 ++--
 .../src/components/CreateConnection/DataResidency.tsx     | 4 ++--
 .../components/LabeledControl/ControlLabels.module.scss   | 4 ++--
 .../Connection/ConnectionForm/ConnectionFormFields.tsx    | 8 ++++----
 .../ConnectionForm/ScheduleField/ScheduleField.tsx        | 8 ++++----
 .../components/NamespaceDefinitionField.tsx               | 4 ++--
 .../components/NonBreakingChangesPreferenceField.tsx      | 2 +-
 7 files changed, 17 insertions(+), 17 deletions(-)

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 = () => {
     <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
index 19863551e2b4..4da428ec5e8f 100644
--- a/airbyte-webapp/src/components/CreateConnection/DataResidency.tsx
+++ b/airbyte-webapp/src/components/CreateConnection/DataResidency.tsx
@@ -26,12 +26,12 @@ 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
                 label={<FormattedMessage id="connection.geographyTitle" />}
-                message={
+                infoTooltipContent={
                   <FormattedMessage
                     id="connection.geographyDescription"
                     values={{
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/views/Connection/ConnectionForm/ConnectionFormFields.tsx b/airbyte-webapp/src/views/Connection/ConnectionForm/ConnectionFormFields.tsx
index 07e7ea82f720..111b362ac1d4 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<ConnectionFormFieldsProps> = ({ valu
             {values.namespaceDefinition === NamespaceDefinitionType.customformat && (
               <Field name="namespaceFormat">
                 {({ field, meta }: FieldProps<string>) => (
-                  <FlexContainer alignItems="flex-start">
+                  <FlexContainer alignItems="center">
                     <div className={styles.leftFieldCol}>
                       <ControlLabels
                         className={styles.namespaceFormatLabel}
                         nextLine
                         error={!!meta.error}
                         label={<FormattedMessage id="connectionForm.namespaceFormat.title" />}
-                        message={<FormattedMessage id="connectionForm.namespaceFormat.subtitle" />}
+                        infoTooltipContent={<FormattedMessage id="connectionForm.namespaceFormat.subtitle" />}
                       />
                     </div>
                     <div className={classNames(styles.rightFieldCol, readonlyClass)}>
@@ -97,14 +97,14 @@ export const ConnectionFormFields: React.FC<ConnectionFormFieldsProps> = ({ valu
             )}
             <Field name="prefix">
               {({ field }: FieldProps<string>) => (
-                <FlexContainer alignItems="flex-start">
+                <FlexContainer alignItems="center">
                   <div className={styles.leftFieldCol}>
                     <ControlLabels
                       nextLine
                       label={formatMessage({
                         id: "form.prefix",
                       })}
-                      message={formatMessage({
+                      infoTooltipContent={formatMessage({
                         id: "form.prefix.message",
                       })}
                     />
diff --git a/airbyte-webapp/src/views/Connection/ConnectionForm/ScheduleField/ScheduleField.tsx b/airbyte-webapp/src/views/Connection/ConnectionForm/ScheduleField/ScheduleField.tsx
index 69572dad7d01..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 name="scheduleData">
       {({ field, meta, form }: FieldProps<ConnectionScheduleData>) => (
         <>
-          <FlexContainer alignItems="flex-start">
+          <FlexContainer alignItems="center">
             <div className={styles.leftFieldCol}>
               <ControlLabels
                 className={styles.connectorLabel}
@@ -161,7 +161,7 @@ export const ScheduleField: React.FC = () => {
             </div>
           </FlexContainer>
           {isCron(form) && (
-            <FlexContainer alignItems="flex-start">
+            <FlexContainer alignItems="center">
               <div className={styles.leftFieldCol}>
                 <ControlLabels
                   className={styles.connectorLabel}
@@ -170,7 +170,7 @@ export const ScheduleField: React.FC = () => {
                   label={formatMessage({
                     id: "form.cronExpression",
                   })}
-                  message={formatMessage(
+                  infoTooltipContent={formatMessage(
                     {
                       id: "form.cronExpression.message",
                     },
@@ -186,7 +186,7 @@ export const ScheduleField: React.FC = () => {
               </div>
 
               <div className={styles.rightFieldCol} style={{ pointerEvents: mode === "readonly" ? "none" : "auto" }}>
-                <FlexContainer alignItems="flex-start">
+                <FlexContainer alignItems="center">
                   <Input
                     disabled={mode === "readonly"}
                     error={!!meta.error}
diff --git a/airbyte-webapp/src/views/Connection/ConnectionForm/components/NamespaceDefinitionField.tsx b/airbyte-webapp/src/views/Connection/ConnectionForm/components/NamespaceDefinitionField.tsx
index 6378495322df..75cbf5cd1b68 100644
--- a/airbyte-webapp/src/views/Connection/ConnectionForm/components/NamespaceDefinitionField.tsx
+++ b/airbyte-webapp/src/views/Connection/ConnectionForm/components/NamespaceDefinitionField.tsx
@@ -31,13 +31,13 @@ export const NamespaceDefinitionField: React.FC<FieldProps<string>> = ({ field,
   const [, meta] = useField(field.name);
 
   return (
-    <FlexContainer alignItems="flex-start">
+    <FlexContainer alignItems="center">
       <div className={styles.leftFieldCol}>
         <ControlLabels
           nextLine
           error={!!meta.error && meta.touched}
           label={<FormattedMessage id="connectionForm.namespaceDefinition.title" />}
-          message={<FormattedMessage id="connectionForm.namespaceDefinition.subtitle" />}
+          infoTooltipContent={<FormattedMessage id="connectionForm.namespaceDefinition.subtitle" />}
         />
       </div>
       <div className={styles.rightFieldCol}>
diff --git a/airbyte-webapp/src/views/Connection/ConnectionForm/components/NonBreakingChangesPreferenceField.tsx b/airbyte-webapp/src/views/Connection/ConnectionForm/components/NonBreakingChangesPreferenceField.tsx
index 14d7a444b751..35eb5421ec5d 100644
--- a/airbyte-webapp/src/views/Connection/ConnectionForm/components/NonBreakingChangesPreferenceField.tsx
+++ b/airbyte-webapp/src/views/Connection/ConnectionForm/components/NonBreakingChangesPreferenceField.tsx
@@ -28,7 +28,7 @@ export const NonBreakingChangesPreferenceField: React.FC<FieldProps<string>> = (
   const { mode } = useConnectionFormService();
 
   return (
-    <FlexContainer alignItems="flex-start">
+    <FlexContainer alignItems="center">
       <div className={styles.leftFieldCol}>
         <ControlLabels
           nextLine