Merge pull request #5672 from hashicorp/ui-alerts-update

UI: Update banner and popup alerts

ui/app/components/message-in-page.js → ui/app/components/alert-banner.js

@@ -17,6 +17,4 @@ export default Component.extend({
   alertType: computed('type', function() {
     return messageTypes([this.get('type')]);
   }),
-
-  messageClass: 'message-body',
 });

ui/app/components/alert-inline.js

@@ -0,0 +1,22 @@
+import Component from '@ember/component';
+import { computed } from '@ember/object';
+
+import { messageTypes } from 'vault/helpers/message-types';
+
+export default Component.extend({
+  type: null,
+
+  classNames: ['message-inline'],
+
+  textClass: computed('type', function() {
+    if (this.get('type') == 'danger') {
+      return messageTypes([this.get('type')]).glyphClass;
+    }
+
+    return
+  }),
+
+  alertType: computed('type', function() {
+    return messageTypes([this.get('type')]);
+  }),
+});

ui/app/components/flash-message.js

@@ -7,7 +7,7 @@ export default FlashMessage.extend({
   alertType: computed('flash.type', {
     get() {
       const flashType = getWithDefault(this, 'flash.type', '');
-      let prefix = 'notification has-border is-';
+      let prefix = 'is-';
 
       return `${prefix}${flashType}`;
     },

ui/app/styles/components/global-flash.scss

@@ -1,17 +1,13 @@
 .global-flash {
-  position: fixed;
-  max-width: 450px;
-  width: 95%;
   bottom: 0;
-  left: 0;
+  left: $spacing-s;
   margin: 10px;
+  max-width: $drawer-width;
+  position: fixed;
+  width: 95%;
   z-index: 300;
 
-  .notification {
+  .message {
     box-shadow: $box-shadow-high;
-    margin: 20px;
-    @include until($desktop) {
-      margin: 1rem 0;
-    }
   }
 }

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

@@ -1,3 +1,4 @@
 .login-form {
   box-shadow: $box-shadow, $box-shadow-high;
+  overflow: auto;
 }

ui/app/styles/components/splash-page.scss

@@ -19,9 +19,7 @@
 .splash-page-container {
   margin: $size-2 0;
 }
+
 .splash-page-header {
   padding: $size-6 $size-5;
 }
-.splash-page-sub-header {
-  margin: 0 $size-5 $size-6;
-}

ui/app/styles/components/token-expire-warning.scss

@@ -11,9 +11,7 @@
 .token-expire-warning .content p {
   padding-right: $size-6;
 }
-.token-expire-warning .message-in-page {
-  margin: 0;
-}
 .token-expire-warning .message {
+  margin: 0;
   width: 100%;
 }

ui/app/styles/components/unseal-warning.scss

@@ -1,5 +1,3 @@
-.unseal-warning.message,
-.unseal-warning .message-body {
-  border-radius: 0;
-  margin-bottom: 0;
+.unseal-warning.message {
+  margin: -1px -1px 0;
 }

ui/app/styles/core.scss

@@ -63,7 +63,6 @@
 @import "./components/loader";
 @import "./components/login-form";
 @import "./components/masked-input";
-@import "./components/message-in-page";
 @import "./components/namespace-picker";
 @import "./components/namespace-reminder";
 @import "./components/page-header";

ui/app/styles/core/message.scss

@@ -1,38 +1,113 @@
 .message {
-  &.is-list {
-    margin: $size-10 0;
+  background: $blue-010;
+  border: 1px solid $blue-100;
+  margin-bottom: $spacing-s;
+  padding: $spacing-s $spacing-m $spacing-m $spacing-s;
+  position: relative;
+
+  .message-icon {
+    color: $blue;
+    margin-right: $spacing-xs;
+  }
+
+  .close-button {
+    background: transparent;
+    border: 0;
+    color: $grey;
+    cursor: pointer;
+    position: absolute;
+    right: $spacing-s;
+    top: $spacing-m;
+  }
+
+  .message-title {
+    color: $blue-500;
+    font-size: 16px;
+    font-weight: $font-weight-bold;
+    line-height: 1.25;
+  }
+
+  .close-button + .message-title {
+    padding-right: $spacing-m;
   }
 
-  &.is-warning {
-    .message-body {
-      color: $yellow-darkest;
-      padding: 0.75rem 1.25rem;
+  .message-body {
+    border: 0;
+    margin-top: $spacing-xxs;
+  }
+
+  p {
+    font-size: $size-8;
+    border: 0;
+    padding: 0;
+  }
+
+  .message-actions {
+    margin-top: $spacing-xs;
+
+    a,
+    a:not(.button):not(.file-delete-button):not(.tag) {
+      color: $blue;
+      font-weight: $font-weight-semibold;
+      text-decoration: none;
+    }
+
+    > * + * {
+      margin-left: $spacing-xs;
     }
   }
 
   &.is-highlight {
-    background: $yellow-lightest;
-    .message-body {
-      border: none;
-      box-shadow: 0 0 0 1px $yellow;
-      color: $yellow-darkest;
+    background: $yellow-010;
+    border: 1px solid $yellow-100;
+
+    .message-icon {
+      color: $yellow-500;
     }
-    .has-text-highlight,
-    .close-button {
-      color: $yellow;
+
+    .message-title {
+      color: $orange-700;
     }
-    .title,
-    code {
-      background: none;
-      color: inherit;
+  }
+
+  &.is-success {
+    background: $green-010;
+    border: 1px solid $green-100;
+
+    .message-icon {
+      color: $green-500;
     }
-    .content .button {
-      border-color: $yellow;
-      color: $yellow-darkest;
+
+    .message-title {
+      color: $green-700;
     }
   }
 
-  .content {
-    margin-bottom: 0;
+  &.is-danger {
+    background: $red-010;
+    border: 1px solid $red-050;
+
+    .message-icon {
+      color: $red-500;
+    }
+
+    .message-title {
+      color: $red-700;
+    }
+  }
+}
+
+.message-inline {
+  display: flex;
+  margin: -$spacing-xs 0 $spacing-l;
+
+  .icon {
+    flex: 0;
+    margin: 0 $spacing-xxs 0 0;
+    min-width: fit-content;
+  }
+
+  .p {
+    margin: 0;
   }
 }

ui/app/styles/core/notification.scss

@@ -1,8 +1,10 @@
 .notification {
-  padding: 1rem 2.5rem 1rem 1.5rem;
+  padding: $spacing-m $spacing-m $spacing-m $spacing-s;
+
   .title {
     font-weight: $weight-bold;
   }
+
   &.has-border {
     border: 1px solid currentColor;
     border-left-width: 10px;

ui/app/styles/utils/_colors.scss

@@ -1,6 +1,7 @@
 // Colors that will eventually be in Structure package
 
 // Vault Gray
+$vault-gray-010: #FDFDFE;
 $vault-gray-050: #F7FAFC;
 $vault-gray-100: #EBEEF5;
 $vault-gray-200: #D3DBE6;
@@ -15,6 +16,7 @@ $vault-gray: $vault-gray-500;
 $vault-gray-dark: $vault-gray-700;
 
 // UI Gray
+$ui-gray-010: #FBFBFC;
 $ui-gray-050: #F7F8FA;
 $ui-gray-100: #EBEEF2;
 $ui-gray-200: #DCE0E6;
@@ -30,6 +32,7 @@ $grey-dark: $ui-gray-700;
 $grey-darkest: $ui-gray-900;
 
 // Blue
+$blue-010: #FBFCFF;
 $blue-050: #F0F5FF;
 $blue-100: #BFD4FF;
 $blue-300: #5B92FF;
@@ -43,6 +46,7 @@ $blue-dark: $blue-700;
 $blue-darkest: $blue-900;
 
 // Red
+$red-010: #FDFAFB;
 $red-050: #F9ECEE;
 $red-100: #EFC7CC;
 $red-300: #DB7D88;
@@ -56,6 +60,7 @@ $red-dark: $red-700;
 $red-darkest: $red-900;
 
 // Green
+$green-010: #FAFDFA;
 $green-050: #ECF7ED;
 $green-100: #C6E9C9;
 $green-300: #7ACC81;
@@ -69,6 +74,7 @@ $green-dark: $green-700;
 $green-darkest: $green-900;
 
 // Orange
+$orange-010: #FFFCFA;
 $orange-050: #FEF4EC;
 $orange-100: #FDE0C8;
 $orange-300: #FBB77F;
@@ -82,6 +88,7 @@ $orange-dark: $orange-700;
 $orange-darkest: $orange-900;
 
 // Yellow
+$yellow-010: #FFFDF6;
 $yellow-050: #FFFBED;
 $yellow-100: #FDEEBA;
 $yellow-300: #FBD95E;

ui/app/templates/components/alert-banner.hbs

@@ -0,0 +1,31 @@
+<div data-test-flash-message=true>
+  <div class="columns is-mobile is-variable is-1">
+    <div class="column is-narrow message-icon">
+      <ICon
+        @glyph="{{alertType.glyph}}"
+        @class="{{alertType.glyphClass}}"
+        @size="20"
+        @excludeIconClass="true"
+      />
+    </div>
+    {{#if yieldWithoutColumn}}
+      {{yield}}
+    {{else}}
+      <div class="column">
+        <div class="message-title">
+          {{or title alertType.text}}
+        </div>
+        {{#if message}}
+          <p class="message-body">
+            {{message}}
+          </p>
+        {{/if}}
+        {{#if hasBlock}}
+          <p class="message-actions">
+            {{yield}}
+          </p>
+        {{/if}}
+      </div>
+    {{/if}}
+  </div>
+</div>

ui/app/templates/components/alert-inline.hbs

@@ -0,0 +1,8 @@
+<ICon
+  @glyph="{{alertType.glyph}}"
+  @class="{{alertType.glyphClass}}"
+  @size="16"
+/>
+<p class="{{textClass}}">
+  {{message}}
+</p>

ui/app/templates/components/config-pki-ca.hbs

@@ -32,9 +32,11 @@
     <form {{action "saveCA" on="submit"}} data-test-generate-root-cert="true">
       <NamespaceReminder @mode="save" @noun="PKI change" />
       {{#if model.uploadPemBundle}}
-        {{#message-in-page type="warning" data-test-warning=true}}
-          <em>If you have already set a certificate and key, they will be overridden with the successful saving of a new <code>PEM bundle</code>.</em>
-        {{/message-in-page}}
+        <AlertBanner
+          @type="warning"
+          @message="If you have already set a certificate and key, they will be overridden with the successful saving of a new PEM bundle."
+          data-test-warning
+        />
       {{/if}}
       {{partial "partials/form-field-groups-loop"}}
       <div class="field is-grouped is-grouped-split box is-fullwidth is-bottomless">
@@ -67,9 +69,11 @@
   {{/if}}
 {{else if signIntermediate}}
   {{#if (or model.certificate)}}
-    {{#message-in-page data-test-warning type="warning"}}
-      If using this for an Intermediate CA in Vault, copy the certificate below and write it to the PKI mount being used as an intermediate using the `Set signed Intermediate` endpoint.
-    {{/message-in-page}}
+    <AlertBanner
+      @type="warning"
+      @message="If using this for an Intermediate CA in Vault, copy the certificate below and write it to the PKI mount being used as an intermediate using the `Set signed Intermediate` endpoint."
+      data-test-warning
+    />
     {{#each model.attrs as |attr|}}
       {{info-table-row data-test-table-row label=(capitalize (or attr.options.label (humanize (dasherize attr.name)))) value=(get model attr.name)}}
     {{/each}}