\n {menuItems\n .filter(iterm => !!iterm)\n .map(item => {\n const selected = item.link === \"/\" + key\n const enabled = item.enabled(services.features)\n return (\n enabled && (\n \n \n \n {item.icon}\n {expanded && {item.title}}\n
\n \n \n )\n )\n })}\n \n )\n}\n\nexport const ApplicationSidebar: React.FC<{}> = () => {\n const [expanded, setExpanded] = usePersistentState\n
\n \n )\n}\n\nexport type PageHeaderProps = {\n user: User\n plan: CurrentSubscription\n classicProject: ClassicProjectStatus\n}\n\nfunction abbr(user: User) {\n return user.name\n ?.split(\" \")\n .filter(part => part.length > 0)\n .map(part => part[0])\n .join(\"\")\n .toUpperCase()\n}\n\nexport const PageHeader: React.FC\n setExpanded(!expanded)}\n >\n \n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n {children}
\n \n {/*{nextJitsu && {window.location.href=`${process.env.JITSU_NEXT_URL}?token=${nextJitsu}`}} className={\"cursor-pointer\"}>
Jitsu Next is available. Try it out now!
}*/}\n {classicProject && \n What is Jitsu Next?\n
\n Jitsu Next is a new version of Jitsu with new user interface and faster,\n better scalable backend.\n
\n Learn more\n
} >\n {window.location.href=`${process.env.JITSU_NEXT_URL}?token=${classicProject.token}&projectName=${encodeURIComponent(classicProject.name)}&utm_source=classic&utm_campaign=click`}} className={\"cursor-pointer\"}>\n \n Jitsu Next is a new version of Jitsu with new user interface and faster,\n better scalable backend.\n
\n Learn more\n
\n
\n \n setDropdownVisible(false)} />}\n onVisibleChange={vis => setDropdownVisible(vis)}\n >\n \n {abbr(user) ||
\n \n )\n}\n\nexport const DropdownMenu: React.FC<{ user: User; plan: CurrentSubscription; hideMenu: () => void }> = ({\n plan,\n user,\n hideMenu,\n}) => {\n const services = useServices()\n const history = useHistory()\n\n const showSettings = React.useCallback<() => void>(() => history.push(\"/user/settings\"), [history])\n\n return (\n \n
\n )\n}\n\nfunction handleBillingMessage(params) {\n if (!params.get(\"billingMessage\")) {\n return\n }\n\n ;(params.get(\"billingStatus\") === \"error\" ? notification.error : notification.success)({\n message: params.get(\"billingMessage\"),\n duration: 5,\n })\n}\n\nexport const ApplicationPage: React.FC<{classicProject: ClassicProjectStatus}> = ({ classicProject, children }) => {\n const services = useServices()\n handleBillingMessage(new URLSearchParams(useLocation().search))\n return (\n \n
\n {user.name}
\n {user.email}
\n \n
\n {services.features.billingEnabled && services.applicationConfiguration.billingUrl && (\n \n {services.activeProject?.name && (\n <>\n {services.activeProject.name}{\" \"}\n
\n \n {\n hideMenu()\n showProjectSwitchModal()\n }}\n >\n Switch project\n \n
\n \n
\n )}\n \n } onClick={showSettings}>\n Settings\n \n
\n \n
\n )\n}\n\nexport const SlackChatWidget: React.FC<{}> = () => {\n const services = useServices()\n const [popoverVisible, setPopoverVisible] = useState\n
\n \n \n \n
\n {children}
\n \n
\n
\n )\n }\n\n const jitsuHost = services.applicationConfiguration.rawConfig.keys.jitsu\n if (!services.userService.hasUser()) {\n return (\n \n
\n \n
\n )}\n />\n \n \n \n \n\n
\n \n \n \n This page does not exist. If you got here by clicking a link within Jitsu interface, try to contact us:{\" \"}\n \n {\"support@jitsu.com\"}\n \n \n }\n avatar={\n \n \n
\n )\n}\n\nconst PageWrapper: React.FC<{ pageTitle: string; component: ComponentType; pagePath: string }> = ({\n pageTitle,\n component,\n pagePath,\n ...rest\n}) => {\n const services = useServices()\n useEffect(() => {\n services.analyticsService.onPageLoad({\n pagePath: pagePath,\n })\n document[\"title\"] = `Jitsu: ${pageTitle}`\n currentPageHeaderStore.setBreadcrumbs(pageTitle)\n }, [])\n const Component = component as ExoticComponent\n return (\n \n
\n )\n }\n\n return (\n <>\n