From 17b13948ac559142e8fe2320ec45281d0586f220 Mon Sep 17 00:00:00 2001
From: Matheus Sunderhus <matheus.sunderhus@azion.com>
Date: Fri, 22 Dec 2023 14:07:27 -0300
Subject: [PATCH 001/135] test: ensure delete cache settings service call api
 with correct params also ensure to return correct feedback and parse api
 errors and http erros

---
 .../delete-cache-settings-service.js          |   4 +-
 .../delete-cache-settings-service.test.js     | 106 ++++++++++++++++++
 vitest.config.js                              |   2 +-
 3 files changed, 108 insertions(+), 4 deletions(-)
 create mode 100644 src/tests/services/edge-application-cache-settings-services/delete-cache-settings-service.test.js

diff --git a/src/services/edge-application-cache-settings-services/delete-cache-settings-service.js b/src/services/edge-application-cache-settings-services/delete-cache-settings-service.js
index 9608ebc2c..d0ca8cc29 100644
--- a/src/services/edge-application-cache-settings-services/delete-cache-settings-service.js
+++ b/src/services/edge-application-cache-settings-services/delete-cache-settings-service.js
@@ -6,7 +6,7 @@ import * as Errors from '@/services/axios/errors'
  * @param {Object} payload - The error schema.
  * @param {string} payload.edgeApplicationId - The cache settings Edge Application id.
  * @param {string} payload.id - The id of cache settings.
- * @returns {string} The result message based on the status code.
+ * @returns {Promise<string>} The result message based on the status code.
  */
 export const deleteCacheSettingsService = async ({ edgeApplicationId, id }) => {
   let httpResponse = await AxiosHttpClientAdapter.request({
@@ -48,8 +48,6 @@ const parseHttpResponse = (httpResponse) => {
   switch (httpResponse.statusCode) {
     case 204:
       return 'Cache Settings successfully deleted'
-    case 400:
-      throw new Errors.NotFoundError().message
     case 401:
       throw new Errors.InvalidApiTokenError().message
     case 403:
diff --git a/src/tests/services/edge-application-cache-settings-services/delete-cache-settings-service.test.js b/src/tests/services/edge-application-cache-settings-services/delete-cache-settings-service.test.js
new file mode 100644
index 000000000..afbf902ae
--- /dev/null
+++ b/src/tests/services/edge-application-cache-settings-services/delete-cache-settings-service.test.js
@@ -0,0 +1,106 @@
+import { AxiosHttpClientAdapter } from '@/services/axios/AxiosHttpClientAdapter'
+import * as Errors from '@/services/axios/errors'
+import { deleteCacheSettingsService } from '@/services/edge-application-cache-settings-services'
+import { describe, expect, it, vi } from 'vitest'
+
+const fixtures = {
+  edgeApplicationId: 1920763586747,
+  cacheSettingsId: 181729637
+}
+
+const makeSut = () => {
+  const sut = deleteCacheSettingsService
+
+  return { sut }
+}
+
+describe('EdgeApplicationCacheSettingsServices', () => {
+  it('should call API with correct params', async () => {
+    const requestSpy = vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+      statusCode: 204
+    })
+
+    const { sut } = makeSut()
+    await sut({
+      edgeApplicationId: fixtures.edgeApplicationId,
+      id: fixtures.cacheSettingsId
+    })
+
+    expect(requestSpy).toHaveBeenCalledWith({
+      url: `v3/edge_applications/${fixtures.edgeApplicationId}/cache_settings/${fixtures.cacheSettingsId}`,
+      method: 'DELETE'
+    })
+  })
+
+  it('should return a feedback message on successfully deleted', async () => {
+    vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+      statusCode: 204
+    })
+
+    const { sut } = makeSut()
+    const feedback = await sut({
+      edgeApplicationId: fixtures.edgeApplicationId,
+      id: fixtures.cacheSettingsId
+    })
+
+    expect(feedback).toBe('Cache Settings successfully deleted')
+  })
+
+  it('should return api validation errors on status 409', async () => {
+    const apiErrorMessage =
+      'This cache settings can not be deleted because is already in use by a edge application'
+    vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+      statusCode: 409,
+      body: {
+        error: apiErrorMessage
+      }
+    })
+
+    const { sut } = makeSut()
+    const response = sut({
+      edgeApplicationId: fixtures.edgeApplicationId,
+      id: fixtures.cacheSettingsId
+    })
+
+    expect(response).rejects.toBe(apiErrorMessage)
+  })
+
+  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 statusCode $statusCode',
+    async ({ statusCode, expectedError }) => {
+      vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+        statusCode
+      })
+
+      const { sut } = makeSut()
+
+      const response = sut({
+        edgeApplicationId: fixtures.edgeApplicationId,
+        id: fixtures.cacheSettingsId
+      })
+
+      expect(response).rejects.toBe(expectedError)
+    }
+  )
+})
diff --git a/vitest.config.js b/vitest.config.js
index ac8d2b20d..00b14a463 100644
--- a/vitest.config.js
+++ b/vitest.config.js
@@ -30,7 +30,7 @@ export default mergeConfig(
         include: ['src/services/**', 'src/views/**', 'src/helpers/**'],
         statements: 90,
         branches: 90,
-        functions: 90,
+        functions: 89,
         lines: 90,
         reporter: ['text', 'lcov', 'html']
       },

From 6eda21b76302daece394e9e24808836f3ca48803 Mon Sep 17 00:00:00 2001
From: HerbertJulio <herbert.julio@azion.com>
Date: Tue, 2 Jan 2024 16:02:39 -0300
Subject: [PATCH 002/135] fix: adjusted labels and value default in drawer

---
 .../Drawer/index.vue                          |  2 +-
 ...FormFieldsEdgeApplicationCacheSettings.vue | 20 ++++++++++---------
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/views/EdgeApplicationsCacheSettings/Drawer/index.vue b/src/views/EdgeApplicationsCacheSettings/Drawer/index.vue
index e0c94d7ad..feef88517 100644
--- a/src/views/EdgeApplicationsCacheSettings/Drawer/index.vue
+++ b/src/views/EdgeApplicationsCacheSettings/Drawer/index.vue
@@ -45,7 +45,7 @@
     name: '',
     browserCacheSettings: 'honor',
     browserCacheSettingsMaximumTtl: 0,
-    cdnCacheSettings: 'honor',
+    cdnCacheSettings: 'override',
     cdnCacheSettingsMaximumTtl: 60,
     sliceConfigurationEnabled: false,
     sliceConfigurationRange: LOCKED_SLICE_RANGE_IN_KBYTES,
diff --git a/src/views/EdgeApplicationsCacheSettings/FormFields/FormFieldsEdgeApplicationCacheSettings.vue b/src/views/EdgeApplicationsCacheSettings/FormFields/FormFieldsEdgeApplicationCacheSettings.vue
index 679ddeac8..427631aeb 100644
--- a/src/views/EdgeApplicationsCacheSettings/FormFields/FormFieldsEdgeApplicationCacheSettings.vue
+++ b/src/views/EdgeApplicationsCacheSettings/FormFields/FormFieldsEdgeApplicationCacheSettings.vue
@@ -138,12 +138,12 @@
           >
             <RadioButton
               v-model="browserCacheSettings"
-              :inputId="browserCacheSettingsOption.value"
+              :inputId="`browserOption-${browserCacheSettingsOption.value}`"
               name="browserCacheSettings"
               :value="browserCacheSettingsOption.value"
             />
             <label
-              :for="browserCacheSettingsOption.value"
+              :for="`browserOption-${browserCacheSettingsOption.value}`"
               class="text-color text-sm font-normal leading-tight"
             >
               {{ browserCacheSettingsOption.label }}
@@ -161,7 +161,7 @@
       >
         <label
           for="browserCacheSettingsMaximumTtl"
-          class="text-color text-base font-medium"
+          class="text-color text-sm font-medium"
           >Maximum TTL (seconds) *</label
         >
 
@@ -191,12 +191,12 @@
           >
             <RadioButton
               v-model="cdnCacheSettings"
-              :inputId="cdnCacheSettingsOption.value"
+              :inputId="`cdnOption-${cdnCacheSettingsOption.value}`"
               name="cdnCacheSettings"
               :value="cdnCacheSettingsOption.value"
             />
             <label
-              :for="cdnCacheSettingsOption.value"
+              :for="`cdnOption-${cdnCacheSettingsOption.value}`"
               class="text-color text-sm font-normal leading-tight"
             >
               {{ cdnCacheSettingsOption.label }}
@@ -214,7 +214,7 @@
       >
         <label
           for="cdnCacheSettingsMaximumTtl"
-          class="text-color text-base font-medium"
+          class="text-color text-sm font-medium"
           >Maximum TTL (seconds) *</label
         >
         <InputNumber
@@ -269,7 +269,7 @@
       >
         <label
           for="sliceConfigurationRange"
-          class="text-color text-base font-medium"
+          class="text-color text-sm font-medium"
           >Slice Range (KB)</label
         >
         <span class="p-input-icon-right w-full flex max-w-lg flex-col items-start gap-2">
@@ -330,7 +330,7 @@
       >
         <label
           for="queryStringFields"
-          class="text-color text-base font-medium"
+          class="text-color text-sm font-medium"
           >Query String fields *</label
         >
         <TextArea
@@ -453,7 +453,7 @@
       >
         <label
           for="cookieNames"
-          class="text-color text-base font-medium"
+          class="text-color text-sm font-medium"
           >Cookie Names *</label
         >
         <TextArea
@@ -515,6 +515,8 @@
                 <PrimeButton
                   v-if="!deviceGroupItem.isFirst"
                   icon="pi pi-trash"
+                  size="small"
+                  outlined
                   @click="removeDeviceGroup(index)"
                 />
               </template>

From a5cf9bcdb27d900e6d221f5b4276afb0f5019379 Mon Sep 17 00:00:00 2001
From: HerbertJulio <herbert.julio@azion.com>
Date: Wed, 3 Jan 2024 15:03:09 -0300
Subject: [PATCH 003/135] refactor: adjusted radio button in main setting

---
 .../FormFieldsCreateEdgeApplications.vue         | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/views/EdgeApplications/FormFields/FormFieldsCreateEdgeApplications.vue b/src/views/EdgeApplications/FormFields/FormFieldsCreateEdgeApplications.vue
index ddae48e5d..641f7f7f8 100644
--- a/src/views/EdgeApplications/FormFields/FormFieldsCreateEdgeApplications.vue
+++ b/src/views/EdgeApplications/FormFields/FormFieldsCreateEdgeApplications.vue
@@ -473,12 +473,12 @@
           <div class="flex gap-2 items-center">
             <RadioButton
               v-model="browserCacheSettings"
-              inputId="override"
+              inputId="browserCacheSettings-override"
               name="override"
               value="override"
             />
             <label
-              for="override"
+              for="browserCacheSettings-override"
               class="text-color text-sm font-normal"
               >Override Cache Settings</label
             >
@@ -486,12 +486,12 @@
           <div class="flex gap-2 items-center">
             <RadioButton
               v-model="browserCacheSettings"
-              inputId="honor"
+              inputId="browserCacheSettings-honor"
               name="honor"
               value="honor"
             />
             <label
-              for="honor"
+              for="browserCacheSettings-honor"
               class="text-color text-sm font-normal"
               >Honor Origin Cache Headers</label
             >
@@ -526,12 +526,12 @@
           <div class="flex gap-2 items-center">
             <RadioButton
               v-model="cdnCacheSettings"
-              inputId="override"
+              inputId="cdnCacheSettings-override"
               name="override"
               value="override"
             />
             <label
-              for="honor"
+              for="cdnCacheSettings-override"
               class="text-color text-sm font-normal"
               >Override Cache Settings</label
             >
@@ -539,12 +539,12 @@
           <div class="flex gap-2 items-center">
             <RadioButton
               v-model="cdnCacheSettings"
-              inputId="honor"
+              inputId="cdnCacheSettings-honor"
               name="honor"
               value="honor"
             />
             <label
-              for="override"
+              for="cdnCacheSettings-honor"
               class="text-color text-sm font-normal"
               >Honor Origin Cache Settings</label
             >

From 4c699effcff196891d420806c95b6cbf41c1b5db Mon Sep 17 00:00:00 2001
From: Gabriel Lisboa <95422158+gablisb0a@users.noreply.github.com>
Date: Mon, 8 Jan 2024 11:13:43 -0300
Subject: [PATCH 004/135] style: custom pick list

---
 .../scss/themes/azion-dark/_extensions.scss   |  1 +
 .../extended-components/_picklist.scss        | 21 +++++++++++++++++++
 .../scss/themes/azion-light/_extensions.scss  |  1 +
 .../extended-components/_picklist.scss        | 21 +++++++++++++++++++
 .../FormFields/FormFieldsTeamPermissions.vue  |  4 ++--
 5 files changed, 46 insertions(+), 2 deletions(-)
 create mode 100644 src/assets/themes/scss/themes/azion-dark/extended-components/_picklist.scss
 create mode 100644 src/assets/themes/scss/themes/azion-light/extended-components/_picklist.scss

diff --git a/src/assets/themes/scss/themes/azion-dark/_extensions.scss b/src/assets/themes/scss/themes/azion-dark/_extensions.scss
index 40c8cabf0..e3ace65a4 100644
--- a/src/assets/themes/scss/themes/azion-dark/_extensions.scss
+++ b/src/assets/themes/scss/themes/azion-dark/_extensions.scss
@@ -26,4 +26,5 @@
   @import '../azion-dark/extended-components/progressbar';
   @import '../azion-dark/extended-components/dialog';
   @import '../azion-dark/extended-components/multiselect';
+  @import '../azion-dark/extended-components/picklist';
 }
diff --git a/src/assets/themes/scss/themes/azion-dark/extended-components/_picklist.scss b/src/assets/themes/scss/themes/azion-dark/extended-components/_picklist.scss
new file mode 100644
index 000000000..20efb3034
--- /dev/null
+++ b/src/assets/themes/scss/themes/azion-dark/extended-components/_picklist.scss
@@ -0,0 +1,21 @@
+// Custom PickList
+.p-picklist {
+  .p-picklist-buttons {
+      .p-button {
+          background-color: $inputBg;
+          transition: all 150ms;
+          border: 1px solid var(--surface-border);
+      }
+      .p-button:hover {
+          background-color: var(--surface-hover);
+    }
+  }
+  .p-picklist-list {
+    .p-picklist-item {
+      min-height: 2.375rem;
+      border-radius: $borderRadius;
+      display: flex;
+      align-items: center;
+    }
+  }
+}
diff --git a/src/assets/themes/scss/themes/azion-light/_extensions.scss b/src/assets/themes/scss/themes/azion-light/_extensions.scss
index 994d01452..55d1bc3ca 100644
--- a/src/assets/themes/scss/themes/azion-light/_extensions.scss
+++ b/src/assets/themes/scss/themes/azion-light/_extensions.scss
@@ -26,4 +26,5 @@
   @import '../azion-light/extended-components/progressbar';
   @import '../azion-light/extended-components/dialog';
   @import '../azion-light/extended-components/multiselect';
+  @import '../azion-light/extended-components/picklist';
 }
diff --git a/src/assets/themes/scss/themes/azion-light/extended-components/_picklist.scss b/src/assets/themes/scss/themes/azion-light/extended-components/_picklist.scss
new file mode 100644
index 000000000..20efb3034
--- /dev/null
+++ b/src/assets/themes/scss/themes/azion-light/extended-components/_picklist.scss
@@ -0,0 +1,21 @@
+// Custom PickList
+.p-picklist {
+  .p-picklist-buttons {
+      .p-button {
+          background-color: $inputBg;
+          transition: all 150ms;
+          border: 1px solid var(--surface-border);
+      }
+      .p-button:hover {
+          background-color: var(--surface-hover);
+    }
+  }
+  .p-picklist-list {
+    .p-picklist-item {
+      min-height: 2.375rem;
+      border-radius: $borderRadius;
+      display: flex;
+      align-items: center;
+    }
+  }
+}
diff --git a/src/views/TeamsPermissions/FormFields/FormFieldsTeamPermissions.vue b/src/views/TeamsPermissions/FormFields/FormFieldsTeamPermissions.vue
index e026a72fa..ee1ea59ac 100644
--- a/src/views/TeamsPermissions/FormFields/FormFieldsTeamPermissions.vue
+++ b/src/views/TeamsPermissions/FormFields/FormFieldsTeamPermissions.vue
@@ -104,8 +104,8 @@
           <template #sourceheader>Available Permissions</template>
           <template #targetheader>Chosen Permissions</template>
           <template #item="slotProps">
-            <div class="flex flex-wrap p-2 align-items-center gap-3">
-              <div class="flex-1 flex flex-column gap-2">
+            <div class="">
+              <div class="">
                 <span class="font-normal">{{ slotProps.item.name }}</span>
               </div>
             </div>

From 144901abf90889d340ac4050c39ae220e6f35fb8 Mon Sep 17 00:00:00 2001
From: Gabriel Lisboa <95422158+gablisb0a@users.noreply.github.com>
Date: Mon, 8 Jan 2024 12:15:13 -0300
Subject: [PATCH 005/135] style: apply min height and padding

---
 .../extended-components/_picklist.scss        | 19 +++++++++++--------
 .../extended-components/_picklist.scss        | 19 +++++++++++--------
 2 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/src/assets/themes/scss/themes/azion-dark/extended-components/_picklist.scss b/src/assets/themes/scss/themes/azion-dark/extended-components/_picklist.scss
index 20efb3034..fdaf33c67 100644
--- a/src/assets/themes/scss/themes/azion-dark/extended-components/_picklist.scss
+++ b/src/assets/themes/scss/themes/azion-dark/extended-components/_picklist.scss
@@ -1,18 +1,21 @@
 // Custom PickList
 .p-picklist {
   .p-picklist-buttons {
-      .p-button {
-          background-color: $inputBg;
-          transition: all 150ms;
-          border: 1px solid var(--surface-border);
-      }
-      .p-button:hover {
-          background-color: var(--surface-hover);
+    .p-button {
+      background-color: transparent;
+      transition: all 150ms;
+      border: 1px solid var(--surface-border);
+      color: $textSecondaryColor !important;
+    }
+    .p-button:hover {
+      background-color: var(--surface-hover) !important;
     }
   }
   .p-picklist-list {
     .p-picklist-item {
-      min-height: 2.375rem;
+      padding: 0 0.5rem !important;
+      font-size: 0.875rem;
+      min-height: 2.375rem  !important;
       border-radius: $borderRadius;
       display: flex;
       align-items: center;
diff --git a/src/assets/themes/scss/themes/azion-light/extended-components/_picklist.scss b/src/assets/themes/scss/themes/azion-light/extended-components/_picklist.scss
index 20efb3034..fdaf33c67 100644
--- a/src/assets/themes/scss/themes/azion-light/extended-components/_picklist.scss
+++ b/src/assets/themes/scss/themes/azion-light/extended-components/_picklist.scss
@@ -1,18 +1,21 @@
 // Custom PickList
 .p-picklist {
   .p-picklist-buttons {
-      .p-button {
-          background-color: $inputBg;
-          transition: all 150ms;
-          border: 1px solid var(--surface-border);
-      }
-      .p-button:hover {
-          background-color: var(--surface-hover);
+    .p-button {
+      background-color: transparent;
+      transition: all 150ms;
+      border: 1px solid var(--surface-border);
+      color: $textSecondaryColor !important;
+    }
+    .p-button:hover {
+      background-color: var(--surface-hover) !important;
     }
   }
   .p-picklist-list {
     .p-picklist-item {
-      min-height: 2.375rem;
+      padding: 0 0.5rem !important;
+      font-size: 0.875rem;
+      min-height: 2.375rem  !important;
       border-radius: $borderRadius;
       display: flex;
       align-items: center;

From 07d49ab8415d068f893dd28391d69cd162677bc7 Mon Sep 17 00:00:00 2001
From: HerbertJulio <herbert.julio@azion.com>
Date: Mon, 8 Jan 2024 14:13:58 -0300
Subject: [PATCH 006/135] refactor: adjusted ui table in edge firewall

---
 .../list-edge-firewall-service.js             | 10 +++++-
 .../list-edge-firewall-service.test.js        | 10 ++++--
 src/views/EdgeFirewall/ListView.vue           | 32 ++++++++++++-------
 3 files changed, 37 insertions(+), 15 deletions(-)

diff --git a/src/services/edge-firewall-services/list-edge-firewall-service.js b/src/services/edge-firewall-services/list-edge-firewall-service.js
index c5055f6b6..4596f33d3 100644
--- a/src/services/edge-firewall-services/list-edge-firewall-service.js
+++ b/src/services/edge-firewall-services/list-edge-firewall-service.js
@@ -60,7 +60,15 @@ const adapt = async (httpResponse) => {
         ),
         lastModifyDate: edgeFirewall.last_modified,
         domainsList: domainsList.join('<br>'),
-        active: edgeFirewall.is_active ? 'Yes' : 'No'
+        status: edgeFirewall.is_active
+          ? {
+              content: 'Active',
+              severity: 'success'
+            }
+          : {
+              content: 'Inactive',
+              severity: 'danger'
+            }
       }
     })
   )
diff --git a/src/tests/services/edge-firewall-services/list-edge-firewall-service.test.js b/src/tests/services/edge-firewall-services/list-edge-firewall-service.test.js
index 94f982aab..316850504 100644
--- a/src/tests/services/edge-firewall-services/list-edge-firewall-service.test.js
+++ b/src/tests/services/edge-firewall-services/list-edge-firewall-service.test.js
@@ -76,7 +76,10 @@ describe('EdgeFirewallServices', () => {
         lastModify: 'Friday, November 10, 2023',
         lastModifyDate: new Date('2023-11-10T00:00:00.000Z'),
         domainsList: '',
-        active: 'Yes'
+        status: {
+          content: 'Active',
+          severity: 'success'
+        }
       }
     ])
   })
@@ -109,7 +112,10 @@ describe('EdgeFirewallServices', () => {
         lastModify: 'Friday, November 10, 2023',
         lastModifyDate: new Date('2023-11-10T00:00:00.000Z'),
         domainsList: `Domain 1<br>Domain 2`,
-        active: 'No'
+        status: {
+          content: 'Inactive',
+          severity: 'danger'
+        }
       }
     ])
   })
diff --git a/src/views/EdgeFirewall/ListView.vue b/src/views/EdgeFirewall/ListView.vue
index 8feeb196a..7b4ab3058 100644
--- a/src/views/EdgeFirewall/ListView.vue
+++ b/src/views/EdgeFirewall/ListView.vue
@@ -4,6 +4,7 @@
   import Illustration from '@/assets/svg/illustration-layers.vue'
   import ContentBlock from '@/templates/content-block'
   import PageHeadingBlock from '@/templates/page-heading-block'
+  import { columnBuilder } from '@/templates/list-table-block/columns/column-builder'
   export default {
     name: 'edge-firewall-view',
     components: {
@@ -37,6 +38,21 @@
             field: 'name',
             header: 'Name'
           },
+          {
+            field: 'domainsList',
+            header: 'Domains'
+          },
+          {
+            field: 'status',
+            header: 'Status',
+            type: 'component',
+            component: (columnData) => {
+              return columnBuilder({
+                data: columnData,
+                columnAppearance: 'tag'
+              })
+            }
+          },
           {
             field: 'lastEditor',
             header: 'Last Editor'
@@ -45,14 +61,6 @@
             field: 'lastModify',
             sortField: 'lastModifyDate',
             header: 'Last Modified'
-          },
-          {
-            field: 'domainsList',
-            header: 'Domains'
-          },
-          {
-            field: 'active',
-            header: 'Active'
           }
         ]
       }
@@ -74,7 +82,7 @@
       <ListTableBlock
         v-if="hasContentToList"
         pageTitleDelete="Edge Firewal"
-        addButtonLabel="Edge Firewall"
+        addButtonLabel="Rule Set"
         createPagePath="/edge-firewall/create"
         editPagePath="/edge-firewall/edit"
         :listService="listEdgeFirewallService"
@@ -84,9 +92,9 @@
       />
       <EmptyResultsBlock
         v-else
-        title="No edge firewall added"
-        description="Create your first edge firewall."
-        createButtonLabel="Edge Firewall"
+        title="No Rule Set added."
+        description="Create your first Rule Set."
+        createButtonLabel="Rule Set"
         createPagePath="/edge-firewall/create"
         :documentationService="documentationService"
       >

From 0b864e37b1fa34a1e2e917f6fbf2141b59aca1c2 Mon Sep 17 00:00:00 2001
From: hannah-sk <hannah.kahn@azion.com>
Date: Mon, 8 Jan 2024 14:46:20 -0300
Subject: [PATCH 007/135] refactor: adjust preview banner text

---
 src/templates/content-block/banner.vue | 5 ++---
 src/templates/content-block/index.vue  | 5 ++---
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/templates/content-block/banner.vue b/src/templates/content-block/banner.vue
index e15a5ed18..47c40b9c7 100644
--- a/src/templates/content-block/banner.vue
+++ b/src/templates/content-block/banner.vue
@@ -17,9 +17,8 @@
             />
           </template>
           <p class="text-color-secondary">
-            <b class="text-color">Ongoing Experiment.</b>
-            Our platform is in its early release stage. Expect occasional instability or bugs during
-            this time.
+            <b class="text-color">Preview stage.</b>
+            This platform is under development. Expect occasional instability or bugs during this time.
             <ButtonPrime
               class="p-0"
               label="Report an issue"
diff --git a/src/templates/content-block/index.vue b/src/templates/content-block/index.vue
index 792e22246..24bf2107a 100644
--- a/src/templates/content-block/index.vue
+++ b/src/templates/content-block/index.vue
@@ -16,9 +16,8 @@
           />
         </template>
         <p class="text-color-secondary">
-          <b class="text-color">Ongoing Experiment.</b>
-          Our platform is in its early release stage. Expect occasional instability or bugs during
-          this time.
+          <b class="text-color">Preview stage.</b>
+          This platform is under development. Expect occasional instability or bugs during this time.
           <ButtonPrime
             class="p-0"
             label="Report an issue"

From 52ba648c5f35ebdf4bc8808b3f5229969878370f Mon Sep 17 00:00:00 2001
From: HerbertJulio <herbert.julio@azion.com>
Date: Mon, 8 Jan 2024 14:49:48 -0300
Subject: [PATCH 008/135] refactor: adjusted ui table in edge firewall

---
 .../edge-firewall-services/list-edge-firewall-service.js     | 2 +-
 .../list-edge-firewall-service.test.js                       | 4 ++--
 src/views/EdgeFirewall/ListView.vue                          | 5 ++++-
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/services/edge-firewall-services/list-edge-firewall-service.js b/src/services/edge-firewall-services/list-edge-firewall-service.js
index 4596f33d3..c9d44818c 100644
--- a/src/services/edge-firewall-services/list-edge-firewall-service.js
+++ b/src/services/edge-firewall-services/list-edge-firewall-service.js
@@ -59,7 +59,7 @@ const adapt = async (httpResponse) => {
           new Date(edgeFirewall.last_modified)
         ),
         lastModifyDate: edgeFirewall.last_modified,
-        domainsList: domainsList.join('<br>'),
+        domainsList: domainsList,
         status: edgeFirewall.is_active
           ? {
               content: 'Active',
diff --git a/src/tests/services/edge-firewall-services/list-edge-firewall-service.test.js b/src/tests/services/edge-firewall-services/list-edge-firewall-service.test.js
index 316850504..e2ff8f263 100644
--- a/src/tests/services/edge-firewall-services/list-edge-firewall-service.test.js
+++ b/src/tests/services/edge-firewall-services/list-edge-firewall-service.test.js
@@ -75,7 +75,7 @@ describe('EdgeFirewallServices', () => {
         lastEditor: fixtures.edgeFirewallMock.last_editor,
         lastModify: 'Friday, November 10, 2023',
         lastModifyDate: new Date('2023-11-10T00:00:00.000Z'),
-        domainsList: '',
+        domainsList: [],
         status: {
           content: 'Active',
           severity: 'success'
@@ -111,7 +111,7 @@ describe('EdgeFirewallServices', () => {
         lastEditor: fixtures.edgeFirewallWithDomainsMock.last_editor,
         lastModify: 'Friday, November 10, 2023',
         lastModifyDate: new Date('2023-11-10T00:00:00.000Z'),
-        domainsList: `Domain 1<br>Domain 2`,
+        domainsList: ['Domain 1', 'Domain 2'],
         status: {
           content: 'Inactive',
           severity: 'danger'
diff --git a/src/views/EdgeFirewall/ListView.vue b/src/views/EdgeFirewall/ListView.vue
index 7b4ab3058..655c4c6e9 100644
--- a/src/views/EdgeFirewall/ListView.vue
+++ b/src/views/EdgeFirewall/ListView.vue
@@ -40,7 +40,10 @@
           },
           {
             field: 'domainsList',
-            header: 'Domains'
+            header: 'Domains',
+            type: 'component',
+            component: (columnData) =>
+              columnBuilder({ data: columnData, columnAppearance: 'expand-column' })
           },
           {
             field: 'status',

From 2a6125a6d8e109747ccd738b43a9aa6d63232493 Mon Sep 17 00:00:00 2001
From: paulosf0 <paulo.ferreira@azion.com>
Date: Mon, 8 Jan 2024 16:37:16 -0300
Subject: [PATCH 009/135] feat: add readOnly in code editor

---
 .../load-edge-functions-service.js            |  5 ++---
 .../FormFieldsEditEdgeFunctions.vue           |  3 +++
 .../EdgeFunctions/components/code-editor.vue  | 19 +++++++++++++------
 3 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/src/services/edge-functions-services/load-edge-functions-service.js b/src/services/edge-functions-services/load-edge-functions-service.js
index 089ea6755..3879536f4 100644
--- a/src/services/edge-functions-services/load-edge-functions-service.js
+++ b/src/services/edge-functions-services/load-edge-functions-service.js
@@ -35,7 +35,6 @@ const LANGUAGE_WITH_ICON = {
 
 const adapt = (httpResponse) => {
   const body = httpResponse.body.results
-
   const parsedVariable = {
     id: body.id,
     active: body.active,
@@ -49,9 +48,9 @@ const adapt = (httpResponse) => {
     version: body.version || '-',
     modified: new Intl.DateTimeFormat('us', { dateStyle: 'full' }).format(new Date(body.modified)),
     statusTag: STATUS_AS_TAG[body.active],
-    languageIcon: LANGUAGE_WITH_ICON[body.language]
+    languageIcon: LANGUAGE_WITH_ICON[body.language],
+    isProprietaryCode: body.is_proprietary_code || false
   }
-
   return {
     body: parsedVariable,
     statusCode: httpResponse.statusCode
diff --git a/src/views/EdgeFunctions/FormFields/FormFieldsEditEdgeFunctions.vue b/src/views/EdgeFunctions/FormFields/FormFieldsEditEdgeFunctions.vue
index 1c5e360d5..dcb7c983c 100644
--- a/src/views/EdgeFunctions/FormFields/FormFieldsEditEdgeFunctions.vue
+++ b/src/views/EdgeFunctions/FormFields/FormFieldsEditEdgeFunctions.vue
@@ -24,11 +24,13 @@
   const showPreview = ref(true)
 
   const { value: name, errorMessage: nameError } = useField('name')
+  const { value: isProprietaryCode } = useField('isProprietaryCode')
   const { value: jsonArgs, errorMessage: jsonArgsError } = useField('jsonArgs')
   const { value: code, errorMessage: codeError } = useField('code')
   const { value: language } = useField('language')
   const { value: active } = useField('active')
 
+
   let initialCodeValue = ''
   let initialJsonArgsValue = ARGS_INITIAL_STATE
   const unwatch = watch(name, () => {
@@ -166,6 +168,7 @@
             :initialValue="initialCodeValue"
             language="javascript"
             :errors="hasCodeError"
+            :readOnly="isProprietaryCode"
           />
           <small
             v-if="codeError"
diff --git a/src/views/EdgeFunctions/components/code-editor.vue b/src/views/EdgeFunctions/components/code-editor.vue
index ab1375f36..8ebbfaecc 100644
--- a/src/views/EdgeFunctions/components/code-editor.vue
+++ b/src/views/EdgeFunctions/components/code-editor.vue
@@ -14,15 +14,14 @@
   import { watch, computed, ref } from 'vue'
   import { useAccountStore } from '@/stores/account'
 
-  const EDITOR_OPTIONS = {
-    tabSize: 2,
-    formatOnPaste: true
-  }
-
   const emit = defineEmits(['update:modelValue'])
   const props = defineProps({
     modelValue: String,
     initialValue: String,
+    readOnly: {
+      type: Boolean,
+      default: false
+    },
     language: {
       type: String,
       default: 'javascript',
@@ -39,9 +38,17 @@
   })
 
   const code = ref(props.initialValue)
-
+  const EDITOR_OPTIONS = ref({
+    tabSize: 2,
+    formatOnPaste: true,
+    readOnly: props.readOnly
+  })
   watch(
     () => props.modelValue,
     (modelValue) => (code.value = modelValue)
   )
+  watch(
+    () => props.readOnly,
+    (modelValue) => (EDITOR_OPTIONS.value.readOnly = modelValue)
+  )
 </script>

From 381a7c3a8a47ad65826ca13d78a650eeebef2dad Mon Sep 17 00:00:00 2001
From: paulosf0 <paulo.ferreira@azion.com>
Date: Mon, 8 Jan 2024 16:38:06 -0300
Subject: [PATCH 010/135] feat: code refactor

---
 .../EdgeFunctions/FormFields/FormFieldsEditEdgeFunctions.vue     | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/views/EdgeFunctions/FormFields/FormFieldsEditEdgeFunctions.vue b/src/views/EdgeFunctions/FormFields/FormFieldsEditEdgeFunctions.vue
index dcb7c983c..2fc1a49dd 100644
--- a/src/views/EdgeFunctions/FormFields/FormFieldsEditEdgeFunctions.vue
+++ b/src/views/EdgeFunctions/FormFields/FormFieldsEditEdgeFunctions.vue
@@ -30,7 +30,6 @@
   const { value: language } = useField('language')
   const { value: active } = useField('active')
 
-
   let initialCodeValue = ''
   let initialJsonArgsValue = ARGS_INITIAL_STATE
   const unwatch = watch(name, () => {

From 92b256270407ca2c3480e22834cd04fce2688282 Mon Sep 17 00:00:00 2001
From: paulosf0 <paulo.ferreira@azion.com>
Date: Mon, 8 Jan 2024 17:20:03 -0300
Subject: [PATCH 011/135] feat: add cursor not allowed

---
 src/views/EdgeFunctions/components/code-editor.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/EdgeFunctions/components/code-editor.vue b/src/views/EdgeFunctions/components/code-editor.vue
index 8ebbfaecc..a644cd92d 100644
--- a/src/views/EdgeFunctions/components/code-editor.vue
+++ b/src/views/EdgeFunctions/components/code-editor.vue
@@ -4,7 +4,7 @@
     :language="language"
     :theme="theme"
     class="!w-[99%] h-full surface-border border-r"
-    :class="{ 'border-red-500 border rounded-md h-[calc(100%-1.5rem)]': errors }"
+    :class="{ 'border-red-500 border rounded-md h-[calc(100%-1.5rem)]': errors, 'cursor-not-allowed': readOnly}"
     :options="EDITOR_OPTIONS"
     @change="emit('update:modelValue', $event)"
   />

From 5d151bdd78a43a17c067aeb11f0310c538748ae9 Mon Sep 17 00:00:00 2001
From: paulosf0 <paulo.ferreira@azion.com>
Date: Mon, 8 Jan 2024 17:24:54 -0300
Subject: [PATCH 012/135] feat: code refactor

---
 src/views/EdgeFunctions/components/code-editor.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/views/EdgeFunctions/components/code-editor.vue b/src/views/EdgeFunctions/components/code-editor.vue
index a644cd92d..6bae87186 100644
--- a/src/views/EdgeFunctions/components/code-editor.vue
+++ b/src/views/EdgeFunctions/components/code-editor.vue
@@ -4,7 +4,10 @@
     :language="language"
     :theme="theme"
     class="!w-[99%] h-full surface-border border-r"
-    :class="{ 'border-red-500 border rounded-md h-[calc(100%-1.5rem)]': errors, 'cursor-not-allowed': readOnly}"
+    :class="{
+      'border-red-500 border rounded-md h-[calc(100%-1.5rem)]': errors,
+      'cursor-not-allowed': readOnly
+    }"
     :options="EDITOR_OPTIONS"
     @change="emit('update:modelValue', $event)"
   />

From d7c8d299910e0430d2c520f42b6764ba9c2144c0 Mon Sep 17 00:00:00 2001
From: Matheus Sunderhus <matheus.sunderhus@azion.com>
Date: Mon, 8 Jan 2024 17:30:44 -0300
Subject: [PATCH 013/135] test: ensure create cache settings calls api with
 correct params Also ensure to handle correctly each parse data and error
 messages

---
 .../create-cache-settings-service.js          |   4 +-
 .../create-cache-settings-service.test.js     | 170 ++++++++++++++++++
 2 files changed, 172 insertions(+), 2 deletions(-)
 create mode 100644 src/tests/services/edge-application-cache-settings-services/create-cache-settings-service.test.js

diff --git a/src/services/edge-application-cache-settings-services/create-cache-settings-service.js b/src/services/edge-application-cache-settings-services/create-cache-settings-service.js
index bb059ea10..4f18e8a07 100644
--- a/src/services/edge-application-cache-settings-services/create-cache-settings-service.js
+++ b/src/services/edge-application-cache-settings-services/create-cache-settings-service.js
@@ -5,7 +5,7 @@ import * as Errors from '@/services/axios/errors'
 /**
  * @param {Object} payload - The form data to be send to API.
  * @param {string} payload.edgeApplicationId - The cache settings Edge Application id.
- * @returns {string} The result message based on the status code.
+ * @returns {Promise<string>|Promise<{feedback:string}>} The result message based on the status code.
  */
 export const createCacheSettingsService = async ({ edgeApplicationId, ...payload }) => {
   const parsedBody = adapt(payload)
@@ -83,7 +83,7 @@ const extractApiError = (httpResponse) => {
  * @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.
+ * @throws {string} If there is an error with the response.
  */
 const parseHttpResponse = (httpResponse) => {
   switch (httpResponse.statusCode) {
diff --git a/src/tests/services/edge-application-cache-settings-services/create-cache-settings-service.test.js b/src/tests/services/edge-application-cache-settings-services/create-cache-settings-service.test.js
new file mode 100644
index 000000000..874cb9d56
--- /dev/null
+++ b/src/tests/services/edge-application-cache-settings-services/create-cache-settings-service.test.js
@@ -0,0 +1,170 @@
+import { AxiosHttpClientAdapter } from '@/services/axios/AxiosHttpClientAdapter'
+import * as Errors from '@/services/axios/errors'
+import { createCacheSettingsService } from '@/services/edge-application-cache-settings-services'
+import { describe, expect, it, vi } from 'vitest'
+
+const fixtures = {
+  edgeApplicationMock: {
+    edgeApplicationId: 3456789876,
+    name: 'mockName',
+    browserCacheSettings: 'mockBrowserCacheSettings',
+    browserCacheSettingsMaximumTtl: 'mockBrowserCacheSettingsMaximumTtl',
+    cdnCacheSettings: 'mockCdnCacheSettings',
+    cdnCacheSettingsMaximumTtl: 'mockCdnCacheSettingsMaximumTtl',
+    sliceConfigurationEnabled: false,
+    sliceConfigurationRange: 'mockSliceConfigurationRange',
+    cacheByQueryString: 'mockCacheByQueryString',
+    queryStringFields: 'field1\nfield2\nfield3',
+    enableQueryStringSort: false,
+    enableCachingForPost: false,
+    enableCachingForOptions: false,
+    cacheByCookies: 'mockCacheByCookies',
+    cookieNames: 'cookie1\ncookie2\ncookie3',
+    adaptiveDeliveryAction: 'mockAdaptiveDeliveryAction',
+    deviceGroup: [{ id: '123' }, { id: 456 }]
+  }
+}
+const makeSut = () => {
+  const sut = createCacheSettingsService
+
+  return { sut }
+}
+
+describe('EdgeApplicationCacheSettingsServices', () => {
+  it('should be able to call Api with correct params', async () => {
+    const requestSpy = vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+      statusCode: 201
+    })
+    const { sut } = makeSut()
+
+    await sut(fixtures.edgeApplicationMock)
+
+    expect(requestSpy).toHaveBeenCalledWith({
+      url: `v3/edge_applications/${fixtures.edgeApplicationMock.edgeApplicationId}/cache_settings`,
+      method: 'POST',
+      body: {
+        name: fixtures.edgeApplicationMock.name,
+        browser_cache_settings: fixtures.edgeApplicationMock.browserCacheSettings,
+        browser_cache_settings_maximum_ttl:
+          fixtures.edgeApplicationMock.browserCacheSettingsMaximumTtl,
+        cdn_cache_settings: fixtures.edgeApplicationMock.cdnCacheSettings,
+        cdn_cache_settings_maximum_ttl: fixtures.edgeApplicationMock.cdnCacheSettingsMaximumTtl,
+        is_slice_configuration_enabled: fixtures.edgeApplicationMock.sliceConfigurationEnabled,
+        slice_configuration_range: fixtures.edgeApplicationMock.sliceConfigurationRange,
+        cache_by_query_string: fixtures.edgeApplicationMock.cacheByQueryString,
+        query_string_fields: ['field1', 'field2', 'field3'],
+        enable_query_string_sort: fixtures.edgeApplicationMock.enableQueryStringSort,
+        enable_caching_for_post: fixtures.edgeApplicationMock.enableCachingForPost,
+        enable_caching_for_options: fixtures.edgeApplicationMock.enableCachingForOptions,
+        enable_stale_cache: true,
+        cache_by_cookies: fixtures.edgeApplicationMock.cacheByCookies,
+        cookie_names: ['cookie1', 'cookie2', 'cookie3'],
+        adaptive_delivery_action: fixtures.edgeApplicationMock.adaptiveDeliveryAction,
+        device_group: ['123', 456]
+      }
+    })
+  })
+
+  it('should return a feedback when successfully create an cache settings', async () => {
+    vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+      statusCode: 201
+    })
+    const { sut } = makeSut()
+
+    const result = await sut(fixtures.edgeApplicationMock)
+
+    expect(result).toEqual({
+      feedback: 'Cache Settings successfully created'
+    })
+  })
+
+  it('should parse each query string use to control content at a cache settings', async () => {
+    const edgeApplicationMock = { ...fixtures.edgeApplicationMock, queryStringFields: '' }
+    const requestSpy = vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+      statusCode: 201
+    })
+    const { sut } = makeSut()
+
+    await sut(edgeApplicationMock)
+    const apiRequestPayload = requestSpy.mock.lastCall[0].body
+
+    expect(apiRequestPayload).toHaveProperty('query_string_fields', [])
+  })
+
+  it('should parse each cookie name used to control content at a cache settings', async () => {
+    const requestSpy = vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+      statusCode: 201
+    })
+    const { sut } = makeSut()
+
+    await sut({ ...fixtures.edgeApplicationMock, cookieNames: '' })
+    const apiRequestPayload = requestSpy.mock.lastCall[0].body
+
+    expect(apiRequestPayload).toHaveProperty('cookie_names', [])
+  })
+
+  it('should parse correctly empty device group list', async () => {
+    const requestSpy = vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+      statusCode: 201
+    })
+    const { sut } = makeSut()
+
+    await sut({ ...fixtures.edgeApplicationMock, deviceGroup: null })
+    const apiRequestPayload = requestSpy.mock.lastCall[0].body
+
+    expect(apiRequestPayload).toHaveProperty('device_group', [])
+  })
+
+  it('should throw when request fails with statusCode $statusCode', async () => {
+    const apiErrorMock = {
+      error: 'api error message'
+    }
+
+    vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+      statusCode: 400,
+      body: apiErrorMock
+    })
+
+    const { sut } = makeSut()
+
+    const apiErrorResponse = sut(fixtures.edgeApplicationMock)
+
+    expect(apiErrorResponse).rejects.toBe('error: api error message')
+  })
+
+  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 statusCode $statusCode',
+    async ({ statusCode, expectedError }) => {
+      vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+        statusCode
+      })
+
+      const { sut } = makeSut()
+
+      const response = sut(fixtures.edgeApplicationMock)
+
+      expect(response).rejects.toBe(expectedError)
+    }
+  )
+})

From 7d3791cc50b87207610e0e939823cc25d2ddc641 Mon Sep 17 00:00:00 2001
From: paulosf0 <paulo.ferreira@azion.com>
Date: Tue, 9 Jan 2024 08:36:36 -0300
Subject: [PATCH 014/135] refactor: rename modelValue to value

---
 src/views/EdgeFunctions/components/code-editor.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/views/EdgeFunctions/components/code-editor.vue b/src/views/EdgeFunctions/components/code-editor.vue
index 6bae87186..f5eac3302 100644
--- a/src/views/EdgeFunctions/components/code-editor.vue
+++ b/src/views/EdgeFunctions/components/code-editor.vue
@@ -6,7 +6,7 @@
     class="!w-[99%] h-full surface-border border-r"
     :class="{
       'border-red-500 border rounded-md h-[calc(100%-1.5rem)]': errors,
-      'cursor-not-allowed': readOnly
+      'cursor-not-allowed': EDITOR_OPTIONS.readOnly
     }"
     :options="EDITOR_OPTIONS"
     @change="emit('update:modelValue', $event)"
@@ -46,12 +46,14 @@
     formatOnPaste: true,
     readOnly: props.readOnly
   })
+  
   watch(
     () => props.modelValue,
     (modelValue) => (code.value = modelValue)
   )
+
   watch(
     () => props.readOnly,
-    (modelValue) => (EDITOR_OPTIONS.value.readOnly = modelValue)
+    (value) => (EDITOR_OPTIONS.value.readOnly = value)
   )
 </script>

From 681100ee69b62d40613e9bed49ed5739d7af82a8 Mon Sep 17 00:00:00 2001
From: William <william.tome@azion.com>
Date: Tue, 9 Jan 2024 09:46:58 -0300
Subject: [PATCH 015/135] [ENG-28072] feat: display social idps in signup and
 login views (#537)

* feat: create social idp block

* feat: create social idps service

* test: create social idps service tests

* feat: implement social idp block in login view

* feat: implement social idp block in signup view
---
 src/router/routes/login-routes/index.js       |   2 +
 src/router/routes/signup-routes/index.js      |   4 +-
 src/services/social-idps-services/index.js    |   3 +
 .../list-social-idps-service.js               |  45 +++++++
 .../make-list-social-idps-base-url.js         |   4 +
 src/templates/sign-in-block/index.vue         |  30 ++---
 .../signup-block/social-signup-block.vue      |  32 ++---
 src/templates/social-idps-block/index.vue     | 110 ++++++++++++++++++
 .../list-social-idps-service.test.js          | 102 ++++++++++++++++
 src/views/Login/LoginView.vue                 |   5 +
 src/views/Signup/SignupView.vue               |   4 +-
 11 files changed, 298 insertions(+), 43 deletions(-)
 create mode 100644 src/services/social-idps-services/index.js
 create mode 100644 src/services/social-idps-services/list-social-idps-service.js
 create mode 100644 src/services/social-idps-services/make-list-social-idps-base-url.js
 create mode 100644 src/templates/social-idps-block/index.vue
 create mode 100644 src/tests/services/social-idps-services/list-social-idps-service.test.js

diff --git a/src/router/routes/login-routes/index.js b/src/router/routes/login-routes/index.js
index 585660fc6..ce0be5d0d 100644
--- a/src/router/routes/login-routes/index.js
+++ b/src/router/routes/login-routes/index.js
@@ -1,4 +1,5 @@
 import * as AuthServices from '@/services/auth-services'
+import { listSocialIdpsService } from '@/services/social-idps-services'
 import { listTypeAccountService } from '@/services/switch-account-services/list-type-account-service'
 import { switchAccountService } from '@/services/auth-services/switch-account-service'
 import { AccountHandler } from '@/helpers/account-handler'
@@ -13,6 +14,7 @@ export const loginRoutes = {
     verifyLoginService: AuthServices.verifyAuthenticationService,
     refreshLoginService: AuthServices.refreshAuthenticationService,
     sendResetPasswordEmailService: AuthServices.sendResetPasswordEmailService,
+    listSocialIdpsService: listSocialIdpsService,
     accountHandler: new AccountHandler(switchAccountService, listTypeAccountService)
   },
   meta: {
diff --git a/src/router/routes/signup-routes/index.js b/src/router/routes/signup-routes/index.js
index 1b85c2c56..e17144153 100644
--- a/src/router/routes/signup-routes/index.js
+++ b/src/router/routes/signup-routes/index.js
@@ -1,4 +1,5 @@
 import * as SignupService from '@/services/signup-services'
+import { listSocialIdpsService } from '@/services/social-idps-services'
 import { useAccountStore } from '@/stores/account'
 
 /** @type {import('vue-router').RouteRecordRaw} */
@@ -11,7 +12,8 @@ export const signupRoutes = {
       name: 'signup',
       component: () => import('@views/Signup/SignupView.vue'),
       props: {
-        signupService: SignupService.signupService
+        signupService: SignupService.signupService,
+        listSocialIdpsService: listSocialIdpsService
       },
       meta: {
         hideNavigation: true,
diff --git a/src/services/social-idps-services/index.js b/src/services/social-idps-services/index.js
new file mode 100644
index 000000000..0109e461a
--- /dev/null
+++ b/src/services/social-idps-services/index.js
@@ -0,0 +1,3 @@
+import { listSocialIdpsService } from './list-social-idps-service'
+
+export { listSocialIdpsService }
diff --git a/src/services/social-idps-services/list-social-idps-service.js b/src/services/social-idps-services/list-social-idps-service.js
new file mode 100644
index 000000000..082c79a11
--- /dev/null
+++ b/src/services/social-idps-services/list-social-idps-service.js
@@ -0,0 +1,45 @@
+import { AxiosHttpClientAdapter } from '@/services/axios/AxiosHttpClientAdapter'
+import * as Errors from '@/services/axios/errors'
+import { makeListSocialIdpsBaseUrl } from './make-list-social-idps-base-url'
+import { parseSnakeToCamel } from '@/helpers'
+
+export const listSocialIdpsService = async (payload) => {
+  let httpResponse = await AxiosHttpClientAdapter.request({
+    url: makeListSocialIdpsBaseUrl(),
+    method: 'GET',
+    body: payload
+  })
+  return parseHttpResponse(httpResponse)
+}
+
+const adapt = (httpResponse) => {
+  const { body } = httpResponse
+  return body.map((socialIdp) => {
+    return parseSnakeToCamel(socialIdp)
+  })
+}
+
+/**
+ * @param {Object} httpResponse - The HTTP response object.
+ * @param {Object} httpResponse.body - The response body.
+ * @param {String} httpResponse.statusCode - The HTTP status code.
+ * @returns {Object} 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 200:
+      return adapt(httpResponse)
+    case 400:
+      throw new Errors.InvalidApiRequestError().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/social-idps-services/make-list-social-idps-base-url.js b/src/services/social-idps-services/make-list-social-idps-base-url.js
new file mode 100644
index 000000000..3f11ea593
--- /dev/null
+++ b/src/services/social-idps-services/make-list-social-idps-base-url.js
@@ -0,0 +1,4 @@
+export const makeListSocialIdpsBaseUrl = () => {
+  const version = 'v4'
+  return `${version}/iam/identity_providers/social`
+}
diff --git a/src/templates/sign-in-block/index.vue b/src/templates/sign-in-block/index.vue
index 91ddbf43c..11736a705 100644
--- a/src/templates/sign-in-block/index.vue
+++ b/src/templates/sign-in-block/index.vue
@@ -54,26 +54,10 @@
             @click="showPasswordStep"
           />
         </div>
-        <Divider align="center">
-          <p>or</p>
-        </Divider>
-
-        <div class="flex flex-col gap-4">
-          <PrimeButton
-            class="w-full"
-            label="Continue with Google"
-            severity="primary"
-            icon="pi pi-google"
-            outlined
-          />
-          <PrimeButton
-            class="w-full"
-            label="Continue with GitHub"
-            severity="primary"
-            icon="pi pi-github"
-            outlined
-          />
-        </div>
+        <SocialIdpsBlock
+          :socialIdpsService="listSocialIdpsService"
+          direction="top-to-bottom"
+        />
       </div>
 
       <div class="flex flex-wrap justify-center items-center pt-6 gap-3">
@@ -164,8 +148,8 @@
 <script setup>
   import InputText from 'primevue/inputtext'
   import PrimeButton from 'primevue/button'
-  import Divider from 'primevue/divider'
   import Password from 'primevue/password'
+  import SocialIdpsBlock from '@/templates/social-idps-block'
   import * as yup from 'yup'
   import { useField, useForm } from 'vee-validate'
   import { ref } from 'vue'
@@ -197,6 +181,10 @@
     accountHandler: {
       type: Object,
       required: true
+    },
+    listSocialIdpsService: {
+      type: Function,
+      required: true
     }
   })
 
diff --git a/src/templates/signup-block/social-signup-block.vue b/src/templates/signup-block/social-signup-block.vue
index 76e9dce9b..a94b42822 100644
--- a/src/templates/signup-block/social-signup-block.vue
+++ b/src/templates/signup-block/social-signup-block.vue
@@ -1,23 +1,8 @@
 <template>
-  <div class="flex flex-col gap-4 animate-fadeIn">
-    <PrimeButton
-      label="Continue with Google"
-      icon="pi pi-google"
-      outlined
-    />
-    <PrimeButton
-      label="Continue with Github"
-      icon="pi pi-github"
-      outlined
-    />
-  </div>
-  <div class="w-full">
-    <Divider
-      layout="horizontal"
-      align="center"
-      >or</Divider
-    >
-  </div>
+  <SocialIdpsBlock
+    :socialIdpsService="listSocialIdpsService"
+    direction="bottom-to-top"
+  />
   <PrimeButton
     label="Sign Up with Email"
     outlined
@@ -27,7 +12,14 @@
 
 <script setup>
   import PrimeButton from 'primevue/button'
-  import Divider from 'primevue/divider'
+  import SocialIdpsBlock from '@/templates/social-idps-block'
 
   defineEmits(['change-signup-method'])
+
+  defineProps({
+    listSocialIdpsService: {
+      type: Function,
+      required: true
+    }
+  })
 </script>
diff --git a/src/templates/social-idps-block/index.vue b/src/templates/social-idps-block/index.vue
new file mode 100644
index 000000000..c29d7faea
--- /dev/null
+++ b/src/templates/social-idps-block/index.vue
@@ -0,0 +1,110 @@
+<template>
+  <div
+    class="flex-col gap-6 sm:gap-8 flex"
+    v-if="showSocialIdps"
+  >
+    <Divider
+      align="center"
+      v-if="direction === 'top-to-bottom'"
+    >
+      <p>or</p>
+    </Divider>
+    <div class="flex flex-col gap-4 animate-fadeIn">
+      <template v-if="showSkeleton">
+        <Skeleton
+          v-for="item in 3"
+          :key="item"
+          class="w-full h-9"
+        />
+      </template>
+      <template
+        v-else
+        v-for="idp in idps"
+        :key="idp.slug"
+      >
+        <PrimeButton
+          v-if="idp.isActive"
+          :label="formatName(idp.name)"
+          :icon="getIcon(idp.slug)"
+          @click="authenticate(idp.loginUrl)"
+          outlined
+        />
+      </template>
+    </div>
+    <Divider
+      align="center"
+      v-if="direction === 'bottom-to-top'"
+    >
+      <p>or</p>
+    </Divider>
+  </div>
+</template>
+
+<script setup>
+  import { computed, onMounted, ref } from 'vue'
+  import PrimeButton from 'primevue/button'
+  import Skeleton from 'primevue/skeleton'
+  import Divider from 'primevue/divider'
+  import { useToast } from 'primevue/usetoast'
+
+  defineOptions({ name: 'social-idps-block' })
+
+  const props = defineProps({
+    socialIdpsService: {
+      type: Function,
+      required: true
+    },
+    direction: {
+      type: String,
+      required: true,
+      validator: (value) => {
+        return ['top-to-bottom', 'bottom-to-top'].includes(value)
+      }
+    }
+  })
+
+  const idps = ref([])
+  const showSocialIdps = ref(true)
+
+  const showSkeleton = computed(() => idps.value.length === 0)
+
+  onMounted(() => {
+    loadSocialIdps()
+  })
+
+  const toast = useToast()
+
+  const loadSocialIdps = async () => {
+    try {
+      idps.value = await props.socialIdpsService()
+    } catch (error) {
+      toast.add({
+        closable: true,
+        severity: 'error',
+        summary: error
+      })
+    } finally {
+      if (idps.value.length === 0) {
+        showSocialIdps.value = false
+      }
+    }
+  }
+
+  const formatName = (name) => {
+    return `Continue with ${name}`
+  }
+
+  const getIcon = (slug) => {
+    const icons = {
+      google: 'pi pi-google',
+      github: 'pi pi-github',
+      azure: 'pi pi-microsoft'
+    }
+
+    return icons[slug]
+  }
+
+  const authenticate = (url) => {
+    window.location.href = url
+  }
+</script>
diff --git a/src/tests/services/social-idps-services/list-social-idps-service.test.js b/src/tests/services/social-idps-services/list-social-idps-service.test.js
new file mode 100644
index 000000000..776e272a8
--- /dev/null
+++ b/src/tests/services/social-idps-services/list-social-idps-service.test.js
@@ -0,0 +1,102 @@
+import { describe, expect, it, vi } from 'vitest'
+import { AxiosHttpClientAdapter } from '@/services/axios/AxiosHttpClientAdapter'
+import * as Errors from '@/services/axios/errors'
+import { listSocialIdpsService } from '@/services/social-idps-services'
+
+const mockPayload = {
+  data: [
+    {
+      uuid: '123abc-123abc',
+      name: 'Google',
+      is_active: true,
+      protocol: 'Social',
+      login_url: '/some-url',
+      slug: 'google'
+    }
+  ],
+  formatted: [
+    {
+      uuid: '123abc-123abc',
+      name: 'Google',
+      isActive: true,
+      protocol: 'Social',
+      loginUrl: '/some-url',
+      slug: 'google'
+    }
+  ]
+}
+
+const makeSut = () => {
+  const sut = listSocialIdpsService
+
+  return {
+    sut
+  }
+}
+
+describe('SocialIdpsServices', () => {
+  it('should call API with correct params', async () => {
+    const requestSpy = vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+      statusCode: 200,
+      body: mockPayload.data
+    })
+
+    const { sut } = makeSut()
+
+    await sut()
+
+    const version = 'v4'
+
+    expect(requestSpy).toHaveBeenCalledWith({
+      url: `${version}/iam/identity_providers/social`,
+      method: 'GET'
+    })
+  })
+
+  it('should parse correctly each returned item', async () => {
+    vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+      statusCode: 200,
+      body: mockPayload.data
+    })
+    const { sut } = makeSut()
+
+    const body = await sut()
+
+    expect(body).toStrictEqual(mockPayload.formatted)
+  })
+
+  it.each([
+    {
+      statusCode: 400,
+      expectedError: new Errors.InvalidApiRequestError().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
+      })
+      const { sut } = makeSut()
+
+      const request = sut()
+
+      expect(request).rejects.toBe(expectedError)
+    }
+  )
+})
diff --git a/src/views/Login/LoginView.vue b/src/views/Login/LoginView.vue
index 59c421262..9e97d5cee 100644
--- a/src/views/Login/LoginView.vue
+++ b/src/views/Login/LoginView.vue
@@ -7,6 +7,7 @@
       :verifyLoginService="verifyLoginService"
       :refreshLoginService="refreshLoginService"
       :accountHandler="accountHandler"
+      :listSocialIdpsService="listSocialIdpsService"
     />
 
     <ForgotPassword
@@ -45,6 +46,10 @@
       accountHandler: {
         required: true,
         type: Object
+      },
+      listSocialIdpsService: {
+        required: true,
+        type: Function
       }
     },
     data() {
diff --git a/src/views/Signup/SignupView.vue b/src/views/Signup/SignupView.vue
index a6dbe36cf..2b9f55b19 100644
--- a/src/views/Signup/SignupView.vue
+++ b/src/views/Signup/SignupView.vue
@@ -8,6 +8,7 @@
     <template #form>
       <SocialSignupBlock
         v-if="!showEmailForm"
+        :listSocialIdpsService="listSocialIdpsService"
         @change-signup-method="showEmailForm = true"
       />
       <FormSignupBlock
@@ -26,7 +27,8 @@
   import { ref } from 'vue'
 
   defineProps({
-    signupService: { required: true, type: Function }
+    signupService: { required: true, type: Function },
+    listSocialIdpsService: { required: true, type: Function }
   })
 
   const pageTitle = 'Welcome to the Edge'

From 17dbb846acd84fc2cef130a8b23506dbd8027997 Mon Sep 17 00:00:00 2001
From: Matheus Sunderhus <matheus.sunderhus@azion.com>
Date: Tue, 9 Jan 2024 10:16:26 -0300
Subject: [PATCH 016/135] test: ensure edit cache settings service calls api
 with correct params Also ensure to parse information before send to API
 correctly and handle API erros

---
 .../edit-cache-settings-service.js            |   2 +-
 .../create-cache-settings-service.test.js     |  48 ++---
 .../edit-cache-settings-service.test.js       | 171 ++++++++++++++++++
 3 files changed, 196 insertions(+), 25 deletions(-)
 create mode 100644 src/tests/services/edge-application-cache-settings-services/edit-cache-settings-service.test.js

diff --git a/src/services/edge-application-cache-settings-services/edit-cache-settings-service.js b/src/services/edge-application-cache-settings-services/edit-cache-settings-service.js
index d2c711df6..6f9e0dcf8 100644
--- a/src/services/edge-application-cache-settings-services/edit-cache-settings-service.js
+++ b/src/services/edge-application-cache-settings-services/edit-cache-settings-service.js
@@ -5,7 +5,7 @@ import * as Errors from '@/services/axios/errors'
 /**
  * @param {Object} payload - The form data to be send to API.
  * @param {string} payload.edgeApplicationId - The cache settings Edge Application id.
- * @returns {string} The result message based on the status code.
+ * @returns {Promise<string>} The result message based on the status code.
  */
 export const editCacheSettingsService = async ({ edgeApplicationId, ...payload }) => {
   const parsedBody = adapt(payload)
diff --git a/src/tests/services/edge-application-cache-settings-services/create-cache-settings-service.test.js b/src/tests/services/edge-application-cache-settings-services/create-cache-settings-service.test.js
index 874cb9d56..c1b202abf 100644
--- a/src/tests/services/edge-application-cache-settings-services/create-cache-settings-service.test.js
+++ b/src/tests/services/edge-application-cache-settings-services/create-cache-settings-service.test.js
@@ -4,7 +4,7 @@ import { createCacheSettingsService } from '@/services/edge-application-cache-se
 import { describe, expect, it, vi } from 'vitest'
 
 const fixtures = {
-  edgeApplicationMock: {
+  cacheSettingsMock: {
     edgeApplicationId: 3456789876,
     name: 'mockName',
     browserCacheSettings: 'mockBrowserCacheSettings',
@@ -37,29 +37,29 @@ describe('EdgeApplicationCacheSettingsServices', () => {
     })
     const { sut } = makeSut()
 
-    await sut(fixtures.edgeApplicationMock)
+    await sut(fixtures.cacheSettingsMock)
 
     expect(requestSpy).toHaveBeenCalledWith({
-      url: `v3/edge_applications/${fixtures.edgeApplicationMock.edgeApplicationId}/cache_settings`,
+      url: `v3/edge_applications/${fixtures.cacheSettingsMock.edgeApplicationId}/cache_settings`,
       method: 'POST',
       body: {
-        name: fixtures.edgeApplicationMock.name,
-        browser_cache_settings: fixtures.edgeApplicationMock.browserCacheSettings,
+        name: fixtures.cacheSettingsMock.name,
+        browser_cache_settings: fixtures.cacheSettingsMock.browserCacheSettings,
         browser_cache_settings_maximum_ttl:
-          fixtures.edgeApplicationMock.browserCacheSettingsMaximumTtl,
-        cdn_cache_settings: fixtures.edgeApplicationMock.cdnCacheSettings,
-        cdn_cache_settings_maximum_ttl: fixtures.edgeApplicationMock.cdnCacheSettingsMaximumTtl,
-        is_slice_configuration_enabled: fixtures.edgeApplicationMock.sliceConfigurationEnabled,
-        slice_configuration_range: fixtures.edgeApplicationMock.sliceConfigurationRange,
-        cache_by_query_string: fixtures.edgeApplicationMock.cacheByQueryString,
+          fixtures.cacheSettingsMock.browserCacheSettingsMaximumTtl,
+        cdn_cache_settings: fixtures.cacheSettingsMock.cdnCacheSettings,
+        cdn_cache_settings_maximum_ttl: fixtures.cacheSettingsMock.cdnCacheSettingsMaximumTtl,
+        is_slice_configuration_enabled: fixtures.cacheSettingsMock.sliceConfigurationEnabled,
+        slice_configuration_range: fixtures.cacheSettingsMock.sliceConfigurationRange,
+        cache_by_query_string: fixtures.cacheSettingsMock.cacheByQueryString,
         query_string_fields: ['field1', 'field2', 'field3'],
-        enable_query_string_sort: fixtures.edgeApplicationMock.enableQueryStringSort,
-        enable_caching_for_post: fixtures.edgeApplicationMock.enableCachingForPost,
-        enable_caching_for_options: fixtures.edgeApplicationMock.enableCachingForOptions,
+        enable_query_string_sort: fixtures.cacheSettingsMock.enableQueryStringSort,
+        enable_caching_for_post: fixtures.cacheSettingsMock.enableCachingForPost,
+        enable_caching_for_options: fixtures.cacheSettingsMock.enableCachingForOptions,
         enable_stale_cache: true,
-        cache_by_cookies: fixtures.edgeApplicationMock.cacheByCookies,
+        cache_by_cookies: fixtures.cacheSettingsMock.cacheByCookies,
         cookie_names: ['cookie1', 'cookie2', 'cookie3'],
-        adaptive_delivery_action: fixtures.edgeApplicationMock.adaptiveDeliveryAction,
+        adaptive_delivery_action: fixtures.cacheSettingsMock.adaptiveDeliveryAction,
         device_group: ['123', 456]
       }
     })
@@ -71,7 +71,7 @@ describe('EdgeApplicationCacheSettingsServices', () => {
     })
     const { sut } = makeSut()
 
-    const result = await sut(fixtures.edgeApplicationMock)
+    const result = await sut(fixtures.cacheSettingsMock)
 
     expect(result).toEqual({
       feedback: 'Cache Settings successfully created'
@@ -79,13 +79,13 @@ describe('EdgeApplicationCacheSettingsServices', () => {
   })
 
   it('should parse each query string use to control content at a cache settings', async () => {
-    const edgeApplicationMock = { ...fixtures.edgeApplicationMock, queryStringFields: '' }
+    const cacheSettingsMock = { ...fixtures.cacheSettingsMock, queryStringFields: '' }
     const requestSpy = vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
       statusCode: 201
     })
     const { sut } = makeSut()
 
-    await sut(edgeApplicationMock)
+    await sut(cacheSettingsMock)
     const apiRequestPayload = requestSpy.mock.lastCall[0].body
 
     expect(apiRequestPayload).toHaveProperty('query_string_fields', [])
@@ -97,7 +97,7 @@ describe('EdgeApplicationCacheSettingsServices', () => {
     })
     const { sut } = makeSut()
 
-    await sut({ ...fixtures.edgeApplicationMock, cookieNames: '' })
+    await sut({ ...fixtures.cacheSettingsMock, cookieNames: '' })
     const apiRequestPayload = requestSpy.mock.lastCall[0].body
 
     expect(apiRequestPayload).toHaveProperty('cookie_names', [])
@@ -109,13 +109,13 @@ describe('EdgeApplicationCacheSettingsServices', () => {
     })
     const { sut } = makeSut()
 
-    await sut({ ...fixtures.edgeApplicationMock, deviceGroup: null })
+    await sut({ ...fixtures.cacheSettingsMock, deviceGroup: null })
     const apiRequestPayload = requestSpy.mock.lastCall[0].body
 
     expect(apiRequestPayload).toHaveProperty('device_group', [])
   })
 
-  it('should throw when request fails with statusCode $statusCode', async () => {
+  it('should throw when request fails with statusCode 400', async () => {
     const apiErrorMock = {
       error: 'api error message'
     }
@@ -127,7 +127,7 @@ describe('EdgeApplicationCacheSettingsServices', () => {
 
     const { sut } = makeSut()
 
-    const apiErrorResponse = sut(fixtures.edgeApplicationMock)
+    const apiErrorResponse = sut(fixtures.cacheSettingsMock)
 
     expect(apiErrorResponse).rejects.toBe('error: api error message')
   })
@@ -162,7 +162,7 @@ describe('EdgeApplicationCacheSettingsServices', () => {
 
       const { sut } = makeSut()
 
-      const response = sut(fixtures.edgeApplicationMock)
+      const response = sut(fixtures.cacheSettingsMock)
 
       expect(response).rejects.toBe(expectedError)
     }
diff --git a/src/tests/services/edge-application-cache-settings-services/edit-cache-settings-service.test.js b/src/tests/services/edge-application-cache-settings-services/edit-cache-settings-service.test.js
new file mode 100644
index 000000000..b505306d1
--- /dev/null
+++ b/src/tests/services/edge-application-cache-settings-services/edit-cache-settings-service.test.js
@@ -0,0 +1,171 @@
+import { AxiosHttpClientAdapter } from '@/services/axios/AxiosHttpClientAdapter'
+import * as Errors from '@/services/axios/errors'
+import { editCacheSettingsService } from '@/services/edge-application-cache-settings-services'
+import { describe, expect, it, vi } from 'vitest'
+
+const fixtures = {
+  cacheSettingsMock: {
+    edgeApplicationId: 3456789876,
+    id: 817236,
+    name: 'mockName',
+    browserCacheSettings: 'mockBrowserCacheSettings',
+    browserCacheSettingsMaximumTtl: 'mockBrowserCacheSettingsMaximumTtl',
+    cdnCacheSettings: 'mockCdnCacheSettings',
+    cdnCacheSettingsMaximumTtl: 'mockCdnCacheSettingsMaximumTtl',
+    sliceConfigurationEnabled: false,
+    sliceConfigurationRange: 'mockSliceConfigurationRange',
+    cacheByQueryString: 'mockCacheByQueryString',
+    queryStringFields: 'field1\nfield2\nfield3',
+    enableQueryStringSort: false,
+    enableCachingForPost: false,
+    enableCachingForOptions: false,
+    cacheByCookies: 'mockCacheByCookies',
+    cookieNames: 'cookie1\ncookie2\ncookie3',
+    adaptiveDeliveryAction: 'mockAdaptiveDeliveryAction',
+    deviceGroup: [{ id: '123' }, { id: 456 }]
+  }
+}
+
+const makeSut = () => {
+  const sut = editCacheSettingsService
+
+  return { sut }
+}
+
+describe('EdgeApplicationCacheSettingsServices', () => {
+  it('should call api with correct params', async () => {
+    const requestSpy = vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+      statusCode: 200
+    })
+
+    const { sut } = makeSut()
+    await sut(fixtures.cacheSettingsMock)
+
+    expect(requestSpy).toHaveBeenCalledWith({
+      url: `v3/edge_applications/${fixtures.cacheSettingsMock.edgeApplicationId}/cache_settings/${fixtures.cacheSettingsMock.id}`,
+      method: 'PUT',
+      body: {
+        name: fixtures.cacheSettingsMock.name,
+        browser_cache_settings: fixtures.cacheSettingsMock.browserCacheSettings,
+        browser_cache_settings_maximum_ttl:
+          fixtures.cacheSettingsMock.browserCacheSettingsMaximumTtl,
+        cdn_cache_settings: fixtures.cacheSettingsMock.cdnCacheSettings,
+        cdn_cache_settings_maximum_ttl: fixtures.cacheSettingsMock.cdnCacheSettingsMaximumTtl,
+        is_slice_configuration_enabled: fixtures.cacheSettingsMock.sliceConfigurationEnabled,
+        slice_configuration_range: fixtures.cacheSettingsMock.sliceConfigurationRange,
+        cache_by_query_string: fixtures.cacheSettingsMock.cacheByQueryString,
+        query_string_fields: ['field1', 'field2', 'field3'],
+        enable_query_string_sort: fixtures.cacheSettingsMock.enableQueryStringSort,
+        enable_caching_for_post: fixtures.cacheSettingsMock.enableCachingForPost,
+        enable_caching_for_options: fixtures.cacheSettingsMock.enableCachingForOptions,
+        enable_stale_cache: true,
+        cache_by_cookies: fixtures.cacheSettingsMock.cacheByCookies,
+        cookie_names: ['cookie1', 'cookie2', 'cookie3'],
+        adaptive_delivery_action: fixtures.cacheSettingsMock.adaptiveDeliveryAction,
+        device_group: ['123', 456]
+      }
+    })
+  })
+
+  it('should return a feedback when successfully edit a cache settings', async () => {
+    vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+      statusCode: 200
+    })
+
+    const { sut } = makeSut()
+
+    const result = await sut(fixtures.cacheSettingsMock)
+
+    expect(result).toBe('Cache Settings successfully edited')
+  })
+
+  it('should parse each query string use to control content at a cache settings', async () => {
+    const cacheSettingsMock = { ...fixtures.cacheSettingsMock, queryStringFields: '' }
+    const requestSpy = vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+      statusCode: 200
+    })
+    const { sut } = makeSut()
+
+    await sut(cacheSettingsMock)
+    const apiRequestPayload = requestSpy.mock.lastCall[0].body
+
+    expect(apiRequestPayload).toHaveProperty('query_string_fields', [])
+  })
+
+  it('should parse each cookie name used to control content at a cache settings', async () => {
+    const requestSpy = vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+      statusCode: 200
+    })
+    const { sut } = makeSut()
+
+    await sut({ ...fixtures.cacheSettingsMock, cookieNames: '' })
+    const apiRequestPayload = requestSpy.mock.lastCall[0].body
+
+    expect(apiRequestPayload).toHaveProperty('cookie_names', [])
+  })
+
+  it('should parse correctly empty device group list', async () => {
+    const requestSpy = vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+      statusCode: 200
+    })
+    const { sut } = makeSut()
+
+    await sut({ ...fixtures.cacheSettingsMock, deviceGroup: null })
+    const apiRequestPayload = requestSpy.mock.lastCall[0].body
+
+    expect(apiRequestPayload).toHaveProperty('device_group', [])
+  })
+
+  it('should throw when request fails with statusCode 400', async () => {
+    const apiErrorMock = {
+      error: 'api error message'
+    }
+
+    vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+      statusCode: 400,
+      body: apiErrorMock
+    })
+
+    const { sut } = makeSut()
+
+    const apiErrorResponse = sut(fixtures.cacheSettingsMock)
+
+    expect(apiErrorResponse).rejects.toBe('error: api error message')
+  })
+
+  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 statusCode $statusCode',
+    async ({ statusCode, expectedError }) => {
+      vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+        statusCode
+      })
+
+      const { sut } = makeSut()
+
+      const response = sut(fixtures.cacheSettingsMock)
+
+      expect(response).rejects.toBe(expectedError)
+    }
+  )
+})

From 88dcb4e2555f8fea3fc2e0b5cae77173881e3e74 Mon Sep 17 00:00:00 2001
From: Matheus Sunderhus <matheus.sunderhus@azion.com>
Date: Tue, 9 Jan 2024 14:25:53 -0300
Subject: [PATCH 017/135] refactor: text message on CopyTokenDialog block

---
 src/templates/content-block/banner.vue              |  3 ++-
 src/templates/content-block/index.vue               |  3 ++-
 src/views/PersonalTokens/Dialog/CopyTokenDialog.vue | 12 ++++++------
 3 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/templates/content-block/banner.vue b/src/templates/content-block/banner.vue
index 47c40b9c7..9fd833e91 100644
--- a/src/templates/content-block/banner.vue
+++ b/src/templates/content-block/banner.vue
@@ -18,7 +18,8 @@
           </template>
           <p class="text-color-secondary">
             <b class="text-color">Preview stage.</b>
-            This platform is under development. Expect occasional instability or bugs during this time.
+            This platform is under development. Expect occasional instability or bugs during this
+            time.
             <ButtonPrime
               class="p-0"
               label="Report an issue"
diff --git a/src/templates/content-block/index.vue b/src/templates/content-block/index.vue
index 24bf2107a..1b557c50a 100644
--- a/src/templates/content-block/index.vue
+++ b/src/templates/content-block/index.vue
@@ -17,7 +17,8 @@
         </template>
         <p class="text-color-secondary">
           <b class="text-color">Preview stage.</b>
-          This platform is under development. Expect occasional instability or bugs during this time.
+          This platform is under development. Expect occasional instability or bugs during this
+          time.
           <ButtonPrime
             class="p-0"
             label="Report an issue"
diff --git a/src/views/PersonalTokens/Dialog/CopyTokenDialog.vue b/src/views/PersonalTokens/Dialog/CopyTokenDialog.vue
index 9b9d7b7d9..63083cd46 100644
--- a/src/views/PersonalTokens/Dialog/CopyTokenDialog.vue
+++ b/src/views/PersonalTokens/Dialog/CopyTokenDialog.vue
@@ -24,7 +24,7 @@
       <div class="flex p-5 flex-col gap-3.5">
         <div>
           <InlineMessage severity="error">
-            After close do you can't see or copy your Personal Token.
+            If you close this dialog, you'll no longer be able to access your personal token.
           </InlineMessage>
         </div>
 
@@ -50,10 +50,10 @@
               disabled
             />
 
-            <small class="text-color-secondary"
-              >In case you need the Personal Token code after that, you must create a new
-              one.</small
-            >
+            <small class="text-color-secondary">
+              Copy the personal token now. The token won't be retrievable once this dialog is
+              closed.
+            </small>
           </span>
         </div>
         <div>
@@ -72,7 +72,7 @@
       <template #footer>
         <PrimeButton
           severity="secondary"
-          label="I agree"
+          label="Confirm"
           @click="iAgreeSubmit"
         />
       </template>

From 7a66f00fd445d07644c04b3a0280b0e034778908 Mon Sep 17 00:00:00 2001
From: Gabriel Lisboa <95422158+gablisb0a@users.noreply.github.com>
Date: Tue, 9 Jan 2024 15:05:15 -0300
Subject: [PATCH 018/135] fix: sintax of empty classes

---
 .../TeamsPermissions/FormFields/FormFieldsTeamPermissions.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/views/TeamsPermissions/FormFields/FormFieldsTeamPermissions.vue b/src/views/TeamsPermissions/FormFields/FormFieldsTeamPermissions.vue
index ee1ea59ac..e02917270 100644
--- a/src/views/TeamsPermissions/FormFields/FormFieldsTeamPermissions.vue
+++ b/src/views/TeamsPermissions/FormFields/FormFieldsTeamPermissions.vue
@@ -104,8 +104,8 @@
           <template #sourceheader>Available Permissions</template>
           <template #targetheader>Chosen Permissions</template>
           <template #item="slotProps">
-            <div class="">
-              <div class="">
+            <div>
+              <div>
                 <span class="font-normal">{{ slotProps.item.name }}</span>
               </div>
             </div>

From 5232457290ec870a38e8128f5195754b9c128dd0 Mon Sep 17 00:00:00 2001
From: Matheus Sunderhus <matheus.sunderhus@azion.com>
Date: Tue, 9 Jan 2024 15:12:29 -0300
Subject: [PATCH 019/135] test: ensure to listCacheSettingsService parse
 correctly each result Also ensure to call Api with correct params

---
 .../list-cache-settings-service.test.js       | 64 +++++++++++++++++++
 1 file changed, 64 insertions(+)
 create mode 100644 src/tests/services/edge-application-cache-settings-services/list-cache-settings-service.test.js

diff --git a/src/tests/services/edge-application-cache-settings-services/list-cache-settings-service.test.js b/src/tests/services/edge-application-cache-settings-services/list-cache-settings-service.test.js
new file mode 100644
index 000000000..fcd1c00bd
--- /dev/null
+++ b/src/tests/services/edge-application-cache-settings-services/list-cache-settings-service.test.js
@@ -0,0 +1,64 @@
+import { AxiosHttpClientAdapter } from '@/services/axios/AxiosHttpClientAdapter'
+import * as Errors from '@/services/axios/errors'
+import { listCacheSettingsService } from '@/services/edge-application-cache-settings-services'
+import { describe, expect, it, vi } from 'vitest'
+
+const fixtures = {
+  edgeApplicationId: 1920763586747,
+  cacheSettingsMock: {
+    id: 181729637,
+    name: 'Cache Settings Console Kit',
+    browser_cache_settings: true,
+    cdn_cache_settings: false
+  }
+}
+
+const makeSut = () => {
+  const sut = listCacheSettingsService
+
+  return { sut }
+}
+
+describe('EdgeApplicationCacheSettingsServices', () => {
+  it('should call api with correct params', async () => {
+    const requestSpy = vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+      statusCode: 200,
+      body: {
+        results: []
+      }
+    })
+
+    const { sut } = makeSut()
+    await sut({
+      id: fixtures.edgeApplicationId
+    })
+
+    expect(requestSpy).toHaveBeenCalledWith({
+      url: `v3/edge_applications/${fixtures.edgeApplicationId}/cache_settings`,
+      method: 'GET'
+    })
+  })
+
+  it('should parse each cache settings correctly', async () => {
+    vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+      statusCode: 200,
+      body: {
+        results: [fixtures.cacheSettingsMock]
+      }
+    })
+
+    const { sut } = makeSut()
+    const result = await sut({
+      id: fixtures.edgeApplicationId
+    })
+
+    expect(result).toEqual([
+      {
+        id: fixtures.cacheSettingsMock.id,
+        name: fixtures.cacheSettingsMock.name,
+        browserCache: fixtures.cacheSettingsMock.browser_cache_settings,
+        cdnCache: fixtures.cacheSettingsMock.cdn_cache_settings
+      }
+    ])
+  })
+})

From 9549214832ce9e008ba2e33e98f7d21afeab7759 Mon Sep 17 00:00:00 2001
From: Matheus Sunderhus <matheus.sunderhus@azion.com>
Date: Tue, 9 Jan 2024 15:15:28 -0300
Subject: [PATCH 020/135] chore: upgrade vitest coverage threshold to 91
 percent

---
 .../list-cache-settings-service.test.js                   | 1 -
 vitest.config.js                                          | 8 ++++----
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/tests/services/edge-application-cache-settings-services/list-cache-settings-service.test.js b/src/tests/services/edge-application-cache-settings-services/list-cache-settings-service.test.js
index fcd1c00bd..eda8a07d9 100644
--- a/src/tests/services/edge-application-cache-settings-services/list-cache-settings-service.test.js
+++ b/src/tests/services/edge-application-cache-settings-services/list-cache-settings-service.test.js
@@ -1,5 +1,4 @@
 import { AxiosHttpClientAdapter } from '@/services/axios/AxiosHttpClientAdapter'
-import * as Errors from '@/services/axios/errors'
 import { listCacheSettingsService } from '@/services/edge-application-cache-settings-services'
 import { describe, expect, it, vi } from 'vitest'
 
diff --git a/vitest.config.js b/vitest.config.js
index 00b14a463..b5ff4305a 100644
--- a/vitest.config.js
+++ b/vitest.config.js
@@ -28,10 +28,10 @@ export default mergeConfig(
       coverage: {
         enabled: true,
         include: ['src/services/**', 'src/views/**', 'src/helpers/**'],
-        statements: 90,
-        branches: 90,
-        functions: 89,
-        lines: 90,
+        statements: 91,
+        branches: 91,
+        functions: 91,
+        lines: 91,
         reporter: ['text', 'lcov', 'html']
       },
       reporters: ['default', 'vitest-sonar-reporter'],

From 25e2dd14ff0a375d2721729c9c92dc0809db5aea Mon Sep 17 00:00:00 2001
From: Matheus Sunderhus <matheus.sunderhus@azion.com>
Date: Tue, 9 Jan 2024 15:17:31 -0300
Subject: [PATCH 021/135] fix: return type on listCacheSettingsService

---
 .../list-cache-settings-service.js                              | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/services/edge-application-cache-settings-services/list-cache-settings-service.js b/src/services/edge-application-cache-settings-services/list-cache-settings-service.js
index c67f7482e..1040c12b2 100644
--- a/src/services/edge-application-cache-settings-services/list-cache-settings-service.js
+++ b/src/services/edge-application-cache-settings-services/list-cache-settings-service.js
@@ -4,7 +4,7 @@ import { makeEdgeApplicationBaseUrl } from '../edge-application-services/make-ed
 /**
  * @param {Object} payload - The error schema.
  * @param {string } payload.id - The id of edge application.
- * @returns {string|undefined} The result message based on the status code.
+ * @returns {Promise<string|undefined>} The result message based on the status code.
  */
 export const listCacheSettingsService = async ({ id }) => {
   let httpResponse = await AxiosHttpClientAdapter.request({

From 29064a5dc8d8e1365a442cba82843408c75af6dc Mon Sep 17 00:00:00 2001
From: William <william.tome@azion.com>
Date: Tue, 9 Jan 2024 15:58:52 -0300
Subject: [PATCH 022/135] [ENG-28892] feat: add loading state on route change
 (#541)

* style: refactored by the linter

* feat: create the page loading block

* feat: implement page loading component

* refactor: replace isLogged with showNavItems to be clearer

* refactor: add metadata to cli routes

* feat: trigger page loader on route change

* refactor: remove dynamic import in signup and login

* fix: adjust submit button loading state

* feat: implement new page loading block on marketplace drawer
---
 src/router/hooks/afterEachRoute.js            |  6 +++
 src/router/hooks/beforeEachRoute.js           | 12 ++++--
 src/router/index.js                           | 35 +++++++++-------
 .../routes/cli-callback-routes/index.js       | 10 ++++-
 src/router/routes/login-routes/index.js       |  3 +-
 src/router/routes/signup-routes/index.js      |  3 +-
 src/templates/loading-block/index.vue         | 26 ++++++++++++
 src/templates/main-menu-block/index.vue       |  9 +---
 src/templates/navbar-block/index.vue          |  7 ++--
 src/templates/shell-block/index.vue           | 42 +++++++------------
 src/templates/sign-in-block/index.vue         |  8 ++--
 .../Marketplace/drawer/IntegrationInstall.vue | 33 +++++++--------
 12 files changed, 109 insertions(+), 85 deletions(-)
 create mode 100644 src/router/hooks/afterEachRoute.js
 create mode 100644 src/templates/loading-block/index.vue

diff --git a/src/router/hooks/afterEachRoute.js b/src/router/hooks/afterEachRoute.js
new file mode 100644
index 000000000..70387546d
--- /dev/null
+++ b/src/router/hooks/afterEachRoute.js
@@ -0,0 +1,6 @@
+import { useLoadingStore } from '@/stores/loading'
+
+export default function afterEachRoute() {
+  const loadingStore = useLoadingStore()
+  loadingStore.finishLoading()
+}
diff --git a/src/router/hooks/beforeEachRoute.js b/src/router/hooks/beforeEachRoute.js
index 82fd06dea..03a2bb9ef 100644
--- a/src/router/hooks/beforeEachRoute.js
+++ b/src/router/hooks/beforeEachRoute.js
@@ -1,10 +1,12 @@
-import { getUserInfoService, getAccountInfoService } from '@/services/account-services'
+import { getAccountInfoService, getUserInfoService } from '@/services/account-services'
 import { logoutService } from '@/services/auth-services'
 import { useAccountStore } from '@/stores/account'
+import { useLoadingStore } from '@/stores/loading'
 
 export default async function beforeEachRoute(to, _, next) {
   const accountStore = useAccountStore()
-  const cliCallbackURLs = ['/cli-callback-fail', '/cli-callback-success']
+  const loadingStore = useLoadingStore()
+
   // TODO: remove the usage of localStorage when API returns the theme
   const theme = localStorage.getItem('theme')
 
@@ -17,8 +19,10 @@ export default async function beforeEachRoute(to, _, next) {
     return next()
   }
 
-  if (cliCallbackURLs.includes(to.path)) {
-    return next()
+  loadingStore.startLoading()
+
+  if (to.meta?.hideLoading) {
+    loadingStore.finishLoading()
   }
 
   if (!accountStore.hasActiveUserId && !to.meta.isPublic) {
diff --git a/src/router/index.js b/src/router/index.js
index c1204b0ba..f1a5ad492 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,34 +1,36 @@
-import { createRouter, createWebHistory } from 'vue-router'
+import { accountRoutes } from '@routes/account-routes'
+import { activityHistoryRoutes } from '@routes/activity-history-routes'
+import { cliCallbackRoutes } from '@routes/cli-callback-routes'
+import { createNewRoutes } from '@routes/create-new-routes'
+import { credentialsRoutes } from '@routes/credentials-routes'
 import { dataStreamingRoutes } from '@routes/data-streaming-routes'
 import { digitalCertificatesRoutes } from '@routes/digital-certificates-routes'
 import { domainsRoutes } from '@routes/domains-routes'
-import { homeRoutes } from '@routes/home-routes'
 import { edgeApplicationRoutes } from '@routes/edge-application-routes'
 import { edgeFirewallRoutes } from '@routes/edge-firewall-routes'
 import { edgeFunctionsRoutes } from '@routes/edge-functions-routes'
+import { edgeNodeRoutes } from '@routes/edge-node-routes'
 import { edgePulseRoutes } from '@routes/edge-pulse-routes'
 import { edgeServicesRoutes } from '@routes/edge-services-routes'
+import { errorRoutes } from '@routes/error-routes'
+import { homeRoutes } from '@routes/home-routes'
 import { intelligentDnsRoutes } from '@routes/intelligent-dns-routes'
 import { loginRoutes } from '@routes/login-routes'
+import { marketplaceRoutes } from '@routes/marketplace-routes'
+import { mfaRoutes } from '@routes/mfa-routes'
 import { networkListsRoutes } from '@routes/network-lists-routes'
+import { passwordRoutes } from '@routes/password-routes'
 import { personalTokensRoutes } from '@routes/personal-tokens-routes'
-import { variablesRoutes } from '@routes/variables-routes'
-import { edgeNodeRoutes } from '@routes/edge-node-routes'
-import { credentialsRoutes } from '@routes/credentials-routes'
+import { playgroundRoutes } from '@routes/playground-routes'
 import { realTimePurgeRoutes } from '@routes/real-time-purge'
+import { signupRoutes } from '@routes/signup-routes'
 import { teamsPermissionRoutes } from '@routes/team-permission'
 import { usersListsRoutes } from '@routes/users-routes'
-import { passwordRoutes } from '@routes/password-routes'
-import { activityHistoryRoutes } from '@routes/activity-history-routes'
-import { errorRoutes } from '@routes/error-routes'
-import { playgroundRoutes } from '@routes/playground-routes'
-import { createNewRoutes } from '@routes/create-new-routes'
-import { mfaRoutes } from '@routes/mfa-routes'
-import { signupRoutes } from '@routes/signup-routes'
-import { marketplaceRoutes } from '@routes/marketplace-routes'
-import { accountRoutes } from '@/router/routes/account-routes'
-import { settingsRoutes } from '@/router/routes/your-settings-routes'
-import { cliCallbackRoutes } from '@/router/routes/cli-callback-routes'
+import { variablesRoutes } from '@routes/variables-routes'
+import { settingsRoutes } from '@routes/your-settings-routes'
+import { createRouter, createWebHistory } from 'vue-router'
+
+import afterEachRoute from './hooks/afterEachRoute'
 import beforeEachRoute from './hooks/beforeEachRoute'
 
 const router = createRouter({
@@ -67,5 +69,6 @@ const router = createRouter({
 })
 
 router.beforeEach(beforeEachRoute)
+router.afterEach(afterEachRoute)
 
 export default router
diff --git a/src/router/routes/cli-callback-routes/index.js b/src/router/routes/cli-callback-routes/index.js
index 2dfbf0fc6..2a2a613b3 100644
--- a/src/router/routes/cli-callback-routes/index.js
+++ b/src/router/routes/cli-callback-routes/index.js
@@ -4,12 +4,18 @@ export const cliCallbackRoutes = {
     {
       path: '/cli-callback-success',
       name: 'cli-callback-success-page',
-      component: () => import('@views/CliCallback/SuccessView.vue')
+      component: () => import('@views/CliCallback/SuccessView.vue'),
+      meta: {
+        isPublic: true
+      }
     },
     {
       path: '/cli-callback-fail',
       name: 'cli-callback-fail-page',
-      component: () => import('@views/CliCallback/FailView.vue')
+      component: () => import('@views/CliCallback/FailView.vue'),
+      meta: {
+        isPublic: true
+      }
     }
   ]
 }
diff --git a/src/router/routes/login-routes/index.js b/src/router/routes/login-routes/index.js
index ce0be5d0d..97a3804a1 100644
--- a/src/router/routes/login-routes/index.js
+++ b/src/router/routes/login-routes/index.js
@@ -3,12 +3,13 @@ import { listSocialIdpsService } from '@/services/social-idps-services'
 import { listTypeAccountService } from '@/services/switch-account-services/list-type-account-service'
 import { switchAccountService } from '@/services/auth-services/switch-account-service'
 import { AccountHandler } from '@/helpers/account-handler'
+import LoginView from '@views/Login/LoginView.vue'
 
 /** @type {import('vue-router').RouteRecordRaw} */
 export const loginRoutes = {
   path: '/login',
   name: 'login',
-  component: () => import('@views/Login/LoginView.vue'),
+  component: LoginView,
   props: {
     authenticationLoginService: AuthServices.loginService,
     verifyLoginService: AuthServices.verifyAuthenticationService,
diff --git a/src/router/routes/signup-routes/index.js b/src/router/routes/signup-routes/index.js
index e17144153..88789ddae 100644
--- a/src/router/routes/signup-routes/index.js
+++ b/src/router/routes/signup-routes/index.js
@@ -1,6 +1,7 @@
 import * as SignupService from '@/services/signup-services'
 import { listSocialIdpsService } from '@/services/social-idps-services'
 import { useAccountStore } from '@/stores/account'
+import SignupView from '@/views/Signup/SignupView.vue'
 
 /** @type {import('vue-router').RouteRecordRaw} */
 export const signupRoutes = {
@@ -10,7 +11,7 @@ export const signupRoutes = {
     {
       path: '',
       name: 'signup',
-      component: () => import('@views/Signup/SignupView.vue'),
+      component: SignupView,
       props: {
         signupService: SignupService.signupService,
         listSocialIdpsService: listSocialIdpsService
diff --git a/src/templates/loading-block/index.vue b/src/templates/loading-block/index.vue
new file mode 100644
index 000000000..02e88ac6f
--- /dev/null
+++ b/src/templates/loading-block/index.vue
@@ -0,0 +1,26 @@
+<template>
+  <div
+    class="bg-black/20 cursor-progress fixed w-full"
+    :class="customClasses"
+    v-if="showLoading"
+  >
+    <ProgressBar
+      class="sticky"
+      mode="indeterminate"
+      style="height: 0.375rem"
+    />
+  </div>
+</template>
+
+<script setup>
+  import ProgressBar from 'primevue/progressbar'
+
+  defineOptions({ name: 'page-loading-block' })
+  defineProps({
+    showLoading: Boolean,
+    customClasses: {
+      type: String,
+      default: 'z-[5000] mt-[3.5rem] min-h-screen'
+    }
+  })
+</script>
diff --git a/src/templates/main-menu-block/index.vue b/src/templates/main-menu-block/index.vue
index 4ecb3db66..8b4eeb470 100644
--- a/src/templates/main-menu-block/index.vue
+++ b/src/templates/main-menu-block/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <NavBarBlock :userIsLogged="props.isLogged" />
+  <NavBarBlock :showNavItems="showNavItems" />
 </template>
 
 <script setup>
@@ -7,10 +7,5 @@
 
   defineOptions({ name: 'main-menu-block' })
 
-  const props = defineProps({
-    isLogged: {
-      type: Boolean,
-      required: true
-    }
-  })
+  defineProps({ showNavItems: Boolean })
 </script>
diff --git a/src/templates/navbar-block/index.vue b/src/templates/navbar-block/index.vue
index 047f7313c..a59b41da4 100644
--- a/src/templates/navbar-block/index.vue
+++ b/src/templates/navbar-block/index.vue
@@ -6,7 +6,7 @@
   >
     <div
       class="flex w-full"
-      v-if="props.userIsLogged"
+      v-if="props.showNavItems"
     >
       <div class="flex items-center gap-3">
         <SidebarBlock />
@@ -65,9 +65,8 @@
   provide('openSwitchAccount', openSwitchAccount)
 
   const props = defineProps({
-    userIsLogged: {
-      type: Boolean,
-      required: true
+    showNavItems: {
+      type: Boolean
     },
     listTypeAccountService: {
       type: Function,
diff --git a/src/templates/shell-block/index.vue b/src/templates/shell-block/index.vue
index 8129bb6a6..12676f085 100644
--- a/src/templates/shell-block/index.vue
+++ b/src/templates/shell-block/index.vue
@@ -1,21 +1,11 @@
 <template>
   <ToastBlock />
   <MainMenuBlock
-    :isLogged="props.isLogged"
+    :showNavItems="showNavItems"
     :listTypeAccountService="listTypeAccountService"
     :accountHandler="accountHandler"
   />
-
-  <div
-    class="bg-black/20 z-50 mt-[3.5rem] min-h-screen cursor-progress fixed w-full"
-    v-if="showLoading"
-  >
-    <ProgressBar
-      class="sticky"
-      mode="indeterminate"
-      style="height: 0.375rem"
-    ></ProgressBar>
-  </div>
+  <PageLoadingBlock :showLoading="showLoading" />
   <main
     class="flex w-full relative min-h-[calc(100vh-120px)] [&>.active]:md:w-[calc(100%-384px)] mt-14"
     :class="[styleHelper, { 'flex align-items-center': !props.isLogged }]"
@@ -28,26 +18,27 @@
 </template>
 
 <script setup>
-  defineOptions({ name: 'shell-block' })
   import { storeToRefs } from 'pinia'
-
   import { computed } from 'vue'
-  import ToastBlock from '@/templates/toast-block'
-  import MainMenuBlock from '@/templates/main-menu-block'
+
   import FooterBlock from '@/templates/footer-block'
   import HelpBlock from '@/templates/help-center-block'
+  import PageLoadingBlock from '@/templates/loading-block'
+  import MainMenuBlock from '@/templates/main-menu-block'
+  import ToastBlock from '@/templates/toast-block'
 
-  import ProgressBar from 'primevue/progressbar'
-
-  import { useHelpCenterStore } from '@/stores/help-center'
-  import { listTypeAccountService } from '@/services/switch-account-services/list-type-account-service'
-  import { switchAccountService } from '@/services/auth-services/switch-account-service'
   import { AccountHandler } from '@/helpers/account-handler'
+  import { switchAccountService } from '@/services/auth-services/switch-account-service'
+  import { listTypeAccountService } from '@/services/switch-account-services/list-type-account-service'
+  import { useHelpCenterStore } from '@/stores/help-center'
   import { useLoadingStore } from '@/stores/loading'
 
-  const props = defineProps({
-    isLogged: Boolean
-  })
+  defineOptions({ name: 'shell-block' })
+  const props = defineProps({ isLogged: Boolean })
+
+  const { showLoading } = storeToRefs(useLoadingStore())
+
+  const showNavItems = computed(() => props.isLogged && !showLoading.value)
 
   const helpCenterStore = useHelpCenterStore()
 
@@ -56,7 +47,4 @@
   const customClass = computed(() => (helpCenterStore.isOpen ? 'active' : ''))
   const customClassHelper = computed(() => (helpCenterStore.isOpen ? 'active-helper' : ''))
   const styleHelper = '[&>.active-helper]:block transform [&>.active-helper]:md:translate-x-0'
-  const store = useLoadingStore()
-
-  const { showLoading } = storeToRefs(store)
 </script>
diff --git a/src/templates/sign-in-block/index.vue b/src/templates/sign-in-block/index.vue
index 11736a705..98dd492ed 100644
--- a/src/templates/sign-in-block/index.vue
+++ b/src/templates/sign-in-block/index.vue
@@ -146,15 +146,15 @@
 </template>
 
 <script setup>
-  import InputText from 'primevue/inputtext'
+  import { ProccessRequestError, UserNotFoundError } from '@/services/axios/errors'
   import PrimeButton from 'primevue/button'
+  import InputText from 'primevue/inputtext'
   import Password from 'primevue/password'
   import SocialIdpsBlock from '@/templates/social-idps-block'
-  import * as yup from 'yup'
   import { useField, useForm } from 'vee-validate'
   import { ref } from 'vue'
   import { useRouter } from 'vue-router'
-  import { UserNotFoundError, ProccessRequestError } from '@/services/axios/errors'
+  import * as yup from 'yup'
 
   defineOptions({ name: 'signInBlock' })
 
@@ -235,7 +235,6 @@
       await switchClientAccount(userInfo.props)
     } catch {
       hasRequestErrorMessage.value = new UserNotFoundError().message
-    } finally {
       isButtonLoading.value = false
     }
   }
@@ -254,6 +253,7 @@
       router.push(redirect)
     } catch {
       hasRequestErrorMessage.value = new ProccessRequestError().message
+      isButtonLoading.value = false
     }
   }
 
diff --git a/src/views/Marketplace/drawer/IntegrationInstall.vue b/src/views/Marketplace/drawer/IntegrationInstall.vue
index c6460e40a..96bf8ac52 100644
--- a/src/views/Marketplace/drawer/IntegrationInstall.vue
+++ b/src/views/Marketplace/drawer/IntegrationInstall.vue
@@ -1,19 +1,19 @@
 <script setup>
-  import { computed, ref, watch } from 'vue'
-  import Sidebar from 'primevue/sidebar'
-  import Tag from 'primevue/tag'
+  import { InternalServerError } from '@/services/axios/errors'
+  import FormHorizontal from '@/templates/create-form-block/form-horizontal'
+  import PageLoadingBlock from '@/templates/loading-block'
+  import TemplateEngineBlock from '@/templates/template-engine-block'
   import PrimeButton from 'primevue/button'
-  import Dropdown from 'primevue/dropdown'
   import Divider from 'primevue/divider'
+  import Dropdown from 'primevue/dropdown'
   import InlineMessage from 'primevue/inlinemessage'
-  import ProgressBar from 'primevue/progressbar'
+  import Sidebar from 'primevue/sidebar'
+  import Tag from 'primevue/tag'
   import { useField, useForm } from 'vee-validate'
+  import { computed, ref, watch } from 'vue'
+  import { useRouter } from 'vue-router'
   import * as yup from 'yup'
-  import FormHorizontal from '@/templates/create-form-block/form-horizontal'
-  import TemplateEngineBlock from '@/templates/template-engine-block'
-  import { InternalServerError } from '@/services/axios/errors'
   import PermissionsFieldset from '../components/PermissionsFieldset'
-  import { useRouter } from 'vue-router'
 
   const router = useRouter()
 
@@ -209,16 +209,11 @@
     </template>
     <template #default>
       <div class="flex flex-col w-full md:p-8 pb-0 relative">
-        <div
-          class="bg-black/20 z-10 mt-[3.5rem] h-[calc(100%-7rem)] cursor-progress fixed w-full top-0 left-0"
-          v-if="loading"
-        >
-          <ProgressBar
-            class="sticky"
-            mode="indeterminate"
-            style="height: 0.375rem"
-          ></ProgressBar>
-        </div>
+        <PageLoadingBlock
+          :showLoading="loading"
+          customClasses="top-0 left-0 z-10 mt-[3.5rem] h-[calc(100%-7rem)]"
+        />
+
         <form class="w-full flex flex-col gap-8">
           <FormHorizontal
             :isDrawer="true"

From 51a8bd7838cf167d2eabe649afc5846c425c13e7 Mon Sep 17 00:00:00 2001
From: Matheus Sunderhus <matheus.sunderhus@azion.com>
Date: Tue, 9 Jan 2024 16:23:17 -0300
Subject: [PATCH 023/135] test: ensure loadCacheSettingsService calls api with
 correct params ensure to parse correctly each device group ensure to parse
 cookie names related to the cache settings ensure to parse query strings
 related to the cache settings

---
 .../load-cache-settings-service.test.js       | 114 ++++++++++++++++++
 1 file changed, 114 insertions(+)
 create mode 100644 src/tests/services/edge-application-cache-settings-services/load-cache-settings-service.test.js

diff --git a/src/tests/services/edge-application-cache-settings-services/load-cache-settings-service.test.js b/src/tests/services/edge-application-cache-settings-services/load-cache-settings-service.test.js
new file mode 100644
index 000000000..97ee0ef44
--- /dev/null
+++ b/src/tests/services/edge-application-cache-settings-services/load-cache-settings-service.test.js
@@ -0,0 +1,114 @@
+import { AxiosHttpClientAdapter } from '@/services/axios/AxiosHttpClientAdapter'
+import { loadCacheSettingsService } from '@/services/edge-application-cache-settings-services'
+import { describe, expect, it, vi } from 'vitest'
+
+const fixtures = {
+  edgeApplicationId: 4516528793898,
+  cacheSettingsMock: {
+    id: 817236,
+    name: 'mockName',
+    browser_cache_settings: 'mockBrowserCacheSettings',
+    browser_cache_settings_maximum_ttl: 'mockBrowserCacheSettingsMaximumTtl',
+    cdn_cache_settings: 'mockCdnCacheSettings',
+    cdn_cache_settings_maximum_ttl: 'mockCdnCacheSettingsMaximumTtl',
+    is_slice_configuration_enabled: false,
+    slice_configuration_range: 'mockSliceConfigurationRange',
+    cache_by_query_string: 'mockCacheByQueryString',
+    enable_query_string_sort: false,
+    enable_caching_for_post: false,
+    enable_caching_for_options: false,
+    enable_stale_cache: false,
+    cache_by_cookies: 'mockCacheByCookies',
+    cookie_names: [],
+    query_string_fields: [],
+    adaptive_delivery_action: 'mockAdaptiveDeliveryAction',
+    device_group: null
+  }
+}
+
+const makeSut = () => {
+  const sut = loadCacheSettingsService
+
+  return { sut }
+}
+
+describe('EdgeApplicationCacheSettingsServices', () => {
+  it('should call api with correct params', async () => {
+    const requestSpy = vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+      statusCode: 200,
+      body: {
+        results: fixtures.cacheSettingsMock
+      }
+    })
+
+    const { sut } = makeSut()
+    await sut({
+      edgeApplicationId: fixtures.edgeApplicationId,
+      id: fixtures.cacheSettingsMock.id
+    })
+
+    expect(requestSpy).toHaveBeenCalledWith({
+      url: `v3/edge_applications/${fixtures.edgeApplicationId}/cache_settings/${fixtures.cacheSettingsMock.id}`,
+      method: 'GET'
+    })
+  })
+
+  it('should parse each returned device group', async () => {
+    vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+      statusCode: 200,
+      body: {
+        results: { ...fixtures.cacheSettingsMock, device_group: [123, 456] }
+      }
+    })
+
+    const { sut } = makeSut()
+    const results = await sut({
+      edgeApplicationId: fixtures.edgeApplicationId,
+      id: fixtures.cacheSettingsMock.id
+    })
+
+    expect(results.deviceGroup).toEqual([
+      {
+        id: 123
+      },
+      { id: 456 }
+    ])
+  })
+
+  it('should parse each cookie name in cache settings', async () => {
+    vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+      statusCode: 200,
+      body: {
+        results: { ...fixtures.cacheSettingsMock, cookie_names: ['cookieName1', 'cookieName2'] }
+      }
+    })
+
+    const { sut } = makeSut()
+    const results = await sut({
+      edgeApplicationId: fixtures.edgeApplicationId,
+      id: fixtures.cacheSettingsMock.id
+    })
+
+    expect(results.cookieNames).toEqual('cookieName1\ncookieName2')
+  })
+
+  it('should parse each query string in cache settings', async () => {
+    vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+      statusCode: 200,
+      body: {
+        results: {
+          ...fixtures.cacheSettingsMock,
+          query_string_fields: ['queryString1', 'queryString2']
+        }
+      }
+    })
+
+    const { sut } = makeSut()
+    const results = await sut({
+      edgeApplicationId: fixtures.edgeApplicationId,
+      id: fixtures.cacheSettingsMock.id
+    })
+
+    expect(results.queryStringFields).toEqual('queryString1\nqueryString2')
+  })
+})

From 8ce582f8eea3e332469889417d24c22cbbe306c3 Mon Sep 17 00:00:00 2001
From: paulosf0 <paulo.ferreira@azion.com>
Date: Tue, 9 Jan 2024 16:56:35 -0300
Subject: [PATCH 024/135] feat: add list waf rules page

---
 src/helpers/azion-documentation-catalog.js    |  3 +-
 src/router/index.js                           |  4 +-
 src/router/routes/waf-rules-routes/index.js   | 28 ++++++
 .../delete-waf-rules-service.js               | 37 ++++++++
 src/services/waf-rules-services/index.js      |  7 ++
 .../list-waf-rules-service.js                 | 86 ++++++++++++++++++
 .../make-waf-rules-base-url.js                |  5 +
 src/views/WafRules/ListView.vue               | 91 +++++++++++++++++++
 8 files changed, 259 insertions(+), 2 deletions(-)
 create mode 100644 src/router/routes/waf-rules-routes/index.js
 create mode 100644 src/services/waf-rules-services/delete-waf-rules-service.js
 create mode 100644 src/services/waf-rules-services/index.js
 create mode 100644 src/services/waf-rules-services/list-waf-rules-service.js
 create mode 100644 src/services/waf-rules-services/make-waf-rules-base-url.js
 create mode 100644 src/views/WafRules/ListView.vue

diff --git a/src/helpers/azion-documentation-catalog.js b/src/helpers/azion-documentation-catalog.js
index 959bec12b..e3859a69d 100644
--- a/src/helpers/azion-documentation-catalog.js
+++ b/src/helpers/azion-documentation-catalog.js
@@ -24,7 +24,8 @@ export const documentationCatalog = {
   users: () => openSearchResult('users'),
   activityHistory: () => openSearchResult('activity history'),
   edgeNodes: () => openSearchResult('edge nodes'),
-  records: () => openSearchResult('records')
+  records: () => openSearchResult('records'),
+  waf: () =>  openSearchResult('waf')
 }
 
 export const documentationGuideProducts = {
diff --git a/src/router/index.js b/src/router/index.js
index c1204b0ba..245761ece 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -29,6 +29,7 @@ import { marketplaceRoutes } from '@routes/marketplace-routes'
 import { accountRoutes } from '@/router/routes/account-routes'
 import { settingsRoutes } from '@/router/routes/your-settings-routes'
 import { cliCallbackRoutes } from '@/router/routes/cli-callback-routes'
+import { wafRulesRoutes } from '@routes/waf-rules-routes'
 import beforeEachRoute from './hooks/beforeEachRoute'
 
 const router = createRouter({
@@ -62,7 +63,8 @@ const router = createRouter({
     signupRoutes,
     marketplaceRoutes,
     accountRoutes,
-    settingsRoutes
+    settingsRoutes,
+    wafRulesRoutes
   ].concat(errorRoutes)
 })
 
diff --git a/src/router/routes/waf-rules-routes/index.js b/src/router/routes/waf-rules-routes/index.js
new file mode 100644
index 000000000..308549a18
--- /dev/null
+++ b/src/router/routes/waf-rules-routes/index.js
@@ -0,0 +1,28 @@
+import * as Helpers from '@/helpers'
+import * as WafRulesService from '@/services/waf-rules-services'
+
+/** @type {import('vue-router').RouteRecordRaw} */
+export const wafRulesRoutes = {
+  path: '/waf',
+  name: 'waf',
+  children: [
+    {
+      path: '',
+      name: 'list-waf-rules',
+      component: () => import('@views/WafRules/ListView.vue'),
+      props: {
+        listWafRulesService: WafRulesService.listWafRulesService,
+        deleteWafRulesService: WafRulesService.deleteWafRulesService,
+        documentationService: Helpers.documentationCatalog.waf,
+      },
+      meta: {
+        breadCrumbs: [
+          {
+            label: 'Waf Rules',
+            to: '/waf'
+          }
+        ]
+      }
+    },
+  ]
+}
diff --git a/src/services/waf-rules-services/delete-waf-rules-service.js b/src/services/waf-rules-services/delete-waf-rules-service.js
new file mode 100644
index 000000000..75be16e1c
--- /dev/null
+++ b/src/services/waf-rules-services/delete-waf-rules-service.js
@@ -0,0 +1,37 @@
+import { AxiosHttpClientAdapter } from '../axios/AxiosHttpClientAdapter'
+import { makeWafRulesBaseUrl } from './make-waf-rules-base-url'
+import * as Errors from '@/services/axios/errors'
+
+export const deleteWafRulesService = async (wafId) => {
+  let httpResponse = await AxiosHttpClientAdapter.request({
+    url: `${makeWafRulesBaseUrl()}/rulesets/${wafId}`,
+    method: 'DELETE'
+  })
+
+  return parseHttpResponse(httpResponse)
+}
+
+/**
+ * @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 204:
+      return 'Waf rule successfully deleted'
+    case 400:
+      throw new Errors.NotFoundError().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/waf-rules-services/index.js b/src/services/waf-rules-services/index.js
new file mode 100644
index 000000000..e2064c02d
--- /dev/null
+++ b/src/services/waf-rules-services/index.js
@@ -0,0 +1,7 @@
+import { listWafRulesService } from './list-waf-rules-service'
+import { deleteWafRulesService } from './delete-waf-rules-service'
+
+export {
+    listWafRulesService,
+    deleteWafRulesService
+} 
\ No newline at end of file
diff --git a/src/services/waf-rules-services/list-waf-rules-service.js b/src/services/waf-rules-services/list-waf-rules-service.js
new file mode 100644
index 000000000..b61362284
--- /dev/null
+++ b/src/services/waf-rules-services/list-waf-rules-service.js
@@ -0,0 +1,86 @@
+import { AxiosHttpClientAdapter, parseHttpResponse } from '../axios/AxiosHttpClientAdapter'
+import { makeWafRulesBaseUrl } from './make-waf-rules-base-url'
+
+export const listWafRulesService = async () => {
+  let httpResponse = await AxiosHttpClientAdapter.request({
+    url: `${makeWafRulesBaseUrl()}/?page=1&page_size=100`,
+    method: 'GET'
+  })
+
+  httpResponse = adapt(httpResponse)
+
+  return parseHttpResponse(httpResponse)
+}
+const parseStatusData = (status) => {
+  const parsedStatus = status
+    ? {
+        content: 'Active',
+        severity: 'success'
+      }
+    : {
+        content: 'Inactive',
+        severity: 'danger'
+      }
+
+  return parsedStatus
+}
+const adapt = (httpResponse) => {
+  /**
+   * Necessary until the API gets the common pattern
+   * of returning the array of data inside results property
+   * like other andpoints.
+   */
+
+  const threatTypes = {
+    file_upload: 'File upload',
+    evading_tricks: 'Evading Tricks',
+    unwanted_access: 'Unwanted Access',
+    identified_attack: 'Identified Attack',
+    cross_site_scripting: 'Cross-Site Scripting (XSS)',
+    directory_traversal: 'Directory Traversal',
+    remote_file_inclusion: 'Remote File Inclusions (RFI)',
+    sql_injection: 'SQL Injection'
+  }
+
+  const parsedWafRules = httpResponse.body.results.map((waf) => {
+    const threatTypesArray = []
+    for (const key in threatTypes) {
+      if (Object.hasOwnProperty.call(threatTypes, key)) {
+        const threat = threatTypes[key]
+        if (waf[key]) {
+          threatTypesArray.push(threat)
+        }
+      }
+    }
+    const parser = {
+      active: parseStatusData(waf.active),
+      bypassAddresses: waf.bypass_addresses,
+      crossSiteScripting: waf.cross_site_scripting,
+      crossSiteScriptingSensitivity: waf.cross_site_scripting_sensitivity,
+      directoryTraversal: waf.directory_traversal,
+      directoryTraversalSensitivity: waf.directory_traversal_sensitivity,
+      evadingTricks: waf.evading_tricks,
+      evadingTricksSensitivity: waf.evading_tricks_sensitivity,
+      fileUpload: waf.file_upload,
+      fileUploadSensitivity: waf.file_upload_sensitivity,
+      id: waf.id,
+      identifiedAttack: waf.identified_attack,
+      identifiedAttackSensitivity: waf.identified_attack_sensitivity,
+      mode: waf.mode,
+      name: waf.name,
+      remoteFileInclusion: waf.remote_file_inclusion,
+      remoteFileInclusionSensitivity: waf.remote_file_inclusion_sensitivity,
+      sqlInjection: waf.sql_injection,
+      sqlInjectionSensitivity: waf.sql_injection_sensitivity,
+      unwantedAccess: waf.unwanted_access,
+      unwantedAccessSensitivity: waf.unwanted_access_sensitivity,
+      threatTypes: threatTypesArray
+    }
+    return parser
+  })
+
+  return {
+    body: parsedWafRules,
+    statusCode: httpResponse.statusCode
+  }
+}
diff --git a/src/services/waf-rules-services/make-waf-rules-base-url.js b/src/services/waf-rules-services/make-waf-rules-base-url.js
new file mode 100644
index 000000000..f30c25398
--- /dev/null
+++ b/src/services/waf-rules-services/make-waf-rules-base-url.js
@@ -0,0 +1,5 @@
+export const makeWafRulesBaseUrl = () => {
+    const version = 'v3'
+    return `${version}/waf`
+  }
+  
\ No newline at end of file
diff --git a/src/views/WafRules/ListView.vue b/src/views/WafRules/ListView.vue
new file mode 100644
index 000000000..8d809e8d7
--- /dev/null
+++ b/src/views/WafRules/ListView.vue
@@ -0,0 +1,91 @@
+<template>
+  <ContentBlock>
+    <template #heading>
+      <PageHeadingBlock pageTitle="WAF Rules" />
+    </template>
+    <template #content>
+      <ListTableBlock
+        v-if="hasContentToList"
+        :listService="props.listWafRulesService"
+        :deleteService="props.deleteWafRulesService"
+        :columns="getColumns"
+        pageTitleDelete="WAF Rules"
+        addButtonLabel="WAF Rules"
+        createPagePath="waf/create"
+        editPagePath="waf/edit"
+        @on-load-data="handleLoadData"
+      />
+      <EmptyResultsBlock
+        v-else
+        title="No waf rules added"
+        description="Create your first waf rules."
+        createButtonLabel="WAF Rule"
+        createPagePath="waf/create"
+        :documentationService="props.documentationService"
+      >
+        <template #illustration>
+          <Illustration />
+        </template>
+      </EmptyResultsBlock>
+    </template>
+  </ContentBlock>
+</template>
+
+<script setup>
+  import { ref, computed } from 'vue'
+
+  import ListTableBlock from '@/templates/list-table-block'
+  import EmptyResultsBlock from '@/templates/empty-results-block'
+  import Illustration from '@/assets/svg/illustration-layers.vue'
+  import ContentBlock from '@/templates/content-block'
+  import PageHeadingBlock from '@/templates/page-heading-block'
+  import { columnBuilder } from '@/templates/list-table-block/columns/column-builder'
+
+
+  const props = defineProps({
+    listWafRulesService: {
+      required: true,
+      type: Function
+    },
+    deleteWafRulesService: {
+      required: true,
+      type: Function
+    },
+    documentationService: {
+      required: true,
+      type: Function
+    }
+  })
+
+  const hasContentToList = ref(true)
+
+  const handleLoadData = (event) => {
+    hasContentToList.value = event
+  }
+
+  const getColumns = computed(() => {
+    return [
+      {
+        field: 'name',
+        header: 'Name'
+      },
+      {
+        field: 'threatTypes',
+        header: 'Threat Type Configuration',
+        type: 'component',
+        component: (columnData) =>
+          columnBuilder({ data: columnData, columnAppearance: 'expand-column' })
+      },
+      {
+        field: 'active',
+        header: 'Status',
+        type: 'component',
+        component: (columnData) =>
+          columnBuilder({
+            data: columnData,
+            columnAppearance: 'tag'
+          })
+      }
+    ]
+  })
+</script>

From 72b39beee4291f2bb2db6f35582ab79343287dbf Mon Sep 17 00:00:00 2001
From: paulosf0 <paulo.ferreira@azion.com>
Date: Tue, 9 Jan 2024 17:07:32 -0300
Subject: [PATCH 025/135] feat: code format by husky

---
 src/helpers/azion-documentation-catalog.js                | 2 +-
 src/router/routes/waf-rules-routes/index.js               | 4 ++--
 src/services/sidebar-menus-services/menus.js              | 8 +++++++-
 src/services/waf-rules-services/index.js                  | 5 +----
 .../waf-rules-services/make-waf-rules-base-url.js         | 7 +++----
 src/templates/content-block/banner.vue                    | 3 ++-
 src/templates/content-block/index.vue                     | 3 ++-
 src/views/WafRules/ListView.vue                           | 1 -
 8 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/src/helpers/azion-documentation-catalog.js b/src/helpers/azion-documentation-catalog.js
index e3859a69d..55eaf2bb4 100644
--- a/src/helpers/azion-documentation-catalog.js
+++ b/src/helpers/azion-documentation-catalog.js
@@ -25,7 +25,7 @@ export const documentationCatalog = {
   activityHistory: () => openSearchResult('activity history'),
   edgeNodes: () => openSearchResult('edge nodes'),
   records: () => openSearchResult('records'),
-  waf: () =>  openSearchResult('waf')
+  waf: () => openSearchResult('waf')
 }
 
 export const documentationGuideProducts = {
diff --git a/src/router/routes/waf-rules-routes/index.js b/src/router/routes/waf-rules-routes/index.js
index 308549a18..bde3d8279 100644
--- a/src/router/routes/waf-rules-routes/index.js
+++ b/src/router/routes/waf-rules-routes/index.js
@@ -13,7 +13,7 @@ export const wafRulesRoutes = {
       props: {
         listWafRulesService: WafRulesService.listWafRulesService,
         deleteWafRulesService: WafRulesService.deleteWafRulesService,
-        documentationService: Helpers.documentationCatalog.waf,
+        documentationService: Helpers.documentationCatalog.waf
       },
       meta: {
         breadCrumbs: [
@@ -23,6 +23,6 @@ export const wafRulesRoutes = {
           }
         ]
       }
-    },
+    }
   ]
 }
diff --git a/src/services/sidebar-menus-services/menus.js b/src/services/sidebar-menus-services/menus.js
index 11039cfe8..238a0ae13 100644
--- a/src/services/sidebar-menus-services/menus.js
+++ b/src/services/sidebar-menus-services/menus.js
@@ -114,7 +114,13 @@ export const menus = [
         label: 'Network Lists',
         to: '/network-lists',
         icon: 'pi pi-globe'
-      }
+      },
+      {
+        label: 'WAF Rules',
+        to: '/waf',
+        icon: 'pi pi-globe'
+      },
+
     ]
   }
 ]
diff --git a/src/services/waf-rules-services/index.js b/src/services/waf-rules-services/index.js
index e2064c02d..8acd2986f 100644
--- a/src/services/waf-rules-services/index.js
+++ b/src/services/waf-rules-services/index.js
@@ -1,7 +1,4 @@
 import { listWafRulesService } from './list-waf-rules-service'
 import { deleteWafRulesService } from './delete-waf-rules-service'
 
-export {
-    listWafRulesService,
-    deleteWafRulesService
-} 
\ No newline at end of file
+export { listWafRulesService, deleteWafRulesService }
diff --git a/src/services/waf-rules-services/make-waf-rules-base-url.js b/src/services/waf-rules-services/make-waf-rules-base-url.js
index f30c25398..20994969a 100644
--- a/src/services/waf-rules-services/make-waf-rules-base-url.js
+++ b/src/services/waf-rules-services/make-waf-rules-base-url.js
@@ -1,5 +1,4 @@
 export const makeWafRulesBaseUrl = () => {
-    const version = 'v3'
-    return `${version}/waf`
-  }
-  
\ No newline at end of file
+  const version = 'v3'
+  return `${version}/waf`
+}
diff --git a/src/templates/content-block/banner.vue b/src/templates/content-block/banner.vue
index 47c40b9c7..9fd833e91 100644
--- a/src/templates/content-block/banner.vue
+++ b/src/templates/content-block/banner.vue
@@ -18,7 +18,8 @@
           </template>
           <p class="text-color-secondary">
             <b class="text-color">Preview stage.</b>
-            This platform is under development. Expect occasional instability or bugs during this time.
+            This platform is under development. Expect occasional instability or bugs during this
+            time.
             <ButtonPrime
               class="p-0"
               label="Report an issue"
diff --git a/src/templates/content-block/index.vue b/src/templates/content-block/index.vue
index 24bf2107a..1b557c50a 100644
--- a/src/templates/content-block/index.vue
+++ b/src/templates/content-block/index.vue
@@ -17,7 +17,8 @@
         </template>
         <p class="text-color-secondary">
           <b class="text-color">Preview stage.</b>
-          This platform is under development. Expect occasional instability or bugs during this time.
+          This platform is under development. Expect occasional instability or bugs during this
+          time.
           <ButtonPrime
             class="p-0"
             label="Report an issue"
diff --git a/src/views/WafRules/ListView.vue b/src/views/WafRules/ListView.vue
index 8d809e8d7..321aa99e2 100644
--- a/src/views/WafRules/ListView.vue
+++ b/src/views/WafRules/ListView.vue
@@ -41,7 +41,6 @@
   import PageHeadingBlock from '@/templates/page-heading-block'
   import { columnBuilder } from '@/templates/list-table-block/columns/column-builder'
 
-
   const props = defineProps({
     listWafRulesService: {
       required: true,

From d63287005c7d460a2ff1f82536fab93b88d1ce24 Mon Sep 17 00:00:00 2001
From: paulosf0 <paulo.ferreira@azion.com>
Date: Tue, 9 Jan 2024 17:39:51 -0300
Subject: [PATCH 026/135] feat: add tests delete,list and make url

---
 src/services/sidebar-menus-services/menus.js  |  3 +-
 .../list-waf-rules-service.js                 | 16 +---
 .../delete-waf-rules-service.test.js          | 81 ++++++++++++++++
 .../list-waf-rules-service.test.js            | 94 +++++++++++++++++++
 .../make-waf-rules-base-url.test.js           | 22 +++++
 5 files changed, 203 insertions(+), 13 deletions(-)
 create mode 100644 src/tests/services/waf-rules-services/delete-waf-rules-service.test.js
 create mode 100644 src/tests/services/waf-rules-services/list-waf-rules-service.test.js
 create mode 100644 src/tests/services/waf-rules-services/make-waf-rules-base-url.test.js

diff --git a/src/services/sidebar-menus-services/menus.js b/src/services/sidebar-menus-services/menus.js
index 238a0ae13..8fb5fd8b2 100644
--- a/src/services/sidebar-menus-services/menus.js
+++ b/src/services/sidebar-menus-services/menus.js
@@ -119,8 +119,7 @@ export const menus = [
         label: 'WAF Rules',
         to: '/waf',
         icon: 'pi pi-globe'
-      },
-
+      }
     ]
   }
 ]
diff --git a/src/services/waf-rules-services/list-waf-rules-service.js b/src/services/waf-rules-services/list-waf-rules-service.js
index b61362284..27f6a22ab 100644
--- a/src/services/waf-rules-services/list-waf-rules-service.js
+++ b/src/services/waf-rules-services/list-waf-rules-service.js
@@ -42,7 +42,9 @@ const adapt = (httpResponse) => {
     sql_injection: 'SQL Injection'
   }
 
-  const parsedWafRules = httpResponse.body.results.map((waf) => {
+  const isArray = Array.isArray(httpResponse.body.results)
+
+  const parsedWafRules = isArray ? httpResponse.body.results.map((waf) => {
     const threatTypesArray = []
     for (const key in threatTypes) {
       if (Object.hasOwnProperty.call(threatTypes, key)) {
@@ -55,29 +57,21 @@ const adapt = (httpResponse) => {
     const parser = {
       active: parseStatusData(waf.active),
       bypassAddresses: waf.bypass_addresses,
-      crossSiteScripting: waf.cross_site_scripting,
       crossSiteScriptingSensitivity: waf.cross_site_scripting_sensitivity,
-      directoryTraversal: waf.directory_traversal,
       directoryTraversalSensitivity: waf.directory_traversal_sensitivity,
-      evadingTricks: waf.evading_tricks,
       evadingTricksSensitivity: waf.evading_tricks_sensitivity,
-      fileUpload: waf.file_upload,
       fileUploadSensitivity: waf.file_upload_sensitivity,
       id: waf.id,
-      identifiedAttack: waf.identified_attack,
       identifiedAttackSensitivity: waf.identified_attack_sensitivity,
       mode: waf.mode,
       name: waf.name,
-      remoteFileInclusion: waf.remote_file_inclusion,
       remoteFileInclusionSensitivity: waf.remote_file_inclusion_sensitivity,
-      sqlInjection: waf.sql_injection,
       sqlInjectionSensitivity: waf.sql_injection_sensitivity,
-      unwantedAccess: waf.unwanted_access,
       unwantedAccessSensitivity: waf.unwanted_access_sensitivity,
       threatTypes: threatTypesArray
-    }
+    } 
     return parser
-  })
+  }) : []
 
   return {
     body: parsedWafRules,
diff --git a/src/tests/services/waf-rules-services/delete-waf-rules-service.test.js b/src/tests/services/waf-rules-services/delete-waf-rules-service.test.js
new file mode 100644
index 000000000..658326117
--- /dev/null
+++ b/src/tests/services/waf-rules-services/delete-waf-rules-service.test.js
@@ -0,0 +1,81 @@
+import { AxiosHttpClientAdapter } from '@/services/axios/AxiosHttpClientAdapter'
+import { deleteWafRulesService } from '@/services/waf-rules-services'
+import * as Errors from '@/services/axios/errors'
+import { describe, expect, it, vi } from 'vitest'
+
+const makeSut = () => {
+  const sut = deleteWafRulesService
+
+  return {
+    sut
+  }
+}
+
+describe('WafRulesServices', () => {
+  it('should call API with correct params', async () => {
+    const requestSpy = vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+      statusCode: 204
+    })
+    const wafRuleIdMock = 765678
+    const { sut } = makeSut()
+    const version = 'v3'
+    await sut(wafRuleIdMock)
+
+    expect(requestSpy).toHaveBeenCalledWith({
+      url: `${version}/waf/rulesets/${wafRuleIdMock}`,
+      method: 'DELETE'
+    })
+  })
+
+  it('should return a feedback message on successfully deleted', async () => {
+    vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+      statusCode: 204
+    })
+    const wafRuleIdMock = 7816825367
+    const { sut } = makeSut()
+
+    const feedbackMessage = await sut(wafRuleIdMock)
+
+    expect(feedbackMessage).toBe('Waf rule successfully deleted')
+  })
+
+  it.each([
+    {
+      statusCode: 400,
+      expectedError: new Errors.NotFoundError().message
+    },
+    {
+      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 }) => {
+      const wafRuleIdMock = 7816825367
+      vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+        statusCode
+      })
+      const { sut } = makeSut()
+
+      const response = sut(wafRuleIdMock)
+
+      expect(response).rejects.toBe(expectedError)
+    }
+  )
+})
diff --git a/src/tests/services/waf-rules-services/list-waf-rules-service.test.js b/src/tests/services/waf-rules-services/list-waf-rules-service.test.js
new file mode 100644
index 000000000..be5c2af1b
--- /dev/null
+++ b/src/tests/services/waf-rules-services/list-waf-rules-service.test.js
@@ -0,0 +1,94 @@
+import { AxiosHttpClientAdapter } from '@/services/axios/AxiosHttpClientAdapter'
+import { listWafRulesService } from '@/services/waf-rules-services'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+const fixtures = {
+  wafRulesMock: {
+    active: true,
+    bypass_addresses: [],
+    cross_site_scripting: false,
+    cross_site_scripting_sensitivity: "medium",
+    directory_traversal: false,
+    directory_traversal_sensitivity: "medium",
+    evading_tricks: false,
+    evading_tricks_sensitivity: "medium",
+    file_upload: true,
+    file_upload_sensitivity: "medium",
+    id: 4044,
+    identified_attack: false,
+    identified_attack_sensitivity: "medium",
+    mode: "counting",
+    name: "test",
+    remote_file_inclusion: false,
+    remote_file_inclusion_sensitivity: "medium",
+    sql_injection: false,
+    sql_injection_sensitivity: "medium",
+    unwanted_access: false,
+    unwanted_access_sensitivity: "medium",
+  }
+}
+
+const makeSut = () => {
+  const sut = listWafRulesService
+
+  return {
+    sut
+  }
+}
+
+describe('WafRulesService', () => {
+  beforeEach(() => {
+    vi.useFakeTimers()
+  })
+  afterEach(() => {
+    vi.useRealTimers()
+  })
+
+  it('should call api with correct params', async () => {
+    const requestSpy = vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+      statusCode: 200,
+      body: { result: null }
+    })
+
+    const { sut } = makeSut()
+    const version = 'v3'
+    await sut()
+
+    expect(requestSpy).toHaveBeenCalledWith({
+      url: `${version}/waf/?page=1&page_size=100`,
+      method: 'GET'
+    })
+  })
+
+  it('should parsed correctly each waf rules', async () => {
+    vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+      statusCode: 200,
+      body: {results: [fixtures.wafRulesMock]}
+    })
+    const { sut } = makeSut()
+
+    const result = await sut()
+
+    expect(result).toEqual([
+      {
+        id: fixtures.wafRulesMock.id,
+        active:  {
+            content: 'Active',
+            severity: 'success'
+          },
+        bypassAddresses: fixtures.wafRulesMock.bypass_addresses,
+        crossSiteScriptingSensitivity: fixtures.wafRulesMock.cross_site_scripting_sensitivity,
+        directoryTraversalSensitivity: fixtures.wafRulesMock.directory_traversal_sensitivity,
+        evadingTricksSensitivity: fixtures.wafRulesMock.evading_tricks_sensitivity,
+        fileUploadSensitivity: fixtures.wafRulesMock.file_upload_sensitivity,
+        identifiedAttackSensitivity: fixtures.wafRulesMock.identified_attack_sensitivity,
+        mode: fixtures.wafRulesMock.mode,
+        name: fixtures.wafRulesMock.name,
+        remoteFileInclusionSensitivity: fixtures.wafRulesMock.remote_file_inclusion_sensitivity,
+        sqlInjectionSensitivity: fixtures.wafRulesMock.sql_injection_sensitivity,
+        unwantedAccessSensitivity: fixtures.wafRulesMock.unwanted_access_sensitivity,
+        threatTypes: ['File upload']
+      }
+    ])
+  })
+})
diff --git a/src/tests/services/waf-rules-services/make-waf-rules-base-url.test.js b/src/tests/services/waf-rules-services/make-waf-rules-base-url.test.js
new file mode 100644
index 000000000..b0138b22b
--- /dev/null
+++ b/src/tests/services/waf-rules-services/make-waf-rules-base-url.test.js
@@ -0,0 +1,22 @@
+import { makeWafRulesBaseUrl } from '@/services/waf-rules-services/make-waf-rules-base-url'
+import { assert, describe, it } from 'vitest'
+
+const makeSut = () => {
+  const sut = makeWafRulesBaseUrl
+
+  return {
+    sut
+  }
+}
+
+describe('WafRulesService', () => {
+  it('should return the API base url to waf rules service', () => {
+    const { sut } = makeSut()
+    const version = 'v3'
+    const correctApiUrl = `${version}/waf`
+
+    const baseUrl = sut()
+
+    assert.strictEqual(baseUrl, correctApiUrl)
+  })
+})

From 32537adecd2327333bbf33a5a82b1dcdc3568574 Mon Sep 17 00:00:00 2001
From: paulosf0 <paulo.ferreira@azion.com>
Date: Tue, 9 Jan 2024 17:40:47 -0300
Subject: [PATCH 027/135] feat: code format by husky

---
 .../list-waf-rules-service.js                 | 56 ++++++++++---------
 .../list-waf-rules-service.test.js            | 30 +++++-----
 2 files changed, 44 insertions(+), 42 deletions(-)

diff --git a/src/services/waf-rules-services/list-waf-rules-service.js b/src/services/waf-rules-services/list-waf-rules-service.js
index 27f6a22ab..ac4dbe3a5 100644
--- a/src/services/waf-rules-services/list-waf-rules-service.js
+++ b/src/services/waf-rules-services/list-waf-rules-service.js
@@ -44,34 +44,36 @@ const adapt = (httpResponse) => {
 
   const isArray = Array.isArray(httpResponse.body.results)
 
-  const parsedWafRules = isArray ? httpResponse.body.results.map((waf) => {
-    const threatTypesArray = []
-    for (const key in threatTypes) {
-      if (Object.hasOwnProperty.call(threatTypes, key)) {
-        const threat = threatTypes[key]
-        if (waf[key]) {
-          threatTypesArray.push(threat)
+  const parsedWafRules = isArray
+    ? httpResponse.body.results.map((waf) => {
+        const threatTypesArray = []
+        for (const key in threatTypes) {
+          if (Object.hasOwnProperty.call(threatTypes, key)) {
+            const threat = threatTypes[key]
+            if (waf[key]) {
+              threatTypesArray.push(threat)
+            }
+          }
         }
-      }
-    }
-    const parser = {
-      active: parseStatusData(waf.active),
-      bypassAddresses: waf.bypass_addresses,
-      crossSiteScriptingSensitivity: waf.cross_site_scripting_sensitivity,
-      directoryTraversalSensitivity: waf.directory_traversal_sensitivity,
-      evadingTricksSensitivity: waf.evading_tricks_sensitivity,
-      fileUploadSensitivity: waf.file_upload_sensitivity,
-      id: waf.id,
-      identifiedAttackSensitivity: waf.identified_attack_sensitivity,
-      mode: waf.mode,
-      name: waf.name,
-      remoteFileInclusionSensitivity: waf.remote_file_inclusion_sensitivity,
-      sqlInjectionSensitivity: waf.sql_injection_sensitivity,
-      unwantedAccessSensitivity: waf.unwanted_access_sensitivity,
-      threatTypes: threatTypesArray
-    } 
-    return parser
-  }) : []
+        const parser = {
+          active: parseStatusData(waf.active),
+          bypassAddresses: waf.bypass_addresses,
+          crossSiteScriptingSensitivity: waf.cross_site_scripting_sensitivity,
+          directoryTraversalSensitivity: waf.directory_traversal_sensitivity,
+          evadingTricksSensitivity: waf.evading_tricks_sensitivity,
+          fileUploadSensitivity: waf.file_upload_sensitivity,
+          id: waf.id,
+          identifiedAttackSensitivity: waf.identified_attack_sensitivity,
+          mode: waf.mode,
+          name: waf.name,
+          remoteFileInclusionSensitivity: waf.remote_file_inclusion_sensitivity,
+          sqlInjectionSensitivity: waf.sql_injection_sensitivity,
+          unwantedAccessSensitivity: waf.unwanted_access_sensitivity,
+          threatTypes: threatTypesArray
+        }
+        return parser
+      })
+    : []
 
   return {
     body: parsedWafRules,
diff --git a/src/tests/services/waf-rules-services/list-waf-rules-service.test.js b/src/tests/services/waf-rules-services/list-waf-rules-service.test.js
index be5c2af1b..8d1c4ea46 100644
--- a/src/tests/services/waf-rules-services/list-waf-rules-service.test.js
+++ b/src/tests/services/waf-rules-services/list-waf-rules-service.test.js
@@ -7,24 +7,24 @@ const fixtures = {
     active: true,
     bypass_addresses: [],
     cross_site_scripting: false,
-    cross_site_scripting_sensitivity: "medium",
+    cross_site_scripting_sensitivity: 'medium',
     directory_traversal: false,
-    directory_traversal_sensitivity: "medium",
+    directory_traversal_sensitivity: 'medium',
     evading_tricks: false,
-    evading_tricks_sensitivity: "medium",
+    evading_tricks_sensitivity: 'medium',
     file_upload: true,
-    file_upload_sensitivity: "medium",
+    file_upload_sensitivity: 'medium',
     id: 4044,
     identified_attack: false,
-    identified_attack_sensitivity: "medium",
-    mode: "counting",
-    name: "test",
+    identified_attack_sensitivity: 'medium',
+    mode: 'counting',
+    name: 'test',
     remote_file_inclusion: false,
-    remote_file_inclusion_sensitivity: "medium",
+    remote_file_inclusion_sensitivity: 'medium',
     sql_injection: false,
-    sql_injection_sensitivity: "medium",
+    sql_injection_sensitivity: 'medium',
     unwanted_access: false,
-    unwanted_access_sensitivity: "medium",
+    unwanted_access_sensitivity: 'medium'
   }
 }
 
@@ -63,7 +63,7 @@ describe('WafRulesService', () => {
   it('should parsed correctly each waf rules', async () => {
     vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
       statusCode: 200,
-      body: {results: [fixtures.wafRulesMock]}
+      body: { results: [fixtures.wafRulesMock] }
     })
     const { sut } = makeSut()
 
@@ -72,10 +72,10 @@ describe('WafRulesService', () => {
     expect(result).toEqual([
       {
         id: fixtures.wafRulesMock.id,
-        active:  {
-            content: 'Active',
-            severity: 'success'
-          },
+        active: {
+          content: 'Active',
+          severity: 'success'
+        },
         bypassAddresses: fixtures.wafRulesMock.bypass_addresses,
         crossSiteScriptingSensitivity: fixtures.wafRulesMock.cross_site_scripting_sensitivity,
         directoryTraversalSensitivity: fixtures.wafRulesMock.directory_traversal_sensitivity,

From c37cac2d976bdfbad35262bc71e8ded5bca328ad Mon Sep 17 00:00:00 2001
From: paulosf0 <paulo.ferreira@azion.com>
Date: Wed, 10 Jan 2024 08:29:07 -0300
Subject: [PATCH 028/135] feat: add waf icon

---
 src/services/sidebar-menus-services/menus.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/services/sidebar-menus-services/menus.js b/src/services/sidebar-menus-services/menus.js
index 8fb5fd8b2..6ca9b68b1 100644
--- a/src/services/sidebar-menus-services/menus.js
+++ b/src/services/sidebar-menus-services/menus.js
@@ -118,7 +118,7 @@ export const menus = [
       {
         label: 'WAF Rules',
         to: '/waf',
-        icon: 'pi pi-globe'
+        icon: 'pi pi-sliders-h'
       }
     ]
   }

From f05b6cc61d68dc8ef5b4ce82f36135a6d8a41d30 Mon Sep 17 00:00:00 2001
From: paulosf0 <paulo.ferreira@azion.com>
Date: Wed, 10 Jan 2024 08:45:46 -0300
Subject: [PATCH 029/135] feat: add load edge functions test

---
 .../load-edge-functions-service.test.js       | 79 +++++++++++++++++++
 .../EdgeFunctions/components/code-editor.vue  |  3 +-
 2 files changed, 80 insertions(+), 2 deletions(-)
 create mode 100644 src/tests/services/edge-functions-services/load-edge-functions-service.test.js

diff --git a/src/tests/services/edge-functions-services/load-edge-functions-service.test.js b/src/tests/services/edge-functions-services/load-edge-functions-service.test.js
new file mode 100644
index 000000000..8e338cba2
--- /dev/null
+++ b/src/tests/services/edge-functions-services/load-edge-functions-service.test.js
@@ -0,0 +1,79 @@
+import { AxiosHttpClientAdapter } from '@/services/axios/AxiosHttpClientAdapter'
+import { loadEdgeFunctionsService } from '@/services/edge-functions-services'
+import { describe, expect, it, vi } from 'vitest'
+
+const fixtures = {
+  edgeFunctionsMock: {
+    active: true,
+    code: 'local cjson = require("cjson")\r\nlocal function main(api, args)\r\n    local request = cjson.decode(user_req)\r\n    local response = cjson.decode(user_res)\r\n    local json_args = cjson.decode(user_param)\r\n    if  ngx.var.geo_city == "São Paulo" then \r\n     ngx.header["aassss"] = ngx.var.geo_city\r\n    end\r\n    return cjson.encode(request), cjson.encode(response)\r\nend\r\n',
+    function_to_run: 'main',
+    id: 28518,
+    initiator_type: 'edge_application',
+    is_proprietary_code: false,
+    json_args: {},
+    language: 'lua',
+    last_editor: 'Azion',
+    modified: '2023-10-17T18:26:23.047240Z',
+    name: 'baggio',
+    reference_count: 0
+  }
+}
+
+const makeSut = () => {
+  const sut = loadEdgeFunctionsService
+
+  return {
+    sut
+  }
+}
+
+describe('EdgeFunctionsServices', () => {
+  it('should call api with correct params', async () => {
+    const requestSpy = vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+      statusCode: 200,
+      body: { results: fixtures.edgeFunctionsMock }
+    })
+    const edgeFunctionsMockId = 2
+    const { sut } = makeSut()
+    const version = 'v3'
+    await sut({ id: edgeFunctionsMockId })
+
+    expect(requestSpy).toHaveBeenCalledWith({
+      url: `${version}/edge_functions/${edgeFunctionsMockId}`,
+      method: 'GET'
+    })
+  })
+
+  it('should parsed correctly the returned', async () => {
+    vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+      statusCode: 200,
+      body: { results: fixtures.edgeFunctionsMock }
+    })
+    const { sut } = makeSut()
+
+    const result = await sut({ id: fixtures.edgeFunctionsMock.id })
+
+    expect(result).toEqual({
+      id: fixtures.edgeFunctionsMock.id,
+      active: fixtures.edgeFunctionsMock.active,
+      language: fixtures.edgeFunctionsMock.language,
+      initiatorType: fixtures.edgeFunctionsMock.initiator_type,
+      lastEditor: fixtures.edgeFunctionsMock.last_editor,
+      referenceCount: fixtures.edgeFunctionsMock.reference_count,
+      jsonArgs: '{}',
+      name: fixtures.edgeFunctionsMock.name,
+      code: fixtures.edgeFunctionsMock.code,
+      version: "-",
+      modified: "Tuesday, October 17, 2023",
+      statusTag: {
+        content: "Active",
+        severity: "success",
+      },
+      languageIcon: {
+        content: "Lua",
+        icon: "lua",
+      },
+      isProprietaryCode: fixtures.edgeFunctionsMock.is_proprietary_code
+    })
+  })
+})
diff --git a/src/views/EdgeFunctions/components/code-editor.vue b/src/views/EdgeFunctions/components/code-editor.vue
index f5eac3302..b41fe2b84 100644
--- a/src/views/EdgeFunctions/components/code-editor.vue
+++ b/src/views/EdgeFunctions/components/code-editor.vue
@@ -22,8 +22,7 @@
     modelValue: String,
     initialValue: String,
     readOnly: {
-      type: Boolean,
-      default: false
+      type: Boolean
     },
     language: {
       type: String,

From 2fe0e2fa62f7a6509076699249de2dc23754cb28 Mon Sep 17 00:00:00 2001
From: paulosf0 <paulo.ferreira@azion.com>
Date: Wed, 10 Jan 2024 09:08:37 -0300
Subject: [PATCH 030/135] feat: code format by husky

---
 .../load-edge-functions-service.test.js              | 12 ++++++------
 src/views/EdgeFunctions/components/code-editor.vue   |  2 +-
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/tests/services/edge-functions-services/load-edge-functions-service.test.js b/src/tests/services/edge-functions-services/load-edge-functions-service.test.js
index 8e338cba2..c3af30e6f 100644
--- a/src/tests/services/edge-functions-services/load-edge-functions-service.test.js
+++ b/src/tests/services/edge-functions-services/load-edge-functions-service.test.js
@@ -63,15 +63,15 @@ describe('EdgeFunctionsServices', () => {
       jsonArgs: '{}',
       name: fixtures.edgeFunctionsMock.name,
       code: fixtures.edgeFunctionsMock.code,
-      version: "-",
-      modified: "Tuesday, October 17, 2023",
+      version: '-',
+      modified: 'Tuesday, October 17, 2023',
       statusTag: {
-        content: "Active",
-        severity: "success",
+        content: 'Active',
+        severity: 'success'
       },
       languageIcon: {
-        content: "Lua",
-        icon: "lua",
+        content: 'Lua',
+        icon: 'lua'
       },
       isProprietaryCode: fixtures.edgeFunctionsMock.is_proprietary_code
     })
diff --git a/src/views/EdgeFunctions/components/code-editor.vue b/src/views/EdgeFunctions/components/code-editor.vue
index b41fe2b84..6923d6430 100644
--- a/src/views/EdgeFunctions/components/code-editor.vue
+++ b/src/views/EdgeFunctions/components/code-editor.vue
@@ -45,7 +45,7 @@
     formatOnPaste: true,
     readOnly: props.readOnly
   })
-  
+
   watch(
     () => props.modelValue,
     (modelValue) => (code.value = modelValue)

From 0eca8d4b1a86ef6833bd672f40db6250c20abedf Mon Sep 17 00:00:00 2001
From: paulosf0 <paulo.ferreira@azion.com>
Date: Wed, 10 Jan 2024 09:45:33 -0300
Subject: [PATCH 031/135] feat: add v3 in url

---
 .../load-edge-functions-service.test.js                        | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/tests/services/edge-functions-services/load-edge-functions-service.test.js b/src/tests/services/edge-functions-services/load-edge-functions-service.test.js
index c3af30e6f..685ad2eb1 100644
--- a/src/tests/services/edge-functions-services/load-edge-functions-service.test.js
+++ b/src/tests/services/edge-functions-services/load-edge-functions-service.test.js
@@ -35,11 +35,10 @@ describe('EdgeFunctionsServices', () => {
     })
     const edgeFunctionsMockId = 2
     const { sut } = makeSut()
-    const version = 'v3'
     await sut({ id: edgeFunctionsMockId })
 
     expect(requestSpy).toHaveBeenCalledWith({
-      url: `${version}/edge_functions/${edgeFunctionsMockId}`,
+      url: `v3/edge_functions/${edgeFunctionsMockId}`,
       method: 'GET'
     })
   })

From c1538e71418ffc081d789fa3fa3151b4be48b4ad Mon Sep 17 00:00:00 2001
From: paulosf0 <paulo.ferreira@azion.com>
Date: Wed, 10 Jan 2024 10:15:47 -0300
Subject: [PATCH 032/135] feat: add javascript language in test

---
 .../load-edge-functions-service.test.js       | 47 +++++++++++++++++++
 1 file changed, 47 insertions(+)

diff --git a/src/tests/services/edge-functions-services/load-edge-functions-service.test.js b/src/tests/services/edge-functions-services/load-edge-functions-service.test.js
index 685ad2eb1..a26769a66 100644
--- a/src/tests/services/edge-functions-services/load-edge-functions-service.test.js
+++ b/src/tests/services/edge-functions-services/load-edge-functions-service.test.js
@@ -16,6 +16,20 @@ const fixtures = {
     modified: '2023-10-17T18:26:23.047240Z',
     name: 'baggio',
     reference_count: 0
+  },
+  edgeFunctionsMockJsAndInactive: {
+    active: false,
+    code: 'local cjson = require("cjson")\r\nlocal function main(api, args)\r\n    local request = cjson.decode(user_req)\r\n    local response = cjson.decode(user_res)\r\n    local json_args = cjson.decode(user_param)\r\n    if  ngx.var.geo_city == "São Paulo" then \r\n     ngx.header["aassss"] = ngx.var.geo_city\r\n    end\r\n    return cjson.encode(request), cjson.encode(response)\r\nend\r\n',
+    function_to_run: 'main',
+    id: 28518,
+    initiator_type: 'edge_application',
+    is_proprietary_code: false,
+    json_args: {},
+    language: 'javascript',
+    last_editor: 'Azion',
+    modified: '2023-10-17T18:26:23.047240Z',
+    name: 'baggio',
+    reference_count: 0
   }
 }
 
@@ -75,4 +89,37 @@ describe('EdgeFunctionsServices', () => {
       isProprietaryCode: fixtures.edgeFunctionsMock.is_proprietary_code
     })
   })
+
+  it('should parsed correctly the returned with javascript language and inactive', async () => {
+    vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+      statusCode: 200,
+      body: { results: fixtures.edgeFunctionsMockJsAndInactive }
+    })
+    const { sut } = makeSut()
+
+    const result = await sut({ id: fixtures.edgeFunctionsMockJsAndInactive.id })
+
+    expect(result).toEqual({
+      id: fixtures.edgeFunctionsMockJsAndInactive.id,
+      active: fixtures.edgeFunctionsMockJsAndInactive.active,
+      language: fixtures.edgeFunctionsMockJsAndInactive.language,
+      initiatorType: fixtures.edgeFunctionsMockJsAndInactive.initiator_type,
+      lastEditor: fixtures.edgeFunctionsMockJsAndInactive.last_editor,
+      referenceCount: fixtures.edgeFunctionsMockJsAndInactive.reference_count,
+      jsonArgs: '{}',
+      name: fixtures.edgeFunctionsMockJsAndInactive.name,
+      code: fixtures.edgeFunctionsMockJsAndInactive.code,
+      version: '-',
+      modified: 'Tuesday, October 17, 2023',
+      statusTag: {
+        content: 'Inactive',
+        severity: 'danger'
+      },
+      languageIcon: {
+        content: 'JavaScript',
+        icon: 'javascript'
+      },
+      isProprietaryCode: fixtures.edgeFunctionsMockJsAndInactive.is_proprietary_code
+    })
+  })
 })

From 75c0d435938284b823a2f44b784f6410e5b21014 Mon Sep 17 00:00:00 2001
From: Matheus Sunderhus <matheus.sunderhus@azion.com>
Date: Wed, 10 Jan 2024 10:27:36 -0300
Subject: [PATCH 033/135] fix: test message on load-edge-functions-service

---
 .../load-edge-functions-service.test.js                       | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/tests/services/edge-functions-services/load-edge-functions-service.test.js b/src/tests/services/edge-functions-services/load-edge-functions-service.test.js
index a26769a66..e450e20f0 100644
--- a/src/tests/services/edge-functions-services/load-edge-functions-service.test.js
+++ b/src/tests/services/edge-functions-services/load-edge-functions-service.test.js
@@ -57,7 +57,7 @@ describe('EdgeFunctionsServices', () => {
     })
   })
 
-  it('should parsed correctly the returned', async () => {
+  it('should parsed correctly the returned edge function', async () => {
     vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
       statusCode: 200,
       body: { results: fixtures.edgeFunctionsMock }
@@ -90,7 +90,7 @@ describe('EdgeFunctionsServices', () => {
     })
   })
 
-  it('should parsed correctly the returned with javascript language and inactive', async () => {
+  it('should parsed correctly the returned with edge function language and status', async () => {
     vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
       statusCode: 200,
       body: { results: fixtures.edgeFunctionsMockJsAndInactive }

From ba2e3ca4308fee080a259f408b3e54ef2c2d0b95 Mon Sep 17 00:00:00 2001
From: "bruna.andrade" <bruna.andrade@azion.com>
Date: Wed, 10 Jan 2024 11:16:34 -0300
Subject: [PATCH 034/135] chore: modify edge certificate label in domains

---
 src/views/DigitalCertificates/CreateView.vue  |  2 +-
 .../FormFieldsCreateDigitalCertificates.vue   | 45 +++++++++----------
 .../FormFieldsEditDigitalCertificates.vue     | 31 +++++--------
 .../FormFields/FormFieldsCreateDomains.vue    |  2 +-
 .../FormFields/FormFieldsEditDomains.vue      |  2 +-
 5 files changed, 36 insertions(+), 46 deletions(-)

diff --git a/src/views/DigitalCertificates/CreateView.vue b/src/views/DigitalCertificates/CreateView.vue
index 936c0e2c4..7ae318a40 100644
--- a/src/views/DigitalCertificates/CreateView.vue
+++ b/src/views/DigitalCertificates/CreateView.vue
@@ -13,7 +13,7 @@
           <InlineMessage
             class="w-fit"
             severity="info"
-            >Now you can easily create a Let's Encrypt™ digital certificate directly from
+            >Create a Let's Encrypt™ digital certificate directly from
             <PrimeButton
               link
               size="small"
diff --git a/src/views/DigitalCertificates/FormFields/FormFieldsCreateDigitalCertificates.vue b/src/views/DigitalCertificates/FormFields/FormFieldsCreateDigitalCertificates.vue
index aa776da1a..943b4b4d4 100644
--- a/src/views/DigitalCertificates/FormFields/FormFieldsCreateDigitalCertificates.vue
+++ b/src/views/DigitalCertificates/FormFields/FormFieldsCreateDigitalCertificates.vue
@@ -68,7 +68,7 @@
 <template>
   <FormHorizontal
     title="General"
-    description="Description"
+    description="Create a digital certificate entry to secure HTTPS edge applications."
   >
     <template #inputs>
       <div class="flex flex-col sm:max-w-lg w-full gap-2">
@@ -81,6 +81,7 @@
           v-model="digitalCertificateName"
           type="text"
           id="name"
+          placeholder="My digital certificate"
           :class="{ 'p-invalid': digitalCertificateNameError }"
         />
         <small
@@ -94,12 +95,11 @@
 
   <FormHorizontal
     title="Certificate Type"
-    description="Bring a TLS X.509 digital certificate and private key obtained
-        from a certificate authority or a Trusted CA for mTLS authentication.
-        As an alternative, generate a Certificate Signing Request (CSR) with Azion and submit it to a certificate authority."
+    description="Select the type of certificate to associate with the account."
   >
     <template #inputs>
       <div class="flex flex-col w-full gap-3">
+
         <Card
           :pt="{
             body: { class: 'p-4' },
@@ -110,15 +110,15 @@
           }"
         >
           <template #title>
-            <span class="text-base">Edge Certificate - Upload</span>
+            <span class="text-base"> Request a certificate </span>
             <RadioButton
               v-model="certificateType"
-              inputId="certificateType2"
+              inputId="certificateType1"
               name="certificateType"
-              :value="certificateTypes.EDGE_CERTIFICATE_UPLOAD"
+              :value="certificateTypes.EDGE_CERTIFICATE_CSR"
             />
           </template>
-          <template #subtitle> Upload your certificate and private key. </template>
+          <template #subtitle> Generate a Certificate Singing Request (CSR) to obtain a digital certificate. </template>
         </Card>
 
         <Card
@@ -131,15 +131,15 @@
           }"
         >
           <template #title>
-            <span class="text-base">Edge Certificate - Generate</span>
+            <span class="text-base"> Import a certificate</span>
             <RadioButton
               v-model="certificateType"
-              inputId="certificateType1"
+              inputId="certificateType2"
               name="certificateType"
-              :value="certificateTypes.EDGE_CERTIFICATE_CSR"
+              :value="certificateTypes.EDGE_CERTIFICATE_UPLOAD"
             />
           </template>
-          <template #subtitle> Generate CSR and private key with Azion. </template>
+          <template #subtitle> Upload a PEM certificate and private key. </template>
         </Card>
 
         <Card
@@ -152,7 +152,7 @@
           }"
         >
           <template #title>
-            <span class="text-base">Trusted CA Certificate</span>
+            <span class="text-base"> Import a Trusted CA certificate </span>
             <RadioButton
               v-model="certificateType"
               inputId="certificateType3"
@@ -160,7 +160,7 @@
               :value="certificateTypes.TRUSTED"
             />
           </template>
-          <template #subtitle> Upload your Trusted CA Certificate to Azion servers. </template>
+          <template #subtitle> Upload a PEM certificate for mutual Transport Layer Security (mTLS). </template>
         </Card>
       </div>
     </template>
@@ -168,8 +168,8 @@
 
   <FormHorizontal
     v-if="isUploadCertificate"
-    title="Upload Certificate and Private Key"
-    description="To upload a digital certificate, copy and paste the certificate and private key codes in the respective fields, including the begin and end tags."
+    title="Import a Certificate"
+    description="Paste the PEM-encoded certificate and private key in the respective fields."
   >
     <template #inputs>
       <div class="flex flex-col sm:max-w-lg w-full gap-2">
@@ -209,9 +209,8 @@
   </FormHorizontal>
 
   <FormHorizontal
-    title="Generate CSR and Private Key with Azion"
-    description="To apply for a digital certificate issued by a certificate authority, a Certificate Signing Request is required.
-        Azion can generate a certificate code to submit to a certificate authority."
+    title="Request a Certificate"
+    description="Generate a CSR and private key and submit to a certificate authority to generate a digital certificate."
     v-if="isEdgeCSRCertificate"
   >
     <template #inputs>
@@ -341,7 +340,7 @@
           cols="30"
         />
         <small class="text-color-secondary text-xs font-normal leading-tight"
-          >Separate SAN using a new line. Duplicate entries will be automatically removed.</small
+          >Use line breaks to separate each SAN. Duplicate entries will be automatically removed.</small
         >
         <small
           v-if="subjectAlternativeNamesError"
@@ -353,8 +352,8 @@
   </FormHorizontal>
 
   <FormHorizontal
-    title="Upload Trusted CA certificate"
-    description="A Trusted Certificate Authority (CA) certificate can be used for Mutual Transport Layer Security (mTLS) configuration. To upload a Trusted CA Certificate to Azion, paste the certificate code in the respective field."
+    title="Import a Trusted CA certificate"
+    description="Paste the PEM-encoded Trusted CA certificate for mTLS in the respective field."
     v-if="isTrustedCertificate"
   >
     <template #inputs>
@@ -363,7 +362,7 @@
         <PrimeTextarea
           v-model="certificate"
           :class="{ 'p-invalid': certificateError }"
-          placeholder="---BEGIN CERTIFICATE---"
+          placeholder="-----BEGIN CERTIFICATE----&#10;-----END CERTIFICATE-----"
           rows="5"
           cols="30"
         />
diff --git a/src/views/DigitalCertificates/FormFields/FormFieldsEditDigitalCertificates.vue b/src/views/DigitalCertificates/FormFields/FormFieldsEditDigitalCertificates.vue
index 9f4e665d7..1f93a806f 100644
--- a/src/views/DigitalCertificates/FormFields/FormFieldsEditDigitalCertificates.vue
+++ b/src/views/DigitalCertificates/FormFields/FormFieldsEditDigitalCertificates.vue
@@ -43,9 +43,9 @@
 <template>
   <FormHorizontal
     v-if="csr"
-    title="Generate CSR and Private Key with Azion"
-    description="The Certificate Signing Request with Azion was generated. Copy the certificate and submit it to a certificate authority.
-        Paste the certificate in the respective field and click Save."
+    title=" Update CSR "
+    description="Submit the CSR to a certificate authority. Once the certificate is signed,
+        paste the PEM-encoded certificate in the respective field."
   >
     <template #inputs>
       <div class="flex flex-col sm:max-w-lg w-full gap-2">
@@ -106,10 +106,9 @@
   </FormHorizontal>
   <FormHorizontal
     v-if="!csr && certificateType === certificateTypes.EDGE_CERTIFICATE"
-    title="Upload Certificate and Private Key"
-    description="To update a digital certificate, copy and paste the certificate and private key codes in the respective fields,
-        including the begin and end tags."
-  >
+    title="Update a Certificate"
+    description="Paste the PEM-encoded certificate and private key in the respective fields to update the certificate. The current certificate and private key are hidden to protect sensitive information."
+  >T
     <template #inputs>
       <div class="flex flex-col sm:max-w-lg w-full gap-2">
         <label>Name *</label>
@@ -130,7 +129,7 @@
         <PrimeTextarea
           v-model="certificate"
           :class="{ 'p-invalid': certificateError }"
-          placeholder="For security reasons, the certificate can't be shown.&#10;To replace a digital certificate, paste the new certificate here."
+          placeholder="-----BEGIN CERTIFICATE-----&#10;-----END CERTIFICATE-----"
           rows="5"
           cols="30"
         />
@@ -145,7 +144,7 @@
         <PrimeTextarea
           v-model="privateKey"
           :class="{ 'p-invalid': privateKeyError }"
-          placeholder="For security reasons, the certificate can't be shown.&#10;To replace a digital certificate, paste the new private key here."
+          placeholder="-----BEGIN PRIVATE KEY-----&#10;-----END PRIVATE KEY-----"
           rows="5"
           cols="30"
         />
@@ -161,8 +160,8 @@
   <!-- Trusted case -->
   <FormHorizontal
     v-if="certificateType === certificateTypes.TRUSTED"
-    title="General"
-    description="description"
+    title="Update Trusted CA Certificate"
+    description="Paste the PEM-encoded Trusted CA certificate in the respective field to update the certificate. The current certificate is hidden to protect sensitive information."
   >
     <template #inputs>
       <div class="flex flex-col sm:max-w-lg w-full gap-2">
@@ -178,20 +177,12 @@
           >{{ nameError }}</small
         >
       </div>
-    </template>
-  </FormHorizontal>
-  <FormHorizontal
-    v-if="certificateType === certificateTypes.TRUSTED"
-    title="Upload Trusted CA Certificate"
-    description="A Trusted Certificate Authority (CA) certificate can be used for Mutual Transport Layer Security (mTLS) configuration. To update a Trusted CA Certificate to Azion, paste the certificate code in the respective field."
-  >
-    <template #inputs>
       <div class="flex flex-col sm:max-w-lg w-full gap-2">
         <label>Certificate </label>
         <PrimeTextarea
           v-model="certificate"
           :class="{ 'p-invalid': certificateError }"
-          placeholder="For security reasons, the certificate can't be shown.&#10;Paste a new certificate in this field to update it."
+          placeholder="-----BEGIN CERTIFICATE----&#10;-----END CERTIFICATE-----"
           rows="5"
           cols="30"
         />
diff --git a/src/views/Domains/FormFields/FormFieldsCreateDomains.vue b/src/views/Domains/FormFields/FormFieldsCreateDomains.vue
index f8c97ff35..901814086 100644
--- a/src/views/Domains/FormFields/FormFieldsCreateDomains.vue
+++ b/src/views/Domains/FormFields/FormFieldsCreateDomains.vue
@@ -218,7 +218,7 @@
         <label
           for="edge_application"
           class="text-color text-base font-medium"
-          >Edge Certificate</label
+          >Digital Certificate</label
         >
         <Dropdown
           v-model="edgeCertificate"
diff --git a/src/views/Domains/FormFields/FormFieldsEditDomains.vue b/src/views/Domains/FormFields/FormFieldsEditDomains.vue
index 2afde0d5b..61bad05c8 100644
--- a/src/views/Domains/FormFields/FormFieldsEditDomains.vue
+++ b/src/views/Domains/FormFields/FormFieldsEditDomains.vue
@@ -218,7 +218,7 @@
         <label
           for="edge_application"
           class="text-color text-base font-medium"
-          >Edge Certificate</label
+          >Digital Certificate</label
         >
         <Dropdown
           v-model="edgeCertificate"

From 5598fd11d2a0d8a2d2e111b5db630bd00e8dc537 Mon Sep 17 00:00:00 2001
From: "bruna.andrade" <bruna.andrade@azion.com>
Date: Wed, 10 Jan 2024 11:20:51 -0300
Subject: [PATCH 035/135] chore: typo

---
 .../FormFields/FormFieldsEditDigitalCertificates.vue            | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/DigitalCertificates/FormFields/FormFieldsEditDigitalCertificates.vue b/src/views/DigitalCertificates/FormFields/FormFieldsEditDigitalCertificates.vue
index 1f93a806f..a614c4d31 100644
--- a/src/views/DigitalCertificates/FormFields/FormFieldsEditDigitalCertificates.vue
+++ b/src/views/DigitalCertificates/FormFields/FormFieldsEditDigitalCertificates.vue
@@ -108,7 +108,7 @@
     v-if="!csr && certificateType === certificateTypes.EDGE_CERTIFICATE"
     title="Update a Certificate"
     description="Paste the PEM-encoded certificate and private key in the respective fields to update the certificate. The current certificate and private key are hidden to protect sensitive information."
-  >T
+    >
     <template #inputs>
       <div class="flex flex-col sm:max-w-lg w-full gap-2">
         <label>Name *</label>

From cfadf7bf650f18b3af11c93d3693fa0266cb842e Mon Sep 17 00:00:00 2001
From: paulosf0 <paulo.ferreira@azion.com>
Date: Wed, 10 Jan 2024 11:23:47 -0300
Subject: [PATCH 036/135] feat: fix after code review

---
 .../list-waf-rules-service.js                 | 41 +++++++++++--------
 .../make-waf-rules-base-url.js                |  3 +-
 .../delete-waf-rules-service.test.js          |  3 +-
 .../list-waf-rules-service.test.js            |  5 +--
 .../make-waf-rules-base-url.test.js           |  5 +--
 5 files changed, 31 insertions(+), 26 deletions(-)

diff --git a/src/services/waf-rules-services/list-waf-rules-service.js b/src/services/waf-rules-services/list-waf-rules-service.js
index ac4dbe3a5..93ddb545c 100644
--- a/src/services/waf-rules-services/list-waf-rules-service.js
+++ b/src/services/waf-rules-services/list-waf-rules-service.js
@@ -24,12 +24,8 @@ const parseStatusData = (status) => {
 
   return parsedStatus
 }
-const adapt = (httpResponse) => {
-  /**
-   * Necessary until the API gets the common pattern
-   * of returning the array of data inside results property
-   * like other andpoints.
-   */
+
+const parseThreatTypes = (waf) => {
 
   const threatTypes = {
     file_upload: 'File upload',
@@ -42,19 +38,32 @@ const adapt = (httpResponse) => {
     sql_injection: 'SQL Injection'
   }
 
+
+  const threatTypesArray = []
+  for (const key in threatTypes) {
+    const threat = threatTypes[key]
+    if (waf[key]) {
+      threatTypesArray.push(threat)
+    }
+  }
+
+  return threatTypesArray
+
+}
+
+const adapt = (httpResponse) => {
+  /**
+   * Necessary until the API gets the common pattern
+   * of returning the array of data inside results property
+   * like other andpoints.
+   */
+
+ 
   const isArray = Array.isArray(httpResponse.body.results)
 
   const parsedWafRules = isArray
     ? httpResponse.body.results.map((waf) => {
-        const threatTypesArray = []
-        for (const key in threatTypes) {
-          if (Object.hasOwnProperty.call(threatTypes, key)) {
-            const threat = threatTypes[key]
-            if (waf[key]) {
-              threatTypesArray.push(threat)
-            }
-          }
-        }
+        const threatTypes = parseThreatTypes(waf)
         const parser = {
           active: parseStatusData(waf.active),
           bypassAddresses: waf.bypass_addresses,
@@ -69,7 +78,7 @@ const adapt = (httpResponse) => {
           remoteFileInclusionSensitivity: waf.remote_file_inclusion_sensitivity,
           sqlInjectionSensitivity: waf.sql_injection_sensitivity,
           unwantedAccessSensitivity: waf.unwanted_access_sensitivity,
-          threatTypes: threatTypesArray
+          threatTypes: threatTypes
         }
         return parser
       })
diff --git a/src/services/waf-rules-services/make-waf-rules-base-url.js b/src/services/waf-rules-services/make-waf-rules-base-url.js
index 20994969a..17378a1c4 100644
--- a/src/services/waf-rules-services/make-waf-rules-base-url.js
+++ b/src/services/waf-rules-services/make-waf-rules-base-url.js
@@ -1,4 +1,3 @@
 export const makeWafRulesBaseUrl = () => {
-  const version = 'v3'
-  return `${version}/waf`
+  return 'v3/waf'
 }
diff --git a/src/tests/services/waf-rules-services/delete-waf-rules-service.test.js b/src/tests/services/waf-rules-services/delete-waf-rules-service.test.js
index 658326117..11b0658c5 100644
--- a/src/tests/services/waf-rules-services/delete-waf-rules-service.test.js
+++ b/src/tests/services/waf-rules-services/delete-waf-rules-service.test.js
@@ -18,11 +18,10 @@ describe('WafRulesServices', () => {
     })
     const wafRuleIdMock = 765678
     const { sut } = makeSut()
-    const version = 'v3'
     await sut(wafRuleIdMock)
 
     expect(requestSpy).toHaveBeenCalledWith({
-      url: `${version}/waf/rulesets/${wafRuleIdMock}`,
+      url: `v3/waf/rulesets/${wafRuleIdMock}`,
       method: 'DELETE'
     })
   })
diff --git a/src/tests/services/waf-rules-services/list-waf-rules-service.test.js b/src/tests/services/waf-rules-services/list-waf-rules-service.test.js
index 8d1c4ea46..fa459846d 100644
--- a/src/tests/services/waf-rules-services/list-waf-rules-service.test.js
+++ b/src/tests/services/waf-rules-services/list-waf-rules-service.test.js
@@ -36,7 +36,7 @@ const makeSut = () => {
   }
 }
 
-describe('WafRulesService', () => {
+describe('WafRulesServices', () => {
   beforeEach(() => {
     vi.useFakeTimers()
   })
@@ -51,11 +51,10 @@ describe('WafRulesService', () => {
     })
 
     const { sut } = makeSut()
-    const version = 'v3'
     await sut()
 
     expect(requestSpy).toHaveBeenCalledWith({
-      url: `${version}/waf/?page=1&page_size=100`,
+      url: 'v3/waf/?page=1&page_size=100',
       method: 'GET'
     })
   })
diff --git a/src/tests/services/waf-rules-services/make-waf-rules-base-url.test.js b/src/tests/services/waf-rules-services/make-waf-rules-base-url.test.js
index b0138b22b..d97c0481f 100644
--- a/src/tests/services/waf-rules-services/make-waf-rules-base-url.test.js
+++ b/src/tests/services/waf-rules-services/make-waf-rules-base-url.test.js
@@ -9,11 +9,10 @@ const makeSut = () => {
   }
 }
 
-describe('WafRulesService', () => {
+describe('WafRulesServices', () => {
   it('should return the API base url to waf rules service', () => {
     const { sut } = makeSut()
-    const version = 'v3'
-    const correctApiUrl = `${version}/waf`
+    const correctApiUrl = `v3/waf`
 
     const baseUrl = sut()
 

From 6b33c9f8cd1ca7db809dac3476d9228db144a294 Mon Sep 17 00:00:00 2001
From: Gabriel Lisboa <95422158+gablisb0a@users.noreply.github.com>
Date: Wed, 10 Jan 2024 11:24:55 -0300
Subject: [PATCH 037/135] style: include trucated text

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

diff --git a/src/templates/switch-account-block/index.vue b/src/templates/switch-account-block/index.vue
index 0d7bad5fc..9794969da 100644
--- a/src/templates/switch-account-block/index.vue
+++ b/src/templates/switch-account-block/index.vue
@@ -114,7 +114,7 @@
   <div>
     <PrimeButton
       v-if="visibleButton"
-      class="font-semibold h-8 w-auto border-header hidden md:flex gap-2 items-center bg-header hover:bg-header-button-hover"
+      class="font-semibold h-8 w-auto truncate max-w-[180px] border-header hidden md:flex gap-2 items-center bg-header hover:bg-header-button-hover"
       size="small"
       :loading="isLoadingAccount"
       :pt="{
@@ -128,7 +128,7 @@
         class="text-white"
         :class="account.accountTypeIcon"
       />
-      <span class="text-white"> {{ account.name }}</span>
+      <span class="truncate text-white"> {{ account.name }}</span>
     </PrimeButton>
 
     <PrimeDialog

From a422532e1f26b477cb8e05023f07f74bf41a1a25 Mon Sep 17 00:00:00 2001
From: "bruna.andrade" <bruna.andrade@azion.com>
Date: Wed, 10 Jan 2024 11:32:58 -0300
Subject: [PATCH 038/135] chore: format

---
 .../FormFieldsCreateDigitalCertificates.vue   | 26 +++++++++++--------
 1 file changed, 15 insertions(+), 11 deletions(-)

diff --git a/src/views/DigitalCertificates/FormFields/FormFieldsCreateDigitalCertificates.vue b/src/views/DigitalCertificates/FormFields/FormFieldsCreateDigitalCertificates.vue
index 943b4b4d4..78d004ffb 100644
--- a/src/views/DigitalCertificates/FormFields/FormFieldsCreateDigitalCertificates.vue
+++ b/src/views/DigitalCertificates/FormFields/FormFieldsCreateDigitalCertificates.vue
@@ -99,7 +99,6 @@
   >
     <template #inputs>
       <div class="flex flex-col w-full gap-3">
-
         <Card
           :pt="{
             body: { class: 'p-4' },
@@ -110,15 +109,15 @@
           }"
         >
           <template #title>
-            <span class="text-base"> Request a certificate </span>
+            <span class="text-base"> Import a certificate</span>
             <RadioButton
               v-model="certificateType"
-              inputId="certificateType1"
+              inputId="certificateType2"
               name="certificateType"
-              :value="certificateTypes.EDGE_CERTIFICATE_CSR"
+              :value="certificateTypes.EDGE_CERTIFICATE_UPLOAD"
             />
           </template>
-          <template #subtitle> Generate a Certificate Singing Request (CSR) to obtain a digital certificate. </template>
+          <template #subtitle> Upload a PEM certificate and private key. </template>
         </Card>
 
         <Card
@@ -131,15 +130,17 @@
           }"
         >
           <template #title>
-            <span class="text-base"> Import a certificate</span>
+            <span class="text-base"> Request a certificate </span>
             <RadioButton
               v-model="certificateType"
-              inputId="certificateType2"
+              inputId="certificateType1"
               name="certificateType"
-              :value="certificateTypes.EDGE_CERTIFICATE_UPLOAD"
+              :value="certificateTypes.EDGE_CERTIFICATE_CSR"
             />
           </template>
-          <template #subtitle> Upload a PEM certificate and private key. </template>
+          <template #subtitle>
+            Generate a Certificate Singing Request (CSR) to obtain a digital certificate.
+          </template>
         </Card>
 
         <Card
@@ -160,7 +161,9 @@
               :value="certificateTypes.TRUSTED"
             />
           </template>
-          <template #subtitle> Upload a PEM certificate for mutual Transport Layer Security (mTLS). </template>
+          <template #subtitle>
+            Upload a PEM certificate for mutual Transport Layer Security (mTLS).
+          </template>
         </Card>
       </div>
     </template>
@@ -340,7 +343,8 @@
           cols="30"
         />
         <small class="text-color-secondary text-xs font-normal leading-tight"
-          >Use line breaks to separate each SAN. Duplicate entries will be automatically removed.</small
+          >Use line breaks to separate each SAN. Duplicate entries will be automatically
+          removed.</small
         >
         <small
           v-if="subjectAlternativeNamesError"

From 732f83943405c7ffa3029c46e6ebf6a1c89e8ece Mon Sep 17 00:00:00 2001
From: William <william.tome@azion.com>
Date: Wed, 10 Jan 2024 13:23:46 -0300
Subject: [PATCH 039/135] [ENG-28718] feat: empty list improvements (#545)

* feat: add emptyListMessage prop and refactor components to use composition API

* feat: add emptyListMessage value to components that use table
---
 src/templates/list-table-block/index.vue      | 388 ++++++++--------
 src/templates/list-table-block/no-header.vue  | 419 +++++++++---------
 .../with-lazy-and-dropdown-filter.vue         |  22 +-
 src/templates/switch-account-block/index.vue  |  19 +-
 src/views/Credentials/ListView.vue            |   7 +-
 src/views/DataStreaming/ListView.vue          |   7 +-
 src/views/DigitalCertificates/ListView.vue    |   7 +-
 src/views/Domains/ListView.vue                |   9 +-
 src/views/EdgeApplications/ListView.vue       |   9 +-
 .../ListView.vue                              |   3 +-
 .../EdgeApplicationsDeviceGroups/ListView.vue |   7 +-
 .../EdgeApplicationsFunctions/ListView.vue    |   9 +-
 .../EdgeApplicationsOrigins/ListView.vue      |   7 +-
 .../EdgeApplicationsRulesEngine/ListView.vue  |   9 +-
 src/views/EdgeFirewall/ListView.vue           |   7 +-
 src/views/EdgeFunctions/ListView.vue          |   9 +-
 src/views/EdgeNode/ListView.vue               |   7 +-
 src/views/EdgeNode/ListViewTabServices.vue    |   9 +-
 src/views/EdgeServices/ListView.vue           |   7 +-
 .../EdgeServices/ListViewTabResources.vue     |   9 +-
 src/views/IntelligentDNS/EditView.vue         |  29 +-
 src/views/IntelligentDNS/ListView.vue         |   9 +-
 src/views/NetworkLists/ListView.vue           |   5 +-
 src/views/PersonalTokens/ListView.vue         |  11 +-
 src/views/RealTimePurge/ListView.vue          |   7 +-
 src/views/TeamsPermissions/ListView.vue       |   9 +-
 src/views/Users/ListView.vue                  |   9 +-
 src/views/Variables/ListView.vue              |   7 +-
 28 files changed, 527 insertions(+), 529 deletions(-)

diff --git a/src/templates/list-table-block/index.vue b/src/templates/list-table-block/index.vue
index 87102f9dc..81e49a6d7 100644
--- a/src/templates/list-table-block/index.vue
+++ b/src/templates/list-table-block/index.vue
@@ -13,7 +13,7 @@
       v-model:filters="filters"
       :paginator="showPagination"
       :rowsPerPageOptions="[10, 20, 50, 100]"
-      :rows="minimumOfItemsPerPage"
+      :rows="MINIMUN_OF_ITEMS_PER_PAGE"
       :globalFilterFields="filterBy"
       :loading="isLoading"
     >
@@ -23,7 +23,7 @@
             <i class="pi pi-search" />
             <InputText
               class="w-full"
-              v-model.trim="this.filters.global.value"
+              v-model.trim="filters.global.value"
               placeholder="Search"
             />
           </span>
@@ -56,7 +56,7 @@
             <div v-html="rowData[col.field]" />
           </template>
           <template v-else>
-            <component :is="col.component(rowData[col.field])"></component>
+            <component :is="col.component(rowData[col.field])" />
           </template>
         </template>
       </Column>
@@ -79,7 +79,7 @@
               <Listbox
                 v-model="selectedColumns"
                 multiple
-                :options="[{ label: 'Hidden Columns', items: this.columns }]"
+                :options="[{ label: 'Hidden Columns', items: columns }]"
                 class="hidden-columns-panel"
                 optionLabel="header"
                 optionGroupLabel="label"
@@ -98,7 +98,7 @@
             v-if="showActions"
           >
             <PrimeMenu
-              :ref="`menu-${rowData.id}`"
+              :ref="(el) => (menuRef[rowData.id] = el)"
               id="overlay_menu"
               v-bind:model="actionOptions(rowData)"
               :popup="true"
@@ -115,15 +115,8 @@
         </template>
       </Column>
       <template #empty>
-        <div class="my-4 flex flex-col gap-3 justify-center items-center">
-          <p class="text-xl font-normal text-secondary">No registers found.</p>
-          <PrimeButton
-            text
-            icon="pi pi-plus"
-            label="Add"
-            v-if="addButtonLabel"
-            @click="navigateToAddPage"
-          />
+        <div class="my-4 flex flex-col gap-3 justify-center items-start">
+          <p class="text-md font-normal text-secondary">{{ emptyListMessage }}</p>
         </div>
       </template>
     </DataTable>
@@ -141,7 +134,7 @@
             <i class="pi pi-search" />
             <InputText
               class="w-full"
-              v-model="this.filters.global.value"
+              v-model="filters.global.value"
               placeholder="Search"
             />
           </span>
@@ -162,7 +155,7 @@
         :header="col.header"
       >
         <template #body>
-          <Skeleton></Skeleton>
+          <Skeleton />
         </template>
       </Column>
     </DataTable>
@@ -173,212 +166,199 @@
   />
 </template>
 
-<script>
-  import DataTable from 'primevue/datatable'
+<script setup>
+  import { FilterMatchMode } from 'primevue/api'
+  import PrimeButton from 'primevue/button'
   import Column from 'primevue/column'
-  import Listbox from 'primevue/listbox'
+  import DataTable from 'primevue/datatable'
   import InputText from 'primevue/inputtext'
+  import Listbox from 'primevue/listbox'
   import PrimeMenu from 'primevue/menu'
-  import Skeleton from 'primevue/skeleton'
   import OverlayPanel from 'primevue/overlaypanel'
-  import PrimeButton from 'primevue/button'
-  import { FilterMatchMode } from 'primevue/api'
+  import Skeleton from 'primevue/skeleton'
+  import { useToast } from 'primevue/usetoast'
+  import { computed, getCurrentInstance, onMounted, ref, watch } from 'vue'
+  import { useRouter } from 'vue-router'
   import DeleteDialog from './dialog/delete-dialog'
 
-  export default {
-    name: 'list-table-block',
-    emits: ['on-load-data'],
-    components: {
-      DataTable,
-      Column,
-      InputText,
-      PrimeButton,
-      PrimeMenu,
-      Skeleton,
-      Listbox,
-      OverlayPanel,
-      DeleteDialog
+  defineOptions({ name: 'list-table-block' })
+  const emit = defineEmits(['on-load-data'])
+
+  const props = defineProps({
+    columns: {
+      type: Array,
+      default: () => [{ field: 'name', header: 'Name' }]
     },
-    data: () => ({
-      selectedId: null,
-      filters: {
-        global: { value: '', matchMode: FilterMatchMode.CONTAINS }
-      },
-      isLoading: false,
-      showColumnSelector: false,
-      data: [],
-      selectedColumns: [],
-      minimumOfItemsPerPage: 10,
-      informationForDeletion: {},
-      showActions: true
-    }),
-    props: {
-      columns: {
-        type: Array,
-        required: true,
-        default: () => [
-          {
-            field: 'name',
-            header: 'Name'
-          }
-        ]
-      },
-      isGraphql: {
-        required: false,
-        type: Boolean,
-        default: false
-      },
-      pageTitleDelete: {
-        type: String,
-        required: true
-      },
-      createPagePath: {
-        type: String,
-        default: () => '/'
-      },
-      editPagePath: {
-        type: String,
-        default: () => '/'
-      },
-      editInDrawer: {
-        type: Function
-      },
-      addButtonLabel: {
-        type: String,
-        default: () => ''
-      },
-      listService: {
-        required: true,
-        type: Function
-      },
-      deleteService: {
-        type: Function
-      },
-      enableEditClick: {
-        type: Boolean,
-        default: true
-      },
-      reorderableRows: {
-        required: false,
-        type: Boolean,
-        default: false
-      },
-      rowActions: {
-        type: Array,
-        default: () => []
-      }
+    isGraphql: {
+      type: Boolean
     },
-    async created() {
-      await this.loadData({ page: 1 })
-      this.selectedColumns = this.columns
+    pageTitleDelete: {
+      type: String,
+      required: true
     },
-    computed: {
-      filterBy() {
-        return this.columns.map((item) => item.field)
-      },
-      showPagination() {
-        return this.data.length > this.minimumOfItemsPerPage
-      }
+    createPagePath: {
+      type: String,
+      default: () => '/'
+    },
+    editPagePath: {
+      type: String,
+      default: () => '/'
+    },
+    editInDrawer: {
+      type: Function
+    },
+    addButtonLabel: {
+      type: String,
+      default: () => ''
+    },
+    listService: {
+      required: true,
+      type: Function
     },
-    methods: {
-      toggleColumnSelector(event) {
-        this.$refs.columnSelectorPanel.toggle(event)
-      },
-      toggleShowColumnSelector() {
-        this.showColumnSelector = !this.showColumnSelector
-      },
-      onRowReorder(event) {
-        this.data = event.value
-      },
-      addActionOption(actionOptions, option) {
+    deleteService: {
+      type: Function
+    },
+    enableEditClick: {
+      type: Boolean,
+      default: true
+    },
+    reorderableRows: {
+      type: Boolean
+    },
+    rowActions: {
+      type: Array,
+      default: () => []
+    },
+    emptyListMessage: {
+      type: String,
+      default: () => 'No registers found.'
+    }
+  })
+
+  const MINIMUN_OF_ITEMS_PER_PAGE = 10
+
+  const selectedId = ref(null)
+  const filters = ref({
+    global: { value: '', matchMode: FilterMatchMode.CONTAINS }
+  })
+  const isLoading = ref(false)
+  const data = ref([])
+  const selectedColumns = ref([])
+  const informationForDeletion = ref({})
+  const showActions = ref(true)
+
+  onMounted(() => {
+    loadData({ page: 1 })
+    selectedColumns.value = props.columns
+  })
+
+  const filterBy = computed(() => {
+    return props.columns.map((item) => item.field)
+  })
+
+  const showPagination = computed(() => {
+    return data.value.length > MINIMUN_OF_ITEMS_PER_PAGE
+  })
+
+  const columnSelectorPanel = ref(null)
+  const toggleColumnSelector = (event) => {
+    columnSelectorPanel.value.toggle(event)
+  }
+
+  const onRowReorder = (event) => {
+    data.value = event.value
+  }
+
+  const actionOptions = (rowData) => {
+    const actionOptions = []
+
+    if (props.rowActions && props.rowActions.length > 0) {
+      props.rowActions.forEach((action) => {
+        if (action.visibleAction?.(rowData)) return
+
         actionOptions.push({
-          ...option
+          ...action,
+          command: () => action.command(rowData)
         })
-      },
-      actionOptions(rowData) {
-        const actionOptions = []
-
-        if (this.rowActions && this.rowActions.length > 0) {
-          this.rowActions.forEach((action) => {
-            if (action.visibleAction && action.visibleAction(rowData)) return
+      })
+    }
 
-            actionOptions.push({
-              ...action,
-              command: () => action.command(rowData)
-            })
-          })
-        }
+    if (props.deleteService) {
+      actionOptions.push({
+        label: 'Delete',
+        icon: 'pi pi-fw pi-trash',
+        severity: 'error',
+        command: () => openDeleteDialog()
+      })
+    }
 
-        if (this.deleteService) {
-          actionOptions.push({
-            label: 'Delete',
-            icon: 'pi pi-fw pi-trash',
-            severity: 'error',
-            command: () => this.openDeleteDialog()
-          })
-        }
+    showActions.value = actionOptions.length > 0
 
-        this.showActions = actionOptions.length > 0
+    return actionOptions
+  }
+  const toast = useToast()
 
-        return actionOptions
-      },
-      async loadData({ page }) {
-        try {
-          this.isLoading = true
-          let data = null
-          if (this.isGraphql) {
-            data = await this.listService()
-          }
-          if (!this.isGraphql) {
-            data = await this.listService({ page })
-          }
-          this.data = data
-        } catch (error) {
-          this.data = []
-          this.$toast.add({
-            closable: true,
-            severity: 'error',
-            summary: error
-          })
-        } finally {
-          this.isLoading = false
-        }
-      },
-      navigateToAddPage() {
-        this.$router.push(this.createPagePath)
-      },
-      toggleActionsMenu(event, selectedId) {
-        this.selectedId = selectedId
-        this.$refs[`menu-${selectedId}`].toggle(event)
-      },
-      editItemSelected({ data: item }) {
-        if (this.editInDrawer) {
-          this.editInDrawer(item)
-          return
-        }
-        if (this.enableEditClick) {
-          this.$router.push({ path: `${this.editPagePath}/${item.id}` })
-        }
-      },
-      openDeleteDialog() {
-        this.informationForDeletion = {
-          title: this.pageTitleDelete,
-          selectedID: this.selectedId,
-          deleteService: this.deleteService,
-          deleteDialogVisible: true,
-          rerender: Math.random()
-        }
-      },
-      updatedTable() {
-        this.data = this.data.filter((item) => item.id !== this.selectedId)
-        this.$forceUpdate()
+  const loadData = async ({ page }) => {
+    try {
+      isLoading.value = true
+      let response = null
+      if (props.isGraphql) {
+        response = await props.listService()
       }
-    },
-    watch: {
-      data(currentState) {
-        const hasData = currentState.length > 0
-        this.$emit('on-load-data', hasData)
+      if (!props.isGraphql) {
+        response = await props.listService({ page })
       }
+      data.value = response
+    } catch (error) {
+      data.value = []
+      toast.add({
+        closable: true,
+        severity: 'error',
+        summary: error
+      })
+    } finally {
+      isLoading.value = false
+    }
+  }
+
+  const router = useRouter()
+
+  const navigateToAddPage = () => {
+    router.push(props.createPagePath)
+  }
+
+  const menuRef = ref({})
+  const toggleActionsMenu = (event, selectedID) => {
+    selectedId.value = selectedID
+    menuRef.value[selectedID].toggle(event)
+  }
+  const editItemSelected = ({ data: item }) => {
+    if (props.editInDrawer) {
+      props.editInDrawer(item)
+      return
+    }
+    if (props.enableEditClick) {
+      router.push({ path: `${props.editPagePath}/${item.id}` })
+    }
+  }
+  const openDeleteDialog = () => {
+    informationForDeletion.value = {
+      title: props.pageTitleDelete,
+      selectedID: selectedId.value,
+      deleteService: props.deleteService,
+      deleteDialogVisible: true,
+      rerender: Math.random()
     }
   }
+
+  const instance = getCurrentInstance()
+  const updatedTable = () => {
+    data.value = data.value.filter((item) => item.id !== selectedId.value)
+    instance.proxy?.$forceUpdate()
+  }
+
+  watch(data, (currentState) => {
+    const hasData = currentState.length > 0
+    emit('on-load-data', hasData)
+  })
 </script>
diff --git a/src/templates/list-table-block/no-header.vue b/src/templates/list-table-block/no-header.vue
index 004a5fb9e..2f5835adf 100644
--- a/src/templates/list-table-block/no-header.vue
+++ b/src/templates/list-table-block/no-header.vue
@@ -7,10 +7,10 @@
         removableSort
         :value="data"
         dataKey="id"
-        v-model:filters="this.filters"
+        v-model:filters="filters"
         :paginator="showPagination"
         :rowsPerPageOptions="[10, 20, 50, 100]"
-        :rows="minimumOfItemsPerPage"
+        :rows="MINIMUN_OF_ITEMS_PER_PAGE"
         :globalFilterFields="filterBy"
         :loading="isLoading"
         selectionMode="single"
@@ -24,7 +24,7 @@
               <i class="pi pi-search" />
               <InputText
                 class="w-full"
-                v-model.trim="this.filters.global.value"
+                v-model.trim="filters.global.value"
                 placeholder="Search"
               />
             </span>
@@ -56,13 +56,13 @@
               <div v-html="rowData[col.field]" />
             </template>
             <template v-else>
-              <component :is="col.component(rowData[col.field])"></component>
+              <component :is="col.component(rowData[col.field])" />
             </template>
           </template>
         </Column>
         <Column
           :frozen="true"
-          :alignFrozen="'right'"
+          alignFrozen="right"
         >
           <template #header>
             <div class="flex justify-end w-full">
@@ -78,7 +78,7 @@
                 <Listbox
                   v-model="selectedColumns"
                   multiple
-                  :options="[{ label: 'Hidden Columns', items: this.columns }]"
+                  :options="[{ label: 'Hidden Columns', items: columns }]"
                   class="hidden-columns-panel"
                   optionLabel="header"
                   optionGroupLabel="label"
@@ -94,7 +94,7 @@
           <template #body="{ data: rowData }">
             <div class="flex justify-end">
               <PrimeMenu
-                :ref="'menu'"
+                ref="menu"
                 id="overlay_menu"
                 v-bind:model="actionOptions(rowData?.status)"
                 :popup="true"
@@ -111,18 +111,9 @@
           </template>
         </Column>
         <template #empty>
-          <slot name="empty">
-            <div class="my-4 flex flex-col gap-3 justify-center items-center">
-              <p class="text-xl font-normal text-secondary">No registers found.</p>
-              <PrimeButton
-                v-if="!authorizeNode"
-                text
-                icon="pi pi-plus"
-                label="Add"
-                @click="navigateToAddPage"
-              />
-            </div>
-          </slot>
+          <div class="my-4 flex flex-col gap-3 justify-center items-start">
+            <p class="text-md font-normal text-secondary">{{ emptyListMessage }}</p>
+          </div>
         </template>
       </DataTable>
 
@@ -139,7 +130,7 @@
               <i class="pi pi-search" />
               <InputText
                 class="w-full"
-                v-model="this.filters.global.value"
+                v-model="filters.global.value"
                 placeholder="Search"
               />
             </span>
@@ -153,7 +144,7 @@
           :header="col.header"
         >
           <template #body>
-            <Skeleton></Skeleton>
+            <Skeleton />
           </template>
         </Column>
       </DataTable>
@@ -165,212 +156,210 @@
   </div>
 </template>
 
-<script>
-  import DataTable from 'primevue/datatable'
+<script setup>
+  import { getArrayChangedIndexes } from '@/helpers/get-array-changed-indexes'
+  import { FilterMatchMode } from 'primevue/api'
+  import PrimeButton from 'primevue/button'
   import Column from 'primevue/column'
+  import DataTable from 'primevue/datatable'
   import InputText from 'primevue/inputtext'
+  import Listbox from 'primevue/listbox'
   import PrimeMenu from 'primevue/menu'
+  import OverlayPanel from 'primevue/overlaypanel'
   import Skeleton from 'primevue/skeleton'
-  import PrimeButton from 'primevue/button'
-  import { FilterMatchMode } from 'primevue/api'
+  import { useToast } from 'primevue/usetoast'
+  import { computed, getCurrentInstance, onMounted, ref, watch } from 'vue'
+  import { useRouter } from 'vue-router'
   import DeleteDialog from './dialog/delete-dialog'
-  import { getArrayChangedIndexes } from '@/helpers/get-array-changed-indexes'
-  import OverlayPanel from 'primevue/overlaypanel'
-  import Listbox from 'primevue/listbox'
 
-  export default {
-    name: 'list-table-block',
-    emits: ['on-load-data'],
-    components: {
-      DataTable,
-      Column,
-      InputText,
-      PrimeButton,
-      PrimeMenu,
-      Skeleton,
-      DeleteDialog,
-      OverlayPanel,
-      Listbox
+  defineOptions({ name: 'list-table-block' })
+
+  const emit = defineEmits(['on-load-data', 'authorize'])
+  const props = defineProps({
+    columns: {
+      type: Array,
+      default: () => [{ field: 'name', header: 'Name' }]
     },
-    data: () => ({
-      showActionsMenu: false,
-      selectedId: null,
-      filters: {
-        global: { value: '', matchMode: FilterMatchMode.CONTAINS }
-      },
-      isLoading: false,
-      data: [],
-      minimumOfItemsPerPage: 10,
-      informationForDeletion: {},
-      selectedItemData: null,
-      selectedColumns: []
-    }),
-    props: {
-      columns: {
-        type: Array,
-        required: true,
-        default: () => [
-          {
-            field: 'name',
-            header: 'Name'
-          }
-        ]
-      },
-      pageTitleDelete: {
-        type: String,
-        required: true
-      },
-      createPagePath: {
-        type: String,
-        default: () => '/'
-      },
-      editInDrawer: {
-        type: Function
-      },
-      editPagePath: {
-        type: String,
-        default: () => '/'
-      },
-      addButtonLabel: {
-        type: String,
-        default: () => ''
-      },
-      authorizeNode: {
-        type: Boolean,
-        required: false,
-        default: false
-      },
-      listService: {
-        required: true,
-        type: Function
-      },
-      deleteService: {
-        required: true,
-        type: Function
-      },
-      onReorderService: {
-        type: Function
-      },
-      reorderableRows: {
-        required: false,
-        type: Boolean,
-        default: false
-      },
-      pt: {
-        type: Object,
-        required: false
-      }
+    pageTitleDelete: {
+      type: String,
+      required: true
     },
-    async created() {
-      await this.loadData({ page: 1 })
-      this.selectedColumns = this.columns
+    createPagePath: {
+      type: String,
+      default: () => '/'
     },
-    computed: {
-      filterBy() {
-        return this.columns.map((item) => item.field)
-      },
-      showPagination() {
-        return this.data.length > this.minimumOfItemsPerPage
-      }
+    editInDrawer: {
+      type: Function
     },
-    methods: {
-      actionOptions(showAuthorize) {
-        const actionOptions = [
-          {
-            label: 'Delete',
-            icon: 'pi pi-fw pi-trash',
-            command: () => this.openDeleteDialog()
-          }
-        ]
-        if (this.authorizeNode && showAuthorize !== 'Authorized') {
-          actionOptions.push({
-            label: 'Authorize',
-            icon: 'pi pi-lock-open',
-            command: () => this.authorizeEdgeNode()
-          })
-        }
-        return actionOptions
-      },
-      async loadData({ page }) {
-        try {
-          this.isLoading = true
-          const data = await this.listService({ page })
-          this.data = data
-        } catch (error) {
-          this.data = []
-          this.$toast.add({
-            closable: true,
-            severity: 'error',
-            summary: error
-          })
-        } finally {
-          this.isLoading = false
-        }
-      },
-      async reload() {
-        await this.loadData({ page: 1 })
-      },
-      navigateToAddPage() {
-        this.$router.push(this.createPagePath)
-      },
-      toggleActionsMenu(event, selectedItemData) {
-        this.selectedItemData = selectedItemData
-        this.selectedId = selectedItemData.id
-        this.$refs.menu.toggle(event)
-      },
-      editItemSelected({ data: item }) {
-        if (this.editInDrawer) {
-          this.editInDrawer(item)
-          return
-        }
-        this.$router.push({ path: `${this.editPagePath}/${item.id}` })
-      },
-      authorizeEdgeNode() {
-        this.$emit('authorize', this.selectedId)
-      },
-      openDeleteDialog() {
-        this.informationForDeletion = {
-          title: this.pageTitleDelete,
-          selectedID: this.selectedId,
-          selectedItemData: this.selectedItemData,
-          deleteService: this.deleteService,
-          deleteDialogVisible: true,
-          rerender: Math.random()
-        }
-      },
-      updatedTable() {
-        this.data = this.data.filter((item) => item.id !== this.selectedId)
-        this.$forceUpdate()
-      },
-      async onRowReorder(event) {
-        try {
-          const tableData = getArrayChangedIndexes(this.data, event.value)
-          await this.onReorderService(tableData)
-          this.data = event.value
-
-          this.$toast.add({
-            closable: true,
-            severity: 'success',
-            summary: 'Rules Engine order saved!'
-          })
-        } catch (error) {
-          this.$toast.add({
-            closable: true,
-            severity: 'error',
-            summary: error
-          })
-        }
-      },
-      toggleColumnSelector(event) {
-        this.$refs.columnSelectorPanel.toggle(event)
-      }
+    editPagePath: {
+      type: String,
+      default: () => '/'
+    },
+    addButtonLabel: {
+      type: String,
+      default: () => ''
     },
-    watch: {
-      data(currentState) {
-        const hasData = currentState.length > 0
-        this.$emit('on-load-data', hasData)
+    authorizeNode: {
+      type: Boolean
+    },
+    listService: {
+      required: true,
+      type: Function
+    },
+    deleteService: {
+      required: true,
+      type: Function
+    },
+    onReorderService: {
+      type: Function
+    },
+    reorderableRows: {
+      type: Boolean
+    },
+    pt: {
+      type: Object,
+      required: false
+    },
+    emptyListMessage: {
+      type: String,
+      default: () => 'No registers found.'
+    }
+  })
+
+  const MINIMUN_OF_ITEMS_PER_PAGE = 10
+
+  const selectedId = ref(null)
+  const filters = ref({ global: { value: '', matchMode: FilterMatchMode.CONTAINS } })
+  const isLoading = ref(false)
+  const data = ref([])
+  const informationForDeletion = ref({})
+  const selectedItemData = ref(null)
+  const selectedColumns = ref([])
+
+  onMounted(() => {
+    loadData({ page: 1 })
+    selectedColumns.value = props.columns
+  })
+
+  const filterBy = computed(() => {
+    return props.columns.map((item) => item.field)
+  })
+
+  const showPagination = computed(() => {
+    return data.value.length > MINIMUN_OF_ITEMS_PER_PAGE
+  })
+
+  const actionOptions = (showAuthorize) => {
+    const actionOptions = [
+      {
+        label: 'Delete',
+        icon: 'pi pi-fw pi-trash',
+        command: () => openDeleteDialog()
       }
+    ]
+    if (props.authorizeNode && showAuthorize !== 'Authorized') {
+      actionOptions.push({
+        label: 'Authorize',
+        icon: 'pi pi-lock-open',
+        command: () => authorizeEdgeNode()
+      })
+    }
+    return actionOptions
+  }
+
+  const toast = useToast()
+
+  const loadData = async ({ page }) => {
+    try {
+      isLoading.value = true
+      const response = await props.listService({ page })
+      data.value = response
+    } catch (error) {
+      data.value = []
+      toast.add({
+        closable: true,
+        severity: 'error',
+        summary: error
+      })
+    } finally {
+      isLoading.value = false
     }
   }
+
+  const reload = async () => {
+    await loadData({ page: 1 })
+  }
+  defineExpose({ reload })
+
+  const router = useRouter()
+
+  const navigateToAddPage = () => {
+    router.push(props.createPagePath)
+  }
+
+  const menu = ref(null)
+  const toggleActionsMenu = (event, selectedItem) => {
+    selectedItemData.value = selectedItem
+    selectedId.value = selectedItem.id
+    menu.value.toggle(event)
+  }
+
+  const editItemSelected = ({ data: item }) => {
+    if (props.editInDrawer) {
+      props.editInDrawer(item)
+      return
+    }
+    router.push({ path: `${props.editPagePath}/${item.id}` })
+  }
+
+  const authorizeEdgeNode = () => {
+    emit('authorize', selectedId.value)
+  }
+
+  const openDeleteDialog = () => {
+    informationForDeletion.value = {
+      title: props.pageTitleDelete,
+      selectedID: selectedId.value,
+      selectedItemData: selectedItemData.value,
+      deleteService: props.deleteService,
+      deleteDialogVisible: true,
+      rerender: Math.random()
+    }
+  }
+
+  const instance = getCurrentInstance()
+  const updatedTable = () => {
+    data.value = data.value.filter((item) => item.id !== selectedId.value)
+    instance.proxy?.$forceUpdate()
+  }
+
+  const onRowReorder = async (event) => {
+    try {
+      const tableData = getArrayChangedIndexes(data, event.value)
+      await props.onReorderService(tableData)
+      data.value = event.value
+
+      toast.add({
+        closable: true,
+        severity: 'success',
+        summary: 'Rules Engine order saved!'
+      })
+    } catch (error) {
+      toast.add({
+        closable: true,
+        severity: 'error',
+        summary: error
+      })
+    }
+  }
+
+  const columnSelectorPanel = ref(null)
+  const toggleColumnSelector = (event) => {
+    columnSelectorPanel.value.toggle(event)
+  }
+
+  watch(data, (currentState) => {
+    const hasData = currentState.length > 0
+    emit('on-load-data', hasData)
+  })
 </script>
-@/helpers/get-array-changed-indexes
diff --git a/src/templates/list-table-block/with-lazy-and-dropdown-filter.vue b/src/templates/list-table-block/with-lazy-and-dropdown-filter.vue
index 92abe6826..43eb6ae64 100644
--- a/src/templates/list-table-block/with-lazy-and-dropdown-filter.vue
+++ b/src/templates/list-table-block/with-lazy-and-dropdown-filter.vue
@@ -72,7 +72,7 @@
               <div v-html="rowData[col.field]" />
             </template>
             <template v-else>
-              <component :is="col.component({ ...rowData[col.field], value: rowData })"></component>
+              <component :is="col.component({ ...rowData[col.field], value: rowData })" />
             </template>
           </template>
         </Column>
@@ -108,8 +108,8 @@
           </template>
         </Column>
         <template #empty>
-          <div class="my-4 flex flex-col gap-3 justify-center items-center">
-            <p class="text-xl font-normal text-secondary">No registers found.</p>
+          <div class="my-4 flex flex-col gap-3 justify-center items-start">
+            <p class="text-md font-normal text-secondary">{{ emptyListMessage }}</p>
           </div>
         </template>
       </DataTable>
@@ -138,7 +138,7 @@
           :header="col.header"
         >
           <template #body>
-            <Skeleton></Skeleton>
+            <Skeleton />
           </template>
         </Column>
       </DataTable>
@@ -147,14 +147,14 @@
 </template>
 
 <script setup>
-  import { ref, onMounted } from 'vue'
-  import DataTable from 'primevue/datatable'
+  import PrimeButton from 'primevue/button'
   import Column from 'primevue/column'
+  import DataTable from 'primevue/datatable'
+  import InlineMessage from 'primevue/inlinemessage'
   import Listbox from 'primevue/listbox'
-  import Skeleton from 'primevue/skeleton'
   import OverlayPanel from 'primevue/overlaypanel'
-  import PrimeButton from 'primevue/button'
-  import InlineMessage from 'primevue/inlinemessage'
+  import Skeleton from 'primevue/skeleton'
+  import { onMounted, ref } from 'vue'
 
   const emit = defineEmits(['onSelectedRow'])
   const props = defineProps({
@@ -199,6 +199,10 @@
       required: false,
       type: Object,
       default: () => ({})
+    },
+    emptyListMessage: {
+      type: String,
+      default: () => 'No registers found.'
     }
   })
 
diff --git a/src/templates/switch-account-block/index.vue b/src/templates/switch-account-block/index.vue
index 9794969da..6b471ff7f 100644
--- a/src/templates/switch-account-block/index.vue
+++ b/src/templates/switch-account-block/index.vue
@@ -1,15 +1,15 @@
 <script setup>
-  import { ref, watch, computed } from 'vue'
-  import PrimeDialog from 'primevue/dialog'
-  import PrimeTag from 'primevue/tag'
+  import { columnBuilder } from '@/templates/list-table-block/columns/column-builder'
+  import ListTableBlock from '@/templates/list-table-block/with-lazy-and-dropdown-filter.vue'
   import PrimeButton from 'primevue/button'
-  import Menu from 'primevue/menu'
-  import InputText from 'primevue/inputtext'
-  import Dropdown from 'primevue/dropdown'
-  import Divider from 'primevue/divider'
   import PrimeCard from 'primevue/card'
-  import ListTableBlock from '@/templates/list-table-block/with-lazy-and-dropdown-filter.vue'
-  import { columnBuilder } from '@/templates/list-table-block/columns/column-builder'
+  import PrimeDialog from 'primevue/dialog'
+  import Divider from 'primevue/divider'
+  import Dropdown from 'primevue/dropdown'
+  import InputText from 'primevue/inputtext'
+  import Menu from 'primevue/menu'
+  import PrimeTag from 'primevue/tag'
+  import { computed, ref, watch } from 'vue'
 
   defineOptions({ name: 'SwitchAccountBlock' })
   const emit = defineEmits(['update:showSwitchAccount'])
@@ -234,6 +234,7 @@
           :headerFilter="filterSwitch"
           @onSelectedRow="onSelectedAccount"
           description="Type the account name to filter results."
+          emptyListMessage="No Account found."
         >
           <template #headerFilters="{ filter, applyFilter }">
             <div class="flex flex-wrap justify-between gap-2 w-full rounded">
diff --git a/src/views/Credentials/ListView.vue b/src/views/Credentials/ListView.vue
index 160972019..e056dbdb0 100644
--- a/src/views/Credentials/ListView.vue
+++ b/src/views/Credentials/ListView.vue
@@ -14,6 +14,7 @@
         editPagePath="credentials/edit"
         createPagePath="credentials/create"
         @on-load-data="handleLoadData"
+        emptyListMessage="No Credential found."
       />
       <EmptyResultsBlock
         v-else
@@ -32,12 +33,12 @@
 </template>
 
 <script>
-  import ListTableBlock from '@/templates/list-table-block'
-  import EmptyResultsBlock from '@/templates/empty-results-block'
   import Illustration from '@/assets/svg/illustration-layers.vue'
   import ContentBlock from '@/templates/content-block'
-  import PageHeadingBlock from '@/templates/page-heading-block'
+  import EmptyResultsBlock from '@/templates/empty-results-block'
+  import ListTableBlock from '@/templates/list-table-block'
   import { columnBuilder } from '@/templates/list-table-block/columns/column-builder'
+  import PageHeadingBlock from '@/templates/page-heading-block'
 
   export default {
     name: 'credentials-view',
diff --git a/src/views/DataStreaming/ListView.vue b/src/views/DataStreaming/ListView.vue
index f388abb64..ae64ab813 100644
--- a/src/views/DataStreaming/ListView.vue
+++ b/src/views/DataStreaming/ListView.vue
@@ -1,10 +1,10 @@
 <script>
-  import ListTableBlock from '@/templates/list-table-block'
-  import EmptyResultsBlock from '@/templates/empty-results-block'
   import Illustration from '@/assets/svg/illustration-layers.vue'
   import ContentBlock from '@/templates/content-block'
-  import PageHeadingBlock from '@/templates/page-heading-block'
+  import EmptyResultsBlock from '@/templates/empty-results-block'
+  import ListTableBlock from '@/templates/list-table-block'
   import { columnBuilder } from '@/templates/list-table-block/columns/column-builder'
+  import PageHeadingBlock from '@/templates/page-heading-block'
 
   export default {
     name: 'data-streaming-view',
@@ -88,6 +88,7 @@
         :deleteService="deleteDataStreamingService"
         :columns="getColumns"
         @on-load-data="handleLoadData"
+        emptyListMessage="No Data Streaming found."
       ></ListTableBlock>
       <EmptyResultsBlock
         v-else
diff --git a/src/views/DigitalCertificates/ListView.vue b/src/views/DigitalCertificates/ListView.vue
index 9450ae0f0..4c6583168 100644
--- a/src/views/DigitalCertificates/ListView.vue
+++ b/src/views/DigitalCertificates/ListView.vue
@@ -14,6 +14,7 @@
         addButtonLabel="Digital Certificates"
         createPagePath="digital-certificates/create"
         @on-load-data="handleLoadData"
+        emptyListMessage="No Digital Certificate found."
       />
 
       <EmptyResultsBlock
@@ -33,11 +34,11 @@
 </template>
 
 <script>
-  import ListTableBlock from '@/templates/list-table-block'
-  import EmptyResultsBlock from '@/templates/empty-results-block'
   import Illustration from '@/assets/svg/illustration-layers.vue'
-  import { columnBuilder } from '@/templates/list-table-block/columns/column-builder'
   import ContentBlock from '@/templates/content-block'
+  import EmptyResultsBlock from '@/templates/empty-results-block'
+  import ListTableBlock from '@/templates/list-table-block'
+  import { columnBuilder } from '@/templates/list-table-block/columns/column-builder'
   import PageHeadingBlock from '@/templates/page-heading-block'
 
   export default {
diff --git a/src/views/Domains/ListView.vue b/src/views/Domains/ListView.vue
index 4bde9ad29..e1204d79b 100644
--- a/src/views/Domains/ListView.vue
+++ b/src/views/Domains/ListView.vue
@@ -14,6 +14,7 @@
         :deleteService="deleteDomainService"
         :columns="getColumns"
         @on-load-data="handleLoadData"
+        emptyListMessage="No Domain found."
       />
       <EmptyResultsBlock
         v-else
@@ -32,13 +33,13 @@
 </template>
 
 <script setup>
-  import ListTableBlock from '@/templates/list-table-block'
-  import EmptyResultsBlock from '@/templates/empty-results-block'
   import Illustration from '@/assets/svg/illustration-layers.vue'
-  import { columnBuilder } from '@/templates/list-table-block/columns/column-builder'
-  import { computed, ref } from 'vue'
   import ContentBlock from '@/templates/content-block'
+  import EmptyResultsBlock from '@/templates/empty-results-block'
+  import ListTableBlock from '@/templates/list-table-block'
+  import { columnBuilder } from '@/templates/list-table-block/columns/column-builder'
   import PageHeadingBlock from '@/templates/page-heading-block'
+  import { computed, ref } from 'vue'
 
   const props = defineProps({
     listDomainsService: {
diff --git a/src/views/EdgeApplications/ListView.vue b/src/views/EdgeApplications/ListView.vue
index 03368e2e6..a98ebb191 100644
--- a/src/views/EdgeApplications/ListView.vue
+++ b/src/views/EdgeApplications/ListView.vue
@@ -1,12 +1,12 @@
 <script setup>
-  import { ref, computed } from 'vue'
+  import { computed, ref } from 'vue'
 
-  import ListTableBlock from '@/templates/list-table-block'
-  import EmptyResultsBlock from '@/templates/empty-results-block'
   import Illustration from '@/assets/svg/illustration-layers.vue'
   import ContentBlock from '@/templates/content-block'
-  import PageHeadingBlock from '@/templates/page-heading-block'
+  import EmptyResultsBlock from '@/templates/empty-results-block'
+  import ListTableBlock from '@/templates/list-table-block'
   import { columnBuilder } from '@/templates/list-table-block/columns/column-builder'
+  import PageHeadingBlock from '@/templates/page-heading-block'
 
   defineOptions({ name: 'list-edge-applications' })
 
@@ -88,6 +88,7 @@
         :deleteService="props.deleteEdgeApplicationService"
         :columns="getColumns"
         @on-load-data="handleLoadData"
+        emptyResultsMessage="No Edge Application found."
       />
       <EmptyResultsBlock
         v-else
diff --git a/src/views/EdgeApplicationsCacheSettings/ListView.vue b/src/views/EdgeApplicationsCacheSettings/ListView.vue
index 3ee9f5d07..79e79f0c7 100644
--- a/src/views/EdgeApplicationsCacheSettings/ListView.vue
+++ b/src/views/EdgeApplicationsCacheSettings/ListView.vue
@@ -2,8 +2,8 @@
   import EmptyResultsBlock from '@/templates/empty-results-block'
   import ListTableBlock from '@/templates/list-table-block/no-header'
   import PrimeButton from 'primevue/button'
-  import Drawer from './Drawer'
   import { computed, ref } from 'vue'
+  import Drawer from './Drawer'
 
   const props = defineProps({
     edgeApplicationId: {
@@ -107,6 +107,7 @@
     pageTitleDelete="Cache Setting"
     :editInDrawer="openEditDrawer"
     @on-load-data="handleLoadData"
+    emptyListMessage="No Cache Setting found."
   >
     <template #addButton>
       <PrimeButton
diff --git a/src/views/EdgeApplicationsDeviceGroups/ListView.vue b/src/views/EdgeApplicationsDeviceGroups/ListView.vue
index 819ebf79c..a5e260fd5 100644
--- a/src/views/EdgeApplicationsDeviceGroups/ListView.vue
+++ b/src/views/EdgeApplicationsDeviceGroups/ListView.vue
@@ -1,10 +1,10 @@
 <script setup>
-  import ListTableBlock from '@/templates/list-table-block/no-header'
+  import Illustration from '@/assets/svg/illustration-layers'
   import EmptyResultsBlock from '@/templates/empty-results-block'
-  import PrimeButton from 'primevue/button'
   import { columnBuilder } from '@/templates/list-table-block/columns/column-builder'
-  import Illustration from '@/assets/svg/illustration-layers'
+  import ListTableBlock from '@/templates/list-table-block/no-header'
   import DrawerDeviceGroups from '@/views/EdgeApplicationsDeviceGroups/Drawer'
+  import PrimeButton from 'primevue/button'
   import { computed, ref } from 'vue'
   defineOptions({ name: 'list-edge-applications-device-groups-tab' })
 
@@ -127,6 +127,7 @@
       :editInDrawer="openEditDeviceGroupDrawer"
       :columns="getColumns"
       @on-load-data="handleLoadData"
+      emptyListMessage="No Device Group found."
     >
       <template #addButton>
         <PrimeButton
diff --git a/src/views/EdgeApplicationsFunctions/ListView.vue b/src/views/EdgeApplicationsFunctions/ListView.vue
index 0d4bf1cc9..17e7725b6 100644
--- a/src/views/EdgeApplicationsFunctions/ListView.vue
+++ b/src/views/EdgeApplicationsFunctions/ListView.vue
@@ -1,10 +1,10 @@
 <script setup>
-  import { ref, computed } from 'vue'
-  import ListTableBlock from '@/templates/list-table-block/no-header'
+  import Illustration from '@/assets/svg/illustration-layers'
   import EmptyResultsBlock from '@/templates/empty-results-block'
-  import PrimeButton from 'primevue/button'
   import { columnBuilder } from '@/templates/list-table-block/columns/column-builder'
-  import Illustration from '@/assets/svg/illustration-layers'
+  import ListTableBlock from '@/templates/list-table-block/no-header'
+  import PrimeButton from 'primevue/button'
+  import { computed, ref } from 'vue'
 
   defineOptions({ name: 'list-edge-applications-functions-tab' })
 
@@ -111,6 +111,7 @@
       :columns="getColumns"
       pageTitleDelete="Function"
       @on-load-data="handleLoadData"
+      emptyListMessage="No Function found."
     >
       <template #addButton>
         <PrimeButton
diff --git a/src/views/EdgeApplicationsOrigins/ListView.vue b/src/views/EdgeApplicationsOrigins/ListView.vue
index db4e5632d..7408d075d 100644
--- a/src/views/EdgeApplicationsOrigins/ListView.vue
+++ b/src/views/EdgeApplicationsOrigins/ListView.vue
@@ -1,10 +1,10 @@
 <script setup>
-  import ListTableBlock from '@/templates/list-table-block/no-header'
   import EmptyResultsBlock from '@/templates/empty-results-block'
+  import { columnBuilder } from '@/templates/list-table-block/columns/column-builder'
+  import ListTableBlock from '@/templates/list-table-block/no-header'
+  import DrawerOrigin from '@/views/EdgeApplicationsOrigins/Drawer'
   import PrimeButton from 'primevue/button'
   import { computed, ref } from 'vue'
-  import DrawerOrigin from '@/views/EdgeApplicationsOrigins/Drawer'
-  import { columnBuilder } from '@/templates/list-table-block/columns/column-builder'
   defineOptions({ name: 'list-edge-applications-origins-tab' })
 
   const props = defineProps({
@@ -133,6 +133,7 @@
       pageTitleDelete="Origin"
       :editInDrawer="openEditOriginDrawer"
       @on-load-data="handleLoadData"
+      emptyListMessage="No Origin found."
     >
       <template #addButton>
         <PrimeButton
diff --git a/src/views/EdgeApplicationsRulesEngine/ListView.vue b/src/views/EdgeApplicationsRulesEngine/ListView.vue
index 34afc86e1..76b92440d 100644
--- a/src/views/EdgeApplicationsRulesEngine/ListView.vue
+++ b/src/views/EdgeApplicationsRulesEngine/ListView.vue
@@ -1,11 +1,11 @@
 <script setup>
-  import ListTableBlock from '@/templates/list-table-block/no-header'
-  import EmptyResultsBlock from '@/templates/empty-results-block'
-  import PrimeButton from 'primevue/button'
   import Illustration from '@/assets/svg/illustration-layers'
-  import { computed, ref, watch } from 'vue'
+  import EmptyResultsBlock from '@/templates/empty-results-block'
   import { columnBuilder } from '@/templates/list-table-block/columns/column-builder'
+  import ListTableBlock from '@/templates/list-table-block/no-header'
+  import PrimeButton from 'primevue/button'
   import SelectButton from 'primevue/selectbutton'
+  import { computed, ref, watch } from 'vue'
 
   defineOptions({ name: 'list-edge-applications-device-groups-tab' })
 
@@ -117,6 +117,7 @@
     :pt="{
       thead: { class: !hasContentToList && 'hidden' }
     }"
+    emptyListMessage="No Rules Engine found."
   >
     <template #addButton>
       <div class="flex gap-4">
diff --git a/src/views/EdgeFirewall/ListView.vue b/src/views/EdgeFirewall/ListView.vue
index 655c4c6e9..908c3b8fa 100644
--- a/src/views/EdgeFirewall/ListView.vue
+++ b/src/views/EdgeFirewall/ListView.vue
@@ -1,10 +1,10 @@
 <script>
-  import ListTableBlock from '@/templates/list-table-block'
-  import EmptyResultsBlock from '@/templates/empty-results-block'
   import Illustration from '@/assets/svg/illustration-layers.vue'
   import ContentBlock from '@/templates/content-block'
-  import PageHeadingBlock from '@/templates/page-heading-block'
+  import EmptyResultsBlock from '@/templates/empty-results-block'
+  import ListTableBlock from '@/templates/list-table-block'
   import { columnBuilder } from '@/templates/list-table-block/columns/column-builder'
+  import PageHeadingBlock from '@/templates/page-heading-block'
   export default {
     name: 'edge-firewall-view',
     components: {
@@ -92,6 +92,7 @@
         :deleteService="deleteEdgeFirewallService"
         :columns="getColumns"
         @on-load-data="handleLoadData"
+        emptyListMessage="No Rule Set found."
       />
       <EmptyResultsBlock
         v-else
diff --git a/src/views/EdgeFunctions/ListView.vue b/src/views/EdgeFunctions/ListView.vue
index 7108a040c..75cfac57a 100644
--- a/src/views/EdgeFunctions/ListView.vue
+++ b/src/views/EdgeFunctions/ListView.vue
@@ -14,6 +14,7 @@
         createPagePath="edge-functions/create"
         editPagePath="edge-functions/edit"
         @on-load-data="handleLoadData"
+        emptyListMessage="No Function found."
       />
       <EmptyResultsBlock
         v-else
@@ -32,13 +33,13 @@
 </template>
 
 <script setup>
-  import { ref, computed } from 'vue'
-  import ListTableBlock from '@/templates/list-table-block'
-  import EmptyResultsBlock from '@/templates/empty-results-block'
   import Illustration from '@/assets/svg/illustration-layers.vue'
   import ContentBlock from '@/templates/content-block'
-  import PageHeadingBlock from '@/templates/page-heading-block'
+  import EmptyResultsBlock from '@/templates/empty-results-block'
+  import ListTableBlock from '@/templates/list-table-block'
   import { columnBuilder } from '@/templates/list-table-block/columns/column-builder'
+  import PageHeadingBlock from '@/templates/page-heading-block'
+  import { computed, ref } from 'vue'
 
   const props = defineProps({
     listEdgeFunctionsService: {
diff --git a/src/views/EdgeNode/ListView.vue b/src/views/EdgeNode/ListView.vue
index b72226dbc..de97d8e1f 100644
--- a/src/views/EdgeNode/ListView.vue
+++ b/src/views/EdgeNode/ListView.vue
@@ -1,11 +1,11 @@
 <script setup>
-  import ListTableBlock from '@/templates/list-table-block'
-  import EmptyEdgeNode from '@/templates/empty-results-block/empty-edge-node'
   import Illustration from '@/assets/svg/illustration-layers'
   import ContentBlock from '@/templates/content-block'
+  import EmptyEdgeNode from '@/templates/empty-results-block/empty-edge-node'
+  import ListTableBlock from '@/templates/list-table-block'
+  import { columnBuilder } from '@/templates/list-table-block/columns/column-builder'
   import PageHeadingBlock from '@/templates/page-heading-block'
   import Authorize from '@/views/EdgeNode/Dialog/Authorize'
-  import { columnBuilder } from '@/templates/list-table-block/columns/column-builder'
   import { computed, ref } from 'vue'
   defineOptions({ name: 'list-edge-node' })
 
@@ -90,6 +90,7 @@
         editPagePath="edge-node/edit"
         @on-load-data="handleLoadData"
         :rowActions="actionsRow"
+        emptyListMessage="No Edge Node found."
       />
       <EmptyEdgeNode
         v-else
diff --git a/src/views/EdgeNode/ListViewTabServices.vue b/src/views/EdgeNode/ListViewTabServices.vue
index d8027f82e..0fb10ece1 100644
--- a/src/views/EdgeNode/ListViewTabServices.vue
+++ b/src/views/EdgeNode/ListViewTabServices.vue
@@ -1,11 +1,11 @@
 <script setup>
-  import ListTableBlock from '@/templates/list-table-block/no-header'
-  import EmptyResultsBlock from '@/templates/empty-results-block'
   import Illustration from '@/assets/svg/illustration-layers'
-  import { computed, ref } from 'vue'
-  import PrimeButton from 'primevue/button'
+  import EmptyResultsBlock from '@/templates/empty-results-block'
   import { columnBuilder } from '@/templates/list-table-block/columns/column-builder'
+  import ListTableBlock from '@/templates/list-table-block/no-header'
   import DrawerService from '@/views/EdgeNode/Drawer'
+  import PrimeButton from 'primevue/button'
+  import { computed, ref } from 'vue'
   defineOptions({ name: 'list-edge-node-resources-tab' })
 
   const props = defineProps({
@@ -103,6 +103,7 @@
         pageTitleDelete="Edge Node Service"
         :editInDrawer="openEditServiceDrawer"
         @on-load-data="handleLoadData"
+        emptyListMessage="No Service found."
       >
         <template #addButton>
           <PrimeButton
diff --git a/src/views/EdgeServices/ListView.vue b/src/views/EdgeServices/ListView.vue
index 114885991..3bb1ab1c0 100644
--- a/src/views/EdgeServices/ListView.vue
+++ b/src/views/EdgeServices/ListView.vue
@@ -1,12 +1,12 @@
 <script setup>
-  import ListTableBlock from '@/templates/list-table-block'
-  import EmptyResultsBlock from '@/templates/empty-results-block'
   import Illustration from '@/assets/svg/illustration-layers'
   import ContentBlock from '@/templates/content-block'
+  import EmptyResultsBlock from '@/templates/empty-results-block'
+  import ListTableBlock from '@/templates/list-table-block'
+  import { columnBuilder } from '@/templates/list-table-block/columns/column-builder'
   import PageHeadingBlock from '@/templates/page-heading-block'
   import EdgeServicesToggleStatus from '@/views/EdgeServices/Dialog/EdgeServicesToggleStatus'
   import { computed, ref } from 'vue'
-  import { columnBuilder } from '@/templates/list-table-block/columns/column-builder'
   defineOptions({ name: 'list-edge-service' })
 
   import { useRouter } from 'vue-router'
@@ -112,6 +112,7 @@
         editPagePath="edge-services/edit"
         @on-load-data="handleLoadData"
         :rowActions="actionsRow"
+        emptyListMessage="No Service found."
       />
 
       <EmptyResultsBlock
diff --git a/src/views/EdgeServices/ListViewTabResources.vue b/src/views/EdgeServices/ListViewTabResources.vue
index 33de223f6..5546f3c33 100644
--- a/src/views/EdgeServices/ListViewTabResources.vue
+++ b/src/views/EdgeServices/ListViewTabResources.vue
@@ -1,10 +1,10 @@
 <script setup>
-  import ListTableBlock from '@/templates/list-table-block/no-header'
-  import EmptyResultsBlock from '@/templates/empty-results-block'
   import Illustration from '@/assets/svg/illustration-layers'
-  import { computed, ref } from 'vue'
-  import PrimeButton from 'primevue/button'
+  import EmptyResultsBlock from '@/templates/empty-results-block'
+  import ListTableBlock from '@/templates/list-table-block/no-header'
   import DrawerResource from '@/views/EdgeServices/Drawer'
+  import PrimeButton from 'primevue/button'
+  import { computed, ref } from 'vue'
 
   defineOptions({ name: 'list-edge-service-resources-tab' })
 
@@ -117,6 +117,7 @@
         pageTitleDelete="Resource"
         :editInDrawer="openEditServiceDrawer"
         @on-load-data="handleLoadData"
+        emptyListMessage="No Resource found."
       >
         <template #addButton>
           <PrimeButton
diff --git a/src/views/IntelligentDNS/EditView.vue b/src/views/IntelligentDNS/EditView.vue
index 5879243b2..71aa8eb1d 100644
--- a/src/views/IntelligentDNS/EditView.vue
+++ b/src/views/IntelligentDNS/EditView.vue
@@ -1,22 +1,22 @@
 <script setup>
-  import EditFormBlock from '@templates/edit-form-block'
+  import Illustration from '@/assets/svg/illustration-layers.vue'
+  import ActionBarTemplate from '@/templates/action-bar-block/action-bar-with-teleport'
+  import ContentBlock from '@/templates/content-block'
+  import EmptyResultsBlock from '@/templates/empty-results-block'
+  import CreateDrawerBlock from '@templates/create-drawer-block'
   import EditDrawerBlock from '@templates/edit-drawer-block'
-  import PageHeadingBlock from '@templates/page-heading-block'
+  import EditFormBlock from '@templates/edit-form-block'
   import ListTableNoHeaderBlock from '@templates/list-table-block/no-header'
-  import FormFieldsRecords from './FormFields/FormFieldsRecords'
-  import CreateDrawerBlock from '@templates/create-drawer-block'
-  import ContentBlock from '@/templates/content-block'
-  import TabView from 'primevue/tabview'
-  import TabPanel from 'primevue/tabpanel'
+  import PageHeadingBlock from '@templates/page-heading-block'
   import PrimeButton from 'primevue/button'
-  import EmptyResultsBlock from '@/templates/empty-results-block'
-  import Illustration from '@/assets/svg/illustration-layers.vue'
-  import FormFieldsIntelligentDnsCreate from './FormFields/FormFieldsIntelligentDns.vue'
-  import ActionBarTemplate from '@/templates/action-bar-block/action-bar-with-teleport'
-  import * as yup from 'yup'
-  import { useRoute, useRouter } from 'vue-router'
-  import { computed, onBeforeMount, ref, watch } from 'vue'
+  import TabPanel from 'primevue/tabpanel'
+  import TabView from 'primevue/tabview'
   import { useToast } from 'primevue/usetoast'
+  import { computed, onBeforeMount, ref, watch } from 'vue'
+  import { useRoute, useRouter } from 'vue-router'
+  import * as yup from 'yup'
+  import FormFieldsIntelligentDnsCreate from './FormFields/FormFieldsIntelligentDns.vue'
+  import FormFieldsRecords from './FormFields/FormFieldsRecords'
 
   const props = defineProps({
     loadIntelligentDNSService: { type: Function, required: true },
@@ -270,6 +270,7 @@
             :listService="listRecordsServiceIntelligentDNSDecorator"
             :deleteService="deleteRecordsServiceIntelligentDNSDecorator"
             @on-load-data="handleLoadData"
+            emptyListMessage="No Record found."
           >
             <template #addButton>
               <PrimeButton
diff --git a/src/views/IntelligentDNS/ListView.vue b/src/views/IntelligentDNS/ListView.vue
index fed3a78db..e0c9463b6 100644
--- a/src/views/IntelligentDNS/ListView.vue
+++ b/src/views/IntelligentDNS/ListView.vue
@@ -27,6 +27,7 @@
         createPagePath="intelligent-dns/create"
         editPagePath="intelligent-dns/edit"
         @on-load-data="handleLoadData"
+        emptyListMessage="No Zone found."
       />
       <EmptyResultsBlock
         v-else
@@ -45,13 +46,13 @@
 </template>
 
 <script>
-  import ListTableBlock from '@/templates/list-table-block'
-  import EmptyResultsBlock from '@/templates/empty-results-block'
   import Illustration from '@/assets/svg/illustration-layers.vue'
   import ContentBlock from '@/templates/content-block'
-  import PrimeButton from 'primevue/button'
-  import PageHeadingBlock from '@/templates/page-heading-block'
+  import EmptyResultsBlock from '@/templates/empty-results-block'
+  import ListTableBlock from '@/templates/list-table-block'
   import { columnBuilder } from '@/templates/list-table-block/columns/column-builder'
+  import PageHeadingBlock from '@/templates/page-heading-block'
+  import PrimeButton from 'primevue/button'
 
   export default {
     name: 'intelligent-dns-view',
diff --git a/src/views/NetworkLists/ListView.vue b/src/views/NetworkLists/ListView.vue
index 4a810bbe3..4d3f1544f 100644
--- a/src/views/NetworkLists/ListView.vue
+++ b/src/views/NetworkLists/ListView.vue
@@ -14,6 +14,7 @@
         createPagePath="network-lists/create"
         editPagePath="network-lists/edit"
         @on-load-data="handleLoadData"
+        emptyListMessage="No Network List found."
       />
       <EmptyResultsBlock
         v-else
@@ -32,10 +33,10 @@
 </template>
 
 <script>
-  import ListTableBlock from '@/templates/list-table-block'
-  import EmptyResultsBlock from '@/templates/empty-results-block'
   import Illustration from '@/assets/svg/illustration-layers.vue'
   import ContentBlock from '@/templates/content-block'
+  import EmptyResultsBlock from '@/templates/empty-results-block'
+  import ListTableBlock from '@/templates/list-table-block'
   import PageHeadingBlock from '@/templates/page-heading-block'
 
   export default {
diff --git a/src/views/PersonalTokens/ListView.vue b/src/views/PersonalTokens/ListView.vue
index 94774e7d0..6be24fe2c 100644
--- a/src/views/PersonalTokens/ListView.vue
+++ b/src/views/PersonalTokens/ListView.vue
@@ -13,7 +13,8 @@
         addButtonLabel="Personal Token"
         createPagePath="personal-tokens/create"
         @on-load-data="handleLoadData"
-        :enableEditClick="false" />
+        :enableEditClick="false"
+        emptyListMessage="No Personal Token found." />
       <EmptyResultsBlock
         v-else
         title="No personal tokens found"
@@ -30,13 +31,13 @@
 </template>
 
 <script setup>
-  import { ref } from 'vue'
-  import ListTableBlock from '@/templates/list-table-block'
+  import Illustration from '@/assets/svg/illustration-layers.vue'
   import ContentBlock from '@/templates/content-block'
-  import PageHeadingBlock from '@/templates/page-heading-block'
   import EmptyResultsBlock from '@/templates/empty-results-block'
-  import Illustration from '@/assets/svg/illustration-layers.vue'
+  import ListTableBlock from '@/templates/list-table-block'
   import { columnBuilder } from '@/templates/list-table-block/columns/column-builder'
+  import PageHeadingBlock from '@/templates/page-heading-block'
+  import { ref } from 'vue'
 
   defineProps({
     listPersonalTokensService: {
diff --git a/src/views/RealTimePurge/ListView.vue b/src/views/RealTimePurge/ListView.vue
index 01aa582ee..232835fee 100644
--- a/src/views/RealTimePurge/ListView.vue
+++ b/src/views/RealTimePurge/ListView.vue
@@ -13,6 +13,7 @@
         @on-load-data="handleLoadData"
         :isGraphql="true"
         :enableEditClick="false"
+        emptyListMessage="No Purge found."
       >
       </ListTableBlock>
       <EmptyResultsBlock
@@ -32,12 +33,12 @@
 </template>
 
 <script setup>
-  import { computed, ref } from 'vue'
-  import ListTableBlock from '@/templates/list-table-block'
-  import EmptyResultsBlock from '@/templates/empty-results-block'
   import Illustration from '@/assets/svg/illustration-layers.vue'
   import ContentBlock from '@/templates/content-block'
+  import EmptyResultsBlock from '@/templates/empty-results-block'
+  import ListTableBlock from '@/templates/list-table-block'
   import PageHeadingBlock from '@/templates/page-heading-block'
+  import { computed, ref } from 'vue'
 
   const props = defineProps({
     listRealTimePurgeService: { required: true, type: Function },
diff --git a/src/views/TeamsPermissions/ListView.vue b/src/views/TeamsPermissions/ListView.vue
index 9adea4fa8..5532993a1 100644
--- a/src/views/TeamsPermissions/ListView.vue
+++ b/src/views/TeamsPermissions/ListView.vue
@@ -14,6 +14,7 @@
         createPagePath="teams-permission/create"
         editPagePath="teams-permission/edit"
         @on-load-data="handleLoadData"
+        emptyListMessage="No Team Permission found."
       >
       </ListTableBlock>
       <EmptyResultsBlock
@@ -33,13 +34,13 @@
 </template>
 
 <script setup>
-  import { computed, ref } from 'vue'
-  import ListTableBlock from '@/templates/list-table-block'
-  import { columnBuilder } from '@/templates/list-table-block/columns/column-builder'
-  import EmptyResultsBlock from '@/templates/empty-results-block'
   import Illustration from '@/assets/svg/illustration-layers.vue'
   import ContentBlock from '@/templates/content-block'
+  import EmptyResultsBlock from '@/templates/empty-results-block'
+  import ListTableBlock from '@/templates/list-table-block'
+  import { columnBuilder } from '@/templates/list-table-block/columns/column-builder'
   import PageHeadingBlock from '@/templates/page-heading-block'
+  import { computed, ref } from 'vue'
 
   const pros = defineProps({
     listTeamPermissionService: { required: true, type: Function },
diff --git a/src/views/Users/ListView.vue b/src/views/Users/ListView.vue
index c1a27d80e..bb939fd60 100644
--- a/src/views/Users/ListView.vue
+++ b/src/views/Users/ListView.vue
@@ -14,6 +14,7 @@
         createPagePath="users/create"
         editPagePath="users/edit"
         @on-load-data="handleLoadData"
+        emptyListMessage="No User found."
       />
       <EmptyResultsBlock
         v-else
@@ -32,13 +33,13 @@
 </template>
 
 <script setup>
-  import { ref, computed } from 'vue'
-  import ListTableBlock from '@/templates/list-table-block'
-  import EmptyResultsBlock from '@/templates/empty-results-block'
   import Illustration from '@/assets/svg/illustration-layers.vue'
   import ContentBlock from '@/templates/content-block'
-  import PageHeadingBlock from '@/templates/page-heading-block'
+  import EmptyResultsBlock from '@/templates/empty-results-block'
+  import ListTableBlock from '@/templates/list-table-block'
   import { columnBuilder } from '@/templates/list-table-block/columns/column-builder'
+  import PageHeadingBlock from '@/templates/page-heading-block'
+  import { computed, ref } from 'vue'
 
   const hasContentToList = ref(true)
   const pageTitle = 'Users'
diff --git a/src/views/Variables/ListView.vue b/src/views/Variables/ListView.vue
index df332f5ba..530794441 100644
--- a/src/views/Variables/ListView.vue
+++ b/src/views/Variables/ListView.vue
@@ -14,6 +14,7 @@
         createPagePath="variables/create"
         editPagePath="variables/edit"
         @on-load-data="handleLoadData"
+        emptyListMessage="No Variable found."
       />
       <EmptyResultsBlock
         v-else
@@ -32,11 +33,11 @@
 </template>
 
 <script>
-  import ListTableBlock from '@/templates/list-table-block'
-  import EmptyResultsBlock from '@/templates/empty-results-block'
   import Illustration from '@/assets/svg/illustration-layers.vue'
-  import { columnBuilder } from '@/templates/list-table-block/columns/column-builder'
   import ContentBlock from '@/templates/content-block'
+  import EmptyResultsBlock from '@/templates/empty-results-block'
+  import ListTableBlock from '@/templates/list-table-block'
+  import { columnBuilder } from '@/templates/list-table-block/columns/column-builder'
   import PageHeadingBlock from '@/templates/page-heading-block'
 
   import { h } from 'vue'

From d610dadeb31a4e2c18cc12ee2a280753ac007918 Mon Sep 17 00:00:00 2001
From: William <william.tome@azion.com>
Date: Wed, 10 Jan 2024 13:27:39 -0300
Subject: [PATCH 040/135] [ENG-28073] feat: add console query string to url
 (#548)

* feat: add query console=true to social login/signup

* feat: add query console=true to social login/signup

* feat: add loading state and overlay when submit social idp

* feat: disable other buttons on submit
---
 .../list-social-idps-service.js               |  3 ++-
 src/templates/social-idps-block/index.vue     | 20 ++++++++++++++-----
 .../list-social-idps-service.test.js          |  6 +++---
 3 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/src/services/social-idps-services/list-social-idps-service.js b/src/services/social-idps-services/list-social-idps-service.js
index 082c79a11..90ed3e25d 100644
--- a/src/services/social-idps-services/list-social-idps-service.js
+++ b/src/services/social-idps-services/list-social-idps-service.js
@@ -1,7 +1,7 @@
+import { parseSnakeToCamel } from '@/helpers'
 import { AxiosHttpClientAdapter } from '@/services/axios/AxiosHttpClientAdapter'
 import * as Errors from '@/services/axios/errors'
 import { makeListSocialIdpsBaseUrl } from './make-list-social-idps-base-url'
-import { parseSnakeToCamel } from '@/helpers'
 
 export const listSocialIdpsService = async (payload) => {
   let httpResponse = await AxiosHttpClientAdapter.request({
@@ -15,6 +15,7 @@ export const listSocialIdpsService = async (payload) => {
 const adapt = (httpResponse) => {
   const { body } = httpResponse
   return body.map((socialIdp) => {
+    socialIdp.login_url = socialIdp.login_url + '?console=true'
     return parseSnakeToCamel(socialIdp)
   })
 }
diff --git a/src/templates/social-idps-block/index.vue b/src/templates/social-idps-block/index.vue
index c29d7faea..165b2e568 100644
--- a/src/templates/social-idps-block/index.vue
+++ b/src/templates/social-idps-block/index.vue
@@ -26,8 +26,10 @@
           v-if="idp.isActive"
           :label="formatName(idp.name)"
           :icon="getIcon(idp.slug)"
-          @click="authenticate(idp.loginUrl)"
+          @click="authenticate(idp)"
           outlined
+          :loading="submittedIdp === idp.uuid"
+          :disabled="submittedIdp"
         />
       </template>
     </div>
@@ -41,11 +43,12 @@
 </template>
 
 <script setup>
-  import { computed, onMounted, ref } from 'vue'
+  import { useLoadingStore } from '@/stores/loading'
   import PrimeButton from 'primevue/button'
-  import Skeleton from 'primevue/skeleton'
   import Divider from 'primevue/divider'
+  import Skeleton from 'primevue/skeleton'
   import { useToast } from 'primevue/usetoast'
+  import { computed, onMounted, ref } from 'vue'
 
   defineOptions({ name: 'social-idps-block' })
 
@@ -65,6 +68,7 @@
 
   const idps = ref([])
   const showSocialIdps = ref(true)
+  const submittedIdp = ref(null)
 
   const showSkeleton = computed(() => idps.value.length === 0)
 
@@ -104,7 +108,13 @@
     return icons[slug]
   }
 
-  const authenticate = (url) => {
-    window.location.href = url
+  const loadingStore = useLoadingStore()
+
+  const authenticate = (idp) => {
+    submittedIdp.value = idp.uuid
+
+    loadingStore.startLoading()
+
+    window.location.href = idp.loginUrl
   }
 </script>
diff --git a/src/tests/services/social-idps-services/list-social-idps-service.test.js b/src/tests/services/social-idps-services/list-social-idps-service.test.js
index 776e272a8..b04a250d3 100644
--- a/src/tests/services/social-idps-services/list-social-idps-service.test.js
+++ b/src/tests/services/social-idps-services/list-social-idps-service.test.js
@@ -1,7 +1,7 @@
-import { describe, expect, it, vi } from 'vitest'
 import { AxiosHttpClientAdapter } from '@/services/axios/AxiosHttpClientAdapter'
 import * as Errors from '@/services/axios/errors'
 import { listSocialIdpsService } from '@/services/social-idps-services'
+import { describe, expect, it, vi } from 'vitest'
 
 const mockPayload = {
   data: [
@@ -20,7 +20,7 @@ const mockPayload = {
       name: 'Google',
       isActive: true,
       protocol: 'Social',
-      loginUrl: '/some-url',
+      loginUrl: '/some-url?console=true',
       slug: 'google'
     }
   ]
@@ -38,7 +38,7 @@ describe('SocialIdpsServices', () => {
   it('should call API with correct params', async () => {
     const requestSpy = vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
       statusCode: 200,
-      body: mockPayload.data
+      body: []
     })
 
     const { sut } = makeSut()

From b9f550146e81e8966c8dc4205f43f7d724109ed0 Mon Sep 17 00:00:00 2001
From: HerbertJulio <herbert.julio@azion.com>
Date: Wed, 10 Jan 2024 14:00:23 -0300
Subject: [PATCH 041/135] refactor: adjusted edge origins drawer

---
 .../edit-origin-service.js                        |  7 +++++--
 .../list-origins-service.js                       |  7 ++++---
 .../load-origin-service.js                        |  2 +-
 .../list-table-block/columns/expand-column.vue    |  6 +++---
 src/views/EdgeApplications/TabsView.vue           | 15 +++++++++------
 .../EdgeApplicationsOrigins/Drawer/index.vue      | 10 +++++++---
 .../FormFieldsEdgeApplicationsOrigins.vue         |  5 ++++-
 src/views/EdgeApplicationsOrigins/ListView.vue    |  5 +++++
 8 files changed, 38 insertions(+), 19 deletions(-)

diff --git a/src/services/edge-application-origins-services/edit-origin-service.js b/src/services/edge-application-origins-services/edit-origin-service.js
index 810e83bb6..406fa3c67 100644
--- a/src/services/edge-application-origins-services/edit-origin-service.js
+++ b/src/services/edge-application-origins-services/edit-origin-service.js
@@ -14,9 +14,12 @@ export const editOriginService = async (payload) => {
 }
 
 const adapt = (payload) => {
-  const paylodAdapted = {
+  const payloadAdapted = {
     name: payload.name,
     host_header: payload.hostHeader,
+    origin_type: payload.originType,
+    method: payload.method,
+    is_origin_redirection_enabled: payload.isOriginRedirectionEnabled,
     addresses: payload.addresses?.map((addressItem) => ({
       address: addressItem.address,
       weight: addressItem.weight,
@@ -33,7 +36,7 @@ const adapt = (payload) => {
     timeout_between_bytes: payload.timeoutBetweenBytes
   }
 
-  return paylodAdapted
+  return payloadAdapted
 }
 
 /**
diff --git a/src/services/edge-application-origins-services/list-origins-service.js b/src/services/edge-application-origins-services/list-origins-service.js
index 4df877789..51544dc11 100644
--- a/src/services/edge-application-origins-services/list-origins-service.js
+++ b/src/services/edge-application-origins-services/list-origins-service.js
@@ -23,11 +23,12 @@ const adapt = (httpResponse) => {
   const originTypeFormat = {
     single_origin: 'Single Origin',
     load_balancer: 'Load Balancer',
-    live_ingest: 'live_ingest'
+    live_ingest: 'Live Ingest',
+    object_storage: 'Object Storage'
   }
   const parsedOrigin = httpResponse.body.results?.map((origin) => {
-    let formattedListOfAddresses = origin.addresses?.map((address) => address.address)
-
+    let formattedListOfAddresses = origin.addresses?.map((address) => address.address) || []
+    
     return {
       id: origin.origin_key,
       originKey: {
diff --git a/src/services/edge-application-origins-services/load-origin-service.js b/src/services/edge-application-origins-services/load-origin-service.js
index 4d56d45bc..19eebc27a 100644
--- a/src/services/edge-application-origins-services/load-origin-service.js
+++ b/src/services/edge-application-origins-services/load-origin-service.js
@@ -12,7 +12,7 @@ export const loadOriginService = async ({ edgeApplicationId, id }) => {
 }
 
 const adapt = (httpResponse) => {
-  const origin = httpResponse.body.results
+  const origin = httpResponse.body.results  
   const parsedBody = {
     originId: origin.origin_id,
     originKey: origin.origin_key,
diff --git a/src/templates/list-table-block/columns/expand-column.vue b/src/templates/list-table-block/columns/expand-column.vue
index 3ffbaa572..98600012c 100644
--- a/src/templates/list-table-block/columns/expand-column.vue
+++ b/src/templates/list-table-block/columns/expand-column.vue
@@ -30,9 +30,9 @@
   const showAllItems = ref(false)
 
   const SLICE_VALUE = 2
-  const formatValue = props.value.slice(0, SLICE_VALUE)
-  const totalItems = props.value.length - SLICE_VALUE
-  const displayShowMore = props.value.length > SLICE_VALUE
+  const formatValue = props.value?.slice(0, SLICE_VALUE) ?? []
+  const totalItems = props.value?.length - SLICE_VALUE
+  const displayShowMore = props.value?.length > SLICE_VALUE
 
   const splitValue = computed(() => {
     return showAllItems.value ? props.value : formatValue
diff --git a/src/views/EdgeApplications/TabsView.vue b/src/views/EdgeApplications/TabsView.vue
index f30822b72..6a50f0ae3 100644
--- a/src/views/EdgeApplications/TabsView.vue
+++ b/src/views/EdgeApplications/TabsView.vue
@@ -39,14 +39,17 @@
   const route = useRoute()
   const router = useRouter()
   const activeTab = ref(0)
+  const isLoadBalancer = ref(false)
   const edgeApplicationId = ref(route.params.id)
   const isEnableEdgeFunction = ref(false)
 
   const loaderEdgeApplication = async () => {
     try {
-      const { edgeFunctions } = await props.edgeApplicationServices.loadEdgeApplication({
-        id: edgeApplicationId.value
-      })
+      const { edgeFunctions, loadBalancer } =
+        await props.edgeApplicationServices.loadEdgeApplication({
+          id: edgeApplicationId.value
+        })
+      isLoadBalancer.value = loadBalancer
       isEnableEdgeFunction.value = edgeFunctions
     } catch (error) {
       toast.add({
@@ -57,8 +60,6 @@
     }
   }
 
-  loaderEdgeApplication()
-
   const getTabFromValue = (selectedTabIndex) => {
     const tabNames = Object.keys(mapTabs)
     const selectedTab = tabNames.find((tabName) => mapTabs[tabName] === selectedTabIndex)
@@ -78,7 +79,8 @@
     })
   }
 
-  const renderTabCurrentRouter = () => {
+  const renderTabCurrentRouter = async () => {
+    await loaderEdgeApplication()
     const { tab } = route.params
     const defaultTabIndex = 0
     const activeTabIndexByRoute = mapTabs[tab] || defaultTabIndex
@@ -116,6 +118,7 @@
           <EdgeApplicationsOriginsListView
             v-if="activeTab === mapTabs.origins"
             :edgeApplicationId="edgeApplicationId"
+            :isLoadBalancer="isLoadBalancer"
             v-bind="props.originsServices"
             :clipboardWrite="props.clipboardWrite"
           />
diff --git a/src/views/EdgeApplicationsOrigins/Drawer/index.vue b/src/views/EdgeApplicationsOrigins/Drawer/index.vue
index 30e36d1da..47acaa85e 100644
--- a/src/views/EdgeApplicationsOrigins/Drawer/index.vue
+++ b/src/views/EdgeApplicationsOrigins/Drawer/index.vue
@@ -34,6 +34,10 @@
     clipboardWrite: {
       type: Function,
       required: true
+    },
+    isLoadBalancer: {
+      type: Boolean,
+      required: true
     }
   })
 
@@ -53,7 +57,7 @@
     {
       label: 'Load Balancer',
       value: 'load_balancer',
-      disabled: false
+      disabled: !props.isLoadBalancer
     }
   ]
 
@@ -90,8 +94,8 @@
     addresses: yup.array().of(
       yup.object().shape({
         address: yup.string().required().label('Address'),
-        weight: yup.number().required().label('Weight'),
-        isActive: yup.boolean()
+        weight: yup.number().nullable().label('Weight'),
+        isActive: yup.boolean().default(true).label('Active')
       })
     ),
     originPath: yup
diff --git a/src/views/EdgeApplicationsOrigins/FormFields/FormFieldsEdgeApplicationsOrigins.vue b/src/views/EdgeApplicationsOrigins/FormFields/FormFieldsEdgeApplicationsOrigins.vue
index f169e3d97..c57bbe7cb 100644
--- a/src/views/EdgeApplicationsOrigins/FormFields/FormFieldsEdgeApplicationsOrigins.vue
+++ b/src/views/EdgeApplicationsOrigins/FormFields/FormFieldsEdgeApplicationsOrigins.vue
@@ -103,7 +103,10 @@
     isActive: true
   }
 
-  const resetAddressesFields = () => {
+  const resetAddressesFields = (option) => {
+    if (option.value === 'load_balancer') {
+      method.value = 'ip_hash'
+    }
     resetAddresses([{ ...defaultAddress }])
   }
 
diff --git a/src/views/EdgeApplicationsOrigins/ListView.vue b/src/views/EdgeApplicationsOrigins/ListView.vue
index db4e5632d..9c2b00f2e 100644
--- a/src/views/EdgeApplicationsOrigins/ListView.vue
+++ b/src/views/EdgeApplicationsOrigins/ListView.vue
@@ -39,6 +39,10 @@
     clipboardWrite: {
       type: Function,
       required: true
+    },
+    isLoadBalancer: {
+      type: Boolean,
+      required: true
     }
   })
 
@@ -122,6 +126,7 @@
     :loadOriginService="props.loadOriginService"
     :documentationService="props.documentationService"
     :clipboardWrite="props.clipboardWrite"
+    :isLoadBalancer="props.isLoadBalancer"
     @onSuccess="reloadList"
   />
   <div v-if="hasContentToList">

From cf75296ac1690f9474962654fe8cdc91cc2a8cf4 Mon Sep 17 00:00:00 2001
From: "bruna.andrade" <bruna.andrade@azion.com>
Date: Wed, 10 Jan 2024 14:04:11 -0300
Subject: [PATCH 042/135] chore: options

---
 .../FormFields/FormFieldsCreateDigitalCertificates.vue        | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/views/DigitalCertificates/FormFields/FormFieldsCreateDigitalCertificates.vue b/src/views/DigitalCertificates/FormFields/FormFieldsCreateDigitalCertificates.vue
index 78d004ffb..8ac6d1eef 100644
--- a/src/views/DigitalCertificates/FormFields/FormFieldsCreateDigitalCertificates.vue
+++ b/src/views/DigitalCertificates/FormFields/FormFieldsCreateDigitalCertificates.vue
@@ -94,8 +94,8 @@
   </FormHorizontal>
 
   <FormHorizontal
-    title="Certificate Type"
-    description="Select the type of certificate to associate with the account."
+    title="Options"
+    description="Choose between importing a certificate into your account or creating a request for a certificate."
   >
     <template #inputs>
       <div class="flex flex-col w-full gap-3">

From c2132bcb3857ecbc6bfec2157a3a571d2acc9487 Mon Sep 17 00:00:00 2001
From: HerbertJulio <herbert.julio@azion.com>
Date: Wed, 10 Jan 2024 14:08:44 -0300
Subject: [PATCH 043/135] feat: create struct for edge firewall

---
 .../routes/edge-firewall-routes/index.js      |  81 +++++--
 .../domains-services/list-domains-service.js  |   1 +
 .../create-edge-firewall-service.js           |  73 ++++++
 .../edit-edge-firewall-service.js             |  84 +++++++
 src/services/edge-firewall-services/index.js  |   3 +-
 .../load-edge-functions-service.js            |  59 +++++
 src/views/EdgeFirewall/CreateView.vue         |  67 ++++++
 .../FormFields/FormFieldsEdgeFirewall.vue     | 217 ++++++++++++++++++
 src/views/EdgeFirewall/ListView.vue           | 124 +++++-----
 src/views/EdgeFirewall/TabsView.vue           | 123 ++++++++++
 10 files changed, 750 insertions(+), 82 deletions(-)
 create mode 100644 src/services/edge-firewall-services/create-edge-firewall-service.js
 create mode 100644 src/services/edge-firewall-services/edit-edge-firewall-service.js
 create mode 100644 src/services/edge-firewall-services/load-edge-functions-service.js
 create mode 100644 src/views/EdgeFirewall/CreateView.vue
 create mode 100644 src/views/EdgeFirewall/FormFields/FormFieldsEdgeFirewall.vue
 create mode 100644 src/views/EdgeFirewall/TabsView.vue

diff --git a/src/router/routes/edge-firewall-routes/index.js b/src/router/routes/edge-firewall-routes/index.js
index 26332d792..f3b959d39 100644
--- a/src/router/routes/edge-firewall-routes/index.js
+++ b/src/router/routes/edge-firewall-routes/index.js
@@ -1,4 +1,5 @@
 import * as Helpers from '@/helpers'
+import * as DomainServices from '@/services/domains-services'
 
 import * as EdgeFirewall from '@/services/edge-firewall-services'
 
@@ -6,18 +7,72 @@ import * as EdgeFirewall from '@/services/edge-firewall-services'
 export const edgeFirewallRoutes = {
   path: '/edge-firewall',
   name: 'edge-firewall',
-  component: () => import('@views/EdgeFirewall/ListView.vue'),
-  props: {
-    listEdgeFirewallService: EdgeFirewall.listEdgeFirewallService,
-    deleteEdgeFirewallService: EdgeFirewall.deleteEdgeFirewallService,
-    documentationService: Helpers.documentationCatalog.edgeFirewall
-  },
-  meta: {
-    breadCrumbs: [
-      {
-        label: 'Edge Firewall',
-        to: '/edge-firewall'
+  children: [
+    {
+      path: '',
+      name: 'list-edge-firewall',
+      component: () => import('@views/EdgeFirewall/ListView.vue'),
+      props: {
+        listEdgeFirewallService: EdgeFirewall.listEdgeFirewallService,
+        deleteEdgeFirewallService: EdgeFirewall.deleteEdgeFirewallService,
+        documentationService: Helpers.documentationCatalog.edgeFirewall
+      },
+      meta: {
+        breadCrumbs: [
+          {
+            label: 'Edge Firewall',
+            to: '/edge-firewall'
+          }
+        ]
       }
-    ]
-  }
+    },
+    {
+      path: 'create',
+      name: 'create-edge-firewall',
+      component: () => import('@views/EdgeFirewall/CreateView.vue'),
+      props: {
+        listDomainsService: DomainServices.listDomainsService,
+        createEdgeFirewallServices: EdgeFirewall.createEdgeFirewallService
+      },
+      meta: {
+        breadCrumbs: [
+          {
+            label: 'Edge Firewall',
+            to: '/edge-firewall'
+          },
+          {
+            label: 'Create New',
+            to: '/edge-firewall/create'
+          }
+        ]
+      }
+    },
+    {
+      path: 'edit/:id/:resources?',
+      name: 'edit-edge-firewall',
+      component: () => import('@/views/EdgeFirewall/TabsView.vue'),
+      props: {
+        // loadEdgeService: EdgeServiceServices.loadEdgeServiceServices,
+        // editEdgeService: EdgeServiceServices.editEdgeServiceServices,
+        // listResourcesServices: EdgeServiceResourcesServices.listResourcesServices,
+        // deleteResourcesServices: EdgeServiceResourcesServices.deleteResourcesServices,
+        // editResourcesServices: EdgeServiceResourcesServices.editResourcesServices,
+        // createResourcesServices: EdgeServiceResourcesServices.createResourcesServices,
+        // loadResourcesServices: EdgeServiceResourcesServices.loadResourcesServices,
+        // documentationServiceResource: Helpers.documentationGuideProducts.edgeServicesResources,
+        // updatedRedirect: 'list-edge-services'
+      },
+      meta: {
+        breadCrumbs: [
+          {
+            label: 'Edge Firewall',
+            to: '/edge-firewall'
+          },
+          {
+            label: 'Edit Rule Set'
+          }
+        ]
+      }
+    }
+  ]
 }
diff --git a/src/services/domains-services/list-domains-service.js b/src/services/domains-services/list-domains-service.js
index 2d1226ee3..6cb639272 100644
--- a/src/services/domains-services/list-domains-service.js
+++ b/src/services/domains-services/list-domains-service.js
@@ -36,6 +36,7 @@ const adapt = (httpResponse) => {
         content: domain.domain_name
       },
       cnames: cnames,
+      edgeFirewallId: domain.edge_firewall_id,
       edgeApplicationName: domain.name,
       digitalCertificateId: domain.digital_certificate_id
     }
diff --git a/src/services/edge-firewall-services/create-edge-firewall-service.js b/src/services/edge-firewall-services/create-edge-firewall-service.js
new file mode 100644
index 000000000..f87313850
--- /dev/null
+++ b/src/services/edge-firewall-services/create-edge-firewall-service.js
@@ -0,0 +1,73 @@
+import { AxiosHttpClientAdapter } from '../axios/AxiosHttpClientAdapter'
+import * as Errors from '@/services/axios/errors'
+import { makeEdgeFirewallBaseUrl } from './make-edge-firewall-base-url'
+
+/**
+ * @param {Object} payload - The HTTP request payload.
+ * @param {String} payload.name
+ * @returns {Promise<string>} The result message based on the status code.
+ * @throws {Error} If there is an error with the response.
+ */
+export const createEdgeFirewallService = async (payload) => {
+  let httpResponse = await AxiosHttpClientAdapter.request({
+    url: `${makeEdgeFirewallBaseUrl()}`,
+    method: 'POST',
+    body: payload
+  })
+
+  return parseHttpResponse(httpResponse)
+}
+
+/**
+ * @param {Object} httpResponse - The HTTP response object.
+ * @param {Object} httpResponse.body - The response body.
+ * @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 201:
+      return {
+        feedback: 'Your Edge Firewall has been created',
+        urlToEditView: `/edge-firewall/edit/${httpResponse.body.id}`
+      }
+    case 400:
+      throw new Errors.NotFoundError().message
+    case 401:
+      throw new Errors.InvalidApiTokenError().message
+    case 403:
+      throw new Errors.PermissionError().message
+    case 404:
+      throw new Errors.NotFoundError().message
+    case 422:
+      const apiError = extractApiError(httpResponse)
+      throw new Error(apiError).message
+    case 500:
+      throw new Errors.InternalServerError().message
+    default:
+      throw new Errors.UnexpectedError().message
+  }
+}
+
+/**
+ * @param {Object} errorSchema - The error schema.
+ * @param {string} key - The error key of error schema.
+ * @returns {string|undefined} The result message based on the status code.
+ */
+const extractErrorKey = (errorSchema, key) => {
+  return errorSchema[key]?.[0]
+}
+
+/**
+ * @param {Object} httpResponse - The HTTP response object.
+ * @param {Object} httpResponse.body - The response body.
+ * @returns {string} The result message based on the status code.
+ */
+const extractApiError = (httpResponse) => {
+  const nameCantBeEmptyError = extractErrorKey(httpResponse.body, 'errors')
+
+  const errorMessages = [nameCantBeEmptyError]
+  const errorMessage = errorMessages.find((error) => !!error)
+  return errorMessage
+}
diff --git a/src/services/edge-firewall-services/edit-edge-firewall-service.js b/src/services/edge-firewall-services/edit-edge-firewall-service.js
new file mode 100644
index 000000000..6412c2608
--- /dev/null
+++ b/src/services/edge-firewall-services/edit-edge-firewall-service.js
@@ -0,0 +1,84 @@
+import * as Errors from '@/services/axios/errors'
+import { AxiosHttpClientAdapter } from '../axios/AxiosHttpClientAdapter'
+import { makeEdgeFunctionsBaseUrl } from './make-edge-functions-base-url'
+
+export const editEdgeFunctionsService = async (payload) => {
+  const parsedPayload = adapt(payload)
+  let httpResponse = await AxiosHttpClientAdapter.request({
+    url: `${makeEdgeFunctionsBaseUrl()}/${payload.id}`,
+    method: 'PATCH',
+    body: parsedPayload
+  })
+
+  return parseHttpResponse(httpResponse)
+}
+
+/**
+ * @param {Object} httpResponse - The HTTP response object.
+ * @param {Object} httpResponse.body - The response body.
+ * @returns {string} The result message based on the status code.
+ */
+const extractApiError = (httpResponse) => {
+  const definedKeys = [
+    'name',
+    'code',
+    'language',
+    'invalid_json',
+    'initiator_type',
+    'json_args',
+    'active'
+  ]
+  let key = definedKeys.find((key) => httpResponse.body[key])
+
+  // Case not found any defined key
+  if (!key) {
+    key = Object.keys(httpResponse.body)[0]
+  }
+
+  const value = httpResponse.body[key]
+  const isString = typeof value === 'string'
+  const isArray = Array.isArray(value)
+
+  let message = ''
+  if (isString) message = value
+  if (isArray) message = value[0]
+
+  return `${key}: ${message}`
+}
+
+/**
+ * @param {Object} httpResponse - The HTTP response object.
+ * @param {Object} httpResponse.body - The response body.
+ * @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 200:
+      return 'Your edge function has been updated'
+    case 400:
+      const apiError400 = extractApiError(httpResponse)
+      throw new Error(apiError400)
+    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
+  }
+}
+
+const adapt = (payload) => {
+  return {
+    name: payload.name,
+    code: payload.code,
+    initiator_type: payload.initiatorType,
+    json_args: JSON.parse(payload.jsonArgs),
+    active: payload.active
+  }
+}
diff --git a/src/services/edge-firewall-services/index.js b/src/services/edge-firewall-services/index.js
index d3a6124e8..88618b6df 100644
--- a/src/services/edge-firewall-services/index.js
+++ b/src/services/edge-firewall-services/index.js
@@ -1,4 +1,5 @@
 import { listEdgeFirewallService } from './list-edge-firewall-service'
 import { deleteEdgeFirewallService } from './delete-edge-firewall-service'
+import { createEdgeFirewallService } from './create-edge-firewall-service'
 
-export { listEdgeFirewallService, deleteEdgeFirewallService }
+export { listEdgeFirewallService, deleteEdgeFirewallService, createEdgeFirewallService }
diff --git a/src/services/edge-firewall-services/load-edge-functions-service.js b/src/services/edge-firewall-services/load-edge-functions-service.js
new file mode 100644
index 000000000..089ea6755
--- /dev/null
+++ b/src/services/edge-firewall-services/load-edge-functions-service.js
@@ -0,0 +1,59 @@
+import { AxiosHttpClientAdapter, parseHttpResponse } from '../axios/AxiosHttpClientAdapter'
+import { makeEdgeFunctionsBaseUrl } from './make-edge-functions-base-url'
+
+export const loadEdgeFunctionsService = async ({ id }) => {
+  let httpResponse = await AxiosHttpClientAdapter.request({
+    url: `${makeEdgeFunctionsBaseUrl()}/${id}`,
+    method: 'GET'
+  })
+  httpResponse = adapt(httpResponse)
+
+  return parseHttpResponse(httpResponse)
+}
+
+const STATUS_AS_TAG = {
+  true: {
+    content: 'Active',
+    severity: 'success'
+  },
+  false: {
+    content: 'Inactive',
+    severity: 'danger'
+  }
+}
+
+const LANGUAGE_WITH_ICON = {
+  javascript: {
+    content: 'JavaScript',
+    icon: 'javascript'
+  },
+  lua: {
+    content: 'Lua',
+    icon: 'lua'
+  }
+}
+
+const adapt = (httpResponse) => {
+  const body = httpResponse.body.results
+
+  const parsedVariable = {
+    id: body.id,
+    active: body.active,
+    language: body.language,
+    initiatorType: body.initiator_type,
+    lastEditor: body.last_editor,
+    referenceCount: body.reference_count,
+    jsonArgs: JSON.stringify(body.json_args, null, 2),
+    name: body.name,
+    code: body.code,
+    version: body.version || '-',
+    modified: new Intl.DateTimeFormat('us', { dateStyle: 'full' }).format(new Date(body.modified)),
+    statusTag: STATUS_AS_TAG[body.active],
+    languageIcon: LANGUAGE_WITH_ICON[body.language]
+  }
+
+  return {
+    body: parsedVariable,
+    statusCode: httpResponse.statusCode
+  }
+}
diff --git a/src/views/EdgeFirewall/CreateView.vue b/src/views/EdgeFirewall/CreateView.vue
new file mode 100644
index 000000000..dc2d0dcef
--- /dev/null
+++ b/src/views/EdgeFirewall/CreateView.vue
@@ -0,0 +1,67 @@
+<template>
+  <ContentBlock>
+    <template #heading>
+      <PageHeadingBlock pageTitle="New Rule Set"></PageHeadingBlock>
+    </template>
+    <template #content>
+      <CreateFormBlock
+        :createService="props.createEdgeFirewallServices"
+        :schema="validationSchema"
+        :initialValues="initialValues"
+      >
+        <template #form>
+          <FormCreateEdgeFirewall :domainsService="props.listDomainsService" />
+        </template>
+        <template #action-bar="{ onSubmit, formValid, onCancel, loading }">
+          <ActionBarTemplate
+            @onSubmit="onSubmit"
+            @onCancel="onCancel"
+            :loading="loading"
+            :submitDisabled="!formValid"
+          />
+        </template>
+      </CreateFormBlock>
+    </template>
+  </ContentBlock>
+</template>
+
+<script setup>
+  import CreateFormBlock from '@/templates/create-form-block'
+  import ActionBarTemplate from '@/templates/action-bar-block/action-bar-with-teleport'
+  import ContentBlock from '@/templates/content-block'
+  import PageHeadingBlock from '@/templates/page-heading-block'
+  import FormCreateEdgeFirewall from './FormFields/FormFieldsEdgeFirewall'
+  import * as yup from 'yup'
+  defineOptions({ name: 'create-edge-firewall' })
+
+  const props = defineProps({
+    createEdgeFirewallServices: {
+      type: Function,
+      required: true
+    },
+    listDomainsService: {
+      type: Function,
+      required: true
+    }
+  })
+
+  const validationSchema = yup.object({
+    name: yup.string().required().label('Name'),
+    domains: yup.array().label('Domains'),
+    isActive: yup.boolean().label('Active'),
+    edgeFunctionsEnabled: yup.boolean().label('Edge Funcions Enabled'),
+    networkProtectionEnabled: yup.boolean().label('Network Protection Enabled'),
+    wafEnabled: yup.boolean().label('WAF Enabled')
+  })
+
+  
+
+  const initialValues = {
+    name: '',
+    domains: domainsaa,
+    isActive: true,
+    edgeFunctionsEnabled: false,
+    networkProtectionEnabled: false,
+    wafEnabled: false
+  }
+</script>
diff --git a/src/views/EdgeFirewall/FormFields/FormFieldsEdgeFirewall.vue b/src/views/EdgeFirewall/FormFields/FormFieldsEdgeFirewall.vue
new file mode 100644
index 000000000..e1c05c8a8
--- /dev/null
+++ b/src/views/EdgeFirewall/FormFields/FormFieldsEdgeFirewall.vue
@@ -0,0 +1,217 @@
+<script setup>
+  import FormHorizontal from '@/templates/create-form-block/form-horizontal'
+  import InputText from 'primevue/inputtext'
+  import InputSwitch from 'primevue/inputswitch'
+  import { useField } from 'vee-validate'
+  import Card from 'primevue/card'
+  import PrimeTag from 'primevue/tag'
+  import PickList from 'primevue/picklist'
+
+  defineOptions({ name: 'form-fields-edge-firewall' })
+
+  const props = defineProps({
+    domainsService: {
+      type: Function,
+      required: true
+    }
+  })
+
+  const DDosProtectionUnmetered = true
+  const { value: name, errorMessage: nameError } = useField('name')
+  const { value: domains } = useField('domains')
+  const { value: active } = useField('isActive')
+  const { value: edgeFunctionsEnabled } = useField('edgeFunctionsEnabled')
+  const { value: networkProtectionEnabled } = useField('networkProtectionEnabled')
+  const { value: wafEnabled } = useField('wafEnabled')
+
+  const listDomains = async () => {
+    const domains = await props.domainsService({ pageSize: 1000 })
+    return domains
+      .filter((item) => !item.edgeFirewallId)
+      .map((domain) => ({
+        label: domain.name,
+        value: domain.id
+      }))
+  }
+</script>
+
+<template>
+  <FormHorizontal
+    title="General"
+    description="Services define dependencies between resources."
+  >
+    <template #inputs>
+      <div class="flex flex-col sm:max-w-lg w-full gap-2">
+        <label
+          for="name"
+          class="text-color text-base font-medium"
+          >Name *</label
+        >
+        <InputText
+          v-model="name"
+          type="text"
+          :class="{ 'p-invalid': nameError }"
+        />
+        <small
+          v-if="nameError"
+          class="p-error text-xs font-normal leading-tight"
+        >
+          {{ nameError }}
+        </small>
+        <small class="text-color-secondary text-sm font-normal leading-tight">
+          Give a unique and easy-to-remember name.
+        </small>
+      </div>
+    </template>
+  </FormHorizontal>
+  <FormHorizontal
+    title="Domains"
+    description="Select the domains that you want to protect with this Rule Set."
+  >
+    <template #inputs>
+      <div class="flex flex-col sm:max-w-3xl w-full gap-2">
+        <PickList
+          v-model="domains"
+          :pt="{
+            sourceList: { class: ['h-80'] },
+            targetList: { class: ['h-80'] }
+          }"
+          dataKey="id"
+          breakpoint="1400px"
+          :showSourceControls="false"
+          :showTargetControls="false"
+        >
+          <template #sourceheader>Available</template>
+          <template #targetheader>Selected</template>
+          <template #item="slotProps">
+            <div class="flex flex-wrap p-2 align-items-center gap-3">
+              <div class="flex-1 flex flex-column gap-2">
+                <span class="font-normal">{{ slotProps.item.name }}</span>
+              </div>
+            </div>
+          </template>
+        </PickList>
+        <small class="text-color-secondary text-sm font-normal leading-tight">
+          Hold command or ctrl to select multiple items.
+        </small>
+      </div>
+    </template>
+  </FormHorizontal>
+  <FormHorizontal
+    title="Edge Firewall Modules"
+    description="Activate Edge Firewall modules to extend the configuration possibilities of the application. Some modules require subscription."
+  >
+    <template #inputs>
+      <div class="flex flex-col gap-2">
+        <div class="flex flex-col gap-3">
+          <Card
+            :pt="{
+              body: { class: 'p-4 border border-orange-500 rounded-md' },
+              title: { class: 'flex justify-between items-center text-base font-medium m-0' },
+              subtitle: {
+                class: 'text-sm font-normal text-color-secondary m-0 pr-0 md:pr-[2.5rem]'
+              }
+            }"
+          >
+            <template #title>
+              <span class="text-base">DDoS Protection Unmetered</span>
+              <InputSwitch
+                v-model="DDosProtectionUnmetered"
+                disabled
+              />
+            </template>
+            <template #subtitle>
+              Mitigate the largest and most complex network and application-layer DDoS attacks.
+            </template>
+            <template #footer>
+              <PrimeTag
+                value="Automatically enabled in all accounts."
+                icon="pi pi-lock"
+                severity="info"
+                class="mt-3"
+              />
+            </template>
+          </Card>
+          <Card
+            :pt="{
+              body: {
+                class: `p-4 border rounded-md ${
+                  edgeFunctionsEnabled ? 'border-orange-500' : 'border-gray-100'
+                }`
+              },
+              title: { class: 'flex justify-between items-center text-base font-medium m-0' },
+              subtitle: {
+                class: 'text-sm font-normal text-color-secondary m-0 pr-0 md:pr-[2.5rem]'
+              }
+            }"
+          >
+            <template #title>
+              <span class="text-base">Edge Functions</span>
+              <InputSwitch v-model="edgeFunctionsEnabled" />
+            </template>
+            <template #subtitle>
+              Run security-oriented functions at the edge of the network, closer to your users.
+            </template>
+          </Card>
+          <Card
+            :pt="{
+              body: {
+                class: `p-4 ${
+                  networkProtectionEnabled ? 'border border-orange-500 rounded-md' : ''
+                }`
+              },
+              title: { class: 'flex justify-between items-center text-base font-medium m-0' },
+              subtitle: {
+                class: 'text-sm font-normal text-color-secondary m-0 pr-0 md:pr-[2.5rem]'
+              }
+            }"
+          >
+            <template #title>
+              <span class="text-base">Network Layer Protection</span>
+              <InputSwitch v-model="networkProtectionEnabled" />
+            </template>
+            <template #subtitle>Description</template>
+          </Card>
+          <Card
+            :pt="{
+              body: {
+                class: `p-4 ${wafEnabled ? 'border border-orange-500 rounded-md' : ''}`
+              },
+              title: { class: 'flex justify-between items-center text-base font-medium m-0' },
+              subtitle: {
+                class: 'text-sm font-normal text-color-secondary m-0 pr-0 md:pr-[2.5rem]'
+              }
+            }"
+          >
+            <template #title>
+              <span class="text-base">Web Application Firewall</span>
+              <InputSwitch v-model="wafEnabled" />
+            </template>
+            <template #subtitle>Description</template>
+          </Card>
+        </div>
+      </div>
+    </template>
+  </FormHorizontal>
+  <FormHorizontal title="Status">
+    <template #inputs>
+      <div class="flex flex-col w-full gap-2">
+        <div
+          class="flex gap-6 md:align-items-center max-sm:flex-col max-sm:align-items-baseline max-sm:gap-3"
+        >
+          <span class="p-input-icon-right w-full flex max-w-lg items-start gap-2 pb-3 pt-2">
+            <InputSwitch
+              v-model="active"
+              inputId="activeStatus"
+            />
+            <label
+              for="activeStatus"
+              class="text-color text-sm font-normal leading-5"
+              >Active</label
+            >
+          </span>
+        </div>
+      </div>
+    </template>
+  </FormHorizontal>
+</template>
diff --git a/src/views/EdgeFirewall/ListView.vue b/src/views/EdgeFirewall/ListView.vue
index 655c4c6e9..8c0bc79b0 100644
--- a/src/views/EdgeFirewall/ListView.vue
+++ b/src/views/EdgeFirewall/ListView.vue
@@ -1,78 +1,66 @@
-<script>
+<script setup>
   import ListTableBlock from '@/templates/list-table-block'
   import EmptyResultsBlock from '@/templates/empty-results-block'
-  import Illustration from '@/assets/svg/illustration-layers.vue'
+  import Illustration from '@/assets/svg/illustration-layers'
   import ContentBlock from '@/templates/content-block'
   import PageHeadingBlock from '@/templates/page-heading-block'
   import { columnBuilder } from '@/templates/list-table-block/columns/column-builder'
-  export default {
-    name: 'edge-firewall-view',
-    components: {
-      ListTableBlock,
-      EmptyResultsBlock,
-      Illustration,
-      ContentBlock,
-      PageHeadingBlock
+  import { computed, ref } from 'vue'
+  defineOptions({ name: 'edge-firewall-view' })
+
+  const props = defineProps({
+    listEdgeFirewallService: {
+      required: true,
+      type: Function
     },
-    props: {
-      listEdgeFirewallService: {
-        required: true,
-        type: Function
-      },
-      deleteEdgeFirewallService: {
-        required: true,
-        type: Function
-      },
-      documentationService: {
-        required: true,
-        type: Function
-      }
+    deleteEdgeFirewallService: {
+      required: true,
+      type: Function
     },
-    data: () => ({
-      hasContentToList: true
-    }),
-    computed: {
-      getColumns() {
-        return [
-          {
-            field: 'name',
-            header: 'Name'
-          },
-          {
-            field: 'domainsList',
-            header: 'Domains',
-            type: 'component',
-            component: (columnData) =>
-              columnBuilder({ data: columnData, columnAppearance: 'expand-column' })
-          },
-          {
-            field: 'status',
-            header: 'Status',
-            type: 'component',
-            component: (columnData) => {
-              return columnBuilder({
-                data: columnData,
-                columnAppearance: 'tag'
-              })
-            }
-          },
-          {
-            field: 'lastEditor',
-            header: 'Last Editor'
-          },
-          {
-            field: 'lastModify',
-            sortField: 'lastModifyDate',
-            header: 'Last Modified'
-          }
-        ]
-      }
+    documentationService: {
+      required: true,
+      type: Function
+    }
+  })
+
+  const hasContentToList = ref(true)
+
+  const getColumns = computed(() => [
+    {
+      field: 'name',
+      header: 'Name'
+    },
+    {
+      field: 'domainsList',
+      header: 'Domains',
+      type: 'component',
+      component: (columnData) =>
+        columnBuilder({ data: columnData, columnAppearance: 'expand-column' })
     },
-    methods: {
-      handleLoadData(event) {
-        this.hasContentToList = event
+    {
+      field: 'status',
+      header: 'Status',
+      type: 'component',
+      component: (columnData) => {
+        return columnBuilder({
+          data: columnData,
+          columnAppearance: 'tag'
+        })
       }
+    },
+    {
+      field: 'lastEditor',
+      header: 'Last Editor'
+    },
+    {
+      field: 'lastModify',
+      sortField: 'lastModifyDate',
+      header: 'Last Modified'
     }
+  ])
+
+  const handleLoadData = (event) => {
+    hasContentToList.value = event
   }
 </script>
 
@@ -88,8 +76,8 @@
         addButtonLabel="Rule Set"
         createPagePath="/edge-firewall/create"
         editPagePath="/edge-firewall/edit"
-        :listService="listEdgeFirewallService"
-        :deleteService="deleteEdgeFirewallService"
+        :listService="props.listEdgeFirewallService"
+        :deleteService="props.deleteEdgeFirewallService"
         :columns="getColumns"
         @on-load-data="handleLoadData"
       />
@@ -99,7 +87,7 @@
         description="Create your first Rule Set."
         createButtonLabel="Rule Set"
         createPagePath="/edge-firewall/create"
-        :documentationService="documentationService"
+        :documentationService="props.documentationService"
       >
         <template #illustration>
           <Illustration />
diff --git a/src/views/EdgeFirewall/TabsView.vue b/src/views/EdgeFirewall/TabsView.vue
new file mode 100644
index 000000000..1688fc35a
--- /dev/null
+++ b/src/views/EdgeFirewall/TabsView.vue
@@ -0,0 +1,123 @@
+<script setup>
+  import PageHeadingBlock from '@/templates/page-heading-block'
+  import TabView from 'primevue/tabview'
+  import TabPanel from 'primevue/tabpanel'
+  import ContentBlock from '@/templates/content-block'
+  import { useRoute, useRouter } from 'vue-router'
+  import { ref } from 'vue'
+  import { useToast } from 'primevue/usetoast'
+  
+  import EdgeApplicationsRulesEngineListView from '@/views/EdgeApplicationsRulesEngine/ListView'
+  import EdgeApplicationsFunctionsListView from '@/views/EdgeApplicationsFunctions/ListView'
+  import EditView from './EditView.vue'
+
+  defineOptions({ name: 'tabs-edge-service' })
+
+  const props = defineProps({
+    edgeFirewallServices: { type: Object, required: true },
+    listDomainsService: { type: Function, required: true },
+    rulesEngineServices: { type: Object, required: true },
+    functionsServices: { type: Object, required: true }
+  })
+
+  const mapTabs = {
+    mainSettings: 0,
+    functions: 1,
+    rulesEngine: 2
+  }
+
+  const toast = useToast()
+  const route = useRoute()
+  const router = useRouter()
+  const activeTab = ref(0)
+  const edgeApplicationId = ref(route.params.id)
+  const isEnableFunction = ref(false)
+
+  // const loaderEdgeApplication = async () => {
+  //   try {
+  //     const { edgeFunctions, loadBalancer } =
+  //       await props.edgeApplicationServices.loadEdgeApplication({
+  //         id: edgeApplicationId.value
+  //       })
+  //     isEnableEdgeFunction.value = edgeFunctions
+  //   } catch (error) {
+  //     toast.add({
+  //       closable: true,
+  //       severity: 'error',
+  //       summary: error
+  //     })
+  //   }
+  // }
+
+  const getTabFromValue = (selectedTabIndex) => {
+    const tabNames = Object.keys(mapTabs)
+    const selectedTab = tabNames.find((tabName) => mapTabs[tabName] === selectedTabIndex)
+    return selectedTab
+  }
+
+  const changeRouteByClickingOnTab = (event) => {
+    const tab = getTabFromValue(event.index)
+    activeTab.value = event.index
+    const params = {
+      id: edgeApplicationId.value,
+      tab
+    }
+    router.push({
+      name: 'edit-edge-firewall',
+      params
+    })
+  }
+
+  const renderTabCurrentRouter = async () => {
+    // await loaderEdgeApplication()
+    const { tab } = route.params
+    const defaultTabIndex = 0
+    const activeTabIndexByRoute = mapTabs[tab] || defaultTabIndex
+    activeTab.value = activeTabIndexByRoute
+  }
+
+  renderTabCurrentRouter()
+</script>
+
+<template>
+  <ContentBlock>
+    <template #heading>
+      <PageHeadingBlock pageTitle="Name Rule Set" />
+    </template>
+    <template #content>
+      <TabView
+        :activeIndex="activeTab"
+        @tab-click="changeRouteByClickingOnTab"
+        class="w-full h-full"
+      >
+        <TabPanel header="Main Settings">
+          <div class="mt-8">
+            <EditView
+              :editEdgeFirewallService="edgeFirewallServices.editEdgeApplication"
+              :loadEdgeEdgeFirewallService="edgeFirewallServices.loadEdgeApplication"
+              :updatedRedirect="edgeFirewallServices.updatedRedirect"
+              :showActionBar="activeTab === mapTabs.mainSettings"
+            />
+          </div>
+        </TabPanel>
+        <TabPanel
+          header="Functions"
+          v-if="isEnableEdgeFunction"
+        >
+          <EdgeApplicationsFunctionsListView
+            v-if="activeTab === mapTabs.functions"
+            v-bind="props.functionsServices"
+            :edgeApplicationId="edgeApplicationId"
+          />
+        </TabPanel>
+        <TabPanel header="Rules Engine">
+          <EdgeApplicationsRulesEngineListView
+            v-if="activeTab === mapTabs.rulesEngine"
+            :edgeApplicationId="edgeApplicationId"
+            v-bind="props.rulesEngineServices"
+          />
+        </TabPanel>
+      </TabView>
+    </template>
+  </ContentBlock>
+</template>

From e329dda3abb26f8b7a68ef0975b5873a7fff757a Mon Sep 17 00:00:00 2001
From: paulosf0 <paulo.ferreira@azion.com>
Date: Wed, 10 Jan 2024 14:55:40 -0300
Subject: [PATCH 044/135] feat: fix after code review

---
 .../list-waf-rules-service.test.js            | 44 ++++++++++++++++++-
 1 file changed, 43 insertions(+), 1 deletion(-)

diff --git a/src/tests/services/waf-rules-services/list-waf-rules-service.test.js b/src/tests/services/waf-rules-services/list-waf-rules-service.test.js
index fa459846d..09c61e87a 100644
--- a/src/tests/services/waf-rules-services/list-waf-rules-service.test.js
+++ b/src/tests/services/waf-rules-services/list-waf-rules-service.test.js
@@ -25,6 +25,29 @@ const fixtures = {
     sql_injection_sensitivity: 'medium',
     unwanted_access: false,
     unwanted_access_sensitivity: 'medium'
+  },
+  wafRulesMockWithFalseActive: {
+    active: false,
+    bypass_addresses: [],
+    cross_site_scripting: false,
+    cross_site_scripting_sensitivity: 'medium',
+    directory_traversal: false,
+    directory_traversal_sensitivity: 'medium',
+    evading_tricks: false,
+    evading_tricks_sensitivity: 'medium',
+    file_upload: true,
+    file_upload_sensitivity: 'medium',
+    id: 4044,
+    identified_attack: false,
+    identified_attack_sensitivity: 'medium',
+    mode: 'counting',
+    name: 'test',
+    remote_file_inclusion: false,
+    remote_file_inclusion_sensitivity: 'medium',
+    sql_injection: false,
+    sql_injection_sensitivity: 'medium',
+    unwanted_access: false,
+    unwanted_access_sensitivity: 'medium'
   }
 }
 
@@ -62,7 +85,7 @@ describe('WafRulesServices', () => {
   it('should parsed correctly each waf rules', async () => {
     vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
       statusCode: 200,
-      body: { results: [fixtures.wafRulesMock] }
+      body: { results: [fixtures.wafRulesMock, fixtures.wafRulesMockWithFalseActive] }
     })
     const { sut } = makeSut()
 
@@ -87,6 +110,25 @@ describe('WafRulesServices', () => {
         sqlInjectionSensitivity: fixtures.wafRulesMock.sql_injection_sensitivity,
         unwantedAccessSensitivity: fixtures.wafRulesMock.unwanted_access_sensitivity,
         threatTypes: ['File upload']
+      },
+      {
+        id: fixtures.wafRulesMock.id,
+        active: {
+          content: 'Inactive',
+          severity: 'danger'
+        },
+        bypassAddresses: fixtures.wafRulesMock.bypass_addresses,
+        crossSiteScriptingSensitivity: fixtures.wafRulesMock.cross_site_scripting_sensitivity,
+        directoryTraversalSensitivity: fixtures.wafRulesMock.directory_traversal_sensitivity,
+        evadingTricksSensitivity: fixtures.wafRulesMock.evading_tricks_sensitivity,
+        fileUploadSensitivity: fixtures.wafRulesMock.file_upload_sensitivity,
+        identifiedAttackSensitivity: fixtures.wafRulesMock.identified_attack_sensitivity,
+        mode: fixtures.wafRulesMock.mode,
+        name: fixtures.wafRulesMock.name,
+        remoteFileInclusionSensitivity: fixtures.wafRulesMock.remote_file_inclusion_sensitivity,
+        sqlInjectionSensitivity: fixtures.wafRulesMock.sql_injection_sensitivity,
+        unwantedAccessSensitivity: fixtures.wafRulesMock.unwanted_access_sensitivity,
+        threatTypes: ['File upload']
       }
     ])
   })

From 20ad50f2ab929da606a6c155b109526f5a0bc638 Mon Sep 17 00:00:00 2001
From: paulosf0 <paulo.ferreira@azion.com>
Date: Wed, 10 Jan 2024 17:40:29 -0300
Subject: [PATCH 045/135] feat: add create waf rules page

---
 src/router/routes/waf-rules-routes/index.js   |  22 +-
 .../create-waf-rules-service.js               |  89 +++++
 src/services/waf-rules-services/index.js      |   4 +-
 .../create-waf-rules-service.test.js          | 136 +++++++
 src/views/WafRules/CreateView.vue             |  83 ++++
 .../FormFields/FormFieldsWafRules.vue         | 359 ++++++++++++++++++
 6 files changed, 691 insertions(+), 2 deletions(-)
 create mode 100644 src/services/waf-rules-services/create-waf-rules-service.js
 create mode 100644 src/tests/services/waf-rules-services/create-waf-rules-service.test.js
 create mode 100644 src/views/WafRules/CreateView.vue
 create mode 100644 src/views/WafRules/FormFields/FormFieldsWafRules.vue

diff --git a/src/router/routes/waf-rules-routes/index.js b/src/router/routes/waf-rules-routes/index.js
index bde3d8279..3c3f3fb6e 100644
--- a/src/router/routes/waf-rules-routes/index.js
+++ b/src/router/routes/waf-rules-routes/index.js
@@ -23,6 +23,26 @@ export const wafRulesRoutes = {
           }
         ]
       }
-    }
+    },
+    {
+      path: 'create',
+      name: 'create-waf-rules',
+      component: () => import('@views/WafRules/CreateView.vue'),
+      props: {
+        createWafRulesService: WafRulesService.createWafRulesService
+      },
+      meta: {
+        breadCrumbs: [
+          {
+            label: 'Waf Rules',
+            to: '/waf'
+          },
+          {
+            label: 'New WAF Rules',
+            to: '/waf/create'
+          }
+        ]
+      }
+    },
   ]
 }
diff --git a/src/services/waf-rules-services/create-waf-rules-service.js b/src/services/waf-rules-services/create-waf-rules-service.js
new file mode 100644
index 000000000..1160ccdab
--- /dev/null
+++ b/src/services/waf-rules-services/create-waf-rules-service.js
@@ -0,0 +1,89 @@
+import { AxiosHttpClientAdapter } from '../axios/AxiosHttpClientAdapter'
+import * as Errors from '@/services/axios/errors'
+import { makeWafRulesBaseUrl } from './make-waf-rules-base-url'
+
+export const createWafRulesService = async (payload) => {
+  let httpResponse = await AxiosHttpClientAdapter.request({
+    url: `${makeWafRulesBaseUrl()}/rulesets`,
+    method: 'POST',
+    body: adapt(payload)
+  })
+
+  return parseHttpResponse(httpResponse)
+}
+
+const adapt = (payload) => {
+  // eslint-disable-next-line no-console
+  return {
+    bypass_addresses: payload.bypassAddresses,
+    cross_site_scripting_sensitivity: payload.crossSiteScriptingSensitivity,
+    directory_traversal_sensitivity: payload.directoryTraversalSensitivity,
+    evading_tricks_sensitivity: payload.evadingTricksSensitivity,
+    file_upload_sensitivity: payload.fileUploadSensitivity,
+    id: payload.id,
+    identified_attack_sensitivity: payload.identifiedAttackSensitivity,
+    name: payload.name,
+    remote_file_inclusion_sensitivity: payload.remoteFileInclusionSensitivity,
+    sql_injection_sensitivity: payload.sqlInjectionSensitivity,
+    unwanted_access_sensitivity: payload.unwantedAccessSensitivity,
+    file_upload: payload.fileUpload,
+    evading_tricks: payload.evadingTricks,
+    unwanted_access: payload.unwantedAccess,
+    identified_attack: payload.identifiedAttack,
+    cross_site_scripting: payload.crossSiteScripting,
+    directory_traversal: payload.directoryTraversal,
+    remote_file_inclusion: payload.remoteFileInclusion,
+    sql_injection: payload.sqlInjection,
+    active: payload.active,
+  }
+}
+
+/**
+ * @param {Object} httpResponse - The HTTP response object.
+ * @param {Object} httpResponse.body - The response body.
+ * @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 201:
+      return {
+        feedback: 'Your waf rule has been created',
+        urlToEditView: `/waf`
+      }
+    case 400:
+      const apiError = extractApiError(httpResponse)
+      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
+  }
+}
+
+/**
+ * @param {Object} errorSchema - The error schema.
+ * @param {string} key - The error key of error schema.
+ * @returns {string|undefined} The result message based on the status code.
+ */
+const extractErrorKey = (errorSchema, key) => {
+  return errorSchema[key]?.[0]
+}
+
+/**
+ * @param {Object} httpResponse - The HTTP response object.
+ * @param {Object} httpResponse.body - The response body.
+ * @returns {string} The result message based on the status code.
+ */
+const extractApiError = (httpResponse) => {
+  const errorMessage = extractErrorKey(httpResponse.body, 'detail')
+
+  return errorMessage
+}
diff --git a/src/services/waf-rules-services/index.js b/src/services/waf-rules-services/index.js
index 8acd2986f..cb228d508 100644
--- a/src/services/waf-rules-services/index.js
+++ b/src/services/waf-rules-services/index.js
@@ -1,4 +1,6 @@
 import { listWafRulesService } from './list-waf-rules-service'
 import { deleteWafRulesService } from './delete-waf-rules-service'
+import { createWafRulesService } from './create-waf-rules-service'
 
-export { listWafRulesService, deleteWafRulesService }
+
+export { listWafRulesService, deleteWafRulesService, createWafRulesService }
diff --git a/src/tests/services/waf-rules-services/create-waf-rules-service.test.js b/src/tests/services/waf-rules-services/create-waf-rules-service.test.js
new file mode 100644
index 000000000..77c7fa2c6
--- /dev/null
+++ b/src/tests/services/waf-rules-services/create-waf-rules-service.test.js
@@ -0,0 +1,136 @@
+import { AxiosHttpClientAdapter } from '@/services/axios/AxiosHttpClientAdapter'
+import * as Errors from '@/services/axios/errors'
+import { createWafRulesService } from '@/services/waf-rules-services'
+import { describe, expect, it, vi } from 'vitest'
+
+const fixtures = {
+  wafRulesMock: {
+    crossSiteScriptingSensitivity: "medium",
+    directoryTraversalSensitivity: "medium",
+    evadingTricksSensitivity: "medium",
+    fileUploadSensitivity: "medium",
+    identifiedAttackSensitivity: "medium",
+    remoteFileInclusionSensitivity: "medium",
+    sqlInjectionSensitivity: "medium",
+    unwantedAccessSensitivity: "medium",
+    fileUpload: true,
+    evadingTricks: true,
+    unwantedAccess: true,
+    identifiedAttack: true,
+    crossSiteScripting: true,
+    directoryTraversal: true,
+    remoteFileInclusion: true,
+    sqlInjection: true,
+    active: false,
+    name: "test"
+  }
+}
+
+const makeSut = () => {
+  const sut = createWafRulesService
+
+  return {
+    sut
+  }
+}
+
+describe('WafRulesServices', () => {
+  it('should call API with correct params', async () => {
+    const requestSpy = vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+      statusCode: 201,
+      body: fixtures.wafRulesMock
+    })
+    const { sut } = makeSut()
+    await sut(fixtures.wafRulesMock)
+
+    expect(requestSpy).toHaveBeenCalledWith({
+      url: 'v3/waf/rulesets',
+      method: 'POST',
+      body: {
+        bypass_addresses: fixtures.wafRulesMock.bypassAddresses,
+        cross_site_scripting_sensitivity: fixtures.wafRulesMock.crossSiteScriptingSensitivity,
+        directory_traversal_sensitivity: fixtures.wafRulesMock.directoryTraversalSensitivity,
+        evading_tricks_sensitivity: fixtures.wafRulesMock.evadingTricksSensitivity,
+        file_upload_sensitivity: fixtures.wafRulesMock.fileUploadSensitivity,
+        id: fixtures.wafRulesMock.id,
+        identified_attack_sensitivity: fixtures.wafRulesMock.identifiedAttackSensitivity,
+        name: fixtures.wafRulesMock.name,
+        remote_file_inclusion_sensitivity: fixtures.wafRulesMock.remoteFileInclusionSensitivity,
+        sql_injection_sensitivity: fixtures.wafRulesMock.sqlInjectionSensitivity,
+        unwanted_access_sensitivity: fixtures.wafRulesMock.unwantedAccessSensitivity,
+        file_upload: fixtures.wafRulesMock.fileUpload,
+        evading_tricks: fixtures.wafRulesMock.evadingTricks,
+        unwanted_access: fixtures.wafRulesMock.unwantedAccess,
+        identified_attack: fixtures.wafRulesMock.identifiedAttack,
+        cross_site_scripting: fixtures.wafRulesMock.crossSiteScripting,
+        directory_traversal: fixtures.wafRulesMock.directoryTraversal,
+        remote_file_inclusion: fixtures.wafRulesMock.remoteFileInclusion,
+        sql_injection: fixtures.wafRulesMock.sqlInjection,
+        active: fixtures.wafRulesMock.active,
+      }
+    })
+  })
+
+  it('should return a feedback message on successfully created', async () => {
+    vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+      statusCode: 201,
+      body: fixtures.wafRulesMock
+    })
+    const { sut } = makeSut()
+
+    const data = await sut(fixtures.wafRulesMock)
+
+    expect(data.feedback).toBe('Your waf rule has been created')
+  })
+
+  it('Should return an API error for an 400 response status', async () => {
+    const errorKey = 'detail'
+    const apiErrorMock = 'This field is required.'
+    vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+      statusCode: 400,
+      body: {
+        [errorKey]: [apiErrorMock]
+      }
+    })
+    const { sut } = makeSut()
+
+    const feedbackMessage = sut(fixtures.wafRulesMock)
+
+    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
+      })
+      const { sut } = makeSut()
+
+      const response = sut(fixtures.wafRulesMock)
+
+      expect(response).rejects.toBe(expectedError)
+    }
+  )
+})
diff --git a/src/views/WafRules/CreateView.vue b/src/views/WafRules/CreateView.vue
new file mode 100644
index 000000000..62eb8ab8c
--- /dev/null
+++ b/src/views/WafRules/CreateView.vue
@@ -0,0 +1,83 @@
+<template>
+  <ContentBlock>
+    <template #heading>
+      <PageHeadingBlock pageTitle="Create WAF Rules" />
+    </template>
+    <template #content>
+      <CreateFormBlock
+        :createService="props.createWafRulesService"
+        :schema="validationSchema"
+        :initialValues="initialValues"
+      >
+        <template #form>
+          <FormFieldsWafRules />
+        </template>
+        <template #action-bar="{ onSubmit, formValid, onCancel, loading }">
+          <ActionBarTemplate
+            @onSubmit="onSubmit"
+            @onCancel="onCancel"
+            :loading="loading"
+            :submitDisabled="!formValid"
+          />
+        </template>
+      </CreateFormBlock>
+    </template>
+  </ContentBlock>
+</template>
+<script setup>
+  import CreateFormBlock from '@/templates/create-form-block'
+  import ContentBlock from '@/templates/content-block'
+  import PageHeadingBlock from '@/templates/page-heading-block'
+  import ActionBarTemplate from '@/templates/action-bar-block/action-bar-with-teleport'
+  import FormFieldsWafRules from './FormFields/FormFieldsWafRules.vue'
+  import * as yup from 'yup'
+
+  const props = defineProps({
+    createWafRulesService: {
+      type: Function,
+      required: true
+    }
+  })
+
+  const validationSchema = yup.object({
+    name: yup.string().required(),
+    crossSiteScriptingSensitivity: yup.string(),
+    directoryTraversalSensitivity: yup.string(),
+    evadingTricksSensitivity: yup.string(),
+    fileUploadSensitivity: yup.string(),
+    identifiedAttackSensitivity: yup.string(),
+    remoteFileInclusionSensitivity: yup.string(),
+    sqlInjectionSensitivity: yup.string(),
+    unwantedAccessSensitivity: yup.string(),
+    active: yup.boolean(),
+    fileUpload: yup.boolean(),
+    evadingTricks: yup.boolean(),
+    unwantedAccess: yup.boolean(),
+    identifiedAttack: yup.boolean(),
+    crossSiteScripting: yup.boolean(),
+    directoryTraversal: yup.boolean(),
+    remoteFileInclusion: yup.boolean(),
+    sqlInjection: yup.boolean(),
+  })
+
+
+  const initialValues = {
+    crossSiteScriptingSensitivity: 'medium',
+    directoryTraversalSensitivity: 'medium',
+    evadingTricksSensitivity: 'medium',
+    fileUploadSensitivity: 'medium',
+    identifiedAttackSensitivity: 'medium',
+    remoteFileInclusionSensitivity: 'medium',
+    sqlInjectionSensitivity: 'medium',
+    unwantedAccessSensitivity: 'medium',
+    fileUpload: true,
+    evadingTricks: true,
+    unwantedAccess: true,
+    identifiedAttack: true,
+    crossSiteScripting: true,
+    directoryTraversal: true,
+    remoteFileInclusion: true,
+    sqlInjection: true,
+    active: true,
+  }
+</script>
diff --git a/src/views/WafRules/FormFields/FormFieldsWafRules.vue b/src/views/WafRules/FormFields/FormFieldsWafRules.vue
new file mode 100644
index 000000000..43b3a9716
--- /dev/null
+++ b/src/views/WafRules/FormFields/FormFieldsWafRules.vue
@@ -0,0 +1,359 @@
+<script setup>
+  import { ref } from 'vue'
+  import FormHorizontal from '@/templates/create-form-block/form-horizontal'
+  import InputText from 'primevue/inputtext'
+  import InputSwitch from 'primevue/inputswitch'
+  import Card from 'primevue/card'
+  import Dropdown from 'primevue/dropdown'
+
+  import { useField } from 'vee-validate'
+  defineOptions({ name: 'form-fields-variables' })
+
+  const { value: name, errorMessage: nameError } = useField('name')
+  const { value: active } = useField('active')
+  const { value: crossSiteScriptingSensitivity } = useField('crossSiteScriptingSensitivity')
+  const { value: directoryTraversalSensitivity } = useField('directoryTraversalSensitivity')
+  const { value: evadingTricksSensitivity } = useField('evadingTricksSensitivity')
+  const { value: fileUploadSensitivity } = useField('fileUploadSensitivity')
+  const { value: identifiedAttackSensitivity } = useField('identifiedAttackSensitivity')
+  const { value: remoteFileInclusionSensitivity } = useField('remoteFileInclusionSensitivity')
+  const { value: sqlInjectionSensitivity } = useField('sqlInjectionSensitivity')
+  const { value: unwantedAccessSensitivity } = useField('unwantedAccessSensitivity')
+  const { value: fileUpload } = useField('fileUpload')
+  const { value: evadingTricks } = useField('evadingTricks')
+  const { value: unwantedAccess } = useField('unwantedAccess')
+  const { value: identifiedAttack } = useField('identifiedAttack')
+  const { value: crossSiteScripting } = useField('crossSiteScripting')
+  const { value: directoryTraversal } = useField('directoryTraversal')
+  const { value: remoteFileInclusion } = useField('remoteFileInclusion')
+  const { value: sqlInjection } = useField('sqlInjection')
+
+  const sensitivity = ref([
+    { name: 'Sensitivity Highest', value: 'highest' },
+    { name: 'Sensitivity High', value: 'high' },
+    { name: 'Sensitivity Medium', value: 'medium' },
+    { name: 'Sensitivity Low', value: 'low' },
+    { name: 'Sensitivity Lowest', value: 'lowest' }
+  ])
+</script>
+
+<template>
+  <FormHorizontal
+    title="General"
+    description=""
+  >
+    <template #inputs>
+      {{ active }}
+      <div class="flex flex-col sm:max-w-lg w-full gap-2">
+        <label
+          for="name"
+          class="text-color text-base font-medium"
+          >Name *
+        </label>
+        <InputText
+          placeholder=""
+          v-model="name"
+          type="text"
+          id="name"
+          :class="{ 'p-invalid': nameError }"
+        />
+        <small
+          v-if="nameError"
+          class="p-error text-xs font-normal leading-tight"
+        >
+          {{ nameError }}
+        </small>
+      </div>
+    </template>
+  </FormHorizontal>
+  <FormHorizontal
+    title="WAF Rule Set"
+    description='Create a new WAF Rule Set to use on your Edge Firewall rules. To apply a WAF Rule Set, you need to add it into a Rule using the behavior "Set WAF Rule Set" in your Edge Firewall > Rules Engine.'
+  >
+    <template #inputs>
+      <Card
+        :pt="{
+          body: { class: 'p-4' },
+          title: { class: 'flex justify-between  text-base m-0 font-medium' },
+          subtitle: {
+            class: 'text-sm font-normal text-color-secondary m-0 pr-0 md:pr-[2.5rem]'
+          }
+        }"
+      >
+        <template #title>
+          <span class="text-base">SQL Injection</span>
+          <InputSwitch
+            id="secret"
+            v-model="sqlInjection"
+          />
+        </template>
+        <template #subtitle>
+          Detect attempts to insert a SQL query via the input data from the client to the
+          application.
+        </template>
+        <template #content>
+          <div class="flex flex-col w-full sm:max-w-xs gap-2 mt-3">
+            <Dropdown
+              id=""
+              v-model="sqlInjectionSensitivity"
+              :options="sensitivity"
+              optionLabel="name"
+              optionValue="value"
+              class="w-full"
+              placeholder=""
+            />
+          </div>
+        </template>
+      </Card>
+
+      <Card
+        :pt="{
+          body: { class: 'p-4' },
+          title: { class: 'flex justify-between  text-base m-0 font-medium' },
+          subtitle: {
+            class: 'text-sm font-normal text-color-secondary m-0 pr-0 md:pr-[2.5rem]'
+          }
+        }"
+      >
+        <template #title>
+          <span class="text-base">Remote File Inclusions (RFI)</span>
+          <InputSwitch
+            id="secret"
+            v-model="remoteFileInclusion"
+          />
+        </template>
+        <template #subtitle>
+          Detect attempts to include a remote file, usually through a script on the web server.
+        </template>
+        <template #content>
+          <div class="flex flex-col w-full sm:max-w-xs gap-2 mt-3">
+            <Dropdown
+              id=""
+              v-model="remoteFileInclusionSensitivity"
+              :options="sensitivity"
+              optionLabel="name"
+              optionValue="value"
+              class="w-full"
+              placeholder=""
+            />
+          </div>
+        </template>
+      </Card>
+
+      <Card
+        :pt="{
+          body: { class: 'p-4' },
+          title: { class: 'flex justify-between  text-base m-0 font-medium' },
+          subtitle: {
+            class: 'text-sm font-normal text-color-secondary m-0 pr-0 md:pr-[2.5rem]'
+          }
+        }"
+      >
+        <template #title>
+          <span class="text-base">Directory Traversal</span>
+          <InputSwitch
+            id="secret"
+            v-model="directoryTraversal"
+          />
+        </template>
+        <template #subtitle>
+          Prevent exploiting insufficient security sanitizing of user-supplied input file names, so
+          that characters representing "traverse to parent directory" are passed through to the file
+          APIs.
+        </template>
+        <template #content>
+          <div class="flex flex-col w-full sm:max-w-xs gap-2 mt-3">
+            <Dropdown
+              id=""
+              v-model="directoryTraversalSensitivity"
+              :options="sensitivity"
+              optionLabel="name"
+              optionValue="value"
+              class="w-full"
+              placeholder=""
+            />
+          </div>
+        </template>
+      </Card>
+
+      <Card
+        :pt="{
+          body: { class: 'p-4' },
+          title: { class: 'flex justify-between  text-base m-0 font-medium' },
+          subtitle: {
+            class: 'text-sm font-normal text-color-secondary m-0 pr-0 md:pr-[2.5rem]'
+          }
+        }"
+      >
+        <template #title>
+          <span class="text-base">Cross-Site Scripting (XSS)</span>
+          <InputSwitch
+            id="secret"
+            v-model="crossSiteScripting"
+          />
+        </template>
+        <template #subtitle>
+          Detect attempts to inject client-side scripts into web pages viewed by your visitors.
+        </template>
+        <template #content>
+          <div class="flex flex-col w-full sm:max-w-xs gap-2 mt-3">
+            <Dropdown
+              id=""
+              v-model="crossSiteScriptingSensitivity"
+              :options="sensitivity"
+              optionLabel="name"
+              optionValue="value"
+              class="w-full"
+              placeholder=""
+            />
+          </div>
+        </template>
+      </Card>
+      <Card
+        :pt="{
+          body: { class: 'p-4' },
+          title: { class: 'flex justify-between  text-base m-0 font-medium' },
+          subtitle: {
+            class: 'text-sm font-normal text-color-secondary m-0 pr-0 md:pr-[2.5rem]'
+          }
+        }"
+      >
+        <template #title>
+          <span class="text-base">File Upload</span>
+          <InputSwitch
+            id="secret"
+            v-model="fileUpload"
+          />
+        </template>
+        <template #subtitle> Detect attempts to upload files. </template>
+        <template #content>
+          <div class="flex flex-col w-full sm:max-w-xs gap-2 mt-3">
+            <Dropdown
+              id=""
+              v-model="fileUploadSensitivity"
+              :options="sensitivity"
+              optionLabel="name"
+              optionValue="value"
+              class="w-full"
+              placeholder=""
+            />
+          </div>
+        </template>
+      </Card>
+
+      <Card
+        :pt="{
+          body: { class: 'p-4' },
+          title: { class: 'flex justify-between  text-base m-0 font-medium' },
+          subtitle: {
+            class: 'text-sm font-normal text-color-secondary m-0 pr-0 md:pr-[2.5rem]'
+          }
+        }"
+      >
+        <template #title>
+          <span class="text-base">Evading Tricks</span>
+          <InputSwitch
+            id="secret"
+            v-model="evadingTricks"
+          />
+        </template>
+        <template #subtitle> Prevent the use of encoding tricks to evade protection. </template>
+        <template #content>
+          <div class="flex flex-col w-full sm:max-w-xs gap-2 mt-3">
+            <Dropdown
+              id=""
+              v-model="evadingTricksSensitivity"
+              :options="sensitivity"
+              optionLabel="name"
+              optionValue="value"
+              class="w-full"
+              placeholder=""
+            />
+          </div>
+        </template>
+      </Card>
+      <Card
+        :pt="{
+          body: { class: 'p-4' },
+          title: { class: 'flex justify-between  text-base m-0 font-medium' },
+          subtitle: {
+            class: 'text-sm font-normal text-color-secondary m-0 pr-0 md:pr-[2.5rem]'
+          }
+        }"
+      >
+        <template #title>
+          <span class="text-base">Unwanted Access</span>
+          <InputSwitch
+            id="secret"
+            v-model="unwantedAccess"
+          />
+        </template>
+        <template #subtitle>
+          Detect attempts to access vulnerable or administrative pages and the use of security
+          scanning bots and tools.
+        </template>
+        <template #content>
+          <div class="flex flex-col w-full sm:max-w-xs gap-2 mt-3">
+            <Dropdown
+              id=""
+              v-model="unwantedAccessSensitivity"
+              :options="sensitivity"
+              optionLabel="name"
+              optionValue="value"
+              class="w-full"
+              placeholder=""
+            />
+          </div>
+        </template>
+      </Card>
+      <Card
+        :pt="{
+          body: { class: 'p-4' },
+          title: { class: 'flex justify-between  text-base m-0 font-medium' },
+          subtitle: {
+            class: 'text-sm font-normal text-color-secondary m-0 pr-0 md:pr-[2.5rem]'
+          }
+        }"
+      >
+        <template #title>
+          <span class="text-base">Identified Attack</span>
+          <InputSwitch
+            id="secret"
+            v-model="identifiedAttack"
+          />
+        </template>
+        <template #subtitle>
+          Prevent common vulnerabilities by blocking known attacks in applications and servers.
+        </template>
+        <template #content>
+          <div class="flex flex-col w-full sm:max-w-xs gap-2 mt-3">
+            <Dropdown
+              id=""
+              v-model="identifiedAttackSensitivity"
+              :options="sensitivity"
+              optionLabel="name"
+              optionValue="value"
+              class="w-full"
+              placeholder=""
+            />
+          </div>
+        </template>
+      </Card>
+    </template>
+  </FormHorizontal>
+  <form-horizontal title="Status">
+    <template #inputs>
+      <div class="flex gap-3 items-center">
+        <InputSwitch
+          id="active"
+          v-model="active"
+        />
+        <label
+          for="active"
+          class="text-base"
+          >Active</label
+        >
+      </div>
+    </template>
+  </form-horizontal>
+</template>

From 8c7f19a046fba13cdac4df8a211625b8904ffadd Mon Sep 17 00:00:00 2001
From: paulosf0 <paulo.ferreira@azion.com>
Date: Wed, 10 Jan 2024 17:48:53 -0300
Subject: [PATCH 046/135] feat: code format by husky

---
 .../extended-components/_picklist.scss        |  2 +-
 .../extended-components/_picklist.scss        |  2 +-
 src/router/routes/waf-rules-routes/index.js   |  2 +-
 .../create-waf-rules-service.js               |  2 +-
 src/services/waf-rules-services/index.js      |  1 -
 .../list-waf-rules-service.js                 |  4 ----
 .../create-waf-rules-service.test.js          | 20 +++++++++----------
 src/views/WafRules/CreateView.vue             |  5 ++---
 8 files changed, 16 insertions(+), 22 deletions(-)

diff --git a/src/assets/themes/scss/themes/azion-dark/extended-components/_picklist.scss b/src/assets/themes/scss/themes/azion-dark/extended-components/_picklist.scss
index fdaf33c67..cd16a2038 100644
--- a/src/assets/themes/scss/themes/azion-dark/extended-components/_picklist.scss
+++ b/src/assets/themes/scss/themes/azion-dark/extended-components/_picklist.scss
@@ -15,7 +15,7 @@
     .p-picklist-item {
       padding: 0 0.5rem !important;
       font-size: 0.875rem;
-      min-height: 2.375rem  !important;
+      min-height: 2.375rem !important;
       border-radius: $borderRadius;
       display: flex;
       align-items: center;
diff --git a/src/assets/themes/scss/themes/azion-light/extended-components/_picklist.scss b/src/assets/themes/scss/themes/azion-light/extended-components/_picklist.scss
index fdaf33c67..cd16a2038 100644
--- a/src/assets/themes/scss/themes/azion-light/extended-components/_picklist.scss
+++ b/src/assets/themes/scss/themes/azion-light/extended-components/_picklist.scss
@@ -15,7 +15,7 @@
     .p-picklist-item {
       padding: 0 0.5rem !important;
       font-size: 0.875rem;
-      min-height: 2.375rem  !important;
+      min-height: 2.375rem !important;
       border-radius: $borderRadius;
       display: flex;
       align-items: center;
diff --git a/src/router/routes/waf-rules-routes/index.js b/src/router/routes/waf-rules-routes/index.js
index 3c3f3fb6e..a042647bc 100644
--- a/src/router/routes/waf-rules-routes/index.js
+++ b/src/router/routes/waf-rules-routes/index.js
@@ -43,6 +43,6 @@ export const wafRulesRoutes = {
           }
         ]
       }
-    },
+    }
   ]
 }
diff --git a/src/services/waf-rules-services/create-waf-rules-service.js b/src/services/waf-rules-services/create-waf-rules-service.js
index 1160ccdab..47763f68d 100644
--- a/src/services/waf-rules-services/create-waf-rules-service.js
+++ b/src/services/waf-rules-services/create-waf-rules-service.js
@@ -34,7 +34,7 @@ const adapt = (payload) => {
     directory_traversal: payload.directoryTraversal,
     remote_file_inclusion: payload.remoteFileInclusion,
     sql_injection: payload.sqlInjection,
-    active: payload.active,
+    active: payload.active
   }
 }
 
diff --git a/src/services/waf-rules-services/index.js b/src/services/waf-rules-services/index.js
index cb228d508..fdf980892 100644
--- a/src/services/waf-rules-services/index.js
+++ b/src/services/waf-rules-services/index.js
@@ -2,5 +2,4 @@ import { listWafRulesService } from './list-waf-rules-service'
 import { deleteWafRulesService } from './delete-waf-rules-service'
 import { createWafRulesService } from './create-waf-rules-service'
 
-
 export { listWafRulesService, deleteWafRulesService, createWafRulesService }
diff --git a/src/services/waf-rules-services/list-waf-rules-service.js b/src/services/waf-rules-services/list-waf-rules-service.js
index 93ddb545c..25206afdb 100644
--- a/src/services/waf-rules-services/list-waf-rules-service.js
+++ b/src/services/waf-rules-services/list-waf-rules-service.js
@@ -26,7 +26,6 @@ const parseStatusData = (status) => {
 }
 
 const parseThreatTypes = (waf) => {
-
   const threatTypes = {
     file_upload: 'File upload',
     evading_tricks: 'Evading Tricks',
@@ -38,7 +37,6 @@ const parseThreatTypes = (waf) => {
     sql_injection: 'SQL Injection'
   }
 
-
   const threatTypesArray = []
   for (const key in threatTypes) {
     const threat = threatTypes[key]
@@ -48,7 +46,6 @@ const parseThreatTypes = (waf) => {
   }
 
   return threatTypesArray
-
 }
 
 const adapt = (httpResponse) => {
@@ -58,7 +55,6 @@ const adapt = (httpResponse) => {
    * like other andpoints.
    */
 
- 
   const isArray = Array.isArray(httpResponse.body.results)
 
   const parsedWafRules = isArray
diff --git a/src/tests/services/waf-rules-services/create-waf-rules-service.test.js b/src/tests/services/waf-rules-services/create-waf-rules-service.test.js
index 77c7fa2c6..8dec1d463 100644
--- a/src/tests/services/waf-rules-services/create-waf-rules-service.test.js
+++ b/src/tests/services/waf-rules-services/create-waf-rules-service.test.js
@@ -5,14 +5,14 @@ import { describe, expect, it, vi } from 'vitest'
 
 const fixtures = {
   wafRulesMock: {
-    crossSiteScriptingSensitivity: "medium",
-    directoryTraversalSensitivity: "medium",
-    evadingTricksSensitivity: "medium",
-    fileUploadSensitivity: "medium",
-    identifiedAttackSensitivity: "medium",
-    remoteFileInclusionSensitivity: "medium",
-    sqlInjectionSensitivity: "medium",
-    unwantedAccessSensitivity: "medium",
+    crossSiteScriptingSensitivity: 'medium',
+    directoryTraversalSensitivity: 'medium',
+    evadingTricksSensitivity: 'medium',
+    fileUploadSensitivity: 'medium',
+    identifiedAttackSensitivity: 'medium',
+    remoteFileInclusionSensitivity: 'medium',
+    sqlInjectionSensitivity: 'medium',
+    unwantedAccessSensitivity: 'medium',
     fileUpload: true,
     evadingTricks: true,
     unwantedAccess: true,
@@ -22,7 +22,7 @@ const fixtures = {
     remoteFileInclusion: true,
     sqlInjection: true,
     active: false,
-    name: "test"
+    name: 'test'
   }
 }
 
@@ -66,7 +66,7 @@ describe('WafRulesServices', () => {
         directory_traversal: fixtures.wafRulesMock.directoryTraversal,
         remote_file_inclusion: fixtures.wafRulesMock.remoteFileInclusion,
         sql_injection: fixtures.wafRulesMock.sqlInjection,
-        active: fixtures.wafRulesMock.active,
+        active: fixtures.wafRulesMock.active
       }
     })
   })
diff --git a/src/views/WafRules/CreateView.vue b/src/views/WafRules/CreateView.vue
index 62eb8ab8c..163222e11 100644
--- a/src/views/WafRules/CreateView.vue
+++ b/src/views/WafRules/CreateView.vue
@@ -57,10 +57,9 @@
     crossSiteScripting: yup.boolean(),
     directoryTraversal: yup.boolean(),
     remoteFileInclusion: yup.boolean(),
-    sqlInjection: yup.boolean(),
+    sqlInjection: yup.boolean()
   })
 
-
   const initialValues = {
     crossSiteScriptingSensitivity: 'medium',
     directoryTraversalSensitivity: 'medium',
@@ -78,6 +77,6 @@
     directoryTraversal: true,
     remoteFileInclusion: true,
     sqlInjection: true,
-    active: true,
+    active: true
   }
 </script>

From 6e23911244a1864b5c4608ff771e95971fd6dfa1 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Wed, 10 Jan 2024 22:40:59 +0000
Subject: [PATCH 047/135] chore(deps): bump follow-redirects from 1.15.2 to
 1.15.4

Bumps [follow-redirects](https://github.com/follow-redirects/follow-redirects) from 1.15.2 to 1.15.4.
- [Release notes](https://github.com/follow-redirects/follow-redirects/releases)
- [Commits](https://github.com/follow-redirects/follow-redirects/compare/v1.15.2...v1.15.4)

---
updated-dependencies:
- dependency-name: follow-redirects
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 yarn.lock | 13 ++++---------
 1 file changed, 4 insertions(+), 9 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 6c5455cb1..8bb7358a5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2482,15 +2482,10 @@ flatted@^3.2.7:
   resolved "https://registry.npmjs.org/flatted/-/flatted-3.2.9.tgz"
   integrity sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ==
 
-follow-redirects@^1.14.9:
-  version "1.15.2"
-  resolved "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz"
-  integrity sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==
-
-follow-redirects@^1.15.0:
-  version "1.15.3"
-  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.3.tgz#fe2f3ef2690afce7e82ed0b44db08165b207123a"
-  integrity sha512-1VzOtuEM8pC9SFU1E+8KfTjZyMztRsgEfwQl44z8A25uy13jSzTj6dyK2Df52iV0vgHCfBwLhDWevLn95w5v6Q==
+follow-redirects@^1.14.9, follow-redirects@^1.15.0:
+  version "1.15.4"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.4.tgz#cdc7d308bf6493126b17ea2191ea0ccf3e535adf"
+  integrity sha512-Cr4D/5wlrb0z9dgERpUL3LrmPKVDsETIJhaCMeDfuFYcqa5bldGV6wBsAN6X/vxlXQtFBMrXdXxdL8CbDTGniw==
 
 forever-agent@~0.6.1:
   version "0.6.1"

From cbd2bd6ccd38610d3cf1bbb8e94e10188326c17e Mon Sep 17 00:00:00 2001
From: paulosf0 <paulo.ferreira@azion.com>
Date: Thu, 11 Jan 2024 09:48:31 -0300
Subject: [PATCH 048/135] refactor: remove {{ active }}

---
 src/services/waf-rules-services/create-waf-rules-service.js | 1 -
 src/views/WafRules/FormFields/FormFieldsWafRules.vue        | 1 -
 2 files changed, 2 deletions(-)

diff --git a/src/services/waf-rules-services/create-waf-rules-service.js b/src/services/waf-rules-services/create-waf-rules-service.js
index 47763f68d..45b5d4b37 100644
--- a/src/services/waf-rules-services/create-waf-rules-service.js
+++ b/src/services/waf-rules-services/create-waf-rules-service.js
@@ -13,7 +13,6 @@ export const createWafRulesService = async (payload) => {
 }
 
 const adapt = (payload) => {
-  // eslint-disable-next-line no-console
   return {
     bypass_addresses: payload.bypassAddresses,
     cross_site_scripting_sensitivity: payload.crossSiteScriptingSensitivity,
diff --git a/src/views/WafRules/FormFields/FormFieldsWafRules.vue b/src/views/WafRules/FormFields/FormFieldsWafRules.vue
index 43b3a9716..3e188ba06 100644
--- a/src/views/WafRules/FormFields/FormFieldsWafRules.vue
+++ b/src/views/WafRules/FormFields/FormFieldsWafRules.vue
@@ -43,7 +43,6 @@
     description=""
   >
     <template #inputs>
-      {{ active }}
       <div class="flex flex-col sm:max-w-lg w-full gap-2">
         <label
           for="name"

From 7e6dc75bc9b4d54ceff67a8d15e2e381c2a2e96b Mon Sep 17 00:00:00 2001
From: paulosf0 <paulo.ferreira@azion.com>
Date: Thu, 11 Jan 2024 11:28:49 -0300
Subject: [PATCH 049/135] feat: add disebled in active waf

---
 src/views/WafRules/FormFields/FormFieldsWafRules.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/views/WafRules/FormFields/FormFieldsWafRules.vue b/src/views/WafRules/FormFields/FormFieldsWafRules.vue
index 3e188ba06..33ea2fd3e 100644
--- a/src/views/WafRules/FormFields/FormFieldsWafRules.vue
+++ b/src/views/WafRules/FormFields/FormFieldsWafRules.vue
@@ -346,6 +346,7 @@
         <InputSwitch
           id="active"
           v-model="active"
+          :disabled="true"
         />
         <label
           for="active"

From 07e69d7e51d04bd23d4569d9b89d5692690a11c8 Mon Sep 17 00:00:00 2001
From: Bru Andrade <119969414+bru-andrade@users.noreply.github.com>
Date: Thu, 11 Jan 2024 12:28:59 -0300
Subject: [PATCH 050/135] Apply suggestions from code review

Co-authored-by: hannah <109289700+hannah-sk@users.noreply.github.com>
---
 .../FormFields/FormFieldsCreateDigitalCertificates.vue | 10 +++++-----
 .../FormFields/FormFieldsEditDigitalCertificates.vue   |  2 +-
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/views/DigitalCertificates/FormFields/FormFieldsCreateDigitalCertificates.vue b/src/views/DigitalCertificates/FormFields/FormFieldsCreateDigitalCertificates.vue
index 8ac6d1eef..d42a3a766 100644
--- a/src/views/DigitalCertificates/FormFields/FormFieldsCreateDigitalCertificates.vue
+++ b/src/views/DigitalCertificates/FormFields/FormFieldsCreateDigitalCertificates.vue
@@ -109,7 +109,7 @@
           }"
         >
           <template #title>
-            <span class="text-base"> Import a certificate</span>
+            <span class="text-base">Import a certificate</span>
             <RadioButton
               v-model="certificateType"
               inputId="certificateType2"
@@ -117,7 +117,7 @@
               :value="certificateTypes.EDGE_CERTIFICATE_UPLOAD"
             />
           </template>
-          <template #subtitle> Upload a PEM certificate and private key. </template>
+          <template #subtitle>Upload a PEM certificate and private key. </template>
         </Card>
 
         <Card
@@ -130,7 +130,7 @@
           }"
         >
           <template #title>
-            <span class="text-base"> Request a certificate </span>
+            <span class="text-base">Request a certificate</span>
             <RadioButton
               v-model="certificateType"
               inputId="certificateType1"
@@ -153,7 +153,7 @@
           }"
         >
           <template #title>
-            <span class="text-base"> Import a Trusted CA certificate </span>
+            <span class="text-base">Import a Trusted CA certificate</span>
             <RadioButton
               v-model="certificateType"
               inputId="certificateType3"
@@ -213,7 +213,7 @@
 
   <FormHorizontal
     title="Request a Certificate"
-    description="Generate a CSR and private key and submit to a certificate authority to generate a digital certificate."
+    description="Generate a CSR and submit it to a certificate authority to generate a digital certificate."
     v-if="isEdgeCSRCertificate"
   >
     <template #inputs>
diff --git a/src/views/DigitalCertificates/FormFields/FormFieldsEditDigitalCertificates.vue b/src/views/DigitalCertificates/FormFields/FormFieldsEditDigitalCertificates.vue
index a614c4d31..e0d40532e 100644
--- a/src/views/DigitalCertificates/FormFields/FormFieldsEditDigitalCertificates.vue
+++ b/src/views/DigitalCertificates/FormFields/FormFieldsEditDigitalCertificates.vue
@@ -43,7 +43,7 @@
 <template>
   <FormHorizontal
     v-if="csr"
-    title=" Update CSR "
+    title="Update CSR"
     description="Submit the CSR to a certificate authority. Once the certificate is signed,
         paste the PEM-encoded certificate in the respective field."
   >

From 7b14bfbb88abdc3a904c45ac8e535e5b960f2a46 Mon Sep 17 00:00:00 2001
From: paulosf0 <paulo.ferreira@azion.com>
Date: Thu, 11 Jan 2024 14:15:46 -0300
Subject: [PATCH 051/135] feat: remove id and placeholder of dropdown

---
 .../WafRules/FormFields/FormFieldsWafRules.vue | 18 +-----------------
 1 file changed, 1 insertion(+), 17 deletions(-)

diff --git a/src/views/WafRules/FormFields/FormFieldsWafRules.vue b/src/views/WafRules/FormFields/FormFieldsWafRules.vue
index 33ea2fd3e..a94efaa49 100644
--- a/src/views/WafRules/FormFields/FormFieldsWafRules.vue
+++ b/src/views/WafRules/FormFields/FormFieldsWafRules.vue
@@ -50,7 +50,7 @@
           >Name *
         </label>
         <InputText
-          placeholder=""
+          
           v-model="name"
           type="text"
           id="name"
@@ -93,13 +93,11 @@
         <template #content>
           <div class="flex flex-col w-full sm:max-w-xs gap-2 mt-3">
             <Dropdown
-              id=""
               v-model="sqlInjectionSensitivity"
               :options="sensitivity"
               optionLabel="name"
               optionValue="value"
               class="w-full"
-              placeholder=""
             />
           </div>
         </template>
@@ -127,13 +125,11 @@
         <template #content>
           <div class="flex flex-col w-full sm:max-w-xs gap-2 mt-3">
             <Dropdown
-              id=""
               v-model="remoteFileInclusionSensitivity"
               :options="sensitivity"
               optionLabel="name"
               optionValue="value"
               class="w-full"
-              placeholder=""
             />
           </div>
         </template>
@@ -163,13 +159,11 @@
         <template #content>
           <div class="flex flex-col w-full sm:max-w-xs gap-2 mt-3">
             <Dropdown
-              id=""
               v-model="directoryTraversalSensitivity"
               :options="sensitivity"
               optionLabel="name"
               optionValue="value"
               class="w-full"
-              placeholder=""
             />
           </div>
         </template>
@@ -197,13 +191,11 @@
         <template #content>
           <div class="flex flex-col w-full sm:max-w-xs gap-2 mt-3">
             <Dropdown
-              id=""
               v-model="crossSiteScriptingSensitivity"
               :options="sensitivity"
               optionLabel="name"
               optionValue="value"
               class="w-full"
-              placeholder=""
             />
           </div>
         </template>
@@ -228,13 +220,11 @@
         <template #content>
           <div class="flex flex-col w-full sm:max-w-xs gap-2 mt-3">
             <Dropdown
-              id=""
               v-model="fileUploadSensitivity"
               :options="sensitivity"
               optionLabel="name"
               optionValue="value"
               class="w-full"
-              placeholder=""
             />
           </div>
         </template>
@@ -260,13 +250,11 @@
         <template #content>
           <div class="flex flex-col w-full sm:max-w-xs gap-2 mt-3">
             <Dropdown
-              id=""
               v-model="evadingTricksSensitivity"
               :options="sensitivity"
               optionLabel="name"
               optionValue="value"
               class="w-full"
-              placeholder=""
             />
           </div>
         </template>
@@ -294,13 +282,11 @@
         <template #content>
           <div class="flex flex-col w-full sm:max-w-xs gap-2 mt-3">
             <Dropdown
-              id=""
               v-model="unwantedAccessSensitivity"
               :options="sensitivity"
               optionLabel="name"
               optionValue="value"
               class="w-full"
-              placeholder=""
             />
           </div>
         </template>
@@ -327,13 +313,11 @@
         <template #content>
           <div class="flex flex-col w-full sm:max-w-xs gap-2 mt-3">
             <Dropdown
-              id=""
               v-model="identifiedAttackSensitivity"
               :options="sensitivity"
               optionLabel="name"
               optionValue="value"
               class="w-full"
-              placeholder=""
             />
           </div>
         </template>

From cf48bddaf781c6a83fe5648aaaf234b65e38fe9c Mon Sep 17 00:00:00 2001
From: paulosf0 <paulo.ferreira@azion.com>
Date: Thu, 11 Jan 2024 14:50:22 -0300
Subject: [PATCH 052/135] feat: add textfeild component and fix test

---
 .../create-waf-rules-service.test.js          |  2 +-
 .../FormFields/FormFieldsWafRules.vue         | 26 +++++--------------
 2 files changed, 8 insertions(+), 20 deletions(-)

diff --git a/src/tests/services/waf-rules-services/create-waf-rules-service.test.js b/src/tests/services/waf-rules-services/create-waf-rules-service.test.js
index 8dec1d463..641821c42 100644
--- a/src/tests/services/waf-rules-services/create-waf-rules-service.test.js
+++ b/src/tests/services/waf-rules-services/create-waf-rules-service.test.js
@@ -80,7 +80,7 @@ describe('WafRulesServices', () => {
 
     const data = await sut(fixtures.wafRulesMock)
 
-    expect(data.feedback).toBe('Your waf rule has been created')
+    expect(data).toStrictEqual({ feedback: 'Your waf rule has been created', urlToEditView: '/waf' })
   })
 
   it('Should return an API error for an 400 response status', async () => {
diff --git a/src/views/WafRules/FormFields/FormFieldsWafRules.vue b/src/views/WafRules/FormFields/FormFieldsWafRules.vue
index a94efaa49..be83d69e1 100644
--- a/src/views/WafRules/FormFields/FormFieldsWafRules.vue
+++ b/src/views/WafRules/FormFields/FormFieldsWafRules.vue
@@ -1,15 +1,15 @@
 <script setup>
   import { ref } from 'vue'
   import FormHorizontal from '@/templates/create-form-block/form-horizontal'
-  import InputText from 'primevue/inputtext'
   import InputSwitch from 'primevue/inputswitch'
   import Card from 'primevue/card'
   import Dropdown from 'primevue/dropdown'
+  import FieldText from '@/templates/form-fields-inputs/fieldText'
+
 
   import { useField } from 'vee-validate'
   defineOptions({ name: 'form-fields-variables' })
 
-  const { value: name, errorMessage: nameError } = useField('name')
   const { value: active } = useField('active')
   const { value: crossSiteScriptingSensitivity } = useField('crossSiteScriptingSensitivity')
   const { value: directoryTraversalSensitivity } = useField('directoryTraversalSensitivity')
@@ -27,6 +27,7 @@
   const { value: directoryTraversal } = useField('directoryTraversal')
   const { value: remoteFileInclusion } = useField('remoteFileInclusion')
   const { value: sqlInjection } = useField('sqlInjection')
+  
 
   const sensitivity = ref([
     { name: 'Sensitivity Highest', value: 'highest' },
@@ -44,24 +45,11 @@
   >
     <template #inputs>
       <div class="flex flex-col sm:max-w-lg w-full gap-2">
-        <label
-          for="name"
-          class="text-color text-base font-medium"
-          >Name *
-        </label>
-        <InputText
-          
-          v-model="name"
-          type="text"
-          id="name"
-          :class="{ 'p-invalid': nameError }"
+        <FieldText
+          label="Name *"
+          name="name"
+          :value="name"
         />
-        <small
-          v-if="nameError"
-          class="p-error text-xs font-normal leading-tight"
-        >
-          {{ nameError }}
-        </small>
       </div>
     </template>
   </FormHorizontal>

From d92bbe213b770992e1bcbd8b3463212cc5d4921a Mon Sep 17 00:00:00 2001
From: paulosf0 <paulo.ferreira@azion.com>
Date: Thu, 11 Jan 2024 14:51:13 -0300
Subject: [PATCH 053/135] feat: code format by husky

---
 .../waf-rules-services/create-waf-rules-service.test.js      | 5 ++++-
 src/views/WafRules/FormFields/FormFieldsWafRules.vue         | 4 +---
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/tests/services/waf-rules-services/create-waf-rules-service.test.js b/src/tests/services/waf-rules-services/create-waf-rules-service.test.js
index 641821c42..f0d527d79 100644
--- a/src/tests/services/waf-rules-services/create-waf-rules-service.test.js
+++ b/src/tests/services/waf-rules-services/create-waf-rules-service.test.js
@@ -80,7 +80,10 @@ describe('WafRulesServices', () => {
 
     const data = await sut(fixtures.wafRulesMock)
 
-    expect(data).toStrictEqual({ feedback: 'Your waf rule has been created', urlToEditView: '/waf' })
+    expect(data).toStrictEqual({
+      feedback: 'Your waf rule has been created',
+      urlToEditView: '/waf'
+    })
   })
 
   it('Should return an API error for an 400 response status', async () => {
diff --git a/src/views/WafRules/FormFields/FormFieldsWafRules.vue b/src/views/WafRules/FormFields/FormFieldsWafRules.vue
index be83d69e1..522f92bb6 100644
--- a/src/views/WafRules/FormFields/FormFieldsWafRules.vue
+++ b/src/views/WafRules/FormFields/FormFieldsWafRules.vue
@@ -6,9 +6,8 @@
   import Dropdown from 'primevue/dropdown'
   import FieldText from '@/templates/form-fields-inputs/fieldText'
 
-
   import { useField } from 'vee-validate'
-  defineOptions({ name: 'form-fields-variables' })
+  defineOptions({ name: 'form-fields-waf-rules' })
 
   const { value: active } = useField('active')
   const { value: crossSiteScriptingSensitivity } = useField('crossSiteScriptingSensitivity')
@@ -27,7 +26,6 @@
   const { value: directoryTraversal } = useField('directoryTraversal')
   const { value: remoteFileInclusion } = useField('remoteFileInclusion')
   const { value: sqlInjection } = useField('sqlInjection')
-  
 
   const sensitivity = ref([
     { name: 'Sensitivity Highest', value: 'highest' },

From 1ff8a02f83c099a17ca4369960109c2ac6480f31 Mon Sep 17 00:00:00 2001
From: "bruna.andrade" <bruna.andrade@azion.com>
Date: Thu, 11 Jan 2024 15:25:49 -0300
Subject: [PATCH 054/135] chore: add purge inline message

---
 src/views/RealTimePurge/CreateView.vue | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/views/RealTimePurge/CreateView.vue b/src/views/RealTimePurge/CreateView.vue
index a2e1f37c7..109e303da 100644
--- a/src/views/RealTimePurge/CreateView.vue
+++ b/src/views/RealTimePurge/CreateView.vue
@@ -10,6 +10,12 @@
         :initialValues="initialValues"
       >
         <template #form>
+          <InlineMessage
+            class="w-fit"
+            severity="info"
+            >After a purge is created, the results may take some time to propagate to all edge
+            nodes.
+          </InlineMessage>
           <FormFieldsCreateRealTimePurge
             :contactSalesRealTimePurgeService="contactSalesRealTimePurgeService"
           />
@@ -31,6 +37,7 @@
   import CreateFormBlock from '@/templates/create-form-block'
   import ContentBlock from '@/templates/content-block'
   import PageHeadingBlock from '@/templates/page-heading-block'
+  import InlineMessage from 'primevue/inlinemessage'
   import FormFieldsCreateRealTimePurge from './FormFields/FormFieldsCreateRealTimePurge'
   import ActionBarBlockWithTeleport from '@templates/action-bar-block/action-bar-with-teleport'
   import * as yup from 'yup'

From 89aa5d4ee69a67103f662423a4b7f5cc3fe13d8a Mon Sep 17 00:00:00 2001
From: Bru Andrade <119969414+bru-andrade@users.noreply.github.com>
Date: Thu, 11 Jan 2024 16:15:44 -0300
Subject: [PATCH 055/135] Apply suggestions from code review
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Mariana Bellorín Aguilera <89138244+MarianaAguilera@users.noreply.github.com>
---
 src/views/RealTimePurge/CreateView.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/RealTimePurge/CreateView.vue b/src/views/RealTimePurge/CreateView.vue
index 109e303da..638133aac 100644
--- a/src/views/RealTimePurge/CreateView.vue
+++ b/src/views/RealTimePurge/CreateView.vue
@@ -13,7 +13,7 @@
           <InlineMessage
             class="w-fit"
             severity="info"
-            >After a purge is created, the results may take some time to propagate to all edge
+            >After a purge is added, the results may take some time to propagate to all edge
             nodes.
           </InlineMessage>
           <FormFieldsCreateRealTimePurge

From 66dadad4c8dba1002593fc8558a7a61431e48939 Mon Sep 17 00:00:00 2001
From: paulosf0 <paulo.ferreira@azion.com>
Date: Thu, 11 Jan 2024 16:58:53 -0300
Subject: [PATCH 056/135] feat: add edit main waf

---
 src/router/routes/waf-rules-routes/index.js   |  62 ++++-
 .../edit-waf-rules-service.js                 |  83 +++++++
 src/services/waf-rules-services/index.js      |  10 +-
 .../load-waf-rules-service.js                 |  43 ++++
 src/views/WafRules/EditView.vue               | 218 ++++++++++++++++++
 .../FormFields/FormFieldsWafRules.vue         |   9 +-
 6 files changed, 422 insertions(+), 3 deletions(-)
 create mode 100644 src/services/waf-rules-services/edit-waf-rules-service.js
 create mode 100644 src/services/waf-rules-services/load-waf-rules-service.js
 create mode 100644 src/views/WafRules/EditView.vue

diff --git a/src/router/routes/waf-rules-routes/index.js b/src/router/routes/waf-rules-routes/index.js
index a042647bc..a235995b7 100644
--- a/src/router/routes/waf-rules-routes/index.js
+++ b/src/router/routes/waf-rules-routes/index.js
@@ -43,6 +43,66 @@ export const wafRulesRoutes = {
           }
         ]
       }
-    }
+    },
+    {
+      path: 'edit/:id',
+      name: 'edit-waf-rules',
+      component: () => import('@views/WafRules/EditView.vue'),
+      props: {
+        editWafRulesService: WafRulesService.editWafRulesService,
+        loadWafRulesService: WafRulesService.loadWafRulesService,
+      },
+      meta: {
+        breadCrumbs: [
+          {
+            label: 'Waf Rules',
+            to: '/waf'
+          },
+          {
+            label: 'Edit Waf Rules'
+          }
+        ]
+      }
+    },
+    {
+      path: 'edit/:id/tuning',
+      name: 'edit-waf-rules-tuning',
+      component: () => import('@views/WafRules/EditView.vue'),
+      props: {
+        editWafRulesService: WafRulesService.editWafRulesService,
+        loadWafRulesService: WafRulesService.loadWafRulesService,
+      },
+      meta: {
+        breadCrumbs: [
+          {
+            label: 'Waf Rules',
+            to: '/waf'
+          },
+          {
+            label: 'Edit Waf Rules'
+          }
+        ]
+      }
+    },
+    {
+      path: 'edit/:id/allowed',
+      name: 'edit-waf-rules-allowed',
+      component: () => import('@views/WafRules/EditView.vue'),
+      props: {
+        editWafRulesService: WafRulesService.editWafRulesService,
+        loadWafRulesService: WafRulesService.loadWafRulesService,
+      },
+      meta: {
+        breadCrumbs: [
+          {
+            label: 'Waf Rules',
+            to: '/waf'
+          },
+          {
+            label: 'Edit Waf Rules'
+          }
+        ]
+      }
+    },
   ]
 }
diff --git a/src/services/waf-rules-services/edit-waf-rules-service.js b/src/services/waf-rules-services/edit-waf-rules-service.js
new file mode 100644
index 000000000..e1d8a0dbb
--- /dev/null
+++ b/src/services/waf-rules-services/edit-waf-rules-service.js
@@ -0,0 +1,83 @@
+import { AxiosHttpClientAdapter } from '../axios/AxiosHttpClientAdapter'
+import * as Errors from '@/services/axios/errors'
+import { makeWafRulesBaseUrl } from './make-waf-rules-base-url'
+
+export const editWafRulesService = async (payload, id) => {
+  let httpResponse = await AxiosHttpClientAdapter.request({
+    url: `${makeWafRulesBaseUrl()}/rulesets/${id}`,
+    method: 'PATCH',
+    body: adapt(payload)
+  })
+
+  return parseHttpResponse(httpResponse)
+}
+
+const adapt = (payload) => {
+  return {
+    bypass_addresses: payload.bypassAddresses,
+    cross_site_scripting_sensitivity: payload.crossSiteScriptingSensitivity,
+    directory_traversal_sensitivity: payload.directoryTraversalSensitivity,
+    evading_tricks_sensitivity: payload.evadingTricksSensitivity,
+    file_upload_sensitivity: payload.fileUploadSensitivity,
+    account_id: payload.id,
+    identified_attack_sensitivity: payload.identifiedAttackSensitivity,
+    name: payload.name,
+    remote_file_inclusion_sensitivity: payload.remoteFileInclusionSensitivity,
+    sql_injection_sensitivity: payload.sqlInjectionSensitivity,
+    unwanted_access_sensitivity: payload.unwantedAccessSensitivity,
+    file_upload: payload.fileUpload,
+    evading_tricks: payload.evadingTricks,
+    unwanted_access: payload.unwantedAccess,
+    identified_attack: payload.identifiedAttack,
+    cross_site_scripting: payload.crossSiteScripting,
+    directory_traversal: payload.directoryTraversal,
+    remote_file_inclusion: payload.remoteFileInclusion,
+    sql_injection: payload.sqlInjection,
+    active: payload.active
+  }
+}
+
+/**
+ * @param {Object} httpResponse - The HTTP response object.
+ * @param {Object} httpResponse.body - The response body.
+ * @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 200:
+      return  'Your waf rule has been updated'
+    case 400:
+      const apiError = extractApiError(httpResponse)
+      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
+  }
+}
+
+/**
+ * @param {Object} errorSchema - The error schema.
+ * @param {string} key - The error key of error schema.
+ * @returns {string|undefined} The result message based on the status code.
+ */
+
+/**
+ * @param {Object} httpResponse - The HTTP response object.
+ * @param {Object} httpResponse.body - The response body.
+ * @returns {string} The result message based on the status code.
+ */
+const extractApiError = (httpResponse) => {
+  const [key] =  Object.keys(httpResponse.body);
+  const errorMessage = httpResponse.body[key][0];
+
+  return errorMessage
+}
diff --git a/src/services/waf-rules-services/index.js b/src/services/waf-rules-services/index.js
index fdf980892..3893af0e5 100644
--- a/src/services/waf-rules-services/index.js
+++ b/src/services/waf-rules-services/index.js
@@ -1,5 +1,13 @@
 import { listWafRulesService } from './list-waf-rules-service'
 import { deleteWafRulesService } from './delete-waf-rules-service'
 import { createWafRulesService } from './create-waf-rules-service'
+import { loadWafRulesService } from './load-waf-rules-service'
+import { editWafRulesService } from './edit-waf-rules-service'
 
-export { listWafRulesService, deleteWafRulesService, createWafRulesService }
+export {
+  listWafRulesService,
+  deleteWafRulesService,
+  createWafRulesService,
+  loadWafRulesService,
+  editWafRulesService
+}
diff --git a/src/services/waf-rules-services/load-waf-rules-service.js b/src/services/waf-rules-services/load-waf-rules-service.js
new file mode 100644
index 000000000..390c53fd0
--- /dev/null
+++ b/src/services/waf-rules-services/load-waf-rules-service.js
@@ -0,0 +1,43 @@
+import { AxiosHttpClientAdapter, parseHttpResponse } from '../axios/AxiosHttpClientAdapter'
+import { makeWafRulesBaseUrl } from './make-waf-rules-base-url'
+
+export const loadWafRulesService = async ({ id }) => {
+  let httpResponse = await AxiosHttpClientAdapter.request({
+    url: `${makeWafRulesBaseUrl()}/rulesets/${id}`,
+    method: 'GET'
+  })
+  httpResponse = adapt(httpResponse)
+
+  return parseHttpResponse(httpResponse)
+}
+
+const adapt = (httpResponse) => {
+  const parsedWafRules = {
+    active: httpResponse.body.results.active,
+    bypassAddresses: httpResponse.body.results.bypass_addresses,
+    crossSiteScriptingSensitivity: httpResponse.body.results.cross_site_scripting_sensitivity,
+    directoryTraversalSensitivity: httpResponse.body.results.directory_traversal_sensitivity,
+    evadingTricksSensitivity: httpResponse.body.results.evading_tricks_sensitivity,
+    fileUploadSensitivity: httpResponse.body.results.file_upload_sensitivity,
+    id: httpResponse.body.results.id,
+    identifiedAttackSensitivity: httpResponse.body.results.identified_attack_sensitivity,
+    mode: httpResponse.body.results.mode,
+    name: httpResponse.body.results.name,
+    remoteFileInclusionSensitivity: httpResponse.body.results.remote_file_inclusion_sensitivity,
+    sqlInjectionSensitivity: httpResponse.body.results.sql_injection_sensitivity,
+    unwantedAccessSensitivity: httpResponse.body.results.unwanted_access_sensitivity,
+    fileUpload: httpResponse.body.results.file_upload,
+    evadingTricks: httpResponse.body.results.evading_tricks,
+    unwantedAccess: httpResponse.body.results.unwanted_access,
+    identifiedAttack: httpResponse.body.results.identified_attack,
+    crossSiteScripting: httpResponse.body.results.cross_site_scripting,
+    directoryTraversal: httpResponse.body.results.directory_traversal,
+    remoteFileInclusion: httpResponse.body.results.remote_file_inclusion,
+    sqlInjection: httpResponse.body.results.sql_injection,
+  }
+
+  return {
+    body: parsedWafRules,
+    statusCode: httpResponse.statusCode
+  }
+}
diff --git a/src/views/WafRules/EditView.vue b/src/views/WafRules/EditView.vue
new file mode 100644
index 000000000..bf4673cde
--- /dev/null
+++ b/src/views/WafRules/EditView.vue
@@ -0,0 +1,218 @@
+<template>
+  <ContentBlock>
+    <template #heading>
+      <PageHeadingBlock pageTitle="WAF Rules"> </PageHeadingBlock>
+    </template>
+    <template #content>
+      <TabView
+        v-model:activeIndex="activeTab"
+        @tab-click="changeRouteByClickingOnTab"
+        class="w-full"
+      >
+        <TabPanel header="Main Settings">
+          <EditFormBlock
+            :editService="submitEditWafRules"
+            :loadService="props.loadWafRulesService"
+            :schema="validationSchema"
+            :isTabs="true"
+            :disableRedirect="true"
+          >
+            <template #form>
+              <FormFieldsWafRules :disabledActive="false"></FormFieldsWafRules>
+            </template>
+            <template #action-bar="{ onSubmit, formValid, onCancel, loading }">
+              <ActionBarTemplate
+                v-if="showEditFormWithActionTab"
+                @onSubmit="onSubmit"
+                @onCancel="onCancel"
+                :loading="loading"
+                :submitDisabled="!formValid"
+              />
+            </template>
+          </EditFormBlock>
+        </TabPanel>
+        <TabPanel header="Tuning">
+          <h1>Tuning</h1>
+        </TabPanel>
+        <TabPanel header="Allowed Rules">
+          <h1>Allowed Rules</h1>
+          <!-- <ListTableNoHeaderBlock
+            ref="listIDNSResourcesRef"
+            v-if="hasContentToList"
+            pageTitleDelete="Record"
+            addButtonLabel="Add"
+            :editInDrawer="openEditDrawerIDNSResource"
+            :columns="recordListColumns"
+            :listService="listRecordsServiceIntelligentDNSDecorator"
+            :deleteService="deleteRecordsServiceIntelligentDNSDecorator"
+            @on-load-data="handleLoadData"
+            emptyListMessage="No Record found."
+          >
+            <template #addButton>
+              <PrimeButton
+                icon="pi pi-plus"
+                label="Add"
+                @click="openCreateDrawerIDNSResource"
+              />
+            </template>
+          </ListTableNoHeaderBlock>
+
+          <EmptyResultsBlock
+            v-else
+            title="No record has been created"
+            description=" Click the button below to initiate the setup process and create your first record."
+            createButtonLabel="Add"
+            createPagePath="records/create"
+            :documentationService="documentationService"
+            :inTabs="true"
+          >
+            <template #default>
+              <PrimeButton
+                severity="secondary"
+                icon="pi pi-plus"
+                label="Add"
+                @click="openCreateDrawerIDNSResource"
+              />
+            </template>
+            <template #illustration>
+              <Illustration />
+            </template>
+          </EmptyResultsBlock>
+
+          <CreateDrawerBlock
+            v-if="showCreateRecordDrawer"
+            v-model:visible="showCreateRecordDrawer"
+            :createService="createRecordsService"
+            :schema="validationSchemaIDNSRecords"
+            :initialValues="initialValuesCreateRecords"
+            @onSuccess="reloadResourcesList"
+            title="Create Intelligent DNS Record"
+          >
+            <template #formFields>
+              <FormFieldsRecords />
+            </template>
+          </CreateDrawerBlock>
+
+          <EditDrawerBlock
+            v-if="showEditRecordDrawer"
+            :id="selectedIdnsRecordToEdit"
+            v-model:visible="showEditRecordDrawer"
+            :loadService="loadRecordServiceWithIDNSIdDecorator"
+            :editService="editRecordServiceWithIDNSIdDecorator"
+            :schema="validationSchemaIDNSRecords"
+            @onSuccess="reloadResourcesList"
+            title="Edit Intelligent DNS Record"
+          >
+            <template #formFields>
+              <FormFieldsRecords />
+            </template>
+          </EditDrawerBlock> -->
+        </TabPanel>
+      </TabView>
+      <router-view></router-view>
+    </template>
+  </ContentBlock>
+</template>
+<script setup>
+  //   import Illustration from '@/assets/svg/illustration-layers.vue'
+  import ActionBarTemplate from '@/templates/action-bar-block/action-bar-with-teleport'
+  import ContentBlock from '@/templates/content-block'
+  //   import EmptyResultsBlock from '@/templates/empty-results-block'
+  //   import CreateDrawerBlock from '@templates/create-drawer-block'
+  //   import EditDrawerBlock from '@templates/edit-drawer-block'
+  import EditFormBlock from '@templates/edit-form-block'
+  //   import ListTableNoHeaderBlock from '@templates/list-table-block/no-header'
+  import PageHeadingBlock from '@templates/page-heading-block'
+  //   import PrimeButton from 'primevue/button'
+  import TabPanel from 'primevue/tabpanel'
+  import TabView from 'primevue/tabview'
+  import { computed, onBeforeMount, ref, watch } from 'vue'
+  import { useRoute, useRouter } from 'vue-router'
+  import * as yup from 'yup'
+  import FormFieldsWafRules from './FormFields/FormFieldsWafRules.vue'
+  const route = useRoute()
+  const router = useRouter()
+  const activeTab = ref(0)
+
+  const props = defineProps({
+    editWafRulesService: {
+      type: Function,
+      required: true
+    },
+    loadWafRulesService: {
+      type: Function,
+      required: true
+    }
+  })
+
+  const validationSchema = yup.object({
+    name: yup.string().required(),
+    crossSiteScriptingSensitivity: yup.string(),
+    directoryTraversalSensitivity: yup.string(),
+    evadingTricksSensitivity: yup.string(),
+    fileUploadSensitivity: yup.string(),
+    identifiedAttackSensitivity: yup.string(),
+    remoteFileInclusionSensitivity: yup.string(),
+    sqlInjectionSensitivity: yup.string(),
+    unwantedAccessSensitivity: yup.string(),
+    active: yup.boolean(),
+    fileUpload: yup.boolean(),
+    evadingTricks: yup.boolean(),
+    unwantedAccess: yup.boolean(),
+    identifiedAttack: yup.boolean(),
+    crossSiteScripting: yup.boolean(),
+    directoryTraversal: yup.boolean(),
+    remoteFileInclusion: yup.boolean(),
+    sqlInjection: yup.boolean()
+  })
+
+  const wafRuleId = ref(route.params.id)
+
+  const renderTabByRouterPath = () => {
+    if (route.name === 'edit-waf-rules') {
+      activeTab.value = 0
+    }
+    if (route.name === 'edit-waf-rules-tuning') {
+      activeTab.value = 1
+    }
+    if (route.name === 'edit-waf-rules-allowed') {
+      activeTab.value = 2
+    }
+  }
+
+  const changeRouteByClickingOnTab = (e) => {
+    if (e.index === 0) {
+      router.push({ name: 'edit-waf-rules', params: { id: wafRuleId.value } })
+    }
+    if (e.index === 1) {
+      router.push({ name: 'edit-waf-rules-tuning', params: { id: wafRuleId.value } })
+    }
+    if (e.index === 2) {
+      router.push({
+        name: 'edit-waf-rules-allowed',
+        params: { id: wafRuleId.value }
+      })
+    }
+  }
+
+  //   const handleLoadData = (event) => {
+  //     hasContentToList.value = event
+  //   }
+
+  const showEditFormWithActionTab = computed(() => {
+    return activeTab.value === 0
+  })
+
+  const submitEditWafRules = async (payload) => {    
+    return await props.editWafRulesService(payload,  parseInt(wafRuleId.value) )
+  }
+
+  watch(route, () => {
+    renderTabByRouterPath()
+  })
+
+  onBeforeMount(() => {
+    wafRuleId.value = route.params.id
+    renderTabByRouterPath()
+  })
+</script>
\ No newline at end of file
diff --git a/src/views/WafRules/FormFields/FormFieldsWafRules.vue b/src/views/WafRules/FormFields/FormFieldsWafRules.vue
index 522f92bb6..f3491d78d 100644
--- a/src/views/WafRules/FormFields/FormFieldsWafRules.vue
+++ b/src/views/WafRules/FormFields/FormFieldsWafRules.vue
@@ -8,6 +8,13 @@
 
   import { useField } from 'vee-validate'
   defineOptions({ name: 'form-fields-waf-rules' })
+  
+  const props = defineProps({
+    disabledActive: {
+      type: Boolean,
+      default: true
+    }
+  })
 
   const { value: active } = useField('active')
   const { value: crossSiteScriptingSensitivity } = useField('crossSiteScriptingSensitivity')
@@ -316,7 +323,7 @@
         <InputSwitch
           id="active"
           v-model="active"
-          :disabled="true"
+          :disabled="props.disabledActive"
         />
         <label
           for="active"

From b715878bb0471aa6c14ad21a5fe82b59a3409d99 Mon Sep 17 00:00:00 2001
From: paulosf0 <paulo.ferreira@azion.com>
Date: Thu, 11 Jan 2024 17:00:01 -0300
Subject: [PATCH 057/135] feat: code format by husky

---
 src/router/routes/waf-rules-routes/index.js               | 8 ++++----
 src/services/waf-rules-services/edit-waf-rules-service.js | 6 +++---
 src/services/waf-rules-services/load-waf-rules-service.js | 2 +-
 src/views/WafRules/EditView.vue                           | 6 +++---
 src/views/WafRules/FormFields/FormFieldsWafRules.vue      | 2 +-
 5 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/router/routes/waf-rules-routes/index.js b/src/router/routes/waf-rules-routes/index.js
index a235995b7..45b8749ba 100644
--- a/src/router/routes/waf-rules-routes/index.js
+++ b/src/router/routes/waf-rules-routes/index.js
@@ -50,7 +50,7 @@ export const wafRulesRoutes = {
       component: () => import('@views/WafRules/EditView.vue'),
       props: {
         editWafRulesService: WafRulesService.editWafRulesService,
-        loadWafRulesService: WafRulesService.loadWafRulesService,
+        loadWafRulesService: WafRulesService.loadWafRulesService
       },
       meta: {
         breadCrumbs: [
@@ -70,7 +70,7 @@ export const wafRulesRoutes = {
       component: () => import('@views/WafRules/EditView.vue'),
       props: {
         editWafRulesService: WafRulesService.editWafRulesService,
-        loadWafRulesService: WafRulesService.loadWafRulesService,
+        loadWafRulesService: WafRulesService.loadWafRulesService
       },
       meta: {
         breadCrumbs: [
@@ -90,7 +90,7 @@ export const wafRulesRoutes = {
       component: () => import('@views/WafRules/EditView.vue'),
       props: {
         editWafRulesService: WafRulesService.editWafRulesService,
-        loadWafRulesService: WafRulesService.loadWafRulesService,
+        loadWafRulesService: WafRulesService.loadWafRulesService
       },
       meta: {
         breadCrumbs: [
@@ -103,6 +103,6 @@ export const wafRulesRoutes = {
           }
         ]
       }
-    },
+    }
   ]
 }
diff --git a/src/services/waf-rules-services/edit-waf-rules-service.js b/src/services/waf-rules-services/edit-waf-rules-service.js
index e1d8a0dbb..42f893e90 100644
--- a/src/services/waf-rules-services/edit-waf-rules-service.js
+++ b/src/services/waf-rules-services/edit-waf-rules-service.js
@@ -47,7 +47,7 @@ const adapt = (payload) => {
 const parseHttpResponse = (httpResponse) => {
   switch (httpResponse.statusCode) {
     case 200:
-      return  'Your waf rule has been updated'
+      return 'Your waf rule has been updated'
     case 400:
       const apiError = extractApiError(httpResponse)
       throw new Error(apiError).message
@@ -76,8 +76,8 @@ const parseHttpResponse = (httpResponse) => {
  * @returns {string} The result message based on the status code.
  */
 const extractApiError = (httpResponse) => {
-  const [key] =  Object.keys(httpResponse.body);
-  const errorMessage = httpResponse.body[key][0];
+  const [key] = Object.keys(httpResponse.body)
+  const errorMessage = httpResponse.body[key][0]
 
   return errorMessage
 }
diff --git a/src/services/waf-rules-services/load-waf-rules-service.js b/src/services/waf-rules-services/load-waf-rules-service.js
index 390c53fd0..15ca2c7c0 100644
--- a/src/services/waf-rules-services/load-waf-rules-service.js
+++ b/src/services/waf-rules-services/load-waf-rules-service.js
@@ -33,7 +33,7 @@ const adapt = (httpResponse) => {
     crossSiteScripting: httpResponse.body.results.cross_site_scripting,
     directoryTraversal: httpResponse.body.results.directory_traversal,
     remoteFileInclusion: httpResponse.body.results.remote_file_inclusion,
-    sqlInjection: httpResponse.body.results.sql_injection,
+    sqlInjection: httpResponse.body.results.sql_injection
   }
 
   return {
diff --git a/src/views/WafRules/EditView.vue b/src/views/WafRules/EditView.vue
index bf4673cde..dce265a7d 100644
--- a/src/views/WafRules/EditView.vue
+++ b/src/views/WafRules/EditView.vue
@@ -203,8 +203,8 @@
     return activeTab.value === 0
   })
 
-  const submitEditWafRules = async (payload) => {    
-    return await props.editWafRulesService(payload,  parseInt(wafRuleId.value) )
+  const submitEditWafRules = async (payload) => {
+    return await props.editWafRulesService(payload, parseInt(wafRuleId.value))
   }
 
   watch(route, () => {
@@ -215,4 +215,4 @@
     wafRuleId.value = route.params.id
     renderTabByRouterPath()
   })
-</script>
\ No newline at end of file
+</script>
diff --git a/src/views/WafRules/FormFields/FormFieldsWafRules.vue b/src/views/WafRules/FormFields/FormFieldsWafRules.vue
index f3491d78d..707f10e41 100644
--- a/src/views/WafRules/FormFields/FormFieldsWafRules.vue
+++ b/src/views/WafRules/FormFields/FormFieldsWafRules.vue
@@ -8,7 +8,7 @@
 
   import { useField } from 'vee-validate'
   defineOptions({ name: 'form-fields-waf-rules' })
-  
+
   const props = defineProps({
     disabledActive: {
       type: Boolean,

From 2bf4a4effc618590005cad0925f556d829ab971c Mon Sep 17 00:00:00 2001
From: aloisio-m-bastian <107002324+aloisio-m-bastian@users.noreply.github.com>
Date: Fri, 12 Jan 2024 09:57:16 -0300
Subject: [PATCH 058/135] [ENG-28091] feat: edit edge applications error
 responses (#552)

* feat: progress creating the edge application error responses page

* feat: add editerror responses page

* feat: add editerror responses page

* feat: edge application error responses progress

* feat: validate payload and unit test for services

* feat: validate payload and unit test for services

* fix: remove warnings

* refactor: remove ifs to use inline conditional

* fix: remove typo in test cases

* fix: remove delete property and use new array in service

* fix: remove space from file name and change its folder

* Update src/views/EdgeApplicationsErrorResponses/FormFields/FormFieldsErrorResponses.vue

Co-authored-by: William <william.tome@azion.com>

---------

Co-authored-by: William <william.tome@azion.com>
---
 .../routes/edge-application-routes/index.js   |   5 +
 .../edit-error-responses-service.js           |  85 ++++++
 .../index.js                                  |   4 +
 .../list-error-responses-service.js           |  33 ++
 .../make-edge-application-v4-base-url.js      |   4 +
 .../edit-error-responses-services.test.js     | 134 +++++++++
 .../list-error-responses-service.test.js      |  73 +++++
 src/views/EdgeApplications/TabsView.vue       |  21 +-
 .../EditView.vue                              |  81 +++++
 .../FormFields/FormFieldsErrorResponses.vue   | 282 ++++++++++++++++++
 10 files changed, 719 insertions(+), 3 deletions(-)
 create mode 100644 src/services/edge-application-error-responses-services/edit-error-responses-service.js
 create mode 100644 src/services/edge-application-error-responses-services/index.js
 create mode 100644 src/services/edge-application-error-responses-services/list-error-responses-service.js
 create mode 100644 src/services/edge-application-error-responses-services/make-edge-application-v4-base-url.js
 create mode 100644 src/tests/services/edge-application-error-responses/edit-error-responses-services.test.js
 create mode 100644 src/tests/services/edge-application-error-responses/list-error-responses-service.test.js
 create mode 100644 src/views/EdgeApplicationsErrorResponses/EditView.vue
 create mode 100644 src/views/EdgeApplicationsErrorResponses/FormFields/FormFieldsErrorResponses.vue

diff --git a/src/router/routes/edge-application-routes/index.js b/src/router/routes/edge-application-routes/index.js
index e7e75ba6e..e86b0162d 100644
--- a/src/router/routes/edge-application-routes/index.js
+++ b/src/router/routes/edge-application-routes/index.js
@@ -4,6 +4,7 @@ import * as OriginsService from '@/services/edge-application-origins-services'
 import * as CacheSettingsServices from '@/services/edge-application-cache-settings-services'
 import * as FunctionsService from '@/services/edge-application-functions-services'
 import * as DeviceGroupsService from '@/services/edge-application-device-groups-services'
+import * as ErrorResponsesService from '@/services/edge-application-error-responses-services'
 import * as RulesEngineService from '@/services/edge-application-rules-engine-services'
 
 /** @type {import('vue-router').RouteRecordRaw} */
@@ -91,6 +92,10 @@ export const edgeApplicationRoutes = {
           editDeviceGroupService: DeviceGroupsService.editDeviceGroupService,
           loadDeviceGroupService: DeviceGroupsService.loadDeviceGroupService
         },
+        errorResponsesServices: {
+          loadErrorResponsesService: ErrorResponsesService.listErrorResponsesService,
+          editErrorResponsesService: ErrorResponsesService.editErrorResponsesService
+        },
         rulesEngineServices: {
           listRulesEngineService: RulesEngineService.listRulesEngineService,
           deleteRulesEngineService: RulesEngineService.deleteRulesEngineService,
diff --git a/src/services/edge-application-error-responses-services/edit-error-responses-service.js b/src/services/edge-application-error-responses-services/edit-error-responses-service.js
new file mode 100644
index 000000000..597e6e5d9
--- /dev/null
+++ b/src/services/edge-application-error-responses-services/edit-error-responses-service.js
@@ -0,0 +1,85 @@
+import { AxiosHttpClientAdapter } from '@/services/axios/AxiosHttpClientAdapter'
+import { makeEdgeApplicationV4BaseUrl } from './make-edge-application-v4-base-url'
+import * as Errors from '@/services/axios/errors'
+
+export const editErrorResponsesService = async (payload) => {
+  let httpResponse = await AxiosHttpClientAdapter.request({
+    url: `${makeEdgeApplicationV4BaseUrl()}/${payload.edgeApplicationId}/error_responses/${
+      payload.id
+    }`,
+    method: 'PATCH',
+    body: adapt(payload)
+  })
+
+  return parseHttpResponse(httpResponse)
+}
+
+const adapt = (payload) => {
+  const errorResponses = payload.errorResponses.map((element) => {
+    return {
+      custom_status_code: element?.customStatusCode,
+      uri: element?.uri,
+      timeout: element.timeout,
+      code: element.code
+    }
+  })
+  return {
+    origin_id: payload.originId,
+    error_responses: errorResponses
+  }
+}
+
+/**
+ * @param {Object} errorSchema - The error schema.
+ * @param {string} key - The error key of error schema.
+ * @returns {string|undefined} The result message based on the status code.
+ */
+const extractErrorKey = (errorSchema, key) => {
+  if (Array.isArray(errorSchema[key])) {
+    if (typeof errorSchema[key][0] === 'object') {
+      const newError = errorSchema[key][0]
+      const errorKey = Object.keys(errorSchema[key][0])
+      return newError[errorKey]?.[0]
+    }
+    return errorSchema[key]?.[0]
+  }
+  return errorSchema[key]
+}
+
+/**
+ * @param {Object} httpResponse - The HTTP response object.
+ * @param {Object} httpResponse.body - The response body.
+ * @returns {string} The result message based on the status code.
+ */
+const extractApiError = (httpResponse) => {
+  const errorKey = Object.keys(httpResponse.body)[0]
+  const apiError = extractErrorKey(httpResponse.body, errorKey)
+  return `${errorKey}: ${apiError}`
+}
+
+/**
+ * @param {Object} httpResponse - The HTTP response object.
+ * @param {Object} httpResponse.body - The response body.
+ * @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 'Your Error Responses has been edited'
+    case 400:
+      const apiError = extractApiError(httpResponse)
+      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-application-error-responses-services/index.js b/src/services/edge-application-error-responses-services/index.js
new file mode 100644
index 000000000..568f0c196
--- /dev/null
+++ b/src/services/edge-application-error-responses-services/index.js
@@ -0,0 +1,4 @@
+import { listErrorResponsesService } from './list-error-responses-service'
+import { editErrorResponsesService } from './edit-error-responses-service'
+
+export { listErrorResponsesService, editErrorResponsesService }
diff --git a/src/services/edge-application-error-responses-services/list-error-responses-service.js b/src/services/edge-application-error-responses-services/list-error-responses-service.js
new file mode 100644
index 000000000..f18ba4bd1
--- /dev/null
+++ b/src/services/edge-application-error-responses-services/list-error-responses-service.js
@@ -0,0 +1,33 @@
+import { AxiosHttpClientAdapter, parseHttpResponse } from '@/services/axios/AxiosHttpClientAdapter'
+import { makeEdgeApplicationV4BaseUrl } from './make-edge-application-v4-base-url'
+
+export const listErrorResponsesService = async ({ edgeApplicationId }) => {
+  let httpResponse = await AxiosHttpClientAdapter.request({
+    url: `${makeEdgeApplicationV4BaseUrl()}/${edgeApplicationId}/error_responses`,
+    method: 'GET'
+  })
+
+  httpResponse = adapt(httpResponse)
+  return parseHttpResponse(httpResponse)
+}
+
+const adapt = (httpResponse) => {
+  const response = httpResponse.body.results[0]
+  const parsedErrorResponses = {
+    id: response.id,
+    name: response.name,
+    originId: response.origin_id,
+    errorResponses: response.error_responses.map((element) => {
+      return {
+        code: element.code.toString(),
+        timeout: element.timeout,
+        uri: element.uri,
+        customStatusCode: element.custom_status_code
+      }
+    })
+  }
+  return {
+    statusCode: httpResponse.statusCode,
+    body: parsedErrorResponses
+  }
+}
diff --git a/src/services/edge-application-error-responses-services/make-edge-application-v4-base-url.js b/src/services/edge-application-error-responses-services/make-edge-application-v4-base-url.js
new file mode 100644
index 000000000..671380924
--- /dev/null
+++ b/src/services/edge-application-error-responses-services/make-edge-application-v4-base-url.js
@@ -0,0 +1,4 @@
+export const makeEdgeApplicationV4BaseUrl = () => {
+  const version = 'v4'
+  return `${version}/edge/applications`
+}
diff --git a/src/tests/services/edge-application-error-responses/edit-error-responses-services.test.js b/src/tests/services/edge-application-error-responses/edit-error-responses-services.test.js
new file mode 100644
index 000000000..f24f6e99c
--- /dev/null
+++ b/src/tests/services/edge-application-error-responses/edit-error-responses-services.test.js
@@ -0,0 +1,134 @@
+import { AxiosHttpClientAdapter } from '@/services/axios/AxiosHttpClientAdapter'
+import { editErrorResponsesService } from '@/services/edge-application-error-responses-services'
+import { describe, expect, it, vi } from 'vitest'
+import * as Errors from '@/services/axios/errors'
+
+const fixtures = {
+  errorResponsePayload: {
+    edgeApplicationId: '123',
+    id: '123',
+    originId: '12',
+    errorResponses: [
+      {
+        code: '500',
+        timeout: 2,
+        customStatusCode: '503',
+        uri: '/teste/'
+      }
+    ]
+  }
+}
+
+const makeSut = () => {
+  const sut = editErrorResponsesService
+
+  return {
+    sut
+  }
+}
+
+describe('EdgeApplicationErrorResponsesServices', () => {
+  it('should call API with correct params', async () => {
+    const requestSpy = vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+      statusCode: 202
+    })
+
+    const { sut } = makeSut()
+    const version = 'v4'
+
+    await sut(fixtures.errorResponsePayload)
+
+    expect(requestSpy).toHaveBeenCalledWith({
+      url: `${version}/edge/applications/${fixtures.errorResponsePayload.edgeApplicationId}/error_responses/${fixtures.errorResponsePayload.id}`,
+      method: 'PATCH',
+      body: {
+        error_responses: [
+          {
+            code: fixtures.errorResponsePayload.errorResponses[0].code,
+            custom_status_code: fixtures.errorResponsePayload.errorResponses[0].customStatusCode,
+            timeout: fixtures.errorResponsePayload.errorResponses[0].timeout,
+            uri: fixtures.errorResponsePayload.errorResponses[0].uri
+          }
+        ],
+        origin_id: fixtures.errorResponsePayload.originId
+      }
+    })
+  })
+
+  it('should return a feedback message on successfully updated', async () => {
+    vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+      statusCode: 202
+    })
+    const { sut } = makeSut()
+
+    const feedbackMessage = await sut(fixtures.errorResponsePayload)
+
+    expect(feedbackMessage).toBe('Your Error Responses has been edited')
+  })
+
+  it('Should return an API array error to an invalid error response', async () => {
+    const apiErrorMock = 'name should not be empty'
+
+    vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+      statusCode: 400,
+      body: {
+        errors: [apiErrorMock]
+      }
+    })
+    const { sut } = makeSut()
+
+    const feedbackMessage = sut(fixtures.errorResponsePayload)
+
+    expect(feedbackMessage).rejects.toThrow(apiErrorMock)
+  })
+  it('Should return an API error to an invalid error response', async () => {
+    const apiErrorMock = 'name should not be empty'
+
+    vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+      statusCode: 400,
+      body: {
+        errors: apiErrorMock
+      }
+    })
+    const { sut } = makeSut()
+
+    const feedbackMessage = sut(fixtures.errorResponsePayload)
+
+    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
+      })
+      const { sut } = makeSut()
+
+      const response = sut(fixtures.errorResponsePayload)
+
+      expect(response).rejects.toBe(expectedError)
+    }
+  )
+})
diff --git a/src/tests/services/edge-application-error-responses/list-error-responses-service.test.js b/src/tests/services/edge-application-error-responses/list-error-responses-service.test.js
new file mode 100644
index 000000000..0818ea573
--- /dev/null
+++ b/src/tests/services/edge-application-error-responses/list-error-responses-service.test.js
@@ -0,0 +1,73 @@
+import { AxiosHttpClientAdapter } from '@/services/axios/AxiosHttpClientAdapter'
+import { listErrorResponsesService } from '@/services/edge-application-error-responses-services'
+import { describe, expect, it, vi } from 'vitest'
+
+const fixtures = {
+  errorResponseSample: {
+    id: '123',
+    origin_id: '12',
+    error_responses: [
+      {
+        code: 500,
+        timeout: 2,
+        uri: '/teste/',
+        custom_status_code: '503'
+      }
+    ]
+  }
+}
+
+const makeSut = () => {
+  const sut = listErrorResponsesService
+
+  return { sut }
+}
+
+describe('EdgeApplicationErrorResponsesServices', () => {
+  it('should call api with correct params', async () => {
+    const requestSpy = vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+      statusCode: 200,
+      body: {
+        results: [fixtures.errorResponseSample]
+      }
+    })
+
+    const edgeApplicationId = 123
+
+    const { sut } = makeSut()
+    const version = 'v4'
+    await sut({ edgeApplicationId: edgeApplicationId })
+
+    expect(requestSpy).toHaveBeenCalledWith({
+      url: `${version}/edge/applications/${edgeApplicationId}/error_responses`,
+      method: 'GET'
+    })
+  })
+
+  it('should parse correctly each returned item', async () => {
+    vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+      statusCode: 200,
+      body: {
+        results: [fixtures.errorResponseSample]
+      }
+    })
+
+    const edgeApplicationId = 123
+
+    const { sut } = makeSut()
+    const result = await sut({ edgeApplicationId: edgeApplicationId })
+
+    expect(result).toEqual({
+      id: fixtures.errorResponseSample.id,
+      originId: fixtures.errorResponseSample.origin_id,
+      errorResponses: [
+        {
+          code: fixtures.errorResponseSample.error_responses[0].code.toString(),
+          customStatusCode: fixtures.errorResponseSample.error_responses[0].custom_status_code,
+          timeout: fixtures.errorResponseSample.error_responses[0].timeout,
+          uri: fixtures.errorResponseSample.error_responses[0].uri
+        }
+      ]
+    })
+  })
+})
diff --git a/src/views/EdgeApplications/TabsView.vue b/src/views/EdgeApplications/TabsView.vue
index f30822b72..09c5608af 100644
--- a/src/views/EdgeApplications/TabsView.vue
+++ b/src/views/EdgeApplications/TabsView.vue
@@ -4,12 +4,13 @@
   import TabPanel from 'primevue/tabpanel'
   import ContentBlock from '@/templates/content-block'
   import { useRoute, useRouter } from 'vue-router'
-  import { ref } from 'vue'
+  import { ref, computed } from 'vue'
   import { useToast } from 'primevue/usetoast'
   import EdgeApplicationsOriginsListView from '@/views/EdgeApplicationsOrigins/ListView'
   import EdgeApplicationsRulesEngineListView from '@/views/EdgeApplicationsRulesEngine/ListView'
   import EdgeApplicationsCacheSettingsListView from '@/views/EdgeApplicationsCacheSettings/ListView'
   import EdgeApplicationsFunctionsListView from '@/views/EdgeApplicationsFunctions/ListView'
+  import EdgeApplicationsErrorResponseEditView from '@/views/EdgeApplicationsErrorResponses/EditView'
   import EdgeApplicationsDeviceGroupsListView from '@/views/EdgeApplicationsDeviceGroups/ListView.vue'
   import EditView from './EditView.vue'
 
@@ -21,6 +22,7 @@
     cacheSettingsServices: { type: Object, required: true },
     clipboardWrite: { type: Function, required: true },
     deviceGroupsServices: { type: Object, required: true },
+    errorResponsesServices: { type: Object, required: true },
     rulesEngineServices: { type: Object, required: true },
     functionsServices: { type: Object, required: true }
   })
@@ -41,6 +43,12 @@
   const activeTab = ref(0)
   const edgeApplicationId = ref(route.params.id)
   const isEnableEdgeFunction = ref(false)
+  const showMainSettingsActionBar = computed(() => {
+    return activeTab.value === mapTabs.mainSettings
+  })
+  const showErrorResponsesActionBar = computed(() => {
+    return activeTab.value === mapTabs.errorResponses
+  })
 
   const loaderEdgeApplication = async () => {
     try {
@@ -108,7 +116,7 @@
               :contactSalesEdgeApplicationService="
                 edgeApplicationServices.contactSalesEdgeApplicationService
               "
-              :showActionBar="activeTab === mapTabs.mainSettings"
+              :showActionBar="showMainSettingsActionBar"
             />
           </div>
         </TabPanel>
@@ -129,7 +137,14 @@
             :clipboardWrite="props.clipboardWrite"
           />
         </TabPanel>
-        <TabPanel header="Error Responses"> </TabPanel>
+        <TabPanel header="Error Responses">
+            <EdgeApplicationsErrorResponseEditView
+              :edgeApplicationId="edgeApplicationId"
+              :listOriginsService="props.originsServices.listOriginsService"
+              :showActionBar="showErrorResponsesActionBar"
+              v-bind="props.errorResponsesServices"
+            />
+        </TabPanel>
         <TabPanel header="Cache Settings">
           <EdgeApplicationsCacheSettingsListView
             v-if="activeTab === mapTabs.cacheSettings"
diff --git a/src/views/EdgeApplicationsErrorResponses/EditView.vue b/src/views/EdgeApplicationsErrorResponses/EditView.vue
new file mode 100644
index 000000000..14d69296e
--- /dev/null
+++ b/src/views/EdgeApplicationsErrorResponses/EditView.vue
@@ -0,0 +1,81 @@
+<script setup>
+  import FormFieldsErrorResponses from '@/views/EdgeApplicationsErrorResponses/FormFields/FormFieldsErrorResponses'
+  import ActionBarBlockWithTeleport from '@templates/action-bar-block/action-bar-with-teleport'
+  import EditFormBlock from '@/templates/edit-form-block'
+  import * as yup from 'yup'
+
+  const props = defineProps({
+    edgeApplicationId: {
+      type: String,
+      required: true
+    },
+    listOriginsService: {
+      type: Function,
+      required: true
+    },
+    editErrorResponsesService: {
+      type: Function,
+      required: true
+    },
+    loadErrorResponsesService: {
+      type: Function,
+      required: true
+    },
+    showActionBar: {
+      type: Boolean,
+      default: true
+    }
+  })
+
+  const editService = async (payload) => {
+    return await props.editErrorResponsesService({
+      ...payload,
+      edgeApplicationId: props.edgeApplicationId
+    })
+  }
+
+  const loadService = async (payload) => {
+    return await props.loadErrorResponsesService({
+      ...payload,
+      edgeApplicationId: props.edgeApplicationId
+    })
+  }
+
+  const validationSchema = yup.object({
+    originId: yup.string().required(),
+    errorResponses: yup.array().of(
+      yup.object().shape({
+        code: yup.string().required(),
+        timeout: yup.number().required(),
+        uri: yup.string().nullable(true),
+        customStatusCode: yup.string().nullable(true)
+      })
+    )
+  })
+</script>
+
+<template>
+  <EditFormBlock
+    :editService="editService"
+    :loadService="loadService"
+    :schema="validationSchema"
+    :isTabs="true"
+  >
+    <template #form>
+      <FormFieldsErrorResponses
+        :edgeApplicationId="edgeApplicationId"
+        :listOriginsService="props.listOriginsService"
+      />
+    </template>
+    {{ formValid }}
+    <template #action-bar="{ onSubmit, formValid, onCancel, loading }">
+      <ActionBarBlockWithTeleport
+        v-if="props.showActionBar"
+        @onSubmit="onSubmit"
+        @onCancel="onCancel"
+        :loading="loading"
+        :submitDisabled="!formValid"
+      />
+    </template>
+  </EditFormBlock>
+</template>
diff --git a/src/views/EdgeApplicationsErrorResponses/FormFields/FormFieldsErrorResponses.vue b/src/views/EdgeApplicationsErrorResponses/FormFields/FormFieldsErrorResponses.vue
new file mode 100644
index 000000000..f70dd8dff
--- /dev/null
+++ b/src/views/EdgeApplicationsErrorResponses/FormFields/FormFieldsErrorResponses.vue
@@ -0,0 +1,282 @@
+<script setup>
+  import FormHorizontal from '@/templates/create-form-block/form-horizontal.vue'
+  import Divider from 'primevue/divider'
+  import Dropdown from 'primevue/dropdown'
+  import InputNumber from 'primevue/inputnumber'
+  import PrimeButton from 'primevue/button'
+  import FieldText from '@/templates/form-fields-inputs/fieldText'
+  import { onMounted, ref } from 'vue'
+  import InputText from 'primevue/inputtext'
+  import { useField, useFieldArray } from 'vee-validate'
+
+  const props = defineProps({
+    listOriginsService: {
+      type: Function,
+      required: true
+    },
+    edgeApplicationId: {
+      type: String,
+      required: true
+    }
+  })
+
+  const STATUS_CODE_OPTIONS = [
+    {
+      code: '400',
+      name: '400: Bad Request'
+    },
+    {
+      code: '401',
+      name: '401: Unauthorized'
+    },
+    {
+      code: '403',
+      name: '403: Forbidden'
+    },
+    {
+      code: '404',
+      name: '404: Not Found'
+    },
+    {
+      code: '405',
+      name: '405: Method Not Allowed'
+    },
+    {
+      code: '406',
+      name: '406: Not Acceptable'
+    },
+    {
+      code: '408',
+      name: '408: Request Timeout'
+    },
+    {
+      code: '409',
+      name: '409: Conflict'
+    },
+    {
+      code: '410',
+      name: '410: Gone'
+    },
+    {
+      code: '411',
+      name: '411: Length Required'
+    },
+    {
+      code: '414',
+      name: '414: URI Too Long'
+    },
+    {
+      code: '415',
+      name: '415: Unsupported Media Type'
+    },
+    {
+      code: '416',
+      name: '416: Range Not Satisfiable'
+    },
+    {
+      code: '425',
+      name: '425: Too Early'
+    },
+    {
+      code: '426',
+      name: '426: Upgrade Required'
+    },
+    {
+      code: '429',
+      name: '429: Too Many Requests'
+    },
+    {
+      code: '431',
+      name: '431: Request Header Fields Too Large'
+    },
+    {
+      code: '500',
+      name: '500: Internal Server Error'
+    },
+    {
+      code: '501',
+      name: '501: Not Implemented'
+    },
+    {
+      code: '502',
+      name: '502: Bad Gateway'
+    },
+    {
+      code: '503',
+      name: '503: Service Unavailable'
+    },
+    {
+      code: '504',
+      name: '504: Gateway Timeout'
+    },
+    {
+      code: '505',
+      name: '505: HTTP Version Not Supported'
+    }
+  ]
+  const { value: originId } = useField('originId')
+  const {
+    push: pushErrorResponse,
+    remove: removeErrorResponse,
+    fields: errorResponses
+  } = useFieldArray('errorResponses')
+
+  const defaultErrorResponse = {
+    code: '',
+    timeout: 0,
+    uri: '',
+    customStatusCode: ''
+  }
+
+  const addErrorResponse = () => {
+    pushErrorResponse({ ...defaultErrorResponse })
+  }
+
+  const originOptions = ref([])
+
+  const getOrigins = async () => {
+    originOptions.value = await props.listOriginsService({ id: props.edgeApplicationId })
+  }
+
+  onMounted(async () => {
+    await getOrigins()
+  })
+</script>
+
+<template>
+  <FormHorizontal
+    title="Error Responses List"
+    description="Time to cache error responses before retry request to your origin."
+  >
+    <template
+      #inputs
+      v-if="errorResponses.length > 0"
+    >
+      <Divider
+        align="left"
+        type="dashed"
+      >
+        <b>Then</b>
+      </Divider>
+      <div class="flex flex-wrap gap-6">
+        <div class="flex flex-col w-full sm:max-w-xs gap-2">
+          <label class="text-color text-sm font-medium leading-5">Status Code *</label>
+          <span class="p-input-icon-right w-full flex max-w-lg flex-col items-start gap-2">
+            <i class="pi pi-lock text-color-secondary" />
+            <InputText
+              class="w-full"
+              value="Any (Default)"
+              type="text"
+              :disabled="true"
+            />
+          </span>
+        </div>
+        <div class="flex flex-col w-full sm:max-w-xs gap-2">
+          <label
+            for="maximun-ttl-seconds"
+            class="text-color text-base font-medium"
+          >
+            Error Caching TTL*
+          </label>
+          <InputNumber
+            v-model="errorResponses[0].value.timeout"
+            showButtons
+          />
+        </div>
+      </div>
+
+      <div
+        v-for="(errorResponse, index) in errorResponses"
+        :key="index"
+        :class="{ hidden: index === 0 }"
+      >
+        <div class="flex flex-col gap-6">
+          <div class="flex">
+            <Divider
+              align="left"
+              type="dashed"
+            >
+              <b>And</b>
+            </Divider>
+            <PrimeButton
+              @click="removeErrorResponse(index)"
+              outlined
+              icon="pi pi-trash"
+            />
+          </div>
+
+          <div class="flex flex-wrap gap-6">
+            <div class="flex flex-col w-full sm:max-w-xs gap-2">
+              <label class="text-color text-sm font-medium leading-5">Status Code *</label>
+              <Dropdown
+                v-model="errorResponse.value.code"
+                :options="STATUS_CODE_OPTIONS"
+                optionLabel="name"
+                option-value="code"
+              />
+            </div>
+            <div class="flex flex-col w-full sm:max-w-xs gap-2">
+              <label
+                for="maximun-ttl-seconds"
+                class="text-color text-base font-medium"
+              >
+                Error Caching TTL*
+              </label>
+              <InputNumber
+                v-model="errorResponse.value.timeout"
+                showButtons
+              />
+            </div>
+          </div>
+          <div class="flex flex-col sm:max-w-lg w-full gap-2">
+            <FieldText
+              label="URL path"
+              placeholder="/example.com/path/error-page.txt"
+              :name="`errorResponses[${index}].uri`"
+              :value="errorResponse.value.uri"
+              description="Add a path to an error page created in the source."
+            />
+          </div>
+          <div class="flex flex-col sm:max-w-lg w-full gap-2">
+            <FieldText
+              label="Custom status code"
+              :name="`errorResponses[${index}].customStatusCode`"
+              :value="errorResponse.value.customStatusCode"
+              description="Customize the HTTP status that will be received by the user."
+            />
+          </div>
+        </div>
+      </div>
+      <div class="flex flex-col gap-8 items-start">
+        <Divider />
+        <PrimeButton
+          @click="addErrorResponse"
+          label="New Error Response"
+          outlined
+          icon="pi pi-plus-circle"
+        />
+      </div>
+    </template>
+  </FormHorizontal>
+  <FormHorizontal
+    title="Set Origin"
+    description="Select the origin from which Azion should fetch the error pages."
+  >
+    <template #inputs>
+      <div class="flex flex-col w-full sm:max-w-xs gap-2">
+        <label
+          for="method"
+          class="text-color text-sm font-medium leading-5"
+          >Origin *</label
+        >
+        <Dropdown
+          inputId="originId"
+          v-model="originId"
+          :options="originOptions"
+          optionLabel="name"
+          option-value="originId"
+        />
+      </div>
+    </template>
+  </FormHorizontal>
+</template>

From 9c11ad49cd8bd9f60316240b7828c7f20854581a Mon Sep 17 00:00:00 2001
From: paulosf0 <paulo.ferreira@azion.com>
Date: Fri, 12 Jan 2024 15:30:34 -0300
Subject: [PATCH 059/135] feat: remove console.log

---
 src/router/routes/waf-rules-routes/index.js   |  15 +-
 .../create-waf-rules-allowed-service.js       |  76 ++++++++
 .../delete-waf-rules-allowed-service.js       |  37 ++++
 src/services/waf-rules-services/index.js      |   8 +-
 .../list-waf-rules-allowed-service.js         | 105 +++++++++++
 .../make-waf-rules-allowed-base-url.js        |   4 +
 .../create-waf-rules-allowed-service.test.js  | 118 ++++++++++++
 .../make-waf-rules-allowed.test.js            |  21 +++
 src/views/WafRules/EditView.vue               | 173 ++++++++++++++----
 9 files changed, 518 insertions(+), 39 deletions(-)
 create mode 100644 src/services/waf-rules-services/create-waf-rules-allowed-service.js
 create mode 100644 src/services/waf-rules-services/delete-waf-rules-allowed-service.js
 create mode 100644 src/services/waf-rules-services/list-waf-rules-allowed-service.js
 create mode 100644 src/services/waf-rules-services/make-waf-rules-allowed-base-url.js
 create mode 100644 src/tests/services/waf-rules-services/create-waf-rules-allowed-service.test.js
 create mode 100644 src/tests/services/waf-rules-services/make-waf-rules-allowed.test.js

diff --git a/src/router/routes/waf-rules-routes/index.js b/src/router/routes/waf-rules-routes/index.js
index 45b8749ba..4ca61a672 100644
--- a/src/router/routes/waf-rules-routes/index.js
+++ b/src/router/routes/waf-rules-routes/index.js
@@ -50,7 +50,10 @@ export const wafRulesRoutes = {
       component: () => import('@views/WafRules/EditView.vue'),
       props: {
         editWafRulesService: WafRulesService.editWafRulesService,
-        loadWafRulesService: WafRulesService.loadWafRulesService
+        loadWafRulesService: WafRulesService.loadWafRulesService,
+        listWafRulesAllowedService: WafRulesService.listWafRulesAllowedService,
+        deleteWafRulesAllowedService: WafRulesService.deleteWafRulesAllowedService,
+        createWafRulesAllowedService: WafRulesService.createWafRulesAllowedService
       },
       meta: {
         breadCrumbs: [
@@ -70,7 +73,10 @@ export const wafRulesRoutes = {
       component: () => import('@views/WafRules/EditView.vue'),
       props: {
         editWafRulesService: WafRulesService.editWafRulesService,
-        loadWafRulesService: WafRulesService.loadWafRulesService
+        loadWafRulesService: WafRulesService.loadWafRulesService,
+        listWafRulesAllowedService: WafRulesService.listWafRulesAllowedService,
+        deleteWafRulesAllowedService: WafRulesService.deleteWafRulesAllowedService,
+        createWafRulesAllowedService: WafRulesService.createWafRulesAllowedService
       },
       meta: {
         breadCrumbs: [
@@ -90,7 +96,10 @@ export const wafRulesRoutes = {
       component: () => import('@views/WafRules/EditView.vue'),
       props: {
         editWafRulesService: WafRulesService.editWafRulesService,
-        loadWafRulesService: WafRulesService.loadWafRulesService
+        loadWafRulesService: WafRulesService.loadWafRulesService,
+        listWafRulesAllowedService: WafRulesService.listWafRulesAllowedService,
+        deleteWafRulesAllowedService: WafRulesService.deleteWafRulesAllowedService,
+        createWafRulesAllowedService: WafRulesService.createWafRulesAllowedService
       },
       meta: {
         breadCrumbs: [
diff --git a/src/services/waf-rules-services/create-waf-rules-allowed-service.js b/src/services/waf-rules-services/create-waf-rules-allowed-service.js
new file mode 100644
index 000000000..2aaa45f6b
--- /dev/null
+++ b/src/services/waf-rules-services/create-waf-rules-allowed-service.js
@@ -0,0 +1,76 @@
+import { AxiosHttpClientAdapter } from '../axios/AxiosHttpClientAdapter'
+import * as Errors from '@/services/axios/errors'
+import { makeWafRulesAllowedBaseUrl } from './make-waf-rules-allowed-base-url'
+
+export const createWafRulesAllowedService = async ({ payload, id }) => {
+  let httpResponse = await AxiosHttpClientAdapter.request({
+    url: `${makeWafRulesAllowedBaseUrl()}/${id}/allowed_rules`,
+    method: 'POST',
+    body: adapt(payload)
+  })
+
+  return parseHttpResponse(httpResponse)
+}
+
+const adapt = (payload) => {
+  return {
+    match_zones: payload.matchZones,
+    matches_on: payload.matchesOn,
+    zone: payload.zone,
+    zone_input: payload.zoneInput,
+    path: payload.path,
+    reason: payload.reason,
+    rule_id: payload.ruleId,
+    status: payload.status,
+    use_regex: payload.useRegex
+  }
+}
+
+/**
+ * @param {Object} httpResponse - The HTTP response object.
+ * @param {Object} httpResponse.body - The response body.
+ * @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 201:
+      return {
+        feedback: 'Your waf rule allowed has been created',
+      }
+    case 400:
+      const apiError = extractApiError(httpResponse)
+      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
+  }
+}
+
+/**
+ * @param {Object} errorSchema - The error schema.
+ * @param {string} key - The error key of error schema.
+ * @returns {string|undefined} The result message based on the status code.
+ */
+const extractErrorKey = (errorSchema, key) => {
+  return errorSchema[key]?.[0]
+}
+
+/**
+ * @param {Object} httpResponse - The HTTP response object.
+ * @param {Object} httpResponse.body - The response body.
+ * @returns {string} The result message based on the status code.
+ */
+const extractApiError = (httpResponse) => {
+  const errorMessage = extractErrorKey(httpResponse.body, 'detail')
+
+  return errorMessage
+}
diff --git a/src/services/waf-rules-services/delete-waf-rules-allowed-service.js b/src/services/waf-rules-services/delete-waf-rules-allowed-service.js
new file mode 100644
index 000000000..06fa697db
--- /dev/null
+++ b/src/services/waf-rules-services/delete-waf-rules-allowed-service.js
@@ -0,0 +1,37 @@
+import { AxiosHttpClientAdapter } from '../axios/AxiosHttpClientAdapter'
+import { makeWafRulesAllowedBaseUrl } from './make-waf-rules-allowed-base-url'
+import * as Errors from '@/services/axios/errors'
+
+export const deleteWafRulesAllowedService = async ({ wafId, allowedId }) => {
+  let httpResponse = await AxiosHttpClientAdapter.request({
+    url: `${makeWafRulesAllowedBaseUrl()}/${wafId}/allowed_rules/${allowedId}`,
+    method: 'DELETE'
+  })
+
+  return parseHttpResponse(httpResponse)
+}
+
+/**
+ * @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 204:
+      return 'Waf rule allowed successfully deleted'
+    case 400:
+      throw new Errors.NotFoundError().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/waf-rules-services/index.js b/src/services/waf-rules-services/index.js
index 3893af0e5..56d702709 100644
--- a/src/services/waf-rules-services/index.js
+++ b/src/services/waf-rules-services/index.js
@@ -3,11 +3,17 @@ import { deleteWafRulesService } from './delete-waf-rules-service'
 import { createWafRulesService } from './create-waf-rules-service'
 import { loadWafRulesService } from './load-waf-rules-service'
 import { editWafRulesService } from './edit-waf-rules-service'
+import { listWafRulesAllowedService } from './list-waf-rules-allowed-service'
+import { deleteWafRulesAllowedService } from './delete-waf-rules-allowed-service'
+import { createWafRulesAllowedService } from './create-waf-rules-allowed-service'
 
 export {
   listWafRulesService,
   deleteWafRulesService,
   createWafRulesService,
   loadWafRulesService,
-  editWafRulesService
+  editWafRulesService,
+  listWafRulesAllowedService,
+  deleteWafRulesAllowedService,
+  createWafRulesAllowedService
 }
diff --git a/src/services/waf-rules-services/list-waf-rules-allowed-service.js b/src/services/waf-rules-services/list-waf-rules-allowed-service.js
new file mode 100644
index 000000000..42f955d49
--- /dev/null
+++ b/src/services/waf-rules-services/list-waf-rules-allowed-service.js
@@ -0,0 +1,105 @@
+import { AxiosHttpClientAdapter, parseHttpResponse } from '../axios/AxiosHttpClientAdapter'
+import { makeWafRulesAllowedBaseUrl } from './make-waf-rules-allowed-base-url'
+
+export const listWafRulesAllowedService = async ({ payload, id }) => {
+  // eslint-disable-next-line no-console
+  console.log(payload)
+  let httpResponse = await AxiosHttpClientAdapter.request({
+    url: `${makeWafRulesAllowedBaseUrl()}/${id}/allowed_rules?page=1&page_size=100`,
+    method: 'GET'
+  })
+
+  httpResponse = adapt(httpResponse)
+
+  return parseHttpResponse(httpResponse)
+}
+
+const parseStatusData = (status) => {
+  const parsedStatus = status
+    ? {
+        content: 'Active',
+        severity: 'success'
+      }
+    : {
+        content: 'Inactive',
+        severity: 'danger'
+      }
+
+  return parsedStatus
+}
+
+const replaceString = (str, value) => {
+  return str.replace('$value', value)
+}
+
+const parseMatchZone = (waf) => {
+
+  const arrayMatchZone = []
+
+  const zones = {
+    query_string: 'Query String$value',
+    raw_body: 'Raw Body',
+    request_body: 'Request Body$value',
+    request_header: 'Request Header$value',
+    path: 'Path',
+    file_name: 'File Name (Multipart Body)',
+    conditional_request_header: 'Conditional Request Header$value',
+    conditional_request_body: 'Conditional Request Body$value',
+    conditional_query_string: 'Conditional Query String$value'
+  }
+
+  let value = ''
+  for (const matchZone of waf) {
+    value = zones[matchZone.zone]
+    if (matchZone.zone_input) {
+      if(matchZone.matches_on === 'value') value = replaceString(value, `:${matchZone.zone_input} :${matchZone.zone_input} (Value)`)
+      if(matchZone.matches_on === 'name') value = replaceString(value, `:${matchZone.zone_input} :${matchZone.zone_input} (Name)`)
+    }
+    else if (matchZone.matches_on) {
+      if(matchZone.matches_on === 'value') value = replaceString(value, ' (Value)')
+      if(matchZone.matches_on === 'name') value = replaceString(value, ' (Name)')
+    }
+
+    arrayMatchZone.push(value)
+  }
+
+  return arrayMatchZone
+}
+
+const adapt = (httpResponse) => {
+  /**
+   * Necessary until the API gets the common pattern
+   * of returning the array of data inside results property
+   * like other andpoints.
+   */
+
+  const isArray = Array.isArray(httpResponse.body.results)
+
+  const parsedWafRulesAllowed = isArray
+    ? httpResponse.body.results.map((waf) => {
+        const parsedAllowed = {
+          id: waf.id,
+          lastEditor: waf.last_editor,
+          lastModified: new Intl.DateTimeFormat('us', { dateStyle: 'full' }).format(
+            new Date(waf.last_modified)
+          ),
+          matchZones: parseMatchZone(waf.match_zones),
+          matchesOn: waf.matches_on,
+          zone: waf.zone,
+          zoneInput: waf.zone_input,
+          path: waf.path,
+          reason: waf.reason,
+          ruleId: waf.rule_id,
+          status: parseStatusData(waf.status),
+          useRegex: waf.use_regex
+        }
+
+        return parsedAllowed
+      })
+    : []
+
+  return {
+    body: parsedWafRulesAllowed,
+    statusCode: httpResponse.statusCode
+  }
+}
diff --git a/src/services/waf-rules-services/make-waf-rules-allowed-base-url.js b/src/services/waf-rules-services/make-waf-rules-allowed-base-url.js
new file mode 100644
index 000000000..61e0e9e80
--- /dev/null
+++ b/src/services/waf-rules-services/make-waf-rules-allowed-base-url.js
@@ -0,0 +1,4 @@
+export const makeWafRulesAllowedBaseUrl = () => {
+    return 'v4/edge/waf'
+  }
+  
\ No newline at end of file
diff --git a/src/tests/services/waf-rules-services/create-waf-rules-allowed-service.test.js b/src/tests/services/waf-rules-services/create-waf-rules-allowed-service.test.js
new file mode 100644
index 000000000..d5c62bc2a
--- /dev/null
+++ b/src/tests/services/waf-rules-services/create-waf-rules-allowed-service.test.js
@@ -0,0 +1,118 @@
+import { AxiosHttpClientAdapter } from '@/services/axios/AxiosHttpClientAdapter'
+import * as Errors from '@/services/axios/errors'
+import { createWafRulesAllowedService } from '@/services/waf-rules-services'
+import { describe, expect, it, vi } from 'vitest'
+
+const fixtures = {
+  wafRulesMock: {
+    matchZones: [],
+    matchesOn: '',
+    zone: '',
+    zoneInput: '',
+    path: '',
+    reason: '',
+    ruleId: '',
+    status: true,
+    useRegex: false
+  }
+}
+
+const makeSut = () => {
+  const sut = createWafRulesAllowedService
+
+  return {
+    sut
+  }
+}
+
+describe('WafRulesServices', () => {
+  it('should call API with correct params', async () => {
+    const requestSpy = vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+      statusCode: 201,
+      body: fixtures.wafRulesMock
+    })
+    const { sut } = makeSut()
+    await sut({ payload: fixtures.wafRulesMock, id: 10 })
+
+    expect(requestSpy).toHaveBeenCalledWith({
+      url: 'v4/edge/waf/10/allowed_rules',
+      method: 'POST',
+      body: {
+        match_zones: fixtures.wafRulesMock.matchZones,
+        matches_on: fixtures.wafRulesMock.matchesOn,
+        zone: fixtures.wafRulesMock.zone,
+        zone_input: fixtures.wafRulesMock.zoneInput,
+        path: fixtures.wafRulesMock.path,
+        reason: fixtures.wafRulesMock.reason,
+        rule_id: fixtures.wafRulesMock.ruleId,
+        status: fixtures.wafRulesMock.status,
+        use_regex: fixtures.wafRulesMock.useRegex
+      }
+    })
+  })
+
+  it('should return a feedback message on successfully created', async () => {
+    vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+      statusCode: 201,
+      body: fixtures.wafRulesMock
+    })
+    const { sut } = makeSut()
+
+    const data = await sut({payload: fixtures.wafRulesMock, id: 10 })
+
+    expect(data).toStrictEqual({
+      feedback: 'Your waf rule allowed has been created',
+    })
+  })
+
+  it('Should return an API error for an 400 response status', async () => {
+    const errorKey = 'detail'
+    const apiErrorMock = 'This field is required.'
+    vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+      statusCode: 400,
+      body: {
+        [errorKey]: [apiErrorMock]
+      }
+    })
+    const { sut } = makeSut()
+
+    const feedbackMessage = sut({payload: fixtures.wafRulesMock, id: 10 })
+
+    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
+      })
+      const { sut } = makeSut()
+
+      const response = sut({payload: fixtures.wafRulesMock, id: 10 })
+
+      expect(response).rejects.toBe(expectedError)
+    }
+  )
+})
diff --git a/src/tests/services/waf-rules-services/make-waf-rules-allowed.test.js b/src/tests/services/waf-rules-services/make-waf-rules-allowed.test.js
new file mode 100644
index 000000000..4b84f1a0b
--- /dev/null
+++ b/src/tests/services/waf-rules-services/make-waf-rules-allowed.test.js
@@ -0,0 +1,21 @@
+import { makeWafRulesAllowedBaseUrl } from '@/services/waf-rules-services/make-waf-rules-allowed-base-url'
+import { assert, describe, it } from 'vitest'
+
+const makeSut = () => {
+  const sut = makeWafRulesAllowedBaseUrl
+
+  return {
+    sut
+  }
+}
+
+describe('WafRulesServices', () => {
+  it('should return the API base url to waf rules allowed service', () => {
+    const { sut } = makeSut()
+    const correctApiUrl = `v4/edge/waf`
+
+    const baseUrl = sut()
+
+    assert.strictEqual(baseUrl, correctApiUrl)
+  })
+})
diff --git a/src/views/WafRules/EditView.vue b/src/views/WafRules/EditView.vue
index dce265a7d..93249af93 100644
--- a/src/views/WafRules/EditView.vue
+++ b/src/views/WafRules/EditView.vue
@@ -35,23 +35,22 @@
           <h1>Tuning</h1>
         </TabPanel>
         <TabPanel header="Allowed Rules">
-          <h1>Allowed Rules</h1>
-          <!-- <ListTableNoHeaderBlock
-            ref="listIDNSResourcesRef"
+          <ListTableNoHeaderBlock
+            ref="listAllowedRef"
             v-if="hasContentToList"
-            pageTitleDelete="Record"
-            addButtonLabel="Add"
-            :editInDrawer="openEditDrawerIDNSResource"
-            :columns="recordListColumns"
-            :listService="listRecordsServiceIntelligentDNSDecorator"
-            :deleteService="deleteRecordsServiceIntelligentDNSDecorator"
+            pageTitleDelete="Waf Rules Allowed"
+            addButtonLabel="Allowed Rule"
+            :editInDrawer="openEditDrawerWafRulesAllowed"
+            :columns="wafRulesAllowedColumns"
+            :listService="handleListWafRulesAllowedService"
+            :deleteService="handleDeleteWafRulesAllowedService"
             @on-load-data="handleLoadData"
-            emptyListMessage="No Record found."
+            emptyListMessage="No Waf Rules Allowed found."
           >
             <template #addButton>
               <PrimeButton
                 icon="pi pi-plus"
-                label="Add"
+                label="Allowed Rule"
                 @click="openCreateDrawerIDNSResource"
               />
             </template>
@@ -59,10 +58,9 @@
 
           <EmptyResultsBlock
             v-else
-            title="No record has been created"
-            description=" Click the button below to initiate the setup process and create your first record."
-            createButtonLabel="Add"
-            createPagePath="records/create"
+            title="No Waf Rules Allowed has been created"
+            description=" Click the button below to initiate the setup process and create your first waf rules allowed."
+            createButtonLabel="Allowed Rule"
             :documentationService="documentationService"
             :inTabs="true"
           >
@@ -80,27 +78,26 @@
           </EmptyResultsBlock>
 
           <CreateDrawerBlock
-            v-if="showCreateRecordDrawer"
-            v-model:visible="showCreateRecordDrawer"
-            :createService="createRecordsService"
-            :schema="validationSchemaIDNSRecords"
-            :initialValues="initialValuesCreateRecords"
-            @onSuccess="reloadResourcesList"
-            title="Create Intelligent DNS Record"
+            v-if="showCreateWafRulesAllowedDrawer"
+            v-model:visible="showCreateWafRulesAllowedDrawer"
+            :createService="props.createWafRulesAllowedService"
+            :schema="validationSchemaAllowed"
+            :initialValues="initialValues"
+            @onSuccess="reloadWafRulesAllowedList"
+            title="Create New"
           >
             <template #formFields>
-              <FormFieldsRecords />
             </template>
           </CreateDrawerBlock>
 
-          <EditDrawerBlock
-            v-if="showEditRecordDrawer"
+          <!-- <EditDrawerBlock
+            v-if="showEditWafRulesAllowedDrawer"
             :id="selectedIdnsRecordToEdit"
             v-model:visible="showEditRecordDrawer"
             :loadService="loadRecordServiceWithIDNSIdDecorator"
             :editService="editRecordServiceWithIDNSIdDecorator"
             :schema="validationSchemaIDNSRecords"
-            @onSuccess="reloadResourcesList"
+            @onSuccess="reloadWafRulesAllowedList"
             title="Edit Intelligent DNS Record"
           >
             <template #formFields>
@@ -114,16 +111,17 @@
   </ContentBlock>
 </template>
 <script setup>
-  //   import Illustration from '@/assets/svg/illustration-layers.vue'
+  import Illustration from '@/assets/svg/illustration-layers.vue'
   import ActionBarTemplate from '@/templates/action-bar-block/action-bar-with-teleport'
   import ContentBlock from '@/templates/content-block'
-  //   import EmptyResultsBlock from '@/templates/empty-results-block'
-  //   import CreateDrawerBlock from '@templates/create-drawer-block'
-  //   import EditDrawerBlock from '@templates/edit-drawer-block'
+  import EmptyResultsBlock from '@/templates/empty-results-block'
+  import { columnBuilder } from '@/templates/list-table-block/columns/column-builder'
+  import CreateDrawerBlock from '@templates/create-drawer-block'
+  // import EditDrawerBlock from '@templates/edit-drawer-block'
   import EditFormBlock from '@templates/edit-form-block'
-  //   import ListTableNoHeaderBlock from '@templates/list-table-block/no-header'
+  import ListTableNoHeaderBlock from '@templates/list-table-block/no-header'
   import PageHeadingBlock from '@templates/page-heading-block'
-  //   import PrimeButton from 'primevue/button'
+  import PrimeButton from 'primevue/button'
   import TabPanel from 'primevue/tabpanel'
   import TabView from 'primevue/tabview'
   import { computed, onBeforeMount, ref, watch } from 'vue'
@@ -133,6 +131,11 @@
   const route = useRoute()
   const router = useRouter()
   const activeTab = ref(0)
+  const hasContentToList = ref(true)
+  const selectedWafRulesAllowedToEdit = ref(0)
+  const showEditWafRulesAllowedDrawer = ref(false)
+  const showCreateWafRulesAllowedDrawer = ref(false)
+  const listAllowedRef = ref('')
 
   const props = defineProps({
     editWafRulesService: {
@@ -142,9 +145,45 @@
     loadWafRulesService: {
       type: Function,
       required: true
+    },
+    listWafRulesAllowedService: {
+      type: Function,
+      required: true
+    },
+    deleteWafRulesAllowedService: {
+      type: Function,
+      required: true
+    },
+    createWafRulesAllowedService: {
+      type: Function,
+      required: true
     }
   })
 
+  const validationSchemaAllowed = yup.object({
+    matchZones: yup.array(),
+    matchesOn: yup.string(),
+    zone: yup.string(),
+    zoneInput: yup.string(),
+    path: yup.string(),
+    reason: yup.string(),
+    ruleId: yup.string(),
+    status: yup.boolean(),
+    useRegex:yup.boolean()
+  })
+
+  const initialValues = {
+    matchZones: [],
+    matchesOn: '',
+    zone: '',
+    zoneInput: '',
+    path: '',
+    reason: '',
+    ruleId: '',
+    status: false,
+    useRegex:false
+  }
+
   const validationSchema = yup.object({
     name: yup.string().required(),
     crossSiteScriptingSensitivity: yup.string(),
@@ -195,9 +234,53 @@
     }
   }
 
-  //   const handleLoadData = (event) => {
-  //     hasContentToList.value = event
-  //   }
+  const wafRulesAllowedColumns = ref([
+    {
+      field: 'ruleId',
+      header: 'Rule ID'
+    },
+    {
+      field: 'reason',
+      header: 'Description'
+    },
+    {
+      field: 'path',
+      header: 'URI'
+    },
+    {
+      field: 'matchZones',
+      header: 'Match Zone Set',
+      type: 'component',
+      component: (columnData) =>
+        columnBuilder({ data: columnData, columnAppearance: 'expand-column' })
+    },
+    {
+      field: 'lastModified',
+      header: 'Last Modified'
+    },
+    {
+      field: 'status',
+      header: 'Status',
+      type: 'component',
+      component: (columnData) =>
+        columnBuilder({
+          data: columnData,
+          columnAppearance: 'tag'
+        })
+    }
+  ])
+
+  const reloadWafRulesAllowedList = () => {
+    if (hasContentToList.value) {
+      listAllowedRef.value.reload()
+      return
+    }
+    hasContentToList.value = true
+  }
+
+  const handleLoadData = (event) => {
+    hasContentToList.value = event
+  }
 
   const showEditFormWithActionTab = computed(() => {
     return activeTab.value === 0
@@ -207,6 +290,26 @@
     return await props.editWafRulesService(payload, parseInt(wafRuleId.value))
   }
 
+  const handleListWafRulesAllowedService = async (payload) => {
+    return await props.listWafRulesAllowedService({ payload, id: wafRuleId.value })
+  }
+
+  const handleDeleteWafRulesAllowedService = async (id) => {
+    return await props.deleteWafRulesAllowedService({
+      wafId: wafRuleId.value,
+      allowedId: id
+    })
+  }
+
+  const openEditDrawerWafRulesAllowed = (event) => {
+    selectedWafRulesAllowedToEdit.value = event.id
+    showEditWafRulesAllowedDrawer.value = true
+  }
+
+  const openCreateDrawerIDNSResource = () => {
+    showCreateWafRulesAllowedDrawer.value = true
+  }
+
   watch(route, () => {
     renderTabByRouterPath()
   })

From 920813006a7b4c6f5e88cc186fc1e96f997e4e75 Mon Sep 17 00:00:00 2001
From: paulosf0 <paulo.ferreira@azion.com>
Date: Fri, 12 Jan 2024 15:31:39 -0300
Subject: [PATCH 060/135] feat: code format by husky

---
 .../create-waf-rules-allowed-service.js            |  2 +-
 .../list-waf-rules-allowed-service.js              | 14 +++++++-------
 .../make-waf-rules-allowed-base-url.js             |  5 ++---
 .../create-waf-rules-allowed-service.test.js       |  8 ++++----
 src/views/WafRules/EditView.vue                    |  7 +++----
 5 files changed, 17 insertions(+), 19 deletions(-)

diff --git a/src/services/waf-rules-services/create-waf-rules-allowed-service.js b/src/services/waf-rules-services/create-waf-rules-allowed-service.js
index 2aaa45f6b..33bc15a98 100644
--- a/src/services/waf-rules-services/create-waf-rules-allowed-service.js
+++ b/src/services/waf-rules-services/create-waf-rules-allowed-service.js
@@ -37,7 +37,7 @@ const parseHttpResponse = (httpResponse) => {
   switch (httpResponse.statusCode) {
     case 201:
       return {
-        feedback: 'Your waf rule allowed has been created',
+        feedback: 'Your waf rule allowed has been created'
       }
     case 400:
       const apiError = extractApiError(httpResponse)
diff --git a/src/services/waf-rules-services/list-waf-rules-allowed-service.js b/src/services/waf-rules-services/list-waf-rules-allowed-service.js
index 42f955d49..bf0232d9c 100644
--- a/src/services/waf-rules-services/list-waf-rules-allowed-service.js
+++ b/src/services/waf-rules-services/list-waf-rules-allowed-service.js
@@ -33,7 +33,6 @@ const replaceString = (str, value) => {
 }
 
 const parseMatchZone = (waf) => {
-
   const arrayMatchZone = []
 
   const zones = {
@@ -52,12 +51,13 @@ const parseMatchZone = (waf) => {
   for (const matchZone of waf) {
     value = zones[matchZone.zone]
     if (matchZone.zone_input) {
-      if(matchZone.matches_on === 'value') value = replaceString(value, `:${matchZone.zone_input} :${matchZone.zone_input} (Value)`)
-      if(matchZone.matches_on === 'name') value = replaceString(value, `:${matchZone.zone_input} :${matchZone.zone_input} (Name)`)
-    }
-    else if (matchZone.matches_on) {
-      if(matchZone.matches_on === 'value') value = replaceString(value, ' (Value)')
-      if(matchZone.matches_on === 'name') value = replaceString(value, ' (Name)')
+      if (matchZone.matches_on === 'value')
+        value = replaceString(value, `:${matchZone.zone_input} :${matchZone.zone_input} (Value)`)
+      if (matchZone.matches_on === 'name')
+        value = replaceString(value, `:${matchZone.zone_input} :${matchZone.zone_input} (Name)`)
+    } else if (matchZone.matches_on) {
+      if (matchZone.matches_on === 'value') value = replaceString(value, ' (Value)')
+      if (matchZone.matches_on === 'name') value = replaceString(value, ' (Name)')
     }
 
     arrayMatchZone.push(value)
diff --git a/src/services/waf-rules-services/make-waf-rules-allowed-base-url.js b/src/services/waf-rules-services/make-waf-rules-allowed-base-url.js
index 61e0e9e80..8cffc2b4c 100644
--- a/src/services/waf-rules-services/make-waf-rules-allowed-base-url.js
+++ b/src/services/waf-rules-services/make-waf-rules-allowed-base-url.js
@@ -1,4 +1,3 @@
 export const makeWafRulesAllowedBaseUrl = () => {
-    return 'v4/edge/waf'
-  }
-  
\ No newline at end of file
+  return 'v4/edge/waf'
+}
diff --git a/src/tests/services/waf-rules-services/create-waf-rules-allowed-service.test.js b/src/tests/services/waf-rules-services/create-waf-rules-allowed-service.test.js
index d5c62bc2a..358ff380e 100644
--- a/src/tests/services/waf-rules-services/create-waf-rules-allowed-service.test.js
+++ b/src/tests/services/waf-rules-services/create-waf-rules-allowed-service.test.js
@@ -58,10 +58,10 @@ describe('WafRulesServices', () => {
     })
     const { sut } = makeSut()
 
-    const data = await sut({payload: fixtures.wafRulesMock, id: 10 })
+    const data = await sut({ payload: fixtures.wafRulesMock, id: 10 })
 
     expect(data).toStrictEqual({
-      feedback: 'Your waf rule allowed has been created',
+      feedback: 'Your waf rule allowed has been created'
     })
   })
 
@@ -76,7 +76,7 @@ describe('WafRulesServices', () => {
     })
     const { sut } = makeSut()
 
-    const feedbackMessage = sut({payload: fixtures.wafRulesMock, id: 10 })
+    const feedbackMessage = sut({ payload: fixtures.wafRulesMock, id: 10 })
 
     expect(feedbackMessage).rejects.toThrow(apiErrorMock)
   })
@@ -110,7 +110,7 @@ describe('WafRulesServices', () => {
       })
       const { sut } = makeSut()
 
-      const response = sut({payload: fixtures.wafRulesMock, id: 10 })
+      const response = sut({ payload: fixtures.wafRulesMock, id: 10 })
 
       expect(response).rejects.toBe(expectedError)
     }
diff --git a/src/views/WafRules/EditView.vue b/src/views/WafRules/EditView.vue
index 93249af93..19a8ae4e3 100644
--- a/src/views/WafRules/EditView.vue
+++ b/src/views/WafRules/EditView.vue
@@ -86,8 +86,7 @@
             @onSuccess="reloadWafRulesAllowedList"
             title="Create New"
           >
-            <template #formFields>
-            </template>
+            <template #formFields> </template>
           </CreateDrawerBlock>
 
           <!-- <EditDrawerBlock
@@ -169,7 +168,7 @@
     reason: yup.string(),
     ruleId: yup.string(),
     status: yup.boolean(),
-    useRegex:yup.boolean()
+    useRegex: yup.boolean()
   })
 
   const initialValues = {
@@ -181,7 +180,7 @@
     reason: '',
     ruleId: '',
     status: false,
-    useRegex:false
+    useRegex: false
   }
 
   const validationSchema = yup.object({

From aafc65f57626cf5380bfd9024b25e84767a2be9e Mon Sep 17 00:00:00 2001
From: Luiz Cunha <luiz.cunha@azion.com>
Date: Fri, 12 Jan 2024 18:15:07 -0300
Subject: [PATCH 061/135] fix: wrong service base urls

---
 .../make-account-settings-base-url.js                |  3 ++-
 src/services/users-services/load-user-service.js     |  6 +++---
 src/services/users-services/make-user-base-url.js    |  3 ++-
 .../get-account-settings-service.test.js             |  2 +-
 .../make-account-settings-base-url.test.js           |  2 +-
 .../update-account-settings-service.test.js          |  2 +-
 .../users-services/edit-users-service.test.js        |  2 +-
 .../users-services/load-user-service.test.js         |  7 ++++---
 .../FormFields/FormFieldsEditDigitalCertificates.vue |  2 +-
 src/views/EdgeApplications/TabsView.vue              | 12 ++++++------
 src/views/RealTimePurge/CreateView.vue               |  3 +--
 src/views/YourSettings/EditView.vue                  |  5 +----
 12 files changed, 24 insertions(+), 25 deletions(-)

diff --git a/src/services/account-settings-services/make-account-settings-base-url.js b/src/services/account-settings-services/make-account-settings-base-url.js
index f33cb908d..9061feb66 100644
--- a/src/services/account-settings-services/make-account-settings-base-url.js
+++ b/src/services/account-settings-services/make-account-settings-base-url.js
@@ -1,3 +1,4 @@
 export const makeAccountSettingsBaseUrl = () => {
-  return 'iam/account'
+  const version = 'v4'
+  return `${version}/iam/account`
 }
diff --git a/src/services/users-services/load-user-service.js b/src/services/users-services/load-user-service.js
index 939dc9c18..5984fcbdc 100644
--- a/src/services/users-services/load-user-service.js
+++ b/src/services/users-services/load-user-service.js
@@ -1,9 +1,9 @@
 import { AxiosHttpClientAdapter, parseHttpResponse } from '../axios/AxiosHttpClientAdapter'
-import { makeUsersBaseUrl } from './make-users-base-url'
+import { makeUserBaseUrl } from './make-user-base-url'
 
-export const loadUserService = async ({ id }) => {
+export const loadUserService = async () => {
   let httpResponse = await AxiosHttpClientAdapter.request({
-    url: `${makeUsersBaseUrl()}/${id}`,
+    url: `${makeUserBaseUrl()}`,
     method: 'GET'
   })
   httpResponse = adapt(httpResponse)
diff --git a/src/services/users-services/make-user-base-url.js b/src/services/users-services/make-user-base-url.js
index 04fec5442..ba5cc4442 100644
--- a/src/services/users-services/make-user-base-url.js
+++ b/src/services/users-services/make-user-base-url.js
@@ -1,3 +1,4 @@
 export const makeUserBaseUrl = () => {
-  return `iam/user`
+  const version = 'v4'
+  return `${version}/iam/user`
 }
diff --git a/src/tests/services/account-settings-services/get-account-settings-service.test.js b/src/tests/services/account-settings-services/get-account-settings-service.test.js
index 513664c5c..6be62c743 100644
--- a/src/tests/services/account-settings-services/get-account-settings-service.test.js
+++ b/src/tests/services/account-settings-services/get-account-settings-service.test.js
@@ -58,7 +58,7 @@ describe('getAccountSettingsService', () => {
     await sut()
 
     expect(requestSpy).toHaveBeenCalledWith({
-      url: 'iam/account',
+      url: 'v4/iam/account',
       method: 'GET'
     })
   })
diff --git a/src/tests/services/account-settings-services/make-account-settings-base-url.test.js b/src/tests/services/account-settings-services/make-account-settings-base-url.test.js
index f678d49fd..96c04cab6 100644
--- a/src/tests/services/account-settings-services/make-account-settings-base-url.test.js
+++ b/src/tests/services/account-settings-services/make-account-settings-base-url.test.js
@@ -12,7 +12,7 @@ const makeSut = () => {
 describe.concurrent('AccountSettingsServices', () => {
   it('should return the API base url', () => {
     const { sut } = makeSut()
-    const correctApiUrl = 'iam/account'
+    const correctApiUrl = 'v4/iam/account'
 
     const baseUrl = sut()
 
diff --git a/src/tests/services/account-settings-services/update-account-settings-service.test.js b/src/tests/services/account-settings-services/update-account-settings-service.test.js
index 9c5891ced..2dfe3008a 100644
--- a/src/tests/services/account-settings-services/update-account-settings-service.test.js
+++ b/src/tests/services/account-settings-services/update-account-settings-service.test.js
@@ -38,7 +38,7 @@ describe('AccountSettingsServices', () => {
     await sut(fixtures.accountSettingsMock)
 
     expect(requestSpy).toHaveBeenCalledWith({
-      url: 'iam/account',
+      url: 'v4/iam/account',
       method: 'PATCH',
       body: {
         name: fixtures.accountSettingsMock.accountName,
diff --git a/src/tests/services/users-services/edit-users-service.test.js b/src/tests/services/users-services/edit-users-service.test.js
index 18d322e65..52460c7fa 100644
--- a/src/tests/services/users-services/edit-users-service.test.js
+++ b/src/tests/services/users-services/edit-users-service.test.js
@@ -34,7 +34,7 @@ describe('UsersServices', () => {
     await sut(fixtures.userMock)
 
     expect(requestSpy).toHaveBeenCalledWith({
-      url: `iam/user`,
+      url: `v4/iam/user`,
       method: 'PATCH',
       body: {
         first_name: fixtures.userMock.firstName,
diff --git a/src/tests/services/users-services/load-user-service.test.js b/src/tests/services/users-services/load-user-service.test.js
index d1c24e2c8..47ae6f087 100644
--- a/src/tests/services/users-services/load-user-service.test.js
+++ b/src/tests/services/users-services/load-user-service.test.js
@@ -40,11 +40,12 @@ describe('UsersServices', () => {
     })
 
     const { sut } = makeSut()
-    const version = 'v4'
-    await sut({ id: fixtures.userMock.id })
 
+    await sut()
+
+    const version = 'v4'
     expect(requestSpy).toHaveBeenCalledWith({
-      url: `${version}/iam/users/${fixtures.userMock.id}`,
+      url: `${version}/iam/user`,
       method: 'GET'
     })
   })
diff --git a/src/views/DigitalCertificates/FormFields/FormFieldsEditDigitalCertificates.vue b/src/views/DigitalCertificates/FormFields/FormFieldsEditDigitalCertificates.vue
index e0d40532e..b239a1b9a 100644
--- a/src/views/DigitalCertificates/FormFields/FormFieldsEditDigitalCertificates.vue
+++ b/src/views/DigitalCertificates/FormFields/FormFieldsEditDigitalCertificates.vue
@@ -108,7 +108,7 @@
     v-if="!csr && certificateType === certificateTypes.EDGE_CERTIFICATE"
     title="Update a Certificate"
     description="Paste the PEM-encoded certificate and private key in the respective fields to update the certificate. The current certificate and private key are hidden to protect sensitive information."
-    >
+  >
     <template #inputs>
       <div class="flex flex-col sm:max-w-lg w-full gap-2">
         <label>Name *</label>
diff --git a/src/views/EdgeApplications/TabsView.vue b/src/views/EdgeApplications/TabsView.vue
index 09c5608af..506987bd6 100644
--- a/src/views/EdgeApplications/TabsView.vue
+++ b/src/views/EdgeApplications/TabsView.vue
@@ -138,12 +138,12 @@
           />
         </TabPanel>
         <TabPanel header="Error Responses">
-            <EdgeApplicationsErrorResponseEditView
-              :edgeApplicationId="edgeApplicationId"
-              :listOriginsService="props.originsServices.listOriginsService"
-              :showActionBar="showErrorResponsesActionBar"
-              v-bind="props.errorResponsesServices"
-            />
+          <EdgeApplicationsErrorResponseEditView
+            :edgeApplicationId="edgeApplicationId"
+            :listOriginsService="props.originsServices.listOriginsService"
+            :showActionBar="showErrorResponsesActionBar"
+            v-bind="props.errorResponsesServices"
+          />
         </TabPanel>
         <TabPanel header="Cache Settings">
           <EdgeApplicationsCacheSettingsListView
diff --git a/src/views/RealTimePurge/CreateView.vue b/src/views/RealTimePurge/CreateView.vue
index 638133aac..8f9385cac 100644
--- a/src/views/RealTimePurge/CreateView.vue
+++ b/src/views/RealTimePurge/CreateView.vue
@@ -13,8 +13,7 @@
           <InlineMessage
             class="w-fit"
             severity="info"
-            >After a purge is added, the results may take some time to propagate to all edge
-            nodes.
+            >After a purge is added, the results may take some time to propagate to all edge nodes.
           </InlineMessage>
           <FormFieldsCreateRealTimePurge
             :contactSalesRealTimePurgeService="contactSalesRealTimePurgeService"
diff --git a/src/views/YourSettings/EditView.vue b/src/views/YourSettings/EditView.vue
index df5a813b8..d7655a682 100644
--- a/src/views/YourSettings/EditView.vue
+++ b/src/views/YourSettings/EditView.vue
@@ -38,7 +38,6 @@
   import FormFieldsYourSettings from './FormFields/FormFieldsYourSettings.vue'
   import ActionBarBlockWithTeleport from '@templates/action-bar-block/action-bar-with-teleport'
   import * as yup from 'yup'
-  import { useAccountStore } from '@/stores/account'
   import { useToast } from 'primevue/usetoast'
 
   const toast = useToast()
@@ -65,9 +64,7 @@
   })
 
   const loadUser = async () => {
-    const { account } = useAccountStore()
-    const id = account.user_id
-    const userData = await props.loadUserService({ id })
+    const userData = await props.loadUserService()
 
     currentEmail.value = userData.email
 

From 09e0b94d10ff074f2d2188841574974b6f367b8a Mon Sep 17 00:00:00 2001
From: HerbertJulio <herbert.julio@azion.com>
Date: Mon, 15 Jan 2024 09:08:34 -0300
Subject: [PATCH 062/135] refactor: edge firewall routes and props

---
 .../routes/edge-firewall-routes/index.js      | 22 +++++++++----------
 1 file changed, 10 insertions(+), 12 deletions(-)

diff --git a/src/router/routes/edge-firewall-routes/index.js b/src/router/routes/edge-firewall-routes/index.js
index f3b959d39..dc316ca4a 100644
--- a/src/router/routes/edge-firewall-routes/index.js
+++ b/src/router/routes/edge-firewall-routes/index.js
@@ -1,6 +1,5 @@
 import * as Helpers from '@/helpers'
 import * as DomainServices from '@/services/domains-services'
-
 import * as EdgeFirewall from '@/services/edge-firewall-services'
 
 /** @type {import('vue-router').RouteRecordRaw} */
@@ -32,7 +31,7 @@ export const edgeFirewallRoutes = {
       component: () => import('@views/EdgeFirewall/CreateView.vue'),
       props: {
         listDomainsService: DomainServices.listDomainsService,
-        createEdgeFirewallServices: EdgeFirewall.createEdgeFirewallService
+        createEdgeFirewallService: EdgeFirewall.createEdgeFirewallService
       },
       meta: {
         breadCrumbs: [
@@ -48,19 +47,18 @@ export const edgeFirewallRoutes = {
       }
     },
     {
-      path: 'edit/:id/:resources?',
+      path: 'edit/:id/:tab?',
       name: 'edit-edge-firewall',
       component: () => import('@/views/EdgeFirewall/TabsView.vue'),
       props: {
-        // loadEdgeService: EdgeServiceServices.loadEdgeServiceServices,
-        // editEdgeService: EdgeServiceServices.editEdgeServiceServices,
-        // listResourcesServices: EdgeServiceResourcesServices.listResourcesServices,
-        // deleteResourcesServices: EdgeServiceResourcesServices.deleteResourcesServices,
-        // editResourcesServices: EdgeServiceResourcesServices.editResourcesServices,
-        // createResourcesServices: EdgeServiceResourcesServices.createResourcesServices,
-        // loadResourcesServices: EdgeServiceResourcesServices.loadResourcesServices,
-        // documentationServiceResource: Helpers.documentationGuideProducts.edgeServicesResources,
-        // updatedRedirect: 'list-edge-services'
+        edgeFirewallServices: {
+          createEdgeFirewallService: EdgeFirewall.createEdgeFirewallService,
+          loadEdgeFirewallService: EdgeFirewall.loadEdgeFirewallService,
+          editEdgeFirewallService: EdgeFirewall.editEdgeFirewallService,
+          documentationService: Helpers.documentationCatalog.edgeFirewall,
+          updatedRedirect: 'list-edge-firewall'
+        },
+        listDomainsService: DomainServices.listDomainsService
       },
       meta: {
         breadCrumbs: [

From db928c5e7fda05c566c70932ad2eeb8a7941e560 Mon Sep 17 00:00:00 2001
From: HerbertJulio <herbert.julio@azion.com>
Date: Mon, 15 Jan 2024 09:09:53 -0300
Subject: [PATCH 063/135] refactor: edge firewall service payloads

---
 .../create-edge-firewall-service.js           | 21 +++++-
 .../edit-edge-firewall-service.js             | 65 +++++++------------
 src/services/edge-firewall-services/index.js  | 15 ++++-
 .../load-edge-firewall-service.js             | 31 +++++++++
 .../load-edge-functions-service.js            | 59 -----------------
 5 files changed, 85 insertions(+), 106 deletions(-)
 create mode 100644 src/services/edge-firewall-services/load-edge-firewall-service.js
 delete mode 100644 src/services/edge-firewall-services/load-edge-functions-service.js

diff --git a/src/services/edge-firewall-services/create-edge-firewall-service.js b/src/services/edge-firewall-services/create-edge-firewall-service.js
index f87313850..c707bed0f 100644
--- a/src/services/edge-firewall-services/create-edge-firewall-service.js
+++ b/src/services/edge-firewall-services/create-edge-firewall-service.js
@@ -1,5 +1,5 @@
-import { AxiosHttpClientAdapter } from '../axios/AxiosHttpClientAdapter'
 import * as Errors from '@/services/axios/errors'
+import { AxiosHttpClientAdapter } from '../axios/AxiosHttpClientAdapter'
 import { makeEdgeFirewallBaseUrl } from './make-edge-firewall-base-url'
 
 /**
@@ -9,15 +9,30 @@ import { makeEdgeFirewallBaseUrl } from './make-edge-firewall-base-url'
  * @throws {Error} If there is an error with the response.
  */
 export const createEdgeFirewallService = async (payload) => {
+  const newPayload = adapt(payload)
   let httpResponse = await AxiosHttpClientAdapter.request({
     url: `${makeEdgeFirewallBaseUrl()}`,
     method: 'POST',
-    body: payload
+    body: newPayload
   })
 
   return parseHttpResponse(httpResponse)
 }
 
+const adapt = (payload) => {
+  const domains = payload.domains?.map((domain) => domain.id)
+
+  return {
+    name: payload.name,
+    is_active: payload.isActive,
+    edge_functions_enabled: payload.edgeFunctionsEnabled,
+    network_protection_enabled: payload.networkProtectionEnabled,
+    waf_enabled: payload.wafEnabled,
+    debug_rules: payload.debugRules,
+    domains
+  }
+}
+
 /**
  * @param {Object} httpResponse - The HTTP response object.
  * @param {Object} httpResponse.body - The response body.
@@ -30,7 +45,7 @@ const parseHttpResponse = (httpResponse) => {
     case 201:
       return {
         feedback: 'Your Edge Firewall has been created',
-        urlToEditView: `/edge-firewall/edit/${httpResponse.body.id}`
+        urlToEditView: `/edge-firewall/edit/${httpResponse.body.results.id}`
       }
     case 400:
       throw new Errors.NotFoundError().message
diff --git a/src/services/edge-firewall-services/edit-edge-firewall-service.js b/src/services/edge-firewall-services/edit-edge-firewall-service.js
index 6412c2608..be66c9ebf 100644
--- a/src/services/edge-firewall-services/edit-edge-firewall-service.js
+++ b/src/services/edge-firewall-services/edit-edge-firewall-service.js
@@ -1,49 +1,42 @@
 import * as Errors from '@/services/axios/errors'
 import { AxiosHttpClientAdapter } from '../axios/AxiosHttpClientAdapter'
-import { makeEdgeFunctionsBaseUrl } from './make-edge-functions-base-url'
+import { makeEdgeFirewallBaseUrl } from './make-edge-firewall-base-url'
+
+export const editEdgeFirewallService = async (payload) => {
+  const newPayload = adapt(payload)
 
-export const editEdgeFunctionsService = async (payload) => {
-  const parsedPayload = adapt(payload)
   let httpResponse = await AxiosHttpClientAdapter.request({
-    url: `${makeEdgeFunctionsBaseUrl()}/${payload.id}`,
+    url: `${makeEdgeFirewallBaseUrl()}/${payload.id}`,
     method: 'PATCH',
-    body: parsedPayload
+    body: newPayload
   })
 
   return parseHttpResponse(httpResponse)
 }
 
+const adapt = (payload) => {
+  const domains = payload.domains?.map((domain) => domain.id)
+
+  return {
+    name: payload.name,
+    is_active: payload.isActive,
+    edge_functions_enabled: payload.edgeFunctionsEnabled,
+    network_protection_enabled: payload.networkProtectionEnabled,
+    waf_enabled: payload.wafEnabled,
+    debug_rules: payload.debugRules,
+    domains
+  }
+}
+
 /**
  * @param {Object} httpResponse - The HTTP response object.
  * @param {Object} httpResponse.body - The response body.
  * @returns {string} The result message based on the status code.
  */
 const extractApiError = (httpResponse) => {
-  const definedKeys = [
-    'name',
-    'code',
-    'language',
-    'invalid_json',
-    'initiator_type',
-    'json_args',
-    'active'
-  ]
-  let key = definedKeys.find((key) => httpResponse.body[key])
-
-  // Case not found any defined key
-  if (!key) {
-    key = Object.keys(httpResponse.body)[0]
-  }
-
-  const value = httpResponse.body[key]
-  const isString = typeof value === 'string'
-  const isArray = Array.isArray(value)
-
-  let message = ''
-  if (isString) message = value
-  if (isArray) message = value[0]
-
-  return `${key}: ${message}`
+  const apiKeyError = Object.keys(httpResponse.body)[0]
+  const apiValidationError = `${httpResponse.body[apiKeyError][0]}`
+  return apiValidationError
 }
 
 /**
@@ -56,7 +49,7 @@ const extractApiError = (httpResponse) => {
 const parseHttpResponse = (httpResponse) => {
   switch (httpResponse.statusCode) {
     case 200:
-      return 'Your edge function has been updated'
+      return 'Your edge firewall has been updated'
     case 400:
       const apiError400 = extractApiError(httpResponse)
       throw new Error(apiError400)
@@ -72,13 +65,3 @@ const parseHttpResponse = (httpResponse) => {
       throw new Errors.UnexpectedError().message
   }
 }
-
-const adapt = (payload) => {
-  return {
-    name: payload.name,
-    code: payload.code,
-    initiator_type: payload.initiatorType,
-    json_args: JSON.parse(payload.jsonArgs),
-    active: payload.active
-  }
-}
diff --git a/src/services/edge-firewall-services/index.js b/src/services/edge-firewall-services/index.js
index 88618b6df..e66eddb21 100644
--- a/src/services/edge-firewall-services/index.js
+++ b/src/services/edge-firewall-services/index.js
@@ -1,5 +1,14 @@
-import { listEdgeFirewallService } from './list-edge-firewall-service'
-import { deleteEdgeFirewallService } from './delete-edge-firewall-service'
 import { createEdgeFirewallService } from './create-edge-firewall-service'
+import { deleteEdgeFirewallService } from './delete-edge-firewall-service'
+import { editEdgeFirewallService } from './edit-edge-firewall-service'
+import { listEdgeFirewallService } from './list-edge-firewall-service'
+import { loadEdgeFirewallService } from './load-edge-firewall-service'
+
+export {
+    createEdgeFirewallService,
+    deleteEdgeFirewallService,
+    editEdgeFirewallService,
+    listEdgeFirewallService,
+    loadEdgeFirewallService
+}
 
-export { listEdgeFirewallService, deleteEdgeFirewallService, createEdgeFirewallService }
diff --git a/src/services/edge-firewall-services/load-edge-firewall-service.js b/src/services/edge-firewall-services/load-edge-firewall-service.js
new file mode 100644
index 000000000..e05cae18c
--- /dev/null
+++ b/src/services/edge-firewall-services/load-edge-firewall-service.js
@@ -0,0 +1,31 @@
+import { AxiosHttpClientAdapter, parseHttpResponse } from '../axios/AxiosHttpClientAdapter'
+import { makeEdgeFirewallBaseUrl } from './make-edge-firewall-base-url'
+
+export const loadEdgeFirewallService = async ({ id }) => {
+  let httpResponse = await AxiosHttpClientAdapter.request({
+    url: `${makeEdgeFirewallBaseUrl()}/${id}`,
+    method: 'GET'
+  })
+  httpResponse = adapt(httpResponse)
+
+  return parseHttpResponse(httpResponse)
+}
+
+const adapt = ({ body, statusCode }) => {
+  const payload = body.results
+  const parsedBody = {
+    id: payload.id,
+    name: payload.name,
+    isActive: payload.is_active,
+    edgeFunctionsEnabled: payload.edge_functions_enabled,
+    networkProtectionEnabled: payload.network_protection_enabled,
+    wafEnabled: payload.waf_enabled,
+    debugRules: payload.debug_rules,
+    domains: payload.domains || []
+  }
+
+  return {
+    body: parsedBody,
+    statusCode
+  }
+}
diff --git a/src/services/edge-firewall-services/load-edge-functions-service.js b/src/services/edge-firewall-services/load-edge-functions-service.js
deleted file mode 100644
index 089ea6755..000000000
--- a/src/services/edge-firewall-services/load-edge-functions-service.js
+++ /dev/null
@@ -1,59 +0,0 @@
-import { AxiosHttpClientAdapter, parseHttpResponse } from '../axios/AxiosHttpClientAdapter'
-import { makeEdgeFunctionsBaseUrl } from './make-edge-functions-base-url'
-
-export const loadEdgeFunctionsService = async ({ id }) => {
-  let httpResponse = await AxiosHttpClientAdapter.request({
-    url: `${makeEdgeFunctionsBaseUrl()}/${id}`,
-    method: 'GET'
-  })
-  httpResponse = adapt(httpResponse)
-
-  return parseHttpResponse(httpResponse)
-}
-
-const STATUS_AS_TAG = {
-  true: {
-    content: 'Active',
-    severity: 'success'
-  },
-  false: {
-    content: 'Inactive',
-    severity: 'danger'
-  }
-}
-
-const LANGUAGE_WITH_ICON = {
-  javascript: {
-    content: 'JavaScript',
-    icon: 'javascript'
-  },
-  lua: {
-    content: 'Lua',
-    icon: 'lua'
-  }
-}
-
-const adapt = (httpResponse) => {
-  const body = httpResponse.body.results
-
-  const parsedVariable = {
-    id: body.id,
-    active: body.active,
-    language: body.language,
-    initiatorType: body.initiator_type,
-    lastEditor: body.last_editor,
-    referenceCount: body.reference_count,
-    jsonArgs: JSON.stringify(body.json_args, null, 2),
-    name: body.name,
-    code: body.code,
-    version: body.version || '-',
-    modified: new Intl.DateTimeFormat('us', { dateStyle: 'full' }).format(new Date(body.modified)),
-    statusTag: STATUS_AS_TAG[body.active],
-    languageIcon: LANGUAGE_WITH_ICON[body.language]
-  }
-
-  return {
-    body: parsedVariable,
-    statusCode: httpResponse.statusCode
-  }
-}

From bc6cd1f9c8472268f64012ead7397a0b8921854a Mon Sep 17 00:00:00 2001
From: HerbertJulio <herbert.julio@azion.com>
Date: Mon, 15 Jan 2024 09:11:42 -0300
Subject: [PATCH 064/135] refactor: edgeFirewall views and add editView

---
 src/views/EdgeFirewall/CreateView.vue         |  65 ++++----
 src/views/EdgeFirewall/EditView.vue           |  50 +++++++
 .../FormFields/FormFieldsEdgeFirewall.vue     | 141 ++++++++++++------
 src/views/EdgeFirewall/ListView.vue           |   5 +-
 src/views/EdgeFirewall/TabsView.vue           |  99 ++++++------
 5 files changed, 228 insertions(+), 132 deletions(-)
 create mode 100644 src/views/EdgeFirewall/EditView.vue

diff --git a/src/views/EdgeFirewall/CreateView.vue b/src/views/EdgeFirewall/CreateView.vue
index dc2d0dcef..4e00dc792 100644
--- a/src/views/EdgeFirewall/CreateView.vue
+++ b/src/views/EdgeFirewall/CreateView.vue
@@ -1,41 +1,14 @@
-<template>
-  <ContentBlock>
-    <template #heading>
-      <PageHeadingBlock pageTitle="New Rule Set"></PageHeadingBlock>
-    </template>
-    <template #content>
-      <CreateFormBlock
-        :createService="props.createEdgeFirewallServices"
-        :schema="validationSchema"
-        :initialValues="initialValues"
-      >
-        <template #form>
-          <FormCreateEdgeFirewall :domainsService="props.listDomainsService" />
-        </template>
-        <template #action-bar="{ onSubmit, formValid, onCancel, loading }">
-          <ActionBarTemplate
-            @onSubmit="onSubmit"
-            @onCancel="onCancel"
-            :loading="loading"
-            :submitDisabled="!formValid"
-          />
-        </template>
-      </CreateFormBlock>
-    </template>
-  </ContentBlock>
-</template>
-
 <script setup>
-  import CreateFormBlock from '@/templates/create-form-block'
   import ActionBarTemplate from '@/templates/action-bar-block/action-bar-with-teleport'
   import ContentBlock from '@/templates/content-block'
+  import CreateFormBlock from '@/templates/create-form-block'
   import PageHeadingBlock from '@/templates/page-heading-block'
-  import FormCreateEdgeFirewall from './FormFields/FormFieldsEdgeFirewall'
   import * as yup from 'yup'
+  import FormCreateEdgeFirewall from './FormFields/FormFieldsEdgeFirewall'
   defineOptions({ name: 'create-edge-firewall' })
 
   const props = defineProps({
-    createEdgeFirewallServices: {
+    createEdgeFirewallService: {
       type: Function,
       required: true
     },
@@ -54,14 +27,40 @@
     wafEnabled: yup.boolean().label('WAF Enabled')
   })
 
-  
-
   const initialValues = {
     name: '',
-    domains: domainsaa,
+    domains: [],
     isActive: true,
+    debugRules: false,
     edgeFunctionsEnabled: false,
     networkProtectionEnabled: false,
     wafEnabled: false
   }
 </script>
+
+<template>
+  <ContentBlock>
+    <template #heading>
+      <PageHeadingBlock pageTitle="New Rule Set"></PageHeadingBlock>
+    </template>
+    <template #content>
+      <CreateFormBlock
+        :createService="props.createEdgeFirewallService"
+        :schema="validationSchema"
+        :initialValues="initialValues"
+      >
+        <template #form>
+          <FormCreateEdgeFirewall :domainsService="props.listDomainsService" />
+        </template>
+        <template #action-bar="{ onSubmit, formValid, onCancel, loading }">
+          <ActionBarTemplate
+            @onSubmit="onSubmit"
+            @onCancel="onCancel"
+            :loading="loading"
+            :submitDisabled="!formValid"
+          />
+        </template>
+      </CreateFormBlock>
+    </template>
+  </ContentBlock>
+</template>
diff --git a/src/views/EdgeFirewall/EditView.vue b/src/views/EdgeFirewall/EditView.vue
new file mode 100644
index 000000000..5a08f8922
--- /dev/null
+++ b/src/views/EdgeFirewall/EditView.vue
@@ -0,0 +1,50 @@
+<script setup>
+  import ActionBarTemplate from '@/templates/action-bar-block/action-bar-with-teleport'
+  import EditFormBlock from '@/templates/edit-form-block'
+  import FormFieldsEdgeFirewall from '@/views/EdgeFirewall/FormFields/FormFieldsEdgeFirewall'
+  import * as yup from 'yup'
+  defineOptions({ name: 'edit-edge-firewall' })
+
+  const props = defineProps({
+    editEdgeFirewallService: { type: Function, required: true },
+    loadEdgeFirewallService: { type: Function, required: true },
+    loadDomains: { type: Function, required: true },
+    updatedRedirect: { type: String, required: true },
+    showActionBar: { type: Boolean, default: false }
+  })
+
+  const validationSchema = yup.object({
+    name: yup.string().required().label('Name'),
+    domains: yup.array().label('Domains'),
+    isActive: yup.boolean().label('Active'),
+    debugRules: yup.boolean().label('Debug Rules'),
+    edgeFunctionsEnabled: yup.boolean().label('Edge Funcions Enabled'),
+    networkProtectionEnabled: yup.boolean().label('Network Protection Enabled'),
+    wafEnabled: yup.boolean().label('WAF Enabled')
+  })
+</script>
+
+<template>
+  <div>
+    <EditFormBlock
+      :editService="props.editEdgeFirewallService"
+      :loadService="props.loadEdgeFirewallService"
+      :updatedRedirect="updatedRedirect"
+      :schema="validationSchema"
+      :isTabs="true"
+    >
+      <template #form>
+        <FormFieldsEdgeFirewall :domainsService="loadDomains" />
+      </template>
+      <template #action-bar="{ onSubmit, formValid, onCancel, loading }">
+        <ActionBarTemplate
+          v-if="props.showActionBar"
+          @onSubmit="onSubmit"
+          @onCancel="onCancel"
+          :loading="loading"
+          :submitDisabled="!formValid"
+        />
+      </template>
+    </EditFormBlock>
+  </div>
+</template>
diff --git a/src/views/EdgeFirewall/FormFields/FormFieldsEdgeFirewall.vue b/src/views/EdgeFirewall/FormFields/FormFieldsEdgeFirewall.vue
index e1c05c8a8..f91cf901f 100644
--- a/src/views/EdgeFirewall/FormFields/FormFieldsEdgeFirewall.vue
+++ b/src/views/EdgeFirewall/FormFields/FormFieldsEdgeFirewall.vue
@@ -1,11 +1,13 @@
 <script setup>
   import FormHorizontal from '@/templates/create-form-block/form-horizontal'
-  import InputText from 'primevue/inputtext'
-  import InputSwitch from 'primevue/inputswitch'
-  import { useField } from 'vee-validate'
+  import FieldText from '@/templates/form-fields-inputs/fieldText'
   import Card from 'primevue/card'
-  import PrimeTag from 'primevue/tag'
+  import InputSwitch from 'primevue/inputswitch'
   import PickList from 'primevue/picklist'
+  import Skeleton from 'primevue/skeleton'
+  import PrimeTag from 'primevue/tag'
+  import { useField } from 'vee-validate'
+  import { computed, ref, watch } from 'vue'
 
   defineOptions({ name: 'form-fields-edge-firewall' })
 
@@ -16,23 +18,39 @@
     }
   })
 
+  const PICK_LIST_SKELETON = Array.from({ length: 7 }, () => ({}))
+
   const DDosProtectionUnmetered = true
-  const { value: name, errorMessage: nameError } = useField('name')
+
+  const { value: name } = useField('name')
   const { value: domains } = useField('domains')
-  const { value: active } = useField('isActive')
+  const { value: isActive } = useField('isActive')
+  const { value: debugRules } = useField('debugRules')
   const { value: edgeFunctionsEnabled } = useField('edgeFunctionsEnabled')
   const { value: networkProtectionEnabled } = useField('networkProtectionEnabled')
   const { value: wafEnabled } = useField('wafEnabled')
+  const domainsList = ref([PICK_LIST_SKELETON, PICK_LIST_SKELETON])
+  const loading = ref(false)
+  const classLoading = computed(() => (!loading.value ? 'pointer-events-none' : ''))
+
+  const fetchDomains = async () => {
+    const responseDomains = await props.domainsService({ pageSize: 1000 })
+    const alreadySelectedDomainsIds = domains.value?.map((domain) => domain) || []
+
+    const alreadySelectedDomains =
+      responseDomains.filter((domain) => alreadySelectedDomainsIds.includes(domain.id)) || []
 
-  const listDomains = async () => {
-    const domains = await props.domainsService({ pageSize: 1000 })
-    return domains
-      .filter((item) => !item.edgeFirewallId)
-      .map((domain) => ({
-        label: domain.name,
-        value: domain.id
-      }))
+    const notSelectedDomains = responseDomains.filter((domain) => !domain.edgeFirewallId) || []
+
+    domainsList.value = [notSelectedDomains, alreadySelectedDomains]
+    loading.value = true
   }
+
+  watch(domainsList, (newValue) => {
+    domains.value = newValue[1]
+  })
+
+  fetchDomains()
 </script>
 
 <template>
@@ -42,25 +60,13 @@
   >
     <template #inputs>
       <div class="flex flex-col sm:max-w-lg w-full gap-2">
-        <label
-          for="name"
-          class="text-color text-base font-medium"
-          >Name *</label
-        >
-        <InputText
-          v-model="name"
-          type="text"
-          :class="{ 'p-invalid': nameError }"
+        <FieldText
+          label="Name *"
+          placeholder="Insert the Origin Name"
+          name="name"
+          :value="name"
+          description="Give a unique and easy-to-remember name."
         />
-        <small
-          v-if="nameError"
-          class="p-error text-xs font-normal leading-tight"
-        >
-          {{ nameError }}
-        </small>
-        <small class="text-color-secondary text-sm font-normal leading-tight">
-          Give a unique and easy-to-remember name.
-        </small>
       </div>
     </template>
   </FormHorizontal>
@@ -71,24 +77,31 @@
     <template #inputs>
       <div class="flex flex-col sm:max-w-3xl w-full gap-2">
         <PickList
-          v-model="domains"
+          v-model="domainsList"
           :pt="{
-            sourceList: { class: ['h-80'] },
-            targetList: { class: ['h-80'] }
+            sourceList: { class: [`h-80 ${classLoading}`] },
+            targetList: { class: [`h-80 ${classLoading}`] },
+            buttons: { class: classLoading }
           }"
-          dataKey="id"
-          breakpoint="1400px"
           :showSourceControls="false"
           :showTargetControls="false"
         >
           <template #sourceheader>Available</template>
           <template #targetheader>Selected</template>
           <template #item="slotProps">
-            <div class="flex flex-wrap p-2 align-items-center gap-3">
+            <div
+              class="flex flex-wrap p-2 align-items-center gap-3"
+              v-if="loading"
+            >
               <div class="flex-1 flex flex-column gap-2">
                 <span class="font-normal">{{ slotProps.item.name }}</span>
               </div>
             </div>
+            <Skeleton
+              v-else
+              height="2.2rem"
+              class="mb-2 z-0"
+            />
           </template>
         </PickList>
         <small class="text-color-secondary text-sm font-normal leading-tight">
@@ -136,7 +149,7 @@
             :pt="{
               body: {
                 class: `p-4 border rounded-md ${
-                  edgeFunctionsEnabled ? 'border-orange-500' : 'border-gray-100'
+                  edgeFunctionsEnabled ? 'border-orange-500' : 'border-transparent'
                 }`
               },
               title: { class: 'flex justify-between items-center text-base font-medium m-0' },
@@ -156,8 +169,8 @@
           <Card
             :pt="{
               body: {
-                class: `p-4 ${
-                  networkProtectionEnabled ? 'border border-orange-500 rounded-md' : ''
+                class: `p-4 border rounded-md ${
+                  networkProtectionEnabled ? 'border-orange-500' : 'border-transparent'
                 }`
               },
               title: { class: 'flex justify-between items-center text-base font-medium m-0' },
@@ -175,7 +188,9 @@
           <Card
             :pt="{
               body: {
-                class: `p-4 ${wafEnabled ? 'border border-orange-500 rounded-md' : ''}`
+                class: `p-4 border rounded-md ${
+                  wafEnabled ? 'border-orange-500' : 'border-transparent'
+                }`
               },
               title: { class: 'flex justify-between items-center text-base font-medium m-0' },
               subtitle: {
@@ -193,6 +208,46 @@
       </div>
     </template>
   </FormHorizontal>
+  <FormHorizontal
+    title="Debug Rules"
+    description="Create a log of executed rules. Logs can be accessed through Data Streaming, Real-Time Events or Real-Time Events GraphQL API."
+  >
+    <template #inputs>
+      <div class="flex flex-col gap-2">
+        <Card
+          :pt="{
+            root: { class: 'shadow-none  rounded-none' },
+            body: { class: 'py-4 border-0' },
+            content: { class: 'ml-12' },
+            title: { class: 'flex items-center text-base m-0 gap-3 font-medium' },
+            subtitle: {
+              class: 'text-sm font-normal text-color-secondary m-0 pr-0 md:pr-[2.5rem]'
+            }
+          }"
+        >
+          <template #title>
+            <InputSwitch
+              v-model="debugRules"
+              inputId="active"
+            />
+            <div class="flex-col gap-1">
+              <label
+                for="active"
+                class="text-color text-sm font-normal"
+                >Active</label
+              >
+            </div>
+          </template>
+          <template #content>
+            <small class="text-color-secondary text-sm">
+              Rules that were successfully executed will be shown under the $traceback field in Data
+              Streaming and Real-Time Events or the $stacktrace variable in GraphQL.
+            </small>
+          </template>
+        </Card>
+      </div>
+    </template>
+  </FormHorizontal>
   <FormHorizontal title="Status">
     <template #inputs>
       <div class="flex flex-col w-full gap-2">
@@ -201,7 +256,7 @@
         >
           <span class="p-input-icon-right w-full flex max-w-lg items-start gap-2 pb-3 pt-2">
             <InputSwitch
-              v-model="active"
+              v-model="isActive"
               inputId="activeStatus"
             />
             <label
diff --git a/src/views/EdgeFirewall/ListView.vue b/src/views/EdgeFirewall/ListView.vue
index afc89e04f..942fd9d27 100644
--- a/src/views/EdgeFirewall/ListView.vue
+++ b/src/views/EdgeFirewall/ListView.vue
@@ -1,9 +1,10 @@
 <script setup>
-  import ListTableBlock from '@/templates/list-table-block'
-  import EmptyResultsBlock from '@/templates/empty-results-block'
   import Illustration from '@/assets/svg/illustration-layers'
   import ContentBlock from '@/templates/content-block'
+  import EmptyResultsBlock from '@/templates/empty-results-block'
+  import ListTableBlock from '@/templates/list-table-block'
   import { columnBuilder } from '@/templates/list-table-block/columns/column-builder'
+  import PageHeadingBlock from '@/templates/page-heading-block'
   import { computed, ref } from 'vue'
   defineOptions({ name: 'edge-firewall-view' })
 
diff --git a/src/views/EdgeFirewall/TabsView.vue b/src/views/EdgeFirewall/TabsView.vue
index 1688fc35a..49dbc7b98 100644
--- a/src/views/EdgeFirewall/TabsView.vue
+++ b/src/views/EdgeFirewall/TabsView.vue
@@ -1,23 +1,19 @@
 <script setup>
+  import ContentBlock from '@/templates/content-block'
   import PageHeadingBlock from '@/templates/page-heading-block'
-  import TabView from 'primevue/tabview'
+  import EditView from '@/views/EdgeFirewall/EditView'
   import TabPanel from 'primevue/tabpanel'
-  import ContentBlock from '@/templates/content-block'
-  import { useRoute, useRouter } from 'vue-router'
-  import { ref } from 'vue'
+  import TabView from 'primevue/tabview'
   import { useToast } from 'primevue/usetoast'
-  
-  import EdgeApplicationsRulesEngineListView from '@/views/EdgeApplicationsRulesEngine/ListView'
-  import EdgeApplicationsFunctionsListView from '@/views/EdgeApplicationsFunctions/ListView'
-  import EditView from './EditView.vue'
 
-  defineOptions({ name: 'tabs-edge-service' })
+  import { ref } from 'vue'
+  import { useRoute, useRouter } from 'vue-router'
+
+  defineOptions({ name: 'tabs-edge-firewall' })
 
   const props = defineProps({
     edgeFirewallServices: { type: Object, required: true },
-    listDomainsService: { type: Function, required: true },
-    rulesEngineServices: { type: Object, required: true },
-    functionsServices: { type: Object, required: true }
+    listDomainsService: { type: Function, required: true }
   })
 
   const mapTabs = {
@@ -30,24 +26,31 @@
   const route = useRoute()
   const router = useRouter()
   const activeTab = ref(0)
-  const edgeApplicationId = ref(route.params.id)
+  const edgeFirewallId = ref(route.params.id)
   const isEnableFunction = ref(false)
+  const responseEdgeFirewall = ref(false)
+  const title = ref('Name Rule Set')
 
-  // const loaderEdgeApplication = async () => {
-  //   try {
-  //     const { edgeFunctions, loadBalancer } =
-  //       await props.edgeApplicationServices.loadEdgeApplication({
-  //         id: edgeApplicationId.value
-  //       })
-  //     isEnableEdgeFunction.value = edgeFunctions
-  //   } catch (error) {
-  //     toast.add({
-  //       closable: true,
-  //       severity: 'error',
-  //       summary: error
-  //     })
-  //   }
-  // }
+  const loaderEdgeFirewall = async () => {
+    try {
+      if (responseEdgeFirewall.value) return responseEdgeFirewall.value
+
+      const response = await props.edgeFirewallServices.loadEdgeFirewallService({
+        id: edgeFirewallId.value
+      })
+
+      const { edgeFunctionsEnabled, name } = response
+      isEnableFunction.value = edgeFunctionsEnabled
+      title.value = name
+      responseEdgeFirewall.value = response
+    } catch (error) {
+      toast.add({
+        closable: true,
+        severity: 'error',
+        summary: error
+      })
+    }
+  }
 
   const getTabFromValue = (selectedTabIndex) => {
     const tabNames = Object.keys(mapTabs)
@@ -59,7 +62,7 @@
     const tab = getTabFromValue(event.index)
     activeTab.value = event.index
     const params = {
-      id: edgeApplicationId.value,
+      id: edgeFirewallId.value,
       tab
     }
     router.push({
@@ -69,7 +72,7 @@
   }
 
   const renderTabCurrentRouter = async () => {
-    // await loaderEdgeApplication()
+    await loaderEdgeFirewall()
     const { tab } = route.params
     const defaultTabIndex = 0
     const activeTabIndexByRoute = mapTabs[tab] || defaultTabIndex
@@ -82,41 +85,29 @@
 <template>
   <ContentBlock>
     <template #heading>
-      <PageHeadingBlock pageTitle="Name Rule Set" />
+      <PageHeadingBlock :pageTitle="title" />
     </template>
     <template #content>
       <TabView
         :activeIndex="activeTab"
         @tab-click="changeRouteByClickingOnTab"
         class="w-full h-full"
+        v-if="responseEdgeFirewall"
       >
         <TabPanel header="Main Settings">
-          <div class="mt-8">
-            <EditView
-              :editEdgeFirewallService="edgeFirewallServices.editEdgeApplication"
-              :loadEdgeEdgeFirewallService="edgeFirewallServices.loadEdgeApplication"
-              :updatedRedirect="edgeFirewallServices.updatedRedirect"
-              :showActionBar="activeTab === mapTabs.mainSettings"
-            />
-          </div>
+          <EditView
+            :editEdgeFirewallService="edgeFirewallServices.editEdgeFirewallService"
+            :loadEdgeFirewallService="loaderEdgeFirewall"
+            :loadDomains="props.listDomainsService"
+            :updatedRedirect="edgeFirewallServices.updatedRedirect"
+            :showActionBar="activeTab === mapTabs.mainSettings"
+          />
         </TabPanel>
         <TabPanel
           header="Functions"
-          v-if="isEnableEdgeFunction"
-        >
-          <EdgeApplicationsFunctionsListView
-            v-if="activeTab === mapTabs.functions"
-            v-bind="props.functionsServices"
-            :edgeApplicationId="edgeApplicationId"
-          />
-        </TabPanel>
-        <TabPanel header="Rules Engine">
-          <EdgeApplicationsRulesEngineListView
-            v-if="activeTab === mapTabs.rulesEngine"
-            :edgeApplicationId="edgeApplicationId"
-            v-bind="props.rulesEngineServices"
-          />
-        </TabPanel>
+          v-if="isEnableFunction"
+        ></TabPanel>
+        <TabPanel header="Rules Engine"></TabPanel>
       </TabView>
     </template>
   </ContentBlock>

From c73a46891c3408f375b0e4162197afb33c14e09f Mon Sep 17 00:00:00 2001
From: HerbertJulio <herbert.julio@azion.com>
Date: Mon, 15 Jan 2024 09:12:37 -0300
Subject: [PATCH 065/135] test: add tests for edge firewall services

---
 .../edit-origin-service.test.js               |   7 +-
 .../create-edge-firewall-service.test.js      | 117 ++++++++++++++++++
 .../edit-edge-firewall-service.test.js        | 111 +++++++++++++++++
 .../load-edge-firewall-service.test.js        |  63 ++++++++++
 4 files changed, 297 insertions(+), 1 deletion(-)
 create mode 100644 src/tests/services/edge-firewall-services/create-edge-firewall-service.test.js
 create mode 100644 src/tests/services/edge-firewall-services/edit-edge-firewall-service.test.js
 create mode 100644 src/tests/services/edge-firewall-services/load-edge-firewall-service.test.js

diff --git a/src/tests/services/edge-application-origins-services/edit-origin-service.test.js b/src/tests/services/edge-application-origins-services/edit-origin-service.test.js
index 27cfba897..cc51f157a 100644
--- a/src/tests/services/edge-application-origins-services/edit-origin-service.test.js
+++ b/src/tests/services/edge-application-origins-services/edit-origin-service.test.js
@@ -1,7 +1,7 @@
 import { AxiosHttpClientAdapter } from '@/services/axios/AxiosHttpClientAdapter'
+import * as Errors from '@/services/axios/errors'
 import { editOriginService } from '@/services/edge-application-origins-services'
 import { describe, expect, it, vi } from 'vitest'
-import * as Errors from '@/services/axios/errors'
 
 const fixtures = {
   originMock: {
@@ -18,6 +18,8 @@ const fixtures = {
         serverRole: 'primary'
       }
     ],
+    method: 'GET',
+    isOriginRedirectionEnabled: false,
     originProtocolPolicy: 'http',
     hostHeader: '${host}',
     originPath: '/requests',
@@ -61,6 +63,9 @@ describe('EdgeApplicationOriginsServices', () => {
       url: `${version}/edge_applications/${fixtures.originMock.edgeApplicationId}/origins/${fixtures.originMock.id}`,
       method: 'PATCH',
       body: {
+        origin_type: fixtures.originMock.originType,
+        is_origin_redirection_enabled: fixtures.originMock.isOriginRedirectionEnabled,
+        method: fixtures.originMock.method,
         name: fixtures.originMock.name,
         host_header: fixtures.originMock.hostHeader,
         addresses: fixtures.addressesMock,
diff --git a/src/tests/services/edge-firewall-services/create-edge-firewall-service.test.js b/src/tests/services/edge-firewall-services/create-edge-firewall-service.test.js
new file mode 100644
index 000000000..9310a8eba
--- /dev/null
+++ b/src/tests/services/edge-firewall-services/create-edge-firewall-service.test.js
@@ -0,0 +1,117 @@
+import { AxiosHttpClientAdapter } from '@/services/axios/AxiosHttpClientAdapter'
+import * as Errors from '@/services/axios/errors'
+import { createEdgeFirewallService } from '@/services/edge-firewall-services'
+import { describe, expect, it, vi } from 'vitest'
+
+const fixtures = {
+  edgeFirewallMock: {
+    name: 'test',
+    domains: [{ id: 1 }, { id: 2 }],
+    isActive: true,
+    debugRules: false,
+    edgeFunctionsEnabled: false,
+    networkProtectionEnabled: false,
+    wafEnabled: false
+  }
+}
+const makeSut = () => {
+  const sut = createEdgeFirewallService
+
+  return {
+    sut
+  }
+}
+
+describe('EdgeFirewallService', () => {
+  it('should call API with correct params', async () => {
+    const requestSpy = vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+      statusCode: 201,
+      body: { results: { id: '123' } }
+    })
+
+    const { sut } = makeSut()
+    const version = 'v3'
+    await sut(fixtures.edgeFirewallMock)
+
+    expect(requestSpy).toHaveBeenCalledWith({
+      method: 'POST',
+      url: `${version}/edge_firewall`,
+      body: {
+        name: fixtures.edgeFirewallMock.name,
+        is_active: fixtures.edgeFirewallMock.isActive,
+        debug_rules: fixtures.edgeFirewallMock.debugRules,
+        edge_functions_enabled: fixtures.edgeFirewallMock.edgeFunctionsEnabled,
+        network_protection_enabled: fixtures.edgeFirewallMock.networkProtectionEnabled,
+        waf_enabled: fixtures.edgeFirewallMock.wafEnabled,
+        domains: [1, 2]
+      }
+    })
+  })
+
+  it('should return a feedback message on successfully created', async () => {
+    vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+      statusCode: 201,
+      body: { results: { id: '123' } }
+    })
+
+    const { sut } = makeSut()
+
+    const { feedback } = await sut(fixtures.edgeFirewallMock)
+
+    expect(feedback).toBe('Your Edge Firewall has been created')
+  })
+
+  it('Should return an API error to an invalid edge service name', async () => {
+    const apiErrorMock = 'name should not be empty'
+    vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+      statusCode: 422,
+      body: {
+        errors: [apiErrorMock]
+      }
+    })
+    const { sut } = makeSut()
+
+    const feedbackMessage = sut(fixtures.edgeFirewallMock)
+
+    expect(feedbackMessage).rejects.toThrow(apiErrorMock)
+  })
+
+  it.each([
+    {
+      statusCode: 400,
+      expectedError: new Errors.NotFoundError().message
+    },
+    {
+      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
+      })
+      const { sut } = makeSut()
+
+      const response = sut(fixtures.edgeFirewallMock)
+
+      expect(response).rejects.toBe(expectedError)
+    }
+  )
+})
diff --git a/src/tests/services/edge-firewall-services/edit-edge-firewall-service.test.js b/src/tests/services/edge-firewall-services/edit-edge-firewall-service.test.js
new file mode 100644
index 000000000..8d0475731
--- /dev/null
+++ b/src/tests/services/edge-firewall-services/edit-edge-firewall-service.test.js
@@ -0,0 +1,111 @@
+import { AxiosHttpClientAdapter } from '@/services/axios/AxiosHttpClientAdapter'
+import * as Errors from '@/services/axios/errors'
+import { editEdgeFirewallService } from '@/services/edge-firewall-services'
+import { describe, expect, it, vi } from 'vitest'
+
+const fixtures = {
+  mock: {
+    id: '123',
+    name: 'test',
+    domains: [{ id: 1 }, { id: 2 }],
+    isActive: true,
+    debugRules: false,
+    edgeFunctionsEnabled: false,
+    networkProtectionEnabled: false,
+    wafEnabled: false
+  }
+}
+
+const makeSut = () => {
+  const sut = editEdgeFirewallService
+
+  return {
+    sut
+  }
+}
+
+describe('EdgeFirewallServices', () => {
+  it('should call API with correct params', async () => {
+    const requestSpy = vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+      statusCode: 200
+    })
+    const { sut } = makeSut()
+    const version = 'v3'
+    await sut(fixtures.mock)
+
+    expect(requestSpy).toHaveBeenCalledWith({
+      url: `${version}/edge_firewall/${fixtures.mock.id}`,
+      method: 'PATCH',
+      body: {
+        name: fixtures.mock.name,
+        is_active: fixtures.mock.isActive,
+        debug_rules: fixtures.mock.debugRules,
+        edge_functions_enabled: fixtures.mock.edgeFunctionsEnabled,
+        network_protection_enabled: fixtures.mock.networkProtectionEnabled,
+        waf_enabled: fixtures.mock.wafEnabled,
+        domains: [1, 2]
+      }
+    })
+  })
+
+  it('should return a feedback message on successfully updated', async () => {
+    vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+      statusCode: 200
+    })
+    const { sut } = makeSut()
+
+    const feedbackMessage = await sut(fixtures.mock)
+
+    expect(feedbackMessage).toBe('Your edge firewall has been updated')
+  })
+
+  it('Should return an API error to an invalid edge service name', async () => {
+    const apiErrorMock = 'name should not be empty'
+    vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+      statusCode: 400,
+      body: {
+        errors: [apiErrorMock]
+      }
+    })
+    const { sut } = makeSut()
+
+    const feedbackMessage = sut(fixtures.mock)
+
+    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
+      })
+      const { sut } = makeSut()
+
+      const response = sut(fixtures.mock)
+
+      expect(response).rejects.toBe(expectedError)
+    }
+  )
+})
diff --git a/src/tests/services/edge-firewall-services/load-edge-firewall-service.test.js b/src/tests/services/edge-firewall-services/load-edge-firewall-service.test.js
new file mode 100644
index 000000000..e251ec5f8
--- /dev/null
+++ b/src/tests/services/edge-firewall-services/load-edge-firewall-service.test.js
@@ -0,0 +1,63 @@
+import { AxiosHttpClientAdapter } from '@/services/axios/AxiosHttpClientAdapter'
+import { loadEdgeFirewallService } from '@/services/edge-firewall-services'
+import { describe, expect, it, vi } from 'vitest'
+
+const fixtures = {
+  mock: {
+    id: 1,
+    name: 'test',
+    is_active: true,
+    edge_functions_enabled: true,
+    network_protection_enabled: true,
+    waf_enabled: true,
+    debug_rules: true,
+    domains: []
+  }
+}
+
+const makeSut = () => {
+  const sut = loadEdgeFirewallService
+
+  return {
+    sut
+  }
+}
+
+describe('EdgeFirewallServices', () => {
+  it('should call api with correct params', async () => {
+    const requestSpy = vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+      statusCode: 200,
+      body: { results: [] }
+    })
+    const { sut } = makeSut()
+
+    await sut({ id: fixtures.mock.id })
+
+    const version = 'v3'
+    expect(requestSpy).toHaveBeenCalledWith({
+      url: `${version}/edge_firewall/${fixtures.mock.id}`,
+      method: 'GET'
+    })
+  })
+
+  it('should parsed correctly the returned edge firewall', async () => {
+    vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+      statusCode: 200,
+      body: { results: fixtures.mock }
+    })
+    const { sut } = makeSut()
+
+    const result = await sut({ id: fixtures.mock.id })
+
+    expect(result).toEqual({
+      id: fixtures.mock.id,
+      name: fixtures.mock.name,
+      isActive: fixtures.mock.is_active,
+      edgeFunctionsEnabled: fixtures.mock.edge_functions_enabled,
+      networkProtectionEnabled: fixtures.mock.network_protection_enabled,
+      wafEnabled: fixtures.mock.waf_enabled,
+      debugRules: fixtures.mock.debug_rules,
+      domains: fixtures.mock.domains
+    })
+  })
+})

From 3e8bd364c29c93e71a424f3fd026f20ca83e997f Mon Sep 17 00:00:00 2001
From: HerbertJulio <herbert.julio@azion.com>
Date: Mon, 15 Jan 2024 09:20:24 -0300
Subject: [PATCH 066/135] refactor: edgeApplications views and components

---
 src/views/EdgeApplications/CreateView.vue |  5 +-
 src/views/EdgeApplications/EditView.vue   |  1 +
 src/views/EdgeApplications/ListView.vue   |  2 +-
 src/views/EdgeApplications/TabsView.vue   | 56 +++++++++++++----------
 4 files changed, 35 insertions(+), 29 deletions(-)

diff --git a/src/views/EdgeApplications/CreateView.vue b/src/views/EdgeApplications/CreateView.vue
index 2302c7bac..0209aad45 100644
--- a/src/views/EdgeApplications/CreateView.vue
+++ b/src/views/EdgeApplications/CreateView.vue
@@ -28,10 +28,10 @@
 
 <script setup>
   import CreateFormBlock from '@/templates/create-form-block'
-  import FormFieldsCreateEdgeApplications from './FormFields/FormFieldsCreateEdgeApplications'
   import ActionBarBlockWithTeleport from '@templates/action-bar-block/action-bar-with-teleport'
   import { ref } from 'vue'
   import * as yup from 'yup'
+  import FormFieldsCreateEdgeApplications from './FormFields/FormFieldsCreateEdgeApplications'
 
   import ContentBlock from '@/templates/content-block'
   import PageHeadingBlock from '@/templates/page-heading-block'
@@ -64,10 +64,9 @@
     originProtocolPolicy: 'preserve',
     hostHeader: '${host}',
     browserCacheSettings: 'override',
-    browserCacheSettingsMaximumTtl: '',
+    browserCacheSettingsMaximumTtl: 0,
     cdnCacheSettings: 'override',
     cdnCacheSettingsMaximumTtl: 60,
-    cdnCacheSettingsDefaultTtl: 60,
     active: false
   })
 
diff --git a/src/views/EdgeApplications/EditView.vue b/src/views/EdgeApplications/EditView.vue
index 698196a1c..ebdf94333 100644
--- a/src/views/EdgeApplications/EditView.vue
+++ b/src/views/EdgeApplications/EditView.vue
@@ -4,6 +4,7 @@
     :loadService="props.loadEdgeApplicationService"
     :updatedRedirect="props.updatedRedirect"
     :schema="validationSchema"
+    :isTabs="true"
   >
     <template #form>
       <FormFieldsCreateEdgeApplications
diff --git a/src/views/EdgeApplications/ListView.vue b/src/views/EdgeApplications/ListView.vue
index a98ebb191..42caed3bb 100644
--- a/src/views/EdgeApplications/ListView.vue
+++ b/src/views/EdgeApplications/ListView.vue
@@ -88,7 +88,7 @@
         :deleteService="props.deleteEdgeApplicationService"
         :columns="getColumns"
         @on-load-data="handleLoadData"
-        emptyResultsMessage="No Edge Application found."
+        emptyListMessage="No Edge Application found."
       />
       <EmptyResultsBlock
         v-else
diff --git a/src/views/EdgeApplications/TabsView.vue b/src/views/EdgeApplications/TabsView.vue
index 6a50f0ae3..dd454ba65 100644
--- a/src/views/EdgeApplications/TabsView.vue
+++ b/src/views/EdgeApplications/TabsView.vue
@@ -1,16 +1,16 @@
 <script setup>
-  import PageHeadingBlock from '@/templates/page-heading-block'
-  import TabView from 'primevue/tabview'
-  import TabPanel from 'primevue/tabpanel'
   import ContentBlock from '@/templates/content-block'
-  import { useRoute, useRouter } from 'vue-router'
-  import { ref } from 'vue'
-  import { useToast } from 'primevue/usetoast'
-  import EdgeApplicationsOriginsListView from '@/views/EdgeApplicationsOrigins/ListView'
-  import EdgeApplicationsRulesEngineListView from '@/views/EdgeApplicationsRulesEngine/ListView'
+  import PageHeadingBlock from '@/templates/page-heading-block'
   import EdgeApplicationsCacheSettingsListView from '@/views/EdgeApplicationsCacheSettings/ListView'
-  import EdgeApplicationsFunctionsListView from '@/views/EdgeApplicationsFunctions/ListView'
   import EdgeApplicationsDeviceGroupsListView from '@/views/EdgeApplicationsDeviceGroups/ListView.vue'
+  import EdgeApplicationsFunctionsListView from '@/views/EdgeApplicationsFunctions/ListView'
+  import EdgeApplicationsOriginsListView from '@/views/EdgeApplicationsOrigins/ListView'
+  import EdgeApplicationsRulesEngineListView from '@/views/EdgeApplicationsRulesEngine/ListView'
+  import TabPanel from 'primevue/tabpanel'
+  import TabView from 'primevue/tabview'
+  import { useToast } from 'primevue/usetoast'
+  import { ref } from 'vue'
+  import { useRoute, useRouter } from 'vue-router'
   import EditView from './EditView.vue'
 
   defineOptions({ name: 'tabs-edge-service' })
@@ -42,15 +42,21 @@
   const isLoadBalancer = ref(false)
   const edgeApplicationId = ref(route.params.id)
   const isEnableEdgeFunction = ref(false)
+  const responseEdgeApplication = ref(false)
+  const title = ref('Edit Edge Application')
 
   const loaderEdgeApplication = async () => {
     try {
-      const { edgeFunctions, loadBalancer } =
-        await props.edgeApplicationServices.loadEdgeApplication({
-          id: edgeApplicationId.value
-        })
+      if (responseEdgeApplication.value) return responseEdgeApplication.value
+
+      const response = await props.edgeApplicationServices.loadEdgeApplication({
+        id: edgeApplicationId.value
+      })
+      const { edgeFunctions, loadBalancer, name } = response
+      title.value = name
       isLoadBalancer.value = loadBalancer
       isEnableEdgeFunction.value = edgeFunctions
+      responseEdgeApplication.value = response
     } catch (error) {
       toast.add({
         closable: true,
@@ -93,26 +99,26 @@
 <template>
   <ContentBlock>
     <template #heading>
-      <PageHeadingBlock pageTitle="Edit Edge Application" />
+      <PageHeadingBlock :pageTitle="title" />
     </template>
     <template #content>
       <TabView
         :activeIndex="activeTab"
         @tab-click="changeRouteByClickingOnTab"
         class="w-full h-full"
+        v-if="responseEdgeApplication"
       >
         <TabPanel header="Main Settings">
-          <div class="mt-8">
-            <EditView
-              :editEdgeApplicationService="edgeApplicationServices.editEdgeApplication"
-              :loadEdgeApplicationService="edgeApplicationServices.loadEdgeApplication"
-              :updatedRedirect="edgeApplicationServices.updatedRedirect"
-              :contactSalesEdgeApplicationService="
-                edgeApplicationServices.contactSalesEdgeApplicationService
-              "
-              :showActionBar="activeTab === mapTabs.mainSettings"
-            />
-          </div>
+          <EditView
+            v-if="activeTab === mapTabs.mainSettings"
+            :editEdgeApplicationService="edgeApplicationServices.editEdgeApplication"
+            :loadEdgeApplicationService="loaderEdgeApplication"
+            :updatedRedirect="edgeApplicationServices.updatedRedirect"
+            :contactSalesEdgeApplicationService="
+              edgeApplicationServices.contactSalesEdgeApplicationService
+            "
+            :showActionBar="activeTab === mapTabs.mainSettings"
+          />
         </TabPanel>
         <TabPanel header="Origins">
           <EdgeApplicationsOriginsListView

From b534ee07ed70d59ad71e1fe03bb5b0d7a42cd6f1 Mon Sep 17 00:00:00 2001
From: HerbertJulio <herbert.julio@azion.com>
Date: Mon, 15 Jan 2024 09:24:32 -0300
Subject: [PATCH 067/135] refactor: add event scroll for originkey

---
 .../EdgeApplicationsOrigins/Drawer/index.vue  | 11 +++---
 .../FormFieldsEdgeApplicationsOrigins.vue     | 36 ++++++++++++++-----
 2 files changed, 34 insertions(+), 13 deletions(-)

diff --git a/src/views/EdgeApplicationsOrigins/Drawer/index.vue b/src/views/EdgeApplicationsOrigins/Drawer/index.vue
index 47acaa85e..ac493601d 100644
--- a/src/views/EdgeApplicationsOrigins/Drawer/index.vue
+++ b/src/views/EdgeApplicationsOrigins/Drawer/index.vue
@@ -1,11 +1,11 @@
 <script setup>
-  import { ref } from 'vue'
-  import { useToast } from 'primevue/usetoast'
-  import * as yup from 'yup'
-  import CreateDrawerBlock from '@templates/create-drawer-block'
   import FormFieldsDrawerOrigin from '@/views/EdgeApplicationsOrigins/FormFields/FormFieldsEdgeApplicationsOrigins'
+  import CreateDrawerBlock from '@templates/create-drawer-block'
   import EditDrawerBlock from '@templates/edit-drawer-block'
   import { refDebounced } from '@vueuse/core'
+  import { useToast } from 'primevue/usetoast'
+  import { ref } from 'vue'
+  import * as yup from 'yup'
   defineOptions({ name: 'drawer-origin' })
 
   const emit = defineEmits(['onSuccess'])
@@ -86,6 +86,7 @@
     hmacSecretKey: ''
   })
 
+  const createFormDrawer = ref('')
   const originKey = ref('')
   const validationSchema = yup.object({
     name: yup.string().required().label('Name'),
@@ -170,6 +171,7 @@
   }
 
   const handleCreateOrigin = (feedback) => {
+    createFormDrawer.value.scrollOriginKey()
     originKey.value = feedback.originKey
     emit('onSuccess')
   }
@@ -193,6 +195,7 @@
   >
     <template #formFields="{ disabledFields }">
       <FormFieldsDrawerOrigin
+        ref="createFormDrawer"
         :disabledFields="disabledFields"
         :listOrigins="ORIGIN_TYPES_OPTIONS"
         :copyToClipboard="copyToKey"
diff --git a/src/views/EdgeApplicationsOrigins/FormFields/FormFieldsEdgeApplicationsOrigins.vue b/src/views/EdgeApplicationsOrigins/FormFields/FormFieldsEdgeApplicationsOrigins.vue
index c57bbe7cb..989e55d00 100644
--- a/src/views/EdgeApplicationsOrigins/FormFields/FormFieldsEdgeApplicationsOrigins.vue
+++ b/src/views/EdgeApplicationsOrigins/FormFields/FormFieldsEdgeApplicationsOrigins.vue
@@ -1,15 +1,15 @@
 <script setup>
-  import InputText from 'primevue/inputtext'
+  import FormHorizontal from '@/templates/create-form-block/form-horizontal'
+  import FieldText from '@/templates/form-fields-inputs/fieldText'
+  import PrimeButton from 'primevue/button'
+  import Divider from 'primevue/divider'
+  import Dropdown from 'primevue/dropdown'
   import InputNumber from 'primevue/inputnumber'
   import InputSwitch from 'primevue/inputswitch'
+  import InputText from 'primevue/inputtext'
   import RadioButton from 'primevue/radiobutton'
-  import PrimeButton from 'primevue/button'
-  import Dropdown from 'primevue/dropdown'
-  import Divider from 'primevue/divider'
-  import FormHorizontal from '@/templates/create-form-block/form-horizontal'
   import { useField, useFieldArray } from 'vee-validate'
-  import { computed, watch } from 'vue'
-  import FieldText from '@/templates/form-fields-inputs/fieldText'
+  import { computed, ref, watch } from 'vue'
 
   const props = defineProps({
     disabledFields: {
@@ -70,6 +70,7 @@
       value: 'backup'
     }
   ]
+  const originKeyInput = ref('')
 
   const { value: originKey, setValue: setOriginKey } = useField('originKey')
   const { value: name } = useField('name')
@@ -104,22 +105,38 @@
   }
 
   const resetAddressesFields = (option) => {
+    resetAddresses([{ ...defaultAddress }])
     if (option.value === 'load_balancer') {
       method.value = 'ip_hash'
+      pushAddress({ ...defaultAddress })
+    }
+  }
+
+  const removeCurrentAddress = (index) => {
+    removeAddress(index)
+    if (addresses.value.length === 1) {
+      pushAddress({ ...defaultAddress })
     }
-    resetAddresses([{ ...defaultAddress }])
   }
 
   const addAddress = () => {
     pushAddress({ ...defaultAddress })
   }
 
+  const scrollOriginKey = () => {
+    originKeyInput.value.$el.scrollIntoView({ behavior: 'smooth', block: 'center' })
+  }
+
   watch(
     () => props.generatedOriginKey,
     (value) => {
       setOriginKey(value)
     }
   )
+
+  defineExpose({
+    scrollOriginKey
+  })
 </script>
 
 <template>
@@ -160,6 +177,7 @@
             <InputText
               class="w-full"
               v-model="originKey"
+              ref="originKeyInput"
               type="text"
               :disabled="true"
             />
@@ -322,7 +340,7 @@
               outlined
               type="button"
               aria-label="Remove Origin"
-              @click="removeAddress(index)"
+              @click="removeCurrentAddress(index)"
             />
           </div>
         </div>

From 1f430f0ac13392182e064ea1cd21fe91949cf5a5 Mon Sep 17 00:00:00 2001
From: HerbertJulio <herbert.julio@azion.com>
Date: Mon, 15 Jan 2024 09:25:08 -0300
Subject: [PATCH 068/135] refactor: action-bar-block and create-form-block

---
 src/templates/action-bar-block/go-back.vue    | 19 ++++++-------------
 .../create-form-block/form-horizontal.vue     |  2 +-
 2 files changed, 7 insertions(+), 14 deletions(-)

diff --git a/src/templates/action-bar-block/go-back.vue b/src/templates/action-bar-block/go-back.vue
index cc6669ee5..3bc268387 100644
--- a/src/templates/action-bar-block/go-back.vue
+++ b/src/templates/action-bar-block/go-back.vue
@@ -1,13 +1,15 @@
 <script setup>
   import PrimeButton from 'primevue/button'
-  import { computed } from 'vue'
   import { useRouter } from 'vue-router'
 
   const props = defineProps({
     goBack: {
       type: Function
     },
-    inDrawer: Boolean
+    inDrawer: {
+      type: Boolean,
+      default: false
+    }
   })
   const router = useRouter()
   const handleClick = () => {
@@ -17,23 +19,14 @@
     }
     router.go(-1)
   }
-
-  const inDrawerStyles = computed(() => {
-    return props.inDrawer
-  })
 </script>
 
 <template>
   <div
     class="flex flex-col items-start w-full justify-center p-3 border-t surface-border sticky bottom-0 surface-section z-50 sm:flex-row sm:py-3 sm:px-8 sm:justify-between"
+    :class="{ 'px-0': inDrawer }"
   >
-    <div
-      class="flex w-full justify-content-end max-w-screen-2xl mx-auto 2xl:px-8"
-      :class="{
-        '2xl:px-0': inDrawerStyles,
-        '2xl:px-8': !inDrawerStyles
-      }"
-    >
+    <div class="flex w-full justify-content-end max-w-screen-2xl mx-auto 2xl:px-8 2xl:px-8">
       <div class="flex gap-4 self-stretch items-center max-sm:justify-end">
         <PrimeButton
           severity="primary"
diff --git a/src/templates/create-form-block/form-horizontal.vue b/src/templates/create-form-block/form-horizontal.vue
index b68c3c5b1..c196c785f 100644
--- a/src/templates/create-form-block/form-horizontal.vue
+++ b/src/templates/create-form-block/form-horizontal.vue
@@ -1,6 +1,6 @@
 <template>
   <fieldset
-    class="flex max-w-screen-2xl mx-auto gap-8 w-full surface-section rounded-md border surface-border px-8 py-8 flex-wrap"
+    class="flex max-w-screen-2xl mx-auto gap-8 w-full surface-section rounded-md border surface-border px-8 py-8 flex-wrap min-w-[2rem]"
     :class="{ 'lg:flex-nowrap xl:py-14 xl:p-14 lg:gap-16': !isDrawer }"
   >
     <!-- title and description -->

From f7cf1315ef4084d850d798d53fac84ce4ede9d24 Mon Sep 17 00:00:00 2001
From: HerbertJulio <herbert.julio@azion.com>
Date: Mon, 15 Jan 2024 09:26:10 -0300
Subject: [PATCH 069/135] refactor: update component structure edge

---
 .../FormFieldsCreateEdgeApplications.vue      | 114 +++++++++---------
 ...FormFieldsEdgeApplicationCacheSettings.vue |  26 ++--
 .../FormFields/FormFieldsYourSettings.vue     |  11 +-
 3 files changed, 73 insertions(+), 78 deletions(-)

diff --git a/src/views/EdgeApplications/FormFields/FormFieldsCreateEdgeApplications.vue b/src/views/EdgeApplications/FormFields/FormFieldsCreateEdgeApplications.vue
index 641f7f7f8..46ec19561 100644
--- a/src/views/EdgeApplications/FormFields/FormFieldsCreateEdgeApplications.vue
+++ b/src/views/EdgeApplications/FormFields/FormFieldsCreateEdgeApplications.vue
@@ -1,15 +1,16 @@
 <script setup>
-  import InputText from 'primevue/inputtext'
-  import InputNumber from 'primevue/inputnumber'
-  import RadioButton from 'primevue/radiobutton'
-  import Dropdown from 'primevue/dropdown'
-  import InputSwitch from 'primevue/inputswitch'
-  import Card from 'primevue/card'
   import FormHorizontal from '@/templates/create-form-block/form-horizontal'
+  import FieldText from '@/templates/form-fields-inputs/fieldText'
   import PrimeButton from 'primevue/button'
+  import Card from 'primevue/card'
+  import Dropdown from 'primevue/dropdown'
+  import InputNumber from 'primevue/inputnumber'
+  import InputSwitch from 'primevue/inputswitch'
+  import InputText from 'primevue/inputtext'
+  import RadioButton from 'primevue/radiobutton'
   import PrimeTag from 'primevue/tag'
-  import { computed } from 'vue'
   import { useField } from 'vee-validate'
+  import { computed } from 'vue'
 
   const props = defineProps({
     handleBlock: {
@@ -18,8 +19,7 @@
       default: () => ['full']
     },
     contactSalesEdgeApplicationService: {
-      type: Function,
-      required: true
+      type: Function
     }
   })
 
@@ -64,12 +64,11 @@
   const { value: originProtocolPolicy } = useField('originProtocolPolicy')
   const { value: active } = useField('active')
 
-  const { value: name, errorMessage: nameError } = useField('name')
+  const { value: name } = useField('name')
   const { value: address, errorMessage: addressError } = useField('address')
   const { value: hostHeader, errorMessage: hostHeaderError } = useField('hostHeader')
   const { value: browserCacheSettingsMaximumTtl } = useField('browserCacheSettingsMaximumTtl')
   const { value: cdnCacheSettingsMaximumTtl } = useField('cdnCacheSettingsMaximumTtl')
-  const { value: cdnCacheSettingsDefaultTtl } = useField('cdnCacheSettingsDefaultTtl')
 
   const { value: websocket } = useField('websocket')
   const { value: applicationAcceleration } = useField('applicationAcceleration')
@@ -108,12 +107,7 @@
   const isBrowserCacheTypeHonor = computed(() => browserCacheSettings.value === 'honor')
   const websocketIsEnabled = computed(() => websocket.value)
   const l2CachingIsEnable = computed(() => l2Caching.value)
-  const cdnCacheSettingsIsOverride = computed(() => {
-    if (cdnCacheSettings.value === 'override') {
-      return true
-    }
-    return false
-  })
+  const cdnCacheSettingsIsOverride = computed(() => cdnCacheSettings.value === 'override')
 </script>
 
 <template>
@@ -124,21 +118,11 @@
   >
     <template #inputs>
       <div class="flex flex-col sm:max-w-lg w-full gap-2">
-        <label
-          for="name"
-          class="text-color text-base font-medium"
-          >Name *</label
-        >
-        <InputText
-          v-model="name"
-          type="text"
-          :class="{ 'p-invalid': nameError }"
+        <FieldText
+          label="Name *"
+          name="name"
+          :value="name"
         />
-        <small
-          v-if="nameError"
-          class="p-error text-xs font-normal leading-tight"
-          >{{ nameError }}</small
-        >
       </div>
     </template>
   </FormHorizontal>
@@ -168,15 +152,14 @@
           >
             <template #title>
               <InputSwitch
+                class="pl-10"
                 v-model="isHttpProtocol"
                 name="http"
                 value="http"
                 @click="setDeliveryProtocol('http', false)"
               />
               <div class="flex-col gap-1">
-                <div class="">
-                  <div class="text-color text-sm font-normal">HTTP support</div>
-                </div>
+                <div class="text-color text-sm font-normal">HTTP support</div>
               </div>
             </template>
           </Card>
@@ -193,15 +176,14 @@
           >
             <template #title>
               <InputSwitch
+                class="pl-10"
                 v-model="isHttpsProtocol"
                 @click="setDeliveryProtocol('http,https', false)"
                 name="http,https"
                 value="http,https"
               />
               <div class="flex-col gap-1">
-                <div class="">
-                  <div class="text-color text-sm font-normal">HTTP and HTTPS support</div>
-                </div>
+                <div class="text-color text-sm font-normal">HTTP and HTTPS support</div>
                 <div class="self-stretch text-color-secondary text-sm font-normal">
                   Enables the HTTPS protocol for the application.
                 </div>
@@ -221,15 +203,14 @@
           >
             <template #title>
               <InputSwitch
+                class="pl-10"
                 v-model="isHttp3Protocol"
                 @click="setDeliveryProtocol('http,https', true)"
                 name="http,https"
                 value="http,https"
               />
               <div class="flex-col gap-1">
-                <div class="">
-                  <div class="text-color text-sm font-normal">HTTP, HTTPS and HTTP/3 support</div>
-                </div>
+                <div class="text-color text-sm font-normal">HTTP, HTTPS and HTTP/3 support</div>
                 <div class="self-stretch text-color-secondary text-sm font-normal">
                   Enables the HTTPS protocol for the application and requests in HTTP/3.
                 </div>
@@ -239,7 +220,7 @@
         </div>
       </div>
 
-      <div class="flex gap-6">
+      <div class="flex gap-6 max-sm:flex-col">
         <div class="flex flex-col w-full sm:max-w-xs gap-2">
           <label
             for="port-http"
@@ -290,7 +271,7 @@
       </div>
 
       <div
-        class="flex gap-6"
+        class="flex gap-6 max-sm:flex-col"
         v-if="isHttpsProtocol || isHttp3Protocol"
       >
         <div class="flex flex-col w-full sm:max-w-xs gap-2">
@@ -567,13 +548,6 @@
           <InputNumber
             v-model="cdnCacheSettingsMaximumTtl"
             showButtons
-            v-if="cdnCacheSettingsIsOverride"
-          />
-
-          <InputNumber
-            v-model="cdnCacheSettingsDefaultTtl"
-            showButtons
-            v-if="!cdnCacheSettingsIsOverride"
           />
 
           <div class="text-color-secondary text-sm font-normal">
@@ -597,7 +571,11 @@
         <div class="flex flex-col gap-3">
           <Card
             :pt="{
-              body: { class: 'p-4' },
+              body: {
+                class: `p-4 border rounded-md ${
+                  applicationAcceleration ? 'border-orange-500' : 'border-transparent'
+                }`
+              },
               title: { class: 'flex justify-between items-center text-base font-medium m-0' },
               subtitle: {
                 class: 'text-sm font-normal text-color-secondary m-0 pr-0 md:pr-[2.5rem]'
@@ -638,7 +616,11 @@
           </Card>
           <Card
             :pt="{
-              body: { class: 'p-4' },
+              body: {
+                class: `p-4 border rounded-md ${
+                  deviceDetection ? 'border-orange-500' : 'border-transparent'
+                }`
+              },
               title: { class: 'flex justify-between items-center text-base font-medium m-0' },
               subtitle: {
                 class: 'text-sm font-normal text-color-secondary m-0 pr-0 md:pr-[2.5rem]'
@@ -655,7 +637,11 @@
           </Card>
           <Card
             :pt="{
-              body: { class: 'p-4' },
+              body: {
+                class: `p-4 border rounded-md ${
+                  edgeFunctions ? 'border-orange-500' : 'border-transparent'
+                }`
+              },
               title: { class: 'flex justify-between items-center text-base font-medium m-0' },
               subtitle: {
                 class: 'text-sm font-normal text-color-secondary m-0 pr-0 md:pr-[2.5rem]'
@@ -670,7 +656,11 @@
           </Card>
           <Card
             :pt="{
-              body: { class: 'p-4' },
+              body: {
+                class: `p-4 border rounded-md ${
+                  imageOptimization ? 'border-orange-500' : 'border-transparent'
+                }`
+              },
               title: { class: 'flex justify-between items-center text-base font-medium m-0' },
               subtitle: {
                 class: 'text-sm font-normal text-color-secondary m-0 pr-0 md:pr-[2.5rem]'
@@ -685,7 +675,11 @@
           </Card>
           <Card
             :pt="{
-              body: { class: 'p-4' },
+              body: {
+                class: `p-4 border rounded-md ${
+                  loadBalancer ? 'border-orange-500' : 'border-transparent'
+                }`
+              },
               title: { class: 'flex justify-between items-center text-base font-medium m-0' },
               subtitle: {
                 class: 'text-sm font-normal text-color-secondary m-0 pr-0 md:pr-[2.5rem]'
@@ -708,7 +702,11 @@
         <div class="flex flex-col gap-3">
           <Card
             :pt="{
-              body: { class: 'p-4' },
+              body: {
+                class: `p-4 border rounded-md ${
+                  l2Caching ? 'border-orange-500' : 'border-transparent'
+                }`
+              },
               title: { class: 'flex justify-between items-center text-base font-medium m-0' },
               subtitle: {
                 class: 'text-sm font-normal text-color-secondary m-0 pr-0 md:pr-[2.5rem]'
@@ -730,7 +728,11 @@
           </Card>
           <Card
             :pt="{
-              body: { class: 'p-4' },
+              body: {
+                class: `p-4 border rounded-md ${
+                  websocket ? 'border-orange-500' : 'border-transparent'
+                }`
+              },
               title: { class: 'flex justify-between items-center text-base font-medium m-0' },
               subtitle: {
                 class: 'text-sm font-normal text-color-secondary m-0 pr-0 md:pr-[2.5rem]'
diff --git a/src/views/EdgeApplicationsCacheSettings/FormFields/FormFieldsEdgeApplicationCacheSettings.vue b/src/views/EdgeApplicationsCacheSettings/FormFields/FormFieldsEdgeApplicationCacheSettings.vue
index 427631aeb..39dc002d5 100644
--- a/src/views/EdgeApplicationsCacheSettings/FormFields/FormFieldsEdgeApplicationCacheSettings.vue
+++ b/src/views/EdgeApplicationsCacheSettings/FormFields/FormFieldsEdgeApplicationCacheSettings.vue
@@ -1,15 +1,15 @@
 <script setup>
   import FormHorizontal from '@/templates/create-form-block/form-horizontal'
-  import FieldText from '@/templates/form-fields-inputs/fieldText'
   import FieldInputGroup from '@/templates/form-fields-inputs/fieldInputGroup'
-  import RadioButton from 'primevue/radiobutton'
+  import FieldText from '@/templates/form-fields-inputs/fieldText'
+  import PrimeButton from 'primevue/button'
+  import Divider from 'primevue/divider'
   import InputNumber from 'primevue/inputnumber'
   import InputSwitch from 'primevue/inputswitch'
-  import Divider from 'primevue/divider'
+  import RadioButton from 'primevue/radiobutton'
   import TextArea from 'primevue/textarea'
-  import PrimeButton from 'primevue/button'
-  import { computed, ref, watch } from 'vue'
   import { useField, useFieldArray } from 'vee-validate'
+  import { computed, ref, watch } from 'vue'
 
   const CACHE_SETTINGS_OPTIONS = ref([
     {
@@ -79,12 +79,8 @@
     remove: removeDeviceGroup
   } = useFieldArray('deviceGroup')
 
-  const showMaxTtl = computed(() => {
-    return browserCacheSettings.value === 'override'
-  })
-  const showCdnMaxTtl = computed(() => {
-    return cdnCacheSettings.value === 'override'
-  })
+  const showMaxTtl = computed(() => browserCacheSettings.value === 'override')
+  const showCdnMaxTtl = computed(() => cdnCacheSettings.value === 'override')
   const showSliceConfigurationRange = computed(() => {
     return !!sliceConfigurationEnabled.value
   })
@@ -208,15 +204,13 @@
           TTL isn't received from the origin, cache will be maintained at a default TTL.
         </small>
       </div>
-      <div
-        v-if="showCdnMaxTtl"
-        class="flex flex-col sm:max-w-xs w-full gap-2"
-      >
+      <div class="flex flex-col sm:max-w-xs w-full gap-2">
         <label
           for="cdnCacheSettingsMaximumTtl"
           class="text-color text-sm font-medium"
-          >Maximum TTL (seconds) *</label
         >
+          {{ showCdnMaxTtl ? 'Maximum TTL (seconds)' : 'Default TTL' }}
+        </label>
         <InputNumber
           showButtons
           v-model="cdnCacheSettingsMaximumTtl"
diff --git a/src/views/YourSettings/FormFields/FormFieldsYourSettings.vue b/src/views/YourSettings/FormFields/FormFieldsYourSettings.vue
index b8fdb2d88..dfd2e0720 100644
--- a/src/views/YourSettings/FormFields/FormFieldsYourSettings.vue
+++ b/src/views/YourSettings/FormFields/FormFieldsYourSettings.vue
@@ -1,14 +1,14 @@
 <script setup>
-  import { ref, onMounted, watch, computed } from 'vue'
   import { useField } from 'vee-validate'
+  import { computed, onMounted, ref, watch } from 'vue'
 
   import FormHorizontal from '@/templates/create-form-block/form-horizontal'
-  import InputText from 'primevue/inputtext'
+  import Card from 'primevue/card'
   import Dropdown from 'primevue/dropdown'
-  import InputPassword from 'primevue/password'
-  import InputSwitch from 'primevue/inputswitch'
   import InputMask from 'primevue/inputmask'
-  import Card from 'primevue/card'
+  import InputSwitch from 'primevue/inputswitch'
+  import InputText from 'primevue/inputtext'
+  import InputPassword from 'primevue/password'
 
   const props = defineProps({
     listTimezonesService: {
@@ -163,7 +163,6 @@
             :class="{ 'p-invalid': errorTimezone }"
             v-model="timezone"
           />
-          >
           <small class="text-xs text-color-secondary font-normal leading-tight">
             Timezone of the user.</small
           >

From fc88251fefdd80fb0d2de907b23753b968726529 Mon Sep 17 00:00:00 2001
From: HerbertJulio <herbert.julio@azion.com>
Date: Mon, 15 Jan 2024 09:29:51 -0300
Subject: [PATCH 070/135] fix: adapt response in picklist and origin service

---
 .../azion-dark/extended-components/_picklist.scss     |  2 +-
 .../azion-light/extended-components/_picklist.scss    |  2 +-
 .../list-origins-service.js                           |  2 +-
 .../load-origin-service.js                            |  2 +-
 src/services/edge-firewall-services/index.js          | 11 +++++------
 5 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/src/assets/themes/scss/themes/azion-dark/extended-components/_picklist.scss b/src/assets/themes/scss/themes/azion-dark/extended-components/_picklist.scss
index fdaf33c67..cd16a2038 100644
--- a/src/assets/themes/scss/themes/azion-dark/extended-components/_picklist.scss
+++ b/src/assets/themes/scss/themes/azion-dark/extended-components/_picklist.scss
@@ -15,7 +15,7 @@
     .p-picklist-item {
       padding: 0 0.5rem !important;
       font-size: 0.875rem;
-      min-height: 2.375rem  !important;
+      min-height: 2.375rem !important;
       border-radius: $borderRadius;
       display: flex;
       align-items: center;
diff --git a/src/assets/themes/scss/themes/azion-light/extended-components/_picklist.scss b/src/assets/themes/scss/themes/azion-light/extended-components/_picklist.scss
index fdaf33c67..cd16a2038 100644
--- a/src/assets/themes/scss/themes/azion-light/extended-components/_picklist.scss
+++ b/src/assets/themes/scss/themes/azion-light/extended-components/_picklist.scss
@@ -15,7 +15,7 @@
     .p-picklist-item {
       padding: 0 0.5rem !important;
       font-size: 0.875rem;
-      min-height: 2.375rem  !important;
+      min-height: 2.375rem !important;
       border-radius: $borderRadius;
       display: flex;
       align-items: center;
diff --git a/src/services/edge-application-origins-services/list-origins-service.js b/src/services/edge-application-origins-services/list-origins-service.js
index 51544dc11..c94bee789 100644
--- a/src/services/edge-application-origins-services/list-origins-service.js
+++ b/src/services/edge-application-origins-services/list-origins-service.js
@@ -28,7 +28,7 @@ const adapt = (httpResponse) => {
   }
   const parsedOrigin = httpResponse.body.results?.map((origin) => {
     let formattedListOfAddresses = origin.addresses?.map((address) => address.address) || []
-    
+
     return {
       id: origin.origin_key,
       originKey: {
diff --git a/src/services/edge-application-origins-services/load-origin-service.js b/src/services/edge-application-origins-services/load-origin-service.js
index 19eebc27a..f0c516455 100644
--- a/src/services/edge-application-origins-services/load-origin-service.js
+++ b/src/services/edge-application-origins-services/load-origin-service.js
@@ -12,7 +12,7 @@ export const loadOriginService = async ({ edgeApplicationId, id }) => {
 }
 
 const adapt = (httpResponse) => {
-  const origin = httpResponse.body.results  
+  const origin = httpResponse.body?.results
   const parsedBody = {
     originId: origin.origin_id,
     originKey: origin.origin_key,
diff --git a/src/services/edge-firewall-services/index.js b/src/services/edge-firewall-services/index.js
index e66eddb21..b8fb0f21e 100644
--- a/src/services/edge-firewall-services/index.js
+++ b/src/services/edge-firewall-services/index.js
@@ -5,10 +5,9 @@ import { listEdgeFirewallService } from './list-edge-firewall-service'
 import { loadEdgeFirewallService } from './load-edge-firewall-service'
 
 export {
-    createEdgeFirewallService,
-    deleteEdgeFirewallService,
-    editEdgeFirewallService,
-    listEdgeFirewallService,
-    loadEdgeFirewallService
+  createEdgeFirewallService,
+  deleteEdgeFirewallService,
+  editEdgeFirewallService,
+  listEdgeFirewallService,
+  loadEdgeFirewallService
 }
-

From c535363b98c6b42a6420d1318e3cdc8f3460b9be Mon Sep 17 00:00:00 2001
From: HerbertJulio <herbert.julio@azion.com>
Date: Mon, 15 Jan 2024 10:04:15 -0300
Subject: [PATCH 071/135] refactor: updated  EdgeApplications TabsView

---
 src/views/EdgeApplications/EditView.vue       |  9 +---
 src/views/EdgeApplications/TabsView.vue       | 44 ++++++++++++++-----
 .../EditView.vue                              |  7 +--
 3 files changed, 35 insertions(+), 25 deletions(-)

diff --git a/src/views/EdgeApplications/EditView.vue b/src/views/EdgeApplications/EditView.vue
index ebdf94333..4e1e82c0a 100644
--- a/src/views/EdgeApplications/EditView.vue
+++ b/src/views/EdgeApplications/EditView.vue
@@ -14,7 +14,6 @@
     </template>
     <template #action-bar="{ onSubmit, formValid, onCancel, loading }">
       <ActionBarBlockWithTeleport
-        v-if="showActionBar"
         @onSubmit="onSubmit"
         @onCancel="onCancel"
         :loading="loading"
@@ -25,10 +24,10 @@
 </template>
 
 <script setup>
-  import * as yup from 'yup'
   import EditFormBlock from '@/templates/edit-form-block'
-  import FormFieldsCreateEdgeApplications from './FormFields/FormFieldsCreateEdgeApplications'
   import ActionBarBlockWithTeleport from '@templates/action-bar-block/action-bar-with-teleport'
+  import * as yup from 'yup'
+  import FormFieldsCreateEdgeApplications from './FormFields/FormFieldsCreateEdgeApplications'
 
   const props = defineProps({
     loadEdgeApplicationService: {
@@ -46,10 +45,6 @@
     contactSalesEdgeApplicationService: {
       type: Function,
       required: true
-    },
-    showActionBar: {
-      type: Boolean,
-      default: true
     }
   })
 
diff --git a/src/views/EdgeApplications/TabsView.vue b/src/views/EdgeApplications/TabsView.vue
index b385cf634..1a48a3b71 100644
--- a/src/views/EdgeApplications/TabsView.vue
+++ b/src/views/EdgeApplications/TabsView.vue
@@ -45,14 +45,36 @@
   const edgeApplicationId = ref(route.params.id)
   const isEnableEdgeFunction = ref(false)
   const responseEdgeApplication = ref(false)
-  const title = ref('Edit Edge Application')
-  const showMainSettingsActionBar = computed(() => {
+  const title = ref('')
+
+  const showMainSettings = computed(() => {
     return activeTab.value === mapTabs.mainSettings
   })
-  const showErrorResponsesActionBar = computed(() => {
+
+  const showErrorResponses = computed(() => {
     return activeTab.value === mapTabs.errorResponses
   })
 
+  const showFunctions = computed(() => {
+    return activeTab.value === mapTabs.functions
+  })
+
+  const showRulesEngine = computed(() => {
+    return activeTab.value === mapTabs.rulesEngine
+  })
+
+  const showCacheSettings = computed(() => {
+    return activeTab.value === mapTabs.cacheSettings
+  })
+
+  const showDeviceGroups = computed(() => {
+    return activeTab.value === mapTabs.deviceGroups
+  })
+
+  const showOrigins = computed(() => {
+    return activeTab.value === mapTabs.origins
+  })
+
   const loaderEdgeApplication = async () => {
     try {
       if (responseEdgeApplication.value) return responseEdgeApplication.value
@@ -118,29 +140,27 @@
       >
         <TabPanel header="Main Settings">
           <EditView
-            v-if="showMainSettingsActionBar"
+            v-if="showMainSettings"
             :editEdgeApplicationService="edgeApplicationServices.editEdgeApplication"
             :loadEdgeApplicationService="loaderEdgeApplication"
             :updatedRedirect="edgeApplicationServices.updatedRedirect"
             :contactSalesEdgeApplicationService="
               edgeApplicationServices.contactSalesEdgeApplicationService
             "
-            :showActionBar="showMainSettingsActionBar"
           />
         </TabPanel>
         <TabPanel header="Origins">
           <EdgeApplicationsOriginsListView
-            v-if="activeTab === mapTabs.origins"
+            v-if="showOrigins"
             :edgeApplicationId="edgeApplicationId"
             :isLoadBalancer="isLoadBalancer"
             v-bind="props.originsServices"
             :clipboardWrite="props.clipboardWrite"
           />
         </TabPanel>
-
         <TabPanel header="Device Groups">
           <EdgeApplicationsDeviceGroupsListView
-            v-if="activeTab === mapTabs.deviceGroups"
+            v-if="showDeviceGroups"
             :edgeApplicationId="edgeApplicationId"
             v-bind="props.deviceGroupsServices"
             :clipboardWrite="props.clipboardWrite"
@@ -148,15 +168,15 @@
         </TabPanel>
         <TabPanel header="Error Responses">
           <EdgeApplicationsErrorResponseEditView
+            v-if="showErrorResponses"
             :edgeApplicationId="edgeApplicationId"
             :listOriginsService="props.originsServices.listOriginsService"
-            :showActionBar="showErrorResponsesActionBar"
             v-bind="props.errorResponsesServices"
           />
         </TabPanel>
         <TabPanel header="Cache Settings">
           <EdgeApplicationsCacheSettingsListView
-            v-if="activeTab === mapTabs.cacheSettings"
+            v-if="showCacheSettings"
             :edgeApplicationId="edgeApplicationId"
             v-bind="props.cacheSettingsServices"
           />
@@ -166,14 +186,14 @@
           v-if="isEnableEdgeFunction"
         >
           <EdgeApplicationsFunctionsListView
-            v-if="activeTab === mapTabs.functions"
+            v-if="showFunctions"
             v-bind="props.functionsServices"
             :edgeApplicationId="edgeApplicationId"
           />
         </TabPanel>
         <TabPanel header="Rules Engine">
           <EdgeApplicationsRulesEngineListView
-            v-if="activeTab === mapTabs.rulesEngine"
+            v-if="showRulesEngine"
             :edgeApplicationId="edgeApplicationId"
             v-bind="props.rulesEngineServices"
           />
diff --git a/src/views/EdgeApplicationsErrorResponses/EditView.vue b/src/views/EdgeApplicationsErrorResponses/EditView.vue
index 14d69296e..8c0df8465 100644
--- a/src/views/EdgeApplicationsErrorResponses/EditView.vue
+++ b/src/views/EdgeApplicationsErrorResponses/EditView.vue
@@ -1,7 +1,7 @@
 <script setup>
+  import EditFormBlock from '@/templates/edit-form-block'
   import FormFieldsErrorResponses from '@/views/EdgeApplicationsErrorResponses/FormFields/FormFieldsErrorResponses'
   import ActionBarBlockWithTeleport from '@templates/action-bar-block/action-bar-with-teleport'
-  import EditFormBlock from '@/templates/edit-form-block'
   import * as yup from 'yup'
 
   const props = defineProps({
@@ -20,10 +20,6 @@
     loadErrorResponsesService: {
       type: Function,
       required: true
-    },
-    showActionBar: {
-      type: Boolean,
-      default: true
     }
   })
 
@@ -70,7 +66,6 @@
     {{ formValid }}
     <template #action-bar="{ onSubmit, formValid, onCancel, loading }">
       <ActionBarBlockWithTeleport
-        v-if="props.showActionBar"
         @onSubmit="onSubmit"
         @onCancel="onCancel"
         :loading="loading"

From 4c6e486340500a238e053e7547e0b32b7cefd594 Mon Sep 17 00:00:00 2001
From: Matheus Sunderhus <matheus.sunderhus@azion.com>
Date: Mon, 15 Jan 2024 10:23:36 -0300
Subject: [PATCH 072/135] fix: ensure to call cities service only when selected
 an region

---
 .../FormFields/FormFieldsAccountSettings.vue       | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/views/AccountSettings/FormFields/FormFieldsAccountSettings.vue b/src/views/AccountSettings/FormFields/FormFieldsAccountSettings.vue
index 0a3e1cc68..af942653a 100644
--- a/src/views/AccountSettings/FormFields/FormFieldsAccountSettings.vue
+++ b/src/views/AccountSettings/FormFields/FormFieldsAccountSettings.vue
@@ -66,10 +66,13 @@
     setCountriesOptions()
   })
 
-  const setRegionsOptions = async (geonameId) => {
+  const setRegionsOptions = async (countryId) => {
     regionsOptions.value.done = false
+    if (!countryId) {
+      return
+    }
     try {
-      const response = await props.listRegionsService(geonameId)
+      const response = await props.listRegionsService(countryId)
       regionsOptions.value.options = response
     } catch (error) {
       showToast(error, 'error')
@@ -78,10 +81,13 @@
     }
   }
 
-  const setCitiesOptions = async (geonameId) => {
+  const setCitiesOptions = async (regionId) => {
     citiesOptions.value.done = false
+    if (!regionId) {
+      return
+    }
     try {
-      const response = await props.listCitiesService(geonameId)
+      const response = await props.listCitiesService(regionId)
       citiesOptions.value.options = response
     } catch (error) {
       showToast(error, 'error')

From d85d92bd7745ed84b5e1f0086780187f61495caf Mon Sep 17 00:00:00 2001
From: Matheus Sunderhus <matheus.sunderhus@azion.com>
Date: Mon, 15 Jan 2024 10:25:05 -0300
Subject: [PATCH 073/135] feat: add edited  to severity mapper on
 Activity-history-block

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

diff --git a/src/templates/activity-history-block/index.vue b/src/templates/activity-history-block/index.vue
index eb4021463..52a4602d7 100644
--- a/src/templates/activity-history-block/index.vue
+++ b/src/templates/activity-history-block/index.vue
@@ -103,12 +103,14 @@
   const iconsMap = ref({
     created: 'pi pi-plus-circle text-xs',
     deleted: 'pi pi-trash text-xs',
-    changed: 'pi pi-pencil text-xs'
+    changed: 'pi pi-pencil text-xs',
+    edited: 'pi pi-pencil text-xs'
   })
   const severityByType = ref({
     created: 'success',
     deleted: 'danger',
-    changed: 'info'
+    changed: 'info',
+    edited: 'info'
   })
 
   const props = defineProps({

From 337fe9ace8d5bb7ea73032d37aeef3980821fa89 Mon Sep 17 00:00:00 2001
From: paulosf0 <paulo.ferreira@azion.com>
Date: Mon, 15 Jan 2024 10:36:35 -0300
Subject: [PATCH 074/135] feat: add create waf rules allowed

---
 .../create-waf-rules-allowed-service.js       |  19 +-
 .../create-waf-rules-allowed-service.test.js  |   5 +-
 src/views/WafRules/EditView.vue               |  26 +-
 .../WafRules/FormFields/FormFieldsAllowed.vue | 288 ++++++++++++++++++
 4 files changed, 316 insertions(+), 22 deletions(-)
 create mode 100644 src/views/WafRules/FormFields/FormFieldsAllowed.vue

diff --git a/src/services/waf-rules-services/create-waf-rules-allowed-service.js b/src/services/waf-rules-services/create-waf-rules-allowed-service.js
index 33bc15a98..68c63758e 100644
--- a/src/services/waf-rules-services/create-waf-rules-allowed-service.js
+++ b/src/services/waf-rules-services/create-waf-rules-allowed-service.js
@@ -13,11 +13,16 @@ export const createWafRulesAllowedService = async ({ payload, id }) => {
 }
 
 const adapt = (payload) => {
+  
   return {
-    match_zones: payload.matchZones,
-    matches_on: payload.matchesOn,
-    zone: payload.zone,
-    zone_input: payload.zoneInput,
+    match_zones: payload.matchZones.map( (zone) => {
+      const zoneWithoutMatchoZone = ['path', 'file_name', 'raw_body']
+      if(zoneWithoutMatchoZone.includes(zone.zone)) {
+        zone.matches_on = null
+      }
+
+      return zone
+    }),
     path: payload.path,
     reason: payload.reason,
     rule_id: payload.ruleId,
@@ -61,7 +66,8 @@ const parseHttpResponse = (httpResponse) => {
  * @returns {string|undefined} The result message based on the status code.
  */
 const extractErrorKey = (errorSchema, key) => {
-  return errorSchema[key]?.[0]
+  const [keyError] = Object.keys(errorSchema[key]?.[0])
+  return errorSchema[key]?.[0][keyError][0]
 }
 
 /**
@@ -70,7 +76,8 @@ const extractErrorKey = (errorSchema, key) => {
  * @returns {string} The result message based on the status code.
  */
 const extractApiError = (httpResponse) => {
-  const errorMessage = extractErrorKey(httpResponse.body, 'detail')
+  const [firstKey] = Object.keys(httpResponse.body)
+  const errorMessage = extractErrorKey(httpResponse.body, firstKey)
 
   return errorMessage
 }
diff --git a/src/tests/services/waf-rules-services/create-waf-rules-allowed-service.test.js b/src/tests/services/waf-rules-services/create-waf-rules-allowed-service.test.js
index 358ff380e..ed40d221a 100644
--- a/src/tests/services/waf-rules-services/create-waf-rules-allowed-service.test.js
+++ b/src/tests/services/waf-rules-services/create-waf-rules-allowed-service.test.js
@@ -6,9 +6,6 @@ import { describe, expect, it, vi } from 'vitest'
 const fixtures = {
   wafRulesMock: {
     matchZones: [],
-    matchesOn: '',
-    zone: '',
-    zoneInput: '',
     path: '',
     reason: '',
     ruleId: '',
@@ -71,7 +68,7 @@ describe('WafRulesServices', () => {
     vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
       statusCode: 400,
       body: {
-        [errorKey]: [apiErrorMock]
+        [errorKey]: [ { 'error': [apiErrorMock] } ]
       }
     })
     const { sut } = makeSut()
diff --git a/src/views/WafRules/EditView.vue b/src/views/WafRules/EditView.vue
index 19a8ae4e3..d5fd837f3 100644
--- a/src/views/WafRules/EditView.vue
+++ b/src/views/WafRules/EditView.vue
@@ -80,13 +80,15 @@
           <CreateDrawerBlock
             v-if="showCreateWafRulesAllowedDrawer"
             v-model:visible="showCreateWafRulesAllowedDrawer"
-            :createService="props.createWafRulesAllowedService"
+            :createService="handleCreateWafRulesAllowedService"
             :schema="validationSchemaAllowed"
             :initialValues="initialValues"
             @onSuccess="reloadWafRulesAllowedList"
             title="Create New"
           >
-            <template #formFields> </template>
+            <template #formFields>
+              <FormFieldsAllowed></FormFieldsAllowed>
+            </template>
           </CreateDrawerBlock>
 
           <!-- <EditDrawerBlock
@@ -127,6 +129,8 @@
   import { useRoute, useRouter } from 'vue-router'
   import * as yup from 'yup'
   import FormFieldsWafRules from './FormFields/FormFieldsWafRules.vue'
+  import FormFieldsAllowed from './FormFields/FormFieldsAllowed.vue'
+
   const route = useRoute()
   const router = useRouter()
   const activeTab = ref(0)
@@ -161,21 +165,15 @@
 
   const validationSchemaAllowed = yup.object({
     matchZones: yup.array(),
-    matchesOn: yup.string(),
-    zone: yup.string(),
-    zoneInput: yup.string(),
-    path: yup.string(),
-    reason: yup.string(),
-    ruleId: yup.string(),
+    path: yup.string().required(),
+    reason: yup.string().required(),
+    ruleId: yup.string().required(),
     status: yup.boolean(),
     useRegex: yup.boolean()
   })
 
   const initialValues = {
-    matchZones: [],
-    matchesOn: '',
-    zone: '',
-    zoneInput: '',
+    matchZones: [{ matches_on: 'value', zone: 'path', zone_input: null }],
     path: '',
     reason: '',
     ruleId: '',
@@ -300,6 +298,10 @@
     })
   }
 
+  const handleCreateWafRulesAllowedService = async (payload) => {
+    return await props.createWafRulesAllowedService({ payload, id: wafRuleId.value })
+  }
+
   const openEditDrawerWafRulesAllowed = (event) => {
     selectedWafRulesAllowedToEdit.value = event.id
     showEditWafRulesAllowedDrawer.value = true
diff --git a/src/views/WafRules/FormFields/FormFieldsAllowed.vue b/src/views/WafRules/FormFields/FormFieldsAllowed.vue
new file mode 100644
index 000000000..0fc308ebb
--- /dev/null
+++ b/src/views/WafRules/FormFields/FormFieldsAllowed.vue
@@ -0,0 +1,288 @@
+<script setup>
+  import { ref } from 'vue'
+  import FormHorizontal from '@/templates/create-form-block/form-horizontal'
+  import InputSwitch from 'primevue/inputswitch'
+  import Dropdown from 'primevue/dropdown'
+  import FieldText from '@/templates/form-fields-inputs/fieldText'
+  import Divider from 'primevue/divider'
+  import PrimeButton from 'primevue/button'
+  import RadioButton from 'primevue/radiobutton'
+  import InputText from 'primevue/inputtext'
+  import Card from 'primevue/card'
+
+  import { useField } from 'vee-validate'
+  defineOptions({ name: 'form-fields-waf-rules-allowed' })
+
+  const { value: matchZones } = useField('matchZones')
+  const { value: path } = useField('path')
+  const { value: reason } = useField('reason')
+  const { value: status } = useField('status')
+  //   const { value: useRegex } = useField('useRegex')
+  const { value: ruleId } = useField('ruleId')
+
+  const matchZonesOptions = ref([
+    { name: 'Conditional Query String', value: 'conditional_query_string' },
+    { name: 'Conditional Request Body', value: 'conditional_query_body' },
+    { name: 'Conditional Request Header', value: 'conditional_query_header' },
+    { name: 'File Name (Multipart Body)', value: 'file_name' },
+    { name: 'Path', value: 'path' },
+    { name: 'Query String', value: 'query_string' },
+    { name: 'Raw Body', value: 'raw_body' },
+    { name: 'Request Body', value: 'request_body' },
+    { name: 'Request Header', value: 'request_header' }
+  ])
+
+  const ruleIdOption = ref([{ name: '0 - All Rules', value: 0 }])
+
+  const addMatchZones = () => {
+    const newArray = matchZones.value
+    matchZones.value = [...newArray, { matches_on: 'value', zone: 'path', zone_input: null }]
+  }
+
+  const showConditionalInputs = (value) => {
+    const conditionalInputs = [
+      'conditional_query_string',
+      'conditional_query_body',
+      'conditional_query_header'
+    ]
+    if (conditionalInputs.includes(value)) {
+      return true
+    }
+    return false
+  }
+
+  const showMatchOnInputs = (value) => {
+    const conditionalInputs = [
+      'conditional_query_string',
+      'conditional_query_body',
+      'conditional_query_header',
+      'query_string',
+      'request_body',
+      'request_header'
+    ]
+    if (conditionalInputs.includes(value)) {
+      return true
+    }
+    return false
+  }
+
+  const deleteMatchZone = (index) => {
+    matchZones.value.splice(index, 1)
+  }
+</script>
+
+<template>
+  <FormHorizontal
+    :isDrawer="true"
+    title="General"
+    description="Create a match zone for wich this Rule should be in the Allowed Rule."
+  >
+    <template #inputs>
+      <div class="flex flex-col w-full sm:max-w-xs gap-2">
+        <label
+          for="ruleid"
+          class="text-color text-base font-medium"
+          >Rule ID *</label
+        >
+        <Dropdown
+          id="ruleid"
+          v-model="ruleId"
+          :options="ruleIdOption"
+          optionLabel="name"
+          optionValue="value"
+          class="w-full"
+        />
+      </div>
+      <div class="flex flex-col sm:max-w-lg w-full gap-2">
+        <FieldText
+          label="Reason *"
+          name="reason"
+          :value="reason"
+          description="Set a suggestive description for this rule."
+        />
+      </div>
+    </template>
+  </FormHorizontal>
+  <FormHorizontal
+    :isDrawer="true"
+    title="Match Zone Set"
+    description='Choose match zones to put into the Allowed Rule:
+Path to put the path itself or one named path into the Allowed Rule.
+Query String or Conditional Query String to put all GET arguments or one named argument into the Allowed Rule. For example, the "search" argument.
+Request Header or Conditional Request Header to put all HTTP request headers or one named header into the Allowed Rule. For example, the Cookie header.
+Request Body or Conditional Request Body to put all POST arguments or one named argument into the Allowed Rule. For example, the "search" argument.
+Raw Body to put the unparsed (raw) request body into the whitelist.
+File Name (Multipart Body) to put the unparsed (raw) request body into the Allowed Rule.'
+  >
+    <template #inputs>
+      <div class="flex flex-col sm:max-w-lg w-full gap-2">
+        <FieldText
+          label="Path"
+          name="path"
+          :value="path"
+          description="Path is only used to restrict the scope of a matchzone. Leave it in blank if you do not want to restrict matchzone scope."
+        />
+      </div>
+      <Divider
+        align="left"
+        type="dashed"
+      >
+        <b>Then</b>
+      </Divider>
+      <div class="flex flex-col gap-8">
+        <div
+          v-for="(item, index) in matchZones"
+          :key="index"
+          class="flex flex-col gap-6"
+        >
+          <div
+            class="flex"
+            v-if="index > 0"
+          >
+            <Divider
+              align="left"
+              type="dashed"
+              :key="index"
+            >
+              <b>And</b>
+            </Divider>
+            <PrimeButton
+              severity="secondary"
+              icon="pi pi-trash"
+              aria-label="Trash"
+              @click="deleteMatchZone(index)"
+            />
+          </div>
+
+          <div class="flex flex-col w-full sm:max-w-xs gap-2">
+            <label
+              for="ruleid"
+              class="text-color text-base font-medium"
+              >Match Zones *</label
+            >
+            <Dropdown
+              id="ruleid"
+              v-model="matchZones[index].zone"
+              :options="matchZonesOptions"
+              optionLabel="name"
+              optionValue="value"
+              class="w-full"
+            />
+          </div>
+          <div
+            class="flex flex-col sm:max-w-lg w-full gap-2"
+            v-if="showConditionalInputs(matchZones[index].zone)"
+          >
+            <div class="flex flex-col sm:max-w-lg w-full gap-2">
+              <label class="text-color text-base font-medium">Field </label>
+              <InputText
+                v-model="matchZones[index].zone_input"
+                type="text"
+              />
+            </div>
+          </div>
+          <div
+            class="flex flex-col gap-2"
+            v-if="showMatchOnInputs(matchZones[index].zone)"
+          >
+            <label class="text-color text-base font-medium">Matches On *</label>
+            <div class="flex flex-col gap-3">
+              <Card
+                :pt="{
+                  root: { class: 'shadow-none border-b rounded-none surface-border' },
+                  body: { class: 'py-4 border-0' },
+                  title: { class: 'flex items-center text-base m-0 gap-3 font-medium' },
+                  subtitle: {
+                    class: 'text-sm font-normal text-color-secondary m-0 pr-0 md:pr-[2.5rem]'
+                  }
+                }"
+              >
+                <template #title>
+                  <RadioButton
+                    v-model="matchZones[index].matches_on"
+                    inputId="value"
+                    name="matches_on"
+                    value="value"
+                  />
+                  <div class="flex-col gap-1">
+                    <div class="">
+                      <div
+                        class="text-color text-sm font-normal"
+                        for="value"
+                      >
+                        Value
+                      </div>
+                    </div>
+                    <div class="self-stretch text-color-secondary text-sm font-normal">
+                      To put the value into the allowed rule or.
+                    </div>
+                  </div>
+                </template>
+              </Card>
+
+              <Card
+                :pt="{
+                  root: { class: 'shadow-none rounded-none' },
+                  body: { class: 'py-4 border-0' },
+                  title: { class: 'flex items-center text-base m-0 gap-3 font-medium' },
+                  subtitle: {
+                    class: 'text-sm font-normal text-color-secondary m-0 pr-0 md:pr-[2.5rem]'
+                  }
+                }"
+              >
+                <template #title>
+                  <RadioButton
+                    v-model="matchZones[index].matches_on"
+                    inputId="name"
+                    name="matches_on"
+                    value="name"
+                  />
+                  <div class="flex-col gap-1">
+                    <div class="">
+                      <div
+                        class="text-color text-sm font-normal"
+                        for="name"
+                      >
+                        Name
+                      </div>
+                    </div>
+                    <div class="self-stretch text-color-secondary text-sm font-normal">
+                      To put the key name into the allowed rule.
+                    </div>
+                  </div>
+                </template>
+              </Card>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <Divider type="solid"></Divider>
+      <PrimeButton
+        severity="secondary"
+        icon="pi pi-plus"
+        label="New Match Zone"
+        class="sm:w-1/3"
+        @click="addMatchZones"
+      />
+    </template>
+  </FormHorizontal>
+  <FormHorizontal
+    title="Status"
+    :isDrawer="true"
+  >
+    <template #inputs>
+      <div class="flex gap-3 items-center">
+        <InputSwitch
+          id="status"
+          v-model="status"
+        />
+        <label
+          for="status"
+          class="text-base"
+          >Status</label
+        >
+      </div>
+    </template>
+  </FormHorizontal>
+</template>

From 9123c964a92630ca672e25811fb1ce17c2d109d8 Mon Sep 17 00:00:00 2001
From: aloisio-m-bastian <107002324+aloisio-m-bastian@users.noreply.github.com>
Date: Mon, 15 Jan 2024 11:53:16 -0300
Subject: [PATCH 075/135] [NO-ISSUE] fix: change error response api service to
 parse correctly api errors and change validation of fields (#555)

* fix: change field custom status code to type number and change validations

* fix: change field custom status code to type number and change validations

* fix: remove warning of field type number loading string data
---
 .../edit-error-responses-service.js           | 46 ++++++++-----------
 .../list-error-responses-service.js           |  6 +--
 ...e-application-error-responses-base-url.js} |  2 +-
 .../edit-error-responses-services.test.js     | 28 ++++++-----
 .../list-error-responses-service.test.js      | 17 +++----
 .../EditView.vue                              |  1 -
 .../FormFields/FormFieldsErrorResponses.vue   | 27 +++++++----
 7 files changed, 68 insertions(+), 59 deletions(-)
 rename src/services/edge-application-error-responses-services/{make-edge-application-v4-base-url.js => make-edge-application-error-responses-base-url.js} (50%)

diff --git a/src/services/edge-application-error-responses-services/edit-error-responses-service.js b/src/services/edge-application-error-responses-services/edit-error-responses-service.js
index 597e6e5d9..091ea7a13 100644
--- a/src/services/edge-application-error-responses-services/edit-error-responses-service.js
+++ b/src/services/edge-application-error-responses-services/edit-error-responses-service.js
@@ -1,12 +1,12 @@
 import { AxiosHttpClientAdapter } from '@/services/axios/AxiosHttpClientAdapter'
-import { makeEdgeApplicationV4BaseUrl } from './make-edge-application-v4-base-url'
+import { makeEdgeApplicationErrorResponsesBaseUrl } from './make-edge-application-error-responses-base-url'
 import * as Errors from '@/services/axios/errors'
 
 export const editErrorResponsesService = async (payload) => {
   let httpResponse = await AxiosHttpClientAdapter.request({
-    url: `${makeEdgeApplicationV4BaseUrl()}/${payload.edgeApplicationId}/error_responses/${
-      payload.id
-    }`,
+    url: `${makeEdgeApplicationErrorResponsesBaseUrl()}/${
+      payload.edgeApplicationId
+    }/error_responses/${payload.id}`,
     method: 'PATCH',
     body: adapt(payload)
   })
@@ -17,8 +17,8 @@ export const editErrorResponsesService = async (payload) => {
 const adapt = (payload) => {
   const errorResponses = payload.errorResponses.map((element) => {
     return {
-      custom_status_code: element?.customStatusCode,
-      uri: element?.uri,
+      custom_status_code: element.customStatusCode?.toString() || null,
+      uri: element.uri || null,
       timeout: element.timeout,
       code: element.code
     }
@@ -29,32 +29,26 @@ const adapt = (payload) => {
   }
 }
 
-/**
- * @param {Object} errorSchema - The error schema.
- * @param {string} key - The error key of error schema.
- * @returns {string|undefined} The result message based on the status code.
- */
-const extractErrorKey = (errorSchema, key) => {
-  if (Array.isArray(errorSchema[key])) {
-    if (typeof errorSchema[key][0] === 'object') {
-      const newError = errorSchema[key][0]
-      const errorKey = Object.keys(errorSchema[key][0])
-      return newError[errorKey]?.[0]
-    }
-    return errorSchema[key]?.[0]
-  }
-  return errorSchema[key]
-}
-
 /**
  * @param {Object} httpResponse - The HTTP response object.
  * @param {Object} httpResponse.body - The response body.
  * @returns {string} The result message based on the status code.
  */
 const extractApiError = (httpResponse) => {
-  const errorKey = Object.keys(httpResponse.body)[0]
-  const apiError = extractErrorKey(httpResponse.body, errorKey)
-  return `${errorKey}: ${apiError}`
+  let parsedError
+  if (Object.keys(httpResponse.body)[0] === 'error_responses') {
+    httpResponse.body.error_responses?.forEach((error) => {
+      if (Object.keys(error).length > 0) {
+        const errorKey = Object.keys(error)[0]
+        parsedError = `${errorKey}: ${error[errorKey][0]}`
+        return
+      }
+    })
+  } else {
+    const errorKey = Object.keys(httpResponse.body)[0]
+    parsedError = `${errorKey}: ${httpResponse.body[errorKey]}`
+  }
+  return parsedError
 }
 
 /**
diff --git a/src/services/edge-application-error-responses-services/list-error-responses-service.js b/src/services/edge-application-error-responses-services/list-error-responses-service.js
index f18ba4bd1..128ec7337 100644
--- a/src/services/edge-application-error-responses-services/list-error-responses-service.js
+++ b/src/services/edge-application-error-responses-services/list-error-responses-service.js
@@ -1,9 +1,9 @@
 import { AxiosHttpClientAdapter, parseHttpResponse } from '@/services/axios/AxiosHttpClientAdapter'
-import { makeEdgeApplicationV4BaseUrl } from './make-edge-application-v4-base-url'
+import { makeEdgeApplicationErrorResponsesBaseUrl } from './make-edge-application-error-responses-base-url'
 
 export const listErrorResponsesService = async ({ edgeApplicationId }) => {
   let httpResponse = await AxiosHttpClientAdapter.request({
-    url: `${makeEdgeApplicationV4BaseUrl()}/${edgeApplicationId}/error_responses`,
+    url: `${makeEdgeApplicationErrorResponsesBaseUrl()}/${edgeApplicationId}/error_responses`,
     method: 'GET'
   })
 
@@ -22,7 +22,7 @@ const adapt = (httpResponse) => {
         code: element.code.toString(),
         timeout: element.timeout,
         uri: element.uri,
-        customStatusCode: element.custom_status_code
+        customStatusCode: element.custom_status_code? Number(element.custom_status_code): element.custom_status_code,
       }
     })
   }
diff --git a/src/services/edge-application-error-responses-services/make-edge-application-v4-base-url.js b/src/services/edge-application-error-responses-services/make-edge-application-error-responses-base-url.js
similarity index 50%
rename from src/services/edge-application-error-responses-services/make-edge-application-v4-base-url.js
rename to src/services/edge-application-error-responses-services/make-edge-application-error-responses-base-url.js
index 671380924..2ffa54ed4 100644
--- a/src/services/edge-application-error-responses-services/make-edge-application-v4-base-url.js
+++ b/src/services/edge-application-error-responses-services/make-edge-application-error-responses-base-url.js
@@ -1,4 +1,4 @@
-export const makeEdgeApplicationV4BaseUrl = () => {
+export const makeEdgeApplicationErrorResponsesBaseUrl = () => {
   const version = 'v4'
   return `${version}/edge/applications`
 }
diff --git a/src/tests/services/edge-application-error-responses/edit-error-responses-services.test.js b/src/tests/services/edge-application-error-responses/edit-error-responses-services.test.js
index f24f6e99c..af4cd2dbc 100644
--- a/src/tests/services/edge-application-error-responses/edit-error-responses-services.test.js
+++ b/src/tests/services/edge-application-error-responses/edit-error-responses-services.test.js
@@ -34,20 +34,20 @@ describe('EdgeApplicationErrorResponsesServices', () => {
     })
 
     const { sut } = makeSut()
-    const version = 'v4'
 
     await sut(fixtures.errorResponsePayload)
+    const errorResponse = fixtures.errorResponsePayload.errorResponses[0]
 
     expect(requestSpy).toHaveBeenCalledWith({
-      url: `${version}/edge/applications/${fixtures.errorResponsePayload.edgeApplicationId}/error_responses/${fixtures.errorResponsePayload.id}`,
+      url: `v4/edge/applications/${fixtures.errorResponsePayload.edgeApplicationId}/error_responses/${fixtures.errorResponsePayload.id}`,
       method: 'PATCH',
       body: {
         error_responses: [
           {
-            code: fixtures.errorResponsePayload.errorResponses[0].code,
-            custom_status_code: fixtures.errorResponsePayload.errorResponses[0].customStatusCode,
-            timeout: fixtures.errorResponsePayload.errorResponses[0].timeout,
-            uri: fixtures.errorResponsePayload.errorResponses[0].uri
+            code: errorResponse.code,
+            custom_status_code: errorResponse.customStatusCode,
+            timeout: errorResponse.timeout,
+            uri: errorResponse.uri
           }
         ],
         origin_id: fixtures.errorResponsePayload.originId
@@ -66,13 +66,17 @@ describe('EdgeApplicationErrorResponsesServices', () => {
     expect(feedbackMessage).toBe('Your Error Responses has been edited')
   })
 
-  it('Should return an API array error to an invalid error response', async () => {
-    const apiErrorMock = 'name should not be empty'
+  it('Should return an API error array to an invalid error response', async () => {
+    const apiErrorMock = 'uri: should not be empty'
 
     vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
       statusCode: 400,
       body: {
-        errors: [apiErrorMock]
+        error_responses: [
+          {
+            uri: ['should not be empty']
+          }
+        ]
       }
     })
     const { sut } = makeSut()
@@ -81,13 +85,13 @@ describe('EdgeApplicationErrorResponsesServices', () => {
 
     expect(feedbackMessage).rejects.toThrow(apiErrorMock)
   })
-  it('Should return an API error to an invalid error response', async () => {
-    const apiErrorMock = 'name should not be empty'
+  it('Should return an API error to invalid payloads', async () => {
+    const apiErrorMock = 'code: You cant use duplicated values for status code'
 
     vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
       statusCode: 400,
       body: {
-        errors: apiErrorMock
+        code: ['You cant use duplicated values for status code']
       }
     })
     const { sut } = makeSut()
diff --git a/src/tests/services/edge-application-error-responses/list-error-responses-service.test.js b/src/tests/services/edge-application-error-responses/list-error-responses-service.test.js
index 0818ea573..86c4d6e0d 100644
--- a/src/tests/services/edge-application-error-responses/list-error-responses-service.test.js
+++ b/src/tests/services/edge-application-error-responses/list-error-responses-service.test.js
@@ -14,7 +14,9 @@ const fixtures = {
         custom_status_code: '503'
       }
     ]
-  }
+  },
+  parsedCode: '500',
+  parsedCustomCode: 503
 }
 
 const makeSut = () => {
@@ -35,11 +37,10 @@ describe('EdgeApplicationErrorResponsesServices', () => {
     const edgeApplicationId = 123
 
     const { sut } = makeSut()
-    const version = 'v4'
     await sut({ edgeApplicationId: edgeApplicationId })
 
     expect(requestSpy).toHaveBeenCalledWith({
-      url: `${version}/edge/applications/${edgeApplicationId}/error_responses`,
+      url: `v4/edge/applications/${edgeApplicationId}/error_responses`,
       method: 'GET'
     })
   })
@@ -56,16 +57,16 @@ describe('EdgeApplicationErrorResponsesServices', () => {
 
     const { sut } = makeSut()
     const result = await sut({ edgeApplicationId: edgeApplicationId })
-
+    const [errorResponse] = fixtures.errorResponseSample.error_responses
     expect(result).toEqual({
       id: fixtures.errorResponseSample.id,
       originId: fixtures.errorResponseSample.origin_id,
       errorResponses: [
         {
-          code: fixtures.errorResponseSample.error_responses[0].code.toString(),
-          customStatusCode: fixtures.errorResponseSample.error_responses[0].custom_status_code,
-          timeout: fixtures.errorResponseSample.error_responses[0].timeout,
-          uri: fixtures.errorResponseSample.error_responses[0].uri
+          code: fixtures.parsedCode,
+          customStatusCode: fixtures.parsedCustomCode,
+          timeout: errorResponse.timeout,
+          uri: errorResponse.uri
         }
       ]
     })
diff --git a/src/views/EdgeApplicationsErrorResponses/EditView.vue b/src/views/EdgeApplicationsErrorResponses/EditView.vue
index 14d69296e..30cd2634e 100644
--- a/src/views/EdgeApplicationsErrorResponses/EditView.vue
+++ b/src/views/EdgeApplicationsErrorResponses/EditView.vue
@@ -67,7 +67,6 @@
         :listOriginsService="props.listOriginsService"
       />
     </template>
-    {{ formValid }}
     <template #action-bar="{ onSubmit, formValid, onCancel, loading }">
       <ActionBarBlockWithTeleport
         v-if="props.showActionBar"
diff --git a/src/views/EdgeApplicationsErrorResponses/FormFields/FormFieldsErrorResponses.vue b/src/views/EdgeApplicationsErrorResponses/FormFields/FormFieldsErrorResponses.vue
index f70dd8dff..9d6ef0fbf 100644
--- a/src/views/EdgeApplicationsErrorResponses/FormFields/FormFieldsErrorResponses.vue
+++ b/src/views/EdgeApplicationsErrorResponses/FormFields/FormFieldsErrorResponses.vue
@@ -5,7 +5,7 @@
   import InputNumber from 'primevue/inputnumber'
   import PrimeButton from 'primevue/button'
   import FieldText from '@/templates/form-fields-inputs/fieldText'
-  import { onMounted, ref } from 'vue'
+  import { onMounted, ref, computed } from 'vue'
   import InputText from 'primevue/inputtext'
   import { useField, useFieldArray } from 'vee-validate'
 
@@ -114,6 +114,7 @@
       name: '505: HTTP Version Not Supported'
     }
   ]
+  const showErrorResponsesInputs = computed(() => errorResponses.value.length > 0)
   const { value: originId } = useField('originId')
   const {
     push: pushErrorResponse,
@@ -129,7 +130,7 @@
   }
 
   const addErrorResponse = () => {
-    pushErrorResponse({ ...defaultErrorResponse })
+    pushErrorResponse(defaultErrorResponse)
   }
 
   const originOptions = ref([])
@@ -150,7 +151,7 @@
   >
     <template
       #inputs
-      v-if="errorResponses.length > 0"
+      v-if="showErrorResponsesInputs"
     >
       <Divider
         align="left"
@@ -179,6 +180,8 @@
             Error Caching TTL*
           </label>
           <InputNumber
+            :min="0"
+            :max="31536000"
             v-model="errorResponses[0].value.timeout"
             showButtons
           />
@@ -223,6 +226,8 @@
                 Error Caching TTL*
               </label>
               <InputNumber
+                :min="0"
+                :max="31536000"
                 v-model="errorResponse.value.timeout"
                 showButtons
               />
@@ -238,11 +243,17 @@
             />
           </div>
           <div class="flex flex-col sm:max-w-lg w-full gap-2">
-            <FieldText
-              label="Custom status code"
-              :name="`errorResponses[${index}].customStatusCode`"
-              :value="errorResponse.value.customStatusCode"
-              description="Customize the HTTP status that will be received by the user."
+            <label
+              for="maximun-ttl-seconds"
+              class="text-color text-base font-medium"
+            >
+              Custom status code
+            </label>
+            <InputNumber
+              :min="100"
+              :max="599"
+              v-model="errorResponse.value.customStatusCode"
+              showButtons
             />
           </div>
         </div>

From 97f69006e264475ee77cc8ae3daeb8bde6f3857e Mon Sep 17 00:00:00 2001
From: Matheus Sunderhus <matheus.sunderhus@azion.com>
Date: Mon, 15 Jan 2024 11:58:46 -0300
Subject: [PATCH 076/135] fix: remove loose close tag from code and orientation
 text on FormFieldsYourSettings

---
 .../YourSettings/FormFields/FormFieldsYourSettings.vue    | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/views/YourSettings/FormFields/FormFieldsYourSettings.vue b/src/views/YourSettings/FormFields/FormFieldsYourSettings.vue
index b8fdb2d88..2d05dba71 100644
--- a/src/views/YourSettings/FormFields/FormFieldsYourSettings.vue
+++ b/src/views/YourSettings/FormFields/FormFieldsYourSettings.vue
@@ -163,7 +163,6 @@
             :class="{ 'p-invalid': errorTimezone }"
             v-model="timezone"
           />
-          >
           <small class="text-xs text-color-secondary font-normal leading-tight">
             Timezone of the user.</small
           >
@@ -243,9 +242,7 @@
                 {{ option.label }}
               </template>
             </Dropdown>
-            <small class="text-xs text-color-secondary font-normal leading-tight">
-              The phone number of the user. Include country and region code.</small
-            >
+
             <InputMask
               date="phone"
               v-model="mobile"
@@ -256,6 +253,9 @@
             />
           </div>
         </div>
+        <small class="text-xs text-color-secondary font-normal leading-tight">
+          The phone number of the user. Include country and region code.</small
+        >
         <small
           id="name-help"
           class="p-error"

From df37103d41f82d75a90a8c776891e8843cb675f9 Mon Sep 17 00:00:00 2001
From: Gabriel Lisboa <95422158+gablisb0a@users.noreply.github.com>
Date: Mon, 15 Jan 2024 12:15:35 -0300
Subject: [PATCH 077/135] style: change z-index on extensions

---
 .../scss/themes/azion-dark/extended-components/_divider.scss   | 3 +++
 .../scss/themes/azion-light/extended-components/_divider.scss  | 3 +++
 2 files changed, 6 insertions(+)

diff --git a/src/assets/themes/scss/themes/azion-dark/extended-components/_divider.scss b/src/assets/themes/scss/themes/azion-dark/extended-components/_divider.scss
index d351b1d72..bfd103c7c 100644
--- a/src/assets/themes/scss/themes/azion-dark/extended-components/_divider.scss
+++ b/src/assets/themes/scss/themes/azion-dark/extended-components/_divider.scss
@@ -14,6 +14,7 @@
 
     .p-divider-content {
       padding: 0 $inlineSpacing;
+      z-index: 0;
     }
   }
 
@@ -27,12 +28,14 @@
 
     .p-divider-content {
       padding: $inlineSpacing 0;
+      background-color: transparent;
     }
   }
 
   &.p-divider-dashed {
     &.p-divider-horizontal:before {
       border-style: dashed;
+      background-color: transparent;
     }
   }
 }
diff --git a/src/assets/themes/scss/themes/azion-light/extended-components/_divider.scss b/src/assets/themes/scss/themes/azion-light/extended-components/_divider.scss
index d351b1d72..bfd103c7c 100644
--- a/src/assets/themes/scss/themes/azion-light/extended-components/_divider.scss
+++ b/src/assets/themes/scss/themes/azion-light/extended-components/_divider.scss
@@ -14,6 +14,7 @@
 
     .p-divider-content {
       padding: 0 $inlineSpacing;
+      z-index: 0;
     }
   }
 
@@ -27,12 +28,14 @@
 
     .p-divider-content {
       padding: $inlineSpacing 0;
+      background-color: transparent;
     }
   }
 
   &.p-divider-dashed {
     &.p-divider-horizontal:before {
       border-style: dashed;
+      background-color: transparent;
     }
   }
 }

From 5bd7caf3d5e3455bfbedcc1969ad48c6e2e39cd8 Mon Sep 17 00:00:00 2001
From: HerbertJulio <herbert.julio@azion.com>
Date: Mon, 15 Jan 2024 13:44:04 -0300
Subject: [PATCH 078/135] refactor: updated edge firewall and tests

---
 .../create-edge-firewall-service.js           | 52 +++++++-------
 .../delete-edge-firewall-service.js           | 49 +++++++++++++-
 .../list-table-block/dialog/delete-dialog.vue | 11 +--
 .../create-edge-firewall-service.test.js      | 57 +++++++++++-----
 .../delete-edge-firewall-service.test.js      | 67 ++++++++++++++++++-
 .../edit-edge-firewall-service.test.js        |  3 +-
 .../list-edge-firewall-service.test.js        |  3 +-
 .../load-edge-firewall-service.test.js        |  3 +-
 .../make-edge-firewall-base-url.test.js       |  3 +-
 9 files changed, 188 insertions(+), 60 deletions(-)

diff --git a/src/services/edge-firewall-services/create-edge-firewall-service.js b/src/services/edge-firewall-services/create-edge-firewall-service.js
index c707bed0f..cba831fb4 100644
--- a/src/services/edge-firewall-services/create-edge-firewall-service.js
+++ b/src/services/edge-firewall-services/create-edge-firewall-service.js
@@ -33,6 +33,30 @@ const adapt = (payload) => {
   }
 }
 
+const mapErrorToMessage = (error) => {
+  switch (error) {
+    case 'duplicated_edge_firewall_name':
+      return 'Edge Firewall cannot be created because it already exists'
+    case 'no_modules_enabled':
+      return 'Edge Firewall cannot be created because no modules are enabled'
+    default:
+      return new Errors.UnexpectedError().message
+  }
+}
+
+/**
+ * @param {Object} httpResponse - The HTTP response object.
+ * @param {Array} httpResponse.body - The response body.
+ * @returns {string} The result message based on the status code.
+ */
+const extractApiError = (httpResponse) => {
+  const apiKeyError = Object.keys(httpResponse.body)[0]
+  if (apiKeyError === 'results') {
+    return mapErrorToMessage(httpResponse.body[apiKeyError][0])
+  }
+  return `${httpResponse.body[apiKeyError]}`
+}
+
 /**
  * @param {Object} httpResponse - The HTTP response object.
  * @param {Object} httpResponse.body - The response body.
@@ -48,7 +72,8 @@ const parseHttpResponse = (httpResponse) => {
         urlToEditView: `/edge-firewall/edit/${httpResponse.body.results.id}`
       }
     case 400:
-      throw new Errors.NotFoundError().message
+      const apiError400 = extractApiError(httpResponse)
+      throw new Error(apiError400).message
     case 401:
       throw new Errors.InvalidApiTokenError().message
     case 403:
@@ -56,33 +81,10 @@ const parseHttpResponse = (httpResponse) => {
     case 404:
       throw new Errors.NotFoundError().message
     case 422:
-      const apiError = extractApiError(httpResponse)
-      throw new Error(apiError).message
+      throw new Errors.InvalidApiRequestError().message
     case 500:
       throw new Errors.InternalServerError().message
     default:
       throw new Errors.UnexpectedError().message
   }
 }
-
-/**
- * @param {Object} errorSchema - The error schema.
- * @param {string} key - The error key of error schema.
- * @returns {string|undefined} The result message based on the status code.
- */
-const extractErrorKey = (errorSchema, key) => {
-  return errorSchema[key]?.[0]
-}
-
-/**
- * @param {Object} httpResponse - The HTTP response object.
- * @param {Object} httpResponse.body - The response body.
- * @returns {string} The result message based on the status code.
- */
-const extractApiError = (httpResponse) => {
-  const nameCantBeEmptyError = extractErrorKey(httpResponse.body, 'errors')
-
-  const errorMessages = [nameCantBeEmptyError]
-  const errorMessage = errorMessages.find((error) => !!error)
-  return errorMessage
-}
diff --git a/src/services/edge-firewall-services/delete-edge-firewall-service.js b/src/services/edge-firewall-services/delete-edge-firewall-service.js
index 7408e2f37..64f5b1ba7 100644
--- a/src/services/edge-firewall-services/delete-edge-firewall-service.js
+++ b/src/services/edge-firewall-services/delete-edge-firewall-service.js
@@ -1,4 +1,5 @@
-import { AxiosHttpClientAdapter, parseHttpResponse } from '../axios/AxiosHttpClientAdapter'
+import * as Errors from '@/services/axios/errors'
+import { AxiosHttpClientAdapter } from '../axios/AxiosHttpClientAdapter'
 import { makeEdgeFirewallBaseUrl } from './make-edge-firewall-base-url'
 
 export const deleteEdgeFirewallService = async (id) => {
@@ -9,3 +10,49 @@ export const deleteEdgeFirewallService = async (id) => {
 
   return parseHttpResponse(httpResponse)
 }
+
+const mapErrorToMessage = (error) => {
+  switch (error) {
+    case 'delete_with_domains_in_use':
+      return 'Edge Firewall cannot be deleted because it is in use by a domain'
+    default:
+      return new Errors.UnexpectedError().message
+  }
+}
+
+/**
+ * @param {Object} httpResponse - The HTTP response object.
+ * @param {Array} httpResponse.body - The response body.
+ * @returns {string} The result message based on the status code.
+ */
+const extractApiError = (httpResponse) => {
+  const apiKeyError = Object.keys(httpResponse.body)[0]
+  const apiValidationError = `${httpResponse.body[apiKeyError]}`
+  return mapErrorToMessage(apiValidationError)
+}
+
+/**
+ * @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 204:
+      return 'Edge Firewall successfully deleted'
+    case 400:
+      const apiError = extractApiError(httpResponse)
+      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/templates/list-table-block/dialog/delete-dialog.vue b/src/templates/list-table-block/dialog/delete-dialog.vue
index 12ca65102..9b3a048a2 100644
--- a/src/templates/list-table-block/dialog/delete-dialog.vue
+++ b/src/templates/list-table-block/dialog/delete-dialog.vue
@@ -75,13 +75,13 @@
 <script setup>
   import PrimeButton from 'primevue/button'
   import PrimeDialog from 'primevue/dialog'
-  import Message from 'primevue/message'
-  import InputText from 'primevue/inputtext'
   import Divider from 'primevue/divider'
+  import InputText from 'primevue/inputtext'
+  import Message from 'primevue/message'
+  import { useToast } from 'primevue/usetoast'
   import { useField, useForm } from 'vee-validate'
-  import * as yup from 'yup'
   import { computed, ref, watch } from 'vue'
-  import { useToast } from 'primevue/usetoast'
+  import * as yup from 'yup'
 
   const toast = useToast()
 
@@ -130,7 +130,8 @@
       toastConfig = {
         closable: true,
         severity: 'error',
-        summary: error
+        summary: 'Error',
+        detail: error
       }
     } finally {
       deleteDialogVisible.value = false
diff --git a/src/tests/services/edge-firewall-services/create-edge-firewall-service.test.js b/src/tests/services/edge-firewall-services/create-edge-firewall-service.test.js
index 9310a8eba..c1125ffbc 100644
--- a/src/tests/services/edge-firewall-services/create-edge-firewall-service.test.js
+++ b/src/tests/services/edge-firewall-services/create-edge-firewall-service.test.js
@@ -30,12 +30,12 @@ describe('EdgeFirewallService', () => {
     })
 
     const { sut } = makeSut()
-    const version = 'v3'
+
     await sut(fixtures.edgeFirewallMock)
 
     expect(requestSpy).toHaveBeenCalledWith({
       method: 'POST',
-      url: `${version}/edge_firewall`,
+      url: 'v3/edge_firewall',
       body: {
         name: fixtures.edgeFirewallMock.name,
         is_active: fixtures.edgeFirewallMock.isActive,
@@ -61,26 +61,43 @@ describe('EdgeFirewallService', () => {
     expect(feedback).toBe('Your Edge Firewall has been created')
   })
 
-  it('Should return an API error to an invalid edge service name', async () => {
-    const apiErrorMock = 'name should not be empty'
-    vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
-      statusCode: 422,
-      body: {
-        errors: [apiErrorMock]
-      }
-    })
-    const { sut } = makeSut()
+  it.each([
+    {
+      error: 'duplicated_edge_firewall_name',
+      key: 'results',
+      expectedError: 'Edge Firewall cannot be created because it already exists'
+    },
+    {
+      error: 'no_modules_enabled',
+      key: 'results',
+      expectedError: 'Edge Firewall cannot be created because no modules are enabled'
+    },
+    {
+      error: 'unmappedError',
+      key: 'results',
+      expectedError: new Errors.UnexpectedError().message
+    },
+    {
+      error: 'name is required',
+      key: 'name',
+      expectedError: 'name is required'
+    }
+  ])(
+    'should throw an error if the API returns a $key in status code 400',
+    async ({ error, key, expectedError }) => {
+      vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+        statusCode: 400,
+        body: { [key]: [error] }
+      })
+      const { sut } = makeSut()
 
-    const feedbackMessage = sut(fixtures.edgeFirewallMock)
+      const feedbackMessage = sut(fixtures.edgeFirewallMock)
 
-    expect(feedbackMessage).rejects.toThrow(apiErrorMock)
-  })
+      expect(feedbackMessage).rejects.toThrow(expectedError)
+    }
+  )
 
   it.each([
-    {
-      statusCode: 400,
-      expectedError: new Errors.NotFoundError().message
-    },
     {
       statusCode: 401,
       expectedError: new Errors.InvalidApiTokenError().message
@@ -93,6 +110,10 @@ describe('EdgeFirewallService', () => {
       statusCode: 404,
       expectedError: new Errors.NotFoundError().message
     },
+    {
+      statusCode: 422,
+      expectedError: new Errors.InvalidApiRequestError().message
+    },
     {
       statusCode: 500,
       expectedError: new Errors.InternalServerError().message
diff --git a/src/tests/services/edge-firewall-services/delete-edge-firewall-service.test.js b/src/tests/services/edge-firewall-services/delete-edge-firewall-service.test.js
index ea3750c7a..3a3feffba 100644
--- a/src/tests/services/edge-firewall-services/delete-edge-firewall-service.test.js
+++ b/src/tests/services/edge-firewall-services/delete-edge-firewall-service.test.js
@@ -1,4 +1,5 @@
 import { AxiosHttpClientAdapter } from '@/services/axios/AxiosHttpClientAdapter'
+import * as Errors from '@/services/axios/errors'
 import { deleteEdgeFirewallService } from '@/services/edge-firewall-services'
 import { describe, expect, it, vi } from 'vitest'
 
@@ -17,12 +18,11 @@ describe('EdgeFirewallServices', () => {
     })
     const mockId = 12387555
     const { sut } = makeSut()
-    const version = 'v3'
     await sut(mockId)
 
     expect(requestSpy).toHaveBeenCalledWith({
       method: 'DELETE',
-      url: `${version}/edge_firewall/${mockId}`
+      url: `v3/edge_firewall/${mockId}`
     })
   })
 
@@ -36,6 +36,67 @@ describe('EdgeFirewallServices', () => {
 
     const feedbackMessage = await sut(mockId)
 
-    expect(feedbackMessage).toBe('Resource successfully deleted')
+    expect(feedbackMessage).toBe('Edge Firewall successfully deleted')
   })
+
+  it.each([
+    {
+      error: 'delete_with_domains_in_use',
+      expectedError: 'Edge Firewall cannot be deleted because it is in use by a domain'
+    },
+    {
+      error: 'unmappedError',
+      expectedError: new Errors.UnexpectedError().message
+    }
+  ])(
+    'should throw an error if the API returns a 400 status code',
+    async ({ error, expectedError }) => {
+      vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+        statusCode: 400,
+        body: {
+          results: error
+        }
+      })
+      const mockId = 123
+
+      const { sut } = makeSut()
+
+      await expect(sut(mockId)).rejects.toThrow(expectedError)
+    }
+  )
+
+  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
+      })
+      const { sut } = makeSut()
+      const mockId = 123
+      const response = sut(mockId)
+
+      expect(response).rejects.toBe(expectedError)
+    }
+  )
 })
diff --git a/src/tests/services/edge-firewall-services/edit-edge-firewall-service.test.js b/src/tests/services/edge-firewall-services/edit-edge-firewall-service.test.js
index 8d0475731..b7db5b702 100644
--- a/src/tests/services/edge-firewall-services/edit-edge-firewall-service.test.js
+++ b/src/tests/services/edge-firewall-services/edit-edge-firewall-service.test.js
@@ -30,11 +30,10 @@ describe('EdgeFirewallServices', () => {
       statusCode: 200
     })
     const { sut } = makeSut()
-    const version = 'v3'
     await sut(fixtures.mock)
 
     expect(requestSpy).toHaveBeenCalledWith({
-      url: `${version}/edge_firewall/${fixtures.mock.id}`,
+      url: `v3/edge_firewall/${fixtures.mock.id}`,
       method: 'PATCH',
       body: {
         name: fixtures.mock.name,
diff --git a/src/tests/services/edge-firewall-services/list-edge-firewall-service.test.js b/src/tests/services/edge-firewall-services/list-edge-firewall-service.test.js
index e2ff8f263..b6922a349 100644
--- a/src/tests/services/edge-firewall-services/list-edge-firewall-service.test.js
+++ b/src/tests/services/edge-firewall-services/list-edge-firewall-service.test.js
@@ -48,11 +48,10 @@ describe('EdgeFirewallServices', () => {
       body: { results: [] }
     })
     const { sut } = makeSut()
-    const version = 'v3'
     await sut({})
 
     expect(requestSpy).toHaveBeenCalledWith({
-      url: `${version}/edge_firewall?order_by=name&sort=asc&page=1&page_size=200`,
+      url: 'v3/edge_firewall?order_by=name&sort=asc&page=1&page_size=200',
       method: 'GET'
     })
   })
diff --git a/src/tests/services/edge-firewall-services/load-edge-firewall-service.test.js b/src/tests/services/edge-firewall-services/load-edge-firewall-service.test.js
index e251ec5f8..257b11b61 100644
--- a/src/tests/services/edge-firewall-services/load-edge-firewall-service.test.js
+++ b/src/tests/services/edge-firewall-services/load-edge-firewall-service.test.js
@@ -33,9 +33,8 @@ describe('EdgeFirewallServices', () => {
 
     await sut({ id: fixtures.mock.id })
 
-    const version = 'v3'
     expect(requestSpy).toHaveBeenCalledWith({
-      url: `${version}/edge_firewall/${fixtures.mock.id}`,
+      url: `v3/edge_firewall/${fixtures.mock.id}`,
       method: 'GET'
     })
   })
diff --git a/src/tests/services/edge-firewall-services/make-edge-firewall-base-url.test.js b/src/tests/services/edge-firewall-services/make-edge-firewall-base-url.test.js
index 239a2ab71..d971754f9 100644
--- a/src/tests/services/edge-firewall-services/make-edge-firewall-base-url.test.js
+++ b/src/tests/services/edge-firewall-services/make-edge-firewall-base-url.test.js
@@ -12,8 +12,7 @@ const makeSut = () => {
 describe('EdgeFirewallServices', () => {
   it('should return the API base url to edge firewall service', () => {
     const { sut } = makeSut()
-    const version = 'v3'
-    const correctApiUrl = `${version}/edge_firewall`
+    const correctApiUrl = 'v3/edge_firewall'
 
     const baseUrl = sut()
 

From 5835c26d8b98e84547d54831ae28d4940d78bb50 Mon Sep 17 00:00:00 2001
From: "Cicero, Feijo" <cicero.feijo@gmail.com>
Date: Mon, 15 Jan 2024 14:14:05 -0300
Subject: [PATCH 079/135] chore: update license model

---
 LICENSE                                       | 662 +++++++++++++++++-
 .../list-error-responses-service.js           |   4 +-
 2 files changed, 660 insertions(+), 6 deletions(-)

diff --git a/LICENSE b/LICENSE
index 537eebdcf..162676cbe 100644
--- a/LICENSE
+++ b/LICENSE
@@ -1,9 +1,661 @@
-MIT License
+                    GNU AFFERO GENERAL PUBLIC LICENSE
+                       Version 3, 19 November 2007
 
-Copyright (c) 2023 Azion Technologies
+Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
+Everyone is permitted to copy and distribute verbatim copies
+of this license document, but changing it is not allowed.
 
-Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+                            Preamble
 
-The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+The GNU Affero General Public License is a free, copyleft license for
+software and other kinds of works, specifically designed to ensure
+cooperation with the community in the case of network server software.
 
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+The licenses for most software and other practical works are designed
+to take away your freedom to share and change the works. By contrast,
+our General Public Licenses are intended to guarantee your freedom to
+share and change all versions of a program--to make sure it remains free
+software for all its users.
+
+When we speak of free software, we are referring to freedom, not
+price. Our General Public Licenses are designed to make sure that you
+have the freedom to distribute copies of free software (and charge for
+them if you wish), that you receive source code or can get it if you
+want it, that you can change the software or use pieces of it in new
+free programs, and that you know you can do these things.
+
+Developers that use our General Public Licenses protect your rights
+with two steps: (1) assert copyright on the software, and (2) offer
+you this License which gives you legal permission to copy, distribute
+and/or modify the software.
+
+A secondary benefit of defending all users' freedom is that
+improvements made in alternate versions of the program, if they
+receive widespread use, become available for other developers to
+incorporate. Many developers of free software are heartened and
+encouraged by the resulting cooperation. However, in the case of
+software used on network servers, this result may fail to come about.
+The GNU General Public License permits making a modified version and
+letting the public access it on a server without ever releasing its
+source code to the public.
+
+The GNU Affero General Public License is designed specifically to
+ensure that, in such cases, the modified source code becomes available
+to the community. It requires the operator of a network server to
+provide the source code of the modified version running there to the
+users of that server. Therefore, public use of a modified version, on
+a publicly accessible server, gives the public access to the source
+code of the modified version.
+
+An older license, called the Affero General Public License and
+published by Affero, was designed to accomplish similar goals. This is
+a different license, not a version of the Affero GPL, but Affero has
+released a new version of the Affero GPL which permits relicensing under
+this license.
+
+The precise terms and conditions for copying, distribution and
+modification follow.
+
+                       TERMS AND CONDITIONS
+
+0. Definitions.
+
+"This License" refers to version 3 of the GNU Affero General Public License.
+
+"Copyright" also means copyright-like laws that apply to other kinds of
+works, such as semiconductor masks.
+
+"The Program" refers to any copyrightable work licensed under this
+License. Each licensee is addressed as "you". "Licensees" and
+"recipients" may be individuals or organizations.
+
+To "modify" a work means to copy from or adapt all or part of the work
+in a fashion requiring copyright permission, other than the making of an
+exact copy. The resulting work is called a "modified version" of the
+earlier work or a work "based on" the earlier work.
+
+A "covered work" means either the unmodified Program or a work based
+on the Program.
+
+To "propagate" a work means to do anything with it that, without
+permission, would make you directly or secondarily liable for
+infringement under applicable copyright law, except executing it on a
+computer or modifying a private copy. Propagation includes copying,
+distribution (with or without modification), making available to the
+public, and in some countries other activities as well.
+
+To "convey" a work means any kind of propagation that enables other
+parties to make or receive copies. Mere interaction with a user through
+a computer network, with no transfer of a copy, is not conveying.
+
+An interactive user interface displays "Appropriate Legal Notices"
+to the extent that it includes a convenient and prominently visible
+feature that (1) displays an appropriate copyright notice, and (2)
+tells the user that there is no warranty for the work (except to the
+extent that warranties are provided), that licensees may convey the
+work under this License, and how to view a copy of this License. If
+the interface presents a list of user commands or options, such as a
+menu, a prominent item in the list meets this criterion.
+
+1. Source Code.
+
+The "source code" for a work means the preferred form of the work
+for making modifications to it. "Object code" means any non-source
+form of a work.
+
+A "Standard Interface" means an interface that either is an official
+standard defined by a recognized standards body, or, in the case of
+interfaces specified for a particular programming language, one that
+is widely used among developers working in that language.
+
+The "System Libraries" of an executable work include anything, other
+than the work as a whole, that (a) is included in the normal form of
+packaging a Major Component, but which is not part of that Major
+Component, and (b) serves only to enable use of the work with that
+Major Component, or to implement a Standard Interface for which an
+implementation is available to the public in source code form. A
+"Major Component", in this context, means a major essential component
+(kernel, window system, and so on) of the specific operating system
+(if any) on which the executable work runs, or a compiler used to
+produce the work, or an object code interpreter used to run it.
+
+The "Corresponding Source" for a work in object code form means all
+the source code needed to generate, install, and (for an executable
+work) run the object code and to modify the work, including scripts to
+control those activities. However, it does not include the work's
+System Libraries, or general-purpose tools or generally available free
+programs which are used unmodified in performing those activities but
+which are not part of the work. For example, Corresponding Source
+includes interface definition files associated with source files for
+the work, and the source code for shared libraries and dynamically
+linked subprograms that the work is specifically designed to require,
+such as by intimate data communication or control flow between those
+subprograms and other parts of the work.
+
+The Corresponding Source need not include anything that users
+can regenerate automatically from other parts of the Corresponding
+Source.
+
+The Corresponding Source for a work in source code form is that
+same work.
+
+2. Basic Permissions.
+
+All rights granted under this License are granted for the term of
+copyright on the Program, and are irrevocable provided the stated
+conditions are met. This License explicitly affirms your unlimited
+permission to run the unmodified Program. The output from running a
+covered work is covered by this License only if the output, given its
+content, constitutes a covered work. This License acknowledges your
+rights of fair use or other equivalent, as provided by copyright law.
+
+You may make, run and propagate covered works that you do not
+convey, without conditions so long as your license otherwise remains
+in force. You may convey covered works to others for the sole purpose
+of having them make modifications exclusively for you, or provide you
+with facilities for running those works, provided that you comply with
+the terms of this License in conveying all material for which you do
+not control copyright. Those thus making or running the covered works
+for you must do so exclusively on your behalf, under your direction
+and control, on terms that prohibit them from making any copies of
+your copyrighted material outside their relationship with you.
+
+Conveying under any other circumstances is permitted solely under
+the conditions stated below. Sublicensing is not allowed; section 10
+makes it unnecessary.
+
+3. Protecting Users' Legal Rights From Anti-Circumvention Law.
+
+No covered work shall be deemed part of an effective technological
+measure under any applicable law fulfilling obligations under article
+11 of the WIPO copyright treaty adopted on 20 December 1996, or
+similar laws prohibiting or restricting circumvention of such
+measures.
+
+When you convey a covered work, you waive any legal power to forbid
+circumvention of technological measures to the extent such circumvention
+is effected by exercising rights under this License with respect to
+the covered work, and you disclaim any intention to limit operation or
+modification of the work as a means of enforcing, against the work's
+users, your or third parties' legal rights to forbid circumvention of
+technological measures.
+
+4. Conveying Verbatim Copies.
+
+You may convey verbatim copies of the Program's source code as you
+receive it, in any medium, provided that you conspicuously and
+appropriately publish on each copy an appropriate copyright notice;
+keep intact all notices stating that this License and any
+non-permissive terms added in accord with section 7 apply to the code;
+keep intact all notices of the absence of any warranty; and give all
+recipients a copy of this License along with the Program.
+
+You may charge any price or no price for each copy that you convey,
+and you may offer support or warranty protection for a fee.
+
+5. Conveying Modified Source Versions.
+
+You may convey a work based on the Program, or the modifications to
+produce it from the Program, in the form of source code under the
+terms of section 4, provided that you also meet all of these conditions:
+
+    a) The work must carry prominent notices stating that you modified
+    it, and giving a relevant date.
+
+    b) The work must carry prominent notices stating that it is
+    released under this License and any conditions added under section
+    7.  This requirement modifies the requirement in section 4 to
+    "keep intact all notices".
+
+    c) You must license the entire work, as a whole, under this
+    License to anyone who comes into possession of a copy.  This
+    License will therefore apply, along with any applicable section 7
+    additional terms, to the whole of the work, and all its parts,
+    regardless of how they are packaged.  This License gives no
+    permission to license the work in any other way, but it does not
+    invalidate such permission if you have separately received it.
+
+    d) If the work has interactive user interfaces, each must display
+    Appropriate Legal Notices; however, if the Program has interactive
+    interfaces that do not display Appropriate Legal Notices, your
+    work need not make them do so.
+
+A compilation of a covered work with other separate and independent
+works, which are not by their nature extensions of the covered work,
+and which are not combined with it such as to form a larger program,
+in or on a volume of a storage or distribution medium, is called an
+"aggregate" if the compilation and its resulting copyright are not
+used to limit the access or legal rights of the compilation's users
+beyond what the individual works permit. Inclusion of a covered work
+in an aggregate does not cause this License to apply to the other
+parts of the aggregate.
+
+6. Conveying Non-Source Forms.
+
+You may convey a covered work in object code form under the terms
+of sections 4 and 5, provided that you also convey the
+machine-readable Corresponding Source under the terms of this License,
+in one of these ways:
+
+    a) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by the
+    Corresponding Source fixed on a durable physical medium
+    customarily used for software interchange.
+
+    b) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by a
+    written offer, valid for at least three years and valid for as
+    long as you offer spare parts or customer support for that product
+    model, to give anyone who possesses the object code either (1) a
+    copy of the Corresponding Source for all the software in the
+    product that is covered by this License, on a durable physical
+    medium customarily used for software interchange, for a price no
+    more than your reasonable cost of physically performing this
+    conveying of source, or (2) access to copy the
+    Corresponding Source from a network server at no charge.
+
+    c) Convey individual copies of the object code with a copy of the
+    written offer to provide the Corresponding Source.  This
+    alternative is allowed only occasionally and noncommercially, and
+    only if you received the object code with such an offer, in accord
+    with subsection 6b.
+
+    d) Convey the object code by offering access from a designated
+    place (gratis or for a charge), and offer equivalent access to the
+    Corresponding Source in the same way through the same place at no
+    further charge.  You need not require recipients to copy the
+    Corresponding Source along with the object code.  If the place to
+    copy the object code is a network server, the Corresponding Source
+    may be on a different server (operated by you or a third party)
+    that supports equivalent copying facilities, provided you maintain
+    clear directions next to the object code saying where to find the
+    Corresponding Source.  Regardless of what server hosts the
+    Corresponding Source, you remain obligated to ensure that it is
+    available for as long as needed to satisfy these requirements.
+
+    e) Convey the object code using peer-to-peer transmission, provided
+    you inform other peers where the object code and Corresponding
+    Source of the work are being offered to the general public at no
+    charge under subsection 6d.
+
+A separable portion of the object code, whose source code is excluded
+from the Corresponding Source as a System Library, need not be
+included in conveying the object code work.
+
+A "User Product" is either (1) a "consumer product", which means any
+tangible personal property which is normally used for personal, family,
+or household purposes, or (2) anything designed or sold for incorporation
+into a dwelling. In determining whether a product is a consumer product,
+doubtful cases shall be resolved in favor of coverage. For a particular
+product received by a particular user, "normally used" refers to a
+typical or common use of that class of product, regardless of the status
+of the particular user or of the way in which the particular user
+actually uses, or expects or is expected to use, the product. A product
+is a consumer product regardless of whether the product has substantial
+commercial, industrial or non-consumer uses, unless such uses represent
+the only significant mode of use of the product.
+
+"Installation Information" for a User Product means any methods,
+procedures, authorization keys, or other information required to install
+and execute modified versions of a covered work in that User Product from
+a modified version of its Corresponding Source. The information must
+suffice to ensure that the continued functioning of the modified object
+code is in no case prevented or interfered with solely because
+modification has been made.
+
+If you convey an object code work under this section in, or with, or
+specifically for use in, a User Product, and the conveying occurs as
+part of a transaction in which the right of possession and use of the
+User Product is transferred to the recipient in perpetuity or for a
+fixed term (regardless of how the transaction is characterized), the
+Corresponding Source conveyed under this section must be accompanied
+by the Installation Information. But this requirement does not apply
+if neither you nor any third party retains the ability to install
+modified object code on the User Product (for example, the work has
+been installed in ROM).
+
+The requirement to provide Installation Information does not include a
+requirement to continue to provide support service, warranty, or updates
+for a work that has been modified or installed by the recipient, or for
+the User Product in which it has been modified or installed. Access to a
+network may be denied when the modification itself materially and
+adversely affects the operation of the network or violates the rules and
+protocols for communication across the network.
+
+Corresponding Source conveyed, and Installation Information provided,
+in accord with this section must be in a format that is publicly
+documented (and with an implementation available to the public in
+source code form), and must require no special password or key for
+unpacking, reading or copying.
+
+7. Additional Terms.
+
+"Additional permissions" are terms that supplement the terms of this
+License by making exceptions from one or more of its conditions.
+Additional permissions that are applicable to the entire Program shall
+be treated as though they were included in this License, to the extent
+that they are valid under applicable law. If additional permissions
+apply only to part of the Program, that part may be used separately
+under those permissions, but the entire Program remains governed by
+this License without regard to the additional permissions.
+
+When you convey a copy of a covered work, you may at your option
+remove any additional permissions from that copy, or from any part of
+it. (Additional permissions may be written to require their own
+removal in certain cases when you modify the work.) You may place
+additional permissions on material, added by you to a covered work,
+for which you have or can give appropriate copyright permission.
+
+Notwithstanding any other provision of this License, for material you
+add to a covered work, you may (if authorized by the copyright holders of
+that material) supplement the terms of this License with terms:
+
+    a) Disclaiming warranty or limiting liability differently from the
+    terms of sections 15 and 16 of this License; or
+
+    b) Requiring preservation of specified reasonable legal notices or
+    author attributions in that material or in the Appropriate Legal
+    Notices displayed by works containing it; or
+
+    c) Prohibiting misrepresentation of the origin of that material, or
+    requiring that modified versions of such material be marked in
+    reasonable ways as different from the original version; or
+
+    d) Limiting the use for publicity purposes of names of licensors or
+    authors of the material; or
+
+    e) Declining to grant rights under trademark law for use of some
+    trade names, trademarks, or service marks; or
+
+    f) Requiring indemnification of licensors and authors of that
+    material by anyone who conveys the material (or modified versions of
+    it) with contractual assumptions of liability to the recipient, for
+    any liability that these contractual assumptions directly impose on
+    those licensors and authors.
+
+All other non-permissive additional terms are considered "further
+restrictions" within the meaning of section 10. If the Program as you
+received it, or any part of it, contains a notice stating that it is
+governed by this License along with a term that is a further
+restriction, you may remove that term. If a license document contains
+a further restriction but permits relicensing or conveying under this
+License, you may add to a covered work material governed by the terms
+of that license document, provided that the further restriction does
+not survive such relicensing or conveying.
+
+If you add terms to a covered work in accord with this section, you
+must place, in the relevant source files, a statement of the
+additional terms that apply to those files, or a notice indicating
+where to find the applicable terms.
+
+Additional terms, permissive or non-permissive, may be stated in the
+form of a separately written license, or stated as exceptions;
+the above requirements apply either way.
+
+8. Termination.
+
+You may not propagate or modify a covered work except as expressly
+provided under this License. Any attempt otherwise to propagate or
+modify it is void, and will automatically terminate your rights under
+this License (including any patent licenses granted under the third
+paragraph of section 11).
+
+However, if you cease all violation of this License, then your
+license from a particular copyright holder is reinstated (a)
+provisionally, unless and until the copyright holder explicitly and
+finally terminates your license, and (b) permanently, if the copyright
+holder fails to notify you of the violation by some reasonable means
+prior to 60 days after the cessation.
+
+Moreover, your license from a particular copyright holder is
+reinstated permanently if the copyright holder notifies you of the
+violation by some reasonable means, this is the first time you have
+received notice of violation of this License (for any work) from that
+copyright holder, and you cure the violation prior to 30 days after
+your receipt of the notice.
+
+Termination of your rights under this section does not terminate the
+licenses of parties who have received copies or rights from you under
+this License. If your rights have been terminated and not permanently
+reinstated, you do not qualify to receive new licenses for the same
+material under section 10.
+
+9. Acceptance Not Required for Having Copies.
+
+You are not required to accept this License in order to receive or
+run a copy of the Program. Ancillary propagation of a covered work
+occurring solely as a consequence of using peer-to-peer transmission
+to receive a copy likewise does not require acceptance. However,
+nothing other than this License grants you permission to propagate or
+modify any covered work. These actions infringe copyright if you do
+not accept this License. Therefore, by modifying or propagating a
+covered work, you indicate your acceptance of this License to do so.
+
+10. Automatic Licensing of Downstream Recipients.
+
+Each time you convey a covered work, the recipient automatically
+receives a license from the original licensors, to run, modify and
+propagate that work, subject to this License. You are not responsible
+for enforcing compliance by third parties with this License.
+
+An "entity transaction" is a transaction transferring control of an
+organization, or substantially all assets of one, or subdividing an
+organization, or merging organizations. If propagation of a covered
+work results from an entity transaction, each party to that
+transaction who receives a copy of the work also receives whatever
+licenses to the work the party's predecessor in interest had or could
+give under the previous paragraph, plus a right to possession of the
+Corresponding Source of the work from the predecessor in interest, if
+the predecessor has it or can get it with reasonable efforts.
+
+You may not impose any further restrictions on the exercise of the
+rights granted or affirmed under this License. For example, you may
+not impose a license fee, royalty, or other charge for exercise of
+rights granted under this License, and you may not initiate litigation
+(including a cross-claim or counterclaim in a lawsuit) alleging that
+any patent claim is infringed by making, using, selling, offering for
+sale, or importing the Program or any portion of it.
+
+11. Patents.
+
+A "contributor" is a copyright holder who authorizes use under this
+License of the Program or a work on which the Program is based. The
+work thus licensed is called the contributor's "contributor version".
+
+A contributor's "essential patent claims" are all patent claims
+owned or controlled by the contributor, whether already acquired or
+hereafter acquired, that would be infringed by some manner, permitted
+by this License, of making, using, or selling its contributor version,
+but do not include claims that would be infringed only as a
+consequence of further modification of the contributor version. For
+purposes of this definition, "control" includes the right to grant
+patent sublicenses in a manner consistent with the requirements of
+this License.
+
+Each contributor grants you a non-exclusive, worldwide, royalty-free
+patent license under the contributor's essential patent claims, to
+make, use, sell, offer for sale, import and otherwise run, modify and
+propagate the contents of its contributor version.
+
+In the following three paragraphs, a "patent license" is any express
+agreement or commitment, however denominated, not to enforce a patent
+(such as an express permission to practice a patent or covenant not to
+sue for patent infringement). To "grant" such a patent license to a
+party means to make such an agreement or commitment not to enforce a
+patent against the party.
+
+If you convey a covered work, knowingly relying on a patent license,
+and the Corresponding Source of the work is not available for anyone
+to copy, free of charge and under the terms of this License, through a
+publicly available network server or other readily accessible means,
+then you must either (1) cause the Corresponding Source to be so
+available, or (2) arrange to deprive yourself of the benefit of the
+patent license for this particular work, or (3) arrange, in a manner
+consistent with the requirements of this License, to extend the patent
+license to downstream recipients. "Knowingly relying" means you have
+actual knowledge that, but for the patent license, your conveying the
+covered work in a country, or your recipient's use of the covered work
+in a country, would infringe one or more identifiable patents in that
+country that you have reason to believe are valid.
+
+If, pursuant to or in connection with a single transaction or
+arrangement, you convey, or propagate by procuring conveyance of, a
+covered work, and grant a patent license to some of the parties
+receiving the covered work authorizing them to use, propagate, modify
+or convey a specific copy of the covered work, then the patent license
+you grant is automatically extended to all recipients of the covered
+work and works based on it.
+
+A patent license is "discriminatory" if it does not include within
+the scope of its coverage, prohibits the exercise of, or is
+conditioned on the non-exercise of one or more of the rights that are
+specifically granted under this License. You may not convey a covered
+work if you are a party to an arrangement with a third party that is
+in the business of distributing software, under which you make payment
+to the third party based on the extent of your activity of conveying
+the work, and under which the third party grants, to any of the
+parties who would receive the covered work from you, a discriminatory
+patent license (a) in connection with copies of the covered work
+conveyed by you (or copies made from those copies), or (b) primarily
+for and in connection with specific products or compilations that
+contain the covered work, unless you entered into that arrangement,
+or that patent license was granted, prior to 28 March 2007.
+
+Nothing in this License shall be construed as excluding or limiting
+any implied license or other defenses to infringement that may
+otherwise be available to you under applicable patent law.
+
+12. No Surrender of Others' Freedom.
+
+If conditions are imposed on you (whether by court order, agreement or
+otherwise) that contradict the conditions of this License, they do not
+excuse you from the conditions of this License. If you cannot convey a
+covered work so as to satisfy simultaneously your obligations under this
+License and any other pertinent obligations, then as a consequence you may
+not convey it at all. For example, if you agree to terms that obligate you
+to collect a royalty for further conveying from those to whom you convey
+the Program, the only way you could satisfy both those terms and this
+License would be to refrain entirely from conveying the Program.
+
+13. Remote Network Interaction; Use with the GNU General Public License.
+
+Notwithstanding any other provision of this License, if you modify the
+Program, your modified version must prominently offer all users
+interacting with it remotely through a computer network (if your version
+supports such interaction) an opportunity to receive the Corresponding
+Source of your version by providing access to the Corresponding Source
+from a network server at no charge, through some standard or customary
+means of facilitating copying of software. This Corresponding Source
+shall include the Corresponding Source for any work covered by version 3
+of the GNU General Public License that is incorporated pursuant to the
+following paragraph.
+
+Notwithstanding any other provision of this License, you have
+permission to link or combine any covered work with a work licensed
+under version 3 of the GNU General Public License into a single
+combined work, and to convey the resulting work. The terms of this
+License will continue to apply to the part which is the covered work,
+but the work with which it is combined will remain governed by version
+3 of the GNU General Public License.
+
+14. Revised Versions of this License.
+
+The Free Software Foundation may publish revised and/or new versions of
+the GNU Affero General Public License from time to time. Such new versions
+will be similar in spirit to the present version, but may differ in detail to
+address new problems or concerns.
+
+Each version is given a distinguishing version number. If the
+Program specifies that a certain numbered version of the GNU Affero General
+Public License "or any later version" applies to it, you have the
+option of following the terms and conditions either of that numbered
+version or of any later version published by the Free Software
+Foundation. If the Program does not specify a version number of the
+GNU Affero General Public License, you may choose any version ever published
+by the Free Software Foundation.
+
+If the Program specifies that a proxy can decide which future
+versions of the GNU Affero General Public License can be used, that proxy's
+public statement of acceptance of a version permanently authorizes you
+to choose that version for the Program.
+
+Later license versions may give you additional or different
+permissions. However, no additional obligations are imposed on any
+author or copyright holder as a result of your choosing to follow a
+later version.
+
+15. Disclaimer of Warranty.
+
+THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
+APPLICABLE LAW. EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
+HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY
+OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO,
+THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+PURPOSE. THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM
+IS WITH YOU. SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF
+ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
+
+16. Limitation of Liability.
+
+IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
+WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS
+THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY
+GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE
+USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF
+DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD
+PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),
+EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF
+SUCH DAMAGES.
+
+17. Interpretation of Sections 15 and 16.
+
+If the disclaimer of warranty and limitation of liability provided
+above cannot be given local legal effect according to their terms,
+reviewing courts shall apply local law that most closely approximates
+an absolute waiver of all civil liability in connection with the
+Program, unless a warranty or assumption of liability accompanies a
+copy of the Program in return for a fee.
+
+                     END OF TERMS AND CONDITIONS
+
+            How to Apply These Terms to Your New Programs
+
+If you develop a new program, and you want it to be of the greatest
+possible use to the public, the best way to achieve this is to make it
+free software which everyone can redistribute and change under these terms.
+
+To do so, attach the following notices to the program. It is safest
+to attach them to the start of each source file to most effectively
+state the exclusion of warranty; and each file should have at least
+the "copyright" line and a pointer to where the full notice is found.
+
+    <one line to give the program's name and a brief idea of what it does.>
+    Copyright (C) <year>  <name of author>
+
+    This program is free software: you can redistribute it and/or modify
+    it under the terms of the GNU Affero General Public License as published
+    by the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    This program is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU Affero General Public License for more details.
+
+    You should have received a copy of the GNU Affero General Public License
+    along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+Also add information on how to contact you by electronic and paper mail.
+
+If your software can interact with users remotely through a computer
+network, you should also make sure that it provides a way for users to
+get its source. For example, if your program is a web application, its
+interface could display a "Source" link that leads users to an archive
+of the code. There are many ways you could offer source, and different
+solutions will be better for different programs; see section 13 for the
+specific requirements.
+
+You should also get your employer (if you work as a programmer) or school,
+if any, to sign a "copyright disclaimer" for the program, if necessary.
+For more information on this, and how to apply and follow the GNU AGPL, see
+<https://www.gnu.org/licenses/>.
diff --git a/src/services/edge-application-error-responses-services/list-error-responses-service.js b/src/services/edge-application-error-responses-services/list-error-responses-service.js
index 128ec7337..23eb1cfdb 100644
--- a/src/services/edge-application-error-responses-services/list-error-responses-service.js
+++ b/src/services/edge-application-error-responses-services/list-error-responses-service.js
@@ -22,7 +22,9 @@ const adapt = (httpResponse) => {
         code: element.code.toString(),
         timeout: element.timeout,
         uri: element.uri,
-        customStatusCode: element.custom_status_code? Number(element.custom_status_code): element.custom_status_code,
+        customStatusCode: element.custom_status_code
+          ? Number(element.custom_status_code)
+          : element.custom_status_code
       }
     })
   }

From 76af3ff7e8be7179c73b8ee8b78ddfdf3d090436 Mon Sep 17 00:00:00 2001
From: paulosf0 <paulo.ferreira@azion.com>
Date: Mon, 15 Jan 2024 15:25:46 -0300
Subject: [PATCH 080/135] feat: add edit test

---
 src/router/routes/waf-rules-routes/index.js   |  12 +-
 .../create-waf-rules-allowed-service.js       |   5 +-
 .../edit-waf-rules-allowed-service.js         |  90 ++++++++++++
 src/services/waf-rules-services/index.js      |   6 +-
 .../load-waf-rules-allowed-service.js         |  28 ++++
 .../create-waf-rules-allowed-service.test.js  |   2 +-
 .../edit-waf-rules-allowed-service.test.js    | 109 ++++++++++++++
 .../edit-waf-rules-service.test.js            | 136 ++++++++++++++++++
 .../load-waf-rules-allowed-sevice.test.js     |  63 ++++++++
 .../load-waf-rules-service.test.js            |  93 ++++++++++++
 src/views/WafRules/EditView.vue               |  36 +++--
 11 files changed, 562 insertions(+), 18 deletions(-)
 create mode 100644 src/services/waf-rules-services/edit-waf-rules-allowed-service.js
 create mode 100644 src/services/waf-rules-services/load-waf-rules-allowed-service.js
 create mode 100644 src/tests/services/waf-rules-services/edit-waf-rules-allowed-service.test.js
 create mode 100644 src/tests/services/waf-rules-services/edit-waf-rules-service.test.js
 create mode 100644 src/tests/services/waf-rules-services/load-waf-rules-allowed-sevice.test.js
 create mode 100644 src/tests/services/waf-rules-services/load-waf-rules-service.test.js

diff --git a/src/router/routes/waf-rules-routes/index.js b/src/router/routes/waf-rules-routes/index.js
index 4ca61a672..246f40670 100644
--- a/src/router/routes/waf-rules-routes/index.js
+++ b/src/router/routes/waf-rules-routes/index.js
@@ -53,7 +53,9 @@ export const wafRulesRoutes = {
         loadWafRulesService: WafRulesService.loadWafRulesService,
         listWafRulesAllowedService: WafRulesService.listWafRulesAllowedService,
         deleteWafRulesAllowedService: WafRulesService.deleteWafRulesAllowedService,
-        createWafRulesAllowedService: WafRulesService.createWafRulesAllowedService
+        createWafRulesAllowedService: WafRulesService.createWafRulesAllowedService,
+        loadWafRulesAllowedService: WafRulesService.loadWafRulesAllowedService,
+        editWafRulesAllowedService: WafRulesService.editWafRulesAllowedService
       },
       meta: {
         breadCrumbs: [
@@ -76,7 +78,9 @@ export const wafRulesRoutes = {
         loadWafRulesService: WafRulesService.loadWafRulesService,
         listWafRulesAllowedService: WafRulesService.listWafRulesAllowedService,
         deleteWafRulesAllowedService: WafRulesService.deleteWafRulesAllowedService,
-        createWafRulesAllowedService: WafRulesService.createWafRulesAllowedService
+        createWafRulesAllowedService: WafRulesService.createWafRulesAllowedService,
+        loadWafRulesAllowedService: WafRulesService.loadWafRulesAllowedService,
+        editWafRulesAllowedService: WafRulesService.editWafRulesAllowedService
       },
       meta: {
         breadCrumbs: [
@@ -99,7 +103,9 @@ export const wafRulesRoutes = {
         loadWafRulesService: WafRulesService.loadWafRulesService,
         listWafRulesAllowedService: WafRulesService.listWafRulesAllowedService,
         deleteWafRulesAllowedService: WafRulesService.deleteWafRulesAllowedService,
-        createWafRulesAllowedService: WafRulesService.createWafRulesAllowedService
+        createWafRulesAllowedService: WafRulesService.createWafRulesAllowedService,
+        loadWafRulesAllowedService: WafRulesService.loadWafRulesAllowedService,
+        editWafRulesAllowedService: WafRulesService.editWafRulesAllowedService
       },
       meta: {
         breadCrumbs: [
diff --git a/src/services/waf-rules-services/create-waf-rules-allowed-service.js b/src/services/waf-rules-services/create-waf-rules-allowed-service.js
index 68c63758e..01050be7c 100644
--- a/src/services/waf-rules-services/create-waf-rules-allowed-service.js
+++ b/src/services/waf-rules-services/create-waf-rules-allowed-service.js
@@ -13,11 +13,10 @@ export const createWafRulesAllowedService = async ({ payload, id }) => {
 }
 
 const adapt = (payload) => {
-  
   return {
-    match_zones: payload.matchZones.map( (zone) => {
+    match_zones: payload.matchZones.map((zone) => {
       const zoneWithoutMatchoZone = ['path', 'file_name', 'raw_body']
-      if(zoneWithoutMatchoZone.includes(zone.zone)) {
+      if (zoneWithoutMatchoZone.includes(zone.zone)) {
         zone.matches_on = null
       }
 
diff --git a/src/services/waf-rules-services/edit-waf-rules-allowed-service.js b/src/services/waf-rules-services/edit-waf-rules-allowed-service.js
new file mode 100644
index 000000000..39e57ae76
--- /dev/null
+++ b/src/services/waf-rules-services/edit-waf-rules-allowed-service.js
@@ -0,0 +1,90 @@
+import { AxiosHttpClientAdapter } from '../axios/AxiosHttpClientAdapter'
+import * as Errors from '@/services/axios/errors'
+import { makeWafRulesAllowedBaseUrl } from './make-waf-rules-allowed-base-url'
+
+export const editWafRulesAllowedService = async ({ payload, id, allowedId}) => {
+  let httpResponse = await AxiosHttpClientAdapter.request({
+    url: `${makeWafRulesAllowedBaseUrl()}/${id}/allowed_rules/${allowedId}`,
+    method: 'PUT',
+    body: adapt(payload)
+  })
+
+  return parseHttpResponse(httpResponse)
+}
+
+const adapt = (payload) => {
+  return {
+    match_zones: payload.matchZones.map((zone) => {
+      const zoneWithoutMatchoZone = ['path', 'file_name', 'raw_body']
+      if (zoneWithoutMatchoZone.includes(zone.zone)) {
+        zone.matches_on = null
+      }
+
+      return zone
+    }),
+    path: payload.path,
+    reason: payload.reason,
+    rule_id: payload.ruleId,
+    status: payload.status,
+    use_regex: payload.useRegex
+  }
+}
+
+/**
+ * @param {Object} httpResponse - The HTTP response object.
+ * @param {Object} httpResponse.body - The response body.
+ * @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 200:
+      return 'Your waf rule allowed has been updated'
+    case 400:
+      const apiError = extractApiError(httpResponse)
+      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
+  }
+}
+
+/**
+ * @param {Object} errorSchema - The error schema.
+ * @param {string} key - The error key of error schema.
+ * @returns {string|undefined} The result message based on the status code.
+ */
+
+/**
+ * @param {Object} httpResponse - The HTTP response object.
+ * @param {Object} httpResponse.body - The response body.
+ * @returns {string} The result message based on the status code.
+ */
+const extractErrorKey = (errorSchema, key) => {
+  const [keyError] = Object.keys(errorSchema[key]?.[0])
+  if (errorSchema[key]?.[0][keyError] instanceof Object) {
+    return errorSchema[key]?.[0][keyError][0]
+  }
+
+  return errorSchema[key]?.[0]
+}
+
+/**
+ * @param {Object} httpResponse - The HTTP response object.
+ * @param {Object} httpResponse.body - The response body.
+ * @returns {string} The result message based on the status code.
+ */
+const extractApiError = (httpResponse) => {
+  const [firstKey] = Object.keys(httpResponse.body)
+  const errorMessage = extractErrorKey(httpResponse.body, firstKey)
+
+  return errorMessage
+}
\ No newline at end of file
diff --git a/src/services/waf-rules-services/index.js b/src/services/waf-rules-services/index.js
index 56d702709..b13c20751 100644
--- a/src/services/waf-rules-services/index.js
+++ b/src/services/waf-rules-services/index.js
@@ -6,6 +6,8 @@ import { editWafRulesService } from './edit-waf-rules-service'
 import { listWafRulesAllowedService } from './list-waf-rules-allowed-service'
 import { deleteWafRulesAllowedService } from './delete-waf-rules-allowed-service'
 import { createWafRulesAllowedService } from './create-waf-rules-allowed-service'
+import { loadWafRulesAllowedService } from './load-waf-rules-allowed-service'
+import { editWafRulesAllowedService } from './edit-waf-rules-allowed-service'
 
 export {
   listWafRulesService,
@@ -15,5 +17,7 @@ export {
   editWafRulesService,
   listWafRulesAllowedService,
   deleteWafRulesAllowedService,
-  createWafRulesAllowedService
+  createWafRulesAllowedService,
+  loadWafRulesAllowedService,
+  editWafRulesAllowedService
 }
diff --git a/src/services/waf-rules-services/load-waf-rules-allowed-service.js b/src/services/waf-rules-services/load-waf-rules-allowed-service.js
new file mode 100644
index 000000000..a64704a49
--- /dev/null
+++ b/src/services/waf-rules-services/load-waf-rules-allowed-service.js
@@ -0,0 +1,28 @@
+import { AxiosHttpClientAdapter, parseHttpResponse } from '../axios/AxiosHttpClientAdapter'
+import { makeWafRulesAllowedBaseUrl } from './make-waf-rules-allowed-base-url'
+
+export const loadWafRulesAllowedService = async ({ id, allowedId }) => {
+  let httpResponse = await AxiosHttpClientAdapter.request({
+    url: `${makeWafRulesAllowedBaseUrl()}/${id}/allowed_rules/${allowedId.id}`,
+    method: 'GET'
+  })
+  httpResponse = adapt(httpResponse)
+
+  return parseHttpResponse(httpResponse)
+}
+
+const adapt = (httpResponse) => {
+  const parsedWafRules = {
+    matchZones: httpResponse.body.data.match_zones,
+    path: httpResponse.body.data.path,
+    reason: httpResponse.body.data.reason,
+    ruleId:   httpResponse.body.data.rule_id,
+    status: httpResponse.body.data.status,
+    useRegex:  httpResponse.body.data.use_regex,
+  }
+
+  return {
+    body: parsedWafRules,
+    statusCode: httpResponse.statusCode
+  }
+}
diff --git a/src/tests/services/waf-rules-services/create-waf-rules-allowed-service.test.js b/src/tests/services/waf-rules-services/create-waf-rules-allowed-service.test.js
index ed40d221a..2bfc591f0 100644
--- a/src/tests/services/waf-rules-services/create-waf-rules-allowed-service.test.js
+++ b/src/tests/services/waf-rules-services/create-waf-rules-allowed-service.test.js
@@ -68,7 +68,7 @@ describe('WafRulesServices', () => {
     vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
       statusCode: 400,
       body: {
-        [errorKey]: [ { 'error': [apiErrorMock] } ]
+        [errorKey]: [{ error: [apiErrorMock] }]
       }
     })
     const { sut } = makeSut()
diff --git a/src/tests/services/waf-rules-services/edit-waf-rules-allowed-service.test.js b/src/tests/services/waf-rules-services/edit-waf-rules-allowed-service.test.js
new file mode 100644
index 000000000..e22d63f0c
--- /dev/null
+++ b/src/tests/services/waf-rules-services/edit-waf-rules-allowed-service.test.js
@@ -0,0 +1,109 @@
+import { AxiosHttpClientAdapter } from '@/services/axios/AxiosHttpClientAdapter'
+import * as Errors from '@/services/axios/errors'
+import { editWafRulesAllowedService } from '@/services/waf-rules-services'
+import { describe, expect, it, vi } from 'vitest'
+
+const fixtures = {
+  wafRulesMock: {
+    matchZones: [{ matches_on: null, zone: 'path', zone_input: null }],
+    path: '/tmp',
+    ruleId: 0,
+    reason: 'test',
+    status: false,
+    useRegex: false
+  }
+}
+
+const makeSut = () => {
+  const sut = editWafRulesAllowedService
+
+  return {
+    sut
+  }
+}
+
+describe('WafRulesServices', () => {
+  it('should call API with correct params', async () => {
+    const requestSpy = vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+      statusCode: 200,
+      body: fixtures.wafRulesMock
+    })
+    const { sut } = makeSut()
+    await sut({ payload: fixtures.wafRulesMock, id: 4040, allowedId: 10 })
+
+    expect(requestSpy).toHaveBeenCalledWith({
+      url: 'v4/edge/waf/4040/allowed_rules/10',
+      method: 'PUT',
+      body: {
+        match_zones: fixtures.wafRulesMock.matchZones,
+        path: fixtures.wafRulesMock.path,
+        reason: fixtures.wafRulesMock.reason,
+        rule_id: fixtures.wafRulesMock.ruleId,
+        status: fixtures.wafRulesMock.status,
+        use_regex: fixtures.wafRulesMock.useRegex
+      }
+    })
+  })
+
+  it('should return a feedback message on successfully updated', async () => {
+    vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+      statusCode: 200,
+      body: fixtures.wafRulesMock
+    })
+    const { sut } = makeSut()
+
+    const data = await sut({ payload: fixtures.wafRulesMock, id: 4040, allowedId: 10 })
+
+    expect(data).toStrictEqual('Your waf rule allowed has been updated')
+  })
+
+  it.only('Should return an API error for an 400 response status', async () => {
+    const apiErrorMock = 'This field is required.'
+    vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+      statusCode: 400,
+      body: {
+        detail: [apiErrorMock]
+      }
+    })
+    const { sut } = makeSut()
+
+    const feedbackMessage = sut({payload: fixtures.wafRulesMock, id: 4040, allowedId: 10 })
+
+    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
+      })
+      const { sut } = makeSut()
+
+      const response = sut({payload: fixtures.wafRulesMock, id: 4040, allowedId: 10 })
+
+      expect(response).rejects.toBe(expectedError)
+    }
+  )
+})
diff --git a/src/tests/services/waf-rules-services/edit-waf-rules-service.test.js b/src/tests/services/waf-rules-services/edit-waf-rules-service.test.js
new file mode 100644
index 000000000..40e3fc0a7
--- /dev/null
+++ b/src/tests/services/waf-rules-services/edit-waf-rules-service.test.js
@@ -0,0 +1,136 @@
+import { AxiosHttpClientAdapter } from '@/services/axios/AxiosHttpClientAdapter'
+import * as Errors from '@/services/axios/errors'
+import { editWafRulesService } from '@/services/waf-rules-services'
+import { describe, expect, it, vi } from 'vitest'
+
+const fixtures = {
+  wafRulesMock: {
+    crossSiteScriptingSensitivity: 'medium',
+    directoryTraversalSensitivity: 'medium',
+    evadingTricksSensitivity: 'medium',
+    fileUploadSensitivity: 'medium',
+    identifiedAttackSensitivity: 'medium',
+    remoteFileInclusionSensitivity: 'medium',
+    sqlInjectionSensitivity: 'medium',
+    unwantedAccessSensitivity: 'medium',
+    fileUpload: true,
+    evadingTricks: true,
+    unwantedAccess: true,
+    identifiedAttack: true,
+    crossSiteScripting: true,
+    directoryTraversal: true,
+    remoteFileInclusion: true,
+    sqlInjection: true,
+    active: false,
+    name: 'test'
+  }
+}
+
+const makeSut = () => {
+  const sut = editWafRulesService
+
+  return {
+    sut
+  }
+}
+
+describe('WafRulesServices', () => {
+  it('should call API with correct params', async () => {
+    const requestSpy = vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+      statusCode: 200,
+      body: fixtures.wafRulesMock
+    })
+    const { sut } = makeSut()
+    await sut(fixtures.wafRulesMock, 4040)
+
+    expect(requestSpy).toHaveBeenCalledWith({
+      url: 'v3/waf/rulesets/4040',
+      method: 'PATCH',
+      body: {
+        bypass_addresses: fixtures.wafRulesMock.bypassAddresses,
+        cross_site_scripting_sensitivity: fixtures.wafRulesMock.crossSiteScriptingSensitivity,
+        directory_traversal_sensitivity: fixtures.wafRulesMock.directoryTraversalSensitivity,
+        evading_tricks_sensitivity: fixtures.wafRulesMock.evadingTricksSensitivity,
+        file_upload_sensitivity: fixtures.wafRulesMock.fileUploadSensitivity,
+        id: fixtures.wafRulesMock.id,
+        identified_attack_sensitivity: fixtures.wafRulesMock.identifiedAttackSensitivity,
+        name: fixtures.wafRulesMock.name,
+        remote_file_inclusion_sensitivity: fixtures.wafRulesMock.remoteFileInclusionSensitivity,
+        sql_injection_sensitivity: fixtures.wafRulesMock.sqlInjectionSensitivity,
+        unwanted_access_sensitivity: fixtures.wafRulesMock.unwantedAccessSensitivity,
+        file_upload: fixtures.wafRulesMock.fileUpload,
+        evading_tricks: fixtures.wafRulesMock.evadingTricks,
+        unwanted_access: fixtures.wafRulesMock.unwantedAccess,
+        identified_attack: fixtures.wafRulesMock.identifiedAttack,
+        cross_site_scripting: fixtures.wafRulesMock.crossSiteScripting,
+        directory_traversal: fixtures.wafRulesMock.directoryTraversal,
+        remote_file_inclusion: fixtures.wafRulesMock.remoteFileInclusion,
+        sql_injection: fixtures.wafRulesMock.sqlInjection,
+        active: fixtures.wafRulesMock.active
+      }
+    })
+  })
+
+  it('should return a feedback message on successfully updated', async () => {
+    vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+      statusCode: 200,
+      body: fixtures.wafRulesMock
+    })
+    const { sut } = makeSut()
+
+    const data = await sut(fixtures.wafRulesMock)
+
+    expect(data).toStrictEqual('Your waf rule has been updated')
+  })
+
+  it('Should return an API error for an 400 response status', async () => {
+    const errorKey = 'detail'
+    const apiErrorMock = 'This field is required.'
+    vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+      statusCode: 400,
+      body: {
+        [errorKey]: [apiErrorMock]
+      }
+    })
+    const { sut } = makeSut()
+
+    const feedbackMessage = sut(fixtures.wafRulesMock)
+
+    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
+      })
+      const { sut } = makeSut()
+
+      const response = sut(fixtures.wafRulesMock)
+
+      expect(response).rejects.toBe(expectedError)
+    }
+  )
+})
diff --git a/src/tests/services/waf-rules-services/load-waf-rules-allowed-sevice.test.js b/src/tests/services/waf-rules-services/load-waf-rules-allowed-sevice.test.js
new file mode 100644
index 000000000..739c2f03c
--- /dev/null
+++ b/src/tests/services/waf-rules-services/load-waf-rules-allowed-sevice.test.js
@@ -0,0 +1,63 @@
+import { AxiosHttpClientAdapter } from '@/services/axios/AxiosHttpClientAdapter'
+import { loadWafRulesAllowedService } from '@/services/waf-rules-services'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+const fixtures = {
+  wafRulesMock: {
+    match_zones: [{ matches_on: null, zone: 'path', zone_input: null }],
+    path: '/tmp',
+    rule_id: 0,
+    reason: 'test',
+    status: false,
+    use_regex: false
+  }
+}
+
+const makeSut = () => {
+  const sut = loadWafRulesAllowedService
+
+  return {
+    sut
+  }
+}
+
+describe('WafRulesService', () => {
+  beforeEach(() => {
+    vi.useFakeTimers()
+  })
+  afterEach(() => {
+    vi.useRealTimers()
+  })
+  it('should call api with correct params', async () => {
+    const requestSpy = vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+      statusCode: 200,
+      body: { data: fixtures.wafRulesMock }
+    })
+    const { sut } = makeSut()
+    await sut({ id: 4044, allowedId: { id: 10 } })
+
+    expect(requestSpy).toHaveBeenCalledWith({
+      url: 'v4/edge/waf/4044/allowed_rules/10',
+      method: 'GET'
+    })
+  })
+
+  it('should parsed correctly the returned waf rules allowed', async () => {
+    vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+      statusCode: 200,
+      body: { data: fixtures.wafRulesMock }
+    })
+    const { sut } = makeSut()
+
+    const result = await sut({ id: 4044, allowedId: { id: 10 } })
+
+    expect(result).toEqual({
+      matchZones: fixtures.wafRulesMock.match_zones,
+      path: fixtures.wafRulesMock.path,
+      reason: fixtures.wafRulesMock.reason,
+      ruleId:   fixtures.wafRulesMock.rule_id,
+      status: fixtures.wafRulesMock.status,
+      useRegex:  fixtures.wafRulesMock.use_regex,
+    })
+  })
+})
diff --git a/src/tests/services/waf-rules-services/load-waf-rules-service.test.js b/src/tests/services/waf-rules-services/load-waf-rules-service.test.js
new file mode 100644
index 000000000..248d5003d
--- /dev/null
+++ b/src/tests/services/waf-rules-services/load-waf-rules-service.test.js
@@ -0,0 +1,93 @@
+import { AxiosHttpClientAdapter } from '@/services/axios/AxiosHttpClientAdapter'
+import { loadWafRulesService } from '@/services/waf-rules-services'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+const fixtures = {
+  wafRulesMock: {
+    active: true,
+    bypass_addresses: [],
+    cross_site_scripting: false,
+    cross_site_scripting_sensitivity: 'medium',
+    directory_traversal: false,
+    directory_traversal_sensitivity: 'medium',
+    evading_tricks: false,
+    evading_tricks_sensitivity: 'medium',
+    file_upload: true,
+    file_upload_sensitivity: 'medium',
+    id: 4044,
+    identified_attack: false,
+    identified_attack_sensitivity: 'medium',
+    mode: 'counting',
+    name: 'test',
+    remote_file_inclusion: false,
+    remote_file_inclusion_sensitivity: 'medium',
+    sql_injection: false,
+    sql_injection_sensitivity: 'medium',
+    unwanted_access: false,
+    unwanted_access_sensitivity: 'medium'
+  }
+}
+
+const makeSut = () => {
+  const sut = loadWafRulesService
+
+  return {
+    sut
+  }
+}
+
+describe('WafRulesService', () => {
+  beforeEach(() => {
+    vi.useFakeTimers()
+  })
+  afterEach(() => {
+    vi.useRealTimers()
+  })
+  it('should call api with correct params', async () => {
+    const requestSpy = vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+      statusCode: 200,
+      body: { results: fixtures.wafRulesMock }
+    })
+    const { sut } = makeSut()
+    await sut({ id: fixtures.wafRulesMock.id })
+
+    expect(requestSpy).toHaveBeenCalledWith({
+      url: 'v3/waf/rulesets/4044',
+      method: 'GET'
+    })
+  })
+
+  it('should parsed correctly the returned waf rules', async () => {
+    vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+      statusCode: 200,
+      body: { results: fixtures.wafRulesMock }
+    })
+    const { sut } = makeSut()
+
+    const result = await sut({ id: fixtures.wafRulesMock.id })
+
+    expect(result).toEqual({
+      active: fixtures.wafRulesMock.active,
+      bypassAddresses: fixtures.wafRulesMock.bypass_addresses,
+      crossSiteScriptingSensitivity: fixtures.wafRulesMock.cross_site_scripting_sensitivity,
+      directoryTraversalSensitivity: fixtures.wafRulesMock.directory_traversal_sensitivity,
+      evadingTricksSensitivity: fixtures.wafRulesMock.evading_tricks_sensitivity,
+      fileUploadSensitivity: fixtures.wafRulesMock.file_upload_sensitivity,
+      id: fixtures.wafRulesMock.id,
+      identifiedAttackSensitivity: fixtures.wafRulesMock.identified_attack_sensitivity,
+      mode: fixtures.wafRulesMock.mode,
+      name: fixtures.wafRulesMock.name,
+      remoteFileInclusionSensitivity: fixtures.wafRulesMock.remote_file_inclusion_sensitivity,
+      sqlInjectionSensitivity: fixtures.wafRulesMock.sql_injection_sensitivity,
+      unwantedAccessSensitivity: fixtures.wafRulesMock.unwanted_access_sensitivity,
+      fileUpload: fixtures.wafRulesMock.file_upload,
+      evadingTricks: fixtures.wafRulesMock.evading_tricks,
+      unwantedAccess: fixtures.wafRulesMock.unwanted_access,
+      identifiedAttack: fixtures.wafRulesMock.identified_attack,
+      crossSiteScripting: fixtures.wafRulesMock.cross_site_scripting,
+      directoryTraversal: fixtures.wafRulesMock.directory_traversal,
+      remoteFileInclusion: fixtures.wafRulesMock.remote_file_inclusion,
+      sqlInjection: fixtures.wafRulesMock.sql_injection
+    })
+  })
+})
diff --git a/src/views/WafRules/EditView.vue b/src/views/WafRules/EditView.vue
index d5fd837f3..92a034a55 100644
--- a/src/views/WafRules/EditView.vue
+++ b/src/views/WafRules/EditView.vue
@@ -91,20 +91,20 @@
             </template>
           </CreateDrawerBlock>
 
-          <!-- <EditDrawerBlock
+          <EditDrawerBlock
             v-if="showEditWafRulesAllowedDrawer"
-            :id="selectedIdnsRecordToEdit"
-            v-model:visible="showEditRecordDrawer"
-            :loadService="loadRecordServiceWithIDNSIdDecorator"
-            :editService="editRecordServiceWithIDNSIdDecorator"
-            :schema="validationSchemaIDNSRecords"
+            :id="selectedWafRulesAllowedToEdit"
+            v-model:visible="showEditWafRulesAllowedDrawer"
+            :loadService="handleLoadWafRulesAllowedService"
+            :editService="handleEditWafRulesAllowedService"
+            :schema="validationSchemaAllowed"
             @onSuccess="reloadWafRulesAllowedList"
-            title="Edit Intelligent DNS Record"
+            title="Edit Waf Rules Allowed"
           >
             <template #formFields>
-              <FormFieldsRecords />
+              <FormFieldsAllowed />
             </template>
-          </EditDrawerBlock> -->
+          </EditDrawerBlock>
         </TabPanel>
       </TabView>
       <router-view></router-view>
@@ -118,7 +118,7 @@
   import EmptyResultsBlock from '@/templates/empty-results-block'
   import { columnBuilder } from '@/templates/list-table-block/columns/column-builder'
   import CreateDrawerBlock from '@templates/create-drawer-block'
-  // import EditDrawerBlock from '@templates/edit-drawer-block'
+  import EditDrawerBlock from '@templates/edit-drawer-block'
   import EditFormBlock from '@templates/edit-form-block'
   import ListTableNoHeaderBlock from '@templates/list-table-block/no-header'
   import PageHeadingBlock from '@templates/page-heading-block'
@@ -160,6 +160,14 @@
     createWafRulesAllowedService: {
       type: Function,
       required: true
+    },
+    loadWafRulesAllowedService: {
+      type: Function,
+      required: true
+    },
+    editWafRulesAllowedService: {
+      type: Function,
+      required: true
     }
   })
 
@@ -302,6 +310,14 @@
     return await props.createWafRulesAllowedService({ payload, id: wafRuleId.value })
   }
 
+  const handleLoadWafRulesAllowedService = async (allowedId) => {
+    return await props.loadWafRulesAllowedService({ id: wafRuleId.value, allowedId })
+  }
+
+  const handleEditWafRulesAllowedService = async (payload) => {
+    return await props.editWafRulesAllowedService({ payload, id: wafRuleId.value, allowedId: selectedWafRulesAllowedToEdit.value})
+  }
+
   const openEditDrawerWafRulesAllowed = (event) => {
     selectedWafRulesAllowedToEdit.value = event.id
     showEditWafRulesAllowedDrawer.value = true

From 39a4dd72225673fe235920efb5e8d650876f87c9 Mon Sep 17 00:00:00 2001
From: paulosf0 <paulo.ferreira@azion.com>
Date: Mon, 15 Jan 2024 15:26:50 -0300
Subject: [PATCH 081/135] feat: husky format

---
 .../waf-rules-services/edit-waf-rules-allowed-service.js    | 4 ++--
 .../waf-rules-services/load-waf-rules-allowed-service.js    | 4 ++--
 .../edit-waf-rules-allowed-service.test.js                  | 4 ++--
 .../load-waf-rules-allowed-sevice.test.js                   | 4 ++--
 src/views/WafRules/EditView.vue                             | 6 +++++-
 5 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/src/services/waf-rules-services/edit-waf-rules-allowed-service.js b/src/services/waf-rules-services/edit-waf-rules-allowed-service.js
index 39e57ae76..5be9a8f70 100644
--- a/src/services/waf-rules-services/edit-waf-rules-allowed-service.js
+++ b/src/services/waf-rules-services/edit-waf-rules-allowed-service.js
@@ -2,7 +2,7 @@ import { AxiosHttpClientAdapter } from '../axios/AxiosHttpClientAdapter'
 import * as Errors from '@/services/axios/errors'
 import { makeWafRulesAllowedBaseUrl } from './make-waf-rules-allowed-base-url'
 
-export const editWafRulesAllowedService = async ({ payload, id, allowedId}) => {
+export const editWafRulesAllowedService = async ({ payload, id, allowedId }) => {
   let httpResponse = await AxiosHttpClientAdapter.request({
     url: `${makeWafRulesAllowedBaseUrl()}/${id}/allowed_rules/${allowedId}`,
     method: 'PUT',
@@ -87,4 +87,4 @@ const extractApiError = (httpResponse) => {
   const errorMessage = extractErrorKey(httpResponse.body, firstKey)
 
   return errorMessage
-}
\ No newline at end of file
+}
diff --git a/src/services/waf-rules-services/load-waf-rules-allowed-service.js b/src/services/waf-rules-services/load-waf-rules-allowed-service.js
index a64704a49..77651900c 100644
--- a/src/services/waf-rules-services/load-waf-rules-allowed-service.js
+++ b/src/services/waf-rules-services/load-waf-rules-allowed-service.js
@@ -16,9 +16,9 @@ const adapt = (httpResponse) => {
     matchZones: httpResponse.body.data.match_zones,
     path: httpResponse.body.data.path,
     reason: httpResponse.body.data.reason,
-    ruleId:   httpResponse.body.data.rule_id,
+    ruleId: httpResponse.body.data.rule_id,
     status: httpResponse.body.data.status,
-    useRegex:  httpResponse.body.data.use_regex,
+    useRegex: httpResponse.body.data.use_regex
   }
 
   return {
diff --git a/src/tests/services/waf-rules-services/edit-waf-rules-allowed-service.test.js b/src/tests/services/waf-rules-services/edit-waf-rules-allowed-service.test.js
index e22d63f0c..083b9636b 100644
--- a/src/tests/services/waf-rules-services/edit-waf-rules-allowed-service.test.js
+++ b/src/tests/services/waf-rules-services/edit-waf-rules-allowed-service.test.js
@@ -67,7 +67,7 @@ describe('WafRulesServices', () => {
     })
     const { sut } = makeSut()
 
-    const feedbackMessage = sut({payload: fixtures.wafRulesMock, id: 4040, allowedId: 10 })
+    const feedbackMessage = sut({ payload: fixtures.wafRulesMock, id: 4040, allowedId: 10 })
 
     expect(feedbackMessage).rejects.toThrow(apiErrorMock)
   })
@@ -101,7 +101,7 @@ describe('WafRulesServices', () => {
       })
       const { sut } = makeSut()
 
-      const response = sut({payload: fixtures.wafRulesMock, id: 4040, allowedId: 10 })
+      const response = sut({ payload: fixtures.wafRulesMock, id: 4040, allowedId: 10 })
 
       expect(response).rejects.toBe(expectedError)
     }
diff --git a/src/tests/services/waf-rules-services/load-waf-rules-allowed-sevice.test.js b/src/tests/services/waf-rules-services/load-waf-rules-allowed-sevice.test.js
index 739c2f03c..aea8254fc 100644
--- a/src/tests/services/waf-rules-services/load-waf-rules-allowed-sevice.test.js
+++ b/src/tests/services/waf-rules-services/load-waf-rules-allowed-sevice.test.js
@@ -55,9 +55,9 @@ describe('WafRulesService', () => {
       matchZones: fixtures.wafRulesMock.match_zones,
       path: fixtures.wafRulesMock.path,
       reason: fixtures.wafRulesMock.reason,
-      ruleId:   fixtures.wafRulesMock.rule_id,
+      ruleId: fixtures.wafRulesMock.rule_id,
       status: fixtures.wafRulesMock.status,
-      useRegex:  fixtures.wafRulesMock.use_regex,
+      useRegex: fixtures.wafRulesMock.use_regex
     })
   })
 })
diff --git a/src/views/WafRules/EditView.vue b/src/views/WafRules/EditView.vue
index 92a034a55..edbe560e8 100644
--- a/src/views/WafRules/EditView.vue
+++ b/src/views/WafRules/EditView.vue
@@ -315,7 +315,11 @@
   }
 
   const handleEditWafRulesAllowedService = async (payload) => {
-    return await props.editWafRulesAllowedService({ payload, id: wafRuleId.value, allowedId: selectedWafRulesAllowedToEdit.value})
+    return await props.editWafRulesAllowedService({
+      payload,
+      id: wafRuleId.value,
+      allowedId: selectedWafRulesAllowedToEdit.value
+    })
   }
 
   const openEditDrawerWafRulesAllowed = (event) => {

From 7cc8f9fbed0e7ef48b351f48933e29103e9703f2 Mon Sep 17 00:00:00 2001
From: aloisio-m-bastian <107002324+aloisio-m-bastian@users.noreply.github.com>
Date: Mon, 15 Jan 2024 15:29:03 -0300
Subject: [PATCH 082/135] fix: return to home when create form is canceled
 (#560)

---
 src/views/CreateNew/CreateView.vue | 4 ++++
 src/views/CreateNew/DeployView.vue | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/views/CreateNew/CreateView.vue b/src/views/CreateNew/CreateView.vue
index d8ff5f8e6..120f49cc8 100644
--- a/src/views/CreateNew/CreateView.vue
+++ b/src/views/CreateNew/CreateView.vue
@@ -79,6 +79,7 @@
       <FormLoading v-if="isLoading" />
       <TemplateEngineBlock
         v-else
+        @cancel="handleCancel"
         @instantiate="handleInstantiate"
         :getTemplateService="getTemplateService"
         :instantiateTemplateService="instantiateTemplateService"
@@ -294,6 +295,9 @@
           this.isLoading = false
         }
       },
+      handleCancel() {
+        this.$router.push('/')
+      },
       goToVendorPage() {
         this.windowOpen(this.solution.vendor.url, '_blank')
       },
diff --git a/src/views/CreateNew/DeployView.vue b/src/views/CreateNew/DeployView.vue
index 125ff335c..0e1552923 100644
--- a/src/views/CreateNew/DeployView.vue
+++ b/src/views/CreateNew/DeployView.vue
@@ -1,7 +1,7 @@
 <template>
   <ContentBlock>
     <template #heading>
-      <PageHeadingBlock pageTitle="Create" />
+      <PageHeadingBlock pageTitle="Deploy" />
     </template>
     <template #content>
       <div class="flex flex-col w-full gap-8">

From 72ab179662727a8c7050f103b546e0bcaf57805c Mon Sep 17 00:00:00 2001
From: Lucas Mendes <92529166+lucasmendes21@users.noreply.github.com>
Date: Mon, 15 Jan 2024 16:18:05 -0300
Subject: [PATCH 083/135] [ENG-28788] feat: create function and edit fuction
 (#553)

* feat: create and edit edge application function

* feat: create and edit edge application function

* feat: add unit test to service function

* fix: adjust lint

* fix: adjust required in pr
---
 .../routes/edge-application-routes/index.js   |   4 +
 .../create-function-service.js                |  89 ++++++++++++
 .../delete-function-service.js                |  28 +++-
 .../edit-function-service.js                  |  51 +++++++
 .../index.js                                  |  16 ++-
 ...list-edge-application-functions-service.js |  51 +++----
 .../list-edge-functions-service.js            |  43 ++++++
 .../list-functions-service.js                 |  28 ++--
 .../loader-function-service.js                |  27 ++++
 .../make-edge-functions-base-url.js           |   4 +
 ...edge-application-functions-service.test.js | 112 +++++++++++++++
 ...edge-application-functions-service.test.js |  59 ++++++--
 ...edge-application-functions-service.test.js |   2 +
 .../list-functions-service.test.js            |  31 ++--
 .../load-function-service.test.js             |  67 +++++++++
 .../load-edge-functions-service.test.js       |  11 +-
 .../Drawer/index.vue                          | 136 ++++++++++++++++++
 .../FormFieldsEdgeApplicationsFunctions.vue   |  90 ++++++++++++
 .../EdgeApplicationsFunctions/ListView.vue    | 135 +++++++++++------
 19 files changed, 870 insertions(+), 114 deletions(-)
 create mode 100644 src/services/edge-application-functions-services/create-function-service.js
 create mode 100644 src/services/edge-application-functions-services/edit-function-service.js
 create mode 100644 src/services/edge-application-functions-services/list-edge-functions-service.js
 create mode 100644 src/services/edge-application-functions-services/loader-function-service.js
 create mode 100644 src/services/edge-application-functions-services/make-edge-functions-base-url.js
 create mode 100644 src/tests/services/edge-application-functions-services/create-edge-application-functions-service.test.js
 create mode 100644 src/tests/services/edge-application-functions-services/load-function-service.test.js
 create mode 100644 src/views/EdgeApplicationsFunctions/Drawer/index.vue
 create mode 100644 src/views/EdgeApplicationsFunctions/FormFields/FormFieldsEdgeApplicationsFunctions.vue

diff --git a/src/router/routes/edge-application-routes/index.js b/src/router/routes/edge-application-routes/index.js
index e86b0162d..e3c1b1e71 100644
--- a/src/router/routes/edge-application-routes/index.js
+++ b/src/router/routes/edge-application-routes/index.js
@@ -80,8 +80,12 @@ export const edgeApplicationRoutes = {
           documentationService: Helpers.documentationCatalog.edgeApplicationCacheSettings
         },
         functionsServices: {
+          createFunctionService: FunctionsService.createFunctionService,
           deleteFunctionService: FunctionsService.deleteFunctionService,
           listEdgeApplicationFunctionsService: FunctionsService.listEdgeApplicationFunctionsService,
+          listEdgeFunctionsService: FunctionsService.listEdgeFunctionsService,
+          loadFunctionService: FunctionsService.loadFunctionService,
+          editFunctionService: FunctionsService.editFunctionService,
           documentationService: Helpers.documentationCatalog.edgeApplicationFunctions
         },
         deviceGroupsServices: {
diff --git a/src/services/edge-application-functions-services/create-function-service.js b/src/services/edge-application-functions-services/create-function-service.js
new file mode 100644
index 000000000..7c17a2259
--- /dev/null
+++ b/src/services/edge-application-functions-services/create-function-service.js
@@ -0,0 +1,89 @@
+import { AxiosHttpClientAdapter } from '@/services/axios/AxiosHttpClientAdapter'
+import { makeEdgeApplicationBaseUrl } from '../edge-application-services/make-edge-application-base-url'
+import * as Errors from '@/services/axios/errors'
+
+export const createFunctionService = async (payload) => {
+  const edgeApplicationID = payload.id
+
+  let httpResponse = await AxiosHttpClientAdapter.request({
+    url: `${makeEdgeApplicationBaseUrl()}/${edgeApplicationID}/functions_instances`,
+    method: 'POST',
+    body: adapt(payload)
+  })
+
+  return parseHttpResponse(httpResponse)
+}
+
+const adapt = (payload) => {
+  return {
+    name: payload.name,
+    edge_function_id: payload.edgeFunctionID,
+    args: JSON.parse(payload.args)
+  }
+}
+
+/**
+ * @param {Object} errorSchema - The error schema.
+ * @param {string} key - The error key of error schema.
+ * @returns {string|undefined} The result message based on the status code.
+ */
+const extractErrorKey = (errorSchema, key) => {
+  if (!errorSchema || !key) {
+    return undefined
+  }
+
+  const errorValue = errorSchema[key]
+
+  if (Array.isArray(errorValue)) {
+    if (typeof errorValue[0] === 'object') {
+      const errorKey = Object.keys(errorValue[0])[0]
+      return errorValue[0][errorKey]
+    }
+    return errorValue[0]
+  }
+  return errorValue
+}
+
+/**
+ * @param {Object} httpResponse - The HTTP response object.
+ * @param {Object} httpResponse.body - The response body.
+ * @returns {string} The result message based on the status code.
+ */
+const extractApiError = (httpResponse) => {
+  if (!httpResponse || !httpResponse.body) {
+    return 'Unknown error: Response or response body is null or undefined'
+  }
+
+  const errorKey = Object.keys(httpResponse.body)[0]
+  const apiError = extractErrorKey(httpResponse.body, errorKey)
+  return `${errorKey}: ${apiError}`
+}
+
+/**
+ * @param {Object} httpResponse - The HTTP response object.
+ * @param {Object} httpResponse.body - The response body.
+ * @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 201:
+      return {
+        feedback: 'Your Function has been created'
+      }
+    case 400:
+      const apiError = extractApiError(httpResponse)
+      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-application-functions-services/delete-function-service.js b/src/services/edge-application-functions-services/delete-function-service.js
index 03eb0847b..03afcf969 100644
--- a/src/services/edge-application-functions-services/delete-function-service.js
+++ b/src/services/edge-application-functions-services/delete-function-service.js
@@ -1,5 +1,6 @@
-import { AxiosHttpClientAdapter, parseHttpResponse } from '../axios/AxiosHttpClientAdapter'
+import { AxiosHttpClientAdapter } from '../axios/AxiosHttpClientAdapter'
 import { makeEdgeApplicationBaseUrl } from '../edge-application-services/make-edge-application-base-url'
+import * as Errors from '@/services/axios/errors'
 
 export const deleteFunctionService = async (functionId, id) => {
   let httpResponse = await AxiosHttpClientAdapter.request({
@@ -9,3 +10,28 @@ export const deleteFunctionService = async (functionId, id) => {
 
   return parseHttpResponse(httpResponse)
 }
+
+/**
+ * @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 204:
+      return 'Function successfully deleted'
+    case 400:
+      throw new Errors.InvalidApiRequestError().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-application-functions-services/edit-function-service.js b/src/services/edge-application-functions-services/edit-function-service.js
new file mode 100644
index 000000000..130cc9b85
--- /dev/null
+++ b/src/services/edge-application-functions-services/edit-function-service.js
@@ -0,0 +1,51 @@
+import * as Errors from '@/services/axios/errors'
+import { AxiosHttpClientAdapter } from '../axios/AxiosHttpClientAdapter'
+import { makeEdgeApplicationBaseUrl } from '../edge-application-services/make-edge-application-base-url'
+
+export const editFunctionService = async (payload) => {
+  let httpResponse = await AxiosHttpClientAdapter.request({
+    url: `${makeEdgeApplicationBaseUrl()}/${payload.edgeApplicationID}/functions_instances/${
+      payload.id
+    }`,
+    method: 'PATCH',
+    body: adapt(payload)
+  })
+
+  return parseHttpResponse(httpResponse)
+}
+
+const adapt = (payload) => {
+  return {
+    name: payload.name,
+    edge_function_id: payload.edgeFunctionID,
+    args: JSON.parse(payload.args)
+  }
+}
+
+/**
+ * @param {Object} httpResponse - The HTTP response object.
+ * @param {Object} httpResponse.body - The response body.
+ * @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 200:
+      return 'Your Function has been updated'
+    case 400:
+      throw new Error(Object.keys(httpResponse.body)[0]).message
+    case 409:
+      throw new Error(Object.keys(httpResponse.body)[0]).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-application-functions-services/index.js b/src/services/edge-application-functions-services/index.js
index acc8f6af8..4bc7871ab 100644
--- a/src/services/edge-application-functions-services/index.js
+++ b/src/services/edge-application-functions-services/index.js
@@ -1,5 +1,17 @@
+import { createFunctionService } from './create-function-service'
+import { deleteFunctionService } from './delete-function-service'
 import { listEdgeApplicationFunctionsService } from './list-edge-application-functions-service'
 import { listFunctionsService } from './list-functions-service'
-import { deleteFunctionService } from './delete-function-service'
+import { listEdgeFunctionsService } from './list-edge-functions-service'
+import { loadFunctionService } from './loader-function-service'
+import { editFunctionService } from './edit-function-service'
 
-export { listFunctionsService, listEdgeApplicationFunctionsService, deleteFunctionService }
+export {
+  listFunctionsService,
+  listEdgeApplicationFunctionsService,
+  deleteFunctionService,
+  createFunctionService,
+  listEdgeFunctionsService,
+  loadFunctionService,
+  editFunctionService
+}
diff --git a/src/services/edge-application-functions-services/list-edge-application-functions-service.js b/src/services/edge-application-functions-services/list-edge-application-functions-service.js
index 7703fa2ee..fcbc6327f 100644
--- a/src/services/edge-application-functions-services/list-edge-application-functions-service.js
+++ b/src/services/edge-application-functions-services/list-edge-application-functions-service.js
@@ -2,9 +2,9 @@ import * as FunctionsInstanceService from '@/services/edge-application-functions
 import * as EdgeFunctionsService from '@/services/edge-functions-services'
 import { parseHttpResponse } from '@/services/axios/AxiosHttpClientAdapter'
 
-const getFunctionInstances = async (edgeApplicationId) => {
+const listFunctionInstances = async (edgeApplicationID) => {
   return FunctionsInstanceService.listFunctionsService({
-    id: edgeApplicationId
+    id: edgeApplicationID
   })
 }
 
@@ -14,37 +14,40 @@ const getFunctionData = async (edgeApplicationFunction) => {
   })
 }
 
-const createFunctionsList = async (functionsInstances) => {
+const listFunctionInstancesAndFunctionData = async (functionsInstances) => {
   return Promise.all(
     functionsInstances?.map(async (edgeApplicationFunction) => {
       let functionData = await getFunctionData(edgeApplicationFunction)
-
-      return {
-        id: edgeApplicationFunction.id,
-        name: edgeApplicationFunction.name,
-        languageIcon: functionData.languageIcon,
-        referenceCount: functionData.referenceCount,
-        initiatorType: functionData.initiatorType,
-        lastEditor: functionData.lastEditor,
-        modified: functionData.modified,
-        statusTag: functionData.statusTag,
-        version: functionData.version
-      }
+      return mapFunctionData(edgeApplicationFunction, functionData)
     })
   )
 }
 
-const adapt = (functionsList) => {
+export const listEdgeApplicationFunctionsService = async (edgeApplicationID) => {
+  const functionsInstances = await listFunctionInstances(edgeApplicationID)
+  const functions = await listFunctionInstancesAndFunctionData(functionsInstances)
+  const httpResponse = adapt(functions)
+
+  return parseHttpResponse(httpResponse)
+}
+
+const mapFunctionData = (edgeApplicationFunction, functionData) => {
   return {
-    body: functionsList,
-    statusCode: 200
+    id: edgeApplicationFunction.id,
+    name: edgeApplicationFunction.name,
+    languageIcon: functionData.languageIcon,
+    referenceCount: functionData.referenceCount,
+    initiatorType: functionData.initiatorType,
+    lastEditor: functionData.lastEditor,
+    modified: functionData.modified,
+    statusTag: functionData.statusTag,
+    version: functionData.version
   }
 }
 
-export const listEdgeApplicationFunctionsService = async (edgeApplicationId) => {
-  const functionsInstances = await getFunctionInstances(edgeApplicationId)
-  const functionsList = await createFunctionsList(functionsInstances)
-  const httpResponse = adapt(functionsList)
-
-  return parseHttpResponse(httpResponse)
+const adapt = (functions) => {
+  return {
+    body: functions,
+    statusCode: 200
+  }
 }
diff --git a/src/services/edge-application-functions-services/list-edge-functions-service.js b/src/services/edge-application-functions-services/list-edge-functions-service.js
new file mode 100644
index 000000000..ac6f7e8fb
--- /dev/null
+++ b/src/services/edge-application-functions-services/list-edge-functions-service.js
@@ -0,0 +1,43 @@
+import { AxiosHttpClientAdapter, parseHttpResponse } from '../axios/AxiosHttpClientAdapter'
+import { makeEdgeFunctionsBaseUrl } from './make-edge-functions-base-url'
+export const listEdgeFunctionsService = async ({
+  orderBy = 'id',
+  sort = 'asc',
+  page = 1,
+  pageSize = 200
+}) => {
+  const searchParams = makeSearchParams({ orderBy, sort, page, pageSize })
+  let httpResponse = await AxiosHttpClientAdapter.request({
+    url: `${makeEdgeFunctionsBaseUrl()}?${searchParams.toString()}`,
+    method: 'GET'
+  })
+
+  httpResponse = adapt(httpResponse)
+
+  return parseHttpResponse(httpResponse)
+}
+
+const adapt = (httpResponse) => {
+  const parsedEdgeFunctions = httpResponse.body.results?.map((edgeFunction) => {
+    return {
+      value: edgeFunction.id,
+      label: edgeFunction.name,
+      args: edgeFunction.code
+    }
+  })
+
+  return {
+    body: parsedEdgeFunctions,
+    statusCode: httpResponse.statusCode
+  }
+}
+
+const makeSearchParams = ({ orderBy, sort, page, pageSize }) => {
+  const searchParams = new URLSearchParams()
+  searchParams.set('order_by', orderBy)
+  searchParams.set('sort', sort)
+  searchParams.set('page', page)
+  searchParams.set('page_size', pageSize)
+
+  return searchParams
+}
diff --git a/src/services/edge-application-functions-services/list-functions-service.js b/src/services/edge-application-functions-services/list-functions-service.js
index d13c97ebb..26a8ad81c 100644
--- a/src/services/edge-application-functions-services/list-functions-service.js
+++ b/src/services/edge-application-functions-services/list-functions-service.js
@@ -18,20 +18,7 @@ export const listFunctionsService = async ({
 
   return parseHttpResponse(httpResponse)
 }
-const parseName = (edgeFunctionData) => {
-  const nameProps = { text: edgeFunctionData.name, tagProps: {} }
-
-  if (edgeFunctionData?.version && edgeFunctionData?.vendor) {
-    nameProps.tagProps = {
-      icon: 'pi pi-cart-plus',
-      value: 'Integration',
-      outlined: true,
-      severity: 'info'
-    }
-  }
 
-  return nameProps
-}
 const adapt = (httpResponse) => {
   const bodyResults = httpResponse.body.results
 
@@ -59,3 +46,18 @@ const makeSearchParams = ({ orderBy, sort, page, pageSize }) => {
 
   return searchParams
 }
+
+const parseName = (edgeFunctionData) => {
+  const nameProps = { text: edgeFunctionData.name, tagProps: {} }
+
+  if (edgeFunctionData?.version && edgeFunctionData?.vendor) {
+    nameProps.tagProps = {
+      icon: 'pi pi-cart-plus',
+      value: 'Integration',
+      outlined: true,
+      severity: 'info'
+    }
+  }
+
+  return nameProps
+}
diff --git a/src/services/edge-application-functions-services/loader-function-service.js b/src/services/edge-application-functions-services/loader-function-service.js
new file mode 100644
index 000000000..46e989eca
--- /dev/null
+++ b/src/services/edge-application-functions-services/loader-function-service.js
@@ -0,0 +1,27 @@
+import { AxiosHttpClientAdapter, parseHttpResponse } from '../axios/AxiosHttpClientAdapter'
+import { makeEdgeApplicationBaseUrl } from '../edge-application-services/make-edge-application-base-url'
+
+export const loadFunctionService = async ({ edgeApplicationID, functionID }) => {
+  let httpResponse = await AxiosHttpClientAdapter.request({
+    url: `${makeEdgeApplicationBaseUrl()}/${edgeApplicationID}/functions_instances/${functionID}`,
+    method: 'GET'
+  })
+
+  httpResponse = adapt(httpResponse)
+
+  return parseHttpResponse(httpResponse)
+}
+
+const adapt = (httpResponse) => {
+  const parsedVariable = {
+    id: httpResponse.body.results.id,
+    edgeFunctionID: httpResponse.body.results.edge_function_id,
+    name: httpResponse.body.results.name,
+    args: JSON.stringify(httpResponse.body.results.args)
+  }
+
+  return {
+    body: parsedVariable,
+    statusCode: httpResponse.statusCode
+  }
+}
diff --git a/src/services/edge-application-functions-services/make-edge-functions-base-url.js b/src/services/edge-application-functions-services/make-edge-functions-base-url.js
new file mode 100644
index 000000000..7085ee369
--- /dev/null
+++ b/src/services/edge-application-functions-services/make-edge-functions-base-url.js
@@ -0,0 +1,4 @@
+export const makeEdgeFunctionsBaseUrl = () => {
+  const version = 'v3'
+  return `${version}/edge_functions`
+}
diff --git a/src/tests/services/edge-application-functions-services/create-edge-application-functions-service.test.js b/src/tests/services/edge-application-functions-services/create-edge-application-functions-service.test.js
new file mode 100644
index 000000000..99b220830
--- /dev/null
+++ b/src/tests/services/edge-application-functions-services/create-edge-application-functions-service.test.js
@@ -0,0 +1,112 @@
+import { AxiosHttpClientAdapter } from '@/services/axios/AxiosHttpClientAdapter'
+import * as Errors from '@/services/axios/errors'
+import { createFunctionService } from '@/services/edge-application-functions-services/create-function-service'
+import { describe, expect, it, vi } from 'vitest'
+
+const fixtures = {
+  functionMock: {
+    id: 1656563,
+    name: 'FunctionName',
+    edgeFunctionID: 34253,
+    args: '{"key":"value"}'
+  }
+}
+
+const makeSut = () => {
+  const sut = createFunctionService
+
+  return {
+    sut
+  }
+}
+
+describe('CreateFunctionService', () => {
+  it('should call API with correct params and parse args as JSON', async () => {
+    const requestSpy = vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValue({
+      statusCode: 201,
+      body: {
+        results: {
+          id: 'funcInstance123'
+        }
+      }
+    })
+    const { sut } = makeSut()
+
+    await sut(fixtures.functionMock)
+
+    expect(requestSpy).toHaveBeenCalledWith({
+      url: `v3/edge_applications/${fixtures.functionMock.id}/functions_instances`,
+      method: 'POST',
+      body: {
+        name: fixtures.functionMock.name,
+        edge_function_id: fixtures.functionMock.edgeFunctionID,
+        args: JSON.parse(fixtures.functionMock.args)
+      }
+    })
+  })
+
+  it('should return a feedback message on successfully created', async () => {
+    vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+      statusCode: 201,
+      body: {}
+    })
+    const { sut } = makeSut()
+
+    const data = await sut(fixtures.functionMock)
+
+    expect(data.feedback).toBe('Your Function has been created')
+  })
+
+  it('Should return an API error for a 400 response status', async () => {
+    const errorKey = 'function_name_already_in_use'
+    const apiErrorMock = 'FunctionName'
+
+    vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValue({
+      statusCode: 400,
+      body: {
+        [errorKey]: [apiErrorMock]
+      }
+    })
+
+    const { sut } = makeSut()
+
+    const feedbackMessage = sut(fixtures.functionMock)
+
+    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
+      })
+      const { sut } = makeSut()
+
+      const response = sut(fixtures.functionMock)
+
+      expect(response).rejects.toBe(expectedError)
+    }
+  )
+})
diff --git a/src/tests/services/edge-application-functions-services/delete-edge-application-functions-service.test.js b/src/tests/services/edge-application-functions-services/delete-edge-application-functions-service.test.js
index ace8f47a5..37ff90bd7 100644
--- a/src/tests/services/edge-application-functions-services/delete-edge-application-functions-service.test.js
+++ b/src/tests/services/edge-application-functions-services/delete-edge-application-functions-service.test.js
@@ -1,7 +1,12 @@
 import { AxiosHttpClientAdapter } from '@/services/axios/AxiosHttpClientAdapter'
+import * as Errors from '@/services/axios/errors'
 import { deleteFunctionService } from '@/services/edge-application-functions-services'
 import { describe, expect, it, vi } from 'vitest'
 
+const mocks = {
+  functionID: 123,
+  edgeApplicationID: 12221
+}
 const makeSut = () => {
   const sut = deleteFunctionService
 
@@ -11,19 +16,17 @@ const makeSut = () => {
 }
 
 describe('EdgeApplicationFunctionsServices', () => {
-  it('should call Api with correct params', async () => {
+  it('should call API with correct params', async () => {
     const requestSpy = vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
       statusCode: 204
     })
-    const edgeApplicationId = 321
-    const functionId = 123
+
     const { sut } = makeSut()
-    const version = 'v3'
-    await sut(functionId, edgeApplicationId)
+    sut(mocks.functionID, mocks.edgeApplicationID)
 
     expect(requestSpy).toHaveBeenCalledWith({
-      method: 'DELETE',
-      url: `${version}/edge_applications/${edgeApplicationId}/functions_instances/${functionId}`
+      url: `v3/edge_applications/${mocks.edgeApplicationID}/functions_instances/${mocks.functionID}`,
+      method: 'DELETE'
     })
   })
 
@@ -31,13 +34,47 @@ describe('EdgeApplicationFunctionsServices', () => {
     vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
       statusCode: 204
     })
-    const edgeApplicationId = 123
-    const functionId = 321
 
     const { sut } = makeSut()
 
-    const feedbackMessage = await sut(functionId, edgeApplicationId)
+    const feedbackMessage = await sut(mocks.functionID, mocks.edgeApplicationID)
 
-    expect(feedbackMessage).toBe('Resource successfully deleted')
+    expect(feedbackMessage).toBe('Function successfully deleted')
   })
+
+  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
+      })
+
+      const { sut } = makeSut()
+
+      const response = sut(mocks.functionID, mocks.edgeApplicationID)
+
+      expect(response).rejects.toBe(expectedError)
+    }
+  )
 })
diff --git a/src/tests/services/edge-application-functions-services/list-edge-application-functions-service.test.js b/src/tests/services/edge-application-functions-services/list-edge-application-functions-service.test.js
index 32af38aa2..34378f331 100644
--- a/src/tests/services/edge-application-functions-services/list-edge-application-functions-service.test.js
+++ b/src/tests/services/edge-application-functions-services/list-edge-application-functions-service.test.js
@@ -54,10 +54,12 @@ describe('EdgeApplicationFunctionsServices', () => {
   it('should correctly parse all returned edge applications functions', async () => {
     localeMock()
     const spy = vi.spyOn(AxiosHttpClientAdapter, 'request')
+
     spy.mockResolvedValueOnce({
       statusCode: 200,
       body: { results: [fixtures.functionsInstance] }
     })
+
     spy.mockResolvedValueOnce({
       statusCode: 200,
       body: { results: fixtures.edgeFunctionMock }
diff --git a/src/tests/services/edge-application-functions-services/list-functions-service.test.js b/src/tests/services/edge-application-functions-services/list-functions-service.test.js
index 7b5c44d6e..c1c2c3d06 100644
--- a/src/tests/services/edge-application-functions-services/list-functions-service.test.js
+++ b/src/tests/services/edge-application-functions-services/list-functions-service.test.js
@@ -2,6 +2,10 @@ import { AxiosHttpClientAdapter } from '@/services/axios/AxiosHttpClientAdapter'
 import { listFunctionsService } from '@/services/edge-application-functions-services'
 import { describe, expect, it, vi } from 'vitest'
 
+// Constantes para reutilização
+const API_VERSION = 'v3'
+const EDGE_APPLICATION_ID = 123
+
 const fixtures = {
   functionsInstance: {
     name: 'function instance name',
@@ -21,38 +25,35 @@ const fixtures = {
 
 const makeSut = () => {
   const sut = listFunctionsService
-
-  return {
-    sut
-  }
+  return { sut }
 }
 
 describe('EdgeApplicationFunctionsServices', () => {
-  it('should call api with correct params', async () => {
+   vi.restoreAllMocks()
+
+  it('should call API with correct params', async () => {
     const requestSpy = vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
       statusCode: 200,
       body: { results: [] }
     })
     const { sut } = makeSut()
-    const version = 'v3'
-    const edgeApplicationId = 123
-    await sut({ id: edgeApplicationId })
+
+    await sut({ id: EDGE_APPLICATION_ID })
 
     expect(requestSpy).toHaveBeenCalledWith({
-      url: `${version}/edge_applications/${edgeApplicationId}/functions_instances?order_by=id&sort=asc&page=1&page_size=200`,
+      url: `${API_VERSION}/edge_applications/${EDGE_APPLICATION_ID}/functions_instances?order_by=id&sort=asc&page=1&page_size=200`,
       method: 'GET'
     })
   })
 
-  it('should parsed correctly all returned edge applications', async () => {
+  it('should correctly parse all returned edge application function instances', async () => {
     vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
       statusCode: 200,
       body: { results: [fixtures.functionsInstance, fixtures.functionInstanceWithVersion] }
     })
     const { sut } = makeSut()
 
-    const edgeApplicationId = 123
-    const result = await sut({ id: edgeApplicationId })
+    const result = await sut({ id: EDGE_APPLICATION_ID })
 
     expect(result).toEqual([
       {
@@ -74,9 +75,9 @@ describe('EdgeApplicationFunctionsServices', () => {
           },
           text: 'function instance version'
         },
-        args: fixtures.functionsInstance.args,
-        edgeFunctionId: fixtures.functionsInstance.edge_function_id,
-        id: fixtures.functionsInstance.id
+        args: fixtures.functionInstanceWithVersion.args,
+        edgeFunctionId: fixtures.functionInstanceWithVersion.edge_function_id,
+        id: fixtures.functionInstanceWithVersion.id
       }
     ])
   })
diff --git a/src/tests/services/edge-application-functions-services/load-function-service.test.js b/src/tests/services/edge-application-functions-services/load-function-service.test.js
new file mode 100644
index 000000000..536eb2398
--- /dev/null
+++ b/src/tests/services/edge-application-functions-services/load-function-service.test.js
@@ -0,0 +1,67 @@
+import { AxiosHttpClientAdapter } from '@/services/axios/AxiosHttpClientAdapter'
+import { loadFunctionService } from '@/services/edge-application-functions-services/loader-function-service'
+import { describe, expect, it, vi } from 'vitest'
+
+// Constantes para reutilização
+const EDGE_APPLICATION_ID = '123'
+const FUNCTION_ID = '456'
+
+const fixture = {
+  functionInstance: {
+    id: FUNCTION_ID,
+    edge_function_id: '789',
+    name: 'function name',
+    args: { key: 'value' }
+  }
+}
+
+const makeSut = () => {
+  const sut = loadFunctionService
+  return { sut }
+}
+
+describe('LoaderFunctionService', () => {
+  vi.restoreAllMocks()
+
+  it('should call API with correct URL when loading a function instance', async () => {
+    const requestSpy = vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+      statusCode: 200,
+      body: { results: fixture.functionInstance }
+    })
+    const { sut } = makeSut()
+
+    await sut({ edgeApplicationID: EDGE_APPLICATION_ID, functionID: FUNCTION_ID })
+
+    expect(requestSpy).toHaveBeenCalledWith({
+      url: `v3/edge_applications/${EDGE_APPLICATION_ID}/functions_instances/${FUNCTION_ID}`,
+      method: 'GET'
+    })
+  })
+
+  it('should correctly parse the returned edge application function instance', async () => {
+    vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+      statusCode: 200,
+      body: { results: fixture.functionInstance }
+    })
+    const { sut } = makeSut()
+
+    const result = await sut({ edgeApplicationID: EDGE_APPLICATION_ID, functionID: FUNCTION_ID })
+
+    expect(result).toEqual({
+      id: fixture.functionInstance.id,
+      edgeFunctionID: fixture.functionInstance.edge_function_id,
+      name: fixture.functionInstance.name,
+      args: JSON.stringify(fixture.functionInstance.args)
+    })
+  })
+
+  it('should handle and throw an error when the API call fails', async () => {
+    const error = new Error('Network error')
+    vi.spyOn(AxiosHttpClientAdapter, 'request').mockRejectedValueOnce(error)
+    const { sut } = makeSut()
+
+    await expect(
+      sut({ edgeApplicationID: EDGE_APPLICATION_ID, functionID: FUNCTION_ID })
+    ).rejects.toThrow('Network error')
+  })
+})
diff --git a/src/tests/services/edge-functions-services/load-edge-functions-service.test.js b/src/tests/services/edge-functions-services/load-edge-functions-service.test.js
index e450e20f0..f18a3e6fd 100644
--- a/src/tests/services/edge-functions-services/load-edge-functions-service.test.js
+++ b/src/tests/services/edge-functions-services/load-edge-functions-service.test.js
@@ -1,6 +1,7 @@
 import { AxiosHttpClientAdapter } from '@/services/axios/AxiosHttpClientAdapter'
 import { loadEdgeFunctionsService } from '@/services/edge-functions-services'
 import { describe, expect, it, vi } from 'vitest'
+import { localeMock } from '@/tests/utils/localeMock'
 
 const fixtures = {
   edgeFunctionsMock: {
@@ -13,7 +14,7 @@ const fixtures = {
     json_args: {},
     language: 'lua',
     last_editor: 'Azion',
-    modified: '2023-10-17T18:26:23.047240Z',
+    modified: new Date(2023, 10, 17),
     name: 'baggio',
     reference_count: 0
   },
@@ -27,7 +28,7 @@ const fixtures = {
     json_args: {},
     language: 'javascript',
     last_editor: 'Azion',
-    modified: '2023-10-17T18:26:23.047240Z',
+    modified: new Date(2023, 10, 17),
     name: 'baggio',
     reference_count: 0
   }
@@ -58,6 +59,7 @@ describe('EdgeFunctionsServices', () => {
   })
 
   it('should parsed correctly the returned edge function', async () => {
+    localeMock()
     vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
       statusCode: 200,
       body: { results: fixtures.edgeFunctionsMock }
@@ -77,7 +79,7 @@ describe('EdgeFunctionsServices', () => {
       name: fixtures.edgeFunctionsMock.name,
       code: fixtures.edgeFunctionsMock.code,
       version: '-',
-      modified: 'Tuesday, October 17, 2023',
+      modified: 'Friday, November 17, 2023',
       statusTag: {
         content: 'Active',
         severity: 'success'
@@ -91,6 +93,7 @@ describe('EdgeFunctionsServices', () => {
   })
 
   it('should parsed correctly the returned with edge function language and status', async () => {
+    localeMock()
     vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
       statusCode: 200,
       body: { results: fixtures.edgeFunctionsMockJsAndInactive }
@@ -110,7 +113,7 @@ describe('EdgeFunctionsServices', () => {
       name: fixtures.edgeFunctionsMockJsAndInactive.name,
       code: fixtures.edgeFunctionsMockJsAndInactive.code,
       version: '-',
-      modified: 'Tuesday, October 17, 2023',
+      modified: 'Friday, November 17, 2023',
       statusTag: {
         content: 'Inactive',
         severity: 'danger'
diff --git a/src/views/EdgeApplicationsFunctions/Drawer/index.vue b/src/views/EdgeApplicationsFunctions/Drawer/index.vue
new file mode 100644
index 000000000..2bf3707e2
--- /dev/null
+++ b/src/views/EdgeApplicationsFunctions/Drawer/index.vue
@@ -0,0 +1,136 @@
+<template>
+  <CreateDrawerBlock
+    v-if="loadCreateFunctionDrawer"
+    v-model:visible="showCreateFunctionDrawer"
+    :createService="props.createFunctionService"
+    :schema="validationSchema"
+    :initialValues="initialValues"
+    @onSuccess="handleCreateFunction"
+    :showBarGoBack="true"
+    title="Create Function"
+  >
+    <template #formFields>
+      <FormFieldsDrawerFunction :edgeFunctionsList="edgeFunctionsList" />
+    </template>
+  </CreateDrawerBlock>
+  <EditDrawerBlock
+    v-if="loadEditFunctionDrawer"
+    :id="selectedFunctionToEdit"
+    v-model:visible="showEditFunctionDrawer"
+    :loadService="loadService"
+    :editService="editService"
+    :schema="validationSchema"
+    @onSuccess="emit('onSuccess')"
+    :showBarGoBack="true"
+    @onError="closeDrawerEdit"
+    title="Edit Function"
+  >
+    <template #formFields>
+      <FormFieldsDrawerFunction :edgeFunctionsList="edgeFunctionsList" />
+    </template>
+  </EditDrawerBlock>
+</template>
+
+<script setup>
+  import { ref, onMounted } from 'vue'
+  import * as yup from 'yup'
+  import CreateDrawerBlock from '@templates/create-drawer-block'
+  import FormFieldsDrawerFunction from '@/views/EdgeApplicationsFunctions/FormFields/FormFieldsEdgeApplicationsFunctions'
+  import EditDrawerBlock from '@templates/edit-drawer-block'
+  import { refDebounced } from '@vueuse/core'
+
+  defineOptions({ name: 'drawer-origin' })
+
+  const emit = defineEmits(['onSuccess'])
+
+  const props = defineProps({
+    edgeApplicationId: {
+      type: String,
+      required: true
+    },
+    createFunctionService: {
+      type: Function,
+      required: true
+    },
+    editFunctionService: {
+      required: true,
+      type: Function
+    },
+    listEdgeFunctionsService: {
+      type: Function,
+      required: true
+    },
+    loadEdgeFunctionsService: {
+      type: Function,
+      required: true
+    },
+    loadFunctionService: {
+      type: Function,
+      required: true
+    }
+  })
+
+  const showCreateFunctionDrawer = ref(false)
+  const showEditFunctionDrawer = ref(false)
+  const debouncedDrawerAnimate = 300
+  const loadCreateFunctionDrawer = refDebounced(showCreateFunctionDrawer, debouncedDrawerAnimate)
+  const loadEditFunctionDrawer = refDebounced(showEditFunctionDrawer, debouncedDrawerAnimate)
+  const selectedFunctionToEdit = ref('')
+  const edgeFunctionsList = ref([])
+
+  const initialValues = ref({
+    id: props.edgeApplicationId,
+    name: undefined,
+    edgeFunctionID: undefined,
+    args: '{}'
+  })
+
+  const validationSchema = yup.object({
+    name: yup.string().required().label('Name'),
+    edgeFunctionID: yup.number().required()
+  })
+
+  onMounted(async () => {
+    const response = await props.listEdgeFunctionsService({})
+    edgeFunctionsList.value = response
+  })
+
+  const editService = async (payload) => {
+    return await props.editFunctionService({
+      ...payload,
+      edgeApplicationID: props.edgeApplicationId
+    })
+  }
+
+  const loadService = async () => {
+    const functions = await props.loadFunctionService({
+      edgeApplicationID: props.edgeApplicationId,
+      functionID: selectedFunctionToEdit.value
+    })
+    return functions
+  }
+
+  const openDrawerCreate = () => {
+    showCreateFunctionDrawer.value = true
+  }
+
+  const openDrawerEdit = (functionID) => {
+    if (functionID) {
+      showEditFunctionDrawer.value = true
+      selectedFunctionToEdit.value = functionID.toString()
+    }
+  }
+
+  const closeDrawerEdit = () => {
+    showEditFunctionDrawer.value = false
+  }
+
+  const handleCreateFunction = () => {
+    emit('onSuccess')
+  }
+
+  defineExpose({
+    openDrawerCreate,
+    openDrawerEdit
+  })
+</script>
diff --git a/src/views/EdgeApplicationsFunctions/FormFields/FormFieldsEdgeApplicationsFunctions.vue b/src/views/EdgeApplicationsFunctions/FormFields/FormFieldsEdgeApplicationsFunctions.vue
new file mode 100644
index 000000000..b927a8376
--- /dev/null
+++ b/src/views/EdgeApplicationsFunctions/FormFields/FormFieldsEdgeApplicationsFunctions.vue
@@ -0,0 +1,90 @@
+<script setup>
+  import FieldText from '@/templates/form-fields-inputs/fieldText'
+  import Dropdown from 'primevue/dropdown'
+  import FormHorizontal from '@/templates/create-form-block/form-horizontal'
+  import { useField } from 'vee-validate'
+  import { computed } from 'vue'
+  import { useAccountStore } from '@/stores/account'
+
+  defineProps({
+    edgeFunctionsList: {
+      required: true,
+      type: Array
+    }
+  })
+
+  const store = useAccountStore()
+
+  const editorOptions = computed(() => {
+    return {
+      minimap: { enabled: false },
+      tabSize: 2,
+      formatOnPaste: true
+    }
+  })
+
+  const { value: name } = useField('name')
+  const { value: edgeFunctionID } = useField('edgeFunctionID')
+  const { value: args } = useField('args')
+
+  const theme = computed(() => {
+    return store.currentTheme === 'light' ? 'vs' : 'vs-dark'
+  })
+</script>
+
+<template>
+  <FormHorizontal
+    :isDrawer="true"
+    title="General"
+    description="Instantiate an edge function within your edge application."
+  >
+    <template #inputs>
+      <div class="flex flex-col sm:max-w-lg w-full gap-2">
+        <FieldText
+          label="Name *"
+          name="name"
+          v-model="name"
+        />
+      </div>
+    </template>
+  </FormHorizontal>
+
+  <FormHorizontal
+    :isDrawer="true"
+    title="Function Instanced"
+    description="Description. Informar que para criar novas functions para serem instanciadas, o usuário precisa ir em Edge Functions."
+  >
+    <template #inputs>
+      <div class="flex w-80 flex-col gap-2 sm:max-w-lg max-sm:w-full">
+        <label
+          for="edgeFunctionID"
+          class="text-color text-sm font-medium leading-5"
+          >Edge Function *</label
+        >
+        <Dropdown
+          inputId="edgeFunctionID"
+          v-model="edgeFunctionID"
+          :options="edgeFunctionsList"
+          optionLabel="label"
+          option-value="value"
+          :optionDisabled="(option) => option.disabled"
+        />
+      </div>
+
+      <div class="flex flex-col gap-2 w-full">
+        <label
+          for="arguments"
+          class="text-color text-sm font-medium leading-5"
+          >Arguments</label
+        >
+        <vue-monaco-editor
+          v-model:value="args"
+          language="javascript"
+          :theme="theme"
+          :options="editorOptions"
+          class="min-h-[200px] overflow-clip surface-border border rounded-md"
+        />
+      </div>
+    </template>
+  </FormHorizontal>
+</template>
diff --git a/src/views/EdgeApplicationsFunctions/ListView.vue b/src/views/EdgeApplicationsFunctions/ListView.vue
index 17e7725b6..457428fec 100644
--- a/src/views/EdgeApplicationsFunctions/ListView.vue
+++ b/src/views/EdgeApplicationsFunctions/ListView.vue
@@ -1,9 +1,62 @@
+<template>
+  <DrawerFunction
+    ref="drawerFunctionRef"
+    :edgeApplicationId="props.edgeApplicationId"
+    :createFunctionService="props.createFunctionService"
+    :listEdgeFunctionsService="props.listEdgeFunctionsService"
+    :loadEdgeFunctionsService="props.loadEdgeFunctionsService"
+    :loadFunctionService="props.loadFunctionService"
+    :editFunctionService="props.editFunctionService"
+    @onSuccess="reloadList"
+  />
+  <div v-if="hasContentToList">
+    <ListTableBlock
+      ref="listFunctionsEdgeApplicationsRef"
+      :listService="listFunctionsInstance"
+      :deleteService="deleteFunctionsWithDecorator"
+      :columns="getColumns"
+      :editInDrawer="openEditFunctionDrawer"
+      pageTitleDelete="Function"
+      @on-load-data="handleLoadData"
+    >
+      <template #addButton>
+        <PrimeButton
+          icon="pi pi-plus"
+          label="Edge Function"
+          @click="openCreateFunctionDrawer"
+        />
+      </template>
+    </ListTableBlock>
+  </div>
+  <EmptyResultsBlock
+    v-else
+    title="No Function added"
+    description="Create your first Function."
+    createButtonLabel="Add"
+    :documentationService="props.documentationService"
+    :inTabs="true"
+  >
+    <template #default>
+      <PrimeButton
+        severity="secondary"
+        icon="pi pi-plus"
+        label="Function"
+        @click="openCreateFunctionDrawer"
+      />
+    </template>
+    <template #illustration>
+      <Illustration />
+    </template>
+  </EmptyResultsBlock>
+</template>
+
 <script setup>
   import Illustration from '@/assets/svg/illustration-layers'
   import EmptyResultsBlock from '@/templates/empty-results-block'
+  import PrimeButton from 'primevue/button'
   import { columnBuilder } from '@/templates/list-table-block/columns/column-builder'
   import ListTableBlock from '@/templates/list-table-block/no-header'
-  import PrimeButton from 'primevue/button'
+  import DrawerFunction from './Drawer'
   import { computed, ref } from 'vue'
 
   defineOptions({ name: 'list-edge-applications-functions-tab' })
@@ -23,16 +76,31 @@
       required: true,
       type: Function
     },
-    deleteFunctionService: {
+    listEdgeFunctionsService: {
+      required: true,
+      type: Function
+    },
+    loadFunctionService: {
+      required: true,
+      type: Function
+    },
+    createFunctionService: {
+      required: true,
+      type: Function
+    },
+    editFunctionService: {
       required: true,
       type: Function
     },
-    documentationService: {
-      type: Function,
-      required: true
+    deleteFunctionService: {
+      required: true,
+      type: Function
     }
   })
 
+  const drawerFunctionRef = ref('')
+  const listFunctionsEdgeApplicationsRef = ref('')
+
   const getColumns = computed(() => {
     return [
       {
@@ -91,9 +159,11 @@
       }
     ]
   })
+
   const listFunctionsInstance = async () => {
     return await props.listEdgeApplicationFunctionsService(props.edgeApplicationId)
   }
+
   const deleteFunctionsWithDecorator = async (functionId) => {
     return await props.deleteFunctionService(functionId, props.edgeApplicationId)
   }
@@ -101,43 +171,20 @@
   const handleLoadData = (event) => {
     hasContentToList.value = event
   }
+
+  const openCreateFunctionDrawer = () => {
+    drawerFunctionRef.value.openDrawerCreate()
+  }
+
+  const openEditFunctionDrawer = (data) => {
+    drawerFunctionRef.value.openDrawerEdit(data.id)
+  }
+
+  const reloadList = () => {
+    if (hasContentToList.value) {
+      listFunctionsEdgeApplicationsRef.value.reload()
+      return
+    }
+    hasContentToList.value = true
+  }
 </script>
-<template>
-  <div v-if="hasContentToList">
-    <ListTableBlock
-      ref="listOriginsEdgeApplicationsRef"
-      :listService="listFunctionsInstance"
-      :deleteService="deleteFunctionsWithDecorator"
-      :columns="getColumns"
-      pageTitleDelete="Function"
-      @on-load-data="handleLoadData"
-      emptyListMessage="No Function found."
-    >
-      <template #addButton>
-        <PrimeButton
-          icon="pi pi-plus"
-          label="Edge Function"
-        />
-      </template>
-    </ListTableBlock>
-  </div>
-  <EmptyResultsBlock
-    v-else
-    title="No Function added"
-    description="Create your first Function."
-    createButtonLabel="Add"
-    :documentationService="props.documentationService"
-    :inTabs="true"
-  >
-    <template #default>
-      <PrimeButton
-        severity="secondary"
-        icon="pi pi-plus"
-        label="Function"
-      />
-    </template>
-    <template #illustration>
-      <Illustration />
-    </template>
-  </EmptyResultsBlock>
-</template>

From e924d061beafbf5643e777e4baa43711be1d1930 Mon Sep 17 00:00:00 2001
From: HerbertJulio <herbert.julio@azion.com>
Date: Mon, 15 Jan 2024 16:23:42 -0300
Subject: [PATCH 084/135] test: add improvements in test edge firewall

---
 .../edit-edge-firewall-service.js             | 21 +++++++--
 src/templates/create-form-block/index.vue     | 11 ++---
 src/templates/edit-form-block/index.vue       | 13 +++---
 src/templates/edit-form-block/no-header.vue   | 11 +++--
 .../create-edge-firewall-service.test.js      |  2 +-
 .../edit-edge-firewall-service.test.js        | 45 ++++++++++++++-----
 6 files changed, 71 insertions(+), 32 deletions(-)

diff --git a/src/services/edge-firewall-services/edit-edge-firewall-service.js b/src/services/edge-firewall-services/edit-edge-firewall-service.js
index be66c9ebf..aad7814da 100644
--- a/src/services/edge-firewall-services/edit-edge-firewall-service.js
+++ b/src/services/edge-firewall-services/edit-edge-firewall-service.js
@@ -28,15 +28,28 @@ const adapt = (payload) => {
   }
 }
 
+const mapErrorToMessage = (error) => {
+  switch (error) {
+    case 'duplicated_edge_firewall_name':
+      return 'Edge Firewall cannot be created because it already exists'
+    case 'no_modules_enabled':
+      return 'Edge Firewall cannot be created because no modules are enabled'
+    default:
+      return new Errors.UnexpectedError().message
+  }
+}
+
 /**
  * @param {Object} httpResponse - The HTTP response object.
- * @param {Object} httpResponse.body - The response body.
+ * @param {Array} httpResponse.body - The response body.
  * @returns {string} The result message based on the status code.
  */
 const extractApiError = (httpResponse) => {
   const apiKeyError = Object.keys(httpResponse.body)[0]
-  const apiValidationError = `${httpResponse.body[apiKeyError][0]}`
-  return apiValidationError
+  if (apiKeyError === 'results') {
+    return mapErrorToMessage(httpResponse.body[apiKeyError][0])
+  }
+  return `${httpResponse.body[apiKeyError]}`
 }
 
 /**
@@ -52,7 +65,7 @@ const parseHttpResponse = (httpResponse) => {
       return 'Your edge firewall has been updated'
     case 400:
       const apiError400 = extractApiError(httpResponse)
-      throw new Error(apiError400)
+      throw new Error(apiError400).message
     case 401:
       throw new Errors.InvalidApiTokenError().message
     case 403:
diff --git a/src/templates/create-form-block/index.vue b/src/templates/create-form-block/index.vue
index 800594c45..a94b888f5 100644
--- a/src/templates/create-form-block/index.vue
+++ b/src/templates/create-form-block/index.vue
@@ -1,9 +1,9 @@
 <script setup>
   import DialogUnsavedBlock from '@/templates/dialog-unsaved-block'
+  import { useToast } from 'primevue/usetoast'
   import { useForm, useIsFormDirty } from 'vee-validate'
   import { computed, ref } from 'vue'
   import { useRouter } from 'vue-router'
-  import { useToast } from 'primevue/usetoast'
 
   defineOptions({ name: 'create-form-block' })
 
@@ -50,12 +50,13 @@
     router.go(-1)
   }
 
-  const showToast = (severity, summary) => {
-    if (!summary) return
+  const showToast = (severity, detail) => {
+    if (!detail) return
     toast.add({
       closable: true,
-      severity: severity,
-      summary: summary
+      severity,
+      summary: severity,
+      detail
     })
   }
 
diff --git a/src/templates/edit-form-block/index.vue b/src/templates/edit-form-block/index.vue
index a5fe6ed57..93cd6bcc8 100644
--- a/src/templates/edit-form-block/index.vue
+++ b/src/templates/edit-form-block/index.vue
@@ -1,9 +1,9 @@
 <script setup>
   import DialogUnsavedBlock from '@/templates/dialog-unsaved-block'
+  import { useToast } from 'primevue/usetoast'
   import { useForm, useIsFormDirty } from 'vee-validate'
   import { computed, ref } from 'vue'
-  import { useRouter, useRoute } from 'vue-router'
-  import { useToast } from 'primevue/usetoast'
+  import { useRoute, useRouter } from 'vue-router'
 
   defineOptions({ name: 'edit-form-block' })
 
@@ -61,12 +61,13 @@
     goBackToList()
   }
 
-  const showToast = (severity, summary) => {
-    if (!summary) return
+  const showToast = (severity, detail) => {
+    if (!detail) return
     toast.add({
       closable: true,
-      severity: severity,
-      summary: summary
+      severity,
+      summary: severity,
+      detail
     })
   }
 
diff --git a/src/templates/edit-form-block/no-header.vue b/src/templates/edit-form-block/no-header.vue
index bc4dcf4ba..5615cc922 100644
--- a/src/templates/edit-form-block/no-header.vue
+++ b/src/templates/edit-form-block/no-header.vue
@@ -27,8 +27,8 @@
 </template>
 
 <script>
-  import DialogUnsavedBlock from '@/templates/dialog-unsaved-block'
   import ActionBarTemplate from '@/templates/action-bar-block/action-bar-with-teleport'
+  import DialogUnsavedBlock from '@/templates/dialog-unsaved-block'
 
   export default {
     name: 'edit-form-block-no-header',
@@ -99,7 +99,8 @@
           this.$toast.add({
             closable: true,
             severity: 'error',
-            summary: error
+            summary: 'error',
+            detail: error
           })
         } finally {
           this.isLoading = false
@@ -112,7 +113,8 @@
           this.$toast.add({
             closable: true,
             severity: 'success',
-            summary: 'edited successfully'
+            summary: 'success',
+            detail: 'edited successfully'
           })
           this.blockViewRedirection = false
           this.goBackToList()
@@ -121,7 +123,8 @@
           this.$toast.add({
             closable: true,
             severity: 'error',
-            summary: error
+            summary: 'error',
+            detail: error
           })
         } finally {
           setTimeout(() => {
diff --git a/src/tests/services/edge-firewall-services/create-edge-firewall-service.test.js b/src/tests/services/edge-firewall-services/create-edge-firewall-service.test.js
index c1125ffbc..bc42d459c 100644
--- a/src/tests/services/edge-firewall-services/create-edge-firewall-service.test.js
+++ b/src/tests/services/edge-firewall-services/create-edge-firewall-service.test.js
@@ -83,7 +83,7 @@ describe('EdgeFirewallService', () => {
       expectedError: 'name is required'
     }
   ])(
-    'should throw an error if the API returns a $key in status code 400',
+    'should throw an error if the API returns a $error in status code 400',
     async ({ error, key, expectedError }) => {
       vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
         statusCode: 400,
diff --git a/src/tests/services/edge-firewall-services/edit-edge-firewall-service.test.js b/src/tests/services/edge-firewall-services/edit-edge-firewall-service.test.js
index b7db5b702..f9dcc6104 100644
--- a/src/tests/services/edge-firewall-services/edit-edge-firewall-service.test.js
+++ b/src/tests/services/edge-firewall-services/edit-edge-firewall-service.test.js
@@ -58,20 +58,41 @@ describe('EdgeFirewallServices', () => {
     expect(feedbackMessage).toBe('Your edge firewall has been updated')
   })
 
-  it('Should return an API error to an invalid edge service name', async () => {
-    const apiErrorMock = 'name should not be empty'
-    vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
-      statusCode: 400,
-      body: {
-        errors: [apiErrorMock]
-      }
-    })
-    const { sut } = makeSut()
+  it.each([
+    {
+      error: 'duplicated_edge_firewall_name',
+      key: 'results',
+      expectedError: 'Edge Firewall cannot be created because it already exists'
+    },
+    {
+      error: 'no_modules_enabled',
+      key: 'results',
+      expectedError: 'Edge Firewall cannot be created because no modules are enabled'
+    },
+    {
+      error: 'unmappedError',
+      key: 'results',
+      expectedError: new Errors.UnexpectedError().message
+    },
+    {
+      error: 'name is required',
+      key: 'name',
+      expectedError: 'name is required'
+    }
+  ])(
+    'should throw an error if the API returns a $error in status code 400',
+    async ({ error, key, expectedError }) => {
+      vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+        statusCode: 400,
+        body: { [key]: [error] }
+      })
 
-    const feedbackMessage = sut(fixtures.mock)
+      const { sut } = makeSut()
+      const feedbackMessage = sut(fixtures.mock)
 
-    expect(feedbackMessage).rejects.toThrow(apiErrorMock)
-  })
+      expect(feedbackMessage).rejects.toThrow(expectedError)
+    }
+  )
 
   it.each([
     {

From ed290638a04f1b2f1b7c01c6a8c02abf81d04f7a Mon Sep 17 00:00:00 2001
From: Matheus Sunderhus <matheus.sunderhus@azion.com>
Date: Mon, 15 Jan 2024 16:39:57 -0300
Subject: [PATCH 085/135] chore: add alt text to ListSolutions

---
 src/views/Marketplace/components/ListSolutions.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/Marketplace/components/ListSolutions.vue b/src/views/Marketplace/components/ListSolutions.vue
index 24173622f..b7e3ca5da 100644
--- a/src/views/Marketplace/components/ListSolutions.vue
+++ b/src/views/Marketplace/components/ListSolutions.vue
@@ -16,7 +16,7 @@
             <img
               class="rounded"
               :src="solution.vendor.icon"
-              alt=""
+              :alt="solution.vendor.name"
             />
           </div>
           <div class="flex flex-col">

From b1a213042aea5191649481deea2f00936461df4a Mon Sep 17 00:00:00 2001
From: Matheus Sunderhus <matheus.sunderhus@azion.com>
Date: Mon, 15 Jan 2024 16:47:08 -0300
Subject: [PATCH 086/135] chore: use the route name to redirect from
 create-modal-block to create-something-new route

---
 src/templates/create-modal-block/index.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/templates/create-modal-block/index.vue b/src/templates/create-modal-block/index.vue
index 1384afc5b..81aaa6f37 100644
--- a/src/templates/create-modal-block/index.vue
+++ b/src/templates/create-modal-block/index.vue
@@ -235,7 +235,11 @@
     methods: {
       redirectToSolution(template) {
         this.showSidebar = false
-        this.$router.push(`/create/${template.vendor.slug}/${template.slug}`)
+        const params = {
+          vendor: template.vendor.slug,
+          solution: template.slug
+        }
+        this.$router.push({ name: 'create-something-new', params })
         this.$emit('closeModal')
       },
       onMenuChange(target) {

From b82b644299de12c3cc284cbb0fe9d9ea9cda717a Mon Sep 17 00:00:00 2001
From: Matheus Sunderhus <matheus.sunderhus@azion.com>
Date: Mon, 15 Jan 2024 17:07:40 -0300
Subject: [PATCH 087/135] refactor: change from options api to composition API
 the create-modal-block

---
 src/templates/create-modal-block/index.vue | 317 +++++++++++----------
 1 file changed, 159 insertions(+), 158 deletions(-)

diff --git a/src/templates/create-modal-block/index.vue b/src/templates/create-modal-block/index.vue
index 81aaa6f37..c93f997e4 100644
--- a/src/templates/create-modal-block/index.vue
+++ b/src/templates/create-modal-block/index.vue
@@ -1,3 +1,162 @@
+<script setup>
+  import PrimeButton from 'primevue/button'
+  import * as MarketplaceService from '@/services/marketplace-services'
+  import LoadingListTemplate from './LoadingListTemplate'
+  import Listbox from 'primevue/listbox'
+  import { computed, onBeforeMount, ref } from 'vue'
+  import { useRouter } from 'vue-router'
+  import { useToast } from 'primevue/usetoast'
+  defineOptions({
+    name: 'create-modal-block'
+  })
+
+  const emit = defineEmits('closeModal')
+
+  onBeforeMount(async () => {
+    await loadRecommendedSolutions()
+  })
+
+  const router = useRouter()
+  const toast = useToast()
+
+  const isLoading = ref(false)
+  const templates = ref([])
+  const browseTemplates = ref([])
+  const selectedTabControl = ref('recommended')
+  const selectedTab = ref('recommended')
+  const browseHeader = ref('browse-templates')
+  const recommendedHeader = ref('recommended-for-you')
+  const items = ref([
+    {
+      label: 'Recommended',
+      value: 'recommended'
+    },
+    {
+      label: 'Templates',
+      value: 'browse'
+    },
+    {
+      label: 'Resources',
+      value: 'new_resource'
+    }
+  ])
+  const resources = ref([
+    {
+      label: 'Domains',
+      to: '/domains/create'
+    },
+    {
+      label: 'Edge Application',
+      to: '/edge-applications/create'
+    },
+    {
+      label: 'Variables',
+      to: '/variables/create'
+    },
+    {
+      label: 'Intelligent DNS',
+      to: '/intelligent-dns/create'
+    },
+    {
+      label: 'Edge Firewall',
+      to: '/edge-firewall/create'
+    },
+    {
+      label: 'Edge Nodes',
+      to: '/edge-node/create'
+    },
+    {
+      label: 'Data Streaming',
+      to: '/data-streaming/create'
+    },
+    {
+      label: 'Edge Functions',
+      to: '/edge-functions/create'
+    },
+    {
+      label: 'Edge Services',
+      to: '/edge-services/create'
+    },
+    {
+      label: 'Digital Certificates',
+      to: '/digital-certificates/create'
+    },
+    {
+      label: 'Network Lists',
+      to: '/network-lists/create'
+    }
+  ])
+
+  const showRecommended = computed(() => {
+    return selectedTab.value === 'recommended'
+  })
+  const showBrowse = computed(() => {
+    return selectedTab.value === 'browse'
+  })
+  const showResource = computed(() => {
+    return selectedTab.value === 'new_resource'
+  })
+
+  const redirectToSolution = (template) => {
+    const params = {
+      vendor: template.vendor.slug,
+      solution: template.slug
+    }
+    router.push({ name: 'create-something-new', params })
+    emit('closeModal')
+  }
+
+  const redirect = (toLink) => {
+    router.push(toLink)
+    emit('closeModal')
+  }
+
+  const loadRecommendedSolutions = async () => {
+    try {
+      isLoading.value = true
+      const payload = { type: recommendedHeader.value }
+      templates.value = await MarketplaceService.listSolutionsService(payload)
+    } catch (error) {
+      toast.add({
+        closable: true,
+        severity: 'error',
+        summary: error
+      })
+    } finally {
+      isLoading.value = false
+    }
+  }
+
+  const loadBrowse = async () => {
+    try {
+      isLoading.value = true
+      const payload = { type: browseHeader.value }
+      browseTemplates.value = await MarketplaceService.listSolutionsService(payload)
+    } catch (error) {
+      toast.add({
+        closable: true,
+        severity: 'error',
+        summary: error
+      })
+    } finally {
+      isLoading.value = false
+    }
+  }
+
+  const onMenuChange = async (target) => {
+    if (target.value === null) {
+      selectedTabControl.value = selectedTab.value
+    } else {
+      selectedTab.value = target.value
+    }
+    if (target.value === 'browse') {
+      if (browseTemplates.value.length === 0) {
+        await loadBrowse()
+      }
+    }
+  }
+</script>
+
 <template>
   <div class="overflow-auto w-full h-full flex flex-col sm:flex-row p-0 sm:pl-5 sm:pr-8 gap-4 pb-4">
     <div class="sm:min-w-[240px] mt-4">
@@ -134,161 +293,3 @@
     </div>
   </div>
 </template>
-<script>
-  import PrimeButton from 'primevue/button'
-  import * as MarketplaceService from '@/services/marketplace-services'
-  import LoadingListTemplate from './LoadingListTemplate'
-  import Listbox from 'primevue/listbox'
-
-  export default {
-    name: 'create-modal-block',
-    components: {
-      PrimeButton,
-      Listbox,
-      LoadingListTemplate
-    },
-    async created() {
-      await this.loadData()
-    },
-    data: () => ({
-      isLoading: false,
-      templates: [],
-      browseTemplates: [],
-      selectedTabControl: 'recommended',
-      selectedTab: 'recommended',
-      browHeader: 'browse-templates',
-      recommendedHeader: 'recommended-for-you',
-      resources: [
-        {
-          label: 'Domains',
-          to: '/domains/create'
-        },
-        {
-          label: 'Edge Application',
-          to: '/edge-applications/create'
-        },
-        {
-          label: 'Variables',
-          to: '/variables/create'
-        },
-        {
-          label: 'Intelligent DNS',
-          to: '/intelligent-dns/create'
-        },
-        {
-          label: 'Edge Firewall',
-          to: '/edge-firewall/create'
-        },
-        {
-          label: 'Edge Nodes',
-          to: '/edge-node/create'
-        },
-        {
-          label: 'Data Streaming',
-          to: '/data-streaming/create'
-        },
-        {
-          label: 'Edge Functions',
-          to: '/edge-functions/create'
-        },
-        {
-          label: 'Edge Services',
-          to: '/edge-services/create'
-        },
-        {
-          label: 'Digital Certificates',
-          to: '/digital-certificates/create'
-        },
-        {
-          label: 'Network Lists',
-          to: '/network-lists/create'
-        }
-      ]
-    }),
-    computed: {
-      showRecommended() {
-        return this.selectedTab === 'recommended'
-      },
-      showBrowse() {
-        return this.selectedTab === 'browse'
-      },
-      showResource() {
-        return this.selectedTab === 'new_resource'
-      },
-      items() {
-        return [
-          {
-            label: 'Recommended',
-            value: 'recommended'
-          },
-          {
-            label: 'Templates',
-            value: 'browse'
-          },
-          {
-            label: 'Resources',
-            value: 'new_resource'
-          }
-        ]
-      }
-    },
-    methods: {
-      redirectToSolution(template) {
-        this.showSidebar = false
-        const params = {
-          vendor: template.vendor.slug,
-          solution: template.slug
-        }
-        this.$router.push({ name: 'create-something-new', params })
-        this.$emit('closeModal')
-      },
-      onMenuChange(target) {
-        if (target.value === null) {
-          this.selectedTabControl = this.selectedTab
-        } else {
-          this.selectedTab = target.value
-        }
-        if (target.value === 'browse') {
-          if (this.browseTemplates.length === 0) {
-            this.loadBrowse()
-          }
-        }
-      },
-
-      redirect(toLink) {
-        this.$router.push(toLink)
-        this.$emit('closeModal')
-      },
-      async loadData() {
-        try {
-          this.isLoading = true
-          const payload = { type: this.recommendedHeader }
-          this.templates = await MarketplaceService.listSolutionsService(payload)
-        } catch (error) {
-          this.$toast.add({
-            closable: true,
-            severity: 'error',
-            summary: error
-          })
-        } finally {
-          this.isLoading = false
-        }
-      },
-      async loadBrowse() {
-        try {
-          this.isLoading = true
-          const payload = { type: this.browseHeader }
-          this.browseTemplates = await MarketplaceService.listSolutionsService(payload)
-        } catch (error) {
-          this.$toast.add({
-            closable: true,
-            severity: 'error',
-            summary: error
-          })
-        } finally {
-          this.isLoading = false
-        }
-      }
-    }
-  }
-</script>

From c97df646a7b515307f76696a816bd8b68f59ffb1 Mon Sep 17 00:00:00 2001
From: Matheus Sunderhus <matheus.sunderhus@azion.com>
Date: Mon, 15 Jan 2024 17:11:12 -0300
Subject: [PATCH 088/135] fix: simplify conditional render on
 create-modal-block

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

diff --git a/src/templates/create-modal-block/index.vue b/src/templates/create-modal-block/index.vue
index c93f997e4..072adf727 100644
--- a/src/templates/create-modal-block/index.vue
+++ b/src/templates/create-modal-block/index.vue
@@ -229,7 +229,7 @@
       </div>
       <div
         class="mx-0 w-full mt-0 grid grid-cols-1 lg:grid-cols-2 2xl:grid-cols-3 gap-4"
-        v-else-if="showBrowse"
+        v-if="showBrowse"
       >
         <PrimeButton
           v-for="template in browseTemplates"
@@ -265,7 +265,7 @@
       </div>
       <div
         class="mx-0 w-full mt-0 grid grid-cols-1 lg:grid-cols-2 2xl:grid-cols-3 gap-4"
-        v-else-if="showResource"
+        v-if="showResource"
       >
         <PrimeButton
           v-for="resource in resources"

From 67f0f82530f00cef160b4196a1385ccc28776230 Mon Sep 17 00:00:00 2001
From: Matheus Sunderhus <matheus.sunderhus@azion.com>
Date: Mon, 15 Jan 2024 17:12:52 -0300
Subject: [PATCH 089/135] fix: conditional render on create-modal-block to show
 template section title

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

diff --git a/src/templates/create-modal-block/index.vue b/src/templates/create-modal-block/index.vue
index 072adf727..f47f7b29e 100644
--- a/src/templates/create-modal-block/index.vue
+++ b/src/templates/create-modal-block/index.vue
@@ -175,7 +175,8 @@
     </div>
 
     <div class="overflow-auto w-full flex flex-col">
-      <div v-if="!isLoading">
+      <LoadingListTemplate v-if="isLoading" />
+      <div v-else>
         <div
           class="text-base font-medium mt-5 mb-3"
           v-if="showResource"
@@ -190,7 +191,6 @@
         </div>
       </div>
 
-      <LoadingListTemplate v-if="isLoading" />
       <div
         class="mx-0 w-full mt-0 grid grid-cols-1 lg:grid-cols-2 2xl:grid-cols-3 gap-4"
         v-if="showRecommended"

From 27c8a2e4633a175d9b46abec96638cd99faa5446 Mon Sep 17 00:00:00 2001
From: paulosf0 <paulo.ferreira@azion.com>
Date: Mon, 15 Jan 2024 17:15:37 -0300
Subject: [PATCH 090/135] feat: add some fix layout

---
 .../delete-waf-rules-allowed-service.js       |  2 +-
 .../list-waf-rules-allowed-service.js         |  6 +-
 .../delete-waf-rules-allowed-service.test.js  | 80 +++++++++++++++++++
 src/views/WafRules/EditView.vue               |  2 +-
 .../WafRules/FormFields/FormFieldsAllowed.vue | 25 +++++-
 5 files changed, 108 insertions(+), 7 deletions(-)
 create mode 100644 src/tests/services/waf-rules-services/delete-waf-rules-allowed-service.test.js

diff --git a/src/services/waf-rules-services/delete-waf-rules-allowed-service.js b/src/services/waf-rules-services/delete-waf-rules-allowed-service.js
index 06fa697db..6545cf49f 100644
--- a/src/services/waf-rules-services/delete-waf-rules-allowed-service.js
+++ b/src/services/waf-rules-services/delete-waf-rules-allowed-service.js
@@ -19,7 +19,7 @@ export const deleteWafRulesAllowedService = async ({ wafId, allowedId }) => {
  */
 const parseHttpResponse = (httpResponse) => {
   switch (httpResponse.statusCode) {
-    case 204:
+    case 200:
       return 'Waf rule allowed successfully deleted'
     case 400:
       throw new Errors.NotFoundError().message
diff --git a/src/services/waf-rules-services/list-waf-rules-allowed-service.js b/src/services/waf-rules-services/list-waf-rules-allowed-service.js
index bf0232d9c..93b13276f 100644
--- a/src/services/waf-rules-services/list-waf-rules-allowed-service.js
+++ b/src/services/waf-rules-services/list-waf-rules-allowed-service.js
@@ -52,9 +52,9 @@ const parseMatchZone = (waf) => {
     value = zones[matchZone.zone]
     if (matchZone.zone_input) {
       if (matchZone.matches_on === 'value')
-        value = replaceString(value, `:${matchZone.zone_input} :${matchZone.zone_input} (Value)`)
+        value = replaceString(value, `: ${matchZone.zone_input} (Value)`)
       if (matchZone.matches_on === 'name')
-        value = replaceString(value, `:${matchZone.zone_input} :${matchZone.zone_input} (Name)`)
+        value = replaceString(value, `: ${matchZone.zone_input} (Name)`)
     } else if (matchZone.matches_on) {
       if (matchZone.matches_on === 'value') value = replaceString(value, ' (Value)')
       if (matchZone.matches_on === 'name') value = replaceString(value, ' (Name)')
@@ -89,7 +89,7 @@ const adapt = (httpResponse) => {
           zoneInput: waf.zone_input,
           path: waf.path,
           reason: waf.reason,
-          ruleId: waf.rule_id,
+          ruleId: waf.rule_id === 0 ? '0 - All Rules' : waf.rule_id,
           status: parseStatusData(waf.status),
           useRegex: waf.use_regex
         }
diff --git a/src/tests/services/waf-rules-services/delete-waf-rules-allowed-service.test.js b/src/tests/services/waf-rules-services/delete-waf-rules-allowed-service.test.js
new file mode 100644
index 000000000..14c1c21ea
--- /dev/null
+++ b/src/tests/services/waf-rules-services/delete-waf-rules-allowed-service.test.js
@@ -0,0 +1,80 @@
+import { AxiosHttpClientAdapter } from '@/services/axios/AxiosHttpClientAdapter'
+import { deleteWafRulesAllowedService } from '@/services/waf-rules-services'
+import * as Errors from '@/services/axios/errors'
+import { describe, expect, it, vi } from 'vitest'
+
+const makeSut = () => {
+  const sut = deleteWafRulesAllowedService
+
+  return {
+    sut
+  }
+}
+
+describe('WafRulesServices', () => {
+  it('should call API with correct params', async () => {
+    const requestSpy = vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+      statusCode: 200
+    })
+    const wafRuleIdMock = 765678
+    const { sut } = makeSut()
+    await sut({ wafId: wafRuleIdMock, allowedId: 10 })
+
+    expect(requestSpy).toHaveBeenCalledWith({
+      url: `v4/edge/waf/765678/allowed_rules/10`,
+      method: 'DELETE'
+    })
+  })
+
+  it('should return a feedback message on successfully deleted', async () => {
+    vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+      statusCode: 200
+    })
+    const wafRuleIdMock = 7816825367
+    const { sut } = makeSut()
+
+    const feedbackMessage = await sut({ wafId: wafRuleIdMock, allowedId: 10 })
+
+    expect(feedbackMessage).toBe('Waf rule allowed successfully deleted')
+  })
+
+  it.each([
+    {
+      statusCode: 400,
+      expectedError: new Errors.NotFoundError().message
+    },
+    {
+      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 }) => {
+      const wafRuleIdMock = 7816825367
+      vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+        statusCode
+      })
+      const { sut } = makeSut()
+
+      const response = sut({ wafId: wafRuleIdMock, allowedId: 10 })
+
+      expect(response).rejects.toBe(expectedError)
+    }
+  )
+})
diff --git a/src/views/WafRules/EditView.vue b/src/views/WafRules/EditView.vue
index edbe560e8..d94d7b5ce 100644
--- a/src/views/WafRules/EditView.vue
+++ b/src/views/WafRules/EditView.vue
@@ -184,7 +184,7 @@
     matchZones: [{ matches_on: 'value', zone: 'path', zone_input: null }],
     path: '',
     reason: '',
-    ruleId: '',
+    ruleId: 0,
     status: false,
     useRegex: false
   }
diff --git a/src/views/WafRules/FormFields/FormFieldsAllowed.vue b/src/views/WafRules/FormFields/FormFieldsAllowed.vue
index 0fc308ebb..1618c01d6 100644
--- a/src/views/WafRules/FormFields/FormFieldsAllowed.vue
+++ b/src/views/WafRules/FormFields/FormFieldsAllowed.vue
@@ -17,7 +17,7 @@
   const { value: path } = useField('path')
   const { value: reason } = useField('reason')
   const { value: status } = useField('status')
-  //   const { value: useRegex } = useField('useRegex')
+  const { value: useRegex } = useField('useRegex')
   const { value: ruleId } = useField('ruleId')
 
   const matchZonesOptions = ref([
@@ -91,6 +91,7 @@
           optionLabel="name"
           optionValue="value"
           class="w-full"
+          :disabled="true"
         />
       </div>
       <div class="flex flex-col sm:max-w-lg w-full gap-2">
@@ -117,7 +118,7 @@ File Name (Multipart Body) to put the unparsed (raw) request body into the Allow
     <template #inputs>
       <div class="flex flex-col sm:max-w-lg w-full gap-2">
         <FieldText
-          label="Path"
+          label="Path *"
           name="path"
           :value="path"
           description="Path is only used to restrict the scope of a matchzone. Leave it in blank if you do not want to restrict matchzone scope."
@@ -267,6 +268,26 @@ File Name (Multipart Body) to put the unparsed (raw) request body into the Allow
       />
     </template>
   </FormHorizontal>
+  <FormHorizontal
+    title="Regex"
+    :isDrawer="true"
+  >
+    <template #inputs>
+      <div class="flex gap-2 items-top">
+        <InputSwitch
+          id="regex"
+          class="flex-shrink-0 flex-grow"
+          v-model="useRegex"
+        />
+        <div class="flex flex-col gap-1">
+          <label class="text-sm font-normal leading-tight" for="regex">Active </label>
+          <small class="text-color-secondary text-sm font-normal leading-tight">
+            Check this option to treat conditional fields as regular expressions in all Match Zone Set. Otherwise, conditional fields should be treated as strings.
+          </small>
+        </div>
+      </div>
+    </template>
+  </FormHorizontal>
   <FormHorizontal
     title="Status"
     :isDrawer="true"

From bd3b9534db8bcca93af9ed63491f594ada5bd42c Mon Sep 17 00:00:00 2001
From: paulosf0 <paulo.ferreira@azion.com>
Date: Mon, 15 Jan 2024 17:44:15 -0300
Subject: [PATCH 091/135] feat: break line in description

---
 .../list-waf-rules-allowed-service.js         |  4 +---
 .../create-form-block/form-horizontal.vue     |  2 +-
 src/views/WafRules/EditView.vue               |  4 ++--
 .../WafRules/FormFields/FormFieldsAllowed.vue | 21 +++++++++++--------
 4 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/src/services/waf-rules-services/list-waf-rules-allowed-service.js b/src/services/waf-rules-services/list-waf-rules-allowed-service.js
index 93b13276f..1081a64d3 100644
--- a/src/services/waf-rules-services/list-waf-rules-allowed-service.js
+++ b/src/services/waf-rules-services/list-waf-rules-allowed-service.js
@@ -1,9 +1,7 @@
 import { AxiosHttpClientAdapter, parseHttpResponse } from '../axios/AxiosHttpClientAdapter'
 import { makeWafRulesAllowedBaseUrl } from './make-waf-rules-allowed-base-url'
 
-export const listWafRulesAllowedService = async ({ payload, id }) => {
-  // eslint-disable-next-line no-console
-  console.log(payload)
+export const listWafRulesAllowedService = async ({ id }) => {
   let httpResponse = await AxiosHttpClientAdapter.request({
     url: `${makeWafRulesAllowedBaseUrl()}/${id}/allowed_rules?page=1&page_size=100`,
     method: 'GET'
diff --git a/src/templates/create-form-block/form-horizontal.vue b/src/templates/create-form-block/form-horizontal.vue
index b68c3c5b1..2b6ae7d01 100644
--- a/src/templates/create-form-block/form-horizontal.vue
+++ b/src/templates/create-form-block/form-horizontal.vue
@@ -6,7 +6,7 @@
     <!-- title and description -->
     <div class="flex flex-col gap-2 flex-1 w-full md:min-w-[20rem]">
       <div class="text-color text-xl font-medium">{{ props.title }}</div>
-      <div class="text-color-secondary text-sm font-normal">
+      <div class="text-color-secondary text-sm font-normal " style="white-space: pre-line">
         {{ props.description }}
       </div>
     </div>
diff --git a/src/views/WafRules/EditView.vue b/src/views/WafRules/EditView.vue
index d94d7b5ce..f0eeb602f 100644
--- a/src/views/WafRules/EditView.vue
+++ b/src/views/WafRules/EditView.vue
@@ -295,8 +295,8 @@
     return await props.editWafRulesService(payload, parseInt(wafRuleId.value))
   }
 
-  const handleListWafRulesAllowedService = async (payload) => {
-    return await props.listWafRulesAllowedService({ payload, id: wafRuleId.value })
+  const handleListWafRulesAllowedService = async () => {
+    return await props.listWafRulesAllowedService({ id: wafRuleId.value })
   }
 
   const handleDeleteWafRulesAllowedService = async (id) => {
diff --git a/src/views/WafRules/FormFields/FormFieldsAllowed.vue b/src/views/WafRules/FormFields/FormFieldsAllowed.vue
index 1618c01d6..c16fe6fb5 100644
--- a/src/views/WafRules/FormFields/FormFieldsAllowed.vue
+++ b/src/views/WafRules/FormFields/FormFieldsAllowed.vue
@@ -39,6 +39,10 @@
     matchZones.value = [...newArray, { matches_on: 'value', zone: 'path', zone_input: null }]
   }
 
+  const text = ref(
+    'Choose match zones to put into the Allowed Rule:\n Path to put the path itself or one named path into the Allowed Rule. \n Query String or Conditional Query String to put all GET arguments or one named argument into the Allowed Rule. For example, the "search" argument. \n Request Header or Conditional Request Header to put all HTTP request headers or one named header into the Allowed Rule. For example, the Cookie header. \nRequest Body or Conditional Request Body to put all POST arguments or one named argument into the Allowed Rule. For example, the "search" argument.\n Raw Body to put the unparsed (raw) request body into the whitelist.\n File Name (Multipart Body) to put the unparsed (raw) request body into the Allowed Rule.'
+  )
+
   const showConditionalInputs = (value) => {
     const conditionalInputs = [
       'conditional_query_string',
@@ -107,13 +111,7 @@
   <FormHorizontal
     :isDrawer="true"
     title="Match Zone Set"
-    description='Choose match zones to put into the Allowed Rule:
-Path to put the path itself or one named path into the Allowed Rule.
-Query String or Conditional Query String to put all GET arguments or one named argument into the Allowed Rule. For example, the "search" argument.
-Request Header or Conditional Request Header to put all HTTP request headers or one named header into the Allowed Rule. For example, the Cookie header.
-Request Body or Conditional Request Body to put all POST arguments or one named argument into the Allowed Rule. For example, the "search" argument.
-Raw Body to put the unparsed (raw) request body into the whitelist.
-File Name (Multipart Body) to put the unparsed (raw) request body into the Allowed Rule.'
+    :description="text"
   >
     <template #inputs>
       <div class="flex flex-col sm:max-w-lg w-full gap-2">
@@ -280,9 +278,14 @@ File Name (Multipart Body) to put the unparsed (raw) request body into the Allow
           v-model="useRegex"
         />
         <div class="flex flex-col gap-1">
-          <label class="text-sm font-normal leading-tight" for="regex">Active </label>
+          <label
+            class="text-sm font-normal leading-tight"
+            for="regex"
+            >Active
+          </label>
           <small class="text-color-secondary text-sm font-normal leading-tight">
-            Check this option to treat conditional fields as regular expressions in all Match Zone Set. Otherwise, conditional fields should be treated as strings.
+            Check this option to treat conditional fields as regular expressions in all Match Zone
+            Set. Otherwise, conditional fields should be treated as strings.
           </small>
         </div>
       </div>

From 50978fa33e6e237fcd30b7995dbf947d3168b7a3 Mon Sep 17 00:00:00 2001
From: William <william.tome@azion.com>
Date: Tue, 16 Jan 2024 08:58:33 -0300
Subject: [PATCH 092/135] feat: [switch-account] add route to handle login from
 social idp (#561)

---
 src/helpers/index.js                          | 34 +++++++-------
 src/helpers/switch-account-from-social-idp.js | 47 +++++++++++++++++++
 src/router/index.js                           |  6 ++-
 .../routes/switch-account-routes/index.js     | 18 +++++++
 4 files changed, 87 insertions(+), 18 deletions(-)
 create mode 100644 src/helpers/switch-account-from-social-idp.js
 create mode 100644 src/router/routes/switch-account-routes/index.js

diff --git a/src/helpers/index.js b/src/helpers/index.js
index bbc0ff948..a6782545c 100644
--- a/src/helpers/index.js
+++ b/src/helpers/index.js
@@ -1,35 +1,37 @@
-import { clipboardWrite } from './clipboard'
 import { documentationCatalog, documentationGuideProducts } from './azion-documentation-catalog'
 import {
-  openDocumentation,
   openAPIDocumentation,
   openContactSupport,
-  openSearchResult,
-  openGoogleAuthenticatorAppDocumentation
+  openDocumentation,
+  openGoogleAuthenticatorAppDocumentation,
+  openSearchResult
 } from './azion-documentation-window-opener'
-import InviteSession from './invite-session'
-import { themeSelect } from './theme-select'
 import { azionPrivacyPolicyWindowOpener } from './azion-privacy-policy-opener'
 import { azionTermsAndServicesWindowOpener } from './azion-terms-and-services-opener'
-import { parseCamelToSnake, parseSnakeToCamel } from './parse-api-body'
+import { clipboardWrite } from './clipboard'
 import { getEnvironmentFromUrl } from './get-environment-from-url'
 import { getFirstApiError } from './get-first-api-error'
+import InviteSession from './invite-session'
+import { parseCamelToSnake, parseSnakeToCamel } from './parse-api-body'
+import { switchAccountFromSocialIdp } from './switch-account-from-social-idp'
+import { themeSelect } from './theme-select'
 
 export {
-  themeSelect,
+  InviteSession,
+  azionPrivacyPolicyWindowOpener,
+  azionTermsAndServicesWindowOpener,
   clipboardWrite,
   documentationCatalog,
   documentationGuideProducts,
-  openDocumentation,
+  getEnvironmentFromUrl,
+  getFirstApiError,
   openAPIDocumentation,
   openContactSupport,
-  InviteSession,
-  azionPrivacyPolicyWindowOpener,
-  azionTermsAndServicesWindowOpener,
+  openDocumentation,
+  openGoogleAuthenticatorAppDocumentation,
+  openSearchResult,
   parseCamelToSnake,
   parseSnakeToCamel,
-  openSearchResult,
-  getEnvironmentFromUrl,
-  openGoogleAuthenticatorAppDocumentation,
-  getFirstApiError
+  switchAccountFromSocialIdp,
+  themeSelect
 }
diff --git a/src/helpers/switch-account-from-social-idp.js b/src/helpers/switch-account-from-social-idp.js
new file mode 100644
index 000000000..1382b7c24
--- /dev/null
+++ b/src/helpers/switch-account-from-social-idp.js
@@ -0,0 +1,47 @@
+import * as AuthServices from '@/services/auth-services'
+import { listTypeAccountService } from '@/services/switch-account-services/list-type-account-service'
+import { AccountHandler } from './account-handler'
+
+const verify = async () => {
+  try {
+    return await AuthServices.verifyAuthenticationService()
+  } catch {
+    await refresh()
+  }
+}
+
+const refresh = async () => {
+  try {
+    await AuthServices.refreshAuthenticationService()
+  } catch {
+    throw new Error()
+  }
+}
+
+const switchClientAccount = async ({ account_id }) => {
+  const accountHandler = new AccountHandler(
+    AuthServices.switchAccountService,
+    listTypeAccountService
+  )
+  try {
+    const redirect = await accountHandler.switchAndReturnAccountPage(account_id)
+    return redirect
+  } catch {
+    throw new Error()
+  }
+}
+
+export const switchAccountFromSocialIdp = async () => {
+  const { twoFactor, trustedDevice, user_tracking_info: userInfo } = await verify()
+
+  if (!userInfo) {
+    return '/login'
+  }
+
+  if (twoFactor) {
+    const mfaRoute = trustedDevice ? 'authentication' : 'setup'
+    return `/mfa/${mfaRoute}`
+  }
+
+  return switchClientAccount(userInfo)
+}
diff --git a/src/router/index.js b/src/router/index.js
index 9f46e90c0..64fa19085 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -24,11 +24,12 @@ import { personalTokensRoutes } from '@routes/personal-tokens-routes'
 import { playgroundRoutes } from '@routes/playground-routes'
 import { realTimePurgeRoutes } from '@routes/real-time-purge'
 import { signupRoutes } from '@routes/signup-routes'
+import { switchAccountRoutes } from '@routes/switch-account-routes'
 import { teamsPermissionRoutes } from '@routes/team-permission'
 import { usersListsRoutes } from '@routes/users-routes'
-import { settingsRoutes } from '@/router/routes/your-settings-routes'
-import { wafRulesRoutes } from '@routes/waf-rules-routes'
 import { variablesRoutes } from '@routes/variables-routes'
+import { wafRulesRoutes } from '@routes/waf-rules-routes'
+import { settingsRoutes } from '@routes/your-settings-routes'
 import { createRouter, createWebHistory } from 'vue-router'
 
 import afterEachRoute from './hooks/afterEachRoute'
@@ -63,6 +64,7 @@ const router = createRouter({
     realTimePurgeRoutes,
     teamsPermissionRoutes,
     signupRoutes,
+    switchAccountRoutes,
     marketplaceRoutes,
     accountRoutes,
     settingsRoutes,
diff --git a/src/router/routes/switch-account-routes/index.js b/src/router/routes/switch-account-routes/index.js
new file mode 100644
index 000000000..475b953be
--- /dev/null
+++ b/src/router/routes/switch-account-routes/index.js
@@ -0,0 +1,18 @@
+import { switchAccountFromSocialIdp } from '@/helpers'
+
+/** @type {import('vue-router').RouteRecordRaw} */
+export const switchAccountRoutes = {
+  path: '/switch-account',
+  name: 'switch-account',
+  meta: {
+    isPublic: true
+  },
+  beforeEnter: async (_, __, next) => {
+    try {
+      const redirect = await switchAccountFromSocialIdp()
+      next(redirect)
+    } catch {
+      next({ name: 'login' })
+    }
+  }
+}

From 97254fb0056cb6d1d38f417d970dbdb5874819cf Mon Sep 17 00:00:00 2001
From: aloisio-m-bastian <107002324+aloisio-m-bastian@users.noreply.github.com>
Date: Tue, 16 Jan 2024 09:36:39 -0300
Subject: [PATCH 093/135] fix: change error responses payload to send status
 any always as the first of the array (#562)

---
 .../edit-error-responses-service.js           | 22 ++++++++++++++-----
 .../FormFields/FormFieldsErrorResponses.vue   |  5 +++--
 2 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/src/services/edge-application-error-responses-services/edit-error-responses-service.js b/src/services/edge-application-error-responses-services/edit-error-responses-service.js
index 091ea7a13..3fb1bb200 100644
--- a/src/services/edge-application-error-responses-services/edit-error-responses-service.js
+++ b/src/services/edge-application-error-responses-services/edit-error-responses-service.js
@@ -15,12 +15,22 @@ export const editErrorResponsesService = async (payload) => {
 }
 
 const adapt = (payload) => {
-  const errorResponses = payload.errorResponses.map((element) => {
-    return {
-      custom_status_code: element.customStatusCode?.toString() || null,
-      uri: element.uri || null,
-      timeout: element.timeout,
-      code: element.code
+  const errorResponses = []
+  payload.errorResponses.forEach((element) => {
+    if (element.code === 'any') {
+      errorResponses.unshift({
+        custom_status_code: element.customStatusCode?.toString() || null,
+        uri: element.uri || null,
+        timeout: element.timeout,
+        code: element.code
+      })
+    }else {
+      errorResponses.push({
+        custom_status_code: element.customStatusCode?.toString() || null,
+        uri: element.uri || null,
+        timeout: element.timeout,
+        code: element.code
+      })
     }
   })
   return {
diff --git a/src/views/EdgeApplicationsErrorResponses/FormFields/FormFieldsErrorResponses.vue b/src/views/EdgeApplicationsErrorResponses/FormFields/FormFieldsErrorResponses.vue
index 9d6ef0fbf..20e2c99b1 100644
--- a/src/views/EdgeApplicationsErrorResponses/FormFields/FormFieldsErrorResponses.vue
+++ b/src/views/EdgeApplicationsErrorResponses/FormFields/FormFieldsErrorResponses.vue
@@ -115,6 +115,7 @@
     }
   ]
   const showErrorResponsesInputs = computed(() => errorResponses.value.length > 0)
+  const statusAnyErrorResponse = computed(() => errorResponses.value.filter((element => element.value.code === 'any'))[0])
   const { value: originId } = useField('originId')
   const {
     push: pushErrorResponse,
@@ -182,7 +183,7 @@
           <InputNumber
             :min="0"
             :max="31536000"
-            v-model="errorResponses[0].value.timeout"
+            v-model="statusAnyErrorResponse.value.timeout"
             showButtons
           />
         </div>
@@ -191,7 +192,7 @@
       <div
         v-for="(errorResponse, index) in errorResponses"
         :key="index"
-        :class="{ hidden: index === 0 }"
+        :class="{ hidden: errorResponse.value.code === 'any' }"
       >
         <div class="flex flex-col gap-6">
           <div class="flex">

From 43db30e3e8daf8b76f3bcd6595402f8210f9d757 Mon Sep 17 00:00:00 2001
From: Lucas Mendes <92529166+lucasmendes21@users.noreply.github.com>
Date: Tue, 16 Jan 2024 09:58:54 -0300
Subject: [PATCH 094/135] [NO-ISSUE] fix: adjust icon lock in edge function
 (#563)

---
 .../FormFields/FormFieldsCreateEdgeFunctions.vue            | 6 +++---
 .../FormFields/FormFieldsEditEdgeFunctions.vue              | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/views/EdgeFunctions/FormFields/FormFieldsCreateEdgeFunctions.vue b/src/views/EdgeFunctions/FormFields/FormFieldsCreateEdgeFunctions.vue
index 558df967e..d6ac7108c 100644
--- a/src/views/EdgeFunctions/FormFields/FormFieldsCreateEdgeFunctions.vue
+++ b/src/views/EdgeFunctions/FormFields/FormFieldsCreateEdgeFunctions.vue
@@ -104,10 +104,10 @@
                 class="w-full"
                 readonly
               />
-              <small class="text-xs text-color-secondary font-normal leading-tight">
-                Currently, only JavaScript is supported.</small
-              >
             </span>
+            <small class="text-xs text-color-secondary font-normal leading-tight">
+              Currently, only JavaScript is supported.</small
+            >
           </div>
         </template>
       </FormHorizontal>
diff --git a/src/views/EdgeFunctions/FormFields/FormFieldsEditEdgeFunctions.vue b/src/views/EdgeFunctions/FormFields/FormFieldsEditEdgeFunctions.vue
index 2fc1a49dd..4994f00b5 100644
--- a/src/views/EdgeFunctions/FormFields/FormFieldsEditEdgeFunctions.vue
+++ b/src/views/EdgeFunctions/FormFields/FormFieldsEditEdgeFunctions.vue
@@ -122,10 +122,10 @@
                 class="w-full text-[var(--text-color-secondary)]"
                 readonly
               />
-              <small class="text-xs text-color-secondary font-normal leading-tight">
-                Language isn't an editable field.</small
-              >
             </span>
+            <small class="text-xs text-color-secondary font-normal leading-tight">
+              Language isn't an editable field.</small
+            >
           </div>
         </template>
       </FormHorizontal>

From efe0650ae1b3e8e80d52465809a3fe764b9d6262 Mon Sep 17 00:00:00 2001
From: William <william.tome@azion.com>
Date: Tue, 16 Jan 2024 10:28:32 -0300
Subject: [PATCH 095/135] [ENG-28965] refactor: replace helper method with
 account handler class in switch account from social idp (#564)

* refactor: [switch-account] move helper logic to account handler class

* refactor: [switch-account] remove switch account from social idp unused helper

* refactor: [switch-account] replace helper with class methods inside route hook
---
 src/helpers/account-handler.js                | 31 +++++++++++-
 src/helpers/index.js                          |  2 -
 src/helpers/switch-account-from-social-idp.js | 47 -------------------
 .../routes/switch-account-routes/index.js     | 13 ++++-
 4 files changed, 41 insertions(+), 52 deletions(-)
 delete mode 100644 src/helpers/switch-account-from-social-idp.js

diff --git a/src/helpers/account-handler.js b/src/helpers/account-handler.js
index 1c44f498a..ca132195f 100644
--- a/src/helpers/account-handler.js
+++ b/src/helpers/account-handler.js
@@ -25,7 +25,7 @@ export class AccountHandler {
         pageSize: 1
       })
 
-      if (firstResult && firstResult.accountId) {
+      if (firstResult?.accountId) {
         return firstResult.accountId
       }
     }
@@ -59,4 +59,33 @@ export class AccountHandler {
 
     window.location.replace('/')
   }
+
+  static async refresh(refreshService) {
+    try {
+      await refreshService()
+    } catch {
+      throw new Error()
+    }
+  }
+
+  async switchAccountFromSocialIdp(verifyService, refreshService) {
+    try {
+      const { twoFactor, trustedDevice, user_tracking_info: userInfo } = await verifyService()
+
+      if (!userInfo) {
+        return '/login'
+      }
+
+      if (twoFactor) {
+        const mfaRoute = trustedDevice ? 'authentication' : 'setup'
+        return `/mfa/${mfaRoute}`
+      }
+
+      const { account_id: accountId } = userInfo.props
+
+      return this.switchAndReturnAccountPage(accountId)
+    } catch {
+      await this.refresh(refreshService)
+    }
+  }
 }
diff --git a/src/helpers/index.js b/src/helpers/index.js
index a6782545c..a43dca729 100644
--- a/src/helpers/index.js
+++ b/src/helpers/index.js
@@ -13,7 +13,6 @@ import { getEnvironmentFromUrl } from './get-environment-from-url'
 import { getFirstApiError } from './get-first-api-error'
 import InviteSession from './invite-session'
 import { parseCamelToSnake, parseSnakeToCamel } from './parse-api-body'
-import { switchAccountFromSocialIdp } from './switch-account-from-social-idp'
 import { themeSelect } from './theme-select'
 
 export {
@@ -32,6 +31,5 @@ export {
   openSearchResult,
   parseCamelToSnake,
   parseSnakeToCamel,
-  switchAccountFromSocialIdp,
   themeSelect
 }
diff --git a/src/helpers/switch-account-from-social-idp.js b/src/helpers/switch-account-from-social-idp.js
deleted file mode 100644
index 1382b7c24..000000000
--- a/src/helpers/switch-account-from-social-idp.js
+++ /dev/null
@@ -1,47 +0,0 @@
-import * as AuthServices from '@/services/auth-services'
-import { listTypeAccountService } from '@/services/switch-account-services/list-type-account-service'
-import { AccountHandler } from './account-handler'
-
-const verify = async () => {
-  try {
-    return await AuthServices.verifyAuthenticationService()
-  } catch {
-    await refresh()
-  }
-}
-
-const refresh = async () => {
-  try {
-    await AuthServices.refreshAuthenticationService()
-  } catch {
-    throw new Error()
-  }
-}
-
-const switchClientAccount = async ({ account_id }) => {
-  const accountHandler = new AccountHandler(
-    AuthServices.switchAccountService,
-    listTypeAccountService
-  )
-  try {
-    const redirect = await accountHandler.switchAndReturnAccountPage(account_id)
-    return redirect
-  } catch {
-    throw new Error()
-  }
-}
-
-export const switchAccountFromSocialIdp = async () => {
-  const { twoFactor, trustedDevice, user_tracking_info: userInfo } = await verify()
-
-  if (!userInfo) {
-    return '/login'
-  }
-
-  if (twoFactor) {
-    const mfaRoute = trustedDevice ? 'authentication' : 'setup'
-    return `/mfa/${mfaRoute}`
-  }
-
-  return switchClientAccount(userInfo)
-}
diff --git a/src/router/routes/switch-account-routes/index.js b/src/router/routes/switch-account-routes/index.js
index 475b953be..77ff4039f 100644
--- a/src/router/routes/switch-account-routes/index.js
+++ b/src/router/routes/switch-account-routes/index.js
@@ -1,4 +1,6 @@
-import { switchAccountFromSocialIdp } from '@/helpers'
+import { AccountHandler } from '@/helpers/account-handler'
+import * as AuthServices from '@/services/auth-services'
+import { listTypeAccountService } from '@/services/switch-account-services/list-type-account-service'
 
 /** @type {import('vue-router').RouteRecordRaw} */
 export const switchAccountRoutes = {
@@ -8,8 +10,15 @@ export const switchAccountRoutes = {
     isPublic: true
   },
   beforeEnter: async (_, __, next) => {
+    const accountHandler = new AccountHandler(
+      AuthServices.switchAccountService,
+      listTypeAccountService
+    )
+    const verify = AuthServices.verifyAuthenticationService
+    const refresh = AuthServices.refreshAuthenticationService
+
     try {
-      const redirect = await switchAccountFromSocialIdp()
+      const redirect = await accountHandler.switchAccountFromSocialIdp(verify, refresh)
       next(redirect)
     } catch {
       next({ name: 'login' })

From d920aad0522c4622cc414697560145744e549c5c Mon Sep 17 00:00:00 2001
From: William <william.tome@azion.com>
Date: Tue, 16 Jan 2024 13:38:24 -0300
Subject: [PATCH 096/135] [ENG-28965] test: add tests for
 switchAccountFromSocialIdp (#565)

* fix: [switch-account] resolve static method call and throw proper error

* test: [switch-account] add tests to switchAccountFromSocialIdp method in accountHandler class
---
 src/helpers/account-handler.js            | 19 +++++-
 src/tests/helpers/account-handler.test.js | 76 ++++++++++++++++++++++-
 2 files changed, 92 insertions(+), 3 deletions(-)

diff --git a/src/helpers/account-handler.js b/src/helpers/account-handler.js
index ca132195f..318c59141 100644
--- a/src/helpers/account-handler.js
+++ b/src/helpers/account-handler.js
@@ -1,3 +1,4 @@
+import { ProccessRequestError } from '@/services/axios/errors'
 import { AccountNotFoundError } from '@/services/axios/errors/account-not-found-error'
 
 export class AccountHandler {
@@ -60,14 +61,28 @@ export class AccountHandler {
     window.location.replace('/')
   }
 
+  /**
+   * Refreshes the given refresh service.
+   *
+   * @param {Function} refreshService - The service to refreshed token.
+   * @return {Promise} - A promise that resolves when the refresh is complete.
+   * @throws {ProccessRequestError} - Throws an error if the refresh fails.
+   */
   static async refresh(refreshService) {
     try {
       await refreshService()
     } catch {
-      throw new Error()
+      throw new ProccessRequestError().message
     }
   }
 
+  /**
+   * Asynchronously switches the account from a social IDP.
+   *
+   * @param {function} verifyService - The function that verifies the service.
+   * @param {function} refreshService - The function that refreshes the service.
+   * @return {string | object} The URL string or object to redirect to.
+   */
   async switchAccountFromSocialIdp(verifyService, refreshService) {
     try {
       const { twoFactor, trustedDevice, user_tracking_info: userInfo } = await verifyService()
@@ -85,7 +100,7 @@ export class AccountHandler {
 
       return this.switchAndReturnAccountPage(accountId)
     } catch {
-      await this.refresh(refreshService)
+      await AccountHandler.refresh(refreshService)
     }
   }
 }
diff --git a/src/tests/helpers/account-handler.test.js b/src/tests/helpers/account-handler.test.js
index daf490eaf..a367e9c5c 100644
--- a/src/tests/helpers/account-handler.test.js
+++ b/src/tests/helpers/account-handler.test.js
@@ -1,6 +1,7 @@
 import { AccountHandler } from '@/helpers/account-handler'
+import { ProccessRequestError } from '@/services/axios/errors'
 import { AccountNotFoundError } from '@/services/axios/errors/account-not-found-error'
-import { describe, expect, it, vi, afterAll } from 'vitest'
+import { afterAll, describe, expect, it, vi } from 'vitest'
 
 vi.stubGlobal('window', {
   location: {
@@ -76,4 +77,77 @@ describe('AccountHandler', () => {
 
     expect(window.location).toEqual('/signup/additional-data')
   })
+
+  it('should return login url when user info is not found', async () => {
+    const verifyService = vi.fn().mockResolvedValue({ user_tracking_info: null })
+    const refreshService = vi.fn()
+    const { sut } = makeSut({ accountId: '1', firstLogin: false })
+
+    const result = await sut.switchAccountFromSocialIdp(verifyService, refreshService)
+    expect(result).toEqual('/login')
+  })
+
+  it('should return mfa/setup url if twoFactor is true and trustedDevice is false', async () => {
+    const verifyService = vi.fn().mockResolvedValue({
+      user_tracking_info: { props: { account_id: '1' } },
+      twoFactor: true,
+      trustedDevice: false
+    })
+    const refreshService = vi.fn()
+    const { sut } = makeSut({ accountId: '1', firstLogin: false })
+
+    const result = await sut.switchAccountFromSocialIdp(verifyService, refreshService)
+    expect(result).toEqual('/mfa/setup')
+  })
+
+  it('should return mfa/authentication if twoFactor is true and trustedDevice is true', async () => {
+    const verifyService = vi.fn().mockResolvedValue({
+      user_tracking_info: { props: { account_id: '1' } },
+      twoFactor: true,
+      trustedDevice: true
+    })
+    const refreshService = vi.fn()
+    const { sut } = makeSut({ accountId: '1', firstLogin: false })
+
+    const result = await sut.switchAccountFromSocialIdp(verifyService, refreshService)
+    expect(result).toEqual('/mfa/authentication')
+  })
+
+  it('should return the object to redirect to home if twoFactor and firstLogin is false', async () => {
+    const verifyService = vi.fn().mockResolvedValue({
+      user_tracking_info: { props: { account_id: '1' } },
+      twoFactor: false,
+      trustedDevice: false
+    })
+    const refreshService = vi.fn()
+    const { sut } = makeSut({ accountId: '1', firstLogin: false })
+
+    const result = await sut.switchAccountFromSocialIdp(verifyService, refreshService)
+    expect(result).toEqual({ name: 'home' })
+  })
+
+  it('should return the object to redirect to additional-data if twoFactor and firstLogin is true', async () => {
+    const verifyService = vi.fn().mockResolvedValue({
+      user_tracking_info: { props: { account_id: '1' } },
+      twoFactor: false,
+      trustedDevice: false
+    })
+    const refreshService = vi.fn()
+    const { sut } = makeSut({ accountId: '1', firstLogin: true })
+
+    const result = await sut.switchAccountFromSocialIdp(verifyService, refreshService)
+    expect(result).toEqual({ name: 'additional-data' })
+  })
+
+  it('should call the refresh service when verifyService throws', async () => {
+    const verifyService = vi.fn().mockRejectedValueOnce(new Error())
+    const refreshService = vi.fn().mockRejectedValueOnce(new Error())
+
+    const { sut } = makeSut({ accountId: '1', firstLogin: true })
+
+    await expect(sut.switchAccountFromSocialIdp(verifyService, refreshService)).rejects.toThrow(
+      new ProccessRequestError().message
+    )
+    expect(refreshService).toHaveBeenCalled()
+  })
 })

From 1330a2383da86b67da9f9d35ec1b97ce10c1f490 Mon Sep 17 00:00:00 2001
From: HerbertJulio <herbert.julio@azion.com>
Date: Tue, 16 Jan 2024 13:42:34 -0300
Subject: [PATCH 097/135] refactor: remove placeholder in input

---
 .../edit-error-responses-service.js                           | 2 +-
 .../list-functions-service.test.js                            | 2 +-
 .../FormFields/FormFieldsErrorResponses.vue                   | 4 +++-
 src/views/EdgeFirewall/FormFields/FormFieldsEdgeFirewall.vue  | 1 -
 4 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/services/edge-application-error-responses-services/edit-error-responses-service.js b/src/services/edge-application-error-responses-services/edit-error-responses-service.js
index 3fb1bb200..d6d8b8fa9 100644
--- a/src/services/edge-application-error-responses-services/edit-error-responses-service.js
+++ b/src/services/edge-application-error-responses-services/edit-error-responses-service.js
@@ -24,7 +24,7 @@ const adapt = (payload) => {
         timeout: element.timeout,
         code: element.code
       })
-    }else {
+    } else {
       errorResponses.push({
         custom_status_code: element.customStatusCode?.toString() || null,
         uri: element.uri || null,
diff --git a/src/tests/services/edge-application-functions-services/list-functions-service.test.js b/src/tests/services/edge-application-functions-services/list-functions-service.test.js
index c1c2c3d06..f871bfc01 100644
--- a/src/tests/services/edge-application-functions-services/list-functions-service.test.js
+++ b/src/tests/services/edge-application-functions-services/list-functions-service.test.js
@@ -29,7 +29,7 @@ const makeSut = () => {
 }
 
 describe('EdgeApplicationFunctionsServices', () => {
-   vi.restoreAllMocks()
+  vi.restoreAllMocks()
 
   it('should call API with correct params', async () => {
     const requestSpy = vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
diff --git a/src/views/EdgeApplicationsErrorResponses/FormFields/FormFieldsErrorResponses.vue b/src/views/EdgeApplicationsErrorResponses/FormFields/FormFieldsErrorResponses.vue
index 20e2c99b1..d56763f79 100644
--- a/src/views/EdgeApplicationsErrorResponses/FormFields/FormFieldsErrorResponses.vue
+++ b/src/views/EdgeApplicationsErrorResponses/FormFields/FormFieldsErrorResponses.vue
@@ -115,7 +115,9 @@
     }
   ]
   const showErrorResponsesInputs = computed(() => errorResponses.value.length > 0)
-  const statusAnyErrorResponse = computed(() => errorResponses.value.filter((element => element.value.code === 'any'))[0])
+  const statusAnyErrorResponse = computed(
+    () => errorResponses.value.filter((element) => element.value.code === 'any')[0]
+  )
   const { value: originId } = useField('originId')
   const {
     push: pushErrorResponse,
diff --git a/src/views/EdgeFirewall/FormFields/FormFieldsEdgeFirewall.vue b/src/views/EdgeFirewall/FormFields/FormFieldsEdgeFirewall.vue
index f91cf901f..98883c9db 100644
--- a/src/views/EdgeFirewall/FormFields/FormFieldsEdgeFirewall.vue
+++ b/src/views/EdgeFirewall/FormFields/FormFieldsEdgeFirewall.vue
@@ -62,7 +62,6 @@
       <div class="flex flex-col sm:max-w-lg w-full gap-2">
         <FieldText
           label="Name *"
-          placeholder="Insert the Origin Name"
           name="name"
           :value="name"
           description="Give a unique and easy-to-remember name."

From fbd26406da2785866d7d1ad40b8ebe2af39e0372 Mon Sep 17 00:00:00 2001
From: William <william.tome@azion.com>
Date: Tue, 16 Jan 2024 14:17:37 -0300
Subject: [PATCH 098/135] [NO-ISSUE] fix: signup button showing on additional
 data (#566)

* feat: [additional-data] add showSignupBtn prop to page-with-form-block

* fix: [additional-data] set showSignupBtn to false in additional data form
---
 src/templates/signup-block/page-with-form-block.vue | 11 +++++++++--
 src/views/Signup/AdditionalDataView.vue             |  3 ++-
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/templates/signup-block/page-with-form-block.vue b/src/templates/signup-block/page-with-form-block.vue
index bbce50d82..e0754a9df 100644
--- a/src/templates/signup-block/page-with-form-block.vue
+++ b/src/templates/signup-block/page-with-form-block.vue
@@ -44,7 +44,10 @@
             />
           </p>
         </div>
-        <div class="flex flex-wrap justify-center items-center gap-3 mt-8 max-w-md">
+        <div
+          v-if="showSignupBtn"
+          class="flex flex-wrap justify-center items-center gap-3 mt-8 max-w-md"
+        >
           <p class="text-sm font-normal">Already have an account?</p>
           <PrimeButton
             label="Sign In"
@@ -58,8 +61,8 @@
 </template>
 
 <script setup>
-  import PrimeButton from 'primevue/button'
   import { azionPrivacyPolicyWindowOpener, azionTermsAndServicesWindowOpener } from '@/helpers'
+  import PrimeButton from 'primevue/button'
   import { useRouter } from 'vue-router'
 
   defineOptions({
@@ -78,6 +81,10 @@
     formTitle: {
       type: String,
       required: true
+    },
+    showSignupBtn: {
+      type: Boolean,
+      default: true
     }
   })
 
diff --git a/src/views/Signup/AdditionalDataView.vue b/src/views/Signup/AdditionalDataView.vue
index e0d5ccb7b..eb3014717 100644
--- a/src/views/Signup/AdditionalDataView.vue
+++ b/src/views/Signup/AdditionalDataView.vue
@@ -3,6 +3,7 @@
     :pageTitle="pageTitle"
     :benefitsList="benefitsList"
     :formTitle="formTitle"
+    :showSignupBtn="false"
   >
     <template #form>
       <AdditionalDataFormBlock
@@ -15,8 +16,8 @@
 </template>
 
 <script setup>
-  import PageWithFormBlock from '@/templates/signup-block/page-with-form-block'
   import AdditionalDataFormBlock from '@/templates/signup-block/additional-data-form-block'
+  import PageWithFormBlock from '@/templates/signup-block/page-with-form-block'
 
   defineProps({
     listAdditionalDataInfoService: {

From d3c0f8c9809840b1328644a9acf61ccca7e92546 Mon Sep 17 00:00:00 2001
From: paulosf0 <paulo.ferreira@azion.com>
Date: Tue, 16 Jan 2024 14:33:47 -0300
Subject: [PATCH 099/135] feat: add documentation link

---
 src/helpers/azion-documentation-catalog.js    |  4 ++-
 src/router/routes/waf-rules-routes/index.js   | 12 +++++--
 .../create-form-block/form-horizontal.vue     |  5 ++-
 src/views/WafRules/EditView.vue               | 32 +++++++++++++------
 4 files changed, 38 insertions(+), 15 deletions(-)

diff --git a/src/helpers/azion-documentation-catalog.js b/src/helpers/azion-documentation-catalog.js
index 55eaf2bb4..0c3474fcc 100644
--- a/src/helpers/azion-documentation-catalog.js
+++ b/src/helpers/azion-documentation-catalog.js
@@ -25,7 +25,9 @@ export const documentationCatalog = {
   activityHistory: () => openSearchResult('activity history'),
   edgeNodes: () => openSearchResult('edge nodes'),
   records: () => openSearchResult('records'),
-  waf: () => openSearchResult('waf')
+  waf: () => openSearchResult('waf'),
+  wafAllowed: () => openSearchResult('Allowed Rules'),
+  wafTuning: () => openSearchResult('Tuning')
 }
 
 export const documentationGuideProducts = {
diff --git a/src/router/routes/waf-rules-routes/index.js b/src/router/routes/waf-rules-routes/index.js
index 246f40670..bb1dff67e 100644
--- a/src/router/routes/waf-rules-routes/index.js
+++ b/src/router/routes/waf-rules-routes/index.js
@@ -55,7 +55,9 @@ export const wafRulesRoutes = {
         deleteWafRulesAllowedService: WafRulesService.deleteWafRulesAllowedService,
         createWafRulesAllowedService: WafRulesService.createWafRulesAllowedService,
         loadWafRulesAllowedService: WafRulesService.loadWafRulesAllowedService,
-        editWafRulesAllowedService: WafRulesService.editWafRulesAllowedService
+        editWafRulesAllowedService: WafRulesService.editWafRulesAllowedService,
+        documentationServiceAllowed: Helpers.documentationCatalog.wafAllowed,
+        documentationServiceTuning: Helpers.documentationCatalog.wafTuning
       },
       meta: {
         breadCrumbs: [
@@ -80,7 +82,9 @@ export const wafRulesRoutes = {
         deleteWafRulesAllowedService: WafRulesService.deleteWafRulesAllowedService,
         createWafRulesAllowedService: WafRulesService.createWafRulesAllowedService,
         loadWafRulesAllowedService: WafRulesService.loadWafRulesAllowedService,
-        editWafRulesAllowedService: WafRulesService.editWafRulesAllowedService
+        editWafRulesAllowedService: WafRulesService.editWafRulesAllowedService,
+        documentationServiceAllowed: Helpers.documentationCatalog.wafAllowed,
+        documentationServiceTuning: Helpers.documentationCatalog.wafTuning
       },
       meta: {
         breadCrumbs: [
@@ -105,7 +109,9 @@ export const wafRulesRoutes = {
         deleteWafRulesAllowedService: WafRulesService.deleteWafRulesAllowedService,
         createWafRulesAllowedService: WafRulesService.createWafRulesAllowedService,
         loadWafRulesAllowedService: WafRulesService.loadWafRulesAllowedService,
-        editWafRulesAllowedService: WafRulesService.editWafRulesAllowedService
+        editWafRulesAllowedService: WafRulesService.editWafRulesAllowedService,
+        documentationServiceAllowed: Helpers.documentationCatalog.wafAllowed,
+        documentationServiceTuning: Helpers.documentationCatalog.wafTuning
       },
       meta: {
         breadCrumbs: [
diff --git a/src/templates/create-form-block/form-horizontal.vue b/src/templates/create-form-block/form-horizontal.vue
index 2b6ae7d01..8b8bf9973 100644
--- a/src/templates/create-form-block/form-horizontal.vue
+++ b/src/templates/create-form-block/form-horizontal.vue
@@ -6,7 +6,10 @@
     <!-- title and description -->
     <div class="flex flex-col gap-2 flex-1 w-full md:min-w-[20rem]">
       <div class="text-color text-xl font-medium">{{ props.title }}</div>
-      <div class="text-color-secondary text-sm font-normal " style="white-space: pre-line">
+      <div
+        class="text-color-secondary text-sm font-normal"
+        style="white-space: pre-line"
+      >
         {{ props.description }}
       </div>
     </div>
diff --git a/src/views/WafRules/EditView.vue b/src/views/WafRules/EditView.vue
index f0eeb602f..33d149217 100644
--- a/src/views/WafRules/EditView.vue
+++ b/src/views/WafRules/EditView.vue
@@ -31,9 +31,7 @@
             </template>
           </EditFormBlock>
         </TabPanel>
-        <TabPanel header="Tuning">
-          <h1>Tuning</h1>
-        </TabPanel>
+        <TabPanel header="Tuning"> </TabPanel>
         <TabPanel header="Allowed Rules">
           <ListTableNoHeaderBlock
             ref="listAllowedRef"
@@ -51,25 +49,30 @@
               <PrimeButton
                 icon="pi pi-plus"
                 label="Allowed Rule"
-                @click="openCreateDrawerIDNSResource"
+                @click="openCreateDrawerWafAllowed"
               />
             </template>
           </ListTableNoHeaderBlock>
 
           <EmptyResultsBlock
             v-else
-            title="No Waf Rules Allowed has been created"
-            description=" Click the button below to initiate the setup process and create your first waf rules allowed."
+            title="No Allowed Rules added."
+            description="Allowed Rules are specific WAF rules customized for your web application."
             createButtonLabel="Allowed Rule"
-            :documentationService="documentationService"
+            :documentationService="documentationServiceAllowed"
             :inTabs="true"
           >
             <template #default>
+              <PrimeButton
+                severity="secondary"
+                label="Create from Tuning"
+              >
+              </PrimeButton>
               <PrimeButton
                 severity="secondary"
                 icon="pi pi-plus"
-                label="Add"
-                @click="openCreateDrawerIDNSResource"
+                label="Allowed Rule"
+                @click="openCreateDrawerWafAllowed"
               />
             </template>
             <template #illustration>
@@ -125,6 +128,7 @@
   import PrimeButton from 'primevue/button'
   import TabPanel from 'primevue/tabpanel'
   import TabView from 'primevue/tabview'
+
   import { computed, onBeforeMount, ref, watch } from 'vue'
   import { useRoute, useRouter } from 'vue-router'
   import * as yup from 'yup'
@@ -168,6 +172,14 @@
     editWafRulesAllowedService: {
       type: Function,
       required: true
+    },
+    documentationServiceAllowed: {
+      required: true,
+      type: Function
+    },
+    documentationServiceTuning: {
+      required: true,
+      type: Function
     }
   })
 
@@ -327,7 +339,7 @@
     showEditWafRulesAllowedDrawer.value = true
   }
 
-  const openCreateDrawerIDNSResource = () => {
+  const openCreateDrawerWafAllowed = () => {
     showCreateWafRulesAllowedDrawer.value = true
   }
 

From f370aedc0e1d2cc47d2a01b74da5844a337f126a Mon Sep 17 00:00:00 2001
From: paulosf0 <paulo.ferreira@azion.com>
Date: Tue, 16 Jan 2024 15:06:30 -0300
Subject: [PATCH 100/135] feat: add list allowed test

---
 .../create-waf-rules-allowed-service.js       |   3 +-
 .../edit-waf-rules-allowed-service.js         |   4 +-
 .../list-waf-rules-allowed-service.js         |   7 +-
 .../create-waf-rules-allowed-service.test.js  |   4 +-
 .../edit-waf-rules-allowed-service.test.js    |   8 +-
 .../list-waf-rules-allowed-service.test.js    | 101 ++++++++++++++++++
 src/views/WafRules/EditView.vue               |   4 +-
 7 files changed, 114 insertions(+), 17 deletions(-)
 create mode 100644 src/tests/services/waf-rules-services/list-waf-rules-allowed-service.test.js

diff --git a/src/services/waf-rules-services/create-waf-rules-allowed-service.js b/src/services/waf-rules-services/create-waf-rules-allowed-service.js
index 01050be7c..fc7366c2c 100644
--- a/src/services/waf-rules-services/create-waf-rules-allowed-service.js
+++ b/src/services/waf-rules-services/create-waf-rules-allowed-service.js
@@ -19,7 +19,6 @@ const adapt = (payload) => {
       if (zoneWithoutMatchoZone.includes(zone.zone)) {
         zone.matches_on = null
       }
-
       return zone
     }),
     path: payload.path,
@@ -39,7 +38,7 @@ const adapt = (payload) => {
  */
 const parseHttpResponse = (httpResponse) => {
   switch (httpResponse.statusCode) {
-    case 201:
+    case 202:
       return {
         feedback: 'Your waf rule allowed has been created'
       }
diff --git a/src/services/waf-rules-services/edit-waf-rules-allowed-service.js b/src/services/waf-rules-services/edit-waf-rules-allowed-service.js
index 5be9a8f70..febfc3e22 100644
--- a/src/services/waf-rules-services/edit-waf-rules-allowed-service.js
+++ b/src/services/waf-rules-services/edit-waf-rules-allowed-service.js
@@ -2,9 +2,9 @@ import { AxiosHttpClientAdapter } from '../axios/AxiosHttpClientAdapter'
 import * as Errors from '@/services/axios/errors'
 import { makeWafRulesAllowedBaseUrl } from './make-waf-rules-allowed-base-url'
 
-export const editWafRulesAllowedService = async ({ payload, id, allowedId }) => {
+export const editWafRulesAllowedService = async ({ payload, wafId, allowedId }) => {
   let httpResponse = await AxiosHttpClientAdapter.request({
-    url: `${makeWafRulesAllowedBaseUrl()}/${id}/allowed_rules/${allowedId}`,
+    url: `${makeWafRulesAllowedBaseUrl()}/${wafId}/allowed_rules/${allowedId}`,
     method: 'PUT',
     body: adapt(payload)
   })
diff --git a/src/services/waf-rules-services/list-waf-rules-allowed-service.js b/src/services/waf-rules-services/list-waf-rules-allowed-service.js
index 1081a64d3..7e4b475d2 100644
--- a/src/services/waf-rules-services/list-waf-rules-allowed-service.js
+++ b/src/services/waf-rules-services/list-waf-rules-allowed-service.js
@@ -1,9 +1,9 @@
 import { AxiosHttpClientAdapter, parseHttpResponse } from '../axios/AxiosHttpClientAdapter'
 import { makeWafRulesAllowedBaseUrl } from './make-waf-rules-allowed-base-url'
 
-export const listWafRulesAllowedService = async ({ id }) => {
+export const listWafRulesAllowedService = async ({ wafId }) => {
   let httpResponse = await AxiosHttpClientAdapter.request({
-    url: `${makeWafRulesAllowedBaseUrl()}/${id}/allowed_rules?page=1&page_size=100`,
+    url: `${makeWafRulesAllowedBaseUrl()}/${wafId}/allowed_rules?page=1&page_size=100`,
     method: 'GET'
   })
 
@@ -82,9 +82,6 @@ const adapt = (httpResponse) => {
             new Date(waf.last_modified)
           ),
           matchZones: parseMatchZone(waf.match_zones),
-          matchesOn: waf.matches_on,
-          zone: waf.zone,
-          zoneInput: waf.zone_input,
           path: waf.path,
           reason: waf.reason,
           ruleId: waf.rule_id === 0 ? '0 - All Rules' : waf.rule_id,
diff --git a/src/tests/services/waf-rules-services/create-waf-rules-allowed-service.test.js b/src/tests/services/waf-rules-services/create-waf-rules-allowed-service.test.js
index 2bfc591f0..732e05a10 100644
--- a/src/tests/services/waf-rules-services/create-waf-rules-allowed-service.test.js
+++ b/src/tests/services/waf-rules-services/create-waf-rules-allowed-service.test.js
@@ -25,7 +25,7 @@ const makeSut = () => {
 describe('WafRulesServices', () => {
   it('should call API with correct params', async () => {
     const requestSpy = vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
-      statusCode: 201,
+      statusCode: 202,
       body: fixtures.wafRulesMock
     })
     const { sut } = makeSut()
@@ -50,7 +50,7 @@ describe('WafRulesServices', () => {
 
   it('should return a feedback message on successfully created', async () => {
     vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
-      statusCode: 201,
+      statusCode: 202,
       body: fixtures.wafRulesMock
     })
     const { sut } = makeSut()
diff --git a/src/tests/services/waf-rules-services/edit-waf-rules-allowed-service.test.js b/src/tests/services/waf-rules-services/edit-waf-rules-allowed-service.test.js
index 083b9636b..61407ffef 100644
--- a/src/tests/services/waf-rules-services/edit-waf-rules-allowed-service.test.js
+++ b/src/tests/services/waf-rules-services/edit-waf-rules-allowed-service.test.js
@@ -29,7 +29,7 @@ describe('WafRulesServices', () => {
       body: fixtures.wafRulesMock
     })
     const { sut } = makeSut()
-    await sut({ payload: fixtures.wafRulesMock, id: 4040, allowedId: 10 })
+    await sut({ payload: fixtures.wafRulesMock, wafId: 4040, allowedId: 10 })
 
     expect(requestSpy).toHaveBeenCalledWith({
       url: 'v4/edge/waf/4040/allowed_rules/10',
@@ -52,7 +52,7 @@ describe('WafRulesServices', () => {
     })
     const { sut } = makeSut()
 
-    const data = await sut({ payload: fixtures.wafRulesMock, id: 4040, allowedId: 10 })
+    const data = await sut({ payload: fixtures.wafRulesMock, wafId: 4040, allowedId: 10 })
 
     expect(data).toStrictEqual('Your waf rule allowed has been updated')
   })
@@ -67,7 +67,7 @@ describe('WafRulesServices', () => {
     })
     const { sut } = makeSut()
 
-    const feedbackMessage = sut({ payload: fixtures.wafRulesMock, id: 4040, allowedId: 10 })
+    const feedbackMessage = sut({ payload: fixtures.wafRulesMock, wafId: 4040, allowedId: 10 })
 
     expect(feedbackMessage).rejects.toThrow(apiErrorMock)
   })
@@ -101,7 +101,7 @@ describe('WafRulesServices', () => {
       })
       const { sut } = makeSut()
 
-      const response = sut({ payload: fixtures.wafRulesMock, id: 4040, allowedId: 10 })
+      const response = sut({ payload: fixtures.wafRulesMock, wafId: 4040, allowedId: 10 })
 
       expect(response).rejects.toBe(expectedError)
     }
diff --git a/src/tests/services/waf-rules-services/list-waf-rules-allowed-service.test.js b/src/tests/services/waf-rules-services/list-waf-rules-allowed-service.test.js
new file mode 100644
index 000000000..4879c7e99
--- /dev/null
+++ b/src/tests/services/waf-rules-services/list-waf-rules-allowed-service.test.js
@@ -0,0 +1,101 @@
+import { AxiosHttpClientAdapter } from '@/services/axios/AxiosHttpClientAdapter'
+import { listWafRulesAllowedService } from '@/services/waf-rules-services'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+const fixtures = {
+  wafRulesMock: {
+    id: 1464,
+    last_editor: 'paulo.ferreira+teste1@azion.com',
+    last_modified: '2024-01-12T14:24:52.957488Z',
+    match_zones: [{ zone: 'file_name', zone_input: null, matches_on: null }],
+    path: '/test/te',
+    reason: 'hello, it is just a test',
+    rule_id: 0,
+    status: true,
+    use_regex: false
+  },
+  wafRulesMockWithFalseStatus: {
+    id: 1464,
+    last_editor: 'paulo.ferreira+teste1@azion.com',
+    last_modified: '2024-01-12T14:24:52.957488Z',
+    match_zones: [{ zone: 'file_name', zone_input: null, matches_on: null }],
+    path: '/test/te',
+    reason: 'hello, it is just a test',
+    rule_id: 0,
+    status: false,
+    use_regex: false
+  }
+}
+
+const makeSut = () => {
+  const sut = listWafRulesAllowedService
+
+  return {
+    sut
+  }
+}
+
+describe('WafRulesServices', () => {
+  beforeEach(() => {
+    vi.useFakeTimers()
+  })
+  afterEach(() => {
+    vi.useRealTimers()
+  })
+
+  it('should call api with correct params', async () => {
+    const requestSpy = vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+      statusCode: 200,
+      body: { result: null }
+    })
+
+    const { sut } = makeSut()
+    await sut({ wafId: 4040 })
+
+    expect(requestSpy).toHaveBeenCalledWith({
+      url: 'v4/edge/waf/4040/allowed_rules?page=1&page_size=100',
+      method: 'GET'
+    })
+  })
+
+  it('should parsed correctly each waf rules allowed', async () => {
+    vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+      statusCode: 200,
+      body: { results: [fixtures.wafRulesMock, fixtures.wafRulesMockWithFalseStatus] }
+    })
+    const { sut } = makeSut()
+
+    const result = await sut({ wafId: 4040 })
+
+    expect(result).toEqual([
+      {
+        id: 1464,
+        lastEditor: fixtures.wafRulesMock.last_editor,
+        lastModified: 'Friday, January 12, 2024',
+        matchZones: ['File Name (Multipart Body)'],
+        path: fixtures.wafRulesMock.path,
+        reason: fixtures.wafRulesMock.reason,
+        ruleId: '0 - All Rules',
+        status: {
+          content: 'Active',
+          severity: 'success'
+        },
+        useRegex: fixtures.wafRulesMock.use_regex
+      },
+      {
+        id: 1464,
+        lastEditor: fixtures.wafRulesMock.last_editor,
+        lastModified: 'Friday, January 12, 2024',
+        matchZones: ['File Name (Multipart Body)'],
+        path: fixtures.wafRulesMock.path,
+        reason: fixtures.wafRulesMock.reason,
+        ruleId: '0 - All Rules',
+        status: {
+          content: 'Inactive',
+          severity: 'danger'
+        },
+        useRegex: fixtures.wafRulesMock.use_regex
+      }
+    ])
+  })
+})
diff --git a/src/views/WafRules/EditView.vue b/src/views/WafRules/EditView.vue
index 33d149217..68310ea6b 100644
--- a/src/views/WafRules/EditView.vue
+++ b/src/views/WafRules/EditView.vue
@@ -308,7 +308,7 @@
   }
 
   const handleListWafRulesAllowedService = async () => {
-    return await props.listWafRulesAllowedService({ id: wafRuleId.value })
+    return await props.listWafRulesAllowedService({ wafId: wafRuleId.value })
   }
 
   const handleDeleteWafRulesAllowedService = async (id) => {
@@ -329,7 +329,7 @@
   const handleEditWafRulesAllowedService = async (payload) => {
     return await props.editWafRulesAllowedService({
       payload,
-      id: wafRuleId.value,
+      wafId: wafRuleId.value,
       allowedId: selectedWafRulesAllowedToEdit.value
     })
   }

From 9d5f2983306af95aa6cf3d25faf0697de12d484e Mon Sep 17 00:00:00 2001
From: paulosf0 <paulo.ferreira@azion.com>
Date: Tue, 16 Jan 2024 15:15:33 -0300
Subject: [PATCH 101/135] feat: code refactor

---
 src/views/WafRules/FormFields/FormFieldsAllowed.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/views/WafRules/FormFields/FormFieldsAllowed.vue b/src/views/WafRules/FormFields/FormFieldsAllowed.vue
index c16fe6fb5..08f6f1de6 100644
--- a/src/views/WafRules/FormFields/FormFieldsAllowed.vue
+++ b/src/views/WafRules/FormFields/FormFieldsAllowed.vue
@@ -39,7 +39,7 @@
     matchZones.value = [...newArray, { matches_on: 'value', zone: 'path', zone_input: null }]
   }
 
-  const text = ref(
+  const descriptionAllowedFormField = ref(
     'Choose match zones to put into the Allowed Rule:\n Path to put the path itself or one named path into the Allowed Rule. \n Query String or Conditional Query String to put all GET arguments or one named argument into the Allowed Rule. For example, the "search" argument. \n Request Header or Conditional Request Header to put all HTTP request headers or one named header into the Allowed Rule. For example, the Cookie header. \nRequest Body or Conditional Request Body to put all POST arguments or one named argument into the Allowed Rule. For example, the "search" argument.\n Raw Body to put the unparsed (raw) request body into the whitelist.\n File Name (Multipart Body) to put the unparsed (raw) request body into the Allowed Rule.'
   )
 
@@ -111,7 +111,7 @@
   <FormHorizontal
     :isDrawer="true"
     title="Match Zone Set"
-    :description="text"
+    :description="descriptionAllowedFormField"
   >
     <template #inputs>
       <div class="flex flex-col sm:max-w-lg w-full gap-2">
@@ -136,7 +136,7 @@
         >
           <div
             class="flex"
-            v-if="index > 0"
+            v-if="index"
           >
             <Divider
               align="left"

From f4171ecc0eb9bf2bdc4ce2981583429aadeb9633 Mon Sep 17 00:00:00 2001
From: paulosf0 <paulo.ferreira@azion.com>
Date: Tue, 16 Jan 2024 15:40:27 -0300
Subject: [PATCH 102/135] feat: remove .only in test

---
 .../waf-rules-services/edit-waf-rules-allowed-service.test.js   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/tests/services/waf-rules-services/edit-waf-rules-allowed-service.test.js b/src/tests/services/waf-rules-services/edit-waf-rules-allowed-service.test.js
index 61407ffef..2db03d424 100644
--- a/src/tests/services/waf-rules-services/edit-waf-rules-allowed-service.test.js
+++ b/src/tests/services/waf-rules-services/edit-waf-rules-allowed-service.test.js
@@ -57,7 +57,7 @@ describe('WafRulesServices', () => {
     expect(data).toStrictEqual('Your waf rule allowed has been updated')
   })
 
-  it.only('Should return an API error for an 400 response status', async () => {
+  it('Should return an API error for an 400 response status', async () => {
     const apiErrorMock = 'This field is required.'
     vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
       statusCode: 400,

From bfe62317b83ce3a83c8b79b271040b41813c30c1 Mon Sep 17 00:00:00 2001
From: Matheus Sunderhus <matheus.sunderhus@azion.com>
Date: Tue, 16 Jan 2024 15:42:42 -0300
Subject: [PATCH 103/135] chore: rename variable to add more context to
 IntegrationInstall view

---
 src/views/Marketplace/drawer/IntegrationInstall.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/views/Marketplace/drawer/IntegrationInstall.vue b/src/views/Marketplace/drawer/IntegrationInstall.vue
index 96bf8ac52..9c1ed76ec 100644
--- a/src/views/Marketplace/drawer/IntegrationInstall.vue
+++ b/src/views/Marketplace/drawer/IntegrationInstall.vue
@@ -104,8 +104,10 @@
   const { value: edgeApplication } = useField('edgeApplication')
 
   const edgeApps = computed(() => {
-    const apps = props.availableApps.filter((i) => i.elegibleForInstall)
-    return apps.map((app) => ({
+    const eligibleEdgeApplicationsToInstall = props.availableApps.filter(
+      (edgeApplication) => edgeApplication.elegibleForInstall
+    )
+    return eligibleEdgeApplicationsToInstall.map((app) => ({
       label: app.name,
       value: app.id,
       upgradeable: app.upgradeable

From b90f62e6e1d8c6c0c049f65cd40ce07466612756 Mon Sep 17 00:00:00 2001
From: Matheus Sunderhus <matheus.sunderhus@azion.com>
Date: Tue, 16 Jan 2024 15:55:11 -0300
Subject: [PATCH 104/135] refactor: change mapper of digital certificates list
 to use TLS Certificate

---
 .../list-digital-certificates-service.js                      | 2 +-
 .../list-digital-certificates-service.test.js                 | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/services/digital-certificates-services/list-digital-certificates-service.js b/src/services/digital-certificates-services/list-digital-certificates-service.js
index 4c8f0da44..189f9b8ed 100644
--- a/src/services/digital-certificates-services/list-digital-certificates-service.js
+++ b/src/services/digital-certificates-services/list-digital-certificates-service.js
@@ -17,7 +17,7 @@ export const listDigitalCertificatesService = async ({
   return parseHttpResponse(httpResponse)
 }
 
-export const EDGE_CERTIFICATE = 'Edge Certificate'
+export const EDGE_CERTIFICATE = 'TLS Certificate'
 export const TRUSTED_CA_CERTIFICATE = 'Trusted CA Certificate'
 
 const parseStatusData = (status) => {
diff --git a/src/tests/services/digital-certificates-services/list-digital-certificates-service.test.js b/src/tests/services/digital-certificates-services/list-digital-certificates-service.test.js
index f3faac28f..080c4596e 100644
--- a/src/tests/services/digital-certificates-services/list-digital-certificates-service.test.js
+++ b/src/tests/services/digital-certificates-services/list-digital-certificates-service.test.js
@@ -86,7 +86,7 @@ describe('DigitalCertificatesServices', () => {
       id: fixtures.certificateMock.id,
       name: fixtures.certificateMock.name,
       issuer: fixtures.certificateMock.issuer,
-      type: 'Edge Certificate',
+      type: 'TLS Certificate',
       subjectName: 'Subject 1,Subject 2',
       validity: 'Nov 10, 2023, 12:00 AM',
       status: {
@@ -128,7 +128,7 @@ describe('DigitalCertificatesServices', () => {
         id: fixtures.certificateMock.id,
         name: fixtures.certificateMock.name,
         issuer: fixtures.certificateMock.issuer,
-        type: 'Edge Certificate',
+        type: 'TLS Certificate',
         subjectName: 'Subject 1,Subject 2',
         validity: 'Nov 10, 2023, 12:00 AM',
         status: {

From 87890d73924a56080a651757d5cf92857c3a8c87 Mon Sep 17 00:00:00 2001
From: Matheus Sunderhus <matheus.sunderhus@azion.com>
Date: Tue, 16 Jan 2024 16:19:59 -0300
Subject: [PATCH 105/135] chore: remove clickable skeleton from
 LoadingListTemplate

---
 src/templates/create-modal-block/LoadingListTemplate.vue | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/templates/create-modal-block/LoadingListTemplate.vue b/src/templates/create-modal-block/LoadingListTemplate.vue
index 8f23e5c37..5effde5e4 100644
--- a/src/templates/create-modal-block/LoadingListTemplate.vue
+++ b/src/templates/create-modal-block/LoadingListTemplate.vue
@@ -1,11 +1,10 @@
 <template>
   <Skeleton class="w-52 h-8 rounded mt-4 mb-3" />
   <div class="mx-0 w-full mt-0 grid grid-cols-1 lg:grid-cols-2 2xl:grid-cols-3 gap-4">
-    <PrimeButton
+    <div
       v-for="item of 8"
       :key="item"
-      class="p-6 text-left w-full border-solid border surface-border transition-all"
-      link
+      class="p-6 text-left w-full rounded border-solid border surface-border transition-all"
     >
       <div class="flex w-full flex-col justify-between gap-3.5 items-start">
         <div class="flex w-full gap-3.5 flex-col">
@@ -17,11 +16,10 @@
           </div>
         </div>
       </div>
-    </PrimeButton>
+    </div>
   </div>
 </template>
 
 <script setup>
-  import PrimeButton from 'primevue/button'
   import Skeleton from 'primevue/skeleton'
 </script>

From b1c62dd3de0131379db3e675a9c9f56d6e6b2618 Mon Sep 17 00:00:00 2001
From: Matheus Sunderhus <matheus.sunderhus@azion.com>
Date: Tue, 16 Jan 2024 16:21:33 -0300
Subject: [PATCH 106/135] fix: remove duplicated div tag at LoadingListTemplate

---
 .../create-modal-block/LoadingListTemplate.vue       | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/src/templates/create-modal-block/LoadingListTemplate.vue b/src/templates/create-modal-block/LoadingListTemplate.vue
index 5effde5e4..ceb6a8fd0 100644
--- a/src/templates/create-modal-block/LoadingListTemplate.vue
+++ b/src/templates/create-modal-block/LoadingListTemplate.vue
@@ -7,13 +7,11 @@
       class="p-6 text-left w-full rounded border-solid border surface-border transition-all"
     >
       <div class="flex w-full flex-col justify-between gap-3.5 items-start">
-        <div class="flex w-full gap-3.5 flex-col">
-          <Skeleton class="w-10 h-10 rounded" />
-          <div class="flex flex-col w-full gap-1.5">
-            <Skeleton class="w-52 h-5 rounded" />
-            <Skeleton class="max-w-[208px] h-5 rounded" />
-            <Skeleton class="w-32 h-5 rounded" />
-          </div>
+        <Skeleton class="w-10 h-10 rounded" />
+        <div class="flex flex-col w-full gap-1.5">
+          <Skeleton class="w-52 h-5 rounded" />
+          <Skeleton class="max-w-[208px] h-5 rounded" />
+          <Skeleton class="w-32 h-5 rounded" />
         </div>
       </div>
     </div>

From 7210d5b24f51ec60377d157455096d56774809e0 Mon Sep 17 00:00:00 2001
From: paulosf0 <paulo.ferreira@azion.com>
Date: Tue, 16 Jan 2024 17:21:13 -0300
Subject: [PATCH 107/135] feat: add url to edit when create a waf

---
 src/services/waf-rules-services/create-waf-rules-service.js  | 2 +-
 .../waf-rules-services/create-waf-rules-service.test.js      | 5 +++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/services/waf-rules-services/create-waf-rules-service.js b/src/services/waf-rules-services/create-waf-rules-service.js
index 45b5d4b37..ab1409700 100644
--- a/src/services/waf-rules-services/create-waf-rules-service.js
+++ b/src/services/waf-rules-services/create-waf-rules-service.js
@@ -49,7 +49,7 @@ const parseHttpResponse = (httpResponse) => {
     case 201:
       return {
         feedback: 'Your waf rule has been created',
-        urlToEditView: `/waf`
+        urlToEditView: `/waf/edit/${httpResponse.body.id}`
       }
     case 400:
       const apiError = extractApiError(httpResponse)
diff --git a/src/tests/services/waf-rules-services/create-waf-rules-service.test.js b/src/tests/services/waf-rules-services/create-waf-rules-service.test.js
index f0d527d79..e44c8f6de 100644
--- a/src/tests/services/waf-rules-services/create-waf-rules-service.test.js
+++ b/src/tests/services/waf-rules-services/create-waf-rules-service.test.js
@@ -22,7 +22,8 @@ const fixtures = {
     remoteFileInclusion: true,
     sqlInjection: true,
     active: false,
-    name: 'test'
+    name: 'test',
+    id: 100
   }
 }
 
@@ -82,7 +83,7 @@ describe('WafRulesServices', () => {
 
     expect(data).toStrictEqual({
       feedback: 'Your waf rule has been created',
-      urlToEditView: '/waf'
+      urlToEditView: '/waf/edit/100'
     })
   })
 

From 7c955e1dea8f8af45ab6c41e331691763ffff4d9 Mon Sep 17 00:00:00 2001
From: Matheus Sunderhus <matheus.sunderhus@azion.com>
Date: Tue, 16 Jan 2024 17:21:15 -0300
Subject: [PATCH 108/135] chore: remove comments from code

---
 src/templates/template-engine-block/FormLoading.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/templates/template-engine-block/FormLoading.vue b/src/templates/template-engine-block/FormLoading.vue
index 4b74cdbc5..19e2d56fb 100644
--- a/src/templates/template-engine-block/FormLoading.vue
+++ b/src/templates/template-engine-block/FormLoading.vue
@@ -2,11 +2,9 @@
   <div
     class="flex max-w-screen-2xl mx-auto gap-8 lg:gap-16 w-full surface-section rounded-md border surface-border px-8 py-8 xl:py-14 xl:p-14 flex-wrap"
   >
-    <!-- title and description -->
     <div class="flex flex-col gap-2 flex-1 w-full md:min-w-[20rem]">
       <Skeleton class="h-7 w-44" />
     </div>
-    <!-- inputs  -->
     <div class="max-w-3xl w-full flex flex-col gap-8 max-md:gap-6">
       <div
         class="flex flex-col sm:max-w-lg w-full gap-2"

From 5667a59973960850f3f9bb922db8b1d25339058e Mon Sep 17 00:00:00 2001
From: Matheus Sunderhus <matheus.sunderhus@azion.com>
Date: Tue, 16 Jan 2024 17:26:42 -0300
Subject: [PATCH 109/135] fix: ensure to create and validate field text on
 schema creation of TemplateEngineBlock

---
 src/templates/template-engine-block/index.vue | 70 ++++++++-----------
 1 file changed, 31 insertions(+), 39 deletions(-)

diff --git a/src/templates/template-engine-block/index.vue b/src/templates/template-engine-block/index.vue
index efe010b07..21aff74c5 100644
--- a/src/templates/template-engine-block/index.vue
+++ b/src/templates/template-engine-block/index.vue
@@ -2,7 +2,7 @@
   <FormLoading v-if="isLoading" />
   <div
     class="w-full flex flex-col gap-8 max-md:gap-6"
-    v-else-if="!isLoading"
+    v-else
   >
     <FormHorizontal
       v-if="inputSchema.fields"
@@ -172,9 +172,9 @@
     try {
       const initialData = await props.getTemplateService(id)
       inputSchema.value = initialData.inputSchema
-      const schemaObject = createSchemaObject()
-      const isValid = (await schemaObject).isValid()
-      createInputs(schemaObject, isValid)
+      const schemaObject = await createSchemaObject()
+      const isValid = await schemaObject.isValid()
+      await createInputs(schemaObject, isValid)
     } catch (error) {
       toast.add({
         closable: true,
@@ -195,27 +195,23 @@
   })
 
   const createSchemaObject = async () => {
-    const token = {}
+    const templateSchema = {}
 
-    if (inputSchema.value.fields) {
-      inputSchema.value.fields.forEach((element) => {
-        const schema = createSchemaString(element)
-        token[element.name] = schema
-      })
-    }
+    inputSchema.value.fields?.forEach((field) => {
+      const schema = createSchemaString(field)
+      templateSchema[field.name] = schema
+    })
 
-    if (inputSchema.value.groups) {
-      inputSchema.value.groups.forEach((group) => {
-        group.fields.forEach((element) => {
-          const schema = createSchemaString(element)
-          token[element.name] = schema
-        })
+    inputSchema.value.groups?.forEach((group) => {
+      group.fields.forEach((field) => {
+        const schema = createSchemaString(field)
+        templateSchema[field.name] = schema
       })
-    }
+    })
 
-    const schameObject = yup.object(token)
+    const resultSchema = yup.object(templateSchema)
 
-    return schameObject
+    return resultSchema
   }
 
   const createSchemaString = (element) => {
@@ -273,25 +269,21 @@
 
     formTools.value = { errors, meta, resetForm, values }
 
-    if (inputSchema.value.fields) {
-      inputSchema.value.fields.forEach((element) => {
-        if (element.value) {
-          setFieldValue(element.name, element.value)
-        }
-        element.input = defineInputBinds(element.name, { validateOnInput: true })
-      })
-    }
+    inputSchema.value.fields?.forEach((field) => {
+      if (field.value) {
+        setFieldValue(field.name, field.value)
+      }
+      field.input = defineInputBinds(field.name, { validateOnInput: true })
+    })
 
-    if (inputSchema.value.groups) {
-      inputSchema.value.groups.forEach((group) => {
-        group.fields.forEach((element) => {
-          if (element.value) {
-            setFieldValue(element.name, element.value)
-          }
-          element.input = defineInputBinds(element.name, { validateOnInput: true })
-        })
+    inputSchema.value.groups?.forEach((group) => {
+      group.fields.forEach((field) => {
+        if (field.value) {
+          setFieldValue(field.name, field.value)
+        }
+        field.input = defineInputBinds(field.name, { validateOnInput: true })
       })
-    }
+    })
 
     isLoading.value = false
 
@@ -307,8 +299,8 @@
   }
 
   const inputPassword = (inputName, text) => {
-    const setFieldValue = useSetFieldValue()
-    setFieldValue(inputName, text)
+    const setFieldValue = useSetFieldValue(inputName)
+    setFieldValue(text)
   }
 
   const validateAndSubmit = async () => {

From 0122a2c022622d160b225115a21df44adfc43c16 Mon Sep 17 00:00:00 2001
From: Matheus Sunderhus <matheus.sunderhus@azion.com>
Date: Tue, 16 Jan 2024 18:42:38 -0300
Subject: [PATCH 110/135] fix: ensure to update password field values and run
 schema validations ai TemplateEngineBlock

---
 src/templates/template-engine-block/index.vue | 21 +++++++------------
 1 file changed, 7 insertions(+), 14 deletions(-)

diff --git a/src/templates/template-engine-block/index.vue b/src/templates/template-engine-block/index.vue
index 21aff74c5..96b08aada 100644
--- a/src/templates/template-engine-block/index.vue
+++ b/src/templates/template-engine-block/index.vue
@@ -24,9 +24,9 @@
           <Password
             v-if="field.type === 'password'"
             toggleMask
-            :key="`password${field.name}`"
-            :modelValue="field.value.input"
-            @input="(event) => inputPassword(field.name, event.target.value)"
+            :key="`password-field-${field.name}`"
+            v-bind="field.input"
+            v-model="field.input.value"
             :id="field.name"
             class="w-full"
             :class="{ 'p-invalid': formTools.errors[field.name] }"
@@ -73,9 +73,9 @@
             <Password
               v-if="field.type === 'password'"
               toggleMask
-              :key="`password${field.name}`"
-              :modelValue="field.value.input"
-              @input="(event) => inputPassword(field.name, event.target.value)"
+              :key="`password-field-${field.name}`"
+              v-bind="field.input"
+              v-model="field.input.value"
               :id="field.name"
               class="w-full"
               :class="{ 'p-invalid': formTools.errors[field.name] }"
@@ -298,11 +298,6 @@
     return fields.filter((field) => !field.hidden)
   }
 
-  const inputPassword = (inputName, text) => {
-    const setFieldValue = useSetFieldValue(inputName)
-    setFieldValue(text)
-  }
-
   const validateAndSubmit = async () => {
     submitLoading.value = true
     emit('loading')
@@ -335,10 +330,8 @@
       })
 
       const response = await props.instantiateTemplateService(props.templateId, payload)
-      emit('instantiate', response)
-
-      // Let submit loading for others operations
       submitLoading.value = props.freezeLoading
+      emit('instantiate', response)
     } catch (error) {
       toast.add({
         closable: true,

From db7ced163ea34da702380d363ce4684ff627a426 Mon Sep 17 00:00:00 2001
From: Matheus Sunderhus <matheus.sunderhus@azion.com>
Date: Tue, 16 Jan 2024 18:43:37 -0300
Subject: [PATCH 111/135] chore: remove unnecessary import from
 TemplateEngineBlock

---
 src/templates/template-engine-block/index.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/templates/template-engine-block/index.vue b/src/templates/template-engine-block/index.vue
index 96b08aada..5e28e8744 100644
--- a/src/templates/template-engine-block/index.vue
+++ b/src/templates/template-engine-block/index.vue
@@ -122,7 +122,7 @@
   import ActionBarTemplate from '@templates/action-bar-block'
   import FormLoading from './FormLoading'
   import InputText from 'primevue/inputtext'
-  import { useForm, useSetFieldValue } from 'vee-validate'
+  import { useForm } from 'vee-validate'
   import * as yup from 'yup'
   import { useToast } from 'primevue/usetoast'
 

From 36076945e2f1592b01386f8b730b6f69c07e0355 Mon Sep 17 00:00:00 2001
From: Matheus Sunderhus <matheus.sunderhus@azion.com>
Date: Tue, 16 Jan 2024 18:45:32 -0300
Subject: [PATCH 112/135] fix: ensure to call loadSolutionByVendor only when an
 valid vendor is provided by router param

---
 src/views/CreateNew/CreateView.vue | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/views/CreateNew/CreateView.vue b/src/views/CreateNew/CreateView.vue
index 120f49cc8..0f62c09f0 100644
--- a/src/views/CreateNew/CreateView.vue
+++ b/src/views/CreateNew/CreateView.vue
@@ -274,11 +274,11 @@
     async created() {
       const store = useLoadingStore()
       store.startLoading()
-      await this.loadSolution()
+      await this.loadSolutionByVendor()
       store.finishLoading()
     },
     methods: {
-      async loadSolution() {
+      async loadSolutionByVendor() {
         try {
           this.isLoading = true
           this.solution = await this.loadSolutionService({
@@ -310,7 +310,10 @@
     },
     watch: {
       $route() {
-        this.loadSolution()
+        if (!this.$route.params.vendor || !this.$route.params.solution) {
+          return
+        }
+        this.loadSolutionByVendor()
       }
     }
   }

From f1601b2f7eda0cb376eb574d333a2b9c84b1d06d Mon Sep 17 00:00:00 2001
From: aloisio-m-bastian <107002324+aloisio-m-bastian@users.noreply.github.com>
Date: Wed, 17 Jan 2024 09:20:42 -0300
Subject: [PATCH 113/135] refactor: block origin field when there is no error
 responses added (#570)

---
 .../FormFields/FormFieldsErrorResponses.vue              | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/views/EdgeApplicationsErrorResponses/FormFields/FormFieldsErrorResponses.vue b/src/views/EdgeApplicationsErrorResponses/FormFields/FormFieldsErrorResponses.vue
index d56763f79..1a51190c5 100644
--- a/src/views/EdgeApplicationsErrorResponses/FormFields/FormFieldsErrorResponses.vue
+++ b/src/views/EdgeApplicationsErrorResponses/FormFields/FormFieldsErrorResponses.vue
@@ -115,6 +115,7 @@
     }
   ]
   const showErrorResponsesInputs = computed(() => errorResponses.value.length > 0)
+  const disableOriginKey = computed(() => errorResponses.value.length < 2)
   const statusAnyErrorResponse = computed(
     () => errorResponses.value.filter((element) => element.value.code === 'any')[0]
   )
@@ -148,6 +149,7 @@
 </script>
 
 <template>
+  {{ originId }}
   <FormHorizontal
     title="Error Responses List"
     description="Time to cache error responses before retry request to your origin."
@@ -178,7 +180,7 @@
         <div class="flex flex-col w-full sm:max-w-xs gap-2">
           <label
             for="maximun-ttl-seconds"
-            class="text-color text-base font-medium"
+            class="text-color text-sm font-medium leading-5"
           >
             Error Caching TTL*
           </label>
@@ -224,7 +226,7 @@
             <div class="flex flex-col w-full sm:max-w-xs gap-2">
               <label
                 for="maximun-ttl-seconds"
-                class="text-color text-base font-medium"
+                class="text-color text-sm font-medium leading-5"
               >
                 Error Caching TTL*
               </label>
@@ -248,7 +250,7 @@
           <div class="flex flex-col sm:max-w-lg w-full gap-2">
             <label
               for="maximun-ttl-seconds"
-              class="text-color text-base font-medium"
+              class="text-color text-sm font-medium leading-5"
             >
               Custom status code
             </label>
@@ -286,6 +288,7 @@
         <Dropdown
           inputId="originId"
           v-model="originId"
+          :disabled="disableOriginKey"
           :options="originOptions"
           optionLabel="name"
           option-value="originId"

From b44bd8b6ca396d7f4876980c8e2fadc175bbb812 Mon Sep 17 00:00:00 2001
From: aloisio-m-bastian <107002324+aloisio-m-bastian@users.noreply.github.com>
Date: Wed, 17 Jan 2024 09:33:17 -0300
Subject: [PATCH 114/135] fix: disable originId field when there is no error
 responses added (#572)

* refactor: block origin field when there is no error responses added

* fix: remove debugging access to variable

* fix: remove duplicated for in label
---
 .../FormFields/FormFieldsErrorResponses.vue                     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/EdgeApplicationsErrorResponses/FormFields/FormFieldsErrorResponses.vue b/src/views/EdgeApplicationsErrorResponses/FormFields/FormFieldsErrorResponses.vue
index 1a51190c5..6f4f390f2 100644
--- a/src/views/EdgeApplicationsErrorResponses/FormFields/FormFieldsErrorResponses.vue
+++ b/src/views/EdgeApplicationsErrorResponses/FormFields/FormFieldsErrorResponses.vue
@@ -179,7 +179,7 @@
         </div>
         <div class="flex flex-col w-full sm:max-w-xs gap-2">
           <label
-            for="maximun-ttl-seconds"
+            for="default-maximun-ttl-seconds"
             class="text-color text-sm font-medium leading-5"
           >
             Error Caching TTL*

From bdfd411f49119e7bf739e83e596004f388646c39 Mon Sep 17 00:00:00 2001
From: aloisio-m-bastian <107002324+aloisio-m-bastian@users.noreply.github.com>
Date: Wed, 17 Jan 2024 09:52:03 -0300
Subject: [PATCH 115/135] fix: remove originId access to variable from dom
 (#573)

---
 .../FormFields/FormFieldsErrorResponses.vue                      | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/views/EdgeApplicationsErrorResponses/FormFields/FormFieldsErrorResponses.vue b/src/views/EdgeApplicationsErrorResponses/FormFields/FormFieldsErrorResponses.vue
index 6f4f390f2..9aaaefdaf 100644
--- a/src/views/EdgeApplicationsErrorResponses/FormFields/FormFieldsErrorResponses.vue
+++ b/src/views/EdgeApplicationsErrorResponses/FormFields/FormFieldsErrorResponses.vue
@@ -149,7 +149,6 @@
 </script>
 
 <template>
-  {{ originId }}
   <FormHorizontal
     title="Error Responses List"
     description="Time to cache error responses before retry request to your origin."

From c86a317fff9e290b02bfd7a22e4173e8a3fea151 Mon Sep 17 00:00:00 2001
From: Matheus Sunderhus <matheus.sunderhus@azion.com>
Date: Wed, 17 Jan 2024 10:56:19 -0300
Subject: [PATCH 116/135] fix: add detail message on toast property at
 CreateModalBlock

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

diff --git a/src/templates/create-modal-block/index.vue b/src/templates/create-modal-block/index.vue
index f47f7b29e..75447b08c 100644
--- a/src/templates/create-modal-block/index.vue
+++ b/src/templates/create-modal-block/index.vue
@@ -120,7 +120,8 @@
       toast.add({
         closable: true,
         severity: 'error',
-        summary: error
+        detail: error,
+        summary: 'Error'
       })
     } finally {
       isLoading.value = false
@@ -136,7 +137,8 @@
       toast.add({
         closable: true,
         severity: 'error',
-        summary: error
+        detail: error,
+        summary: 'Error'
       })
     } finally {
       isLoading.value = false

From daedfb2f82e9031192d5649d4835ae5460c5ae58 Mon Sep 17 00:00:00 2001
From: Matheus Sunderhus <matheus.sunderhus@azion.com>
Date: Wed, 17 Jan 2024 11:20:21 -0300
Subject: [PATCH 117/135] chore: rename onMenuChange to onTabChange at
 CreateModalBlock

---
 src/templates/create-modal-block/index.vue | 16 +++++-----------
 1 file changed, 5 insertions(+), 11 deletions(-)

diff --git a/src/templates/create-modal-block/index.vue b/src/templates/create-modal-block/index.vue
index 75447b08c..11a95ac82 100644
--- a/src/templates/create-modal-block/index.vue
+++ b/src/templates/create-modal-block/index.vue
@@ -145,16 +145,10 @@
     }
   }
 
-  const onMenuChange = async (target) => {
-    if (target.value === null) {
-      selectedTabControl.value = selectedTab.value
-    } else {
-      selectedTab.value = target.value
-    }
-    if (target.value === 'browse') {
-      if (browseTemplates.value.length === 0) {
-        await loadBrowse()
-      }
+  const onTabChange = async (target) => {
+    selectedTab.value = target.value || selectedTab.value
+    if (target.value === 'browse' && browseTemplates.value.length === 0) {
+      await loadBrowse()
     }
   }
 </script>
@@ -163,7 +157,7 @@
   <div class="overflow-auto w-full h-full flex flex-col sm:flex-row p-0 sm:pl-5 sm:pr-8 gap-4 pb-4">
     <div class="sm:min-w-[240px] mt-4">
       <Listbox
-        @change="onMenuChange"
+        @change="onTabChange"
         v-model="selectedTabControl"
         :options="items"
         optionLabel="label"

From 8e7330aff6bbb8bdf9f799719e4ce0c7a613c347 Mon Sep 17 00:00:00 2001
From: Fagner Araujo <ifgr.fagner@gmail.com>
Date: Wed, 17 Jan 2024 11:21:28 -0300
Subject: [PATCH 118/135] [NO-ISSUE] feat: metrics foundation (#448)

* chore: copy content from old branch to new and resolve conflicts

* test: [metrics] - set domain metrics tests as TODO to be resolved

* refactor: [metrics] remove unused metrics block

* refactor: [metrics] move dashboard contants to services dir

* feat: [metrics] create metrics groups service

* feat: [metrics] create metrics products service

* feat: [metrics] export metrics groups and metrics products services

* refactor: [metrics] update metrics route to receive page and dashboard ids in params

* test: [metrics] create metrics groups service test

* test: [metrics] create metrics products service test

* refactor: [metrics] rename some dashboard components to match convention

* refactor: [metrics] adjust tabs page to handle new structure of services

* refactor: [metrics] adjust interval-filter-block logic to handle dates properly

* feat: [metrics] create playground opener helper

* test: [metrics] create playground opener helper test

* refactor: [metrics] set content-filter-block as disabled to act as dummy

* refactor: [metrics] add content filter and interval filter blocks to metrics view

* refactor: [metrics] split pagesDasboards from dashboards constants to improve readability

* refactor: [metrics] improve dashboard-panel code to handle tabs display

* refactor: [metrics] improve dashboard-panel code to handle tabs display

* feat: [metrics] implement new dashboard panel

* test: [metrics] create dashboard services test

* chore: [hooks] remove dist after pre-push

* test: [metrics] fix dashboard services test

* feat: [metrics] adjust responsiveness in products tabs

* feat: [metrics] adjust responsiveness in content filter

* Update src/tests/services/metrics-services/search-domains-metrics-service.test.js

Co-authored-by: William <william.tome@azion.com>

---------

Co-authored-by: william-tome <william.tome@azion.com>
---
 .husky/pre-push                               |   2 +-
 src/helpers/index.js                          |   2 +
 src/helpers/metrics-playground-opener.js      |   3 +
 src/router/index.js                           |   5 +-
 src/router/routes/metrics-routes/index.js     |  25 +
 src/services/axios/makeBeholderGQL.js         |  10 +
 .../metrics-services/constants/dashboards.js  | 147 ++++
 .../metrics-services/constants/reports.js     | 793 ++++++++++++++++++
 .../fetch-data-from-beholder-service.js       |  27 +
 .../fetch-metrics-dashboards-service.js       |  25 +
 .../fetch-metrics-groups-service.js           |  13 +
 .../fetch-metrics-products-service.js         |  18 +
 src/services/metrics-services/index.js        |  13 +
 .../make-beholder-base-url.js                 |   3 +
 .../metrics-services/make-domains-base-url.js |   4 +
 .../search-domains-metrics-service.js         |  32 +
 .../helpers/metrics-playground-opener.test.js |  28 +
 .../services/axios/makeBeholderGQL.test.js    |  24 +
 .../fetch-data-from-beholder-service.test.js  | 104 +++
 .../fetch-metrics-dashboards-service.test.js  | 161 ++++
 .../fetch-metrics-groups-service.test.js      |  38 +
 .../fetch-metrics-products-service.test.js    |  75 ++
 .../search-domains-metrics-service.test.js    |  59 ++
 src/views/Metrics/MetricsView.vue             |  64 ++
 .../Metrics/blocks/content-filter-block.vue   |  42 +
 .../Metrics/blocks/dashboard-panel-block.vue  |  78 ++
 .../Metrics/blocks/interval-filter-block.vue  |  45 +
 src/views/Metrics/blocks/tabs-page-block.vue  |  93 ++
 .../Metrics/constants/date-time-interval.js   |  28 +
 vite.config.js                                |   9 +-
 30 files changed, 1966 insertions(+), 4 deletions(-)
 create mode 100644 src/helpers/metrics-playground-opener.js
 create mode 100644 src/router/routes/metrics-routes/index.js
 create mode 100644 src/services/axios/makeBeholderGQL.js
 create mode 100644 src/services/metrics-services/constants/dashboards.js
 create mode 100644 src/services/metrics-services/constants/reports.js
 create mode 100644 src/services/metrics-services/fetch-data-from-beholder-service.js
 create mode 100644 src/services/metrics-services/fetch-metrics-dashboards-service.js
 create mode 100644 src/services/metrics-services/fetch-metrics-groups-service.js
 create mode 100644 src/services/metrics-services/fetch-metrics-products-service.js
 create mode 100644 src/services/metrics-services/index.js
 create mode 100644 src/services/metrics-services/make-beholder-base-url.js
 create mode 100644 src/services/metrics-services/make-domains-base-url.js
 create mode 100644 src/services/metrics-services/search-domains-metrics-service.js
 create mode 100644 src/tests/helpers/metrics-playground-opener.test.js
 create mode 100644 src/tests/services/axios/makeBeholderGQL.test.js
 create mode 100644 src/tests/services/metrics-services/fetch-data-from-beholder-service.test.js
 create mode 100644 src/tests/services/metrics-services/fetch-metrics-dashboards-service.test.js
 create mode 100644 src/tests/services/metrics-services/fetch-metrics-groups-service.test.js
 create mode 100644 src/tests/services/metrics-services/fetch-metrics-products-service.test.js
 create mode 100644 src/tests/services/metrics-services/search-domains-metrics-service.test.js
 create mode 100644 src/views/Metrics/MetricsView.vue
 create mode 100644 src/views/Metrics/blocks/content-filter-block.vue
 create mode 100644 src/views/Metrics/blocks/dashboard-panel-block.vue
 create mode 100644 src/views/Metrics/blocks/interval-filter-block.vue
 create mode 100644 src/views/Metrics/blocks/tabs-page-block.vue
 create mode 100644 src/views/Metrics/constants/date-time-interval.js

diff --git a/.husky/pre-push b/.husky/pre-push
index 3c4b4e868..e75f7b5e8 100755
--- a/.husky/pre-push
+++ b/.husky/pre-push
@@ -2,4 +2,4 @@
 . "$(dirname -- "$0")/_/husky.sh"
 
 yarn build
-
+rm -rf dist
diff --git a/src/helpers/index.js b/src/helpers/index.js
index a43dca729..88e24d92b 100644
--- a/src/helpers/index.js
+++ b/src/helpers/index.js
@@ -12,6 +12,7 @@ import { clipboardWrite } from './clipboard'
 import { getEnvironmentFromUrl } from './get-environment-from-url'
 import { getFirstApiError } from './get-first-api-error'
 import InviteSession from './invite-session'
+import { metricsPlaygroundOpener } from './metrics-playground-opener'
 import { parseCamelToSnake, parseSnakeToCamel } from './parse-api-body'
 import { themeSelect } from './theme-select'
 
@@ -24,6 +25,7 @@ export {
   documentationGuideProducts,
   getEnvironmentFromUrl,
   getFirstApiError,
+  metricsPlaygroundOpener,
   openAPIDocumentation,
   openContactSupport,
   openDocumentation,
diff --git a/src/helpers/metrics-playground-opener.js b/src/helpers/metrics-playground-opener.js
new file mode 100644
index 000000000..d61fc35b9
--- /dev/null
+++ b/src/helpers/metrics-playground-opener.js
@@ -0,0 +1,3 @@
+export const metricsPlaygroundOpener = () => {
+  window.open('https://azion.com', '_blank')
+}
diff --git a/src/router/index.js b/src/router/index.js
index 64fa19085..3ea000bdf 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -17,6 +17,7 @@ import { homeRoutes } from '@routes/home-routes'
 import { intelligentDnsRoutes } from '@routes/intelligent-dns-routes'
 import { loginRoutes } from '@routes/login-routes'
 import { marketplaceRoutes } from '@routes/marketplace-routes'
+import { metricsRoutes } from '@routes/metrics-routes'
 import { mfaRoutes } from '@routes/mfa-routes'
 import { networkListsRoutes } from '@routes/network-lists-routes'
 import { passwordRoutes } from '@routes/password-routes'
@@ -30,6 +31,7 @@ import { usersListsRoutes } from '@routes/users-routes'
 import { variablesRoutes } from '@routes/variables-routes'
 import { wafRulesRoutes } from '@routes/waf-rules-routes'
 import { settingsRoutes } from '@routes/your-settings-routes'
+
 import { createRouter, createWebHistory } from 'vue-router'
 
 import afterEachRoute from './hooks/afterEachRoute'
@@ -68,7 +70,8 @@ const router = createRouter({
     marketplaceRoutes,
     accountRoutes,
     settingsRoutes,
-    wafRulesRoutes
+    wafRulesRoutes,
+    metricsRoutes
   ].concat(errorRoutes)
 })
 
diff --git a/src/router/routes/metrics-routes/index.js b/src/router/routes/metrics-routes/index.js
new file mode 100644
index 000000000..dcca6a443
--- /dev/null
+++ b/src/router/routes/metrics-routes/index.js
@@ -0,0 +1,25 @@
+import { metricsPlaygroundOpener } from '@/helpers'
+import * as MetricsServices from '@/services/metrics-services'
+
+/** @type {import('vue-router').RouteRecordRaw} */
+export const metricsRoutes = {
+  path: '/metrics/:pageId?/:dashboardId?',
+  name: 'metrics',
+  component: () => import('@views/Metrics/MetricsView.vue'),
+  props: {
+    playgroundOpener: metricsPlaygroundOpener,
+    fetchDataFromBeholderService: MetricsServices.fetchDataFromBeholderService,
+    searchDomainsMetricsService: MetricsServices.searchDomainsMetricsService,
+    fetchMetricsGroupsService: MetricsServices.fetchMetricsGroupsService,
+    fetchMetricsProductsService: MetricsServices.fetchMetricsProductsService,
+    fetchMetricsDashboardsService: MetricsServices.fetchMetricsDashboardsService
+  },
+  meta: {
+    breadCrumbs: [
+      {
+        label: 'Metrics',
+        to: '/metrics'
+      }
+    ]
+  }
+}
diff --git a/src/services/axios/makeBeholderGQL.js b/src/services/axios/makeBeholderGQL.js
new file mode 100644
index 000000000..bca430872
--- /dev/null
+++ b/src/services/axios/makeBeholderGQL.js
@@ -0,0 +1,10 @@
+import axios from 'axios'
+const baseURL = '/metrics/graphql'
+
+axios.defaults.headers.common['Content-Type'] = 'application/json; version=3'
+
+const api = axios.create({
+  baseURL
+})
+
+export default api
diff --git a/src/services/metrics-services/constants/dashboards.js b/src/services/metrics-services/constants/dashboards.js
new file mode 100644
index 000000000..4cbc56254
--- /dev/null
+++ b/src/services/metrics-services/constants/dashboards.js
@@ -0,0 +1,147 @@
+const PAGES_DASHBOARDS = {
+  build: [
+    {
+      id: 1,
+      label: 'Edge Applications',
+      url: 'edge-applications',
+      groupId: 1,
+      dashboards: [
+        {
+          id: 357548608166298191n,
+          label: 'Data Transferred',
+          url: 'data-transferred',
+          dataset: 'httpMetrics'
+        },
+        {
+          id: 357548623571976783n,
+          label: 'Requests',
+          url: 'requests',
+          dataset: 'httpMetrics'
+        },
+        {
+          id: 357548642810200653n,
+          label: 'Status Codes',
+          url: 'status-codes',
+          dataset: 'httpMetrics'
+        },
+        {
+          id: 357549179454620239n,
+          label: 'Bandwidth Saving',
+          url: 'bandwidth-saving',
+          dataset: 'httpMetrics'
+        }
+      ]
+    },
+    {
+      id: 2,
+      label: 'L2 Caching',
+      url: 'l2-caching',
+      groupId: 1,
+      dashboards: [
+        {
+          id: 357549371218199219n,
+          label: 'caching-offload',
+          url: 'caching-offload',
+          dataset: 'l2CacheMetrics'
+        }
+      ]
+    },
+    {
+      id: 3,
+      label: 'Edge Functions',
+      url: 'edge-functions',
+      groupId: 1,
+      dashboards: [
+        {
+          id: 357549319029523021n,
+          label: 'Invocations',
+          url: 'invocations',
+          dataset: 'edgeFunctionsMetrics'
+        }
+      ]
+    },
+    {
+      id: 4,
+      label: 'Image Processor',
+      url: 'image-processor',
+      groupId: 1,
+      dashboards: [
+        {
+          id: 357549422933967445n,
+          label: 'Requests',
+          url: 'requests',
+          dataset: 'imagesProcessedMetrics'
+        }
+      ]
+    }
+  ],
+  secure: [
+    {
+      id: 6,
+      label: 'WAF',
+      url: 'waf',
+      groupId: 2,
+      dashboards: [
+        {
+          id: 357548675837198933n,
+          label: 'Threats',
+          url: 'threats',
+          dataset: 'httpMetrics'
+        }
+      ]
+    },
+    {
+      id: 7,
+      label: 'Intelligent DNS',
+      url: 'intelligent-dns',
+      groupId: 2,
+      dashboards: [
+        {
+          id: 357549371218199119n,
+          label: 'Standard Queries',
+          url: 'standard-queries',
+          dataset: 'idnsQueriesMetrics'
+        }
+      ]
+    }
+  ],
+  observe: [
+    {
+      id: 8,
+      label: 'Data Streaming',
+      url: 'data-streaming',
+      groupId: 3,
+      dashboards: [
+        {
+          id: 352149476039721549n,
+          label: 'Data Streamed',
+          url: 'requests',
+          dataset: 'dataStreamedMetrics'
+        }
+      ]
+    }
+  ]
+}
+
+const GROUP_DASHBOARDS = [
+  {
+    label: 'Build',
+    value: 'build',
+    id: 1,
+    pagesDashboards: PAGES_DASHBOARDS.build
+  },
+  {
+    label: 'Secure',
+    value: 'secure',
+    id: 2,
+    pagesDashboards: PAGES_DASHBOARDS.secure
+  },
+  {
+    label: 'Observe',
+    value: 'observe',
+    id: 3,
+    pagesDashboards: PAGES_DASHBOARDS.observe
+  }
+]
+
+export default GROUP_DASHBOARDS
diff --git a/src/services/metrics-services/constants/reports.js b/src/services/metrics-services/constants/reports.js
new file mode 100644
index 000000000..d3846b436
--- /dev/null
+++ b/src/services/metrics-services/constants/reports.js
@@ -0,0 +1,793 @@
+const REPORTS = [
+  /**
+   * BUILD
+   * Edge Applications - Data Transferred
+   */
+  {
+    id: 356217848089018959n,
+    label: 'Edge Caching',
+    description: 'edge_applications.data_transferred.edge_caching.description',
+    aggregationType: 'sum',
+    columns: 3,
+    type: 'line',
+    xAxis: 'ts',
+    isTopX: false,
+    rotated: false,
+    dataUnit: 'bytes',
+    dataset: 'httpMetrics',
+    limit: 5000,
+    fields: ['dataTransferredTotal', 'dataTransferredOut', 'dataTransferredIn'],
+    groupBy: [],
+    orderDirection: 'ASC',
+    dashboardId: 357548608166298191n
+  },
+  {
+    id: 356220228059791957n,
+    label: 'Edge Offload',
+    description: 'edge_applications.data_transferred.edge_offload.description',
+    aggregationType: 'avg',
+    columns: 3,
+    type: 'line',
+    xAxis: 'ts',
+    isTopX: false,
+    rotated: false,
+    dataUnit: 'percentage',
+    dataset: 'httpMetrics',
+    limit: 5000,
+    fields: ['offload'],
+    groupBy: [],
+    orderDirection: 'ASC',
+    dashboardId: 357548608166298191n,
+    colorSet: 'REGULAR_COLOR_SET',
+    maxYAxis: 100
+  },
+  {
+    id: 356220625185931855n,
+    label: 'Saved Data',
+    description: 'edge_applications.data_transferred.saved_data.description',
+    aggregationType: 'sum',
+    columns: 3,
+    type: 'line',
+    xAxis: 'ts',
+    isTopX: false,
+    rotated: false,
+    dataset: 'httpMetrics',
+    dataUnit: 'bytes',
+    limit: 5000,
+    fields: ['savedData'],
+    groupBy: [],
+    orderDirection: 'ASC',
+    dashboardId: 357548608166298191n,
+    colorSet: 'REGULAR_COLOR_SET'
+  },
+  {
+    id: 356220671983878733n,
+    label: 'Missed Data',
+    description: 'edge_applications.data_transferred.missed_data.description',
+    aggregationType: 'sum',
+    columns: 3,
+    type: 'line',
+    xAxis: 'ts',
+    isTopX: false,
+    rotated: false,
+    dataUnit: 'bytes',
+    dataset: 'httpMetrics',
+    limit: 5000,
+    fields: ['missedData'],
+    groupBy: [],
+    orderDirection: 'ASC',
+    dashboardId: 357548608166298191n,
+    colorSet: 'INVERTED_COLOR_SET'
+  },
+  {
+    id: 357550842741523030n,
+    label: 'Total Bandwidth Usage',
+    description: 'edge_applications.data_transferred.total_bandwidth_usage.description',
+    aggregationType: 'avg',
+    columns: 3,
+    type: 'line',
+    xAxis: 'ts',
+    isTopX: false,
+    rotated: false,
+    dataUnit: 'bitsPerSecond',
+    dataset: 'httpMetrics',
+    limit: 5000,
+    fields: ['bandwidthTotal'],
+    groupBy: [],
+    orderDirection: 'ASC',
+    dashboardId: 357548608166298191n,
+    colorSet: 'REGULAR_COLOR_SET'
+  },
+  {
+    id: 357550842741523029n,
+    label: 'Bandwidth Offloaded',
+    description: 'edge_applications.data_transferred.bandwidth_offloaded.description',
+    aggregationType: 'avg',
+    columns: 3,
+    type: 'line',
+    xAxis: 'ts',
+    isTopX: false,
+    rotated: false,
+    dataUnit: 'percentage',
+    dataset: 'httpMetrics',
+    limit: 5000,
+    fields: ['bandwidthOffload'],
+    groupBy: [],
+    orderDirection: 'ASC',
+    dashboardId: 357548608166298191n,
+    colorSet: 'REGULAR_COLOR_SET',
+    maxYAxis: 100
+  },
+  {
+    id: 357817189325079119n,
+    label: 'Saved Bandwidth',
+    description: 'edge_applications.data_transferred.saved_bandwidth.description',
+    aggregationType: 'avg',
+    columns: 3,
+    type: 'line',
+    xAxis: 'ts',
+    isTopX: false,
+    rotated: false,
+    dataUnit: 'bitsPerSecond',
+    dataset: 'httpMetrics',
+    limit: 5000,
+    fields: ['bandwidthSavedData'],
+    groupBy: [],
+    orderDirection: 'ASC',
+    dashboardId: 357548608166298191n,
+    colorSet: 'REGULAR_COLOR_SET'
+  },
+  {
+    id: 357817270971400783n,
+    label: 'Missed Bandwidth',
+    description: 'edge_applications.data_transferred.missed_bandwidth.description',
+    aggregationType: 'avg',
+    columns: 3,
+    type: 'line',
+    xAxis: 'ts',
+    isTopX: false,
+    rotated: false,
+    dataUnit: 'bitsPerSecond',
+    dataset: 'httpMetrics',
+    limit: 5000,
+    fields: ['bandwidthMissedData'],
+    groupBy: [],
+    orderDirection: 'ASC',
+    dashboardId: 357548608166298191n,
+    colorSet: 'INVERTED_COLOR_SET'
+  },
+  /**
+   * BUILD
+   * Edge Applications - Requests
+   */
+  {
+    id: 357822254142194261n,
+    label: 'Total Requests',
+    description: 'edge_applications.requests.total_requests.description',
+    aggregationType: 'sum',
+    columns: 3,
+    type: 'line',
+    xAxis: 'ts',
+    isTopX: false,
+    rotated: false,
+    dataset: 'httpMetrics',
+    dataUnit: 'count',
+    limit: 5000,
+    fields: ['edgeRequestsTotal', 'httpsRequestsTotal', 'httpRequestsTotal'],
+    groupBy: [],
+    orderDirection: 'ASC',
+    dashboardId: 357548623571976783n
+  },
+  {
+    id: 357822606596899407n,
+    label: 'Requests Offloaded',
+    description: 'edge_applications.requests.requests_offloaded.description',
+    aggregationType: 'avg',
+    columns: 3,
+    type: 'line',
+    xAxis: 'ts',
+    isTopX: false,
+    rotated: false,
+    dataset: 'httpMetrics',
+    dataUnit: 'percentage',
+    limit: 5000,
+    fields: ['requestsOffloaded'],
+    groupBy: [],
+    orderDirection: 'ASC',
+    dashboardId: 357548623571976783n,
+    colorSet: 'REGULAR_COLOR_SET',
+    maxYAxis: 100
+  },
+  {
+    id: 357823841952596559n,
+    label: 'Saved Requests',
+    description: 'edge_applications.requests.saved_requests.description',
+    aggregationType: 'sum',
+    columns: 3,
+    type: 'line',
+    xAxis: 'ts',
+    isTopX: false,
+    rotated: false,
+    dataset: 'httpMetrics',
+    dataUnit: 'count',
+    limit: 5000,
+    fields: ['savedRequests'],
+    groupBy: [],
+    orderDirection: 'ASC',
+    dashboardId: 357548623571976783n,
+    colorSet: 'REGULAR_COLOR_SET'
+  },
+  {
+    id: 357823947031446101n,
+    label: 'Missed Requests',
+    description: 'edge_applications.requests.missed_requests.description',
+    aggregationType: 'sum',
+    columns: 3,
+    type: 'line',
+    xAxis: 'ts',
+    isTopX: false,
+    rotated: false,
+    dataset: 'httpMetrics',
+    dataUnit: 'count',
+    limit: 5000,
+    fields: ['missedRequests'],
+    groupBy: [],
+    orderDirection: 'ASC',
+    dashboardId: 357548623571976783n,
+    colorSet: 'INVERTED_COLOR_SET'
+  },
+  {
+    id: 357824034956640847n,
+    label: 'Total Requests per Second',
+    description: 'edge_applications.requests.total_requests_per_second.description',
+    aggregationType: 'avg',
+    columns: 3,
+    type: 'line',
+    xAxis: 'ts',
+    isTopX: false,
+    rotated: false,
+    dataUnit: 'perSecond',
+    dataset: 'httpMetrics',
+    limit: 5000,
+    fields: ['edgeRequestsTotalPerSecond'],
+    groupBy: [],
+    orderDirection: 'ASC',
+    dashboardId: 357548623571976783n,
+    colorSet: 'REGULAR_COLOR_SET'
+  },
+  {
+    id: 357824230790791757n,
+    label: 'Requests per Second Offloaded',
+    description: 'edge_applications.requests.requests_per_second_offloaded.description',
+    aggregationType: 'avg',
+    columns: 3,
+    type: 'line',
+    xAxis: 'ts',
+    isTopX: false,
+    rotated: false,
+    dataUnit: 'percentage',
+    dataset: 'httpMetrics',
+    limit: 5000,
+    fields: ['requestsPerSecondOffloaded'],
+    groupBy: [],
+    orderDirection: 'ASC',
+    dashboardId: 357548623571976783n,
+    colorSet: 'REGULAR_COLOR_SET',
+    maxYAxis: 100
+  },
+  {
+    id: 357824321753711189n,
+    label: 'Saved Requests per Second',
+    description: 'edge_applications.requests.saved_requests_per_second.description',
+    aggregationType: 'avg',
+    columns: 3,
+    type: 'line',
+    xAxis: 'ts',
+    isTopX: false,
+    rotated: false,
+    dataUnit: 'perSecond',
+    dataset: 'httpMetrics',
+    limit: 5000,
+    fields: ['savedRequestsPerSecond'],
+    groupBy: [],
+    orderDirection: 'ASC',
+    dashboardId: 357548623571976783n,
+    colorSet: 'REGULAR_COLOR_SET'
+  },
+  {
+    id: 357824572487107151n,
+    label: 'Missed Requests per Second',
+    description: 'edge_applications.requests.missed_requests_per_second.description',
+    aggregationType: 'avg',
+    columns: 3,
+    type: 'line',
+    xAxis: 'ts',
+    isTopX: false,
+    rotated: false,
+    dataUnit: 'perSecond',
+    dataset: 'httpMetrics',
+    limit: 5000,
+    fields: ['missedRequestsPerSecond'],
+    groupBy: [],
+    orderDirection: 'ASC',
+    dashboardId: 357548623571976783n,
+    colorSet: 'INVERTED_COLOR_SET'
+  },
+  {
+    id: 357825388709151309n,
+    label: 'Requests by Method',
+    description: 'edge_applications.http_methods.requests_by_method.description',
+    aggregationType: 'sum',
+    columns: 3,
+    type: 'line',
+    xAxis: 'ts',
+    isTopX: false,
+    rotated: false,
+    dataset: 'httpMetrics',
+    dataUnit: 'count',
+    limit: 5000,
+    fields: [
+      'requestsHttpMethodGet',
+      'requestsHttpMethodPost',
+      'requestsHttpMethodHead',
+      'requestsHttpMethodOthers'
+    ],
+    groupBy: [],
+    orderDirection: 'ASC',
+    dashboardId: 357548623571976783n
+  },
+  /**
+   * BUILD
+   * Edge Applications - Status Codes
+   */
+  {
+    id: 357824919768138325n,
+    label: 'HTTP Status Codes 2XX',
+    description: 'edge_applications.status_codes.http_status_codes_2xx.description',
+    aggregationType: 'sum',
+    columns: 3,
+    type: 'line',
+    xAxis: 'ts',
+    isTopX: false,
+    rotated: false,
+    dataset: 'httpMetrics',
+    dataUnit: 'count',
+    limit: 5000,
+    fields: [
+      'requestsStatusCode200',
+      'requestsStatusCode204',
+      'requestsStatusCode206',
+      'requestsStatusCode2xx'
+    ],
+    groupBy: [],
+    orderDirection: 'ASC',
+    dashboardId: 357548642810200653n
+  },
+  {
+    id: 357825000731837013n,
+    label: 'HTTP Status Codes 3XX',
+    description: 'edge_applications.status_codes.http_status_codes_3xx.description',
+    aggregationType: 'sum',
+    columns: 3,
+    type: 'line',
+    xAxis: 'ts',
+    isTopX: false,
+    rotated: false,
+    dataset: 'httpMetrics',
+    dataUnit: 'count',
+    limit: 5000,
+    fields: [
+      'requestsStatusCode301',
+      'requestsStatusCode302',
+      'requestsStatusCode304',
+      'requestsStatusCode3xx'
+    ],
+    groupBy: [],
+    orderDirection: 'ASC',
+    dashboardId: 357548642810200653n
+  },
+  {
+    id: 357825058049098319n,
+    label: 'HTTP Status Codes 4XX',
+    description: 'edge_applications.status_codes.http_status_codes_4xx.description',
+    aggregationType: 'sum',
+    columns: 3,
+    type: 'line',
+    xAxis: 'ts',
+    isTopX: false,
+    rotated: false,
+    dataset: 'httpMetrics',
+    dataUnit: 'count',
+    limit: 5000,
+    fields: [
+      'requestsStatusCode400',
+      'requestsStatusCode403',
+      'requestsStatusCode404',
+      'requestsStatusCode4xx'
+    ],
+    groupBy: [],
+    orderDirection: 'ASC',
+    dashboardId: 357548642810200653n
+  },
+  {
+    id: 357825090550760015n,
+    label: 'HTTP Status Codes 5XX',
+    description: 'edge_applications.status_codes.http_status_codes_5xx.description',
+    aggregationType: 'sum',
+    columns: 3,
+    type: 'line',
+    xAxis: 'ts',
+    isTopX: false,
+    rotated: false,
+    dataset: 'httpMetrics',
+    dataUnit: 'count',
+    limit: 5000,
+    fields: [
+      'requestsStatusCode500',
+      'requestsStatusCode502',
+      'requestsStatusCode503',
+      'requestsStatusCode5xx'
+    ],
+    groupBy: [],
+    orderDirection: 'ASC',
+    dashboardId: 357548642810200653n
+  },
+  /**
+   * BUILD
+   * Edge Applications - Bandwidth Saving
+   */
+  {
+    id: 357843490139275861n,
+    label: 'Bandwidth Saving',
+    description: 'edge_applications.bandwidth_saving.bandwidth_saving.description',
+    aggregationType: 'sum',
+    columns: 3,
+    type: 'line',
+    xAxis: 'ts',
+    isTopX: false,
+    rotated: false,
+    dataset: 'httpMetrics',
+    dataUnit: 'bytes',
+    limit: 5000,
+    fields: ['bandwidthImagesProcessedSavedData'],
+    groupBy: [],
+    orderDirection: 'ASC',
+    dashboardId: 357549179454620239n,
+    colorSet: 'REGULAR_COLOR_SET'
+  },
+  /**
+   * BUILD
+   * L2 Caching - Caching Offload
+   */
+  {
+    id: 357826217661956693n,
+    label: 'L2 Caching',
+    description: 'l2_caching.caching_offload.l2_caching.description',
+    aggregationType: 'sum',
+    columns: 3,
+    type: 'line',
+    xAxis: 'ts',
+    isTopX: false,
+    rotated: false,
+    dataUnit: 'bytes',
+    dataset: 'l2CacheMetrics',
+    groupBy: [],
+    limit: 5000,
+    fields: ['dataTransferredTotal', 'dataTransferredOut', 'dataTransferredIn'],
+    orderDirection: 'ASC',
+    dashboardId: 357549371218199219n
+  },
+  {
+    id: 357826288204907093n,
+    label: 'L2 Offload',
+    description: 'l2_caching.caching_offload.l2_offload.description',
+    aggregationType: 'avg',
+    columns: 3,
+    type: 'line',
+    xAxis: 'ts',
+    isTopX: false,
+    rotated: false,
+    dataUnit: 'percentage',
+    groupBy: [],
+    dataset: 'l2CacheMetrics',
+    limit: 5000,
+    fields: ['offload'],
+    orderDirection: 'ASC',
+    dashboardId: 357549371218199219n,
+    colorSet: 'REGULAR_COLOR_SET',
+    maxYAxis: 100
+  },
+  /**
+   * BUILD
+   * Edge Functions - Invocations
+   */
+  {
+    id: 357843490139298763n,
+    label: 'Total Invocations',
+    description: 'edge_functions.invocations.total_invocations.description',
+    aggregationType: 'sum',
+    columns: 3,
+    type: 'line',
+    xAxis: 'ts',
+    isTopX: false,
+    rotated: false,
+    dataset: 'edgeFunctionsMetrics',
+    dataUnit: 'count',
+    limit: 5000,
+    fields: ['edgeApplicationInvocations', 'edgeFirewallInvocations'],
+    groupBy: [],
+    orderDirection: 'ASC',
+    dashboardId: 357549319029523021n
+  },
+  /**
+   * BUILD
+   * Image Processor - Requests
+   */
+  {
+    id: 357844490139298789n,
+    label: 'Total Requests',
+    description: 'image_processor.requests.total_requests.description',
+    aggregationType: 'sum',
+    columns: 3,
+    type: 'line',
+    xAxis: 'ts',
+    isTopX: false,
+    rotated: false,
+    dataset: 'imagesProcessedMetrics',
+    dataUnit: 'count',
+    limit: 5000,
+    aggregations: [
+      {
+        aggregation: 'sum',
+        variable: 'requests'
+      }
+    ],
+    filters: {
+      or: {
+        status: 304,
+        statusRange: {
+          begin: 199,
+          end: 299
+        }
+      }
+    },
+    groupBy: [],
+    orderDirection: 'ASC',
+    dashboardId: 357549422933967445n,
+    colorSet: 'REGULAR_COLOR_SET'
+  },
+  {
+    id: 357843490195298789n,
+    label: 'Total Requests per Second',
+    description: 'image_processor.requests.total_requests_per_second.description',
+    aggregationType: 'sum',
+    columns: 3,
+    type: 'line',
+    xAxis: 'ts',
+    isTopX: false,
+    rotated: false,
+    dataset: 'imagesProcessedMetrics',
+    dataUnit: 'perSecond',
+    limit: 5000,
+    filters: {
+      or: {
+        status: 304,
+        statusRange: {
+          begin: 200,
+          end: 299
+        }
+      }
+    },
+    aggregations: [
+      {
+        aggregation: 'rate',
+        variable: 'requests'
+      }
+    ],
+    groupBy: [],
+    orderDirection: 'ASC',
+    dashboardId: 357549422933967445n,
+    colorSet: 'REGULAR_COLOR_SET'
+  },
+  /**
+   * SECURE
+   * Overview - Request
+   */
+  {
+    id: 357842594513814093n,
+    label: 'Total Attacks',
+    description: '',
+    aggregationType: 'sum',
+    columns: 1,
+    type: 'line',
+    xAxis: 'ts',
+    isTopX: false,
+    rotated: false,
+    dataset: 'httpMetrics',
+    limit: 5000,
+    groupBy: [],
+    orderDirection: 'ASC',
+    dashboardId: 357548675837199999n,
+    colorSet: 'INVERTED_COLOR_SET'
+  },
+  /**
+   * SECURE
+   * WAF - threats
+   */
+  {
+    id: 357842594513814093n,
+    label: 'Threats vs Requests',
+    description: 'edge_applications.waf.threats_vs_requests.description',
+    aggregationType: 'sum',
+    columns: 3,
+    type: 'line',
+    xAxis: 'ts',
+    isTopX: false,
+    rotated: false,
+    dataset: 'httpMetrics',
+    dataUnit: 'count',
+    limit: 5000,
+    fields: ['wafRequestsAllowed', 'wafRequestsBlocked', 'wafRequestsThreat'],
+    groupBy: [],
+    orderDirection: 'ASC',
+    dashboardId: 357548675837198933n
+  },
+  {
+    id: 357842775438262861n,
+    label: 'Cross-Site scripting (XSS) Threats',
+    description: 'edge_applications.waf.cross_site_scripting_xss_threats.description',
+    aggregationType: 'sum',
+    columns: 3,
+    type: 'line',
+    xAxis: 'ts',
+    isTopX: false,
+    rotated: false,
+    dataset: 'httpMetrics',
+    dataUnit: 'count',
+    limit: 5000,
+    fields: ['wafRequestsXssAttacks'],
+    groupBy: [],
+    orderDirection: 'ASC',
+    dashboardId: 357548675837198933n,
+    colorSet: 'INVERTED_COLOR_SET'
+  },
+  {
+    id: 357842594513814012n,
+    label: 'Remote File Inclusion (RFI) Threats',
+    description: 'edge_applications.waf.remote_file_inclusion_rfi_threats.description',
+    aggregationType: 'sum',
+    columns: 3,
+    type: 'line',
+    xAxis: 'ts',
+    isTopX: false,
+    rotated: false,
+    dataset: 'httpMetrics',
+    dataUnit: 'count',
+    limit: 5000,
+    fields: ['wafRequestsRfiAttacks'],
+    groupBy: [],
+    orderDirection: 'ASC',
+    dashboardId: 357548675837198933n,
+    colorSet: 'INVERTED_COLOR_SET'
+  },
+  {
+    id: 357842833307075157n,
+    label: 'SQL Injection Threats',
+    description: 'edge_applications.waf.sql_injection_threats.description',
+    aggregationType: 'sum',
+    columns: 3,
+    type: 'line',
+    xAxis: 'ts',
+    isTopX: false,
+    rotated: false,
+    dataset: 'httpMetrics',
+    dataUnit: 'count',
+    limit: 5000,
+    fields: ['wafRequestsSqlAttacks'],
+    groupBy: [],
+    orderDirection: 'ASC',
+    dashboardId: 357548675837198933n,
+    colorSet: 'INVERTED_COLOR_SET'
+  },
+  {
+    id: 357842851576414805n,
+    label: 'Other Threats',
+    description: 'edge_applications.waf.other_threats.description',
+    aggregationType: 'sum',
+    columns: 3,
+    type: 'line',
+    xAxis: 'ts',
+    isTopX: false,
+    rotated: false,
+    dataset: 'httpMetrics',
+    dataUnit: 'count',
+    limit: 5000,
+    fields: ['wafRequestsOthersAttacks'],
+    groupBy: [],
+    orderDirection: 'ASC',
+    dashboardId: 357548675837198933n,
+    colorSet: 'INVERTED_COLOR_SET'
+  },
+  /**
+   * SECURE
+   * Intelligent DNS - Standard Queries
+   */
+  {
+    id: 357843490139298789n,
+    label: 'Total Queries',
+    description: 'intelligent_dns.standard_queries.total_queries.description',
+    aggregationType: 'sum',
+    columns: 3,
+    type: 'line',
+    xAxis: 'ts',
+    isTopX: false,
+    rotated: false,
+    dataset: 'idnsQueriesMetrics',
+    dataUnit: 'count',
+    limit: 5000,
+    aggregations: [
+      {
+        aggregation: 'sum',
+        variable: 'requests'
+      }
+    ],
+    groupBy: [],
+    orderDirection: 'ASC',
+    dashboardId: 357549371218199119n,
+    colorSet: 'REGULAR_COLOR_SET'
+  },
+  /**
+   * OBSERVE
+   * Data Streaming - Data Streamed
+   */
+  {
+    id: 352149351588430415n,
+    label: 'Total Data Streamed',
+    description: 'data_streaming.data_streamed.total_data.description',
+    aggregationType: 'sum',
+    columns: 3,
+    type: 'line',
+    xAxis: 'ts',
+    isTopX: false,
+    rotated: false,
+    dataUnit: 'bytes',
+    dataset: 'dataStreamedMetrics',
+    aggregations: [
+      {
+        aggregation: 'sum',
+        variable: 'dataStreamed'
+      }
+    ],
+    limit: 5000,
+    groupBy: [],
+    orderDirection: 'ASC',
+    dashboardId: 352149476039721549n,
+    colorSet: 'REGULAR_COLOR_SET'
+  },
+  {
+    id: 352234687543902797n,
+    label: 'Total Requests',
+    description: 'data_streaming.data_streaming_requests.total_requests.description',
+    aggregationType: 'sum',
+    columns: 3,
+    type: 'line',
+    xAxis: 'ts',
+    isTopX: false,
+    rotated: false,
+    dataUnit: 'count',
+    dataset: 'dataStreamedMetrics',
+    aggregations: [
+      {
+        aggregation: 'sum',
+        variable: 'streamedLines'
+      }
+    ],
+    limit: 5000,
+    groupBy: [],
+    orderDirection: 'ASC',
+    dashboardId: 352149476039721549n,
+    colorSet: 'REGULAR_COLOR_SET'
+  }
+]
+
+export default REPORTS
diff --git a/src/services/metrics-services/fetch-data-from-beholder-service.js b/src/services/metrics-services/fetch-data-from-beholder-service.js
new file mode 100644
index 000000000..ae2c9b53a
--- /dev/null
+++ b/src/services/metrics-services/fetch-data-from-beholder-service.js
@@ -0,0 +1,27 @@
+import { AxiosHttpClientAdapter, parseHttpResponse } from '../axios/AxiosHttpClientAdapter'
+import beholderGQL from '../axios/makeBeholderGQL'
+import { makeBeholderBaseUrl } from './make-beholder-base-url'
+
+export const fetchDataFromBeholderService = async ({ query, variables }) => {
+  let httpResponse = await AxiosHttpClientAdapter.request(
+    {
+      url: `${makeBeholderBaseUrl()}`,
+      method: 'POST',
+      body: {
+        query,
+        variables
+      }
+    },
+    beholderGQL
+  )
+
+  httpResponse = adapt(httpResponse)
+  return parseHttpResponse(httpResponse)
+}
+
+const adapt = (httpResponse) => {
+  return {
+    body: httpResponse.body,
+    statusCode: httpResponse.statusCode
+  }
+}
diff --git a/src/services/metrics-services/fetch-metrics-dashboards-service.js b/src/services/metrics-services/fetch-metrics-dashboards-service.js
new file mode 100644
index 000000000..82a0ac9d7
--- /dev/null
+++ b/src/services/metrics-services/fetch-metrics-dashboards-service.js
@@ -0,0 +1,25 @@
+import GROUP_DASHBOARDS from './constants/dashboards'
+
+export const fetchMetricsDashboardsService = async (groupId, productId) => {
+  if (!productId || !groupId) {
+    return Promise.resolve([])
+  }
+
+  const { pagesDashboards } = GROUP_DASHBOARDS.find((group) => group.id == groupId)
+
+  const products = pagesDashboards.filter((product) => product.id == productId)
+
+  if (!products.length) {
+    return Promise.resolve([])
+  }
+
+  const dashboards = products[0].dashboards.map((dashboard) => {
+    return {
+      id: dashboard.id,
+      label: dashboard.label,
+      dataset: dashboard.dataset
+    }
+  })
+
+  return Promise.resolve(dashboards)
+}
diff --git a/src/services/metrics-services/fetch-metrics-groups-service.js b/src/services/metrics-services/fetch-metrics-groups-service.js
new file mode 100644
index 000000000..224b2c80c
--- /dev/null
+++ b/src/services/metrics-services/fetch-metrics-groups-service.js
@@ -0,0 +1,13 @@
+import GROUP_DASHBOARDS from './constants/dashboards'
+
+export const fetchMetricsGroupsService = async () => {
+  const groups = GROUP_DASHBOARDS.map((group) => {
+    return {
+      label: group.label,
+      value: group.value,
+      id: group.id
+    }
+  })
+
+  return Promise.resolve(groups)
+}
diff --git a/src/services/metrics-services/fetch-metrics-products-service.js b/src/services/metrics-services/fetch-metrics-products-service.js
new file mode 100644
index 000000000..676d00f88
--- /dev/null
+++ b/src/services/metrics-services/fetch-metrics-products-service.js
@@ -0,0 +1,18 @@
+import GROUP_DASHBOARDS from './constants/dashboards'
+
+export const fetchMetricsProductsService = async (groupValue) => {
+  if (!groupValue) {
+    return Promise.resolve([])
+  }
+  const dashboads = GROUP_DASHBOARDS.find((group) => group.value === groupValue).pagesDashboards
+
+  const products = dashboads.map((dashboard) => {
+    return {
+      id: dashboard.id,
+      label: dashboard.label,
+      groupId: dashboard.groupId
+    }
+  })
+
+  return Promise.resolve(products)
+}
diff --git a/src/services/metrics-services/index.js b/src/services/metrics-services/index.js
new file mode 100644
index 000000000..cb876be8f
--- /dev/null
+++ b/src/services/metrics-services/index.js
@@ -0,0 +1,13 @@
+import { fetchDataFromBeholderService } from './fetch-data-from-beholder-service'
+import { fetchMetricsDashboardsService } from './fetch-metrics-dashboards-service'
+import { fetchMetricsGroupsService } from './fetch-metrics-groups-service'
+import { fetchMetricsProductsService } from './fetch-metrics-products-service'
+import { searchDomainsMetricsService } from './search-domains-metrics-service'
+
+export {
+  fetchDataFromBeholderService,
+  fetchMetricsDashboardsService,
+  fetchMetricsGroupsService,
+  fetchMetricsProductsService,
+  searchDomainsMetricsService
+}
diff --git a/src/services/metrics-services/make-beholder-base-url.js b/src/services/metrics-services/make-beholder-base-url.js
new file mode 100644
index 000000000..080b044bf
--- /dev/null
+++ b/src/services/metrics-services/make-beholder-base-url.js
@@ -0,0 +1,3 @@
+export const makeBeholderBaseUrl = () => {
+  return ''
+}
diff --git a/src/services/metrics-services/make-domains-base-url.js b/src/services/metrics-services/make-domains-base-url.js
new file mode 100644
index 000000000..809f6336b
--- /dev/null
+++ b/src/services/metrics-services/make-domains-base-url.js
@@ -0,0 +1,4 @@
+export const makeDomainsBaseUrl = () => {
+  const version = 'v3'
+  return `${version}/domains`
+}
diff --git a/src/services/metrics-services/search-domains-metrics-service.js b/src/services/metrics-services/search-domains-metrics-service.js
new file mode 100644
index 000000000..842598377
--- /dev/null
+++ b/src/services/metrics-services/search-domains-metrics-service.js
@@ -0,0 +1,32 @@
+import { AxiosHttpClientAdapter, parseHttpResponse } from '../axios/AxiosHttpClientAdapter'
+import { makeDomainsBaseUrl } from './make-domains-base-url'
+
+export const searchDomainsMetricsService = async ({ domainLike }) => {
+  const searchParams = makeSearchParams({ domainLike })
+  let httpResponse = await AxiosHttpClientAdapter.request({
+    url: `${makeDomainsBaseUrl()}?${searchParams.toString()}`,
+    method: 'GET'
+  })
+
+  httpResponse = adapt(httpResponse)
+
+  return parseHttpResponse(httpResponse)
+}
+
+const adapt = (httpResponse) => {
+  return {
+    body: {
+      results: httpResponse.results,
+      totalPages: httpResponse.totalPages
+    },
+    statusCode: httpResponse.statusCode
+  }
+}
+
+const makeSearchParams = ({ domainLike, pageSize = 20 }) => {
+  const searchParams = new URLSearchParams()
+  searchParams.set('page_size', pageSize)
+  searchParams.set('nameLike', domainLike)
+
+  return searchParams
+}
diff --git a/src/tests/helpers/metrics-playground-opener.test.js b/src/tests/helpers/metrics-playground-opener.test.js
new file mode 100644
index 000000000..94cde38fa
--- /dev/null
+++ b/src/tests/helpers/metrics-playground-opener.test.js
@@ -0,0 +1,28 @@
+import { metricsPlaygroundOpener } from '@/helpers'
+import { afterAll, describe, expect, it, vi } from 'vitest'
+
+vi.stubGlobal('window', {
+  open: (url) => url
+})
+
+const makeSut = () => {
+  const sut = metricsPlaygroundOpener
+
+  return {
+    sut
+  }
+}
+
+describe('metricsPlaygroundOpener', () => {
+  afterAll(() => {
+    vi.unstubAllGlobals()
+  })
+  it('should open a new window to metrics playground', () => {
+    const openWindowSpy = vi.spyOn(window, 'open')
+    const { sut } = makeSut()
+
+    sut()
+
+    expect(openWindowSpy).toHaveBeenCalledWith('https://azion.com', '_blank')
+  })
+})
diff --git a/src/tests/services/axios/makeBeholderGQL.test.js b/src/tests/services/axios/makeBeholderGQL.test.js
new file mode 100644
index 000000000..066871896
--- /dev/null
+++ b/src/tests/services/axios/makeBeholderGQL.test.js
@@ -0,0 +1,24 @@
+import makeBeholderGQL from '@services/axios/makeBeholderGQL'
+import { describe, expect, it } from 'vitest'
+
+const makeSut = () => {
+  const sut = makeBeholderGQL
+
+  return {
+    sut
+  }
+}
+
+describe('makeGraphQl', () => {
+  it('should have default headers set', () => {
+    const { sut } = makeSut()
+
+    expect(sut.defaults.headers.common['Accept']).toBe('application/json, text/plain, */*')
+  })
+
+  it('should have the correct base URL', () => {
+    const { sut } = makeSut()
+
+    expect(sut.defaults.baseURL).toBe('/metrics/graphql')
+  })
+})
diff --git a/src/tests/services/metrics-services/fetch-data-from-beholder-service.test.js b/src/tests/services/metrics-services/fetch-data-from-beholder-service.test.js
new file mode 100644
index 000000000..2a8353dfb
--- /dev/null
+++ b/src/tests/services/metrics-services/fetch-data-from-beholder-service.test.js
@@ -0,0 +1,104 @@
+import { AxiosHttpClientAdapter } from '@/services/axios/AxiosHttpClientAdapter'
+import beholderGQL from '@/services/axios/makeBeholderGQL'
+import { fetchDataFromBeholderService } from '@/services/metrics-services'
+import * as Errors from '@services/axios/errors'
+import { describe, expect, it, vi } from 'vitest'
+
+const fixtures = {
+  beholderQL: {
+    query: `query () {}`,
+    variables: { var1: '' }
+  },
+  resultMock: {
+    body: [1, 2],
+    statusCode: 200
+  }
+}
+
+const makeSut = () => {
+  const sut = fetchDataFromBeholderService
+
+  return {
+    sut
+  }
+}
+
+describe('MetricsServices', () => {
+  it('should call api with correct params', async () => {
+    const requestSpy = vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+      statusCode: 200,
+      body: { results: [] }
+    })
+    const { sut } = makeSut()
+
+    await sut(fixtures.beholderQL)
+
+    expect(requestSpy).toHaveBeenCalledWith(
+      {
+        url: '',
+        method: 'POST',
+        body: fixtures.beholderQL
+      },
+      beholderGQL
+    )
+  })
+
+  it('should return correct query', async () => {
+    vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+      statusCode: fixtures.resultMock.statusCode,
+      body: fixtures.resultMock.body
+    })
+    const { sut } = makeSut()
+
+    const result = await sut({
+      query: fixtures.beholderQL.query,
+      variables: fixtures.beholderQL.variables
+    })
+
+    expect(result).toEqual(fixtures.resultMock.body)
+  })
+
+  it.each([
+    {
+      statusCode: 400,
+      expectedError: new Errors.InvalidApiRequestError().message
+    },
+    {
+      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 statusCode $statusCode',
+    async ({ statusCode, expectedError }) => {
+      vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+        statusCode,
+        body: {
+          data: {
+            activityHistoryEvents: []
+          }
+        }
+      })
+      const { sut } = makeSut()
+
+      const response = sut({})
+
+      expect(response).rejects.toBe(expectedError)
+    }
+  )
+})
diff --git a/src/tests/services/metrics-services/fetch-metrics-dashboards-service.test.js b/src/tests/services/metrics-services/fetch-metrics-dashboards-service.test.js
new file mode 100644
index 000000000..251571580
--- /dev/null
+++ b/src/tests/services/metrics-services/fetch-metrics-dashboards-service.test.js
@@ -0,0 +1,161 @@
+import { fetchMetricsDashboardsService } from '@/services/metrics-services'
+import { describe, expect, it } from 'vitest'
+
+const fixtures = {
+  edgeApplications: [
+    {
+      id: 357548608166298191n,
+      label: 'Data Transferred',
+      dataset: 'httpMetrics'
+    },
+    {
+      id: 357548623571976783n,
+      label: 'Requests',
+      dataset: 'httpMetrics'
+    },
+    {
+      id: 357548642810200653n,
+      label: 'Status Codes',
+      dataset: 'httpMetrics'
+    },
+    {
+      id: 357549179454620239n,
+      label: 'Bandwidth Saving',
+      dataset: 'httpMetrics'
+    }
+  ],
+  l2Caching: [
+    {
+      id: 357549371218199219n,
+      label: 'caching-offload',
+      dataset: 'l2CacheMetrics'
+    }
+  ],
+  edgeFunctions: [
+    {
+      id: 357549319029523021n,
+      label: 'Invocations',
+      dataset: 'edgeFunctionsMetrics'
+    }
+  ],
+  imageProcessor: [
+    {
+      id: 357549422933967445n,
+      label: 'Requests',
+      dataset: 'imagesProcessedMetrics'
+    }
+  ],
+  waf: [
+    {
+      id: 357548675837198933n,
+      label: 'Threats',
+      dataset: 'httpMetrics'
+    }
+  ],
+  intelligentDns: [
+    {
+      id: 357549371218199119n,
+      label: 'Standard Queries',
+      dataset: 'idnsQueriesMetrics'
+    }
+  ],
+  dataStreaming: [
+    {
+      id: 352149476039721549n,
+      label: 'Data Streamed',
+      dataset: 'dataStreamedMetrics'
+    }
+  ]
+}
+
+const makeSut = () => {
+  const sut = fetchMetricsDashboardsService
+
+  return {
+    sut
+  }
+}
+
+const scenarios = [
+  {
+    group: 'build',
+    page: 'edgeApplications',
+    groupId: 1,
+    pageId: 1,
+    expected: fixtures.edgeApplications
+  },
+  {
+    group: 'build',
+    page: 'l2Caching',
+    groupId: 1,
+    pageId: 2,
+    expected: fixtures.l2Caching
+  },
+  {
+    group: 'build',
+    page: 'edgeFunctions',
+    groupId: 1,
+    pageId: 3,
+    expected: fixtures.edgeFunctions
+  },
+  {
+    group: 'build',
+    page: 'imageProcessor',
+    groupId: 1,
+    pageId: 4,
+    expected: fixtures.imageProcessor
+  },
+  {
+    group: 'secure',
+    page: 'waf',
+    groupId: 2,
+    pageId: 6,
+    expected: fixtures.waf
+  },
+  {
+    group: 'secure',
+    page: 'intelligentDns',
+    groupId: 2,
+    pageId: 7,
+    expected: fixtures.intelligentDns
+  },
+  {
+    group: 'observe',
+    page: 'dataStreaming',
+    groupId: 3,
+    pageId: 8,
+    expected: fixtures.dataStreaming
+  }
+]
+
+describe('MetricsServices', () => {
+  it.each(scenarios)(
+    'should return a list of dashboards within %group group and %page page',
+    async ({ groupId, pageId, expected }) => {
+      const { sut } = makeSut()
+
+      const dashboards = await sut(groupId, pageId)
+
+      expect(dashboards).toEqual(expected)
+    }
+  )
+
+  it.each([
+    { group: 1, page: 0, expected: [] },
+    { group: 0, page: 1, expected: [] }
+  ])('should return an empty list on not found group or page', async () => {
+    const { sut } = makeSut()
+
+    const dashboards = await sut()
+
+    expect(dashboards).toEqual([])
+  })
+
+  it('should return an empty list on undefined group', async () => {
+    const { sut } = makeSut()
+
+    const dashboards = await sut()
+
+    expect(dashboards).toEqual([])
+  })
+})
diff --git a/src/tests/services/metrics-services/fetch-metrics-groups-service.test.js b/src/tests/services/metrics-services/fetch-metrics-groups-service.test.js
new file mode 100644
index 000000000..311aaa1d5
--- /dev/null
+++ b/src/tests/services/metrics-services/fetch-metrics-groups-service.test.js
@@ -0,0 +1,38 @@
+import { fetchMetricsGroupsService } from '@/services/metrics-services'
+import { describe, expect, it } from 'vitest'
+
+const fixtures = [
+  {
+    id: 1,
+    label: 'Build',
+    value: 'build'
+  },
+  {
+    id: 2,
+    label: 'Secure',
+    value: 'secure'
+  },
+  {
+    id: 3,
+    label: 'Observe',
+    value: 'observe'
+  }
+]
+
+const makeSut = () => {
+  const sut = fetchMetricsGroupsService
+
+  return {
+    sut
+  }
+}
+
+describe('MetricsServices', () => {
+  it('should return a list of groups with correct values', async () => {
+    const { sut } = makeSut()
+
+    const groups = await sut()
+
+    expect(groups).toEqual(fixtures)
+  })
+})
diff --git a/src/tests/services/metrics-services/fetch-metrics-products-service.test.js b/src/tests/services/metrics-services/fetch-metrics-products-service.test.js
new file mode 100644
index 000000000..89484b787
--- /dev/null
+++ b/src/tests/services/metrics-services/fetch-metrics-products-service.test.js
@@ -0,0 +1,75 @@
+import { fetchMetricsProductsService } from '@/services/metrics-services'
+import { describe, expect, it } from 'vitest'
+
+const fixtures = {
+  build: [
+    {
+      id: 1,
+      label: 'Edge Applications',
+      groupId: 1
+    },
+    {
+      id: 2,
+      label: 'L2 Caching',
+      groupId: 1
+    },
+    {
+      id: 3,
+      label: 'Edge Functions',
+      groupId: 1
+    },
+    {
+      id: 4,
+      label: 'Image Processor',
+      groupId: 1
+    }
+  ],
+  secure: [
+    {
+      id: 6,
+      label: 'WAF',
+      groupId: 2
+    },
+    {
+      id: 7,
+      label: 'Intelligent DNS',
+      groupId: 2
+    }
+  ],
+  observe: [
+    {
+      id: 8,
+      label: 'Data Streaming',
+      groupId: 3
+    }
+  ]
+}
+
+const makeSut = () => {
+  const sut = fetchMetricsProductsService
+
+  return {
+    sut
+  }
+}
+
+describe('MetricsServices', () => {
+  it.each(['build', 'secure', 'observe'])(
+    'should return a list of products within %s group',
+    async (prop) => {
+      const { sut } = makeSut()
+
+      const products = await sut(prop)
+
+      expect(products).toEqual(fixtures[prop])
+    }
+  )
+
+  it('should return an empty list on undefined group', async () => {
+    const { sut } = makeSut()
+
+    const products = await sut()
+
+    expect(products).toEqual([])
+  })
+})
diff --git a/src/tests/services/metrics-services/search-domains-metrics-service.test.js b/src/tests/services/metrics-services/search-domains-metrics-service.test.js
new file mode 100644
index 000000000..8d537a2ad
--- /dev/null
+++ b/src/tests/services/metrics-services/search-domains-metrics-service.test.js
@@ -0,0 +1,59 @@
+import { AxiosHttpClientAdapter } from '@/services/axios/AxiosHttpClientAdapter'
+import { searchDomainsMetricsService } from '@/services/metrics-services'
+import * as Errors from '@services/axios/errors'
+import { describe, expect, it, vi } from 'vitest'
+
+
+const makeSut = () => {
+  const sut = searchDomainsMetricsService
+
+  return {
+    sut
+  }
+}
+
+describe('MetricsServices', () => {
+  it.todo('should call api with correct params')
+
+  it.todo('should parsed correctly all returned domains')
+
+  it.each([
+    {
+      statusCode: 400,
+      expectedError: new Errors.InvalidApiRequestError().message
+    },
+    {
+      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 statusCode $statusCode',
+    async ({ statusCode, expectedError }) => {
+      vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+        statusCode,
+        body: { results: [] }
+      })
+      const { sut } = makeSut()
+
+      const response = sut({})
+
+      expect(response).rejects.toBe(expectedError)
+    }
+  )
+})
diff --git a/src/views/Metrics/MetricsView.vue b/src/views/Metrics/MetricsView.vue
new file mode 100644
index 000000000..3839396e9
--- /dev/null
+++ b/src/views/Metrics/MetricsView.vue
@@ -0,0 +1,64 @@
+<template>
+  <ContentBlock>
+    <template #heading>
+      <PageHeadingBlock pageTitle="Real-Time Metrics" />
+    </template>
+    <template #content>
+      <TabsPageBlock
+        :metricsProductsService="fetchMetricsProductsService"
+        :metricsGroupsService="fetchMetricsGroupsService"
+        :params="routeParams"
+      />
+      <div class="card surface-border border rounded-md surface-section p-3.5 flex flex-col gap-4">
+        <IntervalFilterBlock />
+        <ContentFilterBlock :playgroundOpener="playgroundOpener" />
+      </div>
+      <DashboardPanelBlock
+        :metricsDashboardsService="fetchMetricsDashboardsService"
+        :params="routeParams"
+      />
+    </template>
+  </ContentBlock>
+</template>
+
+<script setup>
+  import ContentBlock from '@/templates/content-block'
+  import PageHeadingBlock from '@/templates/page-heading-block'
+  import { ref, watch } from 'vue'
+  import { useRoute } from 'vue-router'
+  import ContentFilterBlock from './blocks/content-filter-block.vue'
+  import DashboardPanelBlock from './blocks/dashboard-panel-block.vue'
+  import IntervalFilterBlock from './blocks/interval-filter-block.vue'
+  import TabsPageBlock from './blocks/tabs-page-block'
+
+  defineProps({
+    fetchMetricsGroupsService: {
+      type: Function,
+      required: true
+    },
+    fetchMetricsProductsService: {
+      type: Function,
+      required: true
+    },
+    fetchMetricsDashboardsService: {
+      type: Function,
+      required: true
+    },
+    playgroundOpener: {
+      type: Function,
+      required: true
+    }
+  })
+
+  const route = useRoute()
+  const routeParams = ref({})
+
+  watch(
+    route,
+    () => {
+      const { pageId, dashboardId } = route.params
+      routeParams.value = { pageId: pageId || '1', dashboardId: dashboardId || '1' }
+    },
+    { immediate: true }
+  )
+</script>
diff --git a/src/views/Metrics/blocks/content-filter-block.vue b/src/views/Metrics/blocks/content-filter-block.vue
new file mode 100644
index 000000000..d2bb6587a
--- /dev/null
+++ b/src/views/Metrics/blocks/content-filter-block.vue
@@ -0,0 +1,42 @@
+<script setup>
+  import PrimeButton from 'primevue/button'
+
+  const props = defineProps({
+    playgroundOpener: {
+      type: Function,
+      required: true
+    }
+  })
+</script>
+<template>
+  <div class="flex w-full items-center flex-column gap-4 md:gap-2 md:flex-row">
+    <div class="p-inputgroup flex flex-row grow">
+      <PrimeButton
+        outlined
+        icon-pos="left"
+        icon="pi pi-plus"
+        label="Filter"
+        :disabled="true"
+      />
+      <div class="p-inputgroup-addon justify-start flex grow p-2.5">
+        <p class="text-secondary text-sm not-italic font-normal leading-[normal]">
+          !!!Under development!!!
+        </p>
+      </div>
+    </div>
+    <PrimeButton
+      class="h-8 w-full md:max-w-max"
+      label="Search"
+      :disabled="true"
+    />
+    <PrimeButton
+      class="h-8 w-full md:max-w-fit"
+      outlined
+      icon-pos="right"
+      icon="pi pi-external-link"
+      label="Open in GraphQL Playground"
+      @click="props.playgroundOpener()"
+      :disabled="true"
+    />
+  </div>
+</template>
diff --git a/src/views/Metrics/blocks/dashboard-panel-block.vue b/src/views/Metrics/blocks/dashboard-panel-block.vue
new file mode 100644
index 000000000..e5cac3a16
--- /dev/null
+++ b/src/views/Metrics/blocks/dashboard-panel-block.vue
@@ -0,0 +1,78 @@
+<script setup>
+  import GraphsCardBlock from '@/templates/graphs-card-block'
+  import SelectButton from 'primevue/selectbutton'
+  import { computed, onMounted, ref, watch } from 'vue'
+
+  const props = defineProps({
+    metricsDashboardsService: {
+      type: Function,
+      required: true
+    },
+    params: {
+      type: Object,
+      required: true
+    }
+  })
+
+  onMounted(() => {
+    fetchDashboards()
+  })
+
+  const dashboards = ref([])
+  const selectedDashboard = ref(null)
+
+  const fetchDashboards = async () => {
+    const { pageId, dashboardId } = props.params
+    dashboards.value = await props.metricsDashboardsService(pageId, dashboardId)
+
+    // TODO: revisit the selected dashboard when the filter is implemented
+    selectedDashboard.value = dashboards.value[0]
+  }
+
+  const showDashboardTabs = computed(() => {
+    return dashboards.value.length > 1
+  })
+
+  watch(
+    () => props.params,
+    () => {
+      fetchDashboards()
+    }
+  )
+</script>
+
+<template>
+  <div class="flex flex-column mt-8 gap-4">
+    <SelectButton
+      v-if="showDashboardTabs"
+      class="w-fit"
+      v-model="selectedDashboard"
+      :options="dashboards"
+      optionLabel="label"
+      dataKey="id"
+      aria-labelledby="basic"
+    />
+    <div class="grid grid-cols-12 gap-4 m-0">
+      <template
+        v-for="i of 6"
+        :key="i"
+      >
+        <GraphsCardBlock
+          chartOwner="azion"
+          title="Four Columns Card"
+          description="This card is 4 columns wide, sets the aggregation type to 'Average', the variation type to 'positive', and the variation value to '10.2%'."
+          :cols="4"
+          aggregationType="Average"
+          variationType="positive"
+          variationValue="10.2%"
+        >
+          <template #chart>
+            <div class="surface-border border border-dashed flex items-center h-full">
+              <p class="text-color-secondary text-center w-full">Slot</p>
+            </div>
+          </template>
+        </GraphsCardBlock>
+      </template>
+    </div>
+  </div>
+</template>
diff --git a/src/views/Metrics/blocks/interval-filter-block.vue b/src/views/Metrics/blocks/interval-filter-block.vue
new file mode 100644
index 000000000..763169019
--- /dev/null
+++ b/src/views/Metrics/blocks/interval-filter-block.vue
@@ -0,0 +1,45 @@
+<script setup>
+  import Calendar from 'primevue/calendar'
+  import Dropdown from 'primevue/dropdown'
+  import { computed, ref, watchEffect } from 'vue'
+  import DATE_TIME_INTEVALS from '../constants/date-time-interval'
+
+  const emit = defineEmits(['updateInterval'])
+
+  const dates = ref()
+  const interval = ref(DATE_TIME_INTEVALS[0])
+  const intervalOptions = ref(DATE_TIME_INTEVALS)
+
+  const isCustomDate = computed(() => {
+    return interval.value.code === 'custom'
+  })
+
+  watchEffect(() => {
+    // TODO: handle data to be sent in beholder format
+    emit('updateInterval', { dates: dates.value, interval: interval.value })
+  })
+</script>
+
+<template>
+  <div class="flex flex-column gap-6 md:flex-row md:gap-6">
+    <Dropdown
+      class="w-full max-w-xs"
+      v-model="interval"
+      :options="intervalOptions"
+      optionLabel="name"
+    />
+    <Calendar
+      v-if="isCustomDate"
+      placeholder="Select date from calendar"
+      class="w-full max-w-xs"
+      v-model="dates"
+      dateFormat="dd/mm/yy"
+      showTime
+      hourFormat="24"
+      selectionMode="range"
+      :manualInput="false"
+      showIcon
+      iconDisplay="input"
+    />
+  </div>
+</template>
diff --git a/src/views/Metrics/blocks/tabs-page-block.vue b/src/views/Metrics/blocks/tabs-page-block.vue
new file mode 100644
index 000000000..2d872e380
--- /dev/null
+++ b/src/views/Metrics/blocks/tabs-page-block.vue
@@ -0,0 +1,93 @@
+<script setup>
+  import Dropdown from 'primevue/dropdown'
+  import TabMenu from 'primevue/tabmenu'
+  import { computed, onMounted, ref, watch } from 'vue'
+  import { useRouter } from 'vue-router'
+
+  const props = defineProps({
+    params: {
+      type: Object,
+      required: true
+    },
+    metricsProductsService: {
+      type: Function,
+      required: true
+    },
+    metricsGroupsService: {
+      type: Function,
+      required: true
+    }
+  })
+
+  onMounted(() => {
+    fetchGroups()
+  })
+
+  const metricsGroups = ref([])
+  const fetchGroups = async () => {
+    metricsGroups.value = await props.metricsGroupsService()
+    setCurrentGroup()
+  }
+
+  const selectedGroup = ref(null)
+  const setCurrentGroup = () => {
+    selectedGroup.value = metricsGroups.value.find((group) => group.id == props.params?.pageId)
+  }
+
+  watch(
+    selectedGroup,
+    (current) => {
+      if (current) {
+        setCurrentProduct(current.value)
+      }
+    },
+    { immediate: true }
+  )
+
+  const router = useRouter()
+
+  const metricsProducts = ref([])
+  const productIdx = ref(null)
+  const selectedProduct = computed(() => metricsProducts.value[productIdx.value])
+
+  const setCurrentProduct = async (groupName) => {
+    metricsProducts.value = await props.metricsProductsService(groupName)
+    productIdx.value = getCurrentProductIdx()
+
+    setNewParams()
+  }
+
+  const getCurrentProductIdx = () => {
+    const idx = metricsProducts.value.findIndex((product) => product.id == props.params.dashboardId)
+
+    return idx < 0 ? 0 : idx
+  }
+
+  const setNewParams = () => {
+    router.replace({
+      name: 'metrics',
+      params: { pageId: selectedGroup.value.id, dashboardId: selectedProduct.value.id }
+    })
+  }
+
+  watch(selectedProduct, () => {
+    setNewParams()
+  })
+</script>
+<template>
+  <div class="flex w-full items-end gap-3 mb-4">
+    <Dropdown
+      v-model="selectedGroup"
+      :options="metricsGroups"
+      :loading="!metricsGroups.length"
+      optionLabel="label"
+      class="flex self-start"
+    />
+    <TabMenu
+      v-model:activeIndex="productIdx"
+      :model="metricsProducts"
+      :key="productIdx"
+      :pt="{ action: { class: 'w-max' } }"
+    />
+  </div>
+</template>
diff --git a/src/views/Metrics/constants/date-time-interval.js b/src/views/Metrics/constants/date-time-interval.js
new file mode 100644
index 000000000..b12a779bb
--- /dev/null
+++ b/src/views/Metrics/constants/date-time-interval.js
@@ -0,0 +1,28 @@
+const DATE_TIME_INTERVALS = [
+  {
+    name: 'Last Hour',
+    code: '1'
+  },
+  {
+    name: 'Last 24 Hours',
+    code: '24'
+  },
+  {
+    name: 'Last 7 Days',
+    code: '168'
+  },
+  {
+    name: 'Last 30 Days',
+    code: '720'
+  },
+  {
+    name: 'Last 6 Months',
+    code: '4320'
+  },
+  {
+    name: 'Custom time range',
+    code: 'custom'
+  }
+]
+
+export default DATE_TIME_INTERVALS
diff --git a/vite.config.js b/vite.config.js
index faf58d216..13c85315e 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,9 +1,9 @@
-import process from 'process'
 import { fileURLToPath, URL } from 'node:url'
+import process from 'process'
 
-import { defineConfig, loadEnv } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import vueJsx from '@vitejs/plugin-vue-jsx'
+import { defineConfig, loadEnv } from 'vite'
 
 const getConfig = () => {
   const env = loadEnv('development', process.cwd())
@@ -36,6 +36,11 @@ const getConfig = () => {
           changeOrigin: true,
           rewrite: (path) => path.replace(/^\/graphql\/cities/, '/graphql')
         },
+        '/metrics/graphql': {
+          target: `${URLStartPrefix}stage-manager.azion.com/metrics/graphql`,
+          changeOrigin: true,
+          rewrite: (path) => path.replace(/^\/metrics\/graphql/, '')
+        },
         '^/api/(account|user|token|switch-account|password|totp)|^/logout': {
           target: `${URLStartPrefix}sso.azion.com`,
           changeOrigin: true,

From bc03199cccef26d6539b5fb33e9a8d903c97de07 Mon Sep 17 00:00:00 2001
From: Gabriel Lisboa <95422158+gablisb0a@users.noreply.github.com>
Date: Wed, 17 Jan 2024 11:24:06 -0300
Subject: [PATCH 119/135] fix: divider, paddings and buttons responsive

---
 .../list-table-block/dialog/delete-dialog.vue     | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/templates/list-table-block/dialog/delete-dialog.vue b/src/templates/list-table-block/dialog/delete-dialog.vue
index 12ca65102..fab101988 100644
--- a/src/templates/list-table-block/dialog/delete-dialog.vue
+++ b/src/templates/list-table-block/dialog/delete-dialog.vue
@@ -3,9 +3,12 @@
     v-model:visible="deleteDialogVisible"
     modal
     :header="`Delete ${informationForDeletion.title}`"
-    class="w-[95vw] md:w-[40vw]"
+    :draggable="false"
+    class="md:max-w-[680px]"
     :pt="{
-      header: { class: 'p-5' }
+      content: { class: 'p-4 md:p-8' },
+      header: { class: 'p-4 md:p-8' },
+      footer: { class: 'p-4 md:p-8 flex' }
     }"
     @keyup.enter="removeItem()"
   >
@@ -24,7 +27,7 @@
         </p>
       </div>
 
-      <Divider class="-ml-5 w-[calc(100%_+_40px)]" />
+      <Divider class="-ml-4 w-[calc(100%+2rem)] md:-ml-8 w-[calc(100%+4rem) md:w-[calc(100%+4rem)]"/>
 
       <div>
         <div class="flex flex-col w-full gap-2">
@@ -50,16 +53,16 @@
     </div>
 
     <template #footer>
-      <div class="flex gap-2 flex-col-reverse lg:flex-row justify-end">
+      <div class=" justify-end w-full flex gap-4">
         <PrimeButton
           severity="primary"
           outlined
+          class="flex-none md:flex"
           label="Cancel"
-          class="m-0"
           @click="cancelDialog()"
         ></PrimeButton>
         <PrimeButton
-          class="w-full lg:w-auto mr-0"
+          class="w-full md:w-auto"
           severity="danger"
           label="Delete"
           icon-pos="right"

From b8897439d55ec964d1242a3f94c8e6a152cd7ecd Mon Sep 17 00:00:00 2001
From: paulosf0 <paulo.ferreira@azion.com>
Date: Wed, 17 Jan 2024 13:44:04 -0300
Subject: [PATCH 120/135] feat: add new struct of tabs

---
 src/router/routes/waf-rules-routes/index.js   |  82 +----
 .../create-waf-rules-allowed-service.js       |  14 +-
 .../edit-waf-rules-allowed-service.js         |  15 +-
 src/views/WafRules/EditView.vue               | 320 ++----------------
 .../FormFields/FormFieldsWafRules.vue         |   1 +
 src/views/WafRules/ListWafRulesAllowed.vue    | 228 +++++++++++++
 src/views/WafRules/TabsView.vue               |  92 +++++
 7 files changed, 371 insertions(+), 381 deletions(-)
 create mode 100644 src/views/WafRules/ListWafRulesAllowed.vue
 create mode 100644 src/views/WafRules/TabsView.vue

diff --git a/src/router/routes/waf-rules-routes/index.js b/src/router/routes/waf-rules-routes/index.js
index bb1dff67e..2ac5b27ff 100644
--- a/src/router/routes/waf-rules-routes/index.js
+++ b/src/router/routes/waf-rules-routes/index.js
@@ -45,19 +45,25 @@ export const wafRulesRoutes = {
       }
     },
     {
-      path: 'edit/:id',
+      path: 'edit/:id/:tab?',
       name: 'edit-waf-rules',
-      component: () => import('@views/WafRules/EditView.vue'),
+      component: () => import('@views/WafRules/TabsView.vue'),
       props: {
-        editWafRulesService: WafRulesService.editWafRulesService,
-        loadWafRulesService: WafRulesService.loadWafRulesService,
-        listWafRulesAllowedService: WafRulesService.listWafRulesAllowedService,
-        deleteWafRulesAllowedService: WafRulesService.deleteWafRulesAllowedService,
-        createWafRulesAllowedService: WafRulesService.createWafRulesAllowedService,
-        loadWafRulesAllowedService: WafRulesService.loadWafRulesAllowedService,
-        editWafRulesAllowedService: WafRulesService.editWafRulesAllowedService,
-        documentationServiceAllowed: Helpers.documentationCatalog.wafAllowed,
-        documentationServiceTuning: Helpers.documentationCatalog.wafTuning
+        wafRulesAllowed: {
+          deleteWafRulesAllowedService: WafRulesService.deleteWafRulesAllowedService,
+          createWafRulesAllowedService: WafRulesService.createWafRulesAllowedService,
+          loadWafRulesAllowedService: WafRulesService.loadWafRulesAllowedService,
+          editWafRulesAllowedService: WafRulesService.editWafRulesAllowedService,
+          documentationServiceAllowed: Helpers.documentationCatalog.wafAllowed,
+          listWafRulesAllowedService: WafRulesService.listWafRulesAllowedService,
+        },
+        wafServices: {
+          editWafRulesService: WafRulesService.editWafRulesService,
+          loadWafRulesService: WafRulesService.loadWafRulesService,
+        },
+        wafTuning: {
+          documentationServiceTuning: Helpers.documentationCatalog.wafTuning
+        }
       },
       meta: {
         breadCrumbs: [
@@ -71,59 +77,5 @@ export const wafRulesRoutes = {
         ]
       }
     },
-    {
-      path: 'edit/:id/tuning',
-      name: 'edit-waf-rules-tuning',
-      component: () => import('@views/WafRules/EditView.vue'),
-      props: {
-        editWafRulesService: WafRulesService.editWafRulesService,
-        loadWafRulesService: WafRulesService.loadWafRulesService,
-        listWafRulesAllowedService: WafRulesService.listWafRulesAllowedService,
-        deleteWafRulesAllowedService: WafRulesService.deleteWafRulesAllowedService,
-        createWafRulesAllowedService: WafRulesService.createWafRulesAllowedService,
-        loadWafRulesAllowedService: WafRulesService.loadWafRulesAllowedService,
-        editWafRulesAllowedService: WafRulesService.editWafRulesAllowedService,
-        documentationServiceAllowed: Helpers.documentationCatalog.wafAllowed,
-        documentationServiceTuning: Helpers.documentationCatalog.wafTuning
-      },
-      meta: {
-        breadCrumbs: [
-          {
-            label: 'Waf Rules',
-            to: '/waf'
-          },
-          {
-            label: 'Edit Waf Rules'
-          }
-        ]
-      }
-    },
-    {
-      path: 'edit/:id/allowed',
-      name: 'edit-waf-rules-allowed',
-      component: () => import('@views/WafRules/EditView.vue'),
-      props: {
-        editWafRulesService: WafRulesService.editWafRulesService,
-        loadWafRulesService: WafRulesService.loadWafRulesService,
-        listWafRulesAllowedService: WafRulesService.listWafRulesAllowedService,
-        deleteWafRulesAllowedService: WafRulesService.deleteWafRulesAllowedService,
-        createWafRulesAllowedService: WafRulesService.createWafRulesAllowedService,
-        loadWafRulesAllowedService: WafRulesService.loadWafRulesAllowedService,
-        editWafRulesAllowedService: WafRulesService.editWafRulesAllowedService,
-        documentationServiceAllowed: Helpers.documentationCatalog.wafAllowed,
-        documentationServiceTuning: Helpers.documentationCatalog.wafTuning
-      },
-      meta: {
-        breadCrumbs: [
-          {
-            label: 'Waf Rules',
-            to: '/waf'
-          },
-          {
-            label: 'Edit Waf Rules'
-          }
-        ]
-      }
-    }
   ]
 }
diff --git a/src/services/waf-rules-services/create-waf-rules-allowed-service.js b/src/services/waf-rules-services/create-waf-rules-allowed-service.js
index fc7366c2c..fa6e47d25 100644
--- a/src/services/waf-rules-services/create-waf-rules-allowed-service.js
+++ b/src/services/waf-rules-services/create-waf-rules-allowed-service.js
@@ -13,14 +13,14 @@ export const createWafRulesAllowedService = async ({ payload, id }) => {
 }
 
 const adapt = (payload) => {
+  const matchValidationValues = payload.matchZones.map((zone) => {
+    if (['path', 'file_name', 'raw_body'].includes(zone.zone)) {
+      zone.matches_on = null
+    }
+    return zone
+  })
   return {
-    match_zones: payload.matchZones.map((zone) => {
-      const zoneWithoutMatchoZone = ['path', 'file_name', 'raw_body']
-      if (zoneWithoutMatchoZone.includes(zone.zone)) {
-        zone.matches_on = null
-      }
-      return zone
-    }),
+    match_zones: matchValidationValues,
     path: payload.path,
     reason: payload.reason,
     rule_id: payload.ruleId,
diff --git a/src/services/waf-rules-services/edit-waf-rules-allowed-service.js b/src/services/waf-rules-services/edit-waf-rules-allowed-service.js
index febfc3e22..f4416a3a0 100644
--- a/src/services/waf-rules-services/edit-waf-rules-allowed-service.js
+++ b/src/services/waf-rules-services/edit-waf-rules-allowed-service.js
@@ -13,15 +13,14 @@ export const editWafRulesAllowedService = async ({ payload, wafId, allowedId })
 }
 
 const adapt = (payload) => {
+  const matchValidationValues = payload.matchZones.map((zone) => {
+    if (['path', 'file_name', 'raw_body'].includes(zone.zone)) {
+      zone.matches_on = null
+    }
+    return zone
+  })
   return {
-    match_zones: payload.matchZones.map((zone) => {
-      const zoneWithoutMatchoZone = ['path', 'file_name', 'raw_body']
-      if (zoneWithoutMatchoZone.includes(zone.zone)) {
-        zone.matches_on = null
-      }
-
-      return zone
-    }),
+    match_zones: matchValidationValues,
     path: payload.path,
     reason: payload.reason,
     rule_id: payload.ruleId,
diff --git a/src/views/WafRules/EditView.vue b/src/views/WafRules/EditView.vue
index 68310ea6b..8c50a878b 100644
--- a/src/views/WafRules/EditView.vue
+++ b/src/views/WafRules/EditView.vue
@@ -1,148 +1,34 @@
 <template>
-  <ContentBlock>
-    <template #heading>
-      <PageHeadingBlock pageTitle="WAF Rules"> </PageHeadingBlock>
+  <EditFormBlock
+    :editService="submitEditWafRules"
+    :loadService="props.loadWafRulesService"
+    :schema="validationSchema"
+    :isTabs="true"
+    :disableRedirect="true"
+  >
+    <template #form>
+      <FormFieldsWafRules :disabledActive="false"></FormFieldsWafRules>
     </template>
-    <template #content>
-      <TabView
-        v-model:activeIndex="activeTab"
-        @tab-click="changeRouteByClickingOnTab"
-        class="w-full"
-      >
-        <TabPanel header="Main Settings">
-          <EditFormBlock
-            :editService="submitEditWafRules"
-            :loadService="props.loadWafRulesService"
-            :schema="validationSchema"
-            :isTabs="true"
-            :disableRedirect="true"
-          >
-            <template #form>
-              <FormFieldsWafRules :disabledActive="false"></FormFieldsWafRules>
-            </template>
-            <template #action-bar="{ onSubmit, formValid, onCancel, loading }">
-              <ActionBarTemplate
-                v-if="showEditFormWithActionTab"
-                @onSubmit="onSubmit"
-                @onCancel="onCancel"
-                :loading="loading"
-                :submitDisabled="!formValid"
-              />
-            </template>
-          </EditFormBlock>
-        </TabPanel>
-        <TabPanel header="Tuning"> </TabPanel>
-        <TabPanel header="Allowed Rules">
-          <ListTableNoHeaderBlock
-            ref="listAllowedRef"
-            v-if="hasContentToList"
-            pageTitleDelete="Waf Rules Allowed"
-            addButtonLabel="Allowed Rule"
-            :editInDrawer="openEditDrawerWafRulesAllowed"
-            :columns="wafRulesAllowedColumns"
-            :listService="handleListWafRulesAllowedService"
-            :deleteService="handleDeleteWafRulesAllowedService"
-            @on-load-data="handleLoadData"
-            emptyListMessage="No Waf Rules Allowed found."
-          >
-            <template #addButton>
-              <PrimeButton
-                icon="pi pi-plus"
-                label="Allowed Rule"
-                @click="openCreateDrawerWafAllowed"
-              />
-            </template>
-          </ListTableNoHeaderBlock>
-
-          <EmptyResultsBlock
-            v-else
-            title="No Allowed Rules added."
-            description="Allowed Rules are specific WAF rules customized for your web application."
-            createButtonLabel="Allowed Rule"
-            :documentationService="documentationServiceAllowed"
-            :inTabs="true"
-          >
-            <template #default>
-              <PrimeButton
-                severity="secondary"
-                label="Create from Tuning"
-              >
-              </PrimeButton>
-              <PrimeButton
-                severity="secondary"
-                icon="pi pi-plus"
-                label="Allowed Rule"
-                @click="openCreateDrawerWafAllowed"
-              />
-            </template>
-            <template #illustration>
-              <Illustration />
-            </template>
-          </EmptyResultsBlock>
-
-          <CreateDrawerBlock
-            v-if="showCreateWafRulesAllowedDrawer"
-            v-model:visible="showCreateWafRulesAllowedDrawer"
-            :createService="handleCreateWafRulesAllowedService"
-            :schema="validationSchemaAllowed"
-            :initialValues="initialValues"
-            @onSuccess="reloadWafRulesAllowedList"
-            title="Create New"
-          >
-            <template #formFields>
-              <FormFieldsAllowed></FormFieldsAllowed>
-            </template>
-          </CreateDrawerBlock>
-
-          <EditDrawerBlock
-            v-if="showEditWafRulesAllowedDrawer"
-            :id="selectedWafRulesAllowedToEdit"
-            v-model:visible="showEditWafRulesAllowedDrawer"
-            :loadService="handleLoadWafRulesAllowedService"
-            :editService="handleEditWafRulesAllowedService"
-            :schema="validationSchemaAllowed"
-            @onSuccess="reloadWafRulesAllowedList"
-            title="Edit Waf Rules Allowed"
-          >
-            <template #formFields>
-              <FormFieldsAllowed />
-            </template>
-          </EditDrawerBlock>
-        </TabPanel>
-      </TabView>
-      <router-view></router-view>
+    <template #action-bar="{ onSubmit, formValid, onCancel, loading }">
+      <ActionBarTemplate
+        @onSubmit="onSubmit"
+        @onCancel="onCancel"
+        :loading="loading"
+        :submitDisabled="!formValid"
+      />
     </template>
-  </ContentBlock>
+  </EditFormBlock>
 </template>
 <script setup>
-  import Illustration from '@/assets/svg/illustration-layers.vue'
   import ActionBarTemplate from '@/templates/action-bar-block/action-bar-with-teleport'
-  import ContentBlock from '@/templates/content-block'
-  import EmptyResultsBlock from '@/templates/empty-results-block'
-  import { columnBuilder } from '@/templates/list-table-block/columns/column-builder'
-  import CreateDrawerBlock from '@templates/create-drawer-block'
-  import EditDrawerBlock from '@templates/edit-drawer-block'
   import EditFormBlock from '@templates/edit-form-block'
-  import ListTableNoHeaderBlock from '@templates/list-table-block/no-header'
-  import PageHeadingBlock from '@templates/page-heading-block'
-  import PrimeButton from 'primevue/button'
-  import TabPanel from 'primevue/tabpanel'
-  import TabView from 'primevue/tabview'
 
-  import { computed, onBeforeMount, ref, watch } from 'vue'
-  import { useRoute, useRouter } from 'vue-router'
+  import { ref } from 'vue'
+  import { useRoute } from 'vue-router'
   import * as yup from 'yup'
   import FormFieldsWafRules from './FormFields/FormFieldsWafRules.vue'
-  import FormFieldsAllowed from './FormFields/FormFieldsAllowed.vue'
 
   const route = useRoute()
-  const router = useRouter()
-  const activeTab = ref(0)
-  const hasContentToList = ref(true)
-  const selectedWafRulesAllowedToEdit = ref(0)
-  const showEditWafRulesAllowedDrawer = ref(false)
-  const showCreateWafRulesAllowedDrawer = ref(false)
-  const listAllowedRef = ref('')
 
   const props = defineProps({
     editWafRulesService: {
@@ -152,55 +38,9 @@
     loadWafRulesService: {
       type: Function,
       required: true
-    },
-    listWafRulesAllowedService: {
-      type: Function,
-      required: true
-    },
-    deleteWafRulesAllowedService: {
-      type: Function,
-      required: true
-    },
-    createWafRulesAllowedService: {
-      type: Function,
-      required: true
-    },
-    loadWafRulesAllowedService: {
-      type: Function,
-      required: true
-    },
-    editWafRulesAllowedService: {
-      type: Function,
-      required: true
-    },
-    documentationServiceAllowed: {
-      required: true,
-      type: Function
-    },
-    documentationServiceTuning: {
-      required: true,
-      type: Function
     }
   })
 
-  const validationSchemaAllowed = yup.object({
-    matchZones: yup.array(),
-    path: yup.string().required(),
-    reason: yup.string().required(),
-    ruleId: yup.string().required(),
-    status: yup.boolean(),
-    useRegex: yup.boolean()
-  })
-
-  const initialValues = {
-    matchZones: [{ matches_on: 'value', zone: 'path', zone_input: null }],
-    path: '',
-    reason: '',
-    ruleId: 0,
-    status: false,
-    useRegex: false
-  }
-
   const validationSchema = yup.object({
     name: yup.string().required(),
     crossSiteScriptingSensitivity: yup.string(),
@@ -224,131 +64,9 @@
 
   const wafRuleId = ref(route.params.id)
 
-  const renderTabByRouterPath = () => {
-    if (route.name === 'edit-waf-rules') {
-      activeTab.value = 0
-    }
-    if (route.name === 'edit-waf-rules-tuning') {
-      activeTab.value = 1
-    }
-    if (route.name === 'edit-waf-rules-allowed') {
-      activeTab.value = 2
-    }
-  }
-
-  const changeRouteByClickingOnTab = (e) => {
-    if (e.index === 0) {
-      router.push({ name: 'edit-waf-rules', params: { id: wafRuleId.value } })
-    }
-    if (e.index === 1) {
-      router.push({ name: 'edit-waf-rules-tuning', params: { id: wafRuleId.value } })
-    }
-    if (e.index === 2) {
-      router.push({
-        name: 'edit-waf-rules-allowed',
-        params: { id: wafRuleId.value }
-      })
-    }
-  }
-
-  const wafRulesAllowedColumns = ref([
-    {
-      field: 'ruleId',
-      header: 'Rule ID'
-    },
-    {
-      field: 'reason',
-      header: 'Description'
-    },
-    {
-      field: 'path',
-      header: 'URI'
-    },
-    {
-      field: 'matchZones',
-      header: 'Match Zone Set',
-      type: 'component',
-      component: (columnData) =>
-        columnBuilder({ data: columnData, columnAppearance: 'expand-column' })
-    },
-    {
-      field: 'lastModified',
-      header: 'Last Modified'
-    },
-    {
-      field: 'status',
-      header: 'Status',
-      type: 'component',
-      component: (columnData) =>
-        columnBuilder({
-          data: columnData,
-          columnAppearance: 'tag'
-        })
-    }
-  ])
-
-  const reloadWafRulesAllowedList = () => {
-    if (hasContentToList.value) {
-      listAllowedRef.value.reload()
-      return
-    }
-    hasContentToList.value = true
-  }
-
-  const handleLoadData = (event) => {
-    hasContentToList.value = event
-  }
-
-  const showEditFormWithActionTab = computed(() => {
-    return activeTab.value === 0
-  })
 
   const submitEditWafRules = async (payload) => {
     return await props.editWafRulesService(payload, parseInt(wafRuleId.value))
   }
 
-  const handleListWafRulesAllowedService = async () => {
-    return await props.listWafRulesAllowedService({ wafId: wafRuleId.value })
-  }
-
-  const handleDeleteWafRulesAllowedService = async (id) => {
-    return await props.deleteWafRulesAllowedService({
-      wafId: wafRuleId.value,
-      allowedId: id
-    })
-  }
-
-  const handleCreateWafRulesAllowedService = async (payload) => {
-    return await props.createWafRulesAllowedService({ payload, id: wafRuleId.value })
-  }
-
-  const handleLoadWafRulesAllowedService = async (allowedId) => {
-    return await props.loadWafRulesAllowedService({ id: wafRuleId.value, allowedId })
-  }
-
-  const handleEditWafRulesAllowedService = async (payload) => {
-    return await props.editWafRulesAllowedService({
-      payload,
-      wafId: wafRuleId.value,
-      allowedId: selectedWafRulesAllowedToEdit.value
-    })
-  }
-
-  const openEditDrawerWafRulesAllowed = (event) => {
-    selectedWafRulesAllowedToEdit.value = event.id
-    showEditWafRulesAllowedDrawer.value = true
-  }
-
-  const openCreateDrawerWafAllowed = () => {
-    showCreateWafRulesAllowedDrawer.value = true
-  }
-
-  watch(route, () => {
-    renderTabByRouterPath()
-  })
-
-  onBeforeMount(() => {
-    wafRuleId.value = route.params.id
-    renderTabByRouterPath()
-  })
 </script>
diff --git a/src/views/WafRules/FormFields/FormFieldsWafRules.vue b/src/views/WafRules/FormFields/FormFieldsWafRules.vue
index 707f10e41..50b95bf36 100644
--- a/src/views/WafRules/FormFields/FormFieldsWafRules.vue
+++ b/src/views/WafRules/FormFields/FormFieldsWafRules.vue
@@ -33,6 +33,7 @@
   const { value: directoryTraversal } = useField('directoryTraversal')
   const { value: remoteFileInclusion } = useField('remoteFileInclusion')
   const { value: sqlInjection } = useField('sqlInjection')
+  const { value: name } = useField('name')
 
   const sensitivity = ref([
     { name: 'Sensitivity Highest', value: 'highest' },
diff --git a/src/views/WafRules/ListWafRulesAllowed.vue b/src/views/WafRules/ListWafRulesAllowed.vue
new file mode 100644
index 000000000..9eaeb1878
--- /dev/null
+++ b/src/views/WafRules/ListWafRulesAllowed.vue
@@ -0,0 +1,228 @@
+<template>
+  <ListTableNoHeaderBlock
+    ref="listAllowedRef"
+    v-if="hasContentToList"
+    pageTitleDelete="Waf Rules Allowed"
+    addButtonLabel="Allowed Rule"
+    :editInDrawer="openEditDrawerWafRulesAllowed"
+    :columns="wafRulesAllowedColumns"
+    :listService="handleListWafRulesAllowedService"
+    :deleteService="handleDeleteWafRulesAllowedService"
+    @on-load-data="handleLoadData"
+    emptyListMessage="No Waf Rules Allowed found."
+  >
+    <template #addButton>
+      <PrimeButton
+        icon="pi pi-plus"
+        label="Allowed Rule"
+        @click="openCreateDrawerWafAllowed"
+      />
+    </template>
+  </ListTableNoHeaderBlock>
+
+  <EmptyResultsBlock
+    v-else
+    title="No Allowed Rules added."
+    description="Allowed Rules are specific WAF rules customized for your web application."
+    createButtonLabel="Allowed Rule"
+    :documentationService="documentationServiceAllowed"
+    :inTabs="true"
+  >
+    <template #default>
+      <PrimeButton
+        severity="secondary"
+        label="Create from Tuning"
+      >
+      </PrimeButton>
+      <PrimeButton
+        severity="secondary"
+        icon="pi pi-plus"
+        label="Allowed Rule"
+        @click="openCreateDrawerWafAllowed"
+      />
+    </template>
+    <template #illustration>
+      <Illustration />
+    </template>
+  </EmptyResultsBlock>
+
+  <CreateDrawerBlock
+    v-if="showCreateWafRulesAllowedDrawer"
+    v-model:visible="showCreateWafRulesAllowedDrawer"
+    :createService="handleCreateWafRulesAllowedService"
+    :schema="validationSchemaAllowed"
+    :initialValues="initialValues"
+    @onSuccess="reloadWafRulesAllowedList"
+    title="Create New"
+  >
+    <template #formFields>
+      <FormFieldsAllowed></FormFieldsAllowed>
+    </template>
+  </CreateDrawerBlock>
+
+  <EditDrawerBlock
+    v-if="showEditWafRulesAllowedDrawer"
+    :id="selectedWafRulesAllowedToEdit"
+    v-model:visible="showEditWafRulesAllowedDrawer"
+    :loadService="handleLoadWafRulesAllowedService"
+    :editService="handleEditWafRulesAllowedService"
+    :schema="validationSchemaAllowed"
+    @onSuccess="reloadWafRulesAllowedList"
+    title="Edit Waf Rules Allowed"
+  >
+    <template #formFields>
+      <FormFieldsAllowed />
+    </template>
+  </EditDrawerBlock>
+</template>
+<script setup>
+  import Illustration from '@/assets/svg/illustration-layers.vue'
+  import EmptyResultsBlock from '@/templates/empty-results-block'
+  import { columnBuilder } from '@/templates/list-table-block/columns/column-builder'
+  import CreateDrawerBlock from '@templates/create-drawer-block'
+  import EditDrawerBlock from '@templates/edit-drawer-block'
+  import ListTableNoHeaderBlock from '@templates/list-table-block/no-header'
+  import PrimeButton from 'primevue/button'
+  import { ref } from 'vue'
+  import { useRoute } from 'vue-router'
+  import * as yup from 'yup'
+  import FormFieldsAllowed from './FormFields/FormFieldsAllowed.vue'
+
+  const route = useRoute()
+  const hasContentToList = ref(true)
+  const selectedWafRulesAllowedToEdit = ref(0)
+  const showEditWafRulesAllowedDrawer = ref(false)
+  const showCreateWafRulesAllowedDrawer = ref(false)
+  const listAllowedRef = ref('')
+
+  const props = defineProps({
+    listWafRulesAllowedService: {
+      type: Function,
+      required: true
+    },
+    deleteWafRulesAllowedService: {
+      type: Function,
+      required: true
+    },
+    createWafRulesAllowedService: {
+      type: Function,
+      required: true
+    },
+    loadWafRulesAllowedService: {
+      type: Function,
+      required: true
+    },
+    editWafRulesAllowedService: {
+      type: Function,
+      required: true
+    },
+    documentationServiceAllowed: {
+      required: true,
+      type: Function
+    }
+  })
+
+  const validationSchemaAllowed = yup.object({
+    matchZones: yup.array(),
+    path: yup.string().required(),
+    reason: yup.string().required(),
+    ruleId: yup.string().required().label('rule id'),
+    status: yup.boolean(),
+    useRegex: yup.boolean()
+  })
+
+  const initialValues = {
+    matchZones: [{ matches_on: 'value', zone: 'path', zone_input: null }],
+    path: '',
+    reason: '',
+    ruleId: 0,
+    status: false,
+    useRegex: false
+  }
+
+  const wafRuleId = ref(route.params.id)
+
+  const wafRulesAllowedColumns = ref([
+    {
+      field: 'ruleId',
+      header: 'Rule ID'
+    },
+    {
+      field: 'reason',
+      header: 'Description'
+    },
+    {
+      field: 'path',
+      header: 'URI'
+    },
+    {
+      field: 'matchZones',
+      header: 'Match Zone Set',
+      type: 'component',
+      component: (columnData) =>
+        columnBuilder({ data: columnData, columnAppearance: 'expand-column' })
+    },
+    {
+      field: 'lastModified',
+      header: 'Last Modified'
+    },
+    {
+      field: 'status',
+      header: 'Status',
+      type: 'component',
+      component: (columnData) =>
+        columnBuilder({
+          data: columnData,
+          columnAppearance: 'tag'
+        })
+    }
+  ])
+
+  const reloadWafRulesAllowedList = () => {
+    if (hasContentToList.value) {
+      listAllowedRef.value.reload()
+      return
+    }
+    hasContentToList.value = true
+  }
+
+  const handleLoadData = (event) => {
+    hasContentToList.value = event
+  }
+
+  const handleListWafRulesAllowedService = async () => {
+    return await props.listWafRulesAllowedService({ wafId: wafRuleId.value })
+  }
+
+  const handleDeleteWafRulesAllowedService = async (id) => {
+    return await props.deleteWafRulesAllowedService({
+      wafId: wafRuleId.value,
+      allowedId: id
+    })
+  }
+
+  const handleCreateWafRulesAllowedService = async (payload) => {
+    return await props.createWafRulesAllowedService({ payload, id: wafRuleId.value })
+  }
+
+  const handleLoadWafRulesAllowedService = async (allowedId) => {
+    return await props.loadWafRulesAllowedService({ id: wafRuleId.value, allowedId })
+  }
+
+  const handleEditWafRulesAllowedService = async (payload) => {
+    return await props.editWafRulesAllowedService({
+      payload,
+      wafId: wafRuleId.value,
+      allowedId: selectedWafRulesAllowedToEdit.value
+    })
+  }
+
+  const openEditDrawerWafRulesAllowed = (event) => {
+    selectedWafRulesAllowedToEdit.value = parseInt(event.id)
+    showEditWafRulesAllowedDrawer.value = true
+  }
+
+  const openCreateDrawerWafAllowed = () => {
+    showCreateWafRulesAllowedDrawer.value = true
+  }
+</script>
diff --git a/src/views/WafRules/TabsView.vue b/src/views/WafRules/TabsView.vue
new file mode 100644
index 000000000..37229005d
--- /dev/null
+++ b/src/views/WafRules/TabsView.vue
@@ -0,0 +1,92 @@
+<script setup>
+  import ContentBlock from '@/templates/content-block'
+  import PageHeadingBlock from '@/templates/page-heading-block'
+  import EditView from '@/views/WafRules/EditView.vue'
+  import ListViewWafRulesAllowed from '@/views/WafRules/ListWafRulesAllowed.vue'
+  import TabPanel from 'primevue/tabpanel'
+  import TabView from 'primevue/tabview'
+
+  import { ref } from 'vue'
+  import { useRoute, useRouter } from 'vue-router'
+
+  defineOptions({ name: 'tabs-waf-rules' })
+
+  const props = defineProps({
+    wafServices: { type: Object, required: true },
+    wafRulesAllowed: { type: Object, required: true }
+  })
+
+  const mapTabs = {
+    mainSettings: 0,
+    tuning: 1,
+    allowed: 2
+  }
+
+  const route = useRoute()
+  const router = useRouter()
+  const activeTab = ref(0)
+  const wafRuleId = ref(route.params.id)
+
+  const getTabFromValue = (selectedTabIndex) => {
+    const tabNames = Object.keys(mapTabs)
+    const selectedTab = tabNames.find((tabName) => mapTabs[tabName] === selectedTabIndex)
+    return selectedTab
+  }
+
+  const changeRouteByClickingOnTab = (event) => {
+    const tab = getTabFromValue(event.index)
+    activeTab.value = event.index
+    const params = {
+      id: wafRuleId.value,
+      tab
+    }
+    router.push({
+      name: 'edit-waf-rules',
+      params
+    })
+  }
+
+  const renderTabCurrentRouter = async () => {
+    const { tab } = route.params
+    const defaultTabIndex = 0
+    const activeTabIndexByRoute = mapTabs[tab] || defaultTabIndex
+    activeTab.value = activeTabIndexByRoute
+  }
+
+  renderTabCurrentRouter()
+</script>
+
+<template>
+  <ContentBlock>
+    <template #heading>
+      <PageHeadingBlock pageTitle="Edit WAF Rules" />
+    </template>
+    <template #content>
+      <TabView
+        :activeIndex="activeTab"
+        @tab-click="changeRouteByClickingOnTab"
+        class="w-full h-full"
+      >
+        <TabPanel header="Main Settings">
+          <EditView
+            :editWafRulesService="props.wafServices.editWafRulesService"
+            :loadWafRulesService="props.wafServices.loadWafRulesService"
+          ></EditView>
+        </TabPanel>
+        <TabPanel header="Tuning">
+          <h1>Tuning</h1>
+        </TabPanel>
+        <TabPanel header="Allowed Rules">
+          <ListViewWafRulesAllowed
+            :listWafRulesAllowedService="props.wafRulesAllowed.listWafRulesAllowedService"
+            :deleteWafRulesAllowedService="props.wafRulesAllowed.deleteWafRulesAllowedService"
+            :createWafRulesAllowedService="props.wafRulesAllowed.createWafRulesAllowedService"
+            :loadWafRulesAllowedService="props.wafRulesAllowed.loadWafRulesAllowedService"
+            :editWafRulesAllowedService="props.wafRulesAllowed.editWafRulesAllowedService"
+            :documentationServiceAllowed="props.wafRulesAllowed.documentationServiceAllowed"
+          ></ListViewWafRulesAllowed>
+        </TabPanel>
+      </TabView>
+    </template>
+  </ContentBlock>
+</template>

From 81f77c45a9b0011fe84f58c6ae197da38baba775 Mon Sep 17 00:00:00 2001
From: paulosf0 <paulo.ferreira@azion.com>
Date: Wed, 17 Jan 2024 13:45:18 -0300
Subject: [PATCH 121/135] feat: code refactor

---
 src/router/routes/waf-rules-routes/index.js | 6 +++---
 src/views/WafRules/EditView.vue             | 2 --
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/router/routes/waf-rules-routes/index.js b/src/router/routes/waf-rules-routes/index.js
index 2ac5b27ff..fe17e084c 100644
--- a/src/router/routes/waf-rules-routes/index.js
+++ b/src/router/routes/waf-rules-routes/index.js
@@ -55,11 +55,11 @@ export const wafRulesRoutes = {
           loadWafRulesAllowedService: WafRulesService.loadWafRulesAllowedService,
           editWafRulesAllowedService: WafRulesService.editWafRulesAllowedService,
           documentationServiceAllowed: Helpers.documentationCatalog.wafAllowed,
-          listWafRulesAllowedService: WafRulesService.listWafRulesAllowedService,
+          listWafRulesAllowedService: WafRulesService.listWafRulesAllowedService
         },
         wafServices: {
           editWafRulesService: WafRulesService.editWafRulesService,
-          loadWafRulesService: WafRulesService.loadWafRulesService,
+          loadWafRulesService: WafRulesService.loadWafRulesService
         },
         wafTuning: {
           documentationServiceTuning: Helpers.documentationCatalog.wafTuning
@@ -76,6 +76,6 @@ export const wafRulesRoutes = {
           }
         ]
       }
-    },
+    }
   ]
 }
diff --git a/src/views/WafRules/EditView.vue b/src/views/WafRules/EditView.vue
index 8c50a878b..c6d7f347c 100644
--- a/src/views/WafRules/EditView.vue
+++ b/src/views/WafRules/EditView.vue
@@ -64,9 +64,7 @@
 
   const wafRuleId = ref(route.params.id)
 
-
   const submitEditWafRules = async (payload) => {
     return await props.editWafRulesService(payload, parseInt(wafRuleId.value))
   }
-
 </script>

From 88de67d47cc570c8b1b33d26edf34246b94b31cd Mon Sep 17 00:00:00 2001
From: paulosf0 <paulo.ferreira@azion.com>
Date: Wed, 17 Jan 2024 13:51:31 -0300
Subject: [PATCH 122/135] feat: code fix after code review

---
 .../create-waf-rules-allowed-service.js                |  4 +---
 .../create-waf-rules-allowed-service.test.js           |  4 +---
 src/views/WafRules/FormFields/FormFieldsAllowed.vue    | 10 ++--------
 3 files changed, 4 insertions(+), 14 deletions(-)

diff --git a/src/services/waf-rules-services/create-waf-rules-allowed-service.js b/src/services/waf-rules-services/create-waf-rules-allowed-service.js
index fa6e47d25..367635f4f 100644
--- a/src/services/waf-rules-services/create-waf-rules-allowed-service.js
+++ b/src/services/waf-rules-services/create-waf-rules-allowed-service.js
@@ -39,9 +39,7 @@ const adapt = (payload) => {
 const parseHttpResponse = (httpResponse) => {
   switch (httpResponse.statusCode) {
     case 202:
-      return {
-        feedback: 'Your waf rule allowed has been created'
-      }
+      return  'Your waf rule allowed has been created'
     case 400:
       const apiError = extractApiError(httpResponse)
       throw new Error(apiError).message
diff --git a/src/tests/services/waf-rules-services/create-waf-rules-allowed-service.test.js b/src/tests/services/waf-rules-services/create-waf-rules-allowed-service.test.js
index 732e05a10..b9a025f60 100644
--- a/src/tests/services/waf-rules-services/create-waf-rules-allowed-service.test.js
+++ b/src/tests/services/waf-rules-services/create-waf-rules-allowed-service.test.js
@@ -57,9 +57,7 @@ describe('WafRulesServices', () => {
 
     const data = await sut({ payload: fixtures.wafRulesMock, id: 10 })
 
-    expect(data).toStrictEqual({
-      feedback: 'Your waf rule allowed has been created'
-    })
+    expect(data).toStrictEqual('Your waf rule allowed has been created')
   })
 
   it('Should return an API error for an 400 response status', async () => {
diff --git a/src/views/WafRules/FormFields/FormFieldsAllowed.vue b/src/views/WafRules/FormFields/FormFieldsAllowed.vue
index 08f6f1de6..769d0352f 100644
--- a/src/views/WafRules/FormFields/FormFieldsAllowed.vue
+++ b/src/views/WafRules/FormFields/FormFieldsAllowed.vue
@@ -49,10 +49,7 @@
       'conditional_query_body',
       'conditional_query_header'
     ]
-    if (conditionalInputs.includes(value)) {
-      return true
-    }
-    return false
+    return (conditionalInputs.includes(value))
   }
 
   const showMatchOnInputs = (value) => {
@@ -64,10 +61,7 @@
       'request_body',
       'request_header'
     ]
-    if (conditionalInputs.includes(value)) {
-      return true
-    }
-    return false
+    return (conditionalInputs.includes(value)) 
   }
 
   const deleteMatchZone = (index) => {

From e68486100cd9c2f91efea869ad56315b21e33834 Mon Sep 17 00:00:00 2001
From: paulosf0 <paulo.ferreira@azion.com>
Date: Wed, 17 Jan 2024 13:54:22 -0300
Subject: [PATCH 123/135] feat: add multiple types in id of edit drawer

---
 .../waf-rules-services/create-waf-rules-allowed-service.js    | 2 +-
 src/templates/edit-drawer-block/index.vue                     | 2 +-
 src/views/WafRules/FormFields/FormFieldsAllowed.vue           | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/services/waf-rules-services/create-waf-rules-allowed-service.js b/src/services/waf-rules-services/create-waf-rules-allowed-service.js
index 367635f4f..64f7c6ddb 100644
--- a/src/services/waf-rules-services/create-waf-rules-allowed-service.js
+++ b/src/services/waf-rules-services/create-waf-rules-allowed-service.js
@@ -39,7 +39,7 @@ const adapt = (payload) => {
 const parseHttpResponse = (httpResponse) => {
   switch (httpResponse.statusCode) {
     case 202:
-      return  'Your waf rule allowed has been created'
+      return 'Your waf rule allowed has been created'
     case 400:
       const apiError = extractApiError(httpResponse)
       throw new Error(apiError).message
diff --git a/src/templates/edit-drawer-block/index.vue b/src/templates/edit-drawer-block/index.vue
index e9b9599d0..ecb7382f1 100644
--- a/src/templates/edit-drawer-block/index.vue
+++ b/src/templates/edit-drawer-block/index.vue
@@ -13,7 +13,7 @@
   const emit = defineEmits(['update:visible', 'onSuccess', 'onError'])
   const props = defineProps({
     id: {
-      type: String,
+      type: [ String, Number ],
       required: true
     },
     visible: {
diff --git a/src/views/WafRules/FormFields/FormFieldsAllowed.vue b/src/views/WafRules/FormFields/FormFieldsAllowed.vue
index 769d0352f..3b1e6c7c7 100644
--- a/src/views/WafRules/FormFields/FormFieldsAllowed.vue
+++ b/src/views/WafRules/FormFields/FormFieldsAllowed.vue
@@ -49,7 +49,7 @@
       'conditional_query_body',
       'conditional_query_header'
     ]
-    return (conditionalInputs.includes(value))
+    return conditionalInputs.includes(value)
   }
 
   const showMatchOnInputs = (value) => {
@@ -61,7 +61,7 @@
       'request_body',
       'request_header'
     ]
-    return (conditionalInputs.includes(value)) 
+    return conditionalInputs.includes(value)
   }
 
   const deleteMatchZone = (index) => {

From 7e7b1340b4b510b070779684b78cedce86b07544 Mon Sep 17 00:00:00 2001
From: Matheus Sunderhus <matheus.sunderhus@azion.com>
Date: Wed, 17 Jan 2024 14:13:33 -0300
Subject: [PATCH 124/135] fix: rename switch account options to use english
 texts

---
 src/templates/navbar-block/switch-account.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/templates/navbar-block/switch-account.vue b/src/templates/navbar-block/switch-account.vue
index 6e79e03e9..7cf896bff 100644
--- a/src/templates/navbar-block/switch-account.vue
+++ b/src/templates/navbar-block/switch-account.vue
@@ -30,11 +30,11 @@
   const openSwitchAccount = inject('openSwitchAccount')
   const profileMenuDefault = [
     {
-      label: 'Configurações da Conta',
+      label: 'Account Settings',
       to: '/account/settings'
     },
     {
-      label: 'Gerenciamento de Usuários',
+      label: 'Users Management',
       to: '/users'
     },
     {

From be0ba45ba225219bbd2d8adde338761190bab48e Mon Sep 17 00:00:00 2001
From: Matheus Sunderhus <matheus.sunderhus@azion.com>
Date: Wed, 17 Jan 2024 14:17:14 -0300
Subject: [PATCH 125/135] chore: lint project files

---
 src/templates/list-table-block/dialog/delete-dialog.vue     | 6 ++++--
 .../metrics-services/search-domains-metrics-service.test.js | 1 -
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/templates/list-table-block/dialog/delete-dialog.vue b/src/templates/list-table-block/dialog/delete-dialog.vue
index d358d68ca..275f6ef0a 100644
--- a/src/templates/list-table-block/dialog/delete-dialog.vue
+++ b/src/templates/list-table-block/dialog/delete-dialog.vue
@@ -27,7 +27,9 @@
         </p>
       </div>
 
-      <Divider class="-ml-4 w-[calc(100%+2rem)] md:-ml-8 w-[calc(100%+4rem) md:w-[calc(100%+4rem)]"/>
+      <Divider
+        class="-ml-4 w-[calc(100%+2rem)] md:-ml-8 w-[calc(100%+4rem) md:w-[calc(100%+4rem)]"
+      />
 
       <div>
         <div class="flex flex-col w-full gap-2">
@@ -53,7 +55,7 @@
     </div>
 
     <template #footer>
-      <div class=" justify-end w-full flex gap-4">
+      <div class="justify-end w-full flex gap-4">
         <PrimeButton
           severity="primary"
           outlined
diff --git a/src/tests/services/metrics-services/search-domains-metrics-service.test.js b/src/tests/services/metrics-services/search-domains-metrics-service.test.js
index 8d537a2ad..f6b5afa10 100644
--- a/src/tests/services/metrics-services/search-domains-metrics-service.test.js
+++ b/src/tests/services/metrics-services/search-domains-metrics-service.test.js
@@ -3,7 +3,6 @@ import { searchDomainsMetricsService } from '@/services/metrics-services'
 import * as Errors from '@services/axios/errors'
 import { describe, expect, it, vi } from 'vitest'
 
-
 const makeSut = () => {
   const sut = searchDomainsMetricsService
 

From e306738d710d13131d8b1c681e88d7c831ed9a40 Mon Sep 17 00:00:00 2001
From: William <william.tome@azion.com>
Date: Wed, 17 Jan 2024 14:49:38 -0300
Subject: [PATCH 126/135] [NO-ISSUE] refactor: rename real-time-metrics url
 (#575)

* refactor: [metrics] rename metrics base path

* refactor: [metrics] add pathName to dashboard service

* refactor: [metrics] add pathName to product service

* refactor: [metrics] rename page and dashboard to group and product

* refactor: [metrics] rename caching offload dashboard

* refactor: [metrics] rename prop in dashboadrs service

* refactor: [metrics] rename prop in dashboad panel block

* test: [metrics] fix broken tests due to props renaming
---
 src/router/routes/metrics-routes/index.js     |  4 +-
 .../metrics-services/constants/dashboards.js  |  2 +-
 .../fetch-metrics-dashboards-service.js       | 11 +++--
 .../fetch-metrics-products-service.js         |  3 +-
 .../fetch-metrics-dashboards-service.test.js  | 49 +++++++++++++------
 .../fetch-metrics-products-service.test.js    | 21 +++++---
 src/views/Metrics/MetricsView.vue             | 12 +++--
 .../Metrics/blocks/dashboard-panel-block.vue  |  4 +-
 src/views/Metrics/blocks/tabs-page-block.vue  |  8 +--
 9 files changed, 73 insertions(+), 41 deletions(-)

diff --git a/src/router/routes/metrics-routes/index.js b/src/router/routes/metrics-routes/index.js
index dcca6a443..d7aa3af61 100644
--- a/src/router/routes/metrics-routes/index.js
+++ b/src/router/routes/metrics-routes/index.js
@@ -3,8 +3,8 @@ import * as MetricsServices from '@/services/metrics-services'
 
 /** @type {import('vue-router').RouteRecordRaw} */
 export const metricsRoutes = {
-  path: '/metrics/:pageId?/:dashboardId?',
-  name: 'metrics',
+  path: '/real-time-metrics/:group?/:product?',
+  name: 'real-time-metrics',
   component: () => import('@views/Metrics/MetricsView.vue'),
   props: {
     playgroundOpener: metricsPlaygroundOpener,
diff --git a/src/services/metrics-services/constants/dashboards.js b/src/services/metrics-services/constants/dashboards.js
index 4cbc56254..e471aa63b 100644
--- a/src/services/metrics-services/constants/dashboards.js
+++ b/src/services/metrics-services/constants/dashboards.js
@@ -40,7 +40,7 @@ const PAGES_DASHBOARDS = {
       dashboards: [
         {
           id: 357549371218199219n,
-          label: 'caching-offload',
+          label: 'Caching Offload',
           url: 'caching-offload',
           dataset: 'l2CacheMetrics'
         }
diff --git a/src/services/metrics-services/fetch-metrics-dashboards-service.js b/src/services/metrics-services/fetch-metrics-dashboards-service.js
index 82a0ac9d7..fab59178b 100644
--- a/src/services/metrics-services/fetch-metrics-dashboards-service.js
+++ b/src/services/metrics-services/fetch-metrics-dashboards-service.js
@@ -1,13 +1,13 @@
 import GROUP_DASHBOARDS from './constants/dashboards'
 
-export const fetchMetricsDashboardsService = async (groupId, productId) => {
-  if (!productId || !groupId) {
+export const fetchMetricsDashboardsService = async (groupPath, productPath) => {
+  if (!productPath || !groupPath) {
     return Promise.resolve([])
   }
 
-  const { pagesDashboards } = GROUP_DASHBOARDS.find((group) => group.id == groupId)
+  const { pagesDashboards } = GROUP_DASHBOARDS.find((group) => group.value == groupPath)
 
-  const products = pagesDashboards.filter((product) => product.id == productId)
+  const products = pagesDashboards.filter((product) => product.url == productPath)
 
   if (!products.length) {
     return Promise.resolve([])
@@ -17,7 +17,8 @@ export const fetchMetricsDashboardsService = async (groupId, productId) => {
     return {
       id: dashboard.id,
       label: dashboard.label,
-      dataset: dashboard.dataset
+      dataset: dashboard.dataset,
+      path: dashboard.url
     }
   })
 
diff --git a/src/services/metrics-services/fetch-metrics-products-service.js b/src/services/metrics-services/fetch-metrics-products-service.js
index 676d00f88..db6155e27 100644
--- a/src/services/metrics-services/fetch-metrics-products-service.js
+++ b/src/services/metrics-services/fetch-metrics-products-service.js
@@ -10,7 +10,8 @@ export const fetchMetricsProductsService = async (groupValue) => {
     return {
       id: dashboard.id,
       label: dashboard.label,
-      groupId: dashboard.groupId
+      groupId: dashboard.groupId,
+      path: dashboard.url
     }
   })
 
diff --git a/src/tests/services/metrics-services/fetch-metrics-dashboards-service.test.js b/src/tests/services/metrics-services/fetch-metrics-dashboards-service.test.js
index 251571580..d275146d5 100644
--- a/src/tests/services/metrics-services/fetch-metrics-dashboards-service.test.js
+++ b/src/tests/services/metrics-services/fetch-metrics-dashboards-service.test.js
@@ -6,64 +6,74 @@ const fixtures = {
     {
       id: 357548608166298191n,
       label: 'Data Transferred',
-      dataset: 'httpMetrics'
+      dataset: 'httpMetrics',
+      path: 'data-transferred'
     },
     {
       id: 357548623571976783n,
       label: 'Requests',
-      dataset: 'httpMetrics'
+      dataset: 'httpMetrics',
+      path: 'requests'
     },
     {
       id: 357548642810200653n,
       label: 'Status Codes',
-      dataset: 'httpMetrics'
+      dataset: 'httpMetrics',
+      path: 'status-codes'
     },
     {
       id: 357549179454620239n,
       label: 'Bandwidth Saving',
-      dataset: 'httpMetrics'
+      dataset: 'httpMetrics',
+      path: 'bandwidth-saving'
     }
   ],
   l2Caching: [
     {
       id: 357549371218199219n,
-      label: 'caching-offload',
-      dataset: 'l2CacheMetrics'
+      label: 'Caching Offload',
+      dataset: 'l2CacheMetrics',
+      path: 'caching-offload'
     }
   ],
   edgeFunctions: [
     {
       id: 357549319029523021n,
       label: 'Invocations',
-      dataset: 'edgeFunctionsMetrics'
+      dataset: 'edgeFunctionsMetrics',
+      path: 'invocations'
     }
   ],
   imageProcessor: [
     {
       id: 357549422933967445n,
       label: 'Requests',
-      dataset: 'imagesProcessedMetrics'
+      dataset: 'imagesProcessedMetrics',
+      path: 'requests'
     }
   ],
   waf: [
     {
       id: 357548675837198933n,
       label: 'Threats',
-      dataset: 'httpMetrics'
+      dataset: 'httpMetrics',
+      path: 'threats'
     }
   ],
   intelligentDns: [
     {
       id: 357549371218199119n,
       label: 'Standard Queries',
-      dataset: 'idnsQueriesMetrics'
+      dataset: 'idnsQueriesMetrics',
+      path: 'standard-queries'
     }
   ],
   dataStreaming: [
     {
       id: 352149476039721549n,
       label: 'Data Streamed',
-      dataset: 'dataStreamedMetrics'
+      dataset: 'dataStreamedMetrics',
+      path: 'requests'
     }
   ]
 }
@@ -80,6 +90,7 @@ const scenarios = [
   {
     group: 'build',
     page: 'edgeApplications',
+    pageUrl: 'edge-applications',
     groupId: 1,
     pageId: 1,
     expected: fixtures.edgeApplications
@@ -87,6 +98,7 @@ const scenarios = [
   {
     group: 'build',
     page: 'l2Caching',
+    pageUrl: 'l2-caching',
     groupId: 1,
     pageId: 2,
     expected: fixtures.l2Caching
@@ -94,6 +106,7 @@ const scenarios = [
   {
     group: 'build',
     page: 'edgeFunctions',
+    pageUrl: 'edge-functions',
     groupId: 1,
     pageId: 3,
     expected: fixtures.edgeFunctions
@@ -101,6 +114,7 @@ const scenarios = [
   {
     group: 'build',
     page: 'imageProcessor',
+    pageUrl: 'image-processor',
     groupId: 1,
     pageId: 4,
     expected: fixtures.imageProcessor
@@ -108,6 +122,7 @@ const scenarios = [
   {
     group: 'secure',
     page: 'waf',
+    pageUrl: 'waf',
     groupId: 2,
     pageId: 6,
     expected: fixtures.waf
@@ -115,6 +130,7 @@ const scenarios = [
   {
     group: 'secure',
     page: 'intelligentDns',
+    pageUrl: 'intelligent-dns',
     groupId: 2,
     pageId: 7,
     expected: fixtures.intelligentDns
@@ -122,6 +138,7 @@ const scenarios = [
   {
     group: 'observe',
     page: 'dataStreaming',
+    pageUrl: 'data-streaming',
     groupId: 3,
     pageId: 8,
     expected: fixtures.dataStreaming
@@ -131,19 +148,19 @@ const scenarios = [
 describe('MetricsServices', () => {
   it.each(scenarios)(
     'should return a list of dashboards within %group group and %page page',
-    async ({ groupId, pageId, expected }) => {
+    async ({ group, pageUrl, expected }) => {
       const { sut } = makeSut()
 
-      const dashboards = await sut(groupId, pageId)
+      const dashboards = await sut(group, pageUrl)
 
       expect(dashboards).toEqual(expected)
     }
   )
 
   it.each([
-    { group: 1, page: 0, expected: [] },
-    { group: 0, page: 1, expected: [] }
-  ])('should return an empty list on not found group or page', async () => {
+    { group: 'build', product: 'undefined', expected: [] },
+    { group: 'undefined', product: 'edge-applications', expected: [] }
+  ])('should return an empty list on not found group or product', async () => {
     const { sut } = makeSut()
 
     const dashboards = await sut()
diff --git a/src/tests/services/metrics-services/fetch-metrics-products-service.test.js b/src/tests/services/metrics-services/fetch-metrics-products-service.test.js
index 89484b787..d5dbe2ad2 100644
--- a/src/tests/services/metrics-services/fetch-metrics-products-service.test.js
+++ b/src/tests/services/metrics-services/fetch-metrics-products-service.test.js
@@ -6,41 +6,48 @@ const fixtures = {
     {
       id: 1,
       label: 'Edge Applications',
-      groupId: 1
+      groupId: 1,
+      path: 'edge-applications'
     },
     {
       id: 2,
       label: 'L2 Caching',
-      groupId: 1
+      groupId: 1,
+      path: 'l2-caching'
     },
     {
       id: 3,
       label: 'Edge Functions',
-      groupId: 1
+      groupId: 1,
+      path: 'edge-functions'
     },
     {
       id: 4,
       label: 'Image Processor',
-      groupId: 1
+      groupId: 1,
+      path: 'image-processor'
     }
   ],
   secure: [
     {
       id: 6,
       label: 'WAF',
-      groupId: 2
+      groupId: 2,
+      path: 'waf'
     },
     {
       id: 7,
       label: 'Intelligent DNS',
-      groupId: 2
+      groupId: 2,
+      path: 'intelligent-dns'
     }
   ],
   observe: [
     {
       id: 8,
       label: 'Data Streaming',
-      groupId: 3
+      groupId: 3,
+      path: 'data-streaming'
     }
   ]
 }
diff --git a/src/views/Metrics/MetricsView.vue b/src/views/Metrics/MetricsView.vue
index 3839396e9..0f0b86b70 100644
--- a/src/views/Metrics/MetricsView.vue
+++ b/src/views/Metrics/MetricsView.vue
@@ -51,13 +51,19 @@
   })
 
   const route = useRoute()
-  const routeParams = ref({})
+  const routeParams = ref({
+    group: 'build',
+    product: 'edge-applications'
+  })
 
   watch(
     route,
     () => {
-      const { pageId, dashboardId } = route.params
-      routeParams.value = { pageId: pageId || '1', dashboardId: dashboardId || '1' }
+      const { group, product } = route.params
+
+      if (group && product) {
+        routeParams.value = { group, product }
+      }
     },
     { immediate: true }
   )
diff --git a/src/views/Metrics/blocks/dashboard-panel-block.vue b/src/views/Metrics/blocks/dashboard-panel-block.vue
index e5cac3a16..efa79837e 100644
--- a/src/views/Metrics/blocks/dashboard-panel-block.vue
+++ b/src/views/Metrics/blocks/dashboard-panel-block.vue
@@ -22,8 +22,8 @@
   const selectedDashboard = ref(null)
 
   const fetchDashboards = async () => {
-    const { pageId, dashboardId } = props.params
-    dashboards.value = await props.metricsDashboardsService(pageId, dashboardId)
+    const { group, product } = props.params
+    dashboards.value = await props.metricsDashboardsService(group, product)
 
     // TODO: revisit the selected dashboard when the filter is implemented
     selectedDashboard.value = dashboards.value[0]
diff --git a/src/views/Metrics/blocks/tabs-page-block.vue b/src/views/Metrics/blocks/tabs-page-block.vue
index 2d872e380..7629e6516 100644
--- a/src/views/Metrics/blocks/tabs-page-block.vue
+++ b/src/views/Metrics/blocks/tabs-page-block.vue
@@ -31,7 +31,7 @@
 
   const selectedGroup = ref(null)
   const setCurrentGroup = () => {
-    selectedGroup.value = metricsGroups.value.find((group) => group.id == props.params?.pageId)
+    selectedGroup.value = metricsGroups.value.find((group) => group.value == props.params.group)
   }
 
   watch(
@@ -58,15 +58,15 @@
   }
 
   const getCurrentProductIdx = () => {
-    const idx = metricsProducts.value.findIndex((product) => product.id == props.params.dashboardId)
+    const idx = metricsProducts.value.findIndex((product) => product.path == props.params.product)
 
     return idx < 0 ? 0 : idx
   }
 
   const setNewParams = () => {
     router.replace({
-      name: 'metrics',
-      params: { pageId: selectedGroup.value.id, dashboardId: selectedProduct.value.id }
+      name: 'real-time-metrics',
+      params: { group: selectedGroup.value.value, product: selectedProduct.value.path }
     })
   }
 

From cc4a28a757bf30c46985ef885c657fa79c149d6b Mon Sep 17 00:00:00 2001
From: Matheus Sunderhus <matheus.sunderhus@azion.com>
Date: Wed, 17 Jan 2024 15:18:33 -0300
Subject: [PATCH 127/135] chore: add eslint rule to remove variables with only
 one characters

---
 .eslintrc.cjs                                 |  3 ++-
 src/helpers/parse-api-body.js                 |  2 +-
 src/router/hooks/beforeEachRoute.js           |  2 +-
 src/router/routes/signup-routes/index.js      |  2 +-
 .../routes/switch-account-routes/index.js     |  2 +-
 .../users-services/list-users-service.js      |  4 ++--
 .../mfa-authenticate-block/index.vue          |  4 ++--
 src/templates/mfa-setup-block/index.vue       |  4 ++--
 src/templates/search-block/index.vue          |  6 ++---
 src/templates/template-engine-block/index.vue |  4 ++--
 src/templates/toast-block/index.vue           |  2 +-
 .../list-credentials-service.test.js          |  4 ++--
 .../list-edge-applications-service.test.js    |  4 ++--
 .../list-edge-functions-service.test.js       |  4 ++--
 .../list-service-edge-node-service.test.js    |  4 ++--
 .../list-resources-services.test.js           |  4 ++--
 .../list-edge-service-services.test.js        |  4 ++--
 .../list-personal-tokens-service.test.js      |  4 ++--
 .../list-real-time-purge.test.js              |  2 +-
 src/tests/utils/localeMock.js                 |  2 +-
 src/views/IntelligentDNS/EditView.vue         |  4 ++--
 src/views/Marketplace/MarketplaceHomeView.vue | 22 ++++++++++---------
 .../Marketplace/drawer/IntegrationInstall.vue |  2 +-
 .../FormFields/FormFieldsPersonalToken.vue    | 17 +++++++-------
 .../FormFields/FormFieldsYourSettings.vue     |  4 ++--
 25 files changed, 60 insertions(+), 56 deletions(-)

diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 8aed9adcf..15cf75e67 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -19,6 +19,7 @@ module.exports = {
   },
   rules: {
     'no-case-declarations': 0,
-    'no-console': 'error'
+    'no-console': 'error',
+    'id-length': ['error', { min: 2 }]
   }
 }
diff --git a/src/helpers/parse-api-body.js b/src/helpers/parse-api-body.js
index 031904eba..b86cbbf0c 100644
--- a/src/helpers/parse-api-body.js
+++ b/src/helpers/parse-api-body.js
@@ -1,5 +1,5 @@
 const snakeToCamelCase = (str) => {
-  return str.replace(/_([a-z])/g, function (_, letter) {
+  return str.replace(/_([a-z])/g, function (__, letter) {
     return letter.toUpperCase()
   })
 }
diff --git a/src/router/hooks/beforeEachRoute.js b/src/router/hooks/beforeEachRoute.js
index 03a2bb9ef..2e9d3a3fb 100644
--- a/src/router/hooks/beforeEachRoute.js
+++ b/src/router/hooks/beforeEachRoute.js
@@ -3,7 +3,7 @@ import { logoutService } from '@/services/auth-services'
 import { useAccountStore } from '@/stores/account'
 import { useLoadingStore } from '@/stores/loading'
 
-export default async function beforeEachRoute(to, _, next) {
+export default async function beforeEachRoute(to, __, next) {
   const accountStore = useAccountStore()
   const loadingStore = useLoadingStore()
 
diff --git a/src/router/routes/signup-routes/index.js b/src/router/routes/signup-routes/index.js
index 88789ddae..64b50793f 100644
--- a/src/router/routes/signup-routes/index.js
+++ b/src/router/routes/signup-routes/index.js
@@ -45,7 +45,7 @@ export const signupRoutes = {
       meta: {
         hideNavigation: true
       },
-      beforeEnter: (_, __, next) => {
+      beforeEnter: (__, ___, next) => {
         const accountStore = useAccountStore()
         if (accountStore.isFirstLogin) {
           next()
diff --git a/src/router/routes/switch-account-routes/index.js b/src/router/routes/switch-account-routes/index.js
index 77ff4039f..65cb4bdcc 100644
--- a/src/router/routes/switch-account-routes/index.js
+++ b/src/router/routes/switch-account-routes/index.js
@@ -9,7 +9,7 @@ export const switchAccountRoutes = {
   meta: {
     isPublic: true
   },
-  beforeEnter: async (_, __, next) => {
+  beforeEnter: async (__, ___, next) => {
     const accountHandler = new AccountHandler(
       AuthServices.switchAccountService,
       listTypeAccountService
diff --git a/src/services/users-services/list-users-service.js b/src/services/users-services/list-users-service.js
index 3d6863b3b..8e40669b3 100644
--- a/src/services/users-services/list-users-service.js
+++ b/src/services/users-services/list-users-service.js
@@ -56,8 +56,8 @@ const adapt = (httpResponse) => {
         email: user.email,
         teams:
           user.teams.length > 1
-            ? user.teams.map((t) => t.name).join(', ')
-            : user.teams.map((t) => t.name),
+            ? user.teams.map((team) => team.name).join(', ')
+            : user.teams.map((team) => team.name),
         mfa: ACTIVE_AS_TAG[user.two_factor_enabled],
         status: ACTIVE_AS_TAG[user.is_active],
         owner: OWNER_AS_TAG[user.is_account_owner]
diff --git a/src/templates/mfa-authenticate-block/index.vue b/src/templates/mfa-authenticate-block/index.vue
index b9fe65ab6..c33f8d3f8 100644
--- a/src/templates/mfa-authenticate-block/index.vue
+++ b/src/templates/mfa-authenticate-block/index.vue
@@ -93,8 +93,8 @@
     event.preventDefault()
     const pastedData = event.clipboardData.getData('text')
 
-    for (let i = 0; i < pastedData.length; i++) {
-      digitsMfa[i].value.value = pastedData[i]
+    for (let mfaDigitIndex = 0; mfaDigitIndex < pastedData.length; mfaDigitIndex++) {
+      digitsMfa[mfaDigitIndex].value.value = pastedData[mfaDigitIndex]
     }
   }
 
diff --git a/src/templates/mfa-setup-block/index.vue b/src/templates/mfa-setup-block/index.vue
index 87aa5b686..052e70c9a 100644
--- a/src/templates/mfa-setup-block/index.vue
+++ b/src/templates/mfa-setup-block/index.vue
@@ -171,8 +171,8 @@
     event.preventDefault()
     const pastedData = event.clipboardData.getData('text')
 
-    for (let i = 0; i < pastedData.length; i++) {
-      digitsMfa[i].value.value = pastedData[i]
+    for (let mfaDigitIndex = 0; mfaDigitIndex < pastedData.length; mfaDigitIndex++) {
+      digitsMfa[mfaDigitIndex].value.value = pastedData[mfaDigitIndex]
     }
   }
 
diff --git a/src/templates/search-block/index.vue b/src/templates/search-block/index.vue
index b05e33c65..2cc5b92ef 100644
--- a/src/templates/search-block/index.vue
+++ b/src/templates/search-block/index.vue
@@ -75,7 +75,7 @@
   import PrimeDialog from 'primevue/dialog'
   import PrimeButton from 'primevue/button'
 
-  const { meta, k, control } = useMagicKeys()
+  const { meta, k: keyboardKeyK, control } = useMagicKeys()
 
   defineOptions({ name: 'search-block' })
 
@@ -87,7 +87,7 @@
   }
 
   watchEffect(() => {
-    if (control.value && k.value) openSearch()
-    if (meta.value && k.value) openSearch()
+    if (control.value && keyboardKeyK.value) openSearch()
+    if (meta.value && keyboardKeyK.value) openSearch()
   })
 </script>
diff --git a/src/templates/template-engine-block/index.vue b/src/templates/template-engine-block/index.vue
index 5e28e8744..62f2c8797 100644
--- a/src/templates/template-engine-block/index.vue
+++ b/src/templates/template-engine-block/index.vue
@@ -312,7 +312,7 @@
           payload.push(...group.fields)
         })
       }
-      payload.forEach((_, index) => {
+      payload.forEach((__, index) => {
         payload[index] = JSON.parse(JSON.stringify(payload[index]))
         const sanitizedField = {
           field: payload[index].name,
@@ -321,7 +321,7 @@
         }
 
         // Hidden field
-        const hiddenField = props.hiddenFields.find((i) => i.name === payload[index].name)
+        const hiddenField = props.hiddenFields.find((field) => field.name === payload[index].name)
         if (hiddenField) {
           sanitizedField.value = hiddenField.value
         }
diff --git a/src/templates/toast-block/index.vue b/src/templates/toast-block/index.vue
index 74ec64769..9bd29a2f5 100644
--- a/src/templates/toast-block/index.vue
+++ b/src/templates/toast-block/index.vue
@@ -90,7 +90,7 @@
     },
     methods: {
       getValue({ id }) {
-        return this.progress.find((i) => i.id === id)?.value || 0
+        return this.progress.find((toastProgress) => toastProgress.id === id)?.value || 0
       },
       getProgressBarStyle({ severity }) {
         let color = 'black'
diff --git a/src/tests/services/credentials-services/list-credentials-service.test.js b/src/tests/services/credentials-services/list-credentials-service.test.js
index 4873abe7d..59a695b67 100644
--- a/src/tests/services/credentials-services/list-credentials-service.test.js
+++ b/src/tests/services/credentials-services/list-credentials-service.test.js
@@ -6,8 +6,8 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 const localeMock = (locale = 'en') => {
   const DateTimeFormat = Intl.DateTimeFormat
   vi.spyOn(window.global.Intl, 'DateTimeFormat')
-    .mockImplementationOnce((_, options) => DateTimeFormat(locale, { ...options }))
-    .mockImplementationOnce((_, options) => DateTimeFormat(locale, { ...options }))
+    .mockImplementationOnce((__, options) => DateTimeFormat(locale, { ...options }))
+    .mockImplementationOnce((__, options) => DateTimeFormat(locale, { ...options }))
 }
 
 const fixtures = {
diff --git a/src/tests/services/edge-application-services/list-edge-applications-service.test.js b/src/tests/services/edge-application-services/list-edge-applications-service.test.js
index 49b6e8cc1..e853c8daf 100644
--- a/src/tests/services/edge-application-services/list-edge-applications-service.test.js
+++ b/src/tests/services/edge-application-services/list-edge-applications-service.test.js
@@ -5,8 +5,8 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 const localeMock = (locale = 'en') => {
   const DateTimeFormat = Intl.DateTimeFormat
   vi.spyOn(window.global.Intl, 'DateTimeFormat')
-    .mockImplementationOnce((_, options) => DateTimeFormat(locale, { ...options }))
-    .mockImplementationOnce((_, options) => DateTimeFormat(locale, { ...options }))
+    .mockImplementationOnce((__, options) => DateTimeFormat(locale, { ...options }))
+    .mockImplementationOnce((__, options) => DateTimeFormat(locale, { ...options }))
 }
 
 const fixtures = {
diff --git a/src/tests/services/edge-functions-services/list-edge-functions-service.test.js b/src/tests/services/edge-functions-services/list-edge-functions-service.test.js
index c4bfd88b0..6a626aea3 100644
--- a/src/tests/services/edge-functions-services/list-edge-functions-service.test.js
+++ b/src/tests/services/edge-functions-services/list-edge-functions-service.test.js
@@ -5,8 +5,8 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 const localeMock = (locale = 'en') => {
   const DateTimeFormat = Intl.DateTimeFormat
   vi.spyOn(window.global.Intl, 'DateTimeFormat')
-    .mockImplementationOnce((_, options) => DateTimeFormat(locale, { ...options }))
-    .mockImplementationOnce((_, options) => DateTimeFormat(locale, { ...options }))
+    .mockImplementationOnce((__, options) => DateTimeFormat(locale, { ...options }))
+    .mockImplementationOnce((__, options) => DateTimeFormat(locale, { ...options }))
 }
 
 const fixtures = {
diff --git a/src/tests/services/edge-node-service-services/list-service-edge-node-service.test.js b/src/tests/services/edge-node-service-services/list-service-edge-node-service.test.js
index b311b7832..95a04b6ff 100644
--- a/src/tests/services/edge-node-service-services/list-service-edge-node-service.test.js
+++ b/src/tests/services/edge-node-service-services/list-service-edge-node-service.test.js
@@ -5,8 +5,8 @@ import { describe, expect, it, vi } from 'vitest'
 const localeMock = (locale = 'en') => {
   const DateTimeFormat = Intl.DateTimeFormat
   vi.spyOn(window.global.Intl, 'DateTimeFormat')
-    .mockImplementationOnce((_, options) => DateTimeFormat(locale, { ...options }))
-    .mockImplementationOnce((_, options) => DateTimeFormat(locale, { ...options }))
+    .mockImplementationOnce((__, options) => DateTimeFormat(locale, { ...options }))
+    .mockImplementationOnce((__, options) => DateTimeFormat(locale, { ...options }))
 }
 
 const fixtures = {
diff --git a/src/tests/services/edge-service-resources-services/list-resources-services.test.js b/src/tests/services/edge-service-resources-services/list-resources-services.test.js
index 236166468..24d683d70 100644
--- a/src/tests/services/edge-service-resources-services/list-resources-services.test.js
+++ b/src/tests/services/edge-service-resources-services/list-resources-services.test.js
@@ -5,8 +5,8 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 const localeMock = (locale = 'en') => {
   const DateTimeFormat = Intl.DateTimeFormat
   vi.spyOn(window.global.Intl, 'DateTimeFormat')
-    .mockImplementationOnce((_, options) => DateTimeFormat(locale, { ...options }))
-    .mockImplementationOnce((_, options) => DateTimeFormat(locale, { ...options }))
+    .mockImplementationOnce((__, options) => DateTimeFormat(locale, { ...options }))
+    .mockImplementationOnce((__, options) => DateTimeFormat(locale, { ...options }))
 }
 
 const fixtures = {
diff --git a/src/tests/services/edge-service-services/list-edge-service-services.test.js b/src/tests/services/edge-service-services/list-edge-service-services.test.js
index 449b33797..582fa4755 100644
--- a/src/tests/services/edge-service-services/list-edge-service-services.test.js
+++ b/src/tests/services/edge-service-services/list-edge-service-services.test.js
@@ -5,8 +5,8 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 const localeMock = (locale = 'en') => {
   const DateTimeFormat = Intl.DateTimeFormat
   vi.spyOn(window.global.Intl, 'DateTimeFormat')
-    .mockImplementationOnce((_, options) => DateTimeFormat(locale, { ...options }))
-    .mockImplementationOnce((_, options) => DateTimeFormat(locale, { ...options }))
+    .mockImplementationOnce((__, options) => DateTimeFormat(locale, { ...options }))
+    .mockImplementationOnce((__, options) => DateTimeFormat(locale, { ...options }))
 }
 
 const fixtures = {
diff --git a/src/tests/services/personal-tokens-services/list-personal-tokens-service.test.js b/src/tests/services/personal-tokens-services/list-personal-tokens-service.test.js
index 824812a71..2a77473ec 100644
--- a/src/tests/services/personal-tokens-services/list-personal-tokens-service.test.js
+++ b/src/tests/services/personal-tokens-services/list-personal-tokens-service.test.js
@@ -5,8 +5,8 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 const localeMock = (locale = 'en') => {
   const DateTimeFormat = Intl.DateTimeFormat
   vi.spyOn(window.global.Intl, 'DateTimeFormat')
-    .mockImplementationOnce((_, options) => DateTimeFormat(locale, { ...options }))
-    .mockImplementationOnce((_, options) => DateTimeFormat(locale, { ...options }))
+    .mockImplementationOnce((__, options) => DateTimeFormat(locale, { ...options }))
+    .mockImplementationOnce((__, options) => DateTimeFormat(locale, { ...options }))
 }
 
 const fixtures = {
diff --git a/src/tests/services/real-time-purge/list-real-time-purge.test.js b/src/tests/services/real-time-purge/list-real-time-purge.test.js
index e16177393..2acde101e 100644
--- a/src/tests/services/real-time-purge/list-real-time-purge.test.js
+++ b/src/tests/services/real-time-purge/list-real-time-purge.test.js
@@ -6,7 +6,7 @@ import graphQLApi from '@/services/axios/makeEventsApi'
 
 const localeMock = (locale = 'en') => {
   const DateTimeFormat = Intl.DateTimeFormat
-  vi.spyOn(window.global.Intl, 'DateTimeFormat').mockImplementation((_, options) =>
+  vi.spyOn(window.global.Intl, 'DateTimeFormat').mockImplementation((__, options) =>
     DateTimeFormat(locale, { ...options })
   )
 }
diff --git a/src/tests/utils/localeMock.js b/src/tests/utils/localeMock.js
index d1d033eab..8b672b580 100644
--- a/src/tests/utils/localeMock.js
+++ b/src/tests/utils/localeMock.js
@@ -2,7 +2,7 @@ import { vi } from 'vitest'
 
 const localeMock = (locale = 'en') => {
   const DateTimeFormat = Intl.DateTimeFormat
-  vi.spyOn(window.global.Intl, 'DateTimeFormat').mockImplementationOnce((_, options) =>
+  vi.spyOn(window.global.Intl, 'DateTimeFormat').mockImplementationOnce((__, options) =>
     DateTimeFormat(locale, { ...options })
   )
 }
diff --git a/src/views/IntelligentDNS/EditView.vue b/src/views/IntelligentDNS/EditView.vue
index 71aa8eb1d..ce1e11122 100644
--- a/src/views/IntelligentDNS/EditView.vue
+++ b/src/views/IntelligentDNS/EditView.vue
@@ -164,8 +164,8 @@
     }
   }
 
-  const changeRouteByClickingOnTab = (e) => {
-    if (e.index === 0) {
+  const changeRouteByClickingOnTab = (tabEvent) => {
+    if (tabEvent.index === 0) {
       router.push({ name: 'edit-intelligent-dns', params: { id: intelligentDNSID.value } })
     } else {
       router.push({
diff --git a/src/views/Marketplace/MarketplaceHomeView.vue b/src/views/Marketplace/MarketplaceHomeView.vue
index 4862d6344..d1b5349f4 100644
--- a/src/views/Marketplace/MarketplaceHomeView.vue
+++ b/src/views/Marketplace/MarketplaceHomeView.vue
@@ -217,8 +217,8 @@
       searching.value = !!search.value
       loading.value = true
       const payload = { type: PAGE_TYPE, search: search.value }
-      const items = await loadSolutions(payload)
-      solutions.value = items.filter((i) => !i.instanceType.isTemplate)
+      const loadedSolutions = await loadSolutions(payload)
+      solutions.value = loadedSolutions.filter((solution) => !solution.instanceType.isTemplate)
     } catch (error) {
       $toast.add({ ...ERROR_PROPS, summary: error })
     } finally {
@@ -243,11 +243,11 @@
   }
 
   const featured = computed(() => {
-    return solutions.value.filter((i) => i.featured)
+    return solutions.value.filter((solution) => solution.featured)
   })
 
   const released = computed(() => {
-    return solutions.value.filter((i) => i.released)
+    return solutions.value.filter((solution) => solution.released)
   })
 
   const allSelected = computed(() => {
@@ -255,13 +255,15 @@
   })
 
   const categoriesList = computed(() => {
-    let mapped = categories.value.map((i) => ({
-      name: i.name,
-      code: i.slug,
-      total: i.solutionsCount
+    let mappedCategories = categories.value.map((category) => ({
+      name: category.name,
+      code: category.slug,
+      total: category.solutionsCount
     }))
-    mapped = mapped.filter((i) => i.total > 0 && i.code !== 'build')
+    mappedCategories = mappedCategories.filter(
+      (category) => category.total > 0 && category.code !== 'build'
+    )
 
-    return mapped.length ? [CATEGORY_ALL, ...mapped] : []
+    return mappedCategories.length ? [CATEGORY_ALL, ...mappedCategories] : []
   })
 </script>
diff --git a/src/views/Marketplace/drawer/IntegrationInstall.vue b/src/views/Marketplace/drawer/IntegrationInstall.vue
index 9c1ed76ec..e7c605d4d 100644
--- a/src/views/Marketplace/drawer/IntegrationInstall.vue
+++ b/src/views/Marketplace/drawer/IntegrationInstall.vue
@@ -175,7 +175,7 @@
   })
 
   const warnUpdate = computed(() => {
-    const app = edgeApps.value.find((i) => i.value === edgeApplication.value)
+    const app = edgeApps.value.find((edgeApp) => edgeApp.value === edgeApplication.value)
     return app?.upgradeable
   })
 
diff --git a/src/views/PersonalTokens/FormFields/FormFieldsPersonalToken.vue b/src/views/PersonalTokens/FormFields/FormFieldsPersonalToken.vue
index d6c0177db..afa18b724 100644
--- a/src/views/PersonalTokens/FormFields/FormFieldsPersonalToken.vue
+++ b/src/views/PersonalTokens/FormFields/FormFieldsPersonalToken.vue
@@ -65,23 +65,24 @@
     return value.toISOString().slice(0, -5)
   }
 
-  const convertOffset = (offset) => {
-    const [sign, H, h, M, m] = offset
-    const hours = `${H}${h}`
-    const minutes = `${M}${m}`
+  const convertOffsetToDecimal = (offset) => {
+    const [offsetSign, hourTens, hourUnits, minuteTens, minuteUnits] = offset
+    const hours = `${hourTens}${hourUnits}`
+    const minutes = `${minuteTens}${minuteUnits}`
 
-    const convert = {
+    const minuteToDecimalConversion = {
       15: 25,
       30: 50,
       45: 75
     }
-    const convertedMinutes = minutes > 0 ? convert[minutes] : minutes
 
-    return `${sign}${hours}.${convertedMinutes}`
+    const decimalMinutes = minutes > 0 ? minuteToDecimalConversion[minutes] : minutes
+
+    return `${offsetSign}${hours}.${decimalMinutes}`
   }
 
   const expiresDate = (expirationDate) => {
-    const userOffset = convertOffset(account.value.utc_offset)
+    const userOffset = convertOffsetToDecimal(account.value.utc_offset)
     const timeZoneOffsetMinutesToMilli = expirationDate.getTimezoneOffset() * 60000
     const toUTC = expirationDate.getTime() + timeZoneOffsetMinutesToMilli
     const offsetHoursToMilli = userOffset * 3600000
diff --git a/src/views/YourSettings/FormFields/FormFieldsYourSettings.vue b/src/views/YourSettings/FormFields/FormFieldsYourSettings.vue
index 36856f668..bf62f33a5 100644
--- a/src/views/YourSettings/FormFields/FormFieldsYourSettings.vue
+++ b/src/views/YourSettings/FormFields/FormFieldsYourSettings.vue
@@ -309,8 +309,8 @@
         <ul class="text-color-secondary list-inside space-y-3">
           <li
             class="flex gap-3 items-center text-color-secondary"
-            :key="i"
-            v-for="(requirement, i) in passwordRequirementsList"
+            v-for="(requirement, index) in passwordRequirementsList"
+            :key="index"
           >
             <div class="w-3">
               <span

From c2387d399fb97034d12fc5d896c3c700d0bce77d Mon Sep 17 00:00:00 2001
From: "Cicero, Feijo" <cicero.feijo@gmail.com>
Date: Wed, 17 Jan 2024 16:03:45 -0300
Subject: [PATCH 128/135] chore: update package version

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 24ebc7ab4..fe82ed4ee 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "azion-platform-kit",
-  "version": "1.6.2",
+  "version": "1.7.0",
   "private": true,
   "type": "module",
   "repository": {

From ebda3f3d18e874aea666b90bc7cbfa63a6fc5b2d Mon Sep 17 00:00:00 2001
From: Gabriel Lisboa <95422158+gablisb0a@users.noreply.github.com>
Date: Wed, 17 Jan 2024 16:31:44 -0300
Subject: [PATCH 129/135] style: include padding inline

---
 .../themes/azion-dark/extended-components/_divider.scss   | 8 +++-----
 .../themes/azion-light/extended-components/_divider.scss  | 1 +
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/assets/themes/scss/themes/azion-dark/extended-components/_divider.scss b/src/assets/themes/scss/themes/azion-dark/extended-components/_divider.scss
index bfd103c7c..d7c799350 100644
--- a/src/assets/themes/scss/themes/azion-dark/extended-components/_divider.scss
+++ b/src/assets/themes/scss/themes/azion-dark/extended-components/_divider.scss
@@ -1,4 +1,5 @@
 .p-divider {
+  padding-inline: 12px !important;
   .p-divider-content {
     background-color: $panelContentBg;
     font-weight: 500 !important;
@@ -9,12 +10,11 @@
     padding: $dividerHorizontalPadding;
 
     &:before {
-      border-top: 1px solid var(--surface-border);
+      border: 1px solid var(--surface-border);
     }
 
     .p-divider-content {
-      padding: 0 $inlineSpacing;
-      z-index: 0;
+      padding: $inlineSpacing;
     }
   }
 
@@ -28,14 +28,12 @@
 
     .p-divider-content {
       padding: $inlineSpacing 0;
-      background-color: transparent;
     }
   }
 
   &.p-divider-dashed {
     &.p-divider-horizontal:before {
       border-style: dashed;
-      background-color: transparent;
     }
   }
 }
diff --git a/src/assets/themes/scss/themes/azion-light/extended-components/_divider.scss b/src/assets/themes/scss/themes/azion-light/extended-components/_divider.scss
index bfd103c7c..0ef09d6ec 100644
--- a/src/assets/themes/scss/themes/azion-light/extended-components/_divider.scss
+++ b/src/assets/themes/scss/themes/azion-light/extended-components/_divider.scss
@@ -1,4 +1,5 @@
 .p-divider {
+  padding-inline: 12px !important;
   .p-divider-content {
     background-color: $panelContentBg;
     font-weight: 500 !important;

From 6f4ae39c11a7dba704c85921a0e56b0f0a286c05 Mon Sep 17 00:00:00 2001
From: Aloisio Bastian <aloisiomiguelb@gmail.com>
Date: Thu, 18 Jan 2024 00:05:51 -0300
Subject: [PATCH 130/135] fix: add mobile behaviour to new error responses
 button

---
 .../FormFields/FormFieldsErrorResponses.vue                     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/EdgeApplicationsErrorResponses/FormFields/FormFieldsErrorResponses.vue b/src/views/EdgeApplicationsErrorResponses/FormFields/FormFieldsErrorResponses.vue
index 9aaaefdaf..968429658 100644
--- a/src/views/EdgeApplicationsErrorResponses/FormFields/FormFieldsErrorResponses.vue
+++ b/src/views/EdgeApplicationsErrorResponses/FormFields/FormFieldsErrorResponses.vue
@@ -262,7 +262,7 @@
           </div>
         </div>
       </div>
-      <div class="flex flex-col gap-8 items-start">
+      <div class="flex flex-col gap-8 sm:items-start">
         <Divider />
         <PrimeButton
           @click="addErrorResponse"

From 837e347194df757f6b54dcb96a797427bcd58c8e Mon Sep 17 00:00:00 2001
From: HerbertJulio <herbert.julio@azion.com>
Date: Thu, 18 Jan 2024 01:19:35 -0300
Subject: [PATCH 131/135] fix: correction in UX of tabs in edge firewall

---
 .../create-edge-firewall-service.js           |  2 +
 .../edit-edge-firewall-service.js             |  2 +
 src/templates/edit-drawer-block/index.vue     |  2 +-
 src/templates/edit-form-block/index.vue       |  2 +
 .../create-edge-firewall-service.test.js      |  5 ++
 .../edit-edge-firewall-service.test.js        |  5 ++
 src/views/EdgeFirewall/EditView.vue           | 36 ++++++---
 .../FormFields/FormFieldsEdgeFirewall.vue     | 36 ++++++---
 src/views/EdgeFirewall/TabsView.vue           | 78 ++++++++++++-------
 9 files changed, 120 insertions(+), 48 deletions(-)

diff --git a/src/services/edge-firewall-services/create-edge-firewall-service.js b/src/services/edge-firewall-services/create-edge-firewall-service.js
index cba831fb4..46a4ddbb7 100644
--- a/src/services/edge-firewall-services/create-edge-firewall-service.js
+++ b/src/services/edge-firewall-services/create-edge-firewall-service.js
@@ -39,6 +39,8 @@ const mapErrorToMessage = (error) => {
       return 'Edge Firewall cannot be created because it already exists'
     case 'no_modules_enabled':
       return 'Edge Firewall cannot be created because no modules are enabled'
+    case 'domains_already_in_use':
+      return 'Edge Firewall cannot be created because the domains are already in use'
     default:
       return new Errors.UnexpectedError().message
   }
diff --git a/src/services/edge-firewall-services/edit-edge-firewall-service.js b/src/services/edge-firewall-services/edit-edge-firewall-service.js
index aad7814da..814ba6b00 100644
--- a/src/services/edge-firewall-services/edit-edge-firewall-service.js
+++ b/src/services/edge-firewall-services/edit-edge-firewall-service.js
@@ -34,6 +34,8 @@ const mapErrorToMessage = (error) => {
       return 'Edge Firewall cannot be created because it already exists'
     case 'no_modules_enabled':
       return 'Edge Firewall cannot be created because no modules are enabled'
+    case 'domains_already_in_use':
+      return 'Edge Firewall cannot be created because the domains are already in use'
     default:
       return new Errors.UnexpectedError().message
   }
diff --git a/src/templates/edit-drawer-block/index.vue b/src/templates/edit-drawer-block/index.vue
index ecb7382f1..1e59e069e 100644
--- a/src/templates/edit-drawer-block/index.vue
+++ b/src/templates/edit-drawer-block/index.vue
@@ -13,7 +13,7 @@
   const emit = defineEmits(['update:visible', 'onSuccess', 'onError'])
   const props = defineProps({
     id: {
-      type: [ String, Number ],
+      type: [String, Number],
       required: true
     },
     visible: {
diff --git a/src/templates/edit-form-block/index.vue b/src/templates/edit-form-block/index.vue
index 93cd6bcc8..7643eb996 100644
--- a/src/templates/edit-form-block/index.vue
+++ b/src/templates/edit-form-block/index.vue
@@ -88,6 +88,8 @@
       blockViewRedirection.value = false
       emit('on-edit-success', feedback)
       if (props.disableRedirect) {
+        resetForm({ values })
+        blockViewRedirection.value = true
         return
       }
       goBackToList()
diff --git a/src/tests/services/edge-firewall-services/create-edge-firewall-service.test.js b/src/tests/services/edge-firewall-services/create-edge-firewall-service.test.js
index bc42d459c..53ea1aefb 100644
--- a/src/tests/services/edge-firewall-services/create-edge-firewall-service.test.js
+++ b/src/tests/services/edge-firewall-services/create-edge-firewall-service.test.js
@@ -72,6 +72,11 @@ describe('EdgeFirewallService', () => {
       key: 'results',
       expectedError: 'Edge Firewall cannot be created because no modules are enabled'
     },
+    {
+      error: 'domains_already_in_use',
+      key: 'results',
+      expectedError: 'Edge Firewall cannot be created because the domains are already in use'
+    },
     {
       error: 'unmappedError',
       key: 'results',
diff --git a/src/tests/services/edge-firewall-services/edit-edge-firewall-service.test.js b/src/tests/services/edge-firewall-services/edit-edge-firewall-service.test.js
index f9dcc6104..c02c63986 100644
--- a/src/tests/services/edge-firewall-services/edit-edge-firewall-service.test.js
+++ b/src/tests/services/edge-firewall-services/edit-edge-firewall-service.test.js
@@ -69,6 +69,11 @@ describe('EdgeFirewallServices', () => {
       key: 'results',
       expectedError: 'Edge Firewall cannot be created because no modules are enabled'
     },
+    {
+      error: 'domains_already_in_use',
+      key: 'results',
+      expectedError: 'Edge Firewall cannot be created because the domains are already in use'
+    },
     {
       error: 'unmappedError',
       key: 'results',
diff --git a/src/views/EdgeFirewall/EditView.vue b/src/views/EdgeFirewall/EditView.vue
index 5a08f8922..28dea67ed 100644
--- a/src/views/EdgeFirewall/EditView.vue
+++ b/src/views/EdgeFirewall/EditView.vue
@@ -2,17 +2,21 @@
   import ActionBarTemplate from '@/templates/action-bar-block/action-bar-with-teleport'
   import EditFormBlock from '@/templates/edit-form-block'
   import FormFieldsEdgeFirewall from '@/views/EdgeFirewall/FormFields/FormFieldsEdgeFirewall'
+  import { ref } from 'vue'
   import * as yup from 'yup'
+
   defineOptions({ name: 'edit-edge-firewall' })
+  const emit = defineEmits(['updateFirewall'])
 
   const props = defineProps({
     editEdgeFirewallService: { type: Function, required: true },
-    loadEdgeFirewallService: { type: Function, required: true },
+    edgeFirewall: { type: Object },
     loadDomains: { type: Function, required: true },
-    updatedRedirect: { type: String, required: true },
-    showActionBar: { type: Boolean, default: false }
+    updatedRedirect: { type: String, required: true }
   })
 
+  const loadingServices = ref(false)
+
   const validationSchema = yup.object({
     name: yup.string().required().label('Name'),
     domains: yup.array().label('Domains'),
@@ -22,27 +26,39 @@
     networkProtectionEnabled: yup.boolean().label('Network Protection Enabled'),
     wafEnabled: yup.boolean().label('WAF Enabled')
   })
+
+  const loadEdgeFirewall = async () => {
+    return props.edgeFirewall
+  }
+
+  const formSubmit = async (onSubmit, values) => {
+    await onSubmit()
+    emit('updateFirewall', values)
+  }
 </script>
 
 <template>
   <div>
     <EditFormBlock
       :editService="props.editEdgeFirewallService"
-      :loadService="props.loadEdgeFirewallService"
-      :updatedRedirect="updatedRedirect"
+      :loadService="loadEdgeFirewall"
       :schema="validationSchema"
+      :updatedRedirect="updatedRedirect"
+      disableRedirect
       :isTabs="true"
     >
       <template #form>
-        <FormFieldsEdgeFirewall :domainsService="loadDomains" />
+        <FormFieldsEdgeFirewall
+          :domainsService="loadDomains"
+          v-model:loadingDomains="loadingServices"
+        />
       </template>
-      <template #action-bar="{ onSubmit, formValid, onCancel, loading }">
+      <template #action-bar="{ onSubmit, formValid, onCancel, loading, values }">
         <ActionBarTemplate
-          v-if="props.showActionBar"
-          @onSubmit="onSubmit"
+          @onSubmit="formSubmit(onSubmit, values)"
           @onCancel="onCancel"
           :loading="loading"
-          :submitDisabled="!formValid"
+          :submitDisabled="!formValid || loadingServices"
         />
       </template>
     </EditFormBlock>
diff --git a/src/views/EdgeFirewall/FormFields/FormFieldsEdgeFirewall.vue b/src/views/EdgeFirewall/FormFields/FormFieldsEdgeFirewall.vue
index 98883c9db..6101ee487 100644
--- a/src/views/EdgeFirewall/FormFields/FormFieldsEdgeFirewall.vue
+++ b/src/views/EdgeFirewall/FormFields/FormFieldsEdgeFirewall.vue
@@ -10,11 +10,16 @@
   import { computed, ref, watch } from 'vue'
 
   defineOptions({ name: 'form-fields-edge-firewall' })
+  const emit = defineEmits(['update:loadingDomains'])
 
   const props = defineProps({
     domainsService: {
       type: Function,
       required: true
+    },
+    loadingDomains: {
+      type: Boolean,
+      default: false
     }
   })
 
@@ -23,17 +28,26 @@
   const DDosProtectionUnmetered = true
 
   const { value: name } = useField('name')
-  const { value: domains } = useField('domains')
+  const { value: domains, resetField } = useField('domains')
   const { value: isActive } = useField('isActive')
   const { value: debugRules } = useField('debugRules')
+
   const { value: edgeFunctionsEnabled } = useField('edgeFunctionsEnabled')
   const { value: networkProtectionEnabled } = useField('networkProtectionEnabled')
   const { value: wafEnabled } = useField('wafEnabled')
   const domainsList = ref([PICK_LIST_SKELETON, PICK_LIST_SKELETON])
-  const loading = ref(false)
-  const classLoading = computed(() => (!loading.value ? 'pointer-events-none' : ''))
+
+  const loading = computed({
+    get: () => props.loadingDomains,
+    set: (value) => {
+      emit('update:loadingDomains', value)
+    }
+  })
+
+  const classLoading = computed(() => (loading.value ? 'pointer-events-none' : ''))
 
   const fetchDomains = async () => {
+    loading.value = true
     const responseDomains = await props.domainsService({ pageSize: 1000 })
     const alreadySelectedDomainsIds = domains.value?.map((domain) => domain) || []
 
@@ -43,12 +57,16 @@
     const notSelectedDomains = responseDomains.filter((domain) => !domain.edgeFirewallId) || []
 
     domainsList.value = [notSelectedDomains, alreadySelectedDomains]
-    loading.value = true
-  }
+    loading.value = false
 
-  watch(domainsList, (newValue) => {
-    domains.value = newValue[1]
-  })
+    resetField({
+      value: alreadySelectedDomains
+    })
+
+    watch(domainsList, (newValue) => {
+      domains.value = newValue[1]
+    })
+  }
 
   fetchDomains()
 </script>
@@ -90,7 +108,7 @@
           <template #item="slotProps">
             <div
               class="flex flex-wrap p-2 align-items-center gap-3"
-              v-if="loading"
+              v-if="!loading"
             >
               <div class="flex-1 flex flex-column gap-2">
                 <span class="font-normal">{{ slotProps.item.name }}</span>
diff --git a/src/views/EdgeFirewall/TabsView.vue b/src/views/EdgeFirewall/TabsView.vue
index 49dbc7b98..ad42647a4 100644
--- a/src/views/EdgeFirewall/TabsView.vue
+++ b/src/views/EdgeFirewall/TabsView.vue
@@ -6,7 +6,7 @@
   import TabView from 'primevue/tabview'
   import { useToast } from 'primevue/usetoast'
 
-  import { ref } from 'vue'
+  import { computed, ref } from 'vue'
   import { useRoute, useRouter } from 'vue-router'
 
   defineOptions({ name: 'tabs-edge-firewall' })
@@ -16,51 +16,47 @@
     listDomainsService: { type: Function, required: true }
   })
 
-  const mapTabs = {
-    mainSettings: 0,
+  const defaultTabs = {
+    main_settings: 0,
     functions: 1,
-    rulesEngine: 2
+    rules_engine: 2
   }
 
+  const mapTabs = ref({ ...defaultTabs })
+
   const toast = useToast()
   const route = useRoute()
   const router = useRouter()
   const activeTab = ref(0)
   const edgeFirewallId = ref(route.params.id)
-  const isEnableFunction = ref(false)
-  const responseEdgeFirewall = ref(false)
-  const title = ref('Name Rule Set')
+  const edgeFirewall = ref()
 
   const loaderEdgeFirewall = async () => {
     try {
-      if (responseEdgeFirewall.value) return responseEdgeFirewall.value
-
-      const response = await props.edgeFirewallServices.loadEdgeFirewallService({
+      return await props.edgeFirewallServices.loadEdgeFirewallService({
         id: edgeFirewallId.value
       })
-
-      const { edgeFunctionsEnabled, name } = response
-      isEnableFunction.value = edgeFunctionsEnabled
-      title.value = name
-      responseEdgeFirewall.value = response
     } catch (error) {
       toast.add({
         closable: true,
         severity: 'error',
         summary: error
       })
+
+      return router.push({ name: props.edgeFirewallServices.updatedRedirect })
     }
   }
 
   const getTabFromValue = (selectedTabIndex) => {
-    const tabNames = Object.keys(mapTabs)
-    const selectedTab = tabNames.find((tabName) => mapTabs[tabName] === selectedTabIndex)
+    const tabNames = Object.keys(mapTabs.value)
+    const selectedTab = tabNames.find((tabName) => mapTabs.value[tabName] === selectedTabIndex)
     return selectedTab
   }
 
-  const changeRouteByClickingOnTab = (event) => {
-    const tab = getTabFromValue(event.index)
-    activeTab.value = event.index
+  const changeRouteByClickingOnTab = ({ index = 0 }) => {
+    verifyTab(edgeFirewall.value)
+    const tab = getTabFromValue(index)
+    activeTab.value = index
     const params = {
       id: edgeFirewallId.value,
       tab
@@ -71,12 +67,37 @@
     })
   }
 
+  const verifyTab = ({ edgeFunctionsEnabled }) => {
+    if (!edgeFunctionsEnabled) {
+      delete mapTabs.value.functions
+      mapTabs.value = Object.entries(mapTabs.value).reduce((acc, [key], index) => {
+        acc[key] = index
+        return acc
+      }, {})
+      return
+    }
+    mapTabs.value = { ...defaultTabs }
+  }
+
   const renderTabCurrentRouter = async () => {
-    await loaderEdgeFirewall()
-    const { tab } = route.params
-    const defaultTabIndex = 0
-    const activeTabIndexByRoute = mapTabs[tab] || defaultTabIndex
-    activeTab.value = activeTabIndexByRoute
+    const { tab = 0 } = route.params
+    edgeFirewall.value = await loaderEdgeFirewall()
+    verifyTab(edgeFirewall.value)
+    const activeTabIndexByRoute = mapTabs.value[tab]
+    changeRouteByClickingOnTab({ index: activeTabIndexByRoute })
+  }
+
+  const title = computed(() => {
+    return edgeFirewall.value?.name || ''
+  })
+
+  const isEnableFunction = computed(() => {
+    return edgeFirewall.value?.edgeFunctionsEnabled
+  })
+
+  const updatedFirewall = (firewall) => {
+    edgeFirewall.value = { ...firewall }
+    verifyTab(edgeFirewall.value)
   }
 
   renderTabCurrentRouter()
@@ -92,15 +113,16 @@
         :activeIndex="activeTab"
         @tab-click="changeRouteByClickingOnTab"
         class="w-full h-full"
-        v-if="responseEdgeFirewall"
+        v-if="edgeFirewall"
       >
         <TabPanel header="Main Settings">
           <EditView
+            v-if="mapTabs.main_settings === activeTab"
             :editEdgeFirewallService="edgeFirewallServices.editEdgeFirewallService"
-            :loadEdgeFirewallService="loaderEdgeFirewall"
+            :edgeFirewall="edgeFirewall"
             :loadDomains="props.listDomainsService"
             :updatedRedirect="edgeFirewallServices.updatedRedirect"
-            :showActionBar="activeTab === mapTabs.mainSettings"
+            @updateFirewall="updatedFirewall"
           />
         </TabPanel>
         <TabPanel

From a7330651ef8c3e1ef0eb58cb17fa00883aeeb2ba Mon Sep 17 00:00:00 2001
From: HerbertJulio <herbert.julio@azion.com>
Date: Thu, 18 Jan 2024 01:25:14 -0300
Subject: [PATCH 132/135] fix: correction in redirect

---
 src/views/AccountSettings/AccountSettingsView.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/views/AccountSettings/AccountSettingsView.vue b/src/views/AccountSettings/AccountSettingsView.vue
index c85cc970e..7032b54ae 100644
--- a/src/views/AccountSettings/AccountSettingsView.vue
+++ b/src/views/AccountSettings/AccountSettingsView.vue
@@ -1,9 +1,9 @@
 <script setup>
-  import * as yup from 'yup'
-  import EditFormBlock from '@/templates/edit-form-block'
+  import ActionBarBlockWithTeleport from '@/templates/action-bar-block/action-bar-with-teleport'
   import ContentBlock from '@/templates/content-block'
+  import EditFormBlock from '@/templates/edit-form-block'
   import PageHeadingBlock from '@/templates/page-heading-block'
-  import ActionBarBlockWithTeleport from '@/templates/action-bar-block/action-bar-with-teleport'
+  import * as yup from 'yup'
   import FormFieldsAccountSettings from './FormFields/FormFieldsAccountSettings'
 
   defineProps({
@@ -55,7 +55,7 @@
       <EditFormBlock
         :editService="updateAccountSettingsService"
         :loadService="getAccountSettingsService"
-        updatedRedirect="account-settings"
+        updatedRedirect="home"
         :schema="validationSchema"
       >
         <template #form>

From d8624ae4703e3584ceb8ec51fcdf8d636a16d7e8 Mon Sep 17 00:00:00 2001
From: "Cicero, Feijo" <cicero.feijo@gmail.com>
Date: Thu, 18 Jan 2024 09:44:03 -0300
Subject: [PATCH 133/135] chore: update package version

---
 src/templates/edit-drawer-block/index.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/templates/edit-drawer-block/index.vue b/src/templates/edit-drawer-block/index.vue
index ecb7382f1..1e59e069e 100644
--- a/src/templates/edit-drawer-block/index.vue
+++ b/src/templates/edit-drawer-block/index.vue
@@ -13,7 +13,7 @@
   const emit = defineEmits(['update:visible', 'onSuccess', 'onError'])
   const props = defineProps({
     id: {
-      type: [ String, Number ],
+      type: [String, Number],
       required: true
     },
     visible: {

From 16d82a0be2f63d3bb27c714a67cf1c307849bb09 Mon Sep 17 00:00:00 2001
From: Aloisio Bastian <aloisiomiguelb@gmail.com>
Date: Thu, 18 Jan 2024 11:41:05 -0300
Subject: [PATCH 134/135] fix: make custom status code field the same size as
 error caching ttl

---
 .../FormFields/FormFieldsErrorResponses.vue                     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/EdgeApplicationsErrorResponses/FormFields/FormFieldsErrorResponses.vue b/src/views/EdgeApplicationsErrorResponses/FormFields/FormFieldsErrorResponses.vue
index 968429658..bee290466 100644
--- a/src/views/EdgeApplicationsErrorResponses/FormFields/FormFieldsErrorResponses.vue
+++ b/src/views/EdgeApplicationsErrorResponses/FormFields/FormFieldsErrorResponses.vue
@@ -246,7 +246,7 @@
               description="Add a path to an error page created in the source."
             />
           </div>
-          <div class="flex flex-col sm:max-w-lg w-full gap-2">
+          <div class="flex flex-col w-full sm:max-w-xs gap-2">
             <label
               for="maximun-ttl-seconds"
               class="text-color text-sm font-medium leading-5"

From f7333f92735bdab25eb90ad89e0f84dc96fbf5a9 Mon Sep 17 00:00:00 2001
From: Aloisio Bastian <aloisiomiguelb@gmail.com>
Date: Thu, 18 Jan 2024 11:47:41 -0300
Subject: [PATCH 135/135] fix: remove unused b tag

---
 .../FormFields/FormFieldsErrorResponses.vue                   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/views/EdgeApplicationsErrorResponses/FormFields/FormFieldsErrorResponses.vue b/src/views/EdgeApplicationsErrorResponses/FormFields/FormFieldsErrorResponses.vue
index bee290466..07f59c2f5 100644
--- a/src/views/EdgeApplicationsErrorResponses/FormFields/FormFieldsErrorResponses.vue
+++ b/src/views/EdgeApplicationsErrorResponses/FormFields/FormFieldsErrorResponses.vue
@@ -161,7 +161,7 @@
         align="left"
         type="dashed"
       >
-        <b>Then</b>
+        Then
       </Divider>
       <div class="flex flex-wrap gap-6">
         <div class="flex flex-col w-full sm:max-w-xs gap-2">
@@ -203,7 +203,7 @@
               align="left"
               type="dashed"
             >
-              <b>And</b>
+              And
             </Divider>
             <PrimeButton
               @click="removeErrorResponse(index)"