UI: HDS Adoption upgrade to design-system-components: 3.3.0 and ember…

…-flight-icons: 4.0.4 (#24366) * upgrade to 3.1.0 * VAULT-22471 upgrade to latest version * fix other selectors * fix pki tests * fix copy dropdown * rename selectors to be consistent
hashicorp · Dec 5, 2023 · 8f69e49 · 8f69e49
1 parent 588dd73
commit 8f69e49
Show file tree

Hide file tree

Showing 19 changed files with 1,538 additions and 227 deletions.
diff --git a/ui/app/components/sidebar/user-menu.hbs b/ui/app/components/sidebar/user-menu.hbs
@@ -54,6 +54,7 @@
                 @container="#container"
                 class="in-dropdown link is-flex-start"
                 {{on "click" (fn (set-flash-message "Token copied!"))}}
+                data-test-copy-button={{this.auth.currentToken}}
               />
             </li>
             {{#if (is-before (now interval=1000) this.auth.tokenExpirationDate)}}

diff --git a/ui/app/styles/helper-classes/layout.scss b/ui/app/styles/helper-classes/layout.scss
@@ -68,7 +68,7 @@
 }
 
 .is-medium-width {
-  width: $desktop / 3;
+  width: calc($desktop / 3);
 }
 
 .is-medium-height {

diff --git a/ui/lib/core/addon/components/certificate-card.hbs b/ui/lib/core/addon/components/certificate-card.hbs
@@ -20,13 +20,13 @@
       {{@data}}
     </code>
   </div>
-  <div class="is-flex-center has-background-white-bis has-side-padding-s has-top-bottom-margin-negative-m">
+  <div class="is-flex-center has-background-white-bis has-top-bottom-margin-negative-m">
     <Hds::Copy::Button
       @text="Copy"
       @isIconOnly={{true}}
       @textToCopy={{@data}}
-      class="transparent is-paddingless"
-      data-test-copy-button
+      class="transparent"
+      data-test-copy-button={{or @data true}}
     />
   </div>
 </Hds::Card::Container>
diff --git a/ui/lib/core/addon/components/code-snippet.hbs b/ui/lib/core/addon/components/code-snippet.hbs
@@ -15,5 +15,6 @@
     @textToCopy={{or @clipboardCode @codeBlock}}
     @isIconOnly={{@isIconOnly}}
     @container={{@container}}
+    data-test-copy-button={{or @clipboardCode @codeBlock}}
   />
 </div>
diff --git a/ui/lib/core/addon/components/copy-secret-dropdown.hbs b/ui/lib/core/addon/components/copy-secret-dropdown.hbs
@@ -19,7 +19,7 @@
             @isFullWidth={{true}}
             class="in-dropdown link is-flex-start"
             {{on "click" (action (set-flash-message "JSON Copied!"))}}
-            data-test-copy-button
+            data-test-copy-button={{@clipboardText}}
           />
         </li>
         <li class="action">

diff --git a/ui/lib/core/addon/components/info-table-row.hbs b/ui/lib/core/addon/components/info-table-row.hbs
@@ -41,7 +41,7 @@
           @isIconOnly={{true}}
           @textToCopy={{@value}}
           class="transparent has-padding-xxs"
-          data-test-copy-button
+          data-test-copy-button={{@value}}
         />
       {{/if}}
       {{#if (has-block)}}
@@ -95,7 +95,7 @@
                       @isIconOnly={{true}}
                       @textToCopy={{@tooltipText}}
                       class="transparent white-icon"
-                      data-test-tooltip-copy
+                      data-test-tooltip-copy={{@tooltipText}}
                     />
                   {{/if}}
                 </div>

diff --git a/ui/lib/core/addon/components/json-editor.hbs b/ui/lib/core/addon/components/json-editor.hbs
@@ -32,7 +32,7 @@
             @isIconOnly={{true}}
             @textToCopy={{@value}}
             class="transparent"
-            data-test-copy-button
+            data-test-copy-button={{@value}}
           />
         </ToolbarActions>
       </Toolbar>

diff --git a/ui/lib/core/addon/components/masked-input.hbs b/ui/lib/core/addon/components/masked-input.hbs
@@ -40,7 +40,7 @@
       @isIconOnly={{true}}
       @textToCopy={{@value}}
       class="transparent has-padding-xxs"
-      data-test-copy-button
+      data-test-copy-button={{or @value true}}
     />
   {{/if}}
   {{#if @allowDownload}}

diff --git a/ui/lib/kv/addon/components/page/secret/paths.hbs b/ui/lib/kv/addon/components/page/secret/paths.hbs
@@ -21,7 +21,13 @@
 <div class="box is-fullwidth is-sideless is-paddingless is-marginless">
   {{#each this.paths as |path|}}
     <InfoTableRow @label={{path.label}} @labelWidth="is-one-third" @helperText={{path.text}} @truncateValue={{true}}>
-      <Hds::Copy::Button @text="Copy" @isIconOnly={{true}} @textToCopy={{path.snippet}} class="transparent" />
+      <Hds::Copy::Button
+        @text="Copy"
+        @isIconOnly={{true}}
+        @textToCopy={{path.snippet}}
+        data-test-copy-button={{path.snippet}}
+        class="transparent"
+      />
       <code class="is-flex-1 text-overflow-ellipsis has-left-margin-s">
         {{path.snippet}}
       </code>

diff --git a/ui/package.json b/ui/package.json
@@ -247,8 +247,8 @@
     ]
   },
   "dependencies": {
-    "@hashicorp/design-system-components": "^2.13.0",
-    "@hashicorp/ember-flight-icons": "^3.1.3",
+    "@hashicorp/design-system-components": "^3.3.0",
+    "@hashicorp/ember-flight-icons": "^4.0.4",
     "handlebars": "4.7.7",
     "highlight.js": "^10.4.1",
     "node-notifier": "^8.0.1",

diff --git a/ui/tests/acceptance/pki/pki-cross-sign-test.js b/ui/tests/acceptance/pki/pki-cross-sign-test.js
@@ -47,13 +47,13 @@ module('Acceptance | pki/pki cross sign', function (hooks) {
     await fillIn(SELECTORS.inputByName('type'), 'internal');
     await fillIn(SELECTORS.inputByName('commonName'), 'Short-Lived Int R1');
     await click('[data-test-save]');
-    const csr = find(SELECTORS.copyButton('CSR')).getAttribute('data-clipboard-text');
+    const csr = find(SELECTORS.copyButton('CSR')).getAttribute('data-test-copy-button');
     await visit(`vault/secrets/${this.parentMountPath}/pki/issuers/${this.oldParentIssuerName}/sign`);
     await fillIn(SELECTORS.inputByName('csr'), csr);
     await fillIn(SELECTORS.inputByName('format'), 'pem_bundle');
     await click('[data-test-pki-sign-intermediate-save]');
     const pemBundle = find(SELECTORS.copyButton('CA Chain'))
-      .getAttribute('data-clipboard-text')
+      .getAttribute('data-test-copy-button')
       .replace(/,/, '\n');
     await visit(`vault/secrets/${this.intMountPath}/pki/configuration/create`);
     await click(SELECTORS.configure.optionByKey('import'));
@@ -64,7 +64,7 @@ module('Acceptance | pki/pki cross sign', function (hooks) {
     await click('[data-test-is-default]');
     // name default issuer of intermediate
     const oldIntIssuerId = find(SELECTORS.rowValue('Issuer ID')).innerText;
-    const oldIntCert = find(SELECTORS.copyButton('Certificate')).getAttribute('data-clipboard-text');
+    const oldIntCert = find(SELECTORS.copyButton('Certificate')).getAttribute('data-test-copy-button');
     await click(SELECTORS.details.configure);
     await fillIn(SELECTORS.inputByName('issuerName'), this.intIssuerName);
     await click('[data-test-save]');
@@ -84,7 +84,7 @@ module('Acceptance | pki/pki cross sign', function (hooks) {
 
     // get certificate data of newly signed issuer
     await click(`${SELECTORS.signedIssuerCol('newCrossSignedIssuer')} a`);
-    const newIntCert = find(SELECTORS.copyButton('Certificate')).getAttribute('data-clipboard-text');
+    const newIntCert = find(SELECTORS.copyButton('Certificate')).getAttribute('data-test-copy-button');
 
     // verify cross-sign was accurate by creating a role to issue a leaf certificate
     const myRole = 'some-role';
@@ -98,7 +98,7 @@ module('Acceptance | pki/pki cross sign', function (hooks) {
     await fillIn(SELECTORS.inputByName('commonName'), 'my-leaf');
     await fillIn('[data-test-ttl-value="TTL"]', '3600');
     await click('[data-test-pki-generate-button]');
-    const myLeafCert = find(SELECTORS.copyButton('Certificate')).getAttribute('data-clipboard-text');
+    const myLeafCert = find(SELECTORS.copyButton('Certificate')).getAttribute('data-test-copy-button');
 
     // see comments in utils/parse-pki-cert.js for step-by-step explanation of of verifyCertificates method
     assert.true(

diff --git a/ui/tests/integration/components/certificate-card-test.js b/ui/tests/integration/components/certificate-card-test.js
@@ -15,6 +15,7 @@ const SELECTORS = {
   value: '[data-test-certificate-value]',
   icon: '[data-test-certificate-icon]',
   copyButton: '[data-test-copy-button]',
+  copyIcon: '[data-test-icon="clipboard-copy"]',
 };
 
 module('Integration | Component | certificate-card', function (hooks) {
@@ -26,7 +27,7 @@ module('Integration | Component | certificate-card', function (hooks) {
     assert.dom(SELECTORS.label).hasNoText('There is no label because there is no value');
     assert.dom(SELECTORS.value).hasNoText('There is no value because none was provided');
     assert.dom(SELECTORS.icon).exists('The certificate icon exists');
-    assert.dom(SELECTORS.copyButton).exists('The copy button exists');
+    assert.dom(SELECTORS.copyIcon).exists('The copy icon renders');
   });
 
   test('it renders with an example PEM Certificate', async function (assert) {

diff --git a/ui/tests/integration/components/copy-secret-dropdown-test.js b/ui/tests/integration/components/copy-secret-dropdown-test.js
@@ -11,7 +11,7 @@ import { hbs } from 'ember-cli-htmlbars';
 const SELECTORS = {
   dropdown: '[data-test-copy-menu-trigger]',
   copyButton: '[data-test-copy-button]',
-  clipboard: 'data-clipboard-text',
+  clipboard: 'data-test-copy-button',
   wrapButton: '[data-test-wrap-button]',
   masked: '[data-test-masked-input]',
 };
@@ -44,7 +44,7 @@ module('Integration | Component | copy-secret-dropdown', function (hooks) {
     assert.dom(SELECTORS.wrapButton).hasText('Wrap secret');
     assert
       .dom(SELECTORS.copyButton)
-      .hasAttribute('data-clipboard-text', `${this.data}`, 'it renders copyable data');
+      .hasAttribute('data-test-copy-button', `${this.data}`, 'it renders copyable data');
 
     await click(SELECTORS.wrapButton);
     await click(SELECTORS.dropdown);
@@ -88,6 +88,6 @@ module('Integration | Component | copy-secret-dropdown', function (hooks) {
     await click(SELECTORS.dropdown);
     assert
       .dom(`${SELECTORS.masked} ${SELECTORS.copyButton}`)
-      .hasAttribute('data-clipboard-text', this.wrappedData, 'it renders wrapped data');
+      .hasAttribute('data-test-copy-button', this.wrappedData, 'it renders wrapped data');
   });
 });
diff --git a/ui/tests/integration/components/info-table-row-test.js b/ui/tests/integration/components/info-table-row-test.js
@@ -96,7 +96,7 @@ module('Integration | Component | InfoTableRow', function (hooks) {
     assert.dom('[data-test-tooltip-copy]').exists('Tooltip has copy button');
     assert
       .dom('[data-test-tooltip-copy]')
-      .hasAttribute('data-clipboard-text', 'Foo bar', 'Copy button will copy the tooltip text');
+      .hasAttribute('data-test-tooltip-copy', 'Foo bar', 'Copy button will copy the tooltip text');
   });
 
   test('it renders a string with no link if isLink is true and the item type is not an array.', async function (assert) {

diff --git a/ui/tests/integration/components/kv/page/kv-page-secret-paths-test.js b/ui/tests/integration/components/kv/page/kv-page-secret-paths-test.js
@@ -25,7 +25,7 @@ module('Integration | Component | kv-v2 | Page::Secret::Paths', function (hooks)
     ];
 
     this.assertClipboard = (assert, element, expected) => {
-      assert.dom(element).hasAttribute('data-clipboard-text', expected);
+      assert.dom(element).hasAttribute('data-test-copy-button', expected);
     };
   });
 
@@ -110,9 +110,9 @@ module('Integration | Component | kv-v2 | Page::Secret::Paths', function (hooks)
     );
 
     assert.dom(PAGE.paths.codeSnippet('cli')).hasText(expected.cli);
-    assert.dom(PAGE.paths.snippetCopy('cli')).hasAttribute('data-clipboard-text', expected.cli);
+    assert.dom(PAGE.paths.snippetCopy('cli')).hasAttribute('data-test-copy-button', expected.cli);
     assert.dom(PAGE.paths.codeSnippet('api')).hasText(expected.apiDisplay);
-    assert.dom(PAGE.paths.snippetCopy('api')).hasAttribute('data-clipboard-text', expected.apiCopy);
+    assert.dom(PAGE.paths.snippetCopy('api')).hasAttribute('data-test-copy-button', expected.apiCopy);
   });
 
   test('it renders copyable encoded mount and path commands', async function (assert) {
@@ -141,8 +141,8 @@ module('Integration | Component | kv-v2 | Page::Secret::Paths', function (hooks)
     );
 
     assert.dom(PAGE.paths.codeSnippet('cli')).hasText(expected.cli);
-    assert.dom(PAGE.paths.snippetCopy('cli')).hasAttribute('data-clipboard-text', expected.cli);
+    assert.dom(PAGE.paths.snippetCopy('cli')).hasAttribute('data-test-copy-button', expected.cli);
     assert.dom(PAGE.paths.codeSnippet('api')).hasText(expected.apiDisplay);
-    assert.dom(PAGE.paths.snippetCopy('api')).hasAttribute('data-clipboard-text', expected.apiCopy);
+    assert.dom(PAGE.paths.snippetCopy('api')).hasAttribute('data-test-copy-button', expected.apiCopy);
   });
 });
diff --git a/ui/tests/integration/components/oidc/scope-form-test.js b/ui/tests/integration/components/oidc/scope-form-test.js
@@ -177,7 +177,11 @@ module('Integration | Component | oidc/scope-form', function (hooks) {
     assert.dom(MODAL('text')).hasText('Example of a JSON template for scopes:', 'Modal text renders');
     assert
       .dom('#scope-template-modal [data-test-copy-button]')
-      .hasAttribute('data-clipboard-text', exampleTemplate, 'Modal copy button copies the example template');
+      .hasAttribute(
+        'data-test-copy-button',
+        exampleTemplate,
+        'Modal copy button copies the example template'
+      );
     assert.dom('.cm-string').hasText('"username"', 'Example template json renders');
     await click('[data-test-close-modal]');
     assert.dom('.hds#scope-template-modal').doesNotExist('Modal is hidden');

diff --git a/ui/tests/integration/components/pki/pki-generate-csr-test.js b/ui/tests/integration/components/pki/pki-generate-csr-test.js
@@ -112,15 +112,16 @@ module('Integration | Component | pki-generate-csr', function (hooks) {
         'Next steps Copy the CSR below for a parent issuer to sign and then import the signed certificate back into this mount. The private_key is only available once. Make sure you copy and save it now.',
         'renders Next steps alert banner'
       );
+
     assert
       .dom('[data-test-value-div="CSR"] [data-test-certificate-card] button')
-      .hasAttribute('data-clipboard-text', this.model.csr, 'it renders copyable csr');
+      .hasAttribute('data-test-copy-button', this.model.csr, 'it renders copyable csr');
     assert
       .dom('[data-test-value-div="Key ID"] button')
-      .hasAttribute('data-clipboard-text', this.model.keyId, 'it renders copyable key_id');
+      .hasAttribute('data-test-copy-button', this.model.keyId, 'it renders copyable key_id');
     assert
       .dom('[data-test-value-div="Private key"] [data-test-certificate-card] button')
-      .hasAttribute('data-clipboard-text', this.model.privateKey, 'it renders copyable private_key');
+      .hasAttribute('data-test-copy-button', this.model.privateKey, 'it renders copyable private_key');
     assert
       .dom('[data-test-value-div="Private key type"]')
       .hasText(this.model.privateKeyType, 'renders private_key_type');
@@ -145,10 +146,10 @@ module('Integration | Component | pki-generate-csr', function (hooks) {
       );
     assert
       .dom('[data-test-value-div="CSR"] [data-test-certificate-card] button')
-      .hasAttribute('data-clipboard-text', this.model.csr, 'it renders copyable csr');
+      .hasAttribute('data-test-copy-button', this.model.csr, 'it renders copyable csr');
     assert
       .dom('[data-test-value-div="Key ID"] button')
-      .hasAttribute('data-clipboard-text', this.model.keyId, 'it renders copyable key_id');
+      .hasAttribute('data-test-copy-button', this.model.keyId, 'it renders copyable key_id');
     assert.dom('[data-test-value-div="Private key"]').hasText('internal', 'does not render private key');
     assert
       .dom('[data-test-value-div="Private key type"]')

diff --git a/ui/tests/integration/components/sidebar/user-menu-test.js b/ui/tests/integration/components/sidebar/user-menu-test.js
@@ -35,7 +35,7 @@ module('Integration | Component | sidebar-user-menu', function (hooks) {
 
     assert.dom('.menu-label').hasText('Token', 'Auth data display name renders');
     assert.dom('li').exists({ count: 2 }, 'Correct number of menu items render');
-    assert.dom('[data-clipboard-text="root"]').exists('Copy token action renders');
+    assert.dom('[data-test-copy-button="root"]').exists('Copy token action renders');
     assert.dom('#logout').hasText('Log out', 'Log out action renders');
   });