Merge pull request #1737 from Northeastern-Electric-Racing/#1642-cr-popup-same-wbs

#1642 cr popup same wbs

Author: RChandler234

src/frontend/src/pages/ChangeRequestDetailPage/OtherChangeRequestsPopupTabs.tsx

@@ -5,10 +5,9 @@
 
 import React, { useState } from 'react';
 import { Box, useTheme, Collapse, Tabs, Tab, Typography } from '@mui/material';
-import { ChangeRequest } from 'shared';
+import { ChangeRequest, wbsPipe } from 'shared';
 import ChangeRequestDetailCard from '../../components/ChangeRequestDetailCard';
 import { useAllChangeRequests } from '../../hooks/change-requests.hooks';
-import { ExpandLess, ExpandMore } from '@mui/icons-material';
 import LoadingIndicator from '../../components/LoadingIndicator';
 import ErrorPage from '../ErrorPage';
 import { fullNamePipe } from '../../utils/pipes';
@@ -38,18 +37,14 @@ const OtherChangeRequestsPopupTabs: React.FC<OtherChangeRequestsPopupTabsProps>
       return b.dateSubmitted.getTime() - a.dateSubmitted.getTime();
     });
 
+  const crsFromWbs = changeRequests
+    ?.filter((cr) => cr.wbsName === changeRequest.wbsName)
+    .sort((a: ChangeRequest, b: ChangeRequest) => {
+      return b.dateSubmitted.getTime() - a.dateSubmitted.getTime();
+    });
+
   const displayTab = (value: number, title: string) => (
-    <Tab
-      value={value}
-      sx={{ borderRadius: '16px 16px 0 0' }}
-      label={
-        <Typography sx={{ display: 'flex' }}>
-          {title}
-          {tab === value ? <ExpandMore sx={{ pl: 0.5 }} /> : <ExpandLess sx={{ pl: 0.5 }} />}
-        </Typography>
-      }
-      onClick={() => tab === value && setTab(0)}
-    />
+    <Tab value={value} sx={{ borderRadius: '16px 16px 0 0' }} label={title} onClick={() => tab === value && setTab(0)} />
   );
 
   const displayCRCards = (crList: ChangeRequest[]) => (
@@ -113,9 +108,12 @@ const OtherChangeRequestsPopupTabs: React.FC<OtherChangeRequestsPopupTabsProps>
           mb: '-1px'
         }}
       >
-        {displayTab(1, `Other CR's from ${fullNamePipe(changeRequest.submitter)}`)}
+        {displayTab(1, `Other CR's on ${wbsPipe(changeRequest.wbsNum)}`)}
+        {displayTab(2, `Other CR's from ${fullNamePipe(changeRequest.submitter)}`)}
       </Tabs>
-      <Collapse in={tab !== 0}>{tab === 1 && displayCRCards(crsFromSubmitter || [])}</Collapse>
+      <Collapse in={tab !== 0}>
+        {tab === 1 ? displayCRCards(crsFromWbs || []) : tab === 2 && displayCRCards(crsFromSubmitter || [])}
+      </Collapse>
     </Box>
   );
 };