fix: move add member modal state to logic (#26303)

PostHog · Nov 23, 2024 · 96868a3 · 96868a3
1 parent bcc98da
commit 96868a3
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 14 deletions.
diff --git a/frontend/src/scenes/settings/environment/AddMembersModal.tsx b/frontend/src/scenes/settings/environment/AddMembersModal.tsx
@@ -1,14 +1,13 @@
 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'
 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 (
         <>
             <LemonButton
                 type="primary"
                 data-attr="add-project-members-button"
                 onClick={() =>
-                    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
             </LemonButton>
-            <LemonModal title="" onClose={closeModal} isOpen={isVisible} simple>
+            <LemonModal title="" onClose={closeAddMembersModal} isOpen={isAddMembersModalOpen} simple>
                 <Form logic={teamMembersLogic} formKey="addMembers" enableFormOnSubmit>
                     <LemonModal.Header>
                         <h3>{`Adding members${currentTeam?.name ? ` to project ${currentTeam.name}` : ''}`}</h3>
@@ -76,7 +70,7 @@ export function AddMembersModalWithButton({ disabledReason }: { disabledReason:
                         </LemonField>
                     </LemonModal.Content>
                     <LemonModal.Footer>
-                        <LemonButton type="secondary" onClick={closeModal}>
+                        <LemonButton type="secondary" onClick={closeAddMembersModal}>
                             Cancel
                         </LemonButton>
                         <LemonButton type="primary" data-attr="add-project-members-submit" htmlType="submit">

diff --git 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<teamMembersLogicType>([
             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<teamMembersLogicType>([
                 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<teamMembersLogicType>([
             )
             actions.loadMembers()
         },
+        closeAddMembersModal: () => {
+            actions.resetAddMembers()
+        },
     })),
     afterMount(({ actions }) => {
         actions.loadMembers()