Move to functional components (Part IV)

[RichDom2185]

Description

Type of change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update
• Code quality improvements

How to test

Checklist

• I have tested this code
• I have updated the documentation

[coveralls]

Pull Request Test Coverage Report for Build 4380352133

Warning: This coverage report may be inaccurate.

This pull request's base commit is no longer the HEAD commit of its target branch. This means it includes changes from outside the original pull request, including, potentially, unrelated coverage changes.

• For more information on this, see Tracking coverage changes with pull request builds.
• To avoid this issue with future PRs, see these Recommended CI Configurations.
• For a quick fix, rebase this PR at GitHub. Your next report should be accurate.

Details

• 7 of 127 (5.51%) changed or added relevant lines in 9 files are covered.
• 5 unchanged lines in 2 files lost coverage.
• Overall coverage increased (+0.03%) to 34.625%

---

Changes Missing Coverage	Covered Lines	Changed/Added Lines	%
src/features/dataVisualizer/drawable/ArrowDrawable.tsx	1	2	50.0%
src/commons/sourceRecorder/SourceRecorderSelectCell.tsx	1	4	25.0%
src/features/dataVisualizer/drawable/BackwardArrowDrawable.tsx	1	6	16.67%
src/commons/sideContent/SideContentCanvasOutput.tsx	0	6	0.0%
src/commons/sideContent/SideContentToneMatrix.tsx	1	8	12.5%
src/commons/sourceRecorder/SourceRecorderShareCell.tsx	1	9	11.11%
src/commons/missionCreator/MissionCreator.tsx	0	19	0.0%
src/commons/editingOverviewCard/EditingOverviewCard.tsx	1	27	3.7%
src/commons/editingWorkspaceSideContent/EditingWorkspaceSideContentDeploymentTab.tsx	1	46	2.17%

Files with Coverage Reduction	New Missed Lines	%
src/commons/editingWorkspaceSideContent/EditingWorkspaceSideContentDeploymentTab.tsx	2	9.71%
src/commons/missionCreator/MissionCreator.tsx	3	0.0%

Totals
Change from base Build 4340722176:	0.03%
Covered Lines:	4634
Relevant Lines:	12458

---

💛 - Coveralls

[RichDom2185]

The only things I'm concerned about are the following:

- class SideContentToneMatrix extends React.Component<{}, {}> {
-   private $container: HTMLElement | null = null;
+ const SideContentToneMatrix: React.FC = () => {
+   const containerRef = useRef<HTMLDivElement | null>(null);

- class SideContentCanvasOutput extends React.Component<SideContentCanvasOutputProps, {}> {
-   private $parent: HTMLElement | null = null;
+ const SideContentCanvasOutput: React.FC<SideContentCanvasOutputProps> = ({ canvas }) => {
+   const parentRef = useRef<HTMLDivElement>(null);

Not sure if I did them correctly. @shenyih0ng could you help check this? Thanks a lot!

[martin-henz]

Looks good!