chore: fix deprecation warnings and refactor react reporter to use hooks

[AtofStryker]

• Closes N/A

Additional details

Since update @packages/reporter to React 18, there have been several console warnings about the deprecation of class components and other API methods being removed in new versions of React. This create additional noise when trying to develop. This PR cuts over the remaining class components to functional components to lessen the deprecation messages printed to the console.

Steps to test

This change should be passive, but we want to make sure all the updated components are still working correctly

How has the user experience changed?

PR Tasks

• Have tests been added/updated?
• Has a PR for user-facing changes been opened in cypress-documentation?
• Have API changes been updated in the type definitions?

[cypress]

cypress    Run #61049

Run Properties:   Failed #61049  •  d17dcf5810: fix reporter tests and run in CI

Project	cypress
Branch Review	chore/fix_react_18_deprecation_warnings
Run status	Failed #61049
Run duration	16m 23s
Commit	d17dcf5810: fix reporter tests and run in CI
Committer	AtofStryker
View all properties for this run ↗︎

---

Test results
Failures	5
Flaky	8
Pending	144
Skipped	0
Passing	6614
View all changes introduced in this branch ↗︎

UI Coverage  0%
Untested elements	4
Tested elements	0

Accessibility  97.09%
Failed rules	0 critical   1 serious   0 moderate   0 minor
Failed elements	6

---

Tests for review

  runnables.cy.ts • 1 failed test • reporter

View Output

Test		Artifacts
runnables > runnable-header (unified) > adds a scroll listener in open mode		Test Replay Screenshots

  runner/sessions.ui.cy.ts • 1 failed test • app-e2e

View Output

Test		Artifacts
runner/cypress sessions.open_mode.spec > persists global session and does not persists spec session when selecting a different spec		Test Replay Screenshots

  settings.cy.ts • 1 failed test • app-e2e

View Output

Test		Artifacts
App: Settings > Cloud Settings > shows deferred remote cloud data after navigating from a run		Test Replay Screenshots

  cypress-in-cypress-e2e.cy.ts • 1 failed test • app-e2e

View Output

Test		Artifacts
Cypress In Cypress E2E > stops correctly running spec while switching specs		Test Replay Screenshots

  cypress-origin-communicator.cy.ts • 1 failed test • app-e2e

View Output

Test		Artifacts
Cypress In Cypress Origin Communicator > cy.origin passivity with app interactions > passes upon test reload mid test execution		Test Replay Screenshots

  e2e/origin/cookie_login.cy.ts • 1 flaky test • 5x-driver-firefox

View Output

Test		Artifacts
cy.origin - cookie login > Max-Age > past max-age -> not logged in		</td> </tr></table>   commands/net_stubbing.cy.ts • 1 flaky test • 5x-driver-firefox View Output Test Artifacts ... > stops waiting when an xhr request is canceled </td> </tr></table>   issues/28527.cy.ts • 1 flaky test • 5x-driver-firefox View Output Test Artifacts issue 28527 > fails and then retries and verifies about:blank is not displayed Screenshots   studio/studio.cy.ts • 2 flaky tests • app-e2e View Output Test Artifacts Cypress Studio > does not create a new test if the Save test modal is closed Test Replay Screenshots Cypress Studio > does not remove the studio url parameters if saving fails Test Replay Screenshots   create-from-component.cy.ts • 1 flaky test • app-e2e View Output Test Artifacts ... > runs generated spec Test Replay Screenshots The first 5 flaky specs are shown, see all 7 specs in Cypress Cloud.

[AtofStryker]

some issues on the reporter lifecycle events that need to be figured out which is the hold up on this PR