refactor(frontend): title for common modal via titleI18nKey or title prop

This is mainly needed because we use the common modal to show image light boxes and the title is then the title or alt text of the image Signed-off-by: Philip Molares <philip.molares@udo.edu>
2025-04-04 23:26:52 +00:00 · 2023-02-19 20:29:05 +01:00 · 2023-02-19 20:29:05 +01:00 · 7fb02c96e6
commit 7fb02c96e6
parent f24c46101b
22 changed files with 73 additions and 58 deletions
--- a/frontend/src/components/common/modals/snapshots/common-modal.test.tsx.snap
+++ b/frontend/src/components/common/modals/snapshots/common-modal.test.tsx.snap
@ -15,7 +15,9 @@ exports[`CommonModal render correctly in size lg 1`] = `
    >
      <div
        class="modal-title h4"
-      />
+      >
+        <span />
+      </div>
    </div>
    testText
  </div>
@ -35,7 +37,9 @@ exports[`CommonModal render correctly in size sm 1`] = `
    >
      <div
        class="modal-title h4"
-      />
+      >
+        <span />
+      </div>
    </div>
    testText
  </div>
@ -55,7 +59,9 @@ exports[`CommonModal render correctly in size xl 1`] = `
    >
      <div
        class="modal-title h4"
-      />
+      >
+        <span />
+      </div>
    </div>
    testText
  </div>
@ -75,7 +81,9 @@ exports[`CommonModal render correctly with additionalClasses 1`] = `
    >
      <div
        class="modal-title h4"
-      />
+      >
+        <span />
+      </div>
    </div>
    testText
  </div>
@ -144,6 +152,7 @@ exports[`CommonModal render correctly with title icon 1`] = `
          class="fa  fa-heart  "
        />
         
+        <span />
      </div>
    </div>
    testText
@ -164,7 +173,9 @@ exports[`CommonModal renders correctly and calls onHide, when close button is cl
    >
      <div
        class="modal-title h4"
-      />
+      >
+        <span />
+      </div>
      <button
        aria-label="Close"
        class="btn-close"
--- a/frontend/src/components/common/modals/snapshots/deletion-moadal.test.tsx.snap
+++ b/frontend/src/components/common/modals/snapshots/deletion-moadal.test.tsx.snap
@ -13,7 +13,9 @@ exports[`DeletionModal renders correctly with deletionButtonI18nKey 1`] = `
    >
      <div
        class="modal-title h4"
-      />
+      >
+        <span />
+      </div>
      <button
        aria-label="Close"
        class="btn-close"
--- a/frontend/src/components/common/modals/common-modal.test.tsx
+++ b/frontend/src/components/common/modals/common-modal.test.tsx
@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
 *
 * SPDX-License-Identifier: AGPL-3.0-only
 */
@ -45,7 +45,7 @@ describe('CommonModal', () => {

  it('render correctly with title', async () => {
    render(
-      <CommonModal show={true} title={'testTitle'}>
+      <CommonModal show={true} titleI18nKey={'testTitle'}>
        testText
      </CommonModal>
    )
@ -55,7 +55,7 @@ describe('CommonModal', () => {

  it('render correctly with i18nTitle', async () => {
    render(
-      <CommonModal show={true} title={'testTitle'} titleIsI18nKey={true}>
+      <CommonModal show={true} titleI18nKey={'testTitle'}>
        testText
      </CommonModal>
    )
--- a/frontend/src/components/common/modals/common-modal.tsx
+++ b/frontend/src/components/common/modals/common-modal.tsx
@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
 *
 * SPDX-License-Identifier: AGPL-3.0-only
 */
@ -20,8 +20,8 @@ export interface ModalVisibilityProps {
 }

 export interface ModalContentProps {
+  titleI18nKey?: string
  title?: string
-  titleIsI18nKey?: boolean
  showCloseButton?: boolean
  titleIcon?: IconName
  modalSize?: 'lg' | 'sm' | 'xl'
@ -47,20 +47,20 @@ export type CommonModalProps = PropsWithDataCypressId & ModalVisibilityProps & M
 export const CommonModal: React.FC<PropsWithChildren<CommonModalProps>> = ({
  show,
  onHide,
+  titleI18nKey,
  title,
  showCloseButton,
  titleIcon,
  additionalClasses,
  modalSize,
  children,
-  titleIsI18nKey = true,
  ...props
 }) => {
  useTranslation()

  const titleElement = useMemo(() => {
-    return titleIsI18nKey ? <Trans i18nKey={title} /> : <span>{title}</span>
-  }, [title, titleIsI18nKey])
+    return titleI18nKey !== undefined ? <Trans i18nKey={titleI18nKey} /> : <span>{title}</span>
+  }, [titleI18nKey, title])

  return (
    <ShowIf condition={show}>
--- a/frontend/src/components/common/modals/deletion-modal.tsx
+++ b/frontend/src/components/common/modals/deletion-modal.tsx
@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
 *
 * SPDX-License-Identifier: AGPL-3.0-only
 */
@ -32,7 +32,7 @@ export interface DeletionModalProps extends CommonModalProps {
 export const DeletionModal: React.FC<PropsWithChildren<DeletionModalProps>> = ({
  show,
  onHide,
-  title,
+  titleI18nKey,
  onConfirm,
  deletionButtonI18nKey,
  titleIcon,
@ -42,7 +42,13 @@ export const DeletionModal: React.FC<PropsWithChildren<DeletionModalProps>> = ({
  useTranslation()

  return (
-    <CommonModal show={show} onHide={onHide} title={title} titleIcon={titleIcon} showCloseButton={true} {...props}>
+    <CommonModal
+      show={show}
+      onHide={onHide}
+      titleI18nKey={titleI18nKey}
+      titleIcon={titleIcon}
+      showCloseButton={true}
+      {...props}>
      <Modal.Body className='text-dark'>{children}</Modal.Body>
      <Modal.Footer>
        <Button {...cypressId('deletionModal.confirmButton')} variant='danger' onClick={onConfirm}>
--- a/frontend/src/components/common/motd-modal/motd-modal.tsx
+++ b/frontend/src/components/common/motd-modal/motd-modal.tsx
@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
 *
 * SPDX-License-Identifier: AGPL-3.0-only
 */
@ -49,7 +49,10 @@ export const MotdModal: React.FC = () => {
  }

  return (
-    <CommonModal show={!!lines && !loading && !error && !dismissed} title={'motd.title'} {...cypressId('motd-modal')}>
+    <CommonModal
+      show={!!lines && !loading && !error && !dismissed}
+      titleI18nKey={'motd.title'}
+      {...cypressId('motd-modal')}>
      <Modal.Body className={'bg-light'}>
        <EditorToRendererCommunicatorContextProvider>
          <RenderIframe
--- a/frontend/src/components/editor-page/app-bar/help-button/help-modal.tsx
+++ b/frontend/src/components/editor-page/app-bar/help-button/help-modal.tsx
@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
 *
 * SPDX-License-Identifier: AGPL-3.0-only
 */
@ -47,13 +47,7 @@ export const HelpModal: React.FC<ModalVisibilityProps> = ({ show, onHide }) => {
  const modalTitle = useMemo(() => t('editor.documentBar.help') + ' - ' + t(`editor.help.${tab}`), [t, tab])

  return (
-    <CommonModal
-      modalSize={'lg'}
-      titleIcon={'question-circle'}
-      show={show}
-      onHide={onHide}
-      title={modalTitle}
-      titleIsI18nKey={false}>
+    <CommonModal modalSize={'lg'} titleIcon={'question-circle'} show={show} onHide={onHide} title={modalTitle}>
      <Modal.Body>
        <nav className='nav nav-tabs'>
          <Button
--- a/frontend/src/components/editor-page/document-bar/aliases/aliases-modal.tsx
+++ b/frontend/src/components/editor-page/document-bar/aliases/aliases-modal.tsx
@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
 *
 * SPDX-License-Identifier: AGPL-3.0-only
 */
@ -21,7 +21,7 @@ export const AliasesModal: React.FC<CommonModalProps> = ({ show, onHide }) => {
  useTranslation()

  return (
-    <CommonModal show={show} onHide={onHide} title={'editor.modal.aliases.title'} showCloseButton={true}>
+    <CommonModal show={show} onHide={onHide} titleI18nKey={'editor.modal.aliases.title'} showCloseButton={true}>
      <Modal.Body>
        <p>
          <Trans i18nKey={'editor.modal.aliases.explanation'} />
--- a/frontend/src/components/editor-page/document-bar/note-info/note-info-modal.tsx
+++ b/frontend/src/components/editor-page/document-bar/note-info/note-info-modal.tsx
@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
 *
 * SPDX-License-Identifier: AGPL-3.0-only
 */
@ -28,7 +28,7 @@ export const NoteInfoModal: React.FC<ModalVisibilityProps> = ({ show, onHide })
      show={show}
      onHide={onHide}
      showCloseButton={true}
-      title={'editor.modal.documentInfo.title'}
+      titleI18nKey={'editor.modal.documentInfo.title'}
      {...cypressId('document-info-modal')}>
      <Modal.Body>
        <ListGroup>
--- a/frontend/src/components/editor-page/document-bar/permissions/permission-modal.tsx
+++ b/frontend/src/components/editor-page/document-bar/permissions/permission-modal.tsx
@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
 *
 * SPDX-License-Identifier: AGPL-3.0-only
 */
@ -19,7 +19,7 @@ import { Modal } from 'react-bootstrap'
 */
 export const PermissionModal: React.FC<ModalVisibilityProps> = ({ show, onHide }) => {
  return (
-    <CommonModal show={show} onHide={onHide} showCloseButton={true} title={'editor.modal.permissions.title'}>
+    <CommonModal show={show} onHide={onHide} showCloseButton={true} titleI18nKey={'editor.modal.permissions.title'}>
      <Modal.Body>
        <PermissionSectionOwner />
        <PermissionSectionUsers />
--- a/frontend/src/components/editor-page/document-bar/revisions/revision-modal.tsx
+++ b/frontend/src/components/editor-page/document-bar/revisions/revision-modal.tsx
@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
 *
 * SPDX-License-Identifier: AGPL-3.0-only
 */
@ -27,7 +27,7 @@ export const RevisionModal: React.FC<ModalVisibilityProps> = ({ show, onHide })
    <CommonModal
      show={show}
      onHide={onHide}
-      title={'editor.modal.revision.title'}
+      titleI18nKey={'editor.modal.revision.title'}
      titleIcon={'history'}
      showCloseButton={true}
      modalSize={'xl'}
--- a/frontend/src/components/editor-page/document-bar/share/share-modal.tsx
+++ b/frontend/src/components/editor-page/document-bar/share/share-modal.tsx
@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
 *
 * SPDX-License-Identifier: AGPL-3.0-only
 */
@ -27,7 +27,7 @@ export const ShareModal: React.FC<ModalVisibilityProps> = ({ show, onHide }) =>
  const noteIdentifier = useApplicationState((state) => state.noteDetails.primaryAddress)

  return (
-    <CommonModal show={show} onHide={onHide} showCloseButton={true} title={'editor.modal.shareLink.title'}>
+    <CommonModal show={show} onHide={onHide} showCloseButton={true} titleI18nKey={'editor.modal.shareLink.title'}>
      <Modal.Body>
        <Trans i18nKey={'editor.modal.shareLink.editorDescription'} />
        <CopyableField content={`${baseUrl}n/${noteIdentifier}`} shareOriginUrl={`${baseUrl}n/${noteIdentifier}`} />
--- a/frontend/src/components/editor-page/editor-pane/max-length-warning/max-length-warning-modal.tsx
+++ b/frontend/src/components/editor-page/editor-pane/max-length-warning/max-length-warning-modal.tsx
@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
 *
 * SPDX-License-Identifier: AGPL-3.0-only
 */
@ -26,7 +26,7 @@ export const MaxLengthWarningModal: React.FC<ModalVisibilityProps> = ({ show, on
      {...cypressId('limitReachedModal')}
      show={show}
      onHide={onHide}
-      title={'editor.error.limitReached.title'}
+      titleI18nKey={'editor.error.limitReached.title'}
      showCloseButton={true}>
      <Modal.Body>
        <Trans i18nKey={'editor.error.limitReached.description'} values={{ maxDocumentLength }} />
--- a/frontend/src/components/editor-page/editor-pane/tool-bar/table-picker/custom-table-size-modal.tsx
+++ b/frontend/src/components/editor-page/editor-pane/tool-bar/table-picker/custom-table-size-modal.tsx
@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
 *
 * SPDX-License-Identifier: AGPL-3.0-only
 */
@ -65,7 +65,7 @@ export const CustomTableSizeModal: React.FC<CustomTableSizeModalProps> = ({ show
    <CommonModal
      show={showModal}
      onHide={onDismiss}
-      title={'editor.editorToolbar.table.customSize'}
+      titleI18nKey={'editor.editorToolbar.table.customSize'}
      showCloseButton={true}
      titleIcon={'table'}
      {...cypressId('custom-table-size-modal')}>
--- a/frontend/src/components/editor-page/sidebar/delete-note-sidebar-entry/delete-note-modal.tsx
+++ b/frontend/src/components/editor-page/sidebar/delete-note-sidebar-entry/delete-note-modal.tsx
@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
 *
 * SPDX-License-Identifier: AGPL-3.0-only
 */
@ -53,7 +53,7 @@ export const DeleteNoteModal: React.FC<DeleteNoteModalProps & DeleteHistoryNoteM
      deletionButtonI18nKey={modalButtonI18nKey ?? 'editor.modal.deleteNote.button'}
      show={show}
      onHide={onHide}
-      title={modalTitleI18nKey ?? 'editor.modal.deleteNote.title'}>
+      titleI18nKey={modalTitleI18nKey ?? 'editor.modal.deleteNote.title'}>
      <h5>
        <Trans i18nKey={modalQuestionI18nKey ?? 'editor.modal.deleteNote.question'} />
      </h5>
--- a/frontend/src/components/history-page/history-toolbar/clear-history-button.tsx
+++ b/frontend/src/components/history-page/history-toolbar/clear-history-button.tsx
@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
 *
 * SPDX-License-Identifier: AGPL-3.0-only
 */
@ -46,7 +46,7 @@ export const ClearHistoryButton: React.FC = () => {
        deletionButtonI18nKey={'landing.history.toolbar.clear'}
        show={modalVisibility}
        onHide={closeModal}
-        title={'landing.history.modal.clearHistory.title'}>
+        titleI18nKey={'landing.history.modal.clearHistory.title'}>
        <h5>
          <Trans i18nKey={'landing.history.modal.clearHistory.question'} />
        </h5>
--- a/frontend/src/components/landing-layout/footer/version-info/version-info-modal.tsx
+++ b/frontend/src/components/landing-layout/footer/version-info/version-info-modal.tsx
@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
 *
 * SPDX-License-Identifier: AGPL-3.0-only
 */
@ -41,7 +41,7 @@ export const VersionInfoModal: React.FC<CommonModalProps> = ({ onHide, show }) =
      show={show}
      onHide={onHide}
      showCloseButton={true}
-      title={'landing.versionInfo.title'}>
+      titleI18nKey={'landing.versionInfo.title'}>
      <Modal.Body>
        <Row>
          <VersionInfoModalColumn
--- a/frontend/src/components/layout/settings-dialog/settings-modal.tsx
+++ b/frontend/src/components/layout/settings-dialog/settings-modal.tsx
@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
 *
 * SPDX-License-Identifier: AGPL-3.0-only
 */
@ -24,7 +24,7 @@ export const SettingsModal: React.FC<CommonModalProps> = ({ show, onHide }) => {
      modalSize={'lg'}
      onHide={onHide}
      titleIcon={'cog'}
-      title={'settings.title'}
+      titleI18nKey={'settings.title'}
      showCloseButton={true}>
      <Modal.Body>
        <Tabs navbar={false} variant={'pills'} defaultActiveKey={'global'}>
--- a/frontend/src/components/markdown-renderer/extensions/image/image-lightbox-modal.tsx
+++ b/frontend/src/components/markdown-renderer/extensions/image/image-lightbox-modal.tsx
@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
 *
 * SPDX-License-Identifier: AGPL-3.0-only
 */
@ -32,8 +32,7 @@ export const ImageLightboxModal: React.FC<ImageLightboxModalProps> = ({ show, on
      onHide={onHide}
      showCloseButton={true}
      additionalClasses={styles.lightbox}
-      title={alt ?? title ?? ''}
-      titleIsI18nKey={false}>
+      title={title ?? alt ?? ''}>
      <ProxyImageFrame alt={alt} src={src} title={title} className={'w-100 cursor-zoom-out'} onClick={onHide} />
    </CommonModal>
  )
--- a/frontend/src/components/profile-page/access-tokens/access-token-created-modal.tsx
+++ b/frontend/src/components/profile-page/access-tokens/access-token-created-modal.tsx
@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
 *
 * SPDX-License-Identifier: AGPL-3.0-only
 */
@ -32,7 +32,7 @@ export const AccessTokenCreatedModal: React.FC<AccessTokenCreatedModalProps> = (
    <CommonModal
      show={show}
      onHide={onHide}
-      title='profile.modal.addedAccessToken.title'
+      titleI18nKey='profile.modal.addedAccessToken.title'
      {...cypressId('access-token-modal-add')}>
      <Modal.Body>
        <Trans
--- a/frontend/src/components/profile-page/access-tokens/access-token-deletion-modal.tsx
+++ b/frontend/src/components/profile-page/access-tokens/access-token-deletion-modal.tsx
@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
 *
 * SPDX-License-Identifier: AGPL-3.0-only
 */
@ -49,7 +49,7 @@ export const AccessTokenDeletionModal: React.FC<AccessTokenDeletionModalProps> =
    <CommonModal
      show={show}
      onHide={onHide}
-      title={'profile.modal.deleteAccessToken.title'}
+      titleI18nKey={'profile.modal.deleteAccessToken.title'}
      {...cypressId('access-token-modal-delete')}>
      <Modal.Body>
        <Trans i18nKey='profile.modal.deleteAccessToken.message' values={{ label: token.label }} />
--- a/frontend/src/components/profile-page/account-management/account-deletion-modal.tsx
+++ b/frontend/src/components/profile-page/account-management/account-deletion-modal.tsx
@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
 *
 * SPDX-License-Identifier: AGPL-3.0-only
 */
@ -42,7 +42,7 @@ export const AccountDeletionModal: React.FC<ModalVisibilityProps> = ({ show, onH
  }, [dispatchUiNotification, onHide, showErrorNotification])

  return (
-    <CommonModal show={show} title={'profile.modal.deleteUser.message'} onHide={onHide} showCloseButton={true}>
+    <CommonModal show={show} titleI18nKey={'profile.modal.deleteUser.message'} onHide={onHide} showCloseButton={true}>
      <Modal.Body>
        <Trans i18nKey='profile.modal.deleteUser.subMessage' />
      </Modal.Body>