diff --git a/.storybook/storybook.scss b/.storybook/storybook.scss index a7881a3007c67..b0be268408fcc 100644 --- a/.storybook/storybook.scss +++ b/.storybook/storybook.scss @@ -4,16 +4,13 @@ .ant-modal-wrap { z-index: 1050 !important; } + .ant-select-dropdown, .ant-picker-dropdown { z-index: 1060 !important; } + .ant-tooltip { z-index: 1060 !important; } } - -// allow taking screenshots of a scene's main content without overlapping top bar -.TopBar { - position: relative !important; -} diff --git a/frontend/__snapshots__/layout-navigation--app-page-with-side-bar-hidden--dark.png b/frontend/__snapshots__/layout-navigation--app-page-with-side-bar-hidden--dark.png index 7310c6c91ef22..eb22ddd4ddc87 100644 Binary files a/frontend/__snapshots__/layout-navigation--app-page-with-side-bar-hidden--dark.png and b/frontend/__snapshots__/layout-navigation--app-page-with-side-bar-hidden--dark.png differ diff --git a/frontend/__snapshots__/layout-navigation--app-page-with-side-bar-hidden--light.png b/frontend/__snapshots__/layout-navigation--app-page-with-side-bar-hidden--light.png index ff610b614db3a..14f869a1f2f41 100644 Binary files a/frontend/__snapshots__/layout-navigation--app-page-with-side-bar-hidden--light.png and b/frontend/__snapshots__/layout-navigation--app-page-with-side-bar-hidden--light.png differ diff --git a/frontend/__snapshots__/layout-navigation--app-page-with-side-bar-shown--dark.png b/frontend/__snapshots__/layout-navigation--app-page-with-side-bar-shown--dark.png index 972128589e3b3..eb22ddd4ddc87 100644 Binary files a/frontend/__snapshots__/layout-navigation--app-page-with-side-bar-shown--dark.png and b/frontend/__snapshots__/layout-navigation--app-page-with-side-bar-shown--dark.png differ diff --git a/frontend/__snapshots__/layout-navigation--app-page-with-side-bar-shown--light.png b/frontend/__snapshots__/layout-navigation--app-page-with-side-bar-shown--light.png index c056f9fe33645..ffc91a7ba2239 100644 Binary files a/frontend/__snapshots__/layout-navigation--app-page-with-side-bar-shown--light.png and b/frontend/__snapshots__/layout-navigation--app-page-with-side-bar-shown--light.png differ diff --git a/frontend/__snapshots__/lemon-ui-icons--shelf-m--dark.png b/frontend/__snapshots__/lemon-ui-icons--shelf-m--dark.png index 3c9e6051e5c3b..42faa2ad5cf45 100644 Binary files a/frontend/__snapshots__/lemon-ui-icons--shelf-m--dark.png and b/frontend/__snapshots__/lemon-ui-icons--shelf-m--dark.png differ diff --git a/frontend/__snapshots__/lemon-ui-icons--shelf-m--light.png b/frontend/__snapshots__/lemon-ui-icons--shelf-m--light.png index 45df2af16988a..4db4dcbf7c46a 100644 Binary files a/frontend/__snapshots__/lemon-ui-icons--shelf-m--light.png and b/frontend/__snapshots__/lemon-ui-icons--shelf-m--light.png differ diff --git a/frontend/src/layout/ErrorBoundary/ErrorBoundary.scss b/frontend/src/layout/ErrorBoundary/ErrorBoundary.scss index 2027e62542aba..27b6e65688ae2 100644 --- a/frontend/src/layout/ErrorBoundary/ErrorBoundary.scss +++ b/frontend/src/layout/ErrorBoundary/ErrorBoundary.scss @@ -6,10 +6,6 @@ background: var(--danger-highlight); border-radius: var(--radius); - .main-app-content > & { - margin: 1.5rem 0; - } - h2 { margin-bottom: 0.75rem; font-weight: 600; diff --git a/frontend/src/layout/navigation-3000/Navigation.tsx b/frontend/src/layout/navigation-3000/Navigation.tsx index 3e6b8d722609d..16b4e9fade648 100644 --- a/frontend/src/layout/navigation-3000/Navigation.tsx +++ b/frontend/src/layout/navigation-3000/Navigation.tsx @@ -3,7 +3,7 @@ import './Navigation.scss' import clsx from 'clsx' import { useMountedLogic, useValues } from 'kea' import { BillingAlertsV2 } from 'lib/components/BillingAlertsV2' -import { CommandPalette } from 'lib/components/CommandPalette/CommandPalette' +import { CommandBar } from 'lib/components/CommandBar/CommandBar' import { FlaggedFeature } from 'lib/components/FlaggedFeature' import { FEATURE_FLAGS } from 'lib/constants' import { ReactNode, useEffect } from 'react' @@ -66,7 +66,7 @@ export function Navigation({ {!mobileLayout && } - + ) } diff --git a/frontend/src/layout/navigation-3000/components/TopBar.scss b/frontend/src/layout/navigation-3000/components/TopBar.scss index d9bd2338e54fe..3d6aca2b4aa07 100644 --- a/frontend/src/layout/navigation-3000/components/TopBar.scss +++ b/frontend/src/layout/navigation-3000/components/TopBar.scss @@ -1,7 +1,5 @@ // TODO: Remove legacy scss files -@import '../../navigation/TopBar/TopBar'; @import '../../navigation/SideBar/SideBar'; -@import '../../navigation/Breadcrumbs/Breadcrumbs'; .TopBar3000 { --breadcrumbs-compaction-rate: 0; diff --git a/frontend/src/layout/navigation-3000/sidepanel/panels/activity/NotificationBell.tsx b/frontend/src/layout/navigation-3000/sidepanel/panels/activity/NotificationBell.tsx deleted file mode 100644 index a83b4903c538f..0000000000000 --- a/frontend/src/layout/navigation-3000/sidepanel/panels/activity/NotificationBell.tsx +++ /dev/null @@ -1,70 +0,0 @@ -import './NotificationsBell.scss' - -import { IconChevronDown } from '@posthog/icons' -import clsx from 'clsx' -import { useActions, useValues } from 'kea' -import { ActivityLogRow } from 'lib/components/ActivityLog/ActivityLog' -import { usePageVisibility } from 'lib/hooks/usePageVisibility' -import { 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-3000/sidepanel/panels/activity/notificationsLogic' - -export function NotificationBell(): JSX.Element { - const { unreadCount, hasNotifications, notifications, isNotificationPopoverOpen, hasUnread } = - useValues(notificationsLogic) - const { toggleNotificationsPopover, togglePolling } = useActions(notificationsLogic) - - usePageVisibility((pageIsVisible) => { - togglePolling(pageIsVisible) - }) - - return ( - (isNotificationPopoverOpen ? toggleNotificationsPopover() : null)} - overlay={ -
-
- Notifications{' '} - - Beta - -
-

- Notifications shows you changes others make to{' '} - Insights and{' '} - Feature Flags that you created. Come join{' '} - our community forum and tell us what else - should be here! -

- - {hasNotifications ? ( - notifications.map((logItem, index) => ( - - )) - ) : ( -
You're all caught up
- )} -
- } - className="NotificationsBell-Popover" - > -
- - - - -
- - ) -} diff --git a/frontend/src/layout/navigation-3000/sidepanel/panels/activity/NotificationsBell.scss b/frontend/src/layout/navigation-3000/sidepanel/panels/activity/NotificationsBell.scss deleted file mode 100644 index 8cc3d12d58a58..0000000000000 --- a/frontend/src/layout/navigation-3000/sidepanel/panels/activity/NotificationsBell.scss +++ /dev/null @@ -1,4 +0,0 @@ -.NotificationsBell-Popover { - z-index: var(--z-notifications-popover); - max-height: 90vh; -} diff --git a/frontend/src/layout/navigation/Breadcrumbs/Breadcrumbs.scss b/frontend/src/layout/navigation/Breadcrumbs/Breadcrumbs.scss deleted file mode 100644 index d2b210f4c7e7d..0000000000000 --- a/frontend/src/layout/navigation/Breadcrumbs/Breadcrumbs.scss +++ /dev/null @@ -1,34 +0,0 @@ -.Breadcrumbs { - display: flex; - align-items: center; - width: 100%; - margin-top: 1rem; - overflow-x: auto; - cursor: default; -} - -.Breadcrumbs__breadcrumb { - display: flex; - gap: 0.5rem; - align-items: center; - font-weight: var(--font-medium); - white-space: pre; - user-select: none; - - &--current { - color: var(--default); - cursor: default; - } - - &--actionable { - color: var(--primary-3000); - cursor: pointer; - } -} - -.Breadcrumbs__separator { - flex-shrink: 0; - margin: 0 0.5rem; - font-size: 1rem; - color: var(--primary-alt); -} diff --git a/frontend/src/layout/navigation/Breadcrumbs/Breadcrumbs.tsx b/frontend/src/layout/navigation/Breadcrumbs/Breadcrumbs.tsx deleted file mode 100644 index 461587697bfc5..0000000000000 --- a/frontend/src/layout/navigation/Breadcrumbs/Breadcrumbs.tsx +++ /dev/null @@ -1,72 +0,0 @@ -import './Breadcrumbs.scss' - -import { IconChevronDown } from '@posthog/icons' -import clsx from 'clsx' -import { useValues } from 'kea' -import { IconChevronRight } from 'lib/lemon-ui/icons' -import { Link } from 'lib/lemon-ui/Link' -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) - - let breadcrumbContent = ( -
{ - breadcrumb.popover && setPopoverShown(!popoverShown) - }} - data-attr={`breadcrumb-${index}`} - > - {breadcrumb.symbol} - {breadcrumb.name} - {breadcrumb.popover && } -
- ) - - if (breadcrumb.path) { - breadcrumbContent = {breadcrumbContent} - } - - if (breadcrumb.popover) { - return ( - { - if (popoverShown) { - setPopoverShown(false) - } - }} - > - {breadcrumbContent} - - ) - } - - return breadcrumbContent -} - -export function Breadcrumbs(): JSX.Element | null { - const { firstBreadcrumb, tailBreadcrumbs } = useValues(breadcrumbsLogic) - - return firstBreadcrumb ? ( -
- - {tailBreadcrumbs.map((breadcrumb, index) => ( - - - - - ))} -
- ) : null -} diff --git a/frontend/src/layout/navigation/Breadcrumbs/breadcrumbsLogic.tsx b/frontend/src/layout/navigation/Breadcrumbs/breadcrumbsLogic.tsx index ec769563d9777..7d15f44db066d 100644 --- a/frontend/src/layout/navigation/Breadcrumbs/breadcrumbsLogic.tsx +++ b/frontend/src/layout/navigation/Breadcrumbs/breadcrumbsLogic.tsx @@ -1,5 +1,3 @@ -import './Breadcrumbs.scss' - import { actions, connect, kea, listeners, path, props, reducers, selectors } from 'kea' import { subscriptions } from 'kea-subscriptions' import { Lettermark } from 'lib/lemon-ui/Lettermark' diff --git a/frontend/src/layout/navigation/Navigation.stories.tsx b/frontend/src/layout/navigation/Navigation.stories.tsx deleted file mode 100644 index 71d2903d628a3..0000000000000 --- a/frontend/src/layout/navigation/Navigation.stories.tsx +++ /dev/null @@ -1,91 +0,0 @@ -import { LemonButton, LemonTable } from '@posthog/lemon-ui' -import { Meta } from '@storybook/react' -import { useActions } from 'kea' -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: { - layout: 'fullscreen', - viewMode: 'story', - }, -} -export default meta -function BaseAppPage(): JSX.Element { - return ( - <> - - -
- New gizmo} - /> - -
- - - ) -} - -export function AppPageWithSideBarHidden(): JSX.Element { - const { toggleSideBarBase, toggleSideBarMobile } = useActions(navigationLogic) - - useEffect(() => { - toggleSideBarBase(false) - toggleSideBarMobile(false) - }, []) - - return -} - -export function AppPageWithSideBarShown(): JSX.Element { - const { toggleSideBarBase, toggleSideBarMobile } = useActions(navigationLogic) - - useEffect(() => { - toggleSideBarBase(true) - toggleSideBarMobile(true) - }, []) - - return -} diff --git a/frontend/src/layout/navigation/Navigation.tsx b/frontend/src/layout/navigation/Navigation.tsx index 5dbdb204a2c5f..a98f6523756eb 100644 --- a/frontend/src/layout/navigation/Navigation.tsx +++ b/frontend/src/layout/navigation/Navigation.tsx @@ -1,41 +1,9 @@ -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' -export function Navigation({ - children, - sceneConfig, -}: { - children: ReactNode - sceneConfig: SceneConfig | null -}): JSX.Element { +export function Navigation(): JSX.Element { return ( -
- - -
- {sceneConfig?.layout !== 'plain' && ( - <> - - {!sceneConfig?.hideProjectNotice && } - - - )} - {children} -
- -
+ +
+ ) } diff --git a/frontend/src/layout/navigation/TopBar/Announcement.scss b/frontend/src/layout/navigation/TopBar/Announcement.scss new file mode 100644 index 0000000000000..31e722dd2682b --- /dev/null +++ b/frontend/src/layout/navigation/TopBar/Announcement.scss @@ -0,0 +1,51 @@ +@import '../../../styles/mixins'; + +.Announcement { + display: flex; + flex-shrink: 0; + align-items: center; + justify-content: center; + height: 3rem; + padding: 0 1rem 0 0.5rem; // padding is larger on the right to accommodate the close button + font-size: 1rem; + font-weight: 500; + color: white; + text-align: center; + background: #000; + transition: margin 200ms ease; + + &.Announcement--hidden { + margin-top: -3rem; + } + + p { + margin: 0; + } + + b, + strong { + font-weight: 700; + } + + a { + color: var(--brand-red); + text-decoration: underline; + } + + @include screen($sm) { + padding: 0 1rem; + } +} + +.Announcement__close { + position: absolute; + right: 0.5rem; + display: flex; + padding: 0.125rem; + font-size: 1.25rem; + cursor: pointer; + + @include screen($sm) { + right: 1rem; + } +} diff --git a/frontend/src/layout/navigation/TopBar/Announcement.tsx b/frontend/src/layout/navigation/TopBar/Announcement.tsx index 04fc851df88e5..294c1cfeb9f4f 100644 --- a/frontend/src/layout/navigation/TopBar/Announcement.tsx +++ b/frontend/src/layout/navigation/TopBar/Announcement.tsx @@ -1,7 +1,8 @@ +import './Announcement.scss' + 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' @@ -9,8 +10,6 @@ import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic' import { announcementLogic, AnnouncementType } from '~/layout/navigation/TopBar/announcementLogic' -window.process = MOCK_NODE_PROCESS - export function Announcement(): JSX.Element | null { const { shownAnnouncementType, cloudAnnouncement, closable } = useValues(announcementLogic) const { preflight } = useValues(preflightLogic) diff --git a/frontend/src/layout/navigation/TopBar/SitePopover.scss b/frontend/src/layout/navigation/TopBar/SitePopover.scss new file mode 100644 index 0000000000000..079c647e359f6 --- /dev/null +++ b/frontend/src/layout/navigation/TopBar/SitePopover.scss @@ -0,0 +1,46 @@ +@import '../../../styles/mixins'; + +.SitePopover { + min-width: 16rem; + max-width: 22rem; +} + +.SitePopover__side-link { + margin-left: 0.5rem; + font-size: 0.8125rem; + font-weight: 600; + color: var(--primary-3000); + text-align: right; +} + +.SitePopover__section { + width: 100%; + padding: 0.5rem 0; + border-bottom: 1px solid var(--border); + + &:first-child { + padding-top: 0; + } + + &:last-child { + padding-bottom: 0; + border-bottom: none; + } +} + +.AccountInfo { + display: flex; + align-items: center; +} + +.AccountInfo__identification { + width: 100%; + margin-left: 0.5rem; + overflow: hidden; +} + +.AccessLevelIndicator { + margin-left: 0.5rem; + font-size: 0.625rem; + text-transform: uppercase; +} diff --git a/frontend/src/layout/navigation/TopBar/SitePopover.tsx b/frontend/src/layout/navigation/TopBar/SitePopover.tsx index e4455a04f1087..8b6badc11ff04 100644 --- a/frontend/src/layout/navigation/TopBar/SitePopover.tsx +++ b/frontend/src/layout/navigation/TopBar/SitePopover.tsx @@ -1,4 +1,6 @@ -import { IconChevronDown, IconFeatures, IconLive } from '@posthog/icons' +import './SitePopover.scss' + +import { IconFeatures, IconLive } from '@posthog/icons' import { LemonButtonPropsBase } from '@posthog/lemon-ui' import clsx from 'clsx' import { useActions, useValues } from 'kea' @@ -6,7 +8,6 @@ import { IconBill, IconCheckmark, IconCorporate, - IconExclamation, IconLogout, IconOffline, IconPlus, @@ -17,7 +18,6 @@ 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 { eventUsageLogic } from 'lib/utils/eventUsageLogic' @@ -98,7 +98,7 @@ function CurrentOrganization({ organization }: { organization: OrganizationBasic to={urls.settings('organization')} onClick={closeSitePopover} > -
+
{organization.name}
@@ -301,26 +301,3 @@ export function SitePopoverOverlay(): JSX.Element { ) } - -export function SitePopover(): JSX.Element { - const { user } = useValues(userLogic) - const { isSitePopoverOpen, systemStatusHealthy } = useValues(navigationLogic) - const { toggleSitePopover, closeSitePopover } = useActions(navigationLogic) - - return ( - } - > -
-
- - {!systemStatusHealthy && } -
- -
- - ) -} diff --git a/frontend/src/layout/navigation/TopBar/TopBar.scss b/frontend/src/layout/navigation/TopBar/TopBar.scss deleted file mode 100644 index 55803cdd6ef71..0000000000000 --- a/frontend/src/layout/navigation/TopBar/TopBar.scss +++ /dev/null @@ -1,249 +0,0 @@ -@import '../../../styles/mixins'; - -.TopBar { - position: sticky; - top: 0; - z-index: var(--z-main-nav); - display: flex; - gap: 1rem; - align-items: center; - justify-content: space-between; - height: 3.5rem; - padding: 0.5rem; - background: var(--bg-bridge); - border-bottom: 1px solid var(--border); - - @include screen($sm) { - padding: 0.5rem 1rem; - } -} - -.TopBar__segment { - display: flex; - align-items: center; - height: 100%; - - &--left { - flex-grow: 1; - } - - &--left > * + * { - margin-left: 1rem; - } - - &--right > * + * { - margin-left: 1rem; - } -} - -.TopBar__hamburger { - display: flex; - height: 1.5rem; - font-size: 1.5rem; - cursor: pointer; - user-select: none; -} - -.TopBar__logo { - flex-shrink: 0; - width: 40px; - overflow: hidden; - - svg { - vertical-align: middle; - } - - @include screen($md) { - display: flex; - align-items: center; - width: auto; - overflow: hidden; - font-size: 1rem; - } -} - -.TopBar__lightning-mode-box { - background: var(--bridge) !important; - - .LemonSwitch__slider { - background-color: var(--border) !important; - } -} - -.Announcement { - display: flex; - flex-shrink: 0; - align-items: center; - justify-content: center; - height: 3rem; - padding: 0 1rem 0 0.5rem; // padding is larger on the right to accommodate the close button - font-size: 1rem; - font-weight: 500; - color: white; - text-align: center; - background: #000; - transition: margin 200ms ease; - - &.Announcement--hidden { - margin-top: -3rem; - } - - p { - margin: 0; - } - - b, - strong { - font-weight: 700; - } - - a { - color: var(--brand-red); - text-decoration: underline; - } - - @include screen($sm) { - padding: 0 1rem; - } -} - -.Announcement__close { - position: absolute; - right: 0.5rem; - display: flex; - padding: 0.125rem; - font-size: 1.25rem; - cursor: pointer; - - @include screen($sm) { - right: 1rem; - } -} - -.SitePopover { - min-width: 16rem; - max-width: 22rem; -} - -.SitePopover__main-info { - flex-grow: 1; -} - -.SitePopover__side-link { - margin-left: 0.5rem; - font-size: 0.8125rem; - font-weight: 600; - color: var(--primary-3000); - text-align: right; -} - -.SitePopover__crumb { - display: flex; - align-items: center; - height: 2.5rem; - font-size: 1.5rem; - color: var(--primary-alt); - cursor: pointer; -} - -.SitePopover__profile-picture { - position: relative; -} - -.SitePopover__danger { - position: absolute; - top: -0.375rem; - right: -0.375rem; - box-sizing: content-box; - font-size: 0.75rem; - color: #fff; - background: var(--danger); - border: 2px solid var(--bg-bridge); - border-radius: 100%; -} - -.SitePopover__section { - width: 100%; - padding: 0.5rem 0; - border-bottom: 1px solid var(--border); - - &:first-child { - padding-top: 0; - } - - &:last-child { - padding-bottom: 0; - border-bottom: none; - } -} - -.AccountInfo { - display: flex; - align-items: center; -} - -.AccountInfo__identification { - width: 100%; - margin-left: 0.5rem; - overflow: hidden; -} - -.AccessLevelIndicator { - margin-left: 0.5rem; - font-size: 0.625rem; - text-transform: uppercase; -} - -.CheekyHog { - position: absolute; - top: -0.2rem; - animation-timing-function: ease-out; - animation-delay: 0s; - animation-fill-mode: both; -} - -.CheekyHog--peek { - animation-name: CheekyHog__Peek; - animation-duration: 1s; - animation-iteration-count: 1; -} - -.CheekyHog--hide { - animation-name: CheekyHog__Hide; - animation-duration: 1s; - animation-iteration-count: 1; -} - -@keyframes CheekyHog__Peek { - 0% { - left: 0; - transform: rotate(0); - } - - 50% { - left: -0.5rem; - transform: rotate(-20deg); - } - - 100% { - left: -1.45rem; - transform: rotate(-45deg); - } -} - -@keyframes CheekyHog__Hide { - 0% { - left: -1.45rem; - transform: rotate(-45deg); - } - - 50% { - left: -0.5rem; - transform: rotate(-20deg); - } - - 100% { - left: 0; - transform: rotate(0); - } -} diff --git a/frontend/src/layout/navigation/TopBar/TopBar.tsx b/frontend/src/layout/navigation/TopBar/TopBar.tsx deleted file mode 100644 index cf9f4125dcdb4..0000000000000 --- a/frontend/src/layout/navigation/TopBar/TopBar.tsx +++ /dev/null @@ -1,120 +0,0 @@ -import './TopBar.scss' - -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 { YearInHogButton } from '~/layout/navigation/TopBar/YearInHogButton' -import { NotificationBell } from '~/layout/navigation-3000/sidepanel/panels/activity/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 { - const { isSideBarShown, noSidebar, minimalTopBar, mobileLayout } = useValues(navigationLogic) - const { toggleSideBarBase, toggleSideBarMobile } = useActions(navigationLogic) - const { groupNamesTaxonomicTypes } = useValues(groupsModel) - const { featureFlags } = useValues(featureFlagLogic) - const { currentOrganization } = useValues(organizationLogic) - const { isProjectSwitcherShown } = useValues(topBarLogic) - const { toggleProjectSwitcher, hideProjectSwitcher } = useActions(topBarLogic) - - const groupTypes = [ - TaxonomicFilterGroupType.Events, - TaxonomicFilterGroupType.Persons, - TaxonomicFilterGroupType.Actions, - TaxonomicFilterGroupType.Cohorts, - TaxonomicFilterGroupType.Insights, - TaxonomicFilterGroupType.FeatureFlags, - TaxonomicFilterGroupType.Plugins, - TaxonomicFilterGroupType.Experiments, - TaxonomicFilterGroupType.Dashboards, - TaxonomicFilterGroupType.Notebooks, - ...groupNamesTaxonomicTypes, - ] - - return ( - <> - -
-
- {!noSidebar && ( -
(mobileLayout ? toggleSideBarMobile() : toggleSideBarBase())} - > - {isSideBarShown ? : } -
- )} - - - - {!minimalTopBar && ( - <> -
- -
- - - )} -
-
- {!minimalTopBar ? ( - <> - {!!featureFlags[FEATURE_FLAGS.YEAR_IN_HOG] && - window.POSTHOG_APP_CONTEXT?.year_in_hog_url && ( - - )} - - - - ) : ( - currentOrganization?.teams && - currentOrganization.teams.length > 1 && ( -
- } - onClick={() => toggleProjectSwitcher()} - dropdown={{ - visible: isProjectSwitcherShown, - onClickOutside: hideProjectSwitcher, - overlay: , - actionable: true, - placement: 'top-end', - }} - type="secondary" - fullWidth - > - Switch project - -
- ) - )} - - -
-
- - - ) -} diff --git a/frontend/src/layout/navigation/TopBar/YearInHogButton.scss b/frontend/src/layout/navigation/TopBar/YearInHogButton.scss index 1c5feb51eeecc..f61f0ed645ac4 100644 --- a/frontend/src/layout/navigation/TopBar/YearInHogButton.scss +++ b/frontend/src/layout/navigation/TopBar/YearInHogButton.scss @@ -2,3 +2,57 @@ background-color: var(--bg-3000); border-radius: var(--radius); } + +.CheekyHog { + position: absolute; + top: -0.2rem; + animation-timing-function: ease-out; + animation-delay: 0s; + animation-fill-mode: both; +} + +.CheekyHog--peek { + animation-name: CheekyHog__Peek; + animation-duration: 1s; + animation-iteration-count: 1; +} + +.CheekyHog--hide { + animation-name: CheekyHog__Hide; + animation-duration: 1s; + animation-iteration-count: 1; +} + +@keyframes CheekyHog__Peek { + 0% { + left: 0; + transform: rotate(0); + } + + 50% { + left: -0.5rem; + transform: rotate(-20deg); + } + + 100% { + left: -1.45rem; + transform: rotate(-45deg); + } +} + +@keyframes CheekyHog__Hide { + 0% { + left: -1.45rem; + transform: rotate(-45deg); + } + + 50% { + left: -0.5rem; + transform: rotate(-20deg); + } + + 100% { + left: 0; + transform: rotate(0); + } +} diff --git a/frontend/src/layout/navigation/TopBar/topBarLogic.ts b/frontend/src/layout/navigation/TopBar/topBarLogic.ts deleted file mode 100644 index a1c2f8ce00a70..0000000000000 --- a/frontend/src/layout/navigation/TopBar/topBarLogic.ts +++ /dev/null @@ -1,20 +0,0 @@ -import { actions, kea, path, reducers } from 'kea' - -import type { topBarLogicType } from './topBarLogicType' - -export const topBarLogic = kea([ - path(['layout', 'navigation', 'TopBar', 'topBarLogic']), - actions({ - toggleProjectSwitcher: true, - hideProjectSwitcher: true, - }), - reducers({ - isProjectSwitcherShown: [ - false, - { - toggleProjectSwitcher: (state) => !state, - hideProjectSwitcher: () => false, - }, - ], - }), -]) diff --git a/frontend/src/layout/navigation/navigationLogic.ts b/frontend/src/layout/navigation/navigationLogic.ts index 0fa4d1711161c..7237fee9bc9a0 100644 --- a/frontend/src/layout/navigation/navigationLogic.ts +++ b/frontend/src/layout/navigation/navigationLogic.ts @@ -26,8 +26,6 @@ export const navigationLogic = kea([ actions: [eventUsageLogic, ['reportProjectNoticeDismissed']], })), actions({ - toggleSideBarBase: (override?: boolean) => ({ override }), // Only use the override for testing - toggleSideBarMobile: (override?: boolean) => ({ override }), // Only use the override for testing toggleActivationSideBar: true, showActivationSideBar: true, hideActivationSideBar: true, @@ -61,18 +59,11 @@ export const navigationLogic = kea([ })), reducers({ // Non-mobile base - isSideBarShownBase: [ - true, - { persist: true }, - { - toggleSideBarBase: (state, { override }) => override ?? !state, - }, - ], + isSideBarShownBase: [true, { persist: true }, {}], // Mobile, applied on top of base, so that the sidebar does not show up annoyingly when shrinking the window isSideBarShownMobile: [ false, { - toggleSideBarMobile: (state, { override }) => override ?? !state, hideSideBarMobile: () => false, }, ], @@ -120,16 +111,10 @@ export const navigationLogic = kea([ (s) => [s.fullscreen, s.sceneConfig], (fullscreen, sceneConfig) => fullscreen || sceneConfig?.layout === 'plain', ], - minimalTopBar: [ - (s) => [s.sceneConfig], - (sceneConfig) => { - return sceneConfig?.layout === 'plain' && !sceneConfig.allowUnauthenticated - }, - ], isSideBarShown: [ - (s) => [s.mobileLayout, s.isSideBarShownBase, s.isSideBarShownMobile, s.noSidebar], - (mobileLayout, isSideBarShownBase, isSideBarShownMobile, noSidebar) => - !noSidebar && (mobileLayout ? isSideBarShownMobile : isSideBarShownBase), + (s) => [s.mobileLayout, s.isSideBarShownMobile, s.noSidebar], + (mobileLayout, isSideBarShownMobile, noSidebar) => + !noSidebar && (mobileLayout ? isSideBarShownMobile : true), ], isActivationSideBarShown: [ (s) => [s.mobileLayout, s.isActivationSideBarShownBase, s.isSideBarShownMobile, s.noSidebar], diff --git a/frontend/src/lib/components/ActivationSidebar/ActivationSidebarToggle.tsx b/frontend/src/lib/components/ActivationSidebar/ActivationSidebarToggle.tsx deleted file mode 100644 index 6e2675bfc6741..0000000000000 --- a/frontend/src/lib/components/ActivationSidebar/ActivationSidebarToggle.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import { LemonButton } from '@posthog/lemon-ui' -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 => { - const { mobileLayout } = useValues(navigationLogic) - const { toggleActivationSideBar } = useActions(navigationLogic) - const { activeTasks, completionPercent, isReady, hasCompletedAllTasks } = useValues(activationLogic) - - if (!isReady || hasCompletedAllTasks) { - return null - } - return ( - activeTasks.length} - strokeWidth={16} - strokeColor="#345cff" // primary-light - /> - } - > - {!mobileLayout && ( -
-

Quick Start

-

{activeTasks.length} still to go

-
- )} - - ) -} diff --git a/frontend/src/lib/components/CommandPalette/CommandPalette.tsx b/frontend/src/lib/components/CommandPalette/CommandPalette.tsx deleted file mode 100644 index f273b34c66c32..0000000000000 --- a/frontend/src/lib/components/CommandPalette/CommandPalette.tsx +++ /dev/null @@ -1,6 +0,0 @@ -import { CommandBar } from '../CommandBar/CommandBar' - -/** Use the new Cmd+K search when the respective feature flag is enabled. */ -export function CommandPalette(): JSX.Element { - return -} diff --git a/frontend/src/lib/components/UniversalSearch/UniversalSearch.scss b/frontend/src/lib/components/UniversalSearch/UniversalSearch.scss deleted file mode 100644 index f327ff82c96be..0000000000000 --- a/frontend/src/lib/components/UniversalSearch/UniversalSearch.scss +++ /dev/null @@ -1,33 +0,0 @@ -@import '../../../styles/mixins'; - -.universal-search-box { - max-width: 15rem; - height: 100%; - cursor: pointer; - transition: 200ms ease margin; - - .ant-input-affix-wrapper, - input { - background: var(--bg-bridge); - } - - @include screen($sm) { - display: flex; - } -} - -.universal-search-popover { - display: flex; - flex-direction: column; - background: var(--bg-light); - - &.force-minimum-width { - min-width: 300px; - } - - &.one-taxonomic-tab { - .taxonomic-infinite-list { - margin-top: 10px; - } - } -} diff --git a/frontend/src/lib/components/UniversalSearch/UniversalSearchPopover.tsx b/frontend/src/lib/components/UniversalSearch/UniversalSearchPopover.tsx deleted file mode 100644 index d7f58130d3c7e..0000000000000 --- a/frontend/src/lib/components/UniversalSearch/UniversalSearchPopover.tsx +++ /dev/null @@ -1,206 +0,0 @@ -import './UniversalSearch.scss' - -import clsx from 'clsx' -import { useMountedLogic, useValues } from 'kea' -import { combineUrl, router } from 'kea-router' -import { useEventListener } from 'lib/hooks/useEventListener' -import { LemonButtonWithDropdownProps } from 'lib/lemon-ui/LemonButton' -import { LemonInput } from 'lib/lemon-ui/LemonInput/LemonInput' -import { Popover } from 'lib/lemon-ui/Popover' -import { useState } from 'react' -import { experimentsLogic } from 'scenes/experiments/experimentsLogic' -import { PluginSelectionType, pluginsLogic } from 'scenes/plugins/pluginsLogic' -import { urls } from 'scenes/urls' - -import { navigationLogic } from '~/layout/navigation/navigationLogic' -import { - ActionType, - ChartDisplayType, - CohortType, - EventDefinition, - Experiment, - FeatureFlagType, - Group, - InsightModel, - InsightType, - PersonType, -} from '~/types' - -import { TaxonomicFilter } from '../TaxonomicFilter/TaxonomicFilter' -import { taxonomicFilterLogic } from '../TaxonomicFilter/taxonomicFilterLogic' -import { TaxonomicFilterGroupType, TaxonomicFilterLogicProps, TaxonomicFilterValue } from '../TaxonomicFilter/types' - -export interface UniversalSearchPopoverProps - extends Omit { - groupType: TaxonomicFilterGroupType - value?: ValueType - onChange?: (value: ValueType, groupType: TaxonomicFilterGroupType, item: SearchDefinitionTypes) => void - groupTypes?: TaxonomicFilterGroupType[] - renderValue?: (value: ValueType) => JSX.Element - dataAttr?: string - placeholder?: React.ReactNode - dropdownMatchSelectWidth?: boolean - allowClear?: boolean -} - -type SearchDefinitionTypes = - | EventDefinition - | CohortType - | ActionType - | Experiment - | PersonType - | Group - | FeatureFlagType - | InsightModel - | PluginSelectionType - -function redirectOnSelectItems( - value: TaxonomicFilterValue, - groupType: TaxonomicFilterGroupType, - item: SearchDefinitionTypes -): void { - if (value === null) { - return - } - if (groupType === TaxonomicFilterGroupType.Events) { - router.actions.push( - combineUrl( - urls.insightNew({ - insight: InsightType.TRENDS, - interval: 'day', - display: ChartDisplayType.ActionsLineGraph, - events: [{ id: value, name: value, type: 'events', math: 'dau' }], - }) - ).url - ) - } else if (groupType === TaxonomicFilterGroupType.Actions) { - router.actions.push( - combineUrl( - urls.insightNew({ - insight: InsightType.TRENDS, - interval: 'day', - display: ChartDisplayType.ActionsLineGraph, - actions: [ - { - id: (item as ActionType).id, - name: (item as ActionType).name, - type: 'actions', - order: 0, - }, - ], - }) - ).url - ) - } else if (groupType === TaxonomicFilterGroupType.Cohorts) { - router.actions.push(urls.cohort(value)) - } else if (groupType === TaxonomicFilterGroupType.Persons) { - router.actions.push(urls.personByDistinctId(String(value))) - } else if (groupType.startsWith(TaxonomicFilterGroupType.GroupNamesPrefix)) { - router.actions.push(urls.group((item as Group).group_type_index, String(value))) - } else if (groupType === TaxonomicFilterGroupType.Insights) { - router.actions.push(urls.insightView((item as InsightModel).short_id)) - } else if (groupType === TaxonomicFilterGroupType.FeatureFlags) { - router.actions.push(urls.featureFlag(value)) - } else if (groupType === TaxonomicFilterGroupType.Experiments) { - router.actions.push(urls.experiment(value)) - } else if (groupType === TaxonomicFilterGroupType.Plugins) { - router.actions.push( - combineUrl(urls.projectApps(), { - name: (item as PluginSelectionType).name, - }).url - ) - } else if (groupType === TaxonomicFilterGroupType.Dashboards) { - router.actions.push(urls.dashboard(value)) - } else if (groupType === TaxonomicFilterGroupType.Notebooks) { - router.actions.push(urls.notebook(String(value))) - } -} - -export function UniversalSearchPopover({ - groupType, - value, - onChange, - groupTypes, - dataAttr, - fullWidth = true, -}: UniversalSearchPopoverProps): JSX.Element { - // Ensure some logics are mounted - useMountedLogic(experimentsLogic) - useMountedLogic(pluginsLogic) - - const [visible, setVisible] = useState(false) - - const { isSideBarShown } = useValues(navigationLogic) - const taxonomicFilterLogicProps: TaxonomicFilterLogicProps = { - groupType, - value, - onChange: ({ type }, payload, item) => { - redirectOnSelectItems(payload, type, item) - onChange?.(payload, type, item) - setVisible(false) - }, - taxonomicGroupTypes: groupTypes ?? [groupType], - optionsFromProp: undefined, - popoverEnabled: true, - selectFirstItem: true, - taxonomicFilterLogicKey: 'universalSearch', - } - const logic = taxonomicFilterLogic(taxonomicFilterLogicProps) - const { searchQuery } = useValues(logic) - - // Command+S shortcut to get to universal search popover - useEventListener('keydown', (event) => { - if (event.key === 's' && (event.ctrlKey || event.metaKey)) { - event.preventDefault() - setVisible(!visible) - } - }) - - return ( -
- } - visible={visible} - placement="right-start" - fallbackPlacements={['bottom']} - onClickOutside={() => setVisible(false)} - middleware={[ - { - name: 'offset', - fn({ x, y, placement }) { - if (placement === 'right-start') { - return { y: y - 29, x: x - 253 } - } - return {} - }, - }, - ]} - > -
{ - e.preventDefault() - e.stopPropagation() - setVisible(!visible) - }} - className={clsx( - { 'w-full': fullWidth }, - '', - 'universal-search-box', - isSideBarShown && 'universal-search-box--sidebar-shown' - )} - > - {!visible && ( - - )} -
- -
- ) -} diff --git a/frontend/src/lib/lemon-ui/icons/icons.tsx b/frontend/src/lib/lemon-ui/icons/icons.tsx index 73940bced7069..f46dd433e29f1 100644 --- a/frontend/src/lib/lemon-ui/icons/icons.tsx +++ b/frontend/src/lib/lemon-ui/icons/icons.tsx @@ -512,18 +512,6 @@ export function IconMenu(props: LemonIconProps): JSX.Element { ) } -/** Material Design Menu Open icon. */ -export function IconMenuOpen(props: LemonIconProps): JSX.Element { - return ( - - - - ) -} - /** Material Design Sync icon. */ export function IconSync(props: LemonIconProps): JSX.Element { return ( diff --git a/frontend/src/models/notebooksModel.ts b/frontend/src/models/notebooksModel.ts index 1678704bcf545..17104131ca3e0 100644 --- a/frontend/src/models/notebooksModel.ts +++ b/frontend/src/models/notebooksModel.ts @@ -36,7 +36,7 @@ export const openNotebook = async ( const thePanelLogic = notebookPanelLogic.findMounted() if (thePanelLogic && target === NotebookTarget.Popover) { - notebookPanelLogic.actions.selectNotebook(notebookId, { autofocus }) + thePanelLogic.actions.selectNotebook(notebookId, { autofocus }) } else { if (router.values.location.pathname === urls.notebook('new')) { router.actions.replace(urls.notebook(notebookId)) @@ -86,9 +86,7 @@ export const notebooksModel = kea([ notebooks: [ [] as NotebookListItemType[], { - createNotebook: async ({ title, location, content, onCreate }, breakpoint) => { - await breakpoint(100) - + createNotebook: async ({ title, location, content, onCreate }) => { const notebook = await api.notebooks.create({ title, content: defaultNotebookContent(title, content), diff --git a/frontend/src/styles/global.scss b/frontend/src/styles/global.scss index 45c21e1e367b3..0b0424caee499 100644 --- a/frontend/src/styles/global.scss +++ b/frontend/src/styles/global.scss @@ -452,36 +452,6 @@ input::-ms-clear { } } -.main-app-content { - position: relative; // So that scene-level is positioned correctly. - flex: 1; - width: 100%; - min-width: 0; - padding: 0 1rem 1rem; - background-color: var(--bg-light); - - &.main-app-content--plain { - padding: 0; - } - - &.main-app-content--container { - align-self: center; - max-width: 72rem; - - @include screen($xxl) { - max-width: 108rem; - } - } - - @include screen($sm) { - padding: 0 1rem 2rem; - } - - @include screen($lg) { - padding: 0 2rem 4rem; - } -} - // AntD overrrides, placed inside `body` to increase specifity (nicely avoiding the need for !important) body { // Until we have 3000 rolled out we fallback to standard colors diff --git a/playwright/e2e-vrt/README.md b/playwright/e2e-vrt/README.md index e2f5088f8ad48..56a1ae146640d 100644 --- a/playwright/e2e-vrt/README.md +++ b/playwright/e2e-vrt/README.md @@ -35,7 +35,7 @@ We're using Playwright to run visual regression tests against Storybook. To crea - Suggested Storybook container elements: - `#root` for components and - - `.main-app-content` for scenes + - `main` for scenes 3. Generate the reference images (you need to have Storybook running locally, i.e. on the Docker host machine): diff --git a/playwright/e2e-vrt/layout/Navigation.spec.ts b/playwright/e2e-vrt/layout/Navigation.spec.ts deleted file mode 100644 index 2af80117af5ad..0000000000000 --- a/playwright/e2e-vrt/layout/Navigation.spec.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { toId } from '../../helpers/storybook' -import { test } from '../../fixtures/storybook' - -test.describe('Navigation', () => { - // TODO: Remove when our Storybook test runner supports mobile viewports - test('App Page With Side Bar Hidden (Mobile)', async ({ storyPage }) => { - await storyPage.resizeToMobile() - await storyPage.goto(toId('Layout/Navigation', 'App Page With Side Bar Hidden')) - await storyPage.mainAppContent.waitFor() - await storyPage.expectFullPageScreenshot() - }) - - test('App Page With Side Bar Shown (Mobile)', async ({ storyPage }) => { - await storyPage.resizeToMobile() - await storyPage.goto(toId('Layout/Navigation', 'App Page With Side Bar Shown')) - await storyPage.mainAppContent.waitFor() - await storyPage.expectFullPageScreenshot() - }) -}) diff --git a/playwright/e2e-vrt/layout/Navigation.spec.ts-snapshots/Navigation-App-Page-With-Side-Bar-Hidden-Desktop-1-chromium-linux.png b/playwright/e2e-vrt/layout/Navigation.spec.ts-snapshots/Navigation-App-Page-With-Side-Bar-Hidden-Desktop-1-chromium-linux.png deleted file mode 100644 index f53e69c2b4512..0000000000000 Binary files a/playwright/e2e-vrt/layout/Navigation.spec.ts-snapshots/Navigation-App-Page-With-Side-Bar-Hidden-Desktop-1-chromium-linux.png and /dev/null differ diff --git a/playwright/e2e-vrt/layout/Navigation.spec.ts-snapshots/Navigation-App-Page-With-Side-Bar-Hidden-Mobile-1-chromium-linux.png b/playwright/e2e-vrt/layout/Navigation.spec.ts-snapshots/Navigation-App-Page-With-Side-Bar-Hidden-Mobile-1-chromium-linux.png index bbdca0cd4f17d..2c6380430086c 100644 Binary files a/playwright/e2e-vrt/layout/Navigation.spec.ts-snapshots/Navigation-App-Page-With-Side-Bar-Hidden-Mobile-1-chromium-linux.png and b/playwright/e2e-vrt/layout/Navigation.spec.ts-snapshots/Navigation-App-Page-With-Side-Bar-Hidden-Mobile-1-chromium-linux.png differ diff --git a/playwright/e2e-vrt/layout/Navigation.spec.ts-snapshots/Navigation-App-Page-With-Side-Bar-Shown-Desktop-1-chromium-linux.png b/playwright/e2e-vrt/layout/Navigation.spec.ts-snapshots/Navigation-App-Page-With-Side-Bar-Shown-Desktop-1-chromium-linux.png deleted file mode 100644 index 0dda6b93076e9..0000000000000 Binary files a/playwright/e2e-vrt/layout/Navigation.spec.ts-snapshots/Navigation-App-Page-With-Side-Bar-Shown-Desktop-1-chromium-linux.png and /dev/null differ diff --git a/playwright/e2e-vrt/layout/Navigation.spec.ts-snapshots/Navigation-App-Page-With-Side-Bar-Shown-Mobile-1-chromium-linux.png b/playwright/e2e-vrt/layout/Navigation.spec.ts-snapshots/Navigation-App-Page-With-Side-Bar-Shown-Mobile-1-chromium-linux.png index 31edd17b2e4fd..95ace13b254f9 100644 Binary files a/playwright/e2e-vrt/layout/Navigation.spec.ts-snapshots/Navigation-App-Page-With-Side-Bar-Shown-Mobile-1-chromium-linux.png and b/playwright/e2e-vrt/layout/Navigation.spec.ts-snapshots/Navigation-App-Page-With-Side-Bar-Shown-Mobile-1-chromium-linux.png differ diff --git a/playwright/pages/storybook.ts b/playwright/pages/storybook.ts index fe2369902be9b..4f990c81a3cf7 100644 --- a/playwright/pages/storybook.ts +++ b/playwright/pages/storybook.ts @@ -19,12 +19,10 @@ type ComponentScreenshotConfig = { export class StorybookStoryPage { readonly page: Page - readonly mainAppContent: Locator readonly storyRoot: Locator constructor(page: Page) { this.page = page - this.mainAppContent = page.locator('.main-app-content') this.storyRoot = page.locator('#storybook-root') } @@ -41,10 +39,6 @@ export class StorybookStoryPage { await expect(this.page).toHaveScreenshot({ maxDiffPixelRatio: 0.01 }) } - async expectSceneScreenshot(): Promise { - await expect(this.mainAppContent).toHaveScreenshot({ maxDiffPixelRatio: 0.01 }) - } - async expectComponentScreenshot({ pseudo } = {} as ComponentScreenshotConfig): Promise { const pseudoClasses = Object.entries(pseudo || {}).flatMap(([state, enabled]) => { return enabled ? `pseudo-${PSEUDO_STATES[state]}` : [] diff --git a/posthog/warehouse/models/table.py b/posthog/warehouse/models/table.py index 0291503763dec..8e57a0380edd3 100644 --- a/posthog/warehouse/models/table.py +++ b/posthog/warehouse/models/table.py @@ -30,6 +30,7 @@ "DateTime64": DateTimeDatabaseField, "DateTime32": DateTimeDatabaseField, "Date": DateDatabaseField, + "Date32": DateDatabaseField, "UInt8": IntegerDatabaseField, "UInt16": IntegerDatabaseField, "UInt32": IntegerDatabaseField,