PMM-15051 Wait for settings endpoint to be ready after public address update

ui/apps/pmm/src/api/settings.ts

@@ -1,3 +1,4 @@
+import type { AxiosRequestConfig } from 'axios';
 import {
   GetFrontendSettingsResponse,
   GetReadonlySettingsResponse,
@@ -8,8 +9,8 @@ import {
 } from 'types/settings.types';
 import { api, grafanaApi } from './api';
 
-export const getSettings = async () => {
-  const res = await api.get<GetSettingsResponse>('/server/settings');
+export const getSettings = async (config?: AxiosRequestConfig) => {
+  const res = await api.get<GetSettingsResponse>('/server/settings', config);
   return res.data.settings;
 };
 

ui/apps/pmm/src/hooks/api/useSettings.ts

@@ -24,7 +24,7 @@ export const SETTINGS_QUERY_KEY = ['settings'] as const;
 export const useSettings = (options?: Partial<UseQueryOptions<Settings>>) =>
   useQuery({
     queryKey: SETTINGS_QUERY_KEY,
-    queryFn: () => getSettings(),
+    queryFn: () => getSettings(options?.axios),
     ...options,
   });
 
@@ -50,9 +50,32 @@ export const useUpdateSettings = (
   options?: Partial<UseMutationOptions<Settings, Error, UpdateSettingsPayload>>
 ) => {
   const queryClient = useQueryClient();
+  const settings = useSettings({
+    enabled: false,
+    retry: 24,
+    retryDelay: 2500,
+    axios: {
+      disableNotifications: true,
+    },
+  });
 
   return useMutation({
-    mutationFn: (payload) => updateSettings(payload),
+    mutationFn: async (payload) => {
+      const prevAddress =
+        queryClient.getQueryData<Settings>(
+          SETTINGS_QUERY_KEY
+        )?.pmmPublicAddress;
+      const data = await updateSettings(payload);
+
+      // nginx is getting reset when public address is changing
+      // so we need to make sure the UI is accessible after the update
+      if (prevAddress !== data.pmmPublicAddress) {
+        await new Promise((resolve) => setTimeout(resolve, 2500));
+        await settings.refetch({ throwOnError: true });
+      }
+
+      return data;
+    },
     ...options,
     onSuccess: (data, variables, onMutate, context) => {
       void queryClient.invalidateQueries({ queryKey: SETTINGS_QUERY_KEY });

ui/apps/pmm/src/types/api.types.ts

@@ -1,4 +1,5 @@
 import type { AxiosError } from 'axios';
+import type { DefaultError, QueryKey } from '@tanstack/react-query';
 
 export interface ApiErrorResponse {
   error: string;
@@ -12,4 +13,17 @@ declare module 'axios' {
   }
 }
 
+declare module '@tanstack/react-query' {
+  /* eslint-disable @typescript-eslint/no-unused-vars */
+  interface UseQueryOptions<
+    TQueryFnData = unknown,
+    TError = DefaultError,
+    TData = TQueryFnData,
+    TQueryKey extends QueryKey = QueryKey,
+  > {
+    axios?: import('axios').AxiosRequestConfig;
+  }
+  /* eslint-enable @typescript-eslint/no-unused-vars */
+}
+
 export interface ApiError extends AxiosError<ApiErrorResponse> {}