fix: tooltip not clickable on overview tab (#1645)

Signed-off-by: Efren Lim <elim@linuxfoundation.org>

Author: emlimlf

.gitignore

@@ -12,4 +12,6 @@ node_modules
 **/.env*
 !.env.dist
 database/Dockerfile.flyway
-database/flyway_migrate.sh
+database/flyway_migrate.sh
+
+**/AGENTS.md

frontend/app/components/modules/project/components/overview/score-details/score-tab-view.vue

@@ -9,30 +9,56 @@ SPDX-License-Identifier: MIT
       :tabs="tabsOptions"
     >
       <template #slotItem="{ option }">
-        <div class="flex flex-col gap-2 items-start">
+        <lfx-tooltip
+          class="!w-full"
+          :allow-pass-through="true"
+          :disabled="scoreDisplay[option.value as keyof typeof scoreDisplay]"
+        >
+          <template #content>
+            <p
+              v-if="!scoreDisplay[option.value as keyof typeof scoreDisplay]"
+              class="max-w-60"
+            >
+              {{ option.label }} metrics are unavailable because the required data isn't available for this project.
+              <a
+                :href="links.securityScore"
+                target="_blank"
+                rel="noopener noreferrer"
+                class="text-brand-500"
+                >Learn more</a
+              >
+            </p>
+          </template>
           <div
-            class="text-sm tab-label"
+            class="flex flex-col gap-2 items-start"
             :class="{
-              'text-neutral-400': !scoreDisplay[option.value as keyof typeof scoreDisplay],
-              'text-neutral-900': scoreDisplay[option.value as keyof typeof scoreDisplay],
+              'cursor-not-allowed': !scoreDisplay[option.value as keyof typeof scoreDisplay],
             }"
           >
-            {{ option.label }}
-          </div>
-          <div class="text-sm text-gray-500 w-full">
-            <lfx-skeleton-state
-              :status="status"
-              height=".188rem"
-              width="100%"
+            <div
+              class="text-sm tab-label"
+              :class="{
+                'text-neutral-400': !scoreDisplay[option.value as keyof typeof scoreDisplay],
+                'text-neutral-900': scoreDisplay[option.value as keyof typeof scoreDisplay],
+              }"
             >
-              <lfx-progress-bar
-                size="small"
-                :values="[getValues(option.value)]"
-                :color="getColor(getValues(option.value))"
-              />
-            </lfx-skeleton-state>
+              {{ option.label }}
+            </div>
+            <div class="text-sm text-gray-500 w-full">
+              <lfx-skeleton-state
+                :status="status"
+                height=".188rem"
+                width="100%"
+              >
+                <lfx-progress-bar
+                  size="small"
+                  :values="[getValues(option.value)]"
+                  :color="getColor(getValues(option.value))"
+                />
+              </lfx-skeleton-state>
+            </div>
           </div>
-        </div>
+        </lfx-tooltip>
       </template>
     </lfx-tabs>
     <template
@@ -85,6 +111,8 @@ import type { ScoreDisplay } from '~~/types/overview/score-display.types';
 import LfxProjectLoadState from '~~/app/components/modules/project/components/shared/load-state.vue';
 import LfxSkeletonState from '~/components/modules/project/components/shared/skeleton-state.vue';
 import type { WidgetArea } from '~/components/modules/widget/types/widget-area';
+import { links } from '~/config/links';
+import LfxTooltip from '~/components/uikit/tooltip/tooltip.vue';
 
 const props = defineProps<{
   trustScoreSummary: TrustScoreSummary | undefined;

frontend/app/components/uikit/popover/popover.vue

@@ -47,6 +47,7 @@ const props = withDefaults(
     matchWidth?: boolean;
     isModal?: boolean;
     popoverClass?: string;
+    allowPassThrough?: boolean;
   }>(),
   {
     placement: 'bottom-start',
@@ -57,6 +58,7 @@ const props = withDefaults(
     matchWidth: false,
     isModal: false,
     popoverClass: '',
+    allowPassThrough: false,
   },
 );
 
@@ -128,7 +130,9 @@ const closePopover = () => {
 };
 
 const handleClick = (e: Event) => {
-  e.stopPropagation();
+  if (!props.allowPassThrough) {
+    e.stopPropagation();
+  }
   if (props.triggerEvent === 'click') {
     if (isVisible.value) {
       closePopover();

frontend/app/components/uikit/tooltip/tooltip.vue

@@ -7,6 +7,7 @@ SPDX-License-Identifier: MIT
     :placement="props.placement"
     :disabled="props.disabled"
     trigger-event="hover"
+    :allow-pass-through="props.allowPassThrough"
   >
     <slot />
 
@@ -32,11 +33,13 @@ const props = withDefaults(
     placement?: Placement;
     content?: string;
     disabled?: boolean;
+    allowPassThrough?: boolean;
   }>(),
   {
     placement: 'top',
     content: '',
     disabled: false,
+    allowPassThrough: false,
   },
 );
 </script>