Eslint/no restricted syntax

.github/workflows/prefer-typescript.yml

@@ -11,7 +11,7 @@ jobs:
     steps:
       - name: Get changed files
         id: changed
-        uses: trilom/file-changes-action@master
+        uses: trilom/file-changes-action@v1.2.4
         with:
           githubToken: ${{ secrets.GITHUB_TOKEN }}
 
@@ -21,7 +21,9 @@ jobs:
           js_files_added() {
             jq -r '
               map(
-                select((endswith(".js") or endswith(".jsx"))
+                select(
+                  endswith(".js") or endswith(".jsx")
+                )
               ) | join("\n")
             ' ${HOME}/files_added.json
           }

superset-frontend/.eslintrc.js

@@ -101,7 +101,6 @@ module.exports = {
         'no-multi-spaces': 0,
         'no-prototype-builtins': 0,
         'no-restricted-properties': 0,
-        'no-restricted-syntax': 0,
         'no-restricted-imports': [
           'error',
           {
@@ -215,7 +214,6 @@ module.exports = {
     'no-multi-spaces': 0,
     'no-prototype-builtins': 0,
     'no-restricted-properties': 0,
-    'no-restricted-syntax': 0,
     'no-restricted-imports': [
       'error',
       {

superset-frontend/spec/javascripts/explore/controlUtils_spec.jsx

@@ -17,19 +17,20 @@
  * under the License.
  */
 
-import React from 'react';
-import {
-  getChartControlPanelRegistry,
-  ColumnOption,
-  t,
-} from '@superset-ui/core';
+import { getChartControlPanelRegistry, t } from '@superset-ui/core';
 import {
   getControlConfig,
   getControlState,
   getFormDataFromControls,
   applyMapStateToPropsToControl,
   getAllControlsState,
+  findControlItem,
 } from 'src/explore/controlUtils';
+import {
+  controlPanelSectionsChartOptions,
+  controlPanelSectionsChartOptionsOnlyColorScheme,
+  controlPanelSectionsChartOptionsTable,
+} from 'spec/javascripts/explore/fixtures';
 
 describe('controlUtils', () => {
   const state = {
@@ -43,97 +44,18 @@ describe('controlUtils', () => {
   beforeAll(() => {
     getChartControlPanelRegistry()
       .registerValue('test-chart', {
-        controlPanelSections: [
-          {
-            label: t('Chart Options'),
-            expanded: true,
-            controlSetRows: [
-              [
-                'color_scheme',
-                {
-                  name: 'rose_area_proportion',
-                  config: {
-                    type: 'CheckboxControl',
-                    label: t('Use Area Proportions'),
-                    description: t(
-                      'Check if the Rose Chart should use segment area instead of ' +
-                        'segment radius for proportioning',
-                    ),
-                    default: false,
-                    renderTrigger: true,
-                  },
-                },
-              ],
-              [
-                {
-                  name: 'stacked_style',
-                  config: {
-                    type: 'SelectControl',
-                    label: t('Stacked Style'),
-                    renderTrigger: true,
-                    choices: [
-                      ['stack', 'stack'],
-                      ['stream', 'stream'],
-                      ['expand', 'expand'],
-                    ],
-                    default: 'stack',
-                    description: '',
-                  },
-                },
-              ],
-            ],
-          },
-        ],
+        controlPanelSections: controlPanelSectionsChartOptions,
       })
       .registerValue('test-chart-override', {
-        controlPanelSections: [
-          {
-            label: t('Chart Options'),
-            expanded: true,
-            controlSetRows: [['color_scheme']],
-          },
-        ],
+        controlPanelSections: controlPanelSectionsChartOptionsOnlyColorScheme,
         controlOverrides: {
           color_scheme: {
             label: t('My beautiful colors'),
           },
         },
       })
       .registerValue('table', {
-        controlPanelSections: [
-          {
-            label: t('Chart Options'),
-            expanded: true,
-            controlSetRows: [
-              [
-                'metric',
-                'metrics',
-                {
-                  name: 'all_columns',
-                  config: {
-                    type: 'SelectControl',
-                    queryField: 'columns',
-                    multi: true,
-                    label: t('Columns'),
-                    default: [],
-                    description: t('Columns to display'),
-                    optionRenderer: c => <ColumnOption column={c} showType />,
-                    valueRenderer: c => <ColumnOption column={c} />,
-                    valueKey: 'column_name',
-                    allowAll: true,
-                    mapStateToProps: stateRef => ({
-                      options: stateRef.datasource
-                        ? stateRef.datasource.columns
-                        : [],
-                    }),
-                    commaChoosesOption: false,
-                    freeForm: true,
-                  },
-                },
-              ],
-            ],
-          },
-        ],
+        controlPanelSections: controlPanelSectionsChartOptionsTable,
       });
   });
 
@@ -287,4 +209,38 @@ describe('controlUtils', () => {
       });
     });
   });
+
+  describe('findControlItem', () => {
+    it('find control as a string', () => {
+      const controlItem = findControlItem(
+        controlPanelSectionsChartOptions,
+        'color_scheme',
+      );
+      expect(controlItem).toEqual('color_scheme');
+    });
+
+    it('find control as a control object', () => {
+      let controlItem = findControlItem(
+        controlPanelSectionsChartOptions,
+        'rose_area_proportion',
+      );
+      expect(controlItem.name).toEqual('rose_area_proportion');
+      expect(controlItem).toHaveProperty('config');
+
+      controlItem = findControlItem(
+        controlPanelSectionsChartOptions,
+        'stacked_style',
+      );
+      expect(controlItem.name).toEqual('stacked_style');
+      expect(controlItem).toHaveProperty('config');
+    });
+
+    it('returns null when key is not found', () => {
+      const controlItem = findControlItem(
+        controlPanelSectionsChartOptions,
+        'non_existing_key',
+      );
+      expect(controlItem).toBeNull();
+    });
+  });
 });

superset-frontend/spec/javascripts/explore/fixtures.jsx

@@ -0,0 +1,104 @@
+/**
+ * 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.
+ */
+
+import React from 'react';
+import { ColumnOption, t } from '@superset-ui/core';
+
+export const controlPanelSectionsChartOptions = [
+  {
+    label: t('Chart Options'),
+    expanded: true,
+    controlSetRows: [
+      [
+        'color_scheme',
+        {
+          name: 'rose_area_proportion',
+          config: {
+            type: 'CheckboxControl',
+            label: t('Use Area Proportions'),
+            description: t(
+              'Check if the Rose Chart should use segment area instead of ' +
+                'segment radius for proportioning',
+            ),
+            default: false,
+            renderTrigger: true,
+          },
+        },
+      ],
+      [
+        {
+          name: 'stacked_style',
+          config: {
+            type: 'SelectControl',
+            label: t('Stacked Style'),
+            renderTrigger: true,
+            choices: [
+              ['stack', 'stack'],
+              ['stream', 'stream'],
+              ['expand', 'expand'],
+            ],
+            default: 'stack',
+            description: '',
+          },
+        },
+      ],
+    ],
+  },
+];
+
+export const controlPanelSectionsChartOptionsOnlyColorScheme = [
+  {
+    label: t('Chart Options'),
+    expanded: true,
+    controlSetRows: [['color_scheme']],
+  },
+];
+
+export const controlPanelSectionsChartOptionsTable = [
+  {
+    label: t('Chart Options'),
+    expanded: true,
+    controlSetRows: [
+      [
+        'metric',
+        'metrics',
+        {
+          name: 'all_columns',
+          config: {
+            type: 'SelectControl',
+            queryField: 'columns',
+            multi: true,
+            label: t('Columns'),
+            default: [],
+            description: t('Columns to display'),
+            optionRenderer: c => <ColumnOption column={c} showType />,
+            valueRenderer: c => <ColumnOption column={c} />,
+            valueKey: 'column_name',
+            allowAll: true,
+            mapStateToProps: stateRef => ({
+              options: stateRef.datasource ? stateRef.datasource.columns : [],
+            }),
+            commaChoosesOption: false,
+            freeForm: true,
+          },
+        },
+      ],
+    ],
+  },
+];

superset-frontend/src/SqlLab/components/TabbedSqlEditors.jsx

@@ -173,12 +173,9 @@ class TabbedSqlEditors extends React.PureComponent {
   UNSAFE_componentWillReceiveProps(nextProps) {
     const nextActiveQeId =
       nextProps.tabHistory[nextProps.tabHistory.length - 1];
-    const queriesArray = [];
-    for (const id in nextProps.queries) {
-      if (nextProps.queries[id].sqlEditorId === nextActiveQeId) {
-        queriesArray.push(nextProps.queries[id]);
-      }
-    }
+    const queriesArray = Object.values(nextProps.queries).filter(
+      query => query.sqlEditorId === nextActiveQeId,
+    );
     if (!areArraysShallowEqual(queriesArray, this.state.queriesArray)) {
       this.setState({ queriesArray });
     }

superset-frontend/src/SqlLab/components/TableElement.jsx

@@ -110,10 +110,9 @@ class TableElement extends React.PureComponent {
           />
         );
       }
-      let latest = [];
-      for (const k in table.partitions.latest) {
-        latest.push(`${k}=${table.partitions.latest[k]}`);
-      }
+      let latest = Object.entries(table.partitions.latest).map(
+        ([key, value]) => `${key}=${value}`,
+      );
       latest = latest.join('/');
       header = (
         <Well bsSize="small">

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

@@ -493,8 +493,7 @@ export default function sqlLabReducer(state = {}, action) {
       // Fetch the updates to the queries present in the store.
       let change = false;
       let { queriesLastUpdate } = state;
-      for (const id in action.alteredQueries) {
-        const changedQuery = action.alteredQueries[id];
+      Object.entries(action.alteredQueries).forEach(([id, changedQuery]) => {
         if (
           !state.queries.hasOwnProperty(id) ||
           (state.queries[id].state !== 'stopped' &&
@@ -506,7 +505,7 @@ export default function sqlLabReducer(state = {}, action) {
           newQueries[id] = { ...state.queries[id], ...changedQuery };
           change = true;
         }
-      }
+      });
       if (!change) {
         newQueries = state.queries;
       }