From dbcbf387e4fc0b7b85980aad5d9b7b5b26c07852 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Thomas=20Oberm=C3=BCller?= Date: Tue, 9 Jan 2024 12:46:03 +0100 Subject: [PATCH] fix(3000): re-implement debug notice (#19538) --------- Co-authored-by: Michael Matloka --- .../src/layout/navigation-3000/Navigation.tsx | 7 +-- .../navigation-3000/components/Navbar.tsx | 2 + .../components/NavbarButton.tsx | 2 +- .../src/layout/navigation/SideBar/SideBar.tsx | 2 - frontend/src/lib/components/DebugNotice.tsx | 48 ++++++++++++++++--- frontend/src/styles/global.scss | 6 +-- posthog/templates/overlays.html | 14 +++--- 7 files changed, 55 insertions(+), 26 deletions(-) diff --git a/frontend/src/layout/navigation-3000/Navigation.tsx b/frontend/src/layout/navigation-3000/Navigation.tsx index 16b4e9fade648..9cfe7ed28d4a6 100644 --- a/frontend/src/layout/navigation-3000/Navigation.tsx +++ b/frontend/src/layout/navigation-3000/Navigation.tsx @@ -6,7 +6,7 @@ import { BillingAlertsV2 } from 'lib/components/BillingAlertsV2' import { CommandBar } from 'lib/components/CommandBar/CommandBar' import { FlaggedFeature } from 'lib/components/FlaggedFeature' import { FEATURE_FLAGS } from 'lib/constants' -import { ReactNode, useEffect } from 'react' +import { ReactNode } from 'react' import { SceneConfig } from 'scenes/sceneTypes' import { navigationLogic } from '../navigation/navigationLogic' @@ -30,11 +30,6 @@ export function Navigation({ const { mobileLayout } = useValues(navigationLogic) const { activeNavbarItem, mode } = useValues(navigation3000Logic) - useEffect(() => { - // FIXME: Include debug notice in a non-obstructing way - document.getElementById('bottom-notice')?.remove() - }, []) - if (mode !== 'full') { return (
diff --git a/frontend/src/layout/navigation-3000/components/Navbar.tsx b/frontend/src/layout/navigation-3000/components/Navbar.tsx index 6fbae5671a9c3..87dc6473e8a26 100644 --- a/frontend/src/layout/navigation-3000/components/Navbar.tsx +++ b/frontend/src/layout/navigation-3000/components/Navbar.tsx @@ -2,6 +2,7 @@ import { IconGear, IconSearch, IconToolbar } from '@posthog/icons' import clsx from 'clsx' import { useActions, useValues } from 'kea' import { commandBarLogic } from 'lib/components/CommandBar/commandBarLogic' +import { DebugNotice } from 'lib/components/DebugNotice' import { Resizer } from 'lib/components/Resizer/Resizer' import { ScrollableShadows } from 'lib/components/ScrollableShadows/ScrollableShadows' import { IconWarning } from 'lib/lemon-ui/icons' @@ -70,6 +71,7 @@ export function Navbar(): JSX.Element {
    + } diff --git a/frontend/src/layout/navigation-3000/components/NavbarButton.tsx b/frontend/src/layout/navigation-3000/components/NavbarButton.tsx index c12620170479e..b0dbb214bcf88 100644 --- a/frontend/src/layout/navigation-3000/components/NavbarButton.tsx +++ b/frontend/src/layout/navigation-3000/components/NavbarButton.tsx @@ -18,7 +18,7 @@ import { KeyboardShortcut, KeyboardShortcutProps } from './KeyboardShortcut' export interface NavbarButtonProps extends Pick { identifier: string icon: ReactElement - title?: string + title?: string | ReactElement shortTitle?: string forceTooltipOnHover?: boolean tag?: 'alpha' | 'beta' | 'new' diff --git a/frontend/src/layout/navigation/SideBar/SideBar.tsx b/frontend/src/layout/navigation/SideBar/SideBar.tsx index fff51346c0f18..416905002515c 100644 --- a/frontend/src/layout/navigation/SideBar/SideBar.tsx +++ b/frontend/src/layout/navigation/SideBar/SideBar.tsx @@ -1,11 +1,9 @@ import { ActivationSidebar } from 'lib/components/ActivationSidebar/ActivationSidebar' -import { DebugNotice } from 'lib/components/DebugNotice' import { NotebookPopover } from 'scenes/notebooks/NotebookPanel/NotebookPopover' export function SideBar(): JSX.Element { return (
    -
    diff --git a/frontend/src/lib/components/DebugNotice.tsx b/frontend/src/lib/components/DebugNotice.tsx index 07757de7d0b20..7192253889504 100644 --- a/frontend/src/lib/components/DebugNotice.tsx +++ b/frontend/src/lib/components/DebugNotice.tsx @@ -1,10 +1,15 @@ -import { IconClose } from 'lib/lemon-ui/icons' +import { useValues } from 'kea' +import { IconBranch, IconClose, IconCode } from 'lib/lemon-ui/icons' import { LemonButton } from 'lib/lemon-ui/LemonButton' import { useEffect, useState } from 'react' +import { NavbarButton } from '~/layout/navigation-3000/components/NavbarButton' +import { navigation3000Logic } from '~/layout/navigation-3000/navigationLogic' + export function DebugNotice(): JSX.Element | null { const [debugInfo, setDebugInfo] = useState<{ branch: string; revision: string } | undefined>() const [noticeHidden, setNoticeHidden] = useState(false) + const { isNavCollapsed } = useValues(navigation3000Logic) useEffect(() => { const bottomNotice = document.getElementById('bottom-notice') @@ -27,17 +32,46 @@ export function DebugNotice(): JSX.Element | null { return null } + if (isNavCollapsed) { + return ( + } + title={ +
    +
    + DEBUG mode! +
    +
    + Branch: {debugInfo.branch} +
    +
    + Revision: {debugInfo.revision} +
    +
    Click to hide
    +
    + } + onClick={() => setNoticeHidden(true)} + /> + ) + } return ( -
    setNoticeHidden(true)}> -
    +
    +
    DEBUG mode } size="small" noPadding onClick={() => setNoticeHidden(true)} />
    -
    - Branch: {debugInfo.branch} +
    + + {debugInfo.branch}
    -
    - Revision: {debugInfo.revision} +
    + + {debugInfo.revision}
    ) diff --git a/frontend/src/styles/global.scss b/frontend/src/styles/global.scss index 7b9724e08d4e3..f82ae02f29e74 100644 --- a/frontend/src/styles/global.scss +++ b/frontend/src/styles/global.scss @@ -359,15 +359,15 @@ input::-ms-clear { cursor: pointer; div:nth-child(1) { - background: var(--primary-3000); + background: var(--brand-blue); } div:nth-child(2) { - background: var(--brand-blue); + background: var(--brand-red); } div:nth-child(3) { - background: var(--warning); + background: var(--brand-yellow); } span { diff --git a/posthog/templates/overlays.html b/posthog/templates/overlays.html index 2d5be7a6110c4..6bcab0d64fe55 100644 --- a/posthog/templates/overlays.html +++ b/posthog/templates/overlays.html @@ -1,22 +1,22 @@ {% if debug %}