SC-33636 New branch & PR selection dropdown (#3752)

GitOrigin-RevId: 66fccca116dcd31be62e65c0fcc4e02c978cd20a

Author: jeremy-davis-sonarsource

apps/sq-server/src/main/js/app/components/nav/component/Menu.tsx

@@ -22,7 +22,7 @@ import { DropdownMenu } from '@sonarsource/echoes-react';
 import { pick } from 'lodash';
 import React from 'react';
 import { FormattedMessage, useIntl } from 'react-intl';
-import { useCurrentBranchQuery } from '~adapters/queries/branch';
+import { useCurrentBranchQuery, useProjectBranchesQuery } from '~adapters/queries/branch';
 import { useLocation } from '~shared/components/hoc/withRouter';
 import { getBranchLikeQuery, isPullRequest } from '~shared/helpers/branch-like';
 import { isApplication, isPortfolioLike, isProject } from '~shared/helpers/component';
@@ -43,7 +43,6 @@ import {
   getProjectQualityProfileSettingsUrl,
   getProjectQueryUrl,
 } from '~sq-server-commons/helpers/urls';
-import { useBranchesQuery } from '~sq-server-commons/queries/branch';
 import { useGetValueQuery } from '~sq-server-commons/queries/settings';
 import { Feature } from '~sq-server-commons/types/features';
 import { SettingsKey } from '~sq-server-commons/types/settings';
@@ -81,7 +80,7 @@ export function Menu(props: Readonly<Props>) {
   const { component, hasFeature, isInProgress, isPending } = props;
   const { extensions = [], canBrowseAllChildProjects, qualifier, configuration = {} } = component;
 
-  const { data: branchLikes = [] } = useBranchesQuery(component);
+  const { data: branchLikes = [] } = useProjectBranchesQuery(component.key);
   const { data: branchLike } = useCurrentBranchQuery(component);
 
   const { data: architectureOptIn, isLoading: isLoadingArchitectureOptIn } = useGetValueQuery({

apps/sq-server/src/main/js/app/components/nav/component/branch-like/BranchLikeNavigation.tsx

@@ -21,7 +21,7 @@
 import styled from '@emotion/styled';
 import { Button } from '@sonarsource/echoes-react';
 import * as React from 'react';
-import { useCurrentBranchQuery } from '~adapters/queries/branch';
+import { useCurrentBranchQuery, useProjectBranchesQuery } from '~adapters/queries/branch';
 import { Popup, PopupPlacement, PopupZLevel } from '~design-system';
 import { isPullRequest } from '~shared/helpers/branch-like';
 import { isDefined } from '~shared/helpers/types';
@@ -32,7 +32,6 @@ import EscKeydownHandler from '~sq-server-commons/components/controls/EscKeydown
 import FocusOutHandler from '~sq-server-commons/components/controls/FocusOutHandler';
 import OutsideClickHandler from '~sq-server-commons/components/controls/OutsideClickHandler';
 import { useAvailableFeatures } from '~sq-server-commons/context/available-features/withAvailableFeatures';
-import { useBranchesQuery } from '~sq-server-commons/queries/branch';
 import { Feature } from '~sq-server-commons/types/features';
 import { Component } from '~sq-server-commons/types/types';
 import BranchHelpTooltip from './BranchHelpTooltip';
@@ -50,7 +49,7 @@ export function BranchLikeNavigation(props: BranchLikeNavigationProps) {
     component: { configuration },
   } = props;
 
-  const { data: branchLikes } = useBranchesQuery(component);
+  const { data: branchLikes = [] } = useProjectBranchesQuery(component.key);
   const { data: currentBranchLike } = useCurrentBranchQuery(component);
 
   const [isMenuOpen, setIsMenuOpen] = React.useState(false);

apps/sq-server/src/main/js/apps/overview/components/EmptyOverview.tsx

@@ -22,6 +22,7 @@ import styled from '@emotion/styled';
 import { Spinner } from '@sonarsource/echoes-react';
 import * as React from 'react';
 import { Navigate } from 'react-router-dom';
+import { useProjectBranchesQuery } from '~adapters/queries/branch';
 import { FlagMessage, LargeCenteredLayout } from '~design-system';
 import { useLocation } from '~shared/components/hoc/withRouter';
 import { isBranch, isMainBranch } from '~shared/helpers/branch-like';
@@ -32,7 +33,6 @@ import { getBranchLikeDisplayName } from '~sq-server-commons/helpers/branch-like
 import { translate, translateWithParameters } from '~sq-server-commons/helpers/l10n';
 import { getProjectTutorialLocation } from '~sq-server-commons/helpers/urls';
 import { hasGlobalPermission } from '~sq-server-commons/helpers/users';
-import { useBranchesQuery } from '~sq-server-commons/queries/branch';
 import { useTaskForComponentQuery } from '~sq-server-commons/queries/component';
 import { AlmKeys } from '~sq-server-commons/types/alm-settings';
 import { BranchLike } from '~sq-server-commons/types/branch-like';
@@ -53,7 +53,7 @@ export function EmptyOverview(props: Readonly<EmptyOverviewProps>) {
     query: { id: urlComponentKey },
   } = useLocation();
 
-  const { data: branchLikes } = useBranchesQuery(component);
+  const { data: branchLikes = [] } = useProjectBranchesQuery(component.key);
 
   const [currentUserCanScanProject, setCurrentUserCanScanProject] = React.useState(
     hasGlobalPermission(currentUser, Permissions.Scan),

libs/shared/src/components/icon-mappers/BranchLikeIcon.tsx

@@ -0,0 +1,39 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2025 SonarSource Sàrl
+ * mailto:info AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+
+import { IconBranch, IconGitBranch, IconProps, IconPullrequest } from '@sonarsource/echoes-react';
+import { isMainBranch, isPullRequest } from '../../helpers/branch-like';
+import { BranchLikeBase } from '../../types/branch-like';
+
+interface Props extends IconProps {
+  branchLike: BranchLikeBase;
+}
+
+export function BranchLikeIcon({ branchLike, ...iconProps }: Readonly<Props>) {
+  if (isMainBranch(branchLike)) {
+    return <IconBranch {...iconProps} />;
+  }
+
+  if (isPullRequest(branchLike)) {
+    return <IconPullrequest {...iconProps} />;
+  }
+
+  return <IconGitBranch {...iconProps} />;
+}

libs/shared/src/types/common.ts

@@ -32,3 +32,4 @@ export interface Extension {
 }
 
 export type QGStatus = 'ERROR' | 'NONE' | 'OK';
+export type QGStatusExtended = QGStatus | 'NOT_COMPUTED';

libs/sq-server-commons/src/components/icon-mappers/BranchLikeIcon.tsx

@@ -44,6 +44,7 @@ function PullRequestIcon(props: Readonly<IconProps>) {
   return <IconPullrequest data-testid="branch-like-icon-pull-request" {...props} />;
 }
 
+/** @deprecated Use {@link ~shared/src/components/icon-mappers/BranchLikeIcon.tsx} instead */
 export default function BranchLikeIcon({ branchLike, ...props }: Readonly<BranchLikeIconProps>) {
   let Icon;
 

libs/sq-server-commons/src/components/tutorials/TutorialSelectionRenderer.tsx

@@ -28,11 +28,11 @@ import {
   Text,
 } from '@sonarsource/echoes-react';
 import * as React from 'react';
+import { useProjectBranchesQuery } from '~adapters/queries/branch';
 import { isMainBranch } from '~shared/helpers/branch-like';
 import { GreyCard } from '../../design-system';
 import { translate } from '../../helpers/l10n';
 import { getProjectTutorialLocation } from '../../helpers/urls';
-import { useBranchesQuery } from '../../queries/branch';
 import { Image } from '../../sq-server-adapters/components/common/Image';
 import { AlmKeys, AlmSettingsInstance, ProjectAlmBindingResponse } from '../../types/alm-settings';
 import { MainBranch } from '../../types/branch-like';
@@ -98,7 +98,7 @@ export default function TutorialSelectionRenderer(props: Readonly<TutorialSelect
     willRefreshAutomatically,
   } = props;
 
-  const { data: branchLikes = [] } = useBranchesQuery(component);
+  const { data: branchLikes = [] } = useProjectBranchesQuery(component.key);
 
   const mainBranchName =
     (branchLikes.find((b) => isMainBranch(b)) as MainBranch | undefined)?.name ||

libs/sq-server-commons/src/design-system/components/QualityGateIndicator.tsx

@@ -18,165 +18,4 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 
-import { useTheme } from '@emotion/react';
-import React from 'react';
-import { useIntl } from 'react-intl';
-import { theme as twTheme } from 'twin.macro';
-import { BasePlacement, PopupPlacement } from '../helpers/positioning';
-import { themeColor, themeContrast } from '../helpers/theme';
-import { QGStatus } from '../types/quality-gates';
-
-const SIZE = {
-  sm: twTheme('spacing.4'),
-  md: twTheme('spacing.6'),
-  xl: twTheme('spacing.16'),
-};
-
-interface Props {
-  className?: string;
-  size?: keyof typeof SIZE;
-  status: QGStatus;
-  tooltipPlacement?: BasePlacement;
-}
-
-const RX_4 = 4;
-const RX_2 = 2;
-
-const formatQualityGateTitle = (intl: ReturnType<typeof useIntl>, status: QGStatus) => {
-  const formatted = intl.formatMessage({ id: `metric.level.${status}` });
-  return intl.formatMessage({ id: 'overview.quality_gate_x' }, { status: formatted });
-};
-
-export function QualityGateIndicator(props: Props) {
-  const { className, size = 'md', status, tooltipPlacement = PopupPlacement.Right } = props;
-  const iconProps = {
-    className,
-    height: SIZE[size],
-    rx: size === 'xl' ? RX_4 : RX_2,
-    size,
-    tooltipPlacement,
-    width: SIZE[size],
-  };
-  let StatusComponent: React.ReactNode;
-  switch (status) {
-    case 'NONE':
-    case 'NOT_COMPUTED':
-      StatusComponent = <QGNotComputed {...iconProps} />;
-      break;
-    case 'OK':
-      StatusComponent = <QGPassed {...iconProps} />;
-      break;
-    case 'ERROR':
-      StatusComponent = <QGFailed {...iconProps} />;
-      break;
-  }
-  return <div className="sw-flex sw-justify-center sw-items-center">{StatusComponent}</div>;
-}
-
-const COMMON_PROPS = {
-  fill: 'none',
-  role: 'img',
-  xmlns: 'http://www.w3.org/2000/svg',
-};
-
-interface IconProps {
-  className?: string;
-  height: string;
-  rx: number;
-  size: keyof typeof SIZE;
-  tooltipPlacement?: BasePlacement;
-  width: string;
-}
-
-function QGNotComputed({ className, rx, size, tooltipPlacement, ...sizeProps }: IconProps) {
-  const theme = useTheme();
-  const contrastColor = themeContrast('qgIndicatorNotComputed')({ theme });
-  const intl = useIntl();
-  const title = formatQualityGateTitle(intl, 'NONE');
-
-  return (
-    <svg className={className} {...COMMON_PROPS} {...sizeProps}>
-      <title>{title}</title>
-      <rect fill={themeColor('qgIndicatorNotComputed')({ theme })} rx={rx} {...sizeProps} />
-      {
-        {
-          xl: <path d="M42 31v3H22v-3z" fill={contrastColor} />,
-          md: <path d="M18 12v1.5H6V12z" fill={contrastColor} />,
-          sm: <path d="M12 8v1H4V8z" fill={contrastColor} />,
-        }[size]
-      }
-    </svg>
-  );
-}
-
-function QGPassed({ className, rx, size, tooltipPlacement, ...sizeProps }: IconProps) {
-  const theme = useTheme();
-  const contrastColor = themeContrast('qgIndicatorPassed')({ theme });
-  const intl = useIntl();
-  const title = formatQualityGateTitle(intl, 'OK');
-
-  return (
-    <svg className={className} {...COMMON_PROPS} {...sizeProps}>
-      <title>{title}</title>
-      <rect fill={themeColor('qgIndicatorPassed')({ theme })} rx={rx} {...sizeProps} />
-      {
-        {
-          xl: (
-            <>
-              <path d="M38.974 25 41 27.026 28.847 39.178l-2.025-2.025z" fill={contrastColor} />
-              <path d="M30.974 37.153 28.95 39.18 22 32.229l2.026-2.025z" fill={contrastColor} />
-            </>
-          ),
-          md: (
-            <>
-              <path d="m16.95 7.5 1.308 1.307-7.84 7.84-1.308-1.306z" fill={contrastColor} />
-              <path d="m11.79 15.34-1.307 1.307-4.484-4.483 1.307-1.306z" fill={contrastColor} />
-            </>
-          ),
-          sm: (
-            <>
-              <path d="m11.3 5 .871.87-5.227 5.228-.87-.871z" fill={contrastColor} />
-              <path d="m7.86 10.227-.872.871L4 8.11l.871-.871z" fill={contrastColor} />
-            </>
-          ),
-        }[size]
-      }
-    </svg>
-  );
-}
-
-function QGFailed({ className, rx, size, tooltipPlacement, ...sizeProps }: IconProps) {
-  const theme = useTheme();
-  const contrastColor = themeContrast('qgIndicatorFailed')({ theme });
-  const intl = useIntl();
-  const title = formatQualityGateTitle(intl, 'ERROR');
-
-  return (
-    <svg className={className} {...COMMON_PROPS} {...sizeProps}>
-      <title>{title}</title>
-      <rect fill={themeColor('qgIndicatorFailed')({ theme })} rx={rx} {...sizeProps} />
-      {
-        {
-          xl: (
-            <>
-              <path d="m37.153 25 2.026 2.026-12.153 12.152L25 37.153z" fill={contrastColor} />
-              <path d="m39.178 37.153-2.025 2.026L25 27.026 27.026 25z" fill={contrastColor} />
-            </>
-          ),
-          md: (
-            <>
-              <path d="m15.34 7.5 1.307 1.307-7.84 7.84L7.5 15.34z" fill={contrastColor} />
-              <path d="m16.647 15.34-1.307 1.307-7.84-7.84L8.806 7.5z" fill={contrastColor} />
-            </>
-          ),
-          sm: (
-            <>
-              <path d="m10.227 5 .871.871-5.227 5.227L5 10.227z" fill={contrastColor} />
-              <path d="m11.098 10.227-.871.87L5 5.872 5.87 5z" fill={contrastColor} />
-            </>
-          ),
-        }[size]
-      }
-    </svg>
-  );
-}
+export { QualityGateIndicator } from '~adapters/components/ui/QualityGateIndicator';

libs/sq-server-commons/src/helpers/branch-like.ts

@@ -23,6 +23,8 @@ import { isBranch, isMainBranch, isPullRequest } from '~shared/helpers/branch-li
 import { PullRequest } from '~shared/types/branch-like';
 import { Branch, BranchLike, BranchLikeTree } from '../types/branch-like';
 
+export { isSameBranchLike } from '~adapters/helpers/branch-like';
+
 export function sortBranches(branches: Branch[]) {
   return orderBy(branches, [(b) => b.isMain, (b) => b.name], ['desc', 'asc']);
 }
@@ -43,26 +45,6 @@ export function getBranchLikeKey(branchLike: BranchLike) {
   return isPullRequest(branchLike) ? `pull-request-${branchLike.key}` : `branch-${branchLike.name}`;
 }
 
-export function isSameBranchLike(a: BranchLike | undefined, b: BranchLike | undefined) {
-  // main branches are always equal
-  if (isMainBranch(a) && isMainBranch(b)) {
-    return true;
-  }
-
-  // Branches are compared by name
-  if (isBranch(a) && isBranch(b)) {
-    return a.name === b.name;
-  }
-
-  // pull requests are compared by id
-  if (isPullRequest(a) && isPullRequest(b)) {
-    return a.key === b.key;
-  }
-
-  // finally if both parameters are `undefined`, consider them equal
-  return a === b;
-}
-
 export function getBrancheLikesAsTree(branchLikes: BranchLike[]): BranchLikeTree {
   const mainBranch = branchLikes.find(isMainBranch);
   const branches = orderBy(

libs/sq-server-commons/src/l10n/default.ts

@@ -58,6 +58,7 @@ export const defaultMessages = {
   bold: 'Bold',
   branch: 'Branch',
   'branch.small': 'branch',
+  branches: 'Branches',
   breadcrumbs: 'Breadcrumbs',
   expand_breadcrumbs: 'Expand breadcrumbs',
   by_: 'by',
@@ -232,6 +233,8 @@ export const defaultMessages = {
   project_plural: 'projects',
   projects_management: 'Projects Management',
   'pull_request.small': 'pull request',
+  pull_requests: 'Pull Requests',
+  quality_gate: 'Quality Gate',
   quality_profile: 'Quality Profile',
   raw: 'Raw',
   recent_history: 'Recent History',
@@ -3365,6 +3368,17 @@ export const defaultMessages = {
   'project_navigation.binding_status.bind.tooltip':
     'Enable automatically configured PR decoration and privacy settings based on your DevOps platform by binding your project',
 
+  //------------------------------------------------------------------------------
+  //
+  // PROJECT BRANCH SELECTOR
+  //
+  //------------------------------------------------------------------------------
+
+  'project_branch_selector.title': 'Branches and pull requests',
+  'project_branch_selector.filters': 'Filter by branches or pull requests',
+  'project_branch_selector.search': 'Search branches or pull requests',
+  'project_branch_selector.none': 'No results',
+
   //------------------------------------------------------------------------------
   //
   // PROJECT ACTIVITY/HISTORY SERVICE