feat: Unit settings in libraries

src/library-authoring/containers/UnitInfo.tsx

@@ -30,6 +30,7 @@ import componentMessages from '../components/messages';
 import ContainerDeleter from '../components/ContainerDeleter';
 import { useContainer, usePublishContainer } from '../data/apiHooks';
 import { ToastContext } from '../../generic/toast-context';
+import UnitSettings from './UnitSettings';
 
 type ContainerMenuProps = {
   containerId: string,
@@ -167,7 +168,7 @@ const UnitInfo = () => {
       >
         {renderTab(UNIT_INFO_TABS.Preview, <LibraryUnitBlocks preview />, intl.formatMessage(messages.previewTabTitle))}
         {renderTab(UNIT_INFO_TABS.Organize, <ContainerOrganize />, intl.formatMessage(messages.organizeTabTitle))}
-        {renderTab(UNIT_INFO_TABS.Settings, 'Unit Settings', intl.formatMessage(messages.settingsTabTitle))}
+        {renderTab(UNIT_INFO_TABS.Settings, <UnitSettings />, intl.formatMessage(messages.settingsTabTitle))}
       </Tabs>
     </Stack>
   );

src/library-authoring/containers/UnitSettings.tsx

@@ -0,0 +1,126 @@
+import {
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+} from 'react';
+import { useIntl, FormattedMessage } from '@edx/frontend-platform/i18n';
+import {
+  Button,
+  ButtonGroup,
+  Container,
+  Stack,
+  Form,
+} from '@openedx/paragon';
+import messages from './messages';
+import { useLibraryContext } from '../common/context/LibraryContext';
+import { useContainer, useUpdateContainer } from '../data/apiHooks';
+import Loading from '../../generic/Loading';
+import { ToastContext } from '../../generic/toast-context';
+
+const UnitSettings = () => {
+  const intl = useIntl();
+
+  const {
+    unitId,
+    readOnly,
+  } = useLibraryContext();
+
+  // istanbul ignore if: this should never happen
+  if (!unitId) {
+    throw new Error('unitId is required');
+  }
+
+  const [isCheckedDiscussion, setCheckedDiscussion] = useState(false);
+  const [isHideForLearners, setHideForLearners] = useState(false);
+  const { data: container } = useContainer(unitId);
+  const updateMutation = useUpdateContainer(unitId);
+  const { showToast } = useContext(ToastContext);
+
+  useEffect(() => {
+    if (!container) {
+      return;
+    }
+    setCheckedDiscussion(container.enableDiscussion);
+    setHideForLearners(container.hideFromLearners);
+  }, [container]);
+
+  const onClickDiscussionCheck = useCallback((event) => {
+    const value: boolean = event.target.checked;
+    setCheckedDiscussion(value);
+    updateMutation.mutateAsync({
+      metadata: {
+        enableDiscussion: value,
+      },
+    }).then(() => {
+      showToast(intl.formatMessage(messages.updateContainerSuccessMsg));
+    }).catch(() => {
+      showToast(intl.formatMessage(messages.updateContainerErrorMsg));
+      setCheckedDiscussion(!value);
+    });
+  }, []);
+
+  const onHandleVisibility = useCallback((value: boolean) => {
+    if (container?.hideFromLearners === value) {
+      return;
+    }
+
+    setHideForLearners(value);
+    updateMutation.mutateAsync({
+      metadata: {
+        hideFromLearners: value,
+      },
+    }).then(() => {
+      showToast(intl.formatMessage(messages.updateContainerSuccessMsg));
+    }).catch(() => {
+      showToast(intl.formatMessage(messages.updateContainerErrorMsg));
+      setHideForLearners(!value);
+    });
+  }, [container]);
+
+  if (!container) {
+    return <Loading />;
+  }
+
+  return (
+    <Stack>
+      <Container>
+        <h3 className="h5 mb-3">
+          <FormattedMessage {...messages.unitVisibilityTitle} />
+        </h3>
+        <ButtonGroup toggle>
+          <Button
+            variant={isHideForLearners ? 'outline-primary' : 'primary'}
+            disabled={readOnly}
+            onClick={() => onHandleVisibility(false)}
+          >
+            <FormattedMessage {...messages.unitVisibilityStudentLabel} />
+          </Button>
+          <Button
+            variant={isHideForLearners ? 'primary' : 'outline-primary'}
+            disabled={readOnly}
+            onClick={() => onHandleVisibility(true)}
+          >
+            <FormattedMessage {...messages.unitVisibilityStaffLabel} />
+          </Button>
+        </ButtonGroup>
+      </Container>
+      <hr className="w-100" />
+      <Container>
+        <h3 className="h5 mb-3">
+          <FormattedMessage {...messages.unitDiscussionTitle} />
+        </h3>
+        <Form.Checkbox
+          checked={isCheckedDiscussion}
+          description={intl.formatMessage(messages.unitEnableDiscussionDescription)}
+          disabled={readOnly}
+          onChange={onClickDiscussionCheck}
+        >
+          <FormattedMessage {...messages.unitEnableDiscussionLabel} />
+        </Form.Checkbox>
+      </Container>
+    </Stack>
+  );
+};
+
+export default UnitSettings;

src/library-authoring/containers/messages.ts

@@ -56,6 +56,36 @@ const messages = defineMessages({
     defaultMessage: 'Failed to update container.',
     description: 'Message displayed when container update fails',
   },
+  unitVisibilityTitle: {
+    id: 'course-authoring.library-authoring.unit.settings.visibility.title',
+    defaultMessage: 'Unit Visibility',
+    description: 'Title of the Unit Visibility section on Unit Settings',
+  },
+  unitDiscussionTitle: {
+    id: 'course-authoring.library-authoring.unit.settings.discussion.title',
+    defaultMessage: 'Discussion',
+    description: 'Title of the Discussion section on Unit Settings',
+  },
+  unitVisibilityStudentLabel: {
+    id: 'course-authoring.library-authoring.unit.settings.visibility.student',
+    defaultMessage: 'Student Visible',
+    description: 'Label of the button for set the unit as student visible on unit settins.',
+  },
+  unitVisibilityStaffLabel: {
+    id: 'course-authoring.library-authoring.unit.settings.visibility.staff',
+    defaultMessage: 'Staff Only',
+    description: 'Label of the button for set the unit as staff only visible on unit settins.',
+  },
+  unitEnableDiscussionLabel: {
+    id: 'course-authoring.library-authoring.unit.settings.discussion.enable.label',
+    defaultMessage: 'Enable discussion',
+    description: 'Label of the check to enable discussion on units settings.',
+  },
+  unitEnableDiscussionDescription: {
+    id: 'course-authoring.library-authoring.unit.settings.discussion.enable.description',
+    defaultMessage: 'Topics for unpublished units will not be created',
+    description: 'Description of the check to enable discussion on units settings.',
+  },
 });
 
 export default messages;

src/library-authoring/data/api.ts

@@ -602,6 +602,8 @@ export interface Container {
   lastDraftCreated: string | null;
   lastDraftCreatedBy: string | null,
   hasUnpublishedChanges: boolean;
+  hideFromLearners: boolean;
+  enableDiscussion: boolean;
   created: string;
   modified: string;
   collections: CollectionMetadata[];
@@ -615,8 +617,15 @@ export async function getContainerMetadata(containerId: string): Promise<Contain
   return camelCaseObject(data);
 }
 
+export interface UpdateUnitMetadata {
+  hideFromLearners?: boolean;
+  enableDiscussion?: boolean;
+}
+
 export interface UpdateContainerDataRequest {
-  displayName: string;
+  displayName?: string;
+  // Add other container metadata types when they are implemented
+  metadata?: UpdateUnitMetadata | null;
 }
 
 /**
@@ -627,7 +636,10 @@ export async function updateContainerMetadata(
   containerData: UpdateContainerDataRequest,
 ) {
   const client = getAuthenticatedHttpClient();
-  await client.patch(getLibraryContainerApiUrl(containerId), snakeCaseObject(containerData));
+  await client.patch(getLibraryContainerApiUrl(containerId), snakeCaseObject({
+    displayName: containerData.displayName,
+    ...containerData.metadata ?? {},
+  }));
 }
 
 /**