From fa85521b1ee6e4b9edf0f6a2e73e7c77df5f75e2 Mon Sep 17 00:00:00 2001 From: Carlos Esteban Lopez Date: Mon, 5 Dec 2022 16:55:17 -0500 Subject: [PATCH 1/8] feat: Enable eslint-plugin-react with recommended settings & forbid button Signed-off-by: Carlos Esteban Lopez --- packages/cli/config/eslint-factory.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/packages/cli/config/eslint-factory.js b/packages/cli/config/eslint-factory.js index a40aa79fb3..ef1305f6d4 100644 --- a/packages/cli/config/eslint-factory.js +++ b/packages/cli/config/eslint-factory.js @@ -215,8 +215,20 @@ function createConfigForRole(dir, role, extraConfig = {}) { ...extraConfig, extends: [ '@spotify/eslint-config-react', + 'plugin:react/recommended', ...(extraConfig.extends ?? []), ], + rules: { + ...extraConfig.rules, + 'react/forbid-elements': [ + 1, + { + forbid: [ + { element: 'button', message: 'use MUI + ); } @@ -688,7 +689,8 @@ export const SidebarExpandButton = () => { }; return ( - + ); }; diff --git a/packages/core-components/src/layout/Sidebar/SidebarSubmenuItem.tsx b/packages/core-components/src/layout/Sidebar/SidebarSubmenuItem.tsx index fbe4496c72..5fdd29f203 100644 --- a/packages/core-components/src/layout/Sidebar/SidebarSubmenuItem.tsx +++ b/packages/core-components/src/layout/Sidebar/SidebarSubmenuItem.tsx @@ -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( theme => ({ @@ -158,7 +159,8 @@ export const SidebarSubmenuItem = (props: SidebarSubmenuItemProps) => { return ( - + {dropdownItems && showDropDown && ( diff --git a/plugins/catalog-import/src/components/StepPrepareCreatePullRequest/PreparePullRequestForm.test.tsx b/plugins/catalog-import/src/components/StepPrepareCreatePullRequest/PreparePullRequestForm.test.tsx index a8188ce358..54d5c27993 100644 --- a/plugins/catalog-import/src/components/StepPrepareCreatePullRequest/PreparePullRequestForm.test.tsx +++ b/plugins/catalog-import/src/components/StepPrepareCreatePullRequest/PreparePullRequestForm.test.tsx @@ -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('', () => { render={({ register }) => ( <> - {' '} + {' '} )} onSubmit={onSubmitFn} @@ -59,7 +60,7 @@ describe('', () => { id="main" label="Main Field" /> - + )} onSubmit={onSubmitFn} @@ -93,7 +94,7 @@ describe('', () => { Error in required main field )} - {' '} + {' '} )} onSubmit={onSubmitFn} diff --git a/plugins/techdocs/src/reader/transformers/copyToClipboard.tsx b/plugins/techdocs/src/reader/transformers/copyToClipboard.tsx index 6adb4252d3..a90c4ca116 100644 --- a/plugins/techdocs/src/reader/transformers/copyToClipboard.tsx +++ b/plugins/techdocs/src/reader/transformers/copyToClipboard.tsx @@ -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} > - + ); }; -import type { Transformer } from './transformer'; - /** * Recreates copy-to-clipboard functionality attached to snippets that * is native to mkdocs-material theme. diff --git a/plugins/techdocs/src/search/components/TechDocsSearch.test.tsx b/plugins/techdocs/src/search/components/TechDocsSearch.test.tsx index 28d2346c61..05d26b87d8 100644 --- a/plugins/techdocs/src/search/components/TechDocsSearch.test.tsx +++ b/plugins/techdocs/src/search/components/TechDocsSearch.test.tsx @@ -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('', () => { const [entityName, setEntityName] = useState(entityId); return wrapInTestApp( - + , ); From 5d3058355ddb901ec9f499eaab1c25e0384b8d8f Mon Sep 17 00:00:00 2001 From: Carlos Esteban Lopez Date: Tue, 13 Dec 2022 11:49:12 -0500 Subject: [PATCH 5/8] chore: Add changeset Signed-off-by: Carlos Esteban Lopez --- .changeset/quick-donkeys-yawn.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/quick-donkeys-yawn.md diff --git a/.changeset/quick-donkeys-yawn.md b/.changeset/quick-donkeys-yawn.md new file mode 100644 index 0000000000..f6b6c23fb9 --- /dev/null +++ b/.changeset/quick-donkeys-yawn.md @@ -0,0 +1,6 @@ +--- +'@backstage/core-components': patch +'@backstage/plugin-techdocs': patch +--- + +Add `react/forbid-elements` linter rule for button, suggest MUI `Button` From 3c70fb6dc5b4cd10dc16fe19ad9340aab52f8925 Mon Sep 17 00:00:00 2001 From: Carlos Esteban Lopez Date: Wed, 14 Dec 2022 11:34:13 -0500 Subject: [PATCH 6/8] test: Fix test import error Signed-off-by: Carlos Esteban Lopez --- packages/core-components/src/layout/Sidebar/Items.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core-components/src/layout/Sidebar/Items.test.tsx b/packages/core-components/src/layout/Sidebar/Items.test.tsx index 2a150b301d..eafbf3827e 100644 --- a/packages/core-components/src/layout/Sidebar/Items.test.tsx +++ b/packages/core-components/src/layout/Sidebar/Items.test.tsx @@ -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: { From e5831e96d279ba6e9d67b946852b50d4755720fd Mon Sep 17 00:00:00 2001 From: Carlos Esteban Lopez Date: Thu, 15 Dec 2022 00:08:22 -0500 Subject: [PATCH 7/8] lint: Use rule excluding test files Signed-off-by: Carlos Esteban Lopez --- .eslintrc.js | 22 ++++++++++++++++------ 1 file changed, 16 insertions(+), 6 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index 4e6bbd3910..cf01ffe3a6 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -45,12 +45,6 @@ module.exports = { "CallExpression[arguments.length=0] > MemberExpression[property.name='toUpperCase']", }, ], - 'react/forbid-elements': [ - 1, - { - forbid: [{ element: 'button', message: 'use MUI