Initial support for typescript and migration of some widgets to tsx (#…

…3472) * Adding initial typscript support * Migrating badges to typescript * Migrating loading widgets to typescript * Migrating full screen modal to typescript * Migrating admin console widgets to typescript * fixing tests * Removing .tsx from import for consistency * Addressing PR review comments * Fixing tests * Addressing PR review comments * Adding prop types generation * fixing bad type definition * Moving the linting for typescript to only typescript code
mattermost · Aug 30, 2019 · 09d9fc3 · 09d9fc3
1 parent 400fea6
commit 09d9fc3
Show file tree

Hide file tree

Showing 92 changed files with 678 additions and 384 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -68,6 +68,46 @@
  ]
  },
  "overrides": [
+ {
+ "files": ["**/*.tsx", "**/*.ts"],
+ "extends": [
+ "./node_modules/eslint-config-mattermost/.eslintrc.json",
+ "./node_modules/eslint-config-mattermost/.eslintrc-react.json",
+ "plugin:@typescript-eslint/recommended",
+ "plugin:cypress/recommended"
+ ],
+ "rules": {
+ "@typescript-eslint/no-var-requires": 0,
+ "@typescript-eslint/prefer-interface": 0,
+ "@typescript-eslint/indent": [
+ 2,
+ 4,
+ {
+ "SwitchCase": 0
+ }
+ ],
+ "@typescript-eslint/no-use-before-define": [
+ 2,
+ {
+ "classes": false,
+ "functions": false,
+ "variables": false
+ }
+ ],
+ "@typescript-eslint/camelcase": [
+ 2,
+ {
+ "properties": "never"
+ }
+ ],
+ "react/jsx-filename-extension": [
+ 1,
+ {
+ "extensions": [".jsx", ".tsx"]
+ }
+ ]
+ }
+ },
  {
  "files": ["tests/**"],
  "env": {

diff --git a/babel.config.js b/babel.config.js
@@ -19,11 +19,17 @@ const config = {
  ['@babel/preset-react', {
  useBuiltIns: true,
  }],
+ ['@babel/typescript', {
+ allExtensions: true,
+ isTSX: true,
+ }],
  ],
  plugins: [
  '@babel/plugin-proposal-class-properties',
  '@babel/plugin-syntax-dynamic-import',
+ '@babel/proposal-object-rest-spread',
  'react-hot-loader/babel',
+ 'babel-plugin-typescript-to-proptypes',
  ],
 };
 
@@ -33,6 +39,10 @@ config.env = {
  presets: config.presets,
  plugins: config.plugins,
  },
+ production: {
+ presets: config.presets,
+ plugins: config.plugins.filter((plugin) => plugin !== 'babel-plugin-typescript-to-proptypes'),
+ },
 };
 config.env.test.presets[0][1].modules = 'auto';
 

diff --git a/components/activity_log_modal/components/activity_log.test.jsx b/components/activity_log_modal/components/activity_log.test.jsx
@@ -69,16 +69,44 @@ describe('components/activity_log_modal/ActivityLog', () => {
 
  const mobileSessionInfo = wrapper.instance().mobileSessionInfo;
 
- const apple = {devicePicture: 'fa fa-apple', deviceTitle: localizeMessage('device_icons.apple', 'Apple Icon'), devicePlatform: <FormattedMessage defaultMessage='iPhone Native Classic App' id='activity_log_modal.iphoneNativeClassicApp' values={{}}/>}; //eslint-disable-line react/jsx-max-props-per-line
+ const appleText = (
+ <FormattedMessage
+ defaultMessage='iPhone Native Classic App'
+ id='activity_log_modal.iphoneNativeClassicApp'
+ values={{}}
+ />
+ );
+ const apple = {devicePicture: 'fa fa-apple', deviceTitle: localizeMessage('device_icons.apple', 'Apple Icon'), devicePlatform: appleText};
  expect(mobileSessionInfo({device_id: 'apple'})).toEqual(apple);
 
- const android = {devicePicture: 'fa fa-android', deviceTitle: localizeMessage('device_icons.android', 'Android Icon'), devicePlatform: <FormattedMessage defaultMessage='Android Native Classic App' id='activity_log_modal.androidNativeClassicApp' values={{}}/>}; //eslint-disable-line react/jsx-max-props-per-line
+ const androidText = (
+ <FormattedMessage
+ defaultMessage='Android Native Classic App'
+ id='activity_log_modal.androidNativeClassicApp'
+ values={{}}
+ />
+ );
+ const android = {devicePicture: 'fa fa-android', deviceTitle: localizeMessage('device_icons.android', 'Android Icon'), devicePlatform: androidText};
  expect(mobileSessionInfo({device_id: 'android'})).toEqual(android);
 
- const appleRN = {devicePicture: 'fa fa-apple', deviceTitle: localizeMessage('device_icons.apple', 'Apple Icon'), devicePlatform: <FormattedMessage defaultMessage='iPhone Native App' id='activity_log_modal.iphoneNativeApp' values={{}}/>}; //eslint-disable-line react/jsx-max-props-per-line
+ const appleRNText = (
+ <FormattedMessage
+ defaultMessage='iPhone Native App'
+ id='activity_log_modal.iphoneNativeApp'
+ values={{}}
+ />
+ );
+ const appleRN = {devicePicture: 'fa fa-apple', deviceTitle: localizeMessage('device_icons.apple', 'Apple Icon'), devicePlatform: appleRNText};
  expect(mobileSessionInfo({device_id: 'apple_rn'})).toEqual(appleRN);
 
- const androidRN = {devicePicture: 'fa fa-android', deviceTitle: localizeMessage('device_icons.android', 'Android Icon'), devicePlatform: <FormattedMessage defaultMessage='Android Native App' id='activity_log_modal.androidNativeApp' values={{}}/>}; //eslint-disable-line react/jsx-max-props-per-line
+ const androidRNText = (
+ <FormattedMessage
+ defaultMessage='Android Native App'
+ id='activity_log_modal.androidNativeApp'
+ values={{}}
+ />
+ );
+ const androidRN = {devicePicture: 'fa fa-android', deviceTitle: localizeMessage('device_icons.android', 'Android Icon'), devicePlatform: androidRNText};
  expect(mobileSessionInfo({device_id: 'android_rn'})).toEqual(androidRN);
  });
 });
diff --git a/components/admin_console/admin_settings.jsx b/components/admin_console/admin_settings.jsx
@@ -11,7 +11,7 @@ import SaveButton from 'components/save_button.jsx';
 import FormError from 'components/form_error.jsx';
 import Constants from 'utils/constants.jsx';
 
-import AdminHeader from 'components/widgets/admin_console/admin_header.jsx';
+import AdminHeader from 'components/widgets/admin_console/admin_header';
 
 export default class AdminSettings extends React.Component {
  static propTypes = {

diff --git a/components/admin_console/brand_image_setting/upload_button.jsx b/components/admin_console/brand_image_setting/upload_button.jsx
@@ -7,7 +7,7 @@ import React from 'react';
 import * as Utils from 'utils/utils.jsx';
 import {UploadStatuses} from 'utils/constants.jsx';
 
-import LoadingWrapper from 'components/widgets/loading/loading_wrapper.jsx';
+import LoadingWrapper from 'components/widgets/loading/loading_wrapper';
 import SuccessIcon from 'components/widgets/icons/fa_success_icon';
 
 export default class UploadButton extends React.PureComponent {

diff --git a/components/admin_console/group_settings/group_details/group_details.jsx b/components/admin_console/group_settings/group_details/group_details.jsx
@@ -11,7 +11,7 @@ import {localizeMessage} from 'utils/utils.jsx';
 import GroupProfile from 'components/admin_console/group_settings/group_details/group_profile';
 import GroupTeamsAndChannels from 'components/admin_console/group_settings/group_details/group_teams_and_channels';
 import GroupUsers from 'components/admin_console/group_settings/group_details/group_users';
-import AdminPanel from 'components/widgets/admin_console/admin_panel.jsx';
+import AdminPanel from 'components/widgets/admin_console/admin_panel';
 import BlockableLink from 'components/admin_console/blockable_link';
 
 import TeamSelectorModal from 'components/team_selector_modal';

diff --git a/components/admin_console/group_settings/group_row.jsx b/components/admin_console/group_settings/group_row.jsx
@@ -9,7 +9,7 @@ import {FormattedMessage} from 'react-intl';
 import {localizeMessage} from 'utils/utils.jsx';
 
 import CheckboxCheckedIcon from 'components/widgets/icons/checkbox_checked_icon.jsx';
-import LoadingSpinner from 'components/widgets/loading/loading_spinner.jsx';
+import LoadingSpinner from 'components/widgets/loading/loading_spinner';
 
 export default class GroupRow extends React.Component {
  static propTypes = {

diff --git a/components/admin_console/group_settings/group_settings.jsx b/components/admin_console/group_settings/group_settings.jsx
@@ -6,7 +6,7 @@ import {FormattedMessage} from 'react-intl';
 
 import {t} from 'utils/i18n';
 import GroupsList from 'components/admin_console/group_settings/groups_list';
-import AdminPanel from 'components/widgets/admin_console/admin_panel.jsx';
+import AdminPanel from 'components/widgets/admin_console/admin_panel';
 import FormattedMarkdownMessage from 'components/formatted_markdown_message.jsx';
 
 import {getSiteURL} from 'utils/url.jsx';

diff --git a/components/admin_console/license_settings/license_settings.jsx b/components/admin_console/license_settings/license_settings.jsx
@@ -8,7 +8,7 @@ import {FormattedMessage} from 'react-intl';
 import * as Utils from 'utils/utils.jsx';
 
 import FormattedMarkdownMessage from 'components/formatted_markdown_message.jsx';
-import FormattedAdminHeader from 'components/widgets/admin_console/formatted_admin_header.jsx';
+import FormattedAdminHeader from 'components/widgets/admin_console/formatted_admin_header';
 
 export default class LicenseSettings extends React.Component {
  static propTypes = {

diff --git a/components/admin_console/manage_roles_modal/manage_roles_modal.jsx b/components/admin_console/manage_roles_modal/manage_roles_modal.jsx
@@ -12,7 +12,7 @@ import * as UserUtils from 'mattermost-redux/utils/user_utils';
 import {trackEvent} from 'actions/diagnostics_actions.jsx';
 
 import FormattedMarkdownMessage from 'components/formatted_markdown_message.jsx';
-import BotBadge from 'components/widgets/badges/bot_badge.jsx';
+import BotBadge from 'components/widgets/badges/bot_badge';
 import Avatar from 'components/widgets/users/avatar';
 
 function getStateFromProps(props) {

diff --git a/components/admin_console/permission_schemes_settings/permission_schemes_settings.jsx b/components/admin_console/permission_schemes_settings/permission_schemes_settings.jsx
@@ -11,10 +11,10 @@ import * as Utils from 'utils/utils';
 import FormattedMarkdownMessage from 'components/formatted_markdown_message';
 
 import LoadingScreen from 'components/loading_screen.jsx';
-import LoadingWrapper from 'components/widgets/loading/loading_wrapper.jsx';
+import LoadingWrapper from 'components/widgets/loading/loading_wrapper';
 
-import FormattedAdminHeader from 'components/widgets/admin_console/formatted_admin_header.jsx';
-import AdminPanelWithLink from 'components/widgets/admin_console/admin_panel_with_link.jsx';
+import FormattedAdminHeader from 'components/widgets/admin_console/formatted_admin_header';
+import AdminPanelWithLink from 'components/widgets/admin_console/admin_panel_with_link';
 
 import PermissionsSchemeSummary from './permissions_scheme_summary';
 

diff --git a/..._schemes_settings/permission_system_scheme_settings/permission_system_scheme_settings.jsx b/..._schemes_settings/permission_system_scheme_settings/permission_system_scheme_settings.jsx
@@ -18,7 +18,7 @@ import SaveButton from 'components/save_button.jsx';
 import LoadingScreen from 'components/loading_screen.jsx';
 import FormError from 'components/form_error.jsx';
 import BlockableLink from 'components/admin_console/blockable_link';
-import AdminPanelTogglable from 'components/widgets/admin_console/admin_panel_togglable.jsx';
+import AdminPanelTogglable from 'components/widgets/admin_console/admin_panel_togglable';
 
 import FormattedMarkdownMessage from 'components/formatted_markdown_message';
 
@@ -127,7 +127,7 @@ export default class PermissionSystemSchemeSettings extends React.Component {
  }
 
  loadRolesIntoState(props) {
- const {system_admin, team_admin, channel_admin, system_user, team_user, channel_user, system_guest, team_guest, channel_guest} = props.roles; // eslint-disable-line camelcase
+ const {system_admin, team_admin, channel_admin, system_user, team_user, channel_user, system_guest, team_guest, channel_guest} = props.roles; // eslint-disable-line camelcase, @typescript-eslint/camelcase
  this.setState({
  selectedPermission: null,
  loaded: true,

diff --git a/...sion_schemes_settings/permission_team_scheme_settings/permission_team_scheme_settings.jsx b/...sion_schemes_settings/permission_team_scheme_settings/permission_team_scheme_settings.jsx
@@ -16,9 +16,9 @@ import LoadingScreen from 'components/loading_screen.jsx';
 import FormError from 'components/form_error.jsx';
 import TeamSelectorModal from 'components/team_selector_modal';
 import BlockableLink from 'components/admin_console/blockable_link';
-import AdminPanel from 'components/widgets/admin_console/admin_panel.jsx';
-import AdminPanelTogglable from 'components/widgets/admin_console/admin_panel_togglable.jsx';
-import AdminPanelWithButton from 'components/widgets/admin_console/admin_panel_with_button.jsx';
+import AdminPanel from 'components/widgets/admin_console/admin_panel';
+import AdminPanelTogglable from 'components/widgets/admin_console/admin_panel_togglable';
+import AdminPanelWithButton from 'components/widgets/admin_console/admin_panel_with_button';
 
 import FormattedMarkdownMessage from 'components/formatted_markdown_message';
 

diff --git a/...ole/permission_schemes_settings/permissions_scheme_summary/permissions_scheme_summary.jsx b/...ole/permission_schemes_settings/permissions_scheme_summary/permissions_scheme_summary.jsx
@@ -8,7 +8,7 @@ import {OverlayTrigger, Tooltip} from 'react-bootstrap';
 import {FormattedMessage} from 'react-intl';
 
 import ConfirmModal from 'components/confirm_modal.jsx';
-import LoadingWrapper from 'components/widgets/loading/loading_wrapper.jsx';
+import LoadingWrapper from 'components/widgets/loading/loading_wrapper';
 
 import * as Utils from 'utils/utils.jsx';
 import Constants from 'utils/constants.jsx';

diff --git a/components/admin_console/request_button/request_button.jsx b/components/admin_console/request_button/request_button.jsx
@@ -7,7 +7,7 @@ import {FormattedMessage} from 'react-intl';
 
 import * as Utils from 'utils/utils.jsx';
 import {t} from 'utils/i18n';
-import LoadingWrapper from 'components/widgets/loading/loading_wrapper.jsx';
+import LoadingWrapper from 'components/widgets/loading/loading_wrapper';
 import SuccessIcon from 'components/widgets/icons/fa_success_icon';
 import WarningIcon from 'components/widgets/icons/fa_warning_icon';
 

diff --git a/components/admin_console/schema_admin_settings.jsx b/components/admin_console/schema_admin_settings.jsx
@@ -32,8 +32,8 @@ import FormError from 'components/form_error.jsx';
 
 import FormattedMarkdownMessage from 'components/formatted_markdown_message';
 
-import AdminHeader from 'components/widgets/admin_console/admin_header.jsx';
-import FormattedAdminHeader from 'components/widgets/admin_console/formatted_admin_header.jsx';
+import AdminHeader from 'components/widgets/admin_console/admin_header';
+import FormattedAdminHeader from 'components/widgets/admin_console/formatted_admin_header';
 
 export default class SchemaAdminSettings extends React.Component {
  static propTypes = {

diff --git a/components/admin_console/server_logs/logs.jsx b/components/admin_console/server_logs/logs.jsx
@@ -7,7 +7,7 @@ import {FormattedMessage} from 'react-intl';
 
 import LoadingScreen from 'components/loading_screen.jsx';
 
-import FormattedAdminHeader from 'components/widgets/admin_console/formatted_admin_header.jsx';
+import FormattedAdminHeader from 'components/widgets/admin_console/formatted_admin_header';
 
 import LogList from './log_list.jsx';
 

diff --git a/components/admin_console/system_users/system_users.jsx b/components/admin_console/system_users/system_users.jsx
@@ -14,7 +14,7 @@ import {t} from 'utils/i18n.jsx';
 import {getUserOptionsFromFilter, searchUserOptionsFromFilter} from 'utils/filter_users';
 
 import LocalizedInput from 'components/localized_input/localized_input';
-import FormattedAdminHeader from 'components/widgets/admin_console/formatted_admin_header.jsx';
+import FormattedAdminHeader from 'components/widgets/admin_console/formatted_admin_header';
 import FormattedMarkdownMessage from 'components/formatted_markdown_message.jsx';
 import SystemPermissionGate from 'components/permissions_gates/system_permission_gate';
 import ConfirmModal from 'components/confirm_modal.jsx';

diff --git a/components/admin_console/team_channel_settings/channel/channel_settings.jsx b/components/admin_console/team_channel_settings/channel/channel_settings.jsx
@@ -7,7 +7,7 @@ import {FormattedMessage} from 'react-intl';
 
 import {t} from 'utils/i18n';
 import ChannelsList from 'components/admin_console/team_channel_settings/channel/list';
-import AdminPanel from 'components/widgets/admin_console/admin_panel.jsx';
+import AdminPanel from 'components/widgets/admin_console/admin_panel';
 
 export class ChannelsSettings extends React.Component {
  static propTypes = {

diff --git a/components/admin_console/team_channel_settings/channel/details/channel_groups.jsx b/components/admin_console/team_channel_settings/channel/details/channel_groups.jsx
@@ -7,7 +7,7 @@ import {FormattedMessage} from 'react-intl';
 
 import {t} from 'utils/i18n';
 
-import AdminPanel from 'components/widgets/admin_console/admin_panel.jsx';
+import AdminPanel from 'components/widgets/admin_console/admin_panel';
 import ToggleModalButton from 'components/toggle_modal_button';
 import AddGroupsToChannelModal from 'components/add_groups_to_channel_modal';
 import GroupList from '../../group';

diff --git a/components/admin_console/team_channel_settings/channel/details/channel_modes.jsx b/components/admin_console/team_channel_settings/channel/details/channel_modes.jsx
@@ -7,7 +7,7 @@ import {FormattedMessage} from 'react-intl';
 
 import {t} from 'utils/i18n';
 
-import AdminPanel from 'components/widgets/admin_console/admin_panel.jsx';
+import AdminPanel from 'components/widgets/admin_console/admin_panel';
 import FormattedMarkdownMessage from 'components/formatted_markdown_message.jsx';
 import LineSwitch from '../../line_switch';
 

diff --git a/components/admin_console/team_channel_settings/channel/details/channel_profile.jsx b/components/admin_console/team_channel_settings/channel/details/channel_profile.jsx
@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
 
 import {t} from 'utils/i18n';
 
-import AdminPanel from 'components/widgets/admin_console/admin_panel.jsx';
+import AdminPanel from 'components/widgets/admin_console/admin_panel';
 import FormattedMarkdownMessage from 'components/formatted_markdown_message.jsx';
 
 export const ChannelProfile = ({team, channel}) => (

diff --git a/components/admin_console/team_channel_settings/team/details/team_groups.jsx b/components/admin_console/team_channel_settings/team/details/team_groups.jsx
@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
 import {FormattedMessage} from 'react-intl';
 
 import {t} from 'utils/i18n';
-import AdminPanel from 'components/widgets/admin_console/admin_panel.jsx';
+import AdminPanel from 'components/widgets/admin_console/admin_panel';
 
 import ToggleModalButton from 'components/toggle_modal_button.jsx';
 

diff --git a/components/admin_console/team_channel_settings/team/details/team_modes.jsx b/components/admin_console/team_channel_settings/team/details/team_modes.jsx
@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
 import {FormattedMessage} from 'react-intl';
 
 import {t} from 'utils/i18n';
-import AdminPanel from 'components/widgets/admin_console/admin_panel.jsx';
+import AdminPanel from 'components/widgets/admin_console/admin_panel';
 import FormattedMarkdownMessage from 'components/formatted_markdown_message.jsx';
 
 import LineSwitch from '../../line_switch.jsx';

diff --git a/components/admin_console/team_channel_settings/team/details/team_profile.jsx b/components/admin_console/team_channel_settings/team/details/team_profile.jsx
@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
 
 import {t} from 'utils/i18n';
 
-import AdminPanel from 'components/widgets/admin_console/admin_panel.jsx';
+import AdminPanel from 'components/widgets/admin_console/admin_panel';
 import FormattedMarkdownMessage from 'components/formatted_markdown_message.jsx';
 
 import * as Utils from 'utils/utils';

diff --git a/components/admin_console/team_channel_settings/team/team_settings.jsx b/components/admin_console/team_channel_settings/team/team_settings.jsx
@@ -7,7 +7,7 @@ import {FormattedMessage} from 'react-intl';
 
 import {t} from 'utils/i18n';
 import TeamList from 'components/admin_console/team_channel_settings/team/list';
-import AdminPanel from 'components/widgets/admin_console/admin_panel.jsx';
+import AdminPanel from 'components/widgets/admin_console/admin_panel';
 
 export class TeamsSettings extends React.Component {
  static propTypes = {

diff --git a/components/analytics/system_analytics/system_analytics.jsx b/components/analytics/system_analytics/system_analytics.jsx
@@ -10,7 +10,7 @@ import Constants from 'utils/constants.jsx';
 
 import FormattedMarkdownMessage from 'components/formatted_markdown_message.jsx';
 
-import FormattedAdminHeader from 'components/widgets/admin_console/formatted_admin_header.jsx';
+import FormattedAdminHeader from 'components/widgets/admin_console/formatted_admin_header';
 
 import DoughnutChart from '../doughnut_chart.jsx';
 import LineChart from '../line_chart.jsx';

diff --git a/components/channel_header/channel_header.js b/components/channel_header/channel_header.js
@@ -24,8 +24,8 @@ import ChannelPermissionGate from 'components/permissions_gates/channel_permissi
 import QuickSwitchModal from 'components/quick_switch_modal';
 import {ChannelHeaderDropdown} from 'components/channel_header_dropdown';
 import MenuWrapper from 'components/widgets/menu/menu_wrapper.jsx';
-import GuestBadge from 'components/widgets/badges/guest_badge.jsx';
-import BotBadge from 'components/widgets/badges/bot_badge.jsx';
+import GuestBadge from 'components/widgets/badges/guest_badge';
+import BotBadge from 'components/widgets/badges/bot_badge';
 
 import {
  Constants,

diff --git a/components/channel_invite_modal/channel_invite_modal.jsx b/components/channel_invite_modal/channel_invite_modal.jsx
@@ -13,8 +13,8 @@ import {displayEntireNameForUser, localizeMessage, isGuest} from 'utils/utils.js
 import ProfilePicture from 'components/profile_picture.jsx';
 import MultiSelect from 'components/multiselect/multiselect.jsx';
 import AddIcon from 'components/widgets/icons/fa_add_icon';
-import GuestBadge from 'components/widgets/badges/guest_badge.jsx';
-import BotBadge from 'components/widgets/badges/bot_badge.jsx';
+import GuestBadge from 'components/widgets/badges/guest_badge';
+import BotBadge from 'components/widgets/badges/bot_badge';
 
 import Constants from 'utils/constants.jsx';
 

diff --git a/components/code_preview.jsx b/components/code_preview.jsx
@@ -8,7 +8,7 @@ import React from 'react';
 import Constants from 'utils/constants.jsx';
 import * as SyntaxHighlighting from 'utils/syntax_highlighting.jsx';
 
-import LoadingSpinner from 'components/widgets/loading/loading_spinner.jsx';
+import LoadingSpinner from 'components/widgets/loading/loading_spinner';
 import FileInfoPreview from 'components/file_info_preview';
 
 export default class CodePreview extends React.Component {