Preferences: Can reset timezone preference back to default correctly (#68881)

* user essentials mob! 🔱

lastFile:public/app/core/components/SharedPreferences/SharedPreferences.tsx

* invert menuShouldPortal logic on TimeZonePicker and fix unit test

Co-authored-by: eledobleefe <laura.fernandez@grafana.com>
Co-authored-by: Joao Silva <joao.silva@grafana.com>
Co-authored-by: L-M-K-B <48948963+L-M-K-B@users.noreply.github.com>
Co-authored-by: joshhunt <josh@trtr.co>

---------

Co-authored-by: eledobleefe <laura.fernandez@grafana.com>
Co-authored-by: Joao Silva <joao.silva@grafana.com>
Co-authored-by: L-M-K-B <48948963+L-M-K-B@users.noreply.github.com>
Co-authored-by: joshhunt <josh@trtr.co>
This commit is contained in:
Ashley Harrison
2023-05-24 09:28:14 +01:00
committed by GitHub
parent 286b9e08e9
commit 2ceed6a169
5 changed files with 24 additions and 17 deletions

View File

@@ -103,6 +103,7 @@ export const TimePickerFooter = (props: Props) => {
}
}}
onBlur={onToggleChangeTimeSettings}
menuShouldPortal={false}
/>
</section>
) : (

View File

@@ -41,7 +41,7 @@ export const TimeZonePicker = (props: Props) => {
includeInternal = false,
disabled = false,
inputId,
menuShouldPortal = false,
menuShouldPortal = true,
openMenuOnFocus = true,
} = props;
const groupedTimeZones = useTimeZones(includeInternal);

View File

@@ -1,4 +1,4 @@
import { render, screen, waitFor } from '@testing-library/react';
import { render, screen, waitFor, within } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import React from 'react';
import { getSelectParent, selectOptionInTest } from 'test/helpers/selectOptionInTest';
@@ -84,6 +84,17 @@ const mockPreferences: UserPreferencesDTO = {
language: '',
};
const defaultPreferences: UserPreferencesDTO = {
timezone: '',
weekStart: '',
theme: '',
homeDashboardUID: '',
queryHistory: {
homeTab: '',
},
language: '',
};
const mockPrefsPatch = jest.fn();
const mockPrefsUpdate = jest.fn();
const mockPrefsLoad = jest.fn().mockResolvedValue(mockPreferences);
@@ -154,7 +165,7 @@ describe('SharedPreferences', () => {
expect(weekSelect).toHaveTextContent('Default');
});
it("saves the user's new preferences", async () => {
it('saves the users new preferences', async () => {
await selectOptionInTest(screen.getByLabelText('Interface theme'), 'Dark');
await selectOptionInTest(screen.getByLabelText('Timezone'), 'Australia/Sydney');
await selectOptionInTest(screen.getByLabelText('Week start'), 'Saturday');
@@ -174,24 +185,20 @@ describe('SharedPreferences', () => {
});
});
it("saves the user's default preferences", async () => {
it('saves the users default preferences', async () => {
await selectOptionInTest(screen.getByLabelText('Interface theme'), 'Default');
await selectOptionInTest(screen.getByLabelText('Home Dashboard'), 'Default');
// there's no default option in this dropdown - there's a clear selection button
// get the parent container, and find the "select-clear-value" button
const dashboardSelect = screen.getByTestId('User preferences home dashboard drop down');
await userEvent.click(within(dashboardSelect).getByRole('button', { name: 'select-clear-value' }));
await selectOptionInTest(screen.getByLabelText('Timezone'), 'Default');
await selectOptionInTest(screen.getByLabelText('Week start'), 'Default');
await selectOptionInTest(screen.getByLabelText(/language/i), 'Default');
await userEvent.click(screen.getByText('Save'));
expect(mockPrefsUpdate).toHaveBeenCalledWith({
timezone: 'browser',
weekStart: '',
theme: '',
homeDashboardUID: 'myDash',
queryHistory: {
homeTab: '',
},
language: '',
});
expect(mockPrefsUpdate).toHaveBeenCalledWith(defaultPreferences);
});
it('refreshes the page after saving preferences', async () => {

View File

@@ -108,7 +108,7 @@ export class SharedPreferences extends PureComponent<Props, State> {
};
onTimeZoneChanged = (timezone?: string) => {
if (!timezone) {
if (typeof timezone !== 'string') {
return;
}
this.setState({ timezone: timezone });

View File

@@ -105,7 +105,6 @@ export const TimeRegionEditor = ({ value, onChange }: Props) => {
includeInternal={true}
onChange={(v) => onTimezoneChange(v)}
onBlur={() => setEditing(false)}
menuShouldPortal={true}
openMenuOnFocus={false}
width={100}
autoFocus