Fix integration gateway filters not being fettched in rare cases

client/web/admin/src/components/Apigw/CFiltersStepper.vue

@@ -41,6 +41,7 @@
               :filters="getSelectedFiltersByStep"
               :selected-row="step.selectedRow"
               :step="index"
+              :fetching="fetching"
               @filterSelect="onFilterSelect"
               @removeFilter="onRemoveFilter"
               @sortFilters="onSortFilters"
@@ -83,6 +84,10 @@ export default {
     CFiltersDropdown,
   },
   props: {
+    fetching: {
+      type: Boolean,
+      value: false,
+    },
     processing: {
       type: Boolean,
       value: false,

client/web/admin/src/components/Apigw/CFiltersTable.vue

@@ -13,6 +13,7 @@
       </b-thead>
 
       <draggable
+        v-if="!fetching"
         v-model="sortableFilters"
         tag="b-tbody"
       >
@@ -42,13 +43,23 @@
         </b-tr>
       </draggable>
     </b-table-simple>
-    <h6
-      v-if="!sortableFilters.length"
-      data-test-id="no-filters"
-      class="d-flex justify-content-center align-items-center mb-3"
+
+    <div
+      class="d-flex flex-column align-items-center justify-content-center h-100 overflow-hidden"
     >
-      {{ $t('filters.list.noFilters') }}
-    </h6>
+      <b-spinner
+        v-if="fetching"
+        class="my-4"
+      />
+
+      <p
+        v-else-if="!sortableFilters.length"
+        data-test-id="no-filters"
+        class="my-4"
+      >
+        {{ $t('filters.list.noFilters') }}
+      </p>
+    </div>
   </div>
 </template>
 
@@ -67,6 +78,10 @@ export default {
       type: Number,
       default: () => 0,
     },
+    fetching: {
+      type: Boolean,
+      value: false,
+    },
   },
 
   data () {

client/web/admin/src/views/System/Apigw/Editor.vue

@@ -36,6 +36,7 @@
     <c-filters-stepper
       v-if="routeID"
       ref="stepper"
+      :fetching="stepper.fetching"
       :processing="stepper.processing"
       :success="stepper.success"
       :filters.sync="filters"
@@ -91,6 +92,7 @@ export default {
         success: false,
       },
       stepper: {
+        fetching: false,
         processing: false,
         success: false,
       },
@@ -262,24 +264,29 @@ export default {
 
     fetchFilters () {
       this.incLoader()
+      this.stepper.fetching = true
+
       this.$SystemAPI.apigwFilterList({ routeID: this.routeID })
         .then(({ set = [] }) => {
-          this.setRouteFilters(set)
+          return this.setRouteFilters(set)
         })
         .catch(this.toastErrorHandler(this.$t('notification:gateway.filter.fetch.error')))
         .finally(() => {
           this.decLoader()
+          this.stepper.fetching = false
         })
     },
 
     setRouteFilters (routeFilters = []) {
-      this.filters = (routeFilters || []).map(filter => {
-        const f = { ...this.availableFilters.find((af) => af.ref === filter.ref) }
-        f.params = this.decodeParams(f, { ...filter.params })
-        f.weight = parseInt(filter.weight)
-        f.filterID = filter.filterID
-        f.enabled = !!filter.enabled
-        return { ...f }
+      return this.fetchAllAvailableFilters().then(() => {
+        this.filters = (routeFilters || []).map(filter => {
+          const f = { ...this.availableFilters.find((af) => af.ref === filter.ref) }
+          f.params = this.decodeParams(f, { ...filter.params })
+          f.weight = parseInt(filter.weight)
+          f.filterID = filter.filterID
+          f.enabled = !!filter.enabled
+          return { ...f }
+        })
       })
     },
 
@@ -303,7 +310,8 @@ export default {
 
     fetchAllAvailableFilters () {
       this.incLoader()
-      this.$SystemAPI.apigwFilterDefFilter()
+
+      return this.$SystemAPI.apigwFilterDefFilter()
         .then((api) => {
           this.availableFilters = api.map((f) => {
             return { name, ...f, ref: f.name, enabled: true, options: { checked: false } }