feat: adds agreement-gated feature with support across files and videos pages

Adds new generic components for gating certain features based on acceptance or
acknowledgement of user agreements. It adds one alert that can be displayed
where a feature (such as uploading) is blocked based on user agreeement, and it
adds a wrapper component that disables the components inside it till the
agreement has been accepted.

Author: xitij2000

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-outline/page-alerts/PageAlerts.jsx

@@ -14,6 +14,8 @@ import PropTypes from 'prop-types';
 import React, { useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { Link, useNavigate } from 'react-router-dom';
+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';
@@ -438,6 +440,9 @@ const PageAlerts = ({
       {conflictingFilesPasteAlert()}
       {newFilesPasteAlert()}
       {renderOutOfSyncAlert()}
+      <AlertAgreementGatedFeature
+        gatingTypes={[AgreementGated.UPLOAD, AgreementGated.UPLOAD_VIDEOS, AgreementGated.UPLOAD_FILES]}
+      />
       <CourseOutlinePageAlertsSlot />
     </>
   );

src/data/api.ts

@@ -208,3 +208,25 @@ export async function getPreviewModulestoreMigration(
   const { data } = await client.get(getPreviewModulestoreMigrationUrl(), { params });
   return camelCaseObject(data);
 }
+
+export const getUserAgreementRecordApi = (agreementType: string) => `${getConfig().LMS_BASE_URL}/api/agreements/v1/agreement_record/${agreementType}`;
+
+export async function getUserAgreementRecord(agreementType: string) {
+  const client = getAuthenticatedHttpClient();
+  const { data } = await client.get(getUserAgreementRecordApi(agreementType));
+  return camelCaseObject(data);
+}
+
+export async function updateUserAgreementRecord(agreementType: string) {
+  const client = getAuthenticatedHttpClient();
+  const { data } = await client.post(getUserAgreementRecordApi(agreementType));
+  return camelCaseObject(data);
+}
+
+export const getUserAgreementApi = (agreementType: string) => `${getConfig().LMS_BASE_URL}/api/agreements/v1/agreement/${agreementType}/`;
+
+export async function getUserAgreement(agreementType: string) {
+  const client = getAuthenticatedHttpClient();
+  const { data } = await client.get(getUserAgreementApi(agreementType));
+  return camelCaseObject(data);
+}

src/data/apiHooks.ts

@@ -1,16 +1,19 @@
-import {
-  skipToken, useMutation, useQuery, useQueryClient,
-} from '@tanstack/react-query';
+import { getConfig } from '@edx/frontend-platform';
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
+import { UserAgreement, UserAgreementRecord } from '@src/data/types';
 import { libraryAuthoringQueryKeys } from '@src/library-authoring/data/apiHooks';
 import {
-  getWaffleFlags,
-  waffleFlagDefaults,
-  bulkModulestoreMigrate,
-  getModulestoreMigrationStatus,
+  skipToken, useMutation, useQueries, useQuery, useQueryClient, UseQueryOptions,
+} from '@tanstack/react-query';
+import {
   BulkMigrateRequestData,
+  bulkModulestoreMigrate,
   getCourseDetails,
-  getPreviewModulestoreMigration,
+  getModulestoreMigrationStatus,
+  getPreviewModulestoreMigration, getUserAgreement,
+  getUserAgreementRecord,
+  getWaffleFlags, updateUserAgreementRecord,
+  waffleFlagDefaults,
 } from './api';
 import { RequestStatus, RequestStatusType } from './constants';
 
@@ -130,3 +133,47 @@ export const useCourseDetails = (courseId: string) => {
     status,
   };
 };
+
+export const getGatingAgreementTypes = (gatingTypes: string[]): string[] => (
+  [...new Set(
+    gatingTypes
+      .flatMap(gatingType => getConfig().AGREEMENT_GATING?.[gatingType])
+      .filter(item => Boolean(item)),
+  )]
+);
+
+export const useUserAgreementRecord = (agreementType:string) => (
+  useQuery<UserAgreementRecord, Error>({
+    queryKey: ['agreement-record', agreementType],
+    queryFn: () => getUserAgreementRecord(agreementType),
+    retry: false,
+  })
+);
+
+export const useUserAgreementRecords = (agreementTypes:string[]) => (
+  useQueries({
+    queries: agreementTypes.map<UseQueryOptions<UserAgreementRecord, Error>>(agreementType => ({
+      queryKey: ['agreement-record', agreementType],
+      queryFn: () => getUserAgreementRecord(agreementType),
+      retry: false,
+    })),
+  })
+);
+
+export const useUserAgreementRecordUpdater = (agreementType:string) => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async () => updateUserAgreementRecord(agreementType),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['agreement-record', agreementType] });
+    },
+  });
+};
+
+export const useUserAgreement = (agreementType:string) => (
+  useQuery<UserAgreement, Error>({
+    queryKey: ['agreements', agreementType],
+    queryFn: () => getUserAgreement(agreementType),
+    retry: false,
+  })
+);

src/data/types.ts

@@ -165,3 +165,19 @@ export type SelectionState = {
   sectionId?: string;
   subsectionId?: string;
 };
+
+export interface UserAgreementRecord {
+  username: string;
+  agreementType: string;
+  acceptedAt: string | null;
+  isCurrent: boolean;
+}
+
+export interface UserAgreement {
+  type: string;
+  name: string;
+  summary: string;
+  hasText: boolean;
+  url: string;
+  updated: string;
+}

src/files-and-videos/files-page/CourseFilesTable.tsx

@@ -1,5 +1,6 @@
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { CheckboxFilter } from '@openedx/paragon';
+import { AgreementGated, UPLOAD_FILE_MAX_SIZE } from '@src/constants';
 import {
   addAssetFile,
   deleteAssetFile,
@@ -20,13 +21,13 @@ import {
   FileTable,
   ThumbnailColumn,
 } from '@src/files-and-videos/generic';
+import { GatedComponentWrapper } from '@src/generic/agreement-gated-feature';
 import { useModels } from '@src/generic/model-store';
 import { DeprecatedReduxState } from '@src/store';
 import { getFileSizeToClosestByte } from '@src/utils';
 import React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useParams } from 'react-router-dom';
-import { UPLOAD_FILE_MAX_SIZE } from '@src/constants';
 
 export const CourseFilesTable = () => {
   const intl = useIntl();
@@ -159,26 +160,28 @@ export const CourseFilesTable = () => {
     return null;
   }
   return (
-    <>
-      <FileTable
-        {...{
-          courseId,
-          data,
-          handleAddFile,
-          handleDeleteFile,
-          handleDownloadFile,
-          handleLockFile,
-          handleUsagePaths,
-          handleErrorReset,
-          handleFileOrder,
-          tableColumns,
-          maxFileSize,
-          thumbnailPreview,
-          infoModalSidebar,
-          files: assets,
-        }}
-      />
-      <FileValidationModal {...{ handleFileOverwrite }} />
-    </>
+    <GatedComponentWrapper gatingTypes={[AgreementGated.UPLOAD, AgreementGated.UPLOAD_FILES]}>
+      <>
+        <FileTable
+          {...{
+            courseId,
+            data,
+            handleAddFile,
+            handleDeleteFile,
+            handleDownloadFile,
+            handleLockFile,
+            handleUsagePaths,
+            handleErrorReset,
+            handleFileOrder,
+            tableColumns,
+            maxFileSize,
+            thumbnailPreview,
+            infoModalSidebar,
+            files: assets,
+          }}
+        />
+        <FileValidationModal {...{ handleFileOverwrite }} />
+      </>
+    </GatedComponentWrapper>
   );
 };

src/files-and-videos/files-page/FilesPage.jsx

@@ -1,7 +1,7 @@
 import { useIntl } from '@edx/frontend-platform/i18n';
 
 import { Container } from '@openedx/paragon';
-import { useEffect } from 'react';
+import React, { useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
 import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
@@ -10,6 +10,8 @@ import Placeholder from '@src/editors/Placeholder';
 import { RequestStatus } from '@src/data/constants';
 import getPageHeadTitle from '@src/generic/utils';
 import EditFileAlertsSlot from '@src/plugin-slots/EditFileAlertsSlot';
+import { AlertAgreementGatedFeature } from '@src/generic/agreement-gated-feature';
+import { AgreementGated } from '@src/constants';
 
 import { EditFileErrors } from '../generic';
 import { fetchAssets, resetErrors } from './data/thunks';
@@ -55,6 +57,9 @@ const FilesPage = () => {
           updateFileStatus={updateAssetStatus}
           loadingStatus={loadingStatus}
         />
+        <AlertAgreementGatedFeature
+          gatingTypes={[AgreementGated.UPLOAD, AgreementGated.UPLOAD_FILES]}
+        />
         <EditFileAlertsSlot />
         <div className="h2">
           {intl.formatMessage(messages.heading)}

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 (
-    <>
-      <ActionRow>
-        <ActionRow.Spacer />
-        {isVideoTranscriptEnabled ? (
-          <Button
-            variant="link"
-            size="sm"
-            onClick={() => {
-              openTranscriptSettings();
-              handleErrorReset({ errorType: 'transcript' });
-            }}
-          >
-            {intl.formatMessage(messages.transcriptSettingsButtonLabel)}
-          </Button>
-        ) : null}
-      </ActionRow>
-      {
+    <GatedComponentWrapper gatingTypes={[AgreementGated.UPLOAD, AgreementGated.UPLOAD_VIDEOS]}>
+      <>
+        <ActionRow>
+          <ActionRow.Spacer />
+          {isVideoTranscriptEnabled ? (
+            <Button
+              variant="link"
+              size="sm"
+              onClick={() => {
+                openTranscriptSettings();
+                handleErrorReset({ errorType: 'transcript' });
+              }}
+            >
+              {intl.formatMessage(messages.transcriptSettingsButtonLabel)}
+            </Button>
+          ) : null}
+        </ActionRow>
+        {
         loadingStatus !== RequestStatus.FAILED && (
         <>
           {isVideoTranscriptEnabled && (
@@ -275,14 +278,15 @@ export const CourseVideosTable = () => {
         </>
         )
     }
-      <UploadModal
-        {...{
-          isUploadTrackerOpen,
-          currentUploadingIdsRef: uploadingIdsRef.current,
-          handleUploadCancel,
-          addVideoStatus,
-        }}
-      />
-    </>
+        <UploadModal
+          {...{
+            isUploadTrackerOpen,
+            currentUploadingIdsRef: uploadingIdsRef.current,
+            handleUploadCancel,
+            addVideoStatus,
+          }}
+        />
+      </>
+    </GatedComponentWrapper>
   );
 };

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}
         />
+        <AlertAgreementGatedFeature
+          gatingTypes={[AgreementGated.UPLOAD, AgreementGated.UPLOAD_VIDEOS]}
+        />
         <EditVideoAlertsSlot />
         <h2>{intl.formatMessage(messages.heading)}</h2>
         <CourseVideosSlot />