Show tour after showUpdate becames false

percona · Oct 3, 2024 · 3ac0b5d · 3ac0b5d
1 parent d4f81fb
commit 3ac0b5d
Show file tree

Hide file tree

Showing 5 changed files with 80 additions and 62 deletions.
diff --git a/public/app/percona/shared/components/PerconaBootstrapper/PerconaBootstrapper.tsx b/public/app/percona/shared/components/PerconaBootstrapper/PerconaBootstrapper.tsx
@@ -14,7 +14,9 @@ import {
   fetchUserStatusAction,
   setAuthorized,
 } from 'app/percona/shared/core/reducers/user/user';
+import { getUpdatesInfo } from 'app/percona/shared/core/selectors';
 import { useAppDispatch } from 'app/store/store';
+import { useSelector } from 'app/types';
 
 import { Telemetry } from '../../../ui-events/components/Telemetry';
 import usePerconaTour from '../../core/hooks/tour';
@@ -33,6 +35,8 @@ import PerconaUpdateVersion from './PerconaUpdateVersion/PerconaUpdateVersion';
 export const PerconaBootstrapper = ({ onReady }: PerconaBootstrapperProps) => {
   const dispatch = useAppDispatch();
   const { setSteps, startTour: startPerconaTour, endTour } = usePerconaTour();
+  const [showUpdate, setShowUpdate] = useState(true);
+  const { updateAvailable } = useSelector(getUpdatesInfo);
   const [modalIsOpen, setModalIsOpen] = useState(true);
   const [showTour, setShowTour] = useState(false);
   const styles = useStyles2(getStyles);
@@ -105,51 +109,55 @@ export const PerconaBootstrapper = ({ onReady }: PerconaBootstrapperProps) => {
       {isSignedIn && <Telemetry />}
       <PerconaNavigation />
       <PerconaTourBootstrapper />
-      {isSignedIn && showTour && (
-        <Modal onDismiss={dismissModal} isOpen={modalIsOpen} title={Messages.title}>
-          <div className={styles.iconContainer}>
-            <Icon type="mono" name={theme.isLight ? 'pmm-logo-light' : 'pmm-logo'} className={styles.svg} />
-          </div>
-          <p>
-            <strong>{Messages.pmm}</strong>
-            {Messages.pmmIs}
-          </p>
-          <p>
-            {Messages.pmmEnables}
-            <ul className={styles.list}>
-              <li>{Messages.spotCriticalPerformance}</li>
-              <li>{Messages.ensureDbPerformance}</li>
-              <li>{Messages.backup}</li>
-            </ul>
-          </p>
-          <p>
-            {Messages.moreInfo}
-            <a
-              href="https://per.co.na/pmm_documentation"
-              target="_blank"
-              rel="noreferrer noopener"
-              className={styles.docsLink}
-            >
-              {Messages.pmmOnlineHelp}
-            </a>
-            .
-          </p>
-          <HorizontalGroup justify="center" spacing="md">
-            <Button onClick={startTour} size="lg" className={styles.callToAction}>
-              {Messages.startTour}
-            </Button>
-          </HorizontalGroup>
-          <HorizontalGroup justify="flex-end" spacing="md">
-            <Button variant="secondary" onClick={finishTour}>
-              {Messages.skip}
-            </Button>
-            <Button variant="secondary" onClick={() => setModalIsOpen(false)}>
-              {Messages.checkLater}
-            </Button>
-          </HorizontalGroup>
-        </Modal>
+      {updateAvailable && showUpdate ? (
+        <PerconaUpdateVersion showUpdate={showUpdate} setShowUpdate={setShowUpdate} />
+      ) : (
+        isSignedIn &&
+        showTour && (
+          <Modal onDismiss={dismissModal} isOpen={modalIsOpen} title={Messages.title}>
+            <div className={styles.iconContainer}>
+              <Icon type="mono" name={theme.isLight ? 'pmm-logo-light' : 'pmm-logo'} className={styles.svg} />
+            </div>
+            <p>
+              <strong>{Messages.pmm}</strong>
+              {Messages.pmmIs}
+            </p>
+            <p>
+              {Messages.pmmEnables}
+              <ul className={styles.list}>
+                <li>{Messages.spotCriticalPerformance}</li>
+                <li>{Messages.ensureDbPerformance}</li>
+                <li>{Messages.backup}</li>
+              </ul>
+            </p>
+            <p>
+              {Messages.moreInfo}
+              <a
+                href="https://per.co.na/pmm_documentation"
+                target="_blank"
+                rel="noreferrer noopener"
+                className={styles.docsLink}
+              >
+                {Messages.pmmOnlineHelp}
+              </a>
+              .
+            </p>
+            <HorizontalGroup justify="center" spacing="md">
+              <Button onClick={startTour} size="lg" className={styles.callToAction}>
+                {Messages.startTour}
+              </Button>
+            </HorizontalGroup>
+            <HorizontalGroup justify="flex-end" spacing="md">
+              <Button variant="secondary" onClick={finishTour}>
+                {Messages.skip}
+              </Button>
+              <Button variant="secondary" onClick={() => setModalIsOpen(false)}>
+                {Messages.checkLater}
+              </Button>
+            </HorizontalGroup>
+          </Modal>
+        )
       )}
-      {!showTour && <PerconaUpdateVersion />}
     </>
   );
 };
diff --git a/...red/components/PerconaBootstrapper/PerconaUpdateVersion/PerconaUpdateVersion.constants.ts b/...red/components/PerconaBootstrapper/PerconaUpdateVersion/PerconaUpdateVersion.constants.ts
@@ -8,5 +8,5 @@ export const Messages = {
   readMore: 'Read more',
   fullReleaseNotes: 'Full release notes here',
   goToUpdatesPage: 'Go to updates page',
-  snooze: 'Snooze',
+  snooze: 'Dismiss',
 };
diff --git a/.../shared/components/PerconaBootstrapper/PerconaUpdateVersion/PerconaUpdateVersion.test.tsx b/.../shared/components/PerconaBootstrapper/PerconaUpdateVersion/PerconaUpdateVersion.test.tsx
@@ -1,26 +1,31 @@
+import { EnhancedStore } from '@reduxjs/toolkit';
 import { fireEvent, render, screen } from '@testing-library/react';
-import React from 'react';
+import React, { useState } from 'react';
 import { Provider } from 'react-redux';
 import { waitFor } from 'test/test-utils';
 
+import { Messages } from 'app/percona/shared/components/PerconaBootstrapper/PerconaUpdateVersion/PerconaUpdateVersion.constants';
 import * as GrafanaUpdates from 'app/percona/shared/core/reducers/updates/updates';
 import * as User from 'app/percona/shared/core/reducers/user/user';
 import { UpdatesService } from 'app/percona/shared/services/updates';
 import { configureStore } from 'app/store/configureStore';
+import { StoreState } from 'app/types';
 
 import PerconaUpdateVersion from './PerconaUpdateVersion';
-import { StoreState } from 'app/types';
-import { EnhancedStore } from '@reduxjs/toolkit';
-import { Messages } from 'app/percona/shared/components/PerconaBootstrapper/PerconaUpdateVersion/PerconaUpdateVersion.constants';
 
 const checkUpdatesChangeLogsSpy = jest.spyOn(GrafanaUpdates, 'checkUpdatesChangeLogs');
 const setSnoozedVersionSpy = jest.spyOn(User, 'setSnoozedVersion');
 
+const PerconaUpdateVersionWithProps = () => {
+  const [showUpdate, setShowUpdate] = useState(true);
+  return <PerconaUpdateVersion showUpdate={showUpdate} setShowUpdate={setShowUpdate} />;
+};
+
 describe('PerconaUpdateVersion', () => {
   const setup = (store: EnhancedStore) =>
     render(
       <Provider store={store}>
-        <PerconaUpdateVersion />
+        <PerconaUpdateVersionWithProps />
       </Provider>
     );
 

diff --git a/...rcona/shared/components/PerconaBootstrapper/PerconaUpdateVersion/PerconaUpdateVersion.tsx b/...rcona/shared/components/PerconaBootstrapper/PerconaUpdateVersion/PerconaUpdateVersion.tsx
@@ -1,36 +1,37 @@
-import React, { FC, useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 
 import { dateTimeFormat } from '@grafana/data';
 import { Modal, useStyles2, Button } from '@grafana/ui';
+import { PMM_UPDATES_LINK } from 'app/percona/shared/components/PerconaBootstrapper/PerconaNavigation';
+import { PerconaUpdateVersionProps } from 'app/percona/shared/components/PerconaBootstrapper/PerconaUpdateVersion/PerconaUpdateVersion.types';
 import { checkUpdatesChangeLogs, UpdatesChangeLogs } from 'app/percona/shared/core/reducers/updates';
+import { setSnoozedVersion } from 'app/percona/shared/core/reducers/user/user';
 import { getPerconaUser, getUpdatesInfo } from 'app/percona/shared/core/selectors';
 import { useAppDispatch } from 'app/store/store';
 import { useSelector } from 'app/types';
 
 import { Messages } from './PerconaUpdateVersion.constants';
 import { getStyles } from './PerconaUpdateVersion.styles';
-import { PMM_UPDATES_LINK } from 'app/percona/shared/components/PerconaBootstrapper/PerconaNavigation';
-import { setSnoozedVersion } from 'app/percona/shared/core/reducers/user/user';
 
-const PerconaUpdateVersion: FC = () => {
+const PerconaUpdateVersion = ({ showUpdate, setShowUpdate }: PerconaUpdateVersionProps) => {
   const { updateAvailable, installed, latest, changeLogs } = useSelector(getUpdatesInfo);
   const { snoozedPmmVersion } = useSelector(getPerconaUser);
-  const [showUpdate, setShowUpdate] = useState(false);
   const dispatch = useAppDispatch();
   const styles = useStyles2(getStyles);
 
   useEffect(() => {
     const prepareModal = async () => {
-      if (installed?.version !== latest?.version && snoozedPmmVersion !== latest?.version) {
-        setShowUpdate(true);
+      if (installed?.version === latest?.version || snoozedPmmVersion === latest?.version) {
+        setShowUpdate(false);
+      } else {
         await dispatch(checkUpdatesChangeLogs());
       }
     };
 
     if (updateAvailable) {
       prepareModal();
     }
-  }, [dispatch, updateAvailable, installed, latest, snoozedPmmVersion]);
+  }, [dispatch, updateAvailable, installed, latest, snoozedPmmVersion, setShowUpdate]);
 
   const snoozeUpdate = async () => {
     if (latest && latest.version) {
@@ -69,8 +70,8 @@ const PerconaUpdateVersion: FC = () => {
             <Button type="button" variant="secondary" onClick={snoozeUpdate} className={styles.snoozeButton}>
               {Messages.snooze}
             </Button>
-            <Button type="button" variant="primary">
-              <a onClick={onUpdateClick}>{Messages.goToUpdatesPage}</a>
+            <Button type="button" variant="primary" onClick={onUpdateClick}>
+              {Messages.goToUpdatesPage}
             </Button>
           </div>
         </div>
@@ -98,8 +99,8 @@ const PerconaUpdateVersion: FC = () => {
             <Button type="button" variant="secondary" onClick={snoozeUpdate} className={styles.snoozeButton}>
               {Messages.snooze}
             </Button>
-            <Button type="button" variant="primary">
-              <a onClick={onUpdateClick}>{Messages.goToUpdatesPage}</a>
+            <Button type="button" variant="primary" onClick={onUpdateClick}>
+              {Messages.goToUpdatesPage}
             </Button>
           </div>
         </div>

diff --git a/.../shared/components/PerconaBootstrapper/PerconaUpdateVersion/PerconaUpdateVersion.types.ts b/.../shared/components/PerconaBootstrapper/PerconaUpdateVersion/PerconaUpdateVersion.types.ts
@@ -0,0 +1,4 @@
+export interface PerconaUpdateVersionProps {
+  showUpdate: boolean;
+  setShowUpdate: (showUpdate: boolean) => void;
+}