Buttons tooltips anchor tags migration to chakraUI (#715)

* anchor tags migrated * Buttons migrated to chakraUI * migarted buttons tooltip and anchortags to chakraUI * fixed focus ring issue * Generic component for details page (#678) * base_design * Add types and apply corrections. * Improvement * cleanup * added issue label * fixes * pre-commit --------- Co-authored-by: Kate Golovanova <[email protected]> * Addition of Contribute Section in Home of Slack NestBot (#593) * Addition of Contribute Section in Home of Slack NestBot * Update contribute.py * Update of apps/slack/commands/contribute * Minor changes * Update of code after the review * Update backend/apps/slack/commands/contribute.py Co-authored-by: Nitin Awari <[email protected]> * Update urls.py * Update contribute.py * Update code --------- Co-authored-by: Nitin Awari <[email protected]> Co-authored-by: Arkadii Yakovets <[email protected]> Co-authored-by: Arkadii Yakovets <[email protected]> * resolved conflicts * sort dropdown tooltip position modified * test utils warpper used * checks and format * removed unnecessary button props * removed redundant lines * Update FE dependencies * tooltip-bug (#744) * Addition of website attribute to project schema (#740) * Addition of website attribute to project schema * Update vite.config.ts * Update website-empty.yaml * Update website-none.yaml * Update website-none.yaml * Update website-empty.yaml * Update website-none.yaml * Update website-empty.yaml * Update website-empty.yaml * Update project_test.py * Update project.json * Delete schema/tests/data/project/negative/website-empty.yaml * Update code --------- Co-authored-by: Arkadii Yakovets <[email protected]> Co-authored-by: Arkadii Yakovets <[email protected]> * Add blog to project schema (#745) * added blog attribute to project schema * added blog attribute * Update project_test.py * Update code * Update code --------- Co-authored-by: Arkadii Yakovets <[email protected]> * Initialize OWASP chapter schema * Refactor index synonyms (#748) * Changes5 * Refactor index synonyms * Update code --------- Co-authored-by: Raghav Gupta 2 <[email protected]> Co-authored-by: Arkadii Yakovets <[email protected]> * write repository schema and tests (#741) * write repository schema and tests * fixed repository schema tests * Update code --------- Co-authored-by: Arkadii Yakovets <[email protected]> * Fetch /gsoc command data from Algolia instead of DB (#712) * gsoc command data fetch from algolia * pre-commit and format checks * moved get_gsoc_projects to search project file * Update code --------- Co-authored-by: Arkadii Yakovets <[email protected]> Co-authored-by: Arkadii Yakovets <[email protected]> * Reconfigure spell check * Bump @chakra-ui/react from 3.6.0 to 3.7.0 in /frontend (#752) Bumps [@chakra-ui/react](https://github.com/chakra-ui/chakra-ui/tree/HEAD/packages/react) from 3.6.0 to 3.7.0. - [Release notes](https://github.com/chakra-ui/chakra-ui/releases) - [Changelog](https://github.com/chakra-ui/chakra-ui/blob/main/packages/react/CHANGELOG.md) - [Commits](https://github.com/chakra-ui/chakra-ui/commits/@chakra-ui/[email protected]/packages/react) --- updated-dependencies: - dependency-name: "@chakra-ui/react" dependency-type: direct:production update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Update params mapping * Added a method to convert block to text and fixed warning (#754) * Added a method to convert block to text * Added testcase for utils * Update code --------- Co-authored-by: Arkadii Yakovets <[email protected]> Co-authored-by: Arkadii Yakovets <[email protected]> * Update frontend dependencies * Run poetry update * conflicts resolved * Cleanup: removing unused dependencies n dev dependencies (#601) * "Cleanup: removing unused dependencies n dev dependencies " * resolved conflicts * Fix staging image build * "Cleanup: removing unused dependencies n dev dependencies " * fix run npm install install prettier plugin tailwindcss * fix run run npm lint check * fix check for uncommited changes * resolved conflicts n npm format check * "Cleanup: removing unused dependencies n dev dependencies " * resolved conflicts * Fix staging image build * "Cleanup: removing unused dependencies n dev dependencies " * fix run npm install install prettier plugin tailwindcss * fix run run npm lint check * fix check for uncommited changes * resolved conflicts n npm format check * updated one * updated fix * removed unwanted files from updated fix * Update code --------- Co-authored-by: Arkadii Yakovets <[email protected]> --------- Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: Kate Golovanova <[email protected]> Co-authored-by: Raj gupta <[email protected]> Co-authored-by: AbhayTopno <[email protected]> Co-authored-by: Nitin Awari <[email protected]> Co-authored-by: Arkadii Yakovets <[email protected]> Co-authored-by: Arkadii Yakovets <[email protected]> Co-authored-by: yashgoyal0110 <[email protected]> Co-authored-by: Rusheek <[email protected]> Co-authored-by: Raghavg18 <[email protected]> Co-authored-by: Raghav Gupta 2 <[email protected]> Co-authored-by: Shyam Kumar <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Abhay <[email protected]> Co-authored-by: Diamond Girl <[email protected]>
OWASP · Feb 7, 2025 · 0c297be · 0c297be
1 parent 777d712
commit 0c297be
Show file tree

Hide file tree

Showing 18 changed files with 103 additions and 113 deletions.
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>
   )
 }
 

diff --git a/frontend/src/components/Pagination.tsx b/frontend/src/components/Pagination.tsx
@@ -1,3 +1,4 @@
+import { Button } from '@chakra-ui/react'
 import { faEllipsisH } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import React from 'react'
@@ -59,21 +60,21 @@ const Pagination: React.FC<PaginationProps> = ({
   return (
     <div className="mt-8 flex flex-col items-center justify-center space-y-3">
       <div className="flex flex-wrap items-center justify-center gap-2">
-        <button
+        <Button
           className="flex h-10 min-w-[2.5rem] items-center justify-center rounded-md border border-gray-200 bg-white px-3 text-sm font-medium text-gray-700 hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
           onClick={() => onPageChange(Math.max(1, currentPage - 1))}
           disabled={currentPage === 1}
         >
           Prev
-        </button>
+        </Button>
         {pageNumbers.map((number, index) => (
           <React.Fragment key={index}>
             {number === '...' ? (
               <span className="flex h-10 w-10 items-center justify-center text-gray-600 dark:text-gray-400">
                 <FontAwesomeIcon icon={faEllipsisH} className="h-5 w-5"></FontAwesomeIcon>
               </span>
             ) : (
-              <button
+              <Button
                 className={`flex h-10 min-w-[2.5rem] items-center justify-center rounded-md px-3 text-sm font-medium ${
                   currentPage === number
                     ? 'bg-[#83a6cc] text-white dark:bg-white dark:text-black'
@@ -82,17 +83,17 @@ const Pagination: React.FC<PaginationProps> = ({
                 onClick={() => onPageChange(number as number)}
               >
                 {number}
-              </button>
+              </Button>
             )}
           </React.Fragment>
         ))}
-        <button
+        <Button
           className="flex h-10 min-w-[2.5rem] items-center justify-center rounded-md border border-gray-200 bg-white px-3 text-sm font-medium text-gray-700 hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
           onClick={() => onPageChange(Math.min(totalPages, currentPage + 1))}
           disabled={currentPage === totalPages}
         >
           Next
-        </button>
+        </Button>
       </div>
     </div>
   )