feat(fe): migrate to readily tree-shakeable es-toolkit

superset-frontend/package.json

@@ -150,6 +150,7 @@
     "dom-to-image-more": "^3.7.2",
     "dom-to-pdf": "^0.3.2",
     "echarts": "^5.6.0",
+    "es-toolkit": "^1.44.0",
     "eslint-plugin-i18n-strings": "file:eslint-rules/eslint-plugin-i18n-strings",
     "fast-glob": "^3.3.2",
     "fs-extra": "^11.3.3",

superset-frontend/packages/superset-core/src/ui/theme/Theme.tsx

@@ -25,7 +25,7 @@ import {
   CacheProvider as EmotionCacheProvider,
 } from '@emotion/react';
 import createCache from '@emotion/cache';
-import { noop, mergeWith } from 'lodash';
+import { mergeWith } from 'es-toolkit/compat';
 import { GlobalStyles } from './GlobalStyles';
 import {
   AntdThemeConfig,
@@ -161,7 +161,7 @@ export class Theme {
     antdConfig: AntdThemeConfig,
     emotionCache: any,
   ): void {
-    noop(theme, antdConfig, emotionCache);
+    () => ({ theme, antdConfig, emotionCache });
     // Overridden at runtime by SupersetThemeProvider using setThemeState
   }
 

superset-frontend/packages/superset-ui-chart-controls/src/components/CertifiedIconWithTooltip.tsx

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { kebabCase } from 'lodash';
+import { kebabCase } from 'es-toolkit';
 import { t } from '@apache-superset/core';
 import { useTheme, styled } from '@apache-superset/core/ui';
 import { Tooltip } from '@superset-ui/core/components';

superset-frontend/packages/superset-ui-chart-controls/src/operators/sortOperator.ts

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitationsxw
  * under the License.
  */
-import { isEmpty } from 'lodash';
+import { isEmpty } from 'es-toolkit/compat';
 import {
   ensureIsArray,
   getMetricLabel,

superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/sharedControls.tsx

@@ -32,7 +32,7 @@
  * here's a list of the keys that are common to all controls, and as a result define the
  * control interface.
  */
-import { isEmpty } from 'lodash';
+import { isEmpty } from 'es-toolkit/compat';
 import { t } from '@apache-superset/core';
 import {
   getCategoricalSchemeRegistry,

superset-frontend/packages/superset-ui-chart-controls/test/operators/histogramOperator.test.ts

@@ -18,7 +18,7 @@
  */
 import { histogramOperator } from '@superset-ui/chart-controls';
 import { SqlaFormData, VizType } from '@superset-ui/core';
-import { omit } from 'lodash';
+import { omit } from 'es-toolkit';
 
 const formData: SqlaFormData = {
   bins: 5,

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

@@ -45,7 +45,7 @@
     "fetch-retry": "^6.0.0",
     "handlebars": "^4.7.8",
     "jed": "^1.1.1",
-    "lodash": "^4.17.23",
+    "es-toolkit": "^1.44.0",
     "math-expression-evaluator": "^2.0.7",
     "pretty-ms": "^9.3.0",
     "re-resizable": "^6.11.2",

superset-frontend/packages/superset-ui-core/src/color/CategoricalColorNamespace.ts

@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import { cloneDeep } from 'lodash';
+import { cloneDeep } from 'es-toolkit';
 import CategoricalColorScale from './CategoricalColorScale';
 import { ColorsLookup } from './types';
 import getCategoricalSchemeRegistry from './CategoricalSchemeRegistrySingleton';

superset-frontend/packages/superset-ui-core/src/components/DropdownButton/index.tsx

@@ -17,7 +17,7 @@
  * under the License.
  */
 import { Dropdown } from 'antd';
-import { kebabCase } from 'lodash';
+import { kebabCase } from 'es-toolkit';
 import { css, useTheme } from '@apache-superset/core/ui';
 import { Tooltip } from '../Tooltip';
 import type { DropdownButtonProps } from './types';

superset-frontend/packages/superset-ui-core/src/components/DropdownContainer/DropdownContainer.stories.tsx

@@ -17,7 +17,7 @@
  * under the License.
  */
 import { useRef, useCallback, useState } from 'react';
-import { isEqual } from 'lodash';
+import { isEqual } from 'es-toolkit';
 import { css } from '@apache-superset/core/ui';
 import { Button } from '../Button';
 import { Select } from '../Select';

superset-frontend/packages/superset-ui-core/src/components/InfoTooltip/index.tsx

@@ -18,7 +18,7 @@
  */
 import { KeyboardEvent, useMemo } from 'react';
 import { SerializedStyles, CSSObject } from '@emotion/react';
-import { kebabCase } from 'lodash';
+import { kebabCase } from 'es-toolkit';
 import { t } from '@apache-superset/core';
 import { css, useTheme, getFontSize } from '@apache-superset/core/ui';
 import {
@@ -118,7 +118,7 @@ export const InfoTooltip = ({
 
   return (
     <Tooltip
-      id={`${kebabCase(label) || Math.floor(Math.random() * 10000)}-tooltip`}
+      id={`${kebabCase(label ?? '') || Math.floor(Math.random() * 10000)}-tooltip`}
       title={tooltip}
       placement={placement}
     >

superset-frontend/packages/superset-ui-core/src/components/MetadataBar/MetadataBar.tsx

@@ -18,7 +18,7 @@
  */
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { useResizeDetector } from 'react-resize-detector';
-import { uniqWith } from 'lodash';
+import { uniqWith } from 'es-toolkit';
 import { styled } from '@apache-superset/core/ui';
 import { Tooltip } from '../Tooltip';
 import { TooltipPlacement } from '../Tooltip/types';

superset-frontend/packages/superset-ui-core/src/components/Modal/Modal.tsx

@@ -17,7 +17,7 @@
  * under the License.
  */
 import { isValidElement, cloneElement, useMemo, useRef, useState } from 'react';
-import { isNil } from 'lodash';
+import { isNil } from 'es-toolkit';
 import { t } from '@apache-superset/core';
 import { css, styled, useTheme } from '@apache-superset/core/ui';
 import { Modal as AntdModal, ModalProps as AntdModalProps } from 'antd';

superset-frontend/packages/superset-ui-core/src/components/SafeMarkdown/SafeMarkdown.tsx

@@ -22,7 +22,7 @@ import rehypeSanitize, { defaultSchema } from 'rehype-sanitize';
 // remark-gfm v4+ requires react-markdown v9+, which requires React 18.
 // Currently pinned to v3.0.1 for compatibility with react-markdown v8 and React 17.
 import remarkGfm from 'remark-gfm';
-import { mergeWith } from 'lodash';
+import { mergeWith } from 'es-toolkit/compat';
 import { FeatureFlag, isFeatureEnabled } from '../../utils';
 
 interface SafeMarkdownProps {

superset-frontend/packages/superset-ui-core/src/components/Select/AsyncSelect.tsx

@@ -41,7 +41,7 @@ import {
   LabeledValue as AntdLabeledValue,
   RefSelectProps,
 } from 'antd/es/select';
-import { debounce, isEqual, uniq } from 'lodash';
+import { debounce, isEqual, uniq } from 'es-toolkit';
 import { Constants, Icons } from '@superset-ui/core/components';
 import { Space } from '../Space';
 import {

superset-frontend/packages/superset-ui-core/src/components/Select/Select.stories.tsx

@@ -17,7 +17,6 @@
  * under the License.
  */
 import { StoryObj } from '@storybook/react';
-import { noop } from 'lodash';
 import { SelectOptionsType, SelectProps } from './types';
 import { Select } from '.';
 
@@ -95,7 +94,7 @@ export const InteractiveSelect: StoryObj = {
     optionsCount,
     ...args
   }: SelectProps & { header: string; optionsCount: number }) => {
-    noop(header);
+    () => header;
     return (
       <div
         style={{

superset-frontend/packages/superset-ui-core/src/components/Select/Select.tsx

@@ -37,7 +37,7 @@ import {
   LabeledValue as AntdLabeledValue,
   RefSelectProps,
 } from 'antd/es/select';
-import { debounce, isEqual, uniq } from 'lodash';
+import { debounce, isEqual, uniq } from 'es-toolkit';
 import {
   dropDownRenderHelper,
   getOption,

superset-frontend/packages/superset-ui-core/src/components/TableView/TableView.tsx

@@ -17,7 +17,7 @@
  * under the License.
  */
 import { memo, useEffect, useRef, useMemo, useCallback } from 'react';
-import { isEqual } from 'lodash';
+import { isEqual } from 'es-toolkit';
 import { styled } from '@apache-superset/core/ui';
 import { useFilters, usePagination, useSortBy, useTable } from 'react-table';
 import { Empty } from '@superset-ui/core/components';

superset-frontend/packages/superset-ui-core/src/connection/callApi/parseResponse.ts

@@ -17,7 +17,7 @@
  * under the License.
  */
 import _JSONbig from 'json-bigint';
-import { cloneDeepWith } from 'lodash';
+import { cloneDeepWith } from 'es-toolkit';
 
 import { ParseMethod, TextResponse, JsonResponse } from '../types';
 

superset-frontend/packages/superset-ui-core/src/query/normalizeOrderBy.ts

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { isEmpty } from 'lodash';
+import { isEmpty } from 'es-toolkit/compat';
 
 import { QueryObject } from './types';
 

superset-frontend/packages/superset-ui-core/src/query/normalizeTimeColumn.ts

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { omit } from 'lodash';
+import { omit } from 'es-toolkit';
 
 import {
   AdhocColumn,

superset-frontend/packages/superset-ui-core/src/time-comparison/fetchTimeRange.ts

@@ -17,7 +17,6 @@
  * under the License.
  */
 import rison from 'rison';
-import { isEmpty } from 'lodash';
 import {
   SupersetClient,
   getClientErrorObject,
@@ -67,7 +66,7 @@ export const fetchTimeRange = async (
 ) => {
   let query;
   let endpoint;
-  if (!isEmpty(shifts)) {
+  if (shifts && shifts.length > 0) {
     const timeRanges = ensureIsArray(shifts).map(shift => ({
       timeRange,
       shift,
@@ -80,7 +79,7 @@ export const fetchTimeRange = async (
   }
   try {
     const response = await SupersetClient.get({ endpoint });
-    if (isEmpty(shifts)) {
+    if (!shifts || shifts.length === 0) {
       const timeRangeString = buildTimeRangeString(
         response?.json?.result[0]?.since || '',
         response?.json?.result[0]?.until || '',

superset-frontend/packages/superset-ui-core/src/time-comparison/getTimeOffset.ts

@@ -16,7 +16,6 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { isEmpty } from 'lodash';
 import { ensureIsArray } from '../utils';
 import { customTimeRangeDecode } from './customTimeRangeDecode';
 
@@ -116,7 +115,7 @@ export const parseDttmToDate = (
   }
   const parts = dttm?.split('-');
   let parsed: Date | null = null;
-  if (parts && !isEmpty(parts)) {
+  if (parts && parts.length > 0) {
     if (parts.length === 1) {
       parsed = new Date(Date.UTC(parseInt(parts[0], 10), 0));
     } else if (parts.length === 2) {

superset-frontend/packages/superset-ui-core/src/utils/convertKeysToCamelCase.ts

@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import { camelCase, isPlainObject, mapKeys } from 'lodash';
+import { camelCase, isPlainObject, mapKeys } from 'es-toolkit';
 
 export default function convertKeysToCamelCase<T>(object: T) {
   if (object === null || object === undefined) {
@@ -26,7 +26,7 @@ export default function convertKeysToCamelCase<T>(object: T) {
   if (isPlainObject(object)) {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     return mapKeys(object as { [key: string]: any }, (_, k) =>
-      camelCase(k),
+      camelCase(String(k)),
     ) as T;
   }
   throw new Error(`Cannot convert input that is not a plain object: ${object}`);

superset-frontend/packages/superset-ui-core/src/utils/merge.ts

@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import { mergeWith } from 'lodash';
+import { mergeWith } from 'es-toolkit/compat';
 
 /**
  * Merges objects using lodash.mergeWith, but replaces arrays instead of concatenating them.

superset-frontend/plugins/legacy-preset-chart-deckgl/src/DeckGLContainer.tsx

@@ -32,7 +32,7 @@ import {
   isValidElement,
   useRef,
 } from 'react';
-import { isEqual } from 'lodash';
+import { isEqual } from 'es-toolkit';
 import { StaticMap } from 'react-map-gl';
 import DeckGL from '@deck.gl/react';
 import type { Layer } from '@deck.gl/core';

superset-frontend/plugins/legacy-preset-chart-deckgl/src/Multi/Multi.tsx

@@ -21,7 +21,7 @@
  */
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useSelector } from 'react-redux';
-import { isEqual } from 'lodash';
+import { isEqual } from 'es-toolkit';
 import { createSelector } from '@reduxjs/toolkit';
 import {
   AdhocFilter,

superset-frontend/plugins/legacy-preset-chart-deckgl/src/factory.tsx

@@ -17,7 +17,7 @@
  * under the License.
  */
 import { memo, useCallback, useEffect, useRef, useState } from 'react';
-import { isEqual } from 'lodash';
+import { isEqual } from 'es-toolkit';
 import type { Layer } from '@deck.gl/core';
 import {
   Datasource,

superset-frontend/plugins/legacy-preset-chart-deckgl/src/utilities/HandlebarsRenderer.tsx

@@ -22,7 +22,7 @@ import { sanitizeHtml } from '@superset-ui/core';
 import { styled } from '@apache-superset/core/ui';
 import { extendedDayjs as dayjs } from '@superset-ui/core/utils/dates';
 import Handlebars from 'handlebars';
-import { isPlainObject } from 'lodash';
+import { isPlainObject } from 'es-toolkit';
 
 export interface HandlebarsRendererProps {
   templateSource: string;

superset-frontend/plugins/legacy-preset-chart-deckgl/src/utilities/TooltipTemplateControl.tsx

@@ -18,7 +18,7 @@
  */
 
 import { useCallback } from 'react';
-import { debounce } from 'lodash';
+import { debounce } from 'es-toolkit';
 import { t } from '@apache-superset/core';
 import { useTheme } from '@apache-superset/core/ui';
 import { InfoTooltip, Constants } from '@superset-ui/core/components';

superset-frontend/plugins/legacy-preset-chart-nvd3/src/NVD3Vis.js

@@ -17,7 +17,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { kebabCase, throttle } from 'lodash';
+import { kebabCase, throttle } from 'es-toolkit';
 import d3 from 'd3';
 import utc from 'dayjs/plugin/utc';
 import nv from 'nvd3-fork';

superset-frontend/plugins/plugin-chart-ag-grid-table/src/AgGridTable/index.tsx

@@ -50,7 +50,7 @@ import {
   JsonObject,
 } from '@superset-ui/core';
 import { SearchOutlined } from '@ant-design/icons';
-import { debounce, isEqual } from 'lodash';
+import { debounce, isEqual } from 'es-toolkit';
 import Pagination from './components/Pagination';
 import SearchSelectDropdown from './components/SearchSelectDropdown';
 import { SearchOption, SortByItem } from '../types';

superset-frontend/plugins/plugin-chart-ag-grid-table/src/AgGridTableChart.tsx

@@ -24,7 +24,7 @@ import {
 } from '@superset-ui/core';
 import { GenericDataType } from '@apache-superset/core/api/core';
 import { useCallback, useEffect, useState, useMemo } from 'react';
-import { isEqual } from 'lodash';
+import { isEqual } from 'es-toolkit';
 
 import {
   CellClickedEvent,