From a5da252b4dfb51a89e030cf7f00f1ec1f726e0c1 Mon Sep 17 00:00:00 2001
From: Davit <davedabyeet@gmail.com>
Date: Fri, 8 Sep 2023 09:12:20 +0400
Subject: [PATCH 1/3] some changes and improvements alongside bugfixes

---
 src/components/Button/StyledButton.tsx        |   9 +-
 src/components/Button/index.tsx               |  22 +++-
 .../Organizations/AddGroupToProject/index.js  |   5 +-
 .../AddNotificationToProject/index.js         |   7 +-
 .../Organizations/AddUserToGroup/index.js     |  14 ++-
 .../AddUserToGroupSelect/index.tsx            |   7 +-
 .../AddUserToOrganization/index.js            |  14 +--
 .../Organizations/GroupMembers/index.js       |  38 ++++---
 src/components/Organizations/Groups/index.js  |  17 +--
 src/components/Organizations/Manage/index.js  |  18 ++--
 .../Organizations/NewGroup/index.js           |  25 ++---
 .../Organizations/NewProject/index.js         |   4 +-
 .../Organizations/Notifications/index.js      |  45 +++++---
 .../PaginatedTable/PaginatedTable.tsx         | 102 ++++++++++++++----
 .../Organizations/PaginatedTable/Styles.tsx   |   4 +
 .../ProjectGroupMembers/index.js              |  12 ++-
 .../ProjectNotifications/index.js             |   8 +-
 .../Organizations/Projects/Styles.tsx         |   8 ++
 .../Organizations/Projects/index.js           |  35 +++---
 .../RemoveNotificationConfirm/index.js        |   6 +-
 .../RemoveProjectGroupConfirm/index.js        |   7 +-
 .../Organizations/RemoveUserConfirm/index.js  |   6 +-
 src/components/Organizations/SharedStyles.tsx |   4 +
 src/components/Organizations/User/index.tsx   |   8 +-
 src/components/Organizations/Users/index.js   |  28 +++--
 src/pages/organizations/project.js            |  10 +-
 26 files changed, 321 insertions(+), 142 deletions(-)

diff --git a/src/components/Button/StyledButton.tsx b/src/components/Button/StyledButton.tsx
index d607f7a2..ded0cc14 100644
--- a/src/components/Button/StyledButton.tsx
+++ b/src/components/Button/StyledButton.tsx
@@ -8,7 +8,10 @@ const sharedStyles = css`
   border-radius: 3px;
   color: ${color.white};
   cursor: pointer;
-  &:not(:has(span[role="img"])){
+  &:not(:has(span[role='img'])) {
+    padding: 10px 30px;
+  }
+  &:has(span[aria-label='loading']) {
     padding: 10px 30px;
   }
   @media ${bp.tinyUp} {
@@ -42,7 +45,7 @@ const sharedStyles = css`
   &.btn-white {
     // background-color: ${color.white};
     background: transparent;
-    color:  ${color.blue};
+    color: ${color.blue};
     border: 1px solid ${color.blue};
     &.btn--disabled {
       background-color: ${color.lightestGrey};
@@ -103,7 +106,7 @@ const sharedStyles = css`
     width: 48px;
     height: 36px;
   }
-  
+
   i.edit {
     background-image: url('/static/images/edit.svg');
     width: 48px;
diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
index 2d953234..268de7cb 100644
--- a/src/components/Button/index.tsx
+++ b/src/components/Button/index.tsx
@@ -1,17 +1,28 @@
 import React, { FC, MouseEvent, ReactNode } from 'react';
 
+import { LoadingOutlined } from '@ant-design/icons';
+
 import { ButtonElem, LinkElement } from './StyledButton';
 
 interface ButtonProps {
   action: (e: MouseEvent<HTMLButtonElement>) => void;
   href?: string;
   disabled?: boolean;
+  loading?: boolean;
   children?: ReactNode;
   variant?: string;
   icon?: string;
 }
 
-const Button: FC<ButtonProps> = ({ action = undefined, href = undefined, disabled, children, variant, icon }) => {
+const Button: FC<ButtonProps> = ({
+  action = undefined,
+  href = undefined,
+  disabled,
+  loading,
+  children,
+  variant,
+  icon,
+}) => {
   const createClassName = () => {
     let className = `${variant ? `btn-${variant}` : 'btn'} ${disabled ? 'btn--disabled' : ''}`;
     if (icon) {
@@ -34,10 +45,17 @@ const Button: FC<ButtonProps> = ({ action = undefined, href = undefined, disable
       {icon && <i className={icon} />} {children}
     </LinkElement>
   ) : (
-    <ButtonElem className={createClassName()} onClick={onClick} disabled={disabled}>
+    <ButtonElem
+      style={{ display: 'inline-block' }}
+      className={createClassName()}
+      onClick={onClick}
+      disabled={loading || disabled}
+    >
       {icon && (typeof icon === 'string' ? <i className={`icon ${icon}`} /> : icon)}
 
       {!icon && children}
+
+      {loading && <LoadingOutlined style={{ marginLeft: '0.5rem' }} />}
     </ButtonElem>
   );
 
diff --git a/src/components/Organizations/AddGroupToProject/index.js b/src/components/Organizations/AddGroupToProject/index.js
index 40807ddc..7ecf19b6 100644
--- a/src/components/Organizations/AddGroupToProject/index.js
+++ b/src/components/Organizations/AddGroupToProject/index.js
@@ -51,7 +51,7 @@ export const AddGroupToProject = ({
       <Modal isOpen={open} onRequestClose={closeModal} contentLabel={`Confirm`} style={customStyles}>
         <React.Fragment>
           <Mutation mutation={ADD_GROUP_PROJECT_MUTATION} onError={e => console.error(e)}>
-            {(addGroupProject, { error, data }) => {
+            {(addGroupProject, { called, error, data }) => {
               if (error) {
                 return <div>{error.message}</div>;
               }
@@ -86,7 +86,7 @@ export const AddGroupToProject = ({
                   </label>
                   <Footer>
                     <Button
-                      disabled={selectedProject === null}
+                      disabled={called || selectedProject === null}
                       action={() => {
                         addGroupProject({
                           variables: {
@@ -96,6 +96,7 @@ export const AddGroupToProject = ({
                         });
                       }}
                       variant="primary"
+                      loading={called}
                     >
                       Add
                     </Button>
diff --git a/src/components/Organizations/AddNotificationToProject/index.js b/src/components/Organizations/AddNotificationToProject/index.js
index 434614e2..57f22e12 100644
--- a/src/components/Organizations/AddNotificationToProject/index.js
+++ b/src/components/Organizations/AddNotificationToProject/index.js
@@ -57,7 +57,7 @@ export const AddNotificationToProject = ({
       <Modal isOpen={open} onRequestClose={closeModal} contentLabel={`Confirm`} style={customStyles}>
         <React.Fragment>
           <Mutation mutation={ADD_PROJECT_NOTIFICATION_MUTATION} onError={e => console.error(e)}>
-            {(addNotificationToProject, {  error, data }) => {
+            {(addNotificationToProject, { called, error, data }) => {
               if (error) {
                 return <div>{error.message}</div>;
               }
@@ -84,7 +84,7 @@ export const AddNotificationToProject = ({
                     Notification
                     <RoleSelect>
                       <ReactSelect
-                        className='select'
+                        className="select"
                         menuPortalTarget={document.body}
                         styles={{
                           menuPortal: base => ({ ...base, zIndex: 9999, color: 'black', fontSize: '16px' }),
@@ -105,7 +105,7 @@ export const AddNotificationToProject = ({
                   </label>
                   <Footer>
                     <Button
-                      disabled={selectedProject === null}
+                      disabled={called || selectedProject === null}
                       action={() => {
                         addNotificationToProject({
                           variables: {
@@ -116,6 +116,7 @@ export const AddNotificationToProject = ({
                         });
                       }}
                       variant="primary"
+                      loading={called}
                     >
                       Add
                     </Button>
diff --git a/src/components/Organizations/AddUserToGroup/index.js b/src/components/Organizations/AddUserToGroup/index.js
index ea57a533..9181a8c1 100644
--- a/src/components/Organizations/AddUserToGroup/index.js
+++ b/src/components/Organizations/AddUserToGroup/index.js
@@ -52,10 +52,13 @@ export const AddUserToGroup = ({
   selectedRole,
   setSelectedRole,
   onAddUser,
+  users,
 }) => {
+  const userAlreadyExists = users && users.find(u => u.user.email === inputValueEmail);
+
   return (
     <Mutation mutation={ADD_GROUP_MEMBER_MUTATION} onError={err => console.error(err)}>
-      {(addGroupMember, { error, data }) => {
+      {(addGroupMember, { called, error, data }) => {
         if (error) {
           return <div>{error.message}</div>;
         }
@@ -67,7 +70,7 @@ export const AddUserToGroup = ({
         }
         return (
           <NewMember>
-            <h4>Add User</h4>
+            <h4>{userAlreadyExists ? 'Update User' : 'Add User'}</h4>
             <div className="form-box">
               <label>
                 User Email: <span style={{ color: '#E30000' }}>*</span>
@@ -76,7 +79,7 @@ export const AddUserToGroup = ({
                   type="text"
                   placeholder="Enter Email"
                   value={inputValueEmail}
-                  onChange={setInputValue}
+                  onChange={e => setInputValue({ target: { value: e.target.value.trim() } })}
                 />
               </label>
             </div>
@@ -106,7 +109,7 @@ export const AddUserToGroup = ({
             <div>
               <Footer>
                 <Button
-                  disabled={inputValueEmail === '' || !selectedRole}
+                  disabled={called || inputValueEmail === '' || !selectedRole}
                   action={() => {
                     addGroupMember({
                       variables: {
@@ -117,8 +120,9 @@ export const AddUserToGroup = ({
                     });
                   }}
                   variant="primary"
+                  loading={called}
                 >
-                  Add
+                  {userAlreadyExists ? 'Update' : 'Add'}
                 </Button>
                 <Button variant="ghost" action={() => close()}>
                   Cancel
diff --git a/src/components/Organizations/AddUserToGroupSelect/index.tsx b/src/components/Organizations/AddUserToGroupSelect/index.tsx
index e4b9f3cc..41f7d6ed 100644
--- a/src/components/Organizations/AddUserToGroupSelect/index.tsx
+++ b/src/components/Organizations/AddUserToGroupSelect/index.tsx
@@ -73,7 +73,7 @@ const AddUserToGroupSelect: FC<Props> = ({ groups, newUserState, setNewUserState
       mutation={ADD_GROUP_MEMBER_MUTATION}
       onError={err => console.error(err)}
     >
-      {(addGroupMember, { error, data }) => {
+      {(addGroupMember, { called, error, data }) => {
         if (error) {
           return <div>{error.message}</div>;
         }
@@ -94,7 +94,7 @@ const AddUserToGroupSelect: FC<Props> = ({ groups, newUserState, setNewUserState
                   type="text"
                   placeholder="Enter Email"
                   value={newUserState.email}
-                  onChange={e => setNewUserState({ ...newUserState, email: e.target.value })}
+                  onChange={e => setNewUserState({ ...newUserState, email: e.target.value.trim() })}
                 />
               </label>
             </div>
@@ -151,7 +151,8 @@ const AddUserToGroupSelect: FC<Props> = ({ groups, newUserState, setNewUserState
             <div>
               <Footer>
                 <Button
-                  disabled={!Object.values(newUserState).every(item => !!item)}
+                  loading={called}
+                  disabled={called || !Object.values(newUserState).every(item => !!item)}
                   action={() => {
                     void addGroupMember({
                       variables: {
diff --git a/src/components/Organizations/AddUserToOrganization/index.js b/src/components/Organizations/AddUserToOrganization/index.js
index df3cc458..ee8a85c4 100644
--- a/src/components/Organizations/AddUserToOrganization/index.js
+++ b/src/components/Organizations/AddUserToOrganization/index.js
@@ -29,11 +29,12 @@ export const AddUserToOrganization = ({
   checkboxValueOwner,
   setCheckboxValueOwner,
   onAddUser,
+  users,
 }) => {
-
+  const userAlreadyExists = users.find(u => u.email === inputValueEmail);
   return (
     <Mutation mutation={ADD_USER_MUTATION} onError={err => console.error(err)}>
-      {(addUser, { error, data }) => {
+      {(addUser, { called, error, data }) => {
         if (error) {
           return <div>{error.message}</div>;
         }
@@ -45,7 +46,7 @@ export const AddUserToOrganization = ({
         }
         return (
           <NewUser>
-            <h4>Add User</h4>
+            <h4>{userAlreadyExists ? 'Update user' : 'Add User'}</h4>
             <div className="form-box">
               <label>
                 User Email: <span style={{ color: '#E30000' }}>*</span>
@@ -54,7 +55,7 @@ export const AddUserToOrganization = ({
                   type="text"
                   placeholder="Enter Email"
                   value={inputValueEmail}
-                  onChange={setInputValue}
+                  onChange={e => setInputValue({ target: { value: e.target.value.trim() } })}
                 />
               </label>
             </div>
@@ -71,7 +72,8 @@ export const AddUserToOrganization = ({
             <div>
               <Footer>
                 <Button
-                  disabled={inputValueEmail === ''}
+                  disabled={called || inputValueEmail === ''}
+                  loading={called}
                   action={() => {
                     addUser({
                       variables: {
@@ -83,7 +85,7 @@ export const AddUserToOrganization = ({
                   }}
                   variant="primary"
                 >
-                  Add
+                  {userAlreadyExists ? 'Update' : 'Add'}
                 </Button>
                 <Button variant="ghost" action={() => close()}>
                   Cancel
diff --git a/src/components/Organizations/GroupMembers/index.js b/src/components/Organizations/GroupMembers/index.js
index 76905a5a..2d338258 100644
--- a/src/components/Organizations/GroupMembers/index.js
+++ b/src/components/Organizations/GroupMembers/index.js
@@ -26,8 +26,8 @@ import { StyledGroupMembers } from './Styles';
 
 export const getLinkData = (userSlug, organizationSlug, organizationName) => ({
   urlObject: {
-    pathname: '/organizations/users',
-    query: { user: userSlug, organizationSlug: organizationSlug, organizationName: organizationName },
+    pathname: '/organizations/user',
+    query: { userSlug, organizationSlug: organizationSlug, organizationName: organizationName },
   },
   asPath: `/organizations/${organizationSlug}/users/${userSlug}`,
 });
@@ -76,7 +76,6 @@ const GroupMembers = ({
   const [deleteUserModalOpen, setDeleteUserModalOpen] = useState(false);
 
   const [addProjectModalOpen, setAddProjectModalOpen] = useState(false);
-
   const closeAddProjectModal = () => {
     setSelectedProject('');
     setAddProjectModalOpen(false);
@@ -91,7 +90,7 @@ const GroupMembers = ({
       key: 'name',
       render: ({ user }) => {
         const name = user.firstName;
-        return name ? <div>{user.firstName}</div> : <>First name - </>;
+        return name ? <div>{name}</div> : <> - </>;
       },
     },
     {
@@ -99,11 +98,11 @@ const GroupMembers = ({
       key: 'lastName',
       render: ({ user }) => {
         const lastName = user.lastName;
-        return lastName ? <div className="lastname">{lastName}</div> : <>Last name -</>;
+        return lastName ? <div className="lastname">{lastName}</div> : <> - </>;
       },
     },
     {
-      width: '20%',
+      width: '30%',
       key: 'email',
       render: ({ user }) => {
         const linkData = getLinkData(user.email, organizationId, organizationName);
@@ -117,7 +116,7 @@ const GroupMembers = ({
       },
     },
     {
-      width: '20%',
+      width: '15%',
       key: 'role',
       render: u => {
         return <div className={`role ${u.role}-label`}>{u.role}</div>;
@@ -125,7 +124,7 @@ const GroupMembers = ({
     },
 
     {
-      width: '25%',
+      width: '15%',
       key: 'actions',
       render: ({ user }) => {
         const linkData = getLinkData(user.email, organizationId, organizationName);
@@ -138,16 +137,19 @@ const GroupMembers = ({
             </Link>
 
             <Mutation mutation={REMOVE_USER_FROM_GROUP}>
-              {(removeUserFromGroup, { error, data }) => {
+              {(removeUserFromGroup, { called, error, data }) => {
                 if (error) {
                   return <div>{error.message}</div>;
                 }
                 if (data) {
                   refetch().then(() => setDeleteUserModalOpen(false));
                 }
+
                 return (
                   <RemoveUserConfirm
+                    loading={called}
                     removeName={user.email}
+                    info={{ userEmail: user.email, groupName }}
                     onRemove={() => {
                       return Promise.resolve(
                         removeUserFromGroup({
@@ -212,12 +214,12 @@ const GroupMembers = ({
             <Modal isOpen={projectModalOpen && selectedProject === project.id} onRequestClose={closeProjectModal}>
               <RemoveModalHeader>Are you sure?</RemoveModalHeader>
               <RemoveModalParagraph>
-                This action will delete this entry, you might not be able to get this back.
+                This action will unlink project <span>{project.name}</span> from group <span>{groupName}</span>.
               </RemoveModalParagraph>
 
               <Footer>
                 <Mutation mutation={REMOVE_GROUP_FROM_PROJECT} onError={e => console.error(e)}>
-                  {(removeGroupFromProject, { error, data }) => {
+                  {(removeGroupFromProject, { called, error, data }) => {
                     if (error) {
                       return <div>{error.message}</div>;
                     }
@@ -227,6 +229,8 @@ const GroupMembers = ({
                     return (
                       <Button
                         variant="primary"
+                        disabled={called}
+                        loading={called}
                         action={() => {
                           removeGroupFromProject({
                             variables: {
@@ -263,8 +267,13 @@ const GroupMembers = ({
           labelText="Users"
           emptyText="No users"
           disableUrlMutation
+          withSorter
+          numericSortOptions={{
+            displayName: 'Role',
+            orderList: ['OWNER', 'MAINTAINER', 'DEVELOPER', 'REPORTER', 'GUEST'],
+            orderListKey: 'role',
+          }}
         />
-
         <div className="tableAction">
           <Button action={() => setAddUserModalOpen(true)}>
             <AddButtonContent>
@@ -280,6 +289,7 @@ const GroupMembers = ({
           onRequestClose={() => setAddUserModalOpen(false)}
         >
           <AddUserToGroup
+            users={members}
             group={{ name: groupName }}
             modalOpen={addUserModalOpen}
             close={() => setAddUserModalOpen(false)}
@@ -311,7 +321,7 @@ const GroupMembers = ({
           onRequestClose={() => closeAddProjectModal()}
         >
           <Mutation mutation={ADD_GROUP_PROJECT_MUTATION} onError={e => console.error(e)}>
-            {(addGroupToProject, { error, data }) => {
+            {(addGroupToProject, { called, error, data }) => {
               if (error) {
                 return <div>{error.message}</div>;
               }
@@ -363,6 +373,8 @@ const GroupMembers = ({
                           },
                         });
                       }}
+                      disabled={called || !selectedProject}
+                      loading={called}
                       variant="primary"
                     >
                       Add
diff --git a/src/components/Organizations/Groups/index.js b/src/components/Organizations/Groups/index.js
index 24aab3d3..7d4aebed 100644
--- a/src/components/Organizations/Groups/index.js
+++ b/src/components/Organizations/Groups/index.js
@@ -9,7 +9,6 @@ import gql from 'graphql-tag';
 
 import AddUserToGroup from '../AddUserToGroup';
 import NewGroup from '../NewGroup';
-import OrgHeader from '../Orgheader';
 import PaginatedTable from '../PaginatedTable/PaginatedTable';
 import { Footer, RemoveModalHeader, RemoveModalParagraph, TableActions, Tag } from '../SharedStyles';
 import { DeleteButton, GroupsWrapper, StyledGroups } from './Styles';
@@ -135,23 +134,24 @@ const Groups = ({ groups = [], organizationId, organizationName, ableToAddGroup,
                 >
                   <RemoveModalHeader>Are you sure?</RemoveModalHeader>
                   <RemoveModalParagraph>
-                    This action will delete this entry, you might not be able to get this back.
+                    This action will delete group <span>{i.name}</span> from this organization.
                   </RemoveModalParagraph>
 
                   <Footer>
                     <Mutation mutation={DELETE_GROUP}>
-                      {(deleteGroup, { error, data }) => {
+                      {(deleteGroup, { called, error, data }) => {
                         if (error) {
                           return <div>{error.message}</div>;
                         }
                         if (data) {
                           refetch().then(() => modalAction('close', 'deleteGroup'));
-                          return <DeleteButton>Continue</DeleteButton>;
                         }
 
                         return (
                           <Button
                             variant="primary"
+                            loading={called}
+                            disabled={called}
                             action={() => {
                               deleteGroup({
                                 variables: {
@@ -180,16 +180,19 @@ const Groups = ({ groups = [], organizationId, organizationName, ableToAddGroup,
 
   return (
     <GroupsWrapper>
-      <OrgHeader headerText="Groups" />
       <StyledGroups>
         <PaginatedTable
           limit={10}
           data={groups}
           columns={Columns}
           withSorter
-          systemGroupCheckbox
-          numericSortKey="members"
+          defaultViewOptions={{
+            selected: false,
+            type: 'group',
+          }}
+          numericSortOptions={{ key: 'memberCount', displayName: 'Members' }}
           emptyText="No groups found"
+          labelText="Groups"
         />
         <NewGroup
           disabled={!ableToAddGroup}
diff --git a/src/components/Organizations/Manage/index.js b/src/components/Organizations/Manage/index.js
index 415811df..52c32a22 100644
--- a/src/components/Organizations/Manage/index.js
+++ b/src/components/Organizations/Manage/index.js
@@ -67,14 +67,14 @@ const Manage = ({ users = [], organization, organizationId, organizationName, re
       width: '15%',
       key: 'firstName',
       render: ({ firstName }) => {
-        return firstName ? <div className="name">{firstName}</div> : <>First name - </>;
+        return firstName ? <div className="name">{firstName}</div> : <> - </>;
       },
     },
     {
       width: '15%',
       key: 'lastName',
       render: ({ lastName }) => {
-        return lastName ? <div className="lastname">{lastName}</div> : <>Last name -</>;
+        return lastName ? <div className="lastname">{lastName}</div> : <> - </>;
       },
     },
     {
@@ -84,18 +84,18 @@ const Manage = ({ users = [], organization, organizationId, organizationName, re
         const linkData = getLinkData(email, organizationId, organizationName);
         return (
           <>
-            <div className="email" style={{ width: '200px' }}>
+            <div className="email" style={{ width: '60%' }}>
               <Link href={linkData.urlObject} as={linkData.asPath}>
                 <a>{email}</a>
               </Link>
             </div>
 
             {owner ? (
-              <Tag style={{ display: 'inline-block', marginLeft: '5rem' }} background="#47D3FF">
+              <Tag style={{ display: 'inline-block', marginLeft: '2.5rem' }} background="#47D3FF">
                 ORG OWNER
               </Tag>
             ) : (
-              <Tag style={{ display: 'inline-block', marginLeft: '5rem' }} background="#FF4747">
+              <Tag style={{ display: 'inline-block', marginLeft: '2.5rem' }} background="#FF4747">
                 ORG VIEWER
               </Tag>
             )}
@@ -119,12 +119,13 @@ const Manage = ({ users = [], organization, organizationId, organizationName, re
             <Modal isOpen={deleteUserModalOpen && selectedUser === user?.id} onRequestClose={closeUserModal}>
               <RemoveModalHeader>Are you sure?</RemoveModalHeader>
               <RemoveModalParagraph>
-                This action will delete this entry, you might not be able to get this back.
+                This action will delete user <span>{user.email}</span> from <span>{organizationName}</span>{' '}
+                Organization.
               </RemoveModalParagraph>
 
               <Footer>
                 <Mutation mutation={DELETE_USER}>
-                  {(removeUserFromOrganization, { error, data }) => {
+                  {(removeUserFromOrganization, { called, error, data }) => {
                     if (error) {
                       return <div>{error.message}</div>;
                     }
@@ -136,6 +137,8 @@ const Manage = ({ users = [], organization, organizationId, organizationName, re
                     return (
                       <Button
                         variant="primary"
+                        loading={called}
+                        disabled={called}
                         action={() => {
                           removeUserFromOrganization({
                             variables: {
@@ -178,6 +181,7 @@ const Manage = ({ users = [], organization, organizationId, organizationName, re
         onRequestClose={() => setAddUserModalOpen(false)}
       >
         <AddUserToOrganization
+          users={dynamicUsers}
           organization={organization}
           modalOpen={addUserModalOpen}
           close={() => setAddUserModalOpen(false)}
diff --git a/src/components/Organizations/NewGroup/index.js b/src/components/Organizations/NewGroup/index.js
index 64d55866..ba033212 100644
--- a/src/components/Organizations/NewGroup/index.js
+++ b/src/components/Organizations/NewGroup/index.js
@@ -1,8 +1,6 @@
-import React, { useRef } from 'react';
+import React from 'react';
 import { Mutation } from 'react-apollo';
 
-
-
 import Button from 'components/Button';
 import Modal from 'components/Modal';
 // @TODO: add this once the logic exists
@@ -11,11 +9,8 @@ import gql from 'graphql-tag';
 import { color } from 'lib/variables';
 import styled from 'styled-components';
 
-
-
 import { Footer, StyledNotification } from '../SharedStyles';
 
-
 const ADD_GROUP_MUTATION = gql`
   mutation addGroup($group: String!, $organization: Int!) {
     addGroup(input: { name: $group, organization: $organization }) {
@@ -47,9 +42,9 @@ const StyledNewGroup = styled.div`
     border-color: hsl(0, 0%, 80%);
     font-family: 'source-code-pro', sans-serif;
     font-size: 16px;
-    line-height:24px;
+    line-height: 24px;
     color: #000;
-    background:#fff;
+    background: #fff;
     padding: 8px;
     box-sizing: border-box;
   }
@@ -57,14 +52,14 @@ const StyledNewGroup = styled.div`
     border: 2px solid ${color.linkBlue};
     outline: none;
   }
-  input[type="text"]::placeholder{
-    color:#000;
+  input[type='text']::placeholder {
+    color: #000;
   }
   .select {
     font-family: 'source-sans-pro', sans-serif;
     line-height: 1.25rem;
-    div{
-      border-radius:0 !important;
+    div {
+      border-radius: 0 !important;
     }
   }
   .environment-name {
@@ -107,7 +102,7 @@ export const NewGroup = ({
       <Modal isOpen={open} onRequestClose={closeModal} contentLabel={`Confirm`} style={customStyles}>
         <React.Fragment>
           <Mutation mutation={ADD_GROUP_MUTATION}>
-            {(addGroup, { error, data }) => {
+            {(addGroup, { called, error, data }) => {
               if (error) {
                 return <div>{error.message}</div>;
               }
@@ -144,6 +139,7 @@ export const NewGroup = ({
                       <Footer>
                         <Button
                           disabled={
+                            called ||
                             inputValueGroup === '' ||
                             inputValueGroup.indexOf(' ') > 0 ||
                             existingGroupNames.includes(inputValueGroup)
@@ -157,6 +153,7 @@ export const NewGroup = ({
                             });
                           }}
                           variant="primary"
+                          loading={called}
                         >
                           Create
                         </Button>
@@ -177,4 +174,4 @@ export const NewGroup = ({
   );
 };
 
-export default withLogic(NewGroup);
\ No newline at end of file
+export default withLogic(NewGroup);
diff --git a/src/components/Organizations/NewProject/index.js b/src/components/Organizations/NewProject/index.js
index 62bcb697..d082734d 100644
--- a/src/components/Organizations/NewProject/index.js
+++ b/src/components/Organizations/NewProject/index.js
@@ -76,7 +76,7 @@ const OrgNewProject = ({
       <Modal isOpen={open} onRequestClose={closeModal} contentLabel={`Confirm`} style={customStyles}>
         <React.Fragment>
           <Mutation mutation={ADD_PROJECT_MUTATION} onError={e => console.error(e)}>
-            {(addGroupProject, { _, error, data }) => {
+            {(addGroupProject, { called, error, data }) => {
               if (error) {
                 return <div>{error.message}</div>;
               }
@@ -156,6 +156,7 @@ const OrgNewProject = ({
                       <Footer>
                         <Button
                           disabled={
+                            called ||
                             inputProjectName === '' ||
                             inputProjectName.indexOf(' ') > 0 ||
                             inputGitURL === '' ||
@@ -176,6 +177,7 @@ const OrgNewProject = ({
                             });
                           }}
                           variant="primary"
+                          loading={called}
                         >
                           Add
                         </Button>
diff --git a/src/components/Organizations/Notifications/index.js b/src/components/Organizations/Notifications/index.js
index caa6e03b..759685a6 100644
--- a/src/components/Organizations/Notifications/index.js
+++ b/src/components/Organizations/Notifications/index.js
@@ -240,7 +240,7 @@ const OrgNotifications = ({
                 </ModalChildren>
                 <Footer>
                   <Mutation mutation={UPDATE_NOTIFICATION_SLACK} onError={e => console.error(e)}>
-                    {(updateSlack, { error, data }) => {
+                    {(updateSlack, { called, error, data }) => {
                       if (error) {
                         return <div>{error.message}</div>;
                       }
@@ -252,6 +252,8 @@ const OrgNotifications = ({
                       return (
                         <Button
                           variant="primary"
+                          loading={called}
+                          disabled={called}
                           action={() => {
                             updateSlack({
                               variables: {
@@ -277,7 +279,7 @@ const OrgNotifications = ({
               </Modal>
               <div className="remove">
                 <Mutation mutation={REMOVE_NOTIFICATION_SLACK} onError={e => console.error(e)}>
-                  {(removeNotification, { error, data }) => {
+                  {(removeNotification, { called, error, data }) => {
                     if (error) {
                       return <div>{error.message}</div>;
                     }
@@ -286,7 +288,8 @@ const OrgNotifications = ({
                     }
                     return (
                       <RemoveNotificationConfirm
-                        removeName={project.name}
+                        loading={called}
+                        info={{ name: project.name }}
                         onRemove={() =>
                           removeNotification({
                             variables: {
@@ -366,7 +369,7 @@ const OrgNotifications = ({
                 </ModalChildren>
                 <Footer>
                   <Mutation mutation={UPDATE_NOTIFICATION_ROCKETCHAT} onError={e => console.error(e)}>
-                    {(updateRocketChat, { error, data }) => {
+                    {(updateRocketChat, { called, error, data }) => {
                       if (error) {
                         return <div>{error.message}</div>;
                       }
@@ -378,6 +381,8 @@ const OrgNotifications = ({
                       return (
                         <Button
                           variant="primary"
+                          loading={called}
+                          disabled={called}
                           action={() => {
                             updateRocketChat({
                               variables: {
@@ -403,7 +408,7 @@ const OrgNotifications = ({
               </Modal>
               <div className="remove">
                 <Mutation mutation={REMOVE_NOTIFICATION_ROCKETCHAT} onError={e => console.error(e)}>
-                  {(removeNotification, { error, data }) => {
+                  {(removeNotification, { called, error, data }) => {
                     if (error) {
                       return <div>{error.message}</div>;
                     }
@@ -412,7 +417,8 @@ const OrgNotifications = ({
                     }
                     return (
                       <RemoveNotificationConfirm
-                        removeName={project.name}
+                        loading={called}
+                        info={{ name: project.name }}
                         onRemove={() =>
                           removeNotification({
                             variables: {
@@ -475,7 +481,7 @@ const OrgNotifications = ({
                 </ModalChildren>
                 <Footer>
                   <Mutation mutation={UPDATE_NOTIFICATION_EMAIL} onError={e => console.error(e)}>
-                    {(updateEmail, { error, data }) => {
+                    {(updateEmail, { called, error, data }) => {
                       if (error) {
                         return <div>{error.message}</div>;
                       }
@@ -486,6 +492,8 @@ const OrgNotifications = ({
                       }
                       return (
                         <Button
+                          loading={called}
+                          disabled={called}
                           variant="primary"
                           action={() => {
                             updateEmail({
@@ -511,7 +519,7 @@ const OrgNotifications = ({
               </Modal>
               <div className="remove">
                 <Mutation mutation={REMOVE_NOTIFICATION_EMAIL} onError={e => console.error(e)}>
-                  {(removeNotification, { error, data }) => {
+                  {(removeNotification, { called, error, data }) => {
                     if (error) {
                       return <div>{error.message}</div>;
                     }
@@ -520,7 +528,8 @@ const OrgNotifications = ({
                     }
                     return (
                       <RemoveNotificationConfirm
-                        removeName={project.name}
+                        loading={called}
+                        info={{ name: project.name }}
                         onRemove={() =>
                           removeNotification({
                             variables: {
@@ -584,7 +593,7 @@ const OrgNotifications = ({
                 </ModalChildren>
                 <Footer>
                   <Mutation mutation={UPDATE_NOTIFICATION_WEBHOOK} onError={e => console.error(e)}>
-                    {(updateWebhook, { error, data }) => {
+                    {(updateWebhook, { called, error, data }) => {
                       if (error) {
                         return <div>{error.message}</div>;
                       }
@@ -595,6 +604,8 @@ const OrgNotifications = ({
                       }
                       return (
                         <Button
+                          loading={called}
+                          disabled={called}
                           variant="primary"
                           action={() => {
                             updateWebhook({
@@ -621,7 +632,7 @@ const OrgNotifications = ({
 
               <div className="remove">
                 <Mutation mutation={REMOVE_NOTIFICATION_WEBHOOK} onError={e => console.error(e)}>
-                  {(removeNotification, { error, data }) => {
+                  {(removeNotification, { called, error, data }) => {
                     if (error) {
                       return <div>{error.message}</div>;
                     }
@@ -630,7 +641,8 @@ const OrgNotifications = ({
                     }
                     return (
                       <RemoveNotificationConfirm
-                        removeName={project.name}
+                        loading={called}
+                        info={{ name: project.name }}
                         onRemove={() =>
                           removeNotification({
                             variables: {
@@ -697,7 +709,7 @@ const OrgNotifications = ({
                 </ModalChildren>
                 <Footer>
                   <Mutation mutation={UPDATE_NOTIFICATION_TEAMS} onError={e => console.error(e)}>
-                    {(updateTeams, { error, data }) => {
+                    {(updateTeams, { called, error, data }) => {
                       if (error) {
                         return <div>{error.message}</div>;
                       }
@@ -708,6 +720,8 @@ const OrgNotifications = ({
                       }
                       return (
                         <Button
+                          loading={called}
+                          disabled={called}
                           variant="primary"
                           action={() => {
                             updateTeams({
@@ -733,7 +747,7 @@ const OrgNotifications = ({
               </Modal>
               <div className="remove">
                 <Mutation mutation={REMOVE_NOTIFICATION_TEAMS} onError={e => console.error(e)}>
-                  {(removeNotification, { error, data }) => {
+                  {(removeNotification, { called, error, data }) => {
                     if (error) {
                       return <div>{error.message}</div>;
                     }
@@ -742,7 +756,8 @@ const OrgNotifications = ({
                     }
                     return (
                       <RemoveNotificationConfirm
-                        removeName={project.name}
+                        loading={called}
+                        info={{ name: project.name }}
                         onRemove={() =>
                           removeNotification({
                             variables: {
diff --git a/src/components/Organizations/PaginatedTable/PaginatedTable.tsx b/src/components/Organizations/PaginatedTable/PaginatedTable.tsx
index 927303b4..fda709e9 100644
--- a/src/components/Organizations/PaginatedTable/PaginatedTable.tsx
+++ b/src/components/Organizations/PaginatedTable/PaginatedTable.tsx
@@ -36,8 +36,16 @@ interface Props {
   usersTable?: boolean;
   withSorter?: boolean;
   disableUrlMutation?: boolean;
-  systemGroupCheckbox?: boolean;
-  numericSortKey?: string;
+  defaultViewOptions?: {
+    type: 'group' | 'user';
+    selected: boolean;
+  };
+  numericSortOptions?: {
+    key?: string;
+    displayName: string;
+    orderList?: string[];
+    orderListKey?: string;
+  };
   labelText?: string;
   limit: number;
   emptyText: string;
@@ -62,8 +70,8 @@ const PaginatedTable: FC<Props> = ({
   columns,
   usersTable,
   withSorter,
-  systemGroupCheckbox,
-  numericSortKey,
+  defaultViewOptions,
+  numericSortOptions,
   emptyText,
   labelText,
   limit = 10,
@@ -90,7 +98,9 @@ const PaginatedTable: FC<Props> = ({
 
   const [unfilteredData, setUnfilteredData] = useState(data);
 
-  const [systemGroupsSelected, setSystemGroupsSelected] = useState(false);
+  const [defaultsSelected, setDefaultsSelected] = useState(
+    (defaultViewOptions && defaultViewOptions.selected) || false
+  );
 
   useEffect(() => {
     setUnfilteredData(data);
@@ -105,19 +115,67 @@ const PaginatedTable: FC<Props> = ({
           return k.toLowerCase().includes(searchStr.toLowerCase());
         });
 
-    if (!systemGroupsSelected) {
-      filtered = filtered.filter(dataItem => dataItem.type !== 'project-default-group');
+    if (!defaultsSelected) {
+      if (defaultViewOptions?.type === 'group') {
+        filtered = filtered.filter(dataItem => dataItem.type !== 'project-default-group');
+      }
+      if (defaultViewOptions?.type === 'user') {
+        filtered = filtered.filter(dataItem => !(dataItem.email as string).startsWith('default-user'));
+      }
     }
     if (withSorter) {
       if (sortMethod === 'alphabetical') {
         return filtered.sort(function (a, b) {
-          return a.name.localeCompare(b.name);
+          if (a.name && b.name) {
+            return a.name.localeCompare(b.name);
+          } else {
+            //@ts-ignore
+            return (a?.user?.firstName as string).localeCompare(b?.user?.firstName as string);
+          }
         });
       }
-      if (sortMethod === 'numeric' && numericSortKey) {
+      if (sortMethod === 'numeric' && typeof numericSortOptions !== 'undefined') {
         return filtered.sort(function (a, b) {
-          const first = a[numericSortKey].length as number;
-          const second = b[numericSortKey].length as number;
+          // determine if directly filtering an array value or a primitive.
+          let first: number = 0,
+            second: number = 0;
+
+          const key = numericSortOptions.key;
+          if (key) {
+            if (Array.isArray(a[key])) {
+              first = a[key].length as number;
+              second = b[key].length as number;
+            } else {
+              first = a[key] as unknown as number;
+              second = b[key] as unknown as number;
+            }
+            return second - first;
+          } else {
+            // precedence sort
+            const list = numericSortOptions.orderList;
+            const listKey = numericSortOptions.orderListKey;
+            if (list && listKey) {
+              const roleToIdx = {};
+              list.forEach((role, idx) => {
+                roleToIdx[role] = idx;
+              });
+              //@ts-ignore
+              first = roleToIdx[a[listKey]] as number;
+              //@ts-ignore
+              second = roleToIdx[b[listKey]] as number;
+
+              if (first === undefined && second === undefined) {
+                // not in the provided list, keep the original position
+                return 0;
+              } else if (first === undefined) {
+                return 1;
+              } else if (second === undefined) {
+                return -1;
+              } else {
+                return first - second;
+              }
+            }
+          }
 
           return second - first;
         });
@@ -127,7 +185,7 @@ const PaginatedTable: FC<Props> = ({
     } else {
       return filtered;
     }
-  }, [searchStr, withSorter, sortMethod, unfilteredData, systemGroupsSelected]);
+  }, [searchStr, withSorter, sortMethod, unfilteredData, defaultsSelected]);
 
   const resultIndex = (currentPage - 1) * resultLimit;
 
@@ -215,14 +273,20 @@ const PaginatedTable: FC<Props> = ({
   return (
     <StyledTable className="paginatedTable">
       <Filters className="filters">
-        {labelText ? <span className="labelText">{labelText}</span> : ''}
-        {systemGroupCheckbox ? (
+        {labelText ? (
+          <span className="labelText">
+            {labelText} {`(${resultsToDisplay.length})`}
+          </span>
+        ) : (
+          ''
+        )}
+        {defaultViewOptions ? (
           <Checkbox>
-            Show system groups
+            {defaultViewOptions.type === 'group' ? 'Show system groups' : 'Show default users'}
             <input
               type="checkbox"
-              checked={systemGroupsSelected}
-              onChange={({ target: { checked } }) => setSystemGroupsSelected(checked)}
+              checked={defaultsSelected}
+              onChange={({ target: { checked } }) => setDefaultsSelected(checked)}
             />
           </Checkbox>
         ) : null}
@@ -233,8 +297,8 @@ const PaginatedTable: FC<Props> = ({
             </option>
             <option value={undefined}>None</option>
             <option value="alphabetical">Alphabetical</option>
-            {numericSortKey && (
-              <option value="numeric">{numericSortKey[0].toUpperCase() + numericSortKey.slice(1)}</option>
+            {typeof numericSortOptions !== 'undefined' && (
+              <option value="numeric">{numericSortOptions.displayName}</option>
             )}
           </select>
         ) : null}
diff --git a/src/components/Organizations/PaginatedTable/Styles.tsx b/src/components/Organizations/PaginatedTable/Styles.tsx
index d8e9fcee..6bff0c0a 100644
--- a/src/components/Organizations/PaginatedTable/Styles.tsx
+++ b/src/components/Organizations/PaginatedTable/Styles.tsx
@@ -67,6 +67,10 @@ export const TableColumn = styled.div<{ width: string }>`
   width: ${props => props.width};
   align-items: center;
   display: flex;
+  & > .email{
+    word-wrap:break-word;
+    word-break:break-all;
+  }
   &:last-child {
     justify-content: flex-end;
   }
diff --git a/src/components/Organizations/ProjectGroupMembers/index.js b/src/components/Organizations/ProjectGroupMembers/index.js
index 5833c69f..3d5d2ce1 100644
--- a/src/components/Organizations/ProjectGroupMembers/index.js
+++ b/src/components/Organizations/ProjectGroupMembers/index.js
@@ -30,7 +30,7 @@ const ProjectGroupMembers = ({ groups = [], organizationId, organizationName, pr
   return (
     <StyledGroupMembers>
       <div className="header" style={{ marginTop: '20px', paddingRight: '0' }}>
-        <label style={{ paddingLeft: '0' }}>Groups</label>
+        <label style={{ paddingLeft: '0' }}>Groups ({groups.length})</label>
         <input
           aria-labelledby="search"
           className="searchInput"
@@ -72,12 +72,14 @@ const ProjectGroupMembers = ({ groups = [], organizationId, organizationName, pr
                     if (error) {
                       return <div>{error.message}</div>;
                     }
-                    if (called) {
-                      return <div>Success</div>;
-                    }
                     return (
                       <RemoveProjectGroupConfirm
-                        removeName={group.name}
+                        loading={called}
+                        info={{
+                          type: 'group',
+                          deleteName: group.name,
+                          projectName: projectName,
+                        }}
                         onRemove={() => {
                           removeGroupFromProject({
                             variables: {
diff --git a/src/components/Organizations/ProjectNotifications/index.js b/src/components/Organizations/ProjectNotifications/index.js
index 9077ed59..0be5b179 100644
--- a/src/components/Organizations/ProjectNotifications/index.js
+++ b/src/components/Organizations/ProjectNotifications/index.js
@@ -206,7 +206,7 @@ const ProjectNotifications = ({ notifications = [], organizationId, projectName,
   return (
     <StyledProjectNotifications>
       <div className="header" style={{ marginTop: '20px', paddingRight: '0' }}>
-        <label style={{ paddingLeft: '0' }}>Notifications</label>
+        <label style={{ paddingLeft: '0' }}>Notifications ({notifications.length})</label>
         <input
           aria-labelledby="search"
           className="searchInput"
@@ -235,9 +235,6 @@ const ProjectNotifications = ({ notifications = [], organizationId, projectName,
                   if (error) {
                     return <div>{error.message}</div>;
                   }
-                  if (called) {
-                    return <div>Success</div>;
-                  }
                   return (
                     <TableActions>
                       <span
@@ -256,7 +253,8 @@ const ProjectNotifications = ({ notifications = [], organizationId, projectName,
                       </span>
 
                       <RemoveProjectGroupConfirm
-                        removeName={notification.name}
+                        loading={called}
+                        info={{ type: 'notification', projectName: projectName, deleteName: notification.name }}
                         onRemove={() => {
                           removeNotificationFromProject({
                             variables: {
diff --git a/src/components/Organizations/Projects/Styles.tsx b/src/components/Organizations/Projects/Styles.tsx
index 8956f0f8..b9afabd8 100644
--- a/src/components/Organizations/Projects/Styles.tsx
+++ b/src/components/Organizations/Projects/Styles.tsx
@@ -165,3 +165,11 @@ export const OrgProjectWrapper = styled.div`
     padding: 0;
   }
 `;
+
+export const ProjectRoute = styled.div`
+  margin-left:1.5rem;
+  font-size:13px;
+  background:${props => props.theme.backgrounds.sidebar};
+  padding:0.25rem 0.5rem;
+  color:#497ffa;
+`;
\ No newline at end of file
diff --git a/src/components/Organizations/Projects/index.js b/src/components/Organizations/Projects/index.js
index 942cd785..a8aca2e7 100644
--- a/src/components/Organizations/Projects/index.js
+++ b/src/components/Organizations/Projects/index.js
@@ -5,13 +5,14 @@ import { DeleteOutlined, EditOutlined } from '@ant-design/icons';
 import Button from 'components/Button';
 import Modal from 'components/Modal';
 import ProjectGroupLink from 'components/link/Organizations/ProjectGroup';
+import ProjectLink from 'components/link/Project';
 import gql from 'graphql-tag';
 
 import { DeleteButton } from '../Groups/Styles';
 import NewProject from '../NewProject';
 import PaginatedTable from '../PaginatedTable/PaginatedTable';
-import { Footer, RemoveModalHeader, RemoveModalParagraph, TableActions } from '../SharedStyles';
-import { StyledOrgProjects } from './Styles';
+import { Footer, RemoveModalHeader, RemoveModalParagraph, TableActions, Tag } from '../SharedStyles';
+import { ProjectRoute, StyledOrgProjects } from './Styles';
 
 const DELETE_PROJECT = gql`
   mutation deleteProject($project: String!) {
@@ -34,14 +35,20 @@ const OrgProjects = ({ projects = [], organizationId, organizationName, refresh,
       key: 'name',
       render: project => {
         return (
-          <ProjectGroupLink
-            projectGroupSlug={project.name}
-            organizationSlug={organizationId}
-            organizationName={organizationName}
-            key={project.id}
-          >
-            {project.name}
-          </ProjectGroupLink>
+          <>
+            <ProjectGroupLink
+              projectGroupSlug={project.name}
+              organizationSlug={organizationId}
+              organizationName={organizationName}
+              key={project.id}
+            >
+              {project.name}
+            </ProjectGroupLink>
+
+            <ProjectLink projectSlug={project.name} key={project.id}>
+              <ProjectRoute>ROUTE</ProjectRoute>
+            </ProjectLink>
+          </>
         );
       },
     },
@@ -86,12 +93,12 @@ const OrgProjects = ({ projects = [], organizationId, organizationName, refresh,
               >
                 <RemoveModalHeader>Are you sure?</RemoveModalHeader>
                 <RemoveModalParagraph>
-                  This action will delete this entry, you might not be able to get this back.
+                  This action will delete project <span>{project.name}</span> from this organization.
                 </RemoveModalParagraph>
 
                 <Footer>
                   <Mutation mutation={DELETE_PROJECT} onError={e => console.error(e)}>
-                    {(deleteProject, { error, data }) => {
+                    {(deleteProject, { called, error, data }) => {
                       if (error) {
                         return <div>{error.message}</div>;
                       }
@@ -103,6 +110,8 @@ const OrgProjects = ({ projects = [], organizationId, organizationName, refresh,
                       return (
                         <Button
                           variant="primary"
+                          disabled={called}
+                          loading={called}
                           action={() => {
                             deleteProject({
                               variables: {
@@ -134,7 +143,7 @@ const OrgProjects = ({ projects = [], organizationId, organizationName, refresh,
         limit={10}
         data={projects}
         columns={Columns}
-        numericSortKey="groups"
+        numericSortOptions={{ key: 'groups', displayName: 'Groups' }}
         withSorter
         labelText="Projects"
         emptyText="No Projects"
diff --git a/src/components/Organizations/RemoveNotificationConfirm/index.js b/src/components/Organizations/RemoveNotificationConfirm/index.js
index 6c3db0e3..f591607e 100644
--- a/src/components/Organizations/RemoveNotificationConfirm/index.js
+++ b/src/components/Organizations/RemoveNotificationConfirm/index.js
@@ -10,7 +10,7 @@ import { Footer, RemoveModalHeader, RemoveModalParagraph } from '../SharedStyles
 /**
  * Confirms the removal of the specified email from group
  */
-export const RemoveNotificationConfirm = ({ removeName, onRemove, open, openModal, closeModal }) => {
+export const RemoveNotificationConfirm = ({ info, onRemove, open, openModal, closeModal, loading }) => {
   return (
     <React.Fragment>
       <Button variant="red" action={openModal} icon={<DeleteOutlined />}></Button>
@@ -19,10 +19,10 @@ export const RemoveNotificationConfirm = ({ removeName, onRemove, open, openModa
         <React.Fragment>
           <RemoveModalHeader>Are you sure?</RemoveModalHeader>
           <RemoveModalParagraph>
-            This action will delete this entry, you might not be able to get this back.
+            This action will delete <span>{info.name}</span> notification.
           </RemoveModalParagraph>
           <Footer>
-            <Button action={onRemove} variant="primary">
+            <Button action={onRemove} disabled={loading} loading={loading} variant="primary">
               Continue
             </Button>
             <Button action={closeModal} variant="ghost">
diff --git a/src/components/Organizations/RemoveProjectGroupConfirm/index.js b/src/components/Organizations/RemoveProjectGroupConfirm/index.js
index 524607ed..20f583ec 100644
--- a/src/components/Organizations/RemoveProjectGroupConfirm/index.js
+++ b/src/components/Organizations/RemoveProjectGroupConfirm/index.js
@@ -10,7 +10,7 @@ import { Footer, RemoveModalHeader, RemoveModalParagraph } from '../SharedStyles
 /**
  * Confirms the removal of the specified email from group
  */
-export const RemoveProjectGroupConfirm = ({ onRemove, open, openModal, closeModal }) => {
+export const RemoveProjectGroupConfirm = ({ info, onRemove, open, openModal, closeModal, loading }) => {
   return (
     <React.Fragment>
       <Button variant="red" action={openModal} icon={<DisconnectOutlined className="delete" />} />
@@ -19,11 +19,12 @@ export const RemoveProjectGroupConfirm = ({ onRemove, open, openModal, closeModa
         <React.Fragment>
           <RemoveModalHeader>Are you sure?</RemoveModalHeader>
           <RemoveModalParagraph>
-            This action will delete this entry, you might not be able to get this back.
+            This action will unlink {info.type} <span>{info.deleteName}</span> from project{' '}
+            <span>{info.projectName}</span>.
           </RemoveModalParagraph>
 
           <Footer>
-            <Button action={onRemove} variant="primary">
+            <Button action={onRemove} disabled={loading} loading={loading} variant="primary">
               Continue
             </Button>
             <Button variant="ghost" action={() => closeModal()}>
diff --git a/src/components/Organizations/RemoveUserConfirm/index.js b/src/components/Organizations/RemoveUserConfirm/index.js
index 1615fa3d..94a6a569 100644
--- a/src/components/Organizations/RemoveUserConfirm/index.js
+++ b/src/components/Organizations/RemoveUserConfirm/index.js
@@ -10,7 +10,7 @@ import { Footer, RemoveModalHeader, RemoveModalParagraph } from '../SharedStyles
 /**
  * Confirms the removal of the specified email from group
  */
-export const RemoveUserConfirm = ({ withText, onRemove, open, openModal, closeModal }) => {
+export const RemoveUserConfirm = ({ withText, onRemove, open, openModal, closeModal, info, loading }) => {
   return (
     <React.Fragment>
       {!withText ? (
@@ -27,7 +27,7 @@ export const RemoveUserConfirm = ({ withText, onRemove, open, openModal, closeMo
         <React.Fragment>
           <RemoveModalHeader>Are you sure?</RemoveModalHeader>
           <RemoveModalParagraph>
-            This action will delete this entry, you might not be able to get this back.
+            This action will unlink user <span>{info.userEmail}</span> from group <span>{info.groupName}. </span>
           </RemoveModalParagraph>
 
           <Footer>
@@ -36,6 +36,8 @@ export const RemoveUserConfirm = ({ withText, onRemove, open, openModal, closeMo
                 onRemove().then(closeModal);
               }}
               variant="primary"
+              disabled={loading}
+              loading={loading}
             >
               Continue
             </Button>
diff --git a/src/components/Organizations/SharedStyles.tsx b/src/components/Organizations/SharedStyles.tsx
index 42f5b62f..d0acf796 100644
--- a/src/components/Organizations/SharedStyles.tsx
+++ b/src/components/Organizations/SharedStyles.tsx
@@ -384,6 +384,7 @@ export const TableWrapper = styled.div`
     line-height: 24px;
     margin-top: 15px;
     margin-bottom: 0;
+    display:flex;
   }
   .paginatedTable,
   .filters,
@@ -410,6 +411,9 @@ export const RemoveModalHeader = styled.h3`
 export const RemoveModalParagraph = styled.p`
   font-size: 16px;
   line-height: 24px;
+  span{
+    font-weight:bold;
+  }
 `;
 
 export const AddButtonContent = styled.span`
diff --git a/src/components/Organizations/User/index.tsx b/src/components/Organizations/User/index.tsx
index 07411565..40b72a2b 100644
--- a/src/components/Organizations/User/index.tsx
+++ b/src/components/Organizations/User/index.tsx
@@ -122,9 +122,9 @@ const User: FC<UserProps> = ({ user, organizationName, organizationId, refetch }
               isOpen={groupModalOpen && selectedGroup === group?.id}
               onRequestClose={closeGroupModal}
             >
-              <RemoveModalHeader>Remove user?</RemoveModalHeader>
+              <RemoveModalHeader>Are you sure?</RemoveModalHeader>
               <RemoveModalParagraph>
-                This action will remove this user from a group, you might not be able to get this back.
+                This action will unlink this user from group <span>{group.name}</span>.
               </RemoveModalParagraph>
 
               <Footer>
@@ -136,7 +136,7 @@ const User: FC<UserProps> = ({ user, organizationName, organizationId, refetch }
                 }>
                   mutation={DELETE_USER_FROM_GROUP}
                 >
-                  {(removeUserFromGroup, { error, data }) => {
+                  {(removeUserFromGroup, { called, error, data }) => {
                     if (error) {
                       return <div>{error.message}</div>;
                     }
@@ -146,6 +146,8 @@ const User: FC<UserProps> = ({ user, organizationName, organizationId, refetch }
                     return (
                       <Button
                         variant="primary"
+                        disabled={called}
+                        loading={called}
                         action={() => {
                           void removeUserFromGroup({
                             variables: {
diff --git a/src/components/Organizations/Users/index.js b/src/components/Organizations/Users/index.js
index 30f980f9..68a25e5f 100644
--- a/src/components/Organizations/Users/index.js
+++ b/src/components/Organizations/Users/index.js
@@ -12,7 +12,7 @@ import gql from 'graphql-tag';
 import useSortableData from '../../../lib/withSortedItems';
 import AddUserToGroupSelect from '../AddUserToGroupSelect';
 import PaginatedTable from '../PaginatedTable/PaginatedTable';
-import { AddButtonContent, Footer, RemoveModalHeader, RemoveModalParagraph, TableActions } from '../SharedStyles';
+import { AddButtonContent, Footer, RemoveModalHeader, RemoveModalParagraph, TableActions, Tag } from '../SharedStyles';
 import { StyledUsers } from './Styles';
 
 export const getLinkData = (userSlug, organizationSlug, organizationName) => ({
@@ -72,15 +72,25 @@ const Users = ({ users = [], organization, organizationId, organizationName, ref
     {
       width: '15%',
       key: 'firstName',
-      render: ({ firstName }) => {
-        return firstName ? <div className="name">{firstName}</div> : <>First name - </>;
+      render: ({ firstName, email }) => {
+        const isDefaultUser = email.startsWith('default-user');
+        if (isDefaultUser) return <div className="firstName"></div>;
+        return firstName ? <div className="name">{firstName}</div> : <> - </>;
       },
     },
     {
       width: '15%',
       key: 'lastName',
-      render: ({ lastName }) => {
-        return lastName ? <div className="lastname">{lastName}</div> : <>Last name -</>;
+      render: ({ lastName, email }) => {
+        const isDefaultUser = email.startsWith('default-user');
+        if (isDefaultUser)
+          return (
+            <Tag style={{ display: 'inline' }} background="#262D65">
+              DEFAULT USER
+            </Tag>
+          );
+
+        return lastName ? <div className="lastname">{lastName}</div> : <> - </>;
       },
     },
     {
@@ -134,7 +144,7 @@ const Users = ({ users = [], organization, organizationId, organizationName, ref
 
                   <Footer>
                     <Mutation mutation={DELETE_USER}>
-                      {(removeUserFromOrganizationGroups, { error, data }) => {
+                      {(removeUserFromOrganizationGroups, { called, error, data }) => {
                         if (error) {
                           return <div>{error.message}</div>;
                         }
@@ -145,6 +155,8 @@ const Users = ({ users = [], organization, organizationId, organizationName, ref
                         }
                         return (
                           <Button
+                            disabled={called}
+                            loading={called}
                             variant="primary"
                             action={() => {
                               removeUserFromOrganizationGroups({
@@ -180,6 +192,10 @@ const Users = ({ users = [], organization, organizationId, organizationName, ref
         data={dynamicUsers}
         columns={UsersColumns}
         usersTable={true}
+        defaultViewOptions={{
+          type: 'user',
+          selected: false,
+        }}
         labelText="Users"
         emptyText="No Users"
       />
diff --git a/src/pages/organizations/project.js b/src/pages/organizations/project.js
index 35a1a4bf..7d2ef374 100644
--- a/src/pages/organizations/project.js
+++ b/src/pages/organizations/project.js
@@ -14,7 +14,8 @@ import ProjectGroupMembers from 'components/Organizations/ProjectGroupMembers';
 import ProjectGroupSkeleton from 'components/Organizations/ProjectGroupMembers/ProjectGroupSkeleton';
 import ProjectNotifications from 'components/Organizations/ProjectNotifications';
 import ProjectNotificationsSkeleton from 'components/Organizations/ProjectNotifications/ProjectNotificationsSkeleton';
-import { OrgProjectWrapper } from 'components/Organizations/Projects/Styles';
+import { OrgProjectWrapper, ProjectRoute } from 'components/Organizations/Projects/Styles';
+import ProjectLink from 'components/link/Project';
 import MainLayout from 'layouts/MainLayout';
 import ProjectAndOrganizationByID from 'lib/query/organizations/ProjectAndOrganizationByID';
 
@@ -104,7 +105,12 @@ export const PageGroupProject = ({ router }) => {
           <OrgProjectWrapper>
             <OrgHeader headerText="Project" />
             <TableWrapper>
-              <h3>{project.name}</h3>
+              <h3>
+                {project.name}
+                <ProjectLink projectSlug={project.name} key={project.id}>
+                  <ProjectRoute>ROUTE</ProjectRoute>
+                </ProjectLink>
+              </h3>
               <ProjectGroupMembers
                 refresh={handleRefetch}
                 projectName={project.name}

From 052e622cd3f48a221ebed2eec76fc2deefaf36c7 Mon Sep 17 00:00:00 2001
From: Davit <davedabyeet@gmail.com>
Date: Fri, 8 Sep 2023 09:45:05 +0400
Subject: [PATCH 2/3] sorter key change

---
 src/components/Organizations/Projects/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Organizations/Projects/index.js b/src/components/Organizations/Projects/index.js
index a8aca2e7..3df2a757 100644
--- a/src/components/Organizations/Projects/index.js
+++ b/src/components/Organizations/Projects/index.js
@@ -143,7 +143,7 @@ const OrgProjects = ({ projects = [], organizationId, organizationName, refresh,
         limit={10}
         data={projects}
         columns={Columns}
-        numericSortOptions={{ key: 'groups', displayName: 'Groups' }}
+        numericSortOptions={{ key: 'groupCount', displayName: 'Groups' }}
         withSorter
         labelText="Projects"
         emptyText="No Projects"

From 3fa6196ae3c569e274dc439944961787df817577 Mon Sep 17 00:00:00 2001
From: Davit <davedabyeet@gmail.com>
Date: Mon, 11 Sep 2023 00:42:47 +0400
Subject: [PATCH 3/3] small fixes

---
 .../Organizations/GroupMembers/index.js       | 20 ++++++++++++++++---
 src/components/Organizations/Manage/index.js  | 15 ++++++++++++--
 .../PaginatedTable/PaginatedTable.tsx         |  2 +-
 .../ProjectGroupMembers/index.js              |  2 +-
 .../Organizations/Projects/Styles.tsx         |  2 +-
 .../Organizations/Projects/index.js           |  6 +++---
 src/components/link/Project.js                |  6 ++++--
 src/pages/organizations/project.js            |  6 +++---
 8 files changed, 43 insertions(+), 16 deletions(-)

diff --git a/src/components/Organizations/GroupMembers/index.js b/src/components/Organizations/GroupMembers/index.js
index 2d338258..92a5472f 100644
--- a/src/components/Organizations/GroupMembers/index.js
+++ b/src/components/Organizations/GroupMembers/index.js
@@ -21,6 +21,7 @@ import {
   RemoveModalParagraph,
   TableActions,
   TableWrapper,
+  Tag,
 } from '../SharedStyles';
 import { StyledGroupMembers } from './Styles';
 
@@ -89,15 +90,28 @@ const GroupMembers = ({
       width: '20%',
       key: 'name',
       render: ({ user }) => {
-        const name = user.firstName;
-        return name ? <div>{name}</div> : <> - </>;
+        const { firstName, email } = user;
+
+        const isDefaultUser = email.startsWith('default-user');
+
+        if (isDefaultUser) return <div className="firstName"></div>;
+
+        return firstName ? <div className="name">{firstName}</div> : <> - </>;
       },
     },
     {
       width: '20%',
       key: 'lastName',
       render: ({ user }) => {
-        const lastName = user.lastName;
+        const { lastName, email } = user;
+
+        const isDefaultUser = email.startsWith('default-user');
+        if (isDefaultUser)
+          return (
+            <Tag style={{ display: 'inline' }} background="#262D65">
+              DEFAULT USER
+            </Tag>
+          );
         return lastName ? <div className="lastname">{lastName}</div> : <> - </>;
       },
     },
diff --git a/src/components/Organizations/Manage/index.js b/src/components/Organizations/Manage/index.js
index 52c32a22..4462ed18 100644
--- a/src/components/Organizations/Manage/index.js
+++ b/src/components/Organizations/Manage/index.js
@@ -66,14 +66,25 @@ const Manage = ({ users = [], organization, organizationId, organizationName, re
     {
       width: '15%',
       key: 'firstName',
-      render: ({ firstName }) => {
+      render: ({ firstName, email }) => {
+        const isDefaultUser = email.startsWith('default-user');
+
+        if (isDefaultUser) return <div className="firstName"></div>;
+
         return firstName ? <div className="name">{firstName}</div> : <> - </>;
       },
     },
     {
       width: '15%',
       key: 'lastName',
-      render: ({ lastName }) => {
+      render: ({ lastName, email }) => {
+        const isDefaultUser = email.startsWith('default-user');
+        if (isDefaultUser)
+          return (
+            <Tag style={{ display: 'inline' }} background="#262D65">
+              DEFAULT USER
+            </Tag>
+          );
         return lastName ? <div className="lastname">{lastName}</div> : <> - </>;
       },
     },
diff --git a/src/components/Organizations/PaginatedTable/PaginatedTable.tsx b/src/components/Organizations/PaginatedTable/PaginatedTable.tsx
index fda709e9..dd393d9d 100644
--- a/src/components/Organizations/PaginatedTable/PaginatedTable.tsx
+++ b/src/components/Organizations/PaginatedTable/PaginatedTable.tsx
@@ -275,7 +275,7 @@ const PaginatedTable: FC<Props> = ({
       <Filters className="filters">
         {labelText ? (
           <span className="labelText">
-            {labelText} {`(${resultsToDisplay.length})`}
+            {labelText} {`(${sortedFilteredData.length})`}
           </span>
         ) : (
           ''
diff --git a/src/components/Organizations/ProjectGroupMembers/index.js b/src/components/Organizations/ProjectGroupMembers/index.js
index 3d5d2ce1..fdb6222d 100644
--- a/src/components/Organizations/ProjectGroupMembers/index.js
+++ b/src/components/Organizations/ProjectGroupMembers/index.js
@@ -60,7 +60,7 @@ const ProjectGroupMembers = ({ groups = [], organizationId, organizationName, pr
 
             <div className="labels">
               {group.type.includes('project-default-group') && (
-                <label className="default-group-label">{group.type}</label>
+                <label className="default-group-label">SYSTEM GROUP</label>
               )}
             </div>
 
diff --git a/src/components/Organizations/Projects/Styles.tsx b/src/components/Organizations/Projects/Styles.tsx
index b9afabd8..ca694ed9 100644
--- a/src/components/Organizations/Projects/Styles.tsx
+++ b/src/components/Organizations/Projects/Styles.tsx
@@ -166,7 +166,7 @@ export const OrgProjectWrapper = styled.div`
   }
 `;
 
-export const ProjectRoute = styled.div`
+export const ProjectDashboard = styled.div`
   margin-left:1.5rem;
   font-size:13px;
   background:${props => props.theme.backgrounds.sidebar};
diff --git a/src/components/Organizations/Projects/index.js b/src/components/Organizations/Projects/index.js
index 3df2a757..2109f465 100644
--- a/src/components/Organizations/Projects/index.js
+++ b/src/components/Organizations/Projects/index.js
@@ -12,7 +12,7 @@ import { DeleteButton } from '../Groups/Styles';
 import NewProject from '../NewProject';
 import PaginatedTable from '../PaginatedTable/PaginatedTable';
 import { Footer, RemoveModalHeader, RemoveModalParagraph, TableActions, Tag } from '../SharedStyles';
-import { ProjectRoute, StyledOrgProjects } from './Styles';
+import { ProjectDashboard, StyledOrgProjects } from './Styles';
 
 const DELETE_PROJECT = gql`
   mutation deleteProject($project: String!) {
@@ -45,8 +45,8 @@ const OrgProjects = ({ projects = [], organizationId, organizationName, refresh,
               {project.name}
             </ProjectGroupLink>
 
-            <ProjectLink projectSlug={project.name} key={project.id}>
-              <ProjectRoute>ROUTE</ProjectRoute>
+            <ProjectLink projectSlug={project.name} key={project.id} openInTab>
+              <ProjectDashboard>View in Dashboard</ProjectDashboard>
             </ProjectLink>
           </>
         );
diff --git a/src/components/link/Project.js b/src/components/link/Project.js
index 9a092bc8..9146e6eb 100644
--- a/src/components/link/Project.js
+++ b/src/components/link/Project.js
@@ -11,12 +11,14 @@ export const getLinkData = projectSlug => ({
 /**
  * Links to the project page given the project name.
  */
-const ProjectLink = ({ projectSlug, children, className = null, prefetch = false }) => {
+const ProjectLink = ({ projectSlug, children, className = null, prefetch = false, openInTab = false }) => {
   const linkData = getLinkData(projectSlug);
 
   return (
     <Link href={linkData.urlObject} as={linkData.asPath} prefetch={prefetch}>
-      <a className={className}>{children}</a>
+      <a target={openInTab ? '_blank' : '_self'} className={className}>
+        {children}
+      </a>
     </Link>
   );
 };
diff --git a/src/pages/organizations/project.js b/src/pages/organizations/project.js
index 7d2ef374..8e16f9f9 100644
--- a/src/pages/organizations/project.js
+++ b/src/pages/organizations/project.js
@@ -14,7 +14,7 @@ import ProjectGroupMembers from 'components/Organizations/ProjectGroupMembers';
 import ProjectGroupSkeleton from 'components/Organizations/ProjectGroupMembers/ProjectGroupSkeleton';
 import ProjectNotifications from 'components/Organizations/ProjectNotifications';
 import ProjectNotificationsSkeleton from 'components/Organizations/ProjectNotifications/ProjectNotificationsSkeleton';
-import { OrgProjectWrapper, ProjectRoute } from 'components/Organizations/Projects/Styles';
+import { OrgProjectWrapper, ProjectDashboard } from 'components/Organizations/Projects/Styles';
 import ProjectLink from 'components/link/Project';
 import MainLayout from 'layouts/MainLayout';
 import ProjectAndOrganizationByID from 'lib/query/organizations/ProjectAndOrganizationByID';
@@ -107,8 +107,8 @@ export const PageGroupProject = ({ router }) => {
             <TableWrapper>
               <h3>
                 {project.name}
-                <ProjectLink projectSlug={project.name} key={project.id}>
-                  <ProjectRoute>ROUTE</ProjectRoute>
+                <ProjectLink projectSlug={project.name} key={project.id} openInTab>
+                  <ProjectDashboard>View in Dashboard</ProjectDashboard>
                 </ProjectLink>
               </h3>
               <ProjectGroupMembers