fix: publish btn doesn't show after component edit

When we edit & save the component, publish button doesn't show up until we refresh the page manualy or open this unit by opening previous unit and coming back to this unit again.
In this commit, we are dispatching a storage event whenever we edit the component, it'll refresh the page & show the publish button as expected.

Author: Muhammad Faraz Maqsood

src/course-unit/hooks.jsx

@@ -213,6 +213,24 @@ export const useCourseUnit = ({ courseId, blockId }) => {
     }
   }, [isMoveModalOpen]);
 
+  useEffect(() => {
+    const handlePageRefreshUsingStorage = (event) => {
+      // ignoring tests for if block, because it triggers when someone
+      // edits the component using editor which has a separate store
+      /* istanbul ignore next */
+      if (event.key === 'courseRefreshTriggerOnComponentEditSave') {
+        dispatch(fetchCourseSectionVerticalData(blockId, sequenceId));
+        dispatch(fetchCourseVerticalChildrenData(blockId, isSplitTestType));
+        localStorage.removeItem(event.key);
+      }
+    };
+
+    window.addEventListener('storage', handlePageRefreshUsingStorage);
+    return () => {
+      window.removeEventListener('storage', handlePageRefreshUsingStorage);
+    };
+  }, [blockId, sequenceId, isSplitTestType]);
+
   return {
     sequenceId,
     courseUnit,

src/editors/data/redux/thunkActions/app.js

@@ -125,6 +125,16 @@ export const saveBlock = (content, returnToUnit) => (dispatch) => {
     content,
     onSuccess: (response) => {
       dispatch(actions.app.setSaveResponse(response));
+      const parsedData = JSON.parse(response.config.data);
+      if (parsedData?.has_changes) {
+        const storageKey = 'courseRefreshTriggerOnComponentEditSave';
+        localStorage.setItem(storageKey, Date.now());
+
+        window.dispatchEvent(new StorageEvent('storage', {
+          key: storageKey,
+          newValue: Date.now().toString(),
+        }));
+      }
       returnToUnit(response.data);
     },
   }));

src/editors/data/redux/thunkActions/app.test.js

@@ -352,7 +352,11 @@ describe('app thunkActions', () => {
     });
     it('dispatches actions.app.setSaveResponse with response and then calls returnToUnit', () => {
       dispatch.mockClear();
-      const response = 'testRESPONSE';
+      const mockParsedData = { has_changes: true };
+      const response = {
+        config: { data: JSON.stringify(mockParsedData) },
+        data: {},
+      };
       calls[1][0].saveBlock.onSuccess(response);
       expect(dispatch).toHaveBeenCalledWith(actions.app.setSaveResponse(response));
       expect(returnToUnit).toHaveBeenCalled();