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

Author: AtofStryker

packages/reporter/src/attempts/attempts.tsx

@@ -1,6 +1,6 @@
 import cs from 'classnames'
 import { observer } from 'mobx-react'
-import React, { Component } from 'react'
+import React from 'react'
 
 import type { TestState } from '@packages/types'
 import Agents from '../agents/agents'
@@ -52,7 +52,7 @@ function renderAttemptContent (model: AttemptModel, studioActive: boolean) {
       <Sessions model={model.sessions} />
       <Agents model={model} />
       <Routes model={model} />
-      <div ref='commands' className='runnable-commands-region'>
+      <div className='runnable-commands-region'>
         {model.hasCommands ? <Hooks model={model} /> : <NoCommands />}
       </div>
       {model.state === 'failed' && (
@@ -71,37 +71,24 @@ interface AttemptProps {
   studioActive: boolean
 }
 
-@observer
-class Attempt extends Component<AttemptProps> {
-  componentDidUpdate () {
-    this.props.scrollIntoView()
-  }
-
-  render () {
-    const { model, studioActive } = this.props
-
-    // HACK: causes component update when command log is added
-    model.commands.length
-
-    return (
-      <li
-        key={model.id}
-        className={cs('attempt-item', `attempt-state-${model.state}`)}
-        ref="container"
+const Attempt: React.FC<AttemptProps> = observer(({ model, scrollIntoView, studioActive }) => {
+  return (
+    <li
+      key={model.id}
+      className={cs('attempt-item', `attempt-state-${model.state}`)}
+    >
+      <Collapsible
+        header={<AttemptHeader index={model.id} state={model.state} />}
+        hideExpander
+        headerClass='attempt-name'
+        contentClass='attempt-content'
+        isOpen={model.isOpen}
       >
-        <Collapsible
-          header={<AttemptHeader index={model.id} state={model.state} />}
-          hideExpander
-          headerClass='attempt-name'
-          contentClass='attempt-content'
-          isOpen={model.isOpen}
-        >
-          {renderAttemptContent(model, studioActive)}
-        </Collapsible>
-      </li>
-    )
-  }
-}
+        {renderAttemptContent(model, studioActive)}
+      </Collapsible>
+    </li>
+  )
+})
 
 const Attempts = observer(({ test, scrollIntoView, studioActive }: {test: TestModel, scrollIntoView: Function, studioActive: boolean}) => {
   return (<ul className={cs('attempts', {

packages/reporter/src/collapsible/collapsible.tsx

@@ -1,92 +1,65 @@
 import cs from 'classnames'
-import React, { Component, CSSProperties, MouseEvent, ReactNode, RefObject } from 'react'
+import React, { CSSProperties, MouseEvent, ReactNode, RefObject, useState } from 'react'
 
 import { onEnterOrSpace } from '../lib/util'
 
 import ChevronIcon from '@packages/frontend-shared/src/assets/icons/chevron-down-small_x8.svg'
 
-interface Props {
+interface CollapsibleProps {
   isOpen?: boolean
   headerClass?: string
   headerStyle?: CSSProperties
   header?: ReactNode
   headerExtras?: ReactNode
   containerRef?: RefObject<HTMLDivElement>
   contentClass?: string
-  hideExpander: boolean
+  hideExpander?: boolean
+  children: React.ReactNode
 }
 
-interface State {
-  isOpen: boolean
-}
-
-class Collapsible extends Component<Props, State> {
-  static defaultProps = {
-    isOpen: false,
-    headerClass: '',
-    headerStyle: {},
-    contentClass: '',
-    hideExpander: false,
-  }
-
-  constructor (props: Props) {
-    super(props)
+const Collapsible: React.FC<CollapsibleProps> = ({ isOpen: isOpenAsProp = false, header, headerClass = '', headerStyle = {}, headerExtras, contentClass = '', hideExpander = false, containerRef = null, toggleOpen = () => undefined, children }) => {
+  const [isOpen, setIsOpen] = useState(isOpenAsProp)
 
-    this.state = { isOpen: props.isOpen || false }
+  const _onClick = (e: MouseEvent) => {
+    e.stopPropagation()
+    setIsOpen(!isOpen)
   }
 
-  componentDidUpdate (prevProps: Props) {
-    if (this.props.isOpen != null && this.props.isOpen !== prevProps.isOpen) {
-      this.setState({ isOpen: this.props.isOpen })
-    }
+  const _onKeyPress = () => {
+    setIsOpen(!isOpen)
   }
 
-  render () {
-    return (
-      <div className={cs('collapsible', { 'is-open': this.state.isOpen })} ref={this.props.containerRef}>
-        <div className={cs('collapsible-header-wrapper', this.props.headerClass)}>
+  return (
+    <div className={cs('collapsible', { 'is-open': isOpen })} ref={containerRef}>
+      <div className={cs('collapsible-header-wrapper', headerClass)}>
+        <div
+          aria-expanded={isOpen}
+          className='collapsible-header'
+          onClick={_onClick}
+          onKeyUp={onEnterOrSpace(_onKeyPress)}
+          role='button'
+          tabIndex={0}
+        >
           <div
-            aria-expanded={this.state.isOpen}
-            className='collapsible-header'
-            onClick={this._onClick}
-            onKeyPress={onEnterOrSpace(this._onKeyPress)}
-            role='button'
-            tabIndex={0}
+            className='collapsible-header-inner'
+            style={headerStyle}
+            tabIndex={-1}
           >
-            <div
-              className='collapsible-header-inner'
-              style={this.props.headerStyle}
-              tabIndex={-1}
-            >
-              {!this.props.hideExpander && <ChevronIcon className='collapsible-indicator' />}
-              <span className='collapsible-header-text'>
-                {this.props.header}
-              </span>
-            </div>
+            {!hideExpander && <ChevronIcon className='collapsible-indicator' />}
+            <span className='collapsible-header-text'>
+              {header}
+            </span>
           </div>
-          {this.props.headerExtras}
         </div>
-        {this.state.isOpen && (
-          <div className={cs('collapsible-content', this.props.contentClass)}>
-            {this.props.children}
-          </div>
-        )}
+        {headerExtras}
       </div>
-    )
-  }
-
-  _toggleOpen = () => {
-    this.setState({ isOpen: !this.state.isOpen })
-  }
-
-  _onClick = (e: MouseEvent) => {
-    e.stopPropagation()
-    this._toggleOpen()
-  }
-
-  _onKeyPress = () => {
-    this._toggleOpen()
-  }
+      {isOpen && (
+        <div className={cs('collapsible-content', contentClass)}>
+          {children}
+        </div>
+      )}
+    </div>
+  )
 }
 
 export default Collapsible