feat(core): migration for created by and updated by fields (#12171)

packages/frontend/core/src/desktop/pages/workspace/all-page-new/all-page.tsx

@@ -15,6 +15,7 @@ import {
 } from '../../../../modules/workbench';
 import { AllDocSidebarTabs } from '../layouts/all-doc-sidebar-tabs';
 import * as styles from './all-page.css';
+import { MigrationAllDocsDataNotification } from './migration-data';
 export const AllPage = () => {
   const t = useI18n();
 
@@ -57,6 +58,7 @@ export const AllPage = () => {
       <ViewHeader></ViewHeader>
       <ViewBody>
         <div className={styles.body}>
+          <MigrationAllDocsDataNotification />
           <div>
             <Filters
               filters={explorerPreference.filters ?? []}

packages/frontend/core/src/desktop/pages/workspace/all-page-new/migration-data.css.ts

@@ -0,0 +1,31 @@
+import { cssVar } from '@toeverything/theme';
+import { cssVarV2 } from '@toeverything/theme/v2';
+import { style } from '@vanilla-extract/css';
+
+export const migrationDataNotificationContainer = style({
+  border: `1px solid ${cssVarV2('layer/insideBorder/border')}`,
+  padding: '12px 240px 12px 12px',
+  borderRadius: '8px',
+});
+
+export const migrationDataNotificationTitle = style({
+  fontSize: cssVar('fontBase'),
+  fontWeight: '600',
+  lineHeight: '24px',
+  color: cssVarV2('text/primary'),
+  paddingBottom: '8px',
+});
+
+export const migrationDataNotificationContent = style({
+  fontSize: cssVar('fontSm'),
+  color: cssVarV2('text/secondary'),
+  lineHeight: '22px',
+  paddingBottom: '16px',
+});
+
+export const migrationDataNotificationError = style({
+  fontSize: cssVar('fontSm'),
+  color: cssVarV2('status/error'),
+  lineHeight: '22px',
+  paddingBottom: '16px',
+});

packages/frontend/core/src/desktop/pages/workspace/all-page-new/migration-data.tsx

@@ -0,0 +1,58 @@
+import { Button } from '@affine/component';
+import { DocCreatedByUpdatedBySyncService } from '@affine/core/modules/cloud';
+import { UserFriendlyError } from '@affine/error';
+import { useI18n } from '@affine/i18n';
+import { useLiveData, useService } from '@toeverything/infra';
+import { useCallback, useMemo } from 'react';
+
+import * as styles from './migration-data.css';
+
+export const MigrationAllDocsDataNotification = () => {
+  const t = useI18n();
+  const docCreatedByUpdatedBySyncService = useService(
+    DocCreatedByUpdatedBySyncService
+  );
+  const needSync = useLiveData(docCreatedByUpdatedBySyncService.needSync$);
+  const syncing = useLiveData(docCreatedByUpdatedBySyncService.syncing$);
+  const error = useLiveData(docCreatedByUpdatedBySyncService.error$);
+  const errorMessage = useMemo(() => {
+    if (error) {
+      const userFriendlyError = UserFriendlyError.fromAny(error);
+      return t[`error.${userFriendlyError.name}`](userFriendlyError.data);
+    }
+    return null;
+  }, [error, t]);
+  const progress = useLiveData(docCreatedByUpdatedBySyncService.progress$);
+
+  const handleSync = useCallback(() => {
+    docCreatedByUpdatedBySyncService.sync();
+  }, [docCreatedByUpdatedBySyncService]);
+
+  if (!needSync) {
+    return null;
+  }
+
+  return (
+    <div className={styles.migrationDataNotificationContainer}>
+      <div className={styles.migrationDataNotificationTitle}>
+        {t['com.affine.migration-all-docs-notification.title']()}
+      </div>
+      <div className={styles.migrationDataNotificationContent}>
+        {t['com.affine.migration-all-docs-notification.content']()}
+      </div>
+
+      {error && (
+        <div className={styles.migrationDataNotificationError}>
+          {t['com.affine.migration-all-docs-notification.error']({
+            errorMessage: errorMessage ?? '',
+          })}
+        </div>
+      )}
+
+      <Button loading={syncing} onClick={handleSync}>
+        {t['com.affine.migration-all-docs-notification.button']()}
+        {syncing ? ` (${Math.floor(progress * 100)}%)...` : ''}
+      </Button>
+    </div>
+  );
+};