diff --git a/frontend/src/scenes/settings/environment/AddMembersModal.tsx b/frontend/src/scenes/settings/environment/AddMembersModal.tsx index cd010afc77bff..eecbc74b98f44 100644 --- a/frontend/src/scenes/settings/environment/AddMembersModal.tsx +++ b/frontend/src/scenes/settings/environment/AddMembersModal.tsx @@ -1,6 +1,6 @@ import { IconPlus } from '@posthog/icons' import { LemonButton, LemonModal, LemonSelect, LemonSelectOption } from '@posthog/lemon-ui' -import { useValues } from 'kea' +import { useActions, useValues } from 'kea' import { Form } from 'kea-forms' import { upgradeModalLogic } from 'lib/components/UpgradeModal/upgradeModalLogic' import { usersLemonSelectOptions } from 'lib/components/UserSelectItem' @@ -8,7 +8,6 @@ import { TeamMembershipLevel } from 'lib/constants' import { LemonField } from 'lib/lemon-ui/LemonField' import { LemonInputSelect } from 'lib/lemon-ui/LemonInputSelect/LemonInputSelect' import { membershipLevelToName, teamMembershipLevelIntegers } from 'lib/utils/permissioning' -import { useState } from 'react' import { teamLogic } from 'scenes/teamLogic' import { userLogic } from 'scenes/userLogic' @@ -17,24 +16,19 @@ import { AvailableFeature } from '~/types' import { teamMembersLogic } from './teamMembersLogic' export function AddMembersModalWithButton({ disabledReason }: { disabledReason: string | null }): JSX.Element { - const { addableMembers, allMembersLoading } = useValues(teamMembersLogic) + const { addableMembers, allMembersLoading, isAddMembersModalOpen } = useValues(teamMembersLogic) + const { openAddMembersModal, closeAddMembersModal } = useActions(teamMembersLogic) const { currentTeam } = useValues(teamLogic) const { guardAvailableFeature } = useValues(upgradeModalLogic) const { hasAvailableFeature } = useValues(userLogic) - const [isVisible, setIsVisible] = useState(false) - - function closeModal(): void { - setIsVisible(false) - } - return ( <> - guardAvailableFeature(AvailableFeature.PROJECT_BASED_PERMISSIONING, () => setIsVisible(true), { + guardAvailableFeature(AvailableFeature.PROJECT_BASED_PERMISSIONING, () => openAddMembersModal(), { isGrandfathered: !hasAvailableFeature(AvailableFeature.PROJECT_BASED_PERMISSIONING) && currentTeam?.access_control, @@ -45,7 +39,7 @@ export function AddMembersModalWithButton({ disabledReason }: { disabledReason: > Add members to project - +

{`Adding members${currentTeam?.name ? ` to project ${currentTeam.name}` : ''}`}

@@ -76,7 +70,7 @@ export function AddMembersModalWithButton({ disabledReason }: { disabledReason: - + Cancel diff --git a/frontend/src/scenes/settings/environment/teamMembersLogic.tsx b/frontend/src/scenes/settings/environment/teamMembersLogic.tsx index 23274ece6ae8d..d0fb7f78751b9 100644 --- a/frontend/src/scenes/settings/environment/teamMembersLogic.tsx +++ b/frontend/src/scenes/settings/environment/teamMembersLogic.tsx @@ -1,4 +1,4 @@ -import { actions, afterMount, kea, listeners, path, selectors } from 'kea' +import { actions, afterMount, kea, listeners, path, reducers, selectors } from 'kea' import { forms } from 'kea-forms' import { loaders } from 'kea-loaders' import api from 'lib/api' @@ -27,8 +27,19 @@ export const teamMembersLogic = kea([ user, newLevel, }), + openAddMembersModal: true, + closeAddMembersModal: true, }), - loaders(({ values }) => ({ + reducers({ + isAddMembersModalOpen: [ + false, + { + openAddMembersModal: () => true, + closeAddMembersModal: () => false, + }, + ], + }), + loaders(({ actions, values }) => ({ explicitMembers: { __default: [] as ExplicitTeamMemberType[], loadMembers: async () => { @@ -46,6 +57,7 @@ export const teamMembersLogic = kea([ lemonToast.success( `Added ${newMembers.length} member${newMembers.length !== 1 ? 's' : ''} to the project.` ) + actions.closeAddMembersModal() return [...values.explicitMembers, ...newMembers] }, removeMember: async ({ member }: { member: BaseMemberType }) => { @@ -176,6 +188,9 @@ export const teamMembersLogic = kea([ ) actions.loadMembers() }, + closeAddMembersModal: () => { + actions.resetAddMembers() + }, })), afterMount(({ actions }) => { actions.loadMembers()