From 8d81569939c5abb53a0ee945b5a86450b438ba98 Mon Sep 17 00:00:00 2001 From: David Cho-Lerat Date: Wed, 10 Apr 2024 18:37:54 +0200 Subject: [PATCH] SONAR-21973 Showcase new icons from Echoes in a few places --- .../design-system/src/components/Text.tsx | 2 +- .../js/app/components/SonarLintConnection.tsx | 5 ++--- .../js/apps/issues/sidebar/ProjectFacet.tsx | 9 ++++---- .../js/apps/issues/sidebar/ScopeFacet.tsx | 11 ++++++++-- .../main/js/apps/issues/sidebar/TypeFacet.tsx | 12 ++++++---- .../components/BranchLikeTabs.tsx | 8 ++++--- .../components/ProjectCreationMenu.tsx | 20 ++++++++++------- .../embed-docs-modal/EmbedDocsPopupHelper.tsx | 16 +++++--------- .../icon-mappers/BranchLikeIcon.tsx | 22 ++++++++++++++----- .../BranchLikeIcon-test.tsx.snap | 4 ++-- 10 files changed, 65 insertions(+), 44 deletions(-) diff --git a/server/sonar-web/design-system/src/components/Text.tsx b/server/sonar-web/design-system/src/components/Text.tsx index 23821db1ad7..4147c6cc45f 100644 --- a/server/sonar-web/design-system/src/components/Text.tsx +++ b/server/sonar-web/design-system/src/components/Text.tsx @@ -106,7 +106,7 @@ export const StyledText = styled.span` } `; -const StyledMutedText = styled(StyledText)` +export const StyledMutedText = styled(StyledText)` ${tw`sw-font-regular`}; color: ${themeColor('dropdownMenuSubTitle')}; `; diff --git a/server/sonar-web/src/main/js/app/components/SonarLintConnection.tsx b/server/sonar-web/src/main/js/app/components/SonarLintConnection.tsx index 51dd597b733..bf1323bd209 100644 --- a/server/sonar-web/src/main/js/app/components/SonarLintConnection.tsx +++ b/server/sonar-web/src/main/js/app/components/SonarLintConnection.tsx @@ -18,12 +18,11 @@ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { LinkStandalone } from '@sonarsource/echoes-react'; +import { IconCheck, LinkStandalone } from '@sonarsource/echoes-react'; import { ButtonPrimary, Card, CardSeparator, - CheckIcon, ClipboardButton, InputField, ListItem, @@ -100,7 +99,7 @@ export function SonarLintConnection({ currentUser }: Readonly) {

{translate('sonarlint-connection.request.description2')}

- } onClick={authorize}> + } onClick={authorize}> {translate('sonarlint-connection.request.action')} diff --git a/server/sonar-web/src/main/js/apps/issues/sidebar/ProjectFacet.tsx b/server/sonar-web/src/main/js/apps/issues/sidebar/ProjectFacet.tsx index 19371524f0d..52a703f4ef4 100644 --- a/server/sonar-web/src/main/js/apps/issues/sidebar/ProjectFacet.tsx +++ b/server/sonar-web/src/main/js/apps/issues/sidebar/ProjectFacet.tsx @@ -17,7 +17,8 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { ProjectIcon, Spinner } from 'design-system'; + +import { IconProject, Spinner } from '@sonarsource/echoes-react'; import { omit } from 'lodash'; import * as React from 'react'; import { getTree, searchProjects } from '../../../api/components'; @@ -124,7 +125,7 @@ export function ProjectFacet(props: Readonly) { const renderSearchResult = (project: Pick, term: string) => ( <> - + {highlightTerm(project.name, term)} @@ -169,9 +170,9 @@ function ProjectItem({ return (
- + - + {label} diff --git a/server/sonar-web/src/main/js/apps/issues/sidebar/ScopeFacet.tsx b/server/sonar-web/src/main/js/apps/issues/sidebar/ScopeFacet.tsx index 43a45b0f0bb..3a830ac4842 100644 --- a/server/sonar-web/src/main/js/apps/issues/sidebar/ScopeFacet.tsx +++ b/server/sonar-web/src/main/js/apps/issues/sidebar/ScopeFacet.tsx @@ -17,7 +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 { FacetBox, FacetItem, FileIcon, TestFileIcon } from 'design-system'; + +import { IconFile, IconFileCode } from '@sonarsource/echoes-react'; +import { FacetBox, FacetItem } from 'design-system'; import { without } from 'lodash'; import * as React from 'react'; import { SOURCE_SCOPES } from '../../../helpers/constants'; @@ -68,7 +70,12 @@ export function ScopeFacet(props: ScopeFacetProps) { , TEST: }[scope]} + icon={ + { + MAIN: , + TEST: , + }[scope] + } key={scope} name={translate('issue.scope', scope)} onClick={(itemValue: string, multiple: boolean) => { diff --git a/server/sonar-web/src/main/js/apps/issues/sidebar/TypeFacet.tsx b/server/sonar-web/src/main/js/apps/issues/sidebar/TypeFacet.tsx index 7d8ad9e2c67..7b886923d85 100644 --- a/server/sonar-web/src/main/js/apps/issues/sidebar/TypeFacet.tsx +++ b/server/sonar-web/src/main/js/apps/issues/sidebar/TypeFacet.tsx @@ -17,7 +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 { BugIcon, CodeSmellIcon, FacetBox, FacetItem, VulnerabilityIcon } from 'design-system'; + +import { IconBug, IconCodeSmell, IconVulnerability } from '@sonarsource/echoes-react'; +import { FacetBox, FacetItem } from 'design-system'; import { orderBy, without } from 'lodash'; import * as React from 'react'; import { ISSUE_TYPES } from '../../../helpers/constants'; @@ -48,10 +50,12 @@ export class TypeFacet extends React.PureComponent { handleItemClick = (itemValue: string, multiple: boolean) => { const { types } = this.props; + if (multiple) { const newValue = orderBy( types.includes(itemValue) ? without(types, itemValue) : [...types, itemValue], ); + this.props.onChange({ [this.property]: newValue }); } else { this.props.onChange({ @@ -89,9 +93,9 @@ export class TypeFacet extends React.PureComponent { className="it__search-navigator-facet" icon={ { - BUG: , - CODE_SMELL: , - VULNERABILITY: , + BUG: , + CODE_SMELL: , + VULNERABILITY: , }[type] } key={type} diff --git a/server/sonar-web/src/main/js/apps/projectBranches/components/BranchLikeTabs.tsx b/server/sonar-web/src/main/js/apps/projectBranches/components/BranchLikeTabs.tsx index acd2b984c92..f7bd9e28061 100644 --- a/server/sonar-web/src/main/js/apps/projectBranches/components/BranchLikeTabs.tsx +++ b/server/sonar-web/src/main/js/apps/projectBranches/components/BranchLikeTabs.tsx @@ -17,7 +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 { BranchIcon, PullRequestIcon, ToggleButton, getTabId, getTabPanelId } from 'design-system'; + +import { IconGitBranch, IconPullrequest } from '@sonarsource/echoes-react'; +import { ToggleButton, getTabId, getTabPanelId } from 'design-system'; import * as React from 'react'; import { useState } from 'react'; import { @@ -52,7 +54,7 @@ const TABS = [ value: Tabs.Branch, label: ( <> - + {translate('project_branch_pull_request.tabs.branches')} ), @@ -62,7 +64,7 @@ const TABS = [ value: Tabs.PullRequest, label: ( <> - + {translate('project_branch_pull_request.tabs.pull_requests')} diff --git a/server/sonar-web/src/main/js/apps/projects/components/ProjectCreationMenu.tsx b/server/sonar-web/src/main/js/apps/projects/components/ProjectCreationMenu.tsx index f89889c50c6..3c08f66745f 100644 --- a/server/sonar-web/src/main/js/apps/projects/components/ProjectCreationMenu.tsx +++ b/server/sonar-web/src/main/js/apps/projects/components/ProjectCreationMenu.tsx @@ -17,9 +17,10 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ + +import { IconChevronDown } from '@sonarsource/echoes-react'; import { ButtonSecondary, - ChevronDownIcon, Dropdown, ItemDivider, ItemLink, @@ -46,11 +47,11 @@ interface State { } const almSettingsValidators = { - [AlmKeys.Azure]: (settings: AlmSettingsInstance) => !!settings.url, - [AlmKeys.BitbucketServer]: (_: AlmSettingsInstance) => true, + [AlmKeys.Azure]: (settings: AlmSettingsInstance) => Boolean(settings.url), [AlmKeys.BitbucketCloud]: (_: AlmSettingsInstance) => true, + [AlmKeys.BitbucketServer]: (_: AlmSettingsInstance) => true, [AlmKeys.GitHub]: (_: AlmSettingsInstance) => true, - [AlmKeys.GitLab]: (settings: AlmSettingsInstance) => !!settings.url, + [AlmKeys.GitLab]: (settings: AlmSettingsInstance) => Boolean(settings.url), }; export class ProjectCreationMenu extends React.PureComponent { @@ -84,6 +85,7 @@ export class ProjectCreationMenu extends React.PureComponent { const boundAlms = IMPORT_COMPATIBLE_ALMS.filter((key) => { const currentAlmSettings = almSettings.filter((s) => s.alm === key); + return ( currentAlmSettings.length > 0 && key === currentAlmSettings[0].alm && @@ -111,9 +113,6 @@ export class ProjectCreationMenu extends React.PureComponent { return ( {[...boundAlms, 'manual'].map((alm) => ( @@ -122,6 +121,7 @@ export class ProjectCreationMenu extends React.PureComponent { {boundAlms.length < IMPORT_COMPATIBLE_ALMS.length && ( <> + {boundAlms.length === 0 ? translate('my_account.add_project.more') @@ -131,10 +131,14 @@ export class ProjectCreationMenu extends React.PureComponent { )} } + placement={PopupPlacement.BottomRight} + size="auto" + zLevel={PopupZLevel.Global} > {translate('projects.add')} - + + ); diff --git a/server/sonar-web/src/main/js/components/embed-docs-modal/EmbedDocsPopupHelper.tsx b/server/sonar-web/src/main/js/components/embed-docs-modal/EmbedDocsPopupHelper.tsx index c550b088efc..ff344952398 100644 --- a/server/sonar-web/src/main/js/components/embed-docs-modal/EmbedDocsPopupHelper.tsx +++ b/server/sonar-web/src/main/js/components/embed-docs-modal/EmbedDocsPopupHelper.tsx @@ -17,13 +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 { - Dropdown, - InteractiveIcon, - MenuHelpIcon, - PopupPlacement, - PopupZLevel, -} from 'design-system'; + +import { IconQuestionMark } from '@sonarsource/echoes-react'; +import { Dropdown, InteractiveIcon, PopupPlacement, PopupZLevel } from 'design-system'; import * as React from 'react'; import { translate } from '../../helpers/l10n'; import Tooltip from '../controls/Tooltip'; @@ -42,11 +38,9 @@ export default function EmbedDocsPopupHelper() { {({ onToggleClick, open }) => ( { +export interface BranchLikeIconProps extends IconProps { branchLike: BranchLike; - fill?: ThemeColors; } export default function BranchLikeIcon({ branchLike, ...props }: Readonly) { + let Icon; + if (isPullRequest(branchLike)) { - return ; + Icon = IconPullrequest; } else if (isMainBranch(branchLike)) { - return ; + Icon = IconBranch; + } else { + Icon = IconGitBranch; } - return ; + + return ( + + + + ); } diff --git a/server/sonar-web/src/main/js/components/icon-mappers/__tests__/__snapshots__/BranchLikeIcon-test.tsx.snap b/server/sonar-web/src/main/js/components/icon-mappers/__tests__/__snapshots__/BranchLikeIcon-test.tsx.snap index 561ef92174d..3ad53391a36 100644 --- a/server/sonar-web/src/main/js/components/icon-mappers/__tests__/__snapshots__/BranchLikeIcon-test.tsx.snap +++ b/server/sonar-web/src/main/js/components/icon-mappers/__tests__/__snapshots__/BranchLikeIcon-test.tsx.snap @@ -1,5 +1,5 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`should render branch icon correctly 1`] = `"
"`; +exports[`should render branch icon correctly 1`] = `"
"`; -exports[`should render pull request icon correctly 1`] = `"
"`; +exports[`should render pull request icon correctly 1`] = `"
"`; -- 2.39.5