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
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}

View file

@ -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">
<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} />
<Box display="flex" flexDirection="column">
<Text variant="heading">{name}</Text>