diff --git a/frontend/src/layout/ErrorBoundary/ErrorBoundary.scss b/frontend/src/layout/ErrorBoundary/ErrorBoundary.scss index 2027e62542aba3..27b6e65688ae2f 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/Navigation.stories.tsx b/frontend/src/layout/navigation/Navigation.stories.tsx deleted file mode 100644 index b91f253e144995..00000000000000 --- a/frontend/src/layout/navigation/Navigation.stories.tsx +++ /dev/null @@ -1,70 +0,0 @@ -import { LemonButton, LemonTable } from '@posthog/lemon-ui' -import { Meta } from '@storybook/react' -import { PageHeader } from 'lib/components/PageHeader' - -import { SideBar } from './SideBar/SideBar' - -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 { - return -} - -export function AppPageWithSideBarShown(): JSX.Element { - return -} diff --git a/frontend/src/layout/navigation/Navigation.tsx b/frontend/src/layout/navigation/Navigation.tsx index 2ab49ea4b7c60d..a98f6523756eb7 100644 --- a/frontend/src/layout/navigation/Navigation.tsx +++ b/frontend/src/layout/navigation/Navigation.tsx @@ -1,37 +1,9 @@ -import clsx from 'clsx' -import { BillingAlertsV2 } from 'lib/components/BillingAlertsV2' -import { ReactNode } from 'react' -import { SceneConfig } from 'scenes/sceneTypes' - -import { ProjectNotice } from './ProjectNotice' import { SideBar } from './SideBar/SideBar' -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/styles/global.scss b/frontend/src/styles/global.scss index 45c21e1e367b3b..0b0424caee4991 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 e2f5088f8ad48c..56a1ae146640d8 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 2af80117af5adf..00000000000000 --- 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 f53e69c2b45129..00000000000000 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-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 0dda6b93076e94..00000000000000 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/pages/storybook.ts b/playwright/pages/storybook.ts index fe2369902be9b9..4f990c81a3cf72 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]}` : []