[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

@@ -40,6 +40,11 @@ cypress.env.*
 #azion vulcan folder
 #azion
 .edge
+!azion/production
+!azion/stage
+
+azion/
+
 
 src/views/Playground/PlaygroundView.vue
 /cypress/downloads

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) {

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 {

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)

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
       }
     })
   })

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
     })
   })
 })

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 () => {

src/views/Domains/EditView.vue

@@ -1,22 +1,22 @@
 <template>
   <ContentBlock>
     <template #heading>
-      <PageHeadingBlock pageTitle="Edit Domain"></PageHeadingBlock>
+      <PageHeadingBlock :pageTitle="domainName"></PageHeadingBlock>
     </template>
     <template #content>
       <EditFormBlock
         :editService="editDomainService"
         :loadService="loadDomainService"
         :schema="validationSchema"
         :updatedRedirect="updatedRedirect"
+        @loaded-service-object="setDomainName"
         @on-edit-success="handleTrackEditEvent"
         @on-edit-fail="handleTrackFailEditEvent"
       >
         <template #form>
           <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 () => {

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."

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."