Skip to content

chore: create Workspace sharing form component using workspace sharing hook #21276

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jaaydenh merged 3 commits into from
Dec 17, 2025
+501 −352
Merged

chore: create Workspace sharing form component using workspace sharing hook #21276

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d187dfa
chore: create separate sharing component with workspace sharing hook
jaaydenh Dec 15, 2025
4da7d68
fix: removed unused exports
jaaydenh Dec 15, 2025
f0a99da
chore: make onsubmit and action
jaaydenh Dec 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 12 additions & 6 deletions site/src/modules/groups.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,21 @@
import type { Group, ReducedUser, User } from "api/typesGenerated";
import type {
Group,
ReducedUser,
User,
WorkspaceUser,
} from "api/typesGenerated";

type UserOrGroupAutocompleteValue = User | ReducedUser | Group | null;
/**
* Union of all user-like types that can be distinguished from Group.
*/
type UserLike = User | ReducedUser | WorkspaceUser;

/**
* Type guard to check if the value is a Group.
* Groups have a "members" property that users don't have.
*/
export const isGroup = (
value: UserOrGroupAutocompleteValue,
): value is Group => {
return value !== null && typeof value === "object" && "members" in value;
export const isGroup = (value: UserLike | Group): value is Group => {
return "members" in value;
};

/**
Expand Down
304 changes: 304 additions & 0 deletions site/src/modules/workspaces/WorkspaceSharingForm/WorkspaceSharingForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,304 @@
import type {
Group,
WorkspaceACL,
WorkspaceGroup,
WorkspaceRole,
WorkspaceUser,
} from "api/typesGenerated";
import { ErrorAlert } from "components/Alert/ErrorAlert";
import { Avatar } from "components/Avatar/Avatar";
import { AvatarData } from "components/Avatar/AvatarData";
import { Button } from "components/Button/Button";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "components/DropdownMenu/DropdownMenu";
import { EmptyState } from "components/EmptyState/EmptyState";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "components/Select/Select";
import { Spinner } from "components/Spinner/Spinner";
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "components/Table/Table";
import { TableLoader } from "components/TableLoader/TableLoader";
import { EllipsisVertical, UserPlusIcon } from "lucide-react";
import { getGroupSubtitle } from "modules/groups";
import type { FC, ReactNode } from "react";

interface RoleSelectProps {
value: WorkspaceRole;
disabled?: boolean;
onValueChange: (value: WorkspaceRole) => void;
}

const RoleSelect: FC<RoleSelectProps> = ({
value,
disabled,
onValueChange,
}) => {
const roleLabels: Record<WorkspaceRole, string> = {
use: "Use",
admin: "Admin",
"": "",
};

return (
<Select value={value} onValueChange={onValueChange} disabled={disabled}>
<SelectTrigger className="w-40 h-auto">
<SelectValue>
<span className="bg-surface-secondary rounded-md px-3 py-0.5 inline-block">
{roleLabels[value]}
</span>
</SelectValue>
</SelectTrigger>
<SelectContent>
<SelectItem value="use" className="flex-col items-start py-2 w-64">
<div className="font-medium text-content-primary">Use</div>
<div className="text-xs text-content-secondary leading-snug mt-0.5">
Can read and access this workspace.
</div>
</SelectItem>
<SelectItem value="admin" className="flex-col items-start py-2 w-64">
<div className="font-medium text-content-primary">Admin</div>
<div className="text-xs text-content-secondary leading-snug mt-0.5">
Can manage workspace metadata, permissions, and settings.
</div>
</SelectItem>
</SelectContent>
</Select>
);
};

type AddWorkspaceMemberFormProps = {
isLoading: boolean;
onSubmit: () => void;
disabled: boolean;
children: ReactNode;
};

export const AddWorkspaceMemberForm: FC<AddWorkspaceMemberFormProps> = ({
isLoading,
onSubmit,
disabled,
children,
}) => {
return (
<form action={onSubmit}>
<div className="flex flex-row items-center gap-2">
{children}
<Button disabled={disabled || isLoading} type="submit">
<Spinner loading={isLoading}>
<UserPlusIcon className="size-icon-sm" />
</Spinner>
Add member
</Button>
</div>
</form>
);
};

type RoleSelectFieldProps = {
value: WorkspaceRole;
onChange: (value: WorkspaceRole) => void;
disabled?: boolean;
};

export const RoleSelectField: FC<RoleSelectFieldProps> = ({
value,
onChange,
disabled,
}) => {
return (
<Select
value={value}
onValueChange={(val: WorkspaceRole) => onChange(val)}
disabled={disabled}
>
<SelectTrigger className="w-40">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="use">Use</SelectItem>
<SelectItem value="admin">Admin</SelectItem>
</SelectContent>
</Select>
);
};

interface WorkspaceSharingFormProps {
workspaceACL: WorkspaceACL | undefined;
canUpdatePermissions: boolean;
error: unknown;
onUpdateUser: (user: WorkspaceUser, role: WorkspaceRole) => void;
updatingUserId: WorkspaceUser["id"] | undefined;
onRemoveUser: (user: WorkspaceUser) => void;
onUpdateGroup: (group: WorkspaceGroup, role: WorkspaceRole) => void;
updatingGroupId?: WorkspaceGroup["id"] | undefined;
onRemoveGroup: (group: Group) => void;
addMemberForm?: ReactNode;
}

export const WorkspaceSharingForm: FC<WorkspaceSharingFormProps> = ({
workspaceACL,
canUpdatePermissions,
error,
updatingUserId,
onUpdateUser,
onRemoveUser,
updatingGroupId,
onUpdateGroup,
onRemoveGroup,
addMemberForm,
}) => {
const isEmpty = Boolean(
workspaceACL &&
workspaceACL.users.length === 0 &&
workspaceACL.group.length === 0,
);

return (
<div className="flex flex-col gap-4">
{Boolean(error) && <ErrorAlert error={error} />}
{canUpdatePermissions && addMemberForm}
<Table>
<TableHeader>
<TableRow>
<TableHead className="w-[60%] py-2">Member</TableHead>
<TableHead className="w-[40%] py-2">Role</TableHead>
<TableHead className="w-[1%] py-2" />
</TableRow>
</TableHeader>
<TableBody>
{!workspaceACL ? (
<TableLoader />
) : isEmpty ? (
<TableRow>
<TableCell colSpan={999}>
<EmptyState
message="No shared members or groups yet"
description="Add a member or group using the controls above"
/>
</TableCell>
</TableRow>
) : (
<>
{workspaceACL.group.map((group) => (
<TableRow key={group.id}>
<TableCell className="py-2">
<AvatarData
avatar={
<Avatar
size="lg"
fallback={group.display_name || group.name}
src={group.avatar_url}
/>
}
title={group.display_name || group.name}
subtitle={getGroupSubtitle(group)}
/>
</TableCell>
<TableCell className="py-2">
{canUpdatePermissions ? (
<RoleSelect
value={group.role}
disabled={updatingGroupId === group.id}
onValueChange={(value) => onUpdateGroup(group, value)}
/>
) : (
<div className="capitalize">{group.role}</div>
)}
</TableCell>

<TableCell className="py-2">
{canUpdatePermissions && (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
size="icon-lg"
variant="subtle"
aria-label="Open menu"
>
<EllipsisVertical aria-hidden="true" />
<span className="sr-only">Open menu</span>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem
className="text-content-destructive focus:text-content-destructive"
onClick={() => onRemoveGroup(group)}
>
Remove
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
)}
</TableCell>
</TableRow>
))}

{workspaceACL.users.map((user) => (
<TableRow key={user.id}>
<TableCell className="py-2">
<AvatarData
title={user.username}
subtitle={user.name}
src={user.avatar_url}
/>
</TableCell>
<TableCell className="py-2">
{canUpdatePermissions ? (
<RoleSelect
value={user.role}
disabled={updatingUserId === user.id}
onValueChange={(value) => onUpdateUser(user, value)}
/>
) : (
<div className="capitalize">{user.role}</div>
)}
</TableCell>

<TableCell className="py-2">
{canUpdatePermissions && (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
size="icon-lg"
variant="subtle"
aria-label="Open menu"
>
<EllipsisVertical aria-hidden="true" />
<span className="sr-only">Open menu</span>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem
className="text-content-destructive focus:text-content-destructive"
onClick={() => onRemoveUser(user)}
>
Remove
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
)}
</TableCell>
</TableRow>
))}
</>
)}
</TableBody>
</Table>
</div>
);
};
Loading
Loading