From cbd8e9fb6445a14cc0689e862c3a942f08a0ada7 Mon Sep 17 00:00:00 2001 From: Kevin Silva Date: Mon, 5 Jun 2023 10:15:49 +0200 Subject: [PATCH] SONAR-19345 - Update list issues for MIUI --- .../src/components/InputSelect.tsx | 3 +- .../coding-rules/components/StandardFacet.tsx | 2 +- .../js/apps/issues/__tests__/IssuesApp-it.tsx | 4 +- .../issues/components/BulkChangeModal.tsx | 2 +- .../js/apps/issues/components/IssueHeader.tsx | 2 +- .../js/apps/issues/components/IssuesApp.tsx | 2 +- .../js/apps/issues/components/ListItem.tsx | 61 ++++-------------- .../js/apps/issues/components/TagsSelect.tsx | 2 +- .../IssueLocationsCrossFile.tsx | 4 +- .../IssueLocationsNavigator.tsx | 2 +- .../SubnavigationIssuesList.tsx | 2 +- .../js/apps/issues/sidebar/ListStyleFacet.tsx | 4 +- .../js/apps/issues/sidebar/StandardFacet.tsx | 6 +- .../sidebar/__tests__/ListStyleFacet-test.tsx | 2 +- .../__tests__/SourceViewer-it.tsx | 15 ----- .../js/components/SourceViewer/styles.css | 1 - .../issue/components/IssueActionsBar.tsx | 14 +++-- .../issue/components/IssueAssign.tsx | 1 + .../issue/components/IssueMessage.tsx | 9 ++- .../issue/components/IssueSeverity.tsx | 10 +-- .../issue/components/IssueTransition.tsx | 2 +- .../components/issue/components/IssueType.tsx | 2 +- .../components/issue/components/IssueView.tsx | 62 ++++++++++++++++--- 23 files changed, 101 insertions(+), 113 deletions(-) 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 { {selectedBelowLimit.map((item) => ( { 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 { ? 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 { aria-label={translate('permalink')} className="sw-ml-1 sw-align-bottom" copyValue={getPathUrlAsString(issueUrl, false)} - discreet={true} + discreet />
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 { }} 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 { - 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 { const { branchLike, issue } = this.props; return ( - (this.nodeRef = node)}> - - + ); } } - -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 ( {this.renderGroup(firstGroup, 0, { onlyFirst: true })}
{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) { ))}
- + ); } 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 /> )} 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 extends React.Component, State> { {selectedBelowLimit.map((item) => ( extends React.Component, State> { 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 { 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 { 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 { 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> = {}) { 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 ( -
-
    +
    +
      • @@ -199,7 +201,7 @@ export default function IssueActionsBar(props: Props) { - + )} @@ -209,7 +211,7 @@ export default function IssueActionsBar(props: Props) { {issue.comments?.length} - + )} {showLine && isDefined(issue.textRange) && ( @@ -219,7 +221,7 @@ export default function IssueActionsBar(props: Props) { {translateWithParameters('issue.ncloc_x.short', issue.textRange.endLine)} - + )} {issue.effort && ( @@ -227,7 +229,7 @@ export default function IssueActionsBar(props: Props) { {translateWithParameters('issue.x_effort', issue.effort)} - + )} 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 ( {props.onClick ? ( - + ) : ( @@ -60,14 +59,14 @@ export default function IssueMessage(props: IssueMessageProps) { )} {displayWhyIsThisAnIssue && ( - {translate('issue.why_this_issue')} - + )} ); 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 { const typesOptions = SEVERITY.map((severity) => ({ label: translate('severity', severity), value: severity, - Icon: , + Icon: , })); if (this.props.canSetSeverity) { @@ -69,7 +69,7 @@ export default class IssueSeverity extends React.PureComponent { 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 { return ( - + {translate('severity', issue.severity)} ); 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 { 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 { '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 { + 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 { 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 ( -
      + (this.nodeRef = node)} + >
      {hasCheckbox && ( { onAssign={this.props.onAssign} onChange={this.props.onChange} togglePopup={this.props.togglePopup} - showComments={true} + showComments />
      -
    + ); } } @@ -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')}; + } +`; -- 2.39.5