From 81633e99ae396f3661263259cc12081ace8f83e4 Mon Sep 17 00:00:00 2001 From: Yaozong Liu <750188453@qq.com> Date: Fri, 2 Jul 2021 18:11:00 +0800 Subject: [PATCH] refactor(dashboard): [chart-maximize-mode]put chart full-size state in redux (#15384) * refactor(dashboard): [chart-maximize-mode]put full-size status to redux * fix: ci --- .../src/dashboard/actions/dashboardState.js | 5 +++++ .../DashboardBuilder/DashboardBuilder.tsx | 11 +++++++--- .../components/gridComponents/ChartHolder.jsx | 20 ++++++++++++------- .../gridComponents/ChartHolder.test.tsx | 14 ++++--------- .../containers/DashboardComponent.jsx | 8 +++++++- .../src/dashboard/reducers/dashboardState.js | 7 +++++++ superset-frontend/src/dashboard/types.ts | 1 + 7 files changed, 45 insertions(+), 21 deletions(-) diff --git a/superset-frontend/src/dashboard/actions/dashboardState.js b/superset-frontend/src/dashboard/actions/dashboardState.js index 400e22b4246e..d0953e886a82 100644 --- a/superset-frontend/src/dashboard/actions/dashboardState.js +++ b/superset-frontend/src/dashboard/actions/dashboardState.js @@ -359,6 +359,11 @@ export function unsetFocusedFilterField(chartId, column) { return { type: UNSET_FOCUSED_FILTER_FIELD, chartId, column }; } +export const SET_FULL_SIZE_CHART_ID = 'SET_FULL_SIZE_CHART_ID'; +export function setFullSizeChartId(chartId) { + return { type: SET_FULL_SIZE_CHART_ID, chartId }; +} + // Undo history --------------------------------------------------------------- export const SET_MAX_UNDO_HISTORY_EXCEEDED = 'SET_MAX_UNDO_HISTORY_EXCEEDED'; export function setMaxUndoHistoryExceeded(maxUndoHistoryExceeded = true) { diff --git a/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx b/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx index d8a0a34b86d7..2d9ee811cbcf 100644 --- a/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx +++ b/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx @@ -90,10 +90,12 @@ const StyledHeader = styled.div` z-index: 2; `; -const StyledContent = styled.div` +const StyledContent = styled.div<{ + fullSizeChartId: number | null; +}>` grid-column: 2; grid-row: 2; - z-index: 1; + z-index: ${({ fullSizeChartId }) => (fullSizeChartId ? 1000 : 1)}; `; const StyledDashboardContent = styled.div<{ @@ -147,6 +149,9 @@ const DashboardBuilder: FC = () => { const directPathToChild = useSelector( state => state.dashboardState.directPathToChild, ); + const fullSizeChartId = useSelector( + state => state.dashboardState.fullSizeChartId, + ); const handleChangeTab = ({ pathToTabIndex, @@ -276,7 +281,7 @@ const DashboardBuilder: FC = () => { )} - +
({ isFullSize: !prevState.isFullSize })); + const { component, fullSizeChartId, setFullSizeChartId } = this.props; + const { chartId } = component.meta; + const isFullSize = fullSizeChartId === chartId; + setFullSizeChartId(isFullSize ? null : chartId); } render() { @@ -263,8 +267,12 @@ class ChartHolder extends React.Component { editMode, isComponentVisible, dashboardId, + fullSizeChartId, } = this.props; + const { chartId } = component.meta; + const isFullSize = fullSizeChartId === chartId; + // inherit the size of parent columns const widthMultiple = parentComponent.type === COLUMN_TYPE @@ -274,7 +282,7 @@ class ChartHolder extends React.Component { let chartWidth = 0; let chartHeight = 0; - if (this.state.isFullSize) { + if (isFullSize) { chartWidth = window.innerWidth - CHART_MARGIN; chartHeight = window.innerHeight - CHART_MARGIN; } else { @@ -288,8 +296,6 @@ class ChartHolder extends React.Component { ); } - const { chartId } = component.meta; - return ( {!editMode && ( @@ -351,7 +357,7 @@ class ChartHolder extends React.Component { updateSliceName={this.handleUpdateSliceName} isComponentVisible={isComponentVisible} handleToggleFullSize={this.handleToggleFullSize} - isFullSize={this.state.isFullSize} + isFullSize={isFullSize} /> {editMode && ( diff --git a/superset-frontend/src/dashboard/components/gridComponents/ChartHolder.test.tsx b/superset-frontend/src/dashboard/components/gridComponents/ChartHolder.test.tsx index 9db20c367c99..6f24f06fa6d9 100644 --- a/superset-frontend/src/dashboard/components/gridComponents/ChartHolder.test.tsx +++ b/superset-frontend/src/dashboard/components/gridComponents/ChartHolder.test.tsx @@ -18,7 +18,6 @@ */ import React from 'react'; -import userEvent from '@testing-library/user-event'; import { waitFor } from '@testing-library/react'; import { sliceId as chartId } from 'spec/fixtures/mockChartQueries'; import { nativeFiltersInfo } from 'spec/javascripts/dashboard/fixtures/mockNativeFilters'; @@ -66,6 +65,8 @@ describe('ChartHolder', () => { isComponentVisible: true, dashboardId: 123, nativeFilters: nativeFiltersInfo.filters, + fullSizeChartId: chartId, + setFullSizeChartId: () => {}, }; const mockStore = getMockStore({ ...initialState, @@ -79,19 +80,12 @@ describe('ChartHolder', () => { , ); - it('toggle full size', async () => { + it('should render full size', async () => { renderWrapper(); - let chart = (screen.getByTestId('slice-container') + const chart = (screen.getByTestId('slice-container') .firstChild as HTMLElement).style; - expect(chart?.width).toBe('900px'); - expect(chart?.height).toBe('26px'); - userEvent.click(screen.getByRole('button')); - userEvent.click(screen.getByText('Maximize chart')); - - chart = (screen.getByTestId('slice-container').firstChild as HTMLElement) - .style; await waitFor(() => expect(chart?.width).toBe('992px')); expect(chart?.height).toBe('714px'); }); diff --git a/superset-frontend/src/dashboard/containers/DashboardComponent.jsx b/superset-frontend/src/dashboard/containers/DashboardComponent.jsx index eb31a7248828..c7ead005701c 100644 --- a/superset-frontend/src/dashboard/containers/DashboardComponent.jsx +++ b/superset-frontend/src/dashboard/containers/DashboardComponent.jsx @@ -35,7 +35,11 @@ import { updateComponents, handleComponentDrop, } from '../actions/dashboardLayout'; -import { setDirectPathToChild, setActiveTabs } from '../actions/dashboardState'; +import { + setDirectPathToChild, + setActiveTabs, + setFullSizeChartId, +} from '../actions/dashboardState'; const propTypes = { id: PropTypes.string, @@ -83,6 +87,7 @@ function mapStateToProps( activeTabs: dashboardState.activeTabs, directPathLastUpdated: dashboardState.directPathLastUpdated, dashboardId: dashboardInfo.id, + fullSizeChartId: dashboardState.fullSizeChartId, }; // rows and columns need more data about their child dimensions @@ -112,6 +117,7 @@ function mapDispatchToProps(dispatch) { updateComponents, handleComponentDrop, setDirectPathToChild, + setFullSizeChartId, setActiveTabs, logEvent, }, diff --git a/superset-frontend/src/dashboard/reducers/dashboardState.js b/superset-frontend/src/dashboard/reducers/dashboardState.js index 28405ebc9190..55455dd1c251 100644 --- a/superset-frontend/src/dashboard/reducers/dashboardState.js +++ b/superset-frontend/src/dashboard/reducers/dashboardState.js @@ -36,6 +36,7 @@ import { SET_FOCUSED_FILTER_FIELD, UNSET_FOCUSED_FILTER_FIELD, SET_ACTIVE_TABS, + SET_FULL_SIZE_CHART_ID, } from '../actions/dashboardState'; import { HYDRATE_DASHBOARD } from '../actions/hydrate'; @@ -165,6 +166,12 @@ export default function dashboardStateReducer(state = {}, action) { focusedFilterField: null, }; }, + [SET_FULL_SIZE_CHART_ID]() { + return { + ...state, + fullSizeChartId: action.chartId, + }; + }, }; if (action.type in actionHandlers) { diff --git a/superset-frontend/src/dashboard/types.ts b/superset-frontend/src/dashboard/types.ts index 7c70ff43c150..6ebbe37dfe2e 100644 --- a/superset-frontend/src/dashboard/types.ts +++ b/superset-frontend/src/dashboard/types.ts @@ -56,6 +56,7 @@ export type DashboardState = { editMode: boolean; directPathToChild: string[]; activeTabs: ActiveTabs; + fullSizeChartId: number | null; }; export type DashboardInfo = { common: {