Displays Auth Method description on Vault UI login page (#11795)

* Displays Auth Method description on login page

* working on auth login form

* Keeps path name as LinkTo label adds description to paths

* removes commented and unused code

* removes trailing white space

* removes prettier package

* adds test for description

* removes extra white spaces

* adds changelog file

changelog/11795.txt

@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: Added auth method descriptions to UI login page
+```

ui/app/components/auth-form.js

@@ -178,7 +178,16 @@ export default Component.extend(DEFAULTS, {
           unauthenticated: true,
         },
       });
-      this.set('methods', methods.map(m => m.serialize({ includeId: true })));
+      this.set(
+        'methods',
+        methods.map(m => {
+          const method = m.serialize({ includeId: true });
+          return {
+            ...method,
+            mountDescription: method.description,
+          };
+        })
+      );
       next(() => {
         store.unloadAll('auth-method');
       });

ui/app/templates/components/auth-form.hbs

@@ -26,6 +26,10 @@
       @errorMessage={{if (and cluster.standby hasCSPError) cspErrorText error}}
       data-test-auth-error
     />
+    <div class="has-bottom-margin-s ">
+      <p class="is-label">{{this.selectedAuthBackend.path}}</p>
+      <span class="description has-text-grey" data-test-description={{true}}>{{this.selectedAuthBackend.mountDescription}}</span>
+    </div>
     {{#if (or (not hasMethodsWithPath) (not selectedAuthIsPath))}}
       <Select
         @label='Method'

ui/tests/integration/components/auth-form-test.js

@@ -150,6 +150,25 @@ module('Integration | Component | auth form', function(hooks) {
     server.shutdown();
   });
 
+  test('it renders the description', async function(assert) {
+    let methods = {
+      'approle/': {
+        type: 'userpass',
+        description: 'app description',
+      },
+    };
+    let server = new Pretender(function() {
+      this.get('/v1/sys/internal/ui/mounts', () => {
+        return [200, { 'Content-Type': 'application/json' }, JSON.stringify({ data: { auth: methods } })];
+      });
+    });
+    this.set('cluster', EmberObject.create({}));
+    await render(hbs`{{auth-form cluster=cluster }}`);
+    await settled();
+    assert.equal(component.descriptionText, 'app description', 'renders a description for auth methods');
+    server.shutdown();
+  });
+
   test('it calls authenticate with the correct path', async function(assert) {
     this.owner.unregister('service:auth');
     this.owner.register('service:auth', workingAuthService);

ui/tests/pages/components/auth-form.js

@@ -11,5 +11,6 @@ export default {
   tokenValue: value('[data-test-token]'),
   password: fillable('[data-test-password]'),
   errorText: text('[data-test-auth-error]'),
+  descriptionText: text('[data-test-description]'),
   login: clickable('[data-test-auth-submit]'),
 };