rohit/probo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Unify page headers on most pages

Browse Source 
Signed-off-by: Émile Ré <nemile.re@gmail.com>
This commit is contained in:
Émile Ré
2025-03-14 16:36:18 +04:00
parent 4fc9430e8e
commit e56dac3f71
8 changed files with 416 additions and 354 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
apps/console/src/layouts/ConsoleLayout.tsx
View File

@@ -381,8 +381,8 @@ export default function ConsoleLayout() {
<Suspense> <Suspense>
<AppSidebar className="p-4" /> <AppSidebar className="p-4" />
</Suspense> </Suspense>
<SidebarInset className="flex items-center"> <SidebarInset>
<div className="w-lg md:w-xl lg:w-3xl xl:w-4xl 2xl:w-5xl p-8"> <div className="mx-auto w-lg md:w-xl lg:w-3xl xl:w-4xl 2xl:w-5xl p-8">
<header className="flex shrink-0 items-center gap-2"> <header className="flex shrink-0 items-center gap-2">
<Routes> <Routes>
<Route <Route

20
apps/console/src/pages/FrameworkListPage.tsx
View File

@@ -23,6 +23,7 @@ import {
import { Label } from "@/components/ui/label"; import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
import { FrameworkListPageImportFrameworkMutation as FrameworkListPageImportFrameworkMutationType } from "./__generated__/FrameworkListPageImportFrameworkMutation.graphql"; import { FrameworkListPageImportFrameworkMutation as FrameworkListPageImportFrameworkMutationType } from "./__generated__/FrameworkListPageImportFrameworkMutation.graphql";
import { PageHeader } from "./PageHeader";
const FrameworkListPageQuery = graphql` const FrameworkListPageQuery = graphql`
query FrameworkListPageQuery($organizationId: ID!) { query FrameworkListPageQuery($organizationId: ID!) {
@@ -186,15 +187,13 @@ function FrameworkListPageContent({
<Helmet> <Helmet>
<title>Frameworks - Probo</title> <title>Frameworks - Probo</title>
</Helmet> </Helmet>
<div className="container mx-auto py-6"> <div className="container">
<div className="flex justify-between items-center mb-6"> <PageHeader
<div> className="mb-17"
<h1 className="text-2xl font-bold">Frameworks</h1> title="Frameworks"
<p className="text-muted-foreground"> description="Manage your compliance frameworks"
Manage your compliance frameworks actions={
</p> <div className="flex gap-4">
</div>
<div className="flex gap-2">
<Dialog <Dialog
open={isImportDialogOpen} open={isImportDialogOpen}
onOpenChange={setIsImportDialogOpen} onOpenChange={setIsImportDialogOpen}
@@ -236,7 +235,8 @@ function FrameworkListPageContent({
</Link> </Link>
</Button> </Button>
</div> </div>
</div> }
/>
<div className="space-y-6"> <div className="space-y-6">
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-2"> <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-2">
{frameworks.map((framework) => { {frameworks.map((framework) => {

20
apps/console/src/pages/FrameworkOverviewPage.tsx
View File

@@ -12,6 +12,7 @@ import { Button } from "@/components/ui/button";
import type { FrameworkOverviewPageQuery as FrameworkOverviewPageQueryType } from "./__generated__/FrameworkOverviewPageQuery.graphql"; import type { FrameworkOverviewPageQuery as FrameworkOverviewPageQueryType } from "./__generated__/FrameworkOverviewPageQuery.graphql";
import { Helmet } from "react-helmet-async"; import { Helmet } from "react-helmet-async";
import { createPortal } from "react-dom"; import { createPortal } from "react-dom";
import { PageHeader } from "./PageHeader";
const FrameworkOverviewPageQuery = graphql` const FrameworkOverviewPageQuery = graphql`
query FrameworkOverviewPageQuery($frameworkId: ID!) { query FrameworkOverviewPageQuery($frameworkId: ID!) {
@@ -81,14 +82,13 @@ function FrameworkOverviewPageContent({
).length; ).length;
return ( return (
<div className="min-h-screen bg-background p-6 space-y-6"> <div className="container space-y-6">
<div className="space-y-4 mb-8"> <PageHeader
<div className="flex justify-between items-center"> className="mb-17"
<div> title={framework.name ?? ""}
<h2 className="text-2xl font-semibold mb-1">{framework.name}</h2> description={framework.description ?? ""}
<p className="text-muted-foreground">{framework.description}</p> actions={
</div> <div className="flex gap-4">
<div className="flex gap-2">
<Button variant="outline" asChild> <Button variant="outline" asChild>
<Link <Link
to={`/organizations/${organizationId}/frameworks/${framework.id}/update`} to={`/organizations/${organizationId}/frameworks/${framework.id}/update`}
@@ -105,8 +105,8 @@ function FrameworkOverviewPageContent({
</Link> </Link>
</Button> </Button>
</div> </div>
</div> }
</div> />
<div className="mb-6 flex justify-between items-center"> <div className="mb-6 flex justify-between items-center">
<h2 className="text-xl font-semibold">Controls</h2> <h2 className="text-xl font-semibold">Controls</h2>

50
apps/console/src/pages/PageHeader.tsx Normal file
View File

@@ -0,0 +1,50 @@
import { cn } from "@/lib/utils";
import { ReactNode } from "react";
export function PageHeader({
className,
title,
actions,
description,
}: {
className?: string;
title: string;
actions?: ReactNode;
description: string;
}) {
return (
<div className={cn("space-y-6", className)}>
{actions ? (
<div className="flex items-center justify-between">
<PageHeading title={title} />
{actions}
</div>
) : (
<PageHeading title={title} />
)}
<PageDescription>{description}</PageDescription>
</div>
);
}
export function PageHeading({
title,
className,
}: {
className?: string;
title: string;
}) {
return <h1 className={cn("text-3xl font-medium", className)}>{title}</h1>;
}
export function PageDescription({
children,
className,
}: {
className?: string;
children: ReactNode;
}) {
return (
<p className={cn("text-lg text-muted-foreground", className)}>{children}</p>
);
}

28
apps/console/src/pages/PeopleListPage.tsx
View File

@@ -18,6 +18,7 @@ import type { PeopleListPageQuery as PeopleListPageQueryType } from "./__generat
import type { PeopleListPageDeletePeopleMutation } from "./__generated__/PeopleListPageDeletePeopleMutation.graphql"; import type { PeopleListPageDeletePeopleMutation } from "./__generated__/PeopleListPageDeletePeopleMutation.graphql";
import { PeopleListPagePaginationQuery } from "./__generated__/PeopleListPagePaginationQuery.graphql"; import { PeopleListPagePaginationQuery } from "./__generated__/PeopleListPagePaginationQuery.graphql";
import { PeopleListPage_peoples$key } from "./__generated__/PeopleListPage_peoples.graphql"; import { PeopleListPage_peoples$key } from "./__generated__/PeopleListPage_peoples.graphql";
import { PageHeader } from "./PageHeader";
const ITEMS_PER_PAGE = 25; const ITEMS_PER_PAGE = 25;
@@ -168,16 +169,17 @@ function PeopleListContent({
const pageInfo = peoplesConnection.peoples.pageInfo; const pageInfo = peoplesConnection.peoples.pageInfo;
return ( return (
<div className="space-y-6"> <>
<div> <Helmet>
<h2 className="text-2xl font-semibold mb-1">Employees</h2> <title>People - Probo</title>
<p className="text-muted-foreground"> </Helmet>
Keep track of your company{"'"}s workforce and their progress towards <div className="container space-y-6">
completing tasks assigned to them. <PageHeader
</p> className="mb-17"
</div> title="Employees"
description="Keep track of your company's workforce and their progress
<div className="flex items-center justify-between"> towards completing tasks assigned to them."
actions={
<Button <Button
asChild asChild
variant="outline" variant="outline"
@@ -186,10 +188,11 @@ function PeopleListContent({
> >
<Link to={`/organizations/${organizationId}/people/create`}> <Link to={`/organizations/${organizationId}/people/create`}>
<UserPlus className="h-4 w-4" /> <UserPlus className="h-4 w-4" />
Add a people Add a person
</Link> </Link>
</Button> </Button>
</div> }
/>
<div className="space-y-2"> <div className="space-y-2">
{peoples.map((person) => ( {peoples.map((person) => (
@@ -286,6 +289,7 @@ function PeopleListContent({
}} }}
/> />
</div> </div>
</>
); );
} }

18
apps/console/src/pages/PolicyListPage.tsx
View File

@@ -34,6 +34,7 @@ import {
import { Badge } from "@/components/ui/badge"; import { Badge } from "@/components/ui/badge";
import { format } from "date-fns"; import { format } from "date-fns";
import type { PolicyListPageQuery as PolicyListPageQueryType } from "./__generated__/PolicyListPageQuery.graphql"; import type { PolicyListPageQuery as PolicyListPageQueryType } from "./__generated__/PolicyListPageQuery.graphql";
import { PageHeader } from "./PageHeader";
const PolicyListPageQuery = graphql` const PolicyListPageQuery = graphql`
query PolicyListPageQuery($organizationId: ID!) { query PolicyListPageQuery($organizationId: ID!) {
@@ -223,21 +224,20 @@ function PolicyListPageContent({
<Helmet> <Helmet>
<title>Policies - Probo</title> <title>Policies - Probo</title>
</Helmet> </Helmet>
<div className="container mx-auto py-6"> <div className="container space-y-6">
<div className="flex justify-between items-center mb-6"> <PageHeader
<div> className="mb-17"
<h1 className="text-2xl font-bold">Policies</h1> title="Policies"
<p className="text-muted-foreground"> description="Manage your organization's policies"
Manage your organization{"'"}s policies actions={
</p>
</div>
<Button asChild> <Button asChild>
<Link to={`/organizations/${organizationId}/policies/create`}> <Link to={`/organizations/${organizationId}/policies/create`}>
<Plus className="mr-2 h-4 w-4" /> <Plus className="mr-2 h-4 w-4" />
Create Policy Create Policy
</Link> </Link>
</Button> </Button>
</div> }
/>
{/* Search and filter controls */} {/* Search and filter controls */}
<div className="flex flex-col md:flex-row gap-4 mb-6"> <div className="flex flex-col md:flex-row gap-4 mb-6">

14
apps/console/src/pages/SettingsPage.tsx
View File

@@ -39,6 +39,7 @@ import type { SettingsPageQuery as SettingsPageQueryType } from "./__generated__
import type { SettingsPageUpdateOrganizationMutation as SettingsPageUpdateOrganizationMutationType } from "./__generated__/SettingsPageUpdateOrganizationMutation.graphql"; import type { SettingsPageUpdateOrganizationMutation as SettingsPageUpdateOrganizationMutationType } from "./__generated__/SettingsPageUpdateOrganizationMutation.graphql";
import type { SettingsPageInviteUserMutation as SettingsPageInviteUserMutationType } from "./__generated__/SettingsPageInviteUserMutation.graphql"; import type { SettingsPageInviteUserMutation as SettingsPageInviteUserMutationType } from "./__generated__/SettingsPageInviteUserMutation.graphql";
import type { SettingsPageRemoveUserMutation as SettingsPageRemoveUserMutationType } from "./__generated__/SettingsPageRemoveUserMutation.graphql"; import type { SettingsPageRemoveUserMutation as SettingsPageRemoveUserMutationType } from "./__generated__/SettingsPageRemoveUserMutation.graphql";
import { PageHeader } from "./PageHeader";
const settingsPageQuery = graphql` const settingsPageQuery = graphql`
query SettingsPageQuery($organizationID: ID!) { query SettingsPageQuery($organizationID: ID!) {
@@ -290,13 +291,12 @@ function SettingsPageContent({
return ( return (
<> <>
<div className="container mx-auto p-6 space-y-6"> <div className="container space-y-6">
<div> <PageHeader
<h1 className="text-4xl font-medium tracking-tight">Settings</h1> className="mb-17"
<p className="text-lg text-muted-foreground"> title="Settings"
Manage your details and personal preferences here. description="Manage your details and personal preferences here"
</p> />
</div>
<Card> <Card>
<CardHeader> <CardHeader>

26
apps/console/src/pages/VendorListPage.tsx
View File

@@ -22,6 +22,7 @@ import { VendorListPageDeleteVendorMutation } from "./__generated__/VendorListPa
import { VendorListPagePaginationQuery } from "./__generated__/VendorListPagePaginationQuery.graphql"; import { VendorListPagePaginationQuery } from "./__generated__/VendorListPagePaginationQuery.graphql";
import { VendorListPage_vendors$key } from "./__generated__/VendorListPage_vendors.graphql"; import { VendorListPage_vendors$key } from "./__generated__/VendorListPage_vendors.graphql";
import { useToast } from "@/hooks/use-toast"; import { useToast } from "@/hooks/use-toast";
import { PageHeader } from "./PageHeader";
const ITEMS_PER_PAGE = 25; const ITEMS_PER_PAGE = 25;
@@ -234,14 +235,17 @@ function VendorListContent({
}); });
return ( return (
<>
<Helmet>
<title>Vendors - Probo</title>
</Helmet>
<div className="space-y-6"> <div className="space-y-6">
<div> <PageHeader
<h2 className="text-2xl font-semibold mb-1">Vendors</h2> className="mb-17"
<p className="text-muted-foreground"> title="Vendors"
Vendors are third-party services that your company uses. Add them to description="Vendors are third-party services that your company uses. Add them to
keep track of their risk and compliance status. keep track of their risk and compliance status."
</p> />
</div>
<div className="rounded-xl border bg-card p-4"> <div className="rounded-xl border bg-card p-4">
<div className="flex items-center gap-2 mb-4"> <div className="flex items-center gap-2 mb-4">
@@ -260,7 +264,9 @@ function VendorListContent({
if (value.trim() === "") { if (value.trim() === "") {
setFilteredVendors([]); setFilteredVendors([]);
} else { } else {
const results = fuse.search(value).map((result) => result.item); const results = fuse
.search(value)
.map((result) => result.item);
setFilteredVendors(results); setFilteredVendors(results);
} }
}} }}
@@ -293,7 +299,8 @@ function VendorListContent({
setFilteredVendors([]); setFilteredVendors([]);
toast({ toast({
title: "Vendor added", title: "Vendor added",
description: "The vendor has been added successfully", description:
"The vendor has been added successfully",
}); });
}, },
}); });
@@ -411,6 +418,7 @@ function VendorListContent({
}} }}
/> />
</div> </div>
</>
); );
} }