feat: Exit Survey Preview Mode

[JiyaGupta-cs]

What this PR does

This pull request adds an Exit button to exit the Survey Preview Mode, addressing the issue where users currently have no clear way to exit preview mode and return back to editing mode.

Fixes #6166

Changes:

• Added an "Exit Preview Mode" button at the bottom of the preview page.
• Positioned the button alongside the "Preview Mode" label for visibility.

Steps to Test:

• Navigate to the survey page (/survey).
• Click "Edit Survey" to open the editor.
• Click "Preview Survey" to enter preview mode.
• The "Exit Preview Mode" button appears at the bottom.
• Click the button and it returns you back to the editing mode.

Impact:

Provides a clear way for users to exit preview mode and return back to the editing mode.

Screenshots

Before:

After:

[ragesoss]

My assumption for the Exit button is that it would exit preview mode and leave the user in non-preview mode for taking the survey, rather than going to the survey Edit view. I suggest changing the button label to make it clear, such as "Edit Survey".

[JiyaGupta-cs]

My assumption for the Exit button is that it would exit preview mode and leave the user in non-preview mode for taking the survey, rather than going to the survey Edit view. I suggest changing the button label to make it clear, such as "Edit Survey".

I think Exit should be the label
Because other wise it will be confusing when the user enters the preview mode, he might wonder how to get back
So it should be "Exit" or "Back to Editing"

[ragesoss]

"Exit" is not explicit enough about what behavior to expect. There are also several different ways of entering preview mode, which exists for both Surveys and Question Groups, and can be launched from the Survey index and the Question Group index. So 'Back to Editing' may not make sense, if the user didn't start from the Survey Edit view. I think "Edit Survey" would be clear enough.

[JiyaGupta-cs]

Got it

[JiyaGupta-cs]

Screencast.from.2025-02-07.02-19-04.webm

[ragesoss]

Looks good! One further improvement could be to add a link to 'Edit Question' that goes to the edit view for whatever the current question is. I'm not sure how complex that would be, though, as the survey state (eg, the identity of the current question) is handled in client-side javascript that isn't part of React state.