diff --git a/frontend/src/metabase/visualizations/components/settings/ChartSettingFieldPicker.styled.tsx b/frontend/src/metabase/visualizations/components/settings/ChartSettingFieldPicker.styled.tsx index e7759da8989da4201cd269bf20c598e879ca81d4..44e4c27a4965c211f54be1ce29ab559fa166a78c 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 2e7cf8b30dfed1d1864fa93e9d8e3bd4db2107fc..3c914e41737252fb80af3e67a322434fa448db66 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();