From 4c9a02bed0bda9368e2f1517d8d47ecaa634493a Mon Sep 17 00:00:00 2001
From: Siddhant Khare <siddhant@gitpod.io>
Date: Mon, 22 Jan 2024 12:12:14 +0000
Subject: [PATCH 1/2] Fix integration settings URL and improve copy
 functionality

---
 .../src/user-settings/Integrations.tsx        | 25 ++++++++++++-------
 1 file changed, 16 insertions(+), 9 deletions(-)

diff --git a/components/dashboard/src/user-settings/Integrations.tsx b/components/dashboard/src/user-settings/Integrations.tsx
index dde1174a6b3510..094d46fb2dc4e1 100644
--- a/components/dashboard/src/user-settings/Integrations.tsx
+++ b/components/dashboard/src/user-settings/Integrations.tsx
@@ -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;
@@ -750,14 +760,10 @@ 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);
+            navigator.clipboard.writeText(callbackUrl);
+        } catch (error) {
+            console.error(error);
         }
     };
 
@@ -853,6 +859,7 @@ export function GitIntegrationModal(
                                 className="w-full pr-8"
                             />
                             <div className="cursor-pointer" onClick={() => copyRedirectURI()}>
+                                {/* TODO: Handle 'copied' state to change icon to green check mark for better UX */}
                                 <img
                                     src={copy}
                                     title="Copy the redirect URI to clipboard"

From 16f5c8c59b91857b04bee6838cf331a5d2a7d881 Mon Sep 17 00:00:00 2001
From: Siddhant Khare <siddhant@gitpod.io>
Date: Mon, 22 Jan 2024 12:34:27 +0000
Subject: [PATCH 2/2] Add InputWithCopy component to GitIntegrationModal & code
 cleanup

---
 .../src/user-settings/Integrations.tsx        | 32 ++-----------------
 1 file changed, 3 insertions(+), 29 deletions(-)

diff --git a/components/dashboard/src/user-settings/Integrations.tsx b/components/dashboard/src/user-settings/Integrations.tsx
index 094d46fb2dc4e1..aaadd3e9c9b720 100644
--- a/components/dashboard/src/user-settings/Integrations.tsx
+++ b/components/dashboard/src/user-settings/Integrations.tsx
@@ -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";
@@ -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 (
@@ -759,14 +759,6 @@ export function GitIntegrationModal(
         }
     };
 
-    const copyRedirectURI = () => {
-        try {
-            navigator.clipboard.writeText(callbackUrl);
-        } catch (error) {
-            console.error(error);
-        }
-    };
-
     const getNumber = (paramValue: string | null) => {
         if (!paramValue) {
             return 0;
@@ -799,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">
@@ -849,25 +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()}>
-                                {/* TODO: Handle 'copied' state to change icon to green check mark for better UX */}
-                                <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">