Add display image for no global announcements

Test plan: -have no announcements -validate image of a desert is shown in both active and past sections fixes KNO-515 flag=past_announcements Change-Id: I5af4fb6140560ebfb6c4f83947d1361b4441c126 Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/238321 Tested-by: Service Cloud Jenkins <[email protected]> QA-Review: Rob Orton <[email protected]> Product-Review: Rob Orton <[email protected]> Reviewed-by: Rob Orton <[email protected]>
ralacas · May 28, 2020 · 542a788 · 542a788
1 parent f05b2cb
commit 542a788
Show file tree

Hide file tree

Showing 3 changed files with 121 additions and 2 deletions.
diff --git a/app/jsx/past_global_announcements/PastGlobalAnnouncements.js b/app/jsx/past_global_announcements/PastGlobalAnnouncements.js
@@ -18,20 +18,63 @@
 
 import React from 'react'
 import {Heading} from '@instructure/ui-heading/lib/Heading'
+import {Text} from '@instructure/ui-text/lib/Text'
 import I18n from 'i18n!past_global_announcements'
+import NoResultsDesert from './SVG/NoResultsDesert.svg'
 
 const PastGlobalAnnouncements = () => {
+  let activeAnnouncements = (
+    <div dangerouslySetInnerHTML={{__html: ENV.global_notifications.active}} />
+  )
+
+  let pastAnnouncements = <div dangerouslySetInnerHTML={{__html: ENV.global_notifications.past}} />
+
+  const styles = {
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center'
+  }
+
+  if (ENV.global_notifications.active === ' ') {
+    activeAnnouncements = (
+      <div style={styles}>
+        <img
+          data-testid="NoGlobalAnnouncementImageActive"
+          alt=""
+          src={NoResultsDesert}
+          style={{width: '400px'}}
+        />
+        <Text size="large">{I18n.t('No announcements to display')}</Text>
+      </div>
+    )
+  }
+
+  if (ENV.global_notifications.past === ' ') {
+    pastAnnouncements = (
+      <div style={styles}>
+        <img
+          data-testid="NoGlobalAnnouncementImagePast"
+          alt=""
+          src={NoResultsDesert}
+          style={{width: '400px'}}
+        />
+        <Text size="large">{I18n.t('No announcements to display')}</Text>
+      </div>
+    )
+  }
+
   return (
     <>
       <Heading border="bottom" margin="medium">
         {I18n.t('Current')}
       </Heading>
-      <div dangerouslySetInnerHTML={{__html: ENV.global_notifications.active}}/>
+      {activeAnnouncements}
 
       <Heading border="bottom" margin="medium">
         {I18n.t('Past')}
       </Heading>
-      <div dangerouslySetInnerHTML={{__html: ENV.global_notifications.past}}/>
+      {pastAnnouncements}
     </>
   )
 }