#4050 query revamp - Final Touches (#4314)

PostHog · May 12, 2021 · 9ddf910 · 9ddf910
1 parent ebddd25
commit 9ddf910
Show file tree

Hide file tree

Showing 17 changed files with 213 additions and 83 deletions.
diff --git a/frontend/src/lib/constants.tsx b/frontend/src/lib/constants.tsx
@@ -232,4 +232,5 @@ export const WEBHOOK_SERVICES: Record<string, string> = {
 export const FEATURE_FLAGS: Record<string, string> = {
     INGESTION_GRID: 'ingestion-grid-exp-3',
     PROJECT_HOME: 'project-home-exp-5',
+    QUERY_UX_V2: '4050-query-ui-optB',
 }
diff --git a/frontend/src/scenes/dashboard/DashboardItem.tsx b/frontend/src/scenes/dashboard/DashboardItem.tsx
@@ -128,12 +128,8 @@ export const displayMap: Record<DisplayedType, DisplayProps> = {
         link: ({ id, dashboard, name, filters }: DashboardItemType): string => {
             return combineUrl(
                 `/insights`,
-                {
-                    insight: ViewType.FUNNELS,
-                    fromDashboardItem: { id: id, name: name, dashboard: dashboard },
-                    ...filters,
-                },
-                {}
+                { insight: ViewType.FUNNELS, ...filters },
+                { fromItem: id, fromItemName: name, fromDashboard: dashboard }
             ).url
         },
     },

diff --git a/frontend/src/scenes/insights/ActionFilter/ActionFilter.scss b/frontend/src/scenes/insights/ActionFilter/ActionFilter.scss
@@ -17,3 +17,12 @@
         margin-top: 0;
     }
 }
+
+.add-action-event-button {
+    &.new-ui {
+        border-color: $border_dark;
+        color: $primary;
+        padding-left: $default_spacing * 2.5;
+        padding-right: $default_spacing * 2.5;
+    }
+}
diff --git a/frontend/src/scenes/insights/ActionFilter/ActionFilter.tsx b/frontend/src/scenes/insights/ActionFilter/ActionFilter.tsx
@@ -9,6 +9,8 @@ import { alphabet } from 'lib/utils'
 import posthog from 'posthog-js'
 import { ActionFilter as ActionFilterType, FilterType, Optional } from '~/types'
 import { SortableContainer, SortableActionFilterRow } from './Sortable'
+import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
+import { FEATURE_FLAGS } from 'lib/constants'
 
 export interface ActionFilterProps {
     setFilters: (filters: FilterType) => void
@@ -41,6 +43,8 @@ export function ActionFilter({
 }: ActionFilterProps): JSX.Element {
     const logic = entityFilterLogic({ setFilters, filters, typeKey })
 
+    const { featureFlags } = useValues(featureFlagLogic)
+
     const { localFilters } = useValues(logic)
     const { addFilter, setLocalFilters } = useActions(logic)
 
@@ -101,12 +105,13 @@ export function ActionFilter({
             {!singleFilter && (
                 <div className="mt">
                     <Button
-                        type="primary"
+                        type={featureFlags[FEATURE_FLAGS.QUERY_UX_V2] ? 'dashed' : 'primary'}
                         onClick={() => addFilter()}
                         style={{ marginTop: '0.5rem' }}
                         data-attr="add-action-event-button"
                         icon={<PlusCircleOutlined />}
                         disabled={disabled}
+                        className={`add-action-event-button${featureFlags[FEATURE_FLAGS.QUERY_UX_V2] ? ' new-ui' : ''}`}
                     >
                         {buttonCopy || 'Action or event'}
                     </Button>

diff --git a/frontend/src/scenes/insights/InsightTabs/FunnelTab/FunnelTab.tsx b/frontend/src/scenes/insights/InsightTabs/FunnelTab/FunnelTab.tsx
@@ -11,8 +11,14 @@ import { useState } from 'react'
 import { SaveModal } from '../../SaveModal'
 import { funnelCommandLogic } from './funnelCommandLogic'
 import { TestAccountFilter } from 'scenes/insights/TestAccountFilter'
+import { BaseTabProps } from 'scenes/insights/Insights'
+import { InsightTitle } from '../InsightTitle'
 
-export function FunnelTab(): JSX.Element {
+interface FunnelTabProps extends BaseTabProps {
+    newUI: boolean
+}
+
+export function FunnelTab({ annotationsToCreate, newUI }: FunnelTabProps): JSX.Element {
     useMountedLogic(funnelCommandLogic)
     const { isStepsEmpty, filters, stepsWithCount } = useValues(funnelLogic())
     const { loadResults, clearFunnel, setFilters, saveFunnelInsight } = useActions(funnelLogic())
@@ -28,6 +34,11 @@ export function FunnelTab(): JSX.Element {
 
     return (
         <div data-attr="funnel-tab">
+            {newUI && (
+                <Row>
+                    <InsightTitle annotations={annotationsToCreate} filters={filters} />
+                </Row>
+            )}
             <form
                 onSubmit={(e): void => {
                     e.preventDefault()

diff --git a/frontend/src/scenes/insights/InsightTabs/InsightTitle.tsx b/frontend/src/scenes/insights/InsightTabs/InsightTitle.tsx
@@ -0,0 +1,37 @@
+import { Button } from 'antd'
+import { SaveToDashboard } from 'lib/components/SaveToDashboard/SaveToDashboard'
+import React, { useState } from 'react'
+import { SaveOutlined, DashboardOutlined } from '@ant-design/icons'
+import { FilterType } from '~/types'
+import { router } from 'kea-router'
+
+export interface InsightTitleProps {
+    filters: FilterType
+    annotations: any[] // TODO: Type properly
+}
+
+export function InsightTitle({ annotations, filters }: InsightTitleProps): JSX.Element {
+    const [{ fromItemName, fromDashboard }] = useState(router.values.hashParams)
+    return (
+        <>
+            <h3 className="l3" style={{ display: 'flex', alignItems: 'center' }}>
+                {fromDashboard && (
+                    <DashboardOutlined
+                        style={{ color: 'var(--warning)', marginRight: 4 }}
+                        title="Insight saved on dashboard"
+                    />
+                )}
+                {fromItemName || 'Unsaved query'}{' '}
+                <SaveToDashboard
+                    displayComponent={<Button type="link" size="small" icon={<SaveOutlined />} />}
+                    item={{
+                        entity: {
+                            filters,
+                            annotations,
+                        },
+                    }}
+                />
+            </h3>
+        </>
+    )
+}
diff --git a/frontend/src/scenes/insights/InsightTabs/PathTab.tsx b/frontend/src/scenes/insights/InsightTabs/PathTab.tsx
@@ -15,10 +15,12 @@ import { TestAccountFilter } from '../TestAccountFilter'
 import { eventDefinitionsLogic } from 'scenes/events/eventDefinitionsLogic'
 import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
 import { PathTabHorizontal } from './PathTabHorizontal'
+import { FEATURE_FLAGS } from 'lib/constants'
+import { BaseTabProps } from '../Insights'
 
-export function PathTab(): JSX.Element {
+export function PathTab(props: BaseTabProps): JSX.Element {
     const { featureFlags } = useValues(featureFlagLogic)
-    return featureFlags['4050-query-ui-optB'] ? <PathTabHorizontal /> : <DefaultPathTab />
+    return featureFlags[FEATURE_FLAGS.QUERY_UX_V2] ? <PathTabHorizontal {...props} /> : <DefaultPathTab />
 }
 
 function DefaultPathTab(): JSX.Element {

diff --git a/frontend/src/scenes/insights/InsightTabs/PathTabHorizontal.tsx b/frontend/src/scenes/insights/InsightTabs/PathTabHorizontal.tsx
@@ -14,8 +14,10 @@ import { PropertyValue } from 'lib/components/PropertyFilters'
 import { TestAccountFilter } from '../TestAccountFilter'
 import { eventDefinitionsLogic } from 'scenes/events/eventDefinitionsLogic'
 import useBreakpoint from 'antd/lib/grid/hooks/useBreakpoint'
+import { BaseTabProps } from '../Insights'
+import { InsightTitle } from './InsightTitle'
 
-export function PathTabHorizontal(): JSX.Element {
+export function PathTabHorizontal({ annotationsToCreate }: BaseTabProps): JSX.Element {
     const { customEventNames } = useValues(eventDefinitionsLogic)
     const { filter, filtersLoading } = useValues(pathsLogic({ dashboardItemId: null }))
     const { setFilter } = useActions(pathsLogic({ dashboardItemId: null }))
@@ -26,6 +28,9 @@ export function PathTabHorizontal(): JSX.Element {
     return (
         <Row gutter={16}>
             <Col md={16} xs={24}>
+                <Row>
+                    <InsightTitle annotations={annotationsToCreate} filters={filter} />
+                </Row>
                 <Row gutter={8} align="middle" className="mt">
                     <Col>Showing paths from</Col>
                     <Col>

diff --git a/frontend/src/scenes/insights/InsightTabs/RetentionTab.scss b/frontend/src/scenes/insights/InsightTabs/RetentionTab.scss
@@ -1,13 +1,16 @@
 @import '~/vars';
 
 .retention-tab {
-    .ant-btn {
+    .btn-retention-dropdown {
         display: flex;
     }
 
-    .svg-fix {
+    .dropdown-indicator {
         color: $text_muted;
         padding-left: 4px;
+        margin-top: 2px;
+        color: #bdbdbd;
+        margin-right: -6px;
         svg {
             height: 10px;
             width: 10px;

diff --git a/frontend/src/scenes/insights/InsightTabs/RetentionTab.tsx b/frontend/src/scenes/insights/InsightTabs/RetentionTab.tsx
@@ -23,12 +23,14 @@ import { PropertyKeyInfo } from 'lib/components/PropertyKeyInfo'
 import './RetentionTab.scss'
 import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
 import { RetentionTabHorizontal } from './RetentionTabHorizontal'
+import { FEATURE_FLAGS } from 'lib/constants'
+import { BaseTabProps } from '../Insights'
 
 const DatePicker = generatePicker<dayjs.Dayjs>(dayjsGenerateConfig)
 
-export function RetentionTab(): JSX.Element {
+export function RetentionTab(props: BaseTabProps): JSX.Element {
     const { featureFlags } = useValues(featureFlagLogic)
-    return featureFlags['4050-query-ui-optB'] ? <RetentionTabHorizontal /> : <DefaultRetentionTab />
+    return featureFlags[FEATURE_FLAGS.QUERY_UX_V2] ? <RetentionTabHorizontal {...props} /> : <DefaultRetentionTab />
 }
 
 function DefaultRetentionTab(): JSX.Element {
@@ -99,9 +101,10 @@ function DefaultRetentionTab(): JSX.Element {
                     data-attr="retention-action"
                     onClick={(): void => setOpen(!open)}
                     style={{ marginRight: 8, marginBottom: 8 }}
+                    className="btn-retention-dropdown"
                 >
                     <PropertyKeyInfo value={selectedCohortizingEvent} />
-                    <DownOutlined className="text-muted svg-fix" style={{ marginRight: '-6px' }} />
+                    <DownOutlined className="dropdown-indicator" />
                 </Button>
                 <Select
                     value={retentionOptions[filters.retention_type]}
@@ -139,9 +142,10 @@ function DefaultRetentionTab(): JSX.Element {
                 ref={returningNode}
                 data-attr="retention-returning-action"
                 onClick={(): void => setReturningOpen(!returningOpen)}
+                className="btn-retention-dropdown"
             >
                 <PropertyKeyInfo value={selectedRetainingEvent} />
-                <DownOutlined className="text-muted svg-fix" style={{ marginRight: '-6px' }} />
+                <DownOutlined className="dropdown-indicator" />
             </Button>
             <ActionFilterDropdown
                 open={returningOpen}

diff --git a/frontend/src/scenes/insights/InsightTabs/RetentionTabHorizontal.tsx b/frontend/src/scenes/insights/InsightTabs/RetentionTabHorizontal.tsx
@@ -15,8 +15,10 @@ import './RetentionTab.scss'
 import { RETENTION_FIRST_TIME, RETENTION_RECURRING } from 'lib/constants'
 import useBreakpoint from 'antd/lib/grid/hooks/useBreakpoint'
 import { IconExternalLink } from 'lib/components/icons'
+import { BaseTabProps } from '../Insights'
+import { InsightTitle } from './InsightTitle'
 
-export function RetentionTabHorizontal(): JSX.Element {
+export function RetentionTabHorizontal({ annotationsToCreate }: BaseTabProps): JSX.Element {
     const node = useRef<HTMLElement>(null)
     const returningNode = useRef<HTMLElement>(null)
     const [open, setOpen] = useState<boolean>(false)
@@ -79,17 +81,22 @@ export function RetentionTabHorizontal(): JSX.Element {
         <div data-attr="retention-tab" className="retention-tab">
             <Row gutter={16}>
                 <Col md={16} xs={24}>
-                    <Row gutter={8} align="middle" className="mt">
+                    <Row>
+                        <InsightTitle annotations={annotationsToCreate} filters={filters} />
+                    </Row>
+                    <Row gutter={8} align="middle">
                         <Col>
                             Showing <b>Unique users</b> who did
                         </Col>
                         <Col>
-                            <Button ref={node} data-attr="retention-action" onClick={() => setOpen(!open)}>
+                            <Button
+                                className="btn-retention-dropdown"
+                                ref={node}
+                                data-attr="retention-action"
+                                onClick={() => setOpen(!open)}
+                            >
                                 <PropertyKeyInfo value={selectedCohortizingEvent} disablePopover />
-                                <DownOutlined
-                                    className="svg-fix"
-                                    style={{ marginRight: '-6px', marginTop: 2, color: '#bdbdbd', fontSize: '1.3em' }}
-                                />
+                                <DownOutlined className="dropdown-indicator" />
                             </Button>
                             <ActionFilterDropdown
                                 open={open}
@@ -138,12 +145,10 @@ export function RetentionTabHorizontal(): JSX.Element {
                                 ref={returningNode}
                                 data-attr="retention-returning-action"
                                 onClick={(): void => setReturningOpen(!returningOpen)}
+                                className="btn-retention-dropdown"
                             >
                                 <PropertyKeyInfo value={selectedRetainingEvent} disablePopover />
-                                <DownOutlined
-                                    className="svg-fix"
-                                    style={{ marginRight: '-6px', marginTop: 2, color: '#bdbdbd', fontSize: '1.3em' }}
-                                />
+                                <DownOutlined className="dropdown-indicator" />
                             </Button>
                             <ActionFilterDropdown
                                 open={returningOpen}

diff --git a/frontend/src/scenes/insights/InsightTabs/SessionTab.tsx b/frontend/src/scenes/insights/InsightTabs/SessionTab.tsx
@@ -11,10 +11,12 @@ import { InfoCircleOutlined } from '@ant-design/icons'
 import { TestAccountFilter } from '../TestAccountFilter'
 import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
 import { SessionTabHorizontal } from './SessionTabHorizontal'
+import { FEATURE_FLAGS } from 'lib/constants'
+import { BaseTabProps } from '../Insights'
 
-export function SessionTab(): JSX.Element {
+export function SessionTab(props: BaseTabProps): JSX.Element {
     const { featureFlags } = useValues(featureFlagLogic)
-    return featureFlags['4050-query-ui-optB'] ? <SessionTabHorizontal /> : <DefaultSessionTab />
+    return featureFlags[FEATURE_FLAGS.QUERY_UX_V2] ? <SessionTabHorizontal {...props} /> : <DefaultSessionTab />
 }
 
 function DefaultSessionTab(): JSX.Element {

diff --git a/frontend/src/scenes/insights/InsightTabs/SessionTabHorizontal.tsx b/frontend/src/scenes/insights/InsightTabs/SessionTabHorizontal.tsx
@@ -9,8 +9,10 @@ import { FilterType } from '~/types'
 import { Col, Row, Skeleton } from 'antd'
 import { TestAccountFilter } from '../TestAccountFilter'
 import useBreakpoint from 'antd/lib/grid/hooks/useBreakpoint'
+import { BaseTabProps } from '../Insights'
+import { InsightTitle } from './InsightTitle'
 
-export function SessionTabHorizontal(): JSX.Element {
+export function SessionTabHorizontal({ annotationsToCreate }: BaseTabProps): JSX.Element {
     const { filters, filtersLoading } = useValues(trendsLogic({ dashboardItemId: null, view: ViewType.SESSIONS }))
     const { setFilters } = useActions(trendsLogic({ dashboardItemId: null, view: ViewType.SESSIONS }))
 
@@ -20,7 +22,10 @@ export function SessionTabHorizontal(): JSX.Element {
     return (
         <Row gutter={16}>
             <Col md={16} xs={24}>
-                <Row gutter={8} align="middle" className="mt mb">
+                <Row>
+                    <InsightTitle annotations={annotationsToCreate} filters={filters} />
+                </Row>
+                <Row gutter={8} align="middle" className="mb">
                     <Col>Showing</Col>
                     <Col>
                         <SessionFilter value={filters.session} onChange={(v: string) => setFilters({ session: v })} />

diff --git a/frontend/src/scenes/insights/InsightTabs/TrendTab/Formula.tsx b/frontend/src/scenes/insights/InsightTabs/TrendTab/Formula.tsx
@@ -6,10 +6,14 @@ export function Formula({
     filters,
     onChange,
     onFocus,
+    autoFocus,
+    allowClear = true,
 }: {
     filters: Partial<FilterType>
     onChange: (formula: string) => void
-    onFocus: (hasFocus: boolean, localFormula: string) => void
+    onFocus?: (hasFocus: boolean, localFormula: string) => void
+    autoFocus?: boolean
+    allowClear?: boolean
 }): JSX.Element {
     const [value, setValue] = useState(filters.formula)
     useEffect(() => {
@@ -19,7 +23,8 @@ export function Formula({
         <div style={{ maxWidth: 300 }}>
             <Input.Search
                 placeholder="e.g. (A + B)/(A - B) * 100"
-                allowClear
+                allowClear={allowClear}
+                autoFocus={autoFocus}
                 value={value}
                 onChange={(e) => {
                     let value = e.target.value.toLocaleUpperCase()
@@ -30,8 +35,8 @@ export function Formula({
                         .join('')
                     setValue(value)
                 }}
-                onFocus={() => onFocus(true, value)}
-                onBlur={() => !filters.formula && onFocus(false, value)}
+                onFocus={() => onFocus && onFocus(true, value)}
+                onBlur={() => !filters.formula && onFocus && onFocus(false, value)}
                 enterButton="Apply"
                 onSearch={onChange}
             />

diff --git a/frontend/src/scenes/insights/InsightTabs/TrendTab/TrendTab.tsx b/frontend/src/scenes/insights/InsightTabs/TrendTab/TrendTab.tsx
@@ -15,15 +15,16 @@ import { TestAccountFilter } from 'scenes/insights/TestAccountFilter'
 import { preflightLogic } from 'scenes/PreflightCheck/logic'
 import './TrendTab.scss'
 import { TrendTabHorizontal } from './TrendTabHorizontal'
+import { FEATURE_FLAGS } from 'lib/constants'
+import { BaseTabProps } from 'scenes/insights/Insights'
 
-export interface TrendTabProps {
+export interface TrendTabProps extends BaseTabProps {
     view: string
-    annotationsToCreate: any[] // TODO: Type properly
 }
 
 export function TrendTab(props: TrendTabProps): JSX.Element {
     const { featureFlags } = useValues(featureFlagLogic)
-    return featureFlags['4050-query-ui-optB'] ? <TrendTabHorizontal {...props} /> : <DefaultTrendTab {...props} />
+    return featureFlags[FEATURE_FLAGS.QUERY_UX_V2] ? <TrendTabHorizontal {...props} /> : <DefaultTrendTab {...props} />
 }
 
 function DefaultTrendTab({ view }: TrendTabProps): JSX.Element {