Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Popout changes #7

Open
wants to merge 7 commits into
base: main
Choose a base branch
from
Open

Popout changes #7

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
3ea48ce
popout changes
ranashreyas Dec 18, 2023
f696fff
pr changes
ranashreyas Dec 26, 2023
b7282b3
further changes, usage.md
ranashreyas Jan 10, 2024
dbe6c23
final changes
ranashreyas Jan 10, 2024
8c0ef71
rebrand 1
ranashreyas Jan 27, 2024
71a6224
further icon changes
ranashreyas Jan 29, 2024
3da0c0e
minor change
ranashreyas Jan 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions src/background.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can this be a page on this repository instead? Chrome and firefox both review URLs used in here, and I think they may not be happy with this one :)

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Google Docs is definitely better than notion! However, can you copy the contents into a markdown file in this repository (as part of this PR), and link to that instead?

let externalUrl = "https://robust-cry-f5f.notion.site/nbgitpuller-extension-cc643bb29b79492aa3e841e7dc18a9b2?pvs=4";

if (object.reason === chrome.runtime.OnInstalledReason.INSTALL) {
chrome.tabs.create({ url: externalUrl }, function (tab) {

});
}
});
101 changes: 86 additions & 15 deletions src/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,9 @@ 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';
Expand All @@ -25,11 +26,27 @@ function copyGeneratedUrl(hubUrl, app) {
});
}

function openGeneratedUrl(hubUrl, app) {
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 my_url = generateRegularUrl(hubUrl, repoUrl, parts.ref, app, parts.name + '/' + parts.filepath);
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

variables should be camelCase, so myUrl not my_url

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I also see that this is mostly duplicating the code in copyGeneratedUrl. I see there are two issues here:

  1. this is also copying the URL, in addition to opening it
  2. The code duplication may become a problem. Ideally, the common part of these two functions would be refactored into another one that can be called here.

navigator.clipboard.writeText(my_url);
chrome.tabs.create({ url: my_url });
}
});
}

function Form() {
const [hubUrl, setHubUrl] = useState(getPref('hub-url', ''));
const [app, setApp] = useState(getPref('app', 'classic'));
const [isValidHubUrl, setIsValidHubUrl] = useState(false);
const [finishedCopying, setFinishedCopying] = useState(false);
const [isDropdownOpen, setDropdownOpen] = useState(false);


useEffect(() => {
try {
Expand All @@ -49,27 +66,81 @@ function Form() {
setPref('app', app);
}, [app])

const menuItems = Object.entries(AVAILABLE_APPS).map(([name, value]) => ({
text: value.title,
key: name
}));

const handleMenuChange = (item) => {
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Given this is so small, I think this can just be inline.

if (item) {
setApp(item.key);
}
};

const changeOpenState = (item) => {
if(isDropdownOpen == true){
document.getElementById("root").style.height="190px";
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd prefer we use something like CSS classes here, rather than directly setting CSS properties in JS.

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If this becomes small after moving these to a css class toggle, this function can also be inline.

document.getElementById("popoutBody").style.height="190px";
setDropdownOpen(false);
} else {
document.getElementById("root").style.height="340px";
document.getElementById("popoutBody").style.height="340px";
setDropdownOpen(true);
}

};

return <Box display="flex" flexDirection="column">
{/* https://datahub.berkeley.edu */}
ranashreyas marked this conversation as resolved.
Show resolved Hide resolved
<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}>
<Heading sx={{ fontSize: 2, mb: 1, mt: 3 }}>Open in</Heading>
{/* <select className="form-select mb-1" onChange={(ev) => setApp(ev.target.value)} value={app}>
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should this be deleted?

{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>
</select> */}

<DropdownMenu
ranashreyas marked this conversation as resolved.
Show resolved Hide resolved
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' }}>
ranashreyas marked this conversation as resolved.
Show resolved Hide resolved
<Button disabled={!isValidHubUrl || finishedCopying} sx={{ mt: 2}} onClick={() => {
openGeneratedUrl(hubUrl, app);
}}>
<TabExternalIcon /> Open in tab
</Button>

<Button disabled={!isValidHubUrl || finishedCopying}
style={{ flexGrow: 1, backgroundColor: '#52c786', opacity: ((!isValidHubUrl || finishedCopying)?0.6:1), marginTop: '8px' }}
// sx={{ mt: 2, bg: "MediumSeaGreen" }}
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>

</div>

</Box>
}

Expand Down
7 changes: 4 additions & 3 deletions src/popup.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
<html>
<html style="height: fit-content;">
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should be a CSS class.

<head>
<title>NBGitPuller</title>
</head>
<body>
<div id="root" style="width:320px; height:200px;"></div>
<body id="popoutBody">
<div id="root" style="width:370px; height:190px;"></div>
<!-- <div id="root" style="width:320px; height:200px;"></div> -->
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's remove these too?

<script src="bundle.js"></script>
</body>
</html>