From cccd0f06d7f7318af3b32f8ba7b24f3df4a389ed Mon Sep 17 00:00:00 2001 From: ilkin-overleaf <100852799+ilkin-overleaf@users.noreply.github.com> Date: Fri, 19 Apr 2024 15:30:23 +0300 Subject: [PATCH] Merge pull request #17908 from overleaf/ii-bs5-badge [web] Create Bootstrap 5 badges GitOrigin-RevId: 72355c7cf7dca2a5d16bc890d7cfa4a432dd15ba --- .../components/members-table/member-row.tsx | 7 +- .../components/change-list/tag-tooltip.tsx | 17 ++-- .../file-tree/history-file-tree-item.tsx | 5 +- .../settings/components/emails/email.tsx | 9 +- .../components/linking/enable-widget.tsx | 3 +- .../components/linking/integration-widget.tsx | 3 +- .../ui/components/bootstrap-5/badge.tsx | 27 ++++++ .../bootstrap-5/wrappers/badge-wrapper.tsx | 41 ++++++++ .../frontend/js/shared/components/badge.tsx | 35 ++++--- .../web/frontend/stories/badge.stories.tsx | 53 ----------- .../frontend/stories/ui/badge-bs3.stories.tsx | 93 +++++++++++++++++++ .../frontend/stories/ui/badge-bs5.stories.tsx | 93 +++++++++++++++++++ .../bootstrap-5/abstracts/mixins.scss | 8 ++ .../abstracts/variable-overrides.scss | 14 +++ .../bootstrap-5/base/bootstrap.scss | 1 + .../bootstrap-5/components/all.scss | 1 + .../bootstrap-5/components/badge.scss | 35 +++++++ .../stylesheets/components/badge.less | 9 +- .../components/group-members.spec.tsx | 29 ++++-- .../components/managed-group-members.spec.tsx | 14 ++- .../members-table/member-row.spec.tsx | 20 +++- 21 files changed, 409 insertions(+), 108 deletions(-) create mode 100644 services/web/frontend/js/features/ui/components/bootstrap-5/badge.tsx create mode 100644 services/web/frontend/js/features/ui/components/bootstrap-5/wrappers/badge-wrapper.tsx delete mode 100644 services/web/frontend/stories/badge.stories.tsx create mode 100644 services/web/frontend/stories/ui/badge-bs3.stories.tsx create mode 100644 services/web/frontend/stories/ui/badge-bs5.stories.tsx create mode 100644 services/web/frontend/stylesheets/bootstrap-5/components/badge.scss diff --git a/services/web/frontend/js/features/group-management/components/members-table/member-row.tsx b/services/web/frontend/js/features/group-management/components/members-table/member-row.tsx index 0235b539df..75b7b17ed5 100644 --- a/services/web/frontend/js/features/group-management/components/members-table/member-row.tsx +++ b/services/web/frontend/js/features/group-management/components/members-table/member-row.tsx @@ -46,7 +46,12 @@ export default function MemberRow({ id={`pending-invite-symbol-${user._id}`} description={t('pending_invite')} > - + {t('pending_invite')} diff --git a/services/web/frontend/js/features/history/components/change-list/tag-tooltip.tsx b/services/web/frontend/js/features/history/components/change-list/tag-tooltip.tsx index 8ad8038fea..05f0625531 100644 --- a/services/web/frontend/js/features/history/components/change-list/tag-tooltip.tsx +++ b/services/web/frontend/js/features/history/components/change-list/tag-tooltip.tsx @@ -64,16 +64,21 @@ function Tag({ label, currentUserId, ...props }: TagProps) { } } + const showCloseButton = Boolean( + (isOwnedByCurrentUser || isProjectOwner) && !isPseudoCurrentStateLabel + ) + return ( <> } - onClose={showConfirmationModal} - closeButton={Boolean( - (isOwnedByCurrentUser || isProjectOwner) && !isPseudoCurrentStateLabel - )} - closeBtnProps={{ 'aria-label': t('delete') }} - className="history-version-badge" + closeBtnProps={ + showCloseButton + ? { 'aria-label': t('delete'), onClick: showConfirmationModal } + : undefined + } + bsStyle={null} + className="badge-bs3 history-version-badge" data-testid="history-version-badge" {...props} > diff --git a/services/web/frontend/js/features/history/components/file-tree/history-file-tree-item.tsx b/services/web/frontend/js/features/history/components/file-tree/history-file-tree-item.tsx index 89f97e20c7..2e1e3ff8b8 100644 --- a/services/web/frontend/js/features/history/components/file-tree/history-file-tree-item.tsx +++ b/services/web/frontend/js/features/history/components/file-tree/history-file-tree-item.tsx @@ -26,7 +26,10 @@ export default function HistoryFileTreeItem({ {name} {operation ? ( - + {operation} ) : null} diff --git a/services/web/frontend/js/features/settings/components/emails/email.tsx b/services/web/frontend/js/features/settings/components/emails/email.tsx index a8e85c464d..4d5d52887d 100644 --- a/services/web/frontend/js/features/settings/components/emails/email.tsx +++ b/services/web/frontend/js/features/settings/components/emails/email.tsx @@ -2,6 +2,9 @@ import { useTranslation } from 'react-i18next' import { UserEmailData } from '../../../../../../types/user-email' import ResendConfirmationEmailButton from './resend-confirmation-email-button' import { ssoAvailableForInstitution } from '../../utils/sso' +import BadgeWrapper from '@/features/ui/components/bootstrap-5/wrappers/badge-wrapper' +import { isBootstrap5 } from '@/features/utils/bootstrap-5' +import classnames from 'classnames' type EmailProps = { userEmailData: UserEmailData @@ -37,14 +40,14 @@ function Email({ userEmailData }: EmailProps) { )} {hasBadges && ( -
+
{isPrimary && ( <> - Primary{' '} + Primary{' '} )} {isProfessional && ( - {t('professional')} + {t('professional')} )}
)} diff --git a/services/web/frontend/js/features/settings/components/linking/enable-widget.tsx b/services/web/frontend/js/features/settings/components/linking/enable-widget.tsx index cfbfa1fcc0..92d4d7b900 100644 --- a/services/web/frontend/js/features/settings/components/linking/enable-widget.tsx +++ b/services/web/frontend/js/features/settings/components/linking/enable-widget.tsx @@ -2,6 +2,7 @@ import { ReactNode } from 'react' import { useTranslation } from 'react-i18next' import { Button } from 'react-bootstrap' import { sendMB } from '@/infrastructure/event-tracking' +import BadgeWrapper from '@/features/ui/components/bootstrap-5/wrappers/badge-wrapper' function trackUpgradeClick() { sendMB('settings-upgrade-click') @@ -48,7 +49,7 @@ export function EnableWidget({

{title}

{!hasFeature && isPremiumFeature && ( - {t('premium_feature')} + {t('premium_feature')} )}

diff --git a/services/web/frontend/js/features/settings/components/linking/integration-widget.tsx b/services/web/frontend/js/features/settings/components/linking/integration-widget.tsx index a1120e9612..873aa08033 100644 --- a/services/web/frontend/js/features/settings/components/linking/integration-widget.tsx +++ b/services/web/frontend/js/features/settings/components/linking/integration-widget.tsx @@ -1,6 +1,7 @@ import { useCallback, useState, ReactNode } from 'react' import { useTranslation } from 'react-i18next' import AccessibleModal from '../../../../shared/components/accessible-modal' +import BadgeWrapper from '@/features/ui/components/bootstrap-5/wrappers/badge-wrapper' import { Button, Modal } from 'react-bootstrap' import getMeta from '../../../../utils/meta' import { sendMB } from '../../../../infrastructure/event-tracking' @@ -57,7 +58,7 @@ export function IntegrationLinkingWidget({

{title}

{!hasFeature && ( - {t('premium_feature')} + {t('premium_feature')} )}

diff --git a/services/web/frontend/js/features/ui/components/bootstrap-5/badge.tsx b/services/web/frontend/js/features/ui/components/bootstrap-5/badge.tsx new file mode 100644 index 0000000000..54ec335099 --- /dev/null +++ b/services/web/frontend/js/features/ui/components/bootstrap-5/badge.tsx @@ -0,0 +1,27 @@ +import { Badge as BSBadge } from 'react-bootstrap-5' +import { MergeAndOverride } from '../../../../../../types/utils' +import MaterialIcon from '@/shared/components/material-icon' + +type BadgeProps = MergeAndOverride< + React.ComponentProps, + { + prepend?: React.ReactNode + closeBtnProps?: React.ComponentProps<'button'> + } +> + +function Badge({ prepend, children, closeBtnProps, ...rest }: BadgeProps) { + return ( + + {prepend && {prepend}} + {children} + {closeBtnProps && ( + + )} + + ) +} + +export default Badge diff --git a/services/web/frontend/js/features/ui/components/bootstrap-5/wrappers/badge-wrapper.tsx b/services/web/frontend/js/features/ui/components/bootstrap-5/wrappers/badge-wrapper.tsx new file mode 100644 index 0000000000..547d88fbf5 --- /dev/null +++ b/services/web/frontend/js/features/ui/components/bootstrap-5/wrappers/badge-wrapper.tsx @@ -0,0 +1,41 @@ +import { Label } from 'react-bootstrap' +import Badge from '@/features/ui/components/bootstrap-5/badge' +import BS3Badge from '@/shared/components/badge' +import BootstrapVersionSwitcher from '@/features/ui/components/bootstrap-5/bootstrap-version-switcher' + +type BadgeWrapperProps = React.ComponentProps & { + bs3Props?: { + bsStyle?: React.ComponentProps['bsStyle'] | null + } +} + +function BadgeWrapper(props: BadgeWrapperProps) { + const { bs3Props, ...rest } = props + + let bs3BadgeProps: React.ComponentProps = { + prepend: rest.prepend, + children: rest.children, + closeBtnProps: rest.closeBtnProps, + className: rest.className, + bsStyle: rest.bg, + } + + if (bs3Props) { + const { bsStyle, ...restBs3Props } = bs3Props + + bs3BadgeProps = { + ...bs3BadgeProps, + ...restBs3Props, + bsStyle: 'bsStyle' in bs3Props ? bsStyle : rest.bg, + } + } + + return ( + } + bs5={} + /> + ) +} + +export default BadgeWrapper diff --git a/services/web/frontend/js/shared/components/badge.tsx b/services/web/frontend/js/shared/components/badge.tsx index 3ab42fdd08..a8e8e1aaec 100644 --- a/services/web/frontend/js/shared/components/badge.tsx +++ b/services/web/frontend/js/shared/components/badge.tsx @@ -1,40 +1,39 @@ import classnames from 'classnames' import { MergeAndOverride } from '../../../../types/utils' +import BadgeWrapper from '@/features/ui/components/bootstrap-5/wrappers/badge-wrapper' type BadgeProps = MergeAndOverride< React.ComponentProps<'span'>, { prepend?: React.ReactNode children: React.ReactNode - className?: string - closeButton?: boolean - onClose?: (e: React.MouseEvent) => void closeBtnProps?: React.ComponentProps<'button'> - size?: 'sm' + className?: string + bsStyle?: NonNullable< + React.ComponentProps['bs3Props'] + >['bsStyle'] } > function Badge({ prepend, children, - className, - closeButton = false, - onClose, closeBtnProps, - size, + bsStyle, + className, ...rest }: BadgeProps) { + const classNames = + bsStyle === null + ? className + : classnames('label', `label-${bsStyle}`, className) + return ( - - {prepend} - {children} - {closeButton && ( - )} diff --git a/services/web/frontend/stories/badge.stories.tsx b/services/web/frontend/stories/badge.stories.tsx deleted file mode 100644 index 8421af888b..0000000000 --- a/services/web/frontend/stories/badge.stories.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import Badge from '../js/shared/components/badge' -import Icon from '../js/shared/components/icon' - -type Args = React.ComponentProps - -export const NewBadge = (args: Args) => { - return -} - -export const NewBadgePrepend = (args: Args) => { - return } {...args} /> -} - -export const NewBadgeWithCloseButton = (args: Args) => { - return ( - } - closeButton - onClose={() => alert('Close triggered!')} - {...args} - /> - ) -} - -export default { - title: 'Shared / Components / Badge', - component: Badge, - args: { - children: 'content', - }, - argTypes: { - prepend: { - table: { - disable: true, - }, - }, - closeButton: { - table: { - disable: true, - }, - }, - onClose: { - table: { - disable: true, - }, - }, - closeBtnProps: { - table: { - disable: true, - }, - }, - }, -} diff --git a/services/web/frontend/stories/ui/badge-bs3.stories.tsx b/services/web/frontend/stories/ui/badge-bs3.stories.tsx new file mode 100644 index 0000000000..c50b314905 --- /dev/null +++ b/services/web/frontend/stories/ui/badge-bs3.stories.tsx @@ -0,0 +1,93 @@ +import Badge from '@/shared/components/badge' +import Icon from '@/shared/components/icon' +import type { Meta, StoryObj } from '@storybook/react' +import classnames from 'classnames' + +const meta: Meta = { + title: 'Shared / Components / Badge / Bootstrap 3', + component: Badge, + parameters: { + bootstrap5: false, + }, + args: { + children: 'Badge', + }, + argTypes: { + prepend: { + table: { + disable: true, + }, + }, + bsStyle: { + options: [null, 'primary', 'warning', 'danger'], + control: { type: 'radio' }, + }, + className: { + table: { + disable: true, + }, + }, + closeBtnProps: { + table: { + disable: true, + }, + }, + }, +} +export default meta + +type Story = StoryObj + +export const BadgeDefault: Story = { + render: args => { + return ( + + ) + }, +} +BadgeDefault.args = { + bsStyle: null, +} + +export const BadgePrepend: Story = { + render: args => { + return ( + } + {...args} + /> + ) + }, +} +BadgePrepend.args = { + bsStyle: null, +} + +export const BadgeWithCloseButton: Story = { + render: args => { + return ( + } + closeBtnProps={{ + onClick: () => alert('Close triggered!'), + }} + {...args} + /> + ) + }, +} +BadgeWithCloseButton.args = { + bsStyle: null, +} +BadgeWithCloseButton.argTypes = { + bsStyle: { + table: { + disable: true, + }, + }, +} diff --git a/services/web/frontend/stories/ui/badge-bs5.stories.tsx b/services/web/frontend/stories/ui/badge-bs5.stories.tsx new file mode 100644 index 0000000000..45b88a0928 --- /dev/null +++ b/services/web/frontend/stories/ui/badge-bs5.stories.tsx @@ -0,0 +1,93 @@ +import Badge from '@/features/ui/components/bootstrap-5/badge' +import Icon from '@/shared/components/icon' +import type { Meta, StoryObj } from '@storybook/react' +import classnames from 'classnames' + +const meta: Meta = { + title: 'Shared / Components / Badge / Bootstrap 5', + component: Badge, + parameters: { + bootstrap5: true, + }, + args: { + children: 'Badge', + }, + argTypes: { + bg: { + options: ['light', 'info', 'primary', 'warning', 'danger'], + control: { type: 'radio' }, + }, + prepend: { + table: { + disable: true, + }, + }, + className: { + table: { + disable: true, + }, + }, + closeBtnProps: { + table: { + disable: true, + }, + }, + }, +} +export default meta + +type Story = StoryObj + +export const BadgeDefault: Story = { + render: args => { + return ( + + ) + }, +} +BadgeDefault.args = { + bg: 'light', +} + +export const BadgePrepend: Story = { + render: args => { + return ( + } + {...args} + /> + ) + }, +} +BadgePrepend.args = { + bg: 'light', +} + +export const BadgeWithCloseButton: Story = { + render: args => { + return ( + } + closeBtnProps={{ + onClick: () => alert('Close triggered!'), + }} + {...args} + /> + ) + }, +} +BadgeWithCloseButton.args = { + bg: 'light', +} +BadgeWithCloseButton.argTypes = { + bg: { + table: { + disable: true, + }, + }, +} diff --git a/services/web/frontend/stylesheets/bootstrap-5/abstracts/mixins.scss b/services/web/frontend/stylesheets/bootstrap-5/abstracts/mixins.scss index 96c0c084f1..bae55e5cac 100644 --- a/services/web/frontend/stylesheets/bootstrap-5/abstracts/mixins.scss +++ b/services/web/frontend/stylesheets/bootstrap-5/abstracts/mixins.scss @@ -44,3 +44,11 @@ border-color: var(--bs-btn-border-color); } } + +@mixin reset-button() { + padding: 0; + cursor: pointer; + background: transparent; + border: 0; + -webkit-appearance: none; +} diff --git a/services/web/frontend/stylesheets/bootstrap-5/abstracts/variable-overrides.scss b/services/web/frontend/stylesheets/bootstrap-5/abstracts/variable-overrides.scss index 2e28678def..15214429ae 100644 --- a/services/web/frontend/stylesheets/bootstrap-5/abstracts/variable-overrides.scss +++ b/services/web/frontend/stylesheets/bootstrap-5/abstracts/variable-overrides.scss @@ -1,5 +1,7 @@ // Overrides for Bootstrap 5's default Sass variables +$prefix: bs-; + // Fonts $font-family-sans-serif: 'Noto Sans', sans-serif; $font-family-serif: 'Merriweather', serif; @@ -21,6 +23,18 @@ $btn-border-radius-sm: $border-radius-full; // Colors $primary: $bg-accent-01; $secondary: $bg-light-primary; +$info: $bg-info-01; +$warning: $bg-warning-01; +$danger: $bg-danger-01; +$light: $bg-light-tertiary; +$dark: $neutral-90; + +// Badges +$badge-font-size: var(--font-size-01); +$badge-font-weight: var(--bs-body-font-weight); +$badge-padding-y: $spacing-01; +$badge-padding-x: $spacing-02; +$badge-border-radius: $border-radius-base; // Tooltips $tooltip-max-width: 320px; diff --git a/services/web/frontend/stylesheets/bootstrap-5/base/bootstrap.scss b/services/web/frontend/stylesheets/bootstrap-5/base/bootstrap.scss index 0a9dd0ed8f..a12c41c2d5 100644 --- a/services/web/frontend/stylesheets/bootstrap-5/base/bootstrap.scss +++ b/services/web/frontend/stylesheets/bootstrap-5/base/bootstrap.scss @@ -28,6 +28,7 @@ @import 'bootstrap-5/scss/grid'; @import 'bootstrap-5/scss/buttons'; @import 'bootstrap-5/scss/dropdown'; +@import 'bootstrap-5/scss/badge'; @import 'bootstrap-5/scss/modal'; @import 'bootstrap-5/scss/tooltip'; @import 'bootstrap-5/scss/spinners'; diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/all.scss b/services/web/frontend/stylesheets/bootstrap-5/components/all.scss index 0bfa13246d..54a3765f9b 100644 --- a/services/web/frontend/stylesheets/bootstrap-5/components/all.scss +++ b/services/web/frontend/stylesheets/bootstrap-5/components/all.scss @@ -4,3 +4,4 @@ @import 'notifications'; @import 'tooltip'; @import 'card'; +@import 'badge'; diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/badge.scss b/services/web/frontend/stylesheets/bootstrap-5/components/badge.scss new file mode 100644 index 0000000000..6e01e81ec5 --- /dev/null +++ b/services/web/frontend/stylesheets/bootstrap-5/components/badge.scss @@ -0,0 +1,35 @@ +.badge { + display: inline-flex; + align-items: center; + overflow: hidden; + line-height: var(--line-height-01); +} + +.badge-prepend { + margin-left: calc($spacing-01 / -2); + margin-right: $spacing-01; +} + +.badge-close { + @include reset-button(); + + display: flex; + align-items: center; + justify-content: center; + + // a random number that would cause the close button to expand enough + // so that it won't be affected by badge's padding + $expand: 100px; + padding: $expand $spacing-01; + margin: (-$expand) (-$spacing-02) (-$expand) $spacing-02; + user-select: none; + color: inherit; + + .badge-close-icon { + font-size: $font-size-base; + } + + &:hover { + background-color: var(--neutral-40); + } +} diff --git a/services/web/frontend/stylesheets/components/badge.less b/services/web/frontend/stylesheets/components/badge.less index defb091148..762cad8964 100644 --- a/services/web/frontend/stylesheets/components/badge.less +++ b/services/web/frontend/stylesheets/components/badge.less @@ -1,4 +1,4 @@ -.badge-new { +.badge-bs3 { @size: 24px; @padding: 4px; display: inline-flex; @@ -20,10 +20,6 @@ margin-right: 2px; } - &-comment { - flex: 1; - } - &-close { .reset-button; width: @size; @@ -34,6 +30,7 @@ align-items: center; justify-content: center; margin-right: -@padding; + color: inherit; &:hover { background-color: @neutral-40; @@ -44,7 +41,7 @@ @size-sm: 20px; height: @size-sm; font-size: @font-size-extra-small; - .badge-new-close { + .badge-bs3-close { width: @size-sm; font-size: @size-sm; } diff --git a/services/web/test/frontend/features/group-management/components/group-members.spec.tsx b/services/web/test/frontend/features/group-management/components/group-members.spec.tsx index 8caeefe1f2..c26781702b 100644 --- a/services/web/test/frontend/features/group-management/components/group-members.spec.tsx +++ b/services/web/test/frontend/features/group-management/components/group-members.spec.tsx @@ -61,14 +61,17 @@ describe('GroupMembers', function () { cy.contains('john.doe@test.com') cy.contains('John Doe') cy.contains('15th Jan 2023') - cy.get('.badge-new-comment').contains('Pending invite') + cy.findByTestId('badge-pending-invite').should( + 'have.text', + 'Pending invite' + ) }) cy.get('tr:nth-child(2)').within(() => { cy.contains('bobby.lapointe@test.com') cy.contains('Bobby Lapointe') cy.contains('2nd Jan 2023') - cy.get('.badge-new-comment').should('not.exist') + cy.findByTestId('badge-pending-invite').should('not.exist') }) }) }) @@ -91,7 +94,10 @@ describe('GroupMembers', function () { cy.get('tr:nth-child(3)').within(() => { cy.contains('someone.else@test.com') cy.contains('N/A') - cy.get('.badge-new-comment').contains('Pending invite') + cy.findByTestId('badge-pending-invite').should( + 'have.text', + 'Pending invite' + ) }) }) }) @@ -236,10 +242,10 @@ describe('GroupMembers', function () { cy.contains('John Doe') cy.contains('15th Jan 2023') cy.get('.sr-only').contains('Pending invite') - cy.get('.badge-new-comment').contains('Pending invite') - cy.get(`.security-state-invite-pending`).should('exist') - - cy.get('.badge-new-comment').contains('Pending invite') + cy.findByTestId('badge-pending-invite').should( + 'have.text', + 'Pending invite' + ) cy.get(`.security-state-invite-pending`).should('exist') }) @@ -247,7 +253,7 @@ describe('GroupMembers', function () { cy.contains('bobby.lapointe@test.com') cy.contains('Bobby Lapointe') cy.contains('2nd Jan 2023') - cy.get('.badge-new-comment').should('not.exist') + cy.findByTestId('badge-pending-invite').should('not.exist') cy.get('.sr-only').contains('Not managed') }) @@ -255,7 +261,7 @@ describe('GroupMembers', function () { cy.contains('claire.jennings@test.com') cy.contains('Claire Jennings') cy.contains('3rd Jan 2023') - cy.get('.badge-new-comment').should('not.exist') + cy.findByTestId('badge-pending-invite').should('not.exist') cy.get('.sr-only').contains('Managed') }) }) @@ -280,7 +286,10 @@ describe('GroupMembers', function () { cy.contains('someone.else@test.com') cy.contains('N/A') cy.get('.sr-only').contains('Pending invite') - cy.get('.badge-new-comment').contains('Pending invite') + cy.findByTestId('badge-pending-invite').should( + 'have.text', + 'Pending invite' + ) cy.get(`.security-state-invite-pending`).should('exist') }) }) diff --git a/services/web/test/frontend/features/group-management/components/managed-group-members.spec.tsx b/services/web/test/frontend/features/group-management/components/managed-group-members.spec.tsx index 2cea99fe12..e9cbb4d5b0 100644 --- a/services/web/test/frontend/features/group-management/components/managed-group-members.spec.tsx +++ b/services/web/test/frontend/features/group-management/components/managed-group-members.spec.tsx @@ -90,7 +90,10 @@ describe('group members, with managed users', function () { cy.contains('15th Jan 2023') cy.get('.sr-only').contains('Pending invite') - cy.get('.badge-new-comment').contains('Pending invite') + cy.findByTestId('badge-pending-invite').should( + 'have.text', + 'Pending invite' + ) cy.get(`.security-state-invite-pending`).should('exist') }) @@ -98,7 +101,7 @@ describe('group members, with managed users', function () { cy.contains('bobby.lapointe@test.com') cy.contains('Bobby Lapointe') cy.contains('2nd Jan 2023') - cy.get('.badge-new-comment').should('not.exist') + cy.findByTestId('badge-pending-invite').should('not.exist') cy.get('.sr-only').contains('Not managed') }) @@ -106,7 +109,7 @@ describe('group members, with managed users', function () { cy.contains('claire.jennings@test.com') cy.contains('Claire Jennings') cy.contains('3rd Jan 2023') - cy.get('.badge-new-comment').should('not.exist') + cy.findByTestId('badge-pending-invite').should('not.exist') cy.get('.sr-only').contains('Managed') }) }) @@ -131,7 +134,10 @@ describe('group members, with managed users', function () { cy.contains('someone.else@test.com') cy.contains('N/A') cy.get('.sr-only').contains('Pending invite') - cy.get('.badge-new-comment').contains('Pending invite') + cy.findByTestId('badge-pending-invite').should( + 'have.text', + 'Pending invite' + ) cy.get(`.security-state-invite-pending`).should('exist') }) }) diff --git a/services/web/test/frontend/features/group-management/components/members-table/member-row.spec.tsx b/services/web/test/frontend/features/group-management/components/members-table/member-row.spec.tsx index 3d5a833ee9..d71695af22 100644 --- a/services/web/test/frontend/features/group-management/components/members-table/member-row.spec.tsx +++ b/services/web/test/frontend/features/group-management/components/members-table/member-row.spec.tsx @@ -97,7 +97,10 @@ describe('MemberRow', function () { }) it('should render a "Pending invite" badge', function () { - cy.get('.badge-new-comment').contains('Pending invite') + cy.findByTestId('badge-pending-invite').should( + 'have.text', + 'Pending invite' + ) }) }) @@ -269,7 +272,10 @@ describe('MemberRow', function () { }) it('should render a "Pending invite" badge', function () { - cy.get('.badge-new-comment').contains('Pending invite') + cy.findByTestId('badge-pending-invite').should( + 'have.text', + 'Pending invite' + ) }) }) @@ -443,7 +449,10 @@ describe('MemberRow', function () { }) it('should render a "Pending invite" badge', function () { - cy.get('.badge-new-comment').contains('Pending invite') + cy.findByTestId('badge-pending-invite').should( + 'have.text', + 'Pending invite' + ) }) }) @@ -618,7 +627,10 @@ describe('MemberRow', function () { }) it('should render a "Pending invite" badge', function () { - cy.get('.badge-new-comment').contains('Pending invite') + cy.findByTestId('badge-pending-invite').should( + 'have.text', + 'Pending invite' + ) }) })