feat(3000): Add plus button back to product analytics (#19123)

* feat(3000): Add plus button back to product analytics

* Fix size action sizing

* Fixed collaped navbar

* Update UI snapshots for `chromium` (1)

* Update UI snapshots for `chromium` (1)

* Update UI snapshots for `chromium` (1)

* Update UI snapshots for `chromium` (1)

---------

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>

frontend/src/layout/navigation-3000/components/Navbar.tsx

@@ -42,6 +42,7 @@ export function Navbar(): JSX.Element {
                                             title={item.label}
                                             identifier={item.identifier}
                                             icon={item.icon}
+                                            sideAction={item.sideAction}
                                             tag={item.tag}
                                             to={'to' in item ? item.to : undefined}
                                             onClick={

frontend/src/layout/navigation-3000/components/NavbarButton.tsx

@@ -2,7 +2,7 @@ import { LemonTag } from '@posthog/lemon-ui'
 import clsx from 'clsx'
 import { useActions, useValues } from 'kea'
 import { useFeatureFlag } from 'lib/hooks/useFeatureFlag'
-import { LemonButton } from 'lib/lemon-ui/LemonButton'
+import { LemonButton, LemonButtonProps } from 'lib/lemon-ui/LemonButton'
 import { Tooltip } from 'lib/lemon-ui/Tooltip'
 import React, { FunctionComponent, ReactElement, useState } from 'react'
 import { sceneLogic } from 'scenes/sceneLogic'
@@ -11,27 +11,37 @@ import { breadcrumbsLogic } from '~/layout/navigation/Breadcrumbs/breadcrumbsLog
 import { SidebarChangeNoticeContent, useSidebarChangeNotices } from '~/layout/navigation/SideBar/SidebarChangeNotice'
 
 import { navigation3000Logic } from '../navigationLogic'
+import { NavbarItem } from '../types'
 import { KeyboardShortcut, KeyboardShortcutProps } from './KeyboardShortcut'
 
-export interface NavbarButtonProps {
+export interface NavbarButtonProps extends Pick<LemonButtonProps, 'onClick' | 'icon' | 'sideIcon' | 'to' | 'active'> {
     identifier: string
     icon: ReactElement
     title?: string
     shortTitle?: string
     forceTooltipOnHover?: boolean
     tag?: 'alpha' | 'beta'
-    onClick?: () => void
-    to?: string
-    active?: boolean
     keyboardShortcut?: KeyboardShortcutProps
+    sideAction?: NavbarItem['sideAction']
 }
 
 export const NavbarButton: FunctionComponent<NavbarButtonProps> = React.forwardRef<
     HTMLButtonElement,
     NavbarButtonProps
 >(
     (
-        { identifier, shortTitle, title, forceTooltipOnHover, tag, onClick, keyboardShortcut, ...buttonProps },
+        {
+            identifier,
+            shortTitle,
+            title,
+            forceTooltipOnHover,
+            tag,
+            onClick,
+            keyboardShortcut,
+            sideAction,
+            sideIcon,
+            ...rest
+        },
         ref
     ): JSX.Element => {
         const { activeScene } = useValues(sceneLogic)
@@ -45,9 +55,27 @@ export const NavbarButton: FunctionComponent<NavbarButtonProps> = React.forwardR
         const here = activeScene === identifier || sceneBreadcrumbKeys.includes(identifier)
         const isNavCollapsedActually = isNavCollapsed || isUsingNewNav
 
+        const buttonProps: LemonButtonProps = rest
         if (!isUsingNewNav) {
             buttonProps.active = here
         }
+        if (!isNavCollapsedActually) {
+            if (sideAction) {
+                // @ts-expect-error - in this case we are perfectly okay with assigning a sideAction
+                buttonProps.sideAction = {
+                    ...sideAction,
+                    divider: true,
+                    'data-attr': `menu-item-${sideAction.identifier.toLowerCase()}`,
+                }
+                buttonProps.sideIcon = null
+            } else if (keyboardShortcut) {
+                buttonProps.sideIcon = (
+                    <span className="text-xs">
+                        <KeyboardShortcut {...keyboardShortcut} />
+                    </span>
+                )
+            }
+        }
 
         let content: JSX.Element | string | undefined
         if (!isNavCollapsedActually) {
@@ -80,24 +108,17 @@ export const NavbarButton: FunctionComponent<NavbarButtonProps> = React.forwardR
                 ref={ref}
                 data-attr={`menu-item-${identifier.toString().toLowerCase()}`}
                 onMouseEnter={() => setHasBeenClicked(false)}
-                onClick={() => {
+                onClick={(e) => {
                     if (buttonProps.to) {
                         hideNavOnMobile()
                     }
                     setHasBeenClicked(true)
-                    onClick?.()
+                    onClick?.(e)
                 }}
                 className={clsx('NavbarButton', isUsingNewNav && here && 'NavbarButton--here')}
                 fullWidth
                 type="secondary"
                 stealth={true}
-                sideIcon={
-                    !isNavCollapsedActually && keyboardShortcut ? (
-                        <span className="text-xs">
-                            <KeyboardShortcut {...keyboardShortcut} />
-                        </span>
-                    ) : null
-                }
                 {...buttonProps}
             >
                 {content}

frontend/src/layout/navigation-3000/navigationLogic.tsx

@@ -21,6 +21,7 @@ import { actions, connect, events, kea, listeners, path, props, reducers, select
 import { router } from 'kea-router'
 import { subscriptions } from 'kea-subscriptions'
 import { FEATURE_FLAGS } from 'lib/constants'
+import { IconPlusMini } from 'lib/lemon-ui/icons'
 import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
 import { isNotNil } from 'lib/utils'
 import React from 'react'
@@ -364,6 +365,12 @@ export const navigation3000Logic = kea<navigation3000LogicType>([
                             icon: <IconGraph />,
                             logic: isUsingSidebar ? insightsSidebarLogic : undefined,
                             to: isUsingSidebar ? undefined : urls.savedInsights(),
+                            sideAction: {
+                                icon: <IconPlusMini />, // The regular plus is too big
+                                to: urls.insightNew(),
+                                tooltip: 'New insight',
+                                identifier: Scene.Insight,
+                            },
                         },
                         featureFlags[FEATURE_FLAGS.WEB_ANALYTICS]
                             ? {

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

@@ -1,4 +1,4 @@
-import { LemonTagType } from '@posthog/lemon-ui'
+import { LemonTagType, SideAction } from '@posthog/lemon-ui'
 import { Logic, LogicWrapper } from 'kea'
 import { FEATURE_FLAGS } from 'lib/constants'
 import { Dayjs } from 'lib/dayjs'
@@ -30,6 +30,7 @@ interface NavbarItemBase {
     icon: JSX.Element
     featureFlag?: (typeof FEATURE_FLAGS)[keyof typeof FEATURE_FLAGS]
     tag?: 'alpha' | 'beta'
+    sideAction?: Pick<SideAction, 'icon' | 'to' | 'onClick' | 'tooltip'> & { identifier: string }
 }
 export interface SceneNavbarItem extends NavbarItemBase {
     to: string

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

@@ -167,7 +167,7 @@
     background: none;
     transform: translateY(-50%);
 
-    .LemonButtonWithSideAction--small & {
+    .LemonButton--small & {
         right: 0.375rem;
     }
 }

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

@@ -248,12 +248,13 @@ export const LemonButton: React.FunctionComponent<LemonButtonProps & React.RefAt
                 const SideComponent = sideDropdown ? LemonButtonWithDropdown : LemonButton
 
                 workingButton = (
-                    <div className={clsx('LemonButtonWithSideAction', `LemonButtonWithSideAction--${size}`)}>
+                    <div className="LemonButtonWithSideAction">
                         {workingButton}
                         <div className="LemonButtonWithSideAction__side-button">
                             <SideComponent
                                 // We don't want secondary style as it creates double borders
                                 type={type !== 'secondary' ? type : undefined}
+                                size={size}
                                 status={status}
                                 dropdown={sideDropdown as LemonButtonDropdown}
                                 noPadding

frontend/src/lib/lemon-ui/LemonButton/LemonButton3000.scss

@@ -11,7 +11,7 @@
     --lemon-button-press-depth: 0.03125rem;
     --lemon-button-padding-horizontal: 0.75rem;
     --lemon-button-padding-adjacent-icon: 0.375rem;
-    --lemon-button-side-action-icon-width: 1.25rem;
+    --lemon-button-side-action-width: 2rem;
 
     .LemonButton,
     .Link.LemonButton {
@@ -80,14 +80,14 @@
             --lemon-button-font-size: 0.75rem;
             --lemon-button-height: 1.6875rem;
             --lemon-button-gap: 0.25rem;
-            --lemon-button-side-action-icon-width: 1.25rem;
+            --lemon-button-side-action-width: 1.5rem;
         }
 
         &.LemonButton--small {
             --lemon-button-padding-horizontal: 0.5rem;
             --lemon-button-height: 2.0625rem;
             --lemon-button-gap: 0.25rem;
-            --lemon-button-side-action-icon-width: 1.25rem;
+            --lemon-button-side-action-width: 1.75rem;
         }
 
         &.LemonButton--large {
@@ -262,7 +262,10 @@
     }
 
     .LemonButtonWithSideAction__spacer {
-        width: var(--lemon-button-side-action-icon-width);
+        width: calc(
+            var(--lemon-button-side-action-width) -
+                var(--lemon-button-padding-right, var(--lemon-button-padding-horizontal))
+        );
         height: 1.25rem;
         color: var(--muted);
 
@@ -283,10 +286,7 @@
         transform: none;
 
         .LemonButton {
-            width: calc(
-                var(--lemon-button-side-action-icon-width) +
-                    var(--lemon-button-padding-adjacent-icon, var(--lemon-button-padding-horizontal))
-            );
+            width: var(--lemon-button-side-action-width);
             height: 100%;
             border-top-left-radius: 0;
             border-bottom-left-radius: 0;