diff options
57 files changed, 316 insertions, 286 deletions
diff --git a/server/sonar-web/src/main/js/app/components/nav/component/Breadcrumb.tsx b/server/sonar-web/src/main/js/app/components/nav/component/Breadcrumb.tsx index d00315089d1..c9cc789ec05 100644 --- a/server/sonar-web/src/main/js/app/components/nav/component/Breadcrumb.tsx +++ b/server/sonar-web/src/main/js/app/components/nav/component/Breadcrumb.tsx @@ -25,6 +25,7 @@ import { isMainBranch } from '../../../../helpers/branch-like'; import { getComponentOverviewUrl } from '../../../../helpers/urls'; import { BranchLike } from '../../../../types/branch-like'; import { Component } from '../../../../types/types'; +import { colors } from '../../../theme'; export interface BreadcrumbProps { component: Component; @@ -37,32 +38,62 @@ export function Breadcrumb(props: BreadcrumbProps) { currentBranchLike } = props; const lastBreadcrumbElement = last(breadcrumbs); - const isNoMainBranch = currentBranchLike && !isMainBranch(currentBranchLike); + const isNotMainBranch = currentBranchLike && !isMainBranch(currentBranchLike); return ( <div className="big flex-shrink display-flex-center"> {breadcrumbs.map((breadcrumbElement, i) => { const isFirst = i === 0; const isNotLast = i < breadcrumbs.length - 1; + const isLast = !isNotLast; + const showQualifierIcon = isFirst && lastBreadcrumbElement; + + const name = + isNotMainBranch || isNotLast ? ( + <> + {showQualifierIcon && !isNotMainBranch && ( + <QualifierIcon + className="spacer-right" + qualifier={lastBreadcrumbElement.qualifier} + fill={colors.neutral800} + /> + )} + <Link + className="link-no-underline" + to={getComponentOverviewUrl(breadcrumbElement.key, breadcrumbElement.qualifier)}> + {showQualifierIcon && isNotMainBranch && ( + <QualifierIcon + className="spacer-right" + qualifier={lastBreadcrumbElement.qualifier} + fill={colors.primary} + /> + )} + {breadcrumbElement.name} + </Link> + </> + ) : ( + <> + {showQualifierIcon && ( + <QualifierIcon + className="spacer-right" + qualifier={lastBreadcrumbElement.qualifier} + fill={colors.neutral800} + /> + )} + {breadcrumbElement.name} + </> + ); return ( <span className="flex-shrink display-flex-center" key={breadcrumbElement.key}> - {isFirst && lastBreadcrumbElement && ( - <QualifierIcon className="spacer-right" qualifier={lastBreadcrumbElement.qualifier} /> - )} - {isNoMainBranch || isNotLast ? ( - <h1> - <Link - className="link-no-underline text-ellipsis" - title={breadcrumbElement.name} - to={getComponentOverviewUrl(breadcrumbElement.key, breadcrumbElement.qualifier)}> - {breadcrumbElement.name} - </Link> - </h1> - ) : ( + {isLast ? ( <h1 className="text-ellipsis" title={breadcrumbElement.name}> - {breadcrumbElement.name} + {name} </h1> + ) : ( + <span className="text-ellipsis" title={breadcrumbElement.name}> + {name} + </span> )} {isNotLast && <span className="slash-separator" />} </span> diff --git a/server/sonar-web/src/main/js/app/components/nav/component/ComponentNav.tsx b/server/sonar-web/src/main/js/app/components/nav/component/ComponentNav.tsx index f57d6b934a7..5e8149cae12 100644 --- a/server/sonar-web/src/main/js/app/components/nav/component/ComponentNav.tsx +++ b/server/sonar-web/src/main/js/app/components/nav/component/ComponentNav.tsx @@ -54,6 +54,7 @@ export interface ComponentNavProps { } const ALERT_HEIGHT = 30; +const BRANCHLIKE_TOGGLE_ADDED_HEIGHT = 6; export default function ComponentNav(props: ComponentNavProps) { const { @@ -109,6 +110,10 @@ export default function ComponentNav(props: ComponentNavProps) { contextNavHeight += ALERT_HEIGHT; } + if (branchLikes.length) { + contextNavHeight += BRANCHLIKE_TOGGLE_ADDED_HEIGHT; + } + return ( <ContextNavBar height={contextNavHeight} @@ -149,7 +154,7 @@ export default function ComponentNav(props: ComponentNavProps) { <InfoDrawer displayed={displayProjectInfo} onClose={() => setDisplayProjectInfo(false)} - top={globalNavHeightRaw + contextNavHeightRaw}> + top={globalNavHeightRaw + contextNavHeight}> <ProjectInformation branchLike={currentBranchLike} component={component} diff --git a/server/sonar-web/src/main/js/app/components/nav/component/Header.tsx b/server/sonar-web/src/main/js/app/components/nav/component/Header.tsx index f17925c709b..a27c75c4f8b 100644 --- a/server/sonar-web/src/main/js/app/components/nav/component/Header.tsx +++ b/server/sonar-web/src/main/js/app/components/nav/component/Header.tsx @@ -43,7 +43,7 @@ export function Header(props: HeaderProps) { return ( <> <Helmet title={component.name} /> - <header className="display-flex-center flex-shrink"> + <div className="display-flex-center flex-shrink"> <Breadcrumb component={component} currentBranchLike={currentBranchLike} /> {isLoggedIn(currentUser) && ( <Favorite @@ -64,7 +64,7 @@ export function Header(props: HeaderProps) { <CurrentBranchLikeMergeInformation currentBranchLike={currentBranchLike} /> </> )} - </header> + </div> </> ); } diff --git a/server/sonar-web/src/main/js/app/components/nav/component/HeaderMeta.css b/server/sonar-web/src/main/js/app/components/nav/component/HeaderMeta.css index 0e5e2a46fda..d129c91bdea 100644 --- a/server/sonar-web/src/main/js/app/components/nav/component/HeaderMeta.css +++ b/server/sonar-web/src/main/js/app/components/nav/component/HeaderMeta.css @@ -18,7 +18,7 @@ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ .header-meta-warnings .alert { - margin-bottom: 0; + margin-bottom: 5px; } .header-meta-warnings .alert-content { diff --git a/server/sonar-web/src/main/js/app/components/nav/component/__tests__/Breadcrumb-test.tsx b/server/sonar-web/src/main/js/app/components/nav/component/__tests__/Breadcrumb-test.tsx index 4d67b48719c..58372411efb 100644 --- a/server/sonar-web/src/main/js/app/components/nav/component/__tests__/Breadcrumb-test.tsx +++ b/server/sonar-web/src/main/js/app/components/nav/component/__tests__/Breadcrumb-test.tsx @@ -32,8 +32,21 @@ it('should render correctly', () => { }); it('should render correctly when not on a main branch', () => { - renderBreadcrumb({ currentBranchLike: mockBranch() }); - expect(screen.getByRole('link', { name: 'Child portfolio' })).toBeInTheDocument(); + renderBreadcrumb({ + component: mockComponent({ + breadcrumbs: [ + { + key: 'project', + name: 'My Project', + qualifier: ComponentQualifier.Project + } + ] + }), + currentBranchLike: mockBranch() + }); + expect( + screen.getByRole('link', { name: `qualifier.${ComponentQualifier.Project} My Project` }) + ).toBeInTheDocument(); }); function renderBreadcrumb(props: Partial<BreadcrumbProps> = {}) { diff --git a/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/Header-test.tsx.snap b/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/Header-test.tsx.snap index c3f9e27795d..b64a5de4964 100644 --- a/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/Header-test.tsx.snap +++ b/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/Header-test.tsx.snap @@ -8,7 +8,7 @@ exports[`should render correctly 1`] = ` prioritizeSeoTags={false} title="MyProject" /> - <header + <div className="display-flex-center flex-shrink" > <Breadcrumb @@ -156,6 +156,6 @@ exports[`should render correctly 1`] = ` } } /> - </header> + </div> </Fragment> `; diff --git a/server/sonar-web/src/main/js/app/components/nav/component/branch-like/BranchLikeNavigation.css b/server/sonar-web/src/main/js/app/components/nav/component/branch-like/BranchLikeNavigation.css index 26307f605d1..d70e4bb83db 100644 --- a/server/sonar-web/src/main/js/app/components/nav/component/branch-like/BranchLikeNavigation.css +++ b/server/sonar-web/src/main/js/app/components/nav/component/branch-like/BranchLikeNavigation.css @@ -17,6 +17,26 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ +.branch-like-navigation-toggler { + padding: 4px 8px; + border: 1px solid transparent; + border-radius: 2px; +} + +.branch-like-navigation-toggler:hover { + border-color: var(--black38); + color: inherit !important; +} + +.branch-like-navigation-toggler:active, +.branch-like-navigation-toggler.open { + border-color: var(--primary); +} + +.branch-like-navigation-toggler-container { + height: 26px; +} + .branch-like-navigation-toggler-container .popup { min-width: 430px; max-width: 650px; diff --git a/server/sonar-web/src/main/js/app/components/nav/component/branch-like/BranchLikeNavigation.tsx b/server/sonar-web/src/main/js/app/components/nav/component/branch-like/BranchLikeNavigation.tsx index 3688efac0b2..d0bee5e91f1 100644 --- a/server/sonar-web/src/main/js/app/components/nav/component/branch-like/BranchLikeNavigation.tsx +++ b/server/sonar-web/src/main/js/app/components/nav/component/branch-like/BranchLikeNavigation.tsx @@ -19,6 +19,7 @@ */ import classNames from 'classnames'; import * as React from 'react'; +import { ButtonPlain } from '../../../../../components/controls/buttons'; import Toggler from '../../../../../components/controls/Toggler'; import { ProjectAlmBindingResponse } from '../../../../../types/alm-settings'; import { AppState } from '../../../../../types/appstate'; @@ -65,9 +66,12 @@ export function BranchLikeNavigation(props: BranchLikeNavigationProps) { return ( <span - className={classNames('big-spacer-left flex-0 branch-like-navigation-toggler-container', { - dropdown: isMenuEnabled - })}> + className={classNames( + 'big-spacer-left flex-0 branch-like-navigation-toggler-container display-flex-center', + { + dropdown: isMenuEnabled + } + )}> {isMenuEnabled ? ( <Toggler onRequestClose={() => setIsMenuOpen(false)} @@ -81,12 +85,13 @@ export function BranchLikeNavigation(props: BranchLikeNavigationProps) { onClose={() => setIsMenuOpen(false)} /> }> - <a - className="link-base-color link-no-underline" - href="#" - onClick={() => setIsMenuOpen(!isMenuOpen)}> + <ButtonPlain + className={classNames('branch-like-navigation-toggler', { open: isMenuOpen })} + onClick={() => setIsMenuOpen(!isMenuOpen)} + aria-expanded={isMenuOpen} + aria-haspopup="menu"> {currentBranchLikeElement} - </a> + </ButtonPlain> </Toggler> ) : ( currentBranchLikeElement diff --git a/server/sonar-web/src/main/js/app/components/nav/component/branch-like/CurrentBranchLike.tsx b/server/sonar-web/src/main/js/app/components/nav/component/branch-like/CurrentBranchLike.tsx index 32ec2231bf3..79a6ec109df 100644 --- a/server/sonar-web/src/main/js/app/components/nav/component/branch-like/CurrentBranchLike.tsx +++ b/server/sonar-web/src/main/js/app/components/nav/component/branch-like/CurrentBranchLike.tsx @@ -57,12 +57,12 @@ export function CurrentBranchLike(props: CurrentBranchLikeProps) { const isGitLab = projectBinding !== undefined && projectBinding.alm === AlmKeys.GitLab; const additionalIcon = () => { - const plusIcon = <PlusCircleIcon fill={colors.blue} size={12} />; - if (branchesEnabled && hasManyBranches) { return <DropdownIcon />; } + const plusIcon = <PlusCircleIcon fill={colors.info500} size={12} />; + if (isApplication) { if (!hasManyBranches && canAdminComponent) { return ( @@ -144,7 +144,7 @@ export function CurrentBranchLike(props: CurrentBranchLikeProps) { return ( <span className="display-flex-center flex-shrink text-ellipsis"> - <BranchLikeIcon branchLike={currentBranchLike} /> + <BranchLikeIcon branchLike={currentBranchLike} fill={colors.info500} /> <span className="spacer-left spacer-right flex-shrink text-ellipsis js-branch-like-name" title={displayName}> diff --git a/server/sonar-web/src/main/js/app/components/nav/component/branch-like/__tests__/BranchLikeNavigation-test.tsx b/server/sonar-web/src/main/js/app/components/nav/component/branch-like/__tests__/BranchLikeNavigation-test.tsx index c98569e90a8..4be90c8c544 100644 --- a/server/sonar-web/src/main/js/app/components/nav/component/branch-like/__tests__/BranchLikeNavigation-test.tsx +++ b/server/sonar-web/src/main/js/app/components/nav/component/branch-like/__tests__/BranchLikeNavigation-test.tsx @@ -19,6 +19,7 @@ */ import { shallow } from 'enzyme'; import * as React from 'react'; +import { ButtonPlain } from '../../../../../../components/controls/buttons'; import Toggler from '../../../../../../components/controls/Toggler'; import { mockSetOfBranchAndPullRequest } from '../../../../../../helpers/mocks/branch-like'; import { mockComponent } from '../../../../../../helpers/mocks/component'; @@ -40,10 +41,10 @@ it('should properly toggle menu opening when clicking the anchor', () => { const wrapper = shallowRender({ appState: mockAppState({ branchesEnabled: true }) }); expect(wrapper.find(Toggler).props().open).toBe(false); - click(wrapper.find('a')); + click(wrapper.find(ButtonPlain)); expect(wrapper.find(Toggler).props().open).toBe(true); - click(wrapper.find('a')); + click(wrapper.find(ButtonPlain)); expect(wrapper.find(Toggler).props().open).toBe(false); }); @@ -51,7 +52,7 @@ it('should properly close menu when toggler asks for', () => { const wrapper = shallowRender({ appState: mockAppState({ branchesEnabled: true }) }); expect(wrapper.find(Toggler).props().open).toBe(false); - click(wrapper.find('a')); + click(wrapper.find(ButtonPlain)); expect(wrapper.find(Toggler).props().open).toBe(true); wrapper diff --git a/server/sonar-web/src/main/js/app/components/nav/component/branch-like/__tests__/__snapshots__/BranchLikeNavigation-test.tsx.snap b/server/sonar-web/src/main/js/app/components/nav/component/branch-like/__tests__/__snapshots__/BranchLikeNavigation-test.tsx.snap index 9a956e3303c..d70c3604f56 100644 --- a/server/sonar-web/src/main/js/app/components/nav/component/branch-like/__tests__/__snapshots__/BranchLikeNavigation-test.tsx.snap +++ b/server/sonar-web/src/main/js/app/components/nav/component/branch-like/__tests__/__snapshots__/BranchLikeNavigation-test.tsx.snap @@ -2,7 +2,7 @@ exports[`should render correctly 1`] = ` <span - className="big-spacer-left flex-0 branch-like-navigation-toggler-container" + className="big-spacer-left flex-0 branch-like-navigation-toggler-container display-flex-center" > <Memo(CurrentBranchLike) branchesEnabled={false} @@ -43,7 +43,7 @@ exports[`should render correctly 1`] = ` exports[`should render the menu trigger if branches are enabled 1`] = ` <span - className="big-spacer-left flex-0 branch-like-navigation-toggler-container dropdown" + className="big-spacer-left flex-0 branch-like-navigation-toggler-container display-flex-center dropdown" > <Toggler onRequestClose={[Function]} @@ -149,9 +149,10 @@ exports[`should render the menu trigger if branches are enabled 1`] = ` /> } > - <a - className="link-base-color link-no-underline" - href="#" + <ButtonPlain + aria-expanded={false} + aria-haspopup="menu" + className="branch-like-navigation-toggler" onClick={[Function]} > <Memo(CurrentBranchLike) @@ -188,7 +189,7 @@ exports[`should render the menu trigger if branches are enabled 1`] = ` } hasManyBranches={true} /> - </a> + </ButtonPlain> </Toggler> </span> `; diff --git a/server/sonar-web/src/main/js/app/components/nav/component/branch-like/__tests__/__snapshots__/CurrentBranchLike-test.tsx.snap b/server/sonar-web/src/main/js/app/components/nav/component/branch-like/__tests__/__snapshots__/CurrentBranchLike-test.tsx.snap index e45e2c250b4..03c55f4adfc 100644 --- a/server/sonar-web/src/main/js/app/components/nav/component/branch-like/__tests__/__snapshots__/CurrentBranchLike-test.tsx.snap +++ b/server/sonar-web/src/main/js/app/components/nav/component/branch-like/__tests__/__snapshots__/CurrentBranchLike-test.tsx.snap @@ -13,6 +13,7 @@ exports[`applications should render correctly when there are many branchlikes 1` "name": "master", } } + fill="#0271B9" /> <span className="spacer-left spacer-right flex-shrink text-ellipsis js-branch-like-name" @@ -37,6 +38,7 @@ exports[`applications should render correctly when there is only one branch and "name": "master", } } + fill="#0271B9" /> <span className="spacer-left spacer-right flex-shrink text-ellipsis js-branch-like-name" @@ -60,6 +62,7 @@ exports[`applications should render correctly when there is only one branch and "name": "master", } } + fill="#0271B9" /> <span className="spacer-left spacer-right flex-shrink text-ellipsis js-branch-like-name" @@ -90,7 +93,7 @@ exports[`applications should render correctly when there is only one branch and } > <PlusCircleIcon - fill="#4b9fd5" + fill="#0271B9" size={12} /> </HelpTooltip> @@ -110,6 +113,7 @@ exports[`projects should render correctly when branches support is disabled: alm "name": "master", } } + fill="#0271B9" /> <span className="spacer-left spacer-right flex-shrink text-ellipsis js-branch-like-name" @@ -131,7 +135,7 @@ exports[`projects should render correctly when branches support is disabled: alm title="branch_like_navigation.no_branch_support.title.mr" > <PlusCircleIcon - fill="#4b9fd5" + fill="#0271B9" size={12} /> </DocumentationTooltip> @@ -151,6 +155,7 @@ exports[`projects should render correctly when branches support is disabled: alm "name": "master", } } + fill="#0271B9" /> <span className="spacer-left spacer-right flex-shrink text-ellipsis js-branch-like-name" @@ -172,7 +177,7 @@ exports[`projects should render correctly when branches support is disabled: alm title="branch_like_navigation.no_branch_support.title.pr" > <PlusCircleIcon - fill="#4b9fd5" + fill="#0271B9" size={12} /> </DocumentationTooltip> @@ -192,6 +197,7 @@ exports[`projects should render correctly when branches support is disabled: def "name": "master", } } + fill="#0271B9" /> <span className="spacer-left spacer-right flex-shrink text-ellipsis js-branch-like-name" @@ -213,7 +219,7 @@ exports[`projects should render correctly when branches support is disabled: def title="branch_like_navigation.no_branch_support.title" > <PlusCircleIcon - fill="#4b9fd5" + fill="#0271B9" size={12} /> </DocumentationTooltip> @@ -233,6 +239,7 @@ exports[`projects should render correctly when there are many branchlikes 1`] = "name": "master", } } + fill="#0271B9" /> <span className="spacer-left spacer-right flex-shrink text-ellipsis js-branch-like-name" @@ -257,6 +264,7 @@ exports[`projects should render correctly when there is only one branchlike 1`] "name": "master", } } + fill="#0271B9" /> <span className="spacer-left spacer-right flex-shrink text-ellipsis js-branch-like-name" @@ -287,7 +295,7 @@ exports[`projects should render correctly when there is only one branchlike 1`] title="branch_like_navigation.only_one_branch.title" > <PlusCircleIcon - fill="#4b9fd5" + fill="#0271B9" size={12} /> </DocumentationTooltip> diff --git a/server/sonar-web/src/main/js/app/components/nav/component/projectInformation/meta/MetaLink.tsx b/server/sonar-web/src/main/js/app/components/nav/component/projectInformation/meta/MetaLink.tsx index 389d2d72bea..651a748a5e2 100644 --- a/server/sonar-web/src/main/js/app/components/nav/component/projectInformation/meta/MetaLink.tsx +++ b/server/sonar-web/src/main/js/app/components/nav/component/projectInformation/meta/MetaLink.tsx @@ -56,7 +56,7 @@ export default class MetaLink extends React.PureComponent<Props, State> { return ( <li> <a - className="link-with-icon" + className="link-no-underline" href={isValid ? link.url : undefined} onClick={isValid ? undefined : this.handleClick} rel="nofollow noreferrer noopener" diff --git a/server/sonar-web/src/main/js/app/components/nav/component/projectInformation/meta/__tests__/__snapshots__/MetaLink-test.tsx.snap b/server/sonar-web/src/main/js/app/components/nav/component/projectInformation/meta/__tests__/__snapshots__/MetaLink-test.tsx.snap index 31c9deade9b..222cc78c4a4 100644 --- a/server/sonar-web/src/main/js/app/components/nav/component/projectInformation/meta/__tests__/__snapshots__/MetaLink-test.tsx.snap +++ b/server/sonar-web/src/main/js/app/components/nav/component/projectInformation/meta/__tests__/__snapshots__/MetaLink-test.tsx.snap @@ -3,7 +3,7 @@ exports[`should match snapshot: dangerous link, collapsed 1`] = ` <li> <a - className="link-with-icon" + className="link-no-underline" onClick={[Function]} rel="nofollow noreferrer noopener" target="_blank" @@ -21,7 +21,7 @@ exports[`should match snapshot: dangerous link, collapsed 1`] = ` exports[`should match snapshot: dangerous link, expanded 1`] = ` <li> <a - className="link-with-icon" + className="link-no-underline" onClick={[Function]} rel="nofollow noreferrer noopener" target="_blank" @@ -54,7 +54,7 @@ exports[`should match snapshot: dangerous link, expanded 1`] = ` exports[`should match snapshot: default 1`] = ` <li> <a - className="link-with-icon" + className="link-no-underline" href="http://example.com" rel="nofollow noreferrer noopener" target="_blank" @@ -72,7 +72,7 @@ exports[`should match snapshot: default 1`] = ` exports[`should match snapshot: icon only 1`] = ` <li> <a - className="link-with-icon" + className="link-no-underline" href="http://example.com" rel="nofollow noreferrer noopener" target="_blank" diff --git a/server/sonar-web/src/main/js/app/components/nav/settings/SettingsNav.tsx b/server/sonar-web/src/main/js/app/components/nav/settings/SettingsNav.tsx index 3a1381823d3..e84059e8629 100644 --- a/server/sonar-web/src/main/js/app/components/nav/settings/SettingsNav.tsx +++ b/server/sonar-web/src/main/js/app/components/nav/settings/SettingsNav.tsx @@ -43,6 +43,8 @@ interface Props { systemStatus: SysStatus; } +const ALERT_HEIGHT = 30; + export class SettingsNav extends React.PureComponent<Props> { static defaultProps = { extensions: [] @@ -249,12 +251,12 @@ export class SettingsNav extends React.PureComponent<Props> { return ( <ContextNavBar - height={notifComponent ? contextNavHeight + 30 : contextNavHeight} + height={notifComponent ? contextNavHeight + ALERT_HEIGHT : contextNavHeight} id="context-navigation" notif={notifComponent}> - <header className="navbar-context-header"> + <div className="navbar-context-header"> <h1>{translate('layout.settings')}</h1> - </header> + </div> <NavBarTabs> {this.renderConfigurationTab()} diff --git a/server/sonar-web/src/main/js/app/components/nav/settings/__tests__/__snapshots__/SettingsNav-test.tsx.snap b/server/sonar-web/src/main/js/app/components/nav/settings/__tests__/__snapshots__/SettingsNav-test.tsx.snap index 029675a85cb..383948b261d 100644 --- a/server/sonar-web/src/main/js/app/components/nav/settings/__tests__/__snapshots__/SettingsNav-test.tsx.snap +++ b/server/sonar-web/src/main/js/app/components/nav/settings/__tests__/__snapshots__/SettingsNav-test.tsx.snap @@ -29,13 +29,13 @@ exports[`should render correctly when governance is active 1`] = ` height={72} id="context-navigation" > - <header + <div className="navbar-context-header" > <h1> layout.settings </h1> - </header> + </div> <NavBarTabs> <Dropdown overlay={ @@ -182,13 +182,13 @@ exports[`should work with extensions 1`] = ` height={72} id="context-navigation" > - <header + <div className="navbar-context-header" > <h1> layout.settings </h1> - </header> + </div> <NavBarTabs> <Dropdown overlay={ diff --git a/server/sonar-web/src/main/js/app/styles/init/links.css b/server/sonar-web/src/main/js/app/styles/init/links.css index ef363db8f11..9d7995d0d8f 100644 --- a/server/sonar-web/src/main/js/app/styles/init/links.css +++ b/server/sonar-web/src/main/js/app/styles/init/links.css @@ -18,8 +18,8 @@ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ a { - border-bottom: 1px solid var(--lightBlue); - color: var(--darkBlue); + border-bottom: 1px solid var(--primary40); + color: var(--primary); cursor: pointer; outline: none; text-decoration: none; @@ -29,91 +29,13 @@ a { a:hover, a:active, a:focus { - color: var(--blue); -} - -.link-base-color { - border-bottom: 1px solid #d0d0d0 !important; - color: var(--baseFontColor) !important; -} - -.link-base-color:hover, -.link-base-color:active, -.link-base-color:focus { - color: var(--blue) !important; -} - -.link-base-color:hover { - border-bottom-color: var(--lightBlue) !important; -} - -.link-base-color:active, -.link-base-color:focus { - border-bottom-color: var(--lightBlue) !important; + border-bottom-color: var(--primary); } .link-no-underline { - border-bottom: none !important; -} - -.link-underline { - border-bottom: 1px solid var(--lightBlue) !important; -} - -.link-with-icon { - border-bottom: none; -} - -.link-with-icon > span:last-child { - border-bottom: 1px solid var(--lightBlue); -} - -.link-checkbox { - color: inherit; - border-bottom: none; -} - -.link-checkbox.disabled, -.link-checkbox.disabled:hover, -.link-checkbox.disabled label { - color: var(--secondFontColor); - cursor: not-allowed; -} - -.link-checkbox:hover, -.link-checkbox:active, -.link-checkbox:focus { - color: inherit; -} - -.link-checkbox-control { - display: inline-block; - padding: 4px 0 5px; - line-height: 16px; -} - -a.active-link, -.link-active { - border-bottom: none; - cursor: default; -} - -a.text-muted { - border-bottom: 1px solid #dddddd; - color: var(--secondFontColor); -} - -a.text-muted:hover, -a.text-muted:active, -a.text-muted:focus { - color: #5e5e5e; -} - -a.text-muted:focus { - outline: 1px dotted var(--blue); + border-bottom-color: transparent !important; } -a.set-homepage-link:focus, -a.favorite-link:focus { - outline: 1px dotted var(--blue); +.link-no-underline:hover { + border-bottom-color: var(--primary) !important; } diff --git a/server/sonar-web/src/main/js/app/theme.js b/server/sonar-web/src/main/js/app/theme.js index 2dd5ec2747e..9a73cecbd3b 100644 --- a/server/sonar-web/src/main/js/app/theme.js +++ b/server/sonar-web/src/main/js/app/theme.js @@ -136,10 +136,23 @@ module.exports = { codeAdded: '#dff0d8', codeRemoved: '#f2dede', - //promotion + // promotion darkBackground: '#292929', darkBackgroundSeparator: '#413b3b', - darkBackgroundFontColor: '#f6f8fa' + darkBackgroundFontColor: '#f6f8fa', + + // new color palette + // some of these colors duplicate what we have above, but this will make it + // easier to align with the UX designers on what colors to use where. + primary: '#236a97', + primary40: 'rgba(35, 107, 151, 0.4)', + + info500: '#0271B9', + + neutral600: '#666666', + neutral800: '#333333', + + black38: 'rgba(0, 0, 0, 0.38)' }, sizes: { diff --git a/server/sonar-web/src/main/js/apps/code/code.css b/server/sonar-web/src/main/js/apps/code/code.css index 7588b745ab2..739ec197e88 100644 --- a/server/sonar-web/src/main/js/apps/code/code.css +++ b/server/sonar-web/src/main/js/apps/code/code.css @@ -36,6 +36,7 @@ .code-breadcrumbs > li { padding: 5px 5px 3px; + display: flex; } .code-breadcrumbs > li:first-child { @@ -44,7 +45,7 @@ .code-breadcrumbs > li::after { position: relative; - top: -1px; + top: 1px; padding-left: 10px; color: var(--secondFontColor); font-size: 11px; diff --git a/server/sonar-web/src/main/js/apps/code/components/ComponentName.tsx b/server/sonar-web/src/main/js/apps/code/components/ComponentName.tsx index 6c96b8a34cf..a22e7b7989a 100644 --- a/server/sonar-web/src/main/js/apps/code/components/ComponentName.tsx +++ b/server/sonar-web/src/main/js/apps/code/components/ComponentName.tsx @@ -132,16 +132,19 @@ function renderNameWithIcon( : undefined; return ( <Link - className="link-with-icon" + className="display-inline-flex-center link-no-underline" to={getComponentOverviewUrl( component.refKey || component.key, component.qualifier, - { - branch - }, + { branch }, codeType )}> - <QualifierIcon qualifier={component.qualifier} /> <span>{name}</span> + <QualifierIcon + className="little-spacer-right" + qualifier={component.qualifier} + fill={colors.primary} + /> + <span>{name}</span> </Link> ); } else if (canBrowse) { @@ -150,14 +153,27 @@ function renderNameWithIcon( Object.assign(query, { selected: component.key }); } return ( - <Link className="link-with-icon" to={{ pathname: '/code', search: queryToSearch(query) }}> - <QualifierIcon qualifier={component.qualifier} /> <span>{name}</span> + <Link + className="display-inline-flex-center link-no-underline" + to={{ pathname: '/code', search: queryToSearch(query) }}> + <QualifierIcon + className="little-spacer-right" + qualifier={component.qualifier} + fill={colors.primary} + /> + <span>{name}</span> </Link> ); } return ( <span> - <QualifierIcon qualifier={component.qualifier} /> {name} + <QualifierIcon + qualifier={component.qualifier} + fill={ + component.qualifier === ComponentQualifier.Directory ? colors.orange : colors.neutral800 + } + />{' '} + {name} </span> ); } diff --git a/server/sonar-web/src/main/js/apps/code/components/__tests__/__snapshots__/ComponentName-test.tsx.snap b/server/sonar-web/src/main/js/apps/code/components/__tests__/__snapshots__/ComponentName-test.tsx.snap index e54bcc69a92..0160ee7d449 100644 --- a/server/sonar-web/src/main/js/apps/code/components/__tests__/__snapshots__/ComponentName-test.tsx.snap +++ b/server/sonar-web/src/main/js/apps/code/components/__tests__/__snapshots__/ComponentName-test.tsx.snap @@ -10,6 +10,7 @@ foo" > <span> <QualifierIcon + fill="#333333" qualifier="APP" /> @@ -28,6 +29,7 @@ foo" > <span> <QualifierIcon + fill="#333333" qualifier="SVW" /> @@ -46,6 +48,7 @@ foo" > <span> <QualifierIcon + fill="#333333" qualifier="TRK" /> @@ -64,6 +67,7 @@ foo" > <span> <QualifierIcon + fill="#333333" qualifier="TRK" /> @@ -82,6 +86,7 @@ foo" > <span> <QualifierIcon + fill="#333333" qualifier="VW" /> @@ -99,6 +104,7 @@ foo" > <span> <QualifierIcon + fill="#ed7d20" qualifier="DIR" /> @@ -129,6 +135,7 @@ foo" > <span> <QualifierIcon + fill="#ed7d20" qualifier="DIR" /> @@ -146,6 +153,7 @@ foo:src/index.tsx" > <span> <QualifierIcon + fill="#333333" qualifier="FIL" /> @@ -162,7 +170,7 @@ exports[`#ComponentName should render correctly for files 2`] = ` foo:src/index.tsx" > <Link - className="link-with-icon" + className="display-inline-flex-center link-no-underline" to={ Object { "pathname": "/code", @@ -171,9 +179,10 @@ foo:src/index.tsx" } > <QualifierIcon + className="little-spacer-right" + fill="#236a97" qualifier="FIL" /> - <span> index.tsx </span> @@ -190,6 +199,7 @@ foo:src/index.tsx" > <span> <QualifierIcon + fill="#333333" qualifier="FIL" /> @@ -207,6 +217,7 @@ foo:src/index.tsx" > <span> <QualifierIcon + fill="#333333" qualifier="FIL" /> @@ -224,6 +235,7 @@ foo:src/index.tsx" > <span> <QualifierIcon + fill="#333333" qualifier="FIL" /> @@ -241,6 +253,7 @@ foo:src/index.tsx" > <span> <QualifierIcon + fill="#333333" qualifier="FIL" /> @@ -258,6 +271,7 @@ foo:src/index.tsx" > <span> <QualifierIcon + fill="#333333" qualifier="FIL" /> @@ -276,7 +290,7 @@ foo foo" > <Link - className="link-with-icon" + className="display-inline-flex-center link-no-underline" to={ Object { "pathname": "/dashboard", @@ -285,9 +299,10 @@ foo" } > <QualifierIcon + className="little-spacer-right" + fill="#236a97" qualifier="TRK" /> - <span> Foo </span> @@ -308,7 +323,7 @@ foo foo" > <Link - className="link-with-icon" + className="display-inline-flex-center link-no-underline" to={ Object { "pathname": "/dashboard", @@ -317,9 +332,10 @@ foo" } > <QualifierIcon + className="little-spacer-right" + fill="#236a97" qualifier="TRK" /> - <span> Foo </span> @@ -351,7 +367,7 @@ exports[`#ComponentName should render correctly for refs 3`] = ` foo" > <Link - className="link-with-icon" + className="display-inline-flex-center link-no-underline" to={ Object { "pathname": "/dashboard", @@ -360,9 +376,10 @@ foo" } > <QualifierIcon + className="little-spacer-right" + fill="#236a97" qualifier="TRK" /> - <span> Foo </span> diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsProfiles.tsx b/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsProfiles.tsx index e0ed6fe2146..5d8a86d738a 100644 --- a/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsProfiles.tsx +++ b/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsProfiles.tsx @@ -73,7 +73,7 @@ export default class RuleDetailsProfiles extends React.PureComponent<Props> { {(activation.inherit === 'OVERRIDES' || activation.inherit === 'INHERITED') && ( <> <RuleInheritanceIcon className="text-middle" inheritance={activation.inherit} /> - <Link className="link-base-color little-spacer-left text-middle" to={profilePath}> + <Link className="little-spacer-left text-middle" to={profilePath}> {profile.parentName} </Link> </> diff --git a/server/sonar-web/src/main/js/apps/create/project/AzurePersonalAccessTokenForm.tsx b/server/sonar-web/src/main/js/apps/create/project/AzurePersonalAccessTokenForm.tsx index a6350387a22..67ba28ef4aa 100644 --- a/server/sonar-web/src/main/js/apps/create/project/AzurePersonalAccessTokenForm.tsx +++ b/server/sonar-web/src/main/js/apps/create/project/AzurePersonalAccessTokenForm.tsx @@ -73,7 +73,7 @@ export default function AzurePersonalAccessTokenForm(props: AzurePersonalAccessT values={{ link: url ? ( <a - className="link-with-icon" + className="link-no-underline" href={getAzurePatUrl(url)} rel="noopener noreferrer" target="_blank"> diff --git a/server/sonar-web/src/main/js/apps/create/project/BitbucketProjectAccordion.tsx b/server/sonar-web/src/main/js/apps/create/project/BitbucketProjectAccordion.tsx index b1c05705ec8..4bd638587d0 100644 --- a/server/sonar-web/src/main/js/apps/create/project/BitbucketProjectAccordion.tsx +++ b/server/sonar-web/src/main/js/apps/create/project/BitbucketProjectAccordion.tsx @@ -119,9 +119,7 @@ export default function BitbucketProjectAccordion(props: BitbucketProjectAccordi className={classNames( 'display-flex-start spacer-right spacer-bottom create-project-import-bbs-repo overflow-hidden', { - disabled: disableRepositories, - 'text-muted': disableRepositories, - 'link-no-underline': disableRepositories + disabled: disableRepositories } )} key={repo.id} diff --git a/server/sonar-web/src/main/js/apps/create/project/__tests__/__snapshots__/AzurePersonalAccessTokenForm-test.tsx.snap b/server/sonar-web/src/main/js/apps/create/project/__tests__/__snapshots__/AzurePersonalAccessTokenForm-test.tsx.snap index c8399e96c85..685eb640c7e 100644 --- a/server/sonar-web/src/main/js/apps/create/project/__tests__/__snapshots__/AzurePersonalAccessTokenForm-test.tsx.snap +++ b/server/sonar-web/src/main/js/apps/create/project/__tests__/__snapshots__/AzurePersonalAccessTokenForm-test.tsx.snap @@ -19,7 +19,7 @@ exports[`should render correctly: default 1`] = ` values={ Object { "link": <a - className="link-with-icon" + className="link-no-underline" href="http://www.example.com/_usersSettings/tokens" rel="noopener noreferrer" target="_blank" @@ -95,7 +95,7 @@ exports[`should render correctly: submitting 1`] = ` values={ Object { "link": <a - className="link-with-icon" + className="link-no-underline" href="http://www.example.com/_usersSettings/tokens" rel="noopener noreferrer" target="_blank" @@ -171,7 +171,7 @@ exports[`should render correctly: validation failed 1`] = ` values={ Object { "link": <a - className="link-with-icon" + className="link-no-underline" href="http://www.example.com/_usersSettings/tokens" rel="noopener noreferrer" target="_blank" diff --git a/server/sonar-web/src/main/js/apps/create/project/__tests__/__snapshots__/BitbucketProjectAccordion-test.tsx.snap b/server/sonar-web/src/main/js/apps/create/project/__tests__/__snapshots__/BitbucketProjectAccordion-test.tsx.snap index 4afde710ce4..bbcf7b5ecbe 100644 --- a/server/sonar-web/src/main/js/apps/create/project/__tests__/__snapshots__/BitbucketProjectAccordion-test.tsx.snap +++ b/server/sonar-web/src/main/js/apps/create/project/__tests__/__snapshots__/BitbucketProjectAccordion-test.tsx.snap @@ -96,7 +96,7 @@ exports[`should render correctly: disable options 1`] = ` > <Radio checked={false} - className="display-flex-start spacer-right spacer-bottom create-project-import-bbs-repo overflow-hidden disabled text-muted link-no-underline" + className="display-flex-start spacer-right spacer-bottom create-project-import-bbs-repo overflow-hidden disabled" key="1" onCheck={[Function]} value="1" diff --git a/server/sonar-web/src/main/js/apps/issues/crossComponentSourceViewer/IssueSourceViewerHeader.tsx b/server/sonar-web/src/main/js/apps/issues/crossComponentSourceViewer/IssueSourceViewerHeader.tsx index cd749078555..16672277108 100644 --- a/server/sonar-web/src/main/js/apps/issues/crossComponentSourceViewer/IssueSourceViewerHeader.tsx +++ b/server/sonar-web/src/main/js/apps/issues/crossComponentSourceViewer/IssueSourceViewerHeader.tsx @@ -74,7 +74,7 @@ export default function IssueSourceViewerHeader(props: Props) { <div className="spacer-right"> {linkToProject ? ( <a - className="link-with-icon" + className="link-no-underline" href={getPathUrlAsString(getBranchLikeUrl(project, branchLike))}> {projectNameLabel} </a> diff --git a/server/sonar-web/src/main/js/apps/issues/crossComponentSourceViewer/__tests__/__snapshots__/IssueSourceViewerHeader-test.tsx.snap b/server/sonar-web/src/main/js/apps/issues/crossComponentSourceViewer/__tests__/__snapshots__/IssueSourceViewerHeader-test.tsx.snap index e571d0d0e36..db4633e9607 100644 --- a/server/sonar-web/src/main/js/apps/issues/crossComponentSourceViewer/__tests__/__snapshots__/IssueSourceViewerHeader-test.tsx.snap +++ b/server/sonar-web/src/main/js/apps/issues/crossComponentSourceViewer/__tests__/__snapshots__/IssueSourceViewerHeader-test.tsx.snap @@ -13,7 +13,7 @@ exports[`should render correctly 1`] = ` className="spacer-right" > <a - className="link-with-icon" + className="link-no-underline" href="/dashboard?id=my-project" > <QualifierIcon @@ -241,7 +241,7 @@ exports[`should render correctly: project root 1`] = ` className="spacer-right" > <a - className="link-with-icon" + className="link-no-underline" href="/dashboard?id=my-project" > <QualifierIcon diff --git a/server/sonar-web/src/main/js/apps/permission-templates/components/TemplateHeader.tsx b/server/sonar-web/src/main/js/apps/permission-templates/components/TemplateHeader.tsx index 4a4addbb9ae..09eca7b0f1c 100644 --- a/server/sonar-web/src/main/js/apps/permission-templates/components/TemplateHeader.tsx +++ b/server/sonar-web/src/main/js/apps/permission-templates/components/TemplateHeader.tsx @@ -36,9 +36,7 @@ export default function TemplateHeader(props: Props) { return ( <header className="page-header" id="project-permissions-header"> <div className="note spacer-bottom"> - <Link className="text-muted" to={PERMISSION_TEMPLATES_PATH}> - {translate('permission_templates.page')} - </Link> + <Link to={PERMISSION_TEMPLATES_PATH}>{translate('permission_templates.page')}</Link> </div> <h1 className="page-title">{template.name}</h1> diff --git a/server/sonar-web/src/main/js/apps/projectsManagement/ProjectRow.tsx b/server/sonar-web/src/main/js/apps/projectsManagement/ProjectRow.tsx index 1cb7d26e0ba..5178b23c919 100644 --- a/server/sonar-web/src/main/js/apps/projectsManagement/ProjectRow.tsx +++ b/server/sonar-web/src/main/js/apps/projectsManagement/ProjectRow.tsx @@ -53,7 +53,7 @@ export default class ProjectRow extends React.PureComponent<Props> { <td className="nowrap hide-overflow project-row-text-cell"> <Link - className="link-with-icon" + className="link-no-underline" to={getComponentOverviewUrl(project.key, project.qualifier)}> <QualifierIcon className="little-spacer-right" qualifier={project.qualifier} /> diff --git a/server/sonar-web/src/main/js/apps/projectsManagement/__tests__/__snapshots__/ProjectRow-test.tsx.snap b/server/sonar-web/src/main/js/apps/projectsManagement/__tests__/__snapshots__/ProjectRow-test.tsx.snap index 69db1456cc3..19273a75709 100644 --- a/server/sonar-web/src/main/js/apps/projectsManagement/__tests__/__snapshots__/ProjectRow-test.tsx.snap +++ b/server/sonar-web/src/main/js/apps/projectsManagement/__tests__/__snapshots__/ProjectRow-test.tsx.snap @@ -17,7 +17,7 @@ exports[`renders 1`] = ` className="nowrap hide-overflow project-row-text-cell" > <Link - className="link-with-icon" + className="link-no-underline" to={ Object { "pathname": "/dashboard", @@ -109,7 +109,7 @@ exports[`renders: portfolio 1`] = ` className="nowrap hide-overflow project-row-text-cell" > <Link - className="link-with-icon" + className="link-no-underline" to={ Object { "pathname": "/portfolio", @@ -201,7 +201,7 @@ exports[`renders: with lastAnalysisDate 1`] = ` className="nowrap hide-overflow project-row-text-cell" > <Link - className="link-with-icon" + className="link-no-underline" to={ Object { "pathname": "/dashboard", diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/components/ProfileNotFound.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/components/ProfileNotFound.tsx index 8c4e6f2c318..02665f130c1 100644 --- a/server/sonar-web/src/main/js/apps/quality-profiles/components/ProfileNotFound.tsx +++ b/server/sonar-web/src/main/js/apps/quality-profiles/components/ProfileNotFound.tsx @@ -26,7 +26,7 @@ export default function ProfileNotFound() { return ( <div className="quality-profile-not-found"> <div className="note spacer-bottom"> - <NavLink end={true} className="text-muted" to={PROFILE_PATH}> + <NavLink end={true} to={PROFILE_PATH}> {translate('quality_profiles.page')} </NavLink> </div> diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileHeader.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileHeader.tsx index 1d4b6ed5d4b..5e147feec6b 100644 --- a/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileHeader.tsx +++ b/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileHeader.tsx @@ -38,19 +38,17 @@ export default class ProfileHeader extends React.PureComponent<Props> { const { profile } = this.props; return ( - <header className="page-header quality-profile-header"> + <div className="page-header quality-profile-header"> <div className="note spacer-bottom"> - <NavLink end={true} className="text-muted" to={PROFILE_PATH}> + <NavLink end={true} to={PROFILE_PATH}> {translate('quality_profiles.page')} </NavLink> {' / '} - <Link className="text-muted" to={getProfilesForLanguagePath(profile.language)}> - {profile.languageName} - </Link> + <Link to={getProfilesForLanguagePath(profile.language)}>{profile.languageName}</Link> </div> <h1 className="page-title"> - <ProfileLink className="link-base-color" language={profile.language} name={profile.name}> + <ProfileLink language={profile.language} name={profile.name}> <span>{profile.name}</span> </ProfileLink> {profile.isDefault && ( @@ -91,7 +89,7 @@ export default class ProfileHeader extends React.PureComponent<Props> { {translate('quality_profiles.built_in.description')} </div> )} - </header> + </div> ); } } diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileProjects.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileProjects.tsx index 0dcc970ab01..a5ad08c1fb6 100644 --- a/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileProjects.tsx +++ b/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileProjects.tsx @@ -147,7 +147,7 @@ export default class ProfileProjects extends React.PureComponent<Props, State> { <ul> {projects.map(project => ( <li className="spacer-top js-profile-project" data-key={project.key} key={project.key}> - <Link className="link-with-icon" to={getProjectUrl(project.key)}> + <Link to={getProjectUrl(project.key)}> <QualifierIcon qualifier="TRK" /> <span>{project.name}</span> </Link> </li> diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileRulesRowOfType.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileRulesRowOfType.tsx index 2243f339ffe..3f813408c04 100644 --- a/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileRulesRowOfType.tsx +++ b/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileRulesRowOfType.tsx @@ -63,11 +63,11 @@ export default function ProfileRulesRowOfType(props: Props) { <td className="thin nowrap text-right"> {inactiveCount != null && (inactiveCount > 0 ? ( - <Link className="small text-muted" to={inactiveRulesUrl}> + <Link className="small" to={inactiveRulesUrl}> {formatMeasure(inactiveCount, 'SHORT_INT', null)} </Link> ) : ( - <span className="note text-muted">0</span> + <span className="note">0</span> ))} </td> </tr> diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileRulesRowTotal.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileRulesRowTotal.tsx index 45bd13b3f6c..62156642237 100644 --- a/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileRulesRowTotal.tsx +++ b/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileRulesRowTotal.tsx @@ -52,11 +52,11 @@ export default function ProfileRulesRowTotal(props: Props) { <td className="thin nowrap text-right"> {inactiveCount != null && (inactiveCount > 0 ? ( - <Link className="small text-muted" to={inactiveRulesUrl}> + <Link className="small" to={inactiveRulesUrl}> <strong>{formatMeasure(inactiveCount, 'SHORT_INT', null)}</strong> </Link> ) : ( - <span className="note text-muted">0</span> + <span className="note">0</span> ))} </td> </tr> diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/details/__tests__/__snapshots__/ProfileHeader-test.tsx.snap b/server/sonar-web/src/main/js/apps/quality-profiles/details/__tests__/__snapshots__/ProfileHeader-test.tsx.snap index db6386f4230..8b99596ac38 100644 --- a/server/sonar-web/src/main/js/apps/quality-profiles/details/__tests__/__snapshots__/ProfileHeader-test.tsx.snap +++ b/server/sonar-web/src/main/js/apps/quality-profiles/details/__tests__/__snapshots__/ProfileHeader-test.tsx.snap @@ -1,14 +1,13 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`should render correctly 1`] = ` -<header +<div className="page-header quality-profile-header" > <div className="note spacer-bottom" > <NavLink - className="text-muted" end={true} to="/profiles" > @@ -16,7 +15,6 @@ exports[`should render correctly 1`] = ` </NavLink> / <Link - className="text-muted" to={ Object { "pathname": "/profiles", @@ -31,7 +29,6 @@ exports[`should render correctly 1`] = ` className="page-title" > <ProfileLink - className="link-base-color" language="js" name="name" > @@ -102,18 +99,17 @@ exports[`should render correctly 1`] = ` </li> </ul> </div> -</header> +</div> `; exports[`should render correctly: for default profile 1`] = ` -<header +<div className="page-header quality-profile-header" > <div className="note spacer-bottom" > <NavLink - className="text-muted" end={true} to="/profiles" > @@ -121,7 +117,6 @@ exports[`should render correctly: for default profile 1`] = ` </NavLink> / <Link - className="text-muted" to={ Object { "pathname": "/profiles", @@ -136,7 +131,6 @@ exports[`should render correctly: for default profile 1`] = ` className="page-title" > <ProfileLink - className="link-base-color" language="js" name="name" > @@ -216,5 +210,5 @@ exports[`should render correctly: for default profile 1`] = ` </li> </ul> </div> -</header> +</div> `; diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/details/__tests__/__snapshots__/ProfileProjects-test.tsx.snap b/server/sonar-web/src/main/js/apps/quality-profiles/details/__tests__/__snapshots__/ProfileProjects-test.tsx.snap index f7310b99075..cfb7b753c46 100644 --- a/server/sonar-web/src/main/js/apps/quality-profiles/details/__tests__/__snapshots__/ProfileProjects-test.tsx.snap +++ b/server/sonar-web/src/main/js/apps/quality-profiles/details/__tests__/__snapshots__/ProfileProjects-test.tsx.snap @@ -36,7 +36,6 @@ exports[`should render correctly: default 1`] = ` key="org.sonarsource.xml:xml" > <Link - className="link-with-icon" to={ Object { "pathname": "/dashboard", @@ -136,7 +135,6 @@ exports[`should render correctly: no active rules, but associated projects 1`] = key="org.sonarsource.xml:xml" > <Link - className="link-with-icon" to={ Object { "pathname": "/dashboard", @@ -221,7 +219,6 @@ exports[`should render correctly: no rights 1`] = ` key="org.sonarsource.xml:xml" > <Link - className="link-with-icon" to={ Object { "pathname": "/dashboard", diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/details/__tests__/__snapshots__/ProfileRulesRowOfType-test.tsx.snap b/server/sonar-web/src/main/js/apps/quality-profiles/details/__tests__/__snapshots__/ProfileRulesRowOfType-test.tsx.snap index 74a4d1abcf2..a1eb150e996 100644 --- a/server/sonar-web/src/main/js/apps/quality-profiles/details/__tests__/__snapshots__/ProfileRulesRowOfType-test.tsx.snap +++ b/server/sonar-web/src/main/js/apps/quality-profiles/details/__tests__/__snapshots__/ProfileRulesRowOfType-test.tsx.snap @@ -29,7 +29,7 @@ exports[`should render correctly 1`] = ` className="thin nowrap text-right" > <Link - className="small text-muted" + className="small" to={ Object { "pathname": "/coding_rules", @@ -72,7 +72,7 @@ exports[`should render correctly if there is 0 rules 1`] = ` className="thin nowrap text-right" > <span - className="note text-muted" + className="note" > 0 </span> diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/details/__tests__/__snapshots__/ProfileRulesRowTotal-test.tsx.snap b/server/sonar-web/src/main/js/apps/quality-profiles/details/__tests__/__snapshots__/ProfileRulesRowTotal-test.tsx.snap index 5e18680e3b4..695b3fbe044 100644 --- a/server/sonar-web/src/main/js/apps/quality-profiles/details/__tests__/__snapshots__/ProfileRulesRowTotal-test.tsx.snap +++ b/server/sonar-web/src/main/js/apps/quality-profiles/details/__tests__/__snapshots__/ProfileRulesRowTotal-test.tsx.snap @@ -27,7 +27,7 @@ exports[`should render correctly 1`] = ` className="thin nowrap text-right" > <Link - className="small text-muted" + className="small" to={ Object { "pathname": "/coding_rules", @@ -70,7 +70,7 @@ exports[`should render correctly if there is 0 rules 1`] = ` className="thin nowrap text-right" > <span - className="note text-muted" + className="note" > 0 </span> diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/home/EvolutionDeprecated.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/home/EvolutionDeprecated.tsx index 18a7b1f33e3..3c7ce567769 100644 --- a/server/sonar-web/src/main/js/apps/quality-profiles/home/EvolutionDeprecated.tsx +++ b/server/sonar-web/src/main/js/apps/quality-profiles/home/EvolutionDeprecated.tsx @@ -119,11 +119,8 @@ export default class EvolutionDeprecated extends React.PureComponent<Props> { <ul> {sortedProfiles.map(profile => ( <li className="spacer-top" key={profile.key}> - <div className="text-ellipsis"> - <ProfileLink - className="link-no-underline" - language={profile.language} - name={profile.name}> + <div className="text-ellipsis little-spacer-bottom"> + <ProfileLink language={profile.language} name={profile.name}> {profile.name} </ProfileLink> </div> @@ -131,7 +128,7 @@ export default class EvolutionDeprecated extends React.PureComponent<Props> { {profile.languageName} {', '} <Link - className="text-muted" + className="link-no-underline" to={getDeprecatedActiveRulesUrl({ qprofile: profile.key })}> {translateWithParameters( 'quality_profile.x_rules', diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/home/__tests__/__snapshots__/EvolutionDeprecated-test.tsx.snap b/server/sonar-web/src/main/js/apps/quality-profiles/home/__tests__/__snapshots__/EvolutionDeprecated-test.tsx.snap index 292172b31e5..9166e4285dd 100644 --- a/server/sonar-web/src/main/js/apps/quality-profiles/home/__tests__/__snapshots__/EvolutionDeprecated-test.tsx.snap +++ b/server/sonar-web/src/main/js/apps/quality-profiles/home/__tests__/__snapshots__/EvolutionDeprecated-test.tsx.snap @@ -22,10 +22,9 @@ exports[`should render correctly 1`] = ` key="qp-5" > <div - className="text-ellipsis" + className="text-ellipsis little-spacer-bottom" > <ProfileLink - className="link-no-underline" language="js" name="Quality Profile 5" > @@ -38,7 +37,7 @@ exports[`should render correctly 1`] = ` JavaScript , <Link - className="text-muted" + className="link-no-underline" to={ Object { "pathname": "/coding_rules", @@ -69,10 +68,9 @@ exports[`should render correctly 1`] = ` key="qp-4" > <div - className="text-ellipsis" + className="text-ellipsis little-spacer-bottom" > <ProfileLink - className="link-no-underline" language="js" name="Quality Profile 4" > @@ -85,7 +83,7 @@ exports[`should render correctly 1`] = ` JavaScript , <Link - className="text-muted" + className="link-no-underline" to={ Object { "pathname": "/coding_rules", @@ -109,10 +107,9 @@ exports[`should render correctly 1`] = ` key="qp-2" > <div - className="text-ellipsis" + className="text-ellipsis little-spacer-bottom" > <ProfileLink - className="link-no-underline" language="js" name="Quality Profile 2" > @@ -125,7 +122,7 @@ exports[`should render correctly 1`] = ` JavaScript , <Link - className="text-muted" + className="link-no-underline" to={ Object { "pathname": "/coding_rules", @@ -142,10 +139,9 @@ exports[`should render correctly 1`] = ` key="qp-3" > <div - className="text-ellipsis" + className="text-ellipsis little-spacer-bottom" > <ProfileLink - className="link-no-underline" language="js" name="Quality Profile 3" > @@ -158,7 +154,7 @@ exports[`should render correctly 1`] = ` JavaScript , <Link - className="text-muted" + className="link-no-underline" to={ Object { "pathname": "/coding_rules", diff --git a/server/sonar-web/src/main/js/apps/sessions/components/LoginForm.tsx b/server/sonar-web/src/main/js/apps/sessions/components/LoginForm.tsx index aa137b6a5bb..c395c1f80d0 100644 --- a/server/sonar-web/src/main/js/apps/sessions/components/LoginForm.tsx +++ b/server/sonar-web/src/main/js/apps/sessions/components/LoginForm.tsx @@ -18,7 +18,7 @@ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ import * as React from 'react'; -import { SubmitButton } from '../../../components/controls/buttons'; +import { ButtonLink, SubmitButton } from '../../../components/controls/buttons'; import DeferredSpinner from '../../../components/ui/DeferredSpinner'; import { translate } from '../../../helpers/l10n'; import { getBaseUrl } from '../../../helpers/system'; @@ -59,8 +59,7 @@ export default class LoginForm extends React.PureComponent<Props, State> { .then(this.stopLoading, this.stopLoading); }; - handleMoreOptionsClick = (event: React.MouseEvent<HTMLAnchorElement>) => { - event.preventDefault(); + handleMoreOptionsClick = () => { this.setState({ collapsed: false }); }; @@ -74,12 +73,12 @@ export default class LoginForm extends React.PureComponent<Props, State> { if (this.state.collapsed) { return ( <div className="text-center"> - <a - className="small text-muted js-more-options" - href="#" + <ButtonLink + aria-expanded={false} + className="small js-more-options" onClick={this.handleMoreOptionsClick}> {translate('login.more_options')} - </a> + </ButtonLink> </div> ); } diff --git a/server/sonar-web/src/main/js/apps/sessions/components/__tests__/__snapshots__/LoginForm-test.tsx.snap b/server/sonar-web/src/main/js/apps/sessions/components/__tests__/__snapshots__/LoginForm-test.tsx.snap index d45b1952809..3d97ba42e31 100644 --- a/server/sonar-web/src/main/js/apps/sessions/components/__tests__/__snapshots__/LoginForm-test.tsx.snap +++ b/server/sonar-web/src/main/js/apps/sessions/components/__tests__/__snapshots__/LoginForm-test.tsx.snap @@ -4,13 +4,13 @@ exports[`expands more options 1`] = ` <div className="text-center" > - <a - className="small text-muted js-more-options" - href="#" + <ButtonLink + aria-expanded={false} + className="small js-more-options" onClick={[Function]} > login.more_options - </a> + </ButtonLink> </div> `; 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 c04ccc4f6fd..7343f6a8420 100644 --- a/server/sonar-web/src/main/js/components/SourceViewer/SourceViewerHeader.tsx +++ b/server/sonar-web/src/main/js/components/SourceViewer/SourceViewerHeader.tsx @@ -129,9 +129,9 @@ export default class SourceViewerHeader extends React.PureComponent<Props, State <div className="component-name"> <div className="component-name-parent"> <a - className="link-with-icon" + className="link-no-underline" href={getPathUrlAsString(getBranchLikeUrl(project, this.props.branchLike))}> - <QualifierIcon qualifier="TRK" /> <span>{projectName}</span> + <QualifierIcon qualifier={ComponentQualifier.Project} /> <span>{projectName}</span> </a> </div> diff --git a/server/sonar-web/src/main/js/components/SourceViewer/__tests__/__snapshots__/SourceViewerHeader-test.tsx.snap b/server/sonar-web/src/main/js/components/SourceViewer/__tests__/__snapshots__/SourceViewerHeader-test.tsx.snap index f5c25d061ba..1aa0e65f921 100644 --- a/server/sonar-web/src/main/js/components/SourceViewer/__tests__/__snapshots__/SourceViewerHeader-test.tsx.snap +++ b/server/sonar-web/src/main/js/components/SourceViewer/__tests__/__snapshots__/SourceViewerHeader-test.tsx.snap @@ -14,7 +14,7 @@ exports[`should render correctly for a regular file 1`] = ` className="component-name-parent" > <a - className="link-with-icon" + className="link-no-underline" href="/dashboard?id=project" > <QualifierIcon @@ -129,7 +129,7 @@ exports[`should render correctly for a unit test 1`] = ` className="component-name-parent" > <a - className="link-with-icon" + className="link-no-underline" href="/dashboard?id=my-project" > <QualifierIcon @@ -262,7 +262,7 @@ exports[`should render correctly if issue details are passed 1`] = ` className="component-name-parent" > <a - className="link-with-icon" + className="link-no-underline" href="/dashboard?id=project" > <QualifierIcon 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 f0a776dcf43..c0fd6951d4d 100644 --- a/server/sonar-web/src/main/js/components/common/AnalysisWarningsModal.tsx +++ b/server/sonar-web/src/main/js/components/common/AnalysisWarningsModal.tsx @@ -145,7 +145,6 @@ export class AnalysisWarningsModal extends React.PureComponent<Props, State> { {dismissable && currentUser.isLoggedIn && ( <div className="spacer-top display-flex-inline"> <ButtonLink - className="link-base-color" disabled={Boolean(dismissedWarning)} onClick={() => { this.handleDismissMessage(key); 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 3e582b2aed0..b1e6b85ee7f 100644 --- a/server/sonar-web/src/main/js/components/common/DocumentationTooltip.tsx +++ b/server/sonar-web/src/main/js/components/common/DocumentationTooltip.tsx @@ -66,7 +66,7 @@ export default function DocumentationTooltip(props: DocumentationTooltipProps) { </Link> ) : ( <Link - className="display-inline-flex-center link-with-icon" + className="display-inline-flex-center" to={href} rel="noopener noreferrer" target="_blank"> 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 68788eb7fae..bd8f9d4a99a 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 @@ -22,7 +22,8 @@ import * as React from 'react'; import { dismissAnalysisWarning, getTask } from '../../../api/ce'; import { mockTaskWarning } from '../../../helpers/mocks/tasks'; import { mockCurrentUser } from '../../../helpers/testMocks'; -import { mockEvent, waitAndUpdate } from '../../../helpers/testUtils'; +import { waitAndUpdate } from '../../../helpers/testUtils'; +import { ButtonLink } from '../../controls/buttons'; import { AnalysisWarningsModal } from '../AnalysisWarningsModal'; jest.mock('../../../api/ce', () => ({ @@ -67,11 +68,14 @@ it('should correctly handle dismissing warnings', async () => { warnings: [mockTaskWarning({ key: 'bar', dismissable: true })] }); - const click = wrapper.find('ButtonLink.link-base-color').props().onClick; + const { onClick } = wrapper + .find(ButtonLink) + .at(0) + .props(); - expect(click).toBeDefined(); - - click!(mockEvent()); + if (onClick) { + onClick(); + } await waitAndUpdate(wrapper); diff --git a/server/sonar-web/src/main/js/components/common/__tests__/__snapshots__/AnalysisWarningsModal-test.tsx.snap b/server/sonar-web/src/main/js/components/common/__tests__/__snapshots__/AnalysisWarningsModal-test.tsx.snap index b703954b0ea..7b9218712f4 100644 --- a/server/sonar-web/src/main/js/components/common/__tests__/__snapshots__/AnalysisWarningsModal-test.tsx.snap +++ b/server/sonar-web/src/main/js/components/common/__tests__/__snapshots__/AnalysisWarningsModal-test.tsx.snap @@ -254,7 +254,6 @@ exports[`should render correctly: with dismissable warnings 1`] = ` className="spacer-top display-flex-inline" > <ButtonLink - className="link-base-color" disabled={false} onClick={[Function]} > diff --git a/server/sonar-web/src/main/js/components/common/__tests__/__snapshots__/DocumentationTooltip-test.tsx.snap b/server/sonar-web/src/main/js/components/common/__tests__/__snapshots__/DocumentationTooltip-test.tsx.snap index 949ca3317f0..5c6a804f4e0 100644 --- a/server/sonar-web/src/main/js/components/common/__tests__/__snapshots__/DocumentationTooltip-test.tsx.snap +++ b/server/sonar-web/src/main/js/components/common/__tests__/__snapshots__/DocumentationTooltip-test.tsx.snap @@ -78,7 +78,7 @@ exports[`renders correctly: with links 1`] = ` className="little-spacer-bottom" > <Link - className="display-inline-flex-center link-with-icon" + className="display-inline-flex-center" rel="noopener noreferrer" target="_blank" to="http://link.tosome.place" @@ -97,7 +97,7 @@ exports[`renders correctly: with links 1`] = ` className="little-spacer-bottom" > <Link - className="display-inline-flex-center link-with-icon" + className="display-inline-flex-center" rel="noopener noreferrer" target="_blank" to="/documentation/guide" diff --git a/server/sonar-web/src/main/js/components/facet/ListStyleFacetFooter.tsx b/server/sonar-web/src/main/js/components/facet/ListStyleFacetFooter.tsx index 2e8f9473d2c..45be643969c 100644 --- a/server/sonar-web/src/main/js/components/facet/ListStyleFacetFooter.tsx +++ b/server/sonar-web/src/main/js/components/facet/ListStyleFacetFooter.tsx @@ -20,6 +20,7 @@ import * as React from 'react'; import { translate, translateWithParameters } from '../../helpers/l10n'; import { formatMeasure } from '../../helpers/measures'; +import { ButtonLink } from '../controls/buttons'; interface Props { count: number; @@ -29,15 +30,11 @@ interface Props { } export default class ListStyleFacetFooter extends React.PureComponent<Props> { - handleShowMoreClick = (event: React.MouseEvent<HTMLAnchorElement>) => { - event.preventDefault(); - event.currentTarget.blur(); + handleShowMoreClick = () => { this.props.showMore(); }; - handleShowLessClick = (event: React.MouseEvent<HTMLAnchorElement>) => { - event.preventDefault(); - event.currentTarget.blur(); + handleShowLessClick = () => { if (this.props.showLess) { this.props.showLess(); } @@ -53,15 +50,15 @@ export default class ListStyleFacetFooter extends React.PureComponent<Props> { {translateWithParameters('x_show', formatMeasure(count, 'INT', null))} {hasMore && ( - <a className="spacer-left text-muted" href="#" onClick={this.handleShowMoreClick}> + <ButtonLink className="spacer-left" onClick={this.handleShowMoreClick}> {translate('show_more')} - </a> + </ButtonLink> )} {this.props.showLess && allShown && ( - <a className="spacer-left text-muted" href="#" onClick={this.handleShowLessClick}> + <ButtonLink className="spacer-left" onClick={this.handleShowLessClick}> {translate('show_less')} - </a> + </ButtonLink> )} </footer> ); diff --git a/server/sonar-web/src/main/js/components/facet/__tests__/ListStyleFacetFooter-test.tsx b/server/sonar-web/src/main/js/components/facet/__tests__/ListStyleFacetFooter-test.tsx index eda9b9d98f1..3a2fd18f845 100644 --- a/server/sonar-web/src/main/js/components/facet/__tests__/ListStyleFacetFooter-test.tsx +++ b/server/sonar-web/src/main/js/components/facet/__tests__/ListStyleFacetFooter-test.tsx @@ -20,6 +20,7 @@ import { shallow } from 'enzyme'; import * as React from 'react'; import { click } from '../../../helpers/testUtils'; +import { ButtonLink } from '../../controls/buttons'; import ListStyleFacetFooter from '../ListStyleFacetFooter'; it('should not render "show more"', () => { @@ -34,7 +35,7 @@ it('should show more', () => { <ListStyleFacetFooter count={3} showLess={undefined} showMore={showMore} total={15} /> ); expect(wrapper).toMatchSnapshot(); - click(wrapper.find('a')); + click(wrapper.find(ButtonLink)); expect(showMore).toBeCalled(); }); @@ -44,7 +45,7 @@ it('should show less', () => { <ListStyleFacetFooter count={15} showLess={showLess} showMore={jest.fn()} total={15} /> ); expect(wrapper).toMatchSnapshot(); - click(wrapper.find('a')); + click(wrapper.find(ButtonLink)); expect(showLess).toBeCalled(); }); diff --git a/server/sonar-web/src/main/js/components/facet/__tests__/__snapshots__/ListStyleFacetFooter-test.tsx.snap b/server/sonar-web/src/main/js/components/facet/__tests__/__snapshots__/ListStyleFacetFooter-test.tsx.snap index 85a2744871c..ea8274402b9 100644 --- a/server/sonar-web/src/main/js/components/facet/__tests__/__snapshots__/ListStyleFacetFooter-test.tsx.snap +++ b/server/sonar-web/src/main/js/components/facet/__tests__/__snapshots__/ListStyleFacetFooter-test.tsx.snap @@ -21,13 +21,12 @@ exports[`should show less 1`] = ` className="note spacer-top spacer-bottom text-center" > x_show.15 - <a - className="spacer-left text-muted" - href="#" + <ButtonLink + className="spacer-left" onClick={[Function]} > show_less - </a> + </ButtonLink> </footer> `; @@ -36,12 +35,11 @@ exports[`should show more 1`] = ` className="note spacer-top spacer-bottom text-center" > x_show.3 - <a - className="spacer-left text-muted" - href="#" + <ButtonLink + className="spacer-left" onClick={[Function]} > show_more - </a> + </ButtonLink> </footer> `; diff --git a/server/sonar-web/src/main/js/components/icons/BranchIcon.tsx b/server/sonar-web/src/main/js/components/icons/BranchIcon.tsx index 94b098f0dcd..547e084b077 100644 --- a/server/sonar-web/src/main/js/components/icons/BranchIcon.tsx +++ b/server/sonar-web/src/main/js/components/icons/BranchIcon.tsx @@ -26,7 +26,7 @@ export default function BranchIcon({ fill, ...iconProps }: IconProps) { <Icon {...iconProps}> <path d="M12.5 6.5c0-1.1-.9-2-2-2s-2 .9-2 2c0 .8.5 1.5 1.2 1.8-.3.6-.7 1.1-1.2 1.4-.9.5-1.9.5-2.5.4V4c.9-.2 1.5-1 1.5-1.9 0-1.1-.9-2-2-2s-2 .9-2 2C3.5 3 4.1 3.8 5 4v8c-.9.2-1.5 1-1.5 1.9 0 1.1.9 2 2 2s2-.9 2-2c0-.9-.6-1.7-1.5-1.9v-1c.2 0 .5.1.7.1.7 0 1.5-.1 2.2-.6.8-.5 1.4-1.2 1.7-2.1 1.1 0 1.9-.9 1.9-1.9zm-8-4.4c0-.6.4-1 1-1s1 .4 1 1-.4 1-1 1-1-.5-1-1zm2 11.9c0 .6-.4 1-1 1s-1-.4-1-1 .4-1 1-1 1 .4 1 1zm4-6.5c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1z" - style={{ fill: fill || colors.blue }} + style={{ fill: fill || colors.primary }} /> </Icon> ); diff --git a/server/sonar-web/src/main/js/components/icons/PullRequestIcon.tsx b/server/sonar-web/src/main/js/components/icons/PullRequestIcon.tsx index e73eabac2a2..6beb58455c7 100644 --- a/server/sonar-web/src/main/js/components/icons/PullRequestIcon.tsx +++ b/server/sonar-web/src/main/js/components/icons/PullRequestIcon.tsx @@ -26,7 +26,7 @@ export default function PullRequestIcon({ fill, ...iconProps }: IconProps) { <Icon {...iconProps}> <path d="M13,11.9L13,5.5C13,5.4 13.232,1.996 7.9,2L9.1,0.8L8.5,0.1L5.9,2.6L8.5,5.1L9.2,4.4L7.905,3.008C12.256,2.99 12,5.4 12,5.5L12,11.9C11.1,12.1 10.5,12.9 10.5,13.8C10.5,14.9 11.4,15.8 12.5,15.8C13.6,15.8 14.5,14.9 14.5,13.8C14.5,12.9 13.9,12.2 13,11.9ZM4,11.9C4.9,12.2 5.5,12.9 5.5,13.8C5.5,14.9 4.6,15.8 3.5,15.8C2.4,15.8 1.5,14.9 1.5,13.8C1.5,12.9 2.1,12.1 3,11.9L3,4.1C2.1,3.9 1.5,3.1 1.5,2.2C1.5,1.1 2.4,0.2 3.5,0.2C4.6,0.2 5.5,1.1 5.5,2.2C5.5,3.1 4.9,3.9 4,4.1L4,11.9ZM12.5,14.9C11.9,14.9 11.5,14.5 11.5,13.9C11.5,13.3 11.9,12.9 12.5,12.9C13.1,12.9 13.5,13.3 13.5,13.9C13.5,14.5 13.1,14.9 12.5,14.9ZM3.5,14.9C2.9,14.9 2.5,14.5 2.5,13.9C2.5,13.3 2.9,12.9 3.5,12.9C4.1,12.9 4.5,13.3 4.5,13.9C4.5,14.5 4.1,14.9 3.5,14.9ZM2.5,2.2C2.5,1.6 2.9,1.2 3.5,1.2C4.1,1.2 4.5,1.6 4.5,2.2C4.5,2.8 4.1,3.2 3.5,3.2C2.9,3.2 2.5,2.8 2.5,2.2Z" - style={{ fill: fill || colors.blue }} + style={{ fill: fill || colors.primary }} /> </Icon> ); 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 2c97d64e948..05ba3b5c163 100644 --- a/server/sonar-web/src/main/js/components/icons/QualifierIcon.tsx +++ b/server/sonar-web/src/main/js/components/icons/QualifierIcon.tsx @@ -51,7 +51,7 @@ export default function QualifierIcon({ } const FoundIcon = qualifierIcons[qualifier.toLowerCase()]; - const ariaLabel = qualifier != null ? translate(`qualifier.${qualifier}`) : undefined; + const ariaLabel = qualifier ? translate(`qualifier.${qualifier}`) : undefined; return FoundIcon ? ( <FoundIcon className={className} fill={fill} ariaLabel={ariaLabel} {...props} /> ) : null; @@ -62,7 +62,7 @@ function ApplicationIcon({ fill, ariaLabel, ...iconProps }: IconProps) { <Icon {...iconProps} ariaLabel={ariaLabel}> <path d="M3.014 10.986a2 2 0 1 1-.001 4.001 2 2 0 0 1 .001-4.001zm9.984 0a2 2 0 1 1-.001 4.001 2 2 0 0 1 .001-4.001zm-5.004-.021c1.103 0 2 .896 2 2s-.897 2-2 2a2 2 0 0 1 0-4zm-4.98 1.021a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm9.984 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm-5.004-.021a1 1 0 1 1 0 2 1 1 0 0 1 0-2zM2.984 6a2 2 0 1 1-.001 4.001A2 2 0 0 1 2.984 6zm9.984 0a2 2 0 1 1-.001 4.001A2 2 0 0 1 12.968 6zm-5.004-.021c1.103 0 2 .897 2 2a2 2 0 1 1-2-2zM2.984 7a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm9.984 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm-5.004-.021a1.001 1.001 0 0 1 0 2 1 1 0 0 1 0-2zM3 1.025a2 2 0 1 1-.001 4.001A2 2 0 0 1 3 1.025zm9.984 0a2 2 0 1 1-.001 4.001 2 2 0 0 1 .001-4.001zM7.98 1.004c1.103 0 2 .896 2 2s-.897 2-2 2a2 2 0 0 1 0-4zM3 2.025a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm9.984 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2zM7.98 2.004a1.001 1.001 0 0 1 0 2 1 1 0 0 1 0-2z" - style={{ fill: fill || colors.blue }} + style={{ fill: fill || colors.primary }} /> </Icon> ); @@ -73,7 +73,7 @@ function DeveloperIcon({ fill, ariaLabel, ...iconProps }: IconProps) { <Icon {...iconProps} ariaLabel={ariaLabel}> <path d="M7.974 8.02a3.5 3.5 0 0 1-2.482-1.017 3.428 3.428 0 0 1-1.028-2.455c0-.927.365-1.8 1.028-2.455a3.505 3.505 0 0 1 2.482-1.017 3.5 3.5 0 0 1 2.482 1.017 3.434 3.434 0 0 1 1.027 2.455c0 .928-.365 1.8-1.027 2.455A3.504 3.504 0 0 1 7.974 8.02zm0-5.778c-1.286 0-2.332 1.034-2.332 2.306s1.046 2.307 2.332 2.307c1.285 0 2.332-1.035 2.332-2.307S9.258 2.242 7.974 2.242zm3.534 6.418c.127.016.243.045.348.086.17.066.302.146.406.246.132.124.253.282.36.47.126.218.226.442.3.668.08.253.15.535.206.838.056.313.095.604.113.867.02.28.03.57.03.862 0 .532-.174.758-.306.882-.142.132-.397.31-.973.31H3.948c-.233 0-.437-.03-.606-.09-.14-.05-.26-.123-.366-.222-.13-.123-.306-.35-.306-.88 0-.294.01-.584.03-.863.018-.263.056-.554.112-.867a6.5 6.5 0 0 1 .207-.838c.073-.226.173-.45.298-.667.108-.19.23-.347.36-.47.106-.1.238-.18.407-.247.105-.04.22-.07.348-.086.202.13.432.277.683.435.342.217.756.4 1.265.564.523.166 1.06.25 1.59.25a5.25 5.25 0 0 0 1.592-.25c.51-.164.923-.348 1.266-.565.25-.158.48-.304.682-.435l-.002.002zm-.244-1.18c-.055 0-.184.066-.387.196-.202.13-.43.276-.685.437-.255.16-.586.307-.994.437-.408.13-.818.196-1.23.196-.41 0-.82-.065-1.228-.196a4.303 4.303 0 0 1-.993-.437c-.255-.16-.484-.306-.686-.437-.202-.13-.33-.196-.386-.196-.374 0-.716.06-1.026.183-.31.12-.572.283-.787.487a3.28 3.28 0 0 0-.57.737 4.662 4.662 0 0 0-.395.888c-.098.303-.18.633-.244.988a9.652 9.652 0 0 0-.128.992c-.02.306-.032.62-.032.942 0 .73.224 1.304.672 1.726.448.42 1.043.632 1.785.632h8.044c.743 0 1.34-.21 1.787-.633.447-.42.67-.996.67-1.725 0-.32-.01-.635-.03-.942a9.159 9.159 0 0 0-.374-1.98c-.098-.304-.23-.6-.395-.888a3.23 3.23 0 0 0-.57-.737 2.404 2.404 0 0 0-.788-.487 2.779 2.779 0 0 0-1.026-.183h-.004z" - style={{ fill: fill || colors.blue }} + style={{ fill: fill || colors.primary }} /> </Icon> ); @@ -95,7 +95,7 @@ function FileIcon({ fill, ariaLabel, ...iconProps }: IconProps) { <Icon {...iconProps} ariaLabel={ariaLabel}> <path d="M14 15H2V1l7.997.02c1 .034 1.759.758 2.428 1.42.667.663 1.561 1.605 1.574 2.555H14V15zM9 2H3v12h10V6H9V2zm3 10H4v-1h8v1zm0-2H4V9h8v1zm-1.988-5h3.008c-.012-.674-.714-1.443-1.204-1.937-.488-.495-1.039-1.058-1.816-1.055v2.96l.012.032z" - style={{ fill: fill || colors.blue }} + style={{ fill: fill || colors.primary }} /> </Icon> ); @@ -106,7 +106,7 @@ function PortfolioIcon({ fill, ariaLabel, ...iconProps }: IconProps) { <Icon {...iconProps} ariaLabel={ariaLabel}> <path d="M14.97 14.97H1.016V1.015H14.97V14.97zm-1-12.955H2.015V13.97H13.97V2.015zm-.973 10.982H9V9h3.997v3.997zM7 12.996H3.004V9H7v3.996zM11.997 10H10v1.997h1.997V10zM6 10H4.004v1.996H6V10zm1-3H3.006V3.006H7V7zm5.985 0H9V3.015h3.985V7zM6 4.006H4.006V6H6V4.006zm5.985.009H10V6h1.985V4.015z" - style={{ fill: fill || colors.blue }} + style={{ fill: fill || colors.primary }} /> </Icon> ); @@ -117,7 +117,7 @@ function ProjectIcon({ fill, ariaLabel, ...iconProps }: IconProps) { <Icon {...iconProps} ariaLabel={ariaLabel}> <path d="M14.985 13.988L1 14.005 1.02 5h13.966v8.988h-.001zM1.998 5.995l.006 7.02L14.022 13 14 6.004l-12.002-.01v.001zM3 4.5V4h9.996l.004.5h1l-.005-1.497-11.98.003L2 4.5h1zm1-2v-.504h8.002L12 2.5h1l-.004-1.495H3.003L3 2.5h1z" - style={{ fill: fill || colors.blue }} + style={{ fill: fill || colors.primary }} /> </Icon> ); @@ -128,7 +128,7 @@ function SubPortfolioIcon({ fill, ariaLabel, ...iconProps }: IconProps) { <Icon {...iconProps} ariaLabel={ariaLabel}> <path d="M14 7h2v9H7v-2H0V0h14v7zM8 8v7h7V8H8zm3 6H9v-2h2v2zm3 0h-2v-2h2v2zm-1-7V1H1v12h6V7h6zm-7 5H2V8h4v4zm5-1H9V9h2v2zm3 0h-2V9h2v2zM5 9H3v2h2V9zm1-3H2V2h4v4zm6 0H8V2h4v4zM5 3H3v2h2V3zm6 0H9v2h2V3z" - style={{ fill: fill || colors.blue }} + style={{ fill: fill || colors.primary }} /> </Icon> ); @@ -139,7 +139,7 @@ function UnitTestIcon({ fill, ariaLabel, ...iconProps }: IconProps) { <Icon {...iconProps} ariaLabel={ariaLabel}> <path d="M14 15H2V1l7.997.02c1.013-.03 1.57.893 2.239 1.555.667.663 1.75 1.47 1.763 2.42H14V15zM9 2H3v12h10V6H9V2zM7 8l-3 2.5L7 13V8zm1 5l3-2.5L8 8v5zm2.012-8h3.008c-.012-.674-.78-1.258-1.27-1.752-.488-.495-.973-1.243-1.75-1.24v2.96l.012.032z" - style={{ fill: fill || colors.blue }} + style={{ fill: fill || colors.primary }} /> </Icon> ); |