mirrors/posthog
0
0
Fork 0
mirror of https://github.com/PostHog/posthog.git synced 2024-11-21 21:49:51 +01:00
Code Issues Releases Activity

chore(frontend): Sort imports (#18663)

Browse Source 
* chore(frontend): Sort imports

* Fix Storybook build problem

* Try a different fix

* Fix another circular import

* Fix more circular imports

* Fix logic connection

* Ignore `cypress` in TS

* Don't check import order in logic types

* Fix another `connect()`

* Don't sort imports in Notebooks nodes code

* Fix another connection

* Increase specificity of .LemonButton against .Link

* Fix styling issues

* Update UI snapshots for `chromium` (2)

---------

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
This commit is contained in:
Michael Matloka 2023-11-22 15:07:34 +01:00 committed by GitHub
parent 266c3ff5fd
commit 69becac200
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1391 changed files with 9200 additions and 7592 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
.eslintrc.js
View File

@ -44,11 +44,23 @@ module.exports = {
sourceType: 'module',
project: 'tsconfig.json',
},
plugins: ['prettier', 'react', 'cypress', '@typescript-eslint', 'no-only-tests', 'jest', 'compat', 'posthog'],
plugins: [
'prettier',
'react',
'cypress',
'@typescript-eslint',
'no-only-tests',
'jest',
'compat',
'posthog',
'simple-import-sort',
],
rules: {
'no-console': ['error', { allow: ['warn', 'error'] }],
'no-debugger': 'error',
'no-only-tests/no-only-tests': 'error',
'simple-import-sort/imports': 'error',
'simple-import-sort/exports': 'error',
'react/prop-types': [0],
'react/react-in-jsx-scope': [0],
'react/no-unescaped-entities': [0],
@ -266,11 +278,19 @@ module.exports = {
},
},
{
// disable these rules for files generated by kea-typegen
files: ['*Type.ts', '*Type.tsx'],
files: ['*Type.ts', '*Type.tsx'], // Kea typegen output
rules: {
'no-restricted-imports': 'off',
'@typescript-eslint/ban-types': ['off'],
'@typescript-eslint/ban-types': 'off',
'simple-import-sort/imports': 'off',
'simple-import-sort/exports': 'off',
},
},
{
files: ['frontend/src/scenes/notebooks/Nodes/*'], // Notebooks code weirdly relies on its order of sorting
rules: {
'simple-import-sort/imports': 'off',
'simple-import-sort/exports': 'off',
},
},
{

5
cypress/e2e/insights.cy.ts
View File

@ -1,7 +1,8 @@
import { urls } from 'scenes/urls'
import { randomString } from '../support/random'
import { decideResponse } from '../fixtures/api/decide'
import { savedInsights, createInsight, insight } from '../productAnalytics'
import { createInsight, insight, savedInsights } from '../productAnalytics'
import { randomString } from '../support/random'
// For tests related to trends please check trendsElements.js
// insight tests were split up because Cypress was struggling with this many tests in one file🙈

BIN
frontend/__snapshots__/scenes-other-toolbar-components--flags.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 27 KiB

After

Width:  |  Height:  |  Size: 38 KiB

24
frontend/src/exporter/ExportedInsight/ExportedInsight.tsx
View File

@ -1,18 +1,20 @@
import { ChartDisplayType, InsightLogicProps, InsightModel } from '~/types'
import { BindLogic } from 'kea'
import { insightLogic } from 'scenes/insights/insightLogic'
import { FilterBasedCardContent } from 'lib/components/Cards/InsightCard/InsightCard'
import './ExportedInsight.scss'
import { Logo } from '~/toolbar/assets/Logo'
import { InsightLegend } from 'lib/components/InsightLegend/InsightLegend'
import { ExportOptions, ExportType } from '~/exporter/types'
import clsx from 'clsx'
import { SINGLE_SERIES_DISPLAY_TYPES } from 'lib/constants'
import { isTrendsFilter } from 'scenes/insights/sharedUtils'
import { isDataTableNode } from '~/queries/utils'
import { BindLogic } from 'kea'
import { FilterBasedCardContent } from 'lib/components/Cards/InsightCard/InsightCard'
import { QueriesUnsupportedHere } from 'lib/components/Cards/InsightCard/QueriesUnsupportedHere'
import { Query } from '~/queries/Query/Query'
import { TopHeading } from 'lib/components/Cards/InsightCard/TopHeading'
import { InsightLegend } from 'lib/components/InsightLegend/InsightLegend'
import { SINGLE_SERIES_DISPLAY_TYPES } from 'lib/constants'
import { insightLogic } from 'scenes/insights/insightLogic'
import { isTrendsFilter } from 'scenes/insights/sharedUtils'
import { ExportOptions, ExportType } from '~/exporter/types'
import { Query } from '~/queries/Query/Query'
import { isDataTableNode } from '~/queries/utils'
import { Logo } from '~/toolbar/assets/Logo'
import { ChartDisplayType, InsightLogicProps, InsightModel } from '~/types'
export function ExportedInsight({
insight,

6
frontend/src/exporter/Exporter.stories.tsx
View File

@ -1,9 +1,11 @@
import { useEffect } from 'react'
import { Meta, StoryFn, StoryObj } from '@storybook/react'
import { Exporter } from './Exporter'
import { useEffect } from 'react'
import { dashboard } from '~/exporter/__mocks__/Exporter.mocks'
import { ExportType } from '~/exporter/types'
import { Exporter } from './Exporter'
type Story = StoryObj<typeof Exporter>
const meta: Meta<typeof Exporter> = {
title: 'Exporter/Exporter',

21
frontend/src/exporter/Exporter.tsx
View File

@ -1,18 +1,21 @@
import '~/styles'
import './Exporter.scss'
import { useEffect } from 'react'
import { ExportedData, ExportType } from '~/exporter/types'
import { DashboardPlacement } from '~/types'
import { ExportedInsight } from '~/exporter/ExportedInsight/ExportedInsight'
import { Logo } from '~/toolbar/assets/Logo'
import { Dashboard } from 'scenes/dashboard/Dashboard'
import { useResizeObserver } from 'lib/hooks/useResizeObserver'
import { Link } from 'lib/lemon-ui/Link'
import clsx from 'clsx'
import { useValues } from 'kea'
import { teamLogic } from 'scenes/teamLogic'
import { useResizeObserver } from 'lib/hooks/useResizeObserver'
import { Link } from 'lib/lemon-ui/Link'
import { useEffect } from 'react'
import { Dashboard } from 'scenes/dashboard/Dashboard'
import { SessionRecordingPlayer } from 'scenes/session-recordings/player/SessionRecordingPlayer'
import { SessionRecordingPlayerMode } from 'scenes/session-recordings/player/sessionRecordingPlayerLogic'
import { teamLogic } from 'scenes/teamLogic'
import { ExportedInsight } from '~/exporter/ExportedInsight/ExportedInsight'
import { ExportedData, ExportType } from '~/exporter/types'
import { Logo } from '~/toolbar/assets/Logo'
import { DashboardPlacement } from '~/types'
import { exporterViewLogic } from './exporterViewLogic'
export function Exporter(props: ExportedData): JSX.Element {

3
frontend/src/exporter/__mocks__/Exporter.mocks.tsx
View File

@ -1,3 +1,5 @@
import { FunnelLayout, ShownAsValue } from 'lib/constants'
import {
ChartDisplayType,
DashboardTile,
@ -7,7 +9,6 @@ import {
InsightShortId,
InsightType,
} from '~/types'
import { FunnelLayout, ShownAsValue } from 'lib/constants'
export const dashboard: DashboardType = {
id: 1,

2
frontend/src/exporter/exporterViewLogic.ts
View File

@ -1,7 +1,7 @@
import { kea, path, props, selectors } from 'kea'
import { ExportedData } from './types'
import type { exporterViewLogicType } from './exporterViewLogicType'
import { ExportedData } from './types'
// This is a simple logic that is mounted by the Exporter view and then can be found by any nested callers
// This simplifies passing props everywhere.

7
frontend/src/exporter/index.tsx
View File

@ -1,10 +1,13 @@
import '~/styles'
import './Exporter.scss'
import { createRoot } from 'react-dom/client'
import { loadPostHogJS } from '~/loadPostHogJS'
import { initKea } from '~/initKea'
import { Exporter } from '~/exporter/Exporter'
import { ExportedData } from '~/exporter/types'
import { initKea } from '~/initKea'
import { loadPostHogJS } from '~/loadPostHogJS'
import { ErrorBoundary } from '../layout/ErrorBoundary'
// Disable tracking for all exports and embeds.

1
frontend/src/globals.d.ts vendored
View File

@ -1,4 +1,5 @@
import posthog from 'posthog-js'
import { ExportedData } from '~/exporter/types'
declare global {

16
frontend/src/index.tsx
View File

@ -1,16 +1,14 @@
import '~/styles'
import { createRoot } from 'react-dom/client'
import { getContext } from 'kea'
import { App } from 'scenes/App'
import { initKea } from './initKea'
import { loadPostHogJS } from './loadPostHogJS'
import { ErrorBoundary } from './layout/ErrorBoundary'
import { PostHogProvider } from 'posthog-js/react'
import posthog from 'posthog-js'
import { PostHogProvider } from 'posthog-js/react'
import { createRoot } from 'react-dom/client'
import { App } from 'scenes/App'
import { initKea } from './initKea'
import { ErrorBoundary } from './layout/ErrorBoundary'
import { loadPostHogJS } from './loadPostHogJS'
loadPostHogJS()
initKea()

12
frontend/src/initKea.ts
View File

@ -1,13 +1,13 @@
import { KeaPlugin, resetContext } from 'kea'
import { formsPlugin } from 'kea-forms'
import { loadersPlugin } from 'kea-loaders'
import { localStoragePlugin } from 'kea-localstorage'
import { routerPlugin } from 'kea-router'
import { loadersPlugin } from 'kea-loaders'
import { windowValuesPlugin } from 'kea-window-values'
import { identifierToHuman } from 'lib/utils'
import { waitForPlugin } from 'kea-waitfor'
import { lemonToast } from 'lib/lemon-ui/lemonToast'
import { subscriptionsPlugin } from 'kea-subscriptions'
import { formsPlugin } from 'kea-forms'
import { waitForPlugin } from 'kea-waitfor'
import { windowValuesPlugin } from 'kea-window-values'
import { lemonToast } from 'lib/lemon-ui/lemonToast'
import { identifierToHuman } from 'lib/utils'
/*
Actions for which we don't want to show error alerts,

5
frontend/src/layout/ErrorBoundary/ErrorBoundary.tsx
View File

@ -1,8 +1,9 @@
import { getCurrentHub, ErrorBoundary as SentryErrorBoundary } from '@sentry/react'
import './ErrorBoundary.scss'
import { ErrorBoundary as SentryErrorBoundary, getCurrentHub } from '@sentry/react'
import { HelpButton } from 'lib/components/HelpButton/HelpButton'
import { IconArrowDropDown } from 'lib/lemon-ui/icons'
import { LemonButton } from 'lib/lemon-ui/LemonButton'
import './ErrorBoundary.scss'
export function ErrorBoundary({ children }: { children: React.ReactElement }): JSX.Element {
const isSentryInitialized = !!getCurrentHub().getClient()

2
frontend/src/layout/ErrorNetwork.tsx
View File

@ -1,5 +1,5 @@
import { LemonButton } from 'lib/lemon-ui/LemonButton'
import { IconRefresh } from 'lib/lemon-ui/icons'
import { LemonButton } from 'lib/lemon-ui/LemonButton'
export function ErrorNetwork(): JSX.Element {
return (

3
frontend/src/layout/ErrorProjectUnavailable.tsx
View File

@ -1,5 +1,6 @@
import { PageHeader } from 'lib/components/PageHeader'
import { useValues } from 'kea'
import { PageHeader } from 'lib/components/PageHeader'
import { organizationLogic } from '../scenes/organizationLogic'
export function ErrorProjectUnavailable(): JSX.Element {

10
frontend/src/layout/FeaturePreviews/FeaturePreviewsModal.stories.tsx
View File

@ -1,9 +1,11 @@
import { Meta, StoryFn, StoryObj } from '@storybook/react'
import { FeaturePreviewsModal as FeaturePreviewsModalComponent } from './FeaturePreviewsModal'
import { setFeatureFlags, useStorybookMocks } from '~/mocks/browser'
import { EarlyAccessFeature } from 'posthog-js'
import { CONSTRAINED_PREVIEWS } from './featurePreviewsLogic'
import { FeatureFlagKey } from 'lib/constants'
import { EarlyAccessFeature } from 'posthog-js'
import { setFeatureFlags, useStorybookMocks } from '~/mocks/browser'
import { CONSTRAINED_PREVIEWS } from './featurePreviewsLogic'
import { FeaturePreviewsModal as FeaturePreviewsModalComponent } from './FeaturePreviewsModal'
interface StoryProps {
earlyAccessFeatures: EarlyAccessFeature[]

5
frontend/src/layout/FeaturePreviews/FeaturePreviewsModal.tsx
View File

@ -1,9 +1,10 @@
import { LemonButton, LemonDivider, LemonModal, LemonSwitch, LemonTextArea, Link } from '@posthog/lemon-ui'
import { useActions, useValues, useAsyncActions } from 'kea'
import clsx from 'clsx'
import { useActions, useAsyncActions, useValues } from 'kea'
import { SpinnerOverlay } from 'lib/lemon-ui/Spinner'
import { useLayoutEffect, useState } from 'react'
import { EnrichedEarlyAccessFeature, featurePreviewsLogic } from './featurePreviewsLogic'
import clsx from 'clsx'
export function FeaturePreviewsModal({
inline,

15
frontend/src/layout/FeaturePreviews/featurePreviewsLogic.tsx
View File

@ -1,12 +1,13 @@
import { actions, kea, reducers, path, selectors, connect, listeners } from 'kea'
import { EarlyAccessFeature, posthog } from 'posthog-js'
import { actions, connect, kea, listeners, path, reducers, selectors } from 'kea'
import { loaders } from 'kea-loaders'
import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
import { supportLogic } from 'lib/components/Support/supportLogic'
import { userLogic } from 'scenes/userLogic'
import { FEATURE_FLAGS, FeatureFlagKey } from 'lib/constants'
import type { featurePreviewsLogicType } from './featurePreviewsLogicType'
import { actionToUrl, router, urlToAction } from 'kea-router'
import { supportLogic } from 'lib/components/Support/supportLogic'
import { FEATURE_FLAGS, FeatureFlagKey } from 'lib/constants'
import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
import { EarlyAccessFeature, posthog } from 'posthog-js'
import { userLogic } from 'scenes/userLogic'
import type { featurePreviewsLogicType } from './featurePreviewsLogicType'
/** Features that can only be toggled if you fall under the `${flagKey}-preview` flag */
export const CONSTRAINED_PREVIEWS: Set<FeatureFlagKey> = new Set([FEATURE_FLAGS.POSTHOG_3000])

2
frontend/src/layout/FeaturePreviews/index.ts
View File

@ -1,2 +1,2 @@
export { FeaturePreviewsModal } from './FeaturePreviewsModal'
export { featurePreviewsLogic } from './featurePreviewsLogic'
export { FeaturePreviewsModal } from './FeaturePreviewsModal'

22
frontend/src/layout/GlobalModals.tsx
View File

@ -1,19 +1,19 @@
import { kea, path, actions, reducers, useActions, useValues } from 'kea'
import { CreateOrganizationModal } from 'scenes/organization/CreateOrganizationModal'
import { CreateProjectModal } from 'scenes/project/CreateProjectModal'
import type { globalModalsLogicType } from './GlobalModalsType'
import { FeaturePreviewsModal } from './FeaturePreviews'
import { UpgradeModal } from 'scenes/UpgradeModal'
import { LemonModal } from '@posthog/lemon-ui'
import { Setup2FA } from 'scenes/authentication/Setup2FA'
import { userLogic } from 'scenes/userLogic'
import { membersLogic } from 'scenes/organization/membersLogic'
import { actions, kea, path, reducers, useActions, useValues } from 'kea'
import { FlaggedFeature } from 'lib/components/FlaggedFeature'
import { HedgehogBuddyWithLogic } from 'lib/components/HedgehogBuddy/HedgehogBuddy'
import { Prompt } from 'lib/logic/newPrompt/Prompt'
import { Setup2FA } from 'scenes/authentication/Setup2FA'
import { CreateOrganizationModal } from 'scenes/organization/CreateOrganizationModal'
import { membersLogic } from 'scenes/organization/membersLogic'
import { CreateProjectModal } from 'scenes/project/CreateProjectModal'
import { inviteLogic } from 'scenes/settings/organization/inviteLogic'
import { InviteModal } from 'scenes/settings/organization/InviteModal'
import { HedgehogBuddyWithLogic } from 'lib/components/HedgehogBuddy/HedgehogBuddy'
import { UpgradeModal } from 'scenes/UpgradeModal'
import { userLogic } from 'scenes/userLogic'
import { FeaturePreviewsModal } from './FeaturePreviews'
import type { globalModalsLogicType } from './GlobalModalsType'
export const globalModalsLogic = kea<globalModalsLogicType>([
path(['layout', 'navigation', 'globalModalsLogic']),

11
frontend/src/layout/navigation-3000/Navigation.stories.tsx
View File

@ -1,11 +1,12 @@
import { Meta } from '@storybook/react'
import { mswDecorator, setFeatureFlags } from '~/mocks/browser'
import { useEffect } from 'react'
import { router } from 'kea-router'
import { urls } from 'scenes/urls'
import { App } from 'scenes/App'
import { EMPTY_PAGINATED_RESPONSE } from '~/mocks/handlers'
import { FEATURE_FLAGS } from 'lib/constants'
import { useEffect } from 'react'
import { App } from 'scenes/App'
import { urls } from 'scenes/urls'
import { mswDecorator, setFeatureFlags } from '~/mocks/browser'
import { EMPTY_PAGINATED_RESPONSE } from '~/mocks/handlers'
const meta: Meta = {
title: 'PostHog 3000/Navigation',

22
frontend/src/layout/navigation-3000/Navigation.tsx
View File

@ -1,18 +1,20 @@
import { CommandPalette } from 'lib/components/CommandPalette/CommandPalette'
import { useMountedLogic, useValues } from 'kea'
import { ReactNode, useEffect } from 'react'
import { Breadcrumbs } from './components/Breadcrumbs'
import { Navbar } from './components/Navbar'
import { Sidebar } from './components/Sidebar'
import './Navigation.scss'
import { themeLogic } from './themeLogic'
import { navigation3000Logic } from './navigationLogic'
import clsx from 'clsx'
import { SceneConfig } from 'scenes/sceneTypes'
import { useMountedLogic, useValues } from 'kea'
import { CommandPalette } from 'lib/components/CommandPalette/CommandPalette'
import { FlaggedFeature } from 'lib/components/FlaggedFeature'
import { FEATURE_FLAGS } from 'lib/constants'
import { SidePanel } from './sidepanel/SidePanel'
import { ReactNode, useEffect } from 'react'
import { SceneConfig } from 'scenes/sceneTypes'
import { Breadcrumbs } from './components/Breadcrumbs'
import { MinimalNavigation } from './components/MinimalNavigation'
import { Navbar } from './components/Navbar'
import { Sidebar } from './components/Sidebar'
import { navigation3000Logic } from './navigationLogic'
import { SidePanel } from './sidepanel/SidePanel'
import { themeLogic } from './themeLogic'
export function Navigation({
children,

14
frontend/src/layout/navigation-3000/components/Breadcrumbs.tsx
View File

@ -1,14 +1,16 @@
import React, { useLayoutEffect, useState } from 'react'
import './Breadcrumbs.scss'
import { LemonSkeleton } from '@posthog/lemon-ui'
import clsx from 'clsx'
import { useActions, useValues } from 'kea'
import { EditableField } from 'lib/components/EditableField/EditableField'
import { IconArrowDropDown } from 'lib/lemon-ui/icons'
import { Link } from 'lib/lemon-ui/Link'
import './Breadcrumbs.scss'
import { FinalizedBreadcrumb } from '~/types'
import clsx from 'clsx'
import { Popover } from 'lib/lemon-ui/Popover/Popover'
import React, { useLayoutEffect, useState } from 'react'
import { breadcrumbsLogic } from '~/layout/navigation/Breadcrumbs/breadcrumbsLogic'
import { LemonSkeleton } from '@posthog/lemon-ui'
import { EditableField } from 'lib/components/EditableField/EditableField'
import { FinalizedBreadcrumb } from '~/types'
const COMPACTION_DISTANCE = 44

6
frontend/src/layout/navigation-3000/components/KeyboardShortcut.tsx
View File

@ -1,7 +1,9 @@
import { isMac } from 'lib/utils'
import { HotKeyOrModifier } from '~/types'
import './KeyboardShortcut.scss'
import clsx from 'clsx'
import { isMac } from 'lib/utils'
import { HotKeyOrModifier } from '~/types'
const IS_MAC = isMac()
const KEY_TO_SYMBOL: Partial<Record<HotKeyOrModifier, string>> = {

15
frontend/src/layout/navigation-3000/components/MinimalNavigation.tsx
View File

@ -1,13 +1,14 @@
import { IconLogomark } from '@posthog/icons'
import { LemonButton, Lettermark, Popover, ProfilePicture } from '@posthog/lemon-ui'
import { useActions, useValues } from 'kea'
import { organizationLogic } from 'scenes/organizationLogic'
import { teamLogic } from 'scenes/teamLogic'
import { urls } from 'scenes/urls'
import { userLogic } from 'scenes/userLogic'
import { navigationLogic } from '~/layout/navigation/navigationLogic'
import { ProjectSwitcherOverlay } from '~/layout/navigation/ProjectSwitcher'
import { SitePopoverOverlay } from '~/layout/navigation/TopBar/SitePopover'
import { useValues, useActions } from 'kea'
import { teamLogic } from 'scenes/teamLogic'
import { navigationLogic } from '~/layout/navigation/navigationLogic'
import { userLogic } from 'scenes/userLogic'
import { IconLogomark } from '@posthog/icons'
import { urls } from 'scenes/urls'
import { organizationLogic } from 'scenes/organizationLogic'
export function MinimalNavigation(): JSX.Element {
const { user } = useValues(userLogic)

18
frontend/src/layout/navigation-3000/components/Navbar.tsx
View File

@ -1,22 +1,24 @@
import { IconAsterisk, IconDay, IconGear, IconNight, IconSearch } from '@posthog/icons'
import { LemonBadge } from '@posthog/lemon-ui'
import { useActions, useValues } from 'kea'
import { IconGear, IconDay, IconNight, IconAsterisk, IconSearch } from '@posthog/icons'
import { commandBarLogic } from 'lib/components/CommandBar/commandBarLogic'
import { Resizer } from 'lib/components/Resizer/Resizer'
import { useFeatureFlag } from 'lib/hooks/useFeatureFlag'
import { Popover } from 'lib/lemon-ui/Popover'
import { ProfilePicture } from 'lib/lemon-ui/ProfilePicture'
import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
import { useRef } from 'react'
import { Scene } from 'scenes/sceneTypes'
import { urls } from 'scenes/urls'
import { userLogic } from 'scenes/userLogic'
import { navigationLogic } from '~/layout/navigation/navigationLogic'
import { SitePopoverOverlay } from '~/layout/navigation/TopBar/SitePopover'
import { KeyboardShortcut } from '~/layout/navigation-3000/components/KeyboardShortcut'
import { navigation3000Logic } from '../navigationLogic'
import { themeLogic } from '../themeLogic'
import { NavbarButton } from './NavbarButton'
import { urls } from 'scenes/urls'
import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
import { Resizer } from 'lib/components/Resizer/Resizer'
import { useRef } from 'react'
import { commandBarLogic } from 'lib/components/CommandBar/commandBarLogic'
import { KeyboardShortcut } from '~/layout/navigation-3000/components/KeyboardShortcut'
import { useFeatureFlag } from 'lib/hooks/useFeatureFlag'
export function ThemeIcon(): JSX.Element {
const { isDarkModeOn, isThemeSyncedWithSystem } = useValues(themeLogic)

16
frontend/src/layout/navigation-3000/components/NavbarButton.tsx
View File

@ -1,13 +1,15 @@
import { LemonButton } from 'lib/lemon-ui/LemonButton'
import React, { FunctionComponent, ReactElement, useState } from 'react'
import { Tooltip } from 'lib/lemon-ui/Tooltip'
import { LemonTag } from '@posthog/lemon-ui'
import clsx from 'clsx'
import { useValues } from 'kea'
import { sceneLogic } from 'scenes/sceneLogic'
import { SidebarChangeNoticeContent, useSidebarChangeNotices } from '~/layout/navigation/SideBar/SidebarChangeNotice'
import { navigation3000Logic } from '../navigationLogic'
import { LemonTag } from '@posthog/lemon-ui'
import { useFeatureFlag } from 'lib/hooks/useFeatureFlag'
import { LemonButton } from 'lib/lemon-ui/LemonButton'
import { Tooltip } from 'lib/lemon-ui/Tooltip'
import React, { FunctionComponent, ReactElement, useState } from 'react'
import { sceneLogic } from 'scenes/sceneLogic'
import { SidebarChangeNoticeContent, useSidebarChangeNotices } from '~/layout/navigation/SideBar/SidebarChangeNotice'
import { navigation3000Logic } from '../navigationLogic'
export interface NavbarButtonProps {
identifier: string

7
frontend/src/layout/navigation-3000/components/NewItemButton.tsx
View File

@ -1,8 +1,9 @@
import { useActions, useValues } from 'kea'
import { SidebarCategory } from '../types'
import { navigation3000Logic } from '../navigationLogic'
import { LemonButton } from '@posthog/lemon-ui'
import { useActions, useValues } from 'kea'
import { IconPlus } from 'lib/lemon-ui/icons'
import { navigation3000Logic } from '../navigationLogic'
import { SidebarCategory } from '../types'
import { singularizeCategory } from './SidebarAccordion'
export function NewItemButton({ category }: { category: SidebarCategory }): JSX.Element | null {

10
frontend/src/layout/navigation-3000/components/Sidebar.stories.tsx
View File

@ -1,14 +1,16 @@
import { Meta } from '@storybook/react'
import { useActions, useValues } from 'kea'
import { FEATURE_FLAGS } from 'lib/constants'
import { useEffect } from 'react'
import { Scene } from 'scenes/sceneTypes'
import { useStorybookMocks } from '~/mocks/browser'
import { navigation3000Logic } from '../navigationLogic'
import { Sidebar } from './Sidebar'
import featureFlagsJson from '../../../scenes/feature-flags/__mocks__/feature_flags.json'
import dashboardsJson from '../../../scenes/dashboard/__mocks__/dashboards.json'
import featureFlagsJson from '../../../scenes/feature-flags/__mocks__/feature_flags.json'
import { navigation3000Logic } from '../navigationLogic'
import { SidebarNavbarItem } from '../types'
import { FEATURE_FLAGS } from 'lib/constants'
import { Sidebar } from './Sidebar'
const meta: Meta = {
title: 'PostHog 3000/Sidebar',

17
frontend/src/layout/navigation-3000/components/Sidebar.tsx
View File

@ -2,16 +2,17 @@ import { LemonButton, LemonInput } from '@posthog/lemon-ui'
import clsx from 'clsx'
import { LogicWrapper, useActions, useValues } from 'kea'
import { IconClose, IconMagnifier } from 'lib/lemon-ui/icons'
import React, { useRef, useState } from 'react'
import { navigation3000Logic } from '../navigationLogic'
import { KeyboardShortcut } from './KeyboardShortcut'
import { SidebarAccordion, pluralizeCategory } from './SidebarAccordion'
import { SidebarLogic, SidebarNavbarItem } from '../types'
import { Spinner } from 'lib/lemon-ui/Spinner'
import { useDebouncedCallback } from 'use-debounce'
import { SidebarList } from './SidebarList'
import { NewItemButton } from './NewItemButton'
import { capitalizeFirstLetter } from 'lib/utils'
import React, { useRef, useState } from 'react'
import { useDebouncedCallback } from 'use-debounce'
import { navigation3000Logic } from '../navigationLogic'
import { SidebarLogic, SidebarNavbarItem } from '../types'
import { KeyboardShortcut } from './KeyboardShortcut'
import { NewItemButton } from './NewItemButton'
import { pluralizeCategory, SidebarAccordion } from './SidebarAccordion'
import { SidebarList } from './SidebarList'
/** A small delay that prevents us from making a search request on each key press. */
const SEARCH_DEBOUNCE_MS = 300

13
frontend/src/layout/navigation-3000/components/SidebarAccordion.tsx
View File

@ -1,12 +1,13 @@
import { IconChevronRight } from 'lib/lemon-ui/icons'
import { SidebarCategory } from '../types'
import { Spinner } from 'lib/lemon-ui/Spinner'
import { SidebarList } from './SidebarList'
import { navigation3000Logic } from '../navigationLogic'
import { useActions, useValues } from 'kea'
import { NewItemButton } from './NewItemButton'
import { IconChevronRight } from 'lib/lemon-ui/icons'
import { Spinner } from 'lib/lemon-ui/Spinner'
import { capitalizeFirstLetter } from 'lib/utils'
import { navigation3000Logic } from '../navigationLogic'
import { SidebarCategory } from '../types'
import { NewItemButton } from './NewItemButton'
import { SidebarList } from './SidebarList'
interface SidebarAccordionProps {
category: SidebarCategory
}

19
frontend/src/layout/navigation-3000/components/SidebarList.tsx
View File

@ -1,19 +1,20 @@
import { Link, TZLabel } from '@posthog/apps-common'
import { LemonButton, LemonTag, lemonToast } from '@posthog/lemon-ui'
import { captureException } from '@sentry/react'
import clsx from 'clsx'
import { useActions, useAsyncActions, useValues } from 'kea'
import { isDayjs } from 'lib/dayjs'
import { IconCheckmark, IconClose, IconEllipsis } from 'lib/lemon-ui/icons'
import { BasicListItem, ExtendedListItem, ExtraListItemContext, SidebarCategory, TentativeListItem } from '../types'
import React, { useEffect, useMemo, useRef, useState } from 'react'
import { LemonMenu } from 'lib/lemon-ui/LemonMenu'
import { LemonButton, LemonTag, lemonToast } from '@posthog/lemon-ui'
import { ITEM_KEY_PART_SEPARATOR, navigation3000Logic } from '../navigationLogic'
import { captureException } from '@sentry/react'
import { KeyboardShortcut } from './KeyboardShortcut'
import { List, ListProps } from 'react-virtualized/dist/es/List'
import { LemonSkeleton } from 'lib/lemon-ui/LemonSkeleton'
import React, { useEffect, useMemo, useRef, useState } from 'react'
import { AutoSizer } from 'react-virtualized/dist/es/AutoSizer'
import { InfiniteLoader } from 'react-virtualized/dist/es/InfiniteLoader'
import { useActions, useAsyncActions, useValues } from 'kea'
import { LemonSkeleton } from 'lib/lemon-ui/LemonSkeleton'
import { List, ListProps } from 'react-virtualized/dist/es/List'
import { ITEM_KEY_PART_SEPARATOR, navigation3000Logic } from '../navigationLogic'
import { BasicListItem, ExtendedListItem, ExtraListItemContext, SidebarCategory, TentativeListItem } from '../types'
import { KeyboardShortcut } from './KeyboardShortcut'
export function SidebarList({ category }: { category: SidebarCategory }): JSX.Element {
const { normalizedActiveListItemKey, sidebarWidth, newItemInlineCategory, savingNewItem } =

36
frontend/src/layout/navigation-3000/navigationLogic.tsx
View File

@ -1,35 +1,35 @@
import { actions, connect, events, kea, listeners, path, props, reducers, selectors } from 'kea'
import { subscriptions } from 'kea-subscriptions'
import { BasicListItem, ExtendedListItem, NavbarItem, SidebarNavbarItem } from './types'
import type { navigation3000LogicType } from './navigationLogicType'
import { Scene } from 'scenes/sceneTypes'
import React from 'react'
import { captureException } from '@sentry/react'
import { lemonToast } from '@posthog/lemon-ui'
import { router } from 'kea-router'
import { sceneLogic } from 'scenes/sceneLogic'
import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
import { FEATURE_FLAGS } from 'lib/constants'
import {
IconApps,
IconChat,
IconDashboard,
IconDatabase,
IconGraph,
IconHome,
IconLive,
IconNotebook,
IconPeople,
IconPieChart,
IconRewindPlay,
IconRocket,
IconServer,
IconTestTube,
IconToggle,
IconToolbar,
IconNotebook,
IconRocket,
IconServer,
IconChat,
} from '@posthog/icons'
import { lemonToast } from '@posthog/lemon-ui'
import { captureException } from '@sentry/react'
import { actions, connect, events, kea, listeners, path, props, reducers, selectors } from 'kea'
import { router } from 'kea-router'
import { subscriptions } from 'kea-subscriptions'
import { FEATURE_FLAGS } from 'lib/constants'
import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
import { isNotNil } from 'lib/utils'
import React from 'react'
import { sceneLogic } from 'scenes/sceneLogic'
import { Scene } from 'scenes/sceneTypes'
import { urls } from 'scenes/urls'
import type { navigation3000LogicType } from './navigationLogicType'
import { dashboardsSidebarLogic } from './sidebars/dashboards'
import { dataManagementSidebarLogic } from './sidebars/dataManagement'
import { experimentsSidebarLogic } from './sidebars/experiments'
@ -37,7 +37,7 @@ import { featureFlagsSidebarLogic } from './sidebars/featureFlags'
import { insightsSidebarLogic } from './sidebars/insights'
import { personsAndGroupsSidebarLogic } from './sidebars/personsAndGroups'
import { toolbarSidebarLogic } from './sidebars/toolbar'
import { isNotNil } from 'lib/utils'
import { BasicListItem, ExtendedListItem, NavbarItem, SidebarNavbarItem } from './types'
/** Multi-segment item keys are joined using this separator for easy comparisons. */
export const ITEM_KEY_PART_SEPARATOR = '::'

22
frontend/src/layout/navigation-3000/sidebars/annotations.tsx
View File

@ -1,16 +1,18 @@
import { connect, kea, path, selectors } from 'kea'
import { sceneLogic } from 'scenes/sceneLogic'
import { annotationsModel } from '~/models/annotationsModel'
import { SidebarCategory, ExtendedListItem } from '../types'
import type { annotationsSidebarLogicType } from './annotationsType'
import Fuse from 'fuse.js'
import { subscriptions } from 'kea-subscriptions'
import { navigation3000Logic } from '~/layout/navigation-3000/navigationLogic'
import { FuseSearchMatch } from './utils'
import { AnnotationType } from '~/types'
import { urls } from '@posthog/apps-common'
import Fuse from 'fuse.js'
import { connect, kea, path, selectors } from 'kea'
import { subscriptions } from 'kea-subscriptions'
import { AnnotationModal } from 'scenes/annotations/AnnotationModal'
import { annotationModalLogic } from 'scenes/annotations/annotationModalLogic'
import { sceneLogic } from 'scenes/sceneLogic'
import { navigation3000Logic } from '~/layout/navigation-3000/navigationLogic'
import { annotationsModel } from '~/models/annotationsModel'
import { AnnotationType } from '~/types'
import { ExtendedListItem, SidebarCategory } from '../types'
import type { annotationsSidebarLogicType } from './annotationsType'
import { FuseSearchMatch } from './utils'
const fuse = new Fuse<AnnotationType>([], {
keys: [{ name: 'content', weight: 2 }, 'date_marker'],

18
frontend/src/layout/navigation-3000/sidebars/cohorts.ts
View File

@ -1,17 +1,19 @@
import { api } from '@posthog/apps-common'
import Fuse from 'fuse.js'
import { connect, kea, path, selectors } from 'kea'
import { subscriptions } from 'kea-subscriptions'
import { dayjs } from 'lib/dayjs'
import { pluralize } from 'lib/utils'
import { sceneLogic } from 'scenes/sceneLogic'
import { Scene } from 'scenes/sceneTypes'
import { urls } from 'scenes/urls'
import { ExtendedListItem, SidebarCategory } from '../types'
import type { cohortsSidebarLogicType } from './cohortsType'
import Fuse from 'fuse.js'
import { CohortType } from '~/types'
import { subscriptions } from 'kea-subscriptions'
import { navigation3000Logic } from '~/layout/navigation-3000/navigationLogic'
import { cohortsModel } from '~/models/cohortsModel'
import { pluralize } from 'lib/utils'
import { dayjs } from 'lib/dayjs'
import { api } from '@posthog/apps-common'
import { CohortType } from '~/types'
import { ExtendedListItem, SidebarCategory } from '../types'
import type { cohortsSidebarLogicType } from './cohortsType'
import { FuseSearchMatch } from './utils'
const fuse = new Fuse<CohortType>([], {

26
frontend/src/layout/navigation-3000/sidebars/dashboards.tsx
View File

@ -1,22 +1,24 @@
import { connect, kea, path, selectors } from 'kea'
import { sceneLogic } from 'scenes/sceneLogic'
import { Scene } from 'scenes/sceneTypes'
import { urls } from 'scenes/urls'
import { dashboardsModel } from '~/models/dashboardsModel'
import { SidebarCategory, BasicListItem } from '../types'
import type { dashboardsSidebarLogicType } from './dashboardsType'
import Fuse from 'fuse.js'
import { DashboardBasicType, DashboardType } from '~/types'
import { connect, kea, path, selectors } from 'kea'
import { subscriptions } from 'kea-subscriptions'
import { DashboardMode } from '~/types'
import { DashboardEventSource } from 'lib/utils/eventUsageLogic'
import { dashboardLogic } from 'scenes/dashboard/dashboardLogic'
import { deleteDashboardLogic } from 'scenes/dashboard/deleteDashboardLogic'
import { duplicateDashboardLogic } from 'scenes/dashboard/duplicateDashboardLogic'
import { navigation3000Logic } from '~/layout/navigation-3000/navigationLogic'
import { FuseSearchMatch } from './utils'
import { NewDashboardModal } from 'scenes/dashboard/NewDashboardModal'
import { newDashboardLogic } from 'scenes/dashboard/newDashboardLogic'
import { NewDashboardModal } from 'scenes/dashboard/NewDashboardModal'
import { sceneLogic } from 'scenes/sceneLogic'
import { Scene } from 'scenes/sceneTypes'
import { urls } from 'scenes/urls'
import { navigation3000Logic } from '~/layout/navigation-3000/navigationLogic'
import { dashboardsModel } from '~/models/dashboardsModel'
import { DashboardBasicType, DashboardType } from '~/types'
import { DashboardMode } from '~/types'
import { BasicListItem, SidebarCategory } from '../types'
import type { dashboardsSidebarLogicType } from './dashboardsType'
import { FuseSearchMatch } from './utils'
const fuse = new Fuse<DashboardType>([], {
keys: [{ name: 'name', weight: 2 }, 'description', 'tags'],

16
frontend/src/layout/navigation-3000/sidebars/dataManagement.ts
View File

@ -1,17 +1,19 @@
import { actions, afterMount, connect, kea, path, selectors } from 'kea'
import { loaders } from 'kea-loaders'
import { subscriptions } from 'kea-subscriptions'
import api from 'lib/api'
import { getPropertyLabel } from 'lib/taxonomy'
import { actionsFuse, actionsLogic } from 'scenes/actions/actionsLogic'
import { sceneLogic } from 'scenes/sceneLogic'
import { Scene } from 'scenes/sceneTypes'
import { urls } from 'scenes/urls'
import { SidebarCategory, BasicListItem } from '../types'
import { navigation3000Logic } from '~/layout/navigation-3000/navigationLogic'
import { ActionType, EventDefinition, PropertyDefinition, ReplayTabs } from '~/types'
import { BasicListItem, SidebarCategory } from '../types'
import type { dataManagementSidebarLogicType } from './dataManagementType'
import { findSearchTermInItemName } from './utils'
import { loaders } from 'kea-loaders'
import { ActionType, EventDefinition, PropertyDefinition, ReplayTabs } from '~/types'
import api from 'lib/api'
import { subscriptions } from 'kea-subscriptions'
import { getPropertyLabel } from 'lib/taxonomy'
import { actionsFuse, actionsLogic } from 'scenes/actions/actionsLogic'
import { FuseSearchMatch } from './utils'
export const dataManagementSidebarLogic = kea<dataManagementSidebarLogicType>([

16
frontend/src/layout/navigation-3000/sidebars/experiments.ts
View File

@ -1,16 +1,18 @@
import Fuse from 'fuse.js'
import { connect, kea, path, selectors } from 'kea'
import { subscriptions } from 'kea-subscriptions'
import { dayjs } from 'lib/dayjs'
import { experimentsLogic, getExperimentStatus } from 'scenes/experiments/experimentsLogic'
import { sceneLogic } from 'scenes/sceneLogic'
import { Scene } from 'scenes/sceneTypes'
import { urls } from 'scenes/urls'
import { SidebarCategory, ExtendedListItem } from '../types'
import Fuse from 'fuse.js'
import { subscriptions } from 'kea-subscriptions'
import { navigation3000Logic } from '../navigationLogic'
import { FuseSearchMatch } from './utils'
import { Experiment, ProgressStatus } from '~/types'
import { navigation3000Logic } from '../navigationLogic'
import { ExtendedListItem, SidebarCategory } from '../types'
import type { experimentsSidebarLogicType } from './experimentsType'
import { experimentsLogic, getExperimentStatus } from 'scenes/experiments/experimentsLogic'
import { dayjs } from 'lib/dayjs'
import { FuseSearchMatch } from './utils'
const fuse = new Fuse<Experiment>([], {
keys: [{ name: 'name', weight: 2 }, 'description'],

26
frontend/src/layout/navigation-3000/sidebars/featureFlags.tsx
View File

@ -1,22 +1,24 @@
import { dayjs } from 'lib/dayjs'
import Fuse from 'fuse.js'
import { connect, kea, path, selectors } from 'kea'
import { subscriptions } from 'kea-subscriptions'
import { dayjs } from 'lib/dayjs'
import { copyToClipboard } from 'lib/utils/copyToClipboard'
import { deleteWithUndo } from 'lib/utils/deleteWithUndo'
import { featureFlagLogic } from 'scenes/feature-flags/featureFlagLogic'
import { groupFilters } from 'scenes/feature-flags/FeatureFlags'
import { featureFlagsLogic } from 'scenes/feature-flags/featureFlagsLogic'
import { sceneLogic } from 'scenes/sceneLogic'
import { Scene } from 'scenes/sceneTypes'
import { urls } from 'scenes/urls'
import { SidebarCategory, ExtendedListItem } from '../types'
import type { featureFlagsSidebarLogicType } from './featureFlagsType'
import Fuse from 'fuse.js'
import { FeatureFlagType } from '~/types'
import { subscriptions } from 'kea-subscriptions'
import { copyToClipboard } from 'lib/utils/copyToClipboard'
import { deleteWithUndo } from 'lib/utils/deleteWithUndo'
import { teamLogic } from 'scenes/teamLogic'
import { featureFlagLogic } from 'scenes/feature-flags/featureFlagLogic'
import { navigation3000Logic } from '../navigationLogic'
import { FuseSearchMatch } from './utils'
import { urls } from 'scenes/urls'
import { groupsModel } from '~/models/groupsModel'
import { FeatureFlagType } from '~/types'
import { navigation3000Logic } from '../navigationLogic'
import { ExtendedListItem, SidebarCategory } from '../types'
import type { featureFlagsSidebarLogicType } from './featureFlagsType'
import { FuseSearchMatch } from './utils'
const fuse = new Fuse<FeatureFlagType>([], {
// Note: For feature flags `name` is the description field

18
frontend/src/layout/navigation-3000/sidebars/insights.ts
View File

@ -1,18 +1,20 @@
import { api } from '@posthog/apps-common'
import { afterMount, connect, kea, listeners, path, reducers, selectors } from 'kea'
import { subscriptions } from 'kea-subscriptions'
import { deleteWithUndo } from 'lib/utils/deleteWithUndo'
import { INSIGHTS_PER_PAGE, savedInsightsLogic } from 'scenes/saved-insights/savedInsightsLogic'
import { sceneLogic } from 'scenes/sceneLogic'
import { Scene } from 'scenes/sceneTypes'
import { teamLogic } from 'scenes/teamLogic'
import { urls } from 'scenes/urls'
import { SidebarCategory, BasicListItem } from '../types'
import { InsightModel } from '~/types'
import { subscriptions } from 'kea-subscriptions'
import { navigation3000Logic } from '~/layout/navigation-3000/navigationLogic'
import { INSIGHTS_PER_PAGE, savedInsightsLogic } from 'scenes/saved-insights/savedInsightsLogic'
import { insightsModel } from '~/models/insightsModel'
import { InsightModel } from '~/types'
import { BasicListItem, SidebarCategory } from '../types'
import type { insightsSidebarLogicType } from './insightsType'
import { findSearchTermInItemName } from './utils'
import { deleteWithUndo } from 'lib/utils/deleteWithUndo'
import { teamLogic } from 'scenes/teamLogic'
import { api } from '@posthog/apps-common'
import { insightsModel } from '~/models/insightsModel'
export const insightsSidebarLogic = kea<insightsSidebarLogicType>([
path(['layout', 'navigation-3000', 'sidebars', 'insightsSidebarLogic']),

24
frontend/src/layout/navigation-3000/sidebars/personsAndGroups.ts
View File

@ -1,19 +1,21 @@
import { urls } from '@posthog/apps-common'
import { afterMount, connect, kea, listeners, path, reducers, selectors } from 'kea'
import { combineUrl } from 'kea-router'
import { subscriptions } from 'kea-subscriptions'
import { groupsListLogic, GroupsPaginatedResponse } from 'scenes/groups/groupsListLogic'
import { groupDisplayId } from 'scenes/persons/GroupActorDisplay'
import { asDisplay, asLink } from 'scenes/persons/person-utils'
import { personsLogic } from 'scenes/persons/personsLogic'
import { sceneLogic } from 'scenes/sceneLogic'
import { Scene } from 'scenes/sceneTypes'
import type { personsAndGroupsSidebarLogicType } from './personsAndGroupsType'
import { personsLogic } from 'scenes/persons/personsLogic'
import { subscriptions } from 'kea-subscriptions'
import { navigation3000Logic } from '../navigationLogic'
import { SidebarCategory, BasicListItem } from '../types'
import { urls } from '@posthog/apps-common'
import { findSearchTermInItemName } from './utils'
import { groupsModel } from '~/models/groupsModel'
import { GroupsPaginatedResponse, groupsListLogic } from 'scenes/groups/groupsListLogic'
import { groupDisplayId } from 'scenes/persons/GroupActorDisplay'
import { combineUrl } from 'kea-router'
import { PersonType } from '~/types'
import { asDisplay, asLink } from 'scenes/persons/person-utils'
import { navigation3000Logic } from '../navigationLogic'
import { BasicListItem, SidebarCategory } from '../types'
import type { personsAndGroupsSidebarLogicType } from './personsAndGroupsType'
import { findSearchTermInItemName } from './utils'
export const personsAndGroupsSidebarLogic = kea<personsAndGroupsSidebarLogicType>([
path(['layout', 'navigation-3000', 'sidebars', 'personsAndGroupsSidebarLogic']),

21
frontend/src/layout/navigation-3000/sidebars/toolbar.ts
View File

@ -1,21 +1,22 @@
import { connect, kea, path, selectors } from 'kea'
import { sceneLogic } from 'scenes/sceneLogic'
import { Scene } from 'scenes/sceneTypes'
import { urls } from 'scenes/urls'
import { SidebarCategory, BasicListItem } from '../types'
import Fuse from 'fuse.js'
import { connect, kea, path, selectors } from 'kea'
import { subscriptions } from 'kea-subscriptions'
import { navigation3000Logic } from '~/layout/navigation-3000/navigationLogic'
import { FuseSearchMatch } from './utils'
import {
authorizedUrlListLogic,
AuthorizedUrlListType,
KeyedAppUrl,
authorizedUrlListLogic,
validateProposedUrl,
} from 'lib/components/AuthorizedUrlList/authorizedUrlListLogic'
import type { toolbarSidebarLogicType } from './toolbarType'
import { sceneLogic } from 'scenes/sceneLogic'
import { Scene } from 'scenes/sceneTypes'
import { teamLogic } from 'scenes/teamLogic'
import { urls } from 'scenes/urls'
import { navigation3000Logic } from '~/layout/navigation-3000/navigationLogic'
import { BasicListItem, SidebarCategory } from '../types'
import type { toolbarSidebarLogicType } from './toolbarType'
import { FuseSearchMatch } from './utils'
const fuse = new Fuse<KeyedAppUrl>([], {
keys: ['url'],

21
frontend/src/layout/navigation-3000/sidepanel/SidePanel.tsx
View File

@ -1,18 +1,21 @@
import { LemonButton } from '@posthog/lemon-ui'
import './SidePanel.scss'
import { useActions, useValues } from 'kea'
import { sidePanelLogic } from './sidePanelLogic'
import { IconGear, IconInfo, IconNotebook, IconSupport } from '@posthog/icons'
import { LemonButton } from '@posthog/lemon-ui'
import clsx from 'clsx'
import { useActions, useValues } from 'kea'
import { Resizer } from 'lib/components/Resizer/Resizer'
import { resizerLogic, ResizerLogicProps } from 'lib/components/Resizer/resizerLogic'
import { useRef } from 'react'
import { ResizerLogicProps, resizerLogic } from 'lib/components/Resizer/resizerLogic'
import { IconNotebook, IconInfo, IconSupport, IconGear } from '@posthog/icons'
import { SidePanelDocs } from './panels/SidePanelDocs'
import { SidePanelSupport } from './panels/SidePanelSupport'
import { NotebookPanel } from 'scenes/notebooks/NotebookPanel/NotebookPanel'
import { SidePanelActivation, SidePanelActivationIcon } from './panels/SidePanelActivation'
import { SidePanelSettings } from './panels/SidePanelSettings'
import { SidePanelTab } from '~/types'
import { SidePanelActivation, SidePanelActivationIcon } from './panels/SidePanelActivation'
import { SidePanelDocs } from './panels/SidePanelDocs'
import { SidePanelSettings } from './panels/SidePanelSettings'
import { SidePanelSupport } from './panels/SidePanelSupport'
import { sidePanelLogic } from './sidePanelLogic'
import { sidePanelStateLogic } from './sidePanelStateLogic'
export const SidePanelTabs: Record<SidePanelTab, { label: string; Icon: any; Content: any }> = {

1
frontend/src/layout/navigation-3000/sidepanel/components/SidePanelPane.tsx
View File

@ -1,6 +1,7 @@
import { LemonButton, Tooltip } from '@posthog/lemon-ui'
import { useActions } from 'kea'
import { IconClose } from 'lib/lemon-ui/icons'
import { sidePanelStateLogic } from '../sidePanelStateLogic'
export function SidePanelPaneHeader({ children }: { children: React.ReactNode }): JSX.Element {

4
frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelActivation.tsx
View File

@ -1,9 +1,9 @@
import { useValues } from 'kea'
import { activationLogic, ActivationTaskType } from 'lib/components/ActivationSidebar/activationLogic'
import { ActivationTask } from 'lib/components/ActivationSidebar/ActivationSidebar'
import { ActivationTaskType, activationLogic } from 'lib/components/ActivationSidebar/activationLogic'
import { ProfessorHog } from 'lib/components/hedgehogs'
import { LemonProgressCircle } from 'lib/lemon-ui/LemonProgressCircle'
import { LemonIconProps } from 'lib/lemon-ui/icons'
import { LemonProgressCircle } from 'lib/lemon-ui/LemonProgressCircle'
export const SidePanelActivation = (): JSX.Element => {
const { activeTasks, completionPercent, completedTasks } = useValues(activationLogic)

13
frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelDocs.tsx
View File

@ -1,11 +1,12 @@
import { useActions, useValues } from 'kea'
import { POSTHOG_WEBSITE_ORIGIN, sidePanelDocsLogic } from './sidePanelDocsLogic'
import { useEffect, useRef, useState } from 'react'
import clsx from 'clsx'
import { SidePanelPaneHeader } from '../components/SidePanelPane'
import { LemonButton, LemonSkeleton } from '@posthog/lemon-ui'
import { IconExternal } from '@posthog/icons'
import { LemonButton, LemonSkeleton } from '@posthog/lemon-ui'
import clsx from 'clsx'
import { useActions, useValues } from 'kea'
import { useEffect, useRef, useState } from 'react'
import { themeLogic } from '../../themeLogic'
import { SidePanelPaneHeader } from '../components/SidePanelPane'
import { POSTHOG_WEBSITE_ORIGIN, sidePanelDocsLogic } from './sidePanelDocsLogic'
function SidePanelDocsSkeleton(): JSX.Element {
return (

17
frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelSettings.tsx
View File

@ -1,13 +1,14 @@
import { useActions, useValues } from 'kea'
import { sidePanelSettingsLogic } from './sidePanelSettingsLogic'
import { Settings } from 'scenes/settings/Settings'
import { LemonButton } from '@posthog/lemon-ui'
import { urls } from 'scenes/urls'
import { settingsLogic } from 'scenes/settings/settingsLogic'
import { useEffect } from 'react'
import { SidePanelPaneHeader } from '../components/SidePanelPane'
import { IconExternal } from '@posthog/icons'
import { LemonButton } from '@posthog/lemon-ui'
import { useActions, useValues } from 'kea'
import { useEffect } from 'react'
import { Settings } from 'scenes/settings/Settings'
import { settingsLogic } from 'scenes/settings/settingsLogic'
import { SettingsLogicProps } from 'scenes/settings/types'
import { urls } from 'scenes/urls'
import { SidePanelPaneHeader } from '../components/SidePanelPane'
import { sidePanelSettingsLogic } from './sidePanelSettingsLogic'
export const SidePanelSettings = (): JSX.Element => {
const { settings } = useValues(sidePanelSettingsLogic)

6
frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelSupport.tsx
View File

@ -1,11 +1,13 @@
import { LemonDivider } from '@posthog/lemon-ui'
import { useActions, useValues } from 'kea'
import { SupportForm, SupportFormButtons } from 'lib/components/Support/SupportForm'
import { supportLogic } from 'lib/components/Support/supportLogic'
import { useEffect } from 'react'
import { LemonDivider } from '@posthog/lemon-ui'
import { sidePanelStateLogic } from '../sidePanelStateLogic'
import { SidePanelTab } from '~/types'
import { sidePanelStateLogic } from '../sidePanelStateLogic'
export const SidePanelSupport = (): JSX.Element => {
const { closeSidePanel } = useActions(sidePanelStateLogic)
const { selectedTab } = useValues(sidePanelStateLogic)

11
frontend/src/layout/navigation-3000/sidepanel/panels/sidePanelDocsLogic.ts
View File

@ -1,10 +1,11 @@
import { actions, kea, reducers, path, listeners, connect, selectors } from 'kea'
import type { sidePanelDocsLogicType } from './sidePanelDocsLogicType'
import { sidePanelStateLogic } from '../sidePanelStateLogic'
import { SidePanelTab } from '~/types'
import { actions, connect, kea, listeners, path, reducers, selectors } from 'kea'
import { router } from 'kea-router'
import { SidePanelTab } from '~/types'
import { sidePanelStateLogic } from '../sidePanelStateLogic'
import type { sidePanelDocsLogicType } from './sidePanelDocsLogicType'
export const POSTHOG_WEBSITE_ORIGIN = 'https://posthog.com'
const sanitizePath = (path: string): string => {

17
frontend/src/layout/navigation-3000/sidepanel/panels/sidePanelSettingsLogic.tsx
View File

@ -1,14 +1,15 @@
import { actions, kea, reducers, path, listeners, connect } from 'kea'
import { Settings } from 'scenes/settings/Settings'
import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
import { FEATURE_FLAGS } from 'lib/constants'
import { LemonDialog } from '@posthog/lemon-ui'
import type { sidePanelSettingsLogicType } from './sidePanelSettingsLogicType'
import { sidePanelStateLogic } from '../sidePanelStateLogic'
import { SidePanelTab } from '~/types'
import { actions, connect, kea, listeners, path, reducers } from 'kea'
import { FEATURE_FLAGS } from 'lib/constants'
import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
import { Settings } from 'scenes/settings/Settings'
import { SettingsLogicProps } from 'scenes/settings/types'
import { SidePanelTab } from '~/types'
import { sidePanelStateLogic } from '../sidePanelStateLogic'
import type { sidePanelSettingsLogicType } from './sidePanelSettingsLogicType'
export const sidePanelSettingsLogic = kea<sidePanelSettingsLogicType>([
path(['scenes', 'navigation', 'sidepanel', 'sidePanelSettingsLogic']),
connect({

13
frontend/src/layout/navigation-3000/sidepanel/sidePanelLogic.tsx
View File

@ -1,11 +1,12 @@
import { kea, path, selectors, connect } from 'kea'
import { connect, kea, path, selectors } from 'kea'
import { activationLogic } from 'lib/components/ActivationSidebar/activationLogic'
import { FEATURE_FLAGS } from 'lib/constants'
import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
import { SidePanelTab } from '~/types'
import type { sidePanelLogicType } from './sidePanelLogicType'
import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
import { FEATURE_FLAGS } from 'lib/constants'
import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
import { activationLogic } from 'lib/components/ActivationSidebar/activationLogic'
import { SidePanelTab } from '~/types'
import { sidePanelStateLogic } from './sidePanelStateLogic'
export const sidePanelLogic = kea<sidePanelLogicType>([

1
frontend/src/layout/navigation-3000/sidepanel/sidePanelStateLogic.tsx
View File

@ -1,4 +1,5 @@
import { actions, kea, listeners, path, reducers } from 'kea'
import { SidePanelTab } from '~/types'
import type { sidePanelStateLogicType } from './sidePanelStateLogicType'

2
frontend/src/layout/navigation-3000/themeLogic.ts
View File

@ -2,9 +2,9 @@ import { actions, events, kea, path, reducers, selectors } from 'kea'
import { subscriptions } from 'kea-subscriptions'
import { FEATURE_FLAGS } from 'lib/constants'
import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
import { sceneLogic } from 'scenes/sceneLogic'
import type { themeLogicType } from './themeLogicType'
import { sceneLogic } from 'scenes/sceneLogic'
export const themeLogic = kea<themeLogicType>([
path(['layout', 'navigation-3000', 'themeLogic']),

13
frontend/src/layout/navigation/Breadcrumbs/Breadcrumbs.tsx
View File

@ -1,12 +1,15 @@
import React, { useState } from 'react'
import './Breadcrumbs.scss'
import clsx from 'clsx'
import { useValues } from 'kea'
import { IconArrowDropDown, IconChevronRight } from 'lib/lemon-ui/icons'
import { Link } from 'lib/lemon-ui/Link'
import './Breadcrumbs.scss'
import { breadcrumbsLogic } from './breadcrumbsLogic'
import { Breadcrumb as IBreadcrumb } from '~/types'
import clsx from 'clsx'
import { Popover } from 'lib/lemon-ui/Popover/Popover'
import React, { useState } from 'react'
import { Breadcrumb as IBreadcrumb } from '~/types'
import { breadcrumbsLogic } from './breadcrumbsLogic'
function Breadcrumb({ breadcrumb, index }: { breadcrumb: IBreadcrumb; index: number }): JSX.Element {
const [popoverShown, setPopoverShown] = useState(false)

10
frontend/src/layout/navigation/Breadcrumbs/breadcrumbsLogic.test.ts
View File

@ -1,10 +1,12 @@
import { breadcrumbsLogic } from './breadcrumbsLogic'
import { initKeaTests } from '~/test/init'
import { expectLogic } from 'kea-test-utils'
import { router } from 'kea-router'
import { urls } from 'scenes/urls'
import { expectLogic } from 'kea-test-utils'
import { sceneLogic } from 'scenes/sceneLogic'
import { Scene } from 'scenes/sceneTypes'
import { urls } from 'scenes/urls'
import { initKeaTests } from '~/test/init'
import { breadcrumbsLogic } from './breadcrumbsLogic'
const blankScene = (): any => ({ scene: { component: () => null, logic: null } })
const scenes: any = { [Scene.SavedInsights]: blankScene, [Scene.Dashboards]: blankScene }

23
frontend/src/layout/navigation/Breadcrumbs/breadcrumbsLogic.tsx
View File

@ -1,18 +1,21 @@
import { actions, connect, kea, listeners, path, props, reducers, selectors } from 'kea'
import { organizationLogic } from 'scenes/organizationLogic'
import { teamLogic } from 'scenes/teamLogic'
import './Breadcrumbs.scss'
import type { breadcrumbsLogicType } from './breadcrumbsLogicType'
import { sceneLogic } from 'scenes/sceneLogic'
import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
import { identifierToHuman, objectsEqual, stripHTTP } from 'lib/utils'
import { userLogic } from 'scenes/userLogic'
import { actions, connect, kea, listeners, path, props, reducers, selectors } from 'kea'
import { subscriptions } from 'kea-subscriptions'
import { Lettermark } from 'lib/lemon-ui/Lettermark'
import { ProfilePicture } from 'lib/lemon-ui/ProfilePicture'
import { ProjectSwitcherOverlay } from '~/layout/navigation/ProjectSwitcher'
import { identifierToHuman, objectsEqual, stripHTTP } from 'lib/utils'
import { organizationLogic } from 'scenes/organizationLogic'
import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
import { sceneLogic } from 'scenes/sceneLogic'
import { teamLogic } from 'scenes/teamLogic'
import { userLogic } from 'scenes/userLogic'
import { OrganizationSwitcherOverlay } from '~/layout/navigation/OrganizationSwitcher'
import { ProjectSwitcherOverlay } from '~/layout/navigation/ProjectSwitcher'
import { Breadcrumb, FinalizedBreadcrumb } from '~/types'
import { subscriptions } from 'kea-subscriptions'
import type { breadcrumbsLogicType } from './breadcrumbsLogicType'
export const breadcrumbsLogic = kea<breadcrumbsLogicType>([
path(['layout', 'navigation', 'Breadcrumbs', 'breadcrumbsLogic']),

11
frontend/src/layout/navigation/Navigation.stories.tsx
View File

@ -1,12 +1,13 @@
import { Meta } from '@storybook/react'
import { TopBar } from './TopBar/TopBar'
import { SideBar } from './SideBar/SideBar'
import { PageHeader } from 'lib/components/PageHeader'
import { LemonButton, LemonTable } from '@posthog/lemon-ui'
import { Meta } from '@storybook/react'
import { useActions } from 'kea'
import { navigationLogic } from './navigationLogic'
import { PageHeader } from 'lib/components/PageHeader'
import { useEffect } from 'react'
import { navigationLogic } from './navigationLogic'
import { SideBar } from './SideBar/SideBar'
import { TopBar } from './TopBar/TopBar'
const meta: Meta = {
title: 'Layout/Navigation',
parameters: {

3
frontend/src/layout/navigation/Navigation.tsx
View File

@ -1,11 +1,12 @@
import clsx from 'clsx'
import { BillingAlertsV2 } from 'lib/components/BillingAlertsV2'
import { ReactNode } from 'react'
import { SceneConfig } from 'scenes/sceneTypes'
import { Breadcrumbs } from './Breadcrumbs/Breadcrumbs'
import { ProjectNotice } from './ProjectNotice'
import { SideBar } from './SideBar/SideBar'
import { TopBar } from './TopBar/TopBar'
import { ReactNode } from 'react'
export function Navigation({
children,

4
frontend/src/layout/navigation/OrganizationSwitcher.tsx
View File

@ -9,9 +9,11 @@ import { organizationLogic } from 'scenes/organizationLogic'
import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
import { sceneLogic } from 'scenes/sceneLogic'
import { userLogic } from 'scenes/userLogic'
import { AvailableFeature, OrganizationBasicType } from '~/types'
import { navigationLogic } from './navigationLogic'
import { globalModalsLogic } from '../GlobalModals'
import { navigationLogic } from './navigationLogic'
export function AccessLevelIndicator({ organization }: { organization: OrganizationBasicType }): JSX.Element {
return (

16
frontend/src/layout/navigation/ProjectNotice.tsx
View File

@ -1,16 +1,18 @@
import { useActions, useValues } from 'kea'
import { Link } from 'lib/lemon-ui/Link'
import { navigationLogic, ProjectNoticeVariant } from './navigationLogic'
import { inviteLogic } from 'scenes/settings/organization/inviteLogic'
import { LemonBanner } from 'lib/lemon-ui/LemonBanner'
import { IconPlus, IconSettings } from 'lib/lemon-ui/icons'
import { LemonBanner } from 'lib/lemon-ui/LemonBanner'
import { LemonBannerAction } from 'lib/lemon-ui/LemonBanner/LemonBanner'
import { userLogic } from 'scenes/userLogic'
import { organizationLogic } from 'scenes/organizationLogic'
import { urls } from 'scenes/urls'
import { Link } from 'lib/lemon-ui/Link'
import { verifyEmailLogic } from 'scenes/authentication/signup/verify-email/verifyEmailLogic'
import { organizationLogic } from 'scenes/organizationLogic'
import { inviteLogic } from 'scenes/settings/organization/inviteLogic'
import { urls } from 'scenes/urls'
import { userLogic } from 'scenes/userLogic'
import { ProductKey } from '~/types'
import { navigationLogic, ProjectNoticeVariant } from './navigationLogic'
interface ProjectNoticeBlueprint {
message: JSX.Element | string
action?: LemonBannerAction

2
frontend/src/layout/navigation/ProjectSwitcher.tsx
View File

@ -9,7 +9,9 @@ import { sceneLogic } from 'scenes/sceneLogic'
import { isAuthenticatedTeam, teamLogic } from 'scenes/teamLogic'
import { urls } from 'scenes/urls'
import { userLogic } from 'scenes/userLogic'
import { AvailableFeature, TeamBasicType } from '~/types'
import { globalModalsLogic } from '../GlobalModals'
export function ProjectName({ team }: { team: TeamBasicType }): JSX.Element {

11
frontend/src/layout/navigation/SideBar/PageButton.tsx
View File

@ -1,12 +1,13 @@
import { useActions, useValues } from 'kea'
import { sceneLogic } from 'scenes/sceneLogic'
import { navigationLogic } from '~/layout/navigation/navigationLogic'
import { dashboardsModel } from '~/models/dashboardsModel'
import { Scene } from 'scenes/sceneTypes'
import { LemonButton, LemonButtonProps, LemonButtonWithSideAction, SideAction } from 'lib/lemon-ui/LemonButton'
import { sceneConfigurations } from 'scenes/scenes'
import { LemonTag } from 'lib/lemon-ui/LemonTag/LemonTag'
import { sceneLogic } from 'scenes/sceneLogic'
import { sceneConfigurations } from 'scenes/scenes'
import { Scene } from 'scenes/sceneTypes'
import { navigationLogic } from '~/layout/navigation/navigationLogic'
import { SidebarChangeNoticeTooltip } from '~/layout/navigation/SideBar/SidebarChangeNotice'
import { dashboardsModel } from '~/models/dashboardsModel'
export interface PageButtonProps extends Pick<LemonButtonProps, 'icon' | 'onClick' | 'to'> {
/** Used for highlighting the active scene. `identifier` of type number means dashboard ID instead of scene. */

41
frontend/src/layout/navigation/SideBar/SideBar.tsx
View File

@ -1,8 +1,12 @@
import './SideBar.scss'
import clsx from 'clsx'
import { useActions, useValues } from 'kea'
import { Link } from 'lib/lemon-ui/Link'
import { useState } from 'react'
import { ProjectName, ProjectSwitcherOverlay } from '~/layout/navigation/ProjectSwitcher'
import { ActivationSidebar } from 'lib/components/ActivationSidebar/ActivationSidebar'
import { authorizedUrlListLogic, AuthorizedUrlListType } from 'lib/components/AuthorizedUrlList/authorizedUrlListLogic'
import { DebugNotice } from 'lib/components/DebugNotice'
import { FlaggedFeature } from 'lib/components/FlaggedFeature'
import { FEATURE_FLAGS } from 'lib/constants'
import {
IconApps,
IconBarChart,
@ -25,8 +29,22 @@ import {
IconUnverifiedEvent,
IconWeb,
} from 'lib/lemon-ui/icons'
import { LemonButton } from 'lib/lemon-ui/LemonButton'
import { LemonDivider } from 'lib/lemon-ui/LemonDivider'
import { Lettermark } from 'lib/lemon-ui/Lettermark'
import { Link } from 'lib/lemon-ui/Link'
import { Spinner } from 'lib/lemon-ui/Spinner/Spinner'
import { Tooltip } from 'lib/lemon-ui/Tooltip'
import { useState } from 'react'
import { frontendAppsLogic } from 'scenes/apps/frontendAppsLogic'
import { IconNotebook } from 'scenes/notebooks/IconNotebook'
import { NotebookPopover } from 'scenes/notebooks/NotebookPanel/NotebookPopover'
import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
import { userLogic } from 'scenes/userLogic'
import { ProjectName, ProjectSwitcherOverlay } from '~/layout/navigation/ProjectSwitcher'
import { PageButton } from '~/layout/navigation/SideBar/PageButton'
import { SideBarApps } from '~/layout/navigation/SideBar/SideBarApps'
import { dashboardsModel } from '~/models/dashboardsModel'
import { organizationLogic } from '~/scenes/organizationLogic'
import { canViewPlugins } from '~/scenes/plugins/access'
@ -34,23 +52,8 @@ import { Scene } from '~/scenes/sceneTypes'
import { isAuthenticatedTeam, teamLogic } from '~/scenes/teamLogic'
import { urls } from '~/scenes/urls'
import { AvailableFeature } from '~/types'
import './SideBar.scss'
import { navigationLogic } from '../navigationLogic'
import { FEATURE_FLAGS } from 'lib/constants'
import { userLogic } from 'scenes/userLogic'
import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
import { SideBarApps } from '~/layout/navigation/SideBar/SideBarApps'
import { PageButton } from '~/layout/navigation/SideBar/PageButton'
import { frontendAppsLogic } from 'scenes/apps/frontendAppsLogic'
import { authorizedUrlListLogic, AuthorizedUrlListType } from 'lib/components/AuthorizedUrlList/authorizedUrlListLogic'
import { LemonButton } from 'lib/lemon-ui/LemonButton'
import { Tooltip } from 'lib/lemon-ui/Tooltip'
import { Spinner } from 'lib/lemon-ui/Spinner/Spinner'
import { DebugNotice } from 'lib/components/DebugNotice'
import { NotebookPopover } from 'scenes/notebooks/NotebookPanel/NotebookPopover'
import { FlaggedFeature } from 'lib/components/FlaggedFeature'
import { IconNotebook } from 'scenes/notebooks/IconNotebook'
import { ActivationSidebar } from 'lib/components/ActivationSidebar/ActivationSidebar'
function Pages(): JSX.Element {
const { currentOrganization } = useValues(organizationLogic)

21
frontend/src/layout/navigation/SideBar/SideBarApps.tsx
View File

@ -1,16 +1,17 @@
import { IconExtension } from 'lib/lemon-ui/icons'
import { urls } from 'scenes/urls'
import { Scene } from 'scenes/sceneTypes'
import { canInstallPlugins } from 'scenes/plugins/access'
import { LemonButton } from 'lib/lemon-ui/LemonButton'
import { PluginSource } from 'scenes/plugins/source/PluginSource'
import { useActions, useValues } from 'kea'
import { organizationLogic } from 'scenes/organizationLogic'
import { navigationLogic } from '~/layout/navigation/navigationLogic'
import { frontendAppsLogic } from 'scenes/apps/frontendAppsLogic'
import { router } from 'kea-router'
import { PageButton } from '~/layout/navigation/SideBar/PageButton'
import { IconExtension } from 'lib/lemon-ui/icons'
import { LemonButton } from 'lib/lemon-ui/LemonButton'
import { frontendAppsLogic } from 'scenes/apps/frontendAppsLogic'
import { organizationLogic } from 'scenes/organizationLogic'
import { canInstallPlugins } from 'scenes/plugins/access'
import { PluginSource } from 'scenes/plugins/source/PluginSource'
import { PluginInstallationType } from 'scenes/plugins/types'
import { Scene } from 'scenes/sceneTypes'
import { urls } from 'scenes/urls'
import { navigationLogic } from '~/layout/navigation/navigationLogic'
import { PageButton } from '~/layout/navigation/SideBar/PageButton'
export function SideBarApps(): JSX.Element {
const { currentOrganization } = useValues(organizationLogic)

13
frontend/src/layout/navigation/TopBar/Announcement.tsx
View File

@ -1,12 +1,13 @@
import clsx from 'clsx'
import { MOCK_NODE_PROCESS } from 'lib/constants'
import { announcementLogic, AnnouncementType } from '~/layout/navigation/TopBar/announcementLogic'
import { useActions, useValues } from 'kea'
import { NewFeatureBanner } from 'lib/introductions/NewFeatureBanner'
import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
import { LemonButton, Link } from '@posthog/lemon-ui'
import clsx from 'clsx'
import { useActions, useValues } from 'kea'
import { MOCK_NODE_PROCESS } from 'lib/constants'
import { NewFeatureBanner } from 'lib/introductions/NewFeatureBanner'
import { IconClose } from 'lib/lemon-ui/icons'
import { LemonMarkdown } from 'lib/lemon-ui/LemonMarkdown'
import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
import { announcementLogic, AnnouncementType } from '~/layout/navigation/TopBar/announcementLogic'
window.process = MOCK_NODE_PROCESS

2
frontend/src/layout/navigation/TopBar/NotebookButton.tsx
View File

@ -1,5 +1,5 @@
import { useActions, useValues } from 'kea'
import { LemonButton, LemonButtonWithSideActionProps } from '@posthog/lemon-ui'
import { useActions, useValues } from 'kea'
import { useFeatureFlag } from 'lib/hooks/useFeatureFlag'
import { IconNotebook } from 'scenes/notebooks/IconNotebook'
import { notebookPanelLogic } from 'scenes/notebooks/NotebookPanel/notebookPanelLogic'

18
frontend/src/layout/navigation/TopBar/NotificationBell.tsx
View File

@ -1,16 +1,18 @@
import { IconArrowDropDown, IconInfo, IconNotification, IconWithCount } from 'lib/lemon-ui/icons'
import { notificationsLogic } from '~/layout/navigation/TopBar/notificationsLogic'
import { useActions, useValues } from 'kea'
import clsx from 'clsx'
import { Popover } from 'lib/lemon-ui/Popover/Popover'
import { LemonDivider } from 'lib/lemon-ui/LemonDivider'
import { usePageVisibility } from 'lib/hooks/usePageVisibility'
import { ActivityLogRow } from 'lib/components/ActivityLog/ActivityLog'
import './NotificationsBell.scss'
import clsx from 'clsx'
import { useActions, useValues } from 'kea'
import { ActivityLogRow } from 'lib/components/ActivityLog/ActivityLog'
import { usePageVisibility } from 'lib/hooks/usePageVisibility'
import { IconArrowDropDown, IconInfo, IconNotification, IconWithCount } from 'lib/lemon-ui/icons'
import { LemonDivider } from 'lib/lemon-ui/LemonDivider'
import { LemonTag } from 'lib/lemon-ui/LemonTag/LemonTag'
import { Link } from 'lib/lemon-ui/Link'
import { Popover } from 'lib/lemon-ui/Popover/Popover'
import { urls } from 'scenes/urls'
import { notificationsLogic } from '~/layout/navigation/TopBar/notificationsLogic'
export function NotificationBell(): JSX.Element {
const { unreadCount, hasNotifications, notifications, isNotificationPopoverOpen, hasUnread } =
useValues(notificationsLogic)

62
frontend/src/layout/navigation/TopBar/SitePopover.tsx
View File

@ -1,46 +1,48 @@
import { IconLive } from '@posthog/icons'
import { LemonButtonPropsBase } from '@posthog/lemon-ui'
import { useActions, useValues } from 'kea'
import { userLogic } from '../../../scenes/userLogic'
import { ProfilePicture } from 'lib/lemon-ui/ProfilePicture'
import { LemonButton } from 'lib/lemon-ui/LemonButton'
import { LemonRow } from 'lib/lemon-ui/LemonRow'
import { FlaggedFeature } from 'lib/components/FlaggedFeature'
import { hedgehogbuddyLogic } from 'lib/components/HedgehogBuddy/hedgehogbuddyLogic'
import { FEATURE_FLAGS } from 'lib/constants'
import {
IconCheckmark,
IconOffline,
IconLogout,
IconUpdate,
IconExclamation,
IconBill,
IconArrowDropDown,
IconSettings,
IconBill,
IconCheckmark,
IconCorporate,
IconExclamation,
IconFlare,
IconLogout,
IconOffline,
IconPlus,
IconRedeem,
IconFlare,
IconSettings,
IconUpdate,
} from 'lib/lemon-ui/icons'
import { Popover } from 'lib/lemon-ui/Popover/Popover'
import { Link } from 'lib/lemon-ui/Link'
import { urls } from '../../../scenes/urls'
import { navigationLogic } from '../navigationLogic'
import { OrganizationBasicType } from '../../../types'
import { organizationLogic } from '../../../scenes/organizationLogic'
import { preflightLogic } from '../../../scenes/PreflightCheck/preflightLogic'
import { LemonButton } from 'lib/lemon-ui/LemonButton'
import { LemonRow } from 'lib/lemon-ui/LemonRow'
import { Lettermark } from 'lib/lemon-ui/Lettermark'
import { Link } from 'lib/lemon-ui/Link'
import { Popover } from 'lib/lemon-ui/Popover/Popover'
import { ProfilePicture } from 'lib/lemon-ui/ProfilePicture'
import { Tooltip } from 'lib/lemon-ui/Tooltip'
import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
import { billingLogic } from 'scenes/billing/billingLogic'
import { inviteLogic } from 'scenes/settings/organization/inviteLogic'
import { featurePreviewsLogic } from '~/layout/FeaturePreviews/featurePreviewsLogic'
import {
AccessLevelIndicator,
NewOrganizationButton,
OtherOrganizationButton,
} from '~/layout/navigation/OrganizationSwitcher'
import { inviteLogic } from 'scenes/settings/organization/inviteLogic'
import { Tooltip } from 'lib/lemon-ui/Tooltip'
import { LemonButtonPropsBase } from '@posthog/lemon-ui'
import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
import { billingLogic } from 'scenes/billing/billingLogic'
import { FEATURE_FLAGS } from 'lib/constants'
import { FlaggedFeature } from 'lib/components/FlaggedFeature'
import { featurePreviewsLogic } from '~/layout/FeaturePreviews/featurePreviewsLogic'
import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
import { IconLive } from '@posthog/icons'
import { hedgehogbuddyLogic } from 'lib/components/HedgehogBuddy/hedgehogbuddyLogic'
import { organizationLogic } from '../../../scenes/organizationLogic'
import { preflightLogic } from '../../../scenes/PreflightCheck/preflightLogic'
import { urls } from '../../../scenes/urls'
import { userLogic } from '../../../scenes/userLogic'
import { OrganizationBasicType } from '../../../types'
import { navigationLogic } from '../navigationLogic'
function SitePopoverSection({ title, children }: { title?: string | JSX.Element; children: any }): JSX.Element {
return (

39
frontend/src/layout/navigation/TopBar/TopBar.tsx
View File

@ -1,24 +1,27 @@
import { useActions, useValues } from 'kea'
import { Logo } from '~/toolbar/assets/Logo'
import { SitePopover } from './SitePopover'
import { Announcement } from './Announcement'
import { navigationLogic } from '../navigationLogic'
import { HelpButton } from 'lib/components/HelpButton/HelpButton'
import { CommandPalette } from 'lib/components/CommandPalette/CommandPalette'
import { Link } from 'lib/lemon-ui/Link'
import { IconMenu, IconMenuOpen } from 'lib/lemon-ui/icons'
import './TopBar.scss'
import { UniversalSearchPopover } from 'lib/components/UniversalSearch/UniversalSearchPopover'
import { TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types'
import { groupsModel } from '~/models/groupsModel'
import { NotificationBell } from '~/layout/navigation/TopBar/NotificationBell'
import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
import { FEATURE_FLAGS } from 'lib/constants'
import { NotebookButton } from '~/layout/navigation/TopBar/NotebookButton'
import { ActivationSidebarToggle } from 'lib/components/ActivationSidebar/ActivationSidebarToggle'
import { organizationLogic } from 'scenes/organizationLogic'
import { LemonButtonWithDropdown, Lettermark } from '@posthog/lemon-ui'
import { useActions, useValues } from 'kea'
import { ActivationSidebarToggle } from 'lib/components/ActivationSidebar/ActivationSidebarToggle'
import { CommandPalette } from 'lib/components/CommandPalette/CommandPalette'
import { HelpButton } from 'lib/components/HelpButton/HelpButton'
import { TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types'
import { UniversalSearchPopover } from 'lib/components/UniversalSearch/UniversalSearchPopover'
import { FEATURE_FLAGS } from 'lib/constants'
import { IconMenu, IconMenuOpen } from 'lib/lemon-ui/icons'
import { Link } from 'lib/lemon-ui/Link'
import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
import { organizationLogic } from 'scenes/organizationLogic'
import { NotebookButton } from '~/layout/navigation/TopBar/NotebookButton'
import { NotificationBell } from '~/layout/navigation/TopBar/NotificationBell'
import { groupsModel } from '~/models/groupsModel'
import { Logo } from '~/toolbar/assets/Logo'
import { navigationLogic } from '../navigationLogic'
import { ProjectSwitcherOverlay } from '../ProjectSwitcher'
import { Announcement } from './Announcement'
import { SitePopover } from './SitePopover'
import { topBarLogic } from './topBarLogic'
export function TopBar(): JSX.Element {

18
frontend/src/layout/navigation/TopBar/announcementLogic.test.ts
View File

@ -1,13 +1,15 @@
import { expectLogic } from 'kea-test-utils'
import { initKeaTests } from '~/test/init'
import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
import { router } from 'kea-router'
import { urls } from 'scenes/urls'
import { announcementLogic, AnnouncementType, DEFAULT_CLOUD_ANNOUNCEMENT } from './announcementLogic'
import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
import { userLogic } from 'scenes/userLogic'
import { navigationLogic } from '../navigationLogic'
import { expectLogic } from 'kea-test-utils'
import { FEATURE_FLAGS } from 'lib/constants'
import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
import { urls } from 'scenes/urls'
import { userLogic } from 'scenes/userLogic'
import { initKeaTests } from '~/test/init'
import { navigationLogic } from '../navigationLogic'
import { announcementLogic, AnnouncementType, DEFAULT_CLOUD_ANNOUNCEMENT } from './announcementLogic'
describe('announcementLogic', () => {
let logic: ReturnType<typeof announcementLogic.build>

6
frontend/src/layout/navigation/TopBar/announcementLogic.ts
View File

@ -1,12 +1,12 @@
import { kea, connect, path, actions, reducers, selectors } from 'kea'
import { actions, connect, kea, path, reducers, selectors } from 'kea'
import { router } from 'kea-router'
import { FEATURE_FLAGS, OrganizationMembershipLevel } from 'lib/constants'
import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
import posthog from 'posthog-js'
import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
import { userLogic } from 'scenes/userLogic'
import { navigationLogic } from '../navigationLogic'
import posthog from 'posthog-js'
import { navigationLogic } from '../navigationLogic'
import type { announcementLogicType } from './announcementLogicType'
export enum AnnouncementType {

10
frontend/src/layout/navigation/TopBar/notificationsLogic.tsx
View File

@ -1,14 +1,14 @@
import { actions, events, kea, listeners, path, reducers, selectors } from 'kea'
import { loaders } from 'kea-loaders'
import api from 'lib/api'
import { teamLogic } from 'scenes/teamLogic'
import { describerFor } from 'lib/components/ActivityLog/activityLogLogic'
import { ActivityLogItem, humanize, HumanizedActivityLogItem } from 'lib/components/ActivityLog/humanizeActivity'
import { dayjs } from 'lib/dayjs'
import { LemonMarkdown } from 'lib/lemon-ui/LemonMarkdown'
import posthog from 'posthog-js'
import { teamLogic } from 'scenes/teamLogic'
import type { notificationsLogicType } from './notificationsLogicType'
import { describerFor } from 'lib/components/ActivityLog/activityLogLogic'
import { dayjs } from 'lib/dayjs'
import posthog from 'posthog-js'
import { LemonMarkdown } from 'lib/lemon-ui/LemonMarkdown'
const POLL_TIMEOUT = 5 * 60 * 1000
const MARK_READ_TIMEOUT = 2500

2
frontend/src/layout/navigation/TopBar/topBarLogic.ts
View File

@ -1,4 +1,4 @@
import { actions, kea, reducers, path } from 'kea'
import { actions, kea, path, reducers } from 'kea'
import type { topBarLogicType } from './topBarLogicType'

9
frontend/src/layout/navigation/navigationLogic.ts
View File

@ -1,15 +1,16 @@
import { windowValues } from 'kea-window-values'
import { actions, connect, kea, listeners, path, reducers, selectors } from 'kea'
import { loaders } from 'kea-loaders'
import { kea, path, connect, actions, reducers, selectors, listeners } from 'kea'
import { windowValues } from 'kea-window-values'
import api from 'lib/api'
import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
import { membersLogic } from 'scenes/organization/membersLogic'
import { organizationLogic } from 'scenes/organizationLogic'
import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
import { sceneLogic } from 'scenes/sceneLogic'
import { teamLogic } from 'scenes/teamLogic'
import { userLogic } from 'scenes/userLogic'
import type { navigationLogicType } from './navigationLogicType'
import { membersLogic } from 'scenes/organization/membersLogic'
import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
export type ProjectNoticeVariant =
| 'demo_project'

22
frontend/src/lib/Chart.ts
View File

@ -7,16 +7,16 @@ import {
ChartOptions,
ChartType,
Color,
InteractionItem,
TickOptions,
GridLineOptions,
TooltipModel,
TooltipOptions,
ScriptableLineSegmentContext,
DefaultDataPoint,
Tooltip,
GridLineOptions,
InteractionItem,
Plugin,
registerables,
ScriptableLineSegmentContext,
TickOptions,
Tooltip,
TooltipModel,
TooltipOptions,
} from 'chart.js'
import CrosshairPlugin from 'chartjs-plugin-crosshair'
import { inStorybookTestRunner } from 'lib/utils'
@ -56,11 +56,11 @@ export {
ChartOptions,
ChartType,
Color,
InteractionItem,
TickOptions,
GridLineOptions,
TooltipModel,
TooltipOptions,
InteractionItem,
Plugin,
ScriptableLineSegmentContext,
TickOptions,
TooltipModel,
TooltipOptions,
}

1
frontend/src/lib/actionUtils.test.ts
View File

@ -1,4 +1,5 @@
import { elementToSelector } from 'lib/actionUtils'
import { ElementType } from '~/types'
describe('elementToSelector', () => {

3
frontend/src/lib/actionUtils.ts
View File

@ -1,6 +1,7 @@
import { ElementType } from '~/types'
import { cssEscape } from 'lib/utils/cssEscape'
import { ElementType } from '~/types'
// these plus any element with cursor:pointer will be click targets
export const CLICK_TARGETS = ['a', 'button', 'input', 'select', 'textarea', 'label']
export const CLICK_TARGET_SELECTOR = CLICK_TARGETS.join(', ')

6
frontend/src/lib/api.mock.ts
View File

@ -1,3 +1,6 @@
import apiReal from 'lib/api'
import { PluginInstallationType } from 'scenes/plugins/types'
import {
CohortType,
FilterLogicalOperator,
@ -14,9 +17,8 @@ import {
UserBasicType,
UserType,
} from '~/types'
import { OrganizationMembershipLevel, PluginsAccessLevel } from './constants'
import apiReal from 'lib/api'
import { PluginInstallationType } from 'scenes/plugins/types'
export const MOCK_USER_UUID: UserType['uuid'] = 'USER_UUID'
export const MOCK_TEAM_ID: TeamType['id'] = 997

3
frontend/src/lib/api.test.ts
View File

@ -1,7 +1,8 @@
import api from 'lib/api'
import { PropertyFilterType, PropertyOperator } from '~/types'
import posthog from 'posthog-js'
import { PropertyFilterType, PropertyOperator } from '~/types'
describe('API helper', () => {
let fakeFetch: jest.Mock<any, any>

35
frontend/src/lib/api.ts
View File

@ -1,18 +1,27 @@
import posthog from 'posthog-js'
import { decompressSync, strFromU8 } from 'fflate'
import { encodeParams } from 'kea-router'
import { ActivityLogProps } from 'lib/components/ActivityLog/ActivityLog'
import { ActivityLogItem, ActivityScope } from 'lib/components/ActivityLog/humanizeActivity'
import { toParams } from 'lib/utils'
import posthog from 'posthog-js'
import { SavedSessionRecordingPlaylistsResult } from 'scenes/session-recordings/saved-playlists/savedSessionRecordingPlaylistsLogic'
import { getCurrentExporterData } from '~/exporter/exporterViewLogic'
import { QuerySchema, QueryStatus } from '~/queries/schema'
import {
ActionType,
BatchExportConfiguration,
BatchExportLogEntry,
BatchExportRun,
CohortType,
DashboardCollaboratorType,
DashboardTemplateEditorType,
DashboardTemplateListParams,
DashboardTemplateType,
DashboardType,
DataWarehouseTable,
DataWarehouseSavedQuery,
DataWarehouseTable,
DataWarehouseViewLink,
EarlyAccessFeatureType,
EventDefinition,
EventDefinitionType,
@ -20,15 +29,18 @@ import {
EventType,
Experiment,
ExportedAssetType,
ExternalDataStripeSource,
ExternalDataStripeSourceCreatePayload,
FeatureFlagAssociatedRoleType,
FeatureFlagType,
OrganizationFeatureFlags,
OrganizationFeatureFlagsCopyBody,
InsightModel,
IntegrationType,
MediaUploadResponse,
NewEarlyAccessFeatureType,
NotebookNodeResource,
NotebookType,
OrganizationFeatureFlags,
OrganizationFeatureFlagsCopyBody,
OrganizationResourcePermissionType,
OrganizationType,
PersonListParams,
@ -49,15 +61,10 @@ import {
SubscriptionType,
Survey,
TeamType,
UserType,
DataWarehouseViewLink,
BatchExportConfiguration,
BatchExportRun,
UserBasicType,
NotebookNodeResource,
ExternalDataStripeSourceCreatePayload,
ExternalDataStripeSource,
UserType,
} from '~/types'
import {
ACTIVITY_PAGE_SIZE,
DashboardPrivilegeLevel,
@ -65,12 +72,6 @@ import {
EVENT_PROPERTY_DEFINITIONS_PER_PAGE,
LOGS_PORTION_LIMIT,
} from './constants'
import { toParams } from 'lib/utils'
import { ActivityLogItem, ActivityScope } from 'lib/components/ActivityLog/humanizeActivity'
import { ActivityLogProps } from 'lib/components/ActivityLog/ActivityLog'
import { SavedSessionRecordingPlaylistsResult } from 'scenes/session-recordings/saved-playlists/savedSessionRecordingPlaylistsLogic'
import { QuerySchema, QueryStatus } from '~/queries/schema'
import { getCurrentExporterData } from '~/exporter/exporterViewLogic'
/**
* WARNING: Be very careful importing things here. This file is heavily used and can trigger a lot of cyclic imports

13
frontend/src/lib/components/ActivationSidebar/ActivationSidebar.tsx
View File

@ -1,14 +1,17 @@
import './ActivationSidebar.scss'
import { LemonButton, LemonButtonProps, LemonButtonWithSideAction } from '@posthog/lemon-ui'
import { Progress } from 'antd'
import clsx from 'clsx'
import { useActions, useValues } from 'kea'
import { navigationLogic } from '~/layout/navigation/navigationLogic'
import { activationLogic, ActivationTaskType } from './activationLogic'
import './ActivationSidebar.scss'
import { Progress } from 'antd'
import { IconCheckmark, IconClose } from 'lib/lemon-ui/icons'
import { ProfessorHog } from '../hedgehogs'
import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
import { navigationLogic } from '~/layout/navigation/navigationLogic'
import { ProfessorHog } from '../hedgehogs'
import { activationLogic, ActivationTaskType } from './activationLogic'
export const ActivationTask = ({
id,
name,

6
frontend/src/lib/components/ActivationSidebar/ActivationSidebarToggle.tsx
View File

@ -1,7 +1,9 @@
import { LemonButton } from '@posthog/lemon-ui'
import { useActions, useValues } from 'kea'
import { navigationLogic } from '~/layout/navigation/navigationLogic'
import { Progress } from 'antd'
import { useActions, useValues } from 'kea'
import { navigationLogic } from '~/layout/navigation/navigationLogic'
import { activationLogic } from './activationLogic'
export const ActivationSidebarToggle = (): JSX.Element | null => {

4
frontend/src/lib/components/ActivationSidebar/activationLogic.test.ts
View File

@ -1,10 +1,12 @@
import { expectLogic } from 'kea-test-utils'
import { inviteLogic } from 'scenes/settings/organization/inviteLogic'
import { membersLogic } from 'scenes/organization/membersLogic'
import { pluginsLogic } from 'scenes/plugins/pluginsLogic'
import { inviteLogic } from 'scenes/settings/organization/inviteLogic'
import { teamLogic } from 'scenes/teamLogic'
import { navigationLogic } from '~/layout/navigation/navigationLogic'
import { initKeaTests } from '~/test/init'
import { activationLogic } from './activationLogic'
describe('activationLogic', () => {

18
frontend/src/lib/components/ActivationSidebar/activationLogic.ts
View File

@ -1,19 +1,21 @@
import { kea, path, actions, selectors, connect, reducers, listeners, events } from 'kea'
import { actions, connect, events, kea, listeners, path, reducers, selectors } from 'kea'
import { loaders } from 'kea-loaders'
import { router, urlToAction } from 'kea-router'
import api from 'lib/api'
import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
import { inviteLogic } from 'scenes/settings/organization/inviteLogic'
import { permanentlyMount } from 'lib/utils/kea-logic-builders'
import { membersLogic } from 'scenes/organization/membersLogic'
import { pluginsLogic } from 'scenes/plugins/pluginsLogic'
import { teamLogic } from 'scenes/teamLogic'
import { navigationLogic } from '~/layout/navigation/navigationLogic'
import { EventDefinitionType, ProductKey, TeamBasicType } from '~/types'
import type { activationLogicType } from './activationLogicType'
import { urls } from 'scenes/urls'
import { savedInsightsLogic } from 'scenes/saved-insights/savedInsightsLogic'
import { inviteLogic } from 'scenes/settings/organization/inviteLogic'
import { teamLogic } from 'scenes/teamLogic'
import { urls } from 'scenes/urls'
import { navigationLogic } from '~/layout/navigation/navigationLogic'
import { dashboardsModel } from '~/models/dashboardsModel'
import { permanentlyMount } from 'lib/utils/kea-logic-builders'
import { EventDefinitionType, ProductKey, TeamBasicType } from '~/types'
import type { activationLogicType } from './activationLogicType'
export enum ActivationTasks {
IngestFirstEvent = 'ingest_first_event',

5
frontend/src/lib/components/ActivityLog/ActivityLog.stories.tsx
View File

@ -1,13 +1,14 @@
import { Meta } from '@storybook/react'
import {
featureFlagsActivityResponseJson,
insightsActivityResponseJson,
personActivityResponseJson,
} from 'lib/components/ActivityLog/__mocks__/activityLogMocks'
import { mswDecorator } from '~/mocks/browser'
import { Meta } from '@storybook/react'
import { ActivityLog } from 'lib/components/ActivityLog/ActivityLog'
import { ActivityScope } from 'lib/components/ActivityLog/humanizeActivity'
import { mswDecorator } from '~/mocks/browser'
const meta: Meta<typeof ActivityLog> = {
title: 'Components/ActivityLog',
component: ActivityLog,

23
frontend/src/lib/components/ActivityLog/ActivityLog.tsx
View File

@ -1,15 +1,18 @@
import { ProfilePicture } from 'lib/lemon-ui/ProfilePicture'
import { TZLabel } from 'lib/components/TZLabel'
import { useValues } from 'kea'
import './ActivityLog.scss'
import { ActivityLogLogicProps, activityLogLogic } from 'lib/components/ActivityLog/activityLogLogic'
import { HumanizedActivityLogItem } from 'lib/components/ActivityLog/humanizeActivity'
import { PaginationControl, usePagination } from 'lib/lemon-ui/PaginationControl'
import { LemonSkeleton } from 'lib/lemon-ui/LemonSkeleton'
import clsx from 'clsx'
import { ProductIntroduction } from '../ProductIntroduction/ProductIntroduction'
import { ProductKey } from '~/types'
import { LemonDivider } from '@posthog/lemon-ui'
import clsx from 'clsx'
import { useValues } from 'kea'
import { activityLogLogic, ActivityLogLogicProps } from 'lib/components/ActivityLog/activityLogLogic'
import { HumanizedActivityLogItem } from 'lib/components/ActivityLog/humanizeActivity'
import { TZLabel } from 'lib/components/TZLabel'
import { LemonSkeleton } from 'lib/lemon-ui/LemonSkeleton'
import { PaginationControl, usePagination } from 'lib/lemon-ui/PaginationControl'
import { ProfilePicture } from 'lib/lemon-ui/ProfilePicture'
import { ProductKey } from '~/types'
import { ProductIntroduction } from '../ProductIntroduction/ProductIntroduction'
export type ActivityLogProps = ActivityLogLogicProps & {
startingPage?: number

1
frontend/src/lib/components/ActivityLog/SentenceList.stories.tsx
View File

@ -1,4 +1,5 @@
import { Meta, StoryFn, StoryObj } from '@storybook/react'
import { SentenceList, SentenceListProps } from './SentenceList'
type Story = StoryObj<typeof SentenceList>

1
frontend/src/lib/components/ActivityLog/__mocks__/activityLogMocks.ts
View File

@ -1,4 +1,5 @@
import { ActivityLogItem, ActivityScope } from 'lib/components/ActivityLog/humanizeActivity'
import { InsightShortId } from '~/types'
export const featureFlagsActivityResponseJson: ActivityLogItem[] = [

6
frontend/src/lib/components/ActivityLog/activityLogLogic.feature-flag.test.tsx
View File

@ -1,7 +1,9 @@
import { ActivityScope } from 'lib/components/ActivityLog/humanizeActivity'
import { render } from '@testing-library/react'
import '@testing-library/jest-dom'
import { render } from '@testing-library/react'
import { MOCK_TEAM_ID } from 'lib/api.mock'
import { ActivityScope } from 'lib/components/ActivityLog/humanizeActivity'
import { makeTestSetup } from './activityLogLogic.test.setup'
describe('the activity log logic', () => {

5
frontend/src/lib/components/ActivityLog/activityLogLogic.insight.test.tsx
View File

@ -1,8 +1,9 @@
import { ActivityScope } from 'lib/components/ActivityLog/humanizeActivity'
import { render } from '@testing-library/react'
import '@testing-library/jest-dom'
import { render } from '@testing-library/react'
import { MOCK_TEAM_ID } from 'lib/api.mock'
import { makeTestSetup } from 'lib/components/ActivityLog/activityLogLogic.test.setup'
import { ActivityScope } from 'lib/components/ActivityLog/humanizeActivity'
jest.mock('lib/colors')

8
frontend/src/lib/components/ActivityLog/activityLogLogic.notebook.test.tsx
View File

@ -1,8 +1,10 @@
import { ActivityLogItem, ActivityScope, humanize } from 'lib/components/ActivityLog/humanizeActivity'
import '@testing-library/jest-dom'
import { InsightShortId } from '~/types'
import { describerFor } from 'lib/components/ActivityLog/activityLogLogic'
import { render } from '@testing-library/react'
import { describerFor } from 'lib/components/ActivityLog/activityLogLogic'
import { ActivityLogItem, ActivityScope, humanize } from 'lib/components/ActivityLog/humanizeActivity'
import { InsightShortId } from '~/types'
describe('the activity log logic', () => {
describe('humanizing notebooks', () => {

7
frontend/src/lib/components/ActivityLog/activityLogLogic.person.test.tsx
View File

@ -1,8 +1,9 @@
import { ActivityScope } from 'lib/components/ActivityLog/humanizeActivity'
import { render } from '@testing-library/react'
import '@testing-library/jest-dom'
import { makeTestSetup } from 'lib/components/ActivityLog/activityLogLogic.test.setup'
import { render } from '@testing-library/react'
import { MOCK_TEAM_ID } from 'lib/api.mock'
import { makeTestSetup } from 'lib/components/ActivityLog/activityLogLogic.test.setup'
import { ActivityScope } from 'lib/components/ActivityLog/humanizeActivity'
describe('the activity log logic', () => {
describe('humanizing persons', () => {

5
frontend/src/lib/components/ActivityLog/activityLogLogic.plugin.test.tsx
View File

@ -1,7 +1,8 @@
import { ActivityScope } from 'lib/components/ActivityLog/humanizeActivity'
import { render } from '@testing-library/react'
import '@testing-library/jest-dom'
import { render } from '@testing-library/react'
import { makeTestSetup } from 'lib/components/ActivityLog/activityLogLogic.test.setup'
import { ActivityScope } from 'lib/components/ActivityLog/humanizeActivity'
describe('the activity log logic', () => {
describe('humanizing plugins', () => {

5
frontend/src/lib/components/ActivityLog/activityLogLogic.test.setup.ts
View File

@ -1,3 +1,5 @@
import { expectLogic } from 'kea-test-utils'
import { activityLogLogic } from 'lib/components/ActivityLog/activityLogLogic'
import {
ActivityChange,
ActivityLogItem,
@ -5,10 +7,9 @@ import {
PersonMerge,
Trigger,
} from 'lib/components/ActivityLog/humanizeActivity'
import { useMocks } from '~/mocks/jest'
import { initKeaTests } from '~/test/init'
import { activityLogLogic } from 'lib/components/ActivityLog/activityLogLogic'
import { expectLogic } from 'kea-test-utils'
interface APIMockSetup {
name: string

16
frontend/src/lib/components/ActivityLog/activityLogLogic.test.tsx
View File

@ -1,12 +1,14 @@
import { initKeaTests } from '~/test/init'
import { expectLogic } from 'kea-test-utils'
import { useMocks } from '~/mocks/jest'
import { ActivityLogItem, ActivityScope, humanize } from 'lib/components/ActivityLog/humanizeActivity'
import { activityLogLogic, describerFor } from 'lib/components/ActivityLog/activityLogLogic'
import { featureFlagsActivityResponseJson } from 'lib/components/ActivityLog/__mocks__/activityLogMocks'
import { flagActivityDescriber } from 'scenes/feature-flags/activityDescriptions'
import '@testing-library/jest-dom'
import { expectLogic } from 'kea-test-utils'
import { MOCK_TEAM_ID } from 'lib/api.mock'
import { featureFlagsActivityResponseJson } from 'lib/components/ActivityLog/__mocks__/activityLogMocks'
import { activityLogLogic, describerFor } from 'lib/components/ActivityLog/activityLogLogic'
import { ActivityLogItem, ActivityScope, humanize } from 'lib/components/ActivityLog/humanizeActivity'
import { flagActivityDescriber } from 'scenes/feature-flags/activityDescriptions'
import { useMocks } from '~/mocks/jest'
import { initKeaTests } from '~/test/init'
describe('the activity log logic', () => {
let logic: ReturnType<typeof activityLogLogic.build>

18
frontend/src/lib/components/ActivityLog/activityLogLogic.tsx
View File

@ -1,5 +1,6 @@
import { actions, events, kea, key, listeners, path, props, reducers, selectors } from 'kea'
import { loaders } from 'kea-loaders'
import { kea, props, key, path, actions, reducers, selectors, listeners, events } from 'kea'
import { router, urlToAction } from 'kea-router'
import api, { ActivityLogPaginatedResponse } from 'lib/api'
import {
ActivityLogItem,
@ -8,18 +9,17 @@ import {
humanize,
HumanizedActivityLogItem,
} from 'lib/components/ActivityLog/humanizeActivity'
import type { activityLogLogicType } from './activityLogLogicType'
import { ACTIVITY_PAGE_SIZE } from 'lib/constants'
import { PaginationManual } from 'lib/lemon-ui/PaginationControl'
import { urls } from 'scenes/urls'
import { router, urlToAction } from 'kea-router'
import { dataManagementActivityDescriber } from 'scenes/data-management/dataManagementDescribers'
import { flagActivityDescriber } from 'scenes/feature-flags/activityDescriptions'
import { notebookActivityDescriber } from 'scenes/notebooks/Notebook/notebookActivityDescriber'
import { personActivityDescriber } from 'scenes/persons/activityDescriptions'
import { pluginActivityDescriber } from 'scenes/plugins/pluginActivityDescriptions'
import { insightActivityDescriber } from 'scenes/saved-insights/activityDescriptions'
import { personActivityDescriber } from 'scenes/persons/activityDescriptions'
import { dataManagementActivityDescriber } from 'scenes/data-management/dataManagementDescribers'
import { notebookActivityDescriber } from 'scenes/notebooks/Notebook/notebookActivityDescriber'
import { ACTIVITY_PAGE_SIZE } from 'lib/constants'
import { urls } from 'scenes/urls'
import type { activityLogLogicType } from './activityLogLogicType'
/**
* Having this function inside the `humanizeActivity module was causing very weird test errors in other modules

1
frontend/src/lib/components/ActivityLog/humanizeActivity.tsx
View File

@ -1,4 +1,5 @@
import { dayjs } from 'lib/dayjs'
import { InsightShortId, PersonType } from '~/types'
export interface ActivityChange {

7
frontend/src/lib/components/AddToDashboard/AddToDashboard.tsx
View File

@ -1,8 +1,9 @@
import { InsightModel } from '~/types'
import { dashboardsModel } from '~/models/dashboardsModel'
import { useValues } from 'kea'
import { LemonButton } from 'lib/lemon-ui/LemonButton'
import { IconGauge, IconWithCount } from 'lib/lemon-ui/icons'
import { LemonButton } from 'lib/lemon-ui/LemonButton'
import { dashboardsModel } from '~/models/dashboardsModel'
import { InsightModel } from '~/types'
interface SaveToDashboardProps {
insight: Partial<InsightModel>

21
frontend/src/lib/components/AddToDashboard/AddToDashboardModal.tsx
View File

@ -1,19 +1,20 @@
import { Tooltip } from 'lib/lemon-ui/Tooltip'
import clsx from 'clsx'
import { useActions, useValues } from 'kea'
import { addToDashboardModalLogic } from 'lib/components/AddToDashboard/addToDashboardModalLogic'
import { urls } from 'scenes/urls'
import { IconCottage } from 'lib/lemon-ui/icons'
import { LemonInput } from 'lib/lemon-ui/LemonInput/LemonInput'
import { List, ListRowProps, ListRowRenderer } from 'react-virtualized/dist/es/List'
import { AutoSizer } from 'react-virtualized/dist/es/AutoSizer'
import { LemonButton } from 'lib/lemon-ui/LemonButton'
import { Link } from 'lib/lemon-ui/Link'
import { DashboardBasicType, InsightModel } from '~/types'
import clsx from 'clsx'
import { pluralize } from 'lib/utils'
import { teamLogic } from 'scenes/teamLogic'
import { LemonInput } from 'lib/lemon-ui/LemonInput/LemonInput'
import { LemonModal } from 'lib/lemon-ui/LemonModal'
import { Link } from 'lib/lemon-ui/Link'
import { Tooltip } from 'lib/lemon-ui/Tooltip'
import { pluralize } from 'lib/utils'
import { CSSProperties } from 'react'
import { AutoSizer } from 'react-virtualized/dist/es/AutoSizer'
import { List, ListRowProps, ListRowRenderer } from 'react-virtualized/dist/es/List'
import { teamLogic } from 'scenes/teamLogic'
import { urls } from 'scenes/urls'
import { DashboardBasicType, InsightModel } from '~/types'
interface SaveToDashboardModalProps {
isOpen: boolean

15
frontend/src/lib/components/AddToDashboard/addToDashboardModalLogic.ts
View File

@ -1,13 +1,14 @@
import { kea, props, key, path, connect, actions, reducers, selectors, listeners } from 'kea'
import { dashboardsModel } from '~/models/dashboardsModel'
import FuseClass from 'fuse.js'
import { actions, connect, kea, key, listeners, path, props, reducers, selectors } from 'kea'
import { router } from 'kea-router'
import { lemonToast } from 'lib/lemon-ui/lemonToast'
import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
import { newDashboardLogic } from 'scenes/dashboard/newDashboardLogic'
import { DashboardBasicType, DashboardType, InsightModel, InsightType } from '~/types'
import FuseClass from 'fuse.js'
import { lemonToast } from 'lib/lemon-ui/lemonToast'
import { router } from 'kea-router'
import { urls } from 'scenes/urls'
import { insightLogic } from 'scenes/insights/insightLogic'
import { urls } from 'scenes/urls'
import { dashboardsModel } from '~/models/dashboardsModel'
import { DashboardBasicType, DashboardType, InsightModel, InsightType } from '~/types'
import type { addToDashboardModalLogicType } from './addToDashboardModalLogicType'

Some files were not shown because too many files have changed in this diff Show More