EVEREST-1574-upgrade-reload-everest-dialog-component

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>

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 />

ui/apps/everest/src/components/know-more-button/index.ts

@@ -0,0 +1 @@
+export { default } from './know-more-button';

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;

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,9 @@ export const Main = () => {
     true
   );
   const { activeBreakpoint } = useContext(DrawerContext);
+  const { apiVersion, openReloadDialog, setOpenReloadDialog } = useContext(
+    UpgradeEverestContext
+  );
   const { isFetching, isError, refetch } = useKubernetesClusterInfo([
     'initial-k8-info',
   ]);
@@ -86,6 +91,11 @@ export const Main = () => {
                 closeDialog={handleCloseWelcomeDialog}
               />
             )}
+            <UpgradeEverestReloadDialog
+              isOpen={openReloadDialog}
+              closeModal={() => setOpenReloadDialog(false)}
+              version={apiVersion || ''}
+            />
           </Box>
         </Box>
       </ErrorBoundary>

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';

ui/apps/everest/src/contexts/upgrade-everest/upgrade-everest.context.tsx

@@ -0,0 +1,12 @@
+import { createContext } from 'react';
+import { UpgradeEverestContextProps } from './upgrade-everest.context.types';
+
+const UpgradeEverestContext = createContext<UpgradeEverestContextProps>({
+  openReloadDialog: false,
+  toggleOpenReloadDialog: () => {},
+  setOpenReloadDialog: () => {},
+  currentVersion: null,
+  apiVersion: '',
+});
+
+export default UpgradeEverestContext;

ui/apps/everest/src/contexts/upgrade-everest/upgrade-everest.context.types.ts

@@ -0,0 +1,9 @@
+import { Dispatch, SetStateAction } from 'react';
+
+export interface UpgradeEverestContextProps {
+  openReloadDialog: boolean;
+  toggleOpenReloadDialog: () => void;
+  setOpenReloadDialog: Dispatch<SetStateAction<boolean>>;
+  currentVersion: null | string;
+  apiVersion?: string;
+}

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(() => {
+    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,
+        apiVersion: apiVersion?.version,
+      }}
+    >
+      {children}
+    </UpgradeEverestContext.Provider>
+  );
+};
+
+export default UpgradeEverestProvider;

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,
   });

ui/apps/everest/src/modals/upgrade-reload-everest-dialog/index.ts

@@ -0,0 +1 @@
+export { default } from './upgrade-reload-everest-dialog';

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',
+};

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;