feat: Toolbar 3000 (#17276)

cypress/e2e/toolbar.cy.ts

@@ -11,7 +11,7 @@ describe('Toolbar', () => {
                 .then((href) => {
                     cy.visit(href)
                 })
-            cy.get('#__POSTHOG_TOOLBAR__').shadow().find('.floating-toolbar-button').should('exist')
+            cy.get('#__POSTHOG_TOOLBAR__').shadow().find('.Toolbar').should('exist')
         })
     })
 

frontend/src/layout/GlobalModals.tsx

@@ -1,7 +1,7 @@
 import { LemonModal } from '@posthog/lemon-ui'
 import { actions, kea, path, reducers, useActions, useValues } from 'kea'
 import { FlaggedFeature } from 'lib/components/FlaggedFeature'
-import { HedgehogBuddyWithLogic } from 'lib/components/HedgehogBuddy/HedgehogBuddy'
+import { HedgehogBuddyWithLogic } from 'lib/components/HedgehogBuddy/HedgehogBuddyWithLogic'
 import { Prompt } from 'lib/logic/newPrompt/Prompt'
 import { Setup2FA } from 'scenes/authentication/Setup2FA'
 import { CreateOrganizationModal } from 'scenes/organization/CreateOrganizationModal'

frontend/src/layout/navigation-3000/themeLogic.ts

@@ -1,4 +1,4 @@
-import { actions, events, kea, path, reducers, selectors } from 'kea'
+import { actions, connect, events, kea, path, reducers, selectors } from 'kea'
 import { subscriptions } from 'kea-subscriptions'
 import { FEATURE_FLAGS } from 'lib/constants'
 import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
@@ -8,6 +8,9 @@ import type { themeLogicType } from './themeLogicType'
 
 export const themeLogic = kea<themeLogicType>([
     path(['layout', 'navigation-3000', 'themeLogic']),
+    connect({
+        values: [featureFlagLogic, ['featureFlags']],
+    }),
     actions({
         toggleTheme: true,
         overrideTheme: (darkModePreference: boolean | null) => ({ darkModePreference }),
@@ -36,7 +39,7 @@ export const themeLogic = kea<themeLogicType>([
             (s) => [
                 s.darkModeSavedPreference,
                 s.darkModeSystemPreference,
-                featureFlagLogic.selectors.featureFlags,
+                s.featureFlags,
                 sceneLogic.selectors.sceneConfig,
             ],
             (darkModeSavedPreference, darkModeSystemPreference, featureFlags, sceneConfig) => {

frontend/src/lib/components/HedgehogBuddy/HedgehogAccessories.tsx

@@ -0,0 +1,36 @@
+import { capitalizeFirstLetter } from 'lib/utils'
+
+import { HedgehogBuddyAccessory } from './components/AccessoryButton'
+import { accessoryGroups, standardAccessories } from './sprites/sprites'
+
+export function HedgehogAccessories({ isDarkModeOn }: { isDarkModeOn: boolean }): JSX.Element {
+    return (
+        <>
+            <h3>Hi, I'm Max!</h3>
+            <p>
+                Don't mind me. I'm just here to keep you company.
+                <br />
+                You can move me around by clicking and dragging or control me with WASD / arrow keys.
+            </p>
+
+            {accessoryGroups.map((group) => (
+                <div key={group}>
+                    <h4>{capitalizeFirstLetter(group)}</h4>
+
+                    <div className="flex gap-2 my-2 overflow-y-auto">
+                        {Object.keys(standardAccessories)
+                            .filter((acc) => standardAccessories[acc].group === group)
+                            .map((acc) => (
+                                <HedgehogBuddyAccessory
+                                    key={acc}
+                                    accessoryKey={acc}
+                                    accessory={standardAccessories[acc]}
+                                    isDarkModeOn={isDarkModeOn}
+                                />
+                            ))}
+                    </div>
+                </div>
+            ))}
+        </>
+    )
+}

frontend/src/lib/components/HedgehogBuddy/HedgehogBuddy.tsx

@@ -1,20 +1,16 @@
 import './HedgehogBuddy.scss'
+import './HedgehogBuddy.scss'
 
-import { useActions, useValues } from 'kea'
-import { FEATURE_FLAGS } from 'lib/constants'
+import { useValues } from 'kea'
 import { LemonButton } from 'lib/lemon-ui/LemonButton'
 import { LemonDivider } from 'lib/lemon-ui/LemonDivider'
 import { Popover } from 'lib/lemon-ui/Popover/Popover'
-import { capitalizeFirstLetter, range, sampleOne } from 'lib/utils'
+import { range, sampleOne } from 'lib/utils'
 import { MutableRefObject, useEffect, useRef, useState } from 'react'
 
-import { themeLogic } from '~/layout/navigation-3000/themeLogic'
-
-import { FlaggedFeature } from '../FlaggedFeature'
-import { HedgehogBuddyAccessory } from './components/AccessoryButton'
+import { HedgehogAccessories } from './HedgehogAccessories'
 import { hedgehogbuddyLogic } from './hedgehogbuddyLogic'
 import {
-    accessoryGroups,
     AccessoryInfo,
     baseSpriteAccessoriesPath,
     baseSpritePath,
@@ -318,7 +314,10 @@ export class HedgehogActor {
             <div
                 className="HedgehogBuddy"
                 data-content={preloadContent}
-                onMouseDown={() => {
+                onMouseDown={(e) => {
+                    if (e.button !== 0) {
+                        return
+                    }
                     let moved = false
                     const onMouseMove = (e: any): void => {
                         moved = true
@@ -399,7 +398,7 @@ export function HedgehogBuddy({
     onClick?: () => void
     onPositionChange?: (actor: HedgehogActor) => void
     popoverOverlay?: React.ReactNode
-    // passed in because toolbar needs to check this differently than the app
+    // passed in as this might need to be the app's global dark mode setting or the toolbar's local one
     isDarkModeOn: boolean
 }): JSX.Element {
     const actorRef = useRef<HedgehogActor>()
@@ -478,48 +477,8 @@ export function HedgehogBuddy({
             overlay={
                 popoverOverlay || (
                     <div className="HedgehogBuddyPopover p-2 max-w-140">
-                        <h3>Hi, I'm Max!</h3>
-                        <p>
-                            Don't mind me. I'm just here to keep you company.
-                            <br />
-                            You can move me around by clicking and dragging or control me with WASD / arrow keys.
-                        </p>
-
-                        {accessoryGroups.map((group) => (
-                            <div key={group}>
-                                <h4>{capitalizeFirstLetter(group)}</h4>
-
-                                <div className="flex gap-2 my-2 overflow-y-auto">
-                                    {Object.keys(standardAccessories)
-                                        .filter((acc) => standardAccessories[acc].group === group)
-                                        .map((acc) => (
-                                            <HedgehogBuddyAccessory
-                                                key={acc}
-                                                accessoryKey={acc}
-                                                accessory={standardAccessories[acc]}
-                                            />
-                                        ))}
-                                </div>
-                            </div>
-                        ))}
-
-                        <FlaggedFeature flag={FEATURE_FLAGS.HEDGEHOG_MODE_DEBUG}>
-                            <>
-                                <LemonDivider />
-                                <div className="flex gap-2 my-2 overflow-y-auto">
-                                    {Object.keys(standardAnimations).map((x) => (
-                                        <LemonButton
-                                            key={x}
-                                            type="secondary"
-                                            size="small"
-                                            onClick={() => actor.setAnimation(x)}
-                                        >
-                                            {capitalizeFirstLetter(x)}
-                                        </LemonButton>
-                                    ))}
-                                </div>
-                            </>
-                        </FlaggedFeature>
+                        <HedgehogAccessories isDarkModeOn={isDarkModeOn} />
+
                         <LemonDivider />
                         <div className="flex justify-end gap-2">
                             <LemonButton type="secondary" status="danger" onClick={() => disappear()}>
@@ -537,15 +496,3 @@ export function HedgehogBuddy({
         </Popover>
     )
 }
-
-export function HedgehogBuddyWithLogic(): JSX.Element {
-    const { hedgehogModeEnabled } = useValues(hedgehogbuddyLogic)
-    const { setHedgehogModeEnabled } = useActions(hedgehogbuddyLogic)
-    const { isDarkModeOn } = useValues(themeLogic)
-
-    return hedgehogModeEnabled ? (
-        <HedgehogBuddy onClose={() => setHedgehogModeEnabled(false)} isDarkModeOn={isDarkModeOn} />
-    ) : (
-        <></>
-    )
-}

frontend/src/lib/components/HedgehogBuddy/HedgehogBuddyWithLogic.tsx

@@ -0,0 +1,20 @@
+import './HedgehogBuddy.scss'
+
+import { useActions, useValues } from 'kea'
+
+import { themeLogic } from '~/layout/navigation-3000/themeLogic'
+
+import { HedgehogBuddy } from './HedgehogBuddy'
+import { hedgehogbuddyLogic } from './hedgehogbuddyLogic'
+
+export function HedgehogBuddyWithLogic(): JSX.Element {
+    const { hedgehogModeEnabled } = useValues(hedgehogbuddyLogic)
+    const { setHedgehogModeEnabled } = useActions(hedgehogbuddyLogic)
+    const { isDarkModeOn } = useValues(themeLogic)
+
+    return hedgehogModeEnabled ? (
+        <HedgehogBuddy onClose={() => setHedgehogModeEnabled(false)} isDarkModeOn={isDarkModeOn} />
+    ) : (
+        <></>
+    )
+}

frontend/src/lib/components/HedgehogBuddy/components/AccessoryButton.tsx

@@ -3,20 +3,22 @@ import { IconLock } from 'lib/lemon-ui/icons'
 import { LemonButton } from 'lib/lemon-ui/LemonButton'
 import { capitalizeFirstLetter } from 'lib/utils'
 
-import { themeLogic } from '~/layout/navigation-3000/themeLogic'
-
 import { hedgehogbuddyLogic } from '../hedgehogbuddyLogic'
 import { AccessoryInfo, baseSpriteAccessoriesPath } from '../sprites/sprites'
 
 export type HedgehogBuddyAccessoryProps = {
     accessory: AccessoryInfo
     accessoryKey: string
+    isDarkModeOn: boolean
 }
 
-export function HedgehogBuddyAccessory({ accessoryKey, accessory }: HedgehogBuddyAccessoryProps): JSX.Element {
+export function HedgehogBuddyAccessory({
+    accessoryKey,
+    accessory,
+    isDarkModeOn,
+}: HedgehogBuddyAccessoryProps): JSX.Element {
     const { accessories, availableAccessories } = useValues(hedgehogbuddyLogic)
     const { addAccessory, removeAccessory } = useActions(hedgehogbuddyLogic)
-    const { isDarkModeOn } = useValues(themeLogic)
 
     const isUnlocked = availableAccessories.includes(accessoryKey)
 

frontend/src/lib/lemon-ui/LemonMenu/LemonMenu.tsx

@@ -78,6 +78,7 @@ export interface LemonMenuProps
             | 'closeParentPopoverOnClickInside'
             | 'className'
             | 'onClickOutside'
+            | 'getPopupContainer'
         >,
         LemonMenuOverlayProps {
     /** Must support `ref` and `onKeyDown` for keyboard navigation. */

frontend/src/lib/lemon-ui/LemonSwitch/LemonSwitch.scss

@@ -134,8 +134,8 @@
     }
 
     .LemonSwitch--checked & {
-        background-color: var(--primary);
-        border-color: var(--primary);
+        background-color: var(--primary-3000);
+        border-color: var(--primary-3000);
         transform: translateX(1rem);
 
         .posthog-3000 & {

frontend/src/lib/lemon-ui/Link/Link.scss

@@ -26,4 +26,14 @@
     > .LemonIcon {
         margin-left: 0.15em;
     }
+
+    &--subtle {
+        .posthog-3000 & {
+            color: var(--default);
+
+            &:not(:disabled):hover {
+                color: var(--primary-3000-hover);
+            }
+        }
+    }
 }

frontend/src/lib/lemon-ui/Link/Link.tsx

@@ -36,6 +36,8 @@ export type LinkProps = Pick<React.HTMLProps<HTMLAnchorElement>, 'target' | 'cla
      * This is true by default if `children` is a string.
      */
     targetBlankIcon?: boolean
+    /** If true, the default color will be as normal text with only a link color on hover */
+    subtle?: boolean
 }
 
 // Some URLs we want to enforce a full reload such as billing which is redirected by Django
@@ -68,6 +70,7 @@ export const Link: React.FC<LinkProps & React.RefAttributes<HTMLElement>> = Reac
         {
             to,
             target,
+            subtle,
             disableClientSideRouting,
             preventClick = false,
             onClick: onClickRaw,
@@ -124,7 +127,7 @@ export const Link: React.FC<LinkProps & React.RefAttributes<HTMLElement>> = Reac
             // eslint-disable-next-line react/forbid-elements
             <a
                 ref={ref as any}
-                className={clsx('Link', className)}
+                className={clsx('Link', subtle && 'Link--subtle', className)}
                 onClick={onClick}
                 href={typeof to === 'string' ? to : '#'}
                 target={target}
@@ -140,7 +143,7 @@ export const Link: React.FC<LinkProps & React.RefAttributes<HTMLElement>> = Reac
                 <span>
                     <button
                         ref={ref as any}
-                        className={clsx('Link', className)}
+                        className={clsx('Link', subtle && 'Link--subtle', className)}
                         onClick={onClick}
                         type="button"
                         disabled={disabled || !!disabledReason}