fix(SILVA-558): opening details prompt modal (#471)

Co-authored-by: Paulo Gomes da Cruz Junior <[email protected]>

frontend/src/__test__/components/ComingSoonModal.test.tsx

@@ -0,0 +1,27 @@
+//vite test for the ComingSoonModal component
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import ComingSoonModal from '../../components/ComingSoonModal';
+
+describe('ComingSoonModal', () => {
+  it('renders the modal', () => {
+    render(<ComingSoonModal openingDetails="123" setOpeningDetails={vi.fn()} />);
+    expect(screen.getByText('Coming Soon')).toBeInTheDocument();
+    expect(screen.getByText('An opening details page is in development.')).toBeInTheDocument();
+  });
+
+  it('renders the modal with the correct opening ID', () => {
+    render(<ComingSoonModal openingDetails="1234" setOpeningDetails={vi.fn()} />);
+    expect(screen.getByText('Opening ID: 1234')).toBeInTheDocument();
+  });
+
+  it('calls the setOpeningDetails function when the modal is closed', async() => {
+    const setOpeningDetails = vi.fn();
+    render(<ComingSoonModal openingDetails="123" setOpeningDetails={setOpeningDetails} />);
+    const closeButton = screen.getByRole('button', { name: 'Close' });
+    await closeButton.click();
+    expect(setOpeningDetails).toHaveBeenCalled();
+  });
+
+});

frontend/src/components/ComingSoonModal/index.tsx

@@ -0,0 +1,26 @@
+import { Modal } from "@carbon/react";
+interface IComingSoonModal {
+  openingDetails: string;
+  setOpeningDetails: (openingDetails: string) => void;
+}
+
+const ComingSoonModal: React.FC<IComingSoonModal> = ({
+  openingDetails,
+  setOpeningDetails,
+}) => {
+  return (
+    <Modal
+      open={openingDetails.length > 0}
+      onRequestClose={() => setOpeningDetails("")}
+      passiveModal
+      modalHeading="Coming Soon"
+      modalLabel={`Opening ID: ${openingDetails}`}
+    >
+      <p className="modal-subtext">An opening details page is in development.</p> <br/>
+      <p className="modal-subtext">
+        {` Until it's available, search for ${openingDetails} in RESULTS to view the opening details.`}
+      </p>
+    </Modal>
+  );
+};
+export default ComingSoonModal;

frontend/src/components/ComingSoonModal/styles.scss

@@ -0,0 +1,7 @@
+@use '@bcgov-nr/nr-theme/design-tokens/variables.scss' as vars;
+@use '@carbon/type';
+
+.modal-subtext {
+  @include type.type-style('body-02');
+  font-size: 14px;
+}

frontend/src/components/SilvicultureSearch/Openings/SearchScreenDataTable/index.tsx

@@ -22,8 +22,6 @@ import {
   Row,
   Column,
   MenuItemDivider,
-  Modal,
-  ActionableNotification
 } from "@carbon/react";
 import * as Icons from "@carbon/icons-react";
 import StatusTag from "../../../StatusTag";
@@ -46,6 +44,7 @@ import { usePostViewedOpening } from "../../../../services/queries/dashboard/das
 import { useNotification } from '../../../../contexts/NotificationProvider';
 import TruncatedText from "../../../TruncatedText";
 import FriendlyDate from "../../../FriendlyDate";
+import ComingSoonModal from "../../../ComingSoonModal";
 
 
 interface ISearchScreenDataTable {
@@ -85,7 +84,7 @@ const SearchScreenDataTable: React.FC<ISearchScreenDataTable> = ({
   const [openDownload, setOpenDownload] = useState(false);
   const [selectedRows, setSelectedRows] = useState<string[]>([]); // State to store selected rows
   const [toastText, setToastText] = useState<string | null>(null);
-  const [openingDetails, setOpeningDetails] = useState(false);
+  const [openingDetails, setOpeningDetails] = useState('');
   const { mutate: markAsViewedOpening, isError, error } = usePostViewedOpening();
   const navigate = useNavigate();
 
@@ -134,7 +133,7 @@ const SearchScreenDataTable: React.FC<ISearchScreenDataTable> = ({
     // Call the mutation to mark as viewed
     markAsViewedOpening(openingId, {
       onSuccess: () => {
-        setOpeningDetails(true)
+        setOpeningDetails(openingId.toString());
       },
       onError: (err: any) => {
         // Display error notification (UI needs to be designed for this)
@@ -316,7 +315,9 @@ const SearchScreenDataTable: React.FC<ISearchScreenDataTable> = ({
             <TableRow>
               {headers.map((header) =>
                 header.selected ? (
-                  <TableHeader key={header.key} data-testid={header.header}>{header.header}</TableHeader>
+                  <TableHeader key={header.key} data-testid={header.header}>
+                    {header.header}
+                  </TableHeader>
                 ) : null
               )}
             </TableRow>
@@ -326,24 +327,29 @@ const SearchScreenDataTable: React.FC<ISearchScreenDataTable> = ({
               rows.map((row: any, i: number) => (
                 <TableRow
                   key={row.openingId + i.toString()}
+                  onClick={() => {
+                    //add the api call to send the viewed opening
+                    handleRowClick(row.openingId);
+                  }}
                 >
                   {headers.map((header) =>
                     header.selected ? (
                       <TableCell
                         ref={(el: never) => (cellRefs.current[i] = el)}
                         key={header.key}
-                        className={header.key === "actions" && showSpatial ? "p-0" : null}
-                        onClick={() => { 
-                          if(header.key !== "actions")
-                            handleRowClick(row.openingId); 
-                          }
+                        className={
+                          header.key === "actions" && showSpatial ? "p-0" : null
                         }
+                        onClick={() => {
+                          if (header.key !== "actions")
+                            handleRowClick(row.openingId);
+                        }}
                       >
                         {header.key === "statusDescription" ? (
                           <StatusTag code={row[header.key]} />
                         ) : header.key === "actions" ? (
                           <CheckboxGroup
-                          labelText=""
+                            labelText=""
                             orientation="horizontal"
                             className="align-items-center justify-content-start"
                           >
@@ -355,7 +361,17 @@ const SearchScreenDataTable: React.FC<ISearchScreenDataTable> = ({
                                 align="bottom-left"
                                 autoAlign
                               >
-                                <div className="mb-2 mx-2">
+                                <div
+                                  className="mb-2 mx-2"
+                                  onClick={(e) => e.stopPropagation()}
+                                  role="button"
+                                  tabIndex={0}
+                                  onKeyDown={(e) => {
+                                    if (e.key === 'Enter' || e.key === ' ') {
+                                      handleRowSelectionChanged(row.openingId);
+                                    }
+                                  }}
+                                >
                                   <Checkbox
                                     id={`checkbox-label-${row.openingId}`}
                                     data-testid={`checkbox-${row.openingId}`}
@@ -403,10 +419,15 @@ const SearchScreenDataTable: React.FC<ISearchScreenDataTable> = ({
                             </OverflowMenu>
                           </CheckboxGroup>
                         ) : header.header === "Category" ? (
-                          <TruncatedText 
-                            text={row["categoryCode"] + " - " + row["categoryDescription"]} 
-                            parentWidth={cellWidths[i]} />
-                        ) : header.key === 'disturbanceStartDate' ? (
+                          <TruncatedText
+                            text={
+                              row["categoryCode"] +
+                              " - " +
+                              row["categoryDescription"]
+                            }
+                            parentWidth={cellWidths[i]}
+                          />
+                        ) : header.key === "disturbanceStartDate" ? (
                           <FriendlyDate date={row[header.key]} />
                         ) : (
                           row[header.key]
@@ -453,12 +474,9 @@ const SearchScreenDataTable: React.FC<ISearchScreenDataTable> = ({
         />
       )}
 
-      <Modal
-        open={openingDetails}
-        onRequestClose={() => setOpeningDetails(false)}
-        passiveModal
-        modalHeading="We are working hard to get this feature asap, unfortunately you cannot view the opening details from SILVA atm."
-        modalLabel="Opening Details"
+      <ComingSoonModal
+        openingDetails={openingDetails}
+        setOpeningDetails={setOpeningDetails}
       />
     </>
   );