Create get started page for OpenShift in VSCode Open walkthrough

package.json

@@ -896,11 +896,6 @@
 			}
 		],
 		"keybindings": [
-			{
-				"command": "openshift.explorer.login",
-				"key": "alt+shift+l",
-				"mac": "ctrl+shift+l"
-			},
 			{
 				"command": "openshift.explorer.refresh",
 				"key": "alt+shift+r",
@@ -1561,6 +1556,69 @@
 				}
 			]
 		},
+        "walkthroughs": [
+            {
+                "id": "openshiftWalkthrough",
+                "title": "Getting Started with OpenShift",
+                "description": "A sample walkthrough",
+                "steps": [
+                    {
+                        "id": "login",
+                        "title": "Login to Openshift",
+                        "description": "This step will helps with login to Openshift.\n[Connect using remote OpenShift Cluster](command:openshift.explorer.login)\n[Connect using OpenShift Local](command:openshift.explorer.addCluster?[\"crc\"])\n[Connect using Developer Sandbox](command:openshift.explorer.addCluster?[\"sandbox\"])",
+                        "media": {
+                            "image": "images/walkthrough/loginCluster.gif",
+                            "altText": "login to cluster"
+                        },
+                        "completionEvents": [
+                            "onCommand:openshift.explorer.login",
+                            "onCommand:openshift.explorer.addCluster",
+                            "onCommand:openshift.explorer.login.credentialsLogin",
+                            "onCommand:openshift.explorer.login.tokenLogin"
+                        ]
+                    },
+                    {
+                        "id": "createComponent",
+                        "title": "Create a Component using Registry Viewer",
+                        "description": "This step will run a command and check off once it has been run.\n[Create Component](command:openshift.componentType.newComponent)",
+                        "media": {
+                            "image": "images/walkthrough/createComponent.gif",
+                            "altText": "create component"
+                        },
+                        "completionEvents": [
+                            "onCommand:openshift.componentType.newComponent"
+                        ]
+                    },
+                    {
+                        "id": "pushComponent",
+                        "title": "Push a Component to the connected cluster",
+                        "description": "This step will push the component into the cluster.",
+                        "media": {
+                            "image": "images/walkthrough/push.gif",
+                            "altText": "push"
+                        }
+                    },
+                    {
+                        "id": "debug",
+                        "title": "Debug the Component locally",
+                        "description": "This step helps to understand, debugging a component locally.",
+                        "media": {
+                            "image": "images/walkthrough/push.gif",
+                            "altText": "push"
+                        }
+                    },
+                    {
+                        "id": "openInBrowser",
+                        "title": "Open the Component in Browser",
+                        "description": "This step helps to understand, opening the component in browser.",
+                        "media": {
+                            "image": "images/walkthrough/push.gif",
+                            "altText": "push"
+                        }
+                    }
+                ]
+            }
+        ],
 		"configuration": [
 			{
 				"type": "object",

src/openshift/cluster.ts

@@ -3,7 +3,7 @@
  *  Licensed under the MIT License. See LICENSE file in the project root for license information.
  *-----------------------------------------------------------------------------------------------*/
 
-import { window, commands, env, QuickPickItem, ExtensionContext, Terminal, Uri, workspace } from 'vscode';
+import { window, commands, env, QuickPickItem, ExtensionContext, Terminal, Uri, workspace, WebviewPanel } from 'vscode';
 import { Command } from '../odo/command';
 import OpenShiftItem, { clusterRequired } from './openshiftItem';
 import { CliExitData, CliChannel } from '../cli';
@@ -108,8 +108,11 @@ export class Cluster extends OpenShiftItem {
     }
 
     @vsCommand('openshift.explorer.addCluster')
-    static add(): void {
-        ClusterViewLoader.loadView('Add OpenShift Cluster');
+    static async add(value: string): Promise<void> {
+        const webViewPanel: WebviewPanel = await ClusterViewLoader.loadView('Add OpenShift Cluster');
+        if(value?.length > 0){
+            await webViewPanel.webview.postMessage({action: 'cluster', param: value});
+        }
     }
 
     @vsCommand('openshift.explorer.stopCluster')

src/webview/cluster/app/cluster.tsx

@@ -5,6 +5,7 @@
 
 import * as React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
+import { vscodeApi } from '../vsCodeMessage';
 import {
     Button,
     Card,
@@ -25,45 +26,51 @@ import './images/logo.png';
 const useStyles = makeStyles(clusterStyle);
 
 const clusterTypes = [
-  {
-    heading: 'Deploy it locally on your laptop',
-    description: 'Install on Laptop: Red Hat CodeReady Containers.',
-    smallInfo: 'Create a minimal OpenShift 4 cluster on your desktop/laptop for local development and testing.',
-    imageUrl: ['https://www.openshift.com/hubfs/images/icons/Icon-Red_Hat-Hardware-Laptop-A-Black-RGB.svg'],
-    urlAlt: 'crc',
-    redirectLink: '',
-    buttonText: 'Create/Refresh cluster',
-    tooltip: 'You can create/run local OpenShift 4 cluster using this wizard.'
-  },
-  {
-    heading: 'Launch Developer Sandbox',
-    description: 'Free access to the Developer Sandbox for Red Hat OpenShift',
-    smallInfo: 'The sandbox provides you with a private OpenShift environment in a shared, multi-tenant OpenShift cluster that is pre-configured with a set of developer tools.',
-    imageUrl: ['https://assets.openshift.com/hubfs/images/logos/osh/Logo-Red_Hat-OpenShift-A-Standard-RGB.svg'],
-    urlAlt: 'dev sandbox',
-    redirectLink: '',
-    buttonText: 'Start your OpenShift experience',
-    tooltip: 'Launch your Developer Sandbox for Red Hat OpenShift'
-  },
-  {
-    heading: 'Deploy it in your public cloud',
-    description: 'Run OpenShift clusters on your own by installing from another cloud provider.',
-    smallInfo: 'This includes Azure Red Hat Openshift, Red Hat OpenShift on IBM Cloud, Red Hat OpenShift Service on AWS, Google Cloud, AWS (x86_64), Azure.',
-    imageUrl: ['https://www.openshift.com/hubfs/images/logos/logo_aws.svg', 'https://www.openshift.com/hubfs/images/logos/logo-try-cloud.svg', 'https://www.openshift.com/hubfs/images/logos/logo_google_cloud.svg'],
-    urlAlt: 'public cloud',
-    redirectLink: 'https://console.redhat.com/openshift/create',
-    buttonText: 'Try it in your cloud',
-    tooltip: 'For complete installation, follow the official documentation.'
-  }
+    {
+        heading: 'Deploy it locally on your laptop',
+        description: 'Install on Laptop: Red Hat CodeReady Containers.',
+        smallInfo: 'Create a minimal OpenShift 4 cluster on your desktop/laptop for local development and testing.',
+        imageUrl: ['https://www.openshift.com/hubfs/images/icons/Icon-Red_Hat-Hardware-Laptop-A-Black-RGB.svg'],
+        urlAlt: 'crc',
+        redirectLink: '',
+        buttonText: 'Create/Refresh cluster',
+        tooltip: 'You can create/run local OpenShift 4 cluster using this wizard.'
+    },
+    {
+        heading: 'Launch Developer Sandbox',
+        description: 'Free access to the Developer Sandbox for Red Hat OpenShift',
+        smallInfo: 'The sandbox provides you with a private OpenShift environment in a shared, multi-tenant OpenShift cluster that is pre-configured with a set of developer tools.',
+        imageUrl: ['https://assets.openshift.com/hubfs/images/logos/osh/Logo-Red_Hat-OpenShift-A-Standard-RGB.svg'],
+        urlAlt: 'dev sandbox',
+        redirectLink: '',
+        buttonText: 'Start your OpenShift experience',
+        tooltip: 'Launch your Developer Sandbox for Red Hat OpenShift'
+    },
+    {
+        heading: 'Deploy it in your public cloud',
+        description: 'Run OpenShift clusters on your own by installing from another cloud provider.',
+        smallInfo: 'This includes Azure Red Hat Openshift, Red Hat OpenShift on IBM Cloud, Red Hat OpenShift Service on AWS, Google Cloud, AWS (x86_64), Azure.',
+        imageUrl: ['https://www.openshift.com/hubfs/images/logos/logo_aws.svg', 'https://www.openshift.com/hubfs/images/logos/logo-try-cloud.svg', 'https://www.openshift.com/hubfs/images/logos/logo_google_cloud.svg'],
+        urlAlt: 'public cloud',
+        redirectLink: 'https://console.redhat.com/openshift/create',
+        buttonText: 'Try it in your cloud',
+        tooltip: 'For complete installation, follow the official documentation.'
+    }
 ];
 
-const vscodeApi = window.vscodeApi;
-
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 export default function Header() {
     const classes = useStyles();
     const [showWizard, setShowWizard] = React.useState('');
 
+    React.useEffect(() => {
+        return vscodeApi.onMessage((message) => {
+            if (['crc', 'sandbox'].includes(message.data.param)) {
+                setShowWizard(message.data.param);
+            }
+        });
+    })
+
     const handleView = (index: number) => {
         switch (index) {
             case 0:
@@ -141,7 +148,7 @@ export default function Header() {
             <div className={classes.iconContainer}>
                 <img className={classes.image} src='assets/logo.png' alt="redhat-openshift"></img>
             </div>
-            { showWizard === 'crc' && (
+            {showWizard === 'crc' && (
                 <div className={classes.rowBody}>
                     <Card className={classes.cardContent}>
                         <Typography variant="body2" component="p" style={{ padding: 20 }}>
@@ -151,20 +158,20 @@ export default function Header() {
                     </Card>
                 </div>
             )}
-            { showWizard === 'sandbox' && (
+            {showWizard === 'sandbox' && (
                 <div className={classes.rowBody}>
                     <Card className={classes.cardContent}>
                         <Typography variant="body2" component="p" style={{ padding: 20 }}>
-                        The sandbox provides you with a private OpenShift environment in a shared, multi-tenant OpenShift cluster that is pre-configured with a set of developer tools. <br></br>Discover the rich capabilities of the full developer experience on OpenShift with the sandbox.
+                            The sandbox provides you with a private OpenShift environment in a shared, multi-tenant OpenShift cluster that is pre-configured with a set of developer tools. <br></br>Discover the rich capabilities of the full developer experience on OpenShift with the sandbox.
                         </Typography>
                         <Button variant="outlined" href='https://developers.redhat.com/developer-sandbox' className={classes.button} style={{ margin: 15, textTransform: 'none' }}>Learn More</Button>
                         <Button variant="outlined" href='mailto:devsandbox@redhat.com' className={classes.button} style={{ margin: 15, textTransform: 'none' }}>Contact Us</Button>
-                        <Button variant="outlined" href='https://dn.dev/DevNationSlack'className={classes.button} style={{ margin: 15, textTransform: 'none' }}>Connect on Slack</Button>
-                        <AddSandboxView/>
+                        <Button variant="outlined" href='https://dn.dev/DevNationSlack' className={classes.button} style={{ margin: 15, textTransform: 'none' }}>Connect on Slack</Button>
+                        <AddSandboxView vscode={vscodeApi} />
                     </Card>
                 </div>
             )}
-            { !showWizard && (
+            {!showWizard && (
                 <div className={classes.cardContainer}>
                     <InfrastructureLayout clusterTypes={clusterTypes}></InfrastructureLayout>
                 </div>

src/webview/cluster/app/index.html

@@ -12,9 +12,6 @@
         <% if (!production) { %>
         <script src="./devstub.js"></script>
         <% } %>
-        <script>
-            window.vscodeApi = acquireVsCodeApi();
-        </script>
         <style>
             html,
             body {

src/webview/cluster/app/sandboxView.tsx

@@ -71,7 +71,7 @@ export default function addSandboxView(props): JSX.Element {
     window.addEventListener('message', messageListener);
 
     function postMessage(action: string, payload?: any): void {
-        window.vscodeApi.postMessage({ action, payload });
+        props.vscode.postMessage({ action, payload });
     }
 
     React.useEffect(() => {
@@ -225,7 +225,7 @@ export default function addSandboxView(props): JSX.Element {
         const handleRequestVerificationCode = () => {
             const rawPhoneNumber = phoneNumber.slice(countryCode.length);
             const fullCountryCode = '+' + countryCode;
-            
+
             setInProgress(true);
             postMessage('sandboxRequestVerificationCode', { rawPhoneNumber, fullCountryCode });
         }
@@ -360,7 +360,7 @@ export default function addSandboxView(props): JSX.Element {
         const handleLoginButton = () => {
             postMessage('sandboxLoginUsingDataInClipboard', {url: currentState.consoleDashboard});
         };
-        
+
         return (
             <>
                 {( currentState.action === 'sandboxPageProvisioned' ) && (
@@ -411,4 +411,4 @@ export default function addSandboxView(props): JSX.Element {
             <Provisioned />
         </>
     )
-}
+}

src/webview/cluster/vsCodeMessage.ts

@@ -0,0 +1,37 @@
+/*-----------------------------------------------------------------------------------------------
+ *  Copyright (c) Red Hat, Inc. All rights reserved.
+ *  Licensed under the MIT License. See LICENSE file in the project root for license information.
+ *-----------------------------------------------------------------------------------------------*/
+
+declare const acquireVsCodeApi: Function;
+
+interface VSCodeApi {
+    getState: () => any;
+    setState: (newState: any) => any;
+    postMessage: (message: any) => void;
+}
+
+class VSCodeWrapper {
+    private readonly vscodeApi: VSCodeApi = acquireVsCodeApi();
+
+    /**
+     * Send message to the extension framework.
+     * @param message
+     */
+    public postMessage(message: any): void {
+        this.vscodeApi.postMessage(message);
+    }
+
+    /**
+     * Add listener for messages from extension framework.
+     * @param callback called when the extension sends a message
+     * @returns function to clean up the message eventListener.
+     */
+    public onMessage(callback: (message: any) => void): () => void {
+        window.addEventListener('message', callback);
+        return () => window.removeEventListener('message', callback);
+    }
+}
+
+// Singleton to prevent multiple fetches of VsCodeAPI.
+export const vscodeApi: VSCodeWrapper = new VSCodeWrapper();