Save on AdHoc Question Title Click (#23470)

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

@@ -161,7 +161,7 @@ function getDataSourceParts({ question, subHead, isObjectDetail }) {
   const database = query.database();
   if (database) {
     parts.push({
-      icon: "database",
+      icon: !subHead ? "database" : undefined,
       name: database.displayName(),
       href: database.id >= 0 && Urls.browseDatabase(database),
     });

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

@@ -7,10 +7,13 @@ import QuestionDataSource from "./QuestionDataSource";
 
 import StructuredQuery from "metabase-lib/lib/queries/StructuredQuery";
 
+import { AggregationAndBreakoutDescription } from "./QuestionDescription.styled";
+
 const QuestionDescription = ({
   question,
   originalQuestion,
   isObjectDetail,
+  onClick,
 }) => {
   const query = question.query();
   if (query instanceof StructuredQuery) {
@@ -39,14 +42,14 @@ const QuestionDescription = ({
             breakouts.length,
           )
         : breakouts.map(breakout => breakout.displayName()).join(t` and `);
-    if (aggregationDescription && breakoutDescription) {
+    if (aggregationDescription || breakoutDescription) {
       return (
-        <span>{t`${aggregationDescription} by ${breakoutDescription}`}</span>
+        <AggregationAndBreakoutDescription onClick={onClick}>
+          {[aggregationDescription, breakoutDescription]
+            .filter(Boolean)
+            .join(t` by `)}
+        </AggregationAndBreakoutDescription>
       );
-    } else if (aggregationDescription) {
-      return <span>{aggregationDescription}</span>;
-    } else if (breakoutDescription) {
-      return <span>{breakoutDescription}</span>;
     }
   }
   if (question.database()) {

frontend/src/metabase/query_builder/components/view/QuestionDescription.styled.tsx

+import styled from "@emotion/styled";
+
+export const AggregationAndBreakoutDescription = styled.span`
+  cursor: pointer;
+`;

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

@@ -242,6 +242,7 @@ AhHocQuestionLeftSide.propTypes = {
   isNative: PropTypes.bool,
   isObjectDetail: PropTypes.bool,
   isSummarized: PropTypes.bool,
+  onOpenModal: PropTypes.func,
 };
 
 function AhHocQuestionLeftSide(props) {
@@ -251,11 +252,14 @@ function AhHocQuestionLeftSide(props) {
     isNative,
     isObjectDetail,
     isSummarized,
+    onOpenModal,
   } = props;
+
+  const handleTitleClick = () => onOpenModal(MODAL_TYPES.SAVE);
   return (
     <div>
       <ViewHeaderMainLeftContentContainer>
-        <AdHocViewHeading>
+        <AdHocViewHeading color="medium">
           {isNative ? (
             t`New question`
           ) : (
@@ -263,6 +267,7 @@ function AhHocQuestionLeftSide(props) {
               question={question}
               originalQuestion={originalQuestion}
               isObjectDetail={isObjectDetail}
+              onClick={handleTitleClick}
             />
           )}
         </AdHocViewHeading>
@@ -414,24 +419,6 @@ function ViewTitleHeaderRightSide(props) {
       className="ml-auto flex align-center"
       data-testid="qb-header-action-panel"
     >
-      {hasSaveButton && (
-        <SaveButton
-          disabled={!question.canRun() || !canEditQuery}
-          tooltip={{
-            tooltip: t`You don't have permission to save this question.`,
-            isEnabled: !canEditQuery,
-            placement: "left",
-          }}
-          data-metabase-event={
-            isShowingNotebook
-              ? `Notebook Mode; Click Save`
-              : `View Mode; Click Save`
-          }
-          onClick={() => onOpenModal("save")}
-        >
-          {t`Save`}
-        </SaveButton>
-      )}
       {QuestionFilters.shouldRender(props) && (
         <FilterHeaderToggle
           className="ml2 mr1"
@@ -523,6 +510,24 @@ function ViewTitleHeaderRightSide(props) {
           onModelPersistenceChange={onModelPersistenceChange}
         />
       )}
+      {hasSaveButton && (
+        <SaveButton
+          disabled={!question.canRun() || !canEditQuery}
+          tooltip={{
+            tooltip: t`You don't have permission to save this question.`,
+            isEnabled: !canEditQuery,
+            placement: "left",
+          }}
+          data-metabase-event={
+            isShowingNotebook
+              ? `Notebook Mode; Click Save`
+              : `View Mode; Click Save`
+          }
+          onClick={() => onOpenModal("save")}
+        >
+          {t`Save`}
+        </SaveButton>
+      )}
     </div>
   );
 }

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

@@ -26,10 +26,6 @@ export const ViewHeaderLeftSubHeading = styled(ViewSubHeading)`
   display: flex;
   align-items: center;
   flex-wrap: wrap;
-
-  &:not(:empty) {
-    margin-top: ${space(0)};
-  }
 `;
 
 export const AdHocViewHeading = styled(ViewHeading)`