UI: [VAULT-21530] Custom Messages List View w/ Pagination and LazyPaginatedQuery

ui/app/adapters/config-ui/message.js

@@ -4,5 +4,26 @@
  */
 
 import ApplicationAdapter from '../application';
+import { encodePath } from 'vault/utils/path-encoding-helpers';
 
-export default class MessageAdapter extends ApplicationAdapter {}
+export default class MessageAdapter extends ApplicationAdapter {
+  getCustomMessagesUrl(id) {
+    let url = `${this.buildURL()}/config/ui/custom-messages`;
+
+    if (id) {
+      url = url + '/' + encodePath(id);
+    }
+    return url;
+  }
+
+  query(store, type, query) {
+    const { authenticated } = query;
+
+    return this.ajax(this.getCustomMessagesUrl(), 'GET', { data: { authenticated } });
+  }
+
+  deleteRecord(store, type, snapshot) {
+    const { id } = snapshot;
+    return this.ajax(this.getCustomMessagesUrl(id), 'DELETE');
+  }
+}

ui/app/components/sidebar/nav/cluster.hbs

@@ -120,6 +120,7 @@
     <Nav.Title data-test-sidebar-nav-heading="Settings">Settings</Nav.Title>
     <Nav.Link
       @route="vault.cluster.config-ui.messages"
+      @query={{hash authenticated=true}}
       @text="Custom Messages"
       data-test-sidebar-nav-link="Custom Messages"
     />

ui/app/models/config-ui/message.js

@@ -5,6 +5,8 @@
 
 import Model, { attr } from '@ember-data/model';
 import lazyCapabilities, { apiPath } from 'vault/macros/lazy-capabilities';
+import { isAfter } from 'date-fns';
+import { parseAPITimestamp } from 'core/utils/date-formatters';
 
 export default class MessageModel extends Model {
   @attr('boolean') active;
@@ -16,6 +18,12 @@ export default class MessageModel extends Model {
   @attr('string') startTime;
   @attr('string') endTime;
 
+  // date helpers
+  get isStartTimeAfterToday() {
+    return isAfter(parseAPITimestamp(this.startTime), new Date());
+  }
+
+  // capabilities
   @lazyCapabilities(apiPath`sys/config/ui/custom-messages`) customMessagesPath;
 
   get canCreateCustomMessages() {

ui/app/serializers/config-ui/message.js

@@ -5,4 +5,17 @@
 
 import ApplicationSerializer from '../application';
 
-export default class MessageSerializer extends ApplicationSerializer {}
+export default class MessageSerializer extends ApplicationSerializer {
+  primaryKey = 'id';
+
+  extractLazyPaginatedData(payload) {
+    if (payload.data) {
+      if (payload.data?.keys && Array.isArray(payload.data.keys)) {
+        return payload.data.keys.map((key) => ({ id: key, ...payload.data.key_info[key] }));
+      }
+      Object.assign(payload, payload.data);
+      delete payload.data;
+    }
+    return payload;
+  }
+}

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

@@ -0,0 +1,101 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: BUSL-1.1
+~}}
+
+<Messages::TabPageHeader @authenticated={{@authenticated}}>
+  <:toolbarActions>
+    <ToolbarLink data-test-toolbar-create-message @route="messages.create" @type="add">
+      Create message
+    </ToolbarLink>
+  </:toolbarActions>
+</Messages::TabPageHeader>
+
+{{#if @messages.length}}
+  {{#each this.getMessages as |message|}}
+    <LinkedBlock
+      data-test-list-item={{message.id}}
+      class="list-item-row"
+      @params={{array "messages.message.details" message.id}}
+      @linkPrefix="vault.cluster.config-ui"
+    >
+      <div class="level is-mobile">
+        <div class="level-left">
+          <div>
+            <Hds::Text::Display @tag="h2" data-linked-block-title={{message.id}}>
+              <Icon @name="message-circle" class="auto-width" aria-label="message" />
+              {{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={{(capitalize message.type)}}
+                @color={{if message.active "highlight" "neutral"}}
+                data-test-badge={{message.type}}
+              />
+            </div>
+          </div>
+        </div>
+        <div class="level-right is-flex is-paddingless is-marginless">
+          <div class="level-item">
+            <PopupMenu @name="engine-menu">
+              <Confirm as |c|>
+                <nav class="menu">
+                  <ul class="menu-list">
+                    {{#if message.canEditCustomMessages}}
+                      <li class="action">
+                        <LinkTo @route="messages.message.edit" @model={{message.id}}>
+                          Edit
+                        </LinkTo>
+                      </li>
+                    {{/if}}
+                    {{#if message.canDeleteCustomMessages}}
+                      <li class="action">
+                        <c.Message
+                          @id={{message.id}}
+                          @triggerText="Delete"
+                          @message="This will delete this message permanently. You cannot undo this action."
+                          @title="Are you sure?"
+                          @confirmButtonText="Delete"
+                          @onConfirm={{perform this.deleteMessage message}}
+                          data-test-delete-custom-message
+                        />
+                      </li>
+                    {{/if}}
+                  </ul>
+                </nav>
+              </Confirm>
+            </PopupMenu>
+          </div>
+        </div>
+      </div>
+    </LinkedBlock>
+  {{/each}}
+  <Hds::Pagination::Numbered
+    class="has-top-margin-m has-bottom-margin-m"
+    @currentPage={{@messages.meta.currentPage}}
+    @currentPageSize={{@messages.meta.pageSize}}
+    @route="messages.index"
+    @showSizeSelector={{false}}
+    @totalItems={{@messages.meta.total}}
+    @queryFunction={{this.paginationQueryParams}}
+  />
+{{else}}
+  <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"
+      class="is-no-underline"
+      data-test-action-text="Create message"
+    />
+  </EmptyState>
+{{/if}}

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

@@ -0,0 +1,67 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+import { task } from 'ember-concurrency';
+import { dateFormat } from 'core/helpers/date-format';
+
+/**
+ * @module Page::MessagesList
+ * Page::MessagesList components are used to display list of messages.
+ * @example
+ * ```js
+ * <Page::MessagesList @messages={{this.messages}}  />
+ * ```
+ * @param {array} messages - array message objects
+ */
+
+export default class MessagesList extends Component {
+  @service store;
+
+  get getMessages() {
+    return this.args.messages.map((message) => {
+      let badgeDisplayText = '';
+
+      if (message.active) {
+        if (message.endTime) {
+          badgeDisplayText = `Active until ${dateFormat([message.endTime, 'MMM d, yyyy hh:mm aaa'], {
+            withTimeZone: true,
+          })}`;
+        } else {
+          badgeDisplayText = 'Active';
+        }
+      } else {
+        if (message.isStartTimeAfterToday) {
+          badgeDisplayText = `Scheduled: ${dateFormat([message.startTime, 'MMM d, yyyy hh:mm aaa'], {
+            withTimeZone: true,
+          })}`;
+        } else {
+          badgeDisplayText = `Inactive:  ${dateFormat([message.startTime, 'MMM d, yyyy hh:mm aaa'], {
+            withTimeZone: true,
+          })}`;
+        }
+      }
+
+      message.badgeDisplayText = badgeDisplayText;
+      return message;
+    });
+  }
+
+  // callback from HDS pagination to set the queryParams page
+  get paginationQueryParams() {
+    return (page) => {
+      return {
+        page,
+      };
+    };
+  }
+
+  @task
+  *deleteMessage(message) {
+    this.store.clearDataset('config-ui/message');
+    yield message.destroyRecord(message.id);
+  }
+}

ui/lib/config-ui/addon/components/messages/tab-page-header.hbs

@@ -0,0 +1,52 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: BUSL-1.1
+~}}
+
+<PageHeader as |p|>
+  {{#if @breadcrumbs}}
+    <p.top>
+      <Page::Breadcrumbs @breadcrumbs={{@breadcrumbs}} />
+    </p.top>
+  {{/if}}
+  <p.levelLeft>
+    <Hds::Text::Display @tag="h2" @size="500" class="has-top-margin-xl">
+      Custom messages
+    </Hds::Text::Display>
+  </p.levelLeft>
+</PageHeader>
+
+<div class="tabs-container box is-bottomless is-marginless is-paddingless">
+  <nav class="tabs" aria-label="custom-messages">
+    <ul>
+      {{! Explicitly setting page to 1 here since we want to reset the page param on transition}}
+      <LinkTo
+        class={{if @authenticated "active"}}
+        @route="messages"
+        @query={{hash authenticated=true page=1}}
+        data-test-custom-messages-tab="After user logs in"
+      >
+        After user logs in
+      </LinkTo>
+      <LinkTo
+        class={{unless @authenticated "active"}}
+        @route="messages"
+        @query={{hash authenticated=false page=1}}
+        data-test-custom-messages-tab="On login page"
+      >
+        On login page
+      </LinkTo>
+    </ul>
+  </nav>
+</div>
+
+{{#if (or (has-block "toolbarFilters") (has-block "toolbarActions"))}}
+  <Toolbar>
+    <ToolbarFilters>
+      {{yield to="toolbarFilters"}}
+    </ToolbarFilters>
+    <ToolbarActions>
+      {{yield to="toolbarActions"}}
+    </ToolbarActions>
+  </Toolbar>
+{{/if}}

ui/lib/config-ui/addon/controllers/messages/index.js

@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import Controller from '@ember/controller';
+export default class MessagesController extends Controller {
+  queryParams = ['authenticated', 'page'];
+
+  authenticated = true;
+  page = 1;
+}

ui/lib/config-ui/addon/routes/messages/index.js

@@ -4,5 +4,34 @@
  */
 
 import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service';
 
-export default class MessagesRoute extends Route {}
+export default class MessagesRoute extends Route {
+  @service store;
+
+  queryParams = {
+    page: {
+      refreshModel: true,
+    },
+    authenticated: {
+      refreshModel: true,
+    },
+  };
+
+  async model(params) {
+    try {
+      const { authenticated, page } = params;
+      return await this.store.lazyPaginatedQuery('config-ui/message', {
+        authenticated,
+        responsePath: 'data.keys',
+        page: page || 1,
+      });
+    } catch (e) {
+      if (e.httpStatus === 404) {
+        return [];
+      }
+
+      throw e;
+    }
+  }
+}

ui/lib/config-ui/addon/templates/messages/index.hbs

@@ -3,4 +3,4 @@
   SPDX-License-Identifier: BUSL-1.1
 ~}}
 
-Messages List View
+<Messages::Page::List @messages={{this.model}} @authenticated={{this.authenticated}} />