From ba3d7f43db237921a11ea830ba2e335a2b3dfc38 Mon Sep 17 00:00:00 2001 From: Audric Ackermann Date: Tue, 31 Dec 2024 11:40:54 +1100 Subject: [PATCH 1/4] fix: add data-testid to a few other modals description --- ts/components/basic/StyledI18nSubText.tsx | 21 +++++++++++++-------- ts/components/dialog/OpenUrlModal.tsx | 5 ++++- ts/components/dialog/QuitModal.tsx | 5 ++++- ts/components/dialog/SessionConfirm.tsx | 2 +- 4 files changed, 22 insertions(+), 11 deletions(-) diff --git a/ts/components/basic/StyledI18nSubText.tsx b/ts/components/basic/StyledI18nSubText.tsx index 56a28c0b7..696d03f5b 100644 --- a/ts/components/basic/StyledI18nSubText.tsx +++ b/ts/components/basic/StyledI18nSubText.tsx @@ -1,5 +1,5 @@ import styled from 'styled-components'; -import { forwardRef } from 'react'; +import { SessionDataTestId } from 'react'; import { Localizer } from './Localizer'; import type { LocalizerComponentProps, LocalizerToken } from '../../types/localizer'; @@ -15,13 +15,18 @@ const StyledI18nSubTextContainer = styled('div')` padding-inline: var(--margins-lg); `; -export const StyledI18nSubText = forwardRef< - HTMLSpanElement, - LocalizerComponentProps ->(({ className, ...props }) => { +export const StyledI18nSubText = ({ + className, + dataTestId, + localizerProps, +}: { + className?: string; + dataTestId: SessionDataTestId; + localizerProps: LocalizerComponentProps; +}) => { return ( - - + + ); -}); +}; diff --git a/ts/components/dialog/OpenUrlModal.tsx b/ts/components/dialog/OpenUrlModal.tsx index fe9353e85..75918cfd4 100644 --- a/ts/components/dialog/OpenUrlModal.tsx +++ b/ts/components/dialog/OpenUrlModal.tsx @@ -47,7 +47,10 @@ export function OpenUrlModal(props: OpenUrlModalState) { >
- +
diff --git a/ts/components/dialog/QuitModal.tsx b/ts/components/dialog/QuitModal.tsx index 828c6c473..6ea33fb92 100644 --- a/ts/components/dialog/QuitModal.tsx +++ b/ts/components/dialog/QuitModal.tsx @@ -85,7 +85,10 @@ export const QuitModal = (props: SessionConfirmDialogProps) => { style={modalStyle} > - + ) : null} diff --git a/ts/components/dialog/SessionConfirm.tsx b/ts/components/dialog/SessionConfirm.tsx index 2657cfa2a..04aa99c75 100644 --- a/ts/components/dialog/SessionConfirm.tsx +++ b/ts/components/dialog/SessionConfirm.tsx @@ -132,7 +132,7 @@ export const SessionConfirm = (props: SessionConfirmDialogProps) => {
{i18nMessage ? ( - + ) : null} {radioOptions && chosenOption !== '' ? ( Date: Thu, 2 Jan 2025 11:26:32 +1100 Subject: [PATCH 2/4] fix: add datatestid link preview staged --- ts/components/conversation/StagedLinkPreview.tsx | 9 ++++++--- ts/react.d.ts | 6 ++++++ 2 files changed, 12 insertions(+), 3 deletions(-) diff --git a/ts/components/conversation/StagedLinkPreview.tsx b/ts/components/conversation/StagedLinkPreview.tsx index b410dbdbd..104c2728f 100644 --- a/ts/components/conversation/StagedLinkPreview.tsx +++ b/ts/components/conversation/StagedLinkPreview.tsx @@ -74,9 +74,11 @@ export const StagedLinkPreview = (props: Props) => { justifyContent={isLoading ? 'center' : 'flex-start'} alignItems={'center'} > - {isLoading ? : null} + {isLoading ? ( + + ) : null} {isLoaded && image && isContentTypeImage ? ( - + {AriaLabels.imageStagedLinkPreview} { /> ) : null} - {isLoaded ? {title} : null} + {isLoaded ? {title} : null} { }} margin={'0 var(--margins-sm) 0 0'} aria-label={window.i18n('close')} + dataTestId="link-preview-close" style={{ position: isLoading ? 'absolute' : undefined, right: isLoading ? 'var(--margins-sm)' : undefined, diff --git a/ts/react.d.ts b/ts/react.d.ts index 4ec2ceb4f..a5bb7a5d6 100644 --- a/ts/react.d.ts +++ b/ts/react.d.ts @@ -176,6 +176,12 @@ declare module 'react' { | 'session-link-helpdesk' | 'session-faq-link' + // link preview (staged) + | 'link-preview-loading' + | 'link-preview-image' + | 'link-preview-title' + | 'link-preview-close' + // to sort | 'restore-using-recovery' | 'link-device' From 3764233cf8d5173b95567331317dc4e3a443cb41 Mon Sep 17 00:00:00 2001 From: Audric Ackermann Date: Fri, 3 Jan 2025 14:40:37 +1100 Subject: [PATCH 3/4] chore: add datatestid to audio-player --- ts/components/conversation/H5AudioPlayer.tsx | 4 ++-- ts/react.d.ts | 1 + 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/ts/components/conversation/H5AudioPlayer.tsx b/ts/components/conversation/H5AudioPlayer.tsx index b1a3eb5d3..126545017 100644 --- a/ts/components/conversation/H5AudioPlayer.tsx +++ b/ts/components/conversation/H5AudioPlayer.tsx @@ -1,5 +1,5 @@ // Audio Player -import { useEffect, useRef, useState } from 'react'; +import { SessionDataTestId, useEffect, useRef, useState } from 'react'; import H5AudioPlayer, { RHAP_UI } from 'react-h5-audio-player'; import { useDispatch, useSelector } from 'react-redux'; import styled from 'styled-components'; @@ -171,7 +171,7 @@ export const AudioPlayerWithEncryptedFile = (props: { direction === 'incoming' ? 'var(--message-bubbles-received-text-color)' : 'var(--message-bubbles-sent-text-color)'; - const dataTestId = `audio-${messageId}`; + const dataTestId: SessionDataTestId = 'audio-player'; const triggerPlayNextMessageIfNeeded = (endedMessageId: string) => { const justEndedMessageIndex = messageProps.findIndex( diff --git a/ts/react.d.ts b/ts/react.d.ts index a5bb7a5d6..7bd968dc1 100644 --- a/ts/react.d.ts +++ b/ts/react.d.ts @@ -187,6 +187,7 @@ declare module 'react' { | 'link-device' | 'join-community-conversation' | 'join-community-button' + | 'audio-player' | 'select-contact' | 'contact' // this is way too generic | 'contact-status' From e7bd7d9ea2776635ae0569974946d91e5ad8b9dc Mon Sep 17 00:00:00 2001 From: Audric Ackermann Date: Mon, 6 Jan 2025 12:14:57 +1100 Subject: [PATCH 4/4] chore: rename StyledI18nSubText to I18nSubText because it is not directly a styled. element --- tools/localization/regex.py | 2 +- .../basic/{StyledI18nSubText.tsx => I18nSubText.tsx} | 2 +- ts/components/dialog/OpenUrlModal.tsx | 4 ++-- ts/components/dialog/QuitModal.tsx | 7 ++----- ts/components/dialog/SessionConfirm.tsx | 4 ++-- 5 files changed, 8 insertions(+), 11 deletions(-) rename ts/components/basic/{StyledI18nSubText.tsx => I18nSubText.tsx} (96%) diff --git a/tools/localization/regex.py b/tools/localization/regex.py index 1be444ffe..4da06bf6c 100644 --- a/tools/localization/regex.py +++ b/tools/localization/regex.py @@ -18,7 +18,7 @@ def get_localization_regex_list(string): fr"i18n\('{key}'(, {{[\S\s.]*}})?\)", fr"i18n\.(stripped|inEnglish|getRawMessage)\('{key}'(, {{[\S\s.]*}})?\)", fr"window\?\.i18n\?\.\('{key}'(, {{[\S\s.]*}})?\)", - fr"
- diff --git a/ts/components/dialog/QuitModal.tsx b/ts/components/dialog/QuitModal.tsx index 6ea33fb92..cbf0cfc0b 100644 --- a/ts/components/dialog/QuitModal.tsx +++ b/ts/components/dialog/QuitModal.tsx @@ -8,7 +8,7 @@ import { Flex } from '../basic/Flex'; import { SessionButton, SessionButtonColor, SessionButtonType } from '../basic/SessionButton'; import { SpacerLG, SpacerSM } from '../basic/Text'; import { SessionConfirmDialogProps } from './SessionConfirm'; -import { StyledI18nSubText } from '../basic/StyledI18nSubText'; +import { I18nSubText } from '../basic/I18nSubText'; const modalStyle: CSSProperties = { maxWidth: '300px', @@ -85,10 +85,7 @@ export const QuitModal = (props: SessionConfirmDialogProps) => { style={modalStyle} > - + ) : null} diff --git a/ts/components/dialog/SessionConfirm.tsx b/ts/components/dialog/SessionConfirm.tsx index 04aa99c75..ac495f912 100644 --- a/ts/components/dialog/SessionConfirm.tsx +++ b/ts/components/dialog/SessionConfirm.tsx @@ -12,7 +12,7 @@ import { SpacerLG } from '../basic/Text'; import { SessionSpinner } from '../loading'; import type { LocalizerComponentPropsObject } from '../../types/localizer'; -import { StyledI18nSubText } from '../basic/StyledI18nSubText'; +import { I18nSubText } from '../basic/I18nSubText'; export interface SessionConfirmDialogProps { i18nMessage?: LocalizerComponentPropsObject; @@ -132,7 +132,7 @@ export const SessionConfirm = (props: SessionConfirmDialogProps) => {
{i18nMessage ? ( - + ) : null} {radioOptions && chosenOption !== '' ? (