refactor(protocol-designer): remove usage of class components and connect fns

[jerader]

closes RAUT-935

Overview

This PR refactors out the usage of the majority of connect functions and all class components. The connect functions I left were because they use react-dnd

Test Plan

smoke test Pd! make sure things work as expected and that you don't run into any white screens or buttons that don't work.

Changelog

• removed all usages of class components
• removed many instances of connect functions
• fix some tests

Review requests

see test plan

Risk assessment

medium-ish, touches a lot of code but there is no release coming anytime soon

[codecov]

Codecov Report

Attention: 370 lines in your changes are missing coverage. Please review.

Comparison is base (6b725a2) 68.02% compared to head (1ab6f3a) 68.08%.
Report is 16 commits behind head on edge.

❗ Current head 1ab6f3a differs from pull request most recent head 2e0d3d4. Consider uploading reports for the commit 2e0d3d4 to get more accurate results

Additional details and impacted files

@@            Coverage Diff             @@
##             edge   #14331      +/-   ##
==========================================
+ Coverage   68.02%   68.08%   +0.05%     
==========================================
  Files        2505     2498       -7     
  Lines       71556    71540      -16     
  Branches     9082     9086       +4     
==========================================
+ Hits        48679    48710      +31     
+ Misses      20767    20713      -54     
- Partials     2110     2117       +7     

Flag	Coverage Δ
protocol-designer	35.29% <7.50%> (+0.40%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

Files	Coverage Δ
...rotocol-designer/src/components/ProtocolEditor.tsx	0.00% <ø> (ø)
...nents/StepEditForm/fields/WellOrderField/index.tsx	4.34% <ø> (ø)
protocol-designer/src/localization/index.ts	12.50% <ø> (+1.38%)	⬆️
...m/fields/WellSelectionField/WellSelectionModal.tsx	6.25% <0.00%> (ø)
...ponents/steplist/StartingDeckStateTerminalItem.tsx	0.00% <0.00%> (ø)
...col-designer/src/components/SettingsPage/index.tsx	0.00% <0.00%> (ø)
...mponents/DeckSetup/LabwareOverlays/LabwareName.tsx	0.00% <0.00%> (ø)
...col-designer/src/containers/ConnectedMainPanel.tsx	0.00% <0.00%> (ø)
.../FileUploadMessageModal/FileUploadMessageModal.tsx	0.00% <0.00%> (ø)
...tocol-designer/src/containers/ConnectedSidebar.tsx	0.00% <0.00%> (ø)
... and 24 more

[mjhuff]

Smoke test and a cursory pass through looks good. This was a lot of work, well done! 🚀

Just curious, why were some of these written as arrow functions?

[koji]

As Jamey pointed out

Suggested change

	export const LabwareOnDeck = (props: LabwareOnDeckProps): JSX.Element => {
	export function LabwareOnDeck = (props: LabwareOnDeckProps): JSX.Element {

I think we follow airbnb styling guidelines and I'm not sure about pd but in app we utilize hoisting to create a component inside component.
https://airbnb.io/javascript/react/
 

// bad
class Listing extends React.Component {
  render() {
    return <div>{this.props.hello}</div>;
  }
}

// bad (relying on function name inference is discouraged)
const Listing = ({ hello }) => (
  <div>{hello}</div>
);

// good
function Listing({ hello }) {
  return <div>{hello}</div>;
}

[jerader]

thank you for this Koji! Very helpful. I'll refactor.

[jerader]

Just curious, why were some of these written as arrow functions?

@mjhuff, ah good catch, i'm reading through Koji's comments. I'll refactor them! I'll admit that i wasn't really sure of the differences 😓 but it is a good idea to be consistent across PD and the app