feat: add organization-related models and update schemas for organization management
This commit is contained in:
Abhimanyu Saharan
240
frontend/src/components/organisms/OrgSwitcher.tsx
Normal file
240
frontend/src/components/organisms/OrgSwitcher.tsx
Normal file
@@ -0,0 +1,240 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { useQueryClient } from "@tanstack/react-query";
|
||||
import { Building2, Plus } from "lucide-react";
|
||||
|
||||
import { useAuth } from "@/auth/clerk";
|
||||
import { ApiError } from "@/api/mutator";
|
||||
import {
|
||||
type listMyOrganizationsApiV1OrganizationsMeListGetResponse,
|
||||
useCreateOrganizationApiV1OrganizationsPost,
|
||||
useListMyOrganizationsApiV1OrganizationsMeListGet,
|
||||
useSetActiveOrgApiV1OrganizationsMeActivePatch,
|
||||
} from "@/api/generated/organizations/organizations";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectSeparator,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
|
||||
export function OrgSwitcher() {
|
||||
const { isSignedIn } = useAuth();
|
||||
const queryClient = useQueryClient();
|
||||
const [createOpen, setCreateOpen] = useState(false);
|
||||
const [orgName, setOrgName] = useState("");
|
||||
const [orgError, setOrgError] = useState<string | null>(null);
|
||||
const channelRef = useRef<BroadcastChannel | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (typeof window === "undefined") return;
|
||||
if (!("BroadcastChannel" in window)) return;
|
||||
const channel = new BroadcastChannel("org-switch");
|
||||
channelRef.current = channel;
|
||||
return () => {
|
||||
channel.close();
|
||||
channelRef.current = null;
|
||||
};
|
||||
}, []);
|
||||
|
||||
const orgsQuery = useListMyOrganizationsApiV1OrganizationsMeListGet<
|
||||
listMyOrganizationsApiV1OrganizationsMeListGetResponse,
|
||||
ApiError
|
||||
>({
|
||||
query: {
|
||||
enabled: Boolean(isSignedIn),
|
||||
refetchOnMount: "always",
|
||||
retry: false,
|
||||
},
|
||||
});
|
||||
const orgs = orgsQuery.data?.status === 200 ? orgsQuery.data.data : [];
|
||||
const activeOrg = orgs.find((item) => item.is_active) ?? null;
|
||||
const orgValue = activeOrg?.id ?? "personal";
|
||||
|
||||
const announceOrgSwitch = (orgId: string) => {
|
||||
if (typeof window === "undefined") return;
|
||||
const payload = JSON.stringify({ orgId, ts: Date.now() });
|
||||
try {
|
||||
window.localStorage.setItem("openclaw_org_switch", payload);
|
||||
} catch {
|
||||
// Ignore storage failures.
|
||||
}
|
||||
channelRef.current?.postMessage(payload);
|
||||
};
|
||||
|
||||
const setActiveOrgMutation =
|
||||
useSetActiveOrgApiV1OrganizationsMeActivePatch<ApiError>({
|
||||
mutation: {
|
||||
onSuccess: (_result, variables) => {
|
||||
const orgId = variables?.data?.organization_id;
|
||||
if (orgId) {
|
||||
announceOrgSwitch(orgId);
|
||||
}
|
||||
window.location.reload();
|
||||
},
|
||||
onError: (err) => {
|
||||
setOrgError(err.message || "Unable to switch organization.");
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const createOrgMutation = useCreateOrganizationApiV1OrganizationsPost<ApiError>(
|
||||
{
|
||||
mutation: {
|
||||
onSuccess: () => {
|
||||
setOrgName("");
|
||||
setOrgError(null);
|
||||
setCreateOpen(false);
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: ["/api/v1/organizations/me/list"],
|
||||
});
|
||||
if (typeof window !== "undefined") {
|
||||
announceOrgSwitch("new");
|
||||
}
|
||||
window.location.reload();
|
||||
},
|
||||
onError: (err) => {
|
||||
setOrgError(err.message || "Unable to create organization.");
|
||||
},
|
||||
},
|
||||
},
|
||||
);
|
||||
|
||||
const handleOrgChange = (value: string) => {
|
||||
if (value === "__create__") {
|
||||
setOrgError(null);
|
||||
setCreateOpen(true);
|
||||
return;
|
||||
}
|
||||
if (!value || value === orgValue) {
|
||||
return;
|
||||
}
|
||||
setActiveOrgMutation.mutate({
|
||||
data: { organization_id: value },
|
||||
});
|
||||
};
|
||||
|
||||
const handleCreateOrg = () => {
|
||||
const trimmed = orgName.trim();
|
||||
if (!trimmed) {
|
||||
setOrgError("Organization name is required.");
|
||||
return;
|
||||
}
|
||||
createOrgMutation.mutate({
|
||||
data: { name: trimmed },
|
||||
});
|
||||
};
|
||||
|
||||
if (!isSignedIn) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="relative">
|
||||
<Select value={orgValue} onValueChange={handleOrgChange}>
|
||||
<SelectTrigger className="h-9 w-[220px] rounded-md border-slate-200 bg-white px-3 text-sm font-medium text-slate-900 shadow-none focus:ring-2 focus:ring-blue-500/30 focus:ring-offset-0">
|
||||
<span className="flex items-center gap-2">
|
||||
<Building2 className="h-4 w-4 text-slate-400" />
|
||||
<SelectValue placeholder="Select organization" />
|
||||
</span>
|
||||
</SelectTrigger>
|
||||
<SelectContent className="min-w-[220px] rounded-md border-slate-200 p-1 shadow-xl">
|
||||
<div className="px-3 pb-2 pt-2 text-[10px] font-semibold uppercase tracking-wide text-slate-400">
|
||||
Org switcher
|
||||
</div>
|
||||
{orgs.length ? (
|
||||
orgs.map((org) => (
|
||||
<SelectItem
|
||||
key={org.id}
|
||||
value={org.id}
|
||||
className="rounded-md py-2 pl-7 pr-3 text-sm text-slate-700 data-[state=checked]:bg-slate-50 data-[state=checked]:text-slate-900 focus:bg-slate-100"
|
||||
>
|
||||
{org.name}
|
||||
</SelectItem>
|
||||
))
|
||||
) : (
|
||||
<SelectItem
|
||||
value={orgValue}
|
||||
className="rounded-md py-2 pl-7 pr-3 text-sm text-slate-700"
|
||||
>
|
||||
Organization
|
||||
</SelectItem>
|
||||
)}
|
||||
<SelectSeparator className="my-2" />
|
||||
<SelectItem
|
||||
value="__create__"
|
||||
className="rounded-md py-2 pl-3 pr-3 text-sm font-medium text-slate-600 hover:text-slate-900 focus:bg-slate-100 [&>span:first-child]:hidden"
|
||||
>
|
||||
<span className="flex items-center gap-2">
|
||||
<Plus className="h-4 w-4 text-slate-400" />
|
||||
Create new org
|
||||
</span>
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
{orgError && !createOpen ? (
|
||||
<p className="absolute left-0 top-full mt-1 text-xs text-rose-500">
|
||||
{orgError}
|
||||
</p>
|
||||
) : null}
|
||||
|
||||
<Dialog open={createOpen} onOpenChange={setCreateOpen}>
|
||||
<DialogContent aria-label="Create organization">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Create a new organization</DialogTitle>
|
||||
<DialogDescription>
|
||||
This will switch you to the new organization as soon as it is
|
||||
created.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="mt-4 space-y-2">
|
||||
<label
|
||||
htmlFor="org-name"
|
||||
className="text-xs font-semibold uppercase tracking-wide text-muted"
|
||||
>
|
||||
Organization name
|
||||
</label>
|
||||
<Input
|
||||
id="org-name"
|
||||
placeholder="Acme Robotics"
|
||||
value={orgName}
|
||||
onChange={(event) => setOrgName(event.target.value)}
|
||||
/>
|
||||
{orgError ? (
|
||||
<p className="text-sm text-rose-500">{orgError}</p>
|
||||
) : null}
|
||||
</div>
|
||||
<DialogFooter className="mt-6">
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
onClick={() => setCreateOpen(false)}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
onClick={handleCreateOrg}
|
||||
disabled={createOrgMutation.isPending}
|
||||
>
|
||||
{createOrgMutation.isPending ? "Creating..." : "Create org"}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user