SONAR-23653 Popovers in rules page

10 files changed, 41 insertions, 31 deletions

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/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/apps/issues/sidebar/FacetHelp.tsx b/server/sonar-web/src/main/js/components/facets/FacetHelp.tsx
index a11726248c2..836dc84e12a 100644
--- a/server/sonar-web/src/main/js/apps/issues/sidebar/FacetHelp.tsx
+++ b/server/sonar-web/src/main/js/components/facets/FacetHelp.tsx
@@ -20,8 +20,8 @@
 
 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';
+import { DocLink } from '../../helpers/doc-links';
+import DocumentationLink from '../common/DocumentationLink';
 
 type Props =
   | {
@@ -51,8 +51,9 @@ export function FacetHelp({ property, title, description, noDescription, link, l
           : title
       }
       description={
-        ((property !== undefined && !noDescription) || description) && property
-          ? intl.formatMessage(
+        property
+          ? !noDescription &&
+            intl.formatMessage(
               { id: `issues.facet.${property}.help.description` },
               { p1: (text) => <p>{text}</p>, p: (text) => <p className="sw-mt-4">{text}</p> },
             )
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',