UI: Fix bugs in custom messages (#25169)

* Fix bugs in custom messages

* Add new line split helper file

* Fix multiple banner issue

* Code cleanup

* Add tests

* Add more tests

* Remove empty state action

* Remove test

ui/app/templates/vault/cluster.hbs

@@ -13,9 +13,11 @@
       as |A|
     >
       <A.Title data-test-custom-alert-title={{bannerMessage.id}}>{{bannerMessage.title}}</A.Title>
-      <A.Description data-test-custom-alert-description={{bannerMessage.id}}>
-        {{bannerMessage.message}}
-      </A.Description>
+      {{#each (new-line-split bannerMessage.message) as |msg|}}
+        <A.Description data-test-custom-alert-description={{bannerMessage.id}}>
+          {{msg}}
+        </A.Description>
+      {{/each}}
       {{#unless (is-empty-value bannerMessage.link)}}
         {{#each-in bannerMessage.link as |title href|}}
           <A.Link::Standalone
@@ -38,13 +40,22 @@
       {{modalMessage.title}}
     </M.Header>
     <M.Body data-test-modal-body={{modalMessage.id}}>
-      {{modalMessage.message}}
+      {{#each (new-line-split modalMessage.message) as |msg|}}
+        {{#if (eq msg "")}}
+          <br />
+        {{else}}
+          <div>
+            {{msg}}
+          </div>
+        {{/if}}
+      {{/each}}
       {{#unless (is-empty-value modalMessage.link)}}
         {{#each-in modalMessage.link as |title href|}}
           <Hds::Link::Inline @icon="external-link" @isHrefExternal={{true}} @href={{href}}>{{title}}</Hds::Link::Inline>
         {{/each-in}}
       {{/unless}}
     </M.Body>
+
     <M.Footer as |F|>
       <Hds::Button @text="Confirm" {{on "click" F.close}} data-test-modal-button={{modalMessage.id}} />
     </M.Footer>

ui/lib/config-ui/addon/components/messages/page/create-and-edit-message-form.hbs

@@ -94,7 +94,15 @@
         {{@message.title}}
       </M.Header>
       <M.Body data-test-modal-body={{@message.title}}>
-        {{@message.message}}
+        {{#each (new-line-split @message.message) as |msg|}}
+          {{#if (eq msg "")}}
+            <br />
+          {{else}}
+            <div>
+              {{msg}}
+            </div>
+          {{/if}}
+        {{/each}}
         {{#unless (is-empty-value @message.link)}}
           {{#each-in @message.link as |title href|}}
             <Hds::Link::Inline @icon="external-link" @isHrefExternal={{true}} @href={{href}}>{{title}}</Hds::Link::Inline>

ui/lib/config-ui/addon/components/messages/page/create-and-edit-message-form.js

@@ -10,6 +10,7 @@ import errorMessage from 'vault/utils/error-message';
 import { inject as service } from '@ember/service';
 import { action } from '@ember/object';
 import Ember from 'ember';
+import { isAfter } from 'date-fns';
 
 /**
  * @module Page::CreateAndEditMessageForm
@@ -58,8 +59,13 @@ export default class MessagesList extends Component {
       this.userConfirmation = '';
 
       const isValid = this.validate();
+      const modalMessages = this.args.messages?.filter((message) => message.type === 'modal') || [];
+      const hasExpiredModalMessages = modalMessages.every((message) => {
+        if (!message.endTime) return false;
+        return isAfter(new Date(), new Date(message.endTime));
+      });
 
-      if (this.args.hasSomeActiveModals && this.args.message.type === 'modal') {
+      if (!hasExpiredModalMessages && this.args.hasSomeActiveModals && this.args.message.type === 'modal') {
         this.showMultipleModalsMessage = true;
         const isConfirmed = yield this.getUserConfirmation.perform();
         if (!isConfirmed) return;

ui/lib/config-ui/addon/components/messages/page/list.hbs

@@ -100,17 +100,7 @@
   <EmptyState
     @title="No messages yet"
     @message="Add a custom message for all users after they log into Vault. Create message to get started."
-  >
-    <Hds::Link::Standalone
-      @icon="plus"
-      @iconPosition="leading"
-      @text="Create message"
-      @route="messages.create"
-      @query={{hash authenticated=@authenticated}}
-      class="is-no-underline"
-      data-test-action-text="Create message"
-    />
-  </EmptyState>
+  />
 {{/if}}
 
 {{#if this.showMaxMessageModal}}

ui/lib/config-ui/addon/components/messages/preview-image.hbs

@@ -20,9 +20,11 @@
       as |A|
     >
       <A.Title data-test-custom-alert-title={{@message.title}}>{{@message.title}}</A.Title>
-      <A.Description data-test-custom-alert-description={{@message.title}}>
-        {{@message.message}}
-      </A.Description>
+      {{#each (new-line-split @message.message) as |msg|}}
+        <A.Description data-test-custom-alert-description={{@message.title}}>
+          {{msg}}
+        </A.Description>
+      {{/each}}
       {{#unless (is-empty-value @message.link)}}
         {{#each-in @message.link as |title href|}}
           <A.Link::Standalone

ui/lib/core/addon/helpers/new-line-split.js

@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import { helper } from '@ember/component/helper';
+
+export function newLineSplit([lines]) {
+  return lines.split('\n');
+}
+
+export default helper(newLineSplit);

ui/lib/core/app/helpers/new-line-split.js

@@ -0,0 +1,6 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+export { default } from 'core/helpers/new-line-split';

ui/tests/integration/components/config-ui/messages/page/create-and-edit-message-test.js

@@ -79,7 +79,6 @@ module('Integration | Component | messages/page/create-and-edit-message', functi
     );
     await fillIn('[data-test-kv-key="0"]', 'Learn more');
     await fillIn('[data-test-kv-value="0"]', 'www.learn.com');
-
     await click(PAGE.button('create-message'));
   });
 

ui/tests/integration/components/config-ui/messages/page/list-test.js

@@ -79,7 +79,6 @@ module('Integration | Component | messages/page/list', function (hooks) {
       .hasText(
         'Add a custom message for all users after they log into Vault. Create message to get started.'
       );
-    assert.dom('[data-test-empty-state-actions] a').hasText('Create message');
   });
 
   test('it should show the list of custom messages', async function (assert) {

ui/tests/integration/helpers/new-line-split-test.js

@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'vault/tests/helpers';
+import { newLineSplit } from 'core/helpers/new-line-split';
+
+module('Integration | Helper | new-line-split', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it splits the string by new line characters', async function (assert) {
+    const lines = newLineSplit(['First new line.\nSecond new line.\nThird new line.']);
+    assert.deepEqual(lines, ['First new line.', 'Second new line.', 'Third new line.']);
+  });
+  test('it checks for some non-new line characters', async function (assert) {
+    let lines = newLineSplit(['First new line.<br />\nSecond new line.\nThird new line.']);
+    assert.deepEqual(lines, ['First new line.<br />', 'Second new line.', 'Third new line.']);
+    lines = newLineSplit(['First new line./n\nSecond new line.\nThird new line.']);
+    assert.deepEqual(lines, ['First new line./n', 'Second new line.', 'Third new line.']);
+    lines = newLineSplit(['First new line.\n\nSecond new line.\n\nThird new line.']);
+    assert.deepEqual(lines, ['First new line.', '', 'Second new line.', '', 'Third new line.']);
+  });
+});