Dependent containers re-initialization using eventHub

src/OV.React/src/src/App.tsx

@@ -7,6 +7,8 @@ import { Loader } from './views/Loader';
 import { ServiceContainer } from './state/ServiceContainer';
 import { SettingsContainer } from './state/SettingsContainer';
 import { ErrorNotificationList } from './views/ErrorNotificationList';
+import EventHub from './services/EventHub';
+import { EventTypes } from './models/EventTypes';
 
 interface AppProps {
 
@@ -29,14 +31,13 @@ export class App extends React.Component<AppProps, AppState> {
     }
 
     async componentDidMount() {
-        this.settingsContainer.subscribe(async () => {
-            if (this.settingsContainer.isSettingsValid() && !this.settingsContainer.state.isSettingsOpened) {
-                await this.filterContainer.initialize();
-                await this.oplogContainer.initialize();
-            }
-        })
-
         await this.settingsContainer.initialize();
+        await this.filterContainer.initialize(this.settingsContainer.isSettingsValid());
+        await this.oplogContainer.initialize();
+
+        EventHub.on(EventTypes.CONNECTION_STRING_CHANGED, async () => {
+            await this.filterContainer.reloadPrefillInfo();
+        });
     }
 
     render() {

src/OV.React/src/src/models/EventTypes.ts

@@ -1,3 +1,4 @@
 export enum EventTypes {
-    FETCH_ERROR = "FETCH_ERROR"
+    FETCH_ERROR = "FETCH_ERROR",
+    CONNECTION_STRING_CHANGED = "CONNECTION_STRING_CHANGED",
 }

src/OV.React/src/src/state/OplogFilterContainer.ts

@@ -39,8 +39,11 @@ export class OplogFilterContainer extends BaseContainer<OplogFilterContainerStat
         super(serviceContainer);
     }
 
-    initialize = async (): Promise<void> => {
-        const prefillResponse = await this.makeRequest(() => OplogService.prefill());
+    initialize = async (isConnectionStringPresent: boolean): Promise<void> => {
+        if(isConnectionStringPresent){
+            await this.reloadPrefillInfo();
+        }
+
         const favouriteFilters = FilterService.loadFavouriteFilters()
         ?.map(x => {
             return {
@@ -53,7 +56,6 @@ export class OplogFilterContainer extends BaseContainer<OplogFilterContainerStat
         const searchFilter = FilterService.loadSearchFilter() ?? this.state.searchFilter;
 
         await this.setState({
-            databaseOptions: prefillResponse.databases,
             favouriteFilters: favouriteFilters ?? [],
             searchFilter: {
                 ...searchFilter, 
@@ -65,6 +67,25 @@ export class OplogFilterContainer extends BaseContainer<OplogFilterContainerStat
         this.subscribe(this.onStateChange)
     };
 
+    reloadPrefillInfo = async () => {
+        const prefillResponse = await this.makeRequest(() => OplogService.prefill());
+        let databases: DatabasePrefillModel[] = prefillResponse.databases;
+
+        await this.setState({
+            databaseOptions: databases,
+            searchFilter: {
+                collection: "",
+                database: "",
+                endDate: null,
+                startDate: null,
+                filterId: "",
+                recordId: ""
+            }
+        });
+
+        await this.onSearchFilterChange();
+    }
+
     onStateChange = ()=> {
         FilterService.saveFavouriteFilters(this.state.favouriteFilters);
         FilterService.saveSearchFilter(this.state.searchFilter);

src/OV.React/src/src/state/SettingsContainer.ts

@@ -1,5 +1,7 @@
+import { EventTypes } from "../models/EventTypes";
 import { SettingsModel } from "../models/SettingsModel";
 import { ConfigService } from "../services/ConfigService";
+import EventHub from "../services/EventHub";
 import { BaseContainer } from "./BaseContainer";
 import { ServiceContainer } from "./ServiceContainer";
 
@@ -55,12 +57,20 @@ export class SettingsContainer extends BaseContainer<SettingsContainerState> {
             connectionString: model.connectionString
         }));
 
+        const isConnectionStringChanged = result.connectionString != this.state.settings.connectionString
+            && result.isConfigured === true;
+
         await this.setState({
             isConfigured: result.isConfigured,
             settings: {
                 connectionString: result.connectionString ?? ""
             },
             isSettingsOpened: result.isConfigured === false
         });
+
+        if(isConnectionStringChanged) {
+            EventHub.emit(EventTypes.CONNECTION_STRING_CHANGED, {});
+        }
+
     }
 }