Adds a Move button to the notebooklist interface next to Rename. #941

NHDaly · 2016-01-10T01:51:14Z

With this button, you can now move files or directories to any path in
the notebook, including creating new directories (like 'mv -p'). To move
a file, you specify the new destination directory's path.

This achieves the same effect as renaming a file with a new relative
path, but is more clear to users unfamiliar with unix commands --
especially with regard to moving to a parent directory.

Can only move one file at a time currently.

Closes #471.

NHDaly · 2016-01-10T01:53:35Z

In this Pull Request the button only supports Moving 1 selected item at a time, but I've left a TODO in the code and also opened Issue #942 to address moving multiple.

Should I reference the issue number from the TODO? I'm still fairly new to open source codebases. :)

Thanks!

captainsafia · 2016-01-17T04:53:23Z

notebook/static/tree/js/notebooklist.js

+            return;
+        }
+
+        var that = this;


I think it would make more sense to move this variable declaration to the top of the function and use that instead of this throughout.

Done! Thanks. (Extremely new to Javascript; why do we even create the that variable? I was just following the convention of the surrounding functions.)

Good question, @NHDaly! I'm gonna give explaining it a shot and let me know if I am unclear. It all boils down to scoping. In JavaScript, the this keyword is used to refer to the object that the function you are currently in is tied to. In this case, this references NotebookList. You can confirm this by adding a console.log(this) statement to the beginning of the move_selected function. Now, let's say that inside your move_selected function, you create a new object with functions as you do with the dialog in this case. Your this now references a completely different object within those functions. You can test this out by adding a console.log(this) right before line 741. But what if in this new context you want to reference the NotebookList as you do on line 741? Well, you store the value of this in a variable called that when this references the object you later want to reference and then use that in functions where this does not reference that object.

So in reality, you don't particularly need it for the first few lines at the top since this references NotebookList in those cases but I like to declare at the top and use it consistently so that it is obvious that throughout the code anywhere that is used we are referencing a NotebookList object.

Let me know if any of that needs clarification! this is definitely a tricky topic in JavaScript.

Thanks Safia, nope that makes tons of sense now. Gotcha! Clever! Unnamed functions ... pretty crazy.

Thanks for taking the time to explain that to me! :)

captainsafia · 2016-01-17T04:55:42Z

Good stuff, @NHDaly! I posted some notes inline.

captainsafia · 2016-01-17T04:57:53Z

notebook/static/tree/js/notebooklist.js

+                        });
+                    }
+                },
+                Cancel : {}


We're looking to change our button orders so that the "Cancel" is always on the left and the action is on the right. So these should be switched to be compatible with future changes.

Done. That makes sense; thanks!

NHDaly · 2016-01-19T06:47:02Z

Cool, thanks for looking at this! :) I've addressed your suggestions in ce24663! :)

Cheers!

NHDaly · 2016-01-19T07:21:24Z

notebook/static/tree/js/notebooklist.js

+                });
+                input.focus();
+                // Highlight the current path in the input box.
+                input.select();


Open Question: This is how the Rename box works, which makes sense. But should the Move button start with a pre-selected path? I feel like more often you're going to be modifying the path rather than overwriting it with an entirely new path, so maybe this should just move the cursor to the end instead of selecting the input.

Thoughts? :)

So I'm almost tempted to say that the Move functionality should prompt the user to select a directory to move a file into with a dropdown. I say this for two reasons.

To make the creating a directory and moving something into a directory two distinctly different tasks.

To conform with more tradition UI where the user doesn't enter a path to move files to manually.

I'm not sure how difficult creating a dropdown would be, but happy to help you work through it.

The move UI in the GitHub webapp is really cool.

On Wed, Jan 20, 2016 at 7:55 AM, Safia Abdalla [email protected]
wrote:

In notebook/static/tree/js/notebooklist.js
#941 (comment):

console.warn('Error durring moving :', e);

});

}

}

},

open : function () {

// Upon ENTER, click the OK button.

input.keydown(function (event) {

if (event.which === keyboard.keycodes.enter) {

d.find('.btn-primary').first().click();

return false;

}

});

input.focus();

// Highlight the current path in the input box.

input.select();

So I'm almost tempted to say that the Move functionality should prompt the
user to select a directory to move a file into with a dropdown. I say this
for two reasons.

To make the creating a directory and moving something into a
directory two distinctly different tasks.

To conform with more tradition UI where the user doesn't enter a
path to move files to manually.

I'm not sure how difficult creating a dropdown would be, but happy to help
you work through it.

—
Reply to this email directly or view it on GitHub
https://github.com/jupyter/notebook/pull/941/files#r50272758.

Brian E. Granger
Associate Professor of Physics and Data Science
Cal Poly State University, San Luis Obispo
@ellisonbg on Twitter and GitHub
[email protected] and [email protected]

Hm. Now that I think about it @ellisonbg's recommendation is a good one and you won't have to steer too far from the code that you have currently written to make it happen.

Here is the help page for GitHub's move feature. So the way I imagine the user experience for this working is as follows.

User selects a checkbox on a file in the file tree.

User clicks the move button in the toolbar above.

Filename in the file tree gets converted into a file path relative to the directory the user is in.

User writes within the textbox the new path.

User hits enter and the file is moved to a new location if there is no error.

Thoughts on this, @NHDaly?

Part of what is cool about the Github approach is that as you type paths
with / it detects that and moves those into the path part. Really slick.

On Wed, Jan 20, 2016 at 8:58 AM, Safia Abdalla [email protected]
wrote:

In notebook/static/tree/js/notebooklist.js
#941 (comment):

console.warn('Error durring moving :', e);

});

}

}

},

open : function () {

// Upon ENTER, click the OK button.

input.keydown(function (event) {

if (event.which === keyboard.keycodes.enter) {

d.find('.btn-primary').first().click();

return false;

}

});

input.focus();

// Highlight the current path in the input box.

input.select();

Hm. Now that I think about it @ellisonbg https://github.com/ellisonbg's
recommendation is a good one and you won't have to steer too far from the
code that you have currently written to make it happen.

Here https://help.github.com/articles/moving-a-file-to-a-new-location/
is the help page for GitHub's move feature. So the way I imagine the user
experience for this working is as follows.

User selects a checkbox on a file in the file tree.

User clicks the move button in the toolbar above.

Filename in the file tree gets converted into a file path relative
to the directory the user is in.

User writes within the textbox the new path.

User hits enter and the file is moved to a new location if there is
no error.

Thoughts on this, @NHDaly https://github.com/NHDaly?

—
Reply to this email directly or view it on GitHub
https://github.com/jupyter/notebook/pull/941/files#r50282784.

Brian E. Granger
Associate Professor of Physics and Data Science
Cal Poly State University, San Luis Obispo
@ellisonbg on Twitter and GitHub
[email protected] and [email protected]

@captainsafia: I believe the flow you have described is exactly how the Rename button already works. You can use Rename to move a file to a different directory by changing the relative path. E.g:
To move a file to a parent directory:

Select checkbox on file.

Press Rename. The textbox is pre-populated with just the filename + extension (e.g. "my_notebook.pynb")

Prepend ../ to the name (e.g. changing it to "../my_notebook.pynb")

Enter.

That's all done with relative paths. Is that what you were describing? However, I don't think this is intuitive for a user not familiar with Unix, who wouldn't think to rename a file to "../" to move it up a directory. That's why I wanted to add a Move button.

@ellisonbg + @captainsafia: Yeah, wow, that is a slick UI. I love it! That said, I think it would be good to separate that fancy UI into a separate PR? It works almost the same as this code, but builds a fancier UI on top of it. If we're happy with the semantics in this PR, I'd prefer starting a new one for the fancier interface. Does that sound okay?

@ellisonbg + @captainsafia: Also, I wonder about how well the github style interface would support moving multiple files? I have opened #942 to support moving multiple files from the Move dialogue.

I guess maybe you could do the same thing as the Github UI, but leave off the file name?

With this button, you can now move files or directories to any path in the notebook, including creating new directories (like 'mv -p'). To move a file, you specify the new destination directory's path. This achieves the same effect as renaming a file with a new relative path, but is more clear to users unfamiliar with unix commands -- especially with regard to moving to a parent directory. Can only move one file at a time currently.

Part of addressing Issue #941.

…iod. The Move button expects a file path, which shouldn't include a file extension suffix.

NHDaly · 2016-02-04T05:22:01Z

Friendly ping? :)

Adds a Move button to the notebooklist interface next to Rename.

minrk · 2016-02-04T21:20:15Z

@NHDaly thanks!

NHDaly · 2016-02-04T23:38:48Z

No problem! (Yay!! My first merged-in GitHub PR! haha 💃)

captainsafia · 2016-02-04T23:40:54Z

Congrats! Looking forward to more great PRs from you, @NHDaly!

NHDaly · 2016-02-04T23:41:14Z

hahaha thanks. Awesome gif.

willingc · 2016-02-04T23:42:31Z

@NHDaly Nice job! Welcome to Open Source and Jupyter 🏄 @captainsafia sends great gifs.

annieeby · 2018-10-12T19:53:26Z

sorry for dumb nube question but how do i actually use your cool move button to move files in Jupyter?

captainsafia reviewed Jan 17, 2016
View reviewed changes

NHDaly reviewed Jan 19, 2016
View reviewed changes

NHDaly mentioned this pull request Jan 20, 2016

Support for moving multiple selected items to the same destination. #942

Closed

NHDaly added 5 commits February 3, 2016 19:22

Switched "Move Items" Cancel/Okay button orders + variable clean-up.

a05b947

Part of addressing Issue #941.

Removed code unnecessary for Move to select the file name up to a per…

ec47775

…iod. The Move button expects a file path, which shouldn't include a file extension suffix.

changed initial input focus behavior

ac9b107

adds TODO regarding the fancier UI

ecbeb59

minrk added this to the 5.0 milestone Feb 4, 2016

minrk added a commit that referenced this pull request Feb 4, 2016

Merge pull request #941 from NHDaly/MoveButton

7643a2f

Adds a Move button to the notebooklist interface next to Rename.

minrk merged commit 7643a2f into jupyter:master Feb 4, 2016

NHDaly deleted the MoveButton branch February 13, 2016 04:45

NHDaly mentioned this pull request Feb 13, 2016

drag and drop files into folders JuliaCloud/JuliaBox#73

Open

parthea mentioned this pull request Dec 3, 2016

Feature Request: Add ability to move notebooks within Datalab googledatalab/datalab#1066

Closed

NHDaly mentioned this pull request Oct 12, 2018

Support for moving files #471

Closed

github-actions bot added the status:resolved-locked label Mar 30, 2021

github-actions bot locked as resolved and limited conversation to collaborators Mar 30, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Adds a Move button to the notebooklist interface next to Rename. #941

Adds a Move button to the notebooklist interface next to Rename. #941

NHDaly commented Jan 10, 2016

NHDaly commented Jan 10, 2016

captainsafia Jan 17, 2016

NHDaly Jan 19, 2016

captainsafia Jan 19, 2016

NHDaly Jan 20, 2016

captainsafia commented Jan 17, 2016

captainsafia Jan 17, 2016

NHDaly Jan 19, 2016

NHDaly commented Jan 19, 2016

NHDaly Jan 19, 2016

captainsafia Jan 20, 2016

ellisonbg Jan 20, 2016

captainsafia Jan 20, 2016

ellisonbg Jan 20, 2016

NHDaly Jan 21, 2016

NHDaly Jan 21, 2016

NHDaly commented Feb 4, 2016

minrk commented Feb 4, 2016

NHDaly commented Feb 4, 2016

captainsafia commented Feb 4, 2016

NHDaly commented Feb 4, 2016

willingc commented Feb 4, 2016

annieeby commented Oct 12, 2018

Adds a Move button to the notebooklist interface next to Rename. #941

Adds a Move button to the notebooklist interface next to Rename. #941

Conversation

NHDaly commented Jan 10, 2016

NHDaly commented Jan 10, 2016

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

captainsafia commented Jan 17, 2016

Choose a reason for hiding this comment

Choose a reason for hiding this comment

NHDaly commented Jan 19, 2016

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

NHDaly commented Feb 4, 2016

minrk commented Feb 4, 2016

NHDaly commented Feb 4, 2016

captainsafia commented Feb 4, 2016

NHDaly commented Feb 4, 2016

willingc commented Feb 4, 2016

annieeby commented Oct 12, 2018