mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
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
This commit is contained in:
parent
4b711372c5
commit
0cfb967404
@ -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"
|
||||
}
|
||||
|
@ -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",
|
||||
|
@ -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>
|
||||
)}
|
||||
|
@ -189,6 +189,7 @@ function FieldLink({ link }: FieldLinkProps) {
|
||||
<a
|
||||
href={link.href}
|
||||
target={'_blank'}
|
||||
rel="noreferrer"
|
||||
onClick={
|
||||
link.onClick
|
||||
? event => {
|
||||
|
@ -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>
|
||||
);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
@ -273,7 +273,7 @@ export function SelectBase<T>({
|
||||
menuIsOpen,
|
||||
})
|
||||
);
|
||||
return <IndicatorsContainer {...props} children={indicatorChildren} />;
|
||||
return <IndicatorsContainer {...props}>{indicatorChildren}</IndicatorsContainer>;
|
||||
}
|
||||
|
||||
return <IndicatorsContainer {...props} />;
|
||||
|
@ -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])
|
||||
)}
|
||||
|
@ -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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
@ -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>
|
||||
.
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
@ -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} />}
|
||||
|
@ -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>{' '}
|
||||
|
@ -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
|
||||
|
@ -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 />
|
||||
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
@ -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>
|
||||
)}
|
||||
|
@ -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
|
||||
|
@ -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>
|
||||
|
@ -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()}
|
||||
|
@ -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
|
||||
|
@ -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>
|
||||
);
|
||||
|
@ -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>
|
||||
|
@ -9,6 +9,7 @@ export const ThrottlingErrorMessage: FunctionComponent<Props> = ({ region }) =>
|
||||
Please visit the
|
||||
<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 }) =>
|
||||
to request a quota increase or see our
|
||||
<a
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="text-link"
|
||||
href={`https://grafana.com/docs/features/datasources/cloudwatch/#service-quotas`}
|
||||
>
|
||||
|
@ -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
|
||||
|
@ -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>
|
||||
);
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user