datahub/datahub-web/@datahub/shared/app/templates/components/change-management/add-change-log-modal.hbs

<ModalDialog
  @overlayClass="notification-overlay"
  @containerClassNames="{{this.baseModalClass}}__modal notification-confirm-modal"
  @onClose={{fn this.onResetModal}}
>
  <header class="notification-confirm-modal__header {{this.baseModalClass}}__header">
    <h3 class="{{this.baseModalClass}}__title">
      Add change log
    </h3>
    <button
      type="button"
      class="{{this.baseModalClass}}__close"
      {{on "click" (fn this.onResetModal)}}
    >
      &times;
    </button>
  </header>
  <section class="notification-confirm-modal__content {{this.baseModalClass}}__content">
    {{#if this.isDisplayingPreviewModal}}
      <div class="{{this.baseModalClass}}__item">
        <p class="{{this.baseModalClass}}__label {{this.baseModalClass}}__label-bold">
          {{this.titleText}}
        </p>
        <ul class="{{this.baseModalClass}}__item {{this.baseModalClass}}__list">
          <li>Dataset Followers ({{this.emailRecipientsCount.followers}})</li>
          <li>All Owners of the dataset ({{this.emailRecipientsCount.owners}})</li>
          <li>Individual email recipients ({{this.emailRecipientsCount.individualRecipients}})</li>
          <li>Group email distribution list ({{this.emailRecipientsCount.distributionLists}})</li>
        </ul>
      </div>
      <div class="{{this.baseModalClass}}__item">
        <p class="{{this.baseModalClass}}__label {{this.baseModalClass}}__label-bold">
          Add Additional email recipients (optional)
        </p>
        <p class="{{this.baseModalClass}}__label">
          Add Group email distribution list
        </p>
        <div class="{{this.baseModalClass}}__tag-input">
          {{#each this.distributionLists as |distributionList index|}}
            <NachoPillInput
              class="{{this.baseModalClass}}__pill"
              @value={{distributionList}}
              @onDelete={{fn this.removeRecipient this.recipientType.distributionList index}}
            />
          {{/each}}
          <NachoPillInput
            class="{{this.baseModalClass}}__pill"
            @placeholder="e.g.,datahub-dev"
            @onComplete={{fn this.addRecipient this.recipientType.distributionList}}
          />
        </div>
        <p class="{{this.baseModalClass}}__label">
          Add Individual email recipients
        </p>
        <div class="{{this.baseModalClass}}__tag-input">
          {{#each this.individualRecipients as |individualRecipient index|}}
            <NachoPillInput
              class="{{this.baseModalClass}}__pill"
              @value={{individualRecipient}}
              @onDelete={{fn this.removeRecipient this.recipientType.individualRecipient index}}
            />
          {{/each}}
          <NachoPillInput
            class="{{this.baseModalClass}}__pill"
            @placeholder="e.g.,jweiner"
            @onComplete={{fn this.addRecipient this.recipientType.individualRecipient}}
          />
        </div>
      </div>
    {{else if this.isSendingEmailOnly}}
      <ChangeManagement::ReadOnlyEmailContent
        @subject={{@currentChangeLog.subject}}
        @content={{@currentChangeLog.content}}
      />
    {{else}}
      <div class="{{this.baseModalClass}}__item">
        <p class="{{this.baseModalClass}}__label">Subject</p>
        <Textarea
          class="{{this.baseModalClass}}__text-input {{this.baseModalClass}}__text-input-subject"
          @maxlength={{this.maxCharSubject}}
          @value={{this.editableChangeset.subject}}
          @placeholder="Headline of the change"
        />
        <p class="{{this.baseModalClass}}__text-input-validation">
          {{! render validation messages for subject}}
          <ul class="{{this.baseModalClass}}__text-input-error">
            {{#with this.editableChangeset.error as |error|}}
              {{#let (get error "subject.validation") as |validations|}}
                {{#each validations as |validation|}}
                  <li>
                    {{validation}}
                  </li>
                {{/each}}
              {{/let}}
            {{/with}}
          </ul>
          <span class="{{this.baseModalClass}}__text-input-validation-count">
            {{this.editableChangeset.subject.length}}/{{this.maxCharSubject}}
          </span>
        </p>
      </div>

      <div class="{{this.baseModalClass}}__item">
        <p class="{{this.baseModalClass}}__label">Content</p>
        <Textarea
          class="{{this.baseModalClass}}__text-input {{this.baseModalClass}}__text-input-content"
          @maxlength={{this.maxCharContent}}
          @value={{this.editableChangeset.content}}
          @placeholder="Details you wish to include in the log"
        />
        <p class="{{this.baseModalClass}}__text-input-validation">
          {{! render validation messages for content/body}}
          <ul class="{{this.baseModalClass}}__text-input-error">
            {{#with this.editableChangeset.error as |error|}}
              {{#let (get error "content.validation") as |validations|}}
                {{#each validations as |validation|}}
                  <li>
                    {{validation}}
                  </li>
                {{/each}}
              {{/let}}
            {{/with}}
          </ul>
          <span class="{{this.baseModalClass}}__text-input-validation-count">
            {{this.editableChangeset.content.length}}/{{this.maxCharContent}}
          </span>
        </p>
      </div>
      <div class="{{this.baseModalClass}}__item">
        <Input
          id="send-change-log-email"
          name="change-log-checkbox"
          type="checkbox"
          checked={{readonly this.editableChangeset.sendEmail}}
          {{on "change" (fn this.onSendEmailSelected)}}
          {{track-control-interaction type="SHORT_PRESS" name="DatahubChangeManagementSaveAndNotifyCheckbox"}}
        />
        <label
          class="{{this.baseModalClass}}__label"
          for="send-change-log-email"
        >
          Send Email
        </label>
      </div>
    {{/if}}
  </section>
  <section class="notification-confirm-modal__footer {{this.baseModalClass}}__actions">
    <div>
      {{#if this.isDisplayingPreviewModal}}
      <button
        type="button"
        class="nacho-button--large nacho-button--secondary {{this.baseModalClass}}__action"
        {{on "click" (fn this.onBackToAddModal)}}
      >
        Back
      </button>
      {{/if}}
    </div>
    <div>
      <button
        type="button"
        class="nacho-button--large nacho-button--secondary {{this.baseModalClass}}__action"
        {{on "click" (fn this.onResetModal)}}
      >
      Cancel
      </button>
      <button
        type="button"
        class="nacho-button--large nacho-button--primary {{this.baseModalClass}}__action"
        disabled={{this.isSaveDisabled}}
        {{on "click" (fn this.handleSaveOrNextClick)}}
      >
        {{#if this.saveChangeLogTask.isRunning}}
          <NachoAnimation::PendulumEllipsis />
        {{else}}
          {{this.saveOrNextButtonText}}
        {{/if}}
      </button>
    </div>

  </section>
</ModalDialog>