Ui/feat/updated-custom-oauth-app-create-workflow (#394)

* UI enhance: update custom OAuth app create/edit workflow
- Split into two steps: name and info
- Name step creates a new app if it doesn't exist
- Info step updates existing app with new values
- Client secret is no longer required for the info step (will not be
  changed)
- Miscellaneous UI tweaks

Signed-off-by: Ryan Hopper-Lowe <[email protected]>

* enhance: update workflow of custom oauth apps

* UI chore: Custom OAuth apps - improve form validation

* fix: readd w-fit to copy text component

---------

Signed-off-by: Ryan Hopper-Lowe <[email protected]>

ui/admin/app/components/form/controlledInputs.tsx

@@ -33,8 +33,7 @@ type BaseProps<
 export type ControlledInputProps<
     TValues extends FieldValues,
     TName extends FieldPath<TValues>,
-> = Omit<InputProps, keyof ControllerRenderProps<TValues, TName>> &
-    BaseProps<TValues, TName>;
+> = InputProps & BaseProps<TValues, TName>;
 
 export function ControlledInput<
     TValues extends FieldValues,
@@ -45,6 +44,7 @@ export function ControlledInput<
     label,
     className,
     description,
+    onChange,
     ...inputProps
 }: ControlledInputProps<TValues, TName>) {
     return (
@@ -55,14 +55,14 @@ export function ControlledInput<
                 <FormItem>
                     {label && <FormLabel>{label}</FormLabel>}
 
-                    {description && (
-                        <FormDescription hidden>{description}</FormDescription>
-                    )}
-
                     <FormControl>
                         <Input
                             {...field}
                             {...inputProps}
+                            onChange={(e) => {
+                                field.onChange(e);
+                                onChange?.(e);
+                            }}
                             className={cn(
                                 getFieldStateClasses(fieldState),
                                 className
@@ -71,6 +71,10 @@ export function ControlledInput<
                     </FormControl>
 
                     <FormMessage />
+
+                    {description && (
+                        <FormDescription>{description}</FormDescription>
+                    )}
                 </FormItem>
             )}
         />

ui/admin/app/components/oauth-apps/ConfigureOAuthApp.tsx

@@ -36,7 +36,6 @@ export function ConfigureOAuthApp({ type }: { type: OAuthProvider }) {
         await OauthAppService.createOauthApp({
             ...data,
             type,
-            refName: type,
             global: true,
             integration: type,
         });
@@ -54,7 +53,6 @@ export function ConfigureOAuthApp({ type }: { type: OAuthProvider }) {
         await OauthAppService.updateOauthApp(appOverride.id, {
             ...data,
             type: appOverride.type,
-            refName: appOverride.refName,
             global: appOverride.global,
             integration: appOverride.integration,
         });

ui/admin/app/components/oauth-apps/custom/CreateCustomOAuthApp.tsx

@@ -1,8 +1,5 @@
 import { PlusIcon } from "lucide-react";
 import { useState } from "react";
-import { mutate } from "swr";
-
-import { OauthAppService } from "~/lib/service/api/oauthAppService";
 
 import { Button } from "~/components/ui/button";
 import {
@@ -13,20 +10,12 @@ import {
     DialogTitle,
     DialogTrigger,
 } from "~/components/ui/dialog";
-import { useAsync } from "~/hooks/useAsync";
 
 import { CustomOAuthAppForm } from "./CustomOAuthAppForm";
 
 export function CreateCustomOAuthApp() {
     const [isOpen, setIsOpen] = useState(false);
 
-    const createApp = useAsync(OauthAppService.createOauthApp, {
-        onSuccess: () => {
-            setIsOpen(false);
-            mutate(OauthAppService.getOauthApps.key());
-        },
-    });
-
     return (
         <Dialog open={isOpen} onOpenChange={setIsOpen}>
             <DialogTrigger asChild>
@@ -45,14 +34,8 @@ export function CreateCustomOAuthApp() {
                 </DialogDescription>
 
                 <CustomOAuthAppForm
-                    onSubmit={(data) =>
-                        createApp.execute({
-                            type: "custom",
-                            global: true,
-                            refName: data.integration,
-                            ...data,
-                        })
-                    }
+                    onComplete={() => setIsOpen(false)}
+                    onCancel={() => setIsOpen(false)}
                 />
             </DialogContent>
         </Dialog>