From 76fefca1c7789325c787b3202f7966bb7f832070 Mon Sep 17 00:00:00 2001
From: Randall Morey <randall@randallmorey.com>
Date: Fri, 29 May 2020 19:44:46 -0400
Subject: [PATCH] =?UTF-8?q?chore:=20=F0=9F=A4=96=20add=20action=20notifica?=
 =?UTF-8?q?tions=20on=20projects?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../addon/components/rose/notification.js     |  2 +-
 .../components/rose/notification.stories.mdx  |  4 +-
 .../styles/rose/components/_notification.scss |  2 +-
 .../rose/tests/dummy/app/templates/index.hbs  |  2 +-
 ui/core/app/routes/orgs/org/projects/new.js   | 11 ++-
 .../app/routes/orgs/org/projects/project.js   | 13 ++-
 ui/core/app/styles/_notify.scss               | 89 +++++++++++++++++++
 ui/core/app/styles/app.scss                   |  3 +-
 ui/core/app/templates/application.hbs         | 11 +++
 ui/core/ember-cli-build.js                    |  3 +
 ui/core/package.json                          |  1 +
 ui/core/translations/en-us.yaml               |  6 ++
 yarn.lock                                     |  8 ++
 13 files changed, 143 insertions(+), 12 deletions(-)
 create mode 100644 ui/core/app/styles/_notify.scss

diff --git a/addons/rose/addon/components/rose/notification.js b/addons/rose/addon/components/rose/notification.js
index 0ff646e2d..856dbc863 100644
--- a/addons/rose/addon/components/rose/notification.js
+++ b/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':
diff --git a/addons/rose/addon/components/rose/notification.stories.mdx b/addons/rose/addon/components/rose/notification.stories.mdx
index 04cd3f533..a20532158 100644
--- a/addons/rose/addon/components/rose/notification.stories.mdx
+++ b/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"
diff --git a/addons/rose/addon/styles/rose/components/_notification.scss b/addons/rose/addon/styles/rose/components/_notification.scss
index 71de0adf0..ac88ea4f4 100644
--- a/addons/rose/addon/styles/rose/components/_notification.scss
+++ b/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);
diff --git a/addons/rose/tests/dummy/app/templates/index.hbs b/addons/rose/tests/dummy/app/templates/index.hbs
index 3b791ba07..e47846e50 100644
--- a/addons/rose/tests/dummy/app/templates/index.hbs
+++ b/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"
diff --git a/ui/core/app/routes/orgs/org/projects/new.js b/ui/core/app/routes/orgs/org/projects/new.js
index 15402927d..02252e1f1 100644
--- a/ui/core/app/routes/orgs/org/projects/new.js
+++ b/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.');
     }
   }
 }
diff --git a/ui/core/app/routes/orgs/org/projects/project.js b/ui/core/app/routes/orgs/org/projects/project.js
index 8fa788bd3..c352475a8 100644
--- a/ui/core/app/routes/orgs/org/projects/project.js
+++ b/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.');
     }
   }
 }
diff --git a/ui/core/app/styles/_notify.scss b/ui/core/app/styles/_notify.scss
new file mode 100644
index 000000000..df7e9b58e
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/ui/core/app/styles/app.scss b/ui/core/app/styles/app.scss
index a771edd48..ae92ab2d8 100644
--- a/ui/core/app/styles/app.scss
+++ b/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;
diff --git a/ui/core/app/templates/application.hbs b/ui/core/app/templates/application.hbs
index b94954380..4a6e12e89 100644
--- a/ui/core/app/templates/application.hbs
+++ b/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>
diff --git a/ui/core/ember-cli-build.js b/ui/core/ember-cli-build.js
index 9528c38e4..cc31a1b6c 100644
--- a/ui/core/ember-cli-build.js
+++ b/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
diff --git a/ui/core/package.json b/ui/core/package.json
index 0029a7423..cd4e42ab9 100644
--- a/ui/core/package.json
+++ b/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",
diff --git a/ui/core/translations/en-us.yaml b/ui/core/translations/en-us.yaml
index 4487f5698..3abe145c0 100644
--- a/ui/core/translations/en-us.yaml
+++ b/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
diff --git a/yarn.lock b/yarn.lock
index 0f49a405a..b5270240f 100644
--- a/yarn.lock
+++ b/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"