Check showUpdateModal that is set in the state, updated css and test

percona · Oct 7, 2024 · 110314e · 110314e
1 parent 5442bb5
commit 110314e
Show file tree

Hide file tree

Showing 7 changed files with 34 additions and 31 deletions.
diff --git 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/...shared/components/PerconaBootstrapper/PerconaUpdateVersion/PerconaUpdateVersion.styles.ts b/...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/.../shared/components/PerconaBootstrapper/PerconaUpdateVersion/PerconaUpdateVersion.test.tsx b/.../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/...rcona/shared/components/PerconaBootstrapper/PerconaUpdateVersion/PerconaUpdateVersion.tsx b/...rcona/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,16 +16,16 @@ 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);
 
   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/.../shared/components/PerconaBootstrapper/PerconaUpdateVersion/PerconaUpdateVersion.types.ts b/.../shared/components/PerconaBootstrapper/PerconaUpdateVersion/PerconaUpdateVersion.types.ts
diff --git 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,14 +7,15 @@ import { mapUpdatesChangeLogs, responseToPayload } from './updates.utils';
 
 const initialState: UpdatesState = {
   isLoading: false,
+  showUpdateModal: true,
 };
 
 export const updatesSlice = createSlice({
   name: 'updates',
   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
@@ -18,6 +18,7 @@ export interface UpdatesState {
   latestNewsUrl?: string;
   lastChecked?: string;
   changeLogs?: CheckUpdatesChangeLogs;
+  showUpdateModal: boolean;
 }
 
 export interface CheckUpdatesPayload {