fix: Altered button crashing and title not updating on Explore view (#11960)

* Fix chart name not updating

* Fix AlteredSliceTag crashing

* Update name after it's changed in another modal

superset-frontend/spec/javascripts/components/AlteredSliceTag_spec.jsx

@@ -23,8 +23,8 @@ import { getChartControlPanelRegistry } from '@superset-ui/core';
 import AlteredSliceTag from 'src/components/AlteredSliceTag';
 import ModalTrigger from 'src/components/ModalTrigger';
 import TooltipWrapper from 'src/components/TooltipWrapper';
-import ListView from 'src/components/ListView';
 import TableCollection from 'src/components/dataViewCommon/TableCollection';
+import TableView from 'src/components/TableView';
 
 import {
   defaultProps,
@@ -34,7 +34,7 @@ import {
 } from './fixtures/AlteredSliceTag';
 
 const getTableWrapperFromModalBody = modalBody =>
-  modalBody.find(ListView).find(TableCollection);
+  modalBody.find(TableView).find(TableCollection);
 
 describe('AlteredSliceTag', () => {
   let wrapper;
@@ -110,7 +110,7 @@ describe('AlteredSliceTag', () => {
       const modalBody = mount(
         <div>{wrapper.instance().renderModalBody()}</div>,
       );
-      expect(modalBody.find(ListView)).toHaveLength(1);
+      expect(modalBody.find(TableView)).toHaveLength(1);
     });
 
     it('renders a thead', () => {

superset-frontend/src/components/AlteredSliceTag.jsx

@@ -19,12 +19,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { isEqual, isEmpty } from 'lodash';
-import ListView from 'src/components/ListView';
-import getControlsForVizType from 'src/utils/getControlsForVizType';
 import { t } from '@superset-ui/core';
+import getControlsForVizType from 'src/utils/getControlsForVizType';
+import { safeStringify } from 'src/utils/safeStringify';
 import TooltipWrapper from './TooltipWrapper';
 import ModalTrigger from './ModalTrigger';
-import { safeStringify } from '../utils/safeStringify';
+import TableView from './TableView';
 
 const propTypes = {
   origFormData: PropTypes.object.isRequired,
@@ -101,30 +101,6 @@ export default class AlteredSliceTag extends React.Component {
     return diffs;
   }
 
-  sortData = ({ sortBy }) => {
-    if (this.state.rows.length > 0 && sortBy.length > 0) {
-      const { id, desc } = sortBy[0];
-      this.setState(({ rows }) => ({
-        rows: this.sortDataByColumn(rows, id, desc),
-      }));
-    }
-  };
-
-  sortDataByColumn(data, sortById, desc) {
-    return data.sort((row1, row2) => {
-      const rows = desc ? [row2, row1] : [row1, row2];
-      const firstVal = rows[0][sortById];
-      const secondVal = rows[1][sortById];
-      if (typeof firstVal === 'string' && typeof secondVal === 'string') {
-        return secondVal.localeCompare(firstVal);
-      }
-      if (typeof firstVal === 'undefined' || firstVal === null) {
-        return 1;
-      }
-      return -1;
-    });
-  }
-
   isEqualish(val1, val2) {
     return isEqual(alterForComparison(val1), alterForComparison(val2));
   }
@@ -187,14 +163,11 @@ export default class AlteredSliceTag extends React.Component {
     ];
 
     return (
-      <ListView
+      <TableView
         columns={columns}
         data={this.state.rows}
-        count={this.state.rows.length}
         pageSize={50}
-        fetchData={this.sortData}
-        loading={false}
-        className="table"
+        className="table-condensed"
       />
     );
   }

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

@@ -100,6 +100,11 @@ export default function PropertiesModal({
     fetchChartData();
   }, [fetchChartData]);
 
+  // update name after it's changed in another modal
+  useEffect(() => {
+    setName(slice.slice_name || '');
+  }, [slice.slice_name]);
+
   const loadOptions = (input = '') => {
     const query = rison.encode({
       filter: input,

superset-frontend/src/explore/reducers/exploreReducer.js

@@ -172,6 +172,7 @@ export default function exploreReducer(state = {}, action) {
           ...state.slice,
           ...action.slice,
         },
+        sliceName: action.slice.slice_name ?? state.sliceName,
       };
     },
   };