feat/teaming: Added revamped UI of teaming for litmus 3.0.0 (#4134)

* Added UI screens for active project members Signed-off-by: Saranya-jena <[email protected]> * Added auth endpoints to fetch active and pending members Signed-off-by: Saranya-jena <[email protected]> * Added api integration for active and pending members Signed-off-by: Saranya-jena <[email protected]> * Added api integration for invite users Signed-off-by: Saranya-jena <[email protected]> * Api refactor for invite users Signed-off-by: Saranya-jena <[email protected]> * Integrated table v2 with invite users api Signed-off-by: Saranya-jena <[email protected]> * Adding pending mebers screen Signed-off-by: Saranya-jena <[email protected]> * Added pending members table Signed-off-by: Saranya-jena <[email protected]> * Added json schema for all the fields Signed-off-by: Saranya-jena <[email protected]> * updated schema in frontend Signed-off-by: Saranya-jena <[email protected]> * Added epi integration for teaming Signed-off-by: Saranya-jena <[email protected]> * Added refetch functions in the modals and tables Signed-off-by: Saranya-jena <[email protected]> * Added ui fixes Signed-off-by: Saranya-jena <[email protected]> * Added loader and default text for empty array Signed-off-by: Saranya-jena <[email protected]> * Added user details fields while sending invitations Signed-off-by: Saranya-jena <[email protected]> * Added user details fields while project initialization Signed-off-by: Saranya-jena <[email protected]> * removed unused comments Signed-off-by: Saranya-jena <[email protected]> * resolved review comments Signed-off-by: Saranya-jena <[email protected]> * uncommented the logs Signed-off-by: Saranya-jena <[email protected]> --------- Signed-off-by: Saranya-jena <[email protected]>
litmuschaos · Aug 21, 2023 · 4b778f5 · 4b778f5
1 parent 92d2dbe
commit 4b778f5
Show file tree

Hide file tree

Showing 37 changed files with 1,058 additions and 11 deletions.
diff --git a/chaoscenter/authentication/api/handlers/rest/project_handler.go b/chaoscenter/authentication/api/handlers/rest/project_handler.go
@@ -325,6 +325,9 @@ func SendInvitation(service services.ApplicationService) gin.HandlerFunc {
 		newMember := &entities.Member{
 			UserID:     user.ID,
 			Role:       *member.Role,
+			Username:   user.Username,
+			Name:       user.Name,
+			Email:      user.Email,
 			Invitation: entities.PendingInvitation,
 			JoinedAt:   time.Now().Unix(),
 		}
@@ -499,7 +502,7 @@ func RemoveInvitation(service services.ApplicationService) gin.HandlerFunc {
 
 		case entities.DeclinedInvitation, entities.ExitedProject:
 			{
-				c.JSON(400, gin.H{"message": "User is already not a part of your project"})
+				c.JSON(400, gin.H{"message": "User is not a part of your project"})
 				return
 			}
 		}

diff --git a/chaoscenter/authentication/api/handlers/rest/user_handlers.go b/chaoscenter/authentication/api/handlers/rest/user_handlers.go
@@ -164,7 +164,7 @@ func InviteUsers(service services.ApplicationService) gin.HandlerFunc {
 			c.JSON(utils.ErrorStatusCodes[utils.ErrServerError], presenter.CreateErrorResponse(utils.ErrServerError))
 			return
 		}
-		c.JSON(200, users)
+		c.JSON(200, gin.H{"data": users})
 	}
 }
 
@@ -224,6 +224,9 @@ func LoginUser(service services.ApplicationService) gin.HandlerFunc {
 				UserID:     user.ID,
 				Role:       entities.RoleOwner,
 				Invitation: entities.AcceptedInvitation,
+				Username:   user.Username,
+				Name:       user.Name,
+				Email:      user.Email,
 				JoinedAt:   time.Now().Unix(),
 			}
 			var members []*entities.Member

diff --git a/chaoscenter/authentication/pkg/project/repository.go b/chaoscenter/authentication/pkg/project/repository.go
@@ -204,6 +204,7 @@ func (r repository) RemoveInvitation(projectID string, userID string, invitation
 
 	result, err := r.Collection.UpdateOne(context.TODO(), query, update)
 	if err != nil {
+		// TODO check it's usage
 		if invitation == entities.AcceptedInvitation {
 			return err
 		}

diff --git a/chaoscenter/web/src/components/SideNav/SideNav.tsx b/chaoscenter/web/src/components/SideNav/SideNav.tsx
@@ -96,6 +96,7 @@ export default function SideNav(): ReactElement {
           <SidebarLink label={'Chaos Experiments'} to={paths.toExperiments()} />
           <SidebarLink label={'ChaosHubs'} to={paths.toChaosHubs()} />
           <SidebarLink label={'Environments'} to={paths.toEnvironments()} />
+          <SidebarLink label={'Members'} to={paths.toProjectMembers()} />
         </Layout.Vertical>
       </div>
       <Container className={css.bottomContainer}>

diff --git a/chaoscenter/web/src/controllers/ActiveProjectMemberList/ActiveProjectMembers.tsx b/chaoscenter/web/src/controllers/ActiveProjectMemberList/ActiveProjectMembers.tsx
@@ -0,0 +1,17 @@
+import { useParams } from 'react-router-dom';
+import React from 'react';
+import ActiveMembersTableView from '@views/ProjectMembers/ActiveMembersTable';
+import { useGetProjectMembersQuery } from '@api/auth';
+
+export default function ActiveProjectMembersController(): React.ReactElement {
+  const { projectID } = useParams<{ projectID: string }>();
+  const {
+    data,
+    isLoading,
+    refetch: getMembersRefetch
+  } = useGetProjectMembersQuery({ project_id: projectID, state: 'accepted' });
+
+  return (
+    <ActiveMembersTableView activeMembers={data?.data} isLoading={isLoading} getMembersRefetch={getMembersRefetch} />
+  );
+}
diff --git a/chaoscenter/web/src/controllers/ActiveProjectMemberList/index.tsx b/chaoscenter/web/src/controllers/ActiveProjectMemberList/index.tsx
@@ -0,0 +1,3 @@
+import ActiveProjectMembersController from './ActiveProjectMembers';
+
+export default ActiveProjectMembersController;
diff --git a/chaoscenter/web/src/controllers/InviteNewMembers/InviteNewMembers.tsx b/chaoscenter/web/src/controllers/InviteNewMembers/InviteNewMembers.tsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import { useParams } from 'react-router-dom';
+import { ExpandingSearchInput } from '@harnessio/uicore';
+import { useStrings } from '@strings';
+import { useGetUsersForInvitationQuery, User } from '@api/auth';
+import InviteNewMembersView from '@views/InviteNewMembers/InviteNewMembers';
+import type { ProjectPathParams } from '@routes/RouteInterfaces';
+
+interface InviteUsersControllerProps {
+  handleClose: () => void;
+}
+
+export default function InviteUsersController({ handleClose }: InviteUsersControllerProps): React.ReactElement {
+  const { projectID } = useParams<ProjectPathParams>();
+  const { data, isLoading, refetch: getUsers } = useGetUsersForInvitationQuery({ project_id: projectID });
+  const { getString } = useStrings();
+
+  const [searchQuery, setSearchQuery] = React.useState('');
+  const searchInput = (
+    <ExpandingSearchInput placeholder={getString('search')} alwaysExpanded onChange={value => setSearchQuery(value)} />
+  );
+
+  function doesFilterCriteriaMatch(user: User): boolean {
+    const updatedSearchQuery = searchQuery.trim();
+    if (
+      user.name?.toLowerCase().includes(updatedSearchQuery.toLowerCase()) ||
+      user.username?.toLowerCase().includes(updatedSearchQuery.toLowerCase()) ||
+      user.email?.toLowerCase().includes(updatedSearchQuery.toLowerCase())
+    )
+      return true;
+    return false;
+  }
+
+  const filteredData = React.useMemo(() => {
+    if (!data?.data) return [];
+    return data.data.filter(user => doesFilterCriteriaMatch(user));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [data, searchQuery]);
+
+  return (
+    <InviteNewMembersView
+      data={filteredData}
+      getUsers={getUsers}
+      handleClose={handleClose}
+      isLoading={isLoading}
+      searchInput={searchInput}
+    />
+  );
+}
diff --git a/chaoscenter/web/src/controllers/InviteNewMembers/helper.ts b/chaoscenter/web/src/controllers/InviteNewMembers/helper.ts
@@ -0,0 +1,17 @@
+import type { User } from '@api/auth';
+import type { InviteUserDetails } from './types';
+
+export function generateInviteUsersTableContent(userData: Array<User> | undefined): Array<InviteUserDetails> {
+  const content: Array<InviteUserDetails> =
+    userData && userData.length > 0
+      ? userData.map(user => {
+          return {
+            id: user.userID,
+            username: user.username,
+            email: user.email ?? '',
+            name: user.name ?? ''
+          };
+        })
+      : [];
+  return content;
+}
diff --git a/chaoscenter/web/src/controllers/InviteNewMembers/index.tsx b/chaoscenter/web/src/controllers/InviteNewMembers/index.tsx
@@ -0,0 +1,3 @@
+import InviteUsersController from './InviteNewMembers';
+
+export default InviteUsersController;
diff --git a/chaoscenter/web/src/controllers/InviteNewMembers/types.ts b/chaoscenter/web/src/controllers/InviteNewMembers/types.ts
@@ -0,0 +1,6 @@
+export interface InviteUserDetails {
+  username: string;
+  id: string;
+  email: string;
+  name: string;
+}
diff --git a/chaoscenter/web/src/controllers/PendingProjectMemberList/PendingProjectMembers.tsx b/chaoscenter/web/src/controllers/PendingProjectMemberList/PendingProjectMembers.tsx
@@ -0,0 +1,21 @@
+import { useParams } from 'react-router-dom';
+import React from 'react';
+import PendingMembersTableView from '@views/ProjectMembers/PendingMembersTable';
+import { useGetProjectMembersQuery } from '@api/auth';
+
+export default function PendingProjectMembersController(): React.ReactElement {
+  const { projectID } = useParams<{ projectID: string }>();
+  const {
+    data,
+    isLoading,
+    refetch: getPendingMembersRefetch
+  } = useGetProjectMembersQuery({ project_id: projectID, state: 'not_accepted' });
+
+  return (
+    <PendingMembersTableView
+      pendingMembers={data?.data}
+      isLoading={isLoading}
+      getPendingMembersRefetch={getPendingMembersRefetch}
+    />
+  );
+}
diff --git a/chaoscenter/web/src/controllers/PendingProjectMemberList/index.tsx b/chaoscenter/web/src/controllers/PendingProjectMemberList/index.tsx
@@ -0,0 +1,3 @@
+import type PendingProjectMembersController from './PendingProjectMembers';
+
+export default PendingProjectMembersController;
diff --git a/chaoscenter/web/src/controllers/RemoveMember/RemoveMember.tsx b/chaoscenter/web/src/controllers/RemoveMember/RemoveMember.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import { useToaster } from '@harnessio/uicore';
+import type { QueryObserverResult, RefetchOptions, RefetchQueryFilters } from '@tanstack/react-query';
+import { GetProjectMembersOkResponse, useRemoveInvitationMutation } from '@api/auth';
+import RemoveMemberView from '@views/RemoveMember';
+
+interface RemoveMemberControllerProps {
+  userID: string;
+  username: string;
+  hideDeleteModal: () => void;
+  getMembersRefetch: <TPageData>(
+    options?: (RefetchOptions & RefetchQueryFilters<TPageData>) | undefined
+  ) => Promise<QueryObserverResult<GetProjectMembersOkResponse, unknown>>;
+}
+export default function RemoveMemberController(props: RemoveMemberControllerProps): React.ReactElement {
+  const { userID, username, hideDeleteModal, getMembersRefetch } = props;
+  const { showSuccess } = useToaster();
+
+  const { mutate: removeMemberMutation } = useRemoveInvitationMutation(
+    {},
+    {
+      onSuccess: data => {
+        getMembersRefetch();
+        showSuccess(data.message);
+      }
+    }
+  );
+
+  return (
+    <RemoveMemberView
+      {...props}
+      removeMemberMutation={removeMemberMutation}
+      userID={userID}
+      username={username}
+      handleClose={hideDeleteModal}
+    />
+  );
+}
diff --git a/...rc/views/Environments/EnvironmentPage.tsx → ...eb/src/controllers/RemoveMember/index.tsx b/...rc/views/Environments/EnvironmentPage.tsx → ...eb/src/controllers/RemoveMember/index.tsx
diff --git a/chaoscenter/web/src/models/index.ts b/chaoscenter/web/src/models/index.ts
@@ -9,5 +9,6 @@ export * from './chaosStudio';
 export * from './license';
 export * from './rbac';
 export * from './user';
+export * from './projectMembers';
 export * from './token';
 export * from './projects';
diff --git a/chaoscenter/web/src/models/projectMembers.ts b/chaoscenter/web/src/models/projectMembers.ts
@@ -0,0 +1,4 @@
+export enum MembersTabs {
+  ACTIVE = 'active-members',
+  PENDING = 'pending-members'
+}
diff --git a/chaoscenter/web/src/routes/RouteDefinitions.ts b/chaoscenter/web/src/routes/RouteDefinitions.ts
@@ -23,6 +23,8 @@ export interface UseRouteDefinitionsProps {
   toChaosInfrastructures(params: { environmentID: string }): string;
   toKubernetesChaosInfrastructures(params: { environmentID: string }): string;
   toKubernetesChaosInfrastructureDetails(params: { chaosInfrastructureID: string; environmentID: string }): string;
+  // Project scoped
+  toProjectMembers(): string;
   // Account Scoped Routes
   toAccountSettingsOverview(): string;
 }
@@ -56,5 +58,7 @@ export const paths: UseRouteDefinitionsProps = {
   toKubernetesChaosInfrastructureDetails: ({ chaosInfrastructureID, environmentID }) =>
     `/environments/${environmentID}/kubernetes/${chaosInfrastructureID}`,
   // Account Scoped Routes
-  toAccountSettingsOverview: () => '/settings/overview'
+  toAccountSettingsOverview: () => '/settings/overview',
+  // user route
+  toProjectMembers: () => '/members'
 };
diff --git a/chaoscenter/web/src/routes/RouteDestinations.tsx b/chaoscenter/web/src/routes/RouteDestinations.tsx
@@ -20,6 +20,7 @@ import { getUserDetails } from '@utils';
 import EnvironmentController from '@controllers/Environments';
 import { isUserAuthenticated } from 'utils/auth';
 import AccountSettingsController from '@controllers/AccountSettings';
+import ProjectMembersView from '@views/ProjectMembers';
 
 const experimentID = ':experimentID';
 const runID = ':runID';
@@ -107,6 +108,8 @@ export function RoutesWithAuthentication(): React.ReactElement {
         path={projectMatchPaths.toKubernetesChaosInfrastructureDetails({ environmentID, chaosInfrastructureID })}
         component={KubernetesChaosInfrastructureDetailsController}
       />
+      {/* Project */}
+      <Route exact path={projectMatchPaths.toProjectMembers()} component={ProjectMembersView} />
     </Switch>
   );
 }

diff --git a/chaoscenter/web/src/routes/RouteInterfaces.ts b/chaoscenter/web/src/routes/RouteInterfaces.ts
@@ -0,0 +1,3 @@
+export interface ProjectPathParams {
+  projectID: string;
+}
diff --git a/chaoscenter/web/src/strings/strings.en.yaml b/chaoscenter/web/src/strings/strings.en.yaml
@@ -19,6 +19,7 @@ account: Account
 accountURL: Account URL
 actionItems: Action Items
 active: Active
+activeMembers: Active members
 actualResilienceScore: Actual Resilience Score
 add: Add
 addExperimentToChaosHub: Add Experiment to ChaosHub
@@ -425,7 +426,10 @@ intervalOptional: Interval (Optional)
 invalidEmailText: Please enter a valid email address
 invalidSelection: Invalid Selection
 invalidText: Invalid
+invitationRemoveSuccess: Invitation cancelled successfully
+invitationSuccess: Invitation sent successfully
 invitations: Invitations
+inviteAs: Invite as
 invitedBy: Invited By
 isRequired: '{{field}} is required field'
 issueSupport: If the issue still persists, consider reaching out to support!
@@ -490,6 +494,8 @@ manualInterruption: Manual Interruption needed
 markRunAsComplete: Mark Run as Complete
 markRunAsCompleteDescription: This will mark the run as complete and you will no longer be able to re-run.
 meetsExpectations: The resilience score has met the expectation.
+membersNotAvailableMessage: No active project members available
+membersNotAvailableTitle: No members present
 menuItems:
   deleteHub: Delete Hub
   editHub: Edit Hub
@@ -534,6 +540,7 @@ newChaosExperiment: New Chaos Experiment
 newChaosHub: New ChaosHub
 newChaosInfrastructure: Enable Chaos
 newExperiment: New Experiment
+newMember: New Member
 newPassword: New Password
 newProbe: New Probe
 newUpdates: New Updates
@@ -644,6 +651,9 @@ passwordResetSuccess: Password reset successfully
 passwordsDoNotMatch: Passwords do not match
 pauseRun: Pause Run
 pending: Pending
+pendingInvitationsNotAvailableMessage: No pending invitations present
+pendingInvitationsNotAvailableTitle: No invitations present
+pendingMembers: Pending members
 pendingTime: >-
   It may take 3-5 minutes after applying the manifest for the infrastructure to
   be connected.
@@ -749,8 +759,12 @@ recurringRun: Recurring Run (Cron)
 recurringSchedule: Recurring Schedule
 referencedBy: Referenced By
 registryName: Registry Name
+remove: Remove
+removeMember: Remove Member
+removeMemberConfirmation: Are you sure you want to remove {{username}}?
 required: Required
 rerun: Rerun
+resend: Resend
 resetFilters: Reset Filters
 resetPassword: Reset Password
 resilienceOverview: Resilience Overview
@@ -963,6 +977,8 @@ userCreatedOn: User Created On
 userManagement: User Management
 username: Username
 usernameIsRequired: Username is a required field
+usersNotAvailableMessage: No users available to send invitation
+usersNotAvailableTitle: No users available
 validationError: Validation Error
 value: Value
 valuePlaceholder: Enter a value