feat(electron): onboarding at first launch logic for client and web (#5183)

- Added a simple abstraction of persistent storage class.
- Different persistence solutions are provided for web and client.
    - web: stored in localStorage
    - client: stored in the application directory as `.json` file
- Define persistent app-config schema
- Add a new hook that can interactive with persistent-app-config reactively

tests/affine-cloud/e2e/collaboration.spec.ts

@@ -1,4 +1,4 @@
-import { test } from '@affine-test/kit/playwright';
+import { skipOnboarding, test } from '@affine-test/kit/playwright';
 import {
   addUserToWorkspace,
   createRandomUser,
@@ -56,6 +56,7 @@ test('can enable share page', async ({ page, browser }) => {
   // check share page is accessible
   {
     const context = await browser.newContext();
+    await skipOnboarding(context);
     const url: string = await page.evaluate(() =>
       navigator.clipboard.readText()
     );
@@ -97,6 +98,7 @@ test('share page with default edgeless', async ({ page, browser }) => {
   // check share page is accessible
   {
     const context = await browser.newContext();
+    await skipOnboarding(context);
     const url: string = await page.evaluate(() =>
       navigator.clipboard.readText()
     );
@@ -135,6 +137,7 @@ test('can collaborate with other user and name should display when editing', asy
   const workspaceId = currentUrl.split('/')[4];
   const userB = await createRandomUser();
   const context = await browser.newContext();
+  await skipOnboarding(context);
   const page2 = await context.newPage();
   await loginUser(page2, userB.email);
   await addUserToWorkspace(workspaceId, userB.id, 1 /* READ */);
@@ -205,6 +208,7 @@ test('can sync collections between different browser', async ({
 
   {
     const context = await browser.newContext();
+    await skipOnboarding(context);
     const page2 = await context.newPage();
     await loginUser(page2, user.email);
     await page2.goto(page.url());
@@ -268,6 +272,7 @@ test('can sync svg between different browsers', async ({ page, browser }) => {
 
   {
     const context = await browser.newContext();
+    await skipOnboarding(context);
     const page2 = await context.newPage();
     await loginUser(page2, user.email);
     await page2.goto(page.url());

tests/affine-local/e2e/image-preview.spec.ts

@@ -1,12 +1,12 @@
 /* eslint-disable unicorn/prefer-dom-node-dataset */
+import { test } from '@affine-test/kit/playwright';
 import { openHomePage } from '@affine-test/kit/utils/load-page';
 import {
   clickNewPageButton,
   getBlockSuiteEditorTitle,
   waitForEditorLoad,
 } from '@affine-test/kit/utils/page-logic';
-import type { Page } from '@playwright/test';
-import { expect, test } from '@playwright/test';
+import { expect, type Page } from '@playwright/test';
 import fs from 'fs';
 
 async function importImage(page: Page, url: string) {

tests/affine-local/e2e/theme.spec.ts

@@ -5,12 +5,12 @@ import { openHomePage } from '@affine-test/kit/utils/load-page';
 import { waitForEditorLoad } from '@affine-test/kit/utils/page-logic';
 import { expect } from '@playwright/test';
 
+test.use({
+  colorScheme: 'light',
+});
+
 // default could be anything, according to the system
-test('default white', async ({ browser }) => {
-  const context = await browser.newContext({
-    colorScheme: 'light',
-  });
-  const page = await context.newPage();
+test('default white', async ({ page }) => {
   await openHomePage(page);
   await waitForEditorLoad(page);
   const root = page.locator('html');

tests/affine-migration/e2e/basic.spec.ts

@@ -1,11 +1,12 @@
 import { patchDataEnhancement } from '@affine-test/kit/e2e-enhance/initializer';
 import { SnapshotStorage } from '@affine-test/kit/e2e-enhance/snapshot';
+import { test } from '@affine-test/kit/playwright';
 import { clickEdgelessModeButton } from '@affine-test/kit/utils/editor';
 import { coreUrl } from '@affine-test/kit/utils/load-page';
 import { waitForEditorLoad } from '@affine-test/kit/utils/page-logic';
 import { clickSideBarAllPageButton } from '@affine-test/kit/utils/sidebar';
 import type { Page } from '@playwright/test';
-import { expect, test } from '@playwright/test';
+import { expect } from '@playwright/test';
 
 async function open404PageToInitData(page: Page, version: string) {
   const snapshotStorage = new SnapshotStorage(version);

tests/kit/electron.ts

@@ -95,6 +95,8 @@ export const test = base.extend<{
       env.DEV_SERVER_URL = process.env.DEV_SERVER_URL;
     }
 
+    env.SKIP_ONBOARDING = '1';
+
     const electronApp = await electron.launch({
       args: [clonedDist],
       env,

tests/kit/playwright.ts

@@ -5,7 +5,7 @@ import path, { resolve } from 'node:path';
 import process from 'node:process';
 
 import type { Workspace } from '@blocksuite/store';
-import { test as baseTest } from '@playwright/test';
+import { type BrowserContext, test as baseTest } from '@playwright/test';
 
 export const rootDir = resolve(__dirname, '..', '..');
 // assert that the rootDir is the root of the project
@@ -32,6 +32,12 @@ type CurrentWorkspace = {
   blockSuiteWorkspace: Workspace;
 };
 
+export const skipOnboarding = async (context: BrowserContext) => {
+  await context.addInitScript(() => {
+    window.localStorage.setItem('app_config', '{"onBoarding":false}');
+  });
+};
+
 export const test = baseTest.extend<{
   workspace: {
     current: () => Promise<CurrentWorkspace>;
@@ -59,6 +65,9 @@ export const test = baseTest.extend<{
     });
   },
   context: async ({ context }, use) => {
+    // workaround for skipping onboarding redirect on the web
+    await skipOnboarding(context);
+
     if (enableCoverage) {
       await context.addInitScript(() =>
         window.addEventListener('beforeunload', () =>