[ui, helios] Toast Component (#16099)

* Template and styles

* @type to @color on flash messages

* Notifications service as wrapper

* Test cases updated for new notifs

.changelog/16099.txt

@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: Restyles "toast" notifications in the web UI with the Helios Design System
+```

ui/app/components/job-page/parts/title.js

@@ -9,6 +9,7 @@ import classic from 'ember-classic-decorator';
 @tagName('')
 export default class Title extends Component {
   @service router;
+  @service notifications;
 
   job = null;
   title = null;
@@ -34,12 +35,10 @@ export default class Title extends Component {
     try {
       const job = this.job;
       yield job.purge();
-      this.flashMessages.add({
+      this.notifications.add({
         title: 'Job Purged',
         message: `You have purged ${this.job.name}`,
-        type: 'success',
-        destroyOnClick: false,
-        timeout: 5000,
+        color: 'success',
       });
       this.router.transitionTo('jobs');
     } catch (err) {

ui/app/components/policy-editor.js

@@ -4,7 +4,7 @@ import { inject as service } from '@ember/service';
 import { alias } from '@ember/object/computed';
 
 export default class PolicyEditorComponent extends Component {
-  @service flashMessages;
+  @service notifications;
   @service router;
   @service store;
 
@@ -41,22 +41,19 @@ export default class PolicyEditorComponent extends Component {
 
       await this.policy.save();
 
-      this.flashMessages.add({
+      this.notifications.add({
         title: 'Policy Saved',
-        type: 'success',
-        destroyOnClick: false,
-        timeout: 5000,
+        color: 'success',
       });
 
       if (shouldRedirectAfterSave) {
         this.router.transitionTo('policies.policy', this.policy.id);
       }
     } catch (error) {
-      this.flashMessages.add({
+      this.notifications.add({
         title: `Error creating Policy ${this.policy.name}`,
         message: error,
-        type: 'error',
-        destroyOnClick: false,
+        color: 'critical',
         sticky: true,
       });
     }

ui/app/components/variable-form.js

@@ -24,7 +24,7 @@ const EMPTY_KV = {
 const invalidKeyCharactersRegex = new RegExp(/[^_\p{Letter}\p{Number}]/gu);
 
 export default class VariableFormComponent extends Component {
-  @service flashMessages;
+  @service notifications;
   @service router;
   @service store;
 
@@ -240,23 +240,20 @@ export default class VariableFormComponent extends Component {
       this.args.model.setAndTrimPath();
       await this.args.model.save({ adapterOptions: { overwrite } });
 
-      this.flashMessages.add({
+      this.notifications.add({
         title: 'Variable saved',
         message: `${this.path} successfully saved`,
-        type: 'success',
-        destroyOnClick: false,
-        timeout: 5000,
+        color: 'success',
       });
       this.removeExitHandler();
       this.router.transitionTo('variables.variable', this.args.model.id);
     } catch (error) {
       notifyConflict(this)(error);
       if (!this.hasConflict) {
-        this.flashMessages.add({
+        this.notifications.add({
           title: `Error saving ${this.path}`,
           message: error,
-          type: 'error',
-          destroyOnClick: false,
+          color: 'critical',
           sticky: true,
         });
       } else {

ui/app/controllers/application.js

@@ -16,7 +16,7 @@ export default class ApplicationController extends Controller {
   @service config;
   @service system;
   @service token;
-  @service flashMessages;
+  @service notifications;
 
   /**
    * @type {KeyboardService}

ui/app/controllers/clients/client/index.js

@@ -24,7 +24,7 @@ export default class ClientController extends Controller.extend(
   Sortable,
   Searchable
 ) {
-  @service flashMessages;
+  @service notifications;
 
   queryParams = [
     {
@@ -316,21 +316,18 @@ export default class ClientController extends Controller.extend(
       e.preventDefault();
       await this.model.addMeta({ [key]: value });
 
-      this.flashMessages.add({
+      this.notifications.add({
         title: 'Metadata added',
         message: `${key} successfully saved`,
-        type: 'success',
-        destroyOnClick: false,
-        timeout: 3000,
+        color: 'success',
       });
     } catch (err) {
       const error =
         messageFromAdapterError(err) || 'Could not save new dynamic metadata';
-      this.flashMessages.add({
+      this.notifications.add({
         title: `Error saving Metadata`,
         message: error,
-        type: 'error',
-        destroyOnClick: false,
+        color: 'critical',
         sticky: true,
       });
     }

ui/app/controllers/jobs/run/templates/manage.js

@@ -4,7 +4,7 @@ import { tracked } from '@glimmer/tracking';
 import { task } from 'ember-concurrency';
 
 export default class JobsRunTemplatesManageController extends Controller {
-  @service flashMessages;
+  @service notifications;
   @service router;
 
   get templates() {
@@ -27,19 +27,16 @@ export default class JobsRunTemplatesManageController extends Controller {
   @task(function* (model) {
     try {
       yield model.destroyRecord();
-      this.flashMessages.add({
+      this.notifications.add({
         title: 'Job template deleted',
         message: `${model.path} successfully deleted`,
-        type: 'success',
-        destroyOnClick: false,
-        timeout: 5000,
+        color: 'success',
       });
     } catch (err) {
-      this.flashMessages.add({
+      this.notifications.add({
         title: `Job template could not be deleted.`,
         message: err,
-        type: 'error',
-        destroyOnClick: false,
+        color: 'critical',
         sticky: true,
       });
     }

ui/app/controllers/jobs/run/templates/new.js

@@ -10,6 +10,7 @@ export default class JobsRunTemplatesNewController extends Controller {
   @service system;
   @tracked templateName = null;
   @tracked templateNamespace = 'default';
+  @service notifications;
 
   get namespaceOptions() {
     const namespaces = this.store
@@ -60,22 +61,18 @@ export default class JobsRunTemplatesNewController extends Controller {
     try {
       await this.model.save({ adapterOptions: { overwrite } });
 
-      this.flashMessages.add({
+      this.notifications.add({
         title: 'Job template saved',
         message: `${this.templateName} successfully saved`,
-        type: 'success',
-        destroyOnClick: false,
-        timeout: 5000,
+        color: 'success',
       });
 
       this.router.transitionTo('jobs.run.templates');
     } catch (e) {
-      this.flashMessages.add({
+      this.notifications.add({
         title: 'Job template cannot be saved.',
         message: e,
-        type: 'error',
-        destroyOnClick: false,
-        timeout: 5000,
+        color: 'critical',
       });
     }
   }

ui/app/controllers/jobs/run/templates/template.js

@@ -5,7 +5,7 @@ import { tracked } from '@glimmer/tracking';
 import { task } from 'ember-concurrency';
 
 export default class JobsRunTemplatesController extends Controller {
-  @service flashMessages;
+  @service notifications;
   @service router;
   @service system;
 
@@ -34,22 +34,18 @@ export default class JobsRunTemplatesController extends Controller {
     try {
       await this.model.save({ adapterOptions: { overwrite } });
 
-      this.flashMessages.add({
+      this.notifications.add({
         title: 'Job template saved',
         message: `${this.model.path} successfully editted`,
-        type: 'success',
-        destroyOnClick: false,
-        timeout: 5000,
+        color: 'success',
       });
 
       this.router.transitionTo('jobs.run.templates');
     } catch (e) {
-      this.flashMessages.add({
+      this.notifications.add({
         title: 'Job template cannot be editted.',
         message: e,
-        type: 'error',
-        destroyOnClick: false,
-        timeout: 5000,
+        color: 'critical',
       });
     }
   }
@@ -58,20 +54,17 @@ export default class JobsRunTemplatesController extends Controller {
     try {
       yield this.model.destroyRecord();
 
-      this.flashMessages.add({
+      this.notifications.add({
         title: 'Job template deleted',
         message: `${this.model.path} successfully deleted`,
-        type: 'success',
-        destroyOnClick: false,
-        timeout: 5000,
+        color: 'success',
       });
       this.router.transitionTo('jobs.run.templates.manage');
     } catch (err) {
-      this.flashMessages.add({
+      this.notifications.add({
         title: `Job template could not be deleted.`,
         message: err,
-        type: 'error',
-        destroyOnClick: false,
+        color: 'critical',
         sticky: true,
       });
     }

ui/app/controllers/policies/policy.js

@@ -7,7 +7,7 @@ import { alias } from '@ember/object/computed';
 import { task } from 'ember-concurrency';
 
 export default class PoliciesPolicyController extends Controller {
-  @service flashMessages;
+  @service notifications;
   @service router;
   @service store;
 
@@ -37,19 +37,18 @@ export default class PoliciesPolicyController extends Controller {
     try {
       yield this.policy.deleteRecord();
       yield this.policy.save();
-      this.flashMessages.add({
+      this.notifications.add({
         title: 'Policy Deleted',
-        type: 'success',
+        color: 'success',
+        type: `success`,
         destroyOnClick: false,
-        timeout: 5000,
       });
       this.router.transitionTo('policies');
     } catch (err) {
-      this.flashMessages.add({
+      this.notifications.add({
         title: `Error deleting Policy ${this.policy.name}`,
         message: err,
-        type: 'error',
-        destroyOnClick: false,
+        color: 'critical',
         sticky: true,
       });
     }
@@ -75,11 +74,10 @@ export default class PoliciesPolicyController extends Controller {
       });
       yield newToken.save();
       yield this.refreshTokens();
-      this.flashMessages.add({
+      const thing = this.notifications.add({
         title: 'Example Token Created',
         message: `${newToken.secret}`,
-        type: 'success',
-        destroyOnClick: false,
+        color: 'success',
         timeout: 30000,
         customAction: {
           label: 'Copy to Clipboard',
@@ -88,6 +86,7 @@ export default class PoliciesPolicyController extends Controller {
           },
         },
       });
+      console.log('thing', thing);
     } catch (err) {
       this.error = {
         title: 'Error creating new token',
@@ -104,11 +103,9 @@ export default class PoliciesPolicyController extends Controller {
       yield token.deleteRecord();
       yield token.save();
       yield this.refreshTokens();
-      this.flashMessages.add({
+      this.notifications.add({
         title: 'Token successfully deleted',
-        type: 'success',
-        destroyOnClick: false,
-        timeout: 5000,
+        color: 'success',
       });
     } catch (err) {
       this.error = {

ui/app/controllers/variables/variable/index.js

@@ -13,6 +13,8 @@ export default class VariablesVariableIndexController extends Controller {
   @tracked sortProperty = 'key';
   @tracked sortDescending = true;
 
+  @service notifications;
+
   get sortedKeyValues() {
     const sorted = this.model.keyValues.sortBy(this.sortProperty);
     return this.sortDescending ? sorted : sorted.reverse();
@@ -39,19 +41,16 @@ export default class VariablesVariableIndexController extends Controller {
       } else {
         this.router.transitionTo('variables');
       }
-      this.flashMessages.add({
+      this.notifications.add({
         title: 'Variable deleted',
         message: `${this.model.path} successfully deleted`,
-        type: 'success',
-        destroyOnClick: false,
-        timeout: 5000,
+        color: 'success',
       });
     } catch (err) {
-      this.flashMessages.add({
+      this.notifications.add({
         title: `Error deleting ${this.model.path}`,
         message: err,
-        type: 'error',
-        destroyOnClick: false,
+        color: 'critical',
         sticky: true,
       });
     }

ui/app/routes/allocations/allocation.js

@@ -8,7 +8,7 @@ import {
 import WithWatchers from 'nomad-ui/mixins/with-watchers';
 import notifyError from 'nomad-ui/utils/notify-error';
 export default class AllocationRoute extends Route.extend(WithWatchers) {
-  @service flashMessages;
+  @service notifications;
   @service router;
   @service store;
 
@@ -51,11 +51,10 @@ export default class AllocationRoute extends Route.extend(WithWatchers) {
     } catch (e) {
       const [allocId, transition] = arguments;
       if (e?.errors[0]?.detail === 'alloc not found' && !!transition.from) {
-        this.flashMessages.add({
+        this.notifications.add({
           title: `Error:  Not Found`,
           message: `Allocation of id:  ${allocId} was not found.`,
-          type: 'error',
-          destroyOnClick: false,
+          color: 'critical',
           sticky: true,
         });
         this.goBackToReferrer(transition.from.name);