Skip to content

Commit

Permalink
refactor: dashboard header styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@etokiryau
etokiryau committed Mar 12, 2025
1 parent b2a997c commit c6e32e0
Show file tree
Hide file tree
Showing 2 changed files with 71 additions and 82 deletions.
92 changes: 43 additions & 49 deletions superset-frontend/src/Superstructure/Root/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/* eslint-disable react-hooks/rules-of-hooks */
import React, { createContext, useEffect, useMemo, useState } from 'react';
import React, { useEffect, useMemo, useState } from 'react';
import { BrowserRouter as Router } from 'react-router-dom';
import { styled } from '@superset-ui/core';

Expand Down Expand Up @@ -64,10 +64,6 @@ import {

setupClient();

export const PluginContext = createContext<{ leftNavigation: boolean }>({
leftNavigation: false,
});

const StyledCollapseBtn = styled.button<{
isVisible: boolean;
}>`
Expand Down Expand Up @@ -515,52 +511,50 @@ export const RootComponent = (incomingParams: MicrofrontendParams) => {
}

return (
<div>
<PluginContext.Provider value={{ leftNavigation: isVisible }}>
<Version appVersion={APP_VERSION} />
<ContentWrapper>
{!isLoaded || !isFullConfigReady ? (
<Loading />
) : (
<RootComponentWrapper withNavigation={withNavigation}>
<Router>
<>
<Version appVersion={APP_VERSION} />
<ContentWrapper>
{!isLoaded || !isFullConfigReady ? (
<Loading />
) : (
<RootComponentWrapper withNavigation={withNavigation}>
<Router>
{withNavigation && (
<LeftNavigation
routes={FULL_CONFIG.routes}
baseRoute={FULL_CONFIG.basename}
stylesConfig={stylesConfig}
language={userLanguage}
isVisible={isVisible}
// onNavigate={closeLeftNavigation} // DODO added #33605679
/>
)}
<DashboardComponentWrapper
withNavigation={withNavigation && isVisible}
>
{withNavigation && (
<LeftNavigation
routes={FULL_CONFIG.routes}
baseRoute={FULL_CONFIG.basename}
stylesConfig={stylesConfig}
language={userLanguage}
<StyledCollapseBtn
type="button"
onClick={() => setIsVisible(!isVisible)}
isVisible={isVisible}
// onNavigate={closeLeftNavigation} // DODO added #33605679
/>
>
{isVisible && <Icons.Expand />}
{!isVisible && <Icons.Collapse />}
</StyledCollapseBtn>
)}
<DashboardComponentWrapper
withNavigation={withNavigation && isVisible}
>
{withNavigation && (
<StyledCollapseBtn
type="button"
onClick={() => setIsVisible(!isVisible)}
isVisible={isVisible}
>
{isVisible && <Icons.Expand />}
{!isVisible && <Icons.Collapse />}
</StyledCollapseBtn>
)}
<Main
routes={FULL_CONFIG.routes}
store={store}
basename={FULL_CONFIG.basename}
stylesConfig={stylesConfig}
annotationMessages={annotationsObjects}
startDashboardId={startDashboard}
/>
</DashboardComponentWrapper>
</Router>
</RootComponentWrapper>
)}
</ContentWrapper>
</PluginContext.Provider>
</div>
<Main
routes={FULL_CONFIG.routes}
store={store}
basename={FULL_CONFIG.basename}
stylesConfig={stylesConfig}
annotationMessages={annotationsObjects}
startDashboardId={startDashboard}
/>
</DashboardComponentWrapper>
</Router>
</RootComponentWrapper>
)}
</ContentWrapper>
</>
);
};
61 changes: 28 additions & 33 deletions superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,8 @@ import cx from 'classnames';
import React, {
FC,
useCallback,
useContext, // DODO added
useEffect,
useMemo,
// useMemo, // DODO commented out 47089618
useRef,
useState,
} from 'react';
Expand Down Expand Up @@ -69,7 +68,6 @@ import {
OPEN_FILTER_BAR_WIDTH,
} from 'src/dashboard/constants';
import { bootstrapData } from 'src/preamble';
import { PluginContext } from 'src/Superstructure/Root'; // DODO added
import { getRootLevelTabsComponent, shouldFocusTabs } from './utils';
import DashboardContainer from './DashboardContainer';
import { useNativeFilters } from './state';
Expand Down Expand Up @@ -163,17 +161,18 @@ const StickyPanel = styled.div<{ width: number }>`

// @z-index-above-dashboard-popovers (99) + 1 = 100
const StyledHeader = styled.div<{
filterBarWidth: number; // DODO added
leftNavigation: boolean; // DODO added
dashboardFiltersOpen: boolean; // DODO added
}>`
grid-column: 2;
grid-column: ${({ dashboardFiltersOpen }) =>
dashboardFiltersOpen ? '2' : '1 / span 2'};
grid-row: 1;
position: sticky;
top: 0;
z-index: 100;
// DODO changed
max-width: ${({ filterBarWidth, leftNavigation }) =>
`calc(100vw - ${filterBarWidth}px - ${leftNavigation ? 15 : 0}%`});
// max-width: 100vw;
// DODO changed 47089618
max-width: 100%;
overflow-x: hidden; // DODO added 47089618
`;

const StyledContent = styled.div<{
Expand Down Expand Up @@ -427,8 +426,6 @@ const DashboardBuilder: FC<DashboardBuilderProps> = () => {
const uiConfig = useUiConfig();
const theme = useTheme();

const { leftNavigation } = useContext(PluginContext); // DODO added

const dashboardId = useSelector<RootState, string>(
({ dashboardInfo }) => `${dashboardInfo.id}`,
);
Expand Down Expand Up @@ -494,7 +491,6 @@ const DashboardBuilder: FC<DashboardBuilderProps> = () => {
isReport;

const [barTopOffset, setBarTopOffset] = useState(0);
const [filterBarWidth, setFilterBarWidth] = useState(OPEN_FILTER_BAR_WIDTH); // DODO added

useEffect(() => {
setBarTopOffset(headerRef.current?.getBoundingClientRect()?.height || 0);
Expand Down Expand Up @@ -542,23 +538,24 @@ const DashboardBuilder: FC<DashboardBuilderProps> = () => {
const filterBarHeight = `calc(100vh - ${offset}px)`;
const filterBarOffset = dashboardFiltersOpen ? 0 : barTopOffset + 20;

const draggableStyle = useMemo(
() => ({
marginLeft:
dashboardFiltersOpen ||
editMode ||
!nativeFiltersEnabled ||
filterBarOrientation === FilterBarOrientation.HORIZONTAL
? 0
: -32,
}),
[
dashboardFiltersOpen,
editMode,
filterBarOrientation,
nativeFiltersEnabled,
],
);
// DODO commented out 47089618
// const draggableStyle = useMemo(
// () => ({
// marginLeft:
// dashboardFiltersOpen ||
// editMode ||
// !nativeFiltersEnabled ||
// filterBarOrientation === FilterBarOrientation.HORIZONTAL
// ? 0
// : -32,
// }),
// [
// dashboardFiltersOpen,
// editMode,
// filterBarOrientation,
// nativeFiltersEnabled,
// ],
// );

// If a new tab was added, update the directPathToChild to reflect it
const currentTopLevelTabs = useRef(topLevelTabs);
Expand Down Expand Up @@ -658,7 +655,6 @@ const DashboardBuilder: FC<DashboardBuilderProps> = () => {
const filterBarWidth = dashboardFiltersOpen
? adjustedWidth
: CLOSED_FILTER_BAR_WIDTH;
setFilterBarWidth(filterBarWidth); // DODO added
return (
<FiltersPanel
width={filterBarWidth}
Expand Down Expand Up @@ -687,8 +683,7 @@ const DashboardBuilder: FC<DashboardBuilderProps> = () => {
)}
<StyledHeader
ref={headerRef}
filterBarWidth={filterBarWidth} // DODO added
leftNavigation={leftNavigation} // DODO added
dashboardFiltersOpen={dashboardFiltersOpen} // DODO added 47089618
>
{/* @ts-ignore */}
<DragDroppable
Expand All @@ -702,7 +697,7 @@ const DashboardBuilder: FC<DashboardBuilderProps> = () => {
editMode={editMode}
// you cannot drop on/displace tabs if they already exist
disableDragDrop={!!topLevelTabs}
style={draggableStyle}
// style={draggableStyle} // DODO commented out 47089618
>
{renderDraggableContent}
</DragDroppable>
Expand Down

0 comments on commit c6e32e0

Please sign in to comment.