paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 28 Packages Projects Releases Wiki Activity

Merge pull request #15037 from luchillo17/feat/BCKSTG-93-linter-rules

Browse Source 
Enable eslint-plugin-react with recommended settings & forbid button
This commit is contained in:
Fredrik Adelöw
2022-12-16 11:10:49 +01:00
committed by GitHub
parent a800e07d97 7a31a4da4b
commit d19420d3ca
10 changed files with 60 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.changeset/quick-donkeys-yawn.md
+6
View File
@@ -0,0 +1,6 @@
---
'@backstage/core-components': patch
'@backstage/plugin-techdocs': patch
---
Add `react/forbid-elements` linter rule for button, suggest MUI `Button`
.eslintrc.js
+17 -1
View File
@@ -18,7 +18,7 @@ var path = require('path');
module.exports = {
root: true,
plugins: ['notice', 'testing-library'],
plugins: ['@spotify', 'notice', 'react', 'testing-library'],
rules: {
'notice/notice': [
'error',
@@ -237,4 +237,20 @@ module.exports = {
}),
].flat(),
},
overrides: [
{
files: ['**/*.[jt]s?(x)'],
excludedFiles: '**/*.{test,spec}.[jt]s?(x)',
rules: {
'react/forbid-elements': [
1,
{
forbid: [
{ element: 'button', message: 'use MUI <Button> instead' },
],
},
],
},
},
],
};
package.json
+2
View File
@@ -58,6 +58,7 @@
"@backstage/repo-tools": "workspace:*",
"@changesets/cli": "^2.14.0",
"@octokit/rest": "^19.0.3",
"@spotify/eslint-plugin": "^14.1.3",
"@spotify/prettier-config": "^14.0.0",
"@techdocs/cli": "workspace:*",
"@types/node": "^16.11.26",
@@ -68,6 +69,7 @@
"e2e-test": "workspace:*",
"eslint": "^8.6.0",
"eslint-plugin-notice": "^0.9.10",
"eslint-plugin-react": "^7.28.0",
"eslint-plugin-testing-library": "^5.9.1",
"fs-extra": "10.1.0",
"husky": "^8.0.0",
packages/core-components/src/layout/Sidebar/Items.test.tsx
+2 -2
View File
@@ -23,7 +23,7 @@ import CreateComponentIcon from '@material-ui/icons/AddCircleOutline';
import { Sidebar } from './Bar';
import { SidebarItem, SidebarSearchField, SidebarExpandButton } from './Items';
import { renderHook } from '@testing-library/react-hooks';
import { hexToRgb, makeStyles } from '@material-ui/core/styles';
import { makeStyles } from '@material-ui/core/styles';
const useStyles = makeStyles({
spotlight: {
@@ -71,7 +71,7 @@ describe('Items', () => {
it('should render a button with custom style', async () => {
expect(
await screen.findByRole('button', { name: /create/i }),
).toHaveStyle(`background-color: ${hexToRgb('2b2a2a')}`);
).toHaveStyle(`background-color: transparent`);
});
});
describe('SidebarSearchField', () => {
packages/core-components/src/layout/Sidebar/Items.tsx
+6 -4
View File
@@ -61,6 +61,7 @@ import { useSidebarOpenState } from './SidebarOpenStateContext';
import { SidebarSubmenu, SidebarSubmenuProps } from './SidebarSubmenu';
import { SidebarSubmenuItemProps } from './SidebarSubmenuItem';
import { isLocationMatch } from './utils';
import Button from '@material-ui/core/Button';
/** @public */
export type SidebarItemClassKey =
@@ -424,9 +425,9 @@ const SidebarItemBase = forwardRef<any, SidebarItemProps>((props, ref) => {
if (isButtonItem(props)) {
return (
<button aria-label={text} {...childProps} ref={ref}>
<Button role="button" aria-label={text} {...childProps} ref={ref}>
{content}
</button>
</Button>
);
}
@@ -691,7 +692,8 @@ export const SidebarExpandButton = () => {
};
return (
<button
<Button
role="button"
onClick={handleClick}
className={classes.expandButton}
aria-label="Expand Sidebar"
@@ -700,6 +702,6 @@ export const SidebarExpandButton = () => {
<Box className={classes.arrows}>
{isOpen ? <DoubleArrowLeft /> : <DoubleArrowRight />}
</Box>
</button>
</Button>
);
};
packages/core-components/src/layout/Sidebar/SidebarSubmenuItem.tsx
+4 -2
View File
@@ -27,6 +27,7 @@ import ArrowDropUpIcon from '@material-ui/icons/ArrowDropUp';
import { SidebarItemWithSubmenuContext } from './config';
import { isLocationMatch } from './utils';
import Box from '@material-ui/core/Box';
import Button from '@material-ui/core/Button';
const useStyles = makeStyles<BackstageTheme>(
theme => ({
@@ -158,7 +159,8 @@ export const SidebarSubmenuItem = (props: SidebarSubmenuItemProps) => {
return (
<Box className={classes.itemContainer}>
<Tooltip title={title} enterDelay={500} enterNextDelay={500}>
<button
<Button
role="button"
onClick={handleClickDropdown}
onTouchStart={e => e.stopPropagation()}
className={classnames(
@@ -181,7 +183,7 @@ export const SidebarSubmenuItem = (props: SidebarSubmenuItemProps) => {
) : (
<ArrowDropDownIcon className={classes.dropdownArrow} />
)}
</button>
</Button>
</Tooltip>
{dropdownItems && showDropDown && (
<Box className={classes.dropdown}>
plugins/catalog-import/src/components/StepPrepareCreatePullRequest/PreparePullRequestForm.test.tsx
+4 -3
View File
@@ -15,6 +15,7 @@
*/
import { FormHelperText, TextField } from '@material-ui/core';
import Button from '@material-ui/core/Button';
import { act, render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import React from 'react';
@@ -31,7 +32,7 @@ describe('<PreparePullRequestForm />', () => {
render={({ register }) => (
<>
<TextField {...asInputRef(register('main'))} />
<button type="submit">Submit</button>{' '}
<Button type="submit">Submit</Button>{' '}
</>
)}
onSubmit={onSubmitFn}
@@ -59,7 +60,7 @@ describe('<PreparePullRequestForm />', () => {
id="main"
label="Main Field"
/>
<button type="submit">Submit</button>
<Button type="submit">Submit</Button>
</>
)}
onSubmit={onSubmitFn}
@@ -93,7 +94,7 @@ describe('<PreparePullRequestForm />', () => {
Error in required main field
</FormHelperText>
)}
<button type="submit">Submit</button>{' '}
<Button type="submit">Submit</Button>{' '}
</>
)}
onSubmit={onSubmitFn}
plugins/techdocs/src/reader/transformers/copyToClipboard.tsx
+4 -4
View File
@@ -23,6 +23,8 @@ import {
SvgIcon,
Tooltip,
} from '@material-ui/core';
import Button from '@material-ui/core/Button';
import type { Transformer } from './transformer';
const CopyToClipboardTooltip = withStyles(theme => ({
tooltip: {
@@ -65,15 +67,13 @@ const CopyToClipboardButton = ({ text }: CopyToClipboardButtonProps) => {
onClose={handleClose}
leaveDelay={1000}
>
<button className="md-clipboard md-icon" onClick={handleClick}>
<Button className="md-clipboard md-icon" onClick={handleClick}>
<CopyToClipboardIcon />
</button>
</Button>
</CopyToClipboardTooltip>
);
};
import type { Transformer } from './transformer';
/**
* Recreates copy-to-clipboard functionality attached to <code> snippets that
* is native to mkdocs-material theme.
plugins/techdocs/src/search/components/TechDocsSearch.test.tsx
+3 -2
View File
@@ -16,6 +16,7 @@
import { ApiProvider } from '@backstage/core-app-api';
import { searchApiRef } from '@backstage/plugin-search-react';
import { TestApiRegistry, wrapInTestApp } from '@backstage/test-utils';
import Button from '@material-ui/core/Button';
import {
act,
fireEvent,
@@ -136,9 +137,9 @@ describe('<TechDocsSearch />', () => {
const [entityName, setEntityName] = useState(entityId);
return wrapInTestApp(
<ApiProvider apis={apiRegistry}>
<button onClick={() => setEntityName(newEntityId)}>
<Button onClick={() => setEntityName(newEntityId)}>
Update Entity
</button>
</Button>
<TechDocsSearch entityId={entityName} debounceTime={0} />
</ApiProvider>,
);
yarn.lock
+12
View File
@@ -13180,6 +13180,16 @@ __metadata:
languageName: node
linkType: hard
"@spotify/eslint-plugin@npm:^14.1.3":
version: 14.1.3
resolution: "@spotify/eslint-plugin@npm:14.1.3"
peerDependencies:
"@typescript-eslint/parser": ^5.13.0
eslint: ^8.10.0
checksum: 788f5d9aab6f7b6c0ad7e414ebd5f4504f058f26a769dc4bcd0088dd8e6d9e5334965c8f6fffcf5b7ed52dbe25de0dc7bba403bcffa79b6d94c7ba3094757b5f
languageName: node
linkType: hard
"@spotify/prettier-config@npm:^14.0.0":
version: 14.0.1
resolution: "@spotify/prettier-config@npm:14.0.1"
@@ -34435,6 +34445,7 @@ __metadata:
"@changesets/cli": ^2.14.0
"@manypkg/get-packages": ^1.1.3
"@octokit/rest": ^19.0.3
"@spotify/eslint-plugin": ^14.1.3
"@spotify/prettier-config": ^14.0.0
"@techdocs/cli": "workspace:*"
"@types/node": ^16.11.26
@@ -34445,6 +34456,7 @@ __metadata:
e2e-test: "workspace:*"
eslint: ^8.6.0
eslint-plugin-notice: ^0.9.10
eslint-plugin-react: ^7.28.0
eslint-plugin-testing-library: ^5.9.1
fs-extra: 10.1.0
husky: ^8.0.0