From dfebecf9d69d3f0b6b5836d77b4ce6d8967e4e8b Mon Sep 17 00:00:00 2001
From: Kevin Hashimoto <kevin.hashimoto@gov.bc.ca>
Date: Tue, 17 Dec 2024 17:52:02 -0800
Subject: [PATCH] feat: nested links

---
 .../components/ActivityLinkList.jsx           | 118 ++++++++++++------
 1 file changed, 78 insertions(+), 40 deletions(-)

diff --git a/frontend/src/views/ComplianceReports/components/ActivityLinkList.jsx b/frontend/src/views/ComplianceReports/components/ActivityLinkList.jsx
index c968f8e4a..dc525b791 100644
--- a/frontend/src/views/ComplianceReports/components/ActivityLinkList.jsx
+++ b/frontend/src/views/ComplianceReports/components/ActivityLinkList.jsx
@@ -22,30 +22,33 @@ export const ActivityLinksList = () => {
               compliancePeriod
             ).replace(':complianceReportId', complianceReportId)
           )
-        }
-      },
-      {
-        name: t('report:activityLists.finalSupplyEquipment'),
-        action: () => {
-          navigate(
-            ROUTES.REPORTS_ADD_FINAL_SUPPLY_EQUIPMENTS.replace(
-              ':compliancePeriod',
-              compliancePeriod
-            ).replace(':complianceReportId', complianceReportId)
-          )
-        }
-      },
-      {
-        name: t('report:activityLists.allocationAgreements'),
-        action: () => {
-          navigate(
-            ROUTES.REPORTS_ADD_ALLOCATION_AGREEMENTS.replace(
-              ':compliancePeriod',
-              compliancePeriod
-            ).replace(':complianceReportId', complianceReportId)
-          )
-        }
+        },
+        children: [
+          {
+            name: t('report:activityLists.finalSupplyEquipment'),
+            action: () => {
+              navigate(
+                ROUTES.REPORTS_ADD_FINAL_SUPPLY_EQUIPMENTS.replace(
+                  ':compliancePeriod',
+                  compliancePeriod
+                ).replace(':complianceReportId', complianceReportId)
+              )
+            }
+          },
+          {
+            name: t('report:activityLists.allocationAgreements'),
+            action: () => {
+              navigate(
+                ROUTES.REPORTS_ADD_ALLOCATION_AGREEMENTS.replace(
+                  ':compliancePeriod',
+                  compliancePeriod
+                ).replace(':complianceReportId', complianceReportId)
+              )
+            }
+          }
+        ]
       },
+
       {
         name: t('report:activityLists.notionalTransfers'),
         action: () => {
@@ -89,24 +92,59 @@ export const ActivityLinksList = () => {
       sx={{ maxWidth: '100%', listStyleType: 'disc' }}
     >
       {activityList.map((activity, index) => (
-        <StyledListItem
-          sx={{ cursor: 'pointer' }}
-          component="a"
-          key={index}
-          alignItems="flex-start"
-          onClick={activity.action}
-        >
-          <BCTypography
-            variant="subtitle2"
-            color="link"
-            sx={{
-              textDecoration: 'underline',
-              '&:hover': { color: 'info.main' }
-            }}
+        <>
+          <StyledListItem
+            sx={{ cursor: 'pointer' }}
+            component="a"
+            key={index}
+            alignItems="flex-start"
+            onClick={activity.action}
           >
-            {activity.name}
-          </BCTypography>
-        </StyledListItem>
+            <BCTypography
+              variant="subtitle2"
+              color="link"
+              sx={{
+                textDecoration: 'underline',
+                '&:hover': { color: 'info.main' }
+              }}
+            >
+              {activity.name}
+            </BCTypography>
+          </StyledListItem>
+          {activity.children && (
+            <List
+              data-test="schedule-list"
+              component="div"
+              sx={{
+                maxWidth: '100%',
+                listStyleType: 'disc',
+                marginLeft: '20px',
+                padding: '0'
+              }}
+            >
+              {activity.children.map((activity, index) => (
+                <StyledListItem
+                  sx={{ cursor: 'pointer' }}
+                  component="a"
+                  key={index}
+                  alignItems="flex-start"
+                  onClick={activity.action}
+                >
+                  <BCTypography
+                    variant="subtitle2"
+                    color="link"
+                    sx={{
+                      textDecoration: 'underline',
+                      '&:hover': { color: 'info.main' }
+                    }}
+                  >
+                    {activity.name}
+                  </BCTypography>
+                </StyledListItem>
+              ))}
+            </List>
+          )}
+        </>
       ))}
     </List>
   )