added fix for theme mode update

Author: GurinderRawala

public/app/fn-app/create-mfe.ts

@@ -24,6 +24,8 @@ import {
   mfeDispatch,
   updateRenderingDashboardUID,
   updatePartialMfeStates,
+  mfeGetStoreState,
+  updateMfeMode,
 } from 'app/store/configureMfeStore';
 
 import { FNDashboardProps, FailedToMountGrafanaErrorName } from './types';
@@ -205,6 +207,9 @@ class createMfe {
           };
 
           createMfe.logger.info('[FN Grafana] Dispatching initial state.', { initialState });
+          if (props.mode && mfeGetStoreState().fnGlobalReducer.mode !== props.mode) {
+            mfeDispatch(updateMfeMode(props.mode));
+          }
           mfeDispatch(updatePartialMfeStates(initialState));
 
           createMfe.renderMfeComponent(props, () => {
@@ -259,12 +264,8 @@ class createMfe {
     }: FNDashboardProps & {
       readonly renderingDashboardUid?: string;
     }) => {
-      if (mode) {
-        mfeDispatch(
-          updatePartialMfeStates({
-            mode,
-          })
-        );
+      if (mode && mfeGetStoreState().fnGlobalReducer.mode !== mode) {
+        mfeDispatch(updateMfeMode(mode));
 
         createMfe.loadFnTheme(mode);
       }

public/app/store/configureMfeStore.ts

@@ -78,6 +78,15 @@ const reducers: SliceCaseReducers<MfeGlobalState> = {
 
     state.renderingDashboardUID = action.payload;
   },
+
+  updateMfeMode: (state, action: PayloadAction<GrafanaThemeType.Light | GrafanaThemeType.Dark>) => {
+    FnLoggerService.info('Updating MFE mode', {
+      state,
+      mode: action.payload,
+    });
+
+    state.mode = action.payload;
+  },
 };
 
 export interface MfeGlobalState extends MfeState {
@@ -97,7 +106,8 @@ const fnSlice = createSlice<MfeGlobalState, SliceCaseReducers<MfeGlobalState>, s
   reducers,
 });
 
-export const { updatePartialMfeStates, removeGrafanaStoreAndDashboard, updateRenderingDashboardUID } = fnSlice.actions;
+export const { updatePartialMfeStates, updateMfeMode, removeGrafanaStoreAndDashboard, updateRenderingDashboardUID } =
+  fnSlice.actions;
 export const fnSliceReducer = fnSlice.reducer;
 
 export type MfeStore = {

public/microfrontends/fn_dashboard/index.html

@@ -19,7 +19,7 @@
 
     <script nonce="" src="../../../public/build/runtime~fn_dashboard.551314fa089c5f51c211.js" type="text/javascript"></script>
 
-    <script nonce="" src="../../../public/build/fn_dashboard.95f3d679653900a42786.js" type="text/javascript"></script>
+    <script nonce="" src="../../../public/build/fn_dashboard.770e4e6d381c2fe6a321.js" type="text/javascript"></script>
 
   </body>
 </html>