chore: Remove immutable.js (#16823)

superset-frontend/package-lock.json

@@ -26,7 +26,7 @@
         "@superset-ui/legacy-plugin-chart-heatmap": "^0.18.6",
         "@superset-ui/legacy-plugin-chart-histogram": "^0.18.6",
         "@superset-ui/legacy-plugin-chart-horizon": "^0.18.6",
-        "@superset-ui/legacy-plugin-chart-map-box": "^0.18.6",
+        "@superset-ui/legacy-plugin-chart-map-box": "^0.18.7",
         "@superset-ui/legacy-plugin-chart-paired-t-test": "^0.18.6",
         "@superset-ui/legacy-plugin-chart-parallel-coordinates": "^0.18.6",
         "@superset-ui/legacy-plugin-chart-partition": "^0.18.6",
@@ -67,7 +67,6 @@
         "global-box": "^1.2.0",
         "html-webpack-plugin": "^5.3.2",
         "immer": "^9.0.6",
-        "immutable": "^4.0.0-rc.12",
         "interweave": "^11.2.0",
         "jquery": "^3.5.1",
         "js-levenshtein": "^1.1.6",
@@ -11819,13 +11818,12 @@
       }
     },
     "node_modules/@superset-ui/legacy-plugin-chart-map-box": {
-      "version": "0.18.6",
+      "version": "0.18.7",
-      "resolved": "https://registry.npmjs.org/@superset-ui/legacy-plugin-chart-map-box/-/legacy-plugin-chart-map-box-0.18.6.tgz",
+      "resolved": "https://registry.npmjs.org/@superset-ui/legacy-plugin-chart-map-box/-/legacy-plugin-chart-map-box-0.18.7.tgz",
-      "integrity": "sha512-WzcxWP0fmslZilO/5lERSyKzg0BBKqSLPqgTOH1pt5NE7h0AUJosPsCDZpdiFYE7qLE37jJOIY0o5uD9PrVxsA==",
+      "integrity": "sha512-//ljAu8r1yrHLrIM80DoK4JJgSbh8tAOzBMMdZtz0X+VHNpTeiQKQaO+9Sp/eDfBJuZuRu6TrrWBrDt57fJQmQ==",
       "dependencies": {
         "@superset-ui/chart-controls": "0.18.6",
         "@superset-ui/core": "0.18.6",
-        "immutable": "^3.8.2",
         "mapbox-gl": "^0.53.0",
         "prop-types": "^15.6.2",
         "react-map-gl": "^4.0.10",
@@ -11836,14 +11834,6 @@
         "react": "^15 || ^16"
       }
     },
-    "node_modules/@superset-ui/legacy-plugin-chart-map-box/node_modules/immutable": {
-      "version": "3.8.2",
-      "resolved": "https://registry.npmjs.org/immutable/-/immutable-3.8.2.tgz",
-      "integrity": "sha1-wkOZUUVbs5kT2vKBN28VMOEErfM=",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/@superset-ui/legacy-plugin-chart-paired-t-test": {
       "version": "0.18.6",
       "resolved": "https://registry.npmjs.org/@superset-ui/legacy-plugin-chart-paired-t-test/-/legacy-plugin-chart-paired-t-test-0.18.6.tgz",
@@ -25648,11 +25638,6 @@
       "resolved": "https://registry.npmjs.org/immutability-helper/-/immutability-helper-3.1.1.tgz",
       "integrity": "sha512-Q0QaXjPjwIju/28TsugCHNEASwoCcJSyJV3uO1sOIQGI0jKgm9f41Lvz0DZj3n46cNCyAZTsEYoY4C2bVRUzyQ=="
     },
-    "node_modules/immutable": {
-      "version": "4.0.0-rc.12",
-      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.0.0-rc.12.tgz",
-      "integrity": "sha512-0M2XxkZLx/mi3t8NVwIm1g8nHoEmM9p9UBl/G9k4+hm0kBgOVdMV/B3CY5dQ8qG8qc80NN4gDV4HQv6FTJ5q7A=="
-    },
     "node_modules/import-cwd": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-2.1.0.tgz",
@@ -51955,25 +51940,17 @@
       }
     },
     "@superset-ui/legacy-plugin-chart-map-box": {
-      "version": "0.18.6",
+      "version": "0.18.7",
-      "resolved": "https://registry.npmjs.org/@superset-ui/legacy-plugin-chart-map-box/-/legacy-plugin-chart-map-box-0.18.6.tgz",
+      "resolved": "https://registry.npmjs.org/@superset-ui/legacy-plugin-chart-map-box/-/legacy-plugin-chart-map-box-0.18.7.tgz",
-      "integrity": "sha512-WzcxWP0fmslZilO/5lERSyKzg0BBKqSLPqgTOH1pt5NE7h0AUJosPsCDZpdiFYE7qLE37jJOIY0o5uD9PrVxsA==",
+      "integrity": "sha512-//ljAu8r1yrHLrIM80DoK4JJgSbh8tAOzBMMdZtz0X+VHNpTeiQKQaO+9Sp/eDfBJuZuRu6TrrWBrDt57fJQmQ==",
       "requires": {
         "@superset-ui/chart-controls": "0.18.6",
         "@superset-ui/core": "0.18.6",
-        "immutable": "^3.8.2",
         "mapbox-gl": "^0.53.0",
         "prop-types": "^15.6.2",
         "react-map-gl": "^4.0.10",
         "supercluster": "^4.1.1",
         "viewport-mercator-project": "^6.1.1"
-      },
-      "dependencies": {
-        "immutable": {
-          "version": "3.8.2",
-          "resolved": "https://registry.npmjs.org/immutable/-/immutable-3.8.2.tgz",
-          "integrity": "sha1-wkOZUUVbs5kT2vKBN28VMOEErfM="
-        }
       }
     },
     "@superset-ui/legacy-plugin-chart-paired-t-test": {
@@ -63077,11 +63054,6 @@
       "resolved": "https://registry.npmjs.org/immutability-helper/-/immutability-helper-3.1.1.tgz",
       "integrity": "sha512-Q0QaXjPjwIju/28TsugCHNEASwoCcJSyJV3uO1sOIQGI0jKgm9f41Lvz0DZj3n46cNCyAZTsEYoY4C2bVRUzyQ=="
     },
-    "immutable": {
-      "version": "4.0.0-rc.12",
-      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.0.0-rc.12.tgz",
-      "integrity": "sha512-0M2XxkZLx/mi3t8NVwIm1g8nHoEmM9p9UBl/G9k4+hm0kBgOVdMV/B3CY5dQ8qG8qc80NN4gDV4HQv6FTJ5q7A=="
-    },
     "import-cwd": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-2.1.0.tgz",

superset-frontend/package.json

@@ -78,7 +78,7 @@
     "@superset-ui/legacy-plugin-chart-heatmap": "^0.18.6",
     "@superset-ui/legacy-plugin-chart-histogram": "^0.18.6",
     "@superset-ui/legacy-plugin-chart-horizon": "^0.18.6",
-    "@superset-ui/legacy-plugin-chart-map-box": "^0.18.6",
+    "@superset-ui/legacy-plugin-chart-map-box": "^0.18.7",
     "@superset-ui/legacy-plugin-chart-paired-t-test": "^0.18.6",
     "@superset-ui/legacy-plugin-chart-parallel-coordinates": "^0.18.6",
     "@superset-ui/legacy-plugin-chart-partition": "^0.18.6",
@@ -119,7 +119,6 @@
     "global-box": "^1.2.0",
     "html-webpack-plugin": "^5.3.2",
     "immer": "^9.0.6",
-    "immutable": "^4.0.0-rc.12",
     "interweave": "^11.2.0",
     "jquery": "^3.5.1",
     "js-levenshtein": "^1.1.6",

superset-frontend/src/components/FilterableTable/FilterableTable.tsx

@@ -16,7 +16,6 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { List } from 'immutable';
 import JSONbig from 'json-bigint';
 import React, { PureComponent } from 'react';
 import JSONTree from 'react-json-tree';
@@ -128,7 +127,7 @@ export default class FilterableTable extends PureComponent<
     expandedColumns: [],
   };
 
-  list: List<Datum>;
+  list: Datum[];
 
   complexColumns: Record<string, boolean>;
 
@@ -142,7 +141,7 @@ export default class FilterableTable extends PureComponent<
 
   constructor(props: FilterableTableProps) {
     super(props);
-    this.list = List(this.formatTableData(props.data));
+    this.list = this.formatTableData(props.data);
     this.addJsonModal = this.addJsonModal.bind(this);
     this.getCellContent = this.getCellContent.bind(this);
     this.renderGridCell = this.renderGridCell.bind(this);
@@ -182,19 +181,20 @@ export default class FilterableTable extends PureComponent<
     this.fitTableToWidthIfNeeded();
   }
 
-  getDatum(list: List<Datum>, index: number) {
+  getDatum(list: Datum[], index: number) {
-    return list.get(index % list.size);
+    return list[index % list.length];
   }
 
   getWidthsForColumns() {
     const PADDING = 40; // accounts for cell padding and width of sorting icon
     const widthsByColumnKey = {};
-    const cellContent = [].concat(
+    const cellContent = ([] as string[]).concat(
       ...this.props.orderedColumnKeys.map(key => {
         const cellContentList = this.list.map((data: Datum) =>
           this.getCellContent({ cellData: data[key], columnKey: key }),
-        ) as List<string | JSX.Element>;
+        );
-        return cellContentList.push(key).toJS();
+        cellContentList.push(key);
+        return cellContentList;
       }),
     );
 
@@ -210,8 +210,8 @@ export default class FilterableTable extends PureComponent<
       widthsByColumnKey[key] =
         colWidths
           .slice(
-            index * (this.list.size + 1),
+            index * (this.list.length + 1),
-            (index + 1) * (this.list.size + 1),
+            (index + 1) * (this.list.length + 1),
           )
           .reduce((a, b) => Math.max(a, b)) + PADDING;
     });
@@ -225,9 +225,9 @@ export default class FilterableTable extends PureComponent<
   }: {
     cellData: CellDataType;
     columnKey: string;
-  }): string | JSX.Element {
+  }) {
     if (cellData === null) {
-      return <i className="text-muted">NULL</i>;
+      return 'NULL';
     }
     const content = String(cellData);
     const firstCharacter = content.substring(0, 1);
@@ -414,8 +414,15 @@ export default class FilterableTable extends PureComponent<
     style: React.CSSProperties;
   }) {
     const columnKey = this.props.orderedColumnKeys[columnIndex];
-    const cellData = this.list.get(rowIndex)[columnKey];
+    const cellData = this.list[rowIndex][columnKey];
-    const content = this.getCellContent({ cellData, columnKey });
+    const content =
+      cellData === null ? (
+        <i className="text-muted">
+          {this.getCellContent({ cellData, columnKey })}
+        </i>
+      ) : (
+        this.getCellContent({ cellData, columnKey })
+      );
     const cellNode = (
       <div
         key={key}
@@ -493,7 +500,7 @@ export default class FilterableTable extends PureComponent<
                   onScroll={onScroll}
                   overscanColumnCount={overscanColumnCount}
                   overscanRowCount={overscanRowCount}
-                  rowCount={this.list.size}
+                  rowCount={this.list.length}
                   rowHeight={rowHeight}
                   width={this.totalTableWidth}
                 />
@@ -530,18 +537,18 @@ export default class FilterableTable extends PureComponent<
       rowHeight,
     } = this.props;
 
-    let sortedAndFilteredList: List<Datum> = this.list;
+    let sortedAndFilteredList = this.list;
     // filter list
     if (filterText) {
       sortedAndFilteredList = this.list.filter((row: Datum) =>
         this.hasMatch(filterText, row),
-      ) as List<Datum>;
+      );
     }
     // sort list
     if (sortBy) {
       sortedAndFilteredList = sortedAndFilteredList.sort(
         this.sortResults(sortBy, sortDirection === SortDirection.DESC),
-      ) as List<Datum>;
+      );
     }
 
     let { height } = this.props;
@@ -572,7 +579,7 @@ export default class FilterableTable extends PureComponent<
             rowClassName={this.rowClassName}
             rowHeight={rowHeight}
             rowGetter={rowGetter}
-            rowCount={sortedAndFilteredList.size}
+            rowCount={sortedAndFilteredList.length}
             sort={this.sort}
             sortBy={sortBy}
             sortDirection={sortDirection}