Merge pull request #158 from uselagoon/various-changes

some changes and improvements alongside bugfixes
uselagoon · Sep 10, 2023 · 9a62778 · 9a62778
2 parents fe21831 + 3fa6196
commit 9a62778
Show file tree

Hide file tree

Showing 27 changed files with 355 additions and 149 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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