Skip to content

Commit

Permalink
update
Browse files Browse the repository at this point in the history
  • Loading branch information
@liangfung
liangfung committed Apr 27, 2024
1 parent e567b00 commit 5b92d20
Show file tree
Hide file tree
Showing 3 changed files with 171 additions and 198 deletions.
331 changes: 158 additions & 173 deletions ...y-ui/app/(dashboard)/settings/(integrations)/repository/github/components/github-form.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,204 +33,189 @@ import {
import { IconExternalLink, IconSpinner } from '@/components/ui/icons'
import { Input } from '@/components/ui/input'

export const createGithubProviderSchema = z.object({
export const repositoryProviderFormSchema = z.object({
displayName: z.string(),
accessToken: z.string()
})

export const updateGithubProviderSchema = createGithubProviderSchema.extend({})

export type CreateGithubProviderFormValues = z.infer<
typeof createGithubProviderSchema
>
export type UpdateGithubProviderFormValues = z.infer<
typeof updateGithubProviderSchema
export type RepositoryProviderFormValues = z.infer<
typeof repositoryProviderFormSchema
>

interface GithubProviderFormProps {
isNew?: boolean
defaultValues?: Partial<z.infer<typeof createGithubProviderSchema>>
form: UseFormReturn<RepositoryProviderFormValues>
onSubmit: (values: any) => Promise<any>
onDelete?: () => Promise<any>
cancleable?: boolean
deletable?: boolean
}

export const GithubProviderForm = React.forwardRef<
{
form: UseFormReturn<
CreateGithubProviderFormValues | UpdateGithubProviderFormValues
>
},
GithubProviderFormProps
>(
(
{ isNew, defaultValues, onSubmit, onDelete, cancleable = true, deletable },
ref
) => {
const router = useRouter()
const formSchema = isNew
? createGithubProviderSchema
: updateGithubProviderSchema
export const GithubProviderForm: React.FC<GithubProviderFormProps> = ({
isNew,
form,
onSubmit,
onDelete,
cancleable = true,
deletable
}) => {
const router = useRouter()

const [deleteAlertVisible, setDeleteAlertVisible] = React.useState(false)
const [isDeleting, setIsDeleting] = React.useState(false)
const form = useForm<z.infer<typeof formSchema>>({
resolver: zodResolver(formSchema),
defaultValues
})
const { isSubmitting, dirtyFields } = form.formState
const isDirty = !isEmpty(dirtyFields)
const [deleteAlertVisible, setDeleteAlertVisible] = React.useState(false)
const [isDeleting, setIsDeleting] = React.useState(false)

const handleDeleteRepositoryProvider: React.MouseEventHandler<
HTMLButtonElement
> = async e => {
e.preventDefault()
if (!onDelete) return
const { isSubmitting, dirtyFields } = form.formState
const isDirty = !isEmpty(dirtyFields)

setIsDeleting(true)
try {
await onDelete()
} catch (error) {
toast.error('Failed to delete GitHub repository provider')
} finally {
setIsDeleting(false)
}
}
const handleDeleteRepositoryProvider: React.MouseEventHandler<
HTMLButtonElement
> = async e => {
e.preventDefault()
if (!onDelete) return

React.useImperativeHandle(
ref,
() => {
return {
form
}
},
[form]
)
setIsDeleting(true)
try {
await onDelete()
} catch (error) {
toast.error('Failed to delete GitHub repository provider')
} finally {
setIsDeleting(false)
}
}

return (
<Form {...form}>
<div className="grid gap-2">
<form className="grid gap-6" onSubmit={form.handleSubmit(onSubmit)}>
<FormField
control={form.control}
name="displayName"
render={({ field }) => (
<FormItem>
<FormLabel required>Display name</FormLabel>
<FormDescription>
A display name to help identifying different providers.
</FormDescription>
<FormControl>
<Input
placeholder="e.g. GitHub"
autoCapitalize="none"
autoCorrect="off"
autoComplete="off"
{...field}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="accessToken"
render={({ field }) => (
<FormItem>
<FormLabel required>Personal Access Token</FormLabel>
<FormDescription>
<div>
Create a dedicated service user and generate a{' '}
<ExternalLink href="https://github.com/settings/personal-access-tokens/new">
fine-grained personal access
</ExternalLink>{' '}
token with the member role for the organization or all
projects to be managed.
</div>
<div className="my-2 ml-4">• Contents (Read-only)</div>
</FormDescription>
<FormControl>
<Input
placeholder="e.g. github_pat_1ABCD1234ABCD1234ABCD1234ABCD1234ABCD1234"
autoCapitalize="none"
autoCorrect="off"
autoComplete="off"
{...field}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<div className="flex items-center justify-between">
<div>
return (
<Form {...form}>
<div className="grid gap-2">
<form className="grid gap-6" onSubmit={form.handleSubmit(onSubmit)}>
<FormField
control={form.control}
name="displayName"
render={({ field }) => (
<FormItem>
<FormLabel required>Display name</FormLabel>
<FormDescription>
A display name to help identifying different providers.
</FormDescription>
<FormControl>
<Input
placeholder="e.g. GitHub"
autoCapitalize="none"
autoCorrect="off"
autoComplete="off"
{...field}
/>
</FormControl>
<FormMessage />
</div>
<div className="flex gap-2">
{cancleable && (
<Button
type="button"
variant="ghost"
disabled={isSubmitting}
onClick={() => router.back()}
>
Cancel
</Button>
)}
{deletable && (
<AlertDialog
open={deleteAlertVisible}
onOpenChange={setDeleteAlertVisible}
>
<AlertDialogTrigger asChild>
<Button type="button" variant="hover-destructive">
Delete
</Button>
</AlertDialogTrigger>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>
Are you absolutely sure?
</AlertDialogTitle>
<AlertDialogDescription>
This will delete the provider and remove any
repositories that have already been added to the
provider.
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogAction
className={buttonVariants({ variant: 'destructive' })}
onClick={handleDeleteRepositoryProvider}
disabled={isDeleting}
>
{isDeleting && <IconSpinner className="mr-2" />}
Yes, delete it
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
)}
</FormItem>
)}
/>
<FormField
control={form.control}
name="accessToken"
render={({ field }) => (
<FormItem>
<FormLabel required>Personal Access Token</FormLabel>
<FormDescription>
<div>
Create a dedicated service user and generate a{' '}
<ExternalLink href="https://github.com/settings/personal-access-tokens/new">
fine-grained personal access
</ExternalLink>{' '}
token with the member role for the organization or all
projects to be managed.
</div>
<div className="my-2 ml-4">• Contents (Read-only)</div>
</FormDescription>
<FormControl>
<Input
placeholder={
isNew
? 'e.g. github_pat_1ABCD1234ABCD1234ABCD1234ABCD1234ABCD1234'
: '*****'
}
autoCapitalize="none"
autoCorrect="off"
autoComplete="off"
{...field}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<div className="flex items-center justify-between">
<div>
<FormMessage />
</div>
<div className="flex gap-2">
{cancleable && (
<Button
type="submit"
disabled={isSubmitting || (!isNew && !isDirty)}
type="button"
variant="ghost"
disabled={isSubmitting}
onClick={() => router.back()}
>
{isSubmitting && <IconSpinner className="mr-2" />}
{isNew ? 'Create' : 'Update'}
Cancel
</Button>
</div>
)}
{deletable && (
<AlertDialog
open={deleteAlertVisible}
onOpenChange={setDeleteAlertVisible}
>
<AlertDialogTrigger asChild>
<Button type="button" variant="hover-destructive">
Delete
</Button>
</AlertDialogTrigger>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>
Are you absolutely sure?
</AlertDialogTitle>
<AlertDialogDescription>
This will delete the provider and remove any
repositories that have already been added to the
provider.
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogAction
className={buttonVariants({ variant: 'destructive' })}
onClick={handleDeleteRepositoryProvider}
disabled={isDeleting}
>
{isDeleting && <IconSpinner className="mr-2" />}
Yes, delete it
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
)}
<Button
type="submit"
disabled={isSubmitting || (!isNew && !isDirty)}
>
{isSubmitting && <IconSpinner className="mr-2" />}
{isNew ? 'Create' : 'Update'}
</Button>
</div>
</form>
</div>
</Form>
)
}
)
</div>
</form>
</div>
</Form>
)
}

GithubProviderForm.displayName = 'GithubProviderForm'
export function useRepositoryProviderForm(
defaultValues?: Partial<RepositoryProviderFormValues>
) {
return useForm<z.infer<typeof repositoryProviderFormSchema>>({
resolver: zodResolver(repositoryProviderFormSchema),
defaultValues
})
}

function ExternalLink({
href,
Expand Down
Loading

0 comments on commit 5b92d20

Please sign in to comment.