Add members tab layout in project settings (#39)

* Add layout for members panel

* Get members detail from projects json

* Add members to all project

---------

Co-authored-by: neeraj <neeraj.rtly@gmail.com>

packages/frontend/src/assets/members.json

@@ -0,0 +1,20 @@
+[
+  {
+    "name": "Saugat Yadav",
+    "email": "saugaty@airfoil.studio",
+    "isOwner": true,
+    "id": 1
+  },
+  {
+    "name": "Gideon Low",
+    "email": "gideonl@airfoil.studio",
+    "isOwner": false,
+    "id": 2
+  },
+  {
+    "name": "Sushan Yadav",
+    "email": "sushany@airfoil.studio",
+    "isOwner": false,
+    "id": 3
+  }
+]

packages/frontend/src/assets/projects.json

@@ -16,7 +16,8 @@
       "createdAt": "2023-12-11T04:20:00",
       "branch": "main"
     },
-    "repositoryId": 1
+    "repositoryId": 1,
+    "members": [1, 2, 3]
   },
   {
     "id": 2,
@@ -35,7 +36,8 @@
       "createdAt": "2023-12-11T04:20:00",
       "branch": "staging"
     },
-    "repositoryId": 1
+    "repositoryId": 1,
+    "members": [2, 3]
   },
   {
     "id": 3,
@@ -54,7 +56,8 @@
       "createdAt": "2023-12-01T04:20:00",
       "branch": "main"
     },
-    "repositoryId": 1
+    "repositoryId": 1,
+    "members": [1]
   },
   {
     "id": 4,
@@ -73,7 +76,8 @@
       "createdAt": "2023-12-01T04:20:00",
       "branch": "main"
     },
-    "repositoryId": 1
+    "repositoryId": 1,
+    "members": [1]
   },
   {
     "id": 5,
@@ -92,7 +96,8 @@
       "createdAt": "2023-12-09T04:20:00",
       "branch": "main"
     },
-    "repositoryId": 1
+    "repositoryId": 1,
+    "members": [1]
   },
   {
     "id": 6,
@@ -111,6 +116,7 @@
       "createdAt": "2023-12-09T04:20:00",
       "branch": "prod"
     },
-    "repositoryId": 1
+    "repositoryId": 1,
+    "members": [1]
   }
 ]

packages/frontend/src/components/projects/project/SettingsTabPanel.tsx

@@ -11,10 +11,7 @@ import Domains from './settings/Domains';
 import GeneralTabPanel from './settings/GeneralTabPanel';
 import { EnvironmentVariablesTabPanel } from './settings/EnvironmentVariablesTabPanel';
 import GitTabPanel from './settings/GitTabPanel';
-
-const Members = () => {
-  return <div>Members</div>;
-};
+import MembersTabPanel from './settings/MembersTabPanel';
 
 const tabsData = [
   {
@@ -45,7 +42,7 @@ const tabsData = [
     label: 'Members',
     icon: '^',
     value: 'members',
-    component: Members,
+    component: MembersTabPanel,
   },
 ];
 

packages/frontend/src/components/projects/project/settings/MemberCard.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+
+import { Select, Typography, Option } from '@material-tailwind/react';
+
+import { Member } from '../../../../types/project';
+
+const PERMISSION_OPTIONS = ['View only', 'View and edit'];
+
+interface MemberCardProps {
+  member: Member;
+  isFirstCard: boolean;
+}
+
+const MemberCard = ({ member, isFirstCard }: MemberCardProps) => {
+  return (
+    <div
+      className={`flex p-1 ${!isFirstCard && 'mt-1 border-t border-gray-300'}`}
+    >
+      <div>^</div>
+      <div className="grow">
+        <Typography variant="small">{member.name}</Typography>
+        <Typography variant="small">{member.email}</Typography>
+      </div>
+      <div>
+        <Select>
+          {PERMISSION_OPTIONS.map((permission, key) => (
+            <Option key={key} value={permission}>
+              ^ {permission}
+            </Option>
+          ))}
+          <Option>^ Remove member</Option>
+        </Select>
+      </div>
+    </div>
+  );
+};
+
+export default MemberCard;

packages/frontend/src/components/projects/project/settings/MembersTabPanel.tsx

@@ -0,0 +1,59 @@
+import React, { useMemo } from 'react';
+import { useParams } from 'react-router-dom';
+
+import { Chip, Button, Typography } from '@material-tailwind/react';
+
+import MemberCard from './MemberCard';
+import membersData from '../../../../assets/members.json';
+import projectData from '../../../../assets/projects.json';
+
+import { Member } from '../../../../types/project';
+
+const FIRST_MEMBER_CARD = 0;
+
+const MembersTabPanel = () => {
+  const { id } = useParams();
+
+  const currProject = useMemo(() => {
+    return projectData.find((data) => data.id === Number(id));
+  }, [id]);
+
+  const members = useMemo(() => {
+    return (
+      currProject?.members.map((memberId) => {
+        return membersData.find((member) => member.id === memberId);
+      }) || []
+    );
+  }, [currProject]);
+
+  return (
+    <div className="p-2">
+      <div className="flex justify-between mb-2">
+        <div className="flex">
+          <Typography variant="h6">Members</Typography>
+          <div>
+            <Chip
+              className="normal-case ml-3 font-normal"
+              size="sm"
+              value={members.length}
+            />
+          </div>
+        </div>
+        <div>
+          <Button size="sm">+ Add member</Button>
+        </div>
+      </div>
+      {(members as Member[]).map((member, index) => {
+        return (
+          <MemberCard
+            member={member}
+            key={member.id}
+            isFirstCard={index === FIRST_MEMBER_CARD}
+          />
+        );
+      })}
+    </div>
+  );
+};
+
+export default MembersTabPanel;

packages/frontend/src/types/project.ts

@@ -16,6 +16,7 @@ export interface ProjectDetails {
     branch: string;
   };
   repositoryId: number;
+  members: number[];
 }
 
 export interface DeploymentDetails {
@@ -81,3 +82,10 @@ export interface DomainDetails {
   };
   isRedirectedto: boolean;
 }
+
+export interface Member {
+  name: string;
+  email: string;
+  isOwner: boolean;
+  id: number;
+}