add DimensionLabel ui component (#18796)

* add DimensionLabel ui component

add index.js

Update size

convert jsx to tsx

move logic from info file to unit test

go back to jsx

* replace IconWrapper with a styled(Icon)

frontend/src/metabase/components/DimensionLabel/DimensionLabel.info.js

+import React from "react";
+import styled from "styled-components";
+
+import { PRODUCTS, metadata } from "__support__/sample_dataset_fixture";
+import Dimension from "metabase-lib/lib/Dimension";
+
+import DimensionLabel from "./DimensionLabel";
+
+const fieldDimension = Dimension.parseMBQL(
+  ["field", PRODUCTS.CATEGORY.id, null],
+  metadata,
+);
+
+const BiggerDimensionLabel = styled(DimensionLabel)`
+  font-size: 32px;
+`;
+
+export const component = DimensionLabel;
+export const description = "A label for instances of Dimension";
+export const examples = {
+  DimensionLabel: <DimensionLabel dimension={fieldDimension} />,
+  "Bigger DimensionLabel": <BiggerDimensionLabel dimension={fieldDimension} />,
+};

frontend/src/metabase/components/DimensionLabel/DimensionLabel.jsx

+import React from "react";
+import PropTypes from "prop-types";
+
+import Dimension from "metabase-lib/lib/Dimension";
+
+import {
+  Container,
+  Label,
+  PaddedInvertedColorIcon,
+} from "./DimensionLabel.styled";
+
+DimensionLabel.propTypes = {
+  className: PropTypes.string,
+  dimension: PropTypes.instanceOf(Dimension).isRequired,
+};
+
+export default function DimensionLabel({ className, dimension }) {
+  return (
+    <Container className={className}>
+      <PaddedInvertedColorIcon name={dimension.icon()} />
+      <Label>{dimension.displayName()}</Label>
+    </Container>
+  );
+}

frontend/src/metabase/components/DimensionLabel/DimensionLabel.styled.jsx

+import styled from "styled-components";
+
+import { space } from "metabase/styled-components/theme";
+import { color } from "metabase/lib/colors";
+import Icon from "metabase/components/Icon";
+
+export const Container = styled.div`
+  display: inline-flex;
+  align-items: center;
+  column-gap: ${space(0)};
+  font-size: 12px;
+`;
+
+export const Label = styled.span`
+  font-weight: 900;
+  color: ${color("brand")};
+  font-size: 1em;
+`;
+
+export const PaddedInvertedColorIcon = styled(Icon)`
+  background-color: ${color("brand")};
+  color: ${color("white")};
+  border-radius: ${space(0)};
+  padding: ${space(0)};
+  height: 1em;
+  width: 1em;
+`;

frontend/src/metabase/components/DimensionLabel/DimensionLabel.unit.spec.js

+import React from "react";
+import { render, screen } from "@testing-library/react";
+
+import {
+  SAMPLE_DATASET,
+  PRODUCTS,
+  metadata,
+} from "__support__/sample_dataset_fixture";
+import DimensionLabel from "./DimensionLabel";
+import Dimension from "metabase-lib/lib/Dimension";
+import StructuredQuery from "metabase-lib/lib/queries/StructuredQuery";
+import NativeQuery from "metabase-lib/lib/queries/NativeQuery";
+
+function setup(dimension) {
+  return render(<DimensionLabel dimension={dimension} />);
+}
+
+describe("DimensionLabel", () => {
+  describe("given a FieldDimension", () => {
+    beforeEach(() => {
+      const fieldDimension = Dimension.parseMBQL(
+        ["field", PRODUCTS.CREATED_AT.id, null],
+        metadata,
+      );
+
+      setup(fieldDimension);
+    });
+
+    it("should show an icon corresponding to the given dimension's underlying field type", () => {
+      expect(screen.queryByLabelText("calendar icon")).toBeInTheDocument();
+    });
+
+    it("it should display the given dimension's display name", () => {
+      expect(
+        screen.getByText(PRODUCTS.CREATED_AT.display_name),
+      ).toBeInTheDocument();
+    });
+  });
+
+  describe("given a AggregationDimension", () => {
+    beforeEach(() => {
+      const aggQuery = new StructuredQuery(PRODUCTS.question(), {
+        type: "query",
+        database: SAMPLE_DATASET.id,
+        query: {
+          "source-table": PRODUCTS.id,
+          aggregation: ["sum", ["field", PRODUCTS.RATING.id, null]],
+        },
+      });
+      const aggregationDimension = Dimension.parseMBQL(
+        ["aggregation", 0],
+        metadata,
+        aggQuery,
+      );
+
+      setup(aggregationDimension);
+    });
+
+    it("should show an icon corresponding to the given dimension's underlying field type", () => {
+      expect(screen.queryByLabelText("int icon")).toBeInTheDocument();
+    });
+
+    it("it should display the given dimension's display name", () => {
+      expect(screen.getByText("Sum of Rating")).toBeInTheDocument();
+    });
+  });
+
+  describe("given a ExpressionDimension", () => {
+    beforeEach(() => {
+      const expressionDimension = Dimension.parseMBQL(
+        ["expression", "Hello World"],
+        metadata,
+      );
+
+      setup(expressionDimension);
+    });
+
+    it("should show an icon corresponding to the given dimension's underlying field type", () => {
+      expect(screen.queryByLabelText("string icon")).toBeInTheDocument();
+    });
+
+    it("it should display the given dimension's display name", () => {
+      expect(screen.getByText("Hello World")).toBeInTheDocument();
+    });
+  });
+
+  describe("given a TemplateTagDimension", () => {
+    beforeEach(() => {
+      const nativeQuery = new NativeQuery(PRODUCTS.question(), {
+        database: SAMPLE_DATASET.id,
+        type: "native",
+        native: {
+          query: "select * from PRODUCTS where CREATED_AT = {{date}}",
+          "template-tags": {
+            date: {
+              id: "abc",
+              name: "date",
+              "display-name": "Date variable",
+              type: "date",
+            },
+          },
+        },
+      });
+
+      const templateTagDimension = Dimension.parseMBQL(
+        ["template-tag", "date"],
+        metadata,
+        nativeQuery,
+      );
+
+      setup(templateTagDimension);
+    });
+
+    it("should show an icon corresponding to the given dimension's underlying field type", () => {
+      expect(screen.queryByLabelText("calendar icon")).toBeInTheDocument();
+    });
+
+    it("it should display the given dimension's display name", () => {
+      expect(screen.getByText("Date variable")).toBeInTheDocument();
+    });
+  });
+});

frontend/src/metabase/components/DimensionLabel/index.js

+export { default } from "./DimensionLabel";