refactor!: replace LIBRARY_MODE env config with Studio API flags

.env

@@ -43,4 +43,3 @@ INVITE_STUDENTS_EMAIL_TO=''
 ENABLE_HOME_PAGE_COURSE_API_V2=false
 ENABLE_CHECKLIST_QUALITY=''
 ENABLE_GRADING_METHOD_IN_PROBLEMS=false
-LIBRARY_MODE="mixed"

.env.development

@@ -46,4 +46,3 @@ INVITE_STUDENTS_EMAIL_TO="[email protected]"
 ENABLE_HOME_PAGE_COURSE_API_V2=false
 ENABLE_CHECKLIST_QUALITY=true
 ENABLE_GRADING_METHOD_IN_PROBLEMS=false
-LIBRARY_MODE="mixed"

.env.test

@@ -38,4 +38,3 @@ INVITE_STUDENTS_EMAIL_TO="[email protected]"
 ENABLE_HOME_PAGE_COURSE_API_V2=true
 ENABLE_CHECKLIST_QUALITY=true
 ENABLE_GRADING_METHOD_IN_PROBLEMS=false
-LIBRARY_MODE="mixed"

src/editors/containers/ProblemEditor/components/EditProblemView/ExplanationWidget/messages.js

@@ -8,12 +8,12 @@ const messages = defineMessages({
     description: 'Explanation Title',
   },
   solutionDescriptionText: {
-    id: 'authoring.problemEditor.solutionwidget.solutionDescriptionText',
+    id: 'authoring.problemEditor.explanationwidget.solutionDescriptionText',
     defaultMessage: 'Provide an explanation for the correct answer',
     description: 'Description of the solution widget',
   },
   placeholder: {
-    id: 'authoring.problemEditor.questionwidget.placeholder',
+    id: 'authoring.problemEditor.explanationwidget.placeholder',
     defaultMessage: 'Enter your explanation',
     description: 'Placeholder text for tinyMCE editor',
   },

src/index.jsx

@@ -132,7 +132,6 @@ initialize({
         ENABLE_HOME_PAGE_COURSE_API_V2: process.env.ENABLE_HOME_PAGE_COURSE_API_V2 === 'true',
         ENABLE_CHECKLIST_QUALITY: process.env.ENABLE_CHECKLIST_QUALITY || 'true',
         ENABLE_GRADING_METHOD_IN_PROBLEMS: process.env.ENABLE_GRADING_METHOD_IN_PROBLEMS === 'true',
-        LIBRARY_MODE: process.env.LIBRARY_MODE || 'v1 only',
       }, 'CourseAuthoringConfig');
     },
   },

src/setupTest.js

@@ -44,7 +44,6 @@ mergeConfig({
   ENABLE_CHECKLIST_QUALITY: process.env.ENABLE_CHECKLIST_QUALITY || 'true',
   STUDIO_BASE_URL: process.env.STUDIO_BASE_URL || null,
   LMS_BASE_URL: process.env.LMS_BASE_URL || null,
-  LIBRARY_MODE: process.env.LIBRARY_MODE || 'v1 only',
 }, 'CourseAuthoringConfig');
 
 class ResizeObserver {

src/studio-home/StudioHome.test.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { useSelector } from 'react-redux';
 import { MemoryRouter, Routes, Route } from 'react-router-dom';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { initializeMockApp, getConfig, setConfig } from '@edx/frontend-platform';
+import { initializeMockApp } from '@edx/frontend-platform';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import { IntlProvider, injectIntl } from '@edx/frontend-platform/i18n';
 import { AppProvider } from '@edx/frontend-platform/react';
@@ -165,21 +165,11 @@ describe('<StudioHome />', () => {
     });
 
     describe('render new library button', () => {
-      beforeEach(() => {
-        setConfig({
-          ...getConfig(),
-          LIBRARY_MODE: 'mixed',
-        });
-      });
-
-      it('should navigate to home_library when in "v1 only" lib mode', () => {
-        setConfig({
-          ...getConfig(),
-          LIBRARY_MODE: 'v1 only',
-        });
+      it('should navigate to home_library when libraries-v2 disabled', () => {
         useSelector.mockReturnValue({
           ...studioHomeMock,
           courseCreatorStatus: COURSE_CREATOR_STATES.granted,
+          librariesV2Enabled: false,
         });
         const studioBaseUrl = 'http://localhost:18010';
 
@@ -196,7 +186,7 @@ describe('<StudioHome />', () => {
       it('should navigate to the library authoring page in course authoring', () => {
         useSelector.mockReturnValue({
           ...studioHomeMock,
-          LIBRARY_MODE: 'v2 only',
+          librariesV1Enabled: false,
         });
         const { getByTestId } = render(<RootWrapper />);
         const createNewLibraryButton = getByTestId('new-library-button');
@@ -208,26 +198,20 @@ describe('<StudioHome />', () => {
     });
 
     it('do not render new library button for "v1 only" mode if showNewLibraryButton is False', () => {
-      setConfig({
-        ...getConfig(),
-        LIBRARY_MODE: 'v1 only',
-      });
       useSelector.mockReturnValue({
         ...studioHomeMock,
         showNewLibraryButton: false,
+        librariesV2Enabled: false,
       });
       const { queryByTestId } = render(<RootWrapper />);
       expect(queryByTestId('new-library-button')).not.toBeInTheDocument();
     });
 
     it('render new library button for "v2 only" mode even if showNewLibraryButton is False', () => {
-      setConfig({
-        ...getConfig(),
-        LIBRARY_MODE: 'v2 only',
-      });
       useSelector.mockReturnValue({
         ...studioHomeMock,
         showNewLibraryButton: false,
+        librariesV1Enabled: false,
       });
       const { queryByTestId } = render(<RootWrapper />);
       expect(queryByTestId('new-library-button')).toBeInTheDocument();

src/studio-home/StudioHome.tsx

@@ -19,7 +19,6 @@ import Header from '../header';
 import SubHeader from '../generic/sub-header/SubHeader';
 import HomeSidebar from './home-sidebar';
 import TabsSection from './tabs-section';
-import { isMixedOrV1LibrariesMode, isMixedOrV2LibrariesMode } from './tabs-section/utils';
 import OrganizationSection from './organization-section';
 import VerifyEmailLayout from './verify-email-layout';
 import CreateNewCourseForm from './create-new-course-form';
@@ -46,12 +45,12 @@ const StudioHome = () => {
     hasAbilityToCreateNewCourse,
     isFiltered,
     setShowNewCourseContainer,
+    librariesV1Enabled,
+    librariesV2Enabled,
   } = useStudioHome(isPaginationCoursesEnabled);
 
-  const libMode = getConfig().LIBRARY_MODE;
-
-  const v1LibraryTab = isMixedOrV1LibrariesMode(libMode) && location?.pathname.split('/').pop() === 'libraries-v1';
-  const showV2LibraryURL = isMixedOrV2LibrariesMode(libMode) && !v1LibraryTab;
+  const v1LibraryTab = librariesV1Enabled && location?.pathname.split('/').pop() === 'libraries-v1';
+  const showV2LibraryURL = librariesV2Enabled && !v1LibraryTab;
 
   const {
     userIsActive,
@@ -155,6 +154,8 @@ const StudioHome = () => {
               onClickNewCourse={() => setShowNewCourseContainer(true)}
               isShowProcessing={isShowProcessing && !isFiltered}
               isPaginationCoursesEnabled={isPaginationCoursesEnabled}
+              librariesV1Enabled={librariesV1Enabled}
+              librariesV2Enabled={librariesV2Enabled}
             />
           </section>
         </Layout.Element>

src/studio-home/__mocks__/studioHomeMock.js

@@ -62,6 +62,8 @@ module.exports = {
     },
   ],
   librariesEnabled: true,
+  librariesV1Enabled: true,
+  librariesV2Enabled: true,
   optimizationEnabled: false,
   requestCourseCreatorUrl: '/request_course_creator',
   rerunCreatorStatus: true,

src/studio-home/factories/mockApiResponses.jsx

@@ -32,6 +32,8 @@ export const generateGetStudioHomeDataApiResponse = () => ({
   inProcessCourseActions: [],
   libraries: [],
   librariesEnabled: true,
+  librariesV1Enabled: true,
+  librariesV2Enabled: true,
   optimizationEnabled: false,
   requestCourseCreatorUrl: '/request_course_creator',
   rerunCreatorStatus: true,

src/studio-home/hooks.jsx

@@ -68,6 +68,8 @@ const useStudioHome = (isPaginated = false) => {
     studioRequestEmail,
     inProcessCourseActions,
     courseCreatorStatus,
+    librariesV1Enabled,
+    librariesV2Enabled,
   } = studioHomeData;
 
   const isShowOrganizationDropdown = optimizationEnabled && courseCreatorStatus === COURSE_CREATOR_STATES.granted;
@@ -94,6 +96,8 @@ const useStudioHome = (isPaginated = false) => {
     hasAbilityToCreateNewCourse,
     isFiltered,
     setShowNewCourseContainer,
+    librariesV1Enabled,
+    librariesV2Enabled,
   };
 };
 

src/studio-home/tabs-section/TabsSection.test.tsx

@@ -39,6 +39,8 @@ const tabSectionComponent = (overrideProps) => (
     showNewCourseContainer={false}
     onClickNewCourse={() => {}}
     isShowProcessing
+    librariesV1Enabled
+    librariesV2Enabled
     {...overrideProps}
   />
 );
@@ -66,10 +68,6 @@ describe('<TabsSection />', () => {
     const newMocks = initializeMocks({ initialState });
     store = newMocks.reduxStore;
     axiosMock = newMocks.axiosMock;
-    setConfig({
-      ...getConfig(),
-      LIBRARY_MODE: 'mixed',
-    });
     axiosMock.onGet(getContentLibraryV2ListApiUrl()).reply(200, contentLibrariesListV2);
   });
 
@@ -99,16 +97,9 @@ describe('<TabsSection />', () => {
     expect(screen.getByText(tabMessages.archivedTabTitle.defaultMessage)).toBeInTheDocument();
   });
 
-  it('should render only 1 library tab when "v1 only" lib mode', async () => {
-    setConfig({
-      ...getConfig(),
-      LIBRARY_MODE: 'v1 only',
-    });
-
-    const data = generateGetStudioHomeDataApiResponse();
-
-    render();
-    axiosMock.onGet(getStudioHomeApiUrl()).reply(200, data);
+  it('should render only 1 library tab when libraries-v2 disabled', async () => {
+    render({ librariesV2Enabled: false });
+    axiosMock.onGet(getStudioHomeApiUrl()).reply(200, generateGetStudioHomeDataApiResponse());
     await executeThunk(fetchStudioHomeData(), store.dispatch);
 
     expect(screen.getByText(tabMessages.librariesTabTitle.defaultMessage)).toBeInTheDocument();
@@ -120,16 +111,9 @@ describe('<TabsSection />', () => {
     expect(screen.queryByText(tabMessages.legacyLibrariesTabTitle.defaultMessage)).not.toBeInTheDocument();
   });
 
-  it('should render only 1 library tab when "v2 only" lib mode', async () => {
-    setConfig({
-      ...getConfig(),
-      LIBRARY_MODE: 'v2 only',
-    });
-
-    const data = generateGetStudioHomeDataApiResponse();
-
-    render();
-    axiosMock.onGet(getStudioHomeApiUrl()).reply(200, data);
+  it('should render only 1 library tab when libraries-v1 disabled', async () => {
+    render({ librariesV1Enabled: false });
+    axiosMock.onGet(getStudioHomeApiUrl()).reply(200, generateGetStudioHomeDataApiResponse());
     await executeThunk(fetchStudioHomeData(), store.dispatch);
 
     expect(screen.getByText(tabMessages.librariesTabTitle.defaultMessage)).toBeInTheDocument();
@@ -367,13 +351,13 @@ describe('<TabsSection />', () => {
     });
 
     it('should switch to Libraries tab and render specific v1 library details ("v1 only" mode)', async () => {
-      setConfig({
-        ...getConfig(),
-        LIBRARY_MODE: 'v1 only',
-      });
+      const data = {
+        ...generateGetStudioHomeDataApiResponse(),
+        librariesV2Enabled: false,
+      };
 
       render();
-      axiosMock.onGet(getStudioHomeApiUrl()).reply(200, generateGetStudioHomeDataApiResponse());
+      axiosMock.onGet(getStudioHomeApiUrl()).reply(200, data);
       axiosMock.onGet(libraryApiLink).reply(200, generateGetStudioHomeLibrariesApiResponse());
       await executeThunk(fetchStudioHomeData(), store.dispatch);
       await executeThunk(fetchLibraryData(), store.dispatch);
@@ -389,13 +373,13 @@ describe('<TabsSection />', () => {
     });
 
     it('should switch to Libraries tab and render specific v2 library details ("v2 only" mode)', async () => {
-      setConfig({
-        ...getConfig(),
-        LIBRARY_MODE: 'v2 only',
-      });
+      const data = {
+        ...generateGetStudioHomeDataApiResponse(),
+        librariesV1Enabled: false,
+      };
 
       render();
-      axiosMock.onGet(getStudioHomeApiUrl()).reply(200, generateGetStudioHomeDataApiResponse());
+      axiosMock.onGet(getStudioHomeApiUrl()).reply(200, data);
       await executeThunk(fetchStudioHomeData(), store.dispatch);
 
       const librariesTab = screen.getByText(tabMessages.librariesTabTitle.defaultMessage);

src/studio-home/tabs-section/index.tsx

@@ -14,19 +14,19 @@ import ArchivedTab from './archived-tab';
 import CoursesTab from './courses-tab';
 import { RequestStatus } from '../../data/constants';
 import { fetchLibraryData } from '../data/thunks';
-import { isMixedOrV1LibrariesMode, isMixedOrV2LibrariesMode } from './utils';
 
 const TabsSection = ({
   showNewCourseContainer,
   onClickNewCourse,
   isShowProcessing,
   isPaginationCoursesEnabled,
+  librariesV1Enabled,
+  librariesV2Enabled,
 }) => {
   const dispatch = useDispatch();
   const intl = useIntl();
   const navigate = useNavigate();
   const { pathname } = useLocation();
-  const libMode = getConfig().LIBRARY_MODE;
   const TABS_LIST = {
     courses: 'courses',
     libraries: 'libraries',
@@ -41,7 +41,7 @@ const TabsSection = ({
     }
 
     if (pname.includes('/libraries')) {
-      return isMixedOrV2LibrariesMode(libMode)
+      return librariesV2Enabled
         ? TABS_LIST.libraries
         : TABS_LIST.legacyLibraries;
     }
@@ -116,7 +116,7 @@ const TabsSection = ({
     }
 
     if (librariesEnabled) {
-      if (isMixedOrV2LibrariesMode(libMode)) {
+      if (librariesV2Enabled) {
         tabs.push(
           <Tab
             key={TABS_LIST.libraries}
@@ -128,15 +128,15 @@ const TabsSection = ({
         );
       }
 
-      if (isMixedOrV1LibrariesMode(libMode)) {
+      if (librariesV1Enabled) {
         tabs.push(
           <Tab
             key={TABS_LIST.legacyLibraries}
             eventKey={TABS_LIST.legacyLibraries}
             title={intl.formatMessage(
-              libMode === 'v1 only'
-                ? messages.librariesTabTitle
-                : messages.legacyLibrariesTabTitle,
+              librariesV2Enabled
+                ? messages.legacyLibrariesTabTitle
+                : messages.librariesTabTitle,
             )}
           >
             <LibrariesTab
@@ -197,6 +197,8 @@ TabsSection.propTypes = {
   onClickNewCourse: PropTypes.func.isRequired,
   isShowProcessing: PropTypes.bool.isRequired,
   isPaginationCoursesEnabled: PropTypes.bool,
+  librariesV1Enabled: PropTypes.bool,
+  librariesV2Enabled: PropTypes.bool,
 };
 
 export default TabsSection;

src/studio-home/tabs-section/utils.js

@@ -11,11 +11,5 @@ const sortAlphabeticallyArray = (arr) => [...arr]
     return firstDisplayName.localeCompare(secondDisplayName);
   });
 
-const isMixedOrV1LibrariesMode = (libMode) => ['mixed', 'v1 only'].includes(libMode);
-const isMixedOrV2LibrariesMode = (libMode) => ['mixed', 'v2 only'].includes(libMode);
-
-export {
-  sortAlphabeticallyArray,
-  isMixedOrV1LibrariesMode,
-  isMixedOrV2LibrariesMode,
-};
+// eslint-disable-next-line import/prefer-default-export
+export { sortAlphabeticallyArray };