Auto merge of #2588 - Turbo87:notifications, r=locks

Replace custom flash message implemenation with ember-cli-notifications

see https://ember-cli-notifications.netlify.app/

<img width="469" alt="Bildschirmfoto 2020-06-18 um 00 13 42" src="https://user-images.githubusercontent.com/141300/84956028-a97ad980-b0f8-11ea-886d-7aa05df3939f.png">
<img width="491" alt="Bildschirmfoto 2020-06-17 um 23 55 32" src="https://user-images.githubusercontent.com/141300/84956030-aaac0680-b0f8-11ea-8131-e04ac1fb1459.png">

r? @locks

Author: bors

app/components/crate-toml-copy.hbs

@@ -5,14 +5,5 @@
     {{on "click" this.copy}}
   >
     {{svg-jar "copy" alt="Copy Cargo.toml snippet to clipboard"}}
-    {{#if this.showNotificationTask.isRunning}}
-      <div local-class="copy-notification {{if this.showSuccess "copy-success" "copy-failure"}}">
-        {{#if this.showSuccess}}
-          Copied!
-        {{else}}
-          An error occured. Please use CTRL+C.
-        {{/if}}
-      </div>
-    {{/if}}
   </button>
 </div>

app/components/crate-toml-copy.js

@@ -1,21 +1,21 @@
 import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
 import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
 
 import copy from 'copy-text-to-clipboard';
-import { rawTimeout, task } from 'ember-concurrency';
 
 export default class CrateTomlCopy extends Component {
-  @tracked showSuccess = false;
-
-  @(task(function* () {
-    yield rawTimeout(2000);
-  }).restartable())
-  showNotificationTask;
+  @service notifications;
 
   @action
   copy() {
-    this.showSuccess = copy(this.args.copyText);
-    this.showNotificationTask.perform();
+    let { copyText } = this.args;
+
+    let success = copy(copyText);
+    if (success) {
+      this.notifications.success('Copied to clipboard!');
+    } else {
+      this.notifications.error('Copy to clipboard failed!');
+    }
   }
 }

app/components/crate-toml-copy.module.css

@@ -6,20 +6,6 @@
         position: relative;
     }
 
-    .copy-notification {
-        font-size: 70%;
-        font-weight: bold;
-        position: absolute;
-
-        &.copy-success {
-            color: var(--link-color);
-        }
-
-        &.copy-failure {
-            color: red;
-        }
-    }
-
     &.inline {
         display: inline-block;
 
@@ -35,18 +21,6 @@
                 height: 1rem;
                 width: 1rem;
             }
-
-            .copy-notification {
-                top: -1.25rem;
-                left: 0;
-                padding: 0;
-                text-align: left;
-                width: 4rem;
-
-                &.copy-failure {
-                    width: 15rem;
-                }
-            }
         }
     }
 
@@ -63,19 +37,5 @@
         button:hover {
             background: #edebdd;
         }
-
-        .copy-notification {
-            &.copy-success {
-                width: 100%;
-                text-align: center;
-            }
-
-            &.copy-failure {
-                bottom: -2rem;
-                right: 0;
-                width: 18rem;
-                text-align: right;
-            }
-        }
     }
 }

app/components/email-input.js

@@ -1,15 +1,13 @@
 import Component from '@ember/component';
 import { computed } from '@ember/object';
 import { empty } from '@ember/object/computed';
-import { inject as service } from '@ember/service';
 
 import { task } from 'ember-concurrency';
 
 import ajax from '../utils/ajax';
 
 export default Component.extend({
   tagName: '',
-  flashMessages: service(),
   type: '',
   value: '',
   isEditing: false,

app/components/flash-message.hbs

@@ -3,6 +3,5 @@ import { inject as service } from '@ember/service';
 
 export default Controller.extend({
   design: service(),
-  flashMessages: service(),
   progress: service(),
 });

app/components/flash-message.module.css

@@ -1,7 +1,6 @@
 import Controller from '@ember/controller';
 import { computed } from '@ember/object';
 import { alias, sort, filterBy, notEmpty } from '@ember/object/computed';
-import { inject as service } from '@ember/service';
 import Ember from 'ember';
 
 import ajax from '../../utils/ajax';
@@ -12,8 +11,6 @@ export default Controller.extend({
 
   sortedTokens: sort('model.api_tokens', 'tokenSort'),
 
-  flashMessages: service(),
-
   isResetting: false,
 
   ownedCrates: alias('model.ownedCrates'),

app/controllers/application.js

@@ -2,7 +2,7 @@ import Route from '@ember/routing/route';
 import { inject as service } from '@ember/service';
 
 export default Route.extend({
-  flashMessages: service(),
+  notifications: service(),
   router: service(),
   session: service(),
 
@@ -12,7 +12,7 @@ export default Route.extend({
     let result = await this.session.loadUserTask.last;
 
     if (!result.currentUser) {
-      this.flashMessages.queue('Please log in to proceed');
+      this.notifications.error('Please log in to proceed');
       this.session.savedTransition = transition;
       this.router.transitionTo('index');
     }

app/controllers/me/index.js

@@ -2,7 +2,6 @@ import Route from '@ember/routing/route';
 import { inject as service } from '@ember/service';
 
 export default Route.extend({
-  flashMessages: service(),
   googleCharts: service(),
   progress: service(),
   session: service(),
@@ -20,8 +19,5 @@ export default Route.extend({
       this.progress.handle(transition);
       return true;
     },
-    didTransition() {
-      this.flashMessages.step();
-    },
   },
 });

app/routes/-authenticated-route.js

@@ -3,14 +3,14 @@ import Route from '@ember/routing/route';
 import { inject as service } from '@ember/service';
 
 export default Route.extend({
-  flashMessages: service(),
+  notifications: service(),
 
   async model(params) {
     try {
       return await this.store.find('category', params.category_id);
     } catch (e) {
       if (e instanceof NotFoundError) {
-        this.flashMessages.queue(`Category '${params.category_id}' does not exist`);
+        this.notifications.error(`Category '${params.category_id}' does not exist`);
         return this.replaceWith('index');
       }
 

app/routes/application.js

@@ -4,7 +4,7 @@ import { inject as service } from '@ember/service';
 import ajax from '../utils/ajax';
 
 export default Route.extend({
-  flashMessages: service(),
+  notifications: service(),
   session: service(),
   store: service(),
 
@@ -21,10 +21,10 @@ export default Route.extend({
       }
     } catch (error) {
       if (error.errors) {
-        this.flashMessages.queue(`Error in email confirmation: ${error.errors[0].detail}`);
+        this.notifications.error(`Error in email confirmation: ${error.errors[0].detail}`);
         return this.replaceWith('index');
       } else {
-        this.flashMessages.queue(`Unknown error in email confirmation`);
+        this.notifications.error(`Unknown error in email confirmation`);
         return this.replaceWith('index');
       }
     }

app/routes/category.js

@@ -2,14 +2,15 @@ import Route from '@ember/routing/route';
 import { inject as service } from '@ember/service';
 
 export default Route.extend({
-  flashMessages: service(),
+  notifications: service(),
 
   async model(params) {
     try {
       return await this.store.find('crate', params.crate_id);
     } catch (e) {
       if (e.errors?.some(e => e.detail === 'Not Found')) {
-        this.flashMessages.show(`Crate '${params.crate_id}' does not exist`);
+        this.notifications.error(`Crate '${params.crate_id}' does not exist`);
+        this.replaceWith('index');
       } else {
         throw e;
       }

app/routes/confirm.js

@@ -2,7 +2,7 @@ import Route from '@ember/routing/route';
 import { inject as service } from '@ember/service';
 
 export default Route.extend({
-  flashMessages: service(),
+  notifications: service(),
   redirector: service(),
 
   redirect() {
@@ -15,7 +15,7 @@ export default Route.extend({
       // Redirect to the crate's main page and show a flash error if
       // no documentation is found
       let message = 'Crate does not supply a documentation URL';
-      this.flashMessages.queue(message);
+      this.notifications.error(message);
       this.replaceWith('crate', crate);
     }
   },

app/routes/crate.js

@@ -2,7 +2,7 @@ import Route from '@ember/routing/route';
 import { inject as service } from '@ember/service';
 
 export default Route.extend({
-  flashMessages: service(),
+  notifications: service(),
   redirector: service(),
 
   redirect() {
@@ -15,7 +15,7 @@ export default Route.extend({
       // Redirect to the crate's main page and show a flash error if
       // no repository is found
       let message = 'Crate does not supply a repository URL';
-      this.flashMessages.queue(message);
+      this.notifications.error(message);
       this.replaceWith('crate', crate);
     }
   },

app/routes/crate/docs.js

@@ -8,7 +8,7 @@ function isUnstableVersion(version) {
 }
 
 export default Route.extend({
-  flashMessages: service(),
+  notifications: service(),
 
   async model(params) {
     const requestedVersion = params.version_num;
@@ -48,7 +48,7 @@ export default Route.extend({
 
     const version = versions.find(version => version.num === params.version_num);
     if (params.version_num && !version) {
-      this.flashMessages.queue(`Version '${params.version_num}' of crate '${crate.name}' does not exist`);
+      this.notifications.error(`Version '${params.version_num}' of crate '${crate.name}' does not exist`);
     }
 
     return {

app/routes/crate/repo.js

@@ -3,14 +3,14 @@ import Route from '@ember/routing/route';
 import { inject as service } from '@ember/service';
 
 export default Route.extend({
-  flashMessages: service(),
+  notifications: service(),
 
   async model({ keyword_id }) {
     try {
       return await this.store.find('keyword', keyword_id);
     } catch (e) {
       if (e instanceof NotFoundError) {
-        this.flashMessages.queue(`Keyword '${keyword_id}' does not exist`);
+        this.notifications.error(`Keyword '${keyword_id}' does not exist`);
         return this.replaceWith('index');
       }
 

app/routes/crate/version.js

@@ -13,7 +13,7 @@ import * as localStorage from '../utils/local-storage';
  * @see `github-authorize` route
  */
 export default Route.extend({
-  flashMessages: service(),
+  notifications: service(),
   session: service(),
 
   beforeModel(transition) {
@@ -56,11 +56,10 @@ export default Route.extend({
 
       let { data } = response;
       if (data && data.errors) {
-        let error = `Failed to log in: ${data.errors[0].detail}`;
-        this.flashMessages.show(error);
+        this.notifications.error(`Failed to log in: ${data.errors[0].detail}`);
         return;
       } else if (!response.ok) {
-        this.flashMessages.show('Failed to log in');
+        this.notifications.error('Failed to log in');
         return;
       }
 

app/routes/keyword.js

@@ -2,7 +2,7 @@ import Route from '@ember/routing/route';
 import { inject as service } from '@ember/service';
 
 export default Route.extend({
-  flashMessages: service(),
+  notifications: service(),
 
   queryParams: {
     page: { refreshModel: true },
@@ -22,7 +22,7 @@ export default Route.extend({
       return { crates, team };
     } catch (e) {
       if (e.errors.some(e => e.detail === 'Not Found')) {
-        this.flashMessages.queue(`Team '${params.team_id}' does not exist`);
+        this.notifications.error(`Team '${params.team_id}' does not exist`);
         return this.replaceWith('index');
       }
     }

app/routes/login.js

@@ -2,7 +2,7 @@ import Route from '@ember/routing/route';
 import { inject as service } from '@ember/service';
 
 export default Route.extend({
-  flashMessages: service(),
+  notifications: service(),
 
   queryParams: {
     page: { refreshModel: true },
@@ -21,7 +21,7 @@ export default Route.extend({
       return { crates, user };
     } catch (e) {
       if (e.errors.some(e => e.detail === 'Not Found')) {
-        this.flashMessages.queue(`User '${params.user_id}' does not exist`);
+        this.notifications.error(`User '${params.user_id}' does not exist`);
         return this.replaceWith('index');
       }
     }