Split View Header components into separate files (#44347)

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

@@ -0,0 +1,72 @@
+import PropTypes from "prop-types";
+import { t } from "ttag";
+
+import CS from "metabase/css/core/index.css";
+import {
+  AdHocLeftSideRoot,
+  AdHocViewHeading,
+  ViewHeaderLeftSubHeading,
+  ViewHeaderMainLeftContentContainer,
+} from "metabase/query_builder/components/view/ViewHeader/ViewHeader.styled";
+import {
+  QuestionDataSource,
+  QuestionDescription,
+} from "metabase/query_builder/components/view/ViewHeader/components";
+import { MODAL_TYPES } from "metabase/query_builder/constants";
+import * as Lib from "metabase-lib";
+
+AdHocQuestionLeftSide.propTypes = {
+  question: PropTypes.object.isRequired,
+  originalQuestion: PropTypes.object,
+  isNative: PropTypes.bool,
+  isObjectDetail: PropTypes.bool,
+  isSummarized: PropTypes.bool,
+  onOpenModal: PropTypes.func,
+};
+export function AdHocQuestionLeftSide(props) {
+  const {
+    question,
+    originalQuestion,
+    isNative,
+    isObjectDetail,
+    isSummarized,
+    onOpenModal,
+  } = props;
+
+  const handleTitleClick = () => {
+    const { isEditable } = Lib.queryDisplayInfo(question.query());
+
+    if (isEditable) {
+      onOpenModal(MODAL_TYPES.SAVE);
+    }
+  };
+
+  return (
+    <AdHocLeftSideRoot>
+      <ViewHeaderMainLeftContentContainer>
+        <AdHocViewHeading color="medium">
+          {isNative ? (
+            t`New question`
+          ) : (
+            <QuestionDescription
+              question={question}
+              originalQuestion={originalQuestion}
+              isObjectDetail={isObjectDetail}
+              onClick={handleTitleClick}
+            />
+          )}
+        </AdHocViewHeading>
+      </ViewHeaderMainLeftContentContainer>
+      <ViewHeaderLeftSubHeading>
+        {isSummarized && (
+          <QuestionDataSource
+            className={CS.mb1}
+            question={question}
+            isObjectDetail={isObjectDetail}
+            subHead
+          />
+        )}
+      </ViewHeaderLeftSubHeading>
+    </AdHocLeftSideRoot>
+  );
+}

frontend/src/metabase/query_builder/components/view/ViewHeader/components/AdHocQuestionLeftSide/index.ts

@@ -0,0 +1 @@
+export * from "./AdHocQuestionLeftSide";

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

@@ -0,0 +1,42 @@
+import { t } from "ttag";
+
+import Link from "metabase/core/components/Link";
+import Tooltip from "metabase/core/components/Tooltip";
+import { useDispatch, useSelector } from "metabase/lib/redux";
+import * as Urls from "metabase/lib/urls";
+import { navigateBackToDashboard } from "metabase/query_builder/actions";
+import {
+  BackButton,
+  BackButtonContainer,
+} from "metabase/query_builder/components/view/ViewHeader/ViewHeader.styled";
+import { getDashboard } from "metabase/query_builder/selectors";
+
+export function DashboardBackButton() {
+  const dashboard = useSelector(getDashboard);
+  const dispatch = useDispatch();
+
+  const handleClick = () => {
+    dispatch(navigateBackToDashboard(dashboard.id));
+  };
+
+  if (!dashboard) {
+    return null;
+  }
+
+  const label = t`Back to ${dashboard.name}`;
+
+  return (
+    <Tooltip tooltip={label}>
+      <BackButtonContainer>
+        <BackButton
+          as={Link}
+          to={Urls.dashboard(dashboard)}
+          round
+          icon="arrow_left"
+          aria-label={label}
+          onClick={handleClick}
+        />
+      </BackButtonContainer>
+    </Tooltip>
+  );
+}

frontend/src/metabase/query_builder/components/view/ViewHeader/components/DashboardBackButton/index.ts

@@ -0,0 +1 @@
+export * from "./DashboardBackButton";

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

@@ -0,0 +1,19 @@
+import PropTypes from "prop-types";
+import { t } from "ttag";
+
+import * as Urls from "metabase/lib/urls";
+import { HeadBreadcrumbs } from "metabase/query_builder/components/view/ViewHeader/components";
+
+HeaderCollectionBadge.propTypes = {
+  question: PropTypes.object.isRequired,
+};
+
+export function HeaderCollectionBadge({ question }) {
+  const { collection } = question.card();
+  const icon = question.type();
+  return (
+    <HeadBreadcrumbs.Badge to={Urls.collection(collection)} icon={icon}>
+      {collection?.name || t`Our analytics`}
+    </HeadBreadcrumbs.Badge>
+  );
+}

frontend/src/metabase/query_builder/components/view/ViewHeader/components/HeaderCollectionBadge/index.ts

@@ -0,0 +1 @@
+export * from "./HeaderCollectionBadge";

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

@@ -0,0 +1,112 @@
+import PropTypes from "prop-types";
+import { useCallback, useEffect, useState } from "react";
+
+import SavedQuestionHeaderButton from "metabase/query_builder/components/SavedQuestionHeaderButton/SavedQuestionHeaderButton";
+import {
+  HeaderDivider,
+  SavedQuestionHeaderButtonContainer,
+  SavedQuestionLeftSideRoot,
+  StyledLastEditInfoLabel,
+  StyledQuestionDataSource,
+  ViewHeaderLeftSubHeading,
+  ViewHeaderMainLeftContentContainer,
+} from "metabase/query_builder/components/view/ViewHeader/ViewHeader.styled";
+import {
+  HeadBreadcrumbs,
+  QuestionDataSource,
+} from "metabase/query_builder/components/view/ViewHeader/components";
+import { HeaderCollectionBadge } from "metabase/query_builder/components/view/ViewHeader/components/HeaderCollectionBadge/HeaderCollectionBadge";
+
+SavedQuestionLeftSide.propTypes = {
+  question: PropTypes.object.isRequired,
+  isObjectDetail: PropTypes.bool,
+  isAdditionalInfoVisible: PropTypes.bool,
+  isShowingQuestionDetailsSidebar: PropTypes.bool,
+  onOpenQuestionInfo: PropTypes.func.isRequired,
+  onSave: PropTypes.func,
+};
+export function SavedQuestionLeftSide(props) {
+  const {
+    question,
+    isObjectDetail,
+    isAdditionalInfoVisible,
+    onOpenQuestionInfo,
+    onSave,
+  } = props;
+
+  const [showSubHeader, setShowSubHeader] = useState(true);
+
+  const hasLastEditInfo = question.lastEditInfo() != null;
+  const type = question.type();
+  const isModelOrMetric = type === "model" || type === "metric";
+
+  const onHeaderChange = useCallback(
+    name => {
+      if (name && name !== question.displayName()) {
+        onSave(question.setDisplayName(name));
+      }
+    },
+    [question, onSave],
+  );
+
+  const renderDataSource =
+    QuestionDataSource.shouldRender(props) && type === "question";
+  const renderLastEdit = hasLastEditInfo && isAdditionalInfoVisible;
+
+  useEffect(() => {
+    const timerId = setTimeout(() => {
+      if (isAdditionalInfoVisible && (renderDataSource || renderLastEdit)) {
+        setShowSubHeader(false);
+      }
+    }, 4000);
+    return () => clearTimeout(timerId);
+  }, [isAdditionalInfoVisible, renderDataSource, renderLastEdit]);
+
+  return (
+    <SavedQuestionLeftSideRoot
+      data-testid="qb-header-left-side"
+      showSubHeader={showSubHeader}
+    >
+      <ViewHeaderMainLeftContentContainer>
+        <SavedQuestionHeaderButtonContainer isModelOrMetric={isModelOrMetric}>
+          <HeadBreadcrumbs
+            divider={<HeaderDivider>/</HeaderDivider>}
+            parts={[
+              ...(isAdditionalInfoVisible && isModelOrMetric
+                ? [
+                    <HeaderCollectionBadge
+                      key="collection"
+                      question={question}
+                    />,
+                  ]
+                : []),
+
+              <SavedQuestionHeaderButton
+                key={question.displayName()}
+                question={question}
+                onSave={onHeaderChange}
+              />,
+            ]}
+          />
+        </SavedQuestionHeaderButtonContainer>
+      </ViewHeaderMainLeftContentContainer>
+      {isAdditionalInfoVisible && (
+        <ViewHeaderLeftSubHeading>
+          {QuestionDataSource.shouldRender(props) && !isModelOrMetric && (
+            <StyledQuestionDataSource
+              question={question}
+              isObjectDetail={isObjectDetail}
+              subHead
+            />
+          )}
+          {hasLastEditInfo && isAdditionalInfoVisible && (
+            <StyledLastEditInfoLabel
+              item={question.card()}
+              onClick={onOpenQuestionInfo}
+            />
+          )}
+        </ViewHeaderLeftSubHeading>
+      )}
+    </SavedQuestionLeftSideRoot>
+  );
+}

frontend/src/metabase/query_builder/components/view/ViewHeader/components/SavedQuestionLeftSide/index.ts

@@ -0,0 +1 @@
+export * from "./SavedQuestionLeftSide";