Display the original field name when editing model column metadata (#24848)

* Display original field name with  form input

* Add subtitle through to input component (#24859)

* Add subtitle through input component

* Adjust layout

Co-authored-by: Callum Herries <hi@callumherries.com>

Co-authored-by: Gustavo Saiani <gustavo@poe.ma>

frontend/src/metabase/components/form/widgets/FormInputWidget.jsx

@@ -14,6 +14,7 @@ const propTypes = {
   autoFocus: PropTypes.bool,
   helperText: PropTypes.node,
   tabIndex: PropTypes.string,
+  subtitle: PropTypes.string,
 };
 
 const FormInputWidget = forwardRef(function FormInputWidget(
@@ -25,6 +26,7 @@ const FormInputWidget = forwardRef(function FormInputWidget(
     autoFocus,
     helperText,
     tabIndex,
+    subtitle,
   },
   ref,
 ) {
@@ -41,6 +43,7 @@ const FormInputWidget = forwardRef(function FormInputWidget(
       rightIconTooltip={helperText}
       tabIndex={tabIndex}
       fullWidth
+      subtitle={subtitle}
       ref={ref}
     />
   );

frontend/src/metabase/core/components/Input/Input.styled.tsx

 import styled from "@emotion/styled";
 import { css } from "@emotion/react";
 import { color } from "metabase/lib/colors";
-import { space } from "metabase/styled-components/theme";
+import { monospaceFontFamily, space } from "metabase/styled-components/theme";
 import IconButtonWrapper from "metabase/components/IconButtonWrapper";
 import { InputSize } from "./types";
 
@@ -11,6 +11,7 @@ export interface InputProps {
   fullWidth?: boolean;
   hasLeftIcon?: boolean;
   hasRightIcon?: boolean;
+  subtitle?: string;
 }
 
 export const InputRoot = styled.div<InputProps>`
@@ -68,6 +69,12 @@ export const InputField = styled.input<InputProps>`
       line-height: 1rem;
       padding: 0.4375rem 0.625rem;
     `};
+
+  ${props =>
+    props.subtitle &&
+    css`
+      padding-top: 1.75rem;
+    `};
 `;
 
 export const InputButton = styled(IconButtonWrapper)`
@@ -84,3 +91,12 @@ export const InputLeftButton = styled(InputButton)`
 export const InputRightButton = styled(InputButton)`
   right: 0;
 `;
+
+export const InputSubtitle = styled.div`
+  color: ${color("text-light")};
+  position: absolute;
+  top: 1.25em;
+  left: 1.25em;
+  font-family: ${monospaceFontFamily};
+  font-size: 0.75em;
+`;

frontend/src/metabase/core/components/Input/Input.tsx

@@ -12,6 +12,7 @@ import {
   InputLeftButton,
   InputRightButton,
   InputRoot,
+  InputSubtitle,
 } from "./Input.styled";
 import { InputSize } from "./types";
 
@@ -29,6 +30,7 @@ export interface InputProps extends InputAttributes {
   leftIconTooltip?: ReactNode;
   rightIcon?: string;
   rightIconTooltip?: ReactNode;
+  subtitle?: string;
   onLeftIconClick?: (event: MouseEvent<HTMLButtonElement>) => void;
   onRightIconClick?: (event: MouseEvent<HTMLButtonElement>) => void;
 }
@@ -47,6 +49,7 @@ const Input = forwardRef(function Input(
     rightIconTooltip,
     onLeftIconClick,
     onRightIconClick,
+    subtitle,
     ...props
   }: InputProps,
   ref: Ref<HTMLDivElement>,
@@ -58,6 +61,8 @@ const Input = forwardRef(function Input(
       style={style}
       fullWidth={fullWidth}
     >
+      {subtitle && <InputSubtitle>{subtitle}</InputSubtitle>}
+
       <InputField
         {...props}
         ref={inputRef}
@@ -65,6 +70,7 @@ const Input = forwardRef(function Input(
         hasError={error}
         fullWidth={fullWidth}
         hasRightIcon={Boolean(rightIcon)}
+        subtitle={subtitle}
       />
       {leftIcon && (
         <Tooltip tooltip={leftIconTooltip} placement="left" offset={[0, 24]}>

frontend/src/metabase/query_builder/components/DatasetEditor/DatasetFieldMetadataSidebar/DatasetFieldMetadataSidebar.jsx

@@ -68,7 +68,7 @@ function getSemanticTypeOptions() {
   ];
 }
 
-function getFormFields({ dataset }) {
+function getFormFields({ dataset, field }) {
   const visibilityTypeOptions = field_visibility_types
     .filter(type => type.id !== "sensitive")
     .map(type => ({
@@ -78,7 +78,11 @@ function getFormFields({ dataset }) {
 
   return formFieldValues =>
     [
-      { name: "display_name", title: t`Display name` },
+      {
+        name: "display_name",
+        title: t`Display name`,
+        subtitle: field.name,
+      },
       {
         name: "description",
         title: t`Description`,
@@ -172,9 +176,9 @@ function DatasetFieldMetadataSidebar({
 
   const form = useMemo(
     () => ({
-      fields: getFormFields({ dataset }),
+      fields: getFormFields({ dataset, field }),
     }),
-    [dataset],
+    [field, dataset],
   );
 
   const [tab, setTab] = useState(TAB.SETTINGS);

frontend/src/metabase/styled-components/theme/index.ts

 export * from "./media-queries";
 export * from "./space";
+export * from "./typography";

frontend/src/metabase/styled-components/theme/typography.ts

+export const monospaceFontFamily = "Monaco, monospace";