Merge branch 'develop' into docs-site

Author: chpy04

src/frontend/src/pages/FinancePage/ReimbursementRequestDetailPage/ReimbursementProductsView.tsx

@@ -1,7 +1,8 @@
-import { Box, Table, TableBody, TableCell, TableHead, TableRow, Typography } from '@mui/material';
+import { Box, Link, Table, TableBody, TableCell, TableHead, TableRow, Typography } from '@mui/material';
 import { getUniqueWbsElementsWithProductsFromReimbursementRequest } from '../../../utils/reimbursement-request.utils';
 import { ReimbursementRequest } from 'shared';
 import { centsToDollar } from '../../../utils/pipes';
+import { routes } from '../../../utils/routes';
 
 interface ReimbursementRequestProductsViewProps {
   reimbursementRequest: ReimbursementRequest;
@@ -21,7 +22,6 @@ const ReimbursementProductsView: React.FC<ReimbursementRequestProductsViewProps>
     (product) => product.refundSources.length > 1
   );
 
-  // put all the refund source names in a set to avoid duplicate names
   const refundSourceNames: string[] = Array.from(
     new Set(
       reimbursementRequest.reimbursementProducts.flatMap((product) => product.refundSources.map((rs) => rs.indexCode.name))
@@ -58,16 +58,26 @@ const ReimbursementProductsView: React.FC<ReimbursementRequestProductsViewProps>
               return (
                 <TableRow key={key}>
                   <TableCell>
-                    <Box
-                      sx={{
-                        maxWidth: '64ch',
-                        overflowWrap: 'anywhere',
-                        whiteSpace: 'normal'
-                      }}
-                    >
-                      {uniqueWbsElementsWithProducts.get(key)?.map((product, index) => (
-                        <div key={index}>{product.name}</div>
-                      ))}
+                    <Box sx={{ maxWidth: '64ch', overflowWrap: 'anywhere', whiteSpace: 'normal' }}>
+                      {uniqueWbsElementsWithProducts.get(key)?.map((product, index) => {
+                        const bomUrl = (() => {
+                          if (!product.materialId) return undefined;
+                          const reason = product.reimbursementProductReason;
+                          if (!('wbsNum' in reason)) return undefined;
+                          return `${routes.PROJECTS}/${reason.wbsNum.carNumber}.${reason.wbsNum.projectNumber}.${reason.wbsNum.workPackageNumber}/bom`;
+                        })();
+                        return (
+                          <div key={index}>
+                            {bomUrl ? (
+                              <Link href={bomUrl} underline="hover">
+                                {product.name}
+                              </Link>
+                            ) : (
+                              product.name
+                            )}
+                          </div>
+                        );
+                      })}
                     </Box>
                   </TableCell>
                   {!allKeysAreSame && <TableCell>{key}</TableCell>}

src/frontend/src/pages/FinancePage/ReimbursementRequestForm/ReimbursementProductTable.tsx

@@ -36,7 +36,7 @@ import { ReimbursementRequestFormInput } from './ReimbursementRequestForm';
 import { useTheme } from '@mui/system';
 import { useEffect, useState, useRef, useMemo } from 'react';
 import { useGetAllOtherProductReason } from '../../../hooks/finance.hooks';
-import { useGetMaterialsForWbsElement, useGetAssembliesForWbsElement } from '../../../hooks/bom.hooks';
+import { useGetMaterialsForWbsElement } from '../../../hooks/bom.hooks';
 import LoadingIndicator from '../../../components/LoadingIndicator';
 import ErrorPage from '../../ErrorPage';
 import { formatReasonName } from '../../../utils/reimbursement-request.utils';
@@ -174,13 +174,6 @@ const ReimbursementProductTable: React.FC<ReimbursementProductTableProps> = ({
   const [currentProject, setCurrentProject] = useState<ProjectPreview | null>(null);
   const [pendingMaterialIndices, setPendingMaterialIndices] = useState<Set<number>>(new Set());
 
-  const {
-    data: assemblies,
-    isLoading: assembliesLoading,
-    isError: assembliesIsError,
-    error: assembliesError
-  } = useGetAssembliesForWbsElement(currentProject?.wbsNum || { carNumber: 0, projectNumber: 0, workPackageNumber: 0 });
-
   const onCostBlurHandler = (value: number, index: number) => {
     setValue(`reimbursementProducts.${index}.cost`, parseFloat(value.toFixed(2)));
 
@@ -337,9 +330,6 @@ const ReimbursementProductTable: React.FC<ReimbursementProductTableProps> = ({
   if (otherReasonIsError) {
     return <ErrorPage message={otherReasonError.message} />;
   }
-  if (assembliesIsError) {
-    return <ErrorPage message={assembliesError?.message || 'Failed to load assemblies'} />;
-  }
 
   return (
     <>
@@ -864,13 +854,13 @@ const ReimbursementProductTable: React.FC<ReimbursementProductTableProps> = ({
         </Table>
       </TableContainer>
 
-      {currentProject && !assembliesLoading && assemblies && (
+      {currentProject && (
         <CreateMaterialModal
           open={showCreateMaterialModal}
           onHide={handleCloseCreateMaterial}
           wbsElement={currentProject}
-          assemblies={assemblies}
           onSuccess={handleMaterialCreated}
+          fromRRForm
         />
       )}
     </>

src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/MaterialForm/CreateMaterialModal.tsx

@@ -1,24 +1,33 @@
-import { Assembly, WbsElementPreview } from 'shared';
+import { WbsElementPreview } from 'shared';
 import MaterialForm, { MaterialDataSubmission } from './MaterialForm';
-import LoadingIndicator from '../../../../../components/LoadingIndicator';
 import { useToast } from '../../../../../hooks/toasts.hooks';
-import { useCreateMaterial } from '../../../../../hooks/bom.hooks';
+import { useCreateMaterial, useGetAssembliesForWbsElement } from '../../../../../hooks/bom.hooks';
 import ErrorPage from '../../../../ErrorPage';
 
 export interface CreateMaterialModalProps {
   open: boolean;
   onHide: () => void;
   wbsElement: WbsElementPreview;
-  assemblies: Assembly[];
   onSuccess?: (materialName: string) => void;
+  fromRRForm?: boolean;
 }
 
-const CreateMaterialModal: React.FC<CreateMaterialModalProps> = ({ open, onHide, assemblies, wbsElement, onSuccess }) => {
-  const { mutateAsync: createMaterial, isLoading, isError, error } = useCreateMaterial(wbsElement.wbsNum);
+const CreateMaterialModal: React.FC<CreateMaterialModalProps> = ({
+  open,
+  onHide,
+  wbsElement,
+  onSuccess,
+  fromRRForm = false
+}) => {
+  const { mutateAsync: createMaterial } = useCreateMaterial(wbsElement.wbsNum);
+  const {
+    data: assemblies,
+    isError: assembliesIsError,
+    error: assembliesError
+  } = useGetAssembliesForWbsElement(wbsElement.wbsNum);
   const toast = useToast();
 
-  if (isLoading) return <LoadingIndicator />;
-  if (isError) return <ErrorPage message={error?.message} />;
+  if (assembliesIsError) return <ErrorPage message={assembliesError?.message} />;
 
   const onSubmit = async (data: MaterialDataSubmission): Promise<void> => {
     try {
@@ -37,7 +46,16 @@ const CreateMaterialModal: React.FC<CreateMaterialModalProps> = ({ open, onHide,
     }
   };
 
-  return <MaterialForm submitText="Add" onSubmit={onSubmit} assemblies={assemblies} onHide={onHide} open={open} />;
+  return (
+    <MaterialForm
+      submitText="Add"
+      onSubmit={onSubmit}
+      assemblies={assemblies}
+      onHide={onHide}
+      open={open}
+      fromRRForm={fromRRForm}
+    />
+  );
 };
 
 export default CreateMaterialModal;