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,36 +152,21 @@ 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." />
|
||||
) : (
|
||||
<form
|
||||
onSubmit={handleSubmit}
|
||||
className="rounded-xl border border-slate-200 bg-white p-6 shadow-sm space-y-6"
|
||||
>
|
||||
<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"
|
||||
>
|
||||
<div>
|
||||
<p className="text-xs font-semibold uppercase tracking-wider text-slate-500">
|
||||
Basic configuration
|
||||
@@ -372,11 +354,7 @@ export default function NewAgentPage() {
|
||||
Back to agents
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
</main>
|
||||
</SignedIn>
|
||||
</DashboardShell>
|
||||
</form>
|
||||
</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,138 +286,112 @@ 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>
|
||||
<>
|
||||
<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">
|
||||
<thead className="sticky top-0 z-10 bg-slate-50 text-xs font-semibold uppercase tracking-wider text-slate-500">
|
||||
{table.getHeaderGroups().map((headerGroup) => (
|
||||
<tr key={headerGroup.id}>
|
||||
{headerGroup.headers.map((header) => (
|
||||
<th key={header.id} className="px-6 py-3">
|
||||
{header.isPlaceholder
|
||||
? null
|
||||
: flexRender(
|
||||
header.column.columnDef.header,
|
||||
header.getContext(),
|
||||
)}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
))}
|
||||
</thead>
|
||||
<tbody className="divide-y divide-slate-100">
|
||||
{agentsQuery.isLoading ? (
|
||||
<tr>
|
||||
<td colSpan={columns.length} className="px-6 py-8">
|
||||
<span className="text-sm text-slate-500">Loading…</span>
|
||||
</td>
|
||||
</tr>
|
||||
) : table.getRowModel().rows.length ? (
|
||||
table.getRowModel().rows.map((row) => (
|
||||
<tr key={row.id} className="hover:bg-slate-50">
|
||||
{row.getVisibleCells().map((cell) => (
|
||||
<td key={cell.id} className="px-6 py-4">
|
||||
{flexRender(
|
||||
cell.column.columnDef.cell,
|
||||
cell.getContext(),
|
||||
)}
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
))
|
||||
) : (
|
||||
<tr>
|
||||
<td colSpan={columns.length} className="px-6 py-16">
|
||||
<div className="flex flex-col items-center justify-center text-center">
|
||||
<div className="mb-4 rounded-full bg-slate-50 p-4">
|
||||
<svg
|
||||
className="h-16 w-16 text-slate-300"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
|
||||
<circle cx="9" cy="7" r="4" />
|
||||
<path d="M22 21v-2a4 4 0 0 0-3-3.87" />
|
||||
<path d="M16 3.13a4 4 0 0 1 0 7.75" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="mb-2 text-lg font-semibold text-slate-900">
|
||||
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.
|
||||
</p>
|
||||
<Link
|
||||
href="/agents/new"
|
||||
className={buttonVariants({
|
||||
size: "md",
|
||||
variant: "primary",
|
||||
})}
|
||||
>
|
||||
Create your first agent
|
||||
</Link>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-8">
|
||||
{!isAdmin ? (
|
||||
<AdminOnlyNotice message="Only organization owners and admins can access agents." />
|
||||
) : (
|
||||
<>
|
||||
<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">
|
||||
<thead className="sticky top-0 z-10 bg-slate-50 text-xs font-semibold uppercase tracking-wider text-slate-500">
|
||||
{table.getHeaderGroups().map((headerGroup) => (
|
||||
<tr key={headerGroup.id}>
|
||||
{headerGroup.headers.map((header) => (
|
||||
<th key={header.id} className="px-6 py-3">
|
||||
{header.isPlaceholder
|
||||
? null
|
||||
: flexRender(
|
||||
header.column.columnDef.header,
|
||||
header.getContext(),
|
||||
)}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
))}
|
||||
</thead>
|
||||
<tbody className="divide-y divide-slate-100">
|
||||
{agentsQuery.isLoading ? (
|
||||
<tr>
|
||||
<td colSpan={columns.length} className="px-6 py-8">
|
||||
<span className="text-sm text-slate-500">
|
||||
Loading…
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
) : table.getRowModel().rows.length ? (
|
||||
table.getRowModel().rows.map((row) => (
|
||||
<tr key={row.id} className="hover:bg-slate-50">
|
||||
{row.getVisibleCells().map((cell) => (
|
||||
<td key={cell.id} className="px-6 py-4">
|
||||
{flexRender(
|
||||
cell.column.columnDef.cell,
|
||||
cell.getContext(),
|
||||
)}
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
))
|
||||
) : (
|
||||
<tr>
|
||||
<td colSpan={columns.length} className="px-6 py-16">
|
||||
<div className="flex flex-col items-center justify-center text-center">
|
||||
<div className="mb-4 rounded-full bg-slate-50 p-4">
|
||||
<svg
|
||||
className="h-16 w-16 text-slate-300"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
|
||||
<circle cx="9" cy="7" r="4" />
|
||||
<path d="M22 21v-2a4 4 0 0 0-3-3.87" />
|
||||
<path d="M16 3.13a4 4 0 0 1 0 7.75" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="mb-2 text-lg font-semibold text-slate-900">
|
||||
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.
|
||||
</p>
|
||||
<Link
|
||||
href="/agents/new"
|
||||
className={buttonVariants({
|
||||
size: "md",
|
||||
variant: "primary",
|
||||
})}
|
||||
>
|
||||
Create your first agent
|
||||
</Link>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{agentsQuery.error ? (
|
||||
<p className="mt-4 text-sm text-red-500">
|
||||
{agentsQuery.error.message}
|
||||
</p>
|
||||
) : null}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</main>
|
||||
</SignedIn>
|
||||
{agentsQuery.error ? (
|
||||
<p className="mt-4 text-sm text-red-500">{agentsQuery.error.message}</p>
|
||||
) : null}
|
||||
</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,37 +290,23 @@ 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." />
|
||||
) : (
|
||||
<div className="space-y-6">
|
||||
<form
|
||||
onSubmit={handleSubmit}
|
||||
className="space-y-6 rounded-xl border border-slate-200 bg-white p-6 shadow-sm"
|
||||
>
|
||||
<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}
|
||||
className="space-y-6 rounded-xl border border-slate-200 bg-white p-6 shadow-sm"
|
||||
>
|
||||
{resolvedBoardType !== "general" &&
|
||||
baseBoard &&
|
||||
!(baseBoard.goal_confirmed ?? false) ? (
|
||||
@@ -496,13 +479,9 @@ export default function EditBoardPage() {
|
||||
{isLoading ? "Saving…" : "Save changes"}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</main>
|
||||
</SignedIn>
|
||||
</DashboardShell>
|
||||
</form>
|
||||
</div>
|
||||
</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,130 +138,109 @@ 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>
|
||||
<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"
|
||||
>
|
||||
<div className="space-y-4">
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-slate-900">
|
||||
Board name <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<Input
|
||||
value={name}
|
||||
onChange={(event) => setName(event.target.value)}
|
||||
placeholder="e.g. Release operations"
|
||||
disabled={isLoading}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-slate-900">
|
||||
Gateway <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<SearchableSelect
|
||||
ariaLabel="Select gateway"
|
||||
value={displayGatewayId}
|
||||
onValueChange={setGatewayId}
|
||||
options={gatewayOptions}
|
||||
placeholder="Select gateway"
|
||||
searchPlaceholder="Search gateways..."
|
||||
emptyMessage="No gateways found."
|
||||
triggerClassName="w-full h-11 rounded-xl border border-slate-300 bg-white px-3 py-2 text-sm font-medium text-slate-900 shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-200"
|
||||
contentClassName="rounded-xl border border-slate-200 shadow-lg"
|
||||
itemClassName="px-4 py-3 text-sm text-slate-700 data-[selected=true]:bg-slate-50 data-[selected=true]:text-slate-900"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-8">
|
||||
{!isAdmin ? (
|
||||
<AdminOnlyNotice message="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"
|
||||
>
|
||||
<div className="space-y-4">
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-slate-900">
|
||||
Board name <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<Input
|
||||
value={name}
|
||||
onChange={(event) => setName(event.target.value)}
|
||||
placeholder="e.g. Release operations"
|
||||
disabled={isLoading}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-slate-900">
|
||||
Gateway <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<SearchableSelect
|
||||
ariaLabel="Select gateway"
|
||||
value={displayGatewayId}
|
||||
onValueChange={setGatewayId}
|
||||
options={gatewayOptions}
|
||||
placeholder="Select gateway"
|
||||
searchPlaceholder="Search gateways..."
|
||||
emptyMessage="No gateways found."
|
||||
triggerClassName="w-full h-11 rounded-xl border border-slate-300 bg-white px-3 py-2 text-sm font-medium text-slate-900 shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-200"
|
||||
contentClassName="rounded-xl border border-slate-200 shadow-lg"
|
||||
itemClassName="px-4 py-3 text-sm text-slate-700 data-[selected=true]:bg-slate-50 data-[selected=true]:text-slate-900"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-slate-900">
|
||||
Board group
|
||||
</label>
|
||||
<SearchableSelect
|
||||
ariaLabel="Select board group"
|
||||
value={boardGroupId}
|
||||
onValueChange={setBoardGroupId}
|
||||
options={groupOptions}
|
||||
placeholder="No group"
|
||||
searchPlaceholder="Search groups..."
|
||||
emptyMessage="No groups found."
|
||||
triggerClassName="w-full h-11 rounded-xl border border-slate-300 bg-white px-3 py-2 text-sm font-medium text-slate-900 shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-200"
|
||||
contentClassName="rounded-xl border border-slate-200 shadow-lg"
|
||||
itemClassName="px-4 py-3 text-sm text-slate-700 data-[selected=true]:bg-slate-50 data-[selected=true]:text-slate-900"
|
||||
disabled={isLoading}
|
||||
/>
|
||||
<p className="text-xs text-slate-500">
|
||||
Optional. Groups increase cross-board visibility.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{gateways.length === 0 ? (
|
||||
<div className="rounded-lg border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-600">
|
||||
<p>
|
||||
No gateways available. Create one in{" "}
|
||||
<Link
|
||||
href="/gateways"
|
||||
className="font-medium text-blue-600 hover:text-blue-700"
|
||||
>
|
||||
Gateways
|
||||
</Link>{" "}
|
||||
to continue.
|
||||
</p>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{errorMessage ? (
|
||||
<p className="text-sm text-red-500">{errorMessage}</p>
|
||||
) : null}
|
||||
|
||||
<div className="flex justify-end gap-3">
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
onClick={() => router.push("/boards")}
|
||||
disabled={isLoading}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type="submit" disabled={isLoading || !isFormReady}>
|
||||
{isLoading ? "Creating…" : "Create board"}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-slate-900">
|
||||
Board group
|
||||
</label>
|
||||
<SearchableSelect
|
||||
ariaLabel="Select board group"
|
||||
value={boardGroupId}
|
||||
onValueChange={setBoardGroupId}
|
||||
options={groupOptions}
|
||||
placeholder="No group"
|
||||
searchPlaceholder="Search groups..."
|
||||
emptyMessage="No groups found."
|
||||
triggerClassName="w-full h-11 rounded-xl border border-slate-300 bg-white px-3 py-2 text-sm font-medium text-slate-900 shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-200"
|
||||
contentClassName="rounded-xl border border-slate-200 shadow-lg"
|
||||
itemClassName="px-4 py-3 text-sm text-slate-700 data-[selected=true]:bg-slate-50 data-[selected=true]:text-slate-900"
|
||||
disabled={isLoading}
|
||||
/>
|
||||
<p className="text-xs text-slate-500">
|
||||
Optional. Groups increase cross-board visibility.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</SignedIn>
|
||||
</DashboardShell>
|
||||
</div>
|
||||
|
||||
{gateways.length === 0 ? (
|
||||
<div className="rounded-lg border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-600">
|
||||
<p>
|
||||
No gateways available. Create one in{" "}
|
||||
<Link
|
||||
href="/gateways"
|
||||
className="font-medium text-blue-600 hover:text-blue-700"
|
||||
>
|
||||
Gateways
|
||||
</Link>{" "}
|
||||
to continue.
|
||||
</p>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{errorMessage ? <p className="text-sm text-red-500">{errorMessage}</p> : null}
|
||||
|
||||
<div className="flex justify-end gap-3">
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
onClick={() => router.push("/boards")}
|
||||
disabled={isLoading}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type="submit" disabled={isLoading || !isFormReady}>
|
||||
{isLoading ? "Creating…" : "Create board"}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</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,76 +161,59 @@ 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()
|
||||
? `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." />
|
||||
) : (
|
||||
<GatewayForm
|
||||
name={resolvedName}
|
||||
gatewayUrl={resolvedGatewayUrl}
|
||||
gatewayToken={resolvedGatewayToken}
|
||||
mainSessionKey={resolvedMainSessionKey}
|
||||
workspaceRoot={resolvedWorkspaceRoot}
|
||||
gatewayUrlError={gatewayUrlError}
|
||||
gatewayCheckStatus={gatewayCheckStatus}
|
||||
gatewayCheckMessage={gatewayCheckMessage}
|
||||
errorMessage={errorMessage}
|
||||
isLoading={isLoading}
|
||||
canSubmit={canSubmit}
|
||||
mainSessionKeyPlaceholder={DEFAULT_MAIN_SESSION_KEY}
|
||||
workspaceRootPlaceholder={DEFAULT_WORKSPACE_ROOT}
|
||||
cancelLabel="Back"
|
||||
submitLabel="Save changes"
|
||||
submitBusyLabel="Saving…"
|
||||
onSubmit={handleSubmit}
|
||||
onCancel={() => router.push("/gateways")}
|
||||
onRunGatewayCheck={runGatewayCheck}
|
||||
onNameChange={setName}
|
||||
onGatewayUrlChange={(next) => {
|
||||
setGatewayUrl(next);
|
||||
setGatewayUrlError(null);
|
||||
setGatewayCheckStatus("idle");
|
||||
setGatewayCheckMessage(null);
|
||||
}}
|
||||
onGatewayTokenChange={(next) => {
|
||||
setGatewayToken(next);
|
||||
setGatewayCheckStatus("idle");
|
||||
setGatewayCheckMessage(null);
|
||||
}}
|
||||
onMainSessionKeyChange={(next) => {
|
||||
setMainSessionKey(next);
|
||||
setGatewayCheckStatus("idle");
|
||||
setGatewayCheckMessage(null);
|
||||
}}
|
||||
onWorkspaceRootChange={setWorkspaceRoot}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</main>
|
||||
</SignedIn>
|
||||
</DashboardShell>
|
||||
<DashboardPageLayout
|
||||
signedOut={{
|
||||
message: "Sign in to edit a gateway.",
|
||||
forceRedirectUrl: `/gateways/${gatewayId}/edit`,
|
||||
}}
|
||||
title={
|
||||
resolvedName.trim()
|
||||
? `Edit gateway — ${resolvedName.trim()}`
|
||||
: "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}
|
||||
gatewayToken={resolvedGatewayToken}
|
||||
mainSessionKey={resolvedMainSessionKey}
|
||||
workspaceRoot={resolvedWorkspaceRoot}
|
||||
gatewayUrlError={gatewayUrlError}
|
||||
gatewayCheckStatus={gatewayCheckStatus}
|
||||
gatewayCheckMessage={gatewayCheckMessage}
|
||||
errorMessage={errorMessage}
|
||||
isLoading={isLoading}
|
||||
canSubmit={canSubmit}
|
||||
mainSessionKeyPlaceholder={DEFAULT_MAIN_SESSION_KEY}
|
||||
workspaceRootPlaceholder={DEFAULT_WORKSPACE_ROOT}
|
||||
cancelLabel="Back"
|
||||
submitLabel="Save changes"
|
||||
submitBusyLabel="Saving…"
|
||||
onSubmit={handleSubmit}
|
||||
onCancel={() => router.push("/gateways")}
|
||||
onRunGatewayCheck={runGatewayCheck}
|
||||
onNameChange={setName}
|
||||
onGatewayUrlChange={(next) => {
|
||||
setGatewayUrl(next);
|
||||
setGatewayUrlError(null);
|
||||
setGatewayCheckStatus("idle");
|
||||
setGatewayCheckMessage(null);
|
||||
}}
|
||||
onGatewayTokenChange={(next) => {
|
||||
setGatewayToken(next);
|
||||
setGatewayCheckStatus("idle");
|
||||
setGatewayCheckMessage(null);
|
||||
}}
|
||||
onMainSessionKeyChange={(next) => {
|
||||
setMainSessionKey(next);
|
||||
setGatewayCheckStatus("idle");
|
||||
setGatewayCheckMessage(null);
|
||||
}}
|
||||
onWorkspaceRootChange={setWorkspaceRoot}
|
||||
/>
|
||||
</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,57 +110,38 @@ 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>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => router.push("/gateways")}
|
||||
>
|
||||
Back to gateways
|
||||
</Button>
|
||||
{isAdmin && gatewayId ? (
|
||||
<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 ? (
|
||||
<div className="rounded-xl border border-slate-200 bg-white p-6 text-sm text-slate-500 shadow-sm">
|
||||
Loading gateway…
|
||||
</div>
|
||||
) : gatewayQuery.error ? (
|
||||
<div className="rounded-xl border border-rose-200 bg-rose-50 p-6 text-sm text-rose-700">
|
||||
{gatewayQuery.error.message}
|
||||
</div>
|
||||
) : gateway ? (
|
||||
<div className="space-y-6">
|
||||
<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")}>
|
||||
Back to gateways
|
||||
</Button>
|
||||
{isAdmin && gatewayId ? (
|
||||
<Button onClick={() => router.push(`/gateways/${gatewayId}/edit`)}>
|
||||
Edit gateway
|
||||
</Button>
|
||||
) : null}
|
||||
</div>
|
||||
}
|
||||
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>
|
||||
) : gatewayQuery.error ? (
|
||||
<div className="rounded-xl border border-rose-200 bg-rose-50 p-6 text-sm text-rose-700">
|
||||
{gatewayQuery.error.message}
|
||||
</div>
|
||||
) : gateway ? (
|
||||
<div className="space-y-6">
|
||||
<div className="grid gap-6 lg:grid-cols-2">
|
||||
<div className="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
|
||||
<div className="flex items-center justify-between">
|
||||
@@ -312,11 +290,8 @@ export default function GatewayDetailPage() {
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
</main>
|
||||
</SignedIn>
|
||||
</DashboardShell>
|
||||
</div>
|
||||
) : null}
|
||||
</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,74 +122,55 @@ 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." />
|
||||
) : (
|
||||
<GatewayForm
|
||||
name={name}
|
||||
gatewayUrl={gatewayUrl}
|
||||
gatewayToken={gatewayToken}
|
||||
mainSessionKey={mainSessionKey}
|
||||
workspaceRoot={workspaceRoot}
|
||||
gatewayUrlError={gatewayUrlError}
|
||||
gatewayCheckStatus={gatewayCheckStatus}
|
||||
gatewayCheckMessage={gatewayCheckMessage}
|
||||
errorMessage={error}
|
||||
isLoading={isLoading}
|
||||
canSubmit={canSubmit}
|
||||
mainSessionKeyPlaceholder={DEFAULT_MAIN_SESSION_KEY}
|
||||
workspaceRootPlaceholder={DEFAULT_WORKSPACE_ROOT}
|
||||
cancelLabel="Cancel"
|
||||
submitLabel="Create gateway"
|
||||
submitBusyLabel="Creating…"
|
||||
onSubmit={handleSubmit}
|
||||
onCancel={() => router.push("/gateways")}
|
||||
onRunGatewayCheck={runGatewayCheck}
|
||||
onNameChange={setName}
|
||||
onGatewayUrlChange={(next) => {
|
||||
setGatewayUrl(next);
|
||||
setGatewayUrlError(null);
|
||||
setGatewayCheckStatus("idle");
|
||||
setGatewayCheckMessage(null);
|
||||
}}
|
||||
onGatewayTokenChange={(next) => {
|
||||
setGatewayToken(next);
|
||||
setGatewayCheckStatus("idle");
|
||||
setGatewayCheckMessage(null);
|
||||
}}
|
||||
onMainSessionKeyChange={(next) => {
|
||||
setMainSessionKey(next);
|
||||
setGatewayCheckStatus("idle");
|
||||
setGatewayCheckMessage(null);
|
||||
}}
|
||||
onWorkspaceRootChange={setWorkspaceRoot}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</main>
|
||||
</SignedIn>
|
||||
</DashboardShell>
|
||||
<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}
|
||||
gatewayToken={gatewayToken}
|
||||
mainSessionKey={mainSessionKey}
|
||||
workspaceRoot={workspaceRoot}
|
||||
gatewayUrlError={gatewayUrlError}
|
||||
gatewayCheckStatus={gatewayCheckStatus}
|
||||
gatewayCheckMessage={gatewayCheckMessage}
|
||||
errorMessage={error}
|
||||
isLoading={isLoading}
|
||||
canSubmit={canSubmit}
|
||||
mainSessionKeyPlaceholder={DEFAULT_MAIN_SESSION_KEY}
|
||||
workspaceRootPlaceholder={DEFAULT_WORKSPACE_ROOT}
|
||||
cancelLabel="Cancel"
|
||||
submitLabel="Create gateway"
|
||||
submitBusyLabel="Creating…"
|
||||
onSubmit={handleSubmit}
|
||||
onCancel={() => router.push("/gateways")}
|
||||
onRunGatewayCheck={runGatewayCheck}
|
||||
onNameChange={setName}
|
||||
onGatewayUrlChange={(next) => {
|
||||
setGatewayUrl(next);
|
||||
setGatewayUrlError(null);
|
||||
setGatewayCheckStatus("idle");
|
||||
setGatewayCheckMessage(null);
|
||||
}}
|
||||
onGatewayTokenChange={(next) => {
|
||||
setGatewayToken(next);
|
||||
setGatewayCheckStatus("idle");
|
||||
setGatewayCheckMessage(null);
|
||||
}}
|
||||
onMainSessionKeyChange={(next) => {
|
||||
setMainSessionKey(next);
|
||||
setGatewayCheckStatus("idle");
|
||||
setGatewayCheckMessage(null);
|
||||
}}
|
||||
onWorkspaceRootChange={setWorkspaceRoot}
|
||||
/>
|
||||
</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,148 +217,124 @@ 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 ? (
|
||||
<Link
|
||||
href="/gateways/new"
|
||||
className={buttonVariants({
|
||||
size: "md",
|
||||
variant: "primary",
|
||||
})}
|
||||
>
|
||||
Create gateway
|
||||
</Link>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-8">
|
||||
{!isAdmin ? (
|
||||
<AdminOnlyNotice message="Only organization owners and admins can access gateways." />
|
||||
) : (
|
||||
<>
|
||||
<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">
|
||||
<thead className="sticky top-0 z-10 bg-slate-50 text-xs font-semibold uppercase tracking-wider text-slate-500">
|
||||
{table.getHeaderGroups().map((headerGroup) => (
|
||||
<tr key={headerGroup.id}>
|
||||
{headerGroup.headers.map((header) => (
|
||||
<th key={header.id} className="px-6 py-3">
|
||||
{header.isPlaceholder
|
||||
? null
|
||||
: flexRender(
|
||||
header.column.columnDef.header,
|
||||
header.getContext(),
|
||||
)}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
))}
|
||||
</thead>
|
||||
<tbody className="divide-y divide-slate-100">
|
||||
{gatewaysQuery.isLoading ? (
|
||||
<tr>
|
||||
<td colSpan={columns.length} className="px-6 py-8">
|
||||
<span className="text-sm text-slate-500">
|
||||
Loading…
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
) : table.getRowModel().rows.length ? (
|
||||
table.getRowModel().rows.map((row) => (
|
||||
<tr key={row.id} className="hover:bg-slate-50">
|
||||
{row.getVisibleCells().map((cell) => (
|
||||
<td key={cell.id} className="px-6 py-4">
|
||||
{flexRender(
|
||||
cell.column.columnDef.cell,
|
||||
cell.getContext(),
|
||||
)}
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
))
|
||||
) : (
|
||||
<tr>
|
||||
<td colSpan={columns.length} className="px-6 py-16">
|
||||
<div className="flex flex-col items-center justify-center text-center">
|
||||
<div className="mb-4 rounded-full bg-slate-50 p-4">
|
||||
<svg
|
||||
className="h-16 w-16 text-slate-300"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<rect
|
||||
x="2"
|
||||
y="7"
|
||||
width="20"
|
||||
height="14"
|
||||
rx="2"
|
||||
ry="2"
|
||||
/>
|
||||
<path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="mb-2 text-lg font-semibold text-slate-900">
|
||||
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.
|
||||
</p>
|
||||
<Link
|
||||
href="/gateways/new"
|
||||
className={buttonVariants({
|
||||
size: "md",
|
||||
variant: "primary",
|
||||
})}
|
||||
>
|
||||
Create your first gateway
|
||||
</Link>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<>
|
||||
<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({
|
||||
size: "md",
|
||||
variant: "primary",
|
||||
})}
|
||||
>
|
||||
Create gateway
|
||||
</Link>
|
||||
) : 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">
|
||||
<thead className="sticky top-0 z-10 bg-slate-50 text-xs font-semibold uppercase tracking-wider text-slate-500">
|
||||
{table.getHeaderGroups().map((headerGroup) => (
|
||||
<tr key={headerGroup.id}>
|
||||
{headerGroup.headers.map((header) => (
|
||||
<th key={header.id} className="px-6 py-3">
|
||||
{header.isPlaceholder
|
||||
? null
|
||||
: flexRender(
|
||||
header.column.columnDef.header,
|
||||
header.getContext(),
|
||||
)}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
))}
|
||||
</thead>
|
||||
<tbody className="divide-y divide-slate-100">
|
||||
{gatewaysQuery.isLoading ? (
|
||||
<tr>
|
||||
<td colSpan={columns.length} className="px-6 py-8">
|
||||
<span className="text-sm text-slate-500">Loading…</span>
|
||||
</td>
|
||||
</tr>
|
||||
) : table.getRowModel().rows.length ? (
|
||||
table.getRowModel().rows.map((row) => (
|
||||
<tr key={row.id} className="hover:bg-slate-50">
|
||||
{row.getVisibleCells().map((cell) => (
|
||||
<td key={cell.id} className="px-6 py-4">
|
||||
{flexRender(
|
||||
cell.column.columnDef.cell,
|
||||
cell.getContext(),
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
))
|
||||
) : (
|
||||
<tr>
|
||||
<td colSpan={columns.length} className="px-6 py-16">
|
||||
<div className="flex flex-col items-center justify-center text-center">
|
||||
<div className="mb-4 rounded-full bg-slate-50 p-4">
|
||||
<svg
|
||||
className="h-16 w-16 text-slate-300"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<rect
|
||||
x="2"
|
||||
y="7"
|
||||
width="20"
|
||||
height="14"
|
||||
rx="2"
|
||||
ry="2"
|
||||
/>
|
||||
<path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="mb-2 text-lg font-semibold text-slate-900">
|
||||
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.
|
||||
</p>
|
||||
<Link
|
||||
href="/gateways/new"
|
||||
className={buttonVariants({
|
||||
size: "md",
|
||||
variant: "primary",
|
||||
})}
|
||||
>
|
||||
Create your first gateway
|
||||
</Link>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{gatewaysQuery.error ? (
|
||||
<p className="mt-4 text-sm text-red-500">
|
||||
{gatewaysQuery.error.message}
|
||||
</p>
|
||||
) : null}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</main>
|
||||
</SignedIn>
|
||||
{gatewaysQuery.error ? (
|
||||
<p className="mt-4 text-sm text-red-500">{gatewaysQuery.error.message}</p>
|
||||
) : null}
|
||||
</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