feat: Renamed delete-team-member to remove-team-member and renamed ma…

…nage-project folder
implerhq · Oct 19, 2024 · bdf5c35 · bdf5c35
1 parent d19c737
commit bdf5c35
Show file tree

Hide file tree

Showing 15 changed files with 93 additions and 92 deletions.
diff --git a/apps/api/src/app/team/dto/delete-team-member.dto.ts b/apps/api/src/app/team/dto/delete-team-member.dto.ts
@@ -1,7 +1,7 @@
 import { ApiProperty } from '@nestjs/swagger';
 import { IsString } from 'class-validator';
 
-export class DeleteTeamMemberDto {
+export class RemoveTeammemberDto {
   @ApiProperty({
     description: 'Id of the Project in the environment',
   })

diff --git a/apps/api/src/app/team/team.controller.ts b/apps/api/src/app/team/team.controller.ts
@@ -10,7 +10,7 @@ import {
   AcceptInvitation,
   ListTeamMembers,
   UpdateTeamMember,
-  DeleteTeamMember,
+  RemoveTeamMember,
   RevokeInvitation,
   DeclineInvitation,
   TeamMemberMeta,
@@ -30,7 +30,7 @@ export class TeamController {
     private acceptInvitation: AcceptInvitation,
     private listTeamMembers: ListTeamMembers,
     private updateTeamMember: UpdateTeamMember,
-    private deleteTeamMember: DeleteTeamMember,
+    private removeTeamMember: RemoveTeamMember,
     private revokeInvitation: RevokeInvitation,
     private declineInvitation: DeclineInvitation,
     private teamMemberMeta: TeamMemberMeta
@@ -86,10 +86,10 @@ export class TeamController {
 
   @Delete('/:memberId')
   @ApiOperation({
-    summary: 'Delete a team member from the environment',
+    summary: 'Remove a team member from the project',
   })
-  async deleteTeamMemberRoute(@Param('memberId') memberId: string) {
-    return await this.deleteTeamMember.exec(memberId);
+  async removeTeamMemberRoute(@Param('memberId') memberId: string) {
+    return await this.removeTeamMember.exec(memberId);
   }
 
   // invitation routes

diff --git a/apps/api/src/app/team/usecase/delete-team-member/delete-team-member.usecase.ts b/apps/api/src/app/team/usecase/delete-team-member/delete-team-member.usecase.ts
@@ -1,19 +1,16 @@
 import { Injectable } from '@nestjs/common';
-import { EnvironmentRepository, UserRepository } from '@impler/dal';
+import { EnvironmentRepository } from '@impler/dal';
 import { DocumentNotFoundException } from '@shared/exceptions/document-not-found.exception';
 
 @Injectable()
-export class DeleteTeamMember {
-  constructor(
-    private environmentRepository: EnvironmentRepository,
-    private userRepository: UserRepository
-  ) {}
+export class RemoveTeamMember {
+  constructor(private environmentRepository: EnvironmentRepository) {}
 
   async exec(memberId: string) {
     const teamMember = await this.environmentRepository.getTeamMemberDetails(memberId);
     if (!teamMember) throw new DocumentNotFoundException('TeamMember', memberId);
 
-    await this.environmentRepository.deleteTeamMember(memberId);
+    await this.environmentRepository.removeTeamMember(memberId);
 
     return teamMember;
   }

diff --git a/apps/api/src/app/team/usecase/index.ts b/apps/api/src/app/team/usecase/index.ts
@@ -5,7 +5,7 @@ import { AcceptInvitation } from './accept-invitation/accept-invitation.usecase'
 import { GenerateUniqueApiKey } from 'app/environment/usecases';
 import { ListTeamMembers } from './list-team-members/list-team-members.usecase';
 import { UpdateTeamMember } from './update-team-member-role/update-team-member.usecase';
-import { DeleteTeamMember } from './delete-team-member/delete-team-member.usecase';
+import { RemoveTeamMember } from './delete-team-member/delete-team-member.usecase';
 import { RevokeInvitation } from './revoke-invitation/revoke-invitation.usecase';
 import { DeclineInvitation } from './decline-invitation/decline-invitation.usecase';
 import { TeamMemberMeta } from './team-member-meta/team-member-meta.usecase';
@@ -19,7 +19,7 @@ export const USE_CASES = [
   GenerateUniqueApiKey,
   ListTeamMembers,
   UpdateTeamMember,
-  DeleteTeamMember,
+  RemoveTeamMember,
   RevokeInvitation,
   DeclineInvitation,
   TeamMemberMeta,
@@ -34,7 +34,7 @@ export {
   GenerateUniqueApiKey,
   ListTeamMembers,
   UpdateTeamMember,
-  DeleteTeamMember,
+  RemoveTeamMember,
   RevokeInvitation,
   DeclineInvitation,
   TeamMemberMeta,

diff --git a/...tManagement/ConfirmDeleteProjectModal.tsx → ...nageProject/ConfirmDeleteProjectModal.tsx b/...tManagement/ConfirmDeleteProjectModal.tsx → ...nageProject/ConfirmDeleteProjectModal.tsx
diff --git a/.../ProjectManagement/ManageProjectModal.tsx → ...ents/ManageProject/ManageProjectModal.tsx b/.../ProjectManagement/ManageProjectModal.tsx → ...ents/ManageProject/ManageProjectModal.tsx
@@ -1,29 +1,32 @@
 import React from 'react';
-import { Badge, Flex, Text, UnstyledButton, Stack, TextInput } from '@mantine/core';
-import { colors, ROLE_BADGES } from '@config';
+import { Flex, Text, Stack, TextInput } from '@mantine/core';
+
+import { Badge } from '@ui/badge';
 import { Button } from '@ui/button';
+import { List } from '@components/List';
+import { colors, ROLE_BADGES } from '@config';
+import { IconButton } from '@ui/icon-button';
+import { useProject } from '@hooks/useProject';
 import { SwapIcon } from '@assets/icons/Swap.icon';
 import { DeleteIcon } from '@assets/icons/Delete.icon';
 import { InformationIcon } from '@assets/icons/Information.icon';
-import { List } from '@components/List';
 import { IProjectPayload, UserRolesEnum } from '@impler/shared';
-import { useProject } from '@hooks/useProject';
 
 export function ManageProjectModal() {
   const {
-    handleSubmit,
-    register,
     errors,
     onSubmit,
     projects,
+    register,
+    handleSubmit,
     currentProjectId,
-    handleDeleteProject,
     onProjectIdChange,
+    handleDeleteProject,
     isCreateProjectLoading,
   } = useProject();
 
   return (
-    <>
+    <Stack spacing="xs">
       <List<IProjectPayload>
         headings={[
           {
@@ -34,7 +37,7 @@ export function ManageProjectModal() {
               <Flex>
                 {item.name}
                 {item.isOwner && (
-                  <Badge size="sm" variant="filled" color={colors.darkBlue} ml="xs">
+                  <Badge variant="filled" color={colors.darkBlue} ml="xs">
                     Owner
                   </Badge>
                 )}
@@ -44,49 +47,47 @@ export function ManageProjectModal() {
           {
             title: 'Role',
             key: 'role',
-            width: '20%',
+            width: '10%',
             Cell: (item) => (
               <Badge size="sm" variant="filled" color={ROLE_BADGES[item.role as UserRolesEnum]}>
                 {item.role}
               </Badge>
             ),
           },
           {
-            title: 'Switch',
-            key: 'switch',
-            width: '10%',
+            key: '',
+            width: '5%',
+            title: 'Actions',
             Cell: (item) => (
-              <UnstyledButton
-                onClick={() => {
-                  onProjectIdChange(item._id as string);
-                }}
-              >
-                {item._id !== currentProjectId && <SwapIcon size="md" />}
-              </UnstyledButton>
-            ),
-          },
-          {
-            title: 'Delete',
-            key: 'delete',
-            width: '10%',
-            Cell: (item) =>
-              item.isOwner ? (
-                <UnstyledButton
+              <Flex justify="flex-end" gap="xs">
+                <IconButton
+                  label="Switch Project"
+                  disabled={item._id === currentProjectId}
+                  onClick={() => {
+                    onProjectIdChange(item._id as string);
+                  }}
+                >
+                  <SwapIcon size="md" />
+                </IconButton>
+                <IconButton
+                  label="Delete Project"
+                  disabled={!item.isOwner}
                   onClick={() => {
                     handleDeleteProject(item._id as string);
                   }}
                 >
                   <DeleteIcon size="md" />
-                </UnstyledButton>
-              ) : null,
+                </IconButton>
+              </Flex>
+            ),
           },
         ]}
         data={projects || []}
         selectedItemId={currentProjectId}
       />
       <form onSubmit={handleSubmit(onSubmit)}>
-        <Stack>
-          <Flex mt="sm" gap="sm" justify="space-between">
+        <Stack spacing="xs">
+          <Flex gap="sm" justify="space-between">
             <TextInput
               style={{ width: '90%' }}
               placeholder="Enter Project Name"
@@ -103,6 +104,6 @@ export function ManageProjectModal() {
           </Flex>
         </Stack>
       </form>
-    </>
+    </Stack>
   );
 }
diff --git a/...eb/components/ProjectManagement/index.tsx → apps/web/components/ManageProject/index.tsx b/...eb/components/ProjectManagement/index.tsx → apps/web/components/ManageProject/index.tsx
diff --git a/...nts/TeamMembers/DeleteTeamMemberModal.tsx → ...nts/TeamMembers/RemoveTeamMemberModal.tsx b/...nts/TeamMembers/DeleteTeamMemberModal.tsx → ...nts/TeamMembers/RemoveTeamMemberModal.tsx
@@ -3,22 +3,22 @@ import { Text, Stack, Group } from '@mantine/core';
 import { Button } from '@ui/button';
 import { colors } from '@config';
 
-interface IDeleteTeamMemberModalProps {
+interface IRemoveTeamMemberModalProps {
   userId: string;
   userName: string;
-  onDeleteConfirm: () => void;
   onCancel: () => void;
+  onDeleteConfirm: () => void;
 }
 
-export function DeleteTeamMemberModal({ userName, onDeleteConfirm, onCancel }: IDeleteTeamMemberModalProps) {
+export function RemoveTeamMemberModal({ userName, onDeleteConfirm, onCancel }: IRemoveTeamMemberModalProps) {
   return (
     <Stack spacing="sm">
       <Text align="center">
-        Are you sure you want to delete the team member{' '}
-        <Text span color={colors.yellow}>
+        Are you sure you want to remove{' '}
+        <Text span color={colors.yellow} fw="bold">
           {userName}
-        </Text>
-        ?
+        </Text>{' '}
+        from the team?
       </Text>
       <Group noWrap spacing="xs">
         <Button color="red" variant="outline" fullWidth onClick={onCancel}>

diff --git a/apps/web/components/TeamMembers/index.tsx b/apps/web/components/TeamMembers/index.tsx
@@ -5,5 +5,5 @@ export * from './Team';
 export * from './SentInvitationActions';
 export * from './ConfirmInvitationModal';
 export * from './ConfirmDeleteInvitation';
-export * from './DeleteTeamMemberModal';
+export * from './RemoveTeamMemberModal';
 export * from './SentInvitationActions';
diff --git a/apps/web/config/constants.config.ts b/apps/web/config/constants.config.ts
@@ -56,15 +56,15 @@ export const MODAL_KEYS = {
 
   INVITE_MEMBERS: 'INVITE_MEMBERS',
   ACCEPT_INVITATION: 'ACCEPT_INVITATION',
-  CONFIRM_DELETE_TEAM_MEMBER: 'CONFIRM_DELETE_TEAM_MEMBER',
   MANAGE_PROJECT_MODAL: 'MANAGE_PROJECT_MODAL',
   CONFIRM_PROJECT_DELETE: 'CONFIRM_PROJECT_DELETE',
+  CONFIRM_REMOVE_TEAM_MEMBER: 'CONFIRM_REMOVE_TEAM_MEMBER',
 };
 
 interface IntegrateOption {
+  key: string;
   name: IntegrationEnum;
   Icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
-  key: string;
 }
 
 export const INTEGRATE_IMPORT: IntegrateOption[] = [
@@ -345,7 +345,7 @@ export enum SubjectsEnum {
 }
 
 export const ROLE_BADGES = {
-  [UserRolesEnum.ADMIN]: 'red',
+  [UserRolesEnum.ADMIN]: 'cyan',
   [UserRolesEnum.TECH]: 'blue',
   [UserRolesEnum.FINANCE]: 'green',
 };

diff --git a/apps/web/design-system/icon-button/IconButton.tsx b/apps/web/design-system/icon-button/IconButton.tsx
@@ -3,19 +3,21 @@ import { Tooltip, UnstyledButton, UnstyledButtonProps } from '@mantine/core';
 
 interface IconButtonProps extends UnstyledButtonProps {
   label: string;
+  disabled?: boolean;
   withArrow?: boolean;
   onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
 }
 export function IconButton({
   label,
   onClick,
+  disabled = false,
   withArrow = true,
   children,
   ...buttonProps
 }: PropsWithChildren<IconButtonProps>) {
   return (
     <Tooltip label={label} withArrow={withArrow}>
-      <UnstyledButton onClick={onClick} {...buttonProps}>
+      <UnstyledButton onClick={onClick} disabled={disabled} {...buttonProps}>
         {children}
       </UnstyledButton>
     </Tooltip>

diff --git a/apps/web/hooks/useProject.tsx b/apps/web/hooks/useProject.tsx
@@ -1,18 +1,18 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { API_KEYS, MODAL_KEYS, NOTIFICATION_KEYS, ROUTES } from '@config';
-import { IEnvironmentData, IErrorObject, IProjectPayload } from '@impler/shared';
-import { commonApi } from '@libs/api';
-import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import { defineAbilitiesFor } from 'config/defineAbilities';
 import { useEffect } from 'react';
-import { useAppState } from 'store/app.context';
-import { ConfirmDeleteProjectModal, ManageProjectModal } from '@components/ProjectManagement';
+import { useRouter } from 'next/router';
 import { modals } from '@mantine/modals';
 import { useForm } from 'react-hook-form';
+import { Flex, Title } from '@mantine/core';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+
+import { commonApi } from '@libs/api';
 import { notify } from '@libs/notify';
 import { track } from '@libs/amplitude';
-import { Flex, Title } from '@mantine/core';
-import { useRouter } from 'next/router';
+import { useAppState } from 'store/app.context';
+import { defineAbilitiesFor } from 'config/defineAbilities';
+import { API_KEYS, MODAL_KEYS, NOTIFICATION_KEYS, ROUTES } from '@config';
+import { IEnvironmentData, IErrorObject, IProjectPayload } from '@impler/shared';
+import { ConfirmDeleteProjectModal, ManageProjectModal } from '@components/ManageProject';
 
 export function useProject() {
   const queryClient = useQueryClient();

diff --git a/apps/web/hooks/useTeamMembers.tsx b/apps/web/hooks/useTeamMembers.tsx
@@ -7,7 +7,7 @@ import { commonApi } from '@libs/api';
 import { IErrorObject } from '@impler/shared';
 import { useAppState } from 'store/app.context';
 import { API_KEYS, NOTIFICATION_KEYS, MODAL_KEYS } from '@config';
-import { DeleteTeamMemberModal } from '@components/TeamMembers/DeleteTeamMemberModal';
+import { RemoveTeamMemberModal } from '@components/TeamMembers/RemoveTeamMemberModal';
 
 interface UpdateRoleParams {
   memberId: string;
@@ -42,7 +42,7 @@ export function useTeamMembers() {
     }
   );
 
-  const { mutate: deleteTeamMember, isLoading: isTeamMemberDeleting } = useMutation<IProfileData, IErrorObject, string>(
+  const { mutate: removeTeamMember, isLoading: isTeamMemberDeleting } = useMutation<IProfileData, IErrorObject, string>(
     (teamMemberId) =>
       commonApi(API_KEYS.DELETE_TEAM_MEMBER as any, {
         parameters: [teamMemberId],
@@ -98,14 +98,14 @@ export function useTeamMembers() {
 
   const openDeleteModal = (userId: string, userName: string) => {
     modals.open({
-      title: 'Confirm Team Member Deletion',
-      id: MODAL_KEYS.CONFIRM_DELETE_TEAM_MEMBER,
+      title: 'Confirm Team Member Remove',
+      id: MODAL_KEYS.CONFIRM_REMOVE_TEAM_MEMBER,
       children: (
-        <DeleteTeamMemberModal
+        <RemoveTeamMemberModal
           userId={userId}
           userName={userName}
           onDeleteConfirm={() => {
-            deleteTeamMember(userId);
+            removeTeamMember(userId);
             modals.closeAll();
           }}
           onCancel={() => modals.closeAll()}