fix: access restricted label refresh (#2846)

Author: rpenido

src/course-unit/CourseUnit.test.jsx

@@ -2541,6 +2541,87 @@ describe('<CourseUnit />', () => {
     expect(discussionButton).not.toBeChecked();
   });
 
+  it('should update the group access in the unit sidebar', async () => {
+    const user = userEvent.setup();
+
+    setConfig({
+      ...getConfig(),
+      ENABLE_UNIT_PAGE_NEW_DESIGN: 'true',
+    });
+    render(<RootWrapper />);
+
+    axiosMock
+      .onGet(getCourseSectionVerticalApiUrl(courseId))
+      .reply(200, {
+        ...courseSectionVerticalMock,
+      });
+    axiosMock
+      .onPost(getXBlockBaseApiUrl(courseSectionVerticalMock.xblock_info.id))
+      .reply(200, {
+        ...courseSectionVerticalMock,
+      });
+    axiosMock
+      .onGet(getCourseSectionVerticalApiUrl(blockId))
+      .reply(200, {
+        ...courseSectionVerticalMock,
+        xblock_info: {
+          ...courseSectionVerticalMock.xblock_info,
+          user_partition_info: {
+            selected_partition_index: 0,
+            selected_groups_label: 'Group A',
+            selectable_partitions: [{
+              id: 10,
+              name: 'Content Groups',
+              scheme: 'cohort',
+              groups: [
+                {
+                  deleted: false,
+                  id: 1,
+                  name: 'Group A',
+                  selected: true,
+                },
+                {
+                  deleted: false,
+                  id: 2,
+                  name: 'Group B',
+                  selected: false,
+                },
+                {
+                  deleted: false,
+                  id: 3,
+                  name: 'Group C',
+                  selected: false,
+                },
+              ],
+            }],
+          },
+        },
+      });
+    await executeThunk(fetchCourseSectionVerticalData(courseId), store.dispatch);
+    await executeThunk(fetchCourseSectionVerticalData(blockId, courseId), store.dispatch);
+
+    // Move to settings
+    expect(await screen.findByRole('heading', { name: /draft \(unpublished changes\)/i })).toBeInTheDocument();
+    const settingsTab = screen.getByRole('tab', { name: /settings/i });
+    expect(settingsTab).toBeInTheDocument();
+    await user.click(settingsTab);
+
+    // Select groub
+    const groupCombobox = screen.getByTestId('group-type-select');
+    await user.selectOptions(groupCombobox, 'Content Groups');
+    await user.click(screen.getByRole('checkbox', { name: /Group A/i }));
+    await user.click(screen.getByRole('checkbox', { name: /Group B/i }));
+    await user.click(screen.getByRole('button', { name: /Save changes/i }));
+
+    // Check that the group access is being updated
+    await waitFor(() => {
+      expect(axiosMock.history.post.length).toBeGreaterThan(0);
+    });
+
+    expect(axiosMock.history.post[0].url).toBe(getXBlockBaseApiUrl(courseSectionVerticalMock.xblock_info.id));
+    expect(axiosMock.history.post[0].data).toMatch(/"group_access":\{"10":\[1,2\]\}/);
+  });
+
   it('should one group in the visibility field in the unit sidebar', async () => {
     setConfig({
       ...getConfig(),

src/course-unit/unit-sidebar/unit-info/UnitInfoSidebar.tsx

@@ -95,12 +95,11 @@ const UnitInfoSettings = () => {
       isVisible,
       groupAccess,
       isDiscussionEnabled,
-      () => sendMessageToIframe(messageTypes.completeManageXBlockAccess, { locator: id }),
+      () => sendMessageToIframe(messageTypes.refreshXBlock, null),
       id,
     ));
   };
 
-  /* istanbul ignore next */
   const handleSaveGroups = async (data, { resetForm }) => {
     const groupAccess = {};
     if (data.selectedPartitionIndex >= 0) {

src/course-unit/unit-sidebar/unit-info/UnitVisibilityInfo.tsx

@@ -23,7 +23,7 @@ interface UnitVisibilityInfoProps {
   },
 }
 
-interface UnitvisibilityInfoContentProps {
+interface UnitVisibilityInfoContentProps {
   visibleToStaffOnly: boolean,
   userPartitionInfo?: {
     selectablePartitions: Record<string, any>[],
@@ -82,10 +82,10 @@ const LegacyVisibilityInfo = ({
   );
 };
 
-const UnitvisibilityInfoContent = ({
+const UnitVisibilityInfoContent = ({
   visibleToStaffOnly,
   userPartitionInfo,
-}: UnitvisibilityInfoContentProps) => {
+}: UnitVisibilityInfoContentProps) => {
   const intl = useIntl();
   const { setCurrentTabKey } = useUnitSidebarContext();
 
@@ -149,7 +149,7 @@ const UnitVisibilityInfo = ({
       <FormattedMessage {...messages.visibilityVisibleToTitle} />
     </span>
     {isUnitPageNewDesignEnabled() ? (
-      <UnitvisibilityInfoContent
+      <UnitVisibilityInfoContent
         visibleToStaffOnly={visibleToStaffOnly}
         userPartitionInfo={userPartitionInfo}
       />

src/generic/configure-modal/UnitTab.tsx

@@ -8,7 +8,7 @@ import classNames from 'classnames';
 import { COURSE_BLOCK_NAMES } from '../../constants';
 import messages from './messages';
 
-export type UserpartitionInfo = {
+export type UserPartitionInfo = {
   selectablePartitions: {
     groups: {
       deleted: boolean,
@@ -35,7 +35,7 @@ export interface UnitTabProps {
   },
   setFieldValue: (key: string, value: any) => void,
   showWarning: boolean,
-  userPartitionInfo: UserpartitionInfo,
+  userPartitionInfo: UserPartitionInfo,
 }
 
 export const DiscussionEditComponent = ({
@@ -56,7 +56,7 @@ export const DiscussionEditComponent = ({
 export interface AccessEditComponentProps {
   selectedPartitionIndex: number,
   setFieldValue: (key: string, value: any) => void,
-  userPartitionInfo: UserpartitionInfo,
+  userPartitionInfo: UserPartitionInfo,
   selectedGroups: string[],
 }