diff --git a/frontend/src/scenes/scenes.ts b/frontend/src/scenes/scenes.ts
index 356d9a9a06cc6..ca37ff7676737 100644
--- a/frontend/src/scenes/scenes.ts
+++ b/frontend/src/scenes/scenes.ts
@@ -481,5 +481,4 @@ export const routes: Record = {
[urls.feedback()]: Scene.Feedback,
[urls.feedback() + '/*']: Scene.Feedback,
[urls.notebook(':shortId')]: Scene.Notebook,
- [urls.notebookEdit(':shortId')]: Scene.Notebook,
}
diff --git a/frontend/src/scenes/session-recordings/SessionsRecordings.stories.tsx b/frontend/src/scenes/session-recordings/SessionsRecordings-player-success.stories.tsx
similarity index 93%
rename from frontend/src/scenes/session-recordings/SessionsRecordings.stories.tsx
rename to frontend/src/scenes/session-recordings/SessionsRecordings-player-success.stories.tsx
index 1ac9395728811..1060246c67d27 100644
--- a/frontend/src/scenes/session-recordings/SessionsRecordings.stories.tsx
+++ b/frontend/src/scenes/session-recordings/SessionsRecordings-player-success.stories.tsx
@@ -9,7 +9,6 @@ import recordingSnapshotsJson from 'scenes/session-recordings/__mocks__/recordin
import recordingMetaJson from 'scenes/session-recordings/__mocks__/recording_meta.json'
import recordingEventsJson from 'scenes/session-recordings/__mocks__/recording_events_query'
import recording_playlists from './__mocks__/recording_playlists.json'
-import { ReplayTabs } from '~/types'
const meta: Meta = {
title: 'Scenes-App/Recordings',
@@ -17,6 +16,7 @@ const meta: Meta = {
layout: 'fullscreen',
viewMode: 'story',
mockDate: '2023-02-01',
+ waitForSelector: '.PlayerFrame__content .replayer-wrapper iframe',
},
decorators: [
mswDecorator({
@@ -81,7 +81,7 @@ const meta: Meta = {
},
]
},
- '/api/projects/:team_id/session_recording_playlists/:playlist_id/recordings?limit=100': (req) => {
+ '/api/projects/:team_id/session_recording_playlists/:playlist_id/recordings': (req) => {
const playlistId = req.params.playlist_id
const response = playlistId === '1234567' ? recordings : []
return [200, { has_next: false, results: response, version: 1 }]
@@ -89,6 +89,12 @@ const meta: Meta = {
// without the session-recording-blob-replay feature flag, we only load via ClickHouse
'/api/projects/:team/session_recordings/:id/snapshots': recordingSnapshotsJson,
'/api/projects/:team/session_recordings/:id': recordingMetaJson,
+ 'api/projects/:team/notebooks': {
+ count: 0,
+ next: null,
+ previous: null,
+ results: [],
+ },
},
post: {
'/api/projects/:team/query': recordingEventsJson,
@@ -97,16 +103,10 @@ const meta: Meta = {
],
}
export default meta
-export function RecordingsList(): JSX.Element {
- useEffect(() => {
- router.actions.push(urls.replay())
- }, [])
- return
-}
-export function RecordingsPlayLists(): JSX.Element {
+export function RecentRecordings(): JSX.Element {
useEffect(() => {
- router.actions.push(urls.replay(ReplayTabs.Playlists))
+ router.actions.push(urls.replay())
}, [])
return
}
diff --git a/frontend/src/scenes/session-recordings/SessionsRecordings-playlist-listing.stories.tsx b/frontend/src/scenes/session-recordings/SessionsRecordings-playlist-listing.stories.tsx
new file mode 100644
index 0000000000000..657fbccf4bc29
--- /dev/null
+++ b/frontend/src/scenes/session-recordings/SessionsRecordings-playlist-listing.stories.tsx
@@ -0,0 +1,48 @@
+import { Meta } from '@storybook/react'
+import { useEffect } from 'react'
+import { mswDecorator } from '~/mocks/browser'
+import { router } from 'kea-router'
+import { urls } from 'scenes/urls'
+import { App } from 'scenes/App'
+import recording_playlists from './__mocks__/recording_playlists.json'
+import { ReplayTabs } from '~/types'
+import recordings from 'scenes/session-recordings/__mocks__/recordings.json'
+import recordingEventsJson from 'scenes/session-recordings/__mocks__/recording_events_query'
+
+const meta: Meta = {
+ title: 'Scenes-App/Recordings',
+ parameters: {
+ layout: 'fullscreen',
+ viewMode: 'story',
+ mockDate: '2023-02-01',
+ },
+ decorators: [
+ mswDecorator({
+ get: {
+ '/api/projects/:team_id/session_recording_playlists': recording_playlists,
+ '/api/projects/:team_id/session_recordings': (req) => {
+ const version = req.url.searchParams.get('version')
+ return [
+ 200,
+ {
+ has_next: false,
+ results: recordings,
+ version,
+ },
+ ]
+ },
+ },
+ post: {
+ '/api/projects/:team/query': recordingEventsJson,
+ },
+ }),
+ ],
+}
+export default meta
+
+export function RecordingsPlayLists(): JSX.Element {
+ useEffect(() => {
+ router.actions.push(urls.replay(ReplayTabs.Playlists))
+ }, [])
+ return
+}
diff --git a/frontend/src/scenes/session-recordings/__mocks__/recording_events.json b/frontend/src/scenes/session-recordings/__mocks__/recording_events.json
index f2db148045646..0afa00a98d244 100644
--- a/frontend/src/scenes/session-recordings/__mocks__/recording_events.json
+++ b/frontend/src/scenes/session-recordings/__mocks__/recording_events.json
@@ -1,6 +1,6 @@
[
{
- "id": "$pageview",
+ "id": "$pageview1",
"event": "$pageview",
"name": "$event_before_recording_starts",
"type": "events",
@@ -14,7 +14,7 @@
"elements_hash": ""
},
{
- "id": "$pageview",
+ "id": "$pageview2",
"name": "$pageview",
"event": "$pageview",
"type": "events",
diff --git a/frontend/src/scenes/session-recordings/player/PlayerMetaLinks.tsx b/frontend/src/scenes/session-recordings/player/PlayerMetaLinks.tsx
index fd023b710fc20..451f1cf616f8a 100644
--- a/frontend/src/scenes/session-recordings/player/PlayerMetaLinks.tsx
+++ b/frontend/src/scenes/session-recordings/player/PlayerMetaLinks.tsx
@@ -4,17 +4,18 @@ import {
} from 'scenes/session-recordings/player/sessionRecordingPlayerLogic'
import { useActions, useValues } from 'kea'
import { LemonButton, LemonButtonProps } from 'lib/lemon-ui/LemonButton'
-import { IconComment, IconDelete, IconLink } from 'lib/lemon-ui/icons'
+import { IconComment, IconDelete, IconJournalPlus, IconLink } from 'lib/lemon-ui/icons'
import { openPlayerShareDialog } from 'scenes/session-recordings/player/share/PlayerShare'
import { PlaylistPopoverButton } from './playlist-popover/PlaylistPopover'
import { LemonDialog } from 'lib/lemon-ui/LemonDialog'
-import { NotebookAddButton } from 'scenes/notebooks/NotebookAddButton/NotebookAddButton'
+import { NotebookSelectButton } from 'scenes/notebooks/NotebookSelectButton/NotebookSelectButton'
import { NotebookNodeType } from '~/types'
-import { dayjs } from 'lib/dayjs'
+import { useNotebookNode } from 'scenes/notebooks/Nodes/notebookNodeLogic'
export function PlayerMetaLinks(): JSX.Element {
const { sessionRecordingId, logicProps } = useValues(sessionRecordingPlayerLogic)
const { setPause, deleteRecording } = useActions(sessionRecordingPlayerLogic)
+ const nodeLogic = useNotebookNode()
const getCurrentPlayerTime = (): number => {
// NOTE: We pull this value at call time as otherwise it would trigger re-renders if pulled from the hook
@@ -55,12 +56,11 @@ export function PlayerMetaLinks(): JSX.Element {
{![SessionRecordingPlayerMode.Sharing].includes(mode) ? (
<>
-
}
resource={{ type: NotebookNodeType.Recording, attrs: { id: sessionRecordingId } }}
onClick={() => setPause()}
- newNotebookTitle={`Notes ${dayjs().format('DD/MM')}`}
onNotebookOpened={(theNotebookLogic, theNodeLogic) => {
const time = getCurrentPlayerTime() * 1000
@@ -74,15 +74,30 @@ export function PlayerMetaLinks(): JSX.Element {
}}
>
Comment
-
+
} onClick={onShare} {...commonProps}>
Share
-
- Pin
-
+ {nodeLogic ? (
+ nodeLogic.props.nodeType !== NotebookNodeType.Recording ? (
+
}
+ size="small"
+ onClick={() => {
+ nodeLogic.actions.insertAfter({
+ type: NotebookNodeType.Recording,
+ attrs: { id: sessionRecordingId },
+ })
+ }}
+ />
+ ) : null
+ ) : (
+
+ Pin
+
+ )}
{logicProps.playerKey !== 'modal' && (
([
if (nextSourceToLoad) {
actions.loadRecordingSnapshotsV2(nextSourceToLoad)
- } else {
- actions.reportUsageIfFullyLoaded()
}
},
loadRecordingSnapshotsV1Success: ({ sessionPlayerSnapshotData }) => {
@@ -254,8 +252,6 @@ export const sessionRecordingDataLogic = kea([
if (values.sessionPlayerSnapshotData?.next) {
actions.loadRecordingSnapshotsV1(values.sessionPlayerSnapshotData?.next)
- } else {
- actions.reportUsageIfFullyLoaded()
}
if (values.chunkPaginationIndex === 1 || values.loadedFromBlobStorage) {
// Not always accurate that recording is playable after first chunk is loaded, but good guesstimate for now
@@ -265,10 +261,12 @@ export const sessionRecordingDataLogic = kea([
size: (values.sessionPlayerSnapshotData?.snapshots ?? []).length,
duration: Math.round(performance.now() - cache.snapshotsStartTime),
}
-
- actions.reportViewed()
}
},
+ loadRecordingSnapshotsSuccess: () => {
+ actions.reportViewed()
+ actions.reportUsageIfFullyLoaded()
+ },
loadRecordingSnapshotsV1Failure: () => {
actions.loadRecordingSnapshotsFailure()
},
diff --git a/frontend/src/scenes/session-recordings/playlist/SessionRecordingsPlaylist.tsx b/frontend/src/scenes/session-recordings/playlist/SessionRecordingsPlaylist.tsx
index 04464fc9a87da..00508be3ab649 100644
--- a/frontend/src/scenes/session-recordings/playlist/SessionRecordingsPlaylist.tsx
+++ b/frontend/src/scenes/session-recordings/playlist/SessionRecordingsPlaylist.tsx
@@ -57,19 +57,32 @@ function UnusableEventsWarning(props: { unusableEventsInFilter: string[] }): JSX
)
}
+export type SessionRecordingsPlaylistProps = SessionRecordingListLogicProps & {
+ playlistShortId?: string
+ personUUID?: string
+ filters?: RecordingFilters
+ updateSearchParams?: boolean
+ onFiltersChange?: (filters: RecordingFilters) => void
+ autoPlay?: boolean
+ mode?: 'standard' | 'notebook'
+}
+
export function RecordingsLists({
playlistShortId,
personUUID,
filters: defaultFilters,
updateSearchParams,
+ ...props
}: SessionRecordingsPlaylistProps): JSX.Element {
- const logicProps = {
+ const logicProps: SessionRecordingListLogicProps = {
+ ...props,
playlistShortId,
personUUID,
filters: defaultFilters,
updateSearchParams,
}
const logic = sessionRecordingsListLogic(logicProps)
+
const {
filters,
hasNext,
@@ -244,11 +257,11 @@ export function RecordingsLists({
data-attr={'expand-replay-listing-from-default-seven-days-to-twenty-one'}
onClick={() => {
setFilters({
- date_from: '-21d',
+ date_from: '-30d',
})
}}
>
- Search over the last 21 days
+ Search over the last 30 days
) : (
@@ -285,33 +298,12 @@ export function RecordingsLists({
)
}
-export type SessionRecordingsPlaylistProps = {
- playlistShortId?: string
- personUUID?: string
- filters?: RecordingFilters
- updateSearchParams?: boolean
- onFiltersChange?: (filters: RecordingFilters) => void
- autoPlay?: boolean
- mode?: 'standard' | 'notebook'
-}
-
export function SessionRecordingsPlaylist(props: SessionRecordingsPlaylistProps): JSX.Element {
- const {
- playlistShortId,
- personUUID,
- filters: defaultFilters,
- updateSearchParams,
- onFiltersChange,
- autoPlay = true,
- } = props
+ const { playlistShortId } = props
const logicProps: SessionRecordingListLogicProps = {
- playlistShortId,
- personUUID,
- filters: defaultFilters,
- updateSearchParams,
- autoPlay,
- onFiltersChange,
+ ...props,
+ autoPlay: props.autoPlay ?? true,
}
const logic = sessionRecordingsListLogic(logicProps)
const {
diff --git a/frontend/src/scenes/session-recordings/playlist/sessionRecordingsListLogic.ts b/frontend/src/scenes/session-recordings/playlist/sessionRecordingsListLogic.ts
index 99cb664cebc18..5d44e84618b36 100644
--- a/frontend/src/scenes/session-recordings/playlist/sessionRecordingsListLogic.ts
+++ b/frontend/src/scenes/session-recordings/playlist/sessionRecordingsListLogic.ts
@@ -157,12 +157,8 @@ export const defaultPageviewPropertyEntityFilter = (
}
}
-export function generateSessionRecordingListLogicKey(props: SessionRecordingListLogicProps): string {
- return `${props.key}-${props.playlistShortId}-${props.personUUID}-${props.updateSearchParams ? '-with-search' : ''}`
-}
-
export interface SessionRecordingListLogicProps {
- key?: string
+ logicKey?: string
playlistShortId?: string
personUUID?: PersonUUID
filters?: RecordingFilters
@@ -174,7 +170,12 @@ export interface SessionRecordingListLogicProps {
export const sessionRecordingsListLogic = kea
([
path((key) => ['scenes', 'session-recordings', 'playlist', 'sessionRecordingsListLogic', key]),
props({} as SessionRecordingListLogicProps),
- key(generateSessionRecordingListLogicKey),
+ key(
+ (props: SessionRecordingListLogicProps) =>
+ `${props.logicKey}-${props.playlistShortId}-${props.personUUID}-${
+ props.updateSearchParams ? '-with-search' : ''
+ }`
+ ),
connect({
actions: [
eventUsageLogic,
diff --git a/frontend/src/scenes/surveys/Survey.tsx b/frontend/src/scenes/surveys/Survey.tsx
index 6f72397bd4c54..d59ed4b674e69 100644
--- a/frontend/src/scenes/surveys/Survey.tsx
+++ b/frontend/src/scenes/surveys/Survey.tsx
@@ -60,7 +60,7 @@ export function SurveyComponent({ id }: { id?: string } = {}): JSX.Element {
export function SurveyForm({ id }: { id: string }): JSX.Element {
const { survey, surveyLoading, isEditingSurvey, hasTargetingFlag } = useValues(surveyLogic)
- const { loadSurvey, editingSurvey, setHasTargetingFlag } = useActions(surveyLogic)
+ const { loadSurvey, editingSurvey, setSurveyValue } = useActions(surveyLogic)
const { featureFlags } = useValues(enabledFeaturesLogic)
return (
@@ -374,7 +374,9 @@ export function SurveyForm({ id }: { id: string }): JSX.Element {
setHasTargetingFlag(true)}
+ onClick={() => {
+ setSurveyValue('targeting_flag_filters', { groups: [] })
+ }}
>
Add user targeting
@@ -389,7 +391,10 @@ export function SurveyForm({ id }: { id: string }): JSX.Element {
type="secondary"
status="danger"
className="w-max"
- onClick={() => setHasTargetingFlag(false)}
+ onClick={() => {
+ setSurveyValue('targeting_flag_filters', undefined)
+ setSurveyValue('targeting_flag', null)
+ }}
>
Remove all user properties
diff --git a/frontend/src/scenes/surveys/SurveyView.tsx b/frontend/src/scenes/surveys/SurveyView.tsx
index dfe7de4895a4b..3b0b46e89ca94 100644
--- a/frontend/src/scenes/surveys/SurveyView.tsx
+++ b/frontend/src/scenes/surveys/SurveyView.tsx
@@ -10,27 +10,22 @@ import { capitalizeFirstLetter } from 'lib/utils'
import { useState, useEffect } from 'react'
import { pluginsLogic } from 'scenes/plugins/pluginsLogic'
import { Query } from '~/queries/Query/Query'
-import { defaultSurveyAppearance, surveyLogic } from './surveyLogic'
+import { defaultSurveyAppearance, surveyEventName, surveyLogic } from './surveyLogic'
import { surveysLogic } from './surveysLogic'
import { PageHeader } from 'lib/components/PageHeader'
import { SurveyReleaseSummary } from './Survey'
import { SurveyAppearance } from './SurveyAppearance'
-import { SurveyQuestionType, SurveyType } from '~/types'
+import { PropertyFilterType, PropertyOperator, Survey, SurveyQuestionType, SurveyType } from '~/types'
import { SurveyAPIEditor } from './SurveyAPIEditor'
import { LemonBanner } from 'lib/lemon-ui/LemonBanner'
import { IconOpenInNew } from 'lib/lemon-ui/icons'
import { NodeKind } from '~/queries/schema'
+import { dayjs } from 'lib/dayjs'
+import { FEATURE_FLAGS } from 'lib/constants'
+import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
export function SurveyView({ id }: { id: string }): JSX.Element {
- const {
- survey,
- dataTableQuery,
- surveyLoading,
- surveyPlugin,
- surveyMetricsQueries,
- surveyDataVizQuery,
- showSurveyAppWarning,
- } = useValues(surveyLogic)
+ const { survey, surveyLoading, surveyPlugin, showSurveyAppWarning } = useValues(surveyLogic)
// TODO: survey results logic
// const { surveyImpressionsCount, surveyStartedCount, surveyCompletedCount } = useValues(surveyResultsLogic)
const { editingSurvey, updateSurvey, launchSurvey, stopSurvey, archiveSurvey, resumeSurvey } =
@@ -134,48 +129,7 @@ export function SurveyView({ id }: { id: string }): JSX.Element {
? {
content: (
- {surveyMetricsQueries && (
-
- )}
- {survey.questions[0].type === SurveyQuestionType.Rating && (
-
-
-
- )}
- {(survey.questions[0].type === SurveyQuestionType.SingleChoice ||
- survey.questions[0].type === SurveyQuestionType.MultipleChoice) && (
-
- {survey.questions[0].type === SurveyQuestionType.SingleChoice ? (
-
- ) : (
-
- )}
-
- )}
- {surveyLoading ?
:
}
+
+
+ {featureFlags[FEATURE_FLAGS.SURVEY_NPS_RESULTS] && survey.questions[0].scale === 10 && (
+ <>
+
+
NPS Score
+
+
+ )}
+
+ )}
+ {(survey.questions[0].type === SurveyQuestionType.SingleChoice ||
+ survey.questions[0].type === SurveyQuestionType.MultipleChoice) && (
+
+
+
+ )}
+ {!disableEventsTable && (surveyLoading ? : )}
+
+ )
+}
+
const OPT_IN_SNIPPET = `posthog.init('YOUR_PROJECT_API_KEY', {
api_host: 'YOUR API HOST',
opt_in_site_apps: true // <--- Add this line
})`
+
+function SurveyNPSResults({ survey }: { survey: Survey }): JSX.Element {
+ return (
+
+ )
+}
diff --git a/frontend/src/scenes/surveys/Surveys.tsx b/frontend/src/scenes/surveys/Surveys.tsx
index 3d5fc423f40c7..3f18b2df4e154 100644
--- a/frontend/src/scenes/surveys/Surveys.tsx
+++ b/frontend/src/scenes/surveys/Surveys.tsx
@@ -112,17 +112,7 @@ export function Surveys(): JSX.Element {
title: 'Status',
width: 100,
render: function Render(_, survey: Survey) {
- const statusColors = {
- running: 'success',
- draft: 'default',
- complete: 'completion',
- } as Record
- const status = getSurveyStatus(survey)
- return (
-
- {status.toUpperCase()}
-
- )
+ return
},
},
{
@@ -243,3 +233,17 @@ export function Surveys(): JSX.Element {