From 08710b34571d066cbfa01e44142e4006e1e7d7ce Mon Sep 17 00:00:00 2001 From: Geido <60598000+geido@users.noreply.github.com> Date: Tue, 2 Nov 2021 19:27:56 +0200 Subject: [PATCH] fix(Explore): Remove changes to the properties on cancel (#17184) * Remove on close * Fix lint * Add tests --- .../ExploreChartHeader.test.tsx | 125 ++++++++++++++++++ .../index.jsx} | 35 ++--- .../components/PropertiesModal/index.tsx | 1 + 3 files changed, 145 insertions(+), 16 deletions(-) create mode 100644 superset-frontend/src/explore/components/ExploreChartHeader/ExploreChartHeader.test.tsx rename superset-frontend/src/explore/components/{ExploreChartHeader.jsx => ExploreChartHeader/index.jsx} (88%) diff --git a/superset-frontend/src/explore/components/ExploreChartHeader/ExploreChartHeader.test.tsx b/superset-frontend/src/explore/components/ExploreChartHeader/ExploreChartHeader.test.tsx new file mode 100644 index 000000000000..ae51703fde5c --- /dev/null +++ b/superset-frontend/src/explore/components/ExploreChartHeader/ExploreChartHeader.test.tsx @@ -0,0 +1,125 @@ +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import React from 'react'; +import { Slice } from 'src/types/Chart'; +import { render, screen } from 'spec/helpers/testing-library'; +import userEvent from '@testing-library/user-event'; +import fetchMock from 'fetch-mock'; +import ExploreHeader from '.'; + +fetchMock.get('http://localhost/api/v1/chart/318', {}); + +const createProps = () => ({ + chart: { + latestQueryFormData: { + viz_type: 'histogram', + datasource: '49__table', + slice_id: 318, + url_params: {}, + time_range_endpoints: ['inclusive', 'exclusive'], + granularity_sqla: 'time_start', + time_range: 'No filter', + all_columns_x: ['age'], + adhoc_filters: [], + row_limit: 10000, + groupby: null, + color_scheme: 'supersetColors', + label_colors: {}, + link_length: '25', + x_axis_label: 'age', + y_axis_label: 'count', + }, + chartStatus: 'rendered', + }, + slice: ({ + cache_timeout: null, + changed_on: '2021-03-19T16:30:56.750230', + changed_on_humanized: '7 days ago', + datasource: 'FCC 2018 Survey', + description: null, + description_markeddown: '', + edit_url: '/chart/edit/318', + form_data: { + adhoc_filters: [], + all_columns_x: ['age'], + color_scheme: 'supersetColors', + datasource: '49__table', + granularity_sqla: 'time_start', + groupby: null, + label_colors: {}, + link_length: '25', + queryFields: { groupby: 'groupby' }, + row_limit: 10000, + slice_id: 318, + time_range: 'No filter', + time_range_endpoints: ['inclusive', 'exclusive'], + url_params: {}, + viz_type: 'histogram', + x_axis_label: 'age', + y_axis_label: 'count', + }, + modified: '7 days ago', + owners: [ + { + text: 'Superset Admin', + value: 1, + }, + ], + slice_id: 318, + slice_name: 'Age distribution of respondents', + slice_url: '/superset/explore/?form_data=%7B%22slice_id%22%3A%20318%7D', + } as unknown) as Slice, + slice_name: 'Age distribution of respondents', + actions: { + postChartFormData: () => null, + updateChartTitle: () => null, + fetchFaveStar: () => null, + saveFaveStar: () => null, + }, + user: { + userId: 1, + }, +}); + +test('Cancelling changes to the properties should reset previous properties', () => { + const props = createProps(); + render(, { useRedux: true }); + + const openModal = screen.getByRole('button', { + name: 'Edit chart properties', + }); + const newChartName = 'New chart name'; + const prevChartName = props.slice_name; + + userEvent.click(openModal); + + const nameInput = screen.getByRole('textbox', { name: 'Name' }); + + userEvent.clear(nameInput); + userEvent.type(nameInput, newChartName); + + expect(screen.getByDisplayValue(newChartName)).toBeInTheDocument(); + + userEvent.click(screen.getByRole('button', { name: 'Cancel' })); + + userEvent.click(openModal); + + expect(screen.getByDisplayValue(prevChartName)).toBeInTheDocument(); +}); diff --git a/superset-frontend/src/explore/components/ExploreChartHeader.jsx b/superset-frontend/src/explore/components/ExploreChartHeader/index.jsx similarity index 88% rename from superset-frontend/src/explore/components/ExploreChartHeader.jsx rename to superset-frontend/src/explore/components/ExploreChartHeader/index.jsx index 13f81b813cb5..2785813b32a4 100644 --- a/superset-frontend/src/explore/components/ExploreChartHeader.jsx +++ b/superset-frontend/src/explore/components/ExploreChartHeader/index.jsx @@ -24,16 +24,16 @@ import { styled, t } from '@superset-ui/core'; import { Tooltip } from 'src/components/Tooltip'; import { toggleActive, deleteActiveReport } from 'src/reports/actions/reports'; import HeaderReportActionsDropdown from 'src/components/ReportModal/HeaderReportActionsDropdown'; -import { chartPropShape } from '../../dashboard/util/propShapes'; -import ExploreActionButtons from './ExploreActionButtons'; -import RowCountLabel from './RowCountLabel'; -import EditableTitle from '../../components/EditableTitle'; -import AlteredSliceTag from '../../components/AlteredSliceTag'; -import FaveStar from '../../components/FaveStar'; -import Timer from '../../components/Timer'; -import CachedLabel from '../../components/CachedLabel'; -import PropertiesModal from './PropertiesModal'; -import { sliceUpdated } from '../actions/exploreActions'; +import { chartPropShape } from 'src/dashboard/util/propShapes'; +import EditableTitle from 'src/components/EditableTitle'; +import AlteredSliceTag from 'src/components/AlteredSliceTag'; +import FaveStar from 'src/components/FaveStar'; +import Timer from 'src/components/Timer'; +import CachedLabel from 'src/components/CachedLabel'; +import PropertiesModal from 'src/explore/components/PropertiesModal'; +import { sliceUpdated } from 'src/explore/actions/exploreActions'; +import ExploreActionButtons from '../ExploreActionButtons'; +import RowCountLabel from '../RowCountLabel'; const CHART_STATUS_MAP = { failed: 'danger', @@ -171,17 +171,20 @@ export class ExploreChartHeader extends React.PureComponent { showTooltip /> )} - + {this.state.isPropertiesModalOpen && ( + + )} {t('Basic information')}