diff --git a/public/app/percona/shared/components/PerconaBootstrapper/PerconaBootstrapper.tsx b/public/app/percona/shared/components/PerconaBootstrapper/PerconaBootstrapper.tsx
index cd4b2fd301b95..c107e57b1a0e8 100644
--- a/public/app/percona/shared/components/PerconaBootstrapper/PerconaBootstrapper.tsx
+++ b/public/app/percona/shared/components/PerconaBootstrapper/PerconaBootstrapper.tsx
@@ -14,7 +14,9 @@ import {
fetchUserStatusAction,
setAuthorized,
} from 'app/percona/shared/core/reducers/user/user';
+import { getUpdatesInfo } from 'app/percona/shared/core/selectors';
import { useAppDispatch } from 'app/store/store';
+import { useSelector } from 'app/types';
import { Telemetry } from '../../../ui-events/components/Telemetry';
import usePerconaTour from '../../core/hooks/tour';
@@ -27,11 +29,13 @@ 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) => {
const dispatch = useAppDispatch();
const { setSteps, startTour: startPerconaTour, endTour } = usePerconaTour();
+ const { updateAvailable, isLoading: isLoadingUpdates, showUpdateModal } = useSelector(getUpdatesInfo);
const [modalIsOpen, setModalIsOpen] = useState(true);
const [showTour, setShowTour] = useState(false);
const styles = useStyles2(getStyles);
@@ -104,49 +108,54 @@ export const PerconaBootstrapper = ({ onReady }: PerconaBootstrapperProps) => {
{isSignedIn && }
- {isSignedIn && showTour && (
-
-
-
-
-
- {Messages.pmm}
- {Messages.pmmIs}
-
-
- {Messages.pmmEnables}
-
- - {Messages.spotCriticalPerformance}
- - {Messages.ensureDbPerformance}
- - {Messages.backup}
-
-
-
- {Messages.moreInfo}
-
- {Messages.pmmOnlineHelp}
-
- .
-
-
-
-
-
-
-
-
-
+ {updateAvailable && showUpdateModal && !isLoadingUpdates ? (
+
+ ) : (
+ isSignedIn &&
+ showTour && (
+
+
+
+
+
+ {Messages.pmm}
+ {Messages.pmmIs}
+
+
+ {Messages.pmmEnables}
+
+ - {Messages.spotCriticalPerformance}
+ - {Messages.ensureDbPerformance}
+ - {Messages.backup}
+
+
+
+ {Messages.moreInfo}
+
+ {Messages.pmmOnlineHelp}
+
+ .
+
+
+
+
+
+
+
+
+
+ )
)}
);
diff --git a/public/app/percona/shared/components/PerconaBootstrapper/PerconaUpdateVersion/PerconaUpdateVersion.constants.ts b/public/app/percona/shared/components/PerconaBootstrapper/PerconaUpdateVersion/PerconaUpdateVersion.constants.ts
new file mode 100644
index 0000000000000..2f35d18455960
--- /dev/null
+++ b/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: 'Dismiss',
+};
diff --git a/public/app/percona/shared/components/PerconaBootstrapper/PerconaUpdateVersion/PerconaUpdateVersion.styles.ts b/public/app/percona/shared/components/PerconaBootstrapper/PerconaUpdateVersion/PerconaUpdateVersion.styles.ts
new file mode 100644
index 0000000000000..45dd1980d2bf0
--- /dev/null
+++ b/public/app/percona/shared/components/PerconaBootstrapper/PerconaUpdateVersion/PerconaUpdateVersion.styles.ts
@@ -0,0 +1,43 @@
+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;
+ `,
+ 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;
+ `,
+ howToUpdate: 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};
+ },
+ `,
+});
diff --git a/public/app/percona/shared/components/PerconaBootstrapper/PerconaUpdateVersion/PerconaUpdateVersion.test.tsx b/public/app/percona/shared/components/PerconaBootstrapper/PerconaUpdateVersion/PerconaUpdateVersion.test.tsx
new file mode 100644
index 0000000000000..b4b5e435cdb1b
--- /dev/null
+++ b/public/app/percona/shared/components/PerconaBootstrapper/PerconaUpdateVersion/PerconaUpdateVersion.test.tsx
@@ -0,0 +1,164 @@
+import { EnhancedStore } from '@reduxjs/toolkit';
+import { fireEvent, render, screen } from '@testing-library/react';
+import React from 'react';
+import { Provider } from 'react-redux';
+import { waitFor } from 'test/test-utils';
+
+import { Messages } from 'app/percona/shared/components/PerconaBootstrapper/PerconaUpdateVersion/PerconaUpdateVersion.constants';
+import * as GrafanaUpdates from 'app/percona/shared/core/reducers/updates/updates';
+import * as User from 'app/percona/shared/core/reducers/user/user';
+import { UpdatesService } from 'app/percona/shared/services/updates';
+import { configureStore } from 'app/store/configureStore';
+import { StoreState } from 'app/types';
+
+import PerconaUpdateVersion from './PerconaUpdateVersion';
+
+const checkUpdatesChangeLogsSpy = jest.spyOn(GrafanaUpdates, 'checkUpdatesChangeLogs');
+const setSnoozedVersionSpy = jest.spyOn(User, 'setSnoozedVersion');
+
+describe('PerconaUpdateVersion', () => {
+ const setup = (store: EnhancedStore) =>
+ render(
+
+
+
+ );
+
+ 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-23T09: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: '',
+ showUpdateModal: true,
+ },
+ };
+ 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-27T09:12:31.488Z',
+ release_notes_url: 'http://localhost:3000',
+ release_notes_text: 'text1',
+ },
+ {
+ version: 'PMM 3.0.2',
+ tag: 'string',
+ timestamp: '2024-09-23T09: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: '',
+ showUpdateModal: true,
+ },
+ };
+ 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();
+ });
+
+ it('should dispatch setSnoozedVersion when pressing button', async () => {
+ const changeLogsAPIResponse = {
+ last_check: '',
+ updates: [
+ {
+ version: 'PMM 3.0.1',
+ tag: 'string',
+ timestamp: '2024-09-23T09: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: '',
+ showUpdateModal: true,
+ },
+ };
+ 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();
+ });
+
+ fireEvent.click(screen.getByRole('button', { name: Messages.snooze }));
+
+ await waitFor(() => {
+ expect(setSnoozedVersionSpy).toHaveBeenCalled();
+ });
+ });
+});
diff --git a/public/app/percona/shared/components/PerconaBootstrapper/PerconaUpdateVersion/PerconaUpdateVersion.tsx b/public/app/percona/shared/components/PerconaBootstrapper/PerconaUpdateVersion/PerconaUpdateVersion.tsx
new file mode 100644
index 0000000000000..e5ad28d961162
--- /dev/null
+++ b/public/app/percona/shared/components/PerconaBootstrapper/PerconaUpdateVersion/PerconaUpdateVersion.tsx
@@ -0,0 +1,116 @@
+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 {
+ 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';
+import { useSelector } from 'app/types';
+
+import { Messages } from './PerconaUpdateVersion.constants';
+import { getStyles } from './PerconaUpdateVersion.styles';
+
+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) {
+ dispatch(setShowUpdateModal(false));
+ } else {
+ await dispatch(checkUpdatesChangeLogs());
+ }
+ };
+
+ if (updateAvailable) {
+ prepareModal();
+ }
+ }, [dispatch, updateAvailable, installed, latest, snoozedPmmVersion]);
+
+ const snoozeUpdate = async () => {
+ if (latest && latest.version) {
+ await dispatch(setSnoozedVersion(latest.version));
+ }
+ dispatch(setShowUpdateModal(false));
+ };
+
+ const onDismiss = () => {
+ dispatch(setShowUpdateModal(false));
+ };
+
+ const onUpdateClick = () => {
+ dispatch(setShowUpdateModal(false));
+ window.location.assign(PMM_UPDATES_LINK.url!);
+ };
+
+ return (
+ <>
+
+
+
{latest?.version || ''}
+
+
+ {Messages.fullReleaseNotes}
+
+
+
{Messages.howToUpdate}
+
{Messages.howToUpdateDescription}
+
+
+
+
+
+
{Messages.newVersions}
+
+
{Messages.howToUpdate}
+
{Messages.howToUpdateDescription}
+
+
+
+
+