From 2e01bd534a31b4aae19aa38b1e22e4e8f52e7537 Mon Sep 17 00:00:00 2001
From: Anton Kulyk <kuliks.anton@gmail.com>
Date: Tue, 11 Oct 2022 19:18:06 +0100
Subject: [PATCH] Fix data app page style (#25881)
* Remove info sidebar for data app pages
* Fix "Last edited by" text behavior
---
.../components/DashboardHeader.styled.tsx | 5 ++-
.../dashboard/components/DashboardHeader.tsx | 2 +-
.../dashboard/containers/DashboardHeader.jsx | 37 ++++++++++++-------
3 files changed, 27 insertions(+), 17 deletions(-)
diff --git a/frontend/src/metabase/dashboard/components/DashboardHeader.styled.tsx b/frontend/src/metabase/dashboard/components/DashboardHeader.styled.tsx
index 2ec2b84f83e..e67f1729d8a 100644
--- a/frontend/src/metabase/dashboard/components/DashboardHeader.styled.tsx
+++ b/frontend/src/metabase/dashboard/components/DashboardHeader.styled.tsx
@@ -74,6 +74,7 @@ export const HeaderLastEditInfoLabel = styled(LastEditInfoLabel)`
interface HeaderContentProps {
showSubHeader: boolean;
+ hasSubHeader: boolean;
}
export const HeaderContent = styled.div<HeaderContentProps>`
@@ -86,8 +87,8 @@ export const HeaderContent = styled.div<HeaderContentProps>`
opacity: ${props => (props.showSubHeader ? "1x" : "0")};
}
- ${({ showSubHeader }) =>
- showSubHeader &&
+ ${({ hasSubHeader }) =>
+ hasSubHeader &&
css`
&:hover,
&:focus-within {
diff --git a/frontend/src/metabase/dashboard/components/DashboardHeader.tsx b/frontend/src/metabase/dashboard/components/DashboardHeader.tsx
index 4d7f146ba21..55adafd66eb 100644
--- a/frontend/src/metabase/dashboard/components/DashboardHeader.tsx
+++ b/frontend/src/metabase/dashboard/components/DashboardHeader.tsx
@@ -137,7 +137,7 @@ const DashboardHeader = ({
className={cx("QueryBuilder-section", headerClassName)}
ref={header}
>
- <HeaderContent showSubHeader={!isDataApp && showSubHeader}>
+ <HeaderContent hasSubHeader={!isDataApp} showSubHeader={showSubHeader}>
<HeaderCaptionContainer>
<HeaderCaption
key={dashboard.name}
diff --git a/frontend/src/metabase/dashboard/containers/DashboardHeader.jsx b/frontend/src/metabase/dashboard/containers/DashboardHeader.jsx
index 54c3386f083..5c7337d69a1 100644
--- a/frontend/src/metabase/dashboard/containers/DashboardHeader.jsx
+++ b/frontend/src/metabase/dashboard/containers/DashboardHeader.jsx
@@ -34,10 +34,13 @@ import {
} from "./DashboardHeader.styled";
const mapStateToProps = (state, props) => {
+ const isDataApp = props.dashboard.is_app_page;
+ const isShowingDashboardInfoSidebar =
+ !isDataApp && getIsShowDashboardInfoSidebar(state);
return {
isBookmarked: getIsBookmarked(state, props),
isNavBarOpen: getIsNavbarOpen(state),
- isShowingDashboardInfoSidebar: getIsShowDashboardInfoSidebar(state),
+ isShowingDashboardInfoSidebar,
};
};
@@ -196,6 +199,7 @@ class DashboardHeader extends Component {
closeSidebar,
} = this.props;
+ const isDataAppPage = dashboard.is_app_page;
const canEdit = dashboard.can_write && isEditable && !!dashboard;
const buttons = [];
@@ -361,24 +365,26 @@ class DashboardHeader extends Component {
onDeleteBookmark={deleteBookmark}
isBookmarked={isBookmarked}
/>,
- <Tooltip key="dashboard-info-button" tooltip={t`More info`}>
- <DashboardHeaderButton
- icon="info"
- isActive={isShowingDashboardInfoSidebar}
- onClick={() =>
- isShowingDashboardInfoSidebar
- ? closeSidebar()
- : setSidebar({ name: SIDEBAR_NAME.info })
- }
- />
- </Tooltip>,
+ !isDataAppPage && (
+ <Tooltip key="dashboard-info-button" tooltip={t`More info`}>
+ <DashboardHeaderButton
+ icon="info"
+ isActive={isShowingDashboardInfoSidebar}
+ onClick={() =>
+ isShowingDashboardInfoSidebar
+ ? closeSidebar()
+ : setSidebar({ name: SIDEBAR_NAME.info })
+ }
+ />
+ </Tooltip>
+ ),
<EntityMenu
key="dashboard-action-menu-button"
items={extraButtons}
triggerIcon="ellipsis"
tooltip={t`Move, archive, and more...`}
/>,
- ],
+ ].filter(Boolean),
);
}
@@ -395,6 +401,7 @@ class DashboardHeader extends Component {
setSidebar,
} = this.props;
+ const isDataAppPage = dashboard.is_app_page;
const hasLastEditInfo = dashboard["last-edit-info"] != null;
return (
@@ -405,7 +412,9 @@ class DashboardHeader extends Component {
dashboard={dashboard}
isEditing={isEditing}
isBadgeVisible={!isEditing && !isFullscreen && isAdditionalInfoVisible}
- isLastEditInfoVisible={hasLastEditInfo && isAdditionalInfoVisible}
+ isLastEditInfoVisible={
+ !isDataAppPage && hasLastEditInfo && isAdditionalInfoVisible
+ }
isEditingInfo={isEditing}
isNavBarOpen={this.props.isNavBarOpen}
headerButtons={this.getHeaderButtons()}
--
GitLab