This is an automated email from the ASF dual-hosted git repository. amitmiran pushed a commit to branch 1.3 in repository https://gitbox.apache.org/repos/asf/superset.git
commit 19a1592020e3283b0b0c7de25623fbb71171bf1c Author: Yaozong Liu <[email protected]> AuthorDate: Fri Jul 2 18:11:00 2021 +0800 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 (cherry picked from commit 81633e99ae396f3661263259cc12081ace8f83e4) --- .../src/dashboard/actions/dashboardState.js | 5 +++++ .../components/DashboardBuilder/DashboardBuilder.tsx | 11 ++++++++--- .../components/gridComponents/ChartHolder.jsx | 20 +++++++++++++------- .../components/gridComponents/ChartHolder.test.tsx | 14 ++++---------- .../src/dashboard/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 400e22b..d0953e8 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 d8a0a34..2d9ee81 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<DashboardBuilderProps> = () => { const directPathToChild = useSelector<RootState, string[]>( state => state.dashboardState.directPathToChild, ); + const fullSizeChartId = useSelector<RootState, number | null>( + state => state.dashboardState.fullSizeChartId, + ); const handleChangeTab = ({ pathToTabIndex, @@ -276,7 +281,7 @@ const DashboardBuilder: FC<DashboardBuilderProps> = () => { )} </DragDroppable> </StyledHeader> - <StyledContent> + <StyledContent fullSizeChartId={fullSizeChartId}> <div data-test="dashboard-content" className={cx('dashboard', editMode && 'dashboard--editing')} diff --git a/superset-frontend/src/dashboard/components/gridComponents/ChartHolder.jsx b/superset-frontend/src/dashboard/components/gridComponents/ChartHolder.jsx index 84d121c..23365b7 100644 --- a/superset-frontend/src/dashboard/components/gridComponents/ChartHolder.jsx +++ b/superset-frontend/src/dashboard/components/gridComponents/ChartHolder.jsx @@ -54,6 +54,7 @@ const propTypes = { directPathToChild: PropTypes.arrayOf(PropTypes.string), directPathLastUpdated: PropTypes.number, focusedFilterScope: PropTypes.object, + fullSizeChartId: PropTypes.oneOf([PropTypes.number, null]), // grid related availableColumnCount: PropTypes.number.isRequired, @@ -66,6 +67,7 @@ const propTypes = { deleteComponent: PropTypes.func.isRequired, updateComponents: PropTypes.func.isRequired, handleComponentDrop: PropTypes.func.isRequired, + setFullSizeChartId: PropTypes.func.isRequired, }; const defaultProps = { @@ -189,7 +191,6 @@ class ChartHolder extends React.Component { outlinedComponentId: null, outlinedColumnName: null, directPathLastUpdated: 0, - isFullSize: false, }; this.handleChangeFocus = this.handleChangeFocus.bind(this); @@ -244,7 +245,10 @@ class ChartHolder extends React.Component { } handleToggleFullSize() { - this.setState(prevState => ({ 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 ( <DragDroppable component={component} @@ -326,7 +332,7 @@ class ChartHolder extends React.Component { 'dashboard-component', 'dashboard-component-chart-holder', this.state.outlinedComponentId ? 'fade-in' : 'fade-out', - this.state.isFullSize && 'full-size', + isFullSize && 'full-size', )} > {!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 && ( <HoverMenu position="top"> diff --git a/superset-frontend/src/dashboard/components/gridComponents/ChartHolder.test.tsx b/superset-frontend/src/dashboard/components/gridComponents/ChartHolder.test.tsx index 9db20c3..6f24f06 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', () => { </Provider>, ); - 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 eb31a72..c7ead00 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 28405eb..55455dd 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 7c70ff4..6ebbe37 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: {
