#2137 converted modal to pageblock

Author: ArmaanMehra

…/AdminToolsAttendeeDesignReviewModal.tsx …e/AdminToolsAttendeeDesignReviewInfo.tsxsrc/frontend/src/pages/AdminToolsPage/AdminToolsAttendeeDesignReviewModal.tsx renamed to src/frontend/src/pages/AdminToolsPage/AdminToolsAttendeeDesignReviewInfo.tsx src/frontend/src/pages/AdminToolsPage/AdminToolsAttendeeDesignReviewModal.tsx renamed to src/frontend/src/pages/AdminToolsPage/AdminToolsAttendeeDesignReviewInfo.tsx

@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import PageBlock from '../../layouts/PageBlock';
 import {
   TextField,
   FormControl,
@@ -12,14 +13,8 @@ import {
   TableHead,
   TableRow
 } from '@mui/material';
-import NERModal from '../../components/NERModal';
 
-interface AttendeeDesignReviewModalProps {
-  open: boolean;
-  onClose: () => void;
-}
-
-const AttendeeDesignReviewModal: React.FC<AttendeeDesignReviewModalProps> = ({ open, onClose }) => {
+const AdminToolsAttendeeDesignReviewInfo: React.FC = () => {
   const [selectedTeam, setSelectedTeam] = useState('');
   const [searchQuery, setSearchQuery] = useState('');
   const tableHeaderCellStyle = {
@@ -57,13 +52,7 @@ const AttendeeDesignReviewModal: React.FC<AttendeeDesignReviewModalProps> = ({ o
   };
 
   return (
-    <NERModal
-      open={open}
-      onHide={onClose}
-      title="Attendee Design Review Information"
-      showCloseButton={true}
-      hideFormButtons={true}
-    >
+    <PageBlock title="Attendee Design Review Information">
       <FormControl fullWidth sx={{ marginBottom: 2 }}>
         <FormLabel htmlFor="search-by-name">Search by team member name</FormLabel>
         <TextField id="search-by-name" variant="outlined" value={searchQuery} onChange={handleSearchChange} fullWidth />
@@ -104,8 +93,8 @@ const AttendeeDesignReviewModal: React.FC<AttendeeDesignReviewModalProps> = ({ o
           ))}
         </TableBody>
       </Table>
-    </NERModal>
+    </PageBlock>
   );
 };
 
-export default AttendeeDesignReviewModal;
+export default AdminToolsAttendeeDesignReviewInfo;

src/frontend/src/pages/AdminToolsPage/AdminToolsPage.tsx

@@ -5,6 +5,7 @@
 
 import AdminToolsUserManagement from './AdminToolsUserManagement';
 import AdminToolsSlackUpcomingDeadlines from './AdminToolsSlackUpcomingDeadlines';
+import AdminToolsAttendeeDesignReviewInfo from './AdminToolsAttendeeDesignReviewInfo';
 import { useCurrentUser } from '../../hooks/users.hooks';
 import { isAdmin, isHead } from 'shared';
 import PageLayout from '../../components/PageLayout';
@@ -20,6 +21,7 @@ const AdminToolsPage: React.FC = () => {
     <PageLayout title="Admin Tools">
       {isHead(currentUser.role) && <AdminToolsUserManagement />}
       {isAdmin(currentUser.role) && <AdminToolsSlackUpcomingDeadlines />}
+      {isAdmin(currentUser.role) && <AdminToolsAttendeeDesignReviewInfo />}
       {(isAdmin(currentUser.role) || currentUser.isAtLeastFinanceLead) && <AdminToolsFinanceConfig />}
       {isAdmin(currentUser.role) && <TeamsTools />}
       {isAdmin(currentUser.role) && <AdminToolsBOMConfig />}

src/frontend/src/pages/AdminToolsPage/AdminToolsSlackUpcomingDeadlines.tsx

@@ -13,17 +13,13 @@ import { useCurrentUser } from '../../hooks/users.hooks';
 import { isAdmin } from 'shared';
 import { useToast } from '../../hooks/toasts.hooks';
 import HelpIcon from '@mui/icons-material/Help';
-import AttendeeDesignReviewModal from './AdminToolsAttendeeDesignReviewModal';
 
 const AdminToolsSlackUpcomingDeadlines: React.FC = () => {
   const user = useCurrentUser();
   const toast = useToast();
   const [deadline, setDeadline] = useState<Date>(new Date());
   const [disableButton, setDisableButton] = useState(false);
   const { mutateAsync, isLoading } = useSlackUpcomingDeadlines();
-  const [isModalOpen, setIsModalOpen] = useState(false);
-  const handleOpenModal = () => setIsModalOpen(true);
-  const handleCloseModal = () => setIsModalOpen(false);
 
   const datePickerOnChange = (value: Date | null) => {
     if (value) setDeadline(value);
@@ -70,17 +66,7 @@ const AdminToolsSlackUpcomingDeadlines: React.FC = () => {
             Send
           </NERButton>
         </Grid>
-        <Grid item>
-          <NERButton
-            variant="contained"
-            disabled={!isAdmin(user.role) || disableButton || isLoading}
-            onClick={handleOpenModal} // Opens the modal
-          >
-            Attendee Design Review Information
-          </NERButton>
-        </Grid>
       </Grid>
-      <AttendeeDesignReviewModal open={isModalOpen} onClose={handleCloseModal} />
     </PageBlock>
   );
 };