Update Typescript (saleor#2494)

* Update TypeScript

* Fix recursive typing in navigation

* Fix linter issue

* Update lockfile

package.json

@@ -136,16 +136,16 @@
     "@types/react-infinite-scroller": "^1.2.1",
     "@types/react-router-dom": "^4.3.4",
     "@types/react-sortable-hoc": "^0.7.1",
-    "@types/react-sortable-tree": "^0.3.6",
+    "@types/react-sortable-tree": "^0.3.15",
     "@types/react-test-renderer": "^16.9.5",
     "@types/semver-compare": "^1.0.1",
     "@types/setup-polly-jest": "^0.5.0",
     "@types/storybook__addon-storyshots": "^3.4.9",
     "@types/storybook__react": "^4.0.2",
     "@types/url-join": "^4.0.0",
     "@types/webappsec-credential-management": "^0.5.1",
-    "@typescript-eslint/eslint-plugin": "^4.16.1",
-    "@typescript-eslint/parser": "^4.16.1",
+    "@typescript-eslint/eslint-plugin": "^5.41.0",
+    "@typescript-eslint/parser": "^5.41.0",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.7",
     "babel-core": "^7.0.0-bridge.0",
     "babel-jest": "^23.6.0",
@@ -199,7 +199,7 @@
     "start-server-and-test": "^1.11.0",
     "ts-jest": "^27.0.7",
     "tsconfig-paths-webpack-plugin": "^3.2.0",
-    "typescript": "^4.3.5",
+    "typescript": "^4.8.4",
     "webpack": "^4.35.3",
     "webpack-bundle-analyzer": "^4.4.1",
     "webpack-cli": "^3.3.6",

src/components/TableButtonWrapper/TableButtonWrapper.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-interface TableButtonWrapper {
+export interface TableButtonWrapper {
   children: React.ReactElement<{
     onClick?: (e: React.MouseEvent<any>) => void;
     href?: string;
@@ -19,8 +19,7 @@ interface TableButtonWrapper {
  */
 export const TableButtonWrapper = <T extends HTMLElement>({
   children,
-}: // eslint-disable-next-line @typescript-eslint/no-unused-vars
-TableButtonWrapper) => {
+}: TableButtonWrapper) => {
   const onClick = (e: React.MouseEvent<T>) => {
     if (!children.props.href) {
       // <TableRowLink> is a <a> that wraps each <tr>

src/navigation/components/MenuDetailsPage/tree.test.ts

@@ -1,10 +1,10 @@
-import { MenuDetailsFragment, MenuDetailsQuery } from "@saleor/graphql";
+import { RecursiveMenuItem } from "@saleor/navigation/types";
 
 import { menu } from "../../fixtures";
 import { TreeOperation } from "../MenuItems";
 import { computeRelativeTree } from "./tree";
 
-const relativeOutput: Array<MenuDetailsQuery["menu"]["items"]> = [
+const relativeOutput: RecursiveMenuItem[][] = [
   // no moves
   [
     {
@@ -1152,10 +1152,7 @@ const testTable: TreeOperation[][] = [
 ];
 
 // Readability FTW
-function innerTreeToString(
-  tree: MenuDetailsFragment["items"][0],
-  level: number,
-): string {
+function innerTreeToString(tree: RecursiveMenuItem, level: number): string {
   return (
     "\n" +
     "··".repeat(level) +
@@ -1166,7 +1163,7 @@ function innerTreeToString(
     )
   );
 }
-function treeToString(tree: MenuDetailsFragment["items"]): string {
+function treeToString(tree: RecursiveMenuItem[]): string {
   return tree.reduce((acc, node) => acc + innerTreeToString(node, 0), "");
 }
 

src/navigation/components/MenuDetailsPage/tree.ts

@@ -1,11 +1,8 @@
-import { MenuDetailsFragment } from "@saleor/graphql";
+import { RecursiveMenuItem } from "@saleor/navigation/types";
 
 import { TreeOperation } from "../MenuItems";
 
-export function findNode(
-  tree: MenuDetailsFragment["items"],
-  id: string,
-): number[] {
+export function findNode(tree: RecursiveMenuItem[], id: string): number[] {
   const foundNodeIndex = tree.findIndex(node => node.id === id);
   if (tree.length === 0) {
     return [null];
@@ -21,19 +18,19 @@ export function findNode(
 }
 
 export function getNode(
-  tree: MenuDetailsFragment["items"],
+  tree: RecursiveMenuItem[],
   path: number[],
-): MenuDetailsFragment["items"][0] {
+): RecursiveMenuItem {
   if (path.length === 1) {
     return tree[path[0]];
   }
   return getNode([...tree[path[0]].children], path.slice(1));
 }
 
 function removeNode(
-  tree: MenuDetailsFragment["items"],
+  tree: RecursiveMenuItem[],
   path: number[],
-): MenuDetailsFragment["items"] {
+): RecursiveMenuItem[] {
   const removeIndex = path[0];
 
   if (path.length === 1) {
@@ -50,9 +47,9 @@ function removeNode(
 }
 
 interface InsertNodeInput {
-  tree: MenuDetailsFragment["items"];
+  tree: RecursiveMenuItem[];
   path: number[];
-  node: MenuDetailsFragment["items"][0];
+  node: RecursiveMenuItem;
   position: number;
 }
 
@@ -61,7 +58,7 @@ function insertNode({
   path,
   node,
   position,
-}: InsertNodeInput): MenuDetailsFragment["items"] {
+}: InsertNodeInput): RecursiveMenuItem[] {
   if (path.length === 0) {
     return [...tree.slice(0, position), node, ...tree.slice(position)];
   }
@@ -78,9 +75,9 @@ function insertNode({
 }
 
 function removeNodeAndChildren(
-  tree: MenuDetailsFragment["items"],
+  tree: RecursiveMenuItem[],
   operation: TreeOperation,
-): MenuDetailsFragment["items"] {
+): RecursiveMenuItem[] {
   const sourcePath = findNode(tree, operation.id);
   const node = getNode(tree, sourcePath);
 
@@ -101,9 +98,9 @@ function removeNodeAndChildren(
 }
 
 function permuteRelativeNode(
-  tree: MenuDetailsFragment["items"],
+  tree: RecursiveMenuItem[],
   permutation: TreeOperation,
-): MenuDetailsFragment["items"] {
+): RecursiveMenuItem[] {
   const sourcePath = findNode(tree, permutation.id);
   const node = getNode(tree, sourcePath);
 
@@ -128,18 +125,18 @@ function permuteRelativeNode(
 }
 
 function executeRelativeOperation(
-  tree: MenuDetailsFragment["items"],
+  tree: RecursiveMenuItem[],
   operation: TreeOperation,
-): MenuDetailsFragment["items"] {
+): RecursiveMenuItem[] {
   return operation.type === "move"
     ? permuteRelativeNode(tree, operation)
     : removeNodeAndChildren(tree, operation);
 }
 
 export function computeRelativeTree(
-  tree: MenuDetailsFragment["items"],
+  tree: RecursiveMenuItem[],
   operations: TreeOperation[],
-) {
+): RecursiveMenuItem[] {
   const newTree = operations.reduce(
     (acc, operation) => executeRelativeOperation(acc, operation),
     JSON.parse(JSON.stringify(tree)),

src/navigation/components/MenuItems/MenuItems.tsx

@@ -2,7 +2,6 @@ import { Card, CardActions, Paper, Typography } from "@material-ui/core";
 import EditIcon from "@material-ui/icons/Edit";
 import CardTitle from "@saleor/components/CardTitle";
 import Skeleton from "@saleor/components/Skeleton";
-import { MenuDetailsFragment } from "@saleor/graphql";
 import { buttonMessages } from "@saleor/intl";
 import {
   Button,
@@ -11,21 +10,29 @@ import {
   makeStyles,
   useTheme,
 } from "@saleor/macaw-ui";
+import { RecursiveMenuItem } from "@saleor/navigation/types";
 import classNames from "classnames";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
-import SortableTree, { NodeRendererProps, TreeItem } from "react-sortable-tree";
+import SortableTree, { NodeRendererProps } from "react-sortable-tree";
 
 import Draggable from "../../../icons/Draggable";
 import { MenuItemType } from "../MenuItemDialog";
-import { getDiff, getNodeData, getNodeQuantity, TreeOperation } from "./tree";
+import {
+  getDiff,
+  getNodeData,
+  getNodeQuantity,
+  MenuTreeItem,
+  TreeItemProps,
+  TreeOperation,
+} from "./tree";
 
 const NODE_HEIGHT = 56;
 const NODE_MARGIN = 40;
 
 export interface MenuItemsProps {
   canUndo: boolean;
-  items: MenuDetailsFragment["items"];
+  items: RecursiveMenuItem[];
   onChange: (operations: TreeOperation[]) => void;
   onItemAdd: () => void;
   onItemClick: (id: string, type: MenuItemType) => void;
@@ -131,7 +138,7 @@ const Placeholder: React.FC = props => {
   );
 };
 
-const Node: React.FC<NodeRendererProps> = props => {
+const Node: React.FC<NodeRendererProps<TreeItemProps>> = props => {
   const {
     node,
     path,
@@ -204,7 +211,6 @@ const Node: React.FC<NodeRendererProps> = props => {
 const MenuItems: React.FC<MenuItemsProps> = props => {
   const {
     canUndo,
-
     items,
     onChange,
     onItemAdd,
@@ -259,19 +265,19 @@ const MenuItems: React.FC<MenuItemsProps> = props => {
               getNodeData(item, onChange, onItemClick, onItemEdit),
             )}
             theme={{
-              nodeContentRenderer: Node as any,
+              nodeContentRenderer: Node,
             }}
             onChange={newTree =>
               onChange(
                 getDiff(
                   items.map(item =>
                     getNodeData(item, onChange, onItemClick, onItemEdit),
                   ),
-                  newTree as TreeItem[],
+                  newTree as MenuTreeItem[],
                 ),
               )
             }
-            placeholderRenderer={Placeholder as any}
+            placeholderRenderer={Placeholder}
           />
         )}
       </div>

src/navigation/components/MenuItems/tree.test.ts

@@ -3,12 +3,11 @@ import {
   find,
   insertNode,
   removeNode,
-  TreeItem,
 } from "react-sortable-tree";
 
-import { getDiff } from "./tree";
+import { getDiff, MenuTreeItem } from "./tree";
 
-const originalTree: TreeItem[] = [
+const originalTree: MenuTreeItem[] = [
   {
     children: [
       { children: [], expanded: true, id: "0jewelry", title: "Jewelry" },
@@ -27,7 +26,7 @@ function getNodeKey(node: any) {
 }
 
 function moveNode(
-  tree: TreeItem[],
+  tree: MenuTreeItem[],
   src: string,
   target: string,
   asChild: boolean,
@@ -69,7 +68,7 @@ function moveNode(
         treeData: treeAfterRemoval,
       }).treeData;
 
-  return treeAfterInsertion as TreeItem[];
+  return treeAfterInsertion as MenuTreeItem[];
 }
 
 describe("Properly computes diffs", () => {

src/navigation/components/MenuItems/tree.ts

@@ -1,4 +1,4 @@
-import { MenuDetailsFragment } from "@saleor/graphql";
+import { RecursiveMenuItem } from "@saleor/navigation/types";
 import { getPatch } from "fast-array-diff";
 import { TreeItem } from "react-sortable-tree";
 
@@ -12,14 +12,25 @@ export interface TreeOperation {
   sortOrder?: number;
   simulatedMove?: boolean;
 }
+export interface TreeItemProps {
+  id: string;
+  onChange?: (operations: TreeOperation[]) => void;
+  onClick?: () => void;
+  onEdit?: () => void;
+}
+
+export type MenuTreeItem = TreeItem<TreeItemProps>;
 
 export const unknownTypeError = Error("Unknown type");
 
-function treeToMap(tree: TreeItem[], parent: string): Record<string, string[]> {
+function treeToMap(
+  tree: MenuTreeItem[],
+  parent: string,
+): Record<string, string[]> {
   const childrenList = tree.map(node => node.id);
   const childrenMaps = tree.map(node => ({
     id: node.id,
-    mappedNodes: treeToMap(node.children as TreeItem[], node.id),
+    mappedNodes: treeToMap(node.children as MenuTreeItem[], node.id),
   }));
 
   return {
@@ -34,9 +45,7 @@ function treeToMap(tree: TreeItem[], parent: string): Record<string, string[]> {
   };
 }
 
-export function getItemType(
-  item: MenuDetailsFragment["items"][0],
-): MenuItemType {
+export function getItemType(item: RecursiveMenuItem): MenuItemType {
   if (item.category) {
     return "category";
   } else if (item.collection) {
@@ -50,7 +59,7 @@ export function getItemType(
   }
 }
 
-export function getItemId(item: MenuDetailsFragment["items"][0]): string {
+export function getItemId(item: RecursiveMenuItem): string {
   if (item.category) {
     return item.category.id;
   } else if (item.collection) {
@@ -65,8 +74,8 @@ export function getItemId(item: MenuDetailsFragment["items"][0]): string {
 }
 
 export function getDiff(
-  originalTree: TreeItem[],
-  newTree: TreeItem[],
+  originalTree: MenuTreeItem[],
+  newTree: MenuTreeItem[],
 ): TreeOperation[] {
   const originalMap = treeToMap(originalTree, "root");
   const newMap = treeToMap(newTree, "root");
@@ -127,11 +136,11 @@ export function getDiff(
 }
 
 export function getNodeData(
-  item: MenuDetailsFragment["items"][0],
+  item: RecursiveMenuItem,
   onChange: (operations: TreeOperation[]) => void,
   onClick: (id: string, type: MenuItemType) => void,
   onEdit: (id: string) => void,
-): TreeItem {
+): MenuTreeItem {
   return {
     children: item.children.map(child =>
       getNodeData(child, onChange, onClick, onEdit),
@@ -145,7 +154,7 @@ export function getNodeData(
   };
 }
 
-export function getNodeQuantity(items: MenuDetailsFragment["items"]): number {
+export function getNodeQuantity(items: RecursiveMenuItem[]): number {
   return items.reduce(
     (acc, curr) => acc + getNodeQuantity(curr.children),
     items.length,

src/navigation/types.ts

@@ -0,0 +1,5 @@
+import { MenuItemFragment } from "@saleor/graphql";
+
+export type RecursiveMenuItem = MenuItemFragment & {
+  children?: RecursiveMenuItem[];
+};