Zulip-desktop: Add an option to close the issue reporting modal

[akashnimare]

Just received this from a user:

Originally opened the window to report another issue, then realized I don't have one piece of information on hand, and now can't figure out how to close the dialog without reporting something. I'm using Windows Desktop App 5.0.0 at the moment.

The modal will be closed if you click on the outside container but we should add "X" or something to make it clear.

[akashnimare]

cc @priyank-p since we are using "SendFeedback" under the hood.

[abhigyank]

We could just add a "cancel" button or something similar near the report issue button, if it's easier to implement.

[manavmehta]

@akashnimare Plus, pressing escape key doesn't close it which is pretty intuitional (the operation)
We have to add that too

[PawBud]

I am sorry, I am a new contributor so can we just post a PR that fixes the aforementioned problem or is it that @akashnimare is working on it & simply asking for some help?

[abhigyank]

@PawBud you can go ahead and create a PR for fixing this.

[PawBud]

thanks a lot for replying so fast; I'll surely ask here if I need any help with it :) @abhigyank

[akashnimare]

@PawBud let me know if you are up for this :)

[PawBud]

yes thank you @akashnimare I think I'll be able to resolve the issue; I hope you can help me with my doubts if I get stuck anywhere :)

[PawBud]

@zulipbot claim

[zulipbot]

Welcome to Zulip, @PawBud! We just sent you an invite to collaborate on this repository at https://github.com/zulip/zulip-desktop/invitations. Please accept this invite in order to claim this issue and begin a fun, rewarding experience contributing to Zulip!

Here's some tips to get you off to a good start:

• Join me on the Zulip developers' server, to get help, chat about this issue, and meet the other developers.
• Unwatch this repository, so that you don't get 100 emails a day.

As you work on this issue, you'll also want to refer to the Zulip code contribution guide, as well as the rest of the developer documentation on that site.

See you on the other side (that is, the pull request side)!

[PawBud]

@priyank-p I read the docs for https://github.com/electron-elements/send-feedback & I also read this doc https://github.com/electron-elements/send-feedback/blob/master/docs/customizing.md. It seems that it doesn't say anything about "adding a button". Does that mean that in the send-feedback element I can't add a button? If It's possible then can you pls guide me to a blog or a doc that specifies how the aforementioned objective can be accomplished? Thanks :)

[PawBud]

Funny enough, I did try something like this and obviously it didn't work

[priyank-p]

@PawBud send-feedback project isn't designed to have a close button. The custom element was not designed to be used as a modal but we use it as a modal in this project and we should have been careful about the implication of that decision on the UX when we did so.

To answer your question about how this issue can be solved. Let's add a button in the send-feedback project and I will do a release and we will pull the updated version here. I think we want this behind a flag of some sort. If you are up for adding a button and design that look good I can do the rest of work to get this behind a flag. The HTML and CSS is at https://github.com/electron-elements/send-feedback/blob/master/lib/templates.js.

[PawBud]

I won’t mind adding the button in the electron element 🙂. I shall help you add it then. Also, Thanks for the solution

Here is the PR