From 151bfa9e3680ffbaa09c6a0069e0fa0f8c77d523 Mon Sep 17 00:00:00 2001 From: Chelsea Shaw <82459713+hashishaw@users.noreply.github.com> Date: Wed, 26 May 2021 13:59:11 -0500 Subject: [PATCH] UI unseal screen updates (#11705) * Styling for empty-state and splash-page * Update shamir-flow language and trigger onError on non-400 error * Add license terminated screen to unseal * Add changelog --- changelog/11705.txt | 3 + ui/app/controllers/vault/cluster/unseal.js | 5 ++ ui/app/styles/components/empty-state.scss | 10 +++ ui/app/styles/components/splash-page.scss | 2 +- ui/app/templates/vault/cluster/unseal.hbs | 86 +++++++++++++------ ui/lib/core/addon/components/empty-state.js | 2 +- ui/lib/core/addon/components/shamir-flow.js | 5 ++ .../templates/components/shamir-flow.hbs | 2 +- 8 files changed, 86 insertions(+), 29 deletions(-) create mode 100644 changelog/11705.txt diff --git a/changelog/11705.txt b/changelog/11705.txt new file mode 100644 index 0000000000..42d683d81f --- /dev/null +++ b/changelog/11705.txt @@ -0,0 +1,3 @@ +```release-note:improvement +ui: Add specific error message if unseal fails due to license +``` diff --git a/ui/app/controllers/vault/cluster/unseal.js b/ui/app/controllers/vault/cluster/unseal.js index 7f975cd901..8d1e76adbd 100644 --- a/ui/app/controllers/vault/cluster/unseal.js +++ b/ui/app/controllers/vault/cluster/unseal.js @@ -3,6 +3,7 @@ import Controller from '@ember/controller'; export default Controller.extend({ wizard: service(), + showLicenseError: false, actions: { transitionToCluster(resp) { @@ -19,5 +20,9 @@ export default Controller.extend({ isUnsealed(data) { return data.sealed === false; }, + + handleLicenseError() { + this.set('showLicenseError', true); + }, }, }); diff --git a/ui/app/styles/components/empty-state.scss b/ui/app/styles/components/empty-state.scss index 9f685794bd..7a90a73ea2 100644 --- a/ui/app/styles/components/empty-state.scss +++ b/ui/app/styles/components/empty-state.scss @@ -8,6 +8,16 @@ box-shadow: 0 -2px 0 -1px $ui-gray-300; } +.empty-state-transparent { + align-items: center; + color: $grey; + background: transparent; + display: flex; + justify-content: center; + padding: $spacing-xxl 0; + box-shadow: none; +} + .empty-state-content { max-width: 320px; } diff --git a/ui/app/styles/components/splash-page.scss b/ui/app/styles/components/splash-page.scss index 2b6c887bad..637bfd5fa4 100644 --- a/ui/app/styles/components/splash-page.scss +++ b/ui/app/styles/components/splash-page.scss @@ -21,5 +21,5 @@ } .splash-page-header { - padding: $size-6 $size-5; + padding: $size-6 0; } diff --git a/ui/app/templates/vault/cluster/unseal.hbs b/ui/app/templates/vault/cluster/unseal.hbs index 86be949bf6..d135f55443 100644 --- a/ui/app/templates/vault/cluster/unseal.hbs +++ b/ui/app/templates/vault/cluster/unseal.hbs @@ -1,26 +1,60 @@ - - -

- Unseal Vault -

- - - - - - +{{#if showLicenseError}} + + + + + + + +
+ +
+ + +
+
+ +

License documentation

+ +
+
+{{else}} + + +

+ Unseal Vault +

+ + +
+

{{capitalize model.name}} is {{if model.unsealed 'unsealed' 'sealed'}}

+

+ Unseal Vault by entering portions of the unseal key. This can be done via multiple mechanisms on multiple computers. Once all portions are entered, the root key will be decrypted and Vault will unseal. +

+
+ + + +
+

Seal/unseal documentation

+
+ + +{{/if}} diff --git a/ui/lib/core/addon/components/empty-state.js b/ui/lib/core/addon/components/empty-state.js index 4a455e0d31..62b82ec1af 100644 --- a/ui/lib/core/addon/components/empty-state.js +++ b/ui/lib/core/addon/components/empty-state.js @@ -14,7 +14,7 @@ import layout from '../templates/components/empty-state'; * @param title=null{String} - A short label for the empty state * @param subTitle=null{String} - A sub title that goes underneath the main title * @param message=null{String} - A description of why a user might be seeing the empty state and possibly instructions for actions they may take. - * @param [icon='']{String} - An optional param to display icon to the right of the title + * @param [icon='']{String} - An optional param to display icon to the left of the title * @param bottomBorder=false{Boolean} - A bottom border underneath the message. Generally used when you have links under the message */ diff --git a/ui/lib/core/addon/components/shamir-flow.js b/ui/lib/core/addon/components/shamir-flow.js index 7f109f06ed..b0426feb84 100644 --- a/ui/lib/core/addon/components/shamir-flow.js +++ b/ui/lib/core/addon/components/shamir-flow.js @@ -42,6 +42,7 @@ export default Component.extend(DEFAULTS, { }, onUpdate() {}, + onLicenseError() {}, onShamirSuccess() {}, // can be overridden w/an attr isComplete(data) { @@ -88,6 +89,10 @@ export default Component.extend(DEFAULTS, { if (e.httpStatus === 400) { this.set('errors', e.errors); } else { + // if licensing error, trigger parent method to handle + if (e.httpStatus === 500 && e.errors?.join(' ').includes('licensing is in an invalid state')) { + this.onLicenseError(); + } throw e; } }, diff --git a/ui/lib/core/addon/templates/components/shamir-flow.hbs b/ui/lib/core/addon/templates/components/shamir-flow.hbs index ace02e1d89..6b5bfa6b1d 100644 --- a/ui/lib/core/addon/templates/components/shamir-flow.hbs +++ b/ui/lib/core/addon/templates/components/shamir-flow.hbs @@ -148,7 +148,7 @@
{{input class="input"type="password" name="key" value=key data-test-shamir-input=true}}