From 47b1f610f133517c38ab3907b674c3247877d2a1 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Mon, 29 Apr 2024 17:32:44 +0530
Subject: [PATCH] feat: Adds helper text for custom fields in contact sidebars
 (#9317)

* feat: Adds helper text for custom fields in contact sidebars

* Update app/javascript/dashboard/components/ui/HelperTextPopup.vue

Co-authored-by: Shivam Mishra <scm.mymail@gmail.com>

* chore: Review fix

---------

Co-authored-by: Shivam Mishra <scm.mymail@gmail.com>
---
 .../dashboard/components/CustomAttribute.vue  | 16 +++++++++----
 .../components/ui/HelperTextPopup.vue         | 24 +++++++++++++++++++
 .../customAttributes/CustomAttributes.vue     |  1 +
 3 files changed, 37 insertions(+), 4 deletions(-)
 create mode 100644 app/javascript/dashboard/components/ui/HelperTextPopup.vue

diff --git a/app/javascript/dashboard/components/CustomAttribute.vue b/app/javascript/dashboard/components/CustomAttribute.vue
index b50ad54cb..2c0fb48f7 100644
--- a/app/javascript/dashboard/components/CustomAttribute.vue
+++ b/app/javascript/dashboard/components/CustomAttribute.vue
@@ -12,7 +12,7 @@
         </div>
         <div class="flex items-center justify-between w-full">
           <span
-            class="w-full font-medium text-sm mb-0"
+            class="w-full inline-flex gap-1.5 items-start font-medium whitespace-nowrap text-sm mb-0"
             :class="
               $v.editedValue.$error
                 ? 'text-red-400 dark:text-red-500'
@@ -20,6 +20,11 @@
             "
           >
             {{ label }}
+            <helper-text-popup
+              v-if="description"
+              :message="description"
+              class="mt-0.5"
+            />
           </span>
           <woot-button
             v-if="showCopyAndDeleteButton"
@@ -41,7 +46,7 @@
             ref="inputfield"
             v-model="editedValue"
             :type="inputType"
-            class="!h-8 ltr:rounded-r-none rtl:rounded-l-none !mb-0 !text-sm"
+            class="!h-8 ltr:!rounded-r-none rtl:!rounded-l-none !mb-0 !text-sm"
             autofocus="true"
             :class="{ error: $v.editedValue.$error }"
             @blur="$v.editedValue.$touch"
@@ -130,22 +135,25 @@
 </template>
 
 <script>
-import { mixin as clickaway } from 'vue-clickaway';
 import { format, parseISO } from 'date-fns';
 import { required, url } from 'vuelidate/lib/validators';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import MultiselectDropdown from 'shared/components/ui/MultiselectDropdown.vue';
+import HelperTextPopup from 'dashboard/components/ui/HelperTextPopup.vue';
 import { isValidURL } from '../helper/URLHelper';
 import customAttributeMixin from '../mixins/customAttributeMixin';
+
 const DATE_FORMAT = 'yyyy-MM-dd';
 
 export default {
   components: {
     MultiselectDropdown,
+    HelperTextPopup,
   },
-  mixins: [customAttributeMixin, clickaway],
+  mixins: [customAttributeMixin],
   props: {
     label: { type: String, required: true },
+    description: { type: String, default: '' },
     values: { type: Array, default: () => [] },
     value: { type: [String, Number, Boolean], default: '' },
     showActions: { type: Boolean, default: false },
diff --git a/app/javascript/dashboard/components/ui/HelperTextPopup.vue b/app/javascript/dashboard/components/ui/HelperTextPopup.vue
new file mode 100644
index 000000000..fb14692f6
--- /dev/null
+++ b/app/javascript/dashboard/components/ui/HelperTextPopup.vue
@@ -0,0 +1,24 @@
+<script setup>
+defineProps({
+  message: {
+    type: String,
+    default: '',
+  },
+});
+</script>
+<template>
+  <div class="relative group w-[inherit] whitespace-normal z-20">
+    <fluent-icon
+      icon="info"
+      size="14"
+      class="mt-0.5 text-slate-600 absolute dark:text-slate-400"
+    />
+    <div
+      class="bg-white dark:bg-slate-900 w-fit ltr:left-4 rtl:right-4 top-0 border p-2.5 group-hover:flex items-center hidden absolute border-slate-75 dark:border-slate-800 rounded-lg shadow-md"
+    >
+      <p class="text-slate-800 dark:text-slate-75 mb-0 text-xs">
+        {{ message }}
+      </p>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributes.vue b/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributes.vue
index 6dfb85c4b..20bef48f6 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributes.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributes.vue
@@ -7,6 +7,7 @@
       :attribute-type="attribute.attribute_display_type"
       :values="attribute.attribute_values"
       :label="attribute.attribute_display_name"
+      :description="attribute.attribute_description"
       :value="attribute.value"
       :show-actions="true"
       :attribute-regex="attribute.regex_pattern"