feat: Moves search button into a slot (#644)

Signed-off-by: Farhaan Bukhsh <farhaan@opencraft.com>

package-lock.json

@@ -2432,9 +2432,9 @@
       }
     },
     "node_modules/@edx/frontend-platform": {
-      "version": "8.5.1",
-      "resolved": "https://registry.npmjs.org/@edx/frontend-platform/-/frontend-platform-8.5.1.tgz",
-      "integrity": "sha512-8u3EdO0o7xX4vqorjOx3k2wbs2bu3DXlIA3bnD+Y56vSB5QYw6k5GzYqo9pPaTMGeq9TuLRvPLE/QFFlc3xvPg==",
+      "version": "8.5.2",
+      "resolved": "https://registry.npmjs.org/@edx/frontend-platform/-/frontend-platform-8.5.2.tgz",
+      "integrity": "sha512-YlxNWs8NW/I7F03k/jH6grWIuY/GJrspq7fqWm5K0ocvNEf+B8XKcaLUof+jVUuCItK93SoVRDZewwejnjty5w==",
       "license": "AGPL-3.0",
       "peer": true,
       "dependencies": {
@@ -7267,9 +7267,9 @@
       }
     },
     "node_modules/@openedx/paragon": {
-      "version": "23.14.4",
-      "resolved": "https://registry.npmjs.org/@openedx/paragon/-/paragon-23.14.4.tgz",
-      "integrity": "sha512-iY0CX4THmtvmsrVwGYbxgo86PnJirgfYIS4LzqH2umxhBB5oGN41lOxs8EspUglraGb6LPs017hZBVlZFb0z8g==",
+      "version": "23.15.0",
+      "resolved": "https://registry.npmjs.org/@openedx/paragon/-/paragon-23.15.0.tgz",
+      "integrity": "sha512-wmsO0tOcLGLsinIHWi2PvGIQ0PGlfB8c789NTPCUiY1AGfkpboOEpZc+7f3m1imCdJ3OvBula5lYV9BpuQ0CSQ==",
       "license": "Apache-2.0",
       "peer": true,
       "workspaces": [
@@ -7282,7 +7282,7 @@
       "dependencies": {
         "@popperjs/core": "^2.11.4",
         "@tokens-studio/sd-transforms": "^1.2.4",
-        "axios": "^0.27.2",
+        "axios": "^0.30.2",
         "bootstrap": "^4.6.2",
         "chalk": "^4.1.2",
         "child_process": "^1.0.2",
@@ -7291,7 +7291,7 @@
         "cli-progress": "^3.12.0",
         "commander": "^9.4.1",
         "email-prop-type": "^3.0.0",
-        "file-selector": "^0.6.0",
+        "file-selector": "^0.10.0",
         "glob": "^8.0.3",
         "inquirer": "^8.2.5",
         "js-toml": "^1.0.0",
@@ -7316,11 +7316,11 @@
         "react-loading-skeleton": "^3.1.0",
         "react-popper": "^2.2.5",
         "react-proptype-conditional-require": "^1.0.4",
-        "react-responsive": "^8.2.0",
+        "react-responsive": "^10.0.0",
         "react-table": "^7.7.0",
         "react-transition-group": "^4.4.2",
         "sass": "^1.58.3",
-        "style-dictionary": "^4.3.2",
+        "style-dictionary": "^4.4.0",
         "tabbable": "^5.3.3",
         "uncontrollable": "^7.2.1",
         "uuid": "^9.0.0"
@@ -7424,13 +7424,14 @@
       }
     },
     "node_modules/@openedx/paragon/node_modules/axios": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-0.27.2.tgz",
-      "integrity": "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==",
+      "version": "0.30.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.30.2.tgz",
+      "integrity": "sha512-0pE4RQ4UQi1jKY6p7u6i1Tkzqmu+d+/tHS7Q7rKunWLB9WyilBTpHHpXzPNMDj5hTbK0B0PTLSz07yqMBiF6xg==",
       "license": "MIT",
       "dependencies": {
-        "follow-redirects": "^1.14.9",
-        "form-data": "^4.0.0"
+        "follow-redirects": "^1.15.4",
+        "form-data": "^4.0.4",
+        "proxy-from-env": "^1.1.0"
       }
     },
     "node_modules/@openedx/paragon/node_modules/brace-expansion": {
@@ -7471,6 +7472,15 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/@openedx/paragon/node_modules/matchmediaquery": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/matchmediaquery/-/matchmediaquery-0.4.2.tgz",
+      "integrity": "sha512-wrZpoT50ehYOudhDjt/YvUJc6eUzcdFPdmbizfgvswCKNHD1/OBOHYJpHie+HXpu6bSkEGieFMYk6VuutaiRfA==",
+      "license": "MIT",
+      "dependencies": {
+        "css-mediaquery": "^0.1.2"
+      }
+    },
     "node_modules/@openedx/paragon/node_modules/minimatch": {
       "version": "5.1.6",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz",
@@ -7511,6 +7521,30 @@
         "postcss": "^8.4"
       }
     },
+    "node_modules/@openedx/paragon/node_modules/react-responsive": {
+      "version": "10.0.1",
+      "resolved": "https://registry.npmjs.org/react-responsive/-/react-responsive-10.0.1.tgz",
+      "integrity": "sha512-OM5/cRvbtUWEX8le8RCT8scA8y2OPtb0Q/IViEyCEM5FBN8lRrkUOZnu87I88A6njxDldvxG+rLBxWiA7/UM9g==",
+      "license": "MIT",
+      "dependencies": {
+        "hyphenate-style-name": "^1.0.0",
+        "matchmediaquery": "^0.4.2",
+        "prop-types": "^15.6.1",
+        "shallow-equal": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@openedx/paragon/node_modules/shallow-equal": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/shallow-equal/-/shallow-equal-3.1.0.tgz",
+      "integrity": "sha512-pfVOw8QZIXpMbhBWvzBISicvToTiM5WBF1EeAUZDDSb5Dt29yl4AYbyywbJFSEsRUMr7gJaxqCdr4L3tQf9wVg==",
+      "license": "MIT"
+    },
     "node_modules/@paralleldrive/cuid2": {
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/@paralleldrive/cuid2/-/cuid2-2.2.2.tgz",
@@ -14930,12 +14964,12 @@
       }
     },
     "node_modules/file-selector": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/file-selector/-/file-selector-0.6.0.tgz",
-      "integrity": "sha512-QlZ5yJC0VxHxQQsQhXvBaC7VRJ2uaxTf+Tfpu4Z/OcVQJVpZO+DGU0rkoVW5ce2SccxugvpBJoMvUs59iILYdw==",
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/file-selector/-/file-selector-0.10.0.tgz",
+      "integrity": "sha512-iXLQxZTDe9qtBDkpaU4msOWNbh/4JxYSux7BsVxgt+0HBCpj9qPUFjD3SDBPLCJDoU3MsJh1i+CseQ/9488F/A==",
       "license": "MIT",
       "dependencies": {
-        "tslib": "^2.4.0"
+        "tslib": "^2.7.0"
       },
       "engines": {
         "node": ">= 12"
@@ -26885,9 +26919,9 @@
       }
     },
     "node_modules/ts-jest": {
-      "version": "29.4.4",
-      "resolved": "https://registry.npmjs.org/ts-jest/-/ts-jest-29.4.4.tgz",
-      "integrity": "sha512-ccVcRABct5ZELCT5U0+DZwkXMCcOCLi2doHRrKy1nK/s7J7bch6TzJMsrY09WxgUUIP/ITfmcDS8D2yl63rnXw==",
+      "version": "29.4.5",
+      "resolved": "https://registry.npmjs.org/ts-jest/-/ts-jest-29.4.5.tgz",
+      "integrity": "sha512-HO3GyiWn2qvTQA4kTgjDcXiMwYQt68a1Y8+JuLRVpdIzm+UOLSHgl/XqR4c6nzJkq5rOkjc02O2I7P7l/Yof0Q==",
       "dev": true,
       "license": "MIT",
       "peer": true,
@@ -26898,7 +26932,7 @@
         "json5": "^2.2.3",
         "lodash.memoize": "^4.1.2",
         "make-error": "^1.3.6",
-        "semver": "^7.7.2",
+        "semver": "^7.7.3",
         "type-fest": "^4.41.0",
         "yargs-parser": "^21.1.1"
       },
@@ -26939,9 +26973,9 @@
       }
     },
     "node_modules/ts-jest/node_modules/semver": {
-      "version": "7.7.2",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
-      "integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
+      "version": "7.7.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz",
+      "integrity": "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==",
       "dev": true,
       "license": "ISC",
       "bin": {

src/plugin-slots/README.md

@@ -24,3 +24,6 @@
 * [`org.openedx.frontend.layout.header_mobile_main_menu.v1`](./MobileMainMenuSlot/)
 * [`org.openedx.frontend.layout.header_mobile_user_menu.v1`](./MobileUserMenuSlot/)
 * [`org.openedx.frontend.layout.header_mobile_user_menu_trigger.v1`](./MobileUserMenuToggleSlot/)
+
+### Studio Header
+* [`org.openedx.frontend.layout.studio_header_search_button_slot.v1`](./StudioHeaderSearchButtonSlot/)

src/plugin-slots/StudioHeaderSearchButtonSlot/README.md

@@ -0,0 +1,89 @@
+# Studio Header Search Button Slot
+
+### Slot ID: `org.openedx.frontend.layout.studio_header_search_button_slot.v1`
+
+## Description
+
+This slot is used to replace/modify/hide the search button in the studio header.
+
+## Examples
+
+### Replace search with custom component
+
+The following `env.config.jsx` will replace the search button entirely (in this case with a custom emoji icon):
+
+![Search button being replaced](./images/studio_header_search_button_replace.png)
+
+```jsx
+import {
+  DIRECT_PLUGIN,
+  PLUGIN_OPERATIONS,
+} from "@openedx/frontend-plugin-framework";
+
+const config = {
+  pluginSlots: {
+    "org.openedx.frontend.layout.studio_header_search_button_slot.v1": {
+      keepDefault: false,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: "custom_notification_tray",
+            type: DIRECT_PLUGIN,
+            RenderWidget: () => <span>🔔</span>,
+          },
+        },
+      ],
+    },
+  },
+};
+
+export default config;
+```
+
+### Add custom component before and after search button
+
+The following `env.config.jsx` will insert emoji after and before the search button
+
+![Add custom component before and after search button](./images/studio_header_search_button_before_after.png)
+
+```jsx
+import {
+  DIRECT_PLUGIN,
+  PLUGIN_OPERATIONS,
+} from "@openedx/frontend-plugin-framework";
+
+const config = {
+  pluginSlots: {
+    "org.openedx.frontend.layout.studio_header_search_button_slot.v1": {
+      keepDefault: true,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            priority: 10,
+            id: 'custom_notification_tray_before',
+            type: DIRECT_PLUGIN,
+            RenderWidget: () => <span>🔔</span>,
+          },
+        },
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            priority: 90,
+            id: 'custom_notification_tray_after',
+            type: DIRECT_PLUGIN,
+            RenderWidget: () => <span>🔕</span>,
+          },
+        },
+      ],
+  },
+};
+
+export default config;
+```
+
+## API
+
+- **Slot ID:** `org.openedx.frontend.layout.studio_header_search_button_slot.v1`
+- **Component:** Uses the [PluginSlot](https://github.com/openedx/frontend-plugin-framework#pluginslot) from the Open edX Frontend Plugin Framework for plugin injection.

src/plugin-slots/StudioHeaderSearchButtonSlot/index.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+import { Nav, IconButton, Icon } from '@openedx/paragon';
+import { Search } from '@openedx/paragon/icons';
+import PropTypes from 'prop-types';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import messages from '../../studio-header/messages';
+
+const StudioHeaderSearchButtonSlot = ({ searchButtonAction }) => {
+  const intl = useIntl();
+  return (
+    <PluginSlot
+      id="org.openedx.frontend.layout.studio_header_search_button_slot.v1"
+    >
+      {searchButtonAction && (
+        <Nav>
+          <IconButton
+            src={Search}
+            iconAs={Icon}
+            onClick={searchButtonAction}
+            aria-label={intl.formatMessage(messages['header.label.search.nav'])}
+            alt={intl.formatMessage(messages['header.label.search.nav'])}
+          />
+        </Nav>
+      )}
+    </PluginSlot>
+  );
+};
+
+StudioHeaderSearchButtonSlot.propTypes = {
+  searchButtonAction: PropTypes.func,
+};
+
+export default StudioHeaderSearchButtonSlot;

src/studio-header/BrandNav.tsx

@@ -1,8 +1,13 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { type FunctionComponent } from 'react';
 import { Link } from 'react-router-dom';
 
-const BrandNav = ({
+interface Props {
+  studioBaseUrl: string;
+  logo: string;
+  logoAltText: string;
+}
+
+const BrandNav: FunctionComponent<Props> = ({
   studioBaseUrl,
   logo,
   logoAltText,
@@ -16,10 +21,4 @@ const BrandNav = ({
   </Link>
 );
 
-BrandNav.propTypes = {
-  studioBaseUrl: PropTypes.string.isRequired,
-  logo: PropTypes.string.isRequired,
-  logoAltText: PropTypes.string.isRequired,
-};
-
 export default BrandNav;

src/studio-header/CourseLockUp.tsx

@@ -1,5 +1,4 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { type FunctionComponent } from 'react';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import {
   OverlayTrigger,
@@ -9,14 +8,19 @@ import { Link } from 'react-router-dom';
 
 import messages from './messages';
 
-const CourseLockUp = (
-  {
-    outlineLink,
-    org,
-    number,
-    title,
-  },
-) => {
+interface Props {
+  outlineLink?: string;
+  org?: string;
+  number?: string;
+  title?: string;
+}
+
+const CourseLockUp: FunctionComponent<Props> = ({
+  outlineLink = '',
+  org = '',
+  number = '',
+  title = '',
+}) => {
   const intl = useIntl();
 
   return (
@@ -41,18 +45,4 @@ const CourseLockUp = (
   );
 };
 
-CourseLockUp.propTypes = {
-  number: PropTypes.string,
-  org: PropTypes.string,
-  title: PropTypes.string,
-  outlineLink: PropTypes.string,
-};
-
-CourseLockUp.defaultProps = {
-  number: null,
-  org: null,
-  title: null,
-  outlineLink: null,
-};
-
 export default CourseLockUp;

src/studio-header/HeaderBody.tsx

@@ -1,23 +1,45 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { useIntl } from '@edx/frontend-platform/i18n';
+import React, { type ReactNode, type ComponentProps } from 'react';
 import classNames from 'classnames';
 import {
   ActionRow,
   Button,
   Container,
-  Icon,
-  IconButton,
   Nav,
   Row,
 } from '@openedx/paragon';
-import { Close, MenuIcon, Search } from '@openedx/paragon/icons';
+import { Close, MenuIcon } from '@openedx/paragon/icons';
 
 import CourseLockUp from './CourseLockUp';
 import UserMenu from './UserMenu';
 import BrandNav from './BrandNav';
 import NavDropdownMenu from './NavDropdownMenu';
-import messages from './messages';
+import StudioHeaderSearchButtonSlot from '../plugin-slots/StudioHeaderSearchButtonSlot';
+
+export interface HeaderBodyProps {
+  studioBaseUrl: string;
+  logoutUrl: string;
+  setModalPopupTarget?: ((instance: HTMLButtonElement | null) => void) | null;
+  toggleModalPopup?: React.MouseEventHandler<HTMLButtonElement>;
+  isModalPopupOpen?: boolean;
+  number?: string;
+  org?: string;
+  title: string;
+  logo: string;
+  logoAltText: string;
+  authenticatedUserAvatar?: string;
+  username?: string;
+  isAdmin?: boolean;
+  isMobile?: boolean;
+  isHiddenMainMenu?: boolean;
+  mainMenuDropdowns?: {
+    id: string;
+    buttonTitle: ReactNode;
+    items: { title: ReactNode; href: string; }[];
+  }[];
+  outlineLink?: string;
+  searchButtonAction?: React.MouseEventHandler<HTMLButtonElement>;
+  containerProps?: Omit<ComponentProps<typeof Container>, 'children'>;
+}
 
 const HeaderBody = ({
   logo,
@@ -31,16 +53,15 @@ const HeaderBody = ({
   logoutUrl,
   authenticatedUserAvatar,
   isMobile,
-  setModalPopupTarget,
+  setModalPopupTarget = null,
   toggleModalPopup,
-  isModalPopupOpen,
-  isHiddenMainMenu,
-  mainMenuDropdowns,
+  isModalPopupOpen = false,
+  isHiddenMainMenu = false,
+  mainMenuDropdowns = [],
   outlineLink,
   searchButtonAction,
-  containerProps,
-}) => {
-  const intl = useIntl();
+  containerProps = {},
+}: HeaderBodyProps) => {
 
   const renderBrandNav = (
     <BrandNav
@@ -52,7 +73,7 @@ const HeaderBody = ({
     />
   );
 
-  const { className: containerClassName, ...restContainerProps } = containerProps || {};
+  const { className: containerClassName, ...restContainerProps } = containerProps;
 
   return (
     <Container
@@ -116,17 +137,9 @@ const HeaderBody = ({
           </>
         )}
         <ActionRow.Spacer />
-        {searchButtonAction && (
-          <Nav>
-            <IconButton
-              src={Search}
-              iconAs={Icon}
-              onClick={searchButtonAction}
-              aria-label={intl.formatMessage(messages['header.label.search.nav'])}
-              alt={intl.formatMessage(messages['header.label.search.nav'])}
-            />
-          </Nav>
-        )}
+        <StudioHeaderSearchButtonSlot
+          searchButtonAction={searchButtonAction}
+        />
         <Nav>
           <UserMenu
             {...{
@@ -144,53 +157,4 @@ const HeaderBody = ({
   );
 };
 
-HeaderBody.propTypes = {
-  studioBaseUrl: PropTypes.string.isRequired,
-  logoutUrl: PropTypes.string.isRequired,
-  setModalPopupTarget: PropTypes.func,
-  toggleModalPopup: PropTypes.func,
-  isModalPopupOpen: PropTypes.bool,
-  number: PropTypes.string,
-  org: PropTypes.string,
-  title: PropTypes.string,
-  logo: PropTypes.string,
-  logoAltText: PropTypes.string,
-  authenticatedUserAvatar: PropTypes.string,
-  username: PropTypes.string,
-  isAdmin: PropTypes.bool,
-  isMobile: PropTypes.bool,
-  isHiddenMainMenu: PropTypes.bool,
-  mainMenuDropdowns: PropTypes.arrayOf(PropTypes.shape({
-    id: PropTypes.string,
-    buttonTitle: PropTypes.node,
-    items: PropTypes.arrayOf(PropTypes.shape({
-      href: PropTypes.string,
-      title: PropTypes.node,
-    })),
-  })),
-  outlineLink: PropTypes.string,
-  searchButtonAction: PropTypes.func,
-  containerProps: PropTypes.shape(Container.propTypes),
-};
-
-HeaderBody.defaultProps = {
-  setModalPopupTarget: null,
-  toggleModalPopup: null,
-  isModalPopupOpen: false,
-  logo: null,
-  logoAltText: null,
-  number: '',
-  org: '',
-  title: '',
-  authenticatedUserAvatar: null,
-  username: null,
-  isAdmin: false,
-  isMobile: false,
-  isHiddenMainMenu: false,
-  mainMenuDropdowns: [],
-  outlineLink: null,
-  searchButtonAction: null,
-  containerProps: {},
-};
-
 export default HeaderBody;

src/studio-header/MobileHeader.tsx

@@ -1,19 +1,32 @@
-import React, { useState } from 'react';
-import PropTypes from 'prop-types';
+import React, { type FunctionComponent, useState } from 'react';
 import { useToggle, ModalPopup } from '@openedx/paragon';
-import HeaderBody from './HeaderBody';
+import HeaderBody, { type HeaderBodyProps } from './HeaderBody';
 import MobileMenu from './MobileMenu';
 
-const MobileHeader = ({
+type Props = Pick<HeaderBodyProps,
+| 'studioBaseUrl'
+| 'logoutUrl'
+| 'number'
+| 'org'
+| 'title'
+| 'logo'
+| 'logoAltText'
+| 'authenticatedUserAvatar'
+| 'username'
+| 'isAdmin'
+| 'mainMenuDropdowns'
+| 'outlineLink'
+>;
+
+const MobileHeader: FunctionComponent<Props> = ({
   mainMenuDropdowns,
   ...props
 }) => {
   const [isOpen, , close, toggle] = useToggle(false);
-  const [target, setTarget] = useState(null);
+  const [target, setTarget] = useState<HTMLButtonElement | null>(null);
 
   return (
     <>
-      {/* @ts-expect-error The type of 'props' is any until we convert from propTypes to TypeScript interface/types */}
       <HeaderBody
         {...props}
         isMobile
@@ -36,39 +49,4 @@ const MobileHeader = ({
   );
 };
 
-MobileHeader.propTypes = {
-  studioBaseUrl: PropTypes.string.isRequired, // eslint-disable-line react/no-unused-prop-types
-  logoutUrl: PropTypes.string.isRequired, // eslint-disable-line react/no-unused-prop-types
-  number: PropTypes.string, // eslint-disable-line react/no-unused-prop-types
-  org: PropTypes.string, // eslint-disable-line react/no-unused-prop-types
-  title: PropTypes.string, // eslint-disable-line react/no-unused-prop-types
-  logo: PropTypes.string, // eslint-disable-line react/no-unused-prop-types
-  logoAltText: PropTypes.string, // eslint-disable-line react/no-unused-prop-types
-  authenticatedUserAvatar: PropTypes.string, // eslint-disable-line react/no-unused-prop-types
-  username: PropTypes.string, // eslint-disable-line react/no-unused-prop-types
-  isAdmin: PropTypes.bool, // eslint-disable-line react/no-unused-prop-types
-  mainMenuDropdowns: PropTypes.arrayOf(PropTypes.shape({
-    id: PropTypes.string,
-    buttonTitle: PropTypes.node,
-    items: PropTypes.arrayOf(PropTypes.shape({
-      href: PropTypes.string,
-      title: PropTypes.node,
-    })),
-  })),
-  outlineLink: PropTypes.string, // eslint-disable-line react/no-unused-prop-types
-};
-
-MobileHeader.defaultProps = {
-  logo: null,
-  logoAltText: null,
-  number: null,
-  org: null,
-  title: null,
-  authenticatedUserAvatar: null,
-  username: null,
-  isAdmin: false,
-  mainMenuDropdowns: [],
-  outlineLink: null,
-};
-
 export default MobileHeader;

src/studio-header/NavDropdownMenu.tsx

@@ -1,16 +1,21 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { type ReactNode } from 'react';
 import {
   Dropdown,
   DropdownButton,
 } from '@openedx/paragon';
 import { Link } from 'react-router-dom';
 
+interface Props {
+  id: string;
+  buttonTitle: ReactNode;
+  items: { title: ReactNode; href: string; }[];
+}
+
 const NavDropdownMenu = ({
   id,
   buttonTitle,
   items,
-}) => (
+}: Props) => (
   <DropdownButton
     id={id}
     title={buttonTitle}
@@ -30,13 +35,4 @@ const NavDropdownMenu = ({
   </DropdownButton>
 );
 
-NavDropdownMenu.propTypes = {
-  id: PropTypes.string.isRequired,
-  buttonTitle: PropTypes.node.isRequired,
-  items: PropTypes.arrayOf(PropTypes.shape({
-    href: PropTypes.string.isRequired,
-    title: PropTypes.node.isRequired,
-  })).isRequired,
-};
-
 export default NavDropdownMenu;

src/studio-header/StudioHeader.test.tsx

@@ -71,12 +71,8 @@ const props: React.ComponentProps<typeof StudioHeader> = {
     },
   ],
   outlineLink: 'tEsTLInK',
-  searchButtonAction: null,
+  searchButtonAction: undefined,
   isNewHomePage: true,
-  // These default values shouldn't be needed but typescript is confused by propTypes; can remove after converting
-  // from propTypes to TypeScript:
-  containerProps: {},
-  isHiddenMainMenu: false,
 };
 
 describe('Header', () => {
@@ -146,7 +142,7 @@ describe('Header', () => {
     });
 
     it('should not show search button', async () => {
-      const testProps = { ...props, searchButtonAction: null };
+      const testProps = { ...props, searchButtonAction: undefined };
       const { queryByRole } = render(<RootWrapper {...testProps} />);
       expect(queryByRole('button', { name: 'Search content' })).not.toBeInTheDocument();
     });

src/studio-header/StudioHeader.tsx

@@ -1,11 +1,10 @@
-import React, { useContext } from 'react';
-import PropTypes from 'prop-types';
+import React, { type FunctionComponent, useContext } from 'react';
 import Responsive from 'react-responsive';
 import { AppContext } from '@edx/frontend-platform/react';
 import { ensureConfig } from '@edx/frontend-platform';
 
 import MobileHeader from './MobileHeader';
-import HeaderBody from './HeaderBody';
+import HeaderBody, { HeaderBodyProps } from './HeaderBody';
 
 ensureConfig([
   'STUDIO_BASE_URL',
@@ -15,9 +14,29 @@ ensureConfig([
   'LOGO_URL',
 ], 'Studio Header component');
 
-const StudioHeader = ({
-  number, org, title, containerProps, isHiddenMainMenu, mainMenuDropdowns,
-  outlineLink, searchButtonAction, isNewHomePage,
+type Props = Pick<HeaderBodyProps,
+| 'number'
+| 'org'
+| 'title'
+| 'containerProps'
+| 'isHiddenMainMenu'
+| 'mainMenuDropdowns'
+| 'outlineLink'
+| 'searchButtonAction'
+> & {
+  isNewHomePage: boolean;
+};
+
+const StudioHeader: FunctionComponent<Props> = ({
+  number,
+  org,
+  title,
+  containerProps,
+  isHiddenMainMenu,
+  mainMenuDropdowns,
+  outlineLink,
+  searchButtonAction,
+  isNewHomePage,
 }) => {
   // @ts-expect-error - frontend-platform doesn't yet have type information :/
   const { authenticatedUser, config } = useContext(AppContext);
@@ -52,33 +71,4 @@ const StudioHeader = ({
   );
 };
 
-StudioHeader.propTypes = {
-  number: PropTypes.string,
-  org: PropTypes.string,
-  title: PropTypes.string.isRequired,
-  containerProps: HeaderBody.propTypes.containerProps,
-  isHiddenMainMenu: PropTypes.bool,
-  mainMenuDropdowns: PropTypes.arrayOf(PropTypes.shape({
-    id: PropTypes.string,
-    buttonTitle: PropTypes.node,
-    items: PropTypes.arrayOf(PropTypes.shape({
-      href: PropTypes.string,
-      title: PropTypes.node,
-    })),
-  })),
-  outlineLink: PropTypes.string,
-  searchButtonAction: PropTypes.func,
-  isNewHomePage: PropTypes.bool.isRequired,
-};
-
-StudioHeader.defaultProps = {
-  number: '',
-  org: '',
-  containerProps: {},
-  isHiddenMainMenu: false,
-  mainMenuDropdowns: [],
-  outlineLink: null,
-  searchButtonAction: null,
-};
-
 export default StudioHeader;