diff --git a/frontend/src/metabase/common/components/AggregationPicker/AggregationPicker.styled.tsx b/frontend/src/metabase/common/components/AggregationPicker/AggregationPicker.styled.tsx index 41c51c64e2022ed9209dbf7c43072ffb2a61c857..69a2a662d4923002e1b1a314701a7bbb197e80ee 100644 --- a/frontend/src/metabase/common/components/AggregationPicker/AggregationPicker.styled.tsx +++ b/frontend/src/metabase/common/components/AggregationPicker/AggregationPicker.styled.tsx @@ -1,9 +1,5 @@ import styled from "@emotion/styled"; -export const ColumnPickerContainer = styled.div` - min-width: 300px; -`; - export const ColumnPickerHeaderContainer = styled.div` display: flex; align-items: center; diff --git a/frontend/src/metabase/common/components/AggregationPicker/AggregationPicker.tsx b/frontend/src/metabase/common/components/AggregationPicker/AggregationPicker.tsx index 181a5a01c347e0e438729027f923dcc248dfdb96..cb74144e61f1cb808316f793cbb70b6352e779b0 100644 --- a/frontend/src/metabase/common/components/AggregationPicker/AggregationPicker.tsx +++ b/frontend/src/metabase/common/components/AggregationPicker/AggregationPicker.tsx @@ -26,7 +26,6 @@ import * as Lib from "metabase-lib"; import { QueryColumnPicker } from "../QueryColumnPicker"; import { - ColumnPickerContainer, ColumnPickerHeaderContainer, ColumnPickerHeaderTitle, ColumnPickerHeaderTitleContainer, @@ -329,9 +328,11 @@ export function AggregationPicker({ const columns = Lib.aggregationOperatorColumns(operator); const columnGroups = Lib.groupColumns(columns); return ( - <ColumnPickerContainer + <Box className={className} + mih="18.75rem" data-testid="aggregation-column-picker" + c="summarize" > <ColumnPickerHeader onClick={handleResetOperator}> {operatorInfo.displayName} @@ -346,7 +347,7 @@ export function AggregationPicker({ onSelect={handleColumnSelect} onClose={onClose} /> - </ColumnPickerContainer> + </Box> ); } diff --git a/frontend/src/metabase/query_builder/components/view/sidebars/SummarizeSidebar/AddAggregationButton/AddAggregationButton.tsx b/frontend/src/metabase/query_builder/components/view/sidebars/SummarizeSidebar/AddAggregationButton/AddAggregationButton.tsx index 2ad475f707f47c2719d1041229c1316a1ce24220..c54be7165184798beaad54536c98dc063dd15c1f 100644 --- a/frontend/src/metabase/query_builder/components/view/sidebars/SummarizeSidebar/AddAggregationButton/AddAggregationButton.tsx +++ b/frontend/src/metabase/query_builder/components/view/sidebars/SummarizeSidebar/AddAggregationButton/AddAggregationButton.tsx @@ -2,11 +2,10 @@ import type { ReactNode } from "react"; import { useState } from "react"; import { t } from "ttag"; +import { AggregationPicker } from "metabase/common/components/AggregationPicker"; import { Popover, Tooltip } from "metabase/ui"; import * as Lib from "metabase-lib"; -import { AggregationPicker } from "../SummarizeSidebar.styled"; - import { AddAggregationButtonRoot } from "./AddAggregationButton.styled"; interface AddAggregationButtonProps { diff --git a/frontend/src/metabase/query_builder/components/view/sidebars/SummarizeSidebar/AggregationItem/AggregationItem.tsx b/frontend/src/metabase/query_builder/components/view/sidebars/SummarizeSidebar/AggregationItem/AggregationItem.tsx index 27f8be14023600ec3d95a82d84d1a9266ced1586..894976c07333f611b6d482d72531bc37c4d19a26 100644 --- a/frontend/src/metabase/query_builder/components/view/sidebars/SummarizeSidebar/AggregationItem/AggregationItem.tsx +++ b/frontend/src/metabase/query_builder/components/view/sidebars/SummarizeSidebar/AggregationItem/AggregationItem.tsx @@ -1,10 +1,9 @@ import { useCallback, useState } from "react"; +import { AggregationPicker } from "metabase/common/components/AggregationPicker"; import { Popover } from "metabase/ui"; import * as Lib from "metabase-lib"; -import { AggregationPicker } from "../SummarizeSidebar.styled"; - import { AggregationName, RemoveIcon, Root } from "./AggregationItem.styled"; interface AggregationItemProps { diff --git a/frontend/src/metabase/query_builder/components/view/sidebars/SummarizeSidebar/SummarizeContent/SummarizeBreakoutColumnList.tsx b/frontend/src/metabase/query_builder/components/view/sidebars/SummarizeSidebar/SummarizeContent/SummarizeBreakoutColumnList.tsx index e909a59f0c1d0780d75d0f415cdec4713cf72e55..338a33a4de11d04835f40756d27f29e4a979b410 100644 --- a/frontend/src/metabase/query_builder/components/view/sidebars/SummarizeSidebar/SummarizeContent/SummarizeBreakoutColumnList.tsx +++ b/frontend/src/metabase/query_builder/components/view/sidebars/SummarizeSidebar/SummarizeContent/SummarizeBreakoutColumnList.tsx @@ -1,10 +1,9 @@ import { t } from "ttag"; -import { Stack, type StackProps } from "metabase/ui"; +import { Space, Stack, type StackProps, Title } from "metabase/ui"; import type * as Lib from "metabase-lib"; import { BreakoutColumnList } from "../BreakoutColumnList"; -import { SectionTitle } from "../SummarizeSidebar.styled"; type SummarizeBreakoutColumnListProps = { query: Lib.Query; @@ -33,7 +32,8 @@ export const SummarizeBreakoutColumnList = ({ spacing="0" {...containerProps} > - <SectionTitle>{t`Group by`}</SectionTitle> + <Title order={5} fw={900}>{t`Group by`}</Title> + <Space my="sm" /> <BreakoutColumnList query={query} stageIndex={stageIndex} diff --git a/frontend/src/metabase/query_builder/components/view/sidebars/SummarizeSidebar/SummarizeSidebar.styled.tsx b/frontend/src/metabase/query_builder/components/view/sidebars/SummarizeSidebar/SummarizeSidebar.styled.tsx index 1d35313066dcfc86d2c3ecdb42fa28e0524fa605..950c4e213ad52dc6fe8c1223751b26ae8a92231e 100644 --- a/frontend/src/metabase/query_builder/components/view/sidebars/SummarizeSidebar/SummarizeSidebar.styled.tsx +++ b/frontend/src/metabase/query_builder/components/view/sidebars/SummarizeSidebar/SummarizeSidebar.styled.tsx @@ -1,6 +1,5 @@ import styled from "@emotion/styled"; -import { AggregationPicker as BaseAggregationPicker } from "metabase/common/components/AggregationPicker"; import SidebarContent from "metabase/query_builder/components/SidebarContent"; export const SidebarView = styled(SidebarContent)` @@ -10,27 +9,3 @@ export const SidebarView = styled(SidebarContent)` right: 0; bottom: 0; `; - -const Section = styled.section` - padding: 1.5rem; -`; - -export const SectionTitle = styled.h3` - font-weight: 900; - margin-bottom: 1rem; -`; - -export const AggregationsContainer = styled(Section)` - display: flex; - flex-wrap: wrap; - gap: 0.5rem; - padding-top: 0; -`; - -export const AggregationPicker = styled(BaseAggregationPicker)` - color: var(--mb-color-summarize); -`; - -export const ColumnListContainer = styled(Section)` - border-top: 1px solid var(--mb-color-border); -`;