Merge branch 'develop' into feature-target-session-fields

addons/rose/addon/styles/rose/components/card/_link.scss

@@ -115,6 +115,13 @@ $xxxs: sizing.rems(xxxs); // 2
     }
   }
 
+  &:hover {
+    .rose-card-link-description,
+    .rose-card-link-footer-id {
+      color: var(--stark);
+    }
+  }
+
   // .rose-card-link-description {
   //   margin: auto 0 0;
   //   color: var(--ui-gray);

ui/core/app/components/copyable/index.hbs

@@ -5,18 +5,24 @@
     {{did-insert this.register}}
     {{will-destroy this.destroy}}
   >
-    <span class="copyable-content">
-      {{yield}}
-    </span>
+    {{#if this.copied}}
+      <mark class="copyable-content">
+        {{yield}}
+      </mark>
+    {{else}}
+      <span class="copyable-content">
+        {{yield}}
+      </span>
+    {{/if}}
 
     <Rose::Button
       id={{this.copyableButtonId}}
       aria-describedby={{this.id}}
       class="copyable-button"
       @style="ghost"
-      @iconOnly={{this.icon}}
-      title={{this.copyableButtonText}}
-    >{{this.copyableButtonText}}</Rose::Button>
+      @iconOnly={{if this.copied this.successIcon this.actionIcon}}
+      title={{if this.copied this.successText this.actionText}}
+    >{{this.actionText}}</Rose::Button>
   </span>
 {{else}}
   {{yield}}

ui/core/app/components/copyable/index.js

@@ -3,17 +3,22 @@ import ClipboardJS from 'clipboard';
 import { action } from '@ember/object';
 import { generateComponentID } from 'rose/utilities/component-auto-id';
 import { task, timeout } from 'ember-concurrency';
-import { set } from '@ember/object';
 import { bind } from '@ember/runloop';
+import { tracked } from '@glimmer/tracking';
 
 export default class CopyableComponent extends Component {
 
   // =attributes
 
   id = generateComponentID();
-  icon = 'copy-action';
   copyableButtonId = `copyable-button-${this.id}`;
-  copyableButtonText = this.args.buttonText;
+
+  actionIcon = 'copy-action';
+  successIcon = 'copy-success';
+  actionText = this.args.buttonText;
+  successText = this.args.acknowledgeText;
+
+  @tracked copied = false;
 
   /**
    * A Ember Concurrency-based task that updates copy icon to a success state
@@ -26,11 +31,9 @@ export default class CopyableComponent extends Component {
    * @type {Task}
    */
   @task(function * () {
-    set(this, 'icon', 'copy-success');
-    set(this, 'copyableButtonText', this.args.acknowledgeText);
+    this.copied = true;
     yield timeout(1000);
-    set(this, 'icon', 'copy-action');
-    set(this, 'copyableButtonText', this.args.buttonText);
+    this.copied = false;
   }).drop() successIconTimer;
 
   // =methods
@@ -58,7 +61,7 @@ export default class CopyableComponent extends Component {
    */
   @action
   register() {
-    if(!this.clipboard) {
+    if (!this.clipboard) {
       this.clipboard = new ClipboardJS(`#${this.copyableButtonId}`, {
         text: () => this.args.text,
       });

ui/core/app/styles/app.scss

@@ -100,4 +100,13 @@
     position: relative;
     top: -2px;
   }
+
+  mark {
+    background-color: transparent;
+    animation: fadeBackground 0.75s linear;
+    @keyframes fadeBackground {
+      0%   { background-color: var(--action-subtler-1); }
+      100% { background-color: transparent; }
+    }
+  }
 }

ui/core/app/templates/application.hbs

@@ -8,29 +8,29 @@
       <header.brand @logo="logo-boundary" @text={{app-name}} />
 
       {{#if this.session.isAuthenticated}}
-        {{#if this.scope.isOrg}}
-          <header.nav as |nav|>
-            <nav.dropdown
-              @text={{this.scope.displayName}}
-              @icon="boundary-icons/org" as |dropdown|
-            >
-              {{#if this.session.data.authenticated.isGlobal}}
-                <dropdown.link @route="scopes.scope" @model="global">
-                  {{t "titles.global"}}
+        <header.nav as |nav|>
+          <nav.dropdown
+            @text={{this.scope.displayName}}
+            @icon="boundary-icons/org" as |dropdown|
+          >
+            {{#if this.session.data.authenticated.isGlobal}}
+              <dropdown.link @route="scopes.scope" @model="global">
+                {{t "titles.global"}}
+              </dropdown.link>
+              {{#each this.orgScopes as |scope|}}
+                <dropdown.link @route="scopes.scope" @model={{scope.id}}>
+                  {{scope.displayName}}
                 </dropdown.link>
-                {{#each this.orgScopes as |scope|}}
-                  <dropdown.link @route="scopes.scope" @model={{scope.id}}>
-                    {{scope.displayName}}
-                  </dropdown.link>
-                {{/each}}
-              {{else}}
+              {{/each}}
+            {{else}}
+              {{#if this.scope}}
                 <dropdown.link @route="scopes.scope" @model={{this.scope.id}}>
                   {{this.scope.displayName}}
                 </dropdown.link>
               {{/if}}
-            </nav.dropdown>
-          </header.nav>
-        {{/if}}
+            {{/if}}
+          </nav.dropdown>
+        </header.nav>
 
         <header.utilities as |utilities|>
           <utilities.dropdown