Link generator handles non-git sources

sean-morris · sean-morris · commit 74acab779571 · 2021-07-26T09:48:44.000-07:00
The link generator creates gitpuller links for non-git
sources including archives from google drive, dropbox
and any publicly accessible web url.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -0,0 +1,13 @@
+version: 2.1
+jobs:
+  build:
+    docker:
+      - image: circleci/python:3.6
+    steps:
+      - checkout
+      - run: echo "no operation build"
+
+workflows:
+  build:
+    jobs:
+      - build
diff --git a/_static/link_gen/link.js b/_static/link_gen/link.js
@@ -1,11 +1,15 @@
 // Pure function that generates an nbgitpuller URL
-function generateRegularUrl(hubUrl, urlPath, repoUrl, branch) {
+function generateRegularUrl(hubUrl, urlPath, repoUrl, branch, compressed) {
 
     // assume hubUrl is a valid URL
     var url = new URL(hubUrl);
 
     url.searchParams.set('repo', repoUrl);
-
+    
+    if(compressed) {
+      url.searchParams.set('compressed', "true");
+    }
+    
     if (urlPath) {
         url.searchParams.set('urlpath', urlPath);
     }
@@ -100,6 +104,13 @@ var apps = {
     }
 }
 
+function clearLinks(){
+    document.getElementById('default-link').value = "";
+    document.getElementById('binder-link').value = "";
+    document.getElementById('canvas-link').value = "";
+}
+
+var stateSource = null;
 function changeTab(div) {
     var hub = document.getElementById("hub");
     var hub_help_text = document.getElementById("hub-help-text");
@@ -109,8 +120,11 @@ function changeTab(div) {
     var content_repo = document.getElementById("content-repo-group");
     var content_branch = document.getElementById("content-branch-group");
     var id = div.id;
-
+    var form = document.getElementById('linkgenerator');
+    
+    clearLinks();
     if (id.includes("binder")) {
+        document.getElementById("app-source").hidden = true;
         hub.placeholder = "https://mybinder.org";
         hub.value = "https://mybinder.org";
         hub_help_text.hidden = true;
@@ -121,15 +135,27 @@ function changeTab(div) {
         env_repo_branch.pattern = ".+";
         content_repo.hidden = false;
         content_branch.hidden = false;
+        // if binder but in correct state
+        stateSource = form.querySelector('input[name="source"]:checked');
+        document.getElementById("source-git").checked = true;
+        displaySource();
     } else {
+        document.getElementById("app-source").hidden = false;
         hub.placeholder = "https://hub.example.com";
+        hub.value = "";
         hub_help_text.hidden = false;
         hub.labels[0].innerHTML = "JupyterHub URL";
         env_repo.labels[0].innerHTML = "Git Repository URL";
         env_repo_help_text.hidden = true;
         env_repo_branch.required = false;
         content_repo.hidden = true;
         content_branch.hidden = true;
+        
+        //if coming from binder tab restore state
+        if(stateSource)
+          stateSource.checked = true;
+          stateSource = null
+          displaySource();
     }
 }
 
@@ -145,24 +171,32 @@ function generateCloneDirectoryName(gitCloneUrl) {
     return lastPart.split(':').slice(-1)[0].replace(/(\.git|\.bundle)?/, '');
 }
 
+
 function displayLink() {
     var form = document.getElementById('linkgenerator');
-
+    
     form.classList.add('was-validated');
     if (form.checkValidity()) {
         var hubUrl = document.getElementById('hub').value;
         var repoUrl = document.getElementById('repo').value;
-        var branch = document.getElementById('branch').value;
+        var driveUrl = document.getElementById('drive-url').value;
+        var dropUrl = document.getElementById('drop-url').value;
+        var webUrl = document.getElementById('web-url').value;
+        var gitBranch = document.getElementById('branch').value;
         var contentRepoUrl = document.getElementById('content-repo').value;
         var contentRepoBranch = document.getElementById('content-branch').value;
         var filePath = document.getElementById('filepath').value;
         var appName = form.querySelector('input[name="app"]:checked').value;
         var activeTab = document.querySelector(".nav-link.active").id;
-
+        var source = form.querySelector('input[name="source"]:checked').value;
+        
         if (appName === 'custom') {
             var urlPath = document.getElementById('urlpath').value;
         } else {
             var repoName = generateCloneDirectoryName(repoUrl);
+            if(source !== "git"){
+              repoName = ""
+            }
             var urlPath;
             if (activeTab === "tab-auth-binder") {
                 var contentRepoName = new URL(contentRepoUrl).pathname.split('/').pop().replace(/\.git$/, '');
@@ -171,26 +205,41 @@ function displayLink() {
                 urlPath = apps[appName].generateUrlPath(repoName + '/' + filePath);
             }
         }
-
         if (activeTab === "tab-auth-default") {
+            branch = "";
+            compressed = true;
+            if(source == "git"){
+                sourceUrl = repoUrl;
+                branch = gitBranch;
+                compressed = false;
+            } else if(source == "googledrive"){
+                sourceUrl = driveUrl;
+            } else if(source == "dropbox"){
+                sourceUrl =  dropUrl;
+            } else if(source == "web"){
+                sourceUrl =  webUrl;
+            }
             document.getElementById('default-link').value = generateRegularUrl(
-                hubUrl, urlPath, repoUrl, branch
+                hubUrl, urlPath, sourceUrl, branch, compressed
             );
         } else if (activeTab === "tab-auth-canvas"){
             document.getElementById('canvas-link').value = generateCanvasUrl(
-                hubUrl, urlPath, repoUrl, branch
+                hubUrl, urlPath, repoUrl, gitBranch
             );
         } else if (activeTab === "tab-auth-binder"){
             // FIXME: userName parsing using new URL(...) assumes a 
             // HTTP based repoUrl. Does it make sense to create a
             // BinderHub link for SSH URLs? Then let's fix this parsing.
             var userName = new URL(repoUrl).pathname.split('/')[1];
             document.getElementById('binder-link').value = generateBinderUrl(
-                hubUrl, userName, repoName, branch, urlPath, contentRepoUrl, contentRepoBranch
+                hubUrl, userName, repoName, gitBranch, urlPath, contentRepoUrl, contentRepoBranch
             );
         }
+    } else {
+        clearLinks();
     }
 }
+
 function populateFromQueryString() {
     // preseed values if specified in the url
     var params = new URLSearchParams(window.location.search);
@@ -213,6 +262,31 @@ function populateFromQueryString() {
     }
 }
 
+function hideShowByClassName(cls, hideShow){
+  [].forEach.call(document.querySelectorAll(cls), function (el) {
+    el.style.display = hideShow;
+    setDisabled = (hideShow == 'none')
+    $(el).find("input").each(function(){
+        $(this).prop("disabled", setDisabled);
+    });
+  });
+}
+
+function displaySource(){
+    var form = document.getElementById('linkgenerator');
+    var source = form.querySelector('input[name="source"]:checked').value;
+    hideShowByClassName(".source", 'none');
+    if(source == 'git'){
+        hideShowByClassName(".source-git", '');
+    } else if(source == 'googledrive'){
+        hideShowByClassName(".source-googledrive", '');
+    } else if(source == 'dropbox'){
+        hideShowByClassName(".source-dropbox", '');
+    } else if(source == 'web'){
+        hideShowByClassName(".source-web", '');
+    }
+}
+
 /**
  * Main loop of the program.
  *
@@ -224,7 +298,7 @@ function populateFromQueryString() {
 function render() {
     var form = document.getElementById('linkgenerator');
     var appName = form.querySelector('input[name="app"]:checked').value;
-
+  
     if (appName == 'custom') {
         document.getElementById('urlpath').disabled = false;
         document.getElementById('filepath').disabled = true;
@@ -238,6 +312,8 @@ function render() {
             document.getElementById('filepath').disabled = false;
         }
     }
+    
+    
     displayLink();
 }
 
@@ -246,11 +322,21 @@ function render() {
  */
 function main() {
     // Hook up any changes in form elements to call render()
-    document.querySelectorAll('#linkgenerator input[type="radio"]').forEach(
+    document.querySelectorAll('#linkgenerator input[name="app"]').forEach(
         function (element) {
             element.addEventListener('change', render);
         }
     )
+    document.querySelectorAll('#linkgenerator input[name="source"]').forEach(
+        function (element) {
+            element.addEventListener('change', function(){
+                displaySource();
+                render();
+              }
+            );
+        }
+    )
+    
     document.querySelectorAll('#linkgenerator input[type="text"], #linkgenerator input[type="url"]').forEach(
         function (element) {
             element.addEventListener('input', render);
@@ -269,7 +355,9 @@ function main() {
       }
     }
 
+    
     // Do an initial render, to make sure our disabled / enabled properties are correctly set
+    displaySource();
     render();
 }
 
diff --git a/link.html b/link.html
@@ -221,8 +221,41 @@ <h1>nbgitpuller link generator<a class="headerlink" href="#nbgitpuller-link-gene
             </small>
           </div>
         </div>
-
-        <div class="form-group row">
+        
+        <div class="form-group row" id="app-source">
+          <div class="col-sm-2 col-form-label">
+            <label for="app" class=>Notebook Source</label>
+            <small class="form-text text-muted">
+            </small>
+          </div>
+          <div class="col-sm-10">
+            <div class="form-check">
+              <input class="form-check-input" type="radio" name="source" id="source-git" value="git" checked>
+              <label class="form-check-label text-dark" for="source-git">
+                Git Repository(eg. github)
+              </label>
+            </div>
+            <div class="form-check">
+              <input class="form-check-input" type="radio" name="source" id="source-googledrive" value="googledrive">
+              <label class="form-check-label text-dark" for="source-googledrive">
+                Google Drive
+              </label>
+            </div>
+            <div class="form-check">
+              <input class="form-check-input" type="radio" name="source" id="source-dropbox" value="dropbox">
+              <label class="form-check-label text-dark" for="source-dropbox">
+                Dropbox
+              </label>
+            </div>
+            <div class="form-check">
+              <input class="form-check-input" type="radio" name="source" id="source-web" value="web">
+              <label class="form-check-label text-dark" for="source-web">
+                Web(Public URL to archive)
+              </label>
+            </div>
+          </div>
+        </div>
+        <div class="form-group row source source-git">
           <label for="repo" class="col-sm-2 col-form-label">Git Repository URL</label>
           <div class="col-sm-6">
             <input class="form-control" type="text" id="repo" placeholder="https://github.com/example/test"
@@ -250,7 +283,7 @@ <h1>nbgitpuller link generator<a class="headerlink" href="#nbgitpuller-link-gene
           </div>
         </div>
 
-        <div class="form-group row" id="content-repo-group" hidden="true">
+        <div class="form-group row source source-git" id="content-repo-group" hidden="true">
           <label for="content-repo" class="col-sm-2 col-form-label">Git Content Repository URL</label>
           <div class="col-sm-6">
             <input class="form-control" type="text" id="content-repo" placeholder="https://github.com/example/test"
@@ -264,12 +297,17 @@ <h1>nbgitpuller link generator<a class="headerlink" href="#nbgitpuller-link-gene
               <div class="input-group-prepend">
                 <span class="input-group-text" id="content-branch-prepend-label">branch</span>
               </div>
-              <input name="content-branch" id="content-branch" type="text" class="form-control" value="master" aria-label="Branch Name" aria-describedby="content-branch-prepend-label">
+              <input name="content-branch" id="content-branch" type="text" aria-label="Branch Name" aria-describedby="content-branch-prepend-label">
+              <small id="default-content-message" class="form-text text-muted">
+                 If left blank, the default branch of your repository is used. Also note, Github now names the default branch <code>main</code> instead of <code>master</code> on
+                 <a href="https://github.blog/changelog/2020-10-01-the-default-branch-for-newly-created-repositories-is-now-main/">
+                 new GitHub repositories</a>
+              </small>
             </div>
           </div>
          </div>
 
-        <div class="form-group row" id="filepath-container">
+        <div class="form-group row source source-git" id="filepath-container">
           <label for="filepath" class="col-sm-2 col-form-label">File to open</label>
           <div class="col-sm-10">
             <input class="form-control" type="text" id="filepath" placeholder="index.ipynb"
@@ -280,6 +318,39 @@ <h1>nbgitpuller link generator<a class="headerlink" href="#nbgitpuller-link-gene
           </div>
         </div>
 
+        <div class="form-group row source source-googledrive">
+          <label for="repo" class="col-sm-2 col-form-label">Google Drive Shared Link</label>
+          <div class="col-sm-10">
+            <input class="form-control" type="text" id="drive-url" placeholder="https://drive.google.com/file/d/1p3m0h5UGWdLkVVP0S1HpG2yeDlU/view?usp=sharing"
+              oninput="displayLink()" required pattern="((https?)://.+|(drive.google).+:.+)">
+            <div class="invalid-feedback">
+              Must be a valid Google Drive URL
+            </div>
+          </div>
+        </div>
+        
+        <div class="form-group row source source-dropbox">
+          <label for="repo" class="col-sm-2 col-form-label">Dropbox Shared Link</label>
+          <div class="col-sm-10">
+            <input class="form-control" type="text" id="drop-url" placeholder="https://www.dropbox.com/s/w0q4eirtuht/example.tgz?dl=0"
+              oninput="displayLink()" required pattern="((https?)://.+|(drive.google).+:.+)">
+            <div class="invalid-feedback">
+              Must be a valid Dropbox URL (Note: all the common compression formats work(e.g. zip, tar, tgz, etc))
+            </div>
+          </div>
+        </div>
+        
+        <div class="form-group row source source-web">
+          <label for="repo" class="col-sm-2 col-form-label">Public URL to archive</label>
+          <div class="col-sm-10">
+            <input class="form-control" type="text" id="web-url" placeholder="https://example.com/materials-sp20-external.zip"
+              oninput="displayLink()" required pattern="((https?)://.+|(drive.google).+:.+)">
+            <div class="invalid-feedback">
+              Must be a valid public URL (Note: all the common compression formats work(e.g. zip, tar, tgz, etc))
+            </div>
+          </div>
+        </div>
+        
         <div class="form-group row" id="app-container">
           <div class="col-sm-2 col-form-label">
             <label for="app" class=>Application to Open</label>
