feat: Moved buttons from help to sitepopover (#18659)

PostHog · Nov 16, 2023 · 333df36 · 333df36
1 parent 558661e
commit 333df36
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 46 deletions.
diff --git a/frontend/__snapshots__/posthog-3000-navigation--navigation-3000.png b/frontend/__snapshots__/posthog-3000-navigation--navigation-3000.png
diff --git a/frontend/__snapshots__/posthog-3000-navigation--navigation-base.png b/frontend/__snapshots__/posthog-3000-navigation--navigation-base.png
diff --git a/frontend/src/layout/GlobalModals.tsx b/frontend/src/layout/GlobalModals.tsx
@@ -13,6 +13,7 @@ import { FlaggedFeature } from 'lib/components/FlaggedFeature'
 import { Prompt } from 'lib/logic/newPrompt/Prompt'
 import { inviteLogic } from 'scenes/settings/organization/inviteLogic'
 import { InviteModal } from 'scenes/settings/organization/InviteModal'
+import { HedgehogBuddyWithLogic } from 'lib/components/HedgehogBuddy/HedgehogBuddy'
 
 export const globalModalsLogic = kea<globalModalsLogicType>([
     path(['layout', 'navigation', 'globalModalsLogic']),
@@ -76,6 +77,7 @@ export function GlobalModals(): JSX.Element {
             <FlaggedFeature flag="enable-prompts">
                 <Prompt />
             </FlaggedFeature>
+            <HedgehogBuddyWithLogic />
         </>
     )
 }
diff --git a/frontend/src/layout/navigation-3000/components/Navbar.tsx b/frontend/src/layout/navigation-3000/components/Navbar.tsx
@@ -1,7 +1,6 @@
 import { LemonBadge } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
-import { HelpButton } from 'lib/components/HelpButton/HelpButton'
-import { IconQuestion, IconGear, IconDay, IconNight, IconAsterisk } from '@posthog/icons'
+import { IconGear, IconDay, IconNight, IconAsterisk } from '@posthog/icons'
 import { Popover } from 'lib/lemon-ui/Popover'
 import { ProfilePicture } from 'lib/lemon-ui/ProfilePicture'
 import { Scene } from 'scenes/sceneTypes'
@@ -91,17 +90,6 @@ export function Navbar(): JSX.Element {
                             onClick={() => toggleTheme()}
                             persistentTooltip
                         />
-                        <HelpButton
-                            customComponent={
-                                <NavbarButton
-                                    icon={<IconQuestion />}
-                                    identifier="help-button"
-                                    title="Need any help?"
-                                    shortTitle="Help"
-                                />
-                            }
-                            placement="right-end"
-                        />
                         <NavbarButton
                             icon={<IconGear />}
                             identifier={Scene.Settings}

diff --git a/frontend/src/layout/navigation/TopBar/SitePopover.tsx b/frontend/src/layout/navigation/TopBar/SitePopover.tsx
@@ -15,6 +15,7 @@ import {
     IconCorporate,
     IconPlus,
     IconRedeem,
+    IconFlare,
 } from 'lib/lemon-ui/icons'
 import { Popover } from 'lib/lemon-ui/Popover/Popover'
 import { Link } from 'lib/lemon-ui/Link'
@@ -38,6 +39,8 @@ import { FEATURE_FLAGS } from 'lib/constants'
 import { FlaggedFeature } from 'lib/components/FlaggedFeature'
 import { featurePreviewsLogic } from '~/layout/FeaturePreviews/featurePreviewsLogic'
 import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
+import { IconLive } from '@posthog/icons'
+import { hedgehogbuddyLogic } from 'lib/components/HedgehogBuddy/hedgehogbuddyLogic'
 
 function SitePopoverSection({ title, children }: { title?: string | JSX.Element; children: any }): JSX.Element {
     return (
@@ -237,6 +240,8 @@ export function SitePopoverOverlay(): JSX.Element {
     const { preflight } = useValues(preflightLogic)
     const { closeSitePopover } = useActions(navigationLogic)
     const { billing } = useValues(billingLogic)
+    const { hedgehogModeEnabled } = useValues(hedgehogbuddyLogic)
+    const { setHedgehogModeEnabled } = useActions(hedgehogbuddyLogic)
 
     return (
         <>
@@ -277,11 +282,30 @@ export function SitePopoverOverlay(): JSX.Element {
                     <InstanceSettings />
                 </SitePopoverSection>
             )}
-            <FlaggedFeature flag={FEATURE_FLAGS.EARLY_ACCESS_FEATURE_SITE_BUTTON}>
-                <SitePopoverSection>
+            <SitePopoverSection>
+                <LemonButton
+                    onClick={closeSitePopover}
+                    to={'https://posthog.com/changelog'}
+                    icon={<IconLive />}
+                    fullWidth
+                    data-attr="whats-new-button"
+                    targetBlank
+                >
+                    What's new?
+                </LemonButton>
+                <FlaggedFeature flag={FEATURE_FLAGS.EARLY_ACCESS_FEATURE_SITE_BUTTON}>
                     <FeaturePreviewsButton />
-                </SitePopoverSection>
-            </FlaggedFeature>
+                </FlaggedFeature>
+
+                <LemonButton
+                    onClick={() => setHedgehogModeEnabled(!hedgehogModeEnabled)}
+                    icon={<IconFlare />}
+                    fullWidth
+                    data-attr="hedgehog-mode-button"
+                >
+                    {hedgehogModeEnabled ? 'Disable' : 'Enable'} hedgehog mode
+                </LemonButton>
+            </SitePopoverSection>
             <SitePopoverSection>
                 <SignOutButton />
             </SitePopoverSection>

diff --git a/frontend/src/lib/components/HelpButton/HelpButton.tsx b/frontend/src/lib/components/HelpButton/HelpButton.tsx
@@ -9,17 +9,13 @@ import {
     IconHelpOutline,
     IconQuestionAnswer,
     IconMessages,
-    IconFlare,
-    IconLive,
     IconSupport,
     IconFeedback,
     IconBugReport,
 } from 'lib/lemon-ui/icons'
 import clsx from 'clsx'
 import { Placement } from '@floating-ui/react'
 import { DefaultAction, inAppPromptLogic } from 'lib/logic/inAppPrompt/inAppPromptLogic'
-import { hedgehogbuddyLogic } from '../HedgehogBuddy/hedgehogbuddyLogic'
-import { HedgehogBuddyWithLogic } from '../HedgehogBuddy/HedgehogBuddy'
 import { supportLogic } from '../Support/supportLogic'
 import { SupportModal } from '../Support/SupportModal'
 import { LemonMenu } from 'lib/lemon-ui/LemonMenu'
@@ -88,8 +84,6 @@ export function HelpButton({
     const { validProductTourSequences } = useValues(inAppPromptLogic)
     const { runFirstValidSequence, promptAction } = useActions(inAppPromptLogic)
     const { isPromptVisible } = useValues(inAppPromptLogic)
-    const { hedgehogModeEnabled } = useValues(hedgehogbuddyLogic)
-    const { setHedgehogModeEnabled } = useActions(hedgehogbuddyLogic)
     const { openSupportForm } = useActions(supportLogic)
     const { isCloudOrDev } = useValues(preflightLogic)
 
@@ -103,20 +97,6 @@ export function HelpButton({
         <>
             <LemonMenu
                 items={[
-                    !contactOnly && {
-                        items: [
-                            {
-                                icon: <IconLive />,
-                                label: "What's new?",
-                                onClick: () => {
-                                    reportHelpButtonUsed(HelpType.Updates)
-                                    hideHelp()
-                                },
-                                to: 'https://posthog.com/changelog',
-                                targetBlank: true,
-                            },
-                        ],
-                    },
                     showSupportOptions && {
                         items: [
                             {
@@ -182,14 +162,6 @@ export function HelpButton({
                                     hideHelp()
                                 },
                             },
-                            {
-                                label: `${hedgehogModeEnabled ? 'Disable' : 'Enable'} hedgehog mode`,
-                                icon: <IconFlare />,
-                                onClick: () => {
-                                    setHedgehogModeEnabled(!hedgehogModeEnabled)
-                                    hideHelp()
-                                },
-                            },
                         ],
                     },
                 ]}
@@ -208,7 +180,6 @@ export function HelpButton({
                     )}
                 </div>
             </LemonMenu>
-            <HedgehogBuddyWithLogic />
             <SupportModal />
         </>
     )