feat: add editor record (#7938)

fix CLOUD-58, CLOUD-61, CLOUD-62, PD-1607, PD-1608

packages/frontend/core/src/components/affine/page-properties/icons-mapping.tsx

@@ -89,6 +89,7 @@ export const iconNames = [
   'edgeless',
   'journal',
   'payment',
+  'createdEdited',
 ] as const satisfies fromLibIconName<LibIconComponentName>[];
 
 export type PagePropertyIcon = (typeof iconNames)[number];
@@ -109,6 +110,10 @@ export const getDefaultIconName = (
       return 'checkBoxCheckLinear';
     case 'number':
       return 'number';
+    case 'createdBy':
+      return 'createdEdited';
+    case 'updatedBy':
+      return 'createdEdited';
     default:
       return 'text';
   }

packages/frontend/core/src/components/affine/page-properties/page-properties-manager.ts

@@ -35,9 +35,16 @@ export const newPropertyTypes: PagePropertyType[] = [
   PagePropertyType.Number,
   PagePropertyType.Checkbox,
   PagePropertyType.Date,
+  PagePropertyType.CreatedBy,
+  PagePropertyType.UpdatedBy,
   // TODO(@Peng): add more
 ];
 
+export const readonlyPropertyTypes: PagePropertyType[] = [
+  PagePropertyType.CreatedBy,
+  PagePropertyType.UpdatedBy,
+];
+
 export class PagePropertiesMetaManager {
   constructor(private readonly adapter: WorkspacePropertiesAdapter) {}
 
@@ -95,6 +102,7 @@ export class PagePropertiesMetaManager {
       type,
       order: newOrder,
       icon: icon ?? getDefaultIconName(type),
+      readonly: readonlyPropertyTypes.includes(type) || undefined,
     } as const;
     this.customPropertiesSchema[id] = property;
     return property;

packages/frontend/core/src/components/affine/page-properties/property-row-value-renderer.tsx

@@ -1,14 +1,28 @@
-import { Checkbox, DatePicker, Menu } from '@affine/component';
+import { Avatar, Checkbox, DatePicker, Menu } from '@affine/component';
+import { CloudDocMetaService } from '@affine/core/modules/cloud/services/cloud-doc-meta';
 import type {
   PageInfoCustomProperty,
   PageInfoCustomPropertyMeta,
   PagePropertyType,
 } from '@affine/core/modules/properties/services/schema';
+import { WorkspaceFlavour } from '@affine/env/workspace';
 import { i18nTime, useI18n } from '@affine/i18n';
-import { DocService, useService } from '@toeverything/infra';
+import {
+  DocService,
+  useLiveData,
+  useService,
+  WorkspaceService,
+} from '@toeverything/infra';
 import { noop } from 'lodash-es';
 import type { ChangeEventHandler } from 'react';
-import { useCallback, useContext, useEffect, useRef, useState } from 'react';
+import {
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 
 import { managerContext } from './common';
 import * as styles from './styles.css';
@@ -190,6 +204,102 @@ export const TagsValue = () => {
   );
 };
 
+const CloudUserAvatar = (props: { type: 'CreatedBy' | 'UpdatedBy' }) => {
+  const cloudDocMetaService = useService(CloudDocMetaService);
+  const cloudDocMeta = useLiveData(cloudDocMetaService.cloudDocMeta.meta$);
+  const isRevalidating = useLiveData(
+    cloudDocMetaService.cloudDocMeta.isRevalidating$
+  );
+  const error = useLiveData(cloudDocMetaService.cloudDocMeta.error$);
+
+  useEffect(() => {
+    cloudDocMetaService.cloudDocMeta.revalidate();
+  }, [cloudDocMetaService]);
+
+  const user = useMemo(() => {
+    if (!cloudDocMeta) return null;
+    if (props.type === 'CreatedBy' && cloudDocMeta.createdBy) {
+      return {
+        name: cloudDocMeta.createdBy.name,
+        avatarUrl: cloudDocMeta.createdBy.avatarUrl,
+      };
+    } else if (props.type === 'UpdatedBy' && cloudDocMeta.updatedBy) {
+      return {
+        name: cloudDocMeta.updatedBy.name,
+        avatarUrl: cloudDocMeta.updatedBy.avatarUrl,
+      };
+    }
+    return null;
+  }, [cloudDocMeta, props.type]);
+
+  const t = useI18n();
+
+  if (!cloudDocMeta) {
+    if (isRevalidating) {
+      // TODO: loading ui
+      return null;
+    }
+    if (error) {
+      // error ui
+      return;
+    }
+    return null;
+  }
+  if (user) {
+    return (
+      <>
+        <Avatar url={user.avatarUrl || ''} name={user.name} size={20} />
+        <span>{user.name}</span>
+      </>
+    );
+  }
+  return (
+    <>
+      <Avatar name="?" size={20} />
+      <span>
+        {t['com.affine.page-properties.property-user-avatar-no-record']()}
+      </span>
+    </>
+  );
+};
+
+export const LocalUserValue = () => {
+  const t = useI18n();
+  return <span>{t['com.affine.page-properties.local-user']()}</span>;
+};
+
+export const CreatedUserValue = () => {
+  const workspaceService = useService(WorkspaceService);
+  const isCloud =
+    workspaceService.workspace.flavour === WorkspaceFlavour.AFFINE_CLOUD;
+
+  if (!isCloud) {
+    return <LocalUserValue />;
+  }
+
+  return (
+    <div className={styles.propertyRowValueUserCell}>
+      <CloudUserAvatar type="CreatedBy" />
+    </div>
+  );
+};
+
+export const UpdatedUserValue = () => {
+  const workspaceService = useService(WorkspaceService);
+  const isCloud =
+    workspaceService.workspace.flavour === WorkspaceFlavour.AFFINE_CLOUD;
+
+  if (!isCloud) {
+    return <LocalUserValue />;
+  }
+
+  return (
+    <div className={styles.propertyRowValueUserCell}>
+      <CloudUserAvatar type="UpdatedBy" />
+    </div>
+  );
+};
+
 export const propertyValueRenderers: Record<
   PagePropertyType,
   typeof DateValue
@@ -198,6 +308,8 @@ export const propertyValueRenderers: Record<
   checkbox: CheckboxValue,
   text: TextValue,
   number: NumberValue,
+  createdBy: CreatedUserValue,
+  updatedBy: UpdatedUserValue,
   // TODO(@Peng): fix following
   tags: TagsValue,
   progress: TextValue,

packages/frontend/core/src/components/affine/page-properties/styles.css.ts

@@ -361,6 +361,16 @@ export const propertyRowValueTextCell = style([
   },
 ]);
 
+export const propertyRowValueUserCell = style([
+  propertyRowValueCell,
+  {
+    border: 'none',
+    overflow: 'hidden',
+    columnGap: '0.5rem',
+    alignItems: 'center',
+  },
+]);
+
 export const propertyRowValueTextarea = style([
   propertyRowValueCell,
   {

packages/frontend/core/src/components/affine/setting-modal/workspace-setting/properties/index.tsx

@@ -279,29 +279,51 @@ const CustomPropertyRowsList = ({
 
     return <CustomPropertyRows properties={filtered} statistics={statistics} />;
   } else {
-    const required = properties.filter(property => property.required);
-    const optional = properties.filter(property => !property.required);
+    const partition = Object.groupBy(properties, p =>
+      p.required ? 'required' : p.readonly ? 'readonly' : 'optional'
+    );
+
     return (
       <>
-        {required.length > 0 ? (
+        {partition.required && partition.required.length > 0 ? (
           <>
             <div className={styles.subListHeader}>
               {t[
                 'com.affine.settings.workspace.properties.required-properties'
               ]()}
             </div>
-            <CustomPropertyRows properties={required} statistics={statistics} />
+            <CustomPropertyRows
+              properties={partition.required}
+              statistics={statistics}
+            />
           </>
         ) : null}
 
-        {optional.length > 0 ? (
+        {partition.optional && partition.optional.length > 0 ? (
           <>
             <div className={styles.subListHeader}>
               {t[
                 'com.affine.settings.workspace.properties.general-properties'
               ]()}
             </div>
-            <CustomPropertyRows properties={optional} statistics={statistics} />
+            <CustomPropertyRows
+              properties={partition.optional}
+              statistics={statistics}
+            />
+          </>
+        ) : null}
+
+        {partition.readonly && partition.readonly.length > 0 ? (
+          <>
+            <div className={styles.subListHeader}>
+              {t[
+                'com.affine.settings.workspace.properties.readonly-properties'
+              ]()}
+            </div>
+            <CustomPropertyRows
+              properties={partition.readonly}
+              statistics={statistics}
+            />
           </>
         ) : null}
       </>

packages/frontend/core/src/modules/cloud/entities/cloud-doc-meta.ts

@@ -0,0 +1,66 @@
+import type { GetWorkspacePageMetaByIdQuery } from '@affine/graphql';
+import type { DocService, GlobalCache } from '@toeverything/infra';
+import {
+  backoffRetry,
+  catchErrorInto,
+  effect,
+  Entity,
+  exhaustMapWithTrailing,
+  fromPromise,
+  LiveData,
+  onComplete,
+  onStart,
+} from '@toeverything/infra';
+import { EMPTY, mergeMap } from 'rxjs';
+
+import { isBackendError, isNetworkError } from '../error';
+import type { CloudDocMetaStore } from '../stores/cloud-doc-meta';
+
+export type CloudDocMetaType =
+  GetWorkspacePageMetaByIdQuery['workspace']['pageMeta'];
+
+const CACHE_KEY_PREFIX = 'cloud-doc-meta:';
+
+export class CloudDocMeta extends Entity {
+  constructor(
+    private readonly store: CloudDocMetaStore,
+    private readonly docService: DocService,
+    private readonly cache: GlobalCache
+  ) {
+    super();
+  }
+
+  readonly docId = this.docService.doc.id;
+  readonly workspaceId = this.docService.doc.workspace.id;
+
+  readonly cacheKey = `${CACHE_KEY_PREFIX}${this.workspaceId}:${this.docId}`;
+  meta$ = LiveData.from<CloudDocMetaType | undefined>(
+    this.cache.watch<CloudDocMetaType>(this.cacheKey),
+    undefined
+  );
+  isRevalidating$ = new LiveData(false);
+  error$ = new LiveData<any | null>(null);
+
+  revalidate = effect(
+    exhaustMapWithTrailing(() => {
+      return fromPromise(
+        this.store.fetchCloudDocMeta(this.workspaceId, this.docId)
+      ).pipe(
+        backoffRetry({
+          when: isNetworkError,
+          count: Infinity,
+        }),
+        backoffRetry({
+          when: isBackendError,
+        }),
+        mergeMap(meta => {
+          this.cache.set<CloudDocMetaType>(this.cacheKey, meta);
+          return EMPTY;
+        }),
+        catchErrorInto(this.error$),
+        onStart(() => this.isRevalidating$.next(true)),
+        onComplete(() => this.isRevalidating$.next(false))
+      );
+    })
+  );
+}

packages/frontend/core/src/modules/cloud/index.ts

@@ -16,11 +16,15 @@ export { UserQuotaService } from './services/user-quota';
 export { WebSocketService } from './services/websocket';
 
 import {
+  DocScope,
+  DocService,
   type Framework,
-  GlobalCacheService,
-  GlobalStateService,
+  GlobalCache,
+  GlobalState,
+  WorkspaceScope,
 } from '@toeverything/infra';
 
+import { CloudDocMeta } from './entities/cloud-doc-meta';
 import { ServerConfig } from './entities/server-config';
 import { AuthSession } from './entities/session';
 import { Subscription } from './entities/subscription';
@@ -29,6 +33,7 @@ import { UserCopilotQuota } from './entities/user-copilot-quota';
 import { UserFeature } from './entities/user-feature';
 import { UserQuota } from './entities/user-quota';
 import { AuthService } from './services/auth';
+import { CloudDocMetaService } from './services/cloud-doc-meta';
 import { FetchService } from './services/fetch';
 import { GraphQLService } from './services/graphql';
 import { ServerConfigService } from './services/server-config';
@@ -38,6 +43,7 @@ import { UserFeatureService } from './services/user-feature';
 import { UserQuotaService } from './services/user-quota';
 import { WebSocketService } from './services/websocket';
 import { AuthStore } from './stores/auth';
+import { CloudDocMetaStore } from './stores/cloud-doc-meta';
 import { ServerConfigStore } from './stores/server-config';
 import { SubscriptionStore } from './stores/subscription';
 import { UserCopilotQuotaStore } from './stores/user-copilot-quota';
@@ -53,10 +59,10 @@ export function configureCloudModule(framework: Framework) {
     .entity(ServerConfig, [ServerConfigStore])
     .store(ServerConfigStore, [GraphQLService])
     .service(AuthService, [FetchService, AuthStore])
-    .store(AuthStore, [FetchService, GraphQLService, GlobalStateService])
+    .store(AuthStore, [FetchService, GraphQLService, GlobalState])
     .entity(AuthSession, [AuthStore])
     .service(SubscriptionService, [SubscriptionStore])
-    .store(SubscriptionStore, [GraphQLService, GlobalCacheService])
+    .store(SubscriptionStore, [GraphQLService, GlobalCache])
     .entity(Subscription, [AuthService, ServerConfigService, SubscriptionStore])
     .entity(SubscriptionPrices, [ServerConfigService, SubscriptionStore])
     .service(UserQuotaService)
@@ -71,5 +77,10 @@ export function configureCloudModule(framework: Framework) {
     ])
     .service(UserFeatureService)
     .entity(UserFeature, [AuthService, UserFeatureStore])
-    .store(UserFeatureStore, [GraphQLService]);
+    .store(UserFeatureStore, [GraphQLService])
+    .scope(WorkspaceScope)
+    .scope(DocScope)
+    .service(CloudDocMetaService)
+    .entity(CloudDocMeta, [CloudDocMetaStore, DocService, GlobalCache])
+    .store(CloudDocMetaStore, [GraphQLService]);
 }

packages/frontend/core/src/modules/cloud/services/cloud-doc-meta.ts

@@ -0,0 +1,7 @@
+import { Service } from '@toeverything/infra';
+
+import { CloudDocMeta } from '../entities/cloud-doc-meta';
+
+export class CloudDocMetaService extends Service {
+  cloudDocMeta = this.framework.createEntity(CloudDocMeta);
+}

packages/frontend/core/src/modules/cloud/stores/auth.ts

@@ -4,7 +4,7 @@ import {
   updateUserProfileMutation,
   uploadAvatarMutation,
 } from '@affine/graphql';
-import type { GlobalStateService } from '@toeverything/infra';
+import type { GlobalState } from '@toeverything/infra';
 import { Store } from '@toeverything/infra';
 
 import type { AuthSessionInfo } from '../entities/session';
@@ -24,19 +24,17 @@ export class AuthStore extends Store {
   constructor(
     private readonly fetchService: FetchService,
     private readonly gqlService: GraphQLService,
-    private readonly globalStateService: GlobalStateService
+    private readonly globalState: GlobalState
   ) {
     super();
   }
 
   watchCachedAuthSession() {
-    return this.globalStateService.globalState.watch<AuthSessionInfo>(
-      'affine-cloud-auth'
-    );
+    return this.globalState.watch<AuthSessionInfo>('affine-cloud-auth');
   }
 
   setCachedAuthSession(session: AuthSessionInfo | null) {
-    this.globalStateService.globalState.set('affine-cloud-auth', session);
+    this.globalState.set('affine-cloud-auth', session);
   }
 
   async fetchSession() {

packages/frontend/core/src/modules/cloud/stores/cloud-doc-meta.ts

@@ -0,0 +1,26 @@
+import { getWorkspacePageMetaByIdQuery } from '@affine/graphql';
+import { Store } from '@toeverything/infra';
+
+import { type CloudDocMetaType } from '../entities/cloud-doc-meta';
+import type { GraphQLService } from '../services/graphql';
+
+export class CloudDocMetaStore extends Store {
+  constructor(private readonly gqlService: GraphQLService) {
+    super();
+  }
+
+  async fetchCloudDocMeta(
+    workspaceId: string,
+    docId: string,
+    abortSignal?: AbortSignal
+  ): Promise<CloudDocMetaType> {
+    const serverConfigData = await this.gqlService.gql({
+      query: getWorkspacePageMetaByIdQuery,
+      variables: { id: workspaceId, pageId: docId },
+      context: {
+        signal: abortSignal,
+      },
+    });
+    return serverConfigData.workspace.pageMeta;
+  }
+}

packages/frontend/core/src/modules/cloud/stores/subscription.ts

@@ -12,7 +12,7 @@ import {
   subscriptionQuery,
   updateSubscriptionMutation,
 } from '@affine/graphql';
-import type { GlobalCacheService } from '@toeverything/infra';
+import type { GlobalCache } from '@toeverything/infra';
 import { Store } from '@toeverything/infra';
 
 import type { SubscriptionType } from '../entities/subscription';
@@ -37,7 +37,7 @@ const getDefaultSubscriptionSuccessCallbackLink = (
 export class SubscriptionStore extends Store {
   constructor(
     private readonly gqlService: GraphQLService,
-    private readonly globalCacheService: GlobalCacheService
+    private readonly globalCache: GlobalCache
   ) {
     super();
   }
@@ -97,16 +97,13 @@ export class SubscriptionStore extends Store {
   }
 
   getCachedSubscriptions(userId: string) {
-    return this.globalCacheService.globalCache.get<SubscriptionType[]>(
+    return this.globalCache.get<SubscriptionType[]>(
       SUBSCRIPTION_CACHE_KEY + userId
     );
   }
 
   setCachedSubscriptions(userId: string, subscriptions: SubscriptionType[]) {
-    return this.globalCacheService.globalCache.set(
-      SUBSCRIPTION_CACHE_KEY + userId,
-      subscriptions
-    );
+    return this.globalCache.set(SUBSCRIPTION_CACHE_KEY + userId, subscriptions);
   }
 
   setSubscriptionRecurring(

packages/frontend/core/src/modules/properties/services/schema.ts

@@ -21,6 +21,8 @@ export enum PagePropertyType {
   Progress = 'progress',
   Checkbox = 'checkbox',
   Tags = 'tags',
+  CreatedBy = 'createdBy',
+  UpdatedBy = 'updatedBy',
 }
 
 export const PagePropertyMetaBaseSchema = z.object({
@@ -30,6 +32,7 @@ export const PagePropertyMetaBaseSchema = z.object({
   type: z.nativeEnum(PagePropertyType),
   icon: z.string(),
   required: z.boolean().optional(),
+  readonly: z.boolean().optional(),
 });
 
 export const PageSystemPropertyMetaBaseSchema =

packages/frontend/core/src/modules/share-doc/entities/share-docs-list.ts

@@ -6,12 +6,13 @@ import {
   catchErrorInto,
   effect,
   Entity,
+  exhaustMapWithTrailing,
   fromPromise,
   LiveData,
   onComplete,
   onStart,
 } from '@toeverything/infra';
-import { EMPTY, mergeMap, switchMap } from 'rxjs';
+import { EMPTY, mergeMap } from 'rxjs';
 
 import { isBackendError, isNetworkError } from '../../cloud';
 import type { ShareDocsStore } from '../stores/share-docs';
@@ -35,7 +36,7 @@ export class ShareDocsList extends Entity {
   }
 
   revalidate = effect(
-    switchMap(() =>
+    exhaustMapWithTrailing(() =>
       fromPromise(signal => {
         return this.store.getWorkspacesShareDocs(
           this.workspaceService.workspace.id,