Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: snapshot notebook template #17413

Merged
merged 18 commits into from
Sep 14, 2023
Merged

chore: snapshot notebook template #17413

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
0e6db0d
chore: snapshot notebook template
pauldambra Sep 13, 2023
ebd7354
Update UI snapshots for `chromium` (2)
github-actions[bot] Sep 13, 2023
96b6713
Update UI snapshots for `chromium` (1)
github-actions[bot] Sep 13, 2023
e5cac2b
Update UI snapshots for `chromium` (1)
github-actions[bot] Sep 13, 2023
407555c
no need to change user facing template
pauldambra Sep 13, 2023
2e74822
need to all fit within snapshot bounds
pauldambra Sep 13, 2023
2b99bb8
and another example
pauldambra Sep 13, 2023
cbec58e
Update UI snapshots for `chromium` (2)
github-actions[bot] Sep 13, 2023
0f4872f
Update UI snapshots for `chromium` (2)
github-actions[bot] Sep 13, 2023
e89274a
Update UI snapshots for `chromium` (2)
github-actions[bot] Sep 13, 2023
180e58c
Update UI snapshots for `chromium` (1)
github-actions[bot] Sep 13, 2023
bd1bcdf
Update UI snapshots for `chromium` (2)
github-actions[bot] Sep 13, 2023
52190d1
Merge branch 'master' into chore/snapshot-notebook-template
pauldambra Sep 13, 2023
905c31c
wat
pauldambra Sep 13, 2023
27a2e90
Merge branch 'master' into chore/snapshot-notebook-template
pauldambra Sep 14, 2023
42ff4ec
Update UI snapshots for `chromium` (2)
github-actions[bot] Sep 14, 2023
17e3a45
cypress, and styling, and preview, oh my
pauldambra Sep 14, 2023
9f34831
Update UI snapshots for `chromium` (2)
github-actions[bot] Sep 14, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
95 changes: 95 additions & 0 deletions frontend/src/scenes/notebooks/Notebook/Notebook.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,25 @@ const meta: Meta = {
},
decorators: [
mswDecorator({
post: {
'api/projects/:team_id/query': {
clickhouse:
"SELECT nullIf(nullIf(events.`$session_id`, ''), 'null') AS session_id, any(events.properties) AS properties FROM events WHERE and(equals(events.team_id, 1), in(events.event, [%(hogql_val_0)s, %(hogql_val_1)s]), ifNull(in(session_id, [%(hogql_val_2)s]), 0), ifNull(greaterOrEquals(toTimeZone(events.timestamp, %(hogql_val_3)s), %(hogql_val_4)s), 0), ifNull(lessOrEquals(toTimeZone(events.timestamp, %(hogql_val_5)s), %(hogql_val_6)s), 0)) GROUP BY session_id LIMIT 100 SETTINGS readonly=2, max_execution_time=60, allow_experimental_object_type=True",
columns: ['session_id', 'properties'],
hogql: "SELECT properties.$session_id AS session_id, any(properties) AS properties FROM events WHERE and(in(event, ['$pageview', '$autocapture']), in(session_id, ['018a8a51-a39d-7b18-897f-94054eec5f61']), greaterOrEquals(timestamp, '2023-09-11 16:55:36'), lessOrEquals(timestamp, '2023-09-13 18:07:40')) GROUP BY session_id LIMIT 100",
query: "SELECT properties.$session_id as session_id, any(properties) as properties\n FROM events\n WHERE event IN ['$pageview', '$autocapture']\n AND session_id IN ['018a8a51-a39d-7b18-897f-94054eec5f61']\n -- the timestamp range here is only to avoid querying too much of the events table\n -- we don't really care about the absolute value, \n -- but we do care about whether timezones have an odd impact\n -- so, we extend the range by a day on each side so that timezones don't cause issues\n AND timestamp >= '2023-09-11 16:55:36'\n AND timestamp <= '2023-09-13 18:07:40'\n GROUP BY session_id",
results: [
[
'018a8a51-a39d-7b18-897f-94054eec5f61',
'{"$os":"Mac OS X","$os_version":"10.15.7","$browser":"Chrome","$device_type":"Desktop","$current_url":"http://localhost:8000/ingestion/platform","$host":"localhost:8000","$pathname":"/ingestion/platform","$browser_version":116,"$browser_language":"en-GB","$screen_height":982,"$screen_width":1512,"$viewport_height":827,"$viewport_width":1498,"$lib":"web","$lib_version":"1.78.2","$insert_id":"249xj40dkv7x9knp","$time":1694537723.201,"distinct_id":"uLI7S0z6rWQIKAjgXhdUBplxPYymuQqxH5QbJKe2wqr","$device_id":"018a8a51-a39c-78f9-a4e4-1183f059f7cc","$user_id":"uLI7S0z6rWQIKAjgXhdUBplxPYymuQqxH5QbJKe2wqr","is_demo_project":false,"$groups":{"project":"018a8a51-9ee3-0000-0369-ff1924dcba89","organization":"018a8a51-988e-0000-d3e6-477c7cc111f1","instance":"http://localhost:8000"},"$autocapture_disabled_server_side":false,"$active_feature_flags":[],"$feature_flag_payloads":{},"realm":"hosted-clickhouse","email_service_available":false,"slack_service_available":false,"$referrer":"http://localhost:8000/signup","$referring_domain":"localhost:8000","$event_type":"click","$ce_version":1,"token":"phc_awewGgfgakHbaSbprHllKajqoa6iP2nz7OAUou763ie","$session_id":"018a8a51-a39d-7b18-897f-94054eec5f61","$window_id":"018a8a51-a39d-7b18-897f-940673bea28c","$set_once":{"$initial_os":"Mac OS X","$initial_browser":"Chrome","$initial_device_type":"Desktop","$initial_current_url":"http://localhost:8000/ingestion/platform","$initial_pathname":"/ingestion/platform","$initial_browser_version":116,"$initial_referrer":"http://localhost:8000/signup","$initial_referring_domain":"localhost:8000"},"$sent_at":"2023-09-12T16:55:23.743000+00:00","$ip":"127.0.0.1","$group_0":"018a8a51-9ee3-0000-0369-ff1924dcba89","$group_1":"018a8a51-988e-0000-d3e6-477c7cc111f1","$group_2":"http://localhost:8000"}',
],
],
types: [
['session_id', 'Nullable(String)'],
['properties', 'String'],
],
},
},
get: {
'api/projects/:team_id/notebooks': {
count: 1,
Expand Down Expand Up @@ -66,6 +85,75 @@ const meta: Meta = {
],
},
'api/projects/:team_id/notebooks/12345': notebook12345Json,
'api/projects/:team_id/session_recordings': {
results: [
{
id: '018a8a51-a39d-7b18-897f-94054eec5f61',
distinct_id: 'uLI7S0z6rWQIKAjgXhdUBplxPYymuQqxH5QbJKe2wqr',
viewed: true,
recording_duration: 4324,
active_seconds: 21,
inactive_seconds: 4302,
start_time: '2023-09-12T16:55:36.404000Z',
end_time: '2023-09-12T18:07:40.147000Z',
click_count: 3,
keypress_count: 0,
mouse_activity_count: 924,
console_log_count: 37,
console_warn_count: 7,
console_error_count: 9,
start_url: 'http://localhost:8000/replay/recent',
person: {
id: 1,
name: '[email protected]',
distinct_ids: [
'uLI7S0z6rWQIKAjgXhdUBplxPYymuQqxH5QbJKe2wqr',
'018a8a51-a39c-78f9-a4e4-1183f059f7cc',
],
properties: {
email: '[email protected]',
$initial_os: 'Mac OS X',
$geoip_latitude: -33.8715,
$geoip_city_name: 'Sydney',
$geoip_longitude: 151.2006,
$geoip_time_zone: 'Australia/Sydney',
$initial_browser: 'Chrome',
$initial_pathname: '/',
$initial_referrer: 'http://localhost:8000/signup',
$geoip_postal_code: '2000',
$creator_event_uuid: '018a8a51-a39d-7b18-897f-9407e795547b',
$geoip_country_code: 'AU',
$geoip_country_name: 'Australia',
$initial_current_url: 'http://localhost:8000/',
$initial_device_type: 'Desktop',
$geoip_continent_code: 'OC',
$geoip_continent_name: 'Oceania',
$initial_geoip_latitude: -33.8715,
$initial_browser_version: 116,
$initial_geoip_city_name: 'Sydney',
$initial_geoip_longitude: 151.2006,
$initial_geoip_time_zone: 'Australia/Sydney',
$geoip_subdivision_1_code: 'NSW',
$geoip_subdivision_1_name: 'New South Wales',
$initial_referring_domain: 'localhost:8000',
$initial_geoip_postal_code: '2000',
$initial_geoip_country_code: 'AU',
$initial_geoip_country_name: 'Australia',
$initial_geoip_continent_code: 'OC',
$initial_geoip_continent_name: 'Oceania',
$initial_geoip_subdivision_1_code: 'NSW',
$initial_geoip_subdivision_1_name: 'New South Wales',
},
created_at: '2023-09-12T16:55:20.736000Z',
uuid: '018a8a51-a3d3-0000-e8fa-94621f9ddd48',
},
storage: 'clickhouse',
pinned_count: 0,
},
],
has_next: false,
version: 3,
},
},
}),
],
Expand All @@ -78,6 +166,13 @@ export function NotebooksList(): JSX.Element {
return <App />
}

export function NotebooksTemplateIntroduction(): JSX.Element {
useEffect(() => {
router.actions.push(urls.notebook('template-introduction'))
}, [])
return <App />
}

export function TextOnlyNotebook(): JSX.Element {
useEffect(() => {
router.actions.push(urls.notebook('12345'))
Expand Down
53 changes: 51 additions & 2 deletions frontend/src/scenes/notebooks/NotebookTemplates/notebookTemplates.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,7 @@ export const LOCAL_NOTEBOOK_TEMPLATES: NotebookType[] = [
],
},
{ type: 'paragraph' },
{ type: 'paragraph', content: [{ type: 'text', marks: [{ type: 'bold' }], text: 'If you type:' }] },
{ type: 'paragraph', content: [{ type: 'text', text: '# Heading 1' }] },
{ type: 'paragraph', content: [{ type: 'text', text: '## Heading 2' }] },
{
Expand All @@ -68,11 +69,56 @@ export const LOCAL_NOTEBOOK_TEMPLATES: NotebookType[] = [
],
},
{ type: 'paragraph', content: [{ type: 'text', text: '- List ' }] },
{ type: 'paragraph', content: [{ type: 'text', text: '1. Numbered list' }] },
{
type: 'bulletList',
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would this not need to be orderedList if we're including numbers?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That might be the hook to grab hold of...

This was just from me typing into the UI. Weirdly the numbered list appears to work correctly but - and * lists don't

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm switching this up...

Will make a set of "if the JSONContent is correct" stories so we know we render valid JSONContent"

And then we can figure out how to test

"if someone types blah then we would render <template>blah</template> or whatevs

content: [
{
type: 'listItem',
content: [{ type: 'paragraph', content: [{ type: 'text', text: '* List' }] }],
},
{
type: 'listItem',
content: [{ type: 'paragraph', content: [{ type: 'text', text: '1. Number list' }] }],
},
],
},
{ type: 'paragraph', content: [{ type: 'text', text: '**Bold**' }] },
{ type: 'paragraph', content: [{ type: 'text', text: '_italic_' }] },
{ type: 'paragraph', content: [{ type: 'text', text: '`code`' }] },
{ type: 'paragraph' },
{
type: 'paragraph',
content: [
{ type: 'text', marks: [{ type: 'bold' }], text: 'then notebooks shows:' },
{ type: 'text', text: ' ' },
],
},
{ type: 'heading', attrs: { level: 1 }, content: [{ type: 'text', text: 'Heading 1' }] },
{ type: 'heading', attrs: { level: 2 }, content: [{ type: 'text', text: 'Heading 2' }] },
{ type: 'heading', attrs: { level: 3 }, content: [{ type: 'text', text: 'Heading 3' }] },
{
type: 'bulletList',
content: [
{
type: 'listItem',
content: [{ type: 'paragraph', content: [{ type: 'text', text: ' - first' }] }],
},
{
type: 'listItem',
content: [{ type: 'paragraph', content: [{ type: 'text', text: ' - second' }] }],
},
{
type: 'listItem',
content: [{ type: 'paragraph', content: [{ type: 'text', text: ' * first' }] }],
},
{
type: 'listItem',
content: [{ type: 'paragraph', content: [{ type: 'text', text: ' * second' }] }],
},
],
},
{ type: 'paragraph', content: [{ type: 'text', marks: [{ type: 'bold' }], text: ' bold ' }] },
{ type: 'paragraph', content: [{ type: 'text', marks: [{ type: 'bold' }], text: 'italic' }] },
{ type: 'paragraph', content: [{ type: 'text', marks: [{ type: 'code' }], text: 'code' }] },
{
type: 'heading',
attrs: { level: 2 },
Expand Down Expand Up @@ -243,6 +289,9 @@ export const LOCAL_NOTEBOOK_TEMPLATES: NotebookType[] = [
{
type: 'ph-recording-playlist',
attrs: {
height: null,
title: 'Session replays',
nodeId: '41faad12-499f-4a4b-95f7-3a36601317cc',
filters:
'{"session_recording_duration":{"type":"recording","key":"duration","value":3600,"operator":"gt"},"properties":[],"events":[],"actions":[],"date_from":"-7d","date_to":null}',
},
Expand Down