Create notification for dismissed announcements

Test plan: -create global announcement -dismiss announcement on dashboard -notification should show, click “view” button -should redirect to global announcements page closes KNO-500 flag=past_announcements Change-Id: I3ced1304fb7fb66699022fd93d46bd404e564b48 Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/238062 Tested-by: Service Cloud Jenkins <[email protected]> Reviewed-by: Matthew Lemon <[email protected]> QA-Review: Matthew Lemon <[email protected]> Product-Review: Matthew Lemon <[email protected]>
ralacas · May 28, 2020 · 240c9a1 · 240c9a1
1 parent 906a773
commit 240c9a1
Show file tree

Hide file tree

Showing 7 changed files with 146 additions and 6 deletions.
diff --git a/app/controllers/users_controller.rb b/app/controllers/users_controller.rb
@@ -534,7 +534,8 @@ def user_dashboard
       },
       :STUDENT_PLANNER_ENABLED => planner_enabled?,
       :STUDENT_PLANNER_COURSES => planner_enabled? && map_courses_for_menu(@current_user.courses_with_primary_enrollment),
-      :STUDENT_PLANNER_GROUPS => planner_enabled? && map_groups_for_planner(@current_user.current_groups)
+      :STUDENT_PLANNER_GROUPS => planner_enabled? && map_groups_for_planner(@current_user.current_groups),
+      :PAST_ANNOUNCEMENTS_ENABLED => @domain_root_account.feature_enabled?('past_announcements')
     })
 
     @announcements = AccountNotification.for_user_and_account(@current_user, @domain_root_account)

diff --git a/app/jsx/bundles/past_global_alert.js b/app/jsx/bundles/past_global_alert.js
@@ -0,0 +1,26 @@
+/*
+ * Copyright (C) 2020 - present Instructure, Inc.
+ *
+ * This file is part of Canvas.
+ *
+ * Canvas is free software: you can redistribute it and/or modify it under
+ * the terms of the GNU Affero General Public License as published by the Free
+ * Software Foundation, version 3 of the License.
+ *
+ * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
+ * details.
+ *
+ * You should have received a copy of the GNU Affero General Public License along
+ * with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import $ from 'jquery'
+import React from 'react'
+import ReactDOM from 'react-dom'
+import PastGlobalAlert from '../past_global_announcements/PastGlobalAlert'
+
+$(() => {
+  ReactDOM.render(<PastGlobalAlert />, $('<div/>').appendTo('#announcementWrapper')[0])
+})
diff --git a/app/jsx/past_global_announcements/PastGlobalAlert.js b/app/jsx/past_global_announcements/PastGlobalAlert.js
@@ -0,0 +1,62 @@
+/*
+ * Copyright (C) 2020 - present Instructure, Inc.
+ *
+ * This file is part of Canvas.
+ *
+ * Canvas is free software: you can redistribute it and/or modify it under
+ * the terms of the GNU Affero General Public License as published by the Free
+ * Software Foundation, version 3 of the License.
+ *
+ * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
+ * details.
+ *
+ * You should have received a copy of the GNU Affero General Public License along
+ * with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import React from 'react'
+import {Alert} from '@instructure/ui-alerts/lib/Alert'
+import {Button} from '@instructure/ui-buttons/lib/Button'
+import I18n from 'i18n!past_global_announcements'
+
+export default class PastGlobalAlert extends React.Component {
+  state = {
+    shouldRender: false
+  }
+
+  componentDidMount() {
+    document.addEventListener('globalAlertShouldRender', this.handleAlertRender)
+  }
+
+  handleAlertRender = () => {
+    this.setState({shouldRender: true})
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('globalAlertShouldRender', this.handleAlertRender)
+  }
+
+  render() {
+    if (this.state.shouldRender && ENV.PAST_ANNOUNCEMENTS_ENABLED) {
+      return (
+        <Alert>
+          <div data-testid="globalAnnouncementsAlert">
+            {I18n.t(`You can view dismissed announcements by going to Account and selecting Global
+            Announcements from the menu.`)}
+          </div>
+          <Button
+            data-testid="globalAnnouncementsButton"
+            href="/account_notifications"
+            variant="primary"
+            margin="small 0 0 0"
+          >
+            {I18n.t('View')}
+          </Button>
+        </Alert>
+      )
+    }
+    return null
+  }
+}
diff --git a/app/jsx/past_global_announcements/PastGlobalAnnouncements.js b/app/jsx/past_global_announcements/PastGlobalAnnouncements.js
@@ -18,17 +18,18 @@
 
 import React from 'react'
 import {Heading} from '@instructure/ui-heading/lib/Heading'
+import I18n from 'i18n!past_global_announcements'
 
 const PastGlobalAnnouncements = () => {
   return (
     <>
       <Heading border="bottom" margin="medium">
-        Current
+        {I18n.t('Current')}
       </Heading>
       <div dangerouslySetInnerHTML={{__html: ENV.global_notifications.active}}/>
 
       <Heading border="bottom" margin="medium">
-        Past
+        {I18n.t('Past')}
       </Heading>
       <div dangerouslySetInnerHTML={{__html: ENV.global_notifications.past}}/>
     </>

diff --git a/app/jsx/past_global_announcements/__tests__/pastGlobalAlert.test.js b/app/jsx/past_global_announcements/__tests__/pastGlobalAlert.test.js
@@ -0,0 +1,41 @@
+/*
+ * Copyright (C) 2020 - present Instructure, Inc.
+ *
+ * This file is part of Canvas.
+ *
+ * Canvas is free software: you can redistribute it and/or modify it under
+ * the terms of the GNU Affero General Public License as published by the Free
+ * Software Foundation, version 3 of the License.
+ *
+ * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
+ * details.
+ *
+ * You should have received a copy of the GNU Affero General Public License along
+ * with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import PastGlobalAlert from '../PastGlobalAlert'
+import {render} from '@testing-library/react'
+import React from 'react'
+
+describe('render past global announcement alert', () => {
+  beforeAll(() => {
+    window.ENV.PAST_ANNOUNCEMENTS_ENABLED = true
+  })
+
+  it('renders alert with message', async () => {
+    const {findByTestId} = render(<PastGlobalAlert />)
+    const event = new Event('globalAlertShouldRender')
+    document.dispatchEvent(event)
+    expect(await findByTestId('globalAnnouncementsAlert')).toBeVisible()
+  })
+
+  it('renders button on alert', async () => {
+    const {findByTestId} = render(<PastGlobalAlert />)
+    const event = new Event('globalAlertShouldRender')
+    document.dispatchEvent(event)
+    expect(await findByTestId('globalAnnouncementsButton')).toBeVisible()
+  })
+})
diff --git a/app/views/shared/_account_notification.html.erb b/app/views/shared/_account_notification.html.erb
@@ -42,11 +42,17 @@
     </div>
     <% unless @for_display %>
     <div class="ic-notification__actions">
-      <a href="#" class="Button Button--icon-action" data-url="<%= dashboard_close_notification_path(notification.id) %>" data-remove=".ic-notification" title="<%= t :close, 'close' %>" role="button">
+      <a href="#" class="Button Button--icon-action" onClick='showGlobalAlert()' data-url="<%= dashboard_close_notification_path(notification.id) %>" data-remove=".ic-notification" title="<%= t :close, 'close' %>" role="button">
         <i class="icon-x"></i>
         <span class="screenreader-only"><%= t :close, 'close' %></span>
       </a>
     </div>
+    <script>
+      function showGlobalAlert() {
+        const event = new Event('globalAlertShouldRender')
+        document.dispatchEvent(event)
+      }
+    </script>
     <% end %>
   </div>
   <span class="notification_account_content_text">

diff --git a/app/views/shared/_dashboard_messages.html.erb b/app/views/shared/_dashboard_messages.html.erb
@@ -17,9 +17,12 @@
 %>
 
 <%# These all take care of their own conditions for showing/hiding %>
-<%# TODO: aria roles for these. maybe use list/listitem or region 
+<%# TODO: aria roles for these. maybe use list/listitem or region
     http://www.w3.org/TR/wai-aria/roles#document_structure_roles %>
-<%= render :partial => 'shared/account_notification', :collection => @announcements %>
+<% js_bundle :past_global_alert %>
+<div id='announcementWrapper'>
+  <%= render :partial => 'shared/account_notification', :collection => @announcements %>
+</div>
 <%= render :partial => 'users/current_conference', :collection => @current_conferences %>
 <%= render :partial => 'users/scheduled_conference', :collection => @scheduled_conferences %>
 <%= render :partial => 'users/welcome' %>