[UXE-5889] feat: migrate network lists/domains filters in WAF Tunning…

… for API v4 (#2088)

* feat: migrate network lists dropdown in waf rules tuning

* feat: added multiselect lazy loader component

* test: load domain v4 test case

* refactor: clean up code formatting in multiselect lazy loader and field dropdown components

* refactor: added throw error in load domain v4 service

* refactor: added throw error in load network list v4 service

* fix: correct domain name extraction in list domain service

* refactor: reposition domain field in WAF Rules Tuning list view

* refactor: optimize multiselect lazy loader data fetching and pagination

* fix: remove duplicated attr from dropdown lazy loader

src/router/routes/waf-rules-routes/index.js

@@ -1,6 +1,7 @@
 import * as Helpers from '@/helpers'
 import * as WafRulesService from '@/services/waf-rules-services'
 import * as WafRulesServiceV4 from '@/services/waf-rules-services/v4'
+import * as DomainsServiceV4 from '@/services/domains-services/v4'
 
 import { listCountriesService } from '@/services/network-lists-services'
 
@@ -69,11 +70,14 @@ export const wafRulesRoutes = {
         wafTuning: {
           documentationServiceTuning: Helpers.documentationCatalog.wafTuning,
           listWafRulesTuningService: WafRulesService.listWafRulesTuningService,
-          listNetworkListService: WafRulesService.listNetworkListService,
+          listNetworkListService: WafRulesServiceV4.listNetworkListService,
           listCountriesService: listCountriesService,
           listWafRulesDomainsService: WafRulesService.listWafRulesDomainsService,
           createWafRulesAllowedTuningService: WafRulesService.createWafRulesAllowedTuningService,
-          listWafRulesTuningAttacksService: WafRulesService.listWafRulesTuningAttacksService
+          listWafRulesTuningAttacksService: WafRulesService.listWafRulesTuningAttacksService,
+          listDomainsService: DomainsServiceV4.listDomainsService,
+          loadDomainService: DomainsServiceV4.loadDomainService,
+          loadNetworkListService: WafRulesServiceV4.loadNetworkListService
         }
       },
       meta: {

src/services/domains-services/v4/index.js

@@ -1,4 +1,5 @@
 import { listDomainsService } from './list-domain-service'
+import { loadDomainService } from './load-domain-service'
 
 /**
  * @typedef {Object} ExportedServicesType - The type of the exported services
@@ -8,4 +9,4 @@ import { listDomainsService } from './list-domain-service'
 /**
  * @type {ExportedServicesType}
  */
-export { listDomainsService }
+export { listDomainsService, loadDomainService }

src/services/domains-services/v4/list-domain-service.js

@@ -36,7 +36,7 @@ const adapt = async (httpResponse) => {
           },
       activeSort: domain.active,
       domainName: {
-        content: domain.domains[0].domain
+        content: domain.domains ? domain.domains[0].domain : null
       },
       cnames: domain.alternate_domains
     }

src/services/domains-services/v4/load-domain-service.js

@@ -0,0 +1,42 @@
+import { AxiosHttpClientAdapter, parseHttpResponse } from '@/services/axios/AxiosHttpClientAdapter'
+import { makeDomainsBaseUrl } from './make-domains-service'
+import { extractApiError } from '@/helpers/extract-api-error'
+
+export const loadDomainService = async ({ id }) => {
+  let httpResponse = await AxiosHttpClientAdapter.request({
+    url: `${makeDomainsBaseUrl()}/${id}`,
+    method: 'GET'
+  })
+
+  httpResponse = adapt(httpResponse)
+
+  return parseHttpResponse(httpResponse)
+}
+
+const adapt = ({ body, statusCode }) => {
+  if (statusCode !== 200) {
+    throw new Error(extractApiError({ body })).message
+  }
+
+  const domain = body?.results
+
+  const parsedVariable = {
+    id: domain.id,
+    name: domain.name,
+    alternateDomains: domain.alternate_domains,
+    networkMap: domain.network_map,
+    lastEditor: domain.last_editor,
+    lastModified: domain.last_modified,
+    active: domain.active,
+    tls: domain.tls,
+    protocols: domain.protocols,
+    mtls: domain.mtls,
+    domains: domain.domains,
+    productVersion: domain.product_version
+  }
+
+  return {
+    body: parsedVariable,
+    statusCode
+  }
+}

src/services/waf-rules-services/v4/index.js

@@ -4,6 +4,8 @@ import { createWafRulesService } from './create-waf-rules-service'
 import { deleteWafRulesService } from './delete-waf-rules-service'
 import { loadWafRulesService } from './load-waf-rules-service'
 import { editWafRulesService } from './edit-waf-rules-service'
+import { listNetworkListService } from './list-network-list-service'
+import { loadNetworkListService } from './load-network-list-service'
 
 /**
  * @typedef {Object} ExportedServicesType - The type of the exported services
@@ -19,5 +21,7 @@ export {
   createWafRulesService,
   deleteWafRulesService,
   loadWafRulesService,
-  editWafRulesService
+  editWafRulesService,
+  listNetworkListService,
+  loadNetworkListService
 }

src/services/waf-rules-services/v4/list-network-list-service.js

@@ -0,0 +1,48 @@
+import { AxiosHttpClientAdapter, parseHttpResponse } from '@/services/axios/AxiosHttpClientAdapter'
+import { makeNetworkListBaseUrl } from '../../network-lists-services/v4/make-network-list-service'
+import { makeListServiceQueryParams } from '@/helpers/make-list-service-query-params'
+
+export const listNetworkListService = async ({
+  fields = '',
+  search = '',
+  ordering = '',
+  page = 1,
+  pageSize = 10
+}) => {
+  const searchParams = makeListServiceQueryParams({ fields, ordering, page, pageSize, search })
+  let httpResponse = await AxiosHttpClientAdapter.request({
+    url: `${makeNetworkListBaseUrl()}?${searchParams.toString()}`,
+    method: 'GET'
+  })
+
+  httpResponse = adapt(httpResponse)
+  return parseHttpResponse(httpResponse)
+}
+
+const adapt = (httpResponse) => {
+  const isArray = Array.isArray(httpResponse.body.results)
+
+  const networkList = isArray
+    ? httpResponse.body.results.map((element) => {
+        const disabledIP = element.type === 'ip_cidr'
+        const disabledCountries = element.type === 'countries'
+        return {
+          value: {
+            id: element.id,
+            disabledIP,
+            disabledCountries
+          },
+          id: element.id,
+          name: element.name
+        }
+      })
+    : []
+
+  const count = httpResponse.body?.count ?? 0
+
+  return {
+    count,
+    body: networkList,
+    statusCode: httpResponse.statusCode
+  }
+}

src/services/waf-rules-services/v4/load-network-list-service.js

@@ -0,0 +1,37 @@
+import { AxiosHttpClientAdapter, parseHttpResponse } from '@/services/axios/AxiosHttpClientAdapter'
+import { makeNetworkListBaseUrl } from '../../network-lists-services/v4/make-network-list-service'
+import { extractApiError } from '@/helpers/extract-api-error'
+
+export const loadNetworkListService = async ({ id }) => {
+  let httpResponse = await AxiosHttpClientAdapter.request({
+    url: `${makeNetworkListBaseUrl()}/${id}`,
+    method: 'GET'
+  })
+
+  httpResponse = adapt(httpResponse, id)
+  return parseHttpResponse(httpResponse)
+}
+
+const adapt = ({ body, statusCode }) => {
+  if (statusCode !== 200) {
+    throw new Error(extractApiError({ body })).message
+  }
+
+  const element = body?.results
+
+  const disabledIP = element.type === 'ip_cidr'
+  const disabledCountries = element.type === 'countries'
+  const networkList = {
+    value: {
+      id: element.id,
+      disabledIP,
+      disabledCountries
+    },
+    name: element.name
+  }
+
+  return {
+    body: networkList,
+    statusCode
+  }
+}

src/templates/advanced-filter/component/fields/multiselect-lazy-loader-filter.vue

@@ -89,13 +89,9 @@
   const totalCount = ref(0)
   const search = ref('')
 
-  const { value: selectedValue, errorMessage } = useField(
-    'selectedValue',
-    yup.array().min(1).required(),
-    {
-      initialValue: props.value
-    }
-  )
+  const { value: selectedValue, errorMessage } = useField('selectedValue', yup.array().min(1), {
+    initialValue: props.value
+  })
 
   onMounted(async () => {
     await loadDomains()

src/templates/advanced-filter/dialog-filter.vue

@@ -1,4 +1,3 @@
-'
 <script setup>
   import ButtonPrime from 'primevue/button'
   import Divider from 'primevue/divider'

src/templates/form-fields-inputs/fieldDropdownLazyLoader.vue

@@ -1,10 +1,10 @@
 <template>
   <LabelBlock
+    v-if="props.label"
     :for="props.name"
     :label="props.label"
     :isRequired="$attrs.required"
     :data-testid="customTestId.label"
-    v-if="props.label"
   />
   <Dropdown
     appendTo="self"
@@ -209,6 +209,10 @@
 
     emit('onChange', inputValue.value)
 
+    if (inputValue.value === null) {
+      emit('onClear')
+    }
+
     if (selectedOption) {
       emit('onSelectOption', selectedOption)
     }