Bug 347310 - [client][git] Git clone dialog in not intuitive

Change-Id: Ibbd8078baa9aabb8935c4b71d09ee74833c15179

4 files changed, 147 insertions, 84 deletions

diff --git a/bundles/org.eclipse.orion.client.git/static/git-clone.js b/bundles/org.eclipse.orion.client.git/static/git-clone.js
index df7c6f4..e37f9f1 100644
--- a/bundles/org.eclipse.orion.client.git/static/git-clone.js
+++ b/bundles/org.eclipse.orion.client.git/static/git-clone.js
@@ -110,7 +110,7 @@ dojo.addOnLoad(function() {
 			

 					// global commands

 					mGitCommands.createFileCommands(serviceRegistry, commandService, explorer, "pageActions", "selectionTools");

-					mGitCommands.createGitClonesCommands(serviceRegistry, commandService, explorer, "pageActions", "selectionTools");

+					mGitCommands.createGitClonesCommands(serviceRegistry, commandService, explorer, "pageActions", "selectionTools", fileClient);

 			

 					mGitCommands.updateNavTools(serviceRegistry, explorer, "pageActions", "selectionTools", {});

 			

diff --git a/bundles/org.eclipse.orion.client.git/static/js/gitCommands.js b/bundles/org.eclipse.orion.client.git/static/js/gitCommands.js
index 2eb305f..42e1e22 100644
--- a/bundles/org.eclipse.orion.client.git/static/js/gitCommands.js
+++ b/bundles/org.eclipse.orion.client.git/static/js/gitCommands.js
@@ -119,71 +119,6 @@ var exports = {};
 	};

 	

 	exports.createFileCommands = function(serviceRegistry, commandService, explorer, toolbarId) {

-		var cloneGitRepositoryCommand = new mCommands.Command({

-			name : "Clone Repository",

-			tooltip : "Clone Git Repository to Workspace",

-			image : "/images/git-clone.gif",

-			id : "eclipse.cloneGitRepository",

-			callback : function(item) {

-				var dialog = new widgets.CloneGitRepositoryDialog({

-					func : function(gitUrl, path, name){

-						exports.getDefaultSshOptions(serviceRegistry).then(function(options){

-									var func = arguments.callee;

-									serviceRegistry.getService("orion.git.provider").then(function(gitService) {

-										serviceRegistry.getService("orion.page.message").then(function(progressService) {

-											var deferred = gitService.cloneGitRepository(name, gitUrl, path, explorer.defaultPath, options.gitSshUsername, options.gitSshPassword, options.knownHosts, options.gitPrivateKey, options.gitPassphrase);

-											progressService.showWhile(deferred, "Cloning repository: " + gitUrl).then(

-												function(jsonData, secondArg) {

-													exports.handleProgressServiceResponse(jsonData, options, serviceRegistry,

-															function(jsonData){

-																if(explorer.redisplayClonesList){

-																	dojo.hitch(explorer, explorer.redisplayClonesList)();

-																}

-															}, func, "Clone Git Repository", gitUrl);

-												});

-										});

-									});

-								});

-							}

-				});

-						

-				dialog.startup();

-				dialog.show();

-			},

-			visibleWhen : function(item) {

-				return true;

-			}

-		});

-		

-		commandService.addCommand(cloneGitRepositoryCommand, "dom");

-		

-		var initGitRepositoryCommand = new mCommands.Command({

-			name : "Init Repository",

-			tooltip : "Init Git Repository in Workspace",

-			id : "eclipse.initGitRepository",

-			callback : function(item) {

-				var dialog = new widgets.InitGitRepositoryDialog({

-					func : function(target){

-								serviceRegistry.getService("orion.git.provider").then(function(gitService) {

-									gitService.initGitRepository(target).then(function(){

-											if(explorer.redisplayClonesList){

-												dojo.hitch(explorer, explorer.redisplayClonesList)();

-											}

-									});

-								});

-

-							}

-				});

-						

-				dialog.startup();

-				dialog.show();

-			},

-			visibleWhen : function(item) {

-				return true;

-			}

-		});

-		

-		commandService.addCommand(initGitRepositoryCommand, "dom");

 		

 		// TODO: not used by the git clone navigator, could be removed

 		var linkRepoCommand = new mCommands.Command({

@@ -589,7 +524,76 @@ var exports = {};
 		commandService.addCommand(addTagCommand, "object");

 	};

 	

-	exports.createGitClonesCommands = function(serviceRegistry, commandService, explorer, toolbarId) {

+	exports.createGitClonesCommands = function(serviceRegistry, commandService, explorer, toolbarId, selectionTools, fileClient) {

+		

+		var cloneGitRepositoryCommand = new mCommands.Command({

+			name : "Clone Repository",

+			tooltip : "Clone Git Repository to Workspace",

+			image : "/images/git-clone.gif",

+			id : "eclipse.cloneGitRepository",

+			callback : function(item) {

+				var dialog = new widgets.CloneGitRepositoryDialog({

+					serviceRegistry: serviceRegistry,

+					fileClient: fileClient,

+					func : function(gitUrl, path, name){

+						exports.getDefaultSshOptions(serviceRegistry).then(function(options){

+									var func = arguments.callee;

+									serviceRegistry.getService("orion.git.provider").then(function(gitService) {

+										serviceRegistry.getService("orion.page.message").then(function(progressService) {

+											var deferred = gitService.cloneGitRepository(name, gitUrl, path, explorer.defaultPath, options.gitSshUsername, options.gitSshPassword, options.knownHosts, options.gitPrivateKey, options.gitPassphrase);

+											progressService.showWhile(deferred, "Cloning repository: " + gitUrl).then(

+												function(jsonData, secondArg) {

+													exports.handleProgressServiceResponse(jsonData, options, serviceRegistry,

+															function(jsonData){

+																if(explorer.redisplayClonesList){

+																	dojo.hitch(explorer, explorer.redisplayClonesList)();

+																}

+															}, func, "Clone Git Repository", gitUrl);

+												});

+										});

+									});

+								});

+							}

+				});

+						

+				dialog.startup();

+				dialog.show();

+			},

+			visibleWhen : function(item) {

+				return true;

+			}

+		});

+		

+		commandService.addCommand(cloneGitRepositoryCommand, "dom");

+		

+		var initGitRepositoryCommand = new mCommands.Command({

+			name : "Init Repository",

+			tooltip : "Init Git Repository in Workspace",

+			id : "eclipse.initGitRepository",

+			callback : function(item) {

+				var dialog = new widgets.InitGitRepositoryDialog({

+					func : function(target){

+								serviceRegistry.getService("orion.git.provider").then(function(gitService) {

+									gitService.initGitRepository(target).then(function(){

+											if(explorer.redisplayClonesList){

+												dojo.hitch(explorer, explorer.redisplayClonesList)();

+											}

+									});

+								});

+

+							}

+				});

+						

+				dialog.startup();

+				dialog.show();

+			},

+			visibleWhen : function(item) {

+				return true;

+			}

+		});

+		

+		commandService.addCommand(initGitRepositoryCommand, "dom");

+		

 		var deleteCommand = new mCommands.Command({

 			name: "Delete Clone",

 			image: "/images/remove.gif",

diff --git a/bundles/org.eclipse.orion.client.git/static/js/widgets/CloneGitRepositoryDialog.js b/bundles/org.eclipse.orion.client.git/static/js/widgets/CloneGitRepositoryDialog.js
index b7e7265..eb8ae3b 100644
--- a/bundles/org.eclipse.orion.client.git/static/js/widgets/CloneGitRepositoryDialog.js
+++ b/bundles/org.eclipse.orion.client.git/static/js/widgets/CloneGitRepositoryDialog.js
@@ -10,7 +10,7 @@
 
 /*global dojo dijit widgets*/
 /*jslint browser:true*/
-define(['dojo', 'dijit', 'dijit/Dialog', 'orion/widgets/_OrionDialogMixin'], function(dojo, dijit) {
+define(['dojo', 'dijit', 'dijit/Dialog', 'orion/widgets/_OrionDialogMixin', 'orion/widgets/DirectoryPrompterDialog'], function(dojo, dijit) {
 
 /**
  * @param options {{ 
@@ -24,6 +24,7 @@ dojo.declare("widgets.CloneGitRepositoryDialog", [dijit.Dialog, widgets._OrionDi
 	constructor : function() {
 		this.inherited(arguments);
 		this.options = arguments[0] || {};
+		this.createProject = true;
 	},
 	postMixInProperties : function() {
 		this.inherited(arguments);
@@ -32,9 +33,49 @@ dojo.declare("widgets.CloneGitRepositoryDialog", [dijit.Dialog, widgets._OrionDi
 		this.gitPathLabelText = "Existing directory:";

 		this.gitNameLabelText = "New project:";
 	},
-	// Stuff from newItemDialog.js is below
+	postCreate : function(){
+		this.inherited(arguments);
+		dojo.connect(this.existingDirectoryLink, "onclick", null, dojo.hitch(this, this.showExistingFolder));
+		dojo.connect(this.newProjectLink, "onclick", null, dojo.hitch(this, this.showNewProject));
+		dojo.connect(this.openDirectoryPickerLink, "onclick", null, dojo.hitch(this, this.openDirectoryPickerDialog));
+	},
 	execute: function() {
-		this.options.func(this.gitUrl.value, this.gitPath.value, this.gitName.value);
+		this.options.func(
+				this.gitUrl.value,
+				this.createProject ? undefined : this.gitPath.value,
+				this.createProject ? this.gitName.value : undefined
+				);
+	},
+	showExistingFolder: function(){
+		this.createProject = false;
+		this.newProjectSection.style.display = "none";
+		this.newProjectSection_1.style.display = "none";
+		this.existingProjectSection.style.display = "table-row";
+		this.existingProjectSection_1.style.display = "table-row";
+		this.openDirectoryPickerDialog();
+	},
+	showNewProject: function(){
+		this.createProject = true;
+		this.newProjectSection.style.display = "table-row";
+		this.newProjectSection_1.style.display = "table-row";
+		this.existingProjectSection.style.display = "none";
+		this.existingProjectSection_1.style.display = "none";
+	},
+	openDirectoryPickerDialog: function(){
+		var self = this;
+		var dialog = new widgets.DirectoryPrompterDialog({
+				title: "Choose a Folder",
+				serviceRegistry: this.options.serviceRegistry,
+				fileClient: this.options.fileClient,	
+				func: dojo.hitch(this, function(targetFolder) {
+					if (targetFolder && targetFolder.Location) {
+						this.gitPath.value = targetFolder.Location;
+						this.shownGitPath.innerHTML = "<a href='/navigate/table.html#"+targetFolder.ChildrenLocation+"'>"+targetFolder.Name+"</a>";
+					}
+				})
+			});
+			dialog.startup();
+			dialog.show();
 	}
 });
 });
\ No newline at end of file
diff --git a/bundles/org.eclipse.orion.client.git/static/js/widgets/templates/CloneGitRepositoryDialog.html b/bundles/org.eclipse.orion.client.git/static/js/widgets/templates/CloneGitRepositoryDialog.html
index 9d53850..6a3b188 100644
--- a/bundles/org.eclipse.orion.client.git/static/js/widgets/templates/CloneGitRepositoryDialog.html
+++ b/bundles/org.eclipse.orion.client.git/static/js/widgets/templates/CloneGitRepositoryDialog.html
@@ -9,34 +9,52 @@
 		<!-- Actual content here -->
 		<div style="display: table">
 			<div style="display: table-row">
-				<div style="display: table-cell; padding: 5">
+				<div style="display: table-cell; padding: 5; min-width: 100px">
 					<label dojoAttachPoint="gitUrlLabel" for="${id}_gitUrl" style="padding-right: 10">${gitUrlLabelText}</label>
 				</div>
-				<div style="display: table-cell; padding: 5; width: 40em; text-align: left;">
-					<input dojoAttachPoint="gitUrl" id="${id}_gitUrl" style="display: inline-block; width: 98%;" value="">
+				<div style="display: table-cell; padding: 5; width: 40em; text-align: right;">
+					<input dojoAttachPoint="gitUrl" id="${id}_gitUrl" style="display: inline-block; width: 100%;" value="">
 				</div>
 			</div>

-			<div style="display: table-row">

-				<div style="display: table-cell; padding: 5">

-					<label dojoAttachPoint="gitPathLabel" for="${id}_gitPath" style="padding-right: 10">${gitPathLabelText}</label>

+			<div style="display: table-row" dojoAttachPoint="newProjectSection">

+				<div style="display: table-cell; padding: 5; min-width: 100px">

+					<label dojoAttachPoint="gitNameLabel" for="${id}_gitName" style="padding-right: 10">${gitNameLabelText}</label>

 				</div>

-				<div style="display: table-cell; padding: 5; width: 40em; text-align: left;">

-					<input dojoAttachPoint="gitPath" id="${id}_gitPath" style="display: inline-block; width: 98%;" value="">

-					<br><i>This is to be replaced with directory picker dialog</i>

+				<div style="display: table-cell; padding: 5; width: 40em; text-align: right;">

+					<input dojoAttachPoint="gitName" id="${id}_gitName" style="display: inline-block; width: 100%;" value="">

 				</div>

+			</div>
+			<div style="display: table-row" dojoAttachPoint="newProjectSection_1">
+				<div style="display: table-cell; padding: 5; min-width: 100px">
+					&nbsp;
+				</div>
+				<div style="display: table-cell; padding: 5; width: 40em; text-align: right;">
+					<a href="javascript:"  dojoAttachPoint="existingDirectoryLink">Choose existing directory</a>
+				</div>
 			</div>

-			<div style="display: table-row">

-				<div style="display: table-cell; padding: 5">

-					<label dojoAttachPoint="gitNameLabel" for="${id}_gitName" style="padding-right: 10">${gitNameLabelText}</label>

+			<div style="display: none" dojoAttachPoint="existingProjectSection">

+				<div style="display: table-cell; padding: 5; min-width: 100px">

+					<label dojoAttachPoint="gitPathLabel" for="${id}_gitPath" style="padding-right: 10">${gitPathLabelText}</label>

 				</div>

 				<div style="display: table-cell; padding: 5; width: 40em; text-align: left;">

-					<input dojoAttachPoint="gitName" id="${id}_gitName" style="display: inline-block; width: 98%;" value="">

+					<input dojoAttachPoint="gitPath" id="${id}_gitPath" type="hidden" value="">
+					<span dojoAttachPoint="shownGitPath"></span>

 				</div>

 			</div>
+			<div style="display: none" dojoAttachPoint="existingProjectSection_1">
+				<div style="display: table-cell; padding: 5">
+					&nbsp;
+				</div>
+				<div style="display: table-cell; padding: 5; width: 40em; text-align: right;">
+					<a href="javascript:" dojoAttachPoint="openDirectoryPickerLink" style="margin-right: 0.5em">Change directory</a>
+					<a href="javascript:"  dojoAttachPoint="newProjectLink">Create new project</a>
+				</div>
+			</div>
+			
 			<div style="display: table-row">
 				<div style="display: table-cell; padding: 5"></div>
 				<div style="display: table-cell; padding: 5">
-					<button dojoAttachPoint="cloneItemButton" dojoType="dijit.form.Button" type="submit" value="OK" style="padding: 20 0 10 0; float: right; clear: both;">Next &gt;
+					<button dojoAttachPoint="cloneItemButton" dojoType="dijit.form.Button" type="submit" value="OK" style="padding: 20 0 10 0; float: right; clear: both;">OK
 					</button>
 				</div>
 			</div>