You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by di...@apache.org on 2023/03/09 14:38:12 UTC

[superset] branch fix/cross-filtering-table-sort created (now f0a86868a4)

This is an automated email from the ASF dual-hosted git repository.

diegopucci pushed a change to branch fix/cross-filtering-table-sort
in repository https://gitbox.apache.org/repos/asf/superset.git


      at f0a86868a4 Fix table and move hooks

This branch includes the following new commits:

     new f0a86868a4 Fix table and move hooks

The 1 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails.  The revisions
listed as "add" were already present in the repository and have only
been added to this reference.



[superset] 01/01: Fix table and move hooks

Posted by di...@apache.org.
This is an automated email from the ASF dual-hosted git repository.

diegopucci pushed a commit to branch fix/cross-filtering-table-sort
in repository https://gitbox.apache.org/repos/asf/superset.git

commit f0a86868a4f42b8de2f9529bcb5f0e53c4f6d8d9
Author: geido <di...@gmail.com>
AuthorDate: Thu Mar 9 15:37:18 2023 +0100

    Fix table and move hooks
---
 superset-frontend/package-lock.json                | 67 ++++++++++++++++++++++
 .../packages/superset-ui-core/package.json         |  1 +
 .../superset-ui-core/src/hooks}/index.ts           |  5 ++
 .../src/hooks/useChangeEffect/index.ts             |  0
 .../hooks/useChangeEffect/useChangeEffect.test.ts  |  0
 .../src/hooks/useChangeEffect/useChangeEffect.ts   |  0
 .../src/hooks/useComponentDidMount/index.ts        |  0
 .../useComponentDidMount.test.ts                   |  0
 .../useComponentDidMount/useComponentDidMount.ts   |  0
 .../src/hooks/useComponentDidUpdate/index.ts       |  0
 .../useComponentDidUpdate.test.ts                  |  0
 .../useComponentDidUpdate/useComponentDidUpdate.ts |  0
 .../src/hooks/useElementOnScreen/index.ts          |  0
 .../src/hooks/usePrevious/index.ts                 |  0
 .../src/hooks/usePrevious/usePrevious.test.ts      |  0
 .../src/hooks/usePrevious/usePrevious.ts           |  0
 .../src/hooks/useTruncation/index.ts               |  0
 .../hooks/useTruncation/useCSSTextTruncation.ts    |  0
 .../useTruncation/useChildElementTruncation.ts     |  0
 .../packages/superset-ui-core/src/index.ts         |  1 +
 .../packages/superset-ui-core/tsconfig.json        |  2 +-
 .../plugins/plugin-chart-table/package.json        |  1 +
 .../plugin-chart-table/src/DataTable/DataTable.tsx |  6 +-
 .../SqlLab/components/AceEditorWrapper/index.tsx   |  3 +-
 .../src/SqlLab/components/ResultSet/index.tsx      |  2 +-
 .../src/components/DropdownContainer/index.tsx     |  3 +-
 .../src/components/FaveStar/index.tsx              |  3 +-
 .../src/components/FlashProvider/index.tsx         |  2 +-
 .../src/components/ListView/CrossLinks.tsx         |  3 +-
 .../ReportModal/HeaderReportDropdown/index.tsx     |  2 +-
 .../src/components/Select/CustomTag.tsx            |  3 +-
 .../src/components/TruncatedList/index.tsx         |  3 +-
 .../DashboardBuilder/DashboardBuilder.tsx          |  2 +-
 .../DashboardBuilder/DashboardContainer.tsx        |  2 +-
 .../dashboard/components/FiltersBadge/index.tsx    |  3 +-
 .../FilterBar/CrossFilters/CrossFilterTag.tsx      |  9 ++-
 .../FilterBar/CrossFilters/CrossFilterTitle.tsx    |  9 ++-
 .../FilterBar/FilterControls/FilterControl.tsx     |  3 +-
 .../FilterBar/FilterControls/FilterDivider.tsx     |  8 ++-
 .../components/nativeFilters/FilterBar/index.tsx   |  2 +-
 .../nativeFilters/FilterCard/DependenciesRow.tsx   |  3 +-
 .../nativeFilters/FilterCard/NameRow.tsx           |  3 +-
 .../nativeFilters/FilterCard/ScopeRow.tsx          |  3 +-
 .../FiltersConfigForm/ColumnSelect.tsx             |  9 ++-
 .../FiltersConfigForm/FilterScope/FilterScope.tsx  |  8 ++-
 .../nativeFilters/FiltersConfigModal/state.ts      |  3 +-
 .../src/explore/components/Control.tsx             |  8 ++-
 .../explore/components/ControlPanelsContainer.tsx  |  2 +-
 .../components/ExploreViewContainer/index.jsx      | 14 +++--
 .../ConditionalFormattingControl.tsx               |  9 ++-
 .../controls/DateFilterControl/DateFilterLabel.tsx |  2 +-
 .../controls/MetricControl/MetricsControl.jsx      |  3 +-
 52 files changed, 158 insertions(+), 54 deletions(-)

diff --git a/superset-frontend/package-lock.json b/superset-frontend/package-lock.json
index 76d74c18cb..0eff1db60e 100644
--- a/superset-frontend/package-lock.json
+++ b/superset-frontend/package-lock.json
@@ -59913,6 +59913,7 @@
       "license": "Apache-2.0",
       "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",
@@ -59966,6 +59967,50 @@
         "tinycolor2": "*"
       }
     },
+    "packages/superset-ui-core/node_modules/@testing-library/react-hooks": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/@testing-library/react-hooks/-/react-hooks-8.0.1.tgz",
+      "integrity": "sha512-Aqhl2IVmLt8IovEVarNDFuJDVWVvhnr9/GCU6UUnrYXwgDFF9h2L2o2P9KBni1AST5sT6riAyoukFLyjQUgD/g==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "react-error-boundary": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.9.0 || ^17.0.0",
+        "react": "^16.9.0 || ^17.0.0",
+        "react-dom": "^16.9.0 || ^17.0.0",
+        "react-test-renderer": "^16.9.0 || ^17.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        },
+        "react-test-renderer": {
+          "optional": true
+        }
+      }
+    },
+    "packages/superset-ui-core/node_modules/@testing-library/react-hooks/node_modules/react-error-boundary": {
+      "version": "3.1.4",
+      "resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-3.1.4.tgz",
+      "integrity": "sha512-uM9uPzZJTF6wRQORmSrvOIgt4lJ9MC1sNgEOj2XGsDTRE4kmpWxg7ENK9EWNKJRMAOY9z0MuF4yIfl6gp4sotA==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5"
+      },
+      "engines": {
+        "node": ">=10",
+        "npm": ">=6"
+      },
+      "peerDependencies": {
+        "react": ">=16.13.1"
+      }
+    },
     "packages/superset-ui-core/node_modules/@types/d3-time": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.0.tgz",
@@ -61393,6 +61438,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",
@@ -76220,6 +76266,7 @@
       "requires": {
         "@babel/runtime": "^7.1.2",
         "@emotion/styled": "^11.3.0",
+        "@testing-library/react-hooks": "*",
         "@types/d3-format": "^1.3.0",
         "@types/d3-interpolate": "^1.3.1",
         "@types/d3-scale": "^2.1.1",
@@ -76259,6 +76306,25 @@
         "whatwg-fetch": "^3.0.0"
       },
       "dependencies": {
+        "@testing-library/react-hooks": {
+          "version": "8.0.1",
+          "resolved": "https://registry.npmjs.org/@testing-library/react-hooks/-/react-hooks-8.0.1.tgz",
+          "integrity": "sha512-Aqhl2IVmLt8IovEVarNDFuJDVWVvhnr9/GCU6UUnrYXwgDFF9h2L2o2P9KBni1AST5sT6riAyoukFLyjQUgD/g==",
+          "requires": {
+            "@babel/runtime": "^7.12.5",
+            "react-error-boundary": "^3.1.0"
+          },
+          "dependencies": {
+            "react-error-boundary": {
+              "version": "3.1.4",
+              "resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-3.1.4.tgz",
+              "integrity": "sha512-uM9uPzZJTF6wRQORmSrvOIgt4lJ9MC1sNgEOj2XGsDTRE4kmpWxg7ENK9EWNKJRMAOY9z0MuF4yIfl6gp4sotA==",
+              "requires": {
+                "@babel/runtime": "^7.12.5"
+              }
+            }
+          }
+        },
         "@types/d3-time": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.0.tgz",
@@ -77259,6 +77325,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",
diff --git a/superset-frontend/packages/superset-ui-core/package.json b/superset-frontend/packages/superset-ui-core/package.json
index 2ccb9877fd..6107945900 100644
--- a/superset-frontend/packages/superset-ui-core/package.json
+++ b/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",
diff --git a/superset-frontend/src/hooks/useComponentDidUpdate/index.ts b/superset-frontend/packages/superset-ui-core/src/hooks/index.ts
similarity index 82%
copy from superset-frontend/src/hooks/useComponentDidUpdate/index.ts
copy to superset-frontend/packages/superset-ui-core/src/hooks/index.ts
index fa0105807c..b27759b492 100644
--- a/superset-frontend/src/hooks/useComponentDidUpdate/index.ts
+++ b/superset-frontend/packages/superset-ui-core/src/hooks/index.ts
@@ -17,4 +17,9 @@
  * under the License.
  */
 
+export * from './useChangeEffect';
+export * from './useComponentDidMount';
 export * from './useComponentDidUpdate';
+export * from './useElementOnScreen';
+export * from './usePrevious';
+export * from './useTruncation';
diff --git a/superset-frontend/src/hooks/useChangeEffect/index.ts b/superset-frontend/packages/superset-ui-core/src/hooks/useChangeEffect/index.ts
similarity index 100%
rename from superset-frontend/src/hooks/useChangeEffect/index.ts
rename to superset-frontend/packages/superset-ui-core/src/hooks/useChangeEffect/index.ts
diff --git a/superset-frontend/src/hooks/useChangeEffect/useChangeEffect.test.ts b/superset-frontend/packages/superset-ui-core/src/hooks/useChangeEffect/useChangeEffect.test.ts
similarity index 100%
rename from superset-frontend/src/hooks/useChangeEffect/useChangeEffect.test.ts
rename to superset-frontend/packages/superset-ui-core/src/hooks/useChangeEffect/useChangeEffect.test.ts
diff --git a/superset-frontend/src/hooks/useChangeEffect/useChangeEffect.ts b/superset-frontend/packages/superset-ui-core/src/hooks/useChangeEffect/useChangeEffect.ts
similarity index 100%
rename from superset-frontend/src/hooks/useChangeEffect/useChangeEffect.ts
rename to superset-frontend/packages/superset-ui-core/src/hooks/useChangeEffect/useChangeEffect.ts
diff --git a/superset-frontend/src/hooks/useComponentDidMount/index.ts b/superset-frontend/packages/superset-ui-core/src/hooks/useComponentDidMount/index.ts
similarity index 100%
rename from superset-frontend/src/hooks/useComponentDidMount/index.ts
rename to superset-frontend/packages/superset-ui-core/src/hooks/useComponentDidMount/index.ts
diff --git a/superset-frontend/src/hooks/useComponentDidMount/useComponentDidMount.test.ts b/superset-frontend/packages/superset-ui-core/src/hooks/useComponentDidMount/useComponentDidMount.test.ts
similarity index 100%
rename from superset-frontend/src/hooks/useComponentDidMount/useComponentDidMount.test.ts
rename to superset-frontend/packages/superset-ui-core/src/hooks/useComponentDidMount/useComponentDidMount.test.ts
diff --git a/superset-frontend/src/hooks/useComponentDidMount/useComponentDidMount.ts b/superset-frontend/packages/superset-ui-core/src/hooks/useComponentDidMount/useComponentDidMount.ts
similarity index 100%
rename from superset-frontend/src/hooks/useComponentDidMount/useComponentDidMount.ts
rename to superset-frontend/packages/superset-ui-core/src/hooks/useComponentDidMount/useComponentDidMount.ts
diff --git a/superset-frontend/src/hooks/useComponentDidUpdate/index.ts b/superset-frontend/packages/superset-ui-core/src/hooks/useComponentDidUpdate/index.ts
similarity index 100%
rename from superset-frontend/src/hooks/useComponentDidUpdate/index.ts
rename to superset-frontend/packages/superset-ui-core/src/hooks/useComponentDidUpdate/index.ts
diff --git a/superset-frontend/src/hooks/useComponentDidUpdate/useComponentDidUpdate.test.ts b/superset-frontend/packages/superset-ui-core/src/hooks/useComponentDidUpdate/useComponentDidUpdate.test.ts
similarity index 100%
rename from superset-frontend/src/hooks/useComponentDidUpdate/useComponentDidUpdate.test.ts
rename to superset-frontend/packages/superset-ui-core/src/hooks/useComponentDidUpdate/useComponentDidUpdate.test.ts
diff --git a/superset-frontend/src/hooks/useComponentDidUpdate/useComponentDidUpdate.ts b/superset-frontend/packages/superset-ui-core/src/hooks/useComponentDidUpdate/useComponentDidUpdate.ts
similarity index 100%
rename from superset-frontend/src/hooks/useComponentDidUpdate/useComponentDidUpdate.ts
rename to superset-frontend/packages/superset-ui-core/src/hooks/useComponentDidUpdate/useComponentDidUpdate.ts
diff --git a/superset-frontend/src/hooks/useElementOnScreen/index.ts b/superset-frontend/packages/superset-ui-core/src/hooks/useElementOnScreen/index.ts
similarity index 100%
rename from superset-frontend/src/hooks/useElementOnScreen/index.ts
rename to superset-frontend/packages/superset-ui-core/src/hooks/useElementOnScreen/index.ts
diff --git a/superset-frontend/src/hooks/usePrevious/index.ts b/superset-frontend/packages/superset-ui-core/src/hooks/usePrevious/index.ts
similarity index 100%
rename from superset-frontend/src/hooks/usePrevious/index.ts
rename to superset-frontend/packages/superset-ui-core/src/hooks/usePrevious/index.ts
diff --git a/superset-frontend/src/hooks/usePrevious/usePrevious.test.ts b/superset-frontend/packages/superset-ui-core/src/hooks/usePrevious/usePrevious.test.ts
similarity index 100%
rename from superset-frontend/src/hooks/usePrevious/usePrevious.test.ts
rename to superset-frontend/packages/superset-ui-core/src/hooks/usePrevious/usePrevious.test.ts
diff --git a/superset-frontend/src/hooks/usePrevious/usePrevious.ts b/superset-frontend/packages/superset-ui-core/src/hooks/usePrevious/usePrevious.ts
similarity index 100%
rename from superset-frontend/src/hooks/usePrevious/usePrevious.ts
rename to superset-frontend/packages/superset-ui-core/src/hooks/usePrevious/usePrevious.ts
diff --git a/superset-frontend/src/hooks/useTruncation/index.ts b/superset-frontend/packages/superset-ui-core/src/hooks/useTruncation/index.ts
similarity index 100%
rename from superset-frontend/src/hooks/useTruncation/index.ts
rename to superset-frontend/packages/superset-ui-core/src/hooks/useTruncation/index.ts
diff --git a/superset-frontend/src/hooks/useTruncation/useCSSTextTruncation.ts b/superset-frontend/packages/superset-ui-core/src/hooks/useTruncation/useCSSTextTruncation.ts
similarity index 100%
rename from superset-frontend/src/hooks/useTruncation/useCSSTextTruncation.ts
rename to superset-frontend/packages/superset-ui-core/src/hooks/useTruncation/useCSSTextTruncation.ts
diff --git a/superset-frontend/src/hooks/useTruncation/useChildElementTruncation.ts b/superset-frontend/packages/superset-ui-core/src/hooks/useTruncation/useChildElementTruncation.ts
similarity index 100%
rename from superset-frontend/src/hooks/useTruncation/useChildElementTruncation.ts
rename to superset-frontend/packages/superset-ui-core/src/hooks/useTruncation/useChildElementTruncation.ts
diff --git a/superset-frontend/packages/superset-ui-core/src/index.ts b/superset-frontend/packages/superset-ui-core/src/index.ts
index 4d3c4b7c95..5ee5acbce4 100644
--- a/superset-frontend/packages/superset-ui-core/src/index.ts
+++ b/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';
diff --git a/superset-frontend/packages/superset-ui-core/tsconfig.json b/superset-frontend/packages/superset-ui-core/tsconfig.json
index d345ae88fc..9d843075b5 100644
--- a/superset-frontend/packages/superset-ui-core/tsconfig.json
+++ b/superset-frontend/packages/superset-ui-core/tsconfig.json
@@ -13,6 +13,6 @@
     "src/**/*",
     "types/**/*",
     "../../types/**/*"
-  ],
+, "../../src/hooks/apiResources", "../../src/SqlLab/hooks/useQueryEditor", "../../src/hooks/useTabId.ts"  ],
   "references": []
 }
diff --git a/superset-frontend/plugins/plugin-chart-table/package.json b/superset-frontend/plugins/plugin-chart-table/package.json
index 293413805d..738c143e9d 100644
--- a/superset-frontend/plugins/plugin-chart-table/package.json
+++ b/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",
diff --git a/superset-frontend/plugins/plugin-chart-table/src/DataTable/DataTable.tsx b/superset-frontend/plugins/plugin-chart-table/src/DataTable/DataTable.tsx
index 85580e7b63..6c5123806f 100644
--- a/superset-frontend/plugins/plugin-chart-table/src/DataTable/DataTable.tsx
+++ b/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,
diff --git a/superset-frontend/src/SqlLab/components/AceEditorWrapper/index.tsx b/superset-frontend/src/SqlLab/components/AceEditorWrapper/index.tsx
index 0dd3385ea5..32d17340fb 100644
--- a/superset-frontend/src/SqlLab/components/AceEditorWrapper/index.tsx
+++ b/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 {
diff --git a/superset-frontend/src/SqlLab/components/ResultSet/index.tsx b/superset-frontend/src/SqlLab/components/ResultSet/index.tsx
index fad6c98bc9..f41d27650b 100644
--- a/superset-frontend/src/SqlLab/components/ResultSet/index.tsx
+++ b/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,
diff --git a/superset-frontend/src/components/DropdownContainer/index.tsx b/superset-frontend/src/components/DropdownContainer/index.tsx
index c90372973e..f2504c66ff 100644
--- a/superset-frontend/src/components/DropdownContainer/index.tsx
+++ b/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';
diff --git a/superset-frontend/src/components/FaveStar/index.tsx b/superset-frontend/src/components/FaveStar/index.tsx
index 8a6f4eca1f..c7b605243a 100644
--- a/superset-frontend/src/components/FaveStar/index.tsx
+++ b/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 {
diff --git a/superset-frontend/src/components/FlashProvider/index.tsx b/superset-frontend/src/components/FlashProvider/index.tsx
index 5e00af5fc5..f2bef9cf57 100644
--- a/superset-frontend/src/components/FlashProvider/index.tsx
+++ b/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];
diff --git a/superset-frontend/src/components/ListView/CrossLinks.tsx b/superset-frontend/src/components/ListView/CrossLinks.tsx
index 653e97b06e..e315750674 100644
--- a/superset-frontend/src/components/ListView/CrossLinks.tsx
+++ b/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 = {
diff --git a/superset-frontend/src/components/ReportModal/HeaderReportDropdown/index.tsx b/superset-frontend/src/components/ReportModal/HeaderReportDropdown/index.tsx
index f7bb9ba55c..e8426641d6 100644
--- a/superset-frontend/src/components/ReportModal/HeaderReportDropdown/index.tsx
+++ b/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';
diff --git a/superset-frontend/src/components/Select/CustomTag.tsx b/superset-frontend/src/components/Select/CustomTag.tsx
index a7ffe10f6d..ce837706da 100644
--- a/superset-frontend/src/components/Select/CustomTag.tsx
+++ b/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';
diff --git a/superset-frontend/src/components/TruncatedList/index.tsx b/superset-frontend/src/components/TruncatedList/index.tsx
index 37d4fe0436..00e0acc0c3 100644
--- a/superset-frontend/src/components/TruncatedList/index.tsx
+++ b/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> = {
diff --git a/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx b/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx
index 99360801c5..3c64c2ef1e 100644
--- a/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx
+++ b/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,
diff --git a/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardContainer.tsx b/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardContainer.tsx
index 386d96266a..fc1570a975 100644
--- a/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardContainer.tsx
+++ b/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';
diff --git a/superset-frontend/src/dashboard/components/FiltersBadge/index.tsx b/superset-frontend/src/dashboard/components/FiltersBadge/index.tsx
index fb0718bf54..fe9acb8f8e 100644
--- a/superset-frontend/src/dashboard/components/FiltersBadge/index.tsx
+++ b/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';
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/CrossFilterTag.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/CrossFilterTag.tsx
index 3a1145c7db..d4b0789919 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/CrossFilterTag.tsx
+++ b/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';
 
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/CrossFilterTitle.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/CrossFilterTitle.tsx
index 70f0ad2cd9..9221bffe15 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/CrossFilterTitle.tsx
+++ b/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';
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControl.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControl.tsx
index 218603f74d..b7f2ba04f2 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControl.tsx
+++ b/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';
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterDivider.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterDivider.tsx
index e06a56ac7b..6efe2c4515 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterDivider.tsx
+++ b/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) => (
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/index.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/index.tsx
index d82c128bf8..5b2ce29326 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/index.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/index.tsx
@@ -27,9 +27,9 @@ import {
   DataMask,
   SLOW_DEBOUNCE,
   isNativeFilter,
+  usePrevious,
 } from '@superset-ui/core';
 import { useHistory } from 'react-router-dom';
-import { usePrevious } from 'src/hooks/usePrevious';
 import { updateDataMask, clearDataMask } from 'src/dataMask/actions';
 import { useImmer } from 'use-immer';
 import { isEmpty, isEqual, debounce } from 'lodash';
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/DependenciesRow.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/DependenciesRow.tsx
index 0d0907a6eb..253ce4649d 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/DependenciesRow.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/DependenciesRow.tsx
@@ -18,9 +18,8 @@
  */
 import React, { useCallback, useMemo, useRef } from 'react';
 import { useDispatch } from 'react-redux';
-import { css, t, useTheme } from '@superset-ui/core';
+import { css, t, useTheme, useTruncation } from '@superset-ui/core';
 import Icons from 'src/components/Icons';
-import { useTruncation } from 'src/hooks/useTruncation';
 import { setDirectPathToChild } from 'src/dashboard/actions/dashboardState';
 import {
   DependencyItem,
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/NameRow.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/NameRow.tsx
index 6c7e82b15d..c62255a68b 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/NameRow.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/NameRow.tsx
@@ -18,9 +18,8 @@
  */
 import React, { useRef } from 'react';
 import { useSelector } from 'react-redux';
-import { css, SupersetTheme, useTheme } from '@superset-ui/core';
+import { css, SupersetTheme, useTheme, useTruncation } from '@superset-ui/core';
 import Icons from 'src/components/Icons';
-import { useTruncation } from 'src/hooks/useTruncation';
 import { RootState } from 'src/dashboard/types';
 import { Row, FilterName, InternalRow } from './Styles';
 import { FilterCardRowProps } from './types';
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/ScopeRow.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/ScopeRow.tsx
index 0c07040891..ff5c1142a5 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/ScopeRow.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/ScopeRow.tsx
@@ -17,8 +17,7 @@
  * under the License.
  */
 import React, { useMemo, useRef } from 'react';
-import { t } from '@superset-ui/core';
-import { useTruncation } from 'src/hooks/useTruncation';
+import { t, useTruncation } from '@superset-ui/core';
 import { useFilterScope } from './useFilterScope';
 import {
   Row,
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/ColumnSelect.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/ColumnSelect.tsx
index 41c591ade3..800fff35fd 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/ColumnSelect.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/ColumnSelect.tsx
@@ -17,8 +17,13 @@
  * under the License.
  */
 import React, { useCallback, useState, useMemo, useEffect } from 'react';
-import { Column, ensureIsArray, SupersetClient, t } from '@superset-ui/core';
-import { useChangeEffect } from 'src/hooks/useChangeEffect';
+import {
+  Column,
+  ensureIsArray,
+  SupersetClient,
+  t,
+  useChangeEffect,
+} from '@superset-ui/core';
 import { Select, FormInstance } from 'src/components';
 import { useToasts } from 'src/components/MessageToasts/withToasts';
 import { getClientErrorObject } from 'src/utils/getClientErrorObject';
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FilterScope/FilterScope.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FilterScope/FilterScope.tsx
index 059e202905..ce1a510e20 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FilterScope/FilterScope.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FilterScope/FilterScope.tsx
@@ -18,10 +18,14 @@
  */
 
 import React, { FC, useCallback, useState } from 'react';
-import { NativeFilterScope, styled, t } from '@superset-ui/core';
+import {
+  NativeFilterScope,
+  styled,
+  t,
+  useComponentDidUpdate,
+} from '@superset-ui/core';
 import { Radio } from 'src/components/Radio';
 import { AntdForm, Typography } from 'src/components';
-import { useComponentDidUpdate } from 'src/hooks/useComponentDidUpdate/useComponentDidUpdate';
 import { ScopingType } from './types';
 import ScopingTree from './ScopingTree';
 import { getDefaultScopeValue, isScopingAll } from './utils';
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/state.ts b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/state.ts
index e9b9ec17c6..65c4af3b04 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/state.ts
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/state.ts
@@ -1,6 +1,5 @@
 import { useEffect } from 'react';
-import { usePrevious } from 'src/hooks/usePrevious';
-import { NativeFilterType } from '@superset-ui/core';
+import { NativeFilterType, usePrevious } from '@superset-ui/core';
 import { FilterRemoval } from './types';
 
 /**
diff --git a/superset-frontend/src/explore/components/Control.tsx b/superset-frontend/src/explore/components/Control.tsx
index 5e202fdf10..b7a1587dd8 100644
--- a/superset-frontend/src/explore/components/Control.tsx
+++ b/superset-frontend/src/explore/components/Control.tsx
@@ -22,8 +22,12 @@ import {
   ControlType,
   ControlComponentProps as BaseControlComponentProps,
 } from '@superset-ui/chart-controls';
-import { styled, JsonValue, QueryFormData } from '@superset-ui/core';
-import { usePrevious } from 'src/hooks/usePrevious';
+import {
+  styled,
+  JsonValue,
+  QueryFormData,
+  usePrevious,
+} from '@superset-ui/core';
 import ErrorBoundary from 'src/components/ErrorBoundary';
 import { ExploreActions } from 'src/explore/actions/exploreActions';
 import controlMap from './controls';
diff --git a/superset-frontend/src/explore/components/ControlPanelsContainer.tsx b/superset-frontend/src/explore/components/ControlPanelsContainer.tsx
index 8a456619f4..7d0ceea50c 100644
--- a/superset-frontend/src/explore/components/ControlPanelsContainer.tsx
+++ b/superset-frontend/src/explore/components/ControlPanelsContainer.tsx
@@ -39,6 +39,7 @@ import {
   isDefined,
   JsonValue,
   NO_TIME_RANGE,
+  usePrevious,
 } from '@superset-ui/core';
 import {
   ControlPanelSectionConfig,
@@ -59,7 +60,6 @@ import { PluginContext } from 'src/components/DynamicPlugins';
 import Loading from 'src/components/Loading';
 import Modal from 'src/components/Modal';
 
-import { usePrevious } from 'src/hooks/usePrevious';
 import { getSectionsToRender } from 'src/explore/controlUtils';
 import { ExploreActions } from 'src/explore/actions/exploreActions';
 import { ChartState, ExplorePageState } from 'src/explore/types';
diff --git a/superset-frontend/src/explore/components/ExploreViewContainer/index.jsx b/superset-frontend/src/explore/components/ExploreViewContainer/index.jsx
index 66eed14a6c..0550ba2b29 100644
--- a/superset-frontend/src/explore/components/ExploreViewContainer/index.jsx
+++ b/superset-frontend/src/explore/components/ExploreViewContainer/index.jsx
@@ -21,15 +21,21 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
-import { styled, t, css, useTheme, logging } from '@superset-ui/core';
+import {
+  styled,
+  t,
+  css,
+  useTheme,
+  logging,
+  useChangeEffect,
+  useComponentDidMount,
+  usePrevious,
+} from '@superset-ui/core';
 import { debounce, pick } from 'lodash';
 import { Resizable } from 're-resizable';
-import { useChangeEffect } from 'src/hooks/useChangeEffect';
 import { usePluginContext } from 'src/components/DynamicPlugins';
 import { Global } from '@emotion/react';
 import { Tooltip } from 'src/components/Tooltip';
-import { usePrevious } from 'src/hooks/usePrevious';
-import { useComponentDidMount } from 'src/hooks/useComponentDidMount';
 import Icons from 'src/components/Icons';
 import {
   getItem,
diff --git a/superset-frontend/src/explore/components/controls/ConditionalFormattingControl/ConditionalFormattingControl.tsx b/superset-frontend/src/explore/components/controls/ConditionalFormattingControl/ConditionalFormattingControl.tsx
index 478a395448..8fb9b27453 100644
--- a/superset-frontend/src/explore/components/controls/ConditionalFormattingControl/ConditionalFormattingControl.tsx
+++ b/superset-frontend/src/explore/components/controls/ConditionalFormattingControl/ConditionalFormattingControl.tsx
@@ -17,10 +17,15 @@
  * under the License.
  */
 import React, { useCallback, useEffect, useState } from 'react';
-import { styled, css, t, useTheme } from '@superset-ui/core';
+import {
+  styled,
+  css,
+  t,
+  useTheme,
+  useComponentDidUpdate,
+} from '@superset-ui/core';
 import Icons from 'src/components/Icons';
 import ControlHeader from 'src/explore/components/ControlHeader';
-import { useComponentDidUpdate } from 'src/hooks/useComponentDidUpdate';
 import { FormattingPopover } from './FormattingPopover';
 import {
   COMPARATOR,
diff --git a/superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterLabel.tsx b/superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterLabel.tsx
index 55adbfe44e..a3d44eb570 100644
--- a/superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterLabel.tsx
+++ b/superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterLabel.tsx
@@ -24,6 +24,7 @@ import {
   useTheme,
   NO_TIME_RANGE,
   SupersetTheme,
+  useCSSTextTruncation,
 } from '@superset-ui/core';
 import Button from 'src/components/Button';
 import ControlHeader from 'src/explore/components/ControlHeader';
@@ -35,7 +36,6 @@ import { Tooltip } from 'src/components/Tooltip';
 import { useDebouncedEffect } from 'src/explore/exploreUtils';
 import { SLOW_DEBOUNCE } from 'src/constants';
 import { noOp } from 'src/utils/common';
-import { useCSSTextTruncation } from 'src/hooks/useTruncation';
 import ControlPopover from '../ControlPopover/ControlPopover';
 
 import { DateFilterControlProps, FrameType } from './types';
diff --git a/superset-frontend/src/explore/components/controls/MetricControl/MetricsControl.jsx b/superset-frontend/src/explore/components/controls/MetricControl/MetricsControl.jsx
index 617be7112b..62005910cb 100644
--- a/superset-frontend/src/explore/components/controls/MetricControl/MetricsControl.jsx
+++ b/superset-frontend/src/explore/components/controls/MetricControl/MetricsControl.jsx
@@ -18,7 +18,7 @@
  */
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
-import { ensureIsArray, t, useTheme } from '@superset-ui/core';
+import { ensureIsArray, t, useTheme, usePrevious } from '@superset-ui/core';
 import { isEqual } from 'lodash';
 import ControlHeader from 'src/explore/components/ControlHeader';
 import Icons from 'src/components/Icons';
@@ -28,7 +28,6 @@ import {
   HeaderContainer,
   LabelsContainer,
 } from 'src/explore/components/controls/OptionControls';
-import { usePrevious } from 'src/hooks/usePrevious';
 import columnType from './columnType';
 import MetricDefinitionValue from './MetricDefinitionValue';
 import AdhocMetric from './AdhocMetric';