Improve add report page UX (#44)

* Improve the add report page UX

Author: 0xGeorgii

Backend/SorobanSecurityPortalApi/Controllers/ReportsController.cs

@@ -55,7 +55,7 @@ public async Task<IActionResult> GetImage(int reportId)
 
         [RoleAuthorize(Role.Admin, Role.Moderator, Role.Contributor)]
         [HttpPost("add")]
-        [RequestSizeLimit(10_000_000)]
+        [RequestSizeLimit(60_000_000)]
         public async Task<IActionResult> Add([FromForm] string report, [FromForm] IFormFile? file = null)
         {
             if (string.IsNullOrWhiteSpace(report))
@@ -87,6 +87,10 @@ public async Task<IActionResult> Add([FromForm] string report, [FromForm] IFormF
             };
             if (file != null && file.Length > 0)
             {
+                if (!await _userContextAccessor.IsLoginIdAdmin(userLoginId) && file.Length > 10 * 1024 * 1024)
+                {
+                    return BadRequest("Report file size cannot exceed 10MB");
+                }
                 using var memoryStream = new MemoryStream();
                 await file.CopyToAsync(memoryStream);
                 parsedReport.BinFile = memoryStream.ToArray();

UI/src/features/pages/admin/admin-main-window/error-dialog.tsx

@@ -64,8 +64,13 @@ export default function ErrorDialog() {
         >
         <DialogTitle color={getDialogColor()}>{getDialogTitle()}</DialogTitle>
         <DialogContent>
-          <DialogContentText id="alert-dialog-slide-description">
-            {currentError.errorText}
+          <DialogContentText id="alert-dialog-slide-description" component="div">
+            {currentError.errorText.split('\n').map((line, index) => (
+              <React.Fragment key={index}>
+                {line}
+                {index < currentError.errorText.split('\n').length - 1 && <br />}
+              </React.Fragment>
+            ))}
           </DialogContentText>
         </DialogContent>
         <DialogActions>

UI/src/features/pages/admin/company/list-view/list-companies.tsx

@@ -1,4 +1,3 @@
-import PersonAddIcon from '@mui/icons-material/PersonAdd';
 import ClearIcon from '@mui/icons-material/Clear';
 import {
   IconButton,
@@ -23,6 +22,7 @@ import { useNavigate } from 'react-router-dom';
 import { defaultUiSettings } from '../../../../../api/soroban-security-portal/models/ui-settings.ts';
 import { AuthContextProps, useAuth } from 'react-oidc-context';
 import { Role } from '../../../../../api/soroban-security-portal/models/role.ts';
+import AddBusinessIcon from '@mui/icons-material/AddBusiness';
 
 export const ListCompanies: FC = () => {
   const auth = useAuth();
@@ -110,7 +110,7 @@ export const ListCompanies: FC = () => {
       <Stack direction="row" spacing={2}>
         <Tooltip title="Add Company">
           <IconButton onClick={() => navigate('/admin/companies/add')}>
-            <PersonAddIcon sx={{ color: 'green' }} />
+            <AddBusinessIcon sx={{ color: 'green' }} />
           </IconButton>
         </Tooltip>
       </Stack>

UI/src/features/pages/admin/protocol/list-view/list-protocols.tsx

@@ -1,4 +1,3 @@
-import PersonAddIcon from '@mui/icons-material/PersonAdd';
 import ClearIcon from '@mui/icons-material/Clear';
 import {
   IconButton,
@@ -23,6 +22,7 @@ import { useNavigate } from 'react-router-dom';
 import { defaultUiSettings } from '../../../../../api/soroban-security-portal/models/ui-settings.ts';
 import { AuthContextProps, useAuth } from 'react-oidc-context';
 import { Role } from '../../../../../api/soroban-security-portal/models/role.ts';
+import AddToQueueIcon from '@mui/icons-material/AddToQueue';
 
 export const ListProtocols: FC = () => {
   const auth = useAuth();
@@ -118,7 +118,7 @@ export const ListProtocols: FC = () => {
       <Stack direction="row" spacing={2}>
         <Tooltip title="Add Protocol">
           <IconButton onClick={() => navigate('/admin/protocols/add')}>
-            <PersonAddIcon sx={{ color: 'green' }} />
+            <AddToQueueIcon sx={{ color: 'green' }} />
           </IconButton>
         </Tooltip>
       </Stack>

UI/src/features/pages/admin/reports/list-view/list-reports.tsx

@@ -9,6 +9,7 @@ import {
   Tooltip,
   Modal,
   Box,
+  Stack,
 } from '@mui/material';
 import {
   DataGrid,
@@ -27,6 +28,7 @@ import { defaultUiSettings } from '../../../../../api/soroban-security-portal/mo
 import { environment } from '../../../../../environments/environment';
 import { AuthContextProps, useAuth } from 'react-oidc-context';
 import { Role } from '../../../../../api/soroban-security-portal/models/role';
+import AssignmentAddIcon from '@mui/icons-material/AssignmentAdd';
 
 export const ReportManagement: FC = () => {
 
@@ -169,6 +171,14 @@ export const ReportManagement: FC = () => {
 
   return (
     <div style={defaultUiSettings.listAreaStyle}>
+      <Stack direction="row" spacing={2}>
+        <Tooltip title="Add Report">
+          <IconButton onClick={() => navigate('/reports/add')}>
+            <AssignmentAddIcon sx={{ color: 'green' }} />
+          </IconButton>
+        </Tooltip>
+      </Stack>
+
       <div style={{ height: 'calc(110vh - 64px)' }}>
         <DataGrid
           getRowId={(row: Report) => row.id}

UI/src/features/pages/admin/vulnerabilities/list-view/list-vulnerabilities.tsx

@@ -7,6 +7,7 @@ import {
   Link,
   Tooltip,
   Typography,
+  Stack,
 } from '@mui/material';
 import {
   DataGrid,
@@ -28,6 +29,7 @@ import { useNavigate } from 'react-router-dom';
 import { MarkdownView } from '../../../../../components/MarkdownView.tsx';
 import { AuthContextProps, useAuth } from 'react-oidc-context';
 import { Role } from '../../../../../api/soroban-security-portal/models/role.ts';
+import PostAdd from '@mui/icons-material/PostAdd';
 
 export const VulnerabilityManagement: FC = () => {
   const currentPageState: CurrentPageState = {
@@ -199,6 +201,14 @@ export const VulnerabilityManagement: FC = () => {
 
   return (
     <div style={defaultUiSettings.listAreaStyle}>
+      <Stack direction="row" spacing={2}>
+        <Tooltip title="Add Vulnerability">
+          <IconButton onClick={() => navigate('/vulnerabilities/add')}>
+            <PostAdd sx={{ color: 'green' }} />
+          </IconButton>
+        </Tooltip>
+      </Stack>
+
       <div style={{ height: 'calc(110vh - 64px)' }}>
         <DataGrid
           getRowId={(row: Vulnerability) => row.id}

UI/src/features/pages/regular/reports-add/hooks/reports-add.hook.ts

@@ -22,8 +22,7 @@ export const useReportAdd = () => {
       formData.append('report', JSON.stringify(report));
 
       // Call API with file upload
-      const response = await addReportCall(formData);
-      console.log('Report added with file:', response);
+      await addReportCall(formData);
     } catch (error) {
       console.error('Error adding report:', error);
       throw error;

UI/src/features/pages/regular/reports-add/reports-add.tsx

@@ -38,7 +38,7 @@ export const AddReport: FC = () => {
   const [protocol, setProtocol] = useState<ProtocolItem | null>(null);
   const [company, setCompany] = useState<CompanyItem | null>(null);
   const [auditor, setAuditor] = useState<AuditorItem | null>(null);
-  const [date, setDate] = useState<Date | null>(null);
+  const [date, setDate] = useState<Date | null>(new Date());
   const [selectedFile, setSelectedFile] = useState<File | null>(null);
   const [fileError, setFileError] = useState('');
   const [isDragOver, setIsDragOver] = useState(false);
@@ -50,6 +50,10 @@ export const AddReport: FC = () => {
   const theme = useTheme();
   const [searchParams] = useSearchParams();
 
+  const isAdmin = auth.isAuthenticated && auth.user && (auth.user?.profile.role === Role.Admin);
+  const isModerator = auth.isAuthenticated && auth.user && (auth.user?.profile.role === Role.Moderator);
+  const isContributor = auth.isAuthenticated && auth.user && (auth.user?.profile.role === Role.Contributor);
+
   const canAddReport = (auth: AuthContextProps) => 
     auth.user?.profile.role === Role.Admin || auth.user?.profile.role === Role.Contributor || auth.user?.profile.role === Role.Moderator;
 
@@ -116,7 +120,7 @@ export const AddReport: FC = () => {
     }
 
     // Check file size (max 10MB)
-    if (file.size > 10 * 1024 * 1024) {
+    if (!isAdmin && file.size > 10 * 1024 * 1024) {
       setFileError('File size must be less than 10MB');
       setSelectedFile(null);
       return;
@@ -163,13 +167,25 @@ export const AddReport: FC = () => {
   };
 
   const addNewReport = async () => {
+    let validationErrors: string[] = [];
     if (!title) {
-      showError('Please fill all required fields');
-      return;
+      validationErrors.push('Please fill in the title');
+    }
+    if (!company) {
+      validationErrors.push('Please select a company');
+    }
+    if (!protocol) {
+      validationErrors.push('Please select a protocol');
+    }
+    if (!auditor) {
+      validationErrors.push('Please select an auditor');
     }
-
     if (!selectedFile && !url) {
-      showError('Please provide either a PDF file or a URL');
+      validationErrors.push('Please provide either a PDF file or a URL');
+    }
+
+    if (validationErrors.length > 0) {
+      showError(validationErrors.map(e => e + '.').join('\n'));
       return;
     }
 
@@ -247,6 +263,7 @@ export const AddReport: FC = () => {
                       label="Company"
                       size="small"
                       sx={{ minWidth: 290 }}
+                      required
                     />
                   )}
                   renderTags={(value, getTagProps) =>
@@ -261,6 +278,11 @@ export const AddReport: FC = () => {
                     ))
                   }
                 />
+                <Typography variant="caption" color="text.secondary" sx={{ mt: 1, display: 'block' }}>
+                  {isContributor ? "Company missed? Please contact a moderator or admin." : (
+                    (isModerator || isAdmin) ? <span>Company missed? <a href="/admin/companies/add" target="_blank" rel="noopener noreferrer" style={{ color: 'inherit', textDecoration: 'underline', cursor: 'pointer' }}>Add it here</a></span> : ""
+                  )}
+                </Typography>
               </Grid> 
               <Grid size={12}>
                 <Autocomplete
@@ -274,6 +296,7 @@ export const AddReport: FC = () => {
                       label="Protocol"
                       size="small"
                       sx={{ minWidth: 290 }}
+                      required
                     />
                   )}
                   renderTags={(value, getTagProps) =>
@@ -288,6 +311,11 @@ export const AddReport: FC = () => {
                     ))
                   }
                 />
+                <Typography variant="caption" color="text.secondary" sx={{ mt: 1, display: 'block' }}>
+                  {isContributor ? "Protocol missed? Please contact a moderator or admin." : (
+                    (isModerator || isAdmin) ? <span>Protocol missed? <a href="/admin/protocols/add" target="_blank" rel="noopener noreferrer" style={{ color: 'inherit', textDecoration: 'underline', cursor: 'pointer' }}>Add it here</a></span> : ""
+                  )}
+                </Typography>
               </Grid>
               <Grid size={12}>
                 <Autocomplete
@@ -301,6 +329,7 @@ export const AddReport: FC = () => {
                       label="Auditor"
                       size="small"
                       sx={{ minWidth: 290 }}
+                      required
                     />
                   )}
                   renderTags={(value, getTagProps) =>
@@ -314,17 +343,25 @@ export const AddReport: FC = () => {
                       />
                     ))
                   }
-                />  
+                />
+                <Typography variant="caption" color="text.secondary" sx={{ mt: 1, display: 'block' }}>
+                  {isContributor ? "Auditor missed? Please contact a moderator or admin." : (
+                    (isModerator || isAdmin) ? <span>Auditor missed? <a href="/admin/auditors/add" target="_blank" rel="noopener noreferrer" style={{ color: 'inherit', textDecoration: 'underline', cursor: 'pointer' }}>Add it here</a></span> : ""
+                  )}
+                </Typography>  
               </Grid>
               <Grid size={12}>
                 <DatePicker
-                  label="Report Date"
+                  label="Report Date *"
                   value={date}
                   onChange={(newValue) => setDate(newValue)}
                   slotProps={{
                     textField: {
                       size: 'small',
-                      sx: { width: '100%' }
+                      sx: { width: '100%' },
+                      onClick: (e) => {
+                        e.currentTarget.querySelector('button')?.click();
+                      }
                     }
                   }}
                 />