[UXE-5813] fix: show name of instance function instead of function on…

… Edge App Rules Engine (#1975)

cypress/e2e/edge-application/rules-engine/create-rule-engine-set-function.cy.js

@@ -40,8 +40,7 @@ const createFunctionCase = () => {
   cy.wait('@getEdgeFunctions')
 }
 
-// TODO: remove xfail tag when the API v4 is fixed
-describe('Edge Application', { tags: ['@dev3', '@xfail'] }, () => {
+describe('Edge Application', { tags: ['@dev3'] }, () => {
   beforeEach(() => {
     fixtures.edgeApplicationName = generateUniqueName('EdgeApp')
     // Login
@@ -91,7 +90,7 @@ describe('Edge Application', { tags: ['@dev3', '@xfail'] }, () => {
       .click()
     cy.intercept(
       'GET',
-      'api/v3/edge_applications/*/functions_instances?order_by=id&sort=asc&page=1&page_size=200'
+      'api/v4/edge_application/applications/*/functions?ordering=name&page=1&page_size=100&fields=id%2Cname&search='
     ).as('getFunctionInstance')
     cy.wait('@postFunction')
     cy.wait('@getFunctionInstance')

cypress/e2e/edge-firewall/create-edge-firewall-waf.cy.js

@@ -17,8 +17,8 @@ const createWAFCase = () => {
   cy.get(selectors.form.actionsSubmitButton).click()
   cy.verifyToast('success', 'Your waf rule has been created')
 }
-
-describe('Edge Firewall spec', { tags: ['@dev5'] }, () => {
+// added @xfail due to a problem with edge firewall
+describe('Edge Firewall spec', { tags: ['@dev5', '@xfail'] }, () => {
   beforeEach(() => {
     cy.login()
     firewallName = generateUniqueName('EdgeFirewall')

src/router/routes/edge-application-routes/index.js

@@ -117,7 +117,7 @@ export const edgeApplicationRoutes = {
           documentationService: Helpers.documentationCatalog.edgeApplicationRulesEngine,
           listOriginsService: OriginsService.listOriginsService,
           listCacheSettingsService: CacheSettingsServices.listCacheSettingsService,
-          listEdgeApplicationFunctionsService: FunctionsService.listEdgeApplicationFunctionsService
+          listEdgeApplicationFunctionsService: FunctionsServiceV4.listFunctionsServiceOptions
         },
         clipboardWrite: Helpers.clipboardWrite
       },

src/services/edge-application-functions-services/v4/index.js

@@ -1,4 +1,5 @@
 import { listFunctionsService } from './list-edge-functions-service'
+import { listFunctionsServiceOptions } from './list-edge-functions-options-service'
 import { loadFunctionService } from './load-function-instance-service'
 import { editFunctionService } from './edit-function-instance-service'
 import { createFunctionService } from './create-function-service'
@@ -7,6 +8,7 @@ import { deleteFunctionService } from './delete-function-service'
 /**
  * @typedef {Object} ExportedServicesType - The type of the exported services
  * @property {typeof listFunctionsService} listFunctionsService - The listFunctionsService reference
+ * @property {typeof listFunctionsServiceOptions} listFunctionsServiceOptions - The listFunctionsServiceOptions reference
  */
 
 /**
@@ -18,5 +20,6 @@ export {
   loadFunctionService,
   editFunctionService,
   createFunctionService,
-  deleteFunctionService
+  deleteFunctionService,
+  listFunctionsServiceOptions
 }

src/services/edge-application-functions-services/v4/list-edge-functions-options-service.js

@@ -0,0 +1,41 @@
+import { AxiosHttpClientAdapter, parseHttpResponse } from '@/services/axios/AxiosHttpClientAdapter'
+import { makeEdgeFunctionsBaseUrl } from './make-edge-function-base-url'
+import { makeListServiceQueryParams } from '@/helpers/make-list-service-query-params'
+
+export const listFunctionsServiceOptions = async ({
+  id,
+  ordering = 'name',
+  page = 1,
+  pageSize = 100,
+  search = '',
+  fields = ''
+}) => {
+  const searchParams = makeListServiceQueryParams({ ordering, page, pageSize, search, fields })
+  let httpResponse = await AxiosHttpClientAdapter.request({
+    url: `${makeEdgeFunctionsBaseUrl()}/${id}/functions?${searchParams.toString()}`,
+    method: 'GET'
+  })
+
+  httpResponse = adapt(httpResponse)
+
+  return parseHttpResponse(httpResponse)
+}
+
+const adapt = (httpResponse) => {
+  const bodyResults = httpResponse.body.results
+
+  const parsedFunctions = bodyResults?.map((edgeApplicationFunction) => {
+    return {
+      id: edgeApplicationFunction.id.toString(),
+      name: edgeApplicationFunction.name
+    }
+  })
+
+  const count = httpResponse.body.count
+
+  return {
+    count,
+    body: parsedFunctions,
+    statusCode: httpResponse.statusCode
+  }
+}

src/tests/services/edge-application-functions-services/v4/list-edge-functions-options-service.test.js

@@ -0,0 +1,81 @@
+import { AxiosHttpClientAdapter } from '@/services/axios/AxiosHttpClientAdapter'
+import { listFunctionsServiceOptions } from '@/services/edge-application-functions-services/v4'
+import { describe, expect, it, vi } from 'vitest'
+
+const API_VERSION = 'v4'
+const EDGE_APPLICATION_ID = 123
+
+const query = {
+  page: 1,
+  pageSize: 30,
+  search: 'test01'
+}
+
+const fixtures = {
+  functionsInstance: {
+    name: 'function instance name',
+    json_args: {},
+    edge_function: 321,
+    id: 123,
+    initiator_type: 'teste'
+  }
+}
+
+const makeSut = () => {
+  const sut = listFunctionsServiceOptions
+  return { sut }
+}
+
+describe('EdgeApplicationFunctionsServices', () => {
+  vi.restoreAllMocks()
+
+  it('should call API with correct params', async () => {
+    const requestSpy = vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+      statusCode: 200,
+      body: { results: [] },
+      count: 0
+    })
+    const { sut } = makeSut()
+
+    await sut({ id: EDGE_APPLICATION_ID })
+
+    expect(requestSpy).toHaveBeenCalledWith({
+      url: `${API_VERSION}/edge_application/applications/123/functions?ordering=name&page=1&page_size=100&fields=&search=`,
+      method: 'GET'
+    })
+  })
+
+  it('should call API with correct search params', async () => {
+    const requestSpy = vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+      statusCode: 200,
+      body: { results: [] },
+      count: 0
+    })
+    const { sut } = makeSut()
+
+    await sut({ id: EDGE_APPLICATION_ID, ...query })
+
+    expect(requestSpy).toHaveBeenCalledWith({
+      url: `${API_VERSION}/edge_application/applications/123/functions?ordering=name&page=1&page_size=30&fields=&search=test01`,
+      method: 'GET'
+    })
+  })
+
+  it('should correctly parse all returned edge firewall function instances', async () => {
+    vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+      statusCode: 200,
+      body: { results: [fixtures.functionsInstance] },
+      count: 1
+    })
+    const { sut } = makeSut()
+
+    const result = await sut({ id: EDGE_APPLICATION_ID })
+
+    expect(result).toEqual([
+      {
+        id: fixtures.functionsInstance.id.toString(),
+        name: fixtures.functionsInstance.name
+      }
+    ])
+  })
+})

src/views/EdgeApplicationsRulesEngine/Drawer/index.vue

@@ -170,9 +170,10 @@
 
     try {
       loadingFunctionsInstance.value = true
-      const responseFunctions = await props.listEdgeApplicationFunctionsService(
-        props.edgeApplicationId
-      )
+      const responseFunctions = await props.listEdgeApplicationFunctionsService({
+        id: props.edgeApplicationId,
+        fields: ['id', 'name']
+      })
       functionsInstanceOptions.value = responseFunctions.body
     } catch (error) {
       toast.add({
@@ -396,6 +397,7 @@
         :loadingOrigins="loadingOrigins"
         :loadingFunctionsInstance="loadingFunctionsInstance"
         @toggleDrawer="handleToggleDrawer"
+        @refreshFunctions="handleRefreshFunctions"
         :clipboardWrite="clipboardWrite"
         :isLoadBalancerEnabled="isLoadBalancerEnabled"
         :isApplicationAcceleratorEnabled="props.isApplicationAcceleratorEnabled"

src/views/EdgeApplicationsRulesEngine/FormFields/FormFieldsEdgeApplicationsRulesEngine.vue

@@ -784,7 +784,7 @@
                 :loading="loadingFunctionsInstance"
                 :name="`behaviors[${behaviorIndex}].functionId`"
                 :options="functionsInstanceOptions"
-                optionLabel="functionInstanced"
+                optionLabel="name"
                 optionValue="id"
                 :key="behaviorItem.key"
                 :value="behaviors[behaviorIndex].value.functionId"