From: Mathieu Suen Date: Fri, 3 Feb 2023 10:10:58 +0000 (+0100) Subject: SONAR-18385 Improve focus state on issue box X-Git-Tag: 10.0.0.68432~256 X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=b51a3bd354c6739b3a82e50b163992384e7b640d;p=sonarqube.git SONAR-18385 Improve focus state on issue box --- diff --git a/server/sonar-web/src/main/js/apps/issues/components/IssuesList.tsx b/server/sonar-web/src/main/js/apps/issues/components/IssuesList.tsx index 19862799f17..a49bb1d9425 100644 --- a/server/sonar-web/src/main/js/apps/issues/components/IssuesList.tsx +++ b/server/sonar-web/src/main/js/apps/issues/components/IssuesList.tsx @@ -17,10 +17,12 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ +import { groupBy } from 'lodash'; import * as React from 'react'; import { BranchLike } from '../../../types/branch-like'; import { Component, Issue } from '../../../types/types'; import { Query } from '../utils'; +import ComponentBreadcrumbs from './ComponentBreadcrumbs'; import ListItem from './ListItem'; interface Props { @@ -58,8 +60,38 @@ export default class IssuesList extends React.PureComponent { } } + renderIssueComponentList = (issues: Issue[], index: number) => { + const { branchLike, checked, component, openPopup, selectedIssue } = this.props; + return ( + +
  • +
    + +
    +
    • +
      + {issues.map((issue) => ( + + ))} +
    +     + ); + }; + render() { - const { branchLike, checked, component, issues, openPopup, selectedIssue } = this.props; + const { issues } = this.props; const { prerender } = this.state; if (prerender) { @@ -70,26 +102,8 @@ export default class IssuesList extends React.PureComponent { ); } - return ( -
      - {issues.map((issue, index) => ( - 0 ? issues[index - 1] : undefined} - selected={selectedIssue != null && selectedIssue.key === issue.key} - /> - ))} -
    - ); + const issuesByComponent = groupBy(issues, (issue) => `(${issue.component} : ${issue.branch})`); + + return
      {Object.values(issuesByComponent).map(this.renderIssueComponentList)}
    ; } } 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 76c3601bab0..78107922aac 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 @@ -20,14 +20,12 @@ import * as React from 'react'; import Issue from '../../../components/issue/Issue'; import { BranchLike } from '../../../types/branch-like'; -import { Component, Issue as TypeIssue } from '../../../types/types'; +import { Issue as TypeIssue } from '../../../types/types'; import { Query } from '../utils'; -import ComponentBreadcrumbs from './ComponentBreadcrumbs'; interface Props { branchLike: BranchLike | undefined; checked: boolean; - component: Component | undefined; issue: TypeIssue; onChange: (issue: TypeIssue) => void; onCheck: ((issueKey: string) => void) | undefined; @@ -35,7 +33,6 @@ interface Props { onFilterChange: (changes: Partial) => void; onPopupToggle: (issue: string, popupName: string, open?: boolean) => void; openPopup: string | undefined; - previousIssue: TypeIssue | undefined; selected: boolean; } @@ -102,20 +99,10 @@ export default class ListItem extends React.PureComponent { }; render() { - const { branchLike, component, issue, previousIssue } = this.props; - - const displayComponent = - !previousIssue || - previousIssue.component !== issue.component || - previousIssue.branch !== issue.branch; + const { branchLike, issue } = this.props; return (
  • (this.nodeRef = node)}> - {displayComponent && ( -
    - -
    - )} = {}) { = {}) { onFilterChange={jest.fn()} onPopupToggle={jest.fn()} openPopup={undefined} - previousIssue={mockIssue(false, { branch: 'branch-8.7' })} selected={false} {...props} /> diff --git a/server/sonar-web/src/main/js/apps/issues/components/__tests__/__snapshots__/IssuesList-test.tsx.snap b/server/sonar-web/src/main/js/apps/issues/components/__tests__/__snapshots__/IssuesList-test.tsx.snap index d107ddc2693..896ba138392 100644 --- a/server/sonar-web/src/main/js/apps/issues/components/__tests__/__snapshots__/IssuesList-test.tsx.snap +++ b/server/sonar-web/src/main/js/apps/issues/components/__tests__/__snapshots__/IssuesList-test.tsx.snap @@ -10,121 +10,131 @@ exports[`should render correctly 1`] = ` exports[`should render correctly 2`] = `
      - +
      + +
      + +
        + - + + key="AVsae-CQS-9G3txfbFN3" + onChange={[MockFunction]} + onCheck={[MockFunction]} + onClick={[MockFunction]} + onFilterChange={[MockFunction]} + onPopupToggle={[MockFunction]} + selected={false} + /> +
    `; diff --git a/server/sonar-web/src/main/js/apps/issues/components/__tests__/__snapshots__/ListItem-test.tsx.snap b/server/sonar-web/src/main/js/apps/issues/components/__tests__/__snapshots__/ListItem-test.tsx.snap index 2924aed543c..d8cefe95f1b 100644 --- a/server/sonar-web/src/main/js/apps/issues/components/__tests__/__snapshots__/ListItem-test.tsx.snap +++ b/server/sonar-web/src/main/js/apps/issues/components/__tests__/__snapshots__/ListItem-test.tsx.snap @@ -4,66 +4,6 @@ exports[`should render correctly 1`] = `
  • -
    - -
    { } }; - handleClick = (event: React.MouseEvent) => { + handleBoxClick = (event: React.MouseEvent) => { if (!isClickable(event.target as HTMLElement) && this.props.onClick) { event.preventDefault(); + this.handleDetailClick(); + } + }; + + handleDetailClick = () => { + if (this.props.onClick) { this.props.onClick(this.props.issue.key); } }; @@ -91,7 +97,7 @@ export default class IssueView extends React.PureComponent { return (
    @@ -106,6 +112,7 @@ export default class IssueView extends React.PureComponent { )} void; issue: Issue; branchLike?: BranchLike; displayWhyIsThisAnIssue?: boolean; @@ -50,9 +52,15 @@ export default function IssueMessage(props: IssueMessageProps) { return ( <>
    - - - + {props.onClick ? ( + + + + ) : ( + + + + )} void; currentPopup?: string; displayWhyIsThisAnIssue?: boolean; displayLocationsCount?: boolean; @@ -78,6 +79,7 @@ export default function IssueTitleBar(props: IssueTitleBarProps) { issue={issue} branchLike={props.branchLike} displayWhyIsThisAnIssue={displayWhyIsThisAnIssue} + onClick={props.onClick} />