From 6f0d3aac8deba46a075e0ea6dfd0201f57982066 Mon Sep 17 00:00:00 2001
From: Oisin Coveney <oisin@metabase.com>
Date: Tue, 12 Nov 2024 09:38:38 +0200
Subject: [PATCH] Remove some styled components in Summarize (#49836)
---
.../AggregationPicker.styled.tsx | 4 ---
.../AggregationPicker/AggregationPicker.tsx | 7 +++---
.../AddAggregationButton.tsx | 3 +--
.../AggregationItem/AggregationItem.tsx | 3 +--
.../SummarizeBreakoutColumnList.tsx | 6 ++---
.../SummarizeSidebar.styled.tsx | 25 -------------------
6 files changed, 9 insertions(+), 39 deletions(-)
diff --git a/frontend/src/metabase/common/components/AggregationPicker/AggregationPicker.styled.tsx b/frontend/src/metabase/common/components/AggregationPicker/AggregationPicker.styled.tsx
index 41c51c64e20..69a2a662d49 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 181a5a01c34..cb74144e61f 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 2ad475f707f..c54be716518 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 27f8be14023..894976c0733 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 e909a59f0c1..338a33a4de1 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 1d35313066d..950c4e213ad 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);
-`;
--
GitLab