chore(3000): Polish up support in the side panel (#18493)

* Tune height and text alignment of `LemonSegmentedButton`

* Always open the support form with a default support kind

* Rename "Support" to "Question" in the form

* Rename "Feedback" to "Support" outside the form

* Clean up panel header

* Use Central support icon

* Fix slider alignment in full-width mode

* Update UI snapshots for `chromium` (1)

* Update UI snapshots for `chromium` (2)

* Mark a transitioning LemonCollapse panel as busy

* Update UI snapshots for `chromium` (2)

* Fix `openSupportForm` typing

---------

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

frontend/src/layout/navigation-3000/sidepanel/SidePanel.tsx

@@ -6,7 +6,7 @@ import clsx from 'clsx'
 import { Resizer } from 'lib/components/Resizer/Resizer'
 import { useRef } from 'react'
 import { ResizerLogicProps, resizerLogic } from 'lib/components/Resizer/resizerLogic'
-import { IconNotebook, IconQuestion, IconInfo, IconGear } from '@posthog/icons'
+import { IconNotebook, IconInfo, IconSupport, IconGear } from '@posthog/icons'
 import { SidePanelDocs } from './panels/SidePanelDocs'
 import { SidePanelSupport } from './panels/SidePanelSupport'
 import { NotebookPanel } from 'scenes/notebooks/NotebookPanel/NotebookPanel'
@@ -21,9 +21,9 @@ export const SidePanelTabs: Record<SidePanelTab, { label: string; Icon: any; Con
         Icon: IconNotebook,
         Content: NotebookPanel,
     },
-    [SidePanelTab.Feedback]: {
-        label: 'Feedback',
-        Icon: IconQuestion,
+    [SidePanelTab.Support]: {
+        label: 'Support',
+        Icon: IconSupport,
         Content: SidePanelSupport,
     },
     [SidePanelTab.Docs]: {

frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelSupport.tsx

@@ -2,14 +2,15 @@ import { useActions, useValues } from 'kea'
 import { SupportForm, SupportFormButtons } from 'lib/components/Support/SupportForm'
 import { supportLogic } from 'lib/components/Support/supportLogic'
 import { useEffect } from 'react'
+import { LemonDivider } from '@posthog/lemon-ui'
 import { sidePanelStateLogic } from '../sidePanelStateLogic'
 import { SidePanelTab } from '~/types'
 
 export const SidePanelSupport = (): JSX.Element => {
     const { closeSidePanel } = useActions(sidePanelStateLogic)
     const { selectedTab } = useValues(sidePanelStateLogic)
 
-    const theLogic = supportLogic({ onClose: () => closeSidePanel(SidePanelTab.Feedback) })
+    const theLogic = supportLogic({ onClose: () => closeSidePanel(SidePanelTab.Support) })
     const { title } = useValues(theLogic)
     const { closeSupportForm } = useActions(theLogic)
 
@@ -19,11 +20,10 @@ export const SidePanelSupport = (): JSX.Element => {
 
     return (
         <div className="p-3 max-w-160 w-full mx-auto">
-            <h1>{title}</h1>
-
+            <h2 className="text-lg font-bold mb-2">{title}</h2>
+            <LemonDivider />
             <SupportForm />
-
-            <div className="flex items-center justify-end gap-2">
+            <div className="flex items-center justify-end gap-2 mt-4">
                 <SupportFormButtons onClose={() => closeSidePanel()} />
             </div>
         </div>

frontend/src/layout/navigation-3000/sidepanel/sidePanelLogic.tsx

@@ -32,7 +32,7 @@ export const sidePanelLogic = kea<sidePanelLogicType>([
                 }
 
                 if (isCloudOrDev) {
-                    tabs.push(SidePanelTab.Feedback)
+                    tabs.push(SidePanelTab.Support)
                 }
 
                 if (featureFlags[FEATURE_FLAGS.SIDE_PANEL_DOCS]) {

frontend/src/lib/components/Support/SupportForm.tsx

@@ -2,31 +2,37 @@ import { useActions, useValues } from 'kea'
 import { SupportTicketKind, TARGET_AREA_TO_NAME, supportLogic } from './supportLogic'
 import { Form } from 'kea-forms'
 import { LemonTextArea } from 'lib/lemon-ui/LemonTextArea/LemonTextArea'
-import { LemonSelect, LemonSelectOptions } from 'lib/lemon-ui/LemonSelect/LemonSelect'
+import { LemonSelect } from 'lib/lemon-ui/LemonSelect/LemonSelect'
 import { Field } from 'lib/forms/Field'
-import { IconBugReport, IconFeedback, IconSupport } from 'lib/lemon-ui/icons'
+import { IconBugReport, IconFeedback, IconHelpOutline } from 'lib/lemon-ui/icons'
 import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
 import { LemonFileInput } from 'lib/lemon-ui/LemonFileInput/LemonFileInput'
 import { useRef } from 'react'
-import { LemonButton, LemonInput, lemonToast } from '@posthog/lemon-ui'
+import {
+    LemonButton,
+    LemonInput,
+    LemonSegmentedButton,
+    LemonSegmentedButtonOption,
+    lemonToast,
+} from '@posthog/lemon-ui'
 import { useUploadFiles } from 'lib/hooks/useUploadFiles'
 import { userLogic } from 'scenes/userLogic'
 
-const SUPPORT_TICKET_OPTIONS: LemonSelectOptions<SupportTicketKind> = [
+const SUPPORT_TICKET_OPTIONS: LemonSegmentedButtonOption<SupportTicketKind>[] = [
     {
-        value: 'bug',
-        label: 'Bug',
-        icon: <IconBugReport />,
+        value: 'support',
+        label: 'Question',
+        icon: <IconHelpOutline />,
     },
     {
         value: 'feedback',
         label: 'Feedback',
         icon: <IconFeedback />,
     },
     {
-        value: 'support',
-        label: 'Support',
-        icon: <IconSupport />,
+        value: 'bug',
+        label: 'Bug',
+        icon: <IconBugReport />,
     },
 ]
 
@@ -73,7 +79,7 @@ export function SupportForm({ loggedIn = true }: { loggedIn?: boolean }): JSX.El
                 </>
             )}
             <Field name="kind" label="What type of message is this?">
-                <LemonSelect fullWidth options={SUPPORT_TICKET_OPTIONS} />
+                <LemonSegmentedButton fullWidth options={SUPPORT_TICKET_OPTIONS} />
             </Field>
             <Field name="target_area" label="What area does this best relate to?">
                 <LemonSelect

frontend/src/lib/components/Support/supportLogic.ts

@@ -43,9 +43,9 @@ function getSentryLink(user: UserType | null, cloudRegion: Region | null | undef
 }
 
 const SUPPORT_TICKET_KIND_TO_TITLE: Record<SupportTicketKind, string> = {
-    bug: 'Report a bug',
+    support: 'Ask a question',
     feedback: 'Give feedback',
-    support: 'Get support',
+    bug: 'Report a bug',
 }
 
 export const TARGET_AREA_TO_NAME = {
@@ -115,10 +115,7 @@ export const supportLogic = kea<supportLogicType>([
     })),
     actions(() => ({
         closeSupportForm: () => true,
-        openSupportForm: (
-            kind: SupportTicketKind | null = null,
-            target_area: SupportTicketTargetArea | null = null
-        ) => ({
+        openSupportForm: (kind: SupportTicketKind = 'support', target_area: SupportTicketTargetArea | null = null) => ({
             kind,
             target_area,
         }),
@@ -154,10 +151,10 @@ export const supportLogic = kea<supportLogicType>([
     })),
     forms(({ actions }) => ({
         sendSupportRequest: {
-            defaults: {} as unknown as {
-                kind: SupportTicketKind | null
-                target_area: SupportTicketTargetArea | null
-                message: string
+            defaults: {
+                kind: 'support' as SupportTicketKind,
+                target_area: null as SupportTicketTargetArea | null,
+                message: '',
             },
             errors: ({ message, kind, target_area }) => {
                 return {
@@ -215,7 +212,7 @@ export const supportLogic = kea<supportLogicType>([
                 message: '',
             })
 
-            actions.openSidePanel(SidePanelTab.Feedback)
+            actions.openSidePanel(SidePanelTab.Support)
         },
         openSupportLoggedOutForm: async ({ name, email, kind, target_area }) => {
             actions.resetSendSupportLoggedOutRequest({

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

@@ -1,4 +1,5 @@
 .LemonButton {
+    --lemon-button-height: 2.5rem;
     position: relative;
     transition: background-color 200ms ease, color 200ms ease, border 200ms ease, opacity 200ms ease,
         transform 100ms ease;
@@ -7,7 +8,7 @@
     flex-shrink: 0;
     align-items: center;
     justify-content: flex-start;
-    min-height: 2.5rem;
+    min-height: var(--lemon-button-height);
     padding: 0.25rem 0.75rem;
     gap: 0.5rem;
     background: none;
@@ -69,7 +70,7 @@
     }
 
     &.LemonButton--xsmall {
-        min-height: 1.5rem;
+        --lemon-button-height: 1.5rem;
         padding: 0.125rem 0.375rem;
         gap: 0.25rem;
         font-size: 0.75rem;
@@ -90,7 +91,7 @@
     }
 
     &.LemonButton--small {
-        min-height: 2rem;
+        --lemon-button-height: 2rem;
         padding: 0.125rem 0.5rem;
         gap: 0.25rem;
 
@@ -110,7 +111,7 @@
     }
 
     &.LemonButton--large {
-        min-height: 3.5rem;
+        --lemon-button-height: 3.5rem;
         padding: 0.5rem 1rem;
         gap: 0.75rem;
         font-size: 1rem;

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

@@ -112,6 +112,7 @@ function LemonCollapsePanel({ header, content, isExpanded, onChange }: LemonColl
                                   }
                                 : undefined
                         }
+                        aria-busy={status.endsWith('ing')}
                     >
                         <div className="LemonCollapsePanel__content" ref={contentRef}>
                             {content}

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

@@ -47,6 +47,7 @@
             outline 200ms ease;
         outline: 1px solid transparent;
         border-radius: 0;
+        min-height: calc(var(--lemon-button-height) - 2px);
     }
     &:first-child,
     &:first-child .LemonButton {

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

@@ -89,6 +89,7 @@ export function LemonSegmentedButton<T extends React.Key>({
                             }}
                             icon={option.icon}
                             data-attr={option['data-attr']}
+                            center
                         >
                             {option.label}
                         </LemonButton>

frontend/src/lib/lemon-ui/hooks.ts

@@ -35,7 +35,7 @@ export function useSliderPositioning<C extends HTMLElement, S extends HTMLElemen
                 hasRenderedInitiallyRef.current = true
             }
         }
-    }, [currentValue, containerWidth])
+    }, [currentValue, containerWidth, transitioning]) // FIXME: transitioning is only needed here to trigger a re-render
 
     return {
         containerRef,

frontend/src/scenes/billing/BillingGauge.tsx

@@ -14,7 +14,6 @@ type BillingGaugeItemProps = {
 
 const BillingGaugeItem = ({ width, className, tooltip, top, value }: BillingGaugeItemProps): JSX.Element => {
     return (
-        // eslint-disable-next-line react/forbid-dom-props
         <div
             className={`BillingGaugeItem absolute top-0 left-0 bottom-0 h-2 ${className}`}
             style={{ '--billing-gauge-item-width': width } as React.CSSProperties}

frontend/src/types.ts

@@ -3357,7 +3357,7 @@ export type SDKInstructionsMap = Partial<Record<SDKKey, React.ReactNode>>
 
 export enum SidePanelTab {
     Notebooks = 'notebook',
-    Feedback = 'feedback',
+    Support = 'support',
     Docs = 'docs',
     Activation = 'activation',
     Settings = 'settings',

package.json

@@ -74,7 +74,7 @@
         "@medv/finder": "^2.1.0",
         "@microlink/react-json-view": "^1.21.3",
         "@monaco-editor/react": "4.4.6",
-        "@posthog/icons": "^0.1.31",
+        "@posthog/icons": "0.2.0",
         "@posthog/plugin-scaffold": "^1.4.4",
         "@react-hook/size": "^2.1.2",
         "@rrweb/types": "^2.0.0-alpha.11",