Skip to content

Commit bf91b88

Browse files
author
Laurie T. Malau
committed
Improve start page when GitHub App not installed
1 parent d4b15bf commit bf91b88

File tree

1 file changed

+45
-74
lines changed

1 file changed

+45
-74
lines changed

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

Lines changed: 45 additions & 74 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"),
@@ -300,15 +276,24 @@ export default function NewProject() {
300276
const showSearchInput = !!repoSearchFilter || filteredRepos.length > 0;
301277

302278
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"}'>
279+
<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+
<p className="text-gray-500 text-center text-base mt-12">Select acccount on <b>{selectedProviderHost}</b> (<a className="gp-link cursor-pointer" onClick={() => setShowGitProviders(true)}>change</a>)</p>
281+
<div className={`mt-2 flex-col w-96`}>
282+
<div className="px-8 pt-5 flex flex-col space-y-2" data-analytics='{"label":"Identity"}'>
306283
<ContextMenu classes="w-full left-0 cursor-pointer" menuEntries={getDropDownEntries(accounts)}>
307284
<div className="w-full">
285+
{!selectedAccount && (
286+
<>
287+
<img src={user?.avatarUrl} className="rounded-full w-6 h-6 absolute top-1/4 left-3" />
288+
<input className="w-full px-12 cursor-pointer font-semibold" readOnly type="text" value={user?.name}></input>
289+
</>
290+
)}
308291
{icon && (
309-
<img src={icon} className="rounded-full w-6 h-6 absolute top-1/4 left-4" />
292+
<>
293+
<img src={icon} className="rounded-full w-6 h-6 absolute top-1/4 left-3" />
294+
<input className="w-full px-12 cursor-pointer font-semibold" readOnly type="text" value={selectedAccount}></input>
295+
</>
310296
)}
311-
<input className="w-full px-12 cursor-pointer font-semibold" readOnly type="text" value={selectedAccount || ""}></input>
312297
<img src={CaretDown} title="Select Account" className="filter-grayscale absolute top-1/2 right-3" />
313298
</div>
314299
</ContextMenu>
@@ -348,49 +333,35 @@ export default function NewProject() {
348333
)}
349334
{loaded && noReposAvailable && isGitHub() && (<div>
350335
<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>
355336
<span className="dark:text-gray-400">
356-
Authorize GitHub (github.com) or select a different account.
337+
Additional authorization is required to allow access to your repositories and trigger prebuilds for every new push to any of your branches.
357338
</span>
358339
<br />
359-
<button className="mt-6" onClick={() => reconfigure()}>Authorize</button>
340+
<button className="mt-6" onClick={() => reconfigure()}>Configure Gitpod App</button>
360341
</div>
361342
</div>)}
362343
</div>
363344

364345
</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-
)}
375-
</div>
376-
)}
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.
346+
<p className="text-center w-full mt-12 text-gray-500">
347+
<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>
379348
</p>
380349
</>
381350
);
382351

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>
352+
const renderLoadingState = () => (
353+
<div>
354+
<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>
355+
<div className="mt-8 border rounded-xl border-gray-100 dark:border-gray-700 flex-col">
356+
<div>
357+
<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">
358+
<h3 className="mb-2 text-gray-400 dark:text-gray-600 animate-pulse">
359+
Loading ...
360+
</h3>
361+
</div>
390362
</div>
391363
</div>
392-
</div>
393-
</div>)
364+
</div>)
394365

395366
const onGitProviderSeleted = async (host: string, updateUser?: boolean) => {
396367
if (updateUser) {
@@ -458,13 +429,13 @@ export default function NewProject() {
458429
const renderBitbucketWarning = () => {
459430
return (
460431
<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>);
432+
<div className="pr-3 self-center w-6">
433+
<img src={exclamation} />
434+
</div>
435+
<div className="flex-1 flex flex-col">
436+
<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>
437+
</div>
438+
</div>);
468439
}
469440

470441
const onNewWorkspace = async () => {

0 commit comments

Comments
 (0)