refactor(content-sidebar): convert CommentForm to TypeScript

[devin-ai-integration]

Description

Convert CommentForm component from Flow to TypeScript

Changes

• Renamed CommentForm.js to CommentForm.js.flow (preserving Flow types)
• Created CommentForm.tsx with TypeScript types
• Properly removed original .js file
• Organized imports according to Box standards

Type Changes

• Converted Props type to CommentFormProps interface
• Changed State type to interface
• Made function types more specific with parameter types
• Kept external component types implicit

Testing

• All TypeScript compilation checks pass
• All lint checks pass
• All tests pass

Notes

• Following instructions, external component types are handled implicitly
• Only modified files within comment-form directory

Link to Devin run: https://app.devin.ai/sessions/03ef58bada764a90ac509de41d85a218
Requested by: [email protected]

[devin-ai-integration]

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

• Address comments on this PR. Add "(aside)" to your comment to have me ignore it.
• Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

• Disable automatic comment and CI monitoring

[devin-ai-integration]

Here are the line-by-line differences between CommentForm.tsx and CommentForm.js.flow:

1. File Header (Lines 1-4 in .js.flow, removed in .tsx):

   • Removed @flow and file description comment header

2. Import Organization (Lines 1-22 in .tsx):

   • Added line break after react-intl imports
   • Added line breaks between import groups
   • Moved IntlShape import next to react-intl imports

3. Type Definitions (Lines 24-45 in .tsx):

   • Renamed type Props to export interface CommentFormProps
   • Added specific function types:
     • createComment?: ({ text, hasMention }: { text: string; hasMention: boolean }) => void
     • getMentionWithQuery?: (query: string) => Promise<Array<User>>
     • onCancel: () => void
     • onFocus?: () => void
     • onSubmit?: () => void
     • updateComment?: ({ id, text, hasMention }: { id: string; text: string; hasMention: boolean }) => void
   • Changed mentionSelectorContacts?: SelectorItems<> to mentionSelectorContacts?: SelectorItems<User>

4. State Type (Lines 52-54 in .tsx):

   • Changed type State to interface State
   • Changed commentEditorState: any to commentEditorState: EditorState

5. Component Definition (Line 56 in .tsx):

   • Changed React.Component<Props, State> to React.Component<CommentFormProps, State>

6. Method Types (Lines 96, 114 in .tsx):

   • Changed nextEditorState: any to nextEditorState: EditorState
   • Changed render(): React.Node to render(): React.ReactNode

7. JSX Formatting:

   • Removed empty line before Media.Body (Line 142 in .tsx)
   • Removed empty line before CommentFormControls (Line 167 in .tsx)

All other code remains functionally identical between the two files. The changes focus on improving type safety and following TypeScript conventions while maintaining the same component behavior.