Showing gauge install instruction on welcome page when gauge is not i…

…nstalled (#157) * Showing gauge install instruction on welcome page when gauge is not installed #115 * Removing the info msg when gauge is not installed and UI changes on the welcome page #159 * refactoring and UI changes #115 * Changing the command name
getgauge · Mar 1, 2018 · da16eb1 · da16eb1
1 parent 349ab6a
commit da16eb1
Show file tree

Hide file tree

Showing 5 changed files with 197 additions and 36 deletions.
diff --git a/src/constants.ts b/src/constants.ts
@@ -31,7 +31,8 @@ export enum GaugeVSCodeCommands {
     RepeatExecution = 'gauge.execute.repeat',
     SwitchProject = 'gauge.specexplorer.switchProject',
     QuickPickOnExecution = 'gauge.quickPick.onExecution.open',
-    ExtractConcept = 'gauge.extract.concept'
+    ExtractConcept = 'gauge.extract.concept',
+    ExecuteInTerminal = "gauge.executeIn.terminal"
 }
 
 export enum GaugeCommands {

diff --git a/src/extension.ts b/src/extension.ts
@@ -5,7 +5,7 @@ import * as path from 'path';
 import {
     workspace, Disposable, ExtensionContext, Uri, extensions, TextDocumentShowOptions, Position, Range,
     WorkspaceFolder, OutputChannel, commands, WorkspaceFoldersChangeEvent, window, StatusBarAlignment,
-    CancellationTokenSource, version, TextDocument, TextEditor, languages,
+    CancellationTokenSource, version, TextDocument, TextEditor, languages, Terminal,
 } from 'vscode';
 
 import {
@@ -48,11 +48,12 @@ let outputChannel: OutputChannel = window.createOutputChannel('gauge');
 let specExplorerActiveFolder: string = "";
 
 export function activate(context: ExtensionContext) {
+    let currentExtensionVersion = extensions.getExtension(GAUGE_EXTENSION_ID)!.packageJSON.version;
+    let hasUpgraded = hasExtensionUpdated(context, currentExtensionVersion);
+    context.subscriptions.push(new WelcomePageProvider(context, hasUpgraded));
+
     let gaugeVersionInfo = getGaugeVersionInfo();
     if (!gaugeVersionInfo || !gaugeVersionInfo.isGreaterOrEqual(MINIMUM_SUPPORTED_GAUGE_VERSION)) {
-        notifyToInstallGauge(
-            `Cannot find 'gauge' executable or a compatible version (>=${MINIMUM_SUPPORTED_GAUGE_VERSION}) in PATH.`
-        );
         return;
     }
     languages.setLanguageConfiguration('gauge', {
@@ -68,12 +69,6 @@ export function activate(context: ExtensionContext) {
         setCommandContext(GaugeCommandContext.MultiProject, clients.size > 1);
     });
 
-    let currentExtensionVersion = extensions.getExtension(GAUGE_EXTENSION_ID)!.packageJSON.version;
-    let hasUpgraded = hasExtensionUpdated(context, currentExtensionVersion);
-    if (hasUpgraded) {
-        showUpdateMessage(currentExtensionVersion);
-    }
-
     registerStopExecution(context);
     registerExecutionStatus(context);
 
@@ -161,7 +156,7 @@ export function activate(context: ExtensionContext) {
 
     context.subscriptions.push(new GenerateStubCommandProvider(clients));
     context.subscriptions.push(new ExtractConceptCommandProvider(context, clients));
-    context.subscriptions.push(new WelcomePageProvider(context, hasUpgraded));
+
     registerTreeDataProvider(context, getDefaultFolder(), true);
 }
 
@@ -450,14 +445,3 @@ function hasExtensionUpdated(context: ExtensionContext, latestVersion: string):
     context.globalState.update(GAUGE_VSCODE_VERSION, latestVersion);
     return !gaugeVsCodePreviousVersion || gaugeVsCodePreviousVersion === latestVersion;
 }
-
-function showUpdateMessage(version: string) {
-    let actions = {
-        'Show Release Notes': () => opn('https://github.com/getgauge/gauge-vscode/releases/tag/v' + version),
-        'Do not show this again': () => workspace.getConfiguration().update(GAUGE_SUPPRESS_UPDATE_NOTIF, true),
-    };
-    window.showInformationMessage("Gauge updated to version " + version, 'Show Release Notes', 'Do not show this again')
-        .then((selected) => {
-            actions[selected]();
-        });
-}
diff --git a/src/terminal/terminal.ts b/src/terminal/terminal.ts
@@ -0,0 +1,24 @@
+import { Disposable, window, ExtensionContext, commands, Terminal } from "vscode";
+import { GaugeVSCodeCommands } from "../constants";
+
+let terminalStack: Terminal[] = [];
+
+export class TerminalProvider extends Disposable {
+    private readonly _context: ExtensionContext;
+    private readonly _disposable: Disposable;
+    constructor(context: ExtensionContext) {
+        super(() => this.dispose());
+        this._context = context;
+        this._disposable = Disposable.from(
+            commands.registerCommand(GaugeVSCodeCommands.ExecuteInTerminal, (text: string) => {
+                terminalStack.push(window.createTerminal('gauge install'));
+                getLatestTerminal().show();
+                getLatestTerminal().sendText(text);
+            }
+        ));
+    }
+}
+
+function getLatestTerminal() {
+    return terminalStack[terminalStack.length - 1];
+}
diff --git a/src/ui/welcome/index.html b/src/ui/welcome/index.html
@@ -9,12 +9,16 @@
 			--button-hover-background: rgba(0,0,0,0.1);
 			--inversion: 1; /* logo is white background, light themes need an inversion */
 			--header-colour: #555555;
+			--command-background : rgba(0,0,0,0.08);
+			--command-text-color : black;
 		}
 		.vscode-dark{
 			--button-background: rgba(255,255,255,0.08);
 			--button-hover-background: rgba(255,255,255,0.1);
 			--inversion: 0;
 			--header-colour: #e0b009;
+			--command-background : black;
+			--command-text-color : white;
 		}
 		html {
 			margin:    0 auto;
@@ -31,14 +35,14 @@
 				"sidebar	content		content"
 				"sidebar 	footer		footer";
 		}
-		h3, .sidebar h5 {
+		h3, .sidebar h5, .content h4{
 			color: var(--header-colour);
 			font-weight: normal;
 		}
 		.main-header {
 			grid-area: header;
 			text-align: center;
-			padding-bottom: 3em;
+			padding-bottom: 2em;
 			padding-top: 2em;
 			height: 20%;
 		}
@@ -68,7 +72,7 @@
 		.intro{
 			font-size: 0.8em;
 		}
-		a{
+		a {
 			outline: none;
 			text-decoration: none;
 			color: var(--color) !important;
@@ -132,6 +136,63 @@
 		.hidden {
 			display: none;
 		}
+		.error {
+			color: red;
+			font-size: 18px;
+			align-content: left;
+		}
+		.error i.fas {
+			margin-right: 0.25em;
+			font-size: 1em;
+		}
+		#execute i.fas {
+			margin-left: 1em;
+			font-size: 1em;
+		}
+		.command {
+			display: flex;
+			justify-content: left;
+			align-items: center;
+			padding: 5px;
+			background-color:	var(--command-background);
+			color:white;
+			padding: 10px 20px 10px 20px;
+		}
+		.instructions {
+			justify-content: left;
+			align-items: center;
+			border-radius: 10px;
+			padding: 10px 20px 10px 20px;
+			border:1px solid red;
+		}
+		.link {
+			color: #66b6eb;
+		}
+		.command pre {
+			width: 90%;
+			color: var(--command-text-color);
+		}
+		.command a {
+			width: 10%;
+			float: right;
+		}
+		pre::before {
+			content: '$ ';
+		}
+		.fa-hashtag {
+			padding-right: 10px;
+		}
+		.run {
+			border: 1px solid green;
+			background-color: green;
+			border-radius: 0.25em;
+			padding-right: 0.25em;
+			padding-left: 0.25em;
+			color:white;
+		}
+		.text {
+			font-size: 0.75em;
+		}
 	</style>
 	<link rel="stylesheet" href="{{root}}/css/fontawesome-all.min.css"/>
 </head>
@@ -149,11 +210,26 @@ <h5>Simple. Collaborative. Adaptable.</h5>
 </div>
 <main class="content">
 	<section>
-		<h3>About</h3>
-		<div class="intro">Gauge is a light-weight cross-platform test automation tool with the ability to author test cases in the business language.</div>
+		<h4>About</h4>
+		<div class="intro">Gauge is a fast light-weight cross-platform test automation tool.</div>
 	</section>
 	<section>
-		<h3>Project/Workspace</h3>
+		<span class="error"><i class="fas fa-exclamation-circle"></i>Gauge executable not found! </span><a href="#" class="installError"><span class="link">Read more.</span></a>
+		<ul>
+			<li>
+				<div class="instructions hidden">
+					<ul>
+						<li><div class="text">Install gauge using the following instruction:</div></li>
+						<li><h4>{{name}}</h4></li>
+						<li class="command"><pre>{{command}}</pre><a id="execute" href="{{installCommand}}"><span class="run">Run</span></a></li>
+						<li><div class="text">For other installation options <a href="https://gauge.org/get-started.html"><span class="link">click here.</span></a></div></li>
+					</ul>
+				</div>
+			</li>
+		</ul>
+	</section>
+	<section>
+		<h4>Project/Workspace</h4>
 		<ul>
 			<li>
 				<a class="action" href="command:gauge.execute.specification.all">
@@ -169,7 +245,7 @@ <h3>Project/Workspace</h3>
 		</ul>
 	</section>
 	<section>
-		<h3>Customize</h3>
+		<h4>Customize</h4>
 		<ul>
 			<li>
 				<a class="action" href="command:workbench.action.openGlobalSettings">
@@ -185,7 +261,7 @@ <h3>Customize</h3>
 		</ul>
 	</section>
 	<section>
-		<h3>Learn</h3>
+		<h4>Learn</h4>
 		<ul>
 			<li>
 				<a class="action" href="command:workbench.action.showCommands">
@@ -198,6 +274,17 @@ <h3>Learn</h3>
 					</span>
 				</a>
 			</li>
+			<li>
+				<a class="action" href="https://docs.gauge.org/longstart.html#gauge-terminologies">
+					<i class="fas fa-hashtag"></i>
+					<span>
+						<div>Open Gauge terminologies reference</div>
+						<span class="detail" title="Open gauge terminologies reference.">
+							Learn the gauge terminologies.
+						</span>
+					</span>
+				</a>
+			</li>
 			<li>
 				<a class="action" href="https://docs.gauge.org/syntax.html">
 					<i class="fas fa-code"></i>
@@ -225,6 +312,9 @@ <h5>Explore</h5>
 			<li>
 				<a href="https://getgauge-examples.github.io/">Examples</a>
 			</li>
+			<li>
+				<a href="https://blog.getgauge.io/">Blogs</a>
+			</li>
 			<li>
 				<a href="https://docs.gauge.org/howto/index.html">HowTo?</a>
 			</li>
@@ -257,5 +347,18 @@ <h5>Support</h5>
 	document.getElementById('doNotShow').addEventListener('click', function(){
 		document.getElementById('toggleWelcome').click();
 	});
+
+	var els = document.getElementsByClassName('installError');
+	Array.prototype.forEach.call(els, function(el) {
+		el.addEventListener('click', function(){
+			this.parentNode
+				.getElementsByClassName('instructions')[0]
+				.classList.toggle('hidden');
+		})
+	});
+
+	document.getElementById("execute").addEventListener('click', function(){
+		document.getElementById
+	});
 </script>
 </body>
diff --git a/src/welcome/welcome.ts b/src/welcome/welcome.ts
@@ -1,7 +1,10 @@
 import { Disposable, TextDocumentContentProvider, Uri, workspace,
     commands, ViewColumn, window, ExtensionContext } from "vscode";
 import { GaugeVSCodeCommands, VSCodeCommands } from "../constants";
+import { getGaugeVersionInfo } from '../gaugeVersion';
 import * as path from 'path';
+import { spawnSync } from 'child_process';
+import { TerminalProvider } from "../terminal/terminal";
 
 const GAUGE_SUPPRESS_WELCOME = 'gauge.welcome.supress';
 let welcomeUri = "gauge://authority/welcome";
@@ -24,7 +27,8 @@ export class WelcomePageProvider extends Disposable implements TextDocumentConte
             }),
             commands.registerCommand(GaugeVSCodeCommands.ToggleWelcome, () => {
                 this._context.globalState.update(GAUGE_SUPPRESS_WELCOME, !this.supressed());
-            })
+            },
+            new TerminalProvider(context))
         );
         if (upgraded || !this.supressed()) {
             commands.executeCommand(GaugeVSCodeCommands.Welcome);
@@ -35,15 +39,60 @@ export class WelcomePageProvider extends Disposable implements TextDocumentConte
         return this._context.globalState.get<boolean>(GAUGE_SUPPRESS_WELCOME);
     }
 
+    getLinuxDistribution(): string {
+        let dist = spawnSync('cat', ['/etc/issue']);
+        if (dist.error) {
+            return null;
+        }
+        return dist.stdout.toString();
+    }
+
+    getInstallCommandBasedOnOS(): any {
+        let installCommand: any = {};
+        switch (process.platform) {
+            case "win32":
+                installCommand.name = "choco";
+                installCommand.command = "choco install gauge";
+                return installCommand;
+            case "darwin":
+                installCommand.name = "brew";
+                installCommand.command = "brew install gauge";
+                return installCommand;
+            default:
+                if (this.getLinuxDistribution().indexOf("Ubuntu") !== -1) {
+                    installCommand.name = "apt";
+                    installCommand.command = "sudo apt-get install gauge";
+                    return installCommand;
+                } else {
+                    installCommand.name = "dnf";
+                    installCommand.command = "sudo dnf install gauge";
+                    return installCommand;
+                }
+        }
+    }
+
+    replaceText(text: string, rootPath: string): string {
+        let supress = this._context.globalState.get<Boolean>(GAUGE_SUPPRESS_WELCOME);
+        let replace = [{key : /{{installCommand}}/g, value : encodeURI('command:gauge.executeIn.terminal?' +
+                        JSON.stringify([this.getInstallCommandBasedOnOS().command]))},
+                        {key : /{{name}}/g, value : this.getInstallCommandBasedOnOS().name},
+                        {key : /{{command}}/g, value : this.getInstallCommandBasedOnOS().command},
+                        {key : /{{doNotShowWelcome}}/g, value: supress ? "checked" : "" },
+                        {key : /{{root}}/g, value : Uri.file(this._context.asAbsolutePath(rootPath)).toString()}];
+        replace.forEach((element) =>  {
+            console.log("key ", element.key);
+            console.log("value ", element.value);
+            text = text.replace(new RegExp(element.key), element.value);
+        });
+        return text;
+    }
+
     async provideTextDocumentContent(uri: Uri): Promise<string> {
         let rootPath = path.join('out', uri.path);
         let docPath = Uri.file(this._context.asAbsolutePath(path.join(rootPath, 'index.html')));
         const doc = await workspace.openTextDocument(docPath);
         let text =  doc.getText();
-        let supress = this._context.globalState.get<Boolean>(GAUGE_SUPPRESS_WELCOME);
-        return text
-            .replace(/{{doNotShowWelcome}}/g, supress ? "checked" : "")
-            .replace(/{{root}}/g, Uri.file(this._context.asAbsolutePath(rootPath)).toString());
+        return this.replaceText(text, rootPath);
     }
 
     dispose() {