Git ignore UI

[echarles]

Fixes #683

This add a context Ignore menu for untracked files. When the user clicks on Ignore, the server is requested to append a line in the .gitignore file (will create it if it does not exist) and then the .gitignore file is opened and shown to the user.

[mlucool]

Looks great!

Nitpick: I think there is an extra blank line between entries. Most projects gitignore uses whitespace for grouping. In this case, I would consider them all one group.

[echarles]

Thx @mlucool

yeah I don't like the extra blank line. It is there to avoid appending on the same last line if no \n is present at the end of the gitignore file. I was planning to be more clever in a second pass (should have mentioned that...)

I will wait a bit any feedback and will implement those for final review.

[fcollonval]

Thanks a lot @echarles. This looks really nice. And if indeed you could improve the code to introduce the line return only if needed. This will be awesome.

[echarles]

The las commits implement:

• A menu to show .gitignore file
• \n is added if not present, so new entries are grouped
• Ability to ignore the file or its extension

[mlucool]

Do you think ignore extension is common? If so, to prevent user error, maybe we should disable ignore extension at on ipynb and maybe py files? Also maybe we should say ignore *.[ext] files or something like that?

[kgryte]

@mlucool Ignoring all files having a given extension is supported by the GitHub desktop app, which is discussed in the linked issue and I believe the inspiration for the behavior here.

[echarles]

Yes, I have quickly added that based on @ianhi input in #683 (comment). I can remove it if we don't want that.

I am trying to get a better message for the right-click menu with something like the following which does not work - any idea to get a more dynamic right click menu with ignore *.[ext] files ?

      commands.addCommand(CommandIDs.gitIgnore, {
        label: 'Ignore',
        caption: `Ignore ${this.state.selectedFile.to}`,

If we keep the Ignore extension, I can exclude that menu for a predefined list of extension (I see a requirement coming to make that configurable, but if possible let's put that out-of-scope).

Waiting on more input/feedback here.

[ianhi]

I am trying to get a better message for the right-click menu with something like the following which does not work - any idea to get a more dynamic right click menu with ignore *.[ext] files ?

What about that is not working? Also https://jupyterlab.github.io/jupyterlab/modules/_coreutils_src_index_.pathext.html#extname may be a helpful thing to use.

Two tweaks I might make to phrasing in order to make it more obvious what is happening to users less experienced with Git:

1. Ignore -> Ignore this file
2. Add a parenthetical such as (add to .gitignore)

Overall I'm a big fan of where this going!

[ianhi]

Although, rather than speculate as to what would be less confusing to users it may be better to ask one. I think @sjhaque14 is a good representative of users as she is a competent python user who uses jupyterlab for her work, but is fairly new to using Git.

Sabina I'm curious what you would expect the result of the proposed menu commands to be? Also, would you expect the change to the .gitignore to be commited or not (see #683 (comment))?

[echarles]

Thx @ianhi for the help and inputs.

In the meantime, I have done a few more experiments to bring the file/extension name in the context menu (when the user right-clicks a file). It turns out the current Lumino Widget constructs is such that new commands needs to be created with the correct label... which we do not want (commands are meant to remain controlled in number and unique in intention).

We still have the option to have static and user-relevant naming as suggested which would be good enough. I will tag this ready for review in a few days.

[sjhaque14]

Thanks @ianhi for the mention. From a first glance, it is clear to me how to use the basic function – you go to the "Git" menu and select "Open .gitignore" to view the .gitignore file, or you can right click certain files and select "Ignore" to add its name to the .gitignore file. I was not clear on what the "Ignore Extensions" menu item is supposed to do. I initially thought that this meant users who had built jupyter extensions could add those extensions associated with a file to the .gitignore. But looking at it again, I understand that it adds the file extension (e.g. .ipynb) to the .gitignore, thus ignoring anything with that extension. That's certainly a very useful feature, and I don't think its inclusion in this proposed fix would detract from people being able to understand the basic function. Also, I do not expect that performing this menu item would automatically commit the changes – I would expect to have to commit the changes in a separate step.

[fcollonval]

In the meantime, I have done a few more experiments to bring the file/extension name in the context menu (when the user right-clicks a file). It turns out the current Lumino Widget constructs is such that new commands needs to be created with the correct label... which we do not want (commands are meant to remain controlled in number and unique in intention).

@echarles, I think the solution is to set the label and/or caption using a function

caption: () => `Ignore ${this.state.selectedFile.to}`

[echarles]

@echarles, I think the solution is to set the label an>d/or caption using a function
caption: () => Ignore ${this.state.selectedFile.to}

I have tried that and it also gives null pointer (without the function it fails directly without displaying the list, with the function it fails when you right click)

I have updated the label and the Ignore this file extension menu is only shown if the file has an effective extension different from ipynb and py.

[kgryte]

@echarles Why the exceptions for .py and .ipynb files?

Given that (a) Jupyter can be used for languages other than Python and thus scenarios in which a user may want to ignore all Python files is possible and (b) I may, e.g., be working on a JLab extension but never want notebooks added to the repo (in fact, excluding temporary demo notebooks is something I do relatively frequently when developing extensions), I don't see the need to make those two file extensions exceptions.

[echarles]

@echarles Why the exceptions for .py and .ipynb files?

Have taken that requirement from @mlucool on #705 (comment)

[mlucool]

I was somewhat surprised to by ability to exclude an extension as it seems error prone. PyCharm for example does not do extension level ignores in their UI:

In retrospect, I don't think .py should be excluded. Given jupyter is made for notebooks, it would feel odd to make it easy to add *.pynb to .gitignore.

That's just my 2c, it would be good to see if we can get consensus on this issue.

[fcollonval]

@echarles I found the problem for the label: setState is not instantaneous. Therefore, when the context menu is rendered, the state is not set. A step towards correcting it:

--- a/src/components/FileItem.tsx
+++ b/src/components/FileItem.tsx
@@ -33,7 +33,7 @@ export interface IFileItemProps {
   model: GitExtension;
   onDoubleClick: () => void;
   selected?: boolean;
-  selectFile?: (file: Git.IStatusFile | null) => void;
+  selectFile?: (file: Git.IStatusFile | null) => Promise<void>;
 }
 
 export interface IGitMarkBoxProps {
@@ -87,9 +87,9 @@ export class FileItem extends React.Component<IFileItemProps> {
         }
         onContextMenu={
           this.props.contextMenu &&
-          (event => {
+          (async event => {
             if (this.props.selectFile) {
-              this.props.selectFile(this.props.file);
+              await this.props.selectFile(this.props.file);
             }
             this.props.contextMenu(event);
           })
diff --git a/src/components/FileList.tsx b/src/components/FileList.tsx
index e8a8592..1c7dcbd 100644
--- a/src/components/FileList.tsx
+++ b/src/components/FileList.tsx
@@ -2,6 +2,7 @@ import { Dialog, showDialog, showErrorMessage } from '@jupyterlab/apputils';
 import { PathExt } from '@jupyterlab/coreutils';
 import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
 import { ISettingRegistry } from '@jupyterlab/settingregistry';
+import { PromiseDelegate } from '@lumino/coreutils';
 import { Menu } from '@lumino/widgets';
 import * as React from 'react';
 import { GitExtension } from '../model';
@@ -168,7 +169,10 @@ export class FileList extends React.Component<IFileListProps, IFileListState> {
 
     if (!commands.hasCommand(CommandIDs.gitIgnoreExtension)) {
       commands.addCommand(CommandIDs.gitIgnoreExtension, {
-        label: 'Ignore this file extension (add to .gitignore)',
+        label: () =>
+          `Ignore ${PathExt.extname(
+            this.state.selectedFile.to
+          )} extension (add to .gitignore)`,
         caption: 'Ignore this file extension (add to .gitignore)',
         execute: async () => {
           await this.props.model.ignore(this.state.selectedFile.to, true);
@@ -357,8 +361,12 @@ export class FileList extends React.Component<IFileListProps, IFileListState> {
     await this.addFile(...this.markedFiles.map(file => file.to));
   };
 
-  updateSelectedFile = (file: Git.IStatusFile | null) => {
-    this.setState({ selectedFile: file });
+  updateSelectedFile = (file: Git.IStatusFile | null): Promise<void> => {
+    const stateSet = new PromiseDelegate<void>();
+    this.setState({ selectedFile: file }, () => {
+      stateSet.resolve();
+    });
+    return stateSet.promise;
   };
 
   get markedFiles() {

This works. But it brings React error about virtual event handling.

[echarles]

@fcollonval Thx a lot for shimming in. I have opened #712 to track the fileitem state issue. This can be solved outside of this PR.

@mlucool My last commit allows to exclude py files (only ipynb extensions are excluded, which sounds logic for a notebook).

I think this PR takes everyone inputs and expectations, so it is ready for review.

[fcollonval]

Thanks @echarles I left a couple of comments and questions.

[echarles]

@fcollonval Thx a lot for your reviews. My commit implements your suggestions.

[kgryte]

A few small nits; otherwise, LGTM.

[echarles]

Thx @kgryte for your reviews. I have committed your suggestions.

[kgryte]

@fcollonval You have any other feedback for this PR?

[fcollonval]

/binder

[github-actions]

👈 Launch a binder JupyterLab on this branch

[github-actions]

👈 Launch a binder JupyterLab on this branch

[fcollonval]

@fcollonval You have any other feedback for this PR?

This is good to go for me. What about you @kgryte ?

[fcollonval]

LGTM

[kgryte]

LGTM. Will merge now..,

[echarles]

Thx all for the inputs, reviews and for merging this.

[fcollonval]

@meeseeksdev backport to 0.11.x

[lumberbot-app]

Owee, I'm MrMeeseeks, Look at me.

There seem to be a conflict, please backport manually. Here are approximate instructions:

1. Checkout backport branch and update it.

$ git checkout 0.11.x
$ git pull

2. Cherry pick the first parent branch of the this PR on top of the older branch:

$ git cherry-pick -m1 e3682d6d5c087f92477881c3beb7fb03318401f4

3. You will likely have some merge/cherry-pick conflict here, fix them and commit:

$ git commit -am 'Backport PR #705: Git ignore UI'

4. Push to a named branch :

git push YOURFORK 0.11.x:auto-backport-of-pr-705-on-0.11.x

5. Create a PR against branch 0.11.x, I would have named this PR:

"Backport PR #705 on branch 0.11.x"

And apply the correct labels and milestones.

Congratulation you did some good work ! Hopefully your backport PR will be tested by the continuous integration and merged soon!

If these instruction are inaccurate, feel free to suggest an improvement.