Add persistent BANNER notice type for maintenance and outage info

frontend/src/buttons/RefreshButton/RefreshButton.tsx

@@ -36,6 +36,7 @@ export const RefreshButton: React.FC<ButtonProps> = props => {
   const adminUsersPage = useRouteMatch('/admin/users')
   const adminPartnersPage = useRouteMatch('/admin/partners')
   const adminEnterpriseLicensesPage = useRouteMatch('/admin/enterprise-licenses')
+  const adminNoticesPage = useRouteMatch('/admin/notices')
   const scriptingPage = useRouteMatch(['/script', '/scripts', '/runs'])
   const runsPage = useRouteMatch<{ fileID?: string }>('/runs/:fileID?')
   const scriptPage = useRouteMatch('/script')
@@ -127,6 +128,11 @@ export const RefreshButton: React.FC<ButtonProps> = props => {
   } else if (adminEnterpriseLicensesPage) {
     title = 'Refresh enterprise customers'
     methods.push(async () => await dispatch.adminEnterpriseLicenses.fetch())
+
+    // admin notices pages
+  } else if (adminNoticesPage) {
+    title = 'Refresh notices'
+    methods.push(async () => await dispatch.adminNotices.fetch())
   }
 
   const refresh = async () => {

frontend/src/components/AdminSidebarNav.tsx

@@ -87,6 +87,17 @@ export const AdminSidebarNav: React.FC = () => {
         </ListItemIcon>
         <ListItemText primary="Enterprise" />
       </ListItemButton>
+
+      <ListItemButton
+        dense
+        selected={currentPath.includes('/admin/notices')}
+        onClick={() => handleNavClick('/admin/notices')}
+      >
+        <ListItemIcon>
+          <Icon name="bullhorn" size="md" />
+        </ListItemIcon>
+        <ListItemText primary="Notices" />
+      </ListItemButton>
     </List>
   )
 }

frontend/src/components/AnnouncementBanner.tsx

@@ -0,0 +1,53 @@
+import React from 'react'
+import { useSelector } from 'react-redux'
+import { Box, Button } from '@mui/material'
+import { State } from '../store'
+import { selectBannerAnnouncements } from '../selectors/announcements'
+import { Notice } from './Notice'
+import { bannerSeverity } from '../helpers/noticeHelper'
+
+export const AnnouncementBanner: React.FC = () => {
+  const banners = useSelector((state: State) => selectBannerAnnouncements(state))
+
+  // Re-check `until` on every render rather than in the memoized selector. The server already
+  // filters expired notices, but `announcements` is persisted, so an offline or failed fetch
+  // would otherwise leave an expired banner pinned with no way to dismiss it.
+  const now = new Date()
+  const active = banners.filter(banner => !banner.until || banner.until > now)
+
+  if (!active.length) return null
+
+  return (
+    <Box sx={{ width: '100%' }}>
+      {active.map(banner => (
+        <Notice
+          key={banner.id}
+          severity={bannerSeverity(banner.type)}
+          fullWidth
+          solid
+          // Square corners so it reads as a bar rather than a card — the app panel in
+          // RemoteHeader is `overflow: hidden` and rounded, so it clips the top corners for us.
+          sx={{ borderRadius: 0 }}
+          button={
+            banner.link ? (
+              // The theme's Button default resolves `inherit` to grayDark, which is unreadable on
+              // the solid severity background — pin it to the same white the banner text uses.
+              <Button href={banner.link} size="small" target="_blank" sx={{ color: 'alwaysWhite.main' }}>
+                Learn more
+              </Button>
+            ) : undefined
+          }
+        >
+          {/*
+            Bind the two lines structurally rather than relying on the notice author to hand-write
+            `<strong>`/`<em>`. `title` is NOT NULL so a banner always has a heading, and `body`
+            supplies the smaller line. Notice styles `strong` as the title and `em` as a smaller
+            block subtitle.
+          */}
+          <strong>{banner.title}</strong>
+          {banner.body && <em dangerouslySetInnerHTML={{ __html: String(banner.body) }} />}
+        </Notice>
+      ))}
+    </Box>
+  )
+}

frontend/src/components/App.tsx

@@ -31,6 +31,7 @@ import { Page } from '../pages/Page'
 import { Logo } from '@common/brand/Logo'
 import { ViewAsBanner } from './ViewAsBanner'
 import { AnnouncementDialog } from './AnnouncementDialog'
+import { AnnouncementBanner } from './AnnouncementBanner'
 
 export const App: React.FC = () => {
   const { insets } = useSafeArea()
@@ -110,6 +111,7 @@ export const App: React.FC = () => {
   return (
     <Page>
       <ViewAsBanner />
+      <AnnouncementBanner />
       <PersistGate persistor={persistor} loading={<LoadingMessage message="Restoring state..." />}>
         <Box
           sx={{

frontend/src/helpers/noticeHelper.ts

@@ -0,0 +1,19 @@
+import { NoticeProps } from '../components/Notice'
+
+// Banner severity is encoded in the notice type rather than a separate column. Keep every
+// banner-vs-card test going through `isBannerType` — a missed check silently leaks a banner into
+// the announcements list, the unread badge and the full-screen dialog.
+export const BANNER_TYPES: INoticeType[] = ['BANNER', 'BANNER_WARN', 'BANNER_DANGER']
+
+export const isBannerType = (type?: INoticeType) => !!type && BANNER_TYPES.includes(type)
+
+export const bannerSeverity = (type?: INoticeType): NoticeProps['severity'] => {
+  switch (type) {
+    case 'BANNER_DANGER':
+      return 'error'
+    case 'BANNER_WARN':
+      return 'warning'
+    default:
+      return 'info'
+  }
+}

frontend/src/models/adminNotices.ts

@@ -0,0 +1,89 @@
+import { createModel } from '@rematch/core'
+import { graphQLAllNotices } from '../services/graphQLRequest'
+import { graphQLCreateNotice, graphQLDeleteNotice, graphQLUpdateNotice } from '../services/graphQLMutation'
+import type { RootModel } from '.'
+
+type AdminNoticesState = {
+  notices: IAdminNotice[]
+  loading: boolean
+  saving: boolean
+  initialized: boolean
+}
+
+const defaultState: AdminNoticesState = {
+  notices: [],
+  loading: false,
+  saving: false,
+  initialized: false,
+}
+
+export default createModel<RootModel>()({
+  state: defaultState,
+  effects: dispatch => ({
+    async fetch() {
+      dispatch.adminNotices.set({ loading: true })
+      const response = await graphQLAllNotices()
+      if (response === 'ERROR') {
+        dispatch.adminNotices.set({ loading: false })
+        return
+      }
+      const notices = parse(response?.data?.data?.allNotices)
+      dispatch.adminNotices.set({ notices, loading: false, initialized: true })
+    },
+
+    async create(notice: INoticeInput) {
+      dispatch.adminNotices.set({ saving: true })
+      const response = await graphQLCreateNotice(notice)
+      dispatch.adminNotices.set({ saving: false })
+      if (response === 'ERROR') return false
+      await dispatch.adminNotices.fetch()
+      return true
+    },
+
+    async update(params: { id: string; notice: INoticeInput }) {
+      dispatch.adminNotices.set({ saving: true })
+      const response = await graphQLUpdateNotice(params.id, params.notice)
+      dispatch.adminNotices.set({ saving: false })
+      if (response === 'ERROR') return false
+      await dispatch.adminNotices.fetch()
+      return true
+    },
+
+    async remove(id: string) {
+      dispatch.adminNotices.set({ saving: true })
+      const response = await graphQLDeleteNotice(id)
+      dispatch.adminNotices.set({ saving: false })
+      if (response === 'ERROR') return false
+      await dispatch.adminNotices.fetch()
+      return true
+    },
+  }),
+  reducers: {
+    reset() {
+      return { ...defaultState }
+    },
+    set(state, params: Partial<AdminNoticesState>) {
+      Object.keys(params).forEach(key => (state[key] = params[key]))
+      return state
+    },
+  },
+})
+
+function parse(all?: any[]): IAdminNotice[] {
+  if (!all) return []
+  return all.map(n => ({
+    id: n.id,
+    type: n.type,
+    title: n.title,
+    body: n.body || '',
+    preview: n.preview || undefined,
+    image: n.image || undefined,
+    link: n.link || undefined,
+    stage: n.stage || undefined,
+    language: n.language || undefined,
+    enabled: !!n.enabled,
+    from: n.from ? new Date(n.from) : undefined,
+    until: n.until ? new Date(n.until) : undefined,
+    modified: n.modified ? new Date(n.modified) : undefined,
+  }))
+}

frontend/src/models/announcements.ts

@@ -27,6 +27,7 @@ export default createModel<RootModel>()({
               link
               type
               modified
+              until
               read
             }
           }`
@@ -51,6 +52,7 @@ export default createModel<RootModel>()({
         link: n.link,
         type: n.type,
         modified: new Date(n.modified),
+        until: n.until ? new Date(n.until) : undefined,
         read: n.read ? new Date(n.read) : undefined,
       }))
     },

frontend/src/models/auth.ts

@@ -277,6 +277,7 @@ export default createModel<RootModel>()({
       dispatch.adminUsers.reset()
       dispatch.adminPartners.reset()
       dispatch.adminEnterpriseLicenses.reset()
+      dispatch.adminNotices.reset()
 
       cloudSync.reset()
       dispatch.accounts.set({ activeId: undefined })

frontend/src/models/index.ts

@@ -4,6 +4,7 @@ import agents from './agents'
 import { adminPartners } from './adminPartners'
 import { adminUsers } from './adminUsers'
 import { adminEnterpriseLicenses } from './adminEnterpriseLicenses'
+import adminNotices from './adminNotices'
 import announcements from './announcements'
 import applicationTypes from './applicationTypes'
 import auth from './auth'
@@ -39,6 +40,7 @@ export interface RootModel extends Models<RootModel> {
   adminPartners: typeof adminPartners
   adminUsers: typeof adminUsers
   adminEnterpriseLicenses: typeof adminEnterpriseLicenses
+  adminNotices: typeof adminNotices
   announcements: typeof announcements
   applicationTypes: typeof applicationTypes
   auth: typeof auth
@@ -75,6 +77,7 @@ export const models: RootModel = {
   adminPartners,
   adminUsers,
   adminEnterpriseLicenses,
+  adminNotices,
   announcements,
   applicationTypes,
   auth,

frontend/src/pages/AdminNoticesPage/AdminNoticeDetailPanel.tsx

@@ -0,0 +1,118 @@
+import React, { useEffect } from 'react'
+import { useHistory, useParams } from 'react-router-dom'
+import { useDispatch, useSelector } from 'react-redux'
+import { Box, Typography } from '@mui/material'
+import { Dispatch, State } from '../../store'
+import { Container } from '../../components/Container'
+import { Confirm } from '../../components/Confirm'
+import { Title } from '../../components/Title'
+import { IconButton } from '../../buttons/IconButton'
+import { Gutters } from '../../components/Gutters'
+import { LoadingMessage } from '../../components/LoadingMessage'
+import { Notice } from '../../components/Notice'
+import { spacing } from '../../styling'
+import { AdminNoticeForm } from './AdminNoticeForm'
+
+const LIST_ROUTE = '/admin/notices'
+
+type Props = {
+  // Only shown when the list panel is hidden — otherwise the list is already on screen and the
+  // global header back button covers going up.
+  showBackArrow?: boolean
+}
+
+export const AdminNoticeDetailPanel: React.FC<Props> = ({ showBackArrow }) => {
+  const { noticeId } = useParams<{ noticeId?: string }>()
+  const history = useHistory()
+  const dispatch = useDispatch<Dispatch>()
+  const notices = useSelector((state: State) => state.adminNotices.notices)
+  const saving = useSelector((state: State) => state.adminNotices.saving)
+  const initialized = useSelector((state: State) => state.adminNotices.initialized)
+  const [removeOpen, setRemoveOpen] = React.useState(false)
+
+  const isNew = noticeId === 'new'
+  const notice = isNew ? undefined : notices.find(n => n.id === noticeId)
+
+  // Deep linking straight to an edit URL has no list to read from yet.
+  useEffect(() => {
+    if (!initialized) dispatch.adminNotices.fetch()
+  }, [initialized])
+
+  const handleBack = () => history.push(LIST_ROUTE)
+
+  const handleSave = async (input: INoticeInput) => {
+    const saved = isNew
+      ? await dispatch.adminNotices.create(input)
+      : await dispatch.adminNotices.update({ id: noticeId as string, notice: input })
+    if (saved) handleBack()
+  }
+
+  const handleRemove = async () => {
+    setRemoveOpen(false)
+    if (notice && (await dispatch.adminNotices.remove(notice.id))) handleBack()
+  }
+
+  const header = (
+    <Box>
+      {showBackArrow && (
+        <Box
+          sx={{
+            height: 45,
+            display: 'flex',
+            alignItems: 'center',
+            paddingX: `${spacing.md}px`,
+            marginTop: `${spacing.sm}px`,
+          }}
+        >
+          <IconButton icon="chevron-left" title="Back to Notices" onClick={handleBack} size="md" color="grayDarker" />
+        </Box>
+      )}
+      <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', paddingRight: 2 }}>
+        <Typography variant="h2" sx={{ padding: 2 }}>
+          <Title>{isNew ? 'New notice' : 'Edit notice'}</Title>
+        </Typography>
+        {!isNew && notice && (
+          <IconButton icon="trash" title="Delete notice" onClick={() => setRemoveOpen(true)} size="md" />
+        )}
+      </Box>
+    </Box>
+  )
+
+  if (!isNew && !notice)
+    return initialized ? (
+      <Container gutterBottom header={header}>
+        <Gutters>
+          <Notice severity="error" fullWidth>
+            Notice not found
+            <em>It may have been deleted by someone else.</em>
+          </Notice>
+        </Gutters>
+      </Container>
+    ) : (
+      <LoadingMessage message="Loading notice..." />
+    )
+
+  return (
+    <Container gutterBottom bodyProps={{ verticalOverflow: true }} header={header}>
+      <AdminNoticeForm
+        key={notice?.id || 'new'}
+        notice={notice}
+        saving={saving}
+        onCancel={handleBack}
+        onSave={handleSave}
+      />
+      <Confirm
+        open={removeOpen}
+        title="Delete notice?"
+        onConfirm={handleRemove}
+        onDeny={() => setRemoveOpen(false)}
+        action="Delete"
+        color="error"
+      >
+        <Typography variant="body2">
+          "{notice?.title}" will be permanently deleted. This cannot be undone.
+        </Typography>
+      </Confirm>
+    </Container>
+  )
+}