Merge branch 'main' into fix/SILVA-449

frontend/package.json

@@ -15,6 +15,7 @@
     "@vitejs/plugin-react-swc": "^3.3.2",
     "aws-amplify": "^6.7.0",
     "axios": "^1.6.8",
+    "date-fns": "^4.1.0",
     "jspdf": "^2.5.2",
     "jspdf-autotable": "^3.8.3",
     "leaflet": "^1.9.4",

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

@@ -0,0 +1,79 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { vi } from 'vitest';
+import FriendlyDate from '../../components/FriendlyDate';
+
+// Mock Tooltip component from Carbon to ensure tests run without extra dependencies
+vi.mock('@carbon/react', () => {
+  const Tooltip = ({ label, children }) => <span data-tooltip={label}>{children}</span>;
+  return { Tooltip };
+});
+
+// Mock `Date.now` for consistent testing
+beforeAll(() => {
+  vi.useFakeTimers();
+  vi.setSystemTime(new Date('2024-01-24T00:00:00')); // Set a fixed date for testing
+});
+
+afterAll(() => {
+  vi.useRealTimers();
+});
+
+describe('FriendlyDate Component', () => {
+
+  it('displays "Today" for today\'s date', () => {
+    render(<FriendlyDate date="2024-01-24T06:23:12" />);
+    expect(screen.getByText("Today")).toBeInTheDocument();
+  });
+
+  it('displays "Yesterday" for a date one day ago', () => {
+    render(<FriendlyDate date="2024-01-23T00:00:00" />);
+    expect(screen.getByText("Yesterday")).toBeInTheDocument();
+  });
+
+  it('displays relative time within the last week', () => {
+    render(<FriendlyDate date="2024-01-21T00:00:00" />);
+    expect(screen.getByText("3 days ago")).toBeInTheDocument();
+  });
+
+  it('displays exact date for dates older than a week', () => {
+    render(<FriendlyDate date="2024-01-01T00:00:00" />);
+    expect(screen.getByText("23 days ago")).toBeInTheDocument();
+  });
+
+  it('displays friendly date format for future dates', () => {
+    render(<FriendlyDate date="2024-02-22T00:00:00" />);
+    expect(screen.getByText("in 29 days")).toBeInTheDocument();
+  });
+
+  it('renders tooltip with full text on hover', async () => {
+    const {container} =  render(<FriendlyDate date="2024-02-22T00:00:00" />);
+    expect(container.querySelector('span').getAttribute('data-tooltip')).toBe("Feb 22, 2024");
+  });
+
+  it('renders an empty span for null dates', () => {
+    const {getByTestId} =  render(<FriendlyDate date={null} />);
+    expect(getByTestId("friendly-date")).toBeInTheDocument();
+
+  });
+
+  it('renders an empty span for undefined dates', () => {
+    const {getByTestId} = render(<FriendlyDate date={undefined} />);
+    expect(getByTestId("friendly-date")).toBeInTheDocument();
+
+  });
+
+  it('renders an empty span for invalid', () => {
+    const {getByTestId} = render(<FriendlyDate date="invalid-date" />);
+    expect(getByTestId("friendly-date")).toBeInTheDocument();
+
+  });
+
+  it('renders an empty span for empty', () => {
+    const {getByTestId} = render(<FriendlyDate date="" />);
+    expect(getByTestId("friendly-date")).toBeInTheDocument();
+
+  });
+
+
+});

frontend/src/components/FriendlyDate/index.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { formatDistanceToNow, format, parseISO, isToday, isYesterday } from 'date-fns';
+import { Tooltip } from '@carbon/react';
+
+interface FriendlyDateProps {
+  date: string | null | undefined; // The date string in ISO format
+}
+
+const FriendlyDate: React.FC<FriendlyDateProps> = ({ date }) => {
+
+  if(!date) return <span data-testid="friendly-date"></span>;
+
+  try{
+  const parsedDate = parseISO(date);
+  const cleanDate = format(parsedDate, "MMM dd, yyyy");
+
+  const formattedDate = isToday(parsedDate)
+    ? "Today"
+    : isYesterday(parsedDate)
+    ? "Yesterday"
+    : formatDistanceToNow(parsedDate, { addSuffix: true });
+
+  return <Tooltip  
+            label={cleanDate}
+            align="bottom-left"
+            autoAlign> 
+            <span>{formattedDate}</span>
+          </Tooltip>;
+  } catch(e){
+    return <span data-testid="friendly-date"></span>;
+  }
+};
+
+export default FriendlyDate;

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

@@ -31,6 +31,7 @@ const OpeningsSearchBar: React.FC<IOpeningsSearchBar> = ({
 
   const handleSearchClick = () => {
     onSearchClick();
+    setIsOpen(false);
   };
 
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {

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

@@ -43,6 +43,8 @@ import { useNavigate } from "react-router-dom";
 import { setOpeningFavorite } from '../../../../services/OpeningFavouriteService';
 import { useNotification } from "../../../../contexts/NotificationProvider";
 import TruncatedText from "../../../TruncatedText";
+import FriendlyDate from "../../../FriendlyDate";
+
 
 interface ISearchScreenDataTable {
   rows: OpeningsSearch[];
@@ -374,7 +376,9 @@ const SearchScreenDataTable: React.FC<ISearchScreenDataTable> = ({
                           <TruncatedText 
                             text={row["categoryCode"] + " - " + row["categoryDescription"]} 
                             parentWidth={cellWidths[i]} />
-                          ) : (
+                        ) : header.key === 'disturbanceStartDate' ? (
+                          <FriendlyDate date={row[header.key]} />
+                        ) : (
                           row[header.key]
                         )}
                       </TableCell>
@@ -401,7 +405,7 @@ const SearchScreenDataTable: React.FC<ISearchScreenDataTable> = ({
           backwardText="Previous page"
           forwardText="Next page"
           pageSize={itemsPerPage}
-          pageSizes={[5, 20, 50, 200, 400]}
+          pageSizes={[20, 40, 60, 80, 100]}
           itemsPerPageText="Items per page"
           page={currentPage}
           onChange={({

frontend/src/components/SilvicultureSearch/Openings/SearchScreenDataTable/testData.ts

@@ -50,7 +50,7 @@ export const columns: ITableHeader[] = [
   {
     key: 'disturbanceStartDate',
     header: 'Disturbance Date',
-    selected: false
+    selected: true
   }
 ];
 

frontend/src/contexts/PaginationProvider.tsx

@@ -3,9 +3,9 @@ import PaginationContext, { PaginationContextData } from "./PaginationContext";
 
 const PaginationProvider: React.FC<{children: React.ReactNode}> = ({ children }) => {
   const [data, setData] = useState<any[]>([]);
-  const [initialItemsPerPage, setInitialItemsPerPage] = useState<number>(0);
+  const [initialItemsPerPage, setInitialItemsPerPage] = useState<number>(20);
   const [currentPage, setCurrentPage] = useState<number>(1);
-  const [itemsPerPage, setItemsPerPage] = useState<number>(5);
+  const [itemsPerPage, setItemsPerPage] = useState<number>(20);
   const [totalResultItems, setTotalResultItems] = useState<number>(0); // State for totalResultItems
 
   // Update the total number of pages when itemsPerPage changes