Dashboard TLS Configuration Details Bug

changelog/23726.txt

@@ -0,0 +1,3 @@
+```release-note:bug
+ui: Fixes issues displaying accurate TLS state in dashboard configuration details
+```

ui/app/components/dashboard/vault-configuration-details-card.js

@@ -17,11 +17,14 @@ import Component from '@glimmer/component';
  */
 
 export default class DashboardSecretsEnginesCard extends Component {
-  get tlsDisabled() {
-    const tlsDisableConfig = this.args.vaultConfiguration?.listeners.find((listener) => {
-      if (listener.config && listener.config.tls_disable) return listener.config.tls_disable;
+  get tls() {
+    // since the default for tls_disable is false it may not be in the config
+    // consider tls enabled if tls_disable is undefined or false AND both tls_cert_file and tls_key_file are defined
+    const tlsListener = this.args.vaultConfiguration?.listeners.find((listener) => {
+      const { tls_disable, tls_cert_file, tls_key_file } = listener.config || {};
+      return !tls_disable && tls_cert_file && tls_key_file;
     });
 
-    return tlsDisableConfig?.config.tls_disable ? 'Enabled' : 'Disabled';
+    return tlsListener ? 'Enabled' : 'Disabled';
   }
 }

ui/app/templates/components/dashboard/vault-configuration-details-card.hbs

@@ -19,7 +19,7 @@
       </B.Tr>
       <B.Tr>
         <B.Td>TLS</B.Td>
-        <B.Td data-test-vault-config-details="tls_disable">{{this.tlsDisabled}}</B.Td>
+        <B.Td data-test-vault-config-details="tls">{{this.tls}}</B.Td>
       </B.Tr>
       <B.Tr>
         <B.Td>Log format</B.Td>

ui/tests/acceptance/dashboard-test.js

@@ -169,10 +169,17 @@ module('Acceptance | landing page dashboard', function (hooks) {
           usage_gauge_period: 5000000000,
         },
       };
-      await authPage.login();
+
+      this.server.get('sys/config/state/sanitized', () => ({
+        data: this.data,
+        wrap_info: null,
+        warnings: null,
+        auth: null,
+      }));
     });
 
     test('hides the configuration details card on a non-root namespace enterprise version', async function (assert) {
+      await authPage.login();
       await visit('/vault/dashboard');
       const version = this.owner.lookup('service:version');
       assert.true(version.isEnterprise, 'vault is enterprise');
@@ -183,12 +190,6 @@ module('Acceptance | landing page dashboard', function (hooks) {
     });
 
     test('shows the configuration details card', async function (assert) {
-      this.server.get('sys/config/state/sanitized', () => ({
-        data: this.data,
-        wrap_info: null,
-        warnings: null,
-        auth: null,
-      }));
       await authPage.login();
       await visit('/vault/dashboard');
       assert.dom(SELECTORS.cardHeader('configuration')).hasText('Configuration details');
@@ -197,39 +198,36 @@ module('Acceptance | landing page dashboard', function (hooks) {
         .hasText('http://127.0.0.1:8200');
       assert.dom(SELECTORS.vaultConfigurationCard.configDetailsField('default_lease_ttl')).hasText('0');
       assert.dom(SELECTORS.vaultConfigurationCard.configDetailsField('max_lease_ttl')).hasText('2 days');
-      assert.dom(SELECTORS.vaultConfigurationCard.configDetailsField('tls_disable')).hasText('Enabled');
+      assert.dom(SELECTORS.vaultConfigurationCard.configDetailsField('tls')).hasText('Disabled'); // tls_disable=true
       assert.dom(SELECTORS.vaultConfigurationCard.configDetailsField('log_format')).hasText('None');
       assert.dom(SELECTORS.vaultConfigurationCard.configDetailsField('log_level')).hasText('debug');
       assert.dom(SELECTORS.vaultConfigurationCard.configDetailsField('type')).hasText('raft');
     });
-    test('shows the tls disabled if it is disabled', async function (assert) {
-      this.server.get('sys/config/state/sanitized', () => {
-        this.data.listeners[0].config.tls_disable = false;
-        return {
-          data: this.data,
-          wrap_info: null,
-          warnings: null,
-          auth: null,
-        };
-      });
+
+    test('it should show tls as enabled if tls_disable, tls_cert_file and tls_key_file are in the config', async function (assert) {
+      this.data.listeners[0].config.tls_disable = false;
+      this.data.listeners[0].config.tls_cert_file = './cert.pem';
+      this.data.listeners[0].config.tls_key_file = './key.pem';
+
       await authPage.login();
       await visit('/vault/dashboard');
-      assert.dom(SELECTORS.vaultConfigurationCard.configDetailsField('tls_disable')).hasText('Disabled');
+      assert.dom(SELECTORS.vaultConfigurationCard.configDetailsField('tls')).hasText('Enabled');
     });
-    test('shows the tls disabled if there is no tlsDisabled returned from server', async function (assert) {
-      this.server.get('sys/config/state/sanitized', () => {
-        this.data.listeners = [];
-
-        return {
-          data: this.data,
-          wrap_info: null,
-          warnings: null,
-          auth: null,
-        };
-      });
+
+    test('it should show tls as enabled if only cert and key exist in config', async function (assert) {
+      delete this.data.listeners[0].config.tls_disable;
+      this.data.listeners[0].config.tls_cert_file = './cert.pem';
+      this.data.listeners[0].config.tls_key_file = './key.pem';
+      await authPage.login();
+      await visit('/vault/dashboard');
+      assert.dom(SELECTORS.vaultConfigurationCard.configDetailsField('tls')).hasText('Enabled');
+    });
+
+    test('it should show tls as disabled if there is no tls information in the config', async function (assert) {
+      this.data.listeners = [];
       await authPage.login();
       await visit('/vault/dashboard');
-      assert.dom(SELECTORS.vaultConfigurationCard.configDetailsField('tls_disable')).hasText('Disabled');
+      assert.dom(SELECTORS.vaultConfigurationCard.configDetailsField('tls')).hasText('Disabled');
     });
   });