fix: Missing modals for 3000 (#18453)

PostHog · Nov 8, 2023 · 9ffba57 · 9ffba57
1 parent aceec12
commit 9ffba57
Show file tree

Hide file tree

Showing 7 changed files with 65 additions and 39 deletions.
diff --git a/frontend/src/layout/GlobalModals.tsx b/frontend/src/layout/GlobalModals.tsx
@@ -0,0 +1,48 @@
+import { kea, path, actions, reducers, useActions, useValues } from 'kea'
+import { CreateOrganizationModal } from 'scenes/organization/CreateOrganizationModal'
+import { InviteModal } from 'scenes/organization/Settings/InviteModal'
+import { CreateProjectModal } from 'scenes/project/CreateProjectModal'
+import { inviteLogic } from 'scenes/organization/Settings/inviteLogic'
+
+import type { globalModalsLogicType } from './GlobalModalsType'
+
+export const globalModalsLogic = kea<globalModalsLogicType>([
+    path(['layout', 'navigation', 'globalModalsLogic']),
+    actions({
+        showCreateOrganizationModal: true,
+        hideCreateOrganizationModal: true,
+        showCreateProjectModal: true,
+        hideCreateProjectModal: true,
+    }),
+    reducers({
+        isCreateOrganizationModalShown: [
+            false,
+            {
+                showCreateOrganizationModal: () => true,
+                hideCreateOrganizationModal: () => false,
+            },
+        ],
+        isCreateProjectModalShown: [
+            false,
+            {
+                showCreateProjectModal: () => true,
+                hideCreateProjectModal: () => false,
+            },
+        ],
+    }),
+])
+
+export function GlobalModals(): JSX.Element {
+    const { isCreateOrganizationModalShown, isCreateProjectModalShown } = useValues(globalModalsLogic)
+    const { hideCreateOrganizationModal, hideCreateProjectModal } = useActions(globalModalsLogic)
+    const { isInviteModalShown } = useValues(inviteLogic)
+    const { hideInviteModal } = useActions(inviteLogic)
+
+    return (
+        <>
+            <InviteModal isOpen={isInviteModalShown} onClose={hideInviteModal} />
+            <CreateOrganizationModal isVisible={isCreateOrganizationModalShown} onClose={hideCreateOrganizationModal} />
+            <CreateProjectModal isVisible={isCreateProjectModalShown} onClose={hideCreateProjectModal} />
+        </>
+    )
+}
diff --git a/frontend/src/layout/navigation-3000/Navigation.tsx b/frontend/src/layout/navigation-3000/Navigation.tsx
@@ -12,6 +12,7 @@ import { Scene, SceneConfig } from 'scenes/sceneTypes'
 import { FlaggedFeature } from 'lib/components/FlaggedFeature'
 import { FEATURE_FLAGS } from 'lib/constants'
 import { SidePanel } from './sidepanel/SidePanel'
+import { GlobalModals } from '../GlobalModals'
 
 export function Navigation({
     children,
@@ -48,6 +49,7 @@ export function Navigation({
             </main>
             <SidePanel />
             <CommandPalette />
+            <GlobalModals />
         </div>
     )
 }
diff --git a/frontend/src/layout/navigation-3000/components/Breadcrumbs.tsx b/frontend/src/layout/navigation-3000/components/Breadcrumbs.tsx
@@ -75,6 +75,11 @@ function Breadcrumb({ breadcrumb, index, here }: BreadcrumbProps): JSX.Element {
                         setPopoverShown(false)
                     }
                 }}
+                onClickInside={() => {
+                    if (popoverShown) {
+                        setPopoverShown(false)
+                    }
+                }}
             >
                 {breadcrumbContent}
             </Popover>

diff --git a/frontend/src/layout/navigation/OrganizationSwitcher.tsx b/frontend/src/layout/navigation/OrganizationSwitcher.tsx
@@ -11,6 +11,7 @@ import { sceneLogic } from 'scenes/sceneLogic'
 import { userLogic } from 'scenes/userLogic'
 import { AvailableFeature, OrganizationBasicType } from '~/types'
 import { navigationLogic } from './navigationLogic'
+import { globalModalsLogic } from '../GlobalModals'
 
 export function AccessLevelIndicator({ organization }: { organization: OrganizationBasicType }): JSX.Element {
     return (
@@ -44,7 +45,8 @@ export function OtherOrganizationButton({
 }
 
 export function NewOrganizationButton(): JSX.Element {
-    const { closeSitePopover, showCreateOrganizationModal } = useActions(navigationLogic)
+    const { closeSitePopover } = useActions(navigationLogic)
+    const { showCreateOrganizationModal } = useActions(globalModalsLogic)
     const { guardAvailableFeature } = useActions(sceneLogic)
 
     return (

diff --git a/frontend/src/layout/navigation/ProjectSwitcher.tsx b/frontend/src/layout/navigation/ProjectSwitcher.tsx
@@ -11,6 +11,7 @@ import { urls } from 'scenes/urls'
 import { userLogic } from 'scenes/userLogic'
 import { AvailableFeature, TeamBasicType } from '~/types'
 import { navigationLogic } from './navigationLogic'
+import { globalModalsLogic } from '../GlobalModals'
 
 export function ProjectName({ team }: { team: TeamBasicType }): JSX.Element {
     return (
@@ -25,7 +26,8 @@ export function ProjectSwitcherOverlay(): JSX.Element {
     const { currentOrganization, projectCreationForbiddenReason } = useValues(organizationLogic)
     const { currentTeam } = useValues(teamLogic)
     const { guardAvailableFeature } = useActions(sceneLogic)
-    const { showCreateProjectModal, hideProjectSwitcher } = useActions(navigationLogic)
+    const { hideProjectSwitcher } = useActions(navigationLogic)
+    const { showCreateProjectModal } = useActions(globalModalsLogic)
 
     return (
         <div className="project-switcher-container">

diff --git a/frontend/src/layout/navigation/TopBar/TopBar.tsx b/frontend/src/layout/navigation/TopBar/TopBar.tsx
@@ -5,13 +5,9 @@ import { Announcement } from './Announcement'
 import { navigationLogic } from '../navigationLogic'
 import { HelpButton } from 'lib/components/HelpButton/HelpButton'
 import { CommandPalette } from 'lib/components/CommandPalette'
-import { CreateOrganizationModal } from 'scenes/organization/CreateOrganizationModal'
-import { InviteModal } from 'scenes/organization/Settings/InviteModal'
 import { Link } from 'lib/lemon-ui/Link'
 import { IconMenu, IconMenuOpen } from 'lib/lemon-ui/icons'
-import { CreateProjectModal } from 'scenes/project/CreateProjectModal'
 import './TopBar.scss'
-import { inviteLogic } from 'scenes/organization/Settings/inviteLogic'
 import { UniversalSearchPopover } from 'lib/components/UniversalSearch/UniversalSearchPopover'
 import { TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types'
 import { groupsModel } from '~/models/groupsModel'
@@ -20,20 +16,11 @@ import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
 import { FEATURE_FLAGS } from 'lib/constants'
 import ActivationSidebarToggle from 'lib/components/ActivationSidebar/ActivationSidebarToggle'
 import { NotebookButton } from '~/layout/navigation/TopBar/NotebookButton'
+import { GlobalModals } from '~/layout/GlobalModals'
 
 export function TopBar(): JSX.Element {
-    const {
-        isSideBarShown,
-        noSidebar,
-        minimalTopBar,
-        mobileLayout,
-        isCreateOrganizationModalShown,
-        isCreateProjectModalShown,
-    } = useValues(navigationLogic)
-    const { toggleSideBarBase, toggleSideBarMobile, hideCreateOrganizationModal, hideCreateProjectModal } =
-        useActions(navigationLogic)
-    const { isInviteModalShown } = useValues(inviteLogic)
-    const { hideInviteModal } = useActions(inviteLogic)
+    const { isSideBarShown, noSidebar, minimalTopBar, mobileLayout } = useValues(navigationLogic)
+    const { toggleSideBarBase, toggleSideBarMobile } = useActions(navigationLogic)
     const { groupNamesTaxonomicTypes } = useValues(groupsModel)
     const { featureFlags } = useValues(featureFlagLogic)
 
@@ -96,9 +83,7 @@ export function TopBar(): JSX.Element {
                 </div>
             </header>
             <CommandPalette />
-            <InviteModal isOpen={isInviteModalShown} onClose={hideInviteModal} />
-            <CreateOrganizationModal isVisible={isCreateOrganizationModalShown} onClose={hideCreateOrganizationModal} />
-            <CreateProjectModal isVisible={isCreateProjectModalShown} onClose={hideCreateProjectModal} />
+            <GlobalModals />
         </>
     )
 }
diff --git a/frontend/src/layout/navigation/navigationLogic.ts b/frontend/src/layout/navigation/navigationLogic.ts
@@ -35,10 +35,6 @@ export const navigationLogic = kea<navigationLogicType>([
         openSitePopover: true,
         closeSitePopover: true,
         toggleSitePopover: true,
-        showCreateOrganizationModal: true,
-        hideCreateOrganizationModal: true,
-        showCreateProjectModal: true,
-        hideCreateProjectModal: true,
         toggleProjectSwitcher: true,
         hideProjectSwitcher: true,
         openAppSourceEditor: (id: number, pluginId: number) => ({ id, pluginId }),
@@ -95,20 +91,6 @@ export const navigationLogic = kea<navigationLogicType>([
                 toggleSitePopover: (state) => !state,
             },
         ],
-        isCreateOrganizationModalShown: [
-            false,
-            {
-                showCreateOrganizationModal: () => true,
-                hideCreateOrganizationModal: () => false,
-            },
-        ],
-        isCreateProjectModalShown: [
-            false,
-            {
-                showCreateProjectModal: () => true,
-                hideCreateProjectModal: () => false,
-            },
-        ],
         isProjectSwitcherShown: [
             false,
             {