Updating Model title (#23763)

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

@@ -61,3 +61,4 @@ export function HeadBreadcrumbs({
 }
 
 HeadBreadcrumbs.Badge = HeaderBadge;
+HeadBreadcrumbs.Divider = Divider;

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

@@ -45,6 +45,7 @@ import {
   StyledLastEditInfoLabel,
   StyledQuestionDataSource,
   SavedQuestionLeftSideRoot,
+  HeaderDivider,
 } from "./ViewHeader.styled";
 
 const viewTitleHeaderPropTypes = {
@@ -184,6 +185,7 @@ function SavedQuestionLeftSide(props) {
   });
 
   const hasLastEditInfo = question.lastEditInfo() != null;
+  const isDataset = question.isDataset();
 
   const onHeaderChange = useCallback(
     name => {
@@ -200,16 +202,31 @@ function SavedQuestionLeftSide(props) {
       showSubHeader={showSubHeader}
     >
       <ViewHeaderMainLeftContentContainer>
-        <SavedQuestionHeaderButtonContainer>
-          <SavedQuestionHeaderButton
-            question={question}
-            onSave={onHeaderChange}
+        <SavedQuestionHeaderButtonContainer isDataset={isDataset}>
+          <HeadBreadcrumbs
+            divider={<HeaderDivider>/</HeaderDivider>}
+            parts={[
+              ...(isAdditionalInfoVisible && isDataset
+                ? [
+                    <DatasetCollectionBadge
+                      key="collection"
+                      dataset={question}
+                    />,
+                  ]
+                : []),
+
+              <SavedQuestionHeaderButton
+                key="question-title"
+                question={question}
+                onSave={onHeaderChange}
+              />,
+            ]}
           />
         </SavedQuestionHeaderButtonContainer>
       </ViewHeaderMainLeftContentContainer>
       {isAdditionalInfoVisible && (
         <ViewHeaderLeftSubHeading>
-          {QuestionDataSource.shouldRender(props) && (
+          {QuestionDataSource.shouldRender(props) && !isDataset && (
             <StyledQuestionDataSource
               question={question}
               isObjectDetail={isObjectDetail}

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

@@ -8,7 +8,6 @@ import { color, alpha } from "metabase/lib/colors";
 import { breakpointMaxSmall, space } from "metabase/styled-components/theme";
 import ViewSection, { ViewSubHeading, ViewHeading } from "./ViewSection";
 import QuestionDataSource from "./QuestionDataSource";
-import SavedQuestionHeaderButton from "../SavedQuestionHeaderButton/SavedQuestionHeaderButton";
 
 export const ViewHeaderContainer = styled(ViewSection)`
   border-bottom: 1px solid ${color("border")};
@@ -47,8 +46,7 @@ export const SaveButton = styled(Link)`
 `;
 
 export const SavedQuestionHeaderButtonContainer = styled.div`
-  position: relative;
-  right: 0.38rem;
+  right: ${props => (props.isDataset ? "0px" : "0.38rem")};
 `;
 
 export const HeaderButton = styled(Button)`
@@ -105,7 +103,7 @@ export const ViewSubHeaderRoot = styled(ViewSection)`
 
 export const StyledLastEditInfoLabel = styled(LastEditInfoLabel)`
   color: ${color("text-light")};
-  margin-left: 4px;
+  //margin-left: 4px;
 
   ${breakpointMaxSmall} {
     margin-left: 0;
@@ -124,7 +122,7 @@ export const StyledQuestionDataSource = styled(QuestionDataSource)`
 `;
 
 export const SavedQuestionLeftSideRoot = styled.div`
-  ${SavedQuestionHeaderButton.Root} {
+  ${SavedQuestionHeaderButtonContainer} {
     transition: all 400ms ease;
     position: relative;
     top: ${props => (props.showSubHeader ? "0" : "10px")};
@@ -137,7 +135,7 @@ export const SavedQuestionLeftSideRoot = styled.div`
 
   &:hover,
   &:focus-within {
-    ${SavedQuestionHeaderButton.Root} {
+    ${SavedQuestionHeaderButtonContainer} {
       top: 0px;
     }
 
@@ -146,3 +144,12 @@ export const SavedQuestionLeftSideRoot = styled.div`
     }
   }
 `;
+
+export const HeaderDivider = styled.span`
+  font-size: 1.25rem;
+  line-height: 1.5rem;
+  font-weight: 700;
+  color: ${color("text-medium")};
+  padding-left: 0.5rem;
+  padding-right: 0.25rem;
+`;