Merge branch 'main' into Improve-NestBot-/users-command

OWASP · Feb 7, 2025 · 99a760e · 99a760e
2 parents 4c450c7 + 1fb1c30
commit 99a760e
Show file tree

Hide file tree

Showing 20 changed files with 129 additions and 139 deletions.
diff --git a/backend/poetry.lock b/backend/poetry.lock
diff --git a/backend/pyproject.toml b/backend/pyproject.toml
@@ -25,7 +25,7 @@ algoliasearch = "^4.13.0"
 algoliasearch-django = "^4.0.0"
 django = "^5.1"
 django-configurations = "^2.5.1"
-django-cors-headers = "^4.6.0"
+django-cors-headers = "^4.7.0"
 django-filter = "^24.3"
 django-storages = { extras = ["s3"], version = "^1.14.4" }
 djangorestframework = "^3.15.2"
@@ -48,7 +48,7 @@ slack-bolt = "^1.22.0"
 [tool.poetry.group.dev.dependencies]
 djlint = "^1.36.4"
 pre-commit = "^4.1.0"
-ruff = "^0.9.3"
+ruff = "^0.9.5"
 
 [tool.poetry.group.test.dependencies]
 pytest = "^8.3.4"

diff --git a/frontend/__tests__/src/pages/UserDetails.test.tsx b/frontend/__tests__/src/pages/UserDetails.test.tsx
@@ -1,6 +1,5 @@
-import { act, render, screen, waitFor } from '@testing-library/react'
-import React from 'react'
-import { MemoryRouter, Route, Routes } from 'react-router-dom'
+import { act, screen, waitFor } from '@testing-library/react'
+import { render } from 'wrappers/testUtil'
 import UserDetailsPage from 'pages/UserDetails'
 import '@testing-library/jest-dom'
 
@@ -34,16 +33,6 @@ const mockUser = {
   created_at: 1723002473,
 }
 
-const renderWithRouter = (ui: React.ReactElement) => {
-  return render(
-    <MemoryRouter initialEntries={['/user/testuser']}>
-      <Routes>
-        <Route path="/user/:login" element={ui} />
-      </Routes>
-    </MemoryRouter>
-  )
-}
-
 describe('UserDetailsPage', () => {
   const { fetchAlgoliaData } = require('api/fetchAlgoliaData')
 
@@ -54,7 +43,7 @@ describe('UserDetailsPage', () => {
   test('renders loading spinner initially', async () => {
     fetchAlgoliaData.mockImplementation(() => new Promise(() => {}))
     await act(async () => {
-      renderWithRouter(<UserDetailsPage />)
+      render(<UserDetailsPage />, { route: '/user/testuser' })
     })
     const loadingSpinner = screen.getAllByAltText('Loading indicator')
     await waitFor(() => {
@@ -66,7 +55,7 @@ describe('UserDetailsPage', () => {
     fetchAlgoliaData.mockResolvedValue({ hits: [mockUser] })
 
     await act(async () => {
-      renderWithRouter(<UserDetailsPage />)
+      render(<UserDetailsPage />, { route: '/user/testuser' })
     })
 
     // Wait for the loading state to finish
@@ -87,13 +76,14 @@ describe('UserDetailsPage', () => {
     fetchAlgoliaData.mockResolvedValue({ hits: [] })
 
     await act(async () => {
-      renderWithRouter(<UserDetailsPage />)
+      render(<UserDetailsPage />, { route: '/user/testuser' })
     })
 
     await waitFor(() => {
       expect(screen.getByText('User not found')).toBeInTheDocument()
     })
   })
+
   test('logs error to logger when fetchUserData fails', async () => {
     const { fetchAlgoliaData } = require('api/fetchAlgoliaData')
     const logger = require('utils/logger')
@@ -102,7 +92,7 @@ describe('UserDetailsPage', () => {
     fetchAlgoliaData.mockRejectedValueOnce(new Error('Test fetch error'))
 
     await act(async () => {
-      renderWithRouter(<UserDetailsPage />)
+      render(<UserDetailsPage />, { route: '/user/testuser' })
     })
 
     await waitFor(() => {

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -55,7 +55,6 @@
     "react-gtm-module": "^2.0.11",
     "react-icons": "^5.4.0",
     "react-router-dom": "^7.0.2",
-    "react-tooltip": "^5.28.0",
     "tailwind-merge": "^3.0.1",
     "tailwindcss-animate": "^1.0.7"
   },

diff --git a/frontend/src/components/ActionButton.tsx b/frontend/src/components/ActionButton.tsx
@@ -32,7 +32,13 @@ const ActionButton: React.FC<ActionButtonProps> = ({ url, onClick, tooltipLabel,
     </TooltipWrapper>
   ) : (
     <TooltipWrapper tooltipLabel={tooltipLabel}>
-      <Button onClick={onClick} className={baseStyles} aria-label={tooltipLabel}>
+      <Button
+        focusVisibleRing={'none'}
+        focusRingColor={'currentBg'}
+        onClick={onClick}
+        className={baseStyles}
+        aria-label={tooltipLabel}
+      >
         {children}
       </Button>
     </TooltipWrapper>

diff --git a/frontend/src/components/Footer.tsx b/frontend/src/components/Footer.tsx
@@ -1,3 +1,4 @@
+import { Button, Link } from '@chakra-ui/react'
 import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { useState, useCallback } from 'react'
@@ -21,7 +22,7 @@ export default function Footer() {
           {/* Iterate over footerSections to render each section */}
           {footerSections.map((section: Section) => (
             <div key={section.title} className="space-y-4">
-              <button
+              <Button
                 onClick={() => toggleSection(section.title)}
                 className="flex w-full items-center justify-between text-left text-lg font-semibold focus:outline-none focus:ring-slate-400 lg:cursor-default"
                 aria-expanded={openSection === section.title}
@@ -36,7 +37,7 @@ export default function Footer() {
                     <FontAwesomeIcon icon={faChevronDown} className="h-4 w-4" />
                   )}
                 </span>
-              </button>
+              </Button>
               <ul
                 id={`footer-section-${section.title}`}
                 className={`space-y-2 overflow-hidden text-sm transition-all duration-300 ease-in-out lg:max-h-full ${
@@ -49,13 +50,13 @@ export default function Footer() {
                     {link.isSpan ? (
                       <span className="text-slate-600 dark:text-slate-400">{link.text}</span>
                     ) : (
-                      <a
+                      <Link
                         target="_blank"
                         className="text-slate-600 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-100"
                         href={link.href}
                       >
                         {link.text}
-                      </a>
+                      </Link>
                     )}
                   </li>
                 ))}

diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx
@@ -1,3 +1,4 @@
+import { Button } from '@chakra-ui/react'
 import { faHeart as faRegularHeart } from '@fortawesome/free-regular-svg-icons' // Outline Heart
 import { faStar as faRegularStar } from '@fortawesome/free-regular-svg-icons'
 import { faBars, faTimes } from '@fortawesome/free-solid-svg-icons'
@@ -106,7 +107,7 @@ export default function Header() {
           />
           <ModeToggle />
           <div className="md:hidden">
-            <button
+            <Button
               onClick={toggleMobileMenu}
               className="text-slate-300 hover:text-slate-100 focus:outline-none"
             >
@@ -116,7 +117,7 @@ export default function Header() {
               ) : (
                 <FontAwesomeIcon icon={faBars} className="h-6 w-6" />
               )}
-            </button>
+            </Button>
           </div>
         </div>
       </div>

diff --git a/frontend/src/components/InfoBlock.tsx b/frontend/src/components/InfoBlock.tsx
@@ -1,3 +1,4 @@
+import { Link } from '@chakra-ui/react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 
 const InfoBlock = ({ icon, label = '', value, isLink = false, className = '' }) => (
@@ -7,9 +8,9 @@ const InfoBlock = ({ icon, label = '', value, isLink = false, className = '' })
       <div className="text-sm md:text-base">
         {label && <div className="text-sm font-medium">{label}</div>}
         {isLink ? (
-          <a href={value} className="hover:underline dark:text-sky-600">
+          <Link href={value} className="hover:underline dark:text-sky-600">
             {value}
-          </a>
+          </Link>
         ) : (
           value
         )}

diff --git a/frontend/src/components/ModeToggle.tsx b/frontend/src/components/ModeToggle.tsx
@@ -1,10 +1,8 @@
 import { faMoon, faSun } from '@fortawesome/free-regular-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { useState, useEffect } from 'react'
-import { Tooltip } from 'react-tooltip'
-import { themeToggleTooltip } from 'utils/constants'
-
 import { cn } from 'utils/utility'
+import { Tooltip } from 'components/ui/tooltip'
 
 function ModeToggle({ className }: { className?: string }) {
   const [dark, setDark] = useState(() => {
@@ -31,21 +29,23 @@ function ModeToggle({ className }: { className?: string }) {
       <span className="text-sm font-medium text-gray-900 dark:text-gray-100">
         <FontAwesomeIcon icon={dark ? faMoon : faSun} className="h-4 w-4" fixedWidth />
       </span>
-      <label
-        className="relative inline-flex cursor-pointer items-center"
-        data-tooltip-id="mode-toggle-tooltip"
-        data-tooltip-place="bottom-start"
-        data-tooltip-content={dark ? 'Enable light mode' : 'Enable dark mode'}
+      <Tooltip
+        showArrow
+        content={dark ? 'Enable light mode' : 'Enable dark mode'}
+        positioning={{ placement: 'bottom-start' }}
+        openDelay={100}
+        closeDelay={100}
       >
-        <input
-          type="checkbox"
-          className="peer sr-only"
-          checked={!dark}
-          onChange={darkModeHandler}
-        />
-        <div className="peer h-6 w-11 rounded-full bg-gray-200 after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:after:translate-x-full peer-checked:after:border-white dark:border-gray-600 dark:bg-gray-700"></div>
-      </label>
-      <Tooltip id="mode-toggle-tooltip" style={themeToggleTooltip} />
+        <label className="relative inline-flex cursor-pointer items-center">
+          <input
+            type="checkbox"
+            className="peer sr-only"
+            checked={!dark}
+            onChange={darkModeHandler}
+          />
+          <div className="peer h-6 w-11 rounded-full bg-gray-200 after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:after:translate-x-full peer-checked:after:border-white dark:border-gray-600 dark:bg-gray-700"></div>
+        </label>
+      </Tooltip>
     </div>
   )
 }

diff --git a/frontend/src/components/NavButton.tsx b/frontend/src/components/NavButton.tsx
@@ -1,3 +1,4 @@
+import { Link } from '@chakra-ui/react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { useState } from 'react'
 import { NavButtonProps } from 'types/button'
@@ -15,7 +16,7 @@ const NavButton = ({
   const [isHovered, setIsHovered] = useState(false)
 
   return (
-    <a
+    <Link
       href={href}
       target="_blank"
       rel="noopener noreferrer"
@@ -34,7 +35,7 @@ const NavButton = ({
         style={{ color: isHovered ? hoverIconColor : defaultIconColor }}
       />
       <span>{text}</span>
-    </a>
+    </Link>
   )
 }