Display commit information if available

.changelog/2025.txt

@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: Add git commit SHAs to operations in the browser UI
+```

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

@@ -10,6 +10,7 @@
  <b class="badge badge--version">v{{@model.sequence}}</b>
  </LinkTo>
  <OperationStatusIndicator @status={{or @model.pushedArtifact.status @model.status}} />
+ <GitCommit @commit={{@model.preload.jobDataSourceRef.git.commit}}/>
  </:meta-primary>
 
  <:meta-secondary>

ui/app/components/app-card/deployment.hbs

@@ -10,6 +10,7 @@
  <b class="badge badge--version">v{{@model.sequence}}</b>
  </LinkTo>
  <OperationStatusIndicator @status={{@model.status}} />
+ <GitCommit @commit={{@model.preload.jobDataSourceRef.git.commit}}/>
  </:meta-primary>
 
  <:meta-secondary>

ui/app/components/app-card/release.hbs

@@ -10,6 +10,7 @@
  <b class="badge badge--version">v{{@model.sequence}}</b>
  </LinkTo>
  <OperationStatusIndicator @status={{@model.status}} />
+ <GitCommit @commit={{@model.preload.jobDataSourceRef.git.commit}}/>
  </:meta-primary>
 
  <:meta-secondary>

ui/app/components/git-commit.hbs

@@ -0,0 +1,8 @@
+{{#if @commit}}
+ <span class="git-commit" title="Triggered by commit: {{@commit}}">
+ <CopyButton @clipboardText={{@commit}}>
+ <Pds::Icon @type="git-commit"/><span class="git-commit__sha">{{truncate-commit @commit}}</span>
+ </CopyButton>
+ </span>
+{{/if}}
+

ui/app/helpers/truncate-commit.ts

@@ -0,0 +1,3 @@
+import { helper } from '@ember/component/helper';
+
+export default helper(([str]: string[]) => str?.substr(0, 7));

ui/app/styles/app.scss

@@ -5,8 +5,11 @@
 @use 'pds/tokens/font';
 @use 'pds/core/typography/config' as Typography;
 @use 'utilities/animations';
+
 @use 'utilities/focus-ring';
 
+@import 'mixins/index';
+
 @import './variables';
 @import './layout';
 
@@ -22,6 +25,7 @@
 @import './components/copyable-code';
 @import './components/empty-state';
 @import './components/flash';
+@import './components/git-commit';
 @import './components/navigation/footer';
 @import './components/navigation/header';
 @import './components/icon-tile';

ui/app/styles/components/git-commit.scss

@@ -0,0 +1,19 @@
+.git-commit {
+ display: flex;
+ align-items: center;
+ @include Typography.Interface(S);
+ background: rgb(var(--badge));
+ color: rgb(var(--text-muted));
+ border-radius: 2px;
+ padding: scale.$sm-4 scale.$sm-4;
+ &__sha {
+ padding: 0 scale.$sm-4;
+ }
+ .copy-btn {
+ @include button-reset;
+ cursor: pointer;
+ &:active {
+ color: rgb(var(--text));
+ }
+ }
+}

ui/app/styles/mixins/_index.scss

@@ -0,0 +1 @@
+@import "button-reset";

ui/app/styles/mixins/button-reset.scss

@@ -0,0 +1,30 @@
+@mixin button-reset {
+ border: none;
+ margin: 0;
+ padding: 0;
+ width: auto;
+ overflow: visible;
+
+ background: transparent;
+
+ /* inherit font & color from ancestor */
+ color: inherit;
+ font: inherit;
+
+ /* Normalize `line-height`. Cannot be changed from `normal` in Firefox 4+. */
+ line-height: normal;
+
+ /* Corrects font smoothing for webkit */
+ -webkit-font-smoothing: inherit;
+ -moz-osx-font-smoothing: inherit;
+
+ /* Corrects inability to style clickable `input` types in iOS */
+ -webkit-appearance: none;
+
+ /* Remove excess padding and border in Firefox 4+ */
+ &::-moz-focus-inner {
+ border: 0;
+ padding: 0;
+ }
+
+}

ui/app/templates/workspace/projects/project/app/build.hbs

@@ -23,6 +23,11 @@
  <b>{{component-name operation.component.name}}</b>
  </span>
  </small>
+ {{#if @model.preload.jobDataSourceRef.git.commit}}
+ <small>
+ <GitCommit @commit={{@model.preload.jobDataSourceRef.git.commit}}/>
+ </small>
+ {{/if}}
  </div>
  <div class="actions">
  <Actions::Deploy @sequence={{@model.sequence}} />

ui/app/templates/workspace/projects/project/app/deployment.hbs

@@ -8,6 +8,11 @@
  <span>Deployed by <b>{{component-name @model.component.name}}</b>
  {{date-format-distance-to-now @model.status.startTime.seconds }}</span>
  </small>
+ {{#if @model.preload.jobDataSourceRef.git.commit}}
+ <small>
+ <GitCommit @commit={{@model.preload.jobDataSourceRef.git.commit}}/>
+ </small>
+ {{/if}}
  </div>
  <div class="actions">
  <div class="button-group">

ui/app/templates/workspace/projects/project/app/release.hbs

@@ -9,6 +9,11 @@
  <span>Released on <b>{{component-name @model.component.name}}</b>
  {{date-format-distance-to-now @model.status.startTime.seconds }}</span>
  </small>
+ {{#if @model.preload.jobDataSourceRef.git.commit}}
+ <small>
+ <GitCommit @commit={{@model.preload.jobDataSourceRef.git.commit}}/>
+ </small>
+ {{/if}}
  </div>
  <div class="actions">
  {{#if @isLatest}}