SONAR-23667 Inform users when using filters from a different mode

5 files changed, 24 insertions, 24 deletions

diff --git a/server/sonar-web/src/main/js/apps/issues/sidebar/QGMetricsMismatchHelp.tsx b/server/sonar-web/src/main/js/apps/issues/sidebar/QGMetricsMismatchHelp.tsx
index eaa7cceab97..04a744f8c7e 100644
--- a/server/sonar-web/src/main/js/apps/issues/sidebar/QGMetricsMismatchHelp.tsx
+++ b/server/sonar-web/src/main/js/apps/issues/sidebar/QGMetricsMismatchHelp.tsx
@@ -31,7 +31,7 @@ export default function QGMetricsMismatchHelp() {
       title={intl.formatMessage({ id: 'issues.qg_mismatch.title' })}
       description={intl.formatMessage({ id: 'issues.qg_mismatch.description' }, { isStandardMode })}
       linkText={intl.formatMessage({ id: 'issues.qg_mismatch.link' })}
-      link={DocLink.QualityGates}
+      link={DocLink.ModeOverview}
     />
   );
 }
diff --git a/server/sonar-web/src/main/js/apps/issues/sidebar/__tests__/Sidebar-it.tsx b/server/sonar-web/src/main/js/apps/issues/sidebar/__tests__/Sidebar-it.tsx
index e3a8dcbf19d..502b093936f 100644
--- a/server/sonar-web/src/main/js/apps/issues/sidebar/__tests__/Sidebar-it.tsx
+++ b/server/sonar-web/src/main/js/apps/issues/sidebar/__tests__/Sidebar-it.tsx
@@ -77,7 +77,7 @@ describe('MQR mode', () => {
       'issues.facet.directories',
       'issues.facet.files',
       'issues.facet.assignees',
-      '',
+      '',
       'issues.facet.authors',
       'issues.facet.prioritized_rule.category',
     ]);
@@ -163,7 +163,7 @@ describe('MQR mode', () => {
       'issues.facet.tags',
       'issues.facet.projects',
       'issues.facet.assignees',
-      '',
+      '',
       'issues.facet.authors',
     ]);
   });
@@ -189,7 +189,7 @@ describe('MQR mode', () => {
       'issues.facet.tags',
       'issues.facet.projects',
       'issues.facet.assignees',
-      '',
+      '',
       'issues.facet.authors',
     ]);
   });
@@ -215,7 +215,7 @@ describe('MQR mode', () => {
       'issues.facet.tags',
       'issues.facet.projects',
       'issues.facet.assignees',
-      '',
+      '',
       'issues.facet.authors',
     ]);
   });
@@ -250,7 +250,7 @@ describe('Standard mode', () => {
       'issues.facet.directories',
       'issues.facet.files',
       'issues.facet.assignees',
-      '',
+      '',
       'issues.facet.authors',
       'issues.facet.prioritized_rule.category',
     ]);
@@ -338,7 +338,7 @@ describe('Standard mode', () => {
       'issues.facet.tags',
       'issues.facet.projects',
       'issues.facet.assignees',
-      '',
+      '',
       'issues.facet.authors',
     ]);
   });
@@ -361,7 +361,7 @@ describe('Standard mode', () => {
       'issues.facet.tags',
       'issues.facet.projects',
       'issues.facet.assignees',
-      '',
+      '',
       'issues.facet.authors',
     ]);
   });
@@ -384,7 +384,7 @@ describe('Standard mode', () => {
       'issues.facet.tags',
       'issues.facet.projects',
       'issues.facet.assignees',
-      '',
+      '',
       'issues.facet.authors',
     ]);
   });
diff --git a/server/sonar-web/src/main/js/design-system/components/FacetBox.tsx b/server/sonar-web/src/main/js/design-system/components/FacetBox.tsx
index 84001842fdc..898b19d67fc 100644
--- a/server/sonar-web/src/main/js/design-system/components/FacetBox.tsx
+++ b/server/sonar-web/src/main/js/design-system/components/FacetBox.tsx
@@ -19,7 +19,7 @@
  */
 
 import styled from '@emotion/styled';
-import { Text } from '@sonarsource/echoes-react';
+import { ButtonIcon, ButtonSize, ButtonVariety, IconX, Text } from '@sonarsource/echoes-react';
 import classNames from 'classnames';
 import { uniqueId } from 'lodash';
 import * as React from 'react';
@@ -28,11 +28,9 @@ import tw from 'twin.macro';
 import { themeColor } from '../helpers';
 import { BareButton } from '../sonar-aligned/components/buttons';
 import { Badge } from './Badge';
-import { DestructiveIcon } from './InteractiveIcon';
 import { Spinner } from './Spinner';
 import { Tooltip as SCTooltip } from './Tooltip';
 import { OpenCloseIndicator } from './icons';
-import { CloseIcon } from './icons/CloseIcon';
 
 export interface FacetBoxProps {
   ariaLabel?: string;
@@ -142,20 +140,21 @@ export function FacetBox(props: FacetBoxProps) {
 
         {counter > 0 && (
           <BadgeAndIcons>
-            <Badge title={countLabel} variant="counter">
+            <Badge className="sw-px-2" title={countLabel} variant="counter">
               {counter}
             </Badge>
 
             {Boolean(clearable) && (
               <Tooltip content={clearIconLabel}>
-                <ClearIcon
-                  Icon={CloseIcon}
-                  aria-label={
+                <ButtonIcon
+                  variety={ButtonVariety.DefaultGhost}
+                  ariaLabel={
                     clearIconLabel ?? intl.formatMessage({ id: 'clear_x_filter' }, { '0': name })
                   }
                   data-testid={`clear-${name}`}
                   onClick={onClear}
-                  size="small"
+                  Icon={IconX}
+                  size={ButtonSize.Medium}
                 />
               </Tooltip>
             )}
@@ -189,6 +188,7 @@ const Accordion = styled.div<{
 
 const BadgeAndIcons = styled.div`
   ${tw`sw-flex`};
+  ${tw`sw-items-center`};
   ${tw`sw-gap-2`};
 `;
 
@@ -215,10 +215,6 @@ const ChevronAndTitle = styled(BareButton)<{
   }
 `;
 
-const ClearIcon = styled(DestructiveIcon)`
-  --color: ${themeColor('dangerButton')};
-`;
-
 const Header = styled.div`
   ${tw`sw-flex`};
   ${tw`sw-gap-3`};
diff --git a/server/sonar-web/src/main/js/design-system/components/__tests__/FacetBox-test.tsx b/server/sonar-web/src/main/js/design-system/components/__tests__/FacetBox-test.tsx
index 8b7e2c6dfde..ad65879c5b6 100644
--- a/server/sonar-web/src/main/js/design-system/components/__tests__/FacetBox-test.tsx
+++ b/server/sonar-web/src/main/js/design-system/components/__tests__/FacetBox-test.tsx
@@ -18,6 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 
+import { TooltipProvider } from '@sonarsource/echoes-react';
 import { screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { renderWithContext } from '../../helpers/testUtils';
@@ -67,8 +68,10 @@ it('should render an inner expanded facet box with count', async () => {
 
 function renderComponent({ children, ...props }: Partial<FacetBoxProps> = {}) {
   return renderWithContext(
-    <FacetBox name="Test FacetBox" {...props}>
-      {children}
-    </FacetBox>,
+    <TooltipProvider>
+      <FacetBox name="Test FacetBox" {...props}>
+        {children}
+      </FacetBox>
+    </TooltipProvider>,
   );
 }
diff --git a/server/sonar-web/src/main/js/helpers/doc-links.ts b/server/sonar-web/src/main/js/helpers/doc-links.ts
index ca747817d8e..45ade402034 100644
--- a/server/sonar-web/src/main/js/helpers/doc-links.ts
+++ b/server/sonar-web/src/main/js/helpers/doc-links.ts
@@ -74,6 +74,7 @@ export enum DocLink {
   MainBranchAnalysis = '/project-administration/maintaining-the-branches-of-your-project/',
   ManagingPortfolios = '/project-administration/managing-portfolios/',
   MetricDefinitions = '/user-guide/code-metrics/metrics-definition/',
+  ModeOverview = '/instance-administration/analysis-functions/instance-mode/instance-mode-overview',
   ModeMQR = '/instance-administration/analysis-functions/instance-mode/mqr-mode',
   ModeStandard = '/instance-administration/analysis-functions/instance-mode/standard-experience',
   Monorepos = '/project-administration/monorepos/',