add sessions link to insight (#4038)

frontend/src/scenes/sessions/filters/EditFiltersPanel.tsx

@@ -3,7 +3,7 @@ import { Button, Card, Divider, Space } from 'antd'
 import { useActions, useValues } from 'kea'
 import { DownOutlined, SaveOutlined, SearchOutlined } from '@ant-design/icons'
 import { CloseButton } from 'lib/components/CloseButton'
-import { EventTypePropertyFilter, PersonPropertyFilter, RecordingPropertyFilter } from '~/types'
+import { Entity, EventTypePropertyFilter, PersonPropertyFilter, PropertyFilter, RecordingPropertyFilter } from '~/types'
 import { sessionsFiltersLogic } from 'scenes/sessions/filters/sessionsFiltersLogic'
 import { EventPropertyFilter } from 'scenes/sessions/filters/EventPropertyFilter'
 import { PersonFilter } from 'scenes/sessions/filters/UserFilter'
@@ -11,6 +11,10 @@ import { DurationFilter } from 'scenes/sessions/filters/DurationFilter'
 import { SessionsFilterBox } from 'scenes/sessions/filters/SessionsFilterBox'
 import { AddFilterButton } from 'scenes/sessions/filters/AddFilterButton'
 import { sessionsTableLogic } from 'scenes/sessions/sessionsTableLogic'
+import { LinkButton } from 'lib/components/LinkButton'
+import { ACTION_TYPE, EVENT_TYPE } from 'lib/constants'
+import { ViewType } from 'scenes/insights/insightLogic'
+import { toParams } from 'lib/utils'
 
 interface Props {
     onSubmit: () => void
@@ -73,6 +77,79 @@ export function EditFiltersPanel({ onSubmit }: Props): JSX.Element | null {
             AND
         </span>
     )
+    const properties: PropertyFilter[] = []
+    const events: Entity[] = []
+    const actions: Entity[] = []
+
+    Object.entries(displayedFilters).forEach(([key, values]) => {
+        if (key === ACTION_TYPE) {
+            values.forEach((filter) => {
+                if (
+                    filter.item.label &&
+                    (typeof filter.item.value === 'string' || typeof filter.item.value === 'number')
+                ) {
+                    actions.push({
+                        id: filter.item.value,
+                        name: filter.item.label,
+                        type: 'actions',
+                        order: 0,
+                    })
+                }
+            })
+        }
+        if (key === EVENT_TYPE) {
+            values.forEach((filter) => {
+                if (
+                    filter.item.label &&
+                    (typeof filter.item.value === 'string' || typeof filter.item.value === 'number')
+                ) {
+                    events.push({
+                        id: filter.item.value,
+                        name: filter.item.label,
+                        type: 'events',
+                        order: 0,
+                    })
+                }
+            })
+        }
+        if (key === 'cohort') {
+            values.forEach((filter) => {
+                if (filter.item.value) {
+                    properties.push({
+                        key: 'id',
+                        value: filter.item.value,
+                        type: 'cohort',
+                        operator: 'exact',
+                    })
+                }
+            })
+        }
+        if (key === 'person') {
+            values.forEach((filter) => {
+                if (filter.item.value) {
+                    properties.push({
+                        key: filter.item.key,
+                        value: filter.item.value,
+                        type: 'person',
+                        operator: (filter.item as PersonPropertyFilter).operator,
+                    })
+                }
+            })
+        }
+    })
+
+    const params = {
+        insight: ViewType.TRENDS,
+        interval: 'day',
+        display: 'ActionsLineGraph',
+        events,
+        actions,
+        properties,
+    }
+    const encodedParams = toParams(params)
+    const insightLink = `/insights?${encodedParams}#backTo=Sessions&backToURL=${
+        window.location.pathname + window.location.search
+    }`
 
     return (
         <Card>
@@ -126,18 +203,25 @@ export function EditFiltersPanel({ onSubmit }: Props): JSX.Element | null {
                 </div>
             ))}
 
-            <Space style={{ display: 'flex', justifyContent: 'flex-end' }}>
-                {filtersDirty && <div className="text-warning">There are unapplied filters.</div>}
-                <Button disabled={!!activeFilter} onClick={() => openEditFilter({ id: null })}>
-                    <span>
-                        <SaveOutlined /> Save filter
-                    </span>
-                </Button>
-                <Button type="primary" onClick={onSubmit} data-attr="sessions-apply-filters">
-                    <span>
-                        <SearchOutlined /> Apply filters
-                    </span>
-                </Button>
+            <Space style={{ display: 'flex', justifyContent: 'space-between' }}>
+                <Space>
+                    <LinkButton to={insightLink}>
+                        <span>View Insights</span>
+                    </LinkButton>
+                </Space>
+                <Space>
+                    {filtersDirty && <div className="text-warning">There are unapplied filters.</div>}
+                    <Button disabled={!!activeFilter} onClick={() => openEditFilter({ id: null })}>
+                        <span>
+                            <SaveOutlined /> Save filter
+                        </span>
+                    </Button>
+                    <Button type="primary" onClick={onSubmit} data-attr="sessions-apply-filters">
+                        <span>
+                            <SearchOutlined /> Apply filters
+                        </span>
+                    </Button>
+                </Space>
             </Space>
         </Card>
     )

frontend/src/types.ts

@@ -192,7 +192,7 @@ export interface PropertyFilter {
     key: string
     operator: string | null
     type: string
-    value: string | number
+    value: string | number | (string | number)[]
 }
 
 interface BasePropertyFilter {