Define node requirements, ts cleanup (#1008)

* Define node requirements, ts cleanup

* Update snapshot

* fix tests

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:10 as builder
+FROM node:14 as builder
 WORKDIR /app
 COPY package*.json ./
 RUN npm install

Dockerfile.dev

@@ -1,5 +1,4 @@
-FROM node:10
-
+FROM node:14
 WORKDIR /app
 COPY package*.json ./
 RUN npm install

README.md

@@ -18,7 +18,7 @@ These instructions will get you a copy of the project up and running on your loc
 
 ### Prerequisites
 
-- Node.js 10.0+
+- Node.js v14+
 - A running instance of [Saleor](https://github.com/mirumee/saleor/).
 
 ### Installing

package.json

@@ -11,10 +11,10 @@
   "bugs": {
     "url": "https://github.com/mirumee/saleor-dashboard/issues"
   },
-  "homepage": "http://getsaleor.com/",
+  "homepage": "https://saleor.io/",
   "engines": {
-    "node": ">=12.12.0",
-    "npm": ">=6.11.0"
+    "node": ">=14 <15",
+    "npm": ">=6.11.0 <7"
   },
   "dependencies": {
     "@editorjs/editorjs": "^2.19.1",
@@ -22,9 +22,9 @@
     "@editorjs/image": "^2.6.0",
     "@editorjs/list": "^1.6.1",
     "@editorjs/quote": "^2.4.0",
-    "@material-ui/core": "^4.5.1",
-    "@material-ui/icons": "^4.5.1",
-    "@material-ui/styles": "^4.5.2",
+    "@material-ui/core": "^4.11.3",
+    "@material-ui/icons": "^4.11.2",
+    "@material-ui/styles": "^4.11.3",
     "@saleor/macaw-ui": "^0.1.1-9",
     "@sentry/react": "^6.0.0",
     "@types/faker": "^5.1.6",
@@ -115,7 +115,7 @@
     "@types/react-router-dom": "^4.3.4",
     "@types/react-sortable-hoc": "^0.7.1",
     "@types/react-sortable-tree": "^0.3.6",
-    "@types/react-test-renderer": "^16.8.2",
+    "@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",

src/apps/index.tsx

@@ -47,7 +47,7 @@ const AppInstall: React.FC<RouteComponentProps> = props => {
   return <AppInstallView params={params} {...props} />;
 };
 
-interface CustomAppDetailsProps extends RouteComponentProps<{ id: string }> {
+interface CustomAppDetailsProps extends RouteComponentProps<{ id?: string }> {
   token: string;
   onTokenClose: () => void;
 }
@@ -59,6 +59,11 @@ const CustomAppDetails: React.FC<CustomAppDetailsProps> = ({
 }) => {
   const qs = parseQs(location.search.substr(1));
   const params: CustomAppUrlQueryParams = qs;
+  const id = match.params.id;
+
+  if (!id) {
+    throw new Error("No ID provided");
+  }
 
   return (
     <CustomAppDetailsView

src/auth/AuthProvider.test.ts

@@ -40,9 +40,12 @@ describe("User", () => {
   it("will be logged in if has valid credentials", async done => {
     const hook = renderAuthProvider(apolloClient);
 
-    await act(() =>
-      hook.current.login(adminCredentials.email, adminCredentials.password)
+    await act(async () => {
+      await hook.current.login(
+        adminCredentials.email,
+        adminCredentials.password
       );
+    });
     expect(hook.current.user.email).toBe(adminCredentials.email);
     adminCredentials.token = getTokens().auth;
 
@@ -52,9 +55,9 @@ describe("User", () => {
   it("will not be logged in if doesn't have valid credentials", async done => {
     const hook = renderAuthProvider(apolloClient);
 
-    await act(() =>
-      hook.current.login(adminCredentials.email, "NotAValidPassword123!")
-    );
+    await act(async () => {
+      await hook.current.login(adminCredentials.email, "NotAValidPassword123!");
+    });
     expect(hook.current.user).toBe(null);
 
     done();
@@ -63,12 +66,12 @@ describe("User", () => {
   it("will not be logged in if is non-staff", async done => {
     const hook = renderAuthProvider(apolloClient);
 
-    await act(() =>
-      hook.current.login(
+    await act(async () => {
+      await hook.current.login(
         nonStaffUserCredentials.email,
         nonStaffUserCredentials.password
-      )
       );
+    });
     expect(hook.current.user).toBe(undefined);
 
     done();

src/components/Date/Date.test.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import renderer from "react-test-renderer";
+import renderer, { ReactTestRendererJSON } from "react-test-renderer";
 
 import { TimezoneProvider } from "../Timezone";
 import Date from "./Date";
@@ -31,7 +31,9 @@ test("Render humanized date with timezone GMT-11", () => {
       <Date date={testDate} />
     </TimezoneProvider>
   );
-  expect(date.toJSON().props.dateTime).toEqual(testDate);
+  expect((date.toJSON() as ReactTestRendererJSON).props.dateTime).toEqual(
+    testDate
+  );
 });
 
 test("Render humanized date with timezone GMT+13", () => {
@@ -40,5 +42,7 @@ test("Render humanized date with timezone GMT+13", () => {
       <Date date={testDate} />
     </TimezoneProvider>
   );
-  expect(date.toJSON().props.dateTime).toEqual(testDate);
+  expect((date.toJSON() as ReactTestRendererJSON).props.dateTime).toEqual(
+    testDate
+  );
 });

src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.tsx

@@ -249,4 +249,5 @@ const SingleAutocompleteSelectField: React.FC<SingleAutocompleteSelectFieldProps
     />
   );
 };
+
 export default SingleAutocompleteSelectField;

src/theme.ts

@@ -1,5 +1,3 @@
-import Card from "@material-ui/core/Card";
-import Checkbox from "@material-ui/core/Checkbox";
 import { createMuiTheme, Theme } from "@material-ui/core/styles";
 import { darken, fade } from "@material-ui/core/styles/colorManipulator";
 import { ThemeOptions } from "@material-ui/core/styles/createMuiTheme";
@@ -8,8 +6,6 @@ import {
   PaletteOptions
 } from "@material-ui/core/styles/createPalette";
 import { Overrides } from "@material-ui/core/styles/overrides";
-import TextField from "@material-ui/core/TextField";
-import Typography from "@material-ui/core/Typography";
 import { createElement } from "react";
 
 import { IThemeColors } from "./components/Theme/themes";
@@ -551,6 +547,21 @@ const createTheme = (colors: IThemeColors): ITheme =>
     props: {
       MuiFormControl: {
         variant: "filled"
+      },
+      MuiTextField: {
+        variant: "outlined"
+      },
+      MuiCard: {
+        elevation: 0
+      },
+      MuiTypography: {
+        component: "div"
+      },
+      MuiCheckbox: {
+        checkedIcon: createElement(CheckboxCheckedIcon),
+        color: "primary",
+        icon: createElement(CheckboxIcon),
+        indeterminateIcon: createElement(CheckboxIndeterminateIcon)
       }
     },
     shadows: [
@@ -597,25 +608,4 @@ const createTheme = (colors: IThemeColors): ITheme =>
     }
   } as IThemeOptions);
 
-TextField.defaultProps = {
-  ...TextField.defaultProps,
-  variant: "outlined"
-};
-
-Card.defaultProps = {
-  ...Card.defaultProps,
-  elevation: 0
-};
-
-Typography.defaultProps = {
-  component: "div"
-};
-
-Checkbox.defaultProps = {
-  checkedIcon: createElement(CheckboxCheckedIcon),
-  color: "primary",
-  icon: createElement(CheckboxIcon),
-  indeterminateIcon: createElement(CheckboxIndeterminateIcon)
-};
-
 export default createTheme;