From 8a99fa269d08252ed5708b89ce0a3e3086326d45 Mon Sep 17 00:00:00 2001 From: Tobias Skarhed Date: Fri, 24 Aug 2018 16:48:47 +0200 Subject: [PATCH] WIP Update tslint (#12922) * Interface linting rule * fix: changed model names in store files so that the interface names do not conflict with the model names --- package.json | 3 +- .../AlertRuleList/AlertRuleList.tsx | 8 +-- .../{IContainerProps.ts => ContainerProps.ts} | 4 +- public/app/containers/Explore/Explore.tsx | 6 +- .../ManageDashboards/FolderPermissions.tsx | 4 +- .../ManageDashboards/FolderSettings.tsx | 4 +- .../containers/ServerStats/ServerStats.tsx | 4 +- public/app/containers/Teams/TeamGroupSync.tsx | 8 +-- public/app/containers/Teams/TeamList.tsx | 6 +- public/app/containers/Teams/TeamMembers.tsx | 10 ++-- public/app/containers/Teams/TeamPages.tsx | 4 +- public/app/containers/Teams/TeamSettings.tsx | 4 +- .../components/EmptyListCTA/EmptyListCTA.tsx | 57 ++++++++++--------- .../core/components/PageHeader/PageHeader.tsx | 4 +- .../app/core/components/PasswordStrength.tsx | 19 +++---- .../DisabledPermissionsListItem.tsx | 4 +- .../components/Permissions/Permissions.tsx | 4 +- .../Permissions/PermissionsList.tsx | 4 +- .../components/Picker/DescriptionOption.tsx | 4 +- .../core/components/Picker/PickerOption.tsx | 4 +- .../core/components/TagFilter/TagBadge.tsx | 4 +- .../core/components/TagFilter/TagFilter.tsx | 4 +- .../core/components/TagFilter/TagOption.tsx | 4 +- .../core/components/TagFilter/TagValue.tsx | 4 +- .../app/core/components/Tooltip/Popover.tsx | 4 +- .../app/core/components/Tooltip/Tooltip.tsx | 4 +- .../components/colorpicker/ColorPalette.tsx | 8 +-- .../components/colorpicker/ColorPicker.tsx | 4 +- .../colorpicker/ColorPickerPopover.tsx | 35 +++++++----- .../colorpicker/SeriesColorPicker.tsx | 4 +- .../components/colorpicker/SpectrumPicker.tsx | 28 ++++----- .../stores/AlertListStore/AlertListStore.ts | 10 ++-- public/app/stores/NavStore/NavStore.ts | 4 +- public/app/stores/RootStore/RootStore.ts | 4 +- public/app/stores/TeamsStore/TeamsStore.ts | 36 ++++++------ public/app/stores/store.ts | 4 +- tslint.json | 1 + yarn.lock | 12 ++++ 38 files changed, 179 insertions(+), 160 deletions(-) rename public/app/containers/{IContainerProps.ts => ContainerProps.ts} (92%) diff --git a/package.json b/package.json index 8520def5db8..9cc47ff71b8 100644 --- a/package.json +++ b/package.json @@ -169,7 +169,8 @@ "slate-react": "^0.12.4", "tether": "^1.4.0", "tether-drop": "https://github.com/torkelo/drop/tarball/master", - "tinycolor2": "^1.4.1" + "tinycolor2": "^1.4.1", + "tslint-react": "^3.6.0" }, "resolutions": { "caniuse-db": "1.0.30000772" diff --git a/public/app/containers/AlertRuleList/AlertRuleList.tsx b/public/app/containers/AlertRuleList/AlertRuleList.tsx index b61c7fbaac3..3c2da77c2a7 100644 --- a/public/app/containers/AlertRuleList/AlertRuleList.tsx +++ b/public/app/containers/AlertRuleList/AlertRuleList.tsx @@ -3,14 +3,14 @@ import { hot } from 'react-hot-loader'; import classNames from 'classnames'; import { inject, observer } from 'mobx-react'; import PageHeader from 'app/core/components/PageHeader/PageHeader'; -import { IAlertRule } from 'app/stores/AlertListStore/AlertListStore'; +import { AlertRule } from 'app/stores/AlertListStore/AlertListStore'; import appEvents from 'app/core/app_events'; -import IContainerProps from 'app/containers/IContainerProps'; +import ContainerProps from 'app/containers/ContainerProps'; import Highlighter from 'react-highlight-words'; @inject('view', 'nav', 'alertList') @observer -export class AlertRuleList extends React.Component { +export class AlertRuleList extends React.Component { stateFilters = [ { text: 'All', value: 'all' }, { text: 'OK', value: 'ok' }, @@ -109,7 +109,7 @@ function AlertStateFilterOption({ text, value }) { } export interface AlertRuleItemProps { - rule: IAlertRule; + rule: AlertRule; search: string; } diff --git a/public/app/containers/IContainerProps.ts b/public/app/containers/ContainerProps.ts similarity index 92% rename from public/app/containers/IContainerProps.ts rename to public/app/containers/ContainerProps.ts index 6e790cee06d..97889278fdc 100644 --- a/public/app/containers/IContainerProps.ts +++ b/public/app/containers/ContainerProps.ts @@ -6,7 +6,7 @@ import { AlertListStore } from './../stores/AlertListStore/AlertListStore'; import { ViewStore } from './../stores/ViewStore/ViewStore'; import { FolderStore } from './../stores/FolderStore/FolderStore'; -interface IContainerProps { +interface ContainerProps { search: typeof SearchStore.Type; serverStats: typeof ServerStatsStore.Type; nav: typeof NavStore.Type; @@ -17,4 +17,4 @@ interface IContainerProps { backendSrv: any; } -export default IContainerProps; +export default ContainerProps; diff --git a/public/app/containers/Explore/Explore.tsx b/public/app/containers/Explore/Explore.tsx index d161e7689cf..e06f4e7042e 100644 --- a/public/app/containers/Explore/Explore.tsx +++ b/public/app/containers/Explore/Explore.tsx @@ -63,7 +63,7 @@ function parseUrlState(initial: string | undefined) { return { datasource: null, queries: [], range: DEFAULT_RANGE }; } -interface IExploreState { +interface ExploreState { datasource: any; datasourceError: any; datasourceLoading: boolean | null; @@ -88,12 +88,12 @@ interface IExploreState { tableResult: any; } -export class Explore extends React.Component { +export class Explore extends React.Component { el: any; constructor(props) { super(props); - const initialState: IExploreState = props.initialState; + const initialState: ExploreState = props.initialState; const { datasource, queries, range } = parseUrlState(props.routeParams.state); this.state = { datasource: null, diff --git a/public/app/containers/ManageDashboards/FolderPermissions.tsx b/public/app/containers/ManageDashboards/FolderPermissions.tsx index aac5d32750a..072908d2b8e 100644 --- a/public/app/containers/ManageDashboards/FolderPermissions.tsx +++ b/public/app/containers/ManageDashboards/FolderPermissions.tsx @@ -2,7 +2,7 @@ import React, { Component } from 'react'; import { hot } from 'react-hot-loader'; import { inject, observer } from 'mobx-react'; import { toJS } from 'mobx'; -import IContainerProps from 'app/containers/IContainerProps'; +import ContainerProps from 'app/containers/ContainerProps'; import PageHeader from 'app/core/components/PageHeader/PageHeader'; import Permissions from 'app/core/components/Permissions/Permissions'; import Tooltip from 'app/core/components/Tooltip/Tooltip'; @@ -12,7 +12,7 @@ import SlideDown from 'app/core/components/Animations/SlideDown'; @inject('nav', 'folder', 'view', 'permissions') @observer -export class FolderPermissions extends Component { +export class FolderPermissions extends Component { constructor(props) { super(props); this.handleAddPermission = this.handleAddPermission.bind(this); diff --git a/public/app/containers/ManageDashboards/FolderSettings.tsx b/public/app/containers/ManageDashboards/FolderSettings.tsx index d25a7dc6c06..88830356563 100644 --- a/public/app/containers/ManageDashboards/FolderSettings.tsx +++ b/public/app/containers/ManageDashboards/FolderSettings.tsx @@ -3,13 +3,13 @@ import { hot } from 'react-hot-loader'; import { inject, observer } from 'mobx-react'; import { toJS } from 'mobx'; import PageHeader from 'app/core/components/PageHeader/PageHeader'; -import IContainerProps from 'app/containers/IContainerProps'; +import ContainerProps from 'app/containers/ContainerProps'; import { getSnapshot } from 'mobx-state-tree'; import appEvents from 'app/core/app_events'; @inject('nav', 'folder', 'view') @observer -export class FolderSettings extends React.Component { +export class FolderSettings extends React.Component { formSnapshot: any; componentDidMount() { diff --git a/public/app/containers/ServerStats/ServerStats.tsx b/public/app/containers/ServerStats/ServerStats.tsx index 761b296855f..63e78996041 100644 --- a/public/app/containers/ServerStats/ServerStats.tsx +++ b/public/app/containers/ServerStats/ServerStats.tsx @@ -2,11 +2,11 @@ import React from 'react'; import { hot } from 'react-hot-loader'; import { inject, observer } from 'mobx-react'; import PageHeader from 'app/core/components/PageHeader/PageHeader'; -import IContainerProps from 'app/containers/IContainerProps'; +import ContainerProps from 'app/containers/ContainerProps'; @inject('nav', 'serverStats') @observer -export class ServerStats extends React.Component { +export class ServerStats extends React.Component { constructor(props) { super(props); const { nav, serverStats } = this.props; diff --git a/public/app/containers/Teams/TeamGroupSync.tsx b/public/app/containers/Teams/TeamGroupSync.tsx index 323dceae0d8..a3b2e4aed14 100644 --- a/public/app/containers/Teams/TeamGroupSync.tsx +++ b/public/app/containers/Teams/TeamGroupSync.tsx @@ -1,12 +1,12 @@ import React from 'react'; import { hot } from 'react-hot-loader'; import { observer } from 'mobx-react'; -import { ITeam, ITeamGroup } from 'app/stores/TeamsStore/TeamsStore'; +import { Team, TeamGroup } from 'app/stores/TeamsStore/TeamsStore'; import SlideDown from 'app/core/components/Animations/SlideDown'; import Tooltip from 'app/core/components/Tooltip/Tooltip'; interface Props { - team: ITeam; + team: Team; } interface State { @@ -27,7 +27,7 @@ export class TeamGroupSync extends React.Component { this.props.team.loadGroups(); } - renderGroup(group: ITeamGroup) { + renderGroup(group: TeamGroup) { return ( {group.groupId} @@ -53,7 +53,7 @@ export class TeamGroupSync extends React.Component { this.setState({ isAdding: false, newGroupId: '' }); }; - onRemoveGroup = (group: ITeamGroup) => { + onRemoveGroup = (group: TeamGroup) => { this.props.team.removeGroup(group.groupId); }; diff --git a/public/app/containers/Teams/TeamList.tsx b/public/app/containers/Teams/TeamList.tsx index 31406250cb3..2d037eed642 100644 --- a/public/app/containers/Teams/TeamList.tsx +++ b/public/app/containers/Teams/TeamList.tsx @@ -3,7 +3,7 @@ import { hot } from 'react-hot-loader'; import { inject, observer } from 'mobx-react'; import PageHeader from 'app/core/components/PageHeader/PageHeader'; import { NavStore } from 'app/stores/NavStore/NavStore'; -import { TeamsStore, ITeam } from 'app/stores/TeamsStore/TeamsStore'; +import { TeamsStore, Team } from 'app/stores/TeamsStore/TeamsStore'; import { BackendSrv } from 'app/core/services/backend_srv'; import DeleteButton from 'app/core/components/DeleteButton/DeleteButton'; @@ -27,7 +27,7 @@ export class TeamList extends React.Component { this.props.teams.loadTeams(); } - deleteTeam(team: ITeam) { + deleteTeam(team: Team) { this.props.backendSrv.delete('/api/teams/' + team.id).then(this.fetchTeams.bind(this)); } @@ -35,7 +35,7 @@ export class TeamList extends React.Component { this.props.teams.setSearchQuery(evt.target.value); }; - renderTeamMember(team: ITeam): JSX.Element { + renderTeamMember(team: Team): JSX.Element { let teamUrl = `org/teams/edit/${team.id}`; return ( diff --git a/public/app/containers/Teams/TeamMembers.tsx b/public/app/containers/Teams/TeamMembers.tsx index a6b0b04f19d..b06a547063a 100644 --- a/public/app/containers/Teams/TeamMembers.tsx +++ b/public/app/containers/Teams/TeamMembers.tsx @@ -1,13 +1,13 @@ import React from 'react'; import { hot } from 'react-hot-loader'; import { observer } from 'mobx-react'; -import { ITeam, ITeamMember } from 'app/stores/TeamsStore/TeamsStore'; +import { Team, TeamMember } from 'app/stores/TeamsStore/TeamsStore'; import SlideDown from 'app/core/components/Animations/SlideDown'; import { UserPicker, User } from 'app/core/components/Picker/UserPicker'; import DeleteButton from 'app/core/components/DeleteButton/DeleteButton'; interface Props { - team: ITeam; + team: Team; } interface State { @@ -30,15 +30,15 @@ export class TeamMembers extends React.Component { this.props.team.setSearchQuery(evt.target.value); }; - removeMember(member: ITeamMember) { + removeMember(member: TeamMember) { this.props.team.removeMember(member); } - removeMemberConfirmed(member: ITeamMember) { + removeMemberConfirmed(member: TeamMember) { this.props.team.removeMember(member); } - renderMember(member: ITeamMember) { + renderMember(member: TeamMember) { return ( diff --git a/public/app/containers/Teams/TeamPages.tsx b/public/app/containers/Teams/TeamPages.tsx index 500a7cbe5e8..2abc9c51535 100644 --- a/public/app/containers/Teams/TeamPages.tsx +++ b/public/app/containers/Teams/TeamPages.tsx @@ -5,7 +5,7 @@ import { inject, observer } from 'mobx-react'; import config from 'app/core/config'; import PageHeader from 'app/core/components/PageHeader/PageHeader'; import { NavStore } from 'app/stores/NavStore/NavStore'; -import { TeamsStore, ITeam } from 'app/stores/TeamsStore/TeamsStore'; +import { TeamsStore, Team } from 'app/stores/TeamsStore/TeamsStore'; import { ViewStore } from 'app/stores/ViewStore/ViewStore'; import TeamMembers from './TeamMembers'; import TeamSettings from './TeamSettings'; @@ -40,7 +40,7 @@ export class TeamPages extends React.Component { nav.initTeamPage(this.getCurrentTeam(), this.currentPage, this.isSyncEnabled); } - getCurrentTeam(): ITeam { + getCurrentTeam(): Team { const { teams, view } = this.props; return teams.map.get(view.routeParams.get('id')); } diff --git a/public/app/containers/Teams/TeamSettings.tsx b/public/app/containers/Teams/TeamSettings.tsx index 142088a5d1e..0de60a0b16c 100644 --- a/public/app/containers/Teams/TeamSettings.tsx +++ b/public/app/containers/Teams/TeamSettings.tsx @@ -1,11 +1,11 @@ import React from 'react'; import { hot } from 'react-hot-loader'; import { observer } from 'mobx-react'; -import { ITeam } from 'app/stores/TeamsStore/TeamsStore'; +import { Team } from 'app/stores/TeamsStore/TeamsStore'; import { Label } from 'app/core/components/Forms/Forms'; interface Props { - team: ITeam; + team: Team; } @observer diff --git a/public/app/core/components/EmptyListCTA/EmptyListCTA.tsx b/public/app/core/components/EmptyListCTA/EmptyListCTA.tsx index 1583303dfa1..5ece360e36a 100644 --- a/public/app/core/components/EmptyListCTA/EmptyListCTA.tsx +++ b/public/app/core/components/EmptyListCTA/EmptyListCTA.tsx @@ -1,34 +1,37 @@ import React, { Component } from 'react'; -export interface IProps { - model: any; +export interface Props { + model: any; } -class EmptyListCTA extends Component { - render() { - const { - title, - buttonIcon, - buttonLink, - buttonTitle, - proTip, - proTipLink, - proTipLinkTitle, - proTipTarget - } = this.props.model; - return ( -
-
{title}
- {buttonTitle} -
- ProTip: {proTip} - {proTipLinkTitle} -
-
- ); - } +class EmptyListCTA extends Component { + render() { + const { + title, + buttonIcon, + buttonLink, + buttonTitle, + proTip, + proTipLink, + proTipLinkTitle, + proTipTarget, + } = this.props.model; + return ( +
+
{title}
+ + + {buttonTitle} + +
+ ProTip: {proTip} + + {proTipLinkTitle} + +
+
+ ); + } } export default EmptyListCTA; diff --git a/public/app/core/components/PageHeader/PageHeader.tsx b/public/app/core/components/PageHeader/PageHeader.tsx index f998cb9981f..1d744b7e609 100644 --- a/public/app/core/components/PageHeader/PageHeader.tsx +++ b/public/app/core/components/PageHeader/PageHeader.tsx @@ -5,7 +5,7 @@ import classNames from 'classnames'; import appEvents from 'app/core/app_events'; import { toJS } from 'mobx'; -export interface IProps { +export interface Props { model: NavModel; } @@ -82,7 +82,7 @@ const Navigation = ({ main }: { main: NavModelItem }) => { }; @observer -export default class PageHeader extends React.Component { +export default class PageHeader extends React.Component { constructor(props) { super(props); } diff --git a/public/app/core/components/PasswordStrength.tsx b/public/app/core/components/PasswordStrength.tsx index 8f92b18445c..1d676a00a37 100644 --- a/public/app/core/components/PasswordStrength.tsx +++ b/public/app/core/components/PasswordStrength.tsx @@ -1,32 +1,31 @@ import React from 'react'; -export interface IProps { +export interface Props { password: string; } -export class PasswordStrength extends React.Component { - +export class PasswordStrength extends React.Component { constructor(props) { super(props); } render() { const { password } = this.props; - let strengthText = "strength: strong like a bull."; - let strengthClass = "password-strength-good"; + let strengthText = 'strength: strong like a bull.'; + let strengthClass = 'password-strength-good'; if (!password) { return null; } if (password.length <= 8) { - strengthText = "strength: you can do better."; - strengthClass = "password-strength-ok"; + strengthText = 'strength: you can do better.'; + strengthClass = 'password-strength-ok'; } if (password.length < 4) { - strengthText = "strength: weak sauce."; - strengthClass = "password-strength-bad"; + strengthText = 'strength: weak sauce.'; + strengthClass = 'password-strength-bad'; } return ( @@ -36,5 +35,3 @@ export class PasswordStrength extends React.Component { ); } } - - diff --git a/public/app/core/components/Permissions/DisabledPermissionsListItem.tsx b/public/app/core/components/Permissions/DisabledPermissionsListItem.tsx index bbb9754fe0d..d65595dae66 100644 --- a/public/app/core/components/Permissions/DisabledPermissionsListItem.tsx +++ b/public/app/core/components/Permissions/DisabledPermissionsListItem.tsx @@ -2,11 +2,11 @@ import React, { Component } from 'react'; import DescriptionPicker from 'app/core/components/Picker/DescriptionPicker'; import { permissionOptions } from 'app/stores/PermissionsStore/PermissionsStore'; -export interface IProps { +export interface Props { item: any; } -export default class DisabledPermissionListItem extends Component { +export default class DisabledPermissionListItem extends Component { render() { const { item } = this.props; diff --git a/public/app/core/components/Permissions/Permissions.tsx b/public/app/core/components/Permissions/Permissions.tsx index dbdc1682f6b..d17899c891f 100644 --- a/public/app/core/components/Permissions/Permissions.tsx +++ b/public/app/core/components/Permissions/Permissions.tsx @@ -20,7 +20,7 @@ export interface DashboardAcl { sortRank?: number; } -export interface IProps { +export interface Props { dashboardId: number; folderInfo?: FolderInfo; permissions?: any; @@ -29,7 +29,7 @@ export interface IProps { } @observer -class Permissions extends Component { +class Permissions extends Component { constructor(props) { super(props); const { dashboardId, isFolder, folderInfo } = this.props; diff --git a/public/app/core/components/Permissions/PermissionsList.tsx b/public/app/core/components/Permissions/PermissionsList.tsx index a77235ecc30..7e64de012e4 100644 --- a/public/app/core/components/Permissions/PermissionsList.tsx +++ b/public/app/core/components/Permissions/PermissionsList.tsx @@ -4,7 +4,7 @@ import DisabledPermissionsListItem from './DisabledPermissionsListItem'; import { observer } from 'mobx-react'; import { FolderInfo } from './FolderInfo'; -export interface IProps { +export interface Props { permissions: any[]; removeItem: any; permissionChanged: any; @@ -13,7 +13,7 @@ export interface IProps { } @observer -class PermissionsList extends Component { +class PermissionsList extends Component { render() { const { permissions, removeItem, permissionChanged, fetching, folderInfo } = this.props; diff --git a/public/app/core/components/Picker/DescriptionOption.tsx b/public/app/core/components/Picker/DescriptionOption.tsx index 12a1fdd9163..1bcb7100489 100644 --- a/public/app/core/components/Picker/DescriptionOption.tsx +++ b/public/app/core/components/Picker/DescriptionOption.tsx @@ -1,6 +1,6 @@ import React, { Component } from 'react'; -export interface IProps { +export interface Props { onSelect: any; onFocus: any; option: any; @@ -8,7 +8,7 @@ export interface IProps { className: any; } -class DescriptionOption extends Component { +class DescriptionOption extends Component { constructor(props) { super(props); this.handleMouseDown = this.handleMouseDown.bind(this); diff --git a/public/app/core/components/Picker/PickerOption.tsx b/public/app/core/components/Picker/PickerOption.tsx index 1b32adac572..f30a7c06d10 100644 --- a/public/app/core/components/Picker/PickerOption.tsx +++ b/public/app/core/components/Picker/PickerOption.tsx @@ -1,6 +1,6 @@ import React, { Component } from 'react'; -export interface IProps { +export interface Props { onSelect: any; onFocus: any; option: any; @@ -8,7 +8,7 @@ export interface IProps { className: any; } -class UserPickerOption extends Component { +class UserPickerOption extends Component { constructor(props) { super(props); this.handleMouseDown = this.handleMouseDown.bind(this); diff --git a/public/app/core/components/TagFilter/TagBadge.tsx b/public/app/core/components/TagFilter/TagBadge.tsx index e5c2e357a58..d93b5fd1e74 100644 --- a/public/app/core/components/TagFilter/TagBadge.tsx +++ b/public/app/core/components/TagFilter/TagBadge.tsx @@ -1,14 +1,14 @@ import React from 'react'; import tags from 'app/core/utils/tags'; -export interface IProps { +export interface Props { label: string; removeIcon: boolean; count: number; onClick: any; } -export class TagBadge extends React.Component { +export class TagBadge extends React.Component { constructor(props) { super(props); this.onClick = this.onClick.bind(this); diff --git a/public/app/core/components/TagFilter/TagFilter.tsx b/public/app/core/components/TagFilter/TagFilter.tsx index 0b6058f3dd2..84f3e1819cd 100644 --- a/public/app/core/components/TagFilter/TagFilter.tsx +++ b/public/app/core/components/TagFilter/TagFilter.tsx @@ -4,13 +4,13 @@ import { Async } from 'react-select'; import { TagValue } from './TagValue'; import { TagOption } from './TagOption'; -export interface IProps { +export interface Props { tags: string[]; tagOptions: () => any; onSelect: (tag: string) => void; } -export class TagFilter extends React.Component { +export class TagFilter extends React.Component { inlineTags: boolean; constructor(props) { diff --git a/public/app/core/components/TagFilter/TagOption.tsx b/public/app/core/components/TagFilter/TagOption.tsx index 402544dd5f3..5938c98f870 100644 --- a/public/app/core/components/TagFilter/TagOption.tsx +++ b/public/app/core/components/TagFilter/TagOption.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { TagBadge } from './TagBadge'; -export interface IProps { +export interface Props { onSelect: any; onFocus: any; option: any; @@ -9,7 +9,7 @@ export interface IProps { className: any; } -export class TagOption extends React.Component { +export class TagOption extends React.Component { constructor(props) { super(props); this.handleMouseDown = this.handleMouseDown.bind(this); diff --git a/public/app/core/components/TagFilter/TagValue.tsx b/public/app/core/components/TagFilter/TagValue.tsx index 2e7819951f2..ca8ca9e4fba 100644 --- a/public/app/core/components/TagFilter/TagValue.tsx +++ b/public/app/core/components/TagFilter/TagValue.tsx @@ -1,14 +1,14 @@ import React from 'react'; import { TagBadge } from './TagBadge'; -export interface IProps { +export interface Props { value: any; className: any; onClick: any; onRemove: any; } -export class TagValue extends React.Component { +export class TagValue extends React.Component { constructor(props) { super(props); this.onClick = this.onClick.bind(this); diff --git a/public/app/core/components/Tooltip/Popover.tsx b/public/app/core/components/Tooltip/Popover.tsx index 4dc25d34130..ee86d07fb53 100644 --- a/public/app/core/components/Tooltip/Popover.tsx +++ b/public/app/core/components/Tooltip/Popover.tsx @@ -2,11 +2,11 @@ import withTooltip from './withTooltip'; import { Target } from 'react-popper'; -interface IPopoverProps { +interface PopoverProps { tooltipSetState: (prevState: object) => void; } -class Popover extends React.Component { +class Popover extends React.Component { constructor(props) { super(props); this.toggleTooltip = this.toggleTooltip.bind(this); diff --git a/public/app/core/components/Tooltip/Tooltip.tsx b/public/app/core/components/Tooltip/Tooltip.tsx index ae4093ea3f1..a265c8487d3 100644 --- a/public/app/core/components/Tooltip/Tooltip.tsx +++ b/public/app/core/components/Tooltip/Tooltip.tsx @@ -2,11 +2,11 @@ import withTooltip from './withTooltip'; import { Target } from 'react-popper'; -interface ITooltipProps { +interface TooltipProps { tooltipSetState: (prevState: object) => void; } -class Tooltip extends React.Component { +class Tooltip extends React.Component { constructor(props) { super(props); this.showTooltip = this.showTooltip.bind(this); diff --git a/public/app/core/components/colorpicker/ColorPalette.tsx b/public/app/core/components/colorpicker/ColorPalette.tsx index 07b25a32046..edb2629d16d 100644 --- a/public/app/core/components/colorpicker/ColorPalette.tsx +++ b/public/app/core/components/colorpicker/ColorPalette.tsx @@ -1,12 +1,12 @@ import React from 'react'; import { sortedColors } from 'app/core/utils/colors'; -export interface IProps { +export interface Props { color: string; onColorSelect: (c: string) => void; } -export class ColorPalette extends React.Component { +export class ColorPalette extends React.Component { paletteColors: string[]; constructor(props) { @@ -29,7 +29,8 @@ export class ColorPalette extends React.Component { key={paletteColor} className={'pointer fa ' + cssClass} style={{ color: paletteColor }} - onClick={this.onColorSelect(paletteColor)}> + onClick={this.onColorSelect(paletteColor)} + >   ); @@ -41,4 +42,3 @@ export class ColorPalette extends React.Component { ); } } - diff --git a/public/app/core/components/colorpicker/ColorPicker.tsx b/public/app/core/components/colorpicker/ColorPicker.tsx index dbba75636d0..c492d3829ca 100644 --- a/public/app/core/components/colorpicker/ColorPicker.tsx +++ b/public/app/core/components/colorpicker/ColorPicker.tsx @@ -5,12 +5,12 @@ import Drop from 'tether-drop'; import { ColorPickerPopover } from './ColorPickerPopover'; import { react2AngularDirective } from 'app/core/utils/react2angular'; -export interface IProps { +export interface Props { color: string; onChange: (c: string) => void; } -export class ColorPicker extends React.Component { +export class ColorPicker extends React.Component { pickerElem: any; colorPickerDrop: any; diff --git a/public/app/core/components/colorpicker/ColorPickerPopover.tsx b/public/app/core/components/colorpicker/ColorPickerPopover.tsx index 360c3fdd5c4..ac7dd6a2738 100644 --- a/public/app/core/components/colorpicker/ColorPickerPopover.tsx +++ b/public/app/core/components/colorpicker/ColorPickerPopover.tsx @@ -6,12 +6,12 @@ import { SpectrumPicker } from './SpectrumPicker'; const DEFAULT_COLOR = '#000000'; -export interface IProps { +export interface Props { color: string; onColorSelect: (c: string) => void; } -export class ColorPickerPopover extends React.Component { +export class ColorPickerPopover extends React.Component { pickerNavElem: any; constructor(props) { @@ -19,7 +19,7 @@ export class ColorPickerPopover extends React.Component { this.state = { tab: 'palette', color: this.props.color || DEFAULT_COLOR, - colorString: this.props.color || DEFAULT_COLOR + colorString: this.props.color || DEFAULT_COLOR, }; } @@ -32,7 +32,7 @@ export class ColorPickerPopover extends React.Component { if (newColor.isValid()) { this.setState({ color: newColor.toString(), - colorString: newColor.toString() + colorString: newColor.toString(), }); this.props.onColorSelect(color); } @@ -50,7 +50,7 @@ export class ColorPickerPopover extends React.Component { onColorStringChange(e) { let colorString = e.target.value; this.setState({ - colorString: colorString + colorString: colorString, }); let newColor = tinycolor(colorString); @@ -71,11 +71,11 @@ export class ColorPickerPopover extends React.Component { componentDidMount() { this.pickerNavElem.find('li:first').addClass('active'); - this.pickerNavElem.on('show', (e) => { + this.pickerNavElem.on('show', e => { // use href attr (#name => name) let tab = e.target.hash.slice(1); this.setState({ - tab: tab + tab: tab, }); }); } @@ -97,19 +97,24 @@ export class ColorPickerPopover extends React.Component {
-
- {currentTab} -
+
{currentTab}
- - +
); diff --git a/public/app/core/components/colorpicker/SeriesColorPicker.tsx b/public/app/core/components/colorpicker/SeriesColorPicker.tsx index 3b24b9a4661..b514899e2e2 100644 --- a/public/app/core/components/colorpicker/SeriesColorPicker.tsx +++ b/public/app/core/components/colorpicker/SeriesColorPicker.tsx @@ -2,13 +2,13 @@ import React from 'react'; import { ColorPickerPopover } from './ColorPickerPopover'; import { react2AngularDirective } from 'app/core/utils/react2angular'; -export interface IProps { +export interface Props { series: any; onColorChange: (color: string) => void; onToggleAxis: () => void; } -export class SeriesColorPicker extends React.Component { +export class SeriesColorPicker extends React.Component { constructor(props) { super(props); this.onColorChange = this.onColorChange.bind(this); diff --git a/public/app/core/components/colorpicker/SpectrumPicker.tsx b/public/app/core/components/colorpicker/SpectrumPicker.tsx index eef04545308..e8a30e8c460 100644 --- a/public/app/core/components/colorpicker/SpectrumPicker.tsx +++ b/public/app/core/components/colorpicker/SpectrumPicker.tsx @@ -3,13 +3,13 @@ import _ from 'lodash'; import $ from 'jquery'; import 'vendor/spectrum'; -export interface IProps { +export interface Props { color: string; options: object; onColorSelect: (c: string) => void; } -export class SpectrumPicker extends React.Component { +export class SpectrumPicker extends React.Component { elem: any; isMoving: boolean; @@ -29,14 +29,17 @@ export class SpectrumPicker extends React.Component { } componentDidMount() { - let spectrumOptions = _.assignIn({ - flat: true, - showAlpha: true, - showButtons: false, - color: this.props.color, - appendTo: this.elem, - move: this.onSpectrumMove, - }, this.props.options); + let spectrumOptions = _.assignIn( + { + flat: true, + showAlpha: true, + showButtons: false, + color: this.props.color, + appendTo: this.elem, + move: this.onSpectrumMove, + }, + this.props.options + ); this.elem.spectrum(spectrumOptions); this.elem.spectrum('show'); @@ -64,9 +67,6 @@ export class SpectrumPicker extends React.Component { } render() { - return ( -
- ); + return
; } } - diff --git a/public/app/stores/AlertListStore/AlertListStore.ts b/public/app/stores/AlertListStore/AlertListStore.ts index 7d60ce04180..ec27565a1a1 100644 --- a/public/app/stores/AlertListStore/AlertListStore.ts +++ b/public/app/stores/AlertListStore/AlertListStore.ts @@ -1,13 +1,13 @@ import { types, getEnv, flow } from 'mobx-state-tree'; -import { AlertRule } from './AlertRule'; +import { AlertRule as AlertRuleModel } from './AlertRule'; import { setStateFields } from './helpers'; -type IAlertRuleType = typeof AlertRule.Type; -export interface IAlertRule extends IAlertRuleType {} +type AlertRuleType = typeof AlertRuleModel.Type; +export interface AlertRule extends AlertRuleType {} export const AlertListStore = types .model('AlertListStore', { - rules: types.array(AlertRule), + rules: types.array(AlertRuleModel), stateFilter: types.optional(types.string, 'all'), search: types.optional(types.string, ''), }) @@ -38,7 +38,7 @@ export const AlertListStore = types } } - self.rules.push(AlertRule.create(rule)); + self.rules.push(AlertRuleModel.create(rule)); } }), setSearchQuery(query: string) { diff --git a/public/app/stores/NavStore/NavStore.ts b/public/app/stores/NavStore/NavStore.ts index c69c32befa8..bef53b828b6 100644 --- a/public/app/stores/NavStore/NavStore.ts +++ b/public/app/stores/NavStore/NavStore.ts @@ -1,7 +1,7 @@ import _ from 'lodash'; import { types, getEnv } from 'mobx-state-tree'; import { NavItem } from './NavItem'; -import { ITeam } from '../TeamsStore/TeamsStore'; +import { Team } from '../TeamsStore/TeamsStore'; export const NavStore = types .model('NavStore', { @@ -117,7 +117,7 @@ export const NavStore = types self.main = NavItem.create(main); }, - initTeamPage(team: ITeam, tab: string, isSyncEnabled: boolean) { + initTeamPage(team: Team, tab: string, isSyncEnabled: boolean) { let main = { img: team.avatarUrl, id: 'team-' + team.id, diff --git a/public/app/stores/RootStore/RootStore.ts b/public/app/stores/RootStore/RootStore.ts index 8a915d20ef1..bb85a85d9dd 100644 --- a/public/app/stores/RootStore/RootStore.ts +++ b/public/app/stores/RootStore/RootStore.ts @@ -34,5 +34,5 @@ export const RootStore = types.model({ }), }); -type IRootStoreType = typeof RootStore.Type; -export interface IRootStore extends IRootStoreType {} +type RootStoreType = typeof RootStore.Type; +export interface RootStoreInterface extends RootStoreType {} diff --git a/public/app/stores/TeamsStore/TeamsStore.ts b/public/app/stores/TeamsStore/TeamsStore.ts index 01cdca895d4..1aec4a1433c 100644 --- a/public/app/stores/TeamsStore/TeamsStore.ts +++ b/public/app/stores/TeamsStore/TeamsStore.ts @@ -1,6 +1,6 @@ import { types, getEnv, flow } from 'mobx-state-tree'; -export const TeamMember = types.model('TeamMember', { +export const TeamMemberModel = types.model('TeamMember', { userId: types.identifier(types.number), teamId: types.number, avatarUrl: types.string, @@ -8,18 +8,18 @@ export const TeamMember = types.model('TeamMember', { login: types.string, }); -type TeamMemberType = typeof TeamMember.Type; -export interface ITeamMember extends TeamMemberType {} +type TeamMemberType = typeof TeamMemberModel.Type; +export interface TeamMember extends TeamMemberType {} -export const TeamGroup = types.model('TeamGroup', { +export const TeamGroupModel = types.model('TeamGroup', { groupId: types.identifier(types.string), teamId: types.number, }); -type TeamGroupType = typeof TeamGroup.Type; -export interface ITeamGroup extends TeamGroupType {} +type TeamGroupType = typeof TeamGroupModel.Type; +export interface TeamGroup extends TeamGroupType {} -export const Team = types +export const TeamModel = types .model('Team', { id: types.identifier(types.number), name: types.string, @@ -27,8 +27,8 @@ export const Team = types email: types.string, memberCount: types.number, search: types.optional(types.string, ''), - members: types.optional(types.map(TeamMember), {}), - groups: types.optional(types.map(TeamGroup), {}), + members: types.optional(types.map(TeamMemberModel), {}), + groups: types.optional(types.map(TeamGroupModel), {}), }) .views(self => ({ get filteredMembers() { @@ -67,11 +67,11 @@ export const Team = types self.members.clear(); for (let member of rsp) { - self.members.set(member.userId.toString(), TeamMember.create(member)); + self.members.set(member.userId.toString(), TeamMemberModel.create(member)); } }), - removeMember: flow(function* load(member: ITeamMember) { + removeMember: flow(function* load(member: TeamMember) { const backendSrv = getEnv(self).backendSrv; yield backendSrv.delete(`/api/teams/${self.id}/members/${member.userId}`); // remove from store map @@ -89,7 +89,7 @@ export const Team = types self.groups.clear(); for (let group of rsp) { - self.groups.set(group.groupId, TeamGroup.create(group)); + self.groups.set(group.groupId, TeamGroupModel.create(group)); } }), @@ -98,7 +98,7 @@ export const Team = types yield backendSrv.post(`/api/teams/${self.id}/groups`, { groupId: groupId }); self.groups.set( groupId, - TeamGroup.create({ + TeamGroupModel.create({ teamId: self.id, groupId: groupId, }) @@ -112,12 +112,12 @@ export const Team = types }), })); -type TeamType = typeof Team.Type; -export interface ITeam extends TeamType {} +type TeamType = typeof TeamModel.Type; +export interface Team extends TeamType {} export const TeamsStore = types .model('TeamsStore', { - map: types.map(Team), + map: types.map(TeamModel), search: types.optional(types.string, ''), }) .views(self => ({ @@ -136,7 +136,7 @@ export const TeamsStore = types self.map.clear(); for (let team of rsp.teams) { - self.map.set(team.id.toString(), Team.create(team)); + self.map.set(team.id.toString(), TeamModel.create(team)); } }), @@ -151,6 +151,6 @@ export const TeamsStore = types const backendSrv = getEnv(self).backendSrv; const team = yield backendSrv.get(`/api/teams/${id}`); - self.map.set(id, Team.create(team)); + self.map.set(id, TeamModel.create(team)); }), })); diff --git a/public/app/stores/store.ts b/public/app/stores/store.ts index dfbd8141198..10acbfe4907 100644 --- a/public/app/stores/store.ts +++ b/public/app/stores/store.ts @@ -1,7 +1,7 @@ -import { RootStore, IRootStore } from './RootStore/RootStore'; +import { RootStore, RootStoreInterface } from './RootStore/RootStore'; import config from 'app/core/config'; -export let store: IRootStore; +export let store: RootStoreInterface; export function createStore(services) { store = RootStore.create( diff --git a/tslint.json b/tslint.json index 22e123e0364..9a72f9ccebc 100644 --- a/tslint.json +++ b/tslint.json @@ -1,5 +1,6 @@ { "rules": { + "interface-name": [true, "never-prefix"], "no-string-throw": true, "no-unused-expression": true, "no-unused-variable": false, diff --git a/yarn.lock b/yarn.lock index dd1cde4e698..fb593043288 100644 --- a/yarn.lock +++ b/yarn.lock @@ -11454,6 +11454,12 @@ tslint-loader@^3.5.3: rimraf "^2.4.4" semver "^5.3.0" +tslint-react@^3.6.0: + version "3.6.0" + resolved "https://registry.yarnpkg.com/tslint-react/-/tslint-react-3.6.0.tgz#7f462c95c4a0afaae82507f06517ff02942196a1" + dependencies: + tsutils "^2.13.1" + tslint@^5.8.0: version "5.10.0" resolved "https://registry.yarnpkg.com/tslint/-/tslint-5.10.0.tgz#11e26bccb88afa02dd0d9956cae3d4540b5f54c3" @@ -11477,6 +11483,12 @@ tsutils@^2.12.1: dependencies: tslib "^1.8.1" +tsutils@^2.13.1: + version "2.29.0" + resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-2.29.0.tgz#32b488501467acbedd4b85498673a0812aca0b99" + dependencies: + tslib "^1.8.1" + tty-browserify@0.0.0: version "0.0.0" resolved "https://registry.yarnpkg.com/tty-browserify/-/tty-browserify-0.0.0.tgz#a157ba402da24e9bf957f9aa69d524eed42901a6"