Skip to content

Commit cee6ae0

Browse files
author
Laurie T. Malau
committed
Improve start page when GitHub App not installed
1 parent 38c3d8e commit cee6ae0

File tree

1 file changed

+55
-73
lines changed

1 file changed

+55
-73
lines changed

‎components/dashboard/src/projects/NewProject.tsx‎

Lines changed: 55 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ import ContextMenu, { ContextMenuEntry } from "../components/ContextMenu";
1414
import CaretDown from "../icons/CaretDown.svg";
1515
import Plus from "../icons/Plus.svg";
1616
import Switch from "../icons/Switch.svg";
17-
import NoAccess from "../icons/NoAccess.svg";
1817
import search from "../icons/search.svg";
1918
import moment from "moment";
2019
import { UserContext } from "../user-context";
@@ -30,7 +29,6 @@ export default function NewProject() {
3029
const [reposInAccounts, setReposInAccounts] = useState<ProviderRepository[]>([]);
3130
const [repoSearchFilter, setRepoSearchFilter] = useState<string>("");
3231
const [selectedAccount, setSelectedAccount] = useState<string | undefined>(undefined);
33-
const [noOrgs, setNoOrgs] = useState<boolean>(false);
3432
const [showGitProviders, setShowGitProviders] = useState<boolean>(false);
3533
const [selectedRepo, setSelectedRepo] = useState<ProviderRepository | undefined>(undefined);
3634
const [selectedTeamOrUser, setSelectedTeamOrUser] = useState<Team | User | undefined>(undefined);
@@ -147,7 +145,6 @@ export default function NewProject() {
147145
return;
148146
}
149147
(async () => {
150-
updateOrgsState();
151148
await updateReposInAccounts();
152149
})();
153150
}, [selectedProviderHost]);
@@ -183,20 +180,6 @@ export default function NewProject() {
183180
return [];
184181
}
185182

186-
const getToken = async (host: string) => {
187-
return getGitpodService().server.getToken({ host });
188-
}
189-
190-
const updateOrgsState = async () => {
191-
if (selectedProviderHost && isGitHub()) {
192-
try {
193-
const ghToken = await getToken(selectedProviderHost);
194-
setNoOrgs(ghToken?.scopes.includes("read:org") !== true);
195-
} catch {
196-
}
197-
}
198-
}
199-
200183
const reconfigure = () => {
201184
openReconfigureWindow({
202185
account: selectedAccount,
@@ -210,21 +193,6 @@ export default function NewProject() {
210193
});
211194
}
212195

213-
const grantReadOrgPermissions = async () => {
214-
try {
215-
await openAuthorizeWindow({
216-
host: "github.com",
217-
scopes: ["read:org"],
218-
onSuccess: () => {
219-
updateReposInAccounts();
220-
updateOrgsState();
221-
}
222-
})
223-
} catch (error) {
224-
console.log(error);
225-
}
226-
}
227-
228196
const createProject = async (teamOrUser: Team | User, repo: ProviderRepository) => {
229197
if (!selectedProviderHost || isBitbucket()) {
230198
return;
@@ -266,7 +234,15 @@ export default function NewProject() {
266234
<span className={"pl-2 text-gray-600 dark:text-gray-100 text-base " + (addClasses || "")}>{label}</span>
267235
</div>)
268236
const result: ContextMenuEntry[] = [];
269-
for (const [ account, props ] of accounts.entries()) {
237+
238+
if (!selectedAccount && user && user.name && user.avatarUrl) {
239+
result.push({
240+
title: "user",
241+
customContent: renderItemContent(user?.name, user?.avatarUrl),
242+
separator: true,
243+
})
244+
}
245+
for (const [account, props] of accounts.entries()) {
270246
result.push({
271247
title: account,
272248
customContent: renderItemContent(account, props.avatarUrl, "font-semibold"),
@@ -299,16 +275,29 @@ export default function NewProject() {
299275

300276
const showSearchInput = !!repoSearchFilter || filteredRepos.length > 0;
301277

278+
const projectText = () => {
279+
return <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>
280+
}
281+
302282
const renderRepos = () => (<>
303-
{!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>}
304-
<div className={`mt-10 border rounded-xl border-gray-100 dark:border-gray-800 flex-col`}>
305-
<div className="px-8 pt-8 flex flex-col space-y-2" data-analytics='{"label":"Identity"}'>
283+
{projectText()}
284+
<p className="text-gray-500 text-center text-base mt-12">{loaded && noReposAvailable ? 'Select account on ' : 'Select a Git repository on '}<b>{selectedProviderHost}</b> (<a className="gp-link cursor-pointer" onClick={() => setShowGitProviders(true)}>change</a>)</p>
285+
<div className={`mt-2 flex-col ${noReposAvailable && isGitHub() ? 'w-96' : ''}`}>
286+
<div className="px-8 flex flex-col space-y-2" data-analytics='{"label":"Identity"}'>
306287
<ContextMenu classes="w-full left-0 cursor-pointer" menuEntries={getDropDownEntries(accounts)}>
307288
<div className="w-full">
308-
{icon && (
309-
<img src={icon} className="rounded-full w-6 h-6 absolute top-1/4 left-4" />
289+
{!selectedAccount && user && user.name && user.avatarUrl && (
290+
<>
291+
<img src={user?.avatarUrl} className="rounded-full w-6 h-6 absolute my-2.5 left-3" />
292+
<input className="w-full px-12 cursor-pointer font-semibold" readOnly type="text" value={user?.name}></input>
293+
</>
294+
)}
295+
{selectedAccount && (
296+
<>
297+
<img src={icon ? icon : ""} className="rounded-full w-6 h-6 absolute my-2.5 left-3" />
298+
<input className="w-full px-12 cursor-pointer font-semibold" readOnly type="text" value={selectedAccount}></input>
299+
</>
310300
)}
311-
<input className="w-full px-12 cursor-pointer font-semibold" readOnly type="text" value={selectedAccount || ""}></input>
312301
<img src={CaretDown} title="Select Account" className="filter-grayscale absolute top-1/2 right-3" />
313302
</div>
314303
</ContextMenu>
@@ -348,49 +337,42 @@ export default function NewProject() {
348337
)}
349338
{loaded && noReposAvailable && isGitHub() && (<div>
350339
<div className="px-12 py-20 text-center text-gray-500 bg-gray-50 dark:bg-gray-800 rounded-xl">
351-
<img src={NoAccess} title="No Access" className="m-auto mb-4" />
352-
<h3 className="text-center text-gray-600 dark:text-gray-50 pb-3 font-bold">
353-
No Access
354-
</h3>
355340
<span className="dark:text-gray-400">
356-
Authorize GitHub (github.com) or select a different account.
341+
Additional authorization is required for our GitHub App to watch your repositories and trigger prebuilds.
357342
</span>
358343
<br />
359-
<button className="mt-6" onClick={() => reconfigure()}>Authorize</button>
344+
<button className="mt-6" onClick={() => reconfigure()}>Configure Gitpod App</button>
360345
</div>
361346
</div>)}
362347
</div>
363348

364349
</div>
365-
{isGitHub() && (
366-
<div className="pt-3">
367-
<div className="text-gray-500 text-center w-96 mx-8">
368-
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>
369-
</div>
370-
{isGitHub() && noOrgs && (
371-
<div className="text-gray-500 mx-auto text-center">
372-
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>
373-
</div>
374-
)}
350+
{reposInAccounts.length > 0 && isGitHub() && (
351+
<div>
352+
<div className="text-gray-500 text-center w-96 mx-8">
353+
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>
375354
</div>
355+
</div>
376356
)}
377-
<p className="text-left w-full mt-12 text-gray-500">
378-
<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.
357+
<p className="text-center w-full mt-12 text-gray-500">
358+
<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>
379359
</p>
380360
</>
381361
);
382362

383-
const renderLoadingState = () => (<div>
384-
<div className="mt-8 border rounded-xl border-gray-100 dark:border-gray-700 flex-col">
385-
<div>
386-
<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">
387-
<h3 className="mb-2 text-gray-400 dark:text-gray-600 animate-pulse">
388-
Loading ...
389-
</h3>
363+
const renderLoadingState = () => (
364+
<div>
365+
{projectText()}
366+
<div className="mt-8 border rounded-xl border-gray-100 dark:border-gray-700 flex-col">
367+
<div>
368+
<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">
369+
<h3 className="mb-2 text-gray-400 dark:text-gray-600 animate-pulse">
370+
Loading ...
371+
</h3>
372+
</div>
390373
</div>
391374
</div>
392-
</div>
393-
</div>)
375+
</div>)
394376

395377
const onGitProviderSeleted = async (host: string, updateUser?: boolean) => {
396378
if (updateUser) {
@@ -458,13 +440,13 @@ export default function NewProject() {
458440
const renderBitbucketWarning = () => {
459441
return (
460442
<div className="mt-16 flex space-x-2 py-6 px-6 w-96 justify-betweeen bg-gitpod-kumquat-light rounded-xl">
461-
<div className="pr-3 self-center w-6">
462-
<img src={exclamation} />
463-
</div>
464-
<div className="flex-1 flex flex-col">
465-
<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>
466-
</div>
467-
</div>);
443+
<div className="pr-3 self-center w-6">
444+
<img src={exclamation} />
445+
</div>
446+
<div className="flex-1 flex flex-col">
447+
<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>
448+
</div>
449+
</div>);
468450
}
469451

470452
const onNewWorkspace = async () => {

0 commit comments

Comments
 (0)