Popout changes

README.md

@@ -13,7 +13,7 @@ On clicking the button, a form pops up. You can enter a JupyterHub URL and the a
 you want to use to open this file, folder or repository. Then you
 can just copy the nbgitpuller URL, and share it with your students!
 
-![nbgitpuller popover](screenshot-popover.png)
+![nbgitpuller popover](usage-media/readme1.png)
 
 The JupyterHub URL and application you choose are remembered, so
 you do not need to enter it over and over again.

src/background.js

@@ -7,3 +7,14 @@ chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
         chrome.action.setPopup({ tabId, popup: "popup_disabled.html" });
     };
 });
+
+chrome.runtime.onInstalled.addListener(function (object) {
+    // let externalUrl = "https://github.com/ranashreyas/nbgitpuller-link-generator-webextension/blob/popout/usage.md";
+    let externalUrl = "https://github.com/berkeley-dsep-infra/nbgitpuller-link-generator-webextension/blob/main/usage.md"
+
+    if (object.reason === chrome.runtime.OnInstalledReason.INSTALL) {
+        chrome.tabs.create({ url: externalUrl }, function (tab) {
+
+        });
+    }
+});

src/index.jsx

@@ -6,21 +6,26 @@ import GitUrlParse from 'git-url-parse';
 
 import { useState } from 'react';
 
-import { Button, Box, Text, Popover, Heading, ThemeProvider, TextInput } from '@primer/components';
-import { CopyIcon } from '@primer/octicons-react';
+import { Button, Box, Text, Popover, Heading, ThemeProvider, TextInput, SelectMenu, DropdownMenu, DropdownButton } from '@primer/components';
+
+import { CopyIcon, TabExternalIcon } from '@primer/octicons-react';
 
 import { AVAILABLE_APPS, generateRegularUrl } from './generator';
 import { getPref, setPref } from './prefs';
 
-function copyGeneratedUrl(hubUrl, app) {
+function copyGeneratedUrl(hubUrl, app, open) {
     const query = { active: true, currentWindow: true };
     chrome.tabs.query(query, function (tabs) {
         const activeTab = tabs[0];
         if (activeTab) {
             const parts = GitUrlParse(activeTab.url);
             const repoUrl = `${parts.protocol}://${parts.source}/${parts.full_name}`;
             const url = generateRegularUrl(hubUrl, repoUrl, parts.ref, app, parts.name + '/' + parts.filepath);
-            navigator.clipboard.writeText(url);
+            if (open) {
+                chrome.tabs.create({url: url});
+            } else {
+                navigator.clipboard.writeText(url);
+            }
         }
     });
 }
@@ -31,6 +36,7 @@ function Form() {
     const [isValidHubUrl, setIsValidHubUrl] = useState(false);
     const [finishedCopying, setFinishedCopying] = useState(false);
 
+
     useEffect(() => {
         try {
             new URL(hubUrl);
@@ -49,27 +55,62 @@ function Form() {
         setPref('app', app);
     }, [app])
 
+    const handleSelectChange = (event) => {
+        console.log(event.target)
+        const selectedItemKey = event.target.value;
+        setApp(selectedItemKey);
+    };
+
+    const options = Object.entries(AVAILABLE_APPS).map(([key, value]) => (
+        <option value={key} key={key}>{value.title}</option>
+    ));
+
     return <Box display="flex" flexDirection="column">
         <Heading sx={{ fontSize: 2, mb: 1 }}>JupyterHub URL</Heading>
 
-        <TextInput value={hubUrl} onChange={(ev) => setHubUrl(ev.target.value)} placeholder="https://myjupyterhub.org" aria-label="JupyterHub URL" />
+        <TextInput
+            value={hubUrl}
+            onChange = {
+                (ev) => setHubUrl(ev.target.value)
+            }
+            placeholder="https://myjupyterhub.org"
+            aria-label="JupyterHub URL"
+            sx={{ pt: 0.5, pb: 0.5 }}
+        />
+
         <Text color="danger.fg" sx={{ visibility: isValidHubUrl ? "hidden" : "visible" }}>Enter a valid URL</Text>
 
-        <Heading sx={{ fontSize: 2, mb: 1, mt: 2 }}>Open in</Heading>
-        <select className="form-select mb-1" onChange={(ev) => setApp(ev.target.value)} value={app}>
-            {Object.entries(AVAILABLE_APPS).map(([name, value]) => {
-                return <option key={name} value={name}>{value.title}</option>
-            })};
-        </select>
-
-        <Button disabled={!isValidHubUrl || finishedCopying} sx={{ mt: 2 }} onClick={() => {
-            copyGeneratedUrl(hubUrl, app);
-            // Flash a 'Copied!' message for 3 seconds after copying
-            setFinishedCopying(true);
-            setTimeout(() => setFinishedCopying(false), 3 * 1000)
-        }}>
-            <CopyIcon /> {finishedCopying ? "Copied!" : "Copy nbgitpuller link"}
-        </Button>
+        <Heading sx={{ fontSize: 2, mb: 1, mt: 3 }}>Open in</Heading>
+
+        <div class="select-container">
+            <select class="custom-select" value={app} onChange={handleSelectChange}>
+                {options}
+            </select>
+        </div>
+
+
+        <div class='button-row'>
+
+            <Button disabled={!isValidHubUrl || finishedCopying} sx={{ mt: 2}} onClick={() => {
+                copyGeneratedUrl(hubUrl, app, true);
+            }}>
+                <TabExternalIcon /> Open in tab
+            </Button>
+
+            <Button
+                disabled={!isValidHubUrl || finishedCopying}
+                className="action-button"
+                onClick={() => {
+                    copyGeneratedUrl(hubUrl, app, false);
+                    // Flash a 'Copied!' message for 3 seconds after copying
+                    setFinishedCopying(true);
+                    setTimeout(() => setFinishedCopying(false), 3 * 1000)
+                }}>
+                <CopyIcon /> {finishedCopying ? "Copied!" : "Copy nbgitpuller link"}
+            </Button>
+
+        </div>
+
     </Box>
 }
 

src/manifest-chrome.json

@@ -1,6 +1,6 @@
 {
 	"manifest_version": 3,
-	"name": "nbgitpuller Link generator",
+	"name": "Datahub Link generator",
 	"version": "3.0",
 	"description": "A browser extension to generate nbgitpuller (http://jupyterhub.github.io/nbgitpullerbgitpuller) links directly from GitHub",
 	"permissions": [
@@ -13,7 +13,7 @@
 		"default_icon": {
 			"32": "icon_32.png"
 		},
-		"default_title": "Generate nbgitpuller link",
+		"default_title": "Generate datahub link",
 		"default_popup": "popup.html"
 	}
 }

src/manifest-firefox.json

@@ -1,6 +1,6 @@
 {
 	"manifest_version": 3,
-	"name": "nbgitpuller Link generator",
+	"name": "Datahub Link generator",
 	"version": "3.0",
 	"description": "A browser extension to generate nbgitpuller (http://jupyterhub.github.io/nbgitpullerbgitpuller) links directly from GitHub",
 	"permissions": [
@@ -18,7 +18,7 @@
 		"default_icon": {
 			"32": "icon_32.png"
 		},
-		"default_title": "Generate nbgitpuller link",
+		"default_title": "Generate datahub link",
 		"default_popup": "popup.html"
 	}
 }

src/popup.html

@@ -1,9 +1,52 @@
 <html>
   <head>
     <title>NBGitPuller</title>
+    <style>
+      html {
+          height: fit-content;
+      }
+
+      #root {
+          width:370px;
+          height:190px;
+      }
+
+      .select-container {
+        position: relative;
+        display: inline-block;
+        width: 100%;
+      }
+
+      select.custom-select {
+        padding: 8px 15px;
+        width: 100%;
+        border: 1px solid #ccc;
+        border-radius: 5px;
+        background-color: white;
+        font-size: 14px;
+      }
+
+      .button-row {
+        display: flex;
+        gap: 8px;
+        justify-content: center;
+      }
+
+      .action-button {
+        background-color: #2fa13c !important;
+        flex-grow: 1;
+        color: #FFFFFF !important;
+        margin-top: 8px;
+      }
+
+      .action-button:disabled {
+        opacity: 0.6;
+      }
+
+    </style>
   </head>
-  <body>
-    <div id="root" style="width:320px; height:200px;"></div>
+  <body id="popoutBody">
+    <div id="root"></div>
     <script src="bundle.js"></script>
   </body>
 </html>

src/popup_disabled.html

@@ -1,9 +1,27 @@
-<html>
+<html style="height: fit-content;">
   <head>
     <title>NBGitPuller</title>
+    <style>
+      html {
+          height: fit-content;
+      }
+
+      #root {
+          width:370px;
+          height:190px;
+      }
+
+      .normal{
+          height: "190px";
+      }
+
+      .expanded {
+          height: "340px";
+      }
+    </style>
   </head>
   <body>
-    <div id="root" style="width:320px; height:200px;">
+    <div id="root">
     This extension is disabled for this page.
     Please navigate to a GitHub URL to use this extension.
     </div>

usage.md

@@ -0,0 +1,46 @@
+
+<h1><img align="center" height="50" src="logo.png"> nbgitpuller extension</h3>
+
+
+> 🚨Setup and tutorial instructions for using the nbgitpuller chrome extension for assignment distribution
+
+## ❗️setup - nbgitpuller extension
+
+Upon installation, select the puzzle piece located in the upper-right corner of your Chrome tab.
+
+![](usage-media/setup1.png)
+
+Click on the pin button to make sure nbgitpuller stays pinned at the top of the screen.
+
+![](usage-media/setup2.png)
+
+From now on, you can access nbgitpuller directly from the Chrome toolbar.
+
+![](usage-media/setup3.png)
+
+## ❗️ tutorial - nbgitpuller extension
+
+To begin, navigate to the relevant folder within the assignment’s GitHub repository containing notebooks. Select the nbgitpuller extension in the browser, and you will have options to enter the Hub URL and the interface to launch the notebook.
+
+Enter the URL to the hub that you use for administering your assignments. E.g.: "[https://datahub.berkeley.edu](https://www.google.com/url?q=https://datahub.berkeley.edu&sa=D&source=editors&ust=1704918064934417&usg=AOvVaw1lIlYFhcEVYh8wOMxgpO84)."
+
+![](usage-media/tut1.png)
+![](usage-media/tut2.png)
+
+> 🚨 Note: Once the JupyterHub URL is specified once, nbgitpuller will autofill it the next time, no need to keep inputting it.
+
+Following that, indicate the notebook interface that students should use for working with the notebooks. The options are Classic Notebook, Retrolab, JupyterLab, and RStudio for R assignments. You can launch Python notebooks using Jupyter interfaces such as Classic Notebook, RetroLab, and JupyterLab.
+
+![](usage-media/tut3.png)
+
+> 🚨 Note: Again, npgitpuller will remember your last choice of notebook style, so you don’t have to keep specifying it for multiple assignments.
+
+Students receive this link, and when they click on it, a new tab opens, prompting them to log in with their credentials (such as UC Berkeley credentials).
+
+The first time a particular student clicks the link, a local copy of the repository is made for the student. On successive clicks, the latest version of the remote repository is fetched, and merged automatically with the student’s local copy using a  [series of rules](https://www.google.com/url?q=https://nbgitpuller.readthedocs.io/en/latest/topic/automatic-merging.html%23topic-automatic-merging&sa=D&source=editors&ust=1704918064935913&usg=AOvVaw2M50NQloc1shQ3aFvM3MdX) that ensure students never get merge conflicts nor lose any of their changes.
+
+![](usage-media/tut4.png)
+
+On log in, it creates a copy of the code from github for each student, and provides an environment for students to edit notebooks:
+
+![](usage-media/tut5.png)