feat(build): uplift Lerna + replace insecure shortid with nanoid + uplift Yeoman-related packages + ESM-ize generator-superset (#29419)

Signed-off-by: hainenber <dotronghai96@gmail.com>

.github/workflows/superset-frontend.yml

@@ -76,7 +76,7 @@ jobs:
       - name: generator-superset unit tests
         if: steps.check.outputs.frontend
         working-directory: ./superset-frontend/packages/generator-superset
-        run: npx jest
+        run: npm run test
       - name: Upload code coverage
         uses: codecov/codecov-action@v4
         with:

superset-frontend/.prettierignore

@@ -25,3 +25,5 @@ CHANGELOG/
 *.geojson
 *-topo.json
 storybook-static/
+
+/.nx/workspace-data

superset-frontend/cypress-base/cypress/e2e/explore/link.test.ts

@@ -21,7 +21,7 @@
 // ***********************************************
 
 import rison from 'rison';
-import shortid from 'shortid';
+import { nanoid } from 'nanoid';
 import { interceptChart } from 'cypress/utils';
 import { HEALTH_POP_FORM_DATA_DEFAULTS } from './visualizations/shared.helper';
 
@@ -71,7 +71,7 @@ describe('Test explore links', () => {
       metrics: ['sum__SP_POP_TOTL'],
       groupby: ['country_name'],
     };
-    const newChartName = `Test chart [${shortid.generate()}]`;
+    const newChartName = `Test chart [${nanoid()}]`;
 
     cy.visitChartByParams(formData);
     cy.verifySliceSuccess({ waitAlias: '@tableChartData' });
@@ -109,8 +109,8 @@ describe('Test explore links', () => {
 
   it('Test chart save as and add to new dashboard', () => {
     const chartName = 'Growth Rate';
-    const newChartName = `${chartName} [${shortid.generate()}]`;
+    const newChartName = `${chartName} [${nanoid()}]`;
-    const dashboardTitle = `Test dashboard [${shortid.generate()}]`;
+    const dashboardTitle = `Test dashboard [${nanoid()}]`;
 
     cy.visitChartByName(chartName);
     cy.verifySliceSuccess({ waitAlias: '@chartData' });

superset-frontend/cypress-base/cypress/e2e/sqllab/query.test.ts

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import * as shortid from 'shortid';
+import { nanoid } from 'nanoid';
 import { selectResultsTab, assertSQLLabResultsAreEqual } from './sqllab.helper';
 
 function parseClockStr(node: JQuery) {
@@ -86,7 +86,7 @@ describe('SqlLab query panel', () => {
 
     const query =
       'SELECT ds, gender, name, num FROM main.birth_names ORDER BY name LIMIT 3';
-    const savedQueryTitle = `CYPRESS TEST QUERY ${shortid.generate()}`;
+    const savedQueryTitle = `CYPRESS TEST QUERY ${nanoid()}`;
 
     // we will assert that the results of the query we save, and the saved query are the same
     let initialResultsTable: HTMLElement | null = null;

superset-frontend/cypress-base/package-lock.json

@@ -15,10 +15,10 @@
         "brace": "^0.11.1",
         "cy-verify-downloads": "^0.1.6",
         "cypress-fail-on-console-error": "^4.0.3",
+        "nanoid": "^5.0.7",
         "querystringify": "^2.2.0",
         "react-dom": "^16.13.0",
-        "rison": "^0.1.1",
+        "rison": "^0.1.1"
-        "shortid": "^2.2.15"
       },
       "devDependencies": {
         "@types/querystringify": "^2.0.0",
@@ -8019,9 +8019,22 @@
       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
     },
     "node_modules/nanoid": {
-      "version": "2.1.11",
+      "version": "5.0.7",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-2.1.11.tgz",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.0.7.tgz",
-      "integrity": "sha512-s/snB+WGm6uwi0WjsZdaVcuf3KJXlfGl2LcxgwkEwJF0D/BWzVWAZW/XY4bFaiR7s0Jk3FPvlnepg1H1b1UwlA=="
+      "integrity": "sha512-oLxFY2gd2IqnjcYyOXD8XGCftpGtZP2AbHbOkthDkvRywH5ayNtPVy9YlOPcHckXzbLTCHpkb7FB+yuxKV13pQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.js"
+      },
+      "engines": {
+        "node": "^18 || >=20"
+      }
     },
     "node_modules/natural-compare": {
       "version": "1.4.0",
@@ -9258,14 +9271,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/shortid": {
-      "version": "2.2.16",
-      "resolved": "https://registry.npmjs.org/shortid/-/shortid-2.2.16.tgz",
-      "integrity": "sha512-Ugt+GIZqvGXCIItnsL+lvFJOiN7RYqlGy7QE41O3YC1xbNSeDGIRO7xg2JJXIAj1cAGnOeC1r7/T9pgrtQbv4g==",
-      "dependencies": {
-        "nanoid": "^2.1.0"
-      }
-    },
     "node_modules/side-channel": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
@@ -16471,9 +16476,9 @@
       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
     },
     "nanoid": {
-      "version": "2.1.11",
+      "version": "5.0.7",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-2.1.11.tgz",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.0.7.tgz",
-      "integrity": "sha512-s/snB+WGm6uwi0WjsZdaVcuf3KJXlfGl2LcxgwkEwJF0D/BWzVWAZW/XY4bFaiR7s0Jk3FPvlnepg1H1b1UwlA=="
+      "integrity": "sha512-oLxFY2gd2IqnjcYyOXD8XGCftpGtZP2AbHbOkthDkvRywH5ayNtPVy9YlOPcHckXzbLTCHpkb7FB+yuxKV13pQ=="
     },
     "natural-compare": {
       "version": "1.4.0",
@@ -17404,14 +17409,6 @@
       "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.8.1.tgz",
       "integrity": "sha512-6j1W9l1iAs/4xYBI1SYOVZyFcCis9b4KCLQ8fgAGG07QvzaRLVVRQvAy85yNmmZSjYjg4MWh4gNvlPujU/5LpA=="
     },
-    "shortid": {
-      "version": "2.2.16",
-      "resolved": "https://registry.npmjs.org/shortid/-/shortid-2.2.16.tgz",
-      "integrity": "sha512-Ugt+GIZqvGXCIItnsL+lvFJOiN7RYqlGy7QE41O3YC1xbNSeDGIRO7xg2JJXIAj1cAGnOeC1r7/T9pgrtQbv4g==",
-      "requires": {
-        "nanoid": "^2.1.0"
-      }
-    },
     "side-channel": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",

superset-frontend/cypress-base/package.json

@@ -25,7 +25,7 @@
     "querystringify": "^2.2.0",
     "react-dom": "^16.13.0",
     "rison": "^0.1.1",
-    "shortid": "^2.2.15"
+    "nanoid": "^5.0.7"
   },
   "devDependencies": {
     "@types/querystringify": "^2.0.0",

superset-frontend/jest.config.js

@@ -56,7 +56,7 @@ module.exports = {
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json'],
   snapshotSerializers: ['@emotion/jest/enzyme-serializer'],
   transformIgnorePatterns: [
-    'node_modules/(?!d3-(interpolate|color)|remark-gfm|markdown-table|micromark-*.|decode-named-character-reference|character-entities|mdast-util-*.|unist-util-*.|ccount|escape-string-regexp)',
+    'node_modules/(?!d3-(interpolate|color)|remark-gfm|markdown-table|micromark-*.|decode-named-character-reference|character-entities|mdast-util-*.|unist-util-*.|ccount|escape-string-regexp|nanoid)',
   ],
   globals: {
     __DEV__: true,

superset-frontend/lerna.json

@@ -1,8 +1,6 @@
 {
-  "lerna": "3.2.1",
   "npmClient": "npm",
   "packages": ["packages/*", "plugins/*", "src/setup/*"],
-  "useWorkspaces": true,
   "version": "0.18.25",
   "ignoreChanges": [
     "**/*.md",
@@ -19,5 +17,6 @@
       "message": "chore(superset-ui): publish %s",
       "exact": true
     }
-  }
+  },
+  "$schema": "node_modules/lerna/schemas/lerna-schema.json"
 }

superset-frontend/package.json

@@ -83,7 +83,8 @@
     "@emotion/cache": "^11.4.0",
     "@emotion/react": "^11.4.1",
     "@emotion/styled": "^11.3.0",
-    "@fontsource/inter": "^4.0.0",
+    "@fontsource/fira-code": "^5.0.18",
+    "@fontsource/inter": "^5.0.18",
     "@reduxjs/toolkit": "^1.9.3",
     "@scarf/scarf": "^1.3.0",
     "@superset-ui/chart-controls": "file:./packages/superset-ui-chart-controls",
@@ -135,7 +136,6 @@
     "dom-to-pdf": "^0.3.1",
     "emotion-rgba": "0.0.12",
     "fast-glob": "^3.2.7",
-    "fontsource-fira-code": "^4.0.0",
     "fs-extra": "^10.0.0",
     "fuse.js": "^7.0.0",
     "geolib": "^2.0.24",
@@ -199,7 +199,7 @@
     "rimraf": "^3.0.2",
     "rison": "^0.1.1",
     "scroll-into-view-if-needed": "^3.1.0",
-    "shortid": "^2.2.16",
+    "nanoid": "^5.0.7",
     "tinycolor2": "^1.4.2",
     "urijs": "^1.19.8",
     "use-event-callback": "^0.1.0",
@@ -322,7 +322,7 @@
     "jest-html-reporter": "^3.10.2",
     "jest-websocket-mock": "^2.5.0",
     "jsdom": "^24.0.0",
-    "lerna": "^6.6.2",
+    "lerna": "^8.1.5",
     "less": "^4.2.0",
     "less-loader": "^10.2.0",
     "mini-css-extract-plugin": "^2.7.6",

superset-frontend/packages/generator-superset/.eslintrc

@@ -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.
+ */
+{
+  "settings": {
+    "import/resolver": {
+      "typescript": {}
+    }
+  }
+}

superset-frontend/packages/generator-superset/generators/app/index.js

@@ -17,13 +17,13 @@
  * under the License.
  */
 
-/* eslint-disable sort-keys */
+import chalk from 'chalk';
+import { dirname, resolve } from 'path';
+import { fileURLToPath } from 'url';
+import yosay from 'yosay';
+import Generator from 'yeoman-generator';
 
-const Generator = require('yeoman-generator');
+export default class extends Generator {
-const chalk = require('chalk');
-const yosay = require('yosay');
-
-module.exports = class extends Generator {
   async prompting() {
     // Have Yeoman greet the user.
     this.log(
@@ -33,7 +33,10 @@ module.exports = class extends Generator {
     this.option('skipInstall');
   }
 
-  configuring() {
+  async configuring() {
-    this.composeWith(require.resolve(`../plugin-chart`));
+    const generatorDirname = dirname(fileURLToPath(import.meta.url));
+    await this.composeWith(
+      resolve(generatorDirname, `../plugin-chart/index.js`),
+    );
   }
-};
+}

superset-frontend/packages/generator-superset/generators/plugin-chart/index.js

@@ -19,17 +19,10 @@
 
 /* eslint-disable sort-keys */
 
-const Generator = require('yeoman-generator');
+import Generator from 'yeoman-generator';
-// eslint-disable-next-line lodash/import-scope
+import { kebabCase, camelCase, startCase, upperFirst } from 'lodash-es';
-const kebabCase = require('lodash/kebabCase');
-// eslint-disable-next-line lodash/import-scope
-const startCase = require('lodash/startCase');
-// eslint-disable-next-line lodash/import-scope
-const camelCase = require('lodash/camelCase');
-// eslint-disable-next-line lodash/import-scope
-const upperFirst = require('lodash/upperFirst');
 
-module.exports = class extends Generator {
+export default class extends Generator {
   async prompting() {
     this.option('skipInstall');
 
@@ -121,4 +114,4 @@ module.exports = class extends Generator {
       this.fs.copy(this.templatePath(file), this.destinationPath(file));
     });
   }
-};
+}

superset-frontend/packages/generator-superset/jest.config.js

@@ -17,8 +17,9 @@
  * under the License.
  */
 
-module.exports = {
+export default {
   displayName: 'generator-superset',
   testRegex: 'test\\/.*\\.test\\.[jt]sx?$',
   testEnvironment: 'node',
+  transform: {},
 };

superset-frontend/packages/generator-superset/package.json

@@ -19,23 +19,29 @@
   },
   "license": "Apache-2.0",
   "author": "Superset",
+  "type": "module",
   "main": "generators/index.js",
   "files": [
     "generators"
   ],
+  "scripts": {
+    "test": "cross-env NODE_OPTIONS=--experimental-vm-modules jest"
+  },
   "dependencies": {
-    "chalk": "^4.0.0",
+    "chalk": "^5.3.0",
-    "lodash": "^4.17.21",
+    "lodash-es": "^4.17.21",
-    "yeoman-generator": "^5.7.0",
+    "yeoman-generator": "^7.3.2",
-    "yosay": "^2.0.2"
+    "yosay": "^3.0.0"
   },
   "devDependencies": {
+    "cross-env": "^5.2.1",
     "fs-extra": "^11.2.0",
-    "yeoman-assert": "^3.1.1",
+    "yeoman-test": "^8.3.0",
-    "yeoman-test": "^6.2.0"
+    "jest": "^29.7.0"
   },
   "engines": {
-    "npm": ">= 4.0.0"
+    "npm": ">= 4.0.0",
+    "node": ">= 18.0.0"
   },
   "publishConfig": {
     "access": "public"

superset-frontend/packages/generator-superset/test/app.test.js

@@ -17,22 +17,18 @@
  * under the License.
  */
 
-const assert = require('yeoman-assert');
+import helpers, { result } from 'yeoman-test';
-const helpers = require('yeoman-test');
+import appModule from '../generators/app';
-const appModule = require('../generators/app');
 
-test('generator-superset:app:creates files', () =>
+test('generator-superset:app:creates files', async () => {
-  helpers
+  await helpers.run(appModule).withPrompts({
-    .run(appModule)
+    subgenerator: 'package',
-    .withPrompts({
+    name: 'my-package',
-      subgenerator: 'package',
+  });
-      name: 'my-package',
+  result.assertFile([
-    })
+    'package.json',
-    .then(function () {
+    'README.md',
-      assert.file([
+    'src/index.ts',
-        'package.json',
+    'test/index.test.ts',
-        'README.md',
+  ]);
-        'src/index.ts',
+});
-        'test/index.test.ts',
-      ]);
-    }));

superset-frontend/packages/generator-superset/test/plugin-chart.test.js

@@ -17,19 +17,22 @@
  * under the License.
  */
 
-/* eslint-env node */
+import { dirname, join } from 'path';
-const path = require('path');
+import helpers, { result } from 'yeoman-test';
-const assert = require('yeoman-assert');
+import { copySync } from 'fs-extra/esm';
-const helpers = require('yeoman-test');
+import { fileURLToPath } from 'url';
-const fs = require('fs-extra');
+import pluginChartModule from '../generators/plugin-chart';
-const pluginChartModule = require('../generators/plugin-chart');
 
-test('generator-superset:plugin-chart:creates files', () =>
+test('generator-superset:plugin-chart:creates files', async () => {
-  helpers
+  await helpers
     .run(pluginChartModule)
-    .inTmpDir(function (dir) {
+    .onTargetDirectory(dir => {
       // `dir` is the path to the new temporary directory
-      fs.copySync(path.join(__dirname, '../generators/plugin-chart'), dir);
+      const generatorDirname = dirname(fileURLToPath(import.meta.url));
+      copySync(
+        join(generatorDirname, '../generators/plugin-chart/templates'),
+        join(dir, 'unknown/templates'),
+      );
     })
     .withPrompts({
       packageName: 'cold-map',
@@ -37,25 +40,25 @@ test('generator-superset:plugin-chart:creates files', () =>
       componentType: 'function',
       chartType: 'regular',
     })
-    .withOptions({ skipInstall: true })
+    .withOptions({ skipInstall: true });
-    .then(function () {
+
-      assert.file([
+  result.assertFile([
-        '.gitignore',
+    '.gitignore',
-        'babel.config.js',
+    'babel.config.js',
-        'jest.config.js',
+    'jest.config.js',
-        'package.json',
+    'package.json',
-        'README.md',
+    'README.md',
-        'src/plugin/buildQuery.ts',
+    'src/plugin/buildQuery.ts',
-        'src/plugin/controlPanel.ts',
+    'src/plugin/controlPanel.ts',
-        'src/plugin/index.ts',
+    'src/plugin/index.ts',
-        'src/plugin/transformProps.ts',
+    'src/plugin/transformProps.ts',
-        'src/ColdMap.tsx',
+    'src/ColdMap.tsx',
-        'src/index.ts',
+    'src/index.ts',
-        'test/index.test.ts',
+    'test/index.test.ts',
-        'test/__mocks__/mockExportString.js',
+    'test/__mocks__/mockExportString.js',
-        'test/plugin/buildQuery.test.ts',
+    'test/plugin/buildQuery.test.ts',
-        'test/plugin/transformProps.test.ts',
+    'test/plugin/transformProps.test.ts',
-        'types/external.d.ts',
+    'types/external.d.ts',
-        'src/images/thumbnail.png',
+    'src/images/thumbnail.png',
-      ]);
+  ]);
-    }));
+});

superset-frontend/src/SqlLab/actions/sqlLab.js

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import shortid from 'shortid';
+import { nanoid } from 'nanoid';
 import rison from 'rison';
 import {
   FeatureFlag,
@@ -239,7 +239,7 @@ export function clearInactiveQueries(interval) {
 
 export function startQuery(query) {
   Object.assign(query, {
-    id: query.id ? query.id : shortid.generate(),
+    id: query.id ? query.id : nanoid(11),
     progress: 0,
     startDttm: now(),
     state: query.runAsync ? 'pending' : 'running',
@@ -404,7 +404,7 @@ export function runQueryFromSqlEditor(
 export function reRunQuery(query) {
   // run Query with a new id
   return function (dispatch) {
-    dispatch(runQuery({ ...query, id: shortid.generate() }));
+    dispatch(runQuery({ ...query, id: nanoid(11) }));
   };
 }
 
@@ -534,7 +534,7 @@ export function syncQueryEditor(queryEditor) {
 export function addQueryEditor(queryEditor) {
   const newQueryEditor = {
     ...queryEditor,
-    id: shortid.generate().toString(),
+    id: nanoid(11),
     loaded: true,
     inLocalStorage: true,
   };
@@ -942,7 +942,7 @@ export function addTable(queryEditor, tableName, catalogName, schemaName) {
       mergeTable(
         {
           ...table,
-          id: shortid.generate(),
+          id: nanoid(11),
           expanded: true,
         },
         null,
@@ -962,7 +962,7 @@ export function runTablePreviewQuery(newTable) {
 
     if (database && !database.disable_data_preview) {
       const dataPreviewQuery = {
-        id: shortid.generate(),
+        id: nanoid(11),
         dbId,
         catalog,
         schema,
@@ -1039,7 +1039,7 @@ export function changeDataPreviewId(oldQueryId, newQuery) {
 export function reFetchQueryResults(query) {
   return function (dispatch) {
     const newQuery = {
-      id: shortid.generate(),
+      id: nanoid(),
       dbId: query.dbId,
       sql: query.sql,
       tableName: query.tableName,

superset-frontend/src/SqlLab/actions/sqlLab.test.js

@@ -20,7 +20,6 @@ import sinon from 'sinon';
 import fetchMock from 'fetch-mock';
 import configureMockStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
-import shortid from 'shortid';
 import { waitFor } from '@testing-library/react';
 import * as uiCore from '@superset-ui/core';
 import * as actions from 'src/SqlLab/actions/sqlLab';
@@ -35,6 +34,14 @@ import {
 const middlewares = [thunk];
 const mockStore = configureMockStore(middlewares);
 
+jest.mock('nanoid', () => ({
+  nanoid: () => 'abcd',
+}));
+
+afterAll(() => {
+  jest.resetAllMocks();
+});
+
 describe('getUpToDateQuery', () => {
   test('should return the up to date query editor state', () => {
     const outOfUpdatedQueryEditor = {
@@ -347,14 +354,6 @@ describe('async actions', () => {
   });
 
   describe('reRunQuery', () => {
-    let stub;
-    beforeEach(() => {
-      stub = sinon.stub(shortid, 'generate').returns('abcd');
-    });
-    afterEach(() => {
-      stub.restore();
-    });
-
     it('creates new query with a new id', () => {
       const id = 'id';
       const state = {
@@ -412,14 +411,6 @@ describe('async actions', () => {
   });
 
   describe('cloneQueryToNewTab', () => {
-    let stub;
-    beforeEach(() => {
-      stub = sinon.stub(shortid, 'generate').returns('abcd');
-    });
-    afterEach(() => {
-      stub.restore();
-    });
-
     it('creates new query editor', () => {
       expect.assertions(1);
 
@@ -462,14 +453,6 @@ describe('async actions', () => {
   });
 
   describe('addQueryEditor', () => {
-    let stub;
-    beforeEach(() => {
-      stub = sinon.stub(shortid, 'generate').returns('abcd');
-    });
-    afterEach(() => {
-      stub.restore();
-    });
-
     it('creates new query editor', () => {
       expect.assertions(1);
 
@@ -577,14 +560,6 @@ describe('async actions', () => {
     afterEach(fetchMock.resetHistory);
 
     describe('addQueryEditor', () => {
-      let stub;
-      beforeEach(() => {
-        stub = sinon.stub(shortid, 'generate').returns('abcd');
-      });
-      afterEach(() => {
-        stub.restore();
-      });
-
       it('creates the tab state in the local storage', () => {
         expect.assertions(2);
 

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

@@ -31,7 +31,7 @@ import { pick } from 'lodash';
 import ButtonGroup from 'src/components/ButtonGroup';
 import Alert from 'src/components/Alert';
 import Button from 'src/components/Button';
-import shortid from 'shortid';
+import { nanoid } from 'nanoid';
 import {
   QueryState,
   styled,
@@ -250,7 +250,7 @@ const ResultSet = ({
 
   const popSelectStar = (tempSchema: string | null, tempTable: string) => {
     const qe = {
-      id: shortid.generate(),
+      id: nanoid(11),
       name: tempTable,
       autorun: false,
       dbId: query.dbId,

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

@@ -18,7 +18,7 @@
  */
 import { createRef, useMemo } from 'react';
 import { shallowEqual, useDispatch, useSelector } from 'react-redux';
-import shortid from 'shortid';
+import { nanoid } from 'nanoid';
 import Tabs from 'src/components/Tabs';
 import { styled, t } from '@superset-ui/core';
 
@@ -139,7 +139,7 @@ const SouthPane = ({
         activeKey={activeSouthPaneTab}
         className="SouthPaneTabs"
         onChange={switchTab}
-        id={shortid.generate()}
+        id={nanoid(11)}
         fullWidth={false}
         animated={false}
       >

superset-frontend/src/assets/stylesheets/less/fonts.less

@@ -28,6 +28,6 @@
 @import '~@fontsource/inter/600.css';
 
 /******************************* Fira Code ********************************/
-@import '~fontsource-fira-code/400.css';
+@import '~@fontsource/fira-code/400.css';
-@import '~fontsource-fira-code/500.css';
+@import '~@fontsource/fira-code/500.css';
-@import '~fontsource-fira-code/600.css';
+@import '~@fontsource/fira-code/600.css';

superset-frontend/src/components/Datasource/CollectionTable.tsx

@@ -23,7 +23,7 @@ import {
   PureComponent,
 } from 'react';
 
-import shortid from 'shortid';
+import { nanoid } from 'nanoid';
 
 import { InfoTooltipWithTrigger } from '@superset-ui/chart-controls';
 import { t, styled } from '@superset-ui/core';
@@ -86,7 +86,7 @@ function createCollectionArray(collection: object) {
 function createKeyedCollection(arr: Array<object>) {
   const collectionArray = arr.map((o: any) => ({
     ...o,
-    id: o.id || shortid.generate(),
+    id: o.id || nanoid(),
   }));
 
   const collection = {};
@@ -209,7 +209,7 @@ export default class CRUDCollection extends PureComponent<
     if (this.props.itemGenerator) {
       let newItem = this.props.itemGenerator();
       if (!newItem.id) {
-        newItem = { ...newItem, id: shortid.generate() };
+        newItem = { ...newItem, id: nanoid() };
       }
       this.changeCollection(this.state.collection, newItem);
     }

superset-frontend/src/components/Datasource/DatasourceEditor.jsx

@@ -23,7 +23,7 @@ import { Radio } from 'src/components/Radio';
 import Card from 'src/components/Card';
 import Alert from 'src/components/Alert';
 import Badge from 'src/components/Badge';
-import shortid from 'shortid';
+import { nanoid } from 'nanoid';
 import {
   css,
   isFeatureEnabled,
@@ -718,7 +718,7 @@ class DatasourceEditor extends PureComponent {
       if (!currentCol) {
         // new column
         finalColumns.push({
-          id: shortid.generate(),
+          id: nanoid(),
           column_name: col.column_name,
           type: col.type,
           groupby: true,

superset-frontend/src/components/MessageToasts/actions.ts

@@ -16,13 +16,13 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import shortid from 'shortid';
+import { nanoid } from 'nanoid';
 import { ToastType, ToastMeta } from './types';
 
 type ToastOptions = Partial<Omit<ToastMeta, 'id' | 'toastType' | 'text'>>;
 
 export function getToastUuid(type: ToastType) {
-  return `${type}-${shortid.generate()}`;
+  return `${type}-${nanoid()}`;
 }
 
 export const ADD_TOAST = 'ADD_TOAST';

superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/utils.ts

@@ -17,7 +17,7 @@
  * under the License.
  */
 import { FormInstance } from 'src/components';
-import shortid from 'shortid';
+import { nanoid } from 'nanoid';
 import { getInitialDataMask } from 'src/dataMask/reducer';
 import {
   Filter,
@@ -197,7 +197,7 @@ export const generateFilterId = (type: NativeFilterType) => {
     type === NativeFilterType.NativeFilter
       ? NATIVE_FILTER_PREFIX
       : NATIVE_FILTER_DIVIDER_PREFIX;
-  return `${prefix}${shortid.generate()}`;
+  return `${prefix}${nanoid()}`;
 };
 
 export const getFilterIds = (config: FilterConfiguration) =>

superset-frontend/src/dashboard/containers/DashboardPage.tsx

@@ -42,7 +42,7 @@ import {
 } from 'src/dashboard/components/nativeFilters/FilterBar/keyValue';
 import DashboardContainer from 'src/dashboard/containers/Dashboard';
 
-import shortid from 'shortid';
+import { nanoid } from 'nanoid';
 import { RootState } from '../types';
 import {
   chartContextMenuStyles,
@@ -76,7 +76,7 @@ export const DashboardPage: FC<PageProps> = ({ idOrSlug }: PageProps) => {
   const theme = useTheme();
   const dispatch = useDispatch();
   const history = useHistory();
-  const dashboardPageId = useMemo(() => shortid.generate(), []);
+  const dashboardPageId = useMemo(() => nanoid(), []);
   const hasDashboardInfoInitiated = useSelector<RootState, Boolean>(
     ({ dashboardInfo }) =>
       dashboardInfo && Object.keys(dashboardInfo).length > 0,

superset-frontend/src/dashboard/util/newComponentFactory.js

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import shortid from 'shortid';
+import { nanoid } from 'nanoid';
 import { t } from '@superset-ui/core';
 
 import {
@@ -65,7 +65,7 @@ const typeToDefaultMetaData = {
 };
 
 function uuid(type) {
-  return `${type}-${shortid.generate()}`;
+  return `${type}-${nanoid()}`;
 }
 
 export default function entityFactory(type, meta, parents = []) {

superset-frontend/src/explore/components/controls/CollectionControl/index.jsx

@@ -19,7 +19,7 @@
 import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { List } from 'src/components';
-import shortid from 'shortid';
+import { nanoid } from 'nanoid';
 import { t, withTheme } from '@superset-ui/core';
 import {
   SortableContainer,
@@ -57,7 +57,7 @@ const defaultProps = {
   description: null,
   onChange: () => {},
   placeholder: t('Empty collection'),
-  itemGenerator: () => ({ key: shortid.generate() }),
+  itemGenerator: () => ({ key: nanoid(11) }),
   keyAccessor: o => o.key,
   value: [],
   addTooltip: t('Add an item'),

superset-frontend/src/hooks/useTabId.ts

@@ -17,7 +17,7 @@
  * under the License.
  */
 import { useEffect, useState } from 'react';
-import shortid from 'shortid';
+import { nanoid } from 'nanoid';
 import { BroadcastChannel } from 'broadcast-channel';
 
 interface TabIdChannelMessage {
@@ -43,7 +43,7 @@ export function useTabId() {
   useEffect(() => {
     if (!isStorageAvailable()) {
       if (!tabId) {
-        setTabId(shortid.generate());
+        setTabId(nanoid());
       }
       return;
     }

superset-frontend/src/middleware/loggerMiddleware.js

@@ -18,7 +18,7 @@
  */
 /* eslint-disable camelcase */
 /* eslint prefer-const: 2 */
-import shortid from 'shortid';
+import { nanoid } from 'nanoid';
 import { SupersetClient } from '@superset-ui/core';
 
 import { safeStringify } from '../utils/safeStringify';
@@ -117,7 +117,7 @@ const loggerMiddleware = store => next => action => {
       trigger_event: lastEventId,
     };
   } else {
-    lastEventId = shortid.generate();
+    lastEventId = nanoid();
     eventData = {
       ...eventData,
       event_type: 'user',

superset-frontend/src/reduxUtils.ts

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import shortid from 'shortid';
+import { nanoid } from 'nanoid';
 import { compose } from 'redux';
 import persistState, { StorageAdapter } from 'redux-localstorage';
 import {
@@ -38,7 +38,7 @@ export function addToObject(
   const copiedObject = { ...obj };
 
   if (!copiedObject.id) {
-    copiedObject.id = shortid.generate();
+    copiedObject.id = nanoid();
   }
   newObject[copiedObject.id] = copiedObject;
   return { ...state, [arrKey]: newObject };
@@ -108,7 +108,7 @@ export function addToArr(
 ) {
   const newObj = { ...obj };
   if (!newObj.id) {
-    newObj.id = shortid.generate();
+    newObj.id = nanoid();
   }
   const newState = {};
   if (prepend) {
@@ -129,7 +129,7 @@ export function extendArr(
   newArr.forEach(el => {
     if (!el.id) {
       /* eslint-disable no-param-reassign */
-      el.id = shortid.generate();
+      el.id = nanoid();
     }
   });
   const newState = {};

superset-frontend/src/utils/export.ts

@@ -18,7 +18,7 @@
  */
 import parseCookie from 'src/utils/parseCookie';
 import rison from 'rison';
-import shortid from 'shortid';
+import { nanoid } from 'nanoid';
 
 export default function handleResourceExport(
   resource: string,
@@ -26,7 +26,7 @@ export default function handleResourceExport(
   done: () => void,
   interval = 200,
 ): void {
-  const token = shortid.generate();
+  const token = nanoid();
   const url = `/api/v1/${resource}/export/?q=${rison.encode(
     ids,
   )}&token=${token}`;

superset-frontend/src/utils/reducerUtils.js

@@ -16,14 +16,14 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import shortid from 'shortid';
+import { nanoid } from 'nanoid';
 
 export function addToObject(state, arrKey, obj) {
   const newObject = { ...state[arrKey] };
   const copiedObject = { ...obj };
 
   if (!copiedObject.id) {
-    copiedObject.id = shortid.generate();
+    copiedObject.id = nanoid();
   }
   newObject[copiedObject.id] = copiedObject;
   return { ...state, [arrKey]: newObject };
@@ -63,7 +63,7 @@ export function removeFromArr(state, arrKey, obj, idKey = 'id') {
 export function addToArr(state, arrKey, obj) {
   const newObj = { ...obj };
   if (!newObj.id) {
-    newObj.id = shortid.generate();
+    newObj.id = nanoid();
   }
   const newState = {};
   newState[arrKey] = [...state[arrKey], newObj];

superset-frontend/src/views/store.ts

@@ -47,7 +47,7 @@ import {
   DatasourcesActionPayload,
   DatasourcesAction,
 } from 'src/dashboard/actions/datasources';
-import shortid from 'shortid';
+import { nanoid } from 'nanoid';
 import {
   BootstrapUser,
   UndefinedUser,
@@ -126,7 +126,7 @@ const reducers = {
   messageToasts: messageToastReducer,
   common: noopReducer(bootstrapData.common),
   user: userReducer,
-  impressionId: noopReducer(shortid.generate()),
+  impressionId: noopReducer(nanoid()),
   charts,
   datasources: CombinedDatasourceReducers,
   dashboardInfo,