feat: disabled score metric tab and added tooltip if unavailable (#1587)

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

Author: emlimlf

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

@@ -6,11 +6,48 @@ SPDX-License-Identifier: MIT
   <lfx-tabs-panels>
     <lfx-tabs
       v-model="selectedTab"
-      :tabs="tabs"
+      :tabs="tabsOptions"
     >
       <template #slotItem="{ option }">
-        <div class="flex flex-col gap-2 items-start">
-          <div class="text-neutral-900 font-secondary text-sm tab-label">
+        <lfx-tooltip
+          v-if="!scoreDisplay[option.value as keyof typeof scoreDisplay]"
+          class="!w-full"
+        >
+          <template #content>
+            <p 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"
+                class="text-brand-500"
+                >Learn more</a
+              >
+            </p>
+          </template>
+          <div class="flex flex-col gap-2 items-start cursor-not-allowed">
+            <div class="text-sm tab-label text-neutral-400">
+              {{ 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>
+        </lfx-tooltip>
+        <div
+          v-else
+          class="flex flex-col gap-2 items-start"
+        >
+          <div class="text-sm tab-label text-neutral-900">
             {{ option.label }}
           </div>
           <div class="text-sm text-gray-500 w-full">
@@ -79,6 +116,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;
@@ -97,6 +136,13 @@ const selectedTab = computed({
   set: (value: string) => emit('update:modelValue', value),
 });
 
+const tabsOptions = computed(() => {
+  return props.tabs.map((tab) => ({
+    ...tab,
+    disabled: !props.scoreDisplay[tab.value as keyof typeof props.scoreDisplay],
+  }));
+});
+
 const getColor = (value: number) => {
   switch (true) {
     case value > 75:

frontend/app/components/uikit/tabs/tabs.vue

@@ -11,6 +11,7 @@ SPDX-License-Identifier: MIT
     option-value="value"
     :allow-empty="false"
     :class="`tabs-width-${props.widthType}`"
+    option-disabled="disabled"
   >
     <template #option="slotProps">
       <slot

frontend/app/components/uikit/tabs/types/tab.types.ts

@@ -4,6 +4,7 @@ export interface Tab {
   value: string;
   label: string;
   icon?: string;
+  disabled?: boolean;
 }
 
 export interface TabsProps {