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

Enable eslint-plugin-react with recommended settings & forbid button

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