From 60c539e6a15f2e544dfea4c885f29d0604db08ef Mon Sep 17 00:00:00 2001 From: Ioana Maniga Date: Wed, 2 Apr 2025 20:01:55 +0300 Subject: [PATCH 1/6] PMM-13746 issue a popup to advise users to migrate to PMM v3 --- .../PerconaBootstrapper.tsx | 102 ++++++++++-------- .../PerconaNewVersion.constants.ts | 11 ++ .../PerconaNewVersion.styles.ts | 22 ++++ .../PerconaNewVersion/PerconaNewVersion.tsx | 34 ++++++ .../PerconaNewVersion.types.ts | 4 + .../PerconaNewVersion/index.ts | 3 + 6 files changed, 133 insertions(+), 43 deletions(-) create mode 100644 public/app/percona/shared/components/PerconaBootstrapper/PerconaNewVersion/PerconaNewVersion.constants.ts create mode 100644 public/app/percona/shared/components/PerconaBootstrapper/PerconaNewVersion/PerconaNewVersion.styles.ts create mode 100644 public/app/percona/shared/components/PerconaBootstrapper/PerconaNewVersion/PerconaNewVersion.tsx create mode 100644 public/app/percona/shared/components/PerconaBootstrapper/PerconaNewVersion/PerconaNewVersion.types.ts create mode 100644 public/app/percona/shared/components/PerconaBootstrapper/PerconaNewVersion/index.ts diff --git a/public/app/percona/shared/components/PerconaBootstrapper/PerconaBootstrapper.tsx b/public/app/percona/shared/components/PerconaBootstrapper/PerconaBootstrapper.tsx index be1a330158e97..818e11184209e 100644 --- a/public/app/percona/shared/components/PerconaBootstrapper/PerconaBootstrapper.tsx +++ b/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'; @@ -14,7 +15,9 @@ import { fetchUserStatusAction, setAuthorized, } from 'app/percona/shared/core/reducers/user/user'; +import { getPerconaUser } 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'; @@ -24,6 +27,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,7 +40,9 @@ export const PerconaBootstrapper = ({ onReady }: PerconaBootstrapperProps) => { const { user } = config.bootData; const { isSignedIn } = user; const theme = useTheme2(); + const { userId } = useSelector(getPerconaUser); + const [modalNewVersionShown, setModalNewVersionShown] = useLocalStorage(`${userId}-grafana.pmm3.modalShown`, false); const dismissModal = () => { setModalIsOpen(false); }; @@ -94,54 +100,64 @@ export const PerconaBootstrapper = ({ onReady }: PerconaBootstrapperProps) => { } }, [dispatch, isSignedIn, setSteps, onReady, user]); + const onDismissModalNewVersion = () => { + setModalNewVersionShown(true); + }; + return ( <> {isSignedIn && } + - {isSignedIn && showTour && ( - -
- -
-

- {Messages.pmm} - {Messages.pmmIs} -

-

- {Messages.pmmEnables} -

    -
  • {Messages.spotCriticalPerformance}
    • -
  • {Messages.ensureDbPerformance}
    • -
  • {Messages.backup}
    • -
-

-

- {Messages.moreInfo} - - {Messages.pmmOnlineHelp} - - . -

- - - - - - - - + {isSignedIn && userId !== 0 && !modalNewVersionShown ? ( + + ) : ( + 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/PerconaNewVersion/PerconaNewVersion.constants.ts b/public/app/percona/shared/components/PerconaBootstrapper/PerconaNewVersion/PerconaNewVersion.constants.ts new file mode 100644 index 0000000000000..40730ba848fc9 --- /dev/null +++ b/public/app/percona/shared/components/PerconaBootstrapper/PerconaNewVersion/PerconaNewVersion.constants.ts @@ -0,0 +1,11 @@ +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', +}; + +export const DOCUMENTATION_LINK_URL = 'https://per.co.na/pmm/3.0.0/release-notes'; +export const MIGRATION_LINK_URL = 'https://per.co.na/migrate_to_PMM3'; diff --git a/public/app/percona/shared/components/PerconaBootstrapper/PerconaNewVersion/PerconaNewVersion.styles.ts b/public/app/percona/shared/components/PerconaBootstrapper/PerconaNewVersion/PerconaNewVersion.styles.ts new file mode 100644 index 0000000000000..dcfd7aee82d3a --- /dev/null +++ b/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}; + `, +}); diff --git a/public/app/percona/shared/components/PerconaBootstrapper/PerconaNewVersion/PerconaNewVersion.tsx b/public/app/percona/shared/components/PerconaBootstrapper/PerconaNewVersion/PerconaNewVersion.tsx new file mode 100644 index 0000000000000..f2370f71b867e --- /dev/null +++ b/public/app/percona/shared/components/PerconaBootstrapper/PerconaNewVersion/PerconaNewVersion.tsx @@ -0,0 +1,34 @@ +import React from 'react'; + +import { Modal, useStyles2, Button, LinkButton } from '@grafana/ui'; + +import { Messages, MIGRATION_LINK_URL, DOCUMENTATION_LINK_URL } from './PerconaNewVersion.constants'; +import { getStyles } from './PerconaNewVersion.styles'; +import { PerconaNewVersionProps } from './PerconaNewVersion.types'; + +const PerconaNewVersion = ({ isOpen, onDismiss }: PerconaNewVersionProps) => { + const styles = useStyles2(getStyles); + + return ( + <> + +
+ + {Messages.description} + + {Messages.seeWhatsNew} + + +
+ + {Messages.viewMigrationGuide} +
+
+ + + ); +}; + +export default PerconaNewVersion; diff --git a/public/app/percona/shared/components/PerconaBootstrapper/PerconaNewVersion/PerconaNewVersion.types.ts b/public/app/percona/shared/components/PerconaBootstrapper/PerconaNewVersion/PerconaNewVersion.types.ts new file mode 100644 index 0000000000000..6bd02bbaf92d3 --- /dev/null +++ b/public/app/percona/shared/components/PerconaBootstrapper/PerconaNewVersion/PerconaNewVersion.types.ts @@ -0,0 +1,4 @@ +export interface PerconaNewVersionProps { + onDismiss: () => void; + isOpen: boolean; +} diff --git a/public/app/percona/shared/components/PerconaBootstrapper/PerconaNewVersion/index.ts b/public/app/percona/shared/components/PerconaBootstrapper/PerconaNewVersion/index.ts new file mode 100644 index 0000000000000..112c16f9d7d93 --- /dev/null +++ b/public/app/percona/shared/components/PerconaBootstrapper/PerconaNewVersion/index.ts @@ -0,0 +1,3 @@ +import PerconaNewVersion from './PerconaNewVersion'; + +export default PerconaNewVersion; From 00063273b52354daeb7e7cbba5c4960f8524cc30 Mon Sep 17 00:00:00 2001 From: Ioana Maniga Date: Thu, 3 Apr 2025 14:35:59 +0300 Subject: [PATCH 2/6] PMM-13746 resolve comments --- .../PerconaBootstrapper.tsx | 7 ++-- .../PerconaNewVersion.constants.ts | 9 ----- .../PerconaNewVersion.messages.ts | 8 +++++ .../PerconaNewVersion/PerconaNewVersion.tsx | 35 +++++++++---------- 4 files changed, 27 insertions(+), 32 deletions(-) create mode 100644 public/app/percona/shared/components/PerconaBootstrapper/PerconaNewVersion/PerconaNewVersion.messages.ts diff --git a/public/app/percona/shared/components/PerconaBootstrapper/PerconaBootstrapper.tsx b/public/app/percona/shared/components/PerconaBootstrapper/PerconaBootstrapper.tsx index 818e11184209e..12a78e8b37b02 100644 --- a/public/app/percona/shared/components/PerconaBootstrapper/PerconaBootstrapper.tsx +++ b/public/app/percona/shared/components/PerconaBootstrapper/PerconaBootstrapper.tsx @@ -15,9 +15,7 @@ import { fetchUserStatusAction, setAuthorized, } from 'app/percona/shared/core/reducers/user/user'; -import { getPerconaUser } 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'; @@ -40,9 +38,8 @@ export const PerconaBootstrapper = ({ onReady }: PerconaBootstrapperProps) => { const { user } = config.bootData; const { isSignedIn } = user; const theme = useTheme2(); - const { userId } = useSelector(getPerconaUser); - const [modalNewVersionShown, setModalNewVersionShown] = useLocalStorage(`${userId}-grafana.pmm3.modalShown`, false); + const [modalNewVersionShown, setModalNewVersionShown] = useLocalStorage(`${user.id}-grafana.pmm3.modalShown`, false); const dismissModal = () => { setModalIsOpen(false); }; @@ -110,7 +107,7 @@ export const PerconaBootstrapper = ({ onReady }: PerconaBootstrapperProps) => { - {isSignedIn && userId !== 0 && !modalNewVersionShown ? ( + {isSignedIn && user.id !== 0 && !modalNewVersionShown ? ( ) : ( isSignedIn && diff --git a/public/app/percona/shared/components/PerconaBootstrapper/PerconaNewVersion/PerconaNewVersion.constants.ts b/public/app/percona/shared/components/PerconaBootstrapper/PerconaNewVersion/PerconaNewVersion.constants.ts index 40730ba848fc9..864965ed087b6 100644 --- a/public/app/percona/shared/components/PerconaBootstrapper/PerconaNewVersion/PerconaNewVersion.constants.ts +++ b/public/app/percona/shared/components/PerconaBootstrapper/PerconaNewVersion/PerconaNewVersion.constants.ts @@ -1,11 +1,2 @@ -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', -}; - export const DOCUMENTATION_LINK_URL = 'https://per.co.na/pmm/3.0.0/release-notes'; export const MIGRATION_LINK_URL = 'https://per.co.na/migrate_to_PMM3'; diff --git a/public/app/percona/shared/components/PerconaBootstrapper/PerconaNewVersion/PerconaNewVersion.messages.ts b/public/app/percona/shared/components/PerconaBootstrapper/PerconaNewVersion/PerconaNewVersion.messages.ts new file mode 100644 index 0000000000000..2e69eeccbdfd7 --- /dev/null +++ b/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', +}; diff --git a/public/app/percona/shared/components/PerconaBootstrapper/PerconaNewVersion/PerconaNewVersion.tsx b/public/app/percona/shared/components/PerconaBootstrapper/PerconaNewVersion/PerconaNewVersion.tsx index f2370f71b867e..36eedd75fc0b3 100644 --- a/public/app/percona/shared/components/PerconaBootstrapper/PerconaNewVersion/PerconaNewVersion.tsx +++ b/public/app/percona/shared/components/PerconaBootstrapper/PerconaNewVersion/PerconaNewVersion.tsx @@ -2,7 +2,8 @@ import React from 'react'; import { Modal, useStyles2, Button, LinkButton } from '@grafana/ui'; -import { Messages, MIGRATION_LINK_URL, DOCUMENTATION_LINK_URL } from './PerconaNewVersion.constants'; +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'; @@ -10,24 +11,22 @@ const PerconaNewVersion = ({ isOpen, onDismiss }: PerconaNewVersionProps) => { const styles = useStyles2(getStyles); return ( - <> - -
- - {Messages.description} - - {Messages.seeWhatsNew} - - -
- - {Messages.viewMigrationGuide} -
+ +
+ + {Messages.description} + + {Messages.seeWhatsNew} + + +
+ + {Messages.viewMigrationGuide}
- - +
+ ); }; From 62237034bea8fe9ed0f699ea0dd3adfeb327feed Mon Sep 17 00:00:00 2001 From: Ioana Maniga Date: Thu, 3 Apr 2025 15:23:25 +0300 Subject: [PATCH 3/6] PMM-13746 bump version actions/upload-artifact --- .github/workflows/detect-breaking-changes-build-skip.yml | 2 +- .github/workflows/detect-breaking-changes-build.yml | 6 +++--- .github/workflows/ui-tests.yml | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/.github/workflows/detect-breaking-changes-build-skip.yml b/.github/workflows/detect-breaking-changes-build-skip.yml index 58e3cb5642451..feac05d62c5cd 100644 --- a/.github/workflows/detect-breaking-changes-build-skip.yml +++ b/.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/ diff --git a/.github/workflows/detect-breaking-changes-build.yml b/.github/workflows/detect-breaking-changes-build.yml index daadcbde738e7..e8d73af52d52d 100644 --- a/.github/workflows/detect-breaking-changes-build.yml +++ b/.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/ diff --git a/.github/workflows/ui-tests.yml b/.github/workflows/ui-tests.yml index 7f80b4095f5da..bcd5ae7cb3424 100644 --- a/.github/workflows/ui-tests.yml +++ b/.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 From 7294f36a0d450db144cfa0b70cf2790c41c2091a Mon Sep 17 00:00:00 2001 From: Ioana Maniga Date: Thu, 3 Apr 2025 16:19:47 +0300 Subject: [PATCH 4/6] PMM-13746 open links in new tab --- .../PerconaNewVersion/PerconaNewVersion.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/public/app/percona/shared/components/PerconaBootstrapper/PerconaNewVersion/PerconaNewVersion.tsx b/public/app/percona/shared/components/PerconaBootstrapper/PerconaNewVersion/PerconaNewVersion.tsx index 36eedd75fc0b3..22d76a748085e 100644 --- a/public/app/percona/shared/components/PerconaBootstrapper/PerconaNewVersion/PerconaNewVersion.tsx +++ b/public/app/percona/shared/components/PerconaBootstrapper/PerconaNewVersion/PerconaNewVersion.tsx @@ -15,7 +15,7 @@ const PerconaNewVersion = ({ isOpen, onDismiss }: PerconaNewVersionProps) => {
{Messages.description} - + {Messages.seeWhatsNew} @@ -23,7 +23,9 @@ const PerconaNewVersion = ({ isOpen, onDismiss }: PerconaNewVersionProps) => { - {Messages.viewMigrationGuide} + + {Messages.viewMigrationGuide} +
From b7955451c9d4935bc01dbf4de1480083b067906e Mon Sep 17 00:00:00 2001 From: Matej Kubinec Date: Mon, 7 Apr 2025 16:02:46 +0200 Subject: [PATCH 5/6] PMM-13746 Use conditions in accordance with local storage item name --- .../PerconaBootstrapper/PerconaBootstrapper.tsx | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/public/app/percona/shared/components/PerconaBootstrapper/PerconaBootstrapper.tsx b/public/app/percona/shared/components/PerconaBootstrapper/PerconaBootstrapper.tsx index 12a78e8b37b02..cf0f27c66cedb 100644 --- a/public/app/percona/shared/components/PerconaBootstrapper/PerconaBootstrapper.tsx +++ b/public/app/percona/shared/components/PerconaBootstrapper/PerconaBootstrapper.tsx @@ -38,8 +38,8 @@ 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 [modalNewVersionShown, setModalNewVersionShown] = useLocalStorage(`${user.id}-grafana.pmm3.modalShown`, false); const dismissModal = () => { setModalIsOpen(false); }; @@ -98,17 +98,16 @@ export const PerconaBootstrapper = ({ onReady }: PerconaBootstrapperProps) => { }, [dispatch, isSignedIn, setSteps, onReady, user]); const onDismissModalNewVersion = () => { - setModalNewVersionShown(true); + setModalNewVersionShown(false); }; return ( <> {isSignedIn && } - - {isSignedIn && user.id !== 0 && !modalNewVersionShown ? ( - + {isSignedIn && user.id !== 0 && modalNewVersionShown ? ( + ) : ( isSignedIn && showTour && ( From de9e9c9f550ff80d1e5fa8b8c6ce1eaf2e9c8f39 Mon Sep 17 00:00:00 2001 From: Ioana Maniga Date: Wed, 9 Apr 2025 13:24:06 +0300 Subject: [PATCH 6/6] PMM-13746 change release notes link --- .../PerconaNewVersion/PerconaNewVersion.constants.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/app/percona/shared/components/PerconaBootstrapper/PerconaNewVersion/PerconaNewVersion.constants.ts b/public/app/percona/shared/components/PerconaBootstrapper/PerconaNewVersion/PerconaNewVersion.constants.ts index 864965ed087b6..6e2d22e27b611 100644 --- a/public/app/percona/shared/components/PerconaBootstrapper/PerconaNewVersion/PerconaNewVersion.constants.ts +++ b/public/app/percona/shared/components/PerconaBootstrapper/PerconaNewVersion/PerconaNewVersion.constants.ts @@ -1,2 +1,2 @@ -export const DOCUMENTATION_LINK_URL = 'https://per.co.na/pmm/3.0.0/release-notes'; +export const DOCUMENTATION_LINK_URL = 'https://per.co.na/PMM3_RelNotes'; export const MIGRATION_LINK_URL = 'https://per.co.na/migrate_to_PMM3';