UI: fix link bug and add colors (#24977)

* Fix edit bug and put transform back * Edit badgeColor * Add tests * Revert changes to transform * Edit badge colors * remove universal object transform
hashicorp · Jan 22, 2024 · 589e8ce · 589e8ce
1 parent 477da3c
commit 589e8ce
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 22 deletions.
diff --git a/ui/app/transforms/object.js b/ui/app/transforms/object.js
@@ -20,7 +20,7 @@ export default class ObjectTransform extends Transform {
     if (typeOf(value) !== 'object') {
       return {};
     } else {
-      return JSON.stringify(value) === '{"":""}' ? {} : value;
+      return value;
     }
   }
 }
diff --git a/ui/lib/config-ui/addon/components/messages/page/list.hbs b/ui/lib/config-ui/addon/components/messages/page/list.hbs
@@ -49,14 +49,10 @@
               {{message.title}}
             </Hds::Text::Display>
             <div class="has-top-margin-xs">
-              <Hds::Badge
-                @text={{message.badgeDisplayText}}
-                @color={{if message.active "highlight" "neutral"}}
-                data-test-badge={{concat "active:" message.active}}
-              />
+              <Hds::Badge @text={{message.badgeDisplayText}} @color={{message.badgeColor}} data-test-badge={{message.id}} />
               <Hds::Badge
                 @text={{(capitalize message.type)}}
-                @color={{if message.active "highlight" "neutral"}}
+                @color={{message.badgeColor}}
                 data-test-badge={{message.type}}
               />
             </div>

diff --git a/ui/lib/config-ui/addon/components/messages/page/list.js b/ui/lib/config-ui/addon/components/messages/page/list.js
@@ -32,6 +32,8 @@ export default class MessagesList extends Component {
   get formattedMessages() {
     return this.args.messages.map((message) => {
       let badgeDisplayText = '';
+      let badgeColor = 'neutral';
+
       if (message.active) {
         if (message.endTime) {
           badgeDisplayText = `Active until ${dateFormat([message.endTime, 'MMM d, yyyy hh:mm aaa'], {
@@ -40,19 +42,23 @@ export default class MessagesList extends Component {
         } else {
           badgeDisplayText = 'Active';
         }
+        badgeColor = 'success';
       } else {
         if (message.isStartTimeAfterToday) {
           badgeDisplayText = `Scheduled: ${dateFormat([message.startTime, 'MMM d, yyyy hh:mm aaa'], {
             withTimeZone: true,
           })}`;
+          badgeColor = 'highlight';
         } else {
           badgeDisplayText = `Inactive:  ${dateFormat([message.startTime, 'MMM d, yyyy hh:mm aaa'], {
             withTimeZone: true,
           })}`;
+          badgeColor = 'neutral';
         }
       }
 
       message.badgeDisplayText = badgeDisplayText;
+      message.badgeColor = badgeColor;
       return message;
     });
   }

diff --git a/ui/tests/helpers/config-ui/message-selectors.js b/ui/tests/helpers/config-ui/message-selectors.js
@@ -18,4 +18,5 @@ export const PAGE = {
   alert: (name) => `data-test-custom-alert=${name}`,
   alertTitle: (name) => `[data-test-custom-alert-title="${name}"]`,
   alertDescription: (name) => `[data-test-custom-alert-description="${name}"]`,
+  badge: (name) => `[data-test-badge="${name}"]`,
 };
diff --git a/ui/tests/integration/components/config-ui/messages/page/details-test.js b/ui/tests/integration/components/config-ui/messages/page/details-test.js
@@ -46,8 +46,8 @@ module('Integration | Component | messages/page/details', function (hooks) {
       title: 'Message title 1',
       message: 'Some long long long message',
       link: { here: 'www.example.com' },
-      startTime: '2021-08-01T00:00:00Z',
-      endTime: '',
+      start_time: '2021-08-01T00:00:00Z',
+      end_time: '',
       canDeleteCustomMessages: true,
       canEditCustomMessages: true,
     });

diff --git a/ui/tests/integration/components/config-ui/messages/page/list-test.js b/ui/tests/integration/components/config-ui/messages/page/list-test.js
@@ -31,39 +31,37 @@ module('Integration | Component | messages/page/list', function (hooks) {
 
     this.store.pushPayload('config-ui/message', {
       modelName: 'config-ui/message',
-      id: '01234567-89ab-cdef-0123-456789abcdef',
+      id: '0',
       active: true,
       type: 'banner',
       authenticated: true,
       title: 'Message title 1',
       message: 'Some long long long message',
       link: { title: 'here', href: 'www.example.com' },
-      startTime: '2021-08-01T00:00:00Z',
-      endTime: '',
+      start_time: '2021-08-01T00:00:00Z',
+      end_time: '',
     });
     this.store.pushPayload('config-ui/message', {
       modelName: 'config-ui/message',
-      id: '01234567-89ab-dddd-0123-456789abcdef',
+      id: '1',
       active: false,
       type: 'modal',
       authenticated: true,
       title: 'Message title 2',
       message: 'Some long long long message blah blah blah',
       link: { title: 'here', href: 'www.example2.com' },
-      startTime: '2023-08-01T00:00:00Z',
-      endTime: '2023-08-01T00:00:00Z',
+      start_time: '2023-07-01T00:00:00Z',
+      end_time: '2023-08-01T00:00:00Z',
     });
     this.store.pushPayload('config-ui/message', {
       modelName: 'config-ui/message',
-      id: '01234567-89ab-vvvv-0123-456789abcdef',
-      active: true,
+      id: '2',
+      active: false,
       type: 'banner',
       authenticated: false,
       title: 'Message title 3',
       message: 'Some long long long message',
       link: { title: 'here', href: 'www.example.com' },
-      startTime: '2021-08-01T00:00:00Z',
-      endTime: '2090-08-01T00:00:00Z',
     });
   });
 
@@ -100,14 +98,14 @@ module('Integration | Component | messages/page/list', function (hooks) {
     for (let i = 0; i < 97; i++) {
       this.store.pushPayload('config-ui/message', {
         modelName: 'config-ui/message',
-        id: i,
+        id: `${i}-a`,
         active: true,
         type: 'banner',
         authenticated: false,
         title: `Message title ${i}`,
         message: 'Some long long long message',
         link: { title: 'here', href: 'www.example.com' },
-        startTime: '2021-08-01T00:00:00Z',
+        start_time: '2021-08-01T00:00:00Z',
       });
     }
 
@@ -120,7 +118,6 @@ module('Integration | Component | messages/page/list', function (hooks) {
       total: this.messages.length,
       pageSize: 100,
     };
-
     await render(hbs`<Messages::Page::List @messages={{this.messages}} />`, {
       owner: this.engine,
     });
@@ -133,4 +130,15 @@ module('Integration | Component | messages/page/list', function (hooks) {
       );
     await click(PAGE.modalButton('maximum-message-modal'));
   });
+
+  test('it should show the correct badge colors based on badge status', async function (assert) {
+    this.messages = this.store.peekAll('config-ui/message', {});
+    this.messages.meta = META;
+    await render(hbs`<Messages::Page::List @messages={{this.messages}} />`, {
+      owner: this.engine,
+    });
+    assert.dom(PAGE.badge('0')).hasClass('hds-badge--color-success');
+    assert.dom(PAGE.badge('1')).hasClass('hds-badge--color-neutral');
+    assert.dom(PAGE.badge('2')).hasClass('hds-badge--color-highlight');
+  });
 });