feat(workspaces): implement workspace roles (#305)

Author: l1ttps

console/src/components/common/layout/settings-layout.tsx

@@ -63,14 +63,14 @@ export default function SettingsLayout({
         {/* Back To App button - always visible on the left */}
         <Link to="/" className="mr-auto">
           <Button variant="outline" className="hidden md:flex">
-            <ArrowLeft className="mr-2 h-4 w-4" />
-            Back To App
+            <ArrowLeft className="h-4 w-4" />
+            Back
           </Button>
           <Button
             variant="outline"
             size="icon"
             className="md:hidden"
-            title="Back To App"
+            title="Back"
           >
             <ArrowLeft className="h-4 w-4" />
           </Button>

console/src/pages/settings/components/api-keys-settings.tsx

@@ -1,11 +1,5 @@
 import { Button } from '@/components/ui/button';
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from '@/components/ui/card';
+import { Card, CardContent } from '@/components/ui/card';
 import { useWorkspaceSelector } from '@/hooks/useWorkspaceSelector';
 import {
   useWorkspacesControllerGetWorkspaceApiKey,
@@ -78,12 +72,6 @@ export default function ApiKeysSettings() {
   return (
     <div className="space-y-6">
       <Card>
-        <CardHeader>
-          <CardTitle>Workspace API Key</CardTitle>
-          <CardDescription>
-            Use this API key to authenticate API requests for this workspace
-          </CardDescription>
-        </CardHeader>
         <CardContent className="space-y-4">
           {isLoading ? (
             <div className="flex items-center justify-center py-4">
@@ -95,29 +83,27 @@ export default function ApiKeysSettings() {
           ) : (
             <>
               <div className="flex min-w-0 flex-col gap-2">
-                <div className="overflow-x-auto">
-                  <code className="whitespace-nowrap rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold">
-                    {apiKeyData?.apiKey || 'No API key available'}
-                  </code>
+                <div className="overflow-x-auto h-10 flex justify-center items-center  rounded border">
+                  <code>{apiKeyData?.apiKey || 'No API key available'}</code>
                 </div>
-                <div className="flex gap-2">
+                <div className="flex gap-2 justify-center">
                   <Button
                     variant="outline"
                     size="sm"
                     onClick={handleCopy}
                     disabled={!apiKeyData?.apiKey}
                   >
-                    <Copy className="mr-2 h-4 w-4" />
+                    <Copy className="h-4 w-4" />
                     {copied ? 'Copied!' : 'Copy'}
                   </Button>
                   <Button
-                    variant="destructive"
+                    variant="secondary"
                     size="sm"
                     onClick={handleRotate}
                     disabled={isRotating || !selectedWorkspace}
                   >
                     <RefreshCw
-                      className={`mr-2 h-4 w-4 ${isRotating ? 'animate-spin' : ''}`}
+                      className={`h-4 w-4 ${isRotating ? 'animate-spin' : ''}`}
                     />
                     {isRotating ? 'Rotating...' : 'Rotate'}
                   </Button>

console/src/pages/settings/components/workspace-settings.tsx

@@ -10,7 +10,6 @@ import { ConfirmDialog } from '@/components/ui/confirm-dialog';
 import {
   Form,
   FormControl,
-  FormDescription,
   FormField,
   FormItem,
   FormLabel,
@@ -135,9 +134,6 @@ export default function WorkspaceSettings() {
       <Card>
         <CardHeader>
           <CardTitle>Workspace Information</CardTitle>
-          <CardDescription>
-            Manage your workspace name and description
-          </CardDescription>
         </CardHeader>
         <CardContent>
           <Form {...form}>
@@ -150,13 +146,10 @@ export default function WorkspaceSettings() {
                 name="name"
                 render={({ field }) => (
                   <FormItem>
-                    <FormLabel>Workspace Name</FormLabel>
+                    <FormLabel>Name</FormLabel>
                     <FormControl>
-                      <Input placeholder="Workspace name" {...field} />
+                      <Input {...field} />
                     </FormControl>
-                    <FormDescription>
-                      This is the display name of your workspace
-                    </FormDescription>
                     <FormMessage />
                   </FormItem>
                 )}
@@ -168,7 +161,7 @@ export default function WorkspaceSettings() {
                   <FormItem>
                     <FormLabel>Description</FormLabel>
                     <FormControl>
-                      <Input placeholder="Workspace description" {...field} />
+                      <Input {...field} />
                     </FormControl>
                     <FormMessage />
                   </FormItem>

console/src/pages/settings/settings.tsx

@@ -1,6 +1,6 @@
+import { useSession } from '@/utils/authClient';
 import { useEffect, useMemo, type JSX } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
-import { useSession } from '@/utils/authClient';
 import ApiKeysSettings from './components/api-keys-settings';
 import BrandNameAndLogoSettings from './components/brand-name-and-logo';
 import CreateMcpPermission from './components/create-mcp-permission';
@@ -38,12 +38,12 @@ interface SettingsProps {
 // Settings tab groups with content and component - exported for SettingsLayout
 export const settingsTabGroups: SettingsTabGroup[] = [
   {
-    name: 'Configuration',
+    name: 'Workspace',
     tabs: [
       {
-        id: 'workspace',
-        label: 'Workspace',
-        path: '/settings/workspace',
+        id: 'general',
+        label: 'General',
+        path: '/settings/general',
         content: {
           title: 'Workspace settings',
           description: 'Manage your workspace settings',
@@ -52,7 +52,7 @@ export const settingsTabGroups: SettingsTabGroup[] = [
       },
       {
         id: 'apikeys',
-        label: 'API Keys',
+        label: 'API keys',
         path: '/settings/apikeys',
         content: {
           title: 'API Keys',
@@ -150,7 +150,7 @@ export function filterTabGroups(
 // Backward compatibility - flattened array of all tabs
 export const settingsTabs = settingsTabGroups.flatMap((group) => group.tabs);
 
-const Settings = ({ defaultTab = 'workspace' }: SettingsProps) => {
+const Settings = ({ defaultTab = 'general' }: SettingsProps) => {
   const { tab } = useParams<{ tab?: string }>();
   const navigate = useNavigate();
   const { data } = useSession();

console/src/pages/workspaces/index.tsx

@@ -8,12 +8,18 @@ import {
   CardHeader,
   CardTitle,
 } from '@/components/ui/card';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
 import { useWorkspaceSelector } from '@/hooks/useWorkspaceSelector';
 import {
   useWorkspacesControllerGetWorkspaces,
+  WorkspaceResponseDtoRole,
   type WorkspaceResponseDto,
 } from '@/services/apis/gen/queries';
-import { Plus, Target, Users } from 'lucide-react';
+import { Crown, Plus, Target, Users } from 'lucide-react';
 import { useNavigate } from 'react-router-dom';
 
 const PAGE_SIZE = 12;
@@ -54,7 +60,7 @@ export default function Workspaces() {
       }
     >
       <div className="space-y-4">
-        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+        <div className="grid grid-cols-1 gap-4  md:grid-cols-2  lg:grid-cols-3 xl:grid-cols-4">
           {isLoading
             ? Array.from({ length: PAGE_SIZE }).map((_, index) => (
                 <Card key={index} className="animate-pulse">
@@ -67,53 +73,67 @@ export default function Workspaces() {
                   </CardContent>
                 </Card>
               ))
-            : data?.data.map((workspace: WorkspaceResponseDto) => (
-                <Card
-                  key={workspace.id}
-                  className="cursor-pointer transition-colors hover:bg-accent/50"
-                  onClick={() => onSelectWorkspace(workspace.id)}
-                >
-                  <CardHeader>
-                    <div className="flex items-start justify-between">
-                      <CardTitle className="text-lg">
-                        {workspace.name}
-                      </CardTitle>
-                      <Badge
-                        className={
-                          workspace.archivedAt
-                            ? 'bg-gray-500 text-white'
-                            : 'bg-green-500 text-white'
-                        }
-                      >
-                        {workspace.archivedAt ? 'Archived' : 'Active'}
-                      </Badge>
-                    </div>
-                    <div className="flex gap-4 pt-2 text-sm text-muted-foreground">
-                      <div className="flex items-center gap-1.5">
-                        <Users size={14} className="text-muted-foreground" />
-                        <span className="font-medium">
-                          {workspace.memberCount}
-                        </span>
-                        <span>members</span>
+            : data?.data.map((workspace: WorkspaceResponseDto) => {
+                const isOwner =
+                  workspace.role === WorkspaceResponseDtoRole.owner;
+                return (
+                  <Card
+                    key={workspace.id}
+                    className="cursor-pointer transition-colors hover:bg-accent/50"
+                    onClick={() => onSelectWorkspace(workspace.id)}
+                  >
+                    <CardHeader>
+                      <div className="flex items-start justify-between">
+                        <CardTitle className="text-lg flex items-center gap-2">
+                          {workspace.name}
+                          {isOwner && (
+                            <Tooltip>
+                              <TooltipTrigger>
+                                <Crown size={20} className="text-yellow-500" />
+                              </TooltipTrigger>
+                              <TooltipContent>
+                                <p>Owner</p>
+                              </TooltipContent>
+                            </Tooltip>
+                          )}
+                        </CardTitle>
+                        <Badge
+                          className={
+                            workspace.archivedAt
+                              ? 'bg-gray-500 text-white'
+                              : 'bg-green-500 text-white'
+                          }
+                        >
+                          {workspace.archivedAt ? 'Archived' : 'Active'}
+                        </Badge>
                       </div>
-                      <div className="flex items-center gap-1.5">
-                        <Target size={14} className="text-muted-foreground" />
-                        <span className="font-medium">
-                          {workspace.targetCount}
-                        </span>
-                        <span>targets</span>
+                      <div className="flex gap-4 pt-2 text-sm text-muted-foreground">
+                        <div className="flex items-center gap-1.5">
+                          <Users size={14} className="text-muted-foreground" />
+                          <span className="font-medium">
+                            {workspace.memberCount}
+                          </span>
+                          <span>members</span>
+                        </div>
+                        <div className="flex items-center gap-1.5">
+                          <Target size={14} className="text-muted-foreground" />
+                          <span className="font-medium">
+                            {workspace.targetCount}
+                          </span>
+                          <span>targets</span>
+                        </div>
                       </div>
-                    </div>
-                  </CardHeader>
-                  <CardContent>
-                    <CardDescription className="line-clamp-2">
-                      {typeof workspace.description === 'string'
-                        ? workspace.description
-                        : 'No description'}
-                    </CardDescription>
-                  </CardContent>
-                </Card>
-              ))}
+                    </CardHeader>
+                    <CardContent>
+                      <CardDescription className="line-clamp-2">
+                        {typeof workspace.description === 'string'
+                          ? workspace.description
+                          : 'No description'}
+                      </CardDescription>
+                    </CardContent>
+                  </Card>
+                );
+              })}
         </div>
       </div>
     </Page>

console/src/services/apis/gen/queries.ts

@@ -218,6 +218,18 @@ export type WorkspaceResponseDtoDescription = { [key: string]: unknown } | null;
  */
 export type WorkspaceResponseDtoArchivedAt = { [key: string]: unknown } | null;
 
+/**
+ * Role of the current user in the workspace
+ */
+export type WorkspaceResponseDtoRole =
+  (typeof WorkspaceResponseDtoRole)[keyof typeof WorkspaceResponseDtoRole];
+
+// eslint-disable-next-line @typescript-eslint/no-redeclare
+export const WorkspaceResponseDtoRole = {
+  owner: 'owner',
+  member: 'member',
+} as const;
+
 export type WorkspaceResponseDto = {
   /** Workspace ID */
   id: string;
@@ -247,6 +259,8 @@ export type WorkspaceResponseDto = {
   targetCount: number;
   /** Number of members in the workspace */
   memberCount: number;
+  /** Role of the current user in the workspace */
+  role: WorkspaceResponseDtoRole;
 };
 
 export type GetManyWorkspaceResponseDtoDto = {
@@ -15149,6 +15163,7 @@ export const useToolsControllerUninstallTool = <
 };
 
 /**
+ * @deprecated
  * @summary Get built-in tools
  */
 export const toolsControllerGetBuiltInTools = (
@@ -15270,6 +15285,7 @@ export function useToolsControllerGetBuiltInTools<
   queryKey: DataTag<QueryKey, TData, TError>;
 };
 /**
+ * @deprecated
  * @summary Get built-in tools
  */
 

core-api/src/common/enums/enum.ts

@@ -10,6 +10,11 @@ export enum Role {
   BOT = 'bot',
 }
 
+export enum WorkspaceRole {
+  OWNER = 'owner',
+  MEMBER = 'member',
+}
+
 /**
  * Enum representing tool categories used in the system
  */

core-api/src/database/migrations/1773890090920-WorkspaceRole.ts

@@ -0,0 +1,16 @@
+import { MigrationInterface, QueryRunner } from "typeorm";
+
+export class WorkspaceRole1773890090920 implements MigrationInterface {
+    name = 'WorkspaceRole1773890090920'
+
+    public async up(queryRunner: QueryRunner): Promise<void> {
+        await queryRunner.query(`CREATE TYPE "public"."workspace_members_role_enum" AS ENUM('owner', 'member')`);
+        await queryRunner.query(`ALTER TABLE "workspace_members" ADD "role" "public"."workspace_members_role_enum" NOT NULL DEFAULT 'owner'`);
+    }
+
+    public async down(queryRunner: QueryRunner): Promise<void> {
+        await queryRunner.query(`ALTER TABLE "workspace_members" DROP COLUMN "role"`);
+        await queryRunner.query(`DROP TYPE "public"."workspace_members_role_enum"`);
+    }
+
+}