fix multiple bugs

src/components/CancelTask/index.tsx

@@ -45,7 +45,7 @@ export const CancelTaskButton: FC<CancelTaskButtonProps> = ({
   beforeText,
   afterText,
 }) => {
-  const [api, contextHolder] = notification.useNotification();
+  const [api, contextHolder] = notification.useNotification({ maxCount: 1 });
 
   const openNotificationWithIcon = (errorMessage: string) => {
     api['error']({

src/components/Organizations/AddUserToGroup/index.js

@@ -10,15 +10,15 @@ import gql from 'graphql-tag';
 import { Footer } from '../SharedStyles';
 import { NewMember, RoleSelect } from './Styles';
 
-const ADD_GROUP_MEMBER_MUTATION = gql`
+export const ADD_GROUP_MEMBER_MUTATION = gql`
   mutation addUserToGroup($email: String!, $group: String!, $role: GroupRole!) {
     addUserToGroup(input: { user: { email: $email }, group: { name: $group }, role: $role }) {
       name
     }
   }
 `;
 
-let options = [
+export const options = [
   {
     label: 'Guest',
     value: 'GUEST',
@@ -69,6 +69,7 @@ export const AddUserToGroup = ({
           });
         }
         return (
+
           <NewMember>
             <h4>{userAlreadyExists ? 'Update User' : 'Add User'}</h4>
             <div className="form-box">

src/components/Organizations/AddUserToOrganization/index.js

@@ -8,9 +8,9 @@ import withLogic from 'components/Organizations/AddUserToOrganization/logic';
 import gql from 'graphql-tag';
 
 import { Footer } from '../SharedStyles';
-import { NewUser, OrganizationSelect } from './Styles';
+import { NewUser } from './Styles';
 
-const ADD_USER_MUTATION = gql`
+export const ADD_USER_MUTATION = gql`
   mutation AddUserToOrganization($email: String!, $organization: Int!, $owner: Boolean) {
     addUserToOrganization(input: { user: { email: $email }, organization: $organization, owner: $owner }) {
       id
@@ -19,7 +19,7 @@ const ADD_USER_MUTATION = gql`
 `;
 
 /**
- * Confirms the deletion of the specified name and type.
+ *  Adds/edits user to an organization
  */
 export const AddUserToOrganization = ({
   organization,

src/components/Organizations/GroupMembers/index.js

@@ -4,19 +4,21 @@ import ReactSelect from 'react-select';
 
 import Link from 'next/link';
 
-import { DisconnectOutlined, EyeOutlined } from '@ant-design/icons';
+import { DisconnectOutlined, EditOutlined, EyeOutlined } from '@ant-design/icons';
+import { useMutation } from '@apollo/react-hooks';
 import Button from 'components/Button';
 import Modal from 'components/Modal';
 import RemoveUserConfirm from 'components/Organizations/RemoveUserConfirm';
 import ProjectGroupLink from 'components/link/Organizations/ProjectGroup';
 import gql from 'graphql-tag';
 
-import AddUserToGroup from '../AddUserToGroup';
+import AddUserToGroup, { ADD_GROUP_MEMBER_MUTATION, options } from '../AddUserToGroup';
 import { RoleSelect } from '../AddUserToGroup/Styles';
 import PaginatedTable from '../PaginatedTable/PaginatedTable';
 import {
   AddButtonContent,
   Footer,
+  ModalChildren,
   RemoveModalHeader,
   RemoveModalParagraph,
   TableActions,
@@ -77,6 +79,19 @@ const GroupMembers = ({
   const [deleteUserModalOpen, setDeleteUserModalOpen] = useState(false);
 
   const [addProjectModalOpen, setAddProjectModalOpen] = useState(false);
+  const [updatePending, setUpdatePending] = useState(false);
+
+  const [modalState, setModalState] = useState({
+    open: false,
+    current: '',
+  });
+
+  const [updateUser] = useMutation(ADD_GROUP_MEMBER_MUTATION);
+
+  const closeModal = () => {
+    setModalState({ open: false, current: '' });
+  };
+
   const closeAddProjectModal = () => {
     setSelectedProject('');
     setAddProjectModalOpen(false);
@@ -96,7 +111,7 @@ const GroupMembers = ({
 
         if (isDefaultUser) return <div className="firstName"></div>;
 
-        return firstName ? <div className="name">{firstName}</div> : <> - </>;
+        return firstName ? <div className="firstName">{firstName}</div> : <> - </>;
       },
     },
     {
@@ -144,6 +159,21 @@ const GroupMembers = ({
         const linkData = getLinkData(user.email, organizationId, organizationName);
         return (
           <TableActions>
+            <span
+              className="link"
+              onClick={() =>
+                setModalState({
+                  open: true,
+                  current: {
+                    email: user.email,
+                    role: user.role,
+                  },
+                })
+              }
+            >
+              <EditOutlined className="edit" />
+            </span>
+
             <Link href={linkData.urlObject} as={linkData.asPath}>
               <a className="link">
                 <EyeOutlined className="view" />
@@ -403,6 +433,74 @@ const GroupMembers = ({
           </Mutation>
         </Modal>
       </TableWrapper>
+
+      <Modal style={{ content: { width: '50%' } }} isOpen={modalState.open} onRequestClose={closeModal}>
+        <ModalChildren>
+          <div className="form-box">
+            <label>
+              Email:
+              <input disabled className="inputName" type="text" value={modalState.current.email} />
+            </label>
+          </div>
+          <label>
+            User Role: <span style={{ color: '#E30000' }}>*</span>
+            <RoleSelect>
+              <ReactSelect
+                className="select"
+                menuPortalTarget={document.body}
+                styles={{
+                  menuPortal: base => ({ ...base, zIndex: 9999, color: 'black', fontSize: '16px' }),
+                  placeholder: base => ({ ...base, fontSize: '16px' }),
+                  menu: base => ({ ...base, fontSize: '16px' }),
+                  option: base => ({ ...base, fontSize: '16px' }),
+                  singleValue: base => ({ ...base, fontSize: '16px' }),
+                }}
+                aria-label="Role"
+                placeholder="Select role"
+                name="role"
+                value={options.find(o => o.value === modalState.current.role)}
+                onChange={selectedOption => {
+                  const clone = { ...modalState };
+                  clone.current.role = selectedOption.value;
+
+                  setModalState(clone);
+                }}
+                options={options}
+                required
+              />
+            </RoleSelect>
+          </label>
+        </ModalChildren>
+
+        <Footer>
+          <Button
+            disabled={updatePending}
+            loading={updatePending}
+            action={() => {
+              setUpdatePending(true);
+              updateUser({
+                variables: {
+                  email: modalState.current.email,
+                  role: modalState.current.role,
+                  group: groupName,
+                },
+              })
+                .then(() => {
+                  closeModal();
+                  refetch();
+                })
+                .finally(() => setUpdatePending(false));
+            }}
+            variant="primary"
+          >
+            Update
+          </Button>
+
+          <Button variant="ghost" action={closeModal}>
+            Cancel
+          </Button>
+        </Footer>
+      </Modal>
     </StyledGroupMembers>
   );
 };

src/components/Organizations/Manage/index.js

@@ -3,14 +3,15 @@ import { Mutation } from 'react-apollo';
 
 import Link from 'next/link';
 
-import { DeleteOutlined } from '@ant-design/icons';
+import { DeleteOutlined, EditOutlined } from '@ant-design/icons';
 import Button from 'components/Button';
 import Modal from 'components/Modal';
 import withLogic from 'components/Organizations/Users/logic';
 import gql from 'graphql-tag';
 
 import useSortableData from '../../../lib/withSortedItems';
-import AddUserToOrganization from '../AddUserToOrganization';
+import AddUserToOrganization, { ADD_USER_MUTATION } from '../AddUserToOrganization';
+import { NewUser } from '../AddUserToOrganization/Styles';
 import PaginatedTable from '../PaginatedTable/PaginatedTable';
 import { AddButtonContent, Footer, RemoveModalHeader, RemoveModalParagraph, TableActions, Tag } from '../SharedStyles';
 import { StyledUsers } from '../Users/Styles';
@@ -41,12 +42,19 @@ const Manage = ({ users = [], organization, organizationId, organizationName, re
   const [deleteUserModalOpen, setDeleteUserModalOpen] = useState(false);
 
   const [dynamicUsers, setDynamicUsers] = useState(users);
+  const [editModalOpen, setEditModalOpen] = useState(false);
+  const [selectedUserOwner, setSelectedUserOwner] = useState(false);
 
   const closeUserModal = () => {
     setSelectedUser('');
     setUserModalOpen(false);
   };
 
+  const closeEditModal = () => {
+    setSelectedUser('');
+    setEditModalOpen(false);
+  };
+
   useEffect(() => {
     setDynamicUsers(users);
   }, [users]);
@@ -120,13 +128,87 @@ const Manage = ({ users = [], organization, organizationId, organizationName, re
       render: ({ ...user }) => {
         return (
           <TableActions>
+            <span
+              className="link"
+              onClick={() => {
+                setSelectedUser(user?.id);
+                setEditModalOpen(true);
+                setSelectedUserOwner(user.owner);
+              }}
+            >
+              <EditOutlined className="edit" />
+            </span>
+
+            <Modal
+              style={{ content: { width: '50%' } }}
+              isOpen={editModalOpen && selectedUser === user?.id}
+              onRequestClose={closeEditModal}
+            >
+              <Mutation mutation={ADD_USER_MUTATION} onError={err => console.error(err)}>
+                {(addUser, { called, error, data }) => {
+                  if (error) {
+                    return <div>{error.message}</div>;
+                  }
+                  if (data) {
+                    setSelectedUser('');
+                    refetch().then(closeEditModal);
+                  }
+                  return (
+                    <NewUser>
+                      <h4>Update user</h4>
+                      <div className="form-box">
+                        <label>
+                          User Email: <span style={{ color: '#E30000' }}></span>
+                          <input className="inputEmail" type="text" value={user.email} disabled />
+                        </label>
+                      </div>
+                      <label>
+                        Owner: <span style={{ color: '#E30000' }}>*</span>
+                        <input
+                          className="inputCheckbox"
+                          type="checkbox"
+                          checked={selectedUserOwner}
+                          onChange={() => setSelectedUserOwner(!selectedUserOwner)}
+                        />
+                      </label>
+
+                      <div>
+                        <Footer>
+                          <Button
+                            disabled={called}
+                            loading={called}
+                            action={() => {
+                              addUser({
+                                variables: {
+                                  email: user.email,
+                                  organization: organization.id,
+                                  owner: selectedUserOwner,
+                                },
+                              });
+                            }}
+                            variant="primary"
+                          >
+                            Update
+                          </Button>
+                          <Button variant="ghost" action={closeEditModal}>
+                            Cancel
+                          </Button>
+                        </Footer>
+                      </div>
+                    </NewUser>
+                  );
+                }}
+              </Mutation>
+            </Modal>
+
             <DeleteOutlined
               className="delete"
               onClick={() => {
                 setSelectedUser(user?.id);
                 setDeleteUserModalOpen(true);
               }}
             />
+
             <Modal isOpen={deleteUserModalOpen && selectedUser === user?.id} onRequestClose={closeUserModal}>
               <RemoveModalHeader>Are you sure?</RemoveModalHeader>
               <RemoveModalParagraph>

src/components/Organizations/Notifications/AddNotifications.tsx

@@ -95,6 +95,7 @@ const AddNotification: FC<Props> = ({ modalOpen, organizationId, onNotificationA
   const [addTeams] = useMutation(ADD_MICROSOFTTEAMS_NOTIFICATION);
   const [addWebhook] = useMutation(ADD_WEBHOOK_NOTIFICATION);
 
+  const [loading, setLoading] = useState(false);
   const resetState = () => {
     setNotificationName('');
     setEmail('');
@@ -278,16 +279,23 @@ const AddNotification: FC<Props> = ({ modalOpen, organizationId, onNotificationA
               action={() => {
                 const cb = getAction();
 
-                cb &&
+                if (cb) {
+                  setLoading(true);
                   cb()
-                    .then(onNotificationAdded)
+                    .then(() => {
+                      void onNotificationAdded();
+                    })
                     .then(() => {
                       resetState();
                       closeModal();
                     })
-                    .catch(err => console.error(err));
+                    .catch(err => console.error(err))
+                    .finally(() => setLoading(false));
+                }
               }}
               variant="primary"
+              loading={loading}
+              disabled={loading}
             >
               Add
             </Button>