Migrate query-builder from grid-styled (#20220)

frontend/src/metabase/components/ButtonBar.jsx

@@ -32,7 +32,7 @@ export default function ButtonBar({
     <ButtonBarRoot {...props}>
       <ButtonBarLeft center={center}>{left}</ButtonBarLeft>
       {center && <ButtonBarCenter>{center}</ButtonBarCenter>}
-      <ButtonBarRight>{right}</ButtonBarRight>
+      <ButtonBarRight center={center}>{right}</ButtonBarRight>
     </ButtonBarRoot>
   );
 }

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

+import { ReactNode } from "react";
 import styled from "styled-components";
 
 export const ButtonBarRoot = styled.div`
@@ -6,7 +7,7 @@ export const ButtonBarRoot = styled.div`
 `;
 
 export interface ButtonBarLeftProps {
-  center?: boolean;
+  center?: ReactNode;
 }
 
 export const ButtonBarLeft = styled.div<ButtonBarLeftProps>`
@@ -23,7 +24,7 @@ export const ButtonBarCenter = styled.div`
 `;
 
 export interface ButtonBarRightProps {
-  center?: boolean;
+  center?: ReactNode;
 }
 
 export const ButtonBarRight = styled.div<ButtonBarRightProps>`

frontend/src/metabase/query_builder/components/QueryDownloadWidget.jsx

 /* eslint-disable react/prop-types */
 import React from "react";
 import PropTypes from "prop-types";
-import { Box } from "grid-styled";
 
 import { t } from "ttag";
 import { parse as urlParse } from "url";
@@ -16,6 +15,12 @@ import * as Urls from "metabase/lib/urls";
 
 import _ from "underscore";
 import cx from "classnames";
+import {
+  WidgetFormat,
+  WidgetHeader,
+  WidgetMessage,
+  WidgetRoot,
+} from "./QueryDownloadWidget.styled";
 
 const EXPORT_FORMATS = Urls.exportFormats;
 
@@ -40,22 +45,19 @@ const QueryDownloadWidget = ({
     triggerClasses={cx(className, "text-brand-hover")}
     triggerClassesClose={classNameClose}
   >
-    <Box
-      p={2}
-      width={result.data && result.data.rows_truncated != null ? 300 : 260}
-    >
-      <Box p={1}>
+    <WidgetRoot isExpanded={result.data && result.data.rows_truncated != null}>
+      <WidgetHeader>
         <h4>{t`Download full results`}</h4>
-      </Box>
+      </WidgetHeader>
       {result.data != null && result.data.rows_truncated != null && (
-        <Box px={1}>
+        <WidgetMessage>
           <p>{t`Your answer has a large number of rows so it could take a while to download.`}</p>
           <p>{t`The maximum download size is 1 million rows.`}</p>
-        </Box>
+        </WidgetMessage>
       )}
-      <Box>
+      <div>
         {EXPORT_FORMATS.map(type => (
-          <Box key={type} width={"100%"}>
+          <WidgetFormat key={type}>
             {dashcardId && token ? (
               <DashboardEmbedQueryButton
                 key={type}
@@ -89,10 +91,10 @@ const QueryDownloadWidget = ({
                 visualizationSettings={visualizationSettings}
               />
             ) : null}
-          </Box>
+          </WidgetFormat>
         ))}
-      </Box>
-    </Box>
+      </div>
+    </WidgetRoot>
   </PopoverWithTrigger>
 );
 

frontend/src/metabase/query_builder/components/QueryDownloadWidget.styled.tsx

+import styled from "styled-components";
+
+export interface WidgetRootProps {
+  isExpanded?: boolean;
+}
+
+export const WidgetRoot = styled.div<WidgetRootProps>`
+  padding: 1rem;
+  width: ${props => (props.isExpanded ? "300px" : "260px")};
+`;
+
+export const WidgetHeader = styled.div`
+  padding: 0.5rem;
+`;
+
+export const WidgetMessage = styled.div`
+  padding: 0 0.5rem;
+`;
+
+export const WidgetFormat = styled.div`
+  width: 100%;
+`;

frontend/src/metabase/query_builder/components/notebook/Notebook.jsx

@@ -2,12 +2,11 @@
 import React from "react";
 
 import { t } from "ttag";
-import cx from "classnames";
-import { Box } from "grid-styled";
 
 import Button from "metabase/core/components/Button";
 
 import NotebookSteps from "./NotebookSteps";
+import { NotebookRoot } from "./Notebook.styled";
 
 export default function Notebook({ className, ...props }) {
   const {
@@ -45,13 +44,13 @@ export default function Notebook({ className, ...props }) {
   }
 
   return (
-    <Box className={cx(className, "relative mb4")} px={[2, 3]}>
+    <NotebookRoot className={className}>
       <NotebookSteps {...props} />
       {hasVisualizeButton && isRunnable && (
         <Button medium primary style={{ minWidth: 220 }} onClick={visualize}>
           {t`Visualize`}
         </Button>
       )}
-    </Box>
+    </NotebookRoot>
   );
 }

frontend/src/metabase/query_builder/components/notebook/Notebook.styled.tsx

+import styled from "styled-components";
+import { breakpointMinSmall } from "metabase/styled-components/theme";
+
+export const NotebookRoot = styled.div`
+  position: relative;
+  padding: 0 1rem;
+  margin-bottom: 2rem;
+
+  ${breakpointMinSmall} {
+    padding: 0 2rem;
+  }
+`;

frontend/src/metabase/query_builder/components/notebook/NotebookCell.jsx

 /* eslint-disable react/prop-types */
 import React from "react";
 
-import { Flex } from "grid-styled";
 import styled, { css } from "styled-components";
 
 import Icon from "metabase/components/Icon";
 
 import { alpha } from "metabase/lib/colors";
 
-export const NotebookCell = styled(Flex).attrs({
-  align: "center",
-  flexWrap: "wrap",
-})`
+export const NotebookCell = styled.div`
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
   border-radius: 8px;
   background-color: ${props => alpha(props.color, 0.1)};
   padding: ${props => props.padding || "14px"};
+  color: ${props => props.color};
 `;
 
 NotebookCell.displayName = "NotebookCell";
 
-const NotebookCellItemContainer = styled(Flex).attrs({ align: "center" })`
+const NotebookCellItemContainer = styled.div`
+  display: flex;
+  align-items: center;
   font-weight: bold;
   color: ${props => (props.inactive ? props.color : "white")};
   border-radius: 6px;

frontend/src/metabase/query_builder/components/notebook/NotebookStep.jsx

@@ -14,8 +14,6 @@ import Button from "metabase/core/components/Button";
 import ExpandingContent from "metabase/components/ExpandingContent";
 import { forwardRefToInnerRef } from "metabase/styled-components/utils";
 
-import { Box, Flex } from "grid-styled";
-
 import NotebookStepPreview from "./NotebookStepPreview";
 
 import DataStep from "./steps/DataStep";
@@ -27,6 +25,14 @@ import BreakoutStep from "./steps/BreakoutStep";
 import SummarizeStep from "./steps/SummarizeStep";
 import SortStep from "./steps/SortStep";
 import LimitStep from "./steps/LimitStep";
+import {
+  StepActionsContainer,
+  StepBody,
+  StepContent,
+  StepHeader,
+  StepButtonContainer,
+  StepRoot,
+} from "./NotebookStep.styled";
 
 // TODO
 const STEP_UI = {
@@ -97,8 +103,6 @@ function getTestId(step) {
   return `step-${type}-${stageIndex || 0}-${itemIndex || 0}`;
 }
 
-const CONTENT_WIDTH = [11 / 12, 8 / 12];
-
 export default class NotebookStep extends React.Component {
   state = {
     showPreview: false,
@@ -152,18 +156,11 @@ export default class NotebookStep extends React.Component {
 
     return (
       <ExpandingContent isInitiallyOpen={!isLastOpened} isOpen>
-        <Box
-          mb={[1, 2]}
-          pb={[1, 2]}
+        <StepRoot
           className="hover-parent hover--visibility"
           data-testid={getTestId(step)}
         >
-          <Flex
-            mb={1}
-            width={CONTENT_WIDTH}
-            className="text-bold"
-            style={{ color }}
-          >
+          <StepHeader color={color}>
             {title}
             <Icon
               name="close"
@@ -172,11 +169,11 @@ export default class NotebookStep extends React.Component {
               onClick={() => step.revert(step.query).update(updateQuery)}
               data-testid="remove-step"
             />
-          </Flex>
+          </StepHeader>
 
           {NotebookStepComponent && (
-            <Flex align="center">
-              <Box width={CONTENT_WIDTH}>
+            <StepBody>
+              <StepContent>
                 <NotebookStepComponent
                   color={color}
                   step={step}
@@ -184,8 +181,8 @@ export default class NotebookStep extends React.Component {
                   updateQuery={updateQuery}
                   isLastOpened={isLastOpened}
                 />
-              </Box>
-              <Box width={[1 / 12]}>
+              </StepContent>
+              <StepButtonContainer>
                 <ActionButton
                   ml={[1, 2]}
                   className={
@@ -196,8 +193,8 @@ export default class NotebookStep extends React.Component {
                   color={c("text-light")}
                   onClick={() => this.setState({ showPreview: true })}
                 />
-              </Box>
-            </Flex>
+              </StepButtonContainer>
+            </StepBody>
           )}
 
           {showPreview && canPreview && (
@@ -208,11 +205,11 @@ export default class NotebookStep extends React.Component {
           )}
 
           {actionButtons.length > 0 && (
-            <Box mt={1} data-testid="action-buttons">
+            <StepActionsContainer data-testid="action-buttons">
               {actionButtons}
-            </Box>
+            </StepActionsContainer>
           )}
-        </Box>
+        </StepRoot>
       </ExpandingContent>
     );
   }

frontend/src/metabase/query_builder/components/notebook/NotebookStep.styled.tsx

+import styled from "styled-components";
+import { breakpointMinSmall } from "metabase/styled-components/theme";
+
+const getPercentage = (number: number): string => {
+  return `${number * 100}%`;
+};
+
+export const StepRoot = styled.div`
+  margin-bottom: 0.5rem;
+  padding-bottom: 0.5rem;
+
+  ${breakpointMinSmall} {
+    margin-bottom: 1rem;
+    padding-bottom: 1rem;
+  }
+`;
+
+export interface StepHeaderProps {
+  color?: string;
+}
+
+export const StepContent = styled.div`
+  width: ${getPercentage(11 / 12)};
+
+  ${breakpointMinSmall} {
+    width: ${getPercentage(8 / 12)};
+  }
+`;
+
+export const StepHeader = styled(StepContent)<StepHeaderProps>`
+  display: flex;
+  color: ${props => props.color};
+  font-weight: bold;
+  margin-bottom: 0.5rem;
+`;
+
+export const StepBody = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+export const StepButtonContainer = styled.div`
+  width: ${getPercentage(1 / 12)};
+`;
+
+export const StepActionsContainer = styled.div`
+  margin-top: 0.5rem;
+`;

frontend/src/metabase/query_builder/components/notebook/NotebookStepPreview.jsx

@@ -8,13 +8,18 @@ import { isReducedMotionPreferred } from "metabase/lib/dom";
 
 import Icon from "metabase/components/Icon";
 import Button from "metabase/core/components/Button";
-import { Box, Flex } from "grid-styled";
 import { Motion, spring } from "react-motion";
 
 import QuestionResultLoader from "metabase/containers/QuestionResultLoader";
 import Visualization from "metabase/visualizations/components/Visualization";
 
 import Question from "metabase-lib/lib/Question";
+import {
+  PreviewButtonContainer,
+  PreviewHeader,
+  PreviewIconContainer,
+  PreviewRoot,
+} from "./NotebookStepPreview.styled";
 
 class NotebookStepPreview extends React.Component {
   constructor(props) {
@@ -55,25 +60,21 @@ class NotebookStepPreview extends React.Component {
       : { stiffness: 170 };
 
     return (
-      <Box pt={2}>
-        <Flex align="center" justify="space-between" mb={1}>
+      <PreviewRoot>
+        <PreviewHeader>
           <span className="text-bold">{`Preview`}</span>
-          <Flex align="right">
+          <PreviewIconContainer>
             <Icon
               name="close"
               onClick={onClose}
               className="text-light text-medium-hover cursor-pointer ml1"
             />
-          </Flex>
-        </Flex>
+          </PreviewIconContainer>
+        </PreviewHeader>
         {isDirty ? (
-          <Flex
-            align="center"
-            justify="center"
-            className="bordered shadowed rounded bg-white p4"
-          >
+          <PreviewButtonContainer className="bordered shadowed rounded bg-white p4">
             <Button onClick={this.refresh}>Refresh</Button>
-          </Flex>
+          </PreviewButtonContainer>
         ) : (
           <QuestionResultLoader question={question}>
             {({ rawSeries, result }) => (
@@ -103,7 +104,7 @@ class NotebookStepPreview extends React.Component {
             )}
           </QuestionResultLoader>
         )}
-      </Box>
+      </PreviewRoot>
     );
   }
 }

frontend/src/metabase/query_builder/components/notebook/NotebookStepPreview.styled.tsx

+import styled from "styled-components";
+
+export const PreviewRoot = styled.div`
+  padding-top: 1rem;
+`;
+
+export const PreviewHeader = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.5rem;
+`;
+
+export const PreviewIconContainer = styled.div`
+  display: flex;
+  align-items: flex-end;
+`;
+
+export const PreviewButtonContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;

frontend/src/metabase/query_builder/components/notebook/steps/JoinStep.jsx

@@ -10,11 +10,7 @@ import FieldList from "metabase/query_builder/components/FieldList";
 import Join from "metabase-lib/lib/queries/structured/Join";
 import { isDateTimeField } from "metabase/lib/query/field_ref";
 
-import {
-  NotebookCell,
-  NotebookCellItem,
-  NotebookCellAdd,
-} from "../NotebookCell";
+import { NotebookCellItem, NotebookCellAdd } from "../NotebookCell";
 import {
   FieldsPickerIcon,
   FieldPickerContentContainer,
@@ -39,6 +35,8 @@ import {
   RemoveDimensionIcon,
   RemoveJoinIcon,
   Row,
+  PrimaryJoinCell,
+  SecondaryJoinCell,
 } from "./JoinStep.styled";
 
 const stepShape = {
@@ -211,7 +209,7 @@ function JoinClause({ color, join, updateQuery, showRemove }) {
 
   return (
     <JoinClauseRoot>
-      <NotebookCell color={color} flex={1} alignSelf="start">
+      <PrimaryJoinCell color={color}>
         <NotebookCellItem color={color}>
           {lhsTable?.displayName() || t`Previous results`}
         </NotebookCellItem>
@@ -226,18 +224,15 @@ function JoinClause({ color, join, updateQuery, showRemove }) {
           updateQuery={updateQuery}
           onSourceTableSet={onSourceTableSet}
         />
-      </NotebookCell>
+      </PrimaryJoinCell>
 
       {joinedTable && (
         <React.Fragment>
           <JoinWhereConditionLabelContainer>
             <JoinWhereConditionLabel />
           </JoinWhereConditionLabelContainer>
-          <NotebookCell
+          <SecondaryJoinCell
             color={color}
-            flex={1}
-            flexDirection="column"
-            align="start"
             padding={hasAtLeastOneDimensionSelected && "8px"}
           >
             {displayConditions.map((condition, index) => {
@@ -320,7 +315,7 @@ function JoinClause({ color, join, updateQuery, showRemove }) {
                 </JoinDimensionControlsContainer>
               );
             })}
-          </NotebookCell>
+          </SecondaryJoinCell>
         </React.Fragment>
       )}
 

frontend/src/metabase/query_builder/components/notebook/steps/JoinStep.styled.jsx

@@ -4,6 +4,7 @@ import { color } from "metabase/lib/colors";
 import { space, breakpointMaxMedium } from "metabase/styled-components/theme";
 import Icon from "metabase/components/Icon";
 import { forwardRefToInnerRef } from "metabase/styled-components/utils";
+import { NotebookCell } from "../NotebookCell";
 
 export const Row = styled.div`
   display: flex;
@@ -128,3 +129,14 @@ export const RemoveJoinIcon = styled(Icon).attrs({ name: "close", size: 18 })`
     color: ${color("text-medium")};
   }
 `;
+
+export const PrimaryJoinCell = styled(NotebookCell)`
+  flex: 1;
+  align-self: start;
+`;
+
+export const SecondaryJoinCell = styled(NotebookCell)`
+  flex: 1;
+  flex-direction: column;
+  align-items: start;
+`;

frontend/src/metabase/query_builder/components/notebook/steps/SummarizeStep.jsx

@@ -2,10 +2,10 @@
 import React from "react";
 
 import { t } from "ttag";
-import { Flex, Box } from "grid-styled";
 
 import AggregateStep from "./AggregateStep";
 import BreakoutStep from "./BreakoutStep";
+import { StepContainer, StepLabel, StepRoot } from "./SummarizeStep.styled";
 
 export default function SummarizeStep({
   color,
@@ -14,21 +14,19 @@ export default function SummarizeStep({
   ...props
 }) {
   return (
-    <Flex align="center" flexDirection={["column", "row"]}>
-      <Box width={[1, 1 / 2]}>
+    <StepRoot>
+      <StepContainer>
         <AggregateStep
           color={color}
           query={query}
           isLastOpened={isLastOpened}
           {...props}
         />
-      </Box>
-      <Box mx={[0, 2]} my={[1, 0]} style={{ color }} className="text-bold">
-        {t`by`}
-      </Box>
-      <Box width={[1, 1 / 2]}>
+      </StepContainer>
+      <StepLabel color={color}>{t`by`}</StepLabel>
+      <StepContainer>
         <BreakoutStep color={color} query={query} {...props} />
-      </Box>
-    </Flex>
+      </StepContainer>
+    </StepRoot>
   );
 }

frontend/src/metabase/query_builder/components/notebook/steps/SummarizeStep.styled.tsx

+import styled from "styled-components";
+import { breakpointMinSmall } from "metabase/styled-components/theme";
+
+export const StepRoot = styled.div`
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+
+  ${breakpointMinSmall} {
+    flex-direction: row;
+  }
+`;
+
+export interface StepLabelProps {
+  color?: string;
+}
+
+export const StepLabel = styled.div<StepLabelProps>`
+  color: ${props => props.color};
+  margin: 0.5rem 0;
+  font-weight: bold;
+
+  ${breakpointMinSmall} {
+    margin: 0 1rem;
+  }
+`;
+
+export const StepContainer = styled.div`
+  width: 100%;
+
+  ${breakpointMinSmall} {
+    width: 50%;
+  }
+`;

frontend/src/metabase/query_builder/components/saved-question-picker/SavedQuestionList.jsx

@@ -2,7 +2,6 @@ import React from "react";
 import { t } from "ttag";
 import PropTypes from "prop-types";
 import _ from "underscore";
-import { Box } from "grid-styled";
 
 import { PLUGIN_MODERATION } from "metabase/plugins";
 import Schemas from "metabase/entities/schemas";
@@ -12,6 +11,7 @@ import EmptyState from "metabase/components/EmptyState";
 import {
   SavedQuestionListRoot,
   SavedQuestionListItem,
+  SavedQuestionListEmptyState,
 } from "./SavedQuestionList.styled";
 import { PERSONAL_COLLECTIONS } from "metabase/entities/collections";
 
@@ -38,9 +38,9 @@ function SavedQuestionList({
   collection,
 }) {
   const emptyState = (
-    <Box my="120px">
+    <SavedQuestionListEmptyState>
       <EmptyState message={t`Nothing here`} icon="all" />
-    </Box>
+    </SavedQuestionListEmptyState>
   );
 
   const isVirtualCollection = collection.id === PERSONAL_COLLECTIONS.id;

frontend/src/metabase/query_builder/components/saved-question-picker/SavedQuestionList.styled.jsx

@@ -17,3 +17,7 @@ export const SavedQuestionListItem = styled(SelectList.Item)`
     justify-self: start;
   }
 `;
+
+export const SavedQuestionListEmptyState = styled.div`
+  margin: 7.5rem 0;
+`;

frontend/src/metabase/query_builder/components/saved-question-picker/SavedQuestionPicker.jsx

 import React, { useMemo, useState, useCallback } from "react";
-import { Box } from "grid-styled";
 import _ from "underscore";
 import PropTypes from "prop-types";
 import { t } from "ttag";
@@ -22,6 +21,7 @@ import {
   SavedQuestionPickerRoot,
   CollectionsContainer,
   BackButton,
+  TreeContainer,
 } from "./SavedQuestionPicker.styled";
 import { buildCollectionTree, findCollectionByName } from "./utils";
 
@@ -116,13 +116,13 @@ function SavedQuestionPicker({
           <Icon name="chevronleft" className="mr1" />
           {isDatasets ? t`Models` : t`Saved Questions`}
         </BackButton>
-        <Box my={1}>
+        <TreeContainer>
           <Tree
             data={collectionTree}
             onSelect={handleSelect}
             selectedId={selectedCollection.id}
           />
-        </Box>
+        </TreeContainer>
       </CollectionsContainer>
       <SavedQuestionList
         isDatasets={isDatasets}

frontend/src/metabase/query_builder/components/saved-question-picker/SavedQuestionPicker.styled.jsx

@@ -41,3 +41,7 @@ export const BackButton = styled.a`
     color: ${color("brand")};
   }
 `;
+
+export const TreeContainer = styled.div`
+  margin: 0.5rem 0;
+`;

frontend/src/metabase/query_builder/components/view/QuestionLastUpdated.jsx

@@ -4,15 +4,15 @@ import React from "react";
 import moment from "moment";
 import { t } from "ttag";
 
-import { Flex } from "grid-styled";
 import Icon from "metabase/components/Icon";
+import { SectionRoot } from "./QuestionLastUpdated.styled";
 
 export default function QuestionLastUpdated({ result, ...props }) {
   return result ? (
-    <Flex align="center" {...props}>
+    <SectionRoot {...props}>
       <Icon name="clock" mr={1} />
       {t`Updated ${moment(result.updated_at).fromNow()}`}
-    </Flex>
+    </SectionRoot>
   ) : null;
 }