Proceed with TS migration, decrease to 729 files (#4520)

* Proceed with TS migration

* Proceed with TS migration

* Proceed with TS migration

.changeset/hungry-files-develop.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Proceed with TS migration

package.json

@@ -210,7 +210,8 @@
     "workbox-expiration": "^6.1.2",
     "workbox-precaching": "^6.1.2",
     "workbox-routing": "^6.1.2",
-    "workbox-strategies": "^6.1.2"
+    "workbox-strategies": "^6.1.2",
+    "@types/react-gtm-module": "^2.0.3"
   },
   "optionalDependencies": {
     "@storybook/addon-essentials": "^7.5.1",

src/apps/components/AppFrame/appActionsHandler.test.ts

@@ -1,4 +1,3 @@
-// @ts-strict-ignore
 import { AppActionsHandler } from "@dashboard/apps/components/AppFrame/appActionsHandler";
 import * as ExternalAppContext from "@dashboard/apps/components/ExternalAppContext/ExternalAppContext";
 import * as dashboardConfig from "@dashboard/config";
@@ -71,7 +70,7 @@ describe("AppActionsHandler", function () {
    * @see https://wildwolf.name/jest-how-to-mock-window-location-href/
    */
   beforeEach((): void => {
-    delete window.location;
+    delete (window as { location?: unknown }).location;
     // @ts-expect-error
     window.location = {
       href: "http://localhost:3000",

src/apps/hooks/useAppstoreApps.test.ts

@@ -1,11 +1,12 @@
-// @ts-strict-ignore
 import { renderHook } from "@testing-library/react-hooks";
 
 import { comingSoonApp, releasedApp } from "../fixtures";
 import useAppstoreApps from "./useAppstoreApps";
 
 const mockApps = [releasedApp, comingSoonApp];
 
+type Fetch = typeof global.fetch;
+
 global.fetch = jest.fn(url => {
   if (url === "https://apps.saleor.io/apps") {
     return Promise.resolve({
@@ -20,7 +21,7 @@ global.fetch = jest.fn(url => {
     } as unknown as Response);
   }
   return Promise.reject(new Error("API is down"));
-});
+}) as Fetch;
 
 describe("apps hooks useAppstoreApps", () => {
   it("should return apps when request to proper appstore url returns apps", async () => {

src/apps/hooks/useExtensions.ts

@@ -1,4 +1,3 @@
-// @ts-strict-ignore
 import { useUserPermissions } from "@dashboard/auth/hooks/useUserPermissions";
 import {
   AppExtensionMountEnum,
@@ -79,7 +78,7 @@ const filterAndMapToTarget = (
     }),
   );
 
-const mapToMenuItem = ({ label, id, open }: Extension) => ({
+const mapToMenuItem = ({ label, id, open }: ExtensionWithParams) => ({
   label,
   testId: `extension-${id}`,
   onSelect: open,
@@ -167,7 +166,7 @@ export const useExtensions = <T extends AppExtensionMountEnum>(
 
   const extensionsMap = mountList.reduce(
     (extensionsMap, mount) => ({ ...extensionsMap, [mount]: [] }),
-    {} as Record<T, Extension[]>,
+    {} as Record<AppExtensionMountEnum, Extension[]>,
   );
 
   return extensions.reduce(

src/attributes/components/AttributeDetails/utils.ts

@@ -1,4 +1,3 @@
-// @ts-strict-ignore
 import { Choice } from "@dashboard/components/SingleSelectField";
 import { MeasurementUnitsEnum } from "@dashboard/graphql";
 import React from "react";

src/attributes/components/AttributeOrganization/AttributeOrganization.tsx

@@ -88,7 +88,7 @@ const AttributeOrganization: React.FC<AttributeOrganizationProps> = props => {
               </>
             }
             name={"type" as keyof FormData}
-            value={data.type}
+            value={data.type as AttributeTypeEnum}
             onChange={onChange}
           />
         ) : (

src/attributes/components/AttributePage/AttributePage.tsx

@@ -1,4 +1,3 @@
-// @ts-strict-ignore
 import { attributeListUrl } from "@dashboard/attributes/urls";
 import { ATTRIBUTE_TYPES_WITH_DEDICATED_VALUES } from "@dashboard/attributes/utils/data";
 import { TopNav } from "@dashboard/components/AppLayout/TopNav";
@@ -21,7 +20,6 @@ import {
 } from "@dashboard/graphql";
 import { SubmitPromise } from "@dashboard/hooks/useForm";
 import useNavigator from "@dashboard/hooks/useNavigator";
-import { maybe } from "@dashboard/misc";
 import { ListSettings, ReorderAction } from "@dashboard/types";
 import { mapEdgesToItems, mapMetadataItemToInput } from "@dashboard/utils/maps";
 import useMetadataChangeTrigger from "@dashboard/utils/metadata/useMetadataChangeTrigger";
@@ -60,7 +58,7 @@ export interface AttributePageProps {
 }
 
 export interface AttributePageFormData extends MetadataFormData {
-  type: AttributeTypeEnum;
+  type?: AttributeTypeEnum;
   availableInGrid: boolean;
   filterableInDashboard: boolean;
   inputType: AttributeInputTypeEnum;
@@ -174,7 +172,7 @@ const AttributePage: React.FC<AttributePageProps> = ({
                         defaultMessage: "Create New Attribute",
                         description: "page title",
                       })
-                    : maybe(() => attribute.name)
+                    : attribute?.name
                 }
               />
               <DetailPageLayout.Content>

src/attributes/components/AttributeSwatchField/AttributeSwatchField.tsx

@@ -1,7 +1,9 @@
-// @ts-strict-ignore
 import { inputTypeMessages } from "@dashboard/attributes/components/AttributeDetails/messages";
 import { AttributeValueEditDialogFormData } from "@dashboard/attributes/utils/data";
-import { ColorPicker } from "@dashboard/components/ColorPicker";
+import {
+  ColorPicker,
+  ColorPickerProps,
+} from "@dashboard/components/ColorPicker";
 import FileUploadField from "@dashboard/components/FileUploadField";
 import { RadioGroupField } from "@dashboard/components/RadioGroupField";
 import VerticalSpacer from "@dashboard/components/VerticalSpacer";
@@ -110,7 +112,10 @@ const AttributeSwatchField: React.FC<
           )}
         </>
       ) : (
-        <ColorPicker {...props} onColorChange={handleColorChange} />
+        <ColorPicker
+          {...(props as ColorPickerProps)}
+          onColorChange={handleColorChange}
+        />
       )}
     </>
   );

src/attributes/components/AttributeValues/AttributeValues.tsx

@@ -29,7 +29,7 @@ export interface AttributeValuesProps
   extends Pick<ListProps, Exclude<keyof ListProps, "getRowHref">>,
     PaginateListProps {
   disabled: boolean;
-  values: RelayToFlat<AttributeValueListFragment>;
+  values?: RelayToFlat<AttributeValueListFragment>;
   onValueAdd: () => void;
   onValueDelete: (id: string) => void;
   onValueReorder: ReorderAction;

src/attributes/utils/data.ts

@@ -1,4 +1,3 @@
-// @ts-strict-ignore
 import { FetchResult } from "@apollo/client";
 import {
   AttributeInput,
@@ -234,7 +233,7 @@ export const mergeFileUploadErrors = (
       return [...errors, ...uploadErrors];
     }
     return errors;
-  }, []);
+  }, [] as UploadErrorFragment[]);
 
 export const mergeAttributeValueDeleteErrors = (
   deleteAttributeValuesResult: Array<FetchResult<AttributeValueDeleteMutation>>,
@@ -245,7 +244,7 @@ export const mergeAttributeValueDeleteErrors = (
       return [...errors, ...deleteErrors];
     }
     return errors;
-  }, []);
+  }, [] as AttributeErrorFragment[]);
 
 export const mergeChoicesWithValues = (
   attribute:

src/attributes/views/AttributeCreate/AttributeCreate.tsx

@@ -1,4 +1,5 @@
 import {
+  AttributeCreateInput,
   AttributeErrorCode,
   AttributeErrorFragment,
   useAttributeCreateMutation,
@@ -160,7 +161,7 @@ const AttributeDetails: React.FC<AttributeDetailsProps> = ({ params }) => {
   const handleCreate = async (data: AttributePageFormData) => {
     const result = await attributeCreate({
       variables: {
-        input: getAttributeData(data, values),
+        input: getAttributeData(data, values) as AttributeCreateInput,
       },
     });
 

src/auth/AuthProvider.test.tsx

@@ -1,4 +1,3 @@
-// @ts-strict-ignore
 import { useApolloClient } from "@apollo/client";
 import { useUserDetailsQuery } from "@dashboard/graphql";
 import useNotifier from "@dashboard/hooks/useNotifier";
@@ -135,12 +134,12 @@ describe("AuthProvider", () => {
     const hook = renderHook(() =>
       useAuthProvider({ intl, notify, apolloClient }),
     );
-    await act(async () =>
-      hook.result.current.login(
+    await act(async () => {
+      hook.result.current.login!(
         adminCredentials.email,
         adminCredentials.password,
-      ),
-    );
+      );
+    });
 
     // Assert
     expect(hook.result.current.user?.email).toBe(adminCredentials.email);
@@ -196,12 +195,12 @@ describe("AuthProvider", () => {
     const hook = renderHook(() =>
       useAuthProvider({ intl, notify, apolloClient }),
     );
-    await act(async () =>
-      hook.result.current.login(
+    await act(async () => {
+      hook.result.current.login!(
         nonStaffUserCredentials.email,
         nonStaffUserCredentials.password,
-      ),
-    );
+      );
+    });
 
     // Assert
     expect(hook.result.current.errors).toEqual([]);
@@ -231,12 +230,12 @@ describe("AuthProvider", () => {
     const hook = renderHook(() =>
       useAuthProvider({ intl, notify, apolloClient }),
     );
-    await act(async () =>
-      hook.result.current.login(
+    await act(async () => {
+      hook.result.current.login!(
         nonStaffUserCredentials.email,
         nonStaffUserCredentials.password,
-      ),
-    );
+      );
+    });
 
     // Assert
     expect(hook.result.current.errors).toEqual(["noPermissionsError"]);

src/auth/components/NewPasswordPage/NewPasswordPage.stories.tsx

@@ -1,5 +1,5 @@
-// @ts-strict-ignore
 import { AccountErrorCode } from "@dashboard/graphql";
+import { SubmitPromise } from "@dashboard/hooks/useForm";
 import React from "react";
 
 import { CardDecorator } from "../../../../.storybook/decorators";
@@ -10,12 +10,14 @@ export default {
   decorators: [CardDecorator],
 };
 
+const dummyPromise = () => undefined as unknown as SubmitPromise;
+
 export const Default = () => (
-  <NewPasswordPage errors={[]} loading={false} onSubmit={() => undefined} />
+  <NewPasswordPage errors={[]} loading={false} onSubmit={dummyPromise} />
 );
 
 export const Loading = () => (
-  <NewPasswordPage errors={[]} loading={true} onSubmit={() => undefined} />
+  <NewPasswordPage errors={[]} loading={true} onSubmit={dummyPromise} />
 );
 
 export const TooShortError = () => (
@@ -28,6 +30,6 @@ export const TooShortError = () => (
       message: null,
     }))}
     loading={false}
-    onSubmit={() => undefined}
+    onSubmit={dummyPromise}
   />
 );

src/auth/components/NewPasswordPage/NewPasswordPage.tsx

@@ -1,11 +1,10 @@
-// @ts-strict-ignore
 import { Button } from "@dashboard/components/Button";
 import Form from "@dashboard/components/Form";
 import FormSpacer from "@dashboard/components/FormSpacer";
+import { AccountErrorFragment } from "@dashboard/graphql";
 import { SubmitPromise } from "@dashboard/hooks/useForm";
 import getAccountErrorMessage from "@dashboard/utils/errors/account";
 import { TextField, Typography } from "@material-ui/core";
-import { SetPasswordData } from "@saleor/sdk";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
@@ -17,7 +16,7 @@ export interface NewPasswordPageFormData {
 }
 export interface NewPasswordPageProps {
   loading: boolean;
-  errors: SetPasswordData["errors"];
+  errors: AccountErrorFragment[];
   onSubmit: (data: NewPasswordPageFormData) => SubmitPromise;
 }
 

src/auth/components/ResetPasswordPage/ResetPasswordPage.stories.tsx

@@ -1,14 +1,16 @@
-// @ts-strict-ignore
+import { SubmitPromise } from "@dashboard/hooks/useForm";
 import React from "react";
 
 import { CardDecorator } from "../../../../.storybook/decorators";
 import { formError } from "../../../../.storybook/helpers";
 import ResetPasswordPage, { ResetPasswordPageProps } from "./ResetPasswordPage";
 
+const dummyPromise = () => undefined as unknown as SubmitPromise;
+
 const props: ResetPasswordPageProps = {
   disabled: false,
-  error: undefined,
-  onSubmit: () => undefined,
+  error: "",
+  onSubmit: dummyPromise,
 };
 
 export default {

src/auth/components/ResetPasswordPage/ResetPasswordPage.tsx

@@ -1,10 +1,9 @@
-// @ts-strict-ignore
 import { Button } from "@dashboard/components/Button";
 import Form from "@dashboard/components/Form";
 import FormSpacer from "@dashboard/components/FormSpacer";
 import { IconButton } from "@dashboard/components/IconButton";
 import { getAppMountUri } from "@dashboard/config";
-import { RequestPasswordResetMutation } from "@dashboard/graphql";
+import { AccountErrorCode } from "@dashboard/graphql";
 import { SubmitPromise } from "@dashboard/hooks/useForm";
 import { commonMessages } from "@dashboard/intl";
 import { TextField, Typography } from "@material-ui/core";
@@ -22,9 +21,7 @@ export interface ResetPasswordPageProps {
   error: string;
   onSubmit: (
     data: ResetPasswordPageFormData,
-  ) => SubmitPromise<
-    RequestPasswordResetMutation["requestPasswordReset"]["errors"]
-  >;
+  ) => SubmitPromise<AccountErrorCode[]>;
 }
 
 const ResetPasswordPage: React.FC<ResetPasswordPageProps> = props => {