diff --git a/frontend/src/metabase/query_builder/components/view/HeaderBreadcrumbs/HeaderBreadcrumbs.jsx b/frontend/src/metabase/query_builder/components/view/HeaderBreadcrumbs/HeaderBreadcrumbs.jsx index c3f0d107a8c00fefc95e598e4bce7335ae3159b5..6ba64392b0ee24bb2ba37725031fd40cb01eb9d7 100644 --- a/frontend/src/metabase/query_builder/components/view/HeaderBreadcrumbs/HeaderBreadcrumbs.jsx +++ b/frontend/src/metabase/query_builder/components/view/HeaderBreadcrumbs/HeaderBreadcrumbs.jsx @@ -61,3 +61,4 @@ export function HeadBreadcrumbs({ } HeadBreadcrumbs.Badge = HeaderBadge; +HeadBreadcrumbs.Divider = Divider; diff --git a/frontend/src/metabase/query_builder/components/view/ViewHeader.jsx b/frontend/src/metabase/query_builder/components/view/ViewHeader.jsx index e1dd076b2f643da0d5c0d9a70a1925e875fe31e1..8da0e5c5f3fb2b87e7ce526a97cc07b91e71901f 100644 --- a/frontend/src/metabase/query_builder/components/view/ViewHeader.jsx +++ b/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} diff --git a/frontend/src/metabase/query_builder/components/view/ViewHeader.styled.jsx b/frontend/src/metabase/query_builder/components/view/ViewHeader.styled.jsx index 68df0e6baac337c3b3a36c17ddc63abacbd51430..54d951186bb6f89acabcd8c3c86182794896a5f4 100644 --- a/frontend/src/metabase/query_builder/components/view/ViewHeader.styled.jsx +++ b/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; +`;