Skip to content

Commit 84701b0

Browse files
msivasubramaniaanmohitsumandgolovin
authored
Create get started page for OpenShift in VSCode Open walkthrough (#2441)
* added walthrough in package.json * added steps on the walkthrough * changed title and description of the steps * added additional login option and post corresponding message * Update login description in package.json Co-authored-by: Mohit Suman <mohit.skn@gmail.com> * Update debug description in package.json Co-authored-by: Mohit Suman <mohit.skn@gmail.com> * Update login title in package.json Co-authored-by: Mohit Suman <mohit.skn@gmail.com> * added show registry step and updated the gifs * used the exisiting message passing * Update open browser desc package.json Co-authored-by: Mohit Suman <mohit.skn@gmail.com> * Update create component desc package.json Co-authored-by: Mohit Suman <mohit.skn@gmail.com> * Update push component desc package.json Co-authored-by: Mohit Suman <mohit.skn@gmail.com> * updated desc and gifs * updated desc of show registries * added openInView into onCommand for makes the step get completes * Update the main desc package.json Co-authored-by: Mohit Suman <mohit.skn@gmail.com> * Update the login desc package.json Co-authored-by: Mohit Suman <mohit.skn@gmail.com> * Update the show registry desc package.json Co-authored-by: Mohit Suman <mohit.skn@gmail.com> * updated the vscode-openshift-tools.gif * updated the vscode-openshift-tools.gif * reverted the gif * change login title and desc * Add activation event and Provision OpenShift cluster button Signed-off-by: Denis Golovin dgolovin@redhat.com * Revert "Add activation event and Provision OpenShift cluster button" This reverts commit 5e88ae8. * Rename 'Connect using ...' to 'Provision ...' Signed-off-by: Denis Golovin dgolovin@redhat.com Co-authored-by: Mohit Suman <mohit.skn@gmail.com> Co-authored-by: Denis Golovin <dgolovin@redhat.com>
1 parent ccc7750 commit 84701b0

File tree

10 files changed

+93
-12
lines changed

10 files changed

+93
-12
lines changed

‎images/walkthrough/createComponent.gif‎

2.37 MB
Loading

‎images/walkthrough/debug.gif‎

1.25 MB
Loading

‎images/walkthrough/loginCluster.gif‎

498 KB
Loading

‎images/walkthrough/openInBrowser.gif‎

420 KB
Loading

‎images/walkthrough/pushComponent.gif‎

2.43 MB
Loading

‎images/walkthrough/showRegistries.gif‎

3.18 MB
Loading

‎package.json‎

Lines changed: 78 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -298,7 +298,9 @@
298298
"onCommand:clusters.openshift.deploy.rcShowLog",
299299
"onCommand:clusters.openshift.deploy.rcShowLog.palette",
300300
"onCommand:clusters.openshift.deployment.openConsole",
301-
"onCommand:clusters.openshift.imagestream.openConsole"
301+
"onCommand:clusters.openshift.imagestream.openConsole",
302+
"onCommand:openshift.componentTypesView.registry.openInView",
303+
"onWalkthrough:openshiftWalkthrough"
302304
],
303305
"contributes": {
304306
"commands": [
@@ -896,11 +898,6 @@
896898
}
897899
],
898900
"keybindings": [
899-
{
900-
"command": "openshift.explorer.login",
901-
"key": "alt+shift+l",
902-
"mac": "ctrl+shift+l"
903-
},
904901
{
905902
"command": "openshift.explorer.refresh",
906903
"key": "alt+shift+r",
@@ -1561,6 +1558,81 @@
15611558
}
15621559
]
15631560
},
1561+
"walkthroughs": [
1562+
{
1563+
"id": "openshiftWalkthrough",
1564+
"title": "Getting Started with OpenShift",
1565+
"description": "Start your application development on OpenShift or Kubernetes",
1566+
"steps": [
1567+
{
1568+
"id": "login",
1569+
"title": "Login/Provision OpenShift cluster",
1570+
"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\"])",
1571+
"media": {
1572+
"image": "images/walkthrough/loginCluster.gif",
1573+
"altText": "login to cluster"
1574+
},
1575+
"completionEvents": [
1576+
"onCommand:openshift.explorer.login",
1577+
"onCommand:openshift.explorer.addCluster",
1578+
"onCommand:openshift.explorer.login.credentialsLogin",
1579+
"onCommand:openshift.explorer.login.tokenLogin"
1580+
]
1581+
},
1582+
{
1583+
"id": "showRegistries",
1584+
"title": "View the default and custom devfile registries.",
1585+
"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)",
1586+
"media": {
1587+
"image": "images/walkthrough/showRegistries.gif",
1588+
"altText": "show registry"
1589+
},
1590+
"completionEvents": [
1591+
"onCommand:openshift.componentTypesView.registry.openInView"
1592+
]
1593+
},
1594+
{
1595+
"id": "createComponent",
1596+
"title": "Create a Component using Registry Viewer",
1597+
"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)",
1598+
"media": {
1599+
"image": "images/walkthrough/createComponent.gif",
1600+
"altText": "create component"
1601+
},
1602+
"completionEvents": [
1603+
"onCommand:openshift.componentType.newComponent"
1604+
]
1605+
},
1606+
{
1607+
"id": "pushComponent",
1608+
"title": "Push a Component to the connected cluster",
1609+
"description": "The component created above is available locally. To deploy the component on the connect OpenShift/Kubernetes cluster, we need to `Push` the Component",
1610+
"media": {
1611+
"image": "images/walkthrough/pushComponent.gif",
1612+
"altText": "push component"
1613+
}
1614+
},
1615+
{
1616+
"id": "debug",
1617+
"title": "Debug the Component locally",
1618+
"description": "Debug and test remote applications deployed from your IDE to OpenShift/Kubernetes. No more having to exit your IDE to push your application.",
1619+
"media": {
1620+
"image": "images/walkthrough/debug.gif",
1621+
"altText": "debug"
1622+
}
1623+
},
1624+
{
1625+
"id": "openInBrowser",
1626+
"title": "Open the Component in Browser",
1627+
"description": "Users can access the deployed component in web browser",
1628+
"media": {
1629+
"image": "images/walkthrough/openInBrowser.gif",
1630+
"altText": "open in browser"
1631+
}
1632+
}
1633+
]
1634+
}
1635+
],
15641636
"configuration": [
15651637
{
15661638
"type": "object",

‎src/openshift/cluster.ts‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
* Licensed under the MIT License. See LICENSE file in the project root for license information.
44
*-----------------------------------------------------------------------------------------------*/
55

6-
import { window, commands, env, QuickPickItem, ExtensionContext, Terminal, Uri, workspace } from 'vscode';
6+
import { window, commands, env, QuickPickItem, ExtensionContext, Terminal, Uri, workspace, WebviewPanel } from 'vscode';
77
import { Command } from '../odo/command';
88
import OpenShiftItem, { clusterRequired } from './openshiftItem';
99
import { CliExitData, CliChannel } from '../cli';
@@ -108,8 +108,11 @@ export class Cluster extends OpenShiftItem {
108108
}
109109

110110
@vsCommand('openshift.explorer.addCluster')
111-
static add(): void {
112-
ClusterViewLoader.loadView('Add OpenShift Cluster');
111+
static async add(value: string): Promise<void> {
112+
const webViewPanel: WebviewPanel = await ClusterViewLoader.loadView('Add OpenShift Cluster');
113+
if(value?.length > 0){
114+
await webViewPanel.webview.postMessage({action: 'cluster', param: value});
115+
}
113116
}
114117

115118
@vsCommand('openshift.explorer.stopCluster')

‎src/webview/cluster/app/cluster.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,12 @@ export default function Header() {
6464
const classes = useStyles();
6565
const [showWizard, setShowWizard] = React.useState('');
6666

67+
window.onmessage = (event: any) => {
68+
if (['crc', 'sandbox'].includes(event.data.param)) {
69+
setShowWizard(event.data.param);
70+
}
71+
}
72+
6773
const handleView = (index: number) => {
6874
switch (index) {
6975
case 0:

‎src/webview/cluster/app/sandboxView.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -225,7 +225,7 @@ export default function addSandboxView(props): JSX.Element {
225225
const handleRequestVerificationCode = () => {
226226
const rawPhoneNumber = phoneNumber.slice(countryCode.length);
227227
const fullCountryCode = '+' + countryCode;
228-
228+
229229
setInProgress(true);
230230
postMessage('sandboxRequestVerificationCode', { rawPhoneNumber, fullCountryCode });
231231
}
@@ -360,7 +360,7 @@ export default function addSandboxView(props): JSX.Element {
360360
const handleLoginButton = () => {
361361
postMessage('sandboxLoginUsingDataInClipboard', {url: currentState.consoleDashboard});
362362
};
363-
363+
364364
return (
365365
<>
366366
{( currentState.action === 'sandboxPageProvisioned' ) && (
@@ -411,4 +411,4 @@ export default function addSandboxView(props): JSX.Element {
411411
<Provisioned />
412412
</>
413413
)
414-
}
414+
}

0 commit comments

Comments
 (0)
⚡