From 01782b32c3dfd33d8ed8785b33ff415a5f162046 Mon Sep 17 00:00:00 2001
From: DoraCretu594118 <103416234+doracretu3pillar@users.noreply.github.com>
Date: Tue, 1 Oct 2024 15:37:26 +0300
Subject: [PATCH] Fixes after PR reviews

---
 .../PerconaUpdateVersion.styles.ts            |  2 -
 .../PerconaUpdateVersion.test.tsx             |  5 +-
 .../PerconaUpdateVersion.tsx                  | 39 ++++++---------
 .../shared/core/reducers/updates/updates.ts   | 49 +------------------
 .../percona/shared/core/reducers/user/user.ts | 11 +++++
 .../shared/core/reducers/user/user.types.ts   |  1 +
 .../shared/core/reducers/user/user.utils.ts   |  1 +
 public/app/percona/shared/core/selectors.ts   |  2 +-
 .../services/updates/Updates.service.ts       | 11 +----
 .../shared/services/user/User.service.ts      |  4 ++
 .../shared/services/user/User.types.ts        |  2 +
 11 files changed, 40 insertions(+), 87 deletions(-)

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 5a5880027273..e7a912f8031e 100644
--- a/public/app/percona/shared/components/PerconaBootstrapper/PerconaUpdateVersion/PerconaUpdateVersion.styles.ts
+++ b/public/app/percona/shared/components/PerconaBootstrapper/PerconaUpdateVersion/PerconaUpdateVersion.styles.ts
@@ -17,8 +17,6 @@ export const getStyles = ({ v1: { spacing, colors } }: GrafanaTheme2) => ({
       color: ${colors.textBlue};
     }
   `,
-  howToUpdateTitle: css``,
-  howToUpdateDescription: css``,
   newVersionsTitle: css`
     font-weight: 500;
     font-size: 16px;
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 ddaa88e1db98..a294a60b3c8c 100644
--- a/public/app/percona/shared/components/PerconaBootstrapper/PerconaUpdateVersion/PerconaUpdateVersion.test.tsx
+++ b/public/app/percona/shared/components/PerconaBootstrapper/PerconaUpdateVersion/PerconaUpdateVersion.test.tsx
@@ -13,13 +13,12 @@ import { EnhancedStore } from '@reduxjs/toolkit';
 
 const checkUpdatesChangeLogsSpy = jest.spyOn(GrafanaUpdates, 'checkUpdatesChangeLogs');
 describe('PerconaUpdateVersion', () => {
-  function setup(store: EnhancedStore) {
-    return render(
+  const setup = (store: EnhancedStore) =>
+    render(
       <Provider store={store}>
         <PerconaUpdateVersion />
       </Provider>
     );
-  }
 
   beforeEach(() => {
     jest.clearAllMocks();
diff --git a/public/app/percona/shared/components/PerconaBootstrapper/PerconaUpdateVersion/PerconaUpdateVersion.tsx b/public/app/percona/shared/components/PerconaBootstrapper/PerconaUpdateVersion/PerconaUpdateVersion.tsx
index c14ae8ba3213..f8c5962445f6 100644
--- a/public/app/percona/shared/components/PerconaBootstrapper/PerconaUpdateVersion/PerconaUpdateVersion.tsx
+++ b/public/app/percona/shared/components/PerconaBootstrapper/PerconaUpdateVersion/PerconaUpdateVersion.tsx
@@ -2,38 +2,31 @@ import React, { FC, useEffect, useState } from 'react';
 
 import { dateTimeFormat } from '@grafana/data';
 import { Modal, useStyles2, Button } from '@grafana/ui';
-import {
-  checkUpdatesChangeLogs,
-  getSnoozeCurrentVersion,
-  setSnoozeCurrentUpdate,
-  UpdatesChangelogs,
-} from 'app/percona/shared/core/reducers/updates';
-import { getUpdatesInfo } from 'app/percona/shared/core/selectors';
+import { checkUpdatesChangeLogs, UpdatesChangelogs } from 'app/percona/shared/core/reducers/updates';
+import { getTour, 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 { updateAvailable, installed, latest, changeLogs, lastChecked, snoozeCurrentVersion } =
-    useSelector(getUpdatesInfo);
-
+  const { updateAvailable, installed, latest, changeLogs, lastChecked } = useSelector(getUpdatesInfo);
+  const { snoozeCurrentVersion } = useSelector(getTour);
   const [showUpdate, setShowUpdate] = useState(false);
   const dispatch = useAppDispatch();
   const styles = useStyles2(getStyles);
 
   useEffect(() => {
-
     const prepareModal = async () => {
       if (!snoozeCurrentVersion) {
-        await dispatch(getSnoozeCurrentVersion());
+        await dispatch(fetchUserDetailsAction());
       }
 
       if (
-        (installed?.version !== latest?.version &&
-          snoozeCurrentVersion?.snoozedPmmVersion !== latest?.version) ||
+        (installed?.version !== latest?.version && snoozeCurrentVersion?.snoozedPmmVersion !== latest?.version) ||
         !lastChecked
       ) {
         setShowUpdate(true);
@@ -49,11 +42,9 @@ const PerconaUpdateVersion: FC = () => {
   const snoozeUpdate = async () => {
     if (latest && latest.version) {
       const payload = {
-        productTourCompleted: snoozeCurrentVersion?.productTourCompleted || true,
-        alertingTourCompleted: snoozeCurrentVersion?.alertingTourCompleted || true,
-        snoozedPmmVersion: latest.version,
+        version: latest.version.toString(),
       };
-      await dispatch(setSnoozeCurrentUpdate(payload));
+      await dispatch(setSnoozedVersion(payload));
     }
     setShowUpdate(false);
   };
@@ -66,7 +57,7 @@ const PerconaUpdateVersion: FC = () => {
     setShowUpdate(false);
     const baseUrl = `${window.location.protocol}//${window.location.hostname}${window.location.port ? `:${window.location.port}` : ''}`;
     window.location.href = baseUrl + PMM_UPDATES_LINK.url;
-  }
+  };
 
   return (
     <>
@@ -79,10 +70,12 @@ const PerconaUpdateVersion: FC = () => {
         <div data-testid="one-update-modal">
           <h5 className={styles.version}>{changeLogs?.updates[0]?.version || ''}</h5>
           <p className={styles.releaseNotesText}>
-            <a href={changeLogs?.updates[0]?.releaseNotesUrl || ''}>{Messages.fullReleaseNotes}</a>
+            <a target="_blank" rel="noopener noreferrer" href={changeLogs?.updates[0]?.releaseNotesUrl || ''}>
+              {Messages.fullReleaseNotes}
+            </a>
           </p>
-          <h5 className={styles.howToUpdateTitle}>{Messages.howToUpdate}</h5>
-          <p className={styles.howToUpdateDescription}>{Messages.howToUpdateDescription}</p>
+          <h5>{Messages.howToUpdate}</h5>
+          <p>{Messages.howToUpdateDescription}</p>
           <div className={styles.updateButtons}>
             <Button type="button" variant="secondary" onClick={snoozeUpdate} className={styles.snoozeButton}>
               {Messages.snooze}
@@ -104,7 +97,7 @@ const PerconaUpdateVersion: FC = () => {
           <ul className={styles.listOfReleaseNotes}>
             {changeLogs?.updates.map((update: UpdatesChangelogs) => (
               <li key={update.toString()}>
-                <a href={update.releaseNotesUrl}>
+                <a target="_blank" rel="noopener noreferrer" href={update.releaseNotesUrl}>
                   {update.version}, {dateTimeFormat(update.timestamp, { format: 'MMM DD, YYYY' })}
                 </a>
               </li>
diff --git a/public/app/percona/shared/core/reducers/updates/updates.ts b/public/app/percona/shared/core/reducers/updates/updates.ts
index cc52cd5c51a5..6e66d835066f 100644
--- a/public/app/percona/shared/core/reducers/updates/updates.ts
+++ b/public/app/percona/shared/core/reducers/updates/updates.ts
@@ -1,9 +1,8 @@
 import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
 
-import { withSerializedError } from 'app/features/alerting/unified/utils/redux';
 import { UpdatesService } from 'app/percona/shared/services/updates';
 
-import { CheckUpdatesPayload, SnoozePayloadBody, SnoozePayloadResponse, UpdatesState } from './updates.types';
+import { CheckUpdatesPayload, UpdatesState } from './updates.types';
 import { responseToPayload } from './updates.utils';
 
 const initialState: UpdatesState = {
@@ -41,32 +40,6 @@ export const updatesSlice = createSlice({
       ...state,
       isLoading: false,
     }));
-    builder.addCase(getSnoozeCurrentVersion.pending, (state) => ({
-      ...state,
-      isLoading: true,
-    }));
-    builder.addCase(getSnoozeCurrentVersion.fulfilled, (state, { payload }) => ({
-      ...state,
-      snoozeCurrentVersion: payload,
-      isLoading: false,
-    }));
-    builder.addCase(getSnoozeCurrentVersion.rejected, (state) => ({
-      ...state,
-      isLoading: false,
-    }));
-    builder.addCase(setSnoozeCurrentUpdate.pending, (state) => ({
-      ...state,
-      isLoading: true,
-    }));
-    builder.addCase(setSnoozeCurrentUpdate.fulfilled, (state, { payload }) => ({
-      ...state,
-      snoozeCurrentVersion: payload,
-      isLoading: false,
-    }));
-    builder.addCase(setSnoozeCurrentUpdate.rejected, (state) => ({
-      ...state,
-      isLoading: false,
-    }));
   },
 });
 
@@ -84,24 +57,4 @@ export const checkUpdatesChangeLogs = createAsyncThunk('percona/checkUpdatesChan
   return await UpdatesService.getUpdatesChangelogs();
 });
 
-export const setSnoozeCurrentUpdate = createAsyncThunk(
-  'percona/setSnoozeCurrentUpdate',
-  async (body: SnoozePayloadBody): Promise<SnoozePayloadResponse> =>
-    withSerializedError(
-      (async () => {
-        return await UpdatesService.setSnoozeCurrentVersion(body);
-      })()
-    )
-);
-
-export const getSnoozeCurrentVersion = createAsyncThunk(
-  'percona/getSnoozeCurrentVersion',
-  async (): Promise<SnoozePayloadResponse> =>
-    withSerializedError(
-      (async () => {
-        return await UpdatesService.getSnoozeCurrentVersion();
-      })()
-    )
-);
-
 export default updatesSlice.reducer;
diff --git a/public/app/percona/shared/core/reducers/user/user.ts b/public/app/percona/shared/core/reducers/user/user.ts
index c9bb28e015d7..d8391e0f948f 100644
--- a/public/app/percona/shared/core/reducers/user/user.ts
+++ b/public/app/percona/shared/core/reducers/user/user.ts
@@ -13,6 +13,7 @@ export const initialUserState: PerconaUserState = {
   alertingTourCompleted: true,
   isAuthorized: false,
   isPlatformUser: false,
+  snoozedPmmVersion: '',
 };
 
 const perconaUserSlice = createSlice({
@@ -65,6 +66,16 @@ export const setProductTourCompleted = createAsyncThunk(
   }
 );
 
+export const setSnoozedVersion = createAsyncThunk(
+  'percona/setProductTourCompleted',
+  async (version: string, thunkAPI): Promise<UserDetails> => {
+    const res = await UserService.setSnoozedVersion(version);
+    const details = toUserDetailsModel(res);
+    thunkAPI.dispatch(setUserDetails(details));
+    return details;
+  }
+);
+
 export const setAlertingTourCompleted = createAsyncThunk(
   'percona/setAlertingTourCompleted',
   async (alertingTourCompleted: boolean, thunkAPI): Promise<UserDetails> => {
diff --git a/public/app/percona/shared/core/reducers/user/user.types.ts b/public/app/percona/shared/core/reducers/user/user.types.ts
index 8b1734333170..c8a950d900c5 100644
--- a/public/app/percona/shared/core/reducers/user/user.types.ts
+++ b/public/app/percona/shared/core/reducers/user/user.types.ts
@@ -2,6 +2,7 @@ export interface UserDetails {
   userId: number;
   productTourCompleted: boolean;
   alertingTourCompleted: boolean;
+  snoozedPmmVersion?: string;
 }
 
 export interface PerconaUserState extends UserDetails {
diff --git a/public/app/percona/shared/core/reducers/user/user.utils.ts b/public/app/percona/shared/core/reducers/user/user.utils.ts
index d4c10723bf56..5e972077d1bd 100644
--- a/public/app/percona/shared/core/reducers/user/user.utils.ts
+++ b/public/app/percona/shared/core/reducers/user/user.utils.ts
@@ -6,4 +6,5 @@ export const toUserDetailsModel = (res: UserDetailsResponse): UserDetails => ({
   userId: res.user_id,
   productTourCompleted: !!res.product_tour_completed,
   alertingTourCompleted: !!res.alerting_tour_completed,
+  snoozedPmmVersion: res.snoozed_pmm_version,
 });
diff --git a/public/app/percona/shared/core/selectors.ts b/public/app/percona/shared/core/selectors.ts
index e74d1bd502b5..297203ded2b4 100644
--- a/public/app/percona/shared/core/selectors.ts
+++ b/public/app/percona/shared/core/selectors.ts
@@ -15,7 +15,7 @@ export const getServices = (state: StoreState) => state.percona.services;
 export const getNodes = (state: StoreState) => state.percona.nodes;
 export const getBackupLocations = (state: StoreState) => state.percona.backupLocations;
 export const getTour = (state: StoreState) => state.percona.tour;
-export const getAccessRoles = (state: StoreState) => state.percona.roles;
+export const getAccesstourRoles = (state: StoreState) => state.percona.roles;
 export const getUsers = (state: StoreState) => state.users;
 export const getUsersInfo = (state: StoreState) => state.percona.users;
 export const getDefaultRole = (state: StoreState) =>
diff --git a/public/app/percona/shared/services/updates/Updates.service.ts b/public/app/percona/shared/services/updates/Updates.service.ts
index f9977af2fb32..9de971915036 100644
--- a/public/app/percona/shared/services/updates/Updates.service.ts
+++ b/public/app/percona/shared/services/updates/Updates.service.ts
@@ -1,8 +1,4 @@
-import {
-  CheckUpdatesChangeLogsResponse,
-  SnoozePayloadBody,
-  SnoozePayloadResponse,
-} from 'app/percona/shared/core/reducers/updates';
+import { CheckUpdatesChangeLogsResponse } from 'app/percona/shared/core/reducers/updates';
 
 import { api } from '../../helpers/api';
 
@@ -13,9 +9,4 @@ export const UpdatesService = {
     api.get<CheckUpdatesResponse, CheckUpdatesParams>('/v1/server/updates', true, { params: body }),
 
   getUpdatesChangelogs: () => api.get<CheckUpdatesChangeLogsResponse, void>('/v1/server/updates/changelogs', false),
-
-  setSnoozeCurrentVersion: (body: SnoozePayloadBody) =>
-    api.put<SnoozePayloadResponse, SnoozePayloadBody>('/v1/users/me', body, true),
-
-  getSnoozeCurrentVersion: () => api.get<SnoozePayloadResponse, void>('/v1/users/me', false),
 };
diff --git a/public/app/percona/shared/services/user/User.service.ts b/public/app/percona/shared/services/user/User.service.ts
index 2759cc2c6495..eeefbe6be117 100644
--- a/public/app/percona/shared/services/user/User.service.ts
+++ b/public/app/percona/shared/services/user/User.service.ts
@@ -22,6 +22,10 @@ export const UserService = {
     const payload: UserDetailsPutPayload = { alerting_tour_completed: completed };
     return await api.put('/v1/users/me', payload);
   },
+  async setSnoozedVersion(version: string): Promise<UserDetailsResponse> {
+    const payload: UserDetailsPutPayload = { snoozed_pmm_version: version };
+    return await api.put('/v1/users/me', payload);
+  },
   async getUsersList(): Promise<UserListResponse> {
     return await api.get('/v1/users');
   },
diff --git a/public/app/percona/shared/services/user/User.types.ts b/public/app/percona/shared/services/user/User.types.ts
index 86c22adb0880..a31cadb6fc23 100644
--- a/public/app/percona/shared/services/user/User.types.ts
+++ b/public/app/percona/shared/services/user/User.types.ts
@@ -6,11 +6,13 @@ export interface UserDetailsResponse {
   user_id: number;
   product_tour_completed?: boolean;
   alerting_tour_completed?: boolean;
+  snoozed_pmm_version?: string;
 }
 
 export interface UserDetailsPutPayload {
   product_tour_completed?: boolean;
   alerting_tour_completed?: boolean;
+  snoozed_pmm_version?: string;
 }
 
 export interface UserListItemResponse {