"git add" from file browser?

[krassowski]

Description

I would like to be able to add a file from the file browser, rather than from the list of untracked filed (it is long for me on some projects, and it is not organised into directories thus it is difficult to find the specific file I want to add). However, I always have this file located in the file browser so it would be of great help if I could just add it from the context menu of the item listing of files in the built-in file browser.

[fcollonval]

This could be linked to #124

It may be hard to achieve a nice integration. In particular, the entry should appear only for untracked files in your example. And this can only be achieved through css selector. However, there is no easy away to add some attributes within the file browser listing for what I know.

A raw integration (i.e. display all commands even if not applicable) will probably confuse beginners.

So I do think adding a filter feature on the file list in the git panel is a better solution.

[krassowski]

Yes, having a smart context is not easy, but it is possible. Rather than modify the selector, you catch all files and then toggle the visibility of the item by isVisible callback.

This would be something like:

import { Contents } from '@jupyterlab/services';
import { IFileBrowserFactory } from '@jupyterlab/filebrowser';
import { toArray } from '@lumino/algorithm';

// requires: [..., IFileBrowserFactory];
factory: IFileBrowserFactory
tracker = factory.tracker;

getSelectedBrowserItems(): Contents.IModel[] {
  const widget = tracker.currentWidget;
  if (!widget) {
    return;
  }
  const items = toArray(widget.selectedItems());
  return items;
}

commands.addCommand('git-add-from-browser', {
  execute: () => {
    const items = getSelectedBrowserItems();
    for (let item of items) {
      if (git.isUntracked(item.path)) {
        git.add(item.path);
      }
    }
  },
  isVisible: () => {
    const items = getSelectedBrowserItems();
    return !!items.find((item) => git.isUntracked(item.path)};
  },
  icon: addIcon,
  label: 'Add',
});

gitMenu = new Menu({commands: app.commands});
gitMenu.title.label = 'Git';
gitMenu.title.icon = gitIcon.bindprops({ stylesheet: 'menuItem' });

gitMenu.addItem({
  command: 'git-add-from-browser',
  selector: '.jp-DirListing-content'
});

(This assumes there would always be an action to offer in the Git menu- if fille does not need adding, it might need removing, etc).

[fcollonval]

Thanks @krassowski for the snippet.