feat(desktop): add save button for new & edit connection

[XL-YiBai]

PR Checklist

If you have any questions, you can refer to the Contributing Guide

What is the current behavior?

When you want to make a new connection and fill in some (but not necessarly all) fields you can't temporailty save it and complement it later on. You can only choose Connect which is not always what you want. The same goes for editing connections.

Issue Number

#735

What is the new behavior?

When creating or editing connection information, the current information can be saved. Instead of clicking the Connect button to establish a connection.

Does this PR introduce a breaking change?

• Yes
• No

Specific Instructions

Are there any specific instructions or things that should be known prior to review?

Other information

[Red-Asuka]

@XL-YiBai Can you provide a screenshot after the modification?

[Red-Asuka]

Looking good, can we also add this feature to the MQTTX Web?

[XL-YiBai]

@XL-YiBai Can you provide a screenshot after the modification?

I just uploaded a demonstration video. 😆
Create a new connection also has the same effect.

[XL-YiBai]

Looking good, can we also add this feature to the MQTTX Web?

Of course, I will complete it in my free time.

[ysfscream]

@XL-YiBai

Thank you for your contribution; it indeed looks like a valuable enhancement. However, for MQTTX, modifying parameters and saving without immediate connection isn't a frequent operation. Thus, we propose integrating this functionality via a dropdown menu to maintain a cleaner interface. Specifically, we can have the "Connect" button for standard operations on the left, and a dropdown menu on the right with an option for "Save Only". This approach benefits us by:

1. Keeping the UI Clean: Reducing button clutter for a more focused user experience.
2. Intuitive Functionality: The dropdown menu clearly indicates additional actions without overwhelming the main interface.
3. Streamlining Common Processes: Ensures a smooth flow for the most common action—connecting—while offering flexibility for different user needs.

Resources:

https://element-plus.org/zh-CN/component/dropdown.html

the Right icon:

the UI design:

[XL-YiBai]

@ysfscream Thank you for your valuable suggestion and detailed design proposal. I will incorporate the suggested changes into the code.

[XL-YiBai]

[ysfscream]

@ni00, welcome to review this PR. Perhaps you could provide some more useful suggestions. 😄

[ysfscream]

LGTM! Thanks