UI: client count minor fixes (#25472)

* fix a11y violation on tab list

* Add tooltip for disabled input

* hide toggle when data collection cannot be changed

* Correct assertion count

ui/app/components/clients/config.hbs

@@ -9,27 +9,28 @@
       <MessageError @model={{@model}} @errorMessage={{this.error}} />
       {{#each @model.formFields as |attr|}}
         {{#if (eq attr.name "enabled")}}
-          <label class="is-label">Usage data collection</label>
-          <p class="sub-text">
-            Enable or disable client tracking. Keep in mind that disabling tracking will delete the data for the current
-            month.
-          </p>
-          <div class="control is-flex has-bottom-margin-l">
-            <input
-              data-test-input="enabled"
-              type="checkbox"
-              id="enabled"
-              name="enabled"
-              class="toggle is-success is-small"
-              disabled={{@model.reportingEnabled}}
-              checked={{eq @model.enabled "On"}}
-              {{on "change" this.toggleEnabled}}
-            />
-            <label for="enabled" class="has-text-weight-bold is-size-8">
-              Data collection is
-              {{lowercase @model.enabled}}
-            </label>
-          </div>
+          {{#unless @model.reportingEnabled}}
+            <label class="is-label">Usage data collection</label>
+            <p class="sub-text">
+              Enable or disable client tracking. Keep in mind that disabling tracking will delete the data for the current
+              month.
+            </p>
+            <div class="control is-flex has-bottom-margin-l">
+              <input
+                data-test-input="enabled"
+                type="checkbox"
+                id="enabled"
+                name="enabled"
+                class="toggle is-success is-small"
+                checked={{eq @model.enabled "On"}}
+                {{on "change" this.toggleEnabled}}
+              />
+              <label for="enabled" class="has-text-weight-bold is-size-8">
+                Data collection is
+                {{lowercase @model.enabled}}
+              </label>
+            </div>
+          {{/unless}}
         {{else}}
           <FormField @attr={{attr}} @model={{@model}} @modelValidations={{this.validations}} />
         {{/if}}

ui/app/templates/vault/cluster/clients.hbs

@@ -14,25 +14,33 @@
 <div class="tabs-container box is-bottomless is-marginless is-fullwidth is-paddingless">
   <nav class="tabs" aria-label="navigation for managing client counts">
     <ul>
-      <LinkTo @route="vault.cluster.clients.counts.overview" data-test-tab="overview">
-        Overview
-      </LinkTo>
-      <LinkTo @route="vault.cluster.clients.counts.token" data-test-tab="token">
-        Entity/Non-entity clients
-      </LinkTo>
+      <li>
+        <LinkTo @route="vault.cluster.clients.counts.overview" data-test-tab="overview">
+          Overview
+        </LinkTo>
+      </li>
+      <li>
+        <LinkTo @route="vault.cluster.clients.counts.token" data-test-tab="token">
+          Entity/Non-entity clients
+        </LinkTo>
+      </li>
       {{! * unavailable during SYNC BETA (1.16.0), planned for 1.16.1 release
-      <LinkTo @route="vault.cluster.clients.counts.sync" data-test-tab="sync">
-        Secrets sync clients
-      </LinkTo>
+      <li>
+        <LinkTo @route="vault.cluster.clients.counts.sync" data-test-tab="sync">
+          Secrets sync clients
+        </LinkTo>
+      </li>
        }}
       {{#if (or @model.config.canRead @model.canRead)}}
-        <LinkTo
-          @route="vault.cluster.clients.config"
-          @current-when="vault.cluster.clients.config vault.cluster.clients.edit"
-          data-test-tab="config"
-        >
-          Configuration
-        </LinkTo>
+        <li>
+          <LinkTo
+            @route="vault.cluster.clients.config"
+            @current-when="vault.cluster.clients.config vault.cluster.clients.edit"
+            data-test-tab="config"
+          >
+            Configuration
+          </LinkTo>
+        </li>
       {{/if}}
     </ul>
   </nav>

ui/tests/integration/components/clients/config-test.js

@@ -108,8 +108,8 @@ module('Integration | Component | client count config', function (hooks) {
     assert.dom('[data-test-clients-config-modal]').doesNotExist('Modal is hidden on cancel');
   });
 
-  test('it should function in edit mode when reporting is enabled', async function (assert) {
-    assert.expect(6);
+  test('it should be hidden in edit mode when reporting is enabled', async function (assert) {
+    assert.expect(4);
 
     this.server.put('/sys/internal/counters/config', (schema, req) => {
       const { enabled, retention_months } = JSON.parse(req.requestBody);
@@ -124,13 +124,7 @@ module('Integration | Component | client count config', function (hooks) {
       <Clients::Config @model={{this.model}} @mode="edit" />
     `);
 
-    assert.dom('[data-test-input="enabled"]').isChecked('Data collection input is checked');
-    assert
-      .dom('[data-test-input="enabled"]')
-      .isDisabled('Data collection input disabled when reporting is enabled');
-    assert
-      .dom('label[for="enabled"]')
-      .hasText('Data collection is on', 'Correct label renders when data collection is on');
+    assert.dom('[data-test-input="enabled"]').doesNotExist('Data collection input not shown ');
     assert.dom('[data-test-input="retentionMonths"]').hasValue('24', 'Retention months render');
 
     await fillIn('[data-test-input="retentionMonths"]', 5);