Add tooltips to disabled Confluence and Jira buttons; enhance popover styles (#2956)

Signed-off-by: Sameh16 <sameh_mohamed16@hotmail.com>

Author: Sameh16

frontend/src/config/integrations/confluence/components/confluence-connect.vue

@@ -1,14 +1,19 @@
 <template>
-  <div class="flex items-center gap-4">
-    <!--      <lf-button type="secondary-ghost" @click="isDetailsModalOpen = true">-->
-    <!--        <lf-icon name="circle-info" type="regular" />-->
-    <!--        Details-->
-    <!--      </lf-button>-->
-    <lf-button type="secondary" @click="isConfluenceSettingsDrawerVisible = true">
+  <lf-tooltip
+    placement="top"
+    content-class="!max-w-76 !p-3 !text-start"
+    content="These integrations are temporarily disabled. Please contact the CM team for further questions."
+  >
+    <lf-button
+      :disabled="true"
+      type="secondary"
+      @click="isConfluenceSettingsDrawerVisible = true"
+    >
       <lf-icon name="link-simple" />
       <slot>Connect</slot>
     </lf-button>
-  </div>
+  </lf-tooltip>
+
   <lf-confluence-settings-drawer
     v-if="isConfluenceSettingsDrawerVisible"
     v-model="isConfluenceSettingsDrawerVisible"
@@ -22,12 +27,13 @@
 import { defineProps, ref } from 'vue';
 import LfIcon from '@/ui-kit/icon/Icon.vue';
 import LfButton from '@/ui-kit/button/Button.vue';
+import LfTooltip from '@/ui-kit/tooltip/Tooltip.vue';
 import LfConfluenceSettingsDrawer from '@/config/integrations/confluence/components/confluence-settings-drawer.vue';
 
 const props = defineProps<{
-  integration: any,
-  segmentId: string,
-  grandparentId: string,
+  integration: any;
+  segmentId: string;
+  grandparentId: string;
 }>();
 
 const isConfluenceSettingsDrawerVisible = ref(false);

frontend/src/config/integrations/jira/components/jira-connect.vue

@@ -1,14 +1,18 @@
 <template>
-  <div class="flex items-center gap-4">
-    <!--      <lf-button type="secondary-ghost" @click="isDetailsModalOpen = true">-->
-    <!--        <lf-icon name="circle-info" type="regular" />-->
-    <!--        Details-->
-    <!--      </lf-button>-->
-    <lf-button type="secondary" @click="isJiraSettingsDrawerVisible = true">
+  <lf-tooltip
+    placement="top"
+    content-class="!max-w-76 !p-3 !text-start"
+    content="These integrations are temporarily disabled. Please contact the CM team for further questions."
+  >
+    <lf-button
+      :disabled="true"
+      type="secondary"
+      @click="isJiraSettingsDrawerVisible = true"
+    >
       <lf-icon name="link-simple" />
       <slot>Connect</slot>
     </lf-button>
-  </div>
+  </lf-tooltip>
   <lf-jira-settings-drawer
     v-if="isJiraSettingsDrawerVisible"
     v-model="isJiraSettingsDrawerVisible"
@@ -22,10 +26,11 @@
 import { defineProps, ref } from 'vue';
 import LfIcon from '@/ui-kit/icon/Icon.vue';
 import LfButton from '@/ui-kit/button/Button.vue';
+import LfTooltip from '@/ui-kit/tooltip/Tooltip.vue';
 import LfJiraSettingsDrawer from '@/config/integrations/jira/components/jira-settings-drawer.vue';
 
 const props = defineProps<{
-  integration: any,
+  integration: any;
   segmentId: string | null;
   grandparentId: string | null;
 }>();

frontend/src/ui-kit/dropdown/Dropdown.vue

@@ -1,5 +1,5 @@
 <template>
-  <lf-popover :placement="props.placement" :persistent="props.persistent">
+  <lf-popover :placement="props.placement" :persistent="props.persistent" :is-dropdown="true">
     <template #trigger>
       <slot name="trigger" />
     </template>

frontend/src/ui-kit/popover/Popover.vue

@@ -15,7 +15,7 @@
         ref="popover"
         :style="popoverStyle"
         class="c-popover__content"
-        :class="[`is-placed-${props.placement}`, { 'is-hidden': props.persistent && !isVisible }]"
+        :class="[`is-placed-${props.placement}`, { 'is-hidden': props.persistent && !isVisible }, { 'popover-box': !props.isDropdown }]"
       >
         <slot :close="hidePopover" />
       </div>
@@ -37,13 +37,15 @@ const props = withDefaults(defineProps<{
   visibility?: boolean,
   triggerEvent?: PopoverTrigger,
   persistent?: boolean;
+  isDropdown?: boolean;
 }>(), {
   placement: 'bottom-start',
   disabled: false,
   spacing: 4,
   visibility: false,
   triggerEvent: 'click',
   persistent: false,
+  isDropdown: false,
 });
 
 const emit = defineEmits<{(e: 'update:visibility', value: boolean): void }>();

frontend/src/ui-kit/popover/popover.scss

@@ -8,6 +8,10 @@
   &__content {
     @apply absolute z-[2090] w-max transition-all overflow-visible;
 
+    &.popover-box {
+      @apply text-sm bg-white min-w-34 p-3 rounded-md border-gray-200 border;
+
+    }
     &.is-hidden {
       @apply invisible opacity-0 pointer-events-none;
     }

frontend/tailwind.config.js

@@ -43,6 +43,7 @@ const spacing = {
   65: "16.25rem",
   68: "17rem",
   70: "17.5rem",
+  76: "19rem",
   88: "22rem",
   100: "25rem",
   104: "26rem",