]> source.dussan.org Git - sonarqube.git/commitdiff
SONAR-23653 Popovers in rules page
authorViktor Vorona <viktor.vorona@sonarsource.com>
Thu, 21 Nov 2024 09:18:58 +0000 (10:18 +0100)
committersonartech <sonartech@sonarsource.com>
Thu, 21 Nov 2024 20:02:48 +0000 (20:02 +0000)
server/sonar-web/src/main/js/apps/coding-rules/components/AttributeCategoryFacet.tsx
server/sonar-web/src/main/js/apps/coding-rules/components/SoftwareQualityFacet.tsx
server/sonar-web/src/main/js/apps/issues/sidebar/AttributeCategoryFacet.tsx
server/sonar-web/src/main/js/apps/issues/sidebar/FacetHelp.tsx [deleted file]
server/sonar-web/src/main/js/apps/issues/sidebar/IssueStatusFacet.tsx
server/sonar-web/src/main/js/apps/issues/sidebar/QGMetricsMismatchHelp.tsx
server/sonar-web/src/main/js/apps/issues/sidebar/SoftwareQualityFacet.tsx
server/sonar-web/src/main/js/components/facets/FacetHelp.tsx [new file with mode: 0644]
server/sonar-web/src/main/js/components/facets/SeverityFacet.tsx
server/sonar-web/src/main/js/components/issue/components/IssueTransitionOverlay.tsx
server/sonar-web/src/main/js/helpers/doc-links.ts

index 24a55ec6f52f260b2a1698869d8f829a15125d5e..bba0b4d325df521959f62f79c0f837e9143bee00 100644 (file)
@@ -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}
+        />
+      }
     />
   );
 }
index 0d846dd8449148852695fcf52acff4bbc91f49ce..91554093281f26fbc10550d3a9c40a055723c4c1 100644 (file)
@@ -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} />
+      }
     />
   );
 }
index 86e958953021b07ae99f137902911bf1455d8873..2ad88757d08e06d4bec7e22725352ce97da21c0d 100644 (file)
  * 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 (file)
index a117262..0000000
+++ /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>
-  );
-}
index a887cc8e3d8bfc9de43dbb901464735769f51033..51570eff63c5dd54bc57c3a584a414e027b09e60 100644 (file)
 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';
index 3e63d850e9558ff8699cf28eaae93e77d0f66e0d..4379ee5ade821676cba086aed539a309988d6031 100644 (file)
@@ -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();
index b16f8a028f0da04b6735a5a5d29d6c669cf88b69..33e9921de03fa93c3351dfc49576de77d99e014d 100644 (file)
  * 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 (file)
index 0000000..836dc84
--- /dev/null
@@ -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>
+  );
+}
index 6b3b6ac71826f5a3e100f85a0f39305e7d179b54..e125d76f9c934e5d3f39fd00767a112fa102404d 100644 (file)
 
 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();
index 7fb8b00af2e1c7fd0521f038d49f67bd1f713711..f4a5dd81630b17c99c35c11186f0eacc0c849a9c 100644 (file)
@@ -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 && (
         <>
index db7229d2f6bc3673a9f64391b51ca40215221e4d..795c467e20c7c61f0fae4ecc35cd912d110ade02 100644 (file)
@@ -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',