chore: update UI dev libs and fix warnings & vulnerabilities (#24648)

superset-frontend/package.json

@@ -79,7 +79,7 @@
   ],
   "dependencies": {
     "@ant-design/icons": "^5.0.1",
-    "@babel/runtime-corejs3": "^7.12.5",
+    "@babel/runtime-corejs3": "^7.22.6",
     "@emotion/babel-preset-css-prop": "^11.2.0",
     "@emotion/cache": "^11.4.0",
     "@emotion/react": "^11.4.1",
@@ -215,18 +215,18 @@
   },
   "devDependencies": {
     "@applitools/eyes-storybook": "^3.30.1",
-    "@babel/cli": "^7.18.10",
+    "@babel/cli": "^7.22.6",
-    "@babel/compat-data": "^7.18.8",
+    "@babel/compat-data": "^7.22.6",
-    "@babel/core": "^7.18.10",
+    "@babel/core": "^7.22.8",
-    "@babel/eslint-parser": "^7.18.9",
+    "@babel/eslint-parser": "^7.22.7",
-    "@babel/node": "^7.18.10",
+    "@babel/node": "^7.22.6",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
-    "@babel/plugin-proposal-optional-chaining": "^7.18.9",
+    "@babel/plugin-proposal-optional-chaining": "^7.21.0",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/plugin-transform-runtime": "^7.18.10",
+    "@babel/plugin-transform-runtime": "^7.22.7",
-    "@babel/preset-env": "^7.18.10",
+    "@babel/preset-env": "^7.22.7",
-    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-react": "^7.22.5",
-    "@babel/register": "^7.18.9",
+    "@babel/register": "^7.22.5",
     "@cypress/react": "^5.10.0",
     "@emotion/jest": "^11.3.0",
     "@hot-loader/react-dom": "^16.13.0",
@@ -241,7 +241,7 @@
     "@storybook/client-api": "^6.4.22",
     "@storybook/manager-webpack5": "^6.4.22",
     "@storybook/react": "^6.4.22",
-    "@svgr/webpack": "^5.5.0",
+    "@svgr/webpack": "^8.0.1",
     "@testing-library/dom": "^7.29.4",
     "@testing-library/jest-dom": "^5.11.6",
     "@testing-library/react": "^11.2.0",
@@ -274,18 +274,18 @@
     "@types/sinon": "^9.0.5",
     "@types/tinycolor2": "^1.4.3",
     "@types/yargs": "12 - 15",
-    "@typescript-eslint/eslint-plugin": "^5.3.0",
+    "@typescript-eslint/eslint-plugin": "^5.62.0",
-    "@typescript-eslint/parser": "^5.3.0",
+    "@typescript-eslint/parser": "^5.62.0",
     "babel-jest": "^26.6.3",
-    "babel-loader": "^8.2.2",
+    "babel-loader": "^8.3.0",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-jsx-remove-data-test-id": "^2.1.3",
     "babel-plugin-lodash": "^3.3.4",
     "chromatic": "^6.7.4",
-    "copy-webpack-plugin": "^9.0.1",
+    "copy-webpack-plugin": "^9.1.0",
-    "cross-env": "^5.2.0",
+    "cross-env": "^5.2.1",
-    "css-loader": "^6.2.0",
+    "css-loader": "^6.8.1",
-    "css-minimizer-webpack-plugin": "^3.0.2",
+    "css-minimizer-webpack-plugin": "^3.4.1",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.7",
     "eslint": "^7.32.0",
@@ -295,14 +295,14 @@
     "eslint-plugin-cypress": "^2.11.2",
     "eslint-plugin-file-progress": "^1.2.0",
     "eslint-plugin-import": "^2.24.2",
-    "eslint-plugin-jest": "^24.1.3",
+    "eslint-plugin-jest": "^24.7.0",
     "eslint-plugin-jest-dom": "^3.6.5",
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-no-only-tests": "^2.4.0",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-react": "^7.22.0",
     "eslint-plugin-react-hooks": "^4.2.0",
-    "eslint-plugin-testing-library": "^3.10.1",
+    "eslint-plugin-testing-library": "^3.10.2",
     "eslint-plugin-theme-colors": "file:tools/eslint-plugin-theme-colors",
     "eslint-plugin-translation-vars": "file:tools/eslint-plugin-translation-vars",
     "exports-loader": "^0.7.0",
@@ -310,16 +310,16 @@
     "fork-ts-checker-webpack-plugin": "^6.3.3",
     "history": "^4.10.1",
     "ignore-styles": "^5.0.1",
-    "imports-loader": "^3.0.0",
+    "imports-loader": "^3.1.1",
     "jest": "^26.6.3",
     "jest-environment-enzyme": "^7.1.2",
     "jest-enzyme": "^7.1.2",
     "jest-websocket-mock": "^2.2.0",
     "jsdom": "^20.0.0",
-    "lerna": "^6.1.0",
+    "lerna": "^6.6.2",
     "less": "^3.12.2",
     "less-loader": "^10.2.0",
-    "mini-css-extract-plugin": "^2.3.0",
+    "mini-css-extract-plugin": "^2.7.6",
     "mock-socket": "^9.0.3",
     "node-fetch": "^2.6.1",
     "prettier": "^2.4.1",
@@ -329,22 +329,22 @@
     "react-test-renderer": "^16.9.0",
     "redux-mock-store": "^1.5.4",
     "sinon": "^9.0.2",
-    "source-map-support": "^0.5.16",
+    "source-map-support": "^0.5.21",
     "speed-measure-webpack-plugin": "^1.5.0",
     "storybook-addon-jsx": "^7.3.14",
     "storybook-addon-paddings": "^4.3.0",
-    "style-loader": "^3.2.1",
+    "style-loader": "^3.3.3",
     "thread-loader": "^3.0.4",
     "transform-loader": "^0.2.4",
-    "ts-loader": "^9.2.5",
+    "ts-loader": "^9.4.4",
     "typescript": "^4.5.4",
     "vm-browserify": "^1.1.2",
-    "webpack": "^5.76.0",
+    "webpack": "^5.88.1",
-    "webpack-bundle-analyzer": "^4.4.2",
+    "webpack-bundle-analyzer": "^4.9.0",
-    "webpack-cli": "^4.8.0",
+    "webpack-cli": "^4.10.0",
-    "webpack-dev-server": "^4.10.1",
+    "webpack-dev-server": "^4.15.1",
-    "webpack-manifest-plugin": "^4.0.2",
+    "webpack-manifest-plugin": "^4.1.1",
-    "webpack-sources": "^3.2.0"
+    "webpack-sources": "^3.2.3"
   },
   "engines": {
     "node": "^16.9.1",

superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-table/TableStories.tsx

@@ -69,7 +69,7 @@ function loadData(
     allowRearrangeColumns = false,
   },
 ): TableChartProps {
-  if (!props.queriesData || !props.queriesData[0]) return props;
+  if (!props.queriesData?.[0]) return props;
   const records = props.queriesData?.[0].data || [];
   const columns = props.queriesData?.[0].colnames || [];
   return {

superset-frontend/plugins/plugin-chart-echarts/src/utils/controls.ts

@@ -30,7 +30,7 @@ export function parseYAxisBound(
 }
 
 export function parseNumbersList(value: string, delim = ';') {
-  if (!value || !value.trim()) return [];
+  if (!value?.trim()) return [];
   return value.split(delim).map(num => {
     if (validateNumber(num)) throw new Error('All values must be numeric');
     return Number(num);

superset-frontend/plugins/plugin-chart-table/src/transformProps.ts

@@ -58,7 +58,7 @@ const processDataRecords = memoizeOne(function processDataRecords(
   data: DataRecord[] | undefined,
   columns: DataColumnMeta[],
 ) {
-  if (!data || !data[0]) {
+  if (!data?.[0]) {
     return data || [];
   }
   const timeColumns = columns.filter(

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

@@ -105,9 +105,9 @@ const RunQueryActionButton = ({
     : Button;
 
   const sqlContent = selectedText || sql || '';
-  const isDisabled =
+  const isDisabled = !sqlContent
-    !sqlContent ||
+    ?.replace(/(\/\*[^*]*\*\/)|(\/\/[^*]*)|(--[^.].*)/gm, '')
-    !sqlContent.replace(/(\/\*[^*]*\*\/)|(\/\/[^*]*)|(--[^.].*)/gm, '').trim();
+    .trim();
 
   const stopButtonTooltipText = useMemo(
     () =>

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

@@ -223,10 +223,14 @@ const TableElement = ({ table, ...props }: TableElementProps) => {
           </small>
         </div>
       ));
+      if (!metadata?.length) {
+        // hide metadata card view
+        return null;
+      }
     }
 
-    if (!partitions && (!metadata || !metadata.length)) {
+    if (!partitions) {
-      // hide partition and metadata card view
+      // hide partition card view
       return null;
     }
 

superset-frontend/src/components/DeprecatedSelect/utils.ts

@@ -39,15 +39,13 @@ export function findValue<OptionType extends OptionTypeBase>(
   if (value === null || value === undefined || value === '') {
     return [];
   }
-  const isGroup = Array.isArray((options[0] || {}).options);
+  const isGroup = Array.isArray(options[0]?.options);
   const flatOptions = isGroup
     ? (options as GroupedOptionsType<OptionType>).flatMap(x => x.options || [])
     : (options as OptionsType<OptionType>);
 
   const find = (val: OptionType) => {
-    const realVal = (value || {}).hasOwnProperty(valueKey)
+    const realVal = value?.hasOwnProperty(valueKey) ? val[valueKey] : val;
-      ? val[valueKey]
-      : val;
     return (
       flatOptions.find(x => x === realVal || x[valueKey] === realVal) || val
     );

superset-frontend/src/components/Icons/Icon.tsx

@@ -56,9 +56,7 @@ export const Icon = (props: IconProps) => {
     let cancelled = false;
     async function importIcon(): Promise<void> {
       ImportedSVG.current = (
-        await import(
+        await import(`!!@svgr/webpack!src/assets/images/icons/${fileName}.svg`)
-          `!!@svgr/webpack?-svgo,+titleProp,+ref!src/assets/images/icons/${fileName}.svg`
-        )
       ).default;
       if (!cancelled) {
         setLoaded(true);

superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/DefaultValue.tsx

@@ -53,7 +53,7 @@ const DefaultValue: FC<DefaultValueProps> = ({
   formData,
   enableNoResults,
 }) => {
-  const formFilter = (form.getFieldValue('filters') || {})[filterId];
+  const formFilter = form.getFieldValue('filters')?.[filterId];
   const queriesData = formFilter?.defaultValueQueriesData;
   const loading = hasDataset && queriesData === null;
   const value = formFilter?.defaultDataMask?.filterState?.value;

superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/state.ts

@@ -29,7 +29,7 @@ export const useBackendFormUpdate = (
   filterId: string,
 ) => {
   const forceUpdate = useForceUpdate();
-  const formFilter = (form.getFieldValue('filters') || {})[filterId];
+  const formFilter = form.getFieldValue('filters')?.[filterId];
   useEffect(() => {
     setNativeFilterFieldValues(form, filterId, {
       isDataDirty: true,

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

@@ -70,7 +70,7 @@ export const validateForm = async (
   } catch (error) {
     logging.warn('Filter configuration failed:', error);
 
-    if (!error.errorFields || !error.errorFields.length) return null; // not a validation error
+    if (!error.errorFields?.length) return null; // not a validation error
 
     // the name is in array format since the fields are nested
     type ErrorFields = { name: ['filters', string, string] }[];

superset-frontend/src/dashboard/util/isValidChild.ts

@@ -123,9 +123,8 @@ export default function isValidChild(child: IsValidChildProps): boolean {
     return false;
   }
 
-  const maxParentDepth: number | undefined = (parentMaxDepthLookup[
+  const maxParentDepth: number | undefined =
-    parentType
+    parentMaxDepthLookup[parentType]?.[childType];
-  ] || {})[childType];
 
   return typeof maxParentDepth === 'number' && parentDepth <= maxParentDepth;
 }

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

@@ -300,14 +300,12 @@ export const ControlPanelsContainer = (props: ControlPanelsContainerProps) => {
       x_axis !== previousXAxis &&
       isTemporalColumn(x_axis, props.exploreState.datasource)
     ) {
-      const noFilter =
+      const noFilter = !adhoc_filters?.find(
-        !adhoc_filters ||
+        filter =>
-        !adhoc_filters.find(
+          filter.expressionType === 'SIMPLE' &&
-          filter =>
+          filter.operator === Operators.TEMPORAL_RANGE &&
-            filter.expressionType === 'SIMPLE' &&
+          filter.subject === x_axis,
-            filter.operator === Operators.TEMPORAL_RANGE &&
+      );
-            filter.subject === x_axis,
-        );
       if (noFilter) {
         confirm({
           title: t('The X-axis is not on the filters list'),

superset-frontend/src/features/annotationLayers/AnnotationLayerModal.tsx

@@ -184,8 +184,7 @@ const AnnotationLayerModal: FunctionComponent<AnnotationLayerModalProps> = ({
   useEffect(() => {
     if (
       isEditMode &&
-      (!currentLayer ||
+      (!currentLayer?.id ||
-        !currentLayer.id ||
         (layer && layer.id !== currentLayer.id) ||
         (isHidden && show))
     ) {

superset-frontend/src/features/annotations/AnnotationModal.tsx

@@ -231,8 +231,7 @@ const AnnotationModal: FunctionComponent<AnnotationModalProps> = ({
   useEffect(() => {
     if (
       isEditMode &&
-      (!currentAnnotation ||
+      (!currentAnnotation?.id ||
-        !currentAnnotation.id ||
         (annotation && annotation.id !== currentAnnotation.id) ||
         show)
     ) {

superset-frontend/src/features/cssTemplates/CssTemplateModal.tsx

@@ -170,8 +170,7 @@ const CssTemplateModal: FunctionComponent<CssTemplateModalProps> = ({
   useEffect(() => {
     if (
       isEditMode &&
-      (!currentCssTemplate ||
+      (!currentCssTemplate?.id ||
-        !currentCssTemplate.id ||
         (cssTemplate && cssTemplate?.id !== currentCssTemplate.id) ||
         (isHidden && show))
     ) {

superset-frontend/webpack.config.js

@@ -419,12 +419,13 @@ const config = {
           {
             loader: '@svgr/webpack',
             options: {
+              icon: true,
+              svgo: false,
               svgoConfig: {
-                plugins: {
+                plugins: [{ removeViewBox: false }],
-                  removeViewBox: false,
-                  icon: true,
-                },
               },
+              titleProp: true,
+              ref: true,
             },
           },
         ],