Remove ButtonBar (#47212)

frontend/src/metabase/components/ButtonBar/ButtonBar.styled.tsx

-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")};
-`;

frontend/src/metabase/components/ButtonBar/ButtonBar.tsx

-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>
-  );
-}

frontend/src/metabase/components/ButtonBar/index.tsx

-// eslint-disable-next-line import/no-default-export -- deprecated usage
-export { default } from "./ButtonBar";

frontend/src/metabase/query_builder/components/view/ViewFooter/ViewFooter.tsx

 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>
   );
 };