From a655e76944952a04c23c63fe0b6b2b5684c9f2a4 Mon Sep 17 00:00:00 2001 From: Joshua Ogle Date: Thu, 14 Feb 2019 09:04:46 -0700 Subject: [PATCH 01/10] Add Toolbar component --- ui/app/components/i-con.js | 1 + ui/app/components/toolbar-actions.js | 5 + ui/app/components/toolbar-add-button.js | 5 + ui/app/components/toolbar-button.js | 6 + ui/app/components/toolbar-download-button.js | 5 + ui/app/components/toolbar-filters.js | 5 + ui/app/components/toolbar-secret-link.js | 6 + ui/app/components/toolbar.js | 6 + ui/app/styles/components/auth-form.scss | 18 ++ ui/app/styles/components/info-table-row.scss | 2 +- .../styles/components/secret-control-bar.scss | 24 -- ui/app/styles/components/tabs.scss | 16 +- ui/app/styles/components/toolbar.scss | 97 +++++++ ui/app/styles/core.scss | 2 +- ui/app/styles/core/buttons.scss | 4 +- ui/app/styles/core/tables.scss | 8 +- ui/app/templates/components/auth-form.hbs | 25 ++ .../components/identity/entity-nav.hbs | 46 ++-- .../components/identity/lookup-input.hbs | 2 +- .../templates/components/navigate-input.hbs | 6 +- ui/app/templates/components/role-aws-edit.hbs | 59 ++--- ui/app/templates/components/role-pki-edit.hbs | 85 +++--- ui/app/templates/components/role-ssh-edit.hbs | 79 +++--- ui/app/templates/components/secret-edit.hbs | 241 +++++++++--------- .../components/secret-list-header.hbs | 34 +-- .../components/secret-version-menu.hbs | 20 +- ui/app/templates/components/section-tabs.hbs | 2 +- .../components/toolbar-add-button.hbs | 2 + .../templates/components/toolbar-button.hbs | 2 + .../components/toolbar-download-button.hbs | 2 + .../components/toolbar-secret-link.hbs | 17 ++ ui/app/templates/components/toolbar.hbs | 3 + ui/app/templates/components/transit-edit.hbs | 30 --- .../components/transit-key-actions.hbs | 27 +- .../partials/secret-backend-settings/aws.hbs | 3 +- .../partials/secret-backend-settings/pki.hbs | 2 +- .../templates/partials/transit-form-show.hbs | 41 ++- ui/app/templates/svg/icons/learn.hbs | 2 +- ui/app/templates/svg/icons/plus-plain.hbs | 3 + .../cluster/access/control-group-accessor.hbs | 17 +- .../vault/cluster/access/control-groups.hbs | 17 +- .../cluster/access/identity/aliases/show.hbs | 18 +- .../vault/cluster/access/identity/show.hbs | 28 +- .../vault/cluster/access/leases/list.hbs | 95 ++++--- .../vault/cluster/access/method/section.hbs | 32 +-- .../vault/cluster/access/methods.hbs | 14 +- .../vault/cluster/access/namespaces/index.hbs | 15 +- ui/app/templates/vault/cluster/auth.hbs | 25 -- .../vault/cluster/policies/index.hbs | 66 ++--- .../templates/vault/cluster/policy/edit.hbs | 58 ++--- .../templates/vault/cluster/policy/show.hbs | 62 ++--- .../vault/cluster/replication/mode.hbs | 2 +- .../mode/secondaries/config-edit.hbs | 1 + .../replication/mode/secondaries/index.hbs | 38 +-- .../cluster/secrets/backend/configuration.hbs | 15 +- .../vault/cluster/secrets/backend/list.hbs | 29 ++- .../backend/transit-actions-layout.hbs | 36 +-- .../vault/cluster/secrets/backends.hbs | 14 +- .../vault/cluster/settings/auth/configure.hbs | 27 +- .../settings/configure-secret-backend.hbs | 26 +- ui/tests/acceptance/aws-test.js | 3 +- .../secrets/backend/pki/list-test.js | 4 +- ui/tests/acceptance/ssh-test.js | 1 + .../components/toolbar-actions-test.js | 16 ++ .../components/toolbar-add-button-test.js | 17 ++ .../components/toolbar-button-test.js | 17 ++ .../toolbar-download-button-test.js | 17 ++ .../components/toolbar-filters-test.js | 16 ++ .../integration/components/toolbar-test.js | 17 ++ 69 files changed, 957 insertions(+), 729 deletions(-) create mode 100644 ui/app/components/toolbar-actions.js create mode 100644 ui/app/components/toolbar-add-button.js create mode 100644 ui/app/components/toolbar-button.js create mode 100644 ui/app/components/toolbar-download-button.js create mode 100644 ui/app/components/toolbar-filters.js create mode 100644 ui/app/components/toolbar-secret-link.js create mode 100644 ui/app/components/toolbar.js delete mode 100644 ui/app/styles/components/secret-control-bar.scss create mode 100644 ui/app/styles/components/toolbar.scss create mode 100644 ui/app/templates/components/toolbar-add-button.hbs create mode 100644 ui/app/templates/components/toolbar-button.hbs create mode 100644 ui/app/templates/components/toolbar-download-button.hbs create mode 100644 ui/app/templates/components/toolbar-secret-link.hbs create mode 100644 ui/app/templates/components/toolbar.hbs create mode 100644 ui/app/templates/svg/icons/plus-plain.hbs create mode 100644 ui/tests/integration/components/toolbar-actions-test.js create mode 100644 ui/tests/integration/components/toolbar-add-button-test.js create mode 100644 ui/tests/integration/components/toolbar-button-test.js create mode 100644 ui/tests/integration/components/toolbar-download-button-test.js create mode 100644 ui/tests/integration/components/toolbar-filters-test.js create mode 100644 ui/tests/integration/components/toolbar-test.js diff --git a/ui/app/components/i-con.js b/ui/app/components/i-con.js index 669d8b8e5..589aa600d 100644 --- a/ui/app/components/i-con.js +++ b/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', diff --git a/ui/app/components/toolbar-actions.js b/ui/app/components/toolbar-actions.js new file mode 100644 index 000000000..6598f3cae --- /dev/null +++ b/ui/app/components/toolbar-actions.js @@ -0,0 +1,5 @@ +import Component from '@ember/component'; + +export default Component.extend({ + classNames: ['toolbar-actions'], +}); diff --git a/ui/app/components/toolbar-add-button.js b/ui/app/components/toolbar-add-button.js new file mode 100644 index 000000000..dce4298eb --- /dev/null +++ b/ui/app/components/toolbar-add-button.js @@ -0,0 +1,5 @@ +import LinkComponent from '@ember/routing/link-component'; + +export default LinkComponent.extend({ + classNames: ['toolbar-button'], +}); diff --git a/ui/app/components/toolbar-button.js b/ui/app/components/toolbar-button.js new file mode 100644 index 000000000..d32cada22 --- /dev/null +++ b/ui/app/components/toolbar-button.js @@ -0,0 +1,6 @@ +import LinkComponent from '@ember/routing/link-component'; + +export default LinkComponent.extend({ + classNames: ['toolbar-button'], + glyph: 'chevron-right', +}); diff --git a/ui/app/components/toolbar-download-button.js b/ui/app/components/toolbar-download-button.js new file mode 100644 index 000000000..f465025a5 --- /dev/null +++ b/ui/app/components/toolbar-download-button.js @@ -0,0 +1,5 @@ +import DownloadButton from './download-button'; + +export default DownloadButton.extend({ + classNames: ['toolbar-button'], +}); diff --git a/ui/app/components/toolbar-filters.js b/ui/app/components/toolbar-filters.js new file mode 100644 index 000000000..81d6a06b4 --- /dev/null +++ b/ui/app/components/toolbar-filters.js @@ -0,0 +1,5 @@ +import Component from '@ember/component'; + +export default Component.extend({ + classNames: ['toolbar-filters'], +}); diff --git a/ui/app/components/toolbar-secret-link.js b/ui/app/components/toolbar-secret-link.js new file mode 100644 index 000000000..2f2732a7a --- /dev/null +++ b/ui/app/components/toolbar-secret-link.js @@ -0,0 +1,6 @@ +import SecretLink from './secret-link'; + +export default SecretLink.extend({ + class: 'toolbar-button', + glyph: 'chevron-right', +}); diff --git a/ui/app/components/toolbar.js b/ui/app/components/toolbar.js new file mode 100644 index 000000000..f190dd7f6 --- /dev/null +++ b/ui/app/components/toolbar.js @@ -0,0 +1,6 @@ +import Component from '@ember/component'; + +export default Component.extend({ + classNames: ['toolbar'], + tagName: 'nav', +}); diff --git a/ui/app/styles/components/auth-form.scss b/ui/app/styles/components/auth-form.scss index 4bdc2ab92..2dd0718c7 100644 --- a/ui/app/styles/components/auth-form.scss +++ b/ui/app/styles/components/auth-form.scss @@ -18,3 +18,21 @@ justify-content: center; align-items: center; } + +.auth-form .toolbar { + border-top: 0; + border-bottom: $light-border; + padding: 0 $spacing-s; + + .field { + width: 100%; + } + + .field-label { + margin-right: $spacing-s; + } + + .is-label { + color: $grey; + } +} diff --git a/ui/app/styles/components/info-table-row.scss b/ui/app/styles/components/info-table-row.scss index 75e1e8227..c887102bc 100644 --- a/ui/app/styles/components/info-table-row.scss +++ b/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; diff --git a/ui/app/styles/components/secret-control-bar.scss b/ui/app/styles/components/secret-control-bar.scss deleted file mode 100644 index 739f139ba..000000000 --- a/ui/app/styles/components/secret-control-bar.scss +++ /dev/null @@ -1,24 +0,0 @@ -.secret-control-bar { - margin: 0; - padding: $size-10 $size-9; - background: $grey-lighter; - box-shadow: 0 1px 0 $grey-light, 0 -1px 0 $grey-light; - display: flex; - justify-content: flex-end; - .control { - flex: 0 1 auto; - padding: 0 $size-10; - font-size: $size-8; - height: 1.8rem; - line-height: 1.8rem; - display: flex; - flex-direction: column; - justify-content: center; - .switch[type='checkbox'].is-small + label::before { - top: 0.5rem; - } - .switch[type='checkbox'].is-small + label::after { - top: 0.6rem; - } - } -} diff --git a/ui/app/styles/components/tabs.scss b/ui/app/styles/components/tabs.scss index ad9632699..fc7851fd3 100644 --- a/ui/app/styles/components/tabs.scss +++ b/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 { diff --git a/ui/app/styles/components/toolbar.scss b/ui/app/styles/components/toolbar.scss new file mode 100644 index 000000000..6b21c123f --- /dev/null +++ b/ui/app/styles/components/toolbar.scss @@ -0,0 +1,97 @@ +.tabs-container + .toolbar { + border-top: 0; +} + +.toolbar { + background-color: $ui-gray-010; + border-top: $base-border; + box-shadow: 0 2px 0 -1px $ui-gray-300; + position: relative; + + &::after { + background: linear-gradient(to right, rgba($ui-gray-010, 0), $ui-gray-010); + bottom: 0; + content: ''; + position: absolute; + right: 0; + top: 0; + width: $spacing-s; + 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-button { + @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; +} diff --git a/ui/app/styles/core.scss b/ui/app/styles/core.scss index c62378390..03e9e933f 100644 --- a/ui/app/styles/core.scss +++ b/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'; diff --git a/ui/app/styles/core/buttons.scss b/ui/app/styles/core/buttons.scss index 92ad01ba4..6d1d74578 100644 --- a/ui/app/styles/core/buttons.scss +++ b/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; } } } diff --git a/ui/app/styles/core/tables.scss b/ui/app/styles/core/tables.scss index 1d816a499..6d6d6c120 100644 --- a/ui/app/styles/core/tables.scss +++ b/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; } diff --git a/ui/app/templates/components/auth-form.hbs b/ui/app/templates/components/auth-form.hbs index 8d1f204d3..03a559c9e 100644 --- a/ui/app/templates/components/auth-form.hbs +++ b/ui/app/templates/components/auth-form.hbs @@ -4,6 +4,31 @@ {{partial 'svg/vault-loading'}} {{/if}} + {{#if (has-feature "Namespaces")}} + +
+
+ +
+
+
+
+ +
+
+
+
+ + {{/if}} {{#if hasMethodsWithPath}}