From 7a776947421e52bb8cd58e78712817996dfcc508 Mon Sep 17 00:00:00 2001
From: Thomas Nabord <thomas.nabord@prestashop.com>
Date: Mon, 27 Mar 2023 09:34:08 +0100
Subject: [PATCH] Fix alignment of data in product feed table when all
 destination do not have the same status

---
 .../product-feed-table-status-details-row.vue       | 13 ++++++++-----
 .../product-feed-table-status-details.stories.ts    |  2 +-
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/_dev/apps/ui/src/components/product-feed-page/product-feed-table-status-details-row.vue b/_dev/apps/ui/src/components/product-feed-page/product-feed-table-status-details-row.vue
index 77f350c09c..22cfdd6477 100644
--- a/_dev/apps/ui/src/components/product-feed-page/product-feed-table-status-details-row.vue
+++ b/_dev/apps/ui/src/components/product-feed-page/product-feed-table-status-details-row.vue
@@ -2,14 +2,14 @@
   <b-tr>
     <b-td
       class="align-top"
-      :rowspan="product.statuses.length"
+      :rowspan="numberOfDisapprovedDestinations"
       v-if="!indexStatus"
     >
       {{ product.id }}{{ +product.attribute > 0 ? '&#8209;' + product.attribute : '' }}
     </b-td>
     <b-td
       class="align-top b-table-sticky-column"
-      :rowspan="product.statuses.length"
+      :rowspan="numberOfDisapprovedDestinations"
       v-if="!indexStatus"
     >
       <a
@@ -24,7 +24,7 @@
     </b-td>
     <b-td
       class="align-top"
-      :rowspan="countriesAndStatusAreTheSame ? product.statuses.length : 0"
+      :rowspan="countriesAndStatusAreTheSame ? numberOfDisapprovedDestinations : 0"
       v-if="!indexStatus || !countriesAndStatusAreTheSame"
     >
       <b-badge
@@ -38,7 +38,7 @@
     </b-td>
     <b-td
       class="align-top"
-      :rowspan="countriesAndStatusAreTheSame ? product.statuses.length : 0"
+      :rowspan="countriesAndStatusAreTheSame ? numberOfDisapprovedDestinations : 0"
       v-if="!indexStatus || !countriesAndStatusAreTheSame"
     >
       <span>
@@ -53,7 +53,7 @@
 
     <b-td
       class="align-top"
-      :rowspan="countriesAndStatusAreTheSame ? product.statuses.length : 0"
+      :rowspan="countriesAndStatusAreTheSame ? numberOfDisapprovedDestinations : 0"
       v-if="!indexStatus || !countriesAndStatusAreTheSame"
     >
       <b-badge
@@ -154,6 +154,9 @@ export default defineComponent({
           && JSON.stringify(anotherStatus.countries) === JSON.stringify(this.status.countries),
         );
     },
+    numberOfDisapprovedDestinations(): number {
+      return this.product.statuses.filter((s) => s.status === ProductStatus.Disapproved).length;
+    },
     merchantCenterWebsitePageUrl() {
       const {id} = this.$store.state.accounts.googleMerchantAccount;
 
diff --git a/_dev/apps/ui/stories/product-feed-table-status-details.stories.ts b/_dev/apps/ui/stories/product-feed-table-status-details.stories.ts
index 4d7e28df6e..84853b26a0 100644
--- a/_dev/apps/ui/stories/product-feed-table-status-details.stories.ts
+++ b/_dev/apps/ui/stories/product-feed-table-status-details.stories.ts
@@ -165,7 +165,7 @@ TableStatusDetails.parameters = {
                 statuses: [
                   {
                     destination: "Shopping",
-                    status: "disapproved",
+                    status: "approved",
                     countries: ["GB"],
                   },
                   {