Deduplicate CommonModal Props (#1649)

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>

src/components/common/modals/common-modal.tsx

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import React from 'react'
+import React, { useMemo } from 'react'
 import { Modal } from 'react-bootstrap'
 import { Trans, useTranslation } from 'react-i18next'
 import { ForkAwesomeIcon } from '../fork-awesome/fork-awesome-icon'
@@ -13,31 +13,40 @@ import { ShowIf } from '../show-if/show-if'
 import type { PropsWithDataCypressId } from '../../../utils/cypress-attribute'
 import { cypressId } from '../../../utils/cypress-attribute'
 
-export interface CommonModalProps extends PropsWithDataCypressId {
+export interface ModalVisibilityProps {
   show: boolean
   onHide?: () => void
-  titleI18nKey?: string
+}
+
+export interface ModalContentProps {
   title?: string
-  closeButton?: boolean
-  icon?: IconName
-  size?: 'lg' | 'sm' | 'xl'
+  titleIsI18nKey?: boolean
+  showCloseButton?: boolean
+  titleIcon?: IconName
+  modalSize?: 'lg' | 'sm' | 'xl'
   additionalClasses?: string
 }
 
+export type CommonModalProps = PropsWithDataCypressId & ModalVisibilityProps & ModalContentProps
+
 export const CommonModal: React.FC<CommonModalProps> = ({
   show,
   onHide,
-  titleI18nKey,
   title,
-  closeButton,
-  icon,
+  showCloseButton,
+  titleIcon,
   additionalClasses,
-  size,
+  modalSize,
   children,
+  titleIsI18nKey = true,
   ...props
 }) => {
   useTranslation()
 
+  const titleElement = useMemo(() => {
+    return titleIsI18nKey ? <Trans i18nKey={title} /> : <span>{title}</span>
+  }, [title, titleIsI18nKey])
+
   return (
     <Modal
       {...cypressId(props)}
@@ -45,14 +54,14 @@ export const CommonModal: React.FC<CommonModalProps> = ({
       onHide={onHide}
       animation={true}
       dialogClassName={`text-dark ${additionalClasses ?? ''}`}
-      size={size}>
-      <Modal.Header closeButton={!!closeButton}>
+      size={modalSize}>
+      <Modal.Header closeButton={!!showCloseButton}>
         <Modal.Title>
-          <ShowIf condition={!!icon}>
-            <ForkAwesomeIcon icon={icon as IconName} />
+          <ShowIf condition={!!titleIcon}>
+            <ForkAwesomeIcon icon={titleIcon as IconName} />
             &nbsp;
           </ShowIf>
-          {titleI18nKey ? <Trans i18nKey={titleI18nKey} /> : <span>{title}</span>}
+          {titleElement}
         </Modal.Title>
       </Modal.Header>
       {children}

src/components/common/modals/deletion-modal.tsx

@@ -18,17 +18,17 @@ export interface DeletionModalProps extends CommonModalProps {
 export const DeletionModal: React.FC<DeletionModalProps> = ({
   show,
   onHide,
-  titleI18nKey,
+  title,
   onConfirm,
   deletionButtonI18nKey,
-  icon,
+  titleIcon,
   children,
   ...props
 }) => {
   useTranslation()
 
   return (
-    <CommonModal show={show} onHide={onHide} titleI18nKey={titleI18nKey} icon={icon} closeButton={true} {...props}>
+    <CommonModal show={show} onHide={onHide} title={title} titleIcon={titleIcon} showCloseButton={true} {...props}>
       <Modal.Body className='text-dark'>{children}</Modal.Body>
       <Modal.Footer>
         <Button variant='danger' onClick={onConfirm}>

src/components/common/motd-modal/motd-modal.tsx

@@ -48,7 +48,7 @@ export const MotdModal: React.FC = () => {
     return null
   } else {
     return (
-      <CommonModal {...cypressId('motd')} show={!!motdState} titleI18nKey={'motd.title'}>
+      <CommonModal {...cypressId('motd')} show={!!motdState} title={'motd.title'}>
         <Modal.Body>{domContent}</Modal.Body>
         <Modal.Footer>
           <Button variant={'success'} onClick={dismiss} {...cypressId('motd-dismiss')}>