SONAR-23654 Fix small UI bugs

diff --git a/server/sonar-web/src/main/js/app/components/LicensePromptModal.tsx b/server/sonar-web/src/main/js/app/components/LicensePromptModal.tsx
index 59d6fd253247f71ea76141d96a47c222465ed4f9..e13dc59a625578b80d2d61639965286186cceb0c 100644 (file)
--- a/server/sonar-web/src/main/js/app/components/LicensePromptModal.tsx
+++ b/server/sonar-web/src/main/js/app/components/LicensePromptModal.tsx
@@ -18,19 +18,20 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 
-import { Link } from '@sonarsource/echoes-react';
+import { Button, Link, Modal } from '@sonarsource/echoes-react';
 import { FormattedMessage } from 'react-intl';
-import { Modal } from '~design-system';
 import { translate } from '../../helpers/l10n';
 
 interface Props {
+  isOpen?: boolean;
   onClose: () => void;
 }
 
-export default function LicensePromptModal({ onClose }: Readonly<Props>) {
+export default function LicensePromptModal({ isOpen, onClose }: Readonly<Props>) {
   return (
     <Modal
-      body={
+      isOpen={isOpen ?? false}
+      content={
         <FormattedMessage
           defaultMessage={translate('license.prompt.description')}
           id="license.prompt.description"
@@ -43,9 +44,9 @@ export default function LicensePromptModal({ onClose }: Readonly<Props>) {
           }}
         />
       }
-      headerTitle={translate('license.prompt.title')}
-      onClose={onClose}
-      secondaryButtonLabel={translate('cancel')}
+      onOpenChange={(open) => !open && onClose()}
+      title={translate('license.prompt.title')}
+      secondaryButton={<Button onClick={onClose}>{translate('cancel')}</Button>}
     />
   );
 }

diff --git a/server/sonar-web/src/main/js/app/components/ModeTour.tsx b/server/sonar-web/src/main/js/app/components/ModeTour.tsx
index 74b9bc89cca72fa3251cf1ea7265d09d349d6118..914a796855979c7d8416f75adc76d78c04ec5778 100644 (file)
--- a/server/sonar-web/src/main/js/app/components/ModeTour.tsx
+++ b/server/sonar-web/src/main/js/app/components/ModeTour.tsx
@@ -19,7 +19,8 @@
  */
 
 import { Button, ButtonVariety, Modal, ModalSize } from '@sonarsource/echoes-react';
-import { useContext, useEffect, useState } from 'react';
+import { debounce } from 'lodash';
+import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import { useIntl } from 'react-intl';
 import { CallBackProps } from 'react-joyride';
 import { SpotlightTour, SpotlightTourStep } from '~design-system';
@@ -44,6 +45,8 @@ export default function ModeTour() {
   const [step, setStep] = useState(1);
   const [runManually, setRunManually] = useState(false);
 
+  const dismissedTour = currentUser.dismissedNotices[NoticeType.MODE_TOUR];
+
   const nextStep = () => {
     if (step === MAX_STEPS) {
       document.dispatchEvent(new CustomEvent(CustomEvents.OpenHelpMenu));
@@ -53,17 +56,27 @@ export default function ModeTour() {
     }
   };
 
-  const dismissTour = () => {
+  const dismissTourWithDebounce = useMemo(
+    () =>
+      debounce(() => {
+        dismissNotice(NoticeType.MODE_TOUR)
+          .then(() => {
+            updateDismissedNotices(NoticeType.MODE_TOUR, true);
+          })
+          .catch(() => {
+            /* noop */
+          });
+      }, 500),
+    [updateDismissedNotices],
+  );
+
+  const dismissTour = useCallback(() => {
     document.dispatchEvent(new CustomEvent(CustomEvents.CloseHelpMenu));
     setStep(6);
-    dismissNotice(NoticeType.MODE_TOUR)
-      .then(() => {
-        updateDismissedNotices(NoticeType.MODE_TOUR, true);
-      })
-      .catch(() => {
-        /* noop */
-      });
-  };
+    if (!dismissedTour) {
+      dismissTourWithDebounce();
+    }
+  }, [dismissedTour, dismissTourWithDebounce]);
 
   const onToggle = (props: CallBackProps) => {
     switch (props.action) {
@@ -95,13 +108,12 @@ export default function ModeTour() {
   const isAdmin = currentUser.permissions?.global.includes(Permissions.Admin);
   const isAdminOrQGAdmin =
     isAdmin || currentUser.permissions?.global.includes(Permissions.QualityGateAdmin);
-  const dismissedTour = currentUser.dismissedNotices[NoticeType.MODE_TOUR];
 
   useEffect(() => {
     if (currentUser.isLoggedIn && !isAdminOrQGAdmin && !dismissedTour) {
       dismissTour();
     }
-  }, [currentUser.isLoggedIn, isAdminOrQGAdmin, dismissedTour]);
+  }, [currentUser.isLoggedIn, isAdminOrQGAdmin, dismissedTour, dismissTour]);
 
   if (!runManually && (currentUser.dismissedNotices[NoticeType.MODE_TOUR] || !isAdminOrQGAdmin)) {
     return null;
@@ -201,7 +213,7 @@ export default function ModeTour() {
         steps={steps}
         run={step > maxModalSteps}
         continuous
-        disableOverlay={step === 5}
+        disableOverlay={false}
         showProgress={step !== 5}
         stepIndex={step - maxModalSteps - 1}
         nextLabel={intl.formatMessage({ id: 'next' })}

diff --git a/server/sonar-web/src/main/js/app/components/StartupModal.tsx b/server/sonar-web/src/main/js/app/components/StartupModal.tsx
index cf318eec3f200fd5a3fbcf21404d355eb353d2eb..5ef6b4e61f1681a3728cee92696ec16eb7bac123 100644 (file)
--- a/server/sonar-web/src/main/js/app/components/StartupModal.tsx
+++ b/server/sonar-web/src/main/js/app/components/StartupModal.tsx
@@ -76,7 +76,7 @@ export class StartupModal extends React.PureComponent<React.PropsWithChildren<Pr
 
   render() {
     const { open } = this.state;
-    return open ? <LicensePromptModal onClose={this.closeLicense} /> : null;
+    return <LicensePromptModal isOpen={open} onClose={this.closeLicense} />;
   }
 }
 

diff --git a/sonar-core/src/main/resources/org/sonar/l10n/core.properties b/sonar-core/src/main/resources/org/sonar/l10n/core.properties
index 715aee75ec3493f507b314a2d93003deb5ac2e9a..5360fc658631aa83e30ddf22064f5e7f0dda3995 100644 (file)
--- a/sonar-core/src/main/resources/org/sonar/l10n/core.properties
+++ b/sonar-core/src/main/resources/org/sonar/l10n/core.properties
@@ -1872,8 +1872,8 @@ settings.mode.save.warning=Save changes to see them reflected in your instance
 settings.mode.save=Save the mode. The current mode will be switched to {isStandardMode, select, true {Standard Experience} other {Multi-Quality Rule Mode}}
 settings.mode.save.success=This instance is now in {isStandardMode, select, true {Standard Experience} other {Multi-Quality Rule Mode}}.
 
-mode.standard.advertisement=Looking for Bugs, Vulnerabilities, or Code Smells? If your team prefers working with these types, change it in the <a>settings</a>
-mode.mqr.advertisement=Looking for Security, Reliability, and Maintainability issues? If your team prefers working with software qualities, change it in the <a>settings</a>
+mode.standard.advertisement=Looking for Security, Reliability, and Maintainability issues? If your team prefers working with software qualities, change it in the <a>settings</a>
+mode.mqr.advertisement=Looking for Bugs, Vulnerabilities, or Code Smells? If your team prefers working with these types, change it in the <a>settings</a>
 settings.mode.mqr.advertisement=If your team prefers working with Vulnerabilities, Bugs, and Code Smells, change it in the <a>Mode section</a> of General Settings
 settings.mode.standard.advertisement=If your team prefers working with Security, Reliability, and Maintainability issues, change it in the <a>Mode section</a> of General Settings