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

2023-07-11 05:44:35 +03:00 · 2023-07-11 05:44:35 +03:00 · 117435f0d8
parent 7b957369fc
commit 117435f0d8
18 changed files with 14463 additions and 11761 deletions
--- a/superset-frontend/package-lock.json
+++ b/superset-frontend/package-lock.json
--- a/superset-frontend/package.json
+++ b/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/compat-data": "^7.18.8",
-    "@babel/core": "^7.18.10",
-    "@babel/eslint-parser": "^7.18.9",
-    "@babel/node": "^7.18.10",
+    "@babel/cli": "^7.22.6",
+    "@babel/compat-data": "^7.22.6",
+    "@babel/core": "^7.22.8",
+    "@babel/eslint-parser": "^7.22.7",
+    "@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/preset-env": "^7.18.10",
-    "@babel/preset-react": "^7.18.6",
-    "@babel/register": "^7.18.9",
+    "@babel/plugin-transform-runtime": "^7.22.7",
+    "@babel/preset-env": "^7.22.7",
+    "@babel/preset-react": "^7.22.5",
+    "@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/parser": "^5.3.0",
+    "@typescript-eslint/eslint-plugin": "^5.62.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",
-    "cross-env": "^5.2.0",
-    "css-loader": "^6.2.0",
-    "css-minimizer-webpack-plugin": "^3.0.2",
+    "copy-webpack-plugin": "^9.1.0",
+    "cross-env": "^5.2.1",
+    "css-loader": "^6.8.1",
+    "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-bundle-analyzer": "^4.4.2",
-    "webpack-cli": "^4.8.0",
-    "webpack-dev-server": "^4.10.1",
-    "webpack-manifest-plugin": "^4.0.2",
-    "webpack-sources": "^3.2.0"
+    "webpack": "^5.88.1",
+    "webpack-bundle-analyzer": "^4.9.0",
+    "webpack-cli": "^4.10.0",
+    "webpack-dev-server": "^4.15.1",
+    "webpack-manifest-plugin": "^4.1.1",
+    "webpack-sources": "^3.2.3"
  },
  "engines": {
    "node": "^16.9.1",
--- a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-table/TableStories.tsx
+++ b/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 {
--- a/superset-frontend/plugins/plugin-chart-echarts/src/utils/controls.ts
+++ b/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);
--- a/superset-frontend/plugins/plugin-chart-table/src/transformProps.ts
+++ b/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(
--- a/superset-frontend/src/SqlLab/components/RunQueryActionButton/index.tsx
+++ b/superset-frontend/src/SqlLab/components/RunQueryActionButton/index.tsx
@ -105,9 +105,9 @@ const RunQueryActionButton = ({
    : Button;

  const sqlContent = selectedText || sql || '';
-  const isDisabled =
-    !sqlContent ||
-    !sqlContent.replace(/(\/\*[^*]*\*\/)|(\/\/[^*]*)|(--[^.].*)/gm, '').trim();
+  const isDisabled = !sqlContent
+    ?.replace(/(\/\*[^*]*\*\/)|(\/\/[^*]*)|(--[^.].*)/gm, '')
+    .trim();

  const stopButtonTooltipText = useMemo(
    () =>
--- a/superset-frontend/src/SqlLab/components/TableElement/index.tsx
+++ b/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)) {
-      // hide partition and metadata card view
+    if (!partitions) {
+      // hide partition card view
      return null;
    }

--- a/superset-frontend/src/components/DeprecatedSelect/utils.ts
+++ b/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)
-      ? val[valueKey]
-      : val;
+    const realVal = value?.hasOwnProperty(valueKey) ? val[valueKey] : val;
    return (
      flatOptions.find(x => x === realVal || x[valueKey] === realVal) || val
    );
--- a/superset-frontend/src/components/Icons/Icon.tsx
+++ b/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(
-          `!!@svgr/webpack?-svgo,+titleProp,+ref!src/assets/images/icons/${fileName}.svg`
-        )
+        await import(`!!@svgr/webpack!src/assets/images/icons/${fileName}.svg`)
      ).default;
      if (!cancelled) {
        setLoaded(true);
--- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/DefaultValue.tsx
+++ b/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;
--- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/state.ts
+++ b/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,
--- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/utils.ts
+++ b/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] }[];
--- a/superset-frontend/src/dashboard/util/isValidChild.ts
+++ b/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[
-    parentType
-  ] || {})[childType];
+  const maxParentDepth: number | undefined =
+    parentMaxDepthLookup[parentType]?.[childType];

  return typeof maxParentDepth === 'number' && parentDepth <= maxParentDepth;
 }
--- a/superset-frontend/src/explore/components/ControlPanelsContainer.tsx
+++ b/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 =
-        !adhoc_filters ||
-        !adhoc_filters.find(
-          filter =>
-            filter.expressionType === 'SIMPLE' &&
-            filter.operator === Operators.TEMPORAL_RANGE &&
-            filter.subject === x_axis,
-        );
+      const noFilter = !adhoc_filters?.find(
+        filter =>
+          filter.expressionType === 'SIMPLE' &&
+          filter.operator === Operators.TEMPORAL_RANGE &&
+          filter.subject === x_axis,
+      );
      if (noFilter) {
        confirm({
          title: t('The X-axis is not on the filters list'),
--- a/superset-frontend/src/features/annotationLayers/AnnotationLayerModal.tsx
+++ b/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))
    ) {
--- a/superset-frontend/src/features/annotations/AnnotationModal.tsx
+++ b/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)
    ) {
--- a/superset-frontend/src/features/cssTemplates/CssTemplateModal.tsx
+++ b/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))
    ) {
--- a/superset-frontend/webpack.config.js
+++ b/superset-frontend/webpack.config.js
@ -419,12 +419,13 @@ const config = {
          {
            loader: '@svgr/webpack',
            options: {
+              icon: true,
+              svgo: false,
              svgoConfig: {
-                plugins: {
-                  removeViewBox: false,
-                  icon: true,
-                },
+                plugins: [{ removeViewBox: false }],
              },
+              titleProp: true,
+              ref: true,
            },
          },
        ],