ui: Adds tick whilst editing the link template in the Settings area (#5820)

1. Amends our `base` animation placeholder to always reset
transition-duration. This has no effect on other components that are
already using this animation.
2. Adds a confirming class whenever a key is pressed, to show the green
tick. Uses CSS via `transition-delay` for debouncing.

ui-v2/app/controllers/settings.js

@@ -5,8 +5,18 @@ import { inject as service } from '@ember/service';
 export default Controller.extend({
   repo: service('settings'),
   dom: service('dom'),
+  timeout: service('timeout'),
+  confirming: false,
+  applyTransition: function() {
+    const tick = get(this, 'timeout').tick;
+    set(this, 'confirming', true);
+    tick().then(() => {
+      set(this, 'confirming', false);
+    });
+  },
   actions: {
     key: function(e) {
+      this.applyTransition();
       switch (true) {
         case e.keyCode === 13:
           // disable ENTER

ui-v2/app/services/timeout.js

@@ -1,9 +1,19 @@
 import Service from '@ember/service';
 import promisedTimeoutFactory from 'consul-ui/utils/promisedTimeout';
 import { Promise } from 'rsvp';
+import { next } from '@ember/runloop';
+
 const promisedTimeout = promisedTimeoutFactory(Promise);
 export default Service.extend({
+  // TODO: milliseconds should default to 0 or potentially just null
+  // if it is 0/null use tick/next instead
+  // if Octane eliminates the runloop things, look to use raf here instead
   execute: function(milliseconds, cb) {
     return promisedTimeout(milliseconds, cb);
   },
+  tick: function() {
+    return new Promise(function(resolve, reject) {
+      next(resolve);
+    });
+  },
 });

ui-v2/app/styles/app.scss

@@ -16,6 +16,7 @@
 @import 'core/typography';
 @import 'core/layout';
 
+@import 'routes/dc/settings/index';
 @import 'routes/dc/service/index';
 @import 'routes/dc/nodes/index';
 @import 'routes/dc/intention/index';

ui-v2/app/styles/base/animation/index.scss

@@ -8,6 +8,8 @@
 %blink-in-fade-out-active {
   transition-duration: 0;
   transition-duration: unset;
+  transition-delay: 0;
+  transition-delay: unset;
   opacity: 1;
   pointer-events: auto;
 }

ui-v2/app/styles/routes/dc/settings/index.scss

@@ -0,0 +1,17 @@
+#urls_service span {
+  position: relative;
+}
+#urls_service span::after {
+  @extend %with-tick;
+  background-color: $green-500;
+  border-radius: 100%;
+  top: 13px;
+  right: 0;
+}
+#urls_service span::after {
+  @extend %blink-in-fade-out;
+  transition-delay: 3s;
+}
+#urls_service.confirming span::after {
+  @extend %blink-in-fade-out-active;
+}

ui-v2/app/templates/settings.hbs

@@ -18,7 +18,7 @@
           <p>
           Add a link to the service detail page in the UI to get quick access to a service-wide metrics dashboard. Enter the dashboard URL into the field below. You can use the placeholders <code>{{'{{Datacenter}}'}}</code> and <code>{{'{{Service.Name}}'}}</code> which will be replaced with the name of the datacenter/service currently being viewed.
           </p>
-          <label class="type-text">
+          <label class={{concat (if confirming 'confirming') ' type-text'}} id="urls_service">
             <span>Link template for services</span>
             <input type="text" name="urls[service]" value={{item.urls.service}} onchange={{action 'change'}} onkeypress={{action 'key'}} onkeydown={{action 'key'}} />
             <em>e.g. https://grafana.example.com/d/1/consul-service-mesh&amp;orgid=1&amp;datacenter={{ '{{Datacenter}}' }}&amp;service-name={{ '{{Service.Name}}' }}</em>

ui-v2/tests/unit/controllers/settings-test.js

@@ -2,7 +2,7 @@ import { moduleFor, test } from 'ember-qunit';
 
 moduleFor('controller:settings', 'Unit | Controller | settings', {
   // Specify the other units that are required for this test.
-  needs: ['service:settings', 'service:dom'],
+  needs: ['service:settings', 'service:dom', 'service:timeout'],
 });
 
 // Replace this with your real tests.