Pass translated values instead of strings to ContinueCancelModal (#4412)

apps/account-ui/public/locales/en/translation.json

@@ -84,6 +84,7 @@
   "signOut": "Sign out",
   "signOutAllDevices": "Sign out all devices",
   "signOutAllDevicesWarning": "This action will sign out all the devices that have signed in to your account, including the current device you are using.",
+  "signOutWarning": "Sign out the session?",
   "somethingWentWrong": "Something went wrong",
   "somethingWentWrongDescription": "Sorry, an unexpected error has occurred.",
   "started": "Started",

apps/account-ui/src/account-security/DeviceActivity.tsx

@@ -128,9 +128,9 @@ const DeviceActivity = () => {
 
           {(devices.length > 1 || devices[0].sessions.length > 1) && (
             <ContinueCancelModal
-              buttonTitle="signOutAllDevices"
+              buttonTitle={t("signOutAllDevices")}
-              modalTitle="signOutAllDevices"
+              modalTitle={t("signOutAllDevices")}
-              modalMessage="signOutAllDevicesWarning"
+              modalMessage={t("signOutAllDevicesWarning")}
               onContinue={() => signOutAll()}
             />
           )}
@@ -173,10 +173,10 @@ const DeviceActivity = () => {
                     >
                       {!session.current && (
                         <ContinueCancelModal
-                          buttonTitle="doSignOut"
+                          buttonTitle={t("doSignOut")}
-                          modalTitle="doSignOut"
+                          modalTitle={t("doSignOut")}
                           buttonVariant="secondary"
-                          modalMessage="signOutWarning"
+                          modalMessage={t("signOutWarning")}
                           onContinue={() => signOutSession(session, device)}
                         />
                       )}

libs/ui-shared/src/continue-cancel/ContinueCancelModal.tsx

@@ -1,5 +1,4 @@
 import { ReactNode, useState } from "react";
-import { useTranslation } from "react-i18next";
 import { Button, ButtonProps, Modal, ModalProps } from "@patternfly/react-core";
 
 export type ContinueCancelModalProps = Omit<ModalProps, "ref" | "children"> & {
@@ -24,11 +23,10 @@ export const ContinueCancelModal = ({
   onContinue,
   continueLabel = "continue",
   cancelLabel = "doCancel",
-  component = "button",
+  component = Button,
   children,
   ...rest
 }: ContinueCancelModalProps) => {
-  const { t } = useTranslation();
   const [open, setOpen] = useState(false);
   const Component = component;
 
@@ -39,16 +37,12 @@ export const ContinueCancelModal = ({
         onClick={() => setOpen(true)}
         isDisabled={isDisabled}
       >
-        {
+        {buttonTitle}
-          //@ts-ignore
-          typeof buttonTitle === "string" ? t(buttonTitle) : buttonTitle
-        }
       </Component>
       <Modal
         variant="small"
         {...rest}
-        //@ts-ignore
+        title={modalTitle}
-        title={t(modalTitle)}
         isOpen={open}
         onClose={() => setOpen(false)}
         actions={[
@@ -61,10 +55,7 @@ export const ContinueCancelModal = ({
               onContinue();
             }}
           >
-            {
+            {continueLabel}
-              //@ts-ignore
-              t(continueLabel)
-            }
           </Button>,
           <Button
             id="modal-cancel"
@@ -72,17 +63,11 @@ export const ContinueCancelModal = ({
             variant="secondary"
             onClick={() => setOpen(false)}
           >
-            {
+            {cancelLabel}
-              //@ts-ignore
-              t(cancelLabel)
-            }
           </Button>,
         ]}
       >
-        {
+        {modalMessage ? modalMessage : children}
-          //@ts-ignore
-          modalMessage ? t(modalMessage) : children
-        }
       </Modal>
     </>
   );