public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Advisor: Add redirection notice in data sources and plugins pages (#103894)

Browse Source
This commit is contained in:
Andres Martinez Gotor
2025-04-14 15:40:16 +02:00
committed by GitHub
parent 754c0e1534
commit 048d164a3c
23 changed files with 242 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/app/features/connections/components/AdvisorRedirectNotice/AdvisorRedirectNotice.test.tsx
+74
View File
@@ -0,0 +1,74 @@
import { render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { config } from '@grafana/runtime';
import { contextSrv } from 'app/core/core';
import { AdvisorRedirectNotice } from './AdvisorRedirectNotice';
const originalFeatureToggleValue = config.featureToggles.grafanaAdvisor;
jest.mock('@grafana/runtime/internal', () => ({
UserStorage: jest.fn().mockImplementation(() => ({
getItem: jest.fn().mockResolvedValue('true'),
setItem: jest.fn().mockResolvedValue(undefined),
})),
}));
describe('AdvisorRedirectNotice', () => {
beforeEach(() => {
config.featureToggles.grafanaAdvisor = true;
contextSrv.isGrafanaAdmin = true;
});
afterEach(() => {
jest.clearAllMocks();
config.featureToggles.grafanaAdvisor = originalFeatureToggleValue;
});
it('should not render when user is not admin', async () => {
contextSrv.isGrafanaAdmin = false;
render(<AdvisorRedirectNotice />);
expect(screen.queryByRole('status')).not.toBeInTheDocument();
});
it('should not render when feature flag is disabled', async () => {
config.featureToggles.grafanaAdvisor = false;
render(<AdvisorRedirectNotice />);
expect(screen.queryByRole('status')).not.toBeInTheDocument();
});
it('should render notice with correct content', async () => {
render(<AdvisorRedirectNotice />);
await waitFor(() => {
expect(screen.getByRole('status')).toBeInTheDocument();
expect(
screen.getByText(/Try the new Advisor to uncover potential issues with your data sources and plugins./i)
).toBeInTheDocument();
expect(screen.getByText(/Go to Advisor/i)).toBeInTheDocument();
});
});
it('should dismiss notice when close button is clicked', async () => {
const { rerender } = render(<AdvisorRedirectNotice />);
await waitFor(() => {
expect(
screen.getByText(/Try the new Advisor to uncover potential issues with your data sources and plugins./i)
).toBeInTheDocument();
});
const closeButton = screen.getByRole('button', { name: /close alert/i });
await userEvent.click(closeButton);
await waitFor(() => {
expect(
screen.queryByText(/Try the new Advisor to uncover potential issues with your data sources and plugins./i)
).not.toBeInTheDocument();
});
// Re-render the component and check that the notice is not rendered
rerender(<AdvisorRedirectNotice />);
expect(screen.queryByRole('status')).not.toBeInTheDocument();
});
});
public/app/features/connections/components/AdvisorRedirectNotice/AdvisorRedirectNotice.tsx
+69
View File
@@ -0,0 +1,69 @@
import { css } from '@emotion/css';
import { useEffect, useState } from 'react';
import { GrafanaTheme2 } from '@grafana/data';
import { config } from '@grafana/runtime';
import { UserStorage } from '@grafana/runtime/internal';
import { Alert, LinkButton, useStyles2 } from '@grafana/ui';
import { contextSrv } from 'app/core/core';
import { t, Trans } from 'app/core/internationalization';
const getStyles = (theme: GrafanaTheme2) => ({
alertContent: css({
display: 'flex',
flexDirection: 'row',
padding: 0,
justifyContent: 'space-between',
alignItems: 'center',
}),
alertParagraph: css({
margin: theme.spacing(0, 1, 0, 0),
lineHeight: theme.spacing(theme.components.height.sm),
}),
});
const userStorage = new UserStorage('advisor-redirect-notice');
export function AdvisorRedirectNotice() {
const styles = useStyles2(getStyles);
const hasAdminRights = contextSrv.hasRole('Admin') || contextSrv.isGrafanaAdmin;
const canUseAdvisor = hasAdminRights && config.featureToggles.grafanaAdvisor;
const [showNotice, setShowNotice] = useState(false);
useEffect(() => {
if (canUseAdvisor) {
userStorage.getItem('showNotice').then((showNotice) => {
if (showNotice !== 'false') {
setShowNotice(true);
}
});
}
}, [canUseAdvisor]);
return showNotice ? (
<Alert
severity="info"
title=""
onRemove={() => {
userStorage.setItem('showNotice', 'false');
setShowNotice(false);
}}
>
<div className={styles.alertContent}>
<p className={styles.alertParagraph}>
<Trans i18nKey="connections.advisor-redirect-notice.body">
Try the new Advisor to uncover potential issues with your data sources and plugins.
</Trans>
</p>
<LinkButton
aria-label={t('connections.advisor-redirect-notice.aria-label-link-to-advisor', 'Link to Advisor')}
icon="arrow-right"
href="/a/grafana-advisor-app"
fill="text"
>
<Trans i18nKey="connections.advisor-redirect-notice.go-to-advisor">Go to Advisor</Trans>
</LinkButton>
</div>
</Alert>
) : (
<></>
);
}
public/app/features/connections/pages/DataSourcesListPage.tsx
+2
View File
@@ -1,4 +1,5 @@
import { Page } from 'app/core/components/Page/Page';
import { AdvisorRedirectNotice } from 'app/features/connections/components/AdvisorRedirectNotice/AdvisorRedirectNotice';
import { DataSourceAddButton } from 'app/features/datasources/components/DataSourceAddButton';
import { DataSourcesList } from 'app/features/datasources/components/DataSourcesList';
import { getDataSourcesCount } from 'app/features/datasources/state';
@@ -11,6 +12,7 @@ export function DataSourcesListPage() {
return (
<Page navId={'connections-datasources'} actions={actions}>
<Page.Contents>
<AdvisorRedirectNotice />
<DataSourcesList />
</Page.Contents>
</Page>
public/app/features/plugins/admin/pages/Browse.tsx
+2
View File
@@ -8,6 +8,7 @@ import { Select, RadioButtonGroup, useStyles2, Tooltip, Field, TextLink } from '
import { Page } from 'app/core/components/Page/Page';
import { t, Trans } from 'app/core/internationalization';
import { getNavModel } from 'app/core/selectors/navModel';
import { AdvisorRedirectNotice } from 'app/features/connections/components/AdvisorRedirectNotice/AdvisorRedirectNotice';
import { ROUTES as CONNECTIONS_ROUTES } from 'app/features/connections/constants';
import { useSelector } from 'app/types';
@@ -94,6 +95,7 @@ export default function Browse() {
return (
<Page navModel={navModel} actions={updateAllButton} subTitle={subTitle}>
<Page.Contents>
<AdvisorRedirectNotice />
<HorizontalGroup wrap>
<Field label={t('plugins.browse.label-search', 'Search')}>
<SearchField value={keyword} onSearch={onSearch} />
public/locales/cs-CZ/grafana.json
+5
View File
@@ -2461,6 +2461,11 @@
"body": "",
"go-to-connections": ""
},
"advisor-redirect-notice": {
"aria-label-link-to-advisor": "",
"body": "",
"go-to-advisor": ""
},
"no-access-modal": {
"connection-contact-grafana-admin": "",
"editor-warning": "",
public/locales/de-DE/grafana.json
+5
View File
@@ -2439,6 +2439,11 @@
"body": "",
"go-to-connections": ""
},
"advisor-redirect-notice": {
"aria-label-link-to-advisor": "",
"body": "",
"go-to-advisor": ""
},
"no-access-modal": {
"connection-contact-grafana-admin": "",
"editor-warning": "",
public/locales/en-US/grafana.json
+5
View File
@@ -2428,6 +2428,11 @@
}
},
"connections": {
"advisor-redirect-notice": {
"aria-label-link-to-advisor": "Link to Advisor",
"body": "Try the new Advisor to uncover potential issues with your data sources and plugins.",
"go-to-advisor": "Go to Advisor"
},
"connect-data": {
"category-header-label": "Data sources",
"empty-message": "No results matching your query were found",
public/locales/es-ES/grafana.json
+5
View File
@@ -2439,6 +2439,11 @@
"body": "",
"go-to-connections": ""
},
"advisor-redirect-notice": {
"aria-label-link-to-advisor": "",
"body": "",
"go-to-advisor": ""
},
"no-access-modal": {
"connection-contact-grafana-admin": "",
"editor-warning": "",
public/locales/fr-FR/grafana.json
+5
View File
@@ -2439,6 +2439,11 @@
"body": "",
"go-to-connections": ""
},
"advisor-redirect-notice": {
"aria-label-link-to-advisor": "",
"body": "",
"go-to-advisor": ""
},
"no-access-modal": {
"connection-contact-grafana-admin": "",
"editor-warning": "",
public/locales/hu-HU/grafana.json
+5
View File
@@ -2439,6 +2439,11 @@
"body": "",
"go-to-connections": ""
},
"advisor-redirect-notice": {
"aria-label-link-to-advisor": "",
"body": "",
"go-to-advisor": ""
},
"no-access-modal": {
"connection-contact-grafana-admin": "",
"editor-warning": "",
public/locales/id-ID/grafana.json
+5
View File
@@ -2428,6 +2428,11 @@
"body": "",
"go-to-connections": ""
},
"advisor-redirect-notice": {
"aria-label-link-to-advisor": "",
"body": "",
"go-to-advisor": ""
},
"no-access-modal": {
"connection-contact-grafana-admin": "",
"editor-warning": "",
public/locales/it-IT/grafana.json
+5
View File
@@ -2439,6 +2439,11 @@
"body": "",
"go-to-connections": ""
},
"advisor-redirect-notice": {
"aria-label-link-to-advisor": "",
"body": "",
"go-to-advisor": ""
},
"no-access-modal": {
"connection-contact-grafana-admin": "",
"editor-warning": "",
public/locales/ja-JP/grafana.json
+5
View File
@@ -2428,6 +2428,11 @@
"body": "",
"go-to-connections": ""
},
"advisor-redirect-notice": {
"aria-label-link-to-advisor": "",
"body": "",
"go-to-advisor": ""
},
"no-access-modal": {
"connection-contact-grafana-admin": "",
"editor-warning": "",
public/locales/ko-KR/grafana.json
+5
View File
@@ -2428,6 +2428,11 @@
"body": "",
"go-to-connections": ""
},
"advisor-redirect-notice": {
"aria-label-link-to-advisor": "",
"body": "",
"go-to-advisor": ""
},
"no-access-modal": {
"connection-contact-grafana-admin": "",
"editor-warning": "",
public/locales/nl-NL/grafana.json
+5
View File
@@ -2439,6 +2439,11 @@
"body": "",
"go-to-connections": ""
},
"advisor-redirect-notice": {
"aria-label-link-to-advisor": "",
"body": "",
"go-to-advisor": ""
},
"no-access-modal": {
"connection-contact-grafana-admin": "",
"editor-warning": "",
public/locales/pl-PL/grafana.json
+5
View File
@@ -2461,6 +2461,11 @@
"body": "",
"go-to-connections": ""
},
"advisor-redirect-notice": {
"aria-label-link-to-advisor": "",
"body": "",
"go-to-advisor": ""
},
"no-access-modal": {
"connection-contact-grafana-admin": "",
"editor-warning": "",
public/locales/pt-BR/grafana.json
+5
View File
@@ -2439,6 +2439,11 @@
"body": "",
"go-to-connections": ""
},
"advisor-redirect-notice": {
"aria-label-link-to-advisor": "",
"body": "",
"go-to-advisor": ""
},
"no-access-modal": {
"connection-contact-grafana-admin": "",
"editor-warning": "",
public/locales/pt-PT/grafana.json
+5
View File
@@ -2439,6 +2439,11 @@
"body": "",
"go-to-connections": ""
},
"advisor-redirect-notice": {
"aria-label-link-to-advisor": "",
"body": "",
"go-to-advisor": ""
},
"no-access-modal": {
"connection-contact-grafana-admin": "",
"editor-warning": "",
public/locales/ru-RU/grafana.json
+5
View File
@@ -2461,6 +2461,11 @@
"body": "",
"go-to-connections": ""
},
"advisor-redirect-notice": {
"aria-label-link-to-advisor": "",
"body": "",
"go-to-advisor": ""
},
"no-access-modal": {
"connection-contact-grafana-admin": "",
"editor-warning": "",
public/locales/sv-SE/grafana.json
+5
View File
@@ -2439,6 +2439,11 @@
"body": "",
"go-to-connections": ""
},
"advisor-redirect-notice": {
"aria-label-link-to-advisor": "",
"body": "",
"go-to-advisor": ""
},
"no-access-modal": {
"connection-contact-grafana-admin": "",
"editor-warning": "",
public/locales/tr-TR/grafana.json
+5
View File
@@ -2439,6 +2439,11 @@
"body": "",
"go-to-connections": ""
},
"advisor-redirect-notice": {
"aria-label-link-to-advisor": "",
"body": "",
"go-to-advisor": ""
},
"no-access-modal": {
"connection-contact-grafana-admin": "",
"editor-warning": "",
public/locales/zh-Hans/grafana.json
+5
View File
@@ -2428,6 +2428,11 @@
"body": "",
"go-to-connections": ""
},
"advisor-redirect-notice": {
"aria-label-link-to-advisor": "",
"body": "",
"go-to-advisor": ""
},
"no-access-modal": {
"connection-contact-grafana-admin": "",
"editor-warning": "",
public/locales/zh-Hant/grafana.json
+5
View File
@@ -2428,6 +2428,11 @@
"body": "",
"go-to-connections": ""
},
"advisor-redirect-notice": {
"aria-label-link-to-advisor": "",
"body": "",
"go-to-advisor": ""
},
"no-access-modal": {
"connection-contact-grafana-admin": "",
"editor-warning": "",