public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ESlint: React fixes part 1 (#29062)

Browse Source 
* Eslint: allign with latest grafana-eslint-config

* fix ts

* Fix react/jsx-key

* Fix react/no-children-prop

* Fix react/jsx-no-target-blank
This commit is contained in:
Dominik Prokop
2020-11-18 15:36:35 +01:00
committed by GitHub
parent 4b711372c5
commit 0cfb967404
29 changed files with 70 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.eslintrc
+2 -4
View File
@@ -12,13 +12,11 @@
"react-hooks/rules-of-hooks": "off", "react-hooks/rules-of-hooks": "off",
"react-hooks/exhaustive-deps": "off", "react-hooks/exhaustive-deps": "off",
"react/prop-types": "off", "react/prop-types": "off",
"react/no-children-prop": "off",
"react/no-unescaped-entities": "off", "react/no-unescaped-entities": "off",
"react/jsx-no-target-blank": "off",
"react/display-name": "off", "react/display-name": "off",
"react/jsx-key": "off",
"react/no-deprecated": "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-find-dom-node": "off",
"react/no-render-return-value": "off" "react/no-render-return-value": "off"
} }
package.json
+1
View File
@@ -137,6 +137,7 @@
"eslint-config-prettier": "6.11.0", "eslint-config-prettier": "6.11.0",
"eslint-plugin-jsdoc": "28.6.1", "eslint-plugin-jsdoc": "28.6.1",
"eslint-plugin-prettier": "3.1.4", "eslint-plugin-prettier": "3.1.4",
"eslint-plugin-react": "7.21.5",
"eslint-plugin-react-hooks": "4.1.2", "eslint-plugin-react-hooks": "4.1.2",
"expect.js": "0.3.1", "expect.js": "0.3.1",
"expose-loader": "0.7.5", "expose-loader": "0.7.5",
packages/grafana-ui/src/components/InfoBox/InfoBox.tsx
+1 -1
View File
@@ -46,7 +46,7 @@ export const InfoBox = React.memo(
</div> </div>
<div>{children}</div> <div>{children}</div>
{url && ( {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'} <Icon name="book" /> {urlTitle || 'Read more'}
</a> </a>
)} )}
packages/grafana-ui/src/components/Logs/LogDetailsRow.tsx
+1
View File
@@ -189,6 +189,7 @@ function FieldLink({ link }: FieldLinkProps) {
<a <a
href={link.href} href={link.href}
target={'_blank'} target={'_blank'}
rel="noreferrer"
onClick={ onClick={
link.onClick link.onClick
? event => { ? event => {
packages/grafana-ui/src/components/Logs/LogRowContextProvider.test.tsx
+5 -1
View File
@@ -164,7 +164,11 @@ describe('LogRowContextProvider', () => {
return <></>; return <></>;
}); });
await act(async () => { await act(async () => {
await mount(<LogRowContextProvider row={row} getRowContext={getRowContextMock} children={mockedChildren} />); await mount(
<LogRowContextProvider row={row} getRowContext={getRowContextMock}>
{mockedChildren}
</LogRowContextProvider>
);
}); });
}); });
}); });
packages/grafana-ui/src/components/Select/SelectBase.tsx
+1 -1
View File
@@ -273,7 +273,7 @@ export function SelectBase<T>({
menuIsOpen, menuIsOpen,
}) })
); );
return <IndicatorsContainer {...props} children={indicatorChildren} />; return <IndicatorsContainer {...props}>{indicatorChildren}</IndicatorsContainer>;
} }
return <IndicatorsContainer {...props} />; return <IndicatorsContainer {...props} />;
packages/grafana-ui/src/components/Table/Table.tsx
+2 -1
View File
@@ -195,8 +195,9 @@ export const Table: FC<Props> = memo((props: Props) => {
{!noHeader && ( {!noHeader && (
<div> <div>
{headerGroups.map((headerGroup: HeaderGroup) => { {headerGroups.map((headerGroup: HeaderGroup) => {
const { key, ...headerGroupProps } = headerGroup.getHeaderGroupProps();
return ( return (
<div className={tableStyles.thead} {...headerGroup.getHeaderGroupProps()}> <div className={tableStyles.thead} {...headerGroupProps} key={key}>
{headerGroup.headers.map((column: Column, index: number) => {headerGroup.headers.map((column: Column, index: number) =>
renderHeaderCell(column, tableStyles, data.fields[index]) renderHeaderCell(column, tableStyles, data.fields[index])
)} )}
public/app/core/components/AppNotifications/AppNotificationItem.tsx
+3 -2
View File
@@ -26,9 +26,10 @@ export default class AppNotificationItem extends Component<Props> {
<Alert <Alert
severity={appNotification.severity} severity={appNotification.severity}
title={appNotification.title} title={appNotification.title}
children={appNotification.component || appNotification.text}
onRemove={() => onClearNotification(appNotification.id)} onRemove={() => onClearNotification(appNotification.id)}
/> >
{appNotification.component || appNotification.text}
</Alert>
); );
} }
} }
public/app/core/components/ErrorPage/ErrorPage.tsx
+1 -1
View File
@@ -64,7 +64,7 @@ export class ErrorPage extends PureComponent<Props> {
</p> </p>
<p> <p>
If the error persists, seek help on the{' '} 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 community site
</a> </a>
. .
public/app/core/components/PageHeader/PageHeader.tsx
+2 -2
View File
@@ -51,7 +51,7 @@ const Navigation = ({ children }: { children: NavModelItem[] }) => {
return ( return (
<nav> <nav>
<SelectNav customCss="page-header__select-nav" children={children} /> <SelectNav customCss="page-header__select-nav">{children}</SelectNav>
<TabsBar className="page-header__tabs" hideBorder={true}> <TabsBar className="page-header__tabs" hideBorder={true}>
{children.map((child, index) => { {children.map((child, index) => {
return ( return (
@@ -147,7 +147,7 @@ export default class PageHeader extends React.Component<Props, any> {
<div className="page-container"> <div className="page-container">
<div className="page-header"> <div className="page-header">
{this.renderHeaderTitle(main)} {this.renderHeaderTitle(main)}
{children && children.length && <Navigation children={children} />} {children && children.length && <Navigation>{children}</Navigation>}
</div> </div>
</div> </div>
</div> </div>
public/app/features/admin/ldap/LdapConnectionStatus.tsx
+5 -1
View File
@@ -78,5 +78,9 @@ export const LdapErrorBox: FC<LdapConnectionErrorProps> = ({ ldapConnectionInfo
</div> </div>
)); ));
return <Alert title="Connection error" severity={AppNotificationSeverity.Error} children={errorElements} />; return (
<Alert title="Connection error" severity={AppNotificationSeverity.Error}>
{errorElements}
</Alert>
);
}; };
public/app/features/admin/ldap/LdapPage.tsx
+6 -3
View File
@@ -86,7 +86,9 @@ export class LdapPage extends PureComponent<Props, State> {
<> <>
{ldapError && ldapError.title && ( {ldapError && ldapError.title && (
<div className="gf-form-group"> <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> </div>
)} )}
@@ -116,9 +118,10 @@ export class LdapPage extends PureComponent<Props, State> {
<Alert <Alert
title={userError.title} title={userError.title}
severity={AppNotificationSeverity.Error} severity={AppNotificationSeverity.Error}
children={userError.body}
onRemove={this.onClearUserError} onRemove={this.onClearUserError}
/> >
{userError.body}
</Alert>
</div> </div>
)} )}
{ldapUser && <LdapUserInfo ldapUser={ldapUser} showAttributeMapping={true} />} {ldapUser && <LdapUserInfo ldapUser={ldapUser} showAttributeMapping={true} />}
public/app/features/dashboard/components/SaveDashboard/forms/SaveProvisionedDashboardForm.tsx
+1
View File
@@ -40,6 +40,7 @@ export const SaveProvisionedDashboardForm: React.FC<SaveDashboardFormProps> = ({
className="external-link" className="external-link"
href="http://docs.grafana.org/administration/provisioning/#dashboards" href="http://docs.grafana.org/administration/provisioning/#dashboards"
target="_blank" target="_blank"
rel="noreferrer"
> >
documentation documentation
</a>{' '} </a>{' '}
public/app/features/dashboard/components/ShareModal/ShareLink.tsx
+2 -2
View File
@@ -154,7 +154,7 @@ export class ShareLink extends PureComponent<Props, State> {
</div> </div>
{panel && config.rendererAvailable && ( {panel && config.rendererAvailable && (
<div className="gf-form"> <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 <Icon name="camera" /> Direct link rendered image
</a> </a>
</div> </div>
@@ -166,7 +166,7 @@ export class ShareLink extends PureComponent<Props, State> {
<a <a
href="https://grafana.com/grafana/plugins/grafana-image-renderer" href="https://grafana.com/grafana/plugins/grafana-image-renderer"
target="_blank" target="_blank"
rel="noopener" rel="noopener noreferrer"
className="external-link" className="external-link"
> >
Grafana Image Renderer plugin Grafana Image Renderer plugin
public/app/features/dashboard/components/ShareModal/ShareSnapshot.tsx
+1 -1
View File
@@ -272,7 +272,7 @@ export class ShareSnapshot extends PureComponent<Props, State> {
<> <>
<div className="gf-form" style={{ marginTop: '40px' }}> <div className="gf-form" style={{ marginTop: '40px' }}>
<div className="gf-form-row"> <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} <Icon name="external-link-alt" /> {snapshotUrl}
</a> </a>
<br /> <br />
public/app/features/dashboard/containers/DashboardPage.tsx
+3 -5
View File
@@ -257,11 +257,9 @@ export class DashboardPage extends PureComponent<Props, State> {
return ( return (
<div className="dashboard-loading"> <div className="dashboard-loading">
<Alert <Alert severity={AppNotificationSeverity.Error} title={initError.message}>
severity={AppNotificationSeverity.Error} {getMessageFromError(initError.error)}
title={initError.message} </Alert>
children={getMessageFromError(initError.error)}
/>
</div> </div>
); );
} }
public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx
+1 -1
View File
@@ -140,7 +140,7 @@ export class PanelHeader extends PureComponent<Props, State> {
<Icon name={iconName} style={{ marginRight: '8px' }} /> <Icon name={iconName} style={{ marginRight: '8px' }} />
</div> </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' }} /> <Icon name={iconName} style={{ marginRight: '8px' }} />
</a> </a>
)} )}
public/app/features/explore/NoDataSourceCallToAction.tsx
+1 -1
View File
@@ -14,7 +14,7 @@ export const NoDataSourceCallToAction = () => {
<a <a
href="http://docs.grafana.org/administration/provisioning/#datasources?utm_source=explore" href="http://docs.grafana.org/administration/provisioning/#datasources?utm_source=explore"
target="_blank" target="_blank"
rel="noopener" rel="noreferrer"
className="text-link" className="text-link"
> >
Learn more Learn more
public/app/features/manage-dashboards/components/ImportDashboardOverview.tsx
+1
View File
@@ -60,6 +60,7 @@ class ImportDashboardOverviewUnConnected extends PureComponent<Props, State> {
href={`https://grafana.com/dashboards/${dashboard.gnetId}`} href={`https://grafana.com/dashboards/${dashboard.gnetId}`}
className="external-link" className="external-link"
target="_blank" target="_blank"
rel="noreferrer"
> >
Grafana.com Grafana.com
</a> </a>
public/app/features/plugins/PluginPage.tsx
+7 -11
View File
@@ -287,7 +287,7 @@ class PluginPage extends PureComponent<Props, State> {
{info.links.map(link => { {info.links.map(link => {
return ( return (
<li key={link.url}> <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} {link.name}
</a> </a>
</li> </li>
@@ -346,16 +346,12 @@ class PluginPage extends PureComponent<Props, State> {
<div className="sidebar-container"> <div className="sidebar-container">
<div className="sidebar-content"> <div className="sidebar-content">
{plugin.loadError && ( {plugin.loadError && (
<Alert <Alert severity={AppNotificationSeverity.Error} title="Error Loading Plugin">
severity={AppNotificationSeverity.Error} <>
title="Error Loading Plugin" Check the server startup logs for more information. <br />
children={ If this plugin was loaded from git, make sure it was compiled.
<> </>
Check the server startup logs for more information. <br /> </Alert>
If this plugin was loaded from git, make sure it was compiled.
</>
}
/>
)} )}
{this.renderPluginNotice()} {this.renderPluginNotice()}
{this.renderBody()} {this.renderBody()}
public/app/features/plugins/PluginsErrorsInfo.tsx
+5 -1
View File
@@ -49,7 +49,11 @@ export const PluginsErrorsInfoUnconnected: React.FC<PluginsErrorsInfoProps> = ({
<div> <div>
<p> <p>
We have encountered{' '} 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 data source backend plugins
</a>{' '} </a>{' '}
that are unsigned. Grafana Labs cannot guarantee the integrity of unsigned plugins and recommends using signed that are unsigned. Grafana Labs cannot guarantee the integrity of unsigned plugins and recommends using signed
public/app/plugins/datasource/cloudwatch/components/CloudWatchLink.tsx
+1 -1
View File
@@ -58,7 +58,7 @@ export default class CloudWatchLink extends Component<Props, State> {
render() { render() {
const { href } = this.state; const { href } = this.state;
return ( return (
<a href={href} target="_blank" rel="noopener"> <a href={href} target="_blank" rel="noopener noreferrer">
<Icon name="share-alt" /> CloudWatch Logs Insights <Icon name="share-alt" /> CloudWatch Logs Insights
</a> </a>
); );
public/app/plugins/datasource/cloudwatch/components/LogsCheatSheet.tsx
+5 -5
View File
@@ -237,13 +237,13 @@ export default class LogsCheatSheet extends PureComponent<ExploreStartPageProps,
return ( return (
<div> <div>
<h2>CloudWatch Logs Cheat Sheet</h2> <h2>CloudWatch Logs Cheat Sheet</h2>
{CLIQ_EXAMPLES.map(cat => ( {CLIQ_EXAMPLES.map((cat, i) => (
<div> <div key={`${cat.category}-${i}`}>
<div className={`cheat-sheet-item__title ${cx(exampleCategory)}`}>{cat.category}</div> <div className={`cheat-sheet-item__title ${cx(exampleCategory)}`}>{cat.category}</div>
{cat.examples.map((item, i) => ( {cat.examples.map((item, j) => (
<div className="cheat-sheet-item" key={`item-${i}`}> <div className="cheat-sheet-item" key={`item-${j}`}>
<h4>{item.title}</h4> <h4>{item.title}</h4>
{this.renderExpression(item.expr, `item-${i}`)} {this.renderExpression(item.expr, `item-${j}`)}
</div> </div>
))} ))}
</div> </div>
public/app/plugins/datasource/cloudwatch/components/ThrottlingErrorMessage.tsx
+2
View File
@@ -9,6 +9,7 @@ export const ThrottlingErrorMessage: FunctionComponent<Props> = ({ region }) =>
Please visit the&nbsp; Please visit the&nbsp;
<a <a
target="_blank" target="_blank"
rel="noreferrer"
className="text-link" className="text-link"
href={`https://${region}.console.aws.amazon.com/servicequotas/home?region=${region}#!/services/monitoring/quotas/L-5E141212`} 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; &nbsp;to request a quota increase or see our&nbsp;
<a <a
target="_blank" target="_blank"
rel="noreferrer"
className="text-link" className="text-link"
href={`https://grafana.com/docs/features/datasources/cloudwatch/#service-quotas`} href={`https://grafana.com/docs/features/datasources/cloudwatch/#service-quotas`}
> >
public/app/plugins/datasource/graphite/configuration/ConfigEditor.tsx
+1 -1
View File
@@ -31,7 +31,7 @@ export class ConfigEditor extends PureComponent<Props> {
<p> <p>
There are different types of Graphite compatible backends. Here you can specify the type you are using. If you There are different types of Graphite compatible backends. Here you can specify the type you are using. If you
are using{' '} 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 Metrictank
</a>{' '} </a>{' '}
then select that here. This will enable Metrictank specific features like query processing meta data. Metrictank then select that here. This will enable Metrictank specific features like query processing meta data. Metrictank
public/app/plugins/datasource/prometheus/components/PromLink.tsx
+1 -1
View File
@@ -64,7 +64,7 @@ export default class PromLink extends Component<Props, State> {
const { href } = this.state; const { href } = this.state;
return ( return (
<a href={href} target="_blank" rel="noopener"> <a href={href} target="_blank" rel="noopener noreferrer">
Prometheus Prometheus
</a> </a>
); );
public/app/plugins/datasource/testdata/TestInfoTab.tsx
Vendored
+1 -1
View File
@@ -21,7 +21,7 @@ export class TestInfoTab extends PureComponent<Props> {
className="btn btn-inverse" className="btn btn-inverse"
href="https://github.com/grafana/grafana/tree/master/devenv" href="https://github.com/grafana/grafana/tree/master/devenv"
target="_blank" target="_blank"
rel="noopener" rel="noopener noreferrer"
> >
GitHub GitHub
</a> </a>
public/app/plugins/panel/gettingstarted/components/DocsCard.tsx
+6 -1
View File
@@ -24,7 +24,12 @@ export const DocsCard: FC<Props> = ({ card }) => {
</div> </div>
</a> </a>
</div> </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" /> Learn how in the docs <Icon name="external-link-alt" />
</a> </a>
</div> </div>
public/app/plugins/panel/news/NewsPanel.tsx
+1 -1
View File
@@ -77,7 +77,7 @@ export class NewsPanel extends PureComponent<Props, State> {
{news.map((item, index) => { {news.map((item, index) => {
return ( return (
<div key={index} className={styles.item}> <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.title}>{item.title}</div>
<div className={styles.date}>{dateTimeFormat(item.date, { format: 'MMM DD' })} </div> <div className={styles.date}>{dateTimeFormat(item.date, { format: 'MMM DD' })} </div>
</a> </a>