Remove arrow in app page (#4073)

* Remove arrow in app page

* Restore styling of top nav link

.changeset/wet-penguins-fail.md

@@ -0,0 +1,10 @@
+---
+"saleor-dashboard": minor
+---
+
+Removed "go back" arrow in App view, where app is mounted. 
+
+This arrow caused a confusion between Dashboard navigation and App internal navigation. 
+Now, to go back to the Apps List, the side navigation must be used. 
+
+The "Manage App" view was not changed - arrow is still displayed to navigate back to the App Page.

src/apps/components/AppPage/AppPage.tsx

@@ -1,5 +1,4 @@
 // @ts-strict-ignore
-import { AppUrls } from "@dashboard/apps/urls";
 import {
   borderHeight,
   topBarHeight,
@@ -39,7 +38,6 @@ export const AppPage: React.FC<AppPageProps> = ({
   return (
     <DetailPageLayout gridTemplateColumns={1} withSavebar={false}>
       <AppPageNav
-        goBackUrl={AppUrls.resolveAppListUrl()}
         appId={data?.id}
         name={data?.name}
         supportUrl={data?.supportUrl}

src/apps/components/AppPage/AppPageNav.tsx

@@ -14,7 +14,10 @@ interface AppPageNavProps {
   author?: string | undefined | null;
   appId: string;
   appLogoUrl?: string | undefined | null;
-  goBackUrl: string;
+  /**
+   * Render a back arrow only if an URL is provided.
+   */
+  goBackUrl?: string;
   /**
    * Temporary prop, so the header can be composed with buttons instead hard coding them.
    * Component is used on Manage App page too, so the button should be hidden there
@@ -56,9 +59,9 @@ export const AppPageNav: React.FC<AppPageNavProps> = ({
         justifyContent="space-between"
         width="100%"
       >
-        <Box display="flex" gap={4} alignItems="center">
+        <Box display="flex" gap={2} alignItems="center">
-          <TopNavLink to={goBackUrl} variant="tertiary" />
+          {goBackUrl && <TopNavLink to={goBackUrl} variant="tertiary" />}
-          <Box display="flex" gap={2} alignItems="center">
+          <Box display="flex" gap={4} alignItems="center">
             <AppAvatar size={8} logo={logo} />
             <Box display="flex" flexDirection="column">
               <Text variant="heading">{name}</Text>