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

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 { AgreementGated } from '../../constants';
+import { AlertAgreementGatedFeature } from '../../generic/agreement-gated-feature/AlertAgreementGatedFeature';
 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

@@ -207,3 +207,25 @@ export async function getPreviewModulestoreMigration(
   const { data } = await client.get(getPreviewModulestoreMigrationUrl(), { params });
   return camelCaseObject(data);
 }
+
+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);
+}
+
+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
+      .map(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

@@ -162,3 +162,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 } from '@src/constants';
 import {
   addAssetFile,
   deleteAssetFile,
@@ -20,6 +21,7 @@ import {
   FileTable,
   ThumbnailColumn,
 } from '@src/files-and-videos/generic';
+import { GatedComponentWrapper } from '@src/generic/agreement-gated-feature/GatedComponentWrapper';
 import { useModels } from '@src/generic/model-store';
 import { DeprecatedReduxState } from '@src/store';
 import { getFileSizeToClosestByte } from '@src/utils';
@@ -158,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 { AgreementGated } from '../../constants';
+import { AlertAgreementGatedFeature } from '../../generic/agreement-gated-feature/AlertAgreementGatedFeature';
 
 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/GatedComponentWrapper';
 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,8 @@
-import { useEffect } from 'react';
+import { AgreementGated } from '@src/constants';
+import {
+  AlertAgreementGatedFeature,
+} from '@src/generic/agreement-gated-feature/AlertAgreementGatedFeature';
+import React, { useEffect } from 'react';
 import { Helmet } from 'react-helmet';
 import { useDispatch, useSelector } from 'react-redux';
 
@@ -57,6 +61,9 @@ const VideosPage = () => {
           updateFileStatus={updateVideoStatus}
           loadingStatus={loadingStatus}
         />
+        <AlertAgreementGatedFeature
+          gatingTypes={[AgreementGated.UPLOAD, AgreementGated.UPLOAD_VIDEOS]}
+        />
         <EditVideoAlertsSlot />
         <h2>{intl.formatMessage(messages.heading)}</h2>
         <CourseVideosSlot />