refactor(server): change invitation request link to workspace members tab (#11191)

close CLOUD-184

packages/backend/server/src/__tests__/__snapshots__/mails.spec.ts.md

@@ -902,17 +902,54 @@ Generated by [AVA](https://avajs.dev).
       <tbody>␊
         <tr>␊
           <td>␊
-            <p␊
+            <table␊
-              style="font-size:15px;line-height:24px;margin-bottom:0;margin-top:24px;font-weight:400;font-family:Inter, Arial, Helvetica, sans-serif;color:#141414">␊
+              align="center"␊
-              <span style="font-weight:600">test@test.com</span> has joined␊
+              width="100%"␊
-              <img␊
+              border="0"␊
-                src="https://app.affine.pro/favicon-192.png"␊
+              cellpadding="0"␊
-                alt="avatar"␊
+              cellspacing="0"␊
-                style="width:20px;height:20px;border-radius:12px;object-fit:cover;vertical-align:middle" /><span␊
+              role="presentation">␊
-                style="font-weight:600"␊
+              <tbody style="width:100%">␊
-                >Test Workspace</span␊
+                <tr style="width:100%">␊
-              >␊
+                  <p␊
-            </p>␊
+                    style="font-size:15px;line-height:24px;margin-bottom:0;margin-top:24px;font-weight:400;font-family:Inter, Arial, Helvetica, sans-serif;color:#141414">␊
+                    <span style="font-weight:600">test@test.com</span> has joined␊
+                    <img␊
+                      src="https://app.affine.pro/favicon-192.png"␊
+                      alt="avatar"␊
+                      style="width:20px;height:20px;border-radius:12px;object-fit:cover;vertical-align:middle" /><span␊
+                      style="font-weight:600"␊
+                      >Test Workspace</span␊
+                    >␊
+                  </p>␊
+                </tr>␊
+              </tbody>␊
+            </table>␊
+            <table␊
+              align="center"␊
+              width="100%"␊
+              border="0"␊
+              cellpadding="0"␊
+              cellspacing="0"␊
+              role="presentation">␊
+              <tbody style="width:100%">␊
+                <tr style="width:100%">␊
+                  <a␊
+                    href="https://app.affine.pro"␊
+                    style="line-height:24px;text-decoration:none;display:inline-block;max-width:100%;mso-padding-alt:0px;font-size:15px;font-weight:600;font-family:Inter, Arial, Helvetica, sans-serif;margin-top:24px;margin-bottom:0;color:#FFFFFF;background-color:#1E96EB;padding:8px 18px 8px 18px;border-radius:8px;border:1px solid rgba(0,0,0,.1);margin-right:4px"␊
+                    target="_blank"␊
+                    ><span␊
+                      ><!--[if mso]><i style="mso-font-width:450%;mso-text-raise:12" hidden>&#8202;&#8202;</i><![endif]--></span␊
+                    ><span␊
+                      style="max-width:100%;display:inline-block;line-height:120%;mso-padding-alt:0px;mso-text-raise:6px"␊
+                      >Open Workspace Members</span␊
+                    ><span␊
+                      ><!--[if mso]><i style="mso-font-width:450%" hidden>&#8202;&#8202;&#8203;</i><![endif]--></span␊
+                    ></a␊
+                  >␊
+                </tr>␊
+              </tbody>␊
+            </table>␊
           </td>␊
         </tr>␊
       </tbody>␊

packages/backend/server/src/core/notification/service.ts

@@ -16,6 +16,10 @@ import {
 import { DocReader } from '../doc';
 import { Mailer } from '../mail';
 import { generateDocPath } from '../utils/doc';
+import {
+  generateWorkspaceSettingsPath,
+  WorkspaceSettingsTab,
+} from '../utils/workspace';
 
 @Injectable()
 export class NotificationService {
@@ -167,6 +171,12 @@ export class NotificationService {
         workspace: {
           $$workspaceId: workspaceId,
         },
+        url: this.url.link(
+          generateWorkspaceSettingsPath({
+            workspaceId,
+            tab: WorkspaceSettingsTab.members,
+          })
+        ),
       },
     });
     this.logger.log(
@@ -226,7 +236,12 @@ export class NotificationService {
         workspace: {
           $$workspaceId: workspaceId,
         },
-        url: this.url.link(`/workspace/${workspaceId}`),
+        url: this.url.link(
+          generateWorkspaceSettingsPath({
+            workspaceId,
+            tab: WorkspaceSettingsTab.members,
+          })
+        ),
       },
     });
     this.logger.log(

packages/backend/server/src/core/utils/workspace.ts

@@ -0,0 +1,20 @@
+export enum WorkspaceSettingsTab {
+  members = 'workspace:members',
+}
+
+type SettingsPathParams = {
+  workspaceId: string;
+  tab: WorkspaceSettingsTab;
+};
+
+/**
+ * To generate a workspace settings url path like
+ *
+ * /workspace/{workspaceId}/settings?tab={tab}
+ */
+export function generateWorkspaceSettingsPath(params: SettingsPathParams) {
+  const search = new URLSearchParams({
+    tab: params.tab,
+  });
+  return `/workspace/${params.workspaceId}/settings?${search.toString()}`;
+}

packages/backend/server/src/mails/workspaces/invitation-accepted.tsx

@@ -1,5 +1,6 @@
 import { TEST_USER, TEST_WORKSPACE } from '../common';
 import {
+  Button,
   Content,
   P,
   Template,
@@ -13,10 +14,11 @@ import {
 export type InvitationAcceptedProps = {
   user: UserProps;
   workspace: WorkspaceProps;
+  url: string;
 };
 
 export default function InvitationAccepted(props: InvitationAcceptedProps) {
-  const { user, workspace } = props;
+  const { user, workspace, url } = props;
   return (
     <Template>
       <Title>{user.email} accepted your invitation</Title>
@@ -24,6 +26,7 @@ export default function InvitationAccepted(props: InvitationAcceptedProps) {
         <P>
           <User {...user} /> has joined <Workspace {...workspace} />
         </P>
+        <Button href={url}>Open Workspace Members</Button>
       </Content>
     </Template>
   );
@@ -32,4 +35,5 @@ export default function InvitationAccepted(props: InvitationAcceptedProps) {
 InvitationAccepted.PreviewProps = {
   user: TEST_USER,
   workspace: TEST_WORKSPACE,
+  url: 'https://app.affine.pro',
 };