[SDPAP-6839] Add Dismissible Message Bar for CMS user (#362)

* SDPAP-6839 Add Dismissible Message Bar for CMS user

update to override the parent css

lint

Updates

1. Update label options
2. hide severity field
3. set severity to medium
4. css update
5. twig update
6. install the site alert block

Put message next to the label

update site alert theme

fixed the overflow issue

lint

* Update

1. change to use DateTimeImmutable()
2. change to use hook_form_FORM_ID_alter hook

* Time value is unnecessary.

composer.json

@@ -83,7 +83,8 @@
         "drupal/user_expire": "^1.1",
         "drupal/field_permissions": "^1.2",
         "lesstif/php-jira-rest-client": "2.6.0",
-        "drupal/jira_rest": "^4.0@beta"
+        "drupal/jira_rest": "^4.0@beta",
+        "drupal/site_alert": "1.x-dev@dev"
     },
     "repositories": {
         "drupal": {
@@ -271,6 +272,9 @@
             },
             "drupal/user_expire": {
                 "3253423: Warnings are skipped for valid users - https://www.drupal.org/project/user_expire/issues/3253423": "https://www.drupal.org/files/issues/2021-12-08/3253423-2-test-for-non-existent-account.patch"
+            },
+            "drupal/site_alert": {
+                "Add ability to dismiss alert - https://www.drupal.org/project/site_alert/issues/3156557#comment-14095044": "https://www.drupal.org/files/issues/2021-05-06/3156557-51.patch"
             }
         }
     }

modules/tide_site_alert/config/optional/block.block.tide_site_alert_header.yml

@@ -0,0 +1,20 @@
+langcode: en
+status: true
+dependencies:
+  module:
+    - tide_site_alert
+  theme:
+    - seven
+id: tide_site_alert_header
+theme: seven
+region: header
+weight: -100
+provider: null
+plugin: tide_site_alert_block
+settings:
+  id: tide_site_alert_block
+  label: 'Tide Site Alert'
+  label_display: '0'
+  provider: tide_site_alert
+  timeout: '5'
+visibility: {  }

modules/tide_site_alert/css/site_alert.css

@@ -0,0 +1,59 @@
+/* Site alert theming */
+.site-alert {
+  width: 100%;
+}
+
+.site-alert .text {
+  display: flex;
+  flex-direction: row;
+  padding: 10px 10px;
+  align-items: flex-start;
+}
+
+.site-alert .text p {
+  margin: 0;
+}
+
+.message {
+  padding-left: 5px;
+  flex-grow: 1;
+  overflow-wrap: anywhere;
+}
+
+.first-line:before {
+  content: '';
+  display: inline-block;
+  background: url('icon-alert.png') no-repeat;
+  background-size: contain;
+  width: 1rem;
+  height: 1rem;
+}
+
+.site-alert .severity-low,
+.site-alert .severity-medium,
+.site-alert .severity-high {
+  color: #000000;
+  border: 1px solid #cccccc;
+  background: #f3eaac;
+  position: relative;
+  margin-bottom: 1.5em;
+  background-repeat: no-repeat;
+  background-position: 1% 50%;
+  background-size: 30px 30px;
+}
+
+.site-alert .site-alert__dismiss {
+  cursor: pointer;
+  background-color: transparent;
+  border-color: transparent;
+}
+
+.site-alert .site-alert__dismiss:hover {
+  background-color: transparent;
+  border-color: transparent;
+}
+
+.site-alert .site-alert__dismiss-icon {
+  color: #000;
+  text-decoration: none;
+}

modules/tide_site_alert/src/Plugin/Block/TideSiteAlertBlock.php

@@ -0,0 +1,31 @@
+<?php
+
+namespace Drupal\tide_site_alert\Plugin\Block;
+
+use Drupal\site_alert\Plugin\Block\SiteAlertBlock;
+
+/**
+ * Implements TideSiteAlertBlock class.
+ *
+ * @Block(
+ *   id = "tide_site_alert_block",
+ *   admin_label = @Translation("Tide Site Alert"),
+ * )
+ */
+class TideSiteAlertBlock extends SiteAlertBlock {
+
+  /**
+   * {@inheritdoc}
+   */
+  public function build() {
+    $build = parent::build();
+    foreach ($build['#attached']['library'] as $id => $value) {
+      if ($value == 'site_alert/drupal.site_alert') {
+        unset($build['#attached']['library'][$id]);
+      }
+    }
+    $build['#attached']['library'][] = 'tide_site_alert/drupal.tide_site_alert';
+    return $build;
+  }
+
+}

modules/tide_site_alert/templates/tide-site-alert.html.twig

@@ -0,0 +1,21 @@
+{% set site_alert_classes = [
+    'js-site-alert',
+    ('severity-' ~ alert.severity)|clean_class,
+    alert.dismissible ? 'hidden' : ''
+] %}
+
+<div{{ attributes.setAttribute('data-site-alert-id', alert.id).addClass(site_alert_classes) }}>
+    <div class="text">
+        <div class="first-line">
+        </div>
+        <div class="message">
+            {{ alert.label }} {{ alert.message }}
+        </div>
+        {% if alert.dismissible %}
+            <button type="button" value="{{ alert.id }}" class="js-site-alert-dismiss site-alert__dismiss">
+                <span class="site-alert__dismiss-icon" aria-hidden="true">&times;</span>
+                <span class="visually-hidden">{{ 'Dismiss @label alert'|t({ '@label': alert.label }) }}</span>
+            </button>
+        {% endif %}
+    </div>
+</div>

modules/tide_site_alert/tide_site_alert.info.yml

@@ -0,0 +1,7 @@
+name: 'Tide site alert'
+type: module
+description: 'The extension of Site alert module.'
+core_version_requirement: ^9.4 || ^10
+package: Tide
+dependencies:
+  - site_alert:site_alert

modules/tide_site_alert/tide_site_alert.libraries.yml

@@ -0,0 +1,6 @@
+drupal.tide_site_alert:
+  version: VERSION
+  css:
+    theme:
+      css/site_alert.css: {}
+

modules/tide_site_alert/tide_site_alert.module

@@ -0,0 +1,69 @@
+<?php
+
+/**
+ * @file
+ * Contains tide_site_alert.module.
+ */
+
+use Drupal\Core\Form\FormStateInterface;
+
+/**
+ * Implements hook_theme().
+ */
+function tide_site_alert_theme() {
+  return [
+    'site_alert' => [
+      'template' => 'tide-site-alert',
+    ],
+  ];
+}
+
+/**
+ * Implements hook_form_FORM_ID_alter().
+ */
+function tide_site_alert_form_site_alert_form_alter(&$form, FormStateInterface $form_state, $form_id) {
+  $options = [
+    'Upcoming release notice:'          => 'Upcoming release notice:',
+    'Upcoming hotfix notice:'           => 'Upcoming hotfix notice:',
+    'Upcoming site maintenance notice:' => 'Upcoming site maintenance notice:',
+    'Upcoming planned outage notice:'   => 'Upcoming planned outage notice:',
+    'Hotfix in progress:'               => 'Hotfix in progress:',
+    'Site maintenance in progress:'     => 'Site maintenance in progress:',
+    'Outage in progress:'               => 'Outage in progress:',
+    'Content freeze in progress:'       => 'Content freeze in progress:',
+    'Successful post-release notice:'   => 'Successful post-release notice:',
+    'Unsuccessful post-release notice:' => 'Unsuccessful post-release notice:',
+    'Post-outage notice:'               => 'Post-outage notice:',
+    'Custom notice:'                    => 'Custom notice:',
+  ];
+  $form['suggested_labels'] = [
+    '#type'         => 'select',
+    '#title'        => t('Suggested labels'),
+    '#options'      => $options,
+    '#empty_option' => t('- Select -'),
+    '#ajax'         => [
+      'callback' => 'tide_site_alert_textfield_callback',
+      'wrapper'  => 'suggested-labels',
+      'effect'   => 'fade',
+    ],
+  ];
+  $form['severity']['#access'] = FALSE;
+  $form['severity']['widget']['#default_value'] = 'medium';
+  $form['label']['widget'][0]['value']['#prefix']
+    = '<div id="suggested-labels">';
+  $form['label']['widget'][0]['value']['#suffix'] = '</div>';
+}
+
+/**
+ * The callback for the form alter above.
+ */
+function tide_site_alert_textfield_callback(&$form, FormStateInterface $form_state) {
+  $selected = $form_state->getValue('suggested_labels');
+  if ($selected != 'Other') {
+    $form['label']['widget'][0]['value']['#value'] = $form_state->getValue('suggested_labels');
+  }
+  else {
+    $form['label']['widget'][0]['value']['#value'] = '';
+  }
+  return $form['label'];
+}