| b69ab31 | | | 1 | /** |
| b69ab31 | | | 2 | * Copyright (c) Meta Platforms, Inc. and affiliates. |
| b69ab31 | | | 3 | * |
| b69ab31 | | | 4 | * This source code is licensed under the MIT license found in the |
| b69ab31 | | | 5 | * LICENSE file in the root directory of this source tree. |
| b69ab31 | | | 6 | */ |
| b69ab31 | | | 7 | |
| b69ab31 | | | 8 | import type {ReactNode, RefObject} from 'react'; |
| b69ab31 | | | 9 | |
| b69ab31 | | | 10 | import {TextArea} from 'isl-components/TextArea'; |
| b69ab31 | | | 11 | import {useEffect, useRef} from 'react'; |
| b69ab31 | | | 12 | import {InternalFieldName} from 'shared/constants'; |
| b69ab31 | | | 13 | import { |
| b69ab31 | | | 14 | FilePicker, |
| b69ab31 | | | 15 | ImageDropZone, |
| b69ab31 | | | 16 | PendingImageUploads, |
| b69ab31 | | | 17 | useUploadFilesCallback, |
| b69ab31 | | | 18 | } from '../ImageUpload'; |
| b69ab31 | | | 19 | import {Internal} from '../Internal'; |
| b69ab31 | | | 20 | import {MinHeightTextField} from './MinHeightTextField'; |
| b69ab31 | | | 21 | import {convertFieldNameToKey} from './utils'; |
| b69ab31 | | | 22 | |
| b69ab31 | | | 23 | function moveCursorToEnd(element: HTMLTextAreaElement) { |
| b69ab31 | | | 24 | element.setSelectionRange(element.value.length, element.value.length); |
| b69ab31 | | | 25 | } |
| b69ab31 | | | 26 | |
| b69ab31 | | | 27 | export function CommitInfoTextArea({ |
| b69ab31 | | | 28 | kind, |
| b69ab31 | | | 29 | name, |
| b69ab31 | | | 30 | autoFocus, |
| b69ab31 | | | 31 | editedMessage, |
| b69ab31 | | | 32 | setEditedField, |
| b69ab31 | | | 33 | }: { |
| b69ab31 | | | 34 | kind: 'title' | 'textarea' | 'field'; |
| b69ab31 | | | 35 | name: string; |
| b69ab31 | | | 36 | autoFocus: boolean; |
| b69ab31 | | | 37 | editedMessage: string; |
| b69ab31 | | | 38 | setEditedField: (fieldValue: string) => unknown; |
| b69ab31 | | | 39 | }) { |
| b69ab31 | | | 40 | const ref = useRef<HTMLTextAreaElement>(null); |
| b69ab31 | | | 41 | useEffect(() => { |
| b69ab31 | | | 42 | if (ref.current && autoFocus) { |
| b69ab31 | | | 43 | ref.current.focus(); |
| b69ab31 | | | 44 | moveCursorToEnd(ref.current); |
| b69ab31 | | | 45 | } |
| b69ab31 | | | 46 | }, [autoFocus, ref]); |
| b69ab31 | | | 47 | const Component = kind === 'field' || kind === 'title' ? MinHeightTextField : TextArea; |
| b69ab31 | | | 48 | const props = |
| b69ab31 | | | 49 | kind === 'field' || kind === 'title' |
| b69ab31 | | | 50 | ? {} |
| b69ab31 | | | 51 | : ({ |
| b69ab31 | | | 52 | rows: 15, |
| b69ab31 | | | 53 | resize: 'vertical', |
| b69ab31 | | | 54 | } as const); |
| b69ab31 | | | 55 | |
| b69ab31 | | | 56 | // The gh cli does not support uploading images for commit messages, |
| b69ab31 | | | 57 | // see https://github.com/cli/cli/issues/1895#issuecomment-718899617 |
| b69ab31 | | | 58 | // for now, this is internal-only. |
| b69ab31 | | | 59 | const supportsImageUpload = |
| b69ab31 | | | 60 | kind === 'textarea' && |
| b69ab31 | | | 61 | (Internal.supportsImageUpload === true || |
| b69ab31 | | | 62 | // image upload is always enabled in tests |
| b69ab31 | | | 63 | process.env.NODE_ENV === 'test'); |
| b69ab31 | | | 64 | |
| b69ab31 | | | 65 | const onInput = (event: {currentTarget: HTMLTextAreaElement}) => { |
| b69ab31 | | | 66 | setEditedField(event.currentTarget?.value); |
| b69ab31 | | | 67 | }; |
| b69ab31 | | | 68 | |
| b69ab31 | | | 69 | const uploadFiles = useUploadFilesCallback(name, ref, onInput); |
| b69ab31 | | | 70 | |
| b69ab31 | | | 71 | const fieldKey = convertFieldNameToKey(name); |
| b69ab31 | | | 72 | |
| b69ab31 | | | 73 | const rendered = ( |
| b69ab31 | | | 74 | <div className="commit-info-field"> |
| b69ab31 | | | 75 | <Component |
| b69ab31 | | | 76 | ref={ref} |
| b69ab31 | | | 77 | {...props} |
| b69ab31 | | | 78 | onPaste={ |
| b69ab31 | | | 79 | !supportsImageUpload |
| b69ab31 | | | 80 | ? undefined |
| b69ab31 | | | 81 | : (event: React.ClipboardEvent<HTMLTextAreaElement>) => { |
| b69ab31 | | | 82 | if (event.clipboardData != null && event.clipboardData.files.length > 0) { |
| b69ab31 | | | 83 | uploadFiles([...event.clipboardData.files]); |
| b69ab31 | | | 84 | event.preventDefault(); |
| b69ab31 | | | 85 | } |
| b69ab31 | | | 86 | } |
| b69ab31 | | | 87 | } |
| b69ab31 | | | 88 | value={editedMessage} |
| b69ab31 | | | 89 | data-testid={`commit-info-${fieldKey}-field`} |
| b69ab31 | | | 90 | onInput={onInput} |
| b69ab31 | | | 91 | /> |
| b69ab31 | | | 92 | <EditorToolbar |
| b69ab31 | | | 93 | fieldName={name} |
| b69ab31 | | | 94 | uploadFiles={supportsImageUpload ? uploadFiles : undefined} |
| b69ab31 | | | 95 | textAreaRef={ref} |
| b69ab31 | | | 96 | /> |
| b69ab31 | | | 97 | </div> |
| b69ab31 | | | 98 | ); |
| b69ab31 | | | 99 | return !supportsImageUpload ? ( |
| b69ab31 | | | 100 | rendered |
| b69ab31 | | | 101 | ) : ( |
| b69ab31 | | | 102 | <ImageDropZone onDrop={uploadFiles}>{rendered}</ImageDropZone> |
| b69ab31 | | | 103 | ); |
| b69ab31 | | | 104 | } |
| b69ab31 | | | 105 | |
| b69ab31 | | | 106 | /** |
| b69ab31 | | | 107 | * Floating button list at the bottom corner of the text area |
| b69ab31 | | | 108 | */ |
| b69ab31 | | | 109 | export function EditorToolbar({ |
| b69ab31 | | | 110 | fieldName, |
| b69ab31 | | | 111 | textAreaRef, |
| b69ab31 | | | 112 | uploadFiles, |
| b69ab31 | | | 113 | }: { |
| b69ab31 | | | 114 | fieldName: string; |
| b69ab31 | | | 115 | uploadFiles?: (files: Array<File>) => unknown; |
| b69ab31 | | | 116 | textAreaRef: RefObject<HTMLTextAreaElement>; |
| b69ab31 | | | 117 | }) { |
| b69ab31 | | | 118 | const parts: Array<ReactNode> = []; |
| b69ab31 | | | 119 | if (uploadFiles != null) { |
| b69ab31 | | | 120 | parts.push( |
| b69ab31 | | | 121 | <PendingImageUploads fieldName={fieldName} key="pending-uploads" textAreaRef={textAreaRef} />, |
| b69ab31 | | | 122 | ); |
| b69ab31 | | | 123 | } |
| b69ab31 | | | 124 | if (fieldName === InternalFieldName.TestPlan && Internal.RecommendTestPlanButton) { |
| b69ab31 | | | 125 | parts.push(<Internal.RecommendTestPlanButton key="recommend-test-plan" />); |
| b69ab31 | | | 126 | } |
| b69ab31 | | | 127 | if (fieldName === InternalFieldName.Summary && Internal.GenerateSummaryButton) { |
| b69ab31 | | | 128 | parts.push(<Internal.GenerateSummaryButton key="generate-summary" />); |
| b69ab31 | | | 129 | } |
| b69ab31 | | | 130 | if (uploadFiles != null) { |
| b69ab31 | | | 131 | parts.push(<FilePicker key="picker" uploadFiles={uploadFiles} />); |
| b69ab31 | | | 132 | } |
| b69ab31 | | | 133 | if (parts.length === 0) { |
| b69ab31 | | | 134 | return null; |
| b69ab31 | | | 135 | } |
| b69ab31 | | | 136 | return <div className="text-area-toolbar">{parts}</div>; |
| b69ab31 | | | 137 | } |