[ui, helios] Toast Component

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 flashMessages;
 
   job = null;
   title = null;
@@ -37,7 +38,7 @@ export default class Title extends Component {
       this.flashMessages.add({
         title: 'Job Purged',
         message: `You have purged ${this.job.name}`,
-        type: 'success',
+        color: 'success',
         destroyOnClick: false,
         timeout: 5000,
       });

ui/app/components/policy-editor.js

@@ -43,7 +43,7 @@ export default class PolicyEditorComponent extends Component {
 
       this.flashMessages.add({
         title: 'Policy Saved',
-        type: 'success',
+        color: 'success',
         destroyOnClick: false,
         timeout: 5000,
       });
@@ -55,7 +55,7 @@ export default class PolicyEditorComponent extends Component {
       this.flashMessages.add({
         title: `Error creating Policy ${this.policy.name}`,
         message: error,
-        type: 'error',
+        color: 'critical',
         destroyOnClick: false,
         sticky: true,
       });

ui/app/components/variable-form.js

@@ -233,7 +233,7 @@ export default class VariableFormComponent extends Component {
       this.flashMessages.add({
         title: 'Variable saved',
         message: `${this.path} successfully saved`,
-        type: 'success',
+        color: 'success',
         destroyOnClick: false,
         timeout: 5000,
       });
@@ -245,7 +245,7 @@ export default class VariableFormComponent extends Component {
         this.flashMessages.add({
           title: `Error saving ${this.path}`,
           message: error,
-          type: 'error',
+          color: 'critical',
           destroyOnClick: false,
           sticky: true,
         });

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

@@ -319,7 +319,7 @@ export default class ClientController extends Controller.extend(
       this.flashMessages.add({
         title: 'Metadata added',
         message: `${key} successfully saved`,
-        type: 'success',
+        color: 'success',
         destroyOnClick: false,
         timeout: 3000,
       });
@@ -329,7 +329,7 @@ export default class ClientController extends Controller.extend(
       this.flashMessages.add({
         title: `Error saving Metadata`,
         message: error,
-        type: 'error',
+        color: 'critical',
         destroyOnClick: false,
         sticky: true,
       });

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

@@ -30,15 +30,15 @@ export default class JobsRunTemplatesManageController extends Controller {
       this.flashMessages.add({
         title: 'Job template deleted',
         message: `${model.path} successfully deleted`,
-        type: 'success',
+        color: 'success',
         destroyOnClick: false,
         timeout: 5000,
       });
     } catch (err) {
       this.flashMessages.add({
         title: `Job template could not be deleted.`,
         message: err,
-        type: 'error',
+        color: 'critical',
         destroyOnClick: false,
         sticky: true,
       });

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

@@ -63,7 +63,7 @@ export default class JobsRunTemplatesNewController extends Controller {
       this.flashMessages.add({
         title: 'Job template saved',
         message: `${this.templateName} successfully saved`,
-        type: 'success',
+        color: 'success',
         destroyOnClick: false,
         timeout: 5000,
       });
@@ -73,7 +73,7 @@ export default class JobsRunTemplatesNewController extends Controller {
       this.flashMessages.add({
         title: 'Job template cannot be saved.',
         message: e,
-        type: 'error',
+        color: 'critical',
         destroyOnClick: false,
         timeout: 5000,
       });

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

@@ -37,7 +37,7 @@ export default class JobsRunTemplatesController extends Controller {
       this.flashMessages.add({
         title: 'Job template saved',
         message: `${this.model.path} successfully editted`,
-        type: 'success',
+        color: 'success',
         destroyOnClick: false,
         timeout: 5000,
       });
@@ -47,7 +47,7 @@ export default class JobsRunTemplatesController extends Controller {
       this.flashMessages.add({
         title: 'Job template cannot be editted.',
         message: e,
-        type: 'error',
+        color: 'critical',
         destroyOnClick: false,
         timeout: 5000,
       });
@@ -61,7 +61,7 @@ export default class JobsRunTemplatesController extends Controller {
       this.flashMessages.add({
         title: 'Job template deleted',
         message: `${this.model.path} successfully deleted`,
-        type: 'success',
+        color: 'success',
         destroyOnClick: false,
         timeout: 5000,
       });
@@ -70,7 +70,7 @@ export default class JobsRunTemplatesController extends Controller {
       this.flashMessages.add({
         title: `Job template could not be deleted.`,
         message: err,
-        type: 'error',
+        color: 'critical',
         destroyOnClick: false,
         sticky: true,
       });

ui/app/controllers/policies/policy.js

@@ -39,7 +39,7 @@ export default class PoliciesPolicyController extends Controller {
       yield this.policy.save();
       this.flashMessages.add({
         title: 'Policy Deleted',
-        type: 'success',
+        color: 'success',
         destroyOnClick: false,
         timeout: 5000,
       });
@@ -48,7 +48,7 @@ export default class PoliciesPolicyController extends Controller {
       this.flashMessages.add({
         title: `Error deleting Policy ${this.policy.name}`,
         message: err,
-        type: 'error',
+        color: 'critical',
         destroyOnClick: false,
         sticky: true,
       });
@@ -78,7 +78,7 @@ export default class PoliciesPolicyController extends Controller {
       this.flashMessages.add({
         title: 'Example Token Created',
         message: `${newToken.secret}`,
-        type: 'success',
+        color: 'success',
         destroyOnClick: false,
         timeout: 30000,
         customAction: {
@@ -106,7 +106,7 @@ export default class PoliciesPolicyController extends Controller {
       yield this.refreshTokens();
       this.flashMessages.add({
         title: 'Token successfully deleted',
-        type: 'success',
+        color: 'success',
         destroyOnClick: false,
         timeout: 5000,
       });

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

@@ -42,15 +42,15 @@ export default class VariablesVariableIndexController extends Controller {
       this.flashMessages.add({
         title: 'Variable deleted',
         message: `${this.model.path} successfully deleted`,
-        type: 'success',
+        color: 'success',
         destroyOnClick: false,
         timeout: 5000,
       });
     } catch (err) {
       this.flashMessages.add({
         title: `Error deleting ${this.model.path}`,
         message: err,
-        type: 'error',
+        color: 'critical',
         destroyOnClick: false,
         sticky: true,
       });

ui/app/routes/allocations/allocation.js

@@ -54,7 +54,7 @@ export default class AllocationRoute extends Route.extend(WithWatchers) {
         this.flashMessages.add({
           title: `Error:  Not Found`,
           message: `Allocation of id:  ${allocId} was not found.`,
-          type: 'error',
+          color: 'critical',
           destroyOnClick: false,
           sticky: true,
         });

ui/app/routes/jobs/run/index.js

@@ -54,7 +54,7 @@ export default class JobsRunIndexRoute extends Route {
       this.flashMessages.add({
         title: `Error loading job template`,
         message: error404.detail,
-        type: 'error',
+        color: 'critical',
         destroyOnClick: false,
         sticky: true,
       });

ui/app/services/token.js

@@ -154,7 +154,7 @@ export default class TokenService extends Service {
                 message: `Your token access expires ${moment(
                   this.selfToken.expirationTime
                 ).fromNow()}`,
-                type: 'error',
+                color: 'warning',
                 destroyOnClick: false,
                 sticky: true,
                 customCloseAction: () => {

ui/app/styles/core/notifications.scss

@@ -1,66 +1,14 @@
-$bonusRightPadding: 20px;
-
 section.notifications {
   position: fixed;
-  bottom: 10px;
-  right: 10px;
+  bottom: 20px;
+  right: 20px;
   z-index: 100;
+  justify-items: right;
+  display: grid;
 
   .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: $bonusRightPadding;
-
-    &.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%;
-        }
-      }
-    }
-
-    .custom-action-button {
-      width: calc(100% + $bonusRightPadding - 1rem);
-      margin: 1.5rem 0 0;
+    &:not(:last-child) {
+      margin-bottom: 1rem;
     }
   }
 }

ui/app/templates/application.hbs

@@ -9,26 +9,25 @@
 <section class="notifications">
   {{#each this.flashMessages.queue as |flash|}}
   <FlashMessage @flash={{flash}} as |component flash close|>
-    <span class="close-button" role="button" {{on "click"
-      (queue
-        (action close)
-        (action (optional flash.customCloseAction))
-      )
-    }}>&times;</span>
-    {{#if flash.title}}
-    <h3>{{flash.title}}</h3>
-    {{/if}}
-    {{#if flash.message}}
-      <p>{{flash.message}}</p>
-    {{/if}}
-    {{#if flash.customAction}}
-      <button type="button" class="button custom-action-button" {{on "click" (action flash.customAction.action)}}>{{flash.customAction.label}}</button>
-    {{/if}}
-    {{#if component.showProgressBar}}
-      <div class="alert-progress">
-        <div class="alert-progressBar" style={{component.progressDuration}}></div>
-      </div>
-    {{/if}}
+    <Hds::Toast
+      @color={{or flash.color "neutral"}}
+      @onDismiss={{
+        queue
+          (action close)
+          (action (optional flash.customCloseAction))
+
+      }}
+    as |T|>
+      {{#if flash.title}}
+        <T.Title>{{flash.title}}</T.Title>
+      {{/if}}
+      {{#if flash.message}}
+        <T.Description>{{flash.message}}</T.Description>
+      {{/if}}
+      {{#if flash.customAction}}
+        <T.Button @text={{flash.customAction.label}} @color="secondary" {{on "click" (action flash.customAction.action)}} />
+      {{/if}}
+    </Hds::Toast>
   </FlashMessage>
   {{/each}}
 </section>