Proceed with TS migration (#4516)

* Proceed with TS migration

* Proceed with TS migration

* Proceed with TS migration

* cla

---------

Co-authored-by: Michał Droń <droniu@droniu.dev>

.changeset/twelve-bobcats-suffer.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Proceed with TS migration, remove bunch of TS strict comments

.storybook/helpers/MockedUserProvider.tsx

@@ -1,4 +1,3 @@
-// @ts-strict-ignore
 import * as React from "react";
 import { UserContext } from "../../src/auth";
 import { adminUserPermissions } from "../../src/fixtures";

src/apps/components/AppAvatar/AppAvatar.tsx

@@ -1,4 +1,3 @@
-// @ts-strict-ignore
 import { AppLogo } from "@dashboard/apps/types";
 import { Box, GenericAppIcon } from "@saleor/macaw-ui-next";
 import React from "react";

src/apps/components/AppDetailsPage/AppDetailsPage.test.tsx

@@ -1,4 +1,3 @@
-// @ts-strict-ignore
 import { render } from "@testing-library/react";
 import React from "react";
 
@@ -7,14 +6,14 @@ import { AppDetailsPage } from "./AppDetailsPage";
 
 const mockHeader = jest.fn();
 // eslint-disable-next-line react/display-name
-jest.mock("./Header", () => props => {
+jest.mock("./Header", () => (props: unknown) => {
   mockHeader(props);
   return <></>;
 });
 
 const mockAboutCard = jest.fn();
 jest.mock("./AboutCard", () => ({
-  AboutCard: props => {
+  AboutCard: (props: unknown) => {
     mockAboutCard(props);
     return <></>;
   },
@@ -23,15 +22,15 @@ jest.mock("./AboutCard", () => ({
 const mockPermissionsCard = jest.fn();
 
 jest.mock("./PermissionsCard", () => ({
-  PermissionsCard: props => {
+  PermissionsCard: (props: unknown) => {
     mockPermissionsCard(props);
     return <></>;
   },
 }));
 
 const mockDataPrivacyCard = jest.fn();
 jest.mock("./DataPrivacyCard", () => ({
-  DataPrivacyCard: props => {
+  DataPrivacyCard: (props: unknown) => {
     mockDataPrivacyCard(props);
     return <></>;
   },

src/apps/components/AppDetailsPage/Header.tsx

@@ -1,4 +1,3 @@
-// @ts-strict-ignore
 import { AppPageNav } from "@dashboard/apps/components/AppPage/AppPageNav";
 import { AppUrls } from "@dashboard/apps/urls";
 import { AppQuery } from "@dashboard/graphql";
@@ -52,7 +51,7 @@ const Header: React.FC<HeaderProps> = ({
       />
 
       <HeaderOptions
-        isActive={data.isActive}
+        isActive={!!data.isActive}
         onAppActivateOpen={onAppActivateOpen}
         onAppDeactivateOpen={onAppDeactivateOpen}
         onAppDeleteOpen={onAppDeleteOpen}

src/apps/components/AppFrame/AppFrame.tsx

@@ -1,4 +1,3 @@
-// @ts-strict-ignore
 import { useAppDashboardUpdates } from "@dashboard/apps/components/AppFrame/useAppDashboardUpdates";
 import { useUpdateAppToken } from "@dashboard/apps/components/AppFrame/useUpdateAppToken";
 import { AppDetailsUrlQueryParams } from "@dashboard/apps/urls";
@@ -36,7 +35,7 @@ export const AppFrame: React.FC<Props> = ({
   onError,
   refetch,
   dashboardVersion,
-  coreVersion,
+  coreVersion = "",
 }) => {
   const frameRef = React.useRef<HTMLIFrameElement | null>(null);
   const classes = useStyles();

src/apps/components/AppFrame/AppIFrame.tsx

@@ -1,4 +1,3 @@
-// @ts-strict-ignore
 import { AppDetailsUrlQueryParams, AppUrls } from "@dashboard/apps/urls";
 import { FlagList } from "@dashboard/featureFlags";
 import { ThemeType } from "@saleor/app-sdk/app-bridge";
@@ -10,9 +9,9 @@ interface AppIFrameProps {
   appId: string;
   src: string;
   featureFlags: FlagList;
-  params: AppDetailsUrlQueryParams;
+  params?: AppDetailsUrlQueryParams;
   onLoad: () => void;
-  onError: () => void;
+  onError?: () => void;
   className: string;
 }
 
@@ -31,7 +30,7 @@ const _AppIFrame = forwardRef<HTMLIFrameElement, AppIFrameProps>(
     const iframeSrc = AppUrls.resolveAppIframeUrl(appId, src, {
       ...params,
       featureFlags,
-      theme: themeRef.current,
+      theme: themeRef.current!,
     });
 
     return (

src/apps/components/AppFrame/useUpdateAppToken.ts

@@ -1,13 +1,12 @@
-// @ts-strict-ignore
 import { createAppsDebug } from "@dashboard/apps/apps-debug";
 import { DashboardEventFactory, Events } from "@saleor/app-sdk/app-bridge";
 import { useEffect, useRef } from "react";
 
 /**
  * https://usehooks.com/usePrevious/
  */
-function usePreviousValue(value) {
-  const ref = useRef();
+function usePreviousValue(value: unknown) {
+  const ref = useRef<unknown>();
 
   useEffect(() => {
     ref.current = value;

src/apps/components/AppListRow/AppListRow.tsx

@@ -1,4 +1,3 @@
-// @ts-strict-ignore
 import { AppstoreApi } from "@dashboard/apps/appstore.types";
 import { useAppListContext } from "@dashboard/apps/context";
 import {

src/apps/components/AppPage/AppPage.tsx

@@ -1,4 +1,3 @@
-// @ts-strict-ignore
 import {
   borderHeight,
   topBarHeight,
@@ -38,7 +37,7 @@ export const AppPage: React.FC<AppPageProps> = ({
   return (
     <DetailPageLayout gridTemplateColumns={1} withSavebar={false}>
       <AppPageNav
-        appId={data?.id}
+        appId={data?.id || ""}
         name={data?.name}
         supportUrl={data?.supportUrl}
         homepageUrl={data?.homepageUrl}

src/apps/types.ts

@@ -4,7 +4,7 @@ import {
 } from "@dashboard/graphql";
 
 export interface AppLogo {
-  source: string | null;
+  source?: string;
 }
 
 export interface InstalledApp {

src/apps/utils.ts

@@ -1,4 +1,3 @@
-// @ts-strict-ignore
 import { getAppsConfig } from "@dashboard/config";
 import { AppInstallationFragment, JobStatusEnum } from "@dashboard/graphql";
 import { IntlShape } from "react-intl";
@@ -88,7 +87,7 @@ interface GetAppDetailsOpts {
   app: AppstoreApi.SaleorApp;
   appInstallation?: AppInstallationFragment;
   navigateToAppInstallPage?: (url: string) => void;
-  navigateToGithubForkPage?: (url?: string) => void;
+  navigateToGithubForkPage?: (githubForkUrl: string) => void;
   retryAppInstallation: (installationId: string) => void;
   removeAppInstallation: (installationId: string) => void;
 }
@@ -118,11 +117,11 @@ export const getAppDetails = ({
       !appInstallation && isAppComingSoon ? app.releaseDate : undefined,
     installHandler:
       !appInstallation && isAppInstallable
-        ? () => navigateToAppInstallPage(app.manifestUrl)
+        ? () => navigateToAppInstallPage(app.manifestUrl || "")
         : undefined,
     githubForkHandler:
       !appInstallation && isAppForkableOnGithub && !!app.githubForkUrl
-        ? () => navigateToGithubForkPage(app.githubForkUrl)
+        ? () => navigateToGithubForkPage(app.githubForkUrl || "")
         : undefined,
     installationPending,
     retryInstallHandler:

src/auth/components/LoginPage/LoginPage.stories.tsx

@@ -1,4 +1,3 @@
-// @ts-strict-ignore
 import React from "react";
 
 import { CardDecorator } from "../../../../.storybook/decorators";
@@ -16,7 +15,7 @@ const props: Omit<LoginCardProps, "classes"> = {
   loading: false,
   errors: [],
   onExternalAuthentication: () => undefined,
-  onSubmit: () => undefined,
+  onSubmit: async () => {},
 };
 
 export default {

src/auth/components/LoginPage/LoginPage.tsx

@@ -1,4 +1,3 @@
-// @ts-strict-ignore
 import { UserContextError } from "@dashboard/auth/types";
 import { passwordResetUrl } from "@dashboard/auth/urls";
 import { Button } from "@dashboard/components/Button";
@@ -27,7 +26,7 @@ export interface LoginCardProps {
   loading: boolean;
   externalAuthentications?: AvailableExternalAuthenticationsQuery["shop"]["availableExternalAuthentications"];
   onExternalAuthentication: (pluginId: string) => void;
-  onSubmit?: (event: LoginFormData) => SubmitPromise;
+  onSubmit: (event: LoginFormData) => SubmitPromise;
 }
 
 const LoginPage: React.FC<LoginCardProps> = props => {

src/auth/errors.ts

@@ -1,4 +1,3 @@
-// @ts-strict-ignore
 import { ApolloError } from "@apollo/client";
 import { findValueInEnum } from "@dashboard/misc";
 import { GraphQLError } from "graphql";
@@ -21,7 +20,7 @@ export type AuthError = (typeof AuthError)[keyof typeof AuthError];
 export function isJwtError(error: GraphQLError): boolean {
   let jwtError: boolean;
   try {
-    jwtError = !!findValueInEnum(error.extensions.exception.code, JWTError);
+    jwtError = !!findValueInEnum(error.extensions?.exception.code, JWTError);
   } catch (e) {
     jwtError = false;
   }
@@ -30,7 +29,7 @@ export function isJwtError(error: GraphQLError): boolean {
 }
 
 export function isTokenExpired(error: GraphQLError): boolean {
-  return error.extensions.exception.code === JWTError.expired;
+  return error.extensions?.exception.code === JWTError.expired;
 }
 
 export function getAuthErrorType(graphQLError: GraphQLError): UserContextError {

src/auth/index.tsx

@@ -1,4 +1,3 @@
-// @ts-strict-ignore
 import { parse as parseQs } from "qs";
 import React, { useContext } from "react";
 import { Route, RouteComponentProps, Switch } from "react-router-dom";

src/auth/misc.ts

@@ -1,8 +1,7 @@
-// @ts-strict-ignore
 import { PermissionEnum, UserFragment } from "@dashboard/graphql";
 
 export const hasPermission = (permission: PermissionEnum, user: UserFragment) =>
-  user.userPermissions.map(perm => perm.code).includes(permission);
+  user.userPermissions?.map(perm => perm.code).includes(permission);
 
 export const hasAnyPermissions = (
   permissions: PermissionEnum[],

src/auth/types.ts

@@ -31,19 +31,19 @@ export type UserContextError =
   (typeof UserContextError)[keyof typeof UserContextError];
 
 export interface UserContext {
-  login: (username: string, password: string) => Promise<LoginData>;
-  loginByExternalPlugin: (
+  login?: (username: string, password: string) => Promise<LoginData>;
+  loginByExternalPlugin?: (
     pluginId: string,
     input: ExternalLoginInput,
   ) => Promise<GetExternalAccessTokenData>;
-  logout: () => Promise<void>;
-  requestLoginByExternalPlugin: (
+  logout?: () => Promise<void>;
+  requestLoginByExternalPlugin?: (
     pluginId: string,
     input: RequestExternalLoginInput,
   ) => Promise<GetExternalAuthUrlData>;
   user?: UserFragment;
   authenticating: boolean;
   authenticated: boolean;
   errors: UserContextError[];
-  refetchUser: () => Promise<ApolloQueryResult<UserDetailsQuery>>;
+  refetchUser?: () => Promise<ApolloQueryResult<UserDetailsQuery>>;
 }

src/channels/views/ChannelCreate/useSaveChannel.ts

@@ -58,7 +58,9 @@ export const useSaveChannel = ({
         });
       }
 
-      await refetchUser();
+      if (refetchUser) {
+        await refetchUser();
+      }
     }
 
     return errors;

src/fixtures.ts

@@ -1,4 +1,3 @@
-// @ts-strict-ignore
 import {
   AllocationStrategyEnum,
   ChannelFragment,
@@ -457,7 +456,9 @@ export const date = {
   to: "2019-12-38",
 };
 
-export const adminUserPermissions: UserDetailsQuery["me"]["userPermissions"] = [
+export const adminUserPermissions: NonNullable<
+  NonNullable<UserDetailsQuery["me"]>["userPermissions"]
+> = [
   {
     __typename: "UserPermission",
     code: PermissionEnum.MANAGE_CHECKOUTS,

src/orders/components/OrderDiscountCommonModal/OrderDiscountCommonModal.tsx

@@ -1,4 +1,3 @@
-// @ts-strict-ignore
 import DialogButtons from "@dashboard/components/ActionDialog/DialogButtons";
 import CardSpacer from "@dashboard/components/CardSpacer";
 import {
@@ -119,7 +118,7 @@ export interface OrderDiscountCommonModalProps {
 }
 
 const OrderDiscountCommonModal: React.FC<OrderDiscountCommonModalProps> = ({
-  maxPrice = { amount: null, currency: "" },
+  maxPrice = { amount: 0, currency: "" },
   onConfirm,
   modalType,
   onClose,
@@ -296,7 +295,7 @@ const OrderDiscountCommonModal: React.FC<OrderDiscountCommonModalProps> = ({
         <PriceField
           label={intl.formatMessage(messages.discountValueLabel)}
           error={!!valueErrorMsg}
-          hint={valueErrorMsg}
+          hint={valueErrorMsg || ""}
           value={toFixed(value, 2)}
           onChange={handleSetDiscountValue}
           currencySymbol={valueFieldSymbol}

src/permissionGroups/views/PermissionGroupDetails/PermissionGroupDetails.tsx

@@ -103,7 +103,8 @@ export const PermissionGroupDetails: React.FC<PermissionGroupDetailsProps> = ({
             checkIfUserBelongToPermissionGroup(
               data?.permissionGroup,
               user?.user?.id ?? "",
-            )
+            ) &&
+            user.refetchUser
           ) {
             user.refetchUser();
           }

src/shipping/components/OrderValue/OrderValue.tsx

@@ -1,4 +1,3 @@
-// @ts-strict-ignore
 import { ChannelShippingData } from "@dashboard/channels/utils";
 import CardTitle from "@dashboard/components/CardTitle";
 import ControlledCheckbox from "@dashboard/components/ControlledCheckbox";
@@ -9,6 +8,7 @@ import TableRowLink from "@dashboard/components/TableRowLink";
 import { ShippingChannelsErrorFragment } from "@dashboard/graphql";
 import { ChangeEvent } from "@dashboard/hooks/useForm";
 import {
+  ChannelError,
   getFormChannelError,
   getFormChannelErrors,
 } from "@dashboard/utils/errors";
@@ -46,7 +46,7 @@ export const OrderValue: React.FC<OrderValueProps> = ({
   const intl = useIntl();
   const formErrors = getFormChannelErrors(
     ["maximumOrderPrice", "minimumOrderPrice"],
-    errors,
+    errors as ChannelError[],
   );
 
   return (

src/types.ts

@@ -85,7 +85,7 @@ export interface SortPage<TSortKey extends string> {
 export interface ListActionsWithoutToolbar {
   toggle: (id: string) => void;
   toggleAll: (items: Node[], selected: number) => void;
-  isChecked: (id: string) => boolean;
+  isChecked: (id: string) => boolean | undefined;
   selected: number;
 }
 export type TabListActions<TToolbars extends string> =

src/utils/errors/common.ts

@@ -26,7 +26,7 @@ export type CommonErrorCode =
   (typeof CommonErrorCode)[keyof typeof CommonErrorCode];
 
 export interface CommonError<ErrorCode> {
-  code: ErrorCode | CommonErrorCode;
+  code?: ErrorCode | CommonErrorCode;
   field: string | null;
   message?: string | null;
 }

src/utils/errors/shipping.ts

@@ -1,4 +1,5 @@
 import { ShippingErrorCode, ShippingErrorFragment } from "@dashboard/graphql";
+import { ChannelError } from "@dashboard/utils/errors";
 import { defineMessages, IntlShape } from "react-intl";
 
 import { getCommonFormFieldErrorMessage } from "./common";
@@ -16,11 +17,16 @@ const messages = defineMessages({
   },
 });
 
+export type ShippingError =
+  | Omit<ShippingErrorFragment, "__typename">
+  | ChannelError
+  | undefined;
+
 function getShippingErrorMessage(
-  err: Omit<ShippingErrorFragment, "__typename"> | undefined,
+  err: ShippingError,
   intl: IntlShape,
 ): string | undefined {
-  if (err) {
+  if (err && "code" in err) {
     switch (err.code) {
       case ShippingErrorCode.ALREADY_EXISTS:
         return intl.formatMessage(messages.alreadyExists);