PMM-12910: Popup new version available

public/app/percona/shared/components/PerconaBootstrapper/PerconaBootstrapper.tsx

@@ -27,6 +27,7 @@ import { getStyles } from './PerconaBootstrapper.styles';
 import { PerconaBootstrapperProps } from './PerconaBootstrapper.types';
 import PerconaNavigation from './PerconaNavigation/PerconaNavigation';
 import PerconaTourBootstrapper from './PerconaTour';
+import PerconaUpdateVersion from './PerconaUpdateVersion/PerconaUpdateVersion';
 
 // This component is only responsible for populating the store with Percona's settings initially
 export const PerconaBootstrapper = ({ onReady }: PerconaBootstrapperProps) => {
@@ -148,6 +149,7 @@ export const PerconaBootstrapper = ({ onReady }: PerconaBootstrapperProps) => {
           </HorizontalGroup>
         </Modal>
       )}
+      {!showTour && <PerconaUpdateVersion />}
     </>
   );
 };

public/app/percona/shared/components/PerconaBootstrapper/PerconaUpdateVersion/PerconaUpdateVersion.constants.ts

@@ -0,0 +1,12 @@
+export const Messages = {
+  titleOneUpdate: 'New update available',
+  titleMultipleUpdates: 'New updates available',
+  howToUpdate: 'How to update',
+  howToUpdateDescription:
+    "We are inaugurating a new process for updating PMM. It's a new interface with an improved user experience and is ready for the future of PMM. Click on Go to Updates Page to find out more.",
+  newVersions: 'New Versions',
+  readMore: 'Read more',
+  fullReleaseNotes: 'Full release notes here',
+  goToUpdatesPage: 'Go to updates page',
+  snooze: 'Snooze',
+};

public/app/percona/shared/components/PerconaBootstrapper/PerconaUpdateVersion/PerconaUpdateVersion.styles.ts

@@ -0,0 +1,44 @@
+import { css } from '@emotion/css';
+
+import { GrafanaTheme2 } from '@grafana/data';
+
+export const getStyles = ({ v1: { spacing, colors, typography } }: GrafanaTheme2) => ({
+  updateVersionModal: css`
+    display: flex;
+    flex-direction: column;
+    width: 480px;
+    height: 343px;
+  `,
+  version: css`
+    margin-bottom: ${spacing.md};
+  `,
+  releaseNotesText: css`
+    a {
+      color: ${colors.textBlue};
+    }
+  `,
+  newVersionsTitle: css`
+    font-weight: ${typography.weight.semibold};
+    font-size: ${typography.heading.h5};
+    margin-bottom: 8px;
+  `,
+  notesTitle: css`
+    font-weight: ${typography.weight.semibold};
+    font-size: ${typography.heading.h5};
+    margin-top: 27px;
+  `,
+  updateButtons: css`
+    margin-top: 35px;
+    display: flex;
+    justify-content: flex-end;
+  `,
+  snoozeButton: css`
+    margin-right: 20px;
+  `,
+  listOfReleaseNotes: css`
+    margin-left: 20px;
+    li a, li {
+      color: ${colors.textBlue};
+    },
+  `,
+});

public/app/percona/shared/components/PerconaBootstrapper/PerconaUpdateVersion/PerconaUpdateVersion.test.tsx

@@ -0,0 +1,146 @@
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import { Provider } from 'react-redux';
+import { waitFor } from 'test/test-utils';
+
+import * as GrafanaUpdates from 'app/percona/shared/core/reducers/updates/updates';
+import { UpdatesService } from 'app/percona/shared/services/updates';
+import { configureStore } from 'app/store/configureStore';
+
+import PerconaUpdateVersion from './PerconaUpdateVersion';
+import { StoreState } from 'app/types';
+import { EnhancedStore } from '@reduxjs/toolkit';
+
+const checkUpdatesChangeLogsSpy = jest.spyOn(GrafanaUpdates, 'checkUpdatesChangeLogs');
+
+describe('PerconaUpdateVersion', () => {
+  const setup = (store: EnhancedStore) =>
+    render(
+      <Provider store={store}>
+        <PerconaUpdateVersion />
+      </Provider>
+    );
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should render modal with one update', async () => {
+    const changeLogsAPIResponse = {
+      last_check: '',
+      updates: [
+        {
+          version: 'PMM 3.0.1',
+          tag: 'string',
+          timestamp: '2024-09-24T09:12:31.488Z',
+          release_notes_url: 'http://localhost:3000',
+          release_notes_text: 'text1',
+        },
+      ],
+    };
+    const state = {
+      updates: {
+        isLoading: false,
+        updateAvailable: true,
+        latest: { version: '3.0.1' },
+        lastChecked: '',
+        changeLogs: {
+          lastCheck: '',
+          updates: [
+            {
+              version: 'PMM 3.0.1',
+              tag: 'string',
+              timestamp: '2024-09-24T09:12:31.488Z',
+              releaseNotesUrl: 'http://localhost:3000',
+              releaseNotesText: 'text1',
+            },
+          ],
+        },
+      },
+    };
+    jest.spyOn(UpdatesService, 'getUpdatesChangelogs').mockReturnValue(Promise.resolve({ ...changeLogsAPIResponse }));
+
+    const defaultState = configureStore().getState();
+    const store = configureStore({
+      ...defaultState,
+      percona: {
+        ...defaultState.percona,
+        ...state,
+      },
+    } as StoreState);
+    setup(store);
+    await waitFor(() => {
+      expect(checkUpdatesChangeLogsSpy).toHaveBeenCalled();
+    });
+
+    expect(screen.queryByTestId('one-update-modal')).toBeInTheDocument();
+    expect(screen.queryByTestId('multiple-updates-modal')).not.toBeInTheDocument();
+  });
+
+  it('should render modal with multiple updates', async () => {
+    const changeLogsAPIResponse = {
+      last_check: '',
+      updates: [
+        {
+          version: 'PMM 3.0.1',
+          tag: 'string',
+          timestamp: '2024-09-24T09:12:31.488Z',
+          release_notes_url: 'http://localhost:3000',
+          release_notes_text: 'text1',
+        },
+        {
+          version: 'PMM 3.0.2',
+          tag: 'string',
+          timestamp: '2024-09-24T09:12:31.488Z',
+          release_notes_url: 'http://localhost:3000',
+          release_notes_text: 'text2',
+        },
+      ],
+    };
+    const state = {
+      updates: {
+        isLoading: false,
+        updateAvailable: true,
+        latest: { version: '3.0.1' },
+        lastChecked: '',
+        changeLogs: {
+          lastCheck: '',
+          updates: [
+            {
+              version: 'PMM 3.0.1',
+              tag: 'string',
+              timestamp: '2024-09-24T09:12:31.488Z',
+              releaseNotesUrl: 'http://localhost:3000',
+              releaseNotesText: 'text1',
+            },
+            {
+              version: 'PMM 3.0.2',
+              tag: 'string',
+              timestamp: '2024-09-24T09:12:31.488Z',
+              releaseNotesUrl: 'http://localhost:3000',
+              releaseNotesText: 'text2',
+            },
+          ],
+        },
+      },
+    };
+    jest.spyOn(UpdatesService, 'getUpdatesChangelogs').mockReturnValue(Promise.resolve({ ...changeLogsAPIResponse }));
+
+    const defaultState = configureStore().getState();
+    const store = configureStore({
+      ...defaultState,
+      percona: {
+        ...defaultState.percona,
+        ...state,
+      },
+    } as StoreState);
+
+    setup(store);
+    await waitFor(() => {
+      expect(checkUpdatesChangeLogsSpy).toHaveBeenCalled();
+    });
+
+    expect(screen.queryByTestId('one-update-modal')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('multiple-updates-modal')).toBeInTheDocument();
+  });
+});

public/app/percona/shared/components/PerconaBootstrapper/PerconaUpdateVersion/PerconaUpdateVersion.tsx

@@ -0,0 +1,111 @@
+import React, { FC, useEffect, useState } from 'react';
+
+import { dateTimeFormat } from '@grafana/data';
+import { Modal, useStyles2, Button } from '@grafana/ui';
+import { checkUpdatesChangeLogs, UpdatesChangeLogs } from 'app/percona/shared/core/reducers/updates';
+import { getPerconaUser, 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 } = useSelector(getUpdatesInfo);
+  const { snoozedPmmVersion } = useSelector(getPerconaUser);
+  const [showUpdate, setShowUpdate] = useState(false);
+  const dispatch = useAppDispatch();
+  const styles = useStyles2(getStyles);
+
+  useEffect(() => {
+    const prepareModal = async () => {
+      if (installed?.version !== latest?.version && snoozedPmmVersion !== latest?.version) {
+        setShowUpdate(true);
+        await dispatch(checkUpdatesChangeLogs());
+      }
+    };
+
+    if (updateAvailable) {
+      prepareModal();
+    }
+  }, [dispatch, updateAvailable, installed, latest, snoozedPmmVersion]);
+
+  const snoozeUpdate = async () => {
+    if (latest && latest.version) {
+      await dispatch(setSnoozedVersion(latest.version));
+    }
+    setShowUpdate(false);
+  };
+
+  const onDismiss = () => {
+    setShowUpdate(false);
+  };
+
+  const onUpdateClick = () => {
+    setShowUpdate(false);
+    window.location.assign(PMM_UPDATES_LINK.url!);
+  };
+
+  return (
+    <>
+      <Modal
+        onDismiss={onDismiss}
+        title={Messages.titleOneUpdate}
+        isOpen={showUpdate && changeLogs && changeLogs?.updates?.length === 1}
+        className={styles.updateVersionModal}
+      >
+        <div data-testid="one-update-modal">
+          <h5 className={styles.version}>{latest?.version || ''}</h5>
+          <p className={styles.releaseNotesText}>
+            <a target="_blank" rel="noopener noreferrer" href={changeLogs?.updates[0]?.releaseNotesUrl || ''}>
+              {Messages.fullReleaseNotes}
+            </a>
+          </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}
+            </Button>
+            <Button type="button" variant="primary">
+              <a onClick={onUpdateClick}>{Messages.goToUpdatesPage}</a>
+            </Button>
+          </div>
+        </div>
+      </Modal>
+      <Modal
+        onDismiss={onDismiss}
+        title={Messages.titleMultipleUpdates}
+        isOpen={showUpdate && changeLogs && changeLogs?.updates?.length > 1}
+        className={styles.updateVersionModal}
+      >
+        <div data-testid="multiple-updates-modal">
+          <h5 className={styles.newVersionsTitle}>{Messages.newVersions}</h5>
+          <ul className={styles.listOfReleaseNotes}>
+            {changeLogs?.updates.map((update: UpdatesChangeLogs) => (
+              <li key={update.toString()}>
+                <a target="_blank" rel="noopener noreferrer" href={update.releaseNotesUrl}>
+                  {update.version}, {dateTimeFormat(update.timestamp, { format: 'MMM DD, YYYY' })}
+                </a>
+              </li>
+            ))}
+          </ul>
+          <h5>{Messages.howToUpdate}</h5>
+          <p>{Messages.howToUpdateDescription}</p>
+          <div className={styles.updateButtons}>
+            <Button type="button" variant="secondary" onClick={snoozeUpdate} className={styles.snoozeButton}>
+              {Messages.snooze}
+            </Button>
+            <Button type="button" variant="primary">
+              <a onClick={onUpdateClick}>{Messages.goToUpdatesPage}</a>
+            </Button>
+          </div>
+        </div>
+      </Modal>
+    </>
+  );
+};
+
+export default PerconaUpdateVersion;

public/app/percona/shared/core/reducers/updates/updates.ts

@@ -3,7 +3,7 @@ import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
 import { UpdatesService } from 'app/percona/shared/services/updates';
 
 import { CheckUpdatesPayload, UpdatesState } from './updates.types';
-import { responseToPayload } from './updates.utils';
+import { mapUpdatesChangeLogs, responseToPayload } from './updates.utils';
 
 const initialState: UpdatesState = {
   isLoading: false,
@@ -14,21 +14,29 @@ export const updatesSlice = createSlice({
   initialState,
   reducers: {},
   extraReducers: (builder) => {
-    builder.addCase(checkUpdatesAction.pending, () => ({
+    builder.addCase(checkUpdatesAction.pending, (state) => ({
       ...initialState,
       isLoading: true,
     }));
-
     builder.addCase(checkUpdatesAction.fulfilled, (state, { payload }) => ({
       ...state,
       ...payload,
       isLoading: false,
     }));
-
-    builder.addCase(checkUpdatesAction.rejected, () => ({
-      ...initialState,
+    builder.addCase(checkUpdatesAction.rejected, (state) => ({
+      ...state,
       isLoading: false,
     }));
+    builder.addCase(checkUpdatesChangeLogs.pending, (state) => ({
+      ...state,
+    }));
+    builder.addCase(checkUpdatesChangeLogs.fulfilled, (state, { payload }) => ({
+      ...state,
+      changeLogs: payload,
+    }));
+    builder.addCase(checkUpdatesChangeLogs.rejected, (state) => ({
+      ...state,
+    }));
   },
 });
 
@@ -42,4 +50,8 @@ export const checkUpdatesAction = createAsyncThunk('percona/checkUpdates', async
   }
 });
 
+export const checkUpdatesChangeLogs = createAsyncThunk('percona/checkUpdatesChangelogs', async () => {
+  return mapUpdatesChangeLogs(await UpdatesService.getUpdatesChangelogs());
+});
+
 export default updatesSlice.reducer;