Skip to content

Fix & Refactor Git Integration settings modal #19345

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

Merged
merged 2 commits into from
Jan 23, 2024
Merged

Fix & Refactor Git Integration settings modal #19345

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4c9a02b
Fix integration settings URL and improve copy functionality
Siddhant-K-code Jan 22, 2024
16f5c8c
Add InputWithCopy component to GitIntegrationModal & code cleanup
Siddhant-K-code Jan 22, 2024
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
49 changes: 15 additions & 34 deletions components/dashboard/src/user-settings/Integrations.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@ import { ItemsList } from "../components/ItemsList";
import { SpinnerLoader } from "../components/Loader";
import Modal, { ModalBody, ModalHeader, ModalFooter } from "../components/Modal";
import { Heading2, Subheading } from "../components/typography/headings";
import copy from "../images/copy.svg";
import exclamation from "../images/exclamation.svg";
import { openAuthorizeWindow, toAuthProviderLabel } from "../provider-utils";
import { gitpodHostUrl } from "../service/service";
Expand All @@ -41,6 +40,7 @@ import { useUpdateUserAuthProviderMutation } from "../data/auth-providers/update
import { useDeleteUserAuthProviderMutation } from "../data/auth-providers/delete-user-auth-provider-mutation";
import { Button } from "@podkit/buttons/Button";
import { isOrganizationOwned } from "@gitpod/public-api-common/lib/user-utils";
import { InputWithCopy } from "../components/InputWithCopy";

export default function Integrations() {
return (
Expand Down Expand Up @@ -699,10 +699,20 @@ export function GitIntegrationModal(
let settingsUrl = ``;
switch (type) {
case AuthProviderType.GITHUB:
settingsUrl = `${host}/settings/developers`;
// if host is empty or untouched by user, use the default value
if (host === "") {
settingsUrl = "github.com/settings/developers";
} else {
settingsUrl = `${host}/settings/developers`;
}
break;
case AuthProviderType.GITLAB:
settingsUrl = `${host}/-/profile/applications`;
// if host is empty or untouched by user, use the default value
if (host === "") {
settingsUrl = "gitlab.com/-/profile/applications";
} else {
settingsUrl = `${host}/-/profile/applications`;
}
break;
default:
return undefined;
Expand Down Expand Up @@ -749,18 +759,6 @@ export function GitIntegrationModal(
}
};

const copyRedirectURI = () => {
const el = document.createElement("textarea");
el.value = callbackUrl;
document.body.appendChild(el);
el.select();
try {
document.execCommand("copy");
} finally {
document.body.removeChild(el);
}
};

const getNumber = (paramValue: string | null) => {
if (!paramValue) {
return 0;
Expand Down Expand Up @@ -793,7 +791,7 @@ export function GitIntegrationModal(
</span>
</div>

<div className="overscroll-contain max-h-96 overflow-y-auto pr-2">
<div className="overscroll-contain max-h-96 space-y-4 overflow-y-auto pr-2">
{mode === "new" && (
<div className="flex flex-col space-y-2">
<label htmlFor="type" className="font-medium">
Expand Down Expand Up @@ -843,24 +841,7 @@ export function GitIntegrationModal(
<label htmlFor="redirectURI" className="font-medium">
Redirect URI
</label>
<div className="w-full relative">
<input
id="redirectURI"
disabled={true}
readOnly={true}
type="text"
value={callbackUrl}
className="w-full pr-8"
/>
<div className="cursor-pointer" onClick={() => copyRedirectURI()}>
<img
src={copy}
title="Copy the redirect URI to clipboard"
className="absolute top-1/3 right-3"
alt="copy icon"
/>
</div>
</div>
<InputWithCopy value={callbackUrl} tip="Copy the redirect URI to clipboard" />
<span className="text-gray-500 text-sm">{getRedirectUrlDescription(type, host)}</span>
</div>
<div className="flex flex-col space-y-2">
Expand Down