chore: migrated Menu component to tsx (#10426)

* migrated LanguagePicker.jsx to tsx

* Migrated Menu.jsx to tsx

* migrated MenuObject.jsx to tsx

* migrated NewMenu.jsx to tsx

* Migrated UserMenu.jsx to tsx

* removed unnecessary export from UserMenu

* added language definition in LanguagePicker

* removed unnecessary exports from Menu.tsx

* used typeof guard for childs

* changed LanguageProps to Languages

* removed unnecessary type casting

* fixed linting errors

superset-frontend/src/components/Menu/LanguagePicker.tsx

@@ -17,15 +17,25 @@
  * under the License.
  */
 import React from 'react';
-import PropTypes from 'prop-types';
 import { NavDropdown, MenuItem } from 'react-bootstrap';
 
-const propTypes = {
-  locale: PropTypes.string.isRequired,
-  languages: PropTypes.object.isRequired,
-};
+export interface Languages {
+  [key: string]: {
+    flag: string;
+    url: string;
+    name: string;
+  };
+}
 
-export default function LanguagePicker({ locale, languages }) {
+interface LanguagePickerProps {
+  locale: string;
+  languages: Languages;
+}
+
+export default function LanguagePicker({
+  locale,
+  languages,
+}: LanguagePickerProps) {
   return (
     <NavDropdown
       id="locale-dropdown"
@@ -49,5 +59,3 @@ export default function LanguagePicker({ locale, languages }) {
     </NavDropdown>
   );
 }
-
-LanguagePicker.propTypes = propTypes;

superset-frontend/src/components/Menu/Menu.tsx

@@ -17,41 +17,43 @@
  * under the License.
  */
 import React from 'react';
-import PropTypes from 'prop-types';
 import { t } from '@superset-ui/translation';
 import { Nav, Navbar, NavItem } from 'react-bootstrap';
 import styled from '@superset-ui/style';
-import MenuObject from './MenuObject';
+import MenuObject, { MenuObjectProps } from './MenuObject';
 import NewMenu from './NewMenu';
 import UserMenu from './UserMenu';
-import LanguagePicker from './LanguagePicker';
+import LanguagePicker, { Languages } from './LanguagePicker';
 import './Menu.less';
 
-const propTypes = {
-  data: PropTypes.shape({
-    menu: PropTypes.arrayOf(PropTypes.object).isRequired,
-    brand: PropTypes.shape({
-      path: PropTypes.string.isRequired,
-      icon: PropTypes.string.isRequired,
-      alt: PropTypes.string.isRequired,
-      width: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-        .isRequired,
-    }).isRequired,
-    navbar_right: PropTypes.shape({
-      bug_report_url: PropTypes.string,
-      version_string: PropTypes.string,
-      version_sha: PropTypes.string,
-      documentation_url: PropTypes.string,
-      languages: PropTypes.object,
-      show_language_picker: PropTypes.bool.isRequired,
-      user_is_anonymous: PropTypes.bool.isRequired,
-      user_info_url: PropTypes.string.isRequired,
-      user_login_url: PropTypes.string.isRequired,
-      user_logout_url: PropTypes.string.isRequired,
-      locale: PropTypes.string.isRequired,
-    }).isRequired,
-  }).isRequired,
-};
+interface BrandProps {
+  path: string;
+  icon: string;
+  alt: string;
+  width: string | number;
+}
+
+interface NavBarProps {
+  bug_report_url?: string;
+  version_string?: string;
+  version_sha?: string;
+  documentation_url?: string;
+  languages: Languages;
+  show_language_picker: boolean;
+  user_is_anonymous: boolean;
+  user_info_url: string;
+  user_login_url: string;
+  user_logout_url: string;
+  locale: string;
+}
+
+export interface MenuProps {
+  data: {
+    menu: MenuObjectProps[];
+    brand: BrandProps;
+    navbar_right: NavBarProps;
+  };
+}
 
 const StyledHeader = styled.header`
   .navbar-brand {
@@ -85,7 +87,7 @@ const StyledHeader = styled.header`
 
 export default function Menu({
   data: { menu, brand, navbar_right: navbarRight },
-}) {
+}: MenuProps) {
   return (
     <StyledHeader className="top" id="main-menu">
       <Navbar inverse fluid staticTop role="navigation">
@@ -149,5 +151,3 @@ export default function Menu({
     </StyledHeader>
   );
 }
-
-Menu.propTypes = propTypes;

superset-frontend/src/components/Menu/MenuObject.tsx

@@ -17,20 +17,30 @@
  * under the License.
  */
 import React from 'react';
-import PropTypes from 'prop-types';
 import { NavItem, NavDropdown, MenuItem } from 'react-bootstrap';
 
-const propTypes = {
-  label: PropTypes.string.isRequired,
-  icon: PropTypes.string.isRequired,
-  index: PropTypes.number.isRequired,
-  url: PropTypes.string,
-  childs: PropTypes.arrayOf(
-    PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-  ),
-};
+interface MenuObjectChildProps {
+  label: string;
+  icon: string;
+  index: number;
+  url?: string;
+}
 
-export default function MenuObject({ label, icon, childs, url, index }) {
+export interface MenuObjectProps {
+  label?: string;
+  icon?: string;
+  index: number;
+  url?: string;
+  childs?: (MenuObjectChildProps | string)[];
+}
+
+export default function MenuObject({
+  label,
+  icon,
+  childs,
+  url,
+  index,
+}: MenuObjectProps) {
   if (url) {
     return (
       <NavItem eventKey={index} href={url}>
@@ -51,22 +61,23 @@ export default function MenuObject({ label, icon, childs, url, index }) {
       eventKey={index}
       title={navTitle}
     >
-      {childs.map((child, index1) =>
-        child === '-' ? (
-          <MenuItem key={`$${index1}`} divider />
-        ) : (
-          <MenuItem
-            key={`${child.label}`}
-            href={child.url}
-            eventKey={parseFloat(`${index}.${index1}`)}
-          >
-            <i className={`fa ${child.icon}`} />
-            &nbsp; {child.label}
-          </MenuItem>
-        ),
-      )}
+      {childs?.map((child: MenuObjectChildProps | string, index1: number) => {
+        if (typeof child === 'string' && child === '-') {
+          return <MenuItem key={`$${index1}`} divider />;
+        } else if (typeof child !== 'string') {
+          return (
+            <MenuItem
+              key={`${child.label}`}
+              href={child.url}
+              eventKey={parseFloat(`${index}.${index1}`)}
+            >
+              <i className={`fa ${child.icon}`} />
+              &nbsp; {child.label}
+            </MenuItem>
+          );
+        }
+        return null;
+      })}
     </NavDropdown>
   );
 }
-
-MenuObject.propTypes = propTypes;

superset-frontend/src/components/Menu/NewMenu.tsx

@@ -19,8 +19,6 @@
 import React from 'react';
 import { t } from '@superset-ui/translation';
 
-const propTypes = {};
-
 const buttonStyle = {
   marginTop: '12px',
   marginRight: '30px',
@@ -60,5 +58,3 @@ export default function NewMenu() {
     </li>
   );
 }
-
-NewMenu.propTypes = propTypes;

superset-frontend/src/components/Menu/UserMenu.tsx

@@ -17,23 +17,22 @@
  * under the License.
  */
 import React from 'react';
-import PropTypes from 'prop-types';
 import { NavDropdown, MenuItem } from 'react-bootstrap';
 import { t } from '@superset-ui/translation';
 
-const propTypes = {
-  userInfoUrl: PropTypes.string.isRequired,
-  userLogoutUrl: PropTypes.string.isRequired,
-  versionString: PropTypes.string,
-  versionSha: PropTypes.string,
-};
+interface UserMenuProps {
+  userInfoUrl: string;
+  userLogoutUrl: string;
+  versionString?: string;
+  versionSha?: string;
+}
 
 export default function UserMenu({
   userInfoUrl,
   userLogoutUrl,
   versionString,
   versionSha,
-}) {
+}: UserMenuProps) {
   return (
     <NavDropdown
       id="user-menu-dropwn"
@@ -60,5 +59,3 @@ export default function UserMenu({
     </NavDropdown>
   );
 }
-
-UserMenu.propTypes = propTypes;