Preferences: Add confirmation modal when saving org preferences (#59119)

public/app/features/org/OrgDetailsPage.test.tsx

@@ -1,8 +1,12 @@
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import React from 'react';
+import { Provider } from 'react-redux';
 import { mockToolkitActionCreator } from 'test/core/redux/mocks';
 
 import { NavModel } from '@grafana/data';
+import { ModalManager } from 'app/core/services/ModalManager';
+import { configureStore } from 'app/store/configureStore';
 
 import { backendSrv } from '../../core/services/backend_srv';
 import { Organization } from '../../types';
@@ -12,6 +16,7 @@ import { setOrganizationName } from './state/reducers';
 
 jest.mock('app/core/core', () => {
   return {
+    ...jest.requireActual('app/core/core'),
     contextSrv: {
       hasPermission: () => true,
     },
@@ -56,7 +61,11 @@ const setup = (propOverrides?: object) => {
   };
   Object.assign(props, propOverrides);
 
-  render(<OrgDetailsPage {...props} />);
+  render(
+    <Provider store={configureStore()}>
+      <OrgDetailsPage {...props} />
+    </Provider>
+  );
 };
 
 describe('Render', () => {
@@ -84,4 +93,24 @@ describe('Render', () => {
       })
     ).not.toThrow();
   });
+
+  it('should show a modal when submitting', async () => {
+    new ModalManager().init();
+    setup({
+      organization: {
+        name: 'Cool org',
+        id: 1,
+      },
+      preferences: {
+        homeDashboardUID: 'home-dashboard',
+        theme: 'Default',
+        timezone: 'Default',
+        locale: '',
+      },
+    });
+
+    await userEvent.click(screen.getByRole('button', { name: 'Save' }));
+
+    expect(screen.getByText('Confirm preferences update')).toBeInTheDocument();
+  });
 });

public/app/features/org/OrgDetailsPage.tsx

@@ -5,9 +5,10 @@ import { NavModel } from '@grafana/data';
 import { VerticalGroup } from '@grafana/ui';
 import { Page } from 'app/core/components/Page/Page';
 import SharedPreferences from 'app/core/components/SharedPreferences/SharedPreferences';
-import { contextSrv } from 'app/core/core';
+import { appEvents, contextSrv } from 'app/core/core';
 import { getNavModel } from 'app/core/selectors/navModel';
 import { AccessControlAction, Organization, StoreState } from 'app/types';
+import { ShowConfirmModalEvent } from 'app/types/events';
 
 import OrgProfile from './OrgProfile';
 import { loadOrganization, updateOrganization } from './state/actions';
@@ -31,6 +32,21 @@ export class OrgDetailsPage extends PureComponent<Props> {
     this.props.updateOrganization();
   };
 
+  handleConfirm = () => {
+    return new Promise<boolean>((resolve) => {
+      appEvents.publish(
+        new ShowConfirmModalEvent({
+          title: 'Confirm preferences update',
+          text: 'This will update the preferences for the whole organization. Are you sure you want to update the preferences?',
+          yesText: 'Save',
+          yesButtonVariant: 'primary',
+          onConfirm: async () => resolve(true),
+          onDismiss: async () => resolve(false),
+        })
+      );
+    });
+  };
+
   render() {
     const { navModel, organization } = this.props;
     const isLoading = Object.keys(organization).length === 0;
@@ -44,7 +60,9 @@ export class OrgDetailsPage extends PureComponent<Props> {
           {!isLoading && (
             <VerticalGroup spacing="lg">
               {canReadOrg && <OrgProfile onSubmit={this.onUpdateOrganization} orgName={organization.name} />}
-              {canReadPreferences && <SharedPreferences resourceUri="org" disabled={!canWritePreferences} />}
+              {canReadPreferences && (
+                <SharedPreferences resourceUri="org" disabled={!canWritePreferences} onConfirm={this.handleConfirm} />
+              )}
             </VerticalGroup>
           )}
         </Page.Contents>