refactor: migrate Header to ts and fix some types

src/header/Header.jsx → src/header/Header.tsx

@@ -1,6 +1,5 @@
-// @ts-check
+/* eslint-disable react/require-default-props */
 import React from 'react';
-import PropTypes from 'prop-types';
 import { getConfig } from '@edx/frontend-platform';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { StudioHeader } from '@edx/frontend-component-header';
@@ -10,14 +9,23 @@ import { SearchModal } from '../search-modal';
 import { getContentMenuItems, getSettingMenuItems, getToolsMenuItems } from './utils';
 import messages from './messages';
 
+interface HeaderProps {
+  contentId?: string,
+  number?: string,
+  org?: string,
+  title?: string,
+  isHiddenMainMenu?: boolean,
+  isLibrary?: boolean,
+}
+
 const Header = ({
-  contentId,
-  org,
-  number,
-  title,
-  isHiddenMainMenu,
-  isLibrary,
-}) => {
+  contentId = '',
+  org = '',
+  number = '',
+  title = '',
+  isHiddenMainMenu = false,
+  isLibrary = false,
+}: HeaderProps) => {
   const intl = useIntl();
 
   const [isShowSearchModalOpen, openSearchModal, closeSearchModal] = useToggle(false);
@@ -65,22 +73,4 @@ const Header = ({
   );
 };
 
-Header.propTypes = {
-  contentId: PropTypes.string,
-  number: PropTypes.string,
-  org: PropTypes.string,
-  title: PropTypes.string,
-  isHiddenMainMenu: PropTypes.bool,
-  isLibrary: PropTypes.bool,
-};
-
-Header.defaultProps = {
-  contentId: '',
-  number: '',
-  org: '',
-  title: '',
-  isHiddenMainMenu: false,
-  isLibrary: false,
-};
-
 export default Header;

src/search-modal/SearchModal.tsx

@@ -5,7 +5,8 @@ import { ModalDialog } from '@openedx/paragon';
 import messages from './messages';
 import SearchUI from './SearchUI';
 
-const SearchModal: React.FC<{ courseId: string, isOpen: boolean, onClose: () => void }> = ({ courseId, ...props }) => {
+// eslint-disable-next-line react/require-default-props
+const SearchModal: React.FC<{ courseId?: string, isOpen: boolean, onClose: () => void }> = ({ courseId, ...props }) => {
   const intl = useIntl();
   const title = intl.formatMessage(messages.title);
 

src/search-modal/SearchUI.tsx

@@ -18,7 +18,7 @@ import Stats from './Stats';
 import { SearchContextProvider } from './manager/SearchManager';
 import messages from './messages';
 
-const SearchUI: React.FC<{ courseId: string, closeSearchModal?: () => void }> = (props) => {
+const SearchUI: React.FC<{ courseId?: string, closeSearchModal?: () => void }> = (props) => {
   const hasCourseId = Boolean(props.courseId);
   const [searchThisCourseEnabled, setSearchThisCourse] = React.useState(hasCourseId);
   const switchToThisCourse = React.useCallback(() => setSearchThisCourse(true), []);