refactor(core): new back&forward button base on workbench (#6012)

# feature:

## In Browser:
- hidden back&forward button in sidebar.
- back and forward is equal with `window.history.back()` `window.history.forward()`

## In Desktop:
- Back and forward can be controlled through the sidebar, cmdk, and shortcut keys.
- back and forward act on the currently **active** view.
- buttons change disable&enable style based on current active view history

# Refactor:

Move app-sidebar and app-container from @affine/component to @affine/core
This commit is contained in:
EYHN
2024-03-05 07:01:24 +00:00
parent b06aeb22dd
commit 7c76c25a9c
77 changed files with 625 additions and 349 deletions

View File

@@ -62,13 +62,13 @@ test('app sidebar router forward/back', async ({ page }) => {
await expect(getBlockSuiteEditorTitle(page)).toHaveText('test3');
}
await page.click('[data-testid="app-sidebar-arrow-button-back"]');
await page.click('[data-testid="app-sidebar-arrow-button-back"]');
await page.click('[data-testid="app-navigation-button-back"]');
await page.click('[data-testid="app-navigation-button-back"]');
{
await expect(getBlockSuiteEditorTitle(page)).toHaveText('test1');
}
await page.click('[data-testid="app-sidebar-arrow-button-forward"]');
await page.click('[data-testid="app-sidebar-arrow-button-forward"]');
await page.click('[data-testid="app-navigation-button-forward"]');
await page.click('[data-testid="app-navigation-button-forward"]');
{
await expect(getBlockSuiteEditorTitle(page)).toHaveText('test3');
}

View File

@@ -0,0 +1,44 @@
import { test } from '@affine-test/kit/playwright';
import { withCtrlOrMeta } from '@affine-test/kit/utils/keyboard';
import { openHomePage } from '@affine-test/kit/utils/load-page';
import {
clickNewPageButton,
getBlockSuiteEditorTitle,
waitForEditorLoad,
} from '@affine-test/kit/utils/page-logic';
import { clickSideBarAllPageButton } from '@affine-test/kit/utils/sidebar';
import { expect, type Page } from '@playwright/test';
const historyShortcut = async (page: Page, command: 'goBack' | 'goForward') => {
await withCtrlOrMeta(page, () =>
page.keyboard.press(command === 'goBack' ? '[' : ']', { delay: 300 })
);
};
test('back and forward buttons', async ({ page }) => {
await openHomePage(page);
await expect(page.getByTestId('app-navigation-button-back')).toBeHidden();
await expect(page.getByTestId('app-navigation-button-forward')).toBeHidden();
await clickNewPageButton(page);
await waitForEditorLoad(page);
const title = getBlockSuiteEditorTitle(page);
await title.fill('test1');
await clickSideBarAllPageButton(page);
await page.getByTestId('workspace-collections-button').click({ delay: 50 });
await page.waitForURL(url => url.pathname.endsWith('collection'));
await page.getByTestId('workspace-tags-button').click({ delay: 50 });
await page.waitForURL(url => url.pathname.endsWith('tag'));
await page.goBack();
await page.waitForURL(url => url.pathname.endsWith('collection'));
await page.goBack();
await page.waitForURL(url => url.pathname.endsWith('all'));
await historyShortcut(page, 'goBack');
await waitForEditorLoad(page);
await expect(getBlockSuiteEditorTitle(page)).toHaveText('test1');
});

View File

@@ -3,16 +3,16 @@ import {
AppSidebarFallback,
appSidebarOpenAtom,
SidebarSwitch,
} from '@affine/component/app-sidebar';
import { AddPageButton } from '@affine/component/app-sidebar';
import { CategoryDivider } from '@affine/component/app-sidebar';
import { navHeaderStyle } from '@affine/component/app-sidebar';
import { MenuLinkItem } from '@affine/component/app-sidebar';
import { QuickSearchInput } from '@affine/component/app-sidebar';
} from '@affine/core/components/app-sidebar';
import { AddPageButton } from '@affine/core/components/app-sidebar';
import { CategoryDivider } from '@affine/core/components/app-sidebar';
import { navHeaderStyle } from '@affine/core/components/app-sidebar';
import { MenuLinkItem } from '@affine/core/components/app-sidebar';
import { QuickSearchInput } from '@affine/core/components/app-sidebar';
import {
SidebarContainer,
SidebarScrollableContainer,
} from '@affine/component/app-sidebar';
} from '@affine/core/components/app-sidebar';
import { DeleteTemporarilyIcon, SettingsIcon } from '@blocksuite/icons';
import type { Meta, StoryFn } from '@storybook/react';
import { useAtom } from 'jotai';

View File

@@ -1,7 +1,7 @@
import {
type AddPageButtonProps,
AppUpdaterButton,
} from '@affine/component/app-sidebar';
} from '@affine/core/components/app-sidebar';
import type { Meta, StoryFn } from '@storybook/react';
import type { PropsWithChildren } from 'react';