PMM-14655 Send events when service is added & settings are changed

public/app/percona/add-instance/components/AddRemoteInstance/AddRemoteInstance.test.tsx

@@ -7,6 +7,7 @@ import { configureStore } from 'app/store/configureStore';
 import { InstanceTypesExtra } from '../../panel.types';
 
 import AddRemoteInstance from './AddRemoteInstance';
+import { MemoryRouter } from 'react-router-dom-v5-compat';
 
 jest.mock('app/percona/shared/helpers/logger', () => {
   const originalModule = jest.requireActual('app/percona/shared/helpers/logger');
@@ -23,7 +24,9 @@ describe('Add remote instance:: ', () => {
     const type = Databases.mysql;
     render(
       <Provider store={configureStore()}>
-        <AddRemoteInstance onSubmit={jest.fn()} instance={{ type, credentials: {} }} selectInstance={jest.fn()} />
+        <MemoryRouter>
+          <AddRemoteInstance onSubmit={jest.fn()} instance={{ type, credentials: {} }} selectInstance={jest.fn()} />
+        </MemoryRouter>
       </Provider>
     );
 
@@ -42,7 +45,9 @@ describe('Add remote instance:: ', () => {
     const type = InstanceTypesExtra.external;
     render(
       <Provider store={configureStore()}>
-        <AddRemoteInstance onSubmit={jest.fn()} instance={{ type, credentials: {} }} selectInstance={jest.fn()} />
+        <MemoryRouter>
+          <AddRemoteInstance onSubmit={jest.fn()} instance={{ type, credentials: {} }} selectInstance={jest.fn()} />
+        </MemoryRouter>
       </Provider>
     );
 
@@ -66,7 +71,9 @@ describe('Add remote instance:: ', () => {
 
     render(
       <Provider store={configureStore()}>
-        <AddRemoteInstance onSubmit={jest.fn()} instance={{ type, credentials: {} }} selectInstance={jest.fn()} />
+        <MemoryRouter>
+          <AddRemoteInstance onSubmit={jest.fn()} instance={{ type, credentials: {} }} selectInstance={jest.fn()} />
+        </MemoryRouter>
       </Provider>
     );
 

public/app/percona/add-instance/components/AddRemoteInstance/AddRemoteInstance.tsx

@@ -38,12 +38,16 @@ import {
 } from './FormParts';
 import { ExternalServiceConnectionDetails } from './FormParts/ExternalServiceConnectionDetails/ExternalServiceConnectionDetails';
 import { HAProxyConnectionDetails } from './FormParts/HAProxyConnectionDetails/HAProxyConnectionDetails';
+import { isPmmNavEnabled } from 'app/percona/shared/helpers/plugin';
+import { useNavigate } from 'react-router-dom-v5-compat';
+import { ServiceAddedEvent } from 'app/percona/shared/core/events';
 
 const AddRemoteInstance: FC<AddRemoteInstanceProps> = ({
   instance: { type, credentials },
   onSubmit: submitWrapper,
 }) => {
   const styles = useStyles(getStyles);
+  const navigate = useNavigate();
 
   const { remoteInstanceCredentials, discoverName } = getInstanceData(type, credentials);
   const [loading, setLoading] = useState<boolean>(false);
@@ -84,7 +88,14 @@ const AddRemoteInstance: FC<AddRemoteInstanceProps> = ({
           Messages.success.title(values.serviceName || values.address || ''),
           Messages.success.description(INSTANCE_TYPES_LABELS[type as Databases]),
         ]);
-        window.location.href = '/graph/inventory/';
+
+        if (isPmmNavEnabled()) {
+          appEvents.publish(new ServiceAddedEvent());
+
+          navigate('/inventory');
+        } else {
+          window.location.href = '/graph/inventory/';
+        }
       } catch (e) {
         if (isApiCancelError(e)) {
           return;

public/app/percona/shared/core/events.ts

@@ -0,0 +1,9 @@
+import { BusEventBase } from '@grafana/data';
+
+export class SettingsUpdatedEvent extends BusEventBase {
+  static type = 'settings-updated-event';
+}
+
+export class ServiceAddedEvent extends BusEventBase {
+  static type = 'service-added-event';
+}

public/app/percona/shared/core/reducers/index.ts

@@ -26,6 +26,8 @@ import tourReducer from './tour/tour';
 import updatesReducers from './updates';
 import perconaUserReducers from './user/user';
 import usersReducers from './users/users';
+import appEvents from 'app/core/app_events';
+import { SettingsUpdatedEvent } from '../events';
 
 const initialSettingsState: Settings = {
   updatesEnabled: false,
@@ -114,6 +116,7 @@ export const updateSettingsAction = createAsyncThunk(
           }
           const settings = await SettingsService.setSettings(args.body, args.token, true);
           await thunkAPI.dispatch(fetchSettingsAction({ usedPassword: password, testEmail }));
+          appEvents.publish(new SettingsUpdatedEvent());
           return settings;
         })()
       ),