ui: convert core class components to functional components

[jasonlmfong]

This change converts the following class components into their functional style equivalent:

• sortedtable
• outsideEventHandler
• columnsSelector
• dropdown
• queryFilter
• search

The conversion was done by iteratively using a claude skill with no additional human
intervention needed.
Existing Enzyme + Chai tests were converted into pure react-testing-library tests.
Additional tests were also created by claude for the following components:

• columnsSelector
• dropdown
• search

The following pages import the modified components and were manually verified:

• sql-activity
• insights
• databases
• jobs
• schedules
• statement details
• events

Epic: CRDB-58145
Release Note: None

[blathers-crl]

Your pull request contains more than 1000 changes. It is strongly encouraged to split big PRs into smaller chunks.

_{🦉 Hoot! I am a Blathers, a bot for CockroachDB. My owner is dev-inf.}

[cockroach-teamcity]

This change is 

[dhartunian]

@dhartunian reviewed all commit messages and made 3 comments.
Reviewable status: complete! 0 of 0 LGTMs obtained (waiting on @jasonlmfong and @kyle-a-wong).

---

-- commits line 11 at r1:
This commit message needs a bit more context. You're converting class components to functional syntax.

Mention if any specific component had challenges or needed special treatment.
Mention what the test coverage situation is.

How did you verify that this was successful? Even if it's some screenshots of each of these in the existing app, that would be adequate.

---

pkg/ui/workspaces/cluster-ui/src/queryFilter/filter.tsx line 449 at r1 (raw file):

        placeholder="All"
        field="app"
        onChange={handleMultiSelectChange}

can you talk about why this onChange appears and is propagated everywhere?

---

pkg/ui/workspaces/cluster-ui/src/sortedtable/sortedtable.tsx line 187 at r1 (raw file):

};

export function SortedTable<T>({

SortedTable is a key component so making sure it doesn't break anything is important.

[jasonlmfong]

@jasonlmfong made 3 comments.
Reviewable status: complete! 0 of 0 LGTMs obtained (waiting on @dhartunian and @kyle-a-wong).

---

-- commits line 11 at r1:

Previously, dhartunian (David Hartunian) wrote…

This commit message needs a bit more context. You're converting class components to functional syntax.

Mention if any specific component had challenges or needed special treatment.
Mention what the test coverage situation is.

How did you verify that this was successful? Even if it's some screenshots of each of these in the existing app, that would be adequate.

ack, added more details,

---

pkg/ui/workspaces/cluster-ui/src/queryFilter/filter.tsx line 449 at r1 (raw file):

Previously, dhartunian (David Hartunian) wrote…

can you talk about why this onChange appears and is propagated everywhere?

we replaced the parent.setState({}) in the MultiSelectCheckbox, and now use the setFilters function to set the state

---

pkg/ui/workspaces/cluster-ui/src/sortedtable/sortedtable.tsx line 187 at r1 (raw file):

Previously, dhartunian (David Hartunian) wrote…

SortedTable is a key component so making sure it doesn't break anything is important.

I tested these with both manual navigations and locally running cypress tests, functionalities seem to be unaffected

[dhartunian]

tough to really get into the detail on each component here so we might need to do a bug bash later.

@dhartunian reviewed 5 files and all commit messages, made 1 comment, and resolved 2 discussions.
Reviewable status: complete! 1 of 0 LGTMs obtained (waiting on @kyle-a-wong).

[jasonlmfong]

TFTR!

[jasonlmfong]

/trunk merge

[trunk-io]

😎 Merged successfully - details.