Make resource deletion safer with name confirmation

[sudo87]

Description

This PR will allow enforcing user to key in resource name before proceeding with Delete.

It can be enabled by adding a param "requireNameConfirmation: true" for the delete api section

{
      api: 'deleteProject',
      ........
      ........
      requireNameConfirmation: true,
      .........
}

Types of changes

• Breaking change (fix or feature that would cause existing functionality to change)
• New feature (non-breaking change which adds functionality)
• Bug fix (non-breaking change which fixes an issue)
• Enhancement (improves an existing feature and functionality)
• Cleanup (Code refactoring and cleanup, that may add test cases)
• Build/CI
• Test (unit or integration test code)

Feature/Enhancement Scale or Bug Severity

Feature/Enhancement Scale

• Major
• Minor

Bug Severity

• BLOCKER
• Critical
• Major
• Minor
• Trivial

Screenshots (if appropriate):

How Has This Been Tested?

How did you try to break this feature and the system with this change?

[Copilot]

Pull request overview

This PR introduces an optional UI safety mechanism for destructive actions: when enabled per action (requireNameConfirmation: true), the user must type the exact resource name before a delete can proceed.

Changes:

• Added a requireNameConfirmation flow to AutogenView.vue, including input capture, submit disabling, and a submit-time guard.
• Enabled requireNameConfirmation for the deleteProject action in the Project section config.
• Added an English locale string explaining the confirmation requirement.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 5 comments.

File	Description
ui/src/views/AutogenView.vue	Adds the name-confirmation UI/logic and disables submission until the entered name matches.
ui/src/config/section/project.js	Enables the feature for deleteProject via requireNameConfirmation: true.
ui/public/locales/en.json	Adds the confirmation helper message text.

Comments suppressed due to low confidence (1)

ui/src/views/AutogenView.vue:939

• The code now returns direct button props from okButtonProps (e.g. { type: 'primary' }), but getCancelProps() still returns { props: { type: ... } }. With ant-design-vue v3, ok-button-props/cancel-button-props expect plain button props, so the extra props wrapper is likely ignored and makes behavior inconsistent. Consider updating getCancelProps() (and similar helpers elsewhere) to return plain button props.

    okButtonProps () {
      if (this.currentAction?.requireNameConfirmation && !(this.currentAction.groupAction && this.selectedRowKeys.length > 0)) {
        const isConfirmed = this.actionConfirmText.trim() === this.resource?.name?.trim()
        return { type: 'primary', disabled: !isConfirmed }
      }
      if (this.selectedRowKeys.length > 0 && this.currentAction?.groupAction) {
        return {}
      }
      return { type: 'primary' }
    },
    isSubmitDisabled () {
      if (this.currentAction?.requireNameConfirmation && !(this.currentAction.groupAction && this.selectedRowKeys.length > 0)) {
        return this.actionConfirmText.trim() !== this.resource?.name?.trim()
      }
      return false
    }
  },
  methods: {
    getStyle () {
      if (['snapshot', 'vmsnapshot', 'publicip'].includes(this.$route.name)) {
        return 'table-cell'
      }
      return 'inline-flex'
    },
    getCancelProps () {
      if (this.selectedRowKeys.length > 0 && this.currentAction?.groupAction) {
        return { props: { type: 'primary' } }
      } else {
        return { props: { type: 'default' } }
      }
    },

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 18.07%. Comparing base (1e512ab) to head (9f44473).

Additional details and impacted files

@@             Coverage Diff              @@
##               main   #13104      +/-   ##
============================================
- Coverage     18.08%   18.07%   -0.01%     
+ Complexity    16706    16700       -6     
============================================
  Files          6037     6037              
  Lines        542437   542440       +3     
  Branches      66420    66422       +2     
============================================
- Hits          98088    98051      -37     
- Misses       433333   433372      +39     
- Partials      11016    11017       +1     

Flag	Coverage Δ
uitests	3.52% <ø> (-0.01%)	⬇️
unittests	19.23% <ø> (-0.01%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[sudo87]

@blueorangutan ui

[blueorangutan]

@sudo87 a Jenkins job has been kicked to build UI QA env. I'll keep you posted as I make progress.

[blueorangutan]

UI build: ✔️
Live QA URL: https://qa.cloudstack.cloud/simulator/pr/13104 (QA-JID-915)

[harikrishna-patnala]

LGTM, I tested it as well in my env

1. Added couple of projects
2. Tried deleting them, the UI popup asked for name confirmations.
3. Only after giving the case sensitive project name, then only it allowed to delete the project
4. Cleanup flag operation remains the same.

[vishesh92]

Why is this not required?

[sudo87]

This is not required as footer is set null.

#13104 (comment)