{intl.formatMessage(messages.heading)}
diff --git a/src/files-and-videos/videos-page/CourseVideosTable.tsx b/src/files-and-videos/videos-page/CourseVideosTable.tsx
index d1667ef13f..fe14b2645b 100644
--- a/src/files-and-videos/videos-page/CourseVideosTable.tsx
+++ b/src/files-and-videos/videos-page/CourseVideosTable.tsx
@@ -2,6 +2,7 @@ import { useIntl } from '@edx/frontend-platform/i18n';
import {
ActionRow, Button, CheckboxFilter, useToggle,
} from '@openedx/paragon';
+import { AgreementGated } from '@src/constants';
import { RequestStatus } from '@src/data/constants';
import {
ActiveColumn,
@@ -29,6 +30,7 @@ import messages from '@src/files-and-videos/videos-page/messages';
import TranscriptSettings from '@src/files-and-videos/videos-page/transcript-settings';
import UploadModal from '@src/files-and-videos/videos-page/upload-modal';
import VideoThumbnail from '@src/files-and-videos/videos-page/VideoThumbnail';
+import { GatedComponentWrapper } from '@src/generic/agreement-gated-feature';
import { useModels } from '@src/generic/model-store';
import { DeprecatedReduxState } from '@src/store';
import React, { useEffect, useRef } from 'react';
@@ -224,23 +226,24 @@ export const CourseVideosTable = () => {
];
return (
- <>
-
-
- {isVideoTranscriptEnabled ? (
-
- ) : null}
-
- {
+
+ <>
+
+
+ {isVideoTranscriptEnabled ? (
+
+ ) : null}
+
+ {
loadingStatus !== RequestStatus.FAILED && (
<>
{isVideoTranscriptEnabled && (
@@ -275,14 +278,15 @@ export const CourseVideosTable = () => {
)
}
-
-
+
+
+
);
};
diff --git a/src/files-and-videos/videos-page/VideosPage.tsx b/src/files-and-videos/videos-page/VideosPage.tsx
index 53d32322c8..b2faa26e07 100644
--- a/src/files-and-videos/videos-page/VideosPage.tsx
+++ b/src/files-and-videos/videos-page/VideosPage.tsx
@@ -1,4 +1,6 @@
-import { useEffect } from 'react';
+import { AgreementGated } from '@src/constants';
+import { AlertAgreementGatedFeature } from '@src/generic/agreement-gated-feature';
+import React, { useEffect } from 'react';
import { Helmet } from 'react-helmet';
import { useDispatch, useSelector } from 'react-redux';
@@ -57,6 +59,9 @@ const VideosPage = () => {
updateFileStatus={updateVideoStatus}
loadingStatus={loadingStatus}
/>
+
{intl.formatMessage(messages.heading)}
diff --git a/src/generic/agreement-gated-feature/AlertAgreementGatedFeature.test.tsx b/src/generic/agreement-gated-feature/AlertAgreementGatedFeature.test.tsx
new file mode 100644
index 0000000000..78c525b66f
--- /dev/null
+++ b/src/generic/agreement-gated-feature/AlertAgreementGatedFeature.test.tsx
@@ -0,0 +1,142 @@
+import { initializeMockApp, mergeConfig } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { AppProvider } from '@edx/frontend-platform/react';
+import { AgreementGated } from '@src/constants';
+import { getUserAgreementApi, getUserAgreementRecordApi } from '@src/data/api';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import MockAdapter from 'axios-mock-adapter';
+import React from 'react';
+import { AlertAgreementGatedFeature } from './AlertAgreementGatedFeature';
+
+const queryClient = new QueryClient({
+ defaultOptions: {
+ queries: {
+ retry: false,
+ },
+ },
+});
+
+async function renderComponent(gatingTypes: AgreementGated[]) {
+ return render(
+
+
+
+ ,
+ ,
+ );
+}
+
+describe('AlertAgreementGatedFeature', () => {
+ let axiosMock;
+ beforeAll(async () => {
+ initializeMockApp({
+ authenticatedUser: {
+ userId: 3,
+ username: 'abc123',
+ administrator: false,
+ roles: [],
+ },
+ });
+ axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+ });
+ beforeEach(() => {
+ axiosMock.onGet(getUserAgreementApi('agreement1')).reply(200, {
+ type: 'agreement1',
+ name: 'agreement1',
+ summary: 'summary1',
+ has_text: true,
+ url: 'https://example.com/agreement1',
+ updated: '2023-01-01T00:00:00Z',
+ });
+ axiosMock.onGet(getUserAgreementApi('agreement2')).reply(200, {
+ type: 'agreement2',
+ name: 'agreement2',
+ summary: 'summary2',
+ has_text: true,
+ url: 'https://example.com/agreement2',
+ });
+ axiosMock.onGet(getUserAgreementApi('agreement3')).reply(404);
+ axiosMock.onGet(getUserAgreementRecordApi('agreement1')).reply(200, {});
+ axiosMock.onGet(getUserAgreementRecordApi('agreement2')).reply(200, {});
+ mergeConfig({
+ AGREEMENT_GATING: {
+ [AgreementGated.UPLOAD]: ['agreement1', 'agreement2'],
+ [AgreementGated.UPLOAD_VIDEOS]: ['agreement2'],
+ },
+ });
+ });
+ afterEach(() => {
+ axiosMock.reset();
+ });
+
+ it('renders no alerts when gatingTypes is empty', async () => {
+ await renderComponent([]);
+ await waitFor(() => expect(queryClient.isFetching()).toBe(0));
+ expect(screen.queryByRole('alert')).not.toBeInTheDocument();
+ });
+
+ it('renders no alerts when gatingTypes have no associated agreement', async () => {
+ await renderComponent([AgreementGated.UPLOAD_FILES]);
+ await waitFor(() => expect(queryClient.isFetching()).toBe(0));
+ expect(screen.queryByRole('alert')).not.toBeInTheDocument();
+ });
+
+ it('renders no alerts when associated agreement does not exist', async () => {
+ mergeConfig({
+ AGREEMENT_GATING: {
+ [AgreementGated.UPLOAD_FILES]: ['agreement3'],
+ },
+ });
+ await renderComponent([AgreementGated.UPLOAD_FILES]);
+ expect(screen.queryByRole('alert')).not.toBeInTheDocument();
+ });
+
+ it('renders an alert for each agreement type associated with the gating types', async () => {
+ const gatingTypes = [AgreementGated.UPLOAD];
+ await renderComponent(gatingTypes);
+ await waitFor(() => expect(queryClient.isFetching()).toBe(0));
+
+ expect(screen.queryAllByRole('alert')).toHaveLength(2);
+ expect(screen.getByText('agreement1')).toBeInTheDocument();
+ expect(screen.getByText('summary1')).toBeInTheDocument();
+ expect(screen.getByText('agreement2')).toBeInTheDocument();
+ expect(screen.getByText('summary2')).toBeInTheDocument();
+ });
+
+ it('renders skips alerts for agreements that have already been accepted', async () => {
+ const gatingTypes = [AgreementGated.UPLOAD];
+ axiosMock.onGet(getUserAgreementRecordApi('agreement2')).reply(200, { is_current: true });
+ await renderComponent(gatingTypes);
+ await waitFor(() => expect(queryClient.isFetching()).toBe(0));
+
+ expect(screen.queryAllByRole('alert')).toHaveLength(1);
+ expect(screen.getByText('agreement1')).toBeInTheDocument();
+ expect(screen.getByText('summary1')).toBeInTheDocument();
+ expect(screen.queryByText('agreement2')).not.toBeInTheDocument();
+ expect(screen.queryByText('summary2')).not.toBeInTheDocument();
+ });
+
+ it('does not duplicate alert if multiple gating types have the same agreement type', async () => {
+ const gatingTypes = [AgreementGated.UPLOAD, AgreementGated.UPLOAD_FILES];
+ await renderComponent(gatingTypes);
+ await waitFor(() => expect(queryClient.isFetching()).toBe(0));
+
+ expect(screen.queryAllByRole('alert')).toHaveLength(2);
+ expect(screen.getByText('agreement1')).toBeInTheDocument();
+ expect(screen.getByText('summary1')).toBeInTheDocument();
+ expect(screen.getByText('agreement2')).toBeInTheDocument();
+ expect(screen.getByText('summary2')).toBeInTheDocument();
+ });
+
+ it('posts a request to mark acceptance when user clicks Agree', async () => {
+ const user = userEvent.setup();
+ const gatingTypes = [AgreementGated.UPLOAD_VIDEOS];
+ await renderComponent(gatingTypes);
+ await waitFor(() => expect(queryClient.isFetching()).toBe(0));
+ axiosMock.onPost(new RegExp(getUserAgreementRecordApi('*'))).reply(201, {});
+ await user.click(screen.getByRole('button', { name: 'Agree' }));
+ expect(axiosMock.history.post[0].url).toBe(getUserAgreementRecordApi('agreement2'));
+ });
+});
diff --git a/src/generic/agreement-gated-feature/AlertAgreementGatedFeature.tsx b/src/generic/agreement-gated-feature/AlertAgreementGatedFeature.tsx
new file mode 100644
index 0000000000..6df1f30321
--- /dev/null
+++ b/src/generic/agreement-gated-feature/AlertAgreementGatedFeature.tsx
@@ -0,0 +1,66 @@
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Alert, Button, Hyperlink } from '@openedx/paragon';
+import { Policy } from '@openedx/paragon/icons';
+import { AgreementGated } from '@src/constants';
+import {
+ getGatingAgreementTypes,
+ useUserAgreement,
+ useUserAgreementRecord,
+ useUserAgreementRecordUpdater,
+} from '@src/data/apiHooks';
+import messages from './messages';
+
+const AlertAgreement = ({ agreementType }: { agreementType: string }) => {
+ const intl = useIntl();
+ const { data, isLoading, isError } = useUserAgreement(agreementType);
+ const mutation = useUserAgreementRecordUpdater(agreementType);
+ const showAlert = data && !isLoading && !isError;
+ const handleAcceptAgreement = async () => {
+ try {
+ await mutation.mutateAsync();
+ } catch (e) {
+ // eslint-disable-next-line no-console
+ console.error('Error accepting agreement', e);
+ }
+ };
+ if (!showAlert) { return null; }
+ const { url, name, summary } = data;
+ return (
+
{intl.formatMessage(messages.learnMoreLinkLabel)},
+ ,
+ ]}
+ >
+ {name}
+ {summary}
+
+ );
+};
+
+const AlertAgreementWrapper = (
+ { agreementType }: { agreementType: string },
+) => {
+ const { data, isLoading, isError } = useUserAgreementRecord(agreementType);
+ const showAlert = !data?.isCurrent && !isLoading && !isError;
+ if (!showAlert) { return null; }
+ return
;
+};
+
+export const AlertAgreementGatedFeature = (
+ { gatingTypes }: { gatingTypes: AgreementGated[] },
+) => {
+ const agreementTypes = getGatingAgreementTypes(gatingTypes);
+ return (
+ <>
+ {agreementTypes.map((agreementType) => (
+
+ ))}
+
+ );
+};
diff --git a/src/generic/agreement-gated-feature/GatedComponentWrapper.test.tsx b/src/generic/agreement-gated-feature/GatedComponentWrapper.test.tsx
new file mode 100644
index 0000000000..bd00233f92
--- /dev/null
+++ b/src/generic/agreement-gated-feature/GatedComponentWrapper.test.tsx
@@ -0,0 +1,79 @@
+import { initializeMockApp, mergeConfig } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { AppProvider } from '@edx/frontend-platform/react';
+import { AgreementGated } from '@src/constants';
+import { getUserAgreementRecordApi } from '@src/data/api';
+import { GatedComponentWrapper } from '@src/generic/agreement-gated-feature/GatedComponentWrapper';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { render, screen, waitFor } from '@testing-library/react';
+import MockAdapter from 'axios-mock-adapter';
+import React from 'react';
+
+const queryClient = new QueryClient({
+ defaultOptions: {
+ queries: {
+ retry: false,
+ },
+ },
+});
+
+async function renderComponent(gatingTypes: AgreementGated[]) {
+ return render(
+
+
+
+
+
+ ,
+ ,
+ );
+}
+
+describe('GatedComponentWrapper', () => {
+ let axiosMock;
+ beforeAll(async () => {
+ initializeMockApp({
+ authenticatedUser: {
+ userId: 3,
+ username: 'abc123',
+ administrator: false,
+ roles: [],
+ },
+ });
+ axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+ });
+ beforeEach(() => {
+ axiosMock.onGet(getUserAgreementRecordApi('agreement1')).reply(200, {});
+ axiosMock.onGet(getUserAgreementRecordApi('agreement2')).reply(200, { is_current: true });
+ mergeConfig({
+ AGREEMENT_GATING: {
+ [AgreementGated.UPLOAD]: ['agreement1', 'agreement2'],
+ [AgreementGated.UPLOAD_VIDEOS]: ['agreement2'],
+ [AgreementGated.UPLOAD_FILES]: ['agreement1'],
+ },
+ });
+ });
+ afterEach(() => {
+ axiosMock.reset();
+ });
+
+ it('applies no gating when gatingTypes is empty', async () => {
+ await renderComponent([]);
+ await waitFor(() => expect(queryClient.isFetching()).toBe(0));
+ expect(screen.getByRole('button').parentNode).not.toHaveAttribute('aria-disabled', 'true');
+ });
+
+ it('applies no gating when associated agreement has been accepted', async () => {
+ await renderComponent([AgreementGated.UPLOAD_VIDEOS]);
+ await waitFor(() => expect(queryClient.isFetching()).toBe(0));
+ expect(screen.getByRole('button').parentNode).not.toHaveAttribute('aria-disabled', 'true');
+ });
+
+ it('applies gating when associated agreement has not been accepted', async () => {
+ await renderComponent([AgreementGated.UPLOAD_FILES]);
+ await waitFor(() => expect(queryClient.isFetching()).toBe(0));
+ expect(screen.getByRole('button').parentNode).toHaveAttribute('aria-disabled', 'true');
+ });
+});
diff --git a/src/generic/agreement-gated-feature/GatedComponentWrapper.tsx b/src/generic/agreement-gated-feature/GatedComponentWrapper.tsx
new file mode 100644
index 0000000000..bddd352e40
--- /dev/null
+++ b/src/generic/agreement-gated-feature/GatedComponentWrapper.tsx
@@ -0,0 +1,30 @@
+import { AgreementGated } from '@src/constants';
+import {
+ getGatingAgreementTypes,
+ useUserAgreementRecords,
+} from '@src/data/apiHooks';
+
+interface GatedComponentWrapperProps {
+ gatingTypes: AgreementGated[];
+ children: React.ReactElement;
+}
+
+export const GatedComponentWrapper = (
+ { gatingTypes, children }: GatedComponentWrapperProps,
+) => {
+ const agreementTypes = getGatingAgreementTypes(gatingTypes);
+ const results = useUserAgreementRecords(agreementTypes);
+ const isNotGated = results.every((result) => !!result?.data?.isCurrent);
+ return isNotGated ? children : (
+
+ {children}
+
+ );
+};
diff --git a/src/generic/agreement-gated-feature/index.ts b/src/generic/agreement-gated-feature/index.ts
new file mode 100644
index 0000000000..9c3265f27e
--- /dev/null
+++ b/src/generic/agreement-gated-feature/index.ts
@@ -0,0 +1,2 @@
+export { AlertAgreementGatedFeature } from './AlertAgreementGatedFeature';
+export { GatedComponentWrapper } from './GatedComponentWrapper';
diff --git a/src/generic/agreement-gated-feature/messages.ts b/src/generic/agreement-gated-feature/messages.ts
new file mode 100644
index 0000000000..c17ac47c75
--- /dev/null
+++ b/src/generic/agreement-gated-feature/messages.ts
@@ -0,0 +1,16 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+ agreeButtonLabel: {
+ id: 'authoring.agreement-gated-feature.agree',
+ defaultMessage: 'Agree',
+ description: 'The label for the Agree button on an alert asking users to agree with terms.',
+ },
+ learnMoreLinkLabel: {
+ id: 'authoring.agreement-gated-feature.learn-more',
+ defaultMessage: 'Learn more',
+ description: 'The label for a "learn more" link on an alert asking users to agree with terms.',
+ },
+});
+
+export default messages;
diff --git a/src/generic/configure-modal/ConfigureModal.tsx b/src/generic/configure-modal/ConfigureModal.tsx
index abf9b101f6..5b2ac38bba 100644
--- a/src/generic/configure-modal/ConfigureModal.tsx
+++ b/src/generic/configure-modal/ConfigureModal.tsx
@@ -28,6 +28,7 @@ interface Props {
currentItemData?: AccessManagedXBlockDataTypes,
isXBlockComponent?: boolean,
isSelfPaced?: boolean,
+ isOverflowVisible?: boolean,
}
const ConfigureModal = ({
@@ -39,6 +40,7 @@ const ConfigureModal = ({
enableTimedExams = false,
isXBlockComponent = false,
isSelfPaced,
+ isOverflowVisible = false,
}: Props) => {
const intl = useIntl();
@@ -298,7 +300,7 @@ const ConfigureModal = ({
onClose={onClose}
hasCloseButton
isFullscreenOnMobile
- isOverflowVisible
+ isOverflowVisible={isOverflowVisible}
>
diff --git a/src/generic/help-sidebar/HelpSidebar.test.jsx b/src/generic/help-sidebar/HelpSidebar.test.tsx
similarity index 98%
rename from src/generic/help-sidebar/HelpSidebar.test.jsx
rename to src/generic/help-sidebar/HelpSidebar.test.tsx
index 8f97c4478e..64eb6d9345 100644
--- a/src/generic/help-sidebar/HelpSidebar.test.jsx
+++ b/src/generic/help-sidebar/HelpSidebar.test.tsx
@@ -1,9 +1,9 @@
-// @ts-check
-
import { waitFor } from '@testing-library/react';
+
import { mockWaffleFlags } from '@src/data/apiHooks.mock';
import { useUserPermissions } from '@src/authz/data/apiHooks';
-import { initializeMocks, render } from '../../testUtils';
+import { initializeMocks, render } from '@src/testUtils';
+
import messages from './messages';
import { HelpSidebar } from '.';
diff --git a/src/generic/help-sidebar/HelpSidebar.jsx b/src/generic/help-sidebar/HelpSidebar.tsx
similarity index 64%
rename from src/generic/help-sidebar/HelpSidebar.jsx
rename to src/generic/help-sidebar/HelpSidebar.tsx
index 5a9745e8a8..074ab955e1 100644
--- a/src/generic/help-sidebar/HelpSidebar.jsx
+++ b/src/generic/help-sidebar/HelpSidebar.tsx
@@ -1,8 +1,7 @@
-import PropTypes from 'prop-types';
+import { type ReactNode } from 'react';
import { useLocation } from 'react-router-dom';
import classNames from 'classnames';
import { useIntl } from '@edx/frontend-platform/i18n';
-import { getConfig } from '@edx/frontend-platform';
import { useUserPermissions } from '@src/authz/data/apiHooks';
import { COURSE_PERMISSIONS } from '@src/authz/constants';
@@ -11,13 +10,21 @@ import { otherLinkURLParams } from './constants';
import messages from './messages';
import HelpSidebarLink from './HelpSidebarLink';
+interface HelpSidebarProps {
+ courseId: string;
+ showOtherSettings?: boolean;
+ proctoredExamSettingsUrl?: string;
+ children: ReactNode;
+ className?: string;
+}
+
const HelpSidebar = ({
courseId,
- showOtherSettings,
- proctoredExamSettingsUrl,
+ showOtherSettings = false,
+ proctoredExamSettingsUrl = '',
children,
className,
-}) => {
+}: HelpSidebarProps) => {
const intl = useIntl();
const { pathname } = useLocation();
const {
@@ -30,16 +37,6 @@ const HelpSidebar = ({
const waffleFlags = useWaffleFlags(courseId);
const showOtherLink = (params) => !pathname.includes(params);
- const generateLegacyURL = (urlParameter) => {
- const referObj = new URL(`${urlParameter}/${courseId}`, getConfig().STUDIO_BASE_URL);
- return referObj.href;
- };
-
- const scheduleAndDetailsDestination = generateLegacyURL(scheduleAndDetails);
- const gradingDestination = generateLegacyURL(grading);
- const courseTeamDestination = generateLegacyURL(courseTeam);
- const advancedSettingsDestination = generateLegacyURL(advancedSettings);
- const groupConfigurationsDestination = generateLegacyURL(groupConfigurations);
/*
AuthZ for Course Authoring
@@ -78,46 +75,41 @@ const HelpSidebar = ({
{showOtherLink(scheduleAndDetails) && (
)}
{showOtherLink(grading) && (
)}
{showOtherLink(courseTeam) && (
)}
{showOtherLink(groupConfigurations) && (
)}
{showOtherLink(advancedSettings) && canManageAdvancedSettings && (
)}
{proctoredExamSettingsUrl && (
@@ -137,19 +129,4 @@ const HelpSidebar = ({
);
};
-HelpSidebar.defaultProps = {
- proctoredExamSettingsUrl: '',
- className: undefined,
- courseId: undefined,
- showOtherSettings: false,
-};
-
-HelpSidebar.propTypes = {
- courseId: PropTypes.string,
- showOtherSettings: PropTypes.bool,
- proctoredExamSettingsUrl: PropTypes.string,
- children: PropTypes.node.isRequired,
- className: PropTypes.string,
-};
-
export default HelpSidebar;
diff --git a/src/generic/help-sidebar/HelpSidebarLink.jsx b/src/generic/help-sidebar/HelpSidebarLink.tsx
similarity index 64%
rename from src/generic/help-sidebar/HelpSidebarLink.jsx
rename to src/generic/help-sidebar/HelpSidebarLink.tsx
index 4a4ee91ac8..dd853c552f 100644
--- a/src/generic/help-sidebar/HelpSidebarLink.jsx
+++ b/src/generic/help-sidebar/HelpSidebarLink.tsx
@@ -1,10 +1,21 @@
+import React from 'react';
+
import { Link } from 'react-router-dom';
-import PropTypes from 'prop-types';
import { Hyperlink } from '@openedx/paragon';
+interface HelpSidebarLinkProps {
+ as?: React.ElementType;
+ isNewPage?: boolean;
+ pathToPage: string;
+ title: string;
+}
+
const HelpSidebarLink = ({
- as, pathToPage, title, isNewPage,
-}) => {
+ as = 'li',
+ isNewPage = true,
+ pathToPage,
+ title,
+}: HelpSidebarLinkProps) => {
const TagElement = as;
if (isNewPage) {
return (
@@ -29,16 +40,4 @@ const HelpSidebarLink = ({
);
};
-HelpSidebarLink.propTypes = {
- isNewPage: PropTypes.bool,
- pathToPage: PropTypes.string.isRequired,
- title: PropTypes.string.isRequired,
- as: PropTypes.string,
-};
-
-HelpSidebarLink.defaultProps = {
- as: 'li',
- isNewPage: true,
-};
-
export default HelpSidebarLink;
diff --git a/src/generic/help-sidebar/index.ts b/src/generic/help-sidebar/index.ts
index 7f0fc8374a..3b5b9d2463 100644
--- a/src/generic/help-sidebar/index.ts
+++ b/src/generic/help-sidebar/index.ts
@@ -1,2 +1,4 @@
export { default as HelpSidebar } from './HelpSidebar';
export { default as HelpSidebarLink } from './HelpSidebarLink';
+export { otherLinkURLParams } from './constants';
+export { default as messages } from './messages';
diff --git a/src/grading-settings/GradingSettings.jsx b/src/grading-settings/GradingSettings.jsx
index 56c0da6620..a359087db4 100644
--- a/src/grading-settings/GradingSettings.jsx
+++ b/src/grading-settings/GradingSettings.jsx
@@ -3,22 +3,23 @@ import {
Button, Container, Layout, StatefulButton,
} from '@openedx/paragon';
import { Add as IconAdd, CheckCircle, Warning } from '@openedx/paragon/icons';
-import {
- useCourseSettings,
- useGradingSettings,
- useGradingSettingUpdater,
-} from 'CourseAuthoring/grading-settings/data/apiHooks';
import { useEffect, useState } from 'react';
import { Helmet } from 'react-helmet';
+
import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
-import { STATEFUL_BUTTON_STATES } from '../constants';
-import AlertMessage from '../generic/alert-message';
-import InternetConnectionAlert from '../generic/internet-connection-alert';
+import { STATEFUL_BUTTON_STATES } from '@src/constants';
+import { useCourseSettings } from '@src/data/apiHooks';
+import ConnectionErrorAlert from '@src/generic/ConnectionErrorAlert';
+import SectionSubHeader from '@src/generic/section-sub-header';
+import SubHeader from '@src/generic/sub-header/SubHeader';
+import AlertMessage from '@src/generic/alert-message';
+import InternetConnectionAlert from '@src/generic/internet-connection-alert';
+import getPageHeadTitle from '@src/generic/utils';
-import ConnectionErrorAlert from '../generic/ConnectionErrorAlert';
-import SectionSubHeader from '../generic/section-sub-header';
-import SubHeader from '../generic/sub-header/SubHeader';
-import getPageHeadTitle from '../generic/utils';
+import {
+ useGradingSettings,
+ useGradingSettingUpdater,
+} from './data/apiHooks';
import AssignmentSection from './assignment-section';
import CreditSection from './credit-section';
import DeadlineSection from './deadline-section';
diff --git a/src/grading-settings/GradingSettings.test.jsx b/src/grading-settings/GradingSettings.test.jsx
index c524845acd..76a667de4c 100644
--- a/src/grading-settings/GradingSettings.test.jsx
+++ b/src/grading-settings/GradingSettings.test.jsx
@@ -2,9 +2,10 @@ import {
act, fireEvent, render, screen, initializeMocks,
} from '@src/testUtils';
import { CourseAuthoringProvider } from '@src/CourseAuthoringContext';
+import { getCourseSettingsApiUrl } from '@src/data/api';
import gradingSettings from './__mocks__/gradingSettings';
-import { getCourseSettingsApiUrl, getGradingSettingsApiUrl } from './data/api';
+import { getGradingSettingsApiUrl } from './data/api';
import * as apiHooks from './data/apiHooks';
import GradingSettings from './GradingSettings';
import messages from './messages';
diff --git a/src/grading-settings/data/api.js b/src/grading-settings/data/api.js
index 8e73c720bb..d21b128f64 100644
--- a/src/grading-settings/data/api.js
+++ b/src/grading-settings/data/api.js
@@ -5,7 +5,6 @@ import { deepConvertingKeysToCamelCase, deepConvertingKeysToSnakeCase } from '..
const getApiBaseUrl = () => getConfig().STUDIO_BASE_URL;
export const getGradingSettingsApiUrl = (courseId) => `${getApiBaseUrl()}/api/contentstore/v1/course_grading/${courseId}`;
-export const getCourseSettingsApiUrl = (courseId) => `${getApiBaseUrl()}/api/contentstore/v1/course_settings/${courseId}`;
/**
* Get's grading setting for a course.
@@ -29,14 +28,3 @@ export async function sendGradingSettings(courseId, settings) {
.post(getGradingSettingsApiUrl(courseId), deepConvertingKeysToSnakeCase(settings));
return camelCaseObject(data);
}
-
-/**
- * Get course settings.
- * @param {string} courseId
- * @returns {Promise
+ );
+};
+
+interface ActionsMenuProps {
+ rowData: TagListRowData;
+ startSubtagDraft: () => void;
+ disableAddSubtag: boolean;
+}
+
+const ActionsMenu = ({ rowData, startSubtagDraft, disableAddSubtag }: ActionsMenuProps) => {
+ const intl = useIntl();
+
+ return (
+
+
+
+
+ {intl.formatMessage(messages.addSubtag)}
+
+
+
+ );
+};
+
function getColumns({
- intl,
setIsCreatingTopTag,
setCreatingParentId,
setEditingRowId,
@@ -62,10 +148,12 @@ function getColumns({
}: GetColumnsArgs): TreeColumnDef[] {
const canAddSubtag = (row: Row
) => row.depth < maxDepth;
const draftInProgressHintId = 'tag-list-draft-in-progress-hint';
+ const intl = useIntl();
return [
{
- header: intl.formatMessage(messages.tagListColumnValueHeader),
+ id: 'valueColumn',
+ header: () => ,
cell: ({ row }) => {
const {
value,
@@ -79,27 +167,23 @@ function getColumns({
);
},
},
+ {
+ id: 'count',
+ header: intl.formatMessage(messages.tagListColumnCountHeader),
+ cell: UsageCountDisplay,
+ },
{
id: 'actions',
header: () => (
-
- {intl.formatMessage(messages.createNewTagTooltip)}
}
- src={AddCircle}
- alt={intl.formatMessage(messages.createTagButtonLabel)}
- size="inline"
- onClick={() => {
- onStartDraft();
- setDraftError('');
- setIsCreatingTopTag(true);
- setEditingRowId(null);
- setActiveActionMenuRowId(null);
- }}
- disabled={hasOpenDraft}
- aria-describedby={hasOpenDraft ? draftInProgressHintId : undefined}
- />
-