feat: Enable taxonomy/tagging feature in MFE by default (#989)

* feat: enable tagging/taxonomy feature by default

* test: improve coverage

* chore: fix lint issue

.env

@@ -33,7 +33,7 @@ ENABLE_TEAM_TYPE_SETTING=false
 ENABLE_UNIT_PAGE=false
 ENABLE_ASSETS_PAGE=false
 ENABLE_VIDEO_UPLOAD_PAGE_LINK_IN_CONTENT_DROPDOWN=false
-ENABLE_TAGGING_TAXONOMY_PAGES=false
+ENABLE_TAGGING_TAXONOMY_PAGES=true
 BBB_LEARN_MORE_URL=''
 HOTJAR_APP_ID=''
 HOTJAR_VERSION=6

README.rst

@@ -260,7 +260,8 @@ Configuration
 
 In additional to the standard settings, the following local configuration items are required:
 
-* ``ENABLE_TAGGING_TAXONOMY_PAGES``: must be enabled in order to actually present the new Tagging/Taxonomy pages.
+* ``ENABLE_TAGGING_TAXONOMY_PAGES``: must be enabled (which it is by default) in order to actually enable/show the new 
+Tagging/Taxonomy functionality.
 
 
 Developing

src/course-unit/CourseUnit.jsx

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { useSelector } from 'react-redux';
 import { useParams } from 'react-router-dom';
 import { Container, Layout, Stack } from '@openedx/paragon';
+import { getConfig } from '@edx/frontend-platform';
 import { useIntl, injectIntl } from '@edx/frontend-platform/i18n';
 import { DraggableList, ErrorAlert } from '@edx/frontend-lib-content-components';
 import { Warning as WarningIcon } from '@openedx/paragon/icons';
@@ -200,9 +201,12 @@ const CourseUnit = ({ courseId }) => {
                 <Sidebar data-testid="course-unit-sidebar">
                   <PublishControls blockId={blockId} />
                 </Sidebar>
-                <Sidebar className="tags-sidebar">
-                  <TagsSidebarControls />
-                </Sidebar>
+                {getConfig().ENABLE_TAGGING_TAXONOMY_PAGES === 'true'
+                && (
+                  <Sidebar className="tags-sidebar">
+                    <TagsSidebarControls />
+                  </Sidebar>
+                )}
                 <Sidebar data-testid="course-unit-location-sidebar">
                   <LocationInfo />
                 </Sidebar>

src/course-unit/CourseUnit.test.jsx

@@ -5,7 +5,12 @@ import {
 import userEvent from '@testing-library/user-event';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { AppProvider } from '@edx/frontend-platform/react';
-import { camelCaseObject, initializeMockApp } from '@edx/frontend-platform';
+import {
+  camelCaseObject,
+  getConfig,
+  initializeMockApp,
+  setConfig,
+} from '@edx/frontend-platform';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import { cloneDeep, set } from 'lodash';
 
@@ -1035,6 +1040,24 @@ describe('<CourseUnit />', () => {
     });
   });
 
+  it('shows the Tags sidebar when enabled', async () => {
+    setConfig({
+      ...getConfig(),
+      ENABLE_TAGGING_TAXONOMY_PAGES: 'true',
+    });
+    const { getByText } = render(<RootWrapper />);
+    await waitFor(() => { expect(getByText('Unit tags')).toBeInTheDocument(); });
+  });
+
+  it('hides the Tags sidebar when not enabled', async () => {
+    setConfig({
+      ...getConfig(),
+      ENABLE_TAGGING_TAXONOMY_PAGES: 'false',
+    });
+    const { queryByText } = render(<RootWrapper />);
+    await waitFor(() => { expect(queryByText('Unit tags')).not.toBeInTheDocument(); });
+  });
+
   describe('Copy paste functionality', () => {
     it('should display "Copy Unit" action button after enabling copy-paste units', async () => {
       const { queryByText, queryByRole } = render(<RootWrapper />);

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { initializeMockApp } from '@edx/frontend-platform';
+import { getConfig, initializeMockApp, setConfig } from '@edx/frontend-platform';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import {
   waitFor, render, fireEvent, screen, act,
@@ -160,6 +160,11 @@ describe('<TabsSection />', () => {
 
   describe('taxonomies tab', () => {
     it('should not show taxonomies tab on page if not enabled', async () => {
+      setConfig({
+        ...getConfig(),
+        ENABLE_TAGGING_TAXONOMY_PAGES: 'false',
+      });
+
       render(<RootWrapper />);
       axiosMock.onGet(getStudioHomeApiUrl()).reply(200, generateGetStudioHomeDataApiResponse());
       await executeThunk(fetchStudioHomeData(), store.dispatch);
@@ -169,11 +174,13 @@ describe('<TabsSection />', () => {
     });
 
     it('should redirect to taxonomies page', async () => {
-      const data = generateGetStudioHomeDataApiResponse();
-      data.taxonomiesEnabled = true;
+      setConfig({
+        ...getConfig(),
+        ENABLE_TAGGING_TAXONOMY_PAGES: 'true',
+      });
 
       render(<RootWrapper />);
-      axiosMock.onGet(getStudioHomeApiUrl()).reply(200, data);
+      axiosMock.onGet(getStudioHomeApiUrl()).reply(200, generateGetStudioHomeDataApiResponse());
       await executeThunk(fetchStudioHomeData(), store.dispatch);
 
       const taxonomiesTab = screen.getByText(tabMessages.taxonomiesTabTitle.defaultMessage);

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

@@ -2,6 +2,7 @@ import React, { useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
 import { Tab, Tabs } from '@openedx/paragon';
+import { getConfig } from '@edx/frontend-platform';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { useNavigate } from 'react-router-dom';
 
@@ -33,7 +34,7 @@ const TabsSection = ({
     libraryAuthoringMfeUrl,
     redirectToLibraryAuthoringMfe,
     courses, librariesEnabled, libraries, archivedCourses,
-    numPages, coursesCount, taxonomiesEnabled,
+    numPages, coursesCount,
   } = useSelector(getStudioHomeData);
   const {
     courseLoadingStatus,
@@ -103,7 +104,7 @@ const TabsSection = ({
       );
     }
 
-    if (taxonomiesEnabled) {
+    if (getConfig().ENABLE_TAGGING_TAXONOMY_PAGES === 'true') {
       tabs.push(
         <Tab
           key={TABS_LIST.taxonomies}