From 1467257905e44da10da8c33887c104ba4f09b314 Mon Sep 17 00:00:00 2001
From: Cal Herries <39073188+calherries@users.noreply.github.com>
Date: Thu, 18 Aug 2022 17:50:34 +0200
Subject: [PATCH] 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>
---
.../form/widgets/FormInputWidget.jsx | 3 +++
.../core/components/Input/Input.styled.tsx | 18 +++++++++++++++++-
.../metabase/core/components/Input/Input.tsx | 6 ++++++
.../DatasetFieldMetadataSidebar.jsx | 12 ++++++++----
.../metabase/styled-components/theme/index.ts | 1 +
.../styled-components/theme/typography.ts | 1 +
6 files changed, 36 insertions(+), 5 deletions(-)
create mode 100644 frontend/src/metabase/styled-components/theme/typography.ts
diff --git a/frontend/src/metabase/components/form/widgets/FormInputWidget.jsx b/frontend/src/metabase/components/form/widgets/FormInputWidget.jsx
index 06fa25fdbbe..1d21d010f58 100644
--- a/frontend/src/metabase/components/form/widgets/FormInputWidget.jsx
+++ b/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}
/>
);
diff --git a/frontend/src/metabase/core/components/Input/Input.styled.tsx b/frontend/src/metabase/core/components/Input/Input.styled.tsx
index 29bb3bf3129..9494f747f48 100644
--- a/frontend/src/metabase/core/components/Input/Input.styled.tsx
+++ b/frontend/src/metabase/core/components/Input/Input.styled.tsx
@@ -1,7 +1,7 @@
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;
+`;
diff --git a/frontend/src/metabase/core/components/Input/Input.tsx b/frontend/src/metabase/core/components/Input/Input.tsx
index 989d614dde7..037fce33d75 100644
--- a/frontend/src/metabase/core/components/Input/Input.tsx
+++ b/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]}>
diff --git a/frontend/src/metabase/query_builder/components/DatasetEditor/DatasetFieldMetadataSidebar/DatasetFieldMetadataSidebar.jsx b/frontend/src/metabase/query_builder/components/DatasetEditor/DatasetFieldMetadataSidebar/DatasetFieldMetadataSidebar.jsx
index 07e56627b5e..cb4c6bb7159 100644
--- a/frontend/src/metabase/query_builder/components/DatasetEditor/DatasetFieldMetadataSidebar/DatasetFieldMetadataSidebar.jsx
+++ b/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);
diff --git a/frontend/src/metabase/styled-components/theme/index.ts b/frontend/src/metabase/styled-components/theme/index.ts
index 9d0b5ba7580..6b60ecbfab1 100644
--- a/frontend/src/metabase/styled-components/theme/index.ts
+++ b/frontend/src/metabase/styled-components/theme/index.ts
@@ -1,2 +1,3 @@
export * from "./media-queries";
export * from "./space";
+export * from "./typography";
diff --git a/frontend/src/metabase/styled-components/theme/typography.ts b/frontend/src/metabase/styled-components/theme/typography.ts
new file mode 100644
index 00000000000..609b289c31e
--- /dev/null
+++ b/frontend/src/metabase/styled-components/theme/typography.ts
@@ -0,0 +1 @@
+export const monospaceFontFamily = "Monaco, monospace";
--
GitLab