Toast-style global notification state (#13341)

* toast style notification init

* Notificatino styles and messaging for variable save

* pre-PR cleanup

* Typo fix and 5sec timeout

* Prevent text from overlapping the close button

ui/app/components/secure-variable-form.js

@@ -10,6 +10,7 @@ import EmberObject from '@ember/object';
 
 export default class SecureVariableFormComponent extends Component {
   @service router;
+  @service flashMessages;
 
   @tracked
   shouldHideValues = true;
@@ -87,9 +88,27 @@ export default class SecureVariableFormComponent extends Component {
   @action
   async save(e) {
     e.preventDefault();
-    this.args.model.set('keyValues', this.keyValues);
-    this.args.model.setAndTrimPath();
-    await this.args.model.save();
+    try {
+      this.args.model.set('keyValues', this.keyValues);
+      this.args.model.setAndTrimPath();
+      await this.args.model.save();
+      this.flashMessages.add({
+        title: 'Secure Variable saved',
+        message: `${this.args.model.path} successfully saved`,
+        type: 'success',
+        destroyOnClick: false,
+        timeout: 5000,
+        showProgress: true,
+      });
+    } catch (error) {
+      this.flashMessages.add({
+        title: `Error saving ${this.args.model.path}`,
+        message: error,
+        type: 'error',
+        destroyOnClick: false,
+        sticky: true,
+      });
+    }
     this.router.transitionTo('variables.variable', this.args.model.path);
   }
 }

ui/app/controllers/application.js

@@ -15,6 +15,7 @@ export default class ApplicationController extends Controller {
   @service config;
   @service system;
   @service token;
+  @service flashMessages;
 
   queryParams = [
     {

ui/app/router.js

@@ -84,7 +84,7 @@ Router.map(function () {
     this.route(
       'variable',
       {
-        path: '/*path',
+        path: '/var/*path',
       },
       function () {
         this.route('edit');

ui/app/styles/core.scss

@@ -35,3 +35,4 @@
 @import './core/tag';
 @import './core/title';
 @import './core/typography';
+@import './core/notifications';

ui/app/styles/core/notifications.scss

@@ -0,0 +1,58 @@
+section.notifications {
+  position: fixed;
+  bottom: 10px;
+  right: 10px;
+
+  .flash-message {
+    width: 300px;
+    transition: all 700ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
+    padding: 1rem;
+    margin-bottom: 1rem;
+    box-shadow: 1px 1px 4px 0px rgb(0, 0, 0, 0.1);
+    position: relative;
+    overflow: hidden;
+    padding-right: 20px;
+
+    &.alert-success {
+      background-color: lighten($nomad-green, 50%);
+    }
+    &.alert-error {
+      background-color: lighten($danger, 45%);
+    }
+
+    h3 {
+      font-weight: bold;
+    }
+
+    span.close-button {
+      position: absolute;
+      top: 0;
+      right: 0;
+      padding: 10px;
+      line-height: 100%;
+      font-size: 1.5rem;
+      cursor: pointer;
+    }
+
+    .alert-progress {
+      width: 100%;
+      border-radius: 3px;
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      .alert-progressBar {
+        background-color: $nomad-green;
+        height: 2px;
+        width: 0%;
+      }
+    }
+
+    &.active {
+      .alert-progress {
+        .alert-progressBar {
+          width: 100%;
+        }
+      }
+    }
+  }
+}

ui/app/templates/application.hbs

@@ -4,6 +4,26 @@
   separator=" - "
 }}
 <SvgPatterns />
+
+<section class="notifications">
+  {{#each this.flashMessages.queue as |flash|}}
+  <FlashMessage @flash={{flash}} as |component flash close|>
+    <span class="close-button" role="button" {{on "click" (action close)}}>&times;</span>
+    {{#if flash.title}}
+    <h3>{{flash.title}}</h3>
+    {{/if}}
+    {{#if flash.message}}
+      <p>{{flash.message}}</p>
+    {{/if}}
+    {{#if component.showProgressBar}}
+      <div class="alert-progress">
+        <div class="alert-progressBar" style={{component.progressDuration}}></div>
+      </div>
+    {{/if}}
+  </FlashMessage>
+  {{/each}}
+</section>
+
 {{#if this.error}}
   <div class="error-container">
     <div data-test-error class="error-message">