Fix field settings selects (#12319)

* fix field type selects alignment

* mostly fix display values alignment

* remove unused component

* redo the fix

* Update frontend/src/metabase/admin/datamodel/components/FieldRemapping.jsx

Co-Authored-By: Kyle Doherty <kdoh@users.noreply.github.com>

Co-authored-by: Kyle Doherty <kdoh@users.noreply.github.com>

frontend/src/metabase/admin/datamodel/components/FieldRemapping.jsx

@@ -3,6 +3,7 @@ import React from "react";
 import { t } from "ttag";
 import _ from "underscore";
 import cx from "classnames";
+import { Flex } from "grid-styled";
 
 import SelectButton from "metabase/components/SelectButton";
 import Select from "metabase/components/Select";
@@ -254,52 +255,55 @@ export default class FieldRemapping extends React.Component {
 
     return (
       <div>
-        <Select
-          value={mappingType}
-          onChange={this.handleChangeMappingType}
-          options={this.getAvailableMappingTypes()}
-          optionValueFn={o => o}
-        />
-        {mappingType === MAP_OPTIONS.foreign && [
-          <SelectSeparator key="foreignKeySeparator" />,
-          <PopoverWithTrigger
-            ref="fkPopover"
-            triggerElement={
-              <SelectButton
-                hasValue={hasFKMappingValue}
-                className={cx("flex inline-block no-decoration", {
-                  "border-error": dismissedInitialFkTargetPopover,
-                  "border-dark": !dismissedInitialFkTargetPopover,
-                })}
-              >
-                {fkMappingField ? (
-                  fkMappingField.display_name
-                ) : (
-                  <span className="text-medium">{t`Choose a field`}</span>
-                )}
-              </SelectButton>
-            }
-            isInitiallyOpen={isChoosingInitialFkTarget}
-            onClose={this.onFkPopoverDismiss}
-          >
-            <FieldList
-              className="text-purple"
-              field={fkMappingField}
-              fieldOptions={{
-                count: 0,
-                dimensions: [],
-                fks: this.getForeignKeys(),
-              }}
-              table={table}
-              onFieldChange={this.onForeignKeyFieldChange}
-              hideSingleSectionTitle
-            />
-          </PopoverWithTrigger>,
-          dismissedInitialFkTargetPopover && (
-            <div className="text-error my2">{t`Please select a column to use for display.`}</div>
-          ),
-          hasChanged && hasFKMappingValue && <RemappingNamingTip />,
-        ]}
+        <Flex align="center">
+          <Select
+            value={mappingType}
+            onChange={this.handleChangeMappingType}
+            options={this.getAvailableMappingTypes()}
+            optionValueFn={o => o}
+            className="inline-block"
+          />
+          {mappingType === MAP_OPTIONS.foreign && [
+            <SelectSeparator classname="flex" key="foreignKeySeparator" />,
+            <PopoverWithTrigger
+              ref="fkPopover"
+              triggerElement={
+                <SelectButton
+                  hasValue={hasFKMappingValue}
+                  className={cx("flex inline-block no-decoration", {
+                    "border-error": dismissedInitialFkTargetPopover,
+                    "border-dark": !dismissedInitialFkTargetPopover,
+                  })}
+                >
+                  {fkMappingField ? (
+                    fkMappingField.display_name
+                  ) : (
+                    <span className="text-medium">{t`Choose a field`}</span>
+                  )}
+                </SelectButton>
+              }
+              isInitiallyOpen={isChoosingInitialFkTarget}
+              onClose={this.onFkPopoverDismiss}
+            >
+              <FieldList
+                className="text-purple"
+                field={fkMappingField}
+                fieldOptions={{
+                  count: 0,
+                  dimensions: [],
+                  fks: this.getForeignKeys(),
+                }}
+                table={table}
+                onFieldChange={this.onForeignKeyFieldChange}
+                hideSingleSectionTitle
+              />
+            </PopoverWithTrigger>,
+            dismissedInitialFkTargetPopover && (
+              <div className="text-error ml2">{t`Please select a column to use for display.`}</div>
+            ),
+          ]}
+        </Flex>
+        {hasChanged && hasFKMappingValue && <RemappingNamingTip />}
         {mappingType === MAP_OPTIONS.custom && (
           <div className="mt3">
             {hasChanged && <RemappingNamingTip />}

frontend/src/metabase/admin/datamodel/components/database/ColumnItem.jsx

@@ -62,7 +62,7 @@ export default class Column extends Component {
             />
             <div className="clearfix">
               <div className="flex flex-auto">
-                <div className="flex-auto pl1">
+                <div className="pl1 flex-auto">
                   <FieldVisibilityPicker
                     className="block"
                     field={field}
@@ -210,7 +210,7 @@ export class SpecialTypeAndTargetPicker extends Component {
     );
 
     return (
-      <div>
+      <div className={cx(selectSeparator ? "flex align-center" : null)}>
         <Select
           className={cx("TableEditor-field-special-type mt0", className)}
           value={field.special_type}
@@ -227,7 +227,11 @@ export class SpecialTypeAndTargetPicker extends Component {
         // handle a "secondary" input more elegantly
         showCurrencyTypeSelect && (
           <Select
-            className={cx("TableEditor-field-target inline-block", className)}
+            className={cx(
+              "TableEditor-field-target inline-block",
+              selectSeparator ? "mt0" : "mt1",
+              className,
+            )}
             value={
               (field.settings && field.settings.currency) ||
               getGlobalSettingsForColumn(field).currency ||
@@ -251,7 +255,11 @@ export class SpecialTypeAndTargetPicker extends Component {
         {showFKTargetSelect && selectSeparator}
         {showFKTargetSelect && (
           <Select
-            className={cx("TableEditor-field-target text-wrap", className)}
+            className={cx(
+              "TableEditor-field-target text-wrap",
+              selectSeparator ? "mt0" : "mt1",
+              className,
+            )}
             placeholder={t`Select a target`}
             searchProp="name"
             value={field.fk_target_field_id}

frontend/src/metabase/admin/datamodel/containers/FieldApp.jsx

@@ -299,6 +299,7 @@ const FieldGeneralPane = ({
     <Section>
       <SectionHeader title={t`Field Type`} />
       <SpecialTypeAndTargetPicker
+        className="flex align-center"
         field={field.getPlainObject()}
         updateField={onUpdateFieldProperties}
         idfields={idfields}