From 72bda40b1740bdf02a2a95f3c766cfebc0897a93 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=B4mulo=20Penido?= <romulo@opencraft.com>
Date: Fri, 20 Oct 2023 14:31:30 -0300
Subject: [PATCH] feat: add detail page (wip)

---
 src/generic/sub-header/SubHeader.jsx          |  2 +-
 src/generic/sub-header/SubHeader.scss         |  2 +-
 src/index.jsx                                 |  2 +-
 src/taxonomy/TaxonomyCard.jsx                 |  2 +-
 src/taxonomy/taxonomy-detail/TagListTable.jsx | 42 +++++++++++++++++++
 .../taxonomy-detail/TaxonomyDetailPage.jsx    | 29 ++++++++-----
 .../TaxonomyDetailSideCard.jsx                | 27 ++++++++++++
 7 files changed, 92 insertions(+), 14 deletions(-)
 create mode 100644 src/taxonomy/taxonomy-detail/TagListTable.jsx
 create mode 100644 src/taxonomy/taxonomy-detail/TaxonomyDetailSideCard.jsx

diff --git a/src/generic/sub-header/SubHeader.jsx b/src/generic/sub-header/SubHeader.jsx
index a0146fcd57..81d4c619ba 100644
--- a/src/generic/sub-header/SubHeader.jsx
+++ b/src/generic/sub-header/SubHeader.jsx
@@ -18,7 +18,7 @@ const SubHeader = ({
         <small className="sub-header-title-subtitle">{subtitle}</small>
         {title}
         {titleActions && (
-          <ActionRow className="ml-auto">
+          <ActionRow className="ml-auto mt-1">
             {titleActions}
           </ActionRow>
         )}
diff --git a/src/generic/sub-header/SubHeader.scss b/src/generic/sub-header/SubHeader.scss
index 693d5603b9..3957423112 100644
--- a/src/generic/sub-header/SubHeader.scss
+++ b/src/generic/sub-header/SubHeader.scss
@@ -33,6 +33,6 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-top: 1.5rem;
   margin-bottom: 12px;
 }
+
diff --git a/src/index.jsx b/src/index.jsx
index 7ab07a46ca..46ba868924 100755
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -78,7 +78,7 @@ const App = () => {
                 render={({ match }) => {
                   const { params: { taxonomyId } } = match;
                   return (
-                    <TaxonomyDetailPage taxonomyId={taxonomyId} />
+                    <TaxonomyDetailPage taxonomyId={Number(taxonomyId)} />
                   );
                 }}
               />
diff --git a/src/taxonomy/TaxonomyCard.jsx b/src/taxonomy/TaxonomyCard.jsx
index 8038071ef2..f3c0cbb173 100644
--- a/src/taxonomy/TaxonomyCard.jsx
+++ b/src/taxonomy/TaxonomyCard.jsx
@@ -42,7 +42,7 @@ const TaxonomyCard = ({ className, original, intl }) => {
   );
 
   return (
-    <Card className={classNames('taxonomy-card', className)} data-testid={`taxonomy-card-${id}`}>
+    <Card className={classNames('taxonomy-card', className)} data-testid={`taxonomy-card-${id}`} isClickable>
       <Link ariaLabel="view taxonomy details" className="stretched-link" to={`/taxonomy-list/${id}`} />
       <Card.Header
         title={name}
diff --git a/src/taxonomy/taxonomy-detail/TagListTable.jsx b/src/taxonomy/taxonomy-detail/TagListTable.jsx
new file mode 100644
index 0000000000..3b37e06336
--- /dev/null
+++ b/src/taxonomy/taxonomy-detail/TagListTable.jsx
@@ -0,0 +1,42 @@
+import {
+  DataTable,
+  TextFilter,
+} from '@edx/paragon';
+import Proptypes from 'prop-types';
+
+const tagsSample = [
+  { name: 'Tag 1' },
+  { name: 'Tag 2' },
+  { name: 'Tag 3' },
+  { name: 'Tag 4' },
+  { name: 'Tag 5' },
+  { name: 'Tag 6' },
+  { name: 'Tag 7' },
+];
+
+const TagListTable = ({ tags }) => (
+  <DataTable
+    isFilterable
+    isSortable
+    defaultColumnValues={{ Filter: TextFilter }}
+    itemCount={tagsSample.length}
+    data={tagsSample}
+    columns={[
+      {
+        Header: 'Name',
+        accessor: 'name',
+      },
+    ]}
+  >
+    <DataTable.TableControlBar />
+    <DataTable.Table />
+    <DataTable.EmptyTable content="No results found" />
+    <DataTable.TableFooter />
+  </DataTable>
+);
+
+TagListTable.propTypes = {
+  tags: Proptypes.array.isRequired,
+};
+
+export default TagListTable;
diff --git a/src/taxonomy/taxonomy-detail/TaxonomyDetailPage.jsx b/src/taxonomy/taxonomy-detail/TaxonomyDetailPage.jsx
index 55b5804a71..d422efde18 100644
--- a/src/taxonomy/taxonomy-detail/TaxonomyDetailPage.jsx
+++ b/src/taxonomy/taxonomy-detail/TaxonomyDetailPage.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import {
   Container,
+  Layout,
 } from '@edx/paragon';
 import Proptypes from 'prop-types';
 
@@ -8,6 +9,8 @@ import PermissionDeniedAlert from '../../generic/PermissionDeniedAlert';
 import Loading from '../../generic/Loading';
 import Header from '../../header';
 import SubHeader from '../../generic/sub-header/SubHeader';
+import TaxonomyDetailSideCard from './TaxonomyDetailSideCard';
+import TagListTable from './TagListTable';
 import { useTaxonomyDetailDataResponse, useTaxonomyDetailDataStatus } from '../api/hooks/selectors';
 
 const TaxonomyDetailContent = ({ taxonomyId }) => {
@@ -42,16 +45,22 @@ const TaxonomyDetailContent = ({ taxonomyId }) => {
             />
           </Container>
         </div>
-        <div className="bg-light-400 mt-1">
-          <Container size="xl">
-            {
-              taxonomy ? (
-                <div>
-                  <pre>{JSON.stringify(taxonomy, null, 2)}</pre>
-                </div>
-              ) : (<>Taxonomy not found</>)
-            }
-          </Container>
+        <div className="bg-light-400 m-4">
+          <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 />
+            </Layout.Element>
+            <Layout.Element>
+              <TaxonomyDetailSideCard taxonomy={taxonomy} />
+            </Layout.Element>
+
+          </Layout>
         </div>
       </>
     );
diff --git a/src/taxonomy/taxonomy-detail/TaxonomyDetailSideCard.jsx b/src/taxonomy/taxonomy-detail/TaxonomyDetailSideCard.jsx
new file mode 100644
index 0000000000..3a27180ff5
--- /dev/null
+++ b/src/taxonomy/taxonomy-detail/TaxonomyDetailSideCard.jsx
@@ -0,0 +1,27 @@
+import {
+  Card,
+} from '@edx/paragon';
+import Proptypes from 'prop-types';
+
+const TaxonomyDetailSideCard = ({ taxonomy }) => (
+  <Card>
+    <Card.Header title="Taxonomy details" />
+    <Card.Section title="Title">
+      {taxonomy.name}
+    </Card.Section>
+    <Card.Divider className="ml-3 mr-3" />
+    <Card.Section title="Description">
+      {taxonomy.description}
+    </Card.Section>
+    <Card.Divider className="ml-3 mr-3" />
+    <Card.Section title="Copyright">
+      No copyright added
+    </Card.Section>
+  </Card>
+);
+
+TaxonomyDetailSideCard.propTypes = {
+  taxonomy: Proptypes.object.isRequired,
+};
+
+export default TaxonomyDetailSideCard;