[dashboard] improve modal

the modal dialog should
- close on ESC
- close on click outside modal but not within
- handle enter

Author: svenefftinge

components/dashboard/src/components/Modal.tsx

@@ -1,27 +1,57 @@
+import { Disposable, DisposableCollection } from "@gitpod/gitpod-protocol";
+import { useEffect } from "react";
+
 export default function Modal(props: {
     children: React.ReactChild[] | React.ReactChild,
     visible: boolean,
     closeable?: boolean,
     className?: string,
-    onClose: () => void
+    onClose: () => void,
+    onEnter?: () => boolean
 }) {
+    const disposable = new DisposableCollection();
+    const close = () => {
+        disposable.dispose();
+        props.onClose();
+    }
+    useEffect(() => {
+        if (!props.visible) {
+            return;
+        }
+        const keyHandler = (k: globalThis.KeyboardEvent) => {
+            if (k.eventPhase === 1 /* CAPTURING */) {
+                if (k.key === 'Escape') {
+                    close();
+                }
+                if (k.key === 'Enter') {
+                    if (props.onEnter) {
+                        if (props.onEnter() === false) {
+                            return;
+                        }
+                    }
+                    close();
+                    k.stopPropagation();
+                }
+            }
+        }
+        window.addEventListener('keydown', keyHandler, { capture: true });
+        disposable.push(Disposable.create(()=> window.removeEventListener('keydown', keyHandler)));
+    });
     if (!props.visible) {
         return null;
     }
-    setTimeout(() => window.addEventListener('click', props.onClose, { once: true }), 0);
     return (
-        <div className="fixed top-0 left-0 bg-black bg-opacity-70 z-50 w-screen h-screen" >
+        <div className="fixed top-0 left-0 bg-black bg-opacity-70 z-50 w-screen h-screen" onClick={close}>
             <div className="w-screen h-screen align-middle" style={{display: 'table-cell'}}>
-                <div className={"relative bg-white border rounded-xl p-6 max-w-lg mx-auto text-gray-600" + props.className}>
+                <div className={"relative bg-white border rounded-xl p-6 max-w-lg mx-auto text-gray-600" + props.className} onClick={e => e.stopPropagation()}>
                     {props.closeable !== false && (
-                        <div className="absolute right-9 top-8 cursor-pointer" onClick={props.onClose}>
+                        <div className="absolute right-7 top-6 cursor-pointer hover:bg-gray-200 rounded-md p-2" onClick={close}>
                             <svg version="1.1" width="14px" height="14px"
                                 viewBox="0 0 100 100">
                                 <line x1="0" y1="0" x2="100" y2="100" stroke="currentColor" strokeWidth="10px" />
                                 <line x1="0" y1="100" x2="100" y2="0" stroke="currentColor" strokeWidth="10px" />
                             </svg>
                         </div>
-
                     )}
                     {props.children}
                 </div>

components/dashboard/src/workspaces/WorkspaceEntry.tsx

@@ -133,17 +133,20 @@ export function WorkspaceEntry({ desc, model }: { desc: WorkspaceInfo, model: Wo
         <Modal visible={isChangesModalVisible} onClose={() => setChangesModalVisible(false)}>
             {getChangesPopup(pendingChanges)}
         </Modal>
-        <Modal visible={isModalVisible} onClose={() => setModalVisible(false)}>
+        <Modal visible={isModalVisible} onClose={() => setModalVisible(false)} onEnter={() => {model.deleteWorkspace(ws.id); return true;}}>
             <div>
-                <h3>Delete {ws.id}</h3>
-                <div className="py-4">
-                    <p>Do you really want to delete this workspace?</p>
+                <h3>Delete Workspace</h3>
+                <div className="border-t border-b border-gray-200 mt-2 -mx-6 px-6 py-2">
+                    <p className="mt-1 mb-2 text-base">Are you sure you want to delete this workspace?</p>
+                    <div className="w-full p-4 mb-2 bg-gray-100 rounded-xl group bg-gray-100">
+                        <p className="text-base text-gray-800 font-semibold">{ws.id}</p>
+                        <p>{ws.description}</p>
+                    </div>
                 </div>
-                <div className="flex">
-                    <div className="flex-1"></div>
+                <div className="flex justify-end mt-5">
                     <button className="cursor-pointer px-3 py-2 text-white text-sm rounded-md border-2 border-red-800 bg-red-600 hover:bg-red-800"
                         onClick={() => model.deleteWorkspace(ws.id)}>
-                        Delete
+                        Delete Workspace
                     </button>
                 </div>
             </div>