Merge branch 'master' into feat/toolbar-3000

cypress/e2e/surveys.cy.ts

@@ -165,4 +165,58 @@ describe('Surveys', () => {
         cy.get('[data-attr=delete-survey]').click()
         cy.get('.Toastify__toast-body').contains('Survey deleted').should('be.visible')
     })
+
+    it('creates a new multiple choice survey with an open-ended choice', () => {
+        cy.get('h1').should('contain', 'Surveys')
+        cy.get('[data-attr=new-survey]').click()
+        cy.get('[data-attr=new-blank-survey]').click()
+
+        // add a multiple choice question with an open-ended question
+        cy.get('[data-attr=survey-name]').focus().type(name).should('have.value', name)
+        cy.get('[data-attr="survey-question-type-0"]').click()
+        cy.contains('Multiple choice select').click()
+        cy.get('button').contains('Add open-ended choice').click()
+
+        // check default open-ended choice form input and appearance after
+        // open-ended choice was added
+        cy.get('.LemonInput__input[value="Other"]')
+        cy.get('.choice-option').eq(3).contains('Other:')
+        cy.get('.choice-option').eq(3).find('input[type="text"]').should('have.value', '')
+
+        // typing in open-ended question's appearance automatically checks the
+        // checkbox
+        cy.get('.choice-option').eq(3).find('input[type="checkbox"]').should('not.be.checked')
+        cy.get('.choice-option').eq(3).find('input[type="text"]').type('Outreach')
+        cy.get('.choice-option').eq(3).find('input[type="checkbox"]').should('be.checked')
+
+        // clicking on open-ended question's appearance label unchecks or checks
+        // the checkbox
+        cy.get('.choice-option').eq(3).click()
+        cy.get('.choice-option').eq(3).find('input[type="checkbox"]').should('not.be.checked')
+        cy.get('.choice-option').eq(3).click()
+        cy.get('.choice-option').eq(3).find('input[type="checkbox"]').should('be.checked')
+
+        // removing text in open-ended question's appearance automatically
+        // unchecks the checkbox
+        cy.get('.choice-option').eq(3).find('input[type="text"]').clear()
+
+        // open-ended question label doesn't change even if appearance input
+        // changes
+        cy.get('.LemonInput__input[value="Other"]')
+
+        // change open-ended choice after the label was added
+        cy.contains('Choices').parent().find('input[type="text"]').eq(3).clear()
+        cy.contains('Choices').parent().find('input[type="text"]').eq(3).type('First Choice')
+        cy.get('.choice-option').eq(3).contains('First Choice:')
+
+        // attempt to create and save survey
+        cy.get('[data-attr=save-survey]').first().click()
+
+        // after save there should be a launch button
+        cy.get('button[data-attr="launch-survey"]').should('have.text', 'Launch')
+
+        cy.clickNavMenu('surveys')
+        cy.get('[data-attr=surveys-table]').should('contain', name)
+        cy.get(`[data-row-key="${name}"]`).contains(name).click()
+    })
 })

cypress/support/e2e.ts

@@ -33,6 +33,7 @@ beforeEach(() => {
                 'surveys-new-creation-flow': true,
                 'surveys-results-visualizations': true,
                 'auto-redirect': true,
+                'surveys-open-choice': true,
                 notebooks: true,
             })
         )

frontend/src/layout/navigation-3000/Navigation.scss

@@ -57,14 +57,9 @@
         z-index: var(--z-main-nav);
 
         .LemonButton {
-            min-height: 2.25rem !important; // Reduce minimum height
-
-            > span {
+            .LemonButton__chrome {
                 padding: 0.25rem !important;
-            }
-
-            .LemonButton__content {
-                font-size: 0.813rem;
+                font-size: 0.8125rem;
             }
         }
 
@@ -77,7 +72,7 @@
         }
 
         li + li {
-            margin-top: 0.25rem;
+            margin-top: -1px;
         }
     }
 }

frontend/src/layout/navigation-3000/components/Breadcrumbs.scss

@@ -37,7 +37,7 @@
 
 .Breadcrumbs3000__crumbs {
     height: 1rem;
-    margin-top: 0.25rem;
+    margin-top: calc(0.25rem * (1 - var(--breadcrumbs-compaction-rate)));
     display: flex;
     align-items: center;
     overflow: visible;

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

@@ -3,7 +3,6 @@ import { LemonBadge } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
 import { commandBarLogic } from 'lib/components/CommandBar/commandBarLogic'
 import { Resizer } from 'lib/components/Resizer/Resizer'
-import { useFeatureFlag } from 'lib/hooks/useFeatureFlag'
 import { Popover } from 'lib/lemon-ui/Popover'
 import { ProfilePicture } from 'lib/lemon-ui/ProfilePicture'
 import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
@@ -14,7 +13,6 @@ import { userLogic } from 'scenes/userLogic'
 
 import { navigationLogic } from '~/layout/navigation/navigationLogic'
 import { SitePopoverOverlay } from '~/layout/navigation/TopBar/SitePopover'
-import { KeyboardShortcut } from '~/layout/navigation-3000/components/KeyboardShortcut'
 
 import { navigation3000Logic } from '../navigationLogic'
 import { themeLogic } from '../themeLogic'
@@ -47,7 +45,6 @@ export function Navbar(): JSX.Element {
     const { toggleSearchBar } = useActions(commandBarLogic)
 
     const containerRef = useRef<HTMLDivElement | null>(null)
-    const isUsingNewNav = useFeatureFlag('POSTHOG_3000_NAV')
 
     return (
         <nav className="Navbar3000" ref={containerRef}>
@@ -89,15 +86,7 @@ export function Navbar(): JSX.Element {
                             icon={<IconSearch />}
                             title="Search"
                             onClick={toggleSearchBar}
-                            sideIcon={
-                                !isUsingNewNav ? (
-                                    <span className="text-xs">
-                                        <KeyboardShortcut shift k />
-                                    </span>
-                                ) : (
-                                    <></>
-                                )
-                            }
+                            keyboardShortcut={{ command: true, k: true }}
                         />
                         <NavbarButton
                             icon={<ThemeIcon />}

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

@@ -10,106 +10,119 @@ import { sceneLogic } from 'scenes/sceneLogic'
 import { SidebarChangeNoticeContent, useSidebarChangeNotices } from '~/layout/navigation/SideBar/SidebarChangeNotice'
 
 import { navigation3000Logic } from '../navigationLogic'
+import { KeyboardShortcut, KeyboardShortcutProps } from './KeyboardShortcut'
 
 export interface NavbarButtonProps {
     identifier: string
     icon: ReactElement
-    sideIcon?: ReactElement
     title?: string
     shortTitle?: string
     tag?: 'alpha' | 'beta'
     onClick?: () => void
     to?: string
     persistentTooltip?: boolean
     active?: boolean
+    keyboardShortcut?: KeyboardShortcutProps
 }
 
 export const NavbarButton: FunctionComponent<NavbarButtonProps> = React.forwardRef<
     HTMLButtonElement,
     NavbarButtonProps
->(({ identifier, shortTitle, title, tag, onClick, persistentTooltip, ...buttonProps }, ref): JSX.Element => {
-    const { aliasedActiveScene } = useValues(sceneLogic)
-    const { isNavCollapsed } = useValues(navigation3000Logic)
-    const isUsingNewNav = useFeatureFlag('POSTHOG_3000_NAV')
+>(
+    (
+        { identifier, shortTitle, title, tag, onClick, persistentTooltip, keyboardShortcut, ...buttonProps },
+        ref
+    ): JSX.Element => {
+        const { aliasedActiveScene } = useValues(sceneLogic)
+        const { isNavCollapsed } = useValues(navigation3000Logic)
+        const isUsingNewNav = useFeatureFlag('POSTHOG_3000_NAV')
 
-    const [hasBeenClicked, setHasBeenClicked] = useState(false)
+        const [hasBeenClicked, setHasBeenClicked] = useState(false)
 
-    const here = aliasedActiveScene === identifier
-    const isNavCollapsedActually = isNavCollapsed || isUsingNewNav
+        const here = aliasedActiveScene === identifier
+        const isNavCollapsedActually = isNavCollapsed || isUsingNewNav
 
-    if (!isUsingNewNav) {
-        buttonProps.active = here
-    }
+        if (!isUsingNewNav) {
+            buttonProps.active = here
+        }
 
-    let content: JSX.Element | string | undefined
-    if (!isNavCollapsedActually) {
-        content = shortTitle || title
-        if (tag) {
-            if (tag === 'alpha') {
-                content = (
-                    <>
-                        <span className="grow">{content}</span>
-                        <LemonTag type="completion" size="small" className="ml-2">
-                            ALPHA
-                        </LemonTag>
-                    </>
-                )
-            } else if (tag === 'beta') {
-                content = (
-                    <>
-                        <span className="grow">{content}</span>
-                        <LemonTag type="warning" size="small" className="ml-2">
-                            BETA
-                        </LemonTag>
-                    </>
-                )
+        let content: JSX.Element | string | undefined
+        if (!isNavCollapsedActually) {
+            content = shortTitle || title
+            if (tag) {
+                if (tag === 'alpha') {
+                    content = (
+                        <>
+                            <span className="grow">{content}</span>
+                            <LemonTag type="completion" size="small" className="ml-2">
+                                ALPHA
+                            </LemonTag>
+                        </>
+                    )
+                } else if (tag === 'beta') {
+                    content = (
+                        <>
+                            <span className="grow">{content}</span>
+                            <LemonTag type="warning" size="small" className="ml-2">
+                                BETA
+                            </LemonTag>
+                        </>
+                    )
+                }
             }
         }
-    }
 
-    const buttonContent = (
-        <LemonButton
-            ref={ref}
-            data-attr={`menu-item-${identifier.toString().toLowerCase()}`}
-            onMouseEnter={() => setHasBeenClicked(false)}
-            onClick={() => {
-                setHasBeenClicked(true)
-                onClick?.()
-            }}
-            className={clsx('NavbarButton', isUsingNewNav && here && 'NavbarButton--here')}
-            fullWidth
-            type="secondary"
-            stealth={true}
-            {...buttonProps}
-        >
-            {content}
-        </LemonButton>
-    )
+        const buttonContent = (
+            <LemonButton
+                ref={ref}
+                data-attr={`menu-item-${identifier.toString().toLowerCase()}`}
+                onMouseEnter={() => setHasBeenClicked(false)}
+                onClick={() => {
+                    setHasBeenClicked(true)
+                    onClick?.()
+                }}
+                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}
+            </LemonButton>
+        )
 
-    const [notices, onAcknowledged] = useSidebarChangeNotices({ identifier })
+        const [notices, onAcknowledged] = useSidebarChangeNotices({ identifier })
 
-    return (
-        <li className="w-full">
-            {notices.length ? (
-                <Tooltip
-                    title={<SidebarChangeNoticeContent notices={notices} onAcknowledged={onAcknowledged} />}
-                    placement={notices[0].placement ?? 'right'}
-                    delayMs={0}
-                    visible={true}
-                >
-                    {buttonContent}
-                </Tooltip>
-            ) : (
-                <Tooltip
-                    title={isNavCollapsedActually ? (here ? `${title} (you are here)` : title) : null}
-                    placement="right"
-                    delayMs={0}
-                    visible={!persistentTooltip && hasBeenClicked ? false : undefined} // Force-hide tooltip after button click
-                >
-                    {buttonContent}
-                </Tooltip>
-            )}
-        </li>
-    )
-})
+        return (
+            <li className="w-full">
+                {notices.length ? (
+                    <Tooltip
+                        title={<SidebarChangeNoticeContent notices={notices} onAcknowledged={onAcknowledged} />}
+                        placement={notices[0].placement ?? 'right'}
+                        delayMs={0}
+                        visible={true}
+                    >
+                        {buttonContent}
+                    </Tooltip>
+                ) : (
+                    <Tooltip
+                        title={isNavCollapsedActually ? (here ? `${title} (you are here)` : title) : null}
+                        placement="right"
+                        delayMs={0}
+                        visible={!persistentTooltip && hasBeenClicked ? false : undefined} // Force-hide tooltip after button click
+                    >
+                        {buttonContent}
+                    </Tooltip>
+                )}
+            </li>
+        )
+    }
+)
 NavbarButton.displayName = 'NavbarButton'

frontend/src/lib/components/CompactList/CompactList.scss

@@ -1,7 +1,7 @@
 .compact-list {
     border-radius: var(--radius);
     border: 1px solid var(--border);
-    height: calc(19.5rem + 1px);
+    height: calc(19.25rem);
     background: var(--bg-light);
     box-sizing: content-box;
     display: flex;
@@ -22,23 +22,13 @@
         }
     }
 
-    .spacer-container {
-        padding: 0 1rem;
-    }
-
     .scrollable-list {
         flex: 1;
-        overflow: auto auto;
-        padding: 0 0.5rem 0.5rem;
+        overflow: auto;
+        padding: 0 0.5rem;
     }
 
     .LemonButton {
         font-family: var(--font-sans) !important;
     }
-
-    .secondary-text {
-        .posthog-3000 & {
-            color: var(--text-secondary);
-        }
-    }
 }

frontend/src/lib/components/CompactList/CompactList.tsx

@@ -29,7 +29,7 @@ export function CompactList({
                 <h3>{title}</h3>
                 {viewAllURL && <LemonButton to={viewAllURL}>View all</LemonButton>}
             </div>
-            <div className="spacer-container">
+            <div className="mx-2">
                 <LemonDivider />
             </div>
             <div className="scrollable-list">