[UXE-5195] feat: add create cache settings drawer to rules engine form (

#1791)

* feat: add e2e tests to this cenary

* fix: change import path

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

@@ -0,0 +1,102 @@
+import generateUniqueName from '../../../support/utils'
+import selectors from '../../../support/selectors'
+
+let fixtures = {}
+
+/**
+ * Creates a new edge application with basic settings.
+ */
+const createEdgeApplicationCase = () => {
+  // Act
+  cy.get(selectors.edgeApplication.mainSettings.createButton).click()
+  cy.get(selectors.edgeApplication.mainSettings.nameInput).type(fixtures.edgeApplicationName)
+  cy.get(selectors.edgeApplication.mainSettings.addressInput).clear()
+  cy.get(selectors.edgeApplication.mainSettings.addressInput).type('httpbingo.org')
+  cy.get(selectors.form.actionsSubmitButton).click()
+  cy.verifyToast('success', 'Your edge application has been created')
+  cy.get(selectors.form.actionsCancelButton).click()
+
+  // Assert - Verify the edge application was created
+  cy.get(selectors.list.searchInput).type(fixtures.edgeApplicationName)
+  cy.get(selectors.list.filteredRow.column('name')).should(
+    'have.text',
+    fixtures.edgeApplicationName
+  )
+
+  // Act - Navigate to the created edge application
+  cy.get(selectors.list.filteredRow.column('name')).click()
+}
+
+describe('Edge Application', { tags: ['@dev4'] }, () => {
+  beforeEach(() => {
+    fixtures.edgeApplicationName = generateUniqueName('EdgeApp')
+    // Login
+    cy.login()
+
+    fixtures = {
+      functionName: generateUniqueName('EdgeFunction'),
+      functionInstanceName: generateUniqueName('FunctionsInstance'),
+      edgeApplicationName: generateUniqueName('EdgeApp'),
+      originName: generateUniqueName('origin'),
+      rulesEngineName: generateUniqueName('RulesEng'),
+      cacheSettingName: generateUniqueName('cacheSetting')
+    }
+  })
+
+  it('should create a rule engine set cache policy', () => {
+    // Arrange
+    cy.openProduct('Edge Application')
+    createEdgeApplicationCase()
+    cy.get(selectors.edgeApplication.tabs('Rules Engine')).click()
+
+    // Act
+    // Create a rule
+    cy.get(selectors.edgeApplication.rulesEngine.createButton).click()
+    cy.get(selectors.edgeApplication.rulesEngine.ruleNameInput).type(fixtures.rulesEngineName)
+    cy.get(selectors.edgeApplication.rulesEngine.criteriaOperatorDropdown(0, 0)).click()
+    cy.get(selectors.edgeApplication.rulesEngine.criteriaOperatorOption('is equal')).click()
+    cy.get(selectors.edgeApplication.rulesEngine.criteriaInputValue(0, 0)).clear()
+    cy.get(selectors.edgeApplication.rulesEngine.criteriaInputValue(0, 0)).type('/')
+    cy.get(selectors.edgeApplication.rulesEngine.behaviorsDropdown(0)).click()
+    cy.get(selectors.edgeApplication.rulesEngine.behaviorsOption('Set Cache Policy')).click()
+    cy.get(selectors.edgeApplication.rulesEngine.setCachePolicySelect(0)).click()
+    cy.get(selectors.edgeApplication.rulesEngine.createCachePolicyButton).click()
+    cy.get(selectors.edgeApplication.cacheSettings.nameInput).type(fixtures.cacheSettingName)
+
+    cy.intercept('GET', 'api/v3/edge_applications/*/cache_settings?page_size=200').as(
+      'getCachePolicy'
+    )
+    cy.get(selectors.edgeApplication.rulesEngine.cachePolicyActionBar)
+      .find(selectors.form.actionsSubmitButton)
+      .click()
+    cy.verifyToast('success', 'Cache Settings successfully created')
+
+    cy.wait('@getCachePolicy')
+    cy.get(selectors.edgeApplication.rulesEngine.setCachePolicySelect(0)).click()
+    cy.get(selectors.edgeApplication.rulesEngine.setCachePolicySelect(0))
+      .find(selectors.edgeApplication.rulesEngine.cachePolicyOption(fixtures.cacheSettingName))
+      .click()
+
+    cy.get(selectors.form.actionsSubmitButton).click()
+    cy.verifyToast('success', 'Your Rules Engine has been created.')
+
+    // Assert
+    cy.get(selectors.list.searchInput).type(fixtures.rulesEngineName)
+    cy.get(selectors.list.filteredRow.column('name')).should('have.text', fixtures.rulesEngineName)
+
+    // Cleanup - Remove the rule engine
+    cy.deleteEntityFromLoadedList().then(() => {
+      cy.verifyToast('Rule Engine successfully deleted')
+    })
+  })
+
+  afterEach(() => {
+    // Delete the edge application
+    cy.deleteEntityFromList({
+      entityName: fixtures.edgeApplicationName,
+      productName: 'Edge Application'
+    }).then(() => {
+      cy.verifyToast('Resource successfully deleted')
+    })
+  })
+})

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

@@ -1,5 +1,5 @@
-import generateUniqueName from '../../support/utils'
-import selectors from '../../support/selectors'
+import generateUniqueName from '../../../support/utils'
+import selectors from '../../../support/selectors'
 
 let fixtures = {}
 
@@ -81,4 +81,4 @@ describe('Edge Application', { tags: ['@dev4'] }, () => {
       cy.verifyToast('Resource successfully deleted')
     })
   })
-})
+})

cypress/e2e/edge-application/edit-rule-engine.cy.js → cypress/e2e/edge-application/rules-engine/edit-rule-engine.cy.js

@@ -1,5 +1,5 @@
-import generateUniqueName from '../../support/utils'
-import selectors from '../../support/selectors'
+import generateUniqueName from '../../../support/utils'
+import selectors from '../../../support/selectors'
 
 let fixtures = {}
 
@@ -136,4 +136,4 @@ describe('Edge Application', { tags: ['@dev4'] }, () => {
       cy.verifyToast('Resource successfully deleted')
     })
   })
-})
+})

cypress/support/selectors/product-selectors/edge-application.js

@@ -10,6 +10,10 @@ export default {
   rulesEngine: {
     createButton: '[data-testid="rules-engine-create-button"]',
     ruleNameInput: '[data-testid="rule-form-general-name__input"]',
+    createCachePolicyButton:
+      '[data-testid="edge-applications-rules-engine-form__create-cache-policy-button"]',
+    setCachePolicySelect: (behaviorIndex) =>
+      `[data-testid="edge-application-rule-form__cache-settings-item[${behaviorIndex}]__dropdown"]`,
     criteriaVariableSelect: (criteriaIdx, position) =>
       `[data-testid="edge-application-rule-form__criteria-variable[${criteriaIdx}][${position}]__autocomplete"] > .p-autocomplete-input`,
     criteriaOperatorDropdown: (criteriaIdx, position) =>
@@ -20,6 +24,9 @@ export default {
     behaviorsDropdown: (behaviorIdx) =>
       `[data-testid="edge-application-rule-form__behaviors-item[${behaviorIdx}]__dropdown"] > .p-dropdown-trigger`,
     behaviorsOption: (option) => `li[aria-label="${option}"]`,
+    cachePolicyOptions: '#behaviors[0].cacheId_list',
+    cachePolicyOption: (option) => `li[aria-label="${option}"]`,
+    cachePolicyActionBar: '[data-testid="create-cache-settings-drawer__action-bar"]',
     criteriaConditionalButton: (type) =>
       `[data-testid="rule-form-criteria-item-conditional-add-button"] button[aria-label="${type}"]`,
     criteriaAddButton: '[data-testid="rule-form-criteria-add-button"]',

src/templates/create-drawer-block/index.vue

@@ -20,6 +20,14 @@
       type: Boolean,
       default: false
     },
+    drawerId: {
+      type: String,
+      default: 'create-drawer-block'
+    },
+    isOverlapped: {
+      type: Boolean,
+      default: false
+    },
     createService: {
       type: Function,
       required: true
@@ -136,7 +144,11 @@
     :update:visible="toggleDrawerVisibility"
     position="right"
     :pt="{
-      root: { class: 'max-w-4xl w-full' },
+      root: {
+        class: `w-full transition-all duration-300 ease-in-out ${
+          props.isOverlapped ? 'max-w-5xl' : 'max-w-4xl'
+        }`
+      },
       headercontent: { class: 'flex justify-content-between items-center w-full pr-2' },
       content: { class: 'p-8' }
     }"
@@ -174,6 +186,7 @@
         />
         <ActionBarBlock
           v-else
+          :data-testid="`${drawerId}__action-bar`"
           @onCancel="closeDrawer"
           @onSubmit="onSubmit"
           :inDrawer="true"

src/templates/edit-drawer-block/index.vue

@@ -23,6 +23,10 @@
       type: Boolean,
       default: false
     },
+    isOverlapped: {
+      type: Boolean,
+      default: false
+    },
     loadService: {
       type: Function,
       required: true
@@ -167,7 +171,11 @@
     :update:visible="toggleDrawerVisibility"
     position="right"
     :pt="{
-      root: { class: 'max-w-4xl w-full' },
+      root: {
+        class: `w-full transition-all duration-300 ease-in-out ${
+          props.isOverlapped ? 'max-w-5xl' : 'max-w-4xl'
+        }`
+      },
       headercontent: { class: 'flex justify-content-between items-center w-full pr-2' },
       content: { class: 'p-8' }
     }"

src/views/EdgeApplicationsCacheSettings/Drawer/index.vue

@@ -26,16 +26,13 @@
       type: Boolean
     },
     createService: {
-      type: Function,
-      required: true
+      type: Function
     },
     loadService: {
-      type: Function,
-      required: true
+      type: Function
     },
     editService: {
-      type: Function,
-      required: true
+      type: Function
     },
     showTieredCache: {
       type: Boolean,
@@ -254,7 +251,8 @@
 
   defineExpose({
     openCreateDrawer,
-    openEditDrawer
+    openEditDrawer,
+    showCreateDrawer
   })
 </script>
 
@@ -263,6 +261,8 @@
     v-if="showCreateDrawer"
     v-model:visible="showCreateCacheSettingsDrawer"
     :createService="createServiceWithEdgeApplicationIdDecorator"
+    id="create-cache-settings-drawer"
+    drawerId="create-cache-settings-drawer"
     :schema="validationSchema"
     :initialValues="initialValues"
     @onSuccess="handleCreateCacheSettings"

src/views/EdgeApplicationsRulesEngine/Drawer/index.vue

@@ -65,6 +65,7 @@
   })
 
   const toast = useToast()
+  const isOverlapped = ref(false)
 
   const showCreateRulesEngineDrawer = ref(false)
   const showEditRulesEngineDrawer = ref(false)
@@ -102,6 +103,8 @@
     isActive: true
   })
 
+  const isLoadingRequests = ref(true)
+
   const validationSchema = yup.object({
     name: yup.string().required().label('Name'),
     description: yup
@@ -133,6 +136,10 @@
     )
   })
 
+  const handleToggleDrawer = (isOpen) => {
+    isOverlapped.value = isOpen
+  }
+
   const createService = async (payload) => {
     return await props.createRulesEngineService({
       ...payload,
@@ -164,6 +171,7 @@
   }
 
   const listCacheSettingsOptions = async () => {
+    isLoadingRequests.value = true
     try {
       cacheSettingsOptions.value = await props.listCacheSettingsService({
         id: props.edgeApplicationId
@@ -174,6 +182,8 @@
         severity: 'error',
         summary: error
       })
+    } finally {
+      isLoadingRequests.value = false
     }
   }
 
@@ -279,6 +289,10 @@
     closeDrawerEdit()
   }
 
+  const handleRefreshCacheSettings = async () => {
+    await listCacheSettingsOptions()
+  }
+
   defineExpose({
     openDrawerCreate,
     openDrawerEdit,
@@ -297,6 +311,7 @@
 <template>
   <CreateDrawerBlock
     v-if="loadCreateRulesEngineDrawer"
+    :isOverlapped="isOverlapped"
     v-model:visible="showCreateRulesEngineDrawer"
     :createService="createService"
     :schema="validationSchema"
@@ -309,13 +324,16 @@
   >
     <template #formFields="{ errors }">
       <FormFieldsDrawerRulesEngine
+        :isLoadingRequests="isLoadingRequests"
         :initialPhase="initialPhase"
         :edgeApplicationId="props.edgeApplicationId"
         :isApplicationAcceleratorEnabled="props.isApplicationAcceleratorEnabled"
         :isDeliveryProtocolHttps="props.isDeliveryProtocolHttps"
         :functionsInstanceOptions="functionsInstanceOptions"
         :originsOptions="originsOptions"
         :cacheSettingsOptions="cacheSettingsOptions"
+        @toggleDrawer="handleToggleDrawer"
+        @refreshCacheSettings="handleRefreshCacheSettings"
         :hideApplicationAcceleratorInDescription="props.hideApplicationAcceleratorInDescription"
         :isImageOptimizationEnabled="props.isImageOptimizationEnabled"
         :isEdgeFunctionEnabled="props.isEdgeFunctionEnabled"
@@ -326,6 +344,7 @@
   </CreateDrawerBlock>
   <EditDrawerBlock
     v-if="loadEditRulesEngineDrawer"
+    :isOverlapped="isOverlapped"
     :id="selectedRulesEngineToEdit.id.toString()"
     v-model:visible="showEditRulesEngineDrawer"
     :loadService="loadService"
@@ -341,6 +360,8 @@
       <FormFieldsDrawerRulesEngine
         :selectedRulesEngineToEdit="selectedRulesEngineToEdit"
         :edgeApplicationId="props.edgeApplicationId"
+        :isLoadingRequests="isLoadingRequests"
+        @toggleDrawer="handleToggleDrawer"
         :isApplicationAcceleratorEnabled="props.isApplicationAcceleratorEnabled"
         :isDeliveryProtocolHttps="props.isDeliveryProtocolHttps"
         :functionsInstanceOptions="functionsInstanceOptions"