mobile view for questions (#23827)

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

@@ -2,6 +2,7 @@ import styled from "@emotion/styled";
 import { css } from "@emotion/react";
 import { color } from "metabase/lib/colors";
 import Button from "metabase/core/components/Button";
+import EntityMenu from "metabase/components/EntityMenu";
 import DatasetMetadataStrengthIndicator from "./view/sidebars/DatasetManagementSection/DatasetMetadataStrengthIndicator";
 
 import {
@@ -9,15 +10,11 @@ import {
   shrinkOrExpandDuration,
 } from "metabase/styled-components/theme/button";
 
-export const QuestionActionsContainer = styled.div`
-  border-left: 1px solid ${color("border")};
+export const QuestionActionsDivider = styled.div`
+  border-left: 1px solid ${color("border-dark")};
   margin-left: 1rem;
   padding-left: 0.5rem;
-  display: flex;
-
-  ${Button.Root} {
-    margin-left: 0.5rem;
-  }
+  height: 1.25rem;
 `;
 
 export const StrengthIndicator = styled(DatasetMetadataStrengthIndicator)`
@@ -25,6 +22,10 @@ export const StrengthIndicator = styled(DatasetMetadataStrengthIndicator)`
   margin-left: 3.5rem;
 `;
 
+export const QuestionEntityMenu = styled(EntityMenu)`
+  margin-left: 0.5rem;
+`;
+
 export type AnimationStates = "expand" | "shrink" | null;
 
 interface BookmarkButtonProps {

frontend/src/metabase/query_builder/components/QuestionActions.tsx

@@ -4,7 +4,6 @@ import { connect } from "react-redux";
 
 import Button from "metabase/core/components/Button";
 import Tooltip from "metabase/components/Tooltip";
-import EntityMenu from "metabase/components/EntityMenu";
 
 import { PLUGIN_MODERATION, PLUGIN_MODEL_PERSISTENCE } from "metabase/plugins";
 
@@ -23,10 +22,11 @@ import {
 import Question from "metabase-lib/lib/Question";
 
 import {
-  QuestionActionsContainer,
+  QuestionActionsDivider,
   BookmarkButton,
   AnimationStates,
   StrengthIndicator,
+  QuestionEntityMenu,
 } from "./QuestionActions.styled";
 
 const HEADER_ICON_SIZE = 16;
@@ -200,7 +200,8 @@ const QuestionActions = ({
   }
 
   return (
-    <QuestionActionsContainer data-testid="question-action-buttons-container">
+    <>
+      <QuestionActionsDivider />
       <Tooltip tooltip={bookmarkTooltip}>
         <BookmarkButton
           animation={animation}
@@ -219,14 +220,15 @@ const QuestionActions = ({
           iconSize={HEADER_ICON_SIZE}
           onClick={onInfoClick}
           color={infoButtonColor}
+          data-testId="qb-header-info-button"
         />
       </Tooltip>
-      <EntityMenu
+      <QuestionEntityMenu
         items={extraButtons}
         triggerIcon="ellipsis"
         tooltip={t`Move, archive, and more...`}
       />
-    </QuestionActionsContainer>
+    </>
   );
 };
 

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

@@ -46,6 +46,7 @@ import {
   StyledQuestionDataSource,
   SavedQuestionLeftSideRoot,
   HeaderDivider,
+  ViewHeaderActionPanel,
 } from "./ViewHeader.styled";
 
 const viewTitleHeaderPropTypes = {
@@ -418,10 +419,7 @@ function ViewTitleHeaderRightSide(props) {
   }, [isShowingQuestionInfoSidebar, onOpenQuestionInfo, onCloseQuestionInfo]);
 
   return (
-    <div
-      className="ml-auto flex align-center"
-      data-testid="qb-header-action-panel"
-    >
+    <ViewHeaderActionPanel data-testid="qb-header-action-panel">
       {QuestionFilters.shouldRender(props) && (
         <FilterHeaderToggle
           className="ml2 mr1"
@@ -462,7 +460,6 @@ function ViewTitleHeaderRightSide(props) {
       )}
       {QuestionNotebookButton.shouldRender(props) && (
         <QuestionNotebookButton
-          className="hide sm-show"
           ml={2}
           question={question}
           isShowingNotebook={isShowingNotebook}
@@ -484,8 +481,8 @@ function ViewTitleHeaderRightSide(props) {
       {hasExploreResultsLink && <ExploreResultsLink question={question} />}
       {hasRunButton && (
         <RunButtonWithTooltip
-          className={cx("text-brand-hover text-dark hide", {
-            "sm-show": !isShowingNotebook || isNative,
+          className={cx("text-brand-hover text-dark", {
+            hide: isShowingNotebook,
             "text-white-hover": isResultDirty,
           })}
           medium
@@ -531,7 +528,7 @@ function ViewTitleHeaderRightSide(props) {
           {t`Save`}
         </SaveButton>
       )}
-    </div>
+    </ViewHeaderActionPanel>
   );
 }
 

frontend/src/metabase/query_builder/components/view/ViewHeader.styled.jsx

@@ -13,6 +13,12 @@ export const ViewHeaderContainer = styled(ViewSection)`
   border-bottom: 1px solid ${color("border")};
   padding-top: ${space(1)};
   padding-bottom: ${space(1)};
+
+  ${breakpointMaxSmall} {
+    flex-direction: column;
+    align-items: start;
+    padding: ${space(1)} 0;
+  }
 `;
 
 export const ViewHeaderMainLeftContentContainer = styled.div`
@@ -25,6 +31,11 @@ export const ViewHeaderLeftSubHeading = styled(ViewSubHeading)`
   display: flex;
   align-items: center;
   flex-wrap: wrap;
+
+  ${breakpointMaxSmall} {
+    flex-direction: column;
+    align-items: start;
+  }
 `;
 
 export const AdHocViewHeading = styled(ViewHeading)`
@@ -126,7 +137,7 @@ export const SavedQuestionLeftSideRoot = styled.div`
   ${SavedQuestionHeaderButtonContainer} {
     transition: all 400ms ease;
     position: relative;
-    top: ${props => (props.showSubHeader ? "0" : "10px")};
+    top: ${props => (props.showSubHeader ? "0" : "0.5rem")};
   }
 
   ${ViewHeaderLeftSubHeading} {
@@ -144,6 +155,18 @@ export const SavedQuestionLeftSideRoot = styled.div`
       opacity: 1;
     }
   }
+
+  ${breakpointMaxSmall} {
+    padding: 0 1.25rem;
+
+    ${SavedQuestionHeaderButtonContainer} {
+      top: 0px;
+    }
+
+    ${ViewHeaderLeftSubHeading} {
+      opacity: 1;
+    }
+  }
 `;
 
 export const HeaderDivider = styled.span`
@@ -154,3 +177,22 @@ export const HeaderDivider = styled.span`
   padding-left: 0.5rem;
   padding-right: 0.25rem;
 `;
+
+export const ViewHeaderActionPanel = styled.div`
+  display: flex;
+  align-items: center;
+  margin-left: auto;
+
+  ${breakpointMaxSmall} {
+    margin-left: 0;
+    width: 100%;
+    justify-content: space-between;
+    border-top: 1px solid ${color("border")};
+    margin-top: 1rem;
+    padding: 0.5rem 2.5rem 0 2rem;
+  }
+
+  ${Button.Root} {
+    margin-left: 0.5rem;
+  }
+`;

frontend/src/metabase/query_builder/components/view/ViewHeader.unit.spec.js

@@ -367,7 +367,7 @@ describe("ViewHeader", () => {
         it("shows bookmark and action buttons", () => {
           setup({ question });
           expect(
-            screen.queryByTestId("question-action-buttons-container"),
+            screen.queryByTestId("qb-header-info-button"),
           ).toBeInTheDocument();
         });
       });
@@ -388,7 +388,7 @@ describe("ViewHeader | Ad-hoc GUI question", () => {
   it("does not render bookmark and action buttons", () => {
     setupAdHoc();
     expect(
-      screen.queryByTestId("question-action-buttons-container"),
+      screen.queryByTestId("qb-header-info-button"),
     ).not.toBeInTheDocument();
   });
 

frontend/test/__support__/e2e/helpers/e2e-ui-elements-helpers.js

@@ -67,7 +67,7 @@ export function filterWidget() {
 }
 
 export const openQuestionActions = () => {
-  cy.findByTestId("question-action-buttons-container").within(() => {
+  cy.findByTestId("qb-header-action-panel").within(() => {
     cy.icon("ellipsis").click();
   });
 };
@@ -77,7 +77,5 @@ export const closeQuestionActions = () => {
 };
 
 export const questionInfoButton = () => {
-  return cy.findByTestId("question-action-buttons-container").within(() => {
-    return cy.icon("info");
-  });
+  return cy.findByTestId("qb-header-info-button");
 };

frontend/test/metabase/scenarios/organization/bookmarks-question.cy.spec.js

@@ -34,7 +34,7 @@ describe("scenarios > question > bookmarks", () => {
 });
 
 function toggleBookmark() {
-  cy.findByTestId("question-action-buttons-container").within(() => {
+  cy.findByTestId("qb-header-action-panel").within(() => {
     cy.icon("bookmark").click();
   });
   cy.wait("@toggleBookmark");