djkato/saleor-dashboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add new Layout structure (#3213)

Browse source
This commit is contained in:
Krzysztof Żuraw 2023-02-28 10:33:16 +01:00 committed by GitHub
parent b9acfe6214
commit 9c88e17f34
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
93 changed files with 1256 additions and 1393 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
package-lock.json generated
View file

@ -83,8 +83,7 @@
"slugify": "^1.4.6",
"tslib": "^2.4.1",
"url-join": "^4.0.1",
"use-react-router": "^1.0.7",
"usehooks-ts": "^2.9.1"
"use-react-router": "^1.0.7"
},
"devDependencies": {
"@babel/cli": "^7.5.5",
@ -32978,19 +32977,6 @@
"version": "2.4.1",
"license": "0BSD"
},
"node_modules/usehooks-ts": {
"version": "2.9.1",
"resolved": "https://registry.npmjs.org/usehooks-ts/-/usehooks-ts-2.9.1.tgz",
"integrity": "sha512-2FAuSIGHlY+apM9FVlj8/oNhd+1y+Uwv5QNkMQz1oSfdHk4PXo1qoCw9I5M7j0vpH8CSWFJwXbVPeYDjLCx9PA==",
"engines": {
"node": ">=16.15.0",
"npm": ">=8"
},
"peerDependencies": {
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
}
},
"node_modules/utf8-byte-length": {
"version": "1.0.4",
"dev": true,
@ -57362,11 +57348,6 @@
}
}
},
"usehooks-ts": {
"version": "2.9.1",
"resolved": "https://registry.npmjs.org/usehooks-ts/-/usehooks-ts-2.9.1.tgz",
"integrity": "sha512-2FAuSIGHlY+apM9FVlj8/oNhd+1y+Uwv5QNkMQz1oSfdHk4PXo1qoCw9I5M7j0vpH8CSWFJwXbVPeYDjLCx9PA=="
},
"utf8-byte-length": {
"version": "1.0.4",
"dev": true

3
package.json
View file

@ -90,8 +90,7 @@
"slugify": "^1.4.6",
"tslib": "^2.4.1",
"url-join": "^4.0.1",
"use-react-router": "^1.0.7",
"usehooks-ts": "^2.9.1"
"use-react-router": "^1.0.7"
},
"devDependencies": {
"@babel/cli": "^7.5.5",

15
src/apps/components/AppInstallPage/AppInstallPage.tsx
View file

@ -1,10 +1,9 @@
import saleorDarkLogoSmall from "@assets/images/logo-dark-small.svg";
import plusIcon from "@assets/images/plus-icon.svg";
import { Content } from "@dashboard/components/AppLayout/Content";
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import CardSpacer from "@dashboard/components/CardSpacer";
import CardTitle from "@dashboard/components/CardTitle";
import Hr from "@dashboard/components/Hr";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import Skeleton from "@dashboard/components/Skeleton";
import { AppFetchMutation, AppInstallMutation } from "@dashboard/graphql";
import { SubmitPromise } from "@dashboard/hooks/useForm";
@ -43,8 +42,9 @@ export const AppInstallPage: React.FC<AppInstallPageProps> = ({
const name = data?.name || "";
return (
<DetailedContent useSingleColumn constHeight>
<Content>
<DetailPageLayout gridTemplateColumns={1} withSavebar={false}>
<DetailPageLayout.Content>
<Box paddingY={9}>
<CardSpacer />
<Card>
<CardTitle
@ -145,7 +145,7 @@ export const AppInstallPage: React.FC<AppInstallPageProps> = ({
</CardContent>
</Card>
<CardSpacer />
<Box display="flex" justifyContent="space-between" paddingX={9}>
<Box display="flex" justifyContent="space-between" padding={9}>
<Button variant="secondary" onClick={navigateToAppsList}>
<FormattedMessage {...buttonMessages.cancel} />
</Button>
@ -157,8 +157,9 @@ export const AppInstallPage: React.FC<AppInstallPageProps> = ({
/>
</Button>
</Box>
</Content>
</DetailedContent>
</Box>
</DetailPageLayout.Content>
</DetailPageLayout>
);
};

18
src/attributes/components/AttributePage/AttributePage.tsx
View file

@ -1,11 +1,9 @@
import { attributeListUrl } from "@dashboard/attributes/urls";
import { ATTRIBUTE_TYPES_WITH_DEDICATED_VALUES } from "@dashboard/attributes/utils/data";
import { Content } from "@dashboard/components/AppLayout/Content";
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { RightSidebar } from "@dashboard/components/AppLayout/RightSidebar";
import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import CardSpacer from "@dashboard/components/CardSpacer";
import Form from "@dashboard/components/Form";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import Metadata from "@dashboard/components/Metadata/Metadata";
import { MetadataFormData } from "@dashboard/components/Metadata/types";
import Savebar from "@dashboard/components/Savebar";
@ -173,7 +171,7 @@ const AttributePage: React.FC<AttributePageProps> = ({
return (
<>
<DetailedContent>
<DetailPageLayout>
<TopNav
href={attributeListUrl()}
title={
@ -185,8 +183,8 @@ const AttributePage: React.FC<AttributePageProps> = ({
})
: maybe(() => attribute.name)
}
></TopNav>
<Content>
/>
<DetailPageLayout.Content>
<AttributeDetails
canChangeType={attribute === null}
data={data}
@ -221,8 +219,8 @@ const AttributePage: React.FC<AttributePageProps> = ({
)}
<CardSpacer />
<Metadata data={data} onChange={changeMetadata} />
</Content>
<RightSidebar>
</DetailPageLayout.Content>
<DetailPageLayout.RightSidebar>
<AttributeOrganization
canChangeType={attribute === null}
data={data}
@ -236,7 +234,7 @@ const AttributePage: React.FC<AttributePageProps> = ({
disabled={disabled}
onChange={change}
/>
</RightSidebar>
</DetailPageLayout.RightSidebar>
<Savebar
disabled={!!isSaveDisabled}
state={saveButtonBarState}
@ -244,7 +242,7 @@ const AttributePage: React.FC<AttributePageProps> = ({
onSubmit={submit}
onDelete={attribute === null ? undefined : onDelete}
/>
</DetailedContent>
</DetailPageLayout>
{children(data)}
</>
);

11
src/categories/components/CategoryCreatePage/CategoryCreatePage.tsx
View file

@ -1,7 +1,6 @@
import { Content } from "@dashboard/components/AppLayout/Content";
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import { CardSpacer } from "@dashboard/components/CardSpacer";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import Metadata from "@dashboard/components/Metadata";
import Savebar from "@dashboard/components/Savebar";
import SeoForm from "@dashboard/components/SeoForm";
@ -36,7 +35,7 @@ export const CategoryCreatePage: React.FC<CategoryCreatePageProps> = ({
return (
<CategoryCreateForm onSubmit={onSubmit} disabled={disabled}>
{({ data, change, handlers, submit, isSaveDisabled }) => (
<DetailedContent useSingleColumn>
<DetailPageLayout gridTemplateColumns={1}>
<TopNav
href={backUrl}
title={intl.formatMessage({
@ -45,7 +44,7 @@ export const CategoryCreatePage: React.FC<CategoryCreatePageProps> = ({
description: "page header",
})}
/>
<Content>
<DetailPageLayout.Content>
<Box height="100vh" __marginBottom="auto">
<CategoryDetailsForm
data={data}
@ -74,14 +73,14 @@ export const CategoryCreatePage: React.FC<CategoryCreatePageProps> = ({
<CardSpacer />
<Metadata data={data} onChange={handlers.changeMetadata} />
</Box>
</Content>
</DetailPageLayout.Content>
<Savebar
onCancel={() => navigate(backUrl)}
onSubmit={submit}
state={saveButtonBarState}
disabled={isSaveDisabled}
/>
</DetailedContent>
</DetailPageLayout>
)}
</CategoryCreateForm>
);

5
src/categories/components/CategoryListPage/CategoryListPage.tsx
View file

@ -4,6 +4,7 @@ import {
} from "@dashboard/categories/urls";
import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import { Button } from "@dashboard/components/Button";
import { ListPageLayout } from "@dashboard/components/Layouts";
import SearchBar from "@dashboard/components/SearchBar";
import { CategoryFragment } from "@dashboard/graphql";
import { sectionNames } from "@dashboard/intl";
@ -52,7 +53,7 @@ export const CategoryListPage: React.FC<CategoryTableProps> = ({
const intl = useIntl();
return (
<>
<ListPageLayout>
<TopNav title={intl.formatMessage(sectionNames.categories)}>
<Button
variant="primary"
@ -100,7 +101,7 @@ export const CategoryListPage: React.FC<CategoryTableProps> = ({
{...listProps}
/>
</Card>
</>
</ListPageLayout>
);
};
CategoryListPage.displayName = "CategoryListPage";

11
src/categories/components/CategoryUpdatePage/CategoryUpdatePage.tsx
View file

@ -3,12 +3,11 @@ import {
categoryListUrl,
categoryUrl,
} from "@dashboard/categories/urls";
import { Content } from "@dashboard/components/AppLayout/Content";
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import { Button } from "@dashboard/components/Button";
import { CardSpacer } from "@dashboard/components/CardSpacer";
import CardTitle from "@dashboard/components/CardTitle";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import Metadata from "@dashboard/components/Metadata/Metadata";
import Savebar from "@dashboard/components/Savebar";
import SeoForm from "@dashboard/components/SeoForm";
@ -91,9 +90,9 @@ export const CategoryUpdatePage: React.FC<CategoryUpdatePageProps> = ({
disabled={disabled}
>
{({ data, change, handlers, submit, isSaveDisabled }) => (
<DetailedContent useSingleColumn>
<DetailPageLayout gridTemplateColumns={1}>
<TopNav href={backHref} title={category?.name} />
<Content>
<DetailPageLayout.Content>
<CategoryDetailsForm
data={data}
disabled={disabled}
@ -209,8 +208,8 @@ export const CategoryUpdatePage: React.FC<CategoryUpdatePageProps> = ({
state={saveButtonBarState}
disabled={isSaveDisabled}
/>
</Content>
</DetailedContent>
</DetailPageLayout.Content>
</DetailPageLayout>
)}
</CategoryUpdateForm>
);

16
src/channels/pages/ChannelDetailsPage/ChannelDetailsPage.tsx
View file

@ -3,12 +3,10 @@ import ShippingZones from "@dashboard/channels/components/ShippingZones";
import Warehouses from "@dashboard/channels/components/Warehouses";
import { channelsListUrl } from "@dashboard/channels/urls";
import { validateChannelFormData } from "@dashboard/channels/validation";
import { Content } from "@dashboard/components/AppLayout/Content";
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { RightSidebar } from "@dashboard/components/AppLayout/RightSidebar";
import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import CardSpacer from "@dashboard/components/CardSpacer";
import Form from "@dashboard/components/Form";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import RequirePermissions from "@dashboard/components/RequirePermissions";
import Savebar from "@dashboard/components/Savebar";
import { SingleAutocompleteChoiceType } from "@dashboard/components/SingleAutocompleteSelectField";
@ -198,7 +196,7 @@ const ChannelDetailsPage = function <TErrors extends ChannelErrorFragment[]>({
const allErrors = [...errors, ...validationErrors];
return (
<DetailedContent>
<DetailPageLayout>
<TopNav
href={channelsListUrl()}
title={
@ -210,7 +208,7 @@ const ChannelDetailsPage = function <TErrors extends ChannelErrorFragment[]>({
})
}
/>
<Content>
<DetailPageLayout.Content>
<ChannelForm
data={data}
disabled={disabled}
@ -223,8 +221,8 @@ const ChannelDetailsPage = function <TErrors extends ChannelErrorFragment[]>({
onDefaultCountryChange={handleDefaultCountrySelect}
errors={allErrors}
/>
</Content>
<RightSidebar>
</DetailPageLayout.Content>
<DetailPageLayout.RightSidebar>
{!!updateChannelStatus && (
<>
<ChannelStatus
@ -279,7 +277,7 @@ const ChannelDetailsPage = function <TErrors extends ChannelErrorFragment[]>({
disabled={disabled}
onChange={change}
/>
</RightSidebar>
</DetailPageLayout.RightSidebar>
<Savebar
onCancel={() => navigate(channelsListUrl())}
onSubmit={submit}
@ -287,7 +285,7 @@ const ChannelDetailsPage = function <TErrors extends ChannelErrorFragment[]>({
state={saveButtonBarState}
disabled={disabled}
/>
</DetailedContent>
</DetailPageLayout>
);
}}
</Form>

5
src/channels/pages/ChannelsListPage/ChannelsListPage.tsx
View file

@ -2,6 +2,7 @@ import { channelAddUrl, channelUrl } from "@dashboard/channels/urls";
import { LimitsInfo } from "@dashboard/components/AppLayout/LimitsInfo";
import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import { Button } from "@dashboard/components/Button";
import { ListPageLayout } from "@dashboard/components/Layouts";
import LimitReachedAlert from "@dashboard/components/LimitReachedAlert";
import ResponsiveTable from "@dashboard/components/ResponsiveTable";
import Skeleton from "@dashboard/components/Skeleton";
@ -39,7 +40,7 @@ export const ChannelsListPage: React.FC<ChannelsListPageProps> = ({
const limitReached = isLimitReached(limits, "channels");
return (
<>
<ListPageLayout>
<TopNav
href={configurationMenuUrl}
title={intl.formatMessage(sectionNames.channels)}
@ -154,7 +155,7 @@ export const ChannelsListPage: React.FC<ChannelsListPageProps> = ({
</TableBody>
</ResponsiveTable>
</Card>
</>
</ListPageLayout>
);
};

16
src/collections/components/CollectionCreatePage/CollectionCreatePage.tsx
View file

@ -1,11 +1,9 @@
import { ChannelCollectionData } from "@dashboard/channels/utils";
import { collectionListUrl } from "@dashboard/collections/urls";
import { Content } from "@dashboard/components/AppLayout/Content";
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { RightSidebar } from "@dashboard/components/AppLayout/RightSidebar";
import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import { CardSpacer } from "@dashboard/components/CardSpacer";
import ChannelsAvailabilityCard from "@dashboard/components/ChannelsAvailabilityCard";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import Metadata from "@dashboard/components/Metadata";
import Savebar from "@dashboard/components/Savebar";
import SeoForm from "@dashboard/components/SeoForm";
@ -58,7 +56,7 @@ const CollectionCreatePage: React.FC<CollectionCreatePageProps> = ({
disabled={disabled}
>
{({ change, data, handlers, submit, isSaveDisabled }) => (
<DetailedContent>
<DetailPageLayout>
<TopNav
href={collectionListUrl()}
title={intl.formatMessage({
@ -67,7 +65,7 @@ const CollectionCreatePage: React.FC<CollectionCreatePageProps> = ({
description: "page header",
})}
/>
<Content>
<DetailPageLayout.Content>
<CollectionDetails
data={data}
disabled={disabled}
@ -129,8 +127,8 @@ const CollectionCreatePage: React.FC<CollectionCreatePageProps> = ({
/>
<CardSpacer />
<Metadata data={data} onChange={handlers.changeMetadata} />
</Content>
<RightSidebar>
</DetailPageLayout.Content>
<DetailPageLayout.RightSidebar>
<ChannelsAvailabilityCard
messages={{
hiddenLabel: intl.formatMessage({
@ -153,14 +151,14 @@ const CollectionCreatePage: React.FC<CollectionCreatePageProps> = ({
onChange={handlers.changeChannels}
openModal={openChannelsModal}
/>
</RightSidebar>
</DetailPageLayout.RightSidebar>
<Savebar
state={saveButtonBarState}
disabled={isSaveDisabled}
onCancel={() => navigate(collectionListUrl())}
onSubmit={submit}
/>
</DetailedContent>
</DetailPageLayout>
)}
</CollectionCreateForm>
);

16
src/collections/components/CollectionDetailsPage/CollectionDetailsPage.tsx
View file

@ -1,11 +1,9 @@
import { ChannelCollectionData } from "@dashboard/channels/utils";
import { collectionListUrl } from "@dashboard/collections/urls";
import { Content } from "@dashboard/components/AppLayout/Content";
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { RightSidebar } from "@dashboard/components/AppLayout/RightSidebar";
import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import { CardSpacer } from "@dashboard/components/CardSpacer";
import ChannelsAvailabilityCard from "@dashboard/components/ChannelsAvailabilityCard";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import Metadata from "@dashboard/components/Metadata/Metadata";
import Savebar from "@dashboard/components/Savebar";
import SeoForm from "@dashboard/components/SeoForm";
@ -75,9 +73,9 @@ const CollectionDetailsPage: React.FC<CollectionDetailsPageProps> = ({
disabled={disabled}
>
{({ change, data, handlers, submit, isSaveDisabled }) => (
<DetailedContent>
<DetailPageLayout>
<TopNav href={collectionListUrl()} title={collection?.name} />
<Content>
<DetailPageLayout.Content>
<CollectionDetails
data={data}
disabled={disabled}
@ -117,8 +115,8 @@ const CollectionDetailsPage: React.FC<CollectionDetailsPageProps> = ({
titlePlaceholder={collection?.name}
onChange={change}
/>
</Content>
<RightSidebar>
</DetailPageLayout.Content>
<DetailPageLayout.RightSidebar>
<div>
<ChannelsAvailabilityCard
managePermissions={[PermissionEnum.MANAGE_PRODUCTS]}
@ -143,7 +141,7 @@ const CollectionDetailsPage: React.FC<CollectionDetailsPageProps> = ({
openModal={openChannelsModal}
/>
</div>
</RightSidebar>
</DetailPageLayout.RightSidebar>
<Savebar
state={saveButtonBarState}
disabled={isSaveDisabled}
@ -151,7 +149,7 @@ const CollectionDetailsPage: React.FC<CollectionDetailsPageProps> = ({
onDelete={onCollectionRemove}
onSubmit={submit}
/>
</DetailedContent>
</DetailPageLayout>
)}
</CollectionUpdateForm>
);

5
src/collections/components/CollectionListPage/CollectionListPage.tsx
View file

@ -3,6 +3,7 @@ import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import { Button } from "@dashboard/components/Button";
import { getByName } from "@dashboard/components/Filter/utils";
import FilterBar from "@dashboard/components/FilterBar";
import { ListPageLayout } from "@dashboard/components/Layouts";
import { sectionNames } from "@dashboard/intl";
import {
FilterPageProps,
@ -51,7 +52,7 @@ const CollectionListPage: React.FC<CollectionListPageProps> = ({
const filterDependency = filterStructure.find(getByName("channel"));
return (
<>
<ListPageLayout>
<TopNav title={intl.formatMessage(sectionNames.collections)}>
<Button
disabled={disabled}
@ -96,7 +97,7 @@ const CollectionListPage: React.FC<CollectionListPageProps> = ({
{...listProps}
/>
</Card>
</>
</ListPageLayout>
);
};
CollectionListPage.displayName = "CollectionListPage";

32
src/components/AppLayout/Content.tsx
View file

@ -1,32 +0,0 @@
import { Box } from "@saleor/macaw-ui/next";
import React from "react";
import { useContentHeight } from "./useContentHeight";
interface ContentProps {
[key: `data-${string}`]: string;
children: React.ReactNode;
noSavebar?: boolean;
noTopNav?: boolean;
}
export const Content: React.FC<ContentProps> = ({
children,
noSavebar = false,
noTopNav = false,
...rest
}) => {
const { withoutSaveBar, withSaveBar } = useContentHeight();
return (
<Box
__gridArea="content"
__height={noSavebar ? withoutSaveBar() : withSaveBar({ noTopNav })}
overflowY="auto"
className="hide-scrollbar"
{...rest}
>
{children}
</Box>
);
};

42
src/components/AppLayout/DetailedContent.tsx
View file

@ -1,42 +0,0 @@
import { Box, tabletMediaQuery } from "@saleor/macaw-ui/next";
import React from "react";
import { useMediaQuery } from "usehooks-ts";
import { contentMaxWidth } from "./consts";
interface DetailedContentProps {
children: React.ReactNode;
useSingleColumn?: boolean;
constHeight?: boolean;
}
const getLayoutAreas = (useSingleColumn: boolean, isTablet: boolean) => {
if (useSingleColumn) {
return '"nav" "content"';
}
return isTablet ? '"nav right" "content right"' : '"nav" "content" "right"';
};
export const DetailedContent: React.FC<DetailedContentProps> = ({
children,
useSingleColumn = false,
constHeight = false,
}) => {
const isTablet = useMediaQuery(tabletMediaQuery);
return (
<Box
as="div"
display="grid"
height={constHeight ? "100vh" : "100%"}
margin="auto"
__maxWidth={contentMaxWidth}
__gridTemplateColumns={useSingleColumn ? "1fr" : "9fr 4fr"}
__gridTemplateRows="auto 1fr"
__gridTemplateAreas={getLayoutAreas(useSingleColumn, isTablet)}
>
{children}
</Box>
);
};

37
src/components/AppLayout/RightSidebar.tsx
View file

@ -1,37 +0,0 @@
import { Box } from "@saleor/macaw-ui/next";
import clsx from "clsx";
import React from "react";
import { borderHeight, savebarHeight } from "./consts";
interface RightSidebarProps {
children: React.ReactNode;
className?: string;
noSavebar?: boolean;
}
export const RightSidebar: React.FC<RightSidebarProps> = ({
children,
noSavebar = false,
className,
}) => (
<Box
borderStyle="solid"
borderColor="neutralPlain"
borderLeftWidth={1}
__height={
noSavebar ? "100%" : `calc(100vh - ${savebarHeight} - ${borderHeight})`
}
position="sticky"
top={0}
overflowY="auto"
borderYWidth={0}
borderTopWidth={0}
borderBottomWidth={0}
borderRightWidth={0}
__gridArea="right"
className={clsx("hide-scrollbar", className)}
>
{children}
</Box>
);

4
src/components/AppLayout/TopNav.tsx
View file

@ -30,9 +30,11 @@ export const TopNav: React.FC<PropsWithChildren<TopNavProps>> = ({
borderBottomStyle="solid"
borderColor="neutralPlain"
position="relative"
__gridArea="nav"
data-test-id="page-header"
__height={topBarHeight}
gridColumn="8"
gridRowStart="1"
backgroundColor="plain"
>
{href && (
<Link

24
src/components/AppLayout/useContentHeight.test.ts
View file

@ -1,24 +0,0 @@
import { useContentHeight } from "./useContentHeight";
describe("useContentHeight", () => {
it("should return the correct height without savebar", () => {
const { withoutSaveBar } = useContentHeight();
const height = withoutSaveBar();
expect(height).toEqual("calc(100vh - 77px - 1px)");
});
it("should return the correct height with savebar", () => {
const { withSaveBar } = useContentHeight();
const height = withSaveBar({ noTopNav: false });
expect(height).toEqual("calc(100vh - 77px - 64px - 1px)");
});
it("should return the correct height with savebar and no top nav", () => {
const { withSaveBar } = useContentHeight();
const height = withSaveBar({ noTopNav: true });
expect(height).toEqual("calc(100vh - 0px - 64px - 1px)");
});
});

14
src/components/AppLayout/useContentHeight.ts
View file

@ -1,14 +0,0 @@
import { borderHeight, savebarHeight, topBarHeight } from "./consts";
export const useContentHeight = () => {
const withoutSaveBar = () =>
`calc(100vh - ${topBarHeight} - ${borderHeight})`;
const withSaveBar = ({ noTopNav }) => {
const topHeight = noTopNav ? "0px" : topBarHeight;
return `calc(100vh - ${topHeight} - ${savebarHeight} - ${borderHeight})`;
};
return { withoutSaveBar, withSaveBar };
};

1
src/components/Attributes/styles.ts
View file

@ -57,7 +57,6 @@ export const useBasicAttributeStyles = makeStyles(
"&:hover": {
fillOpacity: 1,
},
position: "absolute",
padding: theme.spacing(0.25),
marginLeft: theme.spacing(0.75),
},

23
src/components/Layouts/Detail/Content.tsx Normal file
View file

@ -0,0 +1,23 @@
import { Box } from "@saleor/macaw-ui/next";
import React from "react";
interface DetailPageLayoutContentProps {
[key: `data-${string}`]: string;
children: React.ReactNode;
}
export const Content: React.FC<DetailPageLayoutContentProps> = ({
children,
...rest
}) => (
<Box
height="100%"
overflowY="auto"
className="hide-scrollbar"
gridColumn="8"
gridRow={{ mobile: "6", tablet: "12", desktop: "12" }}
{...rest}
>
{children}
</Box>
);

22
src/components/Layouts/Detail/RightSidebar.tsx Normal file
View file

@ -0,0 +1,22 @@
import { Box } from "@saleor/macaw-ui/next";
import React from "react";
interface DetailPageLayoutRightSidebarProps {
children: React.ReactNode;
}
export const RightSidebar: React.FC<DetailPageLayoutRightSidebarProps> = ({
children,
}) => (
<Box
borderLeftStyle="solid"
borderColor="neutralPlain"
height="100%"
overflowY="auto"
className="hide-scrollbar"
gridColumn={"8"}
gridRow={{ mobile: "6", tablet: "full", desktop: "full" }}
>
{children}
</Box>
);

35
src/components/Layouts/Detail/Root.tsx Normal file
View file

@ -0,0 +1,35 @@
import {
borderHeight,
contentMaxWidth,
savebarHeight,
} from "@dashboard/components/AppLayout/consts";
import { Box, Sprinkles } from "@saleor/macaw-ui/next";
import React from "react";
interface DetailPageLayoutProps {
children: React.ReactNode;
gridTemplateColumns?: Sprinkles["gridTemplateColumns"];
withSavebar?: boolean;
}
const contentWithSidebarHeight = `calc(100vh - ${savebarHeight} - ${borderHeight})`;
const contentWithoutSidebarHeight = `calc(100vh - ${borderHeight}`;
export const RootLayout: React.FC<DetailPageLayoutProps> = ({
children,
gridTemplateColumns = 12,
withSavebar = true,
}) => (
<Box
display="grid"
margin="auto"
gridTemplateColumns={gridTemplateColumns}
__gridTemplateRows="auto 1fr"
__maxWidth={contentMaxWidth}
__height={
withSavebar ? contentWithSidebarHeight : contentWithoutSidebarHeight
}
>
{children}
</Box>
);

8
src/components/Layouts/Detail/index.ts Normal file
View file

@ -0,0 +1,8 @@
import { Content } from "./Content";
import { RightSidebar } from "./RightSidebar";
import { RootLayout } from "./Root";
export const DetailPageLayout = Object.assign(RootLayout, {
Content,
RightSidebar,
});

21
src/components/Layouts/List/Root.tsx Normal file
View file

@ -0,0 +1,21 @@
import { contentMaxWidth } from "@dashboard/components/AppLayout/consts";
import { Box } from "@saleor/macaw-ui/next";
import React from "react";
interface ListPageLayoutProps {
children: React.ReactNode;
hasSaveBar?: boolean;
hasTopNav?: boolean;
}
export const ListPageLayout: React.FC<ListPageLayoutProps> = ({ children }) => (
<Box
display="grid"
margin="auto"
gridTemplateColumns={1}
height="100%"
__maxWidth={contentMaxWidth}
>
{children}
</Box>
);

1
src/components/Layouts/List/index.ts Normal file
View file

@ -0,0 +1 @@
export * from "./Root";

2
src/components/Layouts/index.ts Normal file
View file

@ -0,0 +1,2 @@
export * from "./Detail";
export * from "./List";

2
src/configuration/ConfigurationPage.stories.tsx
View file

@ -6,7 +6,7 @@ import { storiesOf } from "@storybook/react";
import React from "react";
import { useIntl } from "react-intl";
import ConfigurationPage from "./ConfigurationPage";
import { ConfigurationPage } from "./ConfigurationPage";
const user = {
__typename: staffMember.__typename,

13
src/configuration/ConfigurationPage.tsx
View file

@ -1,6 +1,5 @@
import { Content } from "@dashboard/components/AppLayout/Content";
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import { UserFragment } from "@dashboard/graphql";
import { sectionNames } from "@dashboard/intl";
import { Typography } from "@material-ui/core";
@ -95,11 +94,11 @@ export const ConfigurationPage: React.FC<ConfigurationPageProps> = props => {
const intl = useIntl();
return (
<DetailedContent useSingleColumn>
<DetailPageLayout gridTemplateColumns={1} withSavebar={false}>
<TopNav title={intl.formatMessage(sectionNames.configuration)}>
{isSmUp && renderVersionInfo}
</TopNav>
<Content noSavebar>
<DetailPageLayout.Content>
<Box paddingX={9} __maxWidth={"1024px"} margin="auto">
{menus
.filter(menu =>
@ -137,9 +136,9 @@ export const ConfigurationPage: React.FC<ConfigurationPageProps> = props => {
</div>
))}
</Box>
</Content>
</DetailedContent>
</DetailPageLayout.Content>
</DetailPageLayout>
);
};
ConfigurationPage.displayName = "ConfigurationPage";
export default ConfigurationPage;

2
src/configuration/index.tsx
View file

@ -34,7 +34,7 @@ import { warehouseSection } from "@dashboard/warehouses/urls";
import React from "react";
import { IntlShape, useIntl } from "react-intl";
import ConfigurationPage from "./ConfigurationPage";
import { ConfigurationPage } from "./ConfigurationPage";
import { MenuSection } from "./types";
export function createConfigurationMenu(intl: IntlShape): MenuSection[] {

18
src/custom-apps/components/CustomAppCreatePage/CustomAppCreatePage.tsx
View file

@ -1,9 +1,7 @@
import AccountPermissions from "@dashboard/components/AccountPermissions";
import { Content } from "@dashboard/components/AppLayout/Content";
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { RightSidebar } from "@dashboard/components/AppLayout/RightSidebar";
import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import Form from "@dashboard/components/Form";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import Savebar from "@dashboard/components/Savebar";
import { CustomAppUrls } from "@dashboard/custom-apps/urls";
import {
@ -58,7 +56,7 @@ const CustomAppCreatePage: React.FC<CustomAppCreatePageProps> = props => {
disabled={disabled}
>
{({ data, change, submit, isSaveDisabled }) => (
<DetailedContent>
<DetailPageLayout>
<TopNav
href={CustomAppUrls.resolveAppListUrl()}
title={intl.formatMessage({
@ -66,16 +64,16 @@ const CustomAppCreatePage: React.FC<CustomAppCreatePageProps> = props => {
defaultMessage: "Create New App",
description: "header",
})}
></TopNav>
<Content>
/>
<DetailPageLayout.Content>
<CustomAppInformation
data={data}
disabled={disabled}
errors={errors}
onChange={change}
/>
</Content>
<RightSidebar>
</DetailPageLayout.Content>
<DetailPageLayout.RightSidebar>
<AccountPermissions
data={data}
errorMessage={permissionsError}
@ -95,14 +93,14 @@ const CustomAppCreatePage: React.FC<CustomAppCreatePageProps> = props => {
description: "card description",
})}
/>
</RightSidebar>
</DetailPageLayout.RightSidebar>
<Savebar
disabled={isSaveDisabled}
state={saveButtonBarState}
onCancel={() => navigate(CustomAppUrls.resolveAppListUrl())}
onSubmit={submit}
/>
</DetailedContent>
</DetailPageLayout>
)}
</Form>
);

16
src/custom-apps/components/CustomAppDetailsPage/CustomAppDetailsPage.tsx
View file

@ -1,10 +1,8 @@
import AccountPermissions from "@dashboard/components/AccountPermissions";
import { Content } from "@dashboard/components/AppLayout/Content";
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { RightSidebar } from "@dashboard/components/AppLayout/RightSidebar";
import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import CardSpacer from "@dashboard/components/CardSpacer";
import Form from "@dashboard/components/Form";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import Savebar from "@dashboard/components/Savebar";
import WebhooksList from "@dashboard/custom-apps/components/WebhooksList";
import { CustomAppUrls } from "@dashboard/custom-apps/urls";
@ -104,7 +102,7 @@ const CustomAppDetailsPage: React.FC<CustomAppDetailsPageProps> = props => {
disabled={disabled}
>
{({ data, change, submit, isSaveDisabled }) => (
<DetailedContent>
<DetailPageLayout>
<TopNav href={CustomAppUrls.resolveAppListUrl()} title={app?.name}>
<Button
variant="secondary"
@ -128,7 +126,7 @@ const CustomAppDetailsPage: React.FC<CustomAppDetailsPageProps> = props => {
)}
</Button>
</TopNav>
<Content>
<DetailPageLayout.Content>
{token && (
<>
<CustomAppDefaultToken
@ -158,8 +156,8 @@ const CustomAppDetailsPage: React.FC<CustomAppDetailsPageProps> = props => {
onRemove={onWebhookRemove}
createHref={app?.isActive && webhookCreateHref}
/>
</Content>
<RightSidebar>
</DetailPageLayout.Content>
<DetailPageLayout.RightSidebar>
<AccountPermissions
data={data}
errorMessage={permissionsError}
@ -179,14 +177,14 @@ const CustomAppDetailsPage: React.FC<CustomAppDetailsPageProps> = props => {
description: "card description",
})}
/>
</RightSidebar>
</DetailPageLayout.RightSidebar>
<Savebar
disabled={isSaveDisabled}
state={saveButtonBarState}
onCancel={() => navigate(CustomAppUrls.resolveAppListUrl())}
onSubmit={submit}
/>
</DetailedContent>
</DetailPageLayout>
)}
</Form>
);

14
src/custom-apps/components/CustomAppListPage/CustomAppListPage.tsx
View file

@ -1,9 +1,6 @@
import {
borderHeight,
topBarHeight,
} from "@dashboard/components/AppLayout/consts";
import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import { Button } from "@dashboard/components/Button";
import { ListPageLayout } from "@dashboard/components/Layouts";
import { TableButtonWrapper } from "@dashboard/components/TableButtonWrapper/TableButtonWrapper";
import TableRowLink from "@dashboard/components/TableRowLink";
import { CustomAppUrls } from "@dashboard/custom-apps/urls";
@ -35,7 +32,7 @@ const CustomAppListPage: React.FC<CustomAppListPageProps> = ({
const classes = useStyles({});
return (
<>
<ListPageLayout>
<TopNav title={intl.formatMessage(sectionNames.webhooksAndEvents)}>
<Button
variant="secondary"
@ -49,10 +46,7 @@ const CustomAppListPage: React.FC<CustomAppListPageProps> = ({
/>
</Button>
</TopNav>
<Box
padding={9}
__height={`calc(100vh - ${topBarHeight} - ${borderHeight})`}
>
<Box padding={9}>
<Box marginBottom={4}>
<Text as="p">
<FormattedMessage
@ -116,7 +110,7 @@ const CustomAppListPage: React.FC<CustomAppListPageProps> = ({
</TableBody>
</ResponsiveTable>
</Box>
</>
</ListPageLayout>
);
};

13
src/custom-apps/components/WebhookDetailsPage/WebhookDetailsPage.tsx
View file

@ -1,8 +1,7 @@
import { Content } from "@dashboard/components/AppLayout/Content";
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import Form from "@dashboard/components/Form";
import FormSpacer from "@dashboard/components/FormSpacer";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import Savebar from "@dashboard/components/Savebar";
import WebhookEvents from "@dashboard/custom-apps/components/WebhookEvents";
import WebhookInfo from "@dashboard/custom-apps/components/WebhookInfo";
@ -110,10 +109,10 @@ const WebhookDetailsPage: React.FC<WebhookDetailsPageProps> = ({
});
return (
<DetailedContent useSingleColumn>
<DetailPageLayout gridTemplateColumns={1}>
<TopNav href={backUrl} title={getHeaderTitle(intl, webhook)} />
<Content>
<Box paddingX={9}>
<DetailPageLayout.Content>
<Box padding={9}>
<WebhookStatus
data={data.isActive}
disabled={disabled}
@ -142,14 +141,14 @@ const WebhookDetailsPage: React.FC<WebhookDetailsPageProps> = ({
<FormSpacer />
<WebhookHeaders data={data} onChange={change} />
</Box>
</Content>
</DetailPageLayout.Content>
<Savebar
disabled={disabled}
state={saveButtonBarState}
onCancel={() => navigate(backUrl)}
onSubmit={submit}
/>
</DetailedContent>
</DetailPageLayout>
);
}}
</Form>

8
src/customers/components/CustomerAddressListPage/CustomerAddressListPage.tsx
View file

@ -1,6 +1,6 @@
import { Content } from "@dashboard/components/AppLayout/Content";
import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import { Button } from "@dashboard/components/Button";
import { ListPageLayout } from "@dashboard/components/Layouts";
import { customerUrl } from "@dashboard/customers/urls";
import { AddressTypeEnum, CustomerAddressesFragment } from "@dashboard/graphql";
import { getStringOrPlaceholder, renderCollection } from "@dashboard/misc";
@ -96,7 +96,7 @@ const CustomerAddressListPage: React.FC<
);
return (
<>
<ListPageLayout>
<TopNav
href={customerUrl(customer?.id)}
title={
@ -111,7 +111,6 @@ const CustomerAddressListPage: React.FC<
</Button>
)}
</TopNav>
<Content>
{isEmpty ? (
<Box
display="flex"
@ -155,8 +154,7 @@ const CustomerAddressListPage: React.FC<
))}
</div>
)}
</Content>
</>
</ListPageLayout>
);
};
CustomerAddressListPage.displayName = "CustomerAddressListPage";

11
src/customers/components/CustomerCreatePage/CustomerCreatePage.tsx
View file

@ -1,9 +1,8 @@
import { createCountryHandler } from "@dashboard/components/AddressEdit/createCountryHandler";
import { Content } from "@dashboard/components/AppLayout/Content";
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import { CardSpacer } from "@dashboard/components/CardSpacer";
import Form from "@dashboard/components/Form";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import Savebar from "@dashboard/components/Savebar";
import { customerListUrl } from "@dashboard/customers/urls";
import {
@ -152,7 +151,7 @@ const CustomerCreatePage: React.FC<CustomerCreatePageProps> = ({
const handleCountrySelect = createCountryHandler(countrySelect, set);
return (
<DetailedContent useSingleColumn>
<DetailPageLayout gridTemplateColumns={1}>
<TopNav
href={customerListUrl()}
title={intl.formatMessage({
@ -161,7 +160,7 @@ const CustomerCreatePage: React.FC<CustomerCreatePageProps> = ({
description: "page header",
})}
/>
<Content>
<DetailPageLayout.Content>
<div>
<CustomerCreateDetails
data={data}
@ -193,8 +192,8 @@ const CustomerCreatePage: React.FC<CustomerCreatePageProps> = ({
onSubmit={submit}
onCancel={() => navigate(customerListUrl())}
/>
</Content>
</DetailedContent>
</DetailPageLayout.Content>
</DetailPageLayout>
);
}}
</Form>

16
src/customers/components/CustomerDetailsPage/CustomerDetailsPage.tsx
View file

@ -3,14 +3,12 @@ import {
mapToMenuItemsForCustomerDetails,
useExtensions,
} from "@dashboard/apps/useExtensions";
import { Content } from "@dashboard/components/AppLayout/Content";
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { RightSidebar } from "@dashboard/components/AppLayout/RightSidebar";
import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import { Backlink } from "@dashboard/components/Backlink";
import CardMenu from "@dashboard/components/CardMenu/CardMenu";
import { CardSpacer } from "@dashboard/components/CardSpacer";
import Form from "@dashboard/components/Form";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import Metadata from "@dashboard/components/Metadata/Metadata";
import { MetadataFormData } from "@dashboard/components/Metadata/types";
import RequirePermissions from "@dashboard/components/RequirePermissions";
@ -107,7 +105,7 @@ const CustomerDetailsPage: React.FC<CustomerDetailsPageProps> = ({
const changeMetadata = makeMetadataChangeHandler(change);
return (
<DetailedContent>
<DetailPageLayout>
<TopNav
href={customerListUrl()}
title={getUserName(customer, true)}
@ -116,7 +114,7 @@ const CustomerDetailsPage: React.FC<CustomerDetailsPageProps> = ({
<CardMenu menuItems={extensionMenuItems} />
)}
</TopNav>
<Content>
<DetailPageLayout.Content>
<Backlink href={customerListUrl()}>
{intl.formatMessage(sectionNames.customers)}
</Backlink>
@ -147,8 +145,8 @@ const CustomerDetailsPage: React.FC<CustomerDetailsPageProps> = ({
<CardSpacer />
</RequirePermissions>
<Metadata data={data} onChange={changeMetadata} />
</Content>
<RightSidebar>
</DetailPageLayout.Content>
<DetailPageLayout.RightSidebar>
<CustomerAddresses
customer={customer}
disabled={disabled}
@ -162,7 +160,7 @@ const CustomerDetailsPage: React.FC<CustomerDetailsPageProps> = ({
>
<CustomerGiftCardsCard />
</RequirePermissions>
</RightSidebar>
</DetailPageLayout.RightSidebar>
<Savebar
disabled={isSaveDisabled}
state={saveButtonBar}
@ -170,7 +168,7 @@ const CustomerDetailsPage: React.FC<CustomerDetailsPageProps> = ({
onCancel={() => navigate(customerListUrl())}
onDelete={onDelete}
/>
</DetailedContent>
</DetailPageLayout>
);
}}
</Form>

18
src/discounts/components/SaleCreatePage/SaleCreatePage.tsx
View file

@ -1,11 +1,9 @@
import { validateSalePrice } from "@dashboard/channels/utils";
import { Content } from "@dashboard/components/AppLayout/Content";
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { RightSidebar } from "@dashboard/components/AppLayout/RightSidebar";
import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import CardSpacer from "@dashboard/components/CardSpacer";
import ChannelsAvailabilityCard from "@dashboard/components/ChannelsAvailabilityCard";
import Form from "@dashboard/components/Form";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import Metadata, { MetadataFormData } from "@dashboard/components/Metadata";
import Savebar from "@dashboard/components/Savebar";
import { createSaleChannelsChangeHandler } from "@dashboard/discounts/handlers";
@ -102,7 +100,7 @@ const SaleCreatePage: React.FC<SaleCreatePageProps> = ({
const changeMetadata = makeMetadataChangeHandler(change);
return (
<DetailedContent>
<DetailPageLayout>
<TopNav
title={intl.formatMessage({
id: "2E1xZ0",
@ -110,7 +108,7 @@ const SaleCreatePage: React.FC<SaleCreatePageProps> = ({
description: "page header",
})}
/>
<Content>
<DetailPageLayout.Content>
<SaleInfo
data={data}
disabled={disabled}
@ -133,8 +131,9 @@ const SaleCreatePage: React.FC<SaleCreatePageProps> = ({
errors={errors}
onChange={change}
/>
</Content>
<RightSidebar>
<Metadata data={data} onChange={changeMetadata} />
</DetailPageLayout.Content>
<DetailPageLayout.RightSidebar>
<ChannelsAvailabilityCard
managePermissions={[PermissionEnum.MANAGE_DISCOUNTS]}
allChannelsCount={allChannelsCount}
@ -145,15 +144,14 @@ const SaleCreatePage: React.FC<SaleCreatePageProps> = ({
disabled={disabled}
openModal={openChannelsModal}
/>
</RightSidebar>
<Metadata data={data} onChange={changeMetadata} />
</DetailPageLayout.RightSidebar>
<Savebar
disabled={disabled}
onCancel={onBack}
onSubmit={submit}
state={saveButtonBarState}
/>
</DetailedContent>
</DetailPageLayout>
);
}}
</Form>

18
src/discounts/components/SaleDetailsPage/SaleDetailsPage.tsx
View file

@ -1,11 +1,9 @@
import { ChannelSaleData, validateSalePrice } from "@dashboard/channels/utils";
import { Content } from "@dashboard/components/AppLayout/Content";
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { RightSidebar } from "@dashboard/components/AppLayout/RightSidebar";
import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import CardSpacer from "@dashboard/components/CardSpacer";
import ChannelsAvailabilityCard from "@dashboard/components/ChannelsAvailabilityCard";
import Form from "@dashboard/components/Form";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import Metadata, { MetadataFormData } from "@dashboard/components/Metadata";
import Savebar from "@dashboard/components/Savebar";
import { Tab, TabContainer } from "@dashboard/components/Tab";
@ -184,9 +182,9 @@ const SaleDetailsPage: React.FC<SaleDetailsPageProps> = ({
const allErrors = [...localErrors, ...errors];
return (
<DetailedContent>
<DetailPageLayout>
<TopNav href={saleListUrl()} title={sale?.name} />
<Content>
<DetailPageLayout.Content>
<SaleInfo
data={data}
disabled={disabled}
@ -298,8 +296,9 @@ const SaleDetailsPage: React.FC<SaleDetailsPageProps> = ({
errors={errors}
onChange={change}
/>
</Content>
<RightSidebar>
<Metadata data={data} onChange={changeMetadata} />
</DetailPageLayout.Content>
<DetailPageLayout.RightSidebar>
<SaleSummary selectedChannelId={selectedChannelId} sale={sale} />
<CardSpacer />
<ChannelsAvailabilityCard
@ -312,8 +311,7 @@ const SaleDetailsPage: React.FC<SaleDetailsPageProps> = ({
disabled={disabled}
openModal={openChannelsModal}
/>
</RightSidebar>
<Metadata data={data} onChange={changeMetadata} />
</DetailPageLayout.RightSidebar>
<Savebar
disabled={disabled}
onCancel={() => navigate(saleListUrl())}
@ -321,7 +319,7 @@ const SaleDetailsPage: React.FC<SaleDetailsPageProps> = ({
onSubmit={() => handleSubmit(data)}
state={saveButtonBarState}
/>
</DetailedContent>
</DetailPageLayout>
);
}}
</Form>

5
src/discounts/components/SaleListPage/SaleListPage.tsx
View file

@ -2,6 +2,7 @@ import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import { Button } from "@dashboard/components/Button";
import { getByName } from "@dashboard/components/Filter/utils";
import FilterBar from "@dashboard/components/FilterBar";
import { ListPageLayout } from "@dashboard/components/Layouts";
import { saleAddUrl, SaleListUrlSortField } from "@dashboard/discounts/urls";
import { SaleFragment } from "@dashboard/graphql";
import { sectionNames } from "@dashboard/intl";
@ -53,7 +54,7 @@ const SaleListPage: React.FC<SaleListPageProps> = ({
const filterDependency = structure.find(getByName("channel"));
return (
<>
<ListPageLayout>
<TopNav title={intl.formatMessage(sectionNames.sales)}>
<Button
href={saleAddUrl()}
@ -91,7 +92,7 @@ const SaleListPage: React.FC<SaleListPageProps> = ({
/>
<SaleList filterDependency={filterDependency} {...listProps} />
</Card>
</>
</ListPageLayout>
);
};
SaleListPage.displayName = "SaleListPage";

18
src/discounts/components/VoucherCreatePage/VoucherCreatePage.tsx
View file

@ -1,11 +1,9 @@
import { ChannelVoucherData } from "@dashboard/channels/utils";
import { Content } from "@dashboard/components/AppLayout/Content";
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { RightSidebar } from "@dashboard/components/AppLayout/RightSidebar";
import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import CardSpacer from "@dashboard/components/CardSpacer";
import ChannelsAvailabilityCard from "@dashboard/components/ChannelsAvailabilityCard";
import Form from "@dashboard/components/Form";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import Metadata from "@dashboard/components/Metadata";
import Savebar from "@dashboard/components/Savebar";
import {
@ -119,7 +117,7 @@ const VoucherCreatePage: React.FC<VoucherCreatePageProps> = ({
const changeMetadata = makeMetadataChangeHandler(change);
return (
<DetailedContent>
<DetailPageLayout>
<TopNav
href={voucherListUrl()}
title={intl.formatMessage({
@ -128,7 +126,7 @@ const VoucherCreatePage: React.FC<VoucherCreatePageProps> = ({
description: "page header",
})}
/>
<Content>
<DetailPageLayout.Content>
<VoucherInfo
data={data}
errors={errors}
@ -181,8 +179,9 @@ const VoucherCreatePage: React.FC<VoucherCreatePageProps> = ({
errors={errors}
onChange={change}
/>
</Content>
<RightSidebar>
<Metadata data={data} onChange={changeMetadata} />
</DetailPageLayout.Content>
<DetailPageLayout.RightSidebar>
<ChannelsAvailabilityCard
managePermissions={[PermissionEnum.MANAGE_DISCOUNTS]}
allChannelsCount={allChannelsCount}
@ -193,15 +192,14 @@ const VoucherCreatePage: React.FC<VoucherCreatePageProps> = ({
disabled={disabled}
openModal={openChannelsModal}
/>
</RightSidebar>
<Metadata data={data} onChange={changeMetadata} />
</DetailPageLayout.RightSidebar>
<Savebar
disabled={disabled}
onCancel={() => navigate(voucherListUrl())}
onSubmit={submit}
state={saveButtonBarState}
/>
</DetailedContent>
</DetailPageLayout>
);
}}
</Form>

16
src/discounts/components/VoucherDetailsPage/VoucherDetailsPage.tsx
View file

@ -1,12 +1,10 @@
import { ChannelVoucherData } from "@dashboard/channels/utils";
import { Content } from "@dashboard/components/AppLayout/Content";
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { RightSidebar } from "@dashboard/components/AppLayout/RightSidebar";
import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import CardSpacer from "@dashboard/components/CardSpacer";
import ChannelsAvailabilityCard from "@dashboard/components/ChannelsAvailabilityCard";
import CountryList from "@dashboard/components/CountryList";
import Form from "@dashboard/components/Form";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import Metadata, { MetadataFormData } from "@dashboard/components/Metadata";
import Savebar from "@dashboard/components/Savebar";
import { Tab, TabContainer } from "@dashboard/components/Tab";
@ -210,9 +208,9 @@ const VoucherDetailsPage: React.FC<VoucherDetailsPageProps> = ({
const allErrors = [...localErrors, ...errors];
return (
<DetailedContent>
<DetailPageLayout>
<TopNav href={voucherListUrl()} title={voucher?.code} />
<Content>
<DetailPageLayout.Content>
<VoucherInfo
data={data}
disabled={disabled}
@ -362,8 +360,8 @@ const VoucherDetailsPage: React.FC<VoucherDetailsPageProps> = ({
onChange={change}
/>
<Metadata data={data} onChange={changeMetadata} />
</Content>
<RightSidebar>
</DetailPageLayout.Content>
<DetailPageLayout.RightSidebar>
<VoucherSummary
voucher={voucher}
selectedChannelId={selectedChannelId}
@ -379,7 +377,7 @@ const VoucherDetailsPage: React.FC<VoucherDetailsPageProps> = ({
disabled={disabled}
openModal={openChannelsModal}
/>
</RightSidebar>
</DetailPageLayout.RightSidebar>
<Savebar
onCancel={() => navigate(voucherListUrl())}
disabled={disabled}
@ -387,7 +385,7 @@ const VoucherDetailsPage: React.FC<VoucherDetailsPageProps> = ({
onSubmit={() => handleSubmit(data)}
state={saveButtonBarState}
/>
</DetailedContent>
</DetailPageLayout>
);
}}
</Form>

5
src/discounts/components/VoucherListPage/VoucherListPage.tsx
View file

@ -2,6 +2,7 @@ import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import { Button } from "@dashboard/components/Button";
import { getByName } from "@dashboard/components/Filter/utils";
import FilterBar from "@dashboard/components/FilterBar";
import { ListPageLayout } from "@dashboard/components/Layouts";
import {
voucherAddUrl,
VoucherListUrlSortField,
@ -55,7 +56,7 @@ const VoucherListPage: React.FC<VoucherListPageProps> = ({
const filterDependency = structure.find(getByName("channel"));
return (
<>
<ListPageLayout>
<TopNav title={intl.formatMessage(sectionNames.vouchers)}>
<Button
href={voucherAddUrl()}
@ -93,7 +94,7 @@ const VoucherListPage: React.FC<VoucherListPageProps> = ({
/>
<VoucherList filterDependency={filterDependency} {...listProps} />
</Card>
</>
</ListPageLayout>
);
};
VoucherListPage.displayName = "VoucherListPage";

11
src/giftCards/GiftCardSettings/GiftCardSettingsPage.tsx
View file

@ -1,8 +1,7 @@
import { Content } from "@dashboard/components/AppLayout/Content";
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import Form from "@dashboard/components/Form";
import { Grid } from "@dashboard/components/Grid";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import Savebar from "@dashboard/components/Savebar";
import {
GiftCardSettingsExpiryTypeEnum,
@ -60,15 +59,15 @@ const GiftCardSettingsPage: React.FC = () => {
const formErrors = getFormErrors(["expiryPeriod"], apiErrors);
return (
<DetailedContent useSingleColumn>
<DetailPageLayout gridTemplateColumns={1}>
<TopNav
href={giftCardsListPath}
title={intl.formatMessage(messages.title)}
/>
<DetailPageLayout.Content>
<Form initial={initialData} onSubmit={handleSubmit}>
{({ data: formData, submit, change }) => (
<>
<Content>
<Box padding={9} margin="auto" height="100vh">
<Grid variant="inverted">
<div>
@ -86,7 +85,6 @@ const GiftCardSettingsPage: React.FC = () => {
/>
</Grid>
</Box>
</Content>
<Savebar
onCancel={() => navigate(giftCardsListPath)}
onSubmit={submit}
@ -96,7 +94,8 @@ const GiftCardSettingsPage: React.FC = () => {
</>
)}
</Form>
</DetailedContent>
</DetailPageLayout.Content>
</DetailPageLayout>
);
};

16
src/giftCards/GiftCardUpdate/GiftCardUpdatePage.tsx
View file

@ -1,7 +1,5 @@
import { Content } from "@dashboard/components/AppLayout/Content";
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { RightSidebar } from "@dashboard/components/AppLayout/RightSidebar";
import CardSpacer from "@dashboard/components/CardSpacer";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import Metadata from "@dashboard/components/Metadata";
import Savebar from "@dashboard/components/Savebar";
import useNavigator from "@dashboard/hooks/useNavigator";
@ -31,17 +29,17 @@ const GiftCardUpdatePage: React.FC = () => {
} = useGiftCardUpdate();
return (
<DetailedContent>
<DetailPageLayout>
<GiftCardUpdatePageHeader />
<Content>
<DetailPageLayout.Content>
<GiftCardUpdateDetailsCard />
<CardSpacer />
<Metadata data={data} onChange={changeMetadata} />
<GiftCardHistory />
</Content>
<RightSidebar>
</DetailPageLayout.Content>
<DetailPageLayout.RightSidebar>
<GiftCardUpdateInfoCard />
</RightSidebar>
</DetailPageLayout.RightSidebar>
<Savebar
state={status}
@ -50,7 +48,7 @@ const GiftCardUpdatePage: React.FC = () => {
onSubmit={submit}
onDelete={openDeleteDialog}
/>
</DetailedContent>
</DetailPageLayout>
);
};

16
src/home/components/HomePage/HomePage.tsx
View file

@ -1,8 +1,6 @@
import { Content } from "@dashboard/components/AppLayout/Content";
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { RightSidebar } from "@dashboard/components/AppLayout/RightSidebar";
import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import CardSpacer from "@dashboard/components/CardSpacer";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import Money from "@dashboard/components/Money";
import RequirePermissions from "@dashboard/components/RequirePermissions";
import Skeleton from "@dashboard/components/Skeleton";
@ -78,9 +76,9 @@ const HomePage: React.FC<HomePageProps> = props => {
const classes = useStyles(props);
return (
<DetailedContent>
<DetailPageLayout withSavebar={false}>
<TopNav title={<HomeHeader userName={userName} />} />
<Content noSavebar>
<DetailPageLayout.Content>
<Box paddingLeft={9} paddingRight={11}>
<CardSpacer />
<RequirePermissions
@ -153,17 +151,17 @@ const HomePage: React.FC<HomePageProps> = props => {
</RequirePermissions>
)}
</Box>
</Content>
</DetailPageLayout.Content>
{activities && (
<RightSidebar noSavebar>
<DetailPageLayout.RightSidebar>
<RequirePermissions
requiredPermissions={[PermissionEnum.MANAGE_ORDERS]}
>
<HomeActivityCard activities={activities} testId="activity-card" />
</RequirePermissions>
</RightSidebar>
</DetailPageLayout.RightSidebar>
)}
</DetailedContent>
</DetailPageLayout>
);
};
HomePage.displayName = "HomePage";

11
src/navigation/components/MenuDetailsPage/MenuDetailsPage.tsx
View file

@ -1,9 +1,8 @@
import { Content } from "@dashboard/components/AppLayout/Content";
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { Backlink } from "@dashboard/components/Backlink";
import CardSpacer from "@dashboard/components/CardSpacer";
import Form from "@dashboard/components/Form";
import Grid from "@dashboard/components/Grid";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import Savebar from "@dashboard/components/Savebar";
import { MenuDetailsFragment, MenuErrorFragment } from "@dashboard/graphql";
import { SubmitPromise } from "@dashboard/hooks/useForm";
@ -86,8 +85,8 @@ const MenuDetailsPage: React.FC<MenuDetailsPageProps> = ({
return (
<Form confirmLeave initial={initialForm} onSubmit={handleSubmit}>
{({ change, data, submit }) => (
<DetailedContent useSingleColumn>
<Content noTopNav>
<DetailPageLayout gridTemplateColumns={1}>
<DetailPageLayout.Content>
<Box padding={9} margin="auto" height="100vh">
<Backlink href={menuListUrl()}>
{intl.formatMessage(sectionNames.navigation)}
@ -145,8 +144,8 @@ const MenuDetailsPage: React.FC<MenuDetailsPageProps> = ({
state={saveButtonState}
/>
</Box>
</Content>
</DetailedContent>
</DetailPageLayout.Content>
</DetailPageLayout>
)}
</Form>
);

12
src/navigation/components/MenuListPage/MenuListPage.tsx
View file

@ -1,15 +1,11 @@
import {
borderHeight,
topBarHeight,
} from "@dashboard/components/AppLayout/consts";
import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import { Button } from "@dashboard/components/Button";
import { ListPageLayout } from "@dashboard/components/Layouts";
import { configurationMenuUrl } from "@dashboard/configuration";
import { MenuFragment } from "@dashboard/graphql";
import { sectionNames } from "@dashboard/intl";
import { menuListUrl, MenuListUrlSortField } from "@dashboard/navigation/urls";
import { ListActions, PageListProps, SortPage } from "@dashboard/types";
import { Box } from "@saleor/macaw-ui/next";
import React from "react";
import { FormattedMessage, useIntl } from "react-intl";
@ -30,7 +26,7 @@ const MenuListPage: React.FC<MenuListPageProps> = ({ ...listProps }) => {
});
return (
<>
<ListPageLayout>
<TopNav
href={configurationMenuUrl}
title={intl.formatMessage(sectionNames.navigation)}
@ -43,10 +39,8 @@ const MenuListPage: React.FC<MenuListPageProps> = ({ ...listProps }) => {
/>
</Button>
</TopNav>
<Box __height={`calc(100vh - ${topBarHeight} - ${borderHeight})`}>
<MenuList {...listProps} />
</Box>
</>
</ListPageLayout>
);
};
MenuListPage.displayName = "MenuListPage";

16
src/orders/components/OrderDetailsPage/OrderDetailsPage.tsx
View file

@ -3,13 +3,11 @@ import {
mapToMenuItemsForOrderDetails,
useExtensions,
} from "@dashboard/apps/useExtensions";
import { Content } from "@dashboard/components/AppLayout/Content";
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { RightSidebar } from "@dashboard/components/AppLayout/RightSidebar";
import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import CardMenu from "@dashboard/components/CardMenu";
import { CardSpacer } from "@dashboard/components/CardSpacer";
import Form from "@dashboard/components/Form";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import Metadata, { MetadataFormData } from "@dashboard/components/Metadata";
import Savebar from "@dashboard/components/Savebar";
import {
@ -205,7 +203,7 @@ const OrderDetailsPage: React.FC<OrderDetailsPageProps> = props => {
const changeMetadata = makeMetadataChangeHandler(change);
return (
<DetailedContent>
<DetailPageLayout>
<TopNav href={orderListUrl()} title={<Title order={order} />}>
<CardMenu
menuItems={[
@ -220,7 +218,7 @@ const OrderDetailsPage: React.FC<OrderDetailsPageProps> = props => {
/>
</TopNav>
<Content data-test-id="order-fulfillment">
<DetailPageLayout.Content data-test-id="order-fulfillment">
{!isOrderUnconfirmed ? (
<OrderUnfulfilledProductsCard
showFulfillmentAction={canFulfill}
@ -274,8 +272,8 @@ const OrderDetailsPage: React.FC<OrderDetailsPageProps> = props => {
orderCurrency={order?.total?.gross.currency}
onNoteAdd={onNoteAdd}
/>
</Content>
<RightSidebar>
</DetailPageLayout.Content>
<DetailPageLayout.RightSidebar>
<OrderCustomer
canEditAddresses={canEditAddresses}
canEditCustomer={false}
@ -300,7 +298,7 @@ const OrderDetailsPage: React.FC<OrderDetailsPageProps> = props => {
</>
)}
<OrderCustomerNote note={maybe(() => order.customerNote)} />
</RightSidebar>
</DetailPageLayout.RightSidebar>
<Savebar
labels={saveLabel}
onCancel={() => navigate(orderListUrl())}
@ -308,7 +306,7 @@ const OrderDetailsPage: React.FC<OrderDetailsPageProps> = props => {
state={saveButtonBarState}
disabled={allowSave()}
/>
</DetailedContent>
</DetailPageLayout>
);
}}
</Form>

16
src/orders/components/OrderDraftPage/OrderDraftPage.tsx
View file

@ -1,10 +1,8 @@
import { Content } from "@dashboard/components/AppLayout/Content";
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { RightSidebar } from "@dashboard/components/AppLayout/RightSidebar";
import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import CardMenu from "@dashboard/components/CardMenu";
import CardSpacer from "@dashboard/components/CardSpacer";
import { DateTime } from "@dashboard/components/Date";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import Savebar from "@dashboard/components/Savebar";
import Skeleton from "@dashboard/components/Skeleton";
import {
@ -82,7 +80,7 @@ const OrderDraftPage: React.FC<OrderDraftPageProps> = props => {
const intl = useIntl();
return (
<DetailedContent>
<DetailPageLayout>
<TopNav
href={orderDraftListUrl()}
title={
@ -113,7 +111,7 @@ const OrderDraftPage: React.FC<OrderDraftPageProps> = props => {
]}
/>
</TopNav>
<Content>
<DetailPageLayout.Content>
<OrderDraftAlert
order={order}
channelUsabilityData={channelUsabilityData}
@ -132,8 +130,8 @@ const OrderDraftPage: React.FC<OrderDraftPageProps> = props => {
orderCurrency={order?.total?.gross.currency}
onNoteAdd={onNoteAdd}
/>
</Content>
<RightSidebar>
</DetailPageLayout.Content>
<DetailPageLayout.RightSidebar>
<OrderChannelSectionCard channel={order?.channel} />
<CardSpacer />
<OrderCustomer
@ -151,7 +149,7 @@ const OrderDraftPage: React.FC<OrderDraftPageProps> = props => {
onProfileView={onProfileView}
onShippingAddressEdit={onShippingAddressEdit}
/>
</RightSidebar>
</DetailPageLayout.RightSidebar>
<Savebar
state={saveButtonBarState}
disabled={disabled}
@ -165,7 +163,7 @@ const OrderDraftPage: React.FC<OrderDraftPageProps> = props => {
}),
}}
/>
</DetailedContent>
</DetailPageLayout>
);
};
OrderDraftPage.displayName = "OrderDraftPage";

24
src/orders/components/OrderFulfillPage/OrderFulfillPage.tsx
View file

@ -3,6 +3,7 @@ import CardSpacer from "@dashboard/components/CardSpacer";
import CardTitle from "@dashboard/components/CardTitle";
import ControlledCheckbox from "@dashboard/components/ControlledCheckbox";
import Form from "@dashboard/components/Form";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import ResponsiveTable from "@dashboard/components/ResponsiveTable";
import Savebar from "@dashboard/components/Savebar";
import Skeleton from "@dashboard/components/Skeleton";
@ -99,9 +100,8 @@ const OrderFulfillPage: React.FC<OrderFulfillPageProps> = props => {
>(
(getToFulfillOrderLines(order?.lines) as OrderFulfillLineFragment[]).map(
line => {
const highestQuantityAllocation = getLineAllocationWithHighestQuantity(
line,
);
const highestQuantityAllocation =
getLineAllocationWithHighestQuantity(line);
return {
data: null,
@ -120,10 +120,8 @@ const OrderFulfillPage: React.FC<OrderFulfillPageProps> = props => {
),
);
const [
displayStockExceededDialog,
setDisplayStockExceededDialog,
] = React.useState(false);
const [displayStockExceededDialog, setDisplayStockExceededDialog] =
React.useState(false);
const handleSubmit = ({
formData,
@ -192,13 +190,14 @@ const OrderFulfillPage: React.FC<OrderFulfillPageProps> = props => {
};
return (
<>
<DetailPageLayout gridTemplateColumns={1}>
<TopNav
href={orderUrl(order?.id)}
title={intl.formatMessage(messages.headerOrderNumberAddFulfillment, {
orderNumber: order?.number,
})}
></TopNav>
/>
<DetailPageLayout.Content>
<Form
confirmLeave
initial={initialFormData}
@ -300,7 +299,9 @@ const OrderFulfillPage: React.FC<OrderFulfillPageProps> = props => {
tooltips={{
confirm:
notAllowedToFulfillUnpaid &&
intl.formatMessage(commonMessages.cannotFullfillUnpaidOrder),
intl.formatMessage(
commonMessages.cannotFullfillUnpaidOrder,
),
}}
onSubmit={submit}
onCancel={() => navigate(orderUrl(order?.id))}
@ -334,7 +335,8 @@ const OrderFulfillPage: React.FC<OrderFulfillPageProps> = props => {
}}
onClose={closeModal}
/>
</>
</DetailPageLayout.Content>
</DetailPageLayout>
);
};

5
src/orders/components/OrderListPage/OrderListPage.tsx
View file

@ -8,6 +8,7 @@ import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import { ButtonWithSelect } from "@dashboard/components/ButtonWithSelect";
import CardMenu from "@dashboard/components/CardMenu";
import FilterBar from "@dashboard/components/FilterBar";
import { ListPageLayout } from "@dashboard/components/Layouts";
import { OrderListQuery, RefreshLimitsQuery } from "@dashboard/graphql";
import { sectionNames } from "@dashboard/intl";
import { OrderListUrlSortField } from "@dashboard/orders/urls";
@ -78,7 +79,7 @@ const OrderListPage: React.FC<OrderListPageProps> = ({
const extensionCreateButtonItems = mapToMenuItems(ORDER_OVERVIEW_CREATE);
return (
<>
<ListPageLayout>
<TopNav title={intl.formatMessage(sectionNames.orders)}>
{!!onSettingsOpen && (
<CardMenu
@ -149,7 +150,7 @@ const OrderListPage: React.FC<OrderListPageProps> = ({
/>
<OrderList {...listProps} />
</Card>
</>
</ListPageLayout>
);
};
OrderListPage.displayName = "OrderListPage";

18
src/orders/components/OrderRefundPage/OrderRefundPage.tsx
View file

@ -1,8 +1,6 @@
import { Content } from "@dashboard/components/AppLayout/Content";
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { RightSidebar } from "@dashboard/components/AppLayout/RightSidebar";
import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import CardSpacer from "@dashboard/components/CardSpacer";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import {
FulfillmentStatus,
OrderErrorFragment,
@ -72,7 +70,7 @@ const OrderRefundPage: React.FC<OrderRefundPageProps> = props => {
const isProductRefund = data.type === OrderRefundType.PRODUCTS;
return (
<DetailedContent>
<DetailPageLayout>
<TopNav
href={orderUrl(order?.id)}
title={intl.formatMessage(
@ -85,8 +83,8 @@ const OrderRefundPage: React.FC<OrderRefundPageProps> = props => {
orderNumber: order?.number,
},
)}
></TopNav>
<Content>
/>
<DetailPageLayout.Content>
<OrderRefund data={data} disabled={disabled} onChange={change} />
{isProductRefund && (
<>
@ -127,8 +125,8 @@ const OrderRefundPage: React.FC<OrderRefundPageProps> = props => {
))}
</>
)}
</Content>
<RightSidebar>
</DetailPageLayout.Content>
<DetailPageLayout.RightSidebar>
<OrderRefundAmount
amountData={
isProductRefund
@ -142,8 +140,8 @@ const OrderRefundPage: React.FC<OrderRefundPageProps> = props => {
onChange={change}
onRefund={submit}
/>
</RightSidebar>
</DetailedContent>
</DetailPageLayout.RightSidebar>
</DetailPageLayout>
);
}}
</OrderRefundForm>

16
src/orders/components/OrderReturnPage/OrderReturnPage.tsx
View file

@ -1,8 +1,6 @@
import { Content } from "@dashboard/components/AppLayout/Content";
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { RightSidebar } from "@dashboard/components/AppLayout/RightSidebar";
import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import CardSpacer from "@dashboard/components/CardSpacer";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import { OrderDetailsFragment, OrderErrorFragment } from "@dashboard/graphql";
import { SubmitPromise } from "@dashboard/hooks/useForm";
import { renderCollection } from "@dashboard/misc";
@ -48,14 +46,14 @@ const OrderRefundPage: React.FC<OrderReturnPageProps> = props => {
return (
<OrderRefundForm order={order} onSubmit={onSubmit}>
{({ data, handlers, change, submit, isSaveDisabled }) => (
<DetailedContent>
<DetailPageLayout>
<TopNav
href={orderUrl(order?.id)}
title={intl.formatMessage(messages.pageTitle, {
orderNumber: order?.number,
})}
/>
<Content>
<DetailPageLayout.Content>
{!!data.unfulfilledItemsQuantities.length && (
<>
<ItemsCard
@ -115,8 +113,8 @@ const OrderRefundPage: React.FC<OrderReturnPageProps> = props => {
</React.Fragment>
),
)}
</Content>
<RightSidebar>
</DetailPageLayout.Content>
<DetailPageLayout.RightSidebar>
<OrderAmount
allowNoRefund
isReturn
@ -129,8 +127,8 @@ const OrderRefundPage: React.FC<OrderReturnPageProps> = props => {
onChange={change}
onRefund={submit}
/>
</RightSidebar>
</DetailedContent>
</DetailPageLayout.RightSidebar>
</DetailPageLayout>
)}
</OrderRefundForm>
);

11
src/orders/components/OrderSettingsPage/OrderSettingsPage.tsx
View file

@ -1,7 +1,6 @@
import { Content } from "@dashboard/components/AppLayout/Content";
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import Grid from "@dashboard/components/Grid";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import Savebar from "@dashboard/components/Savebar";
import {
OrderSettingsFragment,
@ -42,7 +41,7 @@ const OrderSettingsPage: React.FC<OrderSettingsPageProps> = props => {
disabled={disabled}
>
{({ data, submit, change, isSaveDisabled }) => (
<DetailedContent>
<DetailPageLayout>
<TopNav
href={orderListUrl()}
title={intl.formatMessage({
@ -51,7 +50,7 @@ const OrderSettingsPage: React.FC<OrderSettingsPageProps> = props => {
description: "header",
})}
/>
<Content>
<DetailPageLayout.Content>
<Box padding={9} margin="auto" height="100vh">
<Grid variant="inverted">
<div>
@ -75,14 +74,14 @@ const OrderSettingsPage: React.FC<OrderSettingsPageProps> = props => {
/>
</Grid>
</Box>
</Content>
</DetailPageLayout.Content>
<Savebar
onCancel={() => navigate(orderListUrl())}
onSubmit={submit}
disabled={isSaveDisabled}
state={saveButtonBarState}
/>
</DetailedContent>
</DetailPageLayout>
)}
</OrderSettingsForm>
);

11
src/pageTypes/components/PageTypeCreatePage/PageTypeCreatePage.tsx
View file

@ -1,9 +1,8 @@
import { Content } from "@dashboard/components/AppLayout/Content";
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import Form from "@dashboard/components/Form";
import Grid from "@dashboard/components/Grid";
import Hr from "@dashboard/components/Hr";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import Metadata, { MetadataFormData } from "@dashboard/components/Metadata";
import Savebar from "@dashboard/components/Savebar";
import { PageErrorFragment } from "@dashboard/graphql";
@ -68,7 +67,7 @@ const PageTypeCreatePage: React.FC<PageTypeCreatePageProps> = props => {
const changeMetadata = makeMetadataChangeHandler(change);
return (
<DetailedContent>
<DetailPageLayout gridTemplateColumns={1}>
<TopNav
href={pageTypeListUrl()}
title={intl.formatMessage({
@ -77,7 +76,7 @@ const PageTypeCreatePage: React.FC<PageTypeCreatePageProps> = props => {
description: "header",
})}
/>
<Content>
<DetailPageLayout.Content>
<Grid
variant="inverted"
className={sprinkles({
@ -115,14 +114,14 @@ const PageTypeCreatePage: React.FC<PageTypeCreatePageProps> = props => {
</div>
<Metadata data={data} onChange={changeMetadata} />
</Grid>
</Content>
</DetailPageLayout.Content>
<Savebar
onCancel={() => navigate(pageTypeListUrl())}
onSubmit={submit}
disabled={isSaveDisabled}
state={saveButtonBarState}
/>
</DetailedContent>
</DetailPageLayout>
);
}}
</Form>

11
src/pageTypes/components/PageTypeDetailsPage/PageTypeDetailsPage.tsx
View file

@ -1,9 +1,8 @@
import { Content } from "@dashboard/components/AppLayout/Content";
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import Form from "@dashboard/components/Form";
import Grid from "@dashboard/components/Grid";
import Hr from "@dashboard/components/Hr";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import Metadata from "@dashboard/components/Metadata/Metadata";
import { MetadataFormData } from "@dashboard/components/Metadata/types";
import Savebar from "@dashboard/components/Savebar";
@ -118,9 +117,9 @@ const PageTypeDetailsPage: React.FC<PageTypeDetailsPageProps> = props => {
const changeMetadata = makeMetadataChangeHandler(change);
return (
<DetailedContent useSingleColumn>
<DetailPageLayout gridTemplateColumns={1}>
<TopNav href={pageTypeListUrl()} title={pageTitle} />
<Content>
<DetailPageLayout.Content>
<Grid
variant="inverted"
className={sprinkles({
@ -185,7 +184,7 @@ const PageTypeDetailsPage: React.FC<PageTypeDetailsPageProps> = props => {
</div>
<Metadata data={data} onChange={changeMetadata} />
</Grid>
</Content>
</DetailPageLayout.Content>
<Savebar
onCancel={() => navigate(pageTypeListUrl())}
onDelete={onDelete}
@ -193,7 +192,7 @@ const PageTypeDetailsPage: React.FC<PageTypeDetailsPageProps> = props => {
disabled={isSaveDisabled}
state={saveButtonBarState}
/>
</DetailedContent>
</DetailPageLayout>
);
}}
</Form>

5
src/pageTypes/components/PageTypeListPage/PageTypeListPage.tsx
View file

@ -1,5 +1,6 @@
import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import { Button } from "@dashboard/components/Button";
import { ListPageLayout } from "@dashboard/components/Layouts";
import SearchBar from "@dashboard/components/SearchBar";
import { configurationMenuUrl } from "@dashboard/configuration";
import { PageTypeFragment } from "@dashboard/graphql";
@ -43,7 +44,7 @@ const PageTypeListPage: React.FC<PageTypeListPageProps> = ({
}) => {
const intl = useIntl();
return (
<>
<ListPageLayout>
<TopNav
href={configurationMenuUrl}
title={intl.formatMessage(sectionNames.pageTypes)}
@ -82,7 +83,7 @@ const PageTypeListPage: React.FC<PageTypeListPageProps> = ({
/>
<PageTypeList {...listProps} />
</Card>
</>
</ListPageLayout>
);
};
PageTypeListPage.displayName = "PageTypeListPage";

16
src/pages/components/PageDetailsPage/PageDetailsPage.tsx
View file

@ -2,13 +2,11 @@ import {
getReferenceAttributeEntityTypeFromAttribute,
mergeAttributeValues,
} from "@dashboard/attributes/utils/data";
import { Content } from "@dashboard/components/AppLayout/Content";
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { RightSidebar } from "@dashboard/components/AppLayout/RightSidebar";
import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import AssignAttributeValueDialog from "@dashboard/components/AssignAttributeValueDialog";
import Attributes, { AttributeInput } from "@dashboard/components/Attributes";
import CardSpacer from "@dashboard/components/CardSpacer";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import Metadata from "@dashboard/components/Metadata";
import Savebar from "@dashboard/components/Savebar";
import SeoForm from "@dashboard/components/SeoForm";
@ -150,14 +148,14 @@ const PageDetailsPage: React.FC<PageDetailsPageProps> = ({
const errors = [...apiErrors, ...validationErrors];
return (
<DetailedContent>
<DetailPageLayout>
<TopNav
href={pageListUrl()}
title={
!pageExists ? intl.formatMessage(messages.title) : page?.title
}
/>
<Content>
<DetailPageLayout.Content>
<PageInfo
data={data}
disabled={loading}
@ -200,8 +198,8 @@ const PageDetailsPage: React.FC<PageDetailsPageProps> = ({
)}
<CardSpacer />
<Metadata data={data} onChange={handlers.changeMetadata} />
</Content>
<RightSidebar>
</DetailPageLayout.Content>
<DetailPageLayout.RightSidebar>
<VisibilityCard
data={data}
errors={errors}
@ -231,7 +229,7 @@ const PageDetailsPage: React.FC<PageDetailsPageProps> = ({
fetchMorePageTypes={fetchMorePageTypes}
canChangeType={!page?.pageType}
/>
</RightSidebar>
</DetailPageLayout.RightSidebar>
<Savebar
disabled={loading}
state={saveButtonBarState}
@ -263,7 +261,7 @@ const PageDetailsPage: React.FC<PageDetailsPageProps> = ({
}
/>
)}
</DetailedContent>
</DetailPageLayout>
);
}}
</PageForm>

20
src/permissionGroups/components/PermissionGroupCreatePage/PermissionGroupCreatePage.tsx
View file

@ -1,9 +1,8 @@
import AccountPermissions from "@dashboard/components/AccountPermissions";
import { Content } from "@dashboard/components/AppLayout/Content";
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { RightSidebar } from "@dashboard/components/AppLayout/RightSidebar";
import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import { Backlink } from "@dashboard/components/Backlink";
import Form from "@dashboard/components/Form";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import Savebar from "@dashboard/components/Savebar";
import {
PermissionEnum,
@ -68,8 +67,9 @@ const PermissionGroupCreatePage: React.FC<PermissionGroupCreatePageProps> = ({
disabled={disabled}
>
{({ data, change, submit, isSaveDisabled }) => (
<DetailedContent>
<Content>
<DetailPageLayout>
<TopNav title="New Permission Group" />
<DetailPageLayout.Content>
<Backlink href={permissionGroupListUrl()}>
{intl.formatMessage(sectionNames.permissionGroups)}
</Backlink>
@ -79,8 +79,8 @@ const PermissionGroupCreatePage: React.FC<PermissionGroupCreatePageProps> = ({
onChange={change}
disabled={disabled}
/>
</Content>
<RightSidebar>
</DetailPageLayout.Content>
<DetailPageLayout.RightSidebar>
<AccountPermissions
permissionsExceeded={false}
data={data}
@ -100,16 +100,14 @@ const PermissionGroupCreatePage: React.FC<PermissionGroupCreatePageProps> = ({
description: "card description",
})}
/>
</RightSidebar>
<div>
</DetailPageLayout.RightSidebar>
<Savebar
onCancel={() => navigate(permissionGroupListUrl())}
onSubmit={submit}
state={saveButtonBarState}
disabled={isSaveDisabled}
/>
</div>
</DetailedContent>
</DetailPageLayout>
)}
</Form>
);

16
src/permissionGroups/components/PermissionGroupDetailsPage/PermissionGroupDetailsPage.tsx
View file

@ -1,10 +1,8 @@
import AccountPermissions from "@dashboard/components/AccountPermissions";
import { Content } from "@dashboard/components/AppLayout/Content";
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { RightSidebar } from "@dashboard/components/AppLayout/RightSidebar";
import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import Form from "@dashboard/components/Form";
import FormSpacer from "@dashboard/components/FormSpacer";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import Savebar from "@dashboard/components/Savebar";
import {
PermissionEnum,
@ -92,12 +90,12 @@ const PermissionGroupDetailsPage: React.FC<PermissionGroupDetailsPageProps> = ({
return (
<Form confirmLeave initial={initialForm} onSubmit={onSubmit}>
{({ data, change, submit }) => (
<DetailedContent>
<DetailPageLayout>
<TopNav
href={permissionGroupListUrl()}
title={permissionGroup?.name}
/>
<Content>
<DetailPageLayout.Content>
<PermissionGroupInfo
data={data}
disabled={disabled}
@ -110,8 +108,8 @@ const PermissionGroupDetailsPage: React.FC<PermissionGroupDetailsPageProps> = ({
{...listProps}
users={data?.users || []}
/>
</Content>
<RightSidebar>
</DetailPageLayout.Content>
<DetailPageLayout.RightSidebar>
<AccountPermissions
permissionsExceeded={permissionsExceeded}
data={data}
@ -131,7 +129,7 @@ const PermissionGroupDetailsPage: React.FC<PermissionGroupDetailsPageProps> = ({
description: "card description",
})}
/>
</RightSidebar>
</DetailPageLayout.RightSidebar>
<div>
<Savebar
onCancel={() => navigate(permissionGroupListUrl())}
@ -140,7 +138,7 @@ const PermissionGroupDetailsPage: React.FC<PermissionGroupDetailsPageProps> = ({
disabled={disabled}
/>
</div>
</DetailedContent>
</DetailPageLayout>
)}
</Form>
);

9
src/permissionGroups/components/PermissionGroupListPage/PermissionGroupListPage.tsx
View file

@ -1,5 +1,6 @@
import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import { Button } from "@dashboard/components/Button";
import { ListPageLayout } from "@dashboard/components/Layouts";
import { configurationMenuUrl } from "@dashboard/configuration";
import { PermissionGroupFragment } from "@dashboard/graphql";
import { sectionNames } from "@dashboard/intl";
@ -21,11 +22,13 @@ export interface PermissionGroupListPageProps
onDelete: (id: string) => void;
}
const PermissionGroupListPage: React.FC<PermissionGroupListPageProps> = listProps => {
const PermissionGroupListPage: React.FC<
PermissionGroupListPageProps
> = listProps => {
const intl = useIntl();
return (
<>
<ListPageLayout>
<TopNav
href={configurationMenuUrl}
title={intl.formatMessage(sectionNames.permissionGroups)}
@ -45,7 +48,7 @@ const PermissionGroupListPage: React.FC<PermissionGroupListPageProps> = listProp
<Card>
<PermissionGroupList {...listProps} />
</Card>
</>
</ListPageLayout>
);
};
PermissionGroupListPage.displayName = "PermissionGroupListPage";

11
src/plugins/components/PluginsDetailsPage/PluginsDetailsPage.tsx
View file

@ -1,9 +1,8 @@
import { Content } from "@dashboard/components/AppLayout/Content";
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import CardSpacer from "@dashboard/components/CardSpacer";
import Form from "@dashboard/components/Form";
import Grid from "@dashboard/components/Grid";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import Savebar from "@dashboard/components/Savebar";
import {
ConfigurationItemInput,
@ -97,7 +96,7 @@ const PluginsDetailsPage: React.FC<PluginsDetailsPageProps> = ({
set(newData);
};
return (
<DetailedContent useSingleColumn>
<DetailPageLayout gridTemplateColumns={1}>
<TopNav
href={pluginListUrl()}
title={intl.formatMessage(
@ -111,7 +110,7 @@ const PluginsDetailsPage: React.FC<PluginsDetailsPageProps> = ({
},
)}
/>
<Content>
<DetailPageLayout.Content>
<Grid variant="inverted">
<div>
<PluginDetailsChannelsCard
@ -163,8 +162,8 @@ const PluginsDetailsPage: React.FC<PluginsDetailsPageProps> = ({
onCancel={() => navigate(pluginListUrl())}
onSubmit={submit}
/>
</Content>
</DetailedContent>
</DetailPageLayout.Content>
</DetailPageLayout>
);
}}
</Form>

5
src/plugins/components/PluginsListPage/PluginsListPage.tsx
View file

@ -1,5 +1,6 @@
import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import FilterBar from "@dashboard/components/FilterBar";
import { ListPageLayout } from "@dashboard/components/Layouts";
import { configurationMenuUrl } from "@dashboard/configuration";
import { PluginBaseFragment } from "@dashboard/graphql";
import { sectionNames } from "@dashboard/intl";
@ -48,7 +49,7 @@ const PluginsListPage: React.FC<PluginsListPageProps> = ({
const filterStructure = createFilterStructure(intl, filterOpts);
return (
<>
<ListPageLayout>
<TopNav
href={configurationMenuUrl}
title={intl.formatMessage(sectionNames.plugins)}
@ -78,7 +79,7 @@ const PluginsListPage: React.FC<PluginsListPageProps> = ({
/>
<PluginsList {...listProps} />
</Card>
</>
</ListPageLayout>
);
};
PluginsListPage.displayName = "PluginsListPage";

21
src/productTypes/components/ProductTypeCreatePage/ProductTypeCreatePage.tsx
View file

@ -1,9 +1,7 @@
import { Content } from "@dashboard/components/AppLayout/Content";
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { RightSidebar } from "@dashboard/components/AppLayout/RightSidebar";
import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import CardSpacer from "@dashboard/components/CardSpacer";
import Form from "@dashboard/components/Form";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import Metadata, { MetadataFormData } from "@dashboard/components/Metadata";
import Savebar from "@dashboard/components/Savebar";
import {
@ -74,9 +72,8 @@ const ProductTypeCreatePage: React.FC<ProductTypeCreatePageProps> = ({
const navigate = useNavigator();
const [taxClassDisplayName, setTaxClassDisplayName] = useStateFromProps("");
const {
makeChangeHandler: makeMetadataChangeHandler,
} = useMetadataChangeTrigger();
const { makeChangeHandler: makeMetadataChangeHandler } =
useMetadataChangeTrigger();
const initialData = {
...formInitialData,
@ -99,9 +96,9 @@ const ProductTypeCreatePage: React.FC<ProductTypeCreatePageProps> = ({
);
return (
<DetailedContent>
<DetailPageLayout>
<TopNav href={productTypeListUrl()} title={pageTitle} />
<Content>
<DetailPageLayout.Content>
<ProductTypeDetails
data={data}
disabled={disabled}
@ -127,22 +124,22 @@ const ProductTypeCreatePage: React.FC<ProductTypeCreatePageProps> = ({
/>
<CardSpacer />
<Metadata data={data} onChange={changeMetadata} />
</Content>
<RightSidebar>
</DetailPageLayout.Content>
<DetailPageLayout.RightSidebar>
<ProductTypeShipping
disabled={disabled}
data={data}
weightUnit={defaultWeightUnit}
onChange={change}
/>
</RightSidebar>
</DetailPageLayout.RightSidebar>
<Savebar
onCancel={() => navigate(productTypeListUrl())}
onSubmit={submit}
disabled={isSaveDisabled}
state={saveButtonBarState}
/>
</DetailedContent>
</DetailPageLayout>
);
}}
</Form>

16
src/productTypes/components/ProductTypeDetailsPage/ProductTypeDetailsPage.tsx
View file

@ -1,10 +1,8 @@
import { Content } from "@dashboard/components/AppLayout/Content";
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { RightSidebar } from "@dashboard/components/AppLayout/RightSidebar";
import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import CardSpacer from "@dashboard/components/CardSpacer";
import ControlledSwitch from "@dashboard/components/ControlledSwitch";
import Form from "@dashboard/components/Form";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import Metadata from "@dashboard/components/Metadata/Metadata";
import { MetadataFormData } from "@dashboard/components/Metadata/types";
import Savebar from "@dashboard/components/Savebar";
@ -164,9 +162,9 @@ const ProductTypeDetailsPage: React.FC<ProductTypeDetailsPageProps> = ({
const changeMetadata = makeMetadataChangeHandler(change);
return (
<DetailedContent>
<DetailPageLayout>
<TopNav href={productTypeListUrl()} title={pageTitle} />
<Content>
<DetailPageLayout.Content>
<ProductTypeDetails
data={data}
disabled={disabled}
@ -239,15 +237,15 @@ const ProductTypeDetailsPage: React.FC<ProductTypeDetailsPageProps> = ({
)}
<CardSpacer />
<Metadata data={data} onChange={changeMetadata} />
</Content>
<RightSidebar>
</DetailPageLayout.Content>
<DetailPageLayout.RightSidebar>
<ProductTypeShipping
disabled={disabled}
data={data}
weightUnit={productType?.weight?.unit || defaultWeightUnit}
onChange={change}
/>
</RightSidebar>
</DetailPageLayout.RightSidebar>
<Savebar
onCancel={() => navigate(productTypeListUrl())}
onDelete={onDelete}
@ -255,7 +253,7 @@ const ProductTypeDetailsPage: React.FC<ProductTypeDetailsPageProps> = ({
disabled={isSaveDisabled}
state={saveButtonBarState}
/>
</DetailedContent>
</DetailPageLayout>
);
}}
</Form>

16
src/products/components/ProductCreatePage/ProductCreatePage.tsx
View file

@ -4,14 +4,12 @@ import {
} from "@dashboard/attributes/utils/data";
import CannotDefineChannelsAvailabilityCard from "@dashboard/channels/components/CannotDefineChannelsAvailabilityCard/CannotDefineChannelsAvailabilityCard";
import { ChannelData } from "@dashboard/channels/utils";
import { Content } from "@dashboard/components/AppLayout/Content";
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { RightSidebar } from "@dashboard/components/AppLayout/RightSidebar";
import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import AssignAttributeValueDialog from "@dashboard/components/AssignAttributeValueDialog";
import Attributes, { AttributeInput } from "@dashboard/components/Attributes";
import CardSpacer from "@dashboard/components/CardSpacer";
import ChannelsAvailabilityCard from "@dashboard/components/ChannelsAvailabilityCard";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import Metadata from "@dashboard/components/Metadata";
import { MultiAutocompleteChoiceType } from "@dashboard/components/MultiAutocompleteSelectField";
import Savebar from "@dashboard/components/Savebar";
@ -236,9 +234,9 @@ export const ProductCreatePage: React.FC<ProductCreatePageProps> = ({
);
return (
<DetailedContent>
<DetailPageLayout>
<TopNav href={productListUrl()} title={header} />
<Content>
<DetailPageLayout.Content>
<ProductDetailsForm
data={data}
disabled={loading}
@ -319,8 +317,8 @@ export const ProductCreatePage: React.FC<ProductCreatePageProps> = ({
/>
<CardSpacer />
<Metadata data={data} onChange={handlers.changeMetadata} />
</Content>
<RightSidebar>
</DetailPageLayout.Content>
<DetailPageLayout.RightSidebar>
<ProductOrganization
canChangeType={true}
categories={categories}
@ -379,7 +377,7 @@ export const ProductCreatePage: React.FC<ProductCreatePageProps> = ({
taxClasses={taxClasses}
onFetchMore={fetchMoreTaxClasses}
/>
</RightSidebar>
</DetailPageLayout.RightSidebar>
<Savebar
onCancel={() => navigate(productListUrl())}
onSubmit={submit}
@ -407,7 +405,7 @@ export const ProductCreatePage: React.FC<ProductCreatePageProps> = ({
}
/>
)}
</DetailedContent>
</DetailPageLayout>
);
}}
</ProductCreateForm>

11
src/products/components/ProductListPage/ProductListPage.tsx
View file

@ -11,6 +11,7 @@ import CardMenu from "@dashboard/components/CardMenu";
import ColumnPicker from "@dashboard/components/ColumnPicker";
import { getByName } from "@dashboard/components/Filter/utils";
import FilterBar from "@dashboard/components/FilterBar";
import { ListPageLayout } from "@dashboard/components/Layouts";
import LimitReachedAlert from "@dashboard/components/LimitReachedAlert";
import { MultiAutocompleteChoiceType } from "@dashboard/components/MultiAutocompleteSelectField";
import { ProductListColumns } from "@dashboard/config";
@ -171,10 +172,8 @@ export const ProductListPage: React.FC<ProductListPageProps> = props => {
];
const limitReached = isLimitReached(limits, "productVariants");
const {
PRODUCT_OVERVIEW_CREATE,
PRODUCT_OVERVIEW_MORE_ACTIONS,
} = useExtensions(extensionMountPoints.PRODUCT_LIST);
const { PRODUCT_OVERVIEW_CREATE, PRODUCT_OVERVIEW_MORE_ACTIONS } =
useExtensions(extensionMountPoints.PRODUCT_LIST);
const extensionMenuItems = mapToMenuItemsForProductOverviewActions(
PRODUCT_OVERVIEW_MORE_ACTIONS,
@ -183,7 +182,7 @@ export const ProductListPage: React.FC<ProductListPageProps> = props => {
const extensionCreateButtonItems = mapToMenuItems(PRODUCT_OVERVIEW_CREATE);
return (
<>
<ListPageLayout>
<TopNav title={intl.formatMessage(sectionNames.products)}>
<CardMenu
className={classes.settings}
@ -289,7 +288,7 @@ export const ProductListPage: React.FC<ProductListPageProps> = props => {
filterDependency={filterDependency}
/>
</Card>
</>
</ListPageLayout>
);
};
ProductListPage.displayName = "ProductListPage";

22
src/products/components/ProductUpdatePage/ProductUpdatePage.tsx
View file

@ -8,15 +8,13 @@ import {
mergeAttributeValues,
} from "@dashboard/attributes/utils/data";
import { ChannelData } from "@dashboard/channels/utils";
import { Content } from "@dashboard/components/AppLayout/Content";
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { RightSidebar } from "@dashboard/components/AppLayout/RightSidebar";
import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import AssignAttributeValueDialog from "@dashboard/components/AssignAttributeValueDialog";
import Attributes, { AttributeInput } from "@dashboard/components/Attributes";
import CardMenu from "@dashboard/components/CardMenu";
import CardSpacer from "@dashboard/components/CardSpacer";
import ChannelsAvailabilityCard from "@dashboard/components/ChannelsAvailabilityCard";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import Metadata from "@dashboard/components/Metadata/Metadata";
import Savebar from "@dashboard/components/Savebar";
import SeoForm from "@dashboard/components/SeoForm";
@ -325,8 +323,7 @@ export const ProductUpdatePage: React.FC<ProductUpdatePageProps> = ({
);
return (
<>
<DetailedContent>
<DetailPageLayout>
<TopNav href={productListUrl()} title={header}>
<CardMenu
menuItems={[
@ -341,7 +338,7 @@ export const ProductUpdatePage: React.FC<ProductUpdatePageProps> = ({
/>
</TopNav>
<Content>
<DetailPageLayout.Content>
<ProductDetailsForm
data={data}
disabled={disabled}
@ -356,9 +353,7 @@ export const ProductUpdatePage: React.FC<ProductUpdatePageProps> = ({
onImageReorder={onImageReorder}
onImageUpload={onImageUpload}
openMediaUrlModal={() => setMediaUrlModalStatus(true)}
getImageEditUrl={imageId =>
productImageUrl(productId, imageId)
}
getImageEditUrl={imageId => productImageUrl(productId, imageId)}
/>
<CardSpacer />
{data.attributes.length > 0 && (
@ -413,8 +408,8 @@ export const ProductUpdatePage: React.FC<ProductUpdatePageProps> = ({
/>
<CardSpacer />
<Metadata data={data} onChange={handlers.changeMetadata} />
</Content>
<RightSidebar>
</DetailPageLayout.Content>
<DetailPageLayout.RightSidebar>
<ProductOrganization
canChangeType={false}
categories={categories}
@ -446,7 +441,7 @@ export const ProductUpdatePage: React.FC<ProductUpdatePageProps> = ({
taxClasses={taxClasses}
onFetchMore={fetchMoreTaxClasses}
/>
</RightSidebar>
</DetailPageLayout.RightSidebar>
<Savebar
onCancel={() => navigate(productListUrl())}
@ -490,8 +485,7 @@ export const ProductUpdatePage: React.FC<ProductUpdatePageProps> = ({
open={channelPickerOpen}
onConfirm={handlers.updateChannelList}
/>
</DetailedContent>
</>
</DetailPageLayout>
);
}}
</ProductUpdateForm>

11
src/products/components/ProductVariantCreatePage/ProductVariantCreatePage.tsx
View file

@ -2,8 +2,6 @@ import {
getReferenceAttributeEntityTypeFromAttribute,
mergeAttributeValues,
} from "@dashboard/attributes/utils/data";
import { Content } from "@dashboard/components/AppLayout/Content";
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import AssignAttributeValueDialog from "@dashboard/components/AssignAttributeValueDialog";
import Attributes, {
@ -12,6 +10,7 @@ import Attributes, {
} from "@dashboard/components/Attributes";
import CardSpacer from "@dashboard/components/CardSpacer";
import Grid from "@dashboard/components/Grid";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import Metadata from "@dashboard/components/Metadata";
import Savebar from "@dashboard/components/Savebar";
import {
@ -180,9 +179,9 @@ const ProductVariantCreatePage: React.FC<ProductVariantCreatePageProps> = ({
const errors = [...apiErrors, ...validationErrors];
return (
<DetailedContent>
<DetailPageLayout>
<TopNav href={productUrl(productId)} title={header} />
<Content>
<DetailPageLayout.Content>
<Grid variant="inverted">
<div>
<ProductVariantNavigation
@ -343,8 +342,8 @@ const ProductVariantCreatePage: React.FC<ProductVariantCreatePageProps> = ({
onConfirm={handlers.updateChannels}
/>
)}
</Content>
</DetailedContent>
</DetailPageLayout.Content>
</DetailPageLayout>
);
}}
</ProductVariantCreateForm>

11
src/products/components/ProductVariantPage/ProductVariantPage.tsx
View file

@ -3,8 +3,6 @@ import {
mergeAttributeValues,
} from "@dashboard/attributes/utils/data";
import { ChannelPriceData } from "@dashboard/channels/utils";
import { Content } from "@dashboard/components/AppLayout/Content";
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import AssignAttributeValueDialog from "@dashboard/components/AssignAttributeValueDialog";
import Attributes, {
@ -13,6 +11,7 @@ import Attributes, {
} from "@dashboard/components/Attributes";
import CardSpacer from "@dashboard/components/CardSpacer";
import Grid from "@dashboard/components/Grid";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import { MetadataFormData } from "@dashboard/components/Metadata";
import Metadata from "@dashboard/components/Metadata/Metadata";
import Savebar from "@dashboard/components/Savebar";
@ -195,13 +194,13 @@ const ProductVariantPage: React.FC<ProductVariantPageProps> = ({
};
return (
<DetailedContent useSingleColumn>
<DetailPageLayout gridTemplateColumns={1}>
<TopNav href={productUrl(productId)} title={header}>
{variant?.product?.defaultVariant?.id !== variant?.id && (
<ProductVariantSetDefault onSetDefaultVariant={onSetDefaultVariant} />
)}
</TopNav>
<Content>
<DetailPageLayout.Content>
<ProductVariantUpdateForm
variant={variant}
onSubmit={onSubmit}
@ -431,7 +430,7 @@ const ProductVariantPage: React.FC<ProductVariantPageProps> = ({
);
}}
</ProductVariantUpdateForm>
</Content>
</DetailPageLayout.Content>
{!!variant?.preorder && (
<ProductVariantEndPreorderDialog
confirmButtonState={variantDeactivatePreoderButtonState}
@ -441,7 +440,7 @@ const ProductVariantPage: React.FC<ProductVariantPageProps> = ({
variantGlobalSoldUnits={variant?.preorder?.globalSoldUnits}
/>
)}
</DetailedContent>
</DetailPageLayout>
);
};
ProductVariantPage.displayName = "ProductVariantPage";

26
src/shipping/components/ShippingZoneCreatePage/ShippingZoneCreatePage.tsx
View file

@ -1,9 +1,8 @@
import { Content } from "@dashboard/components/AppLayout/Content";
import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import CardSpacer from "@dashboard/components/CardSpacer";
import CountryList from "@dashboard/components/CountryList";
import Form from "@dashboard/components/Form";
import Grid from "@dashboard/components/Grid";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import Savebar from "@dashboard/components/Savebar";
import { CountryFragment, ShippingErrorFragment } from "@dashboard/graphql";
import { SubmitPromise } from "@dashboard/hooks/useForm";
@ -77,13 +76,12 @@ const ShippingZoneCreatePage: React.FC<ShippingZoneCreatePageProps> = ({
disabled={disabled}
>
{({ change, data, isSaveDisabled, submit }) => (
<>
<DetailPageLayout gridTemplateColumns={1}>
<TopNav
href={shippingZonesListUrl()}
title={intl.formatMessage(messages.createZone)}
/>
<Content>
<Grid>
<DetailPageLayout.Content>
<div>
<ShippingZoneInfo
data={data}
@ -112,14 +110,7 @@ const ShippingZoneCreatePage: React.FC<ShippingZoneCreatePageProps> = ({
title={intl.formatMessage(messages.countries)}
/>
</div>
</Grid>
<Savebar
disabled={isSaveDisabled}
onCancel={() => navigate(shippingZonesListUrl())}
onSubmit={submit}
state={saveButtonBarState}
/>
</Content>
<ShippingZoneCountriesAssignDialog
open={isModalOpened}
onConfirm={formData => {
@ -137,7 +128,14 @@ const ShippingZoneCreatePage: React.FC<ShippingZoneCreatePageProps> = ({
initial={data.countries}
onClose={toggleModal}
/>
</>
</DetailPageLayout.Content>
<Savebar
disabled={isSaveDisabled}
onCancel={() => navigate(shippingZonesListUrl())}
onSubmit={submit}
state={saveButtonBarState}
/>
</DetailPageLayout>
)}
</Form>
);

16
src/shipping/components/ShippingZoneDetailsPage/ShippingZoneDetailsPage.tsx
View file

@ -1,10 +1,8 @@
import { Content } from "@dashboard/components/AppLayout/Content";
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { RightSidebar } from "@dashboard/components/AppLayout/RightSidebar";
import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import CardSpacer from "@dashboard/components/CardSpacer";
import CountryList from "@dashboard/components/CountryList";
import Form from "@dashboard/components/Form";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import Metadata from "@dashboard/components/Metadata/Metadata";
import { MultiAutocompleteChoiceType } from "@dashboard/components/MultiAutocompleteSelectField";
import Savebar from "@dashboard/components/Savebar";
@ -152,9 +150,9 @@ const ShippingZoneDetailsPage: React.FC<ShippingZoneDetailsPageProps> = ({
const changeMetadata = makeMetadataChangeHandler(change);
return (
<DetailedContent>
<DetailPageLayout>
<TopNav href={shippingZonesListUrl()} title={shippingZone?.name} />
<Content>
<DetailPageLayout.Content>
<ShippingZoneInfo
data={data}
disabled={disabled}
@ -201,8 +199,8 @@ const ShippingZoneDetailsPage: React.FC<ShippingZoneDetailsPageProps> = ({
/>
<CardSpacer />
<Metadata data={data} onChange={changeMetadata} />
</Content>
<RightSidebar>
</DetailPageLayout.Content>
<DetailPageLayout.RightSidebar>
<ShippingZoneSettingsCard
formData={data}
warehousesDisplayValues={warehouseDisplayValues}
@ -217,7 +215,7 @@ const ShippingZoneDetailsPage: React.FC<ShippingZoneDetailsPageProps> = ({
channelsDisplayValues={channelsDisplayValues}
onChannelChange={handleChannelChange}
/>
</RightSidebar>
</DetailPageLayout.RightSidebar>
<Savebar
disabled={isSaveDisabled}
onCancel={() => navigate(shippingZonesListUrl())}
@ -225,7 +223,7 @@ const ShippingZoneDetailsPage: React.FC<ShippingZoneDetailsPageProps> = ({
onSubmit={submit}
state={saveButtonBarState}
/>
</DetailedContent>
</DetailPageLayout>
);
}}
</Form>

20
src/shipping/components/ShippingZoneRatesCreatePage/ShippingZoneRatesCreatePage.tsx
View file

@ -1,11 +1,9 @@
import { ChannelShippingData } from "@dashboard/channels/utils";
import { Content } from "@dashboard/components/AppLayout/Content";
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { RightSidebar } from "@dashboard/components/AppLayout/RightSidebar";
import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import CardSpacer from "@dashboard/components/CardSpacer";
import ChannelsAvailabilityCard from "@dashboard/components/ChannelsAvailabilityCard";
import { WithFormId } from "@dashboard/components/Form";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import Savebar from "@dashboard/components/Savebar";
import {
PermissionEnum,
@ -60,7 +58,9 @@ export interface ShippingZoneRatesCreatePageProps extends WithFormId {
fetchMoreTaxClasses: FetchMoreProps;
}
export const ShippingZoneRatesCreatePage: React.FC<ShippingZoneRatesCreatePageProps> = ({
export const ShippingZoneRatesCreatePage: React.FC<
ShippingZoneRatesCreatePageProps
> = ({
allChannelsCount,
shippingChannels,
channelErrors,
@ -148,7 +148,7 @@ export const ShippingZoneRatesCreatePage: React.FC<ShippingZoneRatesCreatePagePr
return (
<RichTextContext.Provider value={richText}>
<form onSubmit={handleFormElementSubmit}>
<DetailedContent>
<DetailPageLayout>
<TopNav
href={backUrl}
title={
@ -165,7 +165,7 @@ export const ShippingZoneRatesCreatePage: React.FC<ShippingZoneRatesCreatePagePr
})
}
/>
<Content>
<DetailPageLayout.Content>
<ShippingRateInfo
data={data}
disabled={disabled}
@ -207,8 +207,8 @@ export const ShippingZoneRatesCreatePage: React.FC<ShippingZoneRatesCreatePagePr
onPostalCodeRangeAdd={onPostalCodeAssign}
postalCodes={postalCodes}
/>
</Content>
<RightSidebar>
</DetailPageLayout.Content>
<DetailPageLayout.RightSidebar>
<ChannelsAvailabilityCard
managePermissions={[PermissionEnum.MANAGE_SHIPPING]}
allChannelsCount={allChannelsCount}
@ -231,7 +231,7 @@ export const ShippingZoneRatesCreatePage: React.FC<ShippingZoneRatesCreatePagePr
}
onFetchMore={fetchMoreTaxClasses}
/>
</RightSidebar>
</DetailPageLayout.RightSidebar>
<Savebar
disabled={isSaveDisabled}
onCancel={() => navigate(backUrl)}
@ -239,7 +239,7 @@ export const ShippingZoneRatesCreatePage: React.FC<ShippingZoneRatesCreatePagePr
onSubmit={handleSubmit}
state={saveButtonBarState}
/>
</DetailedContent>
</DetailPageLayout>
</form>
</RichTextContext.Provider>
);

27
src/shipping/components/ShippingZoneRatesPage/ShippingZoneRatesPage.tsx
View file

@ -1,11 +1,9 @@
import { ChannelShippingData } from "@dashboard/channels/utils";
import { Content } from "@dashboard/components/AppLayout/Content";
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { RightSidebar } from "@dashboard/components/AppLayout/RightSidebar";
import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import CardSpacer from "@dashboard/components/CardSpacer";
import ChannelsAvailabilityCard from "@dashboard/components/ChannelsAvailabilityCard";
import { WithFormId } from "@dashboard/components/Form";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import Metadata from "@dashboard/components/Metadata/Metadata";
import Savebar from "@dashboard/components/Savebar";
import {
@ -102,10 +100,8 @@ export const ShippingZoneRatesPage: React.FC<ShippingZoneRatesPageProps> = ({
const isPriceVariant = variant === ShippingMethodTypeEnum.PRICE;
const initialForm: Omit<
ShippingZoneRateUpdateFormData,
"description"
> = React.useMemo(
const initialForm: Omit<ShippingZoneRateUpdateFormData, "description"> =
React.useMemo(
() => ({
channelListings: shippingChannels,
maxDays: rate?.maximumDeliveryDays?.toString() || "",
@ -144,9 +140,8 @@ export const ShippingZoneRatesPage: React.FC<ShippingZoneRatesPageProps> = ({
triggerChange,
});
const {
makeChangeHandler: makeMetadataChangeHandler,
} = useMetadataChangeTrigger();
const { makeChangeHandler: makeMetadataChangeHandler } =
useMetadataChangeTrigger();
const data: ShippingZoneRateUpdateFormData = {
...formData,
@ -182,9 +177,9 @@ export const ShippingZoneRatesPage: React.FC<ShippingZoneRatesPageProps> = ({
return (
<RichTextContext.Provider value={richText}>
<form onSubmit={handleFormElementSubmit}>
<DetailedContent>
<DetailPageLayout>
<TopNav href={backHref} title={rate?.name} />
<Content>
<DetailPageLayout.Content>
<ShippingRateInfo
data={data}
disabled={disabled}
@ -236,8 +231,8 @@ export const ShippingZoneRatesPage: React.FC<ShippingZoneRatesPageProps> = ({
/>
<CardSpacer />
<Metadata data={data} onChange={changeMetadata} />
</Content>
<RightSidebar>
</DetailPageLayout.Content>
<DetailPageLayout.RightSidebar>
<ChannelsAvailabilityCard
managePermissions={[PermissionEnum.MANAGE_SHIPPING]}
allChannelsCount={allChannelsCount}
@ -263,7 +258,7 @@ export const ShippingZoneRatesPage: React.FC<ShippingZoneRatesPageProps> = ({
}
onFetchMore={fetchMoreTaxClasses}
/>
</RightSidebar>
</DetailPageLayout.RightSidebar>
<Savebar
disabled={isSaveDisabled}
onCancel={() => navigate(backHref)}
@ -271,7 +266,7 @@ export const ShippingZoneRatesPage: React.FC<ShippingZoneRatesPageProps> = ({
onSubmit={handleSubmit}
state={saveButtonBarState}
/>
</DetailedContent>
</DetailPageLayout>
</form>
</RichTextContext.Provider>
);

16
src/shipping/components/ShippingZonesListPage/ShippingZonesListPage.tsx
View file

@ -1,7 +1,5 @@
import { Content } from "@dashboard/components/AppLayout/Content";
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { RightSidebar } from "@dashboard/components/AppLayout/RightSidebar";
import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import RequirePermissions from "@dashboard/components/RequirePermissions";
import { configurationMenuUrl } from "@dashboard/configuration";
import {
@ -40,7 +38,7 @@ const ShippingZonesListPage: React.FC<ShippingZonesListPageProps> = ({
const intl = useIntl();
return (
<DetailedContent>
<DetailPageLayout withSavebar={false}>
<TopNav
href={configurationMenuUrl}
title={intl.formatMessage({
@ -49,10 +47,10 @@ const ShippingZonesListPage: React.FC<ShippingZonesListPageProps> = ({
description: "header",
})}
/>
<Content noSavebar>
<DetailPageLayout.Content>
<ShippingZonesList disabled={disabled} {...listProps} />
</Content>
<RightSidebar noSavebar>
</DetailPageLayout.Content>
<DetailPageLayout.RightSidebar>
<RequirePermissions
requiredPermissions={[PermissionEnum.MANAGE_SETTINGS]}
>
@ -62,8 +60,8 @@ const ShippingZonesListPage: React.FC<ShippingZonesListPageProps> = ({
onSubmit={onSubmit}
/>
</RequirePermissions>
</RightSidebar>
</DetailedContent>
</DetailPageLayout.RightSidebar>
</DetailPageLayout>
);
};
ShippingZonesListPage.displayName = "ShippingZonesListPage";

11
src/siteSettings/components/SiteSettingsPage/SiteSettingsPage.tsx
View file

@ -1,11 +1,10 @@
import { createCountryHandler } from "@dashboard/components/AddressEdit/createCountryHandler";
import { Content } from "@dashboard/components/AppLayout/Content";
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import CompanyAddressInput from "@dashboard/components/CompanyAddressInput";
import Form from "@dashboard/components/Form";
import Grid from "@dashboard/components/Grid";
import Hr from "@dashboard/components/Hr";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import PageSectionHeader from "@dashboard/components/PageSectionHeader";
import Savebar from "@dashboard/components/Savebar";
import { configurationMenuUrl } from "@dashboard/configuration";
@ -139,12 +138,12 @@ const SiteSettingsPage: React.FC<SiteSettingsPageProps> = props => {
const handleCountrySelect = createCountryHandler(countrySelect, set);
return (
<DetailedContent useSingleColumn>
<DetailPageLayout gridTemplateColumns={1}>
<TopNav
href={configurationMenuUrl}
title={intl.formatMessage(commonMessages.generalInformations)}
/>
<Content>
<DetailPageLayout.Content>
<Grid
variant="inverted"
className={sprinkles({ paddingLeft: 9 })}
@ -189,8 +188,8 @@ const SiteSettingsPage: React.FC<SiteSettingsPageProps> = props => {
onCancel={() => navigate(configurationMenuUrl)}
onSubmit={submit}
/>
</Content>
</DetailedContent>
</DetailPageLayout.Content>
</DetailPageLayout>
);
}}
</Form>

18
src/staff/components/StaffDetailsPage/StaffDetailsPage.tsx
View file

@ -1,11 +1,9 @@
import AccountPermissionGroups from "@dashboard/components/AccountPermissionGroups";
import { Content } from "@dashboard/components/AppLayout/Content";
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { RightSidebar } from "@dashboard/components/AppLayout/RightSidebar";
import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import CardSpacer from "@dashboard/components/CardSpacer";
import CardTitle from "@dashboard/components/CardTitle";
import Form from "@dashboard/components/Form";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import { MultiAutocompleteChoiceType } from "@dashboard/components/MultiAutocompleteSelectField";
import Savebar from "@dashboard/components/Savebar";
import {
@ -36,7 +34,6 @@ import StaffPassword from "../StaffPassword/StaffPassword";
import StaffPreferences from "../StaffPreferences";
import StaffProperties from "../StaffProperties/StaffProperties";
import { staffDetailsPageMessages as messages } from "./messages";
import useStyles from "./styles";
export interface StaffDetailsFormData {
email: string;
@ -84,7 +81,6 @@ const StaffDetailsPage: React.FC<StaffDetailsPageProps> = ({
staffMember,
}: StaffDetailsPageProps) => {
const intl = useIntl();
const classes = useStyles();
const navigate = useNavigator();
const { locale, setLocale } = useLocale();
@ -128,9 +124,9 @@ const StaffDetailsPage: React.FC<StaffDetailsPageProps> = ({
);
return (
<DetailedContent>
<DetailPageLayout>
<TopNav href={staffListUrl()} title={getUserName(staffMember)} />
<Content>
<DetailPageLayout.Content>
<StaffProperties
errors={errors}
data={formData}
@ -147,9 +143,9 @@ const StaffDetailsPage: React.FC<StaffDetailsPageProps> = ({
<StaffPassword onChangePassword={onChangePassword} />
</>
)}
</Content>
</DetailPageLayout.Content>
<RightSidebar className={classes.noOverflow}>
<DetailPageLayout.RightSidebar>
{canEditPreferences && (
<StaffPreferences locale={locale} onLocaleChange={setLocale} />
)}
@ -194,7 +190,7 @@ const StaffDetailsPage: React.FC<StaffDetailsPageProps> = ({
</Card>
</>
)}
</RightSidebar>
</DetailPageLayout.RightSidebar>
<Savebar
disabled={isSaveDisabled}
state={saveButtonBarState}
@ -202,7 +198,7 @@ const StaffDetailsPage: React.FC<StaffDetailsPageProps> = ({
onSubmit={submit}
onDelete={canRemove ? onDelete : undefined}
/>
</DetailedContent>
</DetailPageLayout>
);
}}
</Form>

5
src/staff/components/StaffListPage/StaffListPage.tsx
View file

@ -2,6 +2,7 @@ import { LimitsInfo } from "@dashboard/components/AppLayout/LimitsInfo";
import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import { Button } from "@dashboard/components/Button";
import FilterBar from "@dashboard/components/FilterBar";
import { ListPageLayout } from "@dashboard/components/Layouts";
import LimitReachedAlert from "@dashboard/components/LimitReachedAlert";
import { configurationMenuUrl } from "@dashboard/configuration";
import { RefreshLimitsQuery, StaffListQuery } from "@dashboard/graphql";
@ -57,7 +58,7 @@ const StaffListPage: React.FC<StaffListPageProps> = ({
const reachedLimit = isLimitReached(limits, "staffUsers");
return (
<>
<ListPageLayout>
<TopNav
href={configurationMenuUrl}
title={intl.formatMessage(sectionNames.staff)}
@ -128,7 +129,7 @@ const StaffListPage: React.FC<StaffListPageProps> = ({
/>
<StaffList {...listProps} />
</Card>
</>
</ListPageLayout>
);
};
StaffListPage.displayName = "StaffListPage";

11
src/taxes/pages/TaxChannelsPage/TaxChannelsPage.tsx
View file

@ -1,10 +1,9 @@
import VerticalSpacer from "@dashboard/apps/components/VerticalSpacer";
import { Content } from "@dashboard/components/AppLayout/Content";
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import CardTitle from "@dashboard/components/CardTitle";
import Form from "@dashboard/components/Form";
import Grid from "@dashboard/components/Grid";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import Savebar from "@dashboard/components/Savebar";
import Skeleton from "@dashboard/components/Skeleton";
import { configurationMenuUrl } from "@dashboard/configuration";
@ -161,9 +160,9 @@ export const TaxChannelsPage: React.FC<TaxChannelsPageProps> = props => {
};
return (
<DetailedContent>
<DetailPageLayout gridTemplateColumns={1}>
<TopNav title={<TaxPageTitle />} />
<Content>
<DetailPageLayout.Content>
<Box padding={9}>
<PageTabs value="channels" onChange={handleTabChange}>
<PageTab
@ -298,14 +297,14 @@ export const TaxChannelsPage: React.FC<TaxChannelsPageProps> = props => {
/>
)}
</Box>
</Content>
</DetailPageLayout.Content>
<Savebar
state={savebarState}
disabled={disabled}
onSubmit={submit}
onCancel={() => navigate(configurationMenuUrl)}
/>
</DetailedContent>
</DetailPageLayout>
);
}}
</Form>

11
src/taxes/pages/TaxClassesPage/TaxClassesPage.tsx
View file

@ -1,9 +1,8 @@
import VerticalSpacer from "@dashboard/apps/components/VerticalSpacer";
import { Content } from "@dashboard/components/AppLayout/Content";
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import CardTitle from "@dashboard/components/CardTitle";
import Grid from "@dashboard/components/Grid";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import Metadata from "@dashboard/components/Metadata";
import Savebar from "@dashboard/components/Savebar";
import Skeleton from "@dashboard/components/Skeleton";
@ -120,9 +119,9 @@ export const TaxClassesPage: React.FC<TaxClassesPageProps> = props => {
const formErrors = getFormErrors(["name"], validationErrors);
return (
<DetailedContent>
<DetailPageLayout gridTemplateColumns={1}>
<TopNav title={<TaxPageTitle />} />
<Content>
<DetailPageLayout.Content>
<Box padding={9}>
<PageTabs value="tax-classes" onChange={handleTabChange}>
<PageTab
@ -297,8 +296,8 @@ export const TaxClassesPage: React.FC<TaxClassesPageProps> = props => {
onSubmit={submit}
onCancel={() => navigate(configurationMenuUrl)}
/>
</Content>
</DetailedContent>
</DetailPageLayout.Content>
</DetailPageLayout>
);
}}
</TaxClassesForm>

11
src/taxes/pages/TaxCountriesPage/TaxCountriesPage.tsx
View file

@ -1,9 +1,8 @@
import VerticalSpacer from "@dashboard/apps/components/VerticalSpacer";
import { Content } from "@dashboard/components/AppLayout/Content";
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import CardTitle from "@dashboard/components/CardTitle";
import Grid from "@dashboard/components/Grid";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import Savebar from "@dashboard/components/Savebar";
import Skeleton from "@dashboard/components/Skeleton";
import { configurationMenuUrl } from "@dashboard/configuration";
@ -92,9 +91,9 @@ export const TaxCountriesPage: React.FC<TaxCountriesPageProps> = props => {
);
return (
<DetailedContent>
<DetailPageLayout gridTemplateColumns={1}>
<TopNav title={<TaxPageTitle />} />
<Content>
<DetailPageLayout.Content>
<Box padding={9}>
<PageTabs value="countries" onChange={handleTabChange}>
<PageTab
@ -213,8 +212,8 @@ export const TaxCountriesPage: React.FC<TaxCountriesPageProps> = props => {
onSubmit={submit}
onCancel={() => navigate(configurationMenuUrl)}
/>
</Content>
</DetailedContent>
</DetailPageLayout.Content>
</DetailPageLayout>
);
}}
</TaxCountriesForm>

6
src/translations/components/TranslationsAttributesPage/TranslationsAttributesPage.tsx
View file

@ -1,7 +1,7 @@
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import CardSpacer from "@dashboard/components/CardSpacer";
import LanguageSwitch from "@dashboard/components/LanguageSwitch";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import { ListSettingsUpdate } from "@dashboard/components/TablePagination";
import {
AttributeTranslationDetailsFragment,
@ -55,7 +55,7 @@ const TranslationsAttributesPage: React.FC<TranslationsAttributesPageProps> = ({
const withChoices = data?.attribute?.withChoices;
return (
<DetailedContent useSingleColumn>
<DetailPageLayout gridTemplateColumns={1}>
<TopNav
href={languageEntitiesUrl(languageCode, {
tab: TranslatableEntities.attributes,
@ -127,7 +127,7 @@ const TranslationsAttributesPage: React.FC<TranslationsAttributesPageProps> = ({
onSubmit={onSubmit}
/>
)}
</DetailedContent>
</DetailPageLayout>
);
};
TranslationsAttributesPage.displayName = "TranslationsAttributesPage";

6
src/translations/components/TranslationsCategoriesPage/TranslationsCategoriesPage.tsx
View file

@ -1,7 +1,7 @@
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import CardSpacer from "@dashboard/components/CardSpacer";
import LanguageSwitch from "@dashboard/components/LanguageSwitch";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import {
CategoryTranslationFragment,
LanguageCodeEnum,
@ -42,7 +42,7 @@ const TranslationsCategoriesPage: React.FC<TranslationsCategoriesPageProps> = ({
const intl = useIntl();
return (
<DetailedContent useSingleColumn>
<DetailPageLayout gridTemplateColumns={1}>
<TopNav
href={languageEntitiesUrl(languageCode, {
tab: TranslatableEntities.categories,
@ -138,7 +138,7 @@ const TranslationsCategoriesPage: React.FC<TranslationsCategoriesPageProps> = ({
onDiscard={onDiscard}
onSubmit={onSubmit}
/>
</DetailedContent>
</DetailPageLayout>
);
};
TranslationsCategoriesPage.displayName = "TranslationsCategoriesPage";

6
src/translations/components/TranslationsCollectionsPage/TranslationsCollectionsPage.tsx
View file

@ -1,7 +1,7 @@
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import CardSpacer from "@dashboard/components/CardSpacer";
import LanguageSwitch from "@dashboard/components/LanguageSwitch";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import {
CollectionTranslationFragment,
LanguageCodeEnum,
@ -44,7 +44,7 @@ const TranslationsCollectionsPage: React.FC<
const intl = useIntl();
return (
<DetailedContent useSingleColumn>
<DetailPageLayout gridTemplateColumns={1}>
<TopNav
href={languageEntitiesUrl(languageCode, {
tab: TranslatableEntities.collections,
@ -141,7 +141,7 @@ const TranslationsCollectionsPage: React.FC<
onDiscard={onDiscard}
onSubmit={onSubmit}
/>
</DetailedContent>
</DetailPageLayout>
);
};
TranslationsCollectionsPage.displayName = "TranslationsCollectionsPage";

6
src/translations/components/TranslationsMenuItemPage/TranslationsMenuItemPage.tsx
View file

@ -1,6 +1,6 @@
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import LanguageSwitch from "@dashboard/components/LanguageSwitch";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import {
LanguageCodeEnum,
MenuItemTranslationFragment,
@ -41,7 +41,7 @@ const TranslationsMenuItemPage: React.FC<TranslationsMenuItemPageProps> = ({
const intl = useIntl();
return (
<DetailedContent useSingleColumn>
<DetailPageLayout gridTemplateColumns={1}>
<TopNav
href={languageEntitiesUrl(languageCode, {
tab: TranslatableEntities.menuItems,
@ -95,7 +95,7 @@ const TranslationsMenuItemPage: React.FC<TranslationsMenuItemPageProps> = ({
onDiscard={onDiscard}
onSubmit={onSubmit}
/>
</DetailedContent>
</DetailPageLayout>
);
};
TranslationsMenuItemPage.displayName = "TranslationsMenuItemPage";

6
src/translations/components/TranslationsPagesPage/TranslationsPagesPage.tsx
View file

@ -1,7 +1,7 @@
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import CardSpacer from "@dashboard/components/CardSpacer";
import LanguageSwitch from "@dashboard/components/LanguageSwitch";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import { LanguageCodeEnum, PageTranslationFragment } from "@dashboard/graphql";
import { commonMessages } from "@dashboard/intl";
import { getStringOrPlaceholder } from "@dashboard/misc";
@ -42,7 +42,7 @@ const TranslationsPagesPage: React.FC<TranslationsPagesPageProps> = ({
const intl = useIntl();
return (
<DetailedContent useSingleColumn>
<DetailPageLayout gridTemplateColumns={1}>
<TopNav
href={languageEntitiesUrl(languageCode, {
tab: TranslatableEntities.pages,
@ -160,7 +160,7 @@ const TranslationsPagesPage: React.FC<TranslationsPagesPageProps> = ({
<CardSpacer />
</>
)}
</DetailedContent>
</DetailPageLayout>
);
};
TranslationsPagesPage.displayName = "TranslationsPagesPage";

8
src/translations/components/TranslationsProductsPage/TranslationsProductsPage.tsx
View file

@ -1,7 +1,7 @@
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import CardSpacer from "@dashboard/components/CardSpacer";
import LanguageSwitch from "@dashboard/components/LanguageSwitch";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import {
LanguageCodeEnum,
ProductTranslationFragment,
@ -48,7 +48,7 @@ const TranslationsProductsPage: React.FC<TranslationsProductsPageProps> = ({
const intl = useIntl();
return (
<DetailedContent useSingleColumn>
<DetailPageLayout gridTemplateColumns={1}>
<TopNav
href={languageEntitiesUrl(languageCode, {
tab: TranslatableEntities.products,
@ -83,6 +83,7 @@ const TranslationsProductsPage: React.FC<TranslationsProductsPageProps> = ({
}
/>
</TopNav>
<DetailPageLayout.Content>
<TranslationFields
activeField={activeField}
disabled={disabled}
@ -174,7 +175,8 @@ const TranslationsProductsPage: React.FC<TranslationsProductsPageProps> = ({
<CardSpacer />
</>
)}
</DetailedContent>
</DetailPageLayout.Content>
</DetailPageLayout>
);
};
TranslationsProductsPage.displayName = "TranslationsProductsPage";

8
src/translations/components/TranslationsSalesPage/TranslationsSalesPage.tsx
View file

@ -1,6 +1,6 @@
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import LanguageSwitch from "@dashboard/components/LanguageSwitch";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import { LanguageCodeEnum, SaleTranslationFragment } from "@dashboard/graphql";
import { commonMessages } from "@dashboard/intl";
import { getStringOrPlaceholder } from "@dashboard/misc";
@ -39,7 +39,7 @@ const TranslationsSalesPage: React.FC<TranslationsSalesPageProps> = ({
const intl = useIntl();
return (
<DetailedContent useSingleColumn>
<DetailPageLayout gridTemplateColumns={1}>
<TopNav
href={languageEntitiesUrl(languageCode, {
tab: TranslatableEntities.sales,
@ -64,6 +64,7 @@ const TranslationsSalesPage: React.FC<TranslationsSalesPageProps> = ({
}
/>
</TopNav>
<DetailPageLayout.Content>
<TranslationFields
activeField={activeField}
disabled={disabled}
@ -87,7 +88,8 @@ const TranslationsSalesPage: React.FC<TranslationsSalesPageProps> = ({
onDiscard={onDiscard}
onSubmit={onSubmit}
/>
</DetailedContent>
</DetailPageLayout.Content>
</DetailPageLayout>
);
};
TranslationsSalesPage.displayName = "TranslationsSalesPage";

8
src/translations/components/TranslationsShippingMethodPage/TranslationsShippingMethodPage.tsx
View file

@ -1,6 +1,6 @@
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import LanguageSwitch from "@dashboard/components/LanguageSwitch";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import {
LanguageCodeEnum,
ShippingMethodTranslationFragment,
@ -43,7 +43,7 @@ const TranslationsShippingMethodPage: React.FC<
const intl = useIntl();
return (
<DetailedContent useSingleColumn>
<DetailPageLayout gridTemplateColumns={1}>
<TopNav
href={languageEntitiesUrl(languageCode, {
tab: TranslatableEntities.shippingMethods,
@ -73,6 +73,7 @@ const TranslationsShippingMethodPage: React.FC<
}
/>
</TopNav>
<DetailPageLayout.Content>
<TranslationFields
activeField={activeField}
disabled={disabled}
@ -108,7 +109,8 @@ const TranslationsShippingMethodPage: React.FC<
onDiscard={onDiscard}
onSubmit={onSubmit}
/>
</DetailedContent>
</DetailPageLayout.Content>
</DetailPageLayout>
);
};
TranslationsShippingMethodPage.displayName = "TranslationsShippingMethodPage";

8
src/translations/components/TranslationsVouchersPage/TranslationsVouchersPage.tsx
View file

@ -1,6 +1,6 @@
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import LanguageSwitch from "@dashboard/components/LanguageSwitch";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import {
LanguageCodeEnum,
VoucherTranslationFragment,
@ -42,7 +42,7 @@ const TranslationsVouchersPage: React.FC<TranslationsVouchersPageProps> = ({
const intl = useIntl();
return (
<DetailedContent useSingleColumn>
<DetailPageLayout gridTemplateColumns={1}>
<TopNav
href={languageEntitiesUrl(languageCode, {
tab: TranslatableEntities.vouchers,
@ -72,6 +72,7 @@ const TranslationsVouchersPage: React.FC<TranslationsVouchersPageProps> = ({
}
/>
</TopNav>
<DetailPageLayout.Content>
<TranslationFields
activeField={activeField}
disabled={disabled}
@ -95,7 +96,8 @@ const TranslationsVouchersPage: React.FC<TranslationsVouchersPageProps> = ({
onDiscard={onDiscard}
onSubmit={onSubmit}
/>
</DetailedContent>
</DetailPageLayout.Content>
</DetailPageLayout>
);
};
TranslationsVouchersPage.displayName = "TranslationsVouchersPage";

13
src/warehouses/components/WarehouseCreatePage/WarehouseCreatePage.tsx
View file

@ -1,10 +1,9 @@
import { createCountryHandler } from "@dashboard/components/AddressEdit/createCountryHandler";
import { Content } from "@dashboard/components/AppLayout/Content";
import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import CardSpacer from "@dashboard/components/CardSpacer";
import CompanyAddressInput from "@dashboard/components/CompanyAddressInput";
import Form from "@dashboard/components/Form";
import Grid from "@dashboard/components/Grid";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import Savebar from "@dashboard/components/Savebar";
import { AddressTypeInput } from "@dashboard/customers/types";
import {
@ -75,7 +74,7 @@ const WarehouseCreatePage: React.FC<WarehouseCreatePageProps> = ({
const handleCountrySelect = createCountryHandler(countrySelect, set);
return (
<>
<DetailPageLayout gridTemplateColumns={1}>
<TopNav
href={warehouseListUrl()}
title={intl.formatMessage({
@ -84,8 +83,7 @@ const WarehouseCreatePage: React.FC<WarehouseCreatePageProps> = ({
description: "header",
})}
/>
<Content>
<Grid>
<DetailPageLayout.Content>
<div>
<WarehouseInfo
data={data}
@ -109,15 +107,14 @@ const WarehouseCreatePage: React.FC<WarehouseCreatePageProps> = ({
onCountryChange={handleCountrySelect}
/>
</div>
</Grid>
<Savebar
disabled={disabled}
onCancel={() => navigate(warehouseListUrl())}
onSubmit={submit}
state={saveButtonBarState}
/>
</Content>
</>
</DetailPageLayout.Content>
</DetailPageLayout>
);
}}
</Form>

16
src/warehouses/components/WarehouseDetailsPage/WarehouseDetailsPage.tsx
View file

@ -1,11 +1,9 @@
import { createCountryHandler } from "@dashboard/components/AddressEdit/createCountryHandler";
import { Content } from "@dashboard/components/AppLayout/Content";
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { RightSidebar } from "@dashboard/components/AppLayout/RightSidebar";
import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import CardSpacer from "@dashboard/components/CardSpacer";
import CompanyAddressInput from "@dashboard/components/CompanyAddressInput";
import Form from "@dashboard/components/Form";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import Savebar from "@dashboard/components/Savebar";
import { AddressTypeInput } from "@dashboard/customers/types";
import {
@ -95,9 +93,9 @@ const WarehouseDetailsPage: React.FC<WarehouseDetailsPageProps> = ({
const handleCountrySelect = createCountryHandler(countrySelect, set);
return (
<DetailedContent>
<DetailPageLayout>
<TopNav href={warehouseListUrl()} title={warehouse?.name} />
<Content>
<DetailPageLayout.Content>
<WarehouseInfo
data={data}
disabled={disabled}
@ -119,8 +117,8 @@ const WarehouseDetailsPage: React.FC<WarehouseDetailsPageProps> = ({
onChange={change}
onCountryChange={handleCountrySelect}
/>
</Content>
<RightSidebar>
</DetailPageLayout.Content>
<DetailPageLayout.RightSidebar>
<WarehouseSettings
zones={mapEdgesToItems(warehouse?.shippingZones) ?? []}
data={data}
@ -128,7 +126,7 @@ const WarehouseDetailsPage: React.FC<WarehouseDetailsPageProps> = ({
onChange={change}
setData={set}
/>
</RightSidebar>
</DetailPageLayout.RightSidebar>
<Savebar
disabled={!!isSaveDisabled}
onCancel={() => navigate(warehouseListUrl())}
@ -136,7 +134,7 @@ const WarehouseDetailsPage: React.FC<WarehouseDetailsPageProps> = ({
onSubmit={submit}
state={saveButtonBarState}
/>
</DetailedContent>
</DetailPageLayout>
);
}}
</Form>

5
src/warehouses/components/WarehouseListPage/WarehouseListPage.tsx
View file

@ -2,6 +2,7 @@ import { LimitsInfo } from "@dashboard/components/AppLayout/LimitsInfo";
import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import { Backlink } from "@dashboard/components/Backlink";
import { Button } from "@dashboard/components/Button";
import { ListPageLayout } from "@dashboard/components/Layouts";
import LimitReachedAlert from "@dashboard/components/LimitReachedAlert";
import SearchBar from "@dashboard/components/SearchBar";
import { configurationMenuUrl } from "@dashboard/configuration";
@ -59,7 +60,7 @@ export const WarehouseListPage: React.FC<WarehouseListPageProps> = ({
const limitReached = isLimitReached(limits, "warehouses");
return (
<>
<ListPageLayout>
<Backlink href={configurationMenuUrl}>
<FormattedMessage {...sectionNames.configuration} />
</Backlink>
@ -138,7 +139,7 @@ export const WarehouseListPage: React.FC<WarehouseListPageProps> = ({
{...listProps}
/>
</Card>
</>
</ListPageLayout>
);
};
WarehouseListPage.displayName = "WarehouseListPage";