| 1 | "use client"; |
| 2 | |
| 3 | import { Pencil } from |
| 4 | import { useRouter } |
| 5 | import { useAction } |
| 6 | import { type ReactNode, |
| 7 | import { toast } |
| 8 | |
| 9 | import { updateIssue } |
| 10 | import { updatePullRequest } |
| 11 | import { Button } |
| 12 | import { Input } |
| 13 | import { Spinner } |
| 14 | import { MarkdownEditor } |
| 15 | |
| 16 | /** Read view until Edit is clicked, then a single field editing the title or description of an issue or pull request. With a `header`, the field renders as a card and Edit sits in its top bar. */ |
| 17 | export function EditableField({ |
| 18 | username, |
| 19 | repo, |
| 20 | number, |
| 21 | noun, |
| 22 | field, |
| 23 | value, |
| 24 | canEdit, |
| 25 | header, |
| 26 | children, |
| 27 | }: { |
| 28 | username: string |
| 29 | repo: string |
| 30 | number: number |
| 31 | noun: "issue |
| 32 | field: "title |
| 33 | value: string |
| 34 | canEdit: boolean |
| 35 | header?: ReactNode |
| 36 | children: ReactNode |
| 37 | }) { |
| 38 | const router = |
| 39 | const [editing, |
| 40 | const [draft, |
| 41 | |
| 42 | const update = |
| 43 | onSuccess: () => |
| 44 | setEditing(false); |
| 45 | router.refresh(); |
| 46 | }, |
| 47 | onError: ({ error |
| 48 | toast.error( |
| 49 | error.validationErrors?.[field |
| 50 | error.serverError ?? |
| 51 | "Could not save this change.", |
| 52 | ), |
| 53 | }); |
| 54 | |
| 55 | const edit = |
| 56 | <Button |
| 57 | variant="ghost" |
| 58 | size="sm" |
| 59 | className="shrink-0" |
| 60 | onClick={() => |
| 61 | setDraft(value); |
| 62 | setEditing(true); |
| 63 | }} |
| 64 | > |
| 65 | <Pencil data-icon=" |
| 66 | Edit |
| 67 | </Button> |
| 68 | ); |
| 69 | |
| 70 | const content = |
| 71 | <form |
| 72 | className="flex flex-col gap-2" |
| 73 | onSubmit={(event) |
| 74 | event.preventDefault(); |
| 75 | update.execute( |
| 76 | field === "title" |
| 77 | ? { username, |
| 78 | : { username, |
| 79 | ); |
| 80 | }} |
| 81 | > |
| 82 | {field === "title |
| 83 | <Input |
| 84 | value={draft} |
| 85 | onChange={(event) |
| 86 | maxLength={200} |
| 87 | autoFocus |
| 88 | disabled={update.isExecuting |
| 89 | /> |
| 90 | ) : ( |
| 91 | <MarkdownEditor |
| 92 | value={draft} |
| 93 | onChange={setDraft} |
| 94 | repository={{ username |
| 95 | rows={6} |
| 96 | placeholder={`Describe this ${noun |
| 97 | autoFocus |
| 98 | disabled={update.isExecuting |
| 99 | /> |
| 100 | )} |
| 101 | |
| 102 | <div className="flex justify-end gap-2 |
| 103 | <Button |
| 104 | type="button" |
| 105 | variant="outline" |
| 106 | size="sm" |
| 107 | disabled={update.isExecuting |
| 108 | onClick={() => |
| 109 | > |
| 110 | Cancel |
| 111 | </Button> |
| 112 | <Button |
| 113 | type="submit" |
| 114 | size="sm" |
| 115 | disabled={update.isExecuting |
| 116 | > |
| 117 | {update.isExecuting && |
| 118 | Save |
| 119 | </Button> |
| 120 | </div> |
| 121 | </form> |
| 122 | ) : ( |
| 123 | children |
| 124 | ); |
| 125 | |
| 126 | if (header) { |
| 127 | return ( |
| 128 | <div className="rounded-lg border |
| 129 | <div className="flex min-h-11 items-center gap-1.5 border-b bg-muted/40 px-4 py-1.5 text-sm text-muted-foreground |
| 130 | {header} |
| 131 | {edit && <div |
| 132 | </div> |
| 133 | <div className="px-4 py-3 text-sm |
| 134 | </div> |
| 135 | ); |
| 136 | } |
| 137 | |
| 138 | if (!edit) |
| 139 | return ( |
| 140 | <div className="flex items-start gap-2 |
| 141 | <div className="min-w-0 flex-1 |
| 142 | {edit} |
| 143 | </div> |
| 144 | ); |
| 145 | } |