From af485b9180e8b52c7afe68f74405ca46f4a7b488 Mon Sep 17 00:00:00 2001
From: Matt Aitken <matt@mattaitken.com>
Date: Fri, 26 Jan 2024 17:25:15 +0000
Subject: [PATCH] Fix custom oauth client (#872)

* A checkbox can now be readonly and not be checkable, with correct styling

* Use readOnly for the hasCustomClient checkbox, not disabled

* Better styling of the disabled state

* The update oauth form too
---
 .../integrations/ConnectToOAuthForm.tsx        |  5 +++--
 .../integrations/UpdateOAuthForm.tsx           |  2 +-
 .../app/components/primitives/Checkbox.tsx     | 18 +++++++++++++-----
 3 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/apps/webapp/app/components/integrations/ConnectToOAuthForm.tsx b/apps/webapp/app/components/integrations/ConnectToOAuthForm.tsx
index ae7a7f728..98ee5ffdc 100644
--- a/apps/webapp/app/components/integrations/ConnectToOAuthForm.tsx
+++ b/apps/webapp/app/components/integrations/ConnectToOAuthForm.tsx
@@ -127,7 +127,7 @@ export function ConnectToOAuthForm({
             id="hasCustomClient"
             label="Use my OAuth App"
             variant="simple/small"
-            disabled={requiresCustomOAuthApp}
+            readOnly={requiresCustomOAuthApp}
             onChange={(checked) => setUseMyOAuthApp(checked)}
             {...conform.input(hasCustomClient, { type: "checkbox" })}
             defaultChecked={requiresCustomOAuthApp}
@@ -135,8 +135,9 @@ export function ConnectToOAuthForm({
           {useMyOAuthApp && (
             <div className="ml-6 mt-2">
               <Paragraph variant="small" className="mb-2">
-                Set the callback url to <CodeBlock code={callbackUrl} showLineNumbers={false} />
+                Set the callback url to
               </Paragraph>
+              <CodeBlock code={callbackUrl} showLineNumbers={false} />
               <div className="flex flex-col gap-2">
                 <div className="flex gap-2">
                   <InputGroup fullWidth>
diff --git a/apps/webapp/app/components/integrations/UpdateOAuthForm.tsx b/apps/webapp/app/components/integrations/UpdateOAuthForm.tsx
index aeadde9ea..e2ff1f596 100644
--- a/apps/webapp/app/components/integrations/UpdateOAuthForm.tsx
+++ b/apps/webapp/app/components/integrations/UpdateOAuthForm.tsx
@@ -117,7 +117,7 @@ export function UpdateOAuthForm({
             id="hasCustomClient"
             label="Use my OAuth App"
             variant="simple/small"
-            disabled={requiresCustomOAuthApp}
+            readOnly={requiresCustomOAuthApp}
             onChange={(checked) => setUseMyOAuthApp(checked)}
             {...conform.input(hasCustomClient, { type: "checkbox" })}
             defaultChecked={requiresCustomOAuthApp}
diff --git a/apps/webapp/app/components/primitives/Checkbox.tsx b/apps/webapp/app/components/primitives/Checkbox.tsx
index af1b38707..9dae321d1 100644
--- a/apps/webapp/app/components/primitives/Checkbox.tsx
+++ b/apps/webapp/app/components/primitives/Checkbox.tsx
@@ -109,14 +109,16 @@ export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
     return (
       <div
         className={cn(
-          "group flex cursor-pointer items-start gap-x-2 transition",
+          "group flex items-start gap-x-2 transition ",
+          props.readOnly || disabled ? "cursor-default" : "cursor-pointer",
           buttonClassName,
           isChecked && isCheckedClassName,
-          isDisabled && isDisabledClassName,
+          (isDisabled || props.readOnly) && isDisabledClassName,
           className
         )}
         onClick={(e) => {
-          if (isDisabled) return;
+          //returning false is not setting the state to false, it stops the event from bubbling up
+          if (isDisabled || props.readOnly === true) return false;
           setIsChecked((c) => !c);
         }}
       >
@@ -127,12 +129,15 @@ export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
           value={value}
           checked={isChecked}
           onChange={(e) => {
+            //returning false is not setting the state to false, it stops the event from bubbling up
+            if (isDisabled || props.readOnly === true) return false;
             setIsChecked(!isChecked);
           }}
           disabled={isDisabled}
           className={cn(
             inputPositionClasses,
-            "cursor-pointer rounded-sm border border-slate-700 bg-transparent transition checked:!bg-indigo-500 group-hover:bg-slate-900 group-hover:checked:bg-indigo-500 group-focus:ring-1 focus:ring-indigo-500 focus:ring-offset-0 focus:ring-offset-transparent focus-visible:outline-none focus-visible:ring-indigo-500 disabled:border-slate-650 disabled:!bg-slate-700"
+            props.readOnly || disabled ? "cursor-default" : "cursor-pointer",
+            "rounded-sm border border-slate-700 bg-transparent transition checked:!bg-indigo-500 read-only:border-slate-650 read-only:!bg-slate-700 group-hover:bg-slate-900 group-hover:checked:bg-indigo-500 group-focus:ring-1 focus:ring-indigo-500 focus:ring-offset-0 focus:ring-offset-transparent focus-visible:outline-none focus-visible:ring-indigo-500  disabled:border-slate-650 disabled:!bg-slate-700"
           )}
           id={id}
           ref={ref}
@@ -141,7 +146,10 @@ export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
           <div className="flex items-center gap-x-2">
             <label
               htmlFor={id}
-              className={cn("cursor-pointer", labelClassName)}
+              className={cn(
+                props.readOnly || disabled ? "cursor-default" : "cursor-pointer",
+                labelClassName
+              )}
               onClick={(e) => e.preventDefault()}
             >
               {label}