Skip to content

Commit

Permalink
Improve start page when GitHub App not installed
Browse files Browse the repository at this point in the history
  • Loading branch information
@laushinka
laushinka committed Dec 14, 2021
1 parent cd67ddf commit 504fee1
Showing 1 changed file with 39 additions and 68 deletions.
107 changes: 39 additions & 68 deletions components/dashboard/src/projects/NewProject.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ import ContextMenu, { ContextMenuEntry } from "../components/ContextMenu";
import CaretDown from "../icons/CaretDown.svg";
import Plus from "../icons/Plus.svg";
import Switch from "../icons/Switch.svg";
import NoAccess from "../icons/NoAccess.svg";
import search from "../icons/search.svg";
import moment from "moment";
import { UserContext } from "../user-context";
Expand All @@ -30,7 +29,6 @@ export default function NewProject() {
const [reposInAccounts, setReposInAccounts] = useState<ProviderRepository[]>([]);
const [repoSearchFilter, setRepoSearchFilter] = useState<string>("");
const [selectedAccount, setSelectedAccount] = useState<string | undefined>(undefined);
const [noOrgs, setNoOrgs] = useState<boolean>(false);
const [showGitProviders, setShowGitProviders] = useState<boolean>(false);
const [selectedRepo, setSelectedRepo] = useState<ProviderRepository | undefined>(undefined);
const [selectedTeamOrUser, setSelectedTeamOrUser] = useState<Team | User | undefined>(undefined);
Expand Down Expand Up @@ -147,7 +145,6 @@ export default function NewProject() {
return;
}
(async () => {
updateOrgsState();
await updateReposInAccounts();
})();
}, [selectedProviderHost]);
Expand Down Expand Up @@ -183,20 +180,6 @@ export default function NewProject() {
return [];
}

const getToken = async (host: string) => {
return getGitpodService().server.getToken({ host });
}

const updateOrgsState = async () => {
if (selectedProviderHost && isGitHub()) {
try {
const ghToken = await getToken(selectedProviderHost);
setNoOrgs(ghToken?.scopes.includes("read:org") !== true);
} catch {
}
}
}

const reconfigure = () => {
openReconfigureWindow({
account: selectedAccount,
Expand All @@ -210,21 +193,6 @@ export default function NewProject() {
});
}

const grantReadOrgPermissions = async () => {
try {
await openAuthorizeWindow({
host: "github.com",
scopes: ["read:org"],
onSuccess: () => {
updateReposInAccounts();
updateOrgsState();
}
})
} catch (error) {
console.log(error);
}
}

const createProject = async (teamOrUser: Team | User, repo: ProviderRepository) => {
if (!selectedProviderHost || isBitbucket()) {
return;
Expand Down Expand Up @@ -266,7 +234,15 @@ export default function NewProject() {
<span className={"pl-2 text-gray-600 dark:text-gray-100 text-base " + (addClasses || "")}>{label}</span>
</div>)
const result: ContextMenuEntry[] = [];
for (const [ account, props ] of accounts.entries()) {

if (!selectedAccount && user && user.name && user.avatarUrl) {
result.push({
title: "user",
customContent: renderItemContent(user?.name, user?.avatarUrl),
separator: true,
})
}
for (const [account, props] of accounts.entries()) {
result.push({
title: account,
customContent: renderItemContent(account, props.avatarUrl, "font-semibold"),
Expand Down Expand Up @@ -300,15 +276,24 @@ export default function NewProject() {
const showSearchInput = !!repoSearchFilter || filteredRepos.length > 0;

const renderRepos = () => (<>
{!isBitbucket() && <p className="text-gray-500 text-center text-base">Select a Git repository on <strong>{selectedProviderHost}</strong>. (<a className="gp-link cursor-pointer" onClick={() => setShowGitProviders(true)}>change</a>)</p>}
<div className={`mt-10 border rounded-xl border-gray-100 dark:border-gray-800 flex-col`}>
<div className="px-8 pt-8 flex flex-col space-y-2" data-analytics='{"label":"Identity"}'>
<p className="text-gray-500 text-center text-base">Projects allow you to manage prebuilds and workspaces for your repository. <a href="https://www.gitpod.io/docs/teams-and-projects" rel="noopener" className="gp-link">Learn more</a></p>
<p className="text-gray-500 text-center text-base mt-12">Select account on <b>{selectedProviderHost}</b> (<a className="gp-link cursor-pointer" onClick={() => setShowGitProviders(true)}>change</a>)</p>
<div className={`mt-2 flex-col w-96`}>
<div className="px-8 pt-5 flex flex-col space-y-2" data-analytics='{"label":"Identity"}'>
<ContextMenu classes="w-full left-0 cursor-pointer" menuEntries={getDropDownEntries(accounts)}>
<div className="w-full">
{!selectedAccount && (
<>
<img src={user?.avatarUrl} className="rounded-full w-6 h-6 absolute top-1/4 left-3" />
<input className="w-full px-12 cursor-pointer font-semibold" readOnly type="text" value={user?.name}></input>
</>
)}
{icon && (
<img src={icon} className="rounded-full w-6 h-6 absolute top-1/4 left-4" />
<>
<img src={icon} className="rounded-full w-6 h-6 absolute top-1/4 left-3" />
<input className="w-full px-12 cursor-pointer font-semibold" readOnly type="text" value={selectedAccount}></input>
</>
)}
<input className="w-full px-12 cursor-pointer font-semibold" readOnly type="text" value={selectedAccount || ""}></input>
<img src={CaretDown} title="Select Account" className="filter-grayscale absolute top-1/2 right-3" />
</div>
</ContextMenu>
Expand Down Expand Up @@ -348,49 +333,35 @@ export default function NewProject() {
)}
{loaded && noReposAvailable && isGitHub() && (<div>
<div className="px-12 py-20 text-center text-gray-500 bg-gray-50 dark:bg-gray-800 rounded-xl">
<img src={NoAccess} title="No Access" className="m-auto mb-4" />
<h3 className="text-center text-gray-600 dark:text-gray-50 pb-3 font-bold">
No Access
</h3>
<span className="dark:text-gray-400">
Authorize GitHub (github.com) or select a different account.
Additional authorization is required to allow access to your repositories and trigger prebuilds for every new push to any of your branches.
</span>
<br />
<button className="mt-6" onClick={() => reconfigure()}>Authorize</button>
<button className="mt-6" onClick={() => reconfigure()}>Configure Gitpod App</button>
</div>
</div>)}
</div>

</div>
{isGitHub() && (
<div className="pt-3">
<div className="text-gray-500 text-center w-96 mx-8">
Repository not found? <a href="javascript:void(0)" onClick={e => reconfigure()} className="text-gray-400 underline underline-thickness-thin underline-offset-small hover:text-gray-600">Reconfigure</a>
</div>
{isGitHub() && noOrgs && (
<div className="text-gray-500 mx-auto text-center">
Missing organizations? <a href="javascript:void(0)" onClick={e => grantReadOrgPermissions()} className="text-gray-400 underline underline-thickness-thin underline-offset-small hover:text-gray-600">Grant permissions</a>
</div>
)}
</div>
)}
<p className="text-left w-full mt-12 text-gray-500">
<strong>Teams &amp; Projects</strong> are currently in Beta. <a href="https://github.com/gitpod-io/gitpod/issues/5095" target="gitpod-feedback-issue" rel="noopener" className="gp-link">Send feedback</a> or open a <a href="/workspaces" className="gp-link">New Workspace</a> with an example repository.
<p className="text-center w-full mt-12 text-gray-500">
<strong>Teams &amp; Projects</strong> are currently in Beta. <a href="https://github.com/gitpod-io/gitpod/issues/5095" target="gitpod-feedback-issue" rel="noopener" className="gp-link">Send feedback</a>
</p>
</>
);

const renderLoadingState = () => (<div>
<div className="mt-8 border rounded-xl border-gray-100 dark:border-gray-700 flex-col">
<div>
<div className="px-12 py-16 text-center text-gray-500 bg-gray-50 dark:bg-gray-800 rounded-xl w-96 h-h96 flex items-center justify-center">
<h3 className="mb-2 text-gray-400 dark:text-gray-600 animate-pulse">
Loading ...
</h3>
const renderLoadingState = () => (
<div>
<p className="text-gray-500 text-center text-base">Projects allow you to manage prebuilds and workspaces for your repository. <a href="https://www.gitpod.io/docs/teams-and-projects" rel="noopener" className="gp-link">Learn more</a></p>
<div className="mt-8 border rounded-xl border-gray-100 dark:border-gray-700 flex-col">
<div>
<div className="px-12 py-16 text-center text-gray-500 bg-gray-50 dark:bg-gray-800 rounded-xl w-96 h-h96 flex items-center justify-center">
<h3 className="mb-2 text-gray-400 dark:text-gray-600 animate-pulse">
Loading ...
</h3>
</div>
</div>
</div>
</div>
</div>)
</div>)

const onGitProviderSeleted = async (host: string, updateUser?: boolean) => {
if (updateUser) {
Expand Down Expand Up @@ -464,7 +435,7 @@ export default function NewProject() {
<div className="flex-1 flex flex-col">
<p className="text-gitpod-red text-sm">Bitbucket support for projects is not available yet. Follow <a className="gp-link" href="https://github.com/gitpod-io/gitpod/issues/5980">#5980</a> for updates.</p>
</div>
</div>);
</div>);
}

const onNewWorkspace = async () => {
Expand Down

0 comments on commit 504fee1

Please sign in to comment.