fix: Table sorting reset

superset-frontend/packages/superset-ui-core/package.json

@@ -24,6 +24,7 @@
   ],
   "dependencies": {
     "@babel/runtime": "^7.1.2",
+    "@testing-library/react-hooks": "^8.0.1",
     "@types/d3-format": "^1.3.0",
     "@types/d3-interpolate": "^1.3.1",
     "@types/d3-scale": "^2.1.1",

superset-frontend/packages/superset-ui-core/src/hooks/index.ts

@@ -0,0 +1,25 @@
+/**
+ * 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.
+ */
+
+export * from './useChangeEffect';
+export * from './useComponentDidMount';
+export * from './useComponentDidUpdate';
+export * from './useElementOnScreen';
+export * from './usePrevious';
+export * from './useTruncation';

superset-frontend/packages/superset-ui-core/src/index.ts

@@ -35,3 +35,4 @@ export * from './chart-composition';
 export * from './components';
 export * from './math-expression';
 export * from './ui-overrides';
+export * from './hooks';

superset-frontend/plugins/plugin-chart-table/package.json

@@ -32,6 +32,7 @@
     "@types/react-table": "^7.0.29",
     "classnames": "^2.3.2",
     "d3-array": "^2.4.0",
+    "lodash": "^4.17.21",
     "match-sorter": "^6.3.0",
     "memoize-one": "^5.1.1",
     "react-table": "^7.6.3",

superset-frontend/plugins/plugin-chart-table/src/DataTable/DataTable.tsx

@@ -37,7 +37,8 @@ import {
   Row,
 } from 'react-table';
 import { matchSorter, rankings } from 'match-sorter';
-import { typedMemo } from '@superset-ui/core';
+import { typedMemo, usePrevious } from '@superset-ui/core';
+import { isEqual } from 'lodash';
 import GlobalFilter, { GlobalFilterProps } from './components/GlobalFilter';
 import SelectPageSize, {
   SelectPageSizeProps,
@@ -108,6 +109,8 @@ export default typedMemo(function DataTable<D extends object>({
     doSticky ? useSticky : [],
     hooks || [],
   ].flat();
+  const columnNames = Object.keys(data?.[0] || {});
+  const previousColumnNames = usePrevious(columnNames);
   const resultsSize = serverPagination ? rowCount : data.length;
   const sortByRef = useRef([]); // cache initial `sortby` so sorting doesn't trigger page reset
   const pageSizeRef = useRef([initialPageSize, resultsSize]);
@@ -187,6 +190,7 @@ export default typedMemo(function DataTable<D extends object>({
       getTableSize: defaultGetTableSize,
       globalFilter: defaultGlobalFilter,
       sortTypes,
+      autoResetSortBy: !isEqual(columnNames, previousColumnNames),
       ...moreUseTableOptions,
     },
     ...tableHooks,

superset-frontend/src/SqlLab/components/AceEditorWrapper/index.tsx

@@ -18,9 +18,8 @@
  */
 import React, { useState, useEffect, useRef } from 'react';
 import { useDispatch } from 'react-redux';
-import { css, styled } from '@superset-ui/core';
+import { css, styled, usePrevious } from '@superset-ui/core';
 
-import { usePrevious } from 'src/hooks/usePrevious';
 import { areArraysShallowEqual } from 'src/reduxUtils';
 import sqlKeywords from 'src/SqlLab/utils/sqlKeywords';
 import {

superset-frontend/src/SqlLab/components/ResultSet/index.tsx

@@ -28,8 +28,8 @@ import {
   styled,
   t,
   useTheme,
+  usePrevious,
 } from '@superset-ui/core';
-import { usePrevious } from 'src/hooks/usePrevious';
 import ErrorMessageWithStackTrace from 'src/components/ErrorMessage/ErrorMessageWithStackTrace';
 import {
   ISaveableDatasource,

superset-frontend/src/components/DropdownContainer/index.tsx

@@ -30,9 +30,8 @@ import React, {
   ReactNode,
 } from 'react';
 import { Global } from '@emotion/react';
-import { css, t, useTheme } from '@superset-ui/core';
+import { css, t, useTheme, usePrevious } from '@superset-ui/core';
 import { useResizeDetector } from 'react-resize-detector';
-import { usePrevious } from 'src/hooks/usePrevious';
 import Badge from '../Badge';
 import Icons from '../Icons';
 import Button from '../Button';

superset-frontend/src/components/FaveStar/index.tsx

@@ -18,9 +18,8 @@
  */
 
 import React, { useCallback } from 'react';
-import { css, t, styled } from '@superset-ui/core';
+import { css, t, styled, useComponentDidMount } from '@superset-ui/core';
 import { Tooltip } from 'src/components/Tooltip';
-import { useComponentDidMount } from 'src/hooks/useComponentDidMount';
 import Icons from 'src/components/Icons';
 
 export interface FaveStarProps {

superset-frontend/src/components/FlashProvider/index.tsx

@@ -17,7 +17,7 @@
  * under the License.
  */
 import { useToasts } from 'src/components/MessageToasts/withToasts';
-import { useComponentDidMount } from 'src/hooks/useComponentDidMount';
+import { useComponentDidMount } from '@superset-ui/core';
 
 type FlashMessageType = 'info' | 'alert' | 'danger' | 'warning' | 'success';
 export type FlashMessage = [FlashMessageType, string];

superset-frontend/src/components/ListView/CrossLinks.tsx

@@ -17,9 +17,8 @@
  * under the License.
  */
 import React, { useMemo, useRef } from 'react';
-import { styled } from '@superset-ui/core';
+import { styled, useTruncation } from '@superset-ui/core';
 import { Link } from 'react-router-dom';
-import { useTruncation } from 'src/hooks/useTruncation';
 import CrossLinksTooltip from './CrossLinksTooltip';
 
 export type CrossLinkProps = {

superset-frontend/src/components/ReportModal/HeaderReportDropdown/index.tsx

@@ -17,7 +17,6 @@
  * under the License.
  */
 import React, { useState, useEffect } from 'react';
-import { usePrevious } from 'src/hooks/usePrevious';
 import { useSelector, useDispatch } from 'react-redux';
 import {
   t,
@@ -28,6 +27,7 @@ import {
   FeatureFlag,
   isFeatureEnabled,
   getExtensionsRegistry,
+  usePrevious,
 } from '@superset-ui/core';
 import Icons from 'src/components/Icons';
 import { Switch } from 'src/components/Switch';

superset-frontend/src/components/Select/CustomTag.tsx

@@ -18,8 +18,7 @@
  */
 import React from 'react';
 import { Tag as AntdTag } from 'antd';
-import { styled } from '@superset-ui/core';
-import { useCSSTextTruncation } from 'src/hooks/useTruncation';
+import { styled, useCSSTextTruncation } from '@superset-ui/core';
 import { Tooltip } from '../Tooltip';
 import { CustomTagProps } from './types';
 import { SELECT_ALL_VALUE } from './utils';

superset-frontend/src/components/TruncatedList/index.tsx

@@ -18,8 +18,7 @@
  */
 
 import React, { ReactNode, useMemo, useRef } from 'react';
-import { styled, t } from '@superset-ui/core';
-import { useTruncation } from 'src/hooks/useTruncation';
+import { styled, t, useTruncation } from '@superset-ui/core';
 import { Tooltip } from '../Tooltip';
 
 export type TruncatedListProps<ListItemType> = {

superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx

@@ -33,6 +33,7 @@ import {
   styled,
   t,
   useTheme,
+  useElementOnScreen,
 } from '@superset-ui/core';
 import { Global } from '@emotion/react';
 import { useDispatch, useSelector } from 'react-redux';
@@ -56,7 +57,6 @@ import {
   setDirectPathToChild,
   setEditMode,
 } from 'src/dashboard/actions/dashboardState';
-import { useElementOnScreen } from 'src/hooks/useElementOnScreen';
 import { FeatureFlag, isFeatureEnabled } from 'src/featureFlags';
 import {
   deleteTopLevelTabs,

superset-frontend/src/dashboard/components/DashboardBuilder/DashboardContainer.tsx

@@ -27,6 +27,7 @@ import {
   getCategoricalSchemeRegistry,
   isFeatureEnabled,
   SupersetClient,
+  useComponentDidUpdate,
 } from '@superset-ui/core';
 import { ParentSize } from '@visx/responsive';
 import pick from 'lodash/pick';
@@ -48,7 +49,6 @@ import findTabIndexByComponentId from 'src/dashboard/util/findTabIndexByComponen
 import { setInScopeStatusOfFilters } from 'src/dashboard/actions/nativeFilters';
 import { dashboardInfoChanged } from 'src/dashboard/actions/dashboardInfo';
 import { setColorScheme } from 'src/dashboard/actions/dashboardState';
-import { useComponentDidUpdate } from 'src/hooks/useComponentDidUpdate/useComponentDidUpdate';
 import jsonStringify from 'json-stringify-pretty-compact';
 import { NATIVE_FILTER_DIVIDER_PREFIX } from '../nativeFilters/FiltersConfigModal/utils';
 import { findTabsWithChartsInScope } from '../nativeFilters/utils';

superset-frontend/src/dashboard/components/FiltersBadge/index.tsx

@@ -20,9 +20,8 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { uniqWith } from 'lodash';
 import cx from 'classnames';
-import { DataMaskStateWithId, Filters } from '@superset-ui/core';
+import { DataMaskStateWithId, Filters, usePrevious } from '@superset-ui/core';
 import Icons from 'src/components/Icons';
-import { usePrevious } from 'src/hooks/usePrevious';
 import { setDirectPathToChild } from 'src/dashboard/actions/dashboardState';
 import DetailsPanelPopover from './DetailsPanel';
 import { Pill } from './Styles';

superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/CrossFilterTag.tsx

@@ -18,11 +18,16 @@
  */
 
 import React from 'react';
-import { styled, css, useTheme, getColumnLabel } from '@superset-ui/core';
+import {
+  styled,
+  css,
+  useTheme,
+  getColumnLabel,
+  useCSSTextTruncation,
+} from '@superset-ui/core';
 import { CrossFilterIndicator } from 'src/dashboard/components/nativeFilters/selectors';
 import { Tag } from 'src/components';
 import { Tooltip } from 'src/components/Tooltip';
-import useCSSTextTruncation from 'src/hooks/useTruncation/useCSSTextTruncation';
 import { FilterBarOrientation } from 'src/dashboard/types';
 import { ellipsisCss } from './styles';
 

superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/CrossFilterTitle.tsx

@@ -18,9 +18,14 @@
  */
 
 import React from 'react';
-import { t, css, styled, useTheme } from '@superset-ui/core';
+import {
+  t,
+  css,
+  styled,
+  useTheme,
+  useCSSTextTruncation,
+} from '@superset-ui/core';
 import { Tooltip } from 'src/components/Tooltip';
-import useCSSTextTruncation from 'src/hooks/useTruncation/useCSSTextTruncation';
 import { FilterBarOrientation } from 'src/dashboard/types';
 import Icons from 'src/components/Icons';
 import { ellipsisCss } from './styles';

superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControl.tsx

@@ -22,11 +22,10 @@ import {
   InPortal,
   OutPortal,
 } from 'react-reverse-portal';
-import { styled, SupersetTheme } from '@superset-ui/core';
+import { styled, SupersetTheme, truncationCSS } from '@superset-ui/core';
 import { FormItem as StyledFormItem, Form } from 'src/components/Form';
 import { Tooltip } from 'src/components/Tooltip';
 import { FilterBarOrientation } from 'src/dashboard/types';
-import { truncationCSS } from 'src/hooks/useTruncation';
 import { checkIsMissingRequiredValue } from '../utils';
 import FilterValue from './FilterValue';
 import { FilterCard } from '../../FilterCard';

superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterDivider.tsx

@@ -17,12 +17,16 @@
  * under the License.
  */
 
-import { css, useTheme } from '@superset-ui/core';
+import {
+  css,
+  useTheme,
+  useCSSTextTruncation,
+  truncationCSS,
+} from '@superset-ui/core';
 import React from 'react';
 import Icons from 'src/components/Icons';
 import { Tooltip } from 'src/components/Tooltip';
 import { FilterBarOrientation } from 'src/dashboard/types';
-import { useCSSTextTruncation, truncationCSS } from 'src/hooks/useTruncation';
 import { FilterDividerProps } from './types';
 
 const VerticalDivider = ({ title, description }: FilterDividerProps) => (