org admin in the UI

uselagoon · Jun 30, 2024 · 37bf68f · 37bf68f
1 parent 1b2f074
commit 37bf68f
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 22 deletions.
diff --git a/src/components/Organizations/AddUserToOrganization/index.js b/src/components/Organizations/AddUserToOrganization/index.js
@@ -12,7 +12,9 @@ import { NewUser } from './Styles';
 
 export const ADD_USER_MUTATION = gql`
   mutation AddUserToOrganization($email: String!, $organization: Int!, $owner: Boolean, $admin: Boolean) {
-    addUserToOrganization(input: { user: { email: $email }, organization: $organization, owner: $owner, admin: $admin }) {
+    addUserToOrganization(
+      input: { user: { email: $email }, organization: $organization, owner: $owner, admin: $admin }
+    ) {
       id
     }
   }

diff --git a/src/components/Organizations/AddUserToOrganization/logic.js b/src/components/Organizations/AddUserToOrganization/logic.js
@@ -10,15 +10,33 @@ const withInputHandlers = withHandlers({
       setInputValue(event.target.value),
 });
 
-const withCheckboxValue = withState('checkboxValueOwner', 'setCheckboxValueOwner', false);
-const withCheckboxhandler = withHandlers({
+const withCheckboxValueOwner = withState('checkboxValueOwner', 'setCheckboxValueOwner', false);
+const withCheckboxhandlerOwner = withHandlers({
   setCheckboxValueOwner:
     ({ setCheckboxValueOwner }) =>
     event => {
       setCheckboxValueOwner(event.target.checked);
     },
 });
 
+const withCheckboxValueAdmin = withState('checkboxValueAdmin', 'setCheckboxValueAdmin', false);
+
+const withCheckboxHandlerAdmin = withHandlers({
+  setCheckboxValueAdmin:
+    ({ setCheckboxValueAdmin }) =>
+    event => {
+      setCheckboxValueAdmin(event.target.checked);
+    },
+});
+
 const withSelectedRole = withState('selectedRole', 'setSelectedRole', null);
 
-export default compose(withInputValue, withInputHandlers, withCheckboxValue, withCheckboxhandler, withSelectedRole);
+export default compose(
+  withInputValue,
+  withInputHandlers,
+  withCheckboxValueOwner,
+  withCheckboxhandlerOwner,
+  withCheckboxValueAdmin,
+  withCheckboxHandlerAdmin,
+  withSelectedRole
+);
diff --git a/src/components/Organizations/Manage/index.js b/src/components/Organizations/Manage/index.js
@@ -35,6 +35,7 @@ const Manage = ({ users = [], organization, organizationName, refetch }) => {
   const [dynamicUsers, setDynamicUsers] = useState(users);
   const [editModalOpen, setEditModalOpen] = useState(false);
   const [selectedUserOwner, setSelectedUserOwner] = useState(false);
+  const [selectedUserAdmin, setSelectedUserAdmin] = useState(false);
 
   const closeUserModal = () => {
     setSelectedUser('');
@@ -101,16 +102,14 @@ const Manage = ({ users = [], organization, organizationName, refetch }) => {
               <Tag style={{ display: 'inline-block', marginLeft: '2.5rem' }} $background="#FF4747">
                 ORG OWNER
               </Tag>
+            ) : admin ? (
+              <Tag style={{ display: 'inline-block', marginLeft: '2.5rem' }} $background="#E69138">
+                ORG ADMIN
+              </Tag>
             ) : (
-              admin ? (
-                <Tag style={{ display: 'inline-block', marginLeft: '2.5rem' }} $background="#E69138">
-                  ORG ADMIN
-                </Tag>
-              ) : (
-                <Tag style={{ display: 'inline-block', marginLeft: '2.5rem' }} $background="#47D3FF">
-                  ORG VIEWER
-                </Tag>
-              )
+              <Tag style={{ display: 'inline-block', marginLeft: '2.5rem' }} $background="#47D3FF">
+                ORG VIEWER
+              </Tag>
             )}
           </>
         );
@@ -129,6 +128,7 @@ const Manage = ({ users = [], organization, organizationName, refetch }) => {
                   setSelectedUser(user?.id);
                   setEditModalOpen(true);
                   setSelectedUserOwner(user.owner);
+                  setSelectedUserAdmin(user.admin);
                 }}
               >
                 <EditOutlined className="edit" />
@@ -167,6 +167,16 @@ const Manage = ({ users = [], organization, organizationName, refetch }) => {
                           onChange={() => setSelectedUserOwner(!selectedUserOwner)}
                         />
                       </label>
+                      <label>
+                        Admin: <span style={{ color: '#E30000' }}>*</span>
+                        <input
+                          className="inputCheckbox"
+                          data-cy="userIsAdmin"
+                          type="checkbox"
+                          checked={selectedUserAdmin}
+                          onChange={() => setSelectedUserAdmin(!selectedUserAdmin)}
+                        />
+                      </label>
 
                       <div>
                         <Footer>
@@ -180,6 +190,7 @@ const Manage = ({ users = [], organization, organizationName, refetch }) => {
                                   email: user.email,
                                   organization: organization.id,
                                   owner: selectedUserOwner,
+                                  admin: selectedUserAdmin,
                                 },
                               });
                             }}

diff --git a/src/components/Organizations/Organization/index.js b/src/components/Organizations/Organization/index.js
@@ -276,16 +276,14 @@ const Organization = ({ organization, refetch }) => {
                       <Tag style={{ display: 'inline-block', marginLeft: '1.5rem' }} $background="#FF4747">
                         ORG OWNER
                       </Tag>
+                    ) : owner.admin ? (
+                      <Tag style={{ display: 'inline-block', marginLeft: '1.5rem' }} $background="#E69138">
+                        ORG ADMIN
+                      </Tag>
                     ) : (
-                      owner.admin ? (
-                        <Tag style={{ display: 'inline-block', marginLeft: '1.5rem' }} $background="#E69138">
-                          ORG ADMIN
-                        </Tag>
-                      ) : (
-                        <Tag style={{ display: 'inline-block', marginLeft: '1.5rem' }} $background="#47D3FF">
-                          ORG VIEWER
-                        </Tag>
-                      )
+                      <Tag style={{ display: 'inline-block', marginLeft: '1.5rem' }} $background="#47D3FF">
+                        ORG VIEWER
+                      </Tag>
                     )}
                   </div>
                 </div>