refactor(frontend): move utils to TypeScript (#9820)

* refactor(frontend): move utils to typescript (#9101)

* refactor(frontend): don't export interfaces

* test(frontend): update types and test for isValidChild

superset-frontend/spec/javascripts/dashboard/util/isValidChild_spec.ts

@@ -31,7 +31,7 @@ import {
   TAB_TYPE as TAB,
 } from 'src/dashboard/util/componentTypes';
 
-const getIndentation = depth =>
+const getIndentation = (depth: number) =>
   Array(depth * 3)
     .fill('')
     .join('-');
@@ -136,12 +136,14 @@ describe('isValidChild', () => {
     invalidExamples.forEach((example, exampleIdx) => {
       let childDepth = 0;
       example.forEach((childType, i) => {
-        const shouldTestChild = Array.isArray(childType);
-
-        if (i > 0 && shouldTestChild) {
+        // should test child
+        if (i > 0 && Array.isArray(childType)) {
           const parentDepth = childDepth - 1;
           const parentType = example[i - 1];
 
+          if (typeof parentType !== 'string')
+            throw TypeError('parent must be string');
+
           it(`(${exampleIdx})${getIndentation(
             childDepth,
           )}${parentType} (depth ${parentDepth}) > ${childType} ❌`, () => {
@@ -149,7 +151,7 @@ describe('isValidChild', () => {
               isValidChild({
                 parentDepth,
                 parentType,
-                childType,
+                childType: childType[0],
               }),
             ).toBe(false);
           });

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

@@ -18,6 +18,6 @@
  */
 import { COLUMN_TYPE, CHART_TYPE, MARKDOWN_TYPE } from './componentTypes';
 
-export default function componentIsResizable(entity) {
+export default function componentIsResizable(entity: { type: string }) {
   return [COLUMN_TYPE, CHART_TYPE, MARKDOWN_TYPE].indexOf(entity.type) > -1;
 }

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

@@ -16,11 +16,20 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-export function getDashboardFilterKey({ chartId, column }) {
+
+interface GetDashboardFilterKeyProps {
+  chartId: string;
+  column: string;
+}
+
+export function getDashboardFilterKey({
+  chartId,
+  column,
+}: GetDashboardFilterKeyProps) {
   return `${chartId}_${column}`;
 }
 
-export function getChartIdAndColumnFromFilterKey(key) {
+export function getChartIdAndColumnFromFilterKey(key: string) {
   const [chartId, ...parts] = key.split('_');
   const column = parts.slice().join('_');
   return { chartId: parseInt(chartId, 10), column };

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

@@ -18,20 +18,33 @@
  */
 import { getChartIdAndColumnFromFilterKey } from './getDashboardFilterKey';
 
+interface FilterScopeMap {
+  [key: string]: number[];
+}
+
+interface GetRevertFilterScopeProps {
+  checked: string[];
+  filterFields: string[];
+  filterScopeMap: FilterScopeMap;
+}
+
 export default function getRevertedFilterScope({
   checked = [],
   filterFields = [],
   filterScopeMap = {},
-}) {
-  const checkedChartIdsByFilterField = checked.reduce((map, value) => {
-    const [chartId, filterField] = value.split(':');
-    return {
-      ...map,
-      [filterField]: (map[filterField] || []).concat(parseInt(chartId, 10)),
-    };
-  }, {});
+}: GetRevertFilterScopeProps) {
+  const checkedChartIdsByFilterField = checked.reduce<FilterScopeMap>(
+    (map, value) => {
+      const [chartId, filterField] = value.split(':');
+      return {
+        ...map,
+        [filterField]: (map[filterField] || []).concat(parseInt(chartId, 10)),
+      };
+    },
+    {},
+  );
 
-  return filterFields.reduce((map, filterField) => {
+  return filterFields.reduce<FilterScopeMap>((map, filterField) => {
     const { chartId } = getChartIdAndColumnFromFilterKey(filterField);
     // force display filter_box chart as unchecked, but show checkbox as disabled
     const updatedCheckedIds = (

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

@@ -105,12 +105,21 @@ const parentMaxDepthLookup = {
   [MARKDOWN_TYPE]: {},
 };
 
-export default function isValidChild({ parentType, childType, parentDepth }) {
+interface IsValidChildProps {
+  parentType?: string;
+  childType?: string;
+  parentDepth?: unknown;
+}
+
+export default function isValidChild(child: IsValidChildProps): boolean {
+  const { parentType, childType, parentDepth } = child;
   if (!parentType || !childType || typeof parentDepth !== 'number') {
     return false;
   }
 
-  const maxParentDepth = (parentMaxDepthLookup[parentType] || {})[childType];
+  const maxParentDepth: number | undefined = (parentMaxDepthLookup[
+    parentType
+  ] || {})[childType];
 
   return typeof maxParentDepth === 'number' && parentDepth <= maxParentDepth;
 }

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

@@ -16,17 +16,23 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-const stopPeriodicRender = refreshTimer => {
+const stopPeriodicRender = (refreshTimer?: number) => {
   if (refreshTimer) {
     clearInterval(refreshTimer);
   }
 };
 
+interface SetPeriodicRunnerProps {
+  interval?: number;
+  periodicRender: TimerHandler;
+  refreshTimer?: number;
+}
+
 export default function setPeriodicRunner({
   interval = 0,
   periodicRender,
   refreshTimer,
-}) {
+}: SetPeriodicRunnerProps) {
   stopPeriodicRender(refreshTimer);
 
   if (interval > 0) {