diff --git a/frontend/src/layout/navigation/SideBar/SideBar.tsx b/frontend/src/layout/navigation/SideBar/SideBar.tsx index c37c2f0284631..e7cd5d9c3846d 100644 --- a/frontend/src/layout/navigation/SideBar/SideBar.tsx +++ b/frontend/src/layout/navigation/SideBar/SideBar.tsx @@ -14,7 +14,6 @@ import { IconGauge, IconLive, IconMessages, - IconNotebook, IconOpenInApp, IconPerson, IconPinOutline, @@ -53,6 +52,7 @@ import { DebugNotice } from 'lib/components/DebugNotice' import ActivationSidebar from 'lib/components/ActivationSidebar/ActivationSidebar' import { NotebookPopover } from 'scenes/notebooks/Notebook/NotebookPopover' import { FlaggedFeature } from 'lib/components/FlaggedFeature' +import { IconNotebook } from 'scenes/notebooks/IconNotebook' function Pages(): JSX.Element { const { currentOrganization } = useValues(organizationLogic) diff --git a/frontend/src/layout/navigation/TopBar/NotebookButton.tsx b/frontend/src/layout/navigation/TopBar/NotebookButton.tsx index baee715a0d81f..278644197c756 100644 --- a/frontend/src/layout/navigation/TopBar/NotebookButton.tsx +++ b/frontend/src/layout/navigation/TopBar/NotebookButton.tsx @@ -1,16 +1,15 @@ -import { IconNotebook } from 'lib/lemon-ui/icons' import { useActions, useValues } from 'kea' import { notebookPopoverLogic } from 'scenes/notebooks/Notebook/notebookPopoverLogic' import { LemonButton, LemonButtonWithSideActionProps } from '@posthog/lemon-ui' -import { featureFlagLogic } from 'lib/logic/featureFlagLogic' -import { FEATURE_FLAGS } from 'lib/constants' +import { useFeatureFlag } from 'lib/hooks/useFeatureFlag' +import { IconNotebook } from 'scenes/notebooks/IconNotebook' export function NotebookButton(): JSX.Element { const { visibility } = useValues(notebookPopoverLogic) const { setVisibility } = useActions(notebookPopoverLogic) - const { featureFlags } = useValues(featureFlagLogic) + const is3000 = useFeatureFlag('POSTHOG_3000') - const overrides3000: Partial = featureFlags[FEATURE_FLAGS.POSTHOG_3000] + const overrides3000: Partial = is3000 ? { size: 'small', type: 'secondary', @@ -25,7 +24,7 @@ export function NotebookButton(): JSX.Element { status="primary-alt" {...overrides3000} > - {featureFlags[FEATURE_FLAGS.POSTHOG_3000] ? 'Notebooks' : null} + {is3000 ? 'Notebooks' : null} ) } diff --git a/frontend/src/scenes/notebooks/IconNotebook.tsx b/frontend/src/scenes/notebooks/IconNotebook.tsx new file mode 100644 index 0000000000000..a534044d3e6b7 --- /dev/null +++ b/frontend/src/scenes/notebooks/IconNotebook.tsx @@ -0,0 +1,9 @@ +import { useFeatureFlag } from 'lib/hooks/useFeatureFlag' +import { IconNotebook as IconNotebookLegacy, LemonIconProps } from 'lib/lemon-ui/icons' +import { IconNotebook as IconNotebook3000 } from '@posthog/icons' + +export function IconNotebook(props: LemonIconProps): JSX.Element { + const is3000 = useFeatureFlag('POSTHOG_3000') + + return is3000 ? : +} diff --git a/frontend/src/scenes/notebooks/Nodes/NotebookNodeBacklink.tsx b/frontend/src/scenes/notebooks/Nodes/NotebookNodeBacklink.tsx index 0345103e983b9..9dad747b777d3 100644 --- a/frontend/src/scenes/notebooks/Nodes/NotebookNodeBacklink.tsx +++ b/frontend/src/scenes/notebooks/Nodes/NotebookNodeBacklink.tsx @@ -2,16 +2,7 @@ import { mergeAttributes, Node, NodeViewProps } from '@tiptap/core' import { NodeViewWrapper, ReactNodeViewRenderer } from '@tiptap/react' import { InsightModel, NotebookNodeType, NotebookTarget } from '~/types' import { Link } from '@posthog/lemon-ui' -import { - IconGauge, - IconBarChart, - IconFlag, - IconExperiment, - IconLive, - IconPerson, - IconCohort, - IconNotebook, -} from 'lib/lemon-ui/icons' +import { IconGauge, IconBarChart, IconFlag, IconExperiment, IconLive, IconPerson, IconCohort } from 'lib/lemon-ui/icons' import { TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types' import { urls } from 'scenes/urls' import clsx from 'clsx' @@ -22,6 +13,7 @@ import { useValues } from 'kea' import { notebookLogic } from '../Notebook/notebookLogic' import { openNotebook } from '~/models/notebooksModel' +import { IconNotebook } from '../IconNotebook' const ICON_MAP = { dashboards: , diff --git a/frontend/src/scenes/notebooks/Notebook/NotebookListMini.tsx b/frontend/src/scenes/notebooks/Notebook/NotebookListMini.tsx index 8adeb7f4236c9..0d70ec78df30b 100644 --- a/frontend/src/scenes/notebooks/Notebook/NotebookListMini.tsx +++ b/frontend/src/scenes/notebooks/Notebook/NotebookListMini.tsx @@ -1,9 +1,9 @@ import { LemonButton } from '@posthog/lemon-ui' import { useValues } from 'kea' -import { IconNotebook } from 'lib/lemon-ui/icons' import { notebooksModel } from '~/models/notebooksModel' import { NotebookListItemType } from '~/types' import { NotebookSelectPopover } from '../NotebookSelectButton/NotebookSelectButton' +import { IconNotebook } from '../IconNotebook' export type NotebookListMiniProps = { selectedNotebookId?: string diff --git a/frontend/src/scenes/notebooks/NotebookSelectButton/NotebookSelectButton.tsx b/frontend/src/scenes/notebooks/NotebookSelectButton/NotebookSelectButton.tsx index 76f201e9df296..4fdcf1ef58ed4 100644 --- a/frontend/src/scenes/notebooks/NotebookSelectButton/NotebookSelectButton.tsx +++ b/frontend/src/scenes/notebooks/NotebookSelectButton/NotebookSelectButton.tsx @@ -1,6 +1,6 @@ import { LemonButton, LemonButtonProps } from 'lib/lemon-ui/LemonButton' -import { IconNotebook, IconPlus, IconWithCount } from 'lib/lemon-ui/icons' +import { IconPlus, IconWithCount } from 'lib/lemon-ui/icons' import { NotebookSelectButtonLogicProps, notebookSelectButtonLogic, @@ -18,6 +18,7 @@ import { FlaggedFeature } from 'lib/components/FlaggedFeature' import { FEATURE_FLAGS } from 'lib/constants' import { ReactChild, useEffect } from 'react' import { LemonDivider, ProfilePicture } from '@posthog/lemon-ui' +import { IconNotebook } from '../IconNotebook' export type NotebookSelectProps = NotebookSelectButtonLogicProps & { newNotebookTitle?: string diff --git a/frontend/src/scenes/session-recordings/player/PlayerMetaLinks.tsx b/frontend/src/scenes/session-recordings/player/PlayerMetaLinks.tsx index af684b6f2fcb1..55c1c9a36870e 100644 --- a/frontend/src/scenes/session-recordings/player/PlayerMetaLinks.tsx +++ b/frontend/src/scenes/session-recordings/player/PlayerMetaLinks.tsx @@ -4,7 +4,7 @@ import { } from 'scenes/session-recordings/player/sessionRecordingPlayerLogic' import { useActions, useValues } from 'kea' import { LemonButton, LemonButtonProps } from 'lib/lemon-ui/LemonButton' -import { IconComment, IconDelete, IconNotebook, IconLink, IconPinFilled, IconPinOutline } from 'lib/lemon-ui/icons' +import { IconComment, IconDelete, IconLink, IconPinFilled, IconPinOutline } from 'lib/lemon-ui/icons' import { openPlayerShareDialog } from 'scenes/session-recordings/player/share/PlayerShare' import { PlaylistPopoverButton } from './playlist-popover/PlaylistPopover' import { LemonDialog } from 'lib/lemon-ui/LemonDialog' @@ -13,6 +13,7 @@ import { NotebookNodeType } from '~/types' import { useNotebookNode } from 'scenes/notebooks/Nodes/notebookNodeLogic' import { sessionPlayerModalLogic } from './modal/sessionPlayerModalLogic' import { personsModalLogic } from 'scenes/trends/persons-modal/personsModalLogic' +import { IconNotebook } from '@posthog/icons' export function PlayerMetaLinks(): JSX.Element { const { sessionRecordingId, logicProps } = useValues(sessionRecordingPlayerLogic)