From 87808bbbc451a2d89eafed8b95e0d9207a658ce3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=B4mulo=20Penido?= <romulo@dash.dev.br>
Date: Wed, 25 Oct 2023 15:57:41 -0300
Subject: [PATCH] refactor: add layout

---
 src/index.jsx                                 |   4 +-
 src/taxonomy/TaxonomyLayout.jsx               |  21 +++
 src/taxonomy/TaxonomyListPage.jsx             |  11 --
 src/taxonomy/index.js                         |   1 +
 .../taxonomy-detail/TaxonomyDetailContent.jsx | 127 ---------------
 .../taxonomy-detail/TaxonomyDetailPage.jsx    | 145 +++++++++++++++---
 6 files changed, 150 insertions(+), 159 deletions(-)
 create mode 100644 src/taxonomy/TaxonomyLayout.jsx
 delete mode 100644 src/taxonomy/taxonomy-detail/TaxonomyDetailContent.jsx

diff --git a/src/index.jsx b/src/index.jsx
index 8e23bbdf57..9ab2dd977c 100755
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -22,7 +22,7 @@ import CourseAuthoringRoutes from './CourseAuthoringRoutes';
 import Head from './head/Head';
 import { StudioHome } from './studio-home';
 import CourseRerun from './course-rerun';
-import { TaxonomyDetailPage, TaxonomyListPage } from './taxonomy';
+import { TaxonomyLayout, TaxonomyDetailPage, TaxonomyListPage } from './taxonomy';
 
 import 'react-datepicker/dist/react-datepicker.css';
 import './index.scss';
@@ -53,7 +53,7 @@ const App = () => {
           <Route path="/course/:courseId/*" element={<CourseAuthoringRoutes />} />
           <Route path="/course_rerun/:courseId" element={<CourseRerun />} />
           {process.env.ENABLE_TAGGING_TAXONOMY_PAGES === 'true' && (
-            <Route path="/taxonomy-list">
+            <Route path="/taxonomy-list" element={<TaxonomyLayout />}>
               <Route index element={<TaxonomyListPage />} />
               <Route path="/taxonomy-list/:taxonomyId" element={<TaxonomyDetailPage />} />
             </Route>
diff --git a/src/taxonomy/TaxonomyLayout.jsx b/src/taxonomy/TaxonomyLayout.jsx
new file mode 100644
index 0000000000..15a67befd0
--- /dev/null
+++ b/src/taxonomy/TaxonomyLayout.jsx
@@ -0,0 +1,21 @@
+import { StudioFooter } from '@edx/frontend-component-footer';
+import { Outlet } from 'react-router-dom';
+
+import Header from '../header';
+
+const TaxonomyLayout = () => (
+  <>
+    <style>
+      {`
+        body {
+            background-color: #E9E6E4; /* light-400 */
+        }
+      `}
+    </style>
+    <Header isHiddenMainMenu />
+    <Outlet />
+    <StudioFooter />
+  </>
+);
+
+export default TaxonomyLayout;
diff --git a/src/taxonomy/TaxonomyListPage.jsx b/src/taxonomy/TaxonomyListPage.jsx
index 0d3f0be220..f432d95019 100644
--- a/src/taxonomy/TaxonomyListPage.jsx
+++ b/src/taxonomy/TaxonomyListPage.jsx
@@ -6,8 +6,6 @@ import {
   Spinner,
 } from '@edx/paragon';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { StudioFooter } from '@edx/frontend-component-footer';
-import Header from '../header';
 import SubHeader from '../generic/sub-header/SubHeader';
 import messages from './messages';
 import TaxonomyCard from './taxonomy-card/TaxonomyCard';
@@ -36,14 +34,6 @@ const TaxonomyListPage = ({ intl }) => {
 
   return (
     <>
-      <style>
-        {`
-          body {
-              background-color: #E9E6E4; /* light-400 */
-          }
-        `}
-      </style>
-      <Header isHiddenMainMenu />
       <div className="pt-4.5 pr-4.5 pl-4.5 pb-2 bg-light-100 box-shadow-down-2">
         <Container size="xl">
           <SubHeader
@@ -92,7 +82,6 @@ const TaxonomyListPage = ({ intl }) => {
           )}
         </Container>
       </div>
-      <StudioFooter />
     </>
   );
 };
diff --git a/src/taxonomy/index.js b/src/taxonomy/index.js
index f47e0315fc..789be9255a 100644
--- a/src/taxonomy/index.js
+++ b/src/taxonomy/index.js
@@ -1,2 +1,3 @@
 export { default as TaxonomyListPage } from './TaxonomyListPage';
+export { default as TaxonomyLayout } from './TaxonomyLayout';
 export { default as TaxonomyDetailPage } from './taxonomy-detail/TaxonomyDetailPage';
diff --git a/src/taxonomy/taxonomy-detail/TaxonomyDetailContent.jsx b/src/taxonomy/taxonomy-detail/TaxonomyDetailContent.jsx
deleted file mode 100644
index df43fbaae6..0000000000
--- a/src/taxonomy/taxonomy-detail/TaxonomyDetailContent.jsx
+++ /dev/null
@@ -1,127 +0,0 @@
-import React, { useState } from 'react';
-import {
-  Breadcrumb,
-  Container,
-  Layout,
-} from '@edx/paragon';
-import { useParams } from 'react-router-dom';
-
-import PermissionDeniedAlert from '../../generic/PermissionDeniedAlert';
-import Loading from '../../generic/Loading';
-import SubHeader from '../../generic/sub-header/SubHeader';
-import TaxonomyDetailMenu from './TaxonomyDetailMenu';
-import TaxonomyDetailSideCard from './TaxonomyDetailSideCard';
-import TagListTable from './TagListTable';
-import ExportModal from '../modals/ExportModal';
-import { useTaxonomyDetailDataResponse, useTaxonomyDetailDataStatus } from '../api/hooks/selectors';
-
-const TaxonomyDetailContent = () => {
-  const { taxonomyId } = useParams();
-
-  const useTaxonomyDetailData = () => {
-    const { isError, isFetched } = useTaxonomyDetailDataStatus(taxonomyId);
-    const taxonomy = useTaxonomyDetailDataResponse(taxonomyId);
-    return { isError, isFetched, taxonomy };
-  };
-
-  const { isError, isFetched, taxonomy } = useTaxonomyDetailData(taxonomyId);
-
-  const [isExportModalOpen, setIsExportModalOpen] = useState(false);
-
-  if (isError) {
-    return (
-      <PermissionDeniedAlert />
-    );
-  }
-
-  if (!isFetched) {
-    return (
-      <Loading />
-    );
-  }
-
-  const renderModals = () => (
-    // eslint-disable-next-line react/jsx-no-useless-fragment
-    <>
-      {isExportModalOpen && (
-        <ExportModal
-          isOpen={isExportModalOpen}
-          onClose={() => setIsExportModalOpen(false)}
-          taxonomyId={taxonomyId}
-          taxonomyName={taxonomy.name}
-        />
-      )}
-    </>
-  );
-
-  const onClickMenuItem = (menuName) => {
-    switch (menuName) {
-    case 'export':
-      setIsExportModalOpen(true);
-      break;
-    default:
-      break;
-    }
-  };
-
-  const getHeaderActions = () => (
-    <TaxonomyDetailMenu
-      id={taxonomy.id}
-      name={taxonomy.name}
-      disabled={
-        // We don't show the export menu, because the system-taxonomies
-        // can't be exported. The API returns and error.
-        // The entire menu has been disabled because currently only
-        // the export menu exists.
-        // ToDo: When adding more menus, change this logic to hide only the export menu.
-        taxonomy.systemDefined
-      }
-      onClickMenuItem={onClickMenuItem}
-    />
-  );
-
-  if (taxonomy) {
-    return (
-      <>
-        <div className="pt-4.5 pr-4.5 pl-4.5 pb-2 bg-light-100 box-shadow-down-2">
-          <Container size="xl">
-            <Breadcrumb
-              links={[
-                { label: 'Taxonomies', href: '/taxonomy-list' },
-              ]}
-              activeLabel={taxonomy.name}
-            />
-            <SubHeader
-              title={taxonomy.name}
-              hideBorder
-              headerActions={getHeaderActions()}
-            />
-          </Container>
-        </div>
-        <div className="bg-light-400 m-4">
-          <Container size="xl">
-            <Layout
-              lg={[{ span: 9 }, { span: 3 }]}
-              md={[{ span: 9 }, { span: 3 }]}
-              sm={[{ span: 9 }, { span: 3 }]}
-              xs={[{ span: 9 }, { span: 3 }]}
-              xl={[{ span: 9 }, { span: 3 }]}
-            >
-              <Layout.Element>
-                <TagListTable taxonomyId={taxonomyId} />
-              </Layout.Element>
-              <Layout.Element>
-                <TaxonomyDetailSideCard taxonomy={taxonomy} />
-              </Layout.Element>
-            </Layout>
-          </Container>
-        </div>
-        {renderModals()}
-      </>
-    );
-  }
-
-  return undefined;
-};
-
-export default TaxonomyDetailContent;
diff --git a/src/taxonomy/taxonomy-detail/TaxonomyDetailPage.jsx b/src/taxonomy/taxonomy-detail/TaxonomyDetailPage.jsx
index cab69c9762..a8ff128cb5 100644
--- a/src/taxonomy/taxonomy-detail/TaxonomyDetailPage.jsx
+++ b/src/taxonomy/taxonomy-detail/TaxonomyDetailPage.jsx
@@ -1,21 +1,128 @@
-import { StudioFooter } from '@edx/frontend-component-footer';
-
-import Header from '../../header';
-import TaxonomyDetailContent from './TaxonomyDetailContent';
-
-const TaxonomyDetailPage = () => (
-  <>
-    <style>
-      {`
-        body {
-            background-color: #E9E6E4; /* light-400 */
-        }
-      `}
-    </style>
-    <Header isHiddenMainMenu />
-    <TaxonomyDetailContent />
-    <StudioFooter />
-  </>
-);
+import React, { useState } from 'react';
+import {
+  Breadcrumb,
+  Container,
+  Layout,
+} from '@edx/paragon';
+import { Link, useParams } from 'react-router-dom';
+
+import PermissionDeniedAlert from '../../generic/PermissionDeniedAlert';
+import Loading from '../../generic/Loading';
+import SubHeader from '../../generic/sub-header/SubHeader';
+import TaxonomyDetailMenu from './TaxonomyDetailMenu';
+import TaxonomyDetailSideCard from './TaxonomyDetailSideCard';
+import TagListTable from './TagListTable';
+import ExportModal from '../modals/ExportModal';
+import { useTaxonomyDetailDataResponse, useTaxonomyDetailDataStatus } from '../api/hooks/selectors';
+
+const TaxonomyDetailPage = () => {
+  const { taxonomyId } = useParams();
+
+  const useTaxonomyDetailData = () => {
+    const { isError, isFetched } = useTaxonomyDetailDataStatus(taxonomyId);
+    const taxonomy = useTaxonomyDetailDataResponse(taxonomyId);
+    return { isError, isFetched, taxonomy };
+  };
+
+  const { isError, isFetched, taxonomy } = useTaxonomyDetailData(taxonomyId);
+
+  const [isExportModalOpen, setIsExportModalOpen] = useState(false);
+
+  if (isError) {
+    return (
+      <PermissionDeniedAlert />
+    );
+  }
+
+  if (!isFetched) {
+    return (
+      <Loading />
+    );
+  }
+
+  const renderModals = () => (
+    // eslint-disable-next-line react/jsx-no-useless-fragment
+    <>
+      {isExportModalOpen && (
+        <ExportModal
+          isOpen={isExportModalOpen}
+          onClose={() => setIsExportModalOpen(false)}
+          taxonomyId={taxonomyId}
+          taxonomyName={taxonomy.name}
+        />
+      )}
+    </>
+  );
+
+  const onClickMenuItem = (menuName) => {
+    switch (menuName) {
+    case 'export':
+      setIsExportModalOpen(true);
+      break;
+    default:
+      break;
+    }
+  };
+
+  const getHeaderActions = () => (
+    <TaxonomyDetailMenu
+      id={taxonomy.id}
+      name={taxonomy.name}
+      disabled={
+        // We don't show the export menu, because the system-taxonomies
+        // can't be exported. The API returns and error.
+        // The entire menu has been disabled because currently only
+        // the export menu exists.
+        // ToDo: When adding more menus, change this logic to hide only the export menu.
+        taxonomy.systemDefined
+      }
+      onClickMenuItem={onClickMenuItem}
+    />
+  );
+
+  if (taxonomy) {
+    return (
+      <>
+        <div className="pt-4.5 pr-4.5 pl-4.5 pb-2 bg-light-100 box-shadow-down-2">
+          <Container size="xl">
+            <Breadcrumb
+              links={[
+                { label: 'Taxonomies', to: '/taxonomy-list/' },
+              ]}
+              activeLabel={taxonomy.name}
+              linkAs={Link}
+            />
+            <SubHeader
+              title={taxonomy.name}
+              hideBorder
+              headerActions={getHeaderActions()}
+            />
+          </Container>
+        </div>
+        <div className="bg-light-400 m-4">
+          <Container size="xl">
+            <Layout
+              lg={[{ span: 9 }, { span: 3 }]}
+              md={[{ span: 9 }, { span: 3 }]}
+              sm={[{ span: 9 }, { span: 3 }]}
+              xs={[{ span: 9 }, { span: 3 }]}
+              xl={[{ span: 9 }, { span: 3 }]}
+            >
+              <Layout.Element>
+                <TagListTable taxonomyId={taxonomyId} />
+              </Layout.Element>
+              <Layout.Element>
+                <TaxonomyDetailSideCard taxonomy={taxonomy} />
+              </Layout.Element>
+            </Layout>
+          </Container>
+        </div>
+        {renderModals()}
+      </>
+    );
+  }
+
+  return undefined;
+};
 
 export default TaxonomyDetailPage;