Merge remote-tracking branch 'refs/remotes/origin/main'

backend/pyproject.toml

@@ -35,7 +35,7 @@ gunicorn = "^23.0.0"
 humanize = "^4.11.0"
 lxml = "^5.3.0"
 markdown = "^3.7"
-openai = "^1.60.0"
+openai = "^1.60.1"
 psycopg = "^3.2.4"
 pygithub = "^2.5.0"
 python = "^3.13"

frontend/jest.setup.ts

@@ -7,7 +7,7 @@ dotenv.config()
 
 global.React = React
 global.TextEncoder = TextEncoder
-
+global.structuredClone = (val) => JSON.parse(JSON.stringify(val))
 beforeEach(() => {
   jest.spyOn(console, 'error').mockImplementation((...args) => {
     throw new Error(`Console error: ${args.join(' ')}`)

frontend/package.json

@@ -43,6 +43,7 @@
     "axios": "^1.7.9",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "date-fns": "^4.1.0",
     "dayjs": "^1.11.13",
     "dompurify": "^3.2.3",
     "dotenv": "^16.4.7",
@@ -55,7 +56,7 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-gtm-module": "^2.0.11",
-    "react-icons": "^5.3.0",
+    "react-icons": "^5.4.0",
     "react-leaflet": "^5.0.0",
     "react-router-dom": "^7.0.2",
     "react-tooltip": "^5.28.0",
@@ -68,6 +69,7 @@
     "@swc/jest": "^0.2.37",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.2.0",
+    "@types/date-fns": "^2.6.3",
     "@types/jest": "^29.5.14",
     "@types/mocha": "^10.0.10",
     "@types/node": "^22.10.8",
@@ -79,7 +81,7 @@
     "@vitejs/plugin-react": "^4.3.4",
     "autoprefixer": "^10.4.20",
     "babel-plugin-transform-import-meta": "^2.3.2",
-    "eslint": "^9.18.0",
+    "eslint": "^9.19.0",
     "eslint-config-prettier": "^10.0.1",
     "eslint-import-resolver-alias": "^1.1.2",
     "eslint-plugin-import": "^2.31.0",

frontend/src/components/Header.tsx

@@ -22,17 +22,35 @@ export default function Header() {
         setMobileMenuOpen(false)
       }
     }
+
+    const handleOutsideClick = (event) => {
+      const navbar = document.getElementById('navbar-sticky')
+      const sidebar = document.querySelector('.fixed.inset-y-0')
+      if (
+        mobileMenuOpen &&
+        navbar &&
+        !navbar.contains(event.target) &&
+        sidebar &&
+        !sidebar.contains(event.target)
+      ) {
+        setMobileMenuOpen(false)
+      }
+    }
+
     window.addEventListener('resize', handleResize)
+    window.addEventListener('click', handleOutsideClick)
+
     return () => {
       window.removeEventListener('resize', handleResize)
+      window.removeEventListener('click', handleOutsideClick)
     }
-  }, [])
+  }, [mobileMenuOpen])
 
   return (
     <header className="fixed inset-x-0 top-0 z-50 w-full max-w-[100vw] bg-owasp-blue shadow-md dark:bg-slate-800">
       <div className="flex h-16 w-full items-center px-4 max-md:justify-between" id="navbar-sticky">
         {/* Logo */}
-        <NavLink to="/">
+        <NavLink to="/" onClick={() => setMobileMenuOpen(false)}>
           <div className="flex h-full items-center">
             <img
               src={'/img/owasp_icon_white_sm.png'}
@@ -110,7 +128,7 @@ export default function Header() {
       >
         <div className="space-y-1 px-2 pb-3 pt-2">
           {/* Logo */}
-          <NavLink to="/">
+          <NavLink to="/" onClick={() => setMobileMenuOpen(false)}>
             <div className="flex h-full items-center">
               <img
                 src={'/img/owasp_icon_white_sm.png'}

frontend/src/components/SearchPageLayout.tsx

@@ -50,7 +50,6 @@ const SearchPageLayout = ({
           initialValue={searchQuery}
           onReady={handleSearchBarReady}
         />
-        <div>{sortChildren}</div>
       </div>
       {!isSearchBarReady || !isLoaded ? (
         <div className="mt-20 flex h-64 w-full items-center justify-center">
@@ -59,6 +58,7 @@ const SearchPageLayout = ({
       ) : (
         <>
           <div>
+            {totalPages !== 0 && <div className="flex justify-end">{sortChildren}</div>}
             {totalPages === 0 && <div className="text bg:text-white m-4 text-xl">{empty}</div>}
             {children}
           </div>

frontend/src/components/SortBy.tsx

@@ -1,56 +1,103 @@
-import { faCaretDown, faCaretUp, faCheck } from '@fortawesome/free-solid-svg-icons'
+import {
+  faArrowDownShortWide,
+  faArrowUpWideShort,
+  faCheck,
+} from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { useState } from 'react'
+import { Tooltip } from 'react-tooltip'
+import { SortByProps } from 'types/sortBy'
 import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from 'components/ui/dropdownMenu'
-
-interface SortOption {
-  value: string
-  label: string
-}
-
-interface SortByProps {
-  options: SortOption[]
-  selectedOption: string
-  onSortChange: (value: string) => void
-}
-
-const SortBy = ({ options, selectedOption, onSortChange }: SortByProps) => {
-  const [open, setOpen] = useState<boolean>(false)
-  const handleOpenChange = (isOpen: boolean) => {
-    setOpen(isOpen)
-  }
-
-  if (!options || options.length === 0) return null
+  SelectContent,
+  SelectItem,
+  SelectLabel,
+  SelectRoot,
+  SelectTrigger,
+  SelectValueText,
+} from 'components/ui/Select'
+const SortBy = ({
+  sortOptions,
+  selectedSortOption,
+  selectedOrder,
+  onSortChange,
+  onOrderChange,
+}: SortByProps) => {
+  if (!sortOptions || sortOptions.items.length === 0) return null
 
   return (
-    <DropdownMenu open={open} onOpenChange={handleOpenChange}>
-      <DropdownMenuTrigger asChild>
-        <button
-          type="button"
-          className="h-10 w-[100px] justify-between border-2 bg-white text-[#292e36] dark:bg-[#3C3C3C] dark:text-[#D1D5DB]"
+    <div className="flex items-center gap-4">
+      {/* Sort Attribute Dropdown */}
+      <div className="rounded-xl bg-gray-200 px-3 shadow-sm dark:bg-[#323232]">
+        <SelectRoot
+          key={selectedSortOption}
+          collection={sortOptions}
+          size="sm"
+          onValueChange={(e) => {
+            onSortChange(e.value[0])
+          }}
         >
-          <span>Sort By </span>
-          <FontAwesomeIcon icon={open ? faCaretUp : faCaretDown} className="pl-2" />
-        </button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent className="w-[180px] bg-white text-[#4B5563] dark:bg-[#3C3C3C] dark:text-[#D1D5DB]">
-        {options.map((option) => (
-          <DropdownMenuItem
-            key={option.value}
-            onSelect={() => onSortChange(option.value)}
-            className="justify-between"
+          <div className="flex items-center gap-2">
+            <SelectLabel className="font-small text-sm text-gray-600 dark:text-gray-300">
+              Sort By:
+            </SelectLabel>
+            <SelectTrigger className="width-auto text-sm">
+              <SelectValueText
+                paddingRight={'1.4rem'}
+                width={'auto'}
+                textWrap="nowrap"
+                placeholder={
+                  sortOptions.items.find((item) => item.value === selectedSortOption)?.label
+                }
+              />
+            </SelectTrigger>
+          </div>
+          <SelectContent className="text-md text-md min-w-36 dark:bg-[#323232]">
+            {sortOptions.items.map((attribute) => (
+              <SelectItem
+                item={attribute}
+                key={attribute.value}
+                className="p-1 px-3 hover:bg-[#D1DBE6] dark:hover:bg-[#454545]"
+              >
+                {attribute.label}
+                {attribute.value === selectedSortOption && (
+                  <FontAwesomeIcon
+                    icon={faCheck}
+                    className="text-sm text-blue-500 dark:text-sky-600"
+                  />
+                )}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </SelectRoot>
+      </div>
+
+      {/* Sort Order Dropdown */}
+      {selectedSortOption !== 'default' && (
+        <div className="relative flex items-center">
+          <button
+            data-tooltip-id="sort-order-tooltip"
+            data-tooltip-content={selectedOrder === 'asc' ? 'Ascending Order' : 'Descending Order'}
+            onClick={() => onOrderChange(selectedOrder === 'asc' ? 'desc' : 'asc')}
+            className="flex items-center justify-center rounded-lg bg-gray-200 p-2 shadow-sm hover:bg-gray-300 dark:bg-[#323232] dark:text-gray-300 dark:hover:bg-[#454545]"
           >
-            {option.label}
-            {option.value === selectedOption && <FontAwesomeIcon icon={faCheck} />}
-          </DropdownMenuItem>
-        ))}
-      </DropdownMenuContent>
-    </DropdownMenu>
+            {selectedOrder === 'asc' ? (
+              <FontAwesomeIcon
+                icon={faArrowDownShortWide}
+                className="h-5 w-5 text-gray-600 dark:text-gray-200"
+              />
+            ) : (
+              <FontAwesomeIcon
+                icon={faArrowUpWideShort}
+                className="h-5 w-5 text-gray-600 dark:text-gray-200"
+              />
+            )}
+          </button>
+          <Tooltip
+            id="sort-order-tooltip"
+            className="rounded-lg bg-white px-1 py-0 text-sm text-gray-600 shadow-md"
+          />
+        </div>
+      )}
+    </div>
   )
 }