diff --git a/frontend/src/layout/GlobalModals.tsx b/frontend/src/layout/GlobalModals.tsx new file mode 100644 index 0000000000000..83817d7ad182f --- /dev/null +++ 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([ + 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 ( + <> + + + + + ) +} diff --git a/frontend/src/layout/navigation-3000/Navigation.tsx b/frontend/src/layout/navigation-3000/Navigation.tsx index 253156e51398a..06cf9b3db6abb 100644 --- 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({ + ) } diff --git a/frontend/src/layout/navigation-3000/components/Breadcrumbs.tsx b/frontend/src/layout/navigation-3000/components/Breadcrumbs.tsx index d34e254281c78..50dd074259976 100644 --- 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} diff --git a/frontend/src/layout/navigation/OrganizationSwitcher.tsx b/frontend/src/layout/navigation/OrganizationSwitcher.tsx index 4c1d5401a854d..ed9232ee87256 100644 --- 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 index 092991119972f..87edca2b2b4b6 100644 --- 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 (
diff --git a/frontend/src/layout/navigation/TopBar/TopBar.tsx b/frontend/src/layout/navigation/TopBar/TopBar.tsx index b81bbed16648e..d98f23b274641 100644 --- 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 {
- - - + ) } diff --git a/frontend/src/layout/navigation/navigationLogic.ts b/frontend/src/layout/navigation/navigationLogic.ts index fbf0a1fbec768..2814fbb936b8e 100644 --- a/frontend/src/layout/navigation/navigationLogic.ts +++ b/frontend/src/layout/navigation/navigationLogic.ts @@ -35,10 +35,6 @@ export const navigationLogic = kea([ 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([ toggleSitePopover: (state) => !state, }, ], - isCreateOrganizationModalShown: [ - false, - { - showCreateOrganizationModal: () => true, - hideCreateOrganizationModal: () => false, - }, - ], - isCreateProjectModalShown: [ - false, - { - showCreateProjectModal: () => true, - hideCreateProjectModal: () => false, - }, - ], isProjectSwitcherShown: [ false, {