From 7cb5ce84aad7a1d3a1678fa740756542db999262 Mon Sep 17 00:00:00 2001
From: Paulo Sobrinho Ferreira <110847590+pauloSF0@users.noreply.github.com>
Date: Wed, 23 Oct 2024 13:24:17 -0300
Subject: [PATCH] [UXE-5269] feat: add preview input on the domain page (#1833)

* feat: add preview input on the domain page

* feat: added the correct layout and added the domain name in the title

* refactor: code refactor

* refactor: code refactor

* chore: husky format
---
 .gitignore                                    |  5 ++
 .../domains-services/create-domain-service.js |  3 +-
 .../domains-services/load-domain-service.js   |  3 +-
 src/templates/edit-form-block/index.vue       |  8 ++-
 .../create-domain-service.test.js             |  6 +-
 .../load-domain-service.test.js               | 12 ++--
 src/views/Domains/CreateView.vue              |  4 +-
 src/views/Domains/EditView.vue                | 12 +++-
 .../FormFields/FormFieldsCreateDomains.vue    | 26 +++++++++
 .../FormFields/FormFieldsEditDomains.vue      | 55 ++++++++++++++++++-
 10 files changed, 120 insertions(+), 14 deletions(-)

diff --git a/.gitignore b/.gitignore
index 5070bc942..b4aca47ae 100644
--- a/.gitignore
+++ b/.gitignore
@@ -40,6 +40,11 @@ cypress.env.*
 #azion vulcan folder
 #azion
 .edge
+!azion/production
+!azion/stage
+
+azion/
+
 
 src/views/Playground/PlaygroundView.vue
 /cypress/downloads
diff --git a/src/services/domains-services/create-domain-service.js b/src/services/domains-services/create-domain-service.js
index 979d45f67..a9b2de8aa 100644
--- a/src/services/domains-services/create-domain-service.js
+++ b/src/services/domains-services/create-domain-service.js
@@ -21,7 +21,8 @@ const adapt = (payload) => {
     is_mtls_enabled: payload.mtlsIsEnabled,
     is_active: payload.active,
     mtls_verification: payload.mtlsVerification,
-    mtls_trusted_ca_certificate_id: payload.mtlsTrustedCertificate
+    mtls_trusted_ca_certificate_id: payload.mtlsTrustedCertificate,
+    environment: payload.environment
   }
 
   if (payload.edgeCertificate !== 0) {
diff --git a/src/services/domains-services/load-domain-service.js b/src/services/domains-services/load-domain-service.js
index 6fa152036..ee48955e8 100644
--- a/src/services/domains-services/load-domain-service.js
+++ b/src/services/domains-services/load-domain-service.js
@@ -26,7 +26,8 @@ const adapt = (httpResponse) => {
     mtlsIsEnabled: body?.is_mtls_enabled,
     active: body.is_active,
     mtlsVerification: body?.mtls_verification,
-    mtlsTrustedCertificate: body?.mtls_trusted_ca_certificate_id || undefined
+    mtlsTrustedCertificate: body?.mtls_trusted_ca_certificate_id || undefined,
+    environment: body.environment
   }
 
   return {
diff --git a/src/templates/edit-form-block/index.vue b/src/templates/edit-form-block/index.vue
index 0a512adf7..f37539672 100644
--- a/src/templates/edit-form-block/index.vue
+++ b/src/templates/edit-form-block/index.vue
@@ -38,7 +38,12 @@
     }
   })
 
-  const emit = defineEmits(['on-edit-success', 'on-edit-fail', 'on-load-fail'])
+  const emit = defineEmits([
+    'on-edit-success',
+    'on-edit-fail',
+    'on-load-fail',
+    'loaded-service-object'
+  ])
 
   const { scrollToError } = useScrollToError()
   const router = useRouter()
@@ -99,6 +104,7 @@
     try {
       const { id } = route.params
       const initialValues = await props.loadService({ id })
+      emit('loaded-service-object', initialValues)
       resetForm({ values: initialValues })
     } catch (error) {
       emit('on-load-fail', error)
diff --git a/src/tests/services/domains-services/create-domain-service.test.js b/src/tests/services/domains-services/create-domain-service.test.js
index c5a0f12b9..7ccf02907 100644
--- a/src/tests/services/domains-services/create-domain-service.test.js
+++ b/src/tests/services/domains-services/create-domain-service.test.js
@@ -13,7 +13,8 @@ const fixtures = {
     mtlsIsEnabled: false,
     mtlsVerification: 'enforce',
     name: 'space X',
-    mtlsTrustedCertificate: 'mtls-certf-mock'
+    mtlsTrustedCertificate: 'mtls-certf-mock',
+    environment: 'preview'
   }
 }
 
@@ -51,7 +52,8 @@ describe('DomainsServices', () => {
         is_mtls_enabled: fixtures.domainMock.mtlsIsEnabled,
         mtls_verification: fixtures.domainMock.mtlsVerification,
         edge_application_id: fixtures.domainMock.edgeApplication,
-        mtls_trusted_ca_certificate_id: fixtures.domainMock.mtlsTrustedCertificate
+        mtls_trusted_ca_certificate_id: fixtures.domainMock.mtlsTrustedCertificate,
+        environment: fixtures.domainMock.environment
       }
     })
   })
diff --git a/src/tests/services/domains-services/load-domain-service.test.js b/src/tests/services/domains-services/load-domain-service.test.js
index eed9db29c..a5463df2c 100644
--- a/src/tests/services/domains-services/load-domain-service.test.js
+++ b/src/tests/services/domains-services/load-domain-service.test.js
@@ -13,7 +13,8 @@ const fixtures = {
     digital_certificate_id: '862026',
     is_mtls_enabled: true,
     edge_application_id: 'ea1234',
-    mtls_trusted_ca_certificate_id: '862026'
+    mtls_trusted_ca_certificate_id: '862026',
+    environment: 'preview'
   },
   domainWithoutCertificateMock: {
     id: 4321,
@@ -24,7 +25,8 @@ const fixtures = {
     is_mtls_enabled: false,
     activeSort: true,
     digital_certificate_id: null,
-    edge_application_id: 'ea1234'
+    edge_application_id: 'ea1234',
+    environment: 'preview'
   }
 }
 
@@ -77,7 +79,8 @@ describe('DomainServices', () => {
       mtlsIsEnabled: fixtures.domainMock.is_mtls_enabled,
       active: fixtures.domainMock.is_active,
       mtlsVerification: fixtures.domainMock.mtls_verification,
-      mtlsTrustedCertificate: fixtures.domainMock.mtls_trusted_ca_certificate_id
+      mtlsTrustedCertificate: fixtures.domainMock.mtls_trusted_ca_certificate_id,
+      environment: fixtures.domainMock.environment
     })
   })
 
@@ -102,7 +105,8 @@ describe('DomainServices', () => {
       edgeCertificate: 0,
       mtlsIsEnabled: fixtures.domainWithoutCertificateMock.is_mtls_enabled,
       active: fixtures.domainWithoutCertificateMock.is_active,
-      mtlsVerification: fixtures.domainWithoutCertificateMock.mtls_verification
+      mtlsVerification: fixtures.domainWithoutCertificateMock.mtls_verification,
+      environment: fixtures.domainMock.environment
     })
   })
 })
diff --git a/src/views/Domains/CreateView.vue b/src/views/Domains/CreateView.vue
index 90ac2d5a2..a97cf9485 100644
--- a/src/views/Domains/CreateView.vue
+++ b/src/views/Domains/CreateView.vue
@@ -187,6 +187,7 @@
 
   const initialValues = {
     name: '',
+    environment: 'production',
     edgeApplication: null,
     cnames: '',
     cnameAccessOnly: true,
@@ -232,7 +233,8 @@
         then: (schema) => schema.required()
       })
       .label('Trusted CA Certificate'),
-    active: yup.boolean()
+    active: yup.boolean(),
+    environment: yup.string()
   })
 
   const updateDigitalCertificates = async () => {
diff --git a/src/views/Domains/EditView.vue b/src/views/Domains/EditView.vue
index 5cb7a26bf..c077b6d7b 100644
--- a/src/views/Domains/EditView.vue
+++ b/src/views/Domains/EditView.vue
@@ -1,7 +1,7 @@
 <template>
   <ContentBlock>
     <template #heading>
-      <PageHeadingBlock pageTitle="Edit Domain"></PageHeadingBlock>
+      <PageHeadingBlock :pageTitle="domainName"></PageHeadingBlock>
     </template>
     <template #content>
       <EditFormBlock
@@ -9,6 +9,7 @@
         :loadService="loadDomainService"
         :schema="validationSchema"
         :updatedRedirect="updatedRedirect"
+        @loaded-service-object="setDomainName"
         @on-edit-success="handleTrackEditEvent"
         @on-edit-fail="handleTrackFailEditEvent"
       >
@@ -16,7 +17,6 @@
           <FormFieldsEditDomains
             :digitalCertificates="digitalCertificates"
             :edgeApplicationsData="edgeApplicationsData"
-            :domainName="domainName"
             hasDomainName
             @copyDomainName="copyDomainName"
             :loadingEdgeApplications="loadingEdgeApplications"
@@ -104,6 +104,7 @@
   const digitalCertificates = ref([])
   const toast = useToast()
   const loadingEdgeApplications = ref(true)
+  const domainName = ref()
 
   const requestEdgeApplications = async () => {
     loadingEdgeApplications.value = true
@@ -144,6 +145,10 @@
     window.scrollTo(0, 0)
   }
 
+  const setDomainName = async (domain) => {
+    domainName.value = domain.name
+  }
+
   onMounted(async () => {
     try {
       scrollToTop()
@@ -193,7 +198,8 @@
         then: (schema) => schema.required()
       })
       .label('Trusted CA Certificate'),
-    active: yup.boolean()
+    active: yup.boolean(),
+    environment: yup.string()
   })
 
   const updateDigitalCertificates = async () => {
diff --git a/src/views/Domains/FormFields/FormFieldsCreateDomains.vue b/src/views/Domains/FormFields/FormFieldsCreateDomains.vue
index 5970614ed..e1ffb165b 100644
--- a/src/views/Domains/FormFields/FormFieldsCreateDomains.vue
+++ b/src/views/Domains/FormFields/FormFieldsCreateDomains.vue
@@ -106,6 +106,17 @@
     }
   ])
 
+  const environmentOptionsRadios = ref([
+    {
+      title: 'Global Edge Network',
+      inputValue: 'production'
+    },
+    {
+      title: 'Staging Network',
+      inputValue: 'preview'
+    }
+  ])
+
   const isLoadingRequestsData = computed(() => {
     return props.isLoadingRequests
   })
@@ -141,6 +152,21 @@
       </div>
     </template>
   </form-horizontal>
+  <form-horizontal
+    title="Environment Type"
+    description="Select Global Edge Network to set this as a production domain or select Staging Network for a testing domain that won’t affect your production environment"
+  >
+    <template #inputs>
+      <div class="flex flex-col gap-3">
+        <FieldGroupRadio
+          isCard
+          nameField="environment"
+          label=""
+          :options="environmentOptionsRadios"
+        />
+      </div>
+    </template>
+  </form-horizontal>
 
   <form-horizontal
     description="Determine the edge application of the domain and its digital certificate. To link an existing domain to an application, add it to the CNAME field and block access to the application via the Azion domain."
diff --git a/src/views/Domains/FormFields/FormFieldsEditDomains.vue b/src/views/Domains/FormFields/FormFieldsEditDomains.vue
index 14848dec7..9b53e268f 100644
--- a/src/views/Domains/FormFields/FormFieldsEditDomains.vue
+++ b/src/views/Domains/FormFields/FormFieldsEditDomains.vue
@@ -7,6 +7,7 @@
   import PrimeButton from 'primevue/button'
   import FieldText from '@/templates/form-fields-inputs/fieldText'
   import InputText from 'primevue/inputtext'
+  import PrimeTag from 'primevue/tag'
   import FieldTextArea from '@/templates/form-fields-inputs/fieldTextArea'
   import FieldDropdown from '@/templates/form-fields-inputs/fieldDropdown'
   import FieldGroupRadio from '@/templates/form-fields-inputs/fieldGroupRadio'
@@ -45,7 +46,7 @@
   const { value: edgeApplication } = useField('edgeApplication')
   const { value: edgeCertificate } = useField('edgeCertificate')
   const { value: mtlsIsEnabled } = useField('mtlsIsEnabled')
-
+  const { value: environment } = useField('environment')
   const { value: domainName } = useField('domainName')
 
   const { value: mtlsTrustedCertificate } = useField('mtlsTrustedCertificate')
@@ -99,6 +100,33 @@
     }
   ])
 
+  const environmentOptions = computed(() => {
+    const tag = {
+      value: 'The environment type cannot be changed after the domain is created',
+      icon: 'pi pi-lock'
+    }
+    const environmentOptionsRadios = [
+      {
+        title: 'Global Edge Network',
+        inputValue: 'production',
+        disabled: true
+      },
+      {
+        title: 'Staging Network',
+        inputValue: 'preview',
+        disabled: true
+      }
+    ]
+
+    if (environment.value === 'production') {
+      environmentOptionsRadios[0].tag = tag
+    } else if (environment.value === 'preview') {
+      environmentOptionsRadios[1].tag = tag
+    }
+
+    return environmentOptionsRadios
+  })
+
   const isLoadingEdgeApplications = computed(() => {
     return props.loadingEdgeApplications
   })
@@ -146,6 +174,31 @@
     </template>
   </form-horizontal>
 
+  <form-horizontal
+    title="Environment Type"
+    description="Select Global Edge Network to set this as a production domain or select Staging Network for a testing domain that won’t affect your production environment"
+  >
+    <template #inputs>
+      <div class="flex flex-col gap-3">
+        <FieldGroupRadio
+          isCard
+          nameField="environment"
+          :options="environmentOptions"
+        >
+          <template #footer="{ item }">
+            <PrimeTag
+              v-if="item?.tag"
+              :value="item.tag.value"
+              :icon="item.tag.icon"
+              severity="info"
+              class="mt-3"
+            />
+          </template>
+        </FieldGroupRadio>
+      </div>
+    </template>
+  </form-horizontal>
+
   <form-horizontal
     title="Domain"
     description="The domain URL attributed by Azion."