From 58a5f172882520e01cfcf8d721729031b294c20f Mon Sep 17 00:00:00 2001
From: claire bontempo <68122737+hellobontempo@users.noreply.github.com>
Date: Mon, 14 Jun 2021 13:03:49 -0700
Subject: [PATCH] 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                           |  3 +++
 ui/app/components/auth-form.js                | 11 ++++++++++-
 ui/app/templates/components/auth-form.hbs     |  4 ++++
 .../integration/components/auth-form-test.js  | 19 +++++++++++++++++++
 ui/tests/pages/components/auth-form.js        |  1 +
 5 files changed, 37 insertions(+), 1 deletion(-)
 create mode 100644 changelog/11795.txt

diff --git a/changelog/11795.txt b/changelog/11795.txt
new file mode 100644
index 000000000..ead4434b2
--- /dev/null
+++ b/changelog/11795.txt
@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: Added auth method descriptions to UI login page
+```
\ No newline at end of file
diff --git a/ui/app/components/auth-form.js b/ui/app/components/auth-form.js
index 7c345524e..9e24fc3c9 100644
--- a/ui/app/components/auth-form.js
+++ b/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');
       });
diff --git a/ui/app/templates/components/auth-form.hbs b/ui/app/templates/components/auth-form.hbs
index 4a718c178..725d4d88d 100644
--- a/ui/app/templates/components/auth-form.hbs
+++ b/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'
diff --git a/ui/tests/integration/components/auth-form-test.js b/ui/tests/integration/components/auth-form-test.js
index a558caffb..0c69af2e9 100644
--- a/ui/tests/integration/components/auth-form-test.js
+++ b/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);
diff --git a/ui/tests/pages/components/auth-form.js b/ui/tests/pages/components/auth-form.js
index 175806c13..64c1de34e 100644
--- a/ui/tests/pages/components/auth-form.js
+++ b/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]'),
 };