PMM-12910: Popup new version available

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 && <Telemetry />}
       <PerconaNavigation />
       <PerconaTourBootstrapper />
-      {isSignedIn && showTour && (
-        <Modal onDismiss={dismissModal} isOpen={modalIsOpen} title={Messages.title}>
-          <div className={styles.iconContainer}>
-            <Icon type="mono" name={theme.isLight ? 'pmm-logo-light' : 'pmm-logo'} className={styles.svg} />
-          </div>
-          <p>
-            <strong>{Messages.pmm}</strong>
-            {Messages.pmmIs}
-          </p>
-          <p>
-            {Messages.pmmEnables}
-            <ul className={styles.list}>
-              <li>{Messages.spotCriticalPerformance}</li>
-              <li>{Messages.ensureDbPerformance}</li>
-              <li>{Messages.backup}</li>
-            </ul>
-          </p>
-          <p>
-            {Messages.moreInfo}
-            <a
-              href="https://per.co.na/pmm_documentation"
-              target="_blank"
-              rel="noreferrer noopener"
-              className={styles.docsLink}
-            >
-              {Messages.pmmOnlineHelp}
-            </a>
-            .
-          </p>
-          <HorizontalGroup justify="center" spacing="md">
-            <Button onClick={startTour} size="lg" className={styles.callToAction}>
-              {Messages.startTour}
-            </Button>
-          </HorizontalGroup>
-          <HorizontalGroup justify="flex-end" spacing="md">
-            <Button variant="secondary" onClick={finishTour}>
-              {Messages.skip}
-            </Button>
-            <Button variant="secondary" onClick={() => setModalIsOpen(false)}>
-              {Messages.checkLater}
-            </Button>
-          </HorizontalGroup>
-        </Modal>
+      {updateAvailable && showUpdateModal && !isLoadingUpdates ? (
+        <PerconaUpdateVersion />
+      ) : (
+        isSignedIn &&
+        showTour && (
+          <Modal onDismiss={dismissModal} isOpen={modalIsOpen} title={Messages.title}>
+            <div className={styles.iconContainer}>
+              <Icon type="mono" name={theme.isLight ? 'pmm-logo-light' : 'pmm-logo'} className={styles.svg} />
+            </div>
+            <p>
+              <strong>{Messages.pmm}</strong>
+              {Messages.pmmIs}
+            </p>
+            <p>
+              {Messages.pmmEnables}
+              <ul className={styles.list}>
+                <li>{Messages.spotCriticalPerformance}</li>
+                <li>{Messages.ensureDbPerformance}</li>
+                <li>{Messages.backup}</li>
+              </ul>
+            </p>
+            <p>
+              {Messages.moreInfo}
+              <a
+                href="https://per.co.na/pmm_documentation"
+                target="_blank"
+                rel="noreferrer noopener"
+                className={styles.docsLink}
+              >
+                {Messages.pmmOnlineHelp}
+              </a>
+              .
+            </p>
+            <HorizontalGroup justify="center" spacing="md">
+              <Button onClick={startTour} size="lg" className={styles.callToAction}>
+                {Messages.startTour}
+              </Button>
+            </HorizontalGroup>
+            <HorizontalGroup justify="flex-end" spacing="md">
+              <Button variant="secondary" onClick={finishTour}>
+                {Messages.skip}
+              </Button>
+              <Button variant="secondary" onClick={() => setModalIsOpen(false)}>
+                {Messages.checkLater}
+              </Button>
+            </HorizontalGroup>
+          </Modal>
+        )
       )}
     </>
   );

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

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

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(
+      <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-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();
+    });
+  });
+});