refactor: Move IconComponent to shared-components #6273
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
No significant changes currently retry |
Our Pull Request Approval ProcessThis PR will be reviewed according to our: Your PR may be automatically closed if:
Thanks for contributing! |
Contributor
WalkthroughIconComponent was moved to Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Caution Pre-merge checks failedPlease resolve all errors before merging. Addressing warnings is optional.
❌ Failed checks (1 error)
✅ Passed checks (5 passed)
✨ Finishing touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
|
@coderabbitai full review and reevaluate all resolved items and include the following points:
Note: Test-focused PRs should maintain clear scope boundaries. However, this does NOT exempt bugs in the specific file(s) being tested - those must be fixed in the same PR. Only bugs in unrelated files may be deferred to separate issues. |
Contributor
✅ Actions performedComments resolved and changes approved. |
Contributor
|
@Priyanshubhartistm Please fix the failing tests. |
Priyanshubhartistm
force-pushed
the
refactor/iconcomponent-shared
branch
from
1fc8e02 to
e573fa2
Compare
Contributor
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Fix all issues with AI agents
In @src/components/CollapsibleDropdown/CollapsibleDropdown.tsx:
- Around line 18-31: The TSDoc example for CollapsibleDropdown contains
unnecessary backslash-escaped braces that break JSX/TSX syntax; update the
example inside the triple-backtick block to use normal braces (e.g., change
target=\{\{ ... \}\} to target={{ ... }}, replace \{ ... \} array items with {
... }, and convert showDropdown=\{true\} and setShowDropdown=\{setShowDropdown\}
to showDropdown={true} and setShowDropdown={setShowDropdown}) so the example
displays and compiles correctly.
- Around line 7-10: Update the JSDoc for the CollapsibleDropdown component to
use flat @param names that match the destructured function signature: replace
nested tags like @param props.target, @param props.showDropdown, @param
props.setShowDropdown with @param target, @param showDropdown, and @param
setShowDropdown so the editor/parsing correctly associates docs with the
destructured parameters in the CollapsibleDropdown function.
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (1)
src/components/CollapsibleDropdown/CollapsibleDropdown.tsx
🧰 Additional context used
📓 Path-based instructions (3)
src/**/components/**/*.{ts,tsx}
📄 CodeRabbit inference engine (Custom checks)
All components must follow reusable component policy: No inline interfaces, correct portal placement, wrapper usage
Files:
src/components/CollapsibleDropdown/CollapsibleDropdown.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (Custom checks)
Zero TypeScript errors: Run pnpm run typecheck and must pass without errors or warnings
Files:
src/components/CollapsibleDropdown/CollapsibleDropdown.tsx
**/*
⚙️ CodeRabbit configuration file
**/*: Full review and reevaluate all resolved and dismissed items and include the following points:
Test Coverage & Quality Validation:
- Validate whether any updated test files:
- Cover all use cases including edge cases, error scenarios, and success paths
- Have valid, properly structured tests following Jest and React Testing Library best practices
- Provide 100% test code coverage for all modified/added functions, components, and branches
- Include proper mocking of GraphQL queries/mutations, external dependencies, and API calls
- Test both user interactions and state changes comprehensively
- Require any additional tests for uncovered scenarios
- For each modified file with logic or UI, verify corresponding test files exist and are updated:
- Check that test files follow naming conventions (_.test.tsx, _.test.ts, _.spec.tsx, _.spec.ts)
- Validate that tests don't include disabled tests (it.skip, describe.skip) unless explicitly documented
- Ensure mock data cleanup is performed (as required by pre-commit hooks)
Code Quality & Repository Standards:
- Verify TypeScript compliance:
- No use of
anytype without explicit justification- Proper interface/type definitions for all props, state, and function parameters
- No TypeScript errors or warnings
- Validate GraphQL implementation:
- Queries/mutations are properly typed and follow existing patterns in src/GraphQl/
- No duplicate or redundant queries (check for pagination inconsistencies)
- Error handling is implemented for all GraphQL operations
- Check React component best practices:
- Functional components with proper hooks usage
- Material-UI component patterns are followed consistently
- No prop drilling; proper use of context when needed
- Proper cleanup in useEffect hooks
- Verify internatio...
Files:
src/components/CollapsibleDropdown/CollapsibleDropdown.tsx
🧠 Learnings (4)
📚 Learning: 2025-12-26T20:34:53.912Z
Learnt from: MuhammadUmar7195
Repo: PalisadoesFoundation/talawa-admin PR: 5847
File: src/screens/UserPortal/Volunteer/Invitations/Invitations.tsx:243-243
Timestamp: 2025-12-26T20:34:53.912Z
Learning: In PalisadoesFoundation/talawa-admin, whenever you modify a file (e.g., for migrations, tests, or feature changes), replace inline color attributes like color="grey" with Bootstrap utility classes (e.g., className="text-secondary") to satisfy the CSS-Policy-Check CI. This is a general compliance guideline, not scope creep, and should be applied to all affected TSX files during reviews. Steps: 1) Find inline color attributes in JSX/TSX. 2) Replace with appropriate Bootstrap text/color utility classes. 3) Ensure the visual outcome remains the same. 4) Run CI checks to confirm the policy passes.
Applied to files:
src/components/CollapsibleDropdown/CollapsibleDropdown.tsx
📚 Learning: 2026-01-06T16:39:41.033Z
Learnt from: Jashan32
Repo: PalisadoesFoundation/talawa-admin PR: 6199
File: src/shared-components/ProfileForm/ProfileForm.tsx:0-0
Timestamp: 2026-01-06T16:39:41.033Z
Learning: When refactoring or consolidating components (e.g., talawa-admin), remove helper functions that were copied from old files but are not used in the new implementation. Before exporting utilities, verify there are real usages across the codebase (search usages, remove dead code, and keep only necessary exports) to improve maintainability and reduce bundle size.
Applied to files:
src/components/CollapsibleDropdown/CollapsibleDropdown.tsx
📚 Learning: 2026-01-07T09:08:09.150Z
Learnt from: adityai0
Repo: PalisadoesFoundation/talawa-admin PR: 6202
File: src/components/EventManagement/EventAgendaItems/EventAgendaItems.tsx:4-13
Timestamp: 2026-01-07T09:08:09.150Z
Learning: In the talawa-admin repository, document comments with TSDoc in all TSX files. Do not use JSDoc. Write non-standard tags like component and requires as plain text (no leading @). Use standard TSDoc tags such as param, remarks, returns, and example with the leading @. This guideline applies to all TSX components (e.g., src/components/.../*.tsx).
Applied to files:
src/components/CollapsibleDropdown/CollapsibleDropdown.tsx
📚 Learning: 2026-01-08T16:45:49.201Z
Learnt from: adityai0
Repo: PalisadoesFoundation/talawa-admin PR: 6241
File: src/components/AdminPortal/OrgPeopleListCard/OrgPeopleListCard.tsx:12-16
Timestamp: 2026-01-08T16:45:49.201Z
Learning: In TSX components, prefer flat JSDoc parameter documentation format (e.g., param id, param toggleRemoveModal) over the nested format (param props.id). The nested form can break editor parsing. When a component accepts a props object, destructure the props in the function signature to align with the flat JSDoc style (e.g., function MyComp({ id, toggleRemoveModal }: Props) { ... }). Ensure all param tags correspond to the destructured props and reflect actual component props to improve editor support and readability.
Applied to files:
src/components/CollapsibleDropdown/CollapsibleDropdown.tsx
🔇 Additional comments (2)
src/components/CollapsibleDropdown/CollapsibleDropdown.tsx (2)
42-42: Import path is correctly configured.With
baseUrl: "src"configured in tsconfig.json, the import'shared-components/IconComponent/IconComponent'correctly resolves tosrc/shared-components/IconComponent/IconComponent.tsx. This is the standard configuration pattern and will compile without errors.
1-132: No changes required - test file properly updated with new IconComponent import path.The test file has been verified and already contains the correct mock setup. Line 36 of
CollapsibleDropdown.spec.tsxproperly mocksIconComponentfrom the new path'shared-components/IconComponent/IconComponent'. Test coverage is comprehensive with 10+ test suites covering component rendering, dropdown toggle functionality, location-based visibility, icon styling, chevron direction, accessibility attributes, navigation, and button styling. No skipped tests were found, and mock cleanup is properly implemented.
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/components/CollapsibleDropdown/CollapsibleDropdown.tsx (1)
32-32: Remove @ prefix from non-standard TSDoc tag.The
@dependenciestag is not a standard TSDoc tag and should not use the@prefix. In the talawa-admin repository, non-standard tags should be written as plain text without the leading@.📝 Proposed fix
-@dependencies +dependenciesAs per TSDoc coding guidelines for this repository, which require standard tags (@param, @returns, @remarks, @example) to use the @ prefix, while non-standard tags should be plain text.
🤖 Fix all issues with AI agents
In @src/components/CollapsibleDropdown/CollapsibleDropdown.tsx:
- Around line 7-11: Update the JSDoc for the CollapsibleDropdown component to
restore precise return type information: change the @returns line to document
the actual React element type (e.g., JSX.Element or React.ReactElement) produced
by the CollapsibleDropdown function so editors can provide accurate
IntelliSense; locate the component declaration named CollapsibleDropdown and
replace the simplified "@returns The collapsible dropdown component." with a
typed description like "@returns {JSX.Element} The rendered collapsible dropdown
element." and keep the existing flat @param entries unchanged.
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (1)
src/components/CollapsibleDropdown/CollapsibleDropdown.tsx
🧰 Additional context used
📓 Path-based instructions (3)
src/**/components/**/*.{ts,tsx}
📄 CodeRabbit inference engine (Custom checks)
All components must follow reusable component policy: No inline interfaces, correct portal placement, wrapper usage
Files:
src/components/CollapsibleDropdown/CollapsibleDropdown.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (Custom checks)
Zero TypeScript errors: Run pnpm run typecheck and must pass without errors or warnings
Files:
src/components/CollapsibleDropdown/CollapsibleDropdown.tsx
**/*
⚙️ CodeRabbit configuration file
**/*: Full review and reevaluate all resolved and dismissed items and include the following points:
Test Coverage & Quality Validation:
- Validate whether any updated test files:
- Cover all use cases including edge cases, error scenarios, and success paths
- Have valid, properly structured tests following Jest and React Testing Library best practices
- Provide 100% test code coverage for all modified/added functions, components, and branches
- Include proper mocking of GraphQL queries/mutations, external dependencies, and API calls
- Test both user interactions and state changes comprehensively
- Require any additional tests for uncovered scenarios
- For each modified file with logic or UI, verify corresponding test files exist and are updated:
- Check that test files follow naming conventions (_.test.tsx, _.test.ts, _.spec.tsx, _.spec.ts)
- Validate that tests don't include disabled tests (it.skip, describe.skip) unless explicitly documented
- Ensure mock data cleanup is performed (as required by pre-commit hooks)
Code Quality & Repository Standards:
- Verify TypeScript compliance:
- No use of
anytype without explicit justification- Proper interface/type definitions for all props, state, and function parameters
- No TypeScript errors or warnings
- Validate GraphQL implementation:
- Queries/mutations are properly typed and follow existing patterns in src/GraphQl/
- No duplicate or redundant queries (check for pagination inconsistencies)
- Error handling is implemented for all GraphQL operations
- Check React component best practices:
- Functional components with proper hooks usage
- Material-UI component patterns are followed consistently
- No prop drilling; proper use of context when needed
- Proper cleanup in useEffect hooks
- Verify internatio...
Files:
src/components/CollapsibleDropdown/CollapsibleDropdown.tsx
🧠 Learnings (4)
📚 Learning: 2025-12-26T20:34:53.912Z
Learnt from: MuhammadUmar7195
Repo: PalisadoesFoundation/talawa-admin PR: 5847
File: src/screens/UserPortal/Volunteer/Invitations/Invitations.tsx:243-243
Timestamp: 2025-12-26T20:34:53.912Z
Learning: In PalisadoesFoundation/talawa-admin, whenever you modify a file (e.g., for migrations, tests, or feature changes), replace inline color attributes like color="grey" with Bootstrap utility classes (e.g., className="text-secondary") to satisfy the CSS-Policy-Check CI. This is a general compliance guideline, not scope creep, and should be applied to all affected TSX files during reviews. Steps: 1) Find inline color attributes in JSX/TSX. 2) Replace with appropriate Bootstrap text/color utility classes. 3) Ensure the visual outcome remains the same. 4) Run CI checks to confirm the policy passes.
Applied to files:
src/components/CollapsibleDropdown/CollapsibleDropdown.tsx
📚 Learning: 2026-01-06T16:39:41.033Z
Learnt from: Jashan32
Repo: PalisadoesFoundation/talawa-admin PR: 6199
File: src/shared-components/ProfileForm/ProfileForm.tsx:0-0
Timestamp: 2026-01-06T16:39:41.033Z
Learning: When refactoring or consolidating components (e.g., talawa-admin), remove helper functions that were copied from old files but are not used in the new implementation. Before exporting utilities, verify there are real usages across the codebase (search usages, remove dead code, and keep only necessary exports) to improve maintainability and reduce bundle size.
Applied to files:
src/components/CollapsibleDropdown/CollapsibleDropdown.tsx
📚 Learning: 2026-01-07T09:08:09.150Z
Learnt from: adityai0
Repo: PalisadoesFoundation/talawa-admin PR: 6202
File: src/components/EventManagement/EventAgendaItems/EventAgendaItems.tsx:4-13
Timestamp: 2026-01-07T09:08:09.150Z
Learning: In the talawa-admin repository, document comments with TSDoc in all TSX files. Do not use JSDoc. Write non-standard tags like component and requires as plain text (no leading @). Use standard TSDoc tags such as param, remarks, returns, and example with the leading @. This guideline applies to all TSX components (e.g., src/components/.../*.tsx).
Applied to files:
src/components/CollapsibleDropdown/CollapsibleDropdown.tsx
📚 Learning: 2026-01-08T16:45:49.201Z
Learnt from: adityai0
Repo: PalisadoesFoundation/talawa-admin PR: 6241
File: src/components/AdminPortal/OrgPeopleListCard/OrgPeopleListCard.tsx:12-16
Timestamp: 2026-01-08T16:45:49.201Z
Learning: In TSX components, prefer flat JSDoc parameter documentation format (e.g., param id, param toggleRemoveModal) over the nested format (param props.id). The nested form can break editor parsing. When a component accepts a props object, destructure the props in the function signature to align with the flat JSDoc style (e.g., function MyComp({ id, toggleRemoveModal }: Props) { ... }). Ensure all param tags correspond to the destructured props and reflect actual component props to improve editor support and readability.
Applied to files:
src/components/CollapsibleDropdown/CollapsibleDropdown.tsx
🔇 Additional comments (1)
src/components/CollapsibleDropdown/CollapsibleDropdown.tsx (1)
41-41: Import path change for IconComponent is correctly implemented.The migration of IconComponent from
components/IconComponent/IconComponenttoshared-components/IconComponent/IconComponenton line 41 is correct and fully aligned with the PR objective.Verification confirms:
- TypeScript type checking passes without errors
- Test file
CollapsibleDropdown.spec.tsxhas been properly updated with the mock using the new path:vi.mock('shared-components/IconComponent/IconComponent', ...)- No old import references remain in the codebase
- The new IconComponent path exists with both the component and test files in place
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What kind of change does this PR introduce?
Refactoring
Issue Number:
Fixes #6168
Snapshots/Videos:
N/A – This PR only includes internal refactoring with no UI changes.
If relevant, did you update the documentation?
Not applicable. No documentation changes were required for this refactor.
Summary
This PR refactors the
IconComponentto comply with the reusable shared component policy.The component was previously located under
src/componentsdespite being used by shared components.It has now been migrated to
src/shared-components, with all imports updated accordingly.The refactor maintains existing functionality and ensures consistency with the project’s shared component architecture.
Does this PR introduce a breaking change?
No. This change is purely a refactor and does not alter any external APIs or component behavior.
Checklist
CodeRabbit AI Review
Test Coverage
Other information
IconComponent.Have you read the contributing guide?
Yes
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.