Skip to content

Commit 55b86f3

Browse files
AlexTugarevAlexTugarev
committed
fixup
1 parent bd8fb0b commit 55b86f3

File tree

1 file changed

+100
-66
lines changed

1 file changed

+100
-66
lines changed

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

Lines changed: 100 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ export default function NewProject() {
2525
const { teams } = useContext(TeamsContext);
2626
const { user, setUser } = useContext(UserContext);
2727

28-
const [provider, setProvider] = useState<string>("github.com");
28+
const [provider, setProvider] = useState<string | undefined>();
2929
const [reposInAccounts, setReposInAccounts] = useState<ProviderRepository[]>([]);
3030
const [repoSearchFilter, setRepoSearchFilter] = useState<string>("");
3131
const [selectedAccount, setSelectedAccount] = useState<string | undefined>(undefined);
@@ -37,6 +37,16 @@ export default function NewProject() {
3737
const [showNewTeam, setShowNewTeam] = useState<boolean>(false);
3838
const [loaded, setLoaded] = useState<boolean>(false);
3939

40+
useEffect(() => {
41+
if (user && provider === undefined) {
42+
if (user.identities.find(i => i.authProviderId === "Public-GitLab")) {
43+
setProvider("gitlab.com");
44+
} else if (user.identities.find(i => i.authProviderId === "Public-GitHub")) {
45+
setProvider("github.com");
46+
}
47+
}
48+
}, [user]);
49+
4050
useEffect(() => {
4151
const params = new URLSearchParams(location.search);
4252
const teamParam = params.get("team");
@@ -53,7 +63,6 @@ export default function NewProject() {
5363
if (first) {
5464
setSelectedAccount(first.account);
5565
}
56-
setLoaded(true);
5766
})();
5867
}, []);
5968

@@ -69,6 +78,7 @@ export default function NewProject() {
6978
} else {
7079
const mostRecent = reposInAccounts.reduce((prev, current) => (prev.installationUpdatedAt || 0) > (current.installationUpdatedAt || 0) ? prev : current);
7180
setSelectedAccount(mostRecent.account);
81+
setLoaded(true);
7282
}
7383

7484
}, [reposInAccounts]);
@@ -90,6 +100,9 @@ export default function NewProject() {
90100
const isGitHub = () => provider === "github.com";
91101

92102
const updateReposInAccounts = async (installationId?: string) => {
103+
if (!provider) {
104+
return [];
105+
}
93106
try {
94107
const repos = await getGitpodService().server.getProviderRepositoriesForUser({ provider, hints: { installationId } });
95108
setReposInAccounts(repos);
@@ -106,7 +119,7 @@ export default function NewProject() {
106119
}
107120

108121
const updateOrgsState = async () => {
109-
if (isGitHub()) {
122+
if (provider && isGitHub()) {
110123
try {
111124
const ghToken = await getToken(provider);
112125
setNoOrgs(ghToken?.scopes.includes("read:org") !== true);
@@ -140,6 +153,9 @@ export default function NewProject() {
140153
}
141154

142155
const createProject = async (teamOrUser: Team | User, selectedRepo: string) => {
156+
if (!provider) {
157+
return;
158+
}
143159
const repo = reposInAccounts.find(r => r.account === selectedAccount && r.name === selectedRepo);
144160
if (!repo) {
145161
console.error("No repo selected!")
@@ -166,7 +182,6 @@ export default function NewProject() {
166182
return splitted.shift() && splitted.join("/");
167183
}
168184

169-
const reposToRender = Array.from(reposInAccounts).filter(r => r.account === selectedAccount && r.name.includes(repoSearchFilter));
170185
const accounts = new Map<string, { avatarUrl: string }>();
171186
reposInAccounts.forEach(r => { if (!accounts.has(r.account)) accounts.set(r.account, { avatarUrl: r.accountAvatarUrl }) });
172187

@@ -203,33 +218,38 @@ export default function NewProject() {
203218

204219
const renderSelectRepository = () => {
205220

221+
const noReposAvailable = reposInAccounts.length === 0;
222+
const filteredRepos = Array.from(reposInAccounts).filter(r => r.account === selectedAccount && r.name.includes(repoSearchFilter));
206223
const icon = selectedAccount && accounts.get(selectedAccount)?.avatarUrl;
207224

208-
const renderRepos = () => (<div className="mt-10 border rounded-t-xl border-gray-100 flex-col">
209-
<div className="px-8 pt-8 flex flex-col space-y-2">
210-
<ContextMenu classes="w-full left-0 cursor-pointer" menuEntries={getDropDownEntries(accounts)}>
211-
<div className="w-full">
212-
<img src={icon} className="rounded-full w-6 h-6 absolute top-1/4 left-4" />
213-
<input className="w-full px-12 cursor-pointer font-semibold" readOnly type="text" value={selectedAccount || ""}></input>
214-
<img src={CaretDown} title="Select Account" className="filter-grayscale absolute top-1/2 right-3" />
225+
const renderRepos = () => (<>
226+
<div className={`mt-10 border ${isGitHub() ? "rounded-t-xl border-b-0" : "rounded-xl"} border-gray-100 flex-col`}>
227+
<div className="px-8 pt-8 flex flex-col space-y-2">
228+
<ContextMenu classes="w-full left-0 cursor-pointer" menuEntries={getDropDownEntries(accounts)}>
229+
<div className="w-full">
230+
{icon && (
231+
<img src={icon} className="rounded-full w-6 h-6 absolute top-1/4 left-4" />
232+
)}
233+
<input className="w-full px-12 cursor-pointer font-semibold" readOnly type="text" value={selectedAccount || ""}></input>
234+
<img src={CaretDown} title="Select Account" className="filter-grayscale absolute top-1/2 right-3" />
235+
</div>
236+
</ContextMenu>
237+
<div className="w-full relative ">
238+
<img src={search} title="Search" className="filter-grayscale absolute top-1/3 left-3" />
239+
<input className="w-96 pl-10 border-0" type="text" placeholder="Search Repositories" value={repoSearchFilter}
240+
onChange={(e) => setRepoSearchFilter(e.target.value)}></input>
215241
</div>
216-
</ContextMenu>
217-
<div className="w-full relative ">
218-
<img src={search} title="Search" className="filter-grayscale absolute top-1/3 left-3" />
219-
<input className="w-96 pl-10 border-0" type="text" placeholder="Search Repositories" value={repoSearchFilter}
220-
onChange={(e) => setRepoSearchFilter(e.target.value)}></input>
221242
</div>
222-
</div>
223-
<div className="p-6 flex-col">
224-
{reposToRender.length > 0 && (
225-
<div className="overscroll-contain max-h-80 overflow-y-auto pr-2">
226-
{reposToRender.map(r => (
227-
<div key={`repo-${r.name}`} className="flex p-3 rounded-xl hover:bg-gray-100 dark:hover:bg-gray-800 focus:bg-gitpod-kumquat-light transition ease-in-out group" >
228-
229-
<div className="flex-grow">
230-
<div className="text-base text-gray-900 dark:text-gray-50 font-medium rounded-xl whitespace-nowrap">{toSimpleName(r.name)}</div>
231-
<p>Updated {moment(r.updatedAt).fromNow()}</p>
232-
</div>
243+
<div className="p-6 flex-col">
244+
{filteredRepos.length > 0 && (
245+
<div className="overscroll-contain max-h-80 overflow-y-auto pr-2">
246+
{filteredRepos.map(r => (
247+
<div key={`repo-${r.name}`} className="flex p-3 rounded-xl hover:bg-gray-100 dark:hover:bg-gray-800 focus:bg-gitpod-kumquat-light transition ease-in-out group" >
248+
249+
<div className="flex-grow">
250+
<div className="text-base text-gray-900 dark:text-gray-50 font-medium rounded-xl whitespace-nowrap">{toSimpleName(r.name)}</div>
251+
<p>Updated {moment(r.updatedAt).fromNow()}</p>
252+
</div>
233253
<div className="flex justify-end">
234254
<div className="h-full my-auto flex self-center opacity-0 group-hover:opacity-100">
235255
{!r.inUse ? (
@@ -239,48 +259,56 @@ export default function NewProject() {
239259
)}
240260
</div>
241261
</div>
262+
</div>
263+
))}
264+
</div>
265+
)}
266+
{!noReposAvailable && filteredRepos.length === 0 && (
267+
<p className="text-center">No Results</p>
268+
)}
269+
{loaded && noReposAvailable && (<div>
270+
<div className="px-12 py-16 text-center text-gray-500 bg-gray-50 dark:bg-gray-800 rounded-xl">
271+
<img src={NoAccess} title="No Access" className="m-auto mb-4" />
272+
<h3 className="mb-2 text-gray-600 dark:text-gray-400">
273+
No Access
274+
</h3>
275+
<span className="dark:text-gray-500">
276+
Authorize GitHub (github.com) or select a different account.
277+
</span>
278+
<br />
279+
<button className="mt-6" onClick={() => reconfigure()}>Authorize</button>
280+
</div>
281+
</div>)}
282+
</div>
283+
284+
</div>
285+
{isGitHub() && (
286+
<div className="pt-3 bg-gray-100 rounded-b-xl border-gray-100 border">
287+
<div className="text-gray-500 text-center w-96 mx-8">
288+
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>
289+
</div>
290+
{isGitHub() && noOrgs && (
291+
<div className="text-gray-500 mx-auto text-center">
292+
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>
242293
</div>
243-
))}
294+
)}
244295
</div>
245-
)}
246-
{reposToRender.length === 0 && (
247-
<p className="text-center ">not found</p>
248-
)}
249-
</div>
250-
251-
<div className="px-3 pt-3 bg-gray-100">
252-
<div className="text-gray-500 text-center">
253-
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>
254-
</div>
255-
{isGitHub() && noOrgs && (
256-
<div className="text-gray-500 mx-auto text-center">
257-
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>
296+
)}
297+
</>
298+
);
299+
300+
const renderEmptyState = () => (<div>
301+
<div className="mt-8 border rounded-xl border-gray-100 dark:border-gray-700 flex-col">
302+
<div>
303+
<div className="px-12 py-16 text-center text-gray-500 bg-gray-50 dark:bg-gray-800 rounded-xl">
304+
<h3 className="mb-2 text-gray-600 dark:text-gray-400">
305+
Loading ...
306+
</h3>
258307
</div>
259-
)}
260-
</div>
261-
<div className="h-3 border rounded-b-xl border-gray-100 bg-gray-100"></div>
262-
</div>);
263-
264-
const renderEmptyState = () => (<div className="mt-8 border rounded-xl border-gray-100 dark:border-gray-700 flex-col">
265-
<div>
266-
<div className="px-12 py-16 text-center text-gray-500 bg-gray-50 dark:bg-gray-800 rounded-xl">
267-
<img src={NoAccess} title="No Access" className="m-auto mb-4" />
268-
<h3 className="mb-2 text-gray-600 dark:text-gray-400">
269-
No Access
270-
</h3>
271-
<span className="dark:text-gray-500">
272-
Authorize GitHub (github.com) or select a different account.
273-
</span>
274-
<br/>
275-
<button className="mt-6" onClick={() => reconfigure()}>Authorize Provider</button>
276-
<br/>
277-
<button className="mt-6" onClick={() => setShowGitProviders(true)}>Select Git Provider</button>
278308
</div>
279309
</div>
280310
</div>)
281311

282-
const empty = reposInAccounts.length === 0;
283-
284312
const onGitProviderSeleted = async (host: string, updateUser?: boolean) => {
285313
if (updateUser) {
286314
setUser(await getGitpodService().server.getLoggedInUser());
@@ -289,9 +317,15 @@ export default function NewProject() {
289317
setProvider(host);
290318
}
291319

292-
return (<>
293-
{(loaded && empty && !showGitProviders) ? renderEmptyState() : (showGitProviders ? (<GitProviders onHostSelected={onGitProviderSeleted} />) : renderRepos())}
294-
</>)
320+
if (!loaded) {
321+
return renderEmptyState();
322+
}
323+
324+
if (showGitProviders) {
325+
return (<GitProviders onHostSelected={onGitProviderSeleted} />);
326+
}
327+
328+
return renderRepos();
295329
};
296330

297331
const renderSelectTeam = () => {
@@ -337,7 +371,7 @@ export default function NewProject() {
337371

338372
return (<div className="flex flex-col w-96 mt-24 mx-auto items-center">
339373
<h1>New Project</h1>
340-
<p className="text-gray-500 text-center text-base">Select a git repository.</p>
374+
<p className="text-gray-500 text-center text-base">Select a git repository on <strong>{provider}</strong>.</p>
341375

342376
{!selectedRepo && renderSelectRepository()}
343377

0 commit comments

Comments
 (0)