From 4b3d6d1fbdd7622439c3133bdc8d4f448593f773 Mon Sep 17 00:00:00 2001 From: Tanmay Laud <31733620+tanmaylaud@users.noreply.github.com> Date: Mon, 27 Jul 2020 21:33:24 +0530 Subject: [PATCH] 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 --- ...{LanguagePicker.jsx => LanguagePicker.tsx} | 24 ++++--- .../components/Menu/{Menu.jsx => Menu.tsx} | 62 +++++++++--------- .../Menu/{MenuObject.jsx => MenuObject.tsx} | 65 +++++++++++-------- .../Menu/{NewMenu.jsx => NewMenu.tsx} | 4 -- .../Menu/{UserMenu.jsx => UserMenu.tsx} | 17 ++--- 5 files changed, 92 insertions(+), 80 deletions(-) rename superset-frontend/src/components/Menu/{LanguagePicker.jsx => LanguagePicker.tsx} (84%) rename superset-frontend/src/components/Menu/{Menu.jsx => Menu.tsx} (77%) rename superset-frontend/src/components/Menu/{MenuObject.jsx => MenuObject.tsx} (57%) rename superset-frontend/src/components/Menu/{NewMenu.jsx => NewMenu.tsx} (97%) rename superset-frontend/src/components/Menu/{UserMenu.jsx => UserMenu.tsx} (86%) diff --git a/superset-frontend/src/components/Menu/LanguagePicker.jsx b/superset-frontend/src/components/Menu/LanguagePicker.tsx similarity index 84% rename from superset-frontend/src/components/Menu/LanguagePicker.jsx rename to superset-frontend/src/components/Menu/LanguagePicker.tsx index d2806c9f0..d634265c9 100644 --- a/superset-frontend/src/components/Menu/LanguagePicker.jsx +++ b/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 ( ); } - -LanguagePicker.propTypes = propTypes; diff --git a/superset-frontend/src/components/Menu/Menu.jsx b/superset-frontend/src/components/Menu/Menu.tsx similarity index 77% rename from superset-frontend/src/components/Menu/Menu.jsx rename to superset-frontend/src/components/Menu/Menu.tsx index 0902c8df9..193347f68 100644 --- a/superset-frontend/src/components/Menu/Menu.jsx +++ b/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 ( @@ -149,5 +151,3 @@ export default function Menu({ ); } - -Menu.propTypes = propTypes; diff --git a/superset-frontend/src/components/Menu/MenuObject.jsx b/superset-frontend/src/components/Menu/MenuObject.tsx similarity index 57% rename from superset-frontend/src/components/Menu/MenuObject.jsx rename to superset-frontend/src/components/Menu/MenuObject.tsx index ed30b9ab1..8de30edc8 100644 --- a/superset-frontend/src/components/Menu/MenuObject.jsx +++ b/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 ( @@ -51,22 +61,23 @@ export default function MenuObject({ label, icon, childs, url, index }) { eventKey={index} title={navTitle} > - {childs.map((child, index1) => - child === '-' ? ( - - ) : ( - - -   {child.label} - - ), - )} + {childs?.map((child: MenuObjectChildProps | string, index1: number) => { + if (typeof child === 'string' && child === '-') { + return ; + } else if (typeof child !== 'string') { + return ( + + +   {child.label} + + ); + } + return null; + })} ); } - -MenuObject.propTypes = propTypes; diff --git a/superset-frontend/src/components/Menu/NewMenu.jsx b/superset-frontend/src/components/Menu/NewMenu.tsx similarity index 97% rename from superset-frontend/src/components/Menu/NewMenu.jsx rename to superset-frontend/src/components/Menu/NewMenu.tsx index 92b939aaa..197365280 100644 --- a/superset-frontend/src/components/Menu/NewMenu.jsx +++ b/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() { ); } - -NewMenu.propTypes = propTypes; diff --git a/superset-frontend/src/components/Menu/UserMenu.jsx b/superset-frontend/src/components/Menu/UserMenu.tsx similarity index 86% rename from superset-frontend/src/components/Menu/UserMenu.jsx rename to superset-frontend/src/components/Menu/UserMenu.tsx index d70c5795e..4712d49fe 100644 --- a/superset-frontend/src/components/Menu/UserMenu.jsx +++ b/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 ( ); } - -UserMenu.propTypes = propTypes;