Merge pull request #2606 from hashicorp/ui/0.7-small-changes

ui: 0.7 CSS changes, details page updates

.changelog/2606.txt

@@ -0,0 +1,3 @@
+```release-note:feature
+ui: reformatted app overview page and header of artifact details page
+```

ui/app/components/git-commit.hbs

@@ -1,7 +1,9 @@
 {{#if @commit}}
  <span class="git-commit" title="Triggered by commit: {{@commit}}">
+ <Pds::Icon @type="git-commit"/>
+ {{!-- TODO: add git profile picture of user whose commit it was when possible --}}
  <CopyButton @clipboardText={{@commit}}>
-  <Pds::Icon @type="git-commit"/><span class="git-commit__sha">{{truncate-commit @commit}}</span>
+ <span class="git-commit__sha">{{truncate-commit @commit}}</span>
  </CopyButton>
  </span>
 {{/if}}

ui/app/components/panel-header.hbs

@@ -0,0 +1,25 @@
+{{#let
+ (hash
+ title=(or
+ (and (eq @artifact "deployment") "page.deployment.title")
+ (and (eq @artifact "build") "page.build.title")
+ (and (eq @artifact "release") "page.release.title")
+ "page.unavailable.title"
+ )
+ )
+ as |vars|
+}}
+<header data-test-panel-header class="panel-header {{@className}}">
+ <div class="title">
+ <h1>{{t vars.title}}
+ {{#if @sequence}}
+ <b class="badge badge--version">v{{@sequence}}</b>
+ {{/if}}
+ </h1>
+ {{yield to="title"}}
+ </div>
+ <div class="actions">
+ {{yield to="actions"}}
+ </div>
+</header>
+{{/let}}

ui/app/components/section.hbs

@@ -6,22 +6,26 @@
 >
  <div class="section__header">
  <h2 class="section__heading">
- <Pds::Icon
- @type={{if this.expanded "chevron-down" "chevron-right"}}
- />
+ {{#if this.isExpandable}}
+ <Pds::Icon
+ @type={{if this.expanded "chevron-down" "chevron-right"}}
+ />
+ {{/if}}
  <span>
  {{yield to="heading"}}
  </span>
  </h2>
 
- <button
- data-test-section-toggle
- type="button"
- class="section__toggle"
- title={{if this.expanded (t "section.collapse") (t "section.expand")}}
- aria-expanded={{if this.expanded "true" "false"}}
- {{on "click" this.toggleExpanded}}
- ></button>
+ {{#if this.isExpandable}}
+ <button
+ data-test-section-toggle
+ type="button"
+ class="section__toggle"
+ title={{if this.expanded (t "section.collapse") (t "section.expand")}}
+ aria-expanded={{if this.expanded "true" "false"}}
+ {{on "click" this.toggleExpanded}}
+ ></button>
+ {{/if}}
  </div>
 
  {{#if this.expanded}}

ui/app/components/section.ts

@@ -4,11 +4,16 @@ import { action } from '@ember/object';
 
 type Args = {
  expanded?: boolean;
+ isExpandable?: boolean;
 };
 
 export default class extends Component<Args> {
  @tracked expanded = this.args.expanded ?? true;
 
+ get isExpandable(): boolean {
+ return this.args.isExpandable ?? true;
+ }
+
  @action
  toggleExpanded(): void {
  this.expanded = !this.expanded;

ui/app/components/status-report-meta-table/index.hbs

@@ -1,35 +1,60 @@
+{{#let
+ (hash
+ shouldRenderHealthAndTag=(and
+ (or
+ (eq @artifactType "Deployment")
+ (eq @artifactType "Release")
+ )
+ @model.statusReport
+ )
+ shouldRenderCommit=@model.preload.jobDataSourceRef.git.commit
+ )
+ as |vars|
+}}
 <div class="artifact-overview">
  <table>
  <tbody>
- {{#if @model.statusReport}}
- <tr>
- <th scope="row">{{t "page.deployment.overview.health-check"}}</th>
- <td>
- <div class="status-indicator">
- <StatusReportIndicator @statusReport={{@model.statusReport}} /> &nbsp;
- <Pds::Button
- @variant="ghost"
- @iconStart="refresh-default"
- class="refresh-health-check-button"
- disabled={{this.isRefreshRunning}}
- {{on "click" this.refreshHealthCheck}}
- >
- {{t "page.deployment.overview.re-run-health-check"}}
- </Pds::Button>
- </div>
- </td>
- </tr>
+ {{#if (or (has-block) vars.shouldRenderCommit vars.shouldRenderHealthAndTag)}}
+ {{yield}}
+ {{else}}
+ {{t "page.artifact.overview.unavailable"}}
+ {{/if}}
+ {{#if vars.shouldRenderHealthAndTag}}
+ <tr>
+ <th scope="row">{{t "page.artifact.overview.health-check"}}</th>
+ <td>
+ <div class="status-indicator">
+ <StatusReportIndicator @statusReport={{@model.statusReport}} /> &nbsp;
+ <Pds::Button
+ @variant="ghost"
+ @iconStart="refresh-default"
+ class="refresh-health-check-button"
+ disabled={{this.isRefreshRunning}}
+ {{on "click" this.refreshHealthCheck}}
+ >
+ {{t "page.artifact.overview.re-run-health-check"}}
+ </Pds::Button>
+ </div>
+ </td>
+ </tr>
+ <tr>
+ <th scope="row">
+ {{t "page.artifact.overview.image"}}
+ </th>
+ <td>
+ <ContainerImageTag @statusReport={{@model.statusReport}}/>
+ </td>
+ </tr>
+ {{/if}}
+ {{#if vars.shouldRenderCommit}}
  <tr>
- <th scope="row">
- {{t "page.deployment.overview.image"}}
- </th>
+ <th scope="row">{{t "page.artifact.overview.commit"}}</th>
  <td>
- <ContainerImageTag @statusReport={{@model.statusReport}}/>
+ <GitCommit @commit={{@model.preload.jobDataSourceRef.git.commit}}/>
  </td>
  </tr>
- {{else}}
- {{t "page.deployment.overview.unavailable"}}
  {{/if}}
  </tbody>
  </table>
 </div>
+{{/let}}

ui/app/routes/workspace/projects/project/app/index.ts

@@ -3,6 +3,6 @@ import { Model as AppRouteModel } from '../app';
 
 export default class AppIndex extends Route {
  redirect(model: AppRouteModel): void {
- this.transitionTo('workspace.projects.project.app.logs', model.application.application);
+ this.transitionTo('workspace.projects.project.app.deployments', model.application.application);
  }
 }

ui/app/styles/_layout.scss

@@ -74,13 +74,16 @@ ul.list {
  border-bottom: none;
 }
 
+.list-heading {
+ @include Typography.Heading(3);
+}
+
 .status-row {
  // status information on specific build/deployment/release page
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: scale.$base 0;
- border-top: 1px solid rgb(var(--border));
  color: rgb(var(--text-muted));
  @include Typography.Interface(M);
 
@@ -109,7 +112,7 @@ ul.list {
 // Waypoint styles
 
 code {
- font-family: ui-monospace, 'Menlo', monospace;
+ font-family: var(--monospace);
  white-space: nowrap;
  color: rgb(var(--text));
  background: none;

ui/app/styles/_variables.scss

@@ -12,6 +12,7 @@ $button-shadow: 0 3px 2px rgba(var(--shadow), 0.2);
 }
 
 :root {
+ --monospace: ui-monospace, 'Menlo', monospace;
  --brand: #{dehex($brand-color)};
  --background: #{dehex(color.$white)};
  --text: #{dehex(color.$black)};
@@ -22,8 +23,8 @@ $button-shadow: 0 3px 2px rgba(var(--shadow), 0.2);
  --outline: #{dehex(color.$ui-gray-300)};
  --card: #{dehex(color.$white)};
  --panel: #{dehex(color.$ui-cool-gray-050)};
- --badge: #{dehex(color.$blue-050)};
- --badge-text: #{dehex(color.$blue-500)};
+ --badge: #{dehex(color.$ui-gray-200)};
+ --badge-text: #{dehex(color.$ui-gray-800)};
  --badge-neutral: #{dehex(color.$ui-cool-gray-100)};
  --badge-neutral-text: #{dehex(color.$ui-cool-gray-700)};
  --shadow: #{dehex(color.$ui-cool-gray-900)};

ui/app/styles/components/_index.scss

@@ -1,5 +1,3 @@
-@import 'app-card';
-@import 'app-card-item';
 @import 'app-item';
 @import 'badge';
 @import 'button';
@@ -20,6 +18,7 @@
 @import 'navigation/header';
 @import 'navigation/footer';
 @import 'navigation/page-header';
+@import 'navigation/panel-header';
 @import 'notifications';
 @import 'operation-status-indicator';
 @import 'output-pane';

ui/app/styles/components/badge.scss

@@ -9,6 +9,7 @@
 
  &--version {
  @include Typography.Interface(M);
+ font-family: var(--monospace);
  border-radius: scale.$base;
  }
 

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

@@ -1,13 +1,12 @@
 .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;
+ color: rgb(var(--text-muted));
+ background: rgb(var(--badge));
+ padding: scale.$sm-4;
+ border-radius: scale.$sm-4;
  }
  .copy-btn {
  @include button-reset;

ui/app/styles/components/navigation/artifact-overview.scss

@@ -24,6 +24,7 @@
  color: rgb(var(--text-muted));
  padding-right: scale.$lg--10;
  text-align: left;
+ width: 158px;
  }
 
  .status-indicator {

ui/app/styles/components/navigation/page-header.scss

@@ -30,13 +30,6 @@
  font-weight: 600;
  margin: scale.$sm-2 0 scale.$sm-4;
  }
-
- .badge {
- font-size: 1rem;
- position: relative;
- top: -2px;
- margin-right: scale.$sm-4;
- }
  }
 
  small {
@@ -57,57 +50,4 @@
  &.projects-header {
  margin-top: scale.$lg-4;
  }
-
- .actions {
- position: relative;
- display: flex;
- align-items: center;
- flex-wrap: wrap;
- max-width: 100%;
- margin: scale.$sm-4 0;
-
- .button-group {
- display: flex;
- max-width: 100%;
-
- .button:first-child {
- flex-shrink: 1;
- overflow: hidden;
- }
- }
-
- .button {
- margin: scale.$sm-3 0;
-
- span {
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- min-width: 0;
- }
-
- & + .button {
- margin-left: scale.$base;
- }
- }
-
- .first-run-hint {
- p {
- color: rgb(var(--text-muted));
- @include Typography.Interface(S);
- display: inline-block;
- margin-right: scale.$sm-2;
- }
-
- .copyable-code {
- margin: scale.$sm-2 0;
-
- code {
- display: inline-flex;
- font-size: 11px;
- flex-shrink: 0;
- }
- }
- }
- }
 }