Skip to content

N
nexpie-grafana-theme
Commit 0cfb9674 by Dominik Prokop Committed by GitHub
Options

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
parent 4b711372
Showing with 70 additions and 50 deletions
.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"
}
......
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",
......
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>
)}
......
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 => {
......
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>
);
});
});
});
......
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} />;
......
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])
)}
......
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>
);
}
}
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>
.
......
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>
......
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>
);
};
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} />}
......
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>{' '}
......
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
......
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 />
......
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>
);
}
......
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>
)}
......
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
......
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>
......
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()}
......
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
......
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>
);
......
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>
......
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`}
>
......
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
......
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>
);
......
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>
......
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>
......
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>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment