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

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) {

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')}

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">

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');
   });

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,
     },

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) {

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: {