use dropdowns

uselagoon · Jun 30, 2024 · fcad6f2 · fcad6f2
1 parent 5872296
commit fcad6f2
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 66 deletions.
diff --git a/src/components/Organizations/AddUserToOrganization/index.js b/src/components/Organizations/AddUserToOrganization/index.js
@@ -7,6 +7,7 @@ import Button from 'components/Button';
 import withLogic from 'components/Organizations/AddUserToOrganization/logic';
 import gql from 'graphql-tag';
 
+import { userTypeOptions } from '../Manage';
 import { Footer } from '../SharedStyles';
 import { NewUser } from './Styles';
 
@@ -26,21 +27,7 @@ export const ADD_USER_MUTATION = gql`
 export const AddUserToOrganization = ({ organization, close, inputValueEmail, setInputValue, onAddUser, users }) => {
   const userAlreadyExists = users.find(u => u.email === inputValueEmail);
 
-  const [checkboxValueOwner, setCheckboxValueOwner] = useState(false);
-  const [checkboxValueAdmin, setCheckboxValueAdmin] = useState(false);
-
-  const handleChange = type => {
-    if (type === 'owner') {
-      console.log('ran owner');
-      setCheckboxValueAdmin(false);
-      setCheckboxValueOwner(!checkboxValueOwner);
-    }
-    if (type === 'admin') {
-      console.log('ran admin');
-      setCheckboxValueOwner(false);
-      setCheckboxValueAdmin(!checkboxValueAdmin);
-    }
-  };
+  const [newUserType, setNewUserType] = useState('viewer');
 
   return (
     <Mutation mutation={ADD_USER_MUTATION} onError={err => console.error(err)}>
@@ -70,30 +57,31 @@ export const AddUserToOrganization = ({ organization, close, inputValueEmail, se
                 />
               </label>
             </div>
+            <br />
             <label>
-              Owner: <span style={{ color: '#E30000' }}>*</span>
-              <input
-                data-cy="manageOwner"
-                className="inputCheckbox"
-                type="checkbox"
-                checked={checkboxValueOwner}
-                value={checkboxValueOwner}
-                onChange={() => handleChange('owner')}
+              User Type: <span style={{ color: '#E30000' }}>*</span>
+              <ReactSelect
+                classNamePrefix="react-select"
+                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={userTypeOptions.find(o => o.value === newUserType)}
+                onChange={selectedOption => {
+                  setNewUserType(selectedOption.value);
+                }}
+                options={userTypeOptions}
+                required
               />
             </label>
-            <span> </span>
-            <label>
-              Admin: <span style={{ color: '#E30000' }}>*</span>
-              <input
-                data-cy="manageAdmin"
-                className="inputCheckbox"
-                type="checkbox"
-                checked={checkboxValueAdmin}
-                value={checkboxValueAdmin}
-                onChange={() => handleChange('admin')}
-              />
-            </label>
-
             <div>
               <Footer>
                 <Button
@@ -105,8 +93,8 @@ export const AddUserToOrganization = ({ organization, close, inputValueEmail, se
                       variables: {
                         email: inputValueEmail,
                         organization: organization.id,
-                        owner: checkboxValueOwner,
-                        admin: checkboxValueAdmin,
+                        ...(newUserType === 'admin' && { admin: true }),
+                        ...(newUserType === 'owner' && { owner: true }),
                       },
                     });
                   }}

diff --git a/src/components/Organizations/Manage/index.js b/src/components/Organizations/Manage/index.js
@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { Mutation } from 'react-apollo';
+import ReactSelect from 'react-select';
 
 import { DeleteOutlined, EditOutlined } from '@ant-design/icons';
 import { Tooltip } from 'antd';
@@ -15,6 +16,11 @@ import PaginatedTable from '../PaginatedTable/PaginatedTable';
 import { AddButtonContent, Footer, RemoveModalHeader, RemoveModalParagraph, TableActions, Tag } from '../SharedStyles';
 import { StyledUsers } from '../Users/Styles';
 
+export const userTypes = ['viewer', 'owner', 'admin'];
+export const userTypeOptions = userTypes.map(u => {
+  return { label: u.toUpperCase(), value: u };
+});
+
 const DELETE_USER = gql`
   mutation removeUserFromOrganization($organization: Int!, $email: String!) {
     removeUserFromOrganization(input: { user: { email: $email }, organization: $organization }) {
@@ -34,8 +40,8 @@ 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 [selectedUserType, setSelectedUserType] = useState('');
 
   const closeUserModal = () => {
     setSelectedUser('');
@@ -127,8 +133,7 @@ const Manage = ({ users = [], organization, organizationName, refetch }) => {
                 onClick={() => {
                   setSelectedUser(user?.id);
                   setEditModalOpen(true);
-                  setSelectedUserOwner(user.owner);
-                  setSelectedUserAdmin(user.admin);
+                  setSelectedUserType(user.owner ? 'owner' : user.admin ? 'admin' : 'viewer');
                 }}
               >
                 <EditOutlined className="edit" />
@@ -157,31 +162,30 @@ const Manage = ({ users = [], organization, organizationName, refetch }) => {
                           <input className="inputEmail" type="text" value={user.email} disabled />
                         </label>
                       </div>
+
+                      <br />
                       <label>
-                        Owner: <span style={{ color: '#E30000' }}>*</span>
-                        <input
-                          className="inputCheckbox"
-                          data-cy="userIsOwner"
-                          type="checkbox"
-                          checked={selectedUserOwner}
-                          onChange={() => {
-                            setSelectedUserOwner(!selectedUserOwner);
-                            setSelectedUserAdmin(false);
+                        User Type: <span style={{ color: '#E30000' }}>*</span>
+                        <ReactSelect
+                          classNamePrefix="react-select"
+                          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' }),
                           }}
-                        />
-                      </label>
-                      <span> </span>
-                      <label>
-                        Admin: <span style={{ color: '#E30000' }}>*</span>
-                        <input
-                          className="inputCheckbox"
-                          data-cy="userIsAdmin"
-                          type="checkbox"
-                          checked={selectedUserAdmin}
-                          onChange={() => {
-                            setSelectedUserAdmin(!selectedUserAdmin);
-                            setSelectedUserOwner(false);
+                          aria-label="Role"
+                          placeholder="Select role"
+                          name="role"
+                          value={userTypeOptions.find(o => o.value === selectedUserType)}
+                          onChange={selectedOption => {
+                            setSelectedUserType(selectedOption.value);
                           }}
+                          options={userTypeOptions}
+                          required
                         />
                       </label>
 
@@ -196,8 +200,8 @@ const Manage = ({ users = [], organization, organizationName, refetch }) => {
                                 variables: {
                                   email: user.email,
                                   organization: organization.id,
-                                  owner: selectedUserOwner,
-                                  admin: selectedUserAdmin,
+                                  ...(selectedUserType === 'admin' && { admin: true }),
+                                  ...(selectedUserType === 'owner' && { owner: true }),
                                 },
                               });
                             }}