Merge remote-tracking branch 'upstream/release/1.15.0' into fix-build-locale-types-fully

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"<StyledI18nSubText[\S\s.]*token=[\S\s.]*{key}[\S\s.]*"
+    fr"<I18nSubText[\S\s.]*token=[\S\s.]*{key}[\S\s.]*"
   ]
 
 

ts/components/basic/I18nSubText.tsx

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { forwardRef } from 'react';
+import { SessionDataTestId } from 'react';
 import { Localizer } from './Localizer';
 import type { LocalizerComponentPropsObject } from '../../localization/localeTools';
 
@@ -15,12 +15,18 @@ const StyledI18nSubTextContainer = styled('div')`
   padding-inline: var(--margins-lg);
 `;
 
-export const StyledI18nSubText = forwardRef<HTMLSpanElement, LocalizerComponentPropsObject>(
-  ({ className, ...props }) => {
-    return (
-      <StyledI18nSubTextContainer className={className}>
-        <Localizer {...props} />
-      </StyledI18nSubTextContainer>
-    );
-  }
-);
+export const I18nSubText = ({
+  className,
+  dataTestId,
+  localizerProps,
+}: {
+  className?: string;
+  dataTestId: SessionDataTestId;
+  localizerProps: LocalizerComponentPropsObject;
+}) => {
+  return (
+    <StyledI18nSubTextContainer className={className} data-testid={dataTestId}>
+      <Localizer {...localizerProps} />
+    </StyledI18nSubTextContainer>
+  );
+};

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(

ts/components/conversation/StagedLinkPreview.tsx

@@ -74,9 +74,11 @@ export const StagedLinkPreview = (props: Props) => {
         justifyContent={isLoading ? 'center' : 'flex-start'}
         alignItems={'center'}
       >
-        {isLoading ? <SessionSpinner loading={isLoading} /> : null}
+        {isLoading ? (
+          <SessionSpinner loading={isLoading} data-testid="link-preview-loading" />
+        ) : null}
         {isLoaded && image && isContentTypeImage ? (
-          <StyledImage>
+          <StyledImage data-testid="link-preview-image">
             <Image
               alt={AriaLabels.imageStagedLinkPreview}
               attachment={image as any}
@@ -87,7 +89,7 @@ export const StagedLinkPreview = (props: Props) => {
             />
           </StyledImage>
         ) : null}
-        {isLoaded ? <StyledText>{title}</StyledText> : null}
+        {isLoaded ? <StyledText data-testid="link-preview-title">{title}</StyledText> : null}
       </Flex>
       <SessionIconButton
         iconType="exit"
@@ -98,6 +100,7 @@ export const StagedLinkPreview = (props: Props) => {
         }}
         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,

ts/components/dialog/OpenUrlModal.tsx

@@ -8,7 +8,7 @@ import { OpenUrlModalState, updateOpenUrlModal } from '../../state/ducks/modalDi
 import { SessionWrapperModal } from '../SessionWrapperModal';
 import { SessionButton, SessionButtonColor, SessionButtonType } from '../basic/SessionButton';
 import { SpacerMD } from '../basic/Text';
-import { StyledI18nSubText } from '../basic/StyledI18nSubText';
+import { I18nSubText } from '../basic/I18nSubText';
 import { StyledModalDescriptionContainer } from './shared/ModalDescriptionContainer';
 
 const StyledScrollDescriptionContainer = styled(StyledModalDescriptionContainer)`
@@ -47,7 +47,10 @@ export function OpenUrlModal(props: OpenUrlModalState) {
     >
       <div className="session-modal__centered">
         <StyledScrollDescriptionContainer>
-          <StyledI18nSubText token="urlOpenDescription" asTag="span" args={{ url }} />
+          <I18nSubText
+            localizerProps={{ token: 'urlOpenDescription', asTag: 'span', args: { url } }}
+            dataTestId="modal-description"
+          />
         </StyledScrollDescriptionContainer>
       </div>
       <SpacerMD />

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,7 +85,7 @@ export const QuitModal = (props: SessionConfirmDialogProps) => {
           style={modalStyle}
         >
           <SpacerLG />
-          <StyledI18nSubText {...i18nMessage}></StyledI18nSubText>
+          <I18nSubText localizerProps={i18nMessage} dataTestId="modal-description" />
           <SpacerLG />
         </Flex>
       ) : null}

ts/components/dialog/SessionConfirm.tsx

@@ -10,9 +10,8 @@ import { SessionButton, SessionButtonColor, SessionButtonType } from '../basic/S
 import { SessionRadioGroup, SessionRadioItems } from '../basic/SessionRadioGroup';
 import { SpacerLG } from '../basic/Text';
 import { SessionSpinner } from '../loading';
-
-import { StyledI18nSubText } from '../basic/StyledI18nSubText';
 import type { LocalizerComponentPropsObject } from '../../localization/localeTools';
+import { I18nSubText } from '../basic/I18nSubText';
 
 export interface SessionConfirmDialogProps {
   i18nMessage?: LocalizerComponentPropsObject;
@@ -132,7 +131,7 @@ export const SessionConfirm = (props: SessionConfirmDialogProps) => {
 
       <div className="session-modal__centered">
         {i18nMessage ? (
-          <StyledI18nSubText {...i18nMessage} data-testid="modal-description" />
+          <I18nSubText localizerProps={i18nMessage} dataTestId="modal-description" />
         ) : null}
         {radioOptions && chosenOption !== '' ? (
           <SessionRadioGroup

ts/react.d.ts

@@ -176,11 +176,18 @@ 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'
     | 'join-community-conversation'
     | 'join-community-button'
+    | 'audio-player'
     | 'select-contact'
     | 'contact' // this is way too generic
     | 'contact-status'