Log reviewer response

[MrRob100]

issue pkp/pkp-lib#9893

[jardakotesovec]

@MrRob100 After code improvements I will also ask you to add it to storybook, so we have that modal snapshoted, which helps with awarness that such modal do exist and it also helps with preventing some regressions over time as its screenshots are always compared to baseline.

It will require following

• create stories file, which need to have button which opens this modal via play function. That what ensures that opened modal is screenshoted
• create mdx file with simple description, so it does appear in storybook - and it automatically is able to pick up the props and show them there

One of the best examples is ReviewerSubmissionPage.stories, as that also have modals that are being opened via play function:

export const OpenModalAccepted = {
	play: async ({canvasElement}) => {
		// Assigns canvas to the component root element
		const canvas = within(canvasElement);
		const user = userEvent.setup();

		await user.click(canvas.getByText('Read Round 1 Review'));
	},
	decorators: [
		() => ({
                        // this needs to be adjusted based on your specific modal to ensure the whole modal gets screenshoted
			template: '<div style="height: 1600px"><story/></div>',
		}),
	],
};

Happy to give more guidance on mattermost for storybook if needed, there is just couple of things to watch out so the modal gets properly screenshoted.

[MrRob100]

I have redone this using the pkp-form component. In order to make the form footer sit on the bottom of the modal, I have had to add some styling to the Form component. I have checked and it doesn’t seem to have knock-on effects on the other forms. Also, there doesn’t seem to be support for a cancel button in the pkp-form component which is why I have left that out. I can alter it to allow for one if we like. Thoughts @jardakotesovec @Devika008

[jardakotesovec]

Here is example for storybook - 815ea2a

This ensures that if you open that story it opens the modal - and as result it gets automatically screenshotted in CI to ensure it looks good over time.

You can see it in storybook (cd lib/ui-library && npm run storybook).

Please just refine it a bit with some description. Otherwise I think one simple story suffice.

[jardakotesovec]

@MrRob100 Thanks! Looking good, just need to do some testing. Would you be able to rebase it, so its up to date with main branches? Having difficulties to run it. There has been lots of merged lots of changes recently.

[jardakotesovec]

Thanks for the storybook addition. Just couple small tweaks! And also make sure it does not include changes outside of this work. Thank you!

[jardakotesovec]

Thanks for the updates, looks great!