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