From 7cd71d497723c1452862c8eff238dc3a605917d9 Mon Sep 17 00:00:00 2001
From: solovevayaroslavna <iaroslavna.kozlova@simbirsoft.com>
Date: Fri, 17 Jan 2025 18:45:01 +0400
Subject: [PATCH 1/6] EVEREST-1574-upgrade-reload-everest-dialog-component

---
 ui/apps/everest/src/App.tsx                   |  5 +-
 .../components/app-bar/help-icon/HelpIcon.tsx |  8 +--
 .../src/components/know-more-button/index.ts  |  1 +
 .../know-more-button/know-more-button.tsx     | 26 ++++++++++
 ui/apps/everest/src/components/main/Main.tsx  | 12 +++++
 .../src/contexts/upgrade-everest/index.ts     |  2 +
 .../upgrade-everest.context.tsx               | 11 ++++
 .../upgrade-everest.context.types.ts          |  8 +++
 .../upgrade-everest.provider.tsx              | 47 +++++++++++++++++
 .../src/hooks/api/version/useVersion.ts       |  1 +
 .../upgrade-reload-everest-dialog/index.ts    |  1 +
 .../upgrade-reload-everest-dialog.messages.ts |  8 +++
 .../upgrade-reload-everest-dialog.tsx         | 52 +++++++++++++++++++
 13 files changed, 177 insertions(+), 5 deletions(-)
 create mode 100644 ui/apps/everest/src/components/know-more-button/index.ts
 create mode 100644 ui/apps/everest/src/components/know-more-button/know-more-button.tsx
 create mode 100644 ui/apps/everest/src/contexts/upgrade-everest/index.ts
 create mode 100644 ui/apps/everest/src/contexts/upgrade-everest/upgrade-everest.context.tsx
 create mode 100644 ui/apps/everest/src/contexts/upgrade-everest/upgrade-everest.context.types.ts
 create mode 100644 ui/apps/everest/src/contexts/upgrade-everest/upgrade-everest.provider.tsx
 create mode 100644 ui/apps/everest/src/modals/upgrade-reload-everest-dialog/index.ts
 create mode 100644 ui/apps/everest/src/modals/upgrade-reload-everest-dialog/upgrade-reload-everest-dialog.messages.ts
 create mode 100644 ui/apps/everest/src/modals/upgrade-reload-everest-dialog/upgrade-reload-everest-dialog.tsx

diff --git a/ui/apps/everest/src/App.tsx b/ui/apps/everest/src/App.tsx
index 2e79fab83..fa855dde5 100644
--- a/ui/apps/everest/src/App.tsx
+++ b/ui/apps/everest/src/App.tsx
@@ -13,6 +13,7 @@ import { useEffect, useState } from 'react';
 import { EverestConfig } from 'shared-types/configs.types';
 import { getEverestConfigs } from 'api/everestConfigs';
 import LoadingPageSkeleton from 'components/loading-page-skeleton/LoadingPageSkeleton';
+import UpgradeEverestProvider from 'contexts/upgrade-everest/upgrade-everest.provider';
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -80,7 +81,9 @@ const App = () => {
               }}
             >
               <DrawerContextProvider>
-                <RouterProvider router={router} />
+                <UpgradeEverestProvider>
+                  <RouterProvider router={router} />
+                </UpgradeEverestProvider>
               </DrawerContextProvider>
               <ReactQueryDevtools initialIsOpen={false} />
             </AuthProvider>
diff --git a/ui/apps/everest/src/components/app-bar/help-icon/HelpIcon.tsx b/ui/apps/everest/src/components/app-bar/help-icon/HelpIcon.tsx
index 04eb4cd0e..e495ccaf4 100644
--- a/ui/apps/everest/src/components/app-bar/help-icon/HelpIcon.tsx
+++ b/ui/apps/everest/src/components/app-bar/help-icon/HelpIcon.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useContext, useState } from 'react';
 import {
   Divider,
   IconButton,
@@ -8,11 +8,11 @@ import {
   Typography,
 } from '@mui/material';
 import HelpIcon from '@mui/icons-material/Help';
-import { useVersion } from 'hooks/api/version/useVersion';
+import { UpgradeEverestContext } from 'contexts/upgrade-everest';
 
 const AppBarHelpIcon = () => {
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
-  const { data: versionData } = useVersion();
+  const { currentVersion } = useContext(UpgradeEverestContext);
 
   const handleMenu = (event: React.MouseEvent<HTMLElement>) => {
     setAnchorEl(event.currentTarget);
@@ -44,7 +44,7 @@ const AppBarHelpIcon = () => {
       >
         <MenuItem sx={{ cursor: 'text', userSelect: 'text' }}>
           <Typography variant="helperText" color="text.secondary">
-            {`Everest ${versionData?.version}`}
+            {`Everest ${currentVersion}`}
           </Typography>
         </MenuItem>
         <Divider />
diff --git a/ui/apps/everest/src/components/know-more-button/index.ts b/ui/apps/everest/src/components/know-more-button/index.ts
new file mode 100644
index 000000000..764b8c86e
--- /dev/null
+++ b/ui/apps/everest/src/components/know-more-button/index.ts
@@ -0,0 +1 @@
+export { default } from './know-more-button';
\ No newline at end of file
diff --git a/ui/apps/everest/src/components/know-more-button/know-more-button.tsx b/ui/apps/everest/src/components/know-more-button/know-more-button.tsx
new file mode 100644
index 000000000..7c15770a7
--- /dev/null
+++ b/ui/apps/everest/src/components/know-more-button/know-more-button.tsx
@@ -0,0 +1,26 @@
+import { Box, Button } from '@mui/material';
+import NorthEastIcon from '@mui/icons-material/NorthEast';
+
+interface KnowMoreButtonProps {
+  href: string;
+}
+const KnowMoreButton = ({ href }: KnowMoreButtonProps) => {
+  return (
+    <Box sx={{ display: 'inline-block', ml: 0.4 }}>
+      <Button
+        data-testid="know-more-button"
+        size="small"
+        variant="text"
+        sx={{ display: 'flex' }}
+        onClick={() => {
+          window.open(href, '_blank', 'noopener');
+        }}
+        endIcon={<NorthEastIcon />}
+      >
+        Know more
+      </Button>
+    </Box>
+  );
+};
+
+export default KnowMoreButton;
diff --git a/ui/apps/everest/src/components/main/Main.tsx b/ui/apps/everest/src/components/main/Main.tsx
index 31688849f..277a6ac58 100644
--- a/ui/apps/everest/src/components/main/Main.tsx
+++ b/ui/apps/everest/src/components/main/Main.tsx
@@ -20,6 +20,8 @@ import { Drawer } from '../drawer/Drawer';
 import { WelcomeDialog } from '../welcome-dialog/welcome-dialog';
 import { Messages } from './Main.messages';
 import LoadingPageSkeleton from 'components/loading-page-skeleton/LoadingPageSkeleton';
+import UpgradeEverestReloadDialog from 'modals/upgrade-reload-everest-dialog';
+import { UpgradeEverestContext } from 'contexts/upgrade-everest';
 
 export const Main = () => {
   const theme = useTheme();
@@ -28,6 +30,11 @@ export const Main = () => {
     true
   );
   const { activeBreakpoint } = useContext(DrawerContext);
+  const {
+    currentVersion: currentEverestVersion,
+    openReloadDialog,
+    setOpenReloadDialog,
+  } = useContext(UpgradeEverestContext);
   const { isFetching, isError, refetch } = useKubernetesClusterInfo([
     'initial-k8-info',
   ]);
@@ -86,6 +93,11 @@ export const Main = () => {
                 closeDialog={handleCloseWelcomeDialog}
               />
             )}
+            <UpgradeEverestReloadDialog
+              isOpen={openReloadDialog}
+              closeModal={() => setOpenReloadDialog(false)}
+              version={currentEverestVersion || ''}
+            />
           </Box>
         </Box>
       </ErrorBoundary>
diff --git a/ui/apps/everest/src/contexts/upgrade-everest/index.ts b/ui/apps/everest/src/contexts/upgrade-everest/index.ts
new file mode 100644
index 000000000..ad659e7bc
--- /dev/null
+++ b/ui/apps/everest/src/contexts/upgrade-everest/index.ts
@@ -0,0 +1,2 @@
+export { default as UpgradeEverestContext } from './upgrade-everest.context';
+export { default as UpgradeEverestProvider } from './upgrade-everest.provider';
diff --git a/ui/apps/everest/src/contexts/upgrade-everest/upgrade-everest.context.tsx b/ui/apps/everest/src/contexts/upgrade-everest/upgrade-everest.context.tsx
new file mode 100644
index 000000000..ad1b226f5
--- /dev/null
+++ b/ui/apps/everest/src/contexts/upgrade-everest/upgrade-everest.context.tsx
@@ -0,0 +1,11 @@
+import { createContext } from 'react';
+import { UpgradeEverestContextProps } from './upgrade-everest.context.types';
+
+const UpgradeEverestContext = createContext<UpgradeEverestContextProps>({
+  openReloadDialog: false,
+  toggleOpenReloadDialog: () => {},
+  setOpenReloadDialog: () => {},
+  currentVersion: null,
+});
+
+export default UpgradeEverestContext;
diff --git a/ui/apps/everest/src/contexts/upgrade-everest/upgrade-everest.context.types.ts b/ui/apps/everest/src/contexts/upgrade-everest/upgrade-everest.context.types.ts
new file mode 100644
index 000000000..ce5175f67
--- /dev/null
+++ b/ui/apps/everest/src/contexts/upgrade-everest/upgrade-everest.context.types.ts
@@ -0,0 +1,8 @@
+import { Dispatch, SetStateAction } from 'react';
+
+export interface UpgradeEverestContextProps {
+  openReloadDialog: boolean;
+  toggleOpenReloadDialog: () => void;
+  setOpenReloadDialog: Dispatch<SetStateAction<boolean>>;
+  currentVersion: null | string;
+}
diff --git a/ui/apps/everest/src/contexts/upgrade-everest/upgrade-everest.provider.tsx b/ui/apps/everest/src/contexts/upgrade-everest/upgrade-everest.provider.tsx
new file mode 100644
index 000000000..b57965cc8
--- /dev/null
+++ b/ui/apps/everest/src/contexts/upgrade-everest/upgrade-everest.provider.tsx
@@ -0,0 +1,47 @@
+import { useEffect, useRef, useState } from 'react';
+import UpgradeEverestContext from './upgrade-everest.context';
+import { useVersion } from 'hooks';
+
+const UpgradeEverestProvider = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => {
+  const commitVersion = useRef<null | string>(null);
+  const { data: apiVersion } = useVersion();
+  const [currentVersion, setCurrentVersion] = useState('');
+
+  const [openReloadEverestDialog, setOpenReloadEverestDialog] = useState(false);
+
+  useEffect(() => {
+    debugger;
+    if (commitVersion.current === null && apiVersion?.fullCommit) {
+      commitVersion.current = apiVersion?.fullCommit;
+      setCurrentVersion(apiVersion?.version);
+    }
+    if (
+      commitVersion.current !== null &&
+      commitVersion.current !== apiVersion?.fullCommit
+    ) {
+      setOpenReloadEverestDialog(true);
+    }
+  }, [apiVersion?.fullCommit]);
+
+  const toggleOpenReloadDialog = () =>
+    setOpenReloadEverestDialog((val) => !val);
+
+  return (
+    <UpgradeEverestContext.Provider
+      value={{
+        openReloadDialog: openReloadEverestDialog,
+        toggleOpenReloadDialog,
+        setOpenReloadDialog: setOpenReloadEverestDialog,
+        currentVersion: currentVersion,
+      }}
+    >
+      {children}
+    </UpgradeEverestContext.Provider>
+  );
+};
+
+export default UpgradeEverestProvider;
diff --git a/ui/apps/everest/src/hooks/api/version/useVersion.ts b/ui/apps/everest/src/hooks/api/version/useVersion.ts
index 07960dc27..c1bb6259e 100644
--- a/ui/apps/everest/src/hooks/api/version/useVersion.ts
+++ b/ui/apps/everest/src/hooks/api/version/useVersion.ts
@@ -7,5 +7,6 @@ export const useVersion = (options?: PerconaQueryOptions<EverestVersion>) =>
   useQuery({
     queryKey: ['everest-version'],
     queryFn: getVersionFn,
+    refetchInterval: 5000,
     ...options,
   });
diff --git a/ui/apps/everest/src/modals/upgrade-reload-everest-dialog/index.ts b/ui/apps/everest/src/modals/upgrade-reload-everest-dialog/index.ts
new file mode 100644
index 000000000..29ac1b59d
--- /dev/null
+++ b/ui/apps/everest/src/modals/upgrade-reload-everest-dialog/index.ts
@@ -0,0 +1 @@
+export { default } from './upgrade-reload-everest-dialog';
diff --git a/ui/apps/everest/src/modals/upgrade-reload-everest-dialog/upgrade-reload-everest-dialog.messages.ts b/ui/apps/everest/src/modals/upgrade-reload-everest-dialog/upgrade-reload-everest-dialog.messages.ts
new file mode 100644
index 000000000..49bd39b58
--- /dev/null
+++ b/ui/apps/everest/src/modals/upgrade-reload-everest-dialog/upgrade-reload-everest-dialog.messages.ts
@@ -0,0 +1,8 @@
+export const Messages = {
+  headerMessage: 'Reload Percona Everest',
+  successfullyUpgraded: (version: string) =>
+    `Percona Everest has been successfully upgraded to ${version}.`,
+  clickToReload:
+    'Click the reload button to discover and start using all the new features.',
+  cancelMessage: 'Reload',
+};
diff --git a/ui/apps/everest/src/modals/upgrade-reload-everest-dialog/upgrade-reload-everest-dialog.tsx b/ui/apps/everest/src/modals/upgrade-reload-everest-dialog/upgrade-reload-everest-dialog.tsx
new file mode 100644
index 000000000..78c5120fb
--- /dev/null
+++ b/ui/apps/everest/src/modals/upgrade-reload-everest-dialog/upgrade-reload-everest-dialog.tsx
@@ -0,0 +1,52 @@
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  Typography,
+} from '@mui/material';
+import { DialogTitle } from '@percona/ui-lib';
+import { Messages } from './upgrade-reload-everest-dialog.messages';
+import KnowMoreButton from 'components/know-more-button/know-more-button';
+
+interface UpgradeEverestReloadDialogProps {
+  isOpen: boolean;
+  closeModal: () => void;
+  version: string;
+}
+const UpgradeEverestReloadDialog = ({
+  isOpen,
+  closeModal,
+  version,
+}: UpgradeEverestReloadDialogProps) => {
+  return (
+    <Dialog
+      open={isOpen}
+      onClose={closeModal}
+      data-testid="everest-reload-dialog"
+      sx={{ '.MuiPaper-root': { minWidth: '640px' } }}
+    >
+      <DialogTitle onClose={closeModal}>{Messages.headerMessage}</DialogTitle>
+      <DialogContent sx={{ whiteSpace: 'pre-wrap' }}>
+        <Typography variant="body1">
+          {Messages.successfullyUpgraded(version)}
+          <KnowMoreButton href="https://docs.percona.com/everest/release-notes/release_notes_index.html" />
+        </Typography>
+        <Typography variant="body1">{Messages.clickToReload}</Typography>
+      </DialogContent>
+      <DialogActions>
+        <Button
+          variant="contained"
+          onClick={() => {
+            window.location.reload();
+          }}
+          data-testid="everest-reload-dialog"
+        >
+          {Messages.cancelMessage}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default UpgradeEverestReloadDialog;

From 5af9fcd30f8571258a656cc624dbab0ba2e2039d Mon Sep 17 00:00:00 2001
From: solovevayaroslavna
 <90199600+solovevayaroslavna@users.noreply.github.com>
Date: Fri, 17 Jan 2025 14:46:55 +0000
Subject: [PATCH 2/6] chore: lint/format

---
 ui/apps/everest/src/components/know-more-button/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/apps/everest/src/components/know-more-button/index.ts b/ui/apps/everest/src/components/know-more-button/index.ts
index 764b8c86e..fae9aa147 100644
--- a/ui/apps/everest/src/components/know-more-button/index.ts
+++ b/ui/apps/everest/src/components/know-more-button/index.ts
@@ -1 +1 @@
-export { default } from './know-more-button';
\ No newline at end of file
+export { default } from './know-more-button';

From 0ceabeb4117efcba0673e2eb41819de5b08ae070 Mon Sep 17 00:00:00 2001
From: solovevayaroslavna <iaroslavna.kozlova@simbirsoft.com>
Date: Mon, 20 Jan 2025 16:30:51 +0400
Subject: [PATCH 3/6] EVEREST-1574-upgrade-reload-everest-dialog-component

---
 .../src/contexts/upgrade-everest/upgrade-everest.provider.tsx    | 1 -
 1 file changed, 1 deletion(-)

diff --git a/ui/apps/everest/src/contexts/upgrade-everest/upgrade-everest.provider.tsx b/ui/apps/everest/src/contexts/upgrade-everest/upgrade-everest.provider.tsx
index b57965cc8..1086c7e90 100644
--- a/ui/apps/everest/src/contexts/upgrade-everest/upgrade-everest.provider.tsx
+++ b/ui/apps/everest/src/contexts/upgrade-everest/upgrade-everest.provider.tsx
@@ -14,7 +14,6 @@ const UpgradeEverestProvider = ({
   const [openReloadEverestDialog, setOpenReloadEverestDialog] = useState(false);
 
   useEffect(() => {
-    debugger;
     if (commitVersion.current === null && apiVersion?.fullCommit) {
       commitVersion.current = apiVersion?.fullCommit;
       setCurrentVersion(apiVersion?.version);

From 05634231f2b0f14cdd49315ed4c31fcda83b1725 Mon Sep 17 00:00:00 2001
From: solovevayaroslavna <iaroslavna.kozlova@simbirsoft.com>
Date: Mon, 20 Jan 2025 17:29:32 +0400
Subject: [PATCH 4/6] EVEREST-1574-upgrade-reload-everest-dialog-component: fix
 wrong version in dialog

---
 ui/apps/everest/src/components/main/Main.tsx                  | 4 ++--
 .../src/contexts/upgrade-everest/upgrade-everest.context.tsx  | 1 +
 .../contexts/upgrade-everest/upgrade-everest.context.types.ts | 1 +
 .../src/contexts/upgrade-everest/upgrade-everest.provider.tsx | 1 +
 4 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/ui/apps/everest/src/components/main/Main.tsx b/ui/apps/everest/src/components/main/Main.tsx
index 277a6ac58..e4c741770 100644
--- a/ui/apps/everest/src/components/main/Main.tsx
+++ b/ui/apps/everest/src/components/main/Main.tsx
@@ -31,7 +31,7 @@ export const Main = () => {
   );
   const { activeBreakpoint } = useContext(DrawerContext);
   const {
-    currentVersion: currentEverestVersion,
+    apiVersion,
     openReloadDialog,
     setOpenReloadDialog,
   } = useContext(UpgradeEverestContext);
@@ -96,7 +96,7 @@ export const Main = () => {
             <UpgradeEverestReloadDialog
               isOpen={openReloadDialog}
               closeModal={() => setOpenReloadDialog(false)}
-              version={currentEverestVersion || ''}
+              version={apiVersion || ''}
             />
           </Box>
         </Box>
diff --git a/ui/apps/everest/src/contexts/upgrade-everest/upgrade-everest.context.tsx b/ui/apps/everest/src/contexts/upgrade-everest/upgrade-everest.context.tsx
index ad1b226f5..1c7055bf9 100644
--- a/ui/apps/everest/src/contexts/upgrade-everest/upgrade-everest.context.tsx
+++ b/ui/apps/everest/src/contexts/upgrade-everest/upgrade-everest.context.tsx
@@ -6,6 +6,7 @@ const UpgradeEverestContext = createContext<UpgradeEverestContextProps>({
   toggleOpenReloadDialog: () => {},
   setOpenReloadDialog: () => {},
   currentVersion: null,
+  apiVersion: '',
 });
 
 export default UpgradeEverestContext;
diff --git a/ui/apps/everest/src/contexts/upgrade-everest/upgrade-everest.context.types.ts b/ui/apps/everest/src/contexts/upgrade-everest/upgrade-everest.context.types.ts
index ce5175f67..17211a246 100644
--- a/ui/apps/everest/src/contexts/upgrade-everest/upgrade-everest.context.types.ts
+++ b/ui/apps/everest/src/contexts/upgrade-everest/upgrade-everest.context.types.ts
@@ -5,4 +5,5 @@ export interface UpgradeEverestContextProps {
   toggleOpenReloadDialog: () => void;
   setOpenReloadDialog: Dispatch<SetStateAction<boolean>>;
   currentVersion: null | string;
+  apiVersion?: string;
 }
diff --git a/ui/apps/everest/src/contexts/upgrade-everest/upgrade-everest.provider.tsx b/ui/apps/everest/src/contexts/upgrade-everest/upgrade-everest.provider.tsx
index 1086c7e90..51309f389 100644
--- a/ui/apps/everest/src/contexts/upgrade-everest/upgrade-everest.provider.tsx
+++ b/ui/apps/everest/src/contexts/upgrade-everest/upgrade-everest.provider.tsx
@@ -36,6 +36,7 @@ const UpgradeEverestProvider = ({
         toggleOpenReloadDialog,
         setOpenReloadDialog: setOpenReloadEverestDialog,
         currentVersion: currentVersion,
+        apiVersion: apiVersion?.version,
       }}
     >
       {children}

From cfa5131cf7f5d9ec7fb882f9229730fa58820bed Mon Sep 17 00:00:00 2001
From: solovevayaroslavna
 <90199600+solovevayaroslavna@users.noreply.github.com>
Date: Mon, 20 Jan 2025 13:40:32 +0000
Subject: [PATCH 5/6] chore: lint/format

---
 ui/apps/everest/src/components/main/Main.tsx | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/ui/apps/everest/src/components/main/Main.tsx b/ui/apps/everest/src/components/main/Main.tsx
index e4c741770..8fd8c9688 100644
--- a/ui/apps/everest/src/components/main/Main.tsx
+++ b/ui/apps/everest/src/components/main/Main.tsx
@@ -30,11 +30,9 @@ export const Main = () => {
     true
   );
   const { activeBreakpoint } = useContext(DrawerContext);
-  const {
-    apiVersion,
-    openReloadDialog,
-    setOpenReloadDialog,
-  } = useContext(UpgradeEverestContext);
+  const { apiVersion, openReloadDialog, setOpenReloadDialog } = useContext(
+    UpgradeEverestContext
+  );
   const { isFetching, isError, refetch } = useKubernetesClusterInfo([
     'initial-k8-info',
   ]);

From 6e830b957aaee29ce0f33b17c876f419eff16952 Mon Sep 17 00:00:00 2001
From: solovevayaroslavna <iaroslavna.kozlova@simbirsoft.com>
Date: Mon, 20 Jan 2025 18:06:01 +0400
Subject: [PATCH 6/6] trigger