#3355 - Fixed system notification dissmisal issue

CHANGELOG.md

@@ -10,6 +10,10 @@ The format is based on [Keep a Changelog](http://keepachangelog.com)
 
 ## Unreleased ([details][unreleased changes details])
 
+### Fixed
+
+- #3355 - Fixed system notifications dismissal, and upgraded to CoralUI 3.
+
 ### Added
 
 - #3333 - Use lodash embedded by ACS AEM Commons
@@ -31,9 +35,9 @@ The format is based on [Keep a Changelog](http://keepachangelog.com)
 - #3306 - Sling Model Tag injector
 - #3320 - Content Sync: add an option to disable ssl cert check
 
-### Fixed 
+### Fixed
 
-- #3310 - User mapping | moved author specific user mapping from config to config.author 
+- #3310 - User mapping | moved author specific user mapping from config to config.author
 - #3301 - CM report fix WrongLogLevelInCatchBlock issue
 - #2854 - Code optimization: convert class fields to local variables
 - #2279 - Unit tests coverage for Deck Dynamo: servlet and service configuration

ui.apps/src/main/content/jcr_root/apps/acs-commons/components/utilities/system-notifications/.content.xml

@@ -1,22 +1,4 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<!--
-  ~ ACS AEM Commons
-  ~
-  ~ Copyright (C) 2013 - 2023 Adobe
-  ~
-  ~ Licensed under the Apache License, Version 2.0 (the "License");
-  ~ you may not use this file except in compliance with the License.
-  ~ You may obtain a copy of the License at
-  ~
-  ~      http://www.apache.org/licenses/LICENSE-2.0
-  ~
-  ~ Unless required by applicable law or agreed to in writing, software
-  ~ distributed under the License is distributed on an "AS IS" BASIS,
-  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  ~ See the License for the specific language governing permissions and
-  ~ limitations under the License.
-  -->
-
 <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
     cq:defaultView="html"
     jcr:primaryType="cq:Component"

ui.apps/src/main/content/jcr_root/apps/acs-commons/components/utilities/system-notifications/clientlibs/.content.xml

@@ -1,24 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
-
-<!--
-  ~ ACS AEM Commons
-  ~
-  ~ Copyright (C) 2013 - 2023 Adobe
-  ~
-  ~ Licensed under the Apache License, Version 2.0 (the "License");
-  ~ you may not use this file except in compliance with the License.
-  ~ You may obtain a copy of the License at
-  ~
-  ~      http://www.apache.org/licenses/LICENSE-2.0
-  ~
-  ~ Unless required by applicable law or agreed to in writing, software
-  ~ distributed under the License is distributed on an "AS IS" BASIS,
-  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  ~ See the License for the specific language governing permissions and
-  ~ limitations under the License.
-  -->
 <jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
     jcr:primaryType="cq:ClientLibraryFolder"
-    jsProcessor="[default:none,min:gcc]"
     categories="acs-commons.system-notifications.page"
-    dependencies="coralui2"/>
+    dependencies="coralui3"
+    jsProcessor="[default:none,min:gcc]"/>

ui.apps/src/main/content/jcr_root/apps/acs-commons/components/utilities/system-notifications/clientlibs/page.js

@@ -18,18 +18,24 @@
  * #L%
  */
 
-$(function() { 
-    $('.fn-acsCommons-Notifications-save').click(function(event) {
-        var $form;
-
-        event.stopPropagation();
+$(function() {
+     $('[data-fn-acs-commons-system-notification-cancel]').click(function(event) {
+        var url = $(this).attr('data-fn-acs-commons-system-notification-cancel');
         event.preventDefault();
+        event.stopPropagation();
 
-        $form = $('#fn-acsCommons-Notifications-form');
+        window.location.href = url;
 
-        $.post($form.attr('action'), $form.serialize(), function() {
-           location.reload(true);
-        });
+     });
 
+    $('[data-fn-acs-commons-system-notification-form]').submit(function(event) {
+        event.preventDefault();
+        event.stopPropagation();
+
+        $.post($(this).attr('action'), $(this).serialize(), function() {
+            $('body').fadeOut(500, function() {
+              location.reload(true);
+           });
+        });
     });
 });

ui.apps/src/main/content/jcr_root/apps/acs-commons/components/utilities/system-notifications/clientlibs/page.less

@@ -20,42 +20,87 @@
 
 #acsCommons-System-Notifications-Page {
   padding-bottom: 2rem;
+  margin: 1rem auto;
+  max-width: 800px;
 
-  .acsCommons-System-Notifications-Page-form {
-    margin-left: auto;
-    margin-right: auto;
-    position: relative;
-    text-align: left;
-    width: 50%;
-    min-width: 300px;
+     .preview {
+          grid-area: preview;
+          margin-bottom: 2rem;
 
+          .acsCommons-System-Notification {
+            position: relative;
+            top: auto;
+            left: auto;
+            margin-left: auto;
+            width: 100%;
+            z-index: 0;
+          }
+      }
 
-    .acsCommons-System-Notifications-Form-row {
-      margin: 1rem 0;
+  .form {
+    display: grid;
+    grid-template-areas:
+        'enabled enabled'
+        'style style'
+        'title title'
+        'message message'
+        'dismissable dismissableLabel'
+        'onTime offTime'
+        'save save';
+    grid-gap: 1rem;
+
+     coral-alert,
+     coral-datepicker,
+     input,
+     textarea {
+        width: 100%;
     }
 
-    .acsCommons-System-Notifications-Page-input--text,
-    .acsCommons-System-Notifications-Page-input--textarea {
-      width: 100%;
+
+    label {
+        display: block;
+        margin-bottom: .25rem;
     }
 
-    .acsCommons-System-Notifications-Page-input--datepicker {
-      width: 80%
+
+    .enabled {
+        grid-area: enabled;
     }
-  }
 
-  #acsCommons-System-Notifications {
-    position: static;
-    margin-top: 1rem;
-    margin-bottom: 2rem;
-    margin-left: 0;
-    left: auto;
-    width: 100%;
+    .style {
+        grid-area: style;
+    }
 
-    .acsCommons-System-Notification {
-      width: calc(100% - 4rem - 10px);
+    .title {
+        grid-area: title;
     }
-  }
+
+    .message {
+        grid-area: message;
+    }
+
+    .dismissable {
+        grid-area: dismissable;
+    }
+
+    .dismissable-label {
+        grid-area: dismissableLabel;
+    }
+
+    .on-time {
+        grid-area: onTime;
+    }
+
+    .off-time {
+        grid-area: offTime;
+    }
+
+    .save {
+        grid-area: save;
+        justify-self: end;
+    }
+
+     }
 }
 
 

ui.apps/src/main/content/jcr_root/apps/acs-commons/components/utilities/system-notifications/notification/.content.xml

@@ -1,23 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<!--
-  ~ ACS AEM Commons
-  ~
-  ~ Copyright (C) 2013 - 2023 Adobe
-  ~
-  ~ Licensed under the Apache License, Version 2.0 (the "License");
-  ~ you may not use this file except in compliance with the License.
-  ~ You may obtain a copy of the License at
-  ~
-  ~      http://www.apache.org/licenses/LICENSE-2.0
-  ~
-  ~ Unless required by applicable law or agreed to in writing, software
-  ~ distributed under the License is distributed on an "AS IS" BASIS,
-  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  ~ See the License for the specific language governing permissions and
-  ~ limitations under the License.
-  -->
-
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
-    jcr:primaryType="cq:Component"
+<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
     cq:noDecoration="{Boolean}true"
+    jcr:primaryType="cq:Component"
     componentGroup=".hidden"/>

ui.apps/src/main/content/jcr_root/apps/acs-commons/components/utilities/system-notifications/notification/clientlibs/.content.xml

@@ -1,22 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<!--
-  ~ ACS AEM Commons
-  ~
-  ~ Copyright (C) 2013 - 2023 Adobe
-  ~
-  ~ Licensed under the Apache License, Version 2.0 (the "License");
-  ~ you may not use this file except in compliance with the License.
-  ~ You may obtain a copy of the License at
-  ~
-  ~      http://www.apache.org/licenses/LICENSE-2.0
-  ~
-  ~ Unless required by applicable law or agreed to in writing, software
-  ~ distributed under the License is distributed on an "AS IS" BASIS,
-  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  ~ See the License for the specific language governing permissions and
-  ~ limitations under the License.
-  -->
 <jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
     jcr:primaryType="cq:ClientLibraryFolder"
-          jsProcessor="[default:none,min:gcc]"
-          categories="acs-commons.system-notifications.notification"/>
+    categories="acs-commons.system-notifications.notification"
+    dependencies="coralui3"
+    jsProcessor="[default:none,min:gcc]"/>

ui.apps/src/main/content/jcr_root/apps/acs-commons/components/utilities/system-notifications/notification/clientlibs/notification.js

@@ -18,59 +18,42 @@
  * #L%
  */
 
-$(function() { 
-    $.get('/etc/acs-commons/notifications/_jcr_content.list.html', function(data) {
-        $('body').append(data);
+$(function() {
+    var LOCAL_STORAGE_KEY = 'acs-commons-system-notifications-dismissed-uids';
+
+    $.get('/etc/acs-commons/notifications/_jcr_content.list.html', function(html) {
+        var $tmp = $('<div>').html(html),
+            $notification,
+            uids = localStorage.getItem(LOCAL_STORAGE_KEY) || '';
+            uids = uids.split(',');
+
+        uids.forEach(function(uid) {
+            $tmp.find('[data-fn-acs-commons-system-notification-uid="'+ uid +'"]').remove();
+        });
+
+        $('body').append($tmp.html());
     });
+
+    /* Handle dismissing of notifications */
 
-    $('body').on('click', '.acsCommons-System-Notification-dismiss', function(e) {
+    $('body').on('click', '[data-fn-acs-commons-system-notification-dismiss]', function(e) {
         e.preventDefault();
-
-        var $notification = $(this).closest('.acsCommons-System-Notification'),
-            uid = $notification.data('uid'),
-            dismissible = $notification.data('dismissible'),
-            uids;
-
-        $notification.hide();
-
-        if (dismissible) {
-            // Track dismissal
-            uids = getCookieValue('acs-commons-system-notifications');
-            if (uids) {
-                // UIDs have been tracked
-                if (uids.indexOf(uid) === -1) {
-                    // This notification has not been dismissed before, mark as dismissed
-                    uids = uids + "," + uid;
-                }
-            } else {
-                // Nothing has been dismissed, mark this notification as dismissed
-                uids = uid;
-            }
 
-            setSessionCookie('acs-commons-system-notifications', uids);
+        if ($('[data-fn-acs-commons-system-notification-form]').length > 0) {
+            return;
         }
-    });
-
-    function setSessionCookie(name, value) {
-        document.cookie = name + '=' + value + '; expires=Tue, 01 Jan 2999 12:00:00 UTC; path=/;';
-    }
 
-    function getCookieValue(name) {
-        var cookies = document.cookie.split(';'),
-            i,
-            cookie;
-        name = name + '=';
-
-        for (i = 0; i < cookies.length; i++) {
-            cookie = cookies[i];
-            while (cookie.charAt(0) === ' ') {
-                cookie = cookie.substring(1, cookie.length);
-                if (cookie.indexOf(name) === 0) {
-                    return cookie.substring(name.length, cookie.length);
-                }
-            }
+        var uid = $(this).data('fn-acs-commons-system-notification-dismiss'),
+            uids = localStorage.getItem(LOCAL_STORAGE_KEY) || '';
+
+        if (uids.indexOf(uid) === -1) {
+            // This notification has not been dismissed before, mark as dismissed
+            localStorage.setItem(LOCAL_STORAGE_KEY, uids + "," + uid);
+        } else {
+            // Nothing has been dismissed, mark this notification as dismissed
+            localStorage.setItem(LOCAL_STORAGE_KEY, uid);
         }
-        
-        return null;
-    } 
+
+        $(this).closest('[data-fn-acs-commons-system-notification-uid]').remove();
+    });
 });