Fetch banner.txt from public URL instead of config (#1216)

src/components/application-loader/initializers/fetch-and-set-banner.ts

@@ -0,0 +1,52 @@
+/*
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { setBanner } from '../../../redux/banner/methods'
+import { defaultFetchConfig } from '../../../api/utils'
+
+export const BANNER_LOCAL_STORAGE_KEY = 'banner.lastModified'
+
+export const fetchAndSetBanner = async (customizeAssetsUrl: string): Promise<void> => {
+  const cachedLastModified = window.localStorage.getItem(BANNER_LOCAL_STORAGE_KEY)
+  const bannerUrl = `${ customizeAssetsUrl }/banner.txt`
+
+  if (cachedLastModified) {
+    const response = await fetch(bannerUrl, {
+      ...defaultFetchConfig,
+      method: 'HEAD'
+    })
+    if (response.status !== 200) {
+      return
+    }
+    if (response.headers.get('Last-Modified') === cachedLastModified) {
+      setBanner({
+        lastModified: cachedLastModified,
+        text: ''
+      })
+      return
+    }
+  }
+
+  const response = await fetch(bannerUrl, {
+    ...defaultFetchConfig
+  })
+
+  if (response.status !== 200) {
+    return
+  }
+
+  const bannerText = await response.text()
+
+  const lastModified = response.headers.get('Last-Modified')
+  if (!lastModified) {
+    console.warn("'Last-Modified' not found for banner.txt!")
+  }
+
+  setBanner({
+    lastModified: lastModified,
+    text: bannerText
+  })
+}

src/components/application-loader/initializers/fetch-frontend-config.ts

@@ -5,7 +5,6 @@
  */
 
 import { getConfig } from '../../../api/config'
-import { setBanner } from '../../../redux/banner/methods'
 import { setConfig } from '../../../redux/config/methods'
 
 export const fetchFrontendConfig = async (): Promise<void> => {
@@ -14,13 +13,4 @@ export const fetchFrontendConfig = async (): Promise<void> => {
     return Promise.reject(new Error('Config empty!'))
   }
   setConfig(config)
-
-  const banner = config.banner
-  if (banner.text !== '') {
-    const lastAcknowledgedTimestamp = window.localStorage.getItem('bannerTimeStamp') || ''
-    setBanner({
-      ...banner,
-      show: banner.text !== '' && banner.timestamp !== lastAcknowledgedTimestamp
-    })
-  }
 }

src/components/application-loader/initializers/index.ts

@@ -6,6 +6,7 @@
 
 import { setUpI18n } from './i18n'
 import { refreshHistoryState } from '../../../redux/history/methods'
+import { fetchAndSetBanner } from './fetch-and-set-banner'
 import { setApiUrl } from '../../../redux/api-url/methods'
 import { fetchAndSetUser } from '../../login-page/auth/utils'
 import { fetchFrontendConfig } from './fetch-frontend-config'
@@ -37,6 +38,9 @@ export const createSetUpTaskList = (frontendAssetsUrl: string, customizeAssetsUr
   }, {
     name: 'Fetch user information',
     task: fetchAndSetUser()
+  }, {
+    name: 'Banner',
+    task: fetchAndSetBanner(customizeAssetsUrl)
   }, {
     name: 'Load history state',
     task: refreshHistoryState()

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

@@ -1,41 +1,53 @@
 /*
- SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
-
- SPDX-License-Identifier: AGPL-3.0-only
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
  */
 
 import equal from 'fast-deep-equal'
-import React from 'react'
+import React, { useCallback } from 'react'
 import { Alert, Button } from 'react-bootstrap'
 import { useSelector } from 'react-redux'
-import { Link } from 'react-router-dom'
 import { ApplicationState } from '../../../redux'
 import { setBanner } from '../../../redux/banner/methods'
 import { ForkAwesomeIcon } from '../fork-awesome/fork-awesome-icon'
-import { ShowIf } from '../show-if/show-if'
+import { BANNER_LOCAL_STORAGE_KEY } from '../../application-loader/initializers/fetch-and-set-banner'
 
 export const MotdBanner: React.FC = () => {
   const bannerState = useSelector((state: ApplicationState) => state.banner, equal)
 
-  const dismissBanner = () => {
-    setBanner({ ...bannerState, show: false })
-    window.localStorage.setItem('bannerTimeStamp', bannerState.timestamp)
+  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 (
-    <ShowIf condition={ bannerState.show }>
-      <Alert variant='primary' dir='auto' className='mb-0 text-center d-flex flex-row justify-content-center'>
-        <Link to='/s/banner' className='flex-grow-1 align-self-center text-black'>
-          { bannerState.text }
-        </Link>
-        <Button
-          variant='outline-primary'
-          size='sm'
-          className='mx-2'
-          onClick={ dismissBanner }>
-          <ForkAwesomeIcon icon='times'/>
-        </Button>
-      </Alert>
-    </ShowIf>
+    <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>
   )
 }