Popout changes

src/background.js

@@ -7,3 +7,13 @@ chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
         chrome.action.setPopup({ tabId, popup: "popup_disabled.html" });
     };
 });
+
+chrome.runtime.onInstalled.addListener(function (object) {
+    let externalUrl = "https://docs.google.com/document/d/e/2PACX-1vTGWZQmI-GhKJ2GP0c4wAGhVf5bMPDdbXzNJnYGOYKbxjCNSRxtAEvvmlHafs6oln44MFCH8aW_6uIC/pub";
+
+    if (object.reason === chrome.runtime.OnInstalledReason.INSTALL) {
+        chrome.tabs.create({ url: externalUrl }, function (tab) {
+
+        });
+    }
+});

src/index.jsx

@@ -6,13 +6,14 @@ 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];
@@ -21,6 +22,9 @@ function copyGeneratedUrl(hubUrl, app) {
             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});
+            }
         }
     });
 }
@@ -30,6 +34,8 @@ function Form() {
     const [app, setApp] = useState(getPref('app', 'classic'));
     const [isValidHubUrl, setIsValidHubUrl] = useState(false);
     const [finishedCopying, setFinishedCopying] = useState(false);
+    const [isDropdownOpen, setDropdownOpen] = useState(false);
+
 
     useEffect(() => {
         try {
@@ -49,27 +55,77 @@ function Form() {
         setPref('app', app);
     }, [app])
 
+    const menuItems = Object.entries(AVAILABLE_APPS).map(([name, value]) => ({
+        text: value.title,
+        key: name
+    }));
+
+    const handleMenuChange = (item) => {
+        if (item) {
+            setApp(item.key);
+        }
+    };
+
+    const changeOpenState = (item) => {
+        if(isDropdownOpen == true){
+            document.getElementById("root").className = "normal";
+            document.getElementById("popoutBody").className = "normal";
+            setDropdownOpen(false);
+        } else {
+            document.getElementById("root").className = "expanded";
+            document.getElementById("popoutBody").className = "expanded";
+            setDropdownOpen(true);
+        }
+
+    };
+
     return <Box display="flex" flexDirection="column">
+        {/* https://datahub.berkeley.edu */}
         <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>
+
+        <DropdownMenu
+            items={menuItems}
+            onChange={handleMenuChange}
+            placeholder={AVAILABLE_APPS[app].title} // Display the value of 'name' or a placeholder
+            open={isDropdownOpen}
+            onOpenChange={changeOpenState}
+        />
+
+        <div style={{ display: 'flex', gap: '8px', justifyContent: 'center' }}>
+
+            <Button disabled={!isValidHubUrl || finishedCopying} sx={{ mt: 2}} onClick={() => {
+                copyGeneratedUrl(hubUrl, app, true);
+            }}>
+                <TabExternalIcon /> Open in tab
+            </Button>
+
+            <Button disabled={!isValidHubUrl || finishedCopying}
+                style={{ flexGrow: 1, backgroundColor: '#52c786', opacity: ((!isValidHubUrl || finishedCopying)?0.6:1),  marginTop: '8px' }}
+                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/popup.html

@@ -1,9 +1,27 @@
 <html>
   <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>
+  <body id="popoutBody" class="normal">
+    <div id="root" class="normal"></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>