SUBMIT-699 EAO - Generating Invite URL for Eligible Entities (Frontend) (#759)

* Adds frontend page for proponent projects and invitation view

* Fix linting

* Fix unit tests

* Update ProjectsTable imports

Author: leodube-aot

submit-api/src/submit_api/models/proponent.py

@@ -68,6 +68,7 @@ def get_proponent_by_id(cls, proponent_id, include_invitations=False, include_pr
         proponent_dict = {
             "id": proponent.id,
             "name": proponent.name,
+            "status": proponent.status.value if proponent.status else None
         }
         if not include_invitations and not include_projects:
             return proponent_dict

submit-web/src/components/Shared/ContentBox/index.tsx

@@ -8,6 +8,7 @@ type ContentBoxProps = {
   mainLabel: React.ReactNode;
   topLabel?: string;
   bottomLabel?: string;
+  statusChip?: React.ReactNode;
   children?: React.ReactNode;
   contentBoxVariant?: ContentBoxVariant;
 } & PaperProps;
@@ -16,6 +17,7 @@ export const ContentBox = ({
   mainLabel = "",
   topLabel,
   bottomLabel,
+  statusChip,
   contentBoxVariant = "primary",
   ...rest
 }: ContentBoxProps) => {
@@ -82,6 +84,7 @@ export const ContentBox = ({
             </Typography>
           </Stack>
         )}
+        {statusChip}
       </Box>
       <Box
         sx={{

submit-web/src/components/Shared/DataTable/DataTable.tsx

@@ -10,6 +10,7 @@ import {
   TableProps,
   TableRow,
   LinearProgress,
+  Checkbox,
 } from "@mui/material";
 import TableSortLabel from "@mui/material/TableSortLabel";
 import { useEffect, useMemo, useState, ReactNode, useCallback } from "react";
@@ -39,8 +40,12 @@ export type DataTableProps<T> = Readonly<{
   defaultSortKey?: string;
   defaultSortOrder?: "asc" | "desc";
   onSortChange?: (sortKey: string, sortOrder: "asc" | "desc") => void;
+  paginated?: boolean;
   rowsPerPageOptions?: readonly number[];
   tableProps?: TableProps;
+  selectable?: boolean;
+  selected?: (string | number)[];
+  onSelectionChange?: (selected: (string | number)[]) => void;
 }>;
 
 export function DataTable<T>({
@@ -55,8 +60,12 @@ export function DataTable<T>({
   defaultSortKey,
   defaultSortOrder = "asc",
   onSortChange,
+  paginated = true,
   rowsPerPageOptions = [10, 25],
   tableProps,
+  selectable = false,
+  selected = [],
+  onSelectionChange,
 }: DataTableProps<T>) {
   const [page, setPage] = useState(DEFAULT_PAGE);
   const [rowsPerPage, setRowsPerPage] = useState(DEFAULT_ROWS_PER_PAGE);
@@ -117,6 +126,34 @@ export function DataTable<T>({
     return sortOrder === "asc" ? sorted : sorted.reverse();
   }, [data, sortKey, sortOrder, columns, sortable]);
 
+  const handleSelectAllClick = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      if (event.target.checked) {
+        const newSelected = sortedData.map((row) => getRowId(row));
+        onSelectionChange?.(newSelected);
+      } else {
+        onSelectionChange?.([]);
+      }
+    },
+    [sortedData, getRowId, onSelectionChange],
+  );
+
+  const handleRowClick = useCallback(
+    (rowId: string | number) => {
+      const selectedIndex = selected.indexOf(rowId);
+      let newSelected: (string | number)[] = [];
+
+      if (selectedIndex === -1) {
+        newSelected = [...selected, rowId];
+      } else {
+        newSelected = selected.filter((id) => id !== rowId);
+      }
+
+      onSelectionChange?.(newSelected);
+    },
+    [selected, onSelectionChange],
+  );
+
   useEffect(() => {
     const totalPages = Math.max(1, Math.ceil(sortedData.length / rowsPerPage));
     if (sortedData.length > 0 && page >= totalPages) {
@@ -128,14 +165,25 @@ export function DataTable<T>({
     if (sortedData.length === 0) {
       return [];
     }
+    if (!paginated) {
+      return sortedData
+    }
 
     const startIndex = page * rowsPerPage;
     const endIndex = startIndex + rowsPerPage;
     return sortedData.slice(startIndex, endIndex);
-  }, [sortedData, page, rowsPerPage]);
+  }, [sortedData, page, rowsPerPage, paginated]);
 
   const emptyRows = Math.max(0, rowsPerPage - paginatedData.length);
 
+  const isSelected = useCallback(
+    (rowId: string | number) => selected.indexOf(rowId) !== -1,
+    [selected],
+  );
+
+  const numSelected = selected.length;
+  const rowCount = sortedData.length;
+
   return (
     <Box>
       <TableContainer>
@@ -145,6 +193,20 @@ export function DataTable<T>({
         >
           <TableHead>
             <TableRow>
+              {selectable && (
+                <SubmitTableHeadCell padding="checkbox">
+                  <Checkbox
+                    color="primary"
+                    indeterminate={numSelected > 0 && numSelected < rowCount}
+                    checked={rowCount > 0 && numSelected === rowCount}
+                    onChange={handleSelectAllClick}
+                    inputProps={{
+                      "aria-label": "select all",
+                    }}
+                    sx={{ p: 0, ml: 0.5 }}
+                  />
+                </SubmitTableHeadCell>
+              )}
               {columns.map((column) => (
                 <SubmitTableHeadCell
                   key={column.id}
@@ -169,7 +231,7 @@ export function DataTable<T>({
           <TableBody key={`table-body-${page}-${rowsPerPage}`}>
             {isError && (
               <TableRow>
-                <TableCell colSpan={columns.length} align="center">
+                <TableCell colSpan={columns.length + (selectable ? 1 : 0)} align="center">
                   {errorMessage}
                 </TableCell>
               </TableRow>
@@ -179,7 +241,7 @@ export function DataTable<T>({
               <>
                 <TableRow>
                   <TableCell
-                    colSpan={columns.length}
+                    colSpan={columns.length + (selectable ? 1 : 0)}
                     sx={{
                       border: "none",
                     }}
@@ -189,7 +251,7 @@ export function DataTable<T>({
                   </TableCell>
                 </TableRow>
                 <TableRow>
-                  <TableCell colSpan={columns.length}>
+                  <TableCell colSpan={columns.length + (selectable ? 1 : 0)}>
                     <LinearProgress />
                   </TableCell>
                 </TableRow>
@@ -198,46 +260,80 @@ export function DataTable<T>({
 
             {!isLoading && !isError && paginatedData.length === 0 && (
               <TableRow>
-                <TableCell colSpan={columns.length} align="center">
+                <TableCell colSpan={columns.length + (selectable ? 1 : 0)} align="center">
                   {emptyMessage}
                 </TableCell>
               </TableRow>
             )}
 
             {!isLoading &&
               !isError &&
-              paginatedData.map((row) => (
-                <TableRow key={getRowId(row)}>
-                  {columns.map((column) => {
-                    const cellContent =
-                      column.renderCell?.(row) ?? column.getValue?.(row) ?? null;
-                    return (
-                      <PlainTableCell key={column.id}>
-                        {cellContent}
+              paginatedData.map((row) => {
+                const rowId = getRowId(row);
+                const isItemSelected = isSelected(rowId);
+
+                return (
+                  <TableRow
+                    key={rowId}
+                    hover={selectable}
+                    onClick={() => selectable && handleRowClick(rowId)}
+                    role={selectable ? "checkbox" : undefined}
+                    aria-checked={selectable ? isItemSelected : undefined}
+                    selected={isItemSelected}
+                    sx={{ 
+                      cursor: selectable ? "pointer" : "default",
+                      "&.Mui-selected": {
+                        backgroundColor: "transparent",
+                      },
+                      "&.Mui-selected:hover": {
+                        backgroundColor: "rgba(0, 0, 0, 0.04)",
+                      },
+                    }}
+                  >
+                    {selectable && (
+                      <PlainTableCell padding="checkbox">
+                        <Checkbox
+                          color="primary"
+                          checked={isItemSelected}
+                          inputProps={{
+                            "aria-labelledby": `checkbox-${rowId}`,
+                          }}
+                          sx={{ p: 0 }}
+                        />
                       </PlainTableCell>
-                    );
-                  })}
-                </TableRow>
-              ))}
+                    )}
+                    {columns.map((column) => {
+                      const cellContent =
+                        column.renderCell?.(row) ?? column.getValue?.(row) ?? null;
+                      return (
+                        <PlainTableCell key={column.id}>
+                          {cellContent}
+                        </PlainTableCell>
+                      );
+                    })}
+                  </TableRow>
+                );
+              })}
 
-            {!isLoading && !isError && emptyRows > 0 && (
+            {paginated && !isLoading && !isError && emptyRows > 0 && (
               <TableRow style={{ height: ROW_HEIGHT * emptyRows }}>
-                <TableCell colSpan={columns.length} sx={{ border: "none" }} />
+                <TableCell colSpan={columns.length + (selectable ? 1 : 0)} sx={{ border: "none" }} />
               </TableRow>
             )}
           </TableBody>
         </Table>
       </TableContainer>
-      <TablePagination
-        component="div"
-        count={sortedData.length}
-        page={page}
-        rowsPerPage={rowsPerPage}
-        onPageChange={handleChangePage}
-        onRowsPerPageChange={handleChangeRowsPerPage}
-        rowsPerPageOptions={rowsPerPageOptions}
-      />
+      {paginated && (
+        <TablePagination
+          component="div"
+          count={sortedData.length}
+          page={page}
+          rowsPerPage={rowsPerPage}
+          onPageChange={handleChangePage}
+          onRowsPerPageChange={handleChangeRowsPerPage}
+          rowsPerPageOptions={rowsPerPageOptions}
+        />
+      )}
     </Box>
   );
 }
-

submit-web/src/components/Shared/Text/BarTitle.tsx

@@ -14,15 +14,19 @@ export default function BarTitle({ title }: { title: string }) {
 export function BarBlueTitle({
   title,
   fullWidth,
+  tooltip,
   bold = true,
+  variant = "h4",
 }: {
   title: string;
   fullWidth?: boolean;
+  tooltip?: React.ReactNode;
   bold?: boolean;
+  variant?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
 }) {
   return (
     <Typography
-      variant="h4"
+      variant={variant}
       color={BCDesignTokens.themeBlue100}
       sx={{
         mt: BCDesignTokens.layoutMarginSmall,
@@ -31,7 +35,10 @@ export function BarBlueTitle({
         fontWeight: bold ? "bold" : "normal",
       }}
     >
-      {title}
+      <>
+        {title}
+        {tooltip}
+      </>
     </Typography>
   );
 }

submit-web/src/components/UserManagement/staff/EntityTable/EntityTableBody.tsx

@@ -25,7 +25,7 @@ export const EntityTableBody = ({
 
   const handleRowClick = (id: number) => {
     navigate({
-      to: `/staff/invitations/entities/${id}`,
+      to: `/staff/proponents/${id}`,
     });
   };