Merge pull request #1335 from hashicorp/settings-polish

Project settings polish
hashicorp · Apr 16, 2021 · 94a6c04 · 94a6c04
2 parents cb0faa8 + 7fecff7
commit 94a6c04
Show file tree

Hide file tree

Showing 14 changed files with 85 additions and 65 deletions.
diff --git a/.changelog/1335.txt b/.changelog/1335.txt
@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: Improve the design of the Project Settings forms
+```
diff --git a/ui/app/components/app-form/project-settings.hbs b/ui/app/components/app-form/project-settings.hbs
@@ -1,7 +1,9 @@
 <form class="pds-form" {{on "submit" this.saveSettings}}>
 
- <div part="fields">
- <h2>{{t "form.project_settings.git_title"}}</h2>
+ <div part="fields" class="card">
+ <div class="card-header">
+ <h4>{{t "form.project_settings.git_title"}}</h4>
+ </div>
  <fieldset class="pds-formFieldSet">
  <div class="pds-formField">
  <label for="git-source-url" class="pds-fieldName">
@@ -20,6 +22,9 @@
  <label for="git-source-ref" class="pds-fieldName">
  {{t "form.project_settings.git_source_ref_label"}}
  </label>
+ <Pds::HelpText>
+ <p>{{t 'form.project_settings.git_source_ref_helptext'}} <code>{{t 'form.project_settings.git_source_ref_example'}}</code></p>
+ </Pds::HelpText>
  <Pds::Input
  @type="text"
  id="git-source-ref"
@@ -41,6 +46,7 @@
  {{on "input" (pick "target.value" (set this "project.dataSource.git.path"))}}
  />
  </div>
+ <hr />
  <div class="pds-formField">
  <label for="git-auth-type" class="pds-fieldName">
  {{t "form.project_settings.git_auth_type_label"}}
@@ -140,7 +146,7 @@
  />
  </div>
  {{/if}}
-
+ <hr />
  <div class="pds-formField">
  <label class="pds-fieldName">
  {{t "form.project_settings.git_sync_label"}}
@@ -157,18 +163,20 @@
  @offLabel='git sync off'
  @name="Git Sync"
  />
-
  <toggle.label for="git-sync-enabled">
  <span class="pds-toggleLabel">
  {{t "form.project_settings.git_sync_description_label"}}
  </span>
  </toggle.label>
  </XToggle>
-
  </div>
  </div>
  </fieldset>
- <h2>{{t "form.project_settings.hcl_title"}}</h2>
+ </div>
+ <div part="fields" class="card">
+ <div class="card-header">
+ <h4>{{t "form.project_settings.hcl_title"}}</h4>
+ </div>
  <fieldset class="pds-formFieldSet">
  <div class="pds-formField">
  <label for="project-hcl-location" class="pds-fieldName">

diff --git a/ui/app/components/page-header.hbs b/ui/app/components/page-header.hbs
@@ -1,4 +1,4 @@
-<header>
+<header class={{@className}}>
  {{#if @iconName}}
  <IconTile @icon={{@iconName}} />
  {{/if}}

diff --git a/ui/app/styles/_input.scss b/ui/app/styles/_input.scss
@@ -25,9 +25,12 @@ $input-focus: inset 0 1px 1px 1px rgba(var(--shadow), 0.1), 0 0 0 3px rgba(var(-
  }
 }
 
-.pds-input.pds--textLike, .pds-textarea {
+.pds-input.pds--textLike,
+.pds-textarea {
  color: rgb(var(--input-text));
  background: rgb(var(--input));
+ margin-top: scale.$sm-1;
+
  &::placeholder {
  color: rgb(var(--input-text-placeholder));
  }

diff --git a/ui/app/styles/_page.scss b/ui/app/styles/_page.scss
@@ -70,10 +70,6 @@
  min-height: 76px;
  max-width: 100%;
 
- &.projects-title {
- margin-top: scale.$lg-4;
- }
-
  h1,
  h2 {
  margin: 0;
@@ -111,6 +107,10 @@
  }
  }
 
+ &.projects-header {
+ margin-top: scale.$lg-4;
+ }
+
  .actions {
  position: relative;
  display: flex;
@@ -722,7 +722,7 @@
  float: right;
  text-align: right;
  margin-bottom: scale.$sm-1;
- button  {
+ button {
  font-size: 0.75rem;
  }
  }

diff --git a/ui/app/styles/_pds-form.scss b/ui/app/styles/_pds-form.scss
@@ -6,19 +6,25 @@
  max-width: 800px;
  }
 
- .pds-formField {
+ .pds-formField:not(:last-child) {
  margin-bottom: scale.$lg-1;
  }
 
  .pds-formFieldToggle {
  display: flex;
+ margin-top: scale.$sm-1;
+
  .x-toggle-container {
  padding-left: 0;
  }
  }
 
  .pds-toggleLabel {
- padding-left: scale.$sm-1;;
+ padding-left: scale.$sm-1;
+ }
+
+ .pds-checkboxField__label {
+ margin-top: scale.$sm-2;
  }
 
  .pds-formRadioWrapper {
@@ -41,4 +47,13 @@
  font-family: ui-monospace, 'Menlo', monospace;
  font-size: scale.$sm--1;
  }
+ .pds-helpText {
+ code {
+ font-size: 0.95em;
+ color: rgb(var(--text-muted));
+ padding: scale.$sm-4 scale.$sm-3;
+ background: rgb(var(--badge));
+ border-radius: 2px;
+ }
+ }
 }
diff --git a/ui/app/styles/app.scss b/ui/app/styles/app.scss
@@ -99,7 +99,7 @@ ul {
  padding: 0;
 }
 
-:any-link, :any-link:not(.pds-button) {
+:any-link:not(.pds-button) {
  border-bottom: none;
 }
 
@@ -119,6 +119,12 @@ pre code {
  white-space: pre;
 }
 
+hr {
+ margin: scale.$lg-1 0;
+ border: none;
+ border-top: 1px solid rgb(var(--border));
+}
+
 // Set a default size for icons
 
 svg.icon {

diff --git a/ui/app/templates/onboarding/install.hbs b/ui/app/templates/onboarding/install.hbs
@@ -6,28 +6,18 @@
  </div>
 </div>
 
-<hr />
-
 <div class="onboarding-step">
  <p>Anyone using Waypoint to deploy from their workstation needs to install it locally. The below
  instructions guide you through that for various operating systems.
  </p>
 
  <h2>Install Waypoint</h2>
 
- <nav>
- <ul>
- <li>
- <LinkTo @route="onboarding.install.manual">Manual installation</LinkTo>
- </li>
- <li>
- <LinkTo @route="onboarding.install.homebrew">Homebrew on OS X</LinkTo>
- </li>
- <li>
- <LinkTo @route="onboarding.install.linux">Linux</LinkTo>
- </li>
- </ul>
- </nav>
+ <Pds::TabNav>
+ <LinkTo @route="onboarding.install.manual">Manual installation</LinkTo>
+ <LinkTo @route="onboarding.install.homebrew">Homebrew on OS X</LinkTo>
+ <LinkTo @route="onboarding.install.linux">Linux</LinkTo>
+ </Pds::TabNav>
 
  {{outlet}}
 

diff --git a/ui/app/templates/onboarding/install/linux.hbs b/ui/app/templates/onboarding/install/linux.hbs
@@ -1,12 +1,10 @@
 <p>HashiCorp officially maintains and signs packages for the following Linux distributions.</p>
 
-<nav>
- <ul>
- <li><LinkTo @route="onboarding.install.linux.ubuntu">Ubuntu/Debian</LinkTo></li>
- <li><LinkTo @route="onboarding.install.linux.centos">CentOS/RHEL</LinkTo></li>
- <li><LinkTo @route="onboarding.install.linux.fedora">Fedora</LinkTo></li>
- <li><LinkTo @route="onboarding.install.linux.amazon">Amazon Linux</LinkTo></li>
- </ul>
-</nav>
+<Pds::TabNav>
+ <LinkTo @route="onboarding.install.linux.ubuntu">Ubuntu/Debian</LinkTo>
+ <LinkTo @route="onboarding.install.linux.centos">CentOS/RHEL</LinkTo>
+ <LinkTo @route="onboarding.install.linux.fedora">Fedora</LinkTo>
+ <LinkTo @route="onboarding.install.linux.amazon">Amazon Linux</LinkTo>
+</Pds::TabNav>
 
 {{outlet}}
diff --git a/ui/app/templates/onboarding/install_release.hbs b/ui/app/templates/onboarding/install_release.hbs
@@ -14,22 +14,12 @@
 
  <h2>Install Waypoint</h2>
 
- <nav>
- <ul>
- <li>
- <LinkTo @route="onboarding.install.manual">Manual installation</LinkTo>
- </li>
- <li>
- <LinkTo @route="onboarding.install.homebrew">Homebrew on OS X</LinkTo>
- </li>
- <li>
- <LinkTo @route="onboarding.install.chocolatey">Chocolatey on Windows</LinkTo>
- </li>
- <li>
- <LinkTo @route="onboarding.install.linux">Linux</LinkTo>
- </li>
- </ul>
- </nav>
+ <Pds::TabNav>
+ <LinkTo @route="onboarding.install.manual">Manual installation</LinkTo>
+ <LinkTo @route="onboarding.install.homebrew">Homebrew on OS X</LinkTo>
+ <LinkTo @route="onboarding.install.chocolatey">Chocolatey on Windows</LinkTo>
+ <LinkTo @route="onboarding.install.linux">Linux</LinkTo>
+ </Pds::TabNav>
 
  {{outlet}}
 

diff --git a/ui/app/templates/workspace/projects/index.hbs b/ui/app/templates/workspace/projects/index.hbs
@@ -7,8 +7,8 @@
 </div>
 {{/if}}
 
-<PageHeader>
- <div class="title projects-title">
+<PageHeader @className="projects-header">
+ <div class="title">
  <h1>Projects</h1>
  <small>
  {{#if @model.length}}

diff --git a/ui/app/templates/workspace/projects/new.hbs b/ui/app/templates/workspace/projects/new.hbs
@@ -6,7 +6,7 @@
 </PageHeader>
 
 <form class="pds-form" {{on "submit" this.saveProject}}>
- <div part="fields">
+ <div part="fields" class="card">
  <fieldset class="pds-formFieldSet">
  <div class="pds-formField">
  <label for="project-name" class="pds-fieldName">
@@ -22,22 +22,24 @@
  />
  </div>
  </fieldset>
+ <hr />
  <fieldset class="pds-formFieldSet">
  <div class="pds-formField">
  <label for="create-git" class="pds-fieldName">
- <Pds::Icon @type="git-repository"/> {{t 'form.project_new.create_git_label'}}
+ <Pds::Icon @type="git-repository" class="icon" />
+ {{t 'form.project_new.create_git_label'}}
  </label>
  <Pds::HelpText>
  <p>{{t 'form.project_new.create_git_helptext'}}</p>
  </Pds::HelpText>
+
  <Pds::CheckboxField
  @checked={{this.createGit}}
  @id="create-git"
  {{on "change" (set this "createGit" (not this.createGit))}}
  >
  {{t 'form.project_new.create_git_checkbox_label'}}
  </Pds::CheckboxField>
-
  </div>
  </fieldset>
  </div>

diff --git a/ui/app/templates/workspace/projects/project/apps.hbs b/ui/app/templates/workspace/projects/project/apps.hbs
@@ -3,7 +3,10 @@
  <h1>{{@model.name}}</h1>
  <small>{{pluralize @model.applicationsList.length "application"}}</small>
  </div>
- <LinkTo @route="workspace.projects.project.settings" @model={{@model.name}}><Pds::Icon @type="settings"/> Settings </LinkTo>
+ <Pds::CtaLink @route="workspace.projects.project.settings" @model={{@model.name}} @variant="ghost "class="pds--iconStart">
+ <Pds::Icon @type="settings" class="pds-button__iconStart"/>
+ &nbsp;Manage settings
+ </Pds::CtaLink>
 </PageHeader>
 
 {{#each @model.applicationsList as |app|}}

diff --git a/ui/translations/en-us.yaml b/ui/translations/en-us.yaml
@@ -28,14 +28,16 @@ form:
  project_new:
  title: 'New Project'
  project_name_label: 'Project Name'
- create_git_label: 'Git Configuration'
- create_git_helptext: 'Connect a git repository. If you skip this, you can always configure it later in project settings.'
- create_git_checkbox_label: 'Connect a Git repository to this Project'
- button: 'Next'
+ create_git_label: 'Connect a git repository'
+ create_git_helptext: 'If you skip this, you can always configure this later in project settings.'
+ create_git_checkbox_label: 'Connect a repository to this project'
+ button: 'Create project'
  project_settings:
  git_title: 'Git settings'
  git_source_url_label: 'Git Source URL'
  git_source_ref_label: 'Git Ref'
+ git_source_ref_helptext: 'This can be a branch name, a tag name, or a fully qualified git ref such as'
+ git_source_ref_example: 'refs/pull/1014'
  git_source_path_label: 'Git Source Path (optional)'
  git_auth_type_label: 'Authentication'
  git_auth_type_basic_label: 'Username & Password'