From 64119c4bfec16ceea542416ca4a309ab418e7464 Mon Sep 17 00:00:00 2001
From: Aloisio Bastian <aloisiomiguelb@gmail.com>
Date: Thu, 18 Jan 2024 00:56:35 -0300
Subject: [PATCH 01/28] refactor: remove-list-box to use ul

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

diff --git a/src/templates/create-modal-block/index.vue b/src/templates/create-modal-block/index.vue
index 11a95ac82..ebc5e2091 100644
--- a/src/templates/create-modal-block/index.vue
+++ b/src/templates/create-modal-block/index.vue
@@ -2,7 +2,6 @@
   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'
@@ -22,7 +21,6 @@
   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')
@@ -146,28 +144,30 @@
   }
 
   const onTabChange = async (target) => {
-    selectedTab.value = target.value || selectedTab.value
-    if (target.value === 'browse' && browseTemplates.value.length === 0) {
-      await loadBrowse()
+    if(!isLoading.value) {
+      selectedTab.value = target.value || selectedTab.value
+      if (target.value === 'browse' && 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">
-      <Listbox
-        @change="onTabChange"
-        v-model="selectedTabControl"
-        :options="items"
-        optionLabel="label"
-        :disabled="isLoading"
-        optionValue="value"
-        :pt="{
-          list: { class: 'p-0' }
-        }"
-        class="bg-transparent border-none sm:min-w-[240px] p-0 md:fixed"
-      />
+       <ul class="flex flex-col gap-4">
+          <li v-for="(menuitem, index) in items" :key="index"> 
+            <a
+              class= "p-button p-button-text p-button-primary p-button-sm whitespace-nowrap hover:bg-header-button-hover flex"
+              :class="{ 'p-selectbutton': menuitem.value === selectedTab, 'p-disabled': isLoading }"
+              @click="onTabChange(menuitem)"
+            >
+              <span>{{ menuitem.label }}</span>
+            </a>
+          </li>
+        </ul>
     </div>
 
     <div class="overflow-auto w-full flex flex-col">

From d199f2f3978a6c8bd3813d43c413ec9f2da3baa4 Mon Sep 17 00:00:00 2001
From: peterpaulo-azion <peterson.silva@azion.com>
Date: Thu, 18 Jan 2024 11:19:37 -0300
Subject: [PATCH 02/28] feat: form fields edge application rules engine

---
 src/helpers/azion-documentation-catalog.js    |   1 +
 .../routes/edge-application-routes/index.js   |   9 +-
 .../create-rules-engine-service.js            |  83 +++
 .../index.js                                  |   4 +
 .../load-rules-engine-service.js              |  32 +
 src/templates/edit-drawer-block/index.vue     |   9 +-
 .../form-fields-inputs/fieldDropdown.vue      | 104 +++
 .../form-fields-inputs/fieldInputGroup.vue    |  19 +
 .../form-fields-inputs/fieldText.vue          |  15 +
 src/views/EdgeApplications/TabsView.vue       |   5 +-
 .../Drawer/index.vue                          | 194 ++++++
 .../FormFieldsEdgeApplicationsRulesEngine.vue | 595 ++++++++++++++++++
 .../EdgeApplicationsRulesEngine/ListView.vue  |  77 ++-
 13 files changed, 1137 insertions(+), 10 deletions(-)
 create mode 100644 src/services/edge-application-rules-engine-services/create-rules-engine-service.js
 create mode 100644 src/services/edge-application-rules-engine-services/load-rules-engine-service.js
 create mode 100644 src/templates/form-fields-inputs/fieldDropdown.vue
 create mode 100644 src/views/EdgeApplicationsRulesEngine/Drawer/index.vue
 create mode 100644 src/views/EdgeApplicationsRulesEngine/FormFields/FormFieldsEdgeApplicationsRulesEngine.vue

diff --git a/src/helpers/azion-documentation-catalog.js b/src/helpers/azion-documentation-catalog.js
index 959bec12b..7917ed872 100644
--- a/src/helpers/azion-documentation-catalog.js
+++ b/src/helpers/azion-documentation-catalog.js
@@ -21,6 +21,7 @@ export const documentationCatalog = {
   edgeApplicationCacheSettings: () => openSearchResult('cache settings'),
   edgeApplicationFunctions: () => openSearchResult('edge application functions instances'),
   edgeApplicationDeviceGroups: () => openSearchResult('edge application device groups'),
+  edgeApplicationRulesEngine: () => openSearchResult('edge application rules engine'),
   users: () => openSearchResult('users'),
   activityHistory: () => openSearchResult('activity history'),
   edgeNodes: () => openSearchResult('edge nodes'),
diff --git a/src/router/routes/edge-application-routes/index.js b/src/router/routes/edge-application-routes/index.js
index e7e75ba6e..2ad92e774 100644
--- a/src/router/routes/edge-application-routes/index.js
+++ b/src/router/routes/edge-application-routes/index.js
@@ -94,7 +94,14 @@ export const edgeApplicationRoutes = {
         rulesEngineServices: {
           listRulesEngineService: RulesEngineService.listRulesEngineService,
           deleteRulesEngineService: RulesEngineService.deleteRulesEngineService,
-          reorderRulesEngine: RulesEngineService.reorderRulesEngine
+          editRulesEngineService: RulesEngineService.editRulesEngineService,
+          createRulesEngineService: RulesEngineService.createRulesEngineService,
+          loadRulesEngineService: RulesEngineService.loadRulesEngineService,
+          reorderRulesEngine: RulesEngineService.reorderRulesEngine,
+          documentationService: Helpers.documentationCatalog.edgeApplicationRulesEngine,
+          listOriginsService: OriginsService.listOriginsService,
+          listCacheSettingsService: CacheSettingsServices.listCacheSettingsService,
+          listEdgeApplicationFunctionsService: FunctionsService.listEdgeApplicationFunctionsService,
         },
         clipboardWrite: Helpers.clipboardWrite
       },
diff --git a/src/services/edge-application-rules-engine-services/create-rules-engine-service.js b/src/services/edge-application-rules-engine-services/create-rules-engine-service.js
new file mode 100644
index 000000000..07a7f4ab2
--- /dev/null
+++ b/src/services/edge-application-rules-engine-services/create-rules-engine-service.js
@@ -0,0 +1,83 @@
+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 createRulesEngineService = async (payload) => {
+  const { edgeApplicationId, phase } = payload
+  let httpResponse = await AxiosHttpClientAdapter.request({
+    url: `${makeEdgeApplicationBaseUrl()}/${edgeApplicationId}/rules_engine/${phase}/rules`,
+    method: 'POST',
+    body: adapt(payload)
+  })
+
+  return parseHttpResponse(httpResponse, edgeApplicationId)
+}
+
+const adapt = (payload) => {
+  return {
+    name: payload.name,
+    phase: payload.phase,
+    criteria: payload.criteria,
+    behaviors: payload.behaviors,
+    is_active: payload.isActive,
+    description: payload.description,
+  }
+}
+
+/**
+ * @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 201:
+      return {
+        feedback: 'Your Rules Engine 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:
+      const apiError500 = extractApiError(httpResponse)
+      throw new Error(apiError500).message
+    default:
+      throw new Errors.UnexpectedError().message
+  }
+}
diff --git a/src/services/edge-application-rules-engine-services/index.js b/src/services/edge-application-rules-engine-services/index.js
index ca3cedafa..e88153603 100644
--- a/src/services/edge-application-rules-engine-services/index.js
+++ b/src/services/edge-application-rules-engine-services/index.js
@@ -1,11 +1,15 @@
 import { listRulesEngineService } from './list-rules-engine-service'
 import { deleteRulesEngineService } from './delete-rules-engine-service'
 import { editRulesEngineService } from './edit-rules-engine-service'
+import { createRulesEngineService } from './create-rules-engine-service'
+import { loadRulesEngineService } from './load-rules-engine-service'
 import { reorderRulesEngine } from './reorder-rules-engine-service'
 
 export {
   listRulesEngineService,
+  createRulesEngineService,
   editRulesEngineService,
+  loadRulesEngineService,
   deleteRulesEngineService,
   reorderRulesEngine
 }
diff --git a/src/services/edge-application-rules-engine-services/load-rules-engine-service.js b/src/services/edge-application-rules-engine-services/load-rules-engine-service.js
new file mode 100644
index 000000000..4d56164f8
--- /dev/null
+++ b/src/services/edge-application-rules-engine-services/load-rules-engine-service.js
@@ -0,0 +1,32 @@
+import { AxiosHttpClientAdapter, parseHttpResponse } from '@/services/axios/AxiosHttpClientAdapter'
+import { makeEdgeApplicationBaseUrl } from '../edge-application-services/make-edge-application-base-url'
+
+export const loadRulesEngineService = async ({ edgeApplicationId, id, phase }) => {
+  const rulesPhase = phase.content === 'Default' ? 'request' : phase.content?.toLowerCase()
+
+  let httpResponse = await AxiosHttpClientAdapter.request({
+    url: `${makeEdgeApplicationBaseUrl()}/${edgeApplicationId}/rules_engine/${rulesPhase}/rules/${id}`,
+    method: 'GET'
+  })
+  httpResponse = adapt(httpResponse)
+
+  return parseHttpResponse(httpResponse)
+}
+
+const adapt = (httpResponse) => {
+  const ruleEngine = httpResponse.body.results
+  const parsedBody = {
+    name: ruleEngine.name,
+    phase: ruleEngine.phase,
+    criteria: ruleEngine.criteria,
+    behaviors: ruleEngine.behaviors,
+    isActive: ruleEngine.is_active,
+    order: ruleEngine.order,
+    description: ruleEngine.description
+  }
+
+  return {
+    body: parsedBody,
+    statusCode: httpResponse.statusCode
+  }
+}
diff --git a/src/templates/edit-drawer-block/index.vue b/src/templates/edit-drawer-block/index.vue
index e9b9599d0..6014ca0f6 100644
--- a/src/templates/edit-drawer-block/index.vue
+++ b/src/templates/edit-drawer-block/index.vue
@@ -43,7 +43,11 @@
     showBarGoBack: {
       type: Boolean,
       default: false
-    }
+    },
+    itemToEdit: {
+      type: Object,
+      required: false
+    },
   })
 
   const toast = useToast()
@@ -88,7 +92,8 @@
   const loadInitialData = async () => {
     try {
       loading.value = true
-      const initialValues = await props.loadService({ id: props.id })
+      const itemToEdit = props.itemToEdit || {}
+      const initialValues = await props.loadService({ id: props.id, ...itemToEdit })
       resetForm({ values: initialValues })
     } catch (error) {
       emit('onError', error)
diff --git a/src/templates/form-fields-inputs/fieldDropdown.vue b/src/templates/form-fields-inputs/fieldDropdown.vue
new file mode 100644
index 000000000..1e7e5432b
--- /dev/null
+++ b/src/templates/form-fields-inputs/fieldDropdown.vue
@@ -0,0 +1,104 @@
+<script setup>
+  import { toRef } from 'vue'
+  import { useField } from 'vee-validate'
+  import Dropdown from 'primevue/dropdown'
+
+  const props = defineProps({
+    value: {
+      type: String,
+      default: ''
+    },
+    name: {
+      type: String,
+      required: true
+    },
+    label: {
+      type: String,
+      default: ''
+    },
+    placeholder: {
+      type: String,
+      default: ''
+    },
+    description: {
+      type: String,
+      default: ''
+    },
+    optionLabel: {
+      type: String,
+      default: ''
+    },
+    optionValue: {
+      type: String,
+      default: ''
+    },
+    optionDisabled: {
+      type: String,
+      default: ''
+    },
+    options: {
+      type: Array,
+      default: () => []
+    },
+    inputClass: {
+      type: String,
+      default: ''
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    },
+  })
+
+  const emit = defineEmits(['onBlur', 'onChange'])
+
+  const name = toRef(props, 'name')
+
+  const {
+    value: inputValue,
+    errorMessage,
+  } = useField(name, undefined, {
+    initialValue: props.value
+  })
+
+  const emitBlur = () => {
+    emit('onBlur')
+  }
+
+  const emitChange = () => {
+    emit('onChange', inputValue.value)
+  }
+</script>
+
+<template>
+  <label
+    :for="props.name"
+    class="text-color text-sm font-medium leading-5"
+    >{{ props.label }}</label
+  >
+  <Dropdown
+    :id="name"
+    :loading="loading"
+    v-model="inputValue"
+    :options="props.options"
+    :optionLabel="props.optionLabel"
+    :optionDisabled="props.optionDisabled"
+    :optionValue="props.optionValue"
+    :placeholder="props.placeholder"
+    @change="emitChange"
+    @blur="emitBlur"
+    :class="inputClass"
+  />
+
+  <small
+    v-if="errorMessage"
+    class="p-error text-xs font-normal leading-tight"
+    >{{ errorMessage }}</small
+  >
+  <small
+    class="text-xs text-color-secondary font-normal leading-5"
+    v-if="props.description"
+  >
+    {{ props.description }}
+  </small>
+</template>
diff --git a/src/templates/form-fields-inputs/fieldInputGroup.vue b/src/templates/form-fields-inputs/fieldInputGroup.vue
index 34706a14d..aa037f19d 100644
--- a/src/templates/form-fields-inputs/fieldInputGroup.vue
+++ b/src/templates/form-fields-inputs/fieldInputGroup.vue
@@ -16,6 +16,14 @@
       type: String,
       default: ''
     },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    },
     placeholder: {
       type: String,
       default: ''
@@ -23,6 +31,10 @@
     description: {
       type: String,
       default: ''
+    },
+    inputClass: {
+      type: String,
+      default: ''
     }
   })
 
@@ -45,10 +57,17 @@
     >{{ props.label }}</label
   >
   <div class="p-inputgroup">
+    <div class="p-inputgroup-addon">
+      <slot name="icon"></slot>
+    </div>
+
     <InputText
       :id="name"
       v-model="inputValue"
       :name="name"
+      :readonly="readonly"
+      :disabled="disabled"
+      :class="inputClass"
       type="text"
       :placeholder="props.placeholder"
       @input="handleChange"
diff --git a/src/templates/form-fields-inputs/fieldText.vue b/src/templates/form-fields-inputs/fieldText.vue
index 2c8b66347..de0ac9540 100644
--- a/src/templates/form-fields-inputs/fieldText.vue
+++ b/src/templates/form-fields-inputs/fieldText.vue
@@ -23,6 +23,18 @@
     description: {
       type: String,
       default: ''
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+    inputClass: {
+      type: String,
+      default: ''
     }
   })
 
@@ -48,10 +60,13 @@
     :id="name"
     v-model="inputValue"
     :name="name"
+    :readonly="readonly"
+    :disabled="disabled"
     type="text"
     :placeholder="props.placeholder"
     @input="handleChange"
     @blur="handleBlur"
+    :class="inputClass"
   />
   <small
     v-if="errorMessage"
diff --git a/src/views/EdgeApplications/TabsView.vue b/src/views/EdgeApplications/TabsView.vue
index f30822b72..28ecf8d7d 100644
--- a/src/views/EdgeApplications/TabsView.vue
+++ b/src/views/EdgeApplications/TabsView.vue
@@ -41,13 +41,15 @@
   const activeTab = ref(0)
   const edgeApplicationId = ref(route.params.id)
   const isEnableEdgeFunction = ref(false)
+  const isEnableApplicationAcceleration = ref(false)
 
   const loaderEdgeApplication = async () => {
     try {
-      const { edgeFunctions } = await props.edgeApplicationServices.loadEdgeApplication({
+      const { edgeFunctions, applicationAcceleration } = await props.edgeApplicationServices.loadEdgeApplication({
         id: edgeApplicationId.value
       })
       isEnableEdgeFunction.value = edgeFunctions
+      isEnableApplicationAcceleration.value = applicationAcceleration
     } catch (error) {
       toast.add({
         closable: true,
@@ -151,6 +153,7 @@
           <EdgeApplicationsRulesEngineListView
             v-if="activeTab === mapTabs.rulesEngine"
             :edgeApplicationId="edgeApplicationId"
+            :isEnableApplicationAcceleration="isEnableApplicationAcceleration"
             v-bind="props.rulesEngineServices"
           />
         </TabPanel>
diff --git a/src/views/EdgeApplicationsRulesEngine/Drawer/index.vue b/src/views/EdgeApplicationsRulesEngine/Drawer/index.vue
new file mode 100644
index 000000000..c61e04238
--- /dev/null
+++ b/src/views/EdgeApplicationsRulesEngine/Drawer/index.vue
@@ -0,0 +1,194 @@
+<script setup>
+  import { ref } from 'vue'
+  import * as yup from 'yup'
+  import CreateDrawerBlock from '@templates/create-drawer-block'
+  import FormFieldsDrawerRulesEngine from '@/views/EdgeApplicationsRulesEngine/FormFields/FormFieldsEdgeApplicationsRulesEngine'
+  import EditDrawerBlock from '@templates/edit-drawer-block'
+  import { refDebounced } from '@vueuse/core'
+  defineOptions({ name: 'drawer-rules-engine' })
+
+  const emit = defineEmits(['onSuccess'])
+
+  const props = defineProps({
+    edgeApplicationId: {
+      type: String,
+      required: true
+    },
+    createRulesEngineService: {
+      type: Function,
+      required: true
+    },
+    editRulesEngineService: {
+      type: Function,
+      required: true
+    },
+    loadRulesEngineService: {
+      type: Function,
+      required: true
+    },
+    documentationService: {
+      type: Function,
+      required: true
+    },
+    isEnableApplicationAcceleration: {
+      type: Boolean,
+      required: true
+    },
+    listEdgeApplicationFunctionsService: {
+      type: Function,
+      required: true
+    },
+    listCacheSettingsService: {
+      required: true,
+      type: Function
+    },
+    listOriginsService: {
+      required: true,
+      type: Function
+    }
+  })
+
+  const showCreateRulesEngineDrawer = ref(false)
+  const showEditRulesEngineDrawer = ref(false)
+  const debouncedDrawerAnimate = 300
+  const loadCreateRulesEngineDrawer = refDebounced(
+    showCreateRulesEngineDrawer,
+    debouncedDrawerAnimate
+  )
+  const loadEditRulesEngineDrawer = refDebounced(showEditRulesEngineDrawer, debouncedDrawerAnimate)
+  const selectedRulesEngineToEdit = ref('')
+
+  const initialValues = ref({
+    id: props.edgeApplicationId,
+    name: '',
+    description: '',
+    phase: 'response',
+    criteria: [
+      [
+        {
+          variable: '${uri}',
+          operator: 'is_equal',
+          conditional: 'if',
+          input_value: ''
+        }
+      ]
+    ],
+    behaviors: [
+      {
+        name: 'deliver',
+        target: {}
+      }
+    ],
+    isActive: false
+  })
+
+  const validationSchema = yup.object({
+    name: yup.string().required().label('Name'),
+    description: yup.string().required().label('Description'),
+    phase: yup.string(),
+    criteria: yup.array(),
+    // .of(
+    //   yup.object().shape({
+    //     inputValue: yup.string().required().label('Criteria value')
+    //   })
+    // )
+    behaviors: yup.array()
+    // .of(
+    //   yup.object().shape({
+    //     target: yup.string().required().label('Target')
+    //   })
+    // )
+  })
+
+  const createService = async (payload) => {
+    return await props.createRulesEngineService({
+      ...payload,
+      edgeApplicationId: props.edgeApplicationId
+    })
+  }
+
+  const editService = async (payload) => {
+    return await props.editRulesEngineService({
+      ...payload,
+      edgeApplicationId: props.edgeApplicationId
+    })
+  }
+
+  const loadService = async (payload) => {
+    return await props.loadRulesEngineService({
+      ...payload,
+      edgeApplicationId: props.edgeApplicationId
+    })
+  }
+
+  const openDrawerCreate = () => {
+    showCreateRulesEngineDrawer.value = true
+  }
+
+  const openDrawerEdit = (rule) => {
+    if (rule.id) {
+      selectedRulesEngineToEdit.value = rule
+      showEditRulesEngineDrawer.value = true
+    }
+  }
+
+  const closeDrawerEdit = () => {
+    showEditRulesEngineDrawer.value = false
+  }
+
+  const handleCreateRulesEngine = () => {
+    emit('onSuccess')
+  }
+
+  defineExpose({
+    openDrawerCreate,
+    openDrawerEdit,
+    closeDrawerEdit
+  })
+</script>
+
+<template>
+  <CreateDrawerBlock
+    v-if="loadCreateRulesEngineDrawer"
+    v-model:visible="showCreateRulesEngineDrawer"
+    :createService="createService"
+    :schema="validationSchema"
+    :initialValues="initialValues"
+    @onSuccess="handleCreateRulesEngine"
+    :showBarGoBack="true"
+    title="Create Rules Engine"
+  >
+    <template #formFields>
+      <FormFieldsDrawerRulesEngine
+        :edgeApplicationId="props.edgeApplicationId"
+        :isEnableApplicationAcceleration="props.isEnableApplicationAcceleration"
+        :listEdgeApplicationFunctionsService="props.listEdgeApplicationFunctionsService"
+        :listOriginsService="props.listOriginsService"
+        :listCacheSettingsService="props.listCacheSettingsService"
+      />
+    </template>
+  </CreateDrawerBlock>
+  <EditDrawerBlock
+    v-if="loadEditRulesEngineDrawer"
+    :id="selectedRulesEngineToEdit.id.toString()"
+    :itemToEdit="selectedRulesEngineToEdit"
+    v-model:visible="showEditRulesEngineDrawer"
+    :loadService="loadService"
+    :editService="editService"
+    :schema="validationSchema"
+    @onSuccess="emit('onSuccess')"
+    :showBarGoBack="true"
+    @onError="closeDrawerEdit"
+    title="Edit Resource"
+  >
+    <template #formFields>
+      <FormFieldsDrawerRulesEngine
+        :edgeApplicationId="props.edgeApplicationId"
+        :isEnableApplicationAcceleration="props.isEnableApplicationAcceleration"
+        :listEdgeApplicationFunctionsService="props.listEdgeApplicationFunctionsService"
+        :listOriginsService="props.listOriginsService"
+        :listCacheSettingsService="props.listCacheSettingsService"
+      />
+    </template>
+  </EditDrawerBlock>
+</template>
diff --git a/src/views/EdgeApplicationsRulesEngine/FormFields/FormFieldsEdgeApplicationsRulesEngine.vue b/src/views/EdgeApplicationsRulesEngine/FormFields/FormFieldsEdgeApplicationsRulesEngine.vue
new file mode 100644
index 000000000..7917a3f8b
--- /dev/null
+++ b/src/views/EdgeApplicationsRulesEngine/FormFields/FormFieldsEdgeApplicationsRulesEngine.vue
@@ -0,0 +1,595 @@
+<script setup>
+  import FormHorizontal from '@/templates/create-form-block/form-horizontal'
+  import { useField, useFieldArray } from 'vee-validate'
+  import FieldText from '@/templates/form-fields-inputs/fieldText'
+  import FieldInputGroup from '@/templates/form-fields-inputs/fieldInputGroup'
+  import FieldDropdown from '@/templates/form-fields-inputs/fieldDropdown'
+  import PrimeRadio from 'primevue/radiobutton'
+  import PrimeButton from 'primevue/button'
+  import InputSwitch from 'primevue/inputswitch'
+  import Divider from 'primevue/divider'
+  import { computed, ref, onMounted } from 'vue'
+
+  const props = defineProps({
+    isEnableApplicationAcceleration: {
+      type: Boolean,
+      required: true
+    },
+    listEdgeApplicationFunctionsService: {
+      type: Function,
+      required: true
+    },
+    listCacheSettingsService: {
+      required: true,
+      type: Function
+    },
+    listOriginsService: {
+      required: true,
+      type: Function
+    },
+    edgeApplicationId: {
+      type: String,
+      required: true
+    }
+  })
+
+  const criteriaOperatorOptions = ref([
+    { label: 'is equal', value: 'is_equal' },
+    { label: 'is not equal', value: 'is_not_equal' },
+    { label: 'starts with', value: 'starts_with' },
+    { label: 'does not start with', value: 'does_not_start_with' },
+    { label: 'matches', value: 'matches' },
+    { label: 'does not match', value: 'does_not_match' },
+    { label: 'exists', value: 'exists' },
+    { label: 'does not exist', value: 'does_not_exist' }
+  ])
+
+  const behaviorsRequestOptions = ref([
+    {
+      label: 'Add Request Cookie - requires Application Acceleration',
+      value: 'add_request_cookie',
+      requires: true
+    },
+    { label: 'Add Request Header', value: 'add_request_header', requires: false },
+    {
+      label: 'Bypass Cache - requires Application Acceleration',
+      value: 'bypass_cache_phase',
+      requires: true
+    },
+    {
+      label: 'Capture Match Groups - requires Application Acceleration',
+      value: 'capture_match_groups',
+      requires: true
+    },
+    { label: 'Deliver', value: 'deliver', requires: false },
+    { label: 'Deny (403 Forbidden)', value: 'deny', requires: false },
+    { label: 'Enable Gzip', value: 'enable_gzip', requires: false },
+    {
+      label: 'Filter Request Cookie - requires Application Acceleration',
+      value: 'filter_request_cookie',
+      requires: true
+    },
+    { label: 'Filter Request Header', value: 'filter_request_header', requires: false },
+    {
+      label: 'Forward Cookies - requires Application Acceleration',
+      value: 'forward_cookies',
+      requires: true
+    },
+    { label: 'No Content (204)', value: 'no_content', requires: false },
+    { label: 'Optimize Images', value: 'optimize_images', requires: false },
+    { label: 'Redirect HTTP to HTTPS', value: 'redirect_http_to_https', requires: false },
+    { label: 'Redirect To (301 Moved Permanently)', value: 'redirect_to_301', requires: false },
+    { label: 'Redirect To (302 Found)', value: 'redirect_to_302', requires: false },
+    {
+      label: 'Rewrite Request - requires Application Acceleration',
+      value: 'rewrite_request',
+      requires: true
+    },
+    { label: 'Run Function', value: 'run_function', requires: false },
+    { label: 'Set Cache Policy', value: 'set_cache_policy', requires: false },
+    { label: 'Set Origin', value: 'set_origin', requires: false }
+  ])
+
+  const behaviorsResponseOptions = ref([
+    {
+      label: 'Add Response Cookie - requires Application Acceleration',
+      value: 'add_response_cookie',
+      requires: true
+    },
+    { label: 'Add Response Header', value: 'add_response_header', requires: false },
+    {
+      label: 'Capture Match Groups - requires Application Acceleration',
+      value: 'capture_match_groups',
+      requires: true
+    },
+    { label: 'Deliver', value: 'deliver', requires: false },
+    { label: 'Enable Gzip', value: 'enable_gzip', requires: false },
+    {
+      label: 'Filter Response Cookie - requires Application Acceleration',
+      value: 'filter_response_cookie',
+      requires: true
+    },
+    { label: 'Filter Response Header', value: 'filter_response_header', requires: false },
+    { label: 'Redirect To (301 Moved Permanently)', value: 'redirect_to_301', requires: false },
+    { label: 'Redirect To (302 Found)', value: 'redirect_to_302', requires: false },
+    { label: 'Run Function', value: 'run_function', requires: false }
+  ])
+
+  const { value: name } = useField('name')
+  const { push: pushCriteria, fields: criteria } = useFieldArray('criteria')
+  const {
+    push: pushBehavior,
+    remove: removeBehavior,
+    fields: behaviors
+  } = useFieldArray('behaviors')
+  const { value: phase } = useField('phase')
+  const { value: description } = useField('description')
+  const { value: isActive } = useField('isActive')
+
+  const phasesList = [
+    {
+      label: 'Response Phase',
+      value: 'response'
+    },
+    {
+      label: 'Request Phase',
+      value: 'request'
+    }
+  ]
+
+  const DEFAULT_AND_OPERATOR = {
+    variable: '${uri}',
+    operator: 'is_equal',
+    conditional: 'and',
+    input_value: ''
+  }
+  const DEFAULT_OR_OPERATOR = {
+    variable: '${uri}',
+    operator: 'is_equal',
+    conditional: 'or',
+    input_value: ''
+  }
+  const DEFAULT_IF_OPERATOR = {
+    variable: '${uri}',
+    operator: 'is_equal',
+    conditional: 'if',
+    input_value: '/page'
+  }
+  const DEFAULT_BEHAVIOR = {
+    name: `deliver`,
+    target: {}
+  }
+
+  const addConditionalAnd = (index) => {
+    criteria.value[index].value.push(DEFAULT_AND_OPERATOR)
+  }
+  const addConditionalOr = (index) => {
+    criteria.value[index].value.push(DEFAULT_OR_OPERATOR)
+  }
+  const addNewCriteria = () => {
+    pushCriteria([DEFAULT_IF_OPERATOR])
+  }
+  const addNewBehavior = () => {
+    pushBehavior({ ...DEFAULT_BEHAVIOR })
+  }
+
+  const showCriteriaValueField = ref(true)
+  const isShowCriteriaValueField = (operator) => {
+    const isOperatorExistsOrDoesNotExist = operator !== 'exists' && operator !== 'does_not_exist'
+    showCriteriaValueField.value = isOperatorExistsOrDoesNotExist
+  }
+
+  const behaviorsOptions = computed(() =>
+    phase.value === 'request' ? behaviorsRequestOptions.value : behaviorsResponseOptions.value
+  )
+
+  const updateBehaviorsOptionsRequires = () => {
+    behaviorsRequestOptions.value = behaviorsRequestOptions.value.map((option) => ({
+      ...option,
+      requires: false
+    }))
+
+    behaviorsResponseOptions.value = behaviorsResponseOptions.value.map((option) => ({
+      ...option,
+      requires: false
+    }))
+  }
+
+  const functionsInstanceOptions = ref(null)
+  const loadingFunctionsInstance = ref(false)
+  const listFunctionsInstanceOptions = async () => {
+    try {
+      loadingFunctionsInstance.value = true
+      functionsInstanceOptions.value = await props.listEdgeApplicationFunctionsService(
+        props.edgeApplicationId
+      )
+    } finally {
+      loadingFunctionsInstance.value = false
+    }
+  }
+
+  const originsOptions = ref(null)
+  const loadingOrigins = ref(false)
+  const listOriginsOptions = async () => {
+    try {
+      loadingOrigins.value = true
+      originsOptions.value = await props.listOriginsService({ id: props.edgeApplicationId })
+    } finally {
+      loadingOrigins.value = false
+    }
+  }
+
+  const cacheSettingsOptions = ref(null)
+  const loadingCacheSettings = ref(false)
+  const listCacheSettingsOptions = async () => {
+    try {
+      loadingCacheSettings.value = true
+      cacheSettingsOptions.value = await props.listCacheSettingsService({
+        id: props.edgeApplicationId
+      })
+    } finally {
+      loadingCacheSettings.value = false
+    }
+  }
+
+  const showNewBehaviorButton = ref(true)
+  const setBehaviorTargetValue = (newTargetValue, index) => {
+    behaviors.value[index].value.target = newTargetValue
+  }
+  const setShowNewBehaviorButton = (isShow) => {
+    showNewBehaviorButton.value = isShow
+  }
+  const setShowBehaviorTargetField = (isShow, index) => {
+    behaviors.value[index].showTargetField = isShow
+  }
+  const removeBehaviorsFromIndex = (startIndex) => {
+    const endIndex = behaviors.value.length - 1
+    for (let index = endIndex; index > startIndex; index--) {
+      removeBehavior(index)
+    }
+  }
+
+  const changeBehaviorType = (behaviorName, index) => {
+    const disableTargetOptions = [
+      'deliver',
+      'enable_gzip',
+      'bypass_cache_phase',
+      'deny',
+      'forward_cookies',
+      'no_content',
+      'optimize_images',
+      'redirect_http_to_https'
+    ]
+    const disableAddBehaviorButtonOptions = [
+      'deliver',
+      'redirect_to_301',
+      'redirect_to_302',
+      'deny',
+      'no_content'
+    ]
+    behaviors.value[index].value.name = behaviorName
+    setBehaviorTargetValue('', index)
+    setShowNewBehaviorButton(true)
+
+    switch (behaviorName) {
+      case 'run_function':
+        listFunctionsInstanceOptions()
+        break
+      case 'set_cache_policy':
+        listCacheSettingsOptions()
+        break
+      case 'set_origin':
+        listOriginsOptions()
+        break
+      case 'capture_match_groups':
+        const defaultMatchGroupsFields = { captured_array: '', subject: '', regex: '' }
+        setBehaviorTargetValue(defaultMatchGroupsFields, index)
+        break
+      default:
+        const isBehaviorTargetFieldEnabled = !disableTargetOptions.includes(behaviorName)
+        const isAddBehaviorButtonEnabled = !disableAddBehaviorButtonOptions.includes(behaviorName)
+
+        setShowBehaviorTargetField(isBehaviorTargetFieldEnabled, index)
+        setShowNewBehaviorButton(isAddBehaviorButtonEnabled)
+
+        if(!isAddBehaviorButtonEnabled) {
+          removeBehaviorsFromIndex(index)
+        }
+    }
+  }
+
+  onMounted(() => {
+    if (props.isEnableApplicationAcceleration) {
+      updateBehaviorsOptionsRequires()
+    }
+    if (behaviors.value[0]) {
+      changeBehaviorType(behaviors.value[0].value.name, 0)
+    }
+  })
+</script>
+
+<template>
+  <FormHorizontal
+    :isDrawer="true"
+    title="General"
+    description="Create a rule set to handle the conditional execution of behaviors through logical operators."
+  >
+    <template #inputs>
+      <div class="flex flex-col sm:max-w-lg w-full gap-2">
+        <FieldText
+          label="Name *"
+          name="name"
+          :value="name"
+          description="Give a unique and descriptive name to identify the rule."
+        />
+      </div>
+      <div class="flex flex-col sm:max-w-lg w-full gap-2">
+        <FieldText
+          label="Description *"
+          name="description"
+          :value="description"
+          description="Add a short text that describes the rule to remember what it's used for or write another type of comment."
+        />
+      </div>
+    </template>
+  </FormHorizontal>
+
+  <FormHorizontal
+    :isDrawer="true"
+    title="Rule Type"
+    description="Description"
+  >
+    <template #inputs>
+      <div class="flex flex-col gap-2">
+        <div
+          v-for="item in phasesList"
+          :key="item.value"
+          class="w-full border-1 rounded-md surface-border flex align-items-center justify-between p-4 gap-2"
+          :class="{ 'border-radio-card-active': phase === item.value }"
+        >
+          <label class="font-medium">
+            {{ item.label }}
+            <div class="text-color-secondary text-sm font-normal">Description</div>
+          </label>
+
+          <PrimeRadio
+            v-model="phase"
+            :value="item.value"
+          />
+        </div>
+      </div>
+    </template>
+  </FormHorizontal>
+
+  <FormHorizontal
+    :isDrawer="true"
+    title="Criteria"
+    description="Set the conditions to execute the rule. Select a variable from the list, the operator and, if prompted, enter the comparison string."
+  >
+    <template #inputs>
+      <div
+        class="flex flex-col gap-2"
+        v-for="(criteriaItem, index) in criteria"
+        :key="index"
+      >
+        <div
+          v-for="(item, itemIndex) in criteriaItem.value"
+          :key="itemIndex"
+        >
+          <Divider
+            align="left"
+            type="dashed"
+          >
+            <b>{{ item.conditional }}</b>
+          </Divider>
+
+          <div class="flex gap-2 mt-6 mb-8">
+            <FieldInputGroup
+              :name="`criteria[${index}][${itemIndex}].variable`"
+              :value="item.variable"
+              :readonly="!props.isEnableApplicationAcceleration"
+              placeholder="{uri}"
+              inputClass="w-full"
+            >
+              <template #icon>
+                <i class="pi pi-user"></i>
+              </template>
+            </FieldInputGroup>
+
+            <FieldDropdown
+              :name="`criteria[${index}][${itemIndex}].operator`"
+              :options="criteriaOperatorOptions"
+              optionLabel="label"
+              optionValue="value"
+              inputClass="w-full"
+              :value="item.operator"
+              @onChange="(newValue) => isShowCriteriaValueField(newValue)"
+            />
+
+            <FieldText
+              v-if="showCriteriaValueField"
+              :name="`criteria[${index}][${itemIndex}].input_value`"
+              :value="item.input_value"
+              inputClass="w-full"
+            />
+          </div>
+        </div>
+
+        <div
+          class="flex gap-2 mb-8"
+          v-if="props.isEnableApplicationAcceleration"
+        >
+          <PrimeButton
+            icon="pi pi-plus-circle"
+            label="And"
+            size="small"
+            outlined
+            @click="addConditionalAnd(index)"
+          />
+          <PrimeButton
+            icon="pi pi-plus-circle"
+            label="OR"
+            size="small"
+            outlined
+            @click="addConditionalOr(index)"
+          />
+        </div>
+        <Divider
+          type="solid"
+          v-if="props.isEnableApplicationAcceleration"
+        />
+      </div>
+      <div v-if="props.isEnableApplicationAcceleration">
+        <PrimeButton
+          icon="pi pi-plus-circle"
+          label="New Criteria"
+          size="small"
+          outlined
+          @click="addNewCriteria"
+        />
+      </div>
+    </template>
+  </FormHorizontal>
+
+  <FormHorizontal
+    :isDrawer="true"
+    title="Behaviors"
+    description="Set the behaviors you want your rule to perform if the conditions defined in the criteria are met. Select a behavior and all required information. Some actions can't be used together or in some conditions."
+  >
+    <template #inputs>
+      <pre>
+        {{ behaviors }}
+      </pre>
+      <div
+        class="flex flex-col gap-2"
+        v-for="(behaviorItem, index) in behaviors"
+        :key="behaviorItem.key"
+      >
+        <Divider
+          align="left"
+          type="dashed"
+        >
+          {{ behaviorItem.isFirst ? 'Then' : 'And' }}
+        </Divider>
+
+        <div class="flex gap-2 mt-6 mb-8">
+          <div class="w-full">
+            <FieldDropdown
+              :key="behaviorItem.key"
+              :name="`behaviors[${index}].name`"
+              :options="behaviorsOptions"
+              optionLabel="label"
+              optionValue="value"
+              optionDisabled="requires"
+              :value="behaviors[index].value.name"
+              inputClass="w-full"
+              @onChange="(newValue) => changeBehaviorType(newValue, index)"
+            />
+          </div>
+
+          <template v-if="behaviorItem.value.name === 'run_function'">
+            <FieldDropdown
+              :loading="loadingFunctionsInstance"
+              :name="`behaviors[${index}].target`"
+              :options="functionsInstanceOptions"
+              optionLabel="name.text"
+              optionValue="id"
+              inputClass="w-full"
+              :key="behaviorItem.key"
+              :value="behaviors[index].value.target"
+            />
+          </template>
+          <template v-else-if="behaviorItem.value.name === 'set_origin'">
+            <FieldDropdown
+              :loading="loadingOrigins"
+              :name="`behaviors[${index}].target`"
+              :options="originsOptions"
+              optionLabel="name"
+              optionValue="id"
+              inputClass="w-full"
+              :key="behaviorItem.key"
+              :value="behaviors[index].value.target"
+            />
+          </template>
+          <template v-else-if="behaviorItem.value.name === 'set_cache_policy'">
+            <FieldDropdown
+              :loading="loadingCacheSettings"
+              :name="`behaviors[${index}].target`"
+              :options="cacheSettingsOptions"
+              optionLabel="name"
+              optionValue="id"
+              inputClass="w-full"
+              :key="behaviorItem.key"
+              :value="behaviors[index].value.target"
+            />
+          </template>
+          <template v-else-if="behaviorItem.value.name === 'capture_match_groups'">
+            <div class="flex flex-col w-full">
+              <FieldText
+                placeholder="Captured Array"
+                inputClass="w-full mb-3"
+                :name="`behaviors[${index}].target.captured_array`"
+                :key="behaviorItem.key"
+                :value="behaviors[index].value.target.captured_array"
+              />
+              <FieldText
+                placeholder="Subject"
+                inputClass="w-full mb-3"
+                :name="`behaviors[${index}].target.subject`"
+                :key="behaviorItem.key"
+                :value="behaviors[index].value.target.subject"
+              />
+              <FieldText
+                placeholder="Regex"
+                inputClass="w-full"
+                :name="`behaviors[${index}].target.regex`"
+                :key="behaviorItem.key"
+                :value="behaviors[index].value.target.regex"
+              />
+            </div>
+          </template>
+          <template v-else-if="behaviors[index]?.showTargetField">
+            <FieldText
+              inputClass="w-full"
+              :name="`behaviors[${index}].target`"
+              :key="behaviorItem.key"
+              :value="behaviors[index].value.target"
+            />
+          </template>
+        </div>
+      </div>
+
+      <template v-if="showNewBehaviorButton">
+        <Divider type="solid" />
+        <div>
+          <PrimeButton
+            icon="pi pi-plus-circle"
+            label="New Behaviors"
+            size="small"
+            outlined
+            @click="addNewBehavior"
+          />
+        </div>
+      </template>
+    </template>
+  </FormHorizontal>
+
+  <FormHorizontal
+    :isDrawer="true"
+    title="Status"
+  >
+    <template #inputs>
+      <div class="flex gap-3 items-center">
+        <InputSwitch
+          id="active"
+          v-model="isActive"
+        />
+        <label
+          for="active"
+          class="text-base"
+          >Active</label
+        >
+      </div>
+    </template>
+  </FormHorizontal>
+</template>
diff --git a/src/views/EdgeApplicationsRulesEngine/ListView.vue b/src/views/EdgeApplicationsRulesEngine/ListView.vue
index 34afc86e1..b6b704566 100644
--- a/src/views/EdgeApplicationsRulesEngine/ListView.vue
+++ b/src/views/EdgeApplicationsRulesEngine/ListView.vue
@@ -5,6 +5,7 @@
   import Illustration from '@/assets/svg/illustration-layers'
   import { computed, ref, watch } from 'vue'
   import { columnBuilder } from '@/templates/list-table-block/columns/column-builder'
+  import DrawerRulesEngine from '@/views/EdgeApplicationsRulesEngine/Drawer'
   import SelectButton from 'primevue/selectbutton'
 
   defineOptions({ name: 'list-edge-applications-device-groups-tab' })
@@ -25,7 +26,39 @@
     reorderRulesEngine: {
       required: true,
       type: Function
-    }
+    },
+    loadRulesEngineService: {
+      required: true,
+      type: Function
+    },
+    editRulesEngineService: {
+      required: true,
+      type: Function
+    },
+    createRulesEngineService: {
+      required: true,
+      type: Function
+    },
+    documentationService: {
+      required: true,
+      type: Function
+    },
+    isEnableApplicationAcceleration: {
+      required: true,
+      type: Boolean
+    },
+    listEdgeApplicationFunctionsService: {
+      required: true,
+      type: Function
+    },
+    listCacheSettingsService: {
+      required: true,
+      type: Function
+    },
+    listOriginsService: {
+      required: true,
+      type: Function
+    },
   })
 
   const hasContentToList = ref(true)
@@ -98,21 +131,52 @@
     return props.reorderRulesEngine(tableData, props.edgeApplicationId)
   }
 
-  const listRulesEngine = ref(null)
+  const listRulesEngineRef = ref(null)
   watch(selectedPhase, () => {
-    listRulesEngine.value.loadData({ page: 1 })
+    listRulesEngineRef.value.loadData({ page: 1 })
   })
+
+  const reloadList = () => {
+    if (hasContentToList.value) {
+      listRulesEngineRef.value.reload()
+      return
+    }
+    hasContentToList.value = true
+  }
+
+  const drawerRulesEngineRef = ref('')
+  const openCreateRulesEngineDrawer = () => {
+    drawerRulesEngineRef.value.openDrawerCreate()
+  }
+
+  const openEditRulesEngineDrawer = (item) => {
+    drawerRulesEngineRef.value.openDrawerEdit(item)
+  }
 </script>
 
 <template>
+  <DrawerRulesEngine
+    ref="drawerRulesEngineRef"
+    :isEnableApplicationAcceleration="props.isEnableApplicationAcceleration"
+    :listEdgeApplicationFunctionsService="props.listEdgeApplicationFunctionsService"
+    :listOriginsService="props.listOriginsService"
+    :listCacheSettingsService="props.listCacheSettingsService"
+    :edgeApplicationId="props.edgeApplicationId"
+    :createRulesEngineService="props.createRulesEngineService"
+    :editRulesEngineService="props.editRulesEngineService"
+    :loadRulesEngineService="props.loadRulesEngineService"
+    :documentationService="props.documentationService"
+    @onSuccess="reloadList"
+  />
   <ListTableBlock
-    ref="listRulesEngine"
+    ref="listRulesEngineRef"
+    pageTitleDelete="Rules Engine"
     :reorderableRows="true"
+    :columns="getColumns"
     :onReorderService="reorderRulesEngineWithDecorator"
-    pageTitleDelete="Rules Engine"
+    :editInDrawer="openEditRulesEngineDrawer"
     :listService="listRulesEngineWithDecorator"
     :deleteService="deleteRulesEngineWithDecorator"
-    :columns="getColumns"
     @on-load-data="handleLoadData"
     :pt="{
       thead: { class: !hasContentToList && 'hidden' }
@@ -128,6 +192,7 @@
         <PrimeButton
           icon="pi pi-plus"
           label="Rules Engine"
+          @click="openCreateRulesEngineDrawer"
         />
       </div>
     </template>

From 6ad4b8603848be2603b8af95a8407f25b27cabef Mon Sep 17 00:00:00 2001
From: peterpaulo-azion <peterson.silva@azion.com>
Date: Thu, 18 Jan 2024 11:20:40 -0300
Subject: [PATCH 03/28] fix: linter

---
 src/router/routes/edge-application-routes/index.js         | 2 +-
 .../create-rules-engine-service.js                         | 2 +-
 src/templates/edit-drawer-block/index.vue                  | 2 +-
 src/templates/form-fields-inputs/fieldDropdown.vue         | 7 ++-----
 src/views/EdgeApplications/TabsView.vue                    | 7 ++++---
 .../FormFields/FormFieldsEdgeApplicationsRulesEngine.vue   | 2 +-
 src/views/EdgeApplicationsRulesEngine/ListView.vue         | 2 +-
 7 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/src/router/routes/edge-application-routes/index.js b/src/router/routes/edge-application-routes/index.js
index 2ad92e774..3b8134d5c 100644
--- a/src/router/routes/edge-application-routes/index.js
+++ b/src/router/routes/edge-application-routes/index.js
@@ -101,7 +101,7 @@ export const edgeApplicationRoutes = {
           documentationService: Helpers.documentationCatalog.edgeApplicationRulesEngine,
           listOriginsService: OriginsService.listOriginsService,
           listCacheSettingsService: CacheSettingsServices.listCacheSettingsService,
-          listEdgeApplicationFunctionsService: FunctionsService.listEdgeApplicationFunctionsService,
+          listEdgeApplicationFunctionsService: FunctionsService.listEdgeApplicationFunctionsService
         },
         clipboardWrite: Helpers.clipboardWrite
       },
diff --git a/src/services/edge-application-rules-engine-services/create-rules-engine-service.js b/src/services/edge-application-rules-engine-services/create-rules-engine-service.js
index 07a7f4ab2..5d9b51258 100644
--- a/src/services/edge-application-rules-engine-services/create-rules-engine-service.js
+++ b/src/services/edge-application-rules-engine-services/create-rules-engine-service.js
@@ -20,7 +20,7 @@ const adapt = (payload) => {
     criteria: payload.criteria,
     behaviors: payload.behaviors,
     is_active: payload.isActive,
-    description: payload.description,
+    description: payload.description
   }
 }
 
diff --git a/src/templates/edit-drawer-block/index.vue b/src/templates/edit-drawer-block/index.vue
index 6014ca0f6..116d0d56a 100644
--- a/src/templates/edit-drawer-block/index.vue
+++ b/src/templates/edit-drawer-block/index.vue
@@ -47,7 +47,7 @@
     itemToEdit: {
       type: Object,
       required: false
-    },
+    }
   })
 
   const toast = useToast()
diff --git a/src/templates/form-fields-inputs/fieldDropdown.vue b/src/templates/form-fields-inputs/fieldDropdown.vue
index 1e7e5432b..df6e88e1f 100644
--- a/src/templates/form-fields-inputs/fieldDropdown.vue
+++ b/src/templates/form-fields-inputs/fieldDropdown.vue
@@ -47,17 +47,14 @@
     loading: {
       type: Boolean,
       default: false
-    },
+    }
   })
 
   const emit = defineEmits(['onBlur', 'onChange'])
 
   const name = toRef(props, 'name')
 
-  const {
-    value: inputValue,
-    errorMessage,
-  } = useField(name, undefined, {
+  const { value: inputValue, errorMessage } = useField(name, undefined, {
     initialValue: props.value
   })
 
diff --git a/src/views/EdgeApplications/TabsView.vue b/src/views/EdgeApplications/TabsView.vue
index 28ecf8d7d..b4d6c8097 100644
--- a/src/views/EdgeApplications/TabsView.vue
+++ b/src/views/EdgeApplications/TabsView.vue
@@ -45,9 +45,10 @@
 
   const loaderEdgeApplication = async () => {
     try {
-      const { edgeFunctions, applicationAcceleration } = await props.edgeApplicationServices.loadEdgeApplication({
-        id: edgeApplicationId.value
-      })
+      const { edgeFunctions, applicationAcceleration } =
+        await props.edgeApplicationServices.loadEdgeApplication({
+          id: edgeApplicationId.value
+        })
       isEnableEdgeFunction.value = edgeFunctions
       isEnableApplicationAcceleration.value = applicationAcceleration
     } catch (error) {
diff --git a/src/views/EdgeApplicationsRulesEngine/FormFields/FormFieldsEdgeApplicationsRulesEngine.vue b/src/views/EdgeApplicationsRulesEngine/FormFields/FormFieldsEdgeApplicationsRulesEngine.vue
index 7917a3f8b..ec907875e 100644
--- a/src/views/EdgeApplicationsRulesEngine/FormFields/FormFieldsEdgeApplicationsRulesEngine.vue
+++ b/src/views/EdgeApplicationsRulesEngine/FormFields/FormFieldsEdgeApplicationsRulesEngine.vue
@@ -292,7 +292,7 @@
         setShowBehaviorTargetField(isBehaviorTargetFieldEnabled, index)
         setShowNewBehaviorButton(isAddBehaviorButtonEnabled)
 
-        if(!isAddBehaviorButtonEnabled) {
+        if (!isAddBehaviorButtonEnabled) {
           removeBehaviorsFromIndex(index)
         }
     }
diff --git a/src/views/EdgeApplicationsRulesEngine/ListView.vue b/src/views/EdgeApplicationsRulesEngine/ListView.vue
index b6b704566..7ba2140af 100644
--- a/src/views/EdgeApplicationsRulesEngine/ListView.vue
+++ b/src/views/EdgeApplicationsRulesEngine/ListView.vue
@@ -58,7 +58,7 @@
     listOriginsService: {
       required: true,
       type: Function
-    },
+    }
   })
 
   const hasContentToList = ref(true)

From 69b3922afad481fab705ee95eece7179534a8e55 Mon Sep 17 00:00:00 2001
From: HerbertJulio <herbert.julio@azion.com>
Date: Thu, 18 Jan 2024 14:12:12 -0300
Subject: [PATCH 04/28] refactor: rename event emit in edge firewall

---
 src/views/EdgeFirewall/EditView.vue | 4 ++--
 src/views/EdgeFirewall/TabsView.vue | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/views/EdgeFirewall/EditView.vue b/src/views/EdgeFirewall/EditView.vue
index 28dea67ed..bed0efa6f 100644
--- a/src/views/EdgeFirewall/EditView.vue
+++ b/src/views/EdgeFirewall/EditView.vue
@@ -6,7 +6,7 @@
   import * as yup from 'yup'
 
   defineOptions({ name: 'edit-edge-firewall' })
-  const emit = defineEmits(['updateFirewall'])
+  const emit = defineEmits(['updatedFirewall'])
 
   const props = defineProps({
     editEdgeFirewallService: { type: Function, required: true },
@@ -33,7 +33,7 @@
 
   const formSubmit = async (onSubmit, values) => {
     await onSubmit()
-    emit('updateFirewall', values)
+    emit('updatedFirewall', values)
   }
 </script>
 
diff --git a/src/views/EdgeFirewall/TabsView.vue b/src/views/EdgeFirewall/TabsView.vue
index ad42647a4..5c9a075a4 100644
--- a/src/views/EdgeFirewall/TabsView.vue
+++ b/src/views/EdgeFirewall/TabsView.vue
@@ -122,7 +122,7 @@
             :edgeFirewall="edgeFirewall"
             :loadDomains="props.listDomainsService"
             :updatedRedirect="edgeFirewallServices.updatedRedirect"
-            @updateFirewall="updatedFirewall"
+            @updatedFirewall="updatedFirewall"
           />
         </TabPanel>
         <TabPanel

From fa07a05cfec5681d3179f25884805f053d418217 Mon Sep 17 00:00:00 2001
From: HerbertJulio <herbert.julio@azion.com>
Date: Thu, 18 Jan 2024 14:12:51 -0300
Subject: [PATCH 05/28] fix: ajusted ux in tabs and view edit

---
 src/views/EdgeApplications/EditView.vue | 24 +++++--
 src/views/EdgeApplications/TabsView.vue | 88 ++++++++++++++++---------
 2 files changed, 73 insertions(+), 39 deletions(-)

diff --git a/src/views/EdgeApplications/EditView.vue b/src/views/EdgeApplications/EditView.vue
index 4e1e82c0a..93ef09ad0 100644
--- a/src/views/EdgeApplications/EditView.vue
+++ b/src/views/EdgeApplications/EditView.vue
@@ -1,9 +1,10 @@
 <template>
   <EditFormBlock
     :editService="props.editEdgeApplicationService"
-    :loadService="props.loadEdgeApplicationService"
+    :loadService="loadEdgeApplication"
     :updatedRedirect="props.updatedRedirect"
     :schema="validationSchema"
+    disableRedirect
     :isTabs="true"
   >
     <template #form>
@@ -12,9 +13,9 @@
         :contactSalesEdgeApplicationService="contactSalesEdgeApplicationService"
       />
     </template>
-    <template #action-bar="{ onSubmit, formValid, onCancel, loading }">
+    <template #action-bar="{ onSubmit, formValid, onCancel, loading, values }">
       <ActionBarBlockWithTeleport
-        @onSubmit="onSubmit"
+        @onSubmit="formSubmit(onSubmit, values)"
         @onCancel="onCancel"
         :loading="loading"
         :submitDisabled="!formValid"
@@ -29,11 +30,10 @@
   import * as yup from 'yup'
   import FormFieldsCreateEdgeApplications from './FormFields/FormFieldsCreateEdgeApplications'
 
+  defineOptions({ name: 'edit-edge-application' })
+  const emit = defineEmits(['updatedApplication'])
+
   const props = defineProps({
-    loadEdgeApplicationService: {
-      type: Function,
-      required: true
-    },
     editEdgeApplicationService: {
       type: Function,
       required: true
@@ -42,6 +42,7 @@
       type: String,
       required: true
     },
+    edgeApplication: { type: Object },
     contactSalesEdgeApplicationService: {
       type: Function,
       required: true
@@ -53,4 +54,13 @@
   const validationSchema = yup.object({
     name: yup.string().required()
   })
+
+  const loadEdgeApplication = async () => {
+    return props.edgeApplication
+  }
+
+  const formSubmit = async (onSubmit, values) => {
+    await onSubmit()
+    emit('updatedApplication', values)
+  }
 </script>
diff --git a/src/views/EdgeApplications/TabsView.vue b/src/views/EdgeApplications/TabsView.vue
index 1a48a3b71..d69dbd09d 100644
--- a/src/views/EdgeApplications/TabsView.vue
+++ b/src/views/EdgeApplications/TabsView.vue
@@ -27,7 +27,7 @@
     functionsServices: { type: Object, required: true }
   })
 
-  const mapTabs = {
+  const defaultTabs = {
     mainSettings: 0,
     origins: 1,
     deviceGroups: 2,
@@ -37,74 +37,68 @@
     rulesEngine: 6
   }
 
+  const mapTabs = ref({ ...defaultTabs })
+
   const toast = useToast()
   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 responseEdgeApplication = ref(false)
-  const title = ref('')
+  const edgeApplication = ref()
 
   const showMainSettings = computed(() => {
-    return activeTab.value === mapTabs.mainSettings
+    return activeTab.value === mapTabs.value?.mainSettings
   })
 
   const showErrorResponses = computed(() => {
-    return activeTab.value === mapTabs.errorResponses
+    return activeTab.value === mapTabs.value?.errorResponses
   })
 
   const showFunctions = computed(() => {
-    return activeTab.value === mapTabs.functions
+    return activeTab.value === mapTabs.value?.functions
   })
 
   const showRulesEngine = computed(() => {
-    return activeTab.value === mapTabs.rulesEngine
+    return activeTab.value === mapTabs.value?.rulesEngine
   })
 
   const showCacheSettings = computed(() => {
-    return activeTab.value === mapTabs.cacheSettings
+    return activeTab.value === mapTabs.value?.cacheSettings
   })
 
   const showDeviceGroups = computed(() => {
-    return activeTab.value === mapTabs.deviceGroups
+    return activeTab.value === mapTabs.value?.deviceGroups
   })
 
   const showOrigins = computed(() => {
-    return activeTab.value === mapTabs.origins
+    return activeTab.value === mapTabs.value?.origins
   })
 
   const loaderEdgeApplication = async () => {
     try {
-      if (responseEdgeApplication.value) return responseEdgeApplication.value
-
-      const response = await props.edgeApplicationServices.loadEdgeApplication({
+      return 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,
         severity: 'error',
         summary: error
       })
+      router.push({ name: props.edgeApplicationServices.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(edgeApplication.value)
+    const tab = getTabFromValue(index)
+    activeTab.value = index
     const params = {
       id: edgeApplicationId.value,
       tab
@@ -115,12 +109,41 @@
     })
   }
 
+  const verifyTab = ({ edgeFunctions }) => {
+    if (!edgeFunctions) {
+      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 loaderEdgeApplication()
-    const { tab } = route.params
-    const defaultTabIndex = 0
-    const activeTabIndexByRoute = mapTabs[tab] || defaultTabIndex
-    activeTab.value = activeTabIndexByRoute
+    const { tab = 0 } = route.params
+    edgeApplication.value = await loaderEdgeApplication()
+    verifyTab(edgeApplication.value)
+    const activeTabIndexByRoute = mapTabs.value[tab]
+    changeRouteByClickingOnTab({ index: activeTabIndexByRoute })
+  }
+
+  const title = computed(() => {
+    return edgeApplication.value?.name || ''
+  })
+
+  const isEnableEdgeFunction = computed(() => {
+    return edgeApplication.value?.edgeFunctions
+  })
+
+  const isLoadBalancer = computed(() => {
+    return edgeApplication.value?.loadBalancer
+  })
+
+  const updatedApplication = (application) => {
+    edgeApplication.value = { ...application }
+    verifyTab(edgeApplication.value)
   }
 
   renderTabCurrentRouter()
@@ -136,14 +159,15 @@
         :activeIndex="activeTab"
         @tab-click="changeRouteByClickingOnTab"
         class="w-full h-full"
-        v-if="responseEdgeApplication"
+        v-if="edgeApplication"
       >
         <TabPanel header="Main Settings">
           <EditView
             v-if="showMainSettings"
             :editEdgeApplicationService="edgeApplicationServices.editEdgeApplication"
-            :loadEdgeApplicationService="loaderEdgeApplication"
+            :edgeApplication="edgeApplication"
             :updatedRedirect="edgeApplicationServices.updatedRedirect"
+            @updatedApplication="updatedApplication"
             :contactSalesEdgeApplicationService="
               edgeApplicationServices.contactSalesEdgeApplicationService
             "

From 5c54df35f5a181d0426e6bfd4d16b7ea61dc8018 Mon Sep 17 00:00:00 2001
From: HerbertJulio <herbert.julio@azion.com>
Date: Thu, 18 Jan 2024 14:13:23 -0300
Subject: [PATCH 06/28] fix: ajusted props and documentation in functions

---
 src/views/EdgeApplicationsFunctions/Drawer/index.vue | 4 ----
 src/views/EdgeApplicationsFunctions/ListView.vue     | 7 +++----
 2 files changed, 3 insertions(+), 8 deletions(-)

diff --git a/src/views/EdgeApplicationsFunctions/Drawer/index.vue b/src/views/EdgeApplicationsFunctions/Drawer/index.vue
index 2bf3707e2..4b2ed1e1a 100644
--- a/src/views/EdgeApplicationsFunctions/Drawer/index.vue
+++ b/src/views/EdgeApplicationsFunctions/Drawer/index.vue
@@ -60,10 +60,6 @@
       type: Function,
       required: true
     },
-    loadEdgeFunctionsService: {
-      type: Function,
-      required: true
-    },
     loadFunctionService: {
       type: Function,
       required: true
diff --git a/src/views/EdgeApplicationsFunctions/ListView.vue b/src/views/EdgeApplicationsFunctions/ListView.vue
index 457428fec..691bf75fa 100644
--- a/src/views/EdgeApplicationsFunctions/ListView.vue
+++ b/src/views/EdgeApplicationsFunctions/ListView.vue
@@ -4,7 +4,6 @@
     :edgeApplicationId="props.edgeApplicationId"
     :createFunctionService="props.createFunctionService"
     :listEdgeFunctionsService="props.listEdgeFunctionsService"
-    :loadEdgeFunctionsService="props.loadEdgeFunctionsService"
     :loadFunctionService="props.loadFunctionService"
     :editFunctionService="props.editFunctionService"
     @onSuccess="reloadList"
@@ -53,11 +52,11 @@
 <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 DrawerFunction from './Drawer'
+  import PrimeButton from 'primevue/button'
   import { computed, ref } from 'vue'
+  import DrawerFunction from './Drawer'
 
   defineOptions({ name: 'list-edge-applications-functions-tab' })
 
@@ -72,7 +71,7 @@
       required: true,
       type: Function
     },
-    loadEdgeFunctionsService: {
+    documentationService: {
       required: true,
       type: Function
     },

From 8f01843534ca91b9c63b5c58f4b3ccc5b9d749e2 Mon Sep 17 00:00:00 2001
From: Matheus Sunderhus <matheus.sunderhus@azion.com>
Date: Thu, 18 Jan 2024 14:41:30 -0300
Subject: [PATCH 07/28] test: ensure deleteRulesEngineService to return api
 response error message

---
 .../delete-rules-engine-service.test.js       | 34 ++++++++++++++++---
 1 file changed, 29 insertions(+), 5 deletions(-)

diff --git a/src/tests/services/edge-application-rules-engine-services/delete-rules-engine-service.test.js b/src/tests/services/edge-application-rules-engine-services/delete-rules-engine-service.test.js
index b75b812fe..bd540886f 100644
--- a/src/tests/services/edge-application-rules-engine-services/delete-rules-engine-service.test.js
+++ b/src/tests/services/edge-application-rules-engine-services/delete-rules-engine-service.test.js
@@ -16,17 +16,20 @@ const makeSut = () => {
 
 describe('EdgeApplicationRulesEnginesServices', () => {
   it('should call API with correct params', async () => {
+    const phaseMock = 'request'
     const requestSpy = vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
       statusCode: 204
     })
-
     const { sut } = makeSut()
-    const version = 'v3'
-    const phase = 'request'
-    await sut({ ruleId: fixtures.ruleId, phase, edgeApplicationId: fixtures.edgeApplicationId })
+
+    await sut({
+      ruleId: fixtures.ruleId,
+      phase: phaseMock,
+      edgeApplicationId: fixtures.edgeApplicationId
+    })
 
     expect(requestSpy).toHaveBeenCalledWith({
-      url: `${version}/edge_applications/${fixtures.edgeApplicationId}/rules_engine/${phase}/rules/${fixtures.ruleId}`,
+      url: `v3/edge_applications/${fixtures.edgeApplicationId}/rules_engine/${phaseMock}/rules/${fixtures.ruleId}`,
       method: 'DELETE'
     })
   })
@@ -47,6 +50,27 @@ describe('EdgeApplicationRulesEnginesServices', () => {
     expect(feedbackMessage).toBe('Rule Engine successfully deleted')
   })
 
+  it('should return the api error message when payload contains invalid data', async () => {
+    const firstErrorMessageMock = 'Invalid rule engine error message'
+    vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+      statusCode: 400,
+      body: {
+        invalidRuleErrorKey: firstErrorMessageMock,
+        anotherInvalidKeyError: 'Another invalid rule engine message'
+      }
+    })
+
+    const { sut } = makeSut()
+
+    const result = sut({
+      edgeApplicationId: fixtures.edgeApplicationId,
+      phase: 'request',
+      ruleId: fixtures.ruleId
+    })
+
+    expect(result).rejects.toBe(firstErrorMessageMock)
+  })
+
   it.each([
     {
       statusCode: 401,

From f5739eb66a9df441611d3f1c28096bb832b44982 Mon Sep 17 00:00:00 2001
From: Matheus Sunderhus <matheus.sunderhus@azion.com>
Date: Thu, 18 Jan 2024 16:07:57 -0300
Subject: [PATCH 08/28] test: ensure editRulesEngineService calls api with
 correct rule phase

---
 .../edit-rules-engine-service.js              | 35 +++++++----
 .../edit-rules-engine-service.test.js         | 58 ++++++++++++++-----
 2 files changed, 66 insertions(+), 27 deletions(-)

diff --git a/src/services/edge-application-rules-engine-services/edit-rules-engine-service.js b/src/services/edge-application-rules-engine-services/edit-rules-engine-service.js
index a5089b26d..b7a2d2147 100644
--- a/src/services/edge-application-rules-engine-services/edit-rules-engine-service.js
+++ b/src/services/edge-application-rules-engine-services/edit-rules-engine-service.js
@@ -5,11 +5,10 @@ import * as Errors from '@/services/axios/errors'
 export const editRulesEngineService = async ({ id, payload, reorder = false }) => {
   const parsedPayload = adapt(payload, reorder)
 
-  const rulesPhase =
-    payload.phase.content === 'Default' ? 'request' : payload.phase.content?.toLowerCase()
+  const rulePhase = generateRulePhase(payload)
 
   let httpResponse = await AxiosHttpClientAdapter.request({
-    url: `${makeEdgeApplicationBaseUrl()}/${id}/rules_engine/${rulesPhase}/rules/${payload.id}`,
+    url: `${makeEdgeApplicationBaseUrl()}/${id}/rules_engine/${rulePhase}/rules/${payload.id}`,
     method: 'PATCH',
     body: parsedPayload
   })
@@ -17,12 +16,30 @@ export const editRulesEngineService = async ({ id, payload, reorder = false }) =
   return parseHttpResponse(httpResponse)
 }
 
+/**
+ *
+ * @param {Object} payload
+ * @param {Object} payload.phase
+ * @param {string | undefined} payload.phase.content
+ * @returns {string}
+ */
+const generateRulePhase = (payload) => {
+  const DEFAULT_RULE_PHASE = 'Default'
+  return payload.phase.content === DEFAULT_RULE_PHASE
+    ? 'request'
+    : payload.phase.content?.toLowerCase()
+}
+
 const adapt = (payload, reorder) => {
-  let parsedPaylod
+  let parsedPayload
 
-  if (!reorder) {
+  if (reorder) {
+    parsedPayload = {
+      order: parseInt(payload.order)
+    }
+  } else {
     const { name, phase, behaviors, criteria, isActive, description } = payload
-    parsedPaylod = {
+    parsedPayload = {
       name,
       phase: phase.content,
       behaviors,
@@ -30,13 +47,9 @@ const adapt = (payload, reorder) => {
       is_active: isActive,
       description
     }
-  } else {
-    parsedPaylod = {
-      order: parseInt(payload.order)
-    }
   }
 
-  return parsedPaylod
+  return parsedPayload
 }
 
 /**
diff --git a/src/tests/services/edge-application-rules-engine-services/edit-rules-engine-service.test.js b/src/tests/services/edge-application-rules-engine-services/edit-rules-engine-service.test.js
index fac9a0255..423f46a40 100644
--- a/src/tests/services/edge-application-rules-engine-services/edit-rules-engine-service.test.js
+++ b/src/tests/services/edge-application-rules-engine-services/edit-rules-engine-service.test.js
@@ -25,20 +25,18 @@ const makeSut = () => {
 }
 
 describe('EdgeApplicationRulesEngineServices', () => {
-  it('should call API with correct params to rule engine update', async () => {
+  it('should call API with correct params when updating the rule engine data', async () => {
+    const edgeApplicationIdMock = 123
+    const phaseRulesMock = fixtures.rulePayload.phase.content
     const requestSpy = vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
       statusCode: 200
     })
-
     const { sut } = makeSut()
-    const version = 'v3'
 
-    const edgeApplicationId = 123
-    const phaseRules = fixtures.rulePayload.phase.content
-    await sut({ id: edgeApplicationId, payload: fixtures.rulePayload, reorder: false })
+    await sut({ id: edgeApplicationIdMock, payload: fixtures.rulePayload, reorder: false })
 
     expect(requestSpy).toHaveBeenCalledWith({
-      url: `${version}/edge_applications/${edgeApplicationId}/rules_engine/${phaseRules}/rules/${fixtures.rulePayload.id}`,
+      url: `v3/edge_applications/${edgeApplicationIdMock}/rules_engine/${phaseRulesMock}/rules/${fixtures.rulePayload.id}`,
       method: 'PATCH',
       body: {
         behaviors: '',
@@ -50,39 +48,67 @@ describe('EdgeApplicationRulesEngineServices', () => {
       }
     })
   })
-  it('should call API with correct params to rule engine order update', async () => {
+
+  it('should call API with correct params update the rule engine order', async () => {
+    const edgeApplicationIdMock = 123
+    const phaseRulesMock = fixtures.rulePayload.phase.content
+
     const requestSpy = vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
       statusCode: 200
     })
 
     const { sut } = makeSut()
-    const version = 'v3'
 
-    const edgeApplicationId = 123
-    const phaseRules = fixtures.rulePayload.phase.content
-    await sut({ id: edgeApplicationId, payload: fixtures.rulePayload, reorder: true })
+    await sut({
+      id: edgeApplicationIdMock,
+      payload: fixtures.rulePayload,
+      reorder: true
+    })
 
     expect(requestSpy).toHaveBeenCalledWith({
-      url: `${version}/edge_applications/${edgeApplicationId}/rules_engine/${phaseRules}/rules/${fixtures.rulePayload.id}`,
+      url: `v3/edge_applications/${edgeApplicationIdMock}/rules_engine/${phaseRulesMock}/rules/${fixtures.rulePayload.id}`,
       method: 'PATCH',
       body: {
-        order: 3
+        order: fixtures.rulePayload.order
       }
     })
   })
 
   it('should return a feedback message on successfully updated', async () => {
+    const edgeApplicationIdMock = 8172367
     vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
       statusCode: 200
     })
     const { sut } = makeSut()
 
-    const edgeApplicationId = 123
-    const feedbackMessage = await sut({ id: edgeApplicationId, payload: fixtures.rulePayload })
+    const feedbackMessage = await sut({ id: edgeApplicationIdMock, payload: fixtures.rulePayload })
 
     expect(feedbackMessage).toBe('Your Rules Engine has been edited')
   })
 
+  it('should calculate correct default rule phase', async () => {
+    const edgeApplicationIdMock = 112365
+    const ruleWithDefaultPhaseMock = {
+      ...fixtures.rulePayload,
+      phase: {
+        content: 'Default'
+      }
+    }
+    const requestSpy = vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+      statusCode: 200
+    })
+    const { sut } = makeSut()
+
+    await sut({
+      id: edgeApplicationIdMock,
+      payload: ruleWithDefaultPhaseMock
+    })
+
+    expect(requestSpy.mock.lastCall[0].url).toBe(
+      `v3/edge_applications/${edgeApplicationIdMock}/rules_engine/request/rules/${ruleWithDefaultPhaseMock.id}`
+    )
+  })
+
   it.each([
     {
       statusCode: 401,

From cb1b35bc934ab1be93d6f5e16f52b58de18924d8 Mon Sep 17 00:00:00 2001
From: Matheus Sunderhus <matheus.sunderhus@azion.com>
Date: Thu, 18 Jan 2024 16:50:14 -0300
Subject: [PATCH 09/28] test: ensure editRulesEngineService parse multiple API
 error messages

---
 .../edit-rules-engine-service.test.js         | 38 +++++++++++++++++++
 1 file changed, 38 insertions(+)

diff --git a/src/tests/services/edge-application-rules-engine-services/edit-rules-engine-service.test.js b/src/tests/services/edge-application-rules-engine-services/edit-rules-engine-service.test.js
index 423f46a40..9974c378e 100644
--- a/src/tests/services/edge-application-rules-engine-services/edit-rules-engine-service.test.js
+++ b/src/tests/services/edge-application-rules-engine-services/edit-rules-engine-service.test.js
@@ -109,6 +109,44 @@ describe('EdgeApplicationRulesEngineServices', () => {
     )
   })
 
+  it('should parse correctly the API error validation', async () => {
+    vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+      statusCode: 400,
+      body: {
+        error: 'invalid rule engine error message'
+      }
+    })
+
+    const { sut } = makeSut()
+
+    const result = sut({
+      id: 762356,
+      payload: fixtures.rulePayload,
+      reorder: false
+    })
+
+    expect(result).rejects.toBe('error: invalid rule engine error message')
+  })
+
+  it('should parse correctly the API validation with multiple error messages', async () => {
+    vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+      statusCode: 400,
+      body: {
+        errors: ['first error message', 'second error message']
+      }
+    })
+
+    const { sut } = makeSut()
+
+    const result = sut({
+      id: 762356,
+      payload: fixtures.rulePayload,
+      reorder: false
+    })
+
+    expect(result).rejects.toBe('errors: first error message')
+  })
+
   it.each([
     {
       statusCode: 401,

From 66c4a150839e673d80ac1773d02be3fb9a9aaa6d Mon Sep 17 00:00:00 2001
From: peterpaulo-azion <peterson.silva@azion.com>
Date: Thu, 18 Jan 2024 20:52:53 -0300
Subject: [PATCH 10/28] feat: behaviors and criteria fields conditional

---
 .../list-cache-settings-service.js            |   2 +-
 .../list-functions-service.js                 |   2 +-
 .../list-origins-service.js                   |   2 +-
 .../create-rules-engine-service.js            |  64 ++--
 .../edit-rules-engine-service.js              |   4 +-
 .../load-rules-engine-service.js              |   1 +
 .../Drawer/index.vue                          |   7 +-
 .../FormFieldsEdgeApplicationsRulesEngine.vue | 334 ++++++++++++------
 8 files changed, 287 insertions(+), 129 deletions(-)

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..0d54b5ca5 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
@@ -18,7 +18,7 @@ export const listCacheSettingsService = async ({ id }) => {
 
 const adapt = (httpResponse) => {
   const parseHttpResponse = httpResponse.body.results.map((cacheSettings) => ({
-    id: cacheSettings.id,
+    id: cacheSettings.id.toString(),
     name: cacheSettings.name,
     browserCache: cacheSettings.browser_cache_settings,
     cdnCache: cacheSettings.cdn_cache_settings
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..dedb5382f 100644
--- a/src/services/edge-application-functions-services/list-functions-service.js
+++ b/src/services/edge-application-functions-services/list-functions-service.js
@@ -37,7 +37,7 @@ const adapt = (httpResponse) => {
 
   const parsedFunctions = bodyResults?.map((edgeApplicationFunction) => {
     return {
-      id: edgeApplicationFunction.id,
+      id: edgeApplicationFunction.id.toString(),
       edgeFunctionId: edgeApplicationFunction.edge_function_id,
       name: parseName(edgeApplicationFunction),
       args: edgeApplicationFunction.args
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..cbfa2a492 100644
--- a/src/services/edge-application-origins-services/list-origins-service.js
+++ b/src/services/edge-application-origins-services/list-origins-service.js
@@ -33,7 +33,7 @@ const adapt = (httpResponse) => {
       originKey: {
         content: origin.origin_key
       },
-      originId: origin.origin_id,
+      originId: origin.origin_id.toString(),
       name: origin.name,
       originType: originTypeFormat[origin.origin_type],
       addresses: formattedListOfAddresses,
diff --git a/src/services/edge-application-rules-engine-services/create-rules-engine-service.js b/src/services/edge-application-rules-engine-services/create-rules-engine-service.js
index 5d9b51258..d1e417637 100644
--- a/src/services/edge-application-rules-engine-services/create-rules-engine-service.js
+++ b/src/services/edge-application-rules-engine-services/create-rules-engine-service.js
@@ -24,32 +24,53 @@ const adapt = (payload) => {
   }
 }
 
+const errorMessagesMap = {
+  duplicated_behaviors: `The behavior '{value}' is duplicated.`,
+  blank_parameter: `The '{value}' field is empty.`,
+  incompatible_behaviors: `The behavior '{value}' is incompatible with the others.`,
+  invalid_behaviors: `The behavior '{value}' is invalid.`,
+  invalid_behaviors_target: `The behavior '{value}' has a invalid target.`,
+}
+
 /**
- * @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.
+ * Extracts the first error message from an error object.
+ * @param {Object} errorObject - The error object to extract the message from.
+ * @returns {string} The first error message found.
  */
-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]
+function getFirstErrorMessage(errorObject) {
+  for (let key in errorObject) {
+    const errorValue = errorObject[key]
+    if (typeof errorValue === 'string') {
+      return errorValue
+    }
+    if (Array.isArray(errorValue)) {
+      return processArrayError(key, errorValue)
+    }
+    if (typeof errorValue === 'object') {
+      return getFirstErrorMessage(errorValue)
     }
-    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.
+ * Processes an array error to extract the error message.
+ * @param {string} key - The key of the error in the error object.
+ * @param {Array} errorArray - The array containing the error details.
+ * @returns {string} The processed error message.
  */
-const extractApiError = (httpResponse) => {
-  const errorKey = Object.keys(httpResponse.body)[0]
-  const apiError = extractErrorKey(httpResponse.body, errorKey)
-  return `${errorKey}: ${apiError}`
+function processArrayError(key, errorArray) {
+  const errorMessageTemplate = errorMessagesMap[key]
+  if (errorMessageTemplate) {
+    let value = errorArray[0]
+    if (key === 'incompatible_behaviors') {
+      // Extract the behavior name from the string
+      value = value.match(/\(u'(.*?)',/)[1].replace(/_/g, ' ')
+    } else {
+      value = value.replace(/_/g, ' ')
+    }
+    return errorMessageTemplate.replace('{value}', value)
+  }
+  return `${key}: ${errorArray[0]}`
 }
 
 /**
@@ -63,10 +84,10 @@ const parseHttpResponse = (httpResponse) => {
   switch (httpResponse.statusCode) {
     case 201:
       return {
-        feedback: 'Your Rules Engine has been created'
+        feedback: 'Your Rules Engine has been created.'
       }
     case 400:
-      const apiError = extractApiError(httpResponse)
+      const apiError = getFirstErrorMessage(httpResponse)
       throw new Error(apiError).message
     case 401:
       throw new Errors.InvalidApiTokenError().message
@@ -75,8 +96,7 @@ const parseHttpResponse = (httpResponse) => {
     case 404:
       throw new Errors.NotFoundError().message
     case 500:
-      const apiError500 = extractApiError(httpResponse)
-      throw new Error(apiError500).message
+      throw new Errors.InternalServerError().message
     default:
       throw new Errors.UnexpectedError().message
   }
diff --git a/src/services/edge-application-rules-engine-services/edit-rules-engine-service.js b/src/services/edge-application-rules-engine-services/edit-rules-engine-service.js
index a5089b26d..f4ea2a11b 100644
--- a/src/services/edge-application-rules-engine-services/edit-rules-engine-service.js
+++ b/src/services/edge-application-rules-engine-services/edit-rules-engine-service.js
@@ -9,7 +9,7 @@ export const editRulesEngineService = async ({ id, payload, reorder = false }) =
     payload.phase.content === 'Default' ? 'request' : payload.phase.content?.toLowerCase()
 
   let httpResponse = await AxiosHttpClientAdapter.request({
-    url: `${makeEdgeApplicationBaseUrl()}/${id}/rules_engine/${rulesPhase}/rules/${payload.id}`,
+    url: `${makeEdgeApplicationBaseUrl()}/${id}/rules_engine/${rulesPhase || payload.phase}/rules/${payload.id}`,
     method: 'PATCH',
     body: parsedPayload
   })
@@ -24,7 +24,7 @@ const adapt = (payload, reorder) => {
     const { name, phase, behaviors, criteria, isActive, description } = payload
     parsedPaylod = {
       name,
-      phase: phase.content,
+      phase: phase.content || phase,
       behaviors,
       criteria,
       is_active: isActive,
diff --git a/src/services/edge-application-rules-engine-services/load-rules-engine-service.js b/src/services/edge-application-rules-engine-services/load-rules-engine-service.js
index 4d56164f8..c6ed0dd2b 100644
--- a/src/services/edge-application-rules-engine-services/load-rules-engine-service.js
+++ b/src/services/edge-application-rules-engine-services/load-rules-engine-service.js
@@ -16,6 +16,7 @@ export const loadRulesEngineService = async ({ edgeApplicationId, id, phase }) =
 const adapt = (httpResponse) => {
   const ruleEngine = httpResponse.body.results
   const parsedBody = {
+    id: ruleEngine.id,
     name: ruleEngine.name,
     phase: ruleEngine.phase,
     criteria: ruleEngine.criteria,
diff --git a/src/views/EdgeApplicationsRulesEngine/Drawer/index.vue b/src/views/EdgeApplicationsRulesEngine/Drawer/index.vue
index c61e04238..aa5ec45bf 100644
--- a/src/views/EdgeApplicationsRulesEngine/Drawer/index.vue
+++ b/src/views/EdgeApplicationsRulesEngine/Drawer/index.vue
@@ -109,8 +109,8 @@
 
   const editService = async (payload) => {
     return await props.editRulesEngineService({
-      ...payload,
-      edgeApplicationId: props.edgeApplicationId
+      payload,
+      id: props.edgeApplicationId
     })
   }
 
@@ -179,10 +179,11 @@
     @onSuccess="emit('onSuccess')"
     :showBarGoBack="true"
     @onError="closeDrawerEdit"
-    title="Edit Resource"
+    title="Edit Rules Engine"
   >
     <template #formFields>
       <FormFieldsDrawerRulesEngine
+        :selectedRulesEngineToEdit="selectedRulesEngineToEdit"
         :edgeApplicationId="props.edgeApplicationId"
         :isEnableApplicationAcceleration="props.isEnableApplicationAcceleration"
         :listEdgeApplicationFunctionsService="props.listEdgeApplicationFunctionsService"
diff --git a/src/views/EdgeApplicationsRulesEngine/FormFields/FormFieldsEdgeApplicationsRulesEngine.vue b/src/views/EdgeApplicationsRulesEngine/FormFields/FormFieldsEdgeApplicationsRulesEngine.vue
index ec907875e..f7108c775 100644
--- a/src/views/EdgeApplicationsRulesEngine/FormFields/FormFieldsEdgeApplicationsRulesEngine.vue
+++ b/src/views/EdgeApplicationsRulesEngine/FormFields/FormFieldsEdgeApplicationsRulesEngine.vue
@@ -9,6 +9,7 @@
   import InputSwitch from 'primevue/inputswitch'
   import Divider from 'primevue/divider'
   import { computed, ref, onMounted } from 'vue'
+  import { useToast } from 'primevue/usetoast'
 
   const props = defineProps({
     isEnableApplicationAcceleration: {
@@ -30,9 +31,15 @@
     edgeApplicationId: {
       type: String,
       required: true
+    },
+    selectedRulesEngineToEdit: {
+      type: Object,
+      required: false,
+      default: () => {}
     }
   })
 
+  const toast = useToast()
   const criteriaOperatorOptions = ref([
     { label: 'is equal', value: 'is_equal' },
     { label: 'is not equal', value: 'is_not_equal' },
@@ -120,6 +127,7 @@
   const {
     push: pushBehavior,
     remove: removeBehavior,
+    update: updateBehavior,
     fields: behaviors
   } = useFieldArray('behaviors')
   const { value: phase } = useField('phase')
@@ -153,36 +161,59 @@
     variable: '${uri}',
     operator: 'is_equal',
     conditional: 'if',
-    input_value: '/page'
+    input_value: ''
   }
   const DEFAULT_BEHAVIOR = {
     name: `deliver`,
     target: {}
   }
 
+  /**
+   * Adds a conditional AND operator to the criteria at the specified index.
+   * @param {number} index - The index of the criteria to add the operator to.
+   */
   const addConditionalAnd = (index) => {
     criteria.value[index].value.push(DEFAULT_AND_OPERATOR)
   }
+
+  /**
+   * Adds a conditional OR operator to the criteria at the specified index.
+   * @param {number} index - The index of the criteria to add the operator to.
+   */
   const addConditionalOr = (index) => {
     criteria.value[index].value.push(DEFAULT_OR_OPERATOR)
   }
+
+  /**
+   * Adds a new criteria with a default IF operator.
+   */
   const addNewCriteria = () => {
     pushCriteria([DEFAULT_IF_OPERATOR])
   }
-  const addNewBehavior = () => {
-    pushBehavior({ ...DEFAULT_BEHAVIOR })
+
+  /**
+   * Sets the default behavior options for the last behavior in the behaviors array.
+   */
+  const setDefaultBehaviorOptions = () => {
+    const lastIndex = behaviors.value.length - 1
+    changeBehaviorType(DEFAULT_BEHAVIOR.name, lastIndex)
   }
 
-  const showCriteriaValueField = ref(true)
-  const isShowCriteriaValueField = (operator) => {
-    const isOperatorExistsOrDoesNotExist = operator !== 'exists' && operator !== 'does_not_exist'
-    showCriteriaValueField.value = isOperatorExistsOrDoesNotExist
+  /**
+   * Adds a new behavior with the default behavior to the behaviors array and sets its options.
+   */
+  const addNewBehavior = () => {
+    pushBehavior({ ...DEFAULT_BEHAVIOR })
+    setDefaultBehaviorOptions()
   }
 
   const behaviorsOptions = computed(() =>
     phase.value === 'request' ? behaviorsRequestOptions.value : behaviorsResponseOptions.value
   )
 
+  /**
+   * Updates the 'requires' property of all behavior options to false.
+   */
   const updateBehaviorsOptionsRequires = () => {
     behaviorsRequestOptions.value = behaviorsRequestOptions.value.map((option) => ({
       ...option,
@@ -197,6 +228,10 @@
 
   const functionsInstanceOptions = ref(null)
   const loadingFunctionsInstance = ref(false)
+
+  /**
+   * Fetches the list of function instance options and updates the 'functionsInstanceOptions' ref.
+   */
   const listFunctionsInstanceOptions = async () => {
     try {
       loadingFunctionsInstance.value = true
@@ -210,6 +245,10 @@
 
   const originsOptions = ref(null)
   const loadingOrigins = ref(false)
+
+  /**
+   * Fetches the list of origin options and updates the 'originsOptions' ref.
+   */
   const listOriginsOptions = async () => {
     try {
       loadingOrigins.value = true
@@ -221,6 +260,10 @@
 
   const cacheSettingsOptions = ref(null)
   const loadingCacheSettings = ref(false)
+
+  /**
+   * Fetches the list of cache settings options and updates the 'cacheSettingsOptions' ref.
+   */
   const listCacheSettingsOptions = async () => {
     try {
       loadingCacheSettings.value = true
@@ -233,15 +276,28 @@
   }
 
   const showNewBehaviorButton = ref(true)
-  const setBehaviorTargetValue = (newTargetValue, index) => {
-    behaviors.value[index].value.target = newTargetValue
-  }
+
+  /**
+   * Updates the 'showNewBehaviorButton' ref.
+   * @param {boolean} isShow - Whether to show the new behavior button.
+   */
   const setShowNewBehaviorButton = (isShow) => {
     showNewBehaviorButton.value = isShow
   }
+
+  /**
+   * Updates the 'showTargetField' property of the behavior at the specified index.
+   * @param {boolean} isShow - Whether to show the target field.
+   * @param {number} index - The index of the behavior to update.
+   */
   const setShowBehaviorTargetField = (isShow, index) => {
     behaviors.value[index].showTargetField = isShow
   }
+
+  /**
+   * Removes behaviors from the behaviors array starting from the specified index.
+   * @param {number} startIndex - The index to start removing behaviors from.
+   */
   const removeBehaviorsFromIndex = (startIndex) => {
     const endIndex = behaviors.value.length - 1
     for (let index = endIndex; index > startIndex; index--) {
@@ -249,6 +305,11 @@
     }
   }
 
+  /**
+   * Changes the type of the behavior at the specified index and updates related properties.
+   * @param {string} behaviorName - The new type of the behavior.
+   * @param {number} index - The index of the behavior to change.
+   */
   const changeBehaviorType = (behaviorName, index) => {
     const disableTargetOptions = [
       'deliver',
@@ -267,8 +328,11 @@
       'deny',
       'no_content'
     ]
-    behaviors.value[index].value.name = behaviorName
-    setBehaviorTargetValue('', index)
+
+    let targetValue = behaviors.value[index].value.target
+    if (!props.selectedRulesEngineToEdit) targetValue = ''
+
+    updateBehavior(index, { name: behaviorName, target: targetValue })
     setShowNewBehaviorButton(true)
 
     switch (behaviorName) {
@@ -282,8 +346,10 @@
         listOriginsOptions()
         break
       case 'capture_match_groups':
-        const defaultMatchGroupsFields = { captured_array: '', subject: '', regex: '' }
-        setBehaviorTargetValue(defaultMatchGroupsFields, index)
+        let matchGroupsFields = { captured_array: '', subject: '', regex: '' }
+        if (props.selectedRulesEngineToEdit) matchGroupsFields = behaviors.value[index].value.target
+
+        updateBehavior(index, { name: behaviorName, target: matchGroupsFields })
         break
       default:
         const isBehaviorTargetFieldEnabled = !disableTargetOptions.includes(behaviorName)
@@ -298,6 +364,72 @@
     }
   }
 
+  /**
+   * Calls the appropriate services to fetch options for the behaviors of the selected rules engine to edit.
+   */
+  const callOptionsServicesAtEdit = async () => {
+    if (props.selectedRulesEngineToEdit) {
+      const behaviorsLength = props.selectedRulesEngineToEdit.behaviors.length
+
+      for (let index = 0; index < behaviorsLength; index++) {
+        const behavior = props.selectedRulesEngineToEdit.behaviors[index]
+        try {
+          await handleBehaviorOptions(behavior, index)
+        } catch (error) {
+          toast.add({
+            closable: true,
+            severity: 'error',
+            summary: `Error in ${behavior.name} load.`
+          })
+        }
+      }
+    }
+  }
+
+  /**
+   * Handles fetching options for a behavior based on its type.
+   * @param {Object} behavior - The behavior to handle.
+   * @param {number} index - The index of the behavior in the behaviors array.
+   */
+  const handleBehaviorOptions = async (behavior, index) => {
+    switch (behavior.name) {
+      case 'run_function':
+        await listFunctionsInstanceOptions()
+        break
+      case 'set_origin':
+        await listOriginsOptions()
+        break
+      case 'set_cache_policy':
+        await listCacheSettingsOptions()
+        break
+    }
+    updateBehavior(index, { name: behavior.name, target: behavior.target })
+  }
+
+  /**
+   * Processes the behaviors of the selected rules engine to edit.
+   */
+  const processBehaviorsAtEdit = async () => {
+    const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms))
+
+    const areBehaviorsReady = (index) => behaviors && behaviors.value[index]
+
+    const processBehavior = (behavior, index) => {
+      changeBehaviorType(behavior.name, index)
+    }
+
+    if (props.selectedRulesEngineToEdit) {
+      let index = 0
+
+      while (!areBehaviorsReady(index)) {
+        await delay(100)
+      }
+      props.selectedRulesEngineToEdit.behaviors.forEach((behavior, index) => {
+        processBehavior(behavior, index)
+      })
+    }
+  }
+
   onMounted(() => {
     if (props.isEnableApplicationAcceleration) {
       updateBehaviorsOptionsRequires()
@@ -305,6 +437,9 @@
     if (behaviors.value[0]) {
       changeBehaviorType(behaviors.value[0].value.name, 0)
     }
+
+    callOptionsServicesAtEdit()
+    processBehaviorsAtEdit()
   })
 </script>
 
@@ -341,22 +476,26 @@
   >
     <template #inputs>
       <div class="flex flex-col gap-2">
-        <div
+        <template
           v-for="item in phasesList"
           :key="item.value"
-          class="w-full border-1 rounded-md surface-border flex align-items-center justify-between p-4 gap-2"
-          :class="{ 'border-radio-card-active': phase === item.value }"
         >
-          <label class="font-medium">
-            {{ item.label }}
-            <div class="text-color-secondary text-sm font-normal">Description</div>
-          </label>
-
-          <PrimeRadio
-            v-model="phase"
-            :value="item.value"
-          />
-        </div>
+          <div
+            v-if="!props.selectedRulesEngineToEdit || phase === item.value"
+            class="w-full border-1 rounded-md surface-border flex align-items-center justify-between p-4 gap-2"
+            :class="{ 'border-radio-card-active': phase === item.value }"
+          >
+            <label class="font-medium">
+              {{ item.label }}
+              <div class="text-color-secondary text-sm font-normal">Description</div>
+            </label>
+
+            <PrimeRadio
+              v-model="phase"
+              :value="item.value"
+            />
+          </div>
+        </template>
       </div>
     </template>
   </FormHorizontal>
@@ -386,7 +525,7 @@
           <div class="flex gap-2 mt-6 mb-8">
             <FieldInputGroup
               :name="`criteria[${index}][${itemIndex}].variable`"
-              :value="item.variable"
+              :value="criteria[index].value[itemIndex].variable"
               :readonly="!props.isEnableApplicationAcceleration"
               placeholder="{uri}"
               inputClass="w-full"
@@ -397,19 +536,17 @@
             </FieldInputGroup>
 
             <FieldDropdown
-              :name="`criteria[${index}][${itemIndex}].operator`"
               :options="criteriaOperatorOptions"
               optionLabel="label"
               optionValue="value"
               inputClass="w-full"
-              :value="item.operator"
-              @onChange="(newValue) => isShowCriteriaValueField(newValue)"
+              :name="`criteria[${index}][${itemIndex}].operator`"
+              :value="criteria[index].value[itemIndex].operator"
             />
-
             <FieldText
-              v-if="showCriteriaValueField"
+              v-if="item.operator !== 'exists' && item.operator !== 'does_not_exist'"
               :name="`criteria[${index}][${itemIndex}].input_value`"
-              :value="item.input_value"
+              :value="criteria[index].value[itemIndex].input_value"
               inputClass="w-full"
             />
           </div>
@@ -457,9 +594,6 @@
     description="Set the behaviors you want your rule to perform if the conditions defined in the criteria are met. Select a behavior and all required information. Some actions can't be used together or in some conditions."
   >
     <template #inputs>
-      <pre>
-        {{ behaviors }}
-      </pre>
       <div
         class="flex flex-col gap-2"
         v-for="(behaviorItem, index) in behaviors"
@@ -473,7 +607,7 @@
         </Divider>
 
         <div class="flex gap-2 mt-6 mb-8">
-          <div class="w-full">
+          <div class="w-1/2">
             <FieldDropdown
               :key="behaviorItem.key"
               :name="`behaviors[${index}].name`"
@@ -487,75 +621,77 @@
             />
           </div>
 
-          <template v-if="behaviorItem.value.name === 'run_function'">
-            <FieldDropdown
-              :loading="loadingFunctionsInstance"
-              :name="`behaviors[${index}].target`"
-              :options="functionsInstanceOptions"
-              optionLabel="name.text"
-              optionValue="id"
-              inputClass="w-full"
-              :key="behaviorItem.key"
-              :value="behaviors[index].value.target"
-            />
-          </template>
-          <template v-else-if="behaviorItem.value.name === 'set_origin'">
-            <FieldDropdown
-              :loading="loadingOrigins"
-              :name="`behaviors[${index}].target`"
-              :options="originsOptions"
-              optionLabel="name"
-              optionValue="id"
-              inputClass="w-full"
-              :key="behaviorItem.key"
-              :value="behaviors[index].value.target"
-            />
-          </template>
-          <template v-else-if="behaviorItem.value.name === 'set_cache_policy'">
-            <FieldDropdown
-              :loading="loadingCacheSettings"
-              :name="`behaviors[${index}].target`"
-              :options="cacheSettingsOptions"
-              optionLabel="name"
-              optionValue="id"
-              inputClass="w-full"
-              :key="behaviorItem.key"
-              :value="behaviors[index].value.target"
-            />
-          </template>
-          <template v-else-if="behaviorItem.value.name === 'capture_match_groups'">
-            <div class="flex flex-col w-full">
-              <FieldText
-                placeholder="Captured Array"
-                inputClass="w-full mb-3"
-                :name="`behaviors[${index}].target.captured_array`"
+          <div class="w-1/2">
+            <template v-if="behaviorItem.value.name === 'run_function'">
+              <FieldDropdown
+                :loading="loadingFunctionsInstance"
+                :name="`behaviors[${index}].target`"
+                :options="functionsInstanceOptions"
+                optionLabel="name.text"
+                optionValue="id"
+                inputClass="w-full"
                 :key="behaviorItem.key"
-                :value="behaviors[index].value.target.captured_array"
+                :value="behaviors[index].value.target"
               />
-              <FieldText
-                placeholder="Subject"
-                inputClass="w-full mb-3"
-                :name="`behaviors[${index}].target.subject`"
+            </template>
+            <template v-else-if="behaviorItem.value.name === 'set_origin'">
+              <FieldDropdown
+                :loading="loadingOrigins"
+                :name="`behaviors[${index}].target`"
+                :options="originsOptions"
+                optionLabel="name"
+                optionValue="originId"
+                inputClass="w-full"
                 :key="behaviorItem.key"
-                :value="behaviors[index].value.target.subject"
+                :value="behaviors[index].value.target"
               />
+            </template>
+            <template v-else-if="behaviorItem.value.name === 'set_cache_policy'">
+              <FieldDropdown
+                :loading="loadingCacheSettings"
+                :name="`behaviors[${index}].target`"
+                :options="cacheSettingsOptions"
+                optionLabel="name"
+                optionValue="id"
+                inputClass="w-full"
+                :key="behaviorItem.key"
+                :value="behaviors[index].value.target"
+              />
+            </template>
+            <template v-else-if="behaviorItem.value.name === 'capture_match_groups'">
+              <div class="flex flex-col w-full">
+                <FieldText
+                  placeholder="Captured Array"
+                  inputClass="w-full mb-3"
+                  :name="`behaviors[${index}].target.captured_array`"
+                  :key="behaviorItem.key"
+                  :value="behaviors[index].value.target.captured_array"
+                />
+                <FieldText
+                  placeholder="Subject"
+                  inputClass="w-full mb-3"
+                  :name="`behaviors[${index}].target.subject`"
+                  :key="behaviorItem.key"
+                  :value="behaviors[index].value.target.subject"
+                />
+                <FieldText
+                  placeholder="Regex"
+                  inputClass="w-full"
+                  :name="`behaviors[${index}].target.regex`"
+                  :key="behaviorItem.key"
+                  :value="behaviors[index].value.target.regex"
+                />
+              </div>
+            </template>
+            <template v-else-if="behaviors[index]?.showTargetField">
               <FieldText
-                placeholder="Regex"
                 inputClass="w-full"
-                :name="`behaviors[${index}].target.regex`"
+                :name="`behaviors[${index}].target`"
                 :key="behaviorItem.key"
-                :value="behaviors[index].value.target.regex"
+                :value="behaviors[index].value.target"
               />
-            </div>
-          </template>
-          <template v-else-if="behaviors[index]?.showTargetField">
-            <FieldText
-              inputClass="w-full"
-              :name="`behaviors[${index}].target`"
-              :key="behaviorItem.key"
-              :value="behaviors[index].value.target"
-            />
-          </template>
+            </template>
+          </div>
         </div>
       </div>
 

From d465d6876ea53e4c12850f3ed971c762d0d5a292 Mon Sep 17 00:00:00 2001
From: peterpaulo-azion <peterson.silva@azion.com>
Date: Thu, 18 Jan 2024 20:55:43 -0300
Subject: [PATCH 11/28] fix: linter

---
 .../create-rules-engine-service.js                            | 2 +-
 .../edit-rules-engine-service.js                              | 4 +++-
 .../list-edge-application-functions-service.test.js           | 2 +-
 .../list-functions-service.test.js                            | 4 ++--
 .../list-origins-service.test.js                              | 4 ++--
 5 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/services/edge-application-rules-engine-services/create-rules-engine-service.js b/src/services/edge-application-rules-engine-services/create-rules-engine-service.js
index d1e417637..23db84555 100644
--- a/src/services/edge-application-rules-engine-services/create-rules-engine-service.js
+++ b/src/services/edge-application-rules-engine-services/create-rules-engine-service.js
@@ -29,7 +29,7 @@ const errorMessagesMap = {
   blank_parameter: `The '{value}' field is empty.`,
   incompatible_behaviors: `The behavior '{value}' is incompatible with the others.`,
   invalid_behaviors: `The behavior '{value}' is invalid.`,
-  invalid_behaviors_target: `The behavior '{value}' has a invalid target.`,
+  invalid_behaviors_target: `The behavior '{value}' has a invalid target.`
 }
 
 /**
diff --git a/src/services/edge-application-rules-engine-services/edit-rules-engine-service.js b/src/services/edge-application-rules-engine-services/edit-rules-engine-service.js
index f4ea2a11b..9af90ca33 100644
--- a/src/services/edge-application-rules-engine-services/edit-rules-engine-service.js
+++ b/src/services/edge-application-rules-engine-services/edit-rules-engine-service.js
@@ -9,7 +9,9 @@ export const editRulesEngineService = async ({ id, payload, reorder = false }) =
     payload.phase.content === 'Default' ? 'request' : payload.phase.content?.toLowerCase()
 
   let httpResponse = await AxiosHttpClientAdapter.request({
-    url: `${makeEdgeApplicationBaseUrl()}/${id}/rules_engine/${rulesPhase || payload.phase}/rules/${payload.id}`,
+    url: `${makeEdgeApplicationBaseUrl()}/${id}/rules_engine/${rulesPhase || payload.phase}/rules/${
+      payload.id
+    }`,
     method: 'PATCH',
     body: parsedPayload
   })
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..713b51c23 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
@@ -69,7 +69,7 @@ describe('EdgeApplicationFunctionsServices', () => {
 
     expect(result).toEqual([
       {
-        id: 1,
+        id: '1',
         name: { text: 'function instance', tagProps: {} },
         languageIcon: { content: 'JavaScript', icon: 'javascript' },
         referenceCount: '2',
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..a2c41bb48 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
@@ -7,7 +7,7 @@ const fixtures = {
     name: 'function instance name',
     args: {},
     edge_function_id: 321,
-    id: 123
+    id: '123'
   },
   functionInstanceWithVersion: {
     version: 2,
@@ -15,7 +15,7 @@ const fixtures = {
     name: 'function instance version',
     args: {},
     edge_function_id: 321,
-    id: 123
+    id: '123'
   }
 }
 
diff --git a/src/tests/services/edge-application-origins-services/list-origins-service.test.js b/src/tests/services/edge-application-origins-services/list-origins-service.test.js
index 395f1f6f8..c74f87852 100644
--- a/src/tests/services/edge-application-origins-services/list-origins-service.test.js
+++ b/src/tests/services/edge-application-origins-services/list-origins-service.test.js
@@ -4,7 +4,7 @@ import { describe, expect, it, vi } from 'vitest'
 
 const fixtures = {
   originSingleType: {
-    origin_id: 111111,
+    origin_id: '111111',
     origin_key: '11111-0000-11111-111111-11111',
     name: 'Origin 2',
     origin_type: 'single_origin',
@@ -29,7 +29,7 @@ const fixtures = {
     hmac_secret_key: ''
   },
   originLoadBalancerType: {
-    origin_id: 111111,
+    origin_id: '111111',
     origin_key: '11111-0000-11111-111111-11111',
     name: 'Origin 2',
     origin_type: 'load_balancer',

From 0b42595ee1c6240192047fc8bc9bdae98f93c60f Mon Sep 17 00:00:00 2001
From: Aloisio Bastian <aloisiomiguelb@gmail.com>
Date: Fri, 19 Jan 2024 08:25:55 -0300
Subject: [PATCH 12/28] refactor: change list box to ul of buttons

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

diff --git a/src/templates/create-modal-block/index.vue b/src/templates/create-modal-block/index.vue
index ebc5e2091..6c8885142 100644
--- a/src/templates/create-modal-block/index.vue
+++ b/src/templates/create-modal-block/index.vue
@@ -157,15 +157,17 @@
   
   <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">
-       <ul class="flex flex-col gap-4">
+       <ul class="flex flex-col gap-1">
           <li v-for="(menuitem, index) in items" :key="index"> 
-            <a
-              class= "p-button p-button-text p-button-primary p-button-sm whitespace-nowrap hover:bg-header-button-hover flex"
+            <PrimeButton 
               :class="{ 'p-selectbutton': menuitem.value === selectedTab, 'p-disabled': isLoading }"
+              class= "w-full p-button p-button-text p-button-primary p-button-sm whitespace-nowrap h-[38px] flex"
+              :pt="{
+                label: { class: 'w-full text-left' },
+              }"
               @click="onTabChange(menuitem)"
-            >
-              <span>{{ menuitem.label }}</span>
-            </a>
+              :label="menuitem.label"
+            />
           </li>
         </ul>
     </div>

From e34cb8b91b6c219af4c439fcec04832e4ac94741 Mon Sep 17 00:00:00 2001
From: peterpaulo-azion <peterson.silva@azion.com>
Date: Fri, 19 Jan 2024 10:19:05 -0300
Subject: [PATCH 13/28] fix: remove unecessary comments

---
 src/views/EdgeApplicationsRulesEngine/Drawer/index.vue | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/src/views/EdgeApplicationsRulesEngine/Drawer/index.vue b/src/views/EdgeApplicationsRulesEngine/Drawer/index.vue
index aa5ec45bf..ac06e6597 100644
--- a/src/views/EdgeApplicationsRulesEngine/Drawer/index.vue
+++ b/src/views/EdgeApplicationsRulesEngine/Drawer/index.vue
@@ -87,17 +87,7 @@
     description: yup.string().required().label('Description'),
     phase: yup.string(),
     criteria: yup.array(),
-    // .of(
-    //   yup.object().shape({
-    //     inputValue: yup.string().required().label('Criteria value')
-    //   })
-    // )
     behaviors: yup.array()
-    // .of(
-    //   yup.object().shape({
-    //     target: yup.string().required().label('Target')
-    //   })
-    // )
   })
 
   const createService = async (payload) => {

From ffaecea7acc571beff46c96b6b237e418dba0528 Mon Sep 17 00:00:00 2001
From: Lucas Mendes <92529166+lucasmendes21@users.noreply.github.com>
Date: Fri, 19 Jan 2024 10:29:26 -0300
Subject: [PATCH 14/28] [ENG-27745] feat: create tab function in edge firewall
 (#579)

* ENG-27745 feat: create tab function in edge firewall

* fix: remove typos on test files

* fix: adjust required in pr

* fix: adjust test

---------

Co-authored-by: Aloisio Bastian <aloisiomiguelb@gmail.com>
---
 .../routes/edge-firewall-routes/index.js      |   8 +
 .../create-function-service.js                |  89 ++++++++++
 .../delete-function-service.js                |  37 +++++
 .../edit-function-service.js                  |  49 ++++++
 .../edge-firewall-functions-services/index.js |  15 ++
 .../list-edge-firewall-functions-service.js   |  52 ++++++
 .../list-edge-functions-service.js            |  43 +++++
 .../list-functions-service.js                 |  50 ++++++
 .../loader-function-service.js                |  27 +++
 .../make-edge-firewall-base-url.js            |   4 +
 .../make-edge-functions-base-url.js           |   4 +
 ...te-edge-firewall-functions-service.test.js | 112 +++++++++++++
 ...te-edge-firewall-functions-service.test.js |  80 +++++++++
 .../list-functions-service.test.js            |  71 ++++++++
 .../load-function-service.test.js             |  67 ++++++++
 src/views/EdgeFirewall/TabsView.vue           |   9 +-
 .../EdgeFirewallFunctions/Drawer/index.vue    | 137 ++++++++++++++++
 .../FormFieldsEdgeApplicationsFunctions.vue   |  90 ++++++++++
 src/views/EdgeFirewallFunctions/ListView.vue  | 155 ++++++++++++++++++
 19 files changed, 1097 insertions(+), 2 deletions(-)
 create mode 100644 src/services/edge-firewall-functions-services/create-function-service.js
 create mode 100644 src/services/edge-firewall-functions-services/delete-function-service.js
 create mode 100644 src/services/edge-firewall-functions-services/edit-function-service.js
 create mode 100644 src/services/edge-firewall-functions-services/index.js
 create mode 100644 src/services/edge-firewall-functions-services/list-edge-firewall-functions-service.js
 create mode 100644 src/services/edge-firewall-functions-services/list-edge-functions-service.js
 create mode 100644 src/services/edge-firewall-functions-services/list-functions-service.js
 create mode 100644 src/services/edge-firewall-functions-services/loader-function-service.js
 create mode 100644 src/services/edge-firewall-functions-services/make-edge-firewall-base-url.js
 create mode 100644 src/services/edge-firewall-functions-services/make-edge-functions-base-url.js
 create mode 100644 src/tests/services/edge-firewall-functions-services/create-edge-firewall-functions-service.test.js
 create mode 100644 src/tests/services/edge-firewall-functions-services/delete-edge-firewall-functions-service.test.js
 create mode 100644 src/tests/services/edge-firewall-functions-services/list-functions-service.test.js
 create mode 100644 src/tests/services/edge-firewall-functions-services/load-function-service.test.js
 create mode 100644 src/views/EdgeFirewallFunctions/Drawer/index.vue
 create mode 100644 src/views/EdgeFirewallFunctions/FormFields/FormFieldsEdgeApplicationsFunctions.vue
 create mode 100644 src/views/EdgeFirewallFunctions/ListView.vue

diff --git a/src/router/routes/edge-firewall-routes/index.js b/src/router/routes/edge-firewall-routes/index.js
index dc316ca4a..d60c0d42e 100644
--- a/src/router/routes/edge-firewall-routes/index.js
+++ b/src/router/routes/edge-firewall-routes/index.js
@@ -1,6 +1,7 @@
 import * as Helpers from '@/helpers'
 import * as DomainServices from '@/services/domains-services'
 import * as EdgeFirewall from '@/services/edge-firewall-services'
+import * as EdgeFirewallFunctions from '@/services/edge-firewall-functions-services'
 
 /** @type {import('vue-router').RouteRecordRaw} */
 export const edgeFirewallRoutes = {
@@ -55,6 +56,13 @@ export const edgeFirewallRoutes = {
           createEdgeFirewallService: EdgeFirewall.createEdgeFirewallService,
           loadEdgeFirewallService: EdgeFirewall.loadEdgeFirewallService,
           editEdgeFirewallService: EdgeFirewall.editEdgeFirewallService,
+
+          listEdgeFunctionsService: EdgeFirewallFunctions.listEdgeFunctionsService,
+          listEdgeFirewallFunctionService: EdgeFirewallFunctions.listEdgeFirewallFunctionsService,
+          createFunctionService: EdgeFirewallFunctions.createFunctionService,
+          editFunctionService: EdgeFirewallFunctions.editFunctionService,
+          deleteFunctionService: EdgeFirewallFunctions.deleteFunctionService,
+          loadFunctionService: EdgeFirewallFunctions.loadFunctionService,
           documentationService: Helpers.documentationCatalog.edgeFirewall,
           updatedRedirect: 'list-edge-firewall'
         },
diff --git a/src/services/edge-firewall-functions-services/create-function-service.js b/src/services/edge-firewall-functions-services/create-function-service.js
new file mode 100644
index 000000000..0854798d1
--- /dev/null
+++ b/src/services/edge-firewall-functions-services/create-function-service.js
@@ -0,0 +1,89 @@
+import { AxiosHttpClientAdapter } from '@/services/axios/AxiosHttpClientAdapter'
+import { makeEdgeFirewallBaseUrl } from './make-edge-firewall-base-url'
+import * as Errors from '@/services/axios/errors'
+
+export const createFunctionService = async (payload) => {
+  const edgeFirewallID = payload.id
+
+  let httpResponse = await AxiosHttpClientAdapter.request({
+    url: `${makeEdgeFirewallBaseUrl()}/${edgeFirewallID}/functions_instances`,
+    method: 'POST',
+    body: adapt(payload)
+  })
+
+  return parseHttpResponse(httpResponse)
+}
+
+const adapt = (payload) => {
+  return {
+    name: payload.name,
+    edge_function: payload.edgeFunctionID,
+    json_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-firewall-functions-services/delete-function-service.js b/src/services/edge-firewall-functions-services/delete-function-service.js
new file mode 100644
index 000000000..0017b4655
--- /dev/null
+++ b/src/services/edge-firewall-functions-services/delete-function-service.js
@@ -0,0 +1,37 @@
+import { AxiosHttpClientAdapter } from '../axios/AxiosHttpClientAdapter'
+import { makeEdgeFirewallBaseUrl } from './make-edge-firewall-base-url'
+import * as Errors from '@/services/axios/errors'
+
+export const deleteFunctionService = async (functionId, edgeFirewallID) => {
+  let httpResponse = await AxiosHttpClientAdapter.request({
+    url: `${makeEdgeFirewallBaseUrl()}/${edgeFirewallID}/functions_instances/${functionId}`,
+    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 '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-firewall-functions-services/edit-function-service.js b/src/services/edge-firewall-functions-services/edit-function-service.js
new file mode 100644
index 000000000..b14e886b3
--- /dev/null
+++ b/src/services/edge-firewall-functions-services/edit-function-service.js
@@ -0,0 +1,49 @@
+import * as Errors from '@/services/axios/errors'
+import { AxiosHttpClientAdapter } from '../axios/AxiosHttpClientAdapter'
+import { makeEdgeFirewallBaseUrl } from './make-edge-firewall-base-url'
+
+export const editFunctionService = async (payload) => {
+  let httpResponse = await AxiosHttpClientAdapter.request({
+    url: `${makeEdgeFirewallBaseUrl()}/${payload.edgeFirewallID}/functions_instances/${payload.id}`,
+    method: 'PATCH',
+    body: adapt(payload)
+  })
+
+  return parseHttpResponse(httpResponse)
+}
+
+const adapt = (payload) => {
+  return {
+    name: payload.name,
+    edge_function: payload.edgeFunctionID,
+    json_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-firewall-functions-services/index.js b/src/services/edge-firewall-functions-services/index.js
new file mode 100644
index 000000000..fef49beac
--- /dev/null
+++ b/src/services/edge-firewall-functions-services/index.js
@@ -0,0 +1,15 @@
+import { listEdgeFirewallFunctionsService } from './list-edge-firewall-functions-service'
+import { listEdgeFunctionsService } from './list-edge-functions-service'
+import { createFunctionService } from './create-function-service'
+import { editFunctionService } from './edit-function-service'
+import { deleteFunctionService } from './delete-function-service'
+import { loadFunctionService } from './loader-function-service'
+
+export {
+  listEdgeFirewallFunctionsService,
+  createFunctionService,
+  editFunctionService,
+  deleteFunctionService,
+  listEdgeFunctionsService,
+  loadFunctionService
+}
diff --git a/src/services/edge-firewall-functions-services/list-edge-firewall-functions-service.js b/src/services/edge-firewall-functions-services/list-edge-firewall-functions-service.js
new file mode 100644
index 000000000..7122de106
--- /dev/null
+++ b/src/services/edge-firewall-functions-services/list-edge-firewall-functions-service.js
@@ -0,0 +1,52 @@
+import * as FunctionsInstanceService from '@/services/edge-firewall-functions-services/list-functions-service'
+import * as EdgeFunctionsService from '@/services/edge-functions-services'
+import { parseHttpResponse } from '@/services/axios/AxiosHttpClientAdapter'
+
+const listFunctionInstances = async (edgeFirewallID) => {
+  return FunctionsInstanceService.listFunctionsService({
+    edgeFirewallID
+  })
+}
+
+const getFunctionData = async (edgeFirewallFunction) => {
+  return EdgeFunctionsService.loadEdgeFunctionsService({
+    id: edgeFirewallFunction.edgeFunctionId
+  })
+}
+
+const listFunctionInstancesAndFunctionData = async (functionsInstances) => {
+  return Promise.all(
+    functionsInstances?.map(async (edgeFirewallFunction) => {
+      let functionData = await getFunctionData(edgeFirewallFunction)
+      return mapFunctionData(edgeFirewallFunction, functionData)
+    })
+  )
+}
+
+export const listEdgeFirewallFunctionsService = async (edgeFirewallID) => {
+  const functionsInstances = await listFunctionInstances(edgeFirewallID)
+  const functions = await listFunctionInstancesAndFunctionData(functionsInstances)
+  const httpResponse = adapt(functions)
+
+  return parseHttpResponse(httpResponse)
+}
+
+const mapFunctionData = (edgeFirewallFunction, functionData) => {
+  return {
+    id: edgeFirewallFunction.id,
+    name: edgeFirewallFunction.name,
+    functionInstanced: functionData.name,
+    lastEditor: edgeFirewallFunction.lastEditor,
+    modified: new Intl.DateTimeFormat('us', { dateStyle: 'full' }).format(
+      new Date(edgeFirewallFunction.lastModified)
+    ),
+    version: functionData.version
+  }
+}
+
+const adapt = (functions) => {
+  return {
+    body: functions,
+    statusCode: 200
+  }
+}
diff --git a/src/services/edge-firewall-functions-services/list-edge-functions-service.js b/src/services/edge-firewall-functions-services/list-edge-functions-service.js
new file mode 100644
index 000000000..ac6f7e8fb
--- /dev/null
+++ b/src/services/edge-firewall-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-firewall-functions-services/list-functions-service.js b/src/services/edge-firewall-functions-services/list-functions-service.js
new file mode 100644
index 000000000..1f2cbacb5
--- /dev/null
+++ b/src/services/edge-firewall-functions-services/list-functions-service.js
@@ -0,0 +1,50 @@
+import { AxiosHttpClientAdapter, parseHttpResponse } from '@/services/axios/AxiosHttpClientAdapter'
+import { makeEdgeFirewallBaseUrl } from './make-edge-firewall-base-url'
+
+export const listFunctionsService = async ({
+  edgeFirewallID,
+  orderBy = 'id',
+  sort = 'asc',
+  page = 1,
+  pageSize = 200
+}) => {
+  const searchParams = makeSearchParams({ orderBy, sort, page, pageSize })
+  let httpResponse = await AxiosHttpClientAdapter.request({
+    url: `${makeEdgeFirewallBaseUrl()}/${edgeFirewallID}/functions_instances?${searchParams.toString()}`,
+    method: 'GET'
+  })
+
+  httpResponse = adapt(httpResponse)
+
+  return parseHttpResponse(httpResponse)
+}
+
+const adapt = (httpResponse) => {
+  const bodyResults = httpResponse.body.results
+
+  const parsedFunctions = bodyResults?.map((edgeFirewall) => {
+    return {
+      id: edgeFirewall.id,
+      edgeFunctionId: edgeFirewall.edge_function,
+      name: edgeFirewall.name,
+      lastEditor: edgeFirewall.last_editor,
+      lastModified: edgeFirewall.last_modified,
+      args: edgeFirewall.args
+    }
+  })
+
+  return {
+    body: parsedFunctions,
+    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-firewall-functions-services/loader-function-service.js b/src/services/edge-firewall-functions-services/loader-function-service.js
new file mode 100644
index 000000000..a36805493
--- /dev/null
+++ b/src/services/edge-firewall-functions-services/loader-function-service.js
@@ -0,0 +1,27 @@
+import { AxiosHttpClientAdapter, parseHttpResponse } from '../axios/AxiosHttpClientAdapter'
+import { makeEdgeFirewallBaseUrl } from './make-edge-firewall-base-url'
+
+export const loadFunctionService = async ({ edgeFirewallID, functionID }) => {
+  let httpResponse = await AxiosHttpClientAdapter.request({
+    url: `${makeEdgeFirewallBaseUrl()}/${edgeFirewallID}/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,
+    name: httpResponse.body.results.name,
+    args: JSON.stringify(httpResponse.body.results.json_args)
+  }
+
+  return {
+    body: parsedVariable,
+    statusCode: httpResponse.statusCode
+  }
+}
diff --git a/src/services/edge-firewall-functions-services/make-edge-firewall-base-url.js b/src/services/edge-firewall-functions-services/make-edge-firewall-base-url.js
new file mode 100644
index 000000000..acc73f81a
--- /dev/null
+++ b/src/services/edge-firewall-functions-services/make-edge-firewall-base-url.js
@@ -0,0 +1,4 @@
+export const makeEdgeFirewallBaseUrl = () => {
+  const version = 'v3'
+  return `${version}/edge_firewall`
+}
diff --git a/src/services/edge-firewall-functions-services/make-edge-functions-base-url.js b/src/services/edge-firewall-functions-services/make-edge-functions-base-url.js
new file mode 100644
index 000000000..7085ee369
--- /dev/null
+++ b/src/services/edge-firewall-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-firewall-functions-services/create-edge-firewall-functions-service.test.js b/src/tests/services/edge-firewall-functions-services/create-edge-firewall-functions-service.test.js
new file mode 100644
index 000000000..28ac2dd4d
--- /dev/null
+++ b/src/tests/services/edge-firewall-functions-services/create-edge-firewall-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-firewall-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('EdgeFirewallFunctionsServices', () => {
+  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_firewall/${fixtures.functionMock.id}/functions_instances`,
+      method: 'POST',
+      body: {
+        name: fixtures.functionMock.name,
+        edge_function: fixtures.functionMock.edgeFunctionID,
+        json_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-firewall-functions-services/delete-edge-firewall-functions-service.test.js b/src/tests/services/edge-firewall-functions-services/delete-edge-firewall-functions-service.test.js
new file mode 100644
index 000000000..e6579713b
--- /dev/null
+++ b/src/tests/services/edge-firewall-functions-services/delete-edge-firewall-functions-service.test.js
@@ -0,0 +1,80 @@
+import { AxiosHttpClientAdapter } from '@/services/axios/AxiosHttpClientAdapter'
+import * as Errors from '@/services/axios/errors'
+import { deleteFunctionService } from '@/services/edge-firewall-functions-services/delete-function-service'
+import { describe, expect, it, vi } from 'vitest'
+
+const mocks = {
+  functionID: 123,
+  edgeApplicationID: 12221
+}
+const makeSut = () => {
+  const sut = deleteFunctionService
+
+  return {
+    sut
+  }
+}
+
+describe('EdgeFirewallFunctionsServices', () => {
+  it('should call API with correct params', async () => {
+    const requestSpy = vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+      statusCode: 204
+    })
+
+    const { sut } = makeSut()
+    sut(mocks.functionID, mocks.edgeApplicationID)
+
+    expect(requestSpy).toHaveBeenCalledWith({
+      url: `v3/edge_firewall/${mocks.edgeApplicationID}/functions_instances/${mocks.functionID}`,
+      method: 'DELETE'
+    })
+  })
+
+  it('should return a feedback message on successfully deleted', async () => {
+    vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+      statusCode: 204
+    })
+
+    const { sut } = makeSut()
+
+    const feedbackMessage = await sut(mocks.functionID, mocks.edgeApplicationID)
+
+    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-firewall-functions-services/list-functions-service.test.js b/src/tests/services/edge-firewall-functions-services/list-functions-service.test.js
new file mode 100644
index 000000000..c2f7de2c0
--- /dev/null
+++ b/src/tests/services/edge-firewall-functions-services/list-functions-service.test.js
@@ -0,0 +1,71 @@
+import { AxiosHttpClientAdapter } from '@/services/axios/AxiosHttpClientAdapter'
+import { listEdgeFunctionsService } from '@/services/edge-firewall-functions-services'
+import { describe, expect, it, vi } from 'vitest'
+
+// Constantes para reutilização
+const API_VERSION = 'v3'
+const EDGE_FIREWALL_ID = 123
+
+const fixtures = {
+  functionsInstance: {
+    name: 'function instance name',
+    json_args: {},
+    edge_function_id: 321,
+    id: 123
+  },
+  functionInstanceWithVersion: {
+    version: 2,
+    vendor: 3,
+    name: 'function instance version',
+    json_args: {},
+    edge_function_id: 321,
+    id: 123
+  }
+}
+
+const makeSut = () => {
+  const sut = listEdgeFunctionsService
+  return { sut }
+}
+
+describe('EdgeFirewallFunctionsServices', () => {
+  vi.restoreAllMocks()
+
+  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: EDGE_FIREWALL_ID })
+
+    expect(requestSpy).toHaveBeenCalledWith({
+      url: `${API_VERSION}/edge_functions?order_by=id&sort=asc&page=1&page_size=200`,
+      method: 'GET'
+    })
+  })
+
+  it('should correctly parse all returned edge firewall function instances', async () => {
+    vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+      statusCode: 200,
+      body: { results: [fixtures.functionsInstance, fixtures.functionInstanceWithVersion] }
+    })
+    const { sut } = makeSut()
+
+    const result = await sut({ id: EDGE_FIREWALL_ID })
+
+    expect(result).toEqual([
+      {
+        label: 'function instance name',
+        value: fixtures.functionsInstance.id,
+        args: fixtures.functionsInstance.args,
+      },
+      {
+        label:  'function instance version',
+        value: fixtures.functionInstanceWithVersion.id,
+        args: fixtures.functionInstanceWithVersion.args,
+      }
+    ])
+  })
+})
diff --git a/src/tests/services/edge-firewall-functions-services/load-function-service.test.js b/src/tests/services/edge-firewall-functions-services/load-function-service.test.js
new file mode 100644
index 000000000..ec084fb02
--- /dev/null
+++ b/src/tests/services/edge-firewall-functions-services/load-function-service.test.js
@@ -0,0 +1,67 @@
+import { AxiosHttpClientAdapter } from '@/services/axios/AxiosHttpClientAdapter'
+import { loadFunctionService } from '@/services/edge-firewall-functions-services'
+import { describe, expect, it, vi } from 'vitest'
+
+// Constantes para reutilização
+const EDGE_FIREWALL_ID = '123'
+const FUNCTION_ID = '456'
+
+const fixture = {
+  functionInstance: {
+    id: FUNCTION_ID,
+    edge_function: '789',
+    name: 'function name',
+    json_args: { key: 'value' }
+  }
+}
+
+const makeSut = () => {
+  const sut = loadFunctionService
+  return { sut }
+}
+
+describe('EdgeFirewallFunctionsServices', () => {
+  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({ edgeFirewallID: EDGE_FIREWALL_ID, functionID: FUNCTION_ID })
+
+    expect(requestSpy).toHaveBeenCalledWith({
+      url: `v3/edge_firewall/${EDGE_FIREWALL_ID}/functions_instances/${FUNCTION_ID}`,
+      method: 'GET'
+    })
+  })
+
+  it('should correctly parse the returned edge firewall function instance', async () => {
+    vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+      statusCode: 200,
+      body: { results: fixture.functionInstance }
+    })
+    const { sut } = makeSut()
+
+    const result = await sut({ edgeFirewallID: EDGE_FIREWALL_ID, functionID: FUNCTION_ID })
+
+    expect(result).toEqual({
+      id: fixture.functionInstance.id,
+      edgeFunctionID: fixture.functionInstance.edge_function,
+      name: fixture.functionInstance.name,
+      args: JSON.stringify(fixture.functionInstance.json_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_FIREWALL_ID, functionID: FUNCTION_ID })
+    ).rejects.toThrow('Network error')
+  })
+})
diff --git a/src/views/EdgeFirewall/TabsView.vue b/src/views/EdgeFirewall/TabsView.vue
index 5c9a075a4..bede866f0 100644
--- a/src/views/EdgeFirewall/TabsView.vue
+++ b/src/views/EdgeFirewall/TabsView.vue
@@ -4,6 +4,7 @@
   import EditView from '@/views/EdgeFirewall/EditView'
   import TabPanel from 'primevue/tabpanel'
   import TabView from 'primevue/tabview'
+  import EdgeFirewallFunctionsListView from '@/views/EdgeFirewallFunctions/ListView'
   import { useToast } from 'primevue/usetoast'
 
   import { computed, ref } from 'vue'
@@ -127,8 +128,12 @@
         </TabPanel>
         <TabPanel
           header="Functions"
-          v-if="isEnableFunction"
-        ></TabPanel>
+          v-if="isEnableFunction">
+          <EdgeFirewallFunctionsListView
+            v-bind="props.edgeFirewallServices"
+            :edgeFirewallID="edgeFirewallId"
+          />
+        </TabPanel>
         <TabPanel header="Rules Engine"></TabPanel>
       </TabView>
     </template>
diff --git a/src/views/EdgeFirewallFunctions/Drawer/index.vue b/src/views/EdgeFirewallFunctions/Drawer/index.vue
new file mode 100644
index 000000000..041918b57
--- /dev/null
+++ b/src/views/EdgeFirewallFunctions/Drawer/index.vue
@@ -0,0 +1,137 @@
+<template>
+  <CreateDrawerBlock
+    v-if="loadCreateFunctionDrawer"
+    v-model:visible="showCreateFunctionDrawer"
+    :createService="props.createFunctionService"
+    :schema="validationSchema"
+    :initialValues="initialValues"
+    @onSuccess="handleCreateFunction"
+    :showBarGoBack="true"
+    title="Instance New"
+  >
+    <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 Instance"
+  >
+    <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({
+    edgeFirewallID: {
+      type: String,
+      required: true
+    },
+    createFunctionService: {
+      type: Function,
+      required: true
+    },
+    editFunctionService: {
+      required: true,
+      type: Function
+    },
+    listEdgeFunctionsService: {
+      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.edgeFirewallID,
+    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,
+      edgeFirewallID: props.edgeFirewallID
+    })
+  }
+
+  const loadService = async () => {
+    const functions = await props.loadFunctionService({
+      edgeFirewallID: props.edgeFirewallID,
+      functionID: selectedFunctionToEdit.value
+    })
+    return functions
+  }
+
+  const openDrawerCreate = () => {
+    showCreateFunctionDrawer.value = true
+  }
+
+  const closeDrawerCreate = () => {
+    showCreateFunctionDrawer.value = false
+  }
+
+  const openDrawerEdit = (functionID) => {
+    if (functionID) {
+      showEditFunctionDrawer.value = true
+      selectedFunctionToEdit.value = functionID.toString()
+    }
+  }
+
+  const closeDrawerEdit = () => {
+    showEditFunctionDrawer.value = false
+  }
+
+  const handleCreateFunction = () => {
+    closeDrawerCreate()
+    emit('onSuccess')
+  }
+
+  defineExpose({
+    openDrawerCreate,
+    openDrawerEdit
+  })
+</script>
diff --git a/src/views/EdgeFirewallFunctions/FormFields/FormFieldsEdgeApplicationsFunctions.vue b/src/views/EdgeFirewallFunctions/FormFields/FormFieldsEdgeApplicationsFunctions.vue
new file mode 100644
index 000000000..b927a8376
--- /dev/null
+++ b/src/views/EdgeFirewallFunctions/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/EdgeFirewallFunctions/ListView.vue b/src/views/EdgeFirewallFunctions/ListView.vue
new file mode 100644
index 000000000..c5ca583d4
--- /dev/null
+++ b/src/views/EdgeFirewallFunctions/ListView.vue
@@ -0,0 +1,155 @@
+<template>
+  <DrawerFunction
+    ref="drawerFunctionRef"
+    :edgeFirewallID="props.edgeFirewallID"
+    :createFunctionService="props.createFunctionService"
+    :listEdgeFunctionsService="props.listEdgeFunctionsService"
+    :loadFunctionService="props.loadFunctionService"
+    :editFunctionService="props.editFunctionService"
+    @onSuccess="reloadList"
+  />
+  <div v-if="hasContentToList">
+    <ListTableBlock
+      ref="listFunctionsEdgeFirewallRef"
+      :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 Functions instanced."
+    description="Create your first instance."
+    createButtonLabel="Instance"
+    :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 ListTableBlock from '@/templates/list-table-block/no-header'
+  import DrawerFunction from './Drawer'
+  import { computed, ref } from 'vue'
+
+  defineOptions({ name: 'list-edge-applications-functions-tab' })
+
+  const hasContentToList = ref(true)
+
+  const props = defineProps({
+    edgeFirewallID: {
+      required: true,
+      type: String
+    },
+    listEdgeFunctionsService: {
+      required: true,
+      type: Function
+    },
+    listEdgeFirewallFunctionService: {
+      required: true,
+      type: Function
+    },
+    loadFunctionService: {
+      required: true,
+      type: Function
+    },
+    createFunctionService: {
+      required: true,
+      type: Function
+    },
+    editFunctionService: {
+      required: true,
+      type: Function
+    },
+    deleteFunctionService: {
+      required: true,
+      type: Function
+    },
+    documentationService: {
+      required: true,
+      type: Function
+    }
+  })
+
+  const drawerFunctionRef = ref('')
+  const listFunctionsEdgeFirewallRef = ref('')
+
+  const getColumns = computed(() => {
+    return [
+      {
+        field: 'name',
+        header: 'Name'
+      },
+      {
+        field: 'functionInstanced',
+        header: 'Function Instanced',
+      },
+      {
+        field: 'version',
+        header: 'Version'
+      },
+      {
+        field: 'lastEditor',
+        header: 'Last Editor'
+      },
+      {
+        field: 'modified',
+        sortField: 'lastModifiedDate',
+        header: 'Last Modified'
+      }
+    ]
+  })
+
+  const listFunctionsInstance = async () => {
+    return await props.listEdgeFirewallFunctionService(props.edgeFirewallID)
+  }
+
+  const deleteFunctionsWithDecorator = async (functionId) => {
+    return await props.deleteFunctionService(functionId, props.edgeFirewallID)
+  }
+
+  const handleLoadData = (event) => {
+    hasContentToList.value = event
+  }
+
+  const openCreateFunctionDrawer = () => {
+    drawerFunctionRef.value.openDrawerCreate()
+  }
+
+  const openEditFunctionDrawer = (data) => {
+    drawerFunctionRef.value.openDrawerEdit(data.id)
+  }
+
+  const reloadList = () => {
+    if (hasContentToList.value) {
+      listFunctionsEdgeFirewallRef.value.reload()
+      return
+    }
+    hasContentToList.value = true
+  }
+</script>

From 6eb0e6227c1459754db79f097cfbad9f1df7afe4 Mon Sep 17 00:00:00 2001
From: Matheus Sunderhus <matheus.sunderhus@azion.com>
Date: Fri, 19 Jan 2024 10:51:06 -0300
Subject: [PATCH 15/28] test: ensure load-rules-engine-service calls apis with
 correct params

---
 .../load-rules-engine-service.js              | 13 +++-
 .../make-edge-application-base-url.js         |  3 +-
 .../load-rules-engine-service.test.js         | 67 +++++++++++++++++++
 3 files changed, 80 insertions(+), 3 deletions(-)
 create mode 100644 src/tests/services/edge-application-rules-engine-services/load-rules-engine-service.test.js

diff --git a/src/services/edge-application-rules-engine-services/load-rules-engine-service.js b/src/services/edge-application-rules-engine-services/load-rules-engine-service.js
index 4d56164f8..e49c80eee 100644
--- a/src/services/edge-application-rules-engine-services/load-rules-engine-service.js
+++ b/src/services/edge-application-rules-engine-services/load-rules-engine-service.js
@@ -2,7 +2,7 @@ import { AxiosHttpClientAdapter, parseHttpResponse } from '@/services/axios/Axio
 import { makeEdgeApplicationBaseUrl } from '../edge-application-services/make-edge-application-base-url'
 
 export const loadRulesEngineService = async ({ edgeApplicationId, id, phase }) => {
-  const rulesPhase = phase.content === 'Default' ? 'request' : phase.content?.toLowerCase()
+  const rulesPhase = generateRulePhase(phase)
 
   let httpResponse = await AxiosHttpClientAdapter.request({
     url: `${makeEdgeApplicationBaseUrl()}/${edgeApplicationId}/rules_engine/${rulesPhase}/rules/${id}`,
@@ -13,6 +13,17 @@ export const loadRulesEngineService = async ({ edgeApplicationId, id, phase }) =
   return parseHttpResponse(httpResponse)
 }
 
+/**
+ *
+ * @param {Object} phase
+ * @param {string | undefined} phase.content
+ * @returns {string}
+ */
+const generateRulePhase = (phase) => {
+  const DEFAULT_RULE_PHASE = 'Default'
+  return phase.content === DEFAULT_RULE_PHASE ? 'request' : phase.content?.toLowerCase()
+}
+
 const adapt = (httpResponse) => {
   const ruleEngine = httpResponse.body.results
   const parsedBody = {
diff --git a/src/services/edge-application-services/make-edge-application-base-url.js b/src/services/edge-application-services/make-edge-application-base-url.js
index 8948fdbce..98a086a2c 100644
--- a/src/services/edge-application-services/make-edge-application-base-url.js
+++ b/src/services/edge-application-services/make-edge-application-base-url.js
@@ -1,4 +1,3 @@
 export const makeEdgeApplicationBaseUrl = () => {
-  const version = 'v3'
-  return `${version}/edge_applications`
+  return `v3/edge_applications`
 }
diff --git a/src/tests/services/edge-application-rules-engine-services/load-rules-engine-service.test.js b/src/tests/services/edge-application-rules-engine-services/load-rules-engine-service.test.js
new file mode 100644
index 000000000..4f19c97cc
--- /dev/null
+++ b/src/tests/services/edge-application-rules-engine-services/load-rules-engine-service.test.js
@@ -0,0 +1,67 @@
+import { describe, expect, it, vi } from 'vitest'
+import { loadRulesEngineService } from '@/services/edge-application-rules-engine-services'
+import { AxiosHttpClientAdapter } from '@/services/axios/AxiosHttpClientAdapter'
+
+const fixtures = {
+  ruleEngineMock: {
+    id: 12321,
+    name: 'teste name',
+    phase: { content: 'request' },
+    behaviors: '',
+    criteria: '',
+    is_active: true,
+    description: 'description',
+    order: 3
+  },
+  edgeApplicationIdMock: 42176583
+}
+
+const makeSut = () => {
+  const sut = loadRulesEngineService
+  return {
+    sut
+  }
+}
+
+describe('EdgeApplicationRulesEnginesServices', () => {
+  it('should call api with correct params', async () => {
+    const requestSpy = vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+      statusCode: 200,
+      body: {
+        results: fixtures.ruleEngineMock
+      }
+    })
+    const { sut } = makeSut()
+
+    await sut({
+      edgeApplicationId: fixtures.edgeApplicationIdMock,
+      id: fixtures.ruleEngineMock.id,
+      phase: fixtures.ruleEngineMock.phase
+    })
+
+    expect(requestSpy).toHaveBeenCalledWith({
+      url: `v3/edge_applications/${fixtures.edgeApplicationIdMock}/rules_engine/request/rules/${fixtures.ruleEngineMock.id}`,
+      method: 'GET'
+    })
+  })
+
+  it('should calculate correctly the rule engine phase', async () => {
+    const requestSpy = vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+      statusCode: 200,
+      body: {
+        results: fixtures.ruleEngineMock
+      }
+    })
+    const { sut } = makeSut()
+
+    await sut({
+      edgeApplicationId: fixtures.edgeApplicationIdMock,
+      id: fixtures.ruleEngineMock.id,
+      phase: { content: 'Default' }
+    })
+
+    expect(requestSpy.mock.lastCall[0].url).toBe(
+      `v3/edge_applications/${fixtures.edgeApplicationIdMock}/rules_engine/request/rules/${fixtures.ruleEngineMock.id}`
+    )
+  })
+})

From 0403ecd54d310ad10cbc15de7af40710939ae15f Mon Sep 17 00:00:00 2001
From: Matheus Sunderhus <matheus.sunderhus@azion.com>
Date: Fri, 19 Jan 2024 11:31:04 -0300
Subject: [PATCH 16/28] test: ensure createRulesEngineService call api with
 correct params Also ensure to parse correctly API errors on status code 400
 and 500

---
 .../create-rules-engine-service.test.js       | 105 ++++++++++++++++++
 1 file changed, 105 insertions(+)
 create mode 100644 src/tests/services/edge-application-rules-engine-services/create-rules-engine-service.test.js

diff --git a/src/tests/services/edge-application-rules-engine-services/create-rules-engine-service.test.js b/src/tests/services/edge-application-rules-engine-services/create-rules-engine-service.test.js
new file mode 100644
index 000000000..15c14e449
--- /dev/null
+++ b/src/tests/services/edge-application-rules-engine-services/create-rules-engine-service.test.js
@@ -0,0 +1,105 @@
+import { AxiosHttpClientAdapter } from '@/services/axios/AxiosHttpClientAdapter'
+import { createRulesEngineService } from '@/services/edge-application-rules-engine-services'
+import * as Errors from '@/services/axios/errors'
+import { describe, expect, it, vi } from 'vitest'
+
+const fixtures = {
+  ruleEngineMock: {
+    edgeApplicationId: 415267839,
+    name: 'teste name',
+    phase: 'request',
+    behaviors: 'behaviors-mock',
+    criteria: 'mock-criteria',
+    isActive: true,
+    description: 'description'
+  }
+}
+
+const makeSut = () => {
+  const sut = createRulesEngineService
+
+  return { sut }
+}
+
+describe('EdgeApplicationRulesEnginesServices', () => {
+  it('should call api with correct params', async () => {
+    const requestSpy = vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+      statusCode: 201
+    })
+    const { sut } = makeSut()
+
+    await sut(fixtures.ruleEngineMock)
+
+    expect(requestSpy).toHaveBeenCalledWith({
+      url: `v3/edge_applications/${fixtures.ruleEngineMock.edgeApplicationId}/rules_engine/request/rules`,
+      method: 'POST',
+      body: {
+        name: fixtures.ruleEngineMock.name,
+        phase: fixtures.ruleEngineMock.phase,
+        criteria: fixtures.ruleEngineMock.criteria,
+        behaviors: fixtures.ruleEngineMock.behaviors,
+        is_active: fixtures.ruleEngineMock.isActive,
+        description: fixtures.ruleEngineMock.description
+      }
+    })
+  })
+
+  it('should parse API error correctly on not-found requests', async () => {
+    vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+      statusCode: 400,
+      body: {
+        error: 'this is an validation error message from API'
+      }
+    })
+    const { sut } = makeSut()
+
+    const result = sut(fixtures.ruleEngineMock)
+
+    expect(result).rejects.toBe('error: this is an validation error message from API')
+  })
+
+  it('should parse API error correctly when internal server errors occur ', async () => {
+    vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+      statusCode: 500,
+      body: {
+        error: 'this is an internal API server error message'
+      }
+    })
+    const { sut } = makeSut()
+
+    const result = sut(fixtures.ruleEngineMock)
+
+    expect(result).rejects.toBe('error: this is an internal API server 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: '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.ruleEngineMock)
+
+      expect(response).rejects.toBe(expectedError)
+    }
+  )
+})

From 34735c07b9c7d7587e91c53e931508b2367c0e50 Mon Sep 17 00:00:00 2001
From: Matheus Sunderhus <matheus.sunderhus@azion.com>
Date: Fri, 19 Jan 2024 12:03:22 -0300
Subject: [PATCH 17/28] chore: lint project files

---
 src/templates/create-modal-block/index.vue    | 32 ++++++++++---------
 .../create-rules-engine-service.test.js       | 20 +++---------
 .../list-functions-service.test.js            |  6 ++--
 src/views/EdgeFirewall/TabsView.vue           |  3 +-
 src/views/EdgeFirewallFunctions/ListView.vue  |  2 +-
 5 files changed, 28 insertions(+), 35 deletions(-)

diff --git a/src/templates/create-modal-block/index.vue b/src/templates/create-modal-block/index.vue
index 6c8885142..6fd18767a 100644
--- a/src/templates/create-modal-block/index.vue
+++ b/src/templates/create-modal-block/index.vue
@@ -144,7 +144,7 @@
   }
 
   const onTabChange = async (target) => {
-    if(!isLoading.value) {
+    if (!isLoading.value) {
       selectedTab.value = target.value || selectedTab.value
       if (target.value === 'browse' && browseTemplates.value.length === 0) {
         await loadBrowse()
@@ -154,22 +154,24 @@
 </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">
-       <ul class="flex flex-col gap-1">
-          <li v-for="(menuitem, index) in items" :key="index"> 
-            <PrimeButton 
-              :class="{ 'p-selectbutton': menuitem.value === selectedTab, 'p-disabled': isLoading }"
-              class= "w-full p-button p-button-text p-button-primary p-button-sm whitespace-nowrap h-[38px] flex"
-              :pt="{
-                label: { class: 'w-full text-left' },
-              }"
-              @click="onTabChange(menuitem)"
-              :label="menuitem.label"
-            />
-          </li>
-        </ul>
+      <ul class="flex flex-col gap-1">
+        <li
+          v-for="(menuitem, index) in items"
+          :key="index"
+        >
+          <PrimeButton
+            :class="{ 'p-selectbutton': menuitem.value === selectedTab, 'p-disabled': isLoading }"
+            class="w-full p-button p-button-text p-button-primary p-button-sm whitespace-nowrap h-[38px] flex"
+            :pt="{
+              label: { class: 'w-full text-left' }
+            }"
+            @click="onTabChange(menuitem)"
+            :label="menuitem.label"
+          />
+        </li>
+      </ul>
     </div>
 
     <div class="overflow-auto w-full flex flex-col">
diff --git a/src/tests/services/edge-application-rules-engine-services/create-rules-engine-service.test.js b/src/tests/services/edge-application-rules-engine-services/create-rules-engine-service.test.js
index 15c14e449..690ab7c1c 100644
--- a/src/tests/services/edge-application-rules-engine-services/create-rules-engine-service.test.js
+++ b/src/tests/services/edge-application-rules-engine-services/create-rules-engine-service.test.js
@@ -55,21 +55,7 @@ describe('EdgeApplicationRulesEnginesServices', () => {
 
     const result = sut(fixtures.ruleEngineMock)
 
-    expect(result).rejects.toBe('error: this is an validation error message from API')
-  })
-
-  it('should parse API error correctly when internal server errors occur ', async () => {
-    vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
-      statusCode: 500,
-      body: {
-        error: 'this is an internal API server error message'
-      }
-    })
-    const { sut } = makeSut()
-
-    const result = sut(fixtures.ruleEngineMock)
-
-    expect(result).rejects.toBe('error: this is an internal API server error message')
+    expect(result).rejects.toBe('this is an validation error message from API')
   })
 
   it.each([
@@ -85,6 +71,10 @@ describe('EdgeApplicationRulesEnginesServices', () => {
       statusCode: 404,
       expectedError: new Errors.NotFoundError().message
     },
+    {
+      statusCode: 500,
+      expectedError: new Errors.InternalServerError().message
+    },
     {
       statusCode: 'unmappedStatusCode',
       expectedError: new Errors.UnexpectedError().message
diff --git a/src/tests/services/edge-firewall-functions-services/list-functions-service.test.js b/src/tests/services/edge-firewall-functions-services/list-functions-service.test.js
index c2f7de2c0..020533743 100644
--- a/src/tests/services/edge-firewall-functions-services/list-functions-service.test.js
+++ b/src/tests/services/edge-firewall-functions-services/list-functions-service.test.js
@@ -59,12 +59,12 @@ describe('EdgeFirewallFunctionsServices', () => {
       {
         label: 'function instance name',
         value: fixtures.functionsInstance.id,
-        args: fixtures.functionsInstance.args,
+        args: fixtures.functionsInstance.args
       },
       {
-        label:  'function instance version',
+        label: 'function instance version',
         value: fixtures.functionInstanceWithVersion.id,
-        args: fixtures.functionInstanceWithVersion.args,
+        args: fixtures.functionInstanceWithVersion.args
       }
     ])
   })
diff --git a/src/views/EdgeFirewall/TabsView.vue b/src/views/EdgeFirewall/TabsView.vue
index bede866f0..abe52ae2f 100644
--- a/src/views/EdgeFirewall/TabsView.vue
+++ b/src/views/EdgeFirewall/TabsView.vue
@@ -128,7 +128,8 @@
         </TabPanel>
         <TabPanel
           header="Functions"
-          v-if="isEnableFunction">
+          v-if="isEnableFunction"
+        >
           <EdgeFirewallFunctionsListView
             v-bind="props.edgeFirewallServices"
             :edgeFirewallID="edgeFirewallId"
diff --git a/src/views/EdgeFirewallFunctions/ListView.vue b/src/views/EdgeFirewallFunctions/ListView.vue
index c5ca583d4..b73fdeca0 100644
--- a/src/views/EdgeFirewallFunctions/ListView.vue
+++ b/src/views/EdgeFirewallFunctions/ListView.vue
@@ -107,7 +107,7 @@
       },
       {
         field: 'functionInstanced',
-        header: 'Function Instanced',
+        header: 'Function Instanced'
       },
       {
         field: 'version',

From cb8fb56c490f5081e7901728411a6d4b14cb1120 Mon Sep 17 00:00:00 2001
From: peterpaulo-azion <peterson.silva@azion.com>
Date: Fri, 19 Jan 2024 13:10:58 -0300
Subject: [PATCH 18/28] fix: adjust array value in noheader file

---
 src/templates/list-table-block/no-header.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/templates/list-table-block/no-header.vue b/src/templates/list-table-block/no-header.vue
index 2f5835adf..d2f65c607 100644
--- a/src/templates/list-table-block/no-header.vue
+++ b/src/templates/list-table-block/no-header.vue
@@ -335,7 +335,7 @@
 
   const onRowReorder = async (event) => {
     try {
-      const tableData = getArrayChangedIndexes(data, event.value)
+      const tableData = getArrayChangedIndexes(data.value, event.value)
       await props.onReorderService(tableData)
       data.value = event.value
 

From 7c983ac085e3c91a874ac6f3fa56ba629e0964c6 Mon Sep 17 00:00:00 2001
From: Matheus Sunderhus <matheus.sunderhus@azion.com>
Date: Fri, 19 Jan 2024 14:40:12 -0300
Subject: [PATCH 19/28] test: ensure to parte api errors on
 create-rules-engine-service

---
 .../create-rules-engine-service.test.js         | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/src/tests/services/edge-application-rules-engine-services/create-rules-engine-service.test.js b/src/tests/services/edge-application-rules-engine-services/create-rules-engine-service.test.js
index 690ab7c1c..411705233 100644
--- a/src/tests/services/edge-application-rules-engine-services/create-rules-engine-service.test.js
+++ b/src/tests/services/edge-application-rules-engine-services/create-rules-engine-service.test.js
@@ -58,6 +58,23 @@ describe('EdgeApplicationRulesEnginesServices', () => {
     expect(result).rejects.toBe('this is an validation error message from API')
   })
 
+  it('should return the first error message when multiple error messages are returned', async () => {
+    vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+      statusCode: 400,
+      body: {
+        error: {
+          incompatible_behaviors: 'Incompatible behavior message',
+          other_error: 'Other error'
+        }
+      }
+    })
+    const { sut } = makeSut()
+
+    const result = sut(fixtures.ruleEngineMock)
+
+    expect(result).rejects.toBe('Incompatible behavior message')
+  })
+
   it.each([
     {
       statusCode: 401,

From df9318970daf333d9713709f6befea8fbee8529a Mon Sep 17 00:00:00 2001
From: Matheus Sunderhus <matheus.sunderhus@azion.com>
Date: Fri, 19 Jan 2024 14:53:24 -0300
Subject: [PATCH 20/28] test: ensure create-rules-engine-service parse
 incompatible behavior api error with multiple errors

---
 .../create-rules-engine-service.test.js       | 25 +++++++++++++++----
 1 file changed, 20 insertions(+), 5 deletions(-)

diff --git a/src/tests/services/edge-application-rules-engine-services/create-rules-engine-service.test.js b/src/tests/services/edge-application-rules-engine-services/create-rules-engine-service.test.js
index 411705233..bad0b5d20 100644
--- a/src/tests/services/edge-application-rules-engine-services/create-rules-engine-service.test.js
+++ b/src/tests/services/edge-application-rules-engine-services/create-rules-engine-service.test.js
@@ -62,17 +62,32 @@ describe('EdgeApplicationRulesEnginesServices', () => {
     vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
       statusCode: 400,
       body: {
-        error: {
-          incompatible_behaviors: 'Incompatible behavior message',
-          other_error: 'Other error'
-        }
+        incompatible_behaviors: [
+          "(u'set_cache_policy', ['deny', 'redirect_to_301', 'redirect_to_302'])"
+        ]
       }
     })
     const { sut } = makeSut()
 
     const result = sut(fixtures.ruleEngineMock)
 
-    expect(result).rejects.toBe('Incompatible behavior message')
+    expect(result).rejects.toBe(`The behavior 'set cache policy' is incompatible with the others.`)
+  })
+
+  it('should return the first error message when multiple error messages are returned', async () => {
+    vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+      statusCode: 400,
+      body: {
+        error: ["(u'set_cache_policy', ['deny', 'redirect_to_301', 'redirect_to_302'])"]
+      }
+    })
+    const { sut } = makeSut()
+
+    const result = sut(fixtures.ruleEngineMock)
+
+    expect(result).rejects.toBe(
+      `error: (u'set_cache_policy', ['deny', 'redirect_to_301', 'redirect_to_302'])`
+    )
   })
 
   it.each([

From 4881d36be02f7c32d8c2a009f8e9e6ea5867423a Mon Sep 17 00:00:00 2001
From: Lucas Mendes <92529166+lucasmendes21@users.noreply.github.com>
Date: Fri, 19 Jan 2024 16:15:36 -0300
Subject: [PATCH 21/28] fix: adjust required in ui validation (#589)

---
 ...list-edge-application-functions-service.js |  5 +--
 ...edge-application-functions-service.test.js | 16 +--------
 .../Drawer/index.vue                          |  9 +++--
 .../FormFieldsEdgeApplicationsFunctions.vue   |  1 +
 .../EdgeApplicationsFunctions/ListView.vue    | 34 +++----------------
 .../FormFieldsEdgeApplicationsFunctions.vue   |  1 +
 6 files changed, 15 insertions(+), 51 deletions(-)

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 fcbc6327f..3fba18d56 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
@@ -35,12 +35,9 @@ const mapFunctionData = (edgeApplicationFunction, functionData) => {
   return {
     id: edgeApplicationFunction.id,
     name: edgeApplicationFunction.name,
-    languageIcon: functionData.languageIcon,
-    referenceCount: functionData.referenceCount,
-    initiatorType: functionData.initiatorType,
+    functionInstanced: functionData.name,
     lastEditor: functionData.lastEditor,
     modified: functionData.modified,
-    statusTag: functionData.statusTag,
     version: functionData.version
   }
 }
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 568304da9..daa0d6a5b 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
@@ -4,17 +4,6 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { localeMock } from '@/tests/utils/localeMock'
 
 const fixtures = {
-  edgeApplicationFunction: {
-    id: 1,
-    name: 'function instance',
-    languageIcon: {},
-    referenceCount: 1,
-    initiatorType: 'edge_functions',
-    lastEditor: 'teste@azion.com',
-    modified: 'data',
-    statusTag: 'teste',
-    version: 2
-  },
   functionsInstance: {
     id: 1,
     name: 'function instance',
@@ -73,12 +62,9 @@ describe('EdgeApplicationFunctionsServices', () => {
       {
         id: '1',
         name: { text: 'function instance', tagProps: {} },
-        languageIcon: { content: 'JavaScript', icon: 'javascript' },
-        referenceCount: '2',
-        initiatorType: 'Initiator',
+        functionInstanced: 'AZ firewall',
         lastEditor: 'az editor',
         modified: 'Friday, November 10, 2023',
-        statusTag: { content: 'Active', severity: 'success' },
         version: '1.0.0'
       }
     ])
diff --git a/src/views/EdgeApplicationsFunctions/Drawer/index.vue b/src/views/EdgeApplicationsFunctions/Drawer/index.vue
index 4b2ed1e1a..911114da5 100644
--- a/src/views/EdgeApplicationsFunctions/Drawer/index.vue
+++ b/src/views/EdgeApplicationsFunctions/Drawer/index.vue
@@ -7,7 +7,7 @@
     :initialValues="initialValues"
     @onSuccess="handleCreateFunction"
     :showBarGoBack="true"
-    title="Create Function"
+    title="Instance New"
   >
     <template #formFields>
       <FormFieldsDrawerFunction :edgeFunctionsList="edgeFunctionsList" />
@@ -23,7 +23,7 @@
     @onSuccess="emit('onSuccess')"
     :showBarGoBack="true"
     @onError="closeDrawerEdit"
-    title="Edit Function"
+    title="Edit Instance"
   >
     <template #formFields>
       <FormFieldsDrawerFunction :edgeFunctionsList="edgeFunctionsList" />
@@ -110,6 +110,10 @@
     showCreateFunctionDrawer.value = true
   }
 
+  const closeDrawerCreate = () => {
+    showCreateFunctionDrawer.value = false
+  }
+
   const openDrawerEdit = (functionID) => {
     if (functionID) {
       showEditFunctionDrawer.value = true
@@ -122,6 +126,7 @@
   }
 
   const handleCreateFunction = () => {
+    closeDrawerCreate()
     emit('onSuccess')
   }
 
diff --git a/src/views/EdgeApplicationsFunctions/FormFields/FormFieldsEdgeApplicationsFunctions.vue b/src/views/EdgeApplicationsFunctions/FormFields/FormFieldsEdgeApplicationsFunctions.vue
index b927a8376..11fe4bead 100644
--- a/src/views/EdgeApplicationsFunctions/FormFields/FormFieldsEdgeApplicationsFunctions.vue
+++ b/src/views/EdgeApplicationsFunctions/FormFields/FormFieldsEdgeApplicationsFunctions.vue
@@ -68,6 +68,7 @@
           optionLabel="label"
           option-value="value"
           :optionDisabled="(option) => option.disabled"
+          filter
         />
       </div>
 
diff --git a/src/views/EdgeApplicationsFunctions/ListView.vue b/src/views/EdgeApplicationsFunctions/ListView.vue
index 691bf75fa..da89c3d16 100644
--- a/src/views/EdgeApplicationsFunctions/ListView.vue
+++ b/src/views/EdgeApplicationsFunctions/ListView.vue
@@ -114,27 +114,12 @@
         }
       },
       {
-        field: 'version',
-        header: 'Version'
-      },
-      {
-        field: 'referenceCount',
-        header: 'Ref Count'
-      },
-      {
-        field: 'languageIcon',
-        header: 'Language',
-        type: 'component',
-        component: (columnData) => {
-          return columnBuilder({
-            data: columnData,
-            columnAppearance: 'language-icon-with-text'
-          })
-        }
+        field: 'functionInstanced',
+        header: 'Function Instanced'
       },
       {
-        field: 'initiatorType',
-        header: 'Initiator Type'
+        field: 'version',
+        header: 'Version'
       },
       {
         field: 'lastEditor',
@@ -144,17 +129,6 @@
         field: 'modified',
         sortField: 'lastModifiedDate',
         header: 'Last Modified'
-      },
-      {
-        field: 'statusTag',
-        header: 'Status',
-        type: 'component',
-        component: (columnData) => {
-          return columnBuilder({
-            data: columnData,
-            columnAppearance: 'tag'
-          })
-        }
       }
     ]
   })
diff --git a/src/views/EdgeFirewallFunctions/FormFields/FormFieldsEdgeApplicationsFunctions.vue b/src/views/EdgeFirewallFunctions/FormFields/FormFieldsEdgeApplicationsFunctions.vue
index b927a8376..11fe4bead 100644
--- a/src/views/EdgeFirewallFunctions/FormFields/FormFieldsEdgeApplicationsFunctions.vue
+++ b/src/views/EdgeFirewallFunctions/FormFields/FormFieldsEdgeApplicationsFunctions.vue
@@ -68,6 +68,7 @@
           optionLabel="label"
           option-value="value"
           :optionDisabled="(option) => option.disabled"
+          filter
         />
       </div>
 

From d7b7a5e29b8e699a79302b893bd7d0db1c7cbc96 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Sat, 20 Jan 2024 02:23:57 +0000
Subject: [PATCH 22/28] chore(deps-dev): bump vite from 4.4.12 to 4.5.2

Bumps [vite](https://github.com/vitejs/vite/tree/HEAD/packages/vite) from 4.4.12 to 4.5.2.
- [Release notes](https://github.com/vitejs/vite/releases)
- [Changelog](https://github.com/vitejs/vite/blob/v4.5.2/packages/vite/CHANGELOG.md)
- [Commits](https://github.com/vitejs/vite/commits/v4.5.2/packages/vite)

---
updated-dependencies:
- dependency-name: vite
  dependency-type: direct:development
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 package.json | 2 +-
 yarn.lock    | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index fe82ed4ee..35f505c51 100644
--- a/package.json
+++ b/package.json
@@ -63,7 +63,7 @@
     "sass": "^1.68.0",
     "start-server-and-test": "^2.0.0",
     "tailwindcss": "^3.3.3",
-    "vite": "^4.4.12",
+    "vite": "^4.5.2",
     "vitest": "^0.33.0",
     "vitest-sonar-reporter": "^1.0.0"
   }
diff --git a/yarn.lock b/yarn.lock
index 8bb7358a5..074ed28df 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4857,10 +4857,10 @@ vite-node@0.33.0:
     picocolors "^1.0.0"
     vite "^3.0.0 || ^4.0.0"
 
-"vite@^3.0.0 || ^4.0.0", vite@^4.4.12:
-  version "4.4.12"
-  resolved "https://registry.yarnpkg.com/vite/-/vite-4.4.12.tgz#e9c355d5a0d8a47afa46cb4bad10820da333da5c"
-  integrity sha512-KtPlUbWfxzGVul8Nut8Gw2Qe8sBzWY+8QVc5SL8iRFnpnrcoCaNlzO40c1R6hPmcdTwIPEDkq0Y9+27a5tVbdQ==
+"vite@^3.0.0 || ^4.0.0", vite@^4.5.2:
+  version "4.5.2"
+  resolved "https://registry.yarnpkg.com/vite/-/vite-4.5.2.tgz#d6ea8610e099851dad8c7371599969e0f8b97e82"
+  integrity sha512-tBCZBNSBbHQkaGyhGCDUGqeo2ph8Fstyp6FMSvTtsXeZSPpSMGlviAOav2hxVTqFcx8Hj/twtWKsMJXNY0xI8w==
   dependencies:
     esbuild "^0.18.10"
     postcss "^8.4.27"

From 409e3628c971244563c1d23e90a4f6c3d68d07f3 Mon Sep 17 00:00:00 2001
From: Aloisio Bastian <aloisiomiguelb@gmail.com>
Date: Mon, 22 Jan 2024 14:08:32 -0300
Subject: [PATCH 23/28] feat: add federated login

---
 .../auth-services/get-login-method-service.js | 11 ++++++++++
 .../make-auth-method-base-url.js              |  4 ++++
 src/templates/sign-in-block/index.vue         | 22 +++++++++++++++----
 .../get-login-method-serviceo.test.js         |  0
 vite.config.js                                |  2 +-
 5 files changed, 34 insertions(+), 5 deletions(-)
 create mode 100644 src/services/auth-services/get-login-method-service.js
 create mode 100644 src/services/auth-services/make-auth-method-base-url.js
 create mode 100644 src/tests/services/auth-services/get-login-method-serviceo.test.js

diff --git a/src/services/auth-services/get-login-method-service.js b/src/services/auth-services/get-login-method-service.js
new file mode 100644
index 000000000..044a504e2
--- /dev/null
+++ b/src/services/auth-services/get-login-method-service.js
@@ -0,0 +1,11 @@
+import { AxiosHttpClientAdapter, parseHttpResponse } from '../axios/AxiosHttpClientAdapter'
+import { makeAuthMethodBaseUrl } from './make-auth-method-base-url'
+
+export const verifyLoginMethodService = async (email) => {
+  const emailEncoded = encodeURIComponent(email)
+  let httpResponse = await AxiosHttpClientAdapter.request({
+    url: `${makeAuthMethodBaseUrl()}/login_method?email=${emailEncoded}`,
+    method: 'GET'
+  })
+  return parseHttpResponse(httpResponse)
+}
diff --git a/src/services/auth-services/make-auth-method-base-url.js b/src/services/auth-services/make-auth-method-base-url.js
new file mode 100644
index 000000000..711a8d4b2
--- /dev/null
+++ b/src/services/auth-services/make-auth-method-base-url.js
@@ -0,0 +1,4 @@
+export const makeAuthMethodBaseUrl = () => {
+    return 'auth'
+  }
+  
\ No newline at end of file
diff --git a/src/templates/sign-in-block/index.vue b/src/templates/sign-in-block/index.vue
index 98dd492ed..101d6c6f3 100644
--- a/src/templates/sign-in-block/index.vue
+++ b/src/templates/sign-in-block/index.vue
@@ -32,7 +32,7 @@
               placeholder="example@email.com"
               type="email"
               autofocus
-              @keydown.enter="showPasswordStep"
+              @keydown.enter="checkLoginMethod"
               class="w-full"
               :class="{ 'p-invalid': errors.email }"
             />
@@ -51,7 +51,7 @@
             label="Next"
             :loading="isProccedButtonLoading"
             :disabled="!email"
-            @click="showPasswordStep"
+            @click="checkLoginMethod"
           />
         </div>
         <SocialIdpsBlock
@@ -146,7 +146,8 @@
 </template>
 
 <script setup>
-  import { ProccessRequestError, UserNotFoundError } from '@/services/axios/errors'
+  import { ProccessRequestError, UnexpectedError, UserNotFoundError } from '@/services/axios/errors'
+  import { verifyLoginMethodService } from '@/services/auth-services/get-login-method-service'
   import PrimeButton from 'primevue/button'
   import InputText from 'primevue/inputtext'
   import Password from 'primevue/password'
@@ -257,9 +258,22 @@
     }
   }
 
-  const showPasswordStep = () => {
+  const checkLoginMethod = async() => {
     if (errors.value.email || !email.value) return
+    try {
+      const res = await verifyLoginMethodService(email.value)
+      if (res.loginMethod === 'federated') {
+        const encodedEmail = encodeURIComponent(email);
+        window.location.replace(`${res.loginUrl}?email=${encodedEmail}`);
+      } else {
+        showPasswordStep()
+      }
+    } catch {
+      hasRequestErrorMessage.value = new UnexpectedError().message
+    }
+  }
 
+  const showPasswordStep = () => {
     isProccedButtonLoading.value = true
     setTimeout(() => {
       isProccedButtonLoading.value = false
diff --git a/src/tests/services/auth-services/get-login-method-serviceo.test.js b/src/tests/services/auth-services/get-login-method-serviceo.test.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/vite.config.js b/vite.config.js
index 13c85315e..633b724ca 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -41,7 +41,7 @@ const getConfig = () => {
           changeOrigin: true,
           rewrite: (path) => path.replace(/^\/metrics\/graphql/, '')
         },
-        '^/api/(account|user|token|switch-account|password|totp)|^/logout': {
+        '^/api/(account|user|token|switch-account|auth|password|totp)|^/logout': {
           target: `${URLStartPrefix}sso.azion.com`,
           changeOrigin: true,
           cookieDomainRewrite: { '*': '' }

From 80480a877247119dda7d371fffc4d426d0eeaf14 Mon Sep 17 00:00:00 2001
From: Aloisio Bastian <aloisiomiguelb@gmail.com>
Date: Mon, 22 Jan 2024 14:14:51 -0300
Subject: [PATCH 24/28] fix: change acess to email

---
 src/templates/sign-in-block/index.vue         |  2 +-
 .../get-login-method-service.test.js          | 48 +++++++++++++++++++
 .../get-login-method-serviceo.test.js         |  0
 3 files changed, 49 insertions(+), 1 deletion(-)
 create mode 100644 src/tests/services/auth-services/get-login-method-service.test.js
 delete mode 100644 src/tests/services/auth-services/get-login-method-serviceo.test.js

diff --git a/src/templates/sign-in-block/index.vue b/src/templates/sign-in-block/index.vue
index 101d6c6f3..c17579a6a 100644
--- a/src/templates/sign-in-block/index.vue
+++ b/src/templates/sign-in-block/index.vue
@@ -263,7 +263,7 @@
     try {
       const res = await verifyLoginMethodService(email.value)
       if (res.loginMethod === 'federated') {
-        const encodedEmail = encodeURIComponent(email);
+        const encodedEmail = encodeURIComponent(email.value);
         window.location.replace(`${res.loginUrl}?email=${encodedEmail}`);
       } else {
         showPasswordStep()
diff --git a/src/tests/services/auth-services/get-login-method-service.test.js b/src/tests/services/auth-services/get-login-method-service.test.js
new file mode 100644
index 000000000..e5efbe72b
--- /dev/null
+++ b/src/tests/services/auth-services/get-login-method-service.test.js
@@ -0,0 +1,48 @@
+import { verifyLoginMethodService } from '@/services/auth-services/get-login-method-service'
+import { AxiosHttpClientAdapter } from '@/services/axios/AxiosHttpClientAdapter'
+import { describe, expect, it, vi } from 'vitest'
+
+const makeSut = () => {
+  const sut = verifyLoginMethodService
+  return {
+    sut
+  }
+}
+
+describe('AuthServices', () => {
+  const loginPayloadMock = {
+    email: 'azion-test@test.com',
+    encodedEmail: '',
+  }
+
+  it('should call login method service with correct params', async () => {
+    const requestSpy = vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+      statusCode: 200
+    })
+
+    const { sut } = makeSut()
+
+    await sut(loginPayloadMock)
+
+    expect(requestSpy).toHaveBeenCalledWith({
+      body: loginPayloadMock,
+      method: 'GET',
+      url: 'token'
+    })
+  })
+  it('should return authentication token on success login', async () => {
+    vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValue({
+      body: {
+        token: 'R4nd0mT0k4n123#$'
+      },
+      statusCode: 200
+    })
+    const { sut } = makeSut()
+
+    const response = await sut(loginPayloadMock)
+
+    expect(response).toEqual({
+      token: 'R4nd0mT0k4n123#$'
+    })
+  })
+})
diff --git a/src/tests/services/auth-services/get-login-method-serviceo.test.js b/src/tests/services/auth-services/get-login-method-serviceo.test.js
deleted file mode 100644
index e69de29bb..000000000

From 325cf7df203906f38c9b4de2f47241fdddb076f2 Mon Sep 17 00:00:00 2001
From: Aloisio Bastian <aloisiomiguelb@gmail.com>
Date: Mon, 22 Jan 2024 14:22:53 -0300
Subject: [PATCH 25/28] feat: add unit tests

---
 .../get-login-method-service.test.js          | 29 +++++--------------
 1 file changed, 7 insertions(+), 22 deletions(-)

diff --git a/src/tests/services/auth-services/get-login-method-service.test.js b/src/tests/services/auth-services/get-login-method-service.test.js
index e5efbe72b..072dea74b 100644
--- a/src/tests/services/auth-services/get-login-method-service.test.js
+++ b/src/tests/services/auth-services/get-login-method-service.test.js
@@ -9,11 +9,12 @@ const makeSut = () => {
   }
 }
 
+const fixtures = {
+  email: 'azion-test@test.com',
+  encodedEmail: 'azion-test%40test.com'
+}
+
 describe('AuthServices', () => {
-  const loginPayloadMock = {
-    email: 'azion-test@test.com',
-    encodedEmail: '',
-  }
 
   it('should call login method service with correct params', async () => {
     const requestSpy = vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
@@ -22,27 +23,11 @@ describe('AuthServices', () => {
 
     const { sut } = makeSut()
 
-    await sut(loginPayloadMock)
+    await sut(fixtures.email)
 
     expect(requestSpy).toHaveBeenCalledWith({
-      body: loginPayloadMock,
       method: 'GET',
-      url: 'token'
-    })
-  })
-  it('should return authentication token on success login', async () => {
-    vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValue({
-      body: {
-        token: 'R4nd0mT0k4n123#$'
-      },
-      statusCode: 200
-    })
-    const { sut } = makeSut()
-
-    const response = await sut(loginPayloadMock)
-
-    expect(response).toEqual({
-      token: 'R4nd0mT0k4n123#$'
+      url:  `auth/login_method?email=${fixtures.encodedEmail}`
     })
   })
 })

From 0dafda76aa5730aa367274d02ff8713ba7a2a9b1 Mon Sep 17 00:00:00 2001
From: Aloisio Bastian <aloisiomiguelb@gmail.com>
Date: Mon, 22 Jan 2024 15:13:40 -0300
Subject: [PATCH 26/28] fix: change url redirection when is federated login

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

diff --git a/src/templates/sign-in-block/index.vue b/src/templates/sign-in-block/index.vue
index c17579a6a..7d97fb70e 100644
--- a/src/templates/sign-in-block/index.vue
+++ b/src/templates/sign-in-block/index.vue
@@ -264,7 +264,7 @@
       const res = await verifyLoginMethodService(email.value)
       if (res.loginMethod === 'federated') {
         const encodedEmail = encodeURIComponent(email.value);
-        window.location.replace(`${res.loginUrl}?email=${encodedEmail}`);
+        window.location.replace(`${res.loginUrl}?email=${encodedEmail}?console=true`);
       } else {
         showPasswordStep()
       }

From fa40cd93677d860eebfa7a95e3da75da8d380406 Mon Sep 17 00:00:00 2001
From: Aloisio Bastian <aloisiomiguelb@gmail.com>
Date: Mon, 22 Jan 2024 15:27:39 -0300
Subject: [PATCH 27/28] fix: change variable in query param

---
 src/services/auth-services/make-auth-method-base-url.js     | 5 ++---
 src/templates/sign-in-block/index.vue                       | 6 +++---
 .../services/auth-services/get-login-method-service.test.js | 3 +--
 3 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/src/services/auth-services/make-auth-method-base-url.js b/src/services/auth-services/make-auth-method-base-url.js
index 711a8d4b2..f74990b5c 100644
--- a/src/services/auth-services/make-auth-method-base-url.js
+++ b/src/services/auth-services/make-auth-method-base-url.js
@@ -1,4 +1,3 @@
 export const makeAuthMethodBaseUrl = () => {
-    return 'auth'
-  }
-  
\ No newline at end of file
+  return 'auth'
+}
diff --git a/src/templates/sign-in-block/index.vue b/src/templates/sign-in-block/index.vue
index 7d97fb70e..cdb11418d 100644
--- a/src/templates/sign-in-block/index.vue
+++ b/src/templates/sign-in-block/index.vue
@@ -258,13 +258,13 @@
     }
   }
 
-  const checkLoginMethod = async() => {
+  const checkLoginMethod = async () => {
     if (errors.value.email || !email.value) return
     try {
       const res = await verifyLoginMethodService(email.value)
       if (res.loginMethod === 'federated') {
-        const encodedEmail = encodeURIComponent(email.value);
-        window.location.replace(`${res.loginUrl}?email=${encodedEmail}?console=true`);
+        const encodedEmail = encodeURIComponent(email.value)
+        window.location.replace(`${res.loginUrl}?email=${encodedEmail}&console=true`)
       } else {
         showPasswordStep()
       }
diff --git a/src/tests/services/auth-services/get-login-method-service.test.js b/src/tests/services/auth-services/get-login-method-service.test.js
index 072dea74b..b21ce8bf4 100644
--- a/src/tests/services/auth-services/get-login-method-service.test.js
+++ b/src/tests/services/auth-services/get-login-method-service.test.js
@@ -15,7 +15,6 @@ const fixtures = {
 }
 
 describe('AuthServices', () => {
-
   it('should call login method service with correct params', async () => {
     const requestSpy = vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
       statusCode: 200
@@ -27,7 +26,7 @@ describe('AuthServices', () => {
 
     expect(requestSpy).toHaveBeenCalledWith({
       method: 'GET',
-      url:  `auth/login_method?email=${fixtures.encodedEmail}`
+      url: `auth/login_method?email=${fixtures.encodedEmail}`
     })
   })
 })

From 6ba3e333fa8acb3e63f6f6d8d945e5ae9ac12b71 Mon Sep 17 00:00:00 2001
From: "Cicero, Feijo" <cicero.feijo@gmail.com>
Date: Mon, 22 Jan 2024 16:11:10 -0300
Subject: [PATCH 28/28] chore: update package version

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

diff --git a/package.json b/package.json
index 35f505c51..373c4144a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "azion-platform-kit",
-  "version": "1.7.0",
+  "version": "1.7.1",
   "private": true,
   "type": "module",
   "repository": {