From b38e7727d55f1871cab6034437a16eb1240de139 Mon Sep 17 00:00:00 2001
From: mgaseta <105936322+mgaseta@users.noreply.github.com>
Date: Tue, 17 Jan 2023 09:32:06 -0300
Subject: [PATCH] feat: added seedlot dashboard page and initial grid display
 for it (#32)

* feat: added seedlot dashboard page and initial grid display for it

* fix: seedlot dashboard url
---
 src/App.tsx                                 | 12 ++++-
 src/components/ActivityTable/index.tsx      |  8 +--
 src/components/AvatarImage/index.tsx        |  2 +-
 src/components/BCHeader/index.tsx           |  4 +-
 src/components/Card/index.tsx               |  4 +-
 src/components/EmptySection/index.tsx       |  3 +-
 src/components/FavoriteActivities/index.tsx |  6 ++-
 src/components/PageTitle/index.tsx          | 34 +++++++++++++
 src/components/PageTitle/styles.css         | 33 +++++++++++++
 src/components/RecentActivities/index.tsx   |  4 +-
 src/components/RightPanelTitle/index.tsx    |  4 +-
 src/components/RightPanelTitle/styles.css   |  2 +-
 src/layout/PublicLayout/styles.scss         |  6 +++
 src/mock-data/LeftPanelItems.ts             |  2 +-
 src/views/Dashboard/dashboard.tsx           | 14 ++----
 src/views/Dashboard/styles.scss             | 31 ------------
 src/views/SeedlotDashboard/index.tsx        | 54 +++++++++++++++++++++
 src/views/SeedlotDashboard/styles.css       | 15 ++++++
 18 files changed, 179 insertions(+), 59 deletions(-)
 create mode 100644 src/components/PageTitle/index.tsx
 create mode 100644 src/components/PageTitle/styles.css
 delete mode 100644 src/views/Dashboard/styles.scss
 create mode 100644 src/views/SeedlotDashboard/index.tsx
 create mode 100644 src/views/SeedlotDashboard/styles.css

diff --git a/src/App.tsx b/src/App.tsx
index 837cfe690..b31966912 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -13,8 +13,9 @@ import { useAuth } from './contexts/AuthContext';
 import SilentCheckSso from './components/SilentCheckSso';
 import Logout from './components/Logout';
 import Layout from './layout/PublicLayout';
-import Dashboard from './views/Dashboard/dashboard';
 import NewLanding from './views/NewLanding';
+import Dashboard from './views/Dashboard/dashboard';
+import SeedlotDashboard from './views/SeedlotDashboard';
 
 /**
  * Create an app structure conaining all the routes.
@@ -41,6 +42,15 @@ const App: React.FC = () => {
             )}
           />
 
+          <Route
+            path="/seedlot"
+            element={(
+              <ProtectedRoute signed={signed}>
+                <SeedlotDashboard />
+              </ProtectedRoute>
+            )}
+          />
+
           <Route
             path="/form"
             element={(
diff --git a/src/components/ActivityTable/index.tsx b/src/components/ActivityTable/index.tsx
index 2f3f265b1..2dc4dc816 100644
--- a/src/components/ActivityTable/index.tsx
+++ b/src/components/ActivityTable/index.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
-
-import './styles.css';
+import { hashObject } from 'react-hash-string';
 
 import {
   Table,
@@ -12,10 +11,11 @@ import {
 } from '@carbon/react';
 import { DataViewAlt } from '@carbon/icons-react';
 
-import { hashObject } from 'react-hash-string';
+import StatusItem from '../StatusItem';
 
 import Activity from '../../types/Activity';
-import StatusItem from '../StatusItem';
+
+import './styles.css';
 
 interface TableProps {
   elements: Activity[];
diff --git a/src/components/AvatarImage/index.tsx b/src/components/AvatarImage/index.tsx
index af37c74da..db9403870 100644
--- a/src/components/AvatarImage/index.tsx
+++ b/src/components/AvatarImage/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
-import './style.css';
 import emptyUser from '../../mock-data/img/EmptyUser.jpg';
+import './style.css';
 
 type Size = 'small' | 'large';
 
diff --git a/src/components/BCHeader/index.tsx b/src/components/BCHeader/index.tsx
index 488158b70..05f6b9978 100644
--- a/src/components/BCHeader/index.tsx
+++ b/src/components/BCHeader/index.tsx
@@ -122,14 +122,14 @@ const BCHeader = () => {
               <Icons.UserAvatar size={20} />
             </HeaderGlobalAction>
           </HeaderGlobalBar>
-          <HeaderPanel expanded={notifications} className="notifications-panel">
+          <HeaderPanel aria-label="Notifications Tab" expanded={notifications} className="notifications-panel">
             <RightPanelTitle
               title="Notifications"
               closeFn={closeNotificationsPanel}
             />
             <NotificationsCentral />
           </HeaderPanel>
-          <HeaderPanel expanded={myProfile} className="profile-panel">
+          <HeaderPanel aria-label="My Profile Tab" expanded={myProfile} className="profile-panel">
             <RightPanelTitle
               title="My Profile"
               closeFn={closeMyProfilePanel}
diff --git a/src/components/Card/index.tsx b/src/components/Card/index.tsx
index 46bc6635e..08040f216 100644
--- a/src/components/Card/index.tsx
+++ b/src/components/Card/index.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
 
-import './styles.scss';
-
 import { Tile, OverflowMenu, OverflowMenuItem } from '@carbon/react';
 import * as Icons from '@carbon/icons-react';
 
+import './styles.scss';
+
 interface CardProps {
   icon: string;
   header: string;
diff --git a/src/components/EmptySection/index.tsx b/src/components/EmptySection/index.tsx
index a1c7a2751..244928d96 100644
--- a/src/components/EmptySection/index.tsx
+++ b/src/components/EmptySection/index.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
-import './styles.scss';
 
 import * as Icons from '@carbon/icons-react';
 
+import './styles.scss';
+
 interface EmptySectionProps {
   icon: string;
   title: string;
diff --git a/src/components/FavoriteActivities/index.tsx b/src/components/FavoriteActivities/index.tsx
index 7ca9bbe58..6ac7a04cb 100644
--- a/src/components/FavoriteActivities/index.tsx
+++ b/src/components/FavoriteActivities/index.tsx
@@ -2,12 +2,14 @@ import React from 'react';
 
 import { Tooltip, Row, Column } from '@carbon/react';
 import { Information } from '@carbon/icons-react';
+
 import Card from '../Card';
+import EmptySection from '../EmptySection';
 
 import CardType from '../../types/Card';
-import './styles.scss';
 import FavoriteActivitiesCardItems from '../../mock-data/FavoriteActivitiesCardItems';
-import EmptySection from '../EmptySection';
+
+import './styles.scss';
 
 const FavoriteActivities = () => {
   const [cards, setCards] = React.useState<CardType[]>(FavoriteActivitiesCardItems);
diff --git a/src/components/PageTitle/index.tsx b/src/components/PageTitle/index.tsx
new file mode 100644
index 000000000..5f118a1e2
--- /dev/null
+++ b/src/components/PageTitle/index.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+
+import {
+  Column,
+  IconButton
+} from '@carbon/react';
+import { Favorite } from '@carbon/icons-react';
+
+import './styles.css';
+
+interface PageTitleProps {
+  title: string;
+  subtitle: string;
+  favorite?: boolean;
+}
+
+// TODO: Toggle Favorite logic
+const PageTitle = ({ title, subtitle, favorite }: PageTitleProps) => (
+  <Column sm={4} md={4} className="title-section">
+    <div className={favorite ? 'title-favorite' : ''}>
+      <h1>{title}</h1>
+      {favorite && (
+        <IconButton kind="ghost" label="Favorite" align="right">
+          <Favorite size={28} />
+        </IconButton>
+      )}
+    </div>
+    <h4>
+      {subtitle}
+    </h4>
+  </Column>
+);
+
+export default PageTitle;
diff --git a/src/components/PageTitle/styles.css b/src/components/PageTitle/styles.css
new file mode 100644
index 000000000..a75471bb6
--- /dev/null
+++ b/src/components/PageTitle/styles.css
@@ -0,0 +1,33 @@
+.title-section {
+  padding-left: 3.5rem;
+}
+
+.title-favorite {
+  display: flex;
+  align-items: center;
+}
+
+.title-favorite button{
+  margin-left: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
+.title-favorite button svg{
+  margin-bottom: 0.1875rem;
+}
+
+@media only screen and (max-width: 1584px) {
+  .title-section {
+    padding-left: 3rem;
+  }
+}
+
+@media only screen and (max-width: 672px) {
+  .title-section {
+    padding-left: 2rem;
+  }
+
+  .title-section h4 {
+    width: 90vw;
+  }
+}
diff --git a/src/components/RecentActivities/index.tsx b/src/components/RecentActivities/index.tsx
index 1d4499a2a..8a4acbab2 100644
--- a/src/components/RecentActivities/index.tsx
+++ b/src/components/RecentActivities/index.tsx
@@ -10,12 +10,13 @@ import {
   TabPanels,
   TabPanel
 } from '@carbon/react';
+
 import ActivityTable from '../ActivityTable';
+import EmptySection from '../EmptySection';
 
 import RecentActivityItems from '../../mock-data/RecentActivityItems';
 
 import './styles.scss';
-import EmptySection from '../EmptySection';
 
 const RecentActivities = () => {
   const listItems = RecentActivityItems;
@@ -62,7 +63,6 @@ const RecentActivities = () => {
                   description="Your recent requests will appear here once you generate one"
                 />
               </div>
-
               )}
             </TabPanel>
             <TabPanel>Placeholder</TabPanel>
diff --git a/src/components/RightPanelTitle/index.tsx b/src/components/RightPanelTitle/index.tsx
index f0530aafb..956ec0d38 100644
--- a/src/components/RightPanelTitle/index.tsx
+++ b/src/components/RightPanelTitle/index.tsx
@@ -11,11 +11,11 @@ interface RightPanelTitleProps {
 }
 
 const RightPanelTitle = ({ title, closeFn }: RightPanelTitleProps) => (
-  <div className="title-section">
+  <div className="right-title-section">
     <h4>
       {title}
     </h4>
-    <div className="title-buttons">
+    <div className="right-title-buttons">
       <IconButton kind="ghost" label="Settings" align="bottom">
         <Settings />
       </IconButton>
diff --git a/src/components/RightPanelTitle/styles.css b/src/components/RightPanelTitle/styles.css
index a819d0e76..0a832d2b0 100644
--- a/src/components/RightPanelTitle/styles.css
+++ b/src/components/RightPanelTitle/styles.css
@@ -1,4 +1,4 @@
-.title-section {
+.right-title-section {
   display: flex;
   justify-content: space-between;
   align-items: center;
diff --git a/src/layout/PublicLayout/styles.scss b/src/layout/PublicLayout/styles.scss
index 228e47fe4..9b8f39beb 100644
--- a/src/layout/PublicLayout/styles.scss
+++ b/src/layout/PublicLayout/styles.scss
@@ -1,6 +1,7 @@
 @use '../../theme/variables.scss' as vars;
 
 .mainContainer {
+  overflow-x: hidden;
   padding-top: 5.625rem;
   padding-left: 16rem;
 }
@@ -9,6 +10,11 @@
   max-width: none;
 }
 
+.page-content h1,
+.page-content h3 {
+  padding-bottom: 0.5rem;
+}
+
 @media only screen and (max-width: 1056px) {
   .mainContainer {
     padding-top: 5rem;
diff --git a/src/mock-data/LeftPanelItems.ts b/src/mock-data/LeftPanelItems.ts
index 05b92e074..3ec202b07 100644
--- a/src/mock-data/LeftPanelItems.ts
+++ b/src/mock-data/LeftPanelItems.ts
@@ -11,7 +11,7 @@ const LeftPanelItems = [
       {
         name: 'Seedlots',
         icon: 'SoilMoistureField',
-        link: '#',
+        link: '/seedlot',
         disabled: true
       },
       {
diff --git a/src/views/Dashboard/dashboard.tsx b/src/views/Dashboard/dashboard.tsx
index c59a802bc..f1ceec35f 100644
--- a/src/views/Dashboard/dashboard.tsx
+++ b/src/views/Dashboard/dashboard.tsx
@@ -2,26 +2,22 @@ import React from 'react';
 
 import {
   FlexGrid,
-  Column,
   Row,
   Stack
 } from '@carbon/react';
 
+import PageTitle from '../../components/PageTitle';
 import FavoriteActivities from '../../components/FavoriteActivities';
 import RecentActivities from '../../components/RecentActivities';
 
-import './styles.scss';
-
 const Dashboard = () => (
   <FlexGrid className="dashboard-page">
     <Stack gap={7}>
       <Row>
-        <Column sm={4} md={4} className="dashboard-title">
-          <h1 data-testid="home-title">Dashboard</h1>
-          <h4>
-            See your favorite and recent activities inside SPAR system
-          </h4>
-        </Column>
+        <PageTitle
+          title="Dashboard"
+          subtitle="See your favorite and recent activities inside SPAR system"
+        />
       </Row>
       <FavoriteActivities />
       <RecentActivities />
diff --git a/src/views/Dashboard/styles.scss b/src/views/Dashboard/styles.scss
deleted file mode 100644
index 520ab90e4..000000000
--- a/src/views/Dashboard/styles.scss
+++ /dev/null
@@ -1,31 +0,0 @@
-@use '../../theme/variables.scss' as vars;
-
-.dashboard-page {
-  overflow-x: hidden;
-}
-
-.page-content h1,
-.page-content h3 {
-  padding-bottom: 0.5rem;
-}
-
-.dashboard-title {
-  padding-left: 3.5rem;
-}
-
-@media only screen and (max-width: 1584px) {
-  .dashboard-title {
-    padding-left: 3rem;
-  }
-}
-
-@media only screen and (max-width: 672px) {
-  .dashboard-title {
-    padding-left: 2rem;
-  }
-
-  .dashboard-title h4 {
-    width: 90vw;
-  }
-}
-
diff --git a/src/views/SeedlotDashboard/index.tsx b/src/views/SeedlotDashboard/index.tsx
new file mode 100644
index 000000000..55d7815a3
--- /dev/null
+++ b/src/views/SeedlotDashboard/index.tsx
@@ -0,0 +1,54 @@
+import React from 'react';
+import {
+  FlexGrid,
+  Row,
+  Column,
+  Stack
+} from '@carbon/react';
+
+import PageTitle from '../../components/PageTitle';
+
+import './styles.css';
+
+const SeedlotDashboard = () => (
+  <FlexGrid className="seedlot-page">
+    <Stack gap={7}>
+      <Row>
+        <PageTitle
+          title="Seedlots"
+          subtitle="Register and manage your seedlots"
+          favorite
+        />
+      </Row>
+      <Row className="seedlot-dashboard-content">
+        <Column sm={4} md={4} lg={4}>
+          <span>
+            Card Placeholder
+          </span>
+        </Column>
+        <Column sm={4} md={4} lg={4}>
+          <span>
+            Card Placeholder
+          </span>
+        </Column>
+        <Column sm={4} md={4} lg={4}>
+          <span>
+            Card Placeholder
+          </span>
+        </Column>
+        <Column sm={4} md={4} lg={4}>
+          <span>
+            Card Placeholder
+          </span>
+        </Column>
+      </Row>
+      <Row className="seedlot-dashboard-content">
+        <Column>
+          Exisisting Seedlot Placeholder
+        </Column>
+      </Row>
+    </Stack>
+  </FlexGrid>
+);
+
+export default SeedlotDashboard;
diff --git a/src/views/SeedlotDashboard/styles.css b/src/views/SeedlotDashboard/styles.css
new file mode 100644
index 000000000..3591b7fac
--- /dev/null
+++ b/src/views/SeedlotDashboard/styles.css
@@ -0,0 +1,15 @@
+.seedlot-dashboard-content {
+  padding-left: 2.5rem;
+}
+
+@media only screen and (max-width: 1584px) {
+  .seedlot-dashboard-content {
+    padding-left: 2rem;
+  }
+}
+
+@media only screen and (max-width: 672px) {
+  .seedlot-dashboard-content {
+    padding-left: 1rem;
+  }
+}