Skip to content

[dashboard] lint warnings: NewProject.tsx #8842

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

Closed
wants to merge 3 commits into from
Closed

[dashboard] lint warnings: NewProject.tsx #8842

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d4454e8
Pre-install Prettier and ESLint VSCode extensions
trumbitta Mar 16, 2022
f8a0a81
[dashboard] add button.gp-link CSS class
trumbitta Mar 16, 2022
630cabe
[dashboard] fix lint warnings for NewProject component
trumbitta Mar 16, 2022
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
2 changes: 2 additions & 0 deletions .gitpod.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,3 +56,5 @@ vscode:
- timonwong.shellcheck
- vscjava.vscode-java-pack
- fwcd.kotlin
- dbaeumer.vscode-eslint
- esbenp.prettier-vscode
33 changes: 23 additions & 10 deletions components/dashboard/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,8 @@
@tailwind utilities;

@layer base {
html, body {
html,
body {
@apply h-full;
}
body {
Expand Down Expand Up @@ -61,30 +62,42 @@
@apply cursor-default opacity-50 pointer-events-none;
}

a.gp-link {
button.gp-link {
@apply bg-transparent hover:bg-transparent p-0 rounded-none;
}

a.gp-link,
button.gp-link {
@apply text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-500;
}

input[type=text], input[type=search], input[type=password], select {
input[type="text"],
input[type="search"],
input[type="password"],
select {
@apply block w-56 text-gray-600 dark:text-gray-400 bg-white dark:bg-gray-800 rounded-md border border-gray-300 dark:border-gray-500 focus:border-gray-400 dark:focus:border-gray-400 focus:ring-0;
}
input[type=text]::placeholder, input[type=search]::placeholder, input[type=password]::placeholder {
input[type="text"]::placeholder,
input[type="search"]::placeholder,
input[type="password"]::placeholder {
@apply text-gray-400 dark:text-gray-500;
}
input[type=text].error, input[type=password].error, select.error {
input[type="text"].error,
input[type="password"].error,
select.error {
@apply border-gitpod-red dark:border-gitpod-red focus:border-gitpod-red dark:focus:border-gitpod-red;
}
input[disabled] {
@apply bg-gray-100 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 text-gray-400 dark:text-gray-500;
}
input[type=radio] {
input[type="radio"] {
@apply border border-gray-300 focus:border-gray-400 focus:bg-white focus:ring-0;
}
input[type=search] {
input[type="search"] {
@apply border-0 dark:bg-transparent;
}
input[type=checkbox] {
@apply disabled:opacity-50
input[type="checkbox"] {
@apply disabled:opacity-50;
}

progress {
Expand All @@ -99,4 +112,4 @@
progress::-moz-progress-bar {
@apply rounded-md bg-green-500;
}
}
}
128 changes: 69 additions & 59 deletions components/dashboard/src/projects/NewProject.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
* See License-AGPL.txt in the project root for license information.
*/

import { useContext, useEffect, useState } from "react";
import { useCallback, useContext, useEffect, useState } from "react";
import { getGitpodService, gitpodHostUrl } from "../service/service";
import { iconForAuthProvider, openAuthorizeWindow, simplifyProviderName } from "../provider-utils";
import { AuthProviderInfo, Project, ProviderRepository, Team, TeamMemberInfo, User } from "@gitpod/gitpod-protocol";
Expand Down Expand Up @@ -42,6 +42,29 @@ export default function NewProject() {

const [authProviders, setAuthProviders] = useState<AuthProviderInfo[]>([]);

const updateReposInAccounts = useCallback(
async (installationId?: string) => {
setLoaded(false);
setReposInAccounts([]);
if (!selectedProviderHost) {
return [];
}
try {
const repos = await getGitpodService().server.getProviderRepositoriesForUser({
provider: selectedProviderHost,
hints: { installationId },
});
setReposInAccounts(repos);
setLoaded(true);
return repos;
} catch (error) {
console.log(error);
}
return [];
},
[selectedProviderHost],
);

useEffect(() => {
if (user && selectedProviderHost === undefined) {
if (user.identities.find((i) => i.authProviderId === "Public-GitLab")) {
Expand All @@ -55,7 +78,7 @@ export default function NewProject() {
setAuthProviders(await getGitpodService().server.getAuthProviders());
})();
}
}, [user]);
}, [selectedProviderHost, user]);

useEffect(() => {
const params = new URLSearchParams(location.search);
Expand All @@ -69,7 +92,7 @@ export default function NewProject() {
window.history.replaceState({}, "", window.location.pathname);
setSelectedTeamOrUser(user);
}
}, []);
}, [location.search, teams, user]);

const [teamMembers, setTeamMembers] = useState<Record<string, TeamMemberInfo[]>>({});
useEffect(() => {
Expand Down Expand Up @@ -123,10 +146,34 @@ export default function NewProject() {
}, [selectedRepo]);

useEffect(() => {
const createProject = async (teamOrUser: Team | User, repo: ProviderRepository) => {
if (!selectedProviderHost) {
return;
}
const repoSlug = repo.path || repo.name;

try {
const project = await getGitpodService().server.createProject({
name: repo.name,
slug: repoSlug,
cloneUrl: repo.cloneUrl,
account: repo.account,
provider: selectedProviderHost,
...(User.is(teamOrUser) ? { userId: teamOrUser.id } : { teamId: teamOrUser.id }),
appInstallationId: String(repo.installationId),
});

setProject(project);
} catch (error) {
const message = (error && error?.message) || "Failed to create new project.";
window.alert(message);
}
};

if (selectedTeamOrUser && selectedRepo) {
createProject(selectedTeamOrUser, selectedRepo);
}
}, [selectedTeamOrUser, selectedRepo]);
}, [selectedTeamOrUser, selectedRepo, selectedProviderHost]);

useEffect(() => {
if (reposInAccounts.length === 0) {
Expand Down Expand Up @@ -155,7 +202,7 @@ export default function NewProject() {
(async () => {
await updateReposInAccounts();
})();
}, [selectedProviderHost]);
}, [selectedProviderHost, updateReposInAccounts]);

useEffect(() => {
if (project && sourceOfConfig) {
Expand All @@ -166,30 +213,10 @@ export default function NewProject() {
await getGitpodService().server.triggerPrebuild(project.id, null);
})();
}
}, [project, sourceOfConfig]);
}, [guessedConfigString, project, sourceOfConfig]);

const isGitHub = () => selectedProviderHost === "github.com";

const updateReposInAccounts = async (installationId?: string) => {
setLoaded(false);
setReposInAccounts([]);
if (!selectedProviderHost) {
return [];
}
try {
const repos = await getGitpodService().server.getProviderRepositoriesForUser({
provider: selectedProviderHost,
hints: { installationId },
});
setReposInAccounts(repos);
setLoaded(true);
return repos;
} catch (error) {
console.log(error);
}
return [];
};

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

const createProject = async (teamOrUser: Team | User, repo: ProviderRepository) => {
if (!selectedProviderHost) {
return;
}
const repoSlug = repo.path || repo.name;

try {
const project = await getGitpodService().server.createProject({
name: repo.name,
slug: repoSlug,
cloneUrl: repo.cloneUrl,
account: repo.account,
provider: selectedProviderHost,
...(User.is(teamOrUser) ? { userId: teamOrUser.id } : { teamId: teamOrUser.id }),
appInstallationId: String(repo.installationId),
});

setProject(project);
} catch (error) {
const message = (error && error?.message) || "Failed to create new project.";
window.alert(message);
}
};

const toSimpleName = (fullName: string) => {
const splitted = fullName.split("/");
if (splitted.length < 2) {
Expand All @@ -243,7 +246,7 @@ export default function NewProject() {
const getDropDownEntries = (accounts: Map<string, { avatarUrl: string }>) => {
const renderItemContent = (label: string, icon: string, addClasses?: string) => (
<div className="w-full flex">
<img src={icon} className="rounded-full w-6 h-6 my-auto" />
<img src={icon} className="rounded-full w-6 h-6 my-auto" alt="" />
<span className={"pl-2 text-gray-600 dark:text-gray-100 text-base " + (addClasses || "")}>{label}</span>
</div>
);
Expand Down Expand Up @@ -311,9 +314,9 @@ export default function NewProject() {
<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)}>
<button className="gp-link cursor-pointer" onClick={() => setShowGitProviders(true)}>
change
</a>
</button>
)
</p>
<div className={`mt-2 flex-col ${noReposAvailable && isGitHub() ? "w-96" : ""}`}>
Expand All @@ -325,6 +328,7 @@ export default function NewProject() {
<img
src={user?.avatarUrl}
className="rounded-full w-6 h-6 absolute my-2.5 left-3"
alt=""
/>
<input
className="w-full px-12 cursor-pointer font-semibold"
Expand All @@ -339,6 +343,7 @@ export default function NewProject() {
<img
src={icon ? icon : ""}
className="rounded-full w-6 h-6 absolute my-2.5 left-3"
alt=""
/>
<input
className="w-full px-12 cursor-pointer font-semibold"
Expand All @@ -352,12 +357,18 @@ export default function NewProject() {
src={CaretDown}
title="Select Account"
className="filter-grayscale absolute top-1/2 right-3"
alt=""
/>
</div>
</ContextMenu>
{showSearchInput && (
<div className="w-full relative ">
<img src={search} title="Search" className="filter-grayscale absolute top-1/3 left-3" />
<img
src={search}
title="Search"
alt="Search"
className="filter-grayscale absolute top-1/3 left-3"
/>
<input
className="w-96 pl-10 border-0"
type="text"
Expand Down Expand Up @@ -430,13 +441,12 @@ export default function NewProject() {
<div>
<div className="text-gray-500 text-center w-96 mx-8">
Repository not found?{" "}
<a
href="javascript:void(0)"
<button
onClick={(e) => reconfigure()}
className="text-gray-400 underline underline-thickness-thin underline-offset-small hover:text-gray-600"
className="gp-link text-gray-400 underline underline-thickness-thin underline-offset-small hover:text-gray-600"
>
Reconfigure
</a>
</button>
</div>
</div>
)}
Expand Down Expand Up @@ -682,7 +692,7 @@ function GitProviders(props: {
{errorMessage && (
<div className="mt-16 flex space-x-2 py-6 px-6 w-96 justify-between bg-gitpod-kumquat-light rounded-xl">
<div className="pr-3 self-center w-6">
<img src={exclamation} />
<img src={exclamation} alt="Heads up!" />
</div>
<div className="flex-1 flex flex-col">
<p className="text-gitpod-red text-sm">{errorMessage}</p>
Expand Down
Loading