[dashboard] add modal_dismiss tracking event

mustard-mh · mustard-mh · commit 0e3b3f22c178 · 2022-05-24T14:55:26.000Z
diff --git 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
@@ -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/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
@@ -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
@@ -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
@@ -726,6 +726,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">
@@ -754,6 +755,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">
@@ -783,6 +785,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">
@@ -799,6 +802,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
@@ -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/SelectIDEModal.tsx b/components/dashboard/src/settings/SelectIDEModal.tsx
@@ -38,6 +38,7 @@ export default function (props: SelectIDEModalProps) {
     };
 
     return (
+        // TODO: Use title and buttons props
         <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">
diff --git 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
@@ -200,6 +200,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">
@@ -292,6 +293,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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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)}
