From 2c8c008e49149663e010e233d0c29f21b967bc54 Mon Sep 17 00:00:00 2001
From: sboursen-scinote <soufiane@scinote.net>
Date: Wed, 25 Jan 2023 09:34:01 +0100
Subject: [PATCH 01/10] Extract the filters_list component and reset it on
 clear [SCI-7585]

---
 app/javascript/packs/vue/repository_filter.js |  1 -
 .../vue/repository_filter/container.vue       | 28 +++++++++----------
 .../vue/repository_filter/filters_list.vue    | 26 +++++++++++++++++
 3 files changed, 40 insertions(+), 15 deletions(-)
 create mode 100644 app/javascript/vue/repository_filter/filters_list.vue

diff --git a/app/javascript/packs/vue/repository_filter.js b/app/javascript/packs/vue/repository_filter.js
index e744f73d1..732fcaf2a 100644
--- a/app/javascript/packs/vue/repository_filter.js
+++ b/app/javascript/packs/vue/repository_filter.js
@@ -120,7 +120,6 @@ window.initRepositoryFilter = () => {
         this.reloadDataTable();
       },
       clearFilters() {
-        this.filters = [];
         this.filterName = null;
         this.dataTableElement.removeAttr('data-repository-filter-json');
         $('#modalSaveRepositoryTableFilter').data('repositoryTableFilterId', null);
diff --git a/app/javascript/vue/repository_filter/container.vue b/app/javascript/vue/repository_filter/container.vue
index f69610f96..5ccc8faaa 100644
--- a/app/javascript/vue/repository_filter/container.vue
+++ b/app/javascript/vue/repository_filter/container.vue
@@ -24,16 +24,12 @@
         {{ i18n.t('repositories.show.filters.clear') }}
       </button>
     </div>
-    <div class="filters-list">
-      <FilterElement
-        v-for="(filter, index) in filters"
-        :key="filter.id"
-        :filter.sync="filters[index]"
-        :my_modules.sync= "my_modules"
-        @filter:update="updateFilter"
-        @filter:delete="filters.splice(index, 1)"
-      />
-    </div>
+    <FiltersList 
+      :filters.sync="filters" 
+      :my_modules.sync="my_modules" 
+      :key="filterListKey"
+      v-on:update-filter="updateFilter"
+      v-on:delete-filter="deleteFilter" />
     <div class="footer">
       <div id="filtersColumnsDropdown" class="dropup filters-columns-dropdown" @click="toggleColumnsFilters">
         <button class="btn btn-secondary add-filter prevent-shrink" >
@@ -59,7 +55,7 @@
 
  <script>
   import ColumnElement from 'vue/repository_filter/column.vue'
-  import FilterElement from 'vue/repository_filter/filter.vue'
+  import FiltersList from 'vue/repository_filter/filters_list.vue'
   import SavedFilterElement from 'vue/repository_filter/saved_filter.vue'
 
   export default {
@@ -76,10 +72,11 @@
     data() {
       return {
         filters: this.defaultFilters,
-        savedFilterScrollbar: null
+        savedFilterScrollbar: null,
+        filterListKey: true
       }
     },
-    components: { ColumnElement, FilterElement, SavedFilterElement },
+    components: { ColumnElement, FiltersList, SavedFilterElement },
     methods: {
       addFilter(column) {
         const id = this.filters.length ? this.filters[this.filters.length - 1].id + 1 : 1
@@ -92,9 +89,12 @@
         this.$emit("filters:update", this.filters);
       },
       clearFilters() {
-        this.filters = [];
+        this.filterListKey = !this.filterListKey;
         this.$emit('filters:clear');
       },
+      deleteFilter(index) {
+        this.filters.splice(index, 1);
+      },
       closeDropdowns() {
         this.closeColumnsFilters();
         this.closeSavedFilters();
diff --git a/app/javascript/vue/repository_filter/filters_list.vue b/app/javascript/vue/repository_filter/filters_list.vue
new file mode 100644
index 000000000..84ed05b50
--- /dev/null
+++ b/app/javascript/vue/repository_filter/filters_list.vue
@@ -0,0 +1,26 @@
+<template>
+  <div class="filters-list">
+    <FilterElement
+      v-for="(filter, index) in filters"
+      :key="filter.id"
+      :filter="filters[index]"
+      :my_modules="my_modules"
+      @filter:update="$emit('update-filter', filter)"
+      @filter:delete="$emit('delete-filter', index)"
+    />
+  </div>
+</template>
+
+<script>
+// @filter:delete="filters.splice(index, 1)"
+  import FilterElement from 'vue/repository_filter/filter.vue'
+
+    export default {
+    name: 'FiltersList',
+    props: {
+      filters: Array,
+      my_modules: Array,
+    },
+    components: {FilterElement},
+  }
+</script>

From e2521e501ca0a9ddf109d9d8ea69fb1e0421358d Mon Sep 17 00:00:00 2001
From: sboursen-scinote <soufiane@scinote.net>
Date: Wed, 25 Jan 2023 10:30:20 +0100
Subject: [PATCH 02/10] Change the position of the clear button [SCI-7585]

---
 app/assets/stylesheets/repository/filters.scss     | 6 +++++-
 app/javascript/vue/repository_filter/container.vue | 7 +++----
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/app/assets/stylesheets/repository/filters.scss b/app/assets/stylesheets/repository/filters.scss
index 5625f004d..c2cefe3c9 100644
--- a/app/assets/stylesheets/repository/filters.scss
+++ b/app/assets/stylesheets/repository/filters.scss
@@ -69,7 +69,7 @@
         @include font-h2;
       }
 
-      .clear-filters-btn {
+      .close {
         margin-left: auto;
       }
     }
@@ -120,6 +120,10 @@
       padding: 1em;
 
       .apply-button {
+        margin-left: 8px;
+      }
+
+      .clear-filters-btn {
         margin-left: auto;
       }
 
diff --git a/app/javascript/vue/repository_filter/container.vue b/app/javascript/vue/repository_filter/container.vue
index 5ccc8faaa..001c52d5e 100644
--- a/app/javascript/vue/repository_filter/container.vue
+++ b/app/javascript/vue/repository_filter/container.vue
@@ -19,10 +19,6 @@
           />
         </div>
       </div>
-      <button class="btn btn-light clear-filters-btn prevent-shrink" @click="clearFilters()">
-        <i class="fas fa-times-circle"></i>
-        {{ i18n.t('repositories.show.filters.clear') }}
-      </button>
     </div>
     <FiltersList 
       :filters.sync="filters" 
@@ -46,6 +42,9 @@
           />
         </div>
       </div>
+      <button class="btn btn-light clear-filters-btn prevent-shrink" @click="clearFilters()">
+        {{ i18n.t('repositories.show.filters.clear') }}
+      </button>
       <button @click="$emit('filters:apply')" class="btn btn-primary apply-button prevent-shrink">
         {{ i18n.t('repositories.show.filters.apply') }}
       </button>

From ceb193deee3b950ae24c124c330d70e38060bfcd Mon Sep 17 00:00:00 2001
From: sboursen-scinote <soufiane@scinote.net>
Date: Wed, 25 Jan 2023 13:49:40 +0100
Subject: [PATCH 03/10] Make the applyFilters button work again [SCI-7585]

---
 app/javascript/vue/repository_filter/container.vue  | 12 ++++++------
 .../vue/repository_filter/filters_list.vue          | 13 +++++++++----
 2 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/app/javascript/vue/repository_filter/container.vue b/app/javascript/vue/repository_filter/container.vue
index 001c52d5e..bce29ed67 100644
--- a/app/javascript/vue/repository_filter/container.vue
+++ b/app/javascript/vue/repository_filter/container.vue
@@ -21,11 +21,11 @@
       </div>
     </div>
     <FiltersList 
-      :filters.sync="filters" 
-      :my_modules.sync="my_modules" 
-      :key="filterListKey"
-      v-on:update-filter="updateFilter"
-      v-on:delete-filter="deleteFilter" />
+      :filters="filters" 
+      :my_modules="my_modules" 
+      :key="filterListKey ? 1 : 0"
+      @filter:update="updateFilter"
+      @filter:delete="deleteFilter" />
     <div class="footer">
       <div id="filtersColumnsDropdown" class="dropup filters-columns-dropdown" @click="toggleColumnsFilters">
         <button class="btn btn-secondary add-filter prevent-shrink" >
@@ -42,7 +42,7 @@
           />
         </div>
       </div>
-      <button class="btn btn-light clear-filters-btn prevent-shrink" @click="clearFilters()">
+      <button class="btn btn-light clear-filters-btn prevent-shrink" @click="clearFilters">
         {{ i18n.t('repositories.show.filters.clear') }}
       </button>
       <button @click="$emit('filters:apply')" class="btn btn-primary apply-button prevent-shrink">
diff --git a/app/javascript/vue/repository_filter/filters_list.vue b/app/javascript/vue/repository_filter/filters_list.vue
index 84ed05b50..99754b603 100644
--- a/app/javascript/vue/repository_filter/filters_list.vue
+++ b/app/javascript/vue/repository_filter/filters_list.vue
@@ -3,10 +3,10 @@
     <FilterElement
       v-for="(filter, index) in filters"
       :key="filter.id"
-      :filter="filters[index]"
-      :my_modules="my_modules"
-      @filter:update="$emit('update-filter', filter)"
-      @filter:delete="$emit('delete-filter', index)"
+      :filter.sync="filters[index]"
+      :my_modules.sync="my_modules"
+      @filter:update="updateFilter"
+      @filter:delete="$emit('filter:delete', index)"
     />
   </div>
 </template>
@@ -22,5 +22,10 @@
       my_modules: Array,
     },
     components: {FilterElement},
+    methods: {
+      updateFilter(value) {
+        this.$emit('filter:update', value)
+      }
+    }
   }
 </script>

From ef7395b0cd0e86312107830c03c77be99bf61627 Mon Sep 17 00:00:00 2001
From: sboursen-scinote <soufiane@scinote.net>
Date: Thu, 26 Jan 2023 08:26:34 +0100
Subject: [PATCH 04/10] Adjust the size of the clear button on small screens
 [SCI-7585]

---
 app/assets/stylesheets/repository/filters.scss     | 7 +++++++
 app/javascript/vue/repository_filter/container.vue | 2 +-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/repository/filters.scss b/app/assets/stylesheets/repository/filters.scss
index c2cefe3c9..c1819ff52 100644
--- a/app/assets/stylesheets/repository/filters.scss
+++ b/app/assets/stylesheets/repository/filters.scss
@@ -275,6 +275,13 @@
           margin-left: 0;
           margin-top: .5em;
         }
+
+        .clear-filters-btn {
+          margin-left: 0;
+          margin-top: 0.5em;
+          padding-left: 38px;
+          padding-right: 38px;
+        }
       }
     }
   }
diff --git a/app/javascript/vue/repository_filter/container.vue b/app/javascript/vue/repository_filter/container.vue
index bce29ed67..5eca8482a 100644
--- a/app/javascript/vue/repository_filter/container.vue
+++ b/app/javascript/vue/repository_filter/container.vue
@@ -42,7 +42,7 @@
           />
         </div>
       </div>
-      <button class="btn btn-light clear-filters-btn prevent-shrink" @click="clearFilters">
+      <button class="btn btn-secondary clear-filters-btn prevent-shrink" @click="clearFilters">
         {{ i18n.t('repositories.show.filters.clear') }}
       </button>
       <button @click="$emit('filters:apply')" class="btn btn-primary apply-button prevent-shrink">

From adcb0e84f8e811a01a2339d523c6ea3341bef0ce Mon Sep 17 00:00:00 2001
From: sboursen-scinote <soufiane@scinote.net>
Date: Thu, 26 Jan 2023 08:41:33 +0100
Subject: [PATCH 05/10] Add close button [SCI-7585]

---
 app/assets/stylesheets/repository/filters.scss      | 2 +-
 app/javascript/packs/vue/repository_filter.js       | 3 +++
 app/javascript/vue/repository_filter/container.vue  | 3 +++
 app/views/repositories/_repository_filters.html.erb | 1 +
 4 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/repository/filters.scss b/app/assets/stylesheets/repository/filters.scss
index c1819ff52..89418de3a 100644
--- a/app/assets/stylesheets/repository/filters.scss
+++ b/app/assets/stylesheets/repository/filters.scss
@@ -278,7 +278,7 @@
 
         .clear-filters-btn {
           margin-left: 0;
-          margin-top: 0.5em;
+          margin-top: .5em;
           padding-left: 38px;
           padding-right: 38px;
         }
diff --git a/app/javascript/packs/vue/repository_filter.js b/app/javascript/packs/vue/repository_filter.js
index 732fcaf2a..a05fbaab3 100644
--- a/app/javascript/packs/vue/repository_filter.js
+++ b/app/javascript/packs/vue/repository_filter.js
@@ -131,6 +131,9 @@ window.initRepositoryFilter = () => {
       },
       updateCurrentFilterName(name) {
         this.filterName = name;
+      },
+      hideModal() {
+        $('#filtersDropdownButton').removeClass('open');
       }
     }
   });
diff --git a/app/javascript/vue/repository_filter/container.vue b/app/javascript/vue/repository_filter/container.vue
index 5eca8482a..0c435c438 100644
--- a/app/javascript/vue/repository_filter/container.vue
+++ b/app/javascript/vue/repository_filter/container.vue
@@ -19,6 +19,9 @@
           />
         </div>
       </div>
+      <button type="button" class="close" @click="$emit('hide-modal')" aria-label="<%= t('general.close') %>">
+        <span aria-hidden="true">&times;</span>
+      </button>
     </div>
     <FiltersList 
       :filters="filters" 
diff --git a/app/views/repositories/_repository_filters.html.erb b/app/views/repositories/_repository_filters.html.erb
index de1668c0f..e7068ba2f 100644
--- a/app/views/repositories/_repository_filters.html.erb
+++ b/app/views/repositories/_repository_filters.html.erb
@@ -33,6 +33,7 @@
           @filters:apply="applyFilters"
           @filters:clear="clearFilters"
           @filters:update="updateFilters"
+          @hide-modal="hideModal"
         />
       </div>
     </div>

From 15da0f2f33b001423f6352ddf92cee2bfbab619b Mon Sep 17 00:00:00 2001
From: sboursen-scinote <soufiane@scinote.net>
Date: Thu, 26 Jan 2023 08:47:55 +0100
Subject: [PATCH 06/10] Remove commented code and change the name of the hide
 filters method [SCI-7585]

---
 app/javascript/packs/vue/repository_filter.js         | 2 +-
 app/javascript/vue/repository_filter/container.vue    | 2 +-
 app/javascript/vue/repository_filter/filters_list.vue | 1 -
 app/views/repositories/_repository_filters.html.erb   | 2 +-
 4 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/app/javascript/packs/vue/repository_filter.js b/app/javascript/packs/vue/repository_filter.js
index a05fbaab3..8959fe7ed 100644
--- a/app/javascript/packs/vue/repository_filter.js
+++ b/app/javascript/packs/vue/repository_filter.js
@@ -132,7 +132,7 @@ window.initRepositoryFilter = () => {
       updateCurrentFilterName(name) {
         this.filterName = name;
       },
-      hideModal() {
+      hideDropdown() {
         $('#filtersDropdownButton').removeClass('open');
       }
     }
diff --git a/app/javascript/vue/repository_filter/container.vue b/app/javascript/vue/repository_filter/container.vue
index 0c435c438..d029d185b 100644
--- a/app/javascript/vue/repository_filter/container.vue
+++ b/app/javascript/vue/repository_filter/container.vue
@@ -19,7 +19,7 @@
           />
         </div>
       </div>
-      <button type="button" class="close" @click="$emit('hide-modal')" aria-label="<%= t('general.close') %>">
+      <button type="button" class="close" @click="$emit('hide-dropdown')" aria-label="<%= t('general.close') %>">
         <span aria-hidden="true">&times;</span>
       </button>
     </div>
diff --git a/app/javascript/vue/repository_filter/filters_list.vue b/app/javascript/vue/repository_filter/filters_list.vue
index 99754b603..1e760c3cb 100644
--- a/app/javascript/vue/repository_filter/filters_list.vue
+++ b/app/javascript/vue/repository_filter/filters_list.vue
@@ -12,7 +12,6 @@
 </template>
 
 <script>
-// @filter:delete="filters.splice(index, 1)"
   import FilterElement from 'vue/repository_filter/filter.vue'
 
     export default {
diff --git a/app/views/repositories/_repository_filters.html.erb b/app/views/repositories/_repository_filters.html.erb
index e7068ba2f..f85c8e167 100644
--- a/app/views/repositories/_repository_filters.html.erb
+++ b/app/views/repositories/_repository_filters.html.erb
@@ -33,7 +33,7 @@
           @filters:apply="applyFilters"
           @filters:clear="clearFilters"
           @filters:update="updateFilters"
-          @hide-modal="hideModal"
+          @hide-dropdown="hideDropdown"
         />
       </div>
     </div>

From b02889c8010de1cf63f395b5443aa0e3525e20f4 Mon Sep 17 00:00:00 2001
From: sboursen-scinote <soufiane@scinote.net>
Date: Thu, 26 Jan 2023 09:03:08 +0100
Subject: [PATCH 07/10] Fix the behavior of the clear button [SCI-7585]

---
 app/javascript/packs/vue/repository_filter.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/app/javascript/packs/vue/repository_filter.js b/app/javascript/packs/vue/repository_filter.js
index 8959fe7ed..2bd042eae 100644
--- a/app/javascript/packs/vue/repository_filter.js
+++ b/app/javascript/packs/vue/repository_filter.js
@@ -2,6 +2,7 @@
 
 import TurbolinksAdapter from 'vue-turbolinks';
 import Vue from 'vue/dist/vue.esm';
+import { flattenMessages } from '../../src/config/locales/utils';
 import FilterContainer from '../../vue/repository_filter/container.vue';
 
 Vue.use(TurbolinksAdapter);
@@ -120,6 +121,9 @@ window.initRepositoryFilter = () => {
         this.reloadDataTable();
       },
       clearFilters() {
+        this.filters.forEach(filter => {
+          filter.data.parameters = {}
+        })
         this.filterName = null;
         this.dataTableElement.removeAttr('data-repository-filter-json');
         $('#modalSaveRepositoryTableFilter').data('repositoryTableFilterId', null);

From 95b339f75902d64a6b34a11a042477c353031a73 Mon Sep 17 00:00:00 2001
From: sboursen-scinote <soufiane@scinote.net>
Date: Thu, 26 Jan 2023 09:12:31 +0100
Subject: [PATCH 08/10] Fix Hound related issue [SCI-7585]

---
 app/javascript/packs/vue/repository_filter.js      | 5 ++---
 app/javascript/vue/repository_filter/container.vue | 2 +-
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/app/javascript/packs/vue/repository_filter.js b/app/javascript/packs/vue/repository_filter.js
index 2bd042eae..af96afc02 100644
--- a/app/javascript/packs/vue/repository_filter.js
+++ b/app/javascript/packs/vue/repository_filter.js
@@ -2,7 +2,6 @@
 
 import TurbolinksAdapter from 'vue-turbolinks';
 import Vue from 'vue/dist/vue.esm';
-import { flattenMessages } from '../../src/config/locales/utils';
 import FilterContainer from '../../vue/repository_filter/container.vue';
 
 Vue.use(TurbolinksAdapter);
@@ -122,8 +121,8 @@ window.initRepositoryFilter = () => {
       },
       clearFilters() {
         this.filters.forEach(filter => {
-          filter.data.parameters = {}
-        })
+          filter.data.parameters = {};
+        });
         this.filterName = null;
         this.dataTableElement.removeAttr('data-repository-filter-json');
         $('#modalSaveRepositoryTableFilter').data('repositoryTableFilterId', null);
diff --git a/app/javascript/vue/repository_filter/container.vue b/app/javascript/vue/repository_filter/container.vue
index d029d185b..a08734f42 100644
--- a/app/javascript/vue/repository_filter/container.vue
+++ b/app/javascript/vue/repository_filter/container.vue
@@ -91,8 +91,8 @@
         this.$emit("filters:update", this.filters);
       },
       clearFilters() {
-        this.filterListKey = !this.filterListKey;
         this.$emit('filters:clear');
+        this.filterListKey = !this.filterListKey;
       },
       deleteFilter(index) {
         this.filters.splice(index, 1);

From 36cc68f94a51839e5a5220407a0e235e447955f2 Mon Sep 17 00:00:00 2001
From: sboursen-scinote <soufiane@scinote.net>
Date: Thu, 26 Jan 2023 09:20:20 +0100
Subject: [PATCH 09/10] Fix Hound related issue [SCI-7585]

---
 app/javascript/packs/vue/repository_filter.js | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/app/javascript/packs/vue/repository_filter.js b/app/javascript/packs/vue/repository_filter.js
index af96afc02..508d8bf58 100644
--- a/app/javascript/packs/vue/repository_filter.js
+++ b/app/javascript/packs/vue/repository_filter.js
@@ -120,9 +120,12 @@ window.initRepositoryFilter = () => {
         this.reloadDataTable();
       },
       clearFilters() {
-        this.filters.forEach(filter => {
-          filter.data.parameters = {};
-        });
+        this.filters = this.filters
+                           .map(filter => {
+                            const newFilter = {...filter};
+                            newFilter.data["parameters"] = {};
+                            return newFilter;
+                           });
         this.filterName = null;
         this.dataTableElement.removeAttr('data-repository-filter-json');
         $('#modalSaveRepositoryTableFilter').data('repositoryTableFilterId', null);

From 2e037b69ffb3bcae9d68e235922b61099481f0a1 Mon Sep 17 00:00:00 2001
From: sboursen-scinote <soufiane@scinote.net>
Date: Thu, 26 Jan 2023 09:23:37 +0100
Subject: [PATCH 10/10] Fix Hound related issue [SCI-7585]

---
 app/javascript/packs/vue/repository_filter.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/app/javascript/packs/vue/repository_filter.js b/app/javascript/packs/vue/repository_filter.js
index 508d8bf58..f5a1ae420 100644
--- a/app/javascript/packs/vue/repository_filter.js
+++ b/app/javascript/packs/vue/repository_filter.js
@@ -121,11 +121,11 @@ window.initRepositoryFilter = () => {
       },
       clearFilters() {
         this.filters = this.filters
-                           .map(filter => {
-                            const newFilter = {...filter};
-                            newFilter.data["parameters"] = {};
-                            return newFilter;
-                           });
+          .map(filter => {
+            const newFilter = { ...filter };
+            newFilter.data["parameters"] = {};
+            return newFilter;
+          });
         this.filterName = null;
         this.dataTableElement.removeAttr('data-repository-filter-json');
         $('#modalSaveRepositoryTableFilter').data('repositoryTableFilterId', null);