[Website] Hide Settings menu after clicking "Restore from .zip

[ajotka]

Motivation for the change, related issues

Issue #1903

Implementation details

Because Modal was in the same component as Dropdown Menu it was always visible when Dropdown was open (and disappears when I tried to force close menu item, because of unmounting).

So I decided to wrap dropdown with context and move there whole logic.

Testing Instructions (or ideally a Blueprint)

Just open Playground and go to settigns.

Screen with results

[adamziel]

Nice! Thank you for contributing!

One thing that stood out to me is the modal provider. The other buttons in that dropdown menu use the redux dispatch(setActiveModal('error-report')); to set the active modal. Could this one do the same? Then it could be displayed in layout.tsx:

wordpress-playground/packages/playground/website/src/components/layout/index.tsx

Lines 163 to 169 in 8484cce

	if (currentModal === 'log') {
	return <LogModal />;
	} else if (currentModal === 'error-report') {
	return <ErrorReportModal blueprint={blueprint} />;
	} else if (currentModal === 'start-error') {
	return <StartErrorModal />;
	}

[ajotka]

@adamziel Improvements are ready.
Not sure why one test is failing, but I can't re-run them.

[adamziel]

That failing tests is an issue with GitHub CI setup, I just restarted it.

[adamziel]

The code change looks good to me, let me also loop in @brandonpayton for another review and merging. Thank you so much for contributing @ajotka !

[adamziel]

I'll go ahead and merge, @brandonpayton if you'll notice something later on feel free to still share your feedback

[adamziel]

Thank you so much for your contribution @ajotka and congratulations on your first merged PR! 🎉

[brandonpayton]

I'll go ahead and merge, @brandonpayton if you'll notice something later on feel free to still share your feedback

Thanks, Adam. I don't have any other feedback except that it is nice this PR moves the modal definition out of the button module. Thanks, @ajotka!