Implemented foreign key show/hide logic

frontend/src/metabase/css/core/flex.css

@@ -20,7 +20,7 @@
     align-items: center;
 }
 
-.align-baseline {
+.align-baseline, :local(.align-baseline) {
     align-items: baseline;
 }
 

frontend/src/metabase/reference/components/Field.css

 :local(.field) {
     composes: flex from "style";
+    composes: align-baseline from "style";
 }
 
 :local(.fieldName) {
@@ -13,3 +14,19 @@
 :local(.fieldDataType) {
     composes: flex-half from "style";
 }
+
+:local(.fieldSecondary) {
+    composes: field;
+}
+
+:local(.fieldActualName) {
+    composes: fieldName;
+}
+
+:local(.fieldForeignKey) {
+    composes: fieldType;
+}
+
+:local(.fieldOther) {
+    composes: fieldDataType;
+}

frontend/src/metabase/reference/components/Field.jsx

@@ -73,8 +73,40 @@ const Field = ({
                     {field.base_type}
                 </div>
             </div>
-            <div className={cx(S.itemSubtitle, { "mt1" : true })}>
-                { field.name }
+            <div className={cx(S.itemSubtitle, F.fieldSecondary, { "mt1" : true })}>
+                <div className={F.fieldActualName}>
+                    { field.name }
+                </div>
+                <div className={F.fieldForeignKey}>
+                    { isEditing ?
+                        (formField.special_type.value === 'fk' ||
+                        (field.special_type === 'fk' && formField.special_type.value === undefined)) &&
+                        <Select
+                            placeholder="Select a field type"
+                            value={MetabaseCore.field_special_types_map[field.special_type]}
+                            options={
+                                MetabaseCore.field_special_types
+                                    .concat({
+                                        'id': null,
+                                        'name': 'No field type',
+                                        'section': 'Other'
+                                    })
+                                    .filter(type => !isNumeric(field) ?
+                                        !(type.id && type.id.startsWith("timestamp_")) :
+                                        true
+                                    )
+                            }
+                            updateImmediately={true}
+                            onChange={(type) => formField.special_type.onChange(type.id)}
+                        /> :
+                        field.special_type === 'fk' &&
+                        <span>
+                            fk
+                        </span>
+                    }
+                </div>
+                <div className={F.fieldOther}>
+                </div>
             </div>
         </div>
     </div>