Create get started page for OpenShift in VSCode Open walkthrough

package.json

@@ -298,7 +298,9 @@
 		"onCommand:clusters.openshift.deploy.rcShowLog",
 		"onCommand:clusters.openshift.deploy.rcShowLog.palette",
 		"onCommand:clusters.openshift.deployment.openConsole",
-		"onCommand:clusters.openshift.imagestream.openConsole"
+		"onCommand:clusters.openshift.imagestream.openConsole",
+    "onCommand:openshift.componentTypesView.registry.openInView",
+    "onWalkthrough:openshiftWalkthrough"
 	],
 	"contributes": {
 		"commands": [
@@ -896,11 +898,6 @@
 			}
 		],
 		"keybindings": [
-			{
-				"command": "openshift.explorer.login",
-				"key": "alt+shift+l",
-				"mac": "ctrl+shift+l"
-			},
 			{
 				"command": "openshift.explorer.refresh",
 				"key": "alt+shift+r",
@@ -1561,6 +1558,81 @@
 				}
 			]
 		},
+        "walkthroughs": [
+            {
+                "id": "openshiftWalkthrough",
+                "title": "Getting Started with OpenShift",
+                "description": "Start your application development on OpenShift or Kubernetes",
+                "steps": [
+                    {
+                        "id": "login",
+                        "title": "Login/Provision OpenShift cluster",
+                        "description": "Users can Login to an existing OpenShift cluster using the login button.\nTo provision a new OpenShift cluster, **Add OpenShift Cluster** button opens a guided experience workflow to connect to a local or sandbox cluster.\n[Login to the existing OpenShift cluster](command:openshift.explorer.login)\n[Provision local OpenShift cluster](command:openshift.explorer.addCluster?[\"crc\"])\n[Provision Red Hat Developer Sandbox cluster](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": "showRegistries",
+                        "title": "View the default and custom devfile registries.",
+                        "description": "You can connect to publicly available devfile registries to get started with devfiles for different languages and frameworks.\n[Open registry view](command:openshift.componentTypesView.registry.openInView)",
+                        "media": {
+                            "image": "images/walkthrough/showRegistries.gif",
+                            "altText": "show registry"
+                        },
+                        "completionEvents": [
+                            "onCommand:openshift.componentTypesView.registry.openInView"
+                        ]
+                    },
+                    {
+                        "id": "createComponent",
+                        "title": "Create a Component using Registry Viewer",
+                        "description": "Create a component in the current working directory with the file `devfile.yaml` from the devfile registry and the starter project selected. Devfile is a manifest file that contains information about various resources (URL, Storage, Services, etc.) that correspond to your component. \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": "The component created above is available locally. To deploy the component on the connect OpenShift/Kubernetes cluster, we need to `Push` the Component",
+                        "media": {
+                            "image": "images/walkthrough/pushComponent.gif",
+                            "altText": "push component"
+                        }
+                    },
+                    {
+                        "id": "debug",
+                        "title": "Debug the Component locally",
+                        "description": "Debug and test remote applications deployed from your IDE to OpenShift/Kubernetes. No more having to exit your IDE to push your application.",
+                        "media": {
+                            "image": "images/walkthrough/debug.gif",
+                            "altText": "debug"
+                        }
+                    },
+                    {
+                        "id": "openInBrowser",
+                        "title": "Open the Component in Browser",
+                        "description": "Users can access the deployed component in web browser",
+                        "media": {
+                            "image": "images/walkthrough/openInBrowser.gif",
+                            "altText": "open in browser"
+                        }
+                    }
+                ]
+            }
+        ],
 		"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

@@ -64,6 +64,12 @@ export default function Header() {
     const classes = useStyles();
     const [showWizard, setShowWizard] = React.useState('');
 
+    window.onmessage = (event: any) => {
+        if (['crc', 'sandbox'].includes(event.data.param)) {
+            setShowWizard(event.data.param);
+        }
+    }
+
     const handleView = (index: number) => {
         switch (index) {
             case 0:

src/webview/cluster/app/sandboxView.tsx

@@ -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 />
         </>
     )
-}
+}