chore(client): migrate Tool-Panel component to ts (#43790)

* chore: rename Tool-Panel.js to tool-panel.tsx

* feat: migrate tool-panel to ts

* chore: remove unused ts-expect-error

* chore: improve videoUrl and guideUrl types

* chore: update executeChallenge prop type

client/src/templates/Challenges/classic/MobileLayout.js

@@ -7,7 +7,7 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import { createStructuredSelector } from 'reselect';
 import envData from '../../../../../config/env.json';
-import ToolPanel from '../components/Tool-Panel';
+import ToolPanel from '../components/tool-panel';
 import { currentTabSelector, moveToTab } from '../redux';
 import EditorTabs from './EditorTabs';
 

client/src/templates/Challenges/components/side-panel.tsx

@@ -5,7 +5,7 @@ import { createSelector } from 'reselect';
 import { mathJaxScriptLoader } from '../../../utils/script-loaders';
 import { challengeTestsSelector } from '../redux';
 import TestSuite from './Test-Suite';
-import ToolPanel from './Tool-Panel';
+import ToolPanel from './tool-panel';
 
 import './side-panel.css';
 
@@ -19,11 +19,11 @@ interface SidePanelProps {
   block: string;
   challengeDescription: ReactElement;
   challengeTitle: ReactElement;
-  guideUrl?: string;
+  guideUrl: string;
   instructionsPanelRef: React.RefObject<HTMLDivElement>;
   showToolPanel: boolean;
   tests?: Record<string, unknown>[];
-  videoUrl?: string;
+  videoUrl: string;
 }
 
 export function SidePanel({
@@ -74,7 +74,6 @@ export function SidePanel({
     >
       {challengeTitle}
       {challengeDescription}
-      {/* @ts-expect-error ToolPanel's redux props are being inferred here, but we don't need to provide them here */}
       {showToolPanel && <ToolPanel guideUrl={guideUrl} videoUrl={videoUrl} />}
       <TestSuite tests={tests} />
     </div>

client/src/templates/Challenges/components/tool-panel.tsx

@@ -3,17 +3,16 @@ import {
   DropdownButton,
   MenuItem
 } from '@freecodecamp/react-bootstrap';
-import PropTypes from 'prop-types';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { connect } from 'react-redux';
-import { bindActionCreators } from 'redux';
+import { bindActionCreators, Dispatch } from 'redux';
 
 import './tool-panel.css';
 import { openModal, executeChallenge } from '../redux';
 
 const mapStateToProps = () => ({});
-const mapDispatchToProps = dispatch =>
+const mapDispatchToProps = (dispatch: Dispatch) =>
   bindActionCreators(
     {
       executeChallenge,
@@ -24,15 +23,15 @@ const mapDispatchToProps = dispatch =>
     dispatch
   );
 
-const propTypes = {
+interface ToolPanelProps {
-  executeChallenge: PropTypes.func.isRequired,
+  executeChallenge: (options?: { showCompletionModal: boolean }) => void;
-  guideUrl: PropTypes.string,
+  isMobile?: boolean;
-  isMobile: PropTypes.bool,
+  openHelpModal: () => void;
-  openHelpModal: PropTypes.func.isRequired,
+  openVideoModal: () => void;
-  openResetModal: PropTypes.func.isRequired,
+  openResetModal: () => void;
-  openVideoModal: PropTypes.func.isRequired,
+  guideUrl: string;
-  videoUrl: PropTypes.string
+  videoUrl: string;
-};
+}
 
 function ToolPanel({
   executeChallenge,
@@ -42,7 +41,7 @@ function ToolPanel({
   openResetModal,
   guideUrl,
   videoUrl
-}) {
+}: ToolPanelProps) {
   const handleRunTests = () => {
     executeChallenge({ showCompletionModal: true });
   };
@@ -108,6 +107,5 @@ function ToolPanel({
 }
 
 ToolPanel.displayName = 'ToolPanel';
-ToolPanel.propTypes = propTypes;
 
 export default connect(mapStateToProps, mapDispatchToProps)(ToolPanel);