PMM-13746 issue a popup to advise users to migrate to PMM v3

.github/workflows/detect-breaking-changes-build-skip.yml

@@ -28,7 +28,7 @@ jobs:
 
       # Upload artifact (so it can be used in the more privileged "report" workflow)
       - name: Upload check output as artifact
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
           name: levitate
           path: levitate/

.github/workflows/detect-breaking-changes-build.yml

@@ -49,7 +49,7 @@ jobs:
       run: zip -r ./pr_built_packages.zip ./packages/**/*.tgz
 
     - name: Upload build output as artifact
-      uses: actions/upload-artifact@v3
+      uses: actions/upload-artifact@v4
       with:
         name: buildPr
         path: './pr/pr_built_packages.zip'
@@ -97,7 +97,7 @@ jobs:
       run: zip -r ./base_built_packages.zip ./packages/**/*.tgz
 
     - name: Upload build output as artifact
-      uses: actions/upload-artifact@v3
+      uses: actions/upload-artifact@v4
       with:
         name: buildBase
         path: './base/base_built_packages.zip'
@@ -149,7 +149,7 @@ jobs:
             echo "{ \"exit_code\": ${{ steps.breaking-changes.outputs.is_breaking }}, \"message\": \"${{ steps.breaking-changes.outputs.message }}\", \"job_link\": \"${{ steps.job.outputs.link }}#step:${GITHUB_STEP_NUMBER}:1\", \"pr_number\": \"${{ github.event.pull_request.number }}\" }" > ./levitate/result.json
 
       - name: Upload check output as artifact
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
           name: levitate
           path: levitate/

.github/workflows/ui-tests.yml

@@ -78,7 +78,7 @@ jobs:
 
       - name: Attaching artifacts
         if: ${{ always() }}
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
           name: ui-tests-output
           path: ./pmm-ui-tests/tests/output

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

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react';
+import { useLocalStorage } from 'react-use';
 
 import { config } from '@grafana/runtime';
 import { Button, HorizontalGroup, Icon, Modal, useStyles2, useTheme2 } from '@grafana/ui';
@@ -24,6 +25,7 @@ import { Messages } from './PerconaBootstrapper.messages';
 import { getStyles } from './PerconaBootstrapper.styles';
 import { PerconaBootstrapperProps } from './PerconaBootstrapper.types';
 import PerconaNavigation from './PerconaNavigation/PerconaNavigation';
+import PerconaNewVersion from './PerconaNewVersion';
 import PerconaTourBootstrapper from './PerconaTour';
 
 // This component is only responsible for populating the store with Percona's settings initially
@@ -36,6 +38,7 @@ export const PerconaBootstrapper = ({ onReady }: PerconaBootstrapperProps) => {
   const { user } = config.bootData;
   const { isSignedIn } = user;
   const theme = useTheme2();
+  const [modalNewVersionShown, setModalNewVersionShown] = useLocalStorage(`${user.id}-grafana.pmm3.modalShown`, true);
 
   const dismissModal = () => {
     setModalIsOpen(false);
@@ -94,54 +97,63 @@ export const PerconaBootstrapper = ({ onReady }: PerconaBootstrapperProps) => {
     }
   }, [dispatch, isSignedIn, setSteps, onReady, user]);
 
+  const onDismissModalNewVersion = () => {
+    setModalNewVersionShown(false);
+  };
+
   return (
     <>
       {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>
+      {isSignedIn && user.id !== 0 && modalNewVersionShown ? (
+        <PerconaNewVersion isOpen={modalNewVersionShown} onDismiss={onDismissModalNewVersion} />
+      ) : (
+        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/PerconaNewVersion/PerconaNewVersion.constants.ts

@@ -0,0 +1,2 @@
+export const DOCUMENTATION_LINK_URL = 'https://per.co.na/PMM3_RelNotes';
+export const MIGRATION_LINK_URL = 'https://per.co.na/migrate_to_PMM3';

public/app/percona/shared/components/PerconaBootstrapper/PerconaNewVersion/PerconaNewVersion.messages.ts

@@ -0,0 +1,8 @@
+export const Messages = {
+  titleNewVersion: 'PMM 3 is here and it’s better',
+  viewMigrationGuide: 'View migration guide',
+  close: 'Close',
+  description:
+    'Upgrade for enhanced security, improved stability, and a smoother experience. PMM 3 also sets the foundation for exciting future updates. ',
+  seeWhatsNew: 'See what’s new in PMM 3',
+};

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

@@ -0,0 +1,22 @@
+import { css } from '@emotion/css';
+
+import { GrafanaTheme2 } from '@grafana/data';
+
+export const getStyles = (theme: GrafanaTheme2) => ({
+  newVersionModal: css`
+    display: flex;
+    flex-direction: column;
+    width: 480px;
+  `,
+  buttons: css`
+    margin-top: 35px;
+    display: flex;
+    justify-content: flex-end;
+  `,
+  closeButton: css`
+    margin-right: 20px;
+  `,
+  link: css`
+    color: ${theme.colors.text.link};
+  `,
+});

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

@@ -0,0 +1,35 @@
+import React from 'react';
+
+import { Modal, useStyles2, Button, LinkButton } from '@grafana/ui';
+
+import { MIGRATION_LINK_URL, DOCUMENTATION_LINK_URL } from './PerconaNewVersion.constants';
+import { Messages } from './PerconaNewVersion.messages';
+import { getStyles } from './PerconaNewVersion.styles';
+import { PerconaNewVersionProps } from './PerconaNewVersion.types';
+
+const PerconaNewVersion = ({ isOpen, onDismiss }: PerconaNewVersionProps) => {
+  const styles = useStyles2(getStyles);
+
+  return (
+    <Modal onDismiss={onDismiss} title={Messages.titleNewVersion} isOpen={isOpen} className={styles.newVersionModal}>
+      <div data-testid="new-version-modal">
+        <span>
+          {Messages.description}
+          <a className={styles.link} href={DOCUMENTATION_LINK_URL} target="_blank" rel="noreferrer">
+            {Messages.seeWhatsNew}
+          </a>
+        </span>
+        <div className={styles.buttons}>
+          <Button type="button" variant="secondary" onClick={onDismiss} className={styles.closeButton}>
+            {Messages.close}
+          </Button>
+          <LinkButton href={MIGRATION_LINK_URL} target="_blank">
+            {Messages.viewMigrationGuide}
+          </LinkButton>
+        </div>
+      </div>
+    </Modal>
+  );
+};
+
+export default PerconaNewVersion;

public/app/percona/shared/components/PerconaBootstrapper/PerconaNewVersion/PerconaNewVersion.types.ts

@@ -0,0 +1,4 @@
+export interface PerconaNewVersionProps {
+  onDismiss: () => void;
+  isOpen: boolean;
+}

public/app/percona/shared/components/PerconaBootstrapper/PerconaNewVersion/index.ts

@@ -0,0 +1,3 @@
+import PerconaNewVersion from './PerconaNewVersion';
+
+export default PerconaNewVersion;