From 0cfb96740422172ec00e17682e00b2f2cd60b475 Mon Sep 17 00:00:00 2001 From: Dominik Prokop Date: Wed, 18 Nov 2020 15:36:35 +0100 Subject: [PATCH] ESlint: React fixes part 1 (#29062) * Eslint: allign with latest grafana-eslint-config * fix ts * Fix react/jsx-key * Fix react/no-children-prop * Fix react/jsx-no-target-blank --- .eslintrc | 6 ++---- package.json | 1 + .../src/components/InfoBox/InfoBox.tsx | 2 +- .../src/components/Logs/LogDetailsRow.tsx | 1 + .../Logs/LogRowContextProvider.test.tsx | 6 +++++- .../src/components/Select/SelectBase.tsx | 2 +- .../grafana-ui/src/components/Table/Table.tsx | 3 ++- .../AppNotifications/AppNotificationItem.tsx | 5 +++-- .../core/components/ErrorPage/ErrorPage.tsx | 2 +- .../core/components/PageHeader/PageHeader.tsx | 4 ++-- .../admin/ldap/LdapConnectionStatus.tsx | 6 +++++- public/app/features/admin/ldap/LdapPage.tsx | 9 ++++++--- .../forms/SaveProvisionedDashboardForm.tsx | 1 + .../components/ShareModal/ShareLink.tsx | 4 ++-- .../components/ShareModal/ShareSnapshot.tsx | 2 +- .../dashboard/containers/DashboardPage.tsx | 8 +++----- .../dashgrid/PanelHeader/PanelHeader.tsx | 2 +- .../explore/NoDataSourceCallToAction.tsx | 2 +- .../components/ImportDashboardOverview.tsx | 1 + public/app/features/plugins/PluginPage.tsx | 18 +++++++----------- .../app/features/plugins/PluginsErrorsInfo.tsx | 6 +++++- .../cloudwatch/components/CloudWatchLink.tsx | 2 +- .../cloudwatch/components/LogsCheatSheet.tsx | 10 +++++----- .../components/ThrottlingErrorMessage.tsx | 2 ++ .../graphite/configuration/ConfigEditor.tsx | 2 +- .../prometheus/components/PromLink.tsx | 2 +- .../datasource/testdata/TestInfoTab.tsx | 2 +- .../gettingstarted/components/DocsCard.tsx | 7 ++++++- public/app/plugins/panel/news/NewsPanel.tsx | 2 +- 29 files changed, 70 insertions(+), 50 deletions(-) diff --git a/.eslintrc b/.eslintrc index 9d897ea4a08..6df70e8521f 100644 --- a/.eslintrc +++ b/.eslintrc @@ -12,13 +12,11 @@ "react-hooks/rules-of-hooks": "off", "react-hooks/exhaustive-deps": "off", "react/prop-types": "off", - "react/no-children-prop": "off", "react/no-unescaped-entities": "off", - "react/jsx-no-target-blank": "off", "react/display-name": "off", - "react/jsx-key": "off", "react/no-deprecated": "off", - "react/no-unknown-property": "off", + "react/no-unknown-property": "off", + "react/no-children-prop": "off", "react/no-find-dom-node": "off", "react/no-render-return-value": "off" } diff --git a/package.json b/package.json index e52352e6277..04b066d525e 100644 --- a/package.json +++ b/package.json @@ -137,6 +137,7 @@ "eslint-config-prettier": "6.11.0", "eslint-plugin-jsdoc": "28.6.1", "eslint-plugin-prettier": "3.1.4", + "eslint-plugin-react": "7.21.5", "eslint-plugin-react-hooks": "4.1.2", "expect.js": "0.3.1", "expose-loader": "0.7.5", diff --git a/packages/grafana-ui/src/components/InfoBox/InfoBox.tsx b/packages/grafana-ui/src/components/InfoBox/InfoBox.tsx index f1db3af3b7f..e635a459127 100644 --- a/packages/grafana-ui/src/components/InfoBox/InfoBox.tsx +++ b/packages/grafana-ui/src/components/InfoBox/InfoBox.tsx @@ -46,7 +46,7 @@ export const InfoBox = React.memo(
{children}
{url && ( - + {urlTitle || 'Read more'} )} diff --git a/packages/grafana-ui/src/components/Logs/LogDetailsRow.tsx b/packages/grafana-ui/src/components/Logs/LogDetailsRow.tsx index f5b3cfaadab..53b089791d9 100644 --- a/packages/grafana-ui/src/components/Logs/LogDetailsRow.tsx +++ b/packages/grafana-ui/src/components/Logs/LogDetailsRow.tsx @@ -189,6 +189,7 @@ function FieldLink({ link }: FieldLinkProps) { { diff --git a/packages/grafana-ui/src/components/Logs/LogRowContextProvider.test.tsx b/packages/grafana-ui/src/components/Logs/LogRowContextProvider.test.tsx index 46650c9430f..df1f37dd78d 100644 --- a/packages/grafana-ui/src/components/Logs/LogRowContextProvider.test.tsx +++ b/packages/grafana-ui/src/components/Logs/LogRowContextProvider.test.tsx @@ -164,7 +164,11 @@ describe('LogRowContextProvider', () => { return <>; }); await act(async () => { - await mount(); + await mount( + + {mockedChildren} + + ); }); }); }); diff --git a/packages/grafana-ui/src/components/Select/SelectBase.tsx b/packages/grafana-ui/src/components/Select/SelectBase.tsx index 28547cee6ba..cae9329441a 100644 --- a/packages/grafana-ui/src/components/Select/SelectBase.tsx +++ b/packages/grafana-ui/src/components/Select/SelectBase.tsx @@ -273,7 +273,7 @@ export function SelectBase({ menuIsOpen, }) ); - return ; + return {indicatorChildren}; } return ; diff --git a/packages/grafana-ui/src/components/Table/Table.tsx b/packages/grafana-ui/src/components/Table/Table.tsx index b2202adeedc..97e9fe59b3c 100644 --- a/packages/grafana-ui/src/components/Table/Table.tsx +++ b/packages/grafana-ui/src/components/Table/Table.tsx @@ -195,8 +195,9 @@ export const Table: FC = memo((props: Props) => { {!noHeader && (
{headerGroups.map((headerGroup: HeaderGroup) => { + const { key, ...headerGroupProps } = headerGroup.getHeaderGroupProps(); return ( -
+
{headerGroup.headers.map((column: Column, index: number) => renderHeaderCell(column, tableStyles, data.fields[index]) )} diff --git a/public/app/core/components/AppNotifications/AppNotificationItem.tsx b/public/app/core/components/AppNotifications/AppNotificationItem.tsx index 849e15fba64..ded2186577e 100644 --- a/public/app/core/components/AppNotifications/AppNotificationItem.tsx +++ b/public/app/core/components/AppNotifications/AppNotificationItem.tsx @@ -26,9 +26,10 @@ export default class AppNotificationItem extends Component { onClearNotification(appNotification.id)} - /> + > + {appNotification.component || appNotification.text} + ); } } diff --git a/public/app/core/components/ErrorPage/ErrorPage.tsx b/public/app/core/components/ErrorPage/ErrorPage.tsx index c9740f40eb7..cdc228a0040 100644 --- a/public/app/core/components/ErrorPage/ErrorPage.tsx +++ b/public/app/core/components/ErrorPage/ErrorPage.tsx @@ -64,7 +64,7 @@ export class ErrorPage extends PureComponent {

If the error persists, seek help on the{' '} - + community site . diff --git a/public/app/core/components/PageHeader/PageHeader.tsx b/public/app/core/components/PageHeader/PageHeader.tsx index c16019a46ab..0f3c2ea85ae 100644 --- a/public/app/core/components/PageHeader/PageHeader.tsx +++ b/public/app/core/components/PageHeader/PageHeader.tsx @@ -51,7 +51,7 @@ const Navigation = ({ children }: { children: NavModelItem[] }) => { return (

diff --git a/public/app/features/admin/ldap/LdapConnectionStatus.tsx b/public/app/features/admin/ldap/LdapConnectionStatus.tsx index 6161c4bea56..7a28acf0b30 100644 --- a/public/app/features/admin/ldap/LdapConnectionStatus.tsx +++ b/public/app/features/admin/ldap/LdapConnectionStatus.tsx @@ -78,5 +78,9 @@ export const LdapErrorBox: FC = ({ ldapConnectionInfo
)); - return ; + return ( + + {errorElements} + + ); }; diff --git a/public/app/features/admin/ldap/LdapPage.tsx b/public/app/features/admin/ldap/LdapPage.tsx index 4420cd46b8f..37e9c0f13fe 100644 --- a/public/app/features/admin/ldap/LdapPage.tsx +++ b/public/app/features/admin/ldap/LdapPage.tsx @@ -86,7 +86,9 @@ export class LdapPage extends PureComponent { <> {ldapError && ldapError.title && (
- + + {ldapError.body} +
)} @@ -116,9 +118,10 @@ export class LdapPage extends PureComponent { + > + {userError.body} +
)} {ldapUser && } diff --git a/public/app/features/dashboard/components/SaveDashboard/forms/SaveProvisionedDashboardForm.tsx b/public/app/features/dashboard/components/SaveDashboard/forms/SaveProvisionedDashboardForm.tsx index 452d27cd02c..24089f3fd9a 100644 --- a/public/app/features/dashboard/components/SaveDashboard/forms/SaveProvisionedDashboardForm.tsx +++ b/public/app/features/dashboard/components/SaveDashboard/forms/SaveProvisionedDashboardForm.tsx @@ -40,6 +40,7 @@ export const SaveProvisionedDashboardForm: React.FC = ({ className="external-link" href="http://docs.grafana.org/administration/provisioning/#dashboards" target="_blank" + rel="noreferrer" > documentation {' '} diff --git a/public/app/features/dashboard/components/ShareModal/ShareLink.tsx b/public/app/features/dashboard/components/ShareModal/ShareLink.tsx index 10e2e22f9df..6b8b9c1b06e 100644 --- a/public/app/features/dashboard/components/ShareModal/ShareLink.tsx +++ b/public/app/features/dashboard/components/ShareModal/ShareLink.tsx @@ -154,7 +154,7 @@ export class ShareLink extends PureComponent { {panel && config.rendererAvailable && (
- + Direct link rendered image
@@ -166,7 +166,7 @@ export class ShareLink extends PureComponent { Grafana Image Renderer plugin diff --git a/public/app/features/dashboard/components/ShareModal/ShareSnapshot.tsx b/public/app/features/dashboard/components/ShareModal/ShareSnapshot.tsx index 3f01b9a41ff..b2203fa012e 100644 --- a/public/app/features/dashboard/components/ShareModal/ShareSnapshot.tsx +++ b/public/app/features/dashboard/components/ShareModal/ShareSnapshot.tsx @@ -272,7 +272,7 @@ export class ShareSnapshot extends PureComponent { <>
- + {snapshotUrl}
diff --git a/public/app/features/dashboard/containers/DashboardPage.tsx b/public/app/features/dashboard/containers/DashboardPage.tsx index 726a4761354..ca7092201ac 100644 --- a/public/app/features/dashboard/containers/DashboardPage.tsx +++ b/public/app/features/dashboard/containers/DashboardPage.tsx @@ -257,11 +257,9 @@ export class DashboardPage extends PureComponent { return (
- + + {getMessageFromError(initError.error)} +
); } diff --git a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx index 2f515bdb03b..a3773b4ce03 100644 --- a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx +++ b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx @@ -140,7 +140,7 @@ export class PanelHeader extends PureComponent {
) : ( - + )} diff --git a/public/app/features/explore/NoDataSourceCallToAction.tsx b/public/app/features/explore/NoDataSourceCallToAction.tsx index b3d837d14d6..cd7aaccaca4 100644 --- a/public/app/features/explore/NoDataSourceCallToAction.tsx +++ b/public/app/features/explore/NoDataSourceCallToAction.tsx @@ -14,7 +14,7 @@ export const NoDataSourceCallToAction = () => { Learn more diff --git a/public/app/features/manage-dashboards/components/ImportDashboardOverview.tsx b/public/app/features/manage-dashboards/components/ImportDashboardOverview.tsx index 02d4eef20cb..d7d4a97483b 100644 --- a/public/app/features/manage-dashboards/components/ImportDashboardOverview.tsx +++ b/public/app/features/manage-dashboards/components/ImportDashboardOverview.tsx @@ -60,6 +60,7 @@ class ImportDashboardOverviewUnConnected extends PureComponent { href={`https://grafana.com/dashboards/${dashboard.gnetId}`} className="external-link" target="_blank" + rel="noreferrer" > Grafana.com diff --git a/public/app/features/plugins/PluginPage.tsx b/public/app/features/plugins/PluginPage.tsx index e2dbca104f9..6176e22034e 100644 --- a/public/app/features/plugins/PluginPage.tsx +++ b/public/app/features/plugins/PluginPage.tsx @@ -287,7 +287,7 @@ class PluginPage extends PureComponent { {info.links.map(link => { return (
  • - + {link.name}
    • @@ -346,16 +346,12 @@ class PluginPage extends PureComponent {
    {plugin.loadError && ( - - Check the server startup logs for more information.
    - If this plugin was loaded from git, make sure it was compiled. - - } - /> + + <> + Check the server startup logs for more information.
    + If this plugin was loaded from git, make sure it was compiled. + +     )} {this.renderPluginNotice()} {this.renderBody()} diff --git a/public/app/features/plugins/PluginsErrorsInfo.tsx b/public/app/features/plugins/PluginsErrorsInfo.tsx index 3fd1e1f6055..9473c327ecc 100644 --- a/public/app/features/plugins/PluginsErrorsInfo.tsx +++ b/public/app/features/plugins/PluginsErrorsInfo.tsx @@ -49,7 +49,11 @@ export const PluginsErrorsInfoUnconnected: React.FC = ({

    We have encountered{' '} - + data source backend plugins {' '} that are unsigned. Grafana Labs cannot guarantee the integrity of unsigned plugins and recommends using signed diff --git a/public/app/plugins/datasource/cloudwatch/components/CloudWatchLink.tsx b/public/app/plugins/datasource/cloudwatch/components/CloudWatchLink.tsx index 768e7c806cb..c360e604409 100644 --- a/public/app/plugins/datasource/cloudwatch/components/CloudWatchLink.tsx +++ b/public/app/plugins/datasource/cloudwatch/components/CloudWatchLink.tsx @@ -58,7 +58,7 @@ export default class CloudWatchLink extends Component { render() { const { href } = this.state; return ( - + CloudWatch Logs Insights ); diff --git a/public/app/plugins/datasource/cloudwatch/components/LogsCheatSheet.tsx b/public/app/plugins/datasource/cloudwatch/components/LogsCheatSheet.tsx index 1904e60d3fb..af083254e67 100644 --- a/public/app/plugins/datasource/cloudwatch/components/LogsCheatSheet.tsx +++ b/public/app/plugins/datasource/cloudwatch/components/LogsCheatSheet.tsx @@ -237,13 +237,13 @@ export default class LogsCheatSheet extends PureComponent

    CloudWatch Logs Cheat Sheet

    - {CLIQ_EXAMPLES.map(cat => ( -
    + {CLIQ_EXAMPLES.map((cat, i) => ( +
    {cat.category}
    - {cat.examples.map((item, i) => ( -
    + {cat.examples.map((item, j) => ( +

    {item.title}

    - {this.renderExpression(item.expr, `item-${i}`)} + {this.renderExpression(item.expr, `item-${j}`)}
    ))}
    diff --git a/public/app/plugins/datasource/cloudwatch/components/ThrottlingErrorMessage.tsx b/public/app/plugins/datasource/cloudwatch/components/ThrottlingErrorMessage.tsx index 11fb3def37a..7dd2866faf8 100644 --- a/public/app/plugins/datasource/cloudwatch/components/ThrottlingErrorMessage.tsx +++ b/public/app/plugins/datasource/cloudwatch/components/ThrottlingErrorMessage.tsx @@ -9,6 +9,7 @@ export const ThrottlingErrorMessage: FunctionComponent = ({ region }) => Please visit the  @@ -17,6 +18,7 @@ export const ThrottlingErrorMessage: FunctionComponent = ({ region }) =>  to request a quota increase or see our  diff --git a/public/app/plugins/datasource/graphite/configuration/ConfigEditor.tsx b/public/app/plugins/datasource/graphite/configuration/ConfigEditor.tsx index 8e22d7bce0b..7a268bbbb08 100644 --- a/public/app/plugins/datasource/graphite/configuration/ConfigEditor.tsx +++ b/public/app/plugins/datasource/graphite/configuration/ConfigEditor.tsx @@ -31,7 +31,7 @@ export class ConfigEditor extends PureComponent {

    There are different types of Graphite compatible backends. Here you can specify the type you are using. If you are using{' '} - + Metrictank {' '} then select that here. This will enable Metrictank specific features like query processing meta data. Metrictank diff --git a/public/app/plugins/datasource/prometheus/components/PromLink.tsx b/public/app/plugins/datasource/prometheus/components/PromLink.tsx index 917a128422e..18cc7e9c81c 100644 --- a/public/app/plugins/datasource/prometheus/components/PromLink.tsx +++ b/public/app/plugins/datasource/prometheus/components/PromLink.tsx @@ -64,7 +64,7 @@ export default class PromLink extends Component { const { href } = this.state; return ( - + Prometheus ); diff --git a/public/app/plugins/datasource/testdata/TestInfoTab.tsx b/public/app/plugins/datasource/testdata/TestInfoTab.tsx index 6fe05a6fdef..1b4d48690ce 100644 --- a/public/app/plugins/datasource/testdata/TestInfoTab.tsx +++ b/public/app/plugins/datasource/testdata/TestInfoTab.tsx @@ -21,7 +21,7 @@ export class TestInfoTab extends PureComponent { className="btn btn-inverse" href="https://github.com/grafana/grafana/tree/master/devenv" target="_blank" - rel="noopener" + rel="noopener noreferrer" > GitHub diff --git a/public/app/plugins/panel/gettingstarted/components/DocsCard.tsx b/public/app/plugins/panel/gettingstarted/components/DocsCard.tsx index 4fa48f5b9c2..524e5e23703 100644 --- a/public/app/plugins/panel/gettingstarted/components/DocsCard.tsx +++ b/public/app/plugins/panel/gettingstarted/components/DocsCard.tsx @@ -24,7 +24,12 @@ export const DocsCard: FC = ({ card }) => {

    - + Learn how in the docs
    diff --git a/public/app/plugins/panel/news/NewsPanel.tsx b/public/app/plugins/panel/news/NewsPanel.tsx index 91139fac5eb..ecd6607da50 100755 --- a/public/app/plugins/panel/news/NewsPanel.tsx +++ b/public/app/plugins/panel/news/NewsPanel.tsx @@ -77,7 +77,7 @@ export class NewsPanel extends PureComponent { {news.map((item, index) => { return (