mirror of https://github.com/grafana/grafana
Alerting: Add a button to try out the new list page (#103855)
* Add user-facing feature toggle functionality for the new alerting list view - Implemented `useFeatureToggle` hook to manage feature toggles using local storage. - Added unit tests for `useFeatureToggle` to verify behavior for various toggle states. - Updated `RuleList` components to utilize the new feature toggle for alerting list view. - Introduced `RuleListPageTitle` component to handle toggling between list views with a badge indicator. * Add tests * Fix imports and remove unused code * Add a new feature flag for list v2 preview button * Hide v2 preview button behind the new feature flag * Update list v2 feature toggle stage * Alerting: List view feature toggle button PR review (#104161) * Add test for undefined feature toggles case * Tweak tests to use test utils and user * Add i18n for toggle button and tweak props spreading * Update translations --------- Co-authored-by: Tom Ratcliffe <tom.ratcliffe@grafana.com>pull/104268/head
Konrad Lalik
3 months ago
committed by
GitHub
parent
17e4a3b386
commit
512df0091a
|
@ -0,0 +1,90 @@ |
|||||||
|
import { setLocalStorageFeatureToggle } from './featureToggles'; |
||||||
|
|
||||||
|
const featureTogglesKey = 'grafana.featureToggles'; |
||||||
|
const storage = new Map<string, string>(); |
||||||
|
|
||||||
|
const mockLocalStorage = { |
||||||
|
getItem: (key: string) => storage.get(key) ?? null, |
||||||
|
setItem: (key: string, value: string) => storage.set(key, value), |
||||||
|
clear: () => storage.clear(), |
||||||
|
}; |
||||||
|
|
||||||
|
Object.defineProperty(window, 'localStorage', { |
||||||
|
value: mockLocalStorage, |
||||||
|
writable: true, |
||||||
|
}); |
||||||
|
|
||||||
|
describe('setLocalStorageFeatureToggle', () => { |
||||||
|
beforeEach(() => { |
||||||
|
storage.clear(); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should set feature toggle to true', () => { |
||||||
|
setLocalStorageFeatureToggle('alertingListViewV2', true); |
||||||
|
expect(storage.get(featureTogglesKey)).toBe('alertingListViewV2=true'); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should set feature toggle to false', () => { |
||||||
|
setLocalStorageFeatureToggle('alertingListViewV2', false); |
||||||
|
expect(storage.get(featureTogglesKey)).toBe('alertingListViewV2=false'); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should remove feature toggle when set to undefined', () => { |
||||||
|
storage.set( |
||||||
|
featureTogglesKey, |
||||||
|
'alertingListViewV2=true,alertingPrometheusRulesPrimary=true,alertingCentralAlertHistory=true' |
||||||
|
); |
||||||
|
|
||||||
|
setLocalStorageFeatureToggle('alertingPrometheusRulesPrimary', undefined); |
||||||
|
expect(storage.get(featureTogglesKey)).toBe('alertingListViewV2=true,alertingCentralAlertHistory=true'); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should not set undefined when no feature toggles are set', () => { |
||||||
|
storage.set(featureTogglesKey, ''); |
||||||
|
|
||||||
|
setLocalStorageFeatureToggle('alertingPrometheusRulesPrimary', undefined); |
||||||
|
expect(storage.get(featureTogglesKey)).toBe(''); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should update only one feature toggle when multiple feature toggles are set', () => { |
||||||
|
storage.set( |
||||||
|
featureTogglesKey, |
||||||
|
'alertingListViewV2=true,alertingPrometheusRulesPrimary=true,alertingCentralAlertHistory=true' |
||||||
|
); |
||||||
|
|
||||||
|
setLocalStorageFeatureToggle('alertingPrometheusRulesPrimary', false); |
||||||
|
expect(storage.get(featureTogglesKey)).toBe( |
||||||
|
'alertingListViewV2=true,alertingPrometheusRulesPrimary=false,alertingCentralAlertHistory=true' |
||||||
|
); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should not rewrite other feature toggles when updating one', () => { |
||||||
|
storage.set( |
||||||
|
featureTogglesKey, |
||||||
|
'alertingListViewV2=true,alertingPrometheusRulesPrimary=1,alertingCentralAlertHistory=false' |
||||||
|
); |
||||||
|
|
||||||
|
setLocalStorageFeatureToggle('alertingListViewV2', false); |
||||||
|
expect(storage.get(featureTogglesKey)).toBe( |
||||||
|
'alertingListViewV2=false,alertingPrometheusRulesPrimary=1,alertingCentralAlertHistory=false' |
||||||
|
); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should add a new toggle when others exist', () => { |
||||||
|
storage.set(featureTogglesKey, 'alertingListViewV2=true'); |
||||||
|
setLocalStorageFeatureToggle('alertingCentralAlertHistory', true); |
||||||
|
expect(storage.get(featureTogglesKey)).toBe('alertingListViewV2=true,alertingCentralAlertHistory=true'); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should remove the only existing toggle', () => { |
||||||
|
storage.set(featureTogglesKey, 'alertingListViewV2=true'); |
||||||
|
setLocalStorageFeatureToggle('alertingListViewV2', undefined); |
||||||
|
expect(storage.get(featureTogglesKey)).toBe(''); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should not change localStorage when attempting to remove a non-existent toggle', () => { |
||||||
|
storage.set(featureTogglesKey, 'alertingListViewV2=true'); |
||||||
|
setLocalStorageFeatureToggle('alertingCentralAlertHistory', undefined); |
||||||
|
expect(storage.get(featureTogglesKey)).toBe('alertingListViewV2=true'); |
||||||
|
}); |
||||||
|
}); |
||||||
@ -0,0 +1,129 @@ |
|||||||
|
import { render } from 'test/test-utils'; |
||||||
|
import { byRole } from 'testing-library-selector'; |
||||||
|
|
||||||
|
import { reportInteraction } from '@grafana/runtime'; |
||||||
|
|
||||||
|
import { testWithFeatureToggles } from '../test/test-utils'; |
||||||
|
|
||||||
|
import { RuleListPageTitle } from './RuleListPageTitle'; |
||||||
|
|
||||||
|
// Constants
|
||||||
|
const featureTogglesKey = 'grafana.featureToggles'; |
||||||
|
const toggleName = 'alertingListViewV2'; |
||||||
|
|
||||||
|
jest.mock('@grafana/runtime', () => ({ |
||||||
|
...jest.requireActual('@grafana/runtime'), |
||||||
|
reportInteraction: jest.fn(), |
||||||
|
})); |
||||||
|
|
||||||
|
// Mock window.location.reload
|
||||||
|
const mockReload = jest.fn(); |
||||||
|
Object.defineProperty(window, 'location', { |
||||||
|
value: { reload: mockReload }, |
||||||
|
writable: true, |
||||||
|
}); |
||||||
|
|
||||||
|
const ui = { |
||||||
|
title: byRole('heading', { name: 'Alert rules' }), |
||||||
|
enableV2Button: byRole('button', { name: 'Try out the new look!' }), |
||||||
|
disableV2Button: byRole('button', { name: 'Go back to the old look' }), |
||||||
|
}; |
||||||
|
|
||||||
|
// Helper function for rendering the component
|
||||||
|
function renderRuleListPageTitle() { |
||||||
|
// Mock localStorage
|
||||||
|
const storage = new Map<string, string>(); |
||||||
|
const mockLocalStorage = { |
||||||
|
getItem: (key: string) => storage.get(key) ?? null, |
||||||
|
setItem: (key: string, value: string) => storage.set(key, value), |
||||||
|
clear: () => storage.clear(), |
||||||
|
}; |
||||||
|
|
||||||
|
Object.defineProperty(window, 'localStorage', { |
||||||
|
value: mockLocalStorage, |
||||||
|
writable: true, |
||||||
|
}); |
||||||
|
|
||||||
|
const view = render(<RuleListPageTitle title="Alert rules" />); |
||||||
|
|
||||||
|
return { |
||||||
|
...view, |
||||||
|
storage, |
||||||
|
}; |
||||||
|
} |
||||||
|
|
||||||
|
describe('RuleListPageTitle', () => { |
||||||
|
beforeEach(() => { |
||||||
|
jest.clearAllMocks(); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should render the title', () => { |
||||||
|
renderRuleListPageTitle(); |
||||||
|
expect(ui.title.get()).toBeInTheDocument(); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should not show v2 toggle when alertingListViewV2PreviewToggle feature flag is disabled', () => { |
||||||
|
renderRuleListPageTitle(); |
||||||
|
expect(ui.enableV2Button.query()).not.toBeInTheDocument(); |
||||||
|
expect(ui.disableV2Button.query()).not.toBeInTheDocument(); |
||||||
|
}); |
||||||
|
|
||||||
|
describe('with alertingListViewV2PreviewToggle enabled and alertingListViewV2 disabled', () => { |
||||||
|
testWithFeatureToggles(['alertingListViewV2PreviewToggle']); |
||||||
|
|
||||||
|
it('should show enable v2 button', () => { |
||||||
|
renderRuleListPageTitle(); |
||||||
|
expect(ui.enableV2Button.get()).toBeInTheDocument(); |
||||||
|
expect(ui.disableV2Button.query()).not.toBeInTheDocument(); |
||||||
|
expect(ui.enableV2Button.get()).toHaveAttribute('data-testid', 'alerting-list-view-toggle-v2'); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should enable v2 and reload page when clicked on "Try out the new look!" button', async () => { |
||||||
|
const { user, storage } = renderRuleListPageTitle(); |
||||||
|
|
||||||
|
await user.click(ui.enableV2Button.get()); |
||||||
|
|
||||||
|
expect(storage.get(featureTogglesKey)).toBe(`${toggleName}=true`); |
||||||
|
expect(mockReload).toHaveBeenCalled(); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should report interaction when enabling v2', async () => { |
||||||
|
const { user } = renderRuleListPageTitle(); |
||||||
|
|
||||||
|
await user.click(ui.enableV2Button.get()); |
||||||
|
|
||||||
|
expect(reportInteraction).toHaveBeenCalledWith('alerting.list_view.v2.enabled'); |
||||||
|
}); |
||||||
|
}); |
||||||
|
|
||||||
|
describe('with alertingListViewV2PreviewToggle enabled and alertingListViewV2 enabled', () => { |
||||||
|
testWithFeatureToggles(['alertingListViewV2PreviewToggle', 'alertingListViewV2']); |
||||||
|
|
||||||
|
it('should show disable v2 button', () => { |
||||||
|
renderRuleListPageTitle(); |
||||||
|
expect(ui.disableV2Button.get()).toBeInTheDocument(); |
||||||
|
expect(ui.enableV2Button.query()).not.toBeInTheDocument(); |
||||||
|
expect(ui.disableV2Button.get()).toHaveAttribute('data-testid', 'alerting-list-view-toggle-v1'); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should disable v2 and reload page when clicked on "Go back to the old look" button', async () => { |
||||||
|
const { user, storage } = renderRuleListPageTitle(); |
||||||
|
storage.set(featureTogglesKey, `${toggleName}=true`); |
||||||
|
|
||||||
|
await user.click(ui.disableV2Button.get()); |
||||||
|
|
||||||
|
// When the toggle is set to undefined, it should be removed from localStorage
|
||||||
|
expect(storage.get(featureTogglesKey)).toBe(''); |
||||||
|
expect(mockReload).toHaveBeenCalled(); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should report interaction when disabling v2', async () => { |
||||||
|
const { user, storage } = renderRuleListPageTitle(); |
||||||
|
storage.set(featureTogglesKey, `${toggleName}=true`); |
||||||
|
|
||||||
|
await user.click(ui.disableV2Button.get()); |
||||||
|
|
||||||
|
expect(reportInteraction).toHaveBeenCalledWith('alerting.list_view.v2.disabled'); |
||||||
|
}); |
||||||
|
}); |
||||||
|
}); |
||||||
@ -0,0 +1,69 @@ |
|||||||
|
import { useCallback } from 'react'; |
||||||
|
|
||||||
|
import { config, reportInteraction } from '@grafana/runtime'; |
||||||
|
import { Button, ButtonProps, Stack } from '@grafana/ui'; |
||||||
|
import { t } from 'app/core/internationalization'; |
||||||
|
|
||||||
|
import { setLocalStorageFeatureToggle, shouldUseAlertingListViewV2 } from '../featureToggles'; |
||||||
|
|
||||||
|
export function RuleListPageTitle({ title }: { title: string }) { |
||||||
|
const shouldShowV2Toggle = config.featureToggles.alertingListViewV2PreviewToggle ?? false; |
||||||
|
|
||||||
|
const { listViewV2Enabled, enableListViewV2, disableListViewV2 } = useV2AlertListViewToggle(); |
||||||
|
|
||||||
|
const toggleListView = () => { |
||||||
|
if (listViewV2Enabled) { |
||||||
|
disableListViewV2(); |
||||||
|
reportInteraction('alerting.list_view.v2.disabled'); |
||||||
|
} else { |
||||||
|
enableListViewV2(); |
||||||
|
reportInteraction('alerting.list_view.v2.enabled'); |
||||||
|
} |
||||||
|
window.location.reload(); |
||||||
|
}; |
||||||
|
|
||||||
|
const { text, ...configToUse }: ButtonProps & { text: string; 'data-testid': string } = listViewV2Enabled |
||||||
|
? { |
||||||
|
variant: 'secondary', |
||||||
|
icon: undefined, |
||||||
|
text: t('alerting.rule-list.toggle.go-back-to-old-look', 'Go back to the old look'), |
||||||
|
'data-testid': 'alerting-list-view-toggle-v1', |
||||||
|
} |
||||||
|
: { |
||||||
|
variant: 'primary', |
||||||
|
icon: 'rocket', |
||||||
|
text: t('alerting.rule-list.toggle.try-out-the-new-look', 'Try out the new look!'), |
||||||
|
'data-testid': 'alerting-list-view-toggle-v2', |
||||||
|
}; |
||||||
|
|
||||||
|
return ( |
||||||
|
<Stack direction="row" alignItems="center" justifyContent="space-between" gap={2}> |
||||||
|
<h1>{title}</h1> |
||||||
|
{shouldShowV2Toggle && ( |
||||||
|
<div> |
||||||
|
<Button size="sm" fill="outline" {...configToUse} onClick={toggleListView} className="fs-unmask"> |
||||||
|
{text} |
||||||
|
</Button> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</Stack> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
function useV2AlertListViewToggle() { |
||||||
|
const listViewV2Enabled = shouldUseAlertingListViewV2(); |
||||||
|
|
||||||
|
const enableListViewV2 = useCallback(() => { |
||||||
|
setLocalStorageFeatureToggle('alertingListViewV2', true); |
||||||
|
}, []); |
||||||
|
|
||||||
|
const disableListViewV2 = useCallback(() => { |
||||||
|
setLocalStorageFeatureToggle('alertingListViewV2', undefined); |
||||||
|
}, []); |
||||||
|
|
||||||
|
return { |
||||||
|
listViewV2Enabled, |
||||||
|
enableListViewV2, |
||||||
|
disableListViewV2, |
||||||
|
}; |
||||||
|
} |
||||||
Loading…
Reference in new issue