ENG-3617: fix system integration form keys misalignment, make it look more consistent with other forms

changelog/8131-fix-integration-form-misalignment.yaml

@@ -0,0 +1,4 @@
+type: Fixed
+description: Fixed misaligned field labels on the system integration configuration form. Aligned its look more with other forms.
+pr: 8131
+labels: []

clients/admin-ui/src/features/common/form/FormFieldFromSchema.tsx

@@ -10,7 +10,6 @@ export type FormFieldProps = {
   name: string;
   fieldSchema: ConnectionTypeSecretSchemaProperty;
   isRequired: boolean;
-  layout?: "stacked" | "inline";
   secretsSchema?: ConnectionTypeSecretSchemaResponse;
   validate?: (value: string | undefined) => string | undefined;
 };
@@ -19,7 +18,6 @@ export const FormFieldFromSchema = ({
   name,
   fieldSchema,
   isRequired,
-  layout = "stacked",
   secretsSchema,
   validate,
 }: FormFieldProps) => {
@@ -64,7 +62,6 @@ export const FormFieldFromSchema = ({
     label: fieldSchema.title,
     tooltip: fieldSchema.description,
     rules,
-    layout: layout === "inline" ? ("horizontal" as const) : undefined,
   };
 
   if (isSelect) {

clients/admin-ui/src/features/datastore-connections/system_portal_config/forms/ConnectorParameters.tsx

@@ -440,9 +440,7 @@ export const ConnectorParameters = ({
         mb={4}
       >
         <div>
-          Connect to your {connectionOption!.human_readable} environment by
-          providing the information below. Once you have saved the form, you may
-          test the integration to confirm that it&apos;s working correctly.
+          {`Connect to your ${connectionOption!.human_readable} environment by providing the information below. Once you have saved the form, you may test the integration to confirm that it's working correctly.`}
         </div>
         {connectionOption.user_guide && (
           <div style={{ marginTop: "12px" }}>

clients/admin-ui/src/features/datastore-connections/system_portal_config/forms/ConnectorParametersForm.tsx

@@ -284,15 +284,13 @@ export const ConnectorParametersForm = ({
       {contextHolder}
       <Form
         form={form}
-        layout="horizontal"
+        layout="vertical"
         initialValues={initialFormValues}
         onFinish={handleFinish}
         key={connectionConfig?.key ?? "create"}
         validateTrigger="onBlur"
-        labelCol={{ flex: "180px" }}
-        labelAlign="left"
       >
-        <Flex vertical>
+        <Flex vertical className="[&_.ant-form-item]:mb-4">
           <Form.Item
             name="name"
             label="Name"
@@ -350,7 +348,6 @@ export const ConnectorParametersForm = ({
                     isRequired={secretsSchema.required?.includes(key)}
                     secretsSchema={secretsSchema}
                     validate={getFieldValidation(key, item)}
-                    layout="inline"
                   />
                 );
               })

clients/admin-ui/src/features/integrations/add-integration/ConfigureIntegrationForm.tsx

@@ -480,7 +480,7 @@ export const ConfigureIntegrationForm = ({
         onFinish={handleSubmit}
         key={connection?.key ?? "create"}
       >
-        <Flex vertical className="mt-4">
+        <Flex vertical className="mt-4 [&_.ant-form-item]:mb-4">
           <Form.Item
             name="name"
             label="Name"