diff --git a/src/components/Organizations/AddUserToGroup/Styles.tsx b/src/components/Organizations/AddUserToGroup/Styles.tsx index e991c4d1..2c5dfa5b 100644 --- a/src/components/Organizations/AddUserToGroup/Styles.tsx +++ b/src/components/Organizations/AddUserToGroup/Styles.tsx @@ -50,6 +50,11 @@ export const NewMember = styled.div` display: flex; align-items: center; } + label.add-user { + display: flex; + margin-block: 0.5rem; + gap: 0.5rem; + } `; export const RoleSelect = styled.div` diff --git a/src/components/Organizations/AddUserToGroup/index.js b/src/components/Organizations/AddUserToGroup/index.js index a25aef07..1fd0521d 100644 --- a/src/components/Organizations/AddUserToGroup/index.js +++ b/src/components/Organizations/AddUserToGroup/index.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useState } from 'react'; import { Mutation } from 'react-apollo'; import ReactSelect from 'react-select'; @@ -11,8 +11,8 @@ import { Footer } from '../SharedStyles'; import { NewMember, RoleSelect } from './Styles'; 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 }) { + mutation addUserToGroup($email: String!, $group: String!, $role: GroupRole!, $inviteUser: Boolean) { + addUserToGroup(input: { user: { email: $email }, group: { name: $group }, role: $role, inviteUser: $inviteUser }) { name } } @@ -42,7 +42,7 @@ export const options = [ ]; /** - * Confirms the deletion of the specified name and type. + * Adds user to group. */ export const AddUserToGroup = ({ group, @@ -56,6 +56,13 @@ export const AddUserToGroup = ({ }) => { const userAlreadyExists = users && users.find(u => u.user.email === inputValueEmail); + const [inviteUser, setInviteUser] = useState(true); + + const closeModal = () => { + close(); + setInviteUser(true); + }; + return ( console.error(err)}> {(addGroupMember, { called, error, data }) => { @@ -65,7 +72,7 @@ export const AddUserToGroup = ({ if (data) { onAddUser().then(() => { setInputValue({ target: { value: '' } }); - close(); + closeModal(); }); } return ( @@ -108,6 +115,16 @@ export const AddUserToGroup = ({ /> +
-
diff --git a/src/components/Organizations/AddUserToGroupSelect/index.tsx b/src/components/Organizations/AddUserToGroupSelect/index.tsx index 046716f0..2b4ea671 100644 --- a/src/components/Organizations/AddUserToGroupSelect/index.tsx +++ b/src/components/Organizations/AddUserToGroupSelect/index.tsx @@ -1,4 +1,4 @@ -import { FC } from 'react'; +import { FC, useState } from 'react'; import { Mutation } from 'react-apollo'; import ReactSelect from 'react-select'; @@ -8,9 +8,9 @@ import gql from 'graphql-tag'; import { NewMember, RoleSelect } from '../AddUserToGroup/Styles'; import { Footer } from '../SharedStyles'; -const ADD_GROUP_MEMBER_MUTATION = gql` - mutation addUserToGroup($email: String!, $group: String!, $role: GroupRole!) { - addUserToGroup(input: { user: { email: $email }, group: { name: $group }, role: $role }) { +export const ADD_GROUP_MEMBER_MUTATION = gql` + mutation addUserToGroup($email: String!, $group: String!, $role: GroupRole!, $inviteUser: Boolean) { + addUserToGroup(input: { user: { email: $email }, group: { name: $group }, role: $role, inviteUser: $inviteUser }) { name } } @@ -56,11 +56,16 @@ interface Props { } const AddUserToGroupSelect: FC = ({ groups, newUserState, setNewUserState, close, onAddUser }) => { + const [inviteUser, setInviteUser] = useState(true); + const groupOptions = groups.map(g => { return { label: g.name, value: g.name }; }); - const resetState = () => setNewUserState({ group: '', role: '', email: '' }); + const resetState = () => { + setNewUserState({ group: '', role: '', email: '' }); + setInviteUser(false); + }; return ( = ({ groups, newUserState, setNewUserState email: string; role: string; group: string; + inviteUser?: boolean; }; }> mutation={ADD_GROUP_MEMBER_MUTATION} @@ -151,6 +157,16 @@ const AddUserToGroupSelect: FC = ({ groups, newUserState, setNewUserState /> +