Fix breaking Manage App screen when app is disabled (#3777)

src/apps/components/AppDetailsPage/AppDetailsPage.tsx

@@ -21,7 +21,12 @@ export const AppDetailsPage: React.FC<AppDetailsPageProps> = ({
   onAppActivateOpen,
   onAppDeactivateOpen,
   onAppDeleteOpen,
-}) => (
+}) => {
+  if (!data) {
+    return null;
+  }
+
+  return (
     <>
       <Header
         data={data}
@@ -33,10 +38,14 @@ export const AppDetailsPage: React.FC<AppDetailsPageProps> = ({
       <CardSpacer />
       <PermissionsCard permissions={data?.permissions} loading={loading} />
       <CardSpacer />
-    <DataPrivacyCard dataPrivacyUrl={data?.dataPrivacyUrl} loading={loading} />
+      <DataPrivacyCard
+        dataPrivacyUrl={data?.dataPrivacyUrl}
+        loading={loading}
+      />
       <CardSpacer />
     </>
   );
+};
 
 AppDetailsPage.displayName = "AppDetailsPage";
 export default AppDetailsPage;

src/apps/components/AppDetailsPage/Header.tsx

@@ -33,6 +33,10 @@ const Header: React.FC<HeaderProps> = ({
       : AppUrls.resolveAppListUrl();
   };
 
+  if (!data) {
+    return null;
+  }
+
   return (
     <>
       <AppPageNav
@@ -47,7 +51,7 @@ const Header: React.FC<HeaderProps> = ({
       />
 
       <HeaderOptions
-        data={data}
+        isActive={data.isActive}
         onAppActivateOpen={onAppActivateOpen}
         onAppDeactivateOpen={onAppDeactivateOpen}
         onAppDeleteOpen={onAppDeleteOpen}

src/apps/components/AppDetailsPage/HeaderOptions.tsx

@@ -1,5 +1,3 @@
-import Skeleton from "@dashboard/components/Skeleton";
-import { AppQuery } from "@dashboard/graphql";
 import { buttonMessages } from "@dashboard/intl";
 import { ButtonBase } from "@material-ui/core";
 import { Box } from "@saleor/macaw-ui/next";
@@ -12,39 +10,30 @@ import deleteIcon from "../../../../assets/images/delete.svg";
 import { useStyles } from "./styles";
 
 interface HeaderOptionsProps {
-  data: AppQuery["app"];
+  isActive: boolean;
   onAppActivateOpen: () => void;
   onAppDeactivateOpen: () => void;
   onAppDeleteOpen: () => void;
 }
 
 const HeaderOptions: React.FC<HeaderOptionsProps> = ({
-  data,
+  isActive,
   onAppActivateOpen,
   onAppDeactivateOpen,
   onAppDeleteOpen,
 }) => {
   const classes = useStyles();
 
-  if (!data) {
-    return (
-      <Box marginX={7}>
-        <Skeleton />
-        <div className={classes.hr} />
-      </Box>
-    );
-  }
-
   return (
     <Box marginX={7}>
       <div className={classes.appHeaderLinks}>
         <ButtonBase
           className={classes.headerLinkContainer}
           disableRipple
-          onClick={data.isActive ? onAppDeactivateOpen : onAppActivateOpen}
+          onClick={isActive ? onAppDeactivateOpen : onAppActivateOpen}
         >
           <SVG src={activateIcon} />
-          {data?.isActive ? (
+          {isActive ? (
             <FormattedMessage {...buttonMessages.deactivate} />
           ) : (
             <FormattedMessage {...buttonMessages.activate} />