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">

ui/package.json

@@ -71,6 +71,7 @@
     "ember-cli-clipboard": "^0.13.0",
     "ember-cli-dependency-checker": "^3.2.0",
     "ember-cli-deprecation-workflow": "^2.1.0",
+    "ember-cli-flash": "^3.0.0",
     "ember-cli-funnel": "^0.6.1",
     "ember-cli-htmlbars": "^5.7.2",
     "ember-cli-inject-live-reload": "^2.1.0",

ui/tests/helpers/flash-message.js

@@ -0,0 +1,3 @@
+import FlashObject from 'ember-cli-flash/flash/object';
+
+FlashObject.reopen({ init() {} });

ui/yarn.lock

@@ -2500,7 +2500,7 @@
     ember-cli-babel "^7.22.1"
     ember-compatibility-helpers "^1.1.1"
 
-"@ember/render-modifiers@^2.0.0", "@ember/render-modifiers@^2.0.4":
+"@ember/render-modifiers@^2.0.0", "@ember/render-modifiers@^2.0.2", "@ember/render-modifiers@^2.0.4":
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/@ember/render-modifiers/-/render-modifiers-2.0.4.tgz#0ac7af647cb736076dbfcd54ca71e090cd329d71"
   integrity sha512-Zh/fo5VUmVzYHkHVvzWVjJ1RjFUxA2jH0zCp2+DQa80Bf3DUXauiEByxU22UkN4LFT55DBFttC0xCQSJG3WTsg==
@@ -9235,7 +9235,7 @@ ember-assign-helper@^0.3.0:
     ember-cli-babel "^7.19.0"
     ember-cli-htmlbars "^4.3.1"
 
-ember-auto-import@^1.10.1, ember-auto-import@^1.11.3, ember-auto-import@^1.2.19, ember-auto-import@^1.6.0, ember-auto-import@^2.4.0:
+ember-auto-import@^1.10.1, ember-auto-import@^1.11.3, ember-auto-import@^1.2.19, ember-auto-import@^1.6.0, ember-auto-import@^2.2.4, ember-auto-import@^2.4.0:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/ember-auto-import/-/ember-auto-import-2.4.0.tgz#91c4797f08315728086e35af954cb60bd23c14bc"
   integrity sha512-BwF6iTaoSmT2vJ9NEHEGRBCh2+qp+Nlaz/Q7roqNSxl5oL5iMRwenPnHhOoBPTYZvPhcV/KgXR5e+pBQ107plQ==
@@ -9413,6 +9413,16 @@ ember-cli-deprecation-workflow@^2.1.0:
     broccoli-plugin "^4.0.5"
     ember-cli-htmlbars "^5.3.2"
 
+ember-cli-flash@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/ember-cli-flash/-/ember-cli-flash-3.0.0.tgz#ca914b18427472608805a82e6737fa45f5945a9f"
+  integrity sha512-AIJJm+Kg7qFkQLnNxNkiIypi7m8MK8Ix4ZA1DCPyuZbjI8JBc3Q0rqQcCd0AflxH2/X5bhYG+ej0885XtH1svQ==
+  dependencies:
+    "@ember/render-modifiers" "^2.0.2"
+    ember-auto-import "^2.2.4"
+    ember-cli-babel "^7.26.10"
+    ember-cli-htmlbars "^6.0.1"
+
 ember-cli-funnel@^0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/ember-cli-funnel/-/ember-cli-funnel-0.6.1.tgz#f8b248a35fb88bc3aea2ac6e2a74e3e6083b4283"