UI: [VAULT-21532] Create message

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

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

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

@@ -110,7 +110,6 @@
     <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

@@ -2,21 +2,91 @@
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: BUSL-1.1
  */
-
 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';
+import { isAfter, format, addDays, startOfDay } from 'date-fns';
+import { datetimeLocalStringFormat, parseAPITimestamp } from 'core/utils/date-formatters';
+import { withModelValidations } from 'vault/decorators/model-validations';
+import { withFormFields } from 'vault/decorators/model-form-fields';
+
+const validations = {
+  title: [{ type: 'presence', message: 'Title is required.' }],
+  message: [{ type: 'presence', message: 'Message is required.' }],
+};
 
+@withFormFields(['authenticated', 'type', 'title', 'message', 'linkTitle', 'startTime', 'endTime'])
+@withModelValidations(validations)
 export default class MessageModel extends Model {
   @attr('boolean') active;
-  @attr('string') type;
-  @attr('boolean') authenticated;
-  @attr('string') title;
-  @attr('string') message;
-  @attr('object') link;
-  @attr('string') startTime;
-  @attr('string') endTime;
+  @attr('string', {
+    label: 'Type',
+    editType: 'radio',
+    possibleValues: [
+      {
+        label: 'Alert message',
+        subText:
+          'A banner that appears on the top of every page to display brief but high-signal messages like an update or system alert.',
+        value: 'banner',
+      },
+      {
+        label: 'Modal',
+        subText: 'A pop-up window used to bring immediate attention for important notifications or actions.',
+        value: 'modal',
+      },
+    ],
+    defaultValue: 'banner',
+  })
+  type;
+  // The authenticated attr is a boolean. The authenticatedString getter and setter is used only in forms to get and set the boolean via
+  // strings values. The server and query params expects the attr to be boolean values.
+  @attr({
+    label: 'Where should we display this message?',
+    editType: 'radio',
+    fieldValue: 'authenticatedString',
+    possibleValues: [
+      {
+        label: 'After the user logs in',
+        subText: 'Display to users after they have successfully logged in to Vault.',
+        value: 'authenticated',
+      },
+      {
+        label: 'On the login page',
+        subText: 'Display to users on the login page before they have authenticated.',
+        value: 'unauthenticated',
+      },
+    ],
+    defaultValue: true,
+  })
+  authenticated;
+
+  get authenticatedString() {
+    return this.authenticated ? 'authenticated' : 'unauthenticated';
+  }
+
+  set authenticatedString(value) {
+    this.authenticated = value === 'authenticated' ? true : false;
+  }
+
+  @attr('string')
+  title;
+  @attr('string', {
+    editType: 'textarea',
+  })
+  message;
+  @attr('date', {
+    editType: 'dateTimeLocal',
+    label: 'Message starts',
+    subText: 'Defaults to 12:00 a.m. the following day (local timezone).',
+    defaultValue: format(addDays(startOfDay(new Date() || this.startTime), 1), datetimeLocalStringFormat),
+  })
+  startTime;
+  @attr('date', { editType: 'yield', label: 'Message expires' }) endTime;
+
+  // the api returns link as an object with title and href as keys, but we separate the link key/values into
+  // different attributes to easily show link title and href fields on the create form. In our serializer,
+  // we send the link attribute in to the correct format (as an object) to the server.
+  @attr('string') linkTitle;
+  @attr('string') linkHref;
 
   // date helpers
   get isStartTimeAfterToday() {

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

@@ -3,15 +3,37 @@
  * SPDX-License-Identifier: BUSL-1.1
  */
 
+import { encodeString } from 'core/utils/b64';
 import ApplicationSerializer from '../application';
 
 export default class MessageSerializer extends ApplicationSerializer {
   primaryKey = 'id';
 
+  serialize() {
+    const json = super.serialize(...arguments);
+    json.message = encodeString(json.message);
+    json.link = {
+      title: json.link_title,
+      href: json.link_href,
+    };
+
+    delete json.link_title;
+    delete json.link_href;
+
+    return json;
+  }
+
   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] }));
+        return payload.data.keys.map((key) => {
+          return {
+            id: key,
+            linkTitle: payload.data.key_info.link?.title,
+            linkHref: payload.data.key_info.link?.href,
+            ...payload.data.key_info[key],
+          };
+        });
       }
       Object.assign(payload, payload.data);
       delete payload.data;

ui/lib/config-ui/addon/components/messages/message-expiration-date-form.hbs

@@ -0,0 +1,54 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: BUSL-1.1
+~}}
+
+<div class="has-top-padding-xs has-bottom-padding-s is-narrow is-flex-align-baseline">
+  <RadioButton
+    class="radio"
+    name={{@attr.name}}
+    id="never"
+    value="never"
+    @value="never"
+    @onChange={{fn (mut @message.endTime) ""}}
+    @groupValue={{this.groupValue}}
+  />
+  <label for="never" class="has-left-margin-xs has-text-black is-size-7">
+    <span class="has-left-margin-xs">
+      Never
+    </span>
+    <p class="has-left-margin-xs has-text-grey is-size-8">
+      This message will never expire unless manually deleted by an operator.
+    </p>
+  </label>
+</div>
+
+<div class="has-top-padding-xs has-bottom-padding-s is-narrow is-flex-align-baseline">
+  <RadioButton
+    class="radio"
+    name={{@attr.name}}
+    id="specificDate"
+    value="specificDate"
+    @value="specificDate"
+    @onChange={{fn (mut @message.endTime) this.formDateTime}}
+    @groupValue={{this.groupValue}}
+  />
+  <label for="specificDate" class="has-left-margin-xs has-text-black is-size-7">
+    <span class="has-left-margin-xs">
+      Specific date
+    </span>
+    <p class="has-left-margin-xs has-text-grey is-size-8">
+      This message will expire at midnight (local timezone) at the specific date.
+    </p>
+    <div class="has-left-margin-xs control">
+      <Input
+        @type="datetime-local"
+        @value={{if this.formDateTime (date-format this.formDateTime this.datetimeLocalStringFormat) ""}}
+        class="input has-top-margin-xs is-auto-width"
+        name="endTime"
+        data-test-input="endTime"
+        {{on "change" (pipe (pick "target.value") (fn (mut @message.endTime)))}}
+      />
+    </div>
+  </label>
+</div>

ui/lib/config-ui/addon/components/messages/message-expiration-date-form.js

@@ -0,0 +1,33 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { datetimeLocalStringFormat } from 'core/utils/date-formatters';
+
+/**
+ * @module Messages::MessageExpirationDateForm
+ * Messages::MessageExpirationDateForm components are used to display list of messages.
+ * @example
+ * ```js
+ * <Messages::MessageExpirationDateForm @message={{this.message}} @attr={{attr}} />
+ * ```
+ * @param {array} messages - array message objects
+ */
+
+export default class MessageExpirationDateForm extends Component {
+  datetimeLocalStringFormat = datetimeLocalStringFormat;
+  @tracked groupValue = 'never';
+  @tracked formDateTime = '';
+
+  constructor() {
+    super(...arguments);
+
+    if (this.args.message.endTime) {
+      this.groupValue = 'specificDate';
+      this.formDateTime = this.args.message.endTime;
+    }
+  }
+}

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

@@ -0,0 +1,79 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: BUSL-1.1
+~}}
+<Messages::TabPageHeader
+  @authenticated={{@message.authenticated}}
+  @pageTitle="{{if @message.isNew 'Create' 'Edit'}} message"
+  @breadcrumbs={{this.breadcrumbs}}
+/>
+
+<form id="message-create-edit-form" {{on "submit" (perform this.save)}} data-test-form="create-and-edit">
+  <div class="box is-sideless is-fullwidth is-marginless has-top-padding-s">
+    <Hds::Text::Body @tag="p" class="has-bottom-margin-l" data-test-form-subtext>
+      {{if @message.isNew "Create" "Edit"}}
+      a custom message for all users when they access a Vault system via the UI.
+    </Hds::Text::Body>
+
+    <MessageError @errorMessage={{this.errorBanner}} class="has-top-margin-s" />
+
+    {{#each @message.formFields as |attr|}}
+      {{#if (eq attr.name "linkTitle")}}
+        <div class="field has-bottom-margin-m">
+          <label for="link" class="is-label">Link
+            <span class="has-text-grey-400 has-font-weight-normal">(optional)</span></label>
+          <div class="control is-flex-between has-gap-m">
+            <Input
+              @type="text"
+              @value={{@message.linkTitle}}
+              placeholder="Display text (e.g. Learn more)"
+              id="link-title"
+              class="input"
+              data-test-input={{attr.name}}
+              {{on "input" (pipe (pick "target.value") (fn (mut @message.linkTitle)))}}
+              aria-label="Link title"
+            />
+            <Input
+              @type="text"
+              @value={{@message.linkHref}}
+              placeholder="Paste URL (e.g. www.learnmore.com)"
+              id="link-href"
+              class="input"
+              data-test-input="linkHref"
+              {{on "input" (pipe (pick "target.value") (fn (mut @message.linkHref)))}}
+              aria-label="Link href"
+            />
+          </div>
+        </div>
+      {{else}}
+        <FormField
+          @attr={{attr}}
+          @model={{@message}}
+          @modelValidations={{this.modelValidations}}
+          class="has-bottom-margin-m"
+        >
+          <Messages::MessageExpirationDateForm @message={{@message}} @attr={{attr}} />
+        </FormField>
+      {{/if}}
+    {{/each}}
+
+    <Hds::ButtonSet class="has-top-margin-s has-bottom-margin-m has-top-margin-xl">
+      {{! TODO: VAULT-21533 preview modal }}
+      <Hds::Button @text="Preview" @color="tertiary" @icon="eye" />
+
+      <Hds::Button
+        @text="{{if @message.isNew 'Create' 'Edit'}} message"
+        disabled={{(or this.invalidFormMessage this.save.isRunning)}}
+        data-test-button="create-message"
+        type="submit"
+      />
+
+      <Hds::Button
+        @text="Cancel"
+        @color="secondary"
+        @route="messages"
+        @query={{hash authenticated=@message.authenticated}}
+      />
+    </Hds::ButtonSet>
+  </div>
+</form>