PMM-14655 Add listeners for settings change and service added

ui/apps/pmm-compat/src/compat.ts

@@ -20,6 +20,7 @@ import { adjustToolbar } from 'compat/toolbar';
 import { isWithinIframe, getLinkWithVariables } from 'lib/utils';
 import { documentTitleObserver } from 'lib/utils/document';
 import { isFirstLogin, updateIsFirstLogin } from 'lib/utils/login';
+import { ServiceAddedEvent, SettingsUpdatedEvent } from 'lib/events';
 
 export const initialize = () => {
   // If Grafana is opened outside of iframe (or on login), redirect to PMM UI
@@ -144,4 +145,16 @@ export const initialize = () => {
       });
     },
   });
+
+  getAppEvents().subscribe(SettingsUpdatedEvent, () => {
+    messenger.sendMessage({
+      type: 'SETTINGS_CHANGED',
+    });
+  });
+
+  getAppEvents().subscribe(ServiceAddedEvent, () => {
+    messenger.sendMessage({
+      type: 'SERVICE_ADDED',
+    });
+  });
 };

ui/apps/pmm-compat/src/lib/events.ts

@@ -0,0 +1,14 @@
+/**
+ * @fileoverview
+ * Same events as in public/app/percona/shared/core/events.ts in grafana repository
+ */
+
+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';
+}

ui/apps/pmm/src/contexts/grafana/grafana.provider.tsx

@@ -17,6 +17,8 @@ import { useKioskMode } from 'hooks/utils/useKioskMode';
 import { useColorMode } from 'hooks/theme';
 import { getLocationUrl } from './grafana.utils';
 import messenger from 'lib/messenger';
+import { useSettings } from 'hooks/api/useSettings';
+import { useServiceTypes } from 'hooks/api/useServices';
 
 /** Guard DOM usage. */
 const isBrowser = () =>
@@ -34,6 +36,13 @@ export const GrafanaProvider: FC<PropsWithChildren> = ({ children }) => {
   const location = useLocation();
   const navigate = useNavigate();
 
+  const { refetch: refetchSettings } = useSettings({
+    enabled: false,
+  });
+  const { refetch: refetchServiceTypes } = useServiceTypes({
+    enabled: false,
+  });
+
   const src = location.pathname.replace(PMM_NEW_NAV_PATH, '');
   const isGrafanaPage = src.startsWith(GRAFANA_SUB_PATH);
 
@@ -95,10 +104,22 @@ export const GrafanaProvider: FC<PropsWithChildren> = ({ children }) => {
       },
     });
 
+    messenger.addListener({
+      type: 'SETTINGS_CHANGED',
+      onMessage: () => refetchSettings(),
+    });
+
+    messenger.addListener({
+      type: 'SERVICE_ADDED',
+      onMessage: () => refetchServiceTypes(),
+    });
+
     // Cleanup once provider unmounts
     return () => {
       messenger.unregister();
     };
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isLoaded, setFromGrafana, navigate]);
 
   // -------- OUTGOING TO GRAFANA --------

ui/apps/pmm/src/contexts/navigation/navigation.provider.tsx

@@ -32,6 +32,7 @@ import { useLocalStorage } from 'hooks/utils/useLocalStorage';
 export const NavigationProvider: FC<PropsWithChildren> = ({ children }) => {
   const { user } = useUser();
   const { data: serviceTypes } = useServiceTypes({
+    enabled: !!user,
     refetchInterval: INTERVALS_MS.SERVICE_TYPES,
   });
   const { settings } = useSettings();

ui/packages/shared/src/types.ts

@@ -9,7 +9,9 @@ export type MessageType =
   | 'GRAFANA_READY'
   | 'DOCUMENT_TITLE_CHANGE'
   | 'GRAFANA_THEME_CHANGED'
-  | 'CHANGE_THEME';
+  | 'CHANGE_THEME'
+  | 'SETTINGS_CHANGED'
+  | 'SERVICE_ADDED';
 
 export type LocationState = { fromGrafana?: boolean } | null;
 
@@ -55,3 +57,7 @@ export type ChangeThemeMessage = Message<
     theme: ColorMode;
   }
 >;
+
+export type SettingsChangedMessage = Message<'SETTINGS_CHANGED'>;
+
+export type ServiceAddedMessage = Message<'SERVICE_ADDED'>;