feat(client): ts-migrate /client/src/.../Tool-Panel.js (#42646)

Co-authored-by: Parth Parth <thecodingaviator@users.noreply.github.com>

client/src/templates/Challenges/projects/backend/Show.tsx

@@ -30,7 +30,7 @@ import TestSuite from '../../components/Test-Suite';
 import Output from '../../components/output';
 import CompletionModal from '../../components/completion-modal';
 import HelpModal from '../../components/HelpModal';
-import ProjectToolPanel from '../Tool-Panel';
+import ProjectToolPanel from '../tool-panel';
 import SolutionForm from '../SolutionForm';
 import Spacer from '../../../../components/helpers/spacer';
 import {

client/src/templates/Challenges/projects/frontend/Show.tsx

@@ -29,7 +29,7 @@ import ChallengeTitle from '../../components/challenge-title';
 import ChallengeDescription from '../../components/Challenge-Description';
 import Spacer from '../../../../components/helpers/spacer';
 import SolutionForm from '../SolutionForm';
-import ProjectToolPanel from '../Tool-Panel';
+import ProjectToolPanel from '../tool-panel';
 import CompletionModal from '../../components/completion-modal';
 import HelpModal from '../../components/HelpModal';
 import Hotkeys from '../../components/Hotkeys';

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

@@ -1,6 +1,5 @@
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+import { bindActionCreators, Dispatch } from 'redux';
-import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import { Button } from '@freecodecamp/react-bootstrap';
 import { withTranslation } from 'react-i18next';
@@ -11,7 +10,7 @@ import './tool-panel.css';
 
 const mapStateToProps = () => ({});
 
-const mapDispatchToProps = dispatch =>
+const mapDispatchToProps = (dispatch: Dispatch) =>
   bindActionCreators(
     {
       openHelpModal: () => openModal('help')
@@ -19,14 +18,15 @@ const mapDispatchToProps = dispatch =>
     dispatch
   );
 
-const propTypes = {
+interface ToolPanelProps {
-  guideUrl: PropTypes.string,
+  guideUrl?: string;
-  openHelpModal: PropTypes.func.isRequired,
+  openHelpModal: () => void;
-  t: PropTypes.func.isRequired
+  t: (args: string) => void;
-};
+}
 
-export class ToolPanel extends Component {
+export class ToolPanel extends Component<ToolPanelProps> {
-  render() {
+  static displayName: string;
+  render(): JSX.Element {
     const { guideUrl, openHelpModal, t } = this.props;
     return (
       <div className='tool-panel-group project-tool-panel'>
@@ -55,7 +55,6 @@ export class ToolPanel extends Component {
 }
 
 ToolPanel.displayName = 'ProjectToolPanel';
-ToolPanel.propTypes = propTypes;
 
 export default connect(
   mapStateToProps,