Send telemetry for cluster selection in Add OpenShift Cluster editor

package.json

@@ -766,6 +766,21 @@
         "command": "openshift.componentType.newComponent",
         "title": "New Component",
         "category": "OpenShift"
+      },
+      {
+        "command": "openshift.explorer.addCluster.openLaunchSandboxPage",
+        "title": "Launch Developer Sandbox",
+        "category": "OpenShift"
+      },
+      {
+        "command": "openshift.explorer.addCluster.openCreateClusterPage",
+        "title": "Deploy it in your public cloud",
+        "category": "OpenShift"
+      },
+      {
+        "command": "openshift.explorer.addCluster.openCrcAddClusterPage",
+        "title": "Open Add CRC Cluster Wizard",
+        "category": "OpenShift"
       }
     ],
     "keybindings": [
@@ -963,6 +978,10 @@
         {
           "command": "clusters.openshift.build.openConsole",
           "when": "false"
+        },
+        {
+          "command": "openshift.explorer.addCluster.openCrcAddClusterPage",
+          "when": "false"
         }
       ],
       "view/title": [

src/view/@types/windows/index.d.ts

@@ -2,8 +2,16 @@
  *  Copyright (c) Red Hat, Inc. All rights reserved.
  *  Licensed under the MIT License. See LICENSE file in the project root for license information.
  *-----------------------------------------------------------------------------------------------*/
+interface ActionMessage {
+    action: string;
+    params: any;
+}
+
+interface VscodeAPI {
+    postMessage(message: ActionMsg): void;
+}
 
 interface Window {
-    acquireVsCodeApi(): any;
+    acquireVsCodeApi(): VscodeAPI;
     cmdText: string;
 }

src/view/cluster/app/cluster.tsx

@@ -55,6 +55,8 @@ const clusterTypes = [
   }
 ];
 
+const vscodeApi = window.acquireVsCodeApi();
+
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 export default function Header() {
   const classes = useStyles();
@@ -63,6 +65,23 @@ export default function Header() {
   const handleView = (index) => {
     if (index === 0) {
       setShowWizard(!showWizard);
+      vscodeApi.postMessage({
+        action: 'openCrcAddClusterPage',
+      });
+    } else if (index === 1) {
+      vscodeApi.postMessage({
+        action: 'openLaunchSandboxPage',
+        params: {
+          url: clusterTypes[index].redirectLink
+        }
+      });
+    } else if (index === 2) {
+      vscodeApi.postMessage({
+        action: 'openCreateClusterPage',
+        params: {
+          url: clusterTypes[index].redirectLink
+        }
+      });
     }
   };
 
@@ -92,7 +111,7 @@ export default function Header() {
           <CardActions className={classes.cardButton}>
             <Tooltip title={list.tooltip} placement="top">
               <div>
-                <a href={list.redirectLink} onClick={() => handleView(index)} style={{ textDecoration: 'none'}}>
+                <a onClick={() => handleView(index)} style={{ textDecoration: 'none'}}>
                   <Button
                     variant="contained"
                     color="default"
@@ -120,7 +139,7 @@ export default function Header() {
           <Typography variant="body2" component="p" style={{ padding: 20 }}>
             Red Hat CodeReady Containers brings a minimal OpenShift 4 cluster on your laptop or desktop computer.<br></br>You can use this wizard to create OpenShift cluster locally. Cluster take approximately 15 minutes to provision.
           </Typography>
-          <AddClusterView />
+          <AddClusterView vscode={vscodeApi}/>
         </Card>
       </div>)}
       {!showWizard && (

src/view/cluster/app/clusterView.tsx

@@ -42,8 +42,6 @@ import * as ClusterViewStyles from './clusterView.style';
 const useStyles = makeStyles(ClusterViewStyles.useStyles);
 const StyledBadge = withStyles(ClusterViewStyles.badgeStyles)(Badge);
 
-const vscode = window.acquireVsCodeApi();
-
 const crcDefaults = {
 	DefaultCPUs: 4,
 	DefaultMemory: 9216,
@@ -59,7 +57,7 @@ function getSteps() {
 }
 
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
-export default function addClusterView() {
+export default function addClusterView(props) {
   const classes = useStyles();
   const crcLatest = '1.22.0';
   const crcOpenShift = '4.6.15';
@@ -80,7 +78,7 @@ export default function addClusterView() {
   const [statusError, setStatusError] = React.useState(false);
 
   React.useEffect(() => {
-    vscode.postMessage({action: 'checksetting'});
+    props.vscode.postMessage({action: 'checksetting'});
   }, []);
 
   const steps = getSteps();
@@ -184,12 +182,12 @@ export default function addClusterView() {
     setProgress(true);
     setCrcStartError(false);
     if (settingPresent) {
-      vscode.postMessage({action: 'start', isSetting: true });
+      props.vscode.postMessage({action: 'start', isSetting: true });
     } else {
       const crcStartCommand = (crcNameserver === '') ? `${fileName} start -p ${pullSecretPath} -c ${cpuSize} -m ${memory} -ojson`:
           `${fileName} start -p ${pullSecretPath} -c ${cpuSize} -m ${memory} -n ${crcNameserver} -ojson`;
 
-      vscode.postMessage({action: 'start',
+      props.vscode.postMessage({action: 'start',
                           data: crcStartCommand,
                           pullSecret: pullSecretPath,
                           crcLoc: fileName,
@@ -203,23 +201,23 @@ export default function addClusterView() {
   const handleStopProcess = () => {
     setStopProgress(true);
     setCrcStopError(false);
-    vscode.postMessage({action: 'stop', data: `${fileName}`});
+    props.vscode.postMessage({action: 'stop', data: `${fileName}`});
   }
 
   const handleCrcSetup = () => {
-    vscode.postMessage({action: 'run', data: `${fileName}` })
+    props.vscode.postMessage({action: 'run', data: `${fileName}` })
   }
 
   const handleCrcLogin = (loginDetails, clusterUrl) => {
-    vscode.postMessage({action: 'crclogin', data: loginDetails, url: clusterUrl })
+    props.vscode.postMessage({action: 'crclogin', data: loginDetails, url: clusterUrl })
   }
 
   const handleRefresh = () => {
     setStatusSkeleton(true);
     if (settingPresent) {
-      vscode.postMessage({action: 'checksetting'});
+      props.scode.postMessage({action: 'checksetting'});
     } else {
-      vscode.postMessage({action: 'checkcrcstatus', data: `${fileName}`});
+      props.vscode.postMessage({action: 'checkcrcstatus', data: `${fileName}`});
     }
   }
 

src/view/cluster/clusterViewLoader.ts

@@ -9,6 +9,7 @@ import { spawn, ChildProcess } from 'child_process';
 import { ExtenisonID } from '../../util/constants';
 import { WindowUtil } from '../../util/windowUtils';
 import { CliChannel } from '../../cli';
+import { vsCommand } from '../../vscommand';
 
 let panel: vscode.WebviewPanel;
 
@@ -20,6 +21,21 @@ export default class ClusterViewLoader {
         return vscode.extensions.getExtension(ExtenisonID).extensionPath
     }
 
+    @vsCommand('openshift.explorer.addCluster.openLaunchSandboxPage')
+    static async openLaunchSandboxPage(url: string) {
+        await vscode.commands.executeCommand('vscode.open', vscode.Uri.parse(url));
+    }
+
+    @vsCommand('openshift.explorer.addCluster.openCreateClusterPage')
+    static async openCreateClusterPage(url: string) {
+        await vscode.commands.executeCommand('vscode.open', vscode.Uri.parse(url));
+    }
+
+    @vsCommand('openshift.explorer.addCluster.openCrcAddClusterPage')
+    static async openCrcAddClusterPage(url: string) {
+        // fake command to report crc selection through telemetry
+    }
+
     // eslint-disable-next-line @typescript-eslint/require-await
     static async loadView(title: string): Promise<vscode.WebviewPanel> {
 
@@ -43,6 +59,10 @@ export default class ClusterViewLoader {
             panel = undefined;
         });
         panel.webview.onDidReceiveMessage(async (event)  => {
+            if (['openLaunchSandboxPage', 'openCreateClusterPage', 'openCrcAddClusterPage'].includes(event.action)) {
+                await vscode.commands.executeCommand(`openshift.explorer.addCluster.${event.action}`, event.params?.url);
+            }
+
             if (event.action === 'run') {
                 const terminal: vscode.Terminal = WindowUtil.createTerminal(`OpenShift: CRC Setup`, undefined);
                 terminal.sendText(`${event.data} setup`);