Change motd banner to motd modal

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

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

@@ -13,7 +13,7 @@ import { ShowIf } from '../show-if/show-if'
 
 export interface CommonModalProps {
   show: boolean
-  onHide: () => void
+  onHide?: () => void
   titleI18nKey?: string
   title?: string
   closeButton?: boolean

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

@@ -1,47 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
- *
- * SPDX-License-Identifier: AGPL-3.0-only
- */
-
-import React, { useCallback } from 'react'
-import { Alert, Button } from 'react-bootstrap'
-import { setBanner } from '../../../redux/banner/methods'
-import { ForkAwesomeIcon } from '../fork-awesome/fork-awesome-icon'
-import { BANNER_LOCAL_STORAGE_KEY } from '../../application-loader/initializers/fetch-and-set-banner'
-import { useApplicationState } from '../../../hooks/common/use-application-state'
-
-export const MotdBanner: React.FC = () => {
-  const bannerState = useApplicationState((state) => state.banner)
-
-  const dismissBanner = useCallback(() => {
-    if (bannerState.lastModified) {
-      window.localStorage.setItem(BANNER_LOCAL_STORAGE_KEY, bannerState.lastModified)
-    }
-    setBanner({
-      text: '',
-      lastModified: null
-    })
-  }, [bannerState])
-
-  if (bannerState.text === undefined) {
-    return null
-  }
-
-  if (!bannerState.text) {
-    return <span data-cy={'no-motd-banner'} />
-  }
-
-  return (
-    <Alert
-      data-cy={'motd-banner'}
-      variant='primary'
-      dir='auto'
-      className='mb-0 text-center d-flex flex-row justify-content-center'>
-      <span className='flex-grow-1 align-self-center text-black'>{bannerState.text}</span>
-      <Button data-cy={'motd-dismiss'} variant='outline-primary' size='sm' className='mx-2' onClick={dismissBanner}>
-        <ForkAwesomeIcon icon='times' />
-      </Button>
-    </Alert>
-  )
-}

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

@@ -0,0 +1,60 @@
+/*
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import React, { Fragment, useCallback, useMemo } from 'react'
+import { Button, Modal } from 'react-bootstrap'
+import { CommonModal } from '../modals/common-modal'
+import { Trans, useTranslation } from 'react-i18next'
+import { useApplicationState } from '../../../hooks/common/use-application-state'
+import { dismissMotd } from '../../../redux/motd/methods'
+
+/**
+ * Reads the motd from the global application state and shows it in a modal.
+ * If the modal gets dismissed by the user then the "last modified" identifier will be written into the local storage
+ * to prevent that the motd will be shown again until it gets changed.
+ */
+export const MotdModal: React.FC = () => {
+  useTranslation()
+  const motdState = useApplicationState((state) => state.motd)
+
+  const domContent = useMemo(() => {
+    if (!motdState) {
+      return null
+    }
+    return motdState.text
+      ?.split('\n')
+      .map((line) => <span>{line}</span>)
+      .reduce((previousLine, currentLine, currentLineIndex) => (
+        <Fragment key={currentLineIndex}>
+          {previousLine}
+          <br />
+          {currentLine}
+        </Fragment>
+      ))
+  }, [motdState])
+
+  const dismiss = useCallback(() => {
+    if (!motdState) {
+      return
+    }
+    dismissMotd()
+  }, [motdState])
+
+  if (motdState === null || motdState.dismissed) {
+    return null
+  } else {
+    return (
+      <CommonModal data-cy={'motd'} show={!!motdState} titleI18nKey={'motd.title'}>
+        <Modal.Body>{domContent}</Modal.Body>
+        <Modal.Footer>
+          <Button variant={'success'} onClick={dismiss} data-cy={'motd-dismiss'}>
+            <Trans i18nKey={'common.dismiss'} />
+          </Button>
+        </Modal.Footer>
+      </CommonModal>
+    )
+  }
+}