From 151f6850d61b71b9ac18d5f95ca4184980a4b6bf Mon Sep 17 00:00:00 2001
From: Hoang Nguyen <hoangnm@unitech.vn>
Date: Fri, 28 Aug 2020 15:50:22 +0700
Subject: [PATCH] views: add `maskClosable=false` to keep form/modal when
 clicked outside (#631)

Fixes #629

Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>
---
 ui/src/components/view/DedicateModal.vue      |  1 +
 ui/src/views/AutogenView.vue                  |  2 ++
 ui/src/views/compute/InstanceTab.vue          |  3 +++
 .../views/compute/wizard/NetworkSelection.vue |  1 +
 .../views/dashboard/OnboardingDashboard.vue   |  2 ++
 ui/src/views/iam/DomainActionForm.vue         |  1 +
 ui/src/views/image/IsoZones.vue               |  1 +
 ui/src/views/image/TemplateZones.vue          |  2 ++
 ui/src/views/infra/InfraSummary.vue           |  1 +
 .../views/infra/network/DedicatedVLANTab.vue  |  6 +++++-
 .../infra/network/IpRangesTabManagement.vue   |  6 +++++-
 .../views/infra/network/IpRangesTabPublic.vue | 19 ++++++++++++++++---
 .../infra/network/IpRangesTabStorage.vue      |  6 +++++-
 .../infra/network/ServiceProvidersTab.vue     |  2 ++
 .../views/infra/routers/RouterHealthCheck.vue |  1 +
 .../views/infra/zone/IpAddressRangeForm.vue   |  1 +
 .../ZoneWizardPhysicalNetworkSetupStep.vue    |  2 ++
 ui/src/views/network/AclListRulesTab.vue      |  4 ++--
 ui/src/views/network/FirewallRules.vue        |  7 ++++++-
 .../network/IngressEgressRuleConfigure.vue    |  7 ++++++-
 ui/src/views/network/LoadBalancing.vue        | 17 +++++++++++++++--
 ui/src/views/network/PortForwarding.vue       |  8 +++++++-
 ui/src/views/network/StaticRoutesTab.vue      |  2 +-
 ui/src/views/network/VpcTab.vue               | 13 +++++++++++--
 ui/src/views/network/VpcTiersTab.vue          | 12 ++++++++++--
 ui/src/views/network/VpnDetails.vue           | 14 ++++++++++++--
 .../plugins/quota/EditTariffValueWizard.vue   |  1 +
 ui/src/views/project/iam/ProjectRoleTab.vue   | 14 ++++++++++++--
 28 files changed, 134 insertions(+), 22 deletions(-)

diff --git a/ui/src/components/view/DedicateModal.vue b/ui/src/components/view/DedicateModal.vue
index 9cabd23595b..1e364ba1466 100644
--- a/ui/src/components/view/DedicateModal.vue
+++ b/ui/src/components/view/DedicateModal.vue
@@ -19,6 +19,7 @@
   <a-modal
     v-model="dedicatedDomainModal"
     :title="label"
+    :maskClosable="false"
     @cancel="closeModal"
     @ok="handleDedicateForm">
     <DedicateDomain
diff --git a/ui/src/views/AutogenView.vue b/ui/src/views/AutogenView.vue
index d14740605a5..9ea3e40df65 100644
--- a/ui/src/views/AutogenView.vue
+++ b/ui/src/views/AutogenView.vue
@@ -85,6 +85,7 @@
         <a-modal
           :visible="showAction"
           :closable="true"
+          :maskClosable="false"
           style="top: 20px;"
           @cancel="closeAction"
           :confirmLoading="actionLoading"
@@ -117,6 +118,7 @@
         v-else
         :visible="showAction"
         :closable="true"
+        :maskClosable="false"
         style="top: 20px;"
         @ok="handleSubmit"
         @cancel="closeAction"
diff --git a/ui/src/views/compute/InstanceTab.vue b/ui/src/views/compute/InstanceTab.vue
index 20b344b9a8d..7c9e22df293 100644
--- a/ui/src/views/compute/InstanceTab.vue
+++ b/ui/src/views/compute/InstanceTab.vue
@@ -147,6 +147,7 @@
     <a-modal
       :visible="showAddNetworkModal"
       :title="$t('label.network.addvm')"
+      :maskClosable="false"
       @cancel="closeModals"
       @ok="submitAddNetwork">
       {{ $t('message.network.addvm.desc') }}
@@ -168,6 +169,7 @@
     <a-modal
       :visible="showUpdateIpModal"
       :title="$t('label.change.ipaddress')"
+      :maskClosable="false"
       @cancel="closeModals"
       @ok="submitUpdateIP"
     >
@@ -182,6 +184,7 @@
     <a-modal
       :visible="showSecondaryIpModal"
       :title="$t('label.acquire.new.secondary.ip')"
+      :maskClosable="false"
       :footer="null"
       :closable="false"
       class="wide-modal"
diff --git a/ui/src/views/compute/wizard/NetworkSelection.vue b/ui/src/views/compute/wizard/NetworkSelection.vue
index 85d3c14056e..9b7dd12a45f 100644
--- a/ui/src/views/compute/wizard/NetworkSelection.vue
+++ b/ui/src/views/compute/wizard/NetworkSelection.vue
@@ -72,6 +72,7 @@
       :visible="showCreateForm"
       :title="$t('label.add.network')"
       :closable="true"
+      :maskClosable="false"
       :footer="null"
       @cancel="showCreateForm = false"
       centered
diff --git a/ui/src/views/dashboard/OnboardingDashboard.vue b/ui/src/views/dashboard/OnboardingDashboard.vue
index 1cd2f58009b..9b8fd364783 100644
--- a/ui/src/views/dashboard/OnboardingDashboard.vue
+++ b/ui/src/views/dashboard/OnboardingDashboard.vue
@@ -37,6 +37,7 @@
       :title="$t('message.change.password')"
       :visible="this.step === 1"
       :closable="true"
+      :maskClosable="false"
       :footer="null"
       @cancel="closeAction"
       centered
@@ -50,6 +51,7 @@
       :title="$t('label.installwizard.addzoneintro.title')"
       :visible="this.step === 2"
       :closable="true"
+      :maskClosable="false"
       :footer="null"
       @cancel="closeAction"
       centered
diff --git a/ui/src/views/iam/DomainActionForm.vue b/ui/src/views/iam/DomainActionForm.vue
index e8c225e6918..ab65a84b476 100644
--- a/ui/src/views/iam/DomainActionForm.vue
+++ b/ui/src/views/iam/DomainActionForm.vue
@@ -20,6 +20,7 @@
     <a-modal
       :visible="showAction"
       :closable="true"
+      :maskClosable="false"
       style="top: 20px;"
       @ok="handleSubmit"
       @cancel="parentCloseAction"
diff --git a/ui/src/views/image/IsoZones.vue b/ui/src/views/image/IsoZones.vue
index 89351f72873..c6df3f64ea3 100644
--- a/ui/src/views/image/IsoZones.vue
+++ b/ui/src/views/image/IsoZones.vue
@@ -78,6 +78,7 @@
       :title="$t('label.action.copy.iso')"
       :visible="showCopyActionForm"
       :closable="true"
+      :maskClosable="false"
       @ok="handleCopyIsoSubmit"
       @cancel="onCloseCopyForm"
       :confirmLoading="copyLoading"
diff --git a/ui/src/views/image/TemplateZones.vue b/ui/src/views/image/TemplateZones.vue
index f4ea28a21bd..af2fb8bd29f 100644
--- a/ui/src/views/image/TemplateZones.vue
+++ b/ui/src/views/image/TemplateZones.vue
@@ -70,6 +70,7 @@
       :title="$t('label.action.copy.template')"
       :visible="showCopyActionForm"
       :closable="true"
+      :maskClosable="false"
       @ok="handleCopyTemplateSubmit"
       @cancel="onCloseModal"
       :confirmLoading="copyLoading"
@@ -111,6 +112,7 @@
       :title="$t('label.action.delete.template')"
       :visible="showDeleteTemplate"
       :closable="true"
+      :maskClosable="false"
       @ok="deleteTemplate"
       @cancel="onCloseModal"
       :confirmLoading="deleteLoading"
diff --git a/ui/src/views/infra/InfraSummary.vue b/ui/src/views/infra/InfraSummary.vue
index ff487ad2974..a28665bf29b 100644
--- a/ui/src/views/infra/InfraSummary.vue
+++ b/ui/src/views/infra/InfraSummary.vue
@@ -42,6 +42,7 @@
             :title="$t('label.sslcertificates')"
             :visible="sslFormVisible"
             :footer="null"
+            :maskClosable="false"
             @cancel="sslModalClose">
             <p>
               {{ $t('message.update.ssl') }}
diff --git a/ui/src/views/infra/network/DedicatedVLANTab.vue b/ui/src/views/infra/network/DedicatedVLANTab.vue
index 98b74425f24..f82c2249dea 100644
--- a/ui/src/views/infra/network/DedicatedVLANTab.vue
+++ b/ui/src/views/infra/network/DedicatedVLANTab.vue
@@ -59,7 +59,11 @@
       </template>
     </a-pagination>
 
-    <a-modal v-model="modal" :title="$t('label.dedicate.vlan.vni.range')" @ok="handleSubmit">
+    <a-modal
+      v-model="modal"
+      :title="$t('label.dedicate.vlan.vni.range')"
+      :maskClosable="false"
+      @ok="handleSubmit">
       <a-spin :spinning="formLoading">
         <a-form
           :form="form"
diff --git a/ui/src/views/infra/network/IpRangesTabManagement.vue b/ui/src/views/infra/network/IpRangesTabManagement.vue
index 86e13d577eb..748bff28a1c 100644
--- a/ui/src/views/infra/network/IpRangesTabManagement.vue
+++ b/ui/src/views/infra/network/IpRangesTabManagement.vue
@@ -68,7 +68,11 @@
       </template>
     </a-pagination>
 
-    <a-modal v-model="addIpRangeModal" :title="$t('label.add.ip.range')" @ok="handleAddIpRange">
+    <a-modal
+      v-model="addIpRangeModal"
+      :title="$t('label.add.ip.range')"
+      :maskClosable="false"
+      @ok="handleAddIpRange">
       <a-form
         :form="form"
         @submit="handleAddIpRange"
diff --git a/ui/src/views/infra/network/IpRangesTabPublic.vue b/ui/src/views/infra/network/IpRangesTabPublic.vue
index 811189a5e54..2d6bad9564f 100644
--- a/ui/src/views/infra/network/IpRangesTabPublic.vue
+++ b/ui/src/views/infra/network/IpRangesTabPublic.vue
@@ -87,7 +87,11 @@
       </template>
     </a-pagination>
 
-    <a-modal v-model="accountModal" v-if="selectedItem" @ok="accountModal = false">
+    <a-modal
+      v-model="accountModal"
+      v-if="selectedItem"
+      :maskClosable="false"
+      @ok="accountModal = false">
       <div>
         <div style="margin-bottom: 10px;">
           <div class="list__label">{{ $t('label.account') }}</div>
@@ -104,7 +108,12 @@
       </div>
     </a-modal>
 
-    <a-modal :zIndex="1001" v-model="addAccountModal" :title="$t('label.add.account')" @ok="handleAddAccount">
+    <a-modal
+      :zIndex="1001"
+      :maskClosable="false"
+      v-model="addAccountModal"
+      :title="$t('label.add.account')"
+      @ok="handleAddAccount">
       <a-spin :spinning="domainsLoading">
         <div style="margin-bottom: 10px;">
           <div class="list__label">{{ $t('label.account') }}:</div>
@@ -123,7 +132,11 @@
       </a-spin>
     </a-modal>
 
-    <a-modal v-model="addIpRangeModal" :title="$t('label.add.ip.range')" @ok="handleAddIpRange">
+    <a-modal
+      v-model="addIpRangeModal"
+      :title="$t('label.add.ip.range')"
+      :maskClosable="false"
+      @ok="handleAddIpRange">
       <a-form
         :form="form"
         @submit="handleAddIpRange"
diff --git a/ui/src/views/infra/network/IpRangesTabStorage.vue b/ui/src/views/infra/network/IpRangesTabStorage.vue
index af2c63c2094..c8bc311cf0d 100644
--- a/ui/src/views/infra/network/IpRangesTabStorage.vue
+++ b/ui/src/views/infra/network/IpRangesTabStorage.vue
@@ -66,7 +66,11 @@
       </template>
     </a-pagination>
 
-    <a-modal v-model="addIpRangeModal" :title="$t('label.add.ip.range')" @ok="handleAddIpRange">
+    <a-modal
+      v-model="addIpRangeModal"
+      :title="$t('label.add.ip.range')"
+      :maskClosable="false"
+      @ok="handleAddIpRange">
       <a-form
         :form="form"
         @submit="handleAddIpRange"
diff --git a/ui/src/views/infra/network/ServiceProvidersTab.vue b/ui/src/views/infra/network/ServiceProvidersTab.vue
index 176d01474aa..1b925afda67 100644
--- a/ui/src/views/infra/network/ServiceProvidersTab.vue
+++ b/ui/src/views/infra/network/ServiceProvidersTab.vue
@@ -45,6 +45,7 @@
           :title="$t(currentAction.label)"
           :visible="showFormAction"
           :closable="true"
+          :maskClosable="false"
           style="top: 20px;"
           @cancel="onCloseAction"
           :confirmLoading="actionLoading"
@@ -61,6 +62,7 @@
         :title="$t(currentAction.label)"
         :visible="showFormAction"
         :confirmLoading="actionLoading"
+        :maskClosable="false"
         style="top: 20px;"
         @ok="handleSubmit"
         @cancel="onCloseAction"
diff --git a/ui/src/views/infra/routers/RouterHealthCheck.vue b/ui/src/views/infra/routers/RouterHealthCheck.vue
index 31fd45b6ee7..08915b4381a 100644
--- a/ui/src/views/infra/routers/RouterHealthCheck.vue
+++ b/ui/src/views/infra/routers/RouterHealthCheck.vue
@@ -43,6 +43,7 @@
         :title="$t('label.action.router.health.checks')"
         :visible="showGetHealthChecksForm"
         :closable="true"
+        :maskClosable="false"
         @ok="handleGetHealthChecksSubmit"
         @cancel="onCloseGetHealthChecksForm"
         centered>
diff --git a/ui/src/views/infra/zone/IpAddressRangeForm.vue b/ui/src/views/infra/zone/IpAddressRangeForm.vue
index 37d67c004dd..b0daf8e83a3 100644
--- a/ui/src/views/infra/zone/IpAddressRangeForm.vue
+++ b/ui/src/views/infra/zone/IpAddressRangeForm.vue
@@ -112,6 +112,7 @@
     </div>
     <a-modal
       :visible="showError"
+      :maskClosable="false"
       title="Error!"
       @ok="() => { showError = false }"
       @cancel="() => { showError = false }"
diff --git a/ui/src/views/infra/zone/ZoneWizardPhysicalNetworkSetupStep.vue b/ui/src/views/infra/zone/ZoneWizardPhysicalNetworkSetupStep.vue
index c75bfc040b3..f9440b82377 100644
--- a/ui/src/views/infra/zone/ZoneWizardPhysicalNetworkSetupStep.vue
+++ b/ui/src/views/infra/zone/ZoneWizardPhysicalNetworkSetupStep.vue
@@ -63,6 +63,7 @@
           :title="$t('label.edit.traffic.type')"
           :visible="showEditTraffic"
           :closable="true"
+          :maskClosable="false"
           @ok="updateTrafficLabel(trafficInEdit)"
           @cancel="cancelEditTraffic"
           centered
@@ -149,6 +150,7 @@
     <a-modal
       :visible="showError"
       :title="`${$t('label.error')}!`"
+      :maskClosable="false"
       @ok="() => { showError = false }"
       @cancel="() => { showError = false }"
       centered
diff --git a/ui/src/views/network/AclListRulesTab.vue b/ui/src/views/network/AclListRulesTab.vue
index 8219b0160bc..62448d76904 100644
--- a/ui/src/views/network/AclListRulesTab.vue
+++ b/ui/src/views/network/AclListRulesTab.vue
@@ -96,7 +96,7 @@
       </draggable>
     </div>
 
-    <a-modal :title="$t('label.edit.tags')" v-model="tagsModalVisible" :footer="null">
+    <a-modal :title="$t('label.edit.tags')" v-model="tagsModalVisible" :footer="null" :maskClosable="false">
       <a-spin v-if="tagsLoading"></a-spin>
 
       <div v-else>
@@ -130,7 +130,7 @@
       </div>
 
     </a-modal>
-    <a-modal :title="ruleModalTitle" v-model="ruleModalVisible" @ok="handleRuleModalForm">
+    <a-modal :title="ruleModalTitle" :maskClosable="false" v-model="ruleModalVisible" @ok="handleRuleModalForm">
       <a-form :form="ruleForm" @submit="handleRuleModalForm">
         <a-form-item :label="$t('label.number')">
           <a-input-number style="width: 100%" v-decorator="['number']" />
diff --git a/ui/src/views/network/FirewallRules.vue b/ui/src/views/network/FirewallRules.vue
index c327b2525dc..2280f571e06 100644
--- a/ui/src/views/network/FirewallRules.vue
+++ b/ui/src/views/network/FirewallRules.vue
@@ -101,7 +101,12 @@
       </template>
     </a-pagination>
 
-    <a-modal :title="$t('label.edit.tags')" v-model="tagsModalVisible" :footer="null" :afterClose="closeModal">
+    <a-modal
+      :title="$t('label.edit.tags')"
+      v-model="tagsModalVisible"
+      :footer="null"
+      :afterClose="closeModal"
+      :maskClosable="false">
       <div class="add-tags">
         <div class="add-tags__input">
           <p class="add-tags__label">{{ $t('label.key') }}</p>
diff --git a/ui/src/views/network/IngressEgressRuleConfigure.vue b/ui/src/views/network/IngressEgressRuleConfigure.vue
index 0d3c4c76a25..96b6d9d68ce 100644
--- a/ui/src/views/network/IngressEgressRuleConfigure.vue
+++ b/ui/src/views/network/IngressEgressRuleConfigure.vue
@@ -114,7 +114,12 @@
       </template>
     </a-table>
 
-    <a-modal :title="$t('label.edit.tags')" v-model="tagsModalVisible" :footer="null" :afterClose="closeModal">
+    <a-modal
+      :title="$t('label.edit.tags')"
+      v-model="tagsModalVisible"
+      :footer="null"
+      :afterClose="closeModal"
+      :maskClosable="false">
       <a-spin v-if="tagsLoading"></a-spin>
 
       <div v-else>
diff --git a/ui/src/views/network/LoadBalancing.vue b/ui/src/views/network/LoadBalancing.vue
index f99e8b9e51c..dd362e29c50 100644
--- a/ui/src/views/network/LoadBalancing.vue
+++ b/ui/src/views/network/LoadBalancing.vue
@@ -139,7 +139,13 @@
       </template>
     </a-pagination>
 
-    <a-modal :title="$t('label.edit.tags')" v-model="tagsModalVisible" :footer="null" :afterClose="closeModal" class="tags-modal">
+    <a-modal
+      :title="$t('label.edit.tags')"
+      v-model="tagsModalVisible"
+      :footer="null"
+      :afterClose="closeModal"
+      :maskClosable="false"
+      class="tags-modal">
       <span v-show="tagsModalLoading" class="modal-loading">
         <a-icon type="loading"></a-icon>
       </span>
@@ -178,6 +184,7 @@
       v-model="stickinessModalVisible"
       :footer="null"
       :afterClose="closeModal"
+      :maskClosable="false"
       :okButtonProps="{ props: {htmlType: 'submit'}}">
 
       <span v-show="stickinessModalLoading" class="modal-loading">
@@ -245,7 +252,12 @@
       </a-form>
     </a-modal>
 
-    <a-modal :title="$t('label.edit.rule')" v-model="editRuleModalVisible" :afterClose="closeModal" @ok="handleSubmitEditForm">
+    <a-modal
+      :title="$t('label.edit.rule')"
+      v-model="editRuleModalVisible"
+      :afterClose="closeModal"
+      :maskClosable="false"
+      @ok="handleSubmitEditForm">
       <span v-show="editRuleModalLoading" class="modal-loading">
         <a-icon type="loading"></a-icon>
       </span>
@@ -276,6 +288,7 @@
 
     <a-modal
       :title="$t('label.add.vms')"
+      :maskClosable="false"
       v-model="addVmModalVisible"
       class="vm-modal"
       width="60vw"
diff --git a/ui/src/views/network/PortForwarding.vue b/ui/src/views/network/PortForwarding.vue
index 34ab63dd99f..940b487be06 100644
--- a/ui/src/views/network/PortForwarding.vue
+++ b/ui/src/views/network/PortForwarding.vue
@@ -123,7 +123,12 @@
       </template>
     </a-pagination>
 
-    <a-modal :title="$t('label.edit.tags')" v-model="tagsModalVisible" :footer="null" :afterClose="closeModal">
+    <a-modal
+      :title="$t('label.edit.tags')"
+      v-model="tagsModalVisible"
+      :footer="null"
+      :maskClosable="false"
+      :afterClose="closeModal">
       <span v-show="tagsModalLoading" class="tags-modal-loading">
         <a-icon type="loading"></a-icon>
       </span>
@@ -155,6 +160,7 @@
 
     <a-modal
       :title="$t('label.add.vm')"
+      :maskClosable="false"
       v-model="addVmModalVisible"
       class="vm-modal"
       width="60vw"
diff --git a/ui/src/views/network/StaticRoutesTab.vue b/ui/src/views/network/StaticRoutesTab.vue
index a61bc331f40..814dd07ca65 100644
--- a/ui/src/views/network/StaticRoutesTab.vue
+++ b/ui/src/views/network/StaticRoutesTab.vue
@@ -35,7 +35,7 @@
       </div>
     </div>
 
-    <a-modal title="Edit Tags" v-model="tagsModalVisible" :footer="null">
+    <a-modal title="Edit Tags" v-model="tagsModalVisible" :footer="null" :maskClosable="false">
       <a-spin v-if="tagsLoading"></a-spin>
 
       <div v-else>
diff --git a/ui/src/views/network/VpcTab.vue b/ui/src/views/network/VpcTab.vue
index 4739f6711d0..4f8ec4eaf44 100644
--- a/ui/src/views/network/VpcTab.vue
+++ b/ui/src/views/network/VpcTab.vue
@@ -72,6 +72,7 @@
         <a-modal
           v-model="modals.networkAcl"
           :title="$t('label.add.acl.list')"
+          :maskClosable="false"
           @ok="handleNetworkAclFormSubmit">
           <a-form @submit.prevent="handleNetworkAclFormSubmit" :form="networkAclForm">
             <a-form-item :label="$t('label.add.list.name')">
@@ -121,7 +122,11 @@
           </template>
         </a-pagination>
 
-        <a-modal v-model="modals.gateway" :title="$t('label.add.new.gateway')" @ok="handleGatewayFormSubmit">
+        <a-modal
+          v-model="modals.gateway"
+          :title="$t('label.add.new.gateway')"
+          :maskClosable="false"
+          @ok="handleGatewayFormSubmit">
           <a-spin :spinning="modals.gatewayLoading">
             <p>{{ $t('message.add.new.gateway.to.vpc') }}</p>
             <a-form @submit.prevent="handleGatewayFormSubmit" :form="gatewayForm">
@@ -242,7 +247,11 @@
             <span>{{ props.value }} / {{ $t('label.page') }}</span>
           </template>
         </a-pagination>
-        <a-modal v-model="modals.vpnConnection" :title="$t('label.create.vpn.connection')" @ok="handleVpnConnectionFormSubmit">
+        <a-modal
+          v-model="modals.vpnConnection"
+          :title="$t('label.create.vpn.connection')"
+          :maskClosable="false"
+          @ok="handleVpnConnectionFormSubmit">
           <a-spin :spinning="modals.vpnConnectionLoading">
             <a-form @submit.prevent="handleVpnConnectionFormSubmit" :form="vpnConnectionForm">
               <a-form-item :label="$t('label.vpncustomergatewayid')">
diff --git a/ui/src/views/network/VpcTiersTab.vue b/ui/src/views/network/VpcTiersTab.vue
index f0c5acd06b4..75eeb948479 100644
--- a/ui/src/views/network/VpcTiersTab.vue
+++ b/ui/src/views/network/VpcTiersTab.vue
@@ -154,7 +154,11 @@
       </a-list-item>
     </a-list>
 
-    <a-modal v-model="showCreateNetworkModal" :title="$t('label.add.new.tier')" @ok="handleAddNetworkSubmit">
+    <a-modal
+      v-model="showCreateNetworkModal"
+      :title="$t('label.add.new.tier')"
+      :maskClosable="false"
+      @ok="handleAddNetworkSubmit">
       <a-spin :spinning="modalLoading">
         <a-form @submit.prevent="handleAddNetworkSubmit" :form="form">
           <a-form-item :label="$t('label.name')">
@@ -195,7 +199,11 @@
       </a-spin>
     </a-modal>
 
-    <a-modal v-model="showAddInternalLB" :title="$t('label.add.internal.lb')" @ok="handleAddInternalLBSubmit">
+    <a-modal
+      v-model="showAddInternalLB"
+      :title="$t('label.add.internal.lb')"
+      :maskClosable="false"
+      @ok="handleAddInternalLBSubmit">
       <a-spin :spinning="modalLoading">
         <a-form @submit.prevent="handleAddInternalLBSubmit" :form="form">
           <a-form-item :label="$t('label.name')">
diff --git a/ui/src/views/network/VpnDetails.vue b/ui/src/views/network/VpnDetails.vue
index 75d522bf5aa..0159f6ec4bb 100644
--- a/ui/src/views/network/VpnDetails.vue
+++ b/ui/src/views/network/VpnDetails.vue
@@ -27,7 +27,12 @@
       </a-button>
     </div>
 
-    <a-modal v-model="disableVpn" :footer="null" oncancel="disableVpn = false" :title="$t('label.disable.vpn')">
+    <a-modal
+      v-model="disableVpn"
+      :footer="null"
+      oncancel="disableVpn = false"
+      :title="$t('label.disable.vpn')"
+      :maskClosable="false">
       <p>{{ $t('message.disable.vpn') }}</p>
 
       <a-divider></a-divider>
@@ -44,7 +49,12 @@
       {{ $t('label.enable.vpn') }}
     </a-button>
 
-    <a-modal v-model="enableVpn" :footer="null" onCancel="enableVpn = false" :title="$t('label.enable.vpn')">
+    <a-modal
+      v-model="enableVpn"
+      :footer="null"
+      onCancel="enableVpn = false"
+      :title="$t('label.enable.vpn')"
+      :maskClosable="false">
       <p>{{ $t('message.enable.vpn') }}</p>
 
       <a-divider></a-divider>
diff --git a/ui/src/views/plugins/quota/EditTariffValueWizard.vue b/ui/src/views/plugins/quota/EditTariffValueWizard.vue
index 8b867cef6f8..a43a6cffae8 100644
--- a/ui/src/views/plugins/quota/EditTariffValueWizard.vue
+++ b/ui/src/views/plugins/quota/EditTariffValueWizard.vue
@@ -23,6 +23,7 @@
     :confirmLoading="loading"
     :title="$t('label.quota.configuration')"
     :closable="true"
+    :maskClosable="false"
     :visible="showAction"
     @ok="submitTariff"
     @cancel="onClose"
diff --git a/ui/src/views/project/iam/ProjectRoleTab.vue b/ui/src/views/project/iam/ProjectRoleTab.vue
index 75a3124a8c9..303dad40ce0 100644
--- a/ui/src/views/project/iam/ProjectRoleTab.vue
+++ b/ui/src/views/project/iam/ProjectRoleTab.vue
@@ -61,7 +61,12 @@
             </a-tooltip>
           </span>
         </a-table>
-        <a-modal title="Edit Project Role" v-model="editModalVisible" :footer="null" :afterClose="closeAction">
+        <a-modal
+          title="Edit Project Role"
+          v-model="editModalVisible"
+          :footer="null"
+          :afterClose="closeAction"
+          :maskClosable="false">
           <a-form
             :form="form"
             @submit="updateProjectRole"
@@ -103,7 +108,12 @@
             </span>
           </a-form>
         </a-modal>
-        <a-modal title="Create Project Role" v-model="createModalVisible" :footer="null" :afterClose="closeAction">
+        <a-modal
+          title="Create Project Role"
+          v-model="createModalVisible"
+          :footer="null"
+          :afterClose="closeAction"
+          :maskClosable="false">
           <a-form
             :form="form"
             @submit="createProjectRole"