From: Viktor Vorona <viktor.vorona@sonarsource.com>
Date: Thu, 21 Nov 2024 09:18:58 +0000 (+0100)
Subject: SONAR-23653 Popovers in rules page
X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=7def8b1bee1d55fd6d0bd116527f7319fb7f428c;p=sonarqube.git

SONAR-23653 Popovers in rules page
---

diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/AttributeCategoryFacet.tsx b/server/sonar-web/src/main/js/apps/coding-rules/components/AttributeCategoryFacet.tsx
index 24a55ec6f52..bba0b4d325d 100644
--- a/server/sonar-web/src/main/js/apps/coding-rules/components/AttributeCategoryFacet.tsx
+++ b/server/sonar-web/src/main/js/apps/coding-rules/components/AttributeCategoryFacet.tsx
@@ -20,7 +20,9 @@
 
 import * as React from 'react';
 import Facet, { BasicProps } from '../../../components/facets/Facet';
+import { FacetHelp } from '../../../components/facets/FacetHelp';
 import { CLEAN_CODE_CATEGORIES } from '../../../helpers/constants';
+import { DocLink } from '../../../helpers/doc-links';
 import { translate } from '../../../helpers/l10n';
 
 export default function AttributeCategoryFacet(props: BasicProps) {
@@ -36,6 +38,13 @@ export default function AttributeCategoryFacet(props: BasicProps) {
       property="cleanCodeAttributeCategories"
       renderName={renderName}
       renderTextName={renderName}
+      help={
+        <FacetHelp
+          property="cleanCodeAttributeCategories"
+          noDescription
+          link={DocLink.CleanCodeDefinition}
+        />
+      }
     />
   );
 }
diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/SoftwareQualityFacet.tsx b/server/sonar-web/src/main/js/apps/coding-rules/components/SoftwareQualityFacet.tsx
index 0d846dd8449..91554093281 100644
--- a/server/sonar-web/src/main/js/apps/coding-rules/components/SoftwareQualityFacet.tsx
+++ b/server/sonar-web/src/main/js/apps/coding-rules/components/SoftwareQualityFacet.tsx
@@ -20,7 +20,9 @@
 
 import * as React from 'react';
 import Facet, { BasicProps } from '../../../components/facets/Facet';
+import { FacetHelp } from '../../../components/facets/FacetHelp';
 import { SOFTWARE_QUALITIES } from '../../../helpers/constants';
+import { DocLink } from '../../../helpers/doc-links';
 import { translate } from '../../../helpers/l10n';
 
 export default function SoftwareQualityFacet(props: BasicProps) {
@@ -36,6 +38,9 @@ export default function SoftwareQualityFacet(props: BasicProps) {
       property="impactSoftwareQualities"
       renderName={renderName}
       renderTextName={renderName}
+      help={
+        <FacetHelp property="impactSoftwareQualities" link={DocLink.CleanCodeSoftwareQualities} />
+      }
     />
   );
 }
diff --git a/server/sonar-web/src/main/js/apps/issues/sidebar/AttributeCategoryFacet.tsx b/server/sonar-web/src/main/js/apps/issues/sidebar/AttributeCategoryFacet.tsx
index 86e95895302..2ad88757d08 100644
--- a/server/sonar-web/src/main/js/apps/issues/sidebar/AttributeCategoryFacet.tsx
+++ b/server/sonar-web/src/main/js/apps/issues/sidebar/AttributeCategoryFacet.tsx
@@ -18,10 +18,10 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 
+import { FacetHelp } from '../../../components/facets/FacetHelp';
 import { CLEAN_CODE_CATEGORIES } from '../../../helpers/constants';
 import { DocLink } from '../../../helpers/doc-links';
 import { CleanCodeAttributeCategory } from '../../../types/clean-code-taxonomy';
-import { FacetHelp } from './FacetHelp';
 import { CommonProps, SimpleListStyleFacet } from './SimpleListStyleFacet';
 
 interface Props extends CommonProps {
@@ -41,7 +41,7 @@ export function AttributeCategoryFacet(props: Props) {
         <FacetHelp
           property="cleanCodeAttributeCategories"
           noDescription
-          link={DocLink.CleanCodeIntroduction}
+          link={DocLink.CleanCodeDefinition}
         />
       }
       {...rest}
diff --git a/server/sonar-web/src/main/js/apps/issues/sidebar/FacetHelp.tsx b/server/sonar-web/src/main/js/apps/issues/sidebar/FacetHelp.tsx
deleted file mode 100644
index a11726248c2..00000000000
--- a/server/sonar-web/src/main/js/apps/issues/sidebar/FacetHelp.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2024 SonarSource SA
- * 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 { Button, ButtonVariety, IconQuestionMark, Popover } from '@sonarsource/echoes-react';
-import { useIntl } from 'react-intl';
-import DocumentationLink from '../../../components/common/DocumentationLink';
-import { DocLink } from '../../../helpers/doc-links';
-
-type Props =
-  | {
-      description?: never;
-      link: DocLink;
-      linkText?: never;
-      noDescription?: boolean;
-      property: string;
-      title?: never;
-    }
-  | {
-      description?: string | React.ReactNode;
-      link: DocLink;
-      linkText: string;
-      noDescription?: never;
-      property?: never;
-      title: string;
-    };
-
-export function FacetHelp({ property, title, description, noDescription, link, linkText }: Props) {
-  const intl = useIntl();
-  return (
-    <Popover
-      title={
-        property !== undefined
-          ? intl.formatMessage({ id: `issues.facet.${property}.help.title` })
-          : title
-      }
-      description={
-        ((property !== undefined && !noDescription) || description) && property
-          ? intl.formatMessage(
-              { id: `issues.facet.${property}.help.description` },
-              { p1: (text) => <p>{text}</p>, p: (text) => <p className="sw-mt-4">{text}</p> },
-            )
-          : description
-      }
-      footer={
-        <DocumentationLink standalone to={link}>
-          {property ? intl.formatMessage({ id: `issues.facet.${property}.help.link` }) : linkText}
-        </DocumentationLink>
-      }
-    >
-      <Button
-        className="sw-p-0 sw-h-fit sw-min-h-fit"
-        aria-label={intl.formatMessage({ id: 'help' })}
-        variety={ButtonVariety.DefaultGhost}
-      >
-        <IconQuestionMark color="echoes-color-icon-subdued" />
-      </Button>
-    </Popover>
-  );
-}
diff --git a/server/sonar-web/src/main/js/apps/issues/sidebar/IssueStatusFacet.tsx b/server/sonar-web/src/main/js/apps/issues/sidebar/IssueStatusFacet.tsx
index a887cc8e3d8..51570eff63c 100644
--- a/server/sonar-web/src/main/js/apps/issues/sidebar/IssueStatusFacet.tsx
+++ b/server/sonar-web/src/main/js/apps/issues/sidebar/IssueStatusFacet.tsx
@@ -21,12 +21,12 @@
 import { isEqual, sortBy, without } from 'lodash';
 import { useIntl } from 'react-intl';
 import { FacetBox, FacetItem } from '~design-system';
+import { FacetHelp } from '../../../components/facets/FacetHelp';
 import { DEFAULT_ISSUES_QUERY } from '../../../components/shared/utils';
 import { ISSUE_STATUSES } from '../../../helpers/constants';
 import { DocLink } from '../../../helpers/doc-links';
 import { IssueStatus } from '../../../types/issues';
 import { formatFacetStat } from '../utils';
-import { FacetHelp } from './FacetHelp';
 import { FacetItemsList } from './FacetItemsList';
 import { MultipleSelectionHint } from './MultipleSelectionHint';
 import { CommonProps } from './SimpleListStyleFacet';
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 3e63d850e95..4379ee5ade8 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
@@ -19,9 +19,9 @@
  */
 
 import { useIntl } from 'react-intl';
+import { FacetHelp } from '../../../components/facets/FacetHelp';
 import { DocLink } from '../../../helpers/doc-links';
 import { useStandardExperienceMode } from '../../../queries/settings';
-import { FacetHelp } from './FacetHelp';
 
 export default function QGMetricsMismatchHelp() {
   const intl = useIntl();
diff --git a/server/sonar-web/src/main/js/apps/issues/sidebar/SoftwareQualityFacet.tsx b/server/sonar-web/src/main/js/apps/issues/sidebar/SoftwareQualityFacet.tsx
index b16f8a028f0..33e9921de03 100644
--- a/server/sonar-web/src/main/js/apps/issues/sidebar/SoftwareQualityFacet.tsx
+++ b/server/sonar-web/src/main/js/apps/issues/sidebar/SoftwareQualityFacet.tsx
@@ -18,10 +18,10 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 
+import { FacetHelp } from '../../../components/facets/FacetHelp';
 import { SOFTWARE_QUALITIES } from '../../../helpers/constants';
 import { DocLink } from '../../../helpers/doc-links';
 import { SoftwareQuality } from '../../../types/clean-code-taxonomy';
-import { FacetHelp } from './FacetHelp';
 import QGMetricsMismatchHelp from './QGMetricsMismatchHelp';
 import { CommonProps, SimpleListStyleFacet } from './SimpleListStyleFacet';
 
@@ -42,7 +42,7 @@ export function SoftwareQualityFacet(props: Props) {
         props.secondLine ? (
           <QGMetricsMismatchHelp />
         ) : (
-          <FacetHelp property="impactSoftwareQualities" link={DocLink.CleanCodeIntroduction} />
+          <FacetHelp property="impactSoftwareQualities" link={DocLink.CleanCodeSoftwareQualities} />
         )
       }
       {...rest}
diff --git a/server/sonar-web/src/main/js/components/facets/FacetHelp.tsx b/server/sonar-web/src/main/js/components/facets/FacetHelp.tsx
new file mode 100644
index 00000000000..836dc84e12a
--- /dev/null
+++ b/server/sonar-web/src/main/js/components/facets/FacetHelp.tsx
@@ -0,0 +1,77 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2024 SonarSource SA
+ * 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 { Button, ButtonVariety, IconQuestionMark, Popover } from '@sonarsource/echoes-react';
+import { useIntl } from 'react-intl';
+import { DocLink } from '../../helpers/doc-links';
+import DocumentationLink from '../common/DocumentationLink';
+
+type Props =
+  | {
+      description?: never;
+      link: DocLink;
+      linkText?: never;
+      noDescription?: boolean;
+      property: string;
+      title?: never;
+    }
+  | {
+      description?: string | React.ReactNode;
+      link: DocLink;
+      linkText: string;
+      noDescription?: never;
+      property?: never;
+      title: string;
+    };
+
+export function FacetHelp({ property, title, description, noDescription, link, linkText }: Props) {
+  const intl = useIntl();
+  return (
+    <Popover
+      title={
+        property !== undefined
+          ? intl.formatMessage({ id: `issues.facet.${property}.help.title` })
+          : title
+      }
+      description={
+        property
+          ? !noDescription &&
+            intl.formatMessage(
+              { id: `issues.facet.${property}.help.description` },
+              { p1: (text) => <p>{text}</p>, p: (text) => <p className="sw-mt-4">{text}</p> },
+            )
+          : description
+      }
+      footer={
+        <DocumentationLink standalone to={link}>
+          {property ? intl.formatMessage({ id: `issues.facet.${property}.help.link` }) : linkText}
+        </DocumentationLink>
+      }
+    >
+      <Button
+        className="sw-p-0 sw-h-fit sw-min-h-fit"
+        aria-label={intl.formatMessage({ id: 'help' })}
+        variety={ButtonVariety.DefaultGhost}
+      >
+        <IconQuestionMark color="echoes-color-icon-subdued" />
+      </Button>
+    </Popover>
+  );
+}
diff --git a/server/sonar-web/src/main/js/components/facets/SeverityFacet.tsx b/server/sonar-web/src/main/js/components/facets/SeverityFacet.tsx
index 6b3b6ac7182..e125d76f9c9 100644
--- a/server/sonar-web/src/main/js/components/facets/SeverityFacet.tsx
+++ b/server/sonar-web/src/main/js/components/facets/SeverityFacet.tsx
@@ -20,13 +20,13 @@
 
 import * as React from 'react';
 import { useIntl } from 'react-intl';
-import { FacetHelp } from '../../apps/issues/sidebar/FacetHelp';
 import QGMetricsMismatchHelp from '../../apps/issues/sidebar/QGMetricsMismatchHelp';
 import { IMPACT_SEVERITIES } from '../../helpers/constants';
 import { DocLink } from '../../helpers/doc-links';
 import { translate } from '../../helpers/l10n';
 import SoftwareImpactSeverityIcon from '../icon-mappers/SoftwareImpactSeverityIcon';
 import Facet, { BasicProps } from './Facet';
+import { FacetHelp } from './FacetHelp';
 
 export default function SeverityFacet(props: Readonly<BasicProps>) {
   const intl = useIntl();
diff --git a/server/sonar-web/src/main/js/components/issue/components/IssueTransitionOverlay.tsx b/server/sonar-web/src/main/js/components/issue/components/IssueTransitionOverlay.tsx
index 7fb8b00af2e..f4a5dd81630 100644
--- a/server/sonar-web/src/main/js/components/issue/components/IssueTransitionOverlay.tsx
+++ b/server/sonar-web/src/main/js/components/issue/components/IssueTransitionOverlay.tsx
@@ -23,7 +23,6 @@ import { useIntl } from 'react-intl';
 import {
   ButtonPrimary,
   ButtonSecondary,
-  HighlightRing,
   InputTextArea,
   ItemDivider,
   PageContentFontWrapper,
@@ -77,30 +76,24 @@ export function IssueTransitionOverlay(props: Readonly<Props>) {
   return (
     <ul className="sw-flex sw-flex-col">
       {filteredTransitionsRecommended.map((transition) => (
-        <HighlightRing
+        <IssueTransitionItem
           key={transition}
-          data-guiding-id={transition === IssueTransition.Accept ? 'issue-accept-transition' : ''}
-        >
-          <IssueTransitionItem
-            transition={transition}
-            selected={selectedTransition === transition}
-            onSelectTransition={selectTransition}
-          />
-        </HighlightRing>
+          transition={transition}
+          selected={selectedTransition === transition}
+          onSelectTransition={selectTransition}
+        />
       ))}
       {filteredTransitionsRecommended.length > 0 && filteredTransitionsDeprecated.length > 0 && (
         <ItemDivider />
       )}
-      <HighlightRing data-guiding-id="issue-deprecated-transitions">
-        {filteredTransitionsDeprecated.map((transition) => (
-          <IssueTransitionItem
-            key={transition}
-            transition={transition}
-            selected={selectedTransition === transition}
-            onSelectTransition={selectTransition}
-          />
-        ))}
-      </HighlightRing>
+      {filteredTransitionsDeprecated.map((transition) => (
+        <IssueTransitionItem
+          key={transition}
+          transition={transition}
+          selected={selectedTransition === transition}
+          onSelectTransition={selectTransition}
+        />
+      ))}
 
       {selectedTransition && (
         <>
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 db7229d2f6b..795c467e20c 100644
--- a/server/sonar-web/src/main/js/helpers/doc-links.ts
+++ b/server/sonar-web/src/main/js/helpers/doc-links.ts
@@ -51,6 +51,8 @@ export enum DocLink {
   CIAnalysisSetup = '/analyzing-source-code/ci-integration/overview/',
   CIJenkins = '/analyzing-source-code/ci-integration/jenkins-integration/key-features/',
   CleanCodeIntroduction = '/core-concepts/clean-code/introduction/',
+  CleanCodeSoftwareQualities = '/core-concepts/clean-code/software-qualities/',
+  CleanCodeDefinition = '/core-concepts/clean-code/definition/',
   CodeAnalysis = '/core-concepts/clean-code/code-analysis/',
   InactiveBranches = '/project-administration/maintaining-the-branches-of-your-project/#manage-inactive-branches',
   InstanceAdminEncryption = '/instance-administration/system-functions/security/#settings-encryption',