Remove arrow in app page (#4073)

* Remove arrow in app page

* Restore styling of top nav link
This commit is contained in:
Lukasz Ostrowski 2023-08-16 10:45:50 +02:00 committed by GitHub
parent 498feff0a2
commit a43c9254b4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 17 additions and 6 deletions

View file

@ -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.

View file

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

View file

@ -14,7 +14,10 @@ interface AppPageNavProps {
author?: string | undefined | null; author?: string | undefined | null;
appId: string; appId: string;
appLogoUrl?: string | undefined | null; 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. * 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 * 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" justifyContent="space-between"
width="100%" width="100%"
> >
<Box display="flex" gap={4} alignItems="center">
<TopNavLink to={goBackUrl} variant="tertiary" />
<Box display="flex" gap={2} alignItems="center"> <Box display="flex" gap={2} alignItems="center">
{goBackUrl && <TopNavLink to={goBackUrl} variant="tertiary" />}
<Box display="flex" gap={4} alignItems="center">
<AppAvatar size={8} logo={logo} /> <AppAvatar size={8} logo={logo} />
<Box display="flex" flexDirection="column"> <Box display="flex" flexDirection="column">
<Text variant="heading">{name}</Text> <Text variant="heading">{name}</Text>