feat: set default value for isEditable prop in multiple components

Author: bra-i-am

src/generic/WysiwygEditor.jsx

@@ -14,7 +14,7 @@ export const WysiwygEditor = ({
   editorType,
   onChange,
   minHeight,
-  disabled,
+  disabled = false,
 }) => {
   const { editorRef, refReady, setEditorRef } = prepareEditorRef();
   const { courseId } = useCourseAuthoringContext();
@@ -74,13 +74,11 @@ WysiwygEditor.defaultProps = {
   initialValue: '',
   editorType: SUPPORTED_TEXT_EDITORS.text,
   minHeight: 200,
-  disabled: false,
 };
 
 WysiwygEditor.propTypes = {
   initialValue: PropTypes.string,
   editorType: PropTypes.oneOf(Object.values(SUPPORTED_TEXT_EDITORS)),
   onChange: PropTypes.func.isRequired,
   minHeight: PropTypes.number,
-  disabled: PropTypes.bool,
 };

src/generic/course-upload-image/index.jsx

@@ -27,7 +27,7 @@ const CourseUploadImage = ({
   identifierFieldText,
   showImageBodyText,
   customInputPlaceholder,
-  disabled,
+  disabled = false,
   onChange,
 }) => {
   const { courseId } = useParams();
@@ -157,7 +157,6 @@ CourseUploadImage.defaultProps = {
   showImageBodyText: false,
   identifierFieldText: '',
   customInputPlaceholder: '',
-  disabled: false,
 };
 
 CourseUploadImage.propTypes = {
@@ -169,7 +168,6 @@ CourseUploadImage.propTypes = {
   showImageBodyText: PropTypes.bool,
   identifierFieldText: PropTypes.string,
   customInputPlaceholder: PropTypes.string,
-  disabled: PropTypes.bool,
   onChange: PropTypes.func.isRequired,
 };
 

src/schedule-and-details/ScheduleAndDetails.test.jsx

@@ -11,7 +11,7 @@ import genericMessages from '@src/generic/help-sidebar/messages';
 import { DATE_FORMAT } from '@src/constants';
 import { getCourseSettingsApiUrl } from '@src/data/api';
 import { mockWaffleFlags } from '@src/data/apiHooks.mock';
-import { useUserPermissionsWithAuthzCourse } from '@src/authz/hooks';
+import { useCourseUserPermissions } from '@src/authz/hooks';
 
 import { CourseAuthoringProvider } from '@src/CourseAuthoringContext';
 import { courseDetailsMock, courseSettingsMock } from './__mocks__';
@@ -25,14 +25,12 @@ import messages from './messages';
 import ScheduleAndDetails from '.';
 
 jest.mock('@src/authz/hooks', () => ({
-  useUserPermissionsWithAuthzCourse: jest.fn().mockReturnValue({
+  useCourseUserPermissions: jest.fn().mockReturnValue({
     isLoading: false,
     isAuthzEnabled: true,
-    permissions: {
-      canViewScheduleAndDetails: true,
-      canEditSchedule: true,
-      canEditDetails: true,
-    },
+    canViewScheduleAndDetails: true,
+    canEditSchedule: true,
+    canEditDetails: true,
   }),
 }));
 
@@ -193,14 +191,12 @@ describe('<ScheduleAndDetails /> permissions', () => {
     axiosMock.onGet(getCourseDetailsApiUrl(courseId)).reply(200, courseDetailsMock);
     axiosMock.onGet(getCourseSettingsApiUrl(courseId)).reply(200, courseSettingsMock);
     axiosMock.onPut(getCourseDetailsApiUrl(courseId)).reply(200);
-    jest.mocked(useUserPermissionsWithAuthzCourse).mockReturnValue({
+    jest.mocked(useCourseUserPermissions).mockReturnValue({
       isLoading: false,
       isAuthzEnabled: true,
-      permissions: {
-        canViewScheduleAndDetails: true,
-        canEditSchedule: true,
-        canEditDetails: true,
-      },
+      canViewScheduleAndDetails: true,
+      canEditSchedule: true,
+      canEditDetails: true,
     });
   });
 
@@ -222,10 +218,12 @@ describe('<ScheduleAndDetails /> permissions', () => {
 
   it('shows PermissionDeniedAlert when user lacks view permission', async () => {
     mockWaffleFlags({ enableAuthzCourseAuthoring: true });
-    jest.mocked(useUserPermissionsWithAuthzCourse).mockReturnValue({
+    jest.mocked(useCourseUserPermissions).mockReturnValue({
       isLoading: false,
       isAuthzEnabled: true,
-      permissions: { canViewScheduleAndDetails: false, canEditSchedule: false, canEditDetails: false },
+      canViewScheduleAndDetails: false,
+      canEditSchedule: false,
+      canEditDetails: false,
     });
     const { getByTestId } = renderComponent();
     await waitFor(() => {
@@ -235,10 +233,12 @@ describe('<ScheduleAndDetails /> permissions', () => {
 
   it('disables schedule date inputs when user lacks edit_schedule permission', async () => {
     mockWaffleFlags({ enableAuthzCourseAuthoring: true });
-    jest.mocked(useUserPermissionsWithAuthzCourse).mockReturnValue({
+    jest.mocked(useCourseUserPermissions).mockReturnValue({
       isLoading: false,
       isAuthzEnabled: true,
-      permissions: { canViewScheduleAndDetails: true, canEditSchedule: false, canEditDetails: true },
+      canViewScheduleAndDetails: true,
+      canEditSchedule: false,
+      canEditDetails: true,
     });
     const { getAllByPlaceholderText } = renderComponent();
     await waitFor(() => {
@@ -249,10 +249,12 @@ describe('<ScheduleAndDetails /> permissions', () => {
 
   it('disables pacing and details inputs when user lacks edit_details permission', async () => {
     mockWaffleFlags({ enableAuthzCourseAuthoring: true });
-    jest.mocked(useUserPermissionsWithAuthzCourse).mockReturnValue({
+    jest.mocked(useCourseUserPermissions).mockReturnValue({
       isLoading: false,
       isAuthzEnabled: true,
-      permissions: { canViewScheduleAndDetails: true, canEditSchedule: true, canEditDetails: false },
+      canViewScheduleAndDetails: true,
+      canEditSchedule: true,
+      canEditDetails: false,
     });
     const { getAllByRole } = renderComponent();
     await waitFor(() => {
@@ -263,10 +265,12 @@ describe('<ScheduleAndDetails /> permissions', () => {
 
   it('save button cannot be triggered when user has no edit permissions', async () => {
     mockWaffleFlags({ enableAuthzCourseAuthoring: true });
-    jest.mocked(useUserPermissionsWithAuthzCourse).mockReturnValue({
+    jest.mocked(useCourseUserPermissions).mockReturnValue({
       isLoading: false,
       isAuthzEnabled: true,
-      permissions: { canViewScheduleAndDetails: true, canEditSchedule: false, canEditDetails: false },
+      canViewScheduleAndDetails: true,
+      canEditSchedule: false,
+      canEditDetails: false,
     });
     const { getAllByPlaceholderText, queryByText } = renderComponent();
     // Wait for page to load

src/schedule-and-details/details-section/index.jsx

@@ -10,7 +10,7 @@ const DetailsSection = ({
   language,
   languageOptions,
   onChange,
-  isEditable,
+  isEditable = true,
 }) => {
   const intl = useIntl();
   const formattedLanguage = () => {
@@ -51,15 +51,13 @@ const DetailsSection = ({
 
 DetailsSection.defaultProps = {
   language: '',
-  isEditable: true,
 };
 
 DetailsSection.propTypes = {
   language: PropTypes.string,
   languageOptions: PropTypes.arrayOf(
     PropTypes.arrayOf(PropTypes.string.isRequired).isRequired,
   ).isRequired,
-  isEditable: PropTypes.bool,
   onChange: PropTypes.func.isRequired,
 };
 

src/schedule-and-details/index.jsx

@@ -159,15 +159,15 @@ const ScheduleAndDetails = () => {
   const { overview: initialOverview } = courseDetails || {};
   const { aboutSidebarHtml: initialAboutSidebarHtml } = courseDetails || {};
 
-  if (!isLoadingUserPermissions && !canViewScheduleAndDetails) {
-    return <PermissionDeniedAlert />;
-  }
-
   if (isLoading) {
     // eslint-disable-next-line react/jsx-no-useless-fragment
     return <></>;
   }
 
+  if (!canViewScheduleAndDetails) {
+    return <PermissionDeniedAlert />;
+  }
+
   if (loadingDetailsStatus === RequestStatus.DENIED || loadingSettingsStatus === RequestStatus.DENIED) {
     return (
       <div className="row justify-content-center m-6">
@@ -176,8 +176,8 @@ const ScheduleAndDetails = () => {
     );
   }
 
-  const isScheduleEditable = !isLoadingUserPermissions && canEditSchedule;
-  const isDetailsEditable = !isLoadingUserPermissions && canEditDetails;
+  const isScheduleEditable = canEditSchedule;
+  const isDetailsEditable = canEditDetails;
 
   const showCreditSection = creditEligibilityEnabled && isCreditCourse;
   const showRequirementsSection = aboutPageEditable || isPrerequisiteCoursesEnabled || isEntranceExamsEnabled;

src/schedule-and-details/instructors-section/index.jsx

@@ -9,7 +9,7 @@ import InstructorContainer from './instructor-container';
 import SectionSubHeader from '../../generic/section-sub-header';
 import messages from './messages';
 
-const InstructorsSection = ({ instructors, isEditable, onChange }) => {
+const InstructorsSection = ({ instructors, isEditable = true, onChange }) => {
   const intl = useIntl();
   const newInstructor = {
     bio: '',
@@ -79,7 +79,6 @@ const InstructorsSection = ({ instructors, isEditable, onChange }) => {
 
 InstructorsSection.defaultProps = {
   instructors: [],
-  isEditable: true,
 };
 
 InstructorsSection.propTypes = {
@@ -92,7 +91,6 @@ InstructorsSection.propTypes = {
       title: PropTypes.string,
     }),
   ),
-  isEditable: PropTypes.bool,
   onChange: PropTypes.func.isRequired,
 };
 

src/schedule-and-details/instructors-section/instructor-container/index.jsx

@@ -17,7 +17,7 @@ const InstructorContainer = ({
   idx,
   onDelete,
   onChange,
-  isEditable,
+  isEditable = true,
 }) => {
   const intl = useIntl();
   return (
@@ -114,7 +114,6 @@ const InstructorContainer = ({
 
 InstructorContainer.defaultProps = {
   instructor: {},
-  isEditable: true,
 };
 
 InstructorContainer.propTypes = {
@@ -126,7 +125,6 @@ InstructorContainer.propTypes = {
     title: PropTypes.string,
   }),
   idx: PropTypes.number.isRequired,
-  isEditable: PropTypes.bool,
   onDelete: PropTypes.func.isRequired,
   onChange: PropTypes.func.isRequired,
 };

src/schedule-and-details/introducing-section/extended-course-details/index.jsx

@@ -11,7 +11,7 @@ const ExtendedCourseDetails = ({
   subtitle,
   duration,
   description,
-  isEditable,
+  isEditable = true,
   onChange,
 }) => {
   const intl = useIntl();
@@ -76,15 +76,13 @@ ExtendedCourseDetails.defaultProps = {
   subtitle: '',
   duration: '',
   description: '',
-  isEditable: true,
 };
 
 ExtendedCourseDetails.propTypes = {
   title: PropTypes.string,
   subtitle: PropTypes.string,
   duration: PropTypes.string,
   description: PropTypes.string,
-  isEditable: PropTypes.bool,
   onChange: PropTypes.func.isRequired,
 };
 

src/schedule-and-details/introducing-section/index.jsx

@@ -30,7 +30,7 @@ const IntroducingSection = ({
   shortDescriptionEditable,
   enableExtendedCourseDetails,
   videoThumbnailImageAssetPath,
-  isEditable,
+  isEditable = true,
   onChange,
 }) => {
   const intl = useIntl();
@@ -184,7 +184,6 @@ IntroducingSection.defaultProps = {
   bannerImageAssetPath: '',
   videoThumbnailImageAssetPath: '',
   overview: '',
-  isEditable: true,
 };
 
 IntroducingSection.propTypes = {
@@ -204,7 +203,6 @@ IntroducingSection.propTypes = {
   shortDescriptionEditable: PropTypes.bool.isRequired,
   enableExtendedCourseDetails: PropTypes.bool.isRequired,
   videoThumbnailImageAssetPath: PropTypes.string,
-  isEditable: PropTypes.bool,
   onChange: PropTypes.func.isRequired,
 };
 

src/schedule-and-details/introducing-section/introduction-video/index.jsx

@@ -5,7 +5,7 @@ import { useIntl } from '@edx/frontend-platform/i18n';
 
 import messages from './messages';
 
-const IntroductionVideo = ({ introVideo, isEditable, onChange }) => {
+const IntroductionVideo = ({ introVideo, isEditable = true, onChange }) => {
   const intl = useIntl();
   const embedVideoUrl = introVideo
     ? `//www.youtube.com/embed/${introVideo}`
@@ -55,12 +55,10 @@ const IntroductionVideo = ({ introVideo, isEditable, onChange }) => {
 
 IntroductionVideo.defaultProps = {
   introVideo: '',
-  isEditable: true,
 };
 
 IntroductionVideo.propTypes = {
   introVideo: PropTypes.string,
-  isEditable: PropTypes.bool,
   onChange: PropTypes.func.isRequired,
 };