fix: implement reset functionality for XBlock publish state

Author: bra-i-am

src/course-unit/CourseUnit.jsx

@@ -71,6 +71,7 @@ const CourseUnit = ({ courseId }) => {
     handleCloseXBlockMovedAlert,
     handleNavigateToTargetUnit,
     addComponentTemplateData,
+    resetXBlockPublishState,
   } = useCourseUnit({ courseId, blockId });
   const layoutGrid = useLayoutGrid(unitCategory, isUnitLibraryType);
 
@@ -213,6 +214,7 @@ const CourseUnit = ({ courseId }) => {
                 unitXBlockActions={unitXBlockActions}
                 courseVerticalChildren={courseVerticalChildren.children}
                 handleConfigureSubmit={handleConfigureSubmit}
+                resetXBlockPublishState={resetXBlockPublishState}
               />
               {!readOnly && (
                 <AddComponent

src/course-unit/CourseUnit.test.jsx

@@ -2304,4 +2304,59 @@ describe('<CourseUnit />', () => {
     // Does not render the "Add Components" section
     expect(screen.queryByText(addComponentMessages.title.defaultMessage)).not.toBeInTheDocument();
   });
+
+  it('resets XBlock publish state after discarding changes', async () => {
+    render(<RootWrapper />);
+    let courseUnitSidebar;
+    let discardChangesBtn;
+
+    await waitFor(() => {
+      courseUnitSidebar = screen.getByTestId('course-unit-sidebar');
+      // Ensure we are in the draft/unpublished state
+      expect(within(courseUnitSidebar)
+        .getByText(sidebarMessages.sidebarTitleDraftUnpublishedChanges.defaultMessage)).toBeInTheDocument();
+      discardChangesBtn = within(courseUnitSidebar)
+        .queryByRole('button', { name: sidebarMessages.actionButtonDiscardChangesTitle.defaultMessage });
+      expect(discardChangesBtn).toBeInTheDocument();
+      userEvent.click(discardChangesBtn);
+    });
+
+    // Confirm discard in modal
+    const modalNotification = await screen.findByRole('dialog');
+    const actionBtn = within(modalNotification)
+      .getByRole('button', { name: sidebarMessages.modalDiscardUnitChangesActionButtonText.defaultMessage });
+    userEvent.click(actionBtn);
+
+    // Mock API responses for discard
+    axiosMock
+      .onPost(getXBlockBaseApiUrl(blockId), {
+        publish: PUBLISH_TYPES.discardChanges,
+      })
+      .reply(200, { dummy: 'value' });
+    axiosMock
+      .onGet(getCourseSectionVerticalApiUrl(blockId))
+      .reply(200, {
+        ...courseSectionVerticalMock,
+        xblock_info: {
+          ...courseSectionVerticalMock.xblock_info,
+          published: true,
+          has_changes: false,
+        },
+      });
+
+    await executeThunk(editCourseUnitVisibilityAndData(
+      blockId,
+      PUBLISH_TYPES.discardChanges,
+      true,
+    ), store.dispatch);
+
+    // Now the sidebar should reflect the published state (no draft/unpublished changes)
+    await waitFor(() => {
+      expect(within(courseUnitSidebar)
+        .getByText(sidebarMessages.sidebarTitlePublishedNotYetReleased.defaultMessage)).toBeInTheDocument();
+      expect(
+        within(courseUnitSidebar).queryByRole('button', { name: sidebarMessages.actionButtonDiscardChangesTitle.defaultMessage }),
+      ).not.toBeInTheDocument();
+    });
+  });
 });

src/course-unit/hooks.jsx

@@ -37,6 +37,7 @@ import {
 } from './data/selectors';
 import {
   changeEditTitleFormOpen,
+  setXBlockPublishState,
   updateMovedXBlockParams,
   updateQueryPendingStatus,
 } from './data/slice';
@@ -163,6 +164,10 @@ export const useCourseUnit = ({ courseId, blockId }) => {
     dispatch(updateMovedXBlockParams({ isSuccess: false }));
   };
 
+  const resetXBlockPublishState = () => {
+    dispatch(setXBlockPublishState(false));
+  };
+
   const handleNavigateToTargetUnit = () => {
     navigate(`/course/${courseId}/container/${movedXBlockParams.targetParentLocator}`);
   };
@@ -248,6 +253,7 @@ export const useCourseUnit = ({ courseId, blockId }) => {
     handleNavigateToTargetUnit,
     addComponentTemplateData,
     setAddComponentTemplateData,
+    resetXBlockPublishState,
   };
 };
 

src/course-unit/xblock-container-iframe/index.tsx

@@ -37,10 +37,15 @@ import { useIframeContent } from '../../generic/hooks/useIframeContent';
 import { useIframeMessages } from '../../generic/hooks/useIframeMessages';
 import VideoSelectorPage from '../../editors/VideoSelectorPage';
 import EditorPage from '../../editors/EditorPage';
-import { setXBlockPublishState } from '../data/slice';
 
 const XBlockContainerIframe: FC<XBlockContainerIframeProps> = ({
-  courseId, blockId, unitXBlockActions, courseVerticalChildren, handleConfigureSubmit, isUnitVerticalType,
+  courseId,
+  blockId,
+  unitXBlockActions,
+  courseVerticalChildren,
+  handleConfigureSubmit,
+  isUnitVerticalType,
+  resetXBlockPublishState,
 }) => {
   const intl = useIntl();
   const dispatch = useDispatch();
@@ -76,7 +81,7 @@ const XBlockContainerIframe: FC<XBlockContainerIframeProps> = ({
     closeVideoSelectorModal();
     sendMessageToIframe(messageTypes.completeXBlockEditing, { locator: newBlockId });
     // This ensures the publish button is able
-    dispatch(setXBlockPublishState(false));
+    resetXBlockPublishState();
   }, [closeXBlockEditorModal, closeVideoSelectorModal, sendMessageToIframe, newBlockId]);
 
   const handleEditXBlock = useCallback((type: string, id: string) => {

src/course-unit/xblock-container-iframe/types.ts

@@ -48,6 +48,7 @@ export interface XBlockContainerIframeProps {
   };
   courseVerticalChildren: Array<XBlockTypes>;
   handleConfigureSubmit: (XBlockId: string, ...args: any[]) => void;
+  resetXBlockPublishState: () => void;
 }
 
 export type UserPartitionInfoTypes = {