feat: add tab on the edit domain and add workload deployment

src/router/routes/domains-routes/index.js

@@ -4,7 +4,7 @@ import * as DomainServicesV4 from '@/services/domains-services/v4'
 import * as EdgeApplicationServicesV4 from '@/services/edge-application-services/v4'
 import * as EdgeFirewallServicesV4 from '@/services/edge-firewall-services/v4'
 import * as DigitalCertificatesServicesV4 from '@/services/digital-certificates-services/v4'
-
+import * as WorkloadDeploymentServices from '@/services/workload-deployment-service'
 /** @type {import('vue-router').RouteRecordRaw} */
 export const domainsRoutes = {
   path: '/domains',
@@ -58,21 +58,28 @@ export const domainsRoutes = {
       }
     },
     {
-      path: 'edit/:id',
+      path: 'edit/:id/:tab',
       name: 'edit-domain',
-      component: () => import('@views/Domains/EditView.vue'),
+      component: () => import('@views/Domains/TabsView.vue'),
       props: {
-        editDomainService: DomainServices.editDomainService,
-        listEdgeApplicationsService: EdgeApplicationServicesV4.listEdgeApplicationsService,
-        loadEdgeApplicationsService: EdgeApplicationServicesV4.loadEdgeApplicationsService,
-        loadDomainService: DomainServices.loadDomainService,
-        listEdgeFirewallService: EdgeFirewallServicesV4.listEdgeFirewallService,
-        loadEdgeFirewallService: EdgeFirewallServicesV4.loadEdgeFirewallService,
-        updatedRedirect: 'list-domains',
-        clipboardWrite: Helpers.clipboardWrite,
-        listDigitalCertificatesService:
-          DigitalCertificatesServicesV4.listDigitalCertificatesServiceDropdown,
-        loadDigitalCertificatesService: DigitalCertificatesServicesV4.loadDigitalCertificateService
+        domainServices: {
+          editDomainService: DomainServicesV4.editDomainService,
+          loadDomainService: DomainServicesV4.loadDomainService,
+          updatedRedirect: 'list-domains',
+          clipboardWrite: Helpers.clipboardWrite,
+          listDigitalCertificatesService:
+            DigitalCertificatesServicesV4.listDigitalCertificatesServiceDropdown,
+          loadDigitalCertificatesService:
+            DigitalCertificatesServicesV4.loadDigitalCertificateService
+        },
+        workloadDeploymentServices: {
+          listWorkloadDeploymentService: WorkloadDeploymentServices.listWorkloadDeploymentsService,
+          editWorkloadDeploymentService: WorkloadDeploymentServices.editWorkloadDeploymentService,
+          listEdgeApplicationsService: EdgeApplicationServicesV4.listEdgeApplicationsService,
+          loadEdgeApplicationsService: EdgeApplicationServicesV4.loadEdgeApplicationsService,
+          listEdgeFirewallService: EdgeFirewallServicesV4.listEdgeFirewallService,
+          loadEdgeFirewallService: EdgeFirewallServicesV4.loadEdgeFirewallService
+        }
       },
       meta: {
         breadCrumbs: [

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

@@ -0,0 +1,78 @@
+import { AxiosHttpClientAdapter } from '../../axios/AxiosHttpClientAdapter'
+import { makeDomainsBaseUrl } from './make-domains-base-url'
+import * as Errors from '@/services/axios/errors'
+import { extractApiError } from '@/helpers/extract-api-error'
+
+export const editDomainService = async (payload) => {
+  let httpResponse = await AxiosHttpClientAdapter.request({
+    url: `${makeDomainsBaseUrl()}/${payload.id}`,
+    method: 'PATCH',
+    body: adapt(payload)
+  })
+
+  return parseHttpResponse(httpResponse)
+}
+
+const handleVersions = (useHttp3) => {
+  if (useHttp3) {
+    return ['http1', 'http2', 'http3']
+  }
+
+  return ['http1', 'http2']
+}
+
+const convertPortToInt = (ports) => {
+  return ports.map((port) => parseInt(port.value))
+}
+
+const adapt = (payload) => {
+  payload.domains[0].allow_access = !payload.cnameAccessOnly
+  const domains = payload.domains
+
+  const dataRequest = {
+    name: payload.name,
+    alternate_domains: payload.cnames.split('\n').filter((item) => item !== ''),
+    active: payload.active,
+    tls: {
+      ciphers: payload.supportedCiphers,
+      minimum_version: payload.minimumTlsVersion
+    },
+    protocols: {
+      http: {
+        versions: handleVersions(payload.useHttp3),
+        http_ports: convertPortToInt(payload.httpPort),
+        https_ports: payload.useHttps ? convertPortToInt(payload.httpsPort) : null,
+        quic_ports: payload.useHttp3 ? convertPortToInt(payload.quicPort) : null
+      }
+    },
+    mtls: {
+      verification: payload.mtlsVerification,
+      certificate: payload.mtlsTrustedCertificate
+    },
+    domains,
+    network_map: payload.environment
+  }
+  if (payload.edgeCertificate !== 0) {
+    dataRequest.tls.certificate = payload.edgeCertificate
+  }
+
+  return dataRequest
+}
+
+/**
+ * @param {Object} httpResponse - The HTTP response object.
+ * @param {Object} httpResponse.body - The response body.
+ * @param {String} httpResponse.statusCode - The HTTP status code.
+ * @returns {string} The result message based on the status code.
+ * @throws {Error} If there is an error with the response.
+ */
+const parseHttpResponse = (httpResponse) => {
+  switch (httpResponse.statusCode) {
+    case 202:
+      return 'Your domain has been edited'
+    case 500:
+      throw new Errors.InternalServerError().message
+    default:
+      throw new Error(extractApiError(httpResponse)).message
+  }
+}

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

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

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

@@ -1,4 +1,4 @@
-import { AxiosHttpClientAdapter, parseHttpResponse } from '../axios/AxiosHttpClientAdapter'
+import { AxiosHttpClientAdapter, parseHttpResponse } from '../../axios/AxiosHttpClientAdapter'
 import { makeDomainsBaseUrl } from './make-domains-base-url'
 
 export const loadDomainService = async ({ id }) => {
@@ -12,25 +12,40 @@ export const loadDomainService = async ({ id }) => {
   return parseHttpResponse(httpResponse)
 }
 
+const handlerHttp = (ports, LIST_OPTIONS) => {
+  const parserPorts = []
+  if (ports !== null) {
+    ports.forEach((port) => {
+      parserPorts.push(LIST_OPTIONS.find((el) => el.value == port))
+    })
+
+    return parserPorts
+  }
+
+  return null
+}
+
 const adapt = (httpResponse) => {
-  const body = httpResponse.body?.results
+  const body = httpResponse.body?.data
 
   const parsedVariable = {
     id: body?.id,
     name: body?.name,
     domainName: body?.domains[0].domain,
     cnames: body?.alternate_domains.join('\n'),
-    cnameAccessOnly: body?.domains[0].allow_access,
+    cnameAccessOnly: !body?.domains[0].allow_access,
+    domains: body?.domains,
     edgeCertificate: body?.tls.certificate ?? 0,
     active: body.active,
     mtlsVerification: body?.mtls.verification,
     mtlsTrustedCertificate: body?.mtls.certificate || undefined,
+    mtlsIsEnabled: body?.mtls.certificate !== null ? true : false,
     environment: body.network_map,
-    useHttp3: body.protocols.http.quic_ports !== null,
-    useHttps: body.protocols.http.https_ports !== null,
-    https_ports: body.protocols.http.https_ports,
-    quic_ports: body.protocols.http.quic_ports,
-    http_ports: body.protocols.http.https_port,
+    useHttp3: body.protocols.http.quic_ports !== null ? true : false,
+    useHttps: body.protocols.http.https_ports !== null ? true : false,
+    httpsPort: handlerHttp(body.protocols.http.https_ports, HTTPS_PORT_LIST_OPTIONS),
+    quicPort: handlerHttp(body.protocols.http.quic_ports, HTTP3_PORT_LIST_OPTIONS),
+    httpPort: handlerHttp(body.protocols.http.http_ports, HTTP_PORT_LIST_OPTIONS),
     supportedCiphers: body.tls.ciphers,
     minimumTlsVersion: body.tls.minimum_version
   }
@@ -40,3 +55,26 @@ const adapt = (httpResponse) => {
     statusCode: httpResponse.statusCode
   }
 }
+
+const HTTP3_PORT_LIST_OPTIONS = [{ name: '443 (Default)', value: 443 }]
+
+const HTTP_PORT_LIST_OPTIONS = [
+  { name: '80 (Default)', value: 80 },
+  { name: '8008', value: 8008 },
+  { name: '8080', value: 8080 },
+  { name: '8880', value: 8880 }
+]
+const HTTPS_PORT_LIST_OPTIONS = [
+  { name: '443 (Default)', value: 443 },
+  { name: '8443', value: 8443 },
+  { name: '9440', value: 9440 },
+  { name: '9441', value: 9441 },
+  { name: '9442', value: 9442 },
+  { name: '9443', value: 9443 },
+  { name: '7777', value: 7777 },
+  { name: '8888', value: 8888 },
+  { name: '9553', value: 9553 },
+  { name: '9653', value: 9653 },
+  { name: '8035', value: 8035 },
+  { name: '8090', value: 8090 }
+]

src/services/workload-deployment-service/edit-workload-deployment-service.js

@@ -2,10 +2,10 @@ import { AxiosHttpClientAdapter } from '@/services/axios/AxiosHttpClientAdapter'
 import { makeWorkloadsDeploymentBaseUrl } from '@/services/workload-deployment-service/make-workload-deployment-base-url'
 import * as Errors from '@/services/axios/errors'
 import { extractApiError } from '@/helpers/extract-api-error'
-export const editWorkloadDeploymentService = async ({ domainId, workloadId, payload }) => {
+export const editWorkloadDeploymentService = async ({ domainId, payload }) => {
   const httpResponse = await AxiosHttpClientAdapter.request({
-    url: `${makeWorkloadsDeploymentBaseUrl()}/${domainId}/deployment/${workloadId}`,
-    method: 'PUT',
+    url: `${makeWorkloadsDeploymentBaseUrl()}/${domainId}/deployments/${payload.id}`,
+    method: 'PATCH',
     body: adapt(payload)
   })
 
@@ -14,12 +14,10 @@ export const editWorkloadDeploymentService = async ({ domainId, workloadId, payl
 
 const adapt = (payload) => {
   return {
-    tag: payload.tag,
     binds: {
       edge_application: payload.edgeApplication,
-      edge_firewall: payload.edgeApplication
-    },
-    current: payload.current
+      edge_firewall: payload.edgeFirewall
+    }
   }
 }
 

src/services/workload-deployment-service/list-workload-deployment-service.js

@@ -22,20 +22,17 @@ export const listWorkloadDeploymentsService = async ({
 }
 
 const adapt = async (httpResponse) => {
-  const parsedWorkloadDeployments = httpResponse.body.results?.map((domain) => {
-    return {
-      id: domain.id,
-      tag: domain.tag,
-      current: domain.current,
-      edgeApplication: domain.edge_application,
-      edgeFirewall: domain.edge_firewall
-    }
-  })
+  const workload = httpResponse.body.results[0]
 
-  const count = httpResponse.body?.count ?? 0
+  const parsedWorkloadDeployments = {
+    id: workload.id,
+    tag: workload.tag,
+    current: workload.current,
+    edgeApplication: workload.binds.edge_application,
+    edgeFirewall: workload.binds.edge_firewall
+  }
 
   return {
-    count,
     body: parsedWorkloadDeployments,
     statusCode: httpResponse.statusCode
   }

src/tests/services/domains-services/load-domain-service.test.js

@@ -1,4 +1,4 @@
-import { describe, expect, it, vi } from 'vitest'
+import { describe, expect, it, vi, beforeEach } from 'vitest'
 import { loadDomainService } from '@/services/domains-services'
 import { AxiosHttpClientAdapter } from '@/services/axios/AxiosHttpClientAdapter'
 
@@ -38,6 +38,9 @@ const makeSut = () => {
 }
 
 describe('DomainServices', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
   it('should call api with correct params', async () => {
     const requestSpy = vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
       statusCode: 200,