From 110314ead28c8f7d867be537f2d4b7ba4513ef98 Mon Sep 17 00:00:00 2001
From: DoraCretu594118 <103416234+doracretu3pillar@users.noreply.github.com>
Date: Mon, 7 Oct 2024 13:35:06 +0300
Subject: [PATCH] Check showUpdateModal that is set in the state, updated css
 and test

---
 .../PerconaBootstrapper.tsx                   |  7 +++--
 .../PerconaUpdateVersion.styles.ts            |  3 +--
 .../PerconaUpdateVersion.test.tsx             | 12 ++++-----
 .../PerconaUpdateVersion.tsx                  | 27 ++++++++++---------
 .../PerconaUpdateVersion.types.ts             |  4 ---
 .../shared/core/reducers/updates/updates.ts   | 11 ++++++--
 .../core/reducers/updates/updates.types.ts    |  1 +
 7 files changed, 34 insertions(+), 31 deletions(-)
 delete mode 100644 public/app/percona/shared/components/PerconaBootstrapper/PerconaUpdateVersion/PerconaUpdateVersion.types.ts

diff --git a/public/app/percona/shared/components/PerconaBootstrapper/PerconaBootstrapper.tsx b/public/app/percona/shared/components/PerconaBootstrapper/PerconaBootstrapper.tsx
index 7ce5c03cd327e..c107e57b1a0e8 100644
--- a/public/app/percona/shared/components/PerconaBootstrapper/PerconaBootstrapper.tsx
+++ b/public/app/percona/shared/components/PerconaBootstrapper/PerconaBootstrapper.tsx
@@ -35,8 +35,7 @@ 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 { updateAvailable, isLoading: isLoadingUpdates, showUpdateModal } = useSelector(getUpdatesInfo);
   const [modalIsOpen, setModalIsOpen] = useState(true);
   const [showTour, setShowTour] = useState(false);
   const styles = useStyles2(getStyles);
@@ -109,8 +108,8 @@ export const PerconaBootstrapper = ({ onReady }: PerconaBootstrapperProps) => {
       {isSignedIn && <Telemetry />}
       <PerconaNavigation />
       <PerconaTourBootstrapper />
-      {updateAvailable && showUpdate ? (
-        <PerconaUpdateVersion showUpdate={showUpdate} setShowUpdate={setShowUpdate} />
+      {updateAvailable && showUpdateModal && !isLoadingUpdates ? (
+        <PerconaUpdateVersion />
       ) : (
         isSignedIn &&
         showTour && (
diff --git a/public/app/percona/shared/components/PerconaBootstrapper/PerconaUpdateVersion/PerconaUpdateVersion.styles.ts b/public/app/percona/shared/components/PerconaBootstrapper/PerconaUpdateVersion/PerconaUpdateVersion.styles.ts
index 4e5b9008a0a25..45dd1980d2bf0 100644
--- a/public/app/percona/shared/components/PerconaBootstrapper/PerconaUpdateVersion/PerconaUpdateVersion.styles.ts
+++ b/public/app/percona/shared/components/PerconaBootstrapper/PerconaUpdateVersion/PerconaUpdateVersion.styles.ts
@@ -7,7 +7,6 @@ export const getStyles = ({ v1: { spacing, colors, typography } }: GrafanaTheme2
     display: flex;
     flex-direction: column;
     width: 480px;
-    height: 343px;
   `,
   version: css`
     margin-bottom: ${spacing.md};
@@ -22,7 +21,7 @@ export const getStyles = ({ v1: { spacing, colors, typography } }: GrafanaTheme2
     font-size: ${typography.heading.h5};
     margin-bottom: 8px;
   `,
-  notesTitle: css`
+  howToUpdate: css`
     font-weight: ${typography.weight.semibold};
     font-size: ${typography.heading.h5};
     margin-top: 27px;
diff --git a/public/app/percona/shared/components/PerconaBootstrapper/PerconaUpdateVersion/PerconaUpdateVersion.test.tsx b/public/app/percona/shared/components/PerconaBootstrapper/PerconaUpdateVersion/PerconaUpdateVersion.test.tsx
index 71404338e5832..b4b5e435cdb1b 100644
--- a/public/app/percona/shared/components/PerconaBootstrapper/PerconaUpdateVersion/PerconaUpdateVersion.test.tsx
+++ b/public/app/percona/shared/components/PerconaBootstrapper/PerconaUpdateVersion/PerconaUpdateVersion.test.tsx
@@ -1,6 +1,6 @@
 import { EnhancedStore } from '@reduxjs/toolkit';
 import { fireEvent, render, screen } from '@testing-library/react';
-import React, { useState } from 'react';
+import React from 'react';
 import { Provider } from 'react-redux';
 import { waitFor } from 'test/test-utils';
 
@@ -16,16 +16,11 @@ import PerconaUpdateVersion from './PerconaUpdateVersion';
 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}>
-        <PerconaUpdateVersionWithProps />
+        <PerconaUpdateVersion />
       </Provider>
     );
 
@@ -52,6 +47,7 @@ describe('PerconaUpdateVersion', () => {
         updateAvailable: true,
         latest: { version: '3.0.1' },
         lastChecked: '',
+        showUpdateModal: true,
       },
     };
     jest.spyOn(UpdatesService, 'getUpdatesChangelogs').mockReturnValue(Promise.resolve({ ...changeLogsAPIResponse }));
@@ -99,6 +95,7 @@ describe('PerconaUpdateVersion', () => {
         updateAvailable: true,
         latest: { version: '3.0.1' },
         lastChecked: '',
+        showUpdateModal: true,
       },
     };
     jest.spyOn(UpdatesService, 'getUpdatesChangelogs').mockReturnValue(Promise.resolve({ ...changeLogsAPIResponse }));
@@ -140,6 +137,7 @@ describe('PerconaUpdateVersion', () => {
         updateAvailable: true,
         latest: { version: '3.0.1' },
         lastChecked: '',
+        showUpdateModal: true,
       },
     };
     jest.spyOn(UpdatesService, 'getUpdatesChangelogs').mockReturnValue(Promise.resolve({ ...changeLogsAPIResponse }));
diff --git a/public/app/percona/shared/components/PerconaBootstrapper/PerconaUpdateVersion/PerconaUpdateVersion.tsx b/public/app/percona/shared/components/PerconaBootstrapper/PerconaUpdateVersion/PerconaUpdateVersion.tsx
index 5a70c36ceab83..4ff1f0608bb63 100644
--- a/public/app/percona/shared/components/PerconaBootstrapper/PerconaUpdateVersion/PerconaUpdateVersion.tsx
+++ b/public/app/percona/shared/components/PerconaBootstrapper/PerconaUpdateVersion/PerconaUpdateVersion.tsx
@@ -3,8 +3,11 @@ 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 {
+  checkUpdatesChangeLogs,
+  setShowUpdateModal,
+  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';
@@ -13,8 +16,8 @@ import { useSelector } from 'app/types';
 import { Messages } from './PerconaUpdateVersion.constants';
 import { getStyles } from './PerconaUpdateVersion.styles';
 
-const PerconaUpdateVersion = ({ showUpdate, setShowUpdate }: PerconaUpdateVersionProps) => {
-  const { updateAvailable, installed, latest, changeLogs } = useSelector(getUpdatesInfo);
+const PerconaUpdateVersion = () => {
+  const { updateAvailable, installed, latest, changeLogs, showUpdateModal } = useSelector(getUpdatesInfo);
   const { snoozedPmmVersion } = useSelector(getPerconaUser);
   const dispatch = useAppDispatch();
   const styles = useStyles2(getStyles);
@@ -22,7 +25,7 @@ const PerconaUpdateVersion = ({ showUpdate, setShowUpdate }: PerconaUpdateVersio
   useEffect(() => {
     const prepareModal = async () => {
       if (installed?.version === latest?.version || snoozedPmmVersion === latest?.version) {
-        setShowUpdate(false);
+        dispatch(setShowUpdateModal(false));
       } else {
         await dispatch(checkUpdatesChangeLogs());
       }
@@ -31,21 +34,21 @@ const PerconaUpdateVersion = ({ showUpdate, setShowUpdate }: PerconaUpdateVersio
     if (updateAvailable) {
       prepareModal();
     }
-  }, [dispatch, updateAvailable, installed, latest, snoozedPmmVersion, setShowUpdate]);
+  }, [dispatch, updateAvailable, installed, latest, snoozedPmmVersion]);
 
   const snoozeUpdate = async () => {
     if (latest && latest.version) {
       await dispatch(setSnoozedVersion(latest.version));
     }
-    setShowUpdate(false);
+    dispatch(setShowUpdateModal(false));
   };
 
   const onDismiss = () => {
-    setShowUpdate(false);
+    dispatch(setShowUpdateModal(false));
   };
 
   const onUpdateClick = () => {
-    setShowUpdate(false);
+    dispatch(setShowUpdateModal(false));
     window.location.assign(PMM_UPDATES_LINK.url!);
   };
 
@@ -54,7 +57,7 @@ const PerconaUpdateVersion = ({ showUpdate, setShowUpdate }: PerconaUpdateVersio
       <Modal
         onDismiss={onDismiss}
         title={Messages.titleOneUpdate}
-        isOpen={showUpdate && changeLogs && changeLogs?.updates?.length === 1}
+        isOpen={showUpdateModal && changeLogs && changeLogs?.updates?.length === 1}
         className={styles.updateVersionModal}
       >
         <div data-testid="one-update-modal">
@@ -79,7 +82,7 @@ const PerconaUpdateVersion = ({ showUpdate, setShowUpdate }: PerconaUpdateVersio
       <Modal
         onDismiss={onDismiss}
         title={Messages.titleMultipleUpdates}
-        isOpen={showUpdate && changeLogs && changeLogs?.updates?.length > 1}
+        isOpen={showUpdateModal && changeLogs && changeLogs?.updates?.length > 1}
         className={styles.updateVersionModal}
       >
         <div data-testid="multiple-updates-modal">
@@ -93,7 +96,7 @@ const PerconaUpdateVersion = ({ showUpdate, setShowUpdate }: PerconaUpdateVersio
               </li>
             ))}
           </ul>
-          <h5>{Messages.howToUpdate}</h5>
+          <h5 className={styles.howToUpdate}>{Messages.howToUpdate}</h5>
           <p>{Messages.howToUpdateDescription}</p>
           <div className={styles.updateButtons}>
             <Button type="button" variant="secondary" onClick={snoozeUpdate} className={styles.snoozeButton}>
diff --git a/public/app/percona/shared/components/PerconaBootstrapper/PerconaUpdateVersion/PerconaUpdateVersion.types.ts b/public/app/percona/shared/components/PerconaBootstrapper/PerconaUpdateVersion/PerconaUpdateVersion.types.ts
deleted file mode 100644
index ca9bf69579ff7..0000000000000
--- a/public/app/percona/shared/components/PerconaBootstrapper/PerconaUpdateVersion/PerconaUpdateVersion.types.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export interface PerconaUpdateVersionProps {
-  showUpdate: boolean;
-  setShowUpdate: (showUpdate: boolean) => void;
-}
diff --git a/public/app/percona/shared/core/reducers/updates/updates.ts b/public/app/percona/shared/core/reducers/updates/updates.ts
index 2d999f2bd90a5..a157227af1aef 100644
--- a/public/app/percona/shared/core/reducers/updates/updates.ts
+++ b/public/app/percona/shared/core/reducers/updates/updates.ts
@@ -1,4 +1,4 @@
-import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
+import { createAction, createAsyncThunk, createSlice } from '@reduxjs/toolkit';
 
 import { UpdatesService } from 'app/percona/shared/services/updates';
 
@@ -7,6 +7,7 @@ import { mapUpdatesChangeLogs, responseToPayload } from './updates.utils';
 
 const initialState: UpdatesState = {
   isLoading: false,
+  showUpdateModal: true,
 };
 
 export const updatesSlice = createSlice({
@@ -14,7 +15,7 @@ export const updatesSlice = createSlice({
   initialState,
   reducers: {},
   extraReducers: (builder) => {
-    builder.addCase(checkUpdatesAction.pending, (state) => ({
+    builder.addCase(checkUpdatesAction.pending, () => ({
       ...initialState,
       isLoading: true,
     }));
@@ -37,6 +38,10 @@ export const updatesSlice = createSlice({
     builder.addCase(checkUpdatesChangeLogs.rejected, (state) => ({
       ...state,
     }));
+    builder.addCase(setShowUpdateModal, (state, { payload }) => ({
+      ...state,
+      showUpdateModal: payload,
+    }));
   },
 });
 
@@ -54,4 +59,6 @@ export const checkUpdatesChangeLogs = createAsyncThunk('percona/checkUpdatesChan
   return mapUpdatesChangeLogs(await UpdatesService.getUpdatesChangelogs());
 });
 
+export const setShowUpdateModal = createAction<boolean>('percona/setShowUpdateModal');
+
 export default updatesSlice.reducer;
diff --git a/public/app/percona/shared/core/reducers/updates/updates.types.ts b/public/app/percona/shared/core/reducers/updates/updates.types.ts
index 08e0baae3308a..15090bac21396 100644
--- a/public/app/percona/shared/core/reducers/updates/updates.types.ts
+++ b/public/app/percona/shared/core/reducers/updates/updates.types.ts
@@ -18,6 +18,7 @@ export interface UpdatesState {
   latestNewsUrl?: string;
   lastChecked?: string;
   changeLogs?: CheckUpdatesChangeLogs;
+  showUpdateModal: boolean;
 }
 
 export interface CheckUpdatesPayload {