feat: introduce DashboardPageLayout component to streamline page structure and improve layout consistency
This commit is contained in:
Abhimanyu Saharan
@@ -5,7 +5,7 @@ export const dynamic = "force-dynamic";
|
||||
import { useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
import { SignedIn, SignedOut, useAuth } from "@/auth/clerk";
|
||||
import { useAuth } from "@/auth/clerk";
|
||||
|
||||
import { ApiError } from "@/api/mutator";
|
||||
import {
|
||||
@@ -15,10 +15,7 @@ import {
|
||||
import { useCreateAgentApiV1AgentsPost } from "@/api/generated/agents/agents";
|
||||
import { useOrganizationMembership } from "@/lib/use-organization-membership";
|
||||
import type { BoardRead } from "@/api/generated/model";
|
||||
import { AdminOnlyNotice } from "@/components/auth/AdminOnlyNotice";
|
||||
import { SignedOutPanel } from "@/components/auth/SignedOutPanel";
|
||||
import { DashboardSidebar } from "@/components/organisms/DashboardSidebar";
|
||||
import { DashboardShell } from "@/components/templates/DashboardShell";
|
||||
import { DashboardPageLayout } from "@/components/templates/DashboardPageLayout";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import SearchableSelect, {
|
||||
@@ -155,32 +152,17 @@ export default function NewAgentPage() {
|
||||
};
|
||||
|
||||
return (
|
||||
<DashboardShell>
|
||||
<SignedOut>
|
||||
<SignedOutPanel
|
||||
message="Sign in to create an agent."
|
||||
forceRedirectUrl="/agents/new"
|
||||
signUpForceRedirectUrl="/agents/new"
|
||||
/>
|
||||
</SignedOut>
|
||||
<SignedIn>
|
||||
<DashboardSidebar />
|
||||
<main className="flex-1 overflow-y-auto bg-slate-50">
|
||||
<div className="border-b border-slate-200 bg-white px-8 py-6">
|
||||
<div>
|
||||
<h1 className="font-heading text-2xl font-semibold text-slate-900 tracking-tight">
|
||||
Create agent
|
||||
</h1>
|
||||
<p className="mt-1 text-sm text-slate-500">
|
||||
Agents start in provisioning until they check in.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-8">
|
||||
{!isAdmin ? (
|
||||
<AdminOnlyNotice message="Only organization owners and admins can create agents." />
|
||||
) : (
|
||||
<DashboardPageLayout
|
||||
signedOut={{
|
||||
message: "Sign in to create an agent.",
|
||||
forceRedirectUrl: "/agents/new",
|
||||
signUpForceRedirectUrl: "/agents/new",
|
||||
}}
|
||||
title="Create agent"
|
||||
description="Agents start in provisioning until they check in."
|
||||
isAdmin={isAdmin}
|
||||
adminOnlyMessage="Only organization owners and admins can create agents."
|
||||
>
|
||||
<form
|
||||
onSubmit={handleSubmit}
|
||||
className="rounded-xl border border-slate-200 bg-white p-6 shadow-sm space-y-6"
|
||||
@@ -373,10 +355,6 @@ export default function NewAgentPage() {
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
</main>
|
||||
</SignedIn>
|
||||
</DashboardShell>
|
||||
</DashboardPageLayout>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -6,7 +6,7 @@ import { useMemo, useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
import { SignedIn, SignedOut, useAuth } from "@/auth/clerk";
|
||||
import { useAuth } from "@/auth/clerk";
|
||||
import {
|
||||
type ColumnDef,
|
||||
type SortingState,
|
||||
@@ -18,8 +18,7 @@ import {
|
||||
import { useQueryClient } from "@tanstack/react-query";
|
||||
|
||||
import { StatusPill } from "@/components/atoms/StatusPill";
|
||||
import { DashboardSidebar } from "@/components/organisms/DashboardSidebar";
|
||||
import { DashboardShell } from "@/components/templates/DashboardShell";
|
||||
import { DashboardPageLayout } from "@/components/templates/DashboardPageLayout";
|
||||
import { Button, buttonVariants } from "@/components/ui/button";
|
||||
import {
|
||||
Dialog,
|
||||
@@ -44,8 +43,6 @@ import {
|
||||
} from "@/api/generated/boards/boards";
|
||||
import { useOrganizationMembership } from "@/lib/use-organization-membership";
|
||||
import type { AgentRead } from "@/api/generated/model";
|
||||
import { AdminOnlyNotice } from "@/components/auth/AdminOnlyNotice";
|
||||
import { SignedOutPanel } from "@/components/auth/SignedOutPanel";
|
||||
|
||||
const parseTimestamp = (value?: string | null) => {
|
||||
if (!value) return null;
|
||||
@@ -289,42 +286,24 @@ export default function AgentsPage() {
|
||||
});
|
||||
|
||||
return (
|
||||
<DashboardShell>
|
||||
<SignedOut>
|
||||
<SignedOutPanel
|
||||
message="Sign in to view agents."
|
||||
forceRedirectUrl="/agents"
|
||||
signUpForceRedirectUrl="/agents"
|
||||
/>
|
||||
</SignedOut>
|
||||
<SignedIn>
|
||||
<DashboardSidebar />
|
||||
<main className="flex-1 overflow-y-auto bg-slate-50">
|
||||
<div className="sticky top-0 z-30 border-b border-slate-200 bg-white">
|
||||
<div className="px-8 py-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-semibold tracking-tight text-slate-900">
|
||||
Agents
|
||||
</h1>
|
||||
<p className="mt-1 text-sm text-slate-500">
|
||||
{agents.length} agent{agents.length === 1 ? "" : "s"} total.
|
||||
</p>
|
||||
</div>
|
||||
{agents.length > 0 ? (
|
||||
<Button onClick={() => router.push("/agents/new")}>
|
||||
New agent
|
||||
</Button>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-8">
|
||||
{!isAdmin ? (
|
||||
<AdminOnlyNotice message="Only organization owners and admins can access agents." />
|
||||
) : (
|
||||
<>
|
||||
<DashboardPageLayout
|
||||
signedOut={{
|
||||
message: "Sign in to view agents.",
|
||||
forceRedirectUrl: "/agents",
|
||||
signUpForceRedirectUrl: "/agents",
|
||||
}}
|
||||
title="Agents"
|
||||
description={`${agents.length} agent${agents.length === 1 ? "" : "s"} total.`}
|
||||
headerActions={
|
||||
agents.length > 0 ? (
|
||||
<Button onClick={() => router.push("/agents/new")}>New agent</Button>
|
||||
) : null
|
||||
}
|
||||
isAdmin={isAdmin}
|
||||
adminOnlyMessage="Only organization owners and admins can access agents."
|
||||
stickyHeader
|
||||
>
|
||||
<div className="overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-left text-sm">
|
||||
@@ -348,9 +327,7 @@ export default function AgentsPage() {
|
||||
{agentsQuery.isLoading ? (
|
||||
<tr>
|
||||
<td colSpan={columns.length} className="px-6 py-8">
|
||||
<span className="text-sm text-slate-500">
|
||||
Loading…
|
||||
</span>
|
||||
<span className="text-sm text-slate-500">Loading…</span>
|
||||
</td>
|
||||
</tr>
|
||||
) : table.getRowModel().rows.length ? (
|
||||
@@ -390,8 +367,8 @@ export default function AgentsPage() {
|
||||
No agents yet
|
||||
</h3>
|
||||
<p className="mb-6 max-w-md text-sm text-slate-500">
|
||||
Create your first agent to start executing
|
||||
tasks on this board.
|
||||
Create your first agent to start executing tasks on
|
||||
this board.
|
||||
</p>
|
||||
<Link
|
||||
href="/agents/new"
|
||||
@@ -412,15 +389,9 @@ export default function AgentsPage() {
|
||||
</div>
|
||||
|
||||
{agentsQuery.error ? (
|
||||
<p className="mt-4 text-sm text-red-500">
|
||||
{agentsQuery.error.message}
|
||||
</p>
|
||||
<p className="mt-4 text-sm text-red-500">{agentsQuery.error.message}</p>
|
||||
) : null}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</main>
|
||||
</SignedIn>
|
||||
</DashboardPageLayout>
|
||||
|
||||
<Dialog
|
||||
open={!!deleteTarget}
|
||||
@@ -453,6 +424,6 @@ export default function AgentsPage() {
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</DashboardShell>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -5,7 +5,7 @@ export const dynamic = "force-dynamic";
|
||||
import { useEffect, useMemo, useRef, useState } from "react";
|
||||
import { useParams, useRouter, useSearchParams } from "next/navigation";
|
||||
|
||||
import { SignedIn, SignedOut, useAuth } from "@/auth/clerk";
|
||||
import { useAuth } from "@/auth/clerk";
|
||||
import { X } from "lucide-react";
|
||||
|
||||
import { ApiError } from "@/api/mutator";
|
||||
@@ -29,10 +29,7 @@ import type {
|
||||
BoardUpdate,
|
||||
} from "@/api/generated/model";
|
||||
import { BoardOnboardingChat } from "@/components/BoardOnboardingChat";
|
||||
import { AdminOnlyNotice } from "@/components/auth/AdminOnlyNotice";
|
||||
import { SignedOutPanel } from "@/components/auth/SignedOutPanel";
|
||||
import { DashboardSidebar } from "@/components/organisms/DashboardSidebar";
|
||||
import { DashboardShell } from "@/components/templates/DashboardShell";
|
||||
import { DashboardPageLayout } from "@/components/templates/DashboardPageLayout";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Dialog, DialogClose, DialogContent } from "@/components/ui/dialog";
|
||||
import { Input } from "@/components/ui/input";
|
||||
@@ -293,32 +290,18 @@ export default function EditBoardPage() {
|
||||
|
||||
return (
|
||||
<>
|
||||
<DashboardShell>
|
||||
<SignedOut>
|
||||
<SignedOutPanel
|
||||
message="Sign in to edit boards."
|
||||
forceRedirectUrl={`/boards/${boardId}/edit`}
|
||||
signUpForceRedirectUrl={`/boards/${boardId}/edit`}
|
||||
/>
|
||||
</SignedOut>
|
||||
<SignedIn>
|
||||
<DashboardSidebar />
|
||||
<main ref={mainRef} className="flex-1 overflow-y-auto bg-slate-50">
|
||||
<div className="border-b border-slate-200 bg-white px-8 py-6">
|
||||
<div>
|
||||
<h1 className="font-heading text-2xl font-semibold text-slate-900 tracking-tight">
|
||||
Edit board
|
||||
</h1>
|
||||
<p className="mt-1 text-sm text-slate-500">
|
||||
Update board settings and gateway.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-8">
|
||||
{!isAdmin ? (
|
||||
<AdminOnlyNotice message="Only organization owners and admins can edit board settings." />
|
||||
) : (
|
||||
<DashboardPageLayout
|
||||
signedOut={{
|
||||
message: "Sign in to edit boards.",
|
||||
forceRedirectUrl: `/boards/${boardId}/edit`,
|
||||
signUpForceRedirectUrl: `/boards/${boardId}/edit`,
|
||||
}}
|
||||
title="Edit board"
|
||||
description="Update board settings and gateway."
|
||||
isAdmin={isAdmin}
|
||||
adminOnlyMessage="Only organization owners and admins can edit board settings."
|
||||
mainRef={mainRef}
|
||||
>
|
||||
<div className="space-y-6">
|
||||
<form
|
||||
onSubmit={handleSubmit}
|
||||
@@ -498,11 +481,7 @@ export default function EditBoardPage() {
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</main>
|
||||
</SignedIn>
|
||||
</DashboardShell>
|
||||
</DashboardPageLayout>
|
||||
<Dialog open={isOnboardingOpen} onOpenChange={setIsOnboardingOpen}>
|
||||
<DialogContent
|
||||
aria-label="Board onboarding"
|
||||
|
||||
@@ -6,7 +6,7 @@ import { useMemo, useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
import { SignedIn, SignedOut, useAuth } from "@/auth/clerk";
|
||||
import { useAuth } from "@/auth/clerk";
|
||||
|
||||
import { ApiError } from "@/api/mutator";
|
||||
import { useCreateBoardApiV1BoardsPost } from "@/api/generated/boards/boards";
|
||||
@@ -20,10 +20,7 @@ import {
|
||||
} from "@/api/generated/gateways/gateways";
|
||||
import { useOrganizationMembership } from "@/lib/use-organization-membership";
|
||||
import type { BoardGroupRead } from "@/api/generated/model";
|
||||
import { AdminOnlyNotice } from "@/components/auth/AdminOnlyNotice";
|
||||
import { SignedOutPanel } from "@/components/auth/SignedOutPanel";
|
||||
import { DashboardSidebar } from "@/components/organisms/DashboardSidebar";
|
||||
import { DashboardShell } from "@/components/templates/DashboardShell";
|
||||
import { DashboardPageLayout } from "@/components/templates/DashboardPageLayout";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import SearchableSelect from "@/components/ui/searchable-select";
|
||||
@@ -141,32 +138,17 @@ export default function NewBoardPage() {
|
||||
};
|
||||
|
||||
return (
|
||||
<DashboardShell>
|
||||
<SignedOut>
|
||||
<SignedOutPanel
|
||||
message="Sign in to create a board."
|
||||
forceRedirectUrl="/boards/new"
|
||||
signUpForceRedirectUrl="/boards/new"
|
||||
/>
|
||||
</SignedOut>
|
||||
<SignedIn>
|
||||
<DashboardSidebar />
|
||||
<main className="flex-1 overflow-y-auto bg-slate-50">
|
||||
<div className="border-b border-slate-200 bg-white px-8 py-6">
|
||||
<div>
|
||||
<h1 className="font-heading text-2xl font-semibold text-slate-900 tracking-tight">
|
||||
Create board
|
||||
</h1>
|
||||
<p className="mt-1 text-sm text-slate-500">
|
||||
Boards organize tasks and agents by mission context.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-8">
|
||||
{!isAdmin ? (
|
||||
<AdminOnlyNotice message="Only organization owners and admins can create boards." />
|
||||
) : (
|
||||
<DashboardPageLayout
|
||||
signedOut={{
|
||||
message: "Sign in to create a board.",
|
||||
forceRedirectUrl: "/boards/new",
|
||||
signUpForceRedirectUrl: "/boards/new",
|
||||
}}
|
||||
title="Create board"
|
||||
description="Boards organize tasks and agents by mission context."
|
||||
isAdmin={isAdmin}
|
||||
adminOnlyMessage="Only organization owners and admins can create boards."
|
||||
>
|
||||
<form
|
||||
onSubmit={handleSubmit}
|
||||
className="space-y-6 rounded-xl border border-slate-200 bg-white p-6 shadow-sm"
|
||||
@@ -243,9 +225,7 @@ export default function NewBoardPage() {
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{errorMessage ? (
|
||||
<p className="text-sm text-red-500">{errorMessage}</p>
|
||||
) : null}
|
||||
{errorMessage ? <p className="text-sm text-red-500">{errorMessage}</p> : null}
|
||||
|
||||
<div className="flex justify-end gap-3">
|
||||
<Button
|
||||
@@ -261,10 +241,6 @@ export default function NewBoardPage() {
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
</main>
|
||||
</SignedIn>
|
||||
</DashboardShell>
|
||||
</DashboardPageLayout>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -5,7 +5,7 @@ export const dynamic = "force-dynamic";
|
||||
import { useState } from "react";
|
||||
import { useParams, useRouter } from "next/navigation";
|
||||
|
||||
import { SignedIn, SignedOut, useAuth } from "@/auth/clerk";
|
||||
import { useAuth } from "@/auth/clerk";
|
||||
|
||||
import { ApiError } from "@/api/mutator";
|
||||
import {
|
||||
@@ -15,11 +15,8 @@ import {
|
||||
} from "@/api/generated/gateways/gateways";
|
||||
import { useOrganizationMembership } from "@/lib/use-organization-membership";
|
||||
import type { GatewayUpdate } from "@/api/generated/model";
|
||||
import { AdminOnlyNotice } from "@/components/auth/AdminOnlyNotice";
|
||||
import { SignedOutPanel } from "@/components/auth/SignedOutPanel";
|
||||
import { GatewayForm } from "@/components/gateways/GatewayForm";
|
||||
import { DashboardSidebar } from "@/components/organisms/DashboardSidebar";
|
||||
import { DashboardShell } from "@/components/templates/DashboardShell";
|
||||
import { DashboardPageLayout } from "@/components/templates/DashboardPageLayout";
|
||||
import {
|
||||
DEFAULT_MAIN_SESSION_KEY,
|
||||
DEFAULT_WORKSPACE_ROOT,
|
||||
@@ -164,33 +161,20 @@ export default function EditGatewayPage() {
|
||||
};
|
||||
|
||||
return (
|
||||
<DashboardShell>
|
||||
<SignedOut>
|
||||
<SignedOutPanel
|
||||
message="Sign in to edit a gateway."
|
||||
forceRedirectUrl={`/gateways/${gatewayId}/edit`}
|
||||
/>
|
||||
</SignedOut>
|
||||
<SignedIn>
|
||||
<DashboardSidebar />
|
||||
<main className="flex-1 overflow-y-auto bg-slate-50">
|
||||
<div className="border-b border-slate-200 bg-white px-8 py-6">
|
||||
<div>
|
||||
<h1 className="font-heading text-2xl font-semibold text-slate-900 tracking-tight">
|
||||
{resolvedName.trim()
|
||||
<DashboardPageLayout
|
||||
signedOut={{
|
||||
message: "Sign in to edit a gateway.",
|
||||
forceRedirectUrl: `/gateways/${gatewayId}/edit`,
|
||||
}}
|
||||
title={
|
||||
resolvedName.trim()
|
||||
? `Edit gateway — ${resolvedName.trim()}`
|
||||
: "Edit gateway"}
|
||||
</h1>
|
||||
<p className="mt-1 text-sm text-slate-500">
|
||||
Update connection settings for this OpenClaw gateway.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-8">
|
||||
{!isAdmin ? (
|
||||
<AdminOnlyNotice message="Only organization owners and admins can edit gateways." />
|
||||
) : (
|
||||
: "Edit gateway"
|
||||
}
|
||||
description="Update connection settings for this OpenClaw gateway."
|
||||
isAdmin={isAdmin}
|
||||
adminOnlyMessage="Only organization owners and admins can edit gateways."
|
||||
>
|
||||
<GatewayForm
|
||||
name={resolvedName}
|
||||
gatewayUrl={resolvedGatewayUrl}
|
||||
@@ -230,10 +214,6 @@ export default function EditGatewayPage() {
|
||||
}}
|
||||
onWorkspaceRootChange={setWorkspaceRoot}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</main>
|
||||
</SignedIn>
|
||||
</DashboardShell>
|
||||
</DashboardPageLayout>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -5,7 +5,7 @@ export const dynamic = "force-dynamic";
|
||||
import { useMemo } from "react";
|
||||
import { useParams, useRouter } from "next/navigation";
|
||||
|
||||
import { SignedIn, SignedOut, useAuth } from "@/auth/clerk";
|
||||
import { useAuth } from "@/auth/clerk";
|
||||
|
||||
import { ApiError } from "@/api/mutator";
|
||||
import {
|
||||
@@ -19,10 +19,7 @@ import {
|
||||
useListAgentsApiV1AgentsGet,
|
||||
} from "@/api/generated/agents/agents";
|
||||
import { useOrganizationMembership } from "@/lib/use-organization-membership";
|
||||
import { AdminOnlyNotice } from "@/components/auth/AdminOnlyNotice";
|
||||
import { SignedOutPanel } from "@/components/auth/SignedOutPanel";
|
||||
import { DashboardSidebar } from "@/components/organisms/DashboardSidebar";
|
||||
import { DashboardShell } from "@/components/templates/DashboardShell";
|
||||
import { DashboardPageLayout } from "@/components/templates/DashboardPageLayout";
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
||||
const formatTimestamp = (value?: string | null) => {
|
||||
@@ -113,48 +110,29 @@ export default function GatewayDetailPage() {
|
||||
);
|
||||
|
||||
return (
|
||||
<DashboardShell>
|
||||
<SignedOut>
|
||||
<SignedOutPanel
|
||||
message="Sign in to view a gateway."
|
||||
forceRedirectUrl={`/gateways/${gatewayId}`}
|
||||
/>
|
||||
</SignedOut>
|
||||
<SignedIn>
|
||||
<DashboardSidebar />
|
||||
<main className="flex-1 overflow-y-auto bg-slate-50">
|
||||
<div className="border-b border-slate-200 bg-white px-8 py-6">
|
||||
<div className="flex flex-wrap items-center justify-between gap-4">
|
||||
<div>
|
||||
<h1 className="font-heading text-2xl font-semibold text-slate-900 tracking-tight">
|
||||
{title}
|
||||
</h1>
|
||||
<p className="mt-1 text-sm text-slate-500">
|
||||
Gateway configuration and connection details.
|
||||
</p>
|
||||
</div>
|
||||
<DashboardPageLayout
|
||||
signedOut={{
|
||||
message: "Sign in to view a gateway.",
|
||||
forceRedirectUrl: `/gateways/${gatewayId}`,
|
||||
}}
|
||||
title={title}
|
||||
description="Gateway configuration and connection details."
|
||||
headerActions={
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => router.push("/gateways")}
|
||||
>
|
||||
<Button variant="outline" onClick={() => router.push("/gateways")}>
|
||||
Back to gateways
|
||||
</Button>
|
||||
{isAdmin && gatewayId ? (
|
||||
<Button
|
||||
onClick={() => router.push(`/gateways/${gatewayId}/edit`)}
|
||||
>
|
||||
<Button onClick={() => router.push(`/gateways/${gatewayId}/edit`)}>
|
||||
Edit gateway
|
||||
</Button>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-8">
|
||||
{!isAdmin ? (
|
||||
<AdminOnlyNotice message="Only organization owners and admins can access gateways." />
|
||||
) : gatewayQuery.isLoading ? (
|
||||
}
|
||||
isAdmin={isAdmin}
|
||||
adminOnlyMessage="Only organization owners and admins can access gateways."
|
||||
>
|
||||
{gatewayQuery.isLoading ? (
|
||||
<div className="rounded-xl border border-slate-200 bg-white p-6 text-sm text-slate-500 shadow-sm">
|
||||
Loading gateway…
|
||||
</div>
|
||||
@@ -314,9 +292,6 @@ export default function GatewayDetailPage() {
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
</main>
|
||||
</SignedIn>
|
||||
</DashboardShell>
|
||||
</DashboardPageLayout>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -5,16 +5,13 @@ export const dynamic = "force-dynamic";
|
||||
import { useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
import { SignedIn, SignedOut, useAuth } from "@/auth/clerk";
|
||||
import { useAuth } from "@/auth/clerk";
|
||||
|
||||
import { ApiError } from "@/api/mutator";
|
||||
import { useCreateGatewayApiV1GatewaysPost } from "@/api/generated/gateways/gateways";
|
||||
import { useOrganizationMembership } from "@/lib/use-organization-membership";
|
||||
import { AdminOnlyNotice } from "@/components/auth/AdminOnlyNotice";
|
||||
import { SignedOutPanel } from "@/components/auth/SignedOutPanel";
|
||||
import { GatewayForm } from "@/components/gateways/GatewayForm";
|
||||
import { DashboardSidebar } from "@/components/organisms/DashboardSidebar";
|
||||
import { DashboardShell } from "@/components/templates/DashboardShell";
|
||||
import { DashboardPageLayout } from "@/components/templates/DashboardPageLayout";
|
||||
import {
|
||||
DEFAULT_MAIN_SESSION_KEY,
|
||||
DEFAULT_WORKSPACE_ROOT,
|
||||
@@ -125,31 +122,16 @@ export default function NewGatewayPage() {
|
||||
};
|
||||
|
||||
return (
|
||||
<DashboardShell>
|
||||
<SignedOut>
|
||||
<SignedOutPanel
|
||||
message="Sign in to create a gateway."
|
||||
forceRedirectUrl="/gateways/new"
|
||||
/>
|
||||
</SignedOut>
|
||||
<SignedIn>
|
||||
<DashboardSidebar />
|
||||
<main className="flex-1 overflow-y-auto bg-slate-50">
|
||||
<div className="border-b border-slate-200 bg-white px-8 py-6">
|
||||
<div>
|
||||
<h1 className="font-heading text-2xl font-semibold text-slate-900 tracking-tight">
|
||||
Create gateway
|
||||
</h1>
|
||||
<p className="mt-1 text-sm text-slate-500">
|
||||
Configure an OpenClaw gateway for mission control.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-8">
|
||||
{!isAdmin ? (
|
||||
<AdminOnlyNotice message="Only organization owners and admins can create gateways." />
|
||||
) : (
|
||||
<DashboardPageLayout
|
||||
signedOut={{
|
||||
message: "Sign in to create a gateway.",
|
||||
forceRedirectUrl: "/gateways/new",
|
||||
}}
|
||||
title="Create gateway"
|
||||
description="Configure an OpenClaw gateway for mission control."
|
||||
isAdmin={isAdmin}
|
||||
adminOnlyMessage="Only organization owners and admins can create gateways."
|
||||
>
|
||||
<GatewayForm
|
||||
name={name}
|
||||
gatewayUrl={gatewayUrl}
|
||||
@@ -189,10 +171,6 @@ export default function NewGatewayPage() {
|
||||
}}
|
||||
onWorkspaceRootChange={setWorkspaceRoot}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</main>
|
||||
</SignedIn>
|
||||
</DashboardShell>
|
||||
</DashboardPageLayout>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -5,7 +5,7 @@ export const dynamic = "force-dynamic";
|
||||
import { useMemo, useState } from "react";
|
||||
import Link from "next/link";
|
||||
|
||||
import { SignedIn, SignedOut, useAuth } from "@/auth/clerk";
|
||||
import { useAuth } from "@/auth/clerk";
|
||||
import {
|
||||
type ColumnDef,
|
||||
type SortingState,
|
||||
@@ -16,8 +16,7 @@ import {
|
||||
} from "@tanstack/react-table";
|
||||
import { useQueryClient } from "@tanstack/react-query";
|
||||
|
||||
import { DashboardSidebar } from "@/components/organisms/DashboardSidebar";
|
||||
import { DashboardShell } from "@/components/templates/DashboardShell";
|
||||
import { DashboardPageLayout } from "@/components/templates/DashboardPageLayout";
|
||||
import { Button, buttonVariants } from "@/components/ui/button";
|
||||
import {
|
||||
Dialog,
|
||||
@@ -37,8 +36,6 @@ import {
|
||||
} from "@/api/generated/gateways/gateways";
|
||||
import { useOrganizationMembership } from "@/lib/use-organization-membership";
|
||||
import type { GatewayRead } from "@/api/generated/model";
|
||||
import { AdminOnlyNotice } from "@/components/auth/AdminOnlyNotice";
|
||||
import { SignedOutPanel } from "@/components/auth/SignedOutPanel";
|
||||
|
||||
const truncate = (value?: string | null, max = 24) => {
|
||||
if (!value) return "—";
|
||||
@@ -220,28 +217,16 @@ export default function GatewaysPage() {
|
||||
});
|
||||
|
||||
return (
|
||||
<DashboardShell>
|
||||
<SignedOut>
|
||||
<SignedOutPanel
|
||||
message="Sign in to view gateways."
|
||||
forceRedirectUrl="/gateways"
|
||||
/>
|
||||
</SignedOut>
|
||||
<SignedIn>
|
||||
<DashboardSidebar />
|
||||
<main className="flex-1 overflow-y-auto bg-slate-50">
|
||||
<div className="sticky top-0 z-30 border-b border-slate-200 bg-white">
|
||||
<div className="px-8 py-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-semibold tracking-tight text-slate-900">
|
||||
Gateways
|
||||
</h1>
|
||||
<p className="mt-1 text-sm text-slate-500">
|
||||
Manage OpenClaw gateway connections used by boards
|
||||
</p>
|
||||
</div>
|
||||
{isAdmin && gateways.length > 0 ? (
|
||||
<>
|
||||
<DashboardPageLayout
|
||||
signedOut={{
|
||||
message: "Sign in to view gateways.",
|
||||
forceRedirectUrl: "/gateways",
|
||||
}}
|
||||
title="Gateways"
|
||||
description="Manage OpenClaw gateway connections used by boards"
|
||||
headerActions={
|
||||
isAdmin && gateways.length > 0 ? (
|
||||
<Link
|
||||
href="/gateways/new"
|
||||
className={buttonVariants({
|
||||
@@ -251,16 +236,12 @@ export default function GatewaysPage() {
|
||||
>
|
||||
Create gateway
|
||||
</Link>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-8">
|
||||
{!isAdmin ? (
|
||||
<AdminOnlyNotice message="Only organization owners and admins can access gateways." />
|
||||
) : (
|
||||
<>
|
||||
) : null
|
||||
}
|
||||
isAdmin={isAdmin}
|
||||
adminOnlyMessage="Only organization owners and admins can access gateways."
|
||||
stickyHeader
|
||||
>
|
||||
<div className="overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-left text-sm">
|
||||
@@ -284,9 +265,7 @@ export default function GatewaysPage() {
|
||||
{gatewaysQuery.isLoading ? (
|
||||
<tr>
|
||||
<td colSpan={columns.length} className="px-6 py-8">
|
||||
<span className="text-sm text-slate-500">
|
||||
Loading…
|
||||
</span>
|
||||
<span className="text-sm text-slate-500">Loading…</span>
|
||||
</td>
|
||||
</tr>
|
||||
) : table.getRowModel().rows.length ? (
|
||||
@@ -331,8 +310,8 @@ export default function GatewaysPage() {
|
||||
No gateways yet
|
||||
</h3>
|
||||
<p className="mb-6 max-w-md text-sm text-slate-500">
|
||||
Create your first gateway to connect boards
|
||||
and start managing your OpenClaw connections.
|
||||
Create your first gateway to connect boards and start
|
||||
managing your OpenClaw connections.
|
||||
</p>
|
||||
<Link
|
||||
href="/gateways/new"
|
||||
@@ -353,15 +332,9 @@ export default function GatewaysPage() {
|
||||
</div>
|
||||
|
||||
{gatewaysQuery.error ? (
|
||||
<p className="mt-4 text-sm text-red-500">
|
||||
{gatewaysQuery.error.message}
|
||||
</p>
|
||||
<p className="mt-4 text-sm text-red-500">{gatewaysQuery.error.message}</p>
|
||||
) : null}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</main>
|
||||
</SignedIn>
|
||||
</DashboardPageLayout>
|
||||
|
||||
<Dialog
|
||||
open={Boolean(deleteTarget)}
|
||||
@@ -390,6 +363,6 @@ export default function GatewaysPage() {
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</DashboardShell>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
117
frontend/src/components/templates/DashboardPageLayout.tsx
Normal file
117
frontend/src/components/templates/DashboardPageLayout.tsx
Normal file
@@ -0,0 +1,117 @@
|
||||
import type { ReactNode, Ref } from "react";
|
||||
|
||||
import { SignedIn, SignedOut } from "@/auth/clerk";
|
||||
|
||||
import { AdminOnlyNotice } from "@/components/auth/AdminOnlyNotice";
|
||||
import { SignedOutPanel } from "@/components/auth/SignedOutPanel";
|
||||
import { DashboardSidebar } from "@/components/organisms/DashboardSidebar";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
import { DashboardShell } from "./DashboardShell";
|
||||
|
||||
type SignedOutConfig = {
|
||||
message: string;
|
||||
forceRedirectUrl: string;
|
||||
signUpForceRedirectUrl?: string;
|
||||
mode?: "modal" | "redirect";
|
||||
buttonLabel?: string;
|
||||
buttonTestId?: string;
|
||||
};
|
||||
|
||||
type DashboardPageLayoutProps = {
|
||||
signedOut: SignedOutConfig;
|
||||
title: ReactNode;
|
||||
description?: ReactNode;
|
||||
headerActions?: ReactNode;
|
||||
children: ReactNode;
|
||||
isAdmin?: boolean;
|
||||
adminOnlyMessage?: string;
|
||||
stickyHeader?: boolean;
|
||||
mainClassName?: string;
|
||||
headerClassName?: string;
|
||||
contentClassName?: string;
|
||||
mainRef?: Ref<HTMLElement>;
|
||||
};
|
||||
|
||||
export function DashboardPageLayout({
|
||||
signedOut,
|
||||
title,
|
||||
description,
|
||||
headerActions,
|
||||
children,
|
||||
isAdmin,
|
||||
adminOnlyMessage,
|
||||
stickyHeader = false,
|
||||
mainClassName,
|
||||
headerClassName,
|
||||
contentClassName,
|
||||
mainRef,
|
||||
}: DashboardPageLayoutProps) {
|
||||
const showAdminOnlyNotice =
|
||||
typeof isAdmin === "boolean" && Boolean(adminOnlyMessage) && !isAdmin;
|
||||
|
||||
return (
|
||||
<DashboardShell>
|
||||
<SignedOut>
|
||||
<SignedOutPanel
|
||||
message={signedOut.message}
|
||||
forceRedirectUrl={signedOut.forceRedirectUrl}
|
||||
signUpForceRedirectUrl={signedOut.signUpForceRedirectUrl}
|
||||
mode={signedOut.mode}
|
||||
buttonLabel={signedOut.buttonLabel}
|
||||
buttonTestId={signedOut.buttonTestId}
|
||||
/>
|
||||
</SignedOut>
|
||||
<SignedIn>
|
||||
<DashboardSidebar />
|
||||
<main
|
||||
ref={mainRef}
|
||||
className={cn("flex-1 overflow-y-auto bg-slate-50", mainClassName)}
|
||||
>
|
||||
<div
|
||||
className={cn(
|
||||
"border-b border-slate-200 bg-white",
|
||||
stickyHeader && "sticky top-0 z-30",
|
||||
headerClassName,
|
||||
)}
|
||||
>
|
||||
<div className="px-8 py-6">
|
||||
{headerActions ? (
|
||||
<div className="flex flex-wrap items-center justify-between gap-4">
|
||||
<div>
|
||||
<h1 className="font-heading text-2xl font-semibold tracking-tight text-slate-900">
|
||||
{title}
|
||||
</h1>
|
||||
{description ? (
|
||||
<p className="mt-1 text-sm text-slate-500">
|
||||
{description}
|
||||
</p>
|
||||
) : null}
|
||||
</div>
|
||||
{headerActions}
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
<h1 className="font-heading text-2xl font-semibold tracking-tight text-slate-900">
|
||||
{title}
|
||||
</h1>
|
||||
{description ? (
|
||||
<p className="mt-1 text-sm text-slate-500">{description}</p>
|
||||
) : null}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={cn("p-8", contentClassName)}>
|
||||
{showAdminOnlyNotice ? (
|
||||
<AdminOnlyNotice message={adminOnlyMessage ?? ""} />
|
||||
) : (
|
||||
children
|
||||
)}
|
||||
</div>
|
||||
</main>
|
||||
</SignedIn>
|
||||
</DashboardShell>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user