From b85309ebebbaa42f1fde95442fcc9bec12d1308b Mon Sep 17 00:00:00 2001
From: Laura Martinez Garcia <lauram@empathy.co>
Date: Tue, 14 May 2024 08:55:47 +0200
Subject: [PATCH] fix: pr comments

---
 packages/_vue3-migration-test/src/router.ts   |  8 +---
 .../src/x-modules/facets/components/index.ts  |  1 -
 .../facets/components/test-facets.vue         | 36 ++++++++++++----
 .../components/test-filters-injection.vue     | 43 -------------------
 .../src/composables/use-filters-injection.ts  |  4 +-
 .../lists/exclude-filters-with-no-results.vue | 10 ++---
 .../components/lists/filters-search.vue       |  6 +--
 .../components/lists/sorted-filters.vue       |  7 +--
 8 files changed, 37 insertions(+), 78 deletions(-)
 delete mode 100644 packages/_vue3-migration-test/src/x-modules/facets/components/test-filters-injection.vue

diff --git a/packages/_vue3-migration-test/src/router.ts b/packages/_vue3-migration-test/src/router.ts
index 9d21e02df0..b0338e1304 100644
--- a/packages/_vue3-migration-test/src/router.ts
+++ b/packages/_vue3-migration-test/src/router.ts
@@ -14,8 +14,7 @@ import {
   TestScroll,
   TestSortDropdown,
   TestSortList,
-  TestSortPickerList,
-  TestFiltersInjection
+  TestSortPickerList
 } from './';
 
 const routes = [
@@ -93,11 +92,6 @@ const routes = [
     path: '/elements-list',
     name: 'ElementsList',
     component: TestElementsList
-  },
-  {
-    path: '/filters-injection',
-    name: 'FiltersInjection',
-    component: TestFiltersInjection
   }
 ];
 
diff --git a/packages/_vue3-migration-test/src/x-modules/facets/components/index.ts b/packages/_vue3-migration-test/src/x-modules/facets/components/index.ts
index b35b294264..82e5a09c6f 100644
--- a/packages/_vue3-migration-test/src/x-modules/facets/components/index.ts
+++ b/packages/_vue3-migration-test/src/x-modules/facets/components/index.ts
@@ -1,2 +1 @@
-export { default as TestFiltersInjection } from './test-filters-injection.vue';
 export { default as TestFacets } from './test-facets.vue';
diff --git a/packages/_vue3-migration-test/src/x-modules/facets/components/test-facets.vue b/packages/_vue3-migration-test/src/x-modules/facets/components/test-facets.vue
index 3874309a8a..b9f3dffde1 100644
--- a/packages/_vue3-migration-test/src/x-modules/facets/components/test-facets.vue
+++ b/packages/_vue3-migration-test/src/x-modules/facets/components/test-facets.vue
@@ -4,14 +4,27 @@
     <Facets :renderableFacets="facetsIds.join(',')">
       <template #default="{ facet }">
         <h3>{{ facet.label }}</h3>
-        <ul>
-          <li v-for="filter in facet.filters" :key="filter.id">
-            <BaseEventButton :events="{ UserClickedAFilter: filter }">
-              {{ filter.label }}
-              <span v-if="filter.selected">✅</span>
-            </BaseEventButton>
-          </li>
-        </ul>
+
+        <ExcludeFiltersWithNoResults :filters="facet.filters">
+          <SortedFilters>
+            <FiltersSearch :data-test="`filters-search-${facet.id}`">
+              <SlicedFilters :max="4" :data-test="`${facet.label}-sliced-filters`">
+                <FiltersList
+                  v-slot="{
+                    // eslint-disable-next-line vue/no-unused-vars
+                    filter
+                  }"
+                >
+                  <BaseEventButton :events="{ UserClickedAFilter: filter }">
+                    {{ filter.label }}
+                    {{ filter.totalResults }}
+                    <span v-if="filter.selected">✅</span>
+                  </BaseEventButton>
+                </FiltersList>
+              </SlicedFilters>
+            </FiltersSearch>
+          </SortedFilters>
+        </ExcludeFiltersWithNoResults>
       </template>
     </Facets>
     <h2>SelectedFilters</h2>
@@ -39,6 +52,11 @@
   import Facets from '../../../../../x-components/src/x-modules/facets/components/facets/facets.vue';
   import SelectedFilters from '../../../../../x-components/src/x-modules/facets/components/lists/selected-filters.vue';
   import SelectedFiltersList from '../../../../../x-components/src/x-modules/facets/components/lists/selected-filters-list.vue';
+  import SortedFilters from '../../../../../x-components/src/x-modules/facets/components/lists/sorted-filters.vue';
+  import SlicedFilters from '../../../../../x-components/src/x-modules/facets/components/lists/sliced-filters.vue';
+  import FiltersSearch from '../../../../../x-components/src/x-modules/facets/components/lists/filters-search.vue';
+  import ExcludeFiltersWithNoResults from '../../../../../x-components/src/x-modules/facets/components/lists/exclude-filters-with-no-results.vue';
+  import FiltersList from '../../../../../x-components/src/x-modules/facets/components/lists/filters-list.vue';
 
-  const facetsIds = ['gender', 'brand'];
+  const facetsIds = ['gender', 'brand', 'category'];
 </script>
diff --git a/packages/_vue3-migration-test/src/x-modules/facets/components/test-filters-injection.vue b/packages/_vue3-migration-test/src/x-modules/facets/components/test-filters-injection.vue
deleted file mode 100644
index c00f39a59c..0000000000
--- a/packages/_vue3-migration-test/src/x-modules/facets/components/test-filters-injection.vue
+++ /dev/null
@@ -1,43 +0,0 @@
-<script setup lang="ts">
-  import FiltersSearch from '../../../../../x-components/src/x-modules/facets/components/lists/filters-search.vue';
-  import SlicedFilters from '../../../../../x-components/src/x-modules/facets/components/lists/sliced-filters.vue';
-  import SortedFilters from '../../../../../x-components/src/x-modules/facets/components/lists/sorted-filters.vue';
-  import ExcludeFiltersWithNoResults from '../../../../../x-components/src/x-modules/facets/components/lists/exclude-filters-with-no-results.vue';
-  import FiltersList from '../../../../../x-components/src/x-modules/facets/components/lists/filters-list.vue';
-  import { useState } from '../../../../../x-components/src/composables/use-state';
-  import { useRegisterXModule } from '../../../../../x-components/src/composables/use-register-x-module';
-  import { facetsXModule } from '../../../../../x-components/src/x-modules/facets/x-module';
-
-  useRegisterXModule(facetsXModule);
-
-  const facet = useState('facets', ['facets']).facets.value['category'];
-</script>
-
-<template>
-  <div>
-    <ExcludeFiltersWithNoResults :filters="facet.filters">
-      <SortedFilters>
-        <FiltersSearch :data-test="`filters-search-${facet.id}`">
-          <SlicedFilters :max="4" :data-test="`${facet.label}-sliced-filters`">
-            <FiltersList
-              v-slot="{
-                // eslint-disable-next-line vue/no-unused-vars
-                filter
-              }"
-            >
-              {{ filter.label }}
-              {{ filter.totalResults }}
-            </FiltersList>
-          </SlicedFilters>
-        </FiltersSearch>
-      </SortedFilters>
-    </ExcludeFiltersWithNoResults>
-  </div>
-</template>
-
-<style scoped lang="scss">
-  .list {
-    overflow: auto;
-    height: 100px;
-  }
-</style>
diff --git a/packages/x-components/src/composables/use-filters-injection.ts b/packages/x-components/src/composables/use-filters-injection.ts
index a581084a4b..c647c5f5fd 100644
--- a/packages/x-components/src/composables/use-filters-injection.ts
+++ b/packages/x-components/src/composables/use-filters-injection.ts
@@ -1,6 +1,6 @@
 import { Filter, HierarchicalFilter, isHierarchicalFilter } from '@empathyco/x-types';
 import { computed, inject, Ref } from 'vue';
-import { isArrayEmpty } from '../utils/index';
+import { isArrayEmpty } from '../utils/array';
 
 /**
  * Composable to share filters injection logic.
@@ -12,7 +12,7 @@ import { isArrayEmpty } from '../utils/index';
  */
 export function useFiltersInjection(props: {
   /** The list of filters to be rendered as slots. */
-  filters?: Filter[] | undefined;
+  filters?: Filter[];
   /**
     This prop is used in the `HierarchicalFilter` component and only in that case. It is necessary
    to make the `renderedFilters` to return only the filters of each level of the hierarchy.
diff --git a/packages/x-components/src/x-modules/facets/components/lists/exclude-filters-with-no-results.vue b/packages/x-components/src/x-modules/facets/components/lists/exclude-filters-with-no-results.vue
index 9d2a3af97f..c2e2b1c2fd 100644
--- a/packages/x-components/src/x-modules/facets/components/lists/exclude-filters-with-no-results.vue
+++ b/packages/x-components/src/x-modules/facets/components/lists/exclude-filters-with-no-results.vue
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { Filter, isBooleanFilter } from '@empathyco/x-types';
-  import { computed, CreateElement, defineComponent, PropType, provide, VNode } from 'vue';
+  import { computed, defineComponent, PropType, provide, h } from 'vue';
   import { facetsXModule } from '../../x-module';
   import { useRegisterXModule } from '../../../../composables/use-register-x-module';
   import { useFiltersInjection } from '../../../../composables/use-filters-injection';
@@ -33,8 +33,7 @@
        * @public
        */
       parentId: {
-        type: String as PropType<Filter['id']>,
-        required: false
+        type: String as PropType<Filter['id']>
       }
     },
     setup(props, { slots }) {
@@ -54,10 +53,7 @@
       });
       provide('filters', filtersWithResults);
 
-      return { filtersWithResults, slots };
-    },
-    render(h: CreateElement): VNode {
-      return this.slots.default?.({ filters: this.filtersWithResults })?.[0] ?? h();
+      return () => (slots.default ? slots.default({ filters: filtersWithResults.value }) : h());
     }
   });
 </script>
diff --git a/packages/x-components/src/x-modules/facets/components/lists/filters-search.vue b/packages/x-components/src/x-modules/facets/components/lists/filters-search.vue
index 5d76855ff9..9800792bfa 100644
--- a/packages/x-components/src/x-modules/facets/components/lists/filters-search.vue
+++ b/packages/x-components/src/x-modules/facets/components/lists/filters-search.vue
@@ -14,7 +14,7 @@
         type="search"
         class="x-filters-search__input x-input"
         data-test="filters-search-input"
-        :aria-label="filtersSearchInputMessage"
+        :aria-label="'search into the filter values'"
       />
     </slot>
     <!--
@@ -73,8 +73,7 @@
       const renderedFilters = useFiltersInjection(props);
 
       let query = ref('');
-      let setQueryDebounced!: DebouncedFunction<[string]>;
-      const filtersSearchInputMessage = 'search into the filter values';
+      let setQueryDebounced: DebouncedFunction<[string]>;
 
       const debounceInMs = computed(() => props.debounceInMs);
 
@@ -135,7 +134,6 @@
       };
 
       return {
-        filtersSearchInputMessage,
         clearQuery,
         setQuery,
         cssClasses,
diff --git a/packages/x-components/src/x-modules/facets/components/lists/sorted-filters.vue b/packages/x-components/src/x-modules/facets/components/lists/sorted-filters.vue
index de41ff4b64..fede5f165b 100644
--- a/packages/x-components/src/x-modules/facets/components/lists/sorted-filters.vue
+++ b/packages/x-components/src/x-modules/facets/components/lists/sorted-filters.vue
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { BooleanFilter, Filter, isBooleanFilter } from '@empathyco/x-types';
-  import { computed, CreateElement, defineComponent, PropType, provide, VNode } from 'vue';
+  import { computed, defineComponent, PropType, provide, h } from 'vue';
   import { isArrayEmpty } from '../../../../utils';
   import { facetsXModule } from '../../x-module';
   import { useRegisterXModule } from '../../../../composables/use-register-x-module';
@@ -54,10 +54,7 @@
       });
       provide('filters', sortedFilters);
 
-      return { sortedFilters, slots };
-    },
-    render(h: CreateElement): VNode {
-      return this.slots.default?.({ filters: this.sortedFilters })?.[0] ?? h();
+      return () => (slots.default ? slots.default({ filters: sortedFilters.value }) : h());
     }
   });
 </script>