SONAR-13368 Bump to prettier@2.7.1

427 files changed, 1875 insertions, 1896 deletions

diff --git a/server/sonar-web/src/main/js/components/SourceViewer/SourceViewer.tsx b/server/sonar-web/src/main/js/components/SourceViewer/SourceViewer.tsx
index 075ec4d96fd..98a097d94d3 100644
--- a/server/sonar-web/src/main/js/components/SourceViewer/SourceViewer.tsx
+++ b/server/sonar-web/src/main/js/components/SourceViewer/SourceViewer.tsx
@@ -23,7 +23,7 @@ import {
   getComponentData,
   getComponentForSourceViewer,
   getDuplications,
-  getSources
+  getSources,
 } from '../../api/components';
 import { getBranchLikeQuery, isSameBranchLike } from '../../helpers/branch-like';
 import { translate } from '../../helpers/l10n';
@@ -38,7 +38,7 @@ import {
   LinearIssueLocation,
   Measure,
   SourceLine,
-  SourceViewerFile
+  SourceViewerFile,
 } from '../../types/types';
 import { Alert } from '../ui/Alert';
 import { WorkspaceContext } from '../workspace/context';
@@ -46,14 +46,14 @@ import DuplicationPopup from './components/DuplicationPopup';
 import {
   filterDuplicationBlocksByLine,
   getDuplicationBlocksForIndex,
-  isDuplicationBlockInRemovedComponent
+  isDuplicationBlockInRemovedComponent,
 } from './helpers/duplications';
 import getCoverageStatus from './helpers/getCoverageStatus';
 import {
   duplicationsByLine,
   issuesByLine,
   locationsByLine,
-  symbolsByLine
+  symbolsByLine,
 } from './helpers/indexing';
 import { LINES_TO_LOAD } from './helpers/lines';
 import loadIssues from './helpers/loadIssues';
@@ -116,7 +116,7 @@ export default class SourceViewer extends React.PureComponent<Props, State> {
     displayAllIssues: false,
     displayIssueLocationsCount: true,
     displayIssueLocationsLink: true,
-    displayLocationMarkers: true
+    displayLocationMarkers: true,
   };
 
   constructor(props: Props) {
@@ -136,7 +136,7 @@ export default class SourceViewer extends React.PureComponent<Props, State> {
       openIssuesByLine: {},
       selectedIssue: props.selectedIssue,
       sourceRemoved: false,
-      symbolsByLine: {}
+      symbolsByLine: {},
     };
   }
 
@@ -168,7 +168,7 @@ export default class SourceViewer extends React.PureComponent<Props, State> {
         this.setState(
           {
             sources: sources.slice(0, LINES_TO_LOAD),
-            hasSourcesAfter: sources.length > LINES_TO_LOAD
+            hasSourcesAfter: sources.length > LINES_TO_LOAD,
           },
           () => {
             if (this.props.onLoaded && this.state.component && this.state.issues) {
@@ -187,10 +187,10 @@ export default class SourceViewer extends React.PureComponent<Props, State> {
   loadComponent(component: string, branchLike?: BranchLike) {
     return Promise.all([
       getComponentForSourceViewer({ component, ...getBranchLikeQuery(branchLike) }),
-      getComponentData({ component, ...getBranchLikeQuery(branchLike) })
+      getComponentData({ component, ...getBranchLikeQuery(branchLike) }),
     ]).then(([sourceViewerComponent, { component }]) => ({
       ...sourceViewerComponent,
-      leakPeriodDate: component.leakPeriodDate
+      leakPeriodDate: component.leakPeriodDate,
     }));
   }
 
@@ -204,7 +204,7 @@ export default class SourceViewer extends React.PureComponent<Props, State> {
   }
 
   computeCoverageStatus(lines: SourceLine[]) {
-    return lines.map(line => ({ ...line, coverageStatus: getCoverageStatus(line) }));
+    return lines.map((line) => ({ ...line, coverageStatus: getCoverageStatus(line) }));
   }
 
   isLineOutsideOfRange(lineNumber: number) {
@@ -223,7 +223,7 @@ export default class SourceViewer extends React.PureComponent<Props, State> {
 
     const loadIssuesCallback = (component: SourceViewerFile, sources: SourceLine[]) => {
       loadIssues(this.props.component, this.props.branchLike).then(
-        issues => {
+        (issues) => {
           if (this.mounted) {
             const finalSources = sources.slice(0, LINES_TO_LOAD);
             this.setState(
@@ -244,7 +244,7 @@ export default class SourceViewer extends React.PureComponent<Props, State> {
                 issuePopup: undefined,
                 sourceRemoved: false,
                 sources: this.computeCoverageStatus(finalSources),
-                symbolsByLine: symbolsByLine(sources.slice(0, LINES_TO_LOAD))
+                symbolsByLine: symbolsByLine(sources.slice(0, LINES_TO_LOAD)),
               },
               () => {
                 if (this.props.onLoaded) {
@@ -284,8 +284,8 @@ export default class SourceViewer extends React.PureComponent<Props, State> {
       const sourcesRequest =
         component.q === 'FIL' || component.q === 'UTS' ? this.fetchSources() : Promise.resolve([]);
       sourcesRequest.then(
-        sources => loadIssuesCallback(component, sources),
-        response => onFailLoadSources(response, component)
+        (sources) => loadIssuesCallback(component, sources),
+        (response) => onFailLoadSources(response, component)
       );
     };
 
@@ -321,7 +321,7 @@ export default class SourceViewer extends React.PureComponent<Props, State> {
       // request one additional line to define `hasSourcesAfter`
       to++;
 
-      this.loadSources(this.props.component, from, to, this.props.branchLike).then(sources => {
+      this.loadSources(this.props.component, from, to, this.props.branchLike).then((sources) => {
         resolve(sources);
       }, onFailLoadSources);
     });
@@ -340,13 +340,13 @@ export default class SourceViewer extends React.PureComponent<Props, State> {
       firstSourceLine.line - 1,
       this.props.branchLike
     ).then(
-      sources => {
+      (sources) => {
         if (this.mounted) {
-          this.setState(prevState => {
+          this.setState((prevState) => {
             return {
               loadingSourcesBefore: false,
               sources: [...this.computeCoverageStatus(sources), ...(prevState.sources || [])],
-              symbolsByLine: { ...prevState.symbolsByLine, ...symbolsByLine(sources) }
+              symbolsByLine: { ...prevState.symbolsByLine, ...symbolsByLine(sources) },
             };
           });
         }
@@ -366,21 +366,21 @@ export default class SourceViewer extends React.PureComponent<Props, State> {
     const fromLine = lastSourceLine.line + 1;
     const toLine = lastSourceLine.line + LINES_TO_LOAD + 1;
     this.loadSources(this.props.component, fromLine, toLine, this.props.branchLike).then(
-      sources => {
+      (sources) => {
         if (this.mounted) {
           const hasSourcesAfter = LINES_TO_LOAD < sources.length;
           if (hasSourcesAfter) {
             sources.pop();
           }
-          this.setState(prevState => {
+          this.setState((prevState) => {
             return {
               hasSourcesAfter,
               loadingSourcesAfter: false,
               sources: [...(prevState.sources || []), ...this.computeCoverageStatus(sources)],
               symbolsByLine: {
                 ...prevState.symbolsByLine,
-                ...symbolsByLine(sources)
-              }
+                ...symbolsByLine(sources),
+              },
             };
           });
         }
@@ -394,14 +394,14 @@ export default class SourceViewer extends React.PureComponent<Props, State> {
   loadDuplications = () => {
     getDuplications({
       key: this.props.component,
-      ...getBranchLikeQuery(this.props.branchLike)
+      ...getBranchLikeQuery(this.props.branchLike),
     }).then(
-      r => {
+      (r) => {
         if (this.mounted) {
           this.setState({
             duplications: r.duplications,
             duplicationsByLine: duplicationsByLine(r.duplications),
-            duplicatedFiles: r.files
+            duplicatedFiles: r.files,
           });
         }
       },
@@ -425,7 +425,7 @@ export default class SourceViewer extends React.PureComponent<Props, State> {
   };
 
   handleSymbolClick = (symbols: string[]) => {
-    this.setState(state => {
+    this.setState((state) => {
       const shouldDisable = intersection(state.highlightedSymbols, symbols).length > 0;
       const highlightedSymbols = shouldDisable ? [] : symbols;
       return { highlightedSymbols };
@@ -449,20 +449,22 @@ export default class SourceViewer extends React.PureComponent<Props, State> {
   };
 
   handleOpenIssues = (line: SourceLine) => {
-    this.setState(state => ({
-      openIssuesByLine: { ...state.openIssuesByLine, [line.line]: true }
+    this.setState((state) => ({
+      openIssuesByLine: { ...state.openIssuesByLine, [line.line]: true },
     }));
   };
 
   handleCloseIssues = (line: SourceLine) => {
-    this.setState(state => ({
-      openIssuesByLine: { ...state.openIssuesByLine, [line.line]: false }
+    this.setState((state) => ({
+      openIssuesByLine: { ...state.openIssuesByLine, [line.line]: false },
     }));
   };
 
   handleIssueChange = (issue: Issue) => {
     this.setState(({ issues = [] }) => {
-      const newIssues = issues.map(candidate => (candidate.key === issue.key ? issue : candidate));
+      const newIssues = issues.map((candidate) =>
+        candidate.key === issue.key ? issue : candidate
+      );
       return { issues: newIssues, issuesByLine: issuesByLine(newIssues) };
     });
     if (this.props.onIssueChange) {
diff --git a/server/sonar-web/src/main/js/components/SourceViewer/SourceViewerCode.tsx b/server/sonar-web/src/main/js/components/SourceViewer/SourceViewerCode.tsx
index 0a42eadc3c2..6bc2252f2ea 100644
--- a/server/sonar-web/src/main/js/components/SourceViewer/SourceViewerCode.tsx
+++ b/server/sonar-web/src/main/js/components/SourceViewer/SourceViewerCode.tsx
@@ -27,7 +27,7 @@ import {
   FlowLocation,
   Issue,
   LinearIssueLocation,
-  SourceLine
+  SourceLine,
 } from '../../types/types';
 import Line from './components/Line';
 import LineIssuesList from './components/LineIssuesList';
@@ -40,7 +40,7 @@ const ZERO_LINE = {
   code: '',
   duplicated: false,
   isNew: false,
-  line: 0
+  line: 0,
 };
 
 interface Props {
@@ -110,7 +110,7 @@ export default class SourceViewerCode extends React.PureComponent<Props> {
     index,
     displayCoverage,
     displayDuplications,
-    displayIssues
+    displayIssues,
   }: {
     line: SourceLine;
     index: number;
@@ -126,7 +126,7 @@ export default class SourceViewerCode extends React.PureComponent<Props> {
       displayAllIssues,
       highlightedLocations,
       metricKey,
-      sources
+      sources,
     } = this.props;
 
     const secondaryIssueLocations = getSecondaryIssueLocationsForLine(line, highlightedLocations);
@@ -185,7 +185,8 @@ export default class SourceViewerCode extends React.PureComponent<Props> {
         previousLine={index > 0 ? sources[index - 1] : undefined}
         renderDuplicationPopup={this.props.renderDuplicationPopup}
         scrollToUncoveredLine={scrollToUncoveredLine}
-        secondaryIssueLocations={secondaryIssueLocations}>
+        secondaryIssueLocations={secondaryIssueLocations}
+      >
         <LineIssuesList
           displayWhyIsThisAnIssue={true}
           displayAllIssues={displayAllIssues}
@@ -209,11 +210,11 @@ export default class SourceViewerCode extends React.PureComponent<Props> {
   render() {
     const { issues = [], sources } = this.props;
 
-    const displayCoverage = sources.some(s => s.coverageStatus != null);
-    const displayDuplications = sources.some(s => !!s.duplicated);
+    const displayCoverage = sources.some((s) => s.coverageStatus != null);
+    const displayDuplications = sources.some((s) => !!s.duplicated);
     const displayIssues = issues.length > 0;
 
-    const hasFileIssues = displayIssues && issues.some(issue => !issue.textRange);
+    const hasFileIssues = displayIssues && issues.some((issue) => !issue.textRange);
 
     return (
       <div className="source-viewer-code">
@@ -229,7 +230,8 @@ export default class SourceViewerCode extends React.PureComponent<Props> {
             ) : (
               <Button
                 className="js-component-viewer-source-before"
-                onClick={this.props.loadSourcesBefore}>
+                onClick={this.props.loadSourcesBefore}
+              >
                 {translate('source_viewer.load_more_code')}
               </Button>
             )}
@@ -244,7 +246,7 @@ export default class SourceViewerCode extends React.PureComponent<Props> {
                 index: -1,
                 displayCoverage,
                 displayDuplications,
-                displayIssues
+                displayIssues,
               })}
             {sources.map((line, index) =>
               this.renderLine({ line, index, displayCoverage, displayDuplications, displayIssues })
@@ -264,7 +266,8 @@ export default class SourceViewerCode extends React.PureComponent<Props> {
             ) : (
               <Button
                 className="js-component-viewer-source-after"
-                onClick={this.props.loadSourcesAfter}>
+                onClick={this.props.loadSourcesAfter}
+              >
                 {translate('source_viewer.load_more_code')}
               </Button>
             )}
diff --git a/server/sonar-web/src/main/js/components/SourceViewer/SourceViewerContext.tsx b/server/sonar-web/src/main/js/components/SourceViewer/SourceViewerContext.tsx
index 8fa5d175560..10f57ee9571 100644
--- a/server/sonar-web/src/main/js/components/SourceViewer/SourceViewerContext.tsx
+++ b/server/sonar-web/src/main/js/components/SourceViewer/SourceViewerContext.tsx
@@ -28,5 +28,5 @@ interface SourceViewerContextShape {
 
 export const SourceViewerContext = React.createContext<SourceViewerContextShape>({
   branchLike: {} as BranchLike,
-  file: {} as SourceViewerFile
+  file: {} as SourceViewerFile,
 });
diff --git a/server/sonar-web/src/main/js/components/SourceViewer/SourceViewerHeader.tsx b/server/sonar-web/src/main/js/components/SourceViewer/SourceViewerHeader.tsx
index 214f55f1419..17892e4124d 100644
--- a/server/sonar-web/src/main/js/components/SourceViewer/SourceViewerHeader.tsx
+++ b/server/sonar-web/src/main/js/components/SourceViewer/SourceViewerHeader.tsx
@@ -37,7 +37,7 @@ import {
   getCodeUrl,
   getComponentIssuesUrl,
   getComponentSecurityHotspotsUrl,
-  getPathUrlAsString
+  getPathUrlAsString,
 } from '../../helpers/urls';
 import { BranchLike } from '../../types/branch-like';
 import { ComponentQualifier } from '../../types/component';
@@ -90,11 +90,11 @@ export default class SourceViewerHeader extends React.PureComponent<Props, State
               ...getBranchLikeQuery(branchLike),
               files: sourceViewerFile.path,
               resolved: 'false',
-              types: type
+              types: type,
             };
 
             const measure = componentMeasures.find(
-              m => m.metric === ISSUETYPE_METRIC_KEYS_MAP[type].metric
+              (m) => m.metric === ISSUETYPE_METRIC_KEYS_MAP[type].metric
             );
 
             const linkUrl =
@@ -136,7 +136,8 @@ export default class SourceViewerHeader extends React.PureComponent<Props, State
             <div className="component-name-parent">
               <a
                 className="link-no-underline"
-                href={getPathUrlAsString(getBranchLikeUrl(project, this.props.branchLike))}>
+                href={getPathUrlAsString(getBranchLikeUrl(project, this.props.branchLike))}
+              >
                 <QualifierIcon qualifier={ComponentQualifier.Project} /> <span>{projectName}</span>
               </a>
             </div>
@@ -216,7 +217,8 @@ export default class SourceViewerHeader extends React.PureComponent<Props, State
                   className="js-new-window"
                   rel="noopener noreferrer"
                   target="_blank"
-                  to={getCodeUrl(this.props.sourceViewerFile.project, this.props.branchLike, key)}>
+                  to={getCodeUrl(this.props.sourceViewerFile.project, this.props.branchLike, key)}
+                >
                   {translate('component_viewer.new_window')}
                 </Link>
               </li>
@@ -232,13 +234,15 @@ export default class SourceViewerHeader extends React.PureComponent<Props, State
                   className="js-raw-source"
                   href={rawSourcesLink}
                   rel="noopener noreferrer"
-                  target="_blank">
+                  target="_blank"
+                >
                   {translate('component_viewer.show_raw_source')}
                 </a>
               </li>
             </ul>
           }
-          overlayPlacement={PopupPlacement.BottomRight}>
+          overlayPlacement={PopupPlacement.BottomRight}
+        >
           <ButtonIcon className="js-actions" aria-label={translate('component_viewer.action_menu')}>
             <ListIcon />
           </ButtonIcon>
diff --git a/server/sonar-web/src/main/js/components/SourceViewer/__tests__/SourceViewer-it.tsx b/server/sonar-web/src/main/js/components/SourceViewer/__tests__/SourceViewer-it.tsx
index 9ad5f0ba05e..3e445208c1a 100644
--- a/server/sonar-web/src/main/js/components/SourceViewer/__tests__/SourceViewer-it.tsx
+++ b/server/sonar-web/src/main/js/components/SourceViewer/__tests__/SourceViewer-it.tsx
@@ -32,19 +32,19 @@ jest.mock('../../../api/components');
 jest.mock('../../../api/issues');
 jest.mock('../helpers/loadIssues', () => ({
   __esModule: true,
-  default: jest.fn().mockResolvedValue([])
+  default: jest.fn().mockResolvedValue([]),
 }));
 jest.mock('../helpers/lines', () => {
   const lines = jest.requireActual('../helpers/lines');
   return {
     ...lines,
-    LINES_TO_LOAD: 20
+    LINES_TO_LOAD: 20,
   };
 });
 
 const ui = {
   codeSmellTypeButton: byRole('button', { name: 'issue.type.CODE_SMELL' }),
-  minorSeverityButton: byRole('button', { name: 'severity.MINOR' })
+  minorSeverityButton: byRole('button', { name: 'severity.MINOR' }),
 };
 
 const handler = new SourceViewerServiceMock();
@@ -61,12 +61,12 @@ it('should show a permalink on line number', async () => {
   const rowScreen = within(row);
   await user.click(
     rowScreen.getByRole('button', {
-      name: 'source_viewer.line_X.1'
+      name: 'source_viewer.line_X.1',
     })
   );
   await user.click(
     rowScreen.getByRole('button', {
-      name: 'component_viewer.copy_permalink'
+      name: 'component_viewer.copy_permalink',
     })
   );
 
@@ -95,13 +95,13 @@ it('should show a permalink on line number', async () => {
   const lowerRowScreen = within(row);
   await user.click(
     lowerRowScreen.getByRole('button', {
-      name: 'source_viewer.line_X.6'
+      name: 'source_viewer.line_X.6',
     })
   );
 
   expect(
     lowerRowScreen.getByRole('button', {
-      name: 'component_viewer.copy_permalink'
+      name: 'component_viewer.copy_permalink',
     })
   ).toBeInTheDocument();
 
@@ -114,11 +114,11 @@ it('should show issue on empty file', async () => {
       key: 'first-issue',
       message: 'First Issue',
       line: undefined,
-      textRange: undefined
-    })
+      textRange: undefined,
+    }),
   ]);
   renderSourceViewer({
-    component: handler.getEmptyFile()
+    component: handler.getEmptyFile(),
   });
   expect(await screen.findByRole('table')).toBeInTheDocument();
   expect(await screen.findByRole('row', { name: 'First Issue' })).toBeInTheDocument();
@@ -131,8 +131,8 @@ it('should be able to interact with issue action', async () => {
       key: 'first-issue',
       message: 'First Issue',
       line: 1,
-      textRange: { startLine: 1, endLine: 1, startOffset: 0, endOffset: 1 }
-    })
+      textRange: { startLine: 1, endLine: 1, startOffset: 0, endOffset: 1 },
+    }),
   ]);
   const user = userEvent.setup();
   renderSourceViewer();
@@ -146,7 +146,7 @@ it('should be able to interact with issue action', async () => {
   // Open severity
   await user.click(
     await screen.findByRole('button', {
-      name: 'issue.severity.severity_x_click_to_change.severity.MAJOR'
+      name: 'issue.severity.severity_x_click_to_change.severity.MAJOR',
     })
   );
   expect(ui.minorSeverityButton.get()).toBeInTheDocument();
@@ -158,14 +158,14 @@ it('should be able to interact with issue action', async () => {
   // Change the severity
   await user.click(
     await screen.findByRole('button', {
-      name: 'issue.severity.severity_x_click_to_change.severity.MAJOR'
+      name: 'issue.severity.severity_x_click_to_change.severity.MAJOR',
     })
   );
   expect(ui.minorSeverityButton.get()).toBeInTheDocument();
   await user.click(ui.minorSeverityButton.get());
   expect(
     screen.getByRole('button', {
-      name: 'issue.severity.severity_x_click_to_change.severity.MINOR'
+      name: 'issue.severity.severity_x_click_to_change.severity.MINOR',
     })
   ).toBeInTheDocument();
 });
@@ -173,7 +173,7 @@ it('should be able to interact with issue action', async () => {
 it('should load line when looking arround unloaded line', async () => {
   const { rerender } = renderSourceViewer({
     aroundLine: 50,
-    component: handler.getHugeFile()
+    component: handler.getHugeFile(),
   });
   expect(await screen.findByRole('row', { name: /Line 50$/ })).toBeInTheDocument();
   rerender(getSourceViewerUi({ aroundLine: 100, component: handler.getHugeFile() }));
@@ -192,8 +192,7 @@ it('should show SCM information', async () => {
   ).toBeInTheDocument();
   await user.click(
     firstRowScreen.getByRole('button', {
-      name:
-        'source_viewer.author_X.stas.vilchik@sonarsource.com, source_viewer.click_for_scm_info.1'
+      name: 'source_viewer.author_X.stas.vilchik@sonarsource.com, source_viewer.click_for_scm_info.1',
     })
   );
 
@@ -220,8 +219,7 @@ it('should show SCM information', async () => {
   const fourthRowScreen = within(row);
   await user.click(
     fourthRowScreen.getByRole('button', {
-      name:
-        'source_viewer.author_X.stas.vilchik@sonarsource.com, source_viewer.click_for_scm_info.4'
+      name: 'source_viewer.author_X.stas.vilchik@sonarsource.com, source_viewer.click_for_scm_info.4',
     })
   );
 
@@ -231,7 +229,7 @@ it('should show SCM information', async () => {
   expect(
     fourthRowScreen.queryByRole('heading', {
       level: 4,
-      name: 'source_viewer.tooltip.scm.commited_on'
+      name: 'source_viewer.tooltip.scm.commited_on',
     })
   ).not.toBeInTheDocument();
   expect(
@@ -245,7 +243,7 @@ it('should show SCM information', async () => {
   expect(fithRowScreen.getByText('…')).toBeInTheDocument();
   await user.click(
     fithRowScreen.getByRole('button', {
-      name: 'source_viewer.click_for_scm_info.5'
+      name: 'source_viewer.click_for_scm_info.5',
     })
   );
 
@@ -255,7 +253,7 @@ it('should show SCM information', async () => {
   expect(
     fithRowScreen.queryByRole('heading', {
       level: 4,
-      name: 'source_viewer.tooltip.scm.commited_on'
+      name: 'source_viewer.tooltip.scm.commited_on',
     })
   ).not.toBeInTheDocument();
   expect(
@@ -264,7 +262,7 @@ it('should show SCM information', async () => {
 
   // No SCM Popup
   row = await screen.findByRole('row', {
-    name: /\* This program is free software; you can redistribute it and\/or$/
+    name: /\* This program is free software; you can redistribute it and\/or$/,
   });
   expect(row).toBeInTheDocument();
   expect(within(row).queryByRole('button')).not.toBeInTheDocument();
@@ -276,28 +274,27 @@ it('should show issue indicator', async () => {
       key: 'first-issue',
       message: 'First Issue',
       line: 1,
-      textRange: { startLine: 1, endLine: 1, startOffset: 0, endOffset: 1 }
+      textRange: { startLine: 1, endLine: 1, startOffset: 0, endOffset: 1 },
     }),
     mockIssue(false, {
       key: 'second-issue',
       message: 'Second Issue',
       line: 1,
-      textRange: { startLine: 1, endLine: 1, startOffset: 1, endOffset: 2 }
-    })
+      textRange: { startLine: 1, endLine: 1, startOffset: 1, endOffset: 2 },
+    }),
   ]);
   const user = userEvent.setup();
   const onIssueSelect = jest.fn();
   renderSourceViewer({
     onIssueSelect,
-    displayAllIssues: false
+    displayAllIssues: false,
   });
   const row = await screen.findByRole('row', { name: /.*\/ \*$/ });
   const issueRow = within(row);
   expect(issueRow.getByText('2')).toBeInTheDocument();
   await user.click(
     issueRow.getByRole('button', {
-      name:
-        'source_viewer.issues_on_line.X_issues_of_type_Y.source_viewer.issues_on_line.show.2.issue.type.BUG.plural'
+      name: 'source_viewer.issues_on_line.X_issues_of_type_Y.source_viewer.issues_on_line.show.2.issue.type.BUG.plural',
     })
   );
   const firstIssueBox = issueRow.getByRole('region', { name: 'First Issue' });
@@ -306,8 +303,7 @@ it('should show issue indicator', async () => {
   expect(secondIssueBox).toBeInTheDocument();
   expect(
     issueRow.getByRole('button', {
-      name:
-        'source_viewer.issues_on_line.X_issues_of_type_Y.source_viewer.issues_on_line.hide.2.issue.type.BUG.plural'
+      name: 'source_viewer.issues_on_line.X_issues_of_type_Y.source_viewer.issues_on_line.hide.2.issue.type.BUG.plural',
     })
   ).toBeInTheDocument();
 
@@ -381,7 +377,7 @@ it('should highlight symbol', async () => {
   await user.click(symbols[0]);
 
   // For now just check the class. Maybe found a better accessible way of showing higlighted symbole
-  symbols.forEach(element => {
+  symbols.forEach((element) => {
     expect(element).toHaveClass('highlighted');
   });
 });
diff --git a/server/sonar-web/src/main/js/components/SourceViewer/__tests__/SourceViewer-test.tsx b/server/sonar-web/src/main/js/components/SourceViewer/__tests__/SourceViewer-test.tsx
index e59897ea35e..7a7507a9f5e 100644
--- a/server/sonar-web/src/main/js/components/SourceViewer/__tests__/SourceViewer-test.tsx
+++ b/server/sonar-web/src/main/js/components/SourceViewer/__tests__/SourceViewer-test.tsx
@@ -32,7 +32,7 @@ jest.mock('../helpers/loadIssues', () => jest.fn().mockRejectedValue({}));
 jest.mock('../../../api/components', () => ({
   getComponentForSourceViewer: jest.fn().mockRejectedValue(''),
   getComponentData: jest.fn().mockRejectedValue(''),
-  getSources: jest.fn().mockRejectedValue('')
+  getSources: jest.fn().mockRejectedValue(''),
 }));
 
 beforeEach(() => {
@@ -47,7 +47,7 @@ it('should render correctly', async () => {
   (defaultLoadIssues as jest.Mock).mockResolvedValueOnce([mockIssue()]);
   (getComponentForSourceViewer as jest.Mock).mockResolvedValueOnce(mockSourceViewerFile());
   (getComponentData as jest.Mock).mockResolvedValueOnce({
-    component: { leakPeriodDate: '2018-06-20T17:12:19+0200' }
+    component: { leakPeriodDate: '2018-06-20T17:12:19+0200' },
   });
   (getSources as jest.Mock).mockResolvedValueOnce([]);
 
@@ -60,11 +60,11 @@ it('should render correctly', async () => {
 it('should load sources before', async () => {
   (defaultLoadIssues as jest.Mock).mockResolvedValueOnce([
     mockIssue(false, { key: 'issue1' }),
-    mockIssue(false, { key: 'issue2' })
+    mockIssue(false, { key: 'issue2' }),
   ]);
   (getComponentForSourceViewer as jest.Mock).mockResolvedValueOnce(mockSourceViewerFile());
   (getComponentData as jest.Mock).mockResolvedValueOnce({
-    component: { leakPeriodDate: '2018-06-20T17:12:19+0200' }
+    component: { leakPeriodDate: '2018-06-20T17:12:19+0200' },
   });
   (getSources as jest.Mock)
     .mockResolvedValueOnce([mockSourceLine()])
@@ -87,11 +87,11 @@ it('should load sources before', async () => {
 it('should load sources after', async () => {
   (defaultLoadIssues as jest.Mock).mockResolvedValueOnce([
     mockIssue(false, { key: 'issue1' }),
-    mockIssue(false, { key: 'issue2' })
+    mockIssue(false, { key: 'issue2' }),
   ]);
   (getComponentForSourceViewer as jest.Mock).mockResolvedValueOnce(mockSourceViewerFile());
   (getComponentData as jest.Mock).mockResolvedValueOnce({
-    component: { leakPeriodDate: '2018-06-20T17:12:19+0200' }
+    component: { leakPeriodDate: '2018-06-20T17:12:19+0200' },
   });
   (getSources as jest.Mock)
     .mockResolvedValueOnce([mockSourceLine()])
diff --git a/server/sonar-web/src/main/js/components/SourceViewer/__tests__/SourceViewerCode-test.tsx b/server/sonar-web/src/main/js/components/SourceViewer/__tests__/SourceViewerCode-test.tsx
index 746d7cd495b..c8d2ded1b57 100644
--- a/server/sonar-web/src/main/js/components/SourceViewer/__tests__/SourceViewerCode-test.tsx
+++ b/server/sonar-web/src/main/js/components/SourceViewer/__tests__/SourceViewerCode-test.tsx
@@ -30,40 +30,20 @@ it('should correctly flag a line for scrolling', () => {
   const sources = [
     mockSourceLine({ line: 1, coverageStatus: 'covered', isNew: false }),
     mockSourceLine({ line: 2, coverageStatus: 'partially-covered', isNew: false }),
-    mockSourceLine({ line: 3, coverageStatus: 'uncovered', isNew: true })
+    mockSourceLine({ line: 3, coverageStatus: 'uncovered', isNew: true }),
   ];
   let wrapper = shallowRender({ sources, metricKey: MetricKey.uncovered_lines });
 
-  expect(
-    wrapper
-      .find(Line)
-      .at(1)
-      .props().scrollToUncoveredLine
-  ).toBe(true);
-  expect(
-    wrapper
-      .find(Line)
-      .at(2)
-      .props().scrollToUncoveredLine
-  ).toBe(false);
+  expect(wrapper.find(Line).at(1).props().scrollToUncoveredLine).toBe(true);
+  expect(wrapper.find(Line).at(2).props().scrollToUncoveredLine).toBe(false);
 
   wrapper = shallowRender({
     sources,
-    metricKey: MetricKey.new_uncovered_lines
+    metricKey: MetricKey.new_uncovered_lines,
   });
 
-  expect(
-    wrapper
-      .find(Line)
-      .at(1)
-      .props().scrollToUncoveredLine
-  ).toBe(false);
-  expect(
-    wrapper
-      .find(Line)
-      .at(2)
-      .props().scrollToUncoveredLine
-  ).toBe(true);
+  expect(wrapper.find(Line).at(1).props().scrollToUncoveredLine).toBe(false);
+  expect(wrapper.find(Line).at(2).props().scrollToUncoveredLine).toBe(true);
 });
 
 function shallowRender(props: Partial<SourceViewerCode['props']> = {}) {
diff --git a/server/sonar-web/src/main/js/components/SourceViewer/__tests__/SourceViewerHeader-test.tsx b/server/sonar-web/src/main/js/components/SourceViewer/__tests__/SourceViewerHeader-test.tsx
index fea1c7eda90..414dd68e762 100644
--- a/server/sonar-web/src/main/js/components/SourceViewer/__tests__/SourceViewerHeader-test.tsx
+++ b/server/sonar-web/src/main/js/components/SourceViewer/__tests__/SourceViewerHeader-test.tsx
@@ -36,8 +36,8 @@ it('should render correctly for a unit test', () => {
       showMeasures: true,
       sourceViewerFile: mockSourceViewerFile('foo/bar.ts', 'my-project', {
         q: ComponentQualifier.TestFile,
-        measures: { tests: '12' }
-      })
+        measures: { tests: '12' },
+      }),
     })
   ).toMatchSnapshot();
 });
@@ -47,20 +47,20 @@ it('should render correctly if issue details are passed', () => {
     { metric: MetricKey.code_smells, value: '1' },
     { metric: MetricKey.file_complexity_distribution, value: '42' }, // unused, should be ignored
     { metric: MetricKey.security_hotspots, value: '2' },
-    { metric: MetricKey.vulnerabilities, value: '2' }
+    { metric: MetricKey.vulnerabilities, value: '2' },
   ];
 
   expect(
     shallowRender({
       componentMeasures,
-      showMeasures: true
+      showMeasures: true,
     })
   ).toMatchSnapshot();
 
   expect(
     shallowRender({
       componentMeasures,
-      showMeasures: false
+      showMeasures: false,
     })
       .find('.source-viewer-header-measure')
       .exists()
diff --git a/server/sonar-web/src/main/js/components/SourceViewer/components/DuplicationPopup.tsx b/server/sonar-web/src/main/js/components/SourceViewer/components/DuplicationPopup.tsx
index 1b392a2cb99..fde7342c1b8 100644
--- a/server/sonar-web/src/main/js/components/SourceViewer/components/DuplicationPopup.tsx
+++ b/server/sonar-web/src/main/js/components/SourceViewer/components/DuplicationPopup.tsx
@@ -57,7 +57,7 @@ export default class DuplicationPopup extends React.PureComponent<Props> {
       this.props.openComponent({
         branchLike: this.props.branchLike,
         key,
-        line: line ? Number(line) : undefined
+        line: line ? Number(line) : undefined,
       });
     }
   };
@@ -69,7 +69,8 @@ export default class DuplicationPopup extends React.PureComponent<Props> {
         data-line={line}
         href="#"
         onClick={this.handleFileClick}
-        title={file.name}>
+        title={file.name}
+      >
         {children}
       </a>
     ) : (
@@ -81,10 +82,10 @@ export default class DuplicationPopup extends React.PureComponent<Props> {
     const { duplicatedFiles = {}, sourceViewerFile } = this.props;
 
     const groupedBlocks = groupBy(this.props.blocks, '_ref');
-    let duplications = Object.keys(groupedBlocks).map(fileRef => {
+    let duplications = Object.keys(groupedBlocks).map((fileRef) => {
       return {
         blocks: groupedBlocks[fileRef],
-        file: duplicatedFiles[fileRef]
+        file: duplicatedFiles[fileRef],
       };
     });
 
@@ -94,8 +95,8 @@ export default class DuplicationPopup extends React.PureComponent<Props> {
     // then duplications in other projects
     duplications = sortBy(
       duplications,
-      d => d.file.projectName !== sourceViewerFile.projectName,
-      d => d.file.key !== sourceViewerFile.key
+      (d) => d.file.projectName !== sourceViewerFile.projectName,
+      (d) => d.file.key !== sourceViewerFile.key
     );
 
     return (
@@ -110,7 +111,7 @@ export default class DuplicationPopup extends React.PureComponent<Props> {
             <h6 className="spacer-bottom">
               {translate('component_viewer.transition.duplication')}
             </h6>
-            {duplications.map(duplication => (
+            {duplications.map((duplication) => (
               <div className="spacer-top text-ellipsis" key={duplication.file.key}>
                 <div className="component-name">
                   {this.isDifferentComponent(duplication.file, this.props.sourceViewerFile) && (
diff --git a/server/sonar-web/src/main/js/components/SourceViewer/components/Line.tsx b/server/sonar-web/src/main/js/components/SourceViewer/components/Line.tsx
index bafb2d54376..e3511eeb6fc 100644
--- a/server/sonar-web/src/main/js/components/SourceViewer/components/Line.tsx
+++ b/server/sonar-web/src/main/js/components/SourceViewer/components/Line.tsx
@@ -104,7 +104,7 @@ export default class Line extends React.PureComponent<Props> {
       previousLine,
       scrollToUncoveredLine,
       secondaryIssueLocations,
-      verticalBuffer
+      verticalBuffer,
     } = this.props;
 
     const className = classNames('source-line', {
@@ -113,7 +113,7 @@ export default class Line extends React.PureComponent<Props> {
       'source-line-filtered-dark':
         displayCoverage &&
         (line.coverageStatus === 'uncovered' || line.coverageStatus === 'partially-covered'),
-      'source-line-last': last === true
+      'source-line-last': last === true,
     });
 
     const bottomPadding = verticalBuffer ? verticalBuffer * LINE_HEIGHT : undefined;
@@ -150,7 +150,7 @@ export default class Line extends React.PureComponent<Props> {
         )}
 
         {blocksLoaded &&
-          times(duplicationsCount - 1, index => {
+          times(duplicationsCount - 1, (index) => {
             return (
               <LineDuplicationBlock
                 blocksLoaded={blocksLoaded}
@@ -176,7 +176,8 @@ export default class Line extends React.PureComponent<Props> {
           onLocationSelect={this.props.onLocationSelect}
           onSymbolClick={this.props.onSymbolClick}
           padding={bottomPadding}
-          secondaryIssueLocations={secondaryIssueLocations}>
+          secondaryIssueLocations={secondaryIssueLocations}
+        >
           {children}
         </LineCode>
       </tr>
diff --git a/server/sonar-web/src/main/js/components/SourceViewer/components/LineCode.tsx b/server/sonar-web/src/main/js/components/SourceViewer/components/LineCode.tsx
index b095392a2e3..e14ce3f6e4f 100644
--- a/server/sonar-web/src/main/js/components/SourceViewer/components/LineCode.tsx
+++ b/server/sonar-web/src/main/js/components/SourceViewer/components/LineCode.tsx
@@ -27,7 +27,7 @@ import {
   highlightIssueLocations,
   highlightSymbol,
   splitByTokens,
-  Token
+  Token,
 } from '../helpers/highlight';
 
 interface Props {
@@ -91,10 +91,10 @@ export default class LineCode extends React.PureComponent<React.PropsWithChildre
 
     tokens.forEach((token, index) => {
       if (this.props.displayLocationMarkers && token.markers.length > 0) {
-        token.markers.forEach(marker => {
+        token.markers.forEach((marker) => {
           const selected =
             highlightedLocationMessage !== undefined && highlightedLocationMessage.index === marker;
-          const loc = secondaryIssueLocations.find(loc => loc.index === marker);
+          const loc = secondaryIssueLocations.find((loc) => loc.index === marker);
           const message = loc && loc.text;
           renderedTokens.push(this.renderMarker(marker, message, selected, leadingMarker));
         });
@@ -123,9 +123,10 @@ export default class LineCode extends React.PureComponent<React.PropsWithChildre
           onClick={onClick}
           selected={selected}
           aria-current={selected ? 'location' : false}
-          aria-label={message ? `${index + 1}-${message}` : index + 1}>
+          aria-label={message ? `${index + 1}-${message}` : index + 1}
+        >
           <IssueSourceViewerScrollContext.Consumer>
-            {ctx => (
+            {(ctx) => (
               <span ref={selected ? ctx?.registerSelectedSecondaryLocationRef : undefined}>
                 {index + 1}
               </span>
@@ -145,7 +146,7 @@ export default class LineCode extends React.PureComponent<React.PropsWithChildre
       issueLocations,
       line,
       padding,
-      secondaryIssueLocations
+      secondaryIssueLocations,
     } = this.props;
 
     const container = document.createElement('div');
@@ -154,7 +155,7 @@ export default class LineCode extends React.PureComponent<React.PropsWithChildre
     let tokens = splitByTokens(container.childNodes);
 
     if (highlightedSymbols) {
-      highlightedSymbols.forEach(symbol => {
+      highlightedSymbols.forEach((symbol) => {
         tokens = highlightSymbol(tokens, symbol);
       });
     }
@@ -168,7 +169,7 @@ export default class LineCode extends React.PureComponent<React.PropsWithChildre
 
       if (highlightedLocationMessage) {
         const location = secondaryIssueLocations.find(
-          location => location.index === highlightedLocationMessage.index
+          (location) => location.index === highlightedLocationMessage.index
         );
         if (location) {
           tokens = highlightIssueLocations(tokens, [location], 'selected');
@@ -184,7 +185,8 @@ export default class LineCode extends React.PureComponent<React.PropsWithChildre
       <td
         className={classNames('source-line-code code', className)}
         data-line-number={line.line}
-        style={style}>
+        style={style}
+      >
         <div className="source-line-code-inner">
           <pre ref={this.nodeNodeRef}>{renderedTokens}</pre>
         </div>
diff --git a/server/sonar-web/src/main/js/components/SourceViewer/components/LineCoverage.tsx b/server/sonar-web/src/main/js/components/SourceViewer/components/LineCoverage.tsx
index c5d69b53b40..74e4733c1e5 100644
--- a/server/sonar-web/src/main/js/components/SourceViewer/components/LineCoverage.tsx
+++ b/server/sonar-web/src/main/js/components/SourceViewer/components/LineCoverage.tsx
@@ -34,7 +34,7 @@ export function LineCoverage({ line, scrollToUncoveredLine }: LineCoverageProps)
       coverageMarker.current.scrollIntoView({
         behavior: 'smooth',
         block: 'center',
-        inline: 'center'
+        inline: 'center',
       });
     }
   }, [scrollToUncoveredLine, coverageMarker]);
diff --git a/server/sonar-web/src/main/js/components/SourceViewer/components/LineDuplicationBlock.tsx b/server/sonar-web/src/main/js/components/SourceViewer/components/LineDuplicationBlock.tsx
index 038acbf733b..2892289a92f 100644
--- a/server/sonar-web/src/main/js/components/SourceViewer/components/LineDuplicationBlock.tsx
+++ b/server/sonar-web/src/main/js/components/SourceViewer/components/LineDuplicationBlock.tsx
@@ -41,7 +41,7 @@ export function LineDuplicationBlock(props: LineDuplicationBlockProps) {
   const [dropdownOpen, setDropdownOpen] = React.useState(false);
 
   const className = classNames('source-meta', 'source-line-duplications', {
-    'source-line-duplicated': duplicated
+    'source-line-duplicated': duplicated,
   });
 
   const tooltip = dropdownOpen ? undefined : translate('source_viewer.tooltip.duplicated_block');
@@ -57,7 +57,8 @@ export function LineDuplicationBlock(props: LineDuplicationBlockProps) {
               <DropdownOverlay placement={PopupPlacement.RightTop}>
                 {props.renderDuplicationPopup(index, line.line)}
               </DropdownOverlay>
-            }>
+            }
+          >
             <ButtonPlain
               aria-label={translate('source_viewer.tooltip.duplicated_block')}
               className="source-line-bar"
diff --git a/server/sonar-web/src/main/js/components/SourceViewer/components/LineIssuesIndicator.tsx b/server/sonar-web/src/main/js/components/SourceViewer/components/LineIssuesIndicator.tsx
index e824642f4d3..ba8de19f3f6 100644
--- a/server/sonar-web/src/main/js/components/SourceViewer/components/LineIssuesIndicator.tsx
+++ b/server/sonar-web/src/main/js/components/SourceViewer/components/LineIssuesIndicator.tsx
@@ -38,7 +38,7 @@ export function LineIssuesIndicator(props: LineIssuesIndicatorProps) {
   const { issues, issuesOpen, line } = props;
   const hasIssues = issues.length > 0;
   const className = classNames('source-meta', 'source-line-issues', {
-    'source-line-with-issues': hasIssues
+    'source-line-with-issues': hasIssues,
   });
 
   if (!hasIssues) {
@@ -46,7 +46,7 @@ export function LineIssuesIndicator(props: LineIssuesIndicatorProps) {
   }
 
   const mostImportantIssue = sortByType(issues)[0];
-  const issueTypes = uniq(issues.map(i => i.type));
+  const issueTypes = uniq(issues.map((i) => i.type));
 
   const tooltipShowHide = translate('source_viewer.issues_on_line', issuesOpen ? 'hide' : 'show');
   let tooltipContent;
diff --git a/server/sonar-web/src/main/js/components/SourceViewer/components/LineIssuesList.tsx b/server/sonar-web/src/main/js/components/SourceViewer/components/LineIssuesList.tsx
index 3bd7852163b..74ab3eec86f 100644
--- a/server/sonar-web/src/main/js/components/SourceViewer/components/LineIssuesList.tsx
+++ b/server/sonar-web/src/main/js/components/SourceViewer/components/LineIssuesList.tsx
@@ -48,7 +48,7 @@ export default function LineIssuesList(props: LineIssuesListProps) {
     selectedIssue,
     issuesForLine,
     issueLocationsByLine,
-    issuePopup
+    issuePopup,
   } = props;
 
   const showIssues = openIssuesByLine[line.line] || displayAllIssues;
@@ -57,7 +57,7 @@ export default function LineIssuesList(props: LineIssuesListProps) {
   if (showIssues && issuesForLine.length > 0) {
     displayedIssue = issuesForLine;
   } else if (selectedIssue && !showIssues && issueLocations.length) {
-    displayedIssue = issuesForLine.filter(i => i.key === selectedIssue);
+    displayedIssue = issuesForLine.filter((i) => i.key === selectedIssue);
   }
 
   if (displayedIssue.length === 0) {
@@ -65,7 +65,7 @@ export default function LineIssuesList(props: LineIssuesListProps) {
   }
   return (
     <div className="issue-list">
-      {displayedIssue.map(issue => (
+      {displayedIssue.map((issue) => (
         <Issue
           branchLike={props.branchLike}
           displayWhyIsThisAnIssue={displayWhyIsThisAnIssue}
diff --git a/server/sonar-web/src/main/js/components/SourceViewer/components/LineNumber.tsx b/server/sonar-web/src/main/js/components/SourceViewer/components/LineNumber.tsx
index 55ba93354d3..da70a614bdd 100644
--- a/server/sonar-web/src/main/js/components/SourceViewer/components/LineNumber.tsx
+++ b/server/sonar-web/src/main/js/components/SourceViewer/components/LineNumber.tsx
@@ -42,12 +42,14 @@ export function LineNumber({ displayOptions, firstLineNumber, line }: LineNumber
           closeOnClickOutside={true}
           onRequestClose={() => setOpen(false)}
           open={isOpen}
-          overlay={<LineOptionsPopup firstLineNumber={firstLineNumber} line={line} />}>
+          overlay={<LineOptionsPopup firstLineNumber={firstLineNumber} line={line} />}
+        >
           <ButtonPlain
             aria-expanded={isOpen}
             aria-haspopup={true}
             aria-label={translateWithParameters('source_viewer.line_X', lineNumber)}
-            onClick={() => setOpen(true)}>
+            onClick={() => setOpen(true)}
+          >
             {lineNumber}
           </ButtonPlain>
         </Toggler>
diff --git a/server/sonar-web/src/main/js/components/SourceViewer/components/LineOptionsPopup.tsx b/server/sonar-web/src/main/js/components/SourceViewer/components/LineOptionsPopup.tsx
index ef523ceb15f..a0b20cea80d 100644
--- a/server/sonar-web/src/main/js/components/SourceViewer/components/LineOptionsPopup.tsx
+++ b/server/sonar-web/src/main/js/components/SourceViewer/components/LineOptionsPopup.tsx
@@ -42,12 +42,14 @@ export function LineOptionsPopup({ firstLineNumber, line }: LineOptionsPopupProp
           <DropdownOverlay
             className="big-spacer-left"
             noPadding={true}
-            placement={isAtTop ? PopupPlacement.BottomLeft : PopupPlacement.TopLeft}>
+            placement={isAtTop ? PopupPlacement.BottomLeft : PopupPlacement.TopLeft}
+          >
             <div className="padded source-viewer-bubble-popup nowrap">
               <ClipboardButton
                 className="button-link"
                 copyValue={codeUrl}
-                aria-label={translate('component_viewer.copy_permalink')}>
+                aria-label={translate('component_viewer.copy_permalink')}
+              >
                 {translate('component_viewer.copy_permalink')}
               </ClipboardButton>
             </div>
diff --git a/server/sonar-web/src/main/js/components/SourceViewer/components/MeasuresOverlay.tsx b/server/sonar-web/src/main/js/components/SourceViewer/components/MeasuresOverlay.tsx
index aba809cc6b6..ef12d330745 100644
--- a/server/sonar-web/src/main/js/components/SourceViewer/components/MeasuresOverlay.tsx
+++ b/server/sonar-web/src/main/js/components/SourceViewer/components/MeasuresOverlay.tsx
@@ -35,7 +35,7 @@ import { getLocalizedMetricName, translate } from '../../../helpers/l10n';
 import {
   enhanceMeasuresWithMetrics,
   formatMeasure,
-  getDisplayMetrics
+  getDisplayMetrics,
 } from '../../../helpers/measures';
 import { getBranchLikeUrl } from '../../../helpers/urls';
 import { BranchLike } from '../../../types/branch-like';
@@ -94,19 +94,19 @@ export default class MeasuresOverlay extends React.PureComponent<Props, State> {
   };
 
   fetchMeasures = () => {
-    return getAllMetrics().then(metrics => {
-      const metricKeys = getDisplayMetrics(metrics).map(metric => metric.key);
+    return getAllMetrics().then((metrics) => {
+      const metricKeys = getDisplayMetrics(metrics).map((metric) => metric.key);
 
       // eslint-disable-next-line promise/no-nesting
       return getMeasures({
         component: this.props.sourceViewerFile.key,
         metricKeys: metricKeys.join(),
-        ...getBranchLikeQuery(this.props.branchLike)
-      }).then(measures => {
+        ...getBranchLikeQuery(this.props.branchLike),
+      }).then((measures) => {
         const withMetrics = enhanceMeasuresWithMetrics(measures, metrics).filter(
-          measure => measure.metric
+          (measure) => measure.metric
         );
-        return keyBy(withMetrics, measure => measure.metric.key);
+        return keyBy(withMetrics, (measure) => measure.metric.key);
       });
     });
   };
@@ -116,17 +116,17 @@ export default class MeasuresOverlay extends React.PureComponent<Props, State> {
       {
         componentKeys: this.props.sourceViewerFile.key,
         resolved: 'false',
-        ...getBranchLikeQuery(this.props.branchLike)
+        ...getBranchLikeQuery(this.props.branchLike),
       },
       ['types', 'severities', 'tags']
     ).then(({ facets }) => {
-      const severitiesFacet = facets.find(f => f.property === 'severities');
-      const tagsFacet = facets.find(f => f.property === 'tags');
-      const typesFacet = facets.find(f => f.property === 'types');
+      const severitiesFacet = facets.find((f) => f.property === 'severities');
+      const tagsFacet = facets.find((f) => f.property === 'tags');
+      const typesFacet = facets.find((f) => f.property === 'types');
       return {
         severitiesFacet: severitiesFacet && severitiesFacet.values,
         tagsFacet: tagsFacet && tagsFacet.values,
-        typesFacet: typesFacet && (typesFacet.values as FacetValue<IssueType>[])
+        typesFacet: typesFacet && (typesFacet.values as FacetValue<IssueType>[]),
       };
     });
   };
@@ -192,20 +192,22 @@ export default class MeasuresOverlay extends React.PureComponent<Props, State> {
             <>
               {typesFacet && (
                 <div className="measures">
-                  {sortBy(typesFacet, f => ISSUE_TYPES.indexOf(f.val as IssueTypeEnum)).map(f => (
-                    <div className="measure measure-one-line" key={f.val}>
-                      <span className="measure-name">
-                        <IssueTypeIcon className="little-spacer-right" query={f.val} />
-                        {translate('issue.type', f.val)}
-                      </span>
-                      <span className="measure-value">{formatMeasure(f.count, 'SHORT_INT')}</span>
-                    </div>
-                  ))}
+                  {sortBy(typesFacet, (f) => ISSUE_TYPES.indexOf(f.val as IssueTypeEnum)).map(
+                    (f) => (
+                      <div className="measure measure-one-line" key={f.val}>
+                        <span className="measure-name">
+                          <IssueTypeIcon className="little-spacer-right" query={f.val} />
+                          {translate('issue.type', f.val)}
+                        </span>
+                        <span className="measure-value">{formatMeasure(f.count, 'SHORT_INT')}</span>
+                      </div>
+                    )
+                  )}
                 </div>
               )}
               {severitiesFacet && (
                 <div className="measures">
-                  {sortBy(severitiesFacet, f => SEVERITIES.indexOf(f.val)).map(f => (
+                  {sortBy(severitiesFacet, (f) => SEVERITIES.indexOf(f.val)).map((f) => (
                     <div className="measure measure-one-line" key={f.val}>
                       <span className="measure-name">
                         <SeverityHelper severity={f.val} />
@@ -217,7 +219,7 @@ export default class MeasuresOverlay extends React.PureComponent<Props, State> {
               )}
               {tagsFacet && (
                 <div className="measures">
-                  {tagsFacet.map(f => (
+                  {tagsFacet.map((f) => (
                     <div className="measure measure-one-line" key={f.val}>
                       <span className="measure-name">
                         <TagsIcon className="little-spacer-right" />
@@ -337,26 +339,26 @@ export default class MeasuresOverlay extends React.PureComponent<Props, State> {
             <span className="measure-name">{translate('metric_domain', domain)}</span>
           </div>
           {sortBy(
-            measures.filter(measure => measure.value !== undefined),
-            measure => getLocalizedMetricName(measure.metric)
-          ).map(measure => this.renderMeasure(measure))}
+            measures.filter((measure) => measure.value !== undefined),
+            (measure) => getLocalizedMetricName(measure.metric)
+          ).map((measure) => this.renderMeasure(measure))}
         </div>
       </div>
     );
   };
 
   renderAllMeasures = () => {
-    const domains = groupBy(Object.values(this.state.measures), measure => measure.metric.domain);
+    const domains = groupBy(Object.values(this.state.measures), (measure) => measure.metric.domain);
     const domainKeys = Object.keys(domains);
     const odd = domainKeys.filter((_, index) => index % 2 === 1);
     const even = domainKeys.filter((_, index) => index % 2 === 0);
     return (
       <div className="measures-viewer measures-viewer-secondary">
         <div className="measures-viewer-section">
-          {odd.map(domain => this.renderDomain(domain, domains[domain]))}
+          {odd.map((domain) => this.renderDomain(domain, domains[domain]))}
         </div>
         <div className="measures-viewer-section">
-          {even.map(domain => this.renderDomain(domain, domains[domain]))}
+          {even.map((domain) => this.renderDomain(domain, domains[domain]))}
         </div>
       </div>
     );
diff --git a/server/sonar-web/src/main/js/components/SourceViewer/components/MeasuresOverlayMeasure.tsx b/server/sonar-web/src/main/js/components/SourceViewer/components/MeasuresOverlayMeasure.tsx
index df6c2df4c1e..61a6db69fd3 100644
--- a/server/sonar-web/src/main/js/components/SourceViewer/components/MeasuresOverlayMeasure.tsx
+++ b/server/sonar-web/src/main/js/components/SourceViewer/components/MeasuresOverlayMeasure.tsx
@@ -38,7 +38,8 @@ export default function MeasuresOverlayMeasure({ measure }: Props) {
     <div
       className="measure measure-one-line"
       data-metric={measure.metric.key}
-      key={measure.metric.key}>
+      key={measure.metric.key}
+    >
       <span className="measure-name">
         {isMetricKey(measure.metric.key) &&
           [MetricKey.bugs, MetricKey.vulnerabilities, MetricKey.code_smells].includes(
diff --git a/server/sonar-web/src/main/js/components/SourceViewer/components/__tests__/Line-test.tsx b/server/sonar-web/src/main/js/components/SourceViewer/components/__tests__/Line-test.tsx
index 5d36ff80d13..24488004ab9 100644
--- a/server/sonar-web/src/main/js/components/SourceViewer/components/__tests__/Line-test.tsx
+++ b/server/sonar-web/src/main/js/components/SourceViewer/components/__tests__/Line-test.tsx
@@ -28,7 +28,7 @@ it('should render correctly for last, new, and highlighted lines', () => {
     shallowRender({
       highlighted: true,
       last: true,
-      line: mockSourceLine({ isNew: true })
+      line: mockSourceLine({ isNew: true }),
     })
   ).toMatchSnapshot();
 });
@@ -47,7 +47,7 @@ it('handles the opening and closing of issues', () => {
     onIssueSelect,
     onIssuesOpen,
     onIssueUnselect,
-    openIssues: true
+    openIssues: true,
   });
   const instance = wrapper.instance();
 
diff --git a/server/sonar-web/src/main/js/components/SourceViewer/components/__tests__/LineCode-test.tsx b/server/sonar-web/src/main/js/components/SourceViewer/components/__tests__/LineCode-test.tsx
index 5339dfc9828..e075d1bf2a9 100644
--- a/server/sonar-web/src/main/js/components/SourceViewer/components/__tests__/LineCode-test.tsx
+++ b/server/sonar-web/src/main/js/components/SourceViewer/components/__tests__/LineCode-test.tsx
@@ -30,8 +30,8 @@ it('render code', () => {
   expect(
     shallowRender({
       secondaryIssueLocations: [
-        { index: 1, from: 5, to: 6, line: 16, startLine: 16, text: 'secondary-location-msg' }
-      ]
+        { index: 1, from: 5, to: 6, line: 16, startLine: 16, text: 'secondary-location-msg' },
+      ],
     })
   ).toMatchSnapshot('with secondary location');
 });
diff --git a/server/sonar-web/src/main/js/components/SourceViewer/components/__tests__/LineCoverage-test.tsx b/server/sonar-web/src/main/js/components/SourceViewer/components/__tests__/LineCoverage-test.tsx
index 19e84a05c0a..885d8864781 100644
--- a/server/sonar-web/src/main/js/components/SourceViewer/components/__tests__/LineCoverage-test.tsx
+++ b/server/sonar-web/src/main/js/components/SourceViewer/components/__tests__/LineCoverage-test.tsx
@@ -25,14 +25,14 @@ jest.mock('react', () => {
   return {
     ...jest.requireActual('react'),
     useRef: jest.fn(),
-    useEffect: jest.fn()
+    useEffect: jest.fn(),
   };
 });
 
 it('should correctly trigger a scroll', () => {
   const scroll = jest.fn();
   const element = { current: { scrollIntoView: scroll } };
-  (React.useEffect as jest.Mock).mockImplementation(f => f());
+  (React.useEffect as jest.Mock).mockImplementation((f) => f());
   (React.useRef as jest.Mock).mockImplementation(() => element);
 
   shallowRender({ scrollToUncoveredLine: true });
diff --git a/server/sonar-web/src/main/js/components/SourceViewer/components/__tests__/LineIssueList-test.tsx b/server/sonar-web/src/main/js/components/SourceViewer/components/__tests__/LineIssueList-test.tsx
index 712221baa93..b7788091c8b 100644
--- a/server/sonar-web/src/main/js/components/SourceViewer/components/__tests__/LineIssueList-test.tsx
+++ b/server/sonar-web/src/main/js/components/SourceViewer/components/__tests__/LineIssueList-test.tsx
@@ -29,7 +29,7 @@ it('should render issues', () => {
     selectedIssue: 'issue',
     issueLocationsByLine: { '1': [{ from: 1, to: 1, line: 1 }] },
     line: mockSourceLine({ line: 1 }),
-    issuesForLine: [mockIssue(false, { key: 'issue' })]
+    issuesForLine: [mockIssue(false, { key: 'issue' })],
   });
   expect(wrapper).toMatchSnapshot();
 });
diff --git a/server/sonar-web/src/main/js/components/SourceViewer/components/__tests__/LineIssuesIndicator-test.tsx b/server/sonar-web/src/main/js/components/SourceViewer/components/__tests__/LineIssuesIndicator-test.tsx
index 21d20fbb05b..d8c571147ca 100644
--- a/server/sonar-web/src/main/js/components/SourceViewer/components/__tests__/LineIssuesIndicator-test.tsx
+++ b/server/sonar-web/src/main/js/components/SourceViewer/components/__tests__/LineIssuesIndicator-test.tsx
@@ -30,8 +30,8 @@ it('should render correctly', () => {
     shallowRender({
       issues: [
         mockIssue(false, { key: 'foo', type: 'VULNERABILITY' }),
-        mockIssue(false, { key: 'bar', type: 'VULNERABILITY' })
-      ]
+        mockIssue(false, { key: 'bar', type: 'VULNERABILITY' }),
+      ],
     })
   ).toMatchSnapshot('multiple issues, same type');
   expect(
@@ -53,7 +53,7 @@ function shallowRender(props: Partial<LineIssuesIndicatorProps> = {}) {
     <LineIssuesIndicator
       issues={[
         mockIssue(false, { key: 'foo', type: 'CODE_SMELL' }),
-        mockIssue(false, { key: 'bar', type: 'BUG' })
+        mockIssue(false, { key: 'bar', type: 'BUG' }),
       ]}
       line={{ line: 3 }}
       onClick={jest.fn()}
diff --git a/server/sonar-web/src/main/js/components/SourceViewer/components/__tests__/MeasuresOverlay-test.tsx b/server/sonar-web/src/main/js/components/SourceViewer/components/__tests__/MeasuresOverlay-test.tsx
index caf553c4d9f..d18de176968 100644
--- a/server/sonar-web/src/main/js/components/SourceViewer/components/__tests__/MeasuresOverlay-test.tsx
+++ b/server/sonar-web/src/main/js/components/SourceViewer/components/__tests__/MeasuresOverlay-test.tsx
@@ -35,8 +35,8 @@ jest.mock('../../../../api/issues', () => ({
           values: [
             { val: 'CODE_SMELL', count: 2 },
             { val: 'BUG', count: 1 },
-            { val: 'VULNERABILITY', count: 0 }
-          ]
+            { val: 'VULNERABILITY', count: 0 },
+          ],
         },
         {
           property: 'severities',
@@ -45,19 +45,19 @@ jest.mock('../../../../api/issues', () => ({
             { val: 'INFO', count: 2 },
             { val: 'MINOR', count: 3 },
             { val: 'CRITICAL', count: 4 },
-            { val: 'BLOCKER', count: 5 }
-          ]
+            { val: 'BLOCKER', count: 5 },
+          ],
         },
         {
           property: 'tags',
           values: [
             { val: 'bad-practice', count: 1 },
             { val: 'cert', count: 3 },
-            { val: 'design', count: 1 }
-          ]
-        }
-      ]
-    })
+            { val: 'design', count: 1 },
+          ],
+        },
+      ],
+    }),
 }));
 
 jest.mock('../../../../api/measures', () => ({
@@ -96,8 +96,8 @@ jest.mock('../../../../api/measures', () => ({
       { metric: MetricKey.statements, value: '3' },
       { metric: MetricKey.skipped_tests, value: '0' },
       { metric: MetricKey.test_failures, value: '0' },
-      { metric: MetricKey.violations, value: '1' }
-    ])
+      { metric: MetricKey.violations, value: '1' },
+    ]),
 }));
 
 jest.mock('../../../../api/metrics', () => ({
@@ -137,8 +137,8 @@ jest.mock('../../../../api/metrics', () => ({
       { key: MetricKey.violations, type: 'INT', domain: 'Issues' },
       // next two must be filtered out
       { key: 'data', type: 'DATA' },
-      { key: 'hidden', hidden: true }
-    ])
+      { key: 'hidden', hidden: true },
+    ]),
 }));
 
 const sourceViewerFile: SourceViewerFile = {
@@ -148,7 +148,7 @@ const sourceViewerFile: SourceViewerFile = {
   project: 'project-key',
   projectName: 'Project Name',
   q: ComponentQualifier.File,
-  uuid: 'abcd123'
+  uuid: 'abcd123',
 };
 
 const branchLike = mockBranch({ name: 'feature' });
@@ -164,7 +164,7 @@ it('should render source file', async () => {
 
 it('should render test file', async () => {
   const wrapper = shallowRender({
-    sourceViewerFile: { ...sourceViewerFile, q: ComponentQualifier.TestFile }
+    sourceViewerFile: { ...sourceViewerFile, q: ComponentQualifier.TestFile },
   });
   await waitAndUpdate(wrapper);
   expect(wrapper).toMatchSnapshot();
diff --git a/server/sonar-web/src/main/js/components/SourceViewer/components/__tests__/MeasuresOverlayMeasure-test.tsx b/server/sonar-web/src/main/js/components/SourceViewer/components/__tests__/MeasuresOverlayMeasure-test.tsx
index 45c2c00f319..098dc67d12f 100644
--- a/server/sonar-web/src/main/js/components/SourceViewer/components/__tests__/MeasuresOverlayMeasure-test.tsx
+++ b/server/sonar-web/src/main/js/components/SourceViewer/components/__tests__/MeasuresOverlayMeasure-test.tsx
@@ -27,7 +27,7 @@ it('should render', () => {
       <MeasuresOverlayMeasure
         measure={{
           metric: { id: '1', key: 'coverage', name: 'Coverage', type: 'PERCENT' },
-          value: '72'
+          value: '72',
         }}
       />
     )
@@ -40,7 +40,7 @@ it('should render issues icon', () => {
       <MeasuresOverlayMeasure
         measure={{
           metric: { id: '1', key: 'bugs', name: 'Bugs', type: 'INT' },
-          value: '2'
+          value: '2',
         }}
       />
     )
diff --git a/server/sonar-web/src/main/js/components/SourceViewer/helpers/__tests__/duplications-test.ts b/server/sonar-web/src/main/js/components/SourceViewer/helpers/__tests__/duplications-test.ts
index 3cd521eae09..33037bfc9f1 100644
--- a/server/sonar-web/src/main/js/components/SourceViewer/helpers/__tests__/duplications-test.ts
+++ b/server/sonar-web/src/main/js/components/SourceViewer/helpers/__tests__/duplications-test.ts
@@ -19,7 +19,7 @@
  */
 import {
   getDuplicationBlocksForIndex,
-  isDuplicationBlockInRemovedComponent
+  isDuplicationBlockInRemovedComponent,
 } from '../duplications';
 
 describe('getDuplicationBlocksForIndex', () => {
@@ -36,13 +36,13 @@ describe('isDuplicationBlockInRemovedComponent', () => {
     expect(
       isDuplicationBlockInRemovedComponent([
         { _ref: '0', from: 2, size: 2 },
-        { _ref: '0', from: 3, size: 1 }
+        { _ref: '0', from: 3, size: 1 },
       ])
     ).toBe(false);
     expect(
       isDuplicationBlockInRemovedComponent([
         { _ref: undefined, from: 2, size: 2 },
-        { _ref: '0', from: 3, size: 1 }
+        { _ref: '0', from: 3, size: 1 },
       ])
     ).toBe(true);
   });
diff --git a/server/sonar-web/src/main/js/components/SourceViewer/helpers/__tests__/highlight-test.ts b/server/sonar-web/src/main/js/components/SourceViewer/helpers/__tests__/highlight-test.ts
index d458754c7c1..6c365f76e54 100644
--- a/server/sonar-web/src/main/js/components/SourceViewer/helpers/__tests__/highlight-test.ts
+++ b/server/sonar-web/src/main/js/components/SourceViewer/helpers/__tests__/highlight-test.ts
@@ -28,7 +28,7 @@ describe('highlightSymbol', () => {
       { className: 'a sym-18 b', markers: [], text: 'foo' },
       { className: 'sym-1 d', markers: [], text: 'bar' },
       { className: 'c sym-1', markers: [], text: 'bar' },
-      { className: 'c sym-1 d', markers: [], text: 'bar' }
+      { className: 'c sym-1 d', markers: [], text: 'bar' },
     ];
     expect(highlightSymbol(tokens, 'sym-1')).toEqual([
       { className: 'sym-18 b', markers: [], text: 'foo' },
@@ -36,7 +36,7 @@ describe('highlightSymbol', () => {
       { className: 'a sym-18 b', markers: [], text: 'foo' },
       { className: 'sym-1 d highlighted', markers: [], text: 'bar' },
       { className: 'c sym-1 highlighted', markers: [], text: 'bar' },
-      { className: 'c sym-1 d highlighted', markers: [], text: 'bar' }
+      { className: 'c sym-1 d highlighted', markers: [], text: 'bar' },
     ]);
   });
 
@@ -44,12 +44,12 @@ describe('highlightSymbol', () => {
     const tokens = [
       { className: 'sym sym-1 sym sym-2', markers: [], text: 'foo' },
       { className: 'sym sym-1', markers: [], text: 'bar' },
-      { className: 'sym sym-2', markers: [], text: 'qux' }
+      { className: 'sym sym-2', markers: [], text: 'qux' },
     ];
     expect(highlightSymbol(tokens, 'sym-1')).toEqual([
       { className: 'sym sym-1 sym sym-2 highlighted', markers: [], text: 'foo' },
       { className: 'sym sym-1 highlighted', markers: [], text: 'bar' },
-      { className: 'sym sym-2', markers: [], text: 'qux' }
+      { className: 'sym sym-2', markers: [], text: 'qux' },
     ]);
   });
 });
diff --git a/server/sonar-web/src/main/js/components/SourceViewer/helpers/__tests__/indexing-test.ts b/server/sonar-web/src/main/js/components/SourceViewer/helpers/__tests__/indexing-test.ts
index ffd984f195e..93363448aff 100644
--- a/server/sonar-web/src/main/js/components/SourceViewer/helpers/__tests__/indexing-test.ts
+++ b/server/sonar-web/src/main/js/components/SourceViewer/helpers/__tests__/indexing-test.ts
@@ -26,11 +26,11 @@ describe('issuesByComponentAndLine', () => {
       mockIssue(true, { component: 'foo.js' }),
       mockIssue(false, {
         component: 'foo.js',
-        textRange: { startLine: 5, endLine: 5, startOffset: 0, endOffset: 0 }
+        textRange: { startLine: 5, endLine: 5, startOffset: 0, endOffset: 0 },
       }),
       mockIssue(false, { component: 'bar.js' }),
       mockIssue(),
-      mockIssue()
+      mockIssue(),
     ];
     const result = issuesByComponentAndLine(issues);
     expect(Object.keys(result['foo.js'])).toHaveLength(2);
@@ -49,12 +49,12 @@ describe('symbolsByLine', () => {
     const lines = [
       { line: 1, code: '<span class="sym-54 sym"><span class="sym-56 sym">foo</span></span>' },
       { line: 2, code: '<span class="sym-56 sym">bar</span>' },
-      { line: 3, code: '<span class="k">qux</span>' }
+      { line: 3, code: '<span class="k">qux</span>' },
     ];
     expect(symbolsByLine(lines)).toEqual({
       1: ['sym-54', 'sym-56'],
       2: ['sym-56'],
-      3: []
+      3: [],
     });
   });
 });
diff --git a/server/sonar-web/src/main/js/components/SourceViewer/helpers/__tests__/issueLocations-test.ts b/server/sonar-web/src/main/js/components/SourceViewer/helpers/__tests__/issueLocations-test.ts
index 265c7d58e14..6a380ff4268 100644
--- a/server/sonar-web/src/main/js/components/SourceViewer/helpers/__tests__/issueLocations-test.ts
+++ b/server/sonar-web/src/main/js/components/SourceViewer/helpers/__tests__/issueLocations-test.ts
@@ -26,7 +26,7 @@ describe('getSecondaryIssueLocationsForLine', () => {
     const sourceLine = mockSourceLine({ line: 2 });
     expect(getSecondaryIssueLocationsForLine(sourceLine, undefined)).toEqual([]);
     expect(getSecondaryIssueLocationsForLine(sourceLine, [mockFlowLocation()])).toEqual([
-      { from: 0, index: undefined, line: 2, startLine: 1, text: undefined, to: 2 }
+      { from: 0, index: undefined, line: 2, startLine: 1, text: undefined, to: 2 },
     ]);
   });
 });
@@ -37,11 +37,11 @@ describe('getLinearLocations', () => {
       [
         { from: 3, line: 6, to: 999999 },
         { from: 0, line: 7, to: 999999 },
-        { from: 0, line: 8, to: 56 }
+        { from: 0, line: 8, to: 56 },
       ]
     );
-    expect(
-      getLinearLocations({ startLine: 6, startOffset: 0, endLine: 6, endOffset: 42 })
-    ).toEqual([{ from: 0, line: 6, to: 42 }]);
+    expect(getLinearLocations({ startLine: 6, startOffset: 0, endLine: 6, endOffset: 42 })).toEqual(
+      [{ from: 0, line: 6, to: 42 }]
+    );
   });
 });
diff --git a/server/sonar-web/src/main/js/components/SourceViewer/helpers/__tests__/loadIssues-test.ts b/server/sonar-web/src/main/js/components/SourceViewer/helpers/__tests__/loadIssues-test.ts
index ca57c36d947..b4abefb57a0 100644
--- a/server/sonar-web/src/main/js/components/SourceViewer/helpers/__tests__/loadIssues-test.ts
+++ b/server/sonar-web/src/main/js/components/SourceViewer/helpers/__tests__/loadIssues-test.ts
@@ -45,8 +45,8 @@ jest.mock('../../../../api/issues', () => ({
         comments: [],
         creationDate: '2016-08-15T15:25:38+0200',
         updateDate: '2018-10-25T10:23:08+0200',
-        type: 'SECURITY_HOTSPOT'
-      }
+        type: 'SECURITY_HOTSPOT',
+      },
     ],
     components: [
       {
@@ -54,7 +54,7 @@ jest.mock('../../../../api/issues', () => ({
         enabled: true,
         qualifier: 'TRK',
         name: 'SonarJava',
-        longName: 'SonarJava'
+        longName: 'SonarJava',
       },
       {
         key: 'foo.java',
@@ -62,8 +62,8 @@ jest.mock('../../../../api/issues', () => ({
         qualifier: 'FIL',
         name: 'foo.java',
         longName: 'Foo.java',
-        path: '/foo.java'
-      }
+        path: '/foo.java',
+      },
     ],
     rules: [
       {
@@ -71,13 +71,13 @@ jest.mock('../../../../api/issues', () => ({
         name: 'Handling files is security-sensitive',
         lang: 'java',
         status: 'READY',
-        langName: 'Java'
-      }
+        langName: 'Java',
+      },
     ],
     users: [{ login: 'luke', name: 'Luke', avatar: 'lukavatar', active: true }],
     languages: [{ key: 'java', name: 'Java' }],
-    facets: []
-  })
+    facets: [],
+  }),
 }));
 
 describe('loadIssues', () => {
diff --git a/server/sonar-web/src/main/js/components/SourceViewer/helpers/duplications.ts b/server/sonar-web/src/main/js/components/SourceViewer/helpers/duplications.ts
index 21484f7222b..121c2cb1789 100644
--- a/server/sonar-web/src/main/js/components/SourceViewer/helpers/duplications.ts
+++ b/server/sonar-web/src/main/js/components/SourceViewer/helpers/duplications.ts
@@ -23,7 +23,7 @@ import { Duplication, DuplicationBlock } from '../../../types/types';
 export function filterDuplicationBlocksByLine(blocks: DuplicationBlock[], line: number) {
   /* eslint-disable no-underscore-dangle */
   let foundOne = false;
-  return blocks.filter(b => {
+  return blocks.filter((b) => {
     const outOfBounds = b.from > line || b.from + b.size < line;
     const currentFile = b._ref === '1';
     const shouldDisplayForCurrentFile = outOfBounds || foundOne;
@@ -45,5 +45,5 @@ export function getDuplicationBlocksForIndex(
 }
 
 export function isDuplicationBlockInRemovedComponent(blocks: DuplicationBlock[]) {
-  return blocks.some(b => b._ref === undefined); // eslint-disable-line no-underscore-dangle
+  return blocks.some((b) => b._ref === undefined); // eslint-disable-line no-underscore-dangle
 }
diff --git a/server/sonar-web/src/main/js/components/SourceViewer/helpers/highlight.ts b/server/sonar-web/src/main/js/components/SourceViewer/helpers/highlight.ts
index 9749f769b7c..f7fad63d419 100644
--- a/server/sonar-web/src/main/js/components/SourceViewer/helpers/highlight.ts
+++ b/server/sonar-web/src/main/js/components/SourceViewer/helpers/highlight.ts
@@ -47,7 +47,7 @@ export function splitByTokens(code: NodeListOf<ChildNode>, rootClassName = ''):
 
 export function highlightSymbol(tokens: Token[], symbol: string): Token[] {
   const symbolRegExp = new RegExp(`\\b${symbol}\\b`);
-  return tokens.map(token =>
+  return tokens.map((token) =>
     symbolRegExp.test(token.className)
       ? { ...token, className: `${token.className} highlighted` }
       : token
@@ -85,11 +85,11 @@ export function highlightIssueLocations(
   issueLocations: LinearIssueLocation[],
   rootClassName: string = ISSUE_LOCATION_CLASS
 ): Token[] {
-  issueLocations.forEach(location => {
+  issueLocations.forEach((location) => {
     const nextTokens: Token[] = [];
     let acc = 0;
     let markerAdded = location.line !== location.startLine;
-    tokens.forEach(token => {
+    tokens.forEach((token) => {
       const x = intersect(acc, acc + token.text.length, location.from, location.to);
       const p1 = part(token.text, acc, x.from, acc);
       const p2 = part(token.text, x.from, x.to, acc);
@@ -108,7 +108,7 @@ export function highlightIssueLocations(
             !markerAdded && location.index != null
               ? uniq([...token.markers, location.index])
               : token.markers,
-          text: p2
+          text: p2,
         });
         markerAdded = true;
       }
diff --git a/server/sonar-web/src/main/js/components/SourceViewer/helpers/indexing.ts b/server/sonar-web/src/main/js/components/SourceViewer/helpers/indexing.ts
index 92e594ebc11..774f8e8283f 100644
--- a/server/sonar-web/src/main/js/components/SourceViewer/helpers/indexing.ts
+++ b/server/sonar-web/src/main/js/components/SourceViewer/helpers/indexing.ts
@@ -24,7 +24,7 @@ import { getLinearLocations } from './issueLocations';
 
 export function issuesByLine(issues: Issue[]) {
   const index: { [line: number]: Issue[] } = {};
-  issues.forEach(issue => {
+  issues.forEach((issue) => {
     const line = issue.textRange ? issue.textRange.endLine : 0;
     if (!(line in index)) {
       index[line] = [];
@@ -34,9 +34,9 @@ export function issuesByLine(issues: Issue[]) {
   return index;
 }
 
-export function issuesByComponentAndLine(
-  issues: Issue[] = []
-): { [component: string]: { [line: number]: Issue[] } } {
+export function issuesByComponentAndLine(issues: Issue[] = []): {
+  [component: string]: { [line: number]: Issue[] };
+} {
   return issues.reduce((mapping: { [component: string]: { [line: number]: Issue[] } }, issue) => {
     mapping[issue.component] = mapping[issue.component] || {};
     const line = issue.textRange ? issue.textRange.endLine : 0;
@@ -48,8 +48,8 @@ export function issuesByComponentAndLine(
 
 export function locationsByLine(issues: Pick<Issue, 'textRange'>[]) {
   const index: { [line: number]: LinearIssueLocation[] } = {};
-  issues.forEach(issue => {
-    getLinearLocations(issue.textRange).forEach(location => {
+  issues.forEach((issue) => {
+    getLinearLocations(issue.textRange).forEach((location) => {
       if (!(location.line in index)) {
         index[location.line] = [];
       }
@@ -67,7 +67,7 @@ export function duplicationsByLine(duplications: Duplication[] | undefined) {
   const duplicationsByLine: { [line: number]: number[] } = {};
 
   duplications.forEach(({ blocks }, duplicationIndex) => {
-    blocks.forEach(block => {
+    blocks.forEach((block) => {
       // eslint-disable-next-line no-underscore-dangle
       if (block._ref === '1') {
         for (let line = block.from; line < block.from + block.size; line++) {
@@ -85,17 +85,17 @@ export function duplicationsByLine(duplications: Duplication[] | undefined) {
 
 export function symbolsByLine(sources: SourceLine[]) {
   const index: { [line: number]: string[] } = {};
-  sources.forEach(line => {
+  sources.forEach((line) => {
     const container = document.createElement('div');
     container.innerHTML = line.code || '';
     const tokens = splitByTokens(container.childNodes);
     const symbols = flatten(
-      tokens.map(token => {
+      tokens.map((token) => {
         const keys = token.className.match(/sym-\d+/g);
         return keys != null ? keys : [];
       })
     );
-    index[line.line] = symbols.filter(key => key);
+    index[line.line] = symbols.filter((key) => key);
   });
   return index;
 }
diff --git a/server/sonar-web/src/main/js/components/SourceViewer/helpers/issueLocations.ts b/server/sonar-web/src/main/js/components/SourceViewer/helpers/issueLocations.ts
index 265bb7d7e87..241e36ac4b2 100644
--- a/server/sonar-web/src/main/js/components/SourceViewer/helpers/issueLocations.ts
+++ b/server/sonar-web/src/main/js/components/SourceViewer/helpers/issueLocations.ts
@@ -45,12 +45,12 @@ export function getSecondaryIssueLocationsForLine(
   return highlightedLocations.reduce((locations, location) => {
     const linearLocations: LinearIssueLocation[] = location
       ? getLinearLocations(location.textRange)
-          .filter(l => l.line === line.line)
-          .map(l => ({
+          .filter((l) => l.line === line.line)
+          .map((l) => ({
             ...l,
             startLine: location.textRange.startLine,
             index: location.index,
-            text: location.msg
+            text: location.msg,
           }))
       : [];
     return [...locations, ...linearLocations];
diff --git a/server/sonar-web/src/main/js/components/SourceViewer/helpers/lines.ts b/server/sonar-web/src/main/js/components/SourceViewer/helpers/lines.ts
index 63d1395b079..ddcf00ed30b 100644
--- a/server/sonar-web/src/main/js/components/SourceViewer/helpers/lines.ts
+++ b/server/sonar-web/src/main/js/components/SourceViewer/helpers/lines.ts
@@ -37,7 +37,7 @@ export function optimizeLocationMessage(
 ) {
   return highlightedLocationMessage != null &&
     optimizedSecondaryIssueLocations.some(
-      location => location.index === highlightedLocationMessage.index
+      (location) => location.index === highlightedLocationMessage.index
     )
     ? highlightedLocationMessage
     : undefined;
diff --git a/server/sonar-web/src/main/js/components/SourceViewer/helpers/loadIssues.ts b/server/sonar-web/src/main/js/components/SourceViewer/helpers/loadIssues.ts
index aa4bb6ab580..dbe31174ce7 100644
--- a/server/sonar-web/src/main/js/components/SourceViewer/helpers/loadIssues.ts
+++ b/server/sonar-web/src/main/js/components/SourceViewer/helpers/loadIssues.ts
@@ -34,7 +34,7 @@ function buildQuery(component: string, branchLike: BranchLike | undefined) {
     resolved: 'false',
     componentKeys: component,
     s: 'FILE_LINE',
-    ...getBranchLikeQuery(branchLike)
+    ...getBranchLikeQuery(branchLike),
   };
 }
 
@@ -42,9 +42,9 @@ function loadPage(query: RawQuery, page: number, pageSize = PAGE_SIZE): Promise<
   return searchIssues({
     ...query,
     p: page,
-    ps: pageSize
-  }).then(r =>
-    r.issues.map(issue => parseIssueFromResponse(issue, r.components, r.users, r.rules))
+    ps: pageSize,
+  }).then((r) =>
+    r.issues.map((issue) => parseIssueFromResponse(issue, r.components, r.users, r.rules))
   );
 }
 
diff --git a/server/sonar-web/src/main/js/components/a11y/A11yContext.tsx b/server/sonar-web/src/main/js/components/a11y/A11yContext.tsx
index 3bf2444f4e0..ee76719ae81 100644
--- a/server/sonar-web/src/main/js/components/a11y/A11yContext.tsx
+++ b/server/sonar-web/src/main/js/components/a11y/A11yContext.tsx
@@ -33,5 +33,5 @@ export const A11yContext = createContext<A11yContextShape>({
   removeA11ySkipLink: () => {
     /* Implemented by Provider */
   },
-  links: []
+  links: [],
 });
diff --git a/server/sonar-web/src/main/js/components/a11y/A11yProvider.tsx b/server/sonar-web/src/main/js/components/a11y/A11yProvider.tsx
index f515d9f15f7..fd41eb84691 100644
--- a/server/sonar-web/src/main/js/components/a11y/A11yProvider.tsx
+++ b/server/sonar-web/src/main/js/components/a11y/A11yProvider.tsx
@@ -31,7 +31,7 @@ export default class A11yProvider extends React.Component<{}, State> {
   state: State = { links: [] };
 
   addA11ySkipLink = (link: A11ySkipLink) => {
-    this.setState(prevState => {
+    this.setState((prevState) => {
       const links = [...prevState.links];
       links.push({ ...link, weight: link.weight || 0 });
       return { links };
@@ -39,8 +39,8 @@ export default class A11yProvider extends React.Component<{}, State> {
   };
 
   removeA11ySkipLink = (link: A11ySkipLink) => {
-    this.setState(prevState => {
-      const links = prevState.links.filter(l => l.key !== link.key);
+    this.setState((prevState) => {
+      const links = prevState.links.filter((l) => l.key !== link.key);
       return { links };
     });
   };
@@ -52,8 +52,9 @@ export default class A11yProvider extends React.Component<{}, State> {
         value={{
           addA11ySkipLink: this.addA11ySkipLink,
           links,
-          removeA11ySkipLink: this.removeA11ySkipLink
-        }}>
+          removeA11ySkipLink: this.removeA11ySkipLink,
+        }}
+      >
         {this.props.children}
       </A11yContext.Provider>
     );
diff --git a/server/sonar-web/src/main/js/components/a11y/A11ySkipLinks.tsx b/server/sonar-web/src/main/js/components/a11y/A11ySkipLinks.tsx
index 8af879bbec2..302fe8de0c8 100644
--- a/server/sonar-web/src/main/js/components/a11y/A11ySkipLinks.tsx
+++ b/server/sonar-web/src/main/js/components/a11y/A11ySkipLinks.tsx
@@ -25,7 +25,7 @@ export default function A11ySkipLinks() {
   return (
     <A11yContext.Consumer>
       {({ links }) =>
-        links.map(link => (
+        links.map((link) => (
           <a className="a11y-skip-link" href={`#a11y_target__${link.key}`} key={link.key}>
             {link.label}
           </a>
diff --git a/server/sonar-web/src/main/js/components/a11y/__tests__/A11ySkipLinks-test.tsx b/server/sonar-web/src/main/js/components/a11y/__tests__/A11ySkipLinks-test.tsx
index f19805d53af..7379f8d016c 100644
--- a/server/sonar-web/src/main/js/components/a11y/__tests__/A11ySkipLinks-test.tsx
+++ b/server/sonar-web/src/main/js/components/a11y/__tests__/A11ySkipLinks-test.tsx
@@ -27,11 +27,11 @@ jest.mock('../A11yContext', () => ({
       return children({
         links: [
           { key: 'link1', label: 'Label 1' },
-          { key: 'link2', label: 'Label 2' }
-        ]
+          { key: 'link2', label: 'Label 2' },
+        ],
       });
-    }
-  }
+    },
+  },
 }));
 
 it('should render correctly', () => {
diff --git a/server/sonar-web/src/main/js/components/activity-graph/AddGraphMetric.tsx b/server/sonar-web/src/main/js/components/activity-graph/AddGraphMetric.tsx
index 29dfd8d6fb8..0d43caa4f56 100644
--- a/server/sonar-web/src/main/js/components/activity-graph/AddGraphMetric.tsx
+++ b/server/sonar-web/src/main/js/components/activity-graph/AddGraphMetric.tsx
@@ -45,14 +45,12 @@ export default class AddGraphMetric extends React.PureComponent<Props, State> {
   state: State = {
     metrics: [],
     query: '',
-    selectedMetrics: []
+    selectedMetrics: [],
   };
 
   filterSelected = (query: string, selectedElements: string[]) => {
-    return selectedElements.filter(element =>
-      this.getLocalizedMetricNameFromKey(element)
-        .toLowerCase()
-        .includes(query.toLowerCase())
+    return selectedElements.filter((element) =>
+      this.getLocalizedMetricNameFromKey(element).toLowerCase().includes(query.toLowerCase())
     );
   };
 
@@ -61,15 +59,13 @@ export default class AddGraphMetric extends React.PureComponent<Props, State> {
     query: string
   ) => {
     return metrics
-      .filter(metric => {
+      .filter((metric) => {
         if (
           metric.hidden ||
           isDiffMetric(metric.key) ||
           ['DATA', 'DISTRIB'].includes(metric.type) ||
           selectedMetrics.includes(metric.key) ||
-          !getLocalizedMetricName(metric)
-            .toLowerCase()
-            .includes(query.toLowerCase())
+          !getLocalizedMetricName(metric).toLowerCase().includes(query.toLowerCase())
         ) {
           return false;
         }
@@ -78,12 +74,12 @@ export default class AddGraphMetric extends React.PureComponent<Props, State> {
         }
         return true;
       })
-      .map(metric => metric.key);
+      .map((metric) => metric.key);
   };
 
   getSelectedMetricsElements = (metrics: Metric[], selectedMetrics?: string[]) => {
     const selected = selectedMetrics || this.props.selectedMetrics;
-    return metrics.filter(metric => selected.includes(metric.key)).map(metric => metric.key);
+    return metrics.filter((metric) => selected.includes(metric.key)).map((metric) => metric.key);
   };
 
   getLocalizedMetricNameFromKey = (key: string) => {
@@ -98,20 +94,20 @@ export default class AddGraphMetric extends React.PureComponent<Props, State> {
 
   onSelect = (metric: string) => {
     this.props.addMetric(metric);
-    this.setState(state => {
+    this.setState((state) => {
       return {
         selectedMetrics: sortBy([...state.selectedMetrics, metric]),
-        metrics: this.filterMetricsElements(this.props, state.query)
+        metrics: this.filterMetricsElements(this.props, state.query),
       };
     });
   };
 
   onUnselect = (metric: string) => {
     this.props.removeMetric(metric);
-    this.setState(state => {
+    this.setState((state) => {
       return {
         metrics: sortBy([...state.metrics, metric]),
-        selectedMetrics: state.selectedMetrics.filter(selected => selected !== metric)
+        selectedMetrics: state.selectedMetrics.filter((selected) => selected !== metric),
       };
     });
   };
@@ -136,10 +132,11 @@ export default class AddGraphMetric extends React.PureComponent<Props, State> {
             onSearch={this.onSearch}
             onSelect={this.onSelect}
             onUnselect={this.onUnselect}
-            renderLabel={element => this.getLocalizedMetricNameFromKey(element)}
+            renderLabel={(element) => this.getLocalizedMetricNameFromKey(element)}
             selectedElements={selectedMetrics}
           />
-        }>
+        }
+      >
         <Button className="spacer-left">
           <span className="text-ellipsis text-middle">
             {translate('project_activity.graphs.custom.add')}
diff --git a/server/sonar-web/src/main/js/components/activity-graph/DataTableModal.tsx b/server/sonar-web/src/main/js/components/activity-graph/DataTableModal.tsx
index ef88cf83586..0b0fabb17e4 100644
--- a/server/sonar-web/src/main/js/components/activity-graph/DataTableModal.tsx
+++ b/server/sonar-web/src/main/js/components/activity-graph/DataTableModal.tsx
@@ -99,14 +99,14 @@ export default function DataTableModal(props: DataTableModalProps) {
           <TimeFormatter date={date} />
         </div>
       </td>
-      {metrics.map(metric => (
+      {metrics.map((metric) => (
         <td key={metric} className="thin nowrap">
           {values[metric] || '-'}
         </td>
       ))}
       <td>
         <ul>
-          {getAnalysisEventsForDate(analyses, date).map(event => (
+          {getAnalysisEventsForDate(analyses, date).map((event) => (
             <li className="little-spacer-bottom" key={event.key}>
               <EventInner event={event} readonly={true} />
             </li>
@@ -158,7 +158,7 @@ export default function DataTableModal(props: DataTableModalProps) {
         <thead>
           <tr>
             <th>{translate('date')}</th>
-            {series.map(serie => (
+            {series.map((serie) => (
               <th key={serie.name} className="thin nowrap">
                 {serie.translatedName}
               </th>
diff --git a/server/sonar-web/src/main/js/components/activity-graph/DefinitionChangeEventInner.tsx b/server/sonar-web/src/main/js/components/activity-graph/DefinitionChangeEventInner.tsx
index 7d52c9c970b..41ea7117793 100644
--- a/server/sonar-web/src/main/js/components/activity-graph/DefinitionChangeEventInner.tsx
+++ b/server/sonar-web/src/main/js/components/activity-graph/DefinitionChangeEventInner.tsx
@@ -55,14 +55,15 @@ export class DefinitionChangeEventInner extends React.PureComponent<Props, State
   };
 
   toggleProjectsList = () => {
-    this.setState(state => ({ expanded: !state.expanded }));
+    this.setState((state) => ({ expanded: !state.expanded }));
   };
 
   renderProjectLink = (project: { key: string; name: string }, branch: string | undefined) => (
     <Link
       onClick={this.stopPropagation}
       title={project.name}
-      to={getProjectUrl(project.key, branch)}>
+      to={getProjectUrl(project.key, branch)}
+    >
       {limitComponentName(project.name, 28)}
     </Link>
   );
@@ -95,7 +96,7 @@ export class DefinitionChangeEventInner extends React.PureComponent<Props, State
             id={message}
             values={{
               project: this.renderProjectLink(project, project.branch),
-              branch: this.renderBranch(project.branch)
+              branch: this.renderBranch(project.branch),
             }}
           />
         </div>
@@ -111,7 +112,7 @@ export class DefinitionChangeEventInner extends React.PureComponent<Props, State
             id={message}
             values={{
               project: this.renderProjectLink(project, project.branch),
-              branch: this.renderBranch(project.branch)
+              branch: this.renderBranch(project.branch),
             }}
           />
         </div>
@@ -124,7 +125,7 @@ export class DefinitionChangeEventInner extends React.PureComponent<Props, State
           values={{
             project: this.renderProjectLink(project, project.newBranch),
             oldBranch: this.renderBranch(project.oldBranch),
-            newBranch: this.renderBranch(project.newBranch)
+            newBranch: this.renderBranch(project.newBranch),
           }}
         />
       );
@@ -147,7 +148,8 @@ export class DefinitionChangeEventInner extends React.PureComponent<Props, State
             <ButtonLink
               className="project-activity-event-inner-more-link"
               onClick={this.toggleProjectsList}
-              stopPropagation={true}>
+              stopPropagation={true}
+            >
               {expanded ? translate('hide') : translate('more')}
               <DropdownIcon className="little-spacer-left" turned={expanded} />
             </ButtonLink>
@@ -156,7 +158,7 @@ export class DefinitionChangeEventInner extends React.PureComponent<Props, State
 
         {expanded && (
           <ul className="spacer-left spacer-top">
-            {event.definitionChange.projects.map(project => (
+            {event.definitionChange.projects.map((project) => (
               <li className="display-flex-center spacer-top" key={project.key}>
                 {this.renderProjectChange(project)}
               </li>
diff --git a/server/sonar-web/src/main/js/components/activity-graph/GraphHistory.tsx b/server/sonar-web/src/main/js/components/activity-graph/GraphHistory.tsx
index bb674ec3a21..6698d2b614d 100644
--- a/server/sonar-web/src/main/js/components/activity-graph/GraphHistory.tsx
+++ b/server/sonar-web/src/main/js/components/activity-graph/GraphHistory.tsx
@@ -86,7 +86,7 @@ export default class GraphHistory extends React.PureComponent<Props, State> {
       selectedDate,
       series,
       showAreas,
-      graphDescription
+      graphDescription,
     } = this.props;
     const { tooltipIdx, tooltipXPos } = this.state;
     const events = getAnalysisEventsForDate(analyses, selectedDate);
@@ -149,7 +149,8 @@ export default class GraphHistory extends React.PureComponent<Props, State> {
                 series={series}
                 onClose={onClose}
               />
-            )}>
+            )}
+          >
             {({ onClick }) => (
               <Button className="a11y-hidden" onClick={onClick}>
                 {translate('project_activity.graphs.open_in_table')}
diff --git a/server/sonar-web/src/main/js/components/activity-graph/GraphsHeader.tsx b/server/sonar-web/src/main/js/components/activity-graph/GraphsHeader.tsx
index c15aaac724a..1dd1d58ae4f 100644
--- a/server/sonar-web/src/main/js/components/activity-graph/GraphsHeader.tsx
+++ b/server/sonar-web/src/main/js/components/activity-graph/GraphsHeader.tsx
@@ -53,14 +53,14 @@ export default class GraphsHeader extends React.PureComponent<Props> {
       metrics,
       metricsTypeFilter,
       removeCustomMetric,
-      selectedMetrics = []
+      selectedMetrics = [],
     } = this.props;
 
     const types = getGraphTypes(addCustomMetric === undefined || removeCustomMetric === undefined);
 
-    const selectOptions = types.map(type => ({
+    const selectOptions = types.map((type) => ({
       label: translate('project_activity.graphs', type),
-      value: type
+      value: type,
     }));
 
     return (
@@ -76,7 +76,7 @@ export default class GraphsHeader extends React.PureComponent<Props> {
               isSearchable={false}
               onChange={this.handleGraphChange}
               options={selectOptions}
-              value={selectOptions.find(option => option.value === graph)}
+              value={selectOptions.find((option) => option.value === graph)}
             />
           </div>
           {isCustomGraph(graph) &&
diff --git a/server/sonar-web/src/main/js/components/activity-graph/GraphsHistory.tsx b/server/sonar-web/src/main/js/components/activity-graph/GraphsHistory.tsx
index d4924ebb2be..0f4f8436644 100644
--- a/server/sonar-web/src/main/js/components/activity-graph/GraphsHistory.tsx
+++ b/server/sonar-web/src/main/js/components/activity-graph/GraphsHistory.tsx
@@ -53,7 +53,7 @@ export default class GraphsHistory extends React.PureComponent<Props, State> {
   constructor(props: Props) {
     super(props);
     this.state = {
-      selectedDate: props.selectedDate
+      selectedDate: props.selectedDate,
     };
   }
 
diff --git a/server/sonar-web/src/main/js/components/activity-graph/GraphsLegendCustom.tsx b/server/sonar-web/src/main/js/components/activity-graph/GraphsLegendCustom.tsx
index 6dba9551e5e..a8f54da826a 100644
--- a/server/sonar-web/src/main/js/components/activity-graph/GraphsLegendCustom.tsx
+++ b/server/sonar-web/src/main/js/components/activity-graph/GraphsLegendCustom.tsx
@@ -49,7 +49,8 @@ export default function GraphsLegendCustom(props: GraphsLegendCustomProps) {
             return (
               <Tooltip
                 key={serie.name}
-                overlay={translate('project_activity.graphs.custom.metric_no_history')}>
+                overlay={translate('project_activity.graphs.custom.metric_no_history')}
+              >
                 <span className="spacer-left spacer-right">{legendItem}</span>
               </Tooltip>
             );
diff --git a/server/sonar-web/src/main/js/components/activity-graph/GraphsLegendNewCode.tsx b/server/sonar-web/src/main/js/components/activity-graph/GraphsLegendNewCode.tsx
index 928c315a15f..06e81da93e4 100644
--- a/server/sonar-web/src/main/js/components/activity-graph/GraphsLegendNewCode.tsx
+++ b/server/sonar-web/src/main/js/components/activity-graph/GraphsLegendNewCode.tsx
@@ -26,7 +26,8 @@ export default function GraphsLegendNewCode() {
     <Tooltip overlay={translate('project_activity.graphs.new_code_long')}>
       <span
         aria-label={translate('project_activity.graphs.new_code_long')}
-        className="activity-graph-new-code-legend display-flex-center pull-right note">
+        className="activity-graph-new-code-legend display-flex-center pull-right note"
+      >
         {translate('project_activity.graphs.new_code')}
       </span>
     </Tooltip>
diff --git a/server/sonar-web/src/main/js/components/activity-graph/GraphsTooltips.tsx b/server/sonar-web/src/main/js/components/activity-graph/GraphsTooltips.tsx
index b7d49b60cd5..9950dc79b32 100644
--- a/server/sonar-web/src/main/js/components/activity-graph/GraphsTooltips.tsx
+++ b/server/sonar-web/src/main/js/components/activity-graph/GraphsTooltips.tsx
@@ -93,7 +93,8 @@ export default class GraphsTooltips extends React.PureComponent<Props> {
       <Popup
         className="disabled-pointer-events"
         placement={placement}
-        style={{ top, left, width: TOOLTIP_WIDTH }}>
+        style={{ top, left, width: TOOLTIP_WIDTH }}
+      >
         <div className="activity-graph-tooltip">
           <div className="activity-graph-tooltip-title spacer-bottom">
             <DateTimeFormatter date={this.props.selectedDate} />
diff --git a/server/sonar-web/src/main/js/components/activity-graph/GraphsTooltipsContentCoverage.tsx b/server/sonar-web/src/main/js/components/activity-graph/GraphsTooltipsContentCoverage.tsx
index edfc58c2e83..6021f6e382c 100644
--- a/server/sonar-web/src/main/js/components/activity-graph/GraphsTooltipsContentCoverage.tsx
+++ b/server/sonar-web/src/main/js/components/activity-graph/GraphsTooltipsContentCoverage.tsx
@@ -31,10 +31,10 @@ export interface GraphsTooltipsContentCoverageProps {
 export default function GraphsTooltipsContentCoverage({
   addSeparator,
   measuresHistory,
-  tooltipIdx
+  tooltipIdx,
 }: GraphsTooltipsContentCoverageProps) {
-  const uncovered = measuresHistory.find(measure => measure.metric === 'uncovered_lines');
-  const coverage = measuresHistory.find(measure => measure.metric === 'coverage');
+  const uncovered = measuresHistory.find((measure) => measure.metric === 'uncovered_lines');
+  const coverage = measuresHistory.find((measure) => measure.metric === 'coverage');
   if (!uncovered || !uncovered.history[tooltipIdx] || !coverage || !coverage.history[tooltipIdx]) {
     return null;
   }
diff --git a/server/sonar-web/src/main/js/components/activity-graph/GraphsTooltipsContentDuplication.tsx b/server/sonar-web/src/main/js/components/activity-graph/GraphsTooltipsContentDuplication.tsx
index 5c4a66aa2cf..e97d87d4f09 100644
--- a/server/sonar-web/src/main/js/components/activity-graph/GraphsTooltipsContentDuplication.tsx
+++ b/server/sonar-web/src/main/js/components/activity-graph/GraphsTooltipsContentDuplication.tsx
@@ -31,10 +31,10 @@ export interface GraphsTooltipsContentDuplicationProps {
 export default function GraphsTooltipsContentDuplication({
   addSeparator,
   measuresHistory,
-  tooltipIdx
+  tooltipIdx,
 }: GraphsTooltipsContentDuplicationProps) {
   const duplicationDensity = measuresHistory.find(
-    measure => measure.metric === 'duplicated_lines_density'
+    (measure) => measure.metric === 'duplicated_lines_density'
   );
   if (!duplicationDensity || !duplicationDensity.history[tooltipIdx]) {
     return null;
diff --git a/server/sonar-web/src/main/js/components/activity-graph/GraphsTooltipsContentEvents.tsx b/server/sonar-web/src/main/js/components/activity-graph/GraphsTooltipsContentEvents.tsx
index 85cafa0761b..ceba6c071c4 100644
--- a/server/sonar-web/src/main/js/components/activity-graph/GraphsTooltipsContentEvents.tsx
+++ b/server/sonar-web/src/main/js/components/activity-graph/GraphsTooltipsContentEvents.tsx
@@ -38,7 +38,7 @@ export default function GraphsTooltipsContentEvents({ addSeparator, events }: Pr
       )}
       <tr className="activity-graph-tooltip-line">
         <td colSpan={3}>
-          {events.map(event => (
+          {events.map((event) => (
             <div className="little-spacer-bottom" key={event.key}>
               <EventInner event={event} readonly={true} />
             </div>
diff --git a/server/sonar-web/src/main/js/components/activity-graph/GraphsTooltipsContentIssues.tsx b/server/sonar-web/src/main/js/components/activity-graph/GraphsTooltipsContentIssues.tsx
index f4a97626c52..3ca06bd94ba 100644
--- a/server/sonar-web/src/main/js/components/activity-graph/GraphsTooltipsContentIssues.tsx
+++ b/server/sonar-web/src/main/js/components/activity-graph/GraphsTooltipsContentIssues.tsx
@@ -35,12 +35,12 @@ export interface GraphsTooltipsContentIssuesProps {
 const METRIC_RATING: Dict<string> = {
   bugs: 'reliability_rating',
   vulnerabilities: 'security_rating',
-  code_smells: 'sqale_rating'
+  code_smells: 'sqale_rating',
 };
 
 export default function GraphsTooltipsContentIssues(props: GraphsTooltipsContentIssuesProps) {
   const rating = props.measuresHistory.find(
-    measure => measure.metric === METRIC_RATING[props.name]
+    (measure) => measure.metric === METRIC_RATING[props.name]
   );
   if (!rating || !rating.history[props.tooltipIdx]) {
     return null;
diff --git a/server/sonar-web/src/main/js/components/activity-graph/RichQualityGateEventInner.tsx b/server/sonar-web/src/main/js/components/activity-graph/RichQualityGateEventInner.tsx
index 2f81862002c..f89adab3749 100644
--- a/server/sonar-web/src/main/js/components/activity-graph/RichQualityGateEventInner.tsx
+++ b/server/sonar-web/src/main/js/components/activity-graph/RichQualityGateEventInner.tsx
@@ -50,7 +50,7 @@ export class RichQualityGateEventInner extends React.PureComponent<Props, State>
   };
 
   toggleProjectsList = () => {
-    this.setState(state => ({ expanded: !state.expanded }));
+    this.setState((state) => ({ expanded: !state.expanded }));
   };
 
   render() {
@@ -74,7 +74,8 @@ export class RichQualityGateEventInner extends React.PureComponent<Props, State>
             <ResetButtonLink
               className="project-activity-event-inner-more-link"
               onClick={this.toggleProjectsList}
-              stopPropagation={true}>
+              stopPropagation={true}
+            >
               {expanded ? translate('hide') : translate('more')}
               <DropdownIcon className="little-spacer-left" turned={expanded} />
             </ResetButtonLink>
@@ -83,7 +84,7 @@ export class RichQualityGateEventInner extends React.PureComponent<Props, State>
 
         {expanded && (
           <ul className="spacer-left spacer-top">
-            {event.qualityGate.failing.map(project => (
+            {event.qualityGate.failing.map((project) => (
               <li className="display-flex-center spacer-top" key={project.key}>
                 <Level
                   aria-label={translate('quality_gates.status')}
@@ -95,7 +96,8 @@ export class RichQualityGateEventInner extends React.PureComponent<Props, State>
                   <Link
                     onClick={this.stopPropagation}
                     title={project.name}
-                    to={getProjectUrl(project.key, project.branch)}>
+                    to={getProjectUrl(project.key, project.branch)}
+                  >
                     <span aria-label={translateWithParameters('project_x', project.name)}>
                       {project.name}
                     </span>
diff --git a/server/sonar-web/src/main/js/components/activity-graph/__tests__/ActivityGraph-it.tsx b/server/sonar-web/src/main/js/components/activity-graph/__tests__/ActivityGraph-it.tsx
index 786e404631d..42d90877818 100644
--- a/server/sonar-web/src/main/js/components/activity-graph/__tests__/ActivityGraph-it.tsx
+++ b/server/sonar-web/src/main/js/components/activity-graph/__tests__/ActivityGraph-it.tsx
@@ -30,7 +30,7 @@ import {
   mockAnalysisEvent,
   mockHistoryItem,
   mockMeasureHistory,
-  mockParsedAnalysis
+  mockParsedAnalysis,
 } from '../../../helpers/mocks/project-activity';
 import { mockMetric } from '../../../helpers/testMocks';
 import { renderComponent } from '../../../helpers/testReactTestingUtils';
@@ -52,7 +52,7 @@ const ui = {
   burnedBudgetCheckbox: byRole('checkbox', { name: MetricKey.burned_budget }),
   vulnerabilityCheckbox: byRole('checkbox', { name: MetricKey.vulnerabilities }),
   hiddenOptionsAlert: byText('project_activity.graphs.custom.type_x_message', {
-    exact: false
+    exact: false,
   }),
   maxOptionsAlert: byText('project_activity.graphs.custom.add_metric_info'),
   filterMetrics: byPlaceholderText('search.search_for_metrics'),
@@ -74,8 +74,8 @@ const ui = {
   dataTableColHeaders: byRole('columnheader'),
   onlyFirst100Text: byText('project_activity.graphs.data_table.max_lines_warning.100'),
   noDataTableText: byText('project_activity.graphs.data_table.no_data_warning_check_dates_x', {
-    exact: false
-  })
+    exact: false,
+  }),
 };
 
 it('should correctly handle adding/removing custom metrics', async () => {
@@ -171,7 +171,7 @@ it('shows the same data in a table when filtered by date', async () => {
   const user = userEvent.setup();
   renderActivityGraph({
     graphStartDate: parseDate('2017-01-01'),
-    graphEndDate: parseDate('2019-01-01')
+    graphEndDate: parseDate('2019-01-01'),
   });
 
   await user.click(ui.openInTableBtn.get());
@@ -230,9 +230,9 @@ function renderActivityGraph(
       MetricKey.uncovered_lines,
       MetricKey.coverage,
       MetricKey.duplicated_lines_density,
-      MetricKey.test_success_density
-    ].forEach(metric => {
-      const history = times(HISTORY_COUNT, i => {
+      MetricKey.test_success_density,
+    ].forEach((metric) => {
+      const history = times(HISTORY_COUNT, (i) => {
         const date = parseDate('2016-01-01T00:00:00+0200');
         date.setDate(date.getDate() + i);
         return mockHistoryItem({ date, value: i.toString() });
@@ -246,7 +246,7 @@ function renderActivityGraph(
         mockMetric({
           key: metric,
           name: metric,
-          type: metric.includes('_density') || metric === MetricKey.coverage ? 'PERCENT' : 'INT'
+          type: metric.includes('_density') || metric === MetricKey.coverage ? 'PERCENT' : 'INT',
         })
       );
     });
@@ -267,14 +267,16 @@ function renderActivityGraph(
     const metricsTypeFilter =
       graphs.length < MAX_GRAPHS
         ? undefined
-        : graphs.filter(graph => graph.length < MAX_SERIES_PER_GRAPH).map(graph => graph[0].type);
+        : graphs
+            .filter((graph) => graph.length < MAX_SERIES_PER_GRAPH)
+            .map((graph) => graph[0].type);
 
     const addCustomMetric = (metricKey: string) => {
       setSelectedMetrics([...selectedMetrics, metricKey]);
     };
 
     const removeCustomMetric = (metricKey: string) => {
-      setSelectedMetrics(selectedMetrics.filter(m => m !== metricKey));
+      setSelectedMetrics(selectedMetrics.filter((m) => m !== metricKey));
     };
 
     const updateGraph = (graphType: string) => {
@@ -312,18 +314,18 @@ function renderActivityGraph(
                   key: '2',
                   category: 'VERSION',
                   description: undefined,
-                  qualityGate: undefined
+                  qualityGate: undefined,
                 }),
                 mockAnalysisEvent({
                   key: '3',
                   category: 'DEFINITION_CHANGE',
                   definitionChange: {
-                    projects: [{ changeType: 'ADDED', key: 'foo', name: 'Foo' }]
+                    projects: [{ changeType: 'ADDED', key: 'foo', name: 'Foo' }],
                   },
-                  qualityGate: undefined
-                })
-              ]
-            })
+                  qualityGate: undefined,
+                }),
+              ],
+            }),
           ]}
           graph={graph}
           graphEndDate={toDate}
diff --git a/server/sonar-web/src/main/js/components/activity-graph/__tests__/DataTableModal-test.tsx b/server/sonar-web/src/main/js/components/activity-graph/__tests__/DataTableModal-test.tsx
index d9ec3fd7d1e..b4d16fb678e 100644
--- a/server/sonar-web/src/main/js/components/activity-graph/__tests__/DataTableModal-test.tsx
+++ b/server/sonar-web/src/main/js/components/activity-graph/__tests__/DataTableModal-test.tsx
@@ -49,7 +49,7 @@ it('should render correctly if there is no data and we have a start date', () =>
   renderDataTableModal({ graphStartDate: parseDate('3022-01-01') });
   expect(
     screen.getByText('project_activity.graphs.data_table.no_data_warning_check_dates_x', {
-      exact: false
+      exact: false,
     })
   ).toBeInTheDocument();
 });
@@ -58,7 +58,7 @@ it('should render correctly if there is no data and we have an end date', () =>
   renderDataTableModal({ graphEndDate: parseDate('2015-01-01') });
   expect(
     screen.getByText('project_activity.graphs.data_table.no_data_warning_check_dates_y', {
-      exact: false
+      exact: false,
     })
   ).toBeInTheDocument();
 });
@@ -66,11 +66,11 @@ it('should render correctly if there is no data and we have an end date', () =>
 it('should render correctly if there is no data and we have a date range', () => {
   renderDataTableModal({
     graphEndDate: parseDate('2015-01-01'),
-    graphStartDate: parseDate('2014-01-01')
+    graphStartDate: parseDate('2014-01-01'),
   });
   expect(
     screen.getByText('project_activity.graphs.data_table.no_data_warning_check_dates_x_y', {
-      exact: false
+      exact: false,
     })
   ).toBeInTheDocument();
 });
@@ -84,8 +84,8 @@ function renderDataTableModal(props: Partial<DataTableModalProps> = {}) {
 function mockSeries(n = 10) {
   const measuresHistory: MeasureHistory[] = [];
   const metrics: Metric[] = [];
-  [MetricKey.bugs, MetricKey.code_smells, MetricKey.vulnerabilities].forEach(metric => {
-    const history = times(n, i => {
+  [MetricKey.bugs, MetricKey.code_smells, MetricKey.vulnerabilities].forEach((metric) => {
+    const history = times(n, (i) => {
       const date = parseDate('2016-01-01T00:00:00+0200');
       date.setDate(date.getDate() + 365 * i);
       return mockHistoryItem({ date, value: i.toString() });
@@ -95,7 +95,7 @@ function mockSeries(n = 10) {
       mockMetric({
         key: metric,
         name: metric,
-        type: 'INT'
+        type: 'INT',
       })
     );
   });
@@ -107,7 +107,7 @@ function mockSeries(n = 10) {
     getDisplayedHistoryMetrics(GraphType.issues, [
       MetricKey.bugs,
       MetricKey.code_smells,
-      MetricKey.vulnerabilities
+      MetricKey.vulnerabilities,
     ])
   );
 }
diff --git a/server/sonar-web/src/main/js/components/activity-graph/__tests__/DefinitionChangeEventInner-test.tsx b/server/sonar-web/src/main/js/components/activity-graph/__tests__/DefinitionChangeEventInner-test.tsx
index 9c5d0a62286..cd609cbfeca 100644
--- a/server/sonar-web/src/main/js/components/activity-graph/__tests__/DefinitionChangeEventInner-test.tsx
+++ b/server/sonar-web/src/main/js/components/activity-graph/__tests__/DefinitionChangeEventInner-test.tsx
@@ -31,9 +31,9 @@ it('should render', () => {
     definitionChange: {
       projects: [
         { changeType: 'ADDED', key: 'foo', name: 'Foo', branch: 'master' },
-        { changeType: 'REMOVED', key: 'bar', name: 'Bar', branch: 'master' }
-      ]
-    }
+        { changeType: 'REMOVED', key: 'bar', name: 'Bar', branch: 'master' },
+      ],
+    },
   };
   const wrapper = shallow(<DefinitionChangeEventInner branchLike={undefined} event={event} />);
   expect(wrapper).toMatchSnapshot();
@@ -57,10 +57,10 @@ it('should render for a branch', () => {
           key: 'bar',
           name: 'Bar',
           oldBranch: 'master',
-          newBranch: 'feature-y'
-        }
-      ]
-    }
+          newBranch: 'feature-y',
+        },
+      ],
+    },
   };
   const wrapper = shallow(<DefinitionChangeEventInner branchLike={branch} event={event} />);
   click(wrapper.find('.project-activity-event-inner-more-link'));
@@ -76,9 +76,9 @@ it('should render when readonly', () => {
     definitionChange: {
       projects: [
         { changeType: 'ADDED', key: 'foo', name: 'Foo', branch: 'master' },
-        { changeType: 'REMOVED', key: 'bar', name: 'Bar', branch: 'master' }
-      ]
-    }
+        { changeType: 'REMOVED', key: 'bar', name: 'Bar', branch: 'master' },
+      ],
+    },
   };
   const wrapper = shallow(
     <DefinitionChangeEventInner branchLike={undefined} event={event} readonly={true} />
diff --git a/server/sonar-web/src/main/js/components/activity-graph/__tests__/GraphsLegendCustom-test.tsx b/server/sonar-web/src/main/js/components/activity-graph/__tests__/GraphsLegendCustom-test.tsx
index 8a08a2dec57..c54700cf5ea 100644
--- a/server/sonar-web/src/main/js/components/activity-graph/__tests__/GraphsLegendCustom-test.tsx
+++ b/server/sonar-web/src/main/js/components/activity-graph/__tests__/GraphsLegendCustom-test.tsx
@@ -35,20 +35,20 @@ function shallowRender(props: Partial<GraphsLegendCustomProps> = {}) {
           name: 'bugs',
           translatedName: 'Bugs',
           data: [{ x: parseDate('2017-05-16T13:50:02+0200'), y: 1 }],
-          type: 'INT'
+          type: 'INT',
         },
         {
           name: 'my_metric',
           translatedName: 'My Metric',
           data: [{ x: parseDate('2017-05-16T13:50:02+0200'), y: 1 }],
-          type: 'INT'
+          type: 'INT',
         },
         {
           name: 'foo',
           translatedName: 'Foo',
           data: [],
-          type: 'INT'
-        }
+          type: 'INT',
+        },
       ]}
       {...props}
     />
diff --git a/server/sonar-web/src/main/js/components/activity-graph/__tests__/GraphsLegendItem-test.tsx b/server/sonar-web/src/main/js/components/activity-graph/__tests__/GraphsLegendItem-test.tsx
index b527754561d..d2c9a3ea8d5 100644
--- a/server/sonar-web/src/main/js/components/activity-graph/__tests__/GraphsLegendItem-test.tsx
+++ b/server/sonar-web/src/main/js/components/activity-graph/__tests__/GraphsLegendItem-test.tsx
@@ -31,7 +31,7 @@ it('should render correctly a legend', () => {
       index: 1,
       metric: 'foo',
       name: 'Foo',
-      removeMetric: jest.fn()
+      removeMetric: jest.fn(),
     })
   ).toMatchSnapshot('with legend');
   expect(shallowRender({ showWarning: true })).toMatchSnapshot('with warning');
diff --git a/server/sonar-web/src/main/js/components/activity-graph/__tests__/GraphsLegendStatic-test.tsx b/server/sonar-web/src/main/js/components/activity-graph/__tests__/GraphsLegendStatic-test.tsx
index e4fc2d2e90e..98403cb1eb0 100644
--- a/server/sonar-web/src/main/js/components/activity-graph/__tests__/GraphsLegendStatic-test.tsx
+++ b/server/sonar-web/src/main/js/components/activity-graph/__tests__/GraphsLegendStatic-test.tsx
@@ -30,7 +30,7 @@ function shallowRender(props: Partial<GraphsLegendStaticProps> = {}) {
     <GraphsLegendStatic
       series={[
         { name: 'bugs', translatedName: 'Bugs' },
-        { name: 'code_smells', translatedName: 'Code Smells' }
+        { name: 'code_smells', translatedName: 'Code Smells' },
       ]}
       {...props}
     />
diff --git a/server/sonar-web/src/main/js/components/activity-graph/__tests__/GraphsTooltips-test.tsx b/server/sonar-web/src/main/js/components/activity-graph/__tests__/GraphsTooltips-test.tsx
index b8087369c6a..d76eceafecb 100644
--- a/server/sonar-web/src/main/js/components/activity-graph/__tests__/GraphsTooltips-test.tsx
+++ b/server/sonar-web/src/main/js/components/activity-graph/__tests__/GraphsTooltips-test.tsx
@@ -31,14 +31,14 @@ const SERIES_ISSUES = [
     data: [
       {
         x: parseDate('2011-10-01T22:01:00.000Z'),
-        y: 3
+        y: 3,
       },
       {
         x: parseDate('2011-10-25T10:27:41.000Z'),
-        y: 0
-      }
+        y: 0,
+      },
     ],
-    type: 'INT'
+    type: 'INT',
   },
   {
     name: 'code_smells',
@@ -46,14 +46,14 @@ const SERIES_ISSUES = [
     data: [
       {
         x: parseDate('2011-10-01T22:01:00.000Z'),
-        y: 18
+        y: 18,
       },
       {
         x: parseDate('2011-10-25T10:27:41.000Z'),
-        y: 15
-      }
+        y: 15,
+      },
     ],
-    type: 'INT'
+    type: 'INT',
   },
   {
     name: 'vulnerabilities',
@@ -61,27 +61,27 @@ const SERIES_ISSUES = [
     data: [
       {
         x: parseDate('2011-10-01T22:01:00.000Z'),
-        y: 0
+        y: 0,
       },
       {
         x: parseDate('2011-10-25T10:27:41.000Z'),
-        y: 1
-      }
+        y: 1,
+      },
     ],
-    type: 'INT'
-  }
+    type: 'INT',
+  },
 ];
 
 const DEFAULT_PROPS: GraphsTooltips['props'] = {
   events: [],
-  formatValue: val => 'Formated.' + val,
+  formatValue: (val) => 'Formated.' + val,
   graph: DEFAULT_GRAPH,
   graphWidth: 500,
   measuresHistory: [],
   selectedDate: parseDate('2011-10-01T22:01:00.000Z'),
   series: SERIES_ISSUES,
   tooltipIdx: 0,
-  tooltipPos: 666
+  tooltipPos: 666,
 };
 
 it('should render correctly for issues graphs', () => {
diff --git a/server/sonar-web/src/main/js/components/activity-graph/__tests__/GraphsTooltipsContent-test.tsx b/server/sonar-web/src/main/js/components/activity-graph/__tests__/GraphsTooltipsContent-test.tsx
index 6eb1f63865e..ab5c3cb022c 100644
--- a/server/sonar-web/src/main/js/components/activity-graph/__tests__/GraphsTooltipsContent-test.tsx
+++ b/server/sonar-web/src/main/js/components/activity-graph/__tests__/GraphsTooltipsContent-test.tsx
@@ -25,7 +25,7 @@ const DEFAULT_PROPS = {
   index: 1,
   name: 'code_smells',
   translatedName: 'Code Smells',
-  value: '1.2k'
+  value: '1.2k',
 };
 
 it('should render correctly', () => {
diff --git a/server/sonar-web/src/main/js/components/activity-graph/__tests__/GraphsTooltipsContentCoverage-test.tsx b/server/sonar-web/src/main/js/components/activity-graph/__tests__/GraphsTooltipsContentCoverage-test.tsx
index ca0d2dcc777..f7f1a6d1851 100644
--- a/server/sonar-web/src/main/js/components/activity-graph/__tests__/GraphsTooltipsContentCoverage-test.tsx
+++ b/server/sonar-web/src/main/js/components/activity-graph/__tests__/GraphsTooltipsContentCoverage-test.tsx
@@ -21,7 +21,7 @@ import { shallow } from 'enzyme';
 import * as React from 'react';
 import { parseDate } from '../../../helpers/dates';
 import GraphsTooltipsContentCoverage, {
-  GraphsTooltipsContentCoverageProps
+  GraphsTooltipsContentCoverageProps,
 } from '../GraphsTooltipsContentCoverage';
 
 it('should render correctly', () => {
@@ -39,23 +39,23 @@ function shallowRender(props: Partial<GraphsTooltipsContentCoverageProps> = {})
           metric: 'coverage',
           history: [
             { date: parseDate('2011-10-01T22:01:00.000Z') },
-            { date: parseDate('2011-10-25T10:27:41.000Z'), value: '80.3' }
-          ]
+            { date: parseDate('2011-10-25T10:27:41.000Z'), value: '80.3' },
+          ],
         },
         {
           metric: 'lines_to_cover',
           history: [
             { date: parseDate('2011-10-01T22:01:00.000Z'), value: '60545' },
-            { date: parseDate('2011-10-25T10:27:41.000Z'), value: '65215' }
-          ]
+            { date: parseDate('2011-10-25T10:27:41.000Z'), value: '65215' },
+          ],
         },
         {
           metric: 'uncovered_lines',
           history: [
             { date: parseDate('2011-10-01T22:01:00.000Z'), value: '40564' },
-            { date: parseDate('2011-10-25T10:27:41.000Z'), value: '10245' }
-          ]
-        }
+            { date: parseDate('2011-10-25T10:27:41.000Z'), value: '10245' },
+          ],
+        },
       ]}
       tooltipIdx={1}
       {...props}
diff --git a/server/sonar-web/src/main/js/components/activity-graph/__tests__/GraphsTooltipsContentDuplication-test.tsx b/server/sonar-web/src/main/js/components/activity-graph/__tests__/GraphsTooltipsContentDuplication-test.tsx
index b17df740d20..69d82091e3b 100644
--- a/server/sonar-web/src/main/js/components/activity-graph/__tests__/GraphsTooltipsContentDuplication-test.tsx
+++ b/server/sonar-web/src/main/js/components/activity-graph/__tests__/GraphsTooltipsContentDuplication-test.tsx
@@ -21,7 +21,7 @@ import { shallow } from 'enzyme';
 import * as React from 'react';
 import { parseDate } from '../../../helpers/dates';
 import GraphsTooltipsContentDuplication, {
-  GraphsTooltipsContentDuplicationProps
+  GraphsTooltipsContentDuplicationProps,
 } from '../GraphsTooltipsContentDuplication';
 
 it('should render correctly', () => {
@@ -40,9 +40,9 @@ function shallowRender(props: Partial<GraphsTooltipsContentDuplicationProps> = {
           metric: 'duplicated_lines_density',
           history: [
             { date: parseDate('2011-10-01T22:01:00.000Z') },
-            { date: parseDate('2011-10-25T10:27:41.000Z'), value: '10245' }
-          ]
-        }
+            { date: parseDate('2011-10-25T10:27:41.000Z'), value: '10245' },
+          ],
+        },
       ]}
       tooltipIdx={1}
       {...props}
diff --git a/server/sonar-web/src/main/js/components/activity-graph/__tests__/GraphsTooltipsContentEvents-test.tsx b/server/sonar-web/src/main/js/components/activity-graph/__tests__/GraphsTooltipsContentEvents-test.tsx
index d59e9fee197..24f8075b0cd 100644
--- a/server/sonar-web/src/main/js/components/activity-graph/__tests__/GraphsTooltipsContentEvents-test.tsx
+++ b/server/sonar-web/src/main/js/components/activity-graph/__tests__/GraphsTooltipsContentEvents-test.tsx
@@ -23,7 +23,7 @@ import GraphsTooltipsContentEvents from '../GraphsTooltipsContentEvents';
 
 const EVENTS = [
   { key: '1', category: 'VERSION', name: '6.5' },
-  { key: '2', category: 'OTHER', name: 'Foo' }
+  { key: '2', category: 'OTHER', name: 'Foo' },
 ];
 
 it('should render correctly', () => {
diff --git a/server/sonar-web/src/main/js/components/activity-graph/__tests__/GraphsTooltipsContentIssues-test.tsx b/server/sonar-web/src/main/js/components/activity-graph/__tests__/GraphsTooltipsContentIssues-test.tsx
index f8ff03bb389..b3ab3a252cb 100644
--- a/server/sonar-web/src/main/js/components/activity-graph/__tests__/GraphsTooltipsContentIssues-test.tsx
+++ b/server/sonar-web/src/main/js/components/activity-graph/__tests__/GraphsTooltipsContentIssues-test.tsx
@@ -21,7 +21,7 @@ import { shallow } from 'enzyme';
 import * as React from 'react';
 import { parseDate } from '../../../helpers/dates';
 import GraphsTooltipsContentIssues, {
-  GraphsTooltipsContentIssuesProps
+  GraphsTooltipsContentIssuesProps,
 } from '../GraphsTooltipsContentIssues';
 
 it('should render correctly', () => {
@@ -38,16 +38,16 @@ function shallowRender(props: Partial<GraphsTooltipsContentIssuesProps> = {}) {
           metric: 'bugs',
           history: [
             { date: parseDate('2011-10-01T22:01:00.000Z'), value: '500' },
-            { date: parseDate('2011-10-25T10:27:41.000Z'), value: '1.2k' }
-          ]
+            { date: parseDate('2011-10-25T10:27:41.000Z'), value: '1.2k' },
+          ],
         },
         {
           metric: 'reliability_rating',
           history: [
             { date: parseDate('2011-10-01T22:01:00.000Z') },
-            { date: parseDate('2011-10-25T10:27:41.000Z'), value: '5.0' }
-          ]
-        }
+            { date: parseDate('2011-10-25T10:27:41.000Z'), value: '5.0' },
+          ],
+        },
       ]}
       name="bugs"
       tooltipIdx={1}
diff --git a/server/sonar-web/src/main/js/components/activity-graph/__tests__/RichQualityGateEventInner-test.tsx b/server/sonar-web/src/main/js/components/activity-graph/__tests__/RichQualityGateEventInner-test.tsx
index b4cd59e56c5..471c2ad61db 100644
--- a/server/sonar-web/src/main/js/components/activity-graph/__tests__/RichQualityGateEventInner-test.tsx
+++ b/server/sonar-web/src/main/js/components/activity-graph/__tests__/RichQualityGateEventInner-test.tsx
@@ -29,11 +29,11 @@ const event: RichQualityGateEvent = {
   qualityGate: {
     failing: [
       { branch: 'master', key: 'foo', name: 'Foo' },
-      { branch: 'master', key: 'bar', name: 'Bar' }
+      { branch: 'master', key: 'bar', name: 'Bar' },
     ],
     status: 'ERROR',
-    stillFailing: true
-  }
+    stillFailing: true,
+  },
 };
 
 it('should render', () => {
diff --git a/server/sonar-web/src/main/js/components/activity-graph/__tests__/utils-test.ts b/server/sonar-web/src/main/js/components/activity-graph/__tests__/utils-test.ts
index 4bb4c586c64..caea2f64e91 100644
--- a/server/sonar-web/src/main/js/components/activity-graph/__tests__/utils-test.ts
+++ b/server/sonar-web/src/main/js/components/activity-graph/__tests__/utils-test.ts
@@ -26,11 +26,11 @@ jest.mock('date-fns', () => {
   const actual = jest.requireActual('date-fns');
   return {
     ...actual,
-    startOfDay: jest.fn(date => {
+    startOfDay: jest.fn((date) => {
       const startDay = new Date(date);
       startDay.setUTCHours(0, 0, 0, 0);
       return startDay;
-    })
+    }),
   };
 });
 
@@ -39,31 +39,31 @@ const HISTORY = [
     metric: MetricKey.lines_to_cover,
     history: [
       { date: dates.parseDate('2017-04-27T08:21:32.000Z'), value: '100' },
-      { date: dates.parseDate('2017-04-30T23:06:24.000Z'), value: '100' }
-    ]
+      { date: dates.parseDate('2017-04-30T23:06:24.000Z'), value: '100' },
+    ],
   },
   {
     metric: MetricKey.uncovered_lines,
     history: [
       { date: dates.parseDate('2017-04-27T08:21:32.000Z'), value: '12' },
-      { date: dates.parseDate('2017-04-30T23:06:24.000Z'), value: '50' }
-    ]
-  }
+      { date: dates.parseDate('2017-04-30T23:06:24.000Z'), value: '50' },
+    ],
+  },
 ];
 
 const METRICS = [
   { id: '1', key: MetricKey.uncovered_lines, name: 'Uncovered Lines', type: 'INT' },
-  { id: '2', key: MetricKey.lines_to_cover, name: 'Line to Cover', type: 'PERCENT' }
+  { id: '2', key: MetricKey.lines_to_cover, name: 'Line to Cover', type: 'PERCENT' },
 ];
 
 const SERIE: Serie = {
   data: [
     { x: dates.parseDate('2017-04-27T08:21:32.000Z'), y: 2 },
-    { x: dates.parseDate('2017-04-28T08:21:32.000Z'), y: 2 }
+    { x: dates.parseDate('2017-04-28T08:21:32.000Z'), y: 2 },
   ],
   name: 'foo',
   translatedName: 'Foo',
-  type: 'PERCENT'
+  type: 'PERCENT',
 };
 
 describe('generateCoveredLinesMetric', () => {
@@ -78,7 +78,7 @@ describe('generateSeries', () => {
     expect(
       utils.generateSeries(HISTORY, GraphType.coverage, METRICS, [
         MetricKey.uncovered_lines,
-        MetricKey.lines_to_cover
+        MetricKey.lines_to_cover,
       ])
     ).toMatchSnapshot();
   });
@@ -93,11 +93,11 @@ describe('getDisplayedHistoryMetrics', () => {
     expect(utils.getDisplayedHistoryMetrics(utils.DEFAULT_GRAPH, [])).toEqual([
       MetricKey.bugs,
       MetricKey.code_smells,
-      MetricKey.vulnerabilities
+      MetricKey.vulnerabilities,
     ]);
     expect(utils.getDisplayedHistoryMetrics(GraphType.coverage, customMetrics)).toEqual([
       MetricKey.lines_to_cover,
-      MetricKey.uncovered_lines
+      MetricKey.uncovered_lines,
     ]);
   });
   it('should return all custom metrics for the custom graph', () => {
@@ -116,12 +116,12 @@ describe('getHistoryMetrics', () => {
       MetricKey.vulnerabilities,
       MetricKey.reliability_rating,
       MetricKey.security_rating,
-      MetricKey.sqale_rating
+      MetricKey.sqale_rating,
     ]);
     expect(utils.getHistoryMetrics(GraphType.coverage, customMetrics)).toEqual([
       MetricKey.lines_to_cover,
       MetricKey.uncovered_lines,
-      GraphType.coverage
+      GraphType.coverage,
     ]);
     expect(utils.getHistoryMetrics(GraphType.custom, customMetrics)).toEqual(customMetrics);
   });
@@ -137,9 +137,9 @@ describe('hasHistoryData', () => {
           type: 'INT',
           data: [
             { x: dates.parseDate('2017-04-27T08:21:32.000Z'), y: 2 },
-            { x: dates.parseDate('2017-04-30T23:06:24.000Z'), y: 2 }
-          ]
-        }
+            { x: dates.parseDate('2017-04-30T23:06:24.000Z'), y: 2 },
+          ],
+        },
       ])
     ).toBe(true);
     expect(
@@ -148,7 +148,7 @@ describe('hasHistoryData', () => {
           name: 'foo',
           translatedName: 'foo',
           type: 'INT',
-          data: []
+          data: [],
         },
         {
           name: 'bar',
@@ -156,9 +156,9 @@ describe('hasHistoryData', () => {
           type: 'INT',
           data: [
             { x: dates.parseDate('2017-04-27T08:21:32.000Z'), y: 2 },
-            { x: dates.parseDate('2017-04-30T23:06:24.000Z'), y: 2 }
-          ]
-        }
+            { x: dates.parseDate('2017-04-30T23:06:24.000Z'), y: 2 },
+          ],
+        },
       ])
     ).toBe(true);
     expect(
@@ -167,8 +167,8 @@ describe('hasHistoryData', () => {
           name: 'bar',
           translatedName: 'bar',
           type: 'INT',
-          data: [{ x: dates.parseDate('2017-04-27T08:21:32.000Z'), y: 2 }]
-        }
+          data: [{ x: dates.parseDate('2017-04-27T08:21:32.000Z'), y: 2 }],
+        },
       ])
     ).toBe(false);
   });
diff --git a/server/sonar-web/src/main/js/components/activity-graph/utils.ts b/server/sonar-web/src/main/js/components/activity-graph/utils.ts
index 4c84246e277..22b94853464 100644
--- a/server/sonar-web/src/main/js/components/activity-graph/utils.ts
+++ b/server/sonar-web/src/main/js/components/activity-graph/utils.ts
@@ -30,20 +30,20 @@ export const DEFAULT_GRAPH = GraphType.issues;
 const GRAPHS_METRICS_DISPLAYED: Dict<string[]> = {
   [GraphType.issues]: [MetricKey.bugs, MetricKey.code_smells, MetricKey.vulnerabilities],
   [GraphType.coverage]: [MetricKey.lines_to_cover, MetricKey.uncovered_lines],
-  [GraphType.duplications]: [MetricKey.ncloc, MetricKey.duplicated_lines]
+  [GraphType.duplications]: [MetricKey.ncloc, MetricKey.duplicated_lines],
 };
 
 const GRAPHS_METRICS: Dict<string[]> = {
   [GraphType.issues]: GRAPHS_METRICS_DISPLAYED[GraphType.issues].concat([
     MetricKey.reliability_rating,
     MetricKey.security_rating,
-    MetricKey.sqale_rating
+    MetricKey.sqale_rating,
   ]),
   [GraphType.coverage]: [...GRAPHS_METRICS_DISPLAYED[GraphType.coverage], MetricKey.coverage],
   [GraphType.duplications]: [
     ...GRAPHS_METRICS_DISPLAYED[GraphType.duplications],
-    MetricKey.duplicated_lines_density
-  ]
+    MetricKey.duplicated_lines_density,
+  ],
 };
 
 export function isCustomGraph(graph: GraphType) {
@@ -56,11 +56,11 @@ export function getGraphTypes(ignoreCustom = false) {
 }
 
 export function hasDataValues(serie: Serie) {
-  return serie.data.some(point => Boolean(point.y || point.y === 0));
+  return serie.data.some((point) => Boolean(point.y || point.y === 0));
 }
 
 export function hasHistoryData(series: Serie[]) {
-  return series.some(serie => serie.data && serie.data.length > 1);
+  return series.some((serie) => serie.data && serie.data.length > 1);
 }
 
 export function getSeriesMetricType(series: Serie[]) {
@@ -76,13 +76,13 @@ export function getHistoryMetrics(graph: GraphType, customMetrics: string[]) {
 }
 
 export function hasHistoryDataValue(series: Serie[]) {
-  return series.some(serie => serie.data && serie.data.length > 1 && hasDataValues(serie));
+  return series.some((serie) => serie.data && serie.data.length > 1 && hasDataValues(serie));
 }
 
 export function splitSeriesInGraphs(series: Serie[], maxGraph: number, maxSeries: number) {
   return flatMap(
-    groupBy(series, serie => serie.type),
-    type => chunk(type, maxSeries)
+    groupBy(series, (serie) => serie.type),
+    (type) => chunk(type, maxSeries)
   ).slice(0, maxGraph);
 }
 
@@ -90,17 +90,19 @@ export function generateCoveredLinesMetric(
   uncoveredLines: MeasureHistory,
   measuresHistory: MeasureHistory[]
 ) {
-  const linesToCover = measuresHistory.find(measure => measure.metric === MetricKey.lines_to_cover);
+  const linesToCover = measuresHistory.find(
+    (measure) => measure.metric === MetricKey.lines_to_cover
+  );
   return {
     data: linesToCover
       ? uncoveredLines.history.map((analysis, idx) => ({
           x: analysis.date,
-          y: Number(linesToCover.history[idx].value) - Number(analysis.value)
+          y: Number(linesToCover.history[idx].value) - Number(analysis.value),
         }))
       : [],
     name: 'covered_lines',
     translatedName: translate('project_activity.custom_metric.covered_lines'),
-    type: 'INT'
+    type: 'INT',
   };
 }
 
@@ -115,23 +117,23 @@ export function generateSeries(
   }
   return sortBy(
     measuresHistory
-      .filter(measure => displayedMetrics.indexOf(measure.metric) >= 0)
-      .map(measure => {
+      .filter((measure) => displayedMetrics.indexOf(measure.metric) >= 0)
+      .map((measure) => {
         if (measure.metric === MetricKey.uncovered_lines && !isCustomGraph(graph)) {
           return generateCoveredLinesMetric(measure, measuresHistory);
         }
         const metric = findMetric(measure.metric, metrics);
         return {
-          data: measure.history.map(analysis => ({
+          data: measure.history.map((analysis) => ({
             x: analysis.date,
-            y: metric && metric.type === 'LEVEL' ? analysis.value : Number(analysis.value)
+            y: metric && metric.type === 'LEVEL' ? analysis.value : Number(analysis.value),
           })),
           name: measure.metric,
           translatedName: metric ? getLocalizedMetricName(metric) : localizeMetric(measure.metric),
-          type: metric ? metric.type : 'INT'
+          type: metric ? metric.type : 'INT',
         };
       }),
-    serie =>
+    (serie) =>
       displayedMetrics.indexOf(serie.name === 'covered_lines' ? 'uncovered_lines' : serie.name)
   );
 }
@@ -155,13 +157,13 @@ export function getActivityGraph(
   const customGraphs = get(`${namespace}.custom`, project);
   return {
     graph: (get(namespace, project) as GraphType) || DEFAULT_GRAPH,
-    customGraphs: customGraphs ? customGraphs.split(',') : []
+    customGraphs: customGraphs ? customGraphs.split(',') : [],
   };
 }
 
 export function getAnalysisEventsForDate(analyses: ParsedAnalysis[], date?: Date) {
   if (date) {
-    const analysis = analyses.find(a => a.date.valueOf() === date.valueOf());
+    const analysis = analyses.find((a) => a.date.valueOf() === date.valueOf());
     if (analysis) {
       return analysis.events;
     }
@@ -171,7 +173,7 @@ export function getAnalysisEventsForDate(analyses: ParsedAnalysis[], date?: Date
 
 function findMetric(key: string, metrics: Metric[] | Dict<Metric>) {
   if (Array.isArray(metrics)) {
-    return metrics.find(metric => metric.key === key);
+    return metrics.find((metric) => metric.key === key);
   }
   return metrics[key];
 }
diff --git a/server/sonar-web/src/main/js/components/charts/AdvancedTimeline.tsx b/server/sonar-web/src/main/js/components/charts/AdvancedTimeline.tsx
index 114afb0ae26..03100524339 100644
--- a/server/sonar-web/src/main/js/components/charts/AdvancedTimeline.tsx
+++ b/server/sonar-web/src/main/js/components/charts/AdvancedTimeline.tsx
@@ -77,7 +77,7 @@ export default class AdvancedTimeline extends React.PureComponent<Props, State>
     eventSize: 8,
     maxYTicksCount: 4,
     padding: [26, 10, 50, 60],
-    zoomSpeed: 1
+    zoomSpeed: 1,
   };
 
   constructor(props: Props) {
@@ -131,15 +131,11 @@ export default class AdvancedTimeline extends React.PureComponent<Props, State>
   }
 
   getRatingScale = (availableHeight: number) => {
-    return scalePoint<number>()
-      .domain([5, 4, 3, 2, 1])
-      .range([availableHeight, 0]);
+    return scalePoint<number>().domain([5, 4, 3, 2, 1]).range([availableHeight, 0]);
   };
 
   getLevelScale = (availableHeight: number) => {
-    return scalePoint()
-      .domain(['ERROR', 'WARN', 'OK'])
-      .range([availableHeight, 0]);
+    return scalePoint().domain(['ERROR', 'WARN', 'OK']).range([availableHeight, 0]);
   };
 
   getYScale = (props: Props, availableHeight: number, flatData: Chart.Point[]): YScale => {
@@ -150,12 +146,12 @@ export default class AdvancedTimeline extends React.PureComponent<Props, State>
     }
     return scaleLinear()
       .range([availableHeight, 0])
-      .domain([0, max(flatData, d => Number(d.y || 0)) || 1])
+      .domain([0, max(flatData, (d) => Number(d.y || 0)) || 1])
       .nice();
   };
 
   getXScale = ({ startDate, endDate }: Props, availableWidth: number, flatData: Chart.Point[]) => {
-    const dateRange = extent(flatData, d => d.x) as [Date, Date];
+    const dateRange = extent(flatData, (d) => d.x) as [Date, Date];
     const start = startDate && startDate > dateRange[0] ? startDate : dateRange[0];
     const end = endDate && endDate < dateRange[1] ? endDate : dateRange[1];
     const xScale: ScaleTime<number, number> = scaleTime()
@@ -164,31 +160,31 @@ export default class AdvancedTimeline extends React.PureComponent<Props, State>
       .clamp(false);
     return {
       xScale,
-      maxXRange: dateRange.map(xScale)
+      maxXRange: dateRange.map(xScale),
     };
   };
 
   getScales = (props: Props) => {
     const availableWidth = props.width - props.padding[1] - props.padding[3];
     const availableHeight = props.height - props.padding[0] - props.padding[2];
-    const flatData = flatten(props.series.map(serie => serie.data));
+    const flatData = flatten(props.series.map((serie) => serie.data));
     return {
       ...this.getXScale(props, availableWidth, flatData),
-      yScale: this.getYScale(props, availableHeight, flatData)
+      yScale: this.getYScale(props, availableHeight, flatData),
     };
   };
 
   getSelectedDatePos = (xScale: XScale, selectedDate?: Date) => {
     const firstSerie = this.props.series[0];
     if (selectedDate && firstSerie) {
-      const idx = firstSerie.data.findIndex(p => p.x.valueOf() === selectedDate.valueOf());
+      const idx = firstSerie.data.findIndex((p) => p.x.valueOf() === selectedDate.valueOf());
       const xRange = sortBy(xScale.range());
       const xPos = xScale(selectedDate);
       if (idx >= 0 && xPos >= xRange[0] && xPos <= xRange[1]) {
         return {
           selectedDate,
           selectedDateXPos: xScale(selectedDate),
-          selectedDateIdx: idx
+          selectedDateIdx: idx,
         };
       }
     }
@@ -239,7 +235,7 @@ export default class AdvancedTimeline extends React.PureComponent<Props, State>
         mouseOver: false,
         selectedDate: undefined,
         selectedDateXPos: undefined,
-        selectedDateIdx: undefined
+        selectedDateIdx: undefined,
       });
       updateTooltip(undefined, undefined, undefined);
     }
@@ -259,12 +255,12 @@ export default class AdvancedTimeline extends React.PureComponent<Props, State>
   };
 
   updateTooltipPos = (xPos: number) => {
-    this.setState(state => {
+    this.setState((state) => {
       const firstSerie = this.props.series[0];
       if (state.mouseOver && firstSerie) {
         const { updateTooltip } = this.props;
         const date = state.xScale.invert(xPos);
-        const bisectX = bisector<Chart.Point, Date>(d => d.x).right;
+        const bisectX = bisector<Chart.Point, Date>((d) => d.x).right;
         let idx = bisectX(firstSerie.data, date);
         if (idx >= 0) {
           const previousPoint = firstSerie.data[idx - 1];
@@ -303,7 +299,7 @@ export default class AdvancedTimeline extends React.PureComponent<Props, State>
     // if there are duplicated ticks, that means 4 ticks are too much for this data
     // so let's just use the domain values (min and max)
     if (formatYTick) {
-      const formattedTicks = ticks.map(tick => formatYTick(tick));
+      const formattedTicks = ticks.map((tick) => formatYTick(tick));
       if (ticks.length > uniq(formattedTicks).length) {
         ticks = yScale.domain();
       }
@@ -311,7 +307,7 @@ export default class AdvancedTimeline extends React.PureComponent<Props, State>
 
     return (
       <g>
-        {ticks.map(tick => (
+        {ticks.map((tick) => (
           <g key={tick}>
             {formatYTick != null && (
               <text
@@ -320,7 +316,8 @@ export default class AdvancedTimeline extends React.PureComponent<Props, State>
                 dy="0.3em"
                 textAnchor="end"
                 x={xScale.range()[0]}
-                y={yScale(tick)}>
+                y={yScale(tick)}
+              >
                 {formatYTick(tick)}
               </text>
             )}
@@ -355,7 +352,8 @@ export default class AdvancedTimeline extends React.PureComponent<Props, State>
               textAnchor="end"
               transform={`rotate(-35, ${x}, ${y})`}
               x={x}
-              y={y}>
+              y={y}
+            >
               {format(tick)}
             </text>
           );
@@ -407,7 +405,8 @@ export default class AdvancedTimeline extends React.PureComponent<Props, State>
           ref={this.setLeakLegendTextWidth}
           x={legendPosition}
           y={yRange[yRange.length - 1] - legendPadding - legendMargin}
-          textAnchor={legendTextAnchor}>
+          textAnchor={legendTextAnchor}
+        >
           new code
         </text>
       </>
@@ -449,9 +448,9 @@ export default class AdvancedTimeline extends React.PureComponent<Props, State>
 
   renderLines = () => {
     const lineGenerator = d3Line<Chart.Point>()
-      .defined(d => Boolean(d.y || d.y === 0))
-      .x(d => this.state.xScale(d.x))
-      .y(d => this.state.yScale(d.y));
+      .defined((d) => Boolean(d.y || d.y === 0))
+      .x((d) => this.state.xScale(d.x))
+      .y((d) => this.state.yScale(d.y));
     if (this.props.basisCurve) {
       lineGenerator.curve(curveBasis);
     }
@@ -496,16 +495,16 @@ export default class AdvancedTimeline extends React.PureComponent<Props, State>
               })
               .filter(isDefined)
           )
-          .filter(dots => dots.length > 0)}
+          .filter((dots) => dots.length > 0)}
       </g>
     );
   };
 
   renderAreas = () => {
     const areaGenerator = area<Chart.Point>()
-      .defined(d => Boolean(d.y || d.y === 0))
-      .x(d => this.state.xScale(d.x))
-      .y1(d => this.state.yScale(d.y))
+      .defined((d) => Boolean(d.y || d.y === 0))
+      .x((d) => this.state.xScale(d.x))
+      .y1((d) => this.state.yScale(d.y))
       .y0(this.state.yScale(0));
     if (this.props.basisCurve) {
       areaGenerator.curve(curveBasis);
@@ -607,7 +606,7 @@ export default class AdvancedTimeline extends React.PureComponent<Props, State>
       hideGrid,
       hideXAxis,
       showAreas,
-      graphDescription
+      graphDescription,
     } = this.props;
     if (!width || !height) {
       return <div />;
@@ -619,7 +618,8 @@ export default class AdvancedTimeline extends React.PureComponent<Props, State>
         aria-label={graphDescription}
         className={classNames('line-chart', { 'chart-zoomed': isZoomed })}
         height={height}
-        width={width}>
+        width={width}
+      >
         {zoomEnabled && this.renderClipPath()}
         <g transform={`translate(${padding[3]}, ${padding[0]})`}>
           {leakPeriodDate != null && this.renderLeak()}
diff --git a/server/sonar-web/src/main/js/components/charts/BarChart.tsx b/server/sonar-web/src/main/js/components/charts/BarChart.tsx
index 188a7cdb8bc..5d1ddc8654d 100644
--- a/server/sonar-web/src/main/js/components/charts/BarChart.tsx
+++ b/server/sonar-web/src/main/js/components/charts/BarChart.tsx
@@ -69,7 +69,8 @@ export default class BarChart<T> extends React.PureComponent<Props<T>> {
           onClick={() => this.handleClick(point)}
           style={{ cursor: this.props.onBarClick ? 'pointer' : 'default' }}
           x={x}
-          y={y}>
+          y={y}
+        >
           {tick}
         </text>
       );
@@ -103,7 +104,8 @@ export default class BarChart<T> extends React.PureComponent<Props<T>> {
           onClick={() => this.handleClick(point)}
           style={{ cursor: this.props.onBarClick ? 'pointer' : 'default' }}
           x={x}
-          y={y}>
+          y={y}
+        >
           {value}
         </text>
       );
@@ -156,14 +158,12 @@ export default class BarChart<T> extends React.PureComponent<Props<T>> {
     const innerPadding = (availableWidth - barsWidth * data.length) / (data.length - 1);
     const relativeInnerPadding = innerPadding / (innerPadding + barsWidth);
 
-    const maxY = max(data, d => d.y) as number;
+    const maxY = max(data, (d) => d.y) as number;
     const xScale = scaleBand<number>()
-      .domain(data.map(d => d.x))
+      .domain(data.map((d) => d.x))
       .range([0, availableWidth])
       .paddingInner(relativeInnerPadding);
-    const yScale = scaleLinear()
-      .domain([0, maxY])
-      .range([availableHeight, 0]);
+    const yScale = scaleLinear().domain([0, maxY]).range([availableHeight, 0]);
 
     return (
       <svg className="bar-chart" height={height} width={width}>
diff --git a/server/sonar-web/src/main/js/components/charts/BubbleChart.tsx b/server/sonar-web/src/main/js/components/charts/BubbleChart.tsx
index 955d9f62610..e2c0f16e638 100644
--- a/server/sonar-web/src/main/js/components/charts/BubbleChart.tsx
+++ b/server/sonar-web/src/main/js/components/charts/BubbleChart.tsx
@@ -77,7 +77,7 @@ export default class BubbleChart<T> extends React.PureComponent<Props<T>, State>
     formatXTick: (d: number) => String(d),
     formatYTick: (d: number) => String(d),
     padding: [10, 10, 10, 10],
-    sizeRange: [5, 45]
+    sizeRange: [5, 45],
   };
 
   constructor(props: Props<T>) {
@@ -90,16 +90,14 @@ export default class BubbleChart<T> extends React.PureComponent<Props<T>, State>
       const rect = this.node.getBoundingClientRect();
       this.zoom.translateExtent([
         [0, 0],
-        [rect.width, rect.height]
+        [rect.width, rect.height],
       ]);
     }
   }
 
   boundNode = (node: SVGSVGElement) => {
     this.node = node;
-    this.zoom = zoom()
-      .scaleExtent([1, 10])
-      .on('zoom', this.zoomed);
+    this.zoom = zoom().scaleExtent([1, 10]).on('zoom', this.zoomed);
     select(this.node).call(this.zoom as any);
   };
 
@@ -110,8 +108,8 @@ export default class BubbleChart<T> extends React.PureComponent<Props<T>, State>
       transform: {
         x: x + padding[3] * (k - 1),
         y: y + padding[0] * (k - 1),
-        k
-      }
+        k,
+      },
     });
   };
 
@@ -124,16 +122,16 @@ export default class BubbleChart<T> extends React.PureComponent<Props<T>, State>
   };
 
   getXRange(xScale: Scale, sizeScale: Scale, availableWidth: number) {
-    const minX = min(this.props.items, d => xScale(d.x) - sizeScale(d.size)) || 0;
-    const maxX = max(this.props.items, d => xScale(d.x) + sizeScale(d.size)) || 0;
+    const minX = min(this.props.items, (d) => xScale(d.x) - sizeScale(d.size)) || 0;
+    const maxX = max(this.props.items, (d) => xScale(d.x) + sizeScale(d.size)) || 0;
     const dMinX = minX < 0 ? xScale.range()[0] - minX : xScale.range()[0];
     const dMaxX = maxX > xScale.range()[1] ? maxX - xScale.range()[1] : 0;
     return [dMinX, availableWidth - dMaxX];
   }
 
   getYRange(yScale: Scale, sizeScale: Scale, availableHeight: number) {
-    const minY = min(this.props.items, d => yScale(d.y) - sizeScale(d.size)) || 0;
-    const maxY = max(this.props.items, d => yScale(d.y) + sizeScale(d.size)) || 0;
+    const minY = min(this.props.items, (d) => yScale(d.y) - sizeScale(d.size)) || 0;
+    const maxY = max(this.props.items, (d) => yScale(d.y) + sizeScale(d.size)) || 0;
     const dMinY = minY < 0 ? yScale.range()[1] - minY : yScale.range()[1];
     const dMaxY = maxY > yScale.range()[0] ? maxY - yScale.range()[0] : 0;
     return [availableHeight - dMaxY, dMinY];
@@ -141,7 +139,7 @@ export default class BubbleChart<T> extends React.PureComponent<Props<T>, State>
 
   getTicks(scale: Scale, format: (d: number) => string) {
     const zoomAmount = Math.ceil(this.state.transform.k);
-    const ticks = scale.ticks(TICKS_COUNT * zoomAmount).map(tick => format(tick));
+    const ticks = scale.ticks(TICKS_COUNT * zoomAmount).map((tick) => format(tick));
     const uniqueTicksCount = uniq(ticks).length;
     const ticksCount =
       uniqueTicksCount < TICKS_COUNT * zoomAmount ? uniqueTicksCount - 1 : TICKS_COUNT * zoomAmount;
@@ -243,7 +241,8 @@ export default class BubbleChart<T> extends React.PureComponent<Props<T>, State>
           // eslint-disable-next-line react/no-array-index-key
           key={index}
           x={x}
-          y={y}>
+          y={y}
+        >
           {innerText}
         </text>
       ) : null;
@@ -258,15 +257,15 @@ export default class BubbleChart<T> extends React.PureComponent<Props<T>, State>
     const availableHeight = this.props.height - this.props.padding[0] - this.props.padding[2];
 
     const xScale = scaleLinear()
-      .domain(this.props.xDomain || [0, max(this.props.items, d => d.x) || 0])
+      .domain(this.props.xDomain || [0, max(this.props.items, (d) => d.x) || 0])
       .range([0, availableWidth])
       .nice();
     const yScale = scaleLinear()
-      .domain(this.props.yDomain || [0, max(this.props.items, d => d.y) || 0])
+      .domain(this.props.yDomain || [0, max(this.props.items, (d) => d.y) || 0])
       .range([availableHeight, 0])
       .nice();
     const sizeScale = scaleLinear()
-      .domain(this.props.sizeDomain || [0, max(this.props.items, d => d.size) || 0])
+      .domain(this.props.sizeDomain || [0, max(this.props.items, (d) => d.size) || 0])
       .range(this.props.sizeRange || []);
 
     const xScaleOriginal = xScale.copy();
@@ -275,7 +274,7 @@ export default class BubbleChart<T> extends React.PureComponent<Props<T>, State>
     xScale.range(this.getXRange(xScale, sizeScale, availableWidth));
     yScale.range(this.getYRange(yScale, sizeScale, availableHeight));
 
-    const bubbles = sortBy(this.props.items, b => -b.size).map((item, index) => {
+    const bubbles = sortBy(this.props.items, (b) => -b.size).map((item, index) => {
       return (
         <Bubble
           color={item.color}
@@ -299,7 +298,8 @@ export default class BubbleChart<T> extends React.PureComponent<Props<T>, State>
         className={classNames('bubble-chart')}
         height={this.props.height}
         ref={this.boundNode}
-        width={width}>
+        width={width}
+      >
         <defs>
           <clipPath id="graph-region">
             <rect
@@ -336,7 +336,7 @@ export default class BubbleChart<T> extends React.PureComponent<Props<T>, State>
             </Link>
           </Tooltip>
         </div>
-        <AutoSizer disableHeight={true}>{size => this.renderChart(size.width)}</AutoSizer>
+        <AutoSizer disableHeight={true}>{(size) => this.renderChart(size.width)}</AutoSizer>
       </div>
     );
   }
diff --git a/server/sonar-web/src/main/js/components/charts/ColorGradientLegend.tsx b/server/sonar-web/src/main/js/components/charts/ColorGradientLegend.tsx
index 98b37510dfb..8cd5c7659e9 100644
--- a/server/sonar-web/src/main/js/components/charts/ColorGradientLegend.tsx
+++ b/server/sonar-web/src/main/js/components/charts/ColorGradientLegend.tsx
@@ -42,7 +42,7 @@ export default function ColorGradientLegend({
   padding = [12, 24, 0, 0],
   height,
   showColorNA = false,
-  width
+  width,
 }: Props) {
   const colorRange: Array<string | number> = colorScale.range();
   const colorDomain: Array<string | number> = colorScale.domain();
@@ -65,8 +65,9 @@ export default function ColorGradientLegend({
           width="30"
           height="30"
           patternTransform="rotate(45 0 0)"
-          patternUnits="userSpaceOnUse">
-          {NA_GRADIENT_LINE_INCREMENTS.map(i => (
+          patternUnits="userSpaceOnUse"
+        >
+          {NA_GRADIENT_LINE_INCREMENTS.map((i) => (
             <React.Fragment key={i}>
               <line
                 x1={i}
@@ -95,7 +96,8 @@ export default function ColorGradientLegend({
             // eslint-disable-next-line react/no-array-index-key
             key={idx}
             x={widthNoPadding * (idx / lastDomainIdx)}
-            y={0}>
+            y={0}
+          >
             {d}
           </text>
         ))}
@@ -113,7 +115,8 @@ export default function ColorGradientLegend({
             className="gradient-legend-na"
             dy="-2px"
             x={NA_SPACING + (padding[1] - NA_SPACING) / 2}
-            y={0}>
+            y={0}
+          >
             N/A
           </text>
         </g>
diff --git a/server/sonar-web/src/main/js/components/charts/ColorRatingsLegend.tsx b/server/sonar-web/src/main/js/components/charts/ColorRatingsLegend.tsx
index 982d0fea5c6..526f303b240 100644
--- a/server/sonar-web/src/main/js/components/charts/ColorRatingsLegend.tsx
+++ b/server/sonar-web/src/main/js/components/charts/ColorRatingsLegend.tsx
@@ -38,23 +38,26 @@ export default function ColorRatingsLegend(props: ColorRatingsLegendProps) {
   const { className, filters } = props;
   return (
     <ul className={classNames('color-box-legend', className)}>
-      {RATINGS.map(rating => (
+      {RATINGS.map((rating) => (
         <li key={rating}>
           <Tooltip
             overlay={translateWithParameters(
               'component_measures.legend.help_x',
               formatMeasure(rating, 'RATING')
-            )}>
+            )}
+          >
             <Checkbox
               className="display-flex-center"
               checked={!filters[rating]}
-              onCheck={() => props.onRatingClick(rating)}>
+              onCheck={() => props.onRatingClick(rating)}
+            >
               <span
                 className="color-box-legend-rating little-spacer-left"
                 style={{
                   borderColor: RATING_COLORS[rating - 1].stroke,
-                  backgroundColor: RATING_COLORS[rating - 1].fillTransparent
-                }}>
+                  backgroundColor: RATING_COLORS[rating - 1].fillTransparent,
+                }}
+              >
                 {formatMeasure(rating, 'RATING')}
               </span>
             </Checkbox>
diff --git a/server/sonar-web/src/main/js/components/charts/DonutChart.tsx b/server/sonar-web/src/main/js/components/charts/DonutChart.tsx
index cee0f656c9e..3fbd261f68c 100644
--- a/server/sonar-web/src/main/js/components/charts/DonutChart.tsx
+++ b/server/sonar-web/src/main/js/components/charts/DonutChart.tsx
@@ -45,7 +45,7 @@ export default function DonutChart(props: DonutChartProps) {
 
   const pie = d3Pie<any, DataPoint>()
     .sort(null)
-    .value(d => d.value);
+    .value((d) => d.value);
 
   if (padAngle !== undefined) {
     pie.padAngle(padAngle);
diff --git a/server/sonar-web/src/main/js/components/charts/Histogram.tsx b/server/sonar-web/src/main/js/components/charts/Histogram.tsx
index 22d634edcf6..f2dc6aa4641 100644
--- a/server/sonar-web/src/main/js/components/charts/Histogram.tsx
+++ b/server/sonar-web/src/main/js/components/charts/Histogram.tsx
@@ -92,7 +92,8 @@ export default class Histogram extends React.PureComponent<Props> {
         dx={alignTicks ? 0 : '-1em'}
         dy="0.3em"
         x={x}
-        y={y}>
+        y={y}
+      >
         {tick}
       </text>
     );
diff --git a/server/sonar-web/src/main/js/components/charts/LanguageDistribution.tsx b/server/sonar-web/src/main/js/components/charts/LanguageDistribution.tsx
index 18dc1af38c6..377562b85d8 100644
--- a/server/sonar-web/src/main/js/components/charts/LanguageDistribution.tsx
+++ b/server/sonar-web/src/main/js/components/charts/LanguageDistribution.tsx
@@ -34,19 +34,19 @@ interface LanguageDistributionProps {
 const NUMBER_FORMAT_THRESHOLD = 1000;
 
 export function LanguageDistribution(props: LanguageDistributionProps) {
-  let distribution = props.distribution.split(';').map(point => {
+  let distribution = props.distribution.split(';').map((point) => {
     const tokens = point.split('=');
     return { language: tokens[0], lines: parseInt(tokens[1], 10) };
   });
 
-  distribution = sortBy(distribution, d => -d.lines);
+  distribution = sortBy(distribution, (d) => -d.lines);
 
-  const data = distribution.map(d => d.lines);
-  const yTicks = distribution.map(d => getLanguageName(d.language)).map(cutLanguageName);
-  const yTooltips = distribution.map(d =>
+  const data = distribution.map((d) => d.lines);
+  const yTicks = distribution.map((d) => getLanguageName(d.language)).map(cutLanguageName);
+  const yTooltips = distribution.map((d) =>
     d.lines > NUMBER_FORMAT_THRESHOLD ? formatMeasure(d.lines, MetricType.Integer) : ''
   );
-  const yValues = distribution.map(d => formatMeasure(d.lines, MetricType.ShortInteger));
+  const yValues = distribution.map((d) => formatMeasure(d.lines, MetricType.ShortInteger));
 
   return (
     <Histogram
diff --git a/server/sonar-web/src/main/js/components/charts/LineChart.tsx b/server/sonar-web/src/main/js/components/charts/LineChart.tsx
index f08097ac18c..8354644e19c 100644
--- a/server/sonar-web/src/main/js/components/charts/LineChart.tsx
+++ b/server/sonar-web/src/main/js/components/charts/LineChart.tsx
@@ -52,16 +52,16 @@ export default class LineChart extends React.PureComponent<Props> {
     }
 
     const area = d3Area<DataPoint>()
-      .x(d => xScale(d.x))
+      .x((d) => xScale(d.x))
       .y0(yScale.range()[0])
-      .y1(d => yScale(d.y || 0))
-      .defined(d => d.y != null)
+      .y1((d) => yScale(d.y || 0))
+      .defined((d) => d.y != null)
       .curve(curveBasis);
 
     let { data } = this.props;
     if (this.props.backdropConstraints) {
       const c = this.props.backdropConstraints;
-      data = data.filter(d => c[0] <= d.x && d.x <= c[1]);
+      data = data.filter((d) => c[0] <= d.x && d.x <= c[1]);
     }
 
     return <path className="line-chart-backdrop" d={area(data) as string} />;
@@ -75,7 +75,7 @@ export default class LineChart extends React.PureComponent<Props> {
     }
 
     const points = this.props.data
-      .filter(point => point.y != null)
+      .filter((point) => point.y != null)
       .map((point, index) => {
         const x = xScale(point.x);
         const y = yScale(point.y || 0);
@@ -146,9 +146,9 @@ export default class LineChart extends React.PureComponent<Props> {
 
   renderLine(xScale: ScaleLinear<number, number>, yScale: ScaleLinear<number, number>) {
     const p = d3Line<DataPoint>()
-      .x(d => xScale(d.x))
-      .y(d => yScale(d.y || 0))
-      .defined(d => d.y != null)
+      .x((d) => xScale(d.x))
+      .y((d) => yScale(d.y || 0))
+      .defined((d) => d.y != null)
       .curve(curveBasis);
     return <path className="line-chart-path" d={p(this.props.data) as string} />;
   }
@@ -164,14 +164,14 @@ export default class LineChart extends React.PureComponent<Props> {
     const availableHeight = height - padding[0] - padding[2];
 
     const xScale = scaleLinear()
-      .domain(extent(this.props.data, d => d.x) as [number, number])
+      .domain(extent(this.props.data, (d) => d.x) as [number, number])
       .range([0, availableWidth]);
     const yScale = scaleLinear().range([availableHeight, 0]);
 
     if (this.props.domain) {
       yScale.domain(this.props.domain);
     } else {
-      const maxY = max(this.props.data, d => d.y) as number;
+      const maxY = max(this.props.data, (d) => d.y) as number;
       yScale.domain([0, maxY]);
     }
 
@@ -193,7 +193,7 @@ export default class LineChart extends React.PureComponent<Props> {
     return this.props.width !== undefined ? (
       this.renderChart(this.props.width)
     ) : (
-      <AutoSizer disableHeight={true}>{size => this.renderChart(size.width)}</AutoSizer>
+      <AutoSizer disableHeight={true}>{(size) => this.renderChart(size.width)}</AutoSizer>
     );
   }
 }
diff --git a/server/sonar-web/src/main/js/components/charts/TreeMap.tsx b/server/sonar-web/src/main/js/components/charts/TreeMap.tsx
index 9e55af3a974..68357581674 100644
--- a/server/sonar-web/src/main/js/components/charts/TreeMap.tsx
+++ b/server/sonar-web/src/main/js/components/charts/TreeMap.tsx
@@ -75,20 +75,18 @@ export default class TreeMap extends React.PureComponent<Props> {
   render() {
     const { items, height, width } = this.props;
     const hierarchy = d3Hierarchy({ children: items } as HierarchicalTreemapItem)
-      .sum(d => d.size)
+      .sum((d) => d.size)
       .sort((a, b) => (b.value || 0) - (a.value || 0));
 
-    const treemap = d3Treemap<TreeMapItem>()
-      .round(true)
-      .size([width, height]);
+    const treemap = d3Treemap<TreeMapItem>().round(true).size([width, height]);
 
     const nodes = treemap(hierarchy).leaves();
-    const prefix = this.mostCommitPrefix(items.map(item => item.label));
+    const prefix = this.mostCommitPrefix(items.map((item) => item.label));
     const halfWidth = width / 2;
     return (
       <div className="sonar-d3">
         <div className="treemap-container" style={{ width, height }}>
-          {nodes.map(node => (
+          {nodes.map((node) => (
             <TreeMapRect
               fill={node.data.color}
               gradient={node.data.gradient}
diff --git a/server/sonar-web/src/main/js/components/charts/TreeMapRect.tsx b/server/sonar-web/src/main/js/components/charts/TreeMapRect.tsx
index 40ac38666fa..1ef42c2e899 100644
--- a/server/sonar-web/src/main/js/components/charts/TreeMapRect.tsx
+++ b/server/sonar-web/src/main/js/components/charts/TreeMapRect.tsx
@@ -25,10 +25,7 @@ import Link from '../common/Link';
 import Tooltip, { Placement } from '../controls/Tooltip';
 import LinkIcon from '../icons/LinkIcon';
 
-const SIZE_SCALE = scaleLinear()
-  .domain([3, 15])
-  .range([11, 18])
-  .clamp(true);
+const SIZE_SCALE = scaleLinear().domain([3, 15]).range([11, 18]).clamp(true);
 
 interface Props {
   fill?: string;
@@ -88,7 +85,7 @@ export default class TreeMapRect extends React.PureComponent<Props> {
       backgroundSize: '12px 12px',
       fontSize: SIZE_SCALE(this.props.width / this.props.label.length),
       lineHeight: `${this.props.height}px`,
-      cursor: this.props.onClick != null ? 'pointer' : 'default'
+      cursor: this.props.onClick != null ? 'pointer' : 'default',
     };
     const isTextVisible =
       this.props.width >= TEXT_VISIBLE_AT_WIDTH && this.props.height >= TEXT_VISIBLE_AT_HEIGHT;
@@ -101,7 +98,8 @@ export default class TreeMapRect extends React.PureComponent<Props> {
         onClick={this.handleRectClick}
         role="treeitem"
         style={cellStyles}
-        tabIndex={0}>
+        tabIndex={0}
+      >
         {isTextVisible && (
           <div className="treemap-inner" style={{ maxWidth: this.props.width }}>
             {this.props.prefix || this.props.value ? (
diff --git a/server/sonar-web/src/main/js/components/charts/ZoomTimeLine.tsx b/server/sonar-web/src/main/js/components/charts/ZoomTimeLine.tsx
index 01e9951d87e..1a46ea54772 100644
--- a/server/sonar-web/src/main/js/components/charts/ZoomTimeLine.tsx
+++ b/server/sonar-web/src/main/js/components/charts/ZoomTimeLine.tsx
@@ -59,7 +59,7 @@ type YScale = any;
 export default class ZoomTimeLine extends React.PureComponent<Props, State> {
   static defaultProps = {
     padding: [0, 0, 18, 0],
-    showXTicks: true
+    showXTicks: true,
   };
 
   constructor(props: Props) {
@@ -69,15 +69,11 @@ export default class ZoomTimeLine extends React.PureComponent<Props, State> {
   }
 
   getRatingScale = (availableHeight: number) => {
-    return scalePoint<number>()
-      .domain([5, 4, 3, 2, 1])
-      .range([availableHeight, 0]);
+    return scalePoint<number>().domain([5, 4, 3, 2, 1]).range([availableHeight, 0]);
   };
 
   getLevelScale = (availableHeight: number) => {
-    return scalePoint()
-      .domain(['ERROR', 'WARN', 'OK'])
-      .range([availableHeight, 0]);
+    return scalePoint().domain(['ERROR', 'WARN', 'OK']).range([availableHeight, 0]);
   };
 
   getYScale = (availableHeight: number, flatData: Chart.Point[]): YScale => {
@@ -88,13 +84,13 @@ export default class ZoomTimeLine extends React.PureComponent<Props, State> {
     }
     return scaleLinear()
       .range([availableHeight, 0])
-      .domain([0, max(flatData, d => Number(d.y || 0)) as number])
+      .domain([0, max(flatData, (d) => Number(d.y || 0)) as number])
       .nice();
   };
 
   getXScale = (availableWidth: number, flatData: Chart.Point[]): XScale => {
     return scaleTime()
-      .domain(extent(flatData, d => d.x) as [Date, Date])
+      .domain(extent(flatData, (d) => d.x) as [Date, Date])
       .range([0, availableWidth])
       .clamp(true);
   };
@@ -102,10 +98,10 @@ export default class ZoomTimeLine extends React.PureComponent<Props, State> {
   getScales = () => {
     const availableWidth = this.props.width - this.props.padding[1] - this.props.padding[3];
     const availableHeight = this.props.height - this.props.padding[0] - this.props.padding[2];
-    const flatData = flatten(this.props.series.map(serie => serie.data));
+    const flatData = flatten(this.props.series.map((serie) => serie.data));
     return {
       xScale: this.getXScale(availableWidth, flatData),
-      yScale: this.getYScale(availableHeight, flatData)
+      yScale: this.getYScale(availableHeight, flatData),
     };
   };
 
@@ -118,34 +114,29 @@ export default class ZoomTimeLine extends React.PureComponent<Props, State> {
     this.handleZoomUpdate(xScale, xDim);
   };
 
-  handleSelectionDrag = (xScale: XScale, width: number, xDim: number[], checkDelta = false) => (
-    _: MouseEvent,
-    data: DraggableData
-  ) => {
-    if (!checkDelta || data.deltaX) {
-      const x = Math.max(xDim[0], Math.min(data.x, xDim[1] - width));
-      this.handleZoomUpdate(xScale, [x, width + x]);
-    }
-  };
+  handleSelectionDrag =
+    (xScale: XScale, width: number, xDim: number[], checkDelta = false) =>
+    (_: MouseEvent, data: DraggableData) => {
+      if (!checkDelta || data.deltaX) {
+        const x = Math.max(xDim[0], Math.min(data.x, xDim[1] - width));
+        this.handleZoomUpdate(xScale, [x, width + x]);
+      }
+    };
 
-  handleSelectionHandleDrag = (
-    xScale: XScale,
-    fixedX: number,
-    xDim: number[],
-    handleDirection: string,
-    checkDelta = false
-  ) => (_: MouseEvent, data: DraggableData) => {
-    if (!checkDelta || data.deltaX) {
-      const x = Math.max(xDim[0], Math.min(data.x, xDim[1]));
-      this.handleZoomUpdate(xScale, handleDirection === 'right' ? [fixedX, x] : [x, fixedX]);
-    }
-  };
+  handleSelectionHandleDrag =
+    (xScale: XScale, fixedX: number, xDim: number[], handleDirection: string, checkDelta = false) =>
+    (_: MouseEvent, data: DraggableData) => {
+      if (!checkDelta || data.deltaX) {
+        const x = Math.max(xDim[0], Math.min(data.x, xDim[1]));
+        this.handleZoomUpdate(xScale, handleDirection === 'right' ? [fixedX, x] : [x, fixedX]);
+      }
+    };
 
   handleNewZoomDragStart = (xDim: number[]) => (_: MouseEvent, data: DraggableData) => {
     const overlayLeftPos = data.node.getBoundingClientRect().left;
     this.setState({
       overlayLeftPos,
-      newZoomStart: Math.round(Math.max(xDim[0], Math.min(data.x - overlayLeftPos, xDim[1])))
+      newZoomStart: Math.round(Math.max(xDim[0], Math.min(data.x - overlayLeftPos, xDim[1]))),
     });
   };
 
@@ -159,17 +150,15 @@ export default class ZoomTimeLine extends React.PureComponent<Props, State> {
     }
   };
 
-  handleNewZoomDragEnd = (xScale: XScale, xDim: number[]) => (
-    _: MouseEvent,
-    data: DraggableData
-  ) => {
-    const { newZoomStart, overlayLeftPos } = this.state;
-    if (newZoomStart !== undefined && overlayLeftPos !== undefined) {
-      const x = Math.round(Math.max(xDim[0], Math.min(data.x - overlayLeftPos, xDim[1])));
-      this.handleZoomUpdate(xScale, newZoomStart === x ? xDim : sortBy([newZoomStart, x]));
-      this.setState({ newZoomStart: undefined, overlayLeftPos: undefined });
-    }
-  };
+  handleNewZoomDragEnd =
+    (xScale: XScale, xDim: number[]) => (_: MouseEvent, data: DraggableData) => {
+      const { newZoomStart, overlayLeftPos } = this.state;
+      if (newZoomStart !== undefined && overlayLeftPos !== undefined) {
+        const x = Math.round(Math.max(xDim[0], Math.min(data.x - overlayLeftPos, xDim[1])));
+        this.handleZoomUpdate(xScale, newZoomStart === x ? xDim : sortBy([newZoomStart, x]));
+        this.setState({ newZoomStart: undefined, overlayLeftPos: undefined });
+      }
+    };
 
   handleZoomUpdate = (xScale: XScale, xArray: number[]) => {
     const xRange = xScale.range();
@@ -235,9 +224,9 @@ export default class ZoomTimeLine extends React.PureComponent<Props, State> {
 
   renderLines = (xScale: XScale, yScale: YScale) => {
     const lineGenerator = d3Line<Chart.Point>()
-      .defined(d => Boolean(d.y || d.y === 0))
-      .x(d => xScale(d.x))
-      .y(d => yScale(d.y));
+      .defined((d) => Boolean(d.y || d.y === 0))
+      .x((d) => xScale(d.x))
+      .y((d) => yScale(d.y));
     if (this.props.basisCurve) {
       lineGenerator.curve(curveBasis);
     }
@@ -256,9 +245,9 @@ export default class ZoomTimeLine extends React.PureComponent<Props, State> {
 
   renderAreas = (xScale: XScale, yScale: YScale) => {
     const areaGenerator = area<Chart.Point>()
-      .defined(d => Boolean(d.y || d.y === 0))
-      .x(d => xScale(d.x))
-      .y1(d => yScale(d.y))
+      .defined((d) => Boolean(d.y || d.y === 0))
+      .x((d) => xScale(d.x))
+      .y1((d) => yScale(d.y))
       .y0(yScale(0));
     if (this.props.basisCurve) {
       areaGenerator.curve(curveBasis);
@@ -300,7 +289,8 @@ export default class ZoomTimeLine extends React.PureComponent<Props, State> {
         options.xDim,
         options.direction
       )}
-      position={{ x: options.xPos, y: 0 }}>
+      position={{ x: options.xPos, y: 0 }}
+    >
       <rect
         className="zoom-selection-handle"
         height={options.yDim[0] - options.yDim[1] + 1}
@@ -330,7 +320,8 @@ export default class ZoomTimeLine extends React.PureComponent<Props, State> {
         <DraggableCore
           onDrag={this.handleNewZoomDrag(xScale, xDim)}
           onStart={this.handleNewZoomDragStart(xDim)}
-          onStop={this.handleNewZoomDragEnd(xScale, xDim)}>
+          onStop={this.handleNewZoomDragEnd(xScale, xDim)}
+        >
           <rect
             className="zoom-overlay"
             height={yDim[0] - yDim[1]}
@@ -345,7 +336,8 @@ export default class ZoomTimeLine extends React.PureComponent<Props, State> {
             bounds={{ left: xDim[0], right: Math.floor(xDim[1] - zoomBoxWidth) } as DraggableBounds}
             onDrag={this.handleSelectionDrag(xScale, zoomBoxWidth, xDim, true)}
             onStop={this.handleSelectionDrag(xScale, zoomBoxWidth, xDim)}
-            position={{ x: xArray[0], y: 0 }}>
+            position={{ x: xArray[0], y: 0 }}
+          >
             <rect
               className="zoom-selection"
               height={yDim[0] - yDim[1] + 1}
@@ -363,7 +355,7 @@ export default class ZoomTimeLine extends React.PureComponent<Props, State> {
             fixedPos: endX,
             xDim,
             yDim,
-            direction: 'left'
+            direction: 'left',
           })}
         {showZoomArea &&
           this.renderZoomHandle({
@@ -372,7 +364,7 @@ export default class ZoomTimeLine extends React.PureComponent<Props, State> {
             fixedPos: startX,
             xDim,
             yDim,
-            direction: 'right'
+            direction: 'right',
           })}
       </g>
     );
diff --git a/server/sonar-web/src/main/js/components/charts/__tests__/AdvancedTimeline-test.tsx b/server/sonar-web/src/main/js/components/charts/__tests__/AdvancedTimeline-test.tsx
index d9f5beea736..91b9cb80fe1 100644
--- a/server/sonar-web/src/main/js/components/charts/__tests__/AdvancedTimeline-test.tsx
+++ b/server/sonar-web/src/main/js/components/charts/__tests__/AdvancedTimeline-test.tsx
@@ -30,7 +30,7 @@ jest.mock('d3-scale', () => {
 
   return {
     ...others,
-    scaleTime: scaleUtc
+    scaleTime: scaleUtc,
   };
 });
 
@@ -44,7 +44,7 @@ it('should render correctly', () => {
   expect(shallowRender({ disableZoom: false, updateZoom: () => {} })).toMatchSnapshot(
     'Zoom enabled'
   );
-  expect(shallowRender({ formatYTick: t => `Nicer tick ${t}` })).toMatchSnapshot('format y tick');
+  expect(shallowRender({ formatYTick: (t) => `Nicer tick ${t}` })).toMatchSnapshot('format y tick');
   expect(shallowRender({ width: undefined })).toMatchSnapshot('no width');
   expect(shallowRender({ height: undefined })).toMatchSnapshot('no height');
   expect(shallowRender({ showAreas: undefined })).toMatchSnapshot('no areas');
@@ -61,7 +61,7 @@ it('should render leak correctly', () => {
 it('should render leak legend correctly', () => {
   const wrapper = shallowRender({
     displayNewCodeLegend: true,
-    leakPeriodDate: new Date('2019-10-02')
+    leakPeriodDate: new Date('2019-10-02'),
   });
 
   const leakNode = wrapper;
@@ -81,8 +81,8 @@ it('should render leak legend correctly for small leak', () => {
       mockData(4, '2020-02-04'),
       mockData(5, '2020-02-05'),
       mockData(6, '2020-02-06'),
-      mockData(7, '2020-02-07')
-    ]
+      mockData(7, '2020-02-07'),
+    ],
   });
 
   const leakNode = wrapper;
@@ -94,7 +94,7 @@ it('should set leakLegendTextWidth correctly', () => {
   const wrapper = shallowRender();
 
   wrapper.instance().setLeakLegendTextWidth({
-    getBoundingClientRect: () => ({ width: 12 } as DOMRect)
+    getBoundingClientRect: () => ({ width: 12 } as DOMRect),
   } as SVGTextElement);
 
   expect(wrapper.state().leakLegendTextWidth).toBe(12);
@@ -155,14 +155,14 @@ it('should handle scroll correcly', () => {
   let updateZoom = jest.fn();
   let preventDefault = jest.fn();
   let wrapper = shallowRender({ updateZoom });
-  wrapper.instance().handleWheel(({
+  wrapper.instance().handleWheel({
     preventDefault,
     deltaX: 1,
     deltaY: -2,
     deltaZ: 0,
     pageX: 100,
     pageY: 1,
-    currentTarget: ({
+    currentTarget: {
       getBoundingClientRect: () => ({
         bottom: 0,
         height: 100,
@@ -172,17 +172,17 @@ it('should handle scroll correcly', () => {
         top: 10,
         x: 12,
         y: 23,
-        toJSON: () => ''
-      })
-    } as any) as SVGElement
-  } as any) as React.WheelEvent<SVGElement>);
+        toJSON: () => '',
+      }),
+    } as any as SVGElement,
+  } as any as React.WheelEvent<SVGElement>);
   expect(preventDefault).toHaveBeenCalled();
   expect(updateZoom).toHaveBeenCalledWith(new Date('2019-10-01T06:24:00.000Z'), undefined);
 
   updateZoom = jest.fn();
   preventDefault = jest.fn();
   wrapper = shallowRender({ updateZoom });
-  wrapper.instance().handleWheel(({
+  wrapper.instance().handleWheel({
     preventDefault,
     deltaX: 1,
     deltaY: 2,
@@ -190,7 +190,7 @@ it('should handle scroll correcly', () => {
     pageX: 100,
     pageY: 1,
     deltaMode: 25,
-    currentTarget: ({
+    currentTarget: {
       getBoundingClientRect: () => ({
         bottom: 0,
         height: 100,
@@ -200,10 +200,10 @@ it('should handle scroll correcly', () => {
         top: 10,
         x: 12,
         y: 23,
-        toJSON: () => ''
-      })
-    } as any) as SVGElement
-  } as any) as React.WheelEvent<SVGElement>);
+        toJSON: () => '',
+      }),
+    } as any as SVGElement,
+  } as any as React.WheelEvent<SVGElement>);
   expect(preventDefault).toHaveBeenCalled();
   expect(updateZoom).toHaveBeenCalledWith(undefined, new Date('2019-10-02T20:48:00.000Z'));
 });
@@ -215,7 +215,7 @@ it('should handle mouse out correcly', () => {
     mouseOver: true,
     selectedDate: new Date(),
     selectedDateXPos: 1,
-    selectedDateIdx: 1
+    selectedDateIdx: 1,
   });
   wrapper.instance().handleMouseOut();
   expect(wrapper.state().mouseOver).toBe(true);
@@ -257,13 +257,13 @@ function shallowRender(props?: Partial<AdvancedTimeline['props']>) {
           data: [
             {
               x: new Date('2019-10-01'),
-              y: 1
+              y: 1,
             },
             {
               x: new Date('2019-10-02'),
-              y: 2
-            }
-          ]
+              y: 2,
+            },
+          ],
         },
         {
           name: 'test-2',
@@ -272,10 +272,10 @@ function shallowRender(props?: Partial<AdvancedTimeline['props']>) {
           data: [
             {
               x: new Date('2019-10-03'),
-              y: 3
-            }
-          ]
-        }
+              y: 3,
+            },
+          ],
+        },
       ]}
       width={100}
       zoomSpeed={1}
@@ -289,6 +289,6 @@ function mockData(i: number, date: string): Chart.Serie {
     name: `t${i}`,
     type: 'type',
     translatedName: '',
-    data: [{ x: new Date(date), y: i }]
+    data: [{ x: new Date(date), y: i }],
   };
 }
diff --git a/server/sonar-web/src/main/js/components/charts/__tests__/BarChart-test.tsx b/server/sonar-web/src/main/js/components/charts/__tests__/BarChart-test.tsx
index 040c7fcd861..371c37ee5d2 100644
--- a/server/sonar-web/src/main/js/components/charts/__tests__/BarChart-test.tsx
+++ b/server/sonar-web/src/main/js/components/charts/__tests__/BarChart-test.tsx
@@ -25,7 +25,7 @@ it('should display bars', () => {
   const data = [
     { x: 1, y: 10, description: '' },
     { x: 2, y: 30, description: '' },
-    { x: 3, y: 20, description: '' }
+    { x: 3, y: 20, description: '' },
   ];
   const chart = shallow(<BarChart barsWidth={20} data={data} height={100} width={100} />);
   expect(chart.find('.bar-chart-bar').length).toBe(3);
@@ -35,7 +35,7 @@ it('should display ticks', () => {
   const data = [
     { x: 1, y: 10, description: '' },
     { x: 2, y: 30, description: '' },
-    { x: 3, y: 20, description: '' }
+    { x: 3, y: 20, description: '' },
   ];
   const ticks = ['A', 'B', 'C'];
   const chart = shallow(
@@ -48,7 +48,7 @@ it('should display values', () => {
   const data = [
     { x: 1, y: 10, description: '' },
     { x: 2, y: 30, description: '' },
-    { x: 3, y: 20, description: '' }
+    { x: 3, y: 20, description: '' },
   ];
   const values = ['A', 'B', 'C'];
   const chart = shallow(
@@ -61,7 +61,7 @@ it('should display bars, ticks and values', () => {
   const data = [
     { x: 1, y: 10, description: '' },
     { x: 2, y: 30, description: '' },
-    { x: 3, y: 20, description: '' }
+    { x: 3, y: 20, description: '' },
   ];
   const ticks = ['A', 'B', 'C'];
   const values = ['A', 'B', 'C'];
diff --git a/server/sonar-web/src/main/js/components/charts/__tests__/BubbleChart-test.tsx b/server/sonar-web/src/main/js/components/charts/__tests__/BubbleChart-test.tsx
index 91bf26bb3ac..69d1fe49fe9 100644
--- a/server/sonar-web/src/main/js/components/charts/__tests__/BubbleChart-test.tsx
+++ b/server/sonar-web/src/main/js/components/charts/__tests__/BubbleChart-test.tsx
@@ -30,17 +30,17 @@ import { ComponentMeasureEnhanced } from '../../../types/types';
 import BubbleChart from '../BubbleChart';
 
 jest.mock('react-virtualized/dist/commonjs/AutoSizer', () => ({
-  AutoSizer: ({ children }: AutoSizerProps) => children({ width: 100, height: NaN })
+  AutoSizer: ({ children }: AutoSizerProps) => children({ width: 100, height: NaN }),
 }));
 
 jest.mock('d3-selection', () => ({
-  select: jest.fn().mockReturnValue({ call: jest.fn() })
+  select: jest.fn().mockReturnValue({ call: jest.fn() }),
 }));
 
 jest.mock('d3-zoom', () => {
   return {
     zoomidentity: { k: 1, tx: 0, ty: 0 },
-    zoom: jest.fn()
+    zoom: jest.fn(),
   };
 });
 
@@ -52,7 +52,7 @@ it('should display bubbles', () => {
     .find(AutoSizer)
     .dive()
     .find('Bubble')
-    .forEach(bubble => {
+    .forEach((bubble) => {
       expect(bubble.dive()).toMatchSnapshot();
     });
 });
@@ -61,14 +61,14 @@ it('should render bubble links', () => {
   const wrapper = shallowRender({
     items: [
       { x: 1, y: 10, size: 7, color: { fill: 'blue', stroke: 'blue' } },
-      { x: 2, y: 30, size: 5, color: { fill: 'green', stroke: 'green' } }
-    ]
+      { x: 2, y: 30, size: 5, color: { fill: 'green', stroke: 'green' } },
+    ],
   });
   wrapper
     .find(AutoSizer)
     .dive()
     .find('Bubble')
-    .forEach(bubble => {
+    .forEach((bubble) => {
       expect(bubble.dive()).toMatchSnapshot();
     });
 });
@@ -80,7 +80,7 @@ it('should render bubbles with click handlers', () => {
     .find(AutoSizer)
     .dive()
     .find('Bubble')
-    .forEach(bubble => {
+    .forEach((bubble) => {
       click(bubble.dive().find('a'));
       expect(bubble.dive()).toMatchSnapshot();
     });
@@ -104,7 +104,7 @@ it('should correctly handle zooming', () => {
     const wrapper = shallowRender({ padding: [5, 5, 5, 5] });
     wrapper.instance().boundNode(
       mockHtmlElement<SVGSVGElement>({
-        getBoundingClientRect: () => ({ width: 100, height: 100 } as DOMRect)
+        getBoundingClientRect: () => ({ width: 100, height: 100 } as DOMRect),
       })
     );
 
@@ -117,14 +117,11 @@ it('should correctly handle zooming', () => {
     expect(wrapper.state().transform).toEqual({
       x: 105,
       y: 105,
-      k: 20
+      k: 20,
     });
 
     // Reset Zoom levels.
-    const resetZoomClick = wrapper
-      .find('div.bubble-chart-zoom')
-      .find(Link)
-      .props().onClick;
+    const resetZoomClick = wrapper.find('div.bubble-chart-zoom').find(Link).props().onClick;
     if (!resetZoomClick) {
       reject();
       return;
@@ -151,15 +148,15 @@ function shallowRender(props: Partial<BubbleChart<ComponentMeasureEnhanced>['pro
           y: 10,
           size: 7,
           data: mockComponentMeasureEnhanced(),
-          color: { fill: 'blue', stroke: 'blue' }
+          color: { fill: 'blue', stroke: 'blue' },
         },
         {
           x: 2,
           y: 30,
           size: 5,
           data: mockComponentMeasureEnhanced(),
-          color: { fill: 'red', stroke: 'red' }
-        }
+          color: { fill: 'red', stroke: 'red' },
+        },
       ]}
       padding={[0, 0, 0, 0]}
       {...props}
diff --git a/server/sonar-web/src/main/js/components/charts/__tests__/ColorGradientLegend-test.tsx b/server/sonar-web/src/main/js/components/charts/__tests__/ColorGradientLegend-test.tsx
index d9ba675f809..641fe076d2b 100644
--- a/server/sonar-web/src/main/js/components/charts/__tests__/ColorGradientLegend-test.tsx
+++ b/server/sonar-web/src/main/js/components/charts/__tests__/ColorGradientLegend-test.tsx
@@ -26,9 +26,7 @@ import ColorGradientLegend from '../ColorGradientLegend';
 const COLORS = [colors.green, colors.lightGreen, colors.yellow, colors.orange, colors.red];
 
 it('should render properly', () => {
-  const colorScale = scaleLinear<string, string>()
-    .domain([0, 25, 50, 75, 100])
-    .range(COLORS);
+  const colorScale = scaleLinear<string, string>().domain([0, 25, 50, 75, 100]).range(COLORS);
   const wrapper = shallow(
     <ColorGradientLegend
       className="measure-details-treemap-legend"
diff --git a/server/sonar-web/src/main/js/components/charts/__tests__/DonutChart-test.tsx b/server/sonar-web/src/main/js/components/charts/__tests__/DonutChart-test.tsx
index 409f712b3e5..d5825eb111b 100644
--- a/server/sonar-web/src/main/js/components/charts/__tests__/DonutChart-test.tsx
+++ b/server/sonar-web/src/main/js/components/charts/__tests__/DonutChart-test.tsx
@@ -24,12 +24,7 @@ import DonutChart, { DonutChartProps } from '../DonutChart';
 it('should render correctly', () => {
   const wrapper = shallowRender();
   expect(wrapper).toMatchSnapshot();
-  expect(
-    wrapper
-      .find('Sector')
-      .first()
-      .dive()
-  ).toMatchSnapshot();
+  expect(wrapper.find('Sector').first().dive()).toMatchSnapshot();
 });
 
 it('should render correctly with padding and pad angle too', () => {
@@ -41,7 +36,7 @@ function shallowRender(props: Partial<DonutChartProps> = {}) {
     <DonutChart
       data={[
         { fill: '#000000', value: 25 },
-        { fill: '#ffffff', value: 75 }
+        { fill: '#ffffff', value: 75 },
       ]}
       height={20}
       thickness={2}
diff --git a/server/sonar-web/src/main/js/components/charts/__tests__/Histogram-test.tsx b/server/sonar-web/src/main/js/components/charts/__tests__/Histogram-test.tsx
index c6d81236294..ddd218eb7d6 100644
--- a/server/sonar-web/src/main/js/components/charts/__tests__/Histogram-test.tsx
+++ b/server/sonar-web/src/main/js/components/charts/__tests__/Histogram-test.tsx
@@ -26,7 +26,7 @@ jest.mock('d3-scale', () => {
   const d3 = jest.requireActual('d3-scale');
   return {
     ...d3,
-    scaleBand: jest.fn(d3.scaleBand)
+    scaleBand: jest.fn(d3.scaleBand),
   };
 });
 
@@ -43,7 +43,7 @@ it('renders correctly', () => {
     shallowRender({
       yTicks: ['a', 'b', 'c'],
       yTooltips: ['a - 100', 'b - 75', 'c - 150'],
-      yValues: ['100.0', '75.0', '150.0']
+      yValues: ['100.0', '75.0', '150.0'],
     })
   ).toMatchSnapshot('with yValues, yTicks and yTooltips');
 });
@@ -53,7 +53,7 @@ it('correctly handles yScale() returning undefined', () => {
   yScale.bandwidth = () => 1;
 
   (scaleBand as jest.Mock).mockReturnValueOnce({
-    domain: () => ({ rangeRound: () => yScale })
+    domain: () => ({ rangeRound: () => yScale }),
   });
 
   expect(
diff --git a/server/sonar-web/src/main/js/components/charts/__tests__/LineChart-test.tsx b/server/sonar-web/src/main/js/components/charts/__tests__/LineChart-test.tsx
index a74ed22ebd5..fcafda1fed5 100644
--- a/server/sonar-web/src/main/js/components/charts/__tests__/LineChart-test.tsx
+++ b/server/sonar-web/src/main/js/components/charts/__tests__/LineChart-test.tsx
@@ -25,7 +25,7 @@ it('should display line', () => {
   const data = [
     { x: 1, y: 10 },
     { x: 2, y: 30 },
-    { x: 3, y: 20 }
+    { x: 3, y: 20 },
   ];
   const chart = shallow(<LineChart data={data} height={100} width={100} />);
   expect(chart.find('.line-chart-path').length).toBe(1);
@@ -35,7 +35,7 @@ it('should display ticks', () => {
   const data = [
     { x: 1, y: 10 },
     { x: 2, y: 30 },
-    { x: 3, y: 20 }
+    { x: 3, y: 20 },
   ];
   const ticks = ['A', 'B', 'C'];
   const chart = shallow(<LineChart data={data} height={100} width={100} xTicks={ticks} />);
@@ -46,7 +46,7 @@ it('should display values', () => {
   const data = [
     { x: 1, y: 10 },
     { x: 2, y: 30 },
-    { x: 3, y: 20 }
+    { x: 3, y: 20 },
   ];
   const values = ['A', 'B', 'C'];
   const chart = shallow(<LineChart data={data} height={100} width={100} xValues={values} />);
diff --git a/server/sonar-web/src/main/js/components/charts/__tests__/TreeMap-test.tsx b/server/sonar-web/src/main/js/components/charts/__tests__/TreeMap-test.tsx
index aa071a54e7f..3526e0c4178 100644
--- a/server/sonar-web/src/main/js/components/charts/__tests__/TreeMap-test.tsx
+++ b/server/sonar-web/src/main/js/components/charts/__tests__/TreeMap-test.tsx
@@ -30,14 +30,14 @@ it('should render correctly', () => {
       size: 10,
       color: '#777',
       label: 'SonarQube :: Server',
-      component: mockComponentMeasureEnhanced()
+      component: mockComponentMeasureEnhanced(),
     },
     {
       key: '2',
       size: 30,
       color: '#777',
       label: 'SonarQube :: Web',
-      component: mockComponentMeasureEnhanced()
+      component: mockComponentMeasureEnhanced(),
     },
     {
       key: '3',
@@ -45,8 +45,8 @@ it('should render correctly', () => {
       gradient: '#777',
       label: 'SonarQube :: Search',
       metric: { key: 'coverage', type: 'PERCENT' },
-      component: mockComponentMeasureEnhanced()
-    }
+      component: mockComponentMeasureEnhanced(),
+    },
   ];
   const onRectClick = jest.fn();
   const chart = mount(
@@ -56,7 +56,7 @@ it('should render correctly', () => {
   expect(rects).toHaveLength(3);
 
   const event: React.MouseEvent<HTMLAnchorElement> = {
-    stopPropagation: jest.fn()
+    stopPropagation: jest.fn(),
   } as any;
 
   (rects.first().instance() as TreeMapRect).handleLinkClick(event);
diff --git a/server/sonar-web/src/main/js/components/charts/__tests__/ZoomTimeLine-test.tsx b/server/sonar-web/src/main/js/components/charts/__tests__/ZoomTimeLine-test.tsx
index 458c565546f..4ed8034f17f 100644
--- a/server/sonar-web/src/main/js/components/charts/__tests__/ZoomTimeLine-test.tsx
+++ b/server/sonar-web/src/main/js/components/charts/__tests__/ZoomTimeLine-test.tsx
@@ -28,17 +28,17 @@ const series = [
     data: [
       {
         x: new Date('2020-01-01'),
-        y: 'beginning'
+        y: 'beginning',
       },
       {
         x: new Date('2020-02-01'),
-        y: 'end'
-      }
+        y: 'end',
+      },
     ],
     name: 'foo',
     translatedName: 'foo-translated',
-    type: 'bar'
-  }
+    type: 'bar',
+  },
 ];
 
 it('should render correctly', () => {
@@ -55,11 +55,7 @@ it('should draw a graph with lines', () => {
 });
 
 it('should be zoomable', () => {
-  expect(
-    shallowRender()
-      .find('.chart-zoom')
-      .exists()
-  ).toBe(true);
+  expect(shallowRender().find('.chart-zoom').exists()).toBe(true);
 });
 
 it('should render a leak period', () => {
@@ -71,11 +67,7 @@ it('should render a leak period', () => {
 });
 
 it('should render areas under the graph lines', () => {
-  expect(
-    shallowRender({ showAreas: true })
-      .find('.line-chart-area')
-      .exists()
-  ).toBe(true);
+  expect(shallowRender({ showAreas: true }).find('.line-chart-area').exists()).toBe(true);
 });
 
 it('should handle zoom update correctly', () => {
@@ -83,12 +75,9 @@ it('should handle zoom update correctly', () => {
   const startDate = new Date('1970-01-01T00:00:00.001Z');
   const endDate = new Date('2000-01-01T00:00:00.001Z');
   let wrapper = shallowRender({ updateZoom, startDate, endDate });
-  wrapper.instance().handleZoomUpdate(
-    scaleTime()
-      .domain([startDate, endDate])
-      .range([0, 150]),
-    [3, 50]
-  );
+  wrapper
+    .instance()
+    .handleZoomUpdate(scaleTime().domain([startDate, endDate]).range([0, 150]), [3, 50]);
   expect(updateZoom).toHaveBeenCalledWith(
     new Date('1970-08-08T03:21:36.001Z'),
     new Date('1980-01-01T08:00:00.001Z')
@@ -98,12 +87,9 @@ it('should handle zoom update correctly', () => {
 
   // We throttle the handleZoomUpdate so re-render to avoid issue
   wrapper = shallowRender({ updateZoom, startDate, endDate });
-  wrapper.instance().handleZoomUpdate(
-    scaleTime()
-      .domain([startDate, endDate])
-      .range([0, 150]),
-    [-1, 151]
-  );
+  wrapper
+    .instance()
+    .handleZoomUpdate(scaleTime().domain([startDate, endDate]).range([0, 150]), [-1, 151]);
   expect(updateZoom).toHaveBeenCalledWith(undefined, undefined);
 });
 
diff --git a/server/sonar-web/src/main/js/components/common/ActivityLink.tsx b/server/sonar-web/src/main/js/components/common/ActivityLink.tsx
index 4bccbb4f0e3..fb4be5f134a 100644
--- a/server/sonar-web/src/main/js/components/common/ActivityLink.tsx
+++ b/server/sonar-web/src/main/js/components/common/ActivityLink.tsx
@@ -44,7 +44,8 @@ export default function ActivityLink(props: ActivityLinkProps) {
         metric !== undefined && graph !== undefined && isCustomGraph(graph)
           ? getMeasureHistoryUrl(component, metric, branchLike)
           : getActivityUrl(component, branchLike, graph)
-      }>
+      }
+    >
       <HistoryIcon className="little-spacer-right" size={14} />
       <span>{label || translate('portfolio.activity_link')}</span>
     </Link>
diff --git a/server/sonar-web/src/main/js/components/common/AnalysisWarningsModal.tsx b/server/sonar-web/src/main/js/components/common/AnalysisWarningsModal.tsx
index c0fd6951d4d..6530c793130 100644
--- a/server/sonar-web/src/main/js/components/common/AnalysisWarningsModal.tsx
+++ b/server/sonar-web/src/main/js/components/common/AnalysisWarningsModal.tsx
@@ -51,7 +51,7 @@ export class AnalysisWarningsModal extends React.PureComponent<Props, State> {
     super(props);
     this.state = {
       loading: !props.warnings,
-      warnings: props.warnings || []
+      warnings: props.warnings || [],
     };
   }
 
@@ -107,7 +107,7 @@ export class AnalysisWarningsModal extends React.PureComponent<Props, State> {
       if (this.mounted) {
         this.setState({
           loading: false,
-          warnings: warnings.map(w => ({ key: w, message: w, dismissable: false }))
+          warnings: warnings.map((w) => ({ key: w, message: w, dismissable: false })),
         });
       }
     } catch (e) {
@@ -138,7 +138,7 @@ export class AnalysisWarningsModal extends React.PureComponent<Props, State> {
                   <span
                     // eslint-disable-next-line react/no-danger
                     dangerouslySetInnerHTML={{
-                      __html: sanitizeStringRestricted(message.trim().replace(/\n/g, '<br />'))
+                      __html: sanitizeStringRestricted(message.trim().replace(/\n/g, '<br />')),
                     }}
                   />
 
@@ -148,7 +148,8 @@ export class AnalysisWarningsModal extends React.PureComponent<Props, State> {
                         disabled={Boolean(dismissedWarning)}
                         onClick={() => {
                           this.handleDismissMessage(key);
-                        }}>
+                        }}
+                      >
                         {translate('dismiss_permanently')}
                       </ButtonLink>
                       {dismissedWarning === key && <i className="spinner spacer-left" />}
diff --git a/server/sonar-web/src/main/js/components/common/CodeSnippet.tsx b/server/sonar-web/src/main/js/components/common/CodeSnippet.tsx
index b8f284562fc..84482e431e6 100644
--- a/server/sonar-web/src/main/js/components/common/CodeSnippet.tsx
+++ b/server/sonar-web/src/main/js/components/common/CodeSnippet.tsx
@@ -35,7 +35,7 @@ export default function CodeSnippet(props: CodeSnippetProps) {
 
   let finalSnippet: string;
   if (Array.isArray(snippet)) {
-    finalSnippet = snippet.filter(line => isDefined(line)).join(isOneLine ? ' ' : ' \\\n  ');
+    finalSnippet = snippet.filter((line) => isDefined(line)).join(isOneLine ? ' ' : ' \\\n  ');
   } else {
     finalSnippet = snippet;
   }
diff --git a/server/sonar-web/src/main/js/components/common/DocLink.tsx b/server/sonar-web/src/main/js/components/common/DocLink.tsx
index 53d9c8c4e78..1ffefce9869 100644
--- a/server/sonar-web/src/main/js/components/common/DocLink.tsx
+++ b/server/sonar-web/src/main/js/components/common/DocLink.tsx
@@ -19,7 +19,7 @@
  */
 import * as React from 'react';
 import withAppStateContext, {
-  WithAppStateContextProps
+  WithAppStateContextProps,
 } from '../../app/components/app-state/withAppStateContext';
 import { getUrlForDoc } from '../../helpers/docs';
 import Link, { LinkProps } from './Link';
diff --git a/server/sonar-web/src/main/js/components/common/DocumentationTooltip.tsx b/server/sonar-web/src/main/js/components/common/DocumentationTooltip.tsx
index c44ca0efd50..da2640af845 100644
--- a/server/sonar-web/src/main/js/components/common/DocumentationTooltip.tsx
+++ b/server/sonar-web/src/main/js/components/common/DocumentationTooltip.tsx
@@ -58,7 +58,8 @@ export default function DocumentationTooltip(props: DocumentationTooltipProps) {
                   // To prevent the screen reader from reading out the links for no reason (as
                   // they won't be "clickable"), we hide the whole links section.
                   // See https://sarahmhigley.com/writing/tooltips-in-wcag-21/
-                  aria-hidden={true}>
+                  aria-hidden={true}
+                >
                   {doc ? (
                     <DocLink to={href}>{label}</DocLink>
                   ) : (
@@ -71,7 +72,8 @@ export default function DocumentationTooltip(props: DocumentationTooltipProps) {
             </>
           )}
         </div>
-      }>
+      }
+    >
       {props.children}
     </HelpTooltip>
   );
diff --git a/server/sonar-web/src/main/js/components/common/Link.tsx b/server/sonar-web/src/main/js/components/common/Link.tsx
index 527673c6ffd..4ca7e2ec89a 100644
--- a/server/sonar-web/src/main/js/components/common/Link.tsx
+++ b/server/sonar-web/src/main/js/components/common/Link.tsx
@@ -41,7 +41,8 @@ function Link({ children, size, ...props }: LinkProps, ref: React.ForwardedRef<H
         ref={ref}
         href={to}
         rel={anchorProps.target === '_blank' ? 'noopener noreferrer' : undefined}
-        {...anchorProps}>
+        {...anchorProps}
+      >
         {anchorProps.target === '_blank' && (
           <DetachIcon
             ariaLabel={translate('opens_in_new_window')}
@@ -58,7 +59,8 @@ function Link({ children, size, ...props }: LinkProps, ref: React.ForwardedRef<H
     <ReactRouterDomLink
       ref={ref}
       rel={props.target === '_blank' ? 'noopener noreferrer' : undefined}
-      {...props}>
+      {...props}
+    >
       {children}
     </ReactRouterDomLink>
   );
diff --git a/server/sonar-web/src/main/js/components/common/LocationIndex.tsx b/server/sonar-web/src/main/js/components/common/LocationIndex.tsx
index 349ec46e648..455c93fe1c8 100644
--- a/server/sonar-web/src/main/js/components/common/LocationIndex.tsx
+++ b/server/sonar-web/src/main/js/components/common/LocationIndex.tsx
@@ -37,10 +37,11 @@ export default function LocationIndex(props: Props) {
     <div
       className={classNames('location-index', {
         'is-leading': leading,
-        selected
+        selected,
       })}
       {...clickAttributes}
-      {...other}>
+      {...other}
+    >
       {children}
     </div>
   );
diff --git a/server/sonar-web/src/main/js/components/common/MeasuresLink.tsx b/server/sonar-web/src/main/js/components/common/MeasuresLink.tsx
index b2a1f71b1c7..5431f141bfd 100644
--- a/server/sonar-web/src/main/js/components/common/MeasuresLink.tsx
+++ b/server/sonar-web/src/main/js/components/common/MeasuresLink.tsx
@@ -39,7 +39,8 @@ export default function MeasuresLink(props: MeasuresLinkProps) {
   return (
     <Link
       className={classNames('measures-link', className)}
-      to={getComponentDrilldownUrl({ branchLike, componentKey: component, metric })}>
+      to={getComponentDrilldownUrl({ branchLike, componentKey: component, metric })}
+    >
       <MeasuresIcon className="little-spacer-right" size={14} />
       <span>{label || translate('portfolio.measures_link')}</span>
     </Link>
diff --git a/server/sonar-web/src/main/js/components/common/MultiSelect.tsx b/server/sonar-web/src/main/js/components/common/MultiSelect.tsx
index efffa6b4851..44501320199 100644
--- a/server/sonar-web/src/main/js/components/common/MultiSelect.tsx
+++ b/server/sonar-web/src/main/js/components/common/MultiSelect.tsx
@@ -62,10 +62,10 @@ export default class MultiSelect extends React.PureComponent<PropsWithDefault, S
 
   static defaultProps: DefaultProps = {
     filterSelected: (query: string, selectedElements: string[]) =>
-      selectedElements.filter(elem => elem.includes(query)),
+      selectedElements.filter((elem) => elem.includes(query)),
     listSize: 0,
     renderLabel: (element: string) => element,
-    validateSearchInput: (value: string) => value
+    validateSearchInput: (value: string) => value,
   };
 
   constructor(props: PropsWithDefault) {
@@ -73,7 +73,7 @@ export default class MultiSelect extends React.PureComponent<PropsWithDefault, S
     this.state = {
       loading: false,
       query: '',
-      elements: []
+      elements: [],
     };
   }
 
@@ -113,11 +113,11 @@ export default class MultiSelect extends React.PureComponent<PropsWithDefault, S
       const newStateElement: Element[] = [
         ...this.props
           .filterSelected(query, this.props.selectedElements)
-          .map(e => ({ value: e, selected: true })),
-        ...this.props.elements.map(e => ({
+          .map((e) => ({ value: e, selected: true })),
+        ...this.props.elements.map((e) => ({
           value: e,
-          selected: false
-        }))
+          selected: false,
+        })),
       ];
 
       this.appendCreateElelement(newStateElement, query, props);
@@ -128,20 +128,22 @@ export default class MultiSelect extends React.PureComponent<PropsWithDefault, S
   appendCreateElelement(elements: Element[], query: string, props: PropsWithDefault) {
     const { allowNewElements = true } = props;
     if (this.isNewElement(query, props) && allowNewElements) {
-      const create = elements.find(e => e.custom);
+      const create = elements.find((e) => e.custom);
       if (create) {
         create.value = query;
       } else {
         elements.push({ value: query, selected: false, custom: true });
       }
     } else if (!this.isNewElement(query, props) && allowNewElements) {
-      remove(elements, e => e.custom);
+      remove(elements, (e) => e.custom);
     }
   }
 
   handleSelectChange = (selected: boolean, item: string) => {
     this.setState(({ elements }) => {
-      const newElements = elements.map(e => (e.value === item ? { value: e.value, selected } : e));
+      const newElements = elements.map((e) =>
+        e.value === item ? { value: e.value, selected } : e
+      );
       return { elements: newElements };
     });
     if (selected) {
@@ -162,7 +164,7 @@ export default class MultiSelect extends React.PureComponent<PropsWithDefault, S
     if (allowNewElements) {
       this.setState({
         loading: true,
-        query
+        query,
       });
     }
   };
@@ -194,7 +196,7 @@ export default class MultiSelect extends React.PureComponent<PropsWithDefault, S
       'menu-vertically-limited': infiniteList,
       'spacer-top': infiniteList,
       'with-top-separator': infiniteList,
-      'with-bottom-separator': Boolean(footerNode)
+      'with-bottom-separator': Boolean(footerNode),
     });
 
     return (
@@ -211,7 +213,7 @@ export default class MultiSelect extends React.PureComponent<PropsWithDefault, S
         </div>
         <fieldset aria-label={legend}>
           <ul className={listClasses}>
-            {elements.map(e => (
+            {elements.map((e) => (
               <MultiSelectOption
                 element={e}
                 disabled={!allowSelection && !e.selected}
diff --git a/server/sonar-web/src/main/js/components/common/MultiSelectOption.tsx b/server/sonar-web/src/main/js/components/common/MultiSelectOption.tsx
index 70063767fd3..88b4012bc7c 100644
--- a/server/sonar-web/src/main/js/components/common/MultiSelectOption.tsx
+++ b/server/sonar-web/src/main/js/components/common/MultiSelectOption.tsx
@@ -46,17 +46,20 @@ export default function MultiSelectOption(props: MultiSelectOptionProps) {
       onFocus={() => setActive(true)}
       onBlur={() => setActive(false)}
       onMouseLeave={() => setActive(false)}
-      onMouseOver={() => setActive(true)}>
+      onMouseOver={() => setActive(true)}
+    >
       <Checkbox
         checked={element.selected}
         className={className}
         disabled={disabled}
         id={element.value}
-        onCheck={props.onSelectChange}>
+        onCheck={props.onSelectChange}
+      >
         {element.custom ? (
           <span
             aria-label={`${translate('create_new_element')}: ${label}`}
-            className="little-spacer-left">
+            className="little-spacer-left"
+          >
             <span aria-hidden={true} className="little-spacer-right">
               +
             </span>
diff --git a/server/sonar-web/src/main/js/components/common/PrivacyBadgeContainer.tsx b/server/sonar-web/src/main/js/components/common/PrivacyBadgeContainer.tsx
index 7db9134fa73..066dfab50b6 100644
--- a/server/sonar-web/src/main/js/components/common/PrivacyBadgeContainer.tsx
+++ b/server/sonar-web/src/main/js/components/common/PrivacyBadgeContainer.tsx
@@ -32,7 +32,7 @@ interface PrivacyBadgeContainerProps {
 export default function PrivacyBadgeContainer({
   className,
   qualifier,
-  visibility
+  visibility,
 }: PrivacyBadgeContainerProps) {
   if (visibility !== 'private') {
     return null;
diff --git a/server/sonar-web/src/main/js/components/common/ProjectKeyInput.tsx b/server/sonar-web/src/main/js/components/common/ProjectKeyInput.tsx
index 8ec367e8277..28f344f98ac 100644
--- a/server/sonar-web/src/main/js/components/common/ProjectKeyInput.tsx
+++ b/server/sonar-web/src/main/js/components/common/ProjectKeyInput.tsx
@@ -44,7 +44,7 @@ export default function ProjectKeyInput(props: ProjectKeyInputProps) {
     projectKey,
     touched,
     validating,
-    autofocus = false
+    autofocus = false,
   } = props;
 
   const isInvalid = touched && error !== undefined;
@@ -60,12 +60,13 @@ export default function ProjectKeyInput(props: ProjectKeyInputProps) {
       isInvalid={isInvalid}
       isValid={isValid}
       label={label}
-      required={label !== undefined}>
+      required={label !== undefined}
+    >
       <input
         autoFocus={autofocus}
         className={classNames('input-super-large', {
           'is-invalid': isInvalid,
-          'is-valid': isValid
+          'is-valid': isValid,
         })}
         id="project-key"
         maxLength={PROJECT_KEY_MAX_LEN}
diff --git a/server/sonar-web/src/main/js/components/common/ResetPasswordForm.tsx b/server/sonar-web/src/main/js/components/common/ResetPasswordForm.tsx
index a9f7dd0fa7c..69037ff838e 100644
--- a/server/sonar-web/src/main/js/components/common/ResetPasswordForm.tsx
+++ b/server/sonar-web/src/main/js/components/common/ResetPasswordForm.tsx
@@ -42,7 +42,7 @@ export default class ResetPasswordForm extends React.Component<Props, State> {
   password: HTMLInputElement | null = null;
   passwordConfirmation: HTMLInputElement | null = null;
   state: State = {
-    success: false
+    success: false,
   };
 
   handleSuccessfulChange = () => {
@@ -112,7 +112,7 @@ export default class ResetPasswordForm extends React.Component<Props, State> {
             autoComplete="off"
             id="old_password"
             name="old_password"
-            ref={elem => (this.oldPassword = elem)}
+            ref={(elem) => (this.oldPassword = elem)}
             required={true}
             type="password"
           />
@@ -126,7 +126,7 @@ export default class ResetPasswordForm extends React.Component<Props, State> {
             autoComplete="off"
             id="password"
             name="password"
-            ref={elem => (this.password = elem)}
+            ref={(elem) => (this.password = elem)}
             required={true}
             type="password"
           />
@@ -140,7 +140,7 @@ export default class ResetPasswordForm extends React.Component<Props, State> {
             autoComplete="off"
             id="password_confirmation"
             name="password_confirmation"
-            ref={elem => (this.passwordConfirmation = elem)}
+            ref={(elem) => (this.passwordConfirmation = elem)}
             required={true}
             type="password"
           />
diff --git a/server/sonar-web/src/main/js/components/common/RestartButton.tsx b/server/sonar-web/src/main/js/components/common/RestartButton.tsx
index 1abbc137843..c6eb8bd0f24 100644
--- a/server/sonar-web/src/main/js/components/common/RestartButton.tsx
+++ b/server/sonar-web/src/main/js/components/common/RestartButton.tsx
@@ -50,12 +50,14 @@ export default class RestartButton extends React.PureComponent<Props> {
           </>
         }
         modalHeader={translate('system.restart_server')}
-        onConfirm={this.handleConfirm}>
+        onConfirm={this.handleConfirm}
+      >
         {({ onClick }) => (
           <Button
             className={classNames('button-red', className)}
             disabled={systemStatus !== 'UP'}
-            onClick={onClick}>
+            onClick={onClick}
+          >
             {systemStatus === 'RESTARTING'
               ? translate('system.restart_in_progress')
               : translate('system.restart_server')}
diff --git a/server/sonar-web/src/main/js/components/common/ScreenPositionHelper.tsx b/server/sonar-web/src/main/js/components/common/ScreenPositionHelper.tsx
index 5b06162a1be..5b003bf9508 100644
--- a/server/sonar-web/src/main/js/components/common/ScreenPositionHelper.tsx
+++ b/server/sonar-web/src/main/js/components/common/ScreenPositionHelper.tsx
@@ -50,7 +50,7 @@ export default class ScreenPositionHelper extends React.PureComponent<Props> {
     }
     return {
       top: window.pageYOffset + containerPos.top,
-      left: window.pageXOffset + containerPos.left
+      left: window.pageXOffset + containerPos.left,
     };
   };
 
@@ -58,7 +58,8 @@ export default class ScreenPositionHelper extends React.PureComponent<Props> {
     return (
       <div
         className={this.props.className}
-        ref={container => (this.container = container as HTMLDivElement)}>
+        ref={(container) => (this.container = container as HTMLDivElement)}
+      >
         {this.props.children(this.getPosition())}
       </div>
     );
diff --git a/server/sonar-web/src/main/js/components/common/SelectList.tsx b/server/sonar-web/src/main/js/components/common/SelectList.tsx
index 1ccd8dee6e8..70f14cac0c3 100644
--- a/server/sonar-web/src/main/js/components/common/SelectList.tsx
+++ b/server/sonar-web/src/main/js/components/common/SelectList.tsx
@@ -39,7 +39,7 @@ export default class SelectList extends React.PureComponent<Props, State> {
     super(props);
     this.state = {
       active: props.currentItem,
-      selected: props.currentItem
+      selected: props.currentItem,
     };
   }
 
@@ -114,7 +114,7 @@ export default class SelectList extends React.PureComponent<Props, State> {
       active: this.state.active,
       selected: this.state.selected,
       onHover: this.handleHover,
-      onSelect: this.handleSelect
+      onSelect: this.handleSelect,
     });
   };
 
@@ -125,7 +125,7 @@ export default class SelectList extends React.PureComponent<Props, State> {
       <ul className={classNames('menu', this.props.className)}>
         {hasChildren && React.Children.map(children, this.renderChild)}
         {!hasChildren &&
-          this.props.items.map(item => (
+          this.props.items.map((item) => (
             <SelectListItem
               active={this.state.active}
               selected={this.state.selected}
diff --git a/server/sonar-web/src/main/js/components/common/SelectListItem.tsx b/server/sonar-web/src/main/js/components/common/SelectListItem.tsx
index b8d2f9200f2..afe33d2b5af 100644
--- a/server/sonar-web/src/main/js/components/common/SelectListItem.tsx
+++ b/server/sonar-web/src/main/js/components/common/SelectListItem.tsx
@@ -55,13 +55,14 @@ export default class SelectListItem extends React.PureComponent<Props> {
           className={classNames(
             {
               active: this.props.active === this.props.item,
-              hover: this.props.selected === this.props.item
+              hover: this.props.selected === this.props.item,
             },
             this.props.className
           )}
           onClick={this.handleSelect}
           onFocus={this.handleHover}
-          onMouseOver={this.handleHover}>
+          onMouseOver={this.handleHover}
+        >
           {children}
         </ButtonPlain>
       </li>
diff --git a/server/sonar-web/src/main/js/components/common/StatusIndicator.tsx b/server/sonar-web/src/main/js/components/common/StatusIndicator.tsx
index bd7990183cf..cf63daa7298 100644
--- a/server/sonar-web/src/main/js/components/common/StatusIndicator.tsx
+++ b/server/sonar-web/src/main/js/components/common/StatusIndicator.tsx
@@ -39,7 +39,7 @@ export default function StatusIndicator({ className, color, size }: StatusIndica
           color,
           {
             'small-status-indicator': size === 'small',
-            'big-status-indicator': size === 'big'
+            'big-status-indicator': size === 'big',
           },
           className
         )}
diff --git a/server/sonar-web/src/main/js/components/common/VisibilitySelector.tsx b/server/sonar-web/src/main/js/components/common/VisibilitySelector.tsx
index 02e4f1a05b0..623acd658d7 100644
--- a/server/sonar-web/src/main/js/components/common/VisibilitySelector.tsx
+++ b/server/sonar-web/src/main/js/components/common/VisibilitySelector.tsx
@@ -35,14 +35,15 @@ export default class VisibilitySelector extends React.PureComponent<Props> {
   render() {
     return (
       <div className={classNames(this.props.className)}>
-        {['public', 'private'].map(visibility => (
+        {['public', 'private'].map((visibility) => (
           <Radio
             className={`huge-spacer-right visibility-${visibility}`}
             key={visibility}
             value={visibility}
             checked={this.props.visibility === visibility}
             onCheck={this.props.onChange}
-            disabled={visibility === 'private' && !this.props.canTurnToPrivate}>
+            disabled={visibility === 'private' && !this.props.canTurnToPrivate}
+          >
             <div>
               {translate('visibility', visibility)}
               {this.props.showDetails && (
diff --git a/server/sonar-web/src/main/js/components/common/__tests__/AnalysisWarningsModal-test.tsx b/server/sonar-web/src/main/js/components/common/__tests__/AnalysisWarningsModal-test.tsx
index 23efe791c4c..6768b29aecd 100644
--- a/server/sonar-web/src/main/js/components/common/__tests__/AnalysisWarningsModal-test.tsx
+++ b/server/sonar-web/src/main/js/components/common/__tests__/AnalysisWarningsModal-test.tsx
@@ -29,8 +29,8 @@ import { AnalysisWarningsModal } from '../AnalysisWarningsModal';
 jest.mock('../../../api/ce', () => ({
   dismissAnalysisWarning: jest.fn().mockResolvedValue(null),
   getTask: jest.fn().mockResolvedValue({
-    warnings: ['message foo', 'message-bar', 'multiline message\nsecondline\n  third line']
-  })
+    warnings: ['message foo', 'message-bar', 'multiline message\nsecondline\n  third line'],
+  }),
 }));
 
 beforeEach(jest.clearAllMocks);
@@ -43,7 +43,7 @@ it('should render correctly', () => {
   expect(
     shallowRender({
       currentUser: mockCurrentUser({ isLoggedIn: false }),
-      warnings: [mockTaskWarning({ dismissable: true })]
+      warnings: [mockTaskWarning({ dismissable: true })],
     })
   ).toMatchSnapshot('do not show dismissable links for anonymous');
 });
@@ -65,13 +65,10 @@ it('should correctly handle dismissing warnings', async () => {
   const wrapper = shallowRender({
     componentKey: 'foo',
     onWarningDismiss,
-    warnings: [mockTaskWarning({ key: 'bar', dismissable: true })]
+    warnings: [mockTaskWarning({ key: 'bar', dismissable: true })],
   });
 
-  const { onClick } = wrapper
-    .find(ButtonLink)
-    .at(0)
-    .props();
+  const { onClick } = wrapper.find(ButtonLink).at(0).props();
 
   if (onClick) {
     onClick();
@@ -105,7 +102,7 @@ function shallowRender(props: Partial<AnalysisWarningsModal['props']> = {}) {
       onClose={jest.fn()}
       warnings={[
         mockTaskWarning({ message: 'warning 1' }),
-        mockTaskWarning({ message: 'warning 2' })
+        mockTaskWarning({ message: 'warning 2' }),
       ]}
       {...props}
     />
diff --git a/server/sonar-web/src/main/js/components/common/__tests__/BranchStatus-test.tsx b/server/sonar-web/src/main/js/components/common/__tests__/BranchStatus-test.tsx
index 551674c475b..c113a4dad14 100644
--- a/server/sonar-web/src/main/js/components/common/__tests__/BranchStatus-test.tsx
+++ b/server/sonar-web/src/main/js/components/common/__tests__/BranchStatus-test.tsx
@@ -25,12 +25,12 @@ it('should render correctly', () => {
   expect(shallowRender().type()).toBeNull();
   expect(
     shallowRender({
-      status: 'OK'
+      status: 'OK',
     })
   ).toMatchSnapshot('Successful');
   expect(
     shallowRender({
-      status: 'ERROR'
+      status: 'ERROR',
     })
   ).toMatchSnapshot('Error');
 });
diff --git a/server/sonar-web/src/main/js/components/common/__tests__/DisableableSelectOption-test.tsx b/server/sonar-web/src/main/js/components/common/__tests__/DisableableSelectOption-test.tsx
index b7655941a45..057f238116c 100644
--- a/server/sonar-web/src/main/js/components/common/__tests__/DisableableSelectOption-test.tsx
+++ b/server/sonar-web/src/main/js/components/common/__tests__/DisableableSelectOption-test.tsx
@@ -30,7 +30,7 @@ it('should render correctly', () => {
   expect(
     shallowRender({
       option: { label: 'Bar', value: 'bar', isDisabled: true },
-      disabledReason: 'bar baz'
+      disabledReason: 'bar baz',
     })
   ).toMatchSnapshot('disabled, with explanation');
 });
diff --git a/server/sonar-web/src/main/js/components/common/__tests__/DocumentationTooltip-test.tsx b/server/sonar-web/src/main/js/components/common/__tests__/DocumentationTooltip-test.tsx
index 67821c47ea9..33bc5bf3ce3 100644
--- a/server/sonar-web/src/main/js/components/common/__tests__/DocumentationTooltip-test.tsx
+++ b/server/sonar-web/src/main/js/components/common/__tests__/DocumentationTooltip-test.tsx
@@ -28,8 +28,8 @@ it('renders correctly', () => {
       links: [
         { href: 'http://link.tosome.place', label: 'external link' },
         { href: '/guide', label: 'internal link' },
-        { href: '/projects', label: 'in place', inPlace: true, doc: false }
-      ]
+        { href: '/projects', label: 'in place', inPlace: true, doc: false },
+      ],
     })
   ).toMatchSnapshot('with links');
   expect(shallowRender({ title: undefined })).toMatchSnapshot('no title');
diff --git a/server/sonar-web/src/main/js/components/common/__tests__/FormattingTips-test.tsx b/server/sonar-web/src/main/js/components/common/__tests__/FormattingTips-test.tsx
index a478c20db70..9cf50b9c48a 100644
--- a/server/sonar-web/src/main/js/components/common/__tests__/FormattingTips-test.tsx
+++ b/server/sonar-web/src/main/js/components/common/__tests__/FormattingTips-test.tsx
@@ -27,14 +27,14 @@ const originalOpen = window.open;
 beforeAll(() => {
   Object.defineProperty(window, 'open', {
     writable: true,
-    value: jest.fn()
+    value: jest.fn(),
   });
 });
 
 afterAll(() => {
   Object.defineProperty(window, 'open', {
     writable: true,
-    value: originalOpen
+    value: originalOpen,
   });
 });
 
diff --git a/server/sonar-web/src/main/js/components/common/__tests__/FormattingTipsWithLink-test.tsx b/server/sonar-web/src/main/js/components/common/__tests__/FormattingTipsWithLink-test.tsx
index 36aa84ab117..91a7c5fa5a0 100644
--- a/server/sonar-web/src/main/js/components/common/__tests__/FormattingTipsWithLink-test.tsx
+++ b/server/sonar-web/src/main/js/components/common/__tests__/FormattingTipsWithLink-test.tsx
@@ -28,14 +28,14 @@ const originalOpen = window.open;
 beforeAll(() => {
   Object.defineProperty(window, 'open', {
     writable: true,
-    value: jest.fn()
+    value: jest.fn(),
   });
 });
 
 afterAll(() => {
   Object.defineProperty(window, 'open', {
     writable: true,
-    value: originalOpen
+    value: originalOpen,
   });
 });
 
diff --git a/server/sonar-web/src/main/js/components/common/__tests__/MultiSelect-test.tsx b/server/sonar-web/src/main/js/components/common/__tests__/MultiSelect-test.tsx
index bc8fd239ee0..e6032e39dcc 100644
--- a/server/sonar-web/src/main/js/components/common/__tests__/MultiSelect-test.tsx
+++ b/server/sonar-web/src/main/js/components/common/__tests__/MultiSelect-test.tsx
@@ -26,7 +26,7 @@ import MultiSelect from '../MultiSelect';
 const ui = {
   checkbox: (name: string) => byRole('checkbox', { name }),
   search: byRole('searchbox', { name: 'search_verb' }),
-  noResult: byText('no_results_for_x.notfound')
+  noResult: byText('no_results_for_x.notfound'),
 };
 
 it('should handle selection', async () => {
@@ -41,7 +41,7 @@ it('should handle selection', async () => {
   expect(ui.checkbox('create').get()).toBeChecked();
 
   // Custom label
-  rerender({ renderLabel: label => `prefxed-${label}` });
+  rerender({ renderLabel: (label) => `prefxed-${label}` });
   expect(ui.checkbox('prefxed-create').get()).toBeChecked();
 });
 
@@ -85,20 +85,20 @@ function renderMultiSelect(override?: Partial<MultiSelect['props']>) {
         setElements(initial);
         setSelected(initialSelected);
       } else {
-        setElements([...elements.filter(e => e.indexOf(query) !== -1), `${query}-new`]);
-        setSelected(selected.filter(e => e.indexOf(query) !== -1));
+        setElements([...elements.filter((e) => e.indexOf(query) !== -1), `${query}-new`]);
+        setSelected(selected.filter((e) => e.indexOf(query) !== -1));
       }
       return Promise.resolve();
     };
 
     const onSelect = (element: string) => {
       setSelected([...selected, element]);
-      setElements(elements.filter(e => e !== element));
+      setElements(elements.filter((e) => e !== element));
     };
 
     const onUnselect = (element: string) => {
       setElements([...elements, element]);
-      setSelected(selected.filter(e => e !== element));
+      setSelected(selected.filter((e) => e !== element));
     };
     return (
       <MultiSelect
@@ -115,7 +115,7 @@ function renderMultiSelect(override?: Partial<MultiSelect['props']>) {
   }
 
   const { rerender } = render(<Parent {...override} />);
-  return function(reoverride?: Partial<MultiSelect['props']>) {
+  return function (reoverride?: Partial<MultiSelect['props']>) {
     rerender(<Parent {...override} {...reoverride} />);
   };
 }
diff --git a/server/sonar-web/src/main/js/components/common/__tests__/ResetPasswordForm-test.tsx b/server/sonar-web/src/main/js/components/common/__tests__/ResetPasswordForm-test.tsx
index 34e1023031d..4dcaa1e680d 100644
--- a/server/sonar-web/src/main/js/components/common/__tests__/ResetPasswordForm-test.tsx
+++ b/server/sonar-web/src/main/js/components/common/__tests__/ResetPasswordForm-test.tsx
@@ -25,7 +25,7 @@ import { mockEvent, waitAndUpdate } from '../../../helpers/testUtils';
 import ResetPasswordForm from '../ResetPasswordForm';
 
 jest.mock('../../../api/users', () => ({
-  changePassword: jest.fn().mockResolvedValue({})
+  changePassword: jest.fn().mockResolvedValue({}),
 }));
 
 it('should trigger on password change prop', () => {
@@ -66,7 +66,7 @@ it('should trigger password change', async () => {
   expect(changePassword).toHaveBeenCalledWith({
     login: user.login,
     password: 'test',
-    previousPassword: 'testold'
+    previousPassword: 'testold',
   });
 });
 
diff --git a/server/sonar-web/src/main/js/components/common/__tests__/SelectList-test.tsx b/server/sonar-web/src/main/js/components/common/__tests__/SelectList-test.tsx
index f81935ff561..873b33bc4da 100644
--- a/server/sonar-web/src/main/js/components/common/__tests__/SelectList-test.tsx
+++ b/server/sonar-web/src/main/js/components/common/__tests__/SelectList-test.tsx
@@ -32,7 +32,7 @@ it('should render correctly without children', () => {
 
 it('should render correctly with children', () => {
   const items = ['item', 'seconditem', 'third'];
-  const children = items.map(item => (
+  const children = items.map((item) => (
     <SelectListItem item={item} key={item}>
       <i className="myicon" />
       item
@@ -46,7 +46,7 @@ it('should render correctly with children', () => {
 it('should correclty handle user actions', () => {
   const onSelect = jest.fn();
   const items = ['item', 'seconditem', 'third'];
-  const children = items.map(item => (
+  const children = items.map((item) => (
     <SelectListItem item={item} key={item}>
       <i className="myicon" />
       item
@@ -73,7 +73,8 @@ function shallowRender(props: Partial<SelectList['props']> = {}, children?: Reac
       currentItem="seconditem"
       items={['item', 'seconditem', 'third']}
       onSelect={jest.fn()}
-      {...props}>
+      {...props}
+    >
       {children}
     </SelectList>
   );
diff --git a/server/sonar-web/src/main/js/components/common/__tests__/VisibilitySelector-test.tsx b/server/sonar-web/src/main/js/components/common/__tests__/VisibilitySelector-test.tsx
index b16a241f969..d1f6572a078 100644
--- a/server/sonar-web/src/main/js/components/common/__tests__/VisibilitySelector-test.tsx
+++ b/server/sonar-web/src/main/js/components/common/__tests__/VisibilitySelector-test.tsx
@@ -27,21 +27,13 @@ it('changes visibility', () => {
   const wrapper = shallowRender({ onChange });
   expect(wrapper).toMatchSnapshot();
 
-  wrapper
-    .find(Radio)
-    .first()
-    .props()
-    .onCheck('private');
+  wrapper.find(Radio).first().props().onCheck('private');
   expect(onChange).toHaveBeenCalledWith('private');
 
   wrapper.setProps({ visibility: 'private' });
   expect(wrapper).toMatchSnapshot();
 
-  wrapper
-    .find(Radio)
-    .first()
-    .props()
-    .onCheck('public');
+  wrapper.find(Radio).first().props().onCheck('public');
   expect(onChange).toHaveBeenCalledWith('public');
 });
 
diff --git a/server/sonar-web/src/main/js/components/controls/ActionsDropdown.tsx b/server/sonar-web/src/main/js/components/controls/ActionsDropdown.tsx
index 371f5c28f3b..980f7c2ab3d 100644
--- a/server/sonar-web/src/main/js/components/controls/ActionsDropdown.tsx
+++ b/server/sonar-web/src/main/js/components/controls/ActionsDropdown.tsx
@@ -43,11 +43,13 @@ export default function ActionsDropdown(props: ActionsDropdownProps) {
       className={className}
       onOpen={props.onOpen}
       overlay={<ul className="menu">{children}</ul>}
-      overlayPlacement={overlayPlacement}>
+      overlayPlacement={overlayPlacement}
+    >
       <Button
         className={classNames('dropdown-toggle', toggleClassName, {
-          'button-small': small
-        })}>
+          'button-small': small,
+        })}
+      >
         <SettingsIcon size={small ? 12 : 14} />
         <DropdownIcon className="little-spacer-left" />
       </Button>
@@ -85,7 +87,8 @@ export class ActionsDropdownItem extends React.PureComponent<ItemProps> {
             className={className}
             download={this.props.download}
             href={this.props.to}
-            id={this.props.id}>
+            id={this.props.id}
+          >
             {this.props.children}
           </a>
         </li>
diff --git a/server/sonar-web/src/main/js/components/controls/BackButton.tsx b/server/sonar-web/src/main/js/components/controls/BackButton.tsx
index 5ffe0fa483f..fb9b6b96257 100644
--- a/server/sonar-web/src/main/js/components/controls/BackButton.tsx
+++ b/server/sonar-web/src/main/js/components/controls/BackButton.tsx
@@ -62,7 +62,8 @@ export default class BackButton extends React.PureComponent<Props> {
             this.props.className
           )}
           href="#"
-          onClick={this.handleClick}>
+          onClick={this.handleClick}
+        >
           {this.renderIcon()}
         </a>
       </Tooltip>
diff --git a/server/sonar-web/src/main/js/components/controls/BoxedGroupAccordion.tsx b/server/sonar-web/src/main/js/components/controls/BoxedGroupAccordion.tsx
index a7056898971..14e335efcd3 100644
--- a/server/sonar-web/src/main/js/components/controls/BoxedGroupAccordion.tsx
+++ b/server/sonar-web/src/main/js/components/controls/BoxedGroupAccordion.tsx
@@ -46,9 +46,10 @@ export default function BoxedGroupAccordion(props: BoxedGroupAccordionProps) {
     <div
       className={classNames('boxed-group boxed-group-accordion', className, {
         'no-border': noBorder,
-        open
+        open,
       })}
-      role="listitem">
+      role="listitem"
+    >
       {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
       <div onClick={handleClick} className="display-flex-center boxed-group-header">
         <ButtonPlain
@@ -57,7 +58,8 @@ export default function BoxedGroupAccordion(props: BoxedGroupAccordionProps) {
           onClick={handleClick}
           id={`${id}-header`}
           aria-controls={`${id}-panel`}
-          aria-expanded={open}>
+          aria-expanded={open}
+        >
           {title}
         </ButtonPlain>
         {renderHeader && renderHeader()}
diff --git a/server/sonar-web/src/main/js/components/controls/BoxedTabs.tsx b/server/sonar-web/src/main/js/components/controls/BoxedTabs.tsx
index 7bf88173563..d9ad0562f07 100644
--- a/server/sonar-web/src/main/js/components/controls/BoxedTabs.tsx
+++ b/server/sonar-web/src/main/js/components/controls/BoxedTabs.tsx
@@ -43,7 +43,7 @@ const highlightHoverMixin = () => `
 
 const StyledTab = styled.button<{ active: boolean }>`
   position: relative;
-  background-color: ${props => (props.active ? 'white' : colors.barBackgroundColor)};
+  background-color: ${(props) => (props.active ? 'white' : colors.barBackgroundColor)};
   border-top: ${baseBorder};
   border-left: ${baseBorder};
   border-right: none;
@@ -51,11 +51,11 @@ const StyledTab = styled.button<{ active: boolean }>`
   margin-bottom: -1px;
   min-width: 128px;
   min-height: 56px;
-  ${props => !props.active && 'cursor: pointer;'}
+  ${(props) => !props.active && 'cursor: pointer;'}
   outline: 0;
   padding: calc(2 * ${sizes.gridSize});
 
-  ${props => (!props.active ? highlightHoverMixin : null)}
+  ${(props) => (!props.active ? highlightHoverMixin : null)}
 
   &:last-child {
     border-right: ${baseBorder};
@@ -63,7 +63,7 @@ const StyledTab = styled.button<{ active: boolean }>`
 `;
 
 const ActiveBorder = styled.div<{ active: boolean }>`
-  display: ${props => (props.active ? 'block' : 'none')};
+  display: ${(props) => (props.active ? 'block' : 'none')};
   background-color: ${colors.blue};
   height: 3px;
   width: 100%;
@@ -86,7 +86,8 @@ export default function BoxedTabs<K extends string | number>(props: BoxedTabsPro
           // eslint-disable-next-line react/no-array-index-key
           key={i}
           onClick={() => selected !== key && props.onSelect(key)}
-          role="tab">
+          role="tab"
+        >
           <ActiveBorder active={selected === key} />
           {label}
         </StyledTab>
diff --git a/server/sonar-web/src/main/js/components/controls/ButtonToggle.tsx b/server/sonar-web/src/main/js/components/controls/ButtonToggle.tsx
index 841337734dd..6c5ad5477e3 100644
--- a/server/sonar-web/src/main/js/components/controls/ButtonToggle.tsx
+++ b/server/sonar-web/src/main/js/components/controls/ButtonToggle.tsx
@@ -43,14 +43,15 @@ export default function ButtonToggle(props: ButtonToggleProps) {
 
   return (
     <ul aria-label={label} role="group" className="button-toggle">
-      {options.map(option => (
+      {options.map((option) => (
         <li key={option.value.toString()}>
           <Button
             onClick={() => option.value !== value && props.onCheck(option.value)}
             disabled={disabled}
             aria-current={option.value === value}
             data-value={option.value}
-            className={classNames({ selected: option.value === value })}>
+            className={classNames({ selected: option.value === value })}
+          >
             {option.label}
           </Button>
         </li>
diff --git a/server/sonar-web/src/main/js/components/controls/Checkbox.tsx b/server/sonar-web/src/main/js/components/controls/Checkbox.tsx
index 7573eb1c1ac..b88bdec4ca0 100644
--- a/server/sonar-web/src/main/js/components/controls/Checkbox.tsx
+++ b/server/sonar-web/src/main/js/components/controls/Checkbox.tsx
@@ -41,7 +41,7 @@ interface Props {
 
 export default class Checkbox extends React.PureComponent<Props> {
   static defaultProps = {
-    thirdState: false
+    thirdState: false,
   };
 
   handleClick = (event: React.SyntheticEvent<HTMLElement>) => {
@@ -53,21 +53,12 @@ export default class Checkbox extends React.PureComponent<Props> {
   };
 
   render() {
-    const {
-      checked,
-      children,
-      disabled,
-      id,
-      label,
-      loading,
-      right,
-      thirdState,
-      title
-    } = this.props;
+    const { checked, children, disabled, id, label, loading, right, thirdState, title } =
+      this.props;
     const className = classNames('icon-checkbox', {
       'icon-checkbox-checked': checked,
       'icon-checkbox-single': thirdState,
-      'icon-checkbox-disabled': disabled
+      'icon-checkbox-disabled': disabled,
     });
 
     if (children) {
@@ -77,13 +68,14 @@ export default class Checkbox extends React.PureComponent<Props> {
           aria-label={label}
           aria-disabled={disabled}
           className={classNames('link-checkbox', this.props.className, {
-            disabled
+            disabled,
           })}
           href="#"
           id={id}
           onClick={this.handleClick}
           role="checkbox"
-          title={title}>
+          title={title}
+        >
           {right && children}
           <DeferredSpinner loading={Boolean(loading)}>
             <i className={className} />
diff --git a/server/sonar-web/src/main/js/components/controls/ClickEventBoundary.tsx b/server/sonar-web/src/main/js/components/controls/ClickEventBoundary.tsx
index 66a0170a8db..3b471544f8c 100644
--- a/server/sonar-web/src/main/js/components/controls/ClickEventBoundary.tsx
+++ b/server/sonar-web/src/main/js/components/controls/ClickEventBoundary.tsx
@@ -30,6 +30,6 @@ export default function ClickEventBoundary({ children }: ClickEventBoundaryProps
       if (typeof children.props.onClick === 'function') {
         children.props.onClick(e);
       }
-    }
+    },
   });
 }
diff --git a/server/sonar-web/src/main/js/components/controls/ComponentReportActions.tsx b/server/sonar-web/src/main/js/components/controls/ComponentReportActions.tsx
index 38b294b2670..bff07033175 100644
--- a/server/sonar-web/src/main/js/components/controls/ComponentReportActions.tsx
+++ b/server/sonar-web/src/main/js/components/controls/ComponentReportActions.tsx
@@ -21,7 +21,7 @@ import * as React from 'react';
 import {
   getReportStatus,
   subscribeToEmailReport,
-  unsubscribeFromEmailReport
+  unsubscribeFromEmailReport,
 } from '../../api/component-report';
 import withAppStateContext from '../../app/components/app-state/withAppStateContext';
 import withCurrentUserContext from '../../app/components/current-user/withCurrentUserContext';
diff --git a/server/sonar-web/src/main/js/components/controls/ComponentReportActionsRenderer.tsx b/server/sonar-web/src/main/js/components/controls/ComponentReportActionsRenderer.tsx
index 5c0717abdea..1ebdce3b8f3 100644
--- a/server/sonar-web/src/main/js/components/controls/ComponentReportActionsRenderer.tsx
+++ b/server/sonar-web/src/main/js/components/controls/ComponentReportActionsRenderer.tsx
@@ -43,11 +43,12 @@ export default function ComponentReportActionsRenderer(props: ComponentReportAct
   const renderDownloadButton = (simple = false) => {
     return (
       <a
-        download={[component.name, branch?.name, 'PDF Report.pdf'].filter(s => !!s).join(' - ')}
+        download={[component.name, branch?.name, 'PDF Report.pdf'].filter((s) => !!s).join(' - ')}
         href={getReportUrl(component.key, branch?.name)}
         target="_blank"
         data-test="overview__download-pdf-report-button"
-        rel="noopener noreferrer">
+        rel="noopener noreferrer"
+      >
         {simple
           ? translate('download_verb')
           : translateWithParameters(
@@ -85,7 +86,8 @@ export default function ComponentReportActionsRenderer(props: ComponentReportAct
           <li>{renderDownloadButton(true)}</li>
           <li>{renderSubscriptionButton()}</li>
         </ul>
-      }>
+      }
+    >
       <Button className="dropdown-toggle">
         {translateWithParameters(
           'component_report.report',
diff --git a/server/sonar-web/src/main/js/components/controls/ConfirmButton.tsx b/server/sonar-web/src/main/js/components/controls/ConfirmButton.tsx
index 12f86ba38e5..5eb8fe235b1 100644
--- a/server/sonar-web/src/main/js/components/controls/ConfirmButton.tsx
+++ b/server/sonar-web/src/main/js/components/controls/ConfirmButton.tsx
@@ -34,19 +34,15 @@ interface State {
 
 export default class ConfirmButton<T> extends React.PureComponent<Props<T>, State> {
   renderConfirmModal = ({ onClose }: ModalProps) => {
-    const {
-      children,
-      modalBody,
-      modalHeader,
-      modalHeaderDescription,
-      ...confirmModalProps
-    } = this.props;
+    const { children, modalBody, modalHeader, modalHeaderDescription, ...confirmModalProps } =
+      this.props;
     return (
       <ConfirmModal
         header={modalHeader}
         headerDescription={modalHeaderDescription}
         onClose={onClose}
-        {...confirmModalProps}>
+        {...confirmModalProps}
+      >
         {modalBody}
       </ConfirmModal>
     );
diff --git a/server/sonar-web/src/main/js/components/controls/ConfirmModal.tsx b/server/sonar-web/src/main/js/components/controls/ConfirmModal.tsx
index 279d535cbea..cea26ceea21 100644
--- a/server/sonar-web/src/main/js/components/controls/ConfirmModal.tsx
+++ b/server/sonar-web/src/main/js/components/controls/ConfirmModal.tsx
@@ -70,7 +70,7 @@ export default class ConfirmModal<T = string> extends React.PureComponent<Props<
       header,
       headerDescription,
       isDestructive,
-      cancelButtonText = translate('cancel')
+      cancelButtonText = translate('cancel'),
     } = this.props;
     return (
       <ClickEventBoundary>
@@ -85,7 +85,8 @@ export default class ConfirmModal<T = string> extends React.PureComponent<Props<
             <SubmitButton
               autoFocus={true}
               className={isDestructive ? 'button-red' : undefined}
-              disabled={submitting || confirmDisable}>
+              disabled={submitting || confirmDisable}
+            >
               {confirmButtonText}
             </SubmitButton>
             <ResetButtonLink disabled={submitting} onClick={onCloseClick}>
diff --git a/server/sonar-web/src/main/js/components/controls/DateInput.tsx b/server/sonar-web/src/main/js/components/controls/DateInput.tsx
index 67168910d28..a77f0f011f2 100644
--- a/server/sonar-web/src/main/js/components/controls/DateInput.tsx
+++ b/server/sonar-web/src/main/js/components/controls/DateInput.tsx
@@ -32,7 +32,7 @@ import {
   getShortMonthName,
   getShortWeekDayName,
   getWeekDayName,
-  translate
+  translate,
 } from '../../helpers/l10n';
 import './DayPicker.css';
 import EscKeydownHandler from './EscKeydownHandler';
@@ -86,7 +86,7 @@ export default class DateInput extends React.PureComponent<Props, State> {
     this.setState({
       currentMonth: this.props.value || this.props.currentMonth || new Date(),
       lastHovered: undefined,
-      open: true
+      open: true,
     });
   };
 
@@ -110,15 +110,15 @@ export default class DateInput extends React.PureComponent<Props, State> {
   };
 
   handleCurrentYearChange = ({ value }: { value: number }) => {
-    this.setState(state => ({ currentMonth: setYear(state.currentMonth, value) }));
+    this.setState((state) => ({ currentMonth: setYear(state.currentMonth, value) }));
   };
 
   handlePreviousMonthClick = () => {
-    this.setState(state => ({ currentMonth: subMonths(state.currentMonth, 1) }));
+    this.setState((state) => ({ currentMonth: subMonths(state.currentMonth, 1) }));
   };
 
   handleNextMonthClick = () => {
-    this.setState(state => ({ currentMonth: addMonths(state.currentMonth, 1) }));
+    this.setState((state) => ({ currentMonth: addMonths(state.currentMonth, 1) }));
   };
 
   render() {
@@ -131,7 +131,7 @@ export default class DateInput extends React.PureComponent<Props, State> {
       className,
       inputClassName,
       id,
-      placeholder
+      placeholder,
     } = this.props;
     const { lastHovered, currentMonth, open } = this.state;
 
@@ -156,11 +156,11 @@ export default class DateInput extends React.PureComponent<Props, State> {
     const weekdaysLong = range(7).map(getWeekDayName) as Week;
     const weekdaysShort = range(7).map(getShortWeekDayName) as Week;
 
-    const monthOptions = months.map(month => ({
+    const monthOptions = months.map((month) => ({
       label: getShortMonthName(month),
-      value: month
+      value: month,
     }));
-    const yearOptions = years.map(year => ({ label: String(year), value: year }));
+    const yearOptions = years.map((year) => ({ label: String(year), value: year }));
 
     return (
       <OutsideClickHandler onClickOutside={this.closeCalendar}>
@@ -168,7 +168,7 @@ export default class DateInput extends React.PureComponent<Props, State> {
           <span className={classNames('date-input-control', className)}>
             <InputWrapper
               className={classNames('date-input-control-input', inputClassName, {
-                'is-filled': value !== undefined
+                'is-filled': value !== undefined,
               })}
               id={id}
               innerRef={(node: HTMLInputElement | null) => (this.input = node)}
@@ -200,14 +200,14 @@ export default class DateInput extends React.PureComponent<Props, State> {
                       className="date-input-calender-month-select"
                       onChange={this.handleCurrentMonthChange}
                       options={monthOptions}
-                      value={monthOptions.find(month => month.value === currentMonth.getMonth())}
+                      value={monthOptions.find((month) => month.value === currentMonth.getMonth())}
                     />
                     <Select
                       aria-label={translate('select_year')}
                       className="date-input-calender-month-select spacer-left"
                       onChange={this.handleCurrentYearChange}
                       options={yearOptions}
-                      value={yearOptions.find(year => year.value === currentMonth.getFullYear())}
+                      value={yearOptions.find((year) => year.value === currentMonth.getFullYear())}
                     />
                   </div>
                   <ButtonIcon className="button-small" onClick={this.handleNextMonthClick}>
diff --git a/server/sonar-web/src/main/js/components/controls/DateRangeInput.tsx b/server/sonar-web/src/main/js/components/controls/DateRangeInput.tsx
index a2f13e9b635..505439ed196 100644
--- a/server/sonar-web/src/main/js/components/controls/DateRangeInput.tsx
+++ b/server/sonar-web/src/main/js/components/controls/DateRangeInput.tsx
@@ -96,7 +96,7 @@ export default class DateRangeInput extends React.PureComponent<Props> {
             maxDate={maxDate}
             onChange={this.handleToChange}
             placeholder={translate('end_date')}
-            ref={element => (this.toDateInput = element)}
+            ref={(element) => (this.toDateInput = element)}
             value={this.to}
           />
         </div>
diff --git a/server/sonar-web/src/main/js/components/controls/Dropdown.tsx b/server/sonar-web/src/main/js/components/controls/Dropdown.tsx
index 0d9ed80584b..308d2e4e395 100644
--- a/server/sonar-web/src/main/js/components/controls/Dropdown.tsx
+++ b/server/sonar-web/src/main/js/components/controls/Dropdown.tsx
@@ -68,13 +68,13 @@ export default class Dropdown extends React.PureComponent<Props, State> {
       event.preventDefault();
       event.currentTarget.blur();
     }
-    this.setState(state => ({ open: !state.open }));
+    this.setState((state) => ({ open: !state.open }));
   };
 
   render() {
     const a11yAttrs = {
       'aria-expanded': String(this.state.open),
-      'aria-haspopup': 'true'
+      'aria-haspopup': 'true',
     };
 
     const child = React.isValidElement(this.props.children)
@@ -82,7 +82,7 @@ export default class Dropdown extends React.PureComponent<Props, State> {
       : this.props.children({
           closeDropdown: this.closeDropdown,
           onToggleClick: this.handleToggleClick,
-          open: this.state.open
+          open: this.state.open,
         });
 
     const { closeOnClick = true, closeOnClickOutside = false } = this.props;
@@ -96,10 +96,12 @@ export default class Dropdown extends React.PureComponent<Props, State> {
         overlay={
           <DropdownOverlay
             noPadding={this.props.noOverlayPadding}
-            placement={this.props.overlayPlacement}>
+            placement={this.props.overlayPlacement}
+          >
             {this.props.overlay}
           </DropdownOverlay>
-        }>
+        }
+      >
         {child}
       </Toggler>
     );
@@ -138,7 +140,8 @@ export class DropdownOverlay extends React.Component<OverlayProps> {
         leftFix !== undefined && topFix !== undefined
           ? { marginLeft: `calc(50% + ${leftFix}px)` }
           : undefined
-      }>
+      }
+    >
       {this.props.children}
     </Popup>
   );
diff --git a/server/sonar-web/src/main/js/components/controls/Favorite.tsx b/server/sonar-web/src/main/js/components/controls/Favorite.tsx
index dff52de6bb3..47aae1ebd70 100644
--- a/server/sonar-web/src/main/js/components/controls/Favorite.tsx
+++ b/server/sonar-web/src/main/js/components/controls/Favorite.tsx
@@ -46,7 +46,7 @@ export default class Favorite extends React.PureComponent<Props, State> {
     super(props);
 
     this.state = {
-      favorite: props.favorite
+      favorite: props.favorite,
     };
   }
 
@@ -94,9 +94,10 @@ export default class Favorite extends React.PureComponent<Props, State> {
     return (
       <Tooltip overlay={tooltip}>
         <ButtonLink
-          innerRef={node => (this.buttonNode = node)}
+          innerRef={(node) => (this.buttonNode = node)}
           className={classNames('favorite-link', 'link-no-underline', className)}
-          onClick={this.toggleFavorite}>
+          onClick={this.toggleFavorite}
+        >
           <FavoriteIcon aria-label={tooltip} favorite={favorite} />
         </ButtonLink>
       </Tooltip>
diff --git a/server/sonar-web/src/main/js/components/controls/HelpTooltip.tsx b/server/sonar-web/src/main/js/components/controls/HelpTooltip.tsx
index 45e312e7cca..523e21b7e6a 100644
--- a/server/sonar-web/src/main/js/components/controls/HelpTooltip.tsx
+++ b/server/sonar-web/src/main/js/components/controls/HelpTooltip.tsx
@@ -49,12 +49,14 @@ export default function HelpTooltip({
       className={classNames('help-tooltip', props.className)}
       aria-labelledby={ariaLabelledby}
       aria-label={ariaLabel}
-      role={role}>
+      role={role}
+    >
       <Tooltip
         mouseLeaveDelay={0.25}
         onShow={props.onShow}
         overlay={props.overlay}
-        placement={props.placement}>
+        placement={props.placement}
+      >
         <span className="display-inline-flex-center">
           {props.children || <HelpIcon fill={colors.gray60} size={size} />}
         </span>
diff --git a/server/sonar-web/src/main/js/components/controls/HomePageSelect.tsx b/server/sonar-web/src/main/js/components/controls/HomePageSelect.tsx
index 563e250a7c2..80bbca72bcb 100644
--- a/server/sonar-web/src/main/js/components/controls/HomePageSelect.tsx
+++ b/server/sonar-web/src/main/js/components/controls/HomePageSelect.tsx
@@ -82,7 +82,8 @@ export class HomePageSelect extends React.PureComponent<Props> {
           <span
             aria-label={tooltip}
             className={classNames('display-inline-block', className)}
-            role="img">
+            role="img"
+          >
             <HomeIcon filled={isChecked} />
           </span>
         ) : (
@@ -90,7 +91,8 @@ export class HomePageSelect extends React.PureComponent<Props> {
             aria-label={tooltip}
             className={classNames('link-no-underline', 'set-homepage-link', className)}
             onClick={isChecked ? this.handleReset : this.handleClick}
-            innerRef={node => (this.buttonNode = node)}>
+            innerRef={(node) => (this.buttonNode = node)}
+          >
             <HomeIcon filled={isChecked} />
           </ButtonLink>
         )}
diff --git a/server/sonar-web/src/main/js/components/controls/IdentityProviderLink.tsx b/server/sonar-web/src/main/js/components/controls/IdentityProviderLink.tsx
index c6be4c1900c..b0c292abba1 100644
--- a/server/sonar-web/src/main/js/components/controls/IdentityProviderLink.tsx
+++ b/server/sonar-web/src/main/js/components/controls/IdentityProviderLink.tsx
@@ -42,7 +42,7 @@ export default function IdentityProviderLink({
   name,
   onClick,
   small,
-  url
+  url,
 }: Props) {
   const size = small ? 14 : 20;
 
@@ -55,7 +55,8 @@ export default function IdentityProviderLink({
       )}
       href={url}
       onClick={onClick}
-      style={{ backgroundColor }}>
+      style={{ backgroundColor }}
+    >
       <img alt={name} height={size} src={getBaseUrl() + iconPath} width={size} />
       {children}
     </a>
diff --git a/server/sonar-web/src/main/js/components/controls/ListFooter.tsx b/server/sonar-web/src/main/js/components/controls/ListFooter.tsx
index 81670150f14..bca6af49eba 100644
--- a/server/sonar-web/src/main/js/components/controls/ListFooter.tsx
+++ b/server/sonar-web/src/main/js/components/controls/ListFooter.tsx
@@ -47,7 +47,7 @@ export default function ListFooter(props: ListFooterProps) {
     needReload,
     total,
     pageSize,
-    ready = true
+    ready = true,
   } = props;
 
   const rootNode = React.useRef<HTMLDivElement>(null);
@@ -83,7 +83,8 @@ export default function ListFooter(props: ListFooterProps) {
         className="spacer-left"
         disabled={loading}
         data-test="show-more"
-        onClick={onLoadMore}>
+        onClick={onLoadMore}
+      >
         {translate('show_more')}
       </Button>
     );
@@ -97,7 +98,8 @@ export default function ListFooter(props: ListFooterProps) {
         'list-footer spacer-top note text-center',
         { 'new-loading': !ready },
         className
-      )}>
+      )}
+    >
       {total !== undefined
         ? translateWithParameters(
             'x_of_y_shown',
diff --git a/server/sonar-web/src/main/js/components/controls/Modal.tsx b/server/sonar-web/src/main/js/components/controls/Modal.tsx
index 49349f98a37..a7a21041866 100644
--- a/server/sonar-web/src/main/js/components/controls/Modal.tsx
+++ b/server/sonar-web/src/main/js/components/controls/Modal.tsx
@@ -66,7 +66,7 @@ export default function Modal(props: Props) {
       className={classNames('modal', {
         'modal-small': props.size === 'small',
         'modal-medium': props.size === 'medium',
-        'modal-large': props.size === 'large'
+        'modal-large': props.size === 'large',
       })}
       isOpen={true}
       overlayClassName={classNames('modal-overlay', { 'modal-no-backdrop': props.noBackdrop })}
diff --git a/server/sonar-web/src/main/js/components/controls/ModalButton.tsx b/server/sonar-web/src/main/js/components/controls/ModalButton.tsx
index 18ffeaedede..638d996137f 100644
--- a/server/sonar-web/src/main/js/components/controls/ModalButton.tsx
+++ b/server/sonar-web/src/main/js/components/controls/ModalButton.tsx
@@ -71,7 +71,7 @@ export default class ModalButton extends React.PureComponent<Props, State> {
       <>
         {this.props.children({
           onClick: this.handleButtonClick,
-          onFormSubmit: this.handleFormSubmit
+          onFormSubmit: this.handleFormSubmit,
         })}
         {this.state.modal && this.props.modal({ onClose: this.handleCloseModal })}
       </>
diff --git a/server/sonar-web/src/main/js/components/controls/Radio.tsx b/server/sonar-web/src/main/js/components/controls/Radio.tsx
index 08891b07b67..25c4c45ee99 100644
--- a/server/sonar-web/src/main/js/components/controls/Radio.tsx
+++ b/server/sonar-web/src/main/js/components/controls/Radio.tsx
@@ -53,7 +53,8 @@ export default class Radio extends React.PureComponent<Props> {
         )}
         href="#"
         onClick={this.handleClick}
-        role="radio">
+        role="radio"
+      >
         <i className={classNames('icon-radio', 'spacer-right', { 'is-checked': checked })} />
         {children}
       </a>
diff --git a/server/sonar-web/src/main/js/components/controls/RadioCard.tsx b/server/sonar-web/src/main/js/components/controls/RadioCard.tsx
index 001ddf02692..7ebf056fe07 100644
--- a/server/sonar-web/src/main/js/components/controls/RadioCard.tsx
+++ b/server/sonar-web/src/main/js/components/controls/RadioCard.tsx
@@ -48,7 +48,7 @@ export default function RadioCard(props: Props) {
     recommended,
     selected,
     titleInfo,
-    vertical = false
+    vertical = false,
   } = props;
   const isActionable = Boolean(onClick);
   return (
@@ -60,13 +60,14 @@ export default function RadioCard(props: Props) {
           'radio-card-actionable': isActionable,
           'radio-card-vertical': vertical,
           disabled,
-          selected
+          selected,
         },
         className
       )}
       onClick={isActionable && !disabled ? onClick : undefined}
       role="radio"
-      tabIndex={0}>
+      tabIndex={0}
+    >
       <h2 className="radio-card-header big-spacer-bottom">
         <span className="display-flex-center link-radio">
           {isActionable && (
diff --git a/server/sonar-web/src/main/js/components/controls/ReloadButton.tsx b/server/sonar-web/src/main/js/components/controls/ReloadButton.tsx
index 8e19ad5708a..ef0e42fa4a3 100644
--- a/server/sonar-web/src/main/js/components/controls/ReloadButton.tsx
+++ b/server/sonar-web/src/main/js/components/controls/ReloadButton.tsx
@@ -43,7 +43,8 @@ export default class ReloadButton extends React.PureComponent<Props> {
         <a
           className={classNames('link-no-underline', this.props.className)}
           href="#"
-          onClick={this.handleClick}>
+          onClick={this.handleClick}
+        >
           {
             <svg height="24" viewBox="0 0 18 24" width="18">
               <path
diff --git a/server/sonar-web/src/main/js/components/controls/SearchBox.tsx b/server/sonar-web/src/main/js/components/controls/SearchBox.tsx
index 285206bda3e..f4f9abec6f9 100644
--- a/server/sonar-web/src/main/js/components/controls/SearchBox.tsx
+++ b/server/sonar-web/src/main/js/components/controls/SearchBox.tsx
@@ -126,7 +126,7 @@ export default class SearchBox extends React.PureComponent<Props, State> {
     const { value } = this.state;
 
     const inputClassName = classNames('search-box-input', {
-      touched: value.length > 0 && (!minLength || minLength > value.length)
+      touched: value.length > 0 && (!minLength || minLength > value.length),
     });
 
     const tooShort = minLength !== undefined && value.length > 0 && value.length < minLength;
@@ -139,7 +139,8 @@ export default class SearchBox extends React.PureComponent<Props, State> {
           tooShort && minLength !== undefined
             ? translateWithParameters('select2.tooShort', minLength)
             : ''
-        }>
+        }
+      >
         <input
           aria-label={translate('search_verb')}
           autoComplete="off"
diff --git a/server/sonar-web/src/main/js/components/controls/Select.tsx b/server/sonar-web/src/main/js/components/controls/Select.tsx
index 55a994fdd59..ed506b3e37d 100644
--- a/server/sonar-web/src/main/js/components/controls/Select.tsx
+++ b/server/sonar-web/src/main/js/components/controls/Select.tsx
@@ -28,11 +28,11 @@ import ReactSelect, {
   NamedProps,
   OptionProps,
   OptionTypeBase,
-  StylesConfig
+  StylesConfig,
 } from 'react-select';
 import AsyncReactSelect, { AsyncProps } from 'react-select/async';
 import AsyncCreatableReactSelect, {
-  Props as AsyncCreatableProps
+  Props as AsyncCreatableProps,
 } from 'react-select/async-creatable';
 import { LoadingIndicatorProps } from 'react-select/src/components/indicators';
 import { MultiValueRemoveProps } from 'react-select/src/components/MultiValue';
@@ -119,7 +119,7 @@ export default class Select<
           ...this.props.components,
           DropdownIndicator: dropdownIndicator,
           ClearIndicator: clearIndicator,
-          MultiValueRemove: multiValueRemove
+          MultiValueRemove: multiValueRemove,
         }}
       />
     );
@@ -140,7 +140,7 @@ export function CreatableSelect<
         DropdownIndicator: dropdownIndicator,
         ClearIndicator: clearIndicator,
         MultiValueRemove: multiValueRemove,
-        LoadingIndicator: loadingIndicator
+        LoadingIndicator: loadingIndicator,
       }}
     />
   );
@@ -162,7 +162,7 @@ export function SearchSelect<
         DropdownIndicator: dropdownIndicator,
         ClearIndicator: clearIndicator,
         MultiValueRemove: multiValueRemove,
-        LoadingIndicator: loadingIndicator
+        LoadingIndicator: loadingIndicator,
       }}
     />
   );
@@ -182,7 +182,7 @@ export function selectStyle<
       verticalAlign: 'middle',
       fontSize: '12px',
       textAlign: 'left',
-      width: '100%'
+      width: '100%',
     }),
     control: (_provided, state) => ({
       position: 'relative',
@@ -198,7 +198,7 @@ export function selectStyle<
       color: `${colors.baseFontColor}`,
       cursor: 'default',
       outline: 'none',
-      padding: props?.large ? '4px 0px' : '0'
+      padding: props?.large ? '4px 0px' : '0',
     }),
     singleValue: () => ({
       bottom: 0,
@@ -213,13 +213,13 @@ export function selectStyle<
       maxWidth: '100%',
       overflow: 'hidden',
       textOverflow: 'ellipsis',
-      whiteSpace: 'nowrap'
+      whiteSpace: 'nowrap',
     }),
     valueContainer: (_provided, state) => {
       if (state.hasValue && state.isMulti) {
         return {
           lineHeight: '23px',
-          paddingLeft: '1px'
+          paddingLeft: '1px',
         };
       }
 
@@ -236,7 +236,7 @@ export function selectStyle<
         overflow: 'hidden',
         textOverflow: 'ellipsis',
         whiteSpace: 'nowrap',
-        display: 'flex'
+        display: 'flex',
       };
     },
     indicatorsContainer: (_provided, state) => ({
@@ -246,7 +246,7 @@ export function selectStyle<
       verticalAlign: 'middle',
       width: '20px',
       paddingRight: '5px',
-      flex: 1
+      flex: 1,
     }),
     multiValue: () => ({
       display: 'inline-block',
@@ -258,7 +258,7 @@ export function selectStyle<
       fontSize: '12px',
       lineHeight: '14px',
       margin: '1px 4px 1px 1px',
-      verticalAlign: 'top'
+      verticalAlign: 'top',
     }),
     multiValueLabel: () => ({
       display: 'inline-block',
@@ -269,7 +269,7 @@ export function selectStyle<
       maxWidth: 'calc(200px - 28px)',
       textOverflow: 'ellipsis',
       whiteSpace: 'nowrap',
-      verticalAlign: 'middle'
+      verticalAlign: 'middle',
     }),
     multiValueRemove: () => ({
       order: '-1',
@@ -279,7 +279,7 @@ export function selectStyle<
       padding: '1px 5px',
       fontSize: '12px',
       lineHeight: '14px',
-      display: 'inline-block'
+      display: 'inline-block',
     }),
     menu: () => ({
       borderBottomRightRadius: '4px',
@@ -295,17 +295,17 @@ export function selectStyle<
       width: '100%',
       zIndex: `${zIndexes.dropdownMenuZIndex}`,
       webkitOverflowScrolling: 'touch',
-      boxShadow: `${others.defaultShadow}`
+      boxShadow: `${others.defaultShadow}`,
     }),
     menuList: () => ({
       boxSizing: 'border-box',
       maxHeight: '198px',
       padding: '5px 0',
-      overflowY: 'auto'
+      overflowY: 'auto',
     }),
     placeholder: () => ({
       position: 'absolute',
-      color: '#666'
+      color: '#666',
     }),
     option: (_provided, state) => {
       let borderLeftColor = 'transparent';
@@ -335,21 +335,21 @@ export function selectStyle<
         cursor: state.isDisabled ? 'default' : 'pointer',
         whiteSpace: 'nowrap',
         overflow: 'hidden',
-        textOverflow: 'ellipsis'
+        textOverflow: 'ellipsis',
       };
     },
     input: () => ({
       display: 'flex',
-      alignItems: 'center'
+      alignItems: 'center',
     }),
     loadingIndicator: () => ({
       position: 'absolute',
       padding: '8px',
-      fontSize: '4px'
+      fontSize: '4px',
     }),
     noOptionsMessage: () => ({
       color: `${colors.gray60}`,
-      padding: '8px 10px'
-    })
+      padding: '8px 10px',
+    }),
   };
 }
diff --git a/server/sonar-web/src/main/js/components/controls/SelectList.tsx b/server/sonar-web/src/main/js/components/controls/SelectList.tsx
index 367e6b499cc..b7191b93de4 100644
--- a/server/sonar-web/src/main/js/components/controls/SelectList.tsx
+++ b/server/sonar-web/src/main/js/components/controls/SelectList.tsx
@@ -28,7 +28,7 @@ import SelectListListContainer from './SelectListListContainer';
 export enum SelectListFilter {
   All = 'all',
   Selected = 'selected',
-  Unselected = 'deselected'
+  Unselected = 'deselected',
 }
 
 interface Props {
@@ -75,9 +75,9 @@ export default class SelectList extends React.PureComponent<Props, State> {
         filter: SelectListFilter.Selected,
         page: 1,
         pageSize: props.pageSize ? props.pageSize : DEFAULT_PAGE_SIZE,
-        query: ''
+        query: '',
       },
-      loading: false
+      loading: false,
     };
   }
 
@@ -103,9 +103,9 @@ export default class SelectList extends React.PureComponent<Props, State> {
 
   search = (searchParams: Partial<SelectListSearchParams>) =>
     this.setState(
-      prevState => ({
+      (prevState) => ({
         loading: true,
-        lastSearchParams: { ...prevState.lastSearchParams, ...searchParams }
+        lastSearchParams: { ...prevState.lastSearchParams, ...searchParams },
       }),
       () =>
         this.props
@@ -113,7 +113,7 @@ export default class SelectList extends React.PureComponent<Props, State> {
             filter: this.getFilter(),
             page: this.props.withPaging ? this.state.lastSearchParams.page : undefined,
             pageSize: this.props.withPaging ? this.state.lastSearchParams.pageSize : undefined,
-            query: this.state.lastSearchParams.query
+            query: this.state.lastSearchParams.query,
           })
           .then(this.stopLoading)
           .catch(this.stopLoading)
@@ -126,7 +126,7 @@ export default class SelectList extends React.PureComponent<Props, State> {
   onLoadMore = () =>
     this.search({
       page:
-        this.state.lastSearchParams.page != null ? this.state.lastSearchParams.page + 1 : undefined
+        this.state.lastSearchParams.page != null ? this.state.lastSearchParams.page + 1 : undefined,
     });
 
   onReload = () => this.search({ page: 1 });
@@ -135,7 +135,7 @@ export default class SelectList extends React.PureComponent<Props, State> {
     const {
       labelSelected = translate('selected'),
       labelUnselected = translate('unselected'),
-      labelAll = translate('all')
+      labelAll = translate('all'),
     } = this.props;
     const { filter } = this.state.lastSearchParams;
 
@@ -151,7 +151,7 @@ export default class SelectList extends React.PureComponent<Props, State> {
               options={[
                 { label: labelSelected, value: SelectListFilter.Selected },
                 { label: labelUnselected, value: SelectListFilter.Unselected },
-                { label: labelAll, value: SelectListFilter.All }
+                { label: labelAll, value: SelectListFilter.All },
               ]}
               value={filter}
             />
diff --git a/server/sonar-web/src/main/js/components/controls/SelectListListContainer.tsx b/server/sonar-web/src/main/js/components/controls/SelectListListContainer.tsx
index 8644933ab51..561b831dbbe 100644
--- a/server/sonar-web/src/main/js/components/controls/SelectListListContainer.tsx
+++ b/server/sonar-web/src/main/js/components/controls/SelectListListContainer.tsx
@@ -71,11 +71,11 @@ export default class SelectListListContainer extends React.PureComponent<Props,
   handleBulkChange = (checked: boolean) => {
     this.setState({ loading: true });
     if (checked) {
-      Promise.all(this.props.elements.map(element => this.props.onSelect(element)))
+      Promise.all(this.props.elements.map((element) => this.props.onSelect(element)))
         .then(this.stopLoading)
         .catch(this.stopLoading);
     } else {
-      Promise.all(this.props.selectedElements.map(element => this.props.onUnselect(element)))
+      Promise.all(this.props.selectedElements.map((element) => this.props.onUnselect(element)))
         .then(this.stopLoading)
         .catch(this.stopLoading);
     }
@@ -90,7 +90,8 @@ export default class SelectListListContainer extends React.PureComponent<Props,
             checked={selectedElements.length > 0}
             disabled={this.state.loading || readOnly}
             onCheck={this.handleBulkChange}
-            thirdState={selectedElements.length > 0 && elements.length !== selectedElements.length}>
+            thirdState={selectedElements.length > 0 && elements.length !== selectedElements.length}
+          >
             <span className="big-spacer-left">
               {translate('bulk_change')}
               <DeferredSpinner className="spacer-left" loading={this.state.loading} timeout={10} />
@@ -112,7 +113,7 @@ export default class SelectListListContainer extends React.PureComponent<Props,
             elements.length > 0 &&
             filter === SelectListFilter.All &&
             this.renderBulkSelector()}
-          {elements.map(element => (
+          {elements.map((element) => (
             <SelectListListElement
               disabled={this.isDisabled(element)}
               element={element}
diff --git a/server/sonar-web/src/main/js/components/controls/SelectListListElement.tsx b/server/sonar-web/src/main/js/components/controls/SelectListListElement.tsx
index e35d9c8bbf3..0f836b26e98 100644
--- a/server/sonar-web/src/main/js/components/controls/SelectListListElement.tsx
+++ b/server/sonar-web/src/main/js/components/controls/SelectListListElement.tsx
@@ -69,16 +69,18 @@ export default class SelectListListElement extends React.PureComponent<Props, St
     return (
       <li
         className={classNames('display-flex-center', {
-          'select-list-list-disabled': this.props.disabled
-        })}>
+          'select-list-list-disabled': this.props.disabled,
+        })}
+      >
         <Checkbox
           checked={this.props.selected}
           className={classNames('select-list-list-checkbox flex-1', {
-            active: this.props.active
+            active: this.props.active,
           })}
           disabled={this.props.disabled}
           loading={this.state.loading}
-          onCheck={this.handleCheck}>
+          onCheck={this.handleCheck}
+        >
           <span className="little-spacer-left">{item}</span>
         </Checkbox>
         {extra && <span className="select-list-list-extra">{extra}</span>}
diff --git a/server/sonar-web/src/main/js/components/controls/SimpleModal.tsx b/server/sonar-web/src/main/js/components/controls/SimpleModal.tsx
index e8006252fc6..2be3cd5dc2d 100644
--- a/server/sonar-web/src/main/js/components/controls/SimpleModal.tsx
+++ b/server/sonar-web/src/main/js/components/controls/SimpleModal.tsx
@@ -93,7 +93,7 @@ export default class SimpleModal extends React.Component<Props, State> {
           onCloseClick: this.handleCloseClick,
           onFormSubmit: this.handleFormSubmit,
           onSubmitClick: this.handleSubmitClick,
-          submitting: this.state.submitting
+          submitting: this.state.submitting,
         })}
       </Modal>
     );
diff --git a/server/sonar-web/src/main/js/components/controls/Toggle.tsx b/server/sonar-web/src/main/js/components/controls/Toggle.tsx
index da1d5f832a4..cd797edc0ea 100644
--- a/server/sonar-web/src/main/js/components/controls/Toggle.tsx
+++ b/server/sonar-web/src/main/js/components/controls/Toggle.tsx
@@ -54,7 +54,8 @@ export default class Toggle extends React.PureComponent<Props> {
       <Button className={className} disabled={disabled} name={name} onClick={this.handleClick}>
         <div
           aria-label={ariaLabel ?? translate(value ? 'on' : 'off')}
-          className="boolean-toggle-handle">
+          className="boolean-toggle-handle"
+        >
           <CheckIcon size={12} />
         </div>
       </Button>
diff --git a/server/sonar-web/src/main/js/components/controls/Toggler.tsx b/server/sonar-web/src/main/js/components/controls/Toggler.tsx
index e824dde5841..3413386cd29 100644
--- a/server/sonar-web/src/main/js/components/controls/Toggler.tsx
+++ b/server/sonar-web/src/main/js/components/controls/Toggler.tsx
@@ -42,7 +42,7 @@ export default class Toggler extends React.Component<Props> {
       closeOnEscape = true,
       closeOnFocusOut = true,
       onRequestClose,
-      overlay
+      overlay,
     } = this.props;
 
     let renderedOverlay = overlay;
diff --git a/server/sonar-web/src/main/js/components/controls/Tooltip.tsx b/server/sonar-web/src/main/js/components/controls/Tooltip.tsx
index 842184aacef..eafc1dc2099 100644
--- a/server/sonar-web/src/main/js/components/controls/Tooltip.tsx
+++ b/server/sonar-web/src/main/js/components/controls/Tooltip.tsx
@@ -58,7 +58,7 @@ const FLIP_MAP: { [key in Placement]: Placement } = {
   left: 'right',
   right: 'left',
   top: 'bottom',
-  bottom: 'top'
+  bottom: 'top',
 };
 
 function isMeasured(state: State): state is OwnState & Measurements {
@@ -85,7 +85,7 @@ export class TooltipInner extends React.Component<TooltipProps, State> {
   id: string;
 
   static defaultProps = {
-    mouseEnterDelay: 0.1
+    mouseEnterDelay: 0.1,
   };
 
   constructor(props: TooltipProps) {
@@ -93,7 +93,7 @@ export class TooltipInner extends React.Component<TooltipProps, State> {
     this.state = {
       flipped: false,
       placement: props.placement,
-      visible: props.visible !== undefined ? props.visible : false
+      visible: props.visible !== undefined ? props.visible : false,
     };
     this.id = uniqueId('tooltip-');
     this.throttledPositionTooltip = throttle(this.positionTooltip, 10);
@@ -225,7 +225,7 @@ export class TooltipInner extends React.Component<TooltipProps, State> {
         left: window.pageXOffset + left,
         top: window.pageYOffset + top,
         width,
-        height
+        height,
       });
     }
   };
@@ -237,7 +237,7 @@ export class TooltipInner extends React.Component<TooltipProps, State> {
       top: undefined,
       width: undefined,
       height: undefined,
-      placement: this.props.placement
+      placement: this.props.placement,
     });
   };
 
@@ -335,7 +335,7 @@ export class TooltipInner extends React.Component<TooltipProps, State> {
             // Set height to undefined to force ScreenPositionFixer to
             // re-compute our positioning.
             height: undefined,
-            placement: FLIP_MAP[placement]
+            placement: FLIP_MAP[placement],
           }),
           () => {
             if (this.state.visible) {
@@ -357,7 +357,7 @@ export class TooltipInner extends React.Component<TooltipProps, State> {
           left: this.state.left + leftFix,
           top: this.state.top + topFix,
           width: this.state.width,
-          height: this.state.height
+          height: this.state.height,
         }
       : undefined;
 
@@ -367,7 +367,8 @@ export class TooltipInner extends React.Component<TooltipProps, State> {
         onPointerEnter={this.handleOverlayMouseEnter}
         onPointerLeave={this.handleOverlayMouseLeave}
         ref={this.tooltipNodeRef}
-        style={style}>
+        style={style}
+      >
         <div className={`${classNameSpace}-inner`} id={this.id}>
           {this.props.overlay}
         </div>
@@ -398,7 +399,7 @@ export class TooltipInner extends React.Component<TooltipProps, State> {
           // See https://sarahmhigley.com/writing/tooltips-in-wcag-21/
           // See https://css-tricks.com/accessible-svgs/
           'aria-describedby': isVisible ? this.id : undefined,
-          'aria-labelledby': isVisible ? this.id : undefined
+          'aria-labelledby': isVisible ? this.id : undefined,
         })}
         {isVisible && (
           <EscKeydownHandler onKeydown={this.handleBlur}>
diff --git a/server/sonar-web/src/main/js/components/controls/ValidationForm.tsx b/server/sonar-web/src/main/js/components/controls/ValidationForm.tsx
index a958bcea345..257378367c4 100644
--- a/server/sonar-web/src/main/js/components/controls/ValidationForm.tsx
+++ b/server/sonar-web/src/main/js/components/controls/ValidationForm.tsx
@@ -61,7 +61,8 @@ export default class ValidationForm<V extends FormikValues> extends React.Compon
         initialValues={this.props.initialValues}
         onSubmit={this.handleSubmit}
         validate={this.props.validate}
-        validateOnMount={true}>
+        validateOnMount={true}
+      >
         {({ handleSubmit, ...props }) => (
           <form onSubmit={handleSubmit}>{this.props.children(props)}</form>
         )}
diff --git a/server/sonar-web/src/main/js/components/controls/ValidationInput.tsx b/server/sonar-web/src/main/js/components/controls/ValidationInput.tsx
index 1bf1fe419df..673db9eea54 100644
--- a/server/sonar-web/src/main/js/components/controls/ValidationInput.tsx
+++ b/server/sonar-web/src/main/js/components/controls/ValidationInput.tsx
@@ -40,7 +40,7 @@ export interface ValidationInputProps {
 
 export enum ValidationInputErrorPlacement {
   Right,
-  Bottom
+  Bottom,
 }
 
 export default function ValidationInput(props: ValidationInputProps) {
@@ -55,7 +55,7 @@ export default function ValidationInput(props: ValidationInputProps) {
     isInvalid,
     isValid,
     label,
-    required
+    required,
   } = props;
   const hasError = isInvalid && error !== undefined;
 
diff --git a/server/sonar-web/src/main/js/components/controls/ValidationModal.tsx b/server/sonar-web/src/main/js/components/controls/ValidationModal.tsx
index b7ce11c020a..4ad1eb99ceb 100644
--- a/server/sonar-web/src/main/js/components/controls/ValidationModal.tsx
+++ b/server/sonar-web/src/main/js/components/controls/ValidationModal.tsx
@@ -49,12 +49,14 @@ export default class ValidationModal<V extends FormikValues> extends React.PureC
         contentLabel={this.props.header}
         noBackdrop={this.props.noBackdrop}
         onRequestClose={this.props.onClose}
-        size={this.props.size}>
+        size={this.props.size}
+      >
         <ValidationForm
           initialValues={this.props.initialValues}
           onSubmit={this.handleSubmit}
-          validate={this.props.validate}>
-          {props => (
+          validate={this.props.validate}
+        >
+          {(props) => (
             <>
               <header className="modal-head">
                 <h2>{this.props.header}</h2>
@@ -66,7 +68,8 @@ export default class ValidationModal<V extends FormikValues> extends React.PureC
                 <DeferredSpinner className="spacer-right" loading={props.isSubmitting} />
                 <SubmitButton
                   className={this.props.isDestructive ? 'button-red' : undefined}
-                  disabled={props.isSubmitting || !props.isValid || !props.dirty}>
+                  disabled={props.isSubmitting || !props.isValid || !props.dirty}
+                >
                   {this.props.confirmButtonText}
                 </SubmitButton>
                 <ResetButtonLink disabled={props.isSubmitting} onClick={this.props.onClose}>
diff --git a/server/sonar-web/src/main/js/components/controls/__tests__/ActionsDropdown-test.tsx b/server/sonar-web/src/main/js/components/controls/__tests__/ActionsDropdown-test.tsx
index 60c7d6a00e3..498e42bfc7e 100644
--- a/server/sonar-web/src/main/js/components/controls/__tests__/ActionsDropdown-test.tsx
+++ b/server/sonar-web/src/main/js/components/controls/__tests__/ActionsDropdown-test.tsx
@@ -24,7 +24,7 @@ import { PopupPlacement } from '../../ui/popups';
 import ActionsDropdown, {
   ActionsDropdownDivider,
   ActionsDropdownItem,
-  ActionsDropdownProps
+  ActionsDropdownProps,
 } from '../ActionsDropdown';
 
 describe('ActionsDropdown', () => {
@@ -41,7 +41,8 @@ describe('ActionsDropdown', () => {
         overlayPlacement={PopupPlacement.Bottom}
         small={true}
         toggleClassName="bar"
-        {...props}>
+        {...props}
+      >
         <span>Hello world</span>
       </ActionsDropdown>
     );
diff --git a/server/sonar-web/src/main/js/components/controls/__tests__/BoxedGroupAccordion-test.tsx b/server/sonar-web/src/main/js/components/controls/__tests__/BoxedGroupAccordion-test.tsx
index 11092c58b2d..9631e02ac5c 100644
--- a/server/sonar-web/src/main/js/components/controls/__tests__/BoxedGroupAccordion-test.tsx
+++ b/server/sonar-web/src/main/js/components/controls/__tests__/BoxedGroupAccordion-test.tsx
@@ -45,7 +45,8 @@ function renderDeliveryAccordion(renderHeader?: () => React.ReactNode) {
         onClick={() => setOpen(!open)}
         open={open}
         title="test"
-        renderHeader={renderHeader}>
+        renderHeader={renderHeader}
+      >
         <div>children</div>
       </BoxedGroupAccordion>
     );
diff --git a/server/sonar-web/src/main/js/components/controls/__tests__/BoxedTabs-test.tsx b/server/sonar-web/src/main/js/components/controls/__tests__/BoxedTabs-test.tsx
index a2cab636bb4..f8fbc3fb301 100644
--- a/server/sonar-web/src/main/js/components/controls/__tests__/BoxedTabs-test.tsx
+++ b/server/sonar-web/src/main/js/components/controls/__tests__/BoxedTabs-test.tsx
@@ -29,10 +29,7 @@ it('should call onSelect when a tab is clicked', () => {
   const onSelect = jest.fn();
   const wrapper = shallowRender({ onSelect });
 
-  wrapper
-    .find('Styled(button)')
-    .get(1)
-    .props.onClick();
+  wrapper.find('Styled(button)').get(1).props.onClick();
 
   expect(onSelect).toHaveBeenCalledWith('b');
 });
@@ -60,8 +57,8 @@ function dom(overrides: Partial<BoxedTabsProps<string>>) {
             <span>
               Complex label <strong>!!!</strong>
             </span>
-          )
-        }
+          ),
+        },
       ]}
       {...overrides}
     />
diff --git a/server/sonar-web/src/main/js/components/controls/__tests__/ButtonToggle-test.tsx b/server/sonar-web/src/main/js/components/controls/__tests__/ButtonToggle-test.tsx
index 0c0727c20db..21c80ba7464 100644
--- a/server/sonar-web/src/main/js/components/controls/__tests__/ButtonToggle-test.tsx
+++ b/server/sonar-web/src/main/js/components/controls/__tests__/ButtonToggle-test.tsx
@@ -56,7 +56,7 @@ function render(props?: Partial<ButtonToggleProps>) {
       options={[
         { value: 'one', label: 'first' },
         { value: 'two', label: 'second' },
-        { value: 'tree', label: 'third' }
+        { value: 'tree', label: 'third' },
       ]}
       value="two"
       {...props}
diff --git a/server/sonar-web/src/main/js/components/controls/__tests__/Checkbox-test.tsx b/server/sonar-web/src/main/js/components/controls/__tests__/Checkbox-test.tsx
index 0bce5a8b967..910aa532e64 100644
--- a/server/sonar-web/src/main/js/components/controls/__tests__/Checkbox-test.tsx
+++ b/server/sonar-web/src/main/js/components/controls/__tests__/Checkbox-test.tsx
@@ -26,7 +26,7 @@ import Checkbox from '../Checkbox';
 
 describe.each([
   { children: null, describtion: 'with no children' },
-  { children: <a>child</a>, describtion: 'with children' }
+  { children: <a>child</a>, describtion: 'with children' },
 ])('Checkbox $describtion', ({ children }) => {
   it('should call check function', async () => {
     const user = userEvent.setup();
@@ -36,7 +36,7 @@ describe.each([
       children,
       onCheck,
       checked: false,
-      title: 'title'
+      title: 'title',
     });
     await user.click(screen.getByRole('checkbox', { name: 'me' }));
     expect(onCheck).toHaveBeenCalledWith(true, undefined);
@@ -69,7 +69,7 @@ function renderCheckbox(override?: Partial<Checkbox['props']>) {
   const { rerender } = renderComponent(
     <Checkbox checked={true} onCheck={jest.fn()} {...override} />
   );
-  return function(reoverride?: Partial<Checkbox['props']>) {
+  return function (reoverride?: Partial<Checkbox['props']>) {
     rerender(<Checkbox checked={true} onCheck={jest.fn()} {...override} {...reoverride} />);
   };
 }
diff --git a/server/sonar-web/src/main/js/components/controls/__tests__/ComponentReportActions-test.tsx b/server/sonar-web/src/main/js/components/controls/__tests__/ComponentReportActions-test.tsx
index 6bade668517..b4db523e774 100644
--- a/server/sonar-web/src/main/js/components/controls/__tests__/ComponentReportActions-test.tsx
+++ b/server/sonar-web/src/main/js/components/controls/__tests__/ComponentReportActions-test.tsx
@@ -22,7 +22,7 @@ import * as React from 'react';
 import {
   getReportStatus,
   subscribeToEmailReport,
-  unsubscribeFromEmailReport
+  unsubscribeFromEmailReport,
 } from '../../../api/component-report';
 import { addGlobalSuccessMessage } from '../../../helpers/globalMessages';
 import { mockBranch } from '../../../helpers/mocks/branch-like';
@@ -41,16 +41,16 @@ jest.mock('../../../api/component-report', () => ({
       jest.requireActual('../../../helpers/mocks/component-report').mockComponentReportStatus()
     ),
   subscribeToEmailReport: jest.fn().mockResolvedValue(undefined),
-  unsubscribeFromEmailReport: jest.fn().mockResolvedValue(undefined)
+  unsubscribeFromEmailReport: jest.fn().mockResolvedValue(undefined),
 }));
 
 jest.mock('../../../helpers/system', () => ({
   ...jest.requireActual('../../../helpers/system'),
-  getBaseUrl: jest.fn().mockReturnValue('baseUrl')
+  getBaseUrl: jest.fn().mockReturnValue('baseUrl'),
 }));
 
 jest.mock('../../../helpers/globalMessages', () => ({
-  addGlobalSuccessMessage: jest.fn()
+  addGlobalSuccessMessage: jest.fn(),
 }));
 
 beforeEach(jest.clearAllMocks);
diff --git a/server/sonar-web/src/main/js/components/controls/__tests__/ComponentReportActionsRenderer-test.tsx b/server/sonar-web/src/main/js/components/controls/__tests__/ComponentReportActionsRenderer-test.tsx
index 3388abbaadd..b73bd5ee98f 100644
--- a/server/sonar-web/src/main/js/components/controls/__tests__/ComponentReportActionsRenderer-test.tsx
+++ b/server/sonar-web/src/main/js/components/controls/__tests__/ComponentReportActionsRenderer-test.tsx
@@ -22,7 +22,7 @@ import * as React from 'react';
 import { mockComponent } from '../../../helpers/mocks/component';
 import { ComponentQualifier } from '../../../types/component';
 import ComponentReportActionsRenderer, {
-  ComponentReportActionsRendererProps
+  ComponentReportActionsRendererProps,
 } from '../ComponentReportActionsRenderer';
 
 it('should render correctly', () => {
diff --git a/server/sonar-web/src/main/js/components/controls/__tests__/ConfirmButton-test.tsx b/server/sonar-web/src/main/js/components/controls/__tests__/ConfirmButton-test.tsx
index 2707a807ec7..abf04c16270 100644
--- a/server/sonar-web/src/main/js/components/controls/__tests__/ConfirmButton-test.tsx
+++ b/server/sonar-web/src/main/js/components/controls/__tests__/ConfirmButton-test.tsx
@@ -27,9 +27,7 @@ it('should display a modal button', () => {
 
 it('should display a confirm modal', () => {
   expect(
-    shallowRender()
-      .find('ModalButton')
-      .prop<Function>('modal')({ onClose: jest.fn() })
+    shallowRender().find('ModalButton').prop<Function>('modal')({ onClose: jest.fn() })
   ).toMatchSnapshot();
 });
 
@@ -39,7 +37,8 @@ function shallowRender() {
       confirmButtonText="submit"
       modalBody={<div />}
       modalHeader="title"
-      onConfirm={jest.fn()}>
+      onConfirm={jest.fn()}
+    >
       {() => 'Confirm button'}
     </ConfirmButton>
   );
diff --git a/server/sonar-web/src/main/js/components/controls/__tests__/ConfirmModal-test.tsx b/server/sonar-web/src/main/js/components/controls/__tests__/ConfirmModal-test.tsx
index 8a7ca0ccd4e..8fcfe25a931 100644
--- a/server/sonar-web/src/main/js/components/controls/__tests__/ConfirmModal-test.tsx
+++ b/server/sonar-web/src/main/js/components/controls/__tests__/ConfirmModal-test.tsx
@@ -29,7 +29,8 @@ it('should render correctly', () => {
       confirmData="data"
       header="title"
       onClose={jest.fn()}
-      onConfirm={jest.fn()}>
+      onConfirm={jest.fn()}
+    >
       <p>My confirm message</p>
     </ConfirmModal>
   );
@@ -46,7 +47,8 @@ it('should confirm and close after confirm', async () => {
       confirmData="data"
       header="title"
       onClose={onClose}
-      onConfirm={onConfirm}>
+      onConfirm={onConfirm}
+    >
       <p>My confirm message</p>
     </ConfirmModal>
   );
diff --git a/server/sonar-web/src/main/js/components/controls/__tests__/Favorite-test.tsx b/server/sonar-web/src/main/js/components/controls/__tests__/Favorite-test.tsx
index cfb77afaab3..1595c420663 100644
--- a/server/sonar-web/src/main/js/components/controls/__tests__/Favorite-test.tsx
+++ b/server/sonar-web/src/main/js/components/controls/__tests__/Favorite-test.tsx
@@ -26,7 +26,7 @@ import Favorite from '../Favorite';
 
 jest.mock('../../../api/favorites', () => ({
   addFavorite: jest.fn().mockResolvedValue(null),
-  removeFavorite: jest.fn().mockResolvedValue(null)
+  removeFavorite: jest.fn().mockResolvedValue(null),
 }));
 
 it('renders and behaves correctly', async () => {
diff --git a/server/sonar-web/src/main/js/components/controls/__tests__/HomePageSelect-test.tsx b/server/sonar-web/src/main/js/components/controls/__tests__/HomePageSelect-test.tsx
index 2dca15c10d9..58f508c5b5d 100644
--- a/server/sonar-web/src/main/js/components/controls/__tests__/HomePageSelect-test.tsx
+++ b/server/sonar-web/src/main/js/components/controls/__tests__/HomePageSelect-test.tsx
@@ -25,7 +25,7 @@ import { renderComponent } from '../../../helpers/testReactTestingUtils';
 import { DEFAULT_HOMEPAGE, HomePageSelect } from '../HomePageSelect';
 
 jest.mock('../../../api/users', () => ({
-  setHomePage: jest.fn().mockResolvedValue(null)
+  setHomePage: jest.fn().mockResolvedValue(null),
 }));
 
 it('renders and behaves correctly', async () => {
diff --git a/server/sonar-web/src/main/js/components/controls/__tests__/IdentityProviderLink-test.tsx b/server/sonar-web/src/main/js/components/controls/__tests__/IdentityProviderLink-test.tsx
index f0677f7cd57..1003b2a5f5b 100644
--- a/server/sonar-web/src/main/js/components/controls/__tests__/IdentityProviderLink-test.tsx
+++ b/server/sonar-web/src/main/js/components/controls/__tests__/IdentityProviderLink-test.tsx
@@ -25,7 +25,7 @@ const identityProvider = {
   backgroundColor: '#000',
   iconPath: '/some/path',
   key: 'foo',
-  name: 'Foo'
+  name: 'Foo',
 };
 
 it('should render correctly', () => {
@@ -35,7 +35,8 @@ it('should render correctly', () => {
         backgroundColor={identityProvider.backgroundColor}
         iconPath={identityProvider.iconPath}
         name={identityProvider.name}
-        url="/url/foo/bar">
+        url="/url/foo/bar"
+      >
         Link text
       </IdentityProviderLink>
     )
diff --git a/server/sonar-web/src/main/js/components/controls/__tests__/ListFooter-test.tsx b/server/sonar-web/src/main/js/components/controls/__tests__/ListFooter-test.tsx
index 24264836697..aad0490217c 100644
--- a/server/sonar-web/src/main/js/components/controls/__tests__/ListFooter-test.tsx
+++ b/server/sonar-web/src/main/js/components/controls/__tests__/ListFooter-test.tsx
@@ -44,7 +44,7 @@ it.each([
   [undefined, 60, 30, true],
   [undefined, 45, 30, false],
   [undefined, 60, undefined, false],
-  [60, 60, 30, false]
+  [60, 60, 30, false],
 ])(
   'handle showing load more button based on total, count and pageSize',
   (total, count, pageSize, expected) => {
diff --git a/server/sonar-web/src/main/js/components/controls/__tests__/ModalValidationField-test.tsx b/server/sonar-web/src/main/js/components/controls/__tests__/ModalValidationField-test.tsx
index a5f98a7c83d..dcdeb6f480d 100644
--- a/server/sonar-web/src/main/js/components/controls/__tests__/ModalValidationField-test.tsx
+++ b/server/sonar-web/src/main/js/components/controls/__tests__/ModalValidationField-test.tsx
@@ -42,7 +42,8 @@ function getWrapper(props = {}) {
       // eslint-disable-next-line jsx-a11y/label-has-associated-control
       label={<label>Foo</label>}
       touched={true}
-      {...props}>
+      {...props}
+    >
       {({ className }) => <input className={className} type="text" />}
     </ModalValidationField>
   );
diff --git a/server/sonar-web/src/main/js/components/controls/__tests__/RadioCard-test.tsx b/server/sonar-web/src/main/js/components/controls/__tests__/RadioCard-test.tsx
index 97b17b4e971..0e6341e6700 100644
--- a/server/sonar-web/src/main/js/components/controls/__tests__/RadioCard-test.tsx
+++ b/server/sonar-web/src/main/js/components/controls/__tests__/RadioCard-test.tsx
@@ -37,7 +37,8 @@ it('should render correctly', () => {
         recommended="Recommended for you"
         title="Radio Card Vertical"
         titleInfo="info"
-        vertical={true}>
+        vertical={true}
+      >
         <div>content</div>
       </RadioCard>
     )
diff --git a/server/sonar-web/src/main/js/components/controls/__tests__/ScreenPositionFixer-test.tsx b/server/sonar-web/src/main/js/components/controls/__tests__/ScreenPositionFixer-test.tsx
index 02f61738769..9d563714386 100644
--- a/server/sonar-web/src/main/js/components/controls/__tests__/ScreenPositionFixer-test.tsx
+++ b/server/sonar-web/src/main/js/components/controls/__tests__/ScreenPositionFixer-test.tsx
@@ -29,7 +29,7 @@ jest.mock('lodash', () => {
 });
 
 jest.mock('react-dom', () => ({
-  findDOMNode: jest.fn()
+  findDOMNode: jest.fn(),
 }));
 
 beforeEach(() => {
diff --git a/server/sonar-web/src/main/js/components/controls/__tests__/Select-test.tsx b/server/sonar-web/src/main/js/components/controls/__tests__/Select-test.tsx
index 3360ccd64a1..de32f747f2c 100644
--- a/server/sonar-web/src/main/js/components/controls/__tests__/Select-test.tsx
+++ b/server/sonar-web/src/main/js/components/controls/__tests__/Select-test.tsx
@@ -24,7 +24,7 @@ import {
   GroupTypeBase,
   InputProps,
   OptionTypeBase,
-  Props as ReactSelectProps
+  Props as ReactSelectProps,
 } from 'react-select';
 import { LoadingIndicatorProps } from 'react-select/src/components/indicators';
 import { MultiValueRemoveProps } from 'react-select/src/components/MultiValue';
@@ -35,7 +35,7 @@ import Select, {
   dropdownIndicator,
   loadingIndicator,
   multiValueRemove,
-  SearchSelect
+  SearchSelect,
 } from '../Select';
 
 describe('Select', () => {
@@ -53,8 +53,8 @@ describe('Select', () => {
         isClearable: true,
         isLoading: true,
         components: {
-          Input: inputRenderer
-        }
+          Input: inputRenderer,
+        },
       })
     ).toMatchSnapshot('other props');
   });
@@ -91,7 +91,7 @@ describe('Select', () => {
 
 it.each([
   ['CreatableSelect', CreatableSelect],
-  ['SearchSelect', SearchSelect]
+  ['SearchSelect', SearchSelect],
 ])('should render %s correctly', (_name, Component) => {
   expect(
     shallow(<Component />)
diff --git a/server/sonar-web/src/main/js/components/controls/__tests__/SelectList-test.tsx b/server/sonar-web/src/main/js/components/controls/__tests__/SelectList-test.tsx
index 2d5ff57b332..2ca12230b5c 100644
--- a/server/sonar-web/src/main/js/components/controls/__tests__/SelectList-test.tsx
+++ b/server/sonar-web/src/main/js/components/controls/__tests__/SelectList-test.tsx
@@ -43,7 +43,7 @@ it('should display properly with advanced features', async () => {
     elementsTotalCount: 125,
     pageSize: 10,
     readOnly: true,
-    withPaging: true
+    withPaging: true,
   });
   await waitAndUpdate(wrapper);
 
@@ -73,7 +73,7 @@ it('should cancel filter selection when search is active', async () => {
     query: '',
     filter: SelectListFilter.Unselected,
     page: undefined,
-    pageSize: undefined
+    pageSize: undefined,
   });
   expect(wrapper).toMatchSnapshot();
 
@@ -83,7 +83,7 @@ it('should cancel filter selection when search is active', async () => {
     query,
     filter: SelectListFilter.All,
     page: undefined,
-    pageSize: undefined
+    pageSize: undefined,
   });
 
   await waitAndUpdate(wrapper);
@@ -94,7 +94,7 @@ it('should cancel filter selection when search is active', async () => {
     query: '',
     filter: SelectListFilter.Unselected,
     page: undefined,
-    pageSize: undefined
+    pageSize: undefined,
   });
 
   await waitAndUpdate(wrapper);
@@ -109,7 +109,7 @@ it('should display pagination element properly and call search method with corre
     query: '',
     filter: SelectListFilter.Selected,
     page: 1,
-    pageSize: 100
+    pageSize: 100,
   }); // Basic default call
 
   wrapper.instance().onLoadMore();
@@ -117,7 +117,7 @@ it('should display pagination element properly and call search method with corre
     query: '',
     filter: SelectListFilter.Selected,
     page: 2,
-    pageSize: 100
+    pageSize: 100,
   }); // Load more call
 
   wrapper.instance().onReload();
@@ -125,7 +125,7 @@ it('should display pagination element properly and call search method with corre
     query: '',
     filter: SelectListFilter.Selected,
     page: 1,
-    pageSize: 100
+    pageSize: 100,
   }); // Reload call
 
   wrapper.setProps({ needToReload: true });
diff --git a/server/sonar-web/src/main/js/components/controls/__tests__/SelectListListElement-test.tsx b/server/sonar-web/src/main/js/components/controls/__tests__/SelectListListElement-test.tsx
index bf6ac84422b..ebfe54248a0 100644
--- a/server/sonar-web/src/main/js/components/controls/__tests__/SelectListListElement-test.tsx
+++ b/server/sonar-web/src/main/js/components/controls/__tests__/SelectListListElement-test.tsx
@@ -37,7 +37,7 @@ it('should display a loader when checking', async () => {
 
 it('should correctly handle a render callback that returns 2 elements', () => {
   const wrapper = shallowRender({
-    renderElement: (foo: string) => [foo, 'extra info']
+    renderElement: (foo: string) => [foo, 'extra info'],
   });
   expect(wrapper.find('.select-list-list-extra').exists()).toBe(true);
 });
diff --git a/server/sonar-web/src/main/js/components/controls/__tests__/Toggler-test.tsx b/server/sonar-web/src/main/js/components/controls/__tests__/Toggler-test.tsx
index 4286593997b..9b5bb533153 100644
--- a/server/sonar-web/src/main/js/components/controls/__tests__/Toggler-test.tsx
+++ b/server/sonar-web/src/main/js/components/controls/__tests__/Toggler-test.tsx
@@ -34,7 +34,7 @@ afterAll(() => {
 const ui = {
   toggleButton: byRole('button', { name: 'toggle' }),
   outButton: byRole('button', { name: 'out' }),
-  overlayButton: byRole('button', { name: 'overlay' })
+  overlayButton: byRole('button', { name: 'overlay' }),
 };
 
 async function openToggler(user: UserEvent) {
@@ -58,7 +58,7 @@ it('should handle escape correclty', async () => {
     closeOnEscape: true,
     closeOnClick: false,
     closeOnClickOutside: false,
-    closeOnFocusOut: false
+    closeOnFocusOut: false,
   });
 
   await openToggler(user);
@@ -79,7 +79,7 @@ it('should handle focus correctly', async () => {
     closeOnEscape: false,
     closeOnClick: false,
     closeOnClickOutside: false,
-    closeOnFocusOut: true
+    closeOnFocusOut: true,
   });
 
   await openToggler(user);
@@ -100,7 +100,7 @@ it('should handle click correctly', async () => {
     closeOnEscape: false,
     closeOnClick: true,
     closeOnClickOutside: false,
-    closeOnFocusOut: false
+    closeOnFocusOut: false,
   });
 
   await openToggler(user);
@@ -126,7 +126,7 @@ it('should handle click outside correctly', async () => {
     closeOnEscape: false,
     closeOnClick: false,
     closeOnClickOutside: true,
-    closeOnFocusOut: false
+    closeOnFocusOut: false,
   });
 
   await openToggler(user);
@@ -184,7 +184,8 @@ function renderToggler(override?: Partial<Toggler['props']>) {
           onRequestClose={() => setOpen(false)}
           open={open}
           overlay={<button type="button">overlay</button>}
-          {...props}>
+          {...props}
+        >
           <button onClick={() => setOpen(true)} type="button">
             toggle
           </button>
@@ -195,7 +196,7 @@ function renderToggler(override?: Partial<Toggler['props']>) {
   }
 
   const { rerender } = render(<App {...override} />);
-  return function(reoverride: Partial<Toggler['props']>) {
+  return function (reoverride: Partial<Toggler['props']>) {
     return rerender(<App {...override} {...reoverride} />);
   };
 }
diff --git a/server/sonar-web/src/main/js/components/controls/__tests__/Tooltip-test.tsx b/server/sonar-web/src/main/js/components/controls/__tests__/Tooltip-test.tsx
index b4fc7e2ec11..252dd1c9b03 100644
--- a/server/sonar-web/src/main/js/components/controls/__tests__/Tooltip-test.tsx
+++ b/server/sonar-web/src/main/js/components/controls/__tests__/Tooltip-test.tsx
@@ -33,14 +33,14 @@ afterAll(() => {
 jest.mock('react-dom', () => {
   const actual = jest.requireActual('react-dom');
   return Object.assign({}, actual, {
-    findDOMNode: jest.fn().mockReturnValue(undefined)
+    findDOMNode: jest.fn().mockReturnValue(undefined),
   });
 });
 
 jest.mock('lodash', () => {
   const actual = jest.requireActual('lodash');
   return Object.assign({}, actual, {
-    uniqueId: jest.fn(prefix => `${prefix}1`)
+    uniqueId: jest.fn((prefix) => `${prefix}1`),
   });
 });
 
@@ -114,16 +114,16 @@ it('should adjust arrow position', () => {
   const wrapper = shallowRenderTooltipInner();
 
   expect(wrapper.instance().adjustArrowPosition('left', { leftFix: 10, topFix: 20 })).toEqual({
-    marginTop: -20
+    marginTop: -20,
   });
   expect(wrapper.instance().adjustArrowPosition('right', { leftFix: 10, topFix: 20 })).toEqual({
-    marginTop: -20
+    marginTop: -20,
   });
   expect(wrapper.instance().adjustArrowPosition('top', { leftFix: 10, topFix: 20 })).toEqual({
-    marginLeft: -10
+    marginLeft: -10,
   });
   expect(wrapper.instance().adjustArrowPosition('bottom', { leftFix: 10, topFix: 20 })).toEqual({
-    marginLeft: -10
+    marginLeft: -10,
   });
 });
 
diff --git a/server/sonar-web/src/main/js/components/controls/__tests__/ValidationInput-test.tsx b/server/sonar-web/src/main/js/components/controls/__tests__/ValidationInput-test.tsx
index 6fbb8f8c87a..e3eaa5b7cf9 100644
--- a/server/sonar-web/src/main/js/components/controls/__tests__/ValidationInput-test.tsx
+++ b/server/sonar-web/src/main/js/components/controls/__tests__/ValidationInput-test.tsx
@@ -21,7 +21,7 @@ import { shallow } from 'enzyme';
 import * as React from 'react';
 import ValidationInput, {
   ValidationInputErrorPlacement,
-  ValidationInputProps
+  ValidationInputProps,
 } from '../ValidationInput';
 
 it('should render correctly', () => {
@@ -33,7 +33,7 @@ it('should render correctly', () => {
       error: 'Field error message',
       isInvalid: true,
       isValid: false,
-      required: false
+      required: false,
     })
   ).toMatchSnapshot('with error');
   expect(
@@ -41,7 +41,7 @@ it('should render correctly', () => {
       error: 'Field error message',
       errorPlacement: ValidationInputErrorPlacement.Bottom,
       isInvalid: true,
-      isValid: false
+      isValid: false,
     })
   ).toMatchSnapshot('error under the input');
   expect(shallowRender({ id: undefined, label: undefined })).toMatchSnapshot('no label');
@@ -57,7 +57,8 @@ function shallowRender(props: Partial<ValidationInputProps> = {}) {
       isValid={true}
       label="Field label"
       required={true}
-      {...props}>
+      {...props}
+    >
       <div />
     </ValidationInput>
   );
diff --git a/server/sonar-web/src/main/js/components/controls/__tests__/ValidationModal-test.tsx b/server/sonar-web/src/main/js/components/controls/__tests__/ValidationModal-test.tsx
index 1be93af16b6..0c4b7fef5e6 100644
--- a/server/sonar-web/src/main/js/components/controls/__tests__/ValidationModal-test.tsx
+++ b/server/sonar-web/src/main/js/components/controls/__tests__/ValidationModal-test.tsx
@@ -26,12 +26,7 @@ import ValidationModal from '../ValidationModal';
 it('should render correctly', () => {
   const wrapper = shallowRender();
   expect(wrapper).toMatchSnapshot();
-  expect(
-    wrapper
-      .find(ValidationForm)
-      .dive()
-      .dive()
-  ).toMatchSnapshot();
+  expect(wrapper.find(ValidationForm).dive().dive()).toMatchSnapshot();
 });
 
 it('should handle submit', async () => {
@@ -57,8 +52,9 @@ function shallowRender(props: Partial<ValidationModal<{ field: string }>['props'
       onClose={jest.fn()}
       onSubmit={jest.fn()}
       validate={jest.fn()}
-      {...props}>
-      {props => (
+      {...props}
+    >
+      {(props) => (
         <input
           name="field"
           onBlur={props.handleBlur}
diff --git a/server/sonar-web/src/main/js/components/controls/__tests__/clipboard-test.tsx b/server/sonar-web/src/main/js/components/controls/__tests__/clipboard-test.tsx
index 075406a6a44..57544e2a986 100644
--- a/server/sonar-web/src/main/js/components/controls/__tests__/clipboard-test.tsx
+++ b/server/sonar-web/src/main/js/components/controls/__tests__/clipboard-test.tsx
@@ -25,7 +25,7 @@ import {
   ClipboardButton,
   ClipboardButtonProps,
   ClipboardIconButton,
-  ClipboardIconButtonProps
+  ClipboardIconButtonProps,
 } from '../clipboard';
 
 beforeAll(() => {
diff --git a/server/sonar-web/src/main/js/components/controls/clipboard.tsx b/server/sonar-web/src/main/js/components/controls/clipboard.tsx
index 34fe96012bd..9fabfa1844a 100644
--- a/server/sonar-web/src/main/js/components/controls/clipboard.tsx
+++ b/server/sonar-web/src/main/js/components/controls/clipboard.tsx
@@ -90,7 +90,7 @@ export class ClipboardBase extends React.PureComponent<Props, State> {
   render() {
     return this.props.children({
       setCopyButton: this.setCopyButton,
-      copySuccess: this.state.copySuccess
+      copySuccess: this.state.copySuccess,
     });
   }
 }
@@ -106,7 +106,7 @@ export function ClipboardButton({
   className,
   children,
   copyValue,
-  'aria-label': ariaLabel
+  'aria-label': ariaLabel,
 }: ClipboardButtonProps) {
   return (
     <ClipboardBase>
@@ -116,7 +116,8 @@ export function ClipboardButton({
             className={classNames('no-select', className)}
             data-clipboard-text={copyValue}
             innerRef={setCopyButton}
-            aria-label={ariaLabel ?? translate('copy_to_clipboard')}>
+            aria-label={ariaLabel ?? translate('copy_to_clipboard')}
+          >
             {children || (
               <>
                 <CopyIcon className="little-spacer-right" />
@@ -148,7 +149,8 @@ export function ClipboardIconButton(props: ClipboardIconButtonProps) {
             data-clipboard-text={copyValue}
             innerRef={setCopyButton}
             tooltip={translate(copySuccess ? 'copied_action' : 'copy_to_clipboard')}
-            tooltipProps={copySuccess ? { visible: copySuccess } : undefined}>
+            tooltipProps={copySuccess ? { visible: copySuccess } : undefined}
+          >
             <CopyIcon />
           </ButtonIcon>
         );
diff --git a/server/sonar-web/src/main/js/components/embed-docs-modal/EmbedDocsPopup.tsx b/server/sonar-web/src/main/js/components/embed-docs-modal/EmbedDocsPopup.tsx
index d1d5c932654..ccf35a87fae 100644
--- a/server/sonar-web/src/main/js/components/embed-docs-modal/EmbedDocsPopup.tsx
+++ b/server/sonar-web/src/main/js/components/embed-docs-modal/EmbedDocsPopup.tsx
@@ -66,7 +66,8 @@ export default class EmbedDocsPopup extends React.PureComponent<Props> {
             <DocLink
               innerRef={i === 0 ? this.focusFirstItem : undefined}
               onClick={this.props.onClose}
-              to={suggestion.link}>
+              to={suggestion.link}
+            >
               {suggestion.text}
             </DocLink>
           </li>
@@ -111,7 +112,8 @@ export default class EmbedDocsPopup extends React.PureComponent<Props> {
             <Link
               className="display-flex-center"
               to="https://community.sonarsource.com/"
-              target="_blank">
+              target="_blank"
+            >
               {translate('docs.get_help')}
             </Link>
           </li>
diff --git a/server/sonar-web/src/main/js/components/embed-docs-modal/EmbedDocsPopupHelper.tsx b/server/sonar-web/src/main/js/components/embed-docs-modal/EmbedDocsPopupHelper.tsx
index b78665a57aa..b71013a6b1d 100644
--- a/server/sonar-web/src/main/js/components/embed-docs-modal/EmbedDocsPopupHelper.tsx
+++ b/server/sonar-web/src/main/js/components/embed-docs-modal/EmbedDocsPopupHelper.tsx
@@ -41,7 +41,7 @@ export default class EmbedDocsPopupHelper extends React.PureComponent<{}, State>
   };
 
   toggleHelp = () => {
-    this.setState(state => {
+    this.setState((state) => {
       return { helpOpen: !state.helpOpen };
     });
   };
@@ -56,13 +56,15 @@ export default class EmbedDocsPopupHelper extends React.PureComponent<{}, State>
         <Toggler
           onRequestClose={this.closeHelp}
           open={this.state.helpOpen}
-          overlay={<EmbedDocsPopup onClose={this.closeHelp} />}>
+          overlay={<EmbedDocsPopup onClose={this.closeHelp} />}
+        >
           <ButtonLink
             aria-expanded={this.state.helpOpen}
             aria-haspopup={true}
             className="navbar-help navbar-icon"
             onClick={this.handleClick}
-            title={translate('help')}>
+            title={translate('help')}
+          >
             <HelpIcon />
           </ButtonLink>
         </Toggler>
diff --git a/server/sonar-web/src/main/js/components/embed-docs-modal/SuggestionsContext.ts b/server/sonar-web/src/main/js/components/embed-docs-modal/SuggestionsContext.ts
index e389713676b..793dfc3dced 100644
--- a/server/sonar-web/src/main/js/components/embed-docs-modal/SuggestionsContext.ts
+++ b/server/sonar-web/src/main/js/components/embed-docs-modal/SuggestionsContext.ts
@@ -33,5 +33,5 @@ export const SuggestionsContext = createContext<SuggestionsContextShape>({
   removeSuggestions: () => {
     /* Implemented by Provider */
   },
-  suggestions: []
+  suggestions: [],
 });
diff --git a/server/sonar-web/src/main/js/components/embed-docs-modal/SuggestionsProvider.tsx b/server/sonar-web/src/main/js/components/embed-docs-modal/SuggestionsProvider.tsx
index 70ec0da9d51..4ee84c01bb2 100644
--- a/server/sonar-web/src/main/js/components/embed-docs-modal/SuggestionsProvider.tsx
+++ b/server/sonar-web/src/main/js/components/embed-docs-modal/SuggestionsProvider.tsx
@@ -35,7 +35,7 @@ export default class SuggestionsProvider extends React.Component<{}, State> {
   fetchSuggestions = () => {
     const jsonList = suggestionsJson as SuggestionsJson;
     let suggestions: SuggestionLink[] = [];
-    this.keys.forEach(key => {
+    this.keys.forEach((key) => {
       if (jsonList[key]) {
         suggestions = [...jsonList[key], ...suggestions];
       }
@@ -50,7 +50,7 @@ export default class SuggestionsProvider extends React.Component<{}, State> {
   };
 
   removeSuggestions = (oldKey: string) => {
-    this.keys = this.keys.filter(key => key !== oldKey);
+    this.keys = this.keys.filter((key) => key !== oldKey);
     this.fetchSuggestions();
   };
 
@@ -60,8 +60,9 @@ export default class SuggestionsProvider extends React.Component<{}, State> {
         value={{
           addSuggestions: this.addSuggestions,
           removeSuggestions: this.removeSuggestions,
-          suggestions: this.state.suggestions
-        }}>
+          suggestions: this.state.suggestions,
+        }}
+      >
         {this.props.children}
       </SuggestionsContext.Provider>
     );
diff --git a/server/sonar-web/src/main/js/components/embed-docs-modal/__tests__/EmbedDocsPopup-test.tsx b/server/sonar-web/src/main/js/components/embed-docs-modal/__tests__/EmbedDocsPopup-test.tsx
index c410eea978d..d404fdfdcec 100644
--- a/server/sonar-web/src/main/js/components/embed-docs-modal/__tests__/EmbedDocsPopup-test.tsx
+++ b/server/sonar-web/src/main/js/components/embed-docs-modal/__tests__/EmbedDocsPopup-test.tsx
@@ -34,7 +34,7 @@ it('should render with no suggestions', () => {
 it('should render with suggestions', () => {
   renderEmbedDocsPopup([
     { link: '/docs/awesome-doc', text: 'mindblowing' },
-    { link: '/docs/whocares', text: 'boring' }
+    { link: '/docs/whocares', text: 'boring' },
   ]);
 
   expect(screen.getAllByRole('link')).toHaveLength(7);
@@ -44,7 +44,8 @@ it('should render with suggestions', () => {
 function renderEmbedDocsPopup(suggestions: SuggestionLink[] = []) {
   return renderComponent(
     <SuggestionsContext.Provider
-      value={{ addSuggestions: jest.fn(), removeSuggestions: jest.fn(), suggestions }}>
+      value={{ addSuggestions: jest.fn(), removeSuggestions: jest.fn(), suggestions }}
+    >
       <EmbedDocsPopup onClose={jest.fn()} />
     </SuggestionsContext.Provider>
   );
diff --git a/server/sonar-web/src/main/js/components/embed-docs-modal/__tests__/SuggestionsProvider-test.tsx b/server/sonar-web/src/main/js/components/embed-docs-modal/__tests__/SuggestionsProvider-test.tsx
index 28a914dcee1..2ff0c162e19 100644
--- a/server/sonar-web/src/main/js/components/embed-docs-modal/__tests__/SuggestionsProvider-test.tsx
+++ b/server/sonar-web/src/main/js/components/embed-docs-modal/__tests__/SuggestionsProvider-test.tsx
@@ -25,7 +25,7 @@ jest.mock(
   '../EmbedDocsSuggestions.json',
   () => ({
     pageA: [{ link: '/foo', text: 'Foo' }],
-    pageB: [{ link: '/qux', text: 'Qux' }]
+    pageB: [{ link: '/qux', text: 'Qux' }],
   }),
   { virtual: true }
 );
@@ -45,7 +45,7 @@ it('should add & remove suggestions', () => {
   instance.addSuggestions('pageB');
   expect(wrapper.state('suggestions')).toEqual([
     { link: '/qux', text: 'Qux' },
-    { link: '/foo', text: 'Foo' }
+    { link: '/foo', text: 'Foo' },
   ]);
 
   instance.removeSuggestions('pageA');
diff --git a/server/sonar-web/src/main/js/components/facet/FacetBox.tsx b/server/sonar-web/src/main/js/components/facet/FacetBox.tsx
index 859ebbe3b9e..2927ec71476 100644
--- a/server/sonar-web/src/main/js/components/facet/FacetBox.tsx
+++ b/server/sonar-web/src/main/js/components/facet/FacetBox.tsx
@@ -30,7 +30,8 @@ export default function FacetBox(props: FacetBoxProps) {
   return (
     <div
       className={classNames('search-navigator-facet-box', props.className)}
-      data-property={props.property}>
+      data-property={props.property}
+    >
       {props.children}
     </div>
   );
diff --git a/server/sonar-web/src/main/js/components/facet/FacetHeader.tsx b/server/sonar-web/src/main/js/components/facet/FacetHeader.tsx
index ee06de65751..529cdb602c7 100644
--- a/server/sonar-web/src/main/js/components/facet/FacetHeader.tsx
+++ b/server/sonar-web/src/main/js/components/facet/FacetHeader.tsx
@@ -87,7 +87,8 @@ export default class FacetHeader extends React.PureComponent<Props> {
               type="button"
               onClick={this.handleClick}
               aria-expanded={open}
-              tabIndex={0}>
+              tabIndex={0}
+            >
               <OpenCloseIcon className="little-spacer-right" open={open} />
               {header}
             </button>
@@ -116,7 +117,8 @@ export default class FacetHeader extends React.PureComponent<Props> {
           <Button
             className="search-navigator-facet-header-button button-small button-red"
             aria-label={translateWithParameters('clear_x_filter', name)}
-            onClick={this.props.onClear}>
+            onClick={this.props.onClear}
+          >
             {translate('clear')}
           </Button>
         )}
diff --git a/server/sonar-web/src/main/js/components/facet/FacetItem.tsx b/server/sonar-web/src/main/js/components/facet/FacetItem.tsx
index e9bcbb40469..6f1426173e0 100644
--- a/server/sonar-web/src/main/js/components/facet/FacetItem.tsx
+++ b/server/sonar-web/src/main/js/components/facet/FacetItem.tsx
@@ -35,7 +35,7 @@ export interface Props {
 export default class FacetItem extends React.PureComponent<Props> {
   static defaultProps = {
     halfWidth: false,
-    loading: false
+    loading: false,
   };
 
   handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
@@ -54,7 +54,7 @@ export default class FacetItem extends React.PureComponent<Props> {
   render() {
     const { name, halfWidth, active, value, tooltip } = this.props;
     const className = classNames('search-navigator-facet button-link', this.props.className, {
-      active
+      active,
     });
 
     return (
@@ -67,7 +67,8 @@ export default class FacetItem extends React.PureComponent<Props> {
           tabIndex={0}
           title={tooltip}
           role="checkbox"
-          type="button">
+          type="button"
+        >
           <span className="facet-name">{name}</span>
           {this.renderValue()}
         </button>
diff --git a/server/sonar-web/src/main/js/components/facet/ListStyleFacet.tsx b/server/sonar-web/src/main/js/components/facet/ListStyleFacet.tsx
index 206df6595be..c8df919b5a2 100644
--- a/server/sonar-web/src/main/js/components/facet/ListStyleFacet.tsx
+++ b/server/sonar-web/src/main/js/components/facet/ListStyleFacet.tsx
@@ -86,7 +86,7 @@ export default class ListStyleFacet<S> extends React.Component<Props<S>, State<S
   static defaultProps = {
     maxInitialItems: 15,
     maxItems: 100,
-    minSearchLength: 2
+    minSearchLength: 2,
   };
 
   state: State<S> = {
@@ -94,7 +94,7 @@ export default class ListStyleFacet<S> extends React.Component<Props<S>, State<S
     query: '',
     searching: false,
     searchResultsCounts: {},
-    showFullList: false
+    showFullList: false,
   };
 
   componentDidMount() {
@@ -116,7 +116,7 @@ export default class ListStyleFacet<S> extends React.Component<Props<S>, State<S
         searchResults: undefined,
         searching: false,
         searchResultsCounts: {},
-        showFullList: false
+        showFullList: false,
       });
     } else if (
       prevProps.stats !== this.props.stats &&
@@ -143,7 +143,7 @@ export default class ListStyleFacet<S> extends React.Component<Props<S>, State<S
         this.props.onChange({ [this.props.property]: newValue });
       } else {
         this.props.onChange({
-          [this.props.property]: values.includes(itemValue) && values.length < 2 ? [] : [itemValue]
+          [this.props.property]: values.includes(itemValue) && values.length < 2 ? [] : [itemValue],
         });
       }
     }
@@ -175,12 +175,12 @@ export default class ListStyleFacet<S> extends React.Component<Props<S>, State<S
         .then(this.loadCountsForSearchResults)
         .then(({ maxResults, paging, results, stats }) => {
           if (this.mounted) {
-            this.setState(state => ({
+            this.setState((state) => ({
               searching: false,
               searchMaxResults: maxResults,
               searchResults: results,
               searchPaging: paging,
-              searchResultsCounts: { ...state.searchResultsCounts, ...stats }
+              searchResultsCounts: { ...state.searchResultsCounts, ...stats },
             }));
           }
         })
@@ -199,11 +199,11 @@ export default class ListStyleFacet<S> extends React.Component<Props<S>, State<S
         .then(this.loadCountsForSearchResults)
         .then(({ paging, results, stats }) => {
           if (this.mounted) {
-            this.setState(state => ({
+            this.setState((state) => ({
               searching: false,
               searchResults: [...searchResults, ...results],
               searchPaging: paging,
-              searchResultsCounts: { ...state.searchResultsCounts, ...stats }
+              searchResultsCounts: { ...state.searchResultsCounts, ...stats },
             }));
           }
         })
@@ -213,12 +213,12 @@ export default class ListStyleFacet<S> extends React.Component<Props<S>, State<S
 
   loadCountsForSearchResults = (response: SearchResponse<S>) => {
     const { loadSearchResultCount = () => Promise.resolve({}) } = this.props;
-    const resultsToLoad = response.results.filter(result => {
+    const resultsToLoad = response.results.filter((result) => {
       const key = this.props.getSearchResultKey(result);
       return this.getStat(key) === undefined && this.state.searchResultsCounts[key] === undefined;
     });
     if (resultsToLoad.length > 0) {
-      return loadSearchResultCount(resultsToLoad).then(stats => ({ ...response, stats }));
+      return loadSearchResultCount(resultsToLoad).then((stats) => ({ ...response, stats }));
     } else {
       return { ...response, stats: {} };
     }
@@ -248,8 +248,8 @@ export default class ListStyleFacet<S> extends React.Component<Props<S>, State<S
       ? this.props.getSortedItems()
       : sortBy(
           Object.keys(stats),
-          key => -stats[key],
-          key => this.props.getFacetItemText(key)
+          (key) => -stats[key],
+          (key) => this.props.getFacetItemText(key)
         );
 
     const limitedList = this.state.showFullList
@@ -261,14 +261,14 @@ export default class ListStyleFacet<S> extends React.Component<Props<S>, State<S
       ? []
       : sortedItems
           .slice(this.props.maxInitialItems)
-          .filter(item => this.props.values.includes(item));
+          .filter((item) => this.props.values.includes(item));
 
     const mightHaveMoreResults = sortedItems.length >= this.props.maxItems;
 
     return (
       <>
         <FacetItemsList>
-          {limitedList.map(item => (
+          {limitedList.map((item) => (
             <FacetItem
               active={this.props.values.includes(item)}
               key={item}
@@ -284,7 +284,7 @@ export default class ListStyleFacet<S> extends React.Component<Props<S>, State<S
           <>
             <div className="note spacer-bottom text-center">⋯</div>
             <FacetItemsList>
-              {selectedBelowLimit.map(item => (
+              {selectedBelowLimit.map((item) => (
                 <FacetItem
                   active={true}
                   key={item}
@@ -342,7 +342,7 @@ export default class ListStyleFacet<S> extends React.Component<Props<S>, State<S
     return (
       <>
         <FacetItemsList>
-          {searchResults.map(result => this.renderSearchResult(result))}
+          {searchResults.map((result) => this.renderSearchResult(result))}
         </FacetItemsList>
         {searchMaxResults && (
           <Alert className="spacer-top" variant="warning">
@@ -382,16 +382,17 @@ export default class ListStyleFacet<S> extends React.Component<Props<S>, State<S
   render() {
     const { disabled, stats = {} } = this.props;
     const { query, searching, searchResults } = this.state;
-    const values = this.props.values.map(item => this.props.getFacetItemText(item));
+    const values = this.props.values.map((item) => this.props.getFacetItemText(item));
     const loadingResults =
       query !== '' && searching && (searchResults === undefined || searchResults.length === 0);
     const showList = !query || loadingResults;
     return (
       <FacetBox
         className={classNames(this.props.className, {
-          'search-navigator-facet-box-forbidden': disabled
+          'search-navigator-facet-box-forbidden': disabled,
         })}
-        property={this.props.property}>
+        property={this.props.property}
+      >
         <FacetHeader
           fetching={this.props.fetching}
           name={this.props.facetHeader}
diff --git a/server/sonar-web/src/main/js/components/facet/__tests__/ListStyleFacet-test.tsx b/server/sonar-web/src/main/js/components/facet/__tests__/ListStyleFacet-test.tsx
index a6c9e7430be..78854e10df3 100644
--- a/server/sonar-web/src/main/js/components/facet/__tests__/ListStyleFacet-test.tsx
+++ b/server/sonar-web/src/main/js/components/facet/__tests__/ListStyleFacet-test.tsx
@@ -74,7 +74,7 @@ it('should clear', () => {
 it('should search', async () => {
   const onSearch = jest.fn().mockResolvedValue({
     results: ['d', 'e'],
-    paging: { pageIndex: 1, pageSize: 2, total: 3 }
+    paging: { pageIndex: 1, pageSize: 2, total: 3 },
   });
   const loadSearchResultCount = jest.fn().mockResolvedValue({ d: 7, e: 3 });
   const wrapper = shallowRender({ loadSearchResultCount, onSearch });
@@ -89,7 +89,7 @@ it('should search', async () => {
   // load more results
   onSearch.mockResolvedValue({
     results: ['f'],
-    paging: { pageIndex: 2, pageSize: 2, total: 3 }
+    paging: { pageIndex: 2, pageSize: 2, total: 3 },
   });
   loadSearchResultCount.mockResolvedValue({ f: 5 });
   wrapper.find('ListFooter').prop<Function>('loadMore')();
@@ -149,7 +149,7 @@ it('should reset state when closes', () => {
     query: 'foobar',
     searchResults: ['foo', 'bar'],
     searching: true,
-    showFullList: true
+    showFullList: true,
   });
 
   wrapper.setProps({ open: false });
@@ -175,7 +175,7 @@ it('should display all selected items', () => {
   const wrapper = shallowRender({
     maxInitialItems: 2,
     stats: { a: 10, b: 5, c: 3 },
-    values: ['a', 'b', 'c']
+    values: ['a', 'b', 'c'],
   });
   expect(wrapper).toMatchSnapshot();
 });
diff --git a/server/sonar-web/src/main/js/components/facet/__tests__/MultipleSelectionHint-test.tsx b/server/sonar-web/src/main/js/components/facet/__tests__/MultipleSelectionHint-test.tsx
index 4a74abbefe1..76668cadfc5 100644
--- a/server/sonar-web/src/main/js/components/facet/__tests__/MultipleSelectionHint-test.tsx
+++ b/server/sonar-web/src/main/js/components/facet/__tests__/MultipleSelectionHint-test.tsx
@@ -24,7 +24,7 @@ import MultipleSelectionHint from '../MultipleSelectionHint';
 it('should render for mac', () => {
   Object.defineProperty(navigator, 'userAgent', {
     configurable: true,
-    value: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_4)'
+    value: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_4)',
   });
   expect(shallow(<MultipleSelectionHint options={3} values={1} />)).toMatchSnapshot();
 });
@@ -32,7 +32,7 @@ it('should render for mac', () => {
 it('should render for windows', () => {
   Object.defineProperty(navigator, 'userAgent', {
     configurable: true,
-    value: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64)'
+    value: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64)',
   });
   expect(shallow(<MultipleSelectionHint options={3} values={1} />)).toMatchSnapshot();
 });
diff --git a/server/sonar-web/src/main/js/components/hoc/__tests__/whenLoggedIn-test.tsx b/server/sonar-web/src/main/js/components/hoc/__tests__/whenLoggedIn-test.tsx
index 3f4c0d904a7..626875582db 100644
--- a/server/sonar-web/src/main/js/components/hoc/__tests__/whenLoggedIn-test.tsx
+++ b/server/sonar-web/src/main/js/components/hoc/__tests__/whenLoggedIn-test.tsx
@@ -44,11 +44,7 @@ it('should not render for anonymous user', () => {
 });
 
 function getRenderedType(wrapper: ShallowWrapper) {
-  return wrapper
-    .dive()
-    .dive()
-    .dive()
-    .type();
+  return wrapper.dive().dive().dive().type();
 }
 
 function shallowRender(isLoggedIn = true) {
@@ -57,8 +53,9 @@ function shallowRender(isLoggedIn = true) {
       value={{
         currentUser: { isLoggedIn, dismissedNotices: {} },
         updateCurrentUserHomepage: () => {},
-        updateDismissedNotices: () => {}
-      }}>
+        updateDismissedNotices: () => {},
+      }}
+    >
       <UnderTest />
     </CurrentUserContext.Provider>
   );
diff --git a/server/sonar-web/src/main/js/components/hoc/__tests__/withCLanguageFeature-test.tsx b/server/sonar-web/src/main/js/components/hoc/__tests__/withCLanguageFeature-test.tsx
index 0a68721016e..9c596aae4be 100644
--- a/server/sonar-web/src/main/js/components/hoc/__tests__/withCLanguageFeature-test.tsx
+++ b/server/sonar-web/src/main/js/components/hoc/__tests__/withCLanguageFeature-test.tsx
@@ -26,8 +26,8 @@ jest.mock('../../../app/components/languages/LanguagesContext', () => {
     LanguagesContext: {
       Consumer: ({ children }: { children: (props: {}) => React.ReactNode }) => {
         return children({ c: { key: 'c', name: 'c' } });
-      }
-    }
+      },
+    },
   };
 });
 
diff --git a/server/sonar-web/src/main/js/components/hoc/__tests__/withIndexationContext-test.tsx b/server/sonar-web/src/main/js/components/hoc/__tests__/withIndexationContext-test.tsx
index 626625b01a4..1b9484f4f0f 100644
--- a/server/sonar-web/src/main/js/components/hoc/__tests__/withIndexationContext-test.tsx
+++ b/server/sonar-web/src/main/js/components/hoc/__tests__/withIndexationContext-test.tsx
@@ -25,7 +25,7 @@ import withIndexationContext, { WithIndexationContextProps } from '../withIndexa
 
 it('should render correctly', () => {
   const indexationContext: IndexationContextInterface = {
-    status: { isCompleted: true, percentCompleted: 87, hasFailures: false }
+    status: { isCompleted: true, percentCompleted: 87, hasFailures: false },
   };
 
   const wrapper = mountRender(indexationContext);
@@ -38,8 +38,9 @@ function mountRender(indexationContext?: Partial<IndexationContextInterface>) {
     <IndexationContext.Provider
       value={{
         status: { isCompleted: false, percentCompleted: 23, hasFailures: false },
-        ...indexationContext
-      }}>
+        ...indexationContext,
+      }}
+    >
       <TestComponentWithIndexationContext />
     </IndexationContext.Provider>
   );
diff --git a/server/sonar-web/src/main/js/components/hoc/__tests__/withIndexationGuard-test.tsx b/server/sonar-web/src/main/js/components/hoc/__tests__/withIndexationGuard-test.tsx
index 0b41b37b38f..9708493c619 100644
--- a/server/sonar-web/src/main/js/components/hoc/__tests__/withIndexationGuard-test.tsx
+++ b/server/sonar-web/src/main/js/components/hoc/__tests__/withIndexationGuard-test.tsx
@@ -31,14 +31,14 @@ it('should not render children because indexation is in progress', () => {
 
 it('should not render children because indexation has failures', () => {
   const wrapper = mountRender({
-    status: { isCompleted: true, percentCompleted: 100, hasFailures: true }
+    status: { isCompleted: true, percentCompleted: 100, hasFailures: true },
   });
   expect(wrapper.find(TestComponent).exists()).toBe(false);
 });
 
 it('should render children because indexation is completed without failures', () => {
   const wrapper = mountRender({
-    status: { isCompleted: true, percentCompleted: 100, hasFailures: false }
+    status: { isCompleted: true, percentCompleted: 100, hasFailures: false },
   });
   expect(wrapper.find(TestComponent).exists()).toBe(true);
 });
@@ -48,8 +48,9 @@ function mountRender(context?: Partial<IndexationContextInterface>) {
     <IndexationContext.Provider
       value={{
         status: { isCompleted: false, percentCompleted: 23, hasFailures: false },
-        ...context
-      }}>
+        ...context,
+      }}
+    >
       <TestComponentWithGuard />
     </IndexationContext.Provider>
   );
diff --git a/server/sonar-web/src/main/js/components/hoc/__tests__/withKeyboardNavigation-test.tsx b/server/sonar-web/src/main/js/components/hoc/__tests__/withKeyboardNavigation-test.tsx
index d1b0c500b03..2d0c573ca28 100644
--- a/server/sonar-web/src/main/js/components/hoc/__tests__/withKeyboardNavigation-test.tsx
+++ b/server/sonar-web/src/main/js/components/hoc/__tests__/withKeyboardNavigation-test.tsx
@@ -39,7 +39,7 @@ const WrappedComponent = withKeyboardNavigation(X);
 const COMPONENTS = [
   mockComponent({ key: 'file-1' }),
   mockComponent({ key: 'file-2' }),
-  mockComponent({ key: 'file-3' })
+  mockComponent({ key: 'file-3' }),
 ];
 
 it('should wrap component correctly', () => {
@@ -49,7 +49,7 @@ it('should wrap component correctly', () => {
 
 it('should correctly bind key events for component navigation', () => {
   const onGoToParent = jest.fn();
-  const onHighlight = jest.fn(selected => {
+  const onHighlight = jest.fn((selected) => {
     wrapper.setProps({ selected });
   });
   const onSelect = jest.fn();
@@ -60,7 +60,7 @@ it('should correctly bind key events for component navigation', () => {
       onGoToParent,
       onHighlight,
       onSelect,
-      selected: COMPONENTS[1]
+      selected: COMPONENTS[1],
     })
   );
 
@@ -95,14 +95,14 @@ it('should correctly bind key events for component navigation', () => {
 
 it('should support not cycling through elements, and triggering a callback on reaching the last element', () => {
   const onEndOfList = jest.fn();
-  const onHighlight = jest.fn(selected => {
+  const onHighlight = jest.fn((selected) => {
     wrapper.setProps({ selected });
   });
 
   const wrapper = mount(
     applyProps({
       onEndOfList,
-      onHighlight
+      onHighlight,
     })
   );
 
@@ -132,7 +132,7 @@ it('should correctly bind key events for codeview navigation', () => {
       onGoToParent,
       onHighlight,
       onSelect,
-      selected: COMPONENTS[1]
+      selected: COMPONENTS[1],
     })
   );
 
diff --git a/server/sonar-web/src/main/js/components/hoc/__tests__/withNotifications-test.tsx b/server/sonar-web/src/main/js/components/hoc/__tests__/withNotifications-test.tsx
index c29439d7f6e..caf14b2dd34 100644
--- a/server/sonar-web/src/main/js/components/hoc/__tests__/withNotifications-test.tsx
+++ b/server/sonar-web/src/main/js/components/hoc/__tests__/withNotifications-test.tsx
@@ -34,25 +34,25 @@ jest.mock('../../../api/notifications', () => ({
           channel: 'channel1',
           type: 'type-global',
           project: 'foo',
-          projectName: 'Foo'
+          projectName: 'Foo',
         },
         {
           channel: 'channel1',
           type: 'type-common',
           project: 'bar',
-          projectName: 'Bar'
+          projectName: 'Bar',
         },
         {
           channel: 'channel2',
           type: 'type-common',
           project: 'qux',
-          projectName: 'Qux'
-        }
+          projectName: 'Qux',
+        },
       ],
-      perProjectTypes: ['type-common']
+      perProjectTypes: ['type-common'],
     })
   ),
-  removeNotification: jest.fn().mockResolvedValue({})
+  removeNotification: jest.fn().mockResolvedValue({}),
 }));
 
 class X extends React.Component<WithNotificationsProps> {
@@ -77,7 +77,7 @@ it('should add and remove a notification', () => {
   const notification = {
     channel: 'EmailNotificationChannel',
     project: 'foo',
-    type: 'SQ-MyNewIssues'
+    type: 'SQ-MyNewIssues',
   };
 
   wrapper.prop('addNotification')(notification);
diff --git a/server/sonar-web/src/main/js/components/hoc/withCLanguageFeature.tsx b/server/sonar-web/src/main/js/components/hoc/withCLanguageFeature.tsx
index 4b9150b82ef..0a07ecebaeb 100644
--- a/server/sonar-web/src/main/js/components/hoc/withCLanguageFeature.tsx
+++ b/server/sonar-web/src/main/js/components/hoc/withCLanguageFeature.tsx
@@ -30,7 +30,7 @@ export function withCLanguageFeature<P>(
     render() {
       return (
         <LanguagesContext.Consumer>
-          {languages => {
+          {(languages) => {
             const hasCLanguageFeature = languages['c'] !== undefined;
 
             return (
diff --git a/server/sonar-web/src/main/js/components/hoc/withIndexationContext.tsx b/server/sonar-web/src/main/js/components/hoc/withIndexationContext.tsx
index 6ea0f892882..c071c554616 100644
--- a/server/sonar-web/src/main/js/components/hoc/withIndexationContext.tsx
+++ b/server/sonar-web/src/main/js/components/hoc/withIndexationContext.tsx
@@ -37,7 +37,7 @@ export default function withIndexationContext<P>(
     render() {
       return (
         <IndexationContext.Consumer>
-          {indexationContext => {
+          {(indexationContext) => {
             if (indexationContext) {
               return (
                 <WrappedComponent indexationContext={indexationContext} {...(this.props as P)} />
diff --git a/server/sonar-web/src/main/js/components/hoc/withIndexationGuard.tsx b/server/sonar-web/src/main/js/components/hoc/withIndexationGuard.tsx
index d757389e0e2..28305aac05b 100644
--- a/server/sonar-web/src/main/js/components/hoc/withIndexationGuard.tsx
+++ b/server/sonar-web/src/main/js/components/hoc/withIndexationGuard.tsx
@@ -20,7 +20,7 @@
 import * as React from 'react';
 import { IndexationContext } from '../../app/components/indexation/IndexationContext';
 import PageUnavailableDueToIndexation, {
-  PageContext
+  PageContext,
 } from '../../app/components/indexation/PageUnavailableDueToIndexation';
 
 export default function withIndexationGuard<P>(
@@ -31,7 +31,7 @@ export default function withIndexationGuard<P>(
     render() {
       return (
         <IndexationContext.Consumer>
-          {context =>
+          {(context) =>
             context?.status.isCompleted && !context?.status.hasFailures ? (
               <WrappedComponent {...this.props} />
             ) : (
diff --git a/server/sonar-web/src/main/js/components/hoc/withKeyboardNavigation.tsx b/server/sonar-web/src/main/js/components/hoc/withKeyboardNavigation.tsx
index ecfacd0054f..f475e8805a4 100644
--- a/server/sonar-web/src/main/js/components/hoc/withKeyboardNavigation.tsx
+++ b/server/sonar-web/src/main/js/components/hoc/withKeyboardNavigation.tsx
@@ -71,7 +71,7 @@ export default function withKeyboardNavigation<P>(
       const { selected, components = [] } = this.props;
       return selected
         ? components.findIndex(
-            component =>
+            (component) =>
               getComponentMeasureUniqueKey(component) === getComponentMeasureUniqueKey(selected)
           )
         : -1;
diff --git a/server/sonar-web/src/main/js/components/hoc/withNotifications.tsx b/server/sonar-web/src/main/js/components/hoc/withNotifications.tsx
index 2b85d1ad84d..1ab261350f5 100644
--- a/server/sonar-web/src/main/js/components/hoc/withNotifications.tsx
+++ b/server/sonar-web/src/main/js/components/hoc/withNotifications.tsx
@@ -53,7 +53,7 @@ export function withNotifications<P>(
       globalTypes: [],
       loading: true,
       notifications: [],
-      perProjectTypes: []
+      perProjectTypes: [],
     };
 
     componentDidMount() {
@@ -67,14 +67,14 @@ export function withNotifications<P>(
 
     fetchNotifications = () => {
       getNotifications().then(
-        response => {
+        (response) => {
           if (this.mounted) {
             this.setState({
               channels: response.channels,
               globalTypes: response.globalTypes,
               loading: false,
               notifications: response.notifications,
-              perProjectTypes: response.perProjectTypes
+              perProjectTypes: response.perProjectTypes,
             });
           }
         },
@@ -87,16 +87,16 @@ export function withNotifications<P>(
     };
 
     addNotificationToState = (added: Notification) => {
-      this.setState(state => {
+      this.setState((state) => {
         const notifications = uniqWith([...state.notifications, added], this.areNotificationsEqual);
         return { notifications };
       });
     };
 
     removeNotificationFromState = (removed: Notification) => {
-      this.setState(state => {
+      this.setState((state) => {
         const notifications = state.notifications.filter(
-          notification => !this.areNotificationsEqual(notification, removed)
+          (notification) => !this.areNotificationsEqual(notification, removed)
         );
         return { notifications };
       });
diff --git a/server/sonar-web/src/main/js/components/hoc/withRouter.tsx b/server/sonar-web/src/main/js/components/hoc/withRouter.tsx
index 650d6db725c..67d700de2d2 100644
--- a/server/sonar-web/src/main/js/components/hoc/withRouter.tsx
+++ b/server/sonar-web/src/main/js/components/hoc/withRouter.tsx
@@ -24,7 +24,7 @@ import {
   useLocation as useLocationRouter,
   useNavigate,
   useParams,
-  useSearchParams
+  useSearchParams,
 } from 'react-router-dom';
 import { queryToSearch, searchParamsToQuery } from '../../helpers/urls';
 import { RawQuery } from '../../types/types';
@@ -67,14 +67,14 @@ export function withRouter<P extends Partial<WithRouterProps>>(
             path.search = queryToSearch((path as Location).query);
           }
           navigate(path);
-        }
+        },
       }),
       [navigate]
     );
 
     const location = {
       ...locationRouter,
-      query: searchParamsToQuery(searchParams)
+      query: searchParamsToQuery(searchParams),
     };
 
     return <WrappedComponent {...props} location={location} params={params} router={router} />;
diff --git a/server/sonar-web/src/main/js/components/hoc/withScrollTo.tsx b/server/sonar-web/src/main/js/components/hoc/withScrollTo.tsx
index a25cd9f8b05..4166be9e339 100644
--- a/server/sonar-web/src/main/js/components/hoc/withScrollTo.tsx
+++ b/server/sonar-web/src/main/js/components/hoc/withScrollTo.tsx
@@ -73,7 +73,7 @@ export function withScrollTo<P>(WrappedComponent: React.ComponentClass<P>) {
       return (
         <WrappedComponent
           {...this.props}
-          ref={ref => {
+          ref={(ref) => {
             this.componentRef = ref;
           }}
         />
diff --git a/server/sonar-web/src/main/js/components/icons/DropdownIcon.tsx b/server/sonar-web/src/main/js/components/icons/DropdownIcon.tsx
index 298462ab8b8..59aa894003b 100644
--- a/server/sonar-web/src/main/js/components/icons/DropdownIcon.tsx
+++ b/server/sonar-web/src/main/js/components/icons/DropdownIcon.tsx
@@ -36,7 +36,8 @@ export default function DropdownIcon({
       style={turned ? { transform: 'rotate(180deg)' } : undefined}
       viewBox="0 0 7 16"
       width={(size / 16) * 7}
-      {...iconProps}>
+      {...iconProps}
+    >
       <path
         d="M7 6.469a.42.42 0 0 1-.13.307L3.808 9.84a.42.42 0 0 1-.308.13.42.42 0 0 1-.308-.13L.13 6.776A.42.42 0 0 1 0 6.47a.42.42 0 0 1 .13-.308.42.42 0 0 1 .307-.13h6.126a.42.42 0 0 1 .307.13.42.42 0 0 1 .13.308z"
         style={{ fill }}
diff --git a/server/sonar-web/src/main/js/components/icons/FavoriteIcon.tsx b/server/sonar-web/src/main/js/components/icons/FavoriteIcon.tsx
index d9518fe96d9..6e64585661e 100644
--- a/server/sonar-web/src/main/js/components/icons/FavoriteIcon.tsx
+++ b/server/sonar-web/src/main/js/components/icons/FavoriteIcon.tsx
@@ -31,7 +31,8 @@ export default function FavoriteIcon({ className, favorite, fill, ...iconProps }
     <Icon
       className={classNames('icon-outline', { 'is-filled': favorite }, className)}
       style={{ color: fill || colors.favoriteColor }}
-      {...iconProps}>
+      {...iconProps}
+    >
       <g transform="matrix(0.988024,0,0,0.988024,0.0957953,0.717719)">
         <path d="M15.428,5.777C15.428,5.908 15.35,6.051 15.195,6.205L11.954,9.366L12.722,13.83C12.728,13.872 12.731,13.932 12.731,14.009C12.731,14.134 12.7,14.24 12.637,14.326C12.575,14.412 12.484,14.455 12.365,14.455C12.252,14.455 12.133,14.42 12.008,14.348L7.999,12.241L3.99,14.348C3.859,14.42 3.74,14.455 3.633,14.455C3.508,14.455 3.414,14.412 3.352,14.326C3.289,14.24 3.258,14.134 3.258,14.009C3.258,13.973 3.264,13.914 3.276,13.83L4.044,9.366L0.794,6.205C0.645,6.045 0.57,5.902 0.57,5.777C0.57,5.557 0.737,5.42 1.07,5.366L5.552,4.714L7.561,0.652C7.674,0.408 7.82,0.286 7.999,0.286C8.177,0.286 8.323,0.408 8.436,0.652L10.445,4.714L14.927,5.366C15.261,5.42 15.427,5.557 15.427,5.777L15.428,5.777Z" />
       </g>
diff --git a/server/sonar-web/src/main/js/components/icons/HomeIcon.tsx b/server/sonar-web/src/main/js/components/icons/HomeIcon.tsx
index 57fe5bf9d0a..e5e2fcc6030 100644
--- a/server/sonar-web/src/main/js/components/icons/HomeIcon.tsx
+++ b/server/sonar-web/src/main/js/components/icons/HomeIcon.tsx
@@ -31,7 +31,8 @@ export default function HomeIcon({ className, fill, filled = false, ...iconProps
     <Icon
       className={classNames(className, 'icon-outline', { 'is-filled': filled })}
       style={{ color: fill || colors.homepageColor }}
-      {...iconProps}>
+      {...iconProps}
+    >
       <g transform="matrix(0.870918,0,0,0.870918,0.978227,0.978227)">
         <path d="M15.9,7.8L8.2,0.1C8.1,0 7.9,0 7.8,0.1L0.1,7.8C0,7.9 0,8.1 0.1,8.2C0.2,8.3 0.2,8.3 0.3,8.3L2.2,8.3L2.2,15.8C2.2,15.9 2.2,15.9 2.3,16C2.3,16 2.4,16.1 2.5,16.1L6.2,16.1C6.3,16.1 6.5,16 6.5,15.8L6.5,10.5L9.7,10.5L9.7,15.8C9.7,15.9 9.8,16.1 10,16.1L13.7,16.1C13.8,16.1 14,16 14,15.8L14,8.2L15.9,8.2C16,8.2 16,8.2 16.1,8.1C16,8 16.1,7.9 15.9,7.8Z" />
       </g>
diff --git a/server/sonar-web/src/main/js/components/icons/Icon.tsx b/server/sonar-web/src/main/js/components/icons/Icon.tsx
index 4dd2393d3f1..e852e82c9b4 100644
--- a/server/sonar-web/src/main/js/components/icons/Icon.tsx
+++ b/server/sonar-web/src/main/js/components/icons/Icon.tsx
@@ -60,14 +60,15 @@ export default function Icon({
         clipRule: 'evenodd',
         strokeLinejoin: 'round',
         strokeMiterlimit: 1.41421,
-        ...style
+        ...style,
       }}
       version="1.1"
       viewBox={viewBox}
       width={width}
       xmlnsXlink="http://www.w3.org/1999/xlink"
       xmlSpace="preserve"
-      {...iconProps}>
+      {...iconProps}
+    >
       {children}
     </svg>
   );
diff --git a/server/sonar-web/src/main/js/components/icons/QualifierIcon.tsx b/server/sonar-web/src/main/js/components/icons/QualifierIcon.tsx
index 05ba3b5c163..e2cc024cc83 100644
--- a/server/sonar-web/src/main/js/components/icons/QualifierIcon.tsx
+++ b/server/sonar-web/src/main/js/components/icons/QualifierIcon.tsx
@@ -31,7 +31,7 @@ const qualifierIcons: Dict<(props: IconProps) => React.ReactElement> = {
   svw: SubPortfolioIcon,
   trk: ProjectIcon,
   uts: UnitTestIcon,
-  vw: PortfolioIcon
+  vw: PortfolioIcon,
 };
 
 interface QualifierIconProps extends IconProps {
diff --git a/server/sonar-web/src/main/js/components/icons/SeverityIcon.tsx b/server/sonar-web/src/main/js/components/icons/SeverityIcon.tsx
index bb943acf587..979367419c0 100644
--- a/server/sonar-web/src/main/js/components/icons/SeverityIcon.tsx
+++ b/server/sonar-web/src/main/js/components/icons/SeverityIcon.tsx
@@ -31,7 +31,7 @@ const severityIcons: Dict<(props: IconProps) => React.ReactElement> = {
   critical: CriticalSeverityIcon,
   major: MajorSeverityIcon,
   minor: MinorSeverityIcon,
-  info: InfoSeverityIcon
+  info: InfoSeverityIcon,
 };
 
 export default function SeverityIcon({ severity, ...iconProps }: Props) {
diff --git a/server/sonar-web/src/main/js/components/icons/StatusIcon.tsx b/server/sonar-web/src/main/js/components/icons/StatusIcon.tsx
index 5f94f5a6991..6c99dda0275 100644
--- a/server/sonar-web/src/main/js/components/icons/StatusIcon.tsx
+++ b/server/sonar-web/src/main/js/components/icons/StatusIcon.tsx
@@ -34,7 +34,7 @@ const statusIcons: Dict<(props: IconProps) => React.ReactElement> = {
   closed: ClosedStatusIcon,
   to_review: OpenStatusIcon,
   in_review: ConfirmedStatusIcon,
-  reviewed: ResolvedStatusIcon
+  reviewed: ResolvedStatusIcon,
 };
 
 export default function StatusIcon({ status, ...iconProps }: Props) {
diff --git a/server/sonar-web/src/main/js/components/icons/TestStatusIcon.tsx b/server/sonar-web/src/main/js/components/icons/TestStatusIcon.tsx
index 0e0968aa038..0cd9a779401 100644
--- a/server/sonar-web/src/main/js/components/icons/TestStatusIcon.tsx
+++ b/server/sonar-web/src/main/js/components/icons/TestStatusIcon.tsx
@@ -30,7 +30,7 @@ const statusIcons: Dict<(props: IconProps) => React.ReactElement> = {
   ok: OkTestStatusIcon,
   failure: FailureTestStatusIcon,
   error: ErrorTestStatusIcon,
-  skipped: SkippedTestStatusIcon
+  skipped: SkippedTestStatusIcon,
 };
 
 export default function TestStatusIcon({ status, ...iconProps }: Props) {
diff --git a/server/sonar-web/src/main/js/components/intl/DateFormatter.tsx b/server/sonar-web/src/main/js/components/intl/DateFormatter.tsx
index 9d4df9c579d..2d23f06fd71 100644
--- a/server/sonar-web/src/main/js/components/intl/DateFormatter.tsx
+++ b/server/sonar-web/src/main/js/components/intl/DateFormatter.tsx
@@ -31,13 +31,13 @@ export interface DateFormatterProps {
 export const formatterOption: FormatDateOptions = {
   year: 'numeric',
   month: 'short',
-  day: '2-digit'
+  day: '2-digit',
 };
 
 export const longFormatterOption: FormatDateOptions = {
   year: 'numeric',
   month: 'long',
-  day: 'numeric'
+  day: 'numeric',
 };
 
 export default function DateFormatter({ children, date, long }: DateFormatterProps) {
diff --git a/server/sonar-web/src/main/js/components/intl/DateFromNow.tsx b/server/sonar-web/src/main/js/components/intl/DateFromNow.tsx
index 76ec0f6ce55..9328c4d8d48 100644
--- a/server/sonar-web/src/main/js/components/intl/DateFromNow.tsx
+++ b/server/sonar-web/src/main/js/components/intl/DateFromNow.tsx
@@ -55,7 +55,7 @@ export default function DateFromNow(props: DateFromNowProps) {
 
   return (
     <DateTimeFormatter date={parsedDate}>
-      {formattedDate => (
+      {(formattedDate) => (
         <span title={formattedDate}>
           <FormattedRelativeTime {...relativeTimeProps}>
             {children as FormattedRelativeTime['props']['children']}
diff --git a/server/sonar-web/src/main/js/components/intl/DateTimeFormatter.tsx b/server/sonar-web/src/main/js/components/intl/DateTimeFormatter.tsx
index cccb3c7dfe2..5caf0999db0 100644
--- a/server/sonar-web/src/main/js/components/intl/DateTimeFormatter.tsx
+++ b/server/sonar-web/src/main/js/components/intl/DateTimeFormatter.tsx
@@ -32,7 +32,7 @@ export const formatterOption: FormatDateOptions = {
   month: 'long',
   day: 'numeric',
   hour: 'numeric',
-  minute: 'numeric'
+  minute: 'numeric',
 };
 
 export default function DateTimeFormatter({ children, date }: Props) {
diff --git a/server/sonar-web/src/main/js/components/intl/TimeFormatter.tsx b/server/sonar-web/src/main/js/components/intl/TimeFormatter.tsx
index 4ed40f8ca0d..22c4646dffc 100644
--- a/server/sonar-web/src/main/js/components/intl/TimeFormatter.tsx
+++ b/server/sonar-web/src/main/js/components/intl/TimeFormatter.tsx
@@ -33,7 +33,7 @@ export const formatterOption: FormatDateOptions = { hour: 'numeric', minute: 'nu
 export const longFormatterOption: FormatDateOptions = {
   hour: 'numeric',
   minute: 'numeric',
-  second: 'numeric'
+  second: 'numeric',
 };
 
 export default function TimeFormatter({ children, date, long }: TimeFormatterProps) {
diff --git a/server/sonar-web/src/main/js/components/intl/__tests__/DateFormatter-test.tsx b/server/sonar-web/src/main/js/components/intl/__tests__/DateFormatter-test.tsx
index fa97babf962..d59fc2bf3af 100644
--- a/server/sonar-web/src/main/js/components/intl/__tests__/DateFormatter-test.tsx
+++ b/server/sonar-web/src/main/js/components/intl/__tests__/DateFormatter-test.tsx
@@ -29,7 +29,7 @@ it('should render correctly', () => {
 function shallowRender(overrides: Partial<DateFormatterProps> = {}) {
   return shallow(
     <DateFormatter date={new Date('2020-02-20T20:20:20Z')} {...overrides}>
-      {formatted => <span>{formatted}</span>}
+      {(formatted) => <span>{formatted}</span>}
     </DateFormatter>
   );
 }
diff --git a/server/sonar-web/src/main/js/components/intl/__tests__/DateFromNow-test.tsx b/server/sonar-web/src/main/js/components/intl/__tests__/DateFromNow-test.tsx
index 2f00d4ed33a..fb81801aafc 100644
--- a/server/sonar-web/src/main/js/components/intl/__tests__/DateFromNow-test.tsx
+++ b/server/sonar-web/src/main/js/components/intl/__tests__/DateFromNow-test.tsx
@@ -26,7 +26,7 @@ import DateTimeFormatter from '../DateTimeFormatter';
 const date = '2020-02-20T20:20:20Z';
 
 jest.mock('../dateUtils', () => ({
-  getRelativeTimeProps: jest.fn().mockReturnValue({ value: -1, unit: 'year' })
+  getRelativeTimeProps: jest.fn().mockReturnValue({ value: -1, unit: 'year' }),
 }));
 
 it('should render correctly', () => {
@@ -49,7 +49,7 @@ it('should render correctly when the date is less than one hour in the past', ()
   veryCloseDate.setMinutes(veryCloseDate.getMinutes() - 10);
   const mockDateNow = jest
     .spyOn(Date, 'now')
-    .mockImplementation(() => (new Date(date) as unknown) as number);
+    .mockImplementation(() => new Date(date) as unknown as number);
   const children = jest.fn();
 
   shallowRender({ date: veryCloseDate, hourPrecision: true }, children)
@@ -67,7 +67,7 @@ function shallowRender(overrides: Partial<DateFromNowProps> = {}, children: jest
   return shallow(
     <IntlProvider defaultLocale="en-US" locale="en">
       <DateFromNow date={date} {...overrides}>
-        {formattedDate => children(formattedDate)}
+        {(formattedDate) => children(formattedDate)}
       </DateFromNow>
     </IntlProvider>
   )
diff --git a/server/sonar-web/src/main/js/components/intl/__tests__/DateTimeFormatter-test.tsx b/server/sonar-web/src/main/js/components/intl/__tests__/DateTimeFormatter-test.tsx
index 8a7df0a948e..67ffd80d532 100644
--- a/server/sonar-web/src/main/js/components/intl/__tests__/DateTimeFormatter-test.tsx
+++ b/server/sonar-web/src/main/js/components/intl/__tests__/DateTimeFormatter-test.tsx
@@ -28,7 +28,7 @@ it('should render correctly', () => {
 function shallowRender() {
   return shallow(
     <DateTimeFormatter date={new Date('2020-02-20T20:20:20Z')}>
-      {formatted => <span>{formatted}</span>}
+      {(formatted) => <span>{formatted}</span>}
     </DateTimeFormatter>
   );
 }
diff --git a/server/sonar-web/src/main/js/components/intl/__tests__/TimeFormatter-test.tsx b/server/sonar-web/src/main/js/components/intl/__tests__/TimeFormatter-test.tsx
index fa66dd8f3c1..a8e897d89d6 100644
--- a/server/sonar-web/src/main/js/components/intl/__tests__/TimeFormatter-test.tsx
+++ b/server/sonar-web/src/main/js/components/intl/__tests__/TimeFormatter-test.tsx
@@ -29,7 +29,7 @@ it('should render correctly', () => {
 function shallowRender(overrides: Partial<TimeFormatterProps> = {}) {
   return shallow(
     <TimeFormatter date={new Date('2020-02-20T20:20:20Z')} {...overrides}>
-      {formatted => <span>{formatted}</span>}
+      {(formatted) => <span>{formatted}</span>}
     </TimeFormatter>
   );
 }
diff --git a/server/sonar-web/src/main/js/components/intl/__tests__/__snapshots__/dateUtils-test.ts b/server/sonar-web/src/main/js/components/intl/__tests__/__snapshots__/dateUtils-test.ts
index 633f2ac0300..3abbc216391 100644
--- a/server/sonar-web/src/main/js/components/intl/__tests__/__snapshots__/dateUtils-test.ts
+++ b/server/sonar-web/src/main/js/components/intl/__tests__/__snapshots__/dateUtils-test.ts
@@ -27,7 +27,7 @@ describe('getRelativeTimeProps', () => {
   it.each([
     ['year', '2020-02-19T20:20:20Z', -1],
     ['month', '2020-11-18T20:20:20Z', -3],
-    ['day', '2021-02-18T18:20:20Z', -2]
+    ['day', '2021-02-18T18:20:20Z', -2],
   ])('should return the correct props for dates older than a %s', (unit, date, value) => {
     expect(getRelativeTimeProps(date)).toEqual({ value, unit });
   });
@@ -36,7 +36,7 @@ describe('getRelativeTimeProps', () => {
     expect(getRelativeTimeProps('2021-02-20T20:19:45Z')).toEqual({
       value: -35,
       unit: 'second',
-      updateIntervalInSeconds: 10
+      updateIntervalInSeconds: 10,
     });
   });
 });
diff --git a/server/sonar-web/src/main/js/components/intl/dateUtils.ts b/server/sonar-web/src/main/js/components/intl/dateUtils.ts
index 75a24b16561..232b2359f73 100644
--- a/server/sonar-web/src/main/js/components/intl/dateUtils.ts
+++ b/server/sonar-web/src/main/js/components/intl/dateUtils.ts
@@ -21,7 +21,7 @@ import {
   differenceInDays,
   differenceInMonths,
   differenceInSeconds,
-  differenceInYears
+  differenceInYears,
 } from 'date-fns';
 import { FormattedRelativeTime } from 'react-intl';
 import { parseDate } from '../../helpers/dates';
@@ -52,6 +52,6 @@ export function getRelativeTimeProps(
   return {
     value: differenceInSeconds(date, Date.now()),
     unit: 'second',
-    updateIntervalInSeconds: UPDATE_INTERVAL_IN_SECONDS
+    updateIntervalInSeconds: UPDATE_INTERVAL_IN_SECONDS,
   };
 }
diff --git a/server/sonar-web/src/main/js/components/issue/Issue.tsx b/server/sonar-web/src/main/js/components/issue/Issue.tsx
index 5f48a1612c5..79d7e8f560a 100644
--- a/server/sonar-web/src/main/js/components/issue/Issue.tsx
+++ b/server/sonar-web/src/main/js/components/issue/Issue.tsx
@@ -46,7 +46,7 @@ interface Props {
 
 export default class Issue extends React.PureComponent<Props> {
   static defaultProps = {
-    selected: false
+    selected: false,
   };
 
   componentDidMount() {
diff --git a/server/sonar-web/src/main/js/components/issue/IssueMessageBox.tsx b/server/sonar-web/src/main/js/components/issue/IssueMessageBox.tsx
index bc29f721dc6..2abe1d8da8e 100644
--- a/server/sonar-web/src/main/js/components/issue/IssueMessageBox.tsx
+++ b/server/sonar-web/src/main/js/components/issue/IssueMessageBox.tsx
@@ -37,13 +37,14 @@ export function IssueMessageBox(props: IssueMessageBoxProps, ref: React.Forwarde
     <div
       className={classNames('issue-message-box display-flex-row display-flex-center padded-right', {
         'selected big-padded-top big-padded-bottom text-bold': selected,
-        'secondary-issue padded-top padded-bottom': !selected
+        'secondary-issue padded-top padded-bottom': !selected,
       })}
       key={issue.key}
       onClick={() => props.onClick(issue.key)}
       role="region"
       ref={ref}
-      aria-label={issue.message}>
+      aria-label={issue.message}
+    >
       <IssueTypeIcon
         className="big-spacer-right spacer-left"
         fill={colors.baseFontColor}
diff --git a/server/sonar-web/src/main/js/components/issue/IssueView.tsx b/server/sonar-web/src/main/js/components/issue/IssueView.tsx
index b01c9e69c4f..d95dd6fd87f 100644
--- a/server/sonar-web/src/main/js/components/issue/IssueView.tsx
+++ b/server/sonar-web/src/main/js/components/issue/IssueView.tsx
@@ -76,7 +76,7 @@ export default class IssueView extends React.PureComponent<Props> {
       currentPopup,
       displayWhyIsThisAnIssue,
       displayLocationsLink,
-      displayLocationsCount
+      displayLocationsCount,
     } = this.props;
 
     const hasCheckbox = this.props.onCheck != null;
@@ -85,7 +85,7 @@ export default class IssueView extends React.PureComponent<Props> {
       'no-click': this.props.onClick === undefined,
       hotspot: issue.type === 'SECURITY_HOTSPOT',
       'issue-with-checkbox': hasCheckbox,
-      selected: this.props.selected
+      selected: this.props.selected,
     });
 
     return (
@@ -93,7 +93,8 @@ export default class IssueView extends React.PureComponent<Props> {
         className={issueClass}
         onClick={this.handleClick}
         role="region"
-        aria-label={issue.message}>
+        aria-label={issue.message}
+      >
         {hasCheckbox && (
           <Checkbox
             checked={checked || false}
@@ -123,7 +124,7 @@ export default class IssueView extends React.PureComponent<Props> {
         />
         {issue.comments && issue.comments.length > 0 && (
           <div className="issue-comments">
-            {issue.comments.map(comment => (
+            {issue.comments.map((comment) => (
               <IssueCommentLine
                 comment={comment}
                 key={comment.key}
diff --git a/server/sonar-web/src/main/js/components/issue/__tests__/IssueView-test.tsx b/server/sonar-web/src/main/js/components/issue/__tests__/IssueView-test.tsx
index 8af5f2827d4..af1bb48f42e 100644
--- a/server/sonar-web/src/main/js/components/issue/__tests__/IssueView-test.tsx
+++ b/server/sonar-web/src/main/js/components/issue/__tests__/IssueView-test.tsx
@@ -47,9 +47,9 @@ function shallowRender(props: Partial<IssueView['props']> = {}) {
             authorLogin: 'admin',
             authorName: 'Admin',
             authorAvatar: 'admin-avatar',
-            authorActive: true
-          }
-        ]
+            authorActive: true,
+          },
+        ],
       })}
       onAssign={jest.fn()}
       onChange={jest.fn()}
diff --git a/server/sonar-web/src/main/js/components/issue/__tests__/actions-test.ts b/server/sonar-web/src/main/js/components/issue/__tests__/actions-test.ts
index 44aa7a71e40..1257f89f587 100644
--- a/server/sonar-web/src/main/js/components/issue/__tests__/actions-test.ts
+++ b/server/sonar-web/src/main/js/components/issue/__tests__/actions-test.ts
@@ -26,7 +26,7 @@ import { updateIssue } from '../actions';
 jest.mock('../../../helpers/error', () => ({ throwGlobalError: jest.fn() }));
 
 jest.mock('../../../helpers/issues', () => ({
-  parseIssueFromResponse: jest.fn()
+  parseIssueFromResponse: jest.fn(),
 }));
 
 describe('updateIssue', () => {
@@ -36,7 +36,7 @@ describe('updateIssue', () => {
   const parsedIssue = mockIssue(false, { key: 'parsed' });
   const successPromise = jest.fn().mockResolvedValue({
     issue: mockIssue(),
-    components: [mockComponent()]
+    components: [mockComponent()],
   });
   const errorPromise = jest.fn().mockRejectedValue(null);
   (parseIssueFromResponse as jest.Mock).mockReturnValue(parsedIssue);
diff --git a/server/sonar-web/src/main/js/components/issue/__tests__/issue-test.tsx b/server/sonar-web/src/main/js/components/issue/__tests__/issue-test.tsx
index b99f62cb3e7..fdc82bfb546 100644
--- a/server/sonar-web/src/main/js/components/issue/__tests__/issue-test.tsx
+++ b/server/sonar-web/src/main/js/components/issue/__tests__/issue-test.tsx
@@ -43,10 +43,10 @@ it('should call the proper function with the proper props when pressing shortcut
         authorLogin: 'admin',
         authorName: 'Admin',
         authorAvatar: 'admin-avatar',
-        authorActive: true
-      }
+        authorActive: true,
+      },
     ],
-    actions: ['assign']
+    actions: ['assign'],
   });
 
   shallowRender({ onPopupToggle, issue, onCheck });
@@ -97,9 +97,9 @@ function shallowRender(props: Partial<Issue['props']> = {}) {
             authorLogin: 'admin',
             authorName: 'Admin',
             authorAvatar: 'admin-avatar',
-            authorActive: true
-          }
-        ]
+            authorActive: true,
+          },
+        ],
       })}
       onChange={jest.fn()}
       onCheck={jest.fn()}
diff --git a/server/sonar-web/src/main/js/components/issue/actions.ts b/server/sonar-web/src/main/js/components/issue/actions.ts
index e84b3a5fcd7..f716c11614d 100644
--- a/server/sonar-web/src/main/js/components/issue/actions.ts
+++ b/server/sonar-web/src/main/js/components/issue/actions.ts
@@ -34,7 +34,7 @@ export const updateIssue = (
   }
 
   resultPromise.then(
-    response => {
+    (response) => {
       if (!optimisticUpdate) {
         const issue = parseIssueFromResponse(
           response.issue,
@@ -45,7 +45,7 @@ export const updateIssue = (
         onChange(issue);
       }
     },
-    param => {
+    (param) => {
       if (optimisticUpdate) {
         onChange(oldIssue!);
       }
diff --git a/server/sonar-web/src/main/js/components/issue/components/IssueActionsBar.tsx b/server/sonar-web/src/main/js/components/issue/components/IssueActionsBar.tsx
index 3a59bc53f32..35f9da37dce 100644
--- a/server/sonar-web/src/main/js/components/issue/components/IssueActionsBar.tsx
+++ b/server/sonar-web/src/main/js/components/issue/components/IssueActionsBar.tsx
@@ -48,7 +48,7 @@ interface State {
 export default class IssueActionsBar extends React.PureComponent<Props, State> {
   state: State = {
     commentAutoTriggered: false,
-    commentPlaceholder: ''
+    commentPlaceholder: '',
   };
 
   setIssueProperty = (
@@ -73,7 +73,7 @@ export default class IssueActionsBar extends React.PureComponent<Props, State> {
   toggleComment = (open: boolean | undefined, placeholder = '', autoTriggered = false) => {
     this.setState({
       commentPlaceholder: placeholder,
-      commentAutoTriggered: autoTriggered
+      commentAutoTriggered: autoTriggered,
     });
     this.props.togglePopup('comment', open);
   };
diff --git a/server/sonar-web/src/main/js/components/issue/components/IssueAssign.tsx b/server/sonar-web/src/main/js/components/issue/components/IssueAssign.tsx
index a73c45bd463..a03206aac1b 100644
--- a/server/sonar-web/src/main/js/components/issue/components/IssueAssign.tsx
+++ b/server/sonar-web/src/main/js/components/issue/components/IssueAssign.tsx
@@ -77,7 +77,8 @@ export default class IssueAssign extends React.PureComponent<Props> {
             closeOnEscape={true}
             onRequestClose={this.handleClose}
             open={isOpen}
-            overlay={<SetAssigneePopup onSelect={this.props.onAssign} />}>
+            overlay={<SetAssigneePopup onSelect={this.props.onAssign} />}
+          >
             <Tooltip overlay={assigneeName}>
               <ButtonLink
                 aria-expanded={isOpen}
@@ -90,7 +91,8 @@ export default class IssueAssign extends React.PureComponent<Props> {
                     : translate('issue.assign.unassigned_click_to_assign')
                 }
                 className="issue-action issue-action-with-options js-issue-assign"
-                onClick={this.toggleAssign}>
+                onClick={this.toggleAssign}
+              >
                 {this.renderAssignee()}
                 <DropdownIcon className="little-spacer-left" />
               </ButtonLink>
diff --git a/server/sonar-web/src/main/js/components/issue/components/IssueChangelog.tsx b/server/sonar-web/src/main/js/components/issue/components/IssueChangelog.tsx
index f6e1a007a5d..2b6c1da8d4c 100644
--- a/server/sonar-web/src/main/js/components/issue/components/IssueChangelog.tsx
+++ b/server/sonar-web/src/main/js/components/issue/components/IssueChangelog.tsx
@@ -51,11 +51,13 @@ export default class IssueChangelog extends React.PureComponent<Props> {
         <Toggler
           onRequestClose={this.handleClose}
           open={this.props.isOpen}
-          overlay={<ChangelogPopup issue={this.props.issue} />}>
+          overlay={<ChangelogPopup issue={this.props.issue} />}
+        >
           <ButtonLink
             aria-expanded={this.props.isOpen}
             className="issue-action issue-action-with-options js-issue-show-changelog"
-            onClick={this.handleClick}>
+            onClick={this.handleClick}
+          >
             <span className="issue-meta-label">
               <DateFromNow date={this.props.creationDate} />
             </span>
diff --git a/server/sonar-web/src/main/js/components/issue/components/IssueCommentAction.tsx b/server/sonar-web/src/main/js/components/issue/components/IssueCommentAction.tsx
index c49eae1847c..67c80ec2c81 100644
--- a/server/sonar-web/src/main/js/components/issue/components/IssueCommentAction.tsx
+++ b/server/sonar-web/src/main/js/components/issue/components/IssueCommentAction.tsx
@@ -92,12 +92,14 @@ export default class IssueCommentAction extends React.PureComponent<Props> {
                 toggleComment={this.props.toggleComment}
               />
             )
-          }>
+          }
+        >
           <ButtonLink
             aria-expanded={this.props.currentPopup === 'comment'}
             aria-label={translate('issue.comment.add_comment')}
             className="issue-action js-issue-comment"
-            onClick={this.handleCommentClick}>
+            onClick={this.handleCommentClick}
+          >
             <span className="issue-meta-label">
               {showCommentsInPopup && comments && (
                 <span>
diff --git a/server/sonar-web/src/main/js/components/issue/components/IssueCommentLine.tsx b/server/sonar-web/src/main/js/components/issue/components/IssueCommentLine.tsx
index ef92ab77262..8cd3cd98ad5 100644
--- a/server/sonar-web/src/main/js/components/issue/components/IssueCommentLine.tsx
+++ b/server/sonar-web/src/main/js/components/issue/components/IssueCommentLine.tsx
@@ -41,7 +41,7 @@ interface State {
 
 export default class IssueCommentLine extends React.PureComponent<Props, State> {
   state: State = {
-    openPopup: ''
+    openPopup: '',
   };
 
   handleEdit = (text: string) => {
@@ -55,7 +55,7 @@ export default class IssueCommentLine extends React.PureComponent<Props, State>
   };
 
   togglePopup = (popupName: string, force?: boolean) => {
-    this.setState(prevState => {
+    this.setState((prevState) => {
       if (prevState.openPopup !== popupName && force !== false) {
         return { openPopup: popupName };
       } else if (prevState.openPopup === popupName && force !== true) {
@@ -119,7 +119,8 @@ export default class IssueCommentLine extends React.PureComponent<Props, State>
                     placement={PopupPlacement.BottomRight}
                     toggleComment={this.toggleEditPopup}
                   />
-                }>
+                }
+              >
                 <EditButton
                   aria-label={translate('issue.comment.edit')}
                   className="js-issue-comment-edit button-small"
@@ -133,7 +134,8 @@ export default class IssueCommentLine extends React.PureComponent<Props, State>
               <Toggler
                 onRequestClose={this.closePopups}
                 open={this.state.openPopup === 'delete'}
-                overlay={<CommentDeletePopup onDelete={this.handleDelete} />}>
+                overlay={<CommentDeletePopup onDelete={this.handleDelete} />}
+              >
                 <DeleteButton
                   aria-label={translate('issue.comment.delete')}
                   className="js-issue-comment-delete button-small"
diff --git a/server/sonar-web/src/main/js/components/issue/components/IssueMessage.tsx b/server/sonar-web/src/main/js/components/issue/components/IssueMessage.tsx
index df6c0798b3c..c692a2f01ae 100644
--- a/server/sonar-web/src/main/js/components/issue/components/IssueMessage.tsx
+++ b/server/sonar-web/src/main/js/components/issue/components/IssueMessage.tsx
@@ -34,14 +34,8 @@ export interface IssueMessageProps {
 }
 
 export default function IssueMessage(props: IssueMessageProps) {
-  const {
-    engine,
-    quickFixAvailable,
-    message,
-    ruleKey,
-    ruleStatus,
-    displayWhyIsThisAnIssue
-  } = props;
+  const { engine, quickFixAvailable, message, ruleKey, ruleStatus, displayWhyIsThisAnIssue } =
+    props;
 
   const { openRule } = React.useContext(WorkspaceContext);
 
@@ -61,9 +55,10 @@ export default function IssueMessage(props: IssueMessageProps) {
           className="issue-see-rule spacer-right text-baseline"
           onClick={() =>
             openRule({
-              key: ruleKey
+              key: ruleKey,
             })
-          }>
+          }
+        >
           {translate('issue.why_this_issue')}
         </ButtonLink>
       )}
diff --git a/server/sonar-web/src/main/js/components/issue/components/IssueMessageTags.tsx b/server/sonar-web/src/main/js/components/issue/components/IssueMessageTags.tsx
index 77e20ad10a7..6cc8d1599fa 100644
--- a/server/sonar-web/src/main/js/components/issue/components/IssueMessageTags.tsx
+++ b/server/sonar-web/src/main/js/components/issue/components/IssueMessageTags.tsx
@@ -51,14 +51,16 @@ export default function IssueMessageTags(props: IssueMessageTagsProps) {
                 link: (
                   <Link
                     to="https://www.sonarqube.org/sonarlint/?referrer=sonarqube-quick-fix"
-                    target="_blank">
+                    target="_blank"
+                  >
                     SonarLint
                   </Link>
-                )
+                ),
               }}
             />
           }
-          mouseLeaveDelay={0.5}>
+          mouseLeaveDelay={0.5}
+        >
           <SonarLintIcon
             className="it__issues-sonarlint-quick-fix spacer-right"
             size={15}
@@ -73,9 +75,10 @@ export default function IssueMessageTags(props: IssueMessageTagsProps) {
           links={[
             {
               href: '/user-guide/rules/',
-              label: translateWithParameters('see_x', translate('rules'))
-            }
-          ]}>
+              label: translateWithParameters('see_x', translate('rules')),
+            },
+          ]}
+        >
           <span className="spacer-right badge badge-error">
             {translate('issue.resolution.badge', ruleStatus)}
           </span>
diff --git a/server/sonar-web/src/main/js/components/issue/components/IssueSeverity.tsx b/server/sonar-web/src/main/js/components/issue/components/IssueSeverity.tsx
index 80541df4723..08cf4414d7d 100644
--- a/server/sonar-web/src/main/js/components/issue/components/IssueSeverity.tsx
+++ b/server/sonar-web/src/main/js/components/issue/components/IssueSeverity.tsx
@@ -62,7 +62,8 @@ export default class IssueSeverity extends React.PureComponent<Props> {
           <Toggler
             onRequestClose={this.handleClose}
             open={this.props.isOpen && this.props.canSetSeverity}
-            overlay={<SetSeverityPopup issue={issue} onSelect={this.setSeverity} />}>
+            overlay={<SetSeverityPopup issue={issue} onSelect={this.setSeverity} />}
+          >
             <ButtonLink
               aria-label={translateWithParameters(
                 'issue.severity.severity_x_click_to_change',
@@ -70,7 +71,8 @@ export default class IssueSeverity extends React.PureComponent<Props> {
               )}
               aria-expanded={this.props.isOpen}
               className="issue-action issue-action-with-options js-issue-set-severity"
-              onClick={this.toggleSetSeverity}>
+              onClick={this.toggleSetSeverity}
+            >
               <SeverityHelper className="issue-meta-label" severity={issue.severity} />
               <DropdownIcon className="little-spacer-left" />
             </ButtonLink>
diff --git a/server/sonar-web/src/main/js/components/issue/components/IssueTags.tsx b/server/sonar-web/src/main/js/components/issue/components/IssueTags.tsx
index 0f47eba80e0..6dfefa827f0 100644
--- a/server/sonar-web/src/main/js/components/issue/components/IssueTags.tsx
+++ b/server/sonar-web/src/main/js/components/issue/components/IssueTags.tsx
@@ -65,11 +65,13 @@ export default class IssueTags extends React.PureComponent<Props> {
           <Toggler
             onRequestClose={this.handleClose}
             open={this.props.isOpen}
-            overlay={<SetIssueTagsPopup selectedTags={tags} setTags={this.setTags} />}>
+            overlay={<SetIssueTagsPopup selectedTags={tags} setTags={this.setTags} />}
+          >
             <ButtonLink
               aria-expanded={this.props.isOpen}
               className="issue-action issue-action-with-options js-issue-edit-tags"
-              onClick={this.toggleSetTags}>
+              onClick={this.toggleSetTags}
+            >
               <TagsList
                 allowUpdate={this.props.canSetTags}
                 tags={
diff --git a/server/sonar-web/src/main/js/components/issue/components/IssueTitleBar.tsx b/server/sonar-web/src/main/js/components/issue/components/IssueTitleBar.tsx
index 75fc9e1b3bc..3fb1ec8dae3 100644
--- a/server/sonar-web/src/main/js/components/issue/components/IssueTitleBar.tsx
+++ b/server/sonar-web/src/main/js/components/issue/components/IssueTitleBar.tsx
@@ -58,7 +58,8 @@ export default function IssueTitleBar(props: IssueTitleBarProps) {
       overlay={translateWithParameters(
         'issue.this_issue_involves_x_code_locations',
         formatMeasure(locationsCount, 'INT')
-      )}>
+      )}
+    >
       <LocationIndex>{locationsCount}</LocationIndex>
     </Tooltip>
   );
@@ -69,7 +70,7 @@ export default function IssueTitleBar(props: IssueTitleBarProps) {
     ...getBranchLikeQuery(props.branchLike),
     issues: issue.key,
     open: issue.key,
-    types: issue.type === 'SECURITY_HOTSPOT' ? issue.type : undefined
+    types: issue.type === 'SECURITY_HOTSPOT' ? issue.type : undefined,
   });
 
   return (
@@ -115,7 +116,8 @@ export default function IssueTitleBar(props: IssueTitleBarProps) {
               className="js-issue-permalink link-no-underline"
               target="_blank"
               title={translate('permalink')}
-              to={issueUrl}>
+              to={issueUrl}
+            >
               <LinkIcon />
             </Link>
           </div>
diff --git a/server/sonar-web/src/main/js/components/issue/components/IssueTransition.tsx b/server/sonar-web/src/main/js/components/issue/components/IssueTransition.tsx
index 254b36eb5a2..93fc4fc5499 100644
--- a/server/sonar-web/src/main/js/components/issue/components/IssueTransition.tsx
+++ b/server/sonar-web/src/main/js/components/issue/components/IssueTransition.tsx
@@ -64,7 +64,8 @@ export default class IssueTransition extends React.PureComponent<Props> {
             open={this.props.isOpen && this.props.hasTransitions}
             overlay={
               <SetTransitionPopup onSelect={this.setTransition} transitions={issue.transitions} />
-            }>
+            }
+          >
             <ButtonLink
               aria-label={translateWithParameters(
                 'issue.transition.status_x_click_to_change',
@@ -72,7 +73,8 @@ export default class IssueTransition extends React.PureComponent<Props> {
               )}
               aria-expanded={this.props.isOpen}
               className="issue-action issue-action-with-options js-issue-transition"
-              onClick={this.toggleSetTransition}>
+              onClick={this.toggleSetTransition}
+            >
               <StatusHelper
                 className="issue-meta-label"
                 resolution={issue.resolution}
diff --git a/server/sonar-web/src/main/js/components/issue/components/IssueType.tsx b/server/sonar-web/src/main/js/components/issue/components/IssueType.tsx
index 7170c0a09ac..1e304a52a51 100644
--- a/server/sonar-web/src/main/js/components/issue/components/IssueType.tsx
+++ b/server/sonar-web/src/main/js/components/issue/components/IssueType.tsx
@@ -63,7 +63,8 @@ export default class IssueType extends React.PureComponent<Props> {
           <Toggler
             onRequestClose={this.handleClose}
             open={this.props.isOpen && this.props.canSetType}
-            overlay={<SetTypePopup issue={issue} onSelect={this.setType} />}>
+            overlay={<SetTypePopup issue={issue} onSelect={this.setType} />}
+          >
             <ButtonLink
               aria-label={translateWithParameters(
                 'issue.type.type_x_click_to_change',
@@ -71,7 +72,8 @@ export default class IssueType extends React.PureComponent<Props> {
               )}
               aria-expanded={this.props.isOpen}
               className="issue-action issue-action-with-options js-issue-set-type"
-              onClick={this.toggleSetType}>
+              onClick={this.toggleSetType}
+            >
               <IssueTypeIcon
                 className="little-spacer-right"
                 fill={colors.baseFontColor}
diff --git a/server/sonar-web/src/main/js/components/issue/components/SimilarIssuesFilter.tsx b/server/sonar-web/src/main/js/components/issue/components/SimilarIssuesFilter.tsx
index 23c710a18c6..3179b6c96cd 100644
--- a/server/sonar-web/src/main/js/components/issue/components/SimilarIssuesFilter.tsx
+++ b/server/sonar-web/src/main/js/components/issue/components/SimilarIssuesFilter.tsx
@@ -55,13 +55,15 @@ export default class SimilarIssuesFilter extends React.PureComponent<Props> {
         <Toggler
           onRequestClose={this.handleClose}
           open={this.props.isOpen}
-          overlay={<SimilarIssuesPopup issue={this.props.issue} onFilter={this.handleFilter} />}>
+          overlay={<SimilarIssuesPopup issue={this.props.issue} onFilter={this.handleFilter} />}
+        >
           <ButtonLink
             aria-label={translate('issue.filter_similar_issues')}
             aria-expanded={this.props.isOpen}
             className="issue-action issue-action-with-options js-issue-filter"
             onClick={this.togglePopup}
-            title={translate('issue.filter_similar_issues')}>
+            title={translate('issue.filter_similar_issues')}
+          >
             <FilterIcon />
             <DropdownIcon />
           </ButtonLink>
diff --git a/server/sonar-web/src/main/js/components/issue/components/__tests__/IssueAssign-test.tsx b/server/sonar-web/src/main/js/components/issue/components/__tests__/IssueAssign-test.tsx
index c6d1c95f5a5..b2315504fec 100644
--- a/server/sonar-web/src/main/js/components/issue/components/__tests__/IssueAssign-test.tsx
+++ b/server/sonar-web/src/main/js/components/issue/components/__tests__/IssueAssign-test.tsx
@@ -26,7 +26,7 @@ import IssueAssign from '../IssueAssign';
 const issue = mockIssue(false, {
   assignee: 'john',
   assigneeAvatar: 'gravatarhash',
-  assigneeName: 'John Doe'
+  assigneeName: 'John Doe',
 });
 
 it('should render without the action when the correct rights are missing', () => {
diff --git a/server/sonar-web/src/main/js/components/issue/components/__tests__/IssueChangelog-test.tsx b/server/sonar-web/src/main/js/components/issue/components/__tests__/IssueChangelog-test.tsx
index 5a6239cfb82..5f5c1b841fd 100644
--- a/server/sonar-web/src/main/js/components/issue/components/__tests__/IssueChangelog-test.tsx
+++ b/server/sonar-web/src/main/js/components/issue/components/__tests__/IssueChangelog-test.tsx
@@ -25,7 +25,7 @@ import IssueChangelog from '../IssueChangelog';
 const issue = {
   key: 'issuekey',
   author: 'john.david.dalton@gmail.com',
-  creationDate: '2017-03-01T09:36:01+0100'
+  creationDate: '2017-03-01T09:36:01+0100',
 };
 
 it('should render correctly', () => {
diff --git a/server/sonar-web/src/main/js/components/issue/components/__tests__/IssueChangelogDiff-test.tsx b/server/sonar-web/src/main/js/components/issue/components/__tests__/IssueChangelogDiff-test.tsx
index 6bb80241d49..5710a4a030d 100644
--- a/server/sonar-web/src/main/js/components/issue/components/__tests__/IssueChangelogDiff-test.tsx
+++ b/server/sonar-web/src/main/js/components/issue/components/__tests__/IssueChangelogDiff-test.tsx
@@ -39,8 +39,8 @@ it('should render correctly branch diff', () => {
         // Legacy key
         key: 'from_long_branch',
         oldValue: 'foo',
-        newValue: 'bar'
-      }
+        newValue: 'bar',
+      },
     })
   ).toMatchSnapshot();
 
@@ -50,8 +50,8 @@ it('should render correctly branch diff', () => {
         // Legacy key
         key: 'from_short_branch',
         oldValue: 'foo',
-        newValue: 'bar'
-      }
+        newValue: 'bar',
+      },
     })
   ).toMatchSnapshot();
 
@@ -60,8 +60,8 @@ it('should render correctly branch diff', () => {
       diff: {
         key: 'from_branch',
         oldValue: 'foo',
-        newValue: 'bar'
-      }
+        newValue: 'bar',
+      },
     })
   ).toMatchSnapshot();
 });
diff --git a/server/sonar-web/src/main/js/components/issue/components/__tests__/IssueCommentLine-test.tsx b/server/sonar-web/src/main/js/components/issue/components/__tests__/IssueCommentLine-test.tsx
index f1792a2a5a3..1f0fdbdaec5 100644
--- a/server/sonar-web/src/main/js/components/issue/components/__tests__/IssueCommentLine-test.tsx
+++ b/server/sonar-web/src/main/js/components/issue/components/__tests__/IssueCommentLine-test.tsx
@@ -32,7 +32,7 @@ const comment: IssueComment = {
   htmlText: '<b>test</b>',
   key: 'comment-key',
   markdown: '*test*',
-  updatable: true
+  updatable: true,
 };
 
 it('should render correctly a comment that is updatable', () => {
@@ -56,7 +56,7 @@ it('should open the right popups when the buttons are clicked', () => {
 it('should render correctly a comment with a deleted author', () => {
   expect(
     shallowRender({
-      comment: { ...comment, authorActive: false, authorName: undefined }
+      comment: { ...comment, authorActive: false, authorName: undefined },
     }).find('.issue-comment-author')
   ).toMatchSnapshot();
 });
diff --git a/server/sonar-web/src/main/js/components/issue/components/__tests__/IssueMessage-test.tsx b/server/sonar-web/src/main/js/components/issue/components/__tests__/IssueMessage-test.tsx
index 2ca70c90b5a..e78337e65dd 100644
--- a/server/sonar-web/src/main/js/components/issue/components/__tests__/IssueMessage-test.tsx
+++ b/server/sonar-web/src/main/js/components/issue/components/__tests__/IssueMessage-test.tsx
@@ -28,7 +28,7 @@ jest.mock('react', () => {
     ...jest.requireActual('react'),
     useContext: jest
       .fn()
-      .mockImplementation(() => ({ externalRulesRepoNames: {}, openRule: jest.fn() }))
+      .mockImplementation(() => ({ externalRulesRepoNames: {}, openRule: jest.fn() })),
   };
 });
 
@@ -49,7 +49,7 @@ it('should open why is this an issue workspace', () => {
   const openRule = jest.fn();
   (React.useContext as jest.Mock).mockImplementationOnce(() => ({
     externalRulesRepoNames: {},
-    openRule
+    openRule,
   }));
   const wrapper = shallowRender();
   wrapper.find(ButtonLink).simulate('click');
diff --git a/server/sonar-web/src/main/js/components/issue/components/__tests__/IssueTitleBar-test.tsx b/server/sonar-web/src/main/js/components/issue/components/__tests__/IssueTitleBar-test.tsx
index 7178fa1a17a..b2e3bd837d7 100644
--- a/server/sonar-web/src/main/js/components/issue/components/__tests__/IssueTitleBar-test.tsx
+++ b/server/sonar-web/src/main/js/components/issue/components/__tests__/IssueTitleBar-test.tsx
@@ -34,7 +34,7 @@ it('should render correctly', () => {
       branchLike: mockBranch(),
       displayLocationsCount: true,
       displayLocationsLink: true,
-      issue: mockIssue(true)
+      issue: mockIssue(true),
     })
   ).toMatchSnapshot('with multi locations and link');
 });
diff --git a/server/sonar-web/src/main/js/components/issue/components/__tests__/IssueTransition-test.tsx b/server/sonar-web/src/main/js/components/issue/components/__tests__/IssueTransition-test.tsx
index 52277de1b71..2e283261425 100644
--- a/server/sonar-web/src/main/js/components/issue/components/__tests__/IssueTransition-test.tsx
+++ b/server/sonar-web/src/main/js/components/issue/components/__tests__/IssueTransition-test.tsx
@@ -25,14 +25,14 @@ const issue: IssueTransition['props']['issue'] = {
   key: 'foo1234',
   transitions: ['confirm', 'resolve', 'falsepositive', 'wontfix'],
   status: 'OPEN',
-  type: 'BUG'
+  type: 'BUG',
 };
 
 it('should render without the action when there is no transitions', () => {
   expect(
     shallowRender({
       hasTransitions: false,
-      issue: { key: 'foo1234', transitions: [], status: 'CLOSED', type: 'BUG' }
+      issue: { key: 'foo1234', transitions: [], status: 'CLOSED', type: 'BUG' },
     })
   ).toMatchSnapshot();
 });
diff --git a/server/sonar-web/src/main/js/components/issue/popups/ChangelogPopup.tsx b/server/sonar-web/src/main/js/components/issue/popups/ChangelogPopup.tsx
index c2ad03648ed..0f36df70577 100644
--- a/server/sonar-web/src/main/js/components/issue/popups/ChangelogPopup.tsx
+++ b/server/sonar-web/src/main/js/components/issue/popups/ChangelogPopup.tsx
@@ -105,7 +105,7 @@ export default class ChangelogPopup extends React.PureComponent<Props, State> {
                             item.webhookSource
                           )}
                       </p>
-                      {item.diffs.map(diff => (
+                      {item.diffs.map((diff) => (
                         <IssueChangelogDiff diff={diff} key={diff.key} />
                       ))}
                     </td>
diff --git a/server/sonar-web/src/main/js/components/issue/popups/CommentForm.tsx b/server/sonar-web/src/main/js/components/issue/popups/CommentForm.tsx
index e6edbaac200..f5369c3d0fe 100644
--- a/server/sonar-web/src/main/js/components/issue/popups/CommentForm.tsx
+++ b/server/sonar-web/src/main/js/components/issue/popups/CommentForm.tsx
@@ -71,7 +71,8 @@ export default function CommentForm(props: CommentFormProps) {
             onClick={() => {
               props.onSaveComment(editComment);
               setEditComment('');
-            }}>
+            }}
+          >
             {comment ? translate('save') : translate('issue.comment.submit')}
           </Button>
           {showCancelButton && (
@@ -82,7 +83,8 @@ export default function CommentForm(props: CommentFormProps) {
                   ? translate('issue.comment.edit.cancel')
                   : translate('issue.comment.add_comment.cancel')
               }
-              onClick={() => props.onCancel()}>
+              onClick={() => props.onCancel()}
+            >
               {autoTriggered ? translate('skip') : translate('cancel')}
             </ResetButtonLink>
           )}
diff --git a/server/sonar-web/src/main/js/components/issue/popups/CommentList.tsx b/server/sonar-web/src/main/js/components/issue/popups/CommentList.tsx
index 5f387d52fb4..3dda0a946db 100644
--- a/server/sonar-web/src/main/js/components/issue/popups/CommentList.tsx
+++ b/server/sonar-web/src/main/js/components/issue/popups/CommentList.tsx
@@ -43,7 +43,7 @@ export default function CommentList(props: CommentListProps) {
   );
   return (
     <div className="issue-comment-list-wrapper spacer-bottom">
-      {sortedComments?.map(c => (
+      {sortedComments?.map((c) => (
         <CommentTile
           comment={c}
           key={c.key}
diff --git a/server/sonar-web/src/main/js/components/issue/popups/CommentTile.tsx b/server/sonar-web/src/main/js/components/issue/popups/CommentTile.tsx
index 63cd62e1fb8..7445b1e18c8 100644
--- a/server/sonar-web/src/main/js/components/issue/popups/CommentTile.tsx
+++ b/server/sonar-web/src/main/js/components/issue/popups/CommentTile.tsx
@@ -38,7 +38,7 @@ interface CommentTileState {
 
 export default class CommentTile extends React.PureComponent<CommentTileProps, CommentTileState> {
   state = {
-    showEditArea: false
+    showEditArea: false,
   };
 
   handleEditClick = () => {
diff --git a/server/sonar-web/src/main/js/components/issue/popups/SetAssigneePopup.tsx b/server/sonar-web/src/main/js/components/issue/popups/SetAssigneePopup.tsx
index 28260c4d74d..62bc84c82e4 100644
--- a/server/sonar-web/src/main/js/components/issue/popups/SetAssigneePopup.tsx
+++ b/server/sonar-web/src/main/js/components/issue/popups/SetAssigneePopup.tsx
@@ -56,7 +56,7 @@ export class SetAssigneePopup extends React.PureComponent<Props, State> {
     this.state = {
       query: '',
       users: this.defaultUsersArray,
-      currentUser: this.defaultUsersArray.length > 0 ? this.defaultUsersArray[0].login : ''
+      currentUser: this.defaultUsersArray.length > 0 ? this.defaultUsersArray[0].login : '',
     };
   }
 
@@ -68,7 +68,7 @@ export class SetAssigneePopup extends React.PureComponent<Props, State> {
     const activeUsers = users.filter(isUserActive);
     this.setState({
       users: activeUsers,
-      currentUser: activeUsers.length > 0 ? activeUsers[0].login : ''
+      currentUser: activeUsers.length > 0 ? activeUsers[0].login : '',
     });
   };
 
@@ -77,7 +77,7 @@ export class SetAssigneePopup extends React.PureComponent<Props, State> {
       this.setState({
         query,
         users: this.defaultUsersArray,
-        currentUser: this.defaultUsersArray[0].login
+        currentUser: this.defaultUsersArray[0].login,
       });
     } else {
       this.setState({ query });
@@ -102,8 +102,9 @@ export class SetAssigneePopup extends React.PureComponent<Props, State> {
           <SelectList
             currentItem={this.state.currentUser}
             items={map(this.state.users, 'login')}
-            onSelect={this.props.onSelect}>
-            {this.state.users.map(user => (
+            onSelect={this.props.onSelect}
+          >
+            {this.state.users.map((user) => (
               <SelectListItem item={user.login} key={user.login}>
                 {!!user.login && (
                   <Avatar className="spacer-right" hash={user.avatar} name={user.name} size={16} />
diff --git a/server/sonar-web/src/main/js/components/issue/popups/SetIssueTagsPopup.tsx b/server/sonar-web/src/main/js/components/issue/popups/SetIssueTagsPopup.tsx
index 4f9092e80e9..9b6da294e82 100644
--- a/server/sonar-web/src/main/js/components/issue/popups/SetIssueTagsPopup.tsx
+++ b/server/sonar-web/src/main/js/components/issue/popups/SetIssueTagsPopup.tsx
@@ -52,7 +52,7 @@ export default class SetIssueTagsPopup extends React.PureComponent<Props, State>
     return searchIssueTags({
       all: true,
       q: query,
-      ps: Math.min(this.props.selectedTags.length - 1 + LIST_SIZE, MAX_LIST_SIZE)
+      ps: Math.min(this.props.selectedTags.length - 1 + LIST_SIZE, MAX_LIST_SIZE),
     }).then(
       (tags: string[]) => {
         if (this.mounted) {
diff --git a/server/sonar-web/src/main/js/components/issue/popups/SetSeverityPopup.tsx b/server/sonar-web/src/main/js/components/issue/popups/SetSeverityPopup.tsx
index 26e3714bbf5..4f3e95e424f 100644
--- a/server/sonar-web/src/main/js/components/issue/popups/SetSeverityPopup.tsx
+++ b/server/sonar-web/src/main/js/components/issue/popups/SetSeverityPopup.tsx
@@ -36,7 +36,7 @@ export default function SetSeverityPopup({ issue, onSelect }: Props) {
   return (
     <DropdownOverlay>
       <SelectList currentItem={issue.severity} items={SEVERITY} onSelect={onSelect}>
-        {SEVERITY.map(severity => (
+        {SEVERITY.map((severity) => (
           <SelectListItem className="display-flex-center" item={severity} key={severity}>
             <SeverityIcon className="little-spacer-right" severity={severity} />
             {translate('severity', severity)}
diff --git a/server/sonar-web/src/main/js/components/issue/popups/SetTransitionPopup.tsx b/server/sonar-web/src/main/js/components/issue/popups/SetTransitionPopup.tsx
index 7105e258d82..6dffa95f462 100644
--- a/server/sonar-web/src/main/js/components/issue/popups/SetTransitionPopup.tsx
+++ b/server/sonar-web/src/main/js/components/issue/popups/SetTransitionPopup.tsx
@@ -34,7 +34,7 @@ export default function SetTransitionPopup({ onSelect, transitions }: Props) {
   return (
     <DropdownOverlay>
       <SelectList currentItem={transitions[0]} items={transitions} onSelect={onSelect}>
-        {transitions.map(transition => {
+        {transitions.map((transition) => {
           const [name, description] = translateTransition(transition);
           return (
             <SelectListItem item={transition} key={transition} title={description}>
@@ -59,8 +59,8 @@ function translateTransition(transition: string) {
           <Link to="https://community.sonarsource.com/" target="_blank">
             {translate('issue.transition.community_plug_link')}
           </Link>
-        )
+        ),
       }}
-    />
+    />,
   ];
 }
diff --git a/server/sonar-web/src/main/js/components/issue/popups/SetTypePopup.tsx b/server/sonar-web/src/main/js/components/issue/popups/SetTypePopup.tsx
index 075a032fc95..02524b57716 100644
--- a/server/sonar-web/src/main/js/components/issue/popups/SetTypePopup.tsx
+++ b/server/sonar-web/src/main/js/components/issue/popups/SetTypePopup.tsx
@@ -36,7 +36,7 @@ export default function SetTypePopup({ issue, onSelect }: Props) {
   return (
     <DropdownOverlay>
       <SelectList currentItem={issue.type} items={TYPES} onSelect={onSelect}>
-        {TYPES.map(type => (
+        {TYPES.map((type) => (
           <SelectListItem className="display-flex-center" item={type} key={type}>
             <IssueTypeIcon className="little-spacer-right" query={type} />
             {translate('issue.type', type)}
diff --git a/server/sonar-web/src/main/js/components/issue/popups/SimilarIssuesPopup.tsx b/server/sonar-web/src/main/js/components/issue/popups/SimilarIssuesPopup.tsx
index 1f24dd5d81a..303cff9478f 100644
--- a/server/sonar-web/src/main/js/components/issue/popups/SimilarIssuesPopup.tsx
+++ b/server/sonar-web/src/main/js/components/issue/popups/SimilarIssuesPopup.tsx
@@ -51,10 +51,10 @@ export default class SimilarIssuesPopup extends React.PureComponent<Props> {
       'resolution',
       'assignee',
       'rule',
-      ...(issue.tags || []).map(tag => `tag###${tag}`),
+      ...(issue.tags || []).map((tag) => `tag###${tag}`),
       'project',
-      'file'
-    ].filter(item => item) as string[];
+      'file',
+    ].filter((item) => item) as string[];
 
     const assignee = issue.assigneeName || issue.assignee;
 
@@ -68,7 +68,8 @@ export default class SimilarIssuesPopup extends React.PureComponent<Props> {
           className="issues-similar-issues-menu"
           currentItem={items[0]}
           items={items}
-          onSelect={this.handleSelect}>
+          onSelect={this.handleSelect}
+        >
           <SelectListItem className="display-flex-center" item="type">
             <IssueTypeIcon className="little-spacer-right" query={issue.type} />
             {translate('issue.type', issue.type)}
@@ -116,7 +117,7 @@ export default class SimilarIssuesPopup extends React.PureComponent<Props> {
           <SelectListItem item="rule">{limitComponentName(issue.ruleName)}</SelectListItem>
 
           {issue.tags != null &&
-            issue.tags.map(tag => (
+            issue.tags.map((tag) => (
               <SelectListItem item={`tag###${tag}`} key={`tag###${tag}`}>
                 <TagsIcon className="little-spacer-right text-middle" />
                 <span className="text-middle">{tag}</span>
diff --git a/server/sonar-web/src/main/js/components/issue/popups/__tests__/ChangelogPopup-test.tsx b/server/sonar-web/src/main/js/components/issue/popups/__tests__/ChangelogPopup-test.tsx
index f4dc2d36a8e..c7f905e36b8 100644
--- a/server/sonar-web/src/main/js/components/issue/popups/__tests__/ChangelogPopup-test.tsx
+++ b/server/sonar-web/src/main/js/components/issue/popups/__tests__/ChangelogPopup-test.tsx
@@ -32,10 +32,10 @@ jest.mock('../../../../api/issues', () => ({
         isUserActive: true,
         userName: 'John Doe',
         avatar: 'gravatarhash',
-        diffs: [{ key: 'severity', newValue: 'MINOR', oldValue: 'CRITICAL' }]
-      }
-    ]
-  })
+        diffs: [{ key: 'severity', newValue: 'MINOR', oldValue: 'CRITICAL' }],
+      },
+    ],
+  }),
 }));
 
 beforeEach(() => {
@@ -56,9 +56,9 @@ it('should render the changelog popup when we have a deleted user', async () =>
         creationDate: '2017-03-01T09:36:01+0100',
         user: 'john.doe',
         isUserActive: false,
-        diffs: [{ key: 'severity', newValue: 'MINOR', oldValue: 'CRITICAL' }]
-      }
-    ]
+        diffs: [{ key: 'severity', newValue: 'MINOR', oldValue: 'CRITICAL' }],
+      },
+    ],
   });
   const wrapper = shallowRender();
   await waitAndUpdate(wrapper);
@@ -74,9 +74,9 @@ it('should render the changelog popup when change was triggered by a webhook wit
         isUserActive: false,
         diffs: [{ key: 'severity', newValue: 'MINOR', oldValue: 'CRITICAL' }],
         webhookSource: 'GitHub',
-        externalUser: 'toto@github.com'
-      }
-    ]
+        externalUser: 'toto@github.com',
+      },
+    ],
   });
   const wrapper = shallowRender();
   await waitAndUpdate(wrapper);
@@ -91,9 +91,9 @@ it('should render the changelog popup when change was triggered by a webhook wit
         user: null,
         isUserActive: false,
         diffs: [{ key: 'severity', newValue: 'MINOR', oldValue: 'CRITICAL' }],
-        webhookSource: 'GitHub'
-      }
-    ]
+        webhookSource: 'GitHub',
+      },
+    ],
   });
   const wrapper = shallowRender();
   await waitAndUpdate(wrapper);
@@ -109,9 +109,9 @@ it('should render the changelog popup with SQ user when both SQ and external use
         isUserActive: false,
         diffs: [{ key: 'severity', newValue: 'MINOR', oldValue: 'CRITICAL' }],
         webhookSource: 'GitHub',
-        externalUser: 'toto@github.com'
-      }
-    ]
+        externalUser: 'toto@github.com',
+      },
+    ],
   });
   const wrapper = shallowRender();
   await waitAndUpdate(wrapper);
@@ -124,7 +124,7 @@ function shallowRender(props: Partial<ChangelogPopup['props']> = {}) {
       issue={{
         key: 'issuekey',
         author: 'john.david.dalton@gmail.com',
-        creationDate: '2017-03-01T09:36:01+0100'
+        creationDate: '2017-03-01T09:36:01+0100',
       }}
       {...props}
     />
diff --git a/server/sonar-web/src/main/js/components/issue/popups/__tests__/SimilarIssuesPopup-test.tsx b/server/sonar-web/src/main/js/components/issue/popups/__tests__/SimilarIssuesPopup-test.tsx
index 66bbeb8e55e..6e3e7e65a8a 100644
--- a/server/sonar-web/src/main/js/components/issue/popups/__tests__/SimilarIssuesPopup-test.tsx
+++ b/server/sonar-web/src/main/js/components/issue/popups/__tests__/SimilarIssuesPopup-test.tsx
@@ -29,7 +29,7 @@ it('should render correctly', () => {
 it('should render correctly when assigned', () => {
   expect(
     shallowRender({
-      issue: mockIssue(false, { assignee: 'luke', assigneeName: 'Luke Skywalker' })
+      issue: mockIssue(false, { assignee: 'luke', assigneeName: 'Luke Skywalker' }),
     }).find('SelectListItem[item="assignee"]')
   ).toMatchSnapshot();
 
diff --git a/server/sonar-web/src/main/js/components/locations/CrossFileLocationNavigator.tsx b/server/sonar-web/src/main/js/components/locations/CrossFileLocationNavigator.tsx
index a724789cd44..cb6581f1b3b 100644
--- a/server/sonar-web/src/main/js/components/locations/CrossFileLocationNavigator.tsx
+++ b/server/sonar-web/src/main/js/components/locations/CrossFileLocationNavigator.tsx
@@ -83,7 +83,7 @@ export default class CrossFileLocationNavigator extends React.PureComponent<Prop
             component: currentComponent,
             componentName: currentComponentName,
             firstLocationIndex: currentFirstLocationIndex,
-            locations: currentLocations
+            locations: currentLocations,
           });
         }
         currentLocations = [location];
@@ -98,7 +98,7 @@ export default class CrossFileLocationNavigator extends React.PureComponent<Prop
         component: currentComponent,
         componentName: currentComponentName,
         firstLocationIndex: currentFirstLocationIndex,
-        locations: currentLocations
+        locations: currentLocations,
       });
     }
 
diff --git a/server/sonar-web/src/main/js/components/locations/FlowsList.tsx b/server/sonar-web/src/main/js/components/locations/FlowsList.tsx
index 40646365fb8..088ef497a2f 100644
--- a/server/sonar-web/src/main/js/components/locations/FlowsList.tsx
+++ b/server/sonar-web/src/main/js/components/locations/FlowsList.tsx
@@ -27,7 +27,7 @@ import SingleFileLocationNavigator from './SingleFileLocationNavigator';
 
 const FLOW_ORDER_MAP = {
   [FlowType.DATA]: 0,
-  [FlowType.EXECUTION]: 1
+  [FlowType.EXECUTION]: 1,
 };
 export interface Props {
   flows: Flow[];
@@ -65,7 +65,8 @@ export default function FlowsList(props: Props) {
                 flow={true}
                 selected={open}
               />
-            )}>
+            )}
+          >
             <ul>
               {flow.locations.map((location, locIndex) => (
                 // eslint-disable-next-line react/no-array-index-key
diff --git a/server/sonar-web/src/main/js/components/locations/LocationsList.tsx b/server/sonar-web/src/main/js/components/locations/LocationsList.tsx
index 043de9d030a..635095b65af 100644
--- a/server/sonar-web/src/main/js/components/locations/LocationsList.tsx
+++ b/server/sonar-web/src/main/js/components/locations/LocationsList.tsx
@@ -35,10 +35,10 @@ export default class LocationsList extends React.PureComponent<Props> {
   render() {
     const { locations, componentKey, selectedLocationIndex, showCrossFile = true } = this.props;
 
-    const locationComponents = [componentKey, ...locations.map(location => location.component)];
+    const locationComponents = [componentKey, ...locations.map((location) => location.component)];
     const isCrossFile = uniq(locationComponents).length > 1;
 
-    if (!locations || locations.length === 0 || locations.every(location => !location.msg)) {
+    if (!locations || locations.length === 0 || locations.every((location) => !location.msg)) {
       return null;
     }
 
diff --git a/server/sonar-web/src/main/js/components/locations/SingleFileLocationNavigator.tsx b/server/sonar-web/src/main/js/components/locations/SingleFileLocationNavigator.tsx
index 54be15b43ff..5a7e2819f52 100644
--- a/server/sonar-web/src/main/js/components/locations/SingleFileLocationNavigator.tsx
+++ b/server/sonar-web/src/main/js/components/locations/SingleFileLocationNavigator.tsx
@@ -39,7 +39,7 @@ export default class SingleFileLocationNavigator extends React.PureComponent<Pro
       this.node.scrollIntoView({
         behavior: 'smooth',
         block: 'center',
-        inline: 'center'
+        inline: 'center',
       });
     }
   }
@@ -49,7 +49,7 @@ export default class SingleFileLocationNavigator extends React.PureComponent<Pro
       this.node.scrollIntoView({
         behavior: 'smooth',
         block: 'center',
-        inline: 'center'
+        inline: 'center',
       });
     }
   }
@@ -67,10 +67,11 @@ export default class SingleFileLocationNavigator extends React.PureComponent<Pro
         stopPropagation={true}
         aria-current={selected ? 'location' : false}
         className={classNames('locations-navigator', { selected })}
-        innerRef={node => {
+        innerRef={(node) => {
           this.node = node;
         }}
-        onClick={this.handleClick}>
+        onClick={this.handleClick}
+      >
         <LocationIndex>{index + 1}</LocationIndex>
         <LocationMessage>{message}</LocationMessage>
       </ButtonPlain>
diff --git a/server/sonar-web/src/main/js/components/locations/__tests__/CrossFileLocationsNavigator-test.tsx b/server/sonar-web/src/main/js/components/locations/__tests__/CrossFileLocationsNavigator-test.tsx
index 26ce5f7e0d0..ab7007a8b4c 100644
--- a/server/sonar-web/src/main/js/components/locations/__tests__/CrossFileLocationsNavigator-test.tsx
+++ b/server/sonar-web/src/main/js/components/locations/__tests__/CrossFileLocationsNavigator-test.tsx
@@ -28,21 +28,21 @@ const location1: FlowLocation = {
   component: 'foo',
   componentName: 'src/foo.js',
   msg: 'Do not use foo',
-  textRange: { startLine: 7, endLine: 7, startOffset: 5, endOffset: 8 }
+  textRange: { startLine: 7, endLine: 7, startOffset: 5, endOffset: 8 },
 };
 
 const location2: FlowLocation = {
   component: 'foo',
   componentName: 'src/foo.js',
   msg: 'Do not use foo',
-  textRange: { startLine: 8, endLine: 8, startOffset: 0, endOffset: 5 }
+  textRange: { startLine: 8, endLine: 8, startOffset: 0, endOffset: 5 },
 };
 
 const location3: FlowLocation = {
   component: 'bar',
   componentName: 'src/bar.js',
   msg: 'Do not use bar',
-  textRange: { startLine: 15, endLine: 16, startOffset: 4, endOffset: 6 }
+  textRange: { startLine: 15, endLine: 16, startOffset: 4, endOffset: 6 },
 };
 
 it('should render with no locations', () => {
diff --git a/server/sonar-web/src/main/js/components/locations/__tests__/LocationsList-test.tsx b/server/sonar-web/src/main/js/components/locations/__tests__/LocationsList-test.tsx
index 74ca4eaa5ee..b0afc1663d4 100644
--- a/server/sonar-web/src/main/js/components/locations/__tests__/LocationsList-test.tsx
+++ b/server/sonar-web/src/main/js/components/locations/__tests__/LocationsList-test.tsx
@@ -27,14 +27,14 @@ const location1: FlowLocation = {
   component: 'foo',
   componentName: 'src/foo.js',
   msg: 'Do not use foo',
-  textRange: { startLine: 7, endLine: 7, startOffset: 5, endOffset: 8 }
+  textRange: { startLine: 7, endLine: 7, startOffset: 5, endOffset: 8 },
 };
 
 const location2: FlowLocation = {
   component: 'foo',
   componentName: 'src/foo.js',
   msg: 'Do not use foo',
-  textRange: { startLine: 8, endLine: 8, startOffset: 0, endOffset: 5 }
+  textRange: { startLine: 8, endLine: 8, startOffset: 0, endOffset: 5 },
 };
 
 it('should render locations in the same file', () => {
diff --git a/server/sonar-web/src/main/js/components/measure/Measure.tsx b/server/sonar-web/src/main/js/components/measure/Measure.tsx
index 8abc4e62781..b3d99084a10 100644
--- a/server/sonar-web/src/main/js/components/measure/Measure.tsx
+++ b/server/sonar-web/src/main/js/components/measure/Measure.tsx
@@ -39,7 +39,7 @@ export default function Measure({
   metricKey,
   metricType,
   small,
-  value
+  value,
 }: Props) {
   if (value === undefined) {
     return <span className={className}>–</span>;
@@ -52,7 +52,7 @@ export default function Measure({
   if (metricType !== 'RATING') {
     const formattedValue = formatMeasure(value, metricType, {
       decimals,
-      omitExtraDecimalZeros: metricType === 'PERCENT'
+      omitExtraDecimalZeros: metricType === 'PERCENT',
     });
     return <span className={className}>{formattedValue != null ? formattedValue : '–'}</span>;
   }
diff --git a/server/sonar-web/src/main/js/components/measure/RatingTooltipContent.tsx b/server/sonar-web/src/main/js/components/measure/RatingTooltipContent.tsx
index 855449adc3a..20328aaa1c2 100644
--- a/server/sonar-web/src/main/js/components/measure/RatingTooltipContent.tsx
+++ b/server/sonar-web/src/main/js/components/measure/RatingTooltipContent.tsx
@@ -41,8 +41,8 @@ export interface RatingTooltipContentProps {
 function getMaintainabilityGrid(ratingGridSetting: string) {
   const numbers = ratingGridSetting
     .split(',')
-    .map(s => parseFloat(s))
-    .filter(n => !isNaN(n));
+    .map((s) => parseFloat(s))
+    .filter((n) => !isNaN(n));
 
   return numbers.length === RATING_GRID_SIZE ? numbers : [0, 0, 0, 0];
 }
@@ -51,7 +51,7 @@ export function RatingTooltipContent(props: RatingTooltipContentProps) {
   const {
     appState: { settings },
     metricKey,
-    value
+    value,
   } = props;
 
   const finalMetricKey = isDiffMetric(metricKey)
diff --git a/server/sonar-web/src/main/js/components/measure/__tests__/RatingTooltipContent-test.tsx b/server/sonar-web/src/main/js/components/measure/__tests__/RatingTooltipContent-test.tsx
index 4a490d6481f..9c1c92c6cfc 100644
--- a/server/sonar-web/src/main/js/components/measure/__tests__/RatingTooltipContent-test.tsx
+++ b/server/sonar-web/src/main/js/components/measure/__tests__/RatingTooltipContent-test.tsx
@@ -32,7 +32,7 @@ it('should render maintainability correctly', () => {
   );
   expect(
     shallowRender({
-      appState: mockAppState({ settings: { [GlobalSettingKeys.RatingGrid]: '0,0.1' } })
+      appState: mockAppState({ settings: { [GlobalSettingKeys.RatingGrid]: '0,0.1' } }),
     })
   ).toMatchSnapshot('sqale rating wrong grid');
 });
diff --git a/server/sonar-web/src/main/js/components/measure/utils.ts b/server/sonar-web/src/main/js/components/measure/utils.ts
index 8fb375bc9a0..90be2e58f5d 100644
--- a/server/sonar-web/src/main/js/components/measure/utils.ts
+++ b/server/sonar-web/src/main/js/components/measure/utils.ts
@@ -24,14 +24,14 @@ export const KNOWN_RATINGS = [
   'maintainability_rating', // Needed to provide the label for "new_maintainability_rating"
   'reliability_rating',
   'security_rating',
-  'security_review_rating'
+  'security_review_rating',
 ];
 
 export function enhanceMeasure(measure: Measure, metrics: Dict<Metric>): MeasureEnhanced {
   return {
     ...measure,
     metric: metrics[measure.metric],
-    leak: getLeakValue(measure)
+    leak: getLeakValue(measure),
   };
 }
 
diff --git a/server/sonar-web/src/main/js/components/rules/MoreInfoRuleDescription.tsx b/server/sonar-web/src/main/js/components/rules/MoreInfoRuleDescription.tsx
index ff25f1a316f..ea09ca23a3f 100644
--- a/server/sonar-web/src/main/js/components/rules/MoreInfoRuleDescription.tsx
+++ b/server/sonar-web/src/main/js/components/rules/MoreInfoRuleDescription.tsx
@@ -37,7 +37,7 @@ interface Props {
 
 const EDUCATION_PRINCIPLES_MAP: Dict<React.ComponentType> = {
   defense_in_depth: DefenseInDepth,
-  never_trust_user_input: NeverTrustUserInput
+  never_trust_user_input: NeverTrustUserInput,
 };
 export default class MoreInfoRuleDescription extends React.PureComponent<Props, {}> {
   handleNotificationScroll = () => {
@@ -52,7 +52,7 @@ export default class MoreInfoRuleDescription extends React.PureComponent<Props,
       displayEducationalPrinciplesNotification,
       sections = [],
       educationPrinciples = [],
-      educationPrinciplesRef
+      educationPrinciplesRef,
     } = this.props;
     return (
       <div className="padded rule-desc">
@@ -64,7 +64,8 @@ export default class MoreInfoRuleDescription extends React.PureComponent<Props,
             <ButtonLink
               onClick={() => {
                 this.handleNotificationScroll();
-              }}>
+              }}
+            >
               {translate('coding_rules.more_info.scroll_message')}
             </ButtonLink>
           </Alert>
@@ -81,7 +82,7 @@ export default class MoreInfoRuleDescription extends React.PureComponent<Props,
             <h2 ref={educationPrinciplesRef}>
               {translate('coding_rules.more_info.education_principles.title')}
             </h2>
-            {educationPrinciples.map(key => {
+            {educationPrinciples.map((key) => {
               const Concept = EDUCATION_PRINCIPLES_MAP[key];
               if (Concept === undefined) {
                 return null;
diff --git a/server/sonar-web/src/main/js/components/rules/OtherContextOption.tsx b/server/sonar-web/src/main/js/components/rules/OtherContextOption.tsx
index d4d4a060829..7241f235641 100644
--- a/server/sonar-web/src/main/js/components/rules/OtherContextOption.tsx
+++ b/server/sonar-web/src/main/js/components/rules/OtherContextOption.tsx
@@ -43,7 +43,8 @@ export default function OtherContextOption() {
       <p>{translate('coding_rules.context.others.feedback_description_1')}</p>
       <Link
         to="https://portal.productboard.com/sonarsource/3-sonarqube/submit-idea"
-        target="_blank">
+        target="_blank"
+      >
         {translate('coding_rules.context.others.feedback_description.link')}
       </Link>
       <p>{translate('coding_rules.context.others.feedback_description_2')}</p>
diff --git a/server/sonar-web/src/main/js/components/rules/RuleDescription.tsx b/server/sonar-web/src/main/js/components/rules/RuleDescription.tsx
index 90767868178..ed1dbc28115 100644
--- a/server/sonar-web/src/main/js/components/rules/RuleDescription.tsx
+++ b/server/sonar-web/src/main/js/components/rules/RuleDescription.tsx
@@ -72,10 +72,10 @@ export default class RuleDescription extends React.PureComponent<Props, State> {
         ): section is RuleDescriptionSection & Required<Pick<RuleDescriptionSection, 'context'>> =>
           section.context != null
       )
-      .map(section => ({
+      .map((section) => ({
         displayName: section.context.displayName || section.context.key,
         content: section.content,
-        key: section.context.key
+        key: section.context.key,
       }))
       .sort((a, b) => a.displayName.localeCompare(b.displayName));
 
@@ -83,27 +83,27 @@ export default class RuleDescription extends React.PureComponent<Props, State> {
       contexts.push({
         displayName: translate('coding_rules.description_context.other'),
         content: '',
-        key: OTHERS_KEY
+        key: OTHERS_KEY,
       });
     }
 
     let defaultContext: RuleDescriptionContextDisplay | undefined;
 
     if (defaultContextKey) {
-      defaultContext = contexts.find(context => context.key === defaultContextKey);
+      defaultContext = contexts.find((context) => context.key === defaultContextKey);
     }
 
     return {
       contexts,
       defaultContext,
-      selectedContext: defaultContext ?? contexts[0]
+      selectedContext: defaultContext ?? contexts[0],
     };
   };
 
   handleToggleContext = (value: string) => {
     const { contexts } = this.state;
 
-    const selected = contexts.find(ctxt => ctxt.displayName === value);
+    const selected = contexts.find((ctxt) => ctxt.displayName === value);
     if (selected) {
       this.setState({ selectedContext: selected });
     }
@@ -113,9 +113,9 @@ export default class RuleDescription extends React.PureComponent<Props, State> {
     const { className, sections, isDefault } = this.props;
     const { contexts, defaultContext, selectedContext } = this.state;
 
-    const options = contexts.map(ctxt => ({
+    const options = contexts.map((ctxt) => ({
       label: ctxt.displayName,
-      value: ctxt.displayName
+      value: ctxt.displayName,
     }));
 
     if (contexts.length > 0 && selectedContext) {
@@ -123,11 +123,12 @@ export default class RuleDescription extends React.PureComponent<Props, State> {
         <div
           className={classNames(className, {
             markdown: isDefault,
-            'rule-desc': !isDefault
+            'rule-desc': !isDefault,
           })}
-          ref={node => {
+          ref={(node) => {
             applyCodeDifferences(node);
-          }}>
+          }}
+        >
           <div className="rules-context-description">
             <h2 className="rule-contexts-title">
               {translate('coding_rules.description_context.title')}
@@ -173,14 +174,14 @@ export default class RuleDescription extends React.PureComponent<Props, State> {
       <div
         className={classNames(className, {
           markdown: isDefault,
-          'rule-desc': !isDefault
+          'rule-desc': !isDefault,
         })}
-        ref={node => {
+        ref={(node) => {
           applyCodeDifferences(node);
         }}
         // eslint-disable-next-line react/no-danger
         dangerouslySetInnerHTML={{
-          __html: sanitizeString(sections[0].content)
+          __html: sanitizeString(sections[0].content),
         }}
       />
     );
diff --git a/server/sonar-web/src/main/js/components/rules/RuleTabViewer.tsx b/server/sonar-web/src/main/js/components/rules/RuleTabViewer.tsx
index 35bfee5a846..930c6354f18 100644
--- a/server/sonar-web/src/main/js/components/rules/RuleTabViewer.tsx
+++ b/server/sonar-web/src/main/js/components/rules/RuleTabViewer.tsx
@@ -58,14 +58,14 @@ export enum TabKeys {
   WhyIsThisAnIssue = 'why',
   HowToFixIt = 'how_to_fix',
   AssessTheIssue = 'assess_the_problem',
-  MoreInfo = 'more_info'
+  MoreInfo = 'more_info',
 }
 
 const DEBOUNCE_FOR_SCROLL = 250;
 
 export class RuleTabViewer extends React.PureComponent<RuleTabViewerProps, State> {
   state: State = {
-    tabs: []
+    tabs: [],
   };
 
   educationPrinciplesRef: React.RefObject<HTMLDivElement>;
@@ -80,7 +80,7 @@ export class RuleTabViewer extends React.PureComponent<RuleTabViewerProps, State
   }
 
   componentDidMount() {
-    this.setState(prevState => this.computeState(prevState));
+    this.setState((prevState) => this.computeState(prevState));
     this.attachScrollEvent();
   }
 
@@ -94,7 +94,7 @@ export class RuleTabViewer extends React.PureComponent<RuleTabViewerProps, State
       prevProps.codeTabContent !== codeTabContent ||
       prevProps.currentUser !== currentUser
     ) {
-      this.setState(pState =>
+      this.setState((pState) =>
         this.computeState(
           pState,
           prevProps.ruleDetails !== ruleDetails || prevProps.codeTabContent !== codeTabContent
@@ -122,7 +122,7 @@ export class RuleTabViewer extends React.PureComponent<RuleTabViewerProps, State
   computeState = (prevState: State, resetSelectedTab = false) => {
     const {
       ruleDetails,
-      currentUser: { isLoggedIn, dismissedNotices }
+      currentUser: { isLoggedIn, dismissedNotices },
     } = this.props;
 
     const displayEducationalPrinciplesNotification =
@@ -135,7 +135,7 @@ export class RuleTabViewer extends React.PureComponent<RuleTabViewerProps, State
     return {
       tabs,
       selectedTab: resetSelectedTab || !prevState.selectedTab ? tabs[0] : prevState.selectedTab,
-      displayEducationalPrinciplesNotification
+      displayEducationalPrinciplesNotification,
     };
   };
 
@@ -144,12 +144,12 @@ export class RuleTabViewer extends React.PureComponent<RuleTabViewerProps, State
       codeTabContent,
       ruleDetails: { descriptionSections, educationPrinciples, type: ruleType },
       ruleDescriptionContextKey,
-      extendedDescription
+      extendedDescription,
     } = this.props;
 
     // As we might tamper with the description later on, we clone to avoid any side effect
     const descriptionSectionsByKey = cloneDeep(
-      groupBy(descriptionSections, section => section.key)
+      groupBy(descriptionSections, (section) => section.key)
     );
 
     if (extendedDescription) {
@@ -162,8 +162,8 @@ export class RuleTabViewer extends React.PureComponent<RuleTabViewerProps, State
         descriptionSectionsByKey[RuleDescriptionSections.RESOURCES] = [
           {
             key: RuleDescriptionSections.RESOURCES,
-            content: extendedDescription
-          }
+            content: extendedDescription,
+          },
         ];
       }
     }
@@ -186,7 +186,7 @@ export class RuleTabViewer extends React.PureComponent<RuleTabViewerProps, State
             isDefault={descriptionSectionsByKey[RuleDescriptionSections.DEFAULT] !== undefined}
             defaultContextKey={ruleDescriptionContextKey}
           />
-        )
+        ),
       },
       {
         key: TabKeys.AssessTheIssue,
@@ -196,7 +196,7 @@ export class RuleTabViewer extends React.PureComponent<RuleTabViewerProps, State
             className="padded"
             sections={descriptionSectionsByKey[RuleDescriptionSections.ASSESS_THE_PROBLEM]}
           />
-        )
+        ),
       },
       {
         key: TabKeys.HowToFixIt,
@@ -207,7 +207,7 @@ export class RuleTabViewer extends React.PureComponent<RuleTabViewerProps, State
             sections={descriptionSectionsByKey[RuleDescriptionSections.HOW_TO_FIX]}
             defaultContextKey={ruleDescriptionContextKey}
           />
-        )
+        ),
       },
       {
         key: TabKeys.MoreInfo,
@@ -225,37 +225,37 @@ export class RuleTabViewer extends React.PureComponent<RuleTabViewerProps, State
             displayEducationalPrinciplesNotification={displayEducationalPrinciplesNotification}
             educationPrinciplesRef={this.educationPrinciplesRef}
           />
-        )
-      }
+        ),
+      },
     ];
 
     if (codeTabContent !== undefined) {
       tabs.unshift({
         key: TabKeys.Code,
         label: translate('issue.tabs', TabKeys.Code),
-        content: codeTabContent
+        content: codeTabContent,
       });
     }
 
-    return tabs.filter(tab => tab.content);
+    return tabs.filter((tab) => tab.content);
   };
 
   attachScrollEvent = () => {
     document.addEventListener('scroll', this.checkIfEducationPrinciplesAreVisible, {
-      capture: true
+      capture: true,
     });
   };
 
   detachScrollEvent = () => {
     document.removeEventListener('scroll', this.checkIfEducationPrinciplesAreVisible, {
-      capture: true
+      capture: true,
     });
   };
 
   checkIfEducationPrinciplesAreVisible = () => {
     const {
       displayEducationalPrinciplesNotification,
-      educationalPrinciplesNotificationHasBeenDismissed
+      educationalPrinciplesNotificationHasBeenDismissed,
     } = this.state;
 
     if (this.educationPrinciplesRef.current) {
@@ -281,7 +281,7 @@ export class RuleTabViewer extends React.PureComponent<RuleTabViewerProps, State
 
   handleSelectTabs = (currentTabKey: TabKeys) => {
     this.setState(({ tabs }) => ({
-      selectedTab: tabs.find(tab => tab.key === currentTabKey) || tabs[0]
+      selectedTab: tabs.find((tab) => tab.key === currentTabKey) || tabs[0],
     }));
   };
 
@@ -293,7 +293,7 @@ export class RuleTabViewer extends React.PureComponent<RuleTabViewerProps, State
       return null;
     }
 
-    const tabContent = tabs.find(t => t.key === selectedTab.key)?.content;
+    const tabContent = tabs.find((t) => t.key === selectedTab.key)?.content;
 
     return (
       <>
@@ -310,12 +310,13 @@ export class RuleTabViewer extends React.PureComponent<RuleTabViewerProps, State
             <div
               style={{
                 // We substract the footer height with padding (80) and the main layout padding (20)
-                maxHeight: scrollInTab ? `calc(100vh - ${top + 100}px)` : 'initial'
+                maxHeight: scrollInTab ? `calc(100vh - ${top + 100}px)` : 'initial',
               }}
               className="bordered display-flex-column"
               role="tabpanel"
               aria-labelledby={getTabId(selectedTab.key)}
-              id={getTabPanelId(selectedTab.key)}>
+              id={getTabPanelId(selectedTab.key)}
+            >
               {/* Adding a key to force re-rendering of the tab container, so that it resets the scroll position */}
               <div className="overflow-y-auto spacer" key={selectedTab.key}>
                 {tabContent}
diff --git a/server/sonar-web/src/main/js/components/shared/DrilldownLink.tsx b/server/sonar-web/src/main/js/components/shared/DrilldownLink.tsx
index 7d7a6bf9740..9848193a566 100644
--- a/server/sonar-web/src/main/js/components/shared/DrilldownLink.tsx
+++ b/server/sonar-web/src/main/js/components/shared/DrilldownLink.tsx
@@ -47,7 +47,7 @@ const ISSUE_MEASURES = [
   MetricKey.bugs,
   MetricKey.new_bugs,
   MetricKey.vulnerabilities,
-  MetricKey.new_vulnerabilities
+  MetricKey.new_vulnerabilities,
 ];
 
 const issueParamsPerMetric: Dict<Dict<string>> = {
@@ -70,7 +70,7 @@ const issueParamsPerMetric: Dict<Dict<string>> = {
   [MetricKey.bugs]: { resolved: 'false', types: 'BUG' },
   [MetricKey.new_bugs]: { resolved: 'false', types: 'BUG' },
   [MetricKey.vulnerabilities]: { resolved: 'false', types: 'VULNERABILITY' },
-  [MetricKey.new_vulnerabilities]: { resolved: 'false', types: 'VULNERABILITY' }
+  [MetricKey.new_vulnerabilities]: { resolved: 'false', types: 'VULNERABILITY' },
 };
 
 interface Props {
@@ -90,7 +90,7 @@ export default class DrilldownLink extends React.PureComponent<Props> {
 
   propsToIssueParams = () => {
     const params: Dict<string | boolean> = {
-      ...(issueParamsPerMetric[this.props.metric] || { resolved: 'false' })
+      ...(issueParamsPerMetric[this.props.metric] || { resolved: 'false' }),
     };
 
     if (this.props.inNewCodePeriod) {
@@ -105,7 +105,7 @@ export default class DrilldownLink extends React.PureComponent<Props> {
 
     const url = getComponentIssuesUrl(component, {
       ...this.propsToIssueParams(),
-      ...getBranchLikeQuery(branchLike)
+      ...getBranchLikeQuery(branchLike),
     });
 
     return (
@@ -125,7 +125,7 @@ export default class DrilldownLink extends React.PureComponent<Props> {
       componentKey: component,
       metric,
       branchLike,
-      listView: true
+      listView: true,
     });
     return (
       <Link aria-label={ariaLabel} className={className} to={url}>
diff --git a/server/sonar-web/src/main/js/components/shared/__tests__/DrilldownLink-test.tsx b/server/sonar-web/src/main/js/components/shared/__tests__/DrilldownLink-test.tsx
index 4d7e2c2863b..1af6f51d3c3 100644
--- a/server/sonar-web/src/main/js/components/shared/__tests__/DrilldownLink-test.tsx
+++ b/server/sonar-web/src/main/js/components/shared/__tests__/DrilldownLink-test.tsx
@@ -40,7 +40,7 @@ describe('propsToIssueParams', () => {
     const wrapper = shallowRender({ metric: 'false_positive_issues', inNewCodePeriod: true });
     expect(wrapper.instance().propsToIssueParams()).toEqual({
       resolutions: 'FALSE-POSITIVE',
-      inNewCodePeriod: true
+      inNewCodePeriod: true,
     });
   });
 });
diff --git a/server/sonar-web/src/main/js/components/tags/TagsList.tsx b/server/sonar-web/src/main/js/components/tags/TagsList.tsx
index 1910de6c2ef..02fd0b088db 100644
--- a/server/sonar-web/src/main/js/components/tags/TagsList.tsx
+++ b/server/sonar-web/src/main/js/components/tags/TagsList.tsx
@@ -35,7 +35,8 @@ export default function TagsList({ allowUpdate = false, className, tags }: Props
     <span
       aria-label={translateWithParameters('tags_list_x', tags.join(', '))}
       role="note"
-      className={classNames('tags-list', className)}>
+      className={classNames('tags-list', className)}
+    >
       <TagsIcon className="text-middle" />
       <span aria-hidden={true} className="text-ellipsis text-middle" title={tags.join(', ')}>
         {tags.join(', ')}
diff --git a/server/sonar-web/src/main/js/components/tags/__tests__/TagsSelector-test.tsx b/server/sonar-web/src/main/js/components/tags/__tests__/TagsSelector-test.tsx
index 23710560efe..176aaea3301 100644
--- a/server/sonar-web/src/main/js/components/tags/__tests__/TagsSelector-test.tsx
+++ b/server/sonar-web/src/main/js/components/tags/__tests__/TagsSelector-test.tsx
@@ -29,7 +29,7 @@ const props = {
   renderLabel: (element: string) => element,
   position: { right: 0, top: 0 },
   selectedTags: ['bar'],
-  tags: ['foo', 'bar', 'baz']
+  tags: ['foo', 'bar', 'baz'],
 };
 
 it('should render with selected tags', () => {
diff --git a/server/sonar-web/src/main/js/components/tutorials/TutorialSelection.tsx b/server/sonar-web/src/main/js/components/tutorials/TutorialSelection.tsx
index 661ef43a318..3e33a66f6a9 100644
--- a/server/sonar-web/src/main/js/components/tutorials/TutorialSelection.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/TutorialSelection.tsx
@@ -58,7 +58,7 @@ export class TutorialSelection extends React.PureComponent<Props, State> {
   state: State = {
     currentUserCanScanProject: false,
     baseUrl: getHostUrl(),
-    loading: true
+    loading: true,
   };
 
   async componentDidMount() {
@@ -85,7 +85,7 @@ export class TutorialSelection extends React.PureComponent<Props, State> {
 
     const { projects } = await getScannableProjects();
     this.setState({
-      currentUserCanScanProject: projects.find(p => p.key === component.key) !== undefined
+      currentUserCanScanProject: projects.find((p) => p.key === component.key) !== undefined,
     });
 
     return Promise.resolve();
@@ -99,7 +99,7 @@ export class TutorialSelection extends React.PureComponent<Props, State> {
       if (this.mounted) {
         let almBinding;
         if (almSettings !== undefined) {
-          almBinding = almSettings.find(d => d.key === projectBinding.key);
+          almBinding = almSettings.find((d) => d.key === projectBinding.key);
         }
         this.setState({ almBinding });
       }
@@ -117,23 +117,18 @@ export class TutorialSelection extends React.PureComponent<Props, State> {
   handleSelectTutorial = (selectedTutorial: TutorialModes) => {
     const {
       router,
-      location: { pathname, query }
+      location: { pathname, query },
     } = this.props;
 
     router.push({
       pathname,
-      query: { ...query, selectedTutorial }
+      query: { ...query, selectedTutorial },
     });
   };
 
   render() {
-    const {
-      component,
-      currentUser,
-      location,
-      projectBinding,
-      willRefreshAutomatically
-    } = this.props;
+    const { component, currentUser, location, projectBinding, willRefreshAutomatically } =
+      this.props;
     const { almBinding, baseUrl, currentUserCanScanProject, loading } = this.state;
 
     const selectedTutorial: TutorialModes | undefined = location.query?.selectedTutorial;
@@ -149,7 +144,7 @@ export class TutorialSelection extends React.PureComponent<Props, State> {
             currentUserCanScanProject={currentUserCanScanProject}
             loading={loading}
             mainBranchName={
-              (branchLikes.find(b => isMainBranch(b)) as MainBranch | undefined)?.name ||
+              (branchLikes.find((b) => isMainBranch(b)) as MainBranch | undefined)?.name ||
               DEFAULT_MAIN_BRANCH_NAME
             }
             onSelectTutorial={this.handleSelectTutorial}
diff --git a/server/sonar-web/src/main/js/components/tutorials/TutorialSelectionRenderer.tsx b/server/sonar-web/src/main/js/components/tutorials/TutorialSelectionRenderer.tsx
index 6a08e543646..000f5e87ed6 100644
--- a/server/sonar-web/src/main/js/components/tutorials/TutorialSelectionRenderer.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/TutorialSelectionRenderer.tsx
@@ -61,7 +61,8 @@ function renderButton(
       // Currently, OtherCI is the same tutorial as Manual. We might update it to its own stand-alone
       // tutorial in the future.
       onClick={() => onSelectTutorial(mode)}
-      type="button">
+      type="button"
+    >
       {icon}
       <div className="medium big-spacer-top">
         {translate('onboarding.tutorial.choose_method', mode)}
@@ -81,7 +82,7 @@ export default function TutorialSelectionRenderer(props: TutorialSelectionRender
     mainBranchName,
     projectBinding,
     selectedTutorial,
-    willRefreshAutomatically
+    willRefreshAutomatically,
   } = props;
 
   if (loading) {
@@ -107,7 +108,7 @@ export default function TutorialSelectionRenderer(props: TutorialSelectionRender
       AlmKeys.BitbucketCloud,
       AlmKeys.BitbucketServer,
       AlmKeys.GitHub,
-      AlmKeys.GitLab
+      AlmKeys.GitLab,
     ].includes(projectBinding.alm);
   }
 
diff --git a/server/sonar-web/src/main/js/components/tutorials/__tests__/TutorialSelection-it.tsx b/server/sonar-web/src/main/js/components/tutorials/__tests__/TutorialSelection-it.tsx
index b2c685971f1..7d5e092b7b7 100644
--- a/server/sonar-web/src/main/js/components/tutorials/__tests__/TutorialSelection-it.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/__tests__/TutorialSelection-it.tsx
@@ -28,7 +28,7 @@ import SettingsServiceMock from '../../../api/mocks/SettingsServiceMock';
 import UserTokensMock from '../../../api/mocks/UserTokensMock';
 import {
   mockGithubBindingDefinition,
-  mockProjectAlmBindingResponse
+  mockProjectAlmBindingResponse,
 } from '../../../helpers/mocks/alm-settings';
 import { mockComponent } from '../../../helpers/mocks/component';
 import { mockLoggedInUser } from '../../../helpers/testMocks';
@@ -46,15 +46,15 @@ jest.mock('../../../api/user-tokens');
 
 jest.mock('../../../helpers/urls', () => ({
   ...jest.requireActual('../../../helpers/urls'),
-  getHostUrl: jest.fn().mockReturnValue('http://host.url')
+  getHostUrl: jest.fn().mockReturnValue('http://host.url'),
 }));
 
 jest.mock('../../../api/alm-settings', () => ({
-  getAlmSettingsNoCatch: jest.fn().mockRejectedValue(null)
+  getAlmSettingsNoCatch: jest.fn().mockRejectedValue(null),
 }));
 
 jest.mock('../../../api/components', () => ({
-  getScannableProjects: jest.fn().mockResolvedValue({ projects: [] })
+  getScannableProjects: jest.fn().mockResolvedValue({ projects: [] }),
 }));
 
 let settingsMock: SettingsServiceMock;
@@ -76,7 +76,7 @@ const ui = {
   loading: byLabelText('loading'),
   noScanRights: byText('onboarding.tutorial.no_scan_rights'),
   chooseTutorialBtn: (mode: TutorialModes) =>
-    byRole('button', { name: `onboarding.tutorial.choose_method.${mode}` })
+    byRole('button', { name: `onboarding.tutorial.choose_method.${mode}` }),
 };
 
 it.each([
@@ -84,12 +84,12 @@ it.each([
   [TutorialModes.AzurePipelines, 'onboarding.tutorial.with.azure_pipelines.title'],
   [
     TutorialModes.BitbucketPipelines,
-    'onboarding.tutorial.with.bitbucket_pipelines.create_secret.title'
+    'onboarding.tutorial.with.bitbucket_pipelines.create_secret.title',
   ],
   [TutorialModes.GitHubActions, 'onboarding.tutorial.with.github_action.create_secret.title'],
   [TutorialModes.GitLabCI, 'onboarding.tutorial.with.gitlab_ci.title'],
   [TutorialModes.Local, 'onboarding.project_analysis.header'],
-  [TutorialModes.OtherCI, 'onboarding.project_analysis.header']
+  [TutorialModes.OtherCI, 'onboarding.project_analysis.header'],
 ])('should behave correctly for %s', async (mode, title) => {
   const user = userEvent.setup();
   renderTutorialSelection();
@@ -104,26 +104,26 @@ it.each([
 it.each([
   [
     AlmKeys.GitHub,
-    [TutorialModes.GitHubActions, TutorialModes.Jenkins, TutorialModes.AzurePipelines]
+    [TutorialModes.GitHubActions, TutorialModes.Jenkins, TutorialModes.AzurePipelines],
   ],
   [AlmKeys.GitLab, [TutorialModes.GitLabCI, TutorialModes.Jenkins]],
   [AlmKeys.Azure, [TutorialModes.AzurePipelines]],
   [AlmKeys.BitbucketServer, [TutorialModes.Jenkins]],
-  [AlmKeys.BitbucketCloud, [TutorialModes.BitbucketPipelines, TutorialModes.Jenkins]]
+  [AlmKeys.BitbucketCloud, [TutorialModes.BitbucketPipelines, TutorialModes.Jenkins]],
 ])('should show correct buttons if project is bound to %s', async (alm, modes) => {
   renderTutorialSelection({ projectBinding: mockProjectAlmBindingResponse({ alm }) });
   await waitOnDataLoaded();
 
-  modes.forEach(mode => expect(ui.chooseTutorialBtn(mode).get()).toBeInTheDocument());
+  modes.forEach((mode) => expect(ui.chooseTutorialBtn(mode).get()).toBeInTheDocument());
 });
 
 it('should correctly fetch the corresponding ALM setting', async () => {
   (getAlmSettingsNoCatch as jest.Mock).mockResolvedValueOnce([
-    mockGithubBindingDefinition({ key: 'binding', url: 'https://enterprise.github.com' })
+    mockGithubBindingDefinition({ key: 'binding', url: 'https://enterprise.github.com' }),
   ]);
   const user = userEvent.setup();
   renderTutorialSelection({
-    projectBinding: mockProjectAlmBindingResponse({ alm: AlmKeys.GitHub, key: 'binding' })
+    projectBinding: mockProjectAlmBindingResponse({ alm: AlmKeys.GitHub, key: 'binding' }),
   });
   await waitOnDataLoaded();
 
diff --git a/server/sonar-web/src/main/js/components/tutorials/__tests__/utils-test.ts b/server/sonar-web/src/main/js/components/tutorials/__tests__/utils-test.ts
index 58b79c76352..d2d2a2fd00e 100644
--- a/server/sonar-web/src/main/js/components/tutorials/__tests__/utils-test.ts
+++ b/server/sonar-web/src/main/js/components/tutorials/__tests__/utils-test.ts
@@ -20,7 +20,7 @@
 import {
   mockAlmSettingsInstance,
   mockProjectBitbucketCloudBindingResponse,
-  mockProjectGithubBindingResponse
+  mockProjectGithubBindingResponse,
 } from '../../../helpers/mocks/alm-settings';
 import { mockUserToken } from '../../../helpers/mocks/token';
 import { UserToken } from '../../../types/token';
@@ -44,7 +44,7 @@ describe('getUniqueTokenName', () => {
   it('should generate a unique token when the name already exists', () => {
     const userTokens = [
       mockUserToken({ name: initialTokenName }),
-      mockUserToken({ name: `${initialTokenName} 1` })
+      mockUserToken({ name: `${initialTokenName} 1` }),
     ];
 
     expect(getUniqueTokenName(userTokens, initialTokenName)).toBe('Analyze "lightsaber" 2');
diff --git a/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/AzurePipelinesTutorial.tsx b/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/AzurePipelinesTutorial.tsx
index 5f07e2347aa..7ec569f2042 100644
--- a/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/AzurePipelinesTutorial.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/AzurePipelinesTutorial.tsx
@@ -42,7 +42,7 @@ export enum Steps {
   ExtensionInstallation,
   ServiceEndpoint,
   BranchAnalysis,
-  AllSet
+  AllSet,
 }
 
 interface Step {
@@ -67,18 +67,18 @@ export default function AzurePipelinesTutorial(props: AzurePipelinesTutorialProp
           component={component}
           currentUser={currentUser}
         />
-      )
+      ),
     },
     {
       step: Steps.BranchAnalysis,
       content: (
         <BranchAnalysisStepContent
           component={component}
-          onStepValidationChange={isValid => setIsCurrentStepValid(isValid)}
+          onStepValidationChange={(isValid) => setIsCurrentStepValid(isValid)}
         />
       ),
-      checkValidity: true
-    }
+      checkValidity: true,
+    },
   ];
 
   const switchCurrentStep = (step: Steps) => {
@@ -115,7 +115,8 @@ export default function AzurePipelinesTutorial(props: AzurePipelinesTutorialProp
                 ) : (
                   <Button
                     className="big-spacer-top spacer-bottom"
-                    onClick={() => switchCurrentStep(step.step + 1)}>
+                    onClick={() => switchCurrentStep(step.step + 1)}
+                  >
                     {translate('continue')}
                   </Button>
                 ))}
diff --git a/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/BranchAnalysisStepContent.tsx b/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/BranchAnalysisStepContent.tsx
index 70200e4d080..48a662876f2 100644
--- a/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/BranchAnalysisStepContent.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/BranchAnalysisStepContent.tsx
@@ -38,7 +38,7 @@ const BUILD_TOOLS_ORDERED: Array<BuildTools> = [
   BuildTools.Maven,
   BuildTools.Gradle,
   BuildTools.CFamily,
-  BuildTools.Other
+  BuildTools.Other,
 ];
 
 export function BranchAnalysisStepContent(props: BranchesAnalysisStepProps) {
@@ -47,14 +47,14 @@ export function BranchAnalysisStepContent(props: BranchesAnalysisStepProps) {
   const [buildTechnology, setBuildTechnology] = React.useState<BuildTools | undefined>();
   const buildToolsList = languages['c']
     ? BUILD_TOOLS_ORDERED
-    : BUILD_TOOLS_ORDERED.filter(t => t !== BuildTools.CFamily);
+    : BUILD_TOOLS_ORDERED.filter((t) => t !== BuildTools.CFamily);
   return (
     <>
       <span>{translate('onboarding.build')}</span>
       <RenderOptions
         label={translate('onboarding.build')}
         checked={buildTechnology}
-        onCheck={value => setBuildTechnology(value as BuildTools)}
+        onCheck={(value) => setBuildTechnology(value as BuildTools)}
         optionLabelKey="onboarding.build"
         options={buildToolsList}
       />
diff --git a/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/ExtensionInstallationStepContent.tsx b/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/ExtensionInstallationStepContent.tsx
index eff9bb3e535..7e032937cab 100644
--- a/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/ExtensionInstallationStepContent.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/ExtensionInstallationStepContent.tsx
@@ -34,7 +34,8 @@ export default function ExtensionInstallationStepContent() {
           link: (
             <Link
               to="https://marketplace.visualstudio.com/items?itemName=SonarSource.sonarqube"
-              target="_blank">
+              target="_blank"
+            >
               {translate(
                 'onboarding.tutorial.with.azure_pipelines.ExtensionInstallation.sentence.link'
               )}
@@ -46,7 +47,7 @@ export default function ExtensionInstallationStepContent() {
                 'onboarding.tutorial.with.azure_pipelines.ExtensionInstallation.sentence.button'
               )}
             </strong>
-          )
+          ),
         }}
       />
     </span>
diff --git a/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/JavaToolInstallation.tsx b/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/JavaToolInstallation.tsx
index e0b6ea70883..44101379d07 100644
--- a/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/JavaToolInstallation.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/JavaToolInstallation.tsx
@@ -34,7 +34,7 @@ function renderSentenceWithFieldAndValue(props: {
       )}
       values={{
         field: <strong>{field}</strong>,
-        value: <strong>{value}</strong>
+        value: <strong>{value}</strong>,
       }}
     />
   );
@@ -50,7 +50,7 @@ export default function JavaToolInstallation() {
             field: translate(
               'onboarding.tutorial.with.azure_pipelines.BranchAnalysis.java_installer.java_version'
             ),
-            value: '11'
+            value: '11',
           })}
           {' ' /* explicit space between the two strings */}
           {translate(
@@ -62,7 +62,7 @@ export default function JavaToolInstallation() {
             field: translate(
               'onboarding.tutorial.with.azure_pipelines.BranchAnalysis.java_installer.java_architecture'
             ),
-            value: 'x64'
+            value: 'x64',
           })}
         </li>
         <li>
@@ -72,7 +72,7 @@ export default function JavaToolInstallation() {
             ),
             value: translate(
               'onboarding.tutorial.with.azure_pipelines.BranchAnalysis.java_installer.pre-installed'
-            )
+            ),
           })}
         </li>
       </ul>
diff --git a/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/ServiceEndpointStepContent.tsx b/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/ServiceEndpointStepContent.tsx
index 885db5a45fa..6590d6c2a44 100644
--- a/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/ServiceEndpointStepContent.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/ServiceEndpointStepContent.tsx
@@ -62,7 +62,7 @@ export default function ServiceEndpointStepContent(props: ServiceEndpointStepPro
             id="onboarding.tutorial.with.azure_pipelines.ServiceEndpoint.step3.sentence"
             values={{
               url: <code className="rule">{baseUrl}</code>,
-              button: <ClipboardIconButton copyValue={baseUrl} />
+              button: <ClipboardIconButton copyValue={baseUrl} />,
             }}
           />
         </li>
diff --git a/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/__tests__/AzurePipelinesTutorial-it.tsx b/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/__tests__/AzurePipelinesTutorial-it.tsx
index 98fb021231f..1bee33330c2 100644
--- a/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/__tests__/AzurePipelinesTutorial-it.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/__tests__/AzurePipelinesTutorial-it.tsx
@@ -33,7 +33,7 @@ import AzurePipelinesTutorial, { AzurePipelinesTutorialProps } from '../AzurePip
 jest.mock('../../../../api/user-tokens');
 
 jest.mock('../../../../api/settings', () => ({
-  getAllValues: jest.fn().mockResolvedValue([])
+  getAllValues: jest.fn().mockResolvedValue([]),
 }));
 
 let tokenMock: UserTokensMock;
@@ -96,7 +96,7 @@ it('should render correctly and allow navigating between the different steps', a
   await clickButton(user, 'onboarding.build.cfamily');
 
   // OS's
-  [OSs.Linux, OSs.Windows, OSs.MacOS].forEach(async os => {
+  [OSs.Linux, OSs.Windows, OSs.MacOS].forEach(async (os) => {
     await clickButton(user, `onboarding.build.other.os.${os}`);
     assertCFamilyStepIsCorrectlyRendered(os);
   });
@@ -117,7 +117,7 @@ it('allows to navigate back to a previous step', async () => {
   // No clickable steps.
   expect(
     screen.queryByRole('button', {
-      name: '1 onboarding.tutorial.with.azure_pipelines.ExtensionInstallation.title'
+      name: '1 onboarding.tutorial.with.azure_pipelines.ExtensionInstallation.title',
     })
   ).not.toBeInTheDocument();
 
@@ -128,12 +128,12 @@ it('allows to navigate back to a previous step', async () => {
   // The first 2 steps become clickable.
   expect(
     screen.getByRole('button', {
-      name: '1 onboarding.tutorial.with.azure_pipelines.ExtensionInstallation.title'
+      name: '1 onboarding.tutorial.with.azure_pipelines.ExtensionInstallation.title',
     })
   ).toBeInTheDocument();
   expect(
     screen.getByRole('button', {
-      name: '2 onboarding.tutorial.with.azure_pipelines.ServiceEndpoint.title'
+      name: '2 onboarding.tutorial.with.azure_pipelines.ServiceEndpoint.title',
     })
   ).toBeInTheDocument();
 
@@ -143,7 +143,7 @@ it('allows to navigate back to a previous step', async () => {
   // No more clickable steps.
   expect(
     screen.queryByRole('button', {
-      name: '1 onboarding.tutorial.with.azure_pipelines.ExtensionInstallation.title'
+      name: '1 onboarding.tutorial.with.azure_pipelines.ExtensionInstallation.title',
     })
   ).not.toBeInTheDocument();
 });
@@ -165,7 +165,7 @@ it('should not offer CFamily analysis if the language is not available', async (
 function assertDefaultStepIsCorrectlyRendered() {
   expect(
     screen.getByRole('heading', {
-      name: 'onboarding.tutorial.with.azure_pipelines.ExtensionInstallation.title'
+      name: 'onboarding.tutorial.with.azure_pipelines.ExtensionInstallation.title',
     })
   ).toBeInTheDocument();
 }
@@ -173,7 +173,7 @@ function assertDefaultStepIsCorrectlyRendered() {
 function assertServiceEndpointStepIsCorrectlyRendered() {
   expect(
     screen.getByRole('heading', {
-      name: 'onboarding.tutorial.with.azure_pipelines.ServiceEndpoint.title'
+      name: 'onboarding.tutorial.with.azure_pipelines.ServiceEndpoint.title',
     })
   ).toBeInTheDocument();
   expect(getCopyToClipboardValue()).toBe('https://sonarqube.example.com/');
@@ -185,7 +185,7 @@ function assertServiceEndpointStepIsCorrectlyRendered() {
 function assertDotNetStepIsCorrectlyRendered() {
   expect(
     screen.getByRole('heading', {
-      name: 'onboarding.tutorial.with.azure_pipelines.BranchAnalysis.title'
+      name: 'onboarding.tutorial.with.azure_pipelines.BranchAnalysis.title',
     })
   ).toBeInTheDocument();
   expect(getCopyToClipboardValue()).toBe('foo');
@@ -213,7 +213,7 @@ function assertOtherStepIsCorrectlyRendered() {
 function assertFinishStepIsCorrectlyRendered() {
   expect(
     screen.getByRole('heading', {
-      name: 'onboarding.tutorial.ci_outro.all_set.title'
+      name: 'onboarding.tutorial.ci_outro.all_set.title',
     })
   ).toBeInTheDocument();
 }
diff --git a/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/commands/AlertClassicEditor.tsx b/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/commands/AlertClassicEditor.tsx
index b334f5373cd..e25f0fa81c3 100644
--- a/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/commands/AlertClassicEditor.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/commands/AlertClassicEditor.tsx
@@ -36,7 +36,7 @@ export default function AlertClassicEditor() {
             <DocLink to={ALM_DOCUMENTATION_PATHS[AlmKeys.Azure]}>
               {translate('onboarding.tutorial.with.azure_pipelines.BranchAnalysis.info.doc_link')}
             </DocLink>
-          )
+          ),
         }}
       />
     </Alert>
diff --git a/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/commands/ClangGCC.tsx b/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/commands/ClangGCC.tsx
index 49073dfef02..5947d867ec7 100644
--- a/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/commands/ClangGCC.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/commands/ClangGCC.tsx
@@ -55,7 +55,7 @@ unzip build-wrapper.zip`,
       highlightScriptKey:
         'onboarding.tutorial.with.azure_pipelines.BranchAnalysis.build_wrapper.ccpp.nix',
       scriptBuild:
-        './build-wrapper-linux-x86/build-wrapper-linux-x86-64 --out-dir bw-output <your build command here>'
+        './build-wrapper-linux-x86/build-wrapper-linux-x86-64 --out-dir bw-output <your build command here>',
     },
     [OSs.Windows]: {
       script: `Invoke-WebRequest -Uri '${host}/static/cpp/build-wrapper-win-x86.zip' -OutFile 'build-wrapper.zip'
@@ -63,7 +63,7 @@ Expand-Archive -Path 'build-wrapper.zip' -DestinationPath '.'`,
       highlightScriptKey:
         'onboarding.tutorial.with.azure_pipelines.BranchAnalysis.build_wrapper.ccpp.win',
       scriptBuild:
-        'build-wrapper-win-x86/build-wrapper-win-x86-64.exe --out-dir bw-output <your build command here>'
+        'build-wrapper-win-x86/build-wrapper-win-x86-64.exe --out-dir bw-output <your build command here>',
     },
     [OSs.MacOS]: {
       script: `curl '${host}/static/cpp/build-wrapper-macosx-x86.zip' --output build-wrapper.zip
@@ -71,8 +71,8 @@ unzip build-wrapper.zip`,
       highlightScriptKey:
         'onboarding.tutorial.with.azure_pipelines.BranchAnalysis.build_wrapper.ccpp.nix',
       scriptBuild:
-        './build-wrapper-macos-x86/build-wrapper-macos-x86 --out-dir bw-output <your build command here>'
-    }
+        './build-wrapper-macos-x86/build-wrapper-macos-x86 --out-dir bw-output <your build command here>',
+    },
   };
 
   React.useEffect(() => {
diff --git a/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/commands/PrepareAnalysisCommand.tsx b/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/commands/PrepareAnalysisCommand.tsx
index 589fc637457..60bf5e1520c 100644
--- a/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/commands/PrepareAnalysisCommand.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/commands/PrepareAnalysisCommand.tsx
@@ -28,7 +28,7 @@ import { BuildTools } from '../../types';
 export enum PrepareType {
   JavaMavenGradle,
   StandAlone,
-  MSBuild
+  MSBuild,
 }
 
 export interface PrepareAnalysisCommandProps {
@@ -76,7 +76,7 @@ sonar.projectKey=${projectKey}`;
                   buildTool
                 )}
               </strong>
-            )
+            ),
           }}
         />
       </li>
@@ -105,7 +105,7 @@ sonar.projectKey=${projectKey}`;
                   </b>
                 ),
                 key: <code className="rule">{projectKey}</code>,
-                button: <ClipboardIconButton copyValue={projectKey} />
+                button: <ClipboardIconButton copyValue={projectKey} />,
               }}
             />
           </li>
@@ -132,7 +132,7 @@ sonar.projectKey=${projectKey}`;
                     </b>
                   ),
                   property: <code className="rule">{ADDITIONAL_PROPERTY}</code>,
-                  button: <ClipboardIconButton copyValue={ADDITIONAL_PROPERTY} />
+                  button: <ClipboardIconButton copyValue={ADDITIONAL_PROPERTY} />,
                 }}
               />
             </li>
@@ -166,7 +166,7 @@ sonar.projectKey=${projectKey}`;
                 </b>
               ),
               key: <code className="rule">{projectKey}</code>,
-              button: <ClipboardIconButton copyValue={projectKey} />
+              button: <ClipboardIconButton copyValue={projectKey} />,
             }}
           />
         </li>
diff --git a/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/commands/PublishSteps.tsx b/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/commands/PublishSteps.tsx
index 20852c0405a..a8acaf81e25 100644
--- a/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/commands/PublishSteps.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/commands/PublishSteps.tsx
@@ -20,7 +20,7 @@
 import * as React from 'react';
 import { FormattedMessage } from 'react-intl';
 import withAvailableFeatures, {
-  WithAvailableFeaturesProps
+  WithAvailableFeaturesProps,
 } from '../../../../app/components/available-features/withAvailableFeatures';
 import { Alert } from '../../../../components/ui/Alert';
 import { ALM_DOCUMENTATION_PATHS } from '../../../../helpers/constants';
@@ -72,7 +72,7 @@ export function PublishSteps(props: PublishStepsProps) {
                     'onboarding.tutorial.with.azure_pipelines.BranchAnalysis.branch_protection.link'
                   )}
                 </DocLink>
-              )
+              ),
             }}
           />
         </>
diff --git a/server/sonar-web/src/main/js/components/tutorials/bitbucket-pipelines/AnalysisCommand.tsx b/server/sonar-web/src/main/js/components/tutorials/bitbucket-pipelines/AnalysisCommand.tsx
index b29b219c0f5..073368b1bf9 100644
--- a/server/sonar-web/src/main/js/components/tutorials/bitbucket-pipelines/AnalysisCommand.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/bitbucket-pipelines/AnalysisCommand.tsx
@@ -20,7 +20,7 @@
 import { Dictionary } from 'lodash';
 import * as React from 'react';
 import withAvailableFeatures, {
-  WithAvailableFeaturesProps
+  WithAvailableFeaturesProps,
 } from '../../../app/components/available-features/withAvailableFeatures';
 import { Feature } from '../../../types/features';
 import { Component } from '../../../types/types';
@@ -40,16 +40,14 @@ export interface AnalysisCommandProps extends WithAvailableFeaturesProps {
   component: Component;
 }
 
-const YamlTemplate: Dictionary<(
-  branchesEnabled?: boolean,
-  mainBranchName?: string,
-  projectKey?: string
-) => string> = {
+const YamlTemplate: Dictionary<
+  (branchesEnabled?: boolean, mainBranchName?: string, projectKey?: string) => string
+> = {
   [BuildTools.Gradle]: gradleExample,
   [BuildTools.Maven]: mavenExample,
   [BuildTools.DotNet]: dotNetExample,
   [BuildTools.CFamily]: cFamilyExample,
-  [BuildTools.Other]: othersExample
+  [BuildTools.Other]: othersExample,
 };
 
 export function AnalysisCommand(props: AnalysisCommandProps) {
diff --git a/server/sonar-web/src/main/js/components/tutorials/bitbucket-pipelines/BitbucketPipelinesTutorial.tsx b/server/sonar-web/src/main/js/components/tutorials/bitbucket-pipelines/BitbucketPipelinesTutorial.tsx
index dfaee042ab7..16dbb9a3841 100644
--- a/server/sonar-web/src/main/js/components/tutorials/bitbucket-pipelines/BitbucketPipelinesTutorial.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/bitbucket-pipelines/BitbucketPipelinesTutorial.tsx
@@ -22,7 +22,7 @@ import { translate } from '../../../helpers/l10n';
 import {
   AlmKeys,
   AlmSettingsInstance,
-  ProjectAlmBindingResponse
+  ProjectAlmBindingResponse,
 } from '../../../types/alm-settings';
 import { Component } from '../../../types/types';
 import { LoggedInUser } from '../../../types/users';
@@ -38,7 +38,7 @@ import RepositoryVariables from './RepositoryVariables';
 export enum Steps {
   REPOSITORY_VARIABLES = 1,
   YAML = 2,
-  ALL_SET = 3
+  ALL_SET = 3,
 }
 
 export interface BitbucketPipelinesTutorialProps {
@@ -59,7 +59,7 @@ export default function BitbucketPipelinesTutorial(props: BitbucketPipelinesTuto
     component,
     projectBinding,
     willRefreshAutomatically,
-    mainBranchName
+    mainBranchName,
   } = props;
 
   const [step, setStep] = React.useState<Steps>(Steps.REPOSITORY_VARIABLES);
@@ -88,7 +88,7 @@ export default function BitbucketPipelinesTutorial(props: BitbucketPipelinesTuto
         open={step === Steps.YAML}
         renderForm={() => (
           <YamlFileStep>
-            {buildTool => (
+            {(buildTool) => (
               <>
                 {buildTool === BuildTools.CFamily && (
                   <GithubCFamilyExampleRepositories
diff --git a/server/sonar-web/src/main/js/components/tutorials/bitbucket-pipelines/PreambuleYaml.tsx b/server/sonar-web/src/main/js/components/tutorials/bitbucket-pipelines/PreambuleYaml.tsx
index fa0e6824eab..23605ea8eae 100644
--- a/server/sonar-web/src/main/js/components/tutorials/bitbucket-pipelines/PreambuleYaml.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/bitbucket-pipelines/PreambuleYaml.tsx
@@ -48,7 +48,7 @@ export function PreambuleYaml(props: PreambuleYamlProps) {
                   <ClipboardIconButton copyValue="build.gradle" />
                 </>
               ),
-              sq: <code className="rule">org.sonarqube</code>
+              sq: <code className="rule">org.sonarqube</code>,
             }}
           />
           <CodeSnippet snippet={buildGradleSnippet(component.key)} />
diff --git a/server/sonar-web/src/main/js/components/tutorials/bitbucket-pipelines/RepositoryVariables.tsx b/server/sonar-web/src/main/js/components/tutorials/bitbucket-pipelines/RepositoryVariables.tsx
index 9fa7e0f5b7a..230c33946ad 100644
--- a/server/sonar-web/src/main/js/components/tutorials/bitbucket-pipelines/RepositoryVariables.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/bitbucket-pipelines/RepositoryVariables.tsx
@@ -55,14 +55,15 @@ export default function RepositoryVariables(props: RepositoryVariablesProps) {
                     projectBinding
                   )}/admin/addon/admin/pipelines/repository-variables`}
                   target="_blank"
-                  rel="noopener noreferrer">
+                  rel="noopener noreferrer"
+                >
                   {translate('onboarding.tutorial.with.bitbucket_pipelines.variables.intro.link')}
                 </a>
               ) : (
                 <strong>
                   {translate('onboarding.tutorial.with.bitbucket_pipelines.variables.intro.link')}
                 </strong>
-              )
+              ),
           }}
         />
       </p>
@@ -109,7 +110,7 @@ export default function RepositoryVariables(props: RepositoryVariablesProps) {
             values={{
               extra: <ClipboardIconButton copyValue={baseUrl} />,
               field: <strong>{translate('onboarding.tutorial.env_variables.field')}</strong>,
-              value: <code className="rule">{baseUrl}</code>
+              value: <code className="rule">{baseUrl}</code>,
             }}
           />
         </li>
diff --git a/server/sonar-web/src/main/js/components/tutorials/bitbucket-pipelines/__tests__/AnalysisCommand-test.tsx b/server/sonar-web/src/main/js/components/tutorials/bitbucket-pipelines/__tests__/AnalysisCommand-test.tsx
index 50253295ec2..9d471c1443e 100644
--- a/server/sonar-web/src/main/js/components/tutorials/bitbucket-pipelines/__tests__/AnalysisCommand-test.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/bitbucket-pipelines/__tests__/AnalysisCommand-test.tsx
@@ -28,8 +28,8 @@ it.each([
   [BuildTools.DotNet],
   [BuildTools.Gradle],
   [BuildTools.Maven],
-  [BuildTools.Other]
-])('should render correctly for %s', buildTool => {
+  [BuildTools.Other],
+])('should render correctly for %s', (buildTool) => {
   expect(shallowRender({ buildTool })).toMatchSnapshot();
   expect(shallowRender({ hasFeature: () => true, buildTool })).toMatchSnapshot(
     'with branch enabled'
diff --git a/server/sonar-web/src/main/js/components/tutorials/bitbucket-pipelines/__tests__/BitbucketPipelinesTutorial-test.tsx b/server/sonar-web/src/main/js/components/tutorials/bitbucket-pipelines/__tests__/BitbucketPipelinesTutorial-test.tsx
index 11c2961ddb9..b5b54f61e22 100644
--- a/server/sonar-web/src/main/js/components/tutorials/bitbucket-pipelines/__tests__/BitbucketPipelinesTutorial-test.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/bitbucket-pipelines/__tests__/BitbucketPipelinesTutorial-test.tsx
@@ -21,14 +21,14 @@ import { shallow } from 'enzyme';
 import * as React from 'react';
 import {
   mockAlmSettingsInstance,
-  mockProjectBitbucketCloudBindingResponse
+  mockProjectBitbucketCloudBindingResponse,
 } from '../../../../helpers/mocks/alm-settings';
 import { mockComponent } from '../../../../helpers/mocks/component';
 import { mockLoggedInUser } from '../../../../helpers/testMocks';
 import Step from '../../components/Step';
 import { renderStepContent } from '../../test-utils';
 import BitbucketPipelinesTutorial, {
-  BitbucketPipelinesTutorialProps
+  BitbucketPipelinesTutorialProps,
 } from '../BitbucketPipelinesTutorial';
 
 it('should render correctly', () => {
@@ -41,35 +41,12 @@ it('should render correctly', () => {
 it('should correctly navigate through the steps', () => {
   const wrapper = shallowRender();
 
-  expect(
-    wrapper
-      .find(Step)
-      .at(0)
-      .props().open
-  ).toBe(true);
-  expect(
-    wrapper
-      .find(Step)
-      .at(1)
-      .props().open
-  ).toBe(false);
+  expect(wrapper.find(Step).at(0).props().open).toBe(true);
+  expect(wrapper.find(Step).at(1).props().open).toBe(false);
 
-  wrapper
-    .find(Step)
-    .at(1)
-    .simulate('open');
-  expect(
-    wrapper
-      .find(Step)
-      .at(0)
-      .props().open
-  ).toBe(false);
-  expect(
-    wrapper
-      .find(Step)
-      .at(1)
-      .props().open
-  ).toBe(true);
+  wrapper.find(Step).at(1).simulate('open');
+  expect(wrapper.find(Step).at(0).props().open).toBe(false);
+  expect(wrapper.find(Step).at(1).props().open).toBe(true);
 });
 
 function shallowRender(props: Partial<BitbucketPipelinesTutorialProps> = {}) {
diff --git a/server/sonar-web/src/main/js/components/tutorials/bitbucket-pipelines/__tests__/PreambuleYaml-test.tsx b/server/sonar-web/src/main/js/components/tutorials/bitbucket-pipelines/__tests__/PreambuleYaml-test.tsx
index ee57dd67785..60953c916f7 100644
--- a/server/sonar-web/src/main/js/components/tutorials/bitbucket-pipelines/__tests__/PreambuleYaml-test.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/bitbucket-pipelines/__tests__/PreambuleYaml-test.tsx
@@ -25,7 +25,7 @@ import { PreambuleYaml, PreambuleYamlProps } from '../PreambuleYaml';
 
 it.each([[BuildTools.DotNet], [BuildTools.Gradle], [BuildTools.CFamily], [BuildTools.Other]])(
   'should render correctly for %s',
-  buildTool => {
+  (buildTool) => {
     expect(shallowRender({ buildTool })).toMatchSnapshot();
   }
 );
diff --git a/server/sonar-web/src/main/js/components/tutorials/bitbucket-pipelines/__tests__/RepositoryVariables-test.tsx b/server/sonar-web/src/main/js/components/tutorials/bitbucket-pipelines/__tests__/RepositoryVariables-test.tsx
index 2a479482be9..53f378377ce 100644
--- a/server/sonar-web/src/main/js/components/tutorials/bitbucket-pipelines/__tests__/RepositoryVariables-test.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/bitbucket-pipelines/__tests__/RepositoryVariables-test.tsx
@@ -21,7 +21,7 @@ import { shallow } from 'enzyme';
 import * as React from 'react';
 import {
   mockAlmSettingsInstance,
-  mockProjectBitbucketCloudBindingResponse
+  mockProjectBitbucketCloudBindingResponse,
 } from '../../../../helpers/mocks/alm-settings';
 import { mockComponent } from '../../../../helpers/mocks/component';
 import { mockLoggedInUser } from '../../../../helpers/testMocks';
diff --git a/server/sonar-web/src/main/js/components/tutorials/components/AllSet.tsx b/server/sonar-web/src/main/js/components/tutorials/components/AllSet.tsx
index df12b20c962..68c49629f48 100644
--- a/server/sonar-web/src/main/js/components/tutorials/components/AllSet.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/components/AllSet.tsx
@@ -19,7 +19,7 @@
  */
 import * as React from 'react';
 import withAvailableFeatures, {
-  WithAvailableFeaturesProps
+  WithAvailableFeaturesProps,
 } from '../../../app/components/available-features/withAvailableFeatures';
 import { translate } from '../../../helpers/l10n';
 import { getBaseUrl } from '../../../helpers/system';
diff --git a/server/sonar-web/src/main/js/components/tutorials/components/CompilationInfo.tsx b/server/sonar-web/src/main/js/components/tutorials/components/CompilationInfo.tsx
index 0753cec1c97..c6930a6bd81 100644
--- a/server/sonar-web/src/main/js/components/tutorials/components/CompilationInfo.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/components/CompilationInfo.tsx
@@ -39,7 +39,7 @@ export function CompilationInfo({ className = 'spacer-top spacer-bottom' }: Comp
               <DocLink to="/analysis/languages/cfamily/">
                 {translate('onboarding.tutorial.cfamilly.compilation_database_info.link')}
               </DocLink>
-            )
+            ),
           }}
         />
       </p>
@@ -52,7 +52,7 @@ export function CompilationInfo({ className = 'spacer-top spacer-bottom' }: Comp
               <DocLink to="/analysis/languages/cfamily/#analysis-cache">
                 {translate('onboarding.tutorial.cfamilly.speed_caching.link')}
               </DocLink>
-            )
+            ),
           }}
         />
       </p>
diff --git a/server/sonar-web/src/main/js/components/tutorials/components/CreateYmlFile.tsx b/server/sonar-web/src/main/js/components/tutorials/components/CreateYmlFile.tsx
index 86acd44bde4..497901e8d26 100644
--- a/server/sonar-web/src/main/js/components/tutorials/components/CreateYmlFile.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/components/CreateYmlFile.tsx
@@ -41,7 +41,7 @@ export default function CreateYmlFile(props: CreateYmlFileProps) {
               <code className="rule">{yamlFileName}</code>
               <ClipboardIconButton copyValue={yamlFileName} />
             </>
-          )
+          ),
         }}
       />
       <CodeSnippet snippet={yamlTemplate} />
diff --git a/server/sonar-web/src/main/js/components/tutorials/components/EditTokenModal.tsx b/server/sonar-web/src/main/js/components/tutorials/components/EditTokenModal.tsx
index 29dd00f8ec9..5bd1ee3e96f 100644
--- a/server/sonar-web/src/main/js/components/tutorials/components/EditTokenModal.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/components/EditTokenModal.tsx
@@ -29,7 +29,7 @@ import { translate, translateWithParameters } from '../../../helpers/l10n';
 import {
   computeTokenExpirationDate,
   EXPIRATION_OPTIONS,
-  getAvailableExpirationOptions
+  getAvailableExpirationOptions,
 } from '../../../helpers/tokens';
 import { hasGlobalPermission } from '../../../helpers/users';
 import { Permissions } from '../../../types/permissions';
@@ -62,7 +62,7 @@ export default class EditTokenModal extends React.PureComponent<Props, State> {
     loading: true,
     tokenName: '',
     tokenExpiration: TokenExpiration.OneMonth,
-    tokenExpirationOptions: EXPIRATION_OPTIONS
+    tokenExpirationOptions: EXPIRATION_OPTIONS,
   };
 
   componentDidMount() {
@@ -83,7 +83,7 @@ export default class EditTokenModal extends React.PureComponent<Props, State> {
     if (this.mounted) {
       this.setState({
         loading: false,
-        tokenName: getUniqueTokenName(tokens, `Analyze "${component.name}"`)
+        tokenName: getUniqueTokenName(tokens, `Analyze "${component.name}"`),
       });
     }
   };
@@ -97,7 +97,7 @@ export default class EditTokenModal extends React.PureComponent<Props, State> {
 
   getNewToken = async () => {
     const {
-      component: { key }
+      component: { key },
     } = this.props;
     const { tokenName, tokenExpiration } = this.state;
 
@@ -108,14 +108,14 @@ export default class EditTokenModal extends React.PureComponent<Props, State> {
       type,
       projectKey: key,
       ...(tokenExpiration !== TokenExpiration.NoExpiration && {
-        expirationDate: computeTokenExpirationDate(tokenExpiration)
-      })
+        expirationDate: computeTokenExpirationDate(tokenExpiration),
+      }),
     });
 
     if (this.mounted) {
       this.setState({
         token,
-        tokenName
+        tokenName,
       });
     }
   };
@@ -131,7 +131,7 @@ export default class EditTokenModal extends React.PureComponent<Props, State> {
 
   handleTokenNameChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     this.setState({
-      tokenName: event.target.value
+      tokenName: event.target.value,
     });
   };
 
@@ -148,7 +148,7 @@ export default class EditTokenModal extends React.PureComponent<Props, State> {
       if (this.mounted) {
         this.setState({
           token: '',
-          tokenName: ''
+          tokenName: '',
         });
       }
     }
@@ -179,7 +179,7 @@ export default class EditTokenModal extends React.PureComponent<Props, State> {
                       <Link target="_blank" to="/account/security">
                         {translate('onboarding.token.text.user_account')}
                       </Link>
-                    )
+                    ),
                   }}
                 />
               </p>
@@ -229,7 +229,8 @@ export default class EditTokenModal extends React.PureComponent<Props, State> {
                         <div className="display-flex-column">
                           <label
                             className="text-bold little-spacer-bottom"
-                            htmlFor="token-expiration">
+                            htmlFor="token-expiration"
+                          >
                             {translate('users.tokens.expires_in')}
                           </label>
                           <div className="display-flex-center">
@@ -240,13 +241,14 @@ export default class EditTokenModal extends React.PureComponent<Props, State> {
                               onChange={this.handleTokenExpirationChange}
                               options={tokenExpirationOptions}
                               value={tokenExpirationOptions.find(
-                                option => option.value === tokenExpiration
+                                (option) => option.value === tokenExpiration
                               )}
                             />
                             <Button
                               className="text-middle"
                               disabled={!tokenName}
-                              onClick={this.getNewToken}>
+                              onClick={this.getNewToken}
+                            >
                               {translate('onboarding.token.generate')}
                             </Button>
                           </div>
diff --git a/server/sonar-web/src/main/js/components/tutorials/components/GithubCFamilyExampleRepositories.tsx b/server/sonar-web/src/main/js/components/tutorials/components/GithubCFamilyExampleRepositories.tsx
index f9f41a4bd2b..fb56f303801 100644
--- a/server/sonar-web/src/main/js/components/tutorials/components/GithubCFamilyExampleRepositories.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/components/GithubCFamilyExampleRepositories.tsx
@@ -34,7 +34,7 @@ export interface GithubCFamilyExampleRepositoriesProps {
 const OS_SEARCH_MAP = {
   [OSs.Linux]: 'linux',
   [OSs.Windows]: 'windows',
-  [OSs.MacOS]: 'macos'
+  [OSs.MacOS]: 'macos',
 };
 
 const CI_SEARCH_MAP = {
@@ -44,7 +44,7 @@ const CI_SEARCH_MAP = {
   [TutorialModes.GitLabCI]: 'gitlab',
   [TutorialModes.BitbucketPipelines]: 'bitbucket',
   [TutorialModes.Local]: 'otherci',
-  [TutorialModes.OtherCI]: 'otherci'
+  [TutorialModes.OtherCI]: 'otherci',
 };
 
 export default function GithubCFamilyExampleRepositories(
@@ -52,7 +52,7 @@ export default function GithubCFamilyExampleRepositories(
 ) {
   const { className, os, ci } = props;
   const queryParams = ['sq', os ? OS_SEARCH_MAP[os] : undefined, ci ? CI_SEARCH_MAP[ci] : undefined]
-    .filter(s => !!s)
+    .filter((s) => !!s)
     .join('+');
   const link = `https://github.com/orgs/sonarsource-cfamily-examples/repositories?q=${queryParams}`;
 
@@ -61,7 +61,8 @@ export default function GithubCFamilyExampleRepositories(
       className={classNames(
         'github-cfamily-example-repositories-box big-padded boxed-group',
         className
-      )}>
+      )}
+    >
       <div className="display-flex-center">
         <img
           alt="" // Should be ignored by screen readers
diff --git a/server/sonar-web/src/main/js/components/tutorials/components/ProjectTokenScopeInfo.tsx b/server/sonar-web/src/main/js/components/tutorials/components/ProjectTokenScopeInfo.tsx
index d7cd473c8c8..b3246dfbe01 100644
--- a/server/sonar-web/src/main/js/components/tutorials/components/ProjectTokenScopeInfo.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/components/ProjectTokenScopeInfo.tsx
@@ -41,7 +41,7 @@ export default function ProjectTokenScopeInfo({ className }: ProjectTokenScopeIn
               {translate('onboarding.token.text.user_account')}
             </Link>
           ),
-          doc_link: <DocLink to="/user-guide/user-token/">{translate('documentation')}</DocLink>
+          doc_link: <DocLink to="/user-guide/user-token/">{translate('documentation')}</DocLink>,
         }}
       />
     </Alert>
diff --git a/server/sonar-web/src/main/js/components/tutorials/components/RenderOptions.tsx b/server/sonar-web/src/main/js/components/tutorials/components/RenderOptions.tsx
index 44e23a9d26d..1f10592a957 100644
--- a/server/sonar-web/src/main/js/components/tutorials/components/RenderOptions.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/components/RenderOptions.tsx
@@ -36,7 +36,7 @@ export default function RenderOptions({
   onCheck,
   optionLabelKey,
   options,
-  titleLabelKey
+  titleLabelKey,
 }: RenderOptionsProps) {
   return (
     <div className="big-spacer-top">
@@ -45,9 +45,9 @@ export default function RenderOptions({
       <ButtonToggle
         label={label}
         onCheck={onCheck}
-        options={options.map(build => ({
+        options={options.map((build) => ({
           label: translate(optionLabelKey, build),
-          value: build
+          value: build,
         }))}
         value={checked}
       />
diff --git a/server/sonar-web/src/main/js/components/tutorials/components/SentenceWithFilename.tsx b/server/sonar-web/src/main/js/components/tutorials/components/SentenceWithFilename.tsx
index 3870d9c4f14..8c0b052eda2 100644
--- a/server/sonar-web/src/main/js/components/tutorials/components/SentenceWithFilename.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/components/SentenceWithFilename.tsx
@@ -28,7 +28,7 @@ export interface SentenceWithFilenameProps {
 
 export default function SentenceWithFilename({
   filename,
-  translationKey
+  translationKey,
 }: SentenceWithFilenameProps) {
   return (
     <span className="markdown">
@@ -36,7 +36,7 @@ export default function SentenceWithFilename({
         defaultMessage={translate(translationKey, 'sentence')}
         id={`${translationKey}.sentence`}
         values={{
-          file: <code>{filename}</code>
+          file: <code>{filename}</code>,
         }}
       />
     </span>
diff --git a/server/sonar-web/src/main/js/components/tutorials/components/SentenceWithHighlights.tsx b/server/sonar-web/src/main/js/components/tutorials/components/SentenceWithHighlights.tsx
index 16cdd9d2834..e53cf613fa0 100644
--- a/server/sonar-web/src/main/js/components/tutorials/components/SentenceWithHighlights.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/components/SentenceWithHighlights.tsx
@@ -31,12 +31,12 @@ export interface SentenceWithHighlightsProps {
 export default function SentenceWithHighlights({
   highlightKeys,
   translationKey,
-  highlightPrefixKeys
+  highlightPrefixKeys,
 }: SentenceWithHighlightsProps) {
   const values: Dict<JSX.Element> = {};
 
   const transhighlightPrefixKeys = highlightPrefixKeys || translationKey;
-  highlightKeys.forEach(key => {
+  highlightKeys.forEach((key) => {
     values[key] = <strong>{translate(transhighlightPrefixKeys, 'sentence', key)}</strong>;
   });
   return (
diff --git a/server/sonar-web/src/main/js/components/tutorials/components/Step.tsx b/server/sonar-web/src/main/js/components/tutorials/components/Step.tsx
index 5b43bab425f..a9a1da820ba 100644
--- a/server/sonar-web/src/main/js/components/tutorials/components/Step.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/components/Step.tsx
@@ -37,7 +37,7 @@ export default function Step(props: Props) {
   const className = classNames('boxed-group', 'onboarding-step', {
     'is-open': open,
     'is-finished': finished,
-    'no-step-number': stepNumber === undefined
+    'no-step-number': stepNumber === undefined,
   });
 
   const clickable = !open && finished && props.onOpen !== undefined;
@@ -54,7 +54,8 @@ export default function Step(props: Props) {
       className={className}
       onClick={clickable ? handleClick : undefined}
       role={clickable ? 'button' : undefined}
-      tabIndex={clickable ? 0 : undefined}>
+      tabIndex={clickable ? 0 : undefined}
+    >
       {stepNumber !== undefined && <div className="onboarding-step-number">{stepNumber}</div>}
       {!open && props.renderResult && props.renderResult()}
       <div className="boxed-group-header">
diff --git a/server/sonar-web/src/main/js/components/tutorials/components/TokenStepGenerator.tsx b/server/sonar-web/src/main/js/components/tutorials/components/TokenStepGenerator.tsx
index 7529a06b497..82d046717a6 100644
--- a/server/sonar-web/src/main/js/components/tutorials/components/TokenStepGenerator.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/components/TokenStepGenerator.tsx
@@ -34,7 +34,7 @@ export default function TokenStepGenerator(props: TokenStepGeneratorProps) {
   const { component, currentUser } = props;
   const [isModalVisible, toggleModal] = React.useState(false);
 
-  const toggleTokenModal = () => toggleModal(visible => !visible);
+  const toggleTokenModal = () => toggleModal((visible) => !visible);
   const closeTokenModal = () => toggleModal(false);
 
   return (
@@ -50,7 +50,7 @@ export default function TokenStepGenerator(props: TokenStepGeneratorProps) {
               </Button>
             ),
             field: <strong>{translate('onboarding.tutorial.env_variables.field')}</strong>,
-            value: translate('onboarding.tutorial.env_variables.token_generator.value')
+            value: translate('onboarding.tutorial.env_variables.token_generator.value'),
           }}
         />
       </li>
diff --git a/server/sonar-web/src/main/js/components/tutorials/components/YamlFileStep.tsx b/server/sonar-web/src/main/js/components/tutorials/components/YamlFileStep.tsx
index f310794296d..7c1fe85918b 100644
--- a/server/sonar-web/src/main/js/components/tutorials/components/YamlFileStep.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/components/YamlFileStep.tsx
@@ -46,7 +46,7 @@ export function YamlFileStep(props: YamlFileStepProps) {
         <RenderOptions
           label={translate('onboarding.build')}
           checked={buildToolSelected}
-          onCheck={value => setBuildToolSelected(value as BuildTools)}
+          onCheck={(value) => setBuildToolSelected(value as BuildTools)}
           options={buildTools}
           optionLabelKey="onboarding.build"
         />
diff --git a/server/sonar-web/src/main/js/components/tutorials/components/__tests__/EditTokenModal-test.tsx b/server/sonar-web/src/main/js/components/tutorials/components/__tests__/EditTokenModal-test.tsx
index 7681d5487c8..a9fde6da0cd 100644
--- a/server/sonar-web/src/main/js/components/tutorials/components/__tests__/EditTokenModal-test.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/components/__tests__/EditTokenModal-test.tsx
@@ -34,7 +34,7 @@ import EditTokenModal from '../EditTokenModal';
 jest.mock('../../../../api/user-tokens');
 
 jest.mock('../../../../api/settings', () => ({
-  getAllValues: jest.fn().mockResolvedValue([])
+  getAllValues: jest.fn().mockResolvedValue([]),
 }));
 
 let tokenMock: UserTokensMock;
@@ -88,7 +88,7 @@ it('should behave correctly', async () => {
 
   // Revoke token.
   await clickButton(user, 'users.tokens.revoke_token');
-  expect(tokenMock.tokens.map(t => t.name)).not.toContain(lastToken.name);
+  expect(tokenMock.tokens.map((t) => t.name)).not.toContain(lastToken.name);
 
   // Generate a new token.
   await typeInField(
@@ -112,7 +112,7 @@ it('should behave correctly', async () => {
 it('should allow setting a preferred token type', async () => {
   renderEditTokenModal({
     preferredTokenType: TokenType.Global,
-    currentUser: mockLoggedInUser({ permissions: { global: [Permissions.Scan] } })
+    currentUser: mockLoggedInUser({ permissions: { global: [Permissions.Scan] } }),
   });
   const user = userEvent.setup();
 
@@ -128,7 +128,7 @@ it('should allow setting a preferred token type', async () => {
 
 it('should fallback to project tokens if the user cannot generate global tokens', async () => {
   renderEditTokenModal({
-    preferredTokenType: TokenType.Global
+    preferredTokenType: TokenType.Global,
   });
   const user = userEvent.setup();
 
diff --git a/server/sonar-web/src/main/js/components/tutorials/components/__tests__/GithubCFamilyExampleRepositories-test.tsx b/server/sonar-web/src/main/js/components/tutorials/components/__tests__/GithubCFamilyExampleRepositories-test.tsx
index a0ea0aaeec7..9b42c1066f5 100644
--- a/server/sonar-web/src/main/js/components/tutorials/components/__tests__/GithubCFamilyExampleRepositories-test.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/components/__tests__/GithubCFamilyExampleRepositories-test.tsx
@@ -21,7 +21,7 @@ import { shallow } from 'enzyme';
 import * as React from 'react';
 import { OSs, TutorialModes } from '../../types';
 import GithubCFamilyExampleRepositories, {
-  GithubCFamilyExampleRepositoriesProps
+  GithubCFamilyExampleRepositoriesProps,
 } from '../GithubCFamilyExampleRepositories';
 
 it('should render correctly', () => {
diff --git a/server/sonar-web/src/main/js/components/tutorials/github-action/AnalysisCommand.tsx b/server/sonar-web/src/main/js/components/tutorials/github-action/AnalysisCommand.tsx
index 823ad58c8b9..0d54449fa60 100644
--- a/server/sonar-web/src/main/js/components/tutorials/github-action/AnalysisCommand.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/github-action/AnalysisCommand.tsx
@@ -19,7 +19,7 @@
  */
 import * as React from 'react';
 import withAvailableFeatures, {
-  WithAvailableFeaturesProps
+  WithAvailableFeaturesProps,
 } from '../../../app/components/available-features/withAvailableFeatures';
 import { Feature } from '../../../types/features';
 import { Component } from '../../../types/types';
diff --git a/server/sonar-web/src/main/js/components/tutorials/github-action/GitHubActionTutorial.tsx b/server/sonar-web/src/main/js/components/tutorials/github-action/GitHubActionTutorial.tsx
index 64a8ffd6e6c..7d69445e962 100644
--- a/server/sonar-web/src/main/js/components/tutorials/github-action/GitHubActionTutorial.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/github-action/GitHubActionTutorial.tsx
@@ -22,7 +22,7 @@ import { translate } from '../../../helpers/l10n';
 import {
   AlmKeys,
   AlmSettingsInstance,
-  ProjectAlmBindingResponse
+  ProjectAlmBindingResponse,
 } from '../../../types/alm-settings';
 import { Component } from '../../../types/types';
 import { LoggedInUser } from '../../../types/users';
@@ -35,7 +35,7 @@ import SecretStep from './SecretStep';
 export enum Steps {
   CREATE_SECRET = 1,
   YAML = 2,
-  ALL_SET = 3
+  ALL_SET = 3,
 }
 
 export interface GitHubActionTutorialProps {
@@ -56,7 +56,7 @@ export default function GitHubActionTutorial(props: GitHubActionTutorialProps) {
     component,
     projectBinding,
     mainBranchName,
-    willRefreshAutomatically
+    willRefreshAutomatically,
   } = props;
 
   const [step, setStep] = React.useState<Steps>(Steps.CREATE_SECRET);
@@ -85,7 +85,7 @@ export default function GitHubActionTutorial(props: GitHubActionTutorialProps) {
         open={step === Steps.YAML}
         renderForm={() => (
           <YamlFileStep>
-            {buildTool => (
+            {(buildTool) => (
               <AnalysisCommand
                 buildTool={buildTool}
                 mainBranchName={mainBranchName}
diff --git a/server/sonar-web/src/main/js/components/tutorials/github-action/SecretStep.tsx b/server/sonar-web/src/main/js/components/tutorials/github-action/SecretStep.tsx
index 9eb8006ddf4..6738598df29 100644
--- a/server/sonar-web/src/main/js/components/tutorials/github-action/SecretStep.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/github-action/SecretStep.tsx
@@ -53,14 +53,15 @@ export default function SecretStep(props: SecretStepProps) {
                 <a
                   href={`${buildGithubLink(almBinding, projectBinding)}/settings/secrets`}
                   target="_blank"
-                  rel="noopener noreferrer">
+                  rel="noopener noreferrer"
+                >
                   {translate('onboarding.tutorial.with.github_action.secret.intro.link')}
                 </a>
               ) : (
                 <strong>
                   {translate('onboarding.tutorial.with.github_action.secret.intro.link')}
                 </strong>
-              )
+              ),
           }}
         />
       </p>
@@ -113,7 +114,7 @@ export default function SecretStep(props: SecretStepProps) {
             values={{
               extra: <ClipboardIconButton copyValue={baseUrl} />,
               field: <strong>{translate('onboarding.tutorial.env_variables.field')}</strong>,
-              value: <code className="rule">{baseUrl}</code>
+              value: <code className="rule">{baseUrl}</code>,
             }}
           />
         </li>
diff --git a/server/sonar-web/src/main/js/components/tutorials/github-action/__tests__/AnalysisCommand-test.tsx b/server/sonar-web/src/main/js/components/tutorials/github-action/__tests__/AnalysisCommand-test.tsx
index 47f444fdd9c..1b7211668d9 100644
--- a/server/sonar-web/src/main/js/components/tutorials/github-action/__tests__/AnalysisCommand-test.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/github-action/__tests__/AnalysisCommand-test.tsx
@@ -29,8 +29,8 @@ it.each([
   BuildTools.DotNet,
   BuildTools.Gradle,
   BuildTools.Maven,
-  BuildTools.Other
-])('should render correctly for %p', buildTool => {
+  BuildTools.Other,
+])('should render correctly for %p', (buildTool) => {
   expect(shallowRender({ buildTool })).toMatchSnapshot();
 });
 
diff --git a/server/sonar-web/src/main/js/components/tutorials/github-action/__tests__/GitHubActionTutorial-test.tsx b/server/sonar-web/src/main/js/components/tutorials/github-action/__tests__/GitHubActionTutorial-test.tsx
index e0bde53be19..d7899aee294 100644
--- a/server/sonar-web/src/main/js/components/tutorials/github-action/__tests__/GitHubActionTutorial-test.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/github-action/__tests__/GitHubActionTutorial-test.tsx
@@ -21,7 +21,7 @@ import { shallow } from 'enzyme';
 import * as React from 'react';
 import {
   mockAlmSettingsInstance,
-  mockProjectGithubBindingResponse
+  mockProjectGithubBindingResponse,
 } from '../../../../helpers/mocks/alm-settings';
 import { mockComponent } from '../../../../helpers/mocks/component';
 import { mockLoggedInUser } from '../../../../helpers/testMocks';
@@ -39,35 +39,12 @@ it('should render correctly', () => {
 it('should correctly navigate through the steps', () => {
   const wrapper = shallowRender();
 
-  expect(
-    wrapper
-      .find(Step)
-      .at(0)
-      .props().open
-  ).toBe(true);
-  expect(
-    wrapper
-      .find(Step)
-      .at(1)
-      .props().open
-  ).toBe(false);
+  expect(wrapper.find(Step).at(0).props().open).toBe(true);
+  expect(wrapper.find(Step).at(1).props().open).toBe(false);
 
-  wrapper
-    .find(Step)
-    .at(1)
-    .simulate('open');
-  expect(
-    wrapper
-      .find(Step)
-      .at(0)
-      .props().open
-  ).toBe(false);
-  expect(
-    wrapper
-      .find(Step)
-      .at(1)
-      .props().open
-  ).toBe(true);
+  wrapper.find(Step).at(1).simulate('open');
+  expect(wrapper.find(Step).at(0).props().open).toBe(false);
+  expect(wrapper.find(Step).at(1).props().open).toBe(true);
 });
 
 function shallowRender(props: Partial<GitHubActionTutorialProps> = {}) {
diff --git a/server/sonar-web/src/main/js/components/tutorials/github-action/__tests__/SecretStep-test.tsx b/server/sonar-web/src/main/js/components/tutorials/github-action/__tests__/SecretStep-test.tsx
index cf12a5208c3..63e8f270085 100644
--- a/server/sonar-web/src/main/js/components/tutorials/github-action/__tests__/SecretStep-test.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/github-action/__tests__/SecretStep-test.tsx
@@ -21,7 +21,7 @@ import { shallow } from 'enzyme';
 import * as React from 'react';
 import {
   mockAlmSettingsInstance,
-  mockProjectGithubBindingResponse
+  mockProjectGithubBindingResponse,
 } from '../../../../helpers/mocks/alm-settings';
 import { mockComponent } from '../../../../helpers/mocks/component';
 import { mockLoggedInUser } from '../../../../helpers/testMocks';
@@ -32,7 +32,7 @@ it('should render correctly', () => {
   expect(
     shallowRender({
       almBinding: mockAlmSettingsInstance({ url: 'http://github.enterprise.com/api/v3' }),
-      projectBinding: mockProjectGithubBindingResponse()
+      projectBinding: mockProjectGithubBindingResponse(),
     })
   ).toMatchSnapshot('with binding information');
 });
diff --git a/server/sonar-web/src/main/js/components/tutorials/github-action/commands/CFamily.tsx b/server/sonar-web/src/main/js/components/tutorials/github-action/commands/CFamily.tsx
index bccaf877ee4..22c20e0f8b0 100644
--- a/server/sonar-web/src/main/js/components/tutorials/github-action/commands/CFamily.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/github-action/commands/CFamily.tsx
@@ -113,7 +113,7 @@ const STEPS = {
           sonar-scanner.bat "-Dsonar.cfamily.build-wrapper-output=bw-output"
         env:
           SONAR_TOKEN: \${{ secrets.SONAR_TOKEN }}
-          SONAR_HOST_URL: \${{ secrets.SONAR_HOST_URL }}`
+          SONAR_HOST_URL: \${{ secrets.SONAR_HOST_URL }}`,
 };
 
 export default function CFamily(props: CFamilyProps) {
diff --git a/server/sonar-web/src/main/js/components/tutorials/github-action/commands/Gradle.tsx b/server/sonar-web/src/main/js/components/tutorials/github-action/commands/Gradle.tsx
index e2b8d44eb67..8c690c04d7a 100644
--- a/server/sonar-web/src/main/js/components/tutorials/github-action/commands/Gradle.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/github-action/commands/Gradle.tsx
@@ -76,7 +76,7 @@ export default function Gradle(props: GradleProps) {
                 <ClipboardIconButton copyValue="build.gradle" />
               </>
             ),
-            sq: <code className="rule">org.sonarqube</code>
+            sq: <code className="rule">org.sonarqube</code>,
           }}
         />
         <CodeSnippet snippet={buildGradleSnippet(component.key)} />
diff --git a/server/sonar-web/src/main/js/components/tutorials/github-action/commands/__tests__/CFamily-test.tsx b/server/sonar-web/src/main/js/components/tutorials/github-action/commands/__tests__/CFamily-test.tsx
index dc4ea5ec120..58fb049bc63 100644
--- a/server/sonar-web/src/main/js/components/tutorials/github-action/commands/__tests__/CFamily-test.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/github-action/commands/__tests__/CFamily-test.tsx
@@ -31,13 +31,10 @@ it('should render correctly', () => {
 it.each([
   [OSs.Linux, false],
   [OSs.MacOS, true],
-  [OSs.Windows, true]
+  [OSs.Windows, true],
 ])('should render correctly for %s', (os: OSs, branchesEnabled: boolean) => {
   const wrapper = shallowRender({ branchesEnabled });
-  wrapper
-    .find(RenderOptions)
-    .props()
-    .onCheck(os);
+  wrapper.find(RenderOptions).props().onCheck(os);
   expect(wrapper).toMatchSnapshot(`branches ${branchesEnabled ? 'enabled' : 'disabled'}`);
 });
 
diff --git a/server/sonar-web/src/main/js/components/tutorials/gitlabci/EnvironmentVariablesStep.tsx b/server/sonar-web/src/main/js/components/tutorials/gitlabci/EnvironmentVariablesStep.tsx
index 03506a29536..3580a9bb314 100644
--- a/server/sonar-web/src/main/js/components/tutorials/gitlabci/EnvironmentVariablesStep.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/gitlabci/EnvironmentVariablesStep.tsx
@@ -59,7 +59,7 @@ export default function EnvironmentVariablesStep(props: EnvironmentVariablesStep
         id="onboarding.tutorial.with.gitlab_ci.env_variables.section.description"
         values={{
           /* This link will be added when the backend provides the project URL */
-          link: <strong>{pipelineDescriptionLinkLabel}</strong>
+          link: <strong>{pipelineDescriptionLinkLabel}</strong>,
         }}
       />
 
@@ -75,7 +75,7 @@ export default function EnvironmentVariablesStep(props: EnvironmentVariablesStep
                   {translate('onboarding.tutorial.with.gitlab_ci.env_variables.step1')}
                 </strong>
               ),
-              value: <code className="rule">SONAR_TOKEN</code>
+              value: <code className="rule">SONAR_TOKEN</code>,
             }}
           />
         </li>
@@ -101,7 +101,7 @@ export default function EnvironmentVariablesStep(props: EnvironmentVariablesStep
         id="onboarding.tutorial.with.gitlab_ci.env_variables.section2.description"
         values={{
           /* This link will be added when the backend provides the project URL */
-          link: <strong>{pipelineDescriptionLinkLabel}</strong>
+          link: <strong>{pipelineDescriptionLinkLabel}</strong>,
         }}
       />
 
@@ -117,7 +117,7 @@ export default function EnvironmentVariablesStep(props: EnvironmentVariablesStep
                   {translate('onboarding.tutorial.with.gitlab_ci.env_variables.step1')}
                 </strong>
               ),
-              value: <code className="rule">SONAR_HOST_URL</code>
+              value: <code className="rule">SONAR_HOST_URL</code>,
             }}
           />
         </li>
@@ -128,7 +128,7 @@ export default function EnvironmentVariablesStep(props: EnvironmentVariablesStep
             values={{
               extra: <ClipboardIconButton copyValue={baseUrl} />,
               field: <strong>{translate('onboarding.tutorial.env_variables.field')}</strong>,
-              value: <code className="rule">{baseUrl}</code>
+              value: <code className="rule">{baseUrl}</code>,
             }}
           />
         </li>
diff --git a/server/sonar-web/src/main/js/components/tutorials/gitlabci/GitLabCITutorial.tsx b/server/sonar-web/src/main/js/components/tutorials/gitlabci/GitLabCITutorial.tsx
index 2c114176b9a..bb5d8f96817 100644
--- a/server/sonar-web/src/main/js/components/tutorials/gitlabci/GitLabCITutorial.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/gitlabci/GitLabCITutorial.tsx
@@ -32,7 +32,7 @@ export enum Steps {
   PROJECT_KEY,
   ENV_VARIABLES,
   YML,
-  ALL_SET
+  ALL_SET,
 }
 
 export interface GitLabCITutorialProps {
diff --git a/server/sonar-web/src/main/js/components/tutorials/gitlabci/ProjectKeyStep.tsx b/server/sonar-web/src/main/js/components/tutorials/gitlabci/ProjectKeyStep.tsx
index 3c3c4970eba..ad6bbbab042 100644
--- a/server/sonar-web/src/main/js/components/tutorials/gitlabci/ProjectKeyStep.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/gitlabci/ProjectKeyStep.tsx
@@ -64,14 +64,14 @@ const snippetForBuildTool = {
   [BuildTools.Maven]: mavenSnippet,
   [BuildTools.Gradle]: gradleSnippet,
   [BuildTools.CFamily]: otherSnippet,
-  [BuildTools.Other]: otherSnippet
+  [BuildTools.Other]: otherSnippet,
 };
 
 const filenameForBuildTool = {
   [BuildTools.Maven]: 'pom.xml',
   [BuildTools.Gradle]: 'build.gradle',
   [BuildTools.CFamily]: 'sonar-project.properties',
-  [BuildTools.Other]: 'sonar-project.properties'
+  [BuildTools.Other]: 'sonar-project.properties',
 };
 
 export function ProjectKeyStep(props: ProjectKeyStepProps) {
@@ -119,7 +119,7 @@ export function ProjectKeyStep(props: ProjectKeyStepProps) {
                       copyValue={filenameForBuildTool[buildTool]}
                     />
                   </>
-                )
+                ),
               }}
             />
             <CodeSnippet snippet={snippetForBuildTool[buildTool](component.key)} />
diff --git a/server/sonar-web/src/main/js/components/tutorials/gitlabci/YmlFileStep.tsx b/server/sonar-web/src/main/js/components/tutorials/gitlabci/YmlFileStep.tsx
index 9d38b844385..f93d0e60e13 100644
--- a/server/sonar-web/src/main/js/components/tutorials/gitlabci/YmlFileStep.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/gitlabci/YmlFileStep.tsx
@@ -20,7 +20,7 @@
 import * as React from 'react';
 import { FormattedMessage } from 'react-intl';
 import withAvailableFeatures, {
-  WithAvailableFeaturesProps
+  WithAvailableFeaturesProps,
 } from '../../../app/components/available-features/withAvailableFeatures';
 import { ClipboardIconButton } from '../../../components/controls/clipboard';
 import { translate } from '../../../helpers/l10n';
@@ -72,7 +72,7 @@ export function YmlFileStep(props: YmlFileStepProps) {
                           copyValue={translate('onboarding.tutorial.with.gitlab_ci.yml.filename')}
                         />
                       </>
-                    )
+                    ),
                   }}
                 />
               </div>
diff --git a/server/sonar-web/src/main/js/components/tutorials/gitlabci/__tests__/EnvironmentVariablesStep-test.tsx b/server/sonar-web/src/main/js/components/tutorials/gitlabci/__tests__/EnvironmentVariablesStep-test.tsx
index 4b75babb01c..66e6087aae0 100644
--- a/server/sonar-web/src/main/js/components/tutorials/gitlabci/__tests__/EnvironmentVariablesStep-test.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/gitlabci/__tests__/EnvironmentVariablesStep-test.tsx
@@ -23,7 +23,7 @@ import { mockComponent } from '../../../../helpers/mocks/component';
 import { mockLoggedInUser } from '../../../../helpers/testMocks';
 import { renderStepContent } from '../../test-utils';
 import EnvironmentVariablesStep, {
-  EnvironmentVariablesStepProps
+  EnvironmentVariablesStepProps,
 } from '../EnvironmentVariablesStep';
 
 it('should render correctly', () => {
diff --git a/server/sonar-web/src/main/js/components/tutorials/gitlabci/__tests__/ProjectKeyStep-test.tsx b/server/sonar-web/src/main/js/components/tutorials/gitlabci/__tests__/ProjectKeyStep-test.tsx
index c52d8491ace..f7a3134376a 100644
--- a/server/sonar-web/src/main/js/components/tutorials/gitlabci/__tests__/ProjectKeyStep-test.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/gitlabci/__tests__/ProjectKeyStep-test.tsx
@@ -41,8 +41,8 @@ it.each([
   [BuildTools.Gradle],
   [BuildTools.DotNet],
   [BuildTools.CFamily],
-  [BuildTools.Other]
-])('should render correctly for build tool %s', buildTool => {
+  [BuildTools.Other],
+])('should render correctly for build tool %s', (buildTool) => {
   expect(renderStepContent(shallowRender({ buildTool }))).toMatchSnapshot();
 });
 
@@ -56,10 +56,7 @@ it('should correctly callback with selected build tool', () => {
 
 function selectBuildTool(wrapper: ShallowWrapper<ProjectKeyStepProps>, tool: BuildTools) {
   const content = new ShallowWrapper(renderStepContent(wrapper) as JSX.Element);
-  content
-    .find(RenderOptions)
-    .props()
-    .onCheck(tool);
+  content.find(RenderOptions).props().onCheck(tool);
 }
 
 function shallowRender(props: Partial<ProjectKeyStepProps> = {}) {
diff --git a/server/sonar-web/src/main/js/components/tutorials/gitlabci/__tests__/YmlFileStep-test.tsx b/server/sonar-web/src/main/js/components/tutorials/gitlabci/__tests__/YmlFileStep-test.tsx
index ac93bffa6cf..35e3715f9a3 100644
--- a/server/sonar-web/src/main/js/components/tutorials/gitlabci/__tests__/YmlFileStep-test.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/gitlabci/__tests__/YmlFileStep-test.tsx
@@ -34,8 +34,8 @@ it.each([
   [BuildTools.Gradle],
   [BuildTools.DotNet],
   [BuildTools.CFamily],
-  [BuildTools.Other]
-])('should render correctly for build tool %s', buildTool => {
+  [BuildTools.Other],
+])('should render correctly for build tool %s', (buildTool) => {
   expect(renderStepContent(shallowRender({ buildTool }))).toMatchSnapshot('with branch support');
   expect(renderStepContent(shallowRender({ hasFeature: () => false, buildTool }))).toMatchSnapshot(
     'without branch support'
diff --git a/server/sonar-web/src/main/js/components/tutorials/gitlabci/commands/PipeCommand.tsx b/server/sonar-web/src/main/js/components/tutorials/gitlabci/commands/PipeCommand.tsx
index 4202cb2cd51..f8a3fabf444 100644
--- a/server/sonar-web/src/main/js/components/tutorials/gitlabci/commands/PipeCommand.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/gitlabci/commands/PipeCommand.tsx
@@ -34,7 +34,7 @@ const BUILD_TOOL_SPECIFIC = {
   [BuildTools.Maven]: {
     image: 'maven:3.6.3-jdk-11',
     script: (projectKey: string) => `
-    - mvn verify sonar:sonar -Dsonar.projectKey=${projectKey}`
+    - mvn verify sonar:sonar -Dsonar.projectKey=${projectKey}`,
   },
   [BuildTools.DotNet]: {
     image: 'mcr.microsoft.com/dotnet/core/sdk:latest',
@@ -45,15 +45,15 @@ const BUILD_TOOL_SPECIFIC = {
       - "export PATH=\\"$PATH:$HOME/.dotnet/tools\\""
       - "dotnet sonarscanner begin /k:\\"${projectKey}\\" /d:sonar.login=\\"$SONAR_TOKEN\\" /d:\\"sonar.host.url=$SONAR_HOST_URL\\" "
       - "dotnet build"
-      - "dotnet sonarscanner end /d:sonar.login=\\"$SONAR_TOKEN\\""`
+      - "dotnet sonarscanner end /d:sonar.login=\\"$SONAR_TOKEN\\""`,
   },
   [BuildTools.Other]: {
     image: `
     name: sonarsource/sonar-scanner-cli:latest
     entrypoint: [""]`,
     script: () => `
-    - sonar-scanner`
-  }
+    - sonar-scanner`,
+  },
 };
 
 export default function PipeCommand(props: PipeCommandProps) {
diff --git a/server/sonar-web/src/main/js/components/tutorials/gitlabci/commands/__tests__/PipeCommand-test.tsx b/server/sonar-web/src/main/js/components/tutorials/gitlabci/commands/__tests__/PipeCommand-test.tsx
index 0304f125f47..f6fbb27c701 100644
--- a/server/sonar-web/src/main/js/components/tutorials/gitlabci/commands/__tests__/PipeCommand-test.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/gitlabci/commands/__tests__/PipeCommand-test.tsx
@@ -27,8 +27,8 @@ it.each([
   [BuildTools.Gradle],
   [BuildTools.DotNet],
   [BuildTools.CFamily],
-  [BuildTools.Other]
-])('should render correctly for %s', buildTool => {
+  [BuildTools.Other],
+])('should render correctly for %s', (buildTool) => {
   expect(
     shallow(
       <PipeCommand
diff --git a/server/sonar-web/src/main/js/components/tutorials/jenkins/JenkinsTutorial.tsx b/server/sonar-web/src/main/js/components/tutorials/jenkins/JenkinsTutorial.tsx
index 7260a88b189..4430ed5bb24 100644
--- a/server/sonar-web/src/main/js/components/tutorials/jenkins/JenkinsTutorial.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/jenkins/JenkinsTutorial.tsx
@@ -19,13 +19,13 @@
  */
 import * as React from 'react';
 import withAvailableFeatures, {
-  WithAvailableFeaturesProps
+  WithAvailableFeaturesProps,
 } from '../../../app/components/available-features/withAvailableFeatures';
 import { translate } from '../../../helpers/l10n';
 import {
   AlmKeys,
   AlmSettingsInstance,
-  ProjectAlmBindingResponse
+  ProjectAlmBindingResponse,
 } from '../../../types/alm-settings';
 import { Feature } from '../../../types/features';
 import { Component } from '../../../types/types';
@@ -51,7 +51,7 @@ enum Steps {
   MultiBranchPipeline = 2,
   Webhook = 3,
   Jenkinsfile = 4,
-  AllSet = 5
+  AllSet = 5,
 }
 
 export function JenkinsTutorial(props: JenkinsTutorialProps) {
@@ -71,7 +71,7 @@ export function JenkinsTutorial(props: JenkinsTutorialProps) {
         <SelectAlmStep
           alm={alm}
           open={step === Steps.SelectAlm}
-          onCheck={value => {
+          onCheck={(value) => {
             setAlm(value);
             setStep(Steps.PreRequisites);
           }}
diff --git a/server/sonar-web/src/main/js/components/tutorials/jenkins/JenkinsfileStep.tsx b/server/sonar-web/src/main/js/components/tutorials/jenkins/JenkinsfileStep.tsx
index 318c935d0d1..8cc20945767 100644
--- a/server/sonar-web/src/main/js/components/tutorials/jenkins/JenkinsfileStep.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/jenkins/JenkinsfileStep.tsx
@@ -54,7 +54,7 @@ const BUILDTOOL_COMPONENT_MAP: {
   [BuildTools.Gradle]: Gradle,
   [BuildTools.DotNet]: DotNet,
   [BuildTools.CFamily]: CFamilly,
-  [BuildTools.Other]: Other
+  [BuildTools.Other]: Other,
 };
 
 export function JenkinsfileStep(props: JenkinsfileStepProps) {
@@ -77,7 +77,7 @@ export function JenkinsfileStep(props: JenkinsfileStepProps) {
               <RenderOptions
                 label={translate('onboarding.build')}
                 checked={buildTool}
-                onCheck={value => setBuildTool(value as BuildTools)}
+                onCheck={(value) => setBuildTool(value as BuildTools)}
                 optionLabelKey="onboarding.build"
                 options={buildToolOrder}
               />
@@ -91,7 +91,7 @@ export function JenkinsfileStep(props: JenkinsfileStepProps) {
               React.createElement(BUILDTOOL_COMPONENT_MAP[buildTool], {
                 component,
                 baseUrl,
-                onDone: props.onDone
+                onDone: props.onDone,
               })}
           </ol>
         </div>
diff --git a/server/sonar-web/src/main/js/components/tutorials/jenkins/MultiBranchPipelineStep.tsx b/server/sonar-web/src/main/js/components/tutorials/jenkins/MultiBranchPipelineStep.tsx
index 5c63212e32a..76d02ea69af 100644
--- a/server/sonar-web/src/main/js/components/tutorials/jenkins/MultiBranchPipelineStep.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/jenkins/MultiBranchPipelineStep.tsx
@@ -25,7 +25,7 @@ import { translate } from '../../../helpers/l10n';
 import {
   AlmKeys,
   AlmSettingsInstance,
-  ProjectAlmBindingResponse
+  ProjectAlmBindingResponse,
 } from '../../../types/alm-settings';
 import CodeSnippet from '../../common/CodeSnippet';
 import LabelActionPair from '../components/LabelActionPair';
diff --git a/server/sonar-web/src/main/js/components/tutorials/jenkins/PreRequisitesStep.tsx b/server/sonar-web/src/main/js/components/tutorials/jenkins/PreRequisitesStep.tsx
index 4705527a94f..4b10f0a2bb3 100644
--- a/server/sonar-web/src/main/js/components/tutorials/jenkins/PreRequisitesStep.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/jenkins/PreRequisitesStep.tsx
@@ -75,7 +75,7 @@ export default function PreRequisitesStep(props: PreRequisitesStepProps) {
                   <DocLink to="/analysis/jenkins/">
                     {translate('onboarding.tutorial.with.jenkins.prereqs.step_by_step_guide.link')}
                   </DocLink>
-                )
+                ),
               }}
             />
           </p>
diff --git a/server/sonar-web/src/main/js/components/tutorials/jenkins/SelectAlmStep.tsx b/server/sonar-web/src/main/js/components/tutorials/jenkins/SelectAlmStep.tsx
index c7812fba08e..84dde9a38e3 100644
--- a/server/sonar-web/src/main/js/components/tutorials/jenkins/SelectAlmStep.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/jenkins/SelectAlmStep.tsx
@@ -51,10 +51,10 @@ export default function SelectAlmStep(props: SelectAlmStepProps) {
               AlmKeys.BitbucketCloud,
               AlmKeys.BitbucketServer,
               AlmKeys.GitHub,
-              AlmKeys.GitLab
-            ].map(almKey => ({
+              AlmKeys.GitLab,
+            ].map((almKey) => ({
               label: getAlmLongName(almKey),
-              value: almKey
+              value: almKey,
             }))}
             value={alm}
           />
diff --git a/server/sonar-web/src/main/js/components/tutorials/jenkins/WebhookStep.tsx b/server/sonar-web/src/main/js/components/tutorials/jenkins/WebhookStep.tsx
index 74da63a0228..e140c8fc1dc 100644
--- a/server/sonar-web/src/main/js/components/tutorials/jenkins/WebhookStep.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/jenkins/WebhookStep.tsx
@@ -29,7 +29,7 @@ import { translate } from '../../../helpers/l10n';
 import {
   AlmKeys,
   AlmSettingsInstance,
-  ProjectAlmBindingResponse
+  ProjectAlmBindingResponse,
 } from '../../../types/alm-settings';
 import Step from '../components/Step';
 import WebhookStepBitbucket from './WebhookStepBitbucket';
@@ -98,7 +98,7 @@ export default function WebhookStep(props: WebhookStepProps) {
                   <ButtonLink onClick={props.onDone}>
                     {translate('onboarding.tutorial.with.jenkins.webhook.intro.link')}
                   </ButtonLink>
-                )
+                ),
               }}
             />
           </p>
diff --git a/server/sonar-web/src/main/js/components/tutorials/jenkins/WebhookStepBitbucket.tsx b/server/sonar-web/src/main/js/components/tutorials/jenkins/WebhookStepBitbucket.tsx
index 16c635a7421..4be89ad3902 100644
--- a/server/sonar-web/src/main/js/components/tutorials/jenkins/WebhookStepBitbucket.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/jenkins/WebhookStepBitbucket.tsx
@@ -25,7 +25,7 @@ import { stripTrailingSlash } from '../../../helpers/urls';
 import {
   AlmKeys,
   AlmSettingsInstance,
-  ProjectAlmBindingResponse
+  ProjectAlmBindingResponse,
 } from '../../../types/alm-settings';
 import CodeSnippet from '../../common/CodeSnippet';
 import Link from '../../common/Link';
@@ -87,7 +87,7 @@ export default function WebhookStepBitbucket(props: WebhookStepBitbucketProps) {
               <strong>
                 {translate('onboarding.tutorial.with.jenkins.webhook', alm, 'step1.link')}
               </strong>
-            )
+            ),
           }}
         />
         <ul className="list-styled">
diff --git a/server/sonar-web/src/main/js/components/tutorials/jenkins/WebhookStepGitLab.tsx b/server/sonar-web/src/main/js/components/tutorials/jenkins/WebhookStepGitLab.tsx
index bc9337d2717..1b09346919f 100644
--- a/server/sonar-web/src/main/js/components/tutorials/jenkins/WebhookStepGitLab.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/jenkins/WebhookStepGitLab.tsx
@@ -36,7 +36,7 @@ export default function WebhookStepGitLab({ branchesEnabled }: WebhookStepGitLab
           defaultMessage={translate('onboarding.tutorial.with.jenkins.webhook.step1.sentence')}
           id="onboarding.tutorial.with.jenkins.webhook.step1.sentence"
           values={{
-            link: translate('onboarding.tutorial.with.jenkins.webhook.gitlab.step1.link')
+            link: translate('onboarding.tutorial.with.jenkins.webhook.gitlab.step1.link'),
           }}
         />
         <ul className="list-styled">
diff --git a/server/sonar-web/src/main/js/components/tutorials/jenkins/WebhookStepGithub.tsx b/server/sonar-web/src/main/js/components/tutorials/jenkins/WebhookStepGithub.tsx
index 685f8a13b05..73dfa197793 100644
--- a/server/sonar-web/src/main/js/components/tutorials/jenkins/WebhookStepGithub.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/jenkins/WebhookStepGithub.tsx
@@ -58,7 +58,7 @@ export default function WebhookStepGithub(props: WebhookStepGithubProps) {
               <strong>
                 {translate('onboarding.tutorial.with.jenkins.webhook.github.step1.link')}
               </strong>
-            )
+            ),
           }}
         />
         <ul className="list-styled">
diff --git a/server/sonar-web/src/main/js/components/tutorials/jenkins/__tests__/JenkinsTutorial-test.tsx b/server/sonar-web/src/main/js/components/tutorials/jenkins/__tests__/JenkinsTutorial-test.tsx
index 7075595e28f..a9bc3c36630 100644
--- a/server/sonar-web/src/main/js/components/tutorials/jenkins/__tests__/JenkinsTutorial-test.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/jenkins/__tests__/JenkinsTutorial-test.tsx
@@ -44,64 +44,43 @@ it('should correctly navigate between steps', () => {
   expect(wrapper.find(JenkinsfileStep).props().open).toBe(false);
 
   // Pre-reqs done.
-  wrapper
-    .find(PreRequisitesStep)
-    .props()
-    .onDone();
+  wrapper.find(PreRequisitesStep).props().onDone();
   expect(wrapper.find(PreRequisitesStep).props().open).toBe(false);
   expect(wrapper.find(MultiBranchPipelineStep).props().open).toBe(true);
   expect(wrapper.find(WebhookStep).props().open).toBe(false);
   expect(wrapper.find(JenkinsfileStep).props().open).toBe(false);
 
   // Multibranch done.
-  wrapper
-    .find(MultiBranchPipelineStep)
-    .props()
-    .onDone();
+  wrapper.find(MultiBranchPipelineStep).props().onDone();
   expect(wrapper.find(PreRequisitesStep).props().open).toBe(false);
   expect(wrapper.find(MultiBranchPipelineStep).props().open).toBe(false);
   expect(wrapper.find(WebhookStep).props().open).toBe(true);
   expect(wrapper.find(JenkinsfileStep).props().open).toBe(false);
 
   // Webhook done.
-  wrapper
-    .find(WebhookStep)
-    .props()
-    .onDone();
+  wrapper.find(WebhookStep).props().onDone();
   expect(wrapper.find(PreRequisitesStep).props().open).toBe(false);
   expect(wrapper.find(MultiBranchPipelineStep).props().open).toBe(false);
   expect(wrapper.find(WebhookStep).props().open).toBe(false);
   expect(wrapper.find(JenkinsfileStep).props().open).toBe(true);
 
   // Open Pre-reqs.
-  wrapper
-    .find(PreRequisitesStep)
-    .props()
-    .onOpen();
+  wrapper.find(PreRequisitesStep).props().onOpen();
   expect(wrapper.find(PreRequisitesStep).props().open).toBe(true);
 
   // Open Multibranch.
-  wrapper
-    .find(MultiBranchPipelineStep)
-    .props()
-    .onOpen();
+  wrapper.find(MultiBranchPipelineStep).props().onOpen();
   expect(wrapper.find(MultiBranchPipelineStep).props().open).toBe(true);
 
   // Open Webhook.
-  wrapper
-    .find(WebhookStep)
-    .props()
-    .onOpen();
+  wrapper.find(WebhookStep).props().onOpen();
   expect(wrapper.find(WebhookStep).props().open).toBe(true);
 });
 
 it('should correctly select an ALM if no project is bound', () => {
   const wrapper = shallowRender({ projectBinding: undefined });
   expect(wrapper.find(PreRequisitesStep).exists()).toBe(false);
-  wrapper
-    .find(SelectAlmStep)
-    .props()
-    .onCheck(AlmKeys.BitbucketCloud);
+  wrapper.find(SelectAlmStep).props().onCheck(AlmKeys.BitbucketCloud);
   expect(wrapper.find(SelectAlmStep).props().open).toBe(false);
   expect(wrapper.find(PreRequisitesStep).exists()).toBe(true);
 });
diff --git a/server/sonar-web/src/main/js/components/tutorials/jenkins/__tests__/JenkinsfileStep-test.tsx b/server/sonar-web/src/main/js/components/tutorials/jenkins/__tests__/JenkinsfileStep-test.tsx
index f72564db4a4..a692e6146b5 100644
--- a/server/sonar-web/src/main/js/components/tutorials/jenkins/__tests__/JenkinsfileStep-test.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/jenkins/__tests__/JenkinsfileStep-test.tsx
@@ -37,12 +37,7 @@ it('should render correctly', () => {
 it('should render correctly for Maven', () => {
   const wrapper = shallowRender();
   selectBuildTool(wrapper, BuildTools.Maven);
-  expect(
-    wrapper
-      .find(Step)
-      .props()
-      .renderForm()
-  ).toMatchSnapshot();
+  expect(wrapper.find(Step).props().renderForm()).toMatchSnapshot();
 });
 
 it('should render correctly for Gradle', () => {
diff --git a/server/sonar-web/src/main/js/components/tutorials/jenkins/__tests__/MultiBranchPipelineStep-test.tsx b/server/sonar-web/src/main/js/components/tutorials/jenkins/__tests__/MultiBranchPipelineStep-test.tsx
index ac1cdde7221..d771788aa55 100644
--- a/server/sonar-web/src/main/js/components/tutorials/jenkins/__tests__/MultiBranchPipelineStep-test.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/jenkins/__tests__/MultiBranchPipelineStep-test.tsx
@@ -24,7 +24,7 @@ import {
   mockProjectBitbucketBindingResponse,
   mockProjectBitbucketCloudBindingResponse,
   mockProjectGithubBindingResponse,
-  mockProjectGitLabBindingResponse
+  mockProjectGitLabBindingResponse,
 } from '../../../../helpers/mocks/alm-settings';
 import { AlmKeys } from '../../../../types/alm-settings';
 import { renderStepContent } from '../../test-utils';
@@ -42,7 +42,7 @@ it('should render correctly', () => {
       shallowRender({
         alm: AlmKeys.BitbucketCloud,
         almBinding: mockAlmSettingsInstance({ url: 'https://bitbucket.org/workspaceId/' }),
-        projectBinding: mockProjectBitbucketCloudBindingResponse()
+        projectBinding: mockProjectBitbucketCloudBindingResponse(),
       })
     )
   ).toMatchSnapshot('content for bitbucket cloud');
@@ -50,7 +50,7 @@ it('should render correctly', () => {
     renderStepContent(
       shallowRender({
         alm: AlmKeys.BitbucketCloud,
-        projectBinding: undefined
+        projectBinding: undefined,
       })
     )
   ).toMatchSnapshot('content for bitbucket cloud, no binding');
@@ -59,14 +59,14 @@ it('should render correctly', () => {
       shallowRender({
         alm: AlmKeys.GitHub,
         almBinding: mockAlmSettingsInstance({ url: 'https://api.github.com/' }),
-        projectBinding: mockProjectGithubBindingResponse()
+        projectBinding: mockProjectGithubBindingResponse(),
       })
     )
   ).toMatchSnapshot('content for github');
   expect(
     renderStepContent(
       shallowRender({
-        alm: AlmKeys.GitHub
+        alm: AlmKeys.GitHub,
       })
     )
   ).toMatchSnapshot('content for github, no binding');
diff --git a/server/sonar-web/src/main/js/components/tutorials/jenkins/__tests__/SelectAlmStep-test.tsx b/server/sonar-web/src/main/js/components/tutorials/jenkins/__tests__/SelectAlmStep-test.tsx
index cb1fc3fcd67..083945e6742 100644
--- a/server/sonar-web/src/main/js/components/tutorials/jenkins/__tests__/SelectAlmStep-test.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/jenkins/__tests__/SelectAlmStep-test.tsx
@@ -25,32 +25,18 @@ import SelectAlmStep, { SelectAlmStepProps } from '../SelectAlmStep';
 
 jest.mock('../../../../helpers/l10n', () => ({
   hasMessage: (_a: string, k: string, _b: string) => k === AlmKeys.BitbucketCloud,
-  translate: (...k: string[]) => k.join('.')
+  translate: (...k: string[]) => k.join('.'),
 }));
 
 it('should render correctly', () => {
   expect(shallowRender()).toMatchSnapshot('default');
+  expect(shallowRender().find(Step).props().renderForm()).toMatchSnapshot('form, default');
+  expect(shallowRender({ alm: AlmKeys.Azure }).find(Step).props().renderForm()).toMatchSnapshot(
+    'form, with alm'
+  );
+  expect(shallowRender().find(Step).props().renderResult!()).toBeUndefined();
   expect(
-    shallowRender()
-      .find(Step)
-      .props()
-      .renderForm()
-  ).toMatchSnapshot('form, default');
-  expect(
-    shallowRender({ alm: AlmKeys.Azure })
-      .find(Step)
-      .props()
-      .renderForm()
-  ).toMatchSnapshot('form, with alm');
-  expect(
-    shallowRender()
-      .find(Step)
-      .props().renderResult!()
-  ).toBeUndefined();
-  expect(
-    shallowRender({ alm: AlmKeys.BitbucketCloud })
-      .find(Step)
-      .props().renderResult!()
+    shallowRender({ alm: AlmKeys.BitbucketCloud }).find(Step).props().renderResult!()
   ).toMatchSnapshot('result, with alm');
 });
 
diff --git a/server/sonar-web/src/main/js/components/tutorials/jenkins/__tests__/WebhookStep-test.tsx b/server/sonar-web/src/main/js/components/tutorials/jenkins/__tests__/WebhookStep-test.tsx
index 100bba0acb5..c81f8d3b545 100644
--- a/server/sonar-web/src/main/js/components/tutorials/jenkins/__tests__/WebhookStep-test.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/jenkins/__tests__/WebhookStep-test.tsx
@@ -24,7 +24,7 @@ import {
   mockProjectAlmBindingResponse,
   mockProjectBitbucketBindingResponse,
   mockProjectBitbucketCloudBindingResponse,
-  mockProjectGithubBindingResponse
+  mockProjectGithubBindingResponse,
 } from '../../../../helpers/mocks/alm-settings';
 import { AlmKeys } from '../../../../types/alm-settings';
 import { renderStepContent } from '../../test-utils';
@@ -35,7 +35,7 @@ it.each([
   [AlmKeys.BitbucketCloud, mockProjectBitbucketCloudBindingResponse()],
   [AlmKeys.BitbucketServer, mockProjectBitbucketBindingResponse()],
   [AlmKeys.GitHub, mockProjectGithubBindingResponse()],
-  [AlmKeys.GitLab, mockProjectAlmBindingResponse({ alm: AlmKeys.GitLab })]
+  [AlmKeys.GitLab, mockProjectAlmBindingResponse({ alm: AlmKeys.GitLab })],
 ])('should render correctly for %s', (alm, projectBinding) => {
   const wrapper = shallowRender({ alm, projectBinding });
   expect(wrapper).toMatchSnapshot('wrapper');
diff --git a/server/sonar-web/src/main/js/components/tutorials/jenkins/__tests__/WebhookStepBitbucket-test.tsx b/server/sonar-web/src/main/js/components/tutorials/jenkins/__tests__/WebhookStepBitbucket-test.tsx
index b874e1dec3f..5044579fce0 100644
--- a/server/sonar-web/src/main/js/components/tutorials/jenkins/__tests__/WebhookStepBitbucket-test.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/jenkins/__tests__/WebhookStepBitbucket-test.tsx
@@ -22,7 +22,7 @@ import * as React from 'react';
 import {
   mockAlmSettingsInstance,
   mockProjectBitbucketBindingResponse,
-  mockProjectBitbucketCloudBindingResponse
+  mockProjectBitbucketCloudBindingResponse,
 } from '../../../../helpers/mocks/alm-settings';
 import { AlmKeys } from '../../../../types/alm-settings';
 import WebhookStepBitbucket, { WebhookStepBitbucketProps } from '../WebhookStepBitbucket';
@@ -31,13 +31,13 @@ it.each([
   [
     AlmKeys.BitbucketServer,
     mockProjectBitbucketBindingResponse(),
-    mockAlmSettingsInstance({ url: 'http://bbs.enterprise.com' })
+    mockAlmSettingsInstance({ url: 'http://bbs.enterprise.com' }),
   ],
   [
     AlmKeys.BitbucketCloud,
     mockProjectBitbucketCloudBindingResponse(),
-    mockAlmSettingsInstance({ url: 'http://bitbucket.org/workspace/' })
-  ]
+    mockAlmSettingsInstance({ url: 'http://bitbucket.org/workspace/' }),
+  ],
 ])('should render correctly for %s', (alm, projectBinding, almBinding) => {
   expect(shallowRender({ alm, projectBinding, almBinding })).toMatchSnapshot();
   expect(shallowRender({ alm, projectBinding, almBinding: undefined })).toMatchSnapshot(
diff --git a/server/sonar-web/src/main/js/components/tutorials/jenkins/__tests__/WebhookStepGithub-test.tsx b/server/sonar-web/src/main/js/components/tutorials/jenkins/__tests__/WebhookStepGithub-test.tsx
index 4665adb33ea..069a9791150 100644
--- a/server/sonar-web/src/main/js/components/tutorials/jenkins/__tests__/WebhookStepGithub-test.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/jenkins/__tests__/WebhookStepGithub-test.tsx
@@ -21,7 +21,7 @@ import { shallow } from 'enzyme';
 import * as React from 'react';
 import {
   mockAlmSettingsInstance,
-  mockProjectGithubBindingResponse
+  mockProjectGithubBindingResponse,
 } from '../../../../helpers/mocks/alm-settings';
 import WebhookStepGithub, { WebhookStepGithubProps } from '../WebhookStepGithub';
 
diff --git a/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/CFamilly.tsx b/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/CFamilly.tsx
index 6f2c0c610cc..ffbc5252089 100644
--- a/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/CFamilly.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/CFamilly.tsx
@@ -29,7 +29,7 @@ import { LanguageProps } from '../JenkinsfileStep';
 import CreateJenkinsfileBulletPoint from './CreateJenkinsfileBulletPoint';
 
 const YAML_MAP: Record<OSs, (baseUrl: string) => string> = {
-  [OSs.Linux]: baseUrl => `node {
+  [OSs.Linux]: (baseUrl) => `node {
   stage('SCM') {
     checkout scm
   }
@@ -48,7 +48,7 @@ const YAML_MAP: Record<OSs, (baseUrl: string) => string> = {
     }
   }
 }`,
-  [OSs.MacOS]: baseUrl => `node {
+  [OSs.MacOS]: (baseUrl) => `node {
   stage('SCM') {
     checkout scm
   }
@@ -71,7 +71,7 @@ const YAML_MAP: Record<OSs, (baseUrl: string) => string> = {
     }
   }
 }`,
-  [OSs.Windows]: baseUrl => `node {
+  [OSs.Windows]: (baseUrl) => `node {
   stage('SCM') {
     checkout scm
   }
@@ -99,7 +99,7 @@ const YAML_MAP: Record<OSs, (baseUrl: string) => string> = {
       powershell "\${scannerHome}/bin/sonar-scanner -Dsonar.cfamily.build-wrapper-output=bw-output"
     }
   }
-}`
+}`,
 };
 
 export default function CFamilly(props: LanguageProps) {
@@ -114,7 +114,7 @@ export default function CFamilly(props: LanguageProps) {
           label={translate('onboarding.build.other.os')}
           checked={os}
           optionLabelKey="onboarding.build.other.os"
-          onCheck={value => setOs(value as OSs)}
+          onCheck={(value) => setOs(value as OSs)}
           options={Object.values(OSs)}
         />
         {os && (
@@ -129,7 +129,8 @@ export default function CFamilly(props: LanguageProps) {
         <>
           <CreateJenkinsfileBulletPoint
             alertTranslationKeyPart="onboarding.tutorial.with.jenkins.jenkinsfile.other.step3"
-            snippet={YAML_MAP[os](baseUrl)}>
+            snippet={YAML_MAP[os](baseUrl)}
+          >
             <CompilationInfo />
           </CreateJenkinsfileBulletPoint>
           <FinishButton onClick={props.onDone} />
diff --git a/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/DotNet.tsx b/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/DotNet.tsx
index 0dcb38afd71..325032d4331 100644
--- a/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/DotNet.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/DotNet.tsx
@@ -38,7 +38,7 @@ const DotNetFlavor = { win_core: DotNetCore, win_msbuild: DotNetFramework, linux
 const DotOS: { [key in keyof typeof DotNetFlavor]: OSDotNet } = {
   win_core: OSs.Windows,
   win_msbuild: OSs.Windows,
-  linux_core: OSs.Linux
+  linux_core: OSs.Linux,
 };
 
 export default function DotNet(props: LanguageProps) {
@@ -53,7 +53,7 @@ export default function DotNet(props: LanguageProps) {
           label={translate('onboarding.tutorial.with.jenkins.jenkinsfile.dotnet.build_agent')}
           checked={flavorComponent}
           optionLabelKey="onboarding.build.dotnet"
-          onCheck={value => setFlavorComponet(value as keyof typeof DotNetFlavor)}
+          onCheck={(value) => setFlavorComponet(value as keyof typeof DotNetFlavor)}
           options={Object.keys(DotNetFlavor)}
         />
       </li>
diff --git a/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/DotNetCore.tsx b/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/DotNetCore.tsx
index 6dfacd72ea1..c3276b88a47 100644
--- a/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/DotNetCore.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/DotNetCore.tsx
@@ -26,7 +26,7 @@ import DotNetPrereqsScanner from './DotNetPrereqsScanner';
 
 const OSS_DEP: { [key in OSDotNet]: { shell: string; pathSeparator: string } } = {
   [OSs.Linux]: { shell: 'sh', pathSeparator: '/' },
-  [OSs.Windows]: { shell: 'bat', pathSeparator: '\\\\' }
+  [OSs.Windows]: { shell: 'bat', pathSeparator: '\\\\' },
 };
 
 const jenkinsfileSnippet = (key: string, shell: OSDotNet) => `node {
diff --git a/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/__tests__/CFamilly-test.tsx b/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/__tests__/CFamilly-test.tsx
index 3b97bc818c9..0d85d3b8c84 100644
--- a/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/__tests__/CFamilly-test.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/__tests__/CFamilly-test.tsx
@@ -29,7 +29,7 @@ it('should render correctly for', () => {
   expect(shallowRender()).toMatchSnapshot();
 });
 
-it.each([[OSs.Linux], [OSs.MacOS], [OSs.Windows]])('should render correctly for %s', os => {
+it.each([[OSs.Linux], [OSs.MacOS], [OSs.Windows]])('should render correctly for %s', (os) => {
   const wrapper = shallowRender();
   wrapper.find(RenderOptions).simulate('check', os);
   expect(wrapper).toMatchSnapshot(os);
diff --git a/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/__tests__/CreateJenkinsfileBulletPoint-test.tsx b/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/__tests__/CreateJenkinsfileBulletPoint-test.tsx
index e896c7dd7c3..656b8e15338 100644
--- a/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/__tests__/CreateJenkinsfileBulletPoint-test.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/__tests__/CreateJenkinsfileBulletPoint-test.tsx
@@ -20,7 +20,7 @@
 import { shallow } from 'enzyme';
 import * as React from 'react';
 import CreateJenkinsfileBulletPoint, {
-  CreateJenkinsfileBulletPointProps
+  CreateJenkinsfileBulletPointProps,
 } from '../CreateJenkinsfileBulletPoint';
 
 it('should render correctly', () => {
diff --git a/server/sonar-web/src/main/js/components/tutorials/other/BuildToolForm.tsx b/server/sonar-web/src/main/js/components/tutorials/other/BuildToolForm.tsx
index 6bff4777b58..d652fe96795 100644
--- a/server/sonar-web/src/main/js/components/tutorials/other/BuildToolForm.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/other/BuildToolForm.tsx
@@ -39,7 +39,7 @@ export class BuildToolForm extends React.PureComponent<Props, State> {
   constructor(props: Props) {
     super(props);
     this.state = {
-      config: this.props.config || {}
+      config: this.props.config || {},
     };
   }
 
@@ -74,9 +74,9 @@ export class BuildToolForm extends React.PureComponent<Props, State> {
           <ButtonToggle
             label={translate('onboarding.build')}
             onCheck={this.handleBuildToolChange}
-            options={buildTools.map(tool => ({
+            options={buildTools.map((tool) => ({
               label: translate('onboarding.build', tool),
-              value: tool
+              value: tool,
             }))}
             value={config.buildTool}
           />
diff --git a/server/sonar-web/src/main/js/components/tutorials/other/DoneNextSteps.tsx b/server/sonar-web/src/main/js/components/tutorials/other/DoneNextSteps.tsx
index 920b2695ee5..7c7ad46b40e 100644
--- a/server/sonar-web/src/main/js/components/tutorials/other/DoneNextSteps.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/other/DoneNextSteps.tsx
@@ -63,7 +63,7 @@ export default function DoneNextSteps({ component }: DoneNextStepsProps) {
                   'onboarding.analysis.auto_refresh_after_analysis.check_these_links.pr_analysis'
                 )}
               </DocLink>
-            )
+            ),
           }}
         />
       </p>
diff --git a/server/sonar-web/src/main/js/components/tutorials/other/OtherTutorial.tsx b/server/sonar-web/src/main/js/components/tutorials/other/OtherTutorial.tsx
index 3e792e8edc3..58a267aa285 100644
--- a/server/sonar-web/src/main/js/components/tutorials/other/OtherTutorial.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/other/OtherTutorial.tsx
@@ -27,7 +27,7 @@ import TokenStep from './TokenStep';
 
 export enum Steps {
   ANALYSIS,
-  TOKEN
+  TOKEN,
 }
 
 interface Props {
diff --git a/server/sonar-web/src/main/js/components/tutorials/other/TokenStep.tsx b/server/sonar-web/src/main/js/components/tutorials/other/TokenStep.tsx
index f28be6ea39f..23ef13f14f2 100644
--- a/server/sonar-web/src/main/js/components/tutorials/other/TokenStep.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/other/TokenStep.tsx
@@ -24,7 +24,7 @@ import { translate } from '../../../helpers/l10n';
 import {
   computeTokenExpirationDate,
   EXPIRATION_OPTIONS,
-  getAvailableExpirationOptions
+  getAvailableExpirationOptions,
 } from '../../../helpers/tokens';
 import { TokenExpiration, TokenType, UserToken } from '../../../types/token';
 import { LoggedInUser } from '../../../types/users';
@@ -74,7 +74,7 @@ export default class TokenStep extends React.PureComponent<Props, State> {
       selection: 'generate',
       tokenName: props.initialTokenName,
       tokenExpiration: TokenExpiration.OneMonth,
-      tokenExpirationOptions: EXPIRATION_OPTIONS
+      tokenExpirationOptions: EXPIRATION_OPTIONS,
     };
   }
 
@@ -137,8 +137,8 @@ export default class TokenStep extends React.PureComponent<Props, State> {
           type: TokenType.Project,
           projectKey,
           ...(tokenExpiration !== TokenExpiration.NoExpiration && {
-            expirationDate: computeTokenExpirationDate(tokenExpiration)
-          })
+            expirationDate: computeTokenExpirationDate(tokenExpiration),
+          }),
         });
         if (this.mounted) {
           this.setState({ loading: false, token });
@@ -183,21 +183,16 @@ export default class TokenStep extends React.PureComponent<Props, State> {
   };
 
   renderGenerateOption = () => {
-    const {
-      loading,
-      selection,
-      tokens,
-      tokenName,
-      tokenExpiration,
-      tokenExpirationOptions
-    } = this.state;
+    const { loading, selection, tokens, tokenName, tokenExpiration, tokenExpirationOptions } =
+      this.state;
     return (
       <div>
         {tokens !== undefined && tokens.length > 0 ? (
           <Radio
             checked={selection === 'generate'}
             onCheck={this.handleModeChange}
-            value="generate">
+            value="generate"
+          >
             {translate('onboarding.token.generate', TokenType.Project)}
           </Radio>
         ) : (
@@ -215,8 +210,8 @@ export default class TokenStep extends React.PureComponent<Props, State> {
                     links={[
                       {
                         href: '/user-guide/user-token/',
-                        label: translate('learn_more')
-                      }
+                        label: translate('learn_more'),
+                      },
                     ]}
                   />
                 </label>
@@ -241,7 +236,9 @@ export default class TokenStep extends React.PureComponent<Props, State> {
                     isSearchable={false}
                     onChange={this.handleTokenExpirationChange}
                     options={tokenExpirationOptions}
-                    value={tokenExpirationOptions.find(option => option.value === tokenExpiration)}
+                    value={tokenExpirationOptions.find(
+                      (option) => option.value === tokenExpiration
+                    )}
                   />
 
                   {loading ? (
@@ -270,7 +267,8 @@ export default class TokenStep extends React.PureComponent<Props, State> {
         <Radio
           checked={this.state.selection === 'use-existing'}
           onCheck={this.handleModeChange}
-          value="use-existing">
+          value="use-existing"
+        >
           {translate('onboarding.token.use_existing_token')}
         </Radio>
         {this.state.selection === 'use-existing' && (
@@ -283,8 +281,8 @@ export default class TokenStep extends React.PureComponent<Props, State> {
                 links={[
                   {
                     href: '/user-guide/user-token/',
-                    label: translate('learn_more')
-                  }
+                    label: translate('learn_more'),
+                  },
                 ]}
               />
             </label>
@@ -344,7 +342,7 @@ export default class TokenStep extends React.PureComponent<Props, State> {
                 <Link target="_blank" to="/account/security">
                   {translate('onboarding.token.text.user_account')}
                 </Link>
-              )
+              ),
             }}
           />
         </div>
diff --git a/server/sonar-web/src/main/js/components/tutorials/other/__tests__/TokenStep-test.tsx b/server/sonar-web/src/main/js/components/tutorials/other/__tests__/TokenStep-test.tsx
index d081f981aff..df08af593d6 100644
--- a/server/sonar-web/src/main/js/components/tutorials/other/__tests__/TokenStep-test.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/other/__tests__/TokenStep-test.tsx
@@ -27,7 +27,7 @@ import TokenStep from '../TokenStep';
 jest.mock('../../../../api/user-tokens', () => ({
   getTokens: jest.fn().mockResolvedValue([{ name: 'foo' }]),
   generateToken: jest.fn().mockResolvedValue({ token: 'abcd1234' }),
-  revokeToken: jest.fn().mockResolvedValue(null)
+  revokeToken: jest.fn().mockResolvedValue(null),
 }));
 
 jest.mock('../../../../api/settings', () => {
@@ -36,9 +36,9 @@ jest.mock('../../../../api/settings', () => {
     getAllValues: jest.fn().mockResolvedValue([
       {
         key: 'sonar.auth.token.max.allowed.lifetime',
-        value: 'No expiration'
-      }
-    ])
+        value: 'No expiration',
+      },
+    ]),
   };
 });
 
@@ -46,12 +46,7 @@ it('sets an initial token name', async () => {
   (getTokens as jest.Mock).mockResolvedValueOnce([{ name: 'fôo' }]);
   const wrapper = shallowRender({ initialTokenName: 'fôo' });
   await waitAndUpdate(wrapper);
-  expect(
-    wrapper
-      .dive()
-      .find('input')
-      .props().value
-  ).toBe('fôo 1');
+  expect(wrapper.dive().find('input').props().value).toBe('fôo 1');
 });
 
 it('generates token', async () => {
@@ -70,10 +65,7 @@ it('revokes token', async () => {
   await new Promise(setImmediate);
   wrapper.setState({ token: 'abcd1234', tokenName: 'my token' });
   expect(wrapper.dive()).toMatchSnapshot();
-  (wrapper
-    .dive()
-    .find('DeleteButton')
-    .prop('onClick') as Function)();
+  (wrapper.dive().find('DeleteButton').prop('onClick') as Function)();
   wrapper.update();
   expect(wrapper.dive()).toMatchSnapshot(); // spinner
   await waitAndUpdate(wrapper);
diff --git a/server/sonar-web/src/main/js/components/tutorials/other/commands/DotNet.tsx b/server/sonar-web/src/main/js/components/tutorials/other/commands/DotNet.tsx
index b8daff7cbef..3a12a423bbd 100644
--- a/server/sonar-web/src/main/js/components/tutorials/other/commands/DotNet.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/other/commands/DotNet.tsx
@@ -32,7 +32,7 @@ export interface DotNetProps {
 
 enum Variant {
   DotNetCoreVariant = 'dotnet_core',
-  DotNetFrameworkVariant = 'dotnet_framework'
+  DotNetFrameworkVariant = 'dotnet_framework',
 }
 
 export default function DotNet(props: DotNetProps) {
@@ -44,7 +44,7 @@ export default function DotNet(props: DotNetProps) {
       <RenderOptions
         label={translate('onboarding.build.other.os')}
         checked={variant}
-        onCheck={value => setVariant(value as Variant)}
+        onCheck={(value) => setVariant(value as Variant)}
         optionLabelKey="onboarding.build.dotnet.variant"
         options={['dotnet_core', 'dotnet_framework']}
         titleLabelKey="onboarding.build.dotnet.variant"
diff --git a/server/sonar-web/src/main/js/components/tutorials/other/commands/DotNetCore.tsx b/server/sonar-web/src/main/js/components/tutorials/other/commands/DotNetCore.tsx
index 81b4441a97b..b26a5be9b74 100644
--- a/server/sonar-web/src/main/js/components/tutorials/other/commands/DotNetCore.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/other/commands/DotNetCore.tsx
@@ -30,7 +30,7 @@ export default function DotNetCore(props: DotNetProps) {
   const commands = [
     `dotnet sonarscanner begin /k:"${component.key}" /d:sonar.host.url="${baseUrl}"  /d:sonar.login="${token}"`,
     'dotnet build',
-    `dotnet sonarscanner end /d:sonar.login="${token}"`
+    `dotnet sonarscanner end /d:sonar.login="${token}"`,
   ];
 
   return (
diff --git a/server/sonar-web/src/main/js/components/tutorials/other/commands/DotNetExecute.tsx b/server/sonar-web/src/main/js/components/tutorials/other/commands/DotNetExecute.tsx
index 958f2ca6aaa..5bd1ab253b8 100644
--- a/server/sonar-web/src/main/js/components/tutorials/other/commands/DotNetExecute.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/other/commands/DotNetExecute.tsx
@@ -39,7 +39,7 @@ export default function DotNetExecute({ commands, component }: DotNetExecuteProp
       </h4>
 
       <InstanceMessage message={translate('onboarding.analysis.msbuild.execute.text')}>
-        {transformedMessage => <p className="spacer-bottom markdown">{transformedMessage}</p>}
+        {(transformedMessage) => <p className="spacer-bottom markdown">{transformedMessage}</p>}
       </InstanceMessage>
       {commands.map((command, index) => (
         <CodeSnippet key={index} snippet={command} />
@@ -53,7 +53,7 @@ export default function DotNetExecute({ commands, component }: DotNetExecuteProp
               <DocLink to="/analysis/scan/sonarscanner-for-msbuild/">
                 {translate('onboarding.analysis.msbuild.docs_link')}
               </DocLink>
-            )
+            ),
           }}
         />
       </p>
diff --git a/server/sonar-web/src/main/js/components/tutorials/other/commands/DotNetFramework.tsx b/server/sonar-web/src/main/js/components/tutorials/other/commands/DotNetFramework.tsx
index 52a94824141..f948dd8ee5a 100644
--- a/server/sonar-web/src/main/js/components/tutorials/other/commands/DotNetFramework.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/other/commands/DotNetFramework.tsx
@@ -30,7 +30,7 @@ export default function DotNetFramework(props: DotNetProps) {
   const commands = [
     `SonarScanner.MSBuild.exe begin /k:"${component.key}" /d:sonar.host.url="${baseUrl}" /d:sonar.login="${token}"`,
     'MsBuild.exe /t:Rebuild',
-    `SonarScanner.MSBuild.exe end /d:sonar.login="${token}"`
+    `SonarScanner.MSBuild.exe end /d:sonar.login="${token}"`,
   ];
 
   return (
@@ -48,10 +48,11 @@ export default function DotNetFramework(props: DotNetProps) {
               link: (
                 <Link
                   to="https://redirect.sonarsource.com/doc/download-scanner-msbuild.html"
-                  target="_blank">
+                  target="_blank"
+                >
                   {translate('onboarding.analysis.msbuild.docs_link')}
                 </Link>
-              )
+              ),
             }}
           />
         </p>
diff --git a/server/sonar-web/src/main/js/components/tutorials/other/commands/DownloadBuildWrapper.tsx b/server/sonar-web/src/main/js/components/tutorials/other/commands/DownloadBuildWrapper.tsx
index ab989bb4c87..bdd42566ae2 100644
--- a/server/sonar-web/src/main/js/components/tutorials/other/commands/DownloadBuildWrapper.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/other/commands/DownloadBuildWrapper.tsx
@@ -33,7 +33,7 @@ export interface DownloadBuildWrapperProps {
 const FILENAMES: { [x in OSs]: string } = {
   win: 'build-wrapper-win-x86',
   linux: 'build-wrapper-linux-x86',
-  mac: 'build-wrapper-macosx-x86'
+  mac: 'build-wrapper-macosx-x86',
 };
 
 export default function DownloadBuildWrapper(props: DownloadBuildWrapperProps) {
@@ -48,7 +48,7 @@ export default function DownloadBuildWrapper(props: DownloadBuildWrapperProps) {
               defaultMessage={translate('onboarding.analysis.build_wrapper.text')}
               id="onboarding.analysis.build_wrapper.text"
               values={{
-                env_var: <code>{os === 'win' ? '%PATH%' : 'PATH'}</code>
+                env_var: <code>{os === 'win' ? '%PATH%' : 'PATH'}</code>,
               }}
             />
           </p>
@@ -58,7 +58,8 @@ export default function DownloadBuildWrapper(props: DownloadBuildWrapperProps) {
               download={`${FILENAMES[os]}.zip`}
               href={`${getBaseUrl()}/static/cpp/${FILENAMES[os]}.zip`}
               rel="noopener noreferrer"
-              target="_blank">
+              target="_blank"
+            >
               {translate('download_verb')}
             </a>
           </p>
diff --git a/server/sonar-web/src/main/js/components/tutorials/other/commands/DownloadScanner.tsx b/server/sonar-web/src/main/js/components/tutorials/other/commands/DownloadScanner.tsx
index b9e5ed78304..ce245506876 100644
--- a/server/sonar-web/src/main/js/components/tutorials/other/commands/DownloadScanner.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/other/commands/DownloadScanner.tsx
@@ -48,10 +48,11 @@ export default function DownloadScanner(props: DownloadScannerProps) {
               link: (
                 <Link
                   to="https://redirect.sonarsource.com/doc/download-scanner.html"
-                  target="_blank">
+                  target="_blank"
+                >
                   {translate('onboarding.analysis.sq_scanner.docs_link')}
                 </Link>
-              )
+              ),
             }}
           />
         </p>
diff --git a/server/sonar-web/src/main/js/components/tutorials/other/commands/ExecBuildWrapper.tsx b/server/sonar-web/src/main/js/components/tutorials/other/commands/ExecBuildWrapper.tsx
index 9bc2bfe920c..96c5ddcacbc 100644
--- a/server/sonar-web/src/main/js/components/tutorials/other/commands/ExecBuildWrapper.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/other/commands/ExecBuildWrapper.tsx
@@ -31,7 +31,7 @@ export interface ExecBuildWrapperProps {
 const executables: { [x in OSs]: string } = {
   linux: 'build-wrapper-linux-x86-64',
   win: 'build-wrapper-win-x86-64.exe',
-  mac: 'build-wrapper-macosx-x86'
+  mac: 'build-wrapper-macosx-x86',
 };
 
 export default function ExecBuildWrapper(props: ExecBuildWrapperProps) {
@@ -59,7 +59,7 @@ export default function ExecBuildWrapper(props: ExecBuildWrapperProps) {
               <DocLink to="/analysis/languages/cfamily/">
                 {translate('onboarding.analysis.build_wrapper.docs_link')}
               </DocLink>
-            )
+            ),
           }}
         />
       </p>
diff --git a/server/sonar-web/src/main/js/components/tutorials/other/commands/ExecScanner.tsx b/server/sonar-web/src/main/js/components/tutorials/other/commands/ExecScanner.tsx
index 646fbd9d1ac..4402371bf11 100644
--- a/server/sonar-web/src/main/js/components/tutorials/other/commands/ExecScanner.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/other/commands/ExecScanner.tsx
@@ -47,7 +47,7 @@ export default function ExecScanner(props: ExecScannerProps) {
     '-D' + q('sonar.sources=.'),
     cfamily ? '-D' + q('sonar.cfamily.build-wrapper-output=bw-output') : undefined,
     '-D' + q(`sonar.host.url=${baseUrl}`),
-    isLocal ? '-D' + q(`sonar.login=${token}`) : undefined
+    isLocal ? '-D' + q(`sonar.login=${token}`) : undefined,
   ];
 
   return (
@@ -56,7 +56,7 @@ export default function ExecScanner(props: ExecScannerProps) {
         {translate('onboarding.analysis.sq_scanner.execute')}
       </h4>
       <InstanceMessage message={translate('onboarding.analysis.sq_scanner.execute.text')}>
-        {transformedMessage => <p className="spacer-bottom markdown">{transformedMessage}</p>}
+        {(transformedMessage) => <p className="spacer-bottom markdown">{transformedMessage}</p>}
       </InstanceMessage>
       <CodeSnippet isOneLine={os === OSs.Windows} snippet={command} />
       <p className="big-spacer-top markdown">
@@ -68,7 +68,7 @@ export default function ExecScanner(props: ExecScannerProps) {
               <DocLink to="/analysis/scan/sonarscanner/">
                 {translate('onboarding.analysis.sq_scanner.docs_link')}
               </DocLink>
-            )
+            ),
           }}
         />
       </p>
diff --git a/server/sonar-web/src/main/js/components/tutorials/other/commands/JavaGradle.tsx b/server/sonar-web/src/main/js/components/tutorials/other/commands/JavaGradle.tsx
index 567ee2ccf28..c53753f360b 100644
--- a/server/sonar-web/src/main/js/components/tutorials/other/commands/JavaGradle.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/other/commands/JavaGradle.tsx
@@ -43,21 +43,21 @@ export default function JavaGradle(props: JavaGradleProps) {
     './gradlew sonarqube',
     `-Dsonar.projectKey=${component.key}`,
     `-Dsonar.host.url=${baseUrl}`,
-    `-Dsonar.login=${token}`
+    `-Dsonar.login=${token}`,
   ];
 
   return (
     <div>
       <h4 className="spacer-bottom">{translate('onboarding.analysis.java.gradle.header')}</h4>
       <InstanceMessage message={translate('onboarding.analysis.java.gradle.text.1')}>
-        {transformedMessage => (
+        {(transformedMessage) => (
           <p className="spacer-bottom markdown">
             <FormattedMessage
               defaultMessage={transformedMessage}
               id="onboarding.analysis.java.gradle.text.1"
               values={{
                 plugin_code: <code>org.sonarqube</code>,
-                filename: <code>build.gradle</code>
+                filename: <code>build.gradle</code>,
               }}
             />
           </p>
@@ -72,7 +72,7 @@ export default function JavaGradle(props: JavaGradleProps) {
             values={{
               link: (
                 <DocLink to="/analysis/scan/sonarscanner-for-gradle/">{translate('here')}</DocLink>
-              )
+              ),
             }}
           />
         </em>
@@ -90,7 +90,7 @@ export default function JavaGradle(props: JavaGradleProps) {
               <DocLink to="/analysis/scan/sonarscanner-for-gradle/">
                 {translate('onboarding.analysis.java.gradle.docs_link')}
               </DocLink>
-            )
+            ),
           }}
         />
       </p>
diff --git a/server/sonar-web/src/main/js/components/tutorials/other/commands/JavaMaven.tsx b/server/sonar-web/src/main/js/components/tutorials/other/commands/JavaMaven.tsx
index 90e5464eddf..1d68f2f789e 100644
--- a/server/sonar-web/src/main/js/components/tutorials/other/commands/JavaMaven.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/other/commands/JavaMaven.tsx
@@ -38,7 +38,7 @@ export default function JavaMaven(props: JavaMavenProps) {
     'mvn clean verify sonar:sonar',
     `-Dsonar.projectKey=${component.key}`,
     `-Dsonar.host.url=${baseUrl}`,
-    `-Dsonar.login=${token}`
+    `-Dsonar.login=${token}`,
   ];
 
   return (
@@ -57,7 +57,7 @@ export default function JavaMaven(props: JavaMavenProps) {
               <DocLink to="/analysis/scan/sonarscanner-for-maven/">
                 {translate('onboarding.analysis.java.maven.docs_link')}
               </DocLink>
-            )
+            ),
           }}
         />
       </p>
diff --git a/server/sonar-web/src/main/js/components/tutorials/other/commands/__tests__/AnalysisCommand-test.tsx b/server/sonar-web/src/main/js/components/tutorials/other/commands/__tests__/AnalysisCommand-test.tsx
index 058b1004aa2..8536c1a6c3f 100644
--- a/server/sonar-web/src/main/js/components/tutorials/other/commands/__tests__/AnalysisCommand-test.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/other/commands/__tests__/AnalysisCommand-test.tsx
@@ -24,7 +24,7 @@ import { BuildTools, OSs } from '../../../types';
 import AnalysisCommand, { AnalysisCommandProps } from '../AnalysisCommand';
 
 jest.mock('../../../../../helpers/urls', () => ({
-  getHostUrl: () => 'HOST'
+  getHostUrl: () => 'HOST',
 }));
 
 it('renders correctly', () => {
diff --git a/server/sonar-web/src/main/js/components/tutorials/other/commands/__tests__/DownloadBuildWrapper-test.tsx b/server/sonar-web/src/main/js/components/tutorials/other/commands/__tests__/DownloadBuildWrapper-test.tsx
index 7887e6aafbb..cf1b0ca44f2 100644
--- a/server/sonar-web/src/main/js/components/tutorials/other/commands/__tests__/DownloadBuildWrapper-test.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/other/commands/__tests__/DownloadBuildWrapper-test.tsx
@@ -22,7 +22,7 @@ import * as React from 'react';
 import { OSs } from '../../../types';
 import DownloadBuildWrapper, { DownloadBuildWrapperProps } from '../DownloadBuildWrapper';
 
-it.each([OSs.Linux, OSs.Windows, OSs.MacOS])('should render correctly for %p', os => {
+it.each([OSs.Linux, OSs.Windows, OSs.MacOS])('should render correctly for %p', (os) => {
   expect(shallowRender({ os, isLocal: false })).toMatchSnapshot('remote');
   expect(shallowRender({ os })).toMatchSnapshot('local');
 });
diff --git a/server/sonar-web/src/main/js/components/tutorials/other/commands/__tests__/DownloadScanner-test.tsx b/server/sonar-web/src/main/js/components/tutorials/other/commands/__tests__/DownloadScanner-test.tsx
index 5590f7eef97..3bc9b1affdc 100644
--- a/server/sonar-web/src/main/js/components/tutorials/other/commands/__tests__/DownloadScanner-test.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/other/commands/__tests__/DownloadScanner-test.tsx
@@ -22,7 +22,7 @@ import * as React from 'react';
 import { OSs } from '../../../types';
 import DownloadScanner, { DownloadScannerProps } from '../DownloadScanner';
 
-it.each([OSs.Linux, OSs.Windows, OSs.MacOS])('should render correctly for %p', os => {
+it.each([OSs.Linux, OSs.Windows, OSs.MacOS])('should render correctly for %p', (os) => {
   expect(shallowRender({ isLocal: false, os })).toMatchSnapshot('remote');
   expect(shallowRender({ os })).toMatchSnapshot('local');
 });
diff --git a/server/sonar-web/src/main/js/components/tutorials/other/commands/__tests__/ExecBuildWrapper-test.tsx b/server/sonar-web/src/main/js/components/tutorials/other/commands/__tests__/ExecBuildWrapper-test.tsx
index c3dce885e4d..c2de57ae195 100644
--- a/server/sonar-web/src/main/js/components/tutorials/other/commands/__tests__/ExecBuildWrapper-test.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/other/commands/__tests__/ExecBuildWrapper-test.tsx
@@ -22,6 +22,6 @@ import * as React from 'react';
 import { OSs } from '../../../types';
 import ExecBuildWrapper from '../ExecBuildWrapper';
 
-it.each([OSs.Linux, OSs.Windows, OSs.MacOS])('Shoud renders for %p correctly', os => {
+it.each([OSs.Linux, OSs.Windows, OSs.MacOS])('Shoud renders for %p correctly', (os) => {
   expect(shallow(<ExecBuildWrapper os={os} />)).toMatchSnapshot();
 });
diff --git a/server/sonar-web/src/main/js/components/tutorials/other/commands/__tests__/ExecScanner-test.tsx b/server/sonar-web/src/main/js/components/tutorials/other/commands/__tests__/ExecScanner-test.tsx
index 1fbe02bb25f..ef832f32dbd 100644
--- a/server/sonar-web/src/main/js/components/tutorials/other/commands/__tests__/ExecScanner-test.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/other/commands/__tests__/ExecScanner-test.tsx
@@ -23,7 +23,7 @@ import { mockComponent } from '../../../../../helpers/mocks/component';
 import { OSs } from '../../../types';
 import ExecScanner, { ExecScannerProps } from '../ExecScanner';
 
-it.each([OSs.Linux, OSs.Windows, OSs.MacOS])('should render correctly for %p', os => {
+it.each([OSs.Linux, OSs.Windows, OSs.MacOS])('should render correctly for %p', (os) => {
   expect(shallowRender({ os })).toMatchSnapshot();
 });
 
diff --git a/server/sonar-web/src/main/js/components/tutorials/test-utils.ts b/server/sonar-web/src/main/js/components/tutorials/test-utils.ts
index 728c32ae79f..56bcb390f35 100644
--- a/server/sonar-web/src/main/js/components/tutorials/test-utils.ts
+++ b/server/sonar-web/src/main/js/components/tutorials/test-utils.ts
@@ -21,9 +21,5 @@ import { ShallowWrapper } from 'enzyme';
 import Step from './components/Step';
 
 export function renderStepContent(wrapper: ShallowWrapper<React.ReactNode>, n = 0) {
-  return wrapper
-    .find(Step)
-    .at(n)
-    .props()
-    .renderForm();
+  return wrapper.find(Step).at(n).props().renderForm();
 }
diff --git a/server/sonar-web/src/main/js/components/tutorials/types.ts b/server/sonar-web/src/main/js/components/tutorials/types.ts
index f34c3e012b4..f0084497d34 100644
--- a/server/sonar-web/src/main/js/components/tutorials/types.ts
+++ b/server/sonar-web/src/main/js/components/tutorials/types.ts
@@ -24,7 +24,7 @@ export enum TutorialModes {
   GitLabCI = 'gitlab-ci',
   GitHubActions = 'github-actions',
   AzurePipelines = 'azure-pipelines',
-  OtherCI = 'other-ci'
+  OtherCI = 'other-ci',
 }
 
 export enum BuildTools {
@@ -32,13 +32,13 @@ export enum BuildTools {
   Gradle = 'gradle',
   CFamily = 'cfamily',
   DotNet = 'dotnet',
-  Other = 'other'
+  Other = 'other',
 }
 
 export enum OSs {
   Linux = 'linux',
   Windows = 'win',
-  MacOS = 'mac'
+  MacOS = 'mac',
 }
 
 export type ManualTutorialConfig =
diff --git a/server/sonar-web/src/main/js/components/tutorials/utils.ts b/server/sonar-web/src/main/js/components/tutorials/utils.ts
index 19f13e7a09c..36a4ec685cf 100644
--- a/server/sonar-web/src/main/js/components/tutorials/utils.ts
+++ b/server/sonar-web/src/main/js/components/tutorials/utils.ts
@@ -39,7 +39,7 @@ sonarqube {
 }
 
 export function getUniqueTokenName(tokens: UserToken[], initialTokenName: string) {
-  const hasToken = (name: string) => tokens.find(token => token.name === name) !== undefined;
+  const hasToken = (name: string) => tokens.find((token) => token.name === name) !== undefined;
 
   if (!hasToken(initialTokenName)) {
     return initialTokenName;
diff --git a/server/sonar-web/src/main/js/components/ui/Alert.tsx b/server/sonar-web/src/main/js/components/ui/Alert.tsx
index e3e0a61b444..48ae60ad5e2 100644
--- a/server/sonar-web/src/main/js/components/ui/Alert.tsx
+++ b/server/sonar-web/src/main/js/components/ui/Alert.tsx
@@ -108,36 +108,36 @@ function getAlertVariantInfo(variant: AlertVariant): AlertVariantInformation {
       color: colors.alertTextError,
       borderColor: colors.alertBorderError,
       backGroundColor: colors.alertBackgroundError,
-      role: 'alert'
+      role: 'alert',
     },
     warning: {
       icon: <AlertWarnIcon fill={colors.alertIconWarning} />,
       color: colors.alertTextWarning,
       borderColor: colors.alertBorderWarning,
       backGroundColor: colors.alertBackgroundWarning,
-      role: 'alert'
+      role: 'alert',
     },
     success: {
       icon: <AlertSuccessIcon fill={colors.alertIconSuccess} />,
       color: colors.alertTextSuccess,
       borderColor: colors.alertBorderSuccess,
       backGroundColor: colors.alertBackgroundSuccess,
-      role: 'status'
+      role: 'status',
     },
     info: {
       icon: <InfoIcon fill={colors.alertIconInfo} />,
       color: colors.alertTextInfo,
       borderColor: colors.alertBorderInfo,
       backGroundColor: colors.alertBackgroundInfo,
-      role: 'status'
+      role: 'status',
     },
     loading: {
       icon: <DeferredSpinner timeout={0} />,
       color: colors.alertTextInfo,
       borderColor: colors.alertBorderInfo,
       backGroundColor: colors.alertBackgroundInfo,
-      role: 'status'
-    }
+      role: 'status',
+    },
   };
 
   return variantList[variant];
@@ -156,7 +156,8 @@ export function Alert(props: AlertProps & React.HTMLAttributes<HTMLDivElement>)
       role={variantInfo.role}
       aria-label={translate('alert.tooltip', variant)}
       variantInfo={variantInfo}
-      {...domProps}>
+      {...domProps}
+    >
       <StyledAlertInner isBanner={isBanner}>
         <StyledAlertIcon isBanner={isBanner} variantInfo={variantInfo}>
           {variantInfo.icon}
diff --git a/server/sonar-web/src/main/js/components/ui/AutoEllipsis.tsx b/server/sonar-web/src/main/js/components/ui/AutoEllipsis.tsx
index b4bcf52eaa7..da03306cbfe 100644
--- a/server/sonar-web/src/main/js/components/ui/AutoEllipsis.tsx
+++ b/server/sonar-web/src/main/js/components/ui/AutoEllipsis.tsx
@@ -48,7 +48,7 @@ export default function AutoEllipsis(props: Props) {
 
   return React.cloneElement(children, {
     className: classNames(children.props.className, { 'text-ellipsis': autoEllispis }),
-    ref
+    ref,
   });
 }
 
diff --git a/server/sonar-web/src/main/js/components/ui/Avatar.tsx b/server/sonar-web/src/main/js/components/ui/Avatar.tsx
index 82eb5fe5b56..5ccafcde59d 100644
--- a/server/sonar-web/src/main/js/components/ui/Avatar.tsx
+++ b/server/sonar-web/src/main/js/components/ui/Avatar.tsx
@@ -40,7 +40,7 @@ export function Avatar(props: Props) {
     className,
     hash,
     name,
-    size
+    size,
   } = props;
 
   const enableGravatar = settings[GlobalSettingKeys.EnableGravatar] === 'true';
diff --git a/server/sonar-web/src/main/js/components/ui/CoverageRating.tsx b/server/sonar-web/src/main/js/components/ui/CoverageRating.tsx
index e928884c689..6874892935a 100644
--- a/server/sonar-web/src/main/js/components/ui/CoverageRating.tsx
+++ b/server/sonar-web/src/main/js/components/ui/CoverageRating.tsx
@@ -37,7 +37,7 @@ export interface CoverageRatingProps {
 export default function CoverageRating({
   muted = false,
   size = 'normal',
-  value
+  value,
 }: CoverageRatingProps) {
   let data = [{ value: FULL_PERCENT, fill: colors.gray71 }];
   let padAngle = 0;
@@ -46,7 +46,7 @@ export default function CoverageRating({
     const numberValue = Number(value);
     data = [
       { value: numberValue, fill: muted ? colors.gray71 : colors.success500 },
-      { value: FULL_PERCENT - numberValue, fill: muted ? 'transparent' : colors.error500 }
+      { value: FULL_PERCENT - numberValue, fill: muted ? 'transparent' : colors.error500 },
     ];
     if (numberValue !== 0 && numberValue < FULL_PERCENT) {
       padAngle = 0.1; // Same for all sizes, because it scales automatically
diff --git a/server/sonar-web/src/main/js/components/ui/DismissableAlert.tsx b/server/sonar-web/src/main/js/components/ui/DismissableAlert.tsx
index 51e6456ff21..db2b287a7a5 100644
--- a/server/sonar-web/src/main/js/components/ui/DismissableAlert.tsx
+++ b/server/sonar-web/src/main/js/components/ui/DismissableAlert.tsx
@@ -59,7 +59,8 @@ export default function DismissableAlert(props: DismissableAlertProps) {
             onClick={() => {
               hideAlert();
               setShow(false);
-            }}>
+            }}
+          >
             <ClearIcon size={12} thin={true} />
           </ButtonIcon>
         </div>
diff --git a/server/sonar-web/src/main/js/components/ui/DuplicationsRating.tsx b/server/sonar-web/src/main/js/components/ui/DuplicationsRating.tsx
index 4c7581e0c51..663140e1689 100644
--- a/server/sonar-web/src/main/js/components/ui/DuplicationsRating.tsx
+++ b/server/sonar-web/src/main/js/components/ui/DuplicationsRating.tsx
@@ -38,7 +38,7 @@ export default function DuplicationsRating({ muted = false, size = 'normal', val
     'duplications-rating-B': inRange(value || 0, 3, 5),
     'duplications-rating-C': inRange(value || 0, 5, 10),
     'duplications-rating-D': inRange(value || 0, 10, 20),
-    'duplications-rating-E': (value || 0) >= 20
+    'duplications-rating-E': (value || 0) >= 20,
   });
 
   return <div className={className} />;
diff --git a/server/sonar-web/src/main/js/components/ui/GenericAvatar.tsx b/server/sonar-web/src/main/js/components/ui/GenericAvatar.tsx
index 73210e0d94e..0a3a4496836 100644
--- a/server/sonar-web/src/main/js/components/ui/GenericAvatar.tsx
+++ b/server/sonar-web/src/main/js/components/ui/GenericAvatar.tsx
@@ -32,7 +32,7 @@ export default function GenericAvatar({ className, name, round, size }: Props) {
   const color = stringToColor(name);
 
   let text = '';
-  const words = name.split(/\s+/).filter(word => word.length > 0);
+  const words = name.split(/\s+/).filter((word) => word.length > 0);
   if (words.length >= 2) {
     text = words[0][0] + words[1][0];
   } else if (name.length > 0) {
@@ -53,8 +53,9 @@ export default function GenericAvatar({ className, name, round, size }: Props) {
         lineHeight: `${size}px`,
         textAlign: 'center',
         verticalAlign: 'top',
-        width: size
-      }}>
+        width: size,
+      }}
+    >
       {text.toUpperCase()}
     </div>
   );
diff --git a/server/sonar-web/src/main/js/components/ui/Level.tsx b/server/sonar-web/src/main/js/components/ui/Level.tsx
index 322aaf68391..dd4022a2702 100644
--- a/server/sonar-web/src/main/js/components/ui/Level.tsx
+++ b/server/sonar-web/src/main/js/components/ui/Level.tsx
@@ -35,14 +35,15 @@ export default function Level(props: LevelProps) {
   const formatted = formatMeasure(props.level, 'LEVEL');
   const className = classNames(props.className, 'level', 'level-' + props.level, {
     'level-small': props.small,
-    'level-muted': props.muted
+    'level-muted': props.muted,
   });
 
   return (
     <span
       aria-label={props['aria-label']}
       aria-labelledby={props['aria-labelledby']}
-      className={className}>
+      className={className}
+    >
       {formatted}
     </span>
   );
diff --git a/server/sonar-web/src/main/js/components/ui/MandatoryFieldMarker.tsx b/server/sonar-web/src/main/js/components/ui/MandatoryFieldMarker.tsx
index 207fe85027c..d07d060594b 100644
--- a/server/sonar-web/src/main/js/components/ui/MandatoryFieldMarker.tsx
+++ b/server/sonar-web/src/main/js/components/ui/MandatoryFieldMarker.tsx
@@ -29,7 +29,8 @@ export default function MandatoryFieldMarker({ className }: MandatoryFieldMarker
   return (
     <em
       aria-label={translate('field_required')}
-      className={classNames('mandatory little-spacer-left', className)}>
+      className={classNames('mandatory little-spacer-left', className)}
+    >
       *
     </em>
   );
diff --git a/server/sonar-web/src/main/js/components/ui/NavBar.tsx b/server/sonar-web/src/main/js/components/ui/NavBar.tsx
index d713a0ab8f5..d081a391063 100644
--- a/server/sonar-web/src/main/js/components/ui/NavBar.tsx
+++ b/server/sonar-web/src/main/js/components/ui/NavBar.tsx
@@ -67,7 +67,8 @@ export default class NavBar extends React.PureComponent<
       <nav {...other} className={classNames('navbar', className)} style={{ height, top }}>
         <div
           className={classNames('navbar-inner', { 'navbar-inner-with-notif': notif != null })}
-          style={{ height, left: this.state.left }}>
+          style={{ height, left: this.state.left }}
+        >
           <div className={classNames('clearfix', { 'navbar-limited': limited })}>{children}</div>
           {notif}
         </div>
diff --git a/server/sonar-web/src/main/js/components/ui/PageShortcutsTooltip.tsx b/server/sonar-web/src/main/js/components/ui/PageShortcutsTooltip.tsx
index d0303415cfc..d8304bcfd77 100644
--- a/server/sonar-web/src/main/js/components/ui/PageShortcutsTooltip.tsx
+++ b/server/sonar-web/src/main/js/components/ui/PageShortcutsTooltip.tsx
@@ -70,7 +70,8 @@ export default function PageShortcutsTooltip(props: PageShortcutsTooltipProps) {
             </div>
           )}
         </div>
-      }>
+      }
+    >
       <div
         aria-label={`
         ${translate('shortcuts.on_page.intro')}
@@ -94,7 +95,8 @@ export default function PageShortcutsTooltip(props: PageShortcutsTooltipProps) {
         className={classNames(
           className,
           'page-shortcuts-tooltip note text-center display-inline-block'
-        )}>
+        )}
+      >
         <div>
           <span className="shortcut-button shortcut-button-tiny">↑</span>
         </div>
diff --git a/server/sonar-web/src/main/js/components/ui/Rating.tsx b/server/sonar-web/src/main/js/components/ui/Rating.tsx
index f898285625d..dc0fc2a581e 100644
--- a/server/sonar-web/src/main/js/components/ui/Rating.tsx
+++ b/server/sonar-web/src/main/js/components/ui/Rating.tsx
@@ -46,7 +46,8 @@ export default function Rating({
           className
         )}
         aria-label={translate('metric.no_rating')}
-        {...ariaAttrs}>
+        {...ariaAttrs}
+      >
         –
       </span>
     );
@@ -61,7 +62,8 @@ export default function Rating({
         { 'rating-small': small, 'rating-muted': muted },
         className
       )}
-      {...ariaAttrs}>
+      {...ariaAttrs}
+    >
       {formatted}
     </span>
   );
diff --git a/server/sonar-web/src/main/js/components/ui/SizeRating.tsx b/server/sonar-web/src/main/js/components/ui/SizeRating.tsx
index 15c8843e898..1620f95914c 100644
--- a/server/sonar-web/src/main/js/components/ui/SizeRating.tsx
+++ b/server/sonar-web/src/main/js/components/ui/SizeRating.tsx
@@ -48,7 +48,7 @@ export default function SizeRating({ small = false, muted = false, value }: Prop
 
   const className = classNames('size-rating', {
     'size-rating-small': small,
-    'size-rating-muted': muted
+    'size-rating-muted': muted,
   });
 
   return (
diff --git a/server/sonar-web/src/main/js/components/ui/__tests__/Alert-test.tsx b/server/sonar-web/src/main/js/components/ui/__tests__/Alert-test.tsx
index 317afdb842c..787d736a219 100644
--- a/server/sonar-web/src/main/js/components/ui/__tests__/Alert-test.tsx
+++ b/server/sonar-web/src/main/js/components/ui/__tests__/Alert-test.tsx
@@ -27,26 +27,22 @@ it('should render properly', () => {
 
 it('verification of all variants of alert', () => {
   const variants: AlertProps['variant'][] = ['error', 'warning', 'success', 'info', 'loading'];
-  variants.forEach(variant => {
+  variants.forEach((variant) => {
     const wrapper = shallowRender({ variant });
     expect(wrapper.prop('variantInfo')).toMatchSnapshot();
   });
 });
 
 it('should render inline alert', () => {
-  expect(
-    shallowRender({ display: 'inline' })
-      .find('Styled(div)[isInline=true]')
-      .exists()
-  ).toBe(true);
+  expect(shallowRender({ display: 'inline' }).find('Styled(div)[isInline=true]').exists()).toBe(
+    true
+  );
 });
 
 it('should render banner alert', () => {
-  expect(
-    shallowRender({ display: 'banner' })
-      .find('Styled(div)[isBanner=true]')
-      .exists()
-  ).toBe(true);
+  expect(shallowRender({ display: 'banner' }).find('Styled(div)[isBanner=true]').exists()).toBe(
+    true
+  );
 });
 
 it('should render banner alert with correct css', () => {
diff --git a/server/sonar-web/src/main/js/components/ui/__tests__/Avatar-test.tsx b/server/sonar-web/src/main/js/components/ui/__tests__/Avatar-test.tsx
index b9bb9fec681..5f52661c669 100644
--- a/server/sonar-web/src/main/js/components/ui/__tests__/Avatar-test.tsx
+++ b/server/sonar-web/src/main/js/components/ui/__tests__/Avatar-test.tsx
@@ -31,8 +31,8 @@ it('should be able to render with hash only', () => {
       appState={mockAppState({
         settings: {
           [GlobalSettingKeys.EnableGravatar]: 'true',
-          [GlobalSettingKeys.GravatarServerUrl]: gravatarServerUrl
-        }
+          [GlobalSettingKeys.GravatarServerUrl]: gravatarServerUrl,
+        },
       })}
       hash="7daf6c79d4802916d83f6266e24850af"
       name="Foo"
diff --git a/server/sonar-web/src/main/js/components/ui/__tests__/CoverageRating-test.tsx b/server/sonar-web/src/main/js/components/ui/__tests__/CoverageRating-test.tsx
index c2fb9644e56..d1fd101fb15 100644
--- a/server/sonar-web/src/main/js/components/ui/__tests__/CoverageRating-test.tsx
+++ b/server/sonar-web/src/main/js/components/ui/__tests__/CoverageRating-test.tsx
@@ -26,22 +26,19 @@ it('should render correctly', () => {
 });
 
 it('should render with muted style', () => {
-  expect(
-    shallowRender({ muted: true })
-      .find('DonutChart')
-      .prop('data')
-  ).toEqual([
+  expect(shallowRender({ muted: true }).find('DonutChart').prop('data')).toEqual([
     { fill: '#b4b4b4', value: 25 },
-    { fill: 'transparent', value: 75 }
+    { fill: 'transparent', value: 75 },
   ]);
 });
 
 it('should render with small size', () => {
-  expect(
-    shallowRender({ size: 'small' })
-      .find('DonutChart')
-      .props()
-  ).toMatchObject({ height: 20, padAngle: 0.1, thickness: 3, width: 20 });
+  expect(shallowRender({ size: 'small' }).find('DonutChart').props()).toMatchObject({
+    height: 20,
+    padAngle: 0.1,
+    thickness: 3,
+    width: 20,
+  });
 });
 
 it('should correctly handle padAngle for 0% and 100% coverage', () => {
diff --git a/server/sonar-web/src/main/js/components/ui/__tests__/DismissableAlert-test.tsx b/server/sonar-web/src/main/js/components/ui/__tests__/DismissableAlert-test.tsx
index 93148c340fb..c9d1e99970e 100644
--- a/server/sonar-web/src/main/js/components/ui/__tests__/DismissableAlert-test.tsx
+++ b/server/sonar-web/src/main/js/components/ui/__tests__/DismissableAlert-test.tsx
@@ -24,24 +24,24 @@ import { save } from '../../../helpers/storage';
 import { click } from '../../../helpers/testUtils';
 import DismissableAlert, {
   DismissableAlertProps,
-  DISMISSED_ALERT_STORAGE_KEY
+  DISMISSED_ALERT_STORAGE_KEY,
 } from '../DismissableAlert';
 
 jest.mock('../../../helpers/storage', () => ({
   get: jest.fn((_: string, suffix: string) => (suffix === 'bar' ? 'true' : undefined)),
-  save: jest.fn()
+  save: jest.fn(),
 }));
 
 jest.mock('react', () => {
   return {
     ...jest.requireActual('react'),
-    useEffect: jest.fn()
+    useEffect: jest.fn(),
   };
 });
 
 beforeEach(() => {
   jest.clearAllMocks();
-  (React.useEffect as jest.Mock).mockImplementationOnce(f => f());
+  (React.useEffect as jest.Mock).mockImplementationOnce((f) => f());
 });
 
 it('should render correctly', () => {
diff --git a/server/sonar-web/src/main/js/components/ui/__tests__/MandatoryFieldsExplanation-test.tsx b/server/sonar-web/src/main/js/components/ui/__tests__/MandatoryFieldsExplanation-test.tsx
index 97cd17f4445..f4114c0a40f 100644
--- a/server/sonar-web/src/main/js/components/ui/__tests__/MandatoryFieldsExplanation-test.tsx
+++ b/server/sonar-web/src/main/js/components/ui/__tests__/MandatoryFieldsExplanation-test.tsx
@@ -20,7 +20,7 @@
 import { shallow } from 'enzyme';
 import * as React from 'react';
 import MandatoryFieldsExplanation, {
-  MandatoryFieldsExplanationProps
+  MandatoryFieldsExplanationProps,
 } from '../MandatoryFieldsExplanation';
 
 it('should render correctly', () => {
diff --git a/server/sonar-web/src/main/js/components/ui/__tests__/popups-test.tsx b/server/sonar-web/src/main/js/components/ui/__tests__/popups-test.tsx
index a8d0fecdbca..1b9e5544c15 100644
--- a/server/sonar-web/src/main/js/components/ui/__tests__/popups-test.tsx
+++ b/server/sonar-web/src/main/js/components/ui/__tests__/popups-test.tsx
@@ -25,7 +25,7 @@ import { Popup, PopupArrow, PopupPlacement, PortalPopup } from '../popups';
 
 jest.mock('react-dom', () => ({
   ...jest.requireActual('react-dom'),
-  findDOMNode: jest.fn().mockReturnValue(undefined)
+  findDOMNode: jest.fn().mockReturnValue(undefined),
 }));
 
 describe('Popup', () => {
@@ -70,8 +70,8 @@ describe('PortalPopup', () => {
 
     wrapper.instance().popupNode = {
       current: {
-        getBoundingClientRect: jest.fn().mockReturnValue({ width: 8, height: 8 })
-      } as any
+        getBoundingClientRect: jest.fn().mockReturnValue({ width: 8, height: 8 }),
+      } as any,
     };
 
     wrapper.instance().positionPopup();
diff --git a/server/sonar-web/src/main/js/components/ui/popups.tsx b/server/sonar-web/src/main/js/components/ui/popups.tsx
index b8a35716b78..326450f2757 100644
--- a/server/sonar-web/src/main/js/components/ui/popups.tsx
+++ b/server/sonar-web/src/main/js/components/ui/popups.tsx
@@ -44,7 +44,7 @@ export enum PopupPlacement {
   LeftTop = 'left-top',
   RightTop = 'right-top',
   RightBottom = 'right-bottom',
-  TopLeft = 'top-left'
+  TopLeft = 'top-left',
 }
 
 interface PopupProps {
@@ -68,7 +68,8 @@ function PopupBase(props: PopupProps, ref: React.Ref<HTMLDivElement>) {
           props.className
         )}
         ref={ref || React.createRef()}
-        style={props.style}>
+        style={props.style}
+      >
         {props.children}
         <PopupArrow style={props.arrowStyle} />
       </div>
@@ -218,7 +219,7 @@ export class PortalPopup extends React.Component<PortalPopupProps, State> {
         left: window.pageXOffset + left,
         top: window.pageYOffset + top,
         width,
-        height
+        height,
       });
     }
   };
@@ -233,7 +234,7 @@ export class PortalPopup extends React.Component<PortalPopupProps, State> {
         left: this.state.left + leftFix,
         top: this.state.top + topFix,
         width: this.state.width,
-        height: this.state.height
+        height: this.state.height,
       };
       arrowStyle = this.adjustArrowPosition(placement, { leftFix, topFix });
     }
@@ -245,7 +246,8 @@ export class PortalPopup extends React.Component<PortalPopupProps, State> {
         noPadding={noPadding}
         placement={placement}
         ref={this.popupNode}
-        style={style}>
+        style={style}
+      >
         {overlay}
       </Popup>
     );
diff --git a/server/sonar-web/src/main/js/components/ui/update-center/MetaData.tsx b/server/sonar-web/src/main/js/components/ui/update-center/MetaData.tsx
index 7b5ac8f80d2..376324f7090 100644
--- a/server/sonar-web/src/main/js/components/ui/update-center/MetaData.tsx
+++ b/server/sonar-web/src/main/js/components/ui/update-center/MetaData.tsx
@@ -62,7 +62,7 @@ export default class MetaData extends React.Component<Props, State> {
           }
           return Promise.reject(response);
         })
-        .then(data => {
+        .then((data) => {
           if (this.mounted) {
             this.setState({ data });
           }
diff --git a/server/sonar-web/src/main/js/components/ui/update-center/MetaDataVersion.tsx b/server/sonar-web/src/main/js/components/ui/update-center/MetaDataVersion.tsx
index 4163e319f66..1b25dda67c5 100644
--- a/server/sonar-web/src/main/js/components/ui/update-center/MetaDataVersion.tsx
+++ b/server/sonar-web/src/main/js/components/ui/update-center/MetaDataVersion.tsx
@@ -34,21 +34,22 @@ export default function MetaDataVersion(props: MetaDataVersionProps) {
       date,
       description,
       downloadURL,
-      version
-    }
+      version,
+    },
   } = props;
 
   const fallbackLabel = 'Download';
 
   const advancedDownloadUrls = isAdvancedDownloadUrlArray(downloadURL)
-    ? downloadURL.map(url => ({ ...url, label: url.label || fallbackLabel }))
+    ? downloadURL.map((url) => ({ ...url, label: url.label || fallbackLabel }))
     : [{ label: fallbackLabel, url: downloadURL }];
 
   return (
     <div
       className={classNames('update-center-meta-data-version', {
-        'update-center-meta-data-version-archived': archived
-      })}>
+        'update-center-meta-data-version-archived': archived,
+      })}
+    >
       <div className="update-center-meta-data-version-version">{version}</div>
 
       <div className="update-center-meta-data-version-release-info">
diff --git a/server/sonar-web/src/main/js/components/ui/update-center/MetaDataVersions.tsx b/server/sonar-web/src/main/js/components/ui/update-center/MetaDataVersions.tsx
index dc0c442bb52..79faa360b42 100644
--- a/server/sonar-web/src/main/js/components/ui/update-center/MetaDataVersions.tsx
+++ b/server/sonar-web/src/main/js/components/ui/update-center/MetaDataVersions.tsx
@@ -31,7 +31,7 @@ interface State {
 
 export default class MetaDataVersions extends React.Component<Props, State> {
   state: State = {
-    collapsed: true
+    collapsed: true,
   };
 
   componentDidUpdate(prevProps: Props) {
@@ -50,8 +50,8 @@ export default class MetaDataVersions extends React.Component<Props, State> {
     const { versions } = this.props;
     const { collapsed } = this.state;
 
-    const archivedVersions = versions.filter(version => version.archived);
-    const currentVersions = versions.filter(version => !version.archived);
+    const archivedVersions = versions.filter((version) => version.archived);
+    const currentVersions = versions.filter((version) => !version.archived);
 
     return (
       <div className="update-center-meta-data-versions">
@@ -59,12 +59,13 @@ export default class MetaDataVersions extends React.Component<Props, State> {
           <button
             className="update-center-meta-data-versions-show-more"
             onClick={this.handleClick}
-            type="button">
+            type="button"
+          >
             {collapsed ? 'Show more versions' : 'Show fewer versions'}
           </button>
         )}
 
-        {currentVersions.map(versionInformation => (
+        {currentVersions.map((versionInformation) => (
           <MetaDataVersion
             key={versionInformation.version}
             versionInformation={versionInformation}
@@ -72,7 +73,7 @@ export default class MetaDataVersions extends React.Component<Props, State> {
         ))}
 
         {!collapsed &&
-          archivedVersions.map(archivedVersionInformation => (
+          archivedVersions.map((archivedVersionInformation) => (
             <MetaDataVersion
               key={archivedVersionInformation.version}
               versionInformation={archivedVersionInformation}
diff --git a/server/sonar-web/src/main/js/components/ui/update-center/__tests__/MetaData-test.tsx b/server/sonar-web/src/main/js/components/ui/update-center/__tests__/MetaData-test.tsx
index f65c466f973..815bc5a8a94 100644
--- a/server/sonar-web/src/main/js/components/ui/update-center/__tests__/MetaData-test.tsx
+++ b/server/sonar-web/src/main/js/components/ui/update-center/__tests__/MetaData-test.tsx
@@ -44,7 +44,7 @@ it('should render correctly', async () => {
 
 it('should render correctly with organization', async () => {
   const metaDataInfo = mockMetaDataInformation({
-    organization: { name: 'test-org', url: 'test-org-url' }
+    organization: { name: 'test-org', url: 'test-org-url' },
   });
   mockFetchReturnValue(metaDataInfo);
 
diff --git a/server/sonar-web/src/main/js/components/ui/update-center/__tests__/MetaDataVersion-test.tsx b/server/sonar-web/src/main/js/components/ui/update-center/__tests__/MetaDataVersion-test.tsx
index ecf8aba4d8b..bc092bc34fd 100644
--- a/server/sonar-web/src/main/js/components/ui/update-center/__tests__/MetaDataVersion-test.tsx
+++ b/server/sonar-web/src/main/js/components/ui/update-center/__tests__/MetaDataVersion-test.tsx
@@ -27,13 +27,13 @@ it('should render correctly', () => {
   expect(
     shallowRender({
       versionInformation: mockMetaDataVersionInformation({
-        downloadURL: [{ label: 'macos 64 bits', url: '' }]
-      })
+        downloadURL: [{ label: 'macos 64 bits', url: '' }],
+      }),
     })
   ).toMatchSnapshot('with advanced downloadUrl');
   expect(
     shallowRender({
-      versionInformation: { version: '2.0' }
+      versionInformation: { version: '2.0' },
     })
   ).toMatchSnapshot('with very few info');
 });
diff --git a/server/sonar-web/src/main/js/components/ui/update-center/__tests__/MetaDataVersions-test.tsx b/server/sonar-web/src/main/js/components/ui/update-center/__tests__/MetaDataVersions-test.tsx
index f3720bf4b60..835b718962c 100644
--- a/server/sonar-web/src/main/js/components/ui/update-center/__tests__/MetaDataVersions-test.tsx
+++ b/server/sonar-web/src/main/js/components/ui/update-center/__tests__/MetaDataVersions-test.tsx
@@ -43,7 +43,7 @@ function shallowRender(props?: Partial<MetaDataVersions['props']>) {
       versions={[
         mockMetaDataVersionInformation({ version: '3.0' }),
         mockMetaDataVersionInformation({ version: '2.0', archived: true }),
-        mockMetaDataVersionInformation({ version: '1.0', archived: true })
+        mockMetaDataVersionInformation({ version: '1.0', archived: true }),
       ]}
       {...props}
     />
diff --git a/server/sonar-web/src/main/js/components/ui/update-center/mocks/update-center-metadata.ts b/server/sonar-web/src/main/js/components/ui/update-center/mocks/update-center-metadata.ts
index b0561a49d66..b31afc60583 100644
--- a/server/sonar-web/src/main/js/components/ui/update-center/mocks/update-center-metadata.ts
+++ b/server/sonar-web/src/main/js/components/ui/update-center/mocks/update-center-metadata.ts
@@ -29,7 +29,7 @@ export function mockMetaDataVersionInformation(
     archived: false,
     downloadURL: 'https://example.com/sonar-java-plugin-5.13.0.18197.jar',
     changeLogUrl: 'https://example.com/sonar-java-plugin/release',
-    ...overrides
+    ...overrides,
   };
 }
 
@@ -42,7 +42,7 @@ export function mockMetaDataInformation(
     isSonarSourceCommercial: true,
     organization: {
       name: 'SonarSource',
-      url: 'http://www.sonarsource.com/'
+      url: 'http://www.sonarsource.com/',
     },
     category: 'Languages',
     license: 'SonarSource',
@@ -50,8 +50,8 @@ export function mockMetaDataInformation(
     sourcesURL: 'https://github.com/SonarSource/sonar-java',
     versions: [
       mockMetaDataVersionInformation({ version: '2.0' }),
-      mockMetaDataVersionInformation({ version: '1.0', archived: true })
+      mockMetaDataVersionInformation({ version: '1.0', archived: true }),
     ],
-    ...overrides
+    ...overrides,
   };
 }
diff --git a/server/sonar-web/src/main/js/components/upgrade/SystemUpgradeForm.tsx b/server/sonar-web/src/main/js/components/upgrade/SystemUpgradeForm.tsx
index b66d51822bb..9a6791569f8 100644
--- a/server/sonar-web/src/main/js/components/upgrade/SystemUpgradeForm.tsx
+++ b/server/sonar-web/src/main/js/components/upgrade/SystemUpgradeForm.tsx
@@ -42,7 +42,7 @@ interface Props {
 const MAP_ALERT: { [key in UpdateUseCase]?: AlertVariant } = {
   [UpdateUseCase.NewPatch]: 'warning',
   [UpdateUseCase.PreLTS]: 'warning',
-  [UpdateUseCase.PreviousLTS]: 'error'
+  [UpdateUseCase.PreviousLTS]: 'error',
 };
 
 interface State {
@@ -64,11 +64,13 @@ export class SystemUpgradeForm extends React.PureComponent<Props, State> {
     if (updateUseCase === UpdateUseCase.NewPatch && parsedVersion !== null) {
       const [, major, minor] = parsedVersion;
       const majoMinorVersion = `${major}.${minor}`;
-      patches = flatMap(systemUpgrades, upgrades =>
-        filter(upgrades, upgrade => upgrade.version.startsWith(majoMinorVersion))
+      patches = flatMap(systemUpgrades, (upgrades) =>
+        filter(upgrades, (upgrade) => upgrade.version.startsWith(majoMinorVersion))
       );
       systemUpgradesWithPatch = systemUpgrades
-        .map(upgrades => upgrades.filter(upgrade => !upgrade.version.startsWith(majoMinorVersion)))
+        .map((upgrades) =>
+          upgrades.filter((upgrade) => !upgrade.version.startsWith(majoMinorVersion))
+        )
         .filter(negate(isEmpty));
       systemUpgradesWithPatch.push(patches);
     } else {
@@ -76,7 +78,7 @@ export class SystemUpgradeForm extends React.PureComponent<Props, State> {
       for (const upgrades of systemUpgrades) {
         if (untilLTS === false) {
           systemUpgradesWithPatch.push(upgrades);
-          untilLTS = upgrades.some(upgrade => upgrade.version.startsWith(latestLTS));
+          untilLTS = upgrades.some((upgrade) => upgrade.version.startsWith(latestLTS));
         }
       }
     }
@@ -93,7 +95,7 @@ export class SystemUpgradeForm extends React.PureComponent<Props, State> {
               {translate('admin_notification.update', updateUseCase)}
             </Alert>
           )}
-          {systemUpgradesWithPatch.map(upgrades => (
+          {systemUpgradesWithPatch.map((upgrades) => (
             <SystemUpgradeItem
               edition={
                 appState.edition as EditionKey /* TODO: Fix once AppState is no longer ambiant. */
@@ -101,7 +103,7 @@ export class SystemUpgradeForm extends React.PureComponent<Props, State> {
               key={upgrades[upgrades.length - 1].version}
               systemUpgrades={upgrades}
               isPatch={upgrades === patches}
-              isLTSVersion={upgrades.some(upgrade => upgrade.version.startsWith(latestLTS))}
+              isLTSVersion={upgrades.some((upgrade) => upgrade.version.startsWith(latestLTS))}
             />
           ))}
         </div>
@@ -110,7 +112,8 @@ export class SystemUpgradeForm extends React.PureComponent<Props, State> {
           <Link
             className="pull-left link-no-underline display-flex-center"
             to="https://www.sonarqube.org/downloads/?referrer=sonarqube"
-            target="_blank">
+            target="_blank"
+          >
             {translate('system.see_sonarqube_downloads')}
           </Link>
           <ResetButtonLink onClick={this.props.onClose}>{translate('cancel')}</ResetButtonLink>
diff --git a/server/sonar-web/src/main/js/components/upgrade/SystemUpgradeIntermediate.tsx b/server/sonar-web/src/main/js/components/upgrade/SystemUpgradeIntermediate.tsx
index d6380e22af3..aee2b7bbf5c 100644
--- a/server/sonar-web/src/main/js/components/upgrade/SystemUpgradeIntermediate.tsx
+++ b/server/sonar-web/src/main/js/components/upgrade/SystemUpgradeIntermediate.tsx
@@ -37,7 +37,7 @@ export default class SystemUpgradeIntermediate extends React.PureComponent<Props
   state: State = { showMore: false };
 
   toggleIntermediatVersions = () => {
-    this.setState(state => ({ showMore: !state.showMore }));
+    this.setState((state) => ({ showMore: !state.showMore }));
   };
 
   render() {
@@ -56,11 +56,11 @@ export default class SystemUpgradeIntermediate extends React.PureComponent<Props
           <DropdownIcon className="little-spacer-left" turned={showMore} />
         </ButtonLink>
         {showMore &&
-          upgrades.map(upgrade => (
+          upgrades.map((upgrade) => (
             <div className="note system-upgrade-intermediate" key={upgrade.version}>
               {upgrade.releaseDate && (
                 <DateFormatter date={upgrade.releaseDate} long={true}>
-                  {formattedDate => (
+                  {(formattedDate) => (
                     <p>
                       <b className="little-spacer-right">SonarQube {upgrade.version}</b>
                       {formattedDate}
@@ -69,7 +69,8 @@ export default class SystemUpgradeIntermediate extends React.PureComponent<Props
                           className="spacer-left"
                           href={upgrade.changeLogUrl}
                           rel="noopener noreferrer"
-                          target="_blank">
+                          target="_blank"
+                        >
                           {translate('system.release_notes')}
                         </a>
                       )}
diff --git a/server/sonar-web/src/main/js/components/upgrade/SystemUpgradeItem.tsx b/server/sonar-web/src/main/js/components/upgrade/SystemUpgradeItem.tsx
index 7309a165e90..d3d052a2469 100644
--- a/server/sonar-web/src/main/js/components/upgrade/SystemUpgradeItem.tsx
+++ b/server/sonar-web/src/main/js/components/upgrade/SystemUpgradeItem.tsx
@@ -22,7 +22,7 @@ import { FormattedMessage } from 'react-intl';
 import {
   getEdition,
   getEditionDownloadFilename,
-  getEditionDownloadUrl
+  getEditionDownloadUrl,
 } from '../../helpers/editions';
 import { translate, translateWithParameters } from '../../helpers/l10n';
 import { EditionKey } from '../../types/editions';
@@ -60,7 +60,8 @@ export default function SystemUpgradeItem(props: SystemUpgradeItemProps) {
           <Link
             className="spacer-left medium"
             to="https://www.sonarqube.org/whats-new/?referrer=sonarqube"
-            target="_blank">
+            target="_blank"
+          >
             {translate('system.see_whats_new')}
           </Link>
         )}
@@ -76,7 +77,7 @@ export default function SystemUpgradeItem(props: SystemUpgradeItemProps) {
       <div className="big-spacer-top">
         {lastUpgrade.releaseDate && (
           <DateFormatter date={lastUpgrade.releaseDate} long={true}>
-            {formattedDate => (
+            {(formattedDate) => (
               <span>{translateWithParameters('system.released_x', formattedDate)}</span>
             )}
           </DateFormatter>
@@ -94,13 +95,15 @@ export default function SystemUpgradeItem(props: SystemUpgradeItemProps) {
           download={getEditionDownloadFilename(downloadUrl)}
           href={downloadUrl}
           rel="noopener noreferrer"
-          target="_blank">
+          target="_blank"
+        >
           {translateWithParameters('system.download_x', lastUpgrade.version)}
         </a>
         <Link
           className="spacer-left"
           to="https://redirect.sonarsource.com/doc/upgrading.html"
-          target="_blank">
+          target="_blank"
+        >
           {translate('system.how_to_upgrade')}
         </Link>
       </div>
diff --git a/server/sonar-web/src/main/js/components/upgrade/__tests__/SystemUpgradeForm-test.tsx b/server/sonar-web/src/main/js/components/upgrade/__tests__/SystemUpgradeForm-test.tsx
index c3e37a9c693..4fd4054021c 100644
--- a/server/sonar-web/src/main/js/components/upgrade/__tests__/SystemUpgradeForm-test.tsx
+++ b/server/sonar-web/src/main/js/components/upgrade/__tests__/SystemUpgradeForm-test.tsx
@@ -32,7 +32,7 @@ const UPGRADES = [
       releaseDate: '2017-06-02',
       changeLogUrl: 'changelogurl',
       downloadUrl: 'downloadurl',
-      plugins: {}
+      plugins: {},
     },
     {
       version: '6.3',
@@ -40,8 +40,8 @@ const UPGRADES = [
       releaseDate: '2017-05-02',
       changeLogUrl: 'changelogurl',
       downloadUrl: 'downloadurl',
-      plugins: {}
-    }
+      plugins: {},
+    },
   ],
   [
     {
@@ -50,7 +50,7 @@ const UPGRADES = [
       releaseDate: '2017-03-01',
       changeLogUrl: 'changelogurl',
       downloadUrl: 'downloadurl',
-      plugins: {}
+      plugins: {},
     },
     {
       version: '5.6.6',
@@ -58,7 +58,7 @@ const UPGRADES = [
       releaseDate: '2017-04-02',
       changeLogUrl: 'changelogurl',
       downloadUrl: 'downloadurl',
-      plugins: {}
+      plugins: {},
     },
     {
       version: '5.6.5',
@@ -66,14 +66,14 @@ const UPGRADES = [
       releaseDate: '2017-03-01',
       changeLogUrl: 'changelogurl',
       downloadUrl: 'downloadurl',
-      plugins: {}
-    }
-  ]
+      plugins: {},
+    },
+  ],
 ];
 
 it.each([...Object.values(UpdateUseCase), undefined])(
   'should display correctly for %s',
-  updateUseCase => {
+  (updateUseCase) => {
     expect(
       shallow(
         <SystemUpgradeForm
diff --git a/server/sonar-web/src/main/js/components/upgrade/__tests__/SystemUpgradeIntermediate-test.tsx b/server/sonar-web/src/main/js/components/upgrade/__tests__/SystemUpgradeIntermediate-test.tsx
index 5339972200e..2dee570ef8a 100644
--- a/server/sonar-web/src/main/js/components/upgrade/__tests__/SystemUpgradeIntermediate-test.tsx
+++ b/server/sonar-web/src/main/js/components/upgrade/__tests__/SystemUpgradeIntermediate-test.tsx
@@ -29,7 +29,7 @@ const UPGRADES = [
     releaseDate: '2017-04-02',
     changeLogUrl: 'changelogurl',
     downloadUrl: 'downloadurl',
-    plugins: {}
+    plugins: {},
   },
   {
     version: '5.6.5',
@@ -37,8 +37,8 @@ const UPGRADES = [
     releaseDate: '2017-03-01',
     changeLogUrl: 'changelogurl',
     downloadUrl: 'downloadurl',
-    plugins: {}
-  }
+    plugins: {},
+  },
 ];
 
 it('should display correctly', () => {
diff --git a/server/sonar-web/src/main/js/components/upgrade/__tests__/SystemUpgradeItem-test.tsx b/server/sonar-web/src/main/js/components/upgrade/__tests__/SystemUpgradeItem-test.tsx
index 5eafcf10933..74dce40ae20 100644
--- a/server/sonar-web/src/main/js/components/upgrade/__tests__/SystemUpgradeItem-test.tsx
+++ b/server/sonar-web/src/main/js/components/upgrade/__tests__/SystemUpgradeItem-test.tsx
@@ -38,9 +38,9 @@ it('should display correctly', () => {
           description: 'Version 5.6.7 description',
           releaseDate: '2017-03-01',
           changeLogUrl: 'http://changelog.url/',
-          downloadUrl: 'http://download.url/community'
-        }
-      ]
+          downloadUrl: 'http://download.url/community',
+        },
+      ],
     })
   ).toMatchSnapshot();
 });
@@ -58,7 +58,7 @@ function shallowRender(props: Partial<SystemUpgradeItemProps> = {}) {
           downloadUrl: 'http://download.url/community',
           downloadDeveloperUrl: 'http://download.url/developer',
           downloadEnterpriseUrl: 'http://download.url/enterprise',
-          downloadDatacenterUrl: 'http://download.url/datacenter'
+          downloadDatacenterUrl: 'http://download.url/datacenter',
         },
         {
           version: '5.6.6',
@@ -66,7 +66,7 @@ function shallowRender(props: Partial<SystemUpgradeItemProps> = {}) {
           releaseDate: '2017-04-02',
           changeLogUrl: 'http://changelog.url/',
           downloadUrl: 'http://download.url/community',
-          downloadDeveloperUrl: 'http://download.url/developer'
+          downloadDeveloperUrl: 'http://download.url/developer',
         },
         {
           version: '5.6.5',
@@ -74,8 +74,8 @@ function shallowRender(props: Partial<SystemUpgradeItemProps> = {}) {
           releaseDate: '2017-03-01',
           changeLogUrl: 'http://changelog.url/',
           downloadUrl: 'http://download.url/community',
-          downloadDeveloperUrl: 'http://download.url/developer'
-        }
+          downloadDeveloperUrl: 'http://download.url/developer',
+        },
       ]}
       isPatch={false}
       isLTSVersion={false}
diff --git a/server/sonar-web/src/main/js/components/upgrade/__tests__/utils-test.ts b/server/sonar-web/src/main/js/components/upgrade/__tests__/utils-test.ts
index 7c7fb94a219..e9a9149e2e2 100644
--- a/server/sonar-web/src/main/js/components/upgrade/__tests__/utils-test.ts
+++ b/server/sonar-web/src/main/js/components/upgrade/__tests__/utils-test.ts
@@ -27,7 +27,7 @@ describe('sortUpgrades', () => {
         { version: '5.4.2' },
         { version: '5.10' },
         { version: '5.1' },
-        { version: '5.4' }
+        { version: '5.4' },
       ] as SystemUpgrade[])
     ).toEqual([{ version: '5.10' }, { version: '5.4.2' }, { version: '5.4' }, { version: '5.1' }]);
     expect(
@@ -35,7 +35,7 @@ describe('sortUpgrades', () => {
         { version: '5.10' },
         { version: '5.1.2' },
         { version: '6.0' },
-        { version: '6.9' }
+        { version: '6.9' },
       ] as SystemUpgrade[])
     ).toEqual([{ version: '6.9' }, { version: '6.0' }, { version: '5.10' }, { version: '5.1.2' }]);
   });
@@ -48,10 +48,10 @@ describe('groupUpgrades', () => {
         { version: '5.10' },
         { version: '5.4.2' },
         { version: '5.4' },
-        { version: '5.1' }
+        { version: '5.1' },
       ] as SystemUpgrade[])
     ).toEqual([
-      [{ version: '5.10' }, { version: '5.4.2' }, { version: '5.4' }, { version: '5.1' }]
+      [{ version: '5.10' }, { version: '5.4.2' }, { version: '5.4' }, { version: '5.1' }],
     ]);
     expect(
       u.groupUpgrades([
@@ -59,11 +59,11 @@ describe('groupUpgrades', () => {
         { version: '6.7' },
         { version: '6.0' },
         { version: '5.10' },
-        { version: '5.4.2' }
+        { version: '5.4.2' },
       ] as SystemUpgrade[])
     ).toEqual([
       [{ version: '6.9' }, { version: '6.7' }, { version: '6.0' }],
-      [{ version: '5.10' }, { version: '5.4.2' }]
+      [{ version: '5.10' }, { version: '5.4.2' }],
     ]);
   });
 });
diff --git a/server/sonar-web/src/main/js/components/upgrade/utils.ts b/server/sonar-web/src/main/js/components/upgrade/utils.ts
index 6efe5cdffbd..067ddee6c73 100644
--- a/server/sonar-web/src/main/js/components/upgrade/utils.ts
+++ b/server/sonar-web/src/main/js/components/upgrade/utils.ts
@@ -24,19 +24,19 @@ export enum UpdateUseCase {
   NewMinorVersion = 'new_minor_version',
   NewPatch = 'new_patch',
   PreLTS = 'pre_lts',
-  PreviousLTS = 'previous_lts'
+  PreviousLTS = 'previous_lts',
 }
 
 export function sortUpgrades(upgrades: SystemUpgrade[]): SystemUpgrade[] {
   return sortBy(upgrades, [
     (upgrade: SystemUpgrade) => -Number(upgrade.version.split('.')[0]),
     (upgrade: SystemUpgrade) => -Number(upgrade.version.split('.')[1] || 0),
-    (upgrade: SystemUpgrade) => -Number(upgrade.version.split('.')[2] || 0)
+    (upgrade: SystemUpgrade) => -Number(upgrade.version.split('.')[2] || 0),
   ]);
 }
 
 export function groupUpgrades(upgrades: SystemUpgrade[]): SystemUpgrade[][] {
-  const groupedVersions = groupBy(upgrades, upgrade => upgrade.version.split('.')[0]);
-  const sortedMajor = sortBy(Object.keys(groupedVersions), key => -Number(key));
-  return sortedMajor.map(key => groupedVersions[key]);
+  const groupedVersions = groupBy(upgrades, (upgrade) => upgrade.version.split('.')[0]);
+  const sortedMajor = sortBy(Object.keys(groupedVersions), (key) => -Number(key));
+  return sortedMajor.map((key) => groupedVersions[key]);
 }
diff --git a/server/sonar-web/src/main/js/components/workspace/Workspace.tsx b/server/sonar-web/src/main/js/components/workspace/Workspace.tsx
index d8436587217..137d976e9f4 100644
--- a/server/sonar-web/src/main/js/components/workspace/Workspace.tsx
+++ b/server/sonar-web/src/main/js/components/workspace/Workspace.tsx
@@ -46,7 +46,7 @@ export const INITIAL_HEIGHT = 300;
 export const TYPE_KEY = '__type__';
 export enum WorkspaceTypes {
   Rule = 'rule',
-  Component = 'component'
+  Component = 'component',
 }
 
 export default class Workspace extends React.PureComponent<{}, State> {
@@ -58,7 +58,7 @@ export default class Workspace extends React.PureComponent<{}, State> {
       externalRulesRepoNames: {},
       height: INITIAL_HEIGHT,
       open: {},
-      ...this.loadWorkspace()
+      ...this.loadWorkspace(),
     };
   }
 
@@ -92,9 +92,9 @@ export default class Workspace extends React.PureComponent<{}, State> {
     try {
       const data: any[] = JSON.parse(get(WORKSPACE) || '');
       const components: ComponentDescriptor[] = data.filter(
-        x => x[TYPE_KEY] === WorkspaceTypes.Component
+        (x) => x[TYPE_KEY] === WorkspaceTypes.Component
       );
-      const rules: RuleDescriptor[] = data.filter(x => x[TYPE_KEY] === WorkspaceTypes.Rule);
+      const rules: RuleDescriptor[] = data.filter((x) => x[TYPE_KEY] === WorkspaceTypes.Rule);
       return { components, rules };
     } catch {
       // Fail silently.
@@ -106,18 +106,18 @@ export default class Workspace extends React.PureComponent<{}, State> {
     const data = [
       // Do not save line number, next time the file is open, it should be open
       // on the first line.
-      ...this.state.components.map(x =>
+      ...this.state.components.map((x) =>
         omit({ ...x, [TYPE_KEY]: WorkspaceTypes.Component }, 'line')
       ),
-      ...this.state.rules.map(x => ({ ...x, [TYPE_KEY]: WorkspaceTypes.Rule }))
+      ...this.state.rules.map((x) => ({ ...x, [TYPE_KEY]: WorkspaceTypes.Rule })),
     ];
     save(WORKSPACE, JSON.stringify(data));
   };
 
   handleOpenComponent = (component: ComponentDescriptor) => {
     this.setState((state: State) => ({
-      components: uniqBy([...state.components, component], c => c.key),
-      open: { component: component.key }
+      components: uniqBy([...state.components, component], (c) => c.key),
+      open: { component: component.key },
     }));
   };
 
@@ -128,7 +128,7 @@ export default class Workspace extends React.PureComponent<{}, State> {
   handleOpenRule = (rule: RuleDescriptor) => {
     this.setState((state: State) => ({
       open: { rule: rule.key },
-      rules: uniqBy([...state.rules, rule], r => r.key)
+      rules: uniqBy([...state.rules, rule], (r) => r.key),
     }));
   };
 
@@ -138,21 +138,21 @@ export default class Workspace extends React.PureComponent<{}, State> {
 
   handleComponentClose = (componentKey: string) => {
     this.setState((state: State) => ({
-      components: state.components.filter(x => x.key !== componentKey),
+      components: state.components.filter((x) => x.key !== componentKey),
       open: {
         ...state.open,
-        component: state.open.component === componentKey ? undefined : state.open.component
-      }
+        component: state.open.component === componentKey ? undefined : state.open.component,
+      },
     }));
   };
 
   handleRuleClose = (ruleKey: string) => {
     this.setState((state: State) => ({
-      rules: state.rules.filter(x => x.key !== ruleKey),
+      rules: state.rules.filter((x) => x.key !== ruleKey),
       open: {
         ...state.open,
-        rule: state.open.rule === ruleKey ? undefined : state.open.rule
-      }
+        rule: state.open.rule === ruleKey ? undefined : state.open.rule,
+      },
     }));
   };
 
@@ -160,9 +160,9 @@ export default class Workspace extends React.PureComponent<{}, State> {
     if (this.mounted) {
       const { key, name, qualifier } = details;
       this.setState((state: State) => ({
-        components: state.components.map(component =>
+        components: state.components.map((component) =>
           component.key === key ? { ...component, name, qualifier } : component
-        )
+        ),
       }));
     }
   };
@@ -171,7 +171,7 @@ export default class Workspace extends React.PureComponent<{}, State> {
     if (this.mounted) {
       const { key, name } = details;
       this.setState((state: State) => ({
-        rules: state.rules.map(rule => (rule.key === key ? { ...rule, name } : rule))
+        rules: state.rules.map((rule) => (rule.key === key ? { ...rule, name } : rule)),
       }));
     }
   };
@@ -192,15 +192,15 @@ export default class Workspace extends React.PureComponent<{}, State> {
     const minHeight = window.innerHeight * MIN_HEIGHT;
     const maxHeight = window.innerHeight * MAX_HEIGHT;
     this.setState((state: State) => ({
-      height: Math.min(maxHeight, Math.max(minHeight, state.height - deltaY))
+      height: Math.min(maxHeight, Math.max(minHeight, state.height - deltaY)),
     }));
   };
 
   render() {
     const { components, externalRulesRepoNames, height, maximized, open, rules } = this.state;
 
-    const openComponent = open.component && components.find(x => x.key === open.component);
-    const openRule = open.rule && rules.find(x => x.key === open.rule);
+    const openComponent = open.component && components.find((x) => x.key === open.component);
+    const openRule = open.rule && rules.find((x) => x.key === open.rule);
 
     const actualHeight = maximized ? window.innerHeight * MAX_HEIGHT : height;
 
@@ -209,8 +209,9 @@ export default class Workspace extends React.PureComponent<{}, State> {
         value={{
           externalRulesRepoNames,
           openComponent: this.handleOpenComponent,
-          openRule: this.handleOpenRule
-        }}>
+          openRule: this.handleOpenRule,
+        }}
+      >
         {this.props.children}
         <WorkspacePortal>
           {(components.length > 0 || rules.length > 0) && (
diff --git a/server/sonar-web/src/main/js/components/workspace/WorkspaceComponentViewer.tsx b/server/sonar-web/src/main/js/components/workspace/WorkspaceComponentViewer.tsx
index d7561d6e604..d80f32b8694 100644
--- a/server/sonar-web/src/main/js/components/workspace/WorkspaceComponentViewer.tsx
+++ b/server/sonar-web/src/main/js/components/workspace/WorkspaceComponentViewer.tsx
@@ -70,7 +70,7 @@ export class WorkspaceComponentViewer extends React.PureComponent<Props> {
     this.props.onLoad({
       key: this.props.component.key,
       name: component.path,
-      qualifier: component.q
+      qualifier: component.q,
     });
 
     if (this.container && this.props.component.line) {
@@ -82,7 +82,7 @@ export class WorkspaceComponentViewer extends React.PureComponent<Props> {
           smooth: false,
           parent: this.container,
           topOffset: 50,
-          bottomOffset: 50
+          bottomOffset: 50,
         });
       }
     }
@@ -114,14 +114,16 @@ export class WorkspaceComponentViewer extends React.PureComponent<Props> {
           onCollapse={this.props.onCollapse}
           onMaximize={this.props.onMaximize}
           onMinimize={this.props.onMinimize}
-          onResize={this.props.onResize}>
+          onResize={this.props.onResize}
+        >
           <WorkspaceComponentTitle component={component} />
         </WorkspaceHeader>
 
         <div
           className="workspace-viewer-container"
-          ref={node => (this.container = node)}
-          style={{ height: this.props.height }}>
+          ref={(node) => (this.container = node)}
+          style={{ height: this.props.height }}
+        >
           <SourceViewer
             aroundLine={component.line}
             branchLike={component.branchLike}
diff --git a/server/sonar-web/src/main/js/components/workspace/WorkspaceHeader.tsx b/server/sonar-web/src/main/js/components/workspace/WorkspaceHeader.tsx
index bd6231f5895..3a9d3bce65a 100644
--- a/server/sonar-web/src/main/js/components/workspace/WorkspaceHeader.tsx
+++ b/server/sonar-web/src/main/js/components/workspace/WorkspaceHeader.tsx
@@ -96,7 +96,8 @@ function WorkspaceHeaderButton({ icon: Icon, onClick, tooltip }: WorkspaceHeader
       aria-label={translate(tooltip)}
       color="#fff"
       onClick={onClick}
-      tooltip={translate(tooltip)}>
+      tooltip={translate(tooltip)}
+    >
       <Icon fill={undefined} />
     </ButtonIcon>
   );
diff --git a/server/sonar-web/src/main/js/components/workspace/WorkspaceNav.tsx b/server/sonar-web/src/main/js/components/workspace/WorkspaceNav.tsx
index a871615957a..90b2d1c4ba3 100644
--- a/server/sonar-web/src/main/js/components/workspace/WorkspaceNav.tsx
+++ b/server/sonar-web/src/main/js/components/workspace/WorkspaceNav.tsx
@@ -34,13 +34,13 @@ export interface Props {
 
 export default function WorkspaceNav(props: Props) {
   // do not show a tab for the currently open component/rule
-  const components = props.components.filter(x => x.key !== props.open.component);
-  const rules = props.rules.filter(x => x.key !== props.open.rule);
+  const components = props.components.filter((x) => x.key !== props.open.component);
+  const rules = props.rules.filter((x) => x.key !== props.open.rule);
 
   return (
     <nav className="workspace-nav">
       <ul className="workspace-nav-list">
-        {components.map(component => (
+        {components.map((component) => (
           <WorkspaceNavComponent
             component={component}
             key={`component-${component.key}`}
@@ -49,7 +49,7 @@ export default function WorkspaceNav(props: Props) {
           />
         ))}
 
-        {rules.map(rule => (
+        {rules.map((rule) => (
           <WorkspaceNavRule
             key={`rule-${rule.key}`}
             onClose={props.onRuleClose}
diff --git a/server/sonar-web/src/main/js/components/workspace/WorkspaceRuleDetails.tsx b/server/sonar-web/src/main/js/components/workspace/WorkspaceRuleDetails.tsx
index da52035ccfe..c617cde57db 100644
--- a/server/sonar-web/src/main/js/components/workspace/WorkspaceRuleDetails.tsx
+++ b/server/sonar-web/src/main/js/components/workspace/WorkspaceRuleDetails.tsx
@@ -64,7 +64,7 @@ export default class WorkspaceRuleDetails extends React.PureComponent<Props, Sta
           this.setState({
             loading: false,
             referencedRepositories: keyBy(repositories, 'key'),
-            ruleDetails: rule
+            ruleDetails: rule,
           });
           this.props.onLoad({ name: rule.name });
         }
diff --git a/server/sonar-web/src/main/js/components/workspace/WorkspaceRuleViewer.tsx b/server/sonar-web/src/main/js/components/workspace/WorkspaceRuleViewer.tsx
index 3b4f04aba2f..8d70b796fc7 100644
--- a/server/sonar-web/src/main/js/components/workspace/WorkspaceRuleViewer.tsx
+++ b/server/sonar-web/src/main/js/components/workspace/WorkspaceRuleViewer.tsx
@@ -67,7 +67,8 @@ export default class WorkspaceRuleViewer extends React.PureComponent<Props> {
           onCollapse={this.props.onCollapse}
           onMaximize={this.props.onMaximize}
           onMinimize={this.props.onMinimize}
-          onResize={this.props.onResize}>
+          onResize={this.props.onResize}
+        >
           <WorkspaceRuleTitle rule={rule} />
         </WorkspaceHeader>
 
@@ -75,7 +76,8 @@ export default class WorkspaceRuleViewer extends React.PureComponent<Props> {
           aria-busy={loading}
           aria-live="polite"
           className="workspace-viewer-container"
-          style={{ height: this.props.height }}>
+          style={{ height: this.props.height }}
+        >
           <WorkspaceRuleDetails onLoad={this.handleLoaded} ruleKey={rule.key} />
         </div>
       </div>
diff --git a/server/sonar-web/src/main/js/components/workspace/__tests__/Workspace-test.tsx b/server/sonar-web/src/main/js/components/workspace/__tests__/Workspace-test.tsx
index e0af3862b5b..f4df4309a82 100644
--- a/server/sonar-web/src/main/js/components/workspace/__tests__/Workspace-test.tsx
+++ b/server/sonar-web/src/main/js/components/workspace/__tests__/Workspace-test.tsx
@@ -28,13 +28,13 @@ import Workspace, {
   MAX_HEIGHT,
   MIN_HEIGHT,
   TYPE_KEY,
-  WorkspaceTypes
+  WorkspaceTypes,
 } from '../Workspace';
 
 jest.mock('../../../helpers/storage', () => {
   return {
     get: jest.fn(),
-    save: jest.fn()
+    save: jest.fn(),
   };
 });
 
@@ -42,9 +42,9 @@ jest.mock('../../../api/rules', () => ({
   getRulesApp: jest.fn().mockResolvedValue({
     repositories: [
       { key: 'foo', name: 'Foo' },
-      { key: 'external_bar', name: 'Bar' }
-    ]
-  })
+      { key: 'external_bar', name: 'Bar' },
+    ],
+  }),
 }));
 
 const WINDOW_HEIGHT = 1000;
@@ -54,7 +54,7 @@ beforeAll(() => {
   Object.defineProperty(window, 'innerHeight', {
     writable: true,
     configurable: true,
-    value: WINDOW_HEIGHT
+    value: WINDOW_HEIGHT,
   });
 });
 
@@ -62,7 +62,7 @@ afterAll(() => {
   Object.defineProperty(window, 'innerHeight', {
     writable: true,
     configurable: true,
-    value: originalHeight
+    value: originalHeight,
   });
 });
 
@@ -73,13 +73,13 @@ it('should render correctly', () => {
   expect(
     shallowRender({
       components: [{ branchLike: mockBranch(), key: 'foo' }],
-      open: { component: 'foo' }
+      open: { component: 'foo' },
     })
   ).toMatchSnapshot('open component');
   expect(
     shallowRender({
       rules: [{ key: 'foo' }],
-      open: { rule: 'foo' }
+      open: { rule: 'foo' },
     })
   ).toMatchSnapshot('open rule');
 });
@@ -89,12 +89,12 @@ it('should correctly load data from local storage', () => {
   const rule2 = {
     [TYPE_KEY]: WorkspaceTypes.Rule,
     key: 'baz',
-    name: 'Baz'
+    name: 'Baz',
   };
   const component = {
     [TYPE_KEY]: WorkspaceTypes.Component,
     branchLike: mockBranch(),
-    key: 'foo'
+    key: 'foo',
   };
   (get as jest.Mock).mockReturnValue(JSON.stringify([rule1, rule2, component]));
 
@@ -113,7 +113,7 @@ it('should correctly load data from local storage', () => {
 it('should correctly store data locally', () => {
   const wrapper = shallowRender({
     components: [{ branchLike: mockBranch(), key: 'foo' }],
-    rules: [{ key: 'foo' }]
+    rules: [{ key: 'foo' }],
   });
   wrapper.instance().saveWorkspace();
   expect((save as jest.Mock).mock.calls[0][1]).toMatchSnapshot();
@@ -130,7 +130,7 @@ it('should allow elements to be loaded and updated', () => {
   const rule = { key: 'bar' };
   const wrapper = shallowRender({
     components: [component],
-    rules: [rule]
+    rules: [rule],
   });
   const instance = wrapper.instance();
 
@@ -147,7 +147,7 @@ it('should allow elements to be loaded and updated', () => {
 
   instance.handleComponentLoad({ key: 'foo', name: 'Foo', qualifier: ComponentQualifier.File });
   expect(wrapper.state().components).toEqual([
-    { ...component, name: 'Foo', qualifier: ComponentQualifier.File }
+    { ...component, name: 'Foo', qualifier: ComponentQualifier.File },
   ]);
 });
 
@@ -178,11 +178,11 @@ it('should be resizable', () => {
 it('should be openable/collapsible', () => {
   const rule = {
     key: 'baz',
-    name: 'Baz'
+    name: 'Baz',
   };
   const component = {
     branchLike: mockBranch(),
-    key: 'foo'
+    key: 'foo',
   };
   const wrapper = shallowRender();
   const instance = wrapper.instance();
diff --git a/server/sonar-web/src/main/js/components/workspace/__tests__/WorkspaceComponentViewer-test.tsx b/server/sonar-web/src/main/js/components/workspace/__tests__/WorkspaceComponentViewer-test.tsx
index b99ef855691..92db51d851a 100644
--- a/server/sonar-web/src/main/js/components/workspace/__tests__/WorkspaceComponentViewer-test.tsx
+++ b/server/sonar-web/src/main/js/components/workspace/__tests__/WorkspaceComponentViewer-test.tsx
@@ -26,7 +26,7 @@ import { waitAndUpdate } from '../../../helpers/testUtils';
 import { Props, WorkspaceComponentViewer } from '../WorkspaceComponentViewer';
 
 jest.mock('../../../api/components', () => ({
-  getParents: jest.fn().mockResolvedValue([{ key: 'bar' }])
+  getParents: jest.fn().mockResolvedValue([{ key: 'bar' }]),
 }));
 
 beforeEach(() => {
@@ -50,7 +50,7 @@ it('should call back after load', () => {
   wrapper.find('[onLoaded]').prop<Function>('onLoaded')({
     key: 'foo',
     path: 'src/foo.js',
-    q: 'FIL'
+    q: 'FIL',
   });
   expect(onLoad).toHaveBeenCalledWith({ key: 'foo', name: 'src/foo.js', qualifier: 'FIL' });
 });
@@ -60,7 +60,7 @@ it('should refresh branch status if issues are updated', async () => {
   const branchLike = mockPullRequest();
   const component = {
     branchLike,
-    key: 'foo'
+    key: 'foo',
   };
   const wrapper = shallowRender({ component, fetchBranchStatus });
   const instance = wrapper.instance();
diff --git a/server/sonar-web/src/main/js/components/workspace/__tests__/WorkspaceHeader-test.tsx b/server/sonar-web/src/main/js/components/workspace/__tests__/WorkspaceHeader-test.tsx
index bee32547a64..9cea01ae44d 100644
--- a/server/sonar-web/src/main/js/components/workspace/__tests__/WorkspaceHeader-test.tsx
+++ b/server/sonar-web/src/main/js/components/workspace/__tests__/WorkspaceHeader-test.tsx
@@ -40,7 +40,8 @@ function shallowRender(props?: Partial<Props>) {
       onMaximize={jest.fn()}
       onMinimize={jest.fn()}
       onResize={jest.fn()}
-      {...props}>
+      {...props}
+    >
       <div id="workspace-header-children" />
     </WorkspaceHeader>
   );
diff --git a/server/sonar-web/src/main/js/components/workspace/__tests__/WorkspaceNav-test.tsx b/server/sonar-web/src/main/js/components/workspace/__tests__/WorkspaceNav-test.tsx
index bbffb889d67..e434e85aa6f 100644
--- a/server/sonar-web/src/main/js/components/workspace/__tests__/WorkspaceNav-test.tsx
+++ b/server/sonar-web/src/main/js/components/workspace/__tests__/WorkspaceNav-test.tsx
@@ -36,7 +36,7 @@ it('should not render open rule', () => {
 function shallowRender(props?: Partial<Props>) {
   const components = [
     { branchLike: undefined, key: 'foo' },
-    { branchLike: undefined, key: 'bar' }
+    { branchLike: undefined, key: 'bar' },
   ];
   const rules = [{ key: 'qux' }];
   return shallow(
diff --git a/server/sonar-web/src/main/js/components/workspace/__tests__/WorkspaceRuleDetails-test.tsx b/server/sonar-web/src/main/js/components/workspace/__tests__/WorkspaceRuleDetails-test.tsx
index ea1b1f01ab2..d6bd29cf3db 100644
--- a/server/sonar-web/src/main/js/components/workspace/__tests__/WorkspaceRuleDetails-test.tsx
+++ b/server/sonar-web/src/main/js/components/workspace/__tests__/WorkspaceRuleDetails-test.tsx
@@ -26,7 +26,7 @@ jest.mock('../../../api/rules', () => ({
   getRulesApp: jest.fn(() =>
     Promise.resolve({ repositories: [{ key: 'repo', language: 'xoo', name: 'Xoo Repository' }] })
   ),
-  getRuleDetails: jest.fn(() => Promise.resolve({ rule: { key: 'foo', name: 'Foo' } }))
+  getRuleDetails: jest.fn(() => Promise.resolve({ rule: { key: 'foo', name: 'Foo' } })),
 }));
 
 it('should render', async () => {
diff --git a/server/sonar-web/src/main/js/components/workspace/__tests__/WorkspaceRuleViewer-test.tsx b/server/sonar-web/src/main/js/components/workspace/__tests__/WorkspaceRuleViewer-test.tsx
index b800108cd59..ddd892b18e3 100644
--- a/server/sonar-web/src/main/js/components/workspace/__tests__/WorkspaceRuleViewer-test.tsx
+++ b/server/sonar-web/src/main/js/components/workspace/__tests__/WorkspaceRuleViewer-test.tsx
@@ -67,7 +67,7 @@ it('should close', () => {
 it('should call back after load', () => {
   const onLoad = jest.fn();
   const wrapper = shallowRender({ onLoad });
-  const details = wrapper.findWhere(w => w.name().includes('WorkspaceRuleDetails'));
+  const details = wrapper.findWhere((w) => w.name().includes('WorkspaceRuleDetails'));
   details.prop<Function>('onLoad')({ name: 'Foo' });
   expect(onLoad).toHaveBeenCalledWith({ key: 'foo', name: 'Foo' });
 });
diff --git a/server/sonar-web/src/main/js/components/workspace/context.ts b/server/sonar-web/src/main/js/components/workspace/context.ts
index 0b84601c52b..8e305610f20 100644
--- a/server/sonar-web/src/main/js/components/workspace/context.ts
+++ b/server/sonar-web/src/main/js/components/workspace/context.ts
@@ -43,5 +43,5 @@ export interface WorkspaceContextShape {
 export const WorkspaceContext = createContext<WorkspaceContextShape>({
   externalRulesRepoNames: {},
   openComponent: () => {},
-  openRule: () => {}
+  openRule: () => {},
 });