From ae0abd6445219c03efcee6ba5c86100be8c45f8b Mon Sep 17 00:00:00 2001
From: Jessica Lawshe <5312836+lawshe@users.noreply.github.com>
Date: Wed, 1 May 2024 10:43:02 -0500
Subject: [PATCH] Merge pull request #18159 from
 overleaf/jel-group-invite-header

[web] Break word on group invite header

GitOrigin-RevId: 790c24e8291f1dbdfa9231e4c9e3d4e531bf2b8f
---
 .../web/app/views/subscriptions/team/invite.pug |  2 +-
 .../subscriptions/team/invite_logged_out.pug    |  2 +-
 .../group-invitation/group-invitation-join.tsx  | 15 +++++++++++++--
 .../group-invites/group-invites-item.tsx        | 17 +++++++++++------
 .../frontend/stylesheets/app/subscription.less  |  6 ++++++
 services/web/locales/en.json                    |  2 +-
 .../notifications/group-invitation.spec.tsx     | 10 +++++-----
 .../components/notifications.test.tsx           |  3 ++-
 8 files changed, 40 insertions(+), 17 deletions(-)

diff --git a/services/web/app/views/subscriptions/team/invite.pug b/services/web/app/views/subscriptions/team/invite.pug
index d5fd59ffb8..07b1a75253 100644
--- a/services/web/app/views/subscriptions/team/invite.pug
+++ b/services/web/app/views/subscriptions/team/invite.pug
@@ -18,7 +18,7 @@ block content
 				.col-md-8.col-md-offset-2.text-center(ng-cloak)
 					.card(ng-controller="TeamInviteController")
 						.page-header
-							h1.text-centered(ng-non-bindable) #{translate("invited_to_group", {inviterName: inviterName, appName: appName})}
+							h1.text-centered(ng-non-bindable) !{translate("invited_to_group", {inviterName: inviterName, appName: appName}, [{name: 'span', attrs: {class: 'team-invite-name'}}])}
 
 						div(ng-show="view =='restrictedByManagedGroup'")
 							.alert.alert-info
diff --git a/services/web/app/views/subscriptions/team/invite_logged_out.pug b/services/web/app/views/subscriptions/team/invite_logged_out.pug
index ade872b647..ddf24b3d9d 100644
--- a/services/web/app/views/subscriptions/team/invite_logged_out.pug
+++ b/services/web/app/views/subscriptions/team/invite_logged_out.pug
@@ -7,7 +7,7 @@ block content
 				.col-md-8.col-md-offset-2.text-center
 					.card
 						.page-header
-							h1.text-centered #{translate("invited_to_group", {inviterName: inviterName, appName: appName})}
+							h1.text-centered !{translate("invited_to_group", {inviterName: inviterName, appName: appName }, [{name: 'span', attrs: {class: 'team-invite-name'}}])}
 
 						if (accountExists)
 							div
diff --git a/services/web/frontend/js/features/project-list/components/notifications/groups/group-invitation/group-invitation-join.tsx b/services/web/frontend/js/features/project-list/components/notifications/groups/group-invitation/group-invitation-join.tsx
index 0cb1c4b072..b33890e0b8 100644
--- a/services/web/frontend/js/features/project-list/components/notifications/groups/group-invitation/group-invitation-join.tsx
+++ b/services/web/frontend/js/features/project-list/components/notifications/groups/group-invitation/group-invitation-join.tsx
@@ -1,5 +1,5 @@
 import { Button } from 'react-bootstrap'
-import { useTranslation } from 'react-i18next'
+import { useTranslation, Trans } from 'react-i18next'
 import Notification from '../../notification'
 import type { NotificationGroupInvitation } from '../../../../../../../../types/project/dashboard/notification'
 import getMeta from '@/utils/meta'
@@ -30,7 +30,18 @@ export default function GroupInvitationNotificationJoin({
     <Notification
       bsStyle="info"
       onDismiss={dismissGroupInviteNotification}
-      body={t('invited_to_group', { inviterName })}
+      body={
+        <Trans
+          i18nKey="invited_to_group"
+          values={{ inviterName }}
+          shouldUnescape
+          tOptions={{ interpolation: { escapeValue: true } }}
+          components={
+            /* eslint-disable-next-line react/jsx-key */
+            [<span className="team-invite-name" />]
+          }
+        />
+      }
       action={
         <Button
           bsStyle={newNotificationStyle ? null : 'info'}
diff --git a/services/web/frontend/js/features/subscription/components/group-invites/group-invites-item.tsx b/services/web/frontend/js/features/subscription/components/group-invites/group-invites-item.tsx
index c9291589d1..ee6a8d7a2d 100644
--- a/services/web/frontend/js/features/subscription/components/group-invites/group-invites-item.tsx
+++ b/services/web/frontend/js/features/subscription/components/group-invites/group-invites-item.tsx
@@ -1,5 +1,5 @@
 import { Col, Row } from 'react-bootstrap'
-import { useTranslation } from 'react-i18next'
+import { Trans } from 'react-i18next'
 import GroupInvitesItemFooter from './group-invites-item-footer'
 import type { TeamInvite } from '../../../../../../types/team-invite'
 
@@ -10,17 +10,22 @@ type GroupInvitesItemProps = {
 export default function GroupInvitesItem({
   teamInvite,
 }: GroupInvitesItemProps) {
-  const { t } = useTranslation()
-
   return (
     <Row className="row-spaced">
       <Col md={8} mdOffset={2} className="text-center">
         <div className="card">
           <div className="page-header">
             <h2>
-              {t('invited_to_group', {
-                inviterName: teamInvite.inviterName,
-              })}
+              <Trans
+                i18nKey="invited_to_group"
+                values={{ inviterName: teamInvite.inviterName }}
+                shouldUnescape
+                tOptions={{ interpolation: { escapeValue: true } }}
+                components={
+                  /* eslint-disable-next-line react/jsx-key */
+                  [<span className="team-invite-name" />]
+                }
+              />
             </h2>
           </div>
           <GroupInvitesItemFooter teamInvite={teamInvite} />
diff --git a/services/web/frontend/stylesheets/app/subscription.less b/services/web/frontend/stylesheets/app/subscription.less
index cf5694e938..143d8de790 100644
--- a/services/web/frontend/stylesheets/app/subscription.less
+++ b/services/web/frontend/stylesheets/app/subscription.less
@@ -77,6 +77,12 @@
   margin: 3em 0;
 }
 
+.team-invite {
+  .team-invite-name {
+    word-break: break-word;
+  }
+}
+
 .capitalised {
   text-transform: capitalize;
 }
diff --git a/services/web/locales/en.json b/services/web/locales/en.json
index 5f35b5c7d0..4d8a6ec0be 100644
--- a/services/web/locales/en.json
+++ b/services/web/locales/en.json
@@ -897,7 +897,7 @@
   "invite_not_accepted": "Invite not yet accepted",
   "invite_not_valid": "This is not a valid project invite",
   "invite_not_valid_description": "The invite may have expired. Please contact the project owner",
-  "invited_to_group": "__inviterName__ has invited you to join a group subscription on __appName__",
+  "invited_to_group": "<0>__inviterName__</0> has invited you to join a group subscription on __appName__",
   "invited_to_group_have_individual_subcription": "__inviterName__ has invited you to join a group __appName__ subscription. If you join this group, you may not need your individual subscription. Would you like to cancel it?",
   "invited_to_group_login": "To accept this invitation you need to log in as __emailAddress__.",
   "invited_to_group_login_benefits": "As part of this group, you’ll have access to __appName__ premium features such as additional collaborators, greater maximum compile time, and real-time track changes.",
diff --git a/services/web/test/frontend/components/project-list/notifications/group-invitation.spec.tsx b/services/web/test/frontend/components/project-list/notifications/group-invitation.spec.tsx
index 4c09083177..5767302fed 100644
--- a/services/web/test/frontend/components/project-list/notifications/group-invitation.spec.tsx
+++ b/services/web/test/frontend/components/project-list/notifications/group-invitation.spec.tsx
@@ -42,7 +42,7 @@ describe('<GroupInvitationNotification />', function () {
 
       cy.findByRole('alert')
 
-      cy.findByText(
+      cy.contains(
         'inviter@overleaf.com has invited you to join a group subscription on Overleaf'
       )
 
@@ -73,13 +73,13 @@ describe('<GroupInvitationNotification />', function () {
 
       cy.findByRole('alert')
 
-      cy.findByText(
+      cy.contains(
         'inviter@overleaf.com has invited you to join a group Overleaf subscription. If you join this group, you may not need your individual subscription. Would you like to cancel it?'
       )
 
       cy.findByRole('button', { name: 'Not now' }).click()
 
-      cy.findByText(
+      cy.contains(
         'inviter@overleaf.com has invited you to join a group subscription on Overleaf'
       )
 
@@ -105,7 +105,7 @@ describe('<GroupInvitationNotification />', function () {
 
       cy.findByRole('alert')
 
-      cy.findByText(
+      cy.contains(
         'inviter@overleaf.com has invited you to join a group Overleaf subscription. If you join this group, you may not need your individual subscription. Would you like to cancel it?'
       )
 
@@ -113,7 +113,7 @@ describe('<GroupInvitationNotification />', function () {
 
       cy.wait('@cancelPersonalSubscription')
 
-      cy.findByText(
+      cy.contains(
         'inviter@overleaf.com has invited you to join a group subscription on Overleaf'
       )
 
diff --git a/services/web/test/frontend/features/project-list/components/notifications.test.tsx b/services/web/test/frontend/features/project-list/components/notifications.test.tsx
index b8454b210d..661afab257 100644
--- a/services/web/test/frontend/features/project-list/components/notifications.test.tsx
+++ b/services/web/test/frontend/features/project-list/components/notifications.test.tsx
@@ -415,8 +415,9 @@ describe('<UserNotifications />', function () {
           await fetchMock.flush(true)
           fetchMock.delete(`/notifications/${notificationGroupInvite._id}`, 200)
           screen.getByRole('alert')
+          screen.getByText('inviter@overleaf.com')
           screen.getByText(
-            /inviter@overleaf.com has invited you to join a group subscription on Overleaf/
+            /has invited you to join a group subscription on Overleaf/
           )
           screen.getByRole('button', { name: 'Join now' })
           screen.getByRole('button', { name: /close/i })