From 948e27f36b3b3431b408458b115f61774a0c709c Mon Sep 17 00:00:00 2001
From: mustard <huiwen@gitpod.io>
Date: Tue, 24 May 2022 15:47:43 +0000
Subject: [PATCH] [dashboard] add modal_dismiss tracking event

---
 components/dashboard/src/Setup.tsx            |  1 +
 components/dashboard/src/components/Modal.tsx | 28 ++++++++++++---
 .../src/feedback-form/FeedbackModal.tsx       |  1 +
 .../src/projects/ProjectVariables.tsx         |  1 +
 .../src/settings/EnvironmentVariables.tsx     |  1 +
 .../dashboard/src/settings/Integrations.tsx   |  2 ++
 components/dashboard/src/settings/Plans.tsx   |  4 +++
 .../src/settings/SelectAccountModal.tsx       |  1 +
 .../dashboard/src/settings/SelectIDE.tsx      |  2 +-
 .../dashboard/src/settings/SelectIDEModal.tsx | 34 +++++++++----------
 components/dashboard/src/settings/Teams.tsx   |  6 +++-
 .../dashboard/src/start/CreateWorkspace.tsx   |  2 ++
 components/dashboard/src/teams/Members.tsx    |  1 +
 .../dashboard/src/whatsnew/WhatsNew.tsx       |  1 +
 .../src/workspaces/ConnectToSSHModal.tsx      |  1 +
 .../src/workspaces/StartWorkspaceModal.tsx    |  1 +
 .../src/workspaces/WorkspaceEntry.tsx         |  1 +
 17 files changed, 65 insertions(+), 23 deletions(-)

diff --git a/components/dashboard/src/Setup.tsx b/components/dashboard/src/Setup.tsx
index f4f455d5f5bffc..3bb39c430fedcb 100644
--- a/components/dashboard/src/Setup.tsx
+++ b/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">
diff --git a/components/dashboard/src/components/Modal.tsx b/components/dashboard/src/components/Modal.tsx
index 671caacffbb645..70484bfcb2d0d0 100644
--- a/components/dashboard/src/components/Modal.tsx
+++ b/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" />
diff --git a/components/dashboard/src/feedback-form/FeedbackModal.tsx b/components/dashboard/src/feedback-form/FeedbackModal.tsx
index c33a4a00849a6b..5aa8575f1c9a58 100644
--- a/components/dashboard/src/feedback-form/FeedbackModal.tsx
+++ b/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}
diff --git a/components/dashboard/src/projects/ProjectVariables.tsx b/components/dashboard/src/projects/ProjectVariables.tsx
index e60b5021fe9abe..bdc6e521178acc 100644
--- a/components/dashboard/src/projects/ProjectVariables.tsx
+++ b/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}
diff --git a/components/dashboard/src/settings/EnvironmentVariables.tsx b/components/dashboard/src/settings/EnvironmentVariables.tsx
index f00b62a3cdadeb..372004ab69d023 100644
--- a/components/dashboard/src/settings/EnvironmentVariables.tsx
+++ b/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">
diff --git a/components/dashboard/src/settings/Integrations.tsx b/components/dashboard/src/settings/Integrations.tsx
index 300daecafcec33..099e7340c7ebff 100644
--- a/components/dashboard/src/settings/Integrations.tsx
+++ b/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">
diff --git a/components/dashboard/src/settings/Plans.tsx b/components/dashboard/src/settings/Plans.tsx
index 281d777cbb1698..6be4a0e5b9d393 100644
--- a/components/dashboard/src/settings/Plans.tsx
+++ b/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">
diff --git a/components/dashboard/src/settings/SelectAccountModal.tsx b/components/dashboard/src/settings/SelectAccountModal.tsx
index 48a36b48ef22e6..458f0a1213d780 100644
--- a/components/dashboard/src/settings/SelectAccountModal.tsx
+++ b/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">
diff --git a/components/dashboard/src/settings/SelectIDE.tsx b/components/dashboard/src/settings/SelectIDE.tsx
index 9d227eecc64668..247468cae7a34c 100644
--- a/components/dashboard/src/settings/SelectIDE.tsx
+++ b/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"
diff --git a/components/dashboard/src/settings/SelectIDEModal.tsx b/components/dashboard/src/settings/SelectIDEModal.tsx
index be582d4cb1d4a0..e24318a74393d3 100644
--- a/components/dashboard/src/settings/SelectIDEModal.tsx
+++ b/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>
     );
 }
diff --git a/components/dashboard/src/settings/Teams.tsx b/components/dashboard/src/settings/Teams.tsx
index 378adb74d292f5..d5e711d6e4735f 100644
--- a/components/dashboard/src/settings/Teams.tsx
+++ b/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">
diff --git a/components/dashboard/src/start/CreateWorkspace.tsx b/components/dashboard/src/start/CreateWorkspace.tsx
index 63bcac75a0c4a0..4221d6bfa0ade2 100644
--- a/components/dashboard/src/start/CreateWorkspace.tsx
+++ b/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>
diff --git a/components/dashboard/src/teams/Members.tsx b/components/dashboard/src/teams/Members.tsx
index 9f012b93720f45..4510d546a2dea2 100644
--- a/components/dashboard/src/teams/Members.tsx
+++ b/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">
diff --git a/components/dashboard/src/whatsnew/WhatsNew.tsx b/components/dashboard/src/whatsnew/WhatsNew.tsx
index 9ac61f18b68d5c..4967b8aa088f51 100644
--- a/components/dashboard/src/whatsnew/WhatsNew.tsx
+++ b/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) : <></>}</>
diff --git a/components/dashboard/src/workspaces/ConnectToSSHModal.tsx b/components/dashboard/src/workspaces/ConnectToSSHModal.tsx
index 443da0df17ee9e..795fede929dde2 100644
--- a/components/dashboard/src/workspaces/ConnectToSSHModal.tsx
+++ b/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} />
diff --git a/components/dashboard/src/workspaces/StartWorkspaceModal.tsx b/components/dashboard/src/workspaces/StartWorkspaceModal.tsx
index b9b30415713450..bae3b288159a1e 100644
--- a/components/dashboard/src/workspaces/StartWorkspaceModal.tsx
+++ b/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}
diff --git a/components/dashboard/src/workspaces/WorkspaceEntry.tsx b/components/dashboard/src/workspaces/WorkspaceEntry.tsx
index f0522e34b0a11e..e45f9b62f7cb7c 100644
--- a/components/dashboard/src/workspaces/WorkspaceEntry.tsx
+++ b/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)}