Separate view from data for question titles (#50129) (#50180)

Co-authored-by: Oisin Coveney <oisin@metabase.com>

enterprise/frontend/src/embedding-sdk/components/private/QuestionTitle.tsx

 import cx from "classnames";
-import type React from "react";
 import { t } from "ttag";
 
 import CS from "metabase/css/core/index.css";
-import { AdHocQuestionDescription } from "metabase/query_builder/components/view/ViewHeader/components/AdHocQuestionDescription";
+import {
+  getAdHocQuestionDescription,
+  shouldRenderAdhocDescription,
+} from "metabase/query_builder/components/view/ViewHeader/components/AdHocQuestionDescription/AdHocQuestionDescription";
 import * as Lib from "metabase-lib";
 import type Question from "metabase-lib/v1/Question";
 
-interface QuestionTitleProps {
+type QuestionTitleProps = {
   question: Question;
-}
+};
 
-export const QuestionTitle = ({
-  question,
-}: QuestionTitleProps): React.JSX.Element => {
+const getQuestionTitle = ({ question }: QuestionTitleProps): string => {
   const isSaved = question.isSaved();
+  const displayName = question.displayName();
+
+  if (isSaved && displayName) {
+    return displayName ?? null;
+  }
 
   const query = question.query();
   const { isNative } = Lib.queryDisplayInfo(query);
+  const adhocDescription = getAdHocQuestionDescription({ question });
+  if (
+    !isNative &&
+    shouldRenderAdhocDescription({ question }) &&
+    adhocDescription
+  ) {
+    return adhocDescription;
+  }
+
+  return t`New question`;
+};
+
+export const QuestionTitle = ({ question }: QuestionTitleProps) => {
+  const questionTitle = getQuestionTitle({ question });
 
-  return (
-    <h2 className={cx(CS.h2, CS.textWrap)}>
-      {isSaved ? (
-        question.displayName()
-      ) : !isNative && AdHocQuestionDescription.shouldRender(question) ? (
-        <AdHocQuestionDescription question={question} />
-      ) : (
-        t`New question`
-      )}
-    </h2>
-  );
+  return <h2 className={cx(CS.h2, CS.textWrap)}>{questionTitle}</h2>;
 };

frontend/src/metabase/query_builder/components/view/ViewHeader/components/AdHocQuestionDescription/AdHocQuestionDescription.tsx

+import { useMemo } from "react";
 import { msgid, ngettext, t } from "ttag";
 
 import * as Lib from "metabase-lib";
@@ -5,16 +6,27 @@ import type Question from "metabase-lib/v1/Question";
 
 import { AggregationAndBreakoutDescription } from "./AdHocQuestionDescription.styled";
 
-interface AdHocQuestionDescriptionProps {
-  question: Question;
+type AdHocQuestionDescriptionProps = {
   onClick?: () => void;
-}
+} & GetAdhocQuestionDescriptionProps;
 
-const STAGE_INDEX = -1;
-export const AdHocQuestionDescription = ({
+type GetAdhocQuestionDescriptionProps = {
+  question: Question;
+};
+
+export const shouldRenderAdhocDescription = ({
   question,
-  onClick,
-}: AdHocQuestionDescriptionProps) => {
+}: GetAdhocQuestionDescriptionProps) => {
+  const query = question.query();
+  const aggregations = Lib.aggregations(query, STAGE_INDEX);
+  const breakouts = Lib.breakouts(query, STAGE_INDEX);
+
+  return aggregations.length > 0 || breakouts.length > 0;
+};
+
+export const getAdHocQuestionDescription = ({
+  question,
+}: GetAdhocQuestionDescriptionProps) => {
   const query = question.query();
   const aggregations = Lib.aggregations(query, STAGE_INDEX);
   const breakouts = Lib.breakouts(query, STAGE_INDEX);
@@ -50,21 +62,31 @@ export const AdHocQuestionDescription = ({
             )
             .join(t` and `);
 
-  if (aggregationDescription || breakoutDescription) {
-    return (
-      <AggregationAndBreakoutDescription onClick={onClick}>
-        {[aggregationDescription, breakoutDescription]
-          .filter(Boolean)
-          .join(t` by `)}
-      </AggregationAndBreakoutDescription>
-    );
+  if (!aggregationDescription && !breakoutDescription) {
+    return null;
   }
+
+  return [aggregationDescription, breakoutDescription]
+    .filter(Boolean)
+    .join(t` by `);
 };
 
-AdHocQuestionDescription.shouldRender = (question: Question): boolean => {
-  const query = question.query();
-  const aggregations = Lib.aggregations(query, STAGE_INDEX);
-  const breakouts = Lib.breakouts(query, STAGE_INDEX);
+const STAGE_INDEX = -1;
+export const AdHocQuestionDescription = ({
+  question,
+  onClick,
+}: AdHocQuestionDescriptionProps) => {
+  const adHocDescription = useMemo(() => {
+    return getAdHocQuestionDescription({ question });
+  }, [question]);
 
-  return aggregations.length > 0 || breakouts.length > 0;
+  if (!adHocDescription) {
+    return null;
+  }
+
+  return (
+    <AggregationAndBreakoutDescription onClick={onClick}>
+      {adHocDescription}
+    </AggregationAndBreakoutDescription>
+  );
 };

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

 import { t } from "ttag";
 
+import { shouldRenderAdhocDescription } from "metabase/query_builder/components/view/ViewHeader/components/AdHocQuestionDescription/AdHocQuestionDescription";
 import type Question from "metabase-lib/v1/Question";
 
 import { AdHocQuestionDescription } from "./AdHocQuestionDescription";
@@ -20,7 +21,7 @@ export const QuestionDescription = ({
   isObjectDetail,
   onClick,
 }: QuestionDescriptionProps) => {
-  if (!isNative && AdHocQuestionDescription.shouldRender(question)) {
+  if (!isNative && shouldRenderAdhocDescription({ question })) {
     return <AdHocQuestionDescription question={question} onClick={onClick} />;
   }