diff --git a/images/walkthrough/createComponent.gif b/images/walkthrough/createComponent.gif new file mode 100644 index 000000000..0f274f642 Binary files /dev/null and b/images/walkthrough/createComponent.gif differ diff --git a/images/walkthrough/debug.gif b/images/walkthrough/debug.gif new file mode 100644 index 000000000..b216bba45 Binary files /dev/null and b/images/walkthrough/debug.gif differ diff --git a/images/walkthrough/loginCluster.gif b/images/walkthrough/loginCluster.gif new file mode 100644 index 000000000..fbb0a6877 Binary files /dev/null and b/images/walkthrough/loginCluster.gif differ diff --git a/images/walkthrough/openInBrowser.gif b/images/walkthrough/openInBrowser.gif new file mode 100644 index 000000000..8fdce5fd7 Binary files /dev/null and b/images/walkthrough/openInBrowser.gif differ diff --git a/images/walkthrough/pushComponent.gif b/images/walkthrough/pushComponent.gif new file mode 100644 index 000000000..109a3a68a Binary files /dev/null and b/images/walkthrough/pushComponent.gif differ diff --git a/images/walkthrough/showRegistries.gif b/images/walkthrough/showRegistries.gif new file mode 100644 index 000000000..1478ae05f Binary files /dev/null and b/images/walkthrough/showRegistries.gif differ diff --git a/package.json b/package.json index 31e52ab28..af00daeb0 100644 --- a/package.json +++ b/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", diff --git a/src/openshift/cluster.ts b/src/openshift/cluster.ts index 2e9ee4087..a865ce703 100644 --- a/src/openshift/cluster.ts +++ b/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 { + 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') diff --git a/src/webview/cluster/app/cluster.tsx b/src/webview/cluster/app/cluster.tsx index 87afaaf71..72ad3fd93 100644 --- a/src/webview/cluster/app/cluster.tsx +++ b/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: diff --git a/src/webview/cluster/app/sandboxView.tsx b/src/webview/cluster/app/sandboxView.tsx index efd83cafe..f64f0b568 100644 --- a/src/webview/cluster/app/sandboxView.tsx +++ b/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 { ) -} \ No newline at end of file +}