Project member management

frontend/config/selection.ts

@@ -1,4 +1,5 @@
 const roles = [{ uid: 'administrator' }, { uid: 'user' }];
+const memberRoles = [{ uid: 'manager' }, { uid: 'developer' }, { uid: 'reporter' }];
 
 const categoricalPalette = ['#fba91e', '#6ea56c', '#3ac6e1', '#feda2f', '#f15f47', '#244470', '#9c80bb', '#f595a6'];
 
@@ -55,4 +56,4 @@ const testRunCaseStatus = [
   { uid: 'skipped', color: 'primary', chartColor: '#805aab' },
 ];
 
-export { roles, priorities, testTypes, automationStatus, templates, testRunStatus, testRunCaseStatus };
+export { roles, memberRoles, priorities, testTypes, automationStatus, templates, testRunStatus, testRunCaseStatus };

frontend/messages/en.json

@@ -82,7 +82,7 @@
     "project_detail": "Project Detail",
     "public": "Public",
     "private": "Private",
-    "if_you_make_public": "If you make project public, everyone who has access to this site will be able to view it.",
+    "if_you_make_public": "Making a project public makes it visible to users who are not project members.",
     "close": "Close",
     "create": "Create",
     "update": "Update",
@@ -94,7 +94,8 @@
   "Project": {
     "home": "Home",
     "test_cases": "Test Cases",
-    "test_runs": "Test Runs"
+    "test_runs": "Test Runs",
+    "settings": "Settings"
   },
   "Home": {
     "Folders": "Folders",
@@ -256,5 +257,16 @@
     "include_in_run": "Include in run",
     "exclude_from_run": "Exclude from run",
     "no_cases_found": "No cases found"
+  },
+  "Settings": {
+    "member_management": "Member Management",
+    "avatar": "Avatar",
+    "email": "Email",
+    "username": "User name",
+    "role": "Role",
+    "manager": "Manager",
+    "developer": "Developer",
+    "reporter": "Reporter",
+    "no_members_found": "No members found"
   }
 }

frontend/messages/ja.json

@@ -81,7 +81,7 @@
     "project_detail": "プロジェクト詳細",
     "public": "パブリック",
     "private": "プライベート",
-    "if_you_make_public": "プロジェクトをパブリックにすると、このサイトにアクセスできるすべてのユーザーがプロジェクトを見ることができます。",
+    "if_you_make_public": "プロジェクトをパブリックにすると、プロジェクトメンバーではないユーザーからも見えるようになります。",
     "close": "閉じる",
     "create": "作成",
     "update": "更新",
@@ -93,7 +93,8 @@
   "Project": {
     "home": "ホーム",
     "test_cases": "テストケース",
-    "test_runs": "テストラン"
+    "test_runs": "テストラン",
+    "settings": "設定"
   },
   "Home": {
     "Folders": "フォルダー",
@@ -255,5 +256,16 @@
     "include_in_run": "テストランに含める",
     "exclude_from_run": "テストランから除外する",
     "no_cases_found": "テストケースが見つかりません"
+  },
+  "Settings": {
+    "member_management": "メンバー管理",
+    "avatar": "アバター",
+    "email": "メールアドレス",
+    "username": "ユーザー名",
+    "role": "ロール",
+    "manager": "管理者",
+    "developer": "開発者",
+    "reporter": "報告者",
+    "no_members_found": "メンバーがいません"
   }
 }

frontend/src/app/[locale]/projects/[projectId]/Sidebar.tsx

@@ -1,7 +1,7 @@
 'use client';
 import { useState, useEffect } from 'react';
 import { Listbox, ListboxItem } from '@nextui-org/react';
-import { Home, Files, FlaskConical } from 'lucide-react';
+import { Home, Files, FlaskConical, Settings } from 'lucide-react';
 import { usePathname, useRouter } from '@/src/navigation';
 import useGetCurrentIds from '@/utils/useGetCurrentIds';
 import { ProjectMessages } from '@/types/project';
@@ -27,6 +27,8 @@ export default function Sidebar({ messages, locale }: Props) {
       router.push(`/projects/${projectId}/folders`, { locale: locale });
     } else if (key === 'runs') {
       router.push(`/projects/${projectId}/runs`, { locale: locale });
+    } else if (key === 'settings') {
+      router.push(`/projects/${projectId}/settings`, { locale: locale });
     }
   };
 
@@ -38,6 +40,8 @@ export default function Sidebar({ messages, locale }: Props) {
         setCurrentTab('cases');
       } else if (currentPath.includes('runs')) {
         setCurrentTab('runs');
+      } else if (currentPath.includes('settings')) {
+        setCurrentTab('settings');
       }
     };
 
@@ -60,6 +64,11 @@ export default function Sidebar({ messages, locale }: Props) {
       text: messages.testRuns,
       startContent: <FlaskConical strokeWidth={1} size={20} />,
     },
+    {
+      key: 'settings',
+      text: messages.settings,
+      startContent: <Settings strokeWidth={1} size={20} />,
+    },
   ];
 
   return (

frontend/src/app/[locale]/projects/[projectId]/layout.tsx

@@ -13,6 +13,7 @@ export default function SidebarLayout({
     home: t('home'),
     testCases: t('test_cases'),
     testRuns: t('test_runs'),
+    settings: t('settings'),
   };
 
   return (

frontend/src/app/[locale]/projects/[projectId]/settings/MembersTable.tsx

@@ -0,0 +1,108 @@
+import { useState, useMemo, useCallback } from 'react';
+import { Table, TableHeader, TableColumn, TableBody, TableRow, TableCell, SortDescriptor } from '@nextui-org/react';
+import { UserType } from '@/types/user';
+import { SettingsMessages } from '@/types/settings';
+import { memberRoles } from '@/config/selection';
+import Avatar from 'boring-avatars';
+
+type Props = {
+  members: UserType[];
+  messages: SettingsMessages;
+  locale: string;
+};
+
+export default function MembersTable({ members, messages, locale }: Props) {
+  const headerColumns = [
+    { name: messages.avatar, uid: 'avatar', sortable: false },
+    { name: messages.email, uid: 'email', sortable: true },
+    { name: messages.username, uid: 'username', sortable: true },
+    { name: messages.role, uid: 'role', sortable: true },
+  ];
+
+  const [sortDescriptor, setSortDescriptor] = useState<SortDescriptor>({
+    column: 'role',
+    direction: 'ascending',
+  });
+
+  const sortedItems = useMemo(() => {
+    return [...members].sort((a: UserType, b: UserType) => {
+      const first = a[sortDescriptor.column as keyof UserType] as number;
+      const second = b[sortDescriptor.column as keyof UserType] as number;
+      const cmp = first < second ? -1 : first > second ? 1 : 0;
+
+      return sortDescriptor.direction === 'descending' ? -cmp : cmp;
+    });
+  }, [sortDescriptor, members]);
+
+  const renderCell = useCallback((member: UserType, columnKey: Key) => {
+    const cellValue = member[columnKey as keyof UserType];
+
+    switch (columnKey) {
+      case 'avatar':
+        return (
+          <Avatar
+            size={24}
+            name={member.User.username}
+            variant="beam"
+            colors={['#0A0310', '#49007E', '#FF005B', '#FF7D10', '#FFB238']}
+          />
+        );
+      case 'email':
+        return member.User.email;
+      case 'username':
+        return member.User.username;
+      case 'role':
+        return <span>{messages[memberRoles[cellValue].uid]}</span>;
+      default:
+        return cellValue;
+    }
+  }, []);
+
+  const classNames = useMemo(
+    () => ({
+      wrapper: ['max-w-3xl'],
+      th: ['bg-transparent', 'text-default-500', 'border-b', 'border-divider'],
+      td: [
+        // changing the rows border radius
+        // first
+        'group-data-[first=true]:first:before:rounded-none',
+        'group-data-[first=true]:last:before:rounded-none',
+        // middle
+        'group-data-[middle=true]:before:rounded-none',
+        // last
+        'group-data-[last=true]:first:before:rounded-none',
+        'group-data-[last=true]:last:before:rounded-none',
+      ],
+    }),
+    []
+  );
+
+  return (
+    <>
+      <Table
+        isCompact
+        aria-label="Users table"
+        classNames={classNames}
+        sortDescriptor={sortDescriptor}
+        onSortChange={setSortDescriptor}
+      >
+        <TableHeader columns={headerColumns}>
+          {(column) => (
+            <TableColumn
+              key={column.uid}
+              align={column.uid === 'actions' ? 'center' : 'start'}
+              allowsSorting={column.sortable}
+            >
+              {column.name}
+            </TableColumn>
+          )}
+        </TableHeader>
+        <TableBody emptyContent={messages.noMembersFound} items={sortedItems}>
+          {(item) => (
+            <TableRow key={item.id}>{(columnKey) => <TableCell>{renderCell(item, columnKey)}</TableCell>}</TableRow>
+          )}
+        </TableBody>
+      </Table>
+    </>
+  );
+}

frontend/src/app/[locale]/projects/[projectId]/settings/SettingsPage.tsx

@@ -0,0 +1,96 @@
+'use client';
+import React from 'react';
+import { useState, useEffect, useContext } from 'react';
+import { UserType } from '@/types/user';
+import { SettingsMessages } from '@/types/settings';
+import { TokenContext } from '@/utils/TokenProvider';
+import MembersTable from './MembersTable';
+import Config from '@/config/config';
+const apiServer = Config.apiServer;
+
+type Props = {
+  projectId: string;
+  messages: SettingsMessages;
+  locale: string;
+};
+
+// Member Search
+async function fetchProjectMembers(jwt: string, projectId: string) {
+  const fetchOptions = {
+    method: 'GET',
+    headers: {
+      'Content-Type': 'application/json',
+      Authorization: `Bearer ${jwt}`,
+    },
+  };
+
+  const url = `${apiServer}/members?projectId=${projectId}`;
+
+  try {
+    const response = await fetch(url, fetchOptions);
+    if (!response.ok) {
+      throw new Error(`HTTP error! Status: ${response.status}`);
+    }
+    const data = await response.json();
+    console.log(data);
+    return data;
+  } catch (error: any) {
+    console.error('Error fetching data:', error.message);
+  }
+}
+
+// User Search by username
+async function fetchUsers(jwt: string, text: string) {
+  const fetchOptions = {
+    method: 'GET',
+    headers: {
+      'Content-Type': 'application/json',
+      Authorization: `Bearer ${jwt}`,
+    },
+  };
+
+  const url = `${apiServer}/users?text=${text}`;
+
+  try {
+    const response = await fetch(url, fetchOptions);
+    if (!response.ok) {
+      throw new Error(`HTTP error! Status: ${response.status}`);
+    }
+    const data = await response.json();
+    return data;
+  } catch (error: any) {
+    console.error('Error fetching data:', error.message);
+  }
+}
+
+export default function SettingsPage({ projectId, messages, locale }: Props) {
+  const context = useContext(TokenContext);
+  const [members, setMembers] = useState<UserType[]>([]);
+
+  useEffect(() => {
+    async function fetchDataEffect() {
+      if (!context.isSignedIn()) {
+        return;
+      }
+
+      try {
+        const data = await fetchProjectMembers(context.token.access_token, projectId);
+        setMembers(data);
+      } catch (error: any) {
+        console.error('Error in effect:', error.message);
+      }
+    }
+
+    fetchDataEffect();
+  }, [context]);
+
+  return (
+    <div className="container mx-auto max-w-3xl pt-16 px-6 flex-grow">
+      <div className="w-full p-3 flex items-center justify-between">
+        <h3 className="font-bold">{messages.memberManagement}</h3>
+      </div>
+
+      <MembersTable members={members} messages={messages} locale={locale} />
+    </div>
+  );
+}

frontend/src/app/[locale]/projects/[projectId]/settings/page.tsx

@@ -0,0 +1,23 @@
+import SettingsPage from './SettingsPage';
+import { useTranslations } from 'next-intl';
+
+export default function Page({ params }: { params: { projectId: string; locale: string } }) {
+  const t = useTranslations('Settings');
+  const messages = {
+    memberManagement: t('member_management'),
+    avatar: t('avatar'),
+    email: t('email'),
+    username: t('username'),
+    role: t('role'),
+    manager: t('manager'),
+    developer: t('developer'),
+    reporter: t('reporter'),
+    noMembersFound: t('no_members_found'),
+  };
+
+  return (
+    <>
+      <SettingsPage projectId={params.projectId} messages={messages} locale={params.locale} />
+    </>
+  );
+}

frontend/types/project.ts

@@ -42,4 +42,5 @@ export type ProjectMessages = {
   home: string;
   testCases: string;
   testRuns: string;
+  settings: string;
 };

frontend/types/settings.ts

@@ -0,0 +1,8 @@
+export type SettingsMessages = {
+  memberManagement: string;
+  avatar: string;
+  email: string;
+  username: string;
+  role: string;
+  noMembersFound: string;
+};