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 10, 2023 · 410cafe · 410cafe
1 parent 71081f9
commit 410cafe
Show file tree

Hide file tree

Showing 7 changed files with 17 additions and 17 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,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
@@ -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
@@ -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
@@ -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
@@ -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/...bapp/src/views/Connection/ConnectionForm/components/NonBreakingChangesPreferenceField.tsx b/...bapp/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