From 1afde2a5679d3221d09c84fa04861e326de36047 Mon Sep 17 00:00:00 2001
From: Boubaker Khanfir <boubaker.khanfir@exoplatform.com>
Date: Thu, 30 May 2024 05:59:16 +0100
Subject: [PATCH] feat: Display Tooltip When No Instance Preview available -
 MEED-6956 - Meeds-io/MIPs#139

---
 .../locale/portlet/LayoutEditor_en.properties |  1 +
 .../components/PortletsManagement.vue         |  9 +++------
 .../portlets/components/portlets/List.vue     |  2 +-
 .../portlets/drawer/InstancesDrawer.vue       | 20 ++++++++++---------
 4 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/layout-webapp/src/main/resources/locale/portlet/LayoutEditor_en.properties b/layout-webapp/src/main/resources/locale/portlet/LayoutEditor_en.properties
index 9d0fa0aec..74fac0347 100644
--- a/layout-webapp/src/main/resources/locale/portlet/LayoutEditor_en.properties
+++ b/layout-webapp/src/main/resources/locale/portlet/LayoutEditor_en.properties
@@ -286,3 +286,4 @@ portlets.noPortletInstancesYet=Create your first instance using this portlet
 portlets.instancePreview=Preview
 portlets.uploadPreviewTitle=Upload an illustration for portlet instance
 portlets.label.createInstance=Create instance
+portlets.noPreviewAvailable=No preview available
diff --git a/layout-webapp/src/main/webapp/vue-app/portlets/components/PortletsManagement.vue b/layout-webapp/src/main/webapp/vue-app/portlets/components/PortletsManagement.vue
index 3554ebdd1..63f04742b 100644
--- a/layout-webapp/src/main/webapp/vue-app/portlets/components/PortletsManagement.vue
+++ b/layout-webapp/src/main/webapp/vue-app/portlets/components/PortletsManagement.vue
@@ -30,14 +30,11 @@
         class="card-border-radius overflow-hidden"
         @portlet-instance-filter="keyword = $event"
         @select-tab="selectTab" />
-      <portlets-list
-        v-if="tabName === 'portlets'"
-        ref="portlets"
-        class="card-border-radius overflow-hidden"
-        :keyword="keyword" />
       <portlets-instance-main
         v-if="tabName === 'instances'"
-        ref="instances"
+        :keyword="keyword" />
+      <portlets-list
+        v-else-if="tabName === 'portlets'"
         :keyword="keyword" />
     </v-card>
     <portlets-item-instances-drawer />
diff --git a/layout-webapp/src/main/webapp/vue-app/portlets/components/portlets/List.vue b/layout-webapp/src/main/webapp/vue-app/portlets/components/portlets/List.vue
index a467dd6eb..da3b0123d 100644
--- a/layout-webapp/src/main/webapp/vue-app/portlets/components/portlets/List.vue
+++ b/layout-webapp/src/main/webapp/vue-app/portlets/components/portlets/List.vue
@@ -30,7 +30,7 @@
       must-sort
       disable-pagination
       hide-default-footer
-      class="portletsTable px-5">
+      class="card-border-radius overflow-hidden portletsTable px-5">
       <template slot="item" slot-scope="props">
         <portlets-item
           :key="props.item.id"
diff --git a/layout-webapp/src/main/webapp/vue-app/portlets/components/portlets/drawer/InstancesDrawer.vue b/layout-webapp/src/main/webapp/vue-app/portlets/components/portlets/drawer/InstancesDrawer.vue
index 713f35ac0..d562b729d 100644
--- a/layout-webapp/src/main/webapp/vue-app/portlets/components/portlets/drawer/InstancesDrawer.vue
+++ b/layout-webapp/src/main/webapp/vue-app/portlets/components/portlets/drawer/InstancesDrawer.vue
@@ -55,17 +55,19 @@
           <v-list-item-action class="my-auto me-4">
             <v-tooltip bottom>
               <template #activator="{on, attrs}">
-                <v-btn
+                <div
                   v-on="on"
-                  v-bind="attrs"
-                  :disabled="!application.illustrationId"
-                  class="transparent d-flex align-center justify-center"
-                  icon
-                  @click="openIllustration(application)">
-                  <v-icon class="icon-default-color">fa-eye</v-icon>
-                </v-btn>
+                  v-bind="attrs">
+                  <v-btn
+                    :disabled="!application.illustrationId"
+                    class="transparent d-flex align-center justify-center"
+                    icon
+                    @click="openIllustration(application)">
+                    <v-icon class="icon-default-color">fa-eye</v-icon>
+                  </v-btn>
+                </div>
               </template>
-              <span>{{ $t('portlets.previewInstance') }}</span>
+              <span>{{ application.illustrationId && $t('portlets.previewInstance') || $t('portlets.noPreviewAvailable') }}</span>
             </v-tooltip>
           </v-list-item-action>
         </v-list-item>