From 976de66801d92183bd961bcf75621f3f352bd438 Mon Sep 17 00:00:00 2001
From: Oisin Coveney <oisin@metabase.com>
Date: Fri, 30 Aug 2024 13:12:09 +0300
Subject: [PATCH] Remove ButtonBar (#47212)
---
.../components/ButtonBar/ButtonBar.styled.tsx | 37 --------------
.../components/ButtonBar/ButtonBar.tsx | 49 -------------------
.../metabase/components/ButtonBar/index.tsx | 2 -
.../components/view/ViewFooter/ViewFooter.tsx | 29 ++++++-----
4 files changed, 14 insertions(+), 103 deletions(-)
delete mode 100644 frontend/src/metabase/components/ButtonBar/ButtonBar.styled.tsx
delete mode 100644 frontend/src/metabase/components/ButtonBar/ButtonBar.tsx
delete mode 100644 frontend/src/metabase/components/ButtonBar/index.tsx
diff --git a/frontend/src/metabase/components/ButtonBar/ButtonBar.styled.tsx b/frontend/src/metabase/components/ButtonBar/ButtonBar.styled.tsx
deleted file mode 100644
index 858377d6534..00000000000
--- a/frontend/src/metabase/components/ButtonBar/ButtonBar.styled.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import styled from "@emotion/styled";
-import type { ReactNode } from "react";
-
-export const ButtonBarRoot = styled.div`
- display: flex;
- align-items: center;
-`;
-
-export interface ButtonBarLeftProps {
- center?: ReactNode;
-}
-
-export const ButtonBarLeft = styled.div<ButtonBarLeftProps>`
- display: flex;
- flex: ${props => (props.center ? "1 0 0" : "")};
- justify-content: flex-start;
- align-items: center;
- margin-right: ${props => (props.center ? "" : "auto")};
-`;
-
-export const ButtonBarCenter = styled.div`
- display: flex;
- align-items: center;
-`;
-
-export interface ButtonBarRightProps {
- center?: ReactNode;
-}
-
-export const ButtonBarRight = styled.div<ButtonBarRightProps>`
- display: flex;
- flex: ${props => (props.center ? "1 0 0" : "")};
- gap: 1rem;
- justify-content: flex-end;
- align-items: center;
- margin-left: ${props => (props.center ? "" : "auto")};
-`;
diff --git a/frontend/src/metabase/components/ButtonBar/ButtonBar.tsx b/frontend/src/metabase/components/ButtonBar/ButtonBar.tsx
deleted file mode 100644
index d201254983e..00000000000
--- a/frontend/src/metabase/components/ButtonBar/ButtonBar.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import type { HTMLAttributes, ReactNode } from "react";
-import { Children } from "react";
-
-import {
- ButtonBarCenter,
- ButtonBarLeft,
- ButtonBarRight,
- ButtonBarRoot,
-} from "./ButtonBar.styled";
-
-function normalizeArray(array?: ReactNode) {
- if (Array.isArray(array)) {
- array = array.filter(a => a);
- if (Array.isArray(array) && array.length === 0) {
- array = null;
- } else {
- array = Children.toArray(array);
- }
- }
- return array;
-}
-
-interface ButtonBarProps extends HTMLAttributes<HTMLDivElement> {
- left?: ReactNode;
- right?: ReactNode;
- center?: ReactNode;
- children?: ReactNode;
-}
-
-// eslint-disable-next-line import/no-default-export -- deprecated usage
-export default function ButtonBar({
- children,
- left = children,
- center,
- right,
- ...props
-}: ButtonBarProps) {
- left = normalizeArray(left);
- center = normalizeArray(center);
- right = normalizeArray(right);
-
- return (
- <ButtonBarRoot {...props}>
- <ButtonBarLeft center={center}>{left}</ButtonBarLeft>
- {center && <ButtonBarCenter>{center}</ButtonBarCenter>}
- <ButtonBarRight center={center}>{right}</ButtonBarRight>
- </ButtonBarRoot>
- );
-}
diff --git a/frontend/src/metabase/components/ButtonBar/index.tsx b/frontend/src/metabase/components/ButtonBar/index.tsx
deleted file mode 100644
index ddc600eb154..00000000000
--- a/frontend/src/metabase/components/ButtonBar/index.tsx
+++ /dev/null
@@ -1,2 +0,0 @@
-// eslint-disable-next-line import/no-default-export -- deprecated usage
-export { default } from "./ButtonBar";
diff --git a/frontend/src/metabase/query_builder/components/view/ViewFooter/ViewFooter.tsx b/frontend/src/metabase/query_builder/components/view/ViewFooter/ViewFooter.tsx
index 81dd57f5787..67c06afe2df 100644
--- a/frontend/src/metabase/query_builder/components/view/ViewFooter/ViewFooter.tsx
+++ b/frontend/src/metabase/query_builder/components/view/ViewFooter/ViewFooter.tsx
@@ -1,9 +1,9 @@
import cx from "classnames";
-import ButtonBar from "metabase/components/ButtonBar";
import CS from "metabase/css/core/index.css";
import { useSelector } from "metabase/lib/redux";
import { getIsVisualized } from "metabase/query_builder/selectors";
+import { Group } from "metabase/ui";
import * as Lib from "metabase-lib";
import { ViewFooterRoot } from "../ViewFooter.styled";
@@ -56,13 +56,12 @@ export const ViewFooter = ({
return (
<ViewFooterRoot
- className={cx(className, CS.textMedium, CS.borderTop)}
+ className={cx(className, CS.textMedium, CS.borderTop, CS.fullWidth)}
data-testid="view-footer"
>
- <ButtonBar
- className={CS.flexFull}
- left={
- !hideChartSettings && (
+ <Group position="apart" pos="relative" noWrap w="100%">
+ <Group className={CS.flex1}>
+ {!hideChartSettings && (
<LeftViewFooterButtonGroup
isShowingChartTypeSidebar={isShowingChartTypeSidebar}
isShowingChartSettingsSidebar={isShowingChartSettingsSidebar}
@@ -71,18 +70,18 @@ export const ViewFooter = ({
onCloseChartSettings={onCloseChartSettings}
onOpenChartSettings={onOpenChartSettings}
/>
- )
- }
- center={
- isVisualized && (
+ )}
+ </Group>
+ {isVisualized && (
+ <Group>
<CenterViewFooterButtonGroup
setUIControls={setUIControls}
question={question}
isShowingRawTable={isShowingRawTable}
/>
- )
- }
- right={
+ </Group>
+ )}
+ <Group noWrap>
<RightViewFooterButtonGroup
question={question}
result={result}
@@ -93,8 +92,8 @@ export const ViewFooter = ({
onOpenTimelines={onOpenTimelines}
onCloseTimelines={onCloseTimelines}
/>
- }
- />
+ </Group>
+ </Group>
</ViewFooterRoot>
);
};
--
GitLab