From 1dc59e984548492542cbbae727808ea10ae2ad58 Mon Sep 17 00:00:00 2001 From: Guillaume Peoc'h Date: Tue, 18 Jan 2022 17:43:28 +0100 Subject: [PATCH] SONAR-15882 warning align text and tooltip --- .../main/js/apps/code/components/CodeApp.tsx | 19 +++-- .../__snapshots__/CodeApp-test.tsx.snap | 14 ++-- .../component-measures/components/App.tsx | 26 ++++--- .../__tests__/__snapshots__/App-test.tsx.snap | 14 ++-- .../js/apps/issues/components/IssuesApp.tsx | 71 ++++++++++--------- .../__snapshots__/IssuesApp-test.tsx.snap | 14 ++-- .../js/components/controls/HelpTooltip.tsx | 11 ++- .../main/js/components/issue/IssueView.tsx | 14 ++-- 8 files changed, 108 insertions(+), 75 deletions(-) diff --git a/server/sonar-web/src/main/js/apps/code/components/CodeApp.tsx b/server/sonar-web/src/main/js/apps/code/components/CodeApp.tsx index 3f1d6d48ce7..c1d88989529 100644 --- a/server/sonar-web/src/main/js/apps/code/components/CodeApp.tsx +++ b/server/sonar-web/src/main/js/apps/code/components/CodeApp.tsx @@ -298,12 +298,14 @@ export class CodeApp extends React.Component {
{!canBrowseAllChildProjects && isPortfolioLike(qualifier) && ( - {translate('component_measures.not_all_measures_are_shown')} - + + {translate('component_measures.not_all_measures_are_shown')} + + )} @@ -401,6 +403,11 @@ const StyledAlert = styled(Alert)` margin-bottom: 15px; `; +const AlertContent = styled.div` + display: flex; + align-items: center; +`; + const mapStateToProps = (state: any): StateToProps => ({ metrics: getMetrics(state) }); diff --git a/server/sonar-web/src/main/js/apps/code/components/__tests__/__snapshots__/CodeApp-test.tsx.snap b/server/sonar-web/src/main/js/apps/code/components/__tests__/__snapshots__/CodeApp-test.tsx.snap index ad7f2051d1c..04fb66277ed 100644 --- a/server/sonar-web/src/main/js/apps/code/components/__tests__/__snapshots__/CodeApp-test.tsx.snap +++ b/server/sonar-web/src/main/js/apps/code/components/__tests__/__snapshots__/CodeApp-test.tsx.snap @@ -175,12 +175,14 @@ exports[`should render a warning message when user does not have access to all p - component_measures.not_all_measures_are_shown - + + component_measures.not_all_measures_are_shown + + { - {translate('component_measures.not_all_measures_are_shown')} - + + {translate('component_measures.not_all_measures_are_shown')} + + )}
@@ -342,4 +347,9 @@ export class App extends React.PureComponent { const mapDispatchToProps = { fetchBranchStatus: fetchBranchStatus as any }; +const AlertContent = styled.div` + display: flex; + align-items: center; +`; + export default withRouter(connect(null, mapDispatchToProps)(App)); diff --git a/server/sonar-web/src/main/js/apps/component-measures/components/__tests__/__snapshots__/App-test.tsx.snap b/server/sonar-web/src/main/js/apps/component-measures/components/__tests__/__snapshots__/App-test.tsx.snap index 14b96b76b6c..68daeb9cdb4 100644 --- a/server/sonar-web/src/main/js/apps/component-measures/components/__tests__/__snapshots__/App-test.tsx.snap +++ b/server/sonar-web/src/main/js/apps/component-measures/components/__tests__/__snapshots__/App-test.tsx.snap @@ -72,12 +72,14 @@ exports[`should render a warning message when user does not have access to all p className="big-spacer-top big-spacer-right big-spacer-left" variant="warning" > - component_measures.not_all_measures_are_shown - + + component_measures.not_all_measures_are_shown + +
{ mounted = false; @@ -162,7 +165,7 @@ export default class App extends React.PureComponent { referencedUsers: {}, selected: getOpen(props.location.query) }; - this.refreshBranchStatus = debounce(this.refreshBranchStatus, 1000); + this.refreshBranchStatus = debounce(this.refreshBranchStatus, BRANCH_STATUS_REFRESH_INTERVAL); } componentDidMount() { @@ -265,24 +268,19 @@ export default class App extends React.PureComponent { if (key.getScope() !== 'issues') { return; } - if (event.keyCode === 18) { - // alt + if (event.keyCode === KeyCodes.Alt) { event.preventDefault(); this.setState(actions.enableLocationsNavigator); - } else if (event.keyCode === 40 && event.altKey) { - // alt + down + } else if (event.keyCode === KeyCodes.DownArrow && event.altKey) { event.preventDefault(); this.selectNextLocation(); - } else if (event.keyCode === 38 && event.altKey) { - // alt + up + } else if (event.keyCode === KeyCodes.UpArrow && event.altKey) { event.preventDefault(); this.selectPreviousLocation(); - } else if (event.keyCode === 37 && event.altKey) { - // alt + left + } else if (event.keyCode === KeyCodes.LeftArrow && event.altKey) { event.preventDefault(); this.selectPreviousFlow(); - } else if (event.keyCode === 39 && event.altKey) { - // alt + right + } else if (event.keyCode === KeyCodes.RightArrow && event.altKey) { event.preventDefault(); this.selectNextFlow(); } @@ -292,7 +290,7 @@ export default class App extends React.PureComponent { if (key.getScope() !== 'issues') { return; } - if (event.keyCode === 18) { + if (event.keyCode === KeyCodes.Alt) { // alt this.setState(actions.disableLocationsNavigator); } @@ -499,7 +497,7 @@ export default class App extends React.PureComponent { }; fetchIssuesUntil = ( - p: number, + page: number, done: (pageIssues: T.Issue[], paging: T.Paging) => boolean ): Promise => { const recursiveFetch = (p: number, prevIssues: T.Issue[]): Promise => { @@ -511,7 +509,7 @@ export default class App extends React.PureComponent { }); }; - return recursiveFetch(p, []); + return recursiveFetch(page, []); }; fetchMoreIssues = () => { @@ -551,9 +549,9 @@ export default class App extends React.PureComponent { const isSameComponent = (issue: T.Issue) => issue.component === openIssue.component; - const done = (pageIssues: T.Issue[], paging: T.Paging) => { + const done = (pageIssues: T.Issue[], p: T.Paging) => { const lastIssue = pageIssues[pageIssues.length - 1]; - if (paging.total <= paging.pageIndex * paging.pageSize) { + if (p.total <= p.pageIndex * p.pageSize) { return true; } if (lastIssue.component !== openIssue.component) { @@ -631,19 +629,19 @@ export default class App extends React.PureComponent { return Promise.resolve({ issues, paging }); }; - getButtonLabel = (checked: string[], checkAll?: boolean, paging?: T.Paging) => { - if (checked.length > 0) { - let count; - if (checkAll && paging) { - count = paging.total > MAX_PAGE_SIZE ? MAX_PAGE_SIZE : paging.total; - } else { - count = Math.min(checked.length, MAX_PAGE_SIZE); - } + getButtonLabel = (checked: string[], checkAll = false, paging?: T.Paging) => { + if (checked.length === 0) { + return translate('bulk_change'); + } - return translateWithParameters('issues.bulk_change_X_issues', count); + let count; + if (checkAll && paging) { + count = paging.total > MAX_PAGE_SIZE ? MAX_PAGE_SIZE : paging.total; } else { - return translate('bulk_change'); + count = Math.min(checked.length, MAX_PAGE_SIZE); } + + return translateWithParameters('issues.bulk_change_X_issues', count); }; handleFilterChange = (changes: Partial) => { @@ -747,7 +745,7 @@ export default class App extends React.PureComponent { }); }; - handlePopupToggle = (issue: string, popupName: string, open?: boolean) => { + handlePopupToggle = (issue: string, popupName: string, open: boolean | undefined = undefined) => { this.setState((state: State) => { const { openPopup } = state; const samePopup = openPopup && openPopup.name === popupName && openPopup.issue === issue; @@ -962,12 +960,14 @@ export default class App extends React.PureComponent { - {translate('issues.not_all_issue_show')} - + + {translate('issues.not_all_issue_show')} + + )} { ); } } + +const AlertContent = styled.div` + display: flex; + align-items: center; +`; diff --git a/server/sonar-web/src/main/js/apps/issues/components/__tests__/__snapshots__/IssuesApp-test.tsx.snap b/server/sonar-web/src/main/js/apps/issues/components/__tests__/__snapshots__/IssuesApp-test.tsx.snap index 99ba1657dab..01994952a65 100644 --- a/server/sonar-web/src/main/js/apps/issues/components/__tests__/__snapshots__/IssuesApp-test.tsx.snap +++ b/server/sonar-web/src/main/js/apps/issues/components/__tests__/__snapshots__/IssuesApp-test.tsx.snap @@ -40,12 +40,14 @@ exports[`should show warnning when not all projects are accessible 1`] = ` className="big-spacer-top big-spacer-right big-spacer-left" variant="warning" > - issues.not_all_issue_show - + + issues.not_all_issue_show + + { ariaLabelledby?: string; } -export default function HelpTooltip({ size = 12, ariaLabel, ariaLabelledby, ...props }: Props) { +const DEFAULT_SIZE = 12; + +export default function HelpTooltip({ + size = DEFAULT_SIZE, + ariaLabel, + ariaLabelledby, + ...props +}: Props) { const role = ariaLabel || ariaLabelledby ? 'note' : undefined; return (
) { +export function DarkHelpTooltip({ size = DEFAULT_SIZE, ...props }: Omit) { return ( 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 6d93c734417..30b4e9d5ed8 100644 --- a/server/sonar-web/src/main/js/components/issue/IssueView.tsx +++ b/server/sonar-web/src/main/js/components/issue/IssueView.tsx @@ -108,14 +108,12 @@ export default class IssueView extends React.PureComponent {
)} {hasCheckbox && ( - <> - - + )}
); -- 2.39.5