From: Kevin Silva <kevin.silva@sonarsource.com>
Date: Mon, 5 Jun 2023 08:15:49 +0000 (+0200)
Subject: SONAR-19345 - Update list issues for MIUI
X-Git-Tag: 10.1.0.73491~118
X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=cbd8e9fb6445a14cc0689e862c3a942f08a0ada7;p=sonarqube.git

SONAR-19345 - Update list issues for MIUI
---

diff --git a/server/sonar-web/design-system/src/components/InputSelect.tsx b/server/sonar-web/design-system/src/components/InputSelect.tsx
index bac391c1716..906203174dd 100644
--- a/server/sonar-web/design-system/src/components/InputSelect.tsx
+++ b/server/sonar-web/design-system/src/components/InputSelect.tsx
@@ -127,10 +127,9 @@ export function InputSelect<
             'sw-absolut sw-box-border sw-rounded-2 sw-overflow-hidden',
             isDisabled && 'sw-pointer-events-none sw-cursor-not-allowed'
           ),
-        menu: () => 'sw-z-dropdown-menu',
         option: ({ isDisabled }) =>
           classNames(
-            'sw-py-2 sw-px-3 sw-cursor-pointer',
+            'it__select-option sw-py-2 sw-px-3 sw-cursor-pointer',
             isDisabled && 'sw-pointer-events-none sw-cursor-not-allowed'
           ),
         ...props.classNames,
diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/StandardFacet.tsx b/server/sonar-web/src/main/js/apps/coding-rules/components/StandardFacet.tsx
index 2e63ec94fae..28f61ce9234 100644
--- a/server/sonar-web/src/main/js/apps/coding-rules/components/StandardFacet.tsx
+++ b/server/sonar-web/src/main/js/apps/coding-rules/components/StandardFacet.tsx
@@ -378,7 +378,7 @@ export class StandardFacet extends React.PureComponent<Props, State> {
             <FacetItemsList labelledby={this.getFacetHeaderId(SecurityStandard.SONARSOURCE)}>
               {selectedBelowLimit.map((item) => (
                 <FacetItem
-                  active={true}
+                  active
                   key={item}
                   name={renderSonarSourceSecurityCategory(this.state.standards, item)}
                   onClick={this.handleSonarSourceSecurityItemClick}
diff --git a/server/sonar-web/src/main/js/apps/issues/__tests__/IssuesApp-it.tsx b/server/sonar-web/src/main/js/apps/issues/__tests__/IssuesApp-it.tsx
index 336135bf760..dc72fc139bb 100644
--- a/server/sonar-web/src/main/js/apps/issues/__tests__/IssuesApp-it.tsx
+++ b/server/sonar-web/src/main/js/apps/issues/__tests__/IssuesApp-it.tsx
@@ -209,10 +209,10 @@ describe('issues app', () => {
       const user = userEvent.setup();
       renderIssueApp();
 
-      await user.click(await ui.issueItem5.find());
+      await user.click(await ui.issueItemAction5.find());
       expect(ui.projectIssueItem6.getAll()).toHaveLength(2); // there will be 2 buttons one in concise issue and other in code viewer
 
-      await user.click(ui.issueItemAction6.get());
+      await user.click(ui.projectIssueItem6.getAll()[1]);
       expect(screen.getByRole('heading', { level: 1, name: 'Second issue' })).toBeInTheDocument();
     });
 
diff --git a/server/sonar-web/src/main/js/apps/issues/components/BulkChangeModal.tsx b/server/sonar-web/src/main/js/apps/issues/components/BulkChangeModal.tsx
index 5e47667161a..9ca54897266 100644
--- a/server/sonar-web/src/main/js/apps/issues/components/BulkChangeModal.tsx
+++ b/server/sonar-web/src/main/js/apps/issues/components/BulkChangeModal.tsx
@@ -483,7 +483,7 @@ export default class BulkChangeModal extends React.PureComponent<Props, State> {
             ? translate('bulk_change')
             : translateWithParameters('issue_bulk_change.form.title', issues.length)
         }
-        isScrollable={true}
+        isScrollable
         loading={submitting}
         body={this.renderForm()}
         primaryButton={
diff --git a/server/sonar-web/src/main/js/apps/issues/components/IssueHeader.tsx b/server/sonar-web/src/main/js/apps/issues/components/IssueHeader.tsx
index 91a9824f9ac..8f61c516b0a 100644
--- a/server/sonar-web/src/main/js/apps/issues/components/IssueHeader.tsx
+++ b/server/sonar-web/src/main/js/apps/issues/components/IssueHeader.tsx
@@ -150,7 +150,7 @@ export default class IssueHeader extends React.PureComponent<Props, State> {
             aria-label={translate('permalink')}
             className="sw-ml-1 sw-align-bottom"
             copyValue={getPathUrlAsString(issueUrl, false)}
-            discreet={true}
+            discreet
           />
         </div>
         <div className="sw-flex sw-items-center sw-justify-between">
diff --git a/server/sonar-web/src/main/js/apps/issues/components/IssuesApp.tsx b/server/sonar-web/src/main/js/apps/issues/components/IssuesApp.tsx
index 215becb13da..2e578793b04 100644
--- a/server/sonar-web/src/main/js/apps/issues/components/IssuesApp.tsx
+++ b/server/sonar-web/src/main/js/apps/issues/components/IssuesApp.tsx
@@ -1129,7 +1129,7 @@ export class App extends React.PureComponent<Props, State> {
             }}
             loading={loadingMore}
             total={paging.total}
-            useMIUIButtons={true}
+            useMIUIButtons
           />
         )}
 
diff --git a/server/sonar-web/src/main/js/apps/issues/components/ListItem.tsx b/server/sonar-web/src/main/js/apps/issues/components/ListItem.tsx
index db287f5c81d..f0b1af18a55 100644
--- a/server/sonar-web/src/main/js/apps/issues/components/ListItem.tsx
+++ b/server/sonar-web/src/main/js/apps/issues/components/ListItem.tsx
@@ -17,8 +17,6 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import styled from '@emotion/styled';
-import { themeBorder, themeColor } from 'design-system';
 import * as React from 'react';
 import Issue from '../../../components/issue/Issue';
 import { BranchLike } from '../../../types/branch-like';
@@ -39,22 +37,6 @@ interface Props {
 }
 
 export default class ListItem extends React.PureComponent<Props> {
-  nodeRef: HTMLLIElement | null = null;
-
-  componentDidMount() {
-    const { selected } = this.props;
-    if (this.nodeRef && selected) {
-      this.nodeRef.scrollIntoView({ block: 'center', inline: 'center' });
-    }
-  }
-
-  componentDidUpdate(prevProps: Props) {
-    const { selected } = this.props;
-    if (!prevProps.selected && selected && this.nodeRef) {
-      this.nodeRef.scrollIntoView({ block: 'center', inline: 'center' });
-    }
-  }
-
   handleFilter = (property: string, issue: TypeIssue) => {
     const { onFilterChange } = this.props;
 
@@ -104,38 +86,17 @@ export default class ListItem extends React.PureComponent<Props> {
     const { branchLike, issue } = this.props;
 
     return (
-      <IssueItem ref={(node) => (this.nodeRef = node)}>
-        <Issue
-          branchLike={branchLike}
-          checked={this.props.checked}
-          issue={issue}
-          onChange={this.props.onChange}
-          onCheck={this.props.onCheck}
-          onClick={this.props.onClick}
-          onPopupToggle={this.props.onPopupToggle}
-          openPopup={this.props.openPopup}
-          selected={this.props.selected}
-        />
-      </IssueItem>
+      <Issue
+        branchLike={branchLike}
+        checked={this.props.checked}
+        issue={issue}
+        onChange={this.props.onChange}
+        onCheck={this.props.onCheck}
+        onClick={this.props.onClick}
+        onPopupToggle={this.props.onPopupToggle}
+        openPopup={this.props.openPopup}
+        selected={this.props.selected}
+      />
     );
   }
 }
-
-const IssueItem = styled.li`
-  box-sizing: border-box;
-  border: ${themeBorder('default', 'transparent')};
-  border-top: ${themeBorder('default')};
-  outline: none;
-
-  &.selected {
-    border: ${themeBorder('default', 'tableRowSelected')};
-  }
-
-  &:hover {
-    background: ${themeColor('tableRowHover')};
-  }
-
-  &:last-child {
-    border-bottom: ${themeBorder('default')};
-  }
-`;
diff --git a/server/sonar-web/src/main/js/apps/issues/components/TagsSelect.tsx b/server/sonar-web/src/main/js/apps/issues/components/TagsSelect.tsx
index 19a5d7dffd6..7956a5947ae 100644
--- a/server/sonar-web/src/main/js/apps/issues/components/TagsSelect.tsx
+++ b/server/sonar-web/src/main/js/apps/issues/components/TagsSelect.tsx
@@ -63,7 +63,7 @@ export default function TagsSelect(props: Props) {
 
   return (
     <Dropdown
-      allowResizing={true}
+      allowResizing
       closeOnClick={false}
       id="tag-selector"
       overlay={
diff --git a/server/sonar-web/src/main/js/apps/issues/issues-subnavigation/IssueLocationsCrossFile.tsx b/server/sonar-web/src/main/js/apps/issues/issues-subnavigation/IssueLocationsCrossFile.tsx
index aa65b807957..816aa025369 100644
--- a/server/sonar-web/src/main/js/apps/issues/issues-subnavigation/IssueLocationsCrossFile.tsx
+++ b/server/sonar-web/src/main/js/apps/issues/issues-subnavigation/IssueLocationsCrossFile.tsx
@@ -172,9 +172,9 @@ export default class IssueLocationsCrossFile extends PureComponent<Props, State>
           {this.renderGroup(firstGroup, 0, { onlyFirst: true })}
           <div>
             <ExpandLink
-              blurAfterClick={true}
+              blurAfterClick
               onClick={this.handleMoreLocationsClick}
-              preventDefault={true}
+              preventDefault
               to={{}}
             >
               {translateWithParameters(
diff --git a/server/sonar-web/src/main/js/apps/issues/issues-subnavigation/IssueLocationsNavigator.tsx b/server/sonar-web/src/main/js/apps/issues/issues-subnavigation/IssueLocationsNavigator.tsx
index 8cfadabd40e..bfcf853f0ad 100644
--- a/server/sonar-web/src/main/js/apps/issues/issues-subnavigation/IssueLocationsNavigator.tsx
+++ b/server/sonar-web/src/main/js/apps/issues/issues-subnavigation/IssueLocationsNavigator.tsx
@@ -126,7 +126,7 @@ export default function IssueLocationsNavigator(props: Props) {
             </ExecutionFlowAccordion>
           ))}
         </div>
-        <IssueLocationsNavigatorKeyboardHint showLeftRightHint={true} />
+        <IssueLocationsNavigatorKeyboardHint showLeftRightHint />
       </>
     );
   }
diff --git a/server/sonar-web/src/main/js/apps/issues/issues-subnavigation/SubnavigationIssuesList.tsx b/server/sonar-web/src/main/js/apps/issues/issues-subnavigation/SubnavigationIssuesList.tsx
index 675540f90c4..4366881c23b 100644
--- a/server/sonar-web/src/main/js/apps/issues/issues-subnavigation/SubnavigationIssuesList.tsx
+++ b/server/sonar-web/src/main/js/apps/issues/issues-subnavigation/SubnavigationIssuesList.tsx
@@ -95,7 +95,7 @@ export default function SubnavigationIssuesList(props: Props) {
           loadMore={props.fetchMoreIssues}
           loading={loadingMore}
           total={paging.total}
-          useMIUIButtons={true}
+          useMIUIButtons
         />
       )}
     </StyledWrapper>
diff --git a/server/sonar-web/src/main/js/apps/issues/sidebar/ListStyleFacet.tsx b/server/sonar-web/src/main/js/apps/issues/sidebar/ListStyleFacet.tsx
index 1c617479e6d..721d3ce4835 100644
--- a/server/sonar-web/src/main/js/apps/issues/sidebar/ListStyleFacet.tsx
+++ b/server/sonar-web/src/main/js/apps/issues/sidebar/ListStyleFacet.tsx
@@ -311,7 +311,7 @@ export class ListStyleFacet<S> extends React.Component<Props<S>, State<S>> {
             <FacetItemsList labelledby={this.getFacetHeaderId(property)}>
               {selectedBelowLimit.map((item) => (
                 <FacetItem
-                  active={true}
+                  active
                   className="it__search-navigator-facet"
                   key={item}
                   name={this.props.renderFacetItem(item)}
@@ -399,7 +399,7 @@ export class ListStyleFacet<S> extends React.Component<Props<S>, State<S>> {
             loadMoreAriaLabel={showMoreAriaLabel}
             ready={!searching}
             total={searchPaging.total}
-            useMIUIButtons={true}
+            useMIUIButtons
           />
         )}
       </>
diff --git a/server/sonar-web/src/main/js/apps/issues/sidebar/StandardFacet.tsx b/server/sonar-web/src/main/js/apps/issues/sidebar/StandardFacet.tsx
index 14094df8104..0fba1b26538 100644
--- a/server/sonar-web/src/main/js/apps/issues/sidebar/StandardFacet.tsx
+++ b/server/sonar-web/src/main/js/apps/issues/sidebar/StandardFacet.tsx
@@ -474,7 +474,7 @@ export class StandardFacet extends React.PureComponent<Props, State> {
             className="it__search-navigator-facet-box it__search-navigator-facet-header"
             data-property={property}
             id={this.getFacetHeaderId(property)}
-            inner={true}
+            inner
             key={property}
             name={translate(`issues.facet.${name}`)}
             open={open}
@@ -489,7 +489,7 @@ export class StandardFacet extends React.PureComponent<Props, State> {
           fetching={fetchingCwe}
           getFacetItemText={(item) => renderCWECategory(this.state.standards, item)}
           getSearchResultText={(item) => renderCWECategory(this.state.standards, item)}
-          inner={true}
+          inner
           loadSearchResultCount={this.loadCWESearchResultCount}
           onChange={this.props.onChange}
           onSearch={this.handleCWESearch}
@@ -521,7 +521,7 @@ export class StandardFacet extends React.PureComponent<Props, State> {
         count={count}
         countLabel={translateWithParameters('x_selected', count)}
         data-property={this.property}
-        hasEmbeddedFacets={true}
+        hasEmbeddedFacets
         id={this.getFacetHeaderId(this.property)}
         name={translate('issues.facet', this.property)}
         onClear={this.handleClear}
diff --git a/server/sonar-web/src/main/js/apps/issues/sidebar/__tests__/ListStyleFacet-test.tsx b/server/sonar-web/src/main/js/apps/issues/sidebar/__tests__/ListStyleFacet-test.tsx
index 7d701f6f9cf..9f5b8a0e040 100644
--- a/server/sonar-web/src/main/js/apps/issues/sidebar/__tests__/ListStyleFacet-test.tsx
+++ b/server/sonar-web/src/main/js/apps/issues/sidebar/__tests__/ListStyleFacet-test.tsx
@@ -200,7 +200,7 @@ function shallowRender(props: Partial<Props<string>> = {}) {
       onChange={jest.fn()}
       onSearch={jest.fn()}
       onToggle={jest.fn()}
-      open={true}
+      open
       property="foo"
       searchPlaceholder="search for foo..."
       stats={{ a: 10, b: 8, c: 1 }}
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 0ec779075fb..731a881f3a2 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
@@ -272,21 +272,6 @@ it('should show issue indicator', async () => {
       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('link', { name: 'First Issue' });
-  const secondIssueBox = issueRow.getByRole('link', { name: 'Second Issue' });
-  expect(firstIssueBox).toBeInTheDocument();
-  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',
-    })
-  ).toBeInTheDocument();
-
-  await user.click(firstIssueBox);
-  expect(onIssueSelect).toHaveBeenCalledWith('first-issue');
-
-  await user.click(secondIssueBox);
-  expect(onIssueSelect).toHaveBeenCalledWith('second-issue');
 });
 
 it('should show coverage information', async () => {
diff --git a/server/sonar-web/src/main/js/components/SourceViewer/styles.css b/server/sonar-web/src/main/js/components/SourceViewer/styles.css
index 114cb08b1fc..63cef19ca70 100644
--- a/server/sonar-web/src/main/js/components/SourceViewer/styles.css
+++ b/server/sonar-web/src/main/js/components/SourceViewer/styles.css
@@ -23,7 +23,6 @@
   border: 1px solid var(--gray80);
   box-sizing: border-box;
   background-color: #fff;
-  overflow: hidden;
 }
 
 .source-table {
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 4716deb8354..3230d4c9621 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
@@ -123,8 +123,10 @@ export default function IssueActionsBar(props: Props) {
   );
 
   return (
-    <div className="sw-flex sw-flex-wrap sw-items-center sw-justify-between">
-      <ul className="sw-flex sw-items-center sw-gap-3 sw-body-sm">
+    <div
+      className={classNames(className, 'sw-flex sw-flex-wrap sw-items-center sw-justify-between')}
+    >
+      <ul className="it__issue-header-actions sw-flex sw-items-center sw-gap-3 sw-body-sm">
         <li>
           <IssueType canSetType={canSetType} issue={issue} setIssueProperty={setIssueProperty} />
         </li>
@@ -199,7 +201,7 @@ export default function IssueActionsBar(props: Props) {
                 </>
               </Tooltip>
             </IssueMetaListItem>
-            <SeparatorCircleIcon aria-hidden={true} as="li" />
+            <SeparatorCircleIcon aria-hidden as="li" />
           </>
         )}
 
@@ -209,7 +211,7 @@ export default function IssueActionsBar(props: Props) {
               <CommentIcon aria-label={translate('issue.comment.formlink')} />
               {issue.comments?.length}
             </IssueMetaListItem>
-            <SeparatorCircleIcon aria-hidden={true} as="li" />
+            <SeparatorCircleIcon aria-hidden as="li" />
           </>
         )}
         {showLine && isDefined(issue.textRange) && (
@@ -219,7 +221,7 @@ export default function IssueActionsBar(props: Props) {
                 {translateWithParameters('issue.ncloc_x.short', issue.textRange.endLine)}
               </IssueMetaListItem>
             </Tooltip>
-            <SeparatorCircleIcon aria-hidden={true} as="li" />
+            <SeparatorCircleIcon aria-hidden as="li" />
           </>
         )}
         {issue.effort && (
@@ -227,7 +229,7 @@ export default function IssueActionsBar(props: Props) {
             <IssueMetaListItem className={issueMetaListItemClassNames}>
               {translateWithParameters('issue.x_effort', issue.effort)}
             </IssueMetaListItem>
-            <SeparatorCircleIcon aria-hidden={true} as="li" />
+            <SeparatorCircleIcon aria-hidden as="li" />
           </>
         )}
         <IssueMetaListItem className={issueMetaListItemClassNames}>
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 f0d7e17b4a7..3b40a482240 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
@@ -134,6 +134,7 @@ export default function IssueAssignee(props: Props) {
   return (
     <SearchSelectDropdown
       size="medium"
+      className="it__issue-assign"
       controlAriaLabel={
         assinedUser
           ? translateWithParameters('issue.assign.assigned_to_x_click_to_change', assinedUser)
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 458b2f9363c..45993e6e692 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
@@ -24,7 +24,6 @@ import { translate } from '../../../helpers/l10n';
 import { getComponentIssuesUrl } from '../../../helpers/urls';
 import { BranchLike } from '../../../types/branch-like';
 import { Issue } from '../../../types/types';
-import Link from '../../common/Link';
 import { IssueMessageHighlighting } from '../IssueMessageHighlighting';
 
 export interface IssueMessageProps {
@@ -50,7 +49,7 @@ export default function IssueMessage(props: IssueMessageProps) {
   return (
     <>
       {props.onClick ? (
-        <StandoutLink onClick={props.onClick} preventDefault to={{}}>
+        <StandoutLink onClick={props.onClick} className="it__issue-message" preventDefault to={{}}>
           <IssueMessageHighlighting message={message} messageFormattings={messageFormattings} />
         </StandoutLink>
       ) : (
@@ -60,14 +59,14 @@ export default function IssueMessage(props: IssueMessageProps) {
       )}
 
       {displayWhyIsThisAnIssue && (
-        <Link
+        <StandoutLink
           aria-label={translate('issue.why_this_issue.long')}
-          className="spacer-right"
           target="_blank"
+          className="sw-ml-2"
           to={whyIsThisAnIssueUrl}
         >
           {translate('issue.why_this_issue')}
-        </Link>
+        </StandoutLink>
       )}
     </>
   );
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 e9698a11dd6..7d3b33a8230 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
@@ -58,7 +58,7 @@ export default class IssueSeverity extends React.PureComponent<Props> {
     const typesOptions = SEVERITY.map((severity) => ({
       label: translate('severity', severity),
       value: severity,
-      Icon: <SeverityIcon severity={severity} aria-hidden={true} />,
+      Icon: <SeverityIcon severity={severity} aria-hidden />,
     }));
 
     if (this.props.canSetSeverity) {
@@ -69,7 +69,7 @@ export default class IssueSeverity extends React.PureComponent<Props> {
             translate('severity', issue.severity)
           )}
           menuIsOpen={this.props.isOpen && this.props.canSetSeverity}
-          className="js-issue-type"
+          className="it__issue-severity"
           options={typesOptions}
           onMenuClose={this.handleClose}
           onMenuOpen={() => this.toggleSetSeverity(true)}
@@ -81,11 +81,7 @@ export default class IssueSeverity extends React.PureComponent<Props> {
 
     return (
       <span className="sw-flex sw-items-center sw-gap-1">
-        <SeverityIcon
-          className="little-spacer-right"
-          severity={issue.severity}
-          aria-hidden={true}
-        />
+        <SeverityIcon className="little-spacer-right" severity={issue.severity} aria-hidden />
         {translate('severity', issue.severity)}
       </span>
     );
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 233656ae3d0..a6b505c716d 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
@@ -70,7 +70,7 @@ export default class IssueTransition extends React.PureComponent<Props> {
             translate('issue.status', issue.status)
           )}
           size="medium"
-          className="js-issue-transition"
+          className="it__issue-transition"
           components={{
             SingleValue: <
               V,
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 a31fb075820..2607dad09fc 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
@@ -56,7 +56,7 @@ export default class IssueType extends React.PureComponent<Props> {
             'issue.type.type_x_click_to_change',
             translate('issue.type', issue.type)
           )}
-          className="js-issue-type"
+          className="it__issue-type"
           options={typesOptions}
           setValue={this.setType}
           value={issue.type}
diff --git a/server/sonar-web/src/main/js/components/issue/components/IssueView.tsx b/server/sonar-web/src/main/js/components/issue/components/IssueView.tsx
index bc8723d827f..96713af892a 100644
--- a/server/sonar-web/src/main/js/components/issue/components/IssueView.tsx
+++ b/server/sonar-web/src/main/js/components/issue/components/IssueView.tsx
@@ -17,8 +17,9 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+import styled from '@emotion/styled';
 import classNames from 'classnames';
-import { Checkbox } from 'design-system';
+import { Checkbox, themeBorder, themeColor } from 'design-system';
 import * as React from 'react';
 import { deleteIssueComment, editIssueComment } from '../../../api/issues';
 import { translate, translateWithParameters } from '../../../helpers/l10n';
@@ -43,6 +44,22 @@ interface Props {
 }
 
 export default class IssueView extends React.PureComponent<Props> {
+  nodeRef: HTMLLIElement | null = null;
+
+  componentDidMount() {
+    const { selected } = this.props;
+    if (this.nodeRef && selected) {
+      this.nodeRef.scrollIntoView({ block: 'center', inline: 'center' });
+    }
+  }
+
+  componentDidUpdate(prevProps: Props) {
+    const { selected } = this.props;
+    if (!prevProps.selected && selected && this.nodeRef) {
+      this.nodeRef.scrollIntoView({ block: 'center', inline: 'center' });
+    }
+  }
+
   handleCheck = () => {
     if (this.props.onCheck) {
       this.props.onCheck(this.props.issue.key);
@@ -75,13 +92,21 @@ export default class IssueView extends React.PureComponent<Props> {
 
     const hasCheckbox = this.props.onCheck != null;
 
-    const issueClass = classNames('sw-py-3 sw-flex sw-items-center sw-justify-between sw-w-full ', {
-      'no-click': this.props.onClick === undefined,
-      selected: this.props.selected,
-    });
+    const issueClass = classNames(
+      'it__issue-item sw-py-3 sw-flex sw-items-center sw-justify-between sw-w-full ',
+      {
+        'no-click': this.props.onClick === undefined,
+        selected: this.props.selected,
+      }
+    );
 
     return (
-      <div className={issueClass} role="region" aria-label={issue.message}>
+      <IssueItem
+        className={issueClass}
+        role="region"
+        aria-label={issue.message}
+        ref={(node) => (this.nodeRef = node)}
+      >
         <div className="sw-flex sw-w-full sw-px-2 sw-gap-4">
           {hasCheckbox && (
             <Checkbox
@@ -107,11 +132,11 @@ export default class IssueView extends React.PureComponent<Props> {
               onAssign={this.props.onAssign}
               onChange={this.props.onChange}
               togglePopup={this.props.togglePopup}
-              showComments={true}
+              showComments
             />
           </div>
         </div>
-      </div>
+      </IssueItem>
     );
   }
 }
@@ -124,3 +149,24 @@ function isClickable(node: HTMLElement | undefined | null): boolean {
   const tagName = (node.tagName || '').toUpperCase();
   return clickableTags.includes(tagName) || isClickable(node.parentElement);
 }
+
+const IssueItem = styled.li`
+  box-sizing: border-box;
+  border: ${themeBorder('default', 'transparent')};
+  border-top: ${themeBorder('default')};
+  outline: none;
+
+  &:last-child {
+    border-bottom: ${themeBorder('default')};
+  }
+
+  &.selected {
+    border: ${themeBorder('default', 'tableRowSelected')};
+    &:last-child {
+    }
+  }
+
+  &:hover {
+    background: ${themeColor('tableRowHover')};
+  }
+`;