[dashboard] add modal_dismiss tracking event

components/dashboard/src/Setup.tsx

@@ -38,6 +38,7 @@ export default function Setup() {
     return (
         <div>
             {!showModal && (
+                // TODO: Use title and buttons props
                 <Modal visible={true} onClose={() => {}} closeable={false}>
                     <h3 className="pb-2">Welcome to Gitpod 🎉</h3>
                     <div className="border-t border-b border-gray-200 dark:border-gray-800 mt-2 -mx-6 px-6 py-4">

components/dashboard/src/components/Modal.tsx

@@ -5,8 +5,13 @@
  */
 
 import { useEffect } from "react";
+import { getGitpodService } from "../service/service";
+
+type CloseModalManner = "esc" | "enter" | "x";
 
 export default function Modal(props: {
+    // specify a key if having the same title and window.location
+    specify?: string;
     title?: string;
     buttons?: React.ReactChild[] | React.ReactChild;
     children: React.ReactChild[] | React.ReactChild;
@@ -16,20 +21,35 @@ export default function Modal(props: {
     onClose: () => void;
     onEnter?: () => boolean;
 }) {
+    const closeModal = (manner: CloseModalManner) => {
+        props.onClose();
+        getGitpodService()
+            .server.trackEvent({
+                event: "modal_dismiss",
+                properties: {
+                    manner,
+                    title: props.title,
+                    specify: props.specify,
+                    path: window.location.pathname,
+                },
+            })
+            .then()
+            .catch(console.error);
+    };
     const handler = (evt: KeyboardEvent) => {
         if (evt.defaultPrevented) {
             return;
         }
         if (evt.key === "Escape") {
-            props.onClose();
+            closeModal("esc");
         }
         if (evt.key === "Enter") {
             if (props.onEnter) {
                 if (props.onEnter()) {
-                    props.onClose();
+                    closeModal("enter");
                 }
             } else {
-                props.onClose();
+                closeModal("enter");
             }
         }
     };
@@ -60,7 +80,7 @@ export default function Modal(props: {
                     {props.closeable !== false && (
                         <div
                             className="absolute right-7 top-6 cursor-pointer text-gray-800 dark:text-gray-100 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-md p-2"
-                            onClick={props.onClose}
+                            onClick={() => closeModal("x")}
                         >
                             <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" />

components/dashboard/src/feedback-form/FeedbackModal.tsx

@@ -13,6 +13,7 @@ function FeedbackFormModal(props: { onClose: () => void }) {
     };
 
     return (
+        // TODO: Use title and buttons props
         <Modal visible={true} onClose={onClose}>
             <FeedbackComponent
                 onClose={onClose}

components/dashboard/src/projects/ProjectVariables.tsx

@@ -121,6 +121,7 @@ function AddVariableModal(props: { project?: Project; onClose: () => void }) {
     };
 
     return (
+        // TODO: Use title and buttons props
         <Modal
             visible={true}
             onClose={props.onClose}

components/dashboard/src/settings/EnvironmentVariables.tsx

@@ -53,6 +53,7 @@ function AddEnvVarModal(p: EnvVarModalProps) {
     };
 
     return (
+        // TODO: Use title and buttons props
         <Modal visible={true} onClose={p.onClose} onEnter={save}>
             <h3 className="mb-4">{isNew ? "New" : "Edit"} Variable</h3>
             <div className="border-t border-b border-gray-200 dark:border-gray-800 -mx-6 px-6 py-4 flex flex-col">

components/dashboard/src/settings/Integrations.tsx

@@ -294,6 +294,7 @@ function GitProviders() {
             )}
 
             {editModal && (
+                // TODO: Use title and buttons props
                 <Modal visible={true} onClose={() => setEditModal(undefined)}>
                     <h3 className="pb-2">Edit Permissions</h3>
                     <div className="border-t border-b border-gray-200 dark:border-gray-800 mt-2 -mx-6 px-6 py-4">
@@ -744,6 +745,7 @@ export function GitIntegrationModal(
     };
 
     return (
+        // TODO: Use title and buttons props
         <Modal visible={!!props} onClose={onClose} closeable={props.closeable}>
             <h3 className="pb-2">{mode === "new" ? "New Git Integration" : "Git Integration"}</h3>
             <div className="space-y-4 border-t border-b border-gray-200 dark:border-gray-800 mt-2 -mx-6 px-6 py-4">

components/dashboard/src/settings/Plans.tsx

@@ -727,6 +727,7 @@ export default function () {
                     </a>
                 </InfoBox>
                 {!!confirmUpgradeToPlan && (
+                    // TODO: Use title and buttons props
                     <Modal visible={true} onClose={() => setConfirmUpgradeToPlan(undefined)}>
                         <h3>Upgrade to {confirmUpgradeToPlan.name}</h3>
                         <div className="border-t border-b border-gray-200 dark:border-gray-800 mt-4 -mx-6 px-6 py-2">
@@ -755,6 +756,7 @@ export default function () {
                     </Modal>
                 )}
                 {!!confirmDowngradeToPlan && (
+                    // TODO: Use title and buttons props
                     <Modal visible={true} onClose={() => setConfirmDowngradeToPlan(undefined)}>
                         <h3>Downgrade to {confirmDowngradeToPlan.name}</h3>
                         <div className="border-t border-b border-gray-200 dark:border-gray-800 mt-4 -mx-6 px-6 py-2">
@@ -784,6 +786,7 @@ export default function () {
                     </Modal>
                 )}
                 {isConfirmCancelDowngrade && (
+                    // TODO: Use title and buttons props
                     <Modal visible={true} onClose={() => setIsConfirmCancelDowngrade(false)}>
                         <h3>Cancel downgrade and stay with {currentPlan.name}</h3>
                         <div className="border-t border-b border-gray-200 dark:border-gray-800 mt-4 -mx-6 px-6 py-2">
@@ -800,6 +803,7 @@ export default function () {
                     </Modal>
                 )}
                 {!!teamClaimModal && (
+                    // TODO: Use title and buttons props
                     <Modal visible={true} onClose={() => setTeamClaimModal(undefined)}>
                         <h3 className="pb-2">Team Invitation</h3>
                         <div className="border-t border-b border-gray-200 dark:border-gray-800 mt-2 -mx-6 px-6 py-4">

components/dashboard/src/settings/SelectAccountModal.tsx

@@ -45,6 +45,7 @@ export function SelectAccountModal(
     };
 
     return (
+        // TODO: Use title and buttons props
         <Modal visible={true} onClose={props.close}>
             <h3 className="pb-2">Select Account</h3>
             <div className="border-t border-b border-gray-200 mt-2 -mx-6 px-6 py-4">

components/dashboard/src/settings/SelectIDE.tsx

@@ -109,7 +109,7 @@ export default function SelectIDE(props: SelectIDEProps) {
                                 </InfoBox>
                             )}
 
-                            <p className="text-left w-full text-gray-500">
+                            <p className="text-left w-full text-gray-500 dark:text-gray-400">
                                 The <strong>JetBrains desktop IDEs</strong> are currently in beta.{" "}
                                 <a
                                     href="https://github.com/gitpod-io/gitpod/issues/6576"

components/dashboard/src/settings/SelectIDEModal.tsx

@@ -38,23 +38,23 @@ export default function (props: SelectIDEModalProps) {
     };
 
     return (
-        <Modal visible={visible} onClose={handleContinue} closeable={true} className="_max-w-xl">
-            <h3 className="pb-2">Select Editor</h3>
-            <div className="border-t border-b border-gray-200 dark:border-gray-800 mt-2 -mx-6 px-6 py-4">
-                <p className="text-gray-500 text-base pb-3">
-                    Choose the editor for opening workspaces. You can always change later the editor in{" "}
-                    <Link to={"/preferences"} className="gp-link">
-                        user preferences
-                    </Link>
-                    .
-                </p>
-                <SelectIDE updateUserContext={false} location={props.location} />
-            </div>
-            <div className="flex justify-end mt-6">
-                <button onClick={handleContinue} className="ml-2">
-                    Continue
-                </button>
-            </div>
+        <Modal
+            title="Select Editor"
+            specify={props.location}
+            visible={visible}
+            onClose={handleContinue}
+            closeable={true}
+            className="_max-w-xl"
+            buttons={<button onClick={handleContinue}>Continue</button>}
+        >
+            <p className="text-gray-500 dark:text-gray-400 text-base pb-3">
+                Choose the editor for opening workspaces. You can always change later the editor in{" "}
+                <Link to={"/preferences"} className="gp-link">
+                    user preferences
+                </Link>
+                .
+            </p>
+            <SelectIDE updateUserContext={false} location={props.location} />
         </Modal>
     );
 }

components/dashboard/src/settings/Teams.tsx

@@ -514,7 +514,7 @@ function AllTeams() {
                             <a
                                 href="https://www.gitpod.io/docs/teams/"
                                 target="_blank"
-                                rel="noopener"
+                                rel="noopener noreferrer"
                                 className="gp-link"
                             >
                                 Learn more
@@ -649,6 +649,7 @@ function InviteMembersModal(props: { sub: TeamSubscription; onClose: () => void
     };
 
     return (
+        // TODO: Use title and buttons props
         <Modal visible={true} onClose={props.onClose}>
             <h3 className="pb-2">Invite Members</h3>
             <div className="border-t border-b border-gray-200 dark:border-gray-800 mt-2 -mx-6 px-6 py-4 space-y-2">
@@ -707,6 +708,7 @@ function AddMembersModal(props: {
     };
 
     return (
+        // TODO: Use title and buttons props
         <Modal visible={true} onClose={props.onClose}>
             <h3 className="pb-2">Add Members</h3>
             <div className="border-t border-b border-gray-200 dark:border-gray-800 mt-2 -mx-6 px-6 py-4">
@@ -772,6 +774,7 @@ function NewTeamModal(props: {
     };
 
     return (
+        // TODO: Use title and buttons props
         <Modal visible={true} onClose={props.onClose}>
             <h3 className="pb-2">New Team Plan</h3>
             <div className="border-t border-b border-gray-200 dark:border-gray-800 mt-2 -mx-6 px-6 py-4 space-y-2">
@@ -851,6 +854,7 @@ function ManageTeamModal(props: { slots: Slot[]; slotInputHandler: SlotInputHand
     }, [props.slots]);
 
     return (
+        // TODO: Use title and buttons props
         <Modal visible={true} onClose={props.onClose}>
             <h3 className="pb-2">Manage Team</h3>
             <div className="border-t border-b border-gray-200 dark:border-gray-800 mt-2 -mx-6 px-6 py-4 space-y-2">

components/dashboard/src/start/CreateWorkspace.tsx

@@ -202,6 +202,7 @@ export default class CreateWorkspace extends React.Component<CreateWorkspaceProp
             return <StartWorkspace {...parseProps(result?.createdWorkspaceId, window.location.search)} />;
         } else if (result?.existingWorkspaces) {
             statusMessage = (
+                // TODO: Use title and buttons props
                 <Modal visible={true} closeable={false} onClose={() => {}}>
                     <h3>Running Workspaces</h3>
                     <div className="border-t border-b border-gray-200 dark:border-gray-800 mt-4 -mx-6 px-6 py-2">
@@ -294,6 +295,7 @@ export default class CreateWorkspace extends React.Component<CreateWorkspaceProp
 function LimitReachedModal(p: { children: React.ReactNode }) {
     const { user } = useContext(UserContext);
     return (
+        // TODO: Use title and buttons props
         <Modal visible={true} closeable={false} onClose={() => {}}>
             <h3 className="flex">
                 <span className="flex-grow">Limit Reached</span>

components/dashboard/src/teams/Members.tsx

@@ -273,6 +273,7 @@ export default function () {
                 </ItemsList>
             </div>
             {genericInvite && showInviteModal && (
+                // TODO: Use title and buttons props
                 <Modal visible={true} onClose={() => setShowInviteModal(false)}>
                     <h3 className="mb-4">Invite Members</h3>
                     <div className="border-t border-b border-gray-200 dark:border-gray-800 -mx-6 px-6 py-4 flex flex-col">

components/dashboard/src/whatsnew/WhatsNew.tsx

@@ -68,6 +68,7 @@ export function WhatsNew(props: { onClose: () => void }) {
     };
 
     return (
+        // TODO: Use title and buttons props
         <Modal visible={!!visibleEntry} onClose={internalClose}>
             <h3 className="pb-4">What's New 🎁</h3>
             <>{visibleEntry && user ? visibleEntry.children(user, setUser) : <></>}</>

components/dashboard/src/workspaces/ConnectToSSHModal.tsx

@@ -99,6 +99,7 @@ export default function ConnectToSSHModal(props: {
     onClose: () => void;
 }) {
     return (
+        // TODO: Use title and buttons props
         <Modal visible={true} onClose={props.onClose}>
             <h3 className="mb-4">Connect via SSH</h3>
             <SSHView workspaceId={props.workspaceId} ownerToken={props.ownerToken} ideUrl={props.ideUrl} />

components/dashboard/src/workspaces/StartWorkspaceModal.tsx

@@ -20,6 +20,7 @@ export function StartWorkspaceModal() {
     }, [location]);
 
     return (
+        // TODO: Use title and buttons props
         <Modal
             onClose={() => setIsStartWorkspaceModalVisible(false)}
             onEnter={() => false}

components/dashboard/src/workspaces/WorkspaceEntry.tsx

@@ -207,6 +207,7 @@ export function WorkspaceEntry({ desc, model, isAdmin, stopWorkspace }: Props) {
                     onConfirm={() => model.deleteWorkspace(ws.id)}
                 />
             )}
+            {/* TODO: Use title and buttons props */}
             <Modal
                 visible={isRenameModalVisible}
                 onClose={() => setRenameModalVisible(false)}