Skip to content

Commit

Permalink
Remove permissions form field in ecosystem partners page + UI adjusments
Browse files Browse the repository at this point in the history
  • Loading branch information
@MananTank
MananTank committed Sep 21, 2024
1 parent bc72883 commit c920627
Show file tree
Hide file tree
Showing 10 changed files with 125 additions and 211 deletions.
41 changes: 41 additions & 0 deletions .../dashboard/connect/ecosystem/[slug]/(active)/components/client/AddPartnerDialogButton.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
"use client";

import { Button } from "@/components/ui/button";
import {
Dialog,
DialogContent,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog";
import { PlusIcon } from "lucide-react";
import { useState } from "react";
import type { Ecosystem } from "../../../../types";
import { AddPartnerForm } from "./add-partner-form.client";

export function AddPartnerDialogButton(props: {
ecosystem: Ecosystem;
}) {
const [open, setOpen] = useState(false);
return (
<Dialog open={open} onOpenChange={setOpen}>
<DialogTrigger asChild>
<Button className="gap-2 max-sm:w-full">
<PlusIcon className="size-4" />
Add Partner
</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader className="mb-2">
<DialogTitle className="text-2xl font-semibold tracking-tight">
Add Partner
</DialogTitle>
</DialogHeader>
<AddPartnerForm
ecosystem={props.ecosystem}
onPartnerAdded={() => setOpen(false)}
/>
</DialogContent>
</Dialog>
);
}
120 changes: 30 additions & 90 deletions ...dashboard/connect/ecosystem/[slug]/(active)/components/client/add-partner-form.client.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,16 @@
"use client";
import { Spinner } from "@/components/ui/Spinner/Spinner";
import { Button } from "@/components/ui/button";
import {
Form,
FormControl,
FormDescription,
FormField,
FormItem,
FormLabel,
FormMessage,
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import { ToolTipLabel } from "@/components/ui/tooltip";
import { cn } from "@/lib/utils";
import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
Expand All @@ -26,14 +20,17 @@ import type { Ecosystem } from "../../../../types";
import { partnerFormSchema } from "../../constants";
import { useAddPartner } from "../../hooks/use-add-partner";

export function AddPartnerForm({ ecosystem }: { ecosystem: Ecosystem }) {
export function AddPartnerForm({
ecosystem,
onPartnerAdded,
}: { ecosystem: Ecosystem; onPartnerAdded: () => void }) {
const form = useForm<z.input<typeof partnerFormSchema>>({
resolver: zodResolver(partnerFormSchema),
});

const { mutateAsync: addPartner, isPending } = useAddPartner({
onSuccess: () => {
form.reset();
onPartnerAdded();
},
onError: (error) => {
const message =
Expand All @@ -57,18 +54,18 @@ export function AddPartnerForm({ ecosystem }: { ecosystem: Ecosystem }) {
allowlistedBundleIds: values.bundleIds
.split(/,| /)
.filter((d) => d.length > 0),
permissions: [values.permissions],
});
})}
className="flex flex-col gap-2 lg:flex-row"
className="flex flex-col gap-6"
>
<div className="grid gap-2 lg:grid-cols-12 grow">
<div className="flex flex-col gap-4">
<FormField
control={form.control}
name="name"
defaultValue="" // Note: you *must* provide a default value here or the field won't reset
render={({ field }) => (
<FormItem className="col-span-4 lg:col-span-3">
<FormItem>
<FormLabel> App Name </FormLabel>
<FormControl>
<Input
placeholder="App name"
Expand All @@ -94,22 +91,16 @@ export function AddPartnerForm({ ecosystem }: { ecosystem: Ecosystem }) {
name="domains"
defaultValue="" // Note: you *must* provide a default value here or the field won't reset
render={({ field }) => (
<FormItem className="col-span-4 lg:col-span-4">
<FormItem>
<FormLabel> Domains </FormLabel>
<FormControl>
<>
<Input placeholder="Domains" className="peer" {...field} />
<FormDescription
className={cn(
"hidden text-xs transition-all lg:block lg:-translate-y-4 lg:opacity-0 peer-focus-visible:opacity-100 peer-focus-visible:translate-y-0",
form.formState.errors.domains?.message &&
"text-destructive lg:translate-y-0 lg:opacity-100 block", // If there are errors show them rather than the tip
)}
>
{form.formState.errors.domains?.message ??
"Space or comma-separated list of regex domains (e.g. *.example.com)"}
</FormDescription>
</>
<Input placeholder="Domains" className="peer" {...field} />
</FormControl>

<FormDescription>
Space or comma-separated list of regex domains (e.g.
*.example.com)
</FormDescription>
</FormItem>
)}
/>
Expand All @@ -118,75 +109,24 @@ export function AddPartnerForm({ ecosystem }: { ecosystem: Ecosystem }) {
name="bundleIds"
defaultValue="" // Note: you *must* provide a default value here or the field won't reset
render={({ field }) => (
<FormItem className="col-span-4 lg:col-span-3">
<FormItem>
<FormLabel> Bundle ID </FormLabel>
<FormControl>
<>
<Input
placeholder="Bundle ID"
className="peer"
{...field}
/>
<FormDescription
className={cn(
"hidden text-xs transition-all lg:block lg:-translate-y-4 lg:opacity-0 peer-focus-visible:opacity-100 peer-focus-visible:translate-y-0",
form.formState.errors.bundleIds?.message &&
"text-destructive translate-y-0 opacity-100 block",
)}
>
{form.formState.errors.bundleIds?.message ??
"Space or comma-separated list of bundle IDs"}
</FormDescription>
</>
<Input placeholder="Bundle ID" className="peer" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="permissions"
defaultValue="PROMPT_USER_V1" // Note: you *must* provide a default value here or the field won't reset
render={({ field }) => (
<FormItem className="col-span-4 lg:col-span-2">
<Select
onValueChange={field.onChange}
defaultValue={field.value}
>
<ToolTipLabel label="Should wallet actions prompt the user for approval?">
<FormControl>
<SelectTrigger className="w-full">
<SelectValue placeholder="Wallet prompts" />
</SelectTrigger>
</FormControl>
</ToolTipLabel>
<SelectContent>
<SelectItem value="FULL_CONTROL_V1">
Never prompt
</SelectItem>
<SelectItem value="PROMPT_USER_V1">Prompt user</SelectItem>
</SelectContent>

<FormDescription
className={cn(
"hidden text-xs transition-all lg:block lg:-translate-y-4 lg:opacity-0 peer-focus-visible:opacity-100 peer-focus-visible:translate-y-0",
form.formState.errors.permissions?.message &&
"text-destructive lg:translate-y-0 lg:opacity-100 block", // If there are errors show them rather than the tip
)}
>
{form.formState.errors.permissions?.message ??
"Wallet signing"}
</FormDescription>
</Select>
<FormDescription>
Space or comma-separated list of bundle IDs
</FormDescription>

<FormMessage />
</FormItem>
)}
/>
</div>
<Button
disabled={isPending}
type="submit"
variant="outline"
className="w-full lg:w-auto"
>

<Button disabled={isPending} type="submit" className="w-full gap-2">
{isPending && <Spinner className="size-4" />}
Add
</Button>
</form>
Expand Down
Loading

0 comments on commit c920627

Please sign in to comment.