diff --git a/ui/public/locales/en.json b/ui/public/locales/en.json
index e2045eba8dfe..dff8db3751e3 100644
--- a/ui/public/locales/en.json
+++ b/ui/public/locales/en.json
@@ -795,6 +795,7 @@
"label.delete.ciscoasa1000v": "Delete CiscoASA1000v",
"label.delete.ciscovnmc.resource": "Delete CiscoVNMC resource",
"label.delete.condition": "Delete condition",
+"label.delete.confirmation": "Enter the exact resource name to proceed with deletion",
"label.delete.custom.action": "Delete Custom Action",
"label.delete.dedicated.vlan.range": "Deleted dedicated VLAN/VNI range.",
"label.delete.domain": "Delete domain",
diff --git a/ui/src/config/section/project.js b/ui/src/config/section/project.js
index 5a1f5f71c81d..c08cb8dce4dc 100644
--- a/ui/src/config/section/project.js
+++ b/ui/src/config/section/project.js
@@ -162,6 +162,7 @@ export default {
},
groupAction: true,
popup: true,
+ requireNameConfirmation: true,
groupMap: (selection, values) => { return selection.map(x => { return { id: x, cleanup: values.cleanup || null } }) },
args: (record, store) => {
const fields = []
diff --git a/ui/src/views/AutogenView.vue b/ui/src/views/AutogenView.vue
index f4aa842d8f2b..272686910fdc 100644
--- a/ui/src/views/AutogenView.vue
+++ b/ui/src/views/AutogenView.vue
@@ -195,8 +195,6 @@
:footer="null"
style="top: 20px;"
:width="modalWidth"
- :ok-button-props="getOkProps()"
- :cancel-button-props="getCancelProps()"
:confirmLoading="actionLoading"
@cancel="cancelAction"
centered
@@ -270,8 +268,18 @@
-
-
+
+ {{ $t('label.ok') }}
@@ -686,6 +695,7 @@ export default {
confirmDirty: false,
firstIndex: 0,
modalWidth: '30vw',
+ actionConfirmText: '',
promises: []
}
},
@@ -893,6 +903,12 @@ export default {
return 'active'
}
return 'self'
+ },
+ isSubmitDisabled () {
+ if (this.currentAction?.requireNameConfirmation && !(this.currentAction.groupAction && this.selectedRowKeys.length > 0)) {
+ return this.actionConfirmText.trim() !== this.resource?.name?.trim()
+ }
+ return false
}
},
methods: {
@@ -902,19 +918,6 @@ export default {
}
return 'inline-flex'
},
- getOkProps () {
- if (this.selectedRowKeys.length > 0 && this.currentAction?.groupAction) {
- } else {
- return { props: { type: 'primary' } }
- }
- },
- getCancelProps () {
- if (this.selectedRowKeys.length > 0 && this.currentAction?.groupAction) {
- return { props: { type: 'primary' } }
- } else {
- return { props: { type: 'default' } }
- }
- },
switchProject (projectId) {
if (!projectId || !projectId.length || projectId.length !== 36) {
return
@@ -1303,6 +1306,7 @@ export default {
this.actionLoading = false
this.showAction = false
this.currentAction = {}
+ this.actionConfirmText = ''
},
cancelAction () {
eventBus.emit('action-closing', { action: this.currentAction })
@@ -1360,6 +1364,7 @@ export default {
this.currentAction = action
this.currentAction.params = store.getters.apis[this.currentAction.api].params
this.resource = action.resource
+ this.actionConfirmText = ''
this.$emit('change-resource', this.resource)
var paramFields = this.currentAction.params
paramFields.sort(function (a, b) {
@@ -1642,6 +1647,12 @@ export default {
},
handleSubmit (e) {
if (this.actionLoading) return
+
+ if (this.currentAction?.requireNameConfirmation && !(this.currentAction.groupAction && this.selectedRowKeys.length > 0)) {
+ if (this.actionConfirmText.trim() !== this.resource?.name?.trim()) {
+ return
+ }
+ }
this.promises = []
if (!this.dataView && this.currentAction.groupAction && this.selectedRowKeys.length > 0) {
if (this.selectedRowKeys.length > 0) {