lib: Add error message when showing multiple Dialogs

With human user/browser interaction there can only ever be one Modal
dialog at a time. However, our tests/CDP driver does not have that
restriction, tests can happily click on main page buttons while a dialog
is open.

This can lead to situations where a test opens a dialog, and then opens
a second one (which will overwrite `WithDialogs.Dialog.dialog` with the
new component) without waiting for the first one to close. Then when the
first dialog handler finally calls `.close()`, it will unexpectedly
close the *second* dialog instead.

These races are a pain to debug [1]. Make them obvious with an error message
which shows both the old and the new dialog element. As our tests now
fail on console.errors(), that will detect/prevent similar race
conditions in our tests.

[1] cockpit-project/cockpit-machines#1292

pkg/lib/dialogs.jsx

@@ -106,7 +106,14 @@ export const WithDialogs = ({ children }) => {
     const [dialog, setDialog] = useState(null);
 
     const Dialogs = {
-        show: setDialog,
+        show: component => {
+            if (dialog !== null)
+                console.error("Dialogs.show() called for",
+                              JSON.stringify(component),
+                              "while a dialog is already open:",
+                              JSON.stringify(dialog));
+            setDialog(component);
+        },
         close: () => setDialog(null),
         isActive: () => dialog !== null
     };