fix: Fixed teaming page UI Issues (#4173)

Signed-off-by: Hrishav <[email protected]>
litmuschaos · Sep 15, 2023 · ac62acf · ac62acf
1 parent 42d3e85
commit ac62acf
Show file tree

Hide file tree

Showing 10 changed files with 152 additions and 58 deletions.
diff --git a/chaoscenter/web/src/strings/strings.en.yaml b/chaoscenter/web/src/strings/strings.en.yaml
@@ -124,6 +124,7 @@ checkStatus: Check the status of your Chaos Infrastructure on your cluster
 chooseAccessType: Choose Access Type
 chooseAuthenticationType: Choose Authentication Type
 chooseHubAccess: Choose Hub Access
+chooseMembersAddTheProject: Choose members to add to the project
 chooseProbeMode: Choose Mode for probe to be executed
 clickDownload: >-
   Click on the “Download” button below to download the YML file to a machine
@@ -294,6 +295,7 @@ editSameExperimentDescription: >-
 editSameExperimentTitle: Edit on the existing Experiment
 editYaml: Edit Yaml
 editingChaosHub: Editing ChaosHub
+editor: Editor
 effect: Effect
 email: Email
 emailIsRequired: Email is a required field
@@ -1064,6 +1066,7 @@ totalChaosInfrastructures: Total Infrastructures
 totalEnvironments: Total Environments
 totalExp: Total Experiments
 totalExperiments: Total Faults in Execution
+totalPendingInvitations: Total Pending Invitations
 totalRuns: Total Runs
 totalUsers: Total Users
 triggeredBy: Triggered by
@@ -1121,6 +1124,7 @@ viewManifest: View YAML Manifest
 viewProbeDetails: View Probe Details
 viewProbeProperties: View Probe Properties
 viewRun: View Run
+viewer: Viewer
 warning: Warning
 weekly: Weekly
 weeklyMessage: Your chaos experiment will run weekly at your chosen day and time.

diff --git a/chaoscenter/web/src/strings/types.ts b/chaoscenter/web/src/strings/types.ts
@@ -119,6 +119,7 @@ export interface StringsMap {
   'chooseAccessType': unknown
   'chooseAuthenticationType': unknown
   'chooseHubAccess': unknown
+  'chooseMembersAddTheProject': unknown
   'chooseProbeMode': unknown
   'clickDownload': unknown
   'clone': unknown
@@ -247,6 +248,7 @@ export interface StringsMap {
   'editSameExperimentTitle': unknown
   'editYaml': unknown
   'editingChaosHub': unknown
+  'editor': unknown
   'effect': unknown
   'email': unknown
   'emailIsRequired': unknown
@@ -896,6 +898,7 @@ export interface StringsMap {
   'totalEnvironments': unknown
   'totalExp': unknown
   'totalExperiments': unknown
+  'totalPendingInvitations': unknown
   'totalRuns': unknown
   'totalUsers': unknown
   'triggeredBy': unknown
@@ -951,6 +954,7 @@ export interface StringsMap {
   'viewProbeDetails': unknown
   'viewProbeProperties': unknown
   'viewRun': unknown
+  'viewer': unknown
   'warning': unknown
   'weekly': unknown
   'weeklyMessage': unknown

diff --git a/chaoscenter/web/src/views/InviteNewMembers/InviteNewMemberListColumns.tsx b/chaoscenter/web/src/views/InviteNewMembers/InviteNewMemberListColumns.tsx
@@ -1,7 +1,7 @@
 import { Layout, Text } from '@harnessio/uicore';
 import type { Row } from 'react-table';
 import React from 'react';
-import { Color } from '@harnessio/design-system';
+import { Color, FontVariation } from '@harnessio/design-system';
 import { useStrings } from '@strings';
 import type { InviteUserDetails } from '@controllers/InviteNewMembers/types';
 
@@ -13,13 +13,15 @@ const UserName = ({ row: { original: data } }: MemberRow): React.ReactElement =>
   const { username, userID, name } = data;
   const { getString } = useStrings();
   return (
-    <Layout.Vertical>
-      <Text color={Color.BLACK}>{name ?? username}</Text>
+    <Layout.Vertical style={{ gap: '0.25rem' }}>
+      <Text font={{ variation: FontVariation.BODY }} color={Color.BLACK}>
+        {name ?? username}
+      </Text>
       <Layout.Horizontal flex={{ alignItems: 'center', justifyContent: 'flex-start' }} style={{ gap: '0.25rem' }}>
         <Text color={Color.GREY_500} font={{ size: 'small' }} lineClamp={1}>
           {getString('id')}:
         </Text>
-        <Text color={Color.GREY_500} font={{ size: 'small' }} lineClamp={1} width={100}>
+        <Text color={Color.GREY_500} font={{ size: 'small' }} lineClamp={1} style={{ maxWidth: 200 }}>
           {userID}
         </Text>
       </Layout.Horizontal>
@@ -30,11 +32,9 @@ const UserName = ({ row: { original: data } }: MemberRow): React.ReactElement =>
 const UserEmail = ({ row: { original: data } }: MemberRow): React.ReactElement => {
   const { email } = data;
   return (
-    <Layout.Vertical>
-      <Layout.Horizontal flex={{ justifyContent: 'flex-start' }} spacing="small" margin={{ bottom: 'small' }}>
-        <Text color={Color.BLACK}>{email}</Text>
-      </Layout.Horizontal>
-    </Layout.Vertical>
+    <Text font={{ variation: FontVariation.BODY }} color={Color.BLACK}>
+      {email}
+    </Text>
   );
 };
 

diff --git a/chaoscenter/web/src/views/InviteNewMembers/InviteNewMemberTable.module.scss b/chaoscenter/web/src/views/InviteNewMembers/InviteNewMemberTable.module.scss
@@ -1,3 +1,33 @@
 .inviteTable {
   width: 100%;
 }
+
+.tableContainer {
+  width: 100%;
+  [role='cell'],
+  [role='columnheader'] {
+    width: auto !important;
+  }
+  div[class*='TableV2--body'] {
+    overflow-y: scroll;
+    height: 400px;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+  div[class*='TableV2--row TableV2--card'] {
+    margin-bottom: 0 !important;
+  }
+  div[class*='TableV2--row TableV2--card'] {
+    border-radius: 6px !important;
+    &:hover {
+      background-color: white !important;
+    }
+  }
+  div[class*='TableV2--header'],
+  div[class*='TableV2--cells'] {
+    display: grid !important;
+    grid-template-columns: 1.5fr 1fr 200px;
+    gap: 1rem;
+  }
+}
diff --git a/chaoscenter/web/src/views/InviteNewMembers/InviteNewMemberTable.module.scss.d.ts b/chaoscenter/web/src/views/InviteNewMembers/InviteNewMemberTable.module.scss.d.ts
@@ -1,6 +1,7 @@
 declare namespace InviteNewMemberTableModuleScssNamespace {
   export interface IInviteNewMemberTableModuleScss {
     inviteTable: string;
+    tableContainer: string;
   }
 }
 

diff --git a/chaoscenter/web/src/views/InviteNewMembers/InviteNewMembers.tsx b/chaoscenter/web/src/views/InviteNewMembers/InviteNewMembers.tsx
@@ -21,14 +21,18 @@ interface InviteNewMembersViewProps {
 export default function InviteNewMembersView(props: InviteNewMembersViewProps): React.ReactElement {
   const { isLoading, data, handleClose, getUsers, searchInput } = props;
   const { getString } = useStrings();
+
   return (
     <Layout.Vertical padding="medium" style={{ gap: '1rem' }} width={750}>
       <Layout.Horizontal flex={{ alignItems: 'center', justifyContent: 'space-between' }}>
-        <Text font={{ variation: FontVariation.H4 }}>Choose members to add to the project </Text>
+        <Text font={{ variation: FontVariation.H4 }}>{getString('chooseMembersAddTheProject')}</Text>
         <Icon name="cross" style={{ cursor: 'pointer' }} size={18} onClick={() => handleClose()} />
       </Layout.Horizontal>
       <Container width={'100%'}>{searchInput}</Container>
-      <Layout.Vertical style={{ minHeight: 150 }} flex={{ alignItems: 'center', justifyContent: 'center' }}>
+      <Layout.Vertical
+        style={{ minHeight: data.length === 0 ? 400 : 0 }}
+        flex={{ alignItems: 'center', justifyContent: 'center' }}
+      >
         <Loader
           loading={isLoading}
           noData={{
@@ -38,16 +42,16 @@ export default function InviteNewMembersView(props: InviteNewMembersViewProps):
           }}
         >
           <InviteUsersTableView users={data} getUsers={getUsers} />
-          <Container width="100%">
-            <Button
-              disabled={false}
-              onClick={() => handleClose()}
-              variation={ButtonVariation.SECONDARY}
-              text={getString('cancel')}
-            />
-          </Container>
         </Loader>
       </Layout.Vertical>
+      <Container width="100%">
+        <Button
+          disabled={false}
+          onClick={() => handleClose()}
+          variation={ButtonVariation.SECONDARY}
+          text={getString('cancel')}
+        />
+      </Container>
     </Layout.Vertical>
   );
 }
diff --git a/chaoscenter/web/src/views/InviteNewMembers/InviteUsersTable.tsx b/chaoscenter/web/src/views/InviteNewMembers/InviteUsersTable.tsx
@@ -1,4 +1,12 @@
-import { ButtonVariation, Layout, SplitButton, SplitButtonOption, TableV2, useToaster } from '@harnessio/uicore';
+import {
+  ButtonVariation,
+  Container,
+  Layout,
+  SplitButton,
+  SplitButtonOption,
+  TableV2,
+  useToaster
+} from '@harnessio/uicore';
 import React, { useMemo } from 'react';
 import type { Column, Row } from 'react-table';
 import type { QueryObserverResult, RefetchOptions, RefetchQueryFilters } from '@tanstack/react-query';
@@ -7,6 +15,7 @@ import { PopoverPosition } from '@blueprintjs/core';
 import { useStrings } from '@strings';
 import { GetUsersForInvitationOkResponse, User, useSendInvitationMutation } from '@api/auth';
 import { killEvent } from '@utils';
+import { PermissionGroup } from '@models';
 import { UserEmail, UserName } from './InviteNewMemberListColumns';
 import css from './InviteNewMemberTable.module.scss';
 
@@ -24,17 +33,15 @@ export default function InviteUsersTableView({ users, getUsers }: InviteUsersTab
       {
         Header: 'MEMBERS',
         id: 'username',
-        width: '40%',
         Cell: UserName
       },
       {
         Header: 'EMAIL',
         id: 'email',
-        width: '30%',
         Cell: UserEmail
       },
       {
-        Header: '',
+        Header: ' ',
         id: 'threeDotMenu',
         disableSortBy: true,
         Cell: ({ row: { original: data } }: { row: Row<User> }) => {
@@ -57,35 +64,31 @@ export default function InviteUsersTableView({ users, getUsers }: InviteUsersTab
               width="100%"
             >
               <SplitButton
-                text={getString('inviteAs')}
-                icon="email-inline"
+                text={getString('viewer')}
                 variation={ButtonVariation.PRIMARY}
                 loading={isLoading}
                 popoverProps={{
                   interactionKind: 'click',
                   usePortal: true,
                   position: PopoverPosition.BOTTOM_RIGHT
                 }}
+                onClick={() =>
+                  sendInvitationMutation({
+                    body: {
+                      projectID: projectID,
+                      role: PermissionGroup.VIEWER,
+                      userID: data.userID
+                    }
+                  })
+                }
               >
                 <SplitButtonOption
-                  text="Editor"
+                  text={getString('editor')}
                   onClick={() =>
                     sendInvitationMutation({
                       body: {
                         projectID: projectID,
-                        role: 'Editor',
-                        userID: data.userID
-                      }
-                    })
-                  }
-                />
-                <SplitButtonOption
-                  text="Viewer"
-                  onClick={() =>
-                    sendInvitationMutation({
-                      body: {
-                        projectID: projectID,
-                        role: 'Viewer',
+                        role: PermissionGroup.EDITOR,
                         userID: data.userID
                       }
                     })
@@ -100,5 +103,9 @@ export default function InviteUsersTableView({ users, getUsers }: InviteUsersTab
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []
   );
-  return <TableV2<User> columns={envColumns} data={users} className={css.inviteTable} />;
+  return (
+    <Container className={css.tableContainer}>
+      <TableV2<User> columns={envColumns} data={users} className={css.inviteTable} />
+    </Container>
+  );
 }
diff --git a/chaoscenter/web/src/views/ProjectMembers/PendingMembersTable.tsx b/chaoscenter/web/src/views/ProjectMembers/PendingMembersTable.tsx
@@ -1,4 +1,14 @@
-import { Button, ButtonVariation, DropDown, Layout, SelectOption, TableV2, Text, useToaster } from '@harnessio/uicore';
+import {
+  Button,
+  ButtonVariation,
+  Container,
+  DropDown,
+  Layout,
+  SelectOption,
+  TableV2,
+  Text,
+  useToaster
+} from '@harnessio/uicore';
 import React, { useMemo } from 'react';
 import type { Column, Row } from 'react-table';
 import type { QueryObserverResult, RefetchOptions, RefetchQueryFilters } from '@tanstack/react-query';
@@ -13,6 +23,7 @@ import {
 } from '@api/auth';
 import Loader from '@components/Loader';
 import { MemberEmail, MemberName } from './ActiveMembersListColumns';
+import styles from './ProjectMember.module.scss';
 
 interface PendingMembersTableViewProps {
   pendingMembers: ProjectMember[] | undefined;
@@ -33,21 +44,18 @@ export default function PendingMembersTableView({
       {
         Header: 'MEMBERS',
         id: 'username',
-        width: '25%',
         accessor: 'username',
         Cell: MemberName
       },
       {
         Header: 'EMAIL',
         id: 'email',
         accessor: 'email',
-        width: '25%',
         Cell: MemberEmail
       },
       {
         Header: 'PERMISSIONS',
         id: 'Role',
-        width: '50%',
         disableSortBy: true,
         Cell: ({ row: { original: data } }: { row: Row<ProjectMember> }) => {
           const { projectID } = useParams<{ projectID: string }>();
@@ -86,16 +94,14 @@ export default function PendingMembersTableView({
           );
 
           return (
-            <Layout.Horizontal flex={{ justifyContent: 'space-between' }} spacing="medium">
-              <Layout.Horizontal flex={{ justifyContent: 'flex-start' }} spacing="small" margin={{ bottom: 'small' }}>
-                <DropDown
-                  filterable={false}
-                  value={memberRole}
-                  items={rolesDropDown}
-                  onChange={option => setMemberRole(option.label as 'Editor' | 'Owner' | 'Viewer')}
-                />
-              </Layout.Horizontal>
-              <Layout.Horizontal flex={{ justifyContent: 'flex-start' }} spacing="medium">
+            <Layout.Horizontal flex={{ alignItems: 'center', justifyContent: 'space-between' }}>
+              <DropDown
+                filterable={false}
+                value={memberRole}
+                items={rolesDropDown}
+                onChange={option => setMemberRole(option.label as 'Editor' | 'Owner' | 'Viewer')}
+              />
+              <Layout.Horizontal flex={{ alignItems: 'center', justifyContent: 'flex-start' }} style={{ gap: '1rem' }}>
                 <Button
                   disabled={false}
                   loading={sendLoading}
@@ -135,8 +141,7 @@ export default function PendingMembersTableView({
     []
   );
   return (
-    <Layout.Vertical height={'100%'} padding="medium">
-      <Text font={{ variation: FontVariation.H6 }}>Total Pending Invitations: {pendingMembers?.length ?? 0}</Text>
+    <Container height={'100%'} padding="medium">
       <Loader
         loading={isLoading}
         noData={{
@@ -145,8 +150,15 @@ export default function PendingMembersTableView({
           message: getString('pendingInvitationsNotAvailableMessage')
         }}
       >
-        {pendingMembers && <TableV2<ProjectMember> columns={envColumns} sortable data={pendingMembers} />}
+        <Layout.Vertical height="100%" style={{ gap: '0.5rem' }}>
+          <Text font={{ variation: FontVariation.H6 }}>
+            {getString('totalPendingInvitations')}: {pendingMembers?.length ?? 0}
+          </Text>
+          <Container style={{ flexGrow: 1 }} className={styles.tableContainerMain}>
+            {pendingMembers && <TableV2<ProjectMember> columns={envColumns} sortable data={pendingMembers} />}
+          </Container>
+        </Layout.Vertical>
       </Loader>
-    </Layout.Vertical>
+    </Container>
   );
 }