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