ui: incorporate push status into <AppItem::Build>

ui/app/components/app-item/build.hbs

@@ -1,34 +1,36 @@
-<li class="app-item">
+<li class="app-item" data-test-app-item-build>
  <LinkTo @route="workspace.projects.project.app.build" @models={{array @build.sequence}}>
- <p>
- <b class="badge badge--version">v{{@build.sequence}}</b>
- </p>
+ <b class="badge badge--version">v{{@build.sequence}}</b>
  <small class="app-item__meta__secondary">
- <Pds::Icon @type={{icon-for-component @build.component.name}} class="icon" />
- <span>{{if (eq @model.status.state 1) 'Building' 'Built'}} with
- <b>{{titleize @build.component.name}}</b>
- {{#if (eq @build.status.state 1)}}
- (Started {{date-format-distance-to-now @build.status.startTime.seconds }})
- {{else}}
- {{date-format-distance-to-now @build.status.completeTime.seconds }}
- {{/if}}
- </span>
+ {{#let (or @build.pushedArtifact @build) as |operation|}}
+ <Pds::Icon
+ @type={{icon-for-component operation.component.name}}
+ class="icon"
+ />
+
+ <span>
+ {{t
+ (concat
+ "app_item_build.label.prefix"
+ ".type-" operation.component.type
+ ".state-" operation.status.state
+ )
+ }}
+ <b>{{component-name operation.component.name}}</b>
+ <OperationStatusIndicator @status={{operation.status}} @matchTypography={{true}} />
+ </span>
+ {{/let}}
  </small>
  </LinkTo>
- {{#if (eq @build.status.state 1)}}
- <b class="badge">
+
+ {{#if (and (eq @build.status.state 2) (eq @build.pushedArtifact.status.state 2))}}
+ <b class="badge badge--info">
  <Pds::Icon @type="clock-outline" class="icon" />
- <span>Building...</span>
- </b>
- {{else if (eq @build.status.state 2)}}
- <b class="badge badge--success">
- <Pds::Icon @type="check-plain" class="icon" />
- <span>Built in {{date-format-distance @build.status.startTime.seconds @build.status.completeTime.seconds }}</span>
- </b>
- {{else if (eq @build.status.state 3)}}
- <b class="badge badge--error">
- <Pds::Icon @type="alert-triangle" class="icon" />
- <span>Build failed</span>
+ <span>
+ {{t "app_item_build.built_in"
+ duration=(date-format-distance @build.status.startTime.seconds @build.status.completeTime.seconds)
+ }}
+ </span>
  </b>
  {{/if}}
 </li>

ui/tests/integration/components/app-item/build-test.ts

@@ -0,0 +1,91 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import hbs from 'htmlbars-inline-precompile';
+import { getUnixTime, subMinutes } from 'date-fns';
+import { a11yAudit } from 'ember-a11y-testing/test-support';
+import { Timestamp } from 'google-protobuf/google/protobuf/timestamp_pb';
+
+module('Integration | Component | app-item/build', function (hooks) {
+ setupRenderingTest(hooks);
+
+ test('with a build and a push', async function (assert) {
+ this.set('build', {
+ sequence: 3,
+ status: {
+ state: 2,
+ startTime: minutesAgo(3),
+ completeTime: minutesAgo(2),
+ },
+ component: {
+ type: 1,
+ name: 'docker',
+ },
+ pushedArtifact: {
+ component: {
+ type: 2,
+ name: 'docker',
+ },
+ status: {
+ state: 2,
+ startTime: minutesAgo(2),
+ completeTime: minutesAgo(1),
+ },
+ },
+ });
+
+ await render(hbs`
+ <ul>
+ <AppItem::Build @build={{this.build}} />
+ </ul>
+ `);
+ await a11yAudit();
+
+ assert.dom('[data-test-app-item-build]').includesText('v3');
+ assert.dom('[data-test-icon-type="logo-docker-color"]').exists();
+ assert.dom('[data-test-app-item-build]').includesText('Pushed to Docker');
+ assert.dom('[data-test-operation-status-indicator="success"]').exists();
+ assert.dom('[data-test-app-item-build]').includesText('1 minute ago');
+ assert.dom('[data-test-app-item-build]').includesText('Built in 1 minute');
+ });
+
+ test('with no push', async function (assert) {
+ this.set('build', {
+ sequence: 3,
+ status: {
+ state: 2,
+ startTime: minutesAgo(3),
+ completeTime: minutesAgo(2),
+ },
+ component: {
+ type: 1,
+ name: 'docker',
+ },
+ pushedArtifact: null,
+ });
+
+ await render(hbs`
+ <ul>
+ <AppItem::Build @build={{this.build}} />
+ </ul>
+ `);
+ await a11yAudit();
+
+ assert.dom('[data-test-app-item-build]').includesText('v3');
+ assert.dom('[data-test-icon-type="logo-docker-color"]').exists();
+ assert.dom('[data-test-app-item-build]').includesText('Built with Docker');
+ assert.dom('[data-test-operation-status-indicator="success"]').exists();
+ assert.dom('[data-test-app-item-build]').includesText('2 minutes ago');
+ });
+});
+
+function minutesAgo(n: number): Timestamp.AsObject {
+ let now = new Date();
+ let date = subMinutes(now, n);
+ let result = {
+ seconds: getUnixTime(date),
+ nanos: 0,
+ };
+
+ return result;
+}

ui/translations/en-us.yaml

@@ -162,3 +162,19 @@ app_card_build:
  state-1: Pushing to # RUNNING
  state-2: Pushed to # SUCCESS
  state-3: Failed to push to # ERROR
+
+app_item_build:
+ label:
+ prefix:
+ type-1: # BUILDER
+ state-0: Building with # UNKNOWN
+ state-1: Building with # RUNNING
+ state-2: Built with # SUCCESS
+ state-3: Failed to build with # ERROR
+ type-2: # REGISTRY
+ state-0: Pushing to # UNKNOWN
+ state-1: Pushing to # RUNNING
+ state-2: Pushed to # SUCCESS
+ state-3: Failed to push to # ERROR
+ built_in:
+ Built in {duration}