Only conditionally activate binder button.

Author: ian-r-rose

package.json

@@ -38,6 +38,7 @@
     "@jupyterlab/docregistry": "^0.12.0",
     "@jupyterlab/filebrowser": "^0.12.0",
     "@jupyterlab/services": "^0.51.0",
+    "@phosphor/algorithm": "^1.1.2",
     "@phosphor/widgets": "^1.5.0"
   },
   "devDependencies": {

src/browser.ts

@@ -1,6 +1,10 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
+import {
+  find
+} from '@phosphor/algorithm';
+
 import {
   PanelLayout, Widget
 } from '@phosphor/widgets';
@@ -21,9 +25,22 @@ import {
   GitHubDrive
 } from './contents';
 
+
+/**
+ * The base url for a mybinder deployment.
+ */
 const MY_BINDER_BASE_URL = 'https://mybinder.org/v2/gh';
+
+/**
+ * The GitHub base url.
+ */
 const GITHUB_BASE_URL = 'https://github.com';
 
+/**
+ * The className for disabling the mybinder button.
+ */
+const MY_BINDER_DISABLED = 'jp-MyBinderButton-disabled';
+
 /**
  * Widget for hosting the GitHub filebrowser.
  */
@@ -37,18 +54,27 @@ class GitHubFileBrowser extends Widget {
     this._browser = browser;
     this._drive = drive;
 
+    // Create an editable name for the user/org name.
     this.userName = new GitHubEditableName(drive.user, '<Edit User>');
     this.userName.addClass('jp-GitHubEditableUserName');
     this.userName.node.title = 'Click to edit user/organization';
     this._browser.toolbar.addItem('user', this.userName);
     this.userName.name.changed.connect(this._onUserChanged, this);
 
-    const openGitHubButton = new ToolbarButton({
+    // Create a button that opens GitHub at the appropriate
+    // repo+directory.
+    this._openGitHubButton = new ToolbarButton({
       onClick: () => {
+        let url = GITHUB_BASE_URL;
+        // If there is no valid user, do nothing.
+        if (!this._drive.validUserState.get()) {
+          window.open(url);
+          return;
+        }
         const user = this._drive.user;
         const path = this._browser.model.path;
         const repo = path.split('/')[0].split(':')[1];
-        let url = URLExt.join(GITHUB_BASE_URL, user);
+        url = URLExt.join(url, user);
         if (repo) {
           const dirPath = URLExt.join(repo, ...path.split('/').slice(1));
           url = URLExt.join(url, repo, 'tree', 'master', dirPath);
@@ -58,10 +84,15 @@ class GitHubFileBrowser extends Widget {
       className: 'jp-GitHubIcon',
       tooltip: 'Open this repository on GitHub'
     });
-    this._browser.toolbar.addItem('GitHub', openGitHubButton);
+    this._browser.toolbar.addItem('GitHub', this._openGitHubButton);
 
-    const launchBinderButton = new ToolbarButton({
+    // Create a button the opens MyBinder to the appropriate repo.
+    this._launchBinderButton = new ToolbarButton({
       onClick: () => {
+        // If binder is not active for this directory, do nothing.
+        if (!this._binderActive) {
+          return;
+        }
         const user = this._drive.user;
         const repo = this._browser.model.path.split('/')[0].split(':')[1];
         const url = URLExt.join(MY_BINDER_BASE_URL, user, repo, 'master'); 
@@ -70,7 +101,12 @@ class GitHubFileBrowser extends Widget {
       tooltip: 'Launch this repository on mybinder.org',
       className: 'jp-MyBinderButton'
     });
-    this._browser.toolbar.addItem('binder', launchBinderButton);
+    this._browser.toolbar.addItem('binder', this._launchBinderButton);
+
+    // Set up a listener to check if we can launch mybinder.
+    this._browser.model.pathChanged.connect(this._onPathChanged, this);
+    // Trigger an initial pathChanged to check for binder state.
+    this._onPathChanged();
 
     this._drive.rateLimitedState.changed.connect(this._updateErrorPanel, this);
     this._drive.validUserState.changed.connect(this._updateErrorPanel, this);
@@ -101,6 +137,40 @@ class GitHubFileBrowser extends Widget {
     });
   }
 
+  /**
+   * React to the path changing for the browser.
+   */
+  private _onPathChanged(): void {
+    const path = this._browser.model.path;
+    // Check for a valid user.
+    if(!this._drive.validUserState.get()) {
+      this._launchBinderButton.addClass(MY_BINDER_DISABLED);
+      this._binderActive = false;
+      return;
+    }
+    // Check for a valid repo.
+    const repo = path.split('/')[0].split(':')[1];
+    if (!repo) {
+      this._launchBinderButton.addClass(MY_BINDER_DISABLED);
+      this._binderActive = false;
+      return;
+    }
+    // Check for one of the special values indicating we can
+    // launch the repository.
+    const item = find(this._browser.model.items(), i => {
+      return i.name === 'requirements.txt' || i.name === 'environment.yml' ||
+             i.name === 'apt.txt' || i.name === 'REQUIRE' ||
+             i.name === 'Dockerfile';
+    });
+    if (item) {
+      this._launchBinderButton.removeClass(MY_BINDER_DISABLED);
+      this._binderActive = true;
+      return;
+    }
+    this._launchBinderButton.addClass(MY_BINDER_DISABLED);
+    this._binderActive = false;
+  }
+
   /**
    * React to a change in the validity of the drive.
    */
@@ -139,6 +209,9 @@ class GitHubFileBrowser extends Widget {
   private _browser: FileBrowser;
   private _drive: GitHubDrive;
   private _errorPanel: GitHubErrorPanel | null;
+  private _openGitHubButton: ToolbarButton;
+  private _launchBinderButton: ToolbarButton;
+  private _binderActive = false;
 }
 
 /**

style/index.css

@@ -93,6 +93,11 @@
   background-image: url(binder.svg);
 }
 
+.jp-MyBinderButton-disabled {
+  opacity: 0.3;
+}
+
+
 .jp-GitHubBrowser .jp-GitHubIcon {
   flex: 1 1;
   background-image: url(octocat.png);