github/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2024-11-21 09:16:30 -05:00
Code Issues Projects Releases Packages Wiki Activity

feat(motd): read motd in RSC and provide via context

Browse source 
Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>
This commit is contained in:
Tilman Vatteroth 2023-10-13 21:22:21 +02:00 committed by Erik Michelson
parent 83c7f81a76
commit a0bc8e98d0
11 changed files with 190 additions and 125 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
frontend/cypress/e2e/motd.spec.ts
View file

@ -5,29 +5,18 @@
*/
const MOTD_LOCAL_STORAGE_KEY = 'motd.lastModified'
const MOCK_LAST_MODIFIED = 'mockETag'
const motdMockContent = 'This is the **mock** Motd call'
const motdMockHtml = 'This is the <strong>mock</strong> Motd call'
const motdMockHtml = 'This is the test motd text'
describe('Motd', () => {
it("shows, dismisses and won't show again a motd modal", () => {
localStorage.removeItem(MOTD_LOCAL_STORAGE_KEY)
cy.intercept('GET', '/public/motd.md', {
statusCode: 200,
headers: { 'Last-Modified': MOCK_LAST_MODIFIED },
body: motdMockContent
})
cy.intercept('HEAD', '/public/motd.md', {
statusCode: 200,
headers: { 'Last-Modified': MOCK_LAST_MODIFIED }
})
cy.visitHistory()
cy.getSimpleRendererBody().should('contain.html', motdMockHtml)
cy.getSimpleRendererBody().should('contain.text', motdMockHtml)
cy.getByCypressId('motd-dismiss')
.click()
.then(() => {
expect(localStorage.getItem(MOTD_LOCAL_STORAGE_KEY)).to.equal(MOCK_LAST_MODIFIED)
expect(localStorage.getItem(MOTD_LOCAL_STORAGE_KEY)).not.to.be.eq(null)
})
cy.getByCypressId('motd-modal').should('not.exist')
cy.reload()

5
frontend/locales/en.json
View file

@ -506,7 +506,8 @@
},
"instance": {
"header": "About this instance",
"versionInfo": "Running version"
"versionInfo": "Running version",
"motdModal": "Show instance announcement"
},
"legal": {
"header": "Legal",
@ -596,7 +597,7 @@
}
},
"motd": {
"title": "Information"
"title": "Announcement"
},
"errors": {
"notFound": {

35
frontend/src/app/(editor)/layout.tsx
View file

@ -7,7 +7,6 @@ import '../../../global-styles/index.scss'
import { ApplicationLoader } from '../../components/application-loader/application-loader'
import { BaseUrlContextProvider } from '../../components/common/base-url/base-url-context-provider'
import { FrontendConfigContextProvider } from '../../components/common/frontend-config-context/frontend-config-context-provider'
import { MotdModal } from '../../components/global-dialogs/motd-modal/motd-modal'
import { DarkMode } from '../../components/layout/dark-mode/dark-mode'
import { ExpectedOriginBoundary } from '../../components/layout/expected-origin-boundary'
import { UiNotificationBoundary } from '../../components/notifications/ui-notification-boundary'
@ -18,6 +17,9 @@ import type { Metadata } from 'next'
import type { PropsWithChildren } from 'react'
import React from 'react'
import { getConfig } from '../../api/config'
import { MotdProvider } from '../../components/motd/motd-context'
import { fetchMotd } from '../../components/global-dialogs/motd-modal/fetch-motd'
import { CachedMotdModal } from '../../components/global-dialogs/motd-modal/cached-motd-modal'
configureLuxon()
@ -28,6 +30,7 @@ interface RootLayoutProps extends PropsWithChildren {
export default async function RootLayout({ children, appBar }: RootLayoutProps) {
const baseUrls = baseUrlFromEnvExtractor.extractBaseUrls()
const frontendConfig = await getConfig(baseUrls.editor)
const motd = await fetchMotd(baseUrls.internalApiUrl ?? baseUrls.editor)
return (
<html lang='en'>
@ -37,20 +40,22 @@ export default async function RootLayout({ children, appBar }: RootLayoutProps)
<body>
<ExpectedOriginBoundary expectedOrigin={baseUrls.editor}>
<BaseUrlContextProvider baseUrls={baseUrls}>
<FrontendConfigContextProvider config={frontendConfig}>
<StoreProvider>
<ApplicationLoader>
<DarkMode />
<MotdModal />
<UiNotificationBoundary>
<div className={'d-flex flex-column vh-100'}>
{appBar}
{children}
</div>
</UiNotificationBoundary>
</ApplicationLoader>
</StoreProvider>
</FrontendConfigContextProvider>
<MotdProvider motd={motd}>
<FrontendConfigContextProvider config={frontendConfig}>
<StoreProvider>
<ApplicationLoader>
<DarkMode />
<CachedMotdModal />
<UiNotificationBoundary>
<div className={'d-flex flex-column vh-100'}>
{appBar}
{children}
</div>
</UiNotificationBoundary>
</ApplicationLoader>
</StoreProvider>
</FrontendConfigContextProvider>
</MotdProvider>
</BaseUrlContextProvider>
</ExpectedOriginBoundary>
</body>

44
frontend/src/components/global-dialogs/motd-modal/cached-motd-modal.tsx Normal file
View file

@ -0,0 +1,44 @@
'use client'
/*
* SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import React, { useCallback, useMemo, useState } from 'react'
import { useMotdContextValue } from '../../motd/motd-context'
import { useLocalStorage } from 'react-use'
import { MOTD_LOCAL_STORAGE_KEY } from './fetch-motd'
import { MotdModal } from './motd-modal'
import { testId } from '../../../utils/test-id'
/**
* Reads the motd from the context 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 CachedMotdModal: React.FC = () => {
const contextValue = useMotdContextValue()
const [cachedLastModified, saveLocalStorage] = useLocalStorage<string>(MOTD_LOCAL_STORAGE_KEY, undefined)
const [dismissed, setDismissed] = useState(false)
const show = useMemo(() => {
const lastModified = contextValue?.lastModified
return cachedLastModified !== lastModified && lastModified !== undefined && !dismissed
}, [cachedLastModified, contextValue?.lastModified, dismissed])
const doDismiss = useCallback(() => {
const lastModified = contextValue?.lastModified
if (lastModified) {
saveLocalStorage(lastModified)
}
setDismissed(true)
}, [contextValue, saveLocalStorage])
if (contextValue?.lastModified === undefined && process.env.NODE_ENV === 'test') {
return <span {...testId('loaded not visible')} />
}
return <MotdModal show={show} onDismiss={doDismiss}></MotdModal>
}

33
frontend/src/components/global-dialogs/motd-modal/fetch-motd.spec.ts
View file

@ -7,7 +7,8 @@ import { fetchMotd } from './fetch-motd'
import { Mock } from 'ts-mockery'
describe('fetch motd', () => {
const motdUrl = '/public/motd.md'
const baseUrl = 'https://example.org/'
const motdUrl = `${baseUrl}public/motd.md`
beforeEach(() => {
window.localStorage.clear()
@ -47,7 +48,7 @@ describe('fetch motd', () => {
jest.spyOn(global, 'fetch').mockImplementation(() =>
Promise.resolve(
Mock.of<Response>({
status: 500
status: 404
})
)
)
@ -56,7 +57,7 @@ describe('fetch motd', () => {
describe('date detection', () => {
it('will return the last-modified value if available', async () => {
mockFetch('mocked motd', 'yesterday-modified', null)
const result = fetchMotd()
const result = fetchMotd(baseUrl)
await expect(result).resolves.toStrictEqual({
motdText: 'mocked motd',
lastModified: 'yesterday-modified'
@ -64,7 +65,7 @@ describe('fetch motd', () => {
})
it('will return the etag if last-modified is not returned', async () => {
mockFetch('mocked motd', null, 'yesterday-etag')
const result = fetchMotd()
const result = fetchMotd(baseUrl)
await expect(result).resolves.toStrictEqual({
motdText: 'mocked motd',
lastModified: 'yesterday-etag'
@ -72,7 +73,7 @@ describe('fetch motd', () => {
})
it('will prefer the last-modified header over the etag', async () => {
mockFetch('mocked motd', 'yesterday-last', 'yesterday-etag')
const result = fetchMotd()
const result = fetchMotd(baseUrl)
await expect(result).resolves.toStrictEqual({
motdText: 'mocked motd',
lastModified: 'yesterday-last'
@ -80,34 +81,24 @@ describe('fetch motd', () => {
})
it('will return an empty value if neither the last-modified value nor the etag is returned', async () => {
mockFetch('mocked motd', null, null)
const result = fetchMotd()
await expect(result).resolves.toStrictEqual({
motdText: 'mocked motd',
lastModified: null
})
const result = fetchMotd(baseUrl)
await expect(result).resolves.toBe(undefined)
})
})
it('can fetch a motd if no last modified value has been memorized', async () => {
mockFetch('mocked motd', 'yesterday')
const result = fetchMotd()
const result = fetchMotd(baseUrl)
await expect(result).resolves.toStrictEqual({
motdText: 'mocked motd',
lastModified: 'yesterday'
})
})
it("can detect that the motd hasn't been updated", async () => {
mockFetch('mocked motd', 'yesterday')
window.localStorage.setItem('motd.lastModified', 'yesterday')
const result = fetchMotd()
await expect(result).resolves.toStrictEqual(undefined)
})
it('can detect that the motd has been updated', async () => {
mockFetch('mocked motd', 'yesterday')
window.localStorage.setItem('motd.lastModified', 'the day before yesterday')
const result = fetchMotd()
const result = fetchMotd(baseUrl)
await expect(result).resolves.toStrictEqual({
motdText: 'mocked motd',
lastModified: 'yesterday'
@ -116,14 +107,14 @@ describe('fetch motd', () => {
it("won't fetch a motd if no file was found", async () => {
mockFileNotFoundFetch()
const result = fetchMotd()
const result = fetchMotd(baseUrl)
await expect(result).resolves.toStrictEqual(undefined)
})
it("won't fetch a motd update if no file was found", async () => {
mockFileNotFoundFetch()
window.localStorage.setItem('motd.lastModified', 'the day before yesterday')
const result = fetchMotd()
const result = fetchMotd(baseUrl)
await expect(result).resolves.toStrictEqual(undefined)
})
})

35
frontend/src/components/global-dialogs/motd-modal/fetch-motd.ts
View file

@ -4,14 +4,12 @@
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { defaultConfig } from '../../../api/common/default-config'
import { Logger } from '../../../utils/logger'
export const MOTD_LOCAL_STORAGE_KEY = 'motd.lastModified'
const log = new Logger('Motd')
export interface MotdApiResponse {
motdText: string
lastModified: string | null
lastModified: string
}
/**
@ -21,36 +19,23 @@ export interface MotdApiResponse {
* will be compared to the saved value from the browser's local storage.
* @return A promise that gets resolved if the motd was fetched successfully.
*/
export const fetchMotd = async (): Promise<MotdApiResponse | undefined> => {
const cachedLastModified = window.localStorage.getItem(MOTD_LOCAL_STORAGE_KEY)
const motdUrl = `/public/motd.md`
if (cachedLastModified) {
const response = await fetch(motdUrl, {
...defaultConfig,
method: 'HEAD'
})
if (response.status !== 200) {
return undefined
}
const lastModified = response.headers.get('Last-Modified') || response.headers.get('etag')
if (lastModified === cachedLastModified) {
return undefined
}
}
export const fetchMotd = async (baseUrl: string): Promise<MotdApiResponse | undefined> => {
const motdUrl = `${baseUrl}public/motd.md`
const response = await fetch(motdUrl, {
...defaultConfig
})
if (response.status !== 200) {
return undefined
return
}
const lastModified = response.headers.get('Last-Modified') || response.headers.get('etag')
if (!lastModified) {
log.warn("'Last-Modified' or 'Etag' not found for motd.md!")
if (lastModified === null) {
return
}
return { motdText: await response.text(), lastModified }
return {
lastModified,
motdText: await response.text()
}
}

30
frontend/src/components/global-dialogs/motd-modal/motd-modal.spec.tsx
View file

@ -9,13 +9,12 @@ import { testId } from '../../../utils/test-id'
import type { CommonModalProps } from '../../common/modals/common-modal'
import * as CommonModalModule from '../../common/modals/common-modal'
import * as RendererIframeModule from '../../common/renderer-iframe/renderer-iframe'
import * as fetchMotdModule from './fetch-motd'
import { MotdModal } from './motd-modal'
import { act, render, screen } from '@testing-library/react'
import type { PropsWithChildren } from 'react'
import React from 'react'
import { CachedMotdModal } from './cached-motd-modal'
import { MotdProvider } from '../../motd/motd-context'
jest.mock('./fetch-motd')
jest.mock('../../common/modals/common-modal')
jest.mock('../../common/renderer-iframe/renderer-iframe')
jest.mock('../../../hooks/common/use-base-url')
@ -49,13 +48,15 @@ describe('motd modal', () => {
})
it('renders a modal if a motd was fetched and can dismiss it', async () => {
jest.spyOn(fetchMotdModule, 'fetchMotd').mockImplementation(() => {
return Promise.resolve({
motdText: 'very important mock text!',
lastModified: 'yesterday'
})
})
const view = render(<MotdModal></MotdModal>)
const motd = {
motdText: 'very important mock text!',
lastModified: 'yesterday'
}
const view = render(
<MotdProvider motd={motd}>
<CachedMotdModal></CachedMotdModal>
</MotdProvider>
)
await screen.findByTestId('motd-renderer')
expect(view.container).toMatchSnapshot()
@ -67,10 +68,11 @@ describe('motd modal', () => {
})
it("doesn't render a modal if no motd has been fetched", async () => {
jest.spyOn(fetchMotdModule, 'fetchMotd').mockImplementation(() => {
return Promise.resolve(undefined)
})
const view = render(<MotdModal></MotdModal>)
const view = render(
<MotdProvider motd={undefined}>
<CachedMotdModal></CachedMotdModal>
</MotdProvider>
)
await screen.findByTestId('loaded not visible')
expect(view.container).toMatchSnapshot()
})

54
frontend/src/components/global-dialogs/motd-modal/motd-modal.tsx
View file

@ -5,55 +5,41 @@
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { cypressId } from '../../../utils/cypress-attribute'
import { Logger } from '../../../utils/logger'
import { testId } from '../../../utils/test-id'
import { CommonModal } from '../../common/modals/common-modal'
import { RendererIframe } from '../../common/renderer-iframe/renderer-iframe'
import { EditorToRendererCommunicatorContextProvider } from '../../editor-page/render-context/editor-to-renderer-communicator-context-provider'
import { RendererType } from '../../render-page/window-post-message-communicator/rendering-message'
import { fetchMotd, MOTD_LOCAL_STORAGE_KEY } from './fetch-motd'
import React, { useCallback, useEffect, useMemo, useState } from 'react'
import React, { useMemo } from 'react'
import { Button, Modal } from 'react-bootstrap'
import { Trans, useTranslation } from 'react-i18next'
import { useAsync } from 'react-use'
import { useMotdContextValue } from '../../motd/motd-context'
const logger = new Logger('Motd')
export interface MotdModalProps {
show: boolean
onDismiss?: () => void
}
/**
* 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.
* Shows the MotD that is provided via context.
*
* @param show defines if the modal should be shown
* @param onDismiss callback that is executed if the modal is dismissed
*/
export const MotdModal: React.FC = () => {
export const MotdModal: React.FC<MotdModalProps> = ({ show, onDismiss }) => {
useTranslation()
const contextValue = useMotdContextValue()
const { error, loading, value } = useAsync(fetchMotd)
const [dismissed, setDismissed] = useState(false)
const lines = useMemo(() => value?.motdText.split('\n') ?? [], [value?.motdText])
const dismiss = useCallback(() => {
if (value?.lastModified) {
window.localStorage.setItem(MOTD_LOCAL_STORAGE_KEY, value.lastModified)
const lines = useMemo(() => {
const rawLines = contextValue?.motdText.split('\n')
if (rawLines === undefined || rawLines.length === 0 || !show) {
return []
}
setDismissed(true)
}, [value])
useEffect(() => {
if (error) {
logger.error('Error while fetching motd', error)
}
}, [error])
if (process.env.NODE_ENV === 'test' && !loading && !value) {
return <span {...testId('loaded not visible')}></span>
}
return rawLines
}, [contextValue?.motdText, show])
return (
<CommonModal
show={lines.length > 0 && !loading && !error && !dismissed}
titleI18nKey={'motd.title'}
{...cypressId('motd-modal')}>
<CommonModal show={lines.length > 0} titleI18nKey={'motd.title'} onHide={onDismiss} {...cypressId('motd-modal')}>
<Modal.Body>
<EditorToRendererCommunicatorContextProvider>
<RendererIframe
@ -66,7 +52,7 @@ export const MotdModal: React.FC = () => {
</EditorToRendererCommunicatorContextProvider>
</Modal.Body>
<Modal.Footer>
<Button variant={'success'} onClick={dismiss} {...testId('motd-dismiss')} {...cypressId('motd-dismiss')}>
<Button variant={'success'} onClick={onDismiss} {...testId('motd-dismiss')} {...cypressId('motd-dismiss')}>
<Trans i18nKey={'common.dismiss'} />
</Button>
</Modal.Footer>

2
frontend/src/components/layout/app-bar/app-bar-elements/help-dropdown/submenues/instance-submenu.tsx
View file

@ -6,6 +6,7 @@
import { DropdownHeader } from '../dropdown-header'
import { VersionInfoHelpMenuEntry } from './instance/version-info-help-menu-entry'
import React, { Fragment } from 'react'
import { MotdModalHelpMenuEntry } from './instance/motd-modal-help-menu-entry'
/**
* Renders the instance submenu for the help dropdown.
@ -15,6 +16,7 @@ export const InstanceSubmenu: React.FC = () => {
<Fragment>
<DropdownHeader i18nKey={'appbar.help.instance.header'} />
<VersionInfoHelpMenuEntry />
<MotdModalHelpMenuEntry />
</Fragment>
)
}

35
frontend/src/components/layout/app-bar/app-bar-elements/help-dropdown/submenues/instance/motd-modal-help-menu-entry.tsx Normal file
View file

@ -0,0 +1,35 @@
/*
* SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import React, { Fragment } from 'react'
import { TranslatedDropdownItem } from '../../translated-dropdown-item'
import { InfoCircleFill as IconInfoCircleFill } from 'react-bootstrap-icons'
import { useBooleanState } from '../../../../../../../hooks/common/use-boolean-state'
import { MotdModal } from '../../../../../../global-dialogs/motd-modal/motd-modal'
import { useMotdContextValue } from '../../../../../../motd/motd-context'
/**
* Help menu entry for the motd modal.
* When no modal content is defined, the menu entry will not render.
*/
export const MotdModalHelpMenuEntry: React.FC = () => {
const [modalVisibility, showModal, closeModal] = useBooleanState(false)
const contextValue = useMotdContextValue()
if (!contextValue) {
return null
}
return (
<Fragment>
<TranslatedDropdownItem
icon={IconInfoCircleFill}
i18nKey={'appbar.help.instance.motdModal'}
onClick={showModal}
/>
<MotdModal show={modalVisibility} onDismiss={closeModal} />
</Fragment>
)
}

25
frontend/src/components/motd/motd-context.tsx Normal file
View file

@ -0,0 +1,25 @@
'use client'
/*
* SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import type { PropsWithChildren } from 'react'
import { createContext, useContext } from 'react'
import React from 'react'
import type { MotdApiResponse } from '../global-dialogs/motd-modal/fetch-motd'
const motdContext = createContext<MotdApiResponse | undefined>(undefined)
export const useMotdContextValue = () => {
return useContext(motdContext)
}
interface MotdProviderProps extends PropsWithChildren {
motd: MotdApiResponse | undefined
}
export const MotdProvider: React.FC<MotdProviderProps> = ({ children, motd }) => {
return <motdContext.Provider value={motd}>{children}</motdContext.Provider>
}