Merge pull request #635 from hashicorp/overlay-fix

style: Fix z-index for rose-dialog in desktop

addons/api/addon/models/account.js

@@ -26,15 +26,10 @@ export default class AccountModel extends GeneratedAccountModel {
    * Convenience for getting username in account.
    * @type {string}
    */
-  @computed('type', 'attributes.login_name')
-  get username() {
-    let username = '';
-    switch (this.type) {
-      case 'password':
-        username = this.attributes.login_name;
-        break;
-    }
-    return username;
+  @computed('attributes.{email,full_name,login_name}')
+  get accountName() {
+    const { email, full_name, login_name } = this.attributes;
+    return email || full_name || login_name;
   }
 
   // =methods

addons/api/addon/models/session.js

@@ -1,13 +1,95 @@
 import GeneratedSessionModel from '../generated/models/session';
 import { computed } from '@ember/object';
 import { equal } from '@ember/object/computed';
-import { attr } from '@ember-data/model';
+import { tracked } from '@glimmer/tracking';
+import { A } from '@ember/array';
+
+/**
+ *
+ */
+class SessionCredential {
+  // =classes
+
+  /**
+   *
+   */
+  static Library = class Library {
+    id;
+    name;
+    description;
+    type;
+
+    constructor(id, name, description, type) {
+      this.id = id;
+      this.name = name;
+      this.description = description;
+      this.type = type;
+    }
+  };
+
+  /**
+   *
+   */
+  static SecretItem = class SecretItem {
+    key;
+    value;
+
+    constructor(key, value) {
+      this.key = key;
+      this.value = value;
+    }
+  };
+
+  // =attributes
+  rawCredential;
+  library;
+  #payloadSecret;
+
+  /**
+   * The incoming payload may contain a JSON object under the `decoded` key only
+   * if it can be JSON-decoded.  Some credential stores may not provide JSON,
+   * however, in which case we may have only the raw base64-encoded secret
+   * string.  In the former case, we convert the key/value pairs of the JSON to
+   * an array of `SecretItem` instances.  In the latter case, we return an
+   * array containing a single `SecretItem` instance with key `secret` and a
+   * string value equal to the base64-decoded raw secret.
+   * The credential secret as an array of key/value objects.
+   * @type {SessionCredential.SecretItem[]}
+   */
+  get secrets() {
+    if (this.#payloadSecret?.decoded) {
+      const secretJSON = this.#payloadSecret.decoded;
+      return Object.keys(secretJSON).map(
+        (key) => new SessionCredential.SecretItem(key, secretJSON[key])
+      );
+    } else {
+      // decode from base64
+      const decodedString = atob(this.#payloadSecret.raw);
+      return [new SessionCredential.SecretItem('secret', decodedString)];
+    }
+  }
+
+  // =methods
+
+  constructor(cred) {
+    const { id, name, description, type } = cred.credential_library;
+    this.library = new SessionCredential.Library(id, name, description, type);
+    this.#payloadSecret = cred.secret;
+    this.rawCredential = cred;
+  }
+}
 
 export default class SessionModel extends GeneratedSessionModel {
   // =attributes
 
-  @attr('string', { readOnly: true }) proxy_address;
-  @attr('number', { readOnly: true }) proxy_port;
+  // These transient attributes are used for values that come from the CLI
+  // `connect` command as triggered by Desktop.  These attributes represent
+  // transient read-only values.
+  @tracked acknowledged;
+  @tracked started_desktop_client;
+  @tracked proxy_address;
+  @tracked proxy_port;
+  credentials = A();
 
   @equal('status', 'active') isActive;
   @equal('status', 'pending') isPending;
@@ -41,6 +123,13 @@ export default class SessionModel extends GeneratedSessionModel {
 
   // =methods
 
+  /**
+   *
+   */
+  addCredential(cred) {
+    this.credentials.pushObject(new SessionCredential(cred));
+  }
+
   /**
    * Cancels the session via the `cancel` method.
    * See serializer and adapter for more information.

addons/api/addon/serializers/account.js

@@ -23,9 +23,28 @@ export default class AccountSerializer extends ApplicationSerializer {
     switch (snapshot.record.type) {
       case 'password':
         return this.serializePassword(...arguments);
+      case 'oidc':
+        return this.serializeOIDC(...arguments);
     }
   }
 
+  /**
+   * OIDC serialization limits the `attributes` posted on create and omits
+   * `attributes` entirely on update.
+   */
+  serializeOIDC(snapshot) {
+    const { isNew } = snapshot?.record;
+    let serialized = super.serialize(...arguments);
+    delete serialized.attributes;
+    if (isNew) {
+      serialized.attributes = {};
+      const { issuer, subject } = snapshot.attr('attributes').record;
+      if (issuer) serialized.attributes.issuer = issuer;
+      if (subject) serialized.attributes.subject = subject;
+    }
+    return serialized;
+  }
+
   /**
    * Password serialization omits `attributes` and handles password-related
    * custom methods.

addons/api/mirage/config.js

@@ -13,7 +13,7 @@ export default function () {
   // make this `/api`, for example, if your API is namespaced
   this.namespace = config.api.namespace;
   // delay for each request, automatically set to 0 during testing
-  this.timing = 350;
+  this.timing = 1;
 
   // Allow any configured API host to passthrough, which is useful in
   // development for testing against a locally running backend.

addons/api/mirage/factories/account.js

@@ -1,3 +1,18 @@
 import factory from '../generated/factories/account';
+import { random, internet } from 'faker';
 
-export default factory.extend();
+export default factory.extend({
+  attributes() {
+    switch (this.type) {
+      case 'password':
+        return { login_name: random.words() };
+      case 'oidc':
+        return {
+          issuer: internet.ip(),
+          subject: 'sub',
+          email: internet.email(),
+          full_name: random.words(),
+        };
+    }
+  },
+});

addons/api/mirage/factories/auth-method.js

@@ -14,9 +14,9 @@ export default factory.extend({
    */
   withAccountsAndUsers: trait({
     afterCreate(authMethod, server) {
-      const { scope } = authMethod;
+      const { scope, type } = authMethod;
       server.createList('user', 5, { scope }).map((user) => {
-        const { id } = server.create('account', { scope, authMethod });
+        const { id } = server.create('account', { scope, type, authMethod });
         user.update({ accountIds: [id] });
       });
     },

addons/api/mirage/generated/factories/account.js

@@ -1,15 +1,14 @@
 import { Factory } from 'ember-cli-mirage';
-import { random, date, datatype } from 'faker';
+import { date, datatype } from 'faker';
 
 /**
  * GeneratedAccountFactory
  */
 export default Factory.extend({
   type: 'password',
-  name: () => random.words(),
-  description: () => random.words(),
+  // name: () => random.words(),
+  // description: () => random.words(),
   created_time: () => date.recent(),
   updated_time: () => date.recent(),
   version: () => datatype.number(),
-  attributes: () => ({ login_name: random.words() }),
 });

addons/api/mirage/scenarios/ipc.js

@@ -53,11 +53,69 @@ export default function initializeMockIPC(server) {
         type,
         created_time: new Date().toISOString(),
       });
+      const decoded = {
+        key1: 'value 1',
+        key2: true,
+        key3: 'test',
+      };
+      const raw = btoa(JSON.stringify(decoded));
       return {
         address: window.location.hostname,
         port: datatype.number(),
         protocol: type,
         session_id: newSession.id,
+        credentials: [
+          {
+            credential_library: {
+              id: 'clvlt_4cvscMTl0N',
+              name: 'Library Name',
+              description: 'Library Description',
+              credential_store_id: 'csvlt_Q1HFGt7Jpm',
+              type: 'vault',
+            },
+            secret: {
+              raw: btoa('just-a-random-string'),
+            },
+          },
+          {
+            credential_library: {
+              id: 'clvlt_4cvscMTl0N',
+              name: 'Library Name',
+              description: 'Library Description',
+              credential_store_id: 'csvlt_Q1HFGt7Jpm',
+              type: 'vault',
+            },
+            secret: {
+              raw,
+              decoded,
+            },
+          },
+          {
+            credential_library: {
+              id: 'clvlt_9KWscxpcY7',
+              name: 'Library Name',
+              description: 'Library Description',
+              credential_store_id: 'csvlt_Q1HFGt7Jpm',
+              type: 'vault',
+            },
+            secret: {
+              raw: btoa('just-a-random-string'),
+            },
+          },
+          {
+            credential_library: {
+              id: 'clvlt_9KWscxpcY7',
+              name: 'Library Name',
+              description: 'Library Description',
+              credential_store_id: 'csvlt_Q1HFGt7Jpm',
+              type: 'vault',
+            },
+            secret: {
+              raw,
+              decoded,
+            },
+          },
+        ],
       };
     }
 

addons/api/tests/unit/models/account-test.js

@@ -10,15 +10,14 @@ module('Unit | Model | account', function (hooks) {
     assert.ok(model);
   });
 
-  test('it has an username attribute for password account', function (assert) {
+  test('it has an accountName attribute for password account', function (assert) {
     assert.expect(2);
     const store = this.owner.lookup('service:store');
     let model = store.createRecord('account', {
-      name: 'name',
       type: 'password',
     });
-    assert.notOk(model.username);
-    model.attributes.login_name = 'username';
-    assert.equal(model.username, 'username');
+    assert.notOk(model.accountName);
+    model.attributes.login_name = 'foobar';
+    assert.equal(model.accountName, 'foobar');
   });
 });

addons/api/tests/unit/serializers/account-test.js

@@ -4,7 +4,75 @@ import { setupTest } from 'ember-qunit';
 module('Unit | Serializer | account', function (hooks) {
   setupTest(hooks);
 
-  test('it serializes normally', function (assert) {
+  test('it serializes OIDC-type with only issuer and subject in `attributes` on create', function (assert) {
+    assert.expect(1);
+    const store = this.owner.lookup('service:store');
+    const serializer = store.serializerFor('account');
+    const record = store.createRecord('account', {
+      type: 'oidc',
+      name: 'Name',
+      auth_method_id: '1',
+      description: 'Description',
+      attributes: {
+        issuer: 'issuer',
+        subject: 'sub',
+        full_name: 'full_name',
+        email: 'email',
+      },
+      version: 1,
+    });
+    const snapshot = record._createSnapshot();
+    const serializedRecord = serializer.serialize(snapshot);
+    assert.deepEqual(serializedRecord, {
+      type: 'oidc',
+      name: 'Name',
+      auth_method_id: '1',
+      description: 'Description',
+      version: 1,
+      attributes: {
+        issuer: 'issuer',
+        subject: 'sub',
+      },
+    });
+  });
+
+  test('it serializes OIDC-type without `attributes` on update', function (assert) {
+    assert.expect(2);
+    const store = this.owner.lookup('service:store');
+    const serializer = store.serializerFor('account');
+    store.push({
+      data: {
+        id: '1',
+        type: 'account',
+        attributes: {
+          type: 'oidc',
+          name: 'Name',
+          auth_method_id: '1',
+          description: 'Description',
+          attributes: {
+            issuer: 'issuer',
+            subject: 'sub',
+            full_name: 'full_name',
+            email: 'email',
+          },
+          version: 1,
+        },
+      },
+    });
+    const record = store.peekRecord('account', '1');
+    const snapshot = record._createSnapshot();
+    const serializedRecord = serializer.serialize(snapshot);
+    assert.notOk(serializedRecord.attributes);
+    assert.deepEqual(serializedRecord, {
+      type: 'oidc',
+      name: 'Name',
+      auth_method_id: '1',
+      description: 'Description',
+      version: 1,
+    });
+  });
+
+  test('it serializes password-type normally', function (assert) {
     assert.expect(1);
     const store = this.owner.lookup('service:store');
     const serializer = store.serializerFor('account');
@@ -19,7 +87,6 @@ module('Unit | Serializer | account', function (hooks) {
       version: 1,
     });
     const snapshot = record._createSnapshot();
-    snapshot.adapterOptions = {};
     const serializedRecord = serializer.serialize(snapshot);
     assert.deepEqual(serializedRecord, {
       type: 'password',

addons/core/public/app-icons/credential.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5832 1.67511L5.68872 7.36908L10.6547 13.3821L13.4227 11.0961L17.298 15.5239L13.8483 18.5432L15.3301 20.2363L18.7798 17.217L20.2352 18.8797L16.7874 21.8973L18.2693 23.5904L23.4101 19.091L15.1582 9.66276L17.5492 7.68814L12.5832 1.67511Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.06114 10.6154C3.9843 10.3626 2.37549 8.59326 2.37549 6.44818C2.37549 4.12959 4.25508 2.25 6.57366 2.25C7.31363 2.25 8.00889 2.44144 8.6126 2.7775L10.4051 1.26126C9.33393 0.468662 8.00853 0 6.57366 0C3.01243 0 0.125488 2.88695 0.125488 6.44818C0.125488 10.0094 3.01243 12.8964 6.57366 12.8964C7.02078 12.8964 7.45727 12.8508 7.87875 12.7642L6.06114 10.6154Z" fill="black"/>
+</svg>

addons/core/public/app-icons/credentials.svg

@@ -0,0 +1,9 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.4577 1.67511L5.56323 7.36908L10.5292 13.3821L13.2972 11.0961L17.1724 15.5238L13.7226 18.5433L15.2044 20.2364L18.6543 17.2169L20.1097 18.8797L16.662 21.8973L18.1438 23.5904L23.2846 19.091L15.0328 9.66276L17.4237 7.68814L12.4577 1.67511Z" fill="black"/>
+<mask id="path-2-inside-1" fill="white">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.766 4.35302L5.62911 4.255L5.53249 11.2901L9.12206 11.3394L9.20978 17.2227L4.62573 17.2911L4.6593 19.5409L9.24333 19.4725L9.27627 21.682L4.69506 21.7503L4.7286 24L11.5596 23.8982L11.3728 11.3703L12.6694 11.3882L12.766 4.35302Z"/>
+</mask>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.766 4.35302L5.62911 4.255L5.53249 11.2901L9.12206 11.3394L9.20978 17.2227L4.62573 17.2911L4.6593 19.5409L9.24333 19.4725L9.27627 21.682L4.69506 21.7503L4.7286 24L11.5596 23.8982L11.3728 11.3703L12.6694 11.3882L12.766 4.35302Z" fill="black"/>
+<path d="M5.62911 4.255L5.64971 2.75515L4.14985 2.73455L4.12925 4.23441L5.62911 4.255ZM12.766 4.35302L14.2659 4.37362L14.2865 2.87376L12.7866 2.85316L12.766 4.35302ZM5.53249 11.2901L4.03264 11.2695L4.01204 12.7694L5.5119 12.79L5.53249 11.2901ZM9.12206 11.3394L10.6219 11.3171L10.6002 9.85959L9.14265 9.83958L9.12206 11.3394ZM9.20978 17.2227L9.23216 18.7226L10.732 18.7002L10.7096 17.2004L9.20978 17.2227ZM4.62573 17.2911L4.60335 15.7913L3.10352 15.8137L3.1259 17.3135L4.62573 17.2911ZM4.6593 19.5409L3.15947 19.5633L3.18185 21.0631L4.68168 21.0407L4.6593 19.5409ZM9.24333 19.4725L10.7432 19.4501L10.7208 17.9503L9.22095 17.9727L9.24333 19.4725ZM9.27627 21.682L9.29863 23.1818L10.7985 23.1594L10.7761 21.6596L9.27627 21.682ZM4.69506 21.7503L4.6727 20.2504L3.17286 20.2728L3.19522 21.7726L4.69506 21.7503ZM4.7286 24L3.22877 24.0224L3.25113 25.5222L4.75096 25.4998L4.7286 24ZM11.5596 23.8982L11.5819 25.398L13.0818 25.3756L13.0594 23.8758L11.5596 23.8982ZM11.3728 11.3703L11.3934 9.87048L9.84992 9.84929L9.87293 11.3927L11.3728 11.3703ZM12.6694 11.3882L12.6488 12.888L14.1487 12.9086L14.1693 11.4087L12.6694 11.3882ZM5.60851 5.75486L12.7454 5.85288L12.7866 2.85316L5.64971 2.75515L5.60851 5.75486ZM7.03235 11.3107L7.12897 4.2756L4.12925 4.23441L4.03264 11.2695L7.03235 11.3107ZM9.14265 9.83958L5.55309 9.79028L5.5119 12.79L9.10146 12.8393L9.14265 9.83958ZM7.62222 11.3618L7.70995 17.2451L10.7096 17.2004L10.6219 11.3171L7.62222 11.3618ZM9.1874 15.7229L4.60335 15.7913L4.64811 18.791L9.23216 18.7226L9.1874 15.7229ZM3.1259 17.3135L3.15947 19.5633L6.15913 19.5185L6.12557 17.2688L3.1259 17.3135ZM4.68168 21.0407L9.2657 20.9723L9.22095 17.9727L4.63692 18.0411L4.68168 21.0407ZM7.74349 19.4949L7.77644 21.7043L10.7761 21.6596L10.7432 19.4501L7.74349 19.4949ZM9.25391 20.1821L4.6727 20.2504L4.71742 23.2501L9.29863 23.1818L9.25391 20.1821ZM3.19522 21.7726L3.22877 24.0224L6.22843 23.9777L6.19489 21.7279L3.19522 21.7726ZM4.75096 25.4998L11.5819 25.398L11.5372 22.3983L4.70624 22.5002L4.75096 25.4998ZM13.0594 23.8758L12.8726 11.348L9.87293 11.3927L10.0597 23.9205L13.0594 23.8758ZM12.69 9.88829L11.3934 9.87048L11.3522 12.8702L12.6488 12.888L12.69 9.88829ZM11.2662 4.33242L11.1696 11.3676L14.1693 11.4087L14.2659 4.37362L11.2662 4.33242Z" fill="black" mask="url(#path-2-inside-1)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.2796 1.26121C9.20838 0.46864 7.88301 0 6.44818 0C2.88695 0 0 2.88695 0 6.44818C0 9.00798 1.4916 11.2194 3.65306 12.2607L3.68943 9.61275C2.80735 8.84314 2.25 7.71075 2.25 6.44818C2.25 4.12959 4.12959 2.25 6.44818 2.25C7.18811 2.25 7.88333 2.44143 8.48703 2.77746L10.2796 1.26121Z" fill="black"/>
+</svg>

addons/core/translations/actions/en-us.yaml

@@ -32,3 +32,4 @@ change-password: Change Password
 edit-form: Edit Form
 change-origin: Change Origin URL
 change-state: Change State
+close: Close

addons/core/translations/form/en-us.yaml

@@ -108,3 +108,10 @@ email:
   label: Email
 full_name:
   label: Full Name
+key:
+  label: Key
+value:
+  label: Value
+callback_url:
+  label: Callback URL
+  help: The URL to which the third-party provider sends the authentication response.  Paste this into the provider configuration.

addons/core/translations/resources/en-us.yaml

@@ -147,6 +147,17 @@ session:
       description: No active sessions available to display yet.
   actions:
     connect: Connect
+  credential:
+    title: Credential
+    title_plural: Credentials
+    secret:
+      label: Secret
+    credential_library:
+      title: Credential Library
+    actions:
+      raw-api:
+        show: View raw API output
+        hide: Hide raw API output
 org:
   title: Org
   title_plural: Orgs
@@ -233,6 +244,12 @@ target:
     none:
       title: No Targets Available
       description: No Targets to display yet. Contact your Boundary admin if you don't see a Target you expect access to.
+    connection-success:
+      title: Successfully Connected
+    connection-details:
+      title: Target Connection Details
+    proxy_url:
+      title: Proxy URL
   actions:
     create: New Target
     delete: Delete Target
@@ -250,3 +267,4 @@ target:
       add:
         title: Add Host Sets
         description: Select host sets to assign to this target.
+    secret: ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■

addons/core/translations/states/en-us.yaml

@@ -4,9 +4,6 @@ success: Success
 warning: Warning
 error: Error
 copied: Copied
-connection:
-  success:
-    description: "Local proxy address ({protocol}): {address}:{port}"
 primary: Primary
 inactive: Inactive
 active-private: Private

addons/rose/addon/components/rose/dropdown/index.hbs

@@ -1,6 +1,6 @@
 <details
   ...attributes
-  class="rose-dropdown {{if @dropdownRight "rose-dropdown-right"}}"
+  class="rose-dropdown {{if @dropdownRight "rose-dropdown-right"}} {{if @style (concat "rose-dropdown-" @style)}}"
   {{on-click-outside this.close}}
 >
 
@@ -22,14 +22,28 @@
 
   </summary>
 
-  <div class="rose-dropdown-content" {{on-click-inside this.close}}>
-    {{yield (hash
-      link=(component "rose/dropdown/link" style=this.style)
-      button=(component "rose/dropdown/button" style=this.style)
-      item=(component "rose/anonymous" class="rose-dropdown-item")
-      separator=(component "rose/anonymous" tagName="hr" class="rose-dropdown-separator")
-      section=(component "rose/dropdown/section" style=this.style)
-    )}}
-  </div>
+  {{#if @ignoreClickInside}}
+    <div class="rose-dropdown-content">
+      {{yield (hash
+        link=(component "rose/dropdown/link" style=this.style)
+        button=(component "rose/dropdown/button" style=this.style)
+        item=(component "rose/anonymous" class="rose-dropdown-item")
+        separator=(component "rose/anonymous" tagName="hr" class="rose-dropdown-separator")
+        section=(component "rose/dropdown/section" style=this.style)
+        key-value=(component "rose/dropdown/key-value")
+      )}}
+    </div>
+  {{else}}
+    <div class="rose-dropdown-content" {{on-click-inside this.close}}>
+      {{yield (hash
+        link=(component "rose/dropdown/link" style=this.style)
+        button=(component "rose/dropdown/button" style=this.style)
+        item=(component "rose/anonymous" class="rose-dropdown-item")
+        separator=(component "rose/anonymous" tagName="hr" class="rose-dropdown-separator")
+        section=(component "rose/dropdown/section" style=this.style)
+        key-value=(component "rose/dropdown/key-value")
+      )}}
+    </div>
+  {{/if}}
 
 </details>

addons/rose/addon/components/rose/dropdown/index.stories.mdx

@@ -63,6 +63,24 @@ A simple dropdown component with support for links and buttons.
   }}</Story>
 </Preview>
 
+<Preview>
+  <Story name="Dropdown with Key Value Items" height="13rem">{{
+    template: hbs`
+      <Rose::Dropdown @text="View details" @showCaret={{showCaret}} @ignoreClickInside={{true}} as |dropdown|>
+        <dropdown.key-value>
+          <:key>Name</:key>
+          <:value>Key/Value</:value>
+        </dropdown.key-value>
+        <dropdown.separator />
+        <dropdown.key-value>
+          <:key>Description</:key>
+          <:value>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda illo ratione libero ducimus magnam, porro sed provident repellat mollitia a, repellendus placeat. Magni consequuntur cumque, debitis obcaecati dolores quasi natus?</:value>
+        </dropdown.key-value>
+      </Rose::Dropdown>
+    `,
+  }}</Story>
+</Preview>
+
 
 ```html
   <Rose::Dropdown @text="Choose One&hellip;" as |dropdown|>
@@ -125,3 +143,14 @@ form field.
   </form.radioGroup>
 </Rose::Form>
 ```
+
+Closing dropdown after clicking inside it's content can be ignored using `ignoreClickInside`. This is useful when dropdown contains keyvalue items that users need to select/copy/interact with.
+
+```html
+<Rose::Dropdown @text="View details" @showCaret={{true}} @ignoreClickInside={{true}} as |dropdown|>
+  <dropdown.key-value>
+    <:key>ID</:key>
+    <:value>cl_nbv9375hLHs</:value>
+  </dropdown.key-value>
+</Rose::Dropdown>
+```

addons/rose/addon/components/rose/dropdown/key-value/index.hbs

@@ -0,0 +1,9 @@
+<dl class='rose-dropdown-key-value rose-dropdown-item'>
+  <dt class='rose-dropdown-key'>
+    {{yield to='key'}}
+  </dt>
+
+  <dd class='rose-dropdown-value'>
+      {{yield to='value'}}
+  </dd>
+</dl>

addons/rose/addon/styles/rose/components/dropdown/_dropdown.scss

@@ -5,6 +5,7 @@ $xs: sizing.rems(xs); // 8
 $xxs: sizing.rems(xxs); // 4
 $chevron: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231b1f26' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z'></path></svg>");
 $chevronWhite: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%23ffffff' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z'></path></svg>");
+$chevronGrey: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%23626873' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z'></path></svg>");
 
 .rose-dropdown {
   --background-image-light: #{$chevron};
@@ -121,4 +122,26 @@ $chevronWhite: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%23f
     border: none;
     margin: $xxs 0;
   }
+
+  // Styles for condensed verion. Some are overrides
+  &.rose-dropdown-condensed {
+    --background-image: #{$chevronGrey};
+    border: sizing.rems(xxxxs) solid var(--ui-border);
+    border-radius: sizing.rems(xxs);
+
+    .rose-dropdown-trigger {
+      color: var(--ui-gray-starker-1);
+      padding: 0 sizing.rems(s); // To clear the inherit padding.
+
+      &.show-caret {
+        padding-right: sizing.rems(l) + sizing.rems(xs); // 32
+        background-position: right sizing.rems(xs) center;
+      }
+    }
+
+    .rose-dropdown-content {
+      border: none;
+      border: sizing.rems(xxxxs) solid var(--ui-border);
+    }
+  }
 }

addons/rose/addon/styles/rose/components/dropdown/_index.scss

@@ -3,3 +3,4 @@
 @import 'link';
 @import 'item';
 @import 'section';
+@import 'key-value';

addons/rose/addon/styles/rose/components/dropdown/_item.scss

@@ -7,8 +7,14 @@ $checkmark: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231563
 .rose-dropdown-item {
   @include type.type(s);
   min-width: (sizing.rems(m)) * 20;
-  $line-height: math.div(36, 14);
-  line-height: $line-height;
+  $paddingY: math.div(
+    sizing.rems(xl) - (sizing.rems(m) + sizing.rems(xxxs)),
+    2
+  );
+  $paddingX: sizing.rems(s);
+  padding: $paddingY $paddingX;
+  //$line-height: math.div(36, 14);
+  //line-height: $line-height;
 
   --color: var(--stark);
   --background-color: transparent;
@@ -16,26 +22,22 @@ $checkmark: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231563
   color: var(--color);
   background-color: var(--background-color);
 
-  &:hover {
-    --background-color: var(--ui-gray-subtler-5);
-  }
-
   .rose-form-radio {
     color: currentColor;
     margin-bottom: 0;
 
     .rose-form-radio-label {
       display: block;
+      margin: -#{$paddingY} -#{$paddingX};
       padding-top: sizing.rems(xs) + sizing.rems(xxxxs);
       padding-bottom: sizing.rems(xs) + sizing.rems(xxxxs);
       padding-left: sizing.rems(s);
       padding-right: sizing.rems(xl);
       font-weight: normal;
 
-      // &::before,
-      // &::after {
-      //   display: none;
-      // }
+      &:hover {
+        background-color: var(--ui-gray-subtler-5);
+      }
 
       &::after {
         top: sizing.rems(xxs) + sizing.rems(xxxs);
@@ -57,11 +59,6 @@ $checkmark: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231563
         ~ .rose-form-radio-label {
           color: var(--action);
           background-color: var(--action-subtler-1h);
-
-          // background-image: #{$checkmark};
-          // background-repeat: no-repeat;
-          // background-position: right sizing.rems(m) center;
-          // background-size: sizing.rems(m);
         }
       }
 

addons/rose/addon/styles/rose/components/dropdown/_key-value.scss

@@ -0,0 +1,11 @@
+@use '../../variables/sizing';
+
+.rose-dropdown-key-value {
+  .rose-dropdown-key {
+    text-transform: capitalize;
+  }
+  .rose-dropdown-value {
+    color: var(--ui-gray);
+    padding: sizing.rems(xxs) sizing.rems(s) 0 0;
+  }
+}

addons/rose/addon/styles/rose/components/form/_fieldset.scss

@@ -3,7 +3,7 @@
 
 .rose-form-fieldset {
   margin-bottom: sizing.rems(m);
-  
+
   .rose-form-fieldset-title {
     @include type.type(l, bold);
   }

addons/rose/addon/styles/rose/components/table/_table.scss

@@ -9,6 +9,10 @@
   .rose-table-row {
     border-bottom: sizing.rems(xxxxs) solid var(--ui-gray-subtler-3);
     text-align: left;
+
+    &:last-child {
+      border-bottom: 0;
+    }
   }
 
   // This styles are add to stop the input to apply extra margin (default on forms)
@@ -39,6 +43,9 @@
 
   .rose-table-header-cell {
     @include type.type(s, semibold);
+  }
+
+  .rose-table-header .rose-table-header-cell {
     color: var(--ui-gray);
   }
 
@@ -67,11 +74,27 @@
   }
 
   &.rose-table-condensed {
-    .rose-table-cell {
+    .rose-table-cell,
+    .rose-table-header-cell {
       @include type.type(s);
       $lineHeight: math.div(36, 14);
       line-height: $lineHeight;
-      padding: math.div(sizing.rems(s), 2) sizing.rems(s);
+      padding: sizing.rems(xxs) + sizing.rems(xxxxs) sizing.rems(s);
+
+      &:first-child {
+        padding-left: 0;
+      }
+    }
+    .rose-table-header {
+      border-bottom: sizing.rems(xxxxs) solid var(--ui-gray-subtler-3);
+      .rose-table-header-cell {
+        $lineHeight: math.div(16, 14);
+        line-height: $lineHeight;
+        padding: sizing.rems(xs) sizing.rems(s);
+        &:first-child {
+          padding-left: 0;
+        }
+      }
     }
   }
 

addons/rose/app/components/rose/dropdown/key-value.js

@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/dropdown/key-value';

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

@@ -1,196 +1,82 @@
-<h2>Condensed Table</h2>
-<Rose::Table @style="condensed" as |table|>
-  <table.header as |header|>
-    <header.row  as |row|>
-      <row.headerCell >Address</row.headerCell>
-      <row.headerCell>Host Set</row.headerCell>
-      <row.headerCell>Name</row.headerCell>
-      <row.headerCell>Description</row.headerCell>
-    </header.row>
-  </table.header>
-  <table.body as |body|>
-    <body.row as |row|>
-      <row.cell>1.1.1.1</row.cell>
-      <row.cell>host-set-1, host-set-2</row.cell>
-      <row.cell>optional name</row.cell>
-      <row.cell>description</row.cell>
-    </body.row>
-  </table.body>
-  <table.footer as |footer|>
-    <footer.row as |row|>
-      <row.cell>Footer</row.cell>
-    </footer.row>
-  </table.footer>
-</Rose::Table>
+<h2>KeyValue Dropdown</h2>
+<Rose::Dropdown
+  @text="Credential library details"
+  @showCaret={{true}}
+  @ignoreClickInside={{true}}
+  as |dropdown|
+>
+  <dropdown.key-value>
+    <:key>ID</:key>
+    <:value>cl_nbv9375hLHs</:value>
+  </dropdown.key-value>
 
-<h2>Condensed Table with Shrink Cells</h2>
-<Rose::Table @style="condensed" as |table|>
-  <table.header as |header|>
-    <header.row  as |row|>
-      <row.headerCell>Address</row.headerCell>
-      <row.headerCell @shrink={{true}}>Host Set</row.headerCell>
-      <row.headerCell @shrink={{true}}>Name</row.headerCell>
-      <row.headerCell>Description</row.headerCell>
-    </header.row>
-  </table.header>
-  <table.body as |body|>
-    <body.row as |row|>
-      <row.cell>1.1.1.1</row.cell>
-      <row.cell @shrink={{true}}>host-set-1, host-set-2</row.cell>
-      <row.cell @shrink={{true}}>
-        <Rose::Button @style="secondary" @iconOnly="trash" title="Remove">Remove</Rose::Button>
-      </row.cell>
-      <row.cell>description</row.cell>
-    </body.row>
-  </table.body>
-  <table.footer @hidden={{true}} as |footer|>
-    <footer.row as |row|>
-      <row.cell>Footer</row.cell>
-    </footer.row>
-  </table.footer>
-</Rose::Table>
+  <dropdown.separator />
 
-<h2>Condensed Table with Right and Center aligned cells</h2>
-<Rose::Table @style="condensed" as |table|>
-  <table.header as |header|>
-    <header.row  as |row|>
-      <row.headerCell>Address</row.headerCell>
-      <row.headerCell @alignCenter={{true}}>Host Set</row.headerCell>
-      <row.headerCell>Name</row.headerCell>
-      <row.headerCell>Description</row.headerCell>
-    </header.row>
-  </table.header>
-  <table.body as |body|>
-    <body.row as |row|>
-      <row.cell>1.1.1.1</row.cell>
-      <row.cell @alignCenter={{true}}>host-set-1, host-set-2</row.cell>
-      <row.cell @alignRight={{true}}>optional name</row.cell>
-      <row.cell @alignCenter={{true}}>description</row.cell>
-    </body.row>
-  </table.body>
-  <table.footer as |footer|>
-    <footer.row as |row|>
-      <row.cell>Footer</row.cell>
-    </footer.row>
-  </table.footer>
-</Rose::Table>
+  <dropdown.key-value>
+    <:key>Name</:key>
+    <:value>Key/Value</:value>
+  </dropdown.key-value>
 
-<h2>Condensed Table Key/Value Lookalike (edit mode)</h2>
-<Rose::Table @style="condensed" as |table|>
-  <table.header as |header|>
-    <header.row  as |row|>
-      <row.headerCell @shrink={{true}}>Key</row.headerCell>
-      <row.headerCell colspan="2">Value</row.headerCell>
-    </header.row>
-  </table.header>
-  <table.body as |body|>
-    <body.row as |row|>
-      <row.cell>Key</row.cell>
-      <row.cell>
-        <Rose::Form::Input @contextual={{true}} as |input|>
-          <input.field />
-        </Rose::Form::Input>
-      </row.cell>
-      <row.cell @shrink={{true}} @alignRight={{true}}>
-        <Rose::Button @style="secondary" @iconOnly="trash" title="Remove">Remove</Rose::Button>
-      </row.cell>
-    </body.row>
-    <body.row as |row|>
-      <row.cell>Key</row.cell>
-      <row.cell>
-        <Rose::Form::Select
-          @name="Test select"
-          as |field|
-        >
-          <field.field as |select|>
-            <select.option>Choose an option</select.option>
-            <select.option @value="value-1">Value 1</select.option>
-            <select.option @value="value-2">Value 2</select.option>
-            <select.option @value="value-3">Value 3</select.option>
-          </field.field>
-        </Rose::Form::Select>
-      </row.cell>
-      <row.cell @shrink={{true}} @alignRight={{true}}>
-        <Rose::Button @style="secondary">Add</Rose::Button>
-      </row.cell>
-    </body.row>
-    <body.row as |row|>
-      <row.cell>Key</row.cell>
-      <row.cell>
-        <Rose::Form::Input @contextual={{true}} as |input|>
-          <input.field />
-        </Rose::Form::Input>
-      </row.cell>
-      <row.cell @alignRight={{true}}>
-        <Rose::Button @style="secondary">Add</Rose::Button>
-      </row.cell>
-    </body.row>
-    <body.row as |row|>
-      <row.cell>Key</row.cell>
-      <row.cell>
-        <Rose::Form::Textarea
-          @name="field"
-          readonly={{false}}
-        />
-      </row.cell>
-      <row.cell @alignRight={{true}}>
-        <Rose::Button @style="secondary">Add</Rose::Button>
-      </row.cell>
-    </body.row>
-  </table.body>
-  <table.footer @hidden={{true}} as |footer|>
-    <footer.row as |row|>
-      <row.cell colspan="3">Footer</row.cell>
-    </footer.row>
-  </table.footer>
-</Rose::Table>
+  <dropdown.separator />
 
-<h2>Condensed Table With Visually Hidden Header & Footer</h2>
-<Rose::Table @style="condensed" as |table|>
-  <table.header as |header|>
-    <header.row @hidden={{true}} as |row|>
-      <row.headerCell >Address</row.headerCell>
-      <row.headerCell>Host Set</row.headerCell>
-      <row.headerCell>Name</row.headerCell>
-      <row.headerCell>Description</row.headerCell>
-    </header.row>
-  </table.header>
-  <table.body as |body|>
-    <body.row as |row|>
-      <row.cell>1.1.1.1</row.cell>
-      <row.cell>host-set-1, host-set-2</row.cell>
-      <row.cell>optional name</row.cell>
-      <row.cell>description</row.cell>
-    </body.row>
-  </table.body>
-  <table.footer as |footer|>
-    <footer.row @hidden={{true}} as |row|>
-      <row.cell>Footer</row.cell>
-    </footer.row>
-  </table.footer>
-</Rose::Table>
+  <dropdown.key-value>
+    <:key>Description</:key>
+    <:value>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda illo ratione libero ducimus magnam, porro sed provident repellat mollitia a, repellendus placeat. Magni consequuntur cumque, debitis obcaecati dolores quasi natus?</:value>
+  </dropdown.key-value>
 
-<h2>Table</h2>
-<Rose::Table as |table|>
-  <table.header as |header|>
-    <header.row as |row|>
-      <row.headerCell>Address</row.headerCell>
-      <row.headerCell>Host Set</row.headerCell>
-      <row.headerCell>Name</row.headerCell>
-      <row.headerCell>Description</row.headerCell>
-    </header.row>
-  </table.header>
-  <table.body as |body|>
-    <body.row as |row|>
-      <row.cell>1.1.1.1</row.cell>
-      <row.cell>host-set-1, host-set-2</row.cell>
-      <row.cell>optional name</row.cell>
-      <row.cell>description</row.cell>
-    </body.row>
-  </table.body>
-  <table.footer as |footer|>
-    <footer.row as |row|>
-      <row.cell>Footer</row.cell>
-    </footer.row>
-  </table.footer>
-</Rose::Table>
+</Rose::Dropdown>
+
+<h2>Condensed dropdown</h2>
+<Rose::Dropdown
+  @style="condensed"
+  @text="Credential library details"
+  @showCaret={{true}}
+  as |dropdown|
+>
+  <dropdown.section @title="ID">
+    <dropdown.item>cl_nbv9375hLHs</dropdown.item>
+  </dropdown.section>
+
+  <dropdown.separator />
+
+  <dropdown.section @title="Name">
+    <dropdown.item>Key/Value</dropdown.item>
+  </dropdown.section>
+
+  <dropdown.separator />
+
+  <dropdown.section @title="Description">
+    <dropdown.item>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet sem sodales neque ultrices sollicitudin vel sed justo. Vivamus vitae sollicitudin turpis.</dropdown.item>
+  </dropdown.section>
+</Rose::Dropdown>
+
+<h2>Normal Dropdown</h2>
+<Rose::Dropdown
+  @text="Credential library details"
+  @showCaret={{true}}
+  as |dropdown|
+>
+  <dropdown.section @title="ID">
+    <dropdown.item>cl_nbv9375hLHs</dropdown.item>
+  </dropdown.section>
+  <dropdown.separator />
+
+  <dropdown.section @title="Name">
+    <dropdown.item>Key/Value</dropdown.item>
+  </dropdown.section>
+  <dropdown.separator />
+
+  <dropdown.section @title="Description">
+    <dropdown.item>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet sem sodales neque ultrices sollicitudin vel sed justo. Vivamus vitae sollicitudin turpis.</dropdown.item>
+  </dropdown.section>
+</Rose::Dropdown>
+
+<h2>Normal Dropdown</h2>
+<Rose::Dropdown
+  @text="Credential library details"
+  @showCaret={{true}}
+  as |dropdown|
+>
+<dropdown.link @route="about">Menu item</dropdown.link>
+<dropdown.link @route="about">Menu item 2</dropdown.link>
+</Rose::Dropdown>

addons/rose/tests/integration/components/rose/dropdown/key-value-test.js

@@ -0,0 +1,20 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, find } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | rose/dropdown/key-value', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    await render(hbs`
+      <Rose::Dropdown::KeyValue>
+        <:key>key</:key>
+        <:value>value</:value>
+      </Rose::Dropdown::KeyValue>
+    `);
+
+    assert.equal(find('.rose-dropdown-key').textContent.trim(), 'key');
+    assert.equal(find('.rose-dropdown-value').textContent.trim(), 'value');
+  });
+});

package.json

@@ -65,12 +65,13 @@
     "merge": "^2.1.1",
     "xmlhttprequest-ssl": "^1.6.2",
     "underscore": "^1.12.1",
-    "hosted-git-info": "3.0.8",
+    "hosted-git-info": "^3.0.8",
     "trim": "~1.0.1",
     "browserslist": "^4.16.5",
     "ws": "^7.4.6",
     "css-what": "^5.0.1",
-    "trim-newlines": "^3.0.1"
+    "trim-newlines": "^3.0.1",
+    "clean-css": "^4.1.11"
   },
   "config": {
     "commitizen": {

ui/admin/app/components/form/account/index.hbs

@@ -0,0 +1,8 @@
+{{#if @model.type}}
+  {{component
+    (concat 'form/account/' @model.type)
+    model=@model
+    submit=@submit
+    cancel=@cancel
+  }}
+{{/if}}

ui/admin/app/components/form/account/oidc/index.hbs

@@ -0,0 +1,127 @@
+<Rose::Form
+  @onSubmit={{@submit}}
+  @cancel={{@cancel}}
+  @disabled={{@model.isSaving}}
+  @error={{@model.errors.base}}
+  @showEditToggle={{if @model.isNew false true}}
+  as |form|
+>
+  <form.input
+    @value={{@model.type}}
+    @label={{t 'form.type.label'}}
+    readonly={{true}}
+    @disabled={{true}}
+  />
+
+  {{#unless @model.isNew}}
+    <form.input
+      @value={{@model.attributes.issuer}}
+      @label={{t 'form.issuer.label'}}
+      readonly={{true}}
+      @disabled={{true}}
+    />
+    <form.input
+      @value={{@model.attributes.subject}}
+      @label={{t 'form.subject.label'}}
+      readonly={{true}}
+      @disabled={{true}}
+    />
+    <form.input
+      @value={{@model.attributes.email}}
+      @label={{t 'form.email.label'}}
+      readonly={{true}}
+      @disabled={{true}}
+    />
+    <form.input
+      @value={{@model.attributes.full_name}}
+      @label={{t 'form.full_name.label'}}
+      readonly={{true}}
+      @disabled={{true}}
+    />
+  {{/unless}}
+
+  <form.input
+    @name='name'
+    @type='name'
+    @value={{@model.name}}
+    @label={{t 'form.name.label'}}
+    @helperText={{t 'form.name.help'}}
+    @error={{@model.errors.name}}
+    readonly={{false}}
+    as |field|
+  >
+    {{#if @model.errors.name}}
+      <field.errors as |errors|>
+        {{#each @model.errors.name as |error|}}
+          <errors.message>{{error.message}}</errors.message>
+        {{/each}}
+      </field.errors>
+    {{/if}}
+  </form.input>
+
+  <form.textarea
+    @name='description'
+    @type='description'
+    @value={{@model.description}}
+    @label={{t 'form.description.label'}}
+    @helperText={{t 'form.description.help'}}
+    @error={{@model.errors.description}}
+    disabled={{@model.isSaving}}
+    readonly={{false}}
+    as |field|
+  >
+    {{#if @model.errors.description}}
+      <field.errors as |errors|>
+        {{#each @model.errors.description as |error|}}
+          <errors.message>{{error.message}}</errors.message>
+        {{/each}}
+      </field.errors>
+    {{/if}}
+  </form.textarea>
+
+  {{#if @model.isNew}}
+    <form.input
+      @name='issuer'
+      @type='text'
+      @value={{@model.attributes.issuer}}
+      @label={{t 'form.issuer.label'}}
+      @error={{@model.errors.issuer}}
+      readonly={{false}}
+      as |field|
+    >
+      {{#if @model.errors.issuer}}
+        <field.errors as |errors|>
+          {{#each @model.errors.issuer as |error|}}
+            <errors.message>{{error.message}}</errors.message>
+          {{/each}}
+        </field.errors>
+      {{/if}}
+    </form.input>
+
+    <form.input
+      @name='subject'
+      @type='text'
+      @value={{@model.attributes.subject}}
+      @label={{t 'form.subject.label'}}
+      @error={{@model.errors.subject}}
+      readonly={{false}}
+      as |field|
+    >
+      {{#if @model.errors.subject}}
+        <field.errors as |errors|>
+          {{#each @model.errors.subject as |error|}}
+            <errors.message>{{error.message}}</errors.message>
+          {{/each}}
+        </field.errors>
+      {{/if}}
+    </form.input>
+  {{/if}}
+
+  <form.actions
+    @disabled={{if @model.cannotSave @model.cannotSave}}
+    @enableEditText={{t 'actions.edit-form'}}
+    @submitText={{t 'actions.save'}}
+    @cancelText={{t 'actions.cancel'}}
+  />
+
+</Rose::Form>

ui/admin/app/components/form/auth-method/oidc/index.hbs

@@ -180,7 +180,11 @@
                   @style='warning'
                   @iconOnly='trash'
                   title={{t 'actions.remove'}}
-                  @disabled={{if form.isEditable false true}}
+                  @disabled={{if
+                    @model.isNew
+                    false
+                    (if form.isEditable false true)
+                  }}
                   {{on
                     'click'
                     (fn @removeItemByIndex 'attributes.signing_algorithms' i)
@@ -215,7 +219,11 @@
               <Rose::Button
                 @style='secondary'
                 title={{t 'actions.add'}}
-                @disabled={{if form.isEditable false true}}
+                @disabled={{if
+                  @model.isNew
+                  false
+                  (if form.isEditable false true)
+                }}
                 {{on
                   'click'
                   (fn
@@ -273,7 +281,11 @@
                   @style='warning'
                   @iconOnly='trash'
                   title={{t 'actions.remove'}}
-                  @disabled={{if form.isEditable false true}}
+                  @disabled={{if
+                    @model.isNew
+                    false
+                    (if form.isEditable false true)
+                  }}
                   {{on
                     'click'
                     (fn @removeItemByIndex 'attributes.allowed_audiences' i)
@@ -297,7 +309,11 @@
               <Rose::Button
                 @style='secondary'
                 title={{t 'actions.add'}}
-                @disabled={{if form.isEditable false true}}
+                @disabled={{if
+                  @model.isNew
+                  false
+                  (if form.isEditable false true)
+                }}
                 {{on
                   'click'
                   (fn
@@ -355,7 +371,11 @@
                   @style='warning'
                   @iconOnly='trash'
                   title={{t 'actions.remove'}}
-                  @disabled={{if form.isEditable false true}}
+                  @disabled={{if
+                    @model.isNew
+                    false
+                    (if form.isEditable false true)
+                  }}
                   {{on
                     'click'
                     (fn @removeItemByIndex 'attributes.claims_scopes' i)
@@ -379,7 +399,11 @@
               <Rose::Button
                 @style='secondary'
                 title={{t 'actions.add'}}
-                @disabled={{if form.isEditable false true}}
+                @disabled={{if
+                  @model.isNew
+                  false
+                  (if form.isEditable false true)
+                }}
                 {{on
                   'click'
                   (fn
@@ -456,7 +480,11 @@
                   @style='warning'
                   @iconOnly='trash'
                   title={{t 'actions.remove'}}
-                  @disabled={{if form.isEditable false true}}
+                  @disabled={{if
+                    @model.isNew
+                    false
+                    (if form.isEditable false true)
+                  }}
                   {{on
                     'click'
                     (fn @removeItemByIndex 'attributes.account_claim_maps' i)
@@ -496,7 +524,11 @@
               <Rose::Button
                 @style='secondary'
                 title={{t 'actions.add'}}
-                @disabled={{if form.isEditable false true}}
+                @disabled={{if
+                  @model.isNew
+                  false
+                  (if form.isEditable false true)
+                }}
                 {{on
                   'click'
                   (fn @addAccountClaimMapItem this.newFromClaim this.newToClaim)
@@ -549,7 +581,11 @@
                   @style='warning'
                   @iconOnly='trash'
                   title={{t 'actions.remove'}}
-                  @disabled={{if form.isEditable false true}}
+                  @disabled={{if
+                    @model.isNew
+                    false
+                    (if form.isEditable false true)
+                  }}
                   {{on
                     'click'
                     (fn @removeItemByIndex 'attributes.idp_ca_certs' i)
@@ -572,7 +608,11 @@
               <Rose::Button
                 @style='secondary'
                 title={{t 'actions.add'}}
-                @disabled={{if form.isEditable false true}}
+                @disabled={{if
+                  @model.isNew
+                  false
+                  (if form.isEditable false true)
+                }}
                 {{on
                   'click'
                   (fn
@@ -629,6 +669,16 @@
     {{/if}}
   </form.input>
 
+  {{#unless @model.isNew}}
+    <form.input
+      @value={{@model.attributes.callback_url}}
+      @label={{t 'form.callback_url.label'}}
+      @helperText={{t 'form.callback_url.help'}}
+      readonly={{true}}
+      @disabled={{true}}
+    />
+  {{/unless}}
+
   <form.actions
     @disabled={{if @model.cannotSave @model.cannotSave}}
     @enableEditText={{t 'actions.edit-form'}}

ui/admin/app/components/form/user/add-accounts/index.hbs

@@ -17,7 +17,8 @@
       <table.header as |header|>
         <header.row as |row|>
           <row.headerCell>{{t 'form.id.label'}}</row.headerCell>
-          <row.headerCell>{{t 'form.username.label'}}</row.headerCell>
+          <row.headerCell>{{t 'form.name.label'}}</row.headerCell>
+          <row.headerCell>{{t 'form.type.label'}}</row.headerCell>
           <row.headerCell>{{t 'resources.auth-method.title'}}</row.headerCell>
         </header.row>
       </table.header>
@@ -31,7 +32,12 @@
                 onChange={{fn this.toggleAccount account}}
               />
             </row.cell>
-            <row.cell>{{account.username}}</row.cell>
+            <row.cell>{{account.accountName}}</row.cell>
+            <row.cell>
+              <Rose::Badge>
+                {{t (concat 'resources.auth-method.types.' account.type)}}
+              </Rose::Badge>
+            </row.cell>
             <row.cell>
               <code>{{account.auth_method_id}}</code>
             </row.cell>

ui/admin/app/routes/scopes/scope/auth-methods/auth-method/accounts/new.js

@@ -8,11 +8,11 @@ export default class ScopesScopeAuthMethodsAuthMethodAccountsNewRoute extends Ro
    * @return {AccountModel}
    */
   model() {
-    const { id: auth_method_id } = this.modelFor(
+    const { id: auth_method_id, type } = this.modelFor(
       'scopes.scope.auth-methods.auth-method'
     );
     return this.store.createRecord('account', {
-      type: 'password',
+      type,
       auth_method_id,
     });
   }

ui/admin/app/templates/scopes/scope/auth-methods/auth-method/-actions.hbs

@@ -53,23 +53,12 @@
       </dropdown.button>
     {{/if}}
   {{/if}}
-  {{#if @model.isOIDC}}
-    {{#if (feature-flag 'oidc-account-crud')}}
-      <dropdown.link
-        @route='scopes.scope.auth-methods.auth-method.accounts.new'
-        @model={{@model}}
-      >
-        {{t 'resources.account.actions.create'}}
-      </dropdown.link>
-    {{/if}}
-  {{else}}
-    <dropdown.link
-      @route='scopes.scope.auth-methods.auth-method.accounts.new'
-      @model={{@model}}
-    >
-      {{t 'resources.account.actions.create'}}
-    </dropdown.link>
-  {{/if}}
+  <dropdown.link
+    @route='scopes.scope.auth-methods.auth-method.accounts.new'
+    @model={{@model}}
+  >
+    {{t 'resources.account.actions.create'}}
+  </dropdown.link>
   <dropdown.separator />
   <dropdown.button
     @style='danger'

ui/admin/app/templates/scopes/scope/auth-methods/auth-method/accounts/account/-navigation.hbs

@@ -4,9 +4,11 @@
   >
     {{t 'titles.details'}}
   </nav.link>
-  <nav.link
-    @route='scopes.scope.auth-methods.auth-method.accounts.account.set-password'
-  >
-    {{t 'actions.set-password'}}
-  </nav.link>
+  {{#if @model.isPassword}}
+    <nav.link
+      @route='scopes.scope.auth-methods.auth-method.accounts.account.set-password'
+    >
+      {{t 'actions.set-password'}}
+    </nav.link>
+  {{/if}}
 </Rose::Nav::Tabs>

ui/admin/app/templates/scopes/scope/auth-methods/auth-method/accounts/account/index.hbs

@@ -1,4 +1,4 @@
-<Form::Account::Password
+<Form::Account
   @model={{@model}}
   @submit={{route-action 'save' @model}}
   @cancel={{route-action 'cancel' @model}}

ui/admin/app/templates/scopes/scope/auth-methods/auth-method/accounts/index.hbs

@@ -10,6 +10,7 @@
           <row.headerCell>{{t 'form.subject.label'}}</row.headerCell>
           <row.headerCell>{{t 'form.email.label'}}</row.headerCell>
           <row.headerCell>{{t 'form.full_name.label'}}</row.headerCell>
+          <row.headerCell>{{t 'form.type.label'}}</row.headerCell>
           <row.headerCell>{{t 'form.id.label'}}</row.headerCell>
         </header.row>
       </table.header>
@@ -17,7 +18,13 @@
         {{#each @model as |account|}}
           <body.row as |row|>
             <row.headerCell scope='row'>
-              {{account.displayName}}
+              <LinkTo
+                @route='scopes.scope.auth-methods.auth-method.accounts.account'
+                @model={{account.id}}
+              >
+                {{account.accountName}}
+                <p>{{account.description}}</p>
+              </LinkTo>
             </row.headerCell>
             <row.cell>
               <code>{{account.attributes.issuer}}</code>
@@ -31,6 +38,9 @@
             <row.cell>
               {{account.attributes.full_name}}
             </row.cell>
+            <row.cell>
+              <Rose::Badge>{{account.type}}</Rose::Badge>
+            </row.cell>
             <row.cell>
               <Copyable
                 @text={{account.id}}
@@ -49,11 +59,8 @@
       <table.header as |header|>
         <header.row as |row|>
           <row.headerCell>{{t 'form.name.label'}}</row.headerCell>
-          <row.headerCell>
-            {{#if @model.firstObject.isPassword}}
-              {{t 'form.login_name.label'}}
-            {{/if}}
-          </row.headerCell>
+          <row.headerCell>{{t 'form.login_name.label'}}</row.headerCell>
+          <row.headerCell>{{t 'form.type.label'}}</row.headerCell>
           <row.headerCell>{{t 'form.id.label'}}</row.headerCell>
         </header.row>
       </table.header>
@@ -65,12 +72,15 @@
                 @route='scopes.scope.auth-methods.auth-method.accounts.account'
                 @model={{account.id}}
               >
-                {{account.displayName}}
+                {{account.accountName}}
+                <p>{{account.description}}</p>
               </LinkTo>
-              <p>{{account.description}}</p>
             </row.headerCell>
             <row.cell>
-              {{account.username}}
+              {{account.attributes.login_name}}
+            </row.cell>
+            <row.cell>
+              <Rose::Badge>{{account.type}}</Rose::Badge>
             </row.cell>
             <row.cell>
               <Copyable

ui/admin/app/templates/scopes/scope/auth-methods/auth-method/accounts/new.hbs

@@ -1,4 +1,4 @@
-<Form::Account::Password
+<Form::Account
   @model={{@model}}
   @submit={{route-action 'save' @model}}
   @cancel={{route-action 'cancel' @model}}

ui/admin/app/templates/scopes/scope/users/user/accounts.hbs

@@ -6,7 +6,7 @@
     <table.header as |header|>
       <header.row as |row|>
         <row.headerCell>{{t 'form.name.label'}}</row.headerCell>
-        <row.headerCell>{{t 'form.login_name.label'}}</row.headerCell>
+        <row.headerCell>{{t 'form.type.label'}}</row.headerCell>
         <row.headerCell>{{t 'form.id.label'}}</row.headerCell>
         <row.headerCell>{{t 'titles.actions'}}</row.headerCell>
       </header.row>
@@ -15,11 +15,13 @@
       {{#each @model.accounts as |account|}}
         <body.row as |row|>
           <row.headerCell>
-            {{account.displayName}}
+            {{account.accountName}}
             <p>{{account.description}}</p>
           </row.headerCell>
           <row.cell>
-            {{account.username}}
+            <Rose::Badge>
+              {{t (concat 'resources.auth-method.types.' account.type)}}
+            </Rose::Badge>
           </row.cell>
           <row.cell>
             <Copyable

ui/admin/config/environment.js

@@ -89,7 +89,7 @@ module.exports = function (environment) {
       'primary-auth-method': true,
       oidc: true,
       'oidc-crud': true,
-      'oidc-account-crud': false,
+      'oidc-account-crud': true,
       search: false,
       filter: false,
       capabilities: false,

ui/admin/package.json

@@ -91,7 +91,7 @@
     "rose": "*",
     "sass": "^1.29.0",
     "sass-lint": "^1.13.1",
-    "sinon": "^9.2.1"
+    "sinon": "^11.1.1"
   },
   "engines": {
     "node": ">=10 <=15"

ui/desktop/.stylelintrc.json

@@ -6,6 +6,7 @@
     "scss/at-extend-no-missing-placeholder": null,
     "function-parentheses-space-inside": null,
     "property-no-vendor-prefix": null,
-    "at-rule-no-vendor-prefix": null
+    "at-rule-no-vendor-prefix": null,
+    "order/properties-alphabetical-order": null
   }
 }

ui/desktop/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 Canonical reference for changes, improvements, and bugfixes for Boundary Desktop.
 
+## v1.2.0 [CLI 0.4.0] (2021.06.29)
+
+### New
+
+- Add Vault credential support. ([PR](https://github.com/hashicorp/boundary-ui/pull/619))
+
 ## v1.1.0 [CLI 0.3.0] (2021.06.09)
 
 ### Known Issues

ui/desktop/app/components/card/index.hbs

@@ -0,0 +1,27 @@
+<section class='card'>
+  {{#if (if (has-block 'header') true @heading)}}
+    <header class='card-header'>
+      {{#if @heading}}
+        <h2>
+          {{#if @icon}}
+            <Rose::Icon @name={{@icon}} @size='medium' />
+          {{/if}}
+          {{@heading}}
+        </h2>
+      {{/if}}
+
+      {{yield to='header'}}
+
+    </header>
+  {{/if}}
+
+  <div class='card-body'>
+    {{yield to='body'}}
+  </div>
+
+  {{#if (has-block 'footer')}}
+    <footer class='card-footer'>
+      {{yield to='footer'}}
+    </footer>
+  {{/if}}
+</section>

ui/desktop/app/components/dialog-detail/index.hbs

@@ -0,0 +1,114 @@
+<Rose::Dialog
+  class='dialog-detail'
+  @heading={{@heading}}
+  @dismiss={{@dismiss}}
+  @dismissButtonText={{@dismissButtonText}}
+  @modal={{true}}
+  as |dialog|
+>
+  {{#if @notification}}
+    <Rose::Notification
+      @style={{@notificationStyle}}
+      @heading={{@notification}}
+    />
+  {{/if}}
+
+  <dialog.body>
+    {{yield to='body'}}
+    {{!--
+    <Rose::Separator />
+    <h3>Credentials</h3>
+    <div class="credentials-card">
+      <div class="credentials-card-header">
+        <div><Rose::Icon @name="key" /> Credentials</div>
+        <div>
+          <Rose::Button
+            @disabled={{false}}
+            @style={{style}}
+            @iconRight={{iconRight}}
+            {{on "click" onClick}}
+          >
+            Credential library details
+          </Rose::Button>
+        </div>
+      </div>
+
+      <Rose::Separator />
+
+      <div class="credentials-card-body">
+        <Rose::Table @style="condensed" as |table|>
+          <table.header as |header|>
+            <header.row  as |row|>
+              <row.headerCell @shrink={{true}}>Key</row.headerCell>
+              <row.headerCell colspan="2">Value</row.headerCell>
+            </header.row>
+          </table.header>
+          <table.body as |body|>
+            <body.row as |row|>
+              <row.cell>Foo</row.cell>
+              <row.cell>&nbsp;</row.cell>
+            </body.row>
+            <body.row as |row|>
+              <row.cell>ttl</row.cell>
+              <row.cell>&nbsp;</row.cell>
+            </body.row>
+          </table.body>
+        </Rose::Table>
+      </div>
+
+      <div class="credentials-card-footer">
+        <p><LinkTo @route='index'>View raw API output</LinkTo></p>
+        <Rose::Separator />
+        <div>Code</div>
+      </div>
+    </div>
+
+    <div class="credentials-card">
+      <div class="credentials-card-header">
+        <div><Rose::Icon @name="key" /> Credentials</div>
+        <div>
+          <Rose::Button
+            @disabled={{false}}
+            @style={{style}}
+            @iconRight={{iconRight}}
+            {{on "click" onClick}}
+          >
+            Credential library details
+          </Rose::Button>
+        </div>
+      </div>
+
+      <Rose::Separator />
+
+      <div class="credentials-card-body">
+        <Rose::Table @style="condensed" as |table|>
+          <table.header as |header|>
+            <header.row  as |row|>
+              <row.headerCell @shrink={{true}}>Key</row.headerCell>
+              <row.headerCell colspan="2">Value</row.headerCell>
+            </header.row>
+          </table.header>
+          <table.body as |body|>
+            <body.row as |row|>
+              <row.cell>Foo</row.cell>
+              <row.cell>&nbsp;</row.cell>
+            </body.row>
+            <body.row as |row|>
+              <row.cell>ttl</row.cell>
+              <row.cell>&nbsp;</row.cell>
+            </body.row>
+          </table.body>
+        </Rose::Table>
+      </div>
+
+      <div class="credentials-card-footer">
+        <p><LinkTo @route='index'>View raw API output</LinkTo></p>
+        <Rose::Separator />
+        <div>Code</div>
+      </div>
+    </div>--}}
+  </dialog.body>
+  <dialog.footer>
+    {{yield to='footer'}}
+  </dialog.footer>
+</Rose::Dialog>

ui/desktop/app/components/hidden-secret/index.hbs

@@ -0,0 +1,9 @@
+<div class='hidden-secret'>
+  <Copyable
+    @text={{@secret}}
+    @buttonText={{t 'actions.copy-to-clipboard'}}
+    @acknowledgeText={{t 'states.copied'}}
+  >
+    <span>{{this.textMask}}</span>
+  </Copyable>
+</div>

ui/desktop/app/components/hidden-secret/index.js

@@ -0,0 +1,5 @@
+import Component from '@glimmer/component';
+
+export default class HiddenSecretComponent extends Component {
+  textMask = '■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■';
+}

ui/desktop/app/components/reveal/index.hbs

@@ -0,0 +1,14 @@
+<details ...attributes class='reveal'>
+  <summary class='reveal-trigger'>
+    <span class='reveal-trigger-text-close'>
+      {{@textWhenClose}}
+    </span>
+    <span class='reveal-trigger-text-open'>
+      {{@textWhenOpen}}
+    </span>
+
+  </summary>
+  <content class='reveal-content'>
+    {{yield}}
+  </content>
+</details>

ui/desktop/app/components/reveal/index.js

@@ -0,0 +1,3 @@
+import RoseDropdownComponent from 'rose/components/rose/dropdown';
+
+export default class RevealComponent extends RoseDropdownComponent {}

ui/desktop/app/helpers/raw-json.js

@@ -0,0 +1,8 @@
+import { helper } from '@ember/component/helper';
+
+/**
+ * Helper to convert json object to string for display purposes.
+ */
+export default helper(function rawJson([json]) {
+  return JSON.stringify(json, null, '  ');
+});

ui/desktop/app/routes/scopes/scope/projects/targets.js

@@ -2,7 +2,6 @@ import Route from '@ember/routing/route';
 import { inject as service } from '@ember/service';
 import { action } from '@ember/object';
 import { task, timeout } from 'ember-concurrency';
-import { later } from '@ember/runloop';
 import config from '../../../../config/environment';
 
 const POLL_TIMEOUT_SECONDS = config.sessionPollingTimeoutSeconds;
@@ -81,6 +80,11 @@ export default class ScopesScopeProjectsTargetsRoute extends Route {
 
   // =actions
 
+  @action
+  acknowledge(session) {
+    session.acknowledged = true;
+  }
+
   /**
    * Establish a session to current target.
    * @param {TargetModel} model
@@ -105,31 +109,19 @@ export default class ScopesScopeProjectsTargetsRoute extends Route {
       const connectionDetails = await this.ipc.invoke('connect', options);
 
       // Associate the connection details with the session
-      const { session_id, address, port } = connectionDetails;
-      await this.store.findRecord('session', session_id);
+      const { session_id, address, port, credentials } = connectionDetails;
+      const session = await this.store.findRecord('session', session_id);
 
+      // Flag the session has been open in the desktop client
+      session.started_desktop_client = true;
       // Update the session record with proxy information from the CLI
-      // This is read-only information that shouldn't dirty the session,
-      // so we use store.push here.  In the future, it may make sense to push
-      // this off to the API so that we don't have to manually persist the
-      // proxy details.
-      later(() => {
-        this.store.push({
-          data: {
-            id: session_id,
-            type: 'session',
-            attributes: {
-              proxy_address: address,
-              proxy_port: port
-            }
-          }
-        });
-      }, 150);
-
-      // Show the user a modal with basic connection info.
-      // We don't await because this modal is purely informational.
-      this.confirm.confirm(connectionDetails, { isConnectSuccess: true });
-
+      // In the future, it may make sense to push this off to the API so that
+      // we don't have to manually persist the proxy details.
+      session.proxy_address = address;
+      session.proxy_port = port;
+      if (credentials) {
+        credentials.forEach(cred => session.addCredential(cred));
+      }
     } catch(e) {
       this.confirm.confirm(e.message, { isConnectError: true })
         // Retry

ui/desktop/app/styles/app.scss

@@ -213,7 +213,6 @@
   .copyable-button {
     margin: 0;
     padding: 0 sizing.rems(xxs);
-    position: relative;
     top: -2px;
   }
 
@@ -325,3 +324,169 @@
   margin: sizing.rems(l) 0 0 0;
   text-align: center;
 }
+
+
+// Dialog Detail
+// These styles are a Work In Progress. Expect changes (lots of them)
+.rose-dialog,
+.dialog-detail {
+  z-index: 6000;
+}
+
+.dialog-detail {
+  .rose-notification {
+    border-left: 0;
+    border-right: 0;
+    border-top: 0;
+    box-shadow: none;
+    margin-bottom: 0;
+  }
+
+  .rose-dialog-body {
+    > :first-child {
+      margin-top: 0;
+      padding-top: 0;
+    }
+  }
+
+  .rose-dialog-footer {
+    align-items: center;
+
+    div:nth-child(1) {
+      display: flex;
+      justify-content: flex-start;
+      width: 50%;
+    }
+
+    div:nth-child(2) {
+      display: flex;
+      justify-content: flex-end;
+      width: 50%;
+    }
+  }
+}
+
+// Overlay above everything - including notifications
+.rose-dialog-modal-overlay {
+  z-index: 5500;
+}
+
+// Reveal component (app/components/reveal)
+$chevron-up: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231563FF' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M7.41 16L12 11.42L16.59 16L18 14.59L12 8.59L6 14.59L7.41 16Z' /></svg>");
+$chevron-down: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231563FF' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M16.59 8.59L12 13.17L7.41 8.59L6 10L12 16L18 10L16.59 8.59Z' /></svg>");
+
+.reveal {
+  --trigger-color: var(--action);
+
+  .reveal-trigger {
+    background: url($chevron-down) no-repeat right center;
+    color: var(--trigger-color);
+    cursor: default;
+    display: inline-block;
+    overflow: hidden;
+    padding-right: sizing.rems(l);
+    white-space: nowrap;
+
+    // Hide default twistie triangle
+    // Firefox
+    list-style-type: none;
+    // Webkit / Chromium
+    &::-webkit-details-marker {
+      display: none;
+    }
+
+    &::marker {
+      display: none;
+    }
+
+    &:hover {
+      --trigger-color: var(--action-starker-1);
+    }
+  }
+
+  &:not([open]) {
+    .reveal-trigger-text-close {
+      background: $chevron-down no-repeat right center;
+      padding-right: sizing.rems(l);
+    }
+
+    .reveal-trigger-text-open {
+      display: none;
+    }
+  }
+
+  &[open] {
+    .reveal-trigger-text-open {
+      background: $chevron-up no-repeat right center;
+      padding-right: sizing.rems(l);
+    }
+
+    .reveal-trigger-text-close {
+      display: none;
+    }
+
+    pre {
+      white-space: pre-wrap;
+      word-break: break-all;
+    }
+  }
+}
+
+// Card component (app/components/card)
+.card {
+  border: sizing.rems(xxxxs) solid var(--ui-gray-subtler-3);
+  display: flex;
+  flex-direction: column;
+  margin-bottom: sizing.rems(m);
+
+  .card-header {
+    align-items: center;
+    border-bottom: sizing.rems(xxxxs) solid var(--ui-gray-subtler-3);
+    display: flex;
+    justify-content: space-between;
+    padding: sizing.rems(s) sizing.rems(s) sizing.rems(s) sizing.rems(m);
+
+    h2 {
+      @include type.type(s, normal);
+      color: var(--ui-gray-starker-1);
+      margin: 0;
+      padding: sizing.rems(xxs) + sizing.rems(xxxs) 0;
+    }
+
+    .rose-icon {
+      margin-right: sizing.rems(xxxs);
+    }
+  }
+
+  .card-body {
+    padding: sizing.rems(s);
+  }
+
+  .card-footer {
+    border-top: sizing.rems(xxxxs) solid var(--ui-gray-subtler-3);
+    padding: sizing.rems(s);
+  }
+
+  // Allow text wrapping for copyable content in table
+  .rose-table .copyable {
+    white-space: inherit;
+    word-break: break-word;
+  }
+}
+
+// Hidden secret component (app/components/hidden-secret)
+.hidden-secret {
+  display: flex;
+  align-items: center;
+  color: var(--ui-gray-subtler-2);
+
+  .copyable {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+  }
+
+  .rose-button-ghost {
+    color: var(--ui-gray-subtler-1);
+  }
+}

ui/desktop/app/templates/application.hbs

@@ -103,39 +103,7 @@
 </EmberNotify>
 
 <PendingConfirmations as |confirmation accept deny|>
-  {{#if confirmation.options.isConnectSuccess}}
-    <Rose::Dialog
-      @heading={{t 'states.success'}}
-      @dismissButtonText={{t 'actions.ok'}}
-      @icon='check-circle-fill'
-      @style='success'
-      @modal={{true}}
-      @dismiss={{deny}}
-      as |dialog|
-    >
-      <dialog.body>
-
-        <Copyable
-          @text={{concat confirmation.text.address ':' confirmation.text.port}}
-          @buttonText={{t 'actions.copy-to-clipboard'}}
-          @acknowledgeText={{t 'states.copied'}}
-        >
-          {{t
-            'states.connection.success.description'
-            port=confirmation.text.port
-            address=confirmation.text.address
-            protocol=confirmation.text.protocol
-          }}
-        </Copyable>
-
-      </dialog.body>
-      <dialog.footer>
-        <Rose::Button @style='primary' {{on 'click' accept}}>
-          {{t 'actions.ok'}}
-        </Rose::Button>
-      </dialog.footer>
-    </Rose::Dialog>
-  {{else if confirmation.options.isConnectError}}
+  {{#if confirmation.options.isConnectError}}
     <Rose::Dialog
       @heading={{t 'states.error'}}
       @dismissButtonText={{t 'actions.ok'}}

ui/desktop/app/templates/scopes/scope/projects/targets.hbs

@@ -1,3 +1,147 @@
 {{page-title (t 'resources.target.title_plural')}}
 
+{{#each @model as |target|}}
+  {{#each target.sessions as |session|}}
+    {{#if session.started_desktop_client}}
+      {{#unless session.acknowledged}}
+        <DialogDetail
+          @heading={{concat
+            (t 'resources.target.messages.connection-details.title')
+            ': '
+            target.id
+          }}
+          @notificationStyle='success'
+          @notification={{t
+            'resources.target.messages.connection-success.title'
+          }}
+          @dismiss={{route-action 'acknowledge' session}}
+          @dismissButtonText={{t 'actions.ok'}}
+        >
+          <:body>
+            <h3>
+              {{t 'resources.target.messages.proxy_url.title'}}
+              ({{t 'resources.target.types.tcp'}})
+            </h3>
+            <p>
+              <Copyable
+                @text={{session.proxy}}
+                @buttonText={{t 'actions.copy-to-clipboard'}}
+                @acknowledgeText={{t 'states.copied'}}
+              >
+                <code>{{session.proxy}}</code>
+              </Copyable>
+            </p>
+
+            {{#if session.credentials}}
+              <Rose::Separator />
+
+              <h3>{{t 'resources.session.credential.title_plural'}}</h3>
+
+              {{#each session.credentials as |credential|}}
+                <Card
+                  @heading='{{t 'resources.session.credential.title'}}
+                    {{if
+                    credential.library.name
+                    (concat ' (' credential.library.name ')')
+                  }}'
+                  @icon='app-icons/credential'
+                >
+                  <:header>
+                    <Rose::Dropdown
+                      @text={{t
+                        'resources.session.credential.credential_library.title'
+                      }}
+                      @style='condensed'
+                      @dropdownRight={{true}}
+                      @ignoreClickInside={{true}}
+                      as |dropdown|
+                    >
+                      <dropdown.key-value>
+                        <:key>{{t 'form.id.label'}}</:key>
+                        <:value>
+                          <Copyable
+                            @text={{credential.library.id}}
+                            @buttonText={{t 'actions.copy-to-clipboard'}}
+                            @acknowledgeText={{t 'states.copied'}}
+                          >
+                            <code>{{credential.library.id}}</code>
+                          </Copyable>
+                        </:value>
+                      </dropdown.key-value>
+                      <dropdown.key-value>
+                        <:key>{{t 'form.type.label'}}</:key>
+                        <:value>{{credential.library.type}}</:value>
+                      </dropdown.key-value>
+                      {{#if credential.library.name}}
+                        <dropdown.key-value>
+                          <:key>{{t 'form.name.label'}}</:key>
+                          <:value>{{credential.library.name}}</:value>
+                        </dropdown.key-value>
+                      {{/if}}
+                      {{#if credential.library.description}}
+                        <dropdown.key-value>
+                          <:key>{{t 'form.description.label'}}</:key>
+                          <:value>{{credential.library.description}}</:value>
+                        </dropdown.key-value>
+                      {{/if}}
+                    </Rose::Dropdown>
+                  </:header>
+                  <:body>
+                    {{#if credential.secrets}}
+                      <Rose::Table @style='condensed' as |table|>
+                        <table.header as |header|>
+                          <header.row as |row|>
+                            <row.headerCell>{{t
+                                'form.key.label'
+                              }}</row.headerCell>
+                            <row.headerCell colspan='2'>{{t
+                                'form.value.label'
+                              }}</row.headerCell>
+                          </header.row>
+                        </table.header>
+                        <table.body as |body|>
+                          {{#each credential.secrets as |secret|}}
+                            <body.row as |row|>
+                              <row.headerCell>{{secret.key}}</row.headerCell>
+                              <row.cell colspan='2'>
+                                <HiddenSecret @secret={{secret.value}} />
+                              </row.cell>
+                            </body.row>
+                          {{/each}}
+                        </table.body>
+                      </Rose::Table>
+                    {{/if}}
+                  </:body>
+                  <:footer>
+                    <Reveal
+                      @textWhenOpen={{t
+                        'resources.session.credential.actions.raw-api.hide'
+                      }}
+                      @textWhenClose={{t
+                        'resources.session.credential.actions.raw-api.show'
+                      }}
+                    >
+                      <pre>{{raw-json credential.rawCredential}}</pre>
+                    </Reveal>
+                  </:footer>
+                </Card>
+              {{/each}}
+            {{/if}}
+          </:body>
+          <:footer>
+            <div>
+              <Rose::Button
+                @style='secondary'
+                {{on 'click' (route-action 'acknowledge' session)}}
+              >
+                {{t 'actions.close'}}
+              </Rose::Button>
+            </div>
+          </:footer>
+        </DialogDetail>
+      {{/unless}}
+    {{/if}}
+  {{/each}}
+{{/each}}
+
 {{outlet}}

ui/desktop/electron-app/config/cli.js

@@ -5,7 +5,7 @@ const https = require('https');
 const decompress = require('decompress');
 const { isMac, isWindows } = require('../src/helpers/platform.js');
 
-const artifactVersion = '0.3.0';
+const artifactVersion = '0.4.0';
 const artifactDestination = path.resolve(__dirname, '..', 'cli');
 
 const downloadArtifact = (version) => {
@@ -48,6 +48,10 @@ const extract = (artifactPath, destination) => {
 
 module.exports = {
   setup: async () => {
+    if (process.env.BYPASS_CLI_SETUP) {
+      console.warn('WARNING: Bypassing cli setup');
+      return;
+    }
     const artifactPath = await downloadArtifact(artifactVersion);
     await extract(artifactPath, artifactDestination);
   }

ui/desktop/electron-app/package.json

@@ -26,7 +26,7 @@
     "electron-is-dev": "^1.2.0",
     "electron-squirrel-startup": "^1.0.0",
     "lookpath": "^1.1.0",
-    "node-html-parser": "^3.1.3",
+    "node-html-parser": "^3.3.5",
     "semver": "^7.3.5",
     "shell-quote": "^1.7.2",
     "tree-kill": "^1.2.2"
@@ -43,6 +43,8 @@
   "resolutions": {
     "highlight.js": "^10.4.1",
     "xmldom": "~0.5.0",
-    "yargs-parser": "~20.2.7"
+    "yargs-parser": "~20.2.7",
+    "trim-newlines": "^3.0.1",
+    "normalize-url": "^4.5.1"
   }
 }

ui/desktop/electron-app/yarn.lock

@@ -866,21 +866,21 @@ cross-zip@^3.0.0:
   dependencies:
     rimraf "^3.0.0"
 
-css-select@^3.1.2:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/css-select/-/css-select-3.1.2.tgz#d52cbdc6fee379fba97fb0d3925abbd18af2d9d8"
-  integrity sha512-qmss1EihSuBNWNNhHjxzxSfJoFBM/lERB/Q4EnsJQQC62R2evJDW481091oAdOr9uh46/0n4nrg0It5cAnj1RA==
+css-select@^4.1.3:
+  version "4.1.3"
+  resolved "https://registry.yarnpkg.com/css-select/-/css-select-4.1.3.tgz#a70440f70317f2669118ad74ff105e65849c7067"
+  integrity sha512-gT3wBNd9Nj49rAbmtFHj1cljIAOLYSX1nZ8CB7TBO3INYckygm5B7LISU/szY//YmdiSLbJvDLOx9VnMVpMBxA==
   dependencies:
     boolbase "^1.0.0"
-    css-what "^4.0.0"
-    domhandler "^4.0.0"
-    domutils "^2.4.3"
+    css-what "^5.0.0"
+    domhandler "^4.2.0"
+    domutils "^2.6.0"
     nth-check "^2.0.0"
 
-css-what@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/css-what/-/css-what-4.0.0.tgz#35e73761cab2eeb3d3661126b23d7aa0e8432233"
-  integrity sha512-teijzG7kwYfNVsUh2H/YN62xW3KK9YhXEgSlbxMlcyjPNvdKJqFx5lrwlJgoFP1ZHlB89iGDlo/JyshKeRhv5A==
+css-what@^5.0.0:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/css-what/-/css-what-5.0.1.tgz#3efa820131f4669a8ac2408f9c32e7c7de9f4cad"
+  integrity sha512-FYDTSHb/7KXsWICVsxdmiExPjCfRC4qRFBdVwv7Ax9hMnvMmEjP9RfxTEZ3qPZGmADDn2vAKSo9UcN1jKVYscg==
 
 cuint@^0.2.2:
   version "0.2.2"
@@ -1066,21 +1066,28 @@ domelementtype@^2.0.1, domelementtype@^2.2.0:
   resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.2.0.tgz#9a0b6c2782ed6a1c7323d42267183df9bd8b1d57"
   integrity sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A==
 
-domhandler@^4.0.0, domhandler@^4.1.0:
+domhandler@^4.0.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-4.1.0.tgz#c1d8d494d5ec6db22de99e46a149c2a4d23ddd43"
   integrity sha512-/6/kmsGlMY4Tup/nGVutdrK9yQi4YjWVcVeoQmixpzjOUK1U7pQkvAPHBJeUxOgxF0J8f8lwCJSlCfD0V4CMGQ==
   dependencies:
     domelementtype "^2.2.0"
 
-domutils@^2.4.3:
-  version "2.5.1"
-  resolved "https://registry.yarnpkg.com/domutils/-/domutils-2.5.1.tgz#9b8e84b5d9f788499ae77506ea832e9b4f9aa1c0"
-  integrity sha512-hO1XwHMGAthA/1KL7c83oip/6UWo3FlUNIuWiWKltoiQ5oCOiqths8KknvY2jpOohUoUgnwa/+Rm7UpwpSbY/Q==
+domhandler@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-4.2.0.tgz#f9768a5f034be60a89a27c2e4d0f74eba0d8b059"
+  integrity sha512-zk7sgt970kzPks2Bf+dwT/PLzghLnsivb9CcxkvR8Mzr66Olr0Ofd8neSbglHJHaHa2MadfoSdNlKYAaafmWfA==
+  dependencies:
+    domelementtype "^2.2.0"
+
+domutils@^2.6.0:
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/domutils/-/domutils-2.7.0.tgz#8ebaf0c41ebafcf55b0b72ec31c56323712c5442"
+  integrity sha512-8eaHa17IwJUPAiB+SoTYBo5mCdeMgdcAoXJ59m6DT1vw+5iLS3gNoqYaRowaBKtGVrOF1Jz4yDTgYKLK2kvfJg==
   dependencies:
     dom-serializer "^1.0.1"
     domelementtype "^2.2.0"
-    domhandler "^4.1.0"
+    domhandler "^4.2.0"
 
 ds-store@^0.1.5:
   version "0.1.6"
@@ -2450,12 +2457,12 @@ node-gyp@^7.1.0:
     tar "^6.0.2"
     which "^2.0.2"
 
-node-html-parser@^3.1.3:
-  version "3.1.3"
-  resolved "https://registry.yarnpkg.com/node-html-parser/-/node-html-parser-3.1.3.tgz#987d39bc8df27bc70cbe3b4e9a31fd84f7454dfb"
-  integrity sha512-pCE2I5UY5iOBnWdJQkbYZSk+fyq2zepw0nsELpHQjVFyCzOeZhkMhnvKqGceKgzWsWx7EG4KtMqsy9Eklf5Thw==
+node-html-parser@^3.3.5:
+  version "3.3.5"
+  resolved "https://registry.yarnpkg.com/node-html-parser/-/node-html-parser-3.3.5.tgz#b312174fda86145b9572218955e400a731c60326"
+  integrity sha512-d4ex19KYXfhi8dYhGaY4/9oCHRSyaxjd4FKvL3Fx/9f6c+qMVgrG1uXgPO3Mucu+I4Wi7P4o4RIq51NHNiWpSQ==
   dependencies:
-    css-select "^3.1.2"
+    css-select "^4.1.3"
     he "1.2.0"
 
 node-pre-gyp@^0.11.0:
@@ -2499,10 +2506,10 @@ normalize-package-data@^2.3.2, normalize-package-data@^2.3.4:
     semver "2 || 3 || 4 || 5"
     validate-npm-package-license "^3.0.1"
 
-normalize-url@^4.1.0:
-  version "4.5.0"
-  resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-4.5.0.tgz#453354087e6ca96957bd8f5baf753f5982142129"
-  integrity sha512-2s47yzUxdexf1OhyRi4Em83iQk0aPvwTddtFz4hnSSw9dCEsLEGf6SwIO8ss/19S9iBb5sJaOuTvTGDeZI00BQ==
+normalize-url@^4.1.0, normalize-url@^4.5.1:
+  version "4.5.1"
+  resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-4.5.1.tgz#0dd90cf1288ee1d1313b87081c9a5932ee48518a"
+  integrity sha512-9UZCFRHQdNrfTpGg8+1INIg93B6zE0aXMVFkw1WFwvO4SlZywU6aLg5Of0Ap/PgcbSw4LNxvMWXMeugwMCX0AA==
 
 npm-bundled@^1.0.1:
   version "1.1.1"
@@ -3595,10 +3602,10 @@ tree-kill@^1.2.2:
   resolved "https://registry.yarnpkg.com/tree-kill/-/tree-kill-1.2.2.tgz#4ca09a9092c88b73a7cdc5e8a01b507b0790a0cc"
   integrity sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==
 
-trim-newlines@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/trim-newlines/-/trim-newlines-1.0.0.tgz#5887966bb582a4503a41eb524f7d35011815a613"
-  integrity sha1-WIeWa7WCpFA6QetST301ARgVphM=
+trim-newlines@^1.0.0, trim-newlines@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/trim-newlines/-/trim-newlines-3.0.1.tgz#260a5d962d8b752425b32f3a7db0dcacd176c144"
+  integrity sha512-c1PTsA3tYrIsLGkJkzHF+w9F2EyxfXGo4UyJc4pFL++FMjnq0HJS69T3M7d//gKrFKwy429bouPescbjecU+Zw==
 
 trim-repeated@^1.0.0:
   version "1.0.0"

ui/desktop/package.json

@@ -105,7 +105,7 @@
     "qunit-dom": "^1.6.0",
     "rose": "*",
     "sass": "^1.29.0",
-    "sinon": "^9.2.1",
+    "sinon": "^11.1.1",
     "stylelint": "^13.8.0",
     "stylelint-config-sass-guidelines": "^7.1.0"
   },

ui/desktop/tests/acceptance/projects/targets-test.js

@@ -227,16 +227,16 @@ module('Acceptance | projects | targets', function (hooks) {
         'tbody tr:first-child td:last-child button',
         'Activate connect mode'
       );
-      assert.ok(find('.rose-dialog-success'), 'Success dialog');
+      assert.ok(find('.dialog-detail'), 'Success dialog');
       assert.equal(findAll('.rose-dialog-footer button').length, 1);
       assert.equal(
         find('.rose-dialog-footer button').textContent.trim(),
-        'OK',
+        'Close',
         'Cannot retry'
       );
       assert.equal(
         find('.rose-dialog-body .copyable-content').textContent.trim(),
-        'Local proxy address (tcp): a_123:p_123'
+        'a_123:p_123'
       );
     }, 750);
     await visit(urls.targets);

ui/desktop/tests/acceptance/projects/targets/hosts-test.js

@@ -219,15 +219,15 @@ module('Acceptance | projects | targets | hosts', function (hooks) {
         'tbody tr:first-child td:last-child button',
         'Activate connect mode'
       );
-      assert.ok(find('.rose-dialog-success'), 'Success dialog');
+      assert.ok(find('.dialog-detail'), 'Success dialog');
       assert.equal(
-        find('.rose-dialog-footer .rose-button-primary').textContent.trim(),
-        'OK',
+        find('.rose-dialog-footer .rose-button-secondary').textContent.trim(),
+        'Close',
         'Cannot retry'
       );
       assert.equal(
         find('.rose-dialog-body .copyable-content').textContent.trim(),
-        'Local proxy address (tcp): a_123:p_123'
+        'a_123:p_123'
       );
     }, 750);
     await visit(urls.hosts);

ui/desktop/tests/acceptance/projects/targets/sessions-test.js

@@ -295,15 +295,15 @@ module('Acceptance | projects | targets | sessions', function (hooks) {
     later(async () => {
       run.cancelTimers();
       await click('.rose-layout-page-actions button', 'Activate connect mode');
-      assert.ok(find('.rose-dialog-success'), 'Success dialog');
+      assert.ok(find('.dialog-detail'), 'Success dialog');
       assert.equal(
-        find('.rose-dialog-footer .rose-button-primary').textContent.trim(),
-        'OK',
+        find('.rose-dialog-footer .rose-button-secondary').textContent.trim(),
+        'Close',
         'Cannot retry'
       );
       assert.equal(
         find('.rose-dialog-body .copyable-content').textContent.trim(),
-        'Local proxy address (tcp): a_123:p_123'
+        'a_123:p_123'
       );
     }, 750);
     await visit(urls.sessions);
@@ -325,7 +325,7 @@ module('Acceptance | projects | targets | sessions', function (hooks) {
       run.cancelTimers();
       instances.session.update('status', 'active');
       await click('.rose-layout-page-actions button', 'Activate connect mode');
-      assert.ok(find('.rose-dialog-success'), 'Success dialog');
+      assert.ok(find('.dialog-detail'), 'Success dialog');
       await click('.rose-dialog-dismiss');
       assert.equal(
         find(

ui/desktop/tests/acceptance/scopes-test.js

@@ -292,11 +292,11 @@ module('Acceptance | scopes', function (hooks) {
         'tbody tr:first-child td:last-child button',
         'Activate connect mode'
       );
-      assert.ok(find('.rose-dialog-success'), 'Success dialog');
+      assert.ok(find('.dialog-detail'), 'Success dialog');
       assert.equal(findAll('.rose-dialog-footer button').length, 1);
       assert.equal(
         find('.rose-dialog-footer button').textContent.trim(),
-        'OK',
+        'Close',
         'Cannot retry'
       );
     }, 750);

ui/desktop/tests/integration/components/card-test.js

@@ -0,0 +1,45 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, find } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | card', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    await render(hbs`<Card />`);
+    assert.ok(find('.card'));
+  });
+
+  test('it renders with content', async function (assert) {
+    await render(hbs`
+      <Card>
+        <:header></:header>
+        <:body></:body>
+        <:footer></:footer>
+      </Card>
+    `);
+
+    assert.ok(find('.card'));
+    assert.ok(find('.card-header'));
+    assert.ok(find('.card-body'));
+    assert.ok(find('.card-footer'));
+  });
+
+  test('header renders an icon when defined', async function (assert) {
+    await render(hbs`
+      <Card
+        @heading='This is a heading test'
+        @icon='key'>
+        <:header></:header>
+        <:body></:body>
+        <:footer></:footer>
+      </Card>
+    `);
+
+    assert.ok(find('.card'));
+    assert.ok(find('.card-header'));
+    assert.ok(find('.card-header .rose-icon'));
+    assert.equal(this.element.textContent.trim(), 'This is a heading test');
+  });
+});

ui/desktop/tests/integration/components/dialog-detail-test.js

@@ -0,0 +1,30 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, find } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | dialog-detail', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    await render(hbs`<DialogDetail />`);
+    assert.ok(find('.dialog-detail'));
+  });
+
+  test('it renders with content', async function (assert) {
+    await render(hbs`
+      <DialogDetail>
+        <dialogDetail.notification />
+        <dialogDetail.body>
+          <h2>Test</h2>
+        </dialogDetail.body>
+        <dialogDetail.footer></dialogDetail.footer>
+      </DialogDetail>
+    `);
+
+    assert.ok(find('.dialog-detail'));
+    assert.ok(find('.rose-dialog-header'));
+    assert.ok(find('.rose-dialog-body'));
+    assert.ok(find('.rose-dialog-footer'));
+  });
+});

ui/desktop/tests/integration/components/hidden-secret-test.js

@@ -0,0 +1,21 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, find } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | hidden-secret', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders with a secret', async function (assert) {
+    assert.expect(2);
+    await render(hbs`
+      <HiddenSecret @secret='AAaaBBccDDeeOTXzSMT1234BB_Z8JzG7JkSVxI' />
+    `);
+
+    assert.ok(find('.hidden-secret'));
+    assert.equal(
+      find('.hidden-secret > span > span').textContent.trim(),
+      '■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■'
+    );
+  });
+});

ui/desktop/tests/integration/components/reveal-test.js

@@ -0,0 +1,48 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, find, click } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | reveal', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    assert.expect(3);
+    await render(hbs`
+      <Reveal
+        @textWhenOpen='Hide content'
+        @textWhenClose='View content'
+      />
+    `);
+    assert.ok(find('.reveal'));
+    assert.ok(find('.reveal-trigger'));
+    assert.ok(find('.reveal-trigger').textContent.trim(), 'View content');
+  });
+
+  test('it renders with content, opens, show the content, close and hide the content', async function (assert) {
+    assert.expect(3);
+    await render(hbs`
+      <Reveal
+        @textWhenOpen='Hide content'
+        @textWhenClose='View content'
+      >
+        <pre>
+          <code>
+            {
+              "auth": null,
+              "lease_duration": 3600,
+              "lease_id": "",
+              "renewable": false
+            }
+          </code>
+        </pre>
+      </Reveal>
+    `);
+
+    assert.notOk(find('details').open);
+    await click('summary');
+    assert.ok(find('details').open);
+    await click('summary');
+    assert.notOk(find('details').open);
+  });
+});

ui/desktop/tests/integration/helpers/raw-json-test.js

@@ -0,0 +1,19 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Helper | raw-json', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    this.set('inputValue', {});
+    await render(hbs`{{raw-json inputValue}}`);
+    assert.equal(this.element.textContent.trim(), '{}');
+    this.set('inputValue', { key: 'value', nestedKey: { key: 'value' } });
+    assert.equal(
+      this.element.textContent.trim(),
+      `{\n  "key": "value",\n  "nestedKey": {\n    "key": "value"\n  }\n}`
+    );
+  });
+});

yarn.lock

@@ -1834,15 +1834,15 @@
   resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46"
   integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==
 
-"@eslint/eslintrc@^0.4.1":
-  version "0.4.1"
-  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-0.4.1.tgz#442763b88cecbe3ee0ec7ca6d6dd6168550cbf14"
-  integrity sha512-5v7TDE9plVhvxQeWLXDTvFvJBdH6pEsdnl2g/dAptmuFEPedQ4Erq5rsDsX+mvAM610IhNaO2W5V1dOOnDKxkQ==
+"@eslint/eslintrc@^0.4.2":
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-0.4.2.tgz#f63d0ef06f5c0c57d76c4ab5f63d3835c51b0179"
+  integrity sha512-8nmGq/4ycLpIwzvhI4tNDmQztZ8sp+hI7cyG8i1nQDhkAbRzHpXPidRAHlNvCZQpJTKw5ItIpMw9RSToGF00mg==
   dependencies:
     ajv "^6.12.4"
     debug "^4.1.1"
     espree "^7.3.0"
-    globals "^12.1.0"
+    globals "^13.9.0"
     ignore "^4.0.6"
     import-fresh "^3.2.1"
     js-yaml "^3.13.1"
@@ -1856,10 +1856,10 @@
   dependencies:
     tslib "^2.1.0"
 
-"@formatjs/ecma402-abstract@1.9.2":
-  version "1.9.2"
-  resolved "https://registry.yarnpkg.com/@formatjs/ecma402-abstract/-/ecma402-abstract-1.9.2.tgz#90618ec54701e6a8ee38688df8fc2436b9953d23"
-  integrity sha512-sZ4GHcitIBz837RSatMDr/6GkYT8hUDffvW+bo2N5lRrBmLk37i0IGSmsxZ6QcxLu2GuymN/4gATEyL/50z3Bg==
+"@formatjs/ecma402-abstract@1.9.3":
+  version "1.9.3"
+  resolved "https://registry.yarnpkg.com/@formatjs/ecma402-abstract/-/ecma402-abstract-1.9.3.tgz#00892014c805935b5b1345d238246e9bf3a2de50"
+  integrity sha512-DBrRUL65m4SVtfq+T4Qltd8+upAzfb9K1MX0UZ0hqQ0wpBY0PSIti9XJe0ZQ/j2v/KxpwQ0Jw5NLumKVezJFQg==
   dependencies:
     tslib "^2.1.0"
 
@@ -1868,21 +1868,21 @@
   resolved "https://registry.yarnpkg.com/@formatjs/fast-memoize/-/fast-memoize-1.1.1.tgz#3006b58aca1e39a98aca213356b42da5d173f26b"
   integrity sha512-mIqBr5uigIlx13eZTOPSEh2buDiy3BCdMYUtewICREQjbb4xarDiVWoXSnrERM7NanZ+0TAHNXSqDe6HpEFQUg==
 
-"@formatjs/icu-messageformat-parser@2.0.5":
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.0.5.tgz#bf72328862de61bf237e5b2eb340a1cefc02fbdb"
-  integrity sha512-SYJBga4onwv7D1/33PVk+inSrs5AWzbW968odRYPtlEIiyUJDQu+hBoQCdKMI7BpryftNUK9hlQIiRxKmrFiTw==
+"@formatjs/icu-messageformat-parser@2.0.6":
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.0.6.tgz#7471c2116982f07b3d9b80e4572a870f20adbaf6"
+  integrity sha512-dgOZ2kq3sbjjC4P0IIghXFUiGY+x9yyypBJF9YFACjw8gPq/OSPmOzdMGvjY9hl4EeeIhhsDd4LIAN/3zHG99A==
   dependencies:
-    "@formatjs/ecma402-abstract" "1.9.2"
-    "@formatjs/icu-skeleton-parser" "1.2.6"
+    "@formatjs/ecma402-abstract" "1.9.3"
+    "@formatjs/icu-skeleton-parser" "1.2.7"
     tslib "^2.1.0"
 
-"@formatjs/icu-skeleton-parser@1.2.6":
-  version "1.2.6"
-  resolved "https://registry.yarnpkg.com/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.2.6.tgz#19cc85c1f91bc43f2cc5ded479ca57e8241d3737"
-  integrity sha512-j7pnLpWYCW370crnefZBd7z/2j/CRffjBaQ1wR+EpE6+HkeeAGwgaW7XHe3uInZ5Glb2/vnamPALmwFGTVwKvw==
+"@formatjs/icu-skeleton-parser@1.2.7":
+  version "1.2.7"
+  resolved "https://registry.yarnpkg.com/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.2.7.tgz#a74954695c37470efdeff828799654088e567c34"
+  integrity sha512-xm1rJMOz4fwVfWH98VKtbTpZvyQ45plHilkCF16Nm6bAgosYC/IcMmgJisGr6uHqb5TvJRXE07+EvnkIIQjsdA==
   dependencies:
-    "@formatjs/ecma402-abstract" "1.9.2"
+    "@formatjs/ecma402-abstract" "1.9.3"
     tslib "^2.1.0"
 
 "@glimmer/component@^1.0.3":
@@ -2283,24 +2283,24 @@
   resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-4.0.1.tgz#d26729db850fa327b7cacc5522252194404226f5"
   integrity sha512-Qm9hBEBu18wt1PO2flE7LPb30BHMQt1eQgbV76YntdNk73XZGpn3izvGTYxbGgzXKgbCjiia0uxTd3aTNQrY/g==
 
-"@sinonjs/commons@^1.6.0", "@sinonjs/commons@^1.7.0", "@sinonjs/commons@^1.8.1":
+"@sinonjs/commons@^1.6.0", "@sinonjs/commons@^1.7.0", "@sinonjs/commons@^1.8.3":
   version "1.8.3"
   resolved "https://registry.yarnpkg.com/@sinonjs/commons/-/commons-1.8.3.tgz#3802ddd21a50a949b6721ddd72da36e67e7f1b2d"
   integrity sha512-xkNcLAn/wZaX14RPlwizcKicDk9G3F8m2nU3L7Ukm5zBgTwiT0wsoFAHx9Jq56fJA1z/7uKGtCRu16sOUCLIHQ==
   dependencies:
     type-detect "4.0.8"
 
-"@sinonjs/fake-timers@^6.0.0", "@sinonjs/fake-timers@^6.0.1":
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/@sinonjs/fake-timers/-/fake-timers-6.0.1.tgz#293674fccb3262ac782c7aadfdeca86b10c75c40"
-  integrity sha512-MZPUxrmFubI36XS1DI3qmI0YdN1gks62JtFZvxR67ljjSNCeK6U08Zx4msEWOXuofgqUt6zPHSi1H9fbjR/NRA==
+"@sinonjs/fake-timers@^7.0.4", "@sinonjs/fake-timers@^7.1.0":
+  version "7.1.2"
+  resolved "https://registry.yarnpkg.com/@sinonjs/fake-timers/-/fake-timers-7.1.2.tgz#2524eae70c4910edccf99b2f4e6efc5894aff7b5"
+  integrity sha512-iQADsW4LBMISqZ6Ci1dupJL9pprqwcVFTcOsEmQOEhW+KLCVn/Y4Jrvg2k19fIHCp+iFprriYPTdRcQR8NbUPg==
   dependencies:
     "@sinonjs/commons" "^1.7.0"
 
-"@sinonjs/samsam@^5.3.1":
-  version "5.3.1"
-  resolved "https://registry.yarnpkg.com/@sinonjs/samsam/-/samsam-5.3.1.tgz#375a45fe6ed4e92fca2fb920e007c48232a6507f"
-  integrity sha512-1Hc0b1TtyfBu8ixF/tpfSHTVWKwCBLY4QJbkgnE7HcwyvT2xArDxb4K7dMgqRm3szI+LJbzmW/s4xxEhv6hwDg==
+"@sinonjs/samsam@^6.0.2":
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/@sinonjs/samsam/-/samsam-6.0.2.tgz#a0117d823260f282c04bff5f8704bdc2ac6910bb"
+  integrity sha512-jxPRPp9n93ci7b8hMfJOFDPRLFYadN6FSpeROFTR4UNF4i5b+EK6m4QXPO46BDhFgRy1JuS87zAnFOzCUwMJcQ==
   dependencies:
     "@sinonjs/commons" "^1.6.0"
     lodash.get "^4.4.2"
@@ -3193,14 +3193,14 @@
     form-data "^3.0.0"
 
 "@types/node@*", "@types/node@>=10.0.0":
-  version "15.12.1"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-15.12.1.tgz#9b60797dee1895383a725f828a869c86c6caa5c2"
-  integrity sha512-zyxJM8I1c9q5sRMtVF+zdd13Jt6RU4r4qfhTd7lQubyThvLfx6yYekWSQjGCGV2Tkecgxnlpl/DNlb6Hg+dmEw==
+  version "15.12.2"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-15.12.2.tgz#1f2b42c4be7156ff4a6f914b2fb03d05fa84e38d"
+  integrity sha512-zjQ69G564OCIWIOHSXyQEEDpdpGl+G348RAKY0XXy9Z5kU9Vzv1GMNnkar/ZJ8dzXB3COzD9Mo9NtRZ4xfgUww==
 
 "@types/node@^14.0.10":
-  version "14.17.2"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-14.17.2.tgz#1e94476db57ec93a372c7f7d29aa5707cfb92339"
-  integrity sha512-sld7b/xmFum66AAKuz/rp/CUO8+98fMpyQ3SBfzzBNGMd/1iHBTAg9oyAvcYlAj46bpc74r91jSw2iFdnx29nw==
+  version "14.17.3"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-14.17.3.tgz#6d327abaa4be34a74e421ed6409a0ae2f47f4c3d"
+  integrity sha512-e6ZowgGJmTuXa3GyaPbTGxX17tnThl2aSSizrFthQ7m9uLGZBXiGhgE55cjRZTF5kjZvYn9EOPOMljdjwbflxw==
 
 "@types/node@^9.6.0":
   version "9.6.61"
@@ -3380,30 +3380,30 @@
   dependencies:
     "@types/node" "*"
 
-"@typescript-eslint/types@4.26.0":
-  version "4.26.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-4.26.0.tgz#7c6732c0414f0a69595f4f846ebe12616243d546"
-  integrity sha512-rADNgXl1kS/EKnDr3G+m7fB9yeJNnR9kF7xMiXL6mSIWpr3Wg5MhxyfEXy/IlYthsqwBqHOr22boFbf/u6O88A==
+"@typescript-eslint/types@4.26.1":
+  version "4.26.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-4.26.1.tgz#9e7c523f73c34b04a765e4167ca5650436ef1d38"
+  integrity sha512-STyMPxR3cS+LaNvS8yK15rb8Y0iL0tFXq0uyl6gY45glyI7w0CsyqyEXl/Fa0JlQy+pVANeK3sbwPneCbWE7yg==
 
 "@typescript-eslint/typescript-estree@^4.24.0":
-  version "4.26.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-4.26.0.tgz#aea17a40e62dc31c63d5b1bbe9a75783f2ce7109"
-  integrity sha512-GHUgahPcm9GfBuy3TzdsizCcPjKOAauG9xkz9TR8kOdssz2Iz9jRCSQm6+aVFa23d5NcSpo1GdHGSQKe0tlcbg==
+  version "4.26.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-4.26.1.tgz#b2ce2e789233d62283fae2c16baabd4f1dbc9633"
+  integrity sha512-l3ZXob+h0NQzz80lBGaykdScYaiEbFqznEs99uwzm8fPHhDjwaBFfQkjUC/slw6Sm7npFL8qrGEAMxcfBsBJUg==
   dependencies:
-    "@typescript-eslint/types" "4.26.0"
-    "@typescript-eslint/visitor-keys" "4.26.0"
+    "@typescript-eslint/types" "4.26.1"
+    "@typescript-eslint/visitor-keys" "4.26.1"
     debug "^4.3.1"
     globby "^11.0.3"
     is-glob "^4.0.1"
     semver "^7.3.5"
     tsutils "^3.21.0"
 
-"@typescript-eslint/visitor-keys@4.26.0":
-  version "4.26.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-4.26.0.tgz#26d2583169222815be4dcd1da4fe5459bc3bcc23"
-  integrity sha512-cw4j8lH38V1ycGBbF+aFiLUls9Z0Bw8QschP3mkth50BbWzgFS33ISIgBzUMuQ2IdahoEv/rXstr8Zhlz4B1Zg==
+"@typescript-eslint/visitor-keys@4.26.1":
+  version "4.26.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-4.26.1.tgz#0d55ea735cb0d8903b198017d6d4f518fdaac546"
+  integrity sha512-IGouNSSd+6x/fHtYRyLOM6/C+QxMDzWlDtN41ea+flWuSF9g02iqcIlX8wM53JkfljoIjP0U+yp7SiTS1onEkw==
   dependencies:
-    "@typescript-eslint/types" "4.26.0"
+    "@typescript-eslint/types" "4.26.1"
     eslint-visitor-keys "^2.0.0"
 
 "@ungap/promise-all-settled@1.1.2":
@@ -3671,7 +3671,7 @@ agent-base@4, agent-base@^4.3.0:
   dependencies:
     es6-promisify "^5.0.0"
 
-agent-base@6:
+agent-base@6, agent-base@^6.0.2:
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-6.0.2.tgz#49fff58577cfee3f37176feab4c22e00f86d7f77"
   integrity sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==
@@ -3766,9 +3766,9 @@ ajv@^6.1.0, ajv@^6.10.0, ajv@^6.10.2, ajv@^6.12.2, ajv@^6.12.4, ajv@^6.12.5:
     uri-js "^4.2.2"
 
 ajv@^8.0.1:
-  version "8.5.0"
-  resolved "https://registry.yarnpkg.com/ajv/-/ajv-8.5.0.tgz#695528274bcb5afc865446aa275484049a18ae4b"
-  integrity sha512-Y2l399Tt1AguU3BPRP9Fn4eN+Or+StUGWCUpbnFyXSo8NZ9S4uj+AG2pjs5apK+ZMOwYOz1+a+VKvKH7CudXgQ==
+  version "8.6.0"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-8.6.0.tgz#60cc45d9c46a477d80d92c48076d972c342e5720"
+  integrity sha512-cnUG4NSBiM4YFBxgZIj/In3/6KX+rQ2l2YPRVcvAMQGWEPKuXoPIhxzwqh31jA3IPbI4qEOp/5ILI4ynioXsGQ==
   dependencies:
     fast-deep-equal "^3.1.1"
     json-schema-traverse "^1.0.0"
@@ -6360,9 +6360,9 @@ caniuse-api@^3.0.0:
     lodash.uniq "^4.5.0"
 
 caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001157, caniuse-lite@^1.0.30001219:
-  version "1.0.30001234"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001234.tgz#8fc2e709e3b0679d7af7f073a1c661155c39b975"
-  integrity sha512-a3gjUVKkmwLdNysa1xkUAwN2VfJUJyVW47rsi3aCbkRCtbHAfo+rOsCqVw29G6coQ8gzAPb5XBXwiGHwme3isA==
+  version "1.0.30001239"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001239.tgz#66e8669985bb2cb84ccb10f68c25ce6dd3e4d2b8"
+  integrity sha512-cyBkXJDMeI4wthy8xJ2FvDU6+0dtcZSJW3voUF8+e9f1bBeuvyZfc3PNbkOETyhbR+dGCPzn9E7MA3iwzusOhQ==
 
 capture-exit@^2.0.0:
   version "2.0.0"
@@ -6463,15 +6463,15 @@ charm@^1.0.0:
     inherits "^2.0.1"
 
 cheerio-select@^1.4.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/cheerio-select/-/cheerio-select-1.4.0.tgz#3a16f21e37a2ef0f211d6d1aa4eff054bb22cdc9"
-  integrity sha512-sobR3Yqz27L553Qa7cK6rtJlMDbiKPdNywtR95Sj/YgfpLfy0u6CGJuaBKe5YE/vTc23SCRKxWSdlon/w6I/Ew==
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/cheerio-select/-/cheerio-select-1.5.0.tgz#faf3daeb31b17c5e1a9dabcee288aaf8aafa5823"
+  integrity sha512-qocaHPv5ypefh6YNxvnbABM07KMxExbtbfuJoIie3iZXX1ERwYmJcIiRrr9H05ucQP1k28dav8rpdDgjQd8drg==
   dependencies:
-    css-select "^4.1.2"
-    css-what "^5.0.0"
+    css-select "^4.1.3"
+    css-what "^5.0.1"
     domelementtype "^2.2.0"
     domhandler "^4.2.0"
-    domutils "^2.6.0"
+    domutils "^2.7.0"
 
 cheerio@^1.0.0-rc.2, cheerio@^1.0.0-rc.9:
   version "1.0.0-rc.9"
@@ -6604,15 +6604,7 @@ clean-css-promise@^0.1.0:
     clean-css "^3.4.5"
     pinkie-promise "^2.0.0"
 
-clean-css@^3.4.5:
-  version "3.4.28"
-  resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-3.4.28.tgz#bf1945e82fc808f55695e6ddeaec01400efd03ff"
-  integrity sha1-vxlF6C/ICPVWlebd6uwBQA79A/8=
-  dependencies:
-    commander "2.8.x"
-    source-map "0.4.x"
-
-clean-css@^4.2.3:
+clean-css@^3.4.5, clean-css@^4.1.11, clean-css@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.2.3.tgz#507b5de7d97b48ee53d84adb0160ff6216380f78"
   integrity sha512-VcMWDN54ZN/DS+g58HYL5/n4Zrqe8vHJpGA8KdgUXFU4fuP/aHNw8eld9SyEIyabIMJX/0RaY/fplOo5hYLSFA==
@@ -6904,13 +6896,6 @@ comma-separated-tokens@^1.0.0:
   resolved "https://registry.yarnpkg.com/comma-separated-tokens/-/comma-separated-tokens-1.0.8.tgz#632b80b6117867a158f1080ad498b2fbe7e3f5ea"
   integrity sha512-GHuDRO12Sypu2cV70d1dkA2EUmXHgntrzbpvOB+Qy+49ypNfGgFQIC2fhhXbnyrJRynDCAARsT7Ou0M6hirpfw==
 
-commander@2.8.x:
-  version "2.8.1"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-2.8.1.tgz#06be367febfda0c330aa1e2a072d3dc9762425d4"
-  integrity sha1-Br42f+v9oMMwqh4qBy09yXYkJdQ=
-  dependencies:
-    graceful-readlink ">= 1.0.0"
-
 commander@7.1.0:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-7.1.0.tgz#f2eaecf131f10e36e07d894698226e36ae0eb5ff"
@@ -7165,17 +7150,17 @@ copy-to-clipboard@^3.3.1:
     toggle-selection "^1.0.6"
 
 core-js-compat@^3.8.1, core-js-compat@^3.9.0, core-js-compat@^3.9.1:
-  version "3.13.1"
-  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.13.1.tgz#05444caa8f153be0c67db03cf8adb8ec0964e58e"
-  integrity sha512-mdrcxc0WznfRd8ZicEZh1qVeJ2mu6bwQFh8YVUK48friy/FOwFV5EJj9/dlh+nMQ74YusdVfBFDuomKgUspxWQ==
+  version "3.14.0"
+  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.14.0.tgz#b574dabf29184681d5b16357bd33d104df3d29a5"
+  integrity sha512-R4NS2eupxtiJU+VwgkF9WTpnSfZW4pogwKHd8bclWU2sp93Pr5S1uYJI84cMOubJRou7bcfL0vmwtLslWN5p3A==
   dependencies:
     browserslist "^4.16.6"
     semver "7.0.0"
 
 core-js-pure@^3.8.2:
-  version "3.13.1"
-  resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.13.1.tgz#5d139d346780f015f67225f45ee2362a6bed6ba1"
-  integrity sha512-wVlh0IAi2t1iOEh16y4u1TRk6ubd4KvLE8dlMi+3QUI6SfKphQUh7tAwihGGSQ8affxEXpVIPpOdf9kjR4v4Pw==
+  version "3.14.0"
+  resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.14.0.tgz#72bcfacba74a65ffce04bf94ae91d966e80ee553"
+  integrity sha512-YVh+LN2FgNU0odThzm61BsdkwrbrchumFq3oztnE9vTKC4KS2fvnPmcx8t6jnqAyOTCTF4ZSiuK8Qhh7SNcL4g==
 
 core-js@^2.4.0, core-js@^2.5.0, core-js@^2.6.5:
   version "2.6.12"
@@ -7183,9 +7168,9 @@ core-js@^2.4.0, core-js@^2.5.0, core-js@^2.6.5:
   integrity sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==
 
 core-js@^3.0.4, core-js@^3.6.5, core-js@^3.8.2:
-  version "3.13.1"
-  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.13.1.tgz#30303fabd53638892062d8b4e802cac7599e9fb7"
-  integrity sha512-JqveUc4igkqwStL2RTRn/EPFGBOfEZHxJl/8ej1mXJR75V3go2mFF4bmUYkEIT1rveHKnkUlcJX/c+f1TyIovQ==
+  version "3.14.0"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.14.0.tgz#62322b98c71cc2018b027971a69419e2425c2a6c"
+  integrity sha512-3s+ed8er9ahK+zJpp9ZtuVcDoFzHNiZsPbNAAE4KXgrRHbjSqqNN6xGSXq6bq7TZIbKj4NLrLb6bJ5i+vSVjHA==
 
 core-object@^3.1.5:
   version "3.1.5"
@@ -7419,10 +7404,10 @@ css-select@^2.0.0, css-select@^2.0.2:
     domutils "^1.7.0"
     nth-check "^1.0.2"
 
-css-select@^4.1.2:
-  version "4.1.2"
-  resolved "https://registry.yarnpkg.com/css-select/-/css-select-4.1.2.tgz#8b52b6714ed3a80d8221ec971c543f3b12653286"
-  integrity sha512-nu5ye2Hg/4ISq4XqdLY2bEatAcLIdt3OYGFc9Tm9n7VSlFBcfRv0gBNksHRgSdUDQGtN3XrZ94ztW+NfzkFSUw==
+css-select@^4.1.3:
+  version "4.1.3"
+  resolved "https://registry.yarnpkg.com/css-select/-/css-select-4.1.3.tgz#a70440f70317f2669118ad74ff105e65849c7067"
+  integrity sha512-gT3wBNd9Nj49rAbmtFHj1cljIAOLYSX1nZ8CB7TBO3INYckygm5B7LISU/szY//YmdiSLbJvDLOx9VnMVpMBxA==
   dependencies:
     boolbase "^1.0.0"
     css-what "^5.0.0"
@@ -7851,7 +7836,7 @@ dezalgo@^1.0.0, dezalgo@~1.0.3:
     asap "^2.0.0"
     wrappy "1"
 
-diff@5.0.0:
+diff@5.0.0, diff@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/diff/-/diff-5.0.0.tgz#7ed6ad76d859d030787ec35855f5b1daf31d852b"
   integrity sha512-/VTCrvm5Z0JGty/BWHljh+BAiw3IK+2j87NGMu8Nwc/f48WoDAC395uomO9ZD117ZOBaHmkX1oyLvkVM/aIT3w==
@@ -7999,7 +7984,7 @@ domutils@^1.5.1, domutils@^1.7.0:
     dom-serializer "0"
     domelementtype "1"
 
-domutils@^2.0.0:
+domutils@^2.0.0, domutils@^2.5.2, domutils@^2.6.0, domutils@^2.7.0:
   version "2.7.0"
   resolved "https://registry.yarnpkg.com/domutils/-/domutils-2.7.0.tgz#8ebaf0c41ebafcf55b0b72ec31c56323712c5442"
   integrity sha512-8eaHa17IwJUPAiB+SoTYBo5mCdeMgdcAoXJ59m6DT1vw+5iLS3gNoqYaRowaBKtGVrOF1Jz4yDTgYKLK2kvfJg==
@@ -8008,15 +7993,6 @@ domutils@^2.0.0:
     domelementtype "^2.2.0"
     domhandler "^4.2.0"
 
-domutils@^2.5.2, domutils@^2.6.0:
-  version "2.6.0"
-  resolved "https://registry.yarnpkg.com/domutils/-/domutils-2.6.0.tgz#2e15c04185d43fb16ae7057cb76433c6edb938b7"
-  integrity sha512-y0BezHuy4MDYxh6OvolXYsH+1EMGmFbwv5FKW7ovwMG6zTPWqNPq3WF9ayZssFq+UlKdffGLbOEaghNdaOm1WA==
-  dependencies:
-    dom-serializer "^1.0.1"
-    domelementtype "^2.2.0"
-    domhandler "^4.2.0"
-
 dot-case@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/dot-case/-/dot-case-3.0.4.tgz#9b2b670d00a431667a8a75ba29cd1b98809ce751"
@@ -8201,9 +8177,9 @@ electron-rebuild@^2.0.3:
     yargs "^16.0.0"
 
 electron-to-chromium@^1.3.723:
-  version "1.3.748"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.748.tgz#16638a8130f407ae5bf2fc168f2173574deb36c5"
-  integrity sha512-fmIKfYALVeEybk/L2ucdgt7jN3JsbGtg3K9pmF/MRWgkeADBI1VSAa5IzdG2gZwTxsnsrFtdMpOTSM5mrBRKVQ==
+  version "1.3.749"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.749.tgz#0ecebc529ceb49dd2a7c838ae425236644c3439a"
+  integrity sha512-F+v2zxZgw/fMwPz/VUGIggG4ZndDsYy0vlpthi3tjmDZlcfbhN5mYW0evXUsBr2sUtuDANFtle410A9u/sd/4A==
 
 element-resize-detector@^1.2.2:
   version "1.2.2"
@@ -9868,12 +9844,12 @@ eslint@^2.7.0:
     user-home "^2.0.0"
 
 eslint@^7.17.0, eslint@^7.27.0:
-  version "7.27.0"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-7.27.0.tgz#665a1506d8f95655c9274d84bd78f7166b07e9c7"
-  integrity sha512-JZuR6La2ZF0UD384lcbnd0Cgg6QJjiCwhMD6eU4h/VGPcVGwawNNzKU41tgokGXnfjOOyI6QIffthhJTPzzuRA==
+  version "7.28.0"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-7.28.0.tgz#435aa17a0b82c13bb2be9d51408b617e49c1e820"
+  integrity sha512-UMfH0VSjP0G4p3EWirscJEQ/cHqnT/iuH6oNZOB94nBjWbMnhGEPxsZm1eyIW0C/9jLI0Fow4W5DXLjEI7mn1g==
   dependencies:
     "@babel/code-frame" "7.12.11"
-    "@eslint/eslintrc" "^0.4.1"
+    "@eslint/eslintrc" "^0.4.2"
     ajv "^6.10.0"
     chalk "^4.0.0"
     cross-spawn "^7.0.2"
@@ -9890,7 +9866,7 @@ eslint@^7.17.0, eslint@^7.27.0:
     fast-deep-equal "^3.1.3"
     file-entry-cache "^6.0.1"
     functional-red-black-tree "^1.0.1"
-    glob-parent "^5.0.0"
+    glob-parent "^5.1.2"
     globals "^13.6.0"
     ignore "^4.0.6"
     import-fresh "^3.0.0"
@@ -11329,7 +11305,7 @@ glob-parent@^3.1.0:
     is-glob "^3.1.0"
     path-dirname "^1.0.0"
 
-glob-parent@^5.0.0, glob-parent@^5.1.0, glob-parent@~5.1.0:
+glob-parent@^5.1.0, glob-parent@^5.1.2, glob-parent@~5.1.0:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"
   integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
@@ -11481,14 +11457,7 @@ globals@^11.1.0:
   resolved "https://registry.yarnpkg.com/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e"
   integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==
 
-globals@^12.1.0:
-  version "12.4.0"
-  resolved "https://registry.yarnpkg.com/globals/-/globals-12.4.0.tgz#a18813576a41b00a24a97e7f815918c2e19925f8"
-  integrity sha512-BWICuzzDvDoH54NHKCseDanAhE3CeDorgDL5MT6LMXXj2WCnd9UC2szdk4AWLfjdgNBCXLUanXYcpBBKOSWGwg==
-  dependencies:
-    type-fest "^0.8.1"
-
-globals@^13.6.0:
+globals@^13.6.0, globals@^13.9.0:
   version "13.9.0"
   resolved "https://registry.yarnpkg.com/globals/-/globals-13.9.0.tgz#4bf2bf635b334a173fb1daf7c5e6b218ecdc06cb"
   integrity sha512-74/FduwI/JaIrr1H8e71UbDE+5x7pIPs1C2rrwC52SszOo043CsWOZEMW7o2Y58xwm9b+0RBKDxY5n2sUpEFxA==
@@ -11683,11 +11652,6 @@ graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.3
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.6.tgz#ff040b2b0853b23c3d31027523706f1885d76bee"
   integrity sha512-nTnJ528pbqxYanhpDYsi4Rd8MAeaBA67+RZ10CM1m3bTAVFEDcd5AuA4a6W5YkGZ1iNXHzZz8T6TBKLeBuNriQ==
 
-"graceful-readlink@>= 1.0.0":
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/graceful-readlink/-/graceful-readlink-1.0.1.tgz#4cafad76bc62f02fa039b2f94e9a3dd3a391a725"
-  integrity sha1-TK+tdrxi8C+gObL5Tpo906ORpyU=
-
 growl@1.10.5:
   version "1.10.5"
   resolved "https://registry.yarnpkg.com/growl/-/growl-1.10.5.tgz#f2735dc2283674fa67478b10181059355c369e5e"
@@ -12030,7 +11994,7 @@ homedir-polyfill@^1.0.1:
   dependencies:
     parse-passwd "^1.0.0"
 
-hosted-git-info@3.0.8, hosted-git-info@^2.1.4, hosted-git-info@^2.7.1, hosted-git-info@^2.8.9, hosted-git-info@^3.0.2, hosted-git-info@^4.0.1:
+hosted-git-info@^2.1.4, hosted-git-info@^2.7.1, hosted-git-info@^2.8.9, hosted-git-info@^3.0.2, hosted-git-info@^3.0.8, hosted-git-info@^4.0.1:
   version "3.0.8"
   resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-3.0.8.tgz#6e35d4cc87af2c5f816e4cb9ce350ba87a3f370d"
   integrity sha512-aXpmwoOhRBrw6X3j0h5RloK4x1OzsxMPyxqIHyNfSe2pypkVTZFpEiRoSipPEPlMrh0HW/XsjkJ5WgnCirpNUw==
@@ -12531,12 +12495,12 @@ intl-messageformat-parser@^6.0.5:
     tslib "^2.1.0"
 
 intl-messageformat@^9.3.6:
-  version "9.6.17"
-  resolved "https://registry.yarnpkg.com/intl-messageformat/-/intl-messageformat-9.6.17.tgz#9ac33466102f445f9269c7fdb30a89f7f490e1ae"
-  integrity sha512-1mSNTINYSrh4rm0YBHe9GO2JmjTXzyXv8Q/y2G/JxA9wRYvl/6LPDeE9IOGd0pXo6BNgA1DwSbXXurGriIl7RA==
+  version "9.6.18"
+  resolved "https://registry.yarnpkg.com/intl-messageformat/-/intl-messageformat-9.6.18.tgz#785cc0c44a1a288fbbda63308907c3eab4eebe9f"
+  integrity sha512-phG2EtMS/J6C4pcbErPkTSoqJ+T6qNfPVWTv5cDnI/nuCDKRUHPLDp4QpMdxIWPSUYPj7Lq69vMEIqg91x+H1Q==
   dependencies:
     "@formatjs/fast-memoize" "1.1.1"
-    "@formatjs/icu-messageformat-parser" "2.0.5"
+    "@formatjs/icu-messageformat-parser" "2.0.6"
     tslib "^2.1.0"
 
 into-stream@^3.1.0:
@@ -13297,11 +13261,6 @@ jquery@^3.4.1, jquery@^3.5.0:
   resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.6.0.tgz#c72a09f15c1bdce142f49dbf1170bdf8adac2470"
   integrity sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw==
 
-js-reporters@2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/js-reporters/-/js-reporters-2.0.0.tgz#62ad6a512f1740d3ab4686b0059dd9f57cc0708b"
-  integrity sha512-VJd/86niT7GzsaVc+Yxrs8QPrYl1orzv8bYZPuSOtxU6rk/pv8aOXTcIa7HaANvtvdLMTsZspAiucNQ6T2QFHw==
-
 js-string-escape@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/js-string-escape/-/js-string-escape-1.0.1.tgz#e2625badbc0d67c7533e9edc1068c587ae4137ef"
@@ -15378,13 +15337,13 @@ nice-try@^1.0.4:
   resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366"
   integrity sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==
 
-nise@^4.0.4:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/nise/-/nise-4.1.0.tgz#8fb75a26e90b99202fa1e63f448f58efbcdedaf6"
-  integrity sha512-eQMEmGN/8arp0xsvGoQ+B1qvSkR73B1nWSCh7nOt5neMCtwcQVYQGdzQMhcNscktTsWB54xnlSQFzOAPJD8nXA==
+nise@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/nise/-/nise-5.1.0.tgz#713ef3ed138252daef20ec035ab62b7a28be645c"
+  integrity sha512-W5WlHu+wvo3PaKLsJJkgPup2LrsXCcm7AWwyNZkUnn5rwPkuPBi3Iwk5SQtN0mv+K65k7nKKjwNQ30wg3wLAQQ==
   dependencies:
     "@sinonjs/commons" "^1.7.0"
-    "@sinonjs/fake-timers" "^6.0.0"
+    "@sinonjs/fake-timers" "^7.0.4"
     "@sinonjs/text-encoding" "^0.7.1"
     just-extend "^4.0.2"
     path-to-regexp "^1.7.0"
@@ -15536,9 +15495,9 @@ node-pre-gyp@^0.11.0:
     tar "^4"
 
 node-releases@^1.1.71:
-  version "1.1.72"
-  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.72.tgz#14802ab6b1039a79a0c7d662b610a5bbd76eacbe"
-  integrity sha512-LLUo+PpH3dU6XizX3iVoubUNheF/owjXCZZ5yACDxNnPtgFuludV1ZL3ayK1kVep42Rmm0+R9/Y60NQbZ2bifw==
+  version "1.1.73"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.73.tgz#dd4e81ddd5277ff846b80b52bb40c49edf7a7b20"
+  integrity sha512-uW7fodD6pyW2FZNZnp/Z3hvWKeEW1Y8R1+1CnErE8cXFXzl5blBOoVB41CvMer6P6Q0S5FXDwcHgFd1Wj0U9zg==
 
 node-uuid@~1.4.7:
   version "1.4.8"
@@ -15712,7 +15671,16 @@ npm-package-arg@^7.0.0:
     semver "^5.6.0"
     validate-npm-package-name "^3.0.0"
 
-npm-package-arg@^8.0.0, npm-package-arg@^8.1.0:
+npm-package-arg@^8.0.0:
+  version "8.1.5"
+  resolved "https://registry.yarnpkg.com/npm-package-arg/-/npm-package-arg-8.1.5.tgz#3369b2d5fe8fdc674baa7f1786514ddc15466e44"
+  integrity sha512-LhgZrg0n0VgvzVdSm1oiZworPbTxYHUJCgtsJW8mGvlDpxTM1vSJc3m5QZeUkhAHIzbz3VCHd/R4osi1L1Tg/Q==
+  dependencies:
+    hosted-git-info "^4.0.1"
+    semver "^7.3.4"
+    validate-npm-package-name "^3.0.0"
+
+npm-package-arg@^8.1.0:
   version "8.1.4"
   resolved "https://registry.yarnpkg.com/npm-package-arg/-/npm-package-arg-8.1.4.tgz#8001cdbc4363997b8ef6c6cf7aaf543c5805879d"
   integrity sha512-xLokoCFqj/rPdr3LvcdDL6Kj6ipXGEDHD/QGpzwU6/pibYUOXmp5DBmg76yukFyx4ZDbrXNOTn+BPyd8TD4Jlw==
@@ -16186,9 +16154,9 @@ ora@^3.4.0:
     wcwidth "^1.0.1"
 
 ora@^5.0.0, ora@^5.1.0, ora@^5.4.0:
-  version "5.4.0"
-  resolved "https://registry.yarnpkg.com/ora/-/ora-5.4.0.tgz#42eda4855835b9cd14d33864c97a3c95a3f56bf4"
-  integrity sha512-1StwyXQGoU6gdjYkyVcqOLnVlbKj+6yPNNOxJVgpt9t4eksKjiriiHuxktLYkgllwk+D6MbC4ihH84L1udRXPg==
+  version "5.4.1"
+  resolved "https://registry.yarnpkg.com/ora/-/ora-5.4.1.tgz#1b2678426af4ac4a509008e5e4ac9e9959db9e18"
+  integrity sha512-5b6Y85tPxZZ7QytO+BQzysW31HJku27cRIlkbAXaNx+BdcVi+LlRFmVXzeF6a7JCwJpyw5c4b+YSVImQIrBpuQ==
   dependencies:
     bl "^4.1.0"
     chalk "^4.1.0"
@@ -17013,9 +16981,9 @@ postcss-value-parser@^4.1.0:
   integrity sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==
 
 postcss@^7.0.14, postcss@^7.0.17, postcss@^7.0.2, postcss@^7.0.21, postcss@^7.0.26, postcss@^7.0.31, postcss@^7.0.32, postcss@^7.0.35, postcss@^7.0.5, postcss@^7.0.6:
-  version "7.0.35"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.35.tgz#d2be00b998f7f211d8a276974079f2e92b970e24"
-  integrity sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==
+  version "7.0.36"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.36.tgz#056f8cffa939662a8f5905950c07d5285644dfcb"
+  integrity sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==
   dependencies:
     chalk "^2.4.2"
     source-map "^0.6.1"
@@ -17057,9 +17025,9 @@ prettier-linter-helpers@^1.0.0:
     fast-diff "^1.1.2"
 
 prettier@^2.2.1, prettier@^2.3.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.3.0.tgz#b6a5bf1284026ae640f17f7ff5658a7567fc0d18"
-  integrity sha512-kXtO4s0Lz/DW/IJ9QdWhAf7/NmPWQXkFr/r/WkR3vyI+0v8amTDxiaQSLzs8NBlytfLWX/7uQUMIW677yLKl4w==
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.3.1.tgz#76903c3f8c4449bc9ac597acefa24dc5ad4cbea6"
+  integrity sha512-p+vNbgpLjif/+D+DwAZAbndtRrR0md0MwfmOVN9N+2RgyACMT+7tfaRnT+WDPkqnuVwleyuBIG2XBxKDme3hPA==
 
 prettier@~2.2.1:
   version "2.2.1"
@@ -17436,12 +17404,11 @@ qunit-dom@^1.6.0:
     ember-cli-version-checker "^5.1.1"
 
 qunit@^2.13.0:
-  version "2.15.0"
-  resolved "https://registry.yarnpkg.com/qunit/-/qunit-2.15.0.tgz#8ba3a3c5d13369ab1740337680600a98a7f8b591"
-  integrity sha512-9ZoOILeyRZzrdvy2m7M4S76bneGD75Bh4B2aot3uKRKZuoEvA9gevvzU339L805Ys0AN2C7cnAV9nIBD5t72IQ==
+  version "2.16.0"
+  resolved "https://registry.yarnpkg.com/qunit/-/qunit-2.16.0.tgz#b8ed63d512e5d4eaada5afc0c6c9e8b844181ba1"
+  integrity sha512-88x9t+rRMbB6IrCIUZvYU4pJy7NiBEv7SX8jD4LZAsIj+dV+kwGnFStOmPNvqa6HM96VZMD8CIIFKH2+3qvluA==
   dependencies:
     commander "7.1.0"
-    js-reporters "2.0.0"
     node-watch "0.7.1"
     tiny-glob "0.2.8"
 
@@ -19001,17 +18968,17 @@ single-line-log@^1.1.2:
   dependencies:
     string-width "^1.0.1"
 
-sinon@^9.2.1:
-  version "9.2.4"
-  resolved "https://registry.yarnpkg.com/sinon/-/sinon-9.2.4.tgz#e55af4d3b174a4443a8762fa8421c2976683752b"
-  integrity sha512-zljcULZQsJxVra28qIAL6ow1Z9tpattkCTEJR4RBP3TGc00FcttsP5pK284Nas5WjMZU5Yzy3kAIp3B3KRf5Yg==
+sinon@^11.1.1:
+  version "11.1.1"
+  resolved "https://registry.yarnpkg.com/sinon/-/sinon-11.1.1.tgz#99a295a8b6f0fadbbb7e004076f3ae54fc6eab91"
+  integrity sha512-ZSSmlkSyhUWbkF01Z9tEbxZLF/5tRC9eojCdFh33gtQaP7ITQVaMWQHGuFM7Cuf/KEfihuh1tTl3/ABju3AQMg==
   dependencies:
-    "@sinonjs/commons" "^1.8.1"
-    "@sinonjs/fake-timers" "^6.0.1"
-    "@sinonjs/samsam" "^5.3.1"
-    diff "^4.0.2"
-    nise "^4.0.4"
-    supports-color "^7.1.0"
+    "@sinonjs/commons" "^1.8.3"
+    "@sinonjs/fake-timers" "^7.1.0"
+    "@sinonjs/samsam" "^6.0.2"
+    diff "^5.0.0"
+    nise "^5.1.0"
+    supports-color "^7.2.0"
 
 sisteransi@^1.0.5:
   version "1.0.5"
@@ -19140,11 +19107,11 @@ socks-proxy-agent@^4.0.0:
     socks "~2.3.2"
 
 socks-proxy-agent@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/socks-proxy-agent/-/socks-proxy-agent-5.0.0.tgz#7c0f364e7b1cf4a7a437e71253bed72e9004be60"
-  integrity sha512-lEpa1zsWCChxiynk+lCycKuC502RxDWLKJZoIhnxrWNjLSDGYRFflHA1/228VkRcnv9TIb8w98derGbpKxJRgA==
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/socks-proxy-agent/-/socks-proxy-agent-5.0.1.tgz#032fb583048a29ebffec2e6a73fca0761f48177e"
+  integrity sha512-vZdmnjb9a2Tz6WEQVIurybSwElwPxMZaIc7PzqbJTrezcKNznv6giT7J7tZDZ1BojVaa1jvO/UiUdhDVB0ACoQ==
   dependencies:
-    agent-base "6"
+    agent-base "^6.0.2"
     debug "4"
     socks "^2.3.3"
 
@@ -19242,7 +19209,7 @@ source-map-url@^0.4.0:
   resolved "https://registry.yarnpkg.com/source-map-url/-/source-map-url-0.4.1.tgz#0af66605a745a5a2f91cf1bbf8a7afbc283dec56"
   integrity sha512-cPiFOTLUKvJFIg4SKVScy4ilPPW6rFgMgfuZJPNoDuMs3nC1HbMUycBoJw77xFIp6z1UJQJOfx6C9GMH80DiTw==
 
-source-map@0.4.x, source-map@^0.4.2:
+source-map@^0.4.2:
   version "0.4.4"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.4.4.tgz#eba4f5da9c0dc999de68032d8b4f76173652036b"
   integrity sha1-66T12pwNyZneaAMti092FzZSA2s=
@@ -19895,7 +19862,7 @@ supports-color@^6.1.0:
   dependencies:
     has-flag "^3.0.0"
 
-supports-color@^7.0.0, supports-color@^7.1.0:
+supports-color@^7.0.0, supports-color@^7.1.0, supports-color@^7.2.0:
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.2.0.tgz#1b7dcdcb32b8138801b3e478ba6a51caa89648da"
   integrity sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==
@@ -20640,9 +20607,9 @@ uc.micro@^1.0.0, uc.micro@^1.0.1, uc.micro@^1.0.5:
   integrity sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==
 
 uglify-js@^3.1.4:
-  version "3.13.8"
-  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.13.8.tgz#7c2f9f2553f611f3ff592bdc19c6fb208dc60afb"
-  integrity sha512-PvFLMFIQHfIjFFlvAch69U2IvIxK9TNzNWt1SxZGp9JZ/v70yvqIQuiJeVPPtUMOzoNt+aNRDk4wgxb34wvEqA==
+  version "3.13.9"
+  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.13.9.tgz#4d8d21dcd497f29cfd8e9378b9df123ad025999b"
+  integrity sha512-wZbyTQ1w6Y7fHdt8sJnHfSIuWeDgk6B5rCb4E/AM6QNNPbOMIZph21PW5dRB3h7Df0GszN+t7RuUH6sWK5bF0g==
 
 uid-number@0.0.6:
   version "0.0.6"
@@ -21314,9 +21281,9 @@ warning@^4.0.2, warning@^4.0.3:
     loose-envify "^1.0.0"
 
 watch-detector@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/watch-detector/-/watch-detector-1.0.0.tgz#c7b722d8695fee9ab6071e0f38f258e6adb22609"
-  integrity sha512-siywMl3fXK30Tlpu/dUBHhlpxhQmHdguZ8OIb813eU9lrVmmsJa9k0+n1HtJ+7p3SzFCPq2XbmR3GUYpPC3TBA==
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/watch-detector/-/watch-detector-1.0.1.tgz#3106a6b489284ec2ecaef0e65cf1b8ec9117296e"
+  integrity sha512-8sJ8rvNfg2ciqCa5IxIdmdxU/vuUe9V/jw+thXbdreELSv3+Cq6k8K42cLEL86W2td1PMmfNCWZuAhrZ/sD4mw==
   dependencies:
     heimdalljs-logger "^0.1.10"
     semver "^6.3.0"
@@ -21676,9 +21643,9 @@ write@^0.2.1:
     mkdirp "^0.5.1"
 
 ws@^7.4.5, ws@^7.4.6, ws@~7.4.2:
-  version "7.4.6"
-  resolved "https://registry.yarnpkg.com/ws/-/ws-7.4.6.tgz#5654ca8ecdeee47c33a9a4bf6d28e2be2980377c"
-  integrity sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A==
+  version "7.5.0"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-7.5.0.tgz#0033bafea031fb9df041b2026fc72a571ca44691"
+  integrity sha512-6ezXvzOZupqKj4jUqbQ9tXuJNo+BR2gU8fFRk3XCP3e0G6WT414u5ELe6Y0vtp7kmSJ3F7YWObSNr1ESsgi4vw==
 
 x-is-string@^0.1.0:
   version "0.1.0"
@@ -21786,9 +21753,9 @@ yaml@^1.10.0, yaml@^1.7.2:
   integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==
 
 yargs-parser@20.2.4, yargs-parser@^15.0.1, yargs-parser@^18.1.2, yargs-parser@^20.0.0, yargs-parser@^20.2.2, yargs-parser@^20.2.3, yargs-parser@^7.0.0, yargs-parser@^9.0.2, yargs-parser@~20.2.7:
-  version "20.2.7"
-  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-20.2.7.tgz#61df85c113edfb5a7a4e36eb8aa60ef423cbc90a"
-  integrity sha512-FiNkvbeHzB/syOjIUxFDCnhSfzAL8R5vs40MgLFBorXACCOAEaWu0gRZl14vG8MR9AOJIZbmkjhusqBYZ3HTHw==
+  version "20.2.9"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-20.2.9.tgz#2eb7dc3b0289718fc295f362753845c41a0c94ee"
+  integrity sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==
 
 yargs-unparser@2.0.0:
   version "2.0.0"