Using Page Layouts in Octopus Portal
import { PageContent } from "~/components/PageContent/PageContent"
As documented in Overview tab, when working within Octopus portal, you should always use the PageContent component rather than directly using the specific layout components. The PageContent component will choose appropriate Page Layout based on the allPageRegistrations (Please refer to the Octopus Server Documentation on Page Registrations for more information).
Level 1 Page
If you are adding page at Level 1, PageContent component will choose the Level1PageLayout automatically for you as long as the page is configured correctly in allPageRegistrations .
Properties
Detailed prop descriptions are available in Storybook or the source code (via JSDoc), they are omitted here for brevity.
Example Usage
Using ImportProjectsPage as example, this page has been configured as level 1 page in allPageRegistrations.tsx.
import { PageContent } from "~/components/PageContent/PageContent";
function ImportProjectsPage(...) {
...
return (
<PageContent>
...
</PageContent>
)
}
ImportProjectsPage.tsx
Level 2 Page
If you are creating a new set of pages at Level 2, you must ensure that the area's layout incorporates the Level2OuterPageLayout, so that Level2InnerPageLayout resolved from PageContent works properly.
Level2OuterPageLayout
The Level2OuterPageLayout component encapsulates the Level2InnerPageLayout component, offering configurable slots for various elements. These include sidebar navigation items, a header featuring breadcrumbs, an overflow menu, a primary action etc, along with additional content areas below.
Properties
Detailed prop descriptions are available in Storybook or the source code (via JSDoc), they are omitted here for brevity.
Level2InnerPageLayout
The Level2InnerPageLayout component lives inside the Level2OuterPageLayout component and has pre-determined slots for Errors, Callout, Header, Pagination, and Filters. It is designed to provide a consistent layout for nested pages with a single content area and optional filters and pagination controls.
Properties
Detailed prop descriptions are available in Storybook or the source code (via JSDoc), they are omitted here for brevity.
Example usage
The following example shows how to use Level2OuterPageLayout and PageContent to construct a level 2 page. Using ProjectLayout and ProjectTenantsPage as example, this page has been configured as level 2 page in allPageRegistrations.tsx.
ProjectLayout
This component defines the area's layout, it consumes Level2OuterPageLayout to display the area's header and sidebar etc. The usage of Level2OuterPageLayout is required so that Level2InnerPageLayout resolved from PageContent can be positioned consistently.
import { Level2OuterPageLayout } from "@octopusdeploy/design-system-components";
function ProjectLayout(...) {
...
return (
<main>
<Level2OuterPageLayout>
...
</Level2OuterPageLayout>
</main>
)
}
ProjectLayout.tsx
AllPageRoutes
The area’s layout component (ProjectLayout in this case) is used in AllPageRoutes to wrap the routes for the pages in the area, which are eventually being resolved as page components.
import { ProjectLayout } from "~/areas/projects/components/ProjectLayout/ProjectLayout";
function ProjectRoutes(...) {
return (
<Routes>
...
{routeSegment(projectsPageGroups.specificProject, (...) => (
...
<ProjectLayout>
<Routes>
{/* Routes for the level 2 pages in Project area, */}
{/* which are eventually resolved to specific Page Components. */}
{/* Using ProjectTenantsPage as example */}
...
{renderPagesWithLayout(tenantsPages, loaderContext, pageContext)}
</Routes>
</ProjectLayout>
)}
</Routes>
)
}
AllPageRoutes.tsx
ProjectTenantsPage
The PageContent is used in the specific page component, which is resolved to Level2InnerPageLayout that will be positioned inside of Level2OuterPageLayout .
import { PageContent } from "~/components/PageContent/PageContent";
function ProjectTenantsPage(...) {
return (
<PageContent>
...
</PageContent>
)
}
ProjectTenantsPage.tsx
Help and support