fix: Fix button linter rules

Signed-off-by: Carlos Esteban Lopez <lcarlosesteb@vmware.com>

packages/cli/config/eslint-factory.js

@@ -217,9 +217,6 @@ function createConfigForRole(dir, role, extraConfig = {}) {
           '@spotify/eslint-config-react',
           ...(extraConfig.extends ?? []),
         ],
-        rules: {
-          ...extraConfig.rules,
-        },
         parserOptions: {
           ecmaFeatures: {
             jsx: true,

packages/core-components/src/layout/Sidebar/Items.test.tsx

@@ -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

@@ -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 =
@@ -421,9 +422,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>
     );
   }
 
@@ -688,7 +689,8 @@ export const SidebarExpandButton = () => {
   };
 
   return (
-    <button
+    <Button
+      role="button"
       onClick={handleClick}
       className={classes.expandButton}
       aria-label="Expand Sidebar"
@@ -697,6 +699,6 @@ export const SidebarExpandButton = () => {
       <Box className={classes.arrows}>
         {isOpen ? <DoubleArrowLeft /> : <DoubleArrowRight />}
       </Box>
-    </button>
+    </Button>
   );
 };

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<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

@@ -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

@@ -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

@@ -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>,
       );