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/secret-list-header.js b/ui/app/components/secret-list-header.js index ef8ee1113..12f3d2149 100644 --- a/ui/app/components/secret-list-header.js +++ b/ui/app/components/secret-list-header.js @@ -9,4 +9,5 @@ export default Component.extend({ baseKey: null, backendCrumb: null, model: null, + options: null, }); diff --git a/ui/app/components/toolbar-actions.js b/ui/app/components/toolbar-actions.js new file mode 100644 index 000000000..2f278cc52 --- /dev/null +++ b/ui/app/components/toolbar-actions.js @@ -0,0 +1,3 @@ +import OuterHTML from './outer-html'; + +export default OuterHTML.extend({}); diff --git a/ui/app/components/toolbar-download-button.js b/ui/app/components/toolbar-download-button.js new file mode 100644 index 000000000..672bc02b3 --- /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-link'], +}); diff --git a/ui/app/components/toolbar-filters.js b/ui/app/components/toolbar-filters.js new file mode 100644 index 000000000..2f278cc52 --- /dev/null +++ b/ui/app/components/toolbar-filters.js @@ -0,0 +1,3 @@ +import OuterHTML from './outer-html'; + +export default OuterHTML.extend({}); diff --git a/ui/app/components/toolbar-link.js b/ui/app/components/toolbar-link.js new file mode 100644 index 000000000..f5aa4c8fc --- /dev/null +++ b/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, +}); diff --git a/ui/app/components/toolbar-secret-link.js b/ui/app/components/toolbar-secret-link.js new file mode 100644 index 000000000..dc7c2669c --- /dev/null +++ b/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, +}); diff --git a/ui/app/components/toolbar.js b/ui/app/components/toolbar.js new file mode 100644 index 000000000..d24354b9c --- /dev/null +++ b/ui/app/components/toolbar.js @@ -0,0 +1,6 @@ +import OuterHTML from './outer-html'; + +export default OuterHTML.extend({ + classNames: ['toolbar'], + tagName: 'nav', +}); diff --git a/ui/app/controllers/vault/cluster/secrets/backend/configuration.js b/ui/app/controllers/vault/cluster/secrets/backend/configuration.js new file mode 100644 index 000000000..93aabec1d --- /dev/null +++ b/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')); + }), +}); diff --git a/ui/app/controllers/vault/cluster/secrets/backend/list.js b/ui/app/controllers/vault/cluster/secrets/backend/list.js index cfda28671..fdd006fb5 100644 --- a/ui/app/controllers/vault/cluster/secrets/backend/list.js +++ b/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); diff --git a/ui/app/styles/components/auth-form.scss b/ui/app/styles/components/auth-form.scss index 4bdc2ab92..cd7752493 100644 --- a/ui/app/styles/components/auth-form.scss +++ b/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; + } +} 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..78f292d07 --- /dev/null +++ b/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; +} 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..c55c7166a 100644 --- a/ui/app/templates/components/auth-form.hbs +++ b/ui/app/templates/components/auth-form.hbs @@ -5,26 +5,26 @@ {{/if}} {{#if hasMethodsWithPath}} - + {{/if}}
- - {{#if (eq identityType "entity")}} - {{#link-to "vault.cluster.access.identity.merge" (pluralize identityType) class="button has-icon-right is-ghost is-compact" data-test-entity-merge-link=true}} - Merge {{pluralize identityType}} - {{i-con glyph="chevron-right" size=11}} - {{/link-to}} - {{/if}} - {{#link-to "vault.cluster.access.identity.create" (pluralize identityType) class="button has-icon-right is-ghost is-compact" data-test-entity-create-link=true}} - Create {{identityType}} - {{i-con glyph="chevron-right" size=11}} - {{/link-to}} - -
+
-{{#if model.meta.total}} -
-
-
- {{identity/lookup-input type=identityType}} -
-
-
-{{/if}} + + {{#if model.meta.total}} + + {{identity/lookup-input type=identityType}} + + {{/if}} + + {{#if (eq identityType "entity")}} + + Merge {{pluralize identityType}} + + {{/if}} + + Create {{identityType}} + + + diff --git a/ui/app/templates/components/identity/lookup-input.hbs b/ui/app/templates/components/identity/lookup-input.hbs index 527df5676..92eb9d1d3 100644 --- a/ui/app/templates/components/identity/lookup-input.hbs +++ b/ui/app/templates/components/identity/lookup-input.hbs @@ -1,5 +1,5 @@
-
+
- -
+ + + + {{/unless}} - {{#if (and (eq mode 'show') (or canEditV2Secret canEdit))}} - {{#let (concat 'vault.cluster.secrets.backend.' (if (eq mode 'show') 'edit' 'show')) as |targetRoute|}} - {{#unless (and isV2 (or isWriteWithoutRead modelForData.destroyed modelForData.deleted))}} -
- - - Copy secret - - - - - -
- {{/unless}} -
- {{#if isV2}} - - Create new version - - {{else}} - - Edit secret - - {{/if}} -
- {{/let}} - {{/if}} - {{#if (and (eq @mode "show") this.isV2 (not @model.failedServerRead))}} -
+ + {{#if (and (eq @mode "show") this.isV2 (not @model.failedServerRead))}} -
-
- History + History + -
- {{/if}} -
+
+ {{/if}} + + {{#if (and (eq mode 'show') canDelete)}} + + Delete secret + + + {{/if}} + + {{#if (and (eq mode 'show') (or canEditV2Secret canEdit))}} + {{#let (concat 'vault.cluster.secrets.backend.' (if (eq mode 'show') 'edit' 'show')) as |targetRoute|}} + {{#unless (and isV2 (or isWriteWithoutRead modelForData.destroyed modelForData.deleted))}} + + + Copy secret + + + + + + + {{/unless}} + + {{#if isV2}} + + Create new version + + {{else}} + + Edit secret + + {{/if}} + {{/let}} + {{/if}} + + + {{partial partialName}} diff --git a/ui/app/templates/components/secret-list-header.hbs b/ui/app/templates/components/secret-list-header.hbs index 3c7caaf12..aaccd0e0a 100644 --- a/ui/app/templates/components/secret-list-header.hbs +++ b/ui/app/templates/components/secret-list-header.hbs @@ -25,35 +25,9 @@ {{/if}} - - {{#unless (or isCertTab isConfigure)}} -
- {{#secret-link - mode="create" - secret='' - queryParams=(query-params initialKey=(or filter baseKey.id)) - class="button has-icon-right is-ghost is-compact" - data-test-secret-create=true - }} - {{options.create}} - {{i-con glyph="chevron-right" size=11}} - {{/secret-link}} -
- {{/unless}} - {{#if (or (eq model.type "aws") (eq model.type "ssh") (eq model.type "pki"))}} -
- {{#link-to "vault.cluster.settings.configure-secret-backend" model.id - class="button has-icon-right is-ghost is-compact" - data-test-secret-backend-configure=true - }} - Configure {{i-con glyph="chevron-right" size=11}} - {{/link-to}} -
- {{/if}} - {{#if options.tabs}} -
+
{{else}} {{!-- if there are no tabs in the options, we'll hardcode them here --}} -
+
- \ No newline at end of file + diff --git a/ui/app/templates/components/section-tabs.hbs b/ui/app/templates/components/section-tabs.hbs index fdecb469a..5cf2f0a88 100644 --- a/ui/app/templates/components/section-tabs.hbs +++ b/ui/app/templates/components/section-tabs.hbs @@ -1,6 +1,6 @@ {{#with (tabs-for-auth-section model.type tabType) as |tabs|}} {{#if tabs.length}} -
+