Merge pull request #1613 from Quetzacoalt91/update-eslint-dependencies

Update eslint related dependencies + fix new issues
PrestaShopCorp · Dec 21, 2023 · dd9c367 · dd9c367
2 parents dcf9d8c + 03af78f
commit dd9c367
Show file tree

Hide file tree

Showing 78 changed files with 1,851 additions and 1,803 deletions.
diff --git a/_dev/apps/ui/package.json b/_dev/apps/ui/package.json
@@ -31,10 +31,8 @@
     "bootstrap-vue": "^2.22.0",
     "chart.js": "^4.3.3",
     "chartjs-adapter-date-fns": "^2.0.0",
-    "css-loader": "^3.6.0",
     "date-fns": "^2.29.2",
     "dayjs": "^1.11.5",
-    "debounce": "^1.2.1",
     "google-timezones-json": "^1.0.2",
     "lodash.clonedeep": "^4.5.0",
     "lodash.uniqby": "^4.7.0",
@@ -43,7 +41,6 @@
     "secure-ls": "^1.2.6",
     "semver": "^7.5.3",
     "showdown": "^1.9.1",
-    "style-loader": "^1.3.0",
     "ts-loader": "^8.4.0",
     "vue": "^2.7.14",
     "vue-i18n": "^8.27.2",
@@ -63,15 +60,14 @@
     "@storybook/theming": "^7.0.26",
     "@storybook/vue": "^7.0.26",
     "@storybook/vue-vite": "^7.0.26",
-    "@types/debounce": "^1.2.1",
     "@types/lodash.clonedeep": "^4.5.7",
     "@types/semver": "^7.5.0",
     "@types/showdown": "^1.9.4",
-    "@typescript-eslint/eslint-plugin": "^5.59.9",
-    "@typescript-eslint/parser": "^5.59.9",
-    "@vitejs/plugin-vue": "^4.2.3",
+    "@typescript-eslint/eslint-plugin": "^5.62.0",
+    "@typescript-eslint/parser": "^5.62.0",
+    "@vitejs/plugin-vue2": "^2.3.1",
     "@vue/eslint-config-airbnb": "^5.3.0",
-    "@vue/eslint-config-typescript": "^5.1.0",
+    "@vue/eslint-config-typescript": "^12.0.0",
     "@vue/test-utils": "^1.2.2",
     "chromatic": "^5.10.1",
     "eslint": "^8.43.0",
@@ -81,7 +77,7 @@
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-prettier": "^3.4.1",
     "eslint-plugin-storybook": "^0.6.12",
-    "eslint-plugin-vue": "^8.7.1",
+    "eslint-plugin-vue": "^9.18.1",
     "jest-environment-jsdom": "^29.5.0",
     "msw": "^0.36.3",
     "msw-storybook-addon": "^1.8.0",

diff --git a/_dev/apps/ui/src/App.vue b/_dev/apps/ui/src/App.vue
@@ -18,7 +18,7 @@
         id="head_tabs"
         class="ps_gs-sticky-head page-head-tabs"
       >
-        <Menu>
+        <AppMenu>
           <MenuItem
             v-if="!currentlyOnLandingPage"
             :route="{name: 'campaign'}"
@@ -41,7 +41,7 @@
           >
             {{ $t('general.tabs.help') }}
           </MenuItem>
-        </Menu>
+        </AppMenu>
         <b-toaster
           name="b-toaster-top-right"
           class="ps_gs-toaster-top-right"
@@ -83,7 +83,7 @@
 
 <script lang="ts">
 import {initShopClient} from 'mktg-with-google-common/api/shopClient';
-import Menu from '@/components/menu/menu.vue';
+import AppMenu from '@/components/menu/app-menu.vue';
 import MenuItem from '@/components/menu/menu-item.vue';
 import SegmentGenericParams from '@/utils/SegmentGenericParams';
 import AlertModuleUpdate from '@/components/commons/alert-update-module.vue';
@@ -93,9 +93,8 @@ import PopinUserNotConnectedToBo from '@/components/commons/user-not-connected-t
 let resizeEventTimer;
 
 export default {
-  name: 'Home',
   components: {
-    Menu,
+    AppMenu,
     MenuItem,
     AlertModuleUpdate,
     PopinUserNotConnectedToBo,

diff --git a/...onents/campaign-creation/campaign-creation-filter-popin/campaign-creation-popin-recap.vue b/...onents/campaign-creation/campaign-creation-filter-popin/campaign-creation-popin-recap.vue
@@ -193,7 +193,7 @@ export default defineComponent({
           if (resp && resp.error) {
             throw new Error(error);
           }
-          
+
           this.$store.dispatch(
             'campaigns/GET_CAMPAIGNS_LIST',
           );

diff --git a/_dev/apps/ui/src/components/campaign-creation/campaign-creation.vue b/_dev/apps/ui/src/components/campaign-creation/campaign-creation.vue
@@ -121,7 +121,8 @@
               id="campaign-duration-fieldset"
               class="maxw-sm-420"
               :description="$t('smartShoppingCampaignCreation.inputDurationHelper')"
-              label-class="border-0 bg-transparent d-flex align-items-center ps_gs-fz-16 font-weight-500"
+              label-class="border-0 bg-transparent d-flex align-items-center
+                ps_gs-fz-16 font-weight-500"
               label-for="campaign-duration-start-date-input"
             >
               <template #label>
@@ -611,7 +612,7 @@ export default defineComponent({
             'smartShoppingCampaignCreation.inputBudgetBeforeThresholdFeedback',
             {
               budget: this.formattedRecommendedBudget,
-            }
+            },
           ),
         };
       }

diff --git a/_dev/apps/ui/src/components/campaign/alert-low-budget.vue b/_dev/apps/ui/src/components/campaign/alert-low-budget.vue
@@ -9,15 +9,15 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import {defineComponent} from 'vue';
 
 export default defineComponent({
   name: 'AlertLowBudget',
   props: {
     formatedPrice: {
       required: true,
       type: String,
-    }
+    },
   },
 });
 </script>
diff --git a/_dev/apps/ui/src/components/campaign/campaign-table-list-row.spec.ts b/_dev/apps/ui/src/components/campaign/campaign-table-list-row.spec.ts
@@ -1,6 +1,6 @@
 // Import this file first to init mock on window
 import {mount} from '@vue/test-utils';
-import {BDropdown, BDropdownItemButton, BTd} from 'bootstrap-vue';
+import {BDropdownItemButton, BTd} from 'bootstrap-vue';
 import config, {localVue, addBootstrapToVue} from '@/../tests/init';
 
 import CampaignTableListRow from './campaign-table-list-row.vue';

diff --git a/_dev/apps/ui/src/components/campaign/campaign-table-list-row.vue b/_dev/apps/ui/src/components/campaign/campaign-table-list-row.vue
@@ -6,7 +6,8 @@
       <span
         class="ps_gs-cell-status"
         :class="`ps_gs-cell-status--${campaign.status?.toLowerCase()}`"
-        v-b-tooltip:psxMktgWithGoogleApp :title="$t(`campaigns.status.${campaign.status?.toLowerCase()}`)"
+        v-b-tooltip:psxMktgWithGoogleApp
+        :title="$t(`campaigns.status.${campaign.status?.toLowerCase()}`)"
       />
     </b-td>
 
@@ -93,13 +94,13 @@
 </template>
 
 <script lang="ts">
+import {PropType, defineComponent} from 'vue';
 import googleUrl from '@/assets/json/googleUrl.json';
 import CampaignStatus, {CampaignStatusToggle} from '@/enums/reporting/CampaignStatus';
 import compareYears from '@/utils/CompareYears';
-import { PropType, defineComponent } from 'vue';
-import { CampaignPerformanceObject, CampaignStatusPayload } from '@/store/modules/campaigns/state';
-import { timeConverterToDate } from '@/utils/Dates';
-import { formatPrice } from '../../utils/Price';
+import {CampaignPerformanceObject, CampaignStatusPayload} from '@/store/modules/campaigns/state';
+import {timeConverterToDate} from '@/utils/Dates';
+import {formatPrice} from '../../utils/Price';
 import SegmentGenericParams from '@/utils/SegmentGenericParams';
 import AlertLowBudget from './alert-low-budget.vue';
 
@@ -114,18 +115,19 @@ export default defineComponent({
   computed: {
     campaignDuration() {
       if (this.campaign.status === CampaignStatus.ENDED) {
-        return this.$t('campaigns.dateLabel.endedOnX', { endDate: timeConverterToDate(this.campaign.endDate) });
+        return this.$t('campaigns.dateLabel.endedOnX', {endDate: timeConverterToDate(this.campaign.endDate)});
       }
       if (this.campaign.endDate) {
         const isThereAnEndDate = compareYears(this.campaign.endDate);
+
         if (isThereAnEndDate) {
           return this.$t('campaigns.dateLabel.fromXToX', {
             startDate: timeConverterToDate(this.campaign.startDate),
             endDate: timeConverterToDate(this.campaign.endDate),
           });
         }
       }
-      return this.$t('campaigns.dateLabel.from', { startDate: timeConverterToDate(this.campaign.startDate) });
+      return this.$t('campaigns.dateLabel.from', {startDate: timeConverterToDate(this.campaign.startDate)});
     },
     campaignCountryName() {
       return this.$options.filters.changeCountriesCodesToNames([this.campaign.targetCountry])[0];
@@ -181,6 +183,6 @@ export default defineComponent({
   googleUrl,
   components: {
     AlertLowBudget,
-  }
+  },
 });
 </script>
diff --git a/_dev/apps/ui/src/components/campaign/campaign-table-list.vue b/_dev/apps/ui/src/components/campaign/campaign-table-list.vue
@@ -13,7 +13,6 @@
       <b-card-body
         body-class="p-0"
       >
-
         <b-table-simple
           id="table-filters-performance"
           class="card mb-0"
@@ -24,7 +23,7 @@
           >
             <b-tr>
               <b-th
-                v-for="(type, index) in campaignHeaderList"
+                v-for="(type) in campaignHeaderList"
                 :key="type"
                 class="font-weight-500"
                 :class="{'ps_gs-table-performance-header': isPerformanceInfo(type)}"
@@ -33,7 +32,7 @@
                   :loading="loading || fetchingCampaigns"
                 >
                   <template #loading>
-                    <b-skeleton/>
+                    <b-skeleton />
                   </template>
 
                   <div class="flex align-items-center">
@@ -89,13 +88,12 @@
             </template>
 
             <table-api-error
-              v-else-if="apiFailed" 
+              v-else-if="apiFailed"
               :colspan="campaignHeaderList.length"
             />
 
             <template
               v-else-if="campaignList.length"
-              class=" ps_gs-onboardingcard__not-configured"
             >
               <CampaignTableListRow
                 v-for="campaign in campaignList"
@@ -117,25 +115,23 @@
 
 <script lang="ts">
 import {mapGetters} from 'vuex';
+import {defineComponent} from 'vue';
 import GettersTypes from '@/store/modules/campaigns/getters-types';
 import MutationsTypes from '@/store/modules/campaigns/mutations-types';
 import {CampaignListOrdering} from '@/store/modules/campaigns/state';
 import CampaignTableListRow from './campaign-table-list-row.vue';
 import CampaignSummaryListHeaderType from '@/enums/campaigns-summary/CampaignSummaryListHeaderType';
 import QueryOrderDirection from '@/enums/reporting/QueryOrderDirection';
 import googleUrl from '@/assets/json/googleUrl.json';
-import BannerCampaigns from '@/components/commons/banner-campaigns.vue';
 import {CampaignTypes} from '@/enums/reporting/CampaignStatus';
 import TableApiError from '@/components/commons/table-api-error.vue';
 import TablePageControls from '@/components/commons/table-page-controls.vue';
 import SegmentGenericParams from '@/utils/SegmentGenericParams';
-import { defineComponent } from 'vue';
 
 export default defineComponent({
   name: 'CampaignTableList',
   components: {
     CampaignTableListRow,
-    BannerCampaigns,
     TableApiError,
     TablePageControls,
   },
@@ -212,7 +208,8 @@ export default defineComponent({
       return headerType !== CampaignSummaryListHeaderType.STATUS;
     },
     hasSorting(headerType: CampaignSummaryListHeaderType): boolean {
-      return this.isPerformanceInfo(headerType) || headerType === CampaignSummaryListHeaderType.DURATION;
+      return this.isPerformanceInfo(headerType)
+        || headerType === CampaignSummaryListHeaderType.DURATION;
     },
     isPerformanceInfo(headerType: CampaignSummaryListHeaderType): boolean {
       return [

diff --git a/_dev/apps/ui/src/components/campaign/reporting/key-metrics/key-metrics-block.vue b/_dev/apps/ui/src/components/campaign/reporting/key-metrics/key-metrics-block.vue
@@ -19,28 +19,52 @@
       :loading="loading"
     >
       <template #loading>
-        <b-skeleton width="85%" class="mt-2"></b-skeleton>
-        <b-skeleton width="55%" class="mb-3"></b-skeleton>
+        <b-skeleton
+          width="85%"
+          class="mt-2"
+        />
+        <b-skeleton
+          width="55%"
+          class="mb-3"
+        />
         <b-row class="mx-n1 no-gutters">
           <b-col
-            cols="12" sm="6" md="4" xl="2"
+            cols="12"
+            sm="6"
+            md="4"
+            xl="2"
             v-for="n in 6"
             :key="n"
           >
-            <b-skeleton height="4.8rem" class="ps_gs-kpi-card m-1"></b-skeleton>
+            <b-skeleton
+              height="4.8rem"
+              class="ps_gs-kpi-card m-1"
+            />
           </b-col>
         </b-row>
-        <b-skeleton width="30%" class="mt-3"></b-skeleton>
-        <b-skeleton-img height="305px" no-aspect class="mt-3"></b-skeleton-img>
+        <b-skeleton
+          width="30%"
+          class="mt-3"
+        />
+        <b-skeleton-img
+          height="305px"
+          no-aspect
+          class="mt-3"
+        />
         <b-row>
           <b-col cols="9">
-            <b-skeleton width="70%" class="mt-3"></b-skeleton>
+            <b-skeleton
+              width="70%"
+              class="mt-3"
+            />
           </b-col>
           <b-col cols="3">
-            <b-skeleton width="100%" class="mt-3"></b-skeleton>
+            <b-skeleton
+              width="100%"
+              class="mt-3"
+            />
           </b-col>
         </b-row>
-
       </template>
       <div class="mt-2 d-flex justify-content-between flex-column flex-sm-row">
         <div class="order-1 mb-2 order-sm-0">
@@ -96,6 +120,7 @@
 </template>
 
 <script lang="ts">
+import {defineComponent} from 'vue';
 import KeyMetricsErrorMessage from './key-metrics-error-message.vue';
 import KeyMetricsKpiCardGroup from './key-metrics-kpi-card-group.vue';
 import KeyMetricsKpiCard from './key-metrics-kpi-card.vue';
@@ -106,7 +131,7 @@ import {DailyResultColor, DailyResultTypes, Kpis} from '@/store/modules/campaign
 import KpiType from '@/enums/reporting/KpiType';
 import SegmentGenericParams from '@/utils/SegmentGenericParams';
 
-export default {
+export default defineComponent({
   name: 'KeyMetricsBlock',
   components: {
     KeyMetricsErrorMessage,
@@ -155,7 +180,9 @@ export default {
       this.$store.dispatch('campaigns/GET_REPORTING_KPIS');
     },
     associatedColorToKpi(kpi: KpiType): DailyResultColor|undefined {
-      return Object.keys(this.dailyResultTypesSelected).find((color: string) => this.dailyResultTypesSelected[color] === kpi);
+      return Object.keys(
+        this.dailyResultTypesSelected,
+      ).find((color: string) => this.dailyResultTypesSelected[color] === kpi);
     },
     toggleKpi(type: KpiType, newValueIsActive: boolean): void {
       this.$segment.track('[GGL] Reporting - Toggle KPI highlighted', {
@@ -171,5 +198,5 @@ export default {
       this.$store.dispatch('campaigns/ADD_REPORTING_DAILY_RESULTS_TYPE', type);
     },
   },
-};
+});
 </script>