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
6 years ago · 0cfb967404
parent 4b711372c5
commit 0cfb967404
29 changed files with 70 additions and 50 deletions
--- 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"
      }
--- 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",
--- 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(
          </div>
          <div>{children}</div>
          {url && (
-            <a href={url} className={styles.docsLink} target="_blank">
+            <a href={url} className={styles.docsLink} target="_blank" rel="noreferrer">
              <Icon name="book" /> {urlTitle || 'Read more'}
            </a>
          )}
--- 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) {
    <a
      href={link.href}
      target={'_blank'}
+      rel="noreferrer"
      onClick={
        link.onClick
          ? event => {
--- 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(<LogRowContextProvider row={row} getRowContext={getRowContextMock} children={mockedChildren} />);
+        await mount(
+          <LogRowContextProvider row={row} getRowContext={getRowContextMock}>
+            {mockedChildren}
+          </LogRowContextProvider>
+        );
      });
    });
  });
--- 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<T>({
                  menuIsOpen,
                })
              );
-              return <IndicatorsContainer {...props} children={indicatorChildren} />;
+              return <IndicatorsContainer {...props}>{indicatorChildren}</IndicatorsContainer>;
            }

            return <IndicatorsContainer {...props} />;
--- 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<Props> = memo((props: Props) => {
          {!noHeader && (
            <div>
              {headerGroups.map((headerGroup: HeaderGroup) => {
+                const { key, ...headerGroupProps } = headerGroup.getHeaderGroupProps();
                return (
-                  <div className={tableStyles.thead} {...headerGroup.getHeaderGroupProps()}>
+                  <div className={tableStyles.thead} {...headerGroupProps} key={key}>
                    {headerGroup.headers.map((column: Column, index: number) =>
                      renderHeaderCell(column, tableStyles, data.fields[index])
                    )}
--- 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<Props> {
      <Alert
        severity={appNotification.severity}
        title={appNotification.title}
-        children={appNotification.component || appNotification.text}
        onRemove={() => onClearNotification(appNotification.id)}
-      />
+      >
+        {appNotification.component || appNotification.text}
+      </Alert>
    );
  }
 }
--- 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<Props> {
                      </p>
                      <p>
                        If the error persists, seek help on the{' '}
-                        <a href="https://community.grafana.com" target="_blank" className="error-link">
+                        <a href="https://community.grafana.com" target="_blank" rel="noreferrer" className="error-link">
                          community site
                        </a>
                        .
--- 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 (
    <nav>
-      <SelectNav customCss="page-header__select-nav" children={children} />
+      <SelectNav customCss="page-header__select-nav">{children}</SelectNav>
      <TabsBar className="page-header__tabs" hideBorder={true}>
        {children.map((child, index) => {
          return (
@ -147,7 +147,7 @@ export default class PageHeader extends React.Component<Props, any> {
        <div className="page-container">
          <div className="page-header">
            {this.renderHeaderTitle(main)}
-            {children && children.length && <Navigation children={children} />}
+            {children && children.length && <Navigation>{children}</Navigation>}
          </div>
        </div>
      </div>
--- a/public/app/features/admin/ldap/LdapConnectionStatus.tsx
+++ b/public/app/features/admin/ldap/LdapConnectionStatus.tsx
@ -78,5 +78,9 @@ export const LdapErrorBox: FC<LdapConnectionErrorProps> = ({ ldapConnectionInfo
    </div>
  ));

-  return <Alert title="Connection error" severity={AppNotificationSeverity.Error} children={errorElements} />;
+  return (
+    <Alert title="Connection error" severity={AppNotificationSeverity.Error}>
+      {errorElements}
+    </Alert>
+  );
 };
--- 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<Props, State> {
          <>
            {ldapError && ldapError.title && (
              <div className="gf-form-group">
-                <Alert title={ldapError.title} severity={AppNotificationSeverity.Error} children={ldapError.body} />
+                <Alert title={ldapError.title} severity={AppNotificationSeverity.Error}>
+                  {ldapError.body}
+                </Alert>
              </div>
            )}

@ -116,9 +118,10 @@ export class LdapPage extends PureComponent<Props, State> {
                <Alert
                  title={userError.title}
                  severity={AppNotificationSeverity.Error}
-                  children={userError.body}
                  onRemove={this.onClearUserError}
-                />
+                >
+                  {userError.body}
+                </Alert>
              </div>
            )}
            {ldapUser && <LdapUserInfo ldapUser={ldapUser} showAttributeMapping={true} />}
--- 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<SaveDashboardFormProps> = ({
              className="external-link"
              href="http://docs.grafana.org/administration/provisioning/#dashboards"
              target="_blank"
+              rel="noreferrer"
            >
              documentation
            </a>{' '}
--- 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<Props, State> {
            </div>
            {panel && config.rendererAvailable && (
              <div className="gf-form">
-                <a href={imageUrl} target="_blank" aria-label={selectors.linkToRenderedImage}>
+                <a href={imageUrl} target="_blank" rel="noreferrer" aria-label={selectors.linkToRenderedImage}>
                  <Icon name="camera" /> Direct link rendered image
                </a>
              </div>
@ -166,7 +166,7 @@ export class ShareLink extends PureComponent<Props, State> {
                  <a
                    href="https://grafana.com/grafana/plugins/grafana-image-renderer"
                    target="_blank"
-                    rel="noopener"
+                    rel="noopener noreferrer"
                    className="external-link"
                  >
                    Grafana Image Renderer plugin
--- 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<Props, State> {
      <>
        <div className="gf-form" style={{ marginTop: '40px' }}>
          <div className="gf-form-row">
-            <a href={snapshotUrl} className="large share-modal-link" target="_blank">
+            <a href={snapshotUrl} className="large share-modal-link" target="_blank" rel="noreferrer">
              <Icon name="external-link-alt" /> {snapshotUrl}
            </a>
            <br />
--- 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<Props, State> {

    return (
      <div className="dashboard-loading">
-        <Alert
-          severity={AppNotificationSeverity.Error}
-          title={initError.message}
-          children={getMessageFromError(initError.error)}
-        />
+        <Alert severity={AppNotificationSeverity.Error} title={initError.message}>
+          {getMessageFromError(initError.error)}
+        </Alert>
      </div>
    );
  }
--- 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<Props, State> {
            <Icon name={iconName} style={{ marginRight: '8px' }} />
          </div>
        ) : (
-          <a className="panel-info-notice" href={notice.link} target="_blank">
+          <a className="panel-info-notice" href={notice.link} target="_blank" rel="noreferrer">
            <Icon name={iconName} style={{ marginRight: '8px' }} />
          </a>
        )}
--- a/public/app/features/explore/NoDataSourceCallToAction.tsx
+++ b/public/app/features/explore/NoDataSourceCallToAction.tsx
@ -14,7 +14,7 @@ export const NoDataSourceCallToAction = () => {
      <a
        href="http://docs.grafana.org/administration/provisioning/#datasources?utm_source=explore"
        target="_blank"
-        rel="noopener"
+        rel="noreferrer"
        className="text-link"
      >
        Learn more
--- 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<Props, State> {
                  href={`https://grafana.com/dashboards/${dashboard.gnetId}`}
                  className="external-link"
                  target="_blank"
+                  rel="noreferrer"
                >
                  Grafana.com
                </a>
--- a/public/app/features/plugins/PluginPage.tsx
+++ b/public/app/features/plugins/PluginPage.tsx
@ -287,7 +287,7 @@ class PluginPage extends PureComponent<Props, State> {
          {info.links.map(link => {
            return (
              <li key={link.url}>
-                <a href={link.url} className="external-link" target="_blank" rel="noopener">
+                <a href={link.url} className="external-link" target="_blank" rel="noreferrer noopener">
                  {link.name}
                </a>
              </li>
@ -346,16 +346,12 @@ class PluginPage extends PureComponent<Props, State> {
            <div className="sidebar-container">
              <div className="sidebar-content">
                {plugin.loadError && (
-                  <Alert
-                    severity={AppNotificationSeverity.Error}
-                    title="Error Loading Plugin"
-                    children={
-                      <>
-                        Check the server startup logs for more information. <br />
-                        If this plugin was loaded from git, make sure it was compiled.
-                      </>
-                    }
-                  />
+                  <Alert severity={AppNotificationSeverity.Error} title="Error Loading Plugin">
+                    <>
+                      Check the server startup logs for more information. <br />
+                      If this plugin was loaded from git, make sure it was compiled.
+                    </>
+                  </Alert>
                )}
                {this.renderPluginNotice()}
                {this.renderBody()}
--- a/public/app/features/plugins/PluginsErrorsInfo.tsx
+++ b/public/app/features/plugins/PluginsErrorsInfo.tsx
@ -49,7 +49,11 @@ export const PluginsErrorsInfoUnconnected: React.FC<PluginsErrorsInfoProps> = ({
      <div>
        <p>
          We have encountered{' '}
-          <a href="https://grafana.com/docs/grafana/latest/developers/plugins/backend/" target="_blank">
+          <a
+            href="https://grafana.com/docs/grafana/latest/developers/plugins/backend/"
+            target="_blank"
+            rel="noreferrer"
+          >
            data source backend plugins
          </a>{' '}
          that are unsigned. Grafana Labs cannot guarantee the integrity of unsigned plugins and recommends using signed
--- 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<Props, State> {
  render() {
    const { href } = this.state;
    return (
-      <a href={href} target="_blank" rel="noopener">
+      <a href={href} target="_blank" rel="noopener noreferrer">
        <Icon name="share-alt" /> CloudWatch Logs Insights
      </a>
    );
--- 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<ExploreStartPageProps,
    return (
      <div>
        <h2>CloudWatch Logs Cheat Sheet</h2>
-        {CLIQ_EXAMPLES.map(cat => (
-          <div>
+        {CLIQ_EXAMPLES.map((cat, i) => (
+          <div key={`${cat.category}-${i}`}>
            <div className={`cheat-sheet-item__title ${cx(exampleCategory)}`}>{cat.category}</div>
-            {cat.examples.map((item, i) => (
-              <div className="cheat-sheet-item" key={`item-${i}`}>
+            {cat.examples.map((item, j) => (
+              <div className="cheat-sheet-item" key={`item-${j}`}>
                <h4>{item.title}</h4>
-                {this.renderExpression(item.expr, `item-${i}`)}
+                {this.renderExpression(item.expr, `item-${j}`)}
              </div>
            ))}
          </div>
--- 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<Props> = ({ region }) =>
    Please visit the&nbsp;
    <a
      target="_blank"
+      rel="noreferrer"
      className="text-link"
      href={`https://${region}.console.aws.amazon.com/servicequotas/home?region=${region}#!/services/monitoring/quotas/L-5E141212`}
    >
@ -17,6 +18,7 @@ export const ThrottlingErrorMessage: FunctionComponent<Props> = ({ region }) =>
    &nbsp;to request a quota increase or see our&nbsp;
    <a
      target="_blank"
+      rel="noreferrer"
      className="text-link"
      href={`https://grafana.com/docs/features/datasources/cloudwatch/#service-quotas`}
    >
--- 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<Props> {
      <p>
        There are different types of Graphite compatible backends. Here you can specify the type you are using. If you
        are using{' '}
-        <a href="https://github.com/grafana/metrictank" className="pointer" target="_blank">
+        <a href="https://github.com/grafana/metrictank" className="pointer" target="_blank" rel="noreferrer">
          Metrictank
        </a>{' '}
        then select that here. This will enable Metrictank specific features like query processing meta data. Metrictank
--- 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<Props, State> {
    const { href } = this.state;

    return (
-      <a href={href} target="_blank" rel="noopener">
+      <a href={href} target="_blank" rel="noopener noreferrer">
        Prometheus
      </a>
    );
--- 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<Props> {
          className="btn btn-inverse"
          href="https://github.com/grafana/grafana/tree/master/devenv"
          target="_blank"
-          rel="noopener"
+          rel="noopener noreferrer"
        >
          GitHub
        </a>
--- 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<Props> = ({ card }) => {
          </div>
        </a>
      </div>
-      <a href={`${card.learnHref}?utm_source=grafana_gettingstarted`} className={styles.url} target="_blank">
+      <a
+        href={`${card.learnHref}?utm_source=grafana_gettingstarted`}
+        className={styles.url}
+        target="_blank"
+        rel="noreferrer"
+      >
        Learn how in the docs <Icon name="external-link-alt" />
      </a>
    </div>
--- 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<Props, State> {
        {news.map((item, index) => {
          return (
            <div key={index} className={styles.item}>
-              <a href={textUtil.sanitizeUrl(item.link)} target="_blank" rel="noopener">
+              <a href={textUtil.sanitizeUrl(item.link)} target="_blank" rel="noopener noreferrer">
                <div className={styles.title}>{item.title}</div>
                <div className={styles.date}>{dateTimeFormat(item.date, { format: 'MMM DD' })} </div>
              </a>