Tbain/253 add tags count

.github/workflows/validate.yml

@@ -33,7 +33,7 @@ jobs:
         path: coverage
         merge-multiple: true
     - name: Upload coverage
-      uses: codecov/codecov-action@v5
+      uses: codecov/codecov-action@v6
       with:
         fail_ci_if_error: true
         token: ${{ secrets.CODECOV_TOKEN }}

package.json

@@ -66,8 +66,8 @@
     "@openedx/paragon": "^23.5.0",
     "@redux-devtools/extension": "^3.3.0",
     "@reduxjs/toolkit": "2.11.2",
+    "@tanstack/react-query": "5.95.2",
     "@tanstack/react-table": "^8.21.3",
-    "@tanstack/react-query": "5.90.21",
     "@tinymce/tinymce-react": "^6.0.0",
     "classnames": "2.5.1",
     "codemirror": "^6.0.0",
@@ -120,7 +120,7 @@
     "jest-canvas-mock": "^2.5.2",
     "jest-expect-message": "^1.1.3",
     "oxlint": "^1.42.0",
-    "oxlint-tsgolint": "^0.16.0",
+    "oxlint-tsgolint": "^0.17.0",
     "react-test-renderer": "^18.3.1",
     "redux-mock-store": "^1.5.4"
   }

src/authz/data/api.ts

@@ -5,7 +5,9 @@ import {
   PermissionValidationRequestItem,
   PermissionValidationResponseItem,
 } from '@src/authz/types';
-import { getApiUrl } from './utils';
+import { getConfig } from '@edx/frontend-platform';
+
+export const getAuthzApiUrl = (path: string) => `${getConfig().STUDIO_BASE_URL}/api/authz/${path || ''}`;
 
 export const validateUserPermissions = async (
   query: PermissionValidationQuery,
@@ -14,7 +16,7 @@ export const validateUserPermissions = async (
   const request: PermissionValidationRequestItem[] = Object.values(query);
 
   const { data }: { data: PermissionValidationResponseItem[] } = await getAuthenticatedHttpClient().post(
-    getApiUrl('/api/authz/v1/permissions/validate/me'),
+    getAuthzApiUrl('v1/permissions/validate/me'),
     request,
   );
 

src/constants.ts

@@ -116,3 +116,9 @@ export const BROKEN = 'broken';
 export const LOCKED = 'locked';
 
 export const MANUAL = 'manual';
+
+export enum AgreementGated {
+  UPLOAD = 'upload',
+  UPLOAD_VIDEOS = 'upload.videos',
+  UPLOAD_FILES = 'upload.files',
+}

src/course-checklist/ChecklistSection/ChecklistItemBody.jsx

@@ -5,24 +5,21 @@ import { ActionRow, Button, Icon } from '@openedx/paragon';
 import { CheckCircle, RadioButtonUnchecked } from '@openedx/paragon/icons';
 import { getConfig } from '@edx/frontend-platform';
 
-import { useWaffleFlags } from '../../data/apiHooks';
+import { useWaffleFlags } from '@src/data/apiHooks';
+
 import messages from './messages';
 
 const getUpdateLinks = (courseId, waffleFlags) => {
   const baseUrl = getConfig().STUDIO_BASE_URL;
-  const isLegacyGradingUrl = !waffleFlags.useNewGradingPage;
   const isLegacyCertificateUrl = !waffleFlags.useNewCertificatesPage;
-  const isLegacyCourseDatesUrl = !waffleFlags.useNewScheduleDetailsPage;
   const isLegacyOutlineUrl = !waffleFlags.useNewCourseOutlinePage;
 
   return {
     welcomeMessage: `/course/${courseId}/course_info`,
-    gradingPolicy: isLegacyGradingUrl
-      ? `${baseUrl}/settings/grading/${courseId}` : `/course/${courseId}/settings/grading`,
+    gradingPolicy: `/course/${courseId}/settings/grading`,
     certificate: isLegacyCertificateUrl
       ? `${baseUrl}/certificates/${courseId}` : `/course/${courseId}/certificates`,
-    courseDates: isLegacyCourseDatesUrl
-      ? `${baseUrl}/settings/details/${courseId}#schedule` : `/course/${courseId}/settings/details/#schedule`,
+    courseDates: `/course/${courseId}/settings/details/#schedule`,
     proctoringEmail: `${baseUrl}/pages-and-resources/proctoring/settings`,
     outline: isLegacyOutlineUrl ? `${baseUrl}/course/${courseId}` : `/course/${courseId}`,
   };

src/course-checklist/ChecklistSection/ChecklistSection.test.jsx

@@ -2,8 +2,9 @@ import { camelCaseObject } from '@edx/frontend-platform';
 
 import {
   initializeMocks, render, screen, within,
-} from '../../testUtils';
-import { getApiWaffleFlagsUrl } from '../../data/api';
+} from '@src/testUtils';
+import { getApiWaffleFlagsUrl } from '@src/data/api';
+
 import { generateCourseLaunchData } from '../factories/mockApiResponses';
 import { checklistItems } from './utils/courseChecklistData';
 import messages from './messages';
@@ -36,9 +37,7 @@ describe('ChecklistSection', () => {
     axiosMock
       .onGet(getApiWaffleFlagsUrl(courseId))
       .reply(200, {
-        useNewGradingPage: true,
         useNewCertificatesPage: true,
-        useNewScheduleDetailsPage: true,
         useNewCourseOutlinePage: true,
       });
   });

src/course-outline/CourseOutline.tsx

@@ -498,6 +498,11 @@ const CourseOutline = () => {
           isOpen={isConfigureModalOpen}
           onClose={handleConfigureModalClose}
           onConfigureSubmit={handleConfigureItemSubmit}
+          /**
+           * Only sections need overflow visible (for the Release date datepicker, fixed in #2901);
+           * enabling it for subsection/unit modals causes the Visibility tab background to clip.
+           */
+          isOverflowVisible={itemCategory === COURSE_BLOCK_NAMES.chapter.id}
           currentItemData={currentItemData}
           enableProctoredExams={enableProctoredExams}
           enableTimedExams={enableTimedExams}

src/course-outline/outline-sidebar/info-sidebar/CourseInfoSidebar.tsx

@@ -1,34 +1,36 @@
+import { getConfig } from '@edx/frontend-platform';
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { useToggle } from '@openedx/paragon';
+import {
+  Tab,
+  Tabs,
+  useToggle,
+} from '@openedx/paragon';
 import { SchoolOutline, Tag } from '@openedx/paragon/icons';
 
+import { useUserPermissions } from '@src/authz/data/apiHooks';
+import { COURSE_PERMISSIONS } from '@src/authz/constants';
 import { ContentTagsDrawerSheet, ContentTagsSnippet } from '@src/content-tags-drawer';
+import { useCourseSettings, useWaffleFlags } from '@src/data/apiHooks';
 import { ComponentCountSnippet } from '@src/generic/block-type-utils';
+import { HelpSidebarLink, otherLinkURLParams, messages as helpSidebarMessages } from '@src/generic/help-sidebar';
+import { SidebarContent, SidebarSection, SidebarTitle } from '@src/generic/sidebar';
 import { useGetBlockTypes } from '@src/search-manager';
 import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
 
-import { SidebarContent, SidebarSection, SidebarTitle } from '@src/generic/sidebar';
-
 import { useCourseDetails } from '@src/course-outline/data/apiHooks';
 import messages from '../messages';
 
-export const CourseInfoSidebar = () => {
+const DetailsTab = () => {
   const intl = useIntl();
-  const { courseId } = useCourseAuthoringContext();
-  const { data: courseDetails } = useCourseDetails(courseId);
 
+  const { courseId } = useCourseAuthoringContext();
   const { data: componentData } = useGetBlockTypes(
     [`context_key = "${courseId}"`],
   );
-
   const [isManageTagsDrawerOpen, openManageTagsDrawer, closeManageTagsDrawer] = useToggle(false);
 
   return (
-    <div>
-      <SidebarTitle
-        title={courseDetails?.title || ''}
-        icon={SchoolOutline}
-      />
+    <>
       <SidebarContent>
         <SidebarSection
           title={intl.formatMessage(messages.sidebarSectionSummary)}
@@ -54,6 +56,122 @@ export const CourseInfoSidebar = () => {
         onClose={closeManageTagsDrawer}
         showSheet={isManageTagsDrawerOpen}
       />
-    </div>
+    </>
+  );
+};
+
+const SettingsTab = () => {
+  const intl = useIntl();
+  const { courseId } = useCourseAuthoringContext();
+  const { data: courseSettingsData } = useCourseSettings(courseId);
+
+  const {
+    grading,
+    courseTeam,
+    advancedSettings,
+    scheduleAndDetails,
+    groupConfigurations,
+  } = otherLinkURLParams;
+  const waffleFlags = useWaffleFlags(courseId);
+
+  const proctoredExamSettingsUrl = courseSettingsData?.mfeProctoredExamSettingsUrl;
+
+  /*
+    AuthZ for Course Authoring
+    If authz.enable_course_authoring flag is enabled, validate permissions using AuthZ API.
+  */
+  const isAuthzEnabled = waffleFlags.enableAuthzCourseAuthoring;
+  const { isLoading: isLoadingUserPermissions, data: userPermissions } = useUserPermissions({
+    canManageAdvancedSettings: {
+      action: COURSE_PERMISSIONS.MANAGE_ADVANCED_SETTINGS,
+      scope: courseId,
+    },
+  }, isAuthzEnabled);
+
+  // If it's still loading, don't show the Advanced Settings link, otherwise, use the permission to decide
+  const authzCanManageAdvancedSettings = isLoadingUserPermissions
+    ? false
+    : !!userPermissions?.canManageAdvancedSettings;
+
+  // When authz is enabled, use permission, otherwise it's always allowed (legacy behavior)
+  const canManageAdvancedSettings = isAuthzEnabled ? authzCanManageAdvancedSettings : true;
+
+  return (
+    <SidebarSection
+      title={intl.formatMessage(messages.settingsTabText)}
+    >
+      <HelpSidebarLink
+        as="span"
+        pathToPage={`/course/${courseId}/${scheduleAndDetails}`}
+        title={intl.formatMessage(
+          helpSidebarMessages.sidebarLinkToScheduleAndDetails,
+        )}
+        isNewPage
+      />
+      <HelpSidebarLink
+        as="span"
+        pathToPage={`/course/${courseId}/${grading}`}
+        title={intl.formatMessage(helpSidebarMessages.sidebarLinkToGrading)}
+        isNewPage
+      />
+      <HelpSidebarLink
+        as="span"
+        pathToPage={`/course/${courseId}/${courseTeam}`}
+        title={intl.formatMessage(helpSidebarMessages.sidebarLinkToCourseTeam)}
+        isNewPage
+      />
+      <HelpSidebarLink
+        as="span"
+        pathToPage={`/course/${courseId}/${groupConfigurations}`}
+        title={intl.formatMessage(helpSidebarMessages.sidebarLinkToGroupConfigurations)}
+        isNewPage
+      />
+      {canManageAdvancedSettings && (
+        <HelpSidebarLink
+          as="span"
+          pathToPage={`/course/${courseId}/${advancedSettings}`}
+          title={intl.formatMessage(helpSidebarMessages.sidebarLinkToAdvancedSettings)}
+          isNewPage
+        />
+      )}
+      {proctoredExamSettingsUrl && (
+        <HelpSidebarLink
+          as="span"
+          pathToPage={proctoredExamSettingsUrl}
+          title={intl.formatMessage(
+            helpSidebarMessages.sidebarLinkToProctoredExamSettings,
+          )}
+          isNewPage
+        />
+      )}
+    </SidebarSection>
+  );
+};
+
+export const CourseInfoSidebar = () => {
+  const intl = useIntl();
+  const { courseId } = useCourseAuthoringContext();
+  const { data: courseDetails } = useCourseDetails(courseId);
+
+  return (
+    <>
+      <SidebarTitle
+        title={courseDetails?.title || ''}
+        icon={SchoolOutline}
+      />
+      <Tabs
+        variant="tabs"
+        className="my-2 mx-n3.5"
+        id="course-info-tabs"
+        mountOnEnter
+      >
+        <Tab eventKey="info" title={intl.formatMessage(messages.infoTabText)}>
+          <DetailsTab />
+        </Tab>
+        <Tab eventKey="settings" title={intl.formatMessage(messages.settingsTabText)}>
+          <SettingsTab />
+        </Tab>
+      </Tabs>
+    </>
   );
 };

src/course-outline/outline-sidebar/info-sidebar/InfoSidebar.test.tsx

@@ -1,5 +1,6 @@
 import { initializeMocks, render, screen } from '@src/testUtils';
-import { SelectionState } from '@src/data/types';
+import { getCourseSettingsApiUrl } from '@src/data/api';
+import type { SelectionState } from '@src/data/types';
 import { OutlineSidebarProvider } from '@src/course-outline/outline-sidebar/OutlineSidebarContext';
 import { getXBlockApiUrl } from '@src/course-outline/data/api';
 import userEvent from '@testing-library/user-event';
@@ -22,10 +23,12 @@ jest.mock('@src/course-outline/data/apiHooks', () => ({
   }),
 }));
 
+const courseId = '5';
+
 const openPublishModal = jest.fn();
 jest.mock('@src/CourseAuthoringContext', () => ({
   useCourseAuthoringContext: () => ({
-    courseId: 5,
+    courseId,
     setCurrentSelection: jest.fn(),
     openPublishModal,
     getUnitUrl: jest.fn(),
@@ -50,6 +53,32 @@ describe('InfoSidebar component', () => {
     expect(await screen.findByText('Course name')).toBeInTheDocument();
   });
 
+  it('shows the settings link for the course', async () => {
+    const user = userEvent.setup();
+    renderComponent();
+    await user.click((await screen.findByRole('tab', { name: 'Settings' })));
+    const links = await screen.findAllByRole('link');
+    expect(links).toHaveLength(5);
+    expect(links[0]).toHaveTextContent('Schedule & details');
+    expect(links[1]).toHaveTextContent('Grading');
+    expect(links[2]).toHaveTextContent('Course team');
+    expect(links[3]).toHaveTextContent('Group configurations');
+    expect(links[4]).toHaveTextContent('Advanced settings');
+  });
+
+  it('shows the proctored exam settings link for the course if it exists', async () => {
+    const user = userEvent.setup();
+    const courseSettingsData = {
+      mfeProctoredExamSettingsUrl: 'https://example.com/proctored-exam-settings',
+    };
+    axiosMock
+      .onGet(getCourseSettingsApiUrl(courseId))
+      .reply(200, courseSettingsData);
+    renderComponent();
+    await user.click(await screen.findByRole('tab', { name: 'Settings' }));
+    expect(await screen.findByRole('link', { name: 'Proctored exam settings' })).toBeInTheDocument();
+  });
+
   it('renders InfoSidebar with section info', async () => {
     const user = userEvent.setup();
     selectedContainerState = {

src/course-outline/page-alerts/PageAlerts.jsx

@@ -15,6 +15,8 @@ import { useState } from 'react';
 import { useDispatch } from 'react-redux';
 import { Link, useNavigate } from 'react-router-dom';
 import { usePasteFileNotices } from '@src/course-outline/data/apiHooks';
+import { AlertAgreementGatedFeature } from '@src/generic/agreement-gated-feature';
+import { AgreementGated } from '../../constants';
 import CourseOutlinePageAlertsSlot from '../../plugin-slots/CourseOutlinePageAlertsSlot';
 import advancedSettingsMessages from '../../advanced-settings/messages';
 import { OutOfSyncAlert } from '../../course-libraries/OutOfSyncAlert';
@@ -441,6 +443,9 @@ const PageAlerts = ({
       {conflictingFilesPasteAlert()}
       {newFilesPasteAlert()}
       {renderOutOfSyncAlert()}
+      <AlertAgreementGatedFeature
+        gatingTypes={[AgreementGated.UPLOAD, AgreementGated.UPLOAD_VIDEOS, AgreementGated.UPLOAD_FILES]}
+      />
       <CourseOutlinePageAlertsSlot />
     </>
   );