[dashboard] add location for ide_configuration_changed track event

Author: mustard-mh

components/dashboard/src/App.tsx

@@ -509,11 +509,7 @@ function App() {
         if (showUserIdePreference) {
             toRender = (
                 <StartPage phase={StartPhase.Checking}>
-                    <SelectIDEModal
-                        onClose={() => {
-                            setShowUserIdePreference(false);
-                        }}
-                    />
+                    <SelectIDEModal location="workspace_start" onClose={() => setShowUserIdePreference(false)} />
                 </StartPage>
             );
         } else {

components/dashboard/src/settings/Preferences.tsx

@@ -60,7 +60,7 @@ export default function Preferences() {
             >
                 <h3>Editor</h3>
                 <p className="text-base text-gray-500 dark:text-gray-400">Choose the editor for opening workspaces.</p>
-                <SelectIDE />
+                <SelectIDE location="preferences" />
                 <h3 className="mt-12">Theme</h3>
                 <p className="text-base text-gray-500 dark:text-gray-400">Early bird or night owl? Choose your side.</p>
                 <div className="mt-4 space-x-4 flex">

components/dashboard/src/settings/SelectIDE.tsx

@@ -14,11 +14,18 @@ import { UserContext } from "../user-context";
 import CheckBox from "../components/CheckBox";
 import { User } from "@gitpod/gitpod-protocol";
 
+export type IDEChangedTrackLocation = "workspace_list" | "workspace_start" | "preferences";
 interface SelectIDEProps {
     updateUserContext?: boolean;
+    location: IDEChangedTrackLocation;
 }
 
-export const updateUserIDEInfo = async (user: User, selectedIde: string, useLatestVersion: boolean) => {
+export const updateUserIDEInfo = async (
+    user: User,
+    selectedIde: string,
+    useLatestVersion: boolean,
+    location: IDEChangedTrackLocation,
+) => {
     const additionalData = user?.additionalData ?? {};
     const settings = additionalData.ideSettings ?? {};
     settings.settingVersion = "2.0";
@@ -28,7 +35,10 @@ export const updateUserIDEInfo = async (user: User, selectedIde: string, useLate
     getGitpodService()
         .server.trackEvent({
             event: "ide_configuration_changed",
-            properties: settings,
+            properties: {
+                ...settings,
+                location,
+            },
         })
         .then()
         .catch(console.error);
@@ -44,7 +54,7 @@ export default function SelectIDE(props: SelectIDEProps) {
     }, []);
 
     const actualUpdateUserIDEInfo = async (user: User, selectedIde: string, useLatestVersion: boolean) => {
-        const newUserData = await updateUserIDEInfo(user, selectedIde, useLatestVersion);
+        const newUserData = await updateUserIDEInfo(user, selectedIde, useLatestVersion, props.location);
         props.updateUserContext && setUser({ ...newUserData });
     };
 

components/dashboard/src/settings/SelectIDEModal.tsx

@@ -7,16 +7,21 @@
 import { useState, useContext } from "react";
 import { Link } from "react-router-dom";
 import { User } from "@gitpod/gitpod-protocol";
-import SelectIDE, { updateUserIDEInfo } from "./SelectIDE";
+import SelectIDE, { IDEChangedTrackLocation, updateUserIDEInfo } from "./SelectIDE";
 import Modal from "../components/Modal";
 import { UserContext } from "../user-context";
 
-export default function (props: { onClose?: () => void }) {
+export interface SelectIDEModalProps {
+    location: IDEChangedTrackLocation;
+    onClose?: () => void;
+}
+
+export default function (props: SelectIDEModalProps) {
     const { user, setUser } = useContext(UserContext);
     const [visible, setVisible] = useState(true);
 
     const actualUpdateUserIDEInfo = async (user: User, selectedIde: string, useLatestVersion: boolean) => {
-        const newUserData = await updateUserIDEInfo(user, selectedIde, useLatestVersion);
+        const newUserData = await updateUserIDEInfo(user, selectedIde, useLatestVersion, props.location);
         setUser({ ...newUserData });
     };
 
@@ -43,7 +48,7 @@ export default function (props: { onClose?: () => void }) {
                     </Link>
                     .
                 </p>
-                <SelectIDE updateUserContext={false} />
+                <SelectIDE updateUserContext={false} location={props.location} />
             </div>
             <div className="flex justify-end mt-6">
                 <button onClick={handleContinue} className="ml-2">

components/dashboard/src/workspaces/Workspaces.tsx

@@ -62,7 +62,9 @@ export default function () {
     return (
         <>
             <Header title="Workspaces" subtitle="Manage recent and stopped workspaces." />
-            {isOnboardingUser && <SelectIDEModal />}
+
+            {isOnboardingUser && <SelectIDEModal location={"workspace_list"} />}
+
             {workspaceModel?.initialized &&
                 (activeWorkspaces.length > 0 || inactiveWorkspaces.length > 0 || workspaceModel.searchTerm ? (
                     <>