feat(ui): allow terminate sync when sync start and terminate sync apps in list page

[linghaoSu]

fix #18549

Add a button to terminate synchronisation more conveniently on the detail page.

cliped-new-720.mov

Add batch terminate sync panel on list page

cliped-480.mov

Checklist:

• Either (a) I've created an enhancement proposal and discussed it with the community, (b) this is a bug fix, or (c) this does not need to be in the release notes.
• The title of the PR states what changed and the related issues number (used for the release note).
• The title of the PR conforms to the Toolchain Guide
• I've included "Closes [ISSUE #]" or "Fixes [ISSUE #]" in the description to automatically close the associated issue.
• I've updated both the CLI and UI to expose my feature, or I plan to submit a second PR with them.
• Does this PR require documentation updates?
• I've updated documentation as required by this PR.
• I have signed off all my commits as required by DCO
• I have written unit and/or e2e tests for my change. PRs without these are unlikely to be merged.
• My build is green (troubleshooting builds).
• My new feature complies with the feature status guidelines.
• I have added a brief description of why this PR is necessary and/or what this PR solves.
• Optional. My organization is added to USERS.md.
• Optional. For bug fixes, I've indicated what older releases this fix should be cherry-picked into (this may or may not happen depending on risk/complexity).

[bunnyshell]

🔴 Preview Environment stopped on Bunnyshell

See: Environment Details | Pipeline Logs

Available commands (reply to this comment):

• 🔵 /bns:start to start the environment
• 🚀 /bns:deploy to redeploy the environment
• ❌ /bns:delete to remove the environment

[bunnyshell]

✅ Preview Environment created on Bunnyshell but will not be auto-deployed

See: Environment Details

Available commands (reply to this comment):

• 🚀 /bns:deploy to deploy the environment

[todaywasawesome]

Subscribing 👀

[agaudreault]

It looks good! I would make the popup more specific to the sync. Maybe "Terminate Sync" instead of "Terminate Operation" because we lose context on what was the operation that we are terminating when the popup is open.

[linghaoSu]

It looks good! I would make the popup more specific to the sync. Maybe "Terminate Sync" instead of "Terminate Operation" because we lose context on what was the operation that we are terminating when the popup is open.

@agaudreault Agreed, the description of the pop-up prompt for terminating the sync on the detail page is now a bit more precise

[linghaoSu]

Hi，@todaywasawesome @agaudreault I think this feature is ready to be reviewed, can you please help me review this pr?

[andrii-korotkov-verkada]

The naming is a bit confusing. ApplicationsTerminateSyncPanel suggests it's only for termination of sync, so why do we confirm sync and check replace option? If we need to, shall we check prune as well?

[andrii-korotkov-verkada]

@linghaoSu, I've asked for review in CNCF Slack. Can you rebase on the latest master and re-test, please?