fix(help): updates success help

resources/version.txt

@@ -1 +1 @@
-7.16.8
+7.16.9

src/client/AppRoutes.tsx

@@ -27,6 +27,7 @@ export enum RoutePaths {
  preview = '/preview',
  settings = '/settings',
  success = '/settings/success',
+ successAdd = '/settings/success/add',
  tracking = '/settings/tracking',
  trackingAdd = '/settings/tracking/add',
  trackingDetails = '/settings/tracking/:id/details',

src/client/help/HelpContent.tsx

@@ -6,7 +6,7 @@ import {
  CCTrayLocationsHelp,
 } from '../settings/tracking/AddFeedHelp'
 import { UpdateDetailsHelp } from '../settings/tracking/settings/UpdateDetailsHelp'
-import { SuccessHelp } from '../settings/success/SuccessHelp'
+import { SuccessMessagesPageHelp } from '../settings/success/SuccessMessagesPageHelp'
 import { AvailableProjectsHelp } from '../settings/tracking/projects/AvailableProjectsHelp'
 import { BackupHelp } from '../settings/backup/BackupHelp'
 import { DisplaySettingsHelp } from '../settings/display/DisplaySettingsHelp'
@@ -32,6 +32,7 @@ import { AddNotificationHelp } from '../settings/notifications/AddNotificationHe
 import { OtherSettingsPageHelp } from '../settings/other/OtherSettingsPageHelp'
 import { ChangeColoursPageHelp } from '../settings/colours/ChangeColoursPageHelp'
 import styles from './help-content.scss'
+import { AddMessagePageHelp } from '../settings/success/AddMessagePageHelp'
 
 interface HelpContentProps {
  readonly initialSearchQuery?: string
@@ -63,7 +64,11 @@ export default function HelpContent({
  <AvailableProjectsHelp searchQuery={searchQuery} helpLink={helpLink} />
  <UpdateDetailsHelp searchQuery={searchQuery} helpLink={helpLink} />
  <UpdateConnectionHelp searchQuery={searchQuery} helpLink={helpLink} />
- <SuccessHelp searchQuery={searchQuery} helpLink={helpLink} />
+ <SuccessMessagesPageHelp
+ searchQuery={searchQuery}
+ helpLink={helpLink}
+ />
+ <AddMessagePageHelp searchQuery={searchQuery} helpLink={helpLink} />
  <DisplaySettingsHelp searchQuery={searchQuery} helpLink={helpLink} />
  <ChangeColoursPageHelp searchQuery={searchQuery} helpLink={helpLink} />
  <NotificationSettingsHelp

src/client/settings/success/AddMessagePageHelp.tsx

@@ -0,0 +1,37 @@
+import type { ReactElement } from 'react'
+import { ExternalLink } from '../../common/ExternalLink'
+import { HelpArticle, HelpProps } from '../../help/HelpArticle'
+import { RoutePaths } from '../../AppRoutes'
+import { HelpForm, HelpInput } from '../../help/HelpForms'
+
+const keywords = [
+ 'success',
+ 'messages',
+ 'images',
+ 'add',
+ 'url',
+ 'jpeg',
+ 'gif',
+ 'png',
+]
+
+export function AddMessagePageHelp({ searchQuery }: HelpProps): ReactElement {
+ return (
+ <HelpArticle
+ keywords={keywords}
+ searchQuery={searchQuery}
+ title="Add success message"
+ page={RoutePaths.successAdd}
+ >
+ <HelpForm>
+ <HelpInput name="Message">
+ You can add text messages or any{' '}
+ <ExternalLink href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Supported_image_formats">
+ valid image URLs
+ </ExternalLink>
+ .
+ </HelpInput>
+ </HelpForm>
+ </HelpArticle>
+ )
+}

src/client/settings/success/SuccessHelp.tsx → src/client/settings/success/SuccessMessagesPageHelp.tsx

@@ -1,11 +1,11 @@
 import type { ReactElement } from 'react'
-import { ExternalLink } from '../../common/ExternalLink'
 import { HelpArticle, HelpProps } from '../../help/HelpArticle'
 import { RoutePaths } from '../../AppRoutes'
 import { HelpForm, HelpInput } from '../../help/HelpForms'
 import { Plus } from '../../common/icons/Plus'
 import { PaintFormat } from '../../common/icons/PaintFormat'
 import { Bin } from '../../common/icons/Bin'
+import { InfoMessages } from '../../common/Messages'
 
 const keywords = [
  'success',
@@ -19,9 +19,8 @@ const keywords = [
  'colour',
 ]
 
-export function SuccessHelp({
+export function SuccessMessagesPageHelp({
  searchQuery,
- helpLink,
 }: HelpProps): ReactElement {
  return (
  <HelpArticle
@@ -31,25 +30,23 @@ export function SuccessHelp({
  page={RoutePaths.success}
  >
  <HelpForm>
- <HelpInput name="Add message" icon={<Plus />}>
- You can add text messages or any{' '}
- <ExternalLink href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Supported_image_formats">
- valid image URLs
- </ExternalLink>
- , one of these will get randomly displayed when no interesting
- projects are displayed on the Monitor page {helpLink('monitor')}. If
- no success messages are added then a blank screen will be shown.
- </HelpInput>
  <HelpInput name="Change colours" icon={<PaintFormat />}>
  Allows changing of the background and text colour.
  </HelpInput>
+ <HelpInput name="Add message" icon={<Plus />}>
+ Adds a new success message.
+ </HelpInput>
  </HelpForm>
+ <InfoMessages
+ messages={[
+ 'A random success message will be displayed on the Monitor page when there are no interesting projects. If no success messages are added then a blank screen will be shown.',
+ ]}
+ />
  <p>Added messages will appear and can be managed from this page.</p>
  <HelpForm>
  <HelpInput name="Remove" icon={<Bin />}>
  This will permanently delete the message. Messages can be re-added at
- any time and you can also make a backup before removing{' '}
- {helpLink('backup')}.
+ any time.
  </HelpInput>
  </HelpForm>
  </HelpArticle>