Skip to content

Commit 0c297be

Browse files
Dishant1804kasyaRajgupta36AbhayTopnonitinawari
authored
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]>
1 parent 777d712 commit 0c297be

18 files changed

+103
-113
lines changed

‎frontend/__tests__/src/pages/UserDetails.test.tsx

+7-17
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
1-
import { act, render, screen, waitFor } from '@testing-library/react'
2-
import React from 'react'
3-
import { MemoryRouter, Route, Routes } from 'react-router-dom'
1+
import { act, screen, waitFor } from '@testing-library/react'
2+
import { render } from 'wrappers/testUtil'
43
import UserDetailsPage from 'pages/UserDetails'
54
import '@testing-library/jest-dom'
65

@@ -34,16 +33,6 @@ const mockUser = {
3433
created_at: 1723002473,
3534
}
3635

37-
const renderWithRouter = (ui: React.ReactElement) => {
38-
return render(
39-
<MemoryRouter initialEntries={['/user/testuser']}>
40-
<Routes>
41-
<Route path="/user/:login" element={ui} />
42-
</Routes>
43-
</MemoryRouter>
44-
)
45-
}
46-
4736
describe('UserDetailsPage', () => {
4837
const { fetchAlgoliaData } = require('api/fetchAlgoliaData')
4938

@@ -54,7 +43,7 @@ describe('UserDetailsPage', () => {
5443
test('renders loading spinner initially', async () => {
5544
fetchAlgoliaData.mockImplementation(() => new Promise(() => {}))
5645
await act(async () => {
57-
renderWithRouter(<UserDetailsPage />)
46+
render(<UserDetailsPage />, { route: '/user/testuser' })
5847
})
5948
const loadingSpinner = screen.getAllByAltText('Loading indicator')
6049
await waitFor(() => {
@@ -66,7 +55,7 @@ describe('UserDetailsPage', () => {
6655
fetchAlgoliaData.mockResolvedValue({ hits: [mockUser] })
6756

6857
await act(async () => {
69-
renderWithRouter(<UserDetailsPage />)
58+
render(<UserDetailsPage />, { route: '/user/testuser' })
7059
})
7160

7261
// Wait for the loading state to finish
@@ -87,13 +76,14 @@ describe('UserDetailsPage', () => {
8776
fetchAlgoliaData.mockResolvedValue({ hits: [] })
8877

8978
await act(async () => {
90-
renderWithRouter(<UserDetailsPage />)
79+
render(<UserDetailsPage />, { route: '/user/testuser' })
9180
})
9281

9382
await waitFor(() => {
9483
expect(screen.getByText('User not found')).toBeInTheDocument()
9584
})
9685
})
86+
9787
test('logs error to logger when fetchUserData fails', async () => {
9888
const { fetchAlgoliaData } = require('api/fetchAlgoliaData')
9989
const logger = require('utils/logger')
@@ -102,7 +92,7 @@ describe('UserDetailsPage', () => {
10292
fetchAlgoliaData.mockRejectedValueOnce(new Error('Test fetch error'))
10393

10494
await act(async () => {
105-
renderWithRouter(<UserDetailsPage />)
95+
render(<UserDetailsPage />, { route: '/user/testuser' })
10696
})
10797

10898
await waitFor(() => {

‎frontend/package-lock.json

-21
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎frontend/package.json

-1
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,6 @@
5555
"react-gtm-module": "^2.0.11",
5656
"react-icons": "^5.4.0",
5757
"react-router-dom": "^7.0.2",
58-
"react-tooltip": "^5.28.0",
5958
"tailwind-merge": "^3.0.1",
6059
"tailwindcss-animate": "^1.0.7"
6160
},

‎frontend/src/components/ActionButton.tsx

+7-1
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,13 @@ const ActionButton: React.FC<ActionButtonProps> = ({ url, onClick, tooltipLabel,
3232
</TooltipWrapper>
3333
) : (
3434
<TooltipWrapper tooltipLabel={tooltipLabel}>
35-
<Button onClick={onClick} className={baseStyles} aria-label={tooltipLabel}>
35+
<Button
36+
focusVisibleRing={'none'}
37+
focusRingColor={'currentBg'}
38+
onClick={onClick}
39+
className={baseStyles}
40+
aria-label={tooltipLabel}
41+
>
3642
{children}
3743
</Button>
3844
</TooltipWrapper>

‎frontend/src/components/Footer.tsx

+5-4
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { Button, Link } from '@chakra-ui/react'
12
import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons'
23
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
34
import { useState, useCallback } from 'react'
@@ -21,7 +22,7 @@ export default function Footer() {
2122
{/* Iterate over footerSections to render each section */}
2223
{footerSections.map((section: Section) => (
2324
<div key={section.title} className="space-y-4">
24-
<button
25+
<Button
2526
onClick={() => toggleSection(section.title)}
2627
className="flex w-full items-center justify-between text-left text-lg font-semibold focus:outline-none focus:ring-slate-400 lg:cursor-default"
2728
aria-expanded={openSection === section.title}
@@ -36,7 +37,7 @@ export default function Footer() {
3637
<FontAwesomeIcon icon={faChevronDown} className="h-4 w-4" />
3738
)}
3839
</span>
39-
</button>
40+
</Button>
4041
<ul
4142
id={`footer-section-${section.title}`}
4243
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() {
4950
{link.isSpan ? (
5051
<span className="text-slate-600 dark:text-slate-400">{link.text}</span>
5152
) : (
52-
<a
53+
<Link
5354
target="_blank"
5455
className="text-slate-600 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-100"
5556
href={link.href}
5657
>
5758
{link.text}
58-
</a>
59+
</Link>
5960
)}
6061
</li>
6162
))}

‎frontend/src/components/Header.tsx

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { Button } from '@chakra-ui/react'
12
import { faHeart as faRegularHeart } from '@fortawesome/free-regular-svg-icons' // Outline Heart
23
import { faStar as faRegularStar } from '@fortawesome/free-regular-svg-icons'
34
import { faBars, faTimes } from '@fortawesome/free-solid-svg-icons'
@@ -106,7 +107,7 @@ export default function Header() {
106107
/>
107108
<ModeToggle />
108109
<div className="md:hidden">
109-
<button
110+
<Button
110111
onClick={toggleMobileMenu}
111112
className="text-slate-300 hover:text-slate-100 focus:outline-none"
112113
>
@@ -116,7 +117,7 @@ export default function Header() {
116117
) : (
117118
<FontAwesomeIcon icon={faBars} className="h-6 w-6" />
118119
)}
119-
</button>
120+
</Button>
120121
</div>
121122
</div>
122123
</div>

‎frontend/src/components/InfoBlock.tsx

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { Link } from '@chakra-ui/react'
12
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
23

34
const InfoBlock = ({ icon, label = '', value, isLink = false, className = '' }) => (
@@ -7,9 +8,9 @@ const InfoBlock = ({ icon, label = '', value, isLink = false, className = '' })
78
<div className="text-sm md:text-base">
89
{label && <div className="text-sm font-medium">{label}</div>}
910
{isLink ? (
10-
<a href={value} className="hover:underline dark:text-sky-600">
11+
<Link href={value} className="hover:underline dark:text-sky-600">
1112
{value}
12-
</a>
13+
</Link>
1314
) : (
1415
value
1516
)}

‎frontend/src/components/ModeToggle.tsx

+17-17
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
11
import { faMoon, faSun } from '@fortawesome/free-regular-svg-icons'
22
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
33
import { useState, useEffect } from 'react'
4-
import { Tooltip } from 'react-tooltip'
5-
import { themeToggleTooltip } from 'utils/constants'
6-
74
import { cn } from 'utils/utility'
5+
import { Tooltip } from 'components/ui/tooltip'
86

97
function ModeToggle({ className }: { className?: string }) {
108
const [dark, setDark] = useState(() => {
@@ -31,21 +29,23 @@ function ModeToggle({ className }: { className?: string }) {
3129
<span className="text-sm font-medium text-gray-900 dark:text-gray-100">
3230
<FontAwesomeIcon icon={dark ? faMoon : faSun} className="h-4 w-4" fixedWidth />
3331
</span>
34-
<label
35-
className="relative inline-flex cursor-pointer items-center"
36-
data-tooltip-id="mode-toggle-tooltip"
37-
data-tooltip-place="bottom-start"
38-
data-tooltip-content={dark ? 'Enable light mode' : 'Enable dark mode'}
32+
<Tooltip
33+
showArrow
34+
content={dark ? 'Enable light mode' : 'Enable dark mode'}
35+
positioning={{ placement: 'bottom-start' }}
36+
openDelay={100}
37+
closeDelay={100}
3938
>
40-
<input
41-
type="checkbox"
42-
className="peer sr-only"
43-
checked={!dark}
44-
onChange={darkModeHandler}
45-
/>
46-
<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>
47-
</label>
48-
<Tooltip id="mode-toggle-tooltip" style={themeToggleTooltip} />
39+
<label className="relative inline-flex cursor-pointer items-center">
40+
<input
41+
type="checkbox"
42+
className="peer sr-only"
43+
checked={!dark}
44+
onChange={darkModeHandler}
45+
/>
46+
<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>
47+
</label>
48+
</Tooltip>
4949
</div>
5050
)
5151
}

‎frontend/src/components/NavButton.tsx

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { Link } from '@chakra-ui/react'
12
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
23
import { useState } from 'react'
34
import { NavButtonProps } from 'types/button'
@@ -15,7 +16,7 @@ const NavButton = ({
1516
const [isHovered, setIsHovered] = useState(false)
1617

1718
return (
18-
<a
19+
<Link
1920
href={href}
2021
target="_blank"
2122
rel="noopener noreferrer"
@@ -34,7 +35,7 @@ const NavButton = ({
3435
style={{ color: isHovered ? hoverIconColor : defaultIconColor }}
3536
/>
3637
<span>{text}</span>
37-
</a>
38+
</Link>
3839
)
3940
}
4041

‎frontend/src/components/Pagination.tsx

+7-6
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { Button } from '@chakra-ui/react'
12
import { faEllipsisH } from '@fortawesome/free-solid-svg-icons'
23
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
34
import React from 'react'
@@ -59,21 +60,21 @@ const Pagination: React.FC<PaginationProps> = ({
5960
return (
6061
<div className="mt-8 flex flex-col items-center justify-center space-y-3">
6162
<div className="flex flex-wrap items-center justify-center gap-2">
62-
<button
63+
<Button
6364
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"
6465
onClick={() => onPageChange(Math.max(1, currentPage - 1))}
6566
disabled={currentPage === 1}
6667
>
6768
Prev
68-
</button>
69+
</Button>
6970
{pageNumbers.map((number, index) => (
7071
<React.Fragment key={index}>
7172
{number === '...' ? (
7273
<span className="flex h-10 w-10 items-center justify-center text-gray-600 dark:text-gray-400">
7374
<FontAwesomeIcon icon={faEllipsisH} className="h-5 w-5"></FontAwesomeIcon>
7475
</span>
7576
) : (
76-
<button
77+
<Button
7778
className={`flex h-10 min-w-[2.5rem] items-center justify-center rounded-md px-3 text-sm font-medium ${
7879
currentPage === number
7980
? 'bg-[#83a6cc] text-white dark:bg-white dark:text-black'
@@ -82,17 +83,17 @@ const Pagination: React.FC<PaginationProps> = ({
8283
onClick={() => onPageChange(number as number)}
8384
>
8485
{number}
85-
</button>
86+
</Button>
8687
)}
8788
</React.Fragment>
8889
))}
89-
<button
90+
<Button
9091
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"
9192
onClick={() => onPageChange(Math.min(totalPages, currentPage + 1))}
9293
disabled={currentPage === totalPages}
9394
>
9495
Next
95-
</button>
96+
</Button>
9697
</div>
9798
</div>
9899
)

0 commit comments

Comments
 (0)