From eb9af286f8e04ec41c19f67b22844de563157646 Mon Sep 17 00:00:00 2001 From: toop Date: Tue, 6 Apr 2021 16:22:23 +0800 Subject: [PATCH 1/8] fixed FullSize charts broken #13600 --- .../src/dashboard/components/gridComponents/ChartHolder.jsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/superset-frontend/src/dashboard/components/gridComponents/ChartHolder.jsx b/superset-frontend/src/dashboard/components/gridComponents/ChartHolder.jsx index 61a0cf2e45e0..bafe643321c8 100644 --- a/superset-frontend/src/dashboard/components/gridComponents/ChartHolder.jsx +++ b/superset-frontend/src/dashboard/components/gridComponents/ChartHolder.jsx @@ -245,8 +245,9 @@ class ChartHolder extends React.Component { let chartHeight = 0; if (this.state.isFullSize) { - chartWidth = document.body.clientWidth - CHART_MARGIN; - chartHeight = document.body.clientHeight - CHART_MARGIN; + //toop fixed FullSize charts broken #13600 + chartWidth = window.innerWidth - CHART_MARGIN; + chartHeight = window.innerHeight - CHART_MARGIN; } else { chartWidth = Math.floor( widthMultiple * columnWidth + From bd4b793423365aa66b7e078b42ab934e21acb25a Mon Sep 17 00:00:00 2001 From: toop Date: Wed, 7 Apr 2021 09:29:47 -0500 Subject: [PATCH 2/8] Update ChartHolder.jsx --- .../src/dashboard/components/gridComponents/ChartHolder.jsx | 1 - 1 file changed, 1 deletion(-) diff --git a/superset-frontend/src/dashboard/components/gridComponents/ChartHolder.jsx b/superset-frontend/src/dashboard/components/gridComponents/ChartHolder.jsx index bafe643321c8..f83c8a0f8e09 100644 --- a/superset-frontend/src/dashboard/components/gridComponents/ChartHolder.jsx +++ b/superset-frontend/src/dashboard/components/gridComponents/ChartHolder.jsx @@ -245,7 +245,6 @@ class ChartHolder extends React.Component { let chartHeight = 0; if (this.state.isFullSize) { - //toop fixed FullSize charts broken #13600 chartWidth = window.innerWidth - CHART_MARGIN; chartHeight = window.innerHeight - CHART_MARGIN; } else { From 6eb04b1c4f5cc4a0ea8d9e72f7272d30a12392d9 Mon Sep 17 00:00:00 2001 From: Simcha Shats Date: Tue, 13 Apr 2021 16:04:01 +0300 Subject: [PATCH 3/8] fix:fix get permission function --- .../src/dashboard/util/getPermissions.ts | 37 +++++++++---------- 1 file changed, 17 insertions(+), 20 deletions(-) diff --git a/superset-frontend/src/dashboard/util/getPermissions.ts b/superset-frontend/src/dashboard/util/getPermissions.ts index 3e7cb19765dd..0208fd68fd65 100644 --- a/superset-frontend/src/dashboard/util/getPermissions.ts +++ b/superset-frontend/src/dashboard/util/getPermissions.ts @@ -18,25 +18,22 @@ */ import memoizeOne from 'memoize-one'; -export default function getPermissions( - perm: string, - view: string, - roles: object, -) { - return memoizeOne(() => { - const roleList = Object.entries(roles); - if (roleList.length === 0) return false; - let bool; +const findPermissions = (perm: string, view: string, roles: object) => { + const roleList = Object.entries(roles); + if (roleList.length === 0) return false; + let bool; - roleList.forEach(([role, permissions]) => { - bool = Boolean( - permissions.find( - (permission: Array) => - permission[0] === perm && permission[1] === view, - ), - ); - }); - console.log('bool', bool); - return bool; + roleList.forEach(([role, permissions]) => { + bool = Boolean( + permissions.find( + (permission: Array) => + permission[0] === perm && permission[1] === view, + ), + ); }); -} + return bool; +}; + +const getPermissions = memoizeOne(findPermissions); + +export default getPermissions; From bd1e03df3a196135566595401c3ecff404affb87 Mon Sep 17 00:00:00 2001 From: Simcha Shats Date: Tue, 27 Apr 2021 12:31:48 +0300 Subject: [PATCH 4/8] test: adding tests to full screen --- .../spec/fixtures/mockChartQueries.js | 2 +- .../components/SliceHeaderControls/index.jsx | 9 ++ .../gridComponents/ChartHolder.test.tsx | 92 +++++++++++++++++++ 3 files changed, 102 insertions(+), 1 deletion(-) create mode 100644 superset-frontend/src/dashboard/components/gridComponents/ChartHolder.test.tsx diff --git a/superset-frontend/spec/fixtures/mockChartQueries.js b/superset-frontend/spec/fixtures/mockChartQueries.js index a16354c93193..e4fa224ad826 100644 --- a/superset-frontend/spec/fixtures/mockChartQueries.js +++ b/superset-frontend/spec/fixtures/mockChartQueries.js @@ -29,7 +29,7 @@ export default { chartUpdateStartTime: 1525852454838, latestQueryFormData: {}, queryRequest: {}, - queryResponse: {}, + queriesResponse: [{}], triggerQuery: false, lastRendered: 0, form_data: { diff --git a/superset-frontend/src/dashboard/components/SliceHeaderControls/index.jsx b/superset-frontend/src/dashboard/components/SliceHeaderControls/index.jsx index 2c66bca1938d..5a0cbc99c606 100644 --- a/superset-frontend/src/dashboard/components/SliceHeaderControls/index.jsx +++ b/superset-frontend/src/dashboard/components/SliceHeaderControls/index.jsx @@ -32,6 +32,7 @@ import getDashboardUrl from 'src/dashboard/util/getDashboardUrl'; import { getActiveFilters } from 'src/dashboard/util/activeDashboardFilters'; import { FeatureFlag, isFeatureEnabled } from 'src/featureFlags'; import CrossFilterScopingModal from 'src/dashboard/components/CrossFilterScopingModal/CrossFilterScopingModal'; +import { FullscreenExitOutlined } from '@ant-design/icons'; const propTypes = { slice: PropTypes.object.isRequired, @@ -295,6 +296,14 @@ class SliceHeaderControls extends React.PureComponent { isOpen={this.state.showCrossFilterScopingModal} onClose={() => this.setState({ showCrossFilterScopingModal: false })} /> + {isFullSize && ( + { + this.props.handleToggleFullSize(); + }} + /> + )} { + const defaultProps = { + component: { + ...newComponentFactory(CHART_TYPE), + id: 'CHART_ID', + parents: ['ROOT_ID', 'TABS_ID', 'TAB_ID', 'ROW_ID'], + meta: { + chartId, + width: 3, + height: 10, + chartName: 'Mock chart name', + }, + }, + parentComponent: { + ...newComponentFactory(ROW_TYPE), + id: 'ROW_ID', + children: ['COLUMN_ID'], + }, + index: 0, + depth: 0, + id: 'CHART_ID', + parentId: 'ROW_ID', + availableColumnCount: 12, + columnWidth: 300, + onResizeStart: () => {}, + onResize: () => {}, + onResizeStop: () => {}, + handleComponentDrop: () => {}, + deleteComponent: () => {}, + updateComponents: () => {}, + editMode: false, + isComponentVisible: true, + dashboardId: 123, + }; + + const renderWrapper = (props = defaultProps, state?: object) => + render( + + + + + , + ); + + it('toggle full size', async () => { + renderWrapper(); + // @ts-ignore + let chart = screen.getByTestId('slice-container')?.firstChild?.style; + expect(chart?.width).toBe('900px'); + expect(chart?.height).toBe('26px'); + + userEvent.click(screen.getByRole('button')); + userEvent.click(screen.getByText('Maximize chart')); + + // @ts-ignore + chart = screen.getByTestId('slice-container')?.firstChild?.style; + await waitFor(() => expect(chart?.width).toBe('992px')); + expect(chart?.height).toBe('714px'); + }); +}); From 73090a1c14ce190cb5c973b578869970d937d3b7 Mon Sep 17 00:00:00 2001 From: Simcha Shats Date: Tue, 27 Apr 2021 12:43:51 +0300 Subject: [PATCH 5/8] lint: fix lint --- .../dashboard/components/gridComponents/ChartHolder.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/superset-frontend/src/dashboard/components/gridComponents/ChartHolder.test.tsx b/superset-frontend/src/dashboard/components/gridComponents/ChartHolder.test.tsx index 6905f65c805c..9c8bf29d0ee6 100644 --- a/superset-frontend/src/dashboard/components/gridComponents/ChartHolder.test.tsx +++ b/superset-frontend/src/dashboard/components/gridComponents/ChartHolder.test.tsx @@ -26,7 +26,7 @@ import newComponentFactory from 'src/dashboard/util/newComponentFactory'; import { DndProvider } from 'react-dnd'; import { HTML5Backend } from 'react-dnd-html5-backend'; import userEvent from '@testing-library/user-event'; -import { act, waitFor } from '@testing-library/react'; +import { waitFor } from '@testing-library/react'; import { ChartHolder } from './index'; import { CHART_TYPE, ROW_TYPE } from '../../util/componentTypes'; From 5380f90bc20522cc9e7d3322a6720c6bc65a67e8 Mon Sep 17 00:00:00 2001 From: Simcha Shats Date: Tue, 27 Apr 2021 16:12:59 +0300 Subject: [PATCH 6/8] fix: fix CR notes --- .../components/SliceHeaderControls/index.jsx | 4 ++-- .../gridComponents/ChartHolder.test.tsx | 23 ++++++++----------- 2 files changed, 11 insertions(+), 16 deletions(-) diff --git a/superset-frontend/src/dashboard/components/SliceHeaderControls/index.jsx b/superset-frontend/src/dashboard/components/SliceHeaderControls/index.jsx index 5a0cbc99c606..422e91591e71 100644 --- a/superset-frontend/src/dashboard/components/SliceHeaderControls/index.jsx +++ b/superset-frontend/src/dashboard/components/SliceHeaderControls/index.jsx @@ -32,7 +32,7 @@ import getDashboardUrl from 'src/dashboard/util/getDashboardUrl'; import { getActiveFilters } from 'src/dashboard/util/activeDashboardFilters'; import { FeatureFlag, isFeatureEnabled } from 'src/featureFlags'; import CrossFilterScopingModal from 'src/dashboard/components/CrossFilterScopingModal/CrossFilterScopingModal'; -import { FullscreenExitOutlined } from '@ant-design/icons'; +import Icons from 'src/components/Icons'; const propTypes = { slice: PropTypes.object.isRequired, @@ -297,7 +297,7 @@ class SliceHeaderControls extends React.PureComponent { onClose={() => this.setState({ showCrossFilterScopingModal: false })} /> {isFullSize && ( - { this.props.handleToggleFullSize(); diff --git a/superset-frontend/src/dashboard/components/gridComponents/ChartHolder.test.tsx b/superset-frontend/src/dashboard/components/gridComponents/ChartHolder.test.tsx index 9c8bf29d0ee6..c1a69f3ce185 100644 --- a/superset-frontend/src/dashboard/components/gridComponents/ChartHolder.test.tsx +++ b/superset-frontend/src/dashboard/components/gridComponents/ChartHolder.test.tsx @@ -19,12 +19,9 @@ import React from 'react'; import { render, screen } from 'spec/helpers/testing-library'; -import { Provider } from 'react-redux'; -import { getMockStore, mockStore } from 'spec/fixtures/mockStore'; +import mockState from 'spec/fixtures/mockState'; import { sliceId as chartId } from 'spec/fixtures/mockChartQueries'; import newComponentFactory from 'src/dashboard/util/newComponentFactory'; -import { DndProvider } from 'react-dnd'; -import { HTML5Backend } from 'react-dnd-html5-backend'; import userEvent from '@testing-library/user-event'; import { waitFor } from '@testing-library/react'; import { ChartHolder } from './index'; @@ -65,19 +62,17 @@ describe('ChartHolder', () => { dashboardId: 123, }; - const renderWrapper = (props = defaultProps, state?: object) => - render( - - - - - , - ); + const renderWrapper = (props = defaultProps, state = mockState) => + render(, { + useRedux: true, + initialState: state, + useDnd: true, + }); it('toggle full size', async () => { renderWrapper(); // @ts-ignore - let chart = screen.getByTestId('slice-container')?.firstChild?.style; + let chart = screen.getByTestId('slice-container').firstChild.style!; expect(chart?.width).toBe('900px'); expect(chart?.height).toBe('26px'); @@ -85,7 +80,7 @@ describe('ChartHolder', () => { userEvent.click(screen.getByText('Maximize chart')); // @ts-ignore - chart = screen.getByTestId('slice-container')?.firstChild?.style; + chart = screen.getByTestId('slice-container').firstChild.style!; await waitFor(() => expect(chart?.width).toBe('992px')); expect(chart?.height).toBe('714px'); }); From 32fe58e2da002c431728499018748005c8446e72 Mon Sep 17 00:00:00 2001 From: Simcha Shats Date: Tue, 27 Apr 2021 16:14:21 +0300 Subject: [PATCH 7/8] fix: fix CR notes --- .../dashboard/components/gridComponents/ChartHolder.test.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/superset-frontend/src/dashboard/components/gridComponents/ChartHolder.test.tsx b/superset-frontend/src/dashboard/components/gridComponents/ChartHolder.test.tsx index c1a69f3ce185..71417c464585 100644 --- a/superset-frontend/src/dashboard/components/gridComponents/ChartHolder.test.tsx +++ b/superset-frontend/src/dashboard/components/gridComponents/ChartHolder.test.tsx @@ -72,7 +72,7 @@ describe('ChartHolder', () => { it('toggle full size', async () => { renderWrapper(); // @ts-ignore - let chart = screen.getByTestId('slice-container').firstChild.style!; + let chart = screen.getByTestId('slice-container')?.firstChild?.style; expect(chart?.width).toBe('900px'); expect(chart?.height).toBe('26px'); @@ -80,7 +80,7 @@ describe('ChartHolder', () => { userEvent.click(screen.getByText('Maximize chart')); // @ts-ignore - chart = screen.getByTestId('slice-container').firstChild.style!; + chart = screen.getByTestId('slice-container')?.firstChild?.style; await waitFor(() => expect(chart?.width).toBe('992px')); expect(chart?.height).toBe('714px'); }); From 057f1f26f1c4cb3fa305cbcac59be248fe55fcf8 Mon Sep 17 00:00:00 2001 From: Simcha Shats Date: Tue, 27 Apr 2021 16:18:35 +0300 Subject: [PATCH 8/8] fix: fix CR notes --- .../components/gridComponents/ChartHolder.test.tsx | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/superset-frontend/src/dashboard/components/gridComponents/ChartHolder.test.tsx b/superset-frontend/src/dashboard/components/gridComponents/ChartHolder.test.tsx index 71417c464585..cd9f35cd5e1d 100644 --- a/superset-frontend/src/dashboard/components/gridComponents/ChartHolder.test.tsx +++ b/superset-frontend/src/dashboard/components/gridComponents/ChartHolder.test.tsx @@ -71,16 +71,17 @@ describe('ChartHolder', () => { it('toggle full size', async () => { renderWrapper(); - // @ts-ignore - let chart = screen.getByTestId('slice-container')?.firstChild?.style; + + let 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')); - // @ts-ignore - chart = screen.getByTestId('slice-container')?.firstChild?.style; + chart = (screen.getByTestId('slice-container').firstChild as HTMLElement) + .style; await waitFor(() => expect(chart?.width).toBe('992px')); expect(chart?.height).toBe('714px'); });