feat: New confirm action modal UI

app/components/pipeline/modal/confirm-action/component.js

@@ -0,0 +1,124 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { service } from '@ember/service';
+import {
+  buildPostBody,
+  capitalizeFirstLetter,
+  initializeParameters,
+  truncateMessage
+} from './util';
+
+export default class PipelineModalConfirmActionComponent extends Component {
+  @service shuttle;
+
+  @service session;
+
+  @tracked isAwaitingResponse = false;
+
+  @tracked wasActionSuccessful = false;
+
+  @tracked reason = '';
+
+  parameters;
+
+  constructor() {
+    super(...arguments);
+
+    this.parameters = initializeParameters(this.args.event);
+  }
+
+  get action() {
+    return this.args.job.status ? 'restart' : 'start';
+  }
+
+  get truncatedMessage() {
+    return truncateMessage(this.args.event.commit.message);
+  }
+
+  get isLatestCommitEvent() {
+    return this.args.event.sha === this.args.latestCommitEvent.sha;
+  }
+
+  get commitUrl() {
+    return this.args.event.commit.url;
+  }
+
+  get truncatedSha() {
+    return this.args.event.sha.substring(0, 7);
+  }
+
+  get isLatestNonPrCommitEvent() {
+    return this.args.event.type === 'pr' ? true : this.isLatestCommitEvent;
+  }
+
+  get isFrozen() {
+    return this.args.job.status === 'FROZEN';
+  }
+
+  get isParameterized() {
+    if (this.args.pipeline.parameters) {
+      return Object.keys(this.args.pipeline.parameters).length > 0;
+    }
+
+    return false;
+  }
+
+  get isSubmitButtonDisabled() {
+    if (this.wasActionSuccessful || this.isAwaitingResponse) {
+      return true;
+    }
+
+    if (this.isFrozen) {
+      return this.reason.length === 0;
+    }
+
+    return false;
+  }
+
+  get pendingAction() {
+    return `${capitalizeFirstLetter(this.action)}ing...`;
+  }
+
+  get completedAction() {
+    return this.wasActionSuccessful
+      ? `${capitalizeFirstLetter(this.action)}ed`
+      : 'Yes';
+  }
+
+  @action
+  onUpdateParameters(parameters) {
+    this.parameters = parameters;
+  }
+
+  @action
+  async startBuild() {
+    this.isAwaitingResponse = true;
+
+    const data = buildPostBody(
+      this.session.data.authenticated.username,
+      this.args.pipeline.id,
+      this.args.job,
+      this.args.event,
+      this.parameters,
+      this.isFrozen,
+      this.reason
+    );
+
+    return new Promise((resolve, reject) => {
+      this.shuttle
+        .fetchFromApi('POST', '/events', data)
+        .then(() => {
+          this.wasActionSuccessful = true;
+          resolve();
+        })
+        .catch(err => {
+          this.wasActionSuccessful = false;
+          reject(err);
+        })
+        .finally(() => {
+          this.isAwaitingResponse = false;
+        });
+    });
+  }
+}

app/components/pipeline/modal/confirm-action/styles.scss

@@ -0,0 +1,73 @@
+@use 'screwdriver-colors' as colors;
+
+@mixin styles {
+  #ember-bootstrap-wormhole {
+    .modal.confirm-action {
+      .modal-dialog {
+        max-width: 50%;
+
+        .modal-body {
+          display: flex;
+          flex-direction: column;
+
+          .modal-title {
+            font-size: 1.75rem;
+            padding-bottom: 0.75rem;
+          }
+
+          .alert {
+            margin-bottom: 0.5rem;
+          }
+
+          .frozen-reason {
+            display: flex;
+            justify-content: space-between;
+
+            label {
+              margin: auto;
+              padding-right: 0.25rem;
+            }
+
+            input {
+              flex: 1;
+              border-radius: 4px;
+              border: 1px solid colors.$sd-text-med;
+              padding-left: 8px;
+            }
+          }
+
+          .pipeline-parameters {
+            padding-top: 2.5rem;
+          }
+        }
+
+        .modal-footer {
+          display: flex;
+          justify-content: space-between;
+
+          button {
+            width: 10rem;
+
+            color: colors.$sd-link;
+            border-color: colors.$sd-link;
+
+            &:hover {
+              background-color: colors.$sd-info-bg;
+            }
+
+            &.confirm {
+              color: colors.$sd-white;
+              background-color: colors.$sd-running;
+              border-color: colors.$sd-running;
+
+              &:hover {
+                background-color: colors.$sd-link;
+                border-color: colors.$sd-link;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

app/components/pipeline/modal/confirm-action/template.hbs

@@ -0,0 +1,66 @@
+<BsModal
+  class="confirm-action"
+  @onHide={{fn @closeModal}}
+  as |modal|
+>
+  <modal.body>
+    <div class="modal-title">Are you sure you want to {{this.action}}?</div>
+    <div id="confirm-action-job">Job: <code>{{@job.name}}</code></div>
+    <div id="confirm-action-commit">
+      Commit: <code>{{this.truncatedMessage}}</code>
+      <a
+        id="confirm-action-commit-link"
+        class={{if this.isLatestCommitEvent "latest-commit"}}
+        href={{this.commitUrl}}
+      >
+        #{{this.truncatedSha}}
+      </a>
+      {{#unless this.isLatestNonPrCommitEvent}}
+        <div class="alert alert-warning">
+          <FaIcon @icon="exclamation-triangle" />
+          This is <strong>NOT</strong> the latest commit.
+        </div>
+      {{/unless}}
+    </div>
+
+    {{#if this.isFrozen}}
+      <div class="frozen-reason">
+        <label>
+          Reason:
+        </label>
+        <Input @type="text" @value={{this.reason}} placeholder="Please enter a reason"/>
+      </div>
+    {{/if}}
+
+    {{#if this.isParameterized}}
+      <Pipeline::Parameters
+        @action={{this.action}}
+        @job={{@job}}
+        @event={{@event}}
+        @pipeline={{@pipeline}}
+        @jobs={{@jobs}}
+        @onUpdateParameters={{this.onUpdateParameters}}
+      />
+    {{/if}}
+  </modal.body>
+  <modal.footer>
+    <BsButton
+      class="confirm"
+      disabled={{this.isSubmitButtonDisabled}}
+      @defaultText="Yes"
+      @pendingText={{this.pendingAction}}
+      @fulfilledText={{this.completedAction}}
+      @onClick={{this.startBuild}}
+    />
+    <BsButton
+      @outline={{true}}
+      @onClick={{modal.close}}
+    >
+      {{#if this.wasActionSuccessful}}
+        Close
+      {{else}}
+        No
+      {{/if}}
+    </BsButton>
+  </modal.footer>
+</BsModal>

app/components/pipeline/modal/confirm-action/util.js

@@ -0,0 +1,80 @@
+import { flattenParameters } from 'screwdriver-ui/utils/pipeline/parameters';
+
+/**
+ * Initialize parameters from an event API response object
+ * @param event
+ * @returns {undefined|*}
+ */
+export function initializeParameters(event) {
+  if (event.meta?.parameters && event.meta.parameters.length > 0) {
+    return flattenParameters(event.meta.parameters);
+  }
+
+  return undefined;
+}
+
+/**
+ * Truncate commit message to 150 characters
+ * @param commitMessage
+ * @returns {string|*}
+ */
+export function truncateMessage(commitMessage) {
+  const cutOff = 150;
+
+  return commitMessage.length > cutOff
+    ? `${commitMessage.substring(0, cutOff)}...`
+    : commitMessage;
+}
+
+/**
+ * Capitalize first letter of string
+ * @param string
+ * @returns {string}
+ */
+export function capitalizeFirstLetter(string) {
+  return string.charAt(0).toUpperCase() + string.slice(1);
+}
+
+/**
+ * Build post body for starting a job
+ * @param username
+ * @param pipeline
+ * @param job
+ * @param event
+ * @param parameters
+ * @param isFrozen
+ * @param reason
+ * @returns {{causeMessage: string, pipelineId}}
+ */
+export function buildPostBody(
+  username,
+  pipelineId,
+  job,
+  event,
+  parameters,
+  isFrozen,
+  reason
+) {
+  const data = {
+    pipelineId,
+    causeMessage: `Manually started by ${username}`
+  };
+
+  if (job.status) {
+    data.startFrom = job.name;
+    data.groupEventId = event.groupEventId;
+    data.parentEventId = event.id;
+  } else {
+    data.startFrom = '~commit';
+  }
+
+  if (parameters) {
+    data.meta = { parameters };
+  }
+
+  if (isFrozen) {
+    data.causeMessage = `[force start]${reason}`;
+  }
+
+  return data;
+}

app/components/pipeline/styles.scss

@@ -1,9 +1,11 @@
 @use 'nav/styles' as nav;
+@use 'modal/confirm-action/styles' as confirm-action-modal;
 @use 'modal/toggle-job/styles' as toggle-job;
 @use 'parameters/styles' as parameters;
 
 @mixin styles {
   @include nav.styles;
+  @include confirm-action-modal.styles;
   @include toggle-job.styles;
   @include parameters.styles;
 }

app/styles/app.scss

@@ -1,4 +1,5 @@
 @use 'variables';
+@use 'bootstrap-modal' as bootstrapModal;
 @use 'components/styles' as components;
 @use 'v2/pipeline/styles' as pipeline;
 
@@ -204,6 +205,7 @@ html {
     font-family: Helvetica, Arial, sans-serif;
     font-weight: variables.$weight-normal;
 
+    @include bootstrapModal.styles;
     @include components.styles;
     @include pipeline.styles;
   }

app/styles/bootstrap-modal.scss

@@ -0,0 +1,15 @@
+@use 'screwdriver-colors' as colors;
+
+@mixin styles {
+  #ember-bootstrap-wormhole {
+    .modal-backdrop.fade.show {
+      background-color: rgba(128, 128, 128, 0.77);
+      opacity: 1;
+    }
+
+    .modal-content {
+      border-radius: 8px;
+      box-shadow: 0 0 10px colors.$sd-black;
+    }
+  }
+}