From 2c8369a77e783addd85d5192e91b5d364971e5d5 Mon Sep 17 00:00:00 2001
From: Herbert Vicente Cotta Julio <hvcotta@gmail.com>
Date: Mon, 18 Nov 2024 16:53:00 -0300
Subject: [PATCH 1/4] [NO-ISSUE] fix: enhance UI, update CSS styles, and
 refactor rules engine and firewall services (#1933)

---
 src/layout/app-sidebar.vue                    |   5 +-
 .../components/navbar/button-copilot.vue      |  22 ++-
 src/modules/azion-ai-chat/assets/markdown.css |   6 +-
 src/modules/azion-ai-chat/layout/index.vue    |   2 +-
 src/modules/azion-ai-chat/layout/view.vue     |  25 +--
 .../azion-ai-chat/services/make-url.js        |   4 +-
 src/router/hooks/guards/accountGuard.js       |   5 +-
 .../routes/edge-application-routes/index.js   |   4 +-
 .../routes/edge-firewall-routes/index.js      |   3 +-
 .../index.js                                  |   4 +-
 .../reorder-rules-engine-service.js           |  52 ------
 .../v4/index.js                               |  14 +-
 .../v4/list-rules-engine-all-service.js       |  79 ++++++++
 .../v4/list-rules-engine-service.js           |  75 --------
 .../v4/reorder-rules-engine-service.js        |  58 ++++++
 .../v4/index.js                               |   5 +-
 ...list-edge-firewall-rules-engine-service.js |  84 +++++----
 ...ice.js => reorder-rules-engine-service.js} |  56 +-----
 .../with-fetch-ordering-and-pagination.vue    | 120 ++++++++-----
 .../mfa-authenticate-block/index.vue          |   2 +-
 src/templates/mfa-setup-block/index.vue       |   2 +-
 .../reorder-rules-engine-service.test.js      | 113 ------------
 .../v4/list-rules-engine-service.test.js      |  53 +++---
 ...edge-firewall-rules-engine-service.test.js |  37 ----
 ...edge-firewall-rules-engine-service.test.js |  66 +++----
 ...edge-firewall-rules-engine-service.test.js | 170 ------------------
 .../EdgeApplicationsRulesEngine/ListView.vue  | 110 +++++++++---
 .../EdgeFirewallRulesEngine/ListView.vue      | 126 ++++++++++---
 28 files changed, 574 insertions(+), 728 deletions(-)
 delete mode 100644 src/services/edge-application-rules-engine-services/reorder-rules-engine-service.js
 create mode 100644 src/services/edge-application-rules-engine-services/v4/list-rules-engine-all-service.js
 delete mode 100644 src/services/edge-application-rules-engine-services/v4/list-rules-engine-service.js
 create mode 100644 src/services/edge-application-rules-engine-services/v4/reorder-rules-engine-service.js
 rename src/services/edge-firewall-rules-engine-services/v4/{reorder-edge-firewall-rules-engine-service.js => reorder-rules-engine-service.js} (53%)
 delete mode 100644 src/tests/services/edge-application-rules-engine-services/reorder-rules-engine-service.test.js
 delete mode 100644 src/tests/services/edge-firewall-rules-engine-services/reorder-edge-firewall-rules-engine-service.test.js
 delete mode 100644 src/tests/services/edge-firewall-rules-engine-services/v4/reorder-edge-firewall-rules-engine-service.test.js

diff --git a/src/layout/app-sidebar.vue b/src/layout/app-sidebar.vue
index 676894452..633633f29 100644
--- a/src/layout/app-sidebar.vue
+++ b/src/layout/app-sidebar.vue
@@ -32,7 +32,10 @@
     }"
   >
     <template #container>
-      <component :is="activeComponent.component" />
+      <component
+        :is="activeComponent.component"
+        class="h-full"
+      />
     </template>
   </Sidebar>
 </template>
diff --git a/src/layout/components/navbar/button-copilot.vue b/src/layout/components/navbar/button-copilot.vue
index f4d89547c..916764e29 100644
--- a/src/layout/components/navbar/button-copilot.vue
+++ b/src/layout/components/navbar/button-copilot.vue
@@ -1,23 +1,21 @@
 <template>
   <PrimeButton
     v-if="showButton"
-    :label="currentLabel"
     @click="toggleSidebarComponent('copilot')"
-    class="special-button text-white border-header bg-header hover:bg-header-button-hover"
     :pt="{
       root: { class: 'max-md:w-[2rem] max-md:h-[2rem] justify-content-center' },
-      label: { class: 'max-md:hidden' },
-      icon: { class: 'max-md:m-0 text-white' }
+      label: { class: 'max-md:hidden' }
     }"
     :class="buttonClasses"
-    icon="ai ai-ask-azion"
     size="small"
-    outlined
+    class="special-button"
     v-tooltip.bottom="{ value: 'Azion Copilot', showDelay: 200 }"
   >
-    <div class="special-button-content">
-      <i class="ai ai-ask-azion"> </i>
-      {{ currentLabel }}
+    <div
+      class="special-button-content shadow !shadow-[#ffffff50] w-8 md:w-auto justify-center md:justify-start"
+      :class="aiChatIsOpen"
+    >
+      <i class="ai ai-ask-azion"></i>{{ currentLabel }}
     </div>
   </PrimeButton>
 </template>
@@ -46,6 +44,12 @@
     return route.name !== 'copilot'
   })
 
+  const aiChatIsOpen = computed(() => {
+    return isSidebarActive.value && activeComponentKey.value === 'copilot'
+      ? 'bg-header/40'
+      : 'bg-header/80 hover:bg-[#00000025]'
+  })
+
   const buttonClasses = computed(() => {
     return isSidebarActive.value && activeComponentKey.value === 'copilot'
       ? 'bg-header-button-enabled'
diff --git a/src/modules/azion-ai-chat/assets/markdown.css b/src/modules/azion-ai-chat/assets/markdown.css
index fcdc0313c..9ae59f8d8 100644
--- a/src/modules/azion-ai-chat/assets/markdown.css
+++ b/src/modules/azion-ai-chat/assets/markdown.css
@@ -1,7 +1,7 @@
 .markdown {
   max-width: unset;
   font-size: 16px;
-  color: #333;
+  color: var(--text-color);
 }
 
 .markdown pre {
@@ -19,11 +19,11 @@
   line-height: 1.5em;
 }
 
-*::-webkit-scrollbar {
+.markdown *::-webkit-scrollbar {
   width: 8px;
 }
 
-*::-webkit-scrollbar-thumb {
+.markdown *::-webkit-scrollbar-thumb {
   background-color: #7a7a7a;
   border-radius: 4px;
 }
diff --git a/src/modules/azion-ai-chat/layout/index.vue b/src/modules/azion-ai-chat/layout/index.vue
index ea9c148ea..20e4fe8f9 100644
--- a/src/modules/azion-ai-chat/layout/index.vue
+++ b/src/modules/azion-ai-chat/layout/index.vue
@@ -28,7 +28,7 @@
     >
       <Welcome />
 
-      <div class="w-[548px] justify-center items-start gap-3 inline-flex">
+      <div class="justify-center items-start gap-3 inline-flex">
         <Suggestions />
       </div>
 
diff --git a/src/modules/azion-ai-chat/layout/view.vue b/src/modules/azion-ai-chat/layout/view.vue
index 31465a706..afbbccecd 100644
--- a/src/modules/azion-ai-chat/layout/view.vue
+++ b/src/modules/azion-ai-chat/layout/view.vue
@@ -1,6 +1,20 @@
 <template>
   <div class="min-h-[calc(100vh-15.5rem)] max-h-[calc(100vh-15.5rem)] pb-8 px-8 h-full">
     <div class="flex flex-col border h-full rounded-md surface-border p-3">
+      <div
+        class="sticky w-full flex justify-end px-3 top-0 surface-section"
+        v-if="getStartConversation"
+      >
+        <PrimeButton
+          icon="pi pi-eraser"
+          outlined
+          label="New chat"
+          class="surface-border"
+          aria-label="New chat"
+          v-tooltip.bottom="'New chat'"
+          @click="clearChat"
+        />
+      </div>
       <div
         class="overflow-hidden overflow-y-auto h-full custom-scroll"
         ref="chatContainer"
@@ -14,17 +28,6 @@
         </template>
         <template v-else>
           <div class="h-full px-3">
-            <div class="sticky w-full flex justify-end px-3 top-0 surface-section">
-              <PrimeButton
-                icon="pi pi-eraser"
-                outlined
-                label="New chat"
-                class="surface-border"
-                aria-label="New chat"
-                v-tooltip.bottom="'New chat'"
-                @click="clearChat"
-              />
-            </div>
             <ChatMessages class="pb-6" />
           </div>
         </template>
diff --git a/src/modules/azion-ai-chat/services/make-url.js b/src/modules/azion-ai-chat/services/make-url.js
index 62c950f63..b7855d9a5 100644
--- a/src/modules/azion-ai-chat/services/make-url.js
+++ b/src/modules/azion-ai-chat/services/make-url.js
@@ -1,6 +1,6 @@
 export const makeBaseUrl = () => {
   const { VITE_ENVIRONMENT, MODE } = import.meta.env
-  const environmentPrefix =
-    VITE_ENVIRONMENT === 'production' || MODE === 'production' ? '' : 'stage-'
+  const environment = VITE_ENVIRONMENT || MODE
+  const environmentPrefix = environment === 'production' ? '' : 'stage-'
   return `https://${environmentPrefix}ai.azion.com/copilot/chat/completions`
 }
diff --git a/src/router/hooks/guards/accountGuard.js b/src/router/hooks/guards/accountGuard.js
index f200ce5aa..85148fb33 100644
--- a/src/router/hooks/guards/accountGuard.js
+++ b/src/router/hooks/guards/accountGuard.js
@@ -26,13 +26,14 @@ export async function accountGuard({ to, accountStore, tracker, loadContractServ
       accountInfo.user_id = userInfo.results.id
       accountInfo.colorTheme = accountStore.theme
       accountInfo.jobRole = accountJobRole.jobRole
+      accountInfo.isDeveloperSupportPlan = true
 
       if (accountInfo.client_id) {
         const { isDeveloperSupportPlan, yourServicePlan } = await loadContractServicePlan({
           clientId: accountInfo.client_id
         })
-        accountStore.isDeveloperSupportPlan = isDeveloperSupportPlan
-        accountStore.yourServicePlan = yourServicePlan
+        accountInfo.isDeveloperSupportPlan = isDeveloperSupportPlan
+        accountInfo.yourServicePlan = yourServicePlan
       }
 
       accountStore.setAccountData(accountInfo)
diff --git a/src/router/routes/edge-application-routes/index.js b/src/router/routes/edge-application-routes/index.js
index 0cecf9af3..9bfb5abd6 100644
--- a/src/router/routes/edge-application-routes/index.js
+++ b/src/router/routes/edge-application-routes/index.js
@@ -105,12 +105,12 @@ export const edgeApplicationRoutes = {
           editErrorResponsesService: ErrorResponsesService.editErrorResponsesService
         },
         rulesEngineServices: {
-          listRulesEngineService: RulesEngineServiceV4.listRulesEngineService,
+          listRulesEngineService: RulesEngineServiceV4.listRulesEngineServiceAll,
           deleteRulesEngineService: RulesEngineService.deleteRulesEngineService,
           editRulesEngineService: RulesEngineService.editRulesEngineService,
           createRulesEngineService: RulesEngineService.createRulesEngineService,
           loadRulesEngineService: RulesEngineService.loadRulesEngineService,
-          reorderRulesEngine: RulesEngineService.reorderRulesEngine,
+          reorderRulesEngine: RulesEngineServiceV4.reorderRulesEngine,
           documentationService: Helpers.documentationCatalog.edgeApplicationRulesEngine,
           listOriginsService: OriginsService.listOriginsService,
           listCacheSettingsService: CacheSettingsServices.listCacheSettingsService,
diff --git a/src/router/routes/edge-firewall-routes/index.js b/src/router/routes/edge-firewall-routes/index.js
index c7bdd296f..4ef087f06 100644
--- a/src/router/routes/edge-firewall-routes/index.js
+++ b/src/router/routes/edge-firewall-routes/index.js
@@ -91,8 +91,7 @@ export const edgeFirewallRoutes = {
           listFunctionsService: EdgeFirewallFunctionsServices.listFunctionsService,
           listWafRulesService: WafRulesServices.listWafRulesService,
           documentationService: Helpers.documentationCatalog.edgeFirewallRulesEngine,
-          reorderEdgeFirewallRulesEngine:
-            EdgeFirewallRulesEngineServicesV4.reorderEdgeFirewallRulesEngine
+          reorderRulesEngine: EdgeFirewallRulesEngineServicesV4.reorderRulesEngine
         }
       },
       meta: {
diff --git a/src/services/edge-application-rules-engine-services/index.js b/src/services/edge-application-rules-engine-services/index.js
index e88153603..929c0220e 100644
--- a/src/services/edge-application-rules-engine-services/index.js
+++ b/src/services/edge-application-rules-engine-services/index.js
@@ -3,13 +3,11 @@ import { deleteRulesEngineService } from './delete-rules-engine-service'
 import { editRulesEngineService } from './edit-rules-engine-service'
 import { createRulesEngineService } from './create-rules-engine-service'
 import { loadRulesEngineService } from './load-rules-engine-service'
-import { reorderRulesEngine } from './reorder-rules-engine-service'
 
 export {
   listRulesEngineService,
   createRulesEngineService,
   editRulesEngineService,
   loadRulesEngineService,
-  deleteRulesEngineService,
-  reorderRulesEngine
+  deleteRulesEngineService
 }
diff --git a/src/services/edge-application-rules-engine-services/reorder-rules-engine-service.js b/src/services/edge-application-rules-engine-services/reorder-rules-engine-service.js
deleted file mode 100644
index 731331ec4..000000000
--- a/src/services/edge-application-rules-engine-services/reorder-rules-engine-service.js
+++ /dev/null
@@ -1,52 +0,0 @@
-import * as RulesEngineService from './edit-rules-engine-service'
-import { CannotReorderDefaultRule } from '@/services/axios/errors'
-
-/**
- * Reorders the rules engine.
- * @param {Array} tableData - The table data containing the rules.
- * @param {string} edgeApplicationId - The ID of the edge application.
- * @throws {CannotReorderDefaultRule} If a default rule is found.
- */
-export const reorderRulesEngine = async (tableData, edgeApplicationId) => {
-  const hasDefault = checkDefault(tableData)
-  if (hasDefault) {
-    throw new CannotReorderDefaultRule().message
-  }
-
-  for (let index = 0; index < tableData.length; index++) {
-    await reorderRule(tableData[index], edgeApplicationId)
-  }
-}
-
-/**
- * Reorders a single rule.
- * @param {Object} rule - The rule to be reordered.
- * @param {string} edgeApplicationId - The ID of the edge application.
- */
-const reorderRule = async (rule, edgeApplicationId) => {
-  const newOrder = parseInt(rule.newIndex) + 1
-  await editRuleOrder(rule, newOrder, edgeApplicationId)
-}
-
-/**
- * Checks if a default rule exists in the table data.
- * @param {Array} tableData - The table data containing the rules.
- * @returns {boolean} True if a default rule exists, false otherwise.
- */
-const checkDefault = (tableData) => {
-  return tableData.some((rule) => rule.phase.content === 'Default')
-}
-
-/**
- * Edits the order of a rule.
- * @param {Object} rule - The rule to be reordered.
- * @param {number} newOrder - The new order of the rule.
- * @param {string} edgeApplicationId - The ID of the edge application.
- */
-const editRuleOrder = async (rule, newOrder, edgeApplicationId) => {
-  await RulesEngineService.editRulesEngineService({
-    id: edgeApplicationId,
-    payload: { ...rule, order: newOrder },
-    reorder: true
-  })
-}
diff --git a/src/services/edge-application-rules-engine-services/v4/index.js b/src/services/edge-application-rules-engine-services/v4/index.js
index 1d2982f42..430096407 100644
--- a/src/services/edge-application-rules-engine-services/v4/index.js
+++ b/src/services/edge-application-rules-engine-services/v4/index.js
@@ -1,11 +1,3 @@
-import { listRulesEngineService } from './list-rules-engine-service'
-
-/**
- * @typedef {Object} ExportedServicesType - The type of the exported services
- * @property {typeof listRulesEngineService} listRulesEngineService - The listRulesEngineService reference
- */
-
-/**
- * @type {ExportedServicesType}
- */
-export { listRulesEngineService }
+import { listRulesEngineServiceAll } from './list-rules-engine-all-service'
+import { reorderRulesEngine } from './reorder-rules-engine-service'
+export { listRulesEngineServiceAll, reorderRulesEngine }
diff --git a/src/services/edge-application-rules-engine-services/v4/list-rules-engine-all-service.js b/src/services/edge-application-rules-engine-services/v4/list-rules-engine-all-service.js
new file mode 100644
index 000000000..fcd75c28c
--- /dev/null
+++ b/src/services/edge-application-rules-engine-services/v4/list-rules-engine-all-service.js
@@ -0,0 +1,79 @@
+import { AxiosHttpClientAdapter, parseHttpResponse } from '@/services/axios/AxiosHttpClientAdapter'
+import { makeEdgeApplicationV4BaseUrl } from '@/services/edge-application-services/v4/make-edge-application-v4-base-url'
+import { makeListServiceQueryParams } from '@/helpers/make-list-service-query-params'
+import { capitalizeFirstLetter } from '@/helpers'
+
+export const listRulesEngineServiceAll = async ({ id, fields = '', search = '' }) => {
+  let allData = []
+  let currentPage = 1
+  let httpResponse = null
+  let hasMoreData = true
+
+  while (hasMoreData) {
+    const searchParams = makeListServiceQueryParams({
+      fields,
+      ordering: '',
+      page: currentPage,
+      pageSize: 100,
+      search
+    })
+
+    httpResponse = await AxiosHttpClientAdapter.request({
+      url: `${makeEdgeApplicationV4BaseUrl()}/${id}/rules?${searchParams.toString()}`,
+      method: 'GET'
+    })
+
+    const { count, results } = httpResponse.body
+    allData = [...allData, ...results]
+
+    hasMoreData = !(allData.length >= count)
+
+    currentPage++
+  }
+
+  const allDataAdapt = adapt(allData, httpResponse.statusCode)
+
+  return parseHttpResponse(allDataAdapt)
+}
+
+const STATUS_AS_TAG = {
+  true: {
+    content: 'Active',
+    severity: 'success'
+  },
+  false: {
+    content: 'Inactive',
+    severity: 'danger'
+  }
+}
+
+const phaseAsTag = (phase) => {
+  return {
+    content: capitalizeFirstLetter(phase),
+    outlined: true,
+    severity: 'info'
+  }
+}
+
+const adapt = (results, statusCode) => {
+  const parsedRulesEngine = results.map((rules) => {
+    return {
+      id: rules.id,
+      name: rules.name,
+      phase: phaseAsTag(rules.phase),
+      behaviors: rules.behaviors,
+      criteria: rules.criteria,
+      status: STATUS_AS_TAG[rules.active],
+      order: rules.order,
+      description: rules.description || '-'
+    }
+  })
+
+  const count = results.length
+
+  return {
+    count,
+    body: parsedRulesEngine,
+    statusCode
+  }
+}
diff --git a/src/services/edge-application-rules-engine-services/v4/list-rules-engine-service.js b/src/services/edge-application-rules-engine-services/v4/list-rules-engine-service.js
deleted file mode 100644
index de0ff85d6..000000000
--- a/src/services/edge-application-rules-engine-services/v4/list-rules-engine-service.js
+++ /dev/null
@@ -1,75 +0,0 @@
-import { AxiosHttpClientAdapter, parseHttpResponse } from '@/services/axios/AxiosHttpClientAdapter'
-import { makeEdgeApplicationV4BaseUrl } from '@/services/edge-application-services/v4/make-edge-application-v4-base-url'
-import { makeListServiceQueryParams } from '@/helpers/make-list-service-query-params'
-import { capitalizeFirstLetter } from '@/helpers'
-
-export const listRulesEngineService = async ({
-  id,
-  fields = '',
-  phase = 'request',
-  search = '',
-  ordering = '',
-  page = 1,
-  pageSize = 10
-}) => {
-  const searchParams = makeListServiceQueryParams({ fields, ordering, page, pageSize, search })
-  let httpResponse = await AxiosHttpClientAdapter.request({
-    url: `${makeEdgeApplicationV4BaseUrl()}/${id}/rules?phase=${phase}&${searchParams.toString()}`,
-    method: 'GET'
-  })
-
-  httpResponse = adapt(httpResponse)
-
-  return parseHttpResponse(httpResponse)
-}
-
-const STATUS_AS_TAG = {
-  true: {
-    content: 'Active',
-    severity: 'success'
-  },
-  false: {
-    content: 'Inactive',
-    severity: 'danger'
-  }
-}
-const phaseAsTag = (phase) => {
-  return {
-    content: capitalizeFirstLetter(phase),
-    outlined: true,
-    severity: 'info'
-  }
-}
-
-const adapt = (httpResponse) => {
-  const parsedRulesEgine = httpResponse.body.results?.map((rules) => {
-    return {
-      id: rules.id,
-      name: rules.name,
-      phase: phaseAsTag(rules.phase),
-      behaviors: rules.behaviors,
-      criteria: rules.criteria,
-      status: STATUS_AS_TAG[rules.active],
-      order: rules.order,
-      description: rules.description || '-'
-    }
-  })
-
-  const keepSameOrder = 0
-  const putItAfter = 1
-  const putIfBefore = -1
-
-  const sortParsedRulesEgine = parsedRulesEgine.sort((currentItem, nextItem) => {
-    if (currentItem.name === 'Default Rule') return putIfBefore
-    if (nextItem.name === 'Default Rule') return putItAfter
-    return keepSameOrder
-  })
-
-  const count = httpResponse.body?.count ?? 0
-
-  return {
-    count,
-    body: sortParsedRulesEgine,
-    statusCode: httpResponse.statusCode
-  }
-}
diff --git a/src/services/edge-application-rules-engine-services/v4/reorder-rules-engine-service.js b/src/services/edge-application-rules-engine-services/v4/reorder-rules-engine-service.js
new file mode 100644
index 000000000..216cad5dc
--- /dev/null
+++ b/src/services/edge-application-rules-engine-services/v4/reorder-rules-engine-service.js
@@ -0,0 +1,58 @@
+import { AxiosHttpClientAdapter } from '@/services/axios/AxiosHttpClientAdapter'
+import { makeEdgeApplicationV4BaseUrl } from '@/services/edge-application-services/v4/make-edge-application-v4-base-url'
+import * as Errors from '@/services/axios/errors'
+
+export const reorderRulesEngine = async (newOrderData, edgeApplicationId) => {
+  let httpResponse = await AxiosHttpClientAdapter.request({
+    url: `${makeEdgeApplicationV4BaseUrl()}/${edgeApplicationId}/rules/order`,
+    method: 'PUT',
+    body: adapt(newOrderData)
+  })
+
+  return parseHttpResponse(httpResponse)
+}
+
+const adapt = (newOrderData) => {
+  const listNewOrderDataIds = newOrderData.map((data) => data.id)
+
+  return { order: listNewOrderDataIds }
+}
+
+/**
+ * @param {Object} body - The response body.
+ * @returns {string} The result message based on the status code.
+ */
+const extractApiError = (body) => {
+  for (const keyError of Object.keys(body)) {
+    const errorValue = Array.isArray(body[keyError]) ? body[keyError][0] : body[keyError]
+    if (typeof errorValue === 'string') return errorValue
+    if (typeof errorValue === 'object' && errorValue.message) return errorValue.message[0]
+  }
+  return ''
+}
+
+/**
+ * @param {Object} httpResponse - The HTTP response object.
+ * @param {String} httpResponse.statusCode - The HTTP status code.
+ * @returns {string} The result message based on the status code.
+ * @throws {Error} If there is an error with the response.
+ */
+const parseHttpResponse = (httpResponse) => {
+  switch (httpResponse.statusCode) {
+    case 202:
+      return 'Rules Engine successfully ordered'
+    case 400:
+      const apiError = extractApiError(httpResponse.body)
+      throw new Error(apiError).message
+    case 401:
+      throw new Errors.InvalidApiTokenError().message
+    case 403:
+      throw new Errors.PermissionError().message
+    case 404:
+      throw new Errors.NotFoundError().message
+    case 500:
+      throw new Errors.InternalServerError().message
+    default:
+      throw new Errors.UnexpectedError().message
+  }
+}
diff --git a/src/services/edge-firewall-rules-engine-services/v4/index.js b/src/services/edge-firewall-rules-engine-services/v4/index.js
index 536e8a54b..7af05ff36 100644
--- a/src/services/edge-firewall-rules-engine-services/v4/index.js
+++ b/src/services/edge-firewall-rules-engine-services/v4/index.js
@@ -1,5 +1,6 @@
 import { listEdgeFirewallRulesEngineService } from './list-edge-firewall-rules-engine-service'
-import { reorderEdgeFirewallRulesEngine } from './reorder-edge-firewall-rules-engine-service'
+import { reorderRulesEngine } from './reorder-rules-engine-service'
+
 /**
  * @typedef {Object} ExportedServicesType - The type of the exported services
  * @property {typeof listEdgeFirewallRulesEngineService} listEdgeFirewallRulesEngineService - The listEdgeFirewallRulesEngineService reference
@@ -8,4 +9,4 @@ import { reorderEdgeFirewallRulesEngine } from './reorder-edge-firewall-rules-en
 /**
  * @type {ExportedServicesType}
  */
-export { listEdgeFirewallRulesEngineService, reorderEdgeFirewallRulesEngine }
+export { listEdgeFirewallRulesEngineService, reorderRulesEngine }
diff --git a/src/services/edge-firewall-rules-engine-services/v4/list-edge-firewall-rules-engine-service.js b/src/services/edge-firewall-rules-engine-services/v4/list-edge-firewall-rules-engine-service.js
index 7db87a488..df3aba9d8 100644
--- a/src/services/edge-firewall-rules-engine-services/v4/list-edge-firewall-rules-engine-service.js
+++ b/src/services/edge-firewall-rules-engine-services/v4/list-edge-firewall-rules-engine-service.js
@@ -2,54 +2,68 @@ import { AxiosHttpClientAdapter, parseHttpResponse } from '@/services/axios/Axio
 import { makeEdgeFirewallBaseUrl } from '../../edge-firewall-services/v4/make-edge-firewall-base-url'
 import { makeListServiceQueryParams } from '@/helpers/make-list-service-query-params'
 import { formatExhibitionDate } from '@/helpers/convert-date'
-export const listEdgeFirewallRulesEngineService = async ({
-  edgeFirewallId,
-  fields = '',
-  search = '',
-  ordering = '',
-  page = 1,
-  pageSize = 10
-}) => {
-  const searchParams = makeListServiceQueryParams({ fields, ordering, page, pageSize, search })
-  let httpResponse = await AxiosHttpClientAdapter.request({
-    url: `${makeEdgeFirewallBaseUrl()}/${edgeFirewallId}/rules?${searchParams.toString()}`,
-    method: 'GET'
-  })
 
-  httpResponse = adapt(httpResponse)
+export const listEdgeFirewallRulesEngineService = async ({ id, fields = '', search = '' }) => {
+  let allData = []
+  let currentPage = 1
+  let httpResponse = null
+  let hasMoreData = true
+
+  while (hasMoreData) {
+    const searchParams = makeListServiceQueryParams({
+      fields,
+      ordering: '',
+      page: currentPage,
+      pageSize: 100,
+      search
+    })
+
+    httpResponse = await AxiosHttpClientAdapter.request({
+      url: `${makeEdgeFirewallBaseUrl()}/${id}/rules?${searchParams.toString()}`,
+      method: 'GET'
+    })
+
+    const { count, results } = httpResponse.body
+    allData = [...allData, ...results]
+
+    hasMoreData = !(allData.length >= count)
 
-  return parseHttpResponse(httpResponse)
+    currentPage++
+  }
+
+  const allDataAdapt = adapt(allData, httpResponse.statusCode)
+
+  return parseHttpResponse(allDataAdapt)
 }
 
-const parseStatus = (isActive) => {
-  return isActive
-    ? {
-        content: 'Active',
-        severity: 'success'
-      }
-    : {
-        content: 'Inactive',
-        severity: 'danger'
-      }
+const STATUS_AS_TAG = {
+  true: {
+    content: 'Active',
+    severity: 'success'
+  },
+  false: {
+    content: 'Inactive',
+    severity: 'danger'
+  }
 }
 
-const adapt = (httpResponse) => {
-  const parsedRulesEngine = httpResponse.body.results?.map((ruleEngine) => {
+const adapt = (results, statusCode) => {
+  const parsedRulesEngine = results.map((rules) => {
     return {
-      id: ruleEngine.id,
-      name: ruleEngine.name,
-      description: ruleEngine.description || '',
-      lastModified: formatExhibitionDate(ruleEngine.last_modified, 'long', 'short'),
-      lastEditor: ruleEngine.last_editor,
-      status: parseStatus(ruleEngine.is_active)
+      id: rules.id,
+      name: rules.name,
+      description: rules.description || '',
+      lastModified: formatExhibitionDate(rules.last_modified, 'long', 'short'),
+      lastEditor: rules.last_editor,
+      status: STATUS_AS_TAG[rules.is_active]
     }
   })
 
-  const count = httpResponse.body?.count ?? 0
+  const count = results.length
 
   return {
     count,
     body: parsedRulesEngine,
-    statusCode: httpResponse.statusCode
+    statusCode
   }
 }
diff --git a/src/services/edge-firewall-rules-engine-services/v4/reorder-edge-firewall-rules-engine-service.js b/src/services/edge-firewall-rules-engine-services/v4/reorder-rules-engine-service.js
similarity index 53%
rename from src/services/edge-firewall-rules-engine-services/v4/reorder-edge-firewall-rules-engine-service.js
rename to src/services/edge-firewall-rules-engine-services/v4/reorder-rules-engine-service.js
index 2d3279f61..3a78da6af 100644
--- a/src/services/edge-firewall-rules-engine-services/v4/reorder-edge-firewall-rules-engine-service.js
+++ b/src/services/edge-firewall-rules-engine-services/v4/reorder-rules-engine-service.js
@@ -1,69 +1,21 @@
 import { AxiosHttpClientAdapter } from '@/services/axios/AxiosHttpClientAdapter'
 import { makeEdgeFirewallBaseUrl } from '../../edge-firewall-services/v4/make-edge-firewall-base-url'
-import { makeListServiceQueryParams } from '@/helpers/make-list-service-query-params'
 import * as Errors from '@/services/axios/errors'
 
-export const reorderEdgeFirewallRulesEngine = async (
-  newOrderData,
-  currentOrderData,
-  edgeFirewallId,
-  ordering = '',
-  search = ''
-) => {
-  const edgeFirewallIds = await allEdgeFirewallToReorder(edgeFirewallId, ordering, search)
+export const reorderRulesEngine = async (newOrderData, edgeFirewallId) => {
   let httpResponse = await AxiosHttpClientAdapter.request({
     url: `${makeEdgeFirewallBaseUrl()}/${edgeFirewallId}/rules/order`,
     method: 'PUT',
-    body: adapt(newOrderData, currentOrderData, edgeFirewallIds)
+    body: adapt(newOrderData)
   })
 
   return parseHttpResponse(httpResponse)
 }
 
-const allEdgeFirewallToReorder = async (edgeFirewallId, ordering, search) => {
-  const fields = ['id']
-  const pageSize = 100
-  const searchParams = makeListServiceQueryParams({
-    fields,
-    ordering,
-    page: 1,
-    pageSize,
-    search
-  })
-
-  const httpResponse = await AxiosHttpClientAdapter.request({
-    url: `${makeEdgeFirewallBaseUrl()}/${edgeFirewallId}/rules?${searchParams.toString()}`,
-    method: 'GET'
-  })
-
-  return httpResponse.body.results
-}
-
-function replaceIntervalWithSortedList(currentList, allIdsList, sortedList) {
-  const startIndex = allIdsList.indexOf(currentList[0])
-  const endIndex = allIdsList.indexOf(currentList[currentList.length - 1])
-
-  const updatedAllIdsList = [
-    ...allIdsList.slice(0, startIndex),
-    ...sortedList,
-    ...allIdsList.slice(endIndex + 1)
-  ]
-
-  return updatedAllIdsList
-}
-
-const adapt = (newOrderData, currentOrderData, edgeFirewallIds) => {
+const adapt = (newOrderData) => {
   const listNewOrderDataIds = newOrderData.map((data) => data.id)
-  const listCurrentOrderDataIds = currentOrderData.map((data) => data.id)
-  const listEdgeFirewallIds = edgeFirewallIds.map((data) => data.id)
-
-  const result = replaceIntervalWithSortedList(
-    listCurrentOrderDataIds,
-    listEdgeFirewallIds,
-    listNewOrderDataIds
-  )
 
-  return { order: result }
+  return { order: listNewOrderDataIds }
 }
 
 /**
diff --git a/src/templates/list-table-block/with-fetch-ordering-and-pagination.vue b/src/templates/list-table-block/with-fetch-ordering-and-pagination.vue
index 624d88577..0053e9452 100644
--- a/src/templates/list-table-block/with-fetch-ordering-and-pagination.vue
+++ b/src/templates/list-table-block/with-fetch-ordering-and-pagination.vue
@@ -7,8 +7,8 @@
     <DataTable
       scrollable
       removableSort
+      :lazy="props.lazy"
       rowHover
-      lazy
       ref="dataTableRef"
       class="overflow-clip rounded-md"
       dataKey="id"
@@ -16,10 +16,11 @@
       v-if="!isLoading"
       :pt="props.pt"
       :value="data"
+      v-model:filters="filtersDynamically"
       v-model:sortField="sortFieldValue"
       v-model:sortOrder="sortOrderValue"
-      :paginator="true"
-      :rowsPerPageOptions="[10, 20, 50, 100]"
+      :paginator="havePagination"
+      :rowsPerPageOptions="props.rowsPerPageOptions"
       :rows="itemsByPage"
       :globalFilterFields="filterBy"
       :selection="selectedItems"
@@ -27,7 +28,6 @@
       :exportFunction="exportFunctionMapper"
       :loading="isLoading"
       :totalRecords="totalRecords"
-      :first="firstItemIndex"
       @rowReorder="onRowReorder"
       @row-click="editItemSelected"
       @page="changeNumberOfLinesPerPage"
@@ -73,6 +73,8 @@
             <slot
               name="addButton"
               data-testid="data-table-add-button"
+              :reload="reload"
+              :data="data"
             >
               <PrimeButton
                 class="max-sm:w-full"
@@ -107,7 +109,7 @@
         :field="col.field"
         :header="col.header"
         :sortField="col?.sortField"
-        :class="{ 'hover:cursor-pointer': !col.disableSort }"
+        :class="col.disableSort ? '' : 'hover:cursor-pointer'"
         data-testid="data-table-column"
       >
         <template #body="{ data: rowData }">
@@ -308,17 +310,18 @@
   import { useDialog } from 'primevue/usedialog'
   import { useToast } from 'primevue/usetoast'
   import { getCsvCellContentFromRowData } from '@/helpers'
-  import { getArrayChangedIndexes } from '@/helpers/get-array-changed-indexes'
   import { useTableDefinitionsStore } from '@/stores/table-definitions'
 
   defineOptions({ name: 'list-table-block-new' })
 
   const emit = defineEmits([
     'on-load-data',
+    'on-reorder',
     'on-before-go-to-add-page',
     'on-before-go-to-edit',
     'update:selectedItensData'
   ])
+
   const props = defineProps({
     hiddenHeader: {
       type: Boolean
@@ -327,7 +330,7 @@
       type: Array,
       default: () => [{ field: 'name', header: 'Name' }]
     },
-    lazyLoad: {
+    loadDisabled: {
       type: Boolean
     },
     isGraphql: {
@@ -402,16 +405,32 @@
     defaultOrderingFieldName: {
       type: String,
       default: () => 'id'
+    },
+    rowsPerPageOptions: {
+      type: Array,
+      default: () => [10, 20, 50, 100]
+    },
+    lazy: {
+      type: Boolean,
+      default: true
     }
   })
 
   const tableDefinitions = useTableDefinitionsStore()
+  const havePagination = ref(true)
+  const getSpecificPageCount = computed(() => {
+    if (props.rowsPerPageOptions.length === 1) {
+      return props.rowsPerPageOptions[0]
+    }
+    return tableDefinitions.getNumberOfLinesPerPage
+  })
 
-  const itemsByPage = ref(tableDefinitions.getNumberOfLinesPerPage)
+  const itemsByPage = ref(getSpecificPageCount.value)
   const isRenderActions = !!props.actions?.length
   const isRenderOneOption = props.actions?.length === 1
   const selectedId = ref(null)
   const dataTableRef = ref(null)
+
   const filters = ref({
     global: { value: '', matchMode: FilterMatchMode.CONTAINS }
   })
@@ -430,12 +449,15 @@
   const sortOrderValue = ref(null)
 
   const totalRecords = ref()
-  const firstItemIndex = ref(1)
   const savedSearch = ref('')
   const savedOrdering = ref('')
 
   const firstLoadData = ref(true)
 
+  const filtersDynamically = computed(() => {
+    return props.lazy ? {} : filters.value
+  })
+
   const selectedItems = computed({
     get: () => {
       return props.selectedItensData
@@ -445,17 +467,6 @@
     }
   })
 
-  onMounted(() => {
-    if (!props.lazyLoad) {
-      loadData({
-        page: 1,
-        pageSize: itemsByPage.value,
-        fields: props.apiFields,
-        ordering: props.defaultOrderingFieldName
-      })
-    }
-    selectedColumns.value = props.columns
-  })
   /**
    * @param {import('primevue/datatable').DataTableExportFunctionOptions} rowData
    */
@@ -466,30 +477,40 @@
     const columnMapper = props.csvMapper(rowData)
     return getCsvCellContentFromRowData({ columnMapper, rowData })
   }
+
   const handleExportTableDataToCSV = () => {
     dataTableRef.value.exportCSV()
   }
+
   const toggleColumnSelector = (event) => {
     columnSelectorPanel.value.toggle(event)
   }
+
+  /**
+   * Moves an item within the original array based on updated positions in a reference array.
+   *
+   * @param {Array} originalArray - The array to be modified.
+   * @param {Array} referenceArray - The reference array with the new order.
+   * @param {number} fromIndex - The index of the item to move in the reference array.
+   * @param {number} toIndex - The target index  in the reference array.
+   * @returns {Array} The updated array with the item moved.
+   */
+  const moveItem = (originalArray, referenceArray, fromIndex, toIndex) => {
+    const oldItemMove = toIndex + Math.sign(fromIndex - toIndex)
+    const itemToMoveId = referenceArray[toIndex]
+    const targetItemId = referenceArray[oldItemMove]
+
+    const originalItemIndex = originalArray.findIndex((item) => item.id === itemToMoveId.id)
+    const targetItemIndex = originalArray.findIndex((item) => item.id === targetItemId.id)
+
+    const [itemToMove] = originalArray.splice(originalItemIndex, 1)
+    originalArray.splice(targetItemIndex, 0, itemToMove)
+
+    return originalArray
+  }
+
   const onRowReorder = async (event) => {
-    try {
-      const tableData = getArrayChangedIndexes(data.value, event.dragIndex, event.dropIndex)
-      await props.onReorderService(tableData, data.value, savedOrdering.value, savedSearch.value)
-      data.value = tableData
-      reload()
-      toast.add({
-        closable: true,
-        severity: 'success',
-        summary: 'Reorder saved'
-      })
-    } catch (error) {
-      toast.add({
-        closable: true,
-        severity: 'error',
-        summary: error
-      })
-    }
+    emit('on-reorder', { event, data, moveItem })
   }
 
   const openDialog = (dialogComponent, body) => {
@@ -564,10 +585,12 @@
       }
     }
   }
+
   const navigateToAddPage = () => {
     emit('on-before-go-to-add-page')
     router.push(props.createPagePath)
   }
+
   const toggleActionsMenu = (event, selectedID) => {
     if (!selectedID) {
       throw new Error('Please provide an id for each data item through the service adapter')
@@ -575,6 +598,7 @@
     selectedId.value = selectedID
     menuRef.value[selectedID].toggle(event)
   }
+
   const editItemSelected = ({ data: item }) => {
     emit('on-before-go-to-edit', item)
     if (props.editInDrawer) {
@@ -583,10 +607,12 @@
       router.push({ path: `${props.editPagePath}/${item.id}` })
     }
   }
+
   const executeCommand = (rowData) => {
     const [firstAction] = actionOptions(rowData)
     firstAction?.command()
   }
+
   const optionsOneAction = (rowData) => {
     const [firstAction] = actionOptions(rowData)
     return {
@@ -594,6 +620,7 @@
       disabled: firstAction?.disabled
     }
   }
+
   const reload = async (query = {}) => {
     loadData({
       page: 1,
@@ -605,8 +632,6 @@
     })
   }
 
-  defineExpose({ reload, handleExportTableDataToCSV })
-
   const extractFieldValue = (rowData, field) => {
     return rowData[field]
   }
@@ -618,12 +643,12 @@
       }
     }
   }
+
   const changeNumberOfLinesPerPage = (event) => {
     const numberOfLinesPerPage = event.rows
     tableDefinitions.setNumberOfLinesPerPage(numberOfLinesPerPage)
     itemsByPage.value = numberOfLinesPerPage
 
-    firstItemIndex.value = event.first
     reload({ page: event.page + 1 })
   }
 
@@ -645,6 +670,7 @@
     sortFieldValue.value = sortField
     sortOrderValue.value = sortOrder
   }
+
   const fetchOnSearch = () => {
     reload()
   }
@@ -653,4 +679,18 @@
     const search = filters.value.global.value
     savedSearch.value = search
   }
+
+  onMounted(() => {
+    if (!props.loadDisabled) {
+      loadData({
+        page: 1,
+        pageSize: itemsByPage.value,
+        fields: props.apiFields,
+        ordering: props.defaultOrderingFieldName
+      })
+    }
+    selectedColumns.value = props.columns
+  })
+
+  defineExpose({ reload, handleExportTableDataToCSV })
 </script>
diff --git a/src/templates/mfa-authenticate-block/index.vue b/src/templates/mfa-authenticate-block/index.vue
index c3fd8ef8f..6ad049a6f 100644
--- a/src/templates/mfa-authenticate-block/index.vue
+++ b/src/templates/mfa-authenticate-block/index.vue
@@ -1,7 +1,7 @@
 <template>
   <form
     @submit.prevent="validateCode()"
-    class="max-sm:min-h-[calc(100vh-120px)]"
+    class="max-sm:min-h-[calc(100vh-120px)] justify-center items-center"
   >
     <div
       class="flex flex-col align-top items-center py-6 px-3 md:py-20 animate-fadeIn"
diff --git a/src/templates/mfa-setup-block/index.vue b/src/templates/mfa-setup-block/index.vue
index 904c018cd..4170e963e 100644
--- a/src/templates/mfa-setup-block/index.vue
+++ b/src/templates/mfa-setup-block/index.vue
@@ -1,7 +1,7 @@
 <template>
   <form
     @submit.prevent="authorizeDevice()"
-    class="max-sm:min-h-[calc(100vh-120px)]"
+    class="max-sm:min-h-[calc(100vh-120px)] justify-center items-center"
   >
     <div
       class="flex flex-col align-top items-center py-6 px-3 md:py-20 animate-fadeIn"
diff --git a/src/tests/services/edge-application-rules-engine-services/reorder-rules-engine-service.test.js b/src/tests/services/edge-application-rules-engine-services/reorder-rules-engine-service.test.js
deleted file mode 100644
index 42f099fc5..000000000
--- a/src/tests/services/edge-application-rules-engine-services/reorder-rules-engine-service.test.js
+++ /dev/null
@@ -1,113 +0,0 @@
-import { AxiosHttpClientAdapter } from '@/services/axios/AxiosHttpClientAdapter'
-import { reorderRulesEngine } from '@/services/edge-application-rules-engine-services'
-import { describe, expect, it, vi } from 'vitest'
-import * as Errors from '@/services/axios/errors'
-
-const fixtures = {
-  ruleData: [
-    {
-      oldIndex: 3,
-      newIndex: 4,
-      id: 353623,
-      name: 'teste 2',
-      phase: {
-        content: 'Request',
-        outlined: true,
-        severity: 'info'
-      },
-      behaviors: [
-        {
-          name: 'no_content',
-          target: null
-        }
-      ],
-      criteria: [
-        [
-          {
-            variable: '${uri}',
-            operator: 'is_not_equal',
-            conditional: 'if',
-            input_value: '2'
-          }
-        ]
-      ],
-      status: {
-        content: 'Active',
-        severity: 'success'
-      },
-      order: 5,
-      description: 'terste'
-    }
-  ],
-  defaultRuleData: {
-    oldIndex: 4,
-    newIndex: 5,
-    id: 353623,
-    name: 'Default Rule Engine',
-    phase: {
-      content: 'Default',
-      outlined: true,
-      severity: 'info'
-    },
-    behaviors: [
-      {
-        name: 'no_content',
-        target: null
-      }
-    ],
-    criteria: [
-      [
-        {
-          variable: '${uri}',
-          operator: 'is_not_equal',
-          conditional: 'if',
-          input_value: '2'
-        }
-      ]
-    ],
-    status: {
-      content: 'Active',
-      severity: 'success'
-    },
-    order: 5,
-    description: 'terste'
-  }
-}
-
-const makeSut = () => {
-  const sut = reorderRulesEngine
-
-  return { sut }
-}
-
-describe('EdgeApplicationRulesEnginesServices', () => {
-  it('should reorder valid rule engine', async () => {
-    const requestSpy = vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
-      statusCode: 200
-    })
-    const { sut } = makeSut()
-
-    const version = 'v3'
-    const edgeApplicationId = 123
-    const phaseRules = 'request'
-    await sut(fixtures.ruleData, edgeApplicationId)
-
-    expect(requestSpy).toHaveBeenCalledWith({
-      url: `${version}/edge_applications/${edgeApplicationId}/rules_engine/${phaseRules}/rules/${fixtures.ruleData[0].id}`,
-      method: 'PATCH',
-      body: {
-        order: fixtures.ruleData[0].newIndex + 1
-      }
-    })
-  })
-
-  it('should not reorder invalid rule engine', async () => {
-    const { sut } = makeSut()
-
-    const edgeApplicationId = 123
-    const reorderService = sut([fixtures.defaultRuleData], edgeApplicationId)
-    const errorMessage = new Errors.CannotReorderDefaultRule().message
-
-    expect(reorderService).rejects.toBe(errorMessage)
-  })
-})
diff --git a/src/tests/services/edge-application-rules-engine-services/v4/list-rules-engine-service.test.js b/src/tests/services/edge-application-rules-engine-services/v4/list-rules-engine-service.test.js
index 49f06cf49..848e4f015 100644
--- a/src/tests/services/edge-application-rules-engine-services/v4/list-rules-engine-service.test.js
+++ b/src/tests/services/edge-application-rules-engine-services/v4/list-rules-engine-service.test.js
@@ -1,5 +1,5 @@
 import { AxiosHttpClientAdapter } from '@/services/axios/AxiosHttpClientAdapter'
-import { listRulesEngineService } from '@/services/edge-application-rules-engine-services/v4'
+import { listRulesEngineServiceAll } from '@/services/edge-application-rules-engine-services/v4'
 import { describe, expect, it, vi } from 'vitest'
 
 const fixtures = {
@@ -30,7 +30,7 @@ const fixtures = {
 }
 
 const makeSut = () => {
-  const sut = listRulesEngineService
+  const sut = listRulesEngineServiceAll
 
   return { sut }
 }
@@ -39,17 +39,17 @@ describe('EdgeApplicationRulesEngineServicesV4', () => {
   it('should call api with correct params', async () => {
     const requestSpy = vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
       statusCode: 200,
-      body: { results: [] }
+      body: { count: 0, results: [] }
     })
 
     const edgeApplicationId = 123
 
     const { sut } = makeSut()
     const version = 'v4'
-    await sut({ id: edgeApplicationId, phase: 'request' })
+    await sut({ id: edgeApplicationId })
 
     expect(requestSpy).toHaveBeenCalledWith({
-      url: `${version}/edge_application/applications/${edgeApplicationId}/rules?phase=request&ordering=&page=1&page_size=10&fields=&search=`,
+      url: `${version}/edge_application/applications/${edgeApplicationId}/rules?ordering=&page=1&page_size=100&fields=&search=`,
       method: 'GET'
     })
   })
@@ -58,6 +58,7 @@ describe('EdgeApplicationRulesEngineServicesV4', () => {
     vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
       statusCode: 200,
       body: {
+        count: 1,
         results: [fixtures.rulesEngine]
       }
     })
@@ -67,31 +68,35 @@ describe('EdgeApplicationRulesEngineServicesV4', () => {
     const { sut } = makeSut()
     const result = await sut({ id: edgeApplicationId })
 
-    expect(result).toEqual([
-      {
-        id: fixtures.rulesEngine.id,
-        name: fixtures.rulesEngine.name,
-        phase: {
-          content: 'Default',
-          outlined: true,
-          severity: 'info'
-        },
-        behaviors: fixtures.rulesEngine.behaviors,
-        criteria: fixtures.rulesEngine.criteria,
-        status: {
-          content: 'Active',
-          severity: 'success'
-        },
-        order: 0,
-        description: 'string'
-      }
-    ])
+    expect(result).toEqual({
+      body: [
+        {
+          id: fixtures.rulesEngine.id,
+          name: fixtures.rulesEngine.name,
+          phase: {
+            content: 'Default',
+            outlined: true,
+            severity: 'info'
+          },
+          behaviors: fixtures.rulesEngine.behaviors,
+          criteria: fixtures.rulesEngine.criteria,
+          status: {
+            content: 'Active',
+            severity: 'success'
+          },
+          order: 0,
+          description: 'string'
+        }
+      ],
+      count: 1
+    })
   })
 
   it('should return empty array when there is no rules engine', async () => {
     vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
       statusCode: 200,
       body: {
+        count: 0,
         results: []
       }
     })
diff --git a/src/tests/services/edge-firewall-rules-engine-services/reorder-edge-firewall-rules-engine-service.test.js b/src/tests/services/edge-firewall-rules-engine-services/reorder-edge-firewall-rules-engine-service.test.js
deleted file mode 100644
index feffe4a27..000000000
--- a/src/tests/services/edge-firewall-rules-engine-services/reorder-edge-firewall-rules-engine-service.test.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import { reorderEdgeFirewallRulesEngine } from '@/services/edge-firewall-rules-engine-services/reorder-edge-firewall-rules-engine-service'
-import { AxiosHttpClientAdapter } from '@/services/axios/AxiosHttpClientAdapter'
-import { makeEdgeFirewallRulesEngineReorderBaseUrl } from '@/services/edge-firewall-rules-engine-services/make-edge-firewall-rules-engine-reorder-base-url'
-import { describe, expect, it, vi } from 'vitest'
-
-const fixtures = {
-  edgeFirewallId: '123',
-  edgeFirewallMock: [
-    { id: 1, newIndex: 1 },
-    { id: 2, newIndex: 0 }
-  ]
-}
-
-const makeSut = () => {
-  const sut = reorderEdgeFirewallRulesEngine
-
-  return {
-    sut
-  }
-}
-
-describe('reorderEdgeFirewallRulesEngine', () => {
-  it('should call api with correct params', async () => {
-    const requestSpy = vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
-      statusCode: 200
-    })
-
-    const { sut } = makeSut()
-    await sut(fixtures.edgeFirewallMock, fixtures.edgeFirewallId)
-
-    expect(requestSpy).toHaveBeenCalledWith({
-      url: makeEdgeFirewallRulesEngineReorderBaseUrl(fixtures.edgeFirewallId),
-      method: 'PUT',
-      body: { order: [2, 1] }
-    })
-  })
-})
diff --git a/src/tests/services/edge-firewall-rules-engine-services/v4/list-edge-firewall-rules-engine-service.test.js b/src/tests/services/edge-firewall-rules-engine-services/v4/list-edge-firewall-rules-engine-service.test.js
index 9197a2084..271250c96 100644
--- a/src/tests/services/edge-firewall-rules-engine-services/v4/list-edge-firewall-rules-engine-service.test.js
+++ b/src/tests/services/edge-firewall-rules-engine-services/v4/list-edge-firewall-rules-engine-service.test.js
@@ -40,17 +40,16 @@ describe('EdgeFirewallRulesEngineServices', () => {
 
   it('should call api with correct params', async () => {
     const requestSpy = vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
-      count: 0,
       statusCode: 200,
-      body: { results: [] }
+      body: { results: [], count: 0 }
     })
     const { sut } = makeSut()
-    await sut({ edgeFirewallId: 123 })
+    await sut({ id: 123 })
 
     const version = 'v4'
 
     expect(requestSpy).toHaveBeenCalledWith({
-      url: `${version}/edge_firewall/firewalls/123/rules?ordering=&page=1&page_size=10&fields=&search=`,
+      url: `${version}/edge_firewall/firewalls/123/rules?ordering=&page=1&page_size=100&fields=&search=`,
       method: 'GET'
     })
   })
@@ -61,25 +60,28 @@ describe('EdgeFirewallRulesEngineServices', () => {
     vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
       count: 1,
       statusCode: 200,
-      body: { results: [fixtures.edgeFirewallRulesEngineMock] }
+      body: { results: [fixtures.edgeFirewallRulesEngineMock], count: 1 }
     })
     const { sut } = makeSut()
 
     const result = await sut({ edgeFirewallId: 123 })
 
-    expect(result).toEqual([
-      {
-        id: fixtures.edgeFirewallRulesEngineMock.id,
-        name: fixtures.edgeFirewallRulesEngineMock.name,
-        description: fixtures.edgeFirewallRulesEngineMock.description,
-        lastModified: 'November 10, 2023 at 12:00 AM',
-        lastEditor: fixtures.edgeFirewallRulesEngineMock.last_editor,
-        status: {
-          content: 'Active',
-          severity: 'success'
+    expect(result).toEqual({
+      body: [
+        {
+          id: fixtures.edgeFirewallRulesEngineMock.id,
+          name: fixtures.edgeFirewallRulesEngineMock.name,
+          description: fixtures.edgeFirewallRulesEngineMock.description,
+          lastModified: 'November 10, 2023 at 12:00 AM',
+          lastEditor: fixtures.edgeFirewallRulesEngineMock.last_editor,
+          status: {
+            content: 'Active',
+            severity: 'success'
+          }
         }
-      }
-    ])
+      ],
+      count: 1
+    })
   })
 
   it('should parse correctly inactive rules engines', async () => {
@@ -87,25 +89,27 @@ describe('EdgeFirewallRulesEngineServices', () => {
     vi.setSystemTime(new Date(2023, 10, 11, 10))
     vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
       statusCode: 200,
-      count: 1,
-      body: { results: [fixtures.edgeFirewallRulesEngineInactiveMock] }
+      body: { results: [fixtures.edgeFirewallRulesEngineInactiveMock], count: 1 }
     })
     const { sut } = makeSut()
 
     const result = await sut({ edgeFirewallId: 123 })
 
-    expect(result).toEqual([
-      {
-        id: fixtures.edgeFirewallRulesEngineInactiveMock.id,
-        name: fixtures.edgeFirewallRulesEngineInactiveMock.name,
-        description: fixtures.edgeFirewallRulesEngineInactiveMock.description,
-        lastModified: 'November 11, 2023 at 12:00 AM',
-        lastEditor: fixtures.edgeFirewallRulesEngineInactiveMock.last_editor,
-        status: {
-          content: 'Inactive',
-          severity: 'danger'
+    expect(result).toEqual({
+      body: [
+        {
+          id: fixtures.edgeFirewallRulesEngineInactiveMock.id,
+          name: fixtures.edgeFirewallRulesEngineInactiveMock.name,
+          description: fixtures.edgeFirewallRulesEngineInactiveMock.description,
+          lastModified: 'November 11, 2023 at 12:00 AM',
+          lastEditor: fixtures.edgeFirewallRulesEngineInactiveMock.last_editor,
+          status: {
+            content: 'Inactive',
+            severity: 'danger'
+          }
         }
-      }
-    ])
+      ],
+      count: 1
+    })
   })
 })
diff --git a/src/tests/services/edge-firewall-rules-engine-services/v4/reorder-edge-firewall-rules-engine-service.test.js b/src/tests/services/edge-firewall-rules-engine-services/v4/reorder-edge-firewall-rules-engine-service.test.js
deleted file mode 100644
index 9f2c0b3f8..000000000
--- a/src/tests/services/edge-firewall-rules-engine-services/v4/reorder-edge-firewall-rules-engine-service.test.js
+++ /dev/null
@@ -1,170 +0,0 @@
-import { reorderEdgeFirewallRulesEngine } from '@/services/edge-firewall-rules-engine-services/v4/reorder-edge-firewall-rules-engine-service'
-import { AxiosHttpClientAdapter } from '@/services/axios/AxiosHttpClientAdapter'
-import * as Errors from '@/services/axios/errors'
-import { describe, expect, it, vi } from 'vitest'
-
-const fixtures = {
-  edgeFirewallId: '123',
-  allEdgeFirewallMock: [
-    { id: 52777 },
-    { id: 52959 },
-    { id: 52962 },
-    { id: 52957 },
-    { id: 52960 },
-    { id: 52955 },
-    { id: 52963 },
-    { id: 40301 },
-    { id: 52958 },
-    { id: 52956 },
-    { id: 52961 }
-  ],
-  orderedEdgeFirewallMock: [
-    { id: 52959 },
-    { id: 52962 },
-    { id: 52777 },
-    { id: 52957 },
-    { id: 52960 },
-    { id: 52955 },
-    { id: 52963 },
-    { id: 40301 },
-    { id: 52958 },
-    { id: 52956 }
-  ],
-  currentEdgeFirewallMock: [
-    { id: 52777 },
-    { id: 52959 },
-    { id: 52962 },
-    { id: 52957 },
-    { id: 52960 },
-    { id: 52955 },
-    { id: 52963 },
-    { id: 40301 },
-    { id: 52958 },
-    { id: 52956 }
-  ]
-}
-
-const makeSut = () => {
-  const sut = reorderEdgeFirewallRulesEngine
-
-  return {
-    sut
-  }
-}
-
-describe('reorderEdgeFirewallRulesEngine', () => {
-  it('should call api with correct params', async () => {
-    const requestSpy = vi
-      .spyOn(AxiosHttpClientAdapter, 'request')
-      .mockResolvedValueOnce({
-        statusCode: 200,
-        body: { results: fixtures.allEdgeFirewallMock }
-      })
-      .mockResolvedValueOnce({
-        statusCode: 202
-      })
-
-    const { sut } = makeSut()
-
-    const search = ''
-    const ordering = ''
-
-    await sut(
-      fixtures.orderedEdgeFirewallMock,
-      fixtures.currentEdgeFirewallMock,
-      fixtures.edgeFirewallId,
-      ordering,
-      search
-    )
-
-    const version = 'v4'
-
-    expect(requestSpy).toHaveBeenCalledWith({
-      url: `${version}/edge_firewall/firewalls/${fixtures.edgeFirewallId}/rules/order`,
-      method: 'PUT',
-      body: { order: [52959, 52962, 52777, 52957, 52960, 52955, 52963, 40301, 52958, 52956, 52961] }
-    })
-  })
-
-  it('Should return an API error for an 400 response status', async () => {
-    const errorKey = 'order'
-    const apiErrorMock =
-      'Missing rules in order list, when ordering you should provide the order for all.'
-    vi.spyOn(AxiosHttpClientAdapter, 'request')
-      .mockResolvedValueOnce({
-        statusCode: 200,
-        body: { results: fixtures.allEdgeFirewallMock }
-      })
-      .mockResolvedValueOnce({
-        statusCode: 400,
-        body: {
-          [errorKey]: [apiErrorMock]
-        }
-      })
-
-    const search = ''
-    const ordering = ''
-
-    const { sut } = makeSut()
-
-    const feedbackMessage = sut(
-      fixtures.orderedEdgeFirewallMock,
-      fixtures.currentEdgeFirewallMock,
-      fixtures.edgeFirewallId,
-      ordering,
-      search
-    )
-
-    expect(feedbackMessage).rejects.toThrow(apiErrorMock)
-  })
-
-  it.each([
-    {
-      statusCode: 401,
-      expectedError: new Errors.InvalidApiTokenError().message
-    },
-    {
-      statusCode: 403,
-      expectedError: new Errors.PermissionError().message
-    },
-    {
-      statusCode: 404,
-      expectedError: new Errors.NotFoundError().message
-    },
-    {
-      statusCode: 500,
-      expectedError: new Errors.InternalServerError().message
-    },
-    {
-      statusCode: 'unmappedStatusCode',
-      expectedError: new Errors.UnexpectedError().message
-    }
-  ])(
-    'should throw when request fails with status code $statusCode',
-    async ({ statusCode, expectedError }) => {
-      vi.spyOn(AxiosHttpClientAdapter, 'request')
-        .mockResolvedValueOnce({
-          statusCode: 200,
-          body: { results: fixtures.allEdgeFirewallMock }
-        })
-        .mockResolvedValueOnce({
-          statusCode
-        })
-
-      const { sut } = makeSut()
-
-      const search = ''
-      const ordering = ''
-
-      const response = sut(
-        fixtures.orderedEdgeFirewallMock,
-        fixtures.currentEdgeFirewallMock,
-        fixtures.edgeFirewallId,
-        ordering,
-        search
-      )
-
-      expect(response).rejects.toBe(expectedError)
-    }
-  )
-})
diff --git a/src/views/EdgeApplicationsRulesEngine/ListView.vue b/src/views/EdgeApplicationsRulesEngine/ListView.vue
index 03ceda60e..8632a8b2f 100644
--- a/src/views/EdgeApplicationsRulesEngine/ListView.vue
+++ b/src/views/EdgeApplicationsRulesEngine/ListView.vue
@@ -5,8 +5,8 @@
   import FetchListTableBlock from '@/templates/list-table-block/with-fetch-ordering-and-pagination.vue'
 
   import PrimeButton from 'primevue/button'
-  import SelectButton from 'primevue/selectbutton'
   import { computed, ref, inject } from 'vue'
+  import { useToast } from 'primevue/usetoast'
 
   /**@type {import('@/plugins/analytics/AnalyticsTrackerAdapter').AnalyticsTrackerAdapter} */
   const tracker = inject('tracker')
@@ -97,15 +97,16 @@
     'order'
   ]
 
-  const PHASE_OPTIONS = ['Request phase', 'Response phase']
   const PARSE_PHASE = {
     'Request phase': 'request',
     'Response phase': 'response'
   }
+  const disabledOrdering = ref(true)
   const drawerRulesEngineRef = ref('')
   const hasContentToList = ref(true)
   const listRulesEngineRef = ref(null)
   const selectedPhase = ref('Request phase')
+  const toast = useToast()
 
   const getColumns = computed(() => {
     return [
@@ -168,7 +169,6 @@
   const listRulesEngineWithDecorator = async (query) => {
     return props.listRulesEngineService({
       id: props.edgeApplicationId,
-      phase: PARSE_PHASE[selectedPhase.value],
       ...query
     })
   }
@@ -184,17 +184,12 @@
     })
   }
 
-  const reorderRulesEngineWithDecorator = async (tableData) => {
-    return props.reorderRulesEngine(tableData, props.edgeApplicationId)
-  }
-
   const reloadList = () => {
     listRulesEngineRef.value.reload()
   }
 
   const openCreateRulesEngineDrawerByPhase = () => {
     handleCreateTrackEvent()
-    PARSE_PHASE[selectedPhase.value]
     drawerRulesEngineRef.value.openDrawerCreate(PARSE_PHASE[selectedPhase.value])
   }
 
@@ -207,10 +202,6 @@
     () => `Click the button below to create your first ${selectedPhase.value} rule.`
   )
 
-  const removeReorderForRequestPhaseFirstItem = computed(
-    () => selectedPhase.value === 'Response phase'
-  )
-
   const actions = [
     {
       type: 'delete',
@@ -219,6 +210,65 @@
       service: deleteRulesEngineWithDecorator
     }
   ]
+
+  const checkOrderRules = async ({ event, data, moveItem }) => {
+    if (isLoadingButtonOrder.value) {
+      toast.add({
+        closable: true,
+        severity: 'info',
+        summary: 'info',
+        detail: 'Please wait until the current operation is completed'
+      })
+      return
+    }
+    const { dragIndex: originIndex, dropIndex: destinationIndex, value: updatedTable } = event
+    const alterFirstItem = originIndex === 0 || destinationIndex === 0
+
+    if (alterFirstItem) {
+      const firstItem = updatedTable[originIndex]
+      const secondItem = updatedTable[destinationIndex]
+      const isDefaultRuleMoved =
+        firstItem.name === 'Default Rule' || secondItem.name === 'Default Rule'
+      if (isDefaultRuleMoved) {
+        toast.add({
+          closable: true,
+          severity: 'error',
+          summary: 'The default rule cannot be reordered'
+        })
+        return
+      }
+    }
+
+    const reorderedData = moveItem(data.value, updatedTable, originIndex, destinationIndex)
+    data.value = reorderedData
+    disabledOrdering.value = false
+  }
+
+  const isLoadingButtonOrder = ref(false)
+
+  const updateRulesOrder = async (data, reload) => {
+    disabledOrdering.value = true
+    try {
+      isLoadingButtonOrder.value = true
+      await props.reorderRulesEngine(data, props.edgeApplicationId)
+      toast.add({
+        closable: true,
+        severity: 'success',
+        summary: 'success',
+        detail: 'Reorder saved'
+      })
+    } catch (error) {
+      toast.add({
+        closable: true,
+        severity: 'error',
+        summary: 'error',
+        detail: error
+      })
+    } finally {
+      await reload()
+      isLoadingButtonOrder.value = false
+    }
+  }
 </script>
 
 <template>
@@ -243,10 +293,10 @@
     data-testid="rules-engine-drawer"
   />
   <FetchListTableBlock
+    :lazy="false"
     ref="listRulesEngineRef"
     :reorderableRows="true"
     :columns="getColumns"
-    :onReorderService="reorderRulesEngineWithDecorator"
     :editInDrawer="openEditRulesEngineDrawer"
     :listService="listRulesEngineWithDecorator"
     @on-load-data="handleLoadData"
@@ -255,31 +305,47 @@
     }"
     emptyListMessage="No rules found."
     @on-before-go-to-edit="handleTrackEditEvent"
-    :isReorderAllEnabled="removeReorderForRequestPhaseFirstItem"
+    @onReorder="checkOrderRules"
     data-testid="rules-engine-list"
     :actions="actions"
     isTabs
     :apiFields="RULES_ENGINE_API_FIELDS"
     :defaultOrderingFieldName="''"
+    :rowsPerPageOptions="[2000]"
   >
-    <template #addButton>
+    <template #addButton="{ reload, data }">
       <div
         class="flex gap-4"
         data-testid="rules-engine-add-button"
       >
-        <SelectButton
-          v-model="selectedPhase"
-          @change="reloadList"
-          :options="PHASE_OPTIONS"
-          :unselectable="true"
-          data-testid="rules-engine-select-phase"
-        />
         <PrimeButton
           icon="pi pi-plus"
           label="Rule"
           @click="openCreateRulesEngineDrawerByPhase"
           data-testid="rules-engine-create-button"
         />
+        <teleport to="#action-bar">
+          <div
+            class="flex w-full gap-4 justify-end h-14 items-center border-t surface-border sticky bottom-0 surface-section z-50 px-2 md:px-8"
+          >
+            <PrimeButton
+              outlined
+              icon="pi pi-save"
+              class="bg-primary"
+              :disabled="disabledOrdering"
+              :pt="{
+                label: { class: 'text-[var(--surface-section)]' },
+                icon: { class: 'text-[var(--surface-section)]' },
+                loadingIcon: { class: 'text-[var(--surface-section)]' }
+              }"
+              label="Save order"
+              :loading="isLoadingButtonOrder"
+              data-testid="rules-engine-save-order-button"
+              @click="updateRulesOrder(data, reload)"
+              v-tooltip.bottom="{ value: 'Saves the new order of rules.', showDelay: 200 }"
+            />
+          </div>
+        </teleport>
       </div>
     </template>
 
diff --git a/src/views/EdgeFirewallRulesEngine/ListView.vue b/src/views/EdgeFirewallRulesEngine/ListView.vue
index 305d3a76e..7d84b4dee 100644
--- a/src/views/EdgeFirewallRulesEngine/ListView.vue
+++ b/src/views/EdgeFirewallRulesEngine/ListView.vue
@@ -5,6 +5,7 @@
   import Drawer from './Drawer'
   import { columnBuilder } from '@/templates/list-table-block/columns/column-builder'
   import { computed, ref, inject } from 'vue'
+  import { useToast } from 'primevue/usetoast'
 
   /**@type {import('@/plugins/analytics/AnalyticsTrackerAdapter').AnalyticsTrackerAdapter} */
   const tracker = inject('tracker')
@@ -47,7 +48,7 @@
       required: true
     },
     edgeFirewallId: {
-      type: Number || String,
+      type: String || Number,
       required: true
     },
     edgeFirewallModules: {
@@ -58,7 +59,7 @@
       type: Function,
       required: true
     },
-    reorderEdgeFirewallRulesEngine: {
+    reorderRulesEngine: {
       type: Function,
       required: true
     }
@@ -66,6 +67,8 @@
   const hasContentToList = ref(true)
   const drawerRef = ref('')
   const listTableBlockRef = ref('')
+  const toast = useToast()
+
   const EDGE_FIREWALL_RULES_ENGINE_API_FIELDS = [
     'id',
     'name',
@@ -77,7 +80,7 @@
 
   const listEdgeFirewallRulesEngineServiceWithDecorator = async (query) => {
     return await props.listEdgeFirewallRulesEngineService({
-      edgeFirewallId: props.edgeFirewallId,
+      id: props.edgeFirewallId,
       ...query
     })
   }
@@ -88,21 +91,6 @@
     })
   }
 
-  const reorderRulesEngineWithDecorator = async (
-    newOrderData,
-    currentOrderData,
-    ordering,
-    search
-  ) => {
-    return props.reorderEdgeFirewallRulesEngine(
-      newOrderData,
-      currentOrderData,
-      props.edgeFirewallId,
-      ordering,
-      search
-    )
-  }
-
   const handleTrackEditEvent = () => {
     tracker.product.clickToEdit({
       productName: 'Rules Engine'
@@ -127,9 +115,11 @@
     handleCreateTrackEvent()
     drawerRef.value.openCreateDrawer()
   }
+
   const openEditDrawer = (item) => {
     drawerRef.value.openEditDrawer(item.id)
   }
+
   const handleLoadData = (event) => {
     hasContentToList.value = event
   }
@@ -183,6 +173,50 @@
       service: deleteEdgeFirewallRulesEngineServiceWithDecorator
     }
   ]
+
+  const disabledOrdering = ref(true)
+
+  const checkOrderRules = async ({ event, data, moveItem }) => {
+    if (isLoadingButtonOrder.value) {
+      toast.add({
+        closable: true,
+        severity: 'info',
+        summary: 'info',
+        detail: 'Please wait until the current operation is completed.'
+      })
+      return
+    }
+    const { dragIndex: originIndex, dropIndex: destinationIndex, value: updatedTable } = event
+    const reorderedData = moveItem(data.value, updatedTable, originIndex, destinationIndex)
+
+    data.value = reorderedData
+    disabledOrdering.value = false
+  }
+
+  const isLoadingButtonOrder = ref(false)
+  const updateRulesOrder = async (data, reload) => {
+    disabledOrdering.value = true
+    try {
+      isLoadingButtonOrder.value = true
+      await props.reorderRulesEngine(data, props.edgeFirewallId)
+      toast.add({
+        closable: true,
+        severity: 'success',
+        summary: 'success',
+        detail: 'Reorder saved'
+      })
+    } catch (error) {
+      toast.add({
+        closable: true,
+        severity: 'error',
+        summary: 'error',
+        detail: error
+      })
+    } finally {
+      await reload()
+      isLoadingButtonOrder.value = false
+    }
+  }
 </script>
 <template>
   <Drawer
@@ -200,28 +234,59 @@
 
   <FetchListTableBlock
     v-if="hasContentToList"
+    :lazy="false"
     ref="listTableBlockRef"
     :reorderableRows="true"
     :listService="listEdgeFirewallRulesEngineServiceWithDecorator"
-    :onReorderService="reorderRulesEngineWithDecorator"
     :columns="getColumns"
     :editInDrawer="openEditDrawer"
-    :isReorderAllEnabled="true"
     @on-load-data="handleLoadData"
     @on-before-go-to-edit="handleTrackEditEvent"
     emptyListMessage="No rules found."
     addButtonLabel="Rules Engine"
+    :pt="{
+      thead: { class: !hasContentToList && 'hidden' }
+    }"
     :actions="actions"
+    @onReorder="checkOrderRules"
     isTabs
     :apiFields="EDGE_FIREWALL_RULES_ENGINE_API_FIELDS"
     :defaultOrderingFieldName="''"
+    :rowsPerPageOptions="[2000]"
   >
-    <template #addButton>
-      <PrimeButton
-        icon="pi pi-plus"
-        label="Rule"
-        @click="openCreateDrawer"
-      />
+    <template #addButton="{ reload, data }">
+      <div
+        class="flex gap-4"
+        data-testid="rules-engine-add-button"
+      >
+        <PrimeButton
+          icon="pi pi-plus"
+          label="Rule"
+          @click="openCreateDrawer"
+        />
+        <teleport to="#action-bar">
+          <div
+            class="flex w-full gap-4 justify-end h-14 items-center border-t surface-border sticky bottom-0 surface-section z-50 px-2 md:px-8"
+          >
+            <PrimeButton
+              outlined
+              icon="pi pi-save"
+              class="bg-primary"
+              :disabled="disabledOrdering"
+              :pt="{
+                label: { class: 'text-[var(--surface-section)]' },
+                icon: { class: 'text-[var(--surface-section)]' },
+                loadingIcon: { class: 'text-[var(--surface-section)]' }
+              }"
+              label="Save order"
+              :loading="isLoadingButtonOrder"
+              data-testid="rules-engine-save-order-button"
+              @click="updateRulesOrder(data, reload)"
+              v-tooltip.bottom="{ value: 'Saves the new order of rules.', showDelay: 200 }"
+            />
+          </div>
+        </teleport>
+      </div>
     </template>
   </FetchListTableBlock>
   <EmptyResultsBlock
@@ -241,6 +306,15 @@
         data-testid="create_Rules Engine_button"
         @click="openCreateDrawer"
       />
+      <PrimeButton
+        icon="pi pi-save"
+        :disabled="disabledOrdering"
+        label="Save order"
+        :loading="isLoadingButtonOrder"
+        data-testid="rules-engine-save-order-button"
+        @click="updateRulesOrder(data, reload)"
+        v-tooltip.bottom="{ value: 'Saves the new order of rules.', showDelay: 200 }"
+      />
     </template>
   </EmptyResultsBlock>
 </template>

From 9fe6dae96afd662fc3d7b242beed1d4c7160e1a0 Mon Sep 17 00:00:00 2001
From: Peterson Paulo <109550332+peterpaulo-azion@users.noreply.github.com>
Date: Mon, 18 Nov 2024 17:11:47 -0300
Subject: [PATCH 2/4] [UXE-5718] fix: Broken e2e tests due to extra spacing in
 page title (#1932)

---
 src/templates/page-heading-block/index.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/templates/page-heading-block/index.vue b/src/templates/page-heading-block/index.vue
index b2ebc30c5..591a52a53 100644
--- a/src/templates/page-heading-block/index.vue
+++ b/src/templates/page-heading-block/index.vue
@@ -72,8 +72,8 @@
           v-if="props.pageTitle"
           :class="{ 'flex gap-3 align-items-center': props.tag }"
         >
-          {{ props.pageTitle }}
-          <PrimeTag
+          {{ props.pageTitle
+          }}<PrimeTag
             v-if="props.tag"
             class="h-max"
             v-bind="props.tag"

From 904e2b76d3a4c17a876c60c725d689edaa394129 Mon Sep 17 00:00:00 2001
From: Vinicius Gubiani Ferreira <vini.g.fer@gmail.com>
Date: Mon, 18 Nov 2024 18:54:38 -0300
Subject: [PATCH 3/4] [NO-ISSUE] chore: Remove rules from IaC (#1938)

---
 azion/production/azion.json | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/azion/production/azion.json b/azion/production/azion.json
index 7bd4d9249..6819386b1 100644
--- a/azion/production/azion.json
+++ b/azion/production/azion.json
@@ -68,11 +68,6 @@
       "origin-id": 154233,
       "origin-key": "8c16e835-20af-41d5-a688-cac8e6aefa94",
       "name": "origin-console-feedback"
-    },
-    {
-      "origin-id": 162902,
-      "origin-key": "8b4c7f0a-6496-4a4d-8369-b39809903069",
-      "name": "maintaince-origin"
     }
   ],
   "rules-engine": {
@@ -163,11 +158,6 @@
         "name": "Route API Identity Providers",
         "phase": "request"
       },
-      {
-        "id": 316429,
-        "name": "maintaince page",
-        "phase": "request"
-      },
       {
         "id": 318350,
         "name": "Route GraphQL Accounting Queries to Manager Origin",

From 6206e1f6a6912c67417fee4d7a25ce8c06dbc571 Mon Sep 17 00:00:00 2001
From: Herbert Vicente Cotta Julio <hvcotta@gmail.com>
Date: Thu, 21 Nov 2024 09:56:12 -0300
Subject: [PATCH 4/4] [NO-ISSUE] fix: correction in pagination in tables with
 api v4 (#1947)

---
 .../list-edge-applications.cy.js              | 23 ++++++-
 .../edge-applications-paginated.json          | 65 +++++++++++++++++++
 .../block-selectors/list-table-block.js       |  3 +
 .../with-fetch-ordering-and-pagination.vue    | 24 +++++--
 .../EdgeApplicationsRulesEngine/ListView.vue  | 27 ++++----
 5 files changed, 120 insertions(+), 22 deletions(-)
 create mode 100644 cypress/fixtures/edge-application/edge-applications-paginated.json

diff --git a/cypress/e2mock/edge-application/list-edge-applications.cy.js b/cypress/e2mock/edge-application/list-edge-applications.cy.js
index 0b4e80e22..8e4bcb974 100644
--- a/cypress/e2mock/edge-application/list-edge-applications.cy.js
+++ b/cypress/e2mock/edge-application/list-edge-applications.cy.js
@@ -81,4 +81,25 @@ describe('Edge Application List Spec', { tags: ['@dev2'] }, () => {
       .its('response.body')
       .should('have.property', 'count', 100)
   })
-})
\ No newline at end of file
+
+  it('should paginate correctly list', function () {
+    cy.intercept('GET', '/api/v4/edge_application/*', (req) => {
+      if (req.url.includes('page_size=10')) {
+        req.reply({
+          fixture: '/edge-application/edge-applications-paginated.json'
+        })
+      }
+    }).as('paginatedEdgeApplicationsListApi')
+
+    cy.get(selectors.list.rowsPerPage.dropdown).click()
+    cy.get(selectors.list.rowsPerPage.option('10')).click()
+    cy.get(selectors.list.pageNumber.option('5')).click()
+    cy.wait('@paginatedEdgeApplicationsListApi')
+    cy.get(selectors.list.pageNumber.option('6')).should('be.visible')
+    cy.get(selectors.list.pageNumber.option('5')).should('have.class', 'p-highlight')
+
+    cy.get(selectors.list.searchInput).type('foo 1{enter}')
+    cy.get(selectors.list.pageNumber.option('1')).should('be.visible')
+    cy.get(selectors.list.pageNumber.option('1')).should('have.class', 'p-highlight')
+  })
+})
diff --git a/cypress/fixtures/edge-application/edge-applications-paginated.json b/cypress/fixtures/edge-application/edge-applications-paginated.json
new file mode 100644
index 000000000..842fdccb8
--- /dev/null
+++ b/cypress/fixtures/edge-application/edge-applications-paginated.json
@@ -0,0 +1,65 @@
+{
+  "count": 100,
+  "results": [
+    {
+      "id": 1727808946,
+      "name": "foo 1",
+      "last_editor": "foobar@azion.com",
+      "last_modified": "2024-10-01T18:45:58.915153Z"
+    },
+    {
+      "id": 1727808947,
+      "name": "foo 2",
+      "last_editor": "foobar@azion.com",
+      "last_modified": "2024-10-02T18:45:58.915153Z"
+    },
+    {
+      "id": 1727808948,
+      "name": "foo 3",
+      "last_editor": "foobar@azion.com",
+      "last_modified": "2024-10-03T18:45:58.915153Z"
+    },
+    {
+      "id": 1727808949,
+      "name": "foo 4",
+      "last_editor": "foobar@azion.com",
+      "last_modified": "2024-10-04T18:45:58.915153Z"
+    },
+    {
+      "id": 1727808950,
+      "name": "foo 5",
+      "last_editor": "foobar@azion.com",
+      "last_modified": "2024-10-05T18:45:58.915153Z"
+    },
+    {
+      "id": 1727808951,
+      "name": "foo 6",
+      "last_editor": "foobar@azion.com",
+      "last_modified": "2024-10-06T18:45:58.915153Z"
+    },
+    {
+      "id": 1727808952,
+      "name": "foo 7",
+      "last_editor": "foobar@azion.com",
+      "last_modified": "2024-10-07T18:45:58.915153Z"
+    },
+    {
+      "id": 1727808953,
+      "name": "foo 8",
+      "last_editor": "foobar@azion.com",
+      "last_modified": "2024-10-08T18:45:58.915153Z"
+    },
+    {
+      "id": 1727808954,
+      "name": "foo 9",
+      "last_editor": "foobar@azion.com",
+      "last_modified": "2024-10-09T18:45:58.915153Z"
+    },
+    {
+      "id": 1727808955,
+      "name": "foo 10",
+      "last_editor": "foobar@azion.com",
+      "last_modified": "2024-10-10T18:45:58.915153Z"
+    }
+  ]
+}
diff --git a/cypress/support/selectors/block-selectors/list-table-block.js b/cypress/support/selectors/block-selectors/list-table-block.js
index 0aa40bf3f..eb904c5f0 100644
--- a/cypress/support/selectors/block-selectors/list-table-block.js
+++ b/cypress/support/selectors/block-selectors/list-table-block.js
@@ -25,6 +25,9 @@ export default {
     dropdown: '.p-paginator-rpp-options',
     option: (size) => `li.p-dropdown-item[aria-label="${size}"]`
   },
+  pageNumber: {
+    option: (page) => `button.p-paginator-page[aria-label="${page}"]`
+  },
   orderingHeader: {
     firstColumn: ':nth-child(1) > .p-column-header-content > [data-pc-section="sort"] > .p-icon'
   }
diff --git a/src/templates/list-table-block/with-fetch-ordering-and-pagination.vue b/src/templates/list-table-block/with-fetch-ordering-and-pagination.vue
index 0053e9452..435043d5d 100644
--- a/src/templates/list-table-block/with-fetch-ordering-and-pagination.vue
+++ b/src/templates/list-table-block/with-fetch-ordering-and-pagination.vue
@@ -32,6 +32,7 @@
       @row-click="editItemSelected"
       @page="changeNumberOfLinesPerPage"
       @sort="fetchOnSort"
+      :first="firstItemIndex"
     >
       <template
         #header
@@ -451,6 +452,7 @@
   const totalRecords = ref()
   const savedSearch = ref('')
   const savedOrdering = ref('')
+  const firstItemIndex = ref(0)
 
   const firstLoadData = ref(true)
 
@@ -489,13 +491,14 @@
   /**
    * Moves an item within the original array based on updated positions in a reference array.
    *
-   * @param {Array} originalArray - The array to be modified.
+   * @param {Array} originalData - The array to be modified.
    * @param {Array} referenceArray - The reference array with the new order.
    * @param {number} fromIndex - The index of the item to move in the reference array.
    * @param {number} toIndex - The target index  in the reference array.
    * @returns {Array} The updated array with the item moved.
    */
-  const moveItem = (originalArray, referenceArray, fromIndex, toIndex) => {
+  const moveItem = (originalData, referenceArray, fromIndex, toIndex) => {
+    const originalArray = [...originalData]
     const oldItemMove = toIndex + Math.sign(fromIndex - toIndex)
     const itemToMoveId = referenceArray[toIndex]
     const targetItemId = referenceArray[oldItemMove]
@@ -622,14 +625,19 @@
   }
 
   const reload = async (query = {}) => {
-    loadData({
+    const commonParams = {
       page: 1,
       pageSize: itemsByPage.value,
       fields: props.apiFields,
-      search: savedSearch.value,
       ordering: savedOrdering.value,
       ...query
-    })
+    }
+
+    if (props.lazy) {
+      commonParams.search = savedSearch.value
+    }
+
+    loadData(commonParams)
   }
 
   const extractFieldValue = (rowData, field) => {
@@ -648,7 +656,7 @@
     const numberOfLinesPerPage = event.rows
     tableDefinitions.setNumberOfLinesPerPage(numberOfLinesPerPage)
     itemsByPage.value = numberOfLinesPerPage
-
+    firstItemIndex.value = event.first
     reload({ page: event.page + 1 })
   }
 
@@ -672,6 +680,10 @@
   }
 
   const fetchOnSearch = () => {
+    if (!props.lazy) return
+
+    const firstPage = 1
+    firstItemIndex.value = firstPage
     reload()
   }
 
diff --git a/src/views/EdgeApplicationsRulesEngine/ListView.vue b/src/views/EdgeApplicationsRulesEngine/ListView.vue
index 8632a8b2f..b712f9e95 100644
--- a/src/views/EdgeApplicationsRulesEngine/ListView.vue
+++ b/src/views/EdgeApplicationsRulesEngine/ListView.vue
@@ -221,25 +221,22 @@
       })
       return
     }
+
     const { dragIndex: originIndex, dropIndex: destinationIndex, value: updatedTable } = event
-    const alterFirstItem = originIndex === 0 || destinationIndex === 0
 
-    if (alterFirstItem) {
-      const firstItem = updatedTable[originIndex]
-      const secondItem = updatedTable[destinationIndex]
-      const isDefaultRuleMoved =
-        firstItem.name === 'Default Rule' || secondItem.name === 'Default Rule'
-      if (isDefaultRuleMoved) {
-        toast.add({
-          closable: true,
-          severity: 'error',
-          summary: 'The default rule cannot be reordered'
-        })
-        return
-      }
+    const reorderedData = moveItem(data.value, updatedTable, originIndex, destinationIndex)
+
+    const isFirstRuleNotDefault = reorderedData[0].name !== 'Default Rule'
+
+    if (isFirstRuleNotDefault) {
+      toast.add({
+        closable: true,
+        severity: 'error',
+        summary: 'The default rule cannot be reordered'
+      })
+      return
     }
 
-    const reorderedData = moveItem(data.value, updatedTable, originIndex, destinationIndex)
     data.value = reorderedData
     disabledOrdering.value = false
   }