chore: 🤖 add action notifications on projects

addons/rose/addon/components/rose/notification.js

@@ -21,7 +21,7 @@ export default Component.extend({
     let icon = 'info-circle-fill';
 
     switch(this.style) {
-      case 'failure':
+      case 'error':
         icon = 'cancel-square-fill';
         break;
       case 'success':

addons/rose/addon/components/rose/notification.stories.mdx

@@ -8,7 +8,7 @@ import { text, boolean, select } from '@storybook/addon-knobs';
 # Notification
 
 Notifications come in four semantic styles:  `info` (default), `success`,
-`warning`, and `failure`.  Heading text is required.  Additional block content
+`warning`, and `error`.  Heading text is required.  Additional block content
 is optional.
 
 Notifications may be made dismissible by passing a `@dismiss` function into
@@ -69,7 +69,7 @@ handler takes appropriate action and hides the notification.
         Careful now.
       </Rose::Notification>
       <Rose::Notification
-        @style="failure"
+        @style="error"
         @heading="Error"
         @dismiss={{dismiss}}
         @dismissText="Dismiss"

addons/rose/addon/styles/rose/components/_notification.scss

@@ -82,7 +82,7 @@
     color: var(--header-color);
   }
 
-  &.is-failure {
+  &.is-error {
     --icon-color: var(--failure);
     --header-color: var(--failure);
     --border-color: var(--failure-subtler-1);

addons/rose/tests/dummy/app/templates/index.hbs

@@ -31,7 +31,7 @@
 Dummy app index template
 
 <Rose::Notification
-  @style="failure"
+  @style="error"
   @heading="Error"
   @dismiss={{this.actionHandler}}
   @dismissText="Dismiss"

ui/core/app/routes/orgs/org/projects/new.js

@@ -1,7 +1,12 @@
 import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service';
 import { action } from '@ember/object';
 
 export default class OrgsOrgProjectsNewRoute extends Route {
+  // =services
+
+  @service notify;
+  
   // =methods
 
   /**
@@ -35,9 +40,11 @@ export default class OrgsOrgProjectsNewRoute extends Route {
     try {
       await project.save();
       this.transitionTo('orgs.org.projects.project', project);
+      // TODO: replace with translated strings
+      this.notify.success('Project created.');
     } catch (e) {
-      // TODO: error handling
-      throw e;
+      // TODO: replace with translated strings
+      this.notify.error('Project could not be created.');
     }
   }
 }

ui/core/app/routes/orgs/org/projects/project.js

@@ -6,6 +6,7 @@ export default class OrgsOrgProjectsProjectRoute extends Route {
   // =services
 
   @service scope;
+  @service notify;
 
   // =methods
 
@@ -47,9 +48,11 @@ export default class OrgsOrgProjectsProjectRoute extends Route {
   async save(project) {
     try {
       await project.save();
+      // TODO: replace with translated strings
+      this.notify.success('Save succeeded.');
     } catch (e) {
-      // TODO: error handling
-      throw e;
+      // TODO: replace with translated strings
+      this.notify.error('An error occurred.');
     }
   }
 
@@ -62,9 +65,11 @@ export default class OrgsOrgProjectsProjectRoute extends Route {
     try {
       await project.destroyRecord();
       this.transitionTo('orgs.org.projects');
+      // TODO: replace with translated strings
+      this.notify.success('Deleted project succesfully.');
     } catch (e) {
-      // TODO: error handling
-      throw e;
+      // TODO: replace with translated strings
+      this.notify.error('An error occurred.');
     }
   }
 }

ui/core/app/styles/_notify.scss

@@ -0,0 +1,89 @@
+/**
+ * This file is essentially a rip of the default ember notify styles, with some
+ * minor tweaks for positioning.
+ */
+
+@-webkit-keyframes "ember-notify-show" {
+  from {
+    left: -310px;
+  }
+  to {
+    left: 0;
+  }
+}
+@keyframes "ember-notify-show" {
+  from {
+    left: -310px;
+  }
+  to {
+    left: 0;
+  }
+}
+@-webkit-keyframes "ember-notify-hide" {
+  from {
+    left: 0;
+  }
+  to {
+    left: -310px;
+  }
+}
+@keyframes "ember-notify-hide" {
+  from {
+    left: 0;
+  }
+  to {
+    left: -310px;
+  }
+}
+.ember-notify-cn {
+  position: fixed;
+  z-index: 5000;
+  bottom: 0px;
+  left: 0px;
+}
+.ember-notify {
+  display: block;
+  margin: 10px;
+  position: relative;
+  width: 300px;
+  box-sizing: border-box;
+  //border: 1px solid #ccc;
+  //padding: 10px;
+  .close {
+    float: right;
+    cursor: pointer;
+  }
+}
+.ember-notify-show {
+  -webkit-animation-duration: 500ms;
+  animation-duration: 500ms;
+  -webkit-animation-name: ember-notify-show;
+  animation-name: ember-notify-show;
+  -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+.ember-notify-hide {
+  -webkit-animation-duration: 250ms;
+  animation-duration: 250ms;
+  -webkit-animation-name: ember-notify-hide;
+  animation-name: ember-notify-hide;
+  -webkit-animation-timing-function: cubic-bezier(0.6, -0.28, 0.735, 0.045);
+  animation-timing-function: cubic-bezier(0.6, -0.28, 0.735, 0.045);
+  &:hover {
+    -webkit-animation-play-state: paused;
+    -moz-animation-play-state: paused;
+    -o-animation-play-state: paused;
+    animation-play-state: paused;
+  }
+}
+@media only screen and (max-width: 680px) {
+  .ember-notify-cn {
+    width: 100%;
+    padding-left: 20px;
+    box-sizing: border-box;
+  }
+  .ember-notify {
+    width: 100%;
+    float: right;
+  }
+}

ui/core/app/styles/app.scss

@@ -1,10 +1,11 @@
 @use 'rose/variables/sizing';
 
 @import 'rose';
+@import 'notify';
 
 .projects-overview {
   margin: sizing.rems(l);
-  
+
   .projects {
     display: flex;
     padding: 20px 0;

ui/core/app/templates/application.hbs

@@ -31,3 +31,14 @@
 
   <page.sidebar />
 </Rose::Layout::Page>
+
+<EmberNotify @closeAfter={{4000}} as |message close|>
+  <Rose::Notification
+    @style={{message.type}}
+    @heading={{t (concat 'states.' message.type)}}
+    @dismiss={{close}}
+    @dismissText={{t 'actions.dismiss'}}
+  >
+    {{message.text}}
+  </Rose::Notification>
+</EmberNotify>

ui/core/ember-cli-build.js

@@ -15,6 +15,9 @@ module.exports = function (defaults) {
       onlyIncluded: true,
       extension: 'scss',
     },
+    emberNotify: {
+      importCss: false,
+    },
   });
 
   // Use `app.import` to add additional libraries to the generated

ui/core/package.json

@@ -61,6 +61,7 @@
     "ember-load-initializers": "^2.1.1",
     "ember-maybe-import-regenerator": "^0.1.6",
     "ember-modifier": "^1.0.3",
+    "ember-notify": "^6.0.0",
     "ember-page-title": "^5.2.1",
     "ember-qunit": "^4.6.0",
     "ember-resolver": "^7.0.0",

ui/core/translations/en-us.yaml

@@ -1,11 +1,17 @@
 actions:
   cancel: Cancel
   delete: Delete
+  dismiss: Dismiss
   save: Save
 resources:
   projects: Projects
 titles:
   new: New
+states:
+  info: Info
+  success: Success
+  warning: Warning
+  error: Error
 form:
   label:
     name: Name

yarn.lock

@@ -7815,6 +7815,14 @@ ember-modifier@^1.0.3:
     ember-cli-string-utils "^1.1.0"
     ember-modifier-manager-polyfill "^1.2.0"
 
+ember-notify@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/ember-notify/-/ember-notify-6.0.0.tgz#f92978e3452934f7c9b70d76ad2ec62bf072495a"
+  integrity sha512-2ewX5xwkGyZtkRRlgT/Tam5PaxGy78IoXltwt4s8roEam1esXNHfafzycvJwcuX7Hgrwr7LlTpmKP+81vWT3QQ==
+  dependencies:
+    ember-cli-babel "^7.7.3"
+    ember-cli-htmlbars "^3.0.1"
+
 ember-page-title@^5.2.1:
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/ember-page-title/-/ember-page-title-5.2.1.tgz#12261e010bec96af6200cd132fe4068e717ccbec"