fix(SILVA-569): add new column options in the Search Screen

frontend/src/__test__/components/SilvicultureSearch/Openings/OpeningSearchTab.test.tsx

@@ -189,9 +189,9 @@ describe('OpeningSearchTab', () => {
     expect(screen.getByTestId('Opening Id')).toBeInTheDocument();
     const editColumnsBtn = screen.getByTestId('edit-columns');
     await act(async () => fireEvent.click(editColumnsBtn));
-    const checkbox = container.querySelector('input[type="checkbox"]#checkbox-label-openingId');    
+    const checkbox = container.querySelector('#checkbox-label-openingNumber');  
     await act(async () => fireEvent.click(checkbox));
-    expect(screen.queryByTestId('Opening Id')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('Opening Number')).not.toBeInTheDocument();
 
   });
 
@@ -220,7 +220,7 @@ describe('OpeningSearchTab', () => {
     expect(screen.getByTestId('openings-map')).toBeInTheDocument();
   });
 
-  it('should display more or less columns when checkboxes are clicked', async () => {
+  it('should display openingNumber once users clicks the chekbox', async () => {
     (useOpeningsQuery as vi.Mock).mockReturnValue({ data, isFetching: false });
 
     let container;
@@ -245,9 +245,9 @@ describe('OpeningSearchTab', () => {
     expect(screen.getByTestId('Opening Id')).toBeInTheDocument();
     const editColumnsBtn = screen.getByTestId('edit-columns');
     await act(async () => fireEvent.click(editColumnsBtn));
-    const checkbox = container.querySelector('input[type="checkbox"]#checkbox-label-openingId');    
+    const checkbox = container.querySelector('input[type="checkbox"]#checkbox-label-openingNumber');
     await act(async () => fireEvent.click(checkbox));
-    expect(screen.queryByTestId('Opening Id')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('Opening number')).toBeInTheDocument();
 
   });
 });

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

@@ -24,7 +24,7 @@ import {
   MenuItemDivider,
   Tooltip,
   MenuItem,
-  FlexGrid
+  FlexGrid,
 } from "@carbon/react";
 import * as Icons from "@carbon/icons-react";
 import StatusTag from "../../../StatusTag";
@@ -37,7 +37,7 @@ import {
   convertToCSV,
   downloadCSV,
   downloadPDF,
-  downloadXLSX
+  downloadXLSX,
 } from "../../../../utils/fileConversions";
 import { useNavigate } from "react-router-dom";
 import { setOpeningFavorite, deleteOpeningFavorite } from '../../../../services/OpeningFavouriteService';
@@ -46,7 +46,7 @@ import { useNotification } from "../../../../contexts/NotificationProvider";
 import TruncatedText from "../../../TruncatedText";
 import FriendlyDate from "../../../FriendlyDate";
 import ComingSoonModal from "../../../ComingSoonModal";
-
+import { Icon } from "@carbon/icons-react";
 
 interface ISearchScreenDataTable {
   rows: OpeningsSearch[];
@@ -71,7 +71,7 @@ const SearchScreenDataTable: React.FC<ISearchScreenDataTable> = ({
   toggleSpatial,
   showSpatial,
   totalItems,
-  setOpeningIds
+  setOpeningIds,
 }) => {
   const {
     handlePageChange,
@@ -84,8 +84,12 @@ const SearchScreenDataTable: React.FC<ISearchScreenDataTable> = ({
   const [openEdit, setOpenEdit] = useState(false);
   const [openDownload, setOpenDownload] = useState(false);
   const [selectedRows, setSelectedRows] = useState<string[]>([]); // State to store selected rows
-  const [openingDetails, setOpeningDetails] = useState('');
-  const { mutate: markAsViewedOpening, isError, error } = usePostViewedOpening();
+  const [openingDetails, setOpeningDetails] = useState("");
+  const {
+    mutate: markAsViewedOpening,
+    isError,
+    error,
+  } = usePostViewedOpening();
   const navigate = useNavigate();
 
   // This ref is used to calculate the width of the container for each cell
@@ -95,32 +99,38 @@ const SearchScreenDataTable: React.FC<ISearchScreenDataTable> = ({
   const { displayNotification } = useNotification();
 
   useEffect(() => {
-    const widths = cellRefs.current.map((cell: ICellRefs) => cell.offsetWidth || 0);
+    const widths = cellRefs.current.map(
+      (cell: ICellRefs) => cell.offsetWidth || 0
+    );
     setCellWidths(widths);
 
     const handleResize = () => {
-      const newWidths = cellRefs.current.map((cell: ICellRefs) => cell.offsetWidth || 0);
+      const newWidths = cellRefs.current.map(
+        (cell: ICellRefs) => cell.offsetWidth || 0
+      );
       setCellWidths(newWidths);
     };
-    
+
     window.addEventListener("resize", handleResize);
     return () => window.removeEventListener("resize", handleResize);
   }, []);
 
   useEffect(() => {
     setInitialItemsPerPage(itemsPerPage);
   }, [rows, totalItems]);
-  
+
   // Function to handle row selection changes
   const handleRowSelectionChanged = (openingId: string) => {
     setSelectedRows((prevSelectedRows) => {
       if (prevSelectedRows.includes(openingId)) {
         // If the row is already selected, remove it from the selected rows
-        const selectedValues = prevSelectedRows.filter((id) => id !== openingId);
+        const selectedValues = prevSelectedRows.filter(
+          (id) => id !== openingId
+        );
         setOpeningIds(selectedValues.map(parseFloat));
         return selectedValues;
       } else {
-        // If the row is not selected, add it to the selected rows        
+        // If the row is not selected, add it to the selected rows
         const selectedValues = [...prevSelectedRows, openingId];
         setOpeningIds(selectedValues.map(parseFloat));
         return selectedValues;
@@ -129,21 +139,21 @@ const SearchScreenDataTable: React.FC<ISearchScreenDataTable> = ({
   };
 
   const handleRowClick = (openingId: string) => {
-      // Call the mutation to mark as viewed
-      markAsViewedOpening(openingId, {
-        onSuccess: () => {
-          setOpeningDetails(openingId);
-        },
-        onError: (err: any) => {
-          displayNotification({
-            title: 'Unable to process your request',
-            subTitle: 'Please try again in a few minutes',
-            type: "error",
-            onClose: () => {}
-          })
-        }
-      });
-    };
+    // Call the mutation to mark as viewed
+    markAsViewedOpening(openingId, {
+      onSuccess: () => {
+        setOpeningDetails(openingId);
+      },
+      onError: (err: any) => {
+        displayNotification({
+          title: "Unable to process your request",
+          subTitle: "Please try again in a few minutes",
+          type: "error",
+          onClose: () => {},
+        });
+      },
+    });
+  };
 
   //Function to handle the favourite feature of the opening for a user
   const handleFavouriteOpening = async (openingId: string, favorite: boolean) => {
@@ -171,13 +181,13 @@ const SearchScreenDataTable: React.FC<ISearchScreenDataTable> = ({
 
     } catch (favoritesError) {
       displayNotification({
-        title: 'Unable to process your request',
-        subTitle: 'Please try again in a few minutes',
+        title: "Unable to process your request",
+        subTitle: "Please try again in a few minutes",
         type: "error",
-        onClose: () => {}
-      })
+        onClose: () => {},
+      });
     }
-  }
+  };
 
   return (
     <>
@@ -244,36 +254,32 @@ const SearchScreenDataTable: React.FC<ISearchScreenDataTable> = ({
                   <div className="dropdown-label">
                     <p>Select Columns you want to see:</p>
                   </div>
-                  <FlexGrid className="dropdown-container">
-                    {headers.map((header, index) =>
-                      index > 0 && index % 2 === 1 ? ( // Start from index 1 and handle even-indexed pairs to skip the actions
-                        <Row key={`row-${index}`}>
-                          <Column sm={2} md={4} lg={8}>
-                            <Checkbox
-                              className="checkbox-item"
-                              key={header.key}
-                              labelText={header.header}
-                              id={`checkbox-label-${header.key}`}
-                              checked={header.selected === true}
-                              onChange={() => handleCheckboxChange(header.key)}
-                            />
-                          </Column>
-                          {headers[index + 1] && (
-                            <Column sm={2} md={4} lg={8}>
-                              <Checkbox
-                                className="checkbox-item"
-                                key={headers[index + 1].key}
-                                labelText={headers[index + 1].header}
-                                id={`checkbox-label-${headers[index + 1].key}`}
-                                checked={headers[index + 1].selected === true}
-                                onChange={() =>
-                                  handleCheckboxChange(headers[index + 1].key)
-                                }
-                              />
+                  <FlexGrid className="dropdown-container scrollable" data-test-id="edit-columns-container">
+                    {headers.map(
+                      (header, index) =>
+                        header &&
+                        header.key !== "actions" && (
+                          <Row key={`row-${index}`} className="my-3">
+                            <Column sm={2} md={4} lg={8} key={header.key}>
+                              {header.key === "openingId" ? (
+                                <div className="d-flex flex-row align-items-center checkbox-item cursor-pointer">
+                                  <Icons.CheckboxChecked size={21} />
+                                  <p className="bx--checkbox-label-text">{header.header}</p>
+                                </div>
+                              ) : (
+                                <Checkbox
+                                  className="checkbox-item"
+                                  labelText={header.header}
+                                  id={`checkbox-label-${header.key}`}
+                                  checked={header.selected === true}
+                                  onChange={() =>
+                                    handleCheckboxChange(header.key)
+                                  }
+                                />
+                              )}
                             </Column>
-                          )}
-                        </Row>
-                      ) : null
+                          </Row>
+                        )
                     )}
                   </FlexGrid>
 
@@ -343,7 +349,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>
@@ -362,12 +370,10 @@ const SearchScreenDataTable: React.FC<ISearchScreenDataTable> = ({
                         ref={(el: never) => (cellRefs.current[i] = el)}
                         key={header.key}
                         className={
-                          header.key === "actions" && showSpatial
-                            ? "p-0"
-                            : null
+                          header.key === "actions" && showSpatial ? "p-0" : null
                         }
-                        onClick={() =>{
-                          if(header.key !== "actions"){
+                        onClick={() => {
+                          if (header.key !== "actions") {
                             handleRowClick(row.openingId);
                           }
                         }}
@@ -441,9 +447,14 @@ const SearchScreenDataTable: React.FC<ISearchScreenDataTable> = ({
 
                         ) : header.header === "Category" ? (
                           <TruncatedText
-                            text={row["categoryCode"] + " - " + row["categoryDescription"]}
-                            parentWidth={cellWidths[i]} />
-                        ) : header.key === 'disturbanceStartDate' ? (
+                            text={
+                              row["categoryCode"] +
+                              " - " +
+                              row["categoryDescription"]
+                            }
+                            parentWidth={cellWidths[i]}
+                          />
+                        ) : header.key === "disturbanceStartDate" ? (
                           <FriendlyDate date={row[header.key]} />
                         ) : (
                           row[header.key]
@@ -488,7 +499,10 @@ const SearchScreenDataTable: React.FC<ISearchScreenDataTable> = ({
         />
       )}
 
-      <ComingSoonModal openingDetails={openingDetails} setOpeningDetails={setOpeningDetails} />
+      <ComingSoonModal
+        openingDetails={openingDetails}
+        setOpeningDetails={setOpeningDetails}
+      />
     </>
   );
 };

frontend/src/components/SilvicultureSearch/Openings/SearchScreenDataTable/styles.scss

@@ -59,6 +59,9 @@
     letter-spacing: 0.16px;
     font-weight: 400;
   }
+  .bx--checkbox-label {
+    min-width: 300px;
+  }
 
 }
 .download-column-content{
@@ -153,6 +156,24 @@
 
 }
 
+.dropdown-container {
+  display: flex;
+  flex-direction: column; 
+  max-height: 265px;
+  overflow-y: auto;
+}
+::-webkit-scrollbar {
+  -webkit-appearance: none;
+  width: 7px;
+}
+::-webkit-scrollbar-thumb {
+  border-radius: 4px;
+  background-color: rgba(0, 0, 0, .5);
+  box-shadow: 0 0 1px rgba(255, 255, 255, .5);
+}
+
+
+
 @media only screen and (max-width: 672px) {
   .#{vars.$bcgov-prefix}--data-table-content {
     width: 100%;