From 7d81fd169eaf69c12958a2ccf543668b48e3b253 Mon Sep 17 00:00:00 2001
From: Audric Ackermann <audric@getsession.org>
Date: Tue, 26 Nov 2024 13:59:22 +1100
Subject: [PATCH] fix: add datatestid for radio button in PanelIconButton

---
 ts/components/buttons/PanelRadioButton.tsx    |  4 ++
 .../DisappearingModes.tsx                     | 15 ++++---
 .../disappearing-messages/TimeOptions.tsx     |  6 ++-
 ts/react.d.ts                                 | 43 +++++++++++--------
 4 files changed, 41 insertions(+), 27 deletions(-)

diff --git a/ts/components/buttons/PanelRadioButton.tsx b/ts/components/buttons/PanelRadioButton.tsx
index 26c477e0e..1f381711d 100644
--- a/ts/components/buttons/PanelRadioButton.tsx
+++ b/ts/components/buttons/PanelRadioButton.tsx
@@ -1,4 +1,5 @@
 import styled from 'styled-components';
+import { SessionDataTestId } from 'react';
 import { SessionRadio } from '../basic/SessionRadio';
 import { PanelButton, PanelButtonProps, PanelButtonText, StyledContent } from './PanelButton';
 
@@ -20,6 +21,7 @@ interface PanelRadioButtonProps extends Omit<PanelButtonProps, 'children' | 'onC
   isSelected: boolean;
   onSelect?: (...args: Array<any>) => void;
   onUnselect?: (...args: Array<any>) => void;
+  radioInputDataTestId: SessionDataTestId;
 }
 
 export const PanelRadioButton = (props: PanelRadioButtonProps) => {
@@ -32,6 +34,7 @@ export const PanelRadioButton = (props: PanelRadioButtonProps) => {
     onUnselect,
     disabled = false,
     dataTestId,
+    radioInputDataTestId,
   } = props;
 
   return (
@@ -51,6 +54,7 @@ export const PanelRadioButton = (props: PanelRadioButtonProps) => {
             inputName={value}
             label=""
             disabled={disabled}
+            inputDataTestId={radioInputDataTestId}
           />
         </StyledCheckContainer>
       </StyledContent>
diff --git a/ts/components/conversation/right-panel/overlay/disappearing-messages/DisappearingModes.tsx b/ts/components/conversation/right-panel/overlay/disappearing-messages/DisappearingModes.tsx
index 4ff48cdd4..270803baf 100644
--- a/ts/components/conversation/right-panel/overlay/disappearing-messages/DisappearingModes.tsx
+++ b/ts/components/conversation/right-panel/overlay/disappearing-messages/DisappearingModes.tsx
@@ -1,20 +1,19 @@
-import { SessionDataTestId } from 'react';
 import { DisappearingMessageConversationModeType } from '../../../../../session/disappearing_messages/types';
 import { Localizer } from '../../../../basic/Localizer';
 import { PanelButtonGroup, PanelLabel } from '../../../../buttons/PanelButton';
 import { PanelRadioButton } from '../../../../buttons/PanelRadioButton';
 
-function toDataTestId(mode: DisappearingMessageConversationModeType): SessionDataTestId {
+function toDataTestId(mode: DisappearingMessageConversationModeType) {
   switch (mode) {
     case 'legacy':
-      return 'disappear-legacy-option';
+      return 'disappear-legacy-option' as const;
     case 'deleteAfterRead':
-      return 'disappear-after-read-option';
+      return 'disappear-after-read-option' as const;
     case 'deleteAfterSend':
-      return 'disappear-after-send-option';
+      return 'disappear-after-send-option' as const;
     case 'off':
     default:
-      return 'disappear-off-option';
+      return 'disappear-off-option' as const;
   }
 }
 
@@ -57,6 +56,7 @@ export const DisappearingModes = (props: DisappearingModesProps) => {
                 : mode === 'deleteAfterSend'
                   ? window.i18n('disappearingMessagesDisappearAfterSendDescription')
                   : undefined;
+          const parentDataTestId = toDataTestId(mode);
 
           return (
             <PanelRadioButton
@@ -69,7 +69,8 @@ export const DisappearingModes = (props: DisappearingModesProps) => {
                 setSelected(mode);
               }}
               disabled={options[mode]}
-              dataTestId={toDataTestId(mode)}
+              dataTestId={parentDataTestId}
+              radioInputDataTestId={`input-${parentDataTestId}`}
             />
           );
         })}
diff --git a/ts/components/conversation/right-panel/overlay/disappearing-messages/TimeOptions.tsx b/ts/components/conversation/right-panel/overlay/disappearing-messages/TimeOptions.tsx
index 26e269805..01e06f0e7 100644
--- a/ts/components/conversation/right-panel/overlay/disappearing-messages/TimeOptions.tsx
+++ b/ts/components/conversation/right-panel/overlay/disappearing-messages/TimeOptions.tsx
@@ -1,5 +1,6 @@
 import { isEmpty } from 'lodash';
 
+import { DisappearTimeOptionDataTestId } from 'react';
 import { TimerOptionsArray } from '../../../../../session/disappearing_messages/timerOptions';
 import { PanelButtonGroup, PanelLabel } from '../../../../buttons/PanelButton';
 import { PanelRadioButton } from '../../../../buttons/PanelRadioButton';
@@ -29,6 +30,8 @@ export const TimeOptions = (props: TimerOptionsProps) => {
       )}
       <PanelButtonGroup>
         {options.map(option => {
+          // we want  "time-option-3600-seconds", etc as accessibility id
+          const parentDataTestId: DisappearTimeOptionDataTestId = `time-option-${option.value}-seconds`;
           return (
             <PanelRadioButton
               key={option.name}
@@ -39,7 +42,8 @@ export const TimeOptions = (props: TimerOptionsProps) => {
                 setSelected(option.value);
               }}
               disabled={disabled}
-              dataTestId={`time-option-${option.value}-seconds`} // we want  "time-option-3600-seconds", etc as accessibility id
+              dataTestId={parentDataTestId}
+              radioInputDataTestId={`input-${parentDataTestId}`}
             />
           );
         })}
diff --git a/ts/react.d.ts b/ts/react.d.ts
index b94435bf3..d61bbf7fb 100644
--- a/ts/react.d.ts
+++ b/ts/react.d.ts
@@ -6,6 +6,26 @@ import 'react';
  */
 
 declare module 'react' {
+  // disappear options
+  type DisappearOptionDataTestId =
+    | 'disappear-after-send-option'
+    | 'disappear-after-read-option'
+    | 'disappear-legacy-option'
+    | 'disappear-off-option';
+  type DisappearTimeOptionDataTestId =
+    | 'time-option-0-seconds'
+    | 'time-option-5-seconds'
+    | 'time-option-10-seconds'
+    | 'time-option-30-seconds'
+    | 'time-option-60-seconds'
+    | 'time-option-300-seconds'
+    | 'time-option-1800-seconds'
+    | 'time-option-3600-seconds'
+    | 'time-option-21600-seconds'
+    | 'time-option-43200-seconds'
+    | 'time-option-86400-seconds'
+    | 'time-option-604800-seconds'
+    | 'time-option-1209600-seconds';
   type SessionDataTestId =
     | 'group-member-status-text'
     | 'loading-spinner'
@@ -82,19 +102,10 @@ declare module 'react' {
     | 'accept-menu-item'
 
     // timer options
-    | 'time-option-0-seconds'
-    | 'time-option-5-seconds'
-    | 'time-option-10-seconds'
-    | 'time-option-30-seconds'
-    | 'time-option-60-seconds'
-    | 'time-option-300-seconds'
-    | 'time-option-1800-seconds'
-    | 'time-option-3600-seconds'
-    | 'time-option-21600-seconds'
-    | 'time-option-43200-seconds'
-    | 'time-option-86400-seconds'
-    | 'time-option-604800-seconds'
-    | 'time-option-1209600-seconds'
+    | DisappearTimeOptionDataTestId
+    | DisappearOptionDataTestId
+    | `input-${DisappearTimeOptionDataTestId}`
+    | `input-${DisappearOptionDataTestId}`
 
     // generic readably message (not control message)
     | 'message-content'
@@ -117,12 +128,6 @@ declare module 'react' {
     | 'call-notification-started-call'
     | 'call-notification-answered-a-call'
 
-    // disappear options
-    | 'disappear-after-send-option'
-    | 'disappear-after-read-option'
-    | 'disappear-legacy-option'
-    | 'disappear-off-option'
-
     // settings toggle and buttons
     | 'remove-password-settings-button'
     | 'change-password-settings-button'