Merge pull request #6626 from hashicorp/ui-toolbar

UI: Add Toolbar

ui/app/components/i-con.js

@@ -37,6 +37,7 @@ export const GLYPHS_WITH_SVG_TAG = [
   'neutral-circled-outline',
   'perf-replication',
   'person',
+  'plus-plain',
   'role',
   'status-indicator',
   'stopwatch',

ui/app/components/secret-list-header.js

@@ -9,4 +9,5 @@ export default Component.extend({
   baseKey: null,
   backendCrumb: null,
   model: null,
+  options: null,
 });

ui/app/components/toolbar-actions.js

@@ -0,0 +1,3 @@
+import OuterHTML from './outer-html';
+
+export default OuterHTML.extend({});

ui/app/components/toolbar-download-button.js

@@ -0,0 +1,5 @@
+import DownloadButton from './download-button';
+
+export default DownloadButton.extend({
+  classNames: ['toolbar-link'],
+});

ui/app/components/toolbar-filters.js

@@ -0,0 +1,3 @@
+import OuterHTML from './outer-html';
+
+export default OuterHTML.extend({});

ui/app/components/toolbar-link.js

@@ -0,0 +1,15 @@
+import OuterHTML from './outer-html';
+import { computed } from '@ember/object';
+
+export default OuterHTML.extend({
+  glyph: computed('type', function() {
+    if (this.type == 'add') {
+      return 'plus-plain';
+    } else {
+      return 'chevron-right';
+    }
+  }),
+  tagName: '',
+  type: null,
+  supportsDataTestProperties: true,
+});

ui/app/components/toolbar-secret-link.js

@@ -0,0 +1,14 @@
+import OuterHTML from './outer-html';
+import { computed } from '@ember/object';
+
+export default OuterHTML.extend({
+  glyph: computed('type', function() {
+    if (this.type == 'add') {
+      return 'plus-plain';
+    } else {
+      return 'chevron-right';
+    }
+  }),
+  tagName: '',
+  supportsDataTestProperties: true,
+});

ui/app/components/toolbar.js

@@ -0,0 +1,6 @@
+import OuterHTML from './outer-html';
+
+export default OuterHTML.extend({
+  classNames: ['toolbar'],
+  tagName: 'nav',
+});

ui/app/controllers/vault/cluster/secrets/backend/configuration.js

@@ -0,0 +1,9 @@
+import { computed } from '@ember/object';
+import Controller from '@ember/controller';
+
+export default Controller.extend({
+  isConfigurable: computed('model.type', function() {
+    const configurableEngines = ['aws', 'ssh', 'pki'];
+    return configurableEngines.includes(this.get('model.type'));
+  }),
+});

ui/app/controllers/vault/cluster/secrets/backend/list.js

@@ -16,6 +16,10 @@ export default Controller.extend(ListController, BackendCrumbMixin, WithNavToNea
     return !!utils.keyIsFolder(this.get('filter'));
   }),
 
+  isConfigurableTab: computed('isCertTab', 'isConfigure', function() {
+    return this.get('isCertTab') || this.get('isConfigure');
+  }),
+
   actions: {
     chooseAction(action) {
       this.set('selectedAction', action);

ui/app/styles/components/auth-form.scss

@@ -18,3 +18,19 @@
   justify-content: center;
   align-items: center;
 }
+
+.toolbar-namespace-picker {
+  padding: 0 $spacing-s;
+
+  .field {
+    width: 100%;
+  }
+
+  .field-label {
+    margin-right: $spacing-s;
+  }
+
+  .is-label {
+    color: $grey;
+  }
+}

ui/app/styles/components/info-table-row.scss

@@ -9,7 +9,7 @@
   &.thead {
     box-shadow: 0 1px 0 $grey-light, 0 -1px 0 $grey-light;
     margin: 0;
-    padding: 0 $size-6;
+    padding: 0 $size-6 0 0;
 
     .column {
       padding: 0.5rem 0.75rem;

ui/app/styles/components/tabs.scss

@@ -1,3 +1,7 @@
+.page-header + .tabs-container {
+  box-shadow: none;
+}
+
 .tabs {
   box-shadow: inset 0 -1px 0 $grey-light;
 
@@ -15,25 +19,25 @@
       border-color: $blue;
       color: $blue;
     }
-    &:first-child a,
-    &:first-child .tab {
-      margin-left: $size-5;
-    }
   }
 
   a,
   .tab {
-    color: $grey-dark;
+    color: $grey;
     font-weight: $font-weight-semibold;
     text-decoration: none;
     padding: $size-6 $size-8 $size-8;
     border-bottom: 2px solid transparent;
-    transition: border-color $speed;
+    transition: background-color $speed, border-color $speed;
 
     &:hover,
     &:active {
       border-color: $grey-light;
     }
+
+    &:hover {
+      background-color: $ui-gray-050;
+    }
   }
 
   .ember-basic-dropdown-trigger {

ui/app/styles/components/toolbar.scss

@@ -0,0 +1,98 @@
+.tabs-container + .toolbar {
+  border-top: 0;
+}
+
+.toolbar {
+  background-color: $ui-gray-010;
+  border: 1px solid $ui-gray-100;
+  border-bottom-color: $ui-gray-300;
+  border-top-color: $ui-gray-300;
+  position: relative;
+
+  &::after {
+    background: linear-gradient(to right, $ui-gray-010, rgba($ui-gray-010, 0));
+    bottom: 0;
+    content: '';
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: $spacing-xxs;
+    z-index: 2;
+  }
+
+  .input,
+  .select {
+    min-width: 160px;
+  }
+}
+
+.toolbar-scroller {
+  align-items: center;
+  display: flex;
+  height: 44px;
+  justify-content: space-between;
+  overflow-x: auto;
+  width: 100%;
+
+  @include from($mobile) {
+    padding: 0 $spacing-xxs;
+  }
+
+  &::-webkit-scrollbar {
+    border-bottom: $base-border;
+    height: $spacing-xxs;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: $ui-gray-300;
+    border-radius: $spacing-xxs;
+  }
+}
+
+.toolbar-filters,
+.toolbar-actions {
+  align-items: center;
+  display: flex;
+  flex: 1;
+  white-space: nowrap;
+}
+
+.toolbar-filters + .toolbar-actions {
+  @include until($mobile) {
+    border-left: $base-border;
+    margin-left: $spacing-xs;
+    padding-left: $spacing-xs;
+  }
+}
+
+.toolbar-actions {
+  @include from($mobile) {
+    justify-content: flex-end;
+  }
+}
+
+.toolbar-link {
+  @extend .button;
+  @extend .is-ghost;
+  @extend .has-icon-right;
+  border: 0;
+  color: $black;
+  transition: background-color $speed;
+
+  &:hover {
+    background-color: $ui-gray-100;
+    border: 0;
+    color: $blue;
+  }
+
+  &:active {
+    box-shadow: none;
+  }
+}
+
+.toolbar-separator {
+  border-right: $light-border;
+  height: 32px;
+  margin: 0 $spacing-xs;
+  width: 0;
+}

ui/app/styles/core.scss

@@ -71,13 +71,13 @@
 @import './components/radial-progress';
 @import './components/role-item';
 @import './components/search-select';
-@import './components/secret-control-bar';
 @import './components/shamir-progress';
 @import './components/sidebar';
 @import './components/splash-page';
 @import './components/status-menu';
 @import './components/tabs';
 @import './components/token-expire-warning';
+@import './components/toolbar';
 @import './components/tool-tip';
 @import './components/unseal-warning';
 @import './components/upgrade-overlay';

ui/app/styles/core/buttons.scss

@@ -192,8 +192,8 @@ $button-box-shadow-standard: 0 3px 1px 0 rgba($black, 0.12);
     .icon {
       &,
       &:first-child:last-child {
-        margin-left: $size-11;
-        margin-right: -$size-10;
+        margin-left: $spacing-xxs;
+        margin-right: -$spacing-xxs;
       }
     }
   }

ui/app/styles/core/tables.scss

@@ -1,16 +1,14 @@
 .table {
   thead,
   .thead {
-    background: $grey-lighter;
     box-shadow: 0 1px 0 0 $grey-light, 0 -1px 0 0 $grey-light;
 
     th,
     .th {
-      text-transform: uppercase;
       font-size: $size-8;
-      color: $grey-dark;
-      font-weight: normal;
-      padding: 0.5rem 1.5rem;
+      color: $grey;
+      font-weight: $font-weight-semibold;
+      padding: 1rem 1.5rem 0;
       border-width: 0 0 1px 0;
       border-color: $grey-light;
     }

ui/app/templates/components/auth-form.hbs

@@ -5,26 +5,26 @@
     </div>
   {{/if}}
   {{#if hasMethodsWithPath}}
-  <nav class="tabs is-marginless">
-    <ul>
-      {{#each methodsToShow as |method|}}
-        {{#with (or method.path method.type) as |methodKey|}}
-            <li class="{{if (and selectedAuthIsPath (eq (or selectedAuthBackend.path selectedAuthBackend.type) methodKey)) 'is-active' ''}}" data-test-auth-method>
-              {{#link-to 'vault.cluster.auth' cluster.name (query-params with=methodKey) data-test-auth-method-link=method.type}}
-                {{or method.id (capitalize method.type)}}
-              {{/link-to}}
-            </li>
-        {{/with}}
-      {{/each}}
-      {{#if hasMethodsWithPath}}
-        <li class="{{if (not selectedAuthIsPath) 'is-active' ''}}" data-test-auth-method>
-          {{#link-to 'vault.cluster.auth' cluster.name (query-params with='token') data-test-auth-method-link="other"}}
-            Other
-          {{/link-to}}
-        </li>
-      {{/if}}
-    </ul>
-  </nav>
+    <nav class="tabs is-marginless">
+      <ul>
+        {{#each methodsToShow as |method|}}
+          {{#with (or method.path method.type) as |methodKey|}}
+              <li class="{{if (and selectedAuthIsPath (eq (or selectedAuthBackend.path selectedAuthBackend.type) methodKey)) 'is-active' ''}}" data-test-auth-method>
+                {{#link-to 'vault.cluster.auth' cluster.name (query-params with=methodKey) data-test-auth-method-link=method.type}}
+                  {{or method.id (capitalize method.type)}}
+                {{/link-to}}
+              </li>
+          {{/with}}
+        {{/each}}
+        {{#if hasMethodsWithPath}}
+          <li class="{{if (not selectedAuthIsPath) 'is-active' ''}}" data-test-auth-method>
+            {{#link-to 'vault.cluster.auth' cluster.name (query-params with='token') data-test-auth-method-link="other"}}
+              Other
+            {{/link-to}}
+          </li>
+        {{/if}}
+      </ul>
+    </nav>
   {{/if}}
   <div class="box is-marginless is-shadowless">
     <MessageError