feat(core): improve invite link (#9111)

packages/frontend/component/src/components/member-components/invite-team-modal/index.tsx

@@ -1,5 +1,8 @@
 import { emailRegex } from '@affine/component/auth-components';
-import type { WorkspaceInviteLinkExpireTime } from '@affine/graphql';
+import type {
+  InviteLink,
+  WorkspaceInviteLinkExpireTime,
+} from '@affine/graphql';
 import { useI18n } from '@affine/i18n';
 import { useCallback, useEffect, useState } from 'react';
 
@@ -18,6 +21,7 @@ export interface InviteTeamMemberModalProps {
   ) => Promise<string>;
   onRevokeInviteLink: () => Promise<boolean>;
   importCSV: React.ReactNode;
+  invitationLink: InviteLink | null;
 }
 
 const parseEmailString = (emailString: string): string[] => {
@@ -36,6 +40,7 @@ export const InviteTeamMemberModal = ({
   onGenerateInviteLink,
   onRevokeInviteLink,
   importCSV,
+  invitationLink,
 }: InviteTeamMemberModalProps) => {
   const t = useI18n();
   const [inviteEmails, setInviteEmails] = useState('');
@@ -95,6 +100,7 @@ export const InviteTeamMemberModal = ({
       childrenContentClassName={styles.contentStyle}
     >
       <ModalContent
+        invitationLink={invitationLink}
         inviteEmail={inviteEmails}
         setInviteEmail={setInviteEmails}
         handleConfirm={handleConfirm}

packages/frontend/component/src/components/member-components/invite-team-modal/link-invite.tsx

@@ -1,4 +1,7 @@
-import { WorkspaceInviteLinkExpireTime } from '@affine/graphql';
+import {
+  type InviteLink,
+  WorkspaceInviteLinkExpireTime,
+} from '@affine/graphql';
 import { useI18n } from '@affine/i18n';
 import { CloseIcon } from '@blocksuite/icons/rc';
 import { cssVar } from '@toeverything/theme';
@@ -39,10 +42,12 @@ const getMenuItems = (t: ReturnType<typeof useI18n>) => [
 ];
 
 export const LinkInvite = ({
+  invitationLink,
   copyTextToClipboard,
   generateInvitationLink,
   revokeInvitationLink,
 }: {
+  invitationLink: InviteLink | null;
   generateInvitationLink: (
     expireTime: WorkspaceInviteLinkExpireTime
   ) => Promise<string>;
@@ -53,7 +58,6 @@ export const LinkInvite = ({
   const [selectedValue, setSelectedValue] = useState(
     WorkspaceInviteLinkExpireTime.OneWeek
   );
-  const [invitationLink, setInvitationLink] = useState('');
   const menuItems = getMenuItems(t);
   const items = useMemo(() => {
     return menuItems.map(item => (
@@ -69,21 +73,20 @@ export const LinkInvite = ({
   );
 
   const onGenerate = useCallback(() => {
-    generateInvitationLink(selectedValue)
-      .then(link => {
-        setInvitationLink(link);
-      })
-      .catch(err => {
-        console.error('Failed to generate invitation link: ', err);
-        notify.error({
-          title: 'Failed to generate invitation link',
-          message: err.message,
-        });
+    generateInvitationLink(selectedValue).catch(err => {
+      console.error('Failed to generate invitation link: ', err);
+      notify.error({
+        title: 'Failed to generate invitation link',
+        message: err.message,
       });
+    });
   }, [generateInvitationLink, selectedValue]);
 
   const onCopy = useCallback(() => {
-    copyTextToClipboard(invitationLink)
+    if (!invitationLink) {
+      return;
+    }
+    copyTextToClipboard(invitationLink.link)
       .then(() =>
         notify.success({
           title: t['Copied link to clipboard'](),
@@ -99,17 +102,13 @@ export const LinkInvite = ({
   }, [copyTextToClipboard, invitationLink, t]);
 
   const onReset = useCallback(() => {
-    revokeInvitationLink()
-      .then(() => {
-        setInvitationLink('');
-      })
-      .catch(err => {
-        console.error('Failed to revoke invitation link: ', err);
-        notify.error({
-          title: 'Failed to revoke invitation link',
-          message: err.message,
-        });
+    revokeInvitationLink().catch(err => {
+      console.error('Failed to revoke invitation link: ', err);
+      notify.error({
+        title: 'Failed to revoke invitation link',
+        message: err.message,
       });
+    });
   }, [revokeInvitationLink]);
 
   return (
@@ -136,7 +135,7 @@ export const LinkInvite = ({
         <Input
           value={
             invitationLink
-              ? invitationLink
+              ? invitationLink.link
               : 'https://your-app.com/invite/xxxxxxxx'
           }
           inputMode="none"

packages/frontend/component/src/components/member-components/invite-team-modal/modal-content.tsx

@@ -1,4 +1,7 @@
-import type { WorkspaceInviteLinkExpireTime } from '@affine/graphql';
+import type {
+  InviteLink,
+  WorkspaceInviteLinkExpireTime,
+} from '@affine/graphql';
 import { useI18n } from '@affine/i18n';
 import { EmailIcon, LinkIcon } from '@blocksuite/icons/rc';
 
@@ -20,9 +23,11 @@ export const ModalContent = ({
   onGenerateInviteLink,
   onRevokeInviteLink,
   importCSV,
+  invitationLink,
 }: {
   inviteEmail: string;
   importCSV: React.ReactNode;
+  invitationLink: InviteLink | null;
   setInviteEmail: (value: string) => void;
   inviteMethod: InviteMethodType;
   onInviteMethodChange: (value: InviteMethodType) => void;
@@ -78,6 +83,7 @@ export const ModalContent = ({
         />
       ) : (
         <LinkInvite
+          invitationLink={invitationLink}
           copyTextToClipboard={copyTextToClipboard}
           generateInvitationLink={onGenerateInviteLink}
           revokeInvitationLink={onRevokeInviteLink}

packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/new-workspace-setting-detail/members/cloud-members-panel.tsx

@@ -13,6 +13,7 @@ import {
   WorkspacePermissionService,
 } from '@affine/core/modules/permissions';
 import { WorkspaceQuotaService } from '@affine/core/modules/quota';
+import { WorkspaceShareSettingService } from '@affine/core/modules/share-setting';
 import { copyTextToClipboard } from '@affine/core/utils/clipboard';
 import { emailRegex } from '@affine/core/utils/email-regex';
 import type { WorkspaceInviteLinkExpireTime } from '@affine/graphql';
@@ -49,6 +50,10 @@ export const CloudWorkspaceMembersPanel = ({
   onChangeSettingState: (settingState: SettingState) => void;
   isTeam?: boolean;
 }) => {
+  const workspaceShareSettingService = useService(WorkspaceShareSettingService);
+  const inviteLink = useLiveData(
+    workspaceShareSettingService.sharePreview.inviteLink$
+  );
   const serverService = useService(ServerService);
   const hasPaymentFeature = useLiveData(
     serverService.server.features$.map(f => f?.payment)
@@ -90,15 +95,17 @@ export const CloudWorkspaceMembersPanel = ({
     async (expireTime: WorkspaceInviteLinkExpireTime) => {
       const { link } =
         await permissionService.permission.generateInviteLink(expireTime);
+      workspaceShareSettingService.sharePreview.revalidate();
       return link;
     },
-    [permissionService.permission]
+    [permissionService.permission, workspaceShareSettingService.sharePreview]
   );
 
   const onRevokeInviteLink = useCallback(async () => {
     const success = await permissionService.permission.revokeInviteLink();
+    workspaceShareSettingService.sharePreview.revalidate();
     return success;
-  }, [permissionService.permission]);
+  }, [permissionService.permission, workspaceShareSettingService.sharePreview]);
 
   const onInviteBatchConfirm = useCallback<
     InviteTeamMemberModalProps['onConfirm']
@@ -218,6 +225,7 @@ export const CloudWorkspaceMembersPanel = ({
                 onGenerateInviteLink={onGenerateInviteLink}
                 onRevokeInviteLink={onRevokeInviteLink}
                 importCSV={<ImportCSV onImport={onImportCSV} />}
+                invitationLink={inviteLink}
               />
             )}
           </>

packages/frontend/core/src/modules/share-setting/entities/share-setting.ts

@@ -1,5 +1,5 @@
 import { DebugLogger } from '@affine/debug';
-import type { GetWorkspaceConfigQuery } from '@affine/graphql';
+import type { GetWorkspaceConfigQuery, InviteLink } from '@affine/graphql';
 import type { WorkspaceService } from '@toeverything/infra';
 import {
   backoffRetry,
@@ -25,6 +25,7 @@ const logger = new DebugLogger('affine:workspace-permission');
 export class WorkspaceShareSetting extends Entity {
   enableAi$ = new LiveData<EnableAi | null>(null);
   enableUrlPreview$ = new LiveData<EnableUrlPreview | null>(null);
+  inviteLink$ = new LiveData<InviteLink | null>(null);
   isLoading$ = new LiveData(false);
   error$ = new LiveData<any>(null);
 
@@ -56,6 +57,7 @@ export class WorkspaceShareSetting extends Entity {
           if (value) {
             this.enableAi$.next(value.enableAi);
             this.enableUrlPreview$.next(value.enableUrlPreview);
+            this.inviteLink$.next(value.inviteLink);
           }
           return EMPTY;
         }),