Skip to content

Commit

Permalink
feat: Added new scene config item for loading relevant docs when you …
Browse files Browse the repository at this point in the history
…open them (#19474)
  • Loading branch information
benjackwhite authored Dec 21, 2023
1 parent 3670583 commit 8f33ae0
Show file tree
Hide file tree
Showing 6 changed files with 98 additions and 34 deletions.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { IconExternal } from '@posthog/icons'
import { IconExternal, IconHome } from '@posthog/icons'
import { LemonButton, LemonSelect, LemonSkeleton } from '@posthog/lemon-ui'
import clsx from 'clsx'
import { useActions, useValues } from 'kea'
Expand Down Expand Up @@ -28,29 +28,6 @@ function SidePanelDocsSkeleton(): JSX.Element {
)
}

function Menu({
menu,
activeMenuName,
onChange,
}: {
menu: Menu[]
activeMenuName: string | null
onChange: (newValue: string | null) => void
}): JSX.Element {
return (
<div className="mr-auto">
<LemonSelect
placeholder="Navigate"
dropdownMatchSelectWidth={false}
onChange={onChange}
size="small"
value={activeMenuName}
options={menu.map(({ name }) => ({ label: name, value: name }))}
/>
</div>
)
}

export const SidePanelDocs = (): JSX.Element => {
const { iframeSrc, currentUrl } = useValues(sidePanelDocsLogic)
const { updatePath, unmountIframe, closeSidePanel, handleExternalUrl } = useActions(sidePanelDocsLogic)
Expand Down Expand Up @@ -131,7 +108,33 @@ export const SidePanelDocs = (): JSX.Element => {
return (
<>
<SidePanelPaneHeader>
{menu && <Menu menu={menu} activeMenuName={activeMenuName} onChange={handleMenuChange} />}
<LemonButton
size="small"
sideIcon={<IconHome />}
type="secondary"
onClick={() => {
ref.current?.contentWindow?.postMessage(
{
type: 'navigate',
url: '/docs',
},
'*'
)
}}
/>

{menu && (
<LemonSelect
placeholder="Navigate"
dropdownMatchSelectWidth={false}
onChange={handleMenuChange}
size="small"
value={activeMenuName}
options={menu.map(({ name }) => ({ label: name, value: name }))}
/>
)}

<div className="flex-1" />
<LemonButton
size="small"
sideIcon={<IconExternal />}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import { actions, connect, kea, listeners, path, reducers, selectors } from 'kea'
import { actions, afterMount, beforeUnmount, connect, kea, listeners, path, reducers, selectors } from 'kea'
import { router } from 'kea-router'

import { SidePanelTab } from '~/types'
import { sceneLogic } from 'scenes/sceneLogic'

import { sidePanelStateLogic } from '../sidePanelStateLogic'
import type { sidePanelDocsLogicType } from './sidePanelDocsLogicType'
Expand All @@ -26,10 +25,10 @@ export const sidePanelDocsLogic = kea<sidePanelDocsLogicType>([
path(['scenes', 'navigation', 'sidepanel', 'sidePanelDocsLogic']),
connect({
actions: [sidePanelStateLogic, ['openSidePanel', 'closeSidePanel']],
values: [sceneLogic, ['sceneConfig']],
}),

actions({
openDocsPage: (urlOrPath: string) => ({ urlOrPath }),
updatePath: (path: string) => ({ path }),
setInitialPath: (path: string) => ({ path }),
unmountIframe: true,
Expand Down Expand Up @@ -68,9 +67,11 @@ export const sidePanelDocsLogic = kea<sidePanelDocsLogicType>([
}),

listeners(({ actions, values }) => ({
openDocsPage: ({ urlOrPath }) => {
actions.setInitialPath(getPathFromUrl(urlOrPath))
actions.openSidePanel(SidePanelTab.Docs)
openSidePanel: ({ options }) => {
if (options) {
const initialPath = getPathFromUrl(options)
actions.setInitialPath(initialPath)
}
},

unmountIframe: () => {
Expand All @@ -82,4 +83,14 @@ export const sidePanelDocsLogic = kea<sidePanelDocsLogicType>([
router.actions.push(getPathFromUrl(urlOrPath))
},
})),

afterMount(({ actions, values }) => {
if (values.sceneConfig?.defaultDocsPath) {
actions.setInitialPath(values.sceneConfig?.defaultDocsPath)
}
}),

beforeUnmount(({ actions, values }) => {
actions.setInitialPath(values.currentPath ?? '/docs')
}),
])
4 changes: 2 additions & 2 deletions frontend/src/lib/lemon-ui/Link/Link.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@ export const Link: React.FC<LinkProps & React.RefAttributes<HTMLElement>> = Reac

// NOTE: Temporarily disabled - owner @corywatilo
// const is3000 = useFeatureFlag('POSTHOG_3000', 'test')
// const { openDocsPage } = useActions(sidePanelDocsLogic)
// const { openSidePanel } = useActions(sidePanelStateLogic)

const onClick = (event: React.MouseEvent<HTMLElement>): void => {
if (event.metaKey || event.ctrlKey) {
Expand All @@ -104,7 +104,7 @@ export const Link: React.FC<LinkProps & React.RefAttributes<HTMLElement>> = Reac
// NOTE: Temporarily disabled - owner @corywatilo
// if (typeof to === 'string' && is3000 && isPostHogComDocs(to)) {
// event.preventDefault()
// openDocsPage(to)
// openSidePanel(SidePanelTab.Docs, to)
// return
// }

Expand Down
3 changes: 3 additions & 0 deletions frontend/src/scenes/sceneTypes.ts
Original file line number Diff line number Diff line change
Expand Up @@ -133,4 +133,7 @@ export interface SceneConfig {
organizationBased?: boolean
/** Route requires project access (used e.g. by breadcrumbs). `true` implies also `organizationBased` */
projectBased?: boolean

/** Default docs path - what the docs side panel will open by default if this scene is active */
defaultDocsPath?: string
}
47 changes: 47 additions & 0 deletions frontend/src/scenes/scenes.ts
Original file line number Diff line number Diff line change
Expand Up @@ -46,38 +46,48 @@ export const sceneConfigurations: Record<Scene, SceneConfig> = {
[Scene.Dashboards]: {
projectBased: true,
name: 'Dashboards',
defaultDocsPath: '/docs/product-analytics/dashboards',
},
[Scene.Dashboard]: {
projectBased: true,
defaultDocsPath: '/docs/product-analytics/dashboards',
},

[Scene.Insight]: {
projectBased: true,
name: 'Insights',
defaultDocsPath: '/docs/product-analytics/insights',
},
[Scene.WebAnalytics]: {
projectBased: true,
name: 'Web analytics',
layout: 'app-container',
defaultDocsPath: '/docs/web-analytics',
},
[Scene.Cohort]: {
projectBased: true,
name: 'Cohort',
defaultDocsPath: '/docs/data/cohorts',
},
[Scene.Events]: {
projectBased: true,
name: 'Event explorer',
defaultDocsPath: '/docs/data/events',
},
[Scene.BatchExports]: {
projectBased: true,
name: 'Batch exports',
defaultDocsPath: '/docs/cdp/batch-exports',
},
[Scene.BatchExportEdit]: {
projectBased: true,
name: 'Edit batch export',
defaultDocsPath: '/docs/cdp/batch-exports',
},
[Scene.BatchExport]: {
projectBased: true,
name: 'Batch export',
defaultDocsPath: '/docs/cdp/batch-exports',
},
[Scene.DataManagement]: {
projectBased: true,
Expand All @@ -86,6 +96,7 @@ export const sceneConfigurations: Record<Scene, SceneConfig> = {
[Scene.EventDefinition]: {
projectBased: true,
name: 'Data management',
defaultDocsPath: '/docs/data/events',
},
[Scene.PropertyDefinition]: {
projectBased: true,
Expand All @@ -94,111 +105,139 @@ export const sceneConfigurations: Record<Scene, SceneConfig> = {
[Scene.Replay]: {
projectBased: true,
name: 'Session replay',
defaultDocsPath: '/docs/session-replay',
},
[Scene.ReplaySingle]: {
projectBased: true,
name: 'Replay recording',
defaultDocsPath: '/docs/session-replay',
},
[Scene.ReplayPlaylist]: {
projectBased: true,
name: 'Replay playlist',
defaultDocsPath: '/docs/session-replay',
},
[Scene.Person]: {
projectBased: true,
name: 'Person',
defaultDocsPath: '/docs/session-replay',
},
[Scene.PersonsManagement]: {
projectBased: true,
name: 'People & groups',
defaultDocsPath: '/docs/data/persons',
},
[Scene.Action]: {
projectBased: true,
name: 'Action',
defaultDocsPath: '/docs/data/actions',
},
[Scene.Group]: {
projectBased: true,
name: 'People & groups',
defaultDocsPath: '/docs/product-analytics/group-analytics',
},
[Scene.Pipeline]: {
projectBased: true,
name: 'Pipeline',
defaultDocsPath: '/docs/cdp',
},
[Scene.PipelineApp]: {
projectBased: true,
name: 'Pipeline app',
defaultDocsPath: '/docs/cdp',
},
[Scene.Experiments]: {
projectBased: true,
name: 'A/B testing',
defaultDocsPath: '/docs/experiments',
},
[Scene.Experiment]: {
projectBased: true,
name: 'Experiment',
defaultDocsPath: '/docs/experiments/creating-an-experiment',
},
[Scene.FeatureFlags]: {
projectBased: true,
name: 'Feature flags',
defaultDocsPath: '/docs/feature-flags',
},
[Scene.FeatureFlag]: {
projectBased: true,
defaultDocsPath: '/docs/feature-flags/creating-feature-flags',
},
[Scene.Surveys]: {
projectBased: true,
name: 'Surveys',
defaultDocsPath: '/docs/feature-flags/creating-feature-flags',
},
[Scene.Survey]: {
projectBased: true,
name: 'Survey',
defaultDocsPath: '/docs/surveys',
},
[Scene.SurveyTemplates]: {
projectBased: true,
name: 'New survey',
defaultDocsPath: '/docs/surveys/creating-surveys',
},
[Scene.DataWarehouse]: {
projectBased: true,
name: 'Data warehouse',
defaultDocsPath: '/docs/feature-flags/creating-feature-flags',
},
[Scene.DataWarehousePosthog]: {
projectBased: true,
name: 'Data warehouse',
defaultDocsPath: '/docs/data-warehouse',
},
[Scene.DataWarehouseExternal]: {
projectBased: true,
name: 'Data warehouse',
defaultDocsPath: '/docs/data-warehouse/setup',
},
[Scene.DataWarehouseSavedQueries]: {
projectBased: true,
name: 'Data warehouse',
defaultDocsPath: '/docs/data-warehouse/view',
},
[Scene.DataWarehouseSettings]: {
projectBased: true,
name: 'Data warehouse settings',
defaultDocsPath: '/docs/data-warehouse',
},
[Scene.DataWarehouseTable]: {
projectBased: true,
name: 'Data warehouse table',
defaultDocsPath: '/docs/data-warehouse',
},
[Scene.EarlyAccessFeatures]: {
projectBased: true,
defaultDocsPath: '/docs/data-warehouse',
},
[Scene.EarlyAccessFeature]: {
projectBased: true,
defaultDocsPath: '/docs/feature-flags/early-access-feature-management',
},
[Scene.Apps]: {
projectBased: true,
name: 'Apps',
defaultDocsPath: '/docs/cdp',
},
[Scene.FrontendAppScene]: {
projectBased: true,
name: 'App',
defaultDocsPath: '/docs/cdp',
},
[Scene.AppMetrics]: {
projectBased: true,
name: 'Apps',
defaultDocsPath: '/docs/cdp',
},
[Scene.SavedInsights]: {
projectBased: true,
name: 'Product analytics',
defaultDocsPath: '/docs/product-analytics',
},
[Scene.ProjectHomepage]: {
projectBased: true,
Expand All @@ -218,6 +257,7 @@ export const sceneConfigurations: Record<Scene, SceneConfig> = {
[Scene.ToolbarLaunch]: {
projectBased: true,
name: 'Launch toolbar',
defaultDocsPath: '/docs/toolbar',
},
[Scene.Site]: {
projectBased: true,
Expand All @@ -227,14 +267,17 @@ export const sceneConfigurations: Record<Scene, SceneConfig> = {
// Organization-based routes
[Scene.OrganizationCreateFirst]: {
name: 'Organization creation',
defaultDocsPath: '/docs/data/organizations-and-projects',
},
[Scene.OrganizationCreationConfirm]: {
name: 'Confirm organization creation',
onlyUnauthenticated: true,
defaultDocsPath: '/docs/data/organizations-and-projects',
},
[Scene.ProjectCreateFirst]: {
name: 'Project creation',
organizationBased: true,
defaultDocsPath: '/docs/data/organizations-and-projects',
},
// Onboarding/setup routes
[Scene.Login]: {
Expand Down Expand Up @@ -274,6 +317,7 @@ export const sceneConfigurations: Record<Scene, SceneConfig> = {
[Scene.Billing]: {
hideProjectNotice: true,
organizationBased: true,
defaultDocsPath: '/pricing',
},
[Scene.Unsubscribe]: {
allowUnauthenticated: true,
Expand All @@ -295,15 +339,18 @@ export const sceneConfigurations: Record<Scene, SceneConfig> = {
hideProjectNotice: true, // Currently doesn't render well...
name: 'Notebook',
layout: 'app-raw',
defaultDocsPath: '/blog/introducing-notebooks',
},
[Scene.Notebooks]: {
projectBased: true,
name: 'Notebooks',
defaultDocsPath: '/blog/introducing-notebooks',
},
[Scene.Canvas]: {
projectBased: true,
name: 'Canvas',
layout: 'app-raw',
defaultDocsPath: '/blog/introducing-notebooks',
},
[Scene.Settings]: {
projectBased: true,
Expand Down

0 comments on commit 8f33ae0

Please sign in to comment.