Fix strict null check in Apps (#2911)

* Fix apps strict null checks

* Set strictNullChecks to false

* Improve strict null checks

* Replace typ to Extension

src/apps/components/AppActivateDialog/AppActivateDialog.stories.tsx

@@ -15,4 +15,4 @@ const props: AppActivateDialogProps = {
 storiesOf("Views / Apps / Activate app", module)
   .addDecorator(Decorator)
   .add("default", () => <AppActivateDialog {...props} />)
-  .add("unnamed app", () => <AppActivateDialog {...props} name={null} />);
+  .add("unnamed app", () => <AppActivateDialog {...props} name="" />);

src/apps/components/AppDeactivateDialog/AppDeactivateDialog.stories.tsx

@@ -17,4 +17,4 @@ const props: AppDeactivateDialogProps = {
 storiesOf("Views / Apps / Deactivate app", module)
   .addDecorator(Decorator)
   .add("default", () => <AppDeactivateDialog {...props} />)
-  .add("unnamed app", () => <AppDeactivateDialog {...props} name={null} />);
+  .add("unnamed app", () => <AppDeactivateDialog {...props} name="" />);

src/apps/components/AppDeleteDialog/AppDeleteDialog.stories.tsx

@@ -16,4 +16,4 @@ const props: AppDeleteDialogProps = {
 storiesOf("Views / Apps / Delete app", module)
   .addDecorator(Decorator)
   .add("default", () => <AppDeleteDialog {...props} />)
-  .add("unnamed app", () => <AppDeleteDialog {...props} name={null} />);
+  .add("unnamed app", () => <AppDeleteDialog {...props} name="" />);

src/apps/components/AppDetailsPage/AppDetailsPage.tsx

@@ -63,7 +63,7 @@ export const AppDetailsPage: React.FC<AppDetailsPageProps> = ({
           <div className={classes.appHeaderLinks}>
             <ExternalLink
               className={classes.headerLinkContainer}
-              href={data.supportUrl}
+              href={data.supportUrl || ""}
               target="_blank"
             >
               <SVG src={supportIcon} />
@@ -109,7 +109,11 @@ export const AppDetailsPage: React.FC<AppDetailsPageProps> = ({
           })}
         />
         <CardContent>
-          {!loading ? <ReactMarkdown source={data?.aboutApp} /> : <Skeleton />}
+          {!loading ? (
+            <ReactMarkdown source={data?.aboutApp ?? ""} />
+          ) : (
+            <Skeleton />
+          )}
         </CardContent>
       </Card>
       <CardSpacer />
@@ -146,7 +150,7 @@ export const AppDetailsPage: React.FC<AppDetailsPageProps> = ({
       </Card>
       <CardSpacer />
 
-      {(loading || data?.dataPrivacyUrl) && (
+      {data?.dataPrivacyUrl && (
         <Card>
           <CardTitle
             title={intl.formatMessage({
@@ -159,7 +163,7 @@ export const AppDetailsPage: React.FC<AppDetailsPageProps> = ({
             {!loading ? (
               <ExternalLink
                 className={classes.linkContainer}
-                href={data?.dataPrivacyUrl}
+                href={data.dataPrivacyUrl}
                 target="_blank"
               >
                 <FormattedMessage

src/apps/components/AppFrame/AppFrame.tsx

@@ -38,7 +38,7 @@ export const AppFrame: React.FC<Props> = ({
   refetch,
 }) => {
   const shop = useShop();
-  const frameRef = React.useRef<HTMLIFrameElement>();
+  const frameRef = React.useRef<HTMLIFrameElement>(null);
   const { themeType } = useTheme();
   const classes = useStyles();
   const appOrigin = getOrigin(src);

src/apps/components/AppFrame/useAppActions.ts

@@ -34,7 +34,7 @@ const isAppDeepUrlChange = (appId: string, from: string, to: string) => {
 };
 
 export const useAppActions = (
-  frameEl: React.MutableRefObject<HTMLIFrameElement>,
+  frameEl: React.MutableRefObject<HTMLIFrameElement | null>,
   appOrigin: string,
   appId: string,
 ) => {
@@ -125,7 +125,7 @@ export const useAppActions = (
   };
 
   const postToExtension = (event: Events) => {
-    if (frameEl.current) {
+    if (frameEl?.current?.contentWindow) {
       frameEl.current.contentWindow.postMessage(event, appOrigin);
     }
   };

src/apps/components/AppFrame/useTokenRefresh.ts

@@ -9,7 +9,10 @@ interface AppToken {
 const TIME_BEFORE_REFRESH = 30 * 1000; // 30 seconds
 
 const useTokenRefresh = (token?: string, refetch?: () => void) => {
-  let decoded: AppToken;
+  let decoded: AppToken = {
+    exp: 0,
+    iat: 0,
+  };
 
   // For some reason jwt_decode causes seemingly unrelated error in tests
   // It seems like at some point undefined token is passed
@@ -26,11 +29,13 @@ const useTokenRefresh = (token?: string, refetch?: () => void) => {
 
   const refreshTimeout = useRef<null | ReturnType<typeof setTimeout>>(null);
 
-  const tokenLife = (decoded?.exp - decoded?.iat) * 1000; // in ms
+  const tokenLife = ((decoded?.exp || 0) - (decoded?.iat || 0)) * 1000; // in ms
   const refreshTime = tokenLife - TIME_BEFORE_REFRESH;
 
   const setUpTimeout = () => {
-    refetch();
+    if (refetch) {
+      refetch();
+    }
     createTimeout();
   };
 
@@ -50,7 +55,11 @@ const useTokenRefresh = (token?: string, refetch?: () => void) => {
       createTimeout();
     }
 
-    return () => !!refetch && decodedSuccesfully && deleteTimeout();
+    return () => {
+      if (!!refetch && decodedSuccesfully) {
+        deleteTimeout();
+      }
+    };
   }, [token]);
 };
 

src/apps/components/AppInProgressDeleteDialog/AppInProgressDeleteDialog.stories.tsx

@@ -17,6 +17,4 @@ const props: AppInProgressDeleteDialogProps = {
 storiesOf("Views / Apps / Delete app failed installation", module)
   .addDecorator(Decorator)
   .add("default", () => <AppInProgressDeleteDialog {...props} />)
-  .add("unnamed app", () => (
+  .add("unnamed app", () => <AppInProgressDeleteDialog {...props} name="" />);
-    <AppInProgressDeleteDialog {...props} name={null} />
-  ));

src/apps/components/AppInstallPage/AppInstallPage.stories.tsx

@@ -9,7 +9,7 @@ const props: AppInstallPageProps = {
   data: installApp,
   loading: false,
   navigateToAppsList: () => undefined,
-  onSubmit: () => undefined,
+  onSubmit: () => Promise.resolve([]),
 };
 
 storiesOf("Views / Apps / Install App", module)

src/apps/components/AppInstallPage/AppInstallPage.tsx

@@ -17,10 +17,12 @@ import { FormattedMessage, useIntl } from "react-intl";
 import { useStyles } from "../../styles";
 
 export interface AppInstallPageProps {
-  data: AppFetchMutation["appFetchManifest"]["manifest"];
+  data: NonNullable<AppFetchMutation["appFetchManifest"]>["manifest"];
   loading: boolean;
   navigateToAppsList: () => void;
-  onSubmit: () => SubmitPromise<AppInstallMutation["appInstall"]["errors"]>;
+  onSubmit: () => SubmitPromise<
+    NonNullable<AppInstallMutation["appInstall"]>["errors"]
+  >;
 }
 
 export const AppInstallPage: React.FC<AppInstallPageProps> = ({

src/apps/components/AppPage/AppPage.stories.tsx

@@ -7,7 +7,7 @@ import AppPage, { AppPageProps } from "./AppPage";
 
 const props: AppPageProps = {
   data: appDetails,
-  url: appDetails.appUrl,
+  url: appDetails.appUrl!,
   aboutHref: "",
   onError: () => undefined,
 };
@@ -16,5 +16,5 @@ storiesOf("Views / Apps / App", module)
   .addDecorator(Decorator)
   .add("default", () => <AppPage {...props} />)
   .add("settings", () => (
-    <AppPage {...props} url={appDetails.configurationUrl} />
+    <AppPage {...props} url={appDetails.configurationUrl!} />
   ));

src/apps/components/AppPage/AppPage.tsx

@@ -80,9 +80,9 @@ export const AppPage: React.FC<AppPageProps> = ({
         {url && (
           <AppFrame
             src={url}
-            appToken={data.accessToken}
+            appToken={data?.accessToken ?? ""}
             onError={onError}
-            appId={data.id}
+            appId={data?.id ?? ""}
             refetch={refetch}
           />
         )}

src/apps/components/AppsInProgress/AppsInProgress.tsx

@@ -51,65 +51,79 @@ const AppsInProgress: React.FC<AppsInProgressProps> = ({
       />
       <ResponsiveTable>
         <TableBody>
-          {renderCollection(appsList, ({ status, appName, id, message }) => (
+          {renderCollection(
-            <TableRowLink key={id} className={classes.tableRow}>
+            appsList,
-              <TableCell className={classes.colName}>
+            ({
-                <span data-tc="name">{appName}</span>
+              status,
-              </TableCell>
+              appName,
-              {status === JobStatusEnum.PENDING && (
+              id,
-                <TableCell
+              message,
-                  className={clsx(classes.colAction, classes.colInstallAction)}
+            }: AppsInstallationsQuery["appsInstallations"][number]) => (
-                >
+              <TableRowLink key={id} className={classes.tableRow}>
-                  <Typography variant="body2" className={classes.text}>
+                <TableCell className={classes.colName}>
-                    <FormattedMessage
+                  <span data-tc="name">{appName}</span>
-                      id="1qRwgQ"
-                      defaultMessage="Installing app..."
-                      description="app installation"
-                    />
-                  </Typography>
-                  <div className={classes.colSpinner}>
-                    <Progress size={20} />
-                  </div>
                 </TableCell>
-              )}
+                {status === JobStatusEnum.PENDING && (
-              {status === JobStatusEnum.FAILED && (
+                  <TableCell
-                <TableCell
+                    className={clsx(
-                  className={clsx(classes.colAction, classes.colInstallAction)}
+                      classes.colAction,
-                >
+                      classes.colInstallAction,
-                  <Typography variant="body2" className={classes.error}>
+                    )}
-                    <FormattedMessage
+                  >
-                      id="Xl0o2y"
+                    <Typography variant="body2" className={classes.text}>
-                      defaultMessage="Problem occured during installation"
-                      description="app installation error"
-                    />
-                    <Tooltip title={message} variant="error">
-                      <TooltipMountWrapper>
-                        <Indicator icon="error" />
-                      </TooltipMountWrapper>
-                    </Tooltip>
-                  </Typography>
-                  <TableButtonWrapper>
-                    <Button onClick={() => onAppInstallRetry(id)}>
                       <FormattedMessage
-                        id="+c/f61"
+                        id="1qRwgQ"
-                        defaultMessage="Retry"
+                        defaultMessage="Installing app..."
-                        description="retry installation"
+                        description="app installation"
                       />
-                    </Button>
+                    </Typography>
-                  </TableButtonWrapper>
+                    <div className={classes.colSpinner}>
-                  <TableButtonWrapper>
+                      <Progress size={20} />
-                    <IconButton
+                    </div>
-                      variant="secondary"
+                  </TableCell>
-                      color="primary"
+                )}
-                      onClick={() => onRemove(id)}
+                {status === JobStatusEnum.FAILED && (
-                    >
+                  <TableCell
-                      <DeleteIcon />
+                    className={clsx(
-                    </IconButton>
+                      classes.colAction,
-                  </TableButtonWrapper>
+                      classes.colInstallAction,
-                </TableCell>
+                    )}
-              )}
+                  >
-            </TableRowLink>
+                    <Typography variant="body2" className={classes.error}>
-          ))}
+                      <FormattedMessage
+                        id="Xl0o2y"
+                        defaultMessage="Problem occured during installation"
+                        description="app installation error"
+                      />
+                      <Tooltip title={message} variant="error">
+                        <TooltipMountWrapper>
+                          <Indicator icon="error" />
+                        </TooltipMountWrapper>
+                      </Tooltip>
+                    </Typography>
+                    <TableButtonWrapper>
+                      <Button onClick={() => onAppInstallRetry(id)}>
+                        <FormattedMessage
+                          id="+c/f61"
+                          defaultMessage="Retry"
+                          description="retry installation"
+                        />
+                      </Button>
+                    </TableButtonWrapper>
+                    <TableButtonWrapper>
+                      <IconButton
+                        variant="secondary"
+                        color="primary"
+                        onClick={() => onRemove(id)}
+                      >
+                        <DeleteIcon />
+                      </IconButton>
+                    </TableButtonWrapper>
+                  </TableCell>
+                )}
+              </TableRowLink>
+            ),
+          )}
         </TableBody>
       </ResponsiveTable>
     </Card>

src/apps/components/AppsListPage/AppListPage.stories.tsx

@@ -47,7 +47,7 @@ storiesOf("Views / Apps / Apps list", module)
       {...props}
       appsInProgressList={undefined}
       disabled={true}
-      installedAppsList={undefined}
+      installedAppsList={[]}
     />
   ))
   .add("no data", () => (

src/apps/components/AppsListPage/AppsListPage.tsx

@@ -78,15 +78,19 @@ const AppsListPage: React.FC<AppsListPageProps> = ({
     [installedAppsList, fetchedSaleorApps],
   );
 
-  const saleorApps = useMemo(
+  const saleorApps = useMemo<AppListItemFragment[]>(
     () =>
-      fetchedSaleorApps
+      (fetchedSaleorApps || []).reduce<AppListItemFragment[]>((acc, app) => {
-        ?.map(app =>
+        const foundedApp = installedAppsList?.find(installedApp =>
-          installedAppsList?.find(installedApp =>
+          installedApp.manifestUrl?.includes(app.hostname),
-            installedApp.manifestUrl?.includes(app.hostname),
+        );
-          ),
+
-        )
+        if (foundedApp) {
-        .filter(Boolean),
+          acc.push(foundedApp);
+        }
+
+        return acc;
+      }, []),
     [installedAppsList, fetchedSaleorApps],
   );
 

src/apps/components/ExternalAppContext/context.ts

@@ -16,4 +16,9 @@ export const ExternalAppContext = React.createContext<{
   appData: AppData | undefined;
   setOpen: React.Dispatch<React.SetStateAction<boolean>>;
   setAppData: React.Dispatch<React.SetStateAction<AppData | undefined>>;
-}>(undefined);
+}>({
+  open: false,
+  appData: undefined,
+  setOpen: () => null,
+  setAppData: () => null,
+});

src/apps/components/HorizontalSpacer/HorizontalSpacer.tsx

@@ -7,7 +7,7 @@ export interface HorizontalSpacerProps {
 
 const useStyles = makeStyles(
   theme => ({
-    container: ({ spacing }: HorizontalSpacerProps) => ({
+    container: ({ spacing }: Required<HorizontalSpacerProps>) => ({
       width: theme.spacing(spacing),
     }),
   }),

src/apps/components/InstalledApps/InstalledApps.tsx

@@ -104,11 +104,11 @@ const InstalledApps: React.FC<InstalledAppsProps> = ({
                     )}
                     <TableButtonWrapper>
                       <Switch
-                        checked={app.isActive}
+                        checked={!!app.isActive}
                         onChange={getHandleToggle(app)}
                       />
                     </TableButtonWrapper>
-                    <AppPermissions permissions={app.permissions} />
+                    <AppPermissions permissions={app.permissions || []} />
                     <TableButtonWrapper>
                       <IconButton
                         variant="secondary"

src/apps/components/VerticalSpacer/VerticalSpacer.tsx

@@ -7,7 +7,7 @@ export interface VerticalSpacerProps {
 
 const useStyles = makeStyles(
   theme => ({
-    container: ({ spacing }: VerticalSpacerProps) => ({
+    container: ({ spacing }: Required<VerticalSpacerProps>) => ({
       height: theme.spacing(spacing),
     }),
   }),

src/apps/fixtures.ts

@@ -99,7 +99,7 @@ export const appsInProgress: AppsInstallationsQuery["appsInstallations"] = [
   },
 ];
 
-export const appDetails: AppQuery["app"] = {
+export const appDetails: NonNullable<AppQuery["app"]> = {
   __typename: "App",
   aboutApp: "Lorem ipsum",
   accessToken: "token",
@@ -134,7 +134,9 @@ export const appDetails: AppQuery["app"] = {
   webhooks: [],
 };
 
-export const installApp: AppFetchMutation["appFetchManifest"]["manifest"] = {
+export const installApp: NonNullable<
+  AppFetchMutation["appFetchManifest"]
+>["manifest"] = {
   __typename: "Manifest",
   about: "Lorem ipsum",
   appUrl: null,

src/apps/useExtensions.ts

@@ -14,7 +14,7 @@ import { AppDetailsUrlMountQueryParams } from "./urls";
 
 export interface Extension {
   id: string;
-  app: RelayToFlat<ExtensionListQuery["appExtensions"]>[0]["app"];
+  app: RelayToFlat<NonNullable<ExtensionListQuery["appExtensions"]>>[0]["app"];
   accessToken: string;
   permissions: PermissionEnum[];
   label: string;
@@ -54,14 +54,14 @@ export const extensionMountPoints = {
 };
 
 const filterAndMapToTarget = (
-  extensions: RelayToFlat<ExtensionListQuery["appExtensions"]>,
+  extensions: RelayToFlat<NonNullable<ExtensionListQuery["appExtensions"]>>,
   openApp: (appData: AppData) => void,
 ): ExtensionWithParams[] =>
   extensions.map(
     ({ id, accessToken, permissions, url, label, mount, target, app }) => ({
       id,
       app,
-      accessToken,
+      accessToken: accessToken || "",
       permissions: permissions.map(({ code }) => code),
       url,
       label,
@@ -69,7 +69,7 @@ const filterAndMapToTarget = (
       open: (params: AppDetailsUrlMountQueryParams) =>
         openApp({
           id: app.id,
-          appToken: accessToken,
+          appToken: accessToken || "",
           src: url,
           label,
           target,
@@ -153,7 +153,7 @@ export const useExtensions = <T extends AppExtensionMountEnum>(
   });
 
   const extensions = filterAndMapToTarget(
-    mapEdgesToItems(data?.appExtensions) || [],
+    mapEdgesToItems(data?.appExtensions ?? undefined) || [],
     openApp,
   );
 

src/apps/views/App/App.tsx

@@ -37,14 +37,14 @@ export const App: React.FC<AppProps> = ({ id }) => {
 
   const appCompleteUrl = getAppCompleteUrlFromDashboardUrl(
     location.pathname,
-    data?.app.appUrl,
+    data?.app?.appUrl || "",
     id,
   );
 
   return (
     <AppPage
-      data={data?.app}
+      data={data?.app || null}
-      url={appCompleteUrl}
+      url={appCompleteUrl || ""}
       aboutHref={appDetailsUrl(id)}
       refetch={refetch}
       onError={() =>

src/apps/views/AppDetails/AppDetails.tsx

@@ -51,7 +51,7 @@ export const AppDetails: React.FC<AppDetailsProps> = ({ id, params }) => {
         refetch();
         closeModal();
       } else {
-        if (appExists) {
+        if (appExists && errors) {
           errors.forEach(error =>
             notify({
               status: "error",
@@ -65,7 +65,7 @@ export const AppDetails: React.FC<AppDetailsProps> = ({ id, params }) => {
   const [deactivateApp, deactivateAppResult] = useAppDeactivateMutation({
     onCompleted: data => {
       const errors = data?.appDeactivate?.errors;
-      if (errors.length === 0) {
+      if (errors?.length === 0) {
         notify({
           status: "success",
           text: intl.formatMessage(appMessages.appDeactivated),
@@ -73,7 +73,7 @@ export const AppDetails: React.FC<AppDetailsProps> = ({ id, params }) => {
         refetch();
         closeModal();
       } else {
-        if (appExists) {
+        if (appExists && errors) {
           errors.forEach(error =>
             notify({
               status: "error",
@@ -105,20 +105,20 @@ export const AppDetails: React.FC<AppDetailsProps> = ({ id, params }) => {
     <>
       <AppActivateDialog
         confirmButtonState={activateAppResult.status}
-        name={data?.app.name}
+        name={data?.app?.name || ""}
         onClose={closeModal}
         onConfirm={handleActivateConfirm}
         open={params.action === "app-activate"}
       />
       <AppDeactivateDialog
         confirmButtonState={deactivateAppResult.status}
-        name={data?.app.name}
+        name={data?.app?.name || ""}
         onClose={closeModal}
         onConfirm={handleDeactivateConfirm}
         open={params.action === "app-deactivate"}
       />
       <AppDetailsPage
-        data={data?.app}
+        data={data?.app || null}
         loading={loading}
         navigateToApp={() => navigate(appUrl(id))}
         onAppActivateOpen={() => openModal("app-activate")}

src/apps/views/AppInstall/AppInstall.tsx

@@ -24,7 +24,9 @@ interface InstallAppCreateProps extends RouteComponentProps {
 export const InstallAppCreate: React.FC<InstallAppCreateProps> = ({
   params,
 }) => {
-  const [, setActiveInstallations] = useLocalStorage("activeInstallations", []);
+  const [, setActiveInstallations] = useLocalStorage<
+    Array<Record<"id" | "name", string>>
+  >("activeInstallations", []);
   const navigate = useNavigator();
   const notify = useNotifier();
   const intl = useIntl();
@@ -32,7 +34,7 @@ export const InstallAppCreate: React.FC<InstallAppCreateProps> = ({
 
   const [fetchManifest, fetchManifestOpts] = useAppFetchMutation({
     onCompleted: data => {
-      if (data.appFetchManifest.errors.length) {
+      if (data?.appFetchManifest?.errors.length) {
         data.appFetchManifest.errors.forEach(error => {
           notify({
             status: "error",
@@ -44,15 +46,20 @@ export const InstallAppCreate: React.FC<InstallAppCreateProps> = ({
   });
   const [installApp] = useAppInstallMutation({
     onCompleted: data => {
-      const installationData = data.appInstall.appInstallation;
+      const installationData = data?.appInstall?.appInstallation;
-      if (data.appInstall.errors.length === 0) {
+      if (data.appInstall?.errors.length === 0) {
-        setActiveInstallations(activeInstallations => [
+        if (installationData) {
-          ...activeInstallations,
+          setActiveInstallations(activeInstallations => [
-          { id: installationData.id, name: installationData.appName },
+            ...activeInstallations,
-        ]);
+            {
+              id: installationData.id,
+              name: installationData.appName,
+            },
+          ]);
+        }
         navigateToAppsList();
       } else {
-        data.appInstall.errors.forEach(error => {
+        (data?.appInstall?.errors ?? []).forEach(error => {
           notify({
             status: "error",
             text: getAppErrorMessage(error, intl),
@@ -72,7 +79,7 @@ export const InstallAppCreate: React.FC<InstallAppCreateProps> = ({
           input: {
             appName: manifest?.name,
             manifestUrl,
-            permissions: manifest?.permissions.map(
+            permissions: manifest?.permissions?.map(
               permission => permission.code,
             ),
           },
@@ -97,7 +104,7 @@ export const InstallAppCreate: React.FC<InstallAppCreateProps> = ({
         <AppInstallErrorPage onBack={() => navigate("/")} />
       ) : (
         <AppInstallPage
-          data={fetchManifestOpts?.data?.appFetchManifest?.manifest}
+          data={fetchManifestOpts?.data?.appFetchManifest?.manifest ?? null}
           navigateToAppsList={navigateToAppsList}
           onSubmit={handleSubmit}
           loading={fetchManifestOpts?.loading}

src/apps/views/AppSettings/AppSettings.tsx

@@ -29,8 +29,8 @@ export const AppSettings: React.FC<AppSettingsProps> = ({ id }) => {
 
   return (
     <AppPage
-      data={data?.app}
+      data={data?.app ?? null}
-      url={data?.app.configurationUrl}
+      url={data?.app?.configurationUrl ?? ""}
       aboutHref={appDetailsUrl(id)}
       refetch={refetch}
       onError={() =>

src/apps/views/AppsList/AppsList.tsx

@@ -22,6 +22,7 @@ import useNavigator from "@saleor/hooks/useNavigator";
 import useNotifier from "@saleor/hooks/useNotifier";
 import usePaginator, {
   createPaginationState,
+  PageInfo,
   PaginatorContext,
 } from "@saleor/hooks/usePaginator";
 import { findById } from "@saleor/misc";
@@ -45,7 +46,7 @@ import { messages } from "./messages";
 const getAppInProgressName = (
   id: string,
   collection?: AppsInstallationsQuery["appsInstallations"],
-) => collection?.find(app => app.id === id)?.appName;
+) => collection?.find(app => app.id === id)?.appName || id;
 interface AppsListProps {
   params: AppListUrlQueryParams;
 }
@@ -92,7 +93,7 @@ export const AppsList: React.FC<AppsListProps> = ({ params }) => {
   });
 
   const paginationValues = usePaginator({
-    pageInfo: data?.apps?.pageInfo,
+    pageInfo: data?.apps?.pageInfo as PageInfo,
     paginationState,
     queryString: params,
   });
@@ -113,11 +114,16 @@ export const AppsList: React.FC<AppsListProps> = ({ params }) => {
   const [retryInstallApp] = useAppRetryInstallMutation({
     onCompleted: data => {
       if (!data?.appRetryInstall?.errors?.length) {
-        const appInstallation = data.appRetryInstall.appInstallation;
+        const appInstallation = data.appRetryInstall?.appInstallation;
-        setActiveInstallations(installations => [
+        if (appInstallation) {
-          ...installations,
+          setActiveInstallations(installations => [
-          { id: appInstallation.id, name: appInstallation.appName },
+            ...installations,
-        ]);
+            {
+              id: appInstallation.id,
+              name: appInstallation.appName,
+            },
+          ]);
+        }
       }
     },
   });
@@ -226,14 +232,14 @@ export const AppsList: React.FC<AppsListProps> = ({ params }) => {
   const handleRemoveInProgressConfirm = () =>
     deleteInProgressApp({
       variables: {
-        id: params.id,
+        id: params?.id || "",
       },
     });
 
   const handleRemoveConfirm = () =>
     deleteApp({
       variables: {
-        id: params.id,
+        id: params?.id || "",
       },
     });
 
@@ -245,10 +251,10 @@ export const AppsList: React.FC<AppsListProps> = ({ params }) => {
   };
 
   const handleActivateAppConfirm = () =>
-    activateApp({ variables: { id: params.id } });
+    activateApp({ variables: { id: params?.id || "" } });
 
   const handleDeactivateAppConfirm = () =>
-    deactivateApp({ variables: { id: params.id } });
+    deactivateApp({ variables: { id: params?.id || "" } });
 
   const onAppInstallRetry = (id: string) =>
     retryInstallApp({ variables: { id } });
@@ -261,8 +267,8 @@ export const AppsList: React.FC<AppsListProps> = ({ params }) => {
     [activateApp, deactivateApp],
   );
 
-  const installedApps = mapEdgesToItems(data?.apps);
+  const installedApps = mapEdgesToItems(data?.apps || { edges: [] }) || [];
-  const currentAppName = findById(params.id, installedApps)?.name;
+  const currentAppName = findById(params?.id || "", installedApps)?.name || "";
 
   return (
     <AppListContext.Provider value={context}>
@@ -292,7 +298,7 @@ export const AppsList: React.FC<AppsListProps> = ({ params }) => {
         <AppInProgressDeleteDialog
           confirmButtonState={deleteInProgressAppOpts.status}
           name={getAppInProgressName(
-            params.id,
+            params.id || "",
             appsInProgressData?.appsInstallations,
           )}
           onClose={closeModal}

src/hooks/usePaginator.ts

@@ -47,7 +47,7 @@ function usePaginator({
   paginationState,
   pageInfo,
 }: UsePaginatorArgs) {
-  const newPageInfo = useMemo<PageInfo>(
+  const newPageInfo = useMemo<PageInfo | undefined>(
     () =>
       pageInfo
         ? {

tsconfig.json

@@ -25,4 +25,4 @@
     "resolveJsonModule": true
   },
   "exclude": ["node_modules", "cypress"]
-}
+}