From 48632bc35c3fac49bbeae0b0bbff49c058f7ca51 Mon Sep 17 00:00:00 2001 From: Ben White Date: Fri, 15 Dec 2023 08:18:12 +0000 Subject: [PATCH] feat: Update notebook welcome template (#19281) --- .../NotebookTemplates/notebookTemplates.ts | 658 +++++++++++++++--- 1 file changed, 562 insertions(+), 96 deletions(-) diff --git a/frontend/src/scenes/notebooks/NotebookTemplates/notebookTemplates.ts b/frontend/src/scenes/notebooks/NotebookTemplates/notebookTemplates.ts index 7828341153949..f2fe3b0d454ae 100644 --- a/frontend/src/scenes/notebooks/NotebookTemplates/notebookTemplates.ts +++ b/frontend/src/scenes/notebooks/NotebookTemplates/notebookTemplates.ts @@ -24,159 +24,539 @@ export const LOCAL_NOTEBOOK_TEMPLATES: NotebookType[] = [ content: [ { type: 'heading', - attrs: { level: 1 }, - content: [{ type: 'text', text: 'Introducing Notebooks! 🥳' }], + attrs: { + level: 1, + }, + content: [ + { + type: 'text', + text: 'Introducing Notebooks! 🥳', + }, + ], }, { type: 'paragraph', content: [ { type: 'text', - text: 'Notebooks are a powerful way of working with all of the various parts of PostHog, allowing you to bring Insights, Replays, Feature Flags, Events and much more into one place. Whether it is an ', + text: 'Notebooks are a powerful way to collate, analyze, and share PostHog data with others:', + }, + ], + }, + { + type: 'paragraph', + }, + { + type: 'bulletList', + content: [ + { + type: 'listItem', + content: [ + { + type: 'paragraph', + content: [ + { + type: 'text', + marks: [ + { + type: 'bold', + }, + ], + text: 'Investigating a bug report?', + }, + { + type: 'text', + text: ' Drag and drop session replays into a scratchpad and watch them as normal, or add timestamped comments to break things down.', + }, + { + type: 'hardBreak', + }, + ], + }, + ], + }, + { + type: 'listItem', + content: [ + { + type: 'paragraph', + content: [ + { + type: 'text', + marks: [ + { + type: 'bold', + }, + ], + text: 'Researching a new idea?', + }, + { + type: 'text', + text: ' Collect insights and add them to your proposal seamlessly, alongside survey results or cohorts.', + }, + { + type: 'hardBreak', + }, + ], + }, + ], + }, + { + type: 'listItem', + content: [ + { + type: 'paragraph', + content: [ + { + type: 'text', + marks: [ + { + type: 'bold', + }, + ], + text: 'Planning a launch? ', + }, + { + type: 'text', + text: 'Embed the feature flags, events, persons, or cohorts you’ll need to deploy changes and track success.', + }, + ], + }, + ], }, - { type: 'text', marks: [{ type: 'bold' }], text: 'ad-hoc analysis' }, - { type: 'text', text: ' or a ' }, - { type: 'text', marks: [{ type: 'bold' }], text: 'bug investigation' }, - { type: 'text', text: ' or a ' }, - { type: 'text', marks: [{ type: 'bold' }], text: 'feature release' }, + ], + }, + { + type: 'paragraph', + }, + { + type: 'paragraph', + content: [ { type: 'text', - text: '. We have only just got started with Notebooks so try it out and let us know what you think.', + text: 'There’s no limit to how many notebooks you can create, or how you can share them within your organization, though we block multiplayer editing to stop things getting messy.', }, ], }, - { type: 'paragraph' }, - { type: 'heading', attrs: { level: 2 }, content: [{ type: 'text', text: 'General text editing' }] }, { type: 'paragraph', + }, + { + type: 'heading', + attrs: { + level: 2, + }, content: [ { type: 'text', - text: 'Notebooks support all sorts of typical text editing features such as Headings, Bold, Italic, Lists etc. Currently the only supported method of doing these is via ', + text: 'Editing in notebooks', }, - { type: 'text', marks: [{ type: 'bold' }], text: 'Markdown.' }, ], }, - { type: 'paragraph' }, - { type: 'paragraph', content: [{ type: 'text', text: '# Heading 1' }] }, - { type: 'paragraph', content: [{ type: 'text', text: '## Heading 2' }] }, { type: 'paragraph', content: [ - { type: 'text', text: '### Heading 3 ' }, - { type: 'text', marks: [{ type: 'italic' }], text: '(you get the idea...)' }, + { + type: 'text', + text: 'Notebooks support all sorts of typical text editing features such as headings, bold, italic, numbered and un-numbered lists etc:', + }, ], }, - { type: 'paragraph', content: [{ type: 'text', text: '- List ' }] }, - { type: 'paragraph', content: [{ type: 'text', text: '1. Numbered 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: 'heading', - attrs: { level: 2 }, - content: [{ type: 'text', text: 'What PostHog things are currently supported?' }], + type: 'paragraph', + }, + { + type: 'bulletList', + content: [ + { + type: 'listItem', + content: [ + { + type: 'paragraph', + content: [ + { + type: 'text', + text: '# Heading 1', + }, + ], + }, + ], + }, + { + type: 'listItem', + content: [ + { + type: 'paragraph', + content: [ + { + type: 'text', + text: '## Heading 2', + }, + ], + }, + ], + }, + { + type: 'listItem', + content: [ + { + type: 'paragraph', + content: [ + { + type: 'text', + text: '### Heading 3 ', + }, + { + type: 'text', + marks: [ + { + type: 'italic', + }, + ], + text: '(you get the idea...)', + }, + ], + }, + ], + }, + { + type: 'listItem', + content: [ + { + type: 'paragraph', + content: [ + { + type: 'text', + text: '- List ', + }, + ], + }, + ], + }, + { + type: 'listItem', + content: [ + { + type: 'paragraph', + content: [ + { + type: 'text', + text: '1. Numbered list', + }, + ], + }, + ], + }, + { + type: 'listItem', + content: [ + { + type: 'paragraph', + content: [ + { + type: 'text', + text: '**Bold**', + }, + ], + }, + ], + }, + { + type: 'listItem', + content: [ + { + type: 'paragraph', + content: [ + { + type: 'text', + text: '_italic_', + }, + ], + }, + ], + }, + { + type: 'listItem', + content: [ + { + type: 'paragraph', + content: [ + { + type: 'text', + text: '`code`', + }, + ], + }, + ], + }, + ], + }, + { + type: 'paragraph', }, { type: 'paragraph', content: [ { type: 'text', - text: 'The real power of Notebooks comes from pulling various PostHog resources into the document. Whilst this feature is in ', + text: 'You can also add images:', + }, + ], + }, + { + type: 'ph-image', + attrs: { + height: 451, + title: null, + nodeId: '71f6afaa-90be-44fd-b4d7-48f8d8baf4bd', + __init: null, + children: null, + file: null, + src: 'https://app.posthog.com/uploaded_media/018c494d-132b-0000-2004-8861f35c13b5', + }, + }, + { + type: 'paragraph', + content: [ + { + type: 'hardBreak', }, - { type: 'text', marks: [{ type: 'bold' }], text: 'beta' }, { type: 'text', - text: ", you will find that some things work and others don't... yet. We will keep this document updated with information about what is working and what isn't so be sure to check back.", + text: 'And embed iframe elements, such as YouTube videos:', + }, + ], + }, + { + type: 'ph-embed', + attrs: { + height: 508, + title: 'PostHog youtube video', + nodeId: '421818d3-65c7-4a14-a22e-924e8c4ee04f', + __init: null, + children: null, + src: 'https://www.youtube.com/embed/2N2cvCmv4us?si=5cFwH3fHX8D-Yh1v', + width: null, + }, + }, + { + type: 'paragraph', + content: [ + { + type: 'hardBreak', }, ], }, - { type: 'paragraph' }, { type: 'heading', - attrs: { level: 3 }, - content: [{ type: 'text', text: 'Adding within the Notebook' }], + attrs: { + level: 2, + }, + content: [ + { + type: 'text', + text: 'Adding PostHog data to notebooks', + }, + ], }, { type: 'paragraph', content: [ - { type: 'text', text: 'When you have your cursor on an empty line a ' }, - { type: 'text', marks: [{ type: 'code' }], text: '+' }, { type: 'text', - text: ' button will appear. Clicking that gives you a drop down of various things you can add, from a ', + text: 'The real power of Notebooks comes from pulling various PostHog resources into the document.', }, - { type: 'text', marks: [{ type: 'bold' }], text: 'Trend graph ' }, - { type: 'text', text: 'to an ' }, - { type: 'text', marks: [{ type: 'bold' }], text: 'Session Replay list.' }, ], }, - { type: 'paragraph' }, { type: 'paragraph', + }, + { + type: 'heading', + attrs: { + level: 3, + }, content: [ - { type: 'text', text: 'You can also trigger this with a "slash command" by typing ' }, - { type: 'text', marks: [{ type: 'code' }], text: '/' }, - { type: 'text', text: ' . Try ' }, - { type: 'text', marks: [{ type: 'code' }], text: '/insight' }, - { type: 'text', text: ' to filter for things you would typically find in Insights.' }, + { + type: 'text', + text: 'Slash commands', + }, ], }, - { type: 'paragraph' }, - { type: 'heading', attrs: { level: 3 }, content: [{ type: 'text', text: 'Drag and Drop' }] }, { type: 'paragraph', content: [ - { type: 'text', text: 'The primary way of getting things into a Notebook ' }, - { type: 'text', marks: [{ type: 'italic' }], text: 'currently' }, - { type: 'text', text: ' is ' }, - { type: 'text', marks: [{ type: 'bold' }], text: 'Drag and Drop' }, { type: 'text', - text: '. You can drag many things from elsewhere in PostHog into a Notebook that is pinned to the side.', + text: 'When you have your cursor on an empty line a ', + }, + { + type: 'text', + marks: [ + { + type: 'code', + }, + ], + text: '+', + }, + { + type: 'text', + text: ' button will appear. Clicking that gives you a drop down of various things you can add, from a ', + }, + { + type: 'text', + marks: [ + { + type: 'bold', + }, + ], + text: 'Trend graph ', + }, + { + type: 'text', + text: 'to a ', + }, + { + type: 'text', + marks: [ + { + type: 'bold', + }, + ], + text: 'session replay list.', }, ], }, - { type: 'paragraph' }, + { + type: 'paragraph', + }, { type: 'paragraph', content: [ { type: 'text', - text: "We're quickly adding support for more and more things around PostHog but to see what is currently supported you just have to ", + text: 'You can also trigger this with a "slash command" by typing ', + }, + { + type: 'text', + marks: [ + { + type: 'code', + }, + ], + text: '/', + }, + { + type: 'text', + text: ' . Try ', + }, + { + type: 'text', + marks: [ + { + type: 'code', + }, + ], + text: '/insight', + }, + { + type: 'text', + text: ' to filter for things you would typically find in Insights.', + }, + { + type: 'hardBreak', + }, + { + type: 'hardBreak', }, - { type: 'text', marks: [{ type: 'bold' }], text: 'hold down the alt / option key' }, { type: 'text', - text: ' and any supported elements will be highlighted. You can then click and drag it into the Notebook Sidebar to add it to the currently opened Notebook.', + text: "Here's an example of an insight created in a notebook:", }, ], }, - { type: 'paragraph' }, + { + type: 'ph-query', + attrs: { + height: null, + title: null, + nodeId: '1957c0c0-432f-4b03-9da3-c4ae09a36b98', + __init: null, + children: null, + query: '{"kind":"InsightVizNode","source":{"kind":"TrendsQuery","filterTestAccounts":false,"series":[{"kind":"EventsNode","event":"$pageview","name":"$pageview","math":"dau"}],"interval":"day","trendsFilter":{"display":"ActionsLineGraph"}}}', + }, + }, { type: 'paragraph', - content: [{ type: 'text', marks: [{ type: 'bold' }], text: 'Currently we support' }], + }, + { + type: 'heading', + attrs: { + level: 3, + }, + content: [ + { + type: 'text', + text: 'Drag and Drop', + }, + ], + }, + { + type: 'paragraph', + content: [ + { + type: 'text', + text: 'You can also drag and drop PostHog elements into a notebook pinned to the sidebar, such as:', + }, + { + type: 'hardBreak', + }, + ], }, { type: 'bulletList', content: [ { type: 'listItem', - content: [{ type: 'paragraph', content: [{ type: 'text', text: '✅ Replay' }] }], + content: [ + { + type: 'paragraph', + content: [ + { + type: 'text', + text: 'Individual replays', + }, + ], + }, + ], }, { type: 'listItem', content: [ { type: 'paragraph', - content: [{ type: 'text', text: '✅ Replay Playlists (saved filters)' }], + content: [ + { + type: 'text', + text: 'Replay Playlists (saved filters)', + }, + ], }, ], }, { type: 'listItem', - content: [{ type: 'paragraph', content: [{ type: 'text', text: '✅ Persons' }] }], + content: [ + { + type: 'paragraph', + content: [ + { + type: 'text', + text: 'HogQL tables', + }, + ], + }, + ], }, { type: 'listItem', @@ -186,7 +566,7 @@ export const LOCAL_NOTEBOOK_TEMPLATES: NotebookType[] = [ content: [ { type: 'text', - text: '✅ Data Exploration nodes (such as the Event Explorer) (partially)', + text: 'Feature flags', }, ], }, @@ -197,7 +577,12 @@ export const LOCAL_NOTEBOOK_TEMPLATES: NotebookType[] = [ content: [ { type: 'paragraph', - content: [{ type: 'text', text: '✅ Feature Flags (partially)' }], + content: [ + { + type: 'text', + text: 'Experiments', + }, + ], }, ], }, @@ -206,67 +591,148 @@ export const LOCAL_NOTEBOOK_TEMPLATES: NotebookType[] = [ content: [ { type: 'paragraph', - content: [{ type: 'text', text: '✅ Insights (partially working)' }], + content: [ + { + type: 'text', + text: 'Surveys', + }, + ], }, ], }, { type: 'listItem', - content: [{ type: 'paragraph', content: [{ type: 'text', text: '✅ HogQL' }] }], + content: [ + { + type: 'paragraph', + content: [ + { + type: 'text', + text: 'Insights', + }, + ], + }, + ], + }, + { + type: 'listItem', + content: [ + { + type: 'paragraph', + content: [ + { + type: 'text', + text: 'And a whole bunch more...', + }, + ], + }, + ], }, ], }, - { type: 'paragraph' }, - { type: 'paragraph', content: [{ type: 'text', marks: [{ type: 'bold' }], text: "What's next?" }] }, { type: 'paragraph', + }, + { + type: 'ph-image', + attrs: { + height: 450, + title: '', + nodeId: '89276c11-147a-4a1a-b091-514d3b9c9e9f', + __init: null, + children: null, + file: null, + src: 'https://app.posthog.com/uploaded_media/018c496c-d79a-0000-bbc8-fdb0c77ec46f', + }, + }, + { + type: 'paragraph', + }, + { + type: 'heading', + attrs: { + level: 2, + }, content: [ - { - type: 'text', - text: 'We have big plans for Notebooks and given that we develop in the open you can follow our roadmap on Github ', - }, { type: 'text', marks: [ - { type: 'link', attrs: { href: 'https://github.com/PostHog/posthog/issues/15680' } }, + { + type: 'bold', + }, ], - text: 'https://github.com/PostHog/posthog/issues/15680', + text: "What's next?", }, - { type: 'text', text: ' ' }, ], }, - { type: 'paragraph' }, - { type: 'heading', attrs: { level: 2 }, content: [{ type: 'text', text: 'Give me an example...' }] }, { type: 'paragraph', content: [ - { type: 'text', text: 'Sure! Below is a Trends chart. This was added by typing ' }, - { type: 'text', marks: [{ type: 'code' }], text: '/trends' }, - { type: 'text', text: ' and pressing enter.' }, + { + type: 'text', + text: 'We have big plans for Notebooks and given that we develop in the open you can follow our', + }, + { + type: 'text', + marks: [ + { + type: 'bold', + }, + ], + text: ' ', + }, + { + type: 'text', + marks: [ + { + type: 'link', + attrs: { + href: 'https://github.com/PostHog/posthog/issues/15680 ', + }, + }, + { + type: 'bold', + }, + ], + text: 'notebooks roadmap on Github', + }, + { + type: 'text', + marks: [ + { + type: 'bold', + }, + ], + text: '.', + }, ], }, { type: 'paragraph', - content: [{ type: 'text', text: 'If you make a copy of this Notebook you can edit it inline.' }], }, - { type: 'paragraph' }, { - type: 'ph-query', - attrs: { - height: null, - title: 'Trends', - nodeId: '098559a2-33d6-4da1-a836-f9f332dd7082', - query: { - kind: 'InsightVizNode', - source: { - kind: 'TrendsQuery', - series: [{ kind: 'EventsNode', math: 'total', name: '$pageview', event: '$pageview' }], - interval: 'day', - trendsFilter: { display: 'ActionsLineGraph' }, - filterTestAccounts: false, - }, + type: 'paragraph', + content: [ + { + type: 'text', + text: 'Notebooks is part of a wider re-imagining of our user experience. You can read more about it this blog post by our Lead Designer: ', }, - }, + { + type: 'text', + marks: [ + { + type: 'link', + attrs: { + href: 'https://posthog.com/blog/posthog-as-a-dev-tool', + }, + }, + { + type: 'bold', + }, + ], + text: 'What if PostHog looked like a dev tool?', + }, + ], }, ], },