From 26d6cceb20b607f8298fb43eb986919ab3a00264 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 000000000000..42d683d81f57 --- /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 7f975cd9011b..8d1e76adbdc0 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 9f685794bdad..7a90a73ea205 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 2b6c887bade5..637bfd5fa4bb 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 86be949bf65b..d135f55443b1 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 4a455e0d3155..62b82ec1af65 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 7f109f06ede5..b0426feb843c 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 ace02e1d89a0..6b5bfa6b1dcc 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}}