github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-11-07 20:31:06 -05:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #18159 from overleaf/jel-group-invite-header

Browse source 
[web] Break word on group invite header

GitOrigin-RevId: 790c24e8291f1dbdfa9231e4c9e3d4e531bf2b8f
This commit is contained in:
Jessica Lawshe 2024-05-01 10:43:02 -05:00 committed by Copybot
parent 92f62f91c1
commit ae0abd6445
8 changed files with 40 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
services/web/app/views/subscriptions/team/invite.pug
View file

@ -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

2
services/web/app/views/subscriptions/team/invite_logged_out.pug
View file

@ -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

15
services/web/frontend/js/features/project-list/components/notifications/groups/group-invitation/group-invitation-join.tsx
View file

@ -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'}

17
services/web/frontend/js/features/subscription/components/group-invites/group-invites-item.tsx
View file

@ -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} />

6
services/web/frontend/stylesheets/app/subscription.less
View file

@ -77,6 +77,12 @@
margin: 3em 0;
}
.team-invite {
.team-invite-name {
word-break: break-word;
}
}
.capitalised {
text-transform: capitalize;
}

2
services/web/locales/en.json
View file

@ -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.",

10
services/web/test/frontend/components/project-list/notifications/group-invitation.spec.tsx
View file

@ -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'
)

3
services/web/test/frontend/features/project-list/components/notifications.test.tsx
View file

@ -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 })