fix(Explore): Remove changes to the properties on cancel (#17184)

* Remove on close

* Fix lint

* Add tests

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: '<span class="no-wrap">7 days ago</span>',
+    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(<ExploreHeader {...props} />, { 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();
+});

superset-frontend/src/explore/components/ExploreChartHeader.jsx → 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
                 />
               )}
-              <PropertiesModal
-                show={this.state.isPropertiesModalOpen}
-                onHide={this.closePropertiesModal}
-                onSave={this.props.sliceUpdated}
-                slice={this.props.slice}
-              />
+              {this.state.isPropertiesModalOpen && (
+                <PropertiesModal
+                  show={this.state.isPropertiesModalOpen}
+                  onHide={this.closePropertiesModal}
+                  onSave={this.props.sliceUpdated}
+                  slice={this.props.slice}
+                />
+              )}
               <Tooltip
                 id="edit-desc-tooltip"
                 title={t('Edit chart properties')}
               >
                 <span
+                  aria-label={t('Edit chart properties')}
                   role="button"
                   tabIndex={0}
                   className="edit-desc-icon"

superset-frontend/src/explore/components/PropertiesModal/index.tsx

@@ -190,6 +190,7 @@ export default function PropertiesModal({
             <h3>{t('Basic information')}</h3>
             <FormItem label={t('Name')} required>
               <Input
+                aria-label={t('Name')}
                 name="name"
                 data-test="properties-modal-name-input"
                 type="text"