From 75243d7ae625d56021dba595195da17f3f3ae44e Mon Sep 17 00:00:00 2001
From: Nick Fitzpatrick <nick@metabase.com>
Date: Tue, 24 Oct 2023 15:48:42 -0300
Subject: [PATCH] Ensure that field picker icon does not get smushed (#34808)
* Ensure that field picker icon does not get smushed
* removing unhelpful test
* register visualizations in test
---
.../ChartSettingFieldPicker.styled.tsx | 3 +-
.../visualizations/BarChart.unit.spec.tsx | 80 ++++++++++---------
2 files changed, 44 insertions(+), 39 deletions(-)
diff --git a/frontend/src/metabase/visualizations/components/settings/ChartSettingFieldPicker.styled.tsx b/frontend/src/metabase/visualizations/components/settings/ChartSettingFieldPicker.styled.tsx
index e7759da8989..44e4c27a496 100644
--- a/frontend/src/metabase/visualizations/components/settings/ChartSettingFieldPicker.styled.tsx
+++ b/frontend/src/metabase/visualizations/components/settings/ChartSettingFieldPicker.styled.tsx
@@ -33,15 +33,14 @@ export const ChartSettingFieldPickerRoot = styled.div<ChartSettingFieldPickerRoo
margin-left: 0;
color: ${color("text-dark")};
height: 0.625rem;
-
${props => props.disabled && "display: none;"}
+ flex-shrink: 0;
}
${SelectButton.Content} {
font-size: 0.875rem;
line-height: 1rem;
margin-right: 0.25rem;
- text-overflow: ellipsis;
max-width: 100%;
overflow-wrap: anywhere;
text-align: left;
diff --git a/frontend/src/metabase/visualizations/visualizations/BarChart.unit.spec.tsx b/frontend/src/metabase/visualizations/visualizations/BarChart.unit.spec.tsx
index 2e7cf8b30df..3c914e41737 100644
--- a/frontend/src/metabase/visualizations/visualizations/BarChart.unit.spec.tsx
+++ b/frontend/src/metabase/visualizations/visualizations/BarChart.unit.spec.tsx
@@ -5,9 +5,10 @@ import {
ORDERS_ID,
SAMPLE_DB_ID,
} from "metabase-types/api/mocks/presets";
-import registerVisualizations from "metabase/visualizations/register";
import ChartSettings from "metabase/visualizations/components/ChartSettings";
-import { createMockColumn } from "metabase-types/api/mocks";
+import registerVisualizations from "metabase/visualizations/register";
+import { createMockColumn, createMockDataset } from "metabase-types/api/mocks";
+import type { Series } from "metabase-types/api";
import Question from "metabase-lib/Question";
registerVisualizations();
@@ -16,41 +17,12 @@ const metadata = createMockMetadata({
databases: [createSampleDatabase()],
});
-const setup = () => {
- const question = new Question(
- {
- dataset_query: {
- type: "query",
- query: {
- "source-table": ORDERS_ID,
- aggregrations: [["count"]],
- },
- database: SAMPLE_DB_ID,
- },
- display: "bar",
- visualization_settings: {},
- },
- metadata,
- );
-
- const series = [
- {
- card: question.card(),
- data: {
- rows: [[1000]],
- cols: [
- createMockColumn({
- source: "aggregation",
- field_ref: ["aggregation", 0],
- name: "count",
- display_name: "Count",
- base_type: "type/BigInteger",
- }),
- ],
- },
- },
- ];
+interface SetupProps {
+ question: Question;
+ series: Series;
+}
+const setup = ({ series, question }: SetupProps) => {
renderWithProviders(
<ChartSettings
series={series}
@@ -63,7 +35,41 @@ const setup = () => {
describe("barchart", () => {
it("should not error when rendering for a question with new breakouts", () => {
- setup();
+ const question = new Question(
+ {
+ dataset_query: {
+ type: "query",
+ query: {
+ "source-table": ORDERS_ID,
+ aggregrations: [["count"]],
+ },
+ database: SAMPLE_DB_ID,
+ },
+ display: "bar",
+ visualization_settings: {},
+ },
+ metadata,
+ );
+
+ const series = [
+ {
+ card: question.card(),
+ ...createMockDataset({
+ data: {
+ cols: [
+ createMockColumn({
+ source: "aggregation",
+ field_ref: ["aggregation", 0, null],
+ name: "count",
+ display_name: "Count",
+ base_type: "type/BigInteger",
+ }),
+ ],
+ },
+ }),
+ },
+ ];
+ setup({ question, series });
expect(screen.getByText("X-axis")).toBeInTheDocument();
expect(screen.getByText("No valid fields")).toBeInTheDocument();
--
GitLab