ui: added replacement info to deployments page and styling

hashicorp · Jun 1, 2021 · 09dfe4e · 09dfe4e
1 parent 7e49de2
commit 09dfe4e
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 9 deletions.
diff --git a/ui/app/components/app-item/deployment.hbs b/ui/app/components/app-item/deployment.hbs
@@ -1,11 +1,11 @@
-<li class={{if (eq @deployment.state 4) "app-item app-item--destroyed" "app-item"}}>
+<li class="{{if (eq @deployment.sequence @latest.sequence) "app-item--latest" "app-item--previous"}} {{if (eq @deployment.state 4) "app-item app-item--destroyed" "app-item"}}">
  <LinkTo @route="workspace.projects.project.app.deployment" @models={{array @deployment.id}}>
  <p>
  <b class="badge badge--version">v{{@deployment.sequence}}</b>
  <code>{{@deployment.id}}</code>
  {{#if (eq @deployment.state 4)}}
  <b class="badge badge--destroyed">
- <Pds::Icon @type="trash" class="icon" />&nbsp;Destroyed
+ <Pds::Icon @type="trash" class="icon" />&nbsp; {{t "page.deployments.destroyed_label"}}
  </b>
  {{/if}}
  </p>
@@ -21,9 +21,13 @@
  </span>
  </small>
  </LinkTo>
- {{#if (and @deployment.preload.deployUrl (not-eq @deployment.state 4))}}
+ {{#if (not-eq @latest.id @deployment.id)}}
+ <small class="replacement-info">
+ {{t "page.deployments.replaced_label"}}<b class="badge badge--version">v{{@latest.sequence}}</b>
+ </small>
+ {{else if (and @deployment.preload.deployUrl (not-eq @deployment.state 4))}}
  <ExternalLink href="https://{{@deployment.preload.deployUrl}}" class="button button--secondary button--external-link">
- <span>{{lowercase @deployment.preload.deployUrl}}</span>
+ <span>{{t "page.deployments.external_url_label"}}</span>
  <Pds::Icon @type="exit" class="icon" />
  </ExternalLink>
  {{/if}}

diff --git a/ui/app/styles/_app-item.scss b/ui/app/styles/_app-item.scss
@@ -64,4 +64,18 @@
  text-overflow: ellipsis;
  }
  }
+
+ .replacement-info {
+ b {
+ text-transform: inherit;
+ margin-left: scale.$sm-2;
+ }
+ }
+
+ &--previous {
+ background: #F7FAFC;
+ background-clip: border-box;
+ margin-bottom: 0px;
+ border-top: 1rem solid #F7FAFC !important;
+ }
 }
diff --git a/ui/app/styles/_page.scss b/ui/app/styles/_page.scss
@@ -186,13 +186,12 @@
  ul.list {
  li {
  padding-bottom: scale.$base;
- margin-bottom: scale.$base;
+ border-top: 1rem solid rgb(var(--background));
+ margin-bottom: 0;
  border-bottom: 1px solid rgb(var(--border));
 
  &:last-child {
- padding-bottom: 0;
- margin-bottom: 0;
- border: none;
+ border-bottom: none;
  }
  }
  }

diff --git a/ui/app/templates/workspace/projects/project/app/deployments.hbs b/ui/app/templates/workspace/projects/project/app/deployments.hbs
@@ -5,7 +5,7 @@
 <ul data-test-deployment-list=true class="list">
  {{#each this.deploymentsByGeneration key="generationID" as |group|}}
  {{#each group.deployments key="id" as |deployment|}}
- <AppItem::Deployment @deployment={{deployment}} />
+ <AppItem::Deployment @deployment={{deployment}} @latest={{group.deployments.[0]}} />
  {{/each}}
  {{else}}
  <EmptyState>

diff --git a/ui/translations/en-us.yaml b/ui/translations/en-us.yaml
@@ -21,6 +21,9 @@ page:
  title: 'Builds'
  deployments:
  title: 'Deployments'
+ destroyed_label: 'Destroyed'
+ external_url_label: 'Visit Deployment'
+ replaced_label: 'Replaced by '
  releases:
  title: 'Releases'