From c9ce3fd83d90509390445fc93d2a7b587950ee6f Mon Sep 17 00:00:00 2001
From: Angel Garbarino <Monkeychip@users.noreply.github.com>
Date: Thu, 14 Apr 2022 14:58:26 -0600
Subject: [PATCH] Custom tooltip for Generated Token Policies form field on
 auth methods (#15046)

* the conditional fix

* add test coverage

* changelog

* add possesive

* fix language

* fix

* fix

* change quotes

* fix

* replace with find
---
 changelog/15046.txt                                 |  4 ++++
 ui/app/components/generated-item.js                 | 10 ++++++++++
 .../addon/templates/components/info-tooltip.hbs     |  2 +-
 ui/tests/acceptance/auth-list-test.js               | 13 +++++++++++++
 4 files changed, 28 insertions(+), 1 deletion(-)
 create mode 100644 changelog/15046.txt

diff --git a/changelog/15046.txt b/changelog/15046.txt
new file mode 100644
index 0000000000..e52d9db29a
--- /dev/null
+++ b/changelog/15046.txt
@@ -0,0 +1,4 @@
+```release-note:bug
+ui: Fix Generated Token's Policies helpText to clarify that comma separated values are not accepted in this field. 
+```
+
diff --git a/ui/app/components/generated-item.js b/ui/app/components/generated-item.js
index 41f988af4c..f46e3fdbd0 100644
--- a/ui/app/components/generated-item.js
+++ b/ui/app/components/generated-item.js
@@ -48,6 +48,16 @@ export default Component.extend({
   ),
   init() {
     this._super(...arguments);
+    this.model.fieldGroups.forEach((element) => {
+      // overwriting the helpText for Token Polices.
+      // HelpText from the backend says add a comma separated list, which works on the CLI but not here on the UI.
+      // This effects TLS Certificates, Userpass, and Kubernetes. https://github.com/hashicorp/vault/issues/10346
+      if (element.Tokens) {
+        element.Tokens.find((attr) => attr.name === 'tokenPolicies').options.helpText =
+          'Add policies that will apply to the generated token for this user. One policy per row.';
+      }
+    });
+
     if (this.mode === 'edit') {
       // For validation to work in edit mode,
       // reconstruct the model values from field group
diff --git a/ui/lib/core/addon/templates/components/info-tooltip.hbs b/ui/lib/core/addon/templates/components/info-tooltip.hbs
index e1e82930f8..3fa31a2792 100644
--- a/ui/lib/core/addon/templates/components/info-tooltip.hbs
+++ b/ui/lib/core/addon/templates/components/info-tooltip.hbs
@@ -8,7 +8,7 @@
     <Icon @name="info" class="auto-width" aria-label="help" />
   </d.Trigger>
   <d.Content @defaultClass="tool-tip">
-    <div class="box">
+    <div class="box" data-test-info-tooltip-content>
       {{yield}}
     </div>
   </d.Content>
diff --git a/ui/tests/acceptance/auth-list-test.js b/ui/tests/acceptance/auth-list-test.js
index eb5fbacd46..0244e2f5a7 100644
--- a/ui/tests/acceptance/auth-list-test.js
+++ b/ui/tests/acceptance/auth-list-test.js
@@ -5,6 +5,7 @@ import {
   fillIn,
   settled,
   visit,
+  triggerEvent,
   triggerKeyEvent,
   find,
   waitUntil,
@@ -69,6 +70,18 @@ module('Acceptance | auth backend list', function (hooks) {
     await triggerKeyEvent('[data-test-input="username"]', 'keyup', 65);
     await fillIn('[data-test-textarea]', user2);
     await triggerKeyEvent('[data-test-textarea]', 'keyup', 65);
+    // test for modified helpText on generated token policies
+    await click('[data-test-toggle-group="Tokens"]');
+    let policyFormField = document.querySelector('[data-test-input="tokenPolicies"]');
+    let tooltipTrigger = policyFormField.querySelector('[data-test-tool-tip-trigger]');
+    await triggerEvent(tooltipTrigger, 'mouseenter');
+    assert
+      .dom('[data-test-info-tooltip-content]')
+      .hasText(
+        'Add policies that will apply to the generated token for this user. One policy per row.',
+        'Overwritten tooltip text displays in token form field.'
+      );
+
     await click('[data-test-save-config="true"]');
 
     //confirming that the user was created.  There was a bug where the apiPath was not being updated when toggling between auth routes