Merge pull request #1676 from Northeastern-Electric-Racing/#1641-other-CRs-from-user-popup

#1641 other CRs from user popup

Author: RChandler234

src/frontend/src/components/ChangeRequestDetailCard.tsx

@@ -106,7 +106,7 @@ const ChangeRequestDetailCard: React.FC<ChangeRequestDetailCardProps> = ({ chang
   const ChangeRequestTypeView = () => determineChangeRequestTypeView(changeRequest);
   const pillColor = determineChangeRequestPillColor(changeRequest.type);
   return (
-    <Card sx={{ width: 300, mr: 1, mb: 1, borderRadius: 5 }}>
+    <Card sx={{ minWidth: 300, width: 300, mr: 1, mb: 1, borderRadius: 5 }}>
       <CardContent>
         <Grid container justifyContent="space-between" alignItems="center">
           <Grid item>

src/frontend/src/pages/ChangeRequestDetailPage/ChangeRequestDetailsView.tsx

@@ -30,6 +30,7 @@ import LoadingIndicator from '../../components/LoadingIndicator';
 import ErrorPage from '../ErrorPage';
 import PageLayout from '../../components/PageLayout';
 import ChangeRequestActionMenu from './ChangeRequestActionMenu';
+import OtherChangeRequestsPopupTabs from './OtherChangeRequestsPopupTabs';
 
 const buildDetails = (cr: ChangeRequest): ReactElement => {
   switch (cr.type) {
@@ -152,6 +153,7 @@ const ChangeRequestDetailsView: React.FC<ChangeRequestDetailsProps> = ({
       {deleteModalShow && (
         <DeleteChangeRequest modalShow={deleteModalShow} handleClose={handleDeleteClose} cr={changeRequest} />
       )}
+      <OtherChangeRequestsPopupTabs changeRequest={changeRequest} />
     </PageLayout>
   );
 };

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

@@ -0,0 +1,123 @@
+/*
+ * This file is part of NER's FinishLine and licensed under GNU AGPLv3.
+ * See the LICENSE file in the repository root folder for details.
+ */
+
+import React, { useState } from 'react';
+import { Box, useTheme, Collapse, Tabs, Tab, Typography } from '@mui/material';
+import { ChangeRequest } 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';
+
+interface OtherChangeRequestsPopupTabsProps {
+  changeRequest: ChangeRequest;
+}
+
+const OtherChangeRequestsPopupTabs: React.FC<OtherChangeRequestsPopupTabsProps> = ({
+  changeRequest
+}: OtherChangeRequestsPopupTabsProps) => {
+  const theme = useTheme();
+  const [tab, setTab] = useState(0);
+  const { data: changeRequests, isError, isLoading, error } = useAllChangeRequests();
+
+  if (isLoading) return <LoadingIndicator />;
+  if (isError) return <ErrorPage error={error} message={error.message} />;
+
+  // the CRs submitted or reviewed by the submitter of this CR
+  const crsFromSubmitter = changeRequests
+    ?.filter(
+      (cr) =>
+        (cr.submitter.userId === changeRequest.submitter.userId || cr.reviewer?.userId === changeRequest.submitter.userId) &&
+        cr.crId !== changeRequest.crId
+    )
+    .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)}
+    />
+  );
+
+  const displayCRCards = (crList: ChangeRequest[]) => (
+    <Box
+      sx={{
+        display: 'flex',
+        justifyContent: 'flex-start',
+        padding: '20px',
+        background: theme.palette.background.paper,
+        borderTop: `solid 1px ${theme.palette.divider}`,
+        borderLeft: `solid 1px ${theme.palette.divider}`,
+        '&::-webkit-scrollbar': {
+          height: '20px'
+        },
+        '&::-webkit-scrollbar-track': {
+          backgroundColor: 'transparent'
+        },
+        '&::-webkit-scrollbar-thumb': {
+          backgroundColor: theme.palette.divider,
+          borderRadius: '20px',
+          border: '6px solid transparent',
+          backgroundClip: 'content-box'
+        },
+        overflowX: 'scroll'
+      }}
+    >
+      {crList.length !== 0 ? (
+        crList.map((cr: ChangeRequest) => <ChangeRequestDetailCard changeRequest={cr} />)
+      ) : (
+        <Typography>No related change requests.</Typography>
+      )}
+    </Box>
+  );
+
+  return (
+    <Box
+      sx={{
+        position: 'fixed',
+        bottom: '0px',
+        left: '65px',
+        width: 'calc(100% - 65px)'
+      }}
+    >
+      <Tabs
+        value={tab}
+        onChange={(e, newValue: number) => setTab(newValue)}
+        sx={{
+          '.MuiTabs-indicator': {
+            background: 'transparent'
+          },
+          '& button': {
+            background: theme.palette.background.paper,
+            border: `solid 1px ${theme.palette.divider}`,
+            color: theme.palette.text.primary,
+            textTransform: 'none'
+          },
+          '& button.Mui-selected': {
+            color: theme.palette.text.primary,
+            borderBottom: 'transparent'
+          },
+          mb: '-1px'
+        }}
+      >
+        {displayTab(1, `Other CR's from ${fullNamePipe(changeRequest.submitter)}`)}
+      </Tabs>
+      <Collapse in={tab !== 0}>{tab === 1 && displayCRCards(crsFromSubmitter || [])}</Collapse>
+    </Box>
+  );
+};
+
+export default OtherChangeRequestsPopupTabs;