feat: functionality to view unread messages and mark messages as read. #2353
Conversation
WalkthroughThis pull request introduces a comprehensive set of changes across the Talawa Admin project, focusing on refactoring test files from Jest to Vitest, updating styling approaches, and enhancing the overall project structure. The changes span multiple components, screens, and configuration files, with a significant emphasis on test migration and CSS module standardization. Changes
Assessment against linked issues
Possibly related issues
Suggested labels
Suggested reviewers
Poem
Tip CodeRabbit's docstrings feature is now available as part of our Early Access Program! Simply use the command Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
Our Pull Request Approval ProcessThanks for contributing! Testing Your CodeRemember, your PRs won't be reviewed until these criteria are met:
Our policies make our code better. ReviewersDo not assign reviewers. Our Queue Monitors will review your PR and assign them.
Reviewing Your CodeYour reviewer(s) will have the following roles:
CONTRIBUTING.mdRead our CONTRIBUTING.md file. Most importantly:
Other
|
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## develop-postgres #2353 +/- ##
====================================================
- Coverage 97.98% 97.85% -0.13%
====================================================
Files 244 244
Lines 6949 6960 +11
Branches 2009 2011 +2
====================================================
+ Hits 6809 6811 +2
- Misses 130 139 +9
Partials 10 10 ☔ View full report in Codecov by Sentry. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 24
🧹 Outside diff range and nitpick comments (11)
src/components/UserPortal/ContactCard/ContactCard.tsx (1)
Line range hint
17-33: Update JSDoc documentation to include new props.The component's documentation is outdated and missing the new props. Please update it to include:
unseenMessages: Number of unread messageslastMessage: The most recent message in the conversation* @param selectedContact - The ID of the currently selected contact. * @param setSelectedContact - Function to set the ID of the selected contact. -* @param setSelectedContactName - Function to set the name of the selected contact. +* @param unseenMessages - Number of unread messages in the conversation +* @param lastMessage - The most recent message in the conversation +* @param isGroup - Boolean indicating if the contact represents a groupsrc/GraphQl/Queries/PlugInQueries.ts (1)
151-151: Update JSDoc comments to include the new field.The queries' documentation should be updated to include information about the
unseenMessagesByUsersfield for better maintainability and developer experience.Add the new field to the
@returnssection of both query documentations:* @returns The list of direct chats associated with the user, including details such as ID, creator, messages, organization, and participating users. + * The `unseenMessagesByUsers` field tracks messages that haven't been read by users. */Also applies to: 191-191
src/GraphQl/Mutations/OrganizationMutations.ts (1)
80-86: Add JSDoc documentation for consistency.Consider adding JSDoc documentation to match the style of other mutations in this file, describing the parameters and return value.
+/** + * GraphQL mutation to mark all messages in a chat as read for a specific user. + * + * @param chatId - The ID of the chat containing the messages + * @param userId - The ID of the user marking messages as read + * @returns The updated chat message object + */ export const MARK_CHAT_MESSAGES_AS_READ = gql`src/components/UserPortal/CreateDirectChat/CreateDirectChat.tsx (1)
195-195: Consider translating other hardcoded strings.While it's good that the "Add" button text is now translated, there are other hardcoded strings in the component that should also use the translation system for consistency:
Apply similar changes to these hardcoded strings:
- <Modal.Title>{'Chat'}</Modal.Title> + <Modal.Title>{t('chat')}</Modal.Title> - placeholder="searchFullName" + placeholder={t('searchFullName')} - <StyledTableCell>#</StyledTableCell> - <StyledTableCell align="center">{'user'}</StyledTableCell> - <StyledTableCell align="center">{'Chat'}</StyledTableCell> + <StyledTableCell>{t('tableHeader.number')}</StyledTableCell> + <StyledTableCell align="center">{t('tableHeader.user')}</StyledTableCell> + <StyledTableCell align="center">{t('tableHeader.chat')}</StyledTableCell>src/components/UserPortal/CreateGroupChat/CreateGroupChat.tsx (3)
Line range hint
191-391: Consider localizing remaining hardcoded strings.There are several hardcoded strings in the component that should be internationalized for consistency:
- "New Group"
- "Group name"
- "Next"
- "Chat"
- "searchFullName"
- "Remove"
- Table headers: "#", "user", "Chat"
Example implementation:
- <Modal.Title>New Group</Modal.Title> + <Modal.Title>{t('newGroup')}</Modal.Title> - <Form.Label>Group name</Form.Label> + <Form.Label>{t('groupName')}</Form.Label> - placeholder={'Group name'} + placeholder={t('groupName')} - <Button>Next</Button> + <Button>{t('next')}</Button> - <Modal.Title>{'Chat'}</Modal.Title> + <Modal.Title>{t('chat')}</Modal.Title> - placeholder="searchFullName" + placeholder={t('searchFullName')} - <Button variant="danger">Remove</Button> + <Button variant="danger">{t('remove')}</Button> - <StyledTableCell>#</StyledTableCell> - <StyledTableCell align="center">{'user'}</StyledTableCell> - <StyledTableCell align="center">{'Chat'}</StyledTableCell> + <StyledTableCell>{t('tableIndex')}</StyledTableCell> + <StyledTableCell align="center">{t('user')}</StyledTableCell> + <StyledTableCell align="center">{t('chat')}</StyledTableCell>
Line range hint
191-205: Remove commented-out code.There's a commented-out FormControl section that's duplicated below. Clean up the code by removing the commented section as it's redundant.
Line range hint
282-297: Add error handling for the createChat mutation.The
handleCreateGroupChatfunction should handle potential errors from the GraphQL mutation to provide better user feedback.Example implementation:
async function handleCreateGroupChat(): Promise<void> { - await createChat({ - variables: { - organizationId: selectedOrganization, - userIds: [userId, ...userIds], - name: title, - isGroup: true, - }, - }); - chatsListRefetch(); - toggleAddUserModal(); - toggleCreateGroupChatModal(); - reset(); + try { + await createChat({ + variables: { + organizationId: selectedOrganization, + userIds: [userId, ...userIds], + name: title, + isGroup: true, + }, + }); + await chatsListRefetch(); + toggleAddUserModal(); + toggleCreateGroupChatModal(); + reset(); + } catch (error) { + // Handle error appropriately (e.g., show error message to user) + console.error('Failed to create group chat:', error); + } }schema.graphql (1)
766-767: Consider enhancing read status tracking.While the current implementation allows marking messages as read, consider these enhancements for better message tracking:
- Add a
lastReadMessageIdfield to track each user's read position- Add a
readByfield to ChatMessage type for granular read status- Consider adding a subscription for read status updates
This would enable:
- Unread message counts
- Read receipts
- More efficient message fetching
src/screens/UserPortal/Chat/Chat.test.tsx (1)
Line range hint
2724-2764: Add test coverage for mark-as-read functionalityThe test case for "create new direct chat" lacks coverage for the new mark-as-read feature. Consider adding specific test cases to verify:
- Messages are marked as read when selecting a chat
- Error handling for failed mark-as-read requests
- UI updates after marking messages as read
Add new test cases:
test('marks messages as read when selecting a chat', async () => { // Setup mocks const mock = [ ...MARK_CHAT_MESSAGES_AS_READ_MOCK, // Other required mocks ]; // Render component render( <MockedProvider mocks={mock}> <Chat /> </MockedProvider> ); // Select a chat const chatItem = await screen.findByTestId('chat-item-1'); fireEvent.click(chatItem); // Verify messages are marked as read await waitFor(() => { expect(screen.queryByTestId('unread-indicator')).not.toBeInTheDocument(); }); }); test('handles mark-as-read errors gracefully', async () => { // Similar structure with error mock });src/components/UserPortal/CreateDirectChat/CreateDirectChat.test.tsx (2)
Line range hint
2775-2791: Standardize async testing patterns.The test uses a mix of
wait()andwaitFor()for handling async operations. Standardize onwaitFor()as it provides better error messages and retry behavior.test('Open and close create new direct chat modal', async () => { render(/* ... */); await waitFor(() => { expect(screen.getByTestId('dropdown')).toBeInTheDocument(); }); fireEvent.click(screen.getByTestId('dropdown')); await waitFor(() => { expect(screen.getByTestId('newDirectChat')).toBeInTheDocument(); }); // Continue with standardized waitFor pattern });
Line range hint
2827-2869: Add test cases for error scenarios and edge cases.The current tests only cover the happy path. Consider adding test cases for:
- Network errors in GraphQL mutations
- Invalid user selections
- Empty user list
- Error handling when creating a chat fails
Would you like me to help generate additional test cases for these scenarios?
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
📒 Files selected for processing (19)
- public/locales/en/translation.json (1 hunks)
- public/locales/fr/translation.json (1 hunks)
- public/locales/hi/translation.json (1 hunks)
- public/locales/sp/translation.json (1 hunks)
- public/locales/zh/translation.json (1 hunks)
- schema.graphql (1 hunks)
- src/GraphQl/Mutations/OrganizationMutations.ts (2 hunks)
- src/GraphQl/Mutations/mutations.ts (0 hunks)
- src/GraphQl/Queries/PlugInQueries.ts (2 hunks)
- src/components/UserPortal/ChatRoom/ChatRoom.tsx (5 hunks)
- src/components/UserPortal/ContactCard/ContactCard.module.css (2 hunks)
- src/components/UserPortal/ContactCard/ContactCard.test.tsx (1 hunks)
- src/components/UserPortal/ContactCard/ContactCard.tsx (3 hunks)
- src/components/UserPortal/CreateDirectChat/CreateDirectChat.test.tsx (18 hunks)
- src/components/UserPortal/CreateDirectChat/CreateDirectChat.tsx (3 hunks)
- src/components/UserPortal/CreateGroupChat/CreateGroupChat.test.tsx (17 hunks)
- src/components/UserPortal/CreateGroupChat/CreateGroupChat.tsx (3 hunks)
- src/screens/UserPortal/Chat/Chat.test.tsx (20 hunks)
- src/screens/UserPortal/Chat/Chat.tsx (9 hunks)
💤 Files with no reviewable changes (1)
- src/GraphQl/Mutations/mutations.ts
🧰 Additional context used
🪛 Biome
src/screens/UserPortal/Chat/Chat.tsx
[error] 170-170: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
🔇 Additional comments (24)
src/components/UserPortal/ContactCard/ContactCard.module.css (1)
23-25: LGTM! Layout changes improve element spacing.The updated layout properties create a better structure for displaying contact name and unseen message count.
src/components/UserPortal/ContactCard/ContactCard.test.tsx (1)
35-36: Verify prop types in test setup.The
unseenMessagesprop is initialized with a number, but it's recommended to verify if this matches the type definition in the component interface.✅ Verification successful
Props match the component's type definition.
From the search results, we can see in
src/components/UserPortal/ContactCard/ContactCard.tsxthatunseenMessagesis indeed defined as a number in the component's interface:unseenMessages: number;This matches the test setup where it's initialized with a numeric value of 2. The prop type is correctly used in the test.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Search for the ContactCard interface/type definition ast-grep --pattern 'interface $interface { $$$ unseenMessages$_ $$$ }'Length of output: 78
Script:
#!/bin/bash # Let's try a different pattern to find type definitions for ContactCard ast-grep --pattern 'type ContactCard = { $$$ unseenMessages$_ $$$ }' # Also search for prop type definitions ast-grep --pattern 'type ContactCardProps = { $$$ unseenMessages$_ $$$ }' # Let's also try to find any interface or type containing unseenMessages rg "unseenMessages.*:" -A 1 -B 1Length of output: 26924
src/GraphQl/Queries/PlugInQueries.ts (1)
151-151: LGTM! The changes align with the feature requirements.The addition of
unseenMessagesByUsersto both queries is consistent and supports the PR objective of enabling users to view unread messages. The field placement is logical within the chat data structure.Also applies to: 191-191
src/GraphQl/Mutations/OrganizationMutations.ts (1)
Line range hint
39-63: Good architectural decision to consolidate chat creation mutations.The replacement of separate
CREATE_GROUP_CHATandCREATE_DIRECT_CHATmutations with a singleCREATE_CHATmutation using anisGroupflag is a clean architectural improvement that reduces code duplication.src/components/UserPortal/CreateDirectChat/CreateDirectChat.tsx (3)
28-31: LGTM! Improved type safety.Good improvement in type safety:
- Using
stringinstead ofanyfor the id parameter- Using
unknowninstead ofanyfor the return type follows TypeScript best practices
Line range hint
1-207: Verify relationship to unread messages functionality.While this component handles direct chat creation, it doesn't directly implement the PR's main objectives of viewing unread messages or marking messages as read. Could you clarify how this component fits into the larger feature implementation?
#!/bin/bash # Description: Look for related changes implementing unread messages functionality # Test 1: Search for unread message related code echo "Checking for unread message related code:" rg -i "unread|unseen|mark.*read" --type ts --type tsx # Test 2: Search for related GraphQL operations echo "Checking for related GraphQL operations:" rg -i "mutation.*mark.*read|query.*(unread|unseen)" --type graphql
8-8: Verify the CREATE_CHAT mutation structure.The switch from CREATE_DIRECT_CHAT to CREATE_CHAT suggests a consolidated mutation. Let's verify that the mutation structure matches the component's usage.
✅ Verification successful
The CREATE_CHAT mutation is correctly structured for both direct and group chats
The verification shows that the CREATE_CHAT mutation in
OrganizationMutations.tsis properly consolidated to handle both direct and group chats through theisGroupparameter. The mutation structure matches the component's usage as evidenced by:
- The mutation accepts required parameters:
userIds,isGroup- Optional parameters:
organizationId,name(for group chats)- Test files confirm correct usage for both direct chats (
isGroup: false) and group chats (isGroup: true)🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the CREATE_CHAT mutation structure and its usage # Test 1: Check the mutation definition echo "Checking CREATE_CHAT mutation definition:" ast-grep --pattern 'const CREATE_CHAT = gql` mutation $_($$$) { $$$ } `' # Test 2: Check for any other usages of CREATE_CHAT echo "Checking other CREATE_CHAT usages:" rg "CREATE_CHAT" -A 5Length of output: 368
Script:
#!/bin/bash # Let's try a different approach to verify the mutation structure and usage # Check for GraphQL mutation files echo "Checking for GraphQL mutation files:" fd -e ts -e tsx -e graphql "Mutations" # Search for CREATE_CHAT or CREATE_DIRECT_CHAT in the codebase echo -e "\nSearching for CREATE_CHAT and CREATE_DIRECT_CHAT:" rg -l "CREATE_CHAT|CREATE_DIRECT_CHAT" # If we find the files, let's look at their content echo -e "\nChecking content of files containing mutations:" rg "const CREATE_CHAT|const CREATE_DIRECT_CHAT" -A 10Length of output: 3907
src/components/UserPortal/CreateGroupChat/CreateGroupChat.tsx (3)
39-39: LGTM! Good type safety improvement.Changing from
anytounknownis a good practice as it provides better type safety by requiring explicit type checking.
370-370: LGTM! Good internationalization improvements.The button text has been properly internationalized using the translation hook.
Also applies to: 388-388
Line range hint
1-391: Verify alignment with PR objectives.This component appears to be unrelated to the PR objectives of "viewing unread messages and marking messages as read". Please clarify how this component contributes to those objectives or if it should be part of a different PR.
Let's verify the relationship between this component and the PR objectives:
schema.graphql (1)
766-766: LGTM! Improved message sending with reply support.The mutation signature has been simplified by removing the redundant 'type' parameter while adding support for message replies through the optional 'replyTo' parameter.
public/locales/zh/translation.json (2)
1162-1169: LGTM! Chat action translations are appropriate.The Chinese translations for chat actions are contextually accurate and properly localized:
- "添加" (add) - correct translation for adding contacts/chats
- "创造" (create) - appropriate for creating new chats
- "新聊天" (new chat) - clear and natural translation
- "新群聊" (new group chat) - properly distinguishes group chat
1173-1174: LGTM! Message action translations are accurate.The Chinese translations for message actions are clear and natural:
- "发信息" (send message) - commonly used phrase
- "回复" (reply) - correct translation for replying to messages
public/locales/en/translation.json (2)
1162-1169: LGTM: Chat creation translations added.The new translations support chat creation functionality with clear, concise labels for creating both individual and group chats.
1173-1174: LGTM: Reply functionality translation added.The addition of the "reply" translation supports the new reply feature in chat rooms.
public/locales/hi/translation.json (2)
1162-1169: LGTM! The Hindi translations for chat actions are accurate and natural.The translations maintain proper semantic meaning while being culturally appropriate and easily understandable by Hindi speakers.
1173-1174: LGTM! The Hindi translations for chat room actions are well-translated.The translations are concise and accurately convey the meaning of the English terms.
public/locales/fr/translation.json (2)
1162-1169: LGTM! The French translations for chat actions are accurate.The translations maintain consistency with French language conventions and accurately convey the meaning of the chat-related actions.
1173-1174: LGTM! The French translations for message actions are accurate.The translations "Envoyer le message" and "répondre" are grammatically correct and effectively convey the intended actions.
public/locales/sp/translation.json (2)
1163-1170: LGTM! Chat action translations are accurate.The Spanish translations for chat actions and UI elements are linguistically correct and maintain consistency with the English version.
1174-1175: LGTM! Message action translations are accurate.The Spanish translations for message actions are linguistically correct and maintain consistency with the English version.
src/screens/UserPortal/Chat/Chat.test.tsx (1)
Line range hint
2633-2672: LGTM: Well-structured test utilitiesThe test utilities are well-implemented with:
- Proper async wait helper
- Comprehensive window.matchMedia mock
- Mocked scrollIntoView behavior
src/components/UserPortal/CreateGroupChat/CreateGroupChat.test.tsx (2)
1340-1343: LGTM: Consistent mock data structure for unread messages tracking.The unseenMessagesByUsers field is well-structured and consistently implemented across all mock responses, properly representing the unread message counts per user.
Also applies to: 1404-1407, 1468-1471, 1560-1566, 1639-1645, 1732-1738, 1811-1817, 1983-1989, 2076-2082, 2155-2161, 2248-2254, 2327-2333, 2420-2426, 2499-2505, 2594-2600, 2691-2697, 2785-2791
2798-2875: Verify the empty chatId in MARK_CHAT_MESSAGES_AS_READ mock.While the mutation mock is well-structured, using an empty string for chatId in the test cases might not accurately represent real-world scenarios and could mask potential issues.
Consider using valid chat IDs from the mock data:
- chatId: '', + chatId: '65844efc814dd4003db811c4',
| .unseenMessagesCount { | ||
| border-radius: 50%; | ||
| } |
There was a problem hiding this comment.
Add essential styles for the notification badge.
The current styling only makes the badge circular but lacks other necessary properties for a proper notification indicator.
.unseenMessagesCount {
border-radius: 50%;
+ background-color: #ff4444; /* or your theme's notification color */
+ color: white;
+ min-width: 20px;
+ min-height: 20px;
+ padding: 2px 6px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 12px;
+ font-weight: bold;
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| .unseenMessagesCount { | |
| border-radius: 50%; | |
| } | |
| .unseenMessagesCount { | |
| border-radius: 50%; | |
| background-color: #ff4444; /* or your theme's notification color */ | |
| color: white; | |
| min-width: 20px; | |
| min-height: 20px; | |
| padding: 2px 6px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 12px; | |
| font-weight: bold; | |
| } |
| .lastMessage { | ||
| margin-bottom: 0; | ||
| font-size: 14px; | ||
| color: rgba(163, 163, 163, 0.839); | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Consider adding text overflow handling for long messages.
The last message preview should gracefully handle long text to prevent layout issues.
.lastMessage {
margin-bottom: 0;
font-size: 14px;
color: rgba(163, 163, 163, 0.839);
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ max-width: 70%; /* Adjust based on design needs */
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| .lastMessage { | |
| margin-bottom: 0; | |
| font-size: 14px; | |
| color: rgba(163, 163, 163, 0.839); | |
| } | |
| .lastMessage { | |
| margin-bottom: 0; | |
| font-size: 14px; | |
| color: rgba(163, 163, 163, 0.839); | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| max-width: 70%; /* Adjust based on design needs */ | |
| } |
| <div> | ||
| <b>{props.title}</b>{' '} | ||
| <p className={styles.lastMessage}>{props.lastMessage}</p> | ||
| </div> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Enhance accessibility and user experience.
Consider the following improvements:
- Add ARIA labels for better screen reader support
- Add text truncation for long messages to maintain consistent layout
- <div>
+ <div role="text" aria-label={`Contact: ${props.title}`}>
<b>{props.title}</b>{' '}
- <p className={styles.lastMessage}>{props.lastMessage}</p>
+ <p className={`${styles.lastMessage} text-truncate`} title={props.lastMessage}>
+ {props.lastMessage}
+ </p>
</div>Don't forget to add the corresponding CSS:
.lastMessage {
max-width: 200px; /* adjust based on your layout */
margin-bottom: 0;
}| unseenMessages: number; | ||
| lastMessage: any; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Consider adding proper typing for lastMessage.
Using any type reduces type safety. Consider creating a proper interface for the message structure:
- lastMessage: any;
+ lastMessage?: {
+ content: string;
+ timestamp?: Date;
+ // Add other relevant fields
+ };Committable suggestion was skipped due to low confidence.
| {!!props.unseenMessages && ( | ||
| <Badge className={styles.unseenMessagesCount}> | ||
| {props.unseenMessages} | ||
| </Badge> | ||
| )} |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Improve badge accessibility and code clarity.
The badge should be more accessible to screen readers and the boolean check could be more explicit.
- {!!props.unseenMessages && (
+ {props.unseenMessages > 0 && (
<Badge
+ aria-label={`${props.unseenMessages} unread messages`}
+ role="status"
className={styles.unseenMessagesCount}>
{props.unseenMessages}
</Badge>
)}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| {!!props.unseenMessages && ( | |
| <Badge className={styles.unseenMessagesCount}> | |
| {props.unseenMessages} | |
| </Badge> | |
| )} | |
| {props.unseenMessages > 0 && ( | |
| <Badge | |
| aria-label={`${props.unseenMessages} unread messages`} | |
| role="status" | |
| className={styles.unseenMessagesCount}> | |
| {props.unseenMessages} | |
| </Badge> | |
| )} |
src/screens/UserPortal/Chat/Chat.tsx
Outdated
| chat.messages[chat.messages.length - 1] | ||
| ?.messageContent, |
There was a problem hiding this comment.
Handle empty messages array to prevent errors
Accessing the last message without checking if the messages array is empty can lead to undefined values.
Apply this diff to safely access the last message:
- lastMessage:
- chat.messages[chat.messages.length - 1]
- ?.messageContent,
+ lastMessage:
+ chat.messages && chat.messages.length > 0
+ ? chat.messages[chat.messages.length - 1]?.messageContent
+ : '',📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| chat.messages[chat.messages.length - 1] | |
| ?.messageContent, | |
| chat.messages && chat.messages.length > 0 | |
| ? chat.messages[chat.messages.length - 1]?.messageContent | |
| : '', |
src/screens/UserPortal/Chat/Chat.tsx
Outdated
| React.useEffect(() => { | ||
| if (chatsListData) { | ||
| if (chatsListData && chatsListData?.chatsByUserId.length) { |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Simplify condition using optional chaining
You can simplify the condition by relying on optional chaining, making the code cleaner and more concise.
Apply this diff:
- if (chatsListData && chatsListData?.chatsByUserId.length) {
+ if (chatsListData?.chatsByUserId?.length) {📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| if (chatsListData && chatsListData?.chatsByUserId.length) { | |
| if (chatsListData?.chatsByUserId?.length) { |
🧰 Tools
🪛 Biome
[error] 170-170: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
src/screens/UserPortal/Chat/Chat.tsx
Outdated
| useEffect(() => { | ||
| markChatMessagesAsRead().then(() => { | ||
| chatsListRefetch({ id: userId }); | ||
| }); | ||
| }, [selectedContact]); |
There was a problem hiding this comment.
Add error handling for markChatMessagesAsRead mutation
In the useEffect hook, the markChatMessagesAsRead() mutation is called without error handling. If the mutation fails, it could result in unhandled promise rejections and the UI may not reflect the failure.
Apply this diff to handle errors:
useEffect(() => {
- markChatMessagesAsRead().then(() => {
- chatsListRefetch({ id: userId });
- });
+ markChatMessagesAsRead()
+ .then(() => {
+ chatsListRefetch({ id: userId });
+ })
+ .catch((error) => {
+ console.error('Error marking messages as read:', error);
+ // Optionally, display an error notification to the user
+ });
}, [selectedContact]);📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| useEffect(() => { | |
| markChatMessagesAsRead().then(() => { | |
| chatsListRefetch({ id: userId }); | |
| }); | |
| }, [selectedContact]); | |
| useEffect(() => { | |
| markChatMessagesAsRead() | |
| .then(() => { | |
| chatsListRefetch({ id: userId }); | |
| }) | |
| .catch((error) => { | |
| console.error('Error marking messages as read:', error); | |
| // Optionally, display an error notification to the user | |
| }); | |
| }, [selectedContact]); |
src/screens/UserPortal/Chat/Chat.tsx
Outdated
| const [markChatMessagesAsRead] = useMutation(MARK_CHAT_MESSAGES_AS_READ, { | ||
| variables: { | ||
| chatId: selectedContact, | ||
| userId: userId, | ||
| }, | ||
| }); |
There was a problem hiding this comment.
Pass variables during mutation execution to prevent stale data
Passing variables in the useMutation hook options can cause stale data issues if selectedContact or userId changes. It's better to pass variables when calling the mutation to ensure they are up-to-date.
Apply this diff to pass variables during mutation execution:
- const [markChatMessagesAsRead] = useMutation(MARK_CHAT_MESSAGES_AS_READ, {
- variables: {
- chatId: selectedContact,
- userId: userId,
- },
- });
+ const [markChatMessagesAsRead] = useMutation(MARK_CHAT_MESSAGES_AS_READ);Then, update the call in the useEffect hook:
useEffect(() => {
- markChatMessagesAsRead().then(() => {
+ markChatMessagesAsRead({
+ variables: {
+ chatId: selectedContact,
+ userId: userId,
+ },
+ })
+ .then(() => {
chatsListRefetch({ id: userId });
})
+ .catch((error) => {
+ console.error('Error marking messages as read:', error);
+ // Optionally, display an error notification to the user
+ });
}, [selectedContact]);Committable suggestion was skipped due to low confidence.
src/screens/UserPortal/Chat/Chat.tsx
Outdated
| unseenMessages: JSON.parse(chat.unseenMessagesByUsers)[ | ||
| userId | ||
| ], |
There was a problem hiding this comment.
Ensure safe parsing of JSON data
Using JSON.parse without error handling can lead to runtime exceptions if the data is invalid. It's safer to add error handling when parsing JSON.
Apply this diff to add error handling:
- unseenMessages: JSON.parse(chat.unseenMessagesByUsers)[
- userId
- ],
+ let unseenMessages = 0;
+ try {
+ const unseenMessagesData = JSON.parse(chat.unseenMessagesByUsers);
+ unseenMessages = unseenMessagesData[userId] || 0;
+ } catch (error) {
+ console.error('Failed to parse unseenMessagesByUsers:', error);
+ }
+ // Pass unseenMessages to cardPropsAlternatively, ensure that chat.unseenMessagesByUsers is parsed before being passed to this component.
Committable suggestion was skipped due to low confidence.
|
This pull request did not get any activity in the past 10 days and will be closed in 180 days if no update occurs. Please verify it has no conflicts with the develop branch and rebase if needed. Mention it now if you need help or give permission to other people to finish your work. |
|
Please:
|
Bumps [sass](https://github.com/sass/dart-sass) from 1.80.6 to 1.80.7. - [Release notes](https://github.com/sass/dart-sass/releases) - [Changelog](https://github.com/sass/dart-sass/blob/main/CHANGELOG.md) - [Commits](sass/dart-sass@1.80.6...1.80.7) --- updated-dependencies: - dependency-name: sass dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
…oesFoundation#2434) Bumps [eslint-plugin-import](https://github.com/import-js/eslint-plugin-import) from 2.30.0 to 2.31.0. - [Release notes](https://github.com/import-js/eslint-plugin-import/releases) - [Changelog](https://github.com/import-js/eslint-plugin-import/blob/main/CHANGELOG.md) - [Commits](import-js/eslint-plugin-import@v2.30.0...v2.31.0) --- updated-dependencies: - dependency-name: eslint-plugin-import dependency-type: direct:development 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>
…dation#2435) Bumps [@mui/x-charts](https://github.com/mui/mui-x/tree/HEAD/packages/x-charts) from 7.22.1 to 7.22.2. - [Release notes](https://github.com/mui/mui-x/releases) - [Changelog](https://github.com/mui/mui-x/blob/v7.22.2/CHANGELOG.md) - [Commits](https://github.com/mui/mui-x/commits/v7.22.2/packages/x-charts) --- updated-dependencies: - dependency-name: "@mui/x-charts" dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
…dation#2436) Bumps [@types/react](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/react) from 18.3.3 to 18.3.12. - [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases) - [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/react) --- updated-dependencies: - dependency-name: "@types/react" dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
|
This pull request did not get any activity in the past 10 days and will be closed in 180 days if no update occurs. Please verify it has no conflicts with the develop branch and rebase if needed. Mention it now if you need help or give permission to other people to finish your work. |
* added docker check to workflow * made recommended changes to docker check in workflow * added changes to docker check inn workflow as recommended * added changes * updated indentation in pull-request.yml file * updated indentation in pull-request.yml file * added Dockerfile and Docker-compose.yml file * added Dockerfile and Docker-compose.yml file * updated .docker-ignore file * added recommended changes by code rabbit * added recommended changes by code rabbit * added recommended changes by code rabbit * added recommended changes by code rabbit * added recommended changes by code rabbit * added recommended changes by code rabbit * properly formatted code * trying to make docker check pass * trying to make docker check pass * updated INSTALLATION.md * updated INSTALLATION.md * added recommended changes to INSTALLATION.md * added recommended changes to INSTALLATION.md * added recommended changes to INSTALLATION.md * updated docker workflow * updated INSTALLATION.md
|
@disha1202 Any update on this one ? |
* Updated pr template with checklist * Additional changes for the PR template * Changed the url for the PR template
|
@disha1202 We have made significant changes to the Can you close this and merge against that branch? |
|
@disha1202 I rebased your PR against the |
* Update pull-request.yml * update the @mui/x-date-pickers (#2439) * chore(deps): bump sass from 1.80.6 to 1.80.7 (#2433) Bumps [sass](https://github.com/sass/dart-sass) from 1.80.6 to 1.80.7. - [Release notes](https://github.com/sass/dart-sass/releases) - [Changelog](https://github.com/sass/dart-sass/blob/main/CHANGELOG.md) - [Commits](https://github.com/sass/dart-sass/compare/1.80.6...1.80.7) --- updated-dependencies: - dependency-name: sass dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps): bump eslint-plugin-import from 2.30.0 to 2.31.0 (#2434) Bumps [eslint-plugin-import](https://github.com/import-js/eslint-plugin-import) from 2.30.0 to 2.31.0. - [Release notes](https://github.com/import-js/eslint-plugin-import/releases) - [Changelog](https://github.com/import-js/eslint-plugin-import/blob/main/CHANGELOG.md) - [Commits](https://github.com/import-js/eslint-plugin-import/compare/v2.30.0...v2.31.0) --- updated-dependencies: - dependency-name: eslint-plugin-import dependency-type: direct:development 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> * chore(deps): bump @mui/x-charts from 7.22.1 to 7.22.2 (#2435) Bumps [@mui/x-charts](https://github.com/mui/mui-x/tree/HEAD/packages/x-charts) from 7.22.1 to 7.22.2. - [Release notes](https://github.com/mui/mui-x/releases) - [Changelog](https://github.com/mui/mui-x/blob/v7.22.2/CHANGELOG.md) - [Commits](https://github.com/mui/mui-x/commits/v7.22.2/packages/x-charts) --- updated-dependencies: - dependency-name: "@mui/x-charts" dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps): bump @types/react from 18.3.3 to 18.3.12 (#2436) Bumps [@types/react](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/react) from 18.3.3 to 18.3.12. - [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases) - [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/react) --- updated-dependencies: - dependency-name: "@types/react" dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Update pull-request.yml * update the @mui/x-date-pickers --------- Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Peter Harrison <[email protected]> * Update dependabot.yaml * chore(deps): bump @pdfme/generator from 5.1.7 to 5.2.3 (#2440) Bumps [@pdfme/generator](https://github.com/pdfme/pdfme) from 5.1.7 to 5.2.3. - [Release notes](https://github.com/pdfme/pdfme/releases) - [Changelog](https://github.com/pdfme/pdfme/blob/main/RELEASE.md) - [Commits](https://github.com/pdfme/pdfme/compare/5.1.7...5.2.3) --- updated-dependencies: - dependency-name: "@pdfme/generator" 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> * chore(deps): bump @types/node from 22.5.4 to 22.9.0 (#2441) Bumps [@types/node](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/node) from 22.5.4 to 22.9.0. - [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases) - [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/node) --- updated-dependencies: - dependency-name: "@types/node" dependency-type: direct:development 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> * chore(deps): bump @babel/preset-env from 7.25.4 to 7.26.0 (#2443) Bumps [@babel/preset-env](https://github.com/babel/babel/tree/HEAD/packages/babel-preset-env) from 7.25.4 to 7.26.0. - [Release notes](https://github.com/babel/babel/releases) - [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md) - [Commits](https://github.com/babel/babel/commits/v7.26.0/packages/babel-preset-env) --- updated-dependencies: - dependency-name: "@babel/preset-env" dependency-type: direct:development 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> * chore(deps): bump @vitejs/plugin-react from 4.3.2 to 4.3.3 (#2442) Bumps [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/tree/HEAD/packages/plugin-react) from 4.3.2 to 4.3.3. - [Release notes](https://github.com/vitejs/vite-plugin-react/releases) - [Changelog](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/CHANGELOG.md) - [Commits](https://github.com/vitejs/vite-plugin-react/commits/v4.3.3/packages/plugin-react) --- updated-dependencies: - dependency-name: "@vitejs/plugin-react" dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Docker 1 (#2445) * added docker check to workflow * made recommended changes to docker check in workflow * added changes to docker check inn workflow as recommended * added changes * updated indentation in pull-request.yml file * updated indentation in pull-request.yml file * added Dockerfile and Docker-compose.yml file * added Dockerfile and Docker-compose.yml file * updated .docker-ignore file * added recommended changes by code rabbit * added recommended changes by code rabbit * added recommended changes by code rabbit * added recommended changes by code rabbit * added recommended changes by code rabbit * added recommended changes by code rabbit * properly formatted code * chore(deps): bump sass from 1.80.6 to 1.80.7 (#2433) Bumps [sass](https://github.com/sass/dart-sass) from 1.80.6 to 1.80.7. - [Release notes](https://github.com/sass/dart-sass/releases) - [Changelog](https://github.com/sass/dart-sass/blob/main/CHANGELOG.md) - [Commits](https://github.com/sass/dart-sass/compare/1.80.6...1.80.7) --- updated-dependencies: - dependency-name: sass dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps): bump eslint-plugin-import from 2.30.0 to 2.31.0 (#2434) Bumps [eslint-plugin-import](https://github.com/import-js/eslint-plugin-import) from 2.30.0 to 2.31.0. - [Release notes](https://github.com/import-js/eslint-plugin-import/releases) - [Changelog](https://github.com/import-js/eslint-plugin-import/blob/main/CHANGELOG.md) - [Commits](https://github.com/import-js/eslint-plugin-import/compare/v2.30.0...v2.31.0) --- updated-dependencies: - dependency-name: eslint-plugin-import dependency-type: direct:development 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> * chore(deps): bump @mui/x-charts from 7.22.1 to 7.22.2 (#2435) Bumps [@mui/x-charts](https://github.com/mui/mui-x/tree/HEAD/packages/x-charts) from 7.22.1 to 7.22.2. - [Release notes](https://github.com/mui/mui-x/releases) - [Changelog](https://github.com/mui/mui-x/blob/v7.22.2/CHANGELOG.md) - [Commits](https://github.com/mui/mui-x/commits/v7.22.2/packages/x-charts) --- updated-dependencies: - dependency-name: "@mui/x-charts" dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps): bump @types/react from 18.3.3 to 18.3.12 (#2436) Bumps [@types/react](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/react) from 18.3.3 to 18.3.12. - [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases) - [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/react) --- updated-dependencies: - dependency-name: "@types/react" dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Update pull-request.yml * trying to make docker check pass * trying to make docker check pass * updated INSTALLATION.md * updated INSTALLATION.md * added recommended changes to INSTALLATION.md * added recommended changes to INSTALLATION.md * added recommended changes to INSTALLATION.md * Update dependabot.yaml * updated docker workflow * updated INSTALLATION.md --------- Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Peter Harrison <[email protected]> * ADMIN: Updated all GitHub Actions to the latest versions in the `develop-postres` branch (#2449) * updated pr template for develop-postgress branch (#2458) * Added GitHub PR Workflow Check: Talawa Admin app starts (No Docker) (#2452) * Updated branching strategy * Removed duplicate entry * Updated contributing.md * Added extra markdown styling to contribute.md * Bump dns-packet from 1.3.1 to 1.3.4 Bumps [dns-packet](https://github.com/mafintosh/dns-packet) from 1.3.1 to 1.3.4. - [Release notes](https://github.com/mafintosh/dns-packet/releases) - [Changelog](https://github.com/mafintosh/dns-packet/blob/master/CHANGELOG.md) - [Commits](https://github.com/mafintosh/dns-packet/compare/v1.3.1...v1.3.4) Signed-off-by: dependabot[bot] <[email protected]> * Update pull_request_template.md * disabled CodeQL cron jobs and push actions (#72) * Merge Develop into Main (#1099) * Update authorized-changes-detection.yml * Code Coverage @ 87.1% * Update .gitignore * Delete codecov This executable should not be in the repo * added translation hint text in placeholders (#487) * Update pull-requests.yml * Create DOCUMENTATION.md * Rename issue-guidelines.md to ISSUE_GUIDELINES.md * Update CONTRIBUTING.md * Update issue.yml * Rename PR-guidelines.md to PR_GUIDELINES.md * Update CONTRIBUTING.md * Update pull-request-target.yml * Delete PULL_REQUEST_TEMPLATE.md * Delete ISSUE_TEMPLATE.md * Rename Code_Style.md to CODE_STYLE.md * added removeMember mutation (#491) * added removeMember mutation * changed mutation name * remove contributions from router (#502) * Fixed Settings page Header (#501) * fixed cani-use lite warning * fixed the alignments for smaller screens and also added spacing on places where it was needed * fixed the linting errors * ran prettier to remove styling errors * made the orgSetting title dynamic * linted the code and made the settings header as required and also made the settings page navbar responsive * linted code and made necessary changes * errors fixed * Added dropdown for Applanguage in UserUpdation form (#498) * Added dropdown for Applanguage in UserUpdation form * App language code changed to Default language * Change the Scalar Types [Provides relevant client side changes for #1085 in Talawa-API] (#500) * Change typedefs * Fix date parsing * Move ID to ObjectID scalar * Client changes for Adding GraphQL Scalars (#511) * Change typedefs * Fix date parsing * Move ID to ObjectID scalar * Revert ObjectID to ID * Change ObjectID to ID * modal closed after organization creation (#516) * most recently added Org displays at the top (#515) * Add Husky (#520) * updated contributing (#521) * Display and choose Organisation image (#512) * upload image working for createOrganisation * Organisation image showing everywhere * Testcase failure fixed * Linting fixed * convertToBase64 func made and tests for it * CI/CD error fixed * tests added for AdminNavbar & OrganisationDashboard * Linting fixed * fixed translation on the plugin tab (#510) * added OrgName to the Navbar (#525) * Fix create event mutation [Fixes part of #1101 in Talawa-API] (#523) * Add format fix * Fix updation of posts * Test coverage improved for organizationPeople.tsx (#526) * Update INSTALLATION.md * Update INSTALLATION.md * Update INSTALLATION.md * Update stale.yml * Remove tags (#532) * Fixed navbar added tests (#534) * Fixed navbar added tests * Fixed the translation of All orgnaizations btn in AdminNavbar * Fix the updateOrg page, and made it to create mutation request [Fixes #531] (#536) * fix orgUpdate system * fix translations * Update CONTRIBUTING.md * Code Coverage @ 88% * Fixes #478 : Implemeneted calendar to the Event tab (#537) * calendar-implemented * calendar-implemented * fixed tests * Added post-merge hook using husky (#541) * Added post-merge hook using husky * made required changes to installation.md * make changes to documentation for husky * made the required changes in installation guide * Update pull-requests.yml * Fixed yarn installation instructions (#584) * organization sorting for all organization (#619) * removed redundant notification (#577) * Profile Page for Members (#543) * Initial member page made * Changed query added Org and Events section * Homescreen ready * initial translation added for Profile * initial translation added for Profile * Added translations * Added translations * Revised translation * Fixed failing tests for components * Link added to OrgAdminListCard * Linting fixed for OrgPeopleListCard * Added tests, removed logs * Uniform design * Fix:routing issue for orgdash page (#580) * Fix:routing issue for orgdash page * fix:failing test of SuperDashListCard * Rectify Warnings: EventListCard.test.tsx (#595) * Added logic to close modal after successful submission (#623) * Feature Request: Position of the search bar. (#631) * Feature Request: Position of the search bar #614 resolved * Feature Request: Position of the search bar #614 resolved * fixes: #550 added test for the calendar (#552) * added test for the calendar * updates mocks * Update Router Function [Fixes #636] (#638) * Update Router Function * Empty commit * Fix about content overflow (#632) Signed-off-by: Ekene Nwobodo <[email protected]> * removed duplicate rows per page section in orgposts (#648) * fixed :made card in organization dashboard interactive (#620) * Implemented manage functionality for admin and super admin after login (#539) * Implememnted manage functinality for admin/superadmin after login * Update AdminDashListCard.module.css * Some formatting issues with module file * resolved workflow issues * Added folding feature to posts (#581) * added folding feature to posts * added fold feature to posts * brought code under code coverage * added tests * added tests for remainging uncovered lines * brought code coverage to 100% for the changes * Code coverage @87.2% * Fix User Update Details Page and Add Update Password Page [Fixes #530] (#657) * fixed updateuser logic * update translations * fix lint * lint fix 2 * fix tests * fixed:move orgLocation & remove duplicate orgName (#655) * fixed:move orgLocation & remove duplicate orgName * Dummy commit * fixes - [#597] - Navbar navlinks hover and button styles (#603) * fixed: #585 - Password error showing. Tested * fix: #590 - fixed navbar hover issues * fix: #590 - fixed navbar hover issues * Code Coverage 87.4% * fixes 599 (#653) * fixed errors and removed window.replace * written test case for ensure window.location.replace * written test case for ensure window.location.replace * added useHistory to keep track of routing behind the scenes * fixed merge conflicts and errors * updated comments for file changes * Added warning comments for routing --------- Co-authored-by: Adepeju <adepeju.kayode@gmail> * fix org search location (#682) Signed-off-by: Ekene Nwobodo <[email protected]> * fixed the issue of validate the input before submit #674 (#678) * Adds required tests for OrganizationEvents.tsx and Fixes a minor bug in Calendar (#527) * adds tests for organization events * removes the unrequired branch from OrganizationEvents.tsx * fixes failing tests * fixes failing lint tests * Update password preview feature with coverage tests (#629) * Fix to the issue #585 (#607) * [fix]- fixed the password error warning * [fix]- fixed the password error warning * [fix]- fixed the password error warning * [fix]-fixed the password error warning * [fix]-fixed the password error warning * [fix]-fixed the password error warning * [fix]-fixed the password error warning * [feat]-added test cases for password error warning * [feat]- added test cases for password error warning * [feat]- added test cases for password error warning * [fix]- fixed the linting * Improve test coverage for calendar.tsx (#679) * Improve test coverage for calendar.tsx * Restore previous tests * remove --coverage * i rebased my codebase and resolved the initial issue (#669) * fixed the issue use of toast in place of window.alert #645 (#687) * Update ISSUE_GUIDELINES.md * fixed the static time data under Organization card in the Organization List tab (#689) * fixed the static time in org card * formatted the date to MM D, YYYY --------- Co-authored-by: thesaaddevloper <[email protected]> * Fixed the pagination alignment issue (#702) * [fix]- fixed the password error warning * [fix]- fixed the password error warning * [fix]- fixed the password error warning * [fix]-fixed the password error warning * [fix]-fixed the password error warning * [fix]-fixed the password error warning * [fix]-fixed the password error warning * [feat]-added test cases for password error warning * [feat]- added test cases for password error warning * [feat]- added test cases for password error warning * [fix]- fixed the linting * [fix]- fixed the pagination alignment issue * [fix]- fixed the pagination alignment issue * [fix]- fixed the pagination alignment issue * Removed overlapping (#675) * changes input element to textarea and changes in test (#710) * Code Coverage @90.7% * Indicating active tabs (#691) * added underline to active links in navbar * fixed lint error * fixed the org default image #688 and removed stock image (#695) * fixed the org default image #688 and removed stock image * removed eslint warning * added new img as default org img * Update INSTALLATION.md * Added Clear Error and Warn Messages when API is unavailable (#670) * Added error and warn messages * Added tests & fixed inconsistency in mocks * Lint fix LoginPage * Lint Fix LoginPage.test * minor fix * Minor update to LoginPage * Minor change to LoginPage.test * Replaced toast.warn() with toast.error() * Fixed test accordingly * Lint Fix * Minor fix * Extra edge case handled * code coverage fix * Lint fix * Update LoginPage * Update LoginPage.test * Lint fix * improve test coverage for orgpost.tsx (#718) * Improve test coverage for calendar.tsx * Restore previous tests * remove --coverage * improve test for orgpost.tsx * Implemented Proper Error Handling for all Screens [Fixes: #535] (#731) * Handled error cases for all screens * Some more fixes * Some more fixes * Added StaticMockLink to use Mocks multiple times [Fixes Multiple Issues] (#745) * add StaticMockLink * lint fix * remove showWarning * Added prompt to Register on Login Page (#628) * Add prompt to Login page - Add prompt in other languages: fr, sp, hi, zh. - switch styling of Login Button with Reg Button * format with prettier * fixed event checkboxes to update (#707) * Block/Unblock functionality for only members of the organization (#690) * Implememnted manage functinality for admin/superadmin after login * Update AdminDashListCard.module.css * Some formatting issues with module file * resolved workflow issues * Updated block/unblock page preventing users who are not members of organiztion * Update BlockUser.test.tsx to resolve failing tests Modified the mocks fields according to the corresponding changes in BlockUser.tsx file. * created a reusable postNotFound Component with responsive UI (#717) * created a reusable postNotFound Component with responsive UI * run test error solved * added translation to the component and also created the test.tsx for the error component * fixed the failing test and added the postNotFound reusable component for OrgList --------- Co-authored-by: thesaaddevloper <[email protected]> * fix: #601 modal responsive width (#621) * added dynamic title to OrgPeople section (#704) * added dynamic title to OrgPeople section * fixed code coverage * fixed code coverage * uncommented the mistakenly added code * Delete er * Updated session timeout notification toast with already existing one (#734) * Added a toast to notify users that session has expired and redirects to the login page * Updated toast notification on session timeout with already existing one * eliminated the use of magic numbers * minor error correction on the timeout minutes --------- Co-authored-by: TheoCathy <[email protected]> * Fixed the empty space in the OrgList (#751) * created a reusable postNotFound Component with responsive UI * run test error solved * added translation to the component and also created the test.tsx for the error component * fixed the failing test and added the postNotFound reusable component for OrgList * fixed the empty space in orgList * fixed the failing test * removed the unwanted files --------- Co-authored-by: thesaaddevloper <[email protected]> * align navbar items (#755) * align navbar items * replace More with a hamburger icon * replace More with a hamburger icon to fix workflow error * replace More with a hamburger icon to fix workflow error * Fixes: toggle password for registration (#758) * added toggle-password * updated * formatting * added icon for toggle password * Super Admin Dashboard Error When Organizations Absent (#754) * No Organization Warning on OrgList * Minor Fix * Fixed failing tests * Added Warning on Roles and Request Pages * Added Tests for OrgList * Testing Fixes * Added more tests * Added Tests for Roles and Request Pages * Code Coverage @ 91.0% * Add link to dashboard admin card (#760) * image upload made functional (#677) * image upload made functional * lint * fixed failing test * linting * re run test , remove yarn.lock changes * updateUser test cov * OrgPost * rerun tests * Empty commit * reverted last 2 commits changes * re run code cov * update userUpdate * rerun code cov again * revert last commit * Update PR_GUIDELINES.md * Implemented Search bar and the radio buttons in orgPost page that searches both title and text of post (#770) * created a reusable postNotFound Component with responsive UI * run test error solved * added translation to the component and also created the test.tsx for the error component * fixed the failing test and added the postNotFound reusable component for OrgList * fixed the empty space in orgList * fixed the failing test * removed the unwanted files * the one search bar which searches both text and title of post * testing file * orpost file testing * code coverage is increased * fixed the failing test --------- Co-authored-by: thesaaddevloper <[email protected]> Co-authored-by: saadabban76 <�[email protected]> * center org image on mobile (#778) Signed-off-by: Ekene Nwobodo <[email protected]> * removed link for plugin dropdown toggle (#781) * removed link for plugin dropdown toggle * added id * align superadmin nav items and fix failed tests (#766) * changed the handleSearchByName function in searchByName in Roles page (#735) * changed the handleSearchByName function to search using target's value instead of searchByName variable * updated the file Roles.tsx to take care of useState lag * changed tests for suiting searchByName * changed tests for searchByName including backspaces * added tests for paginationList and changing rowsPerPage * added tests to increase coverage in Roles.tsx * changed the package.json file's test command * removed extra scrollbars (#800) * Recently added Post displays at top (#773) * Recently added Post displays at top * reversed the posts as required in the query * Increased the OrgList Code Coverage (#786) * increased the orgList coverage to 95$ * increased the orgList Code Coverage * increased the orgList Code Coverage * increased the orgList Code Coverage * fixed image rendering in orgPost page * increased the code coverage for orgList Component * increased code coverage to 97% in orgList Component --------- Co-authored-by: saadabban76 <�[email protected]> * Modify event visibility for non-admins (#796) * Modify event visibility for non-admins Signed-off-by: Ekene Nwobodo <[email protected]> * Add test suites for events visibilty --------- Signed-off-by: Ekene Nwobodo <[email protected]> * Bug Fix: Drawer menu visibility (#794) * Remove filter by event field (#807) * increased the orgList coverage to 95$ * increased the orgList Code Coverage * increased the orgList Code Coverage * increased the orgList Code Coverage * fixed image rendering in orgPost page * increased the code coverage for orgList Component * increased code coverage to 97% in orgList Component * removed the filter by event section in orgPeople's component * fixed the failing test --------- Co-authored-by: saadabban76 <�[email protected]> * Add image to post (#804) * increased the orgList coverage to 95$ * increased the orgList Code Coverage * increased the orgList Code Coverage * increased the orgList Code Coverage * fixed image rendering in orgPost page * increased the code coverage for orgList Component * increased code coverage to 97% in orgList Component * added Image to the post's card * replaced external links with codebase default image * replaced external links with codebase default image * replaced blank image with the default image * fixed the failing test --------- Co-authored-by: saadabban76 <�[email protected]> * Update pull-request-target.yml * Update pull-request-target.yml * Update pull-request-target.yml * Update pull-request-target.yml * Update pull-request-target.yml * Update pull-request-target.yml * Upgrade Yarn to NPM in Talawa Admin Project (#802) * npm upgrade * remove package lock * Update push.yml * empty * upgrade yarn to npm * fix docs * fix scripts * empty * stop watch mode * fix ymls * empty * fix scripts * empty commit * update scripts * Redirect to dashboard on organization update (#816) * Redirect to dashboard on organization update * Minor Change * Proper Testing Of Pagination In All List Views (#797) * install faker package used for mocks in tests * Test init for pagination * install dependencies needed to implement certain tests * add a data-testid attribute to their markup for use in tests * add data-testid attributes to its markup being referenced from tests * add test to ensure the number of organization displayed on the page corresponds to the option selected from rowsPerPage * add prop to allow rendering of component in test environment * add data-testid attributes to their markup being referenced from tests * add data-testid attributes to its markup being referenced from tests * add test to affirm that the number of persons displayed on the webpage is same with the selected option from rowsPerPage * install dependencies for certain tests * fix lint errors * tests fix * remove unnecessary dependencies * lint fix * tests fix update * restore file to previous state * empty commit * tests fix update * lint fix * Conditional Usage of Google reCAPTCHA [Fixes #798] (#820) * conditonal recaptcha * Update INSTALLATION.md * add tests * fixed the issue of Mismatched passwords validation #722 (#824) * fixed the issue of Mismatched passwords validation #722 * fixed lint code error * Code Coverage @ 92% * Replace Talawa Portal with Talawa Admin Portal #817 (#821) * Update website title to Talawa Admin Portal in en * Update website title in fr json file * Update website title in sp json file * Update website title in zh json file * Update website title in hi json file * Update the test in ListNavbar file * Update the test in LoginPage.test file * Create a function for the tex macher to make test * Fix lint errors in the LandingPage test file * Remove console.log in LandingPage test file * Upgrade to use npm instead of yarn * Delete yarn.lock file * Fix lint errors * Fix lint errors * Update the heading in hi.json file * Remove unused codes * Fix lint error in LanfingPage file * Correct the talawa_portal value in Fr json file * Correct the talawa_portal value in sp json file * Remove anused package in package.json file * Organization Form Redirect Issue Prevents User Navigation, Affecting User Experience. Issue #808 (#815) * addressing issue #808 * finished - requested changes * addressing warning * Added: event preview modal to view event details (#772) * added event preview model * added event preview model * fixed formatting * added test * added test * added test * failing tests * test * tests * Update workflow (#832) * Workflow fix (#833) * Update pull-requests.yml * Update pull-requests.yml * Update pull-requests.yml * Code Coverage @ 91.0% * Feature: Separation of ADMIN and SUPERADMIN functionalities (#826) * Initial changes * Commit to sync repo * Made changes to OrgList * Some fixes * Minor fix * Added tests for OrgList * Added tests for OrgList * Coverage fix * Required changes added * Made changes to OrgList * Some fix * Some fixes * fixes test for OrgList * Some more fixes * Empty commit * Lint fix * Fixed test * Lint fix * Added Whitespace Validation to Organization and Post create forms (#838) * Added whitespace check in Org Create form * Added Tests * Added Empty String check to OrgPost Form * Added Tests for OrgPost * fixed the issue of Toast msg is not available in all languages #740 (#845) * fixed the issue of Toast msg is not available in all languages #740 * format issue * Empty-Commit * Fixed Org Update (#843) * Prevent Admins and Super Admins from downgrading their own roles (#840) * Code Cleanup * Disabled Super Admins from changing their roles * Added Tests * Added more tests * Improved Code Quality * Revert "Fixed Org Update (#843)" (#847) This reverts commit 53c3fef28ef986d63b1eec45663acb7d07cf1b8d. * Fixed Organization Update and Translation (#849) * Fixed Organization Update * Minor Changes * Success message updated * Fail tests on warning [Priority Needed] (#856) * fix warnings Signed-off-by: Ansh Goyal <[email protected]> * fix warnings Signed-off-by: Ansh Goyal <[email protected]> * fix warnings Signed-off-by: Ansh Goyal <[email protected]> * fix warnings Signed-off-by: Ansh Goyal <[email protected]> * fix warnings Signed-off-by: Ansh Goyal <[email protected]> * restore addonregister Signed-off-by: Ansh Goyal <[email protected]> --------- Signed-off-by: Ansh Goyal <[email protected]> * Code duplicacy removed (#852) * Code duplicacy removed * Tests added * Added comments * Fixed failing tests * Code formatted * Unused packages removed, flag icons package updated to latest version (#860) * Unused packages removed, flag icons updated to latest version * Empty commit * Changes in package-lock.json * Fixes #848: limiting mulitple toast (#851) * limiting-toast * added test * Organization People Filters Improved (#855) * Added Filters to Users and Organizations Query * Added Last Name Filter on User, Member and Admin * Added Translation * Fixed Failing Tests * Added Tests for Filters * Fixed Failing Tests * Code Cleanup * Fixed Tests * Added Translation * remove graphql-boost dep (#866) Signed-off-by: Ansh Goyal <[email protected]> * added UserNotFound component to the Roles page and improved the search (#865) * changed the handleSearchByName function to search using target's value instead of searchByName variable * updated the file Roles.tsx to take care of useState lag * changed tests for suiting searchByName * changed tests for searchByName including backspaces * added tests for paginationList and changing rowsPerPage * added tests to increase coverage in Roles.tsx * changed the package.json file's test command * changed PostNotFound component to be used as a reusable one and added it in Roles section and set languages option in locales folder * changed formatting in locales changed files * removed comments in Roles.tsx * Empty commit * renamed the PostNotFound component and modifiied relevant files * changed Roles.tsx filtering * empty commit * reverted changes in package.json * Improved signupform validations (#828) * Improved signupform validations * updated signup form validation to show all messages at once * improved test coverage for LoginPage * Fixed failing test --------- Co-authored-by: Joyce Malicha <[email protected]> * added tests for Search Bar in the Organization List Page of SUPERADMIN #827 (#867) * added tests for Search Bar in the Organization List Page of SUPERADMIN #827 * added tests for Search Bar in the Organization List Page of SUPERADMIN #827 * Added Tests Previews (#868) * Installed jest-preview * Automatic Setup * Fiixed Failing Test Command * Added Basic CSS * Added PostCSS Module * Fixed MUI Styling * Minor Changes * Added cross-env to support windows * Adaptar for React 17 and CSS Modules Mock * Added Mocked Styles to Tests * Documentatin Updated * Fixed Failing Tests * Minorr change in documentation * Jest is now Dev Dependency * Workflow Test * Jest Module Path Updates * Module Path Tese 2 * Github Workflow Fixed * Removed Legacy Test Command * Added Documentation to Debug Tests * Fixed Documentation * Docs Image Added To Repo * Images Reorganization * Organized Images * Revert "Improved signupform validations (#828)" (#875) This reverts commit 5820dd9ec05256551b48470c8880fcdc05452fda. * Restored SearchBar Test for OrgList Page (#878) * Restored searchBar test * Lint fix * Coverage fix * Lint fix * Some fixes * Some fixes * fixed the issue of Users filter to fetch corresponding Users to Organisation #701 (#853) * fixed the issue of Users filter to fetch corresponding Users to Organisation #701 * removedd uunused variable * fixed failing text * fixed merged issue * fixed lint error * swap variable * Revert "Restored SearchBar Test for OrgList Page (#878)" (#879) This reverts commit 3d39c524d54e81853490d2d8a1f844ce67252365. * Fixed crashing on error in Block/Unblock page (#862) * Website crash fixed * lint fixed * Added tests for empty response from server * More tests added * Rerun tests empty commit * Redirect on error functioning * Fixed failing tests * Testcase and Title added when users not found * Linting fixed * Typo fixed * Fixed failing tests * Linting fixed * Added NotFound component in OrgPeople and changed Roles.tsx (#882) * changed the handleSearchByName function to search using target's value instead of searchByName variable * updated the file Roles.tsx to take care of useState lag * changed tests for suiting searchByName * changed tests for searchByName including backspaces * added tests for paginationList and changing rowsPerPage * added tests to increase coverage in Roles.tsx * changed the package.json file's test command * changed PostNotFound component to be used as a reusable one and added it in Roles section and set languages option in locales folder * changed formatting in locales changed files * removed comments in Roles.tsx * Empty commit * renamed the PostNotFound component and modifiied relevant files * changed Roles.tsx filtering * empty commit * reverted changes in package.json * added NotFound component in OrgPeople, made changes in the locales files and made some changes to Roles too * added NotFound component to OrgPeople, changerd locales files and changed Roles.tsx * minor change * Restored Search-Bar Test for OrgList Page (#880) * Restored searchBar test * Lint fix * Coverage fix * Lint fix * Some fixes * Some fixes * Fixed Org Dashboard Error (#873) * Fixed TypeError * Minor Change * Fixed Tests * Added back logo512 * Fixed auth header getting copied on login (#890) * fix user update (#876) * fix user detials update * remove userType from update-user page * fix failed test for userUpdate.test.tsx * Removed and Replaced Ant Design from the project (#891) * Fixed auth header getting copied on login * Removed/Replaced Ant Design from the project * Fixed failing tests * Removed comment * Add today functionality in calendar (#897) * Update countline.py * Update pull-requests.yml * Updated countlines.py to cover .spec. files (#900) Co-authored-by: Peter Harrison <[email protected]> * fixed the Inability to set user roles for specific organizations #556 (#898) * fixed the Inability to set user roles for specific organizations #556 * added all language translation * Revert "fixed the Inability to set user roles for specific organizations #556 (#898)" (#901) This reverts commit 891d898eb5543116bb9042a6386b5a12e474159c. * Documentation updated, Redundant css files removed (#896) * Doc updated unused files removed * Removed unused css files from setup tests * Added small calendar in the events #887 (#903) * added small clanedar * added small clanedar * fixed Code Coverage: Create tests for OrgSettings.tsx #396 (#905) * remove redundancy from orgPostCard (#906) * Revert "remove redundancy from orgPostCard (#906)" (#910) This reverts commit d5ce4aa27ee241b0687f7db3d6acd1b62339562f. * Block/Unblock Page Improvements (#885) * Added Radio Buttons * Optimized Queries * Optimized Query and Added Last Name Filter * Radio Button Working * Added Translations * Fixed Filter Name * Fixed Debounce * Fixed Asynchronous Debounce * Added Tests * Better Error and Loading State Handline * Fixed Loader * Fixed Loader * Modulrised Mock Data * Minor Change * Fixed Tests * Increase Coverage * User query replaced with OrgMemberConnection * Fixed Tests * Code Coverage Increase * Code Cov * Fixed Translations * Fixed Failing Tests * fix in failing test (#913) * Improve and Standardize Automated Linting Tests (#916) * added linting rules * added linting rules * added linting rules * Rename `data` variables to more readable name [Fixes #829] (#835) * Refactor screens * Update components * Fix test * Fix typecheck errors * Increase test coverage * Merge latest adminUI-Redesign into Develop (#927) * Updated CODE_STYLE.md * Updated CODE_STYLE.md (#917) * Updated CODE_STYLE.md * Import section update * Upgrade and Migrate from Bootstrap 4 to Bootstrap 5 (#925) * Updated CODE_STYLE.md * Latest Boostrap v5.3.0 & react-bootstrap v2.7.4 installed * Buttons replaced from normal ones to Bootstrap ones * Import section update * Error fixed for Buttons * Language dropdowns and Change language * InputBoxes & Checkboxes fixed and imported from BS * Removed unused package popper.js * Replaced react-modal with Bootstrap one in Login Page * Modals converted to React Bootstrap one * Completely replaced react-modal with react-bootstrap/Modal from the project * Removed react-modal from the project * Removed classbased modal and unused images * Notification navbar migrated * Modal migration * Modal migration * Modal migration done for OrgPostCard * Empty commit to make workflow run * Empty commit to make workflow run * Empty commit to run the workflow --------- Co-authored-by: Anwer Sayeed <[email protected]> * Introduces API versioning check in CI/CD (#924) * a random change * husky precommit * one more try * one more try * one more try * one more try * one more try * one more try * second try * removed unwanted deps * removed unwanted deps * resolved the error * updated variable name * rerun test * rerun test * added test to pull.yml * removed push check * resolved conflict * Update stale.yml * Update CONTRIBUTING.md * Merge talawa-user-portal into develop (#935) * Create login and register page for user portal * Lint public locales * Create tests for login page components * Add react import in tests * Create organizations screen for user portal * Fix failing tests and lint code * fix failing tests * Add tests for organization screen and componenets * Fix non-null assertions * Fix non-null assertions in organizations test * Fix bootstrap migration changes * Merge latest Admin UI Redesign into Develop (#934) * Updated CODE_STYLE.md * Updated CODE_STYLE.md (#917) * Updated CODE_STYLE.md * Import section update * Upgrade and Migrate from Bootstrap 4 to Bootstrap 5 (#925) * Updated CODE_STYLE.md * Latest Boostrap v5.3.0 & react-bootstrap v2.7.4 installed * Buttons replaced from normal ones to Bootstrap ones * Import section update * Error fixed for Buttons * Language dropdowns and Change language * InputBoxes & Checkboxes fixed and imported from BS * Removed unused package popper.js * Replaced react-modal with Bootstrap one in Login Page * Modals converted to React Bootstrap one * Completely replaced react-modal with react-bootstrap/Modal from the project * Removed react-modal from the project * Removed classbased modal and unused images * Notification navbar migrated * Modal migration * Modal migration * Modal migration done for OrgPostCard * Empty commit to make workflow run * Empty commit to make workflow run * Empty commit to run the workflow * Sass filed added with documentation * Linting fixed * Fixed the folder structure and naming convention * Customised Bootstrap (#929) * Sass filed added with documentation * Linting fixed * Fixed the folder structure and naming convention * Assets typo fixed * Typo fix * Merge conflict error fixed --------- Co-authored-by: Anwer Sayeed <[email protected]> * test PR for API versioning check (#932) * testPR * test2 * testing the change * testing it again * test--no-verify * test--no-verify * echo token * test-again * test-again * test * test * read-only * clone * clone * redesigned newsfeed (#939) * Revert "redesigned newsfeed (#939)" (#943) This reverts commit a645eca7cf2ce1335374f48b52335a293e344580. * Make Talawa-Admin mutations in sync with the backend (#946) * Initial change * Redundant Notification removed * Fixed linting and other issues * Tests fixed * Add Home Screen And People Screen along with other components (#940) * Create login and register page for user portal * Lint public locales * Create tests for login page components * Add react import in tests * Create organizations screen for user portal * Fix failing tests and lint code * fix failing tests * Add tests for organization screen and componenets * Fix non-null assertions * Fix non-null assertions in organizations test * Fix bootstrap migration changes * Add Home Screen along with other components * Fix failing tests * Add required tests and Offcanvas navbar * Remove unused variables from tests * Sync the Mutations with talawa-api * Merge AdminUI-Redesign into Develop (#947) * Updated CODE_STYLE.md * Updated CODE_STYLE.md (#917) * Updated CODE_STYLE.md * Import section update * Upgrade and Migrate from Bootstrap 4 to Bootstrap 5 (#925) * Updated CODE_STYLE.md * Latest Boostrap v5.3.0 & react-bootstrap v2.7.4 installed * Buttons replaced from normal ones to Bootstrap ones * Import section update * Error fixed for Buttons * Language dropdowns and Change language * InputBoxes & Checkboxes fixed and imported from BS * Removed unused package popper.js * Replaced react-modal with Bootstrap one in Login Page * Modals converted to React Bootstrap one * Completely replaced react-modal with react-bootstrap/Modal from the project * Removed react-modal from the project * Removed classbased modal and unused images * Notification navbar migrated * Modal migration * Modal migration * Modal migration done for OrgPostCard * Empty commit to make workflow run * Empty commit to make workflow run * Empty commit to run the workflow * Sass filed added with documentation * Linting fixed * Fixed the folder structure and naming convention * Customised Bootstrap (#929) * Sass filed added with documentation * Linting fixed * Fixed the folder structure and naming convention * Assets typo fixed * Typo fix * Initial login page work * Merge conflict error fixed * Theming modified and Added Loader over every screen * Fixed UI issue for navbar and login * Fixed production bug * Removed unused variable * Tests fixed * Added Change Language Btn dropdown * Merge conflict fixed, merge latest develop into adminUI-redesign (#938) * Merge latest adminUI-Redesign into Develop (#927) * Updated CODE_STYLE.md * Updated CODE_STYLE.md (#917) * Updated CODE_STYLE.md * Import section update * Upgrade and Migrate from Bootstrap 4 to Bootstrap 5 (#925) * Updated CODE_STYLE.md * Latest Boostrap v5.3.0 & react-bootstrap v2.7.4 installed * Buttons replaced from normal ones to Bootstrap ones * Import section update * Error fixed for Buttons * Language dropdowns and Change language * InputBoxes & Checkboxes fixed and imported from BS * Removed unused package popper.js * Replaced react-modal with Bootstrap one in Login Page * Modals converted to React Bootstrap one * Completely replaced react-modal with react-bootstrap/Modal from the project * Removed react-modal from the project * Removed classbased modal and unused images * Notification navbar migrated * Modal migration * Modal migration * Modal migration done for OrgPostCard * Empty commit to make workflow run * Empty commit to make workflow run * Empty commit to run the workflow --------- Co-authored-by: Anwer Sayeed <[email protected]> * Introduces API versioning check in CI/CD (#924) * a random change * husky precommit * one more try * one more try * one more try * one more try * one more try * one more try * second try * removed unwanted deps * removed unwanted deps * resolved the error * updated variable name * rerun test * rerun test * added test to pull.yml * removed push check * resolved conflict * Sass filed added with documentation * Linting fixed * Fixed the folder structure and naming convention * Update stale.yml * Typo fix * Update CONTRIBUTING.md * Merge talawa-user-portal into develop (#935) * Create login and register page for user portal * Lint public locales * Create tests for login page components * Add react import in tests * Create organizations screen for user portal * Fix failing tests and lint code * fix failing tests * Add tests for organization screen and componenets * Fix non-null assertions * Fix non-null assertions in organizations test * Fix bootstrap migration changes * Merge conflict error fixed --------- Co-authored-by: Anwer Sayeed <[email protected]> Co-authored-by: Kanishka Bansode <[email protected]> Co-authored-by: Peter Harrison <[email protected]> Co-authored-by: Noble Mittal <[email protected]> * Random checkout * Design ready for homescreen * Login page 100% code c=coverage * Login page icon adjustment * Added translations * Fixed the failing tests * Revert to older version of loader * Animation added fixed warnings * Fixed accessability * Mutations and Tests foxed * Fixed coloring in UserPortal * Tests fixed and ChangeLanguageDropdown used in UserLoginPage * Linting Fixed --------- Co-authored-by: Anwer Sayeed <[email protected]> Co-authored-by: Kanishka Bansode <[email protected]> Co-authored-by: Peter Harrison <[email protected]> Co-authored-by: Noble Mittal <[email protected]> * Merge latest adminUI-Redesign (#950) * Initial Organizations screen done * Removed yellow scrollbar * Linting fixed * Replaced images with svgs for logos * Styling done for btnsContainer * Better typechecking and readability * Animated Drawer working * Responsive page ready * OrgCard responsive * Fixed navbar issue and added webkit keyframes * LeftDrawer ready * Translations added * Added shimmer loading effect * Styling issue fixed * Failing tests fixed for OrgList * Removed unused vars * Tests done for LeftDrawer * Succesfully made component without causing any breaking change * 100% Code coverage achieved for Requests Screen * Fix alignment * Roles screen UI done * Role screen fixed with 100% test coverage * Changing screen activeness fixed * Unused vars and Typos fixed * Language support added * Linting and typos fixed * Fixed failing tests for LeftDrawer * Completed tests of AdminDashListCard with 100% code coverage * OrgListCard done * Finalised tests * Requests user search made functional again ! * Fixed loading on refetch and UX on all screens * OrgList failing errors fixed * Fixed all failing tests * Achieved 100% code coverage for OrgList.tsx * Wrote tests and mod LeftDrawer for admins * Minor ui issue fixed * Fixed failing test * UI bug dropdown * Frontend insync with Backend attempt 1 * Introspection fail fix 1 * Introspection error fix 3 * Introspection error fix another attempt * Another attempt * [Talawa-user-portal] Add Settings and Donate Screen, along with other UI fixes (#953) * Create login and register page for user portal * Lint public locales * Create tests for login page components * Add react import in tests * Create organizations screen for user portal * Fix failing tests and lint code * fix failing tests * Add tests for organization screen and componenets * Fix non-null assertions * Fix non-null assertions in organizations test * Fix bootstrap migration changes * Add Home Screen along with other components * Fix failing tests * Add required tests and Offcanvas navbar * Remove unused variables from tests * Sync the Mutations with talawa-api * Add Settings and Donate Screen * Add multilingual support for the screens * Add Event Project and Volunteer Management (#961) * Add screens for adding and updating event projects * Add delete operation for event projects and debug update * Remove yarn.lock * Begin testing * Add display of tasks and functionality to add tasks * Add modal for edit task * Add UpdateTaskModal * Add Delete Task Modal and volunteers display * Add test for DeleteEventProjectModal.tsx * Add tests for add and update event project modal * Add screen for managing volunteers * Add option to assign and remove volunteers * Add tests for AddTaskModal.tsx * Add tests for TaskListItem.tsx and DeleteTaskModal.tsx * Complete testing for all Task Modals * Add completed display to tasks * Add tests for event dashboard * Restructure files * Add attendee management modal * Add testing for EventAttendeeModal * Move to 100% testing and wrapper for attendees modal * Add basic checkIn functionality for users * Add testing for CheckIn modals * Introduce the tag generation into the repository * Update linting rule and fix errors * Remove alloted seat and alloted room * Fix testing * Correct some tests * Migrate from attendees to registrants * Migrate Event Project modals to new design * Migrate registrants modals and checkin modals to new design with 100% test coverage * Move task modals to new styles * Move to 100% test coverage * Admin workflow completed with updated package.json (#960) * Merge latest AdminUI Redesign into develop (#956) * Initial Organizations screen done * Removed yellow scrollbar * Linting fixed * Replaced images with svgs for logos * Styling done for btnsContainer * Better typechecking and readability * Animated Drawer working * Responsive page ready * OrgCard responsive * Fixed navbar issue and added webkit keyframes * LeftDrawer ready * Translations added * Added shimmer loading effect * Styling issue fixed * Failing tests fixed for OrgList * Removed unused vars * Tests done for LeftDrawer * Succesfully made component without causing any breaking change * 100% Code coverage achieved for Requests Screen * Fix alignment * Roles screen UI done * Role screen fixed with 100% test coverage * Changing screen activeness fixed * Unused vars and Typos fixed * Language support added * Linting and typos fixed * Fixed failing tests for LeftDrawer * Completed tests of AdminDashListCard with 100% code coverage * OrgListCard done * Finalised tests * Requests user search made functional again ! * Fixed loading on refetch and UX on all screens * OrgList failing errors fixed * Fixed all failing tests * Achieved 100% code coverage for OrgList.tsx * Wrote tests and mod LeftDrawer for admins * Minor ui issue fixed * Fixed failing test * UI bug dropdown * Frontend insync with Backend attempt 1 * Introspection fail fix 1 * Introspection error fix 3 * Introspection error fix another attempt * Another attempt * Fixed Default Animation on Organizations Screen * Fixed typo * Loading data from localstorage functional * Fixed name conventions * Fixed typo * UI Fix * Changed screen name * Table Loader added * Added LeftOrg drawer and Organization screen comp to Screens * routesReducer tests fixed * Redundant adminNavbar removed from project * MemberDetail issue fixed * Achieved 100% code coverage for LeftDrawerOrg, Added Empty div in images * Fixed failing tests * Fix tests * Fixed warnings * Linting fixes * Linting issues fixed * Achieved 100% code coverage for CollapsibleDropdown * Achieved 100% CC on IconComponent and removed useless imports * Achieved 100% cc for LeftDrawer Component * Achieved 100% CC on SuperAdminScreen Component * Fixed typo * Integrated Event Dashboard * Failing tests for LeftDrawer LeftDrawerOrg OrgList screen fixed * Removed redundant code * Removed useless imports * Linting fixed * Removed LeftDrawerOrg * Update documentation * copy-docs -to-talawa branch update to develop * removed dependance of code copying from generate segment * Update push.yml (#969) * Update push.yml (#970) * Feature Request: Adding a dialog to go to plugin store after an organization is created by the admin (#951) * Add/ test for OrgPost.tsx * fix: org post back to default * Added Dialog 2 * Updated Dialog UI * Removed Extra code * Updated Plugin store * fix: warnings and solves #951 & #948 * fix: warnings and solves #951 & #948 * fix: warnings and solves #951 & #948 * Fix: UI Redesign * fix: merge * fix * Update AddOnStore.tsx * Fixed Merge Errors * Add test: for OrgEntry * Test 3 * fix test 4 * Merge latest AdminUI Redesign into develop (#972) * Initial Organizations screen done * Removed yellow scrollbar * Linting fixed * Replaced images with svgs for logos * Styling done for btnsContainer * Better typechecking and readability * Animated Drawer working * Responsive page ready * OrgCard responsive * Fixed navbar issue and added webkit keyframes * LeftDrawer ready * Translations added * Added shimmer loading effect * Styling issue fixed * Failing tests fixed for OrgList * Removed unused vars * Tests done for LeftDrawer * Succesfully made component without causing any breaking change * 100% Code coverage achieved for Requests Screen * Fix alignment * Roles screen UI done * Role screen fixed with 100% test coverage * Changing screen activeness fixed * Unused vars and Typos fixed * Language support added * Linting and typos fixed * Fixed failing tests for LeftDrawer * Completed tests of AdminDashListCard with 100% code coverage * OrgListCard done * Finalised tests * Requests user search made functional again ! * Fixed loading on refetch and UX on all screens * OrgList failing errors fixed * Fixed all failing tests * Achieved 100% code coverage for OrgList.tsx * Wrote tests and mod LeftDrawer for admins * Minor ui issue fixed * Fixed failing test * UI bug dropdown * Frontend insync with Backend attempt 1 * Introspection fail fix 1 * Introspection error fix 3 * Introspection error fix another attempt * Another attempt * Fixed Default Animation on Organizations Screen * Fixed typo * Loading data from localstorage functional * Fixed name conventions * Fixed typo * UI Fix * Changed screen name * Table Loader added * Added LeftOrg drawer and Organization screen comp to Screens * routesReducer tests fixed * Redundant adminNavbar removed from project * MemberDetail issue fixed * Achieved 100% code coverage for LeftDrawerOrg, Added Empty div in images * Fixed failing tests * Fix tests * Fixed warnings * Linting fixes * Linting issues fixed * Achieved 100% code coverage for CollapsibleDropdown * Achieved 100% CC on IconComponent and removed useless imports * Achieved 100% cc for LeftDrawer Component * Achieved 100% CC on SuperAdminScreen Component * Fixed typo * Integrated Event Dashboard * Failing tests for LeftDrawer LeftDrawerOrg OrgList screen fixed * Removed redundant code * Removed useless imports * Linting fixed * Removed LeftDrawerOrg * Dashboard screen ui almost ready * Org Dash ready * Block/Unblock screen ready * Organization settings page ready * Lang changes * Page refresh on updating org removed * OrgUpdate tests done * OrgUpdate 100% test coverage achieved * OrgSettings Tests done * Organization Dashboard Cards done * Organization Dashboard achieved 100% CC * 100% CC achieved for BlockUser screen * Finalised changes * Small change * Tests fixed * Separate OrgSettings component made * Linting fixed * Formatting fixed * Events screen and Post Comment Modal for Talawa-user-portal (#963) * Create login and register page for user portal * Lint public locales * Create tests for login page components * Add react import in tests * Create organizations screen for user portal * Fix failing tests and lint code * fix failing tests * Add tests for organization screen and componenets * Fix non-null assertions * Fix non-null assertions in organizations test * Fix bootstrap migration changes * Add Home Screen along with other components * Fix failing tests * Add required tests and Offcanvas navbar * Remove unused variables from tests * Sync the Mutations with talawa-api * Add Settings and Donate Screen * Add multilingual support for the screens * Add events screen without calendar view * Add multilingual support to Events screen * Fix failing tests due to merge * Add Post Comment functionality * Refactor Events tests * Deprecate event registrants from query * Update README.md * Add My Tasks screen and Fix UI bugs [User Portal] (#978) * Create login and register page for user portal * Lint public locales * Create tests for login page components * Add react import in tests * Create organizations screen for user portal * Fix failing tests and lint code * fix failing tests * Add tests for organization screen and componenets * Fix non-null assertions * Fix non-null assertions in organizations test * Fix bootstrap migration changes * Add Home Screen along with other components * Fix failing tests * Add required tests and Offcanvas navbar * Remove unused variables from tests * Sync the Mutations with talawa-api * Add Settings and Donate Screen * Add multilingual support for the screens * Add events screen without calendar view * Add multilingual support to Events screen * Fix failing tests due to merge * Add Post Comment functionality * Refactor Events tests * Deprecate event registrants from query * Add my tasks screen for user portal * Remove unnecessary comments from test files * Add Feedback UI Components to Talawa Admin (#980) * Add feedback component * Add tests for feedback modal * Add handling for empty feedback * Add Average Rating and Reviews component * Add testing for all the added cards * Fix tests and move to 100% coverage * Add bugfix * Add merge function to fix failing tests * Add key definitons * Change merge policy * Add custom merge policy to all the Event Stat tests * remove cache * Migrate to a single query in the parent * Adding Plugin Logic to the Talawa Mobile Web App (#976) * Add/ test for OrgPost.tsx * fix: org post back to default * Added Dialog 2 * Updated Dialog UI * Removed Extra code * Updated Plugin store * fix: warnings and solves #951 & #948 * fix: warnings and solves #951 & #948 * fix: warnings and solves #951 & #948 * Fix: UI Redesign * fix: merge * fix * Update AddOnStore.tsx * Fixed Merge Errors * Add test: for OrgEntry * Test 3 * fix test 4 * chores: version changes * Add: Initial Websocket setup on talawa mobile web * Add: plugin logic * Add: plugin logic * removed extra * removed extra * Added: Tests * fix * Add Side Navigation to Event Dashboard (#981) * Create left drawer for event dashboard * Add basic styles to the event dashboard * Fix button styling * Add testing * Add testing for the left event drawer * Add 100% line coverage for all components * Increase timeout for tests * Move maximum rating …
* Refactored dockerfile for production * updated eslintignore to include nginx.conf * updated devdependencies * Updated docker-compose and dockerfile * Fixed potential security vulnerabilities * Improve security in nginx.conf * Fixed nginx.conf * Moved nginx.conf to config/docker/setup
|
@disha1202 I am going to close this as it seems inactive. |
|
Reopening. GSoC |
* adding vitest to avatar component Signed-off-by: NishantSinghhhhh <[email protected]> * Merging develop-postgres branch into develop branch Signed-off-by: NishantSinghhhhh <[email protected]> * changed faulty files Signed-off-by: NishantSinghhhhh <[email protected]> * changed faulty files Signed-off-by: NishantSinghhhhh <[email protected]> * New branch for merging Signed-off-by: NishantSinghhhhh <[email protected]> --------- Signed-off-by: NishantSinghhhhh <[email protected]>
|
If no one is currently working on this issue, I would like to take it on. Please assign it to me. |
|
Please fix:
Make sure CodeRabbit.ai approves your changes |
disha1202
force-pushed
the
unseen-msgs
branch
from
7ffc2f7 to
ec91a82
Compare
There was a problem hiding this comment.
Actionable comments posted: 22
🔭 Outside diff range comments (2)
package.json (1)
Security vulnerabilities found in Vite v5.4.8
The version of Vite (^5.4.8) used in the project has known security vulnerabilities:
- Moderate severity: Server's
fs.denybypass vulnerability (fixed in 5.1.8)- Moderate severity: DOM Clobbering gadget leading to XSS (fixed in 5.1.8)
Please update Vite to version 5.4.9 or later to address these security issues. Other Vite-related packages in the project do not have any known vulnerabilities.
🔗 Analysis chain
Line range hint
6-6: Verify security implications of fixed dependency versionsThe requests package and several Vite-related packages are pinned to specific versions. Let's verify these versions for known vulnerabilities.
Also applies to: 70-71
Let me check the Vite-related packages mentioned in the review comment.
Let me check the remaining Vite-related packages for vulnerabilities.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Check for security advisories for pinned dependencies gh api graphql -f query=' { securityVulnerabilities(first: 5, ecosystem: NPM, package: "requests") { nodes { advisory { summary severity publishedAt } vulnerableVersionRange firstPatchedVersion { identifier } } } }'Length of output: 341
Script:
#!/bin/bash # First, let's see what Vite-related packages are actually in package.json cat package.json | jq '.dependencies,.devDependencies' | grep -i vite # Then check their security advisories for pkg in "vite" "@vitejs/plugin-react"; do echo "Checking $pkg..." gh api graphql -f query="{ securityVulnerabilities(first: 5, ecosystem: NPM, package: \"$pkg\") { nodes { advisory { summary severity publishedAt } vulnerableVersionRange firstPatchedVersion { identifier } } } }" doneLength of output: 2539
Script:
#!/bin/bash # Check security advisories for the remaining Vite-related packages for pkg in "vite-plugin-environment" "vite-plugin-node-polyfills" "vite-tsconfig-paths" "vite-plugin-svgr"; do echo "Checking $pkg..." gh api graphql -f query="{ securityVulnerabilities(first: 5, ecosystem: NPM, package: \"$pkg\") { nodes { advisory { summary severity publishedAt } vulnerableVersionRange firstPatchedVersion { identifier } } } }" doneLength of output: 2268
src/screens/OrgList/OrgList.module.css (1)
Line range hint
69-91: Fix duplicate.sampleOrgSectionclass definitionsThe
.sampleOrgSectionclass is defined twice with different properties. Merge them into a single definition to avoid confusion and potential CSS conflicts..sampleOrgSection { + font-family: Arial, Helvetica, sans-serif; + width: 100%; display: grid; grid-template-columns: repeat(1, 1fr); row-gap: 1em; + justify-content: center; + flex-direction: column; + align-items: center; } - .sampleOrgSection { - font-family: Arial, Helvetica, sans-serif; - width: 100%; - display: grid; - grid-auto-columns: repeat(1, 1fr); - justify-content: center; - flex-direction: column; - align-items: center; - }
🧹 Nitpick comments (84)
src/screens/EventVolunteers/Requests/Requests.spec.tsx (1)
32-35: Mocking strategy for 'react-toastify' is valid.
Providing separate mocking for the toast’s success and error methods is ideal for capturing distinct behaviors in tests. Ensure add-ons like warning or info are mocked if used in other parts of the code.src/components/AddOn/support/components/Action/Action.spec.tsx (1)
21-26: Consider adding more test cases.
Currently, the test ensures that the component renders labeled text and children. You may want to expand coverage to handle edge cases such as empty or undefined props, as well as interactive scenarios if Action is intended to have event handlers.src/components/AddOn/core/AddOnStore/AddOnStore.tsx (10)
5-5: Check GraphQl directory naming.
Consider renaming 'GraphQl' to 'GraphQL' or some consistent convention across the codebase for clarity.
6-6: Multiple UI libraries usage.
Using both MUI icons and React Bootstrap in the same component may increase bundle size and styling complexity. Evaluate whether you can unify on a single library.
13-24: Clarify or remove redundant fields in InterfacePluginHelper.
“pluginInstallStatus?” and “installed” may be duplicative. Consider consolidating to avoid confusion.
44-44: Unused state variable.
You're ignoring the first element from useState. Remove or use it if necessary.
59-62: Consider null checks before mapping plugins.
Ensure “plugins” and “installIds” are valid. A functional approach or short-circuit logic might protect from runtime errors.
100-111: Broaden the searching logic.
filterPlugins only checks pluginName. You could also include pluginDesc or pluginCreatedBy to give users more robust search capabilities.
125-140: Prefer CSS modules over inline styling.
Inline styles can reduce maintainability. Transferring them to AddOnStore.module.css would keep styles centralized and consistent.
Line range hint
141-157: Search button lacks onClick functionality.
Currently, it’s purely visual. If an interactive search button is intended, wire up an onClick or remove the button for clarity.
159-183: Dropdown event casting may be fragile.
Converting onSelect to a React.ChangeEvent might risk type mismatches. Consider a more direct React-Bootstrap pattern or unify filter handling to reduce confusion.
197-231: Refactor nested IIFE.
Retrieving and rendering filtered plugins in an inline self-invoked function can hamper readability. A small helper function might improve clarity.config/vite.config.ts (1)
26-28: Consider externalizing port and host to environment variables.
Using 4321 is fine, but environment variables allow easier configuration across environments and reduce hardcoded settings.config/docker/setup/nginx.conf (1)
5-5: Add SSL configuration or HTTP→HTTPS redirection.
Currently there’s only a TODO. For production, it’s advisable to secure traffic or redirect port 80 to 443.src/components/AddOn/AddOn.spec.tsx (2)
23-30: Mocking the store.
Your vi.mock setup is good. If you need more thorough tests, consider adding sample data or mocking dispatch calls.
32-37: Mocking i18n.
Providing a minimal i18n mock is sufficient for now. You could expand it to test multiple translations or fallback behavior if needed.jest.config.js (2)
20-20: Inclusive test matching strategy.
Switching from '{spec,test}' to '.test.' allows more consistent naming. If you still have “.spec.” files, confirm they’re included in the tests or rename them for consistency.
83-83: Test path ignore patterns.
You’ve duplicated “src/screens/UserPortal/Volunteer/Actions/Actions.spec.tsx” in coveragePathIgnorePatterns and testPathIgnorePatterns. Ensure this test is no longer relevant or intentionally skipped.src/components/Avatar/Avatar.spec.tsx (4)
16-27: Mocking the store.
Consider verifying whether essential slices of state are tested. If you expand usage of the store in this component, you might need more thorough integration testing.
29-34: Mocking translation utilities.
Mocking i18n is fine for unit tests. If you rely on translations for complex logic, consider an integration test that uses the real translator for coverage.
36-58: Favor descriptive test names.
Your test is clear, but you could refine the name further, e.g., “renders with a user-supplied name and alt text.” This ensures clarity for test logs.
60-93: Enforce consistent naming for props.
Props like “avatarStyle” and “dataTestId” read well. For uniformity, consider standard naming for “data-testid” vs. “dataTestId” across the codebase.src/components/EventCalendar/EventHeader.tsx (2)
58-58: Use consistent hover or focus styles for the search button
Currently, the inline style sets only the bottom margin. Consider extracting styling to the CSS module and applying consistent hover/focus/active states for better maintainability and to keep style logic in one place.
115-115: Promote reusability of create button styling
While using a distinct CSS class helps keep the design consistent, it may be beneficial to reuse existing button styles or create a shared component for “create” or “add” actions across the project.src/components/AddOn/core/AddOnEntry/AddOnEntry.tsx (3)
62-62: Remove commented-out console logs
Commented-out logs can cause confusion and clutter. Remove them or use a logging utility for debugging to maintain a clean codebase.
105-108: Consider refactoring inline styles for the Card
Using a CSS module or styled-components approach would keep style definitions consistent and easier to maintain compared to scattered inline styles.
121-121: Avoid inline styles for font weight
Extract the bold font style into your CSS module to ensure consistent typography rules and facilitate theming.src/components/LeftDrawer/LeftDrawer.tsx (1)
66-66: Use theme variables for text and background
Hard-coded colors (e.g., #EAEBEF) can become inconsistent over time. Consider using CSS variables or theming to maintain consistent design across the app.Also applies to: 68-70
src/screens/OrgSettings/OrgSettings.spec.tsx (3)
19-27: Consider scoping the router mock setup to individual tests instead of a helper function.
While the mockRouterParams helper is convenient, having a shared mock across tests can occasionally lead to tricky side effects if multiple tests need to customize the mock differently. One approach would be to define the mock directly in the specific test or test suite that requires it, preventing potential cross-test interference.
61-72: Re-importing the module for SetupRedirectTest can impact coverage metrics.
The dynamic import in SetupRedirectTest re-imports OrgSettings at runtime, which might complicate coverage reporting and debugging. Consider using a single consistent import at the file’s top scope, paired with a specialized mock or condition that triggers fallback routing directly.
133-146: Dropdown test is well-organized; re-check presence vs visibility.
The test checks that the settings dropdown items exist and that their count matches the expected tab list. You might also confirm that each item is rendered or clickable in subsequent steps if you want deeper coverage, especially if these items lead to different sections.src/screens/UserPortal/UserScreen/UserScreen.spec.tsx (2)
29-37: Cautious approach to mocking react-router-dom.
Mocking router hooks is necessary for testing, but merging multiple mocks (like mockLocation, mockID, and useNavigate) into a single block can become cumbersome if you add more logic in the future. If the tests become more intricate, consider scoping the mocks to specific test blocks.
Line range hint
164-180: Direct equality check on window.location.pathname.
The test confirms path redirection, but note that relying on the global window object in unit tests can sometimes be brittle. Consider verifying the navigate mock was called with the expected path if you want a more targeted assertion, rather than reading from window.location.src/screens/UserPortal/Volunteer/UpcomingEvents/UpcomingEvents.spec.tsx (1)
93-99: Centralized partial mocking of react-router-dom is easy to maintain.
Using vi.mock in the beforeAll block works well for ensuring that the default useParams is set. Just be mindful if you introduce new tests requiring different params, as you may need to re-mock or override in certain test blocks.src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.tsx (2)
41-41: Remove console.log in production code
It's generally best practice to avoid leaving console logs in production code since it may clutter the console and potentially leak sensitive information.- console.log(id, type);
153-156: Clarify start/end date distinction
You have two distinct Card.Text elements, one for "Starts on" and one for "Ends on." Consider clarifying the labeling or data-testid attributes to better differentiate them in your tests (e.g., data-testid="Ad_start_date" for the start date to avoid confusion).- <Card.Text data-testid="Ad_end_date"> - Starts on {startDate?.toDateString()} - </Card.Text> + <Card.Text data-testid="Ad_start_date"> + Starts on {startDate?.toDateString()} + </Card.Text>src/components/AddOn/core/AddOnEntry/AddOnEntry.spec.tsx (3)
1-6: Include reasons for JSDoc
The initial file overview comment is succinct. Consider adding more about the purpose of this test suite, referencing related specs if relevant for cross-documentation.
72-86: Ensure coverage of installation logic
The test “should render modal and take info to add plugin…” focuses on rendering and presence checks. Consider a follow-up test verifying the actual data submission upon a form action or suitable event, ensuring coverage of the logic triggered when adding a plugin.
226-241: Redirection coverage
Verifying that the component redirects when orgId is undefined is helpful. If there’s additional logic determining how orgId becomes undefined (e.g., a network call returning null), consider adding an integration test covering that flow.src/components/Venues/VenueModal.tsx (2)
3-3: Global styling vs. local module
Moving from a local CSS module to a global stylesheet can unify color schemes and layouts across components. Confirm that no unintended style overrides occur in other components using the same global styles.
263-263: Separate add vs. update button styling
Using styles.addButton for creating or editing a venue is fine, but if you have separate requirements for “create” vs “edit,” consider giving them unique class names in the future.src/screens/OrganizationVenues/OrganizationVenues.tsx (3)
158-158: Use of search button styleUsing styles.searchButton refines the button's appearance. Confirm that the color contrast is sufficient for readability and that hover/focus states meet accessibility standards.
163-163: Mixed Bootstrap and custom classesThe div has className="d-flex gap-3 flex-wrap" while also relying on separate style modules in other elements. This is acceptable but can become inconsistent. Evaluate whether to encapsulate such repeated utility classes within your .module.css to maintain uniformity.
208-208: Reusing styles.dropdown for second dropdownEnsure both dropdowns don't require distinct styling. If future adjustments differ for each component, consider separate classes to avoid forcing multiple elements to share the same style.
src/screens/OrganizationFunds/FundModal.tsx (1)
176-176: Close button class renamedclassName={styles.closeButton} clarifies intent for a dedicated button style. Confirm the design remains consistent across modals, especially if a project-wide standard close button style is used.
src/screens/Requests/Requests.spec.tsx (1)
62-69: Introduction of wait utilityThe wait function wraps setTimeout in an act block, preventing update state warnings. This approach is solid for asynchronous tests. Just be sure not to overuse arbitrary timeouts, as it may slow test suites.
src/screens/Requests/Requests.tsx (2)
250-250: Refine input field styling.Switching to a custom inputField class is logical for project-wide consistency. Confirm that any prior custom styling aligns with the new app-level classes.
259-261: Search button styling.The new searchButton class centralizes styling, but ensure the comment referencing inline styling (line 261) is either removed if outdated or updated if still relevant.
- // style: ... + /* If inline styling is no longer necessary, remove this comment to avoid confusion. */src/screens/UserPortal/Donate/Donate.spec.tsx (1)
141-143: react-router-dom mocking approach.Using vi.mock and vi.importActual is an effective pattern for partial mocking. Verify that any other router features you rely on are properly mocked.
src/screens/OrganizationFunds/OrganizationFunds.tsx (3)
21-40: Improved DataGrid styling.Introducing box shadow and hover states can enhance the UI, but test thoroughly to ensure color contrasts and element states meet accessibility guidelines.
248-249: Redundant comment removal.The commented-out code suggests the prior Bootstrap classes are no longer needed. Removing commented lines ensures clarity and maintainability.
- // className="me-2 rounded" + // Removed old Bootstrap classes for clarity
302-306: Search button icon styling.Assigning a dedicated class to the Search icon (styles.searchIcon) is an effective approach. Confirm the icon size or color if it’s inconsistent with global UI guidelines.
src/components/EventCalendar/YearlyEventCalender.tsx (2)
49-53: Removing unused enum.Commented-out code for the Status enum can be safely removed for clarity. Unless you foresee reintroducing it, removing reduces technical debt.
- // enum Status { - // ACTIVE = 'ACTIVE', - // BLOCKED = 'BLOCKED', - // DELETED = 'DELETED', - // }
67-72: Interface code cleanup.The commented-out InterfaceIEventAttendees is unused and can be removed to minimize clutter. If you intend to reinstate it, consider placing it in a dedicated types file.
src/screens/UserPortal/Campaigns/Campaigns.spec.tsx (2)
Line range hint
192-194: Button & Input Container
Renaming container classes to “btnsContainerBlockAndUnblock” and “inputBlockAndUnblock” clarifies the styling intent. The approach is consistent with the modular CSS pattern in the repo.Also applies to: 213-213
Line range hint
334-334: Block & Unblock Buttons
Renaming to “closeButton” (Unblock) and “addButton” (Block) is more descriptive, improving code readability.You could further consider a more consistent naming pattern, for example “unblockButton” and “blockButton,” to eliminate ambiguity.
Also applies to: 346-346
src/screens/BlockUser/BlockUser.tsx (1)
192-194: Block & Unblock Layout
Renaming containers and simplifying class usage improves clarity, especially for the “BlockAndUnblock” sections. This change is cohesive with the updated naming approach.Consider verifying that other screens use consistent naming to maintain uniform styling across the UI.
Also applies to: 213-213, 221-221, 225-229, 236-236, 244-244, 254-258, 268-268, 275-275, 304-308, 334-334, 346-346
src/screens/OrgList/OrgList.tsx (1)
277-277: Remove console log in production code.
Leaving console logs in production can clutter logs. Consider removing or using a logger with appropriate levels for better production monitoring.- console.log('loadMoreOrganizations');src/screens/LoginPage/LoginPage.tsx (1)
467-467: Show/hide password technique.
Toggling password visibility is straightforward. Use caution for potential security concerns when showing the password.Dockerfile (2)
7-7: Optimize npm install for productionUsing
npm installin production builds can include unnecessary development dependencies.Consider using:
- RUN npm install + RUN npm ci --only=production
13-15: Add health check and optimize for productionThe container configuration could benefit from additional production-ready features.
Consider adding:
- HEALTHCHECK instruction
- NODE_ENV environment variable
- Non-root user for security
+ ENV NODE_ENV=production EXPOSE 4321 + HEALTHCHECK --interval=30s --timeout=3s \ + CMD wget --no-verbose --tries=1 --spider http://localhost:4321/health || exit 1 + USER node CMD ["npm", "run", "serve"].dockerignore (1)
1-25: Enhance security and optimization with additional exclusionsThe .dockerignore file is well organized but could benefit from additional security-related exclusions.
Consider adding these entries:
# Development files *.log *.lock .DS_Store .idea .vscode + # Security-related + .env* + .npmrc + .config + # Additional test artifacts + junit.xml + test-results/ + # Temporary files + tmp/ + temp/src/components/AddOn/core/AddOnEntry/AddOnEntry.module.css (1)
13-14: Review border styling for accessibility and consistencyThe 4px solid green border appears quite bold and may not align with the design system.
Consider:
- Using a more subtle border width
- Using semantic color variables
- Adding border-radius for consistency
.card { - border: 4px solid green; + border: 2px solid var(--success-border-color); + border-radius: var(--border-radius-md); }public/locales/zh/errors.json (1)
11-15: Consider enhancing the HTTP 400 error messageWhile the validation error messages are clear and specific, the HTTP 400 error message could be more informative by including details about possible validation errors or required actions.
Consider updating the error400 message to be more specific:
- "error400": "响应不成功. 从服务器收到状态代码 400" + "error400": "请求无效。请检查输入数据是否正确，然后重试。(状态代码: 400)"src/components/Advertisements/Advertisements.module.css (2)
21-25: Consider making the input width responsive.The fixed width of 560px might not work well on smaller screens.
Consider using this more responsive approach:
.input { display: flex; position: relative; - width: 560px; + width: 100%; + max-width: 560px; }
33-38: Consider removing commented code.The commented
margin-bottomproperty should be removed if it's no longer needed..actioninput { text-decoration: none; - /* margin-bottom: 50px; */ border-color: #e8e5e5; background-color: white; border-radius: 7px; padding-top: 10px; padding-bottom: 10px; padding-right: 10px; padding-left: 10px; box-shadow: none; }public/locales/en/errors.json (1)
11-15: LGTM! Error messages are clear and actionable.The messages provide good user guidance. One minor suggestion for improvement:
Consider making the error400 message more specific to the validation context:
- "error400": "The submitted information is invalid. Please check your inputs and try again" + "error400": "The submitted information is invalid. Please review the highlighted fields and try again"src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.module.css (1)
31-33: Consider adding responsive breakpoints for card widthThe fixed width of 28rem might cause overflow issues on smaller screens. Consider adding media queries to adjust the width for different viewport sizes.
.card { width: 28rem; } +@media screen and (max-width: 480px) { + .card { + width: 100%; + max-width: 28rem; + } +}.github/workflows/codeql-codescan.yml (1)
35-37: Fix indentation for CodeQL initialization stepThe
withblock should be indented with 11 spaces to maintain consistency with the workflow file structure.- name: Initialize CodeQL uses: github/codeql-action/init@v3 - with: + with: languages: ${{ matrix.language }} debug: true🧰 Tools
🪛 yamllint (1.35.1)
[warning] 37-37: wrong indentation: expected 11 but found 10
(indentation)
src/components/AddOn/core/AddOnStore/AddOnStore.module.css (2)
14-18: Consider using relative units for input widthThe fixed width of 560px might cause issues on smaller screens. Consider using relative units or adding media queries.
.input { display: flex; position: relative; - width: 560px; + width: 100%; + max-width: 560px; }
Line range hint
19-30: Remove commented codeInstead of keeping commented code, consider using version control to track historical changes.
-/* .actioninput { - text-decoration: none; - margin-bottom: 50px; - border-color: #e8e5e5; - width: 80%; - border-radius: 7px; - padding-top: 5px; - padding-bottom: 5px; - padding-right: 10px; - padding-left: 10px; - box-shadow: none; -} */.github/pull_request_template.md (1)
57-57: Fix markdown formattingConsider using a proper heading instead of emphasis for better markdown structure.
-**Other information** +### Other informationsrc/components/OrgListCard/OrgListCard.module.css (1)
58-60: Consider removing !important declarationsWhile the styling changes are good, using
!importantflags is generally considered a bad practice as it breaks CSS specificity and makes styles harder to maintain. Consider increasing selector specificity instead..manageBtn { - background-color: var(--grey-bg-color) !important; - color: black !important; + background-color: var(--grey-bg-color); + color: black; border: 1px solid var(--dropdown-border-color); }.github/workflows/pull-request-target.yml (1)
27-41: Clean up trailing whitespaceThere are several lines with trailing whitespace that should be removed for consistency:
- Lines 27, 28, 29, 33, 35, and 40
🧰 Tools
🪛 yamllint (1.35.1)
[error] 27-27: trailing spaces
(trailing-spaces)
[error] 28-28: trailing spaces
(trailing-spaces)
[error] 29-29: trailing spaces
(trailing-spaces)
[error] 33-33: trailing spaces
(trailing-spaces)
[error] 35-35: trailing spaces
(trailing-spaces)
[error] 40-40: trailing spaces
(trailing-spaces)
.eslintrc.json (1)
146-146: Consider extending ignore patterns for test files.The ignore patterns for style files are good. Consider also adding patterns for test-related files like
*.test.*,*.spec.*if they require different linting rules.- "ignorePatterns": ["**/*.css", "**/*.scss", "**/*.less", "**/*.json"] + "ignorePatterns": ["**/*.css", "**/*.scss", "**/*.less", "**/*.json", "**/*.test.*", "**/*.spec.*"]src/screens/OrganizationEvents/OrganizationEvents.module.css (2)
360-382: Ensure consistent button styling across the applicationThe new
.createButtonclass introduces a different color scheme (#a8c7fa/#286fe0) compared to other buttons. Consider:
- Using CSS variables for colors to maintain consistency
- Aligning hover state colors with the application's color scheme
.createButton { - background-color: #a8c7fa !important; + background-color: var(--primary-button-bg) !important; - color: black !important; + color: var(--primary-button-text) !important; /* ... other properties ... */ } .createButton:hover { - background-color: #286fe0 !important; + background-color: var(--primary-button-hover-bg) !important; }
Line range hint
383-389: Add responsive design for mobile devicesThe file lacks media queries for the new button styles. Consider adding responsive design rules for better mobile experience.
+@media only screen and (max-width: 600px) { + .createButton { + width: 100%; + padding: 8px; + font-size: 14px; + } +}INSTALLATION.md (1)
207-251: Improve documentation formatting and consistencySeveral formatting issues need attention:
- Bare URLs should be properly formatted as inline code
- Code blocks should specify a language
- Inconsistent spacing around code blocks
Example fix for one section:
-REACT_APP_TALAWA_URL="http://localhost:4000/graphql/" +```env +REACT_APP_TALAWA_URL="http://localhost:4000/graphql/" +```🧰 Tools
🪛 Markdownlint (0.37.0)
208-208: null
Bare URL used(MD034, no-bare-urls)
216-216: null
Bare URL used(MD034, no-bare-urls)
224-224: null
Bare URL used(MD034, no-bare-urls)
210-210: null
Fenced code blocks should have a language specified(MD040, fenced-code-language)
218-218: null
Fenced code blocks should have a language specified(MD040, fenced-code-language)
226-226: null
Fenced code blocks should have a language specified(MD040, fenced-code-language)
236-236: null
Fenced code blocks should have a language specified(MD040, fenced-code-language)
244-244: null
Fenced code blocks should have a language specified(MD040, fenced-code-language)
src/assets/css/app.css (3)
137-159: Review of new CSS custom propertiesThe new CSS custom properties provide good organization for theme-specific values. However, there are a few suggestions for improvement:
- Consider grouping related variables together (e.g., all dropdown-related, all table-related)
- Some variables could benefit from more descriptive names (e.g.,
--grey-bg-colorcould be--background-secondary)- The table variables should use consistent naming (
--table-head-colorvs--table-header-color)Consider reorganizing the variables like this:
/* Dropdown Variables */ --dropdown-border-color: #555555; --dropdown-text-color: #555555; --dropdown-hover-color: #eff1f7; /* Background Colors */ --background-secondary: #eaebef; --subtle-blue-grey: #7c9beb; --subtle-blue-grey-hover: #5f7e91; /* Modal Variables */ --modal-width: 670px; --modal-max-width: 680px; /* Form Variables */ --input-shadow-color: #dddddd; /* Button Variables */ --delete-button-bg: #f8d6dc; --delete-button-color: #ff4d4f; --search-button-bg: #a8c7fa; --search-button-border: #555555; /* Table Variables */ --table-image-size: 50px; --table-head-bg: var(--bs-primary); --table-head-color: white; --table-head-radius: 20px; --table-bg-color: #eaebef; --table-row-bg-color: #eff1f7; --table-row-background: var(--bs-white); /* Typography */ --font-size-header: 16px;
Line range hint
1-7: Add license information for custom stylesWhile Bootstrap's license is properly documented, there should be a license header for the custom Talawa styles as well.
Consider adding a license header at the top of the file:
@charset "UTF-8"; @import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap'); + +/*! + * Talawa Admin Styles + * Copyright 2023 Palisadoes Foundation + * Licensed under MIT + */ /*! * Bootstrap v5.3.0 (https://getbootstrap.com/)
Line range hint
2-2: Consider self-hosting Google FontsLoading fonts from Google CDN may have privacy implications and can be blocked in some regions.
Consider self-hosting the Lato font family to:
- Improve privacy
- Reduce external dependencies
- Better control over font loading performance
- Ensure font availability in restricted networks
src/screens/LoginPage/LoginPage.module.css (2)
98-107: Use CSS variables for consistent themingReplace hardcoded
whitecolor with appropriate CSS variable for better theme consistency..reg_btn { background-color: var(--dropdown-border-color); border-color: var(--dropdown-border-color); margin-top: 1rem; - color: white; + color: var(--bs-white); margin-bottom: 1rem; width: 100%; }
88-107: Remove redundant Bootstrap commentsThe comments explaining Bootstrap margin utilities are unnecessary and should be removed for cleaner code.
.login_btn { background-color: var(--search-button-bg); border-color: var(--search-button-border); margin-top: 1rem; - /* mt-3: Bootstrap margin spacing utility (3 = 1rem) */ margin-bottom: 1rem; - /* mb-3: Bootstrap margin spacing utility (3 = 1rem) */ width: 100%; } .reg_btn { background-color: var(--dropdown-border-color); border-color: var(--dropdown-border-color); margin-top: 1rem; color: white; - /* mt-3: Bootstrap margin spacing utility (3 = 1rem) */ margin-bottom: 1rem; - /* mb-3: Bootstrap margin spacing utility (3 = 1rem) */ width: 100%; }src/screens/OrgList/OrgList.module.css (1)
23-31: Use CSS variables for consistent themingReplace hardcoded hex colors with appropriate CSS variables for better maintainability and theme consistency.
.pluginStoreBtn { width: 100%; background-color: white; - color: #555555; - border: 0.5px solid #555555; + color: var(--bs-gray-600); + border: 0.5px solid var(--bs-gray-600); } .pluginStoreBtn:hover, .pluginStoreBtn:focus { background-color: #dfe1e2 !important; - color: #555555 !important; - border-color: #555555 !important; + color: var(--bs-gray-600) !important; + border-color: var(--bs-gray-600) !important; }
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (82)
.dockerignore(1 hunks).eslintignore(1 hunks).eslintrc.json(4 hunks).github/pull_request_template.md(3 hunks).github/workflows/check-tsdoc.js(1 hunks).github/workflows/codeql-codescan.yml(1 hunks).github/workflows/issue.yml(1 hunks).github/workflows/pull-request-target.yml(1 hunks).github/workflows/pull-request.yml(8 hunks).github/workflows/push.yml(1 hunks).github/workflows/stale.yml(2 hunks)Dockerfile(1 hunks)INSTALLATION.md(8 hunks)README.md(1 hunks)config/docker/setup/nginx.conf(1 hunks)config/vite.config.ts(1 hunks)docker-compose.yml(1 hunks)jest.config.js(4 hunks)package.json(6 hunks)public/locales/en/errors.json(1 hunks)public/locales/en/translation.json(2 hunks)public/locales/fr/errors.json(1 hunks)public/locales/hi/errors.json(1 hunks)public/locales/sp/errors.json(1 hunks)public/locales/zh/errors.json(1 hunks)src/assets/css/app.css(1 hunks)src/components/AddOn/AddOn.spec.tsx(1 hunks)src/components/AddOn/core/AddOnEntry/AddOnEntry.module.css(1 hunks)src/components/AddOn/core/AddOnEntry/AddOnEntry.spec.tsx(1 hunks)src/components/AddOn/core/AddOnEntry/AddOnEntry.tsx(5 hunks)src/components/AddOn/core/AddOnStore/AddOnStore.module.css(2 hunks)src/components/AddOn/core/AddOnStore/AddOnStore.test.tsx(2 hunks)src/components/AddOn/core/AddOnStore/AddOnStore.tsx(6 hunks)src/components/AddOn/support/components/Action/Action.spec.tsx(1 hunks)src/components/AddOn/support/services/Plugin.helper.test.ts(1 hunks)src/components/Advertisements/Advertisements.module.css(2 hunks)src/components/Advertisements/Advertisements.test.tsx(1 hunks)src/components/Advertisements/Advertisements.tsx(4 hunks)src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.module.css(1 hunks)src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.tsx(3 hunks)src/components/Advertisements/core/AdvertisementRegister/AdvertisementRegister.module.css(1 hunks)src/components/Advertisements/core/AdvertisementRegister/AdvertisementRegister.tsx(4 hunks)src/components/Avatar/Avatar.spec.tsx(1 hunks)src/components/Avatar/Avatar.test.tsx(0 hunks)src/components/EventCalendar/EventCalendar.module.css(15 hunks)src/components/EventCalendar/EventCalendar.tsx(6 hunks)src/components/EventCalendar/EventHeader.tsx(2 hunks)src/components/EventCalendar/YearlyEventCalender.tsx(2 hunks)src/components/LeftDrawer/LeftDrawer.test.tsx(3 hunks)src/components/LeftDrawer/LeftDrawer.tsx(1 hunks)src/components/LoginPortalToggle/LoginPortalToggle.module.css(1 hunks)src/components/OrgListCard/OrgListCard.module.css(1 hunks)src/components/OrgSettings/ActionItemCategories/OrgActionItemCategories.test.tsx(1 hunks)src/components/OrgSettings/General/GeneralSettings.tsx(1 hunks)src/components/OrganizationScreen/OrganizationScreen.test.tsx(1 hunks)src/components/Venues/VenueModal.tsx(3 hunks)src/screens/BlockUser/BlockUser.tsx(8 hunks)src/screens/EventVolunteers/Requests/Requests.spec.tsx(4 hunks)src/screens/LoginPage/LoginPage.module.css(1 hunks)src/screens/LoginPage/LoginPage.tsx(6 hunks)src/screens/OrgList/OrgList.module.css(2 hunks)src/screens/OrgList/OrgList.tsx(8 hunks)src/screens/OrgPost/OrgPost.tsx(9 hunks)src/screens/OrgSettings/OrgSettings.module.css(0 hunks)src/screens/OrgSettings/OrgSettings.spec.tsx(4 hunks)src/screens/OrgSettings/OrgSettings.tsx(3 hunks)src/screens/OrganizationActionItems/OrganizationActionItems.tsx(2 hunks)src/screens/OrganizationDashboard/OrganizationDashboard.module.css(0 hunks)src/screens/OrganizationDashboard/OrganizationDashboard.tsx(7 hunks)src/screens/OrganizationEvents/OrganizationEvents.module.css(9 hunks)src/screens/OrganizationEvents/OrganizationEvents.tsx(2 hunks)src/screens/OrganizationFunds/FundModal.tsx(3 hunks)src/screens/OrganizationFunds/OrganizationFunds.tsx(5 hunks)src/screens/OrganizationTags/OrganizationTags.tsx(1 hunks)src/screens/OrganizationVenues/OrganizationVenues.tsx(4 hunks)src/screens/Requests/Requests.module.css(0 hunks)src/screens/Requests/Requests.spec.tsx(2 hunks)src/screens/Requests/Requests.tsx(4 hunks)src/screens/UserPortal/Campaigns/Campaigns.spec.tsx(4 hunks)src/screens/UserPortal/Donate/Donate.spec.tsx(2 hunks)src/screens/UserPortal/UserScreen/UserScreen.spec.tsx(6 hunks)src/screens/UserPortal/Volunteer/UpcomingEvents/UpcomingEvents.spec.tsx(2 hunks)
⛔ Files not processed due to max files limit (2)
- src/screens/Users/Users.module.css
- src/screens/Users/Users.tsx
💤 Files with no reviewable changes (4)
- src/components/Avatar/Avatar.test.tsx
- src/screens/OrgSettings/OrgSettings.module.css
- src/screens/OrganizationDashboard/OrganizationDashboard.module.css
- src/screens/Requests/Requests.module.css
✅ Files skipped from review due to trivial changes (7)
- src/screens/OrganizationTags/OrganizationTags.tsx
- src/components/OrgSettings/General/GeneralSettings.tsx
- src/screens/OrganizationEvents/OrganizationEvents.tsx
- .eslintignore
- README.md
- src/components/EventCalendar/EventCalendar.tsx
- src/components/Advertisements/core/AdvertisementRegister/AdvertisementRegister.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
- public/locales/en/translation.json
🧰 Additional context used
📓 Learnings (5)
src/components/LeftDrawer/LeftDrawer.test.tsx (1)
Learnt from: Doraemon012
PR: PalisadoesFoundation/talawa-admin#1988
File: src/components/LeftDrawerOrg/LeftDrawerOrg.test.tsx:282-282
Timestamp: 2024-11-12T10:40:58.654Z
Learning: In the test 'Component should be rendered properly' within 'Testing LeftDrawerOrg component for SUPERADMIN', setting 'SuperAdmin' to false is intentional.
src/components/AddOn/support/components/Action/Action.spec.tsx (1)
Learnt from: adithyanotfound
PR: PalisadoesFoundation/talawa-admin#2482
File: src/components/AddOn/support/components/Action/Action.spec.tsx:1-8
Timestamp: 2024-11-27T06:37:47.871Z
Learning: In the Talawa-Admin project, the `@testing-library/jest-dom` package is imported globally in `vitest.setup.ts`, so individual test files do not need to import it separately.
src/screens/UserPortal/Campaigns/Campaigns.spec.tsx (1)
Learnt from: bitbard3
PR: PalisadoesFoundation/talawa-admin#2588
File: src/components/ChangeLanguageDropdown/ChangeLanguageDropdown.spec.tsx:145-155
Timestamp: 2024-12-02T04:20:11.745Z
Learning: In PRs focused solely on refactoring test cases from Jest to Vitest, avoid suggesting optimizations or changes outside the migration scope.
src/screens/OrganizationFunds/FundModal.tsx (1)
Learnt from: GlenDsza
PR: PalisadoesFoundation/talawa-admin#2064
File: src/screens/OrganizationFunds/OrganizationFunds.tsx:66-72
Timestamp: 2024-11-12T10:40:58.654Z
Learning: Renaming the Enum `Modal` to `ModalState` in the `organizationFunds` component is unnecessary and does not change the functionality.
src/components/Advertisements/Advertisements.test.tsx (1)
Learnt from: IITI-tushar
PR: PalisadoesFoundation/talawa-admin#2680
File: src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.spec.tsx:528-712
Timestamp: 2024-12-22T07:43:26.168Z
Learning: You prefer to keep migrated tests even if they appear duplicated because they originated from the old AdvertisementEntry.test.tsx file.
🪛 Markdownlint (0.37.0)
.github/pull_request_template.md
58-58: null
Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
INSTALLATION.md
208-208: null
Bare URL used
(MD034, no-bare-urls)
216-216: null
Bare URL used
(MD034, no-bare-urls)
224-224: null
Bare URL used
(MD034, no-bare-urls)
210-210: null
Fenced code blocks should have a language specified
(MD040, fenced-code-language)
218-218: null
Fenced code blocks should have a language specified
(MD040, fenced-code-language)
226-226: null
Fenced code blocks should have a language specified
(MD040, fenced-code-language)
236-236: null
Fenced code blocks should have a language specified
(MD040, fenced-code-language)
244-244: null
Fenced code blocks should have a language specified
(MD040, fenced-code-language)
300-300: null
Bare URL used
(MD034, no-bare-urls)
308-308: null
Bare URL used
(MD034, no-bare-urls)
292-292: null
Fenced code blocks should have a language specified
(MD040, fenced-code-language)
302-302: null
Fenced code blocks should have a language specified
(MD040, fenced-code-language)
334-334: null
Fenced code blocks should have a language specified
(MD040, fenced-code-language)
🪛 yamllint (1.35.1)
.github/workflows/pull-request-target.yml
[error] 27-27: trailing spaces
(trailing-spaces)
[error] 28-28: trailing spaces
(trailing-spaces)
[error] 29-29: trailing spaces
(trailing-spaces)
[error] 33-33: trailing spaces
(trailing-spaces)
[error] 35-35: trailing spaces
(trailing-spaces)
[error] 40-40: trailing spaces
(trailing-spaces)
.github/workflows/codeql-codescan.yml
[warning] 37-37: wrong indentation: expected 11 but found 10
(indentation)
.github/workflows/pull-request.yml
[error] 49-49: trailing spaces
(trailing-spaces)
[error] 104-104: trailing spaces
(trailing-spaces)
[error] 209-209: trailing spaces
(trailing-spaces)
[error] 231-231: trailing spaces
(trailing-spaces)
🪛 Biome (1.9.4)
src/components/EventCalendar/EventCalendar.module.css
[error] 14-14: Unexpected shorthand property margin after margin-bottom
(lint/suspicious/noShorthandPropertyOverrides)
🪛 actionlint (1.7.4)
.github/workflows/pull-request.yml
381-381: shellcheck reported issue in this script: SC2086:info:3:35: Double quote to prevent globbing and word splitting
(shellcheck)
381-381: shellcheck reported issue in this script: SC2086:info:10:6: Double quote to prevent globbing and word splitting
(shellcheck)
🔇 Additional comments (110)
src/screens/EventVolunteers/Requests/Requests.spec.tsx (5)
1-7: Nicely documented test file.
The added documentation clarifies the test purpose and functionality, which is beneficial for maintainability and onboarding new contributors.
30-30: Good transition to Vitest.
Importing 'vi' from 'vitest' aligns with the move from Jest to Vitest. This is consistent with the rest of the file’s approach.
85-86: Accurate Vitest mock of react-router-dom.
Replacing Jest’s mock with Vitest’s mock and using 'importActual' is appropriate. This ensures that the default functionalities are preserved except for the overridden parts.
92-92: Clearing mocks is essential.
Invoking vi.clearAllMocks() avoids test pollution across multiple test suites. This ensures each test runs in a clean environment.
113-113: Redirect assertion is concise and intuitive.
Verifying pathname in the test scenario is an effective way to confirm that the user is redirected on missing URL parameters.
src/components/AddOn/support/components/Action/Action.spec.tsx (3)
1-6: Great documentation!
The block comment succinctly describes the purpose and scope of the tests. Keeping this up-to-date and well-detailed will help others quickly understand the context of these tests.
28-29: Well-structured assertions.
These assertions verify that the provided label and children prop text are rendered as expected. This is a straightforward and clear example of a unit test.
7-10: Ensure to leverage the global jest-dom import.
Your usage of “toBeInTheDocument” is provided by “@testing-library/jest-dom.” Confirm that “vitest.setup.ts” has the appropriate global import so that you do not need an explicit import of “@testing-library/jest-dom” in each test file.
✅ Verification successful
The global jest-dom import is correctly set up in vitest.setup.ts
The verification confirms that @testing-library/jest-dom is properly imported globally in vitest.setup.ts, making it unnecessary to import it explicitly in individual test files.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# This script searches for the "vitest.setup.ts" file to confirm the global import setup.
fd vitest.setup.ts --exec cat
Length of output: 67
src/components/AddOn/core/AddOnStore/AddOnStore.tsx (5)
11-12: No issues found for MUI icon import.
Looks good for incorporating MUI’s icon suite.
72-73: Improve fallback when data is undefined.
If data is null or loading is incomplete, consider providing a default or user feedback before setting state.
96-96: Validate event target value.
Current filterChange relies on “enabled” or “disabled.” Consider additional guard if new filters are ever introduced.
186-196: Check type safety on Tab eventKey.
React-Bootstrap’s onSelect might yield undefined or non-string values. Ensure strict typing for better stability.
✅ Verification successful
Let me gather information about the type definitions and usage of the Tabs component to verify the type safety concern.
This will help us understand:
- The type definitions for the Tabs component and its onSelect prop
- How onSelect is used in other parts of the codebase
- Whether proper type imports are in place
Let me try another search pattern to gather information about the Tabs usage and type safety.
This will help us understand:
- How onSelect is used across the codebase
- The type definitions in the AddOnStore component
- Any relevant type definitions for eventKey
Based on the gathered information, I can now generate the final response:
Type safety check for Tab eventKey is already properly handled
The code shows proper type safety handling:
- The
eventKeyis checked for existence with anif (eventKey)guard clause before being used - The
updateSelectedTabfunction explicitly types its parameter asstring - Other examples in the codebase (like EventAttendance.tsx) demonstrate proper type casting of eventKey values
- React-Bootstrap's Tabs component is properly imported and used according to its TypeScript definitions
🏁 Scripts executed
The following scripts were executed for the analysis:
Error: No shell scripts found
Script:
#!/bin/bash
# Search for type definitions or interfaces related to Tabs component
ast-grep --pattern 'interface $_ {
$$$
onSelect?: $_
$$$
}'
# Search for other usages of Tabs component with onSelect
rg "onSelect={" -A 2 -B 2
# Search for type imports related to Tabs
rg "import.*Tabs.*from.*react-bootstrap"
Length of output: 471
Script:
#!/bin/bash
# Search for Tabs usage with proper escaping
rg "onSelect=\{" -A 2 -B 2
# Look for type definitions in the component file
cat src/components/AddOn/core/AddOnStore/AddOnStore.tsx
# Search for type definitions of eventKey in the codebase
ast-grep --pattern 'type $_ = {
$$$
eventKey?: $_
$$$
}'
Length of output: 11897
81-88: Tab switching: confirm data availability.
Ensure that calling getStorePlugins() or getInstalledPlugins() won’t race with the GraphQL query’s loading state.
✅ Verification successful
Let me gather information about the GraphQL queries and their loading states.
Let me also check the implementation of these functions and their relationship with any loading states.
Let me try different commands to search for the loading states and GraphQL queries.
Based on the results, I can now provide a final response as we have found the relevant information about the GraphQL query and loading state.
Tab switching is properly handled with loading states
The code is already handling the loading state correctly through Apollo's useQuery hook. The loading state is being tracked (const { data, loading } = useQuery<...>), and there's a loading check (if (loading)) before processing the data. The getInstalledPlugins function safely uses the nullable data with fallback (data?.getPlugins ?? []), preventing any race conditions.
🏁 Scripts executed
The following scripts were executed for the analysis:
Error: No shell scripts found
Script:
#!/bin/bash
# Search for GraphQL queries and loading states in AddOnStore.tsx
rg -A 10 "getStorePlugins|getInstalledPlugins" --type tsx
# Look for any GraphQL query hooks or loading states
ast-grep --pattern 'const { $$ } = use$_Query('
Length of output: 137
Script:
#!/bin/bash
# Search for function definitions
ast-grep --pattern 'const getStorePlugins = $_'
ast-grep --pattern 'const getInstalledPlugins = $_'
# Look for any loading state variables
rg "loading" --type tsx src/components/AddOn/core/AddOnStore/AddOnStore.tsx
Length of output: 1275
Script:
#!/bin/bash
# Search for loading states and GraphQL queries with broader file type
rg "loading" src/components/AddOn/core/AddOnStore/AddOnStore.tsx
# Look for GraphQL related imports and usage
rg "useQuery|useMutation" src/components/AddOn/core/AddOnStore/AddOnStore.tsx
# Search for the getInstalledPlugins implementation
rg -A 10 "getInstalledPlugins" src/components/AddOn/core/AddOnStore/AddOnStore.tsx
# Look for any state management related to loading
rg "useState.*loading|isLoading" src/components/AddOn/core/AddOnStore/AddOnStore.tsx
Length of output: 1855
.github/workflows/check-tsdoc.js (1)
26-26: Excluding .spec.tsx is consistent with test file conventions.
This keeps TSDoc checks focused on production-facing code. Looks good.
src/components/AddOn/AddOn.spec.tsx (2)
1-6: Well-documented tests.
This docstring clearly states the purpose and context of these tests.
13-14: Correct usage of testing libraries.
Using '@testing-library/jest-dom' with Vitest is a standard approach that integrates well with React testing.
src/components/AddOn/support/services/Plugin.helper.test.ts (1)
12-23: Ensure consistency in property naming and usage.
The newly added fields enrich the plugin object but verify that all references to these new fields (e.g., pluginName, pluginDesc) are handled or tested consistently in the codebase to prevent mismatches. Also, confirm that calling code (outside this file) references these fields correctly.
✅ Verification successful
Based on the search results, I can generate the final response as I have sufficient information about how these fields are used throughout the codebase:
Properties are consistently used across the codebase
The newly added fields pluginDesc and pluginInstallStatus are properly integrated and used consistently:
- They are defined in interfaces (e.g.,
InterfacePluginHelper,InterfaceFormStateTypes) - Used in GraphQL mutations and queries
- Properly handled in components like
AddOnStore,AddOnRegister - Included in test files with appropriate mock data
- Have corresponding translations in multiple languages
- Referenced consistently in component props and form handling
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Searching for references to pluginDesc and pluginInstallStatus to ensure they're consistently used
rg "pluginDesc|pluginInstallStatus" -A 3 -B 3
Length of output: 25279
jest.config.js (4)
39-46: CSS transformations with identity-obj-proxy.
This mapping ensures that jest can handle CSS imports. This is a common approach. Make sure no break occurs in more advanced styling scenarios (e.g., using SASS or global style overrides).
85-86: New coverage output directory & reporters.
Storing coverage in “./coverage/jest” is a good practice. The multi-format coverageReporters is helpful. Confirm that any CI or coverage tools are pointed to this subfolder.
71-71: Ignoring a spec file in coverage might skip relevant tests.
Excluding the spec file from coverage might reduce coverage metrics. Confirm whether you really intend to exclude “Actions.spec.tsx” or if it was done for debugging.
3-14: Check coverage exclusion patterns.
You may already exclude test and build directories. Verify that some coverage is still gathered from relevant test utility files if desired (e.g., custom mocks or helpers).
✅ Verification successful
Based on the shell script results, I can see that there are many test files and mocks in the codebase, but no actual test utility files that would need coverage. The test files themselves are correctly excluded by the coverage patterns in jest.config.js.
Coverage exclusion patterns are correctly configured.
The current patterns appropriately exclude test files and build artifacts while still allowing coverage collection from source files. There are no test utility files (like custom mocks or test helpers) that require coverage, as all files under src/test and files with .test. or .spec. extensions are test files themselves.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Verify that coverage patterns do not inadvertently exclude essential code:
rg "export|function" -A 5 -B 3 src/test
Length of output: 90
Script:
#!/bin/bash
# Let's first check if there are any test utility files in the codebase
fd "test|mock|fixture" --type f
# Then check for any exports or functions in these files
fd "test|mock|fixture" --type f --exec rg "export|function" -A 5 -B 3 {}
Length of output: 67433
src/components/Avatar/Avatar.spec.tsx (2)
7-14: Well-structured doc comments.
These JSDoc-style comments provide clarity for future contributors. Good job adding context about the tested component and the approach.
1-4: Validate testing framework migration.
Using Vitest with React Testing Library looks good. Make sure all prior Jest-based configurations (e.g., jest.mock) harmonize with Vitest’s equivalent features.
✅ Verification successful
Based on the search results, I can see extensive usage of Jest mocks throughout the codebase, with many test files using jest.mock(). The key findings are:
- Most mocks are for external dependencies like 'react-toastify', 'react-router-dom', etc.
- The mocks follow Jest's mocking patterns using
jest.mock()andjest.fn() - The test files are already using Vitest's imported functions (
import { describe, test, expect, vi } from 'vitest')
Let me verify if there are any Vitest-specific mock configurations by searching for Vitest config files.
Let me check the content of the Vitest configuration file to see how mocking is configured.
Let me check the setup file referenced in the Vitest config to see how mocking is configured.
Jest mocking syntax is fully compatible with Vitest - no changes needed
The codebase's migration to Vitest is properly configured and the existing Jest mocking patterns are fully compatible with Vitest:
- Vitest maintains full compatibility with Jest's mocking API including
jest.mock(),jest.fn(), etc. - The setup file imports
@testing-library/jest-domwhich provides DOM testing utilities that work identically with both Jest and Vitest - The Vitest configuration has
globals: trueenabled, which ensures Jest's global APIs likejest.mock()are available - All existing mock implementations in the test files will continue to work as-is with Vitest
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Confirm that references to 'jest.mock' won't break under vitest
rg "jest.mock" -A 2 -B 2
Length of output: 67141
Script:
#!/bin/bash
# Search for vitest config files and content
fd -e config.ts -e config.js vitest
Length of output: 54
Script:
#!/bin/bash
# Check vitest config content
cat vitest.config.ts
Length of output: 973
Script:
#!/bin/bash
# Check vitest setup file content
cat vitest.setup.ts
Length of output: 57
src/screens/OrgSettings/OrgSettings.tsx (3)
29-29: Good job on renaming to PascalCase
Changing the function name from “orgSettings” to “OrgSettings” follows React naming practices, improving clarity and consistency.
129-129: Consistent export with updated component name
Renaming and exporting “OrgSettings” aligns well with PascalCase standards. Confirm that all imports of “OrgSettings” are updated accordingly throughout the project.
✅ Verification successful
Let me search for imports of the component to ensure there are no inconsistencies.
Component exports and imports are consistent
The codebase shows consistent usage of "OrgSettings" in PascalCase across all imports and the export. All references to "orgSettings" (camelCase) are only used in translation keys, route names, and documentation, which is the correct convention for those contexts.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Ensure no references to old orgSettings remain.
rg -A 2 'orgSettings'
Length of output: 2510
Script:
#!/bin/bash
# Search for imports of OrgSettings component
rg -A 2 "import.*OrgSettings"
Length of output: 2163
4-4: Check the global scope and usage of imported styles
You switched from a module-local CSS file to a global style file. Confirm that there are no naming collisions or unintended style overrides.
✅ Verification successful
Let me gather more information about the CSS modules usage in the codebase to better understand the context of this change.
Let me check the content of the app.module.css file to understand the scope of these styles.
No style conflicts detected with the global app.module.css
The change from a local CSS module to app.module.css is safe. The settingsTabs and settingsDropdown classes are only used in OrgSettings.tsx and are properly scoped in app.module.css with responsive media queries to handle the tabs/dropdown toggle behavior. There are no naming collisions or unintended style overrides.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Searching for repeated class names across the codebase that might conflict with "settingsTabs" or "settingsDropdown".
rg --no-filename -A 3 'settingsTabs|settingsDropdown'
Length of output: 978
Script:
#!/bin/bash
# Check the original CSS file location and its content
fd -e css -e scss "app.module"
# Check for other CSS module imports in the codebase
rg "from.*\.module\.css"
# Check the specific component's previous state
git show HEAD~1 -- src/screens/OrgSettings/OrgSettings.tsx
Length of output: 17519
Script:
#!/bin/bash
# Check the content of app.module.css
cat src/style/app.module.css
# Check if settingsTabs and settingsDropdown are used in other components
rg "className=\{.*settingsTabs.*\}|className=\{.*settingsDropdown.*\}"
Length of output: 14057
src/components/AddOn/core/AddOnEntry/AddOnEntry.tsx (1)
20-22: Improved type safety
Changing the prop type to “boolean” and the function signature to return void increases clarity. Validate that all calls to “getInstalledPlugins” correctly handle no return value.
src/components/LeftDrawer/LeftDrawer.tsx (1)
75-79: Validate icon coloring approach
You switched from stroke to fill in other icons but still apply a fill variable here when active. Ensure consistency: confirm that other icons or states also use the same approach to avoid confusion and styling discrepancies.
✅ Verification successful
Icon styling is consistent with the codebase
Based on the search results, the usage of fill="current" is consistently applied across the SVG icons in the codebase, including angleRight.svg, logout.svg, posts.svg, venues.svg, and others. The current implementation in LeftDrawer.tsx follows this same pattern by using fill with CSS variables for active/inactive states, which aligns with the established styling approach.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Search references to fill/stroke usage in icons
rg -A 3 -E 'fill=|stroke='
Length of output: 425
Script:
#!/bin/bash
# Search for fill and stroke attributes in TSX/JSX files
rg -i "fill=['\"]|stroke=['\"]" --type tsx --type jsx -A 3
Length of output: 92
Script:
#!/bin/bash
# Search for fill and stroke attributes in all files
rg -i "fill=['\"]|stroke=['\"]" -A 3
Length of output: 68584
src/screens/OrgSettings/OrgSettings.spec.tsx (2)
28-45: Good use of MemoryRouter for testing.
The renderOrganisationSettings function, with its MemoryRouter setup, is a clear approach for testing routes without polluting the global URL. The fallback route to "/" is also well-handled, ensuring safer test coverage.
75-99: Test readability is strong; consider verifying additional states.
Your test verifying the redirection when orgId is undefined is clear. If you need to confirm whether a toast or any other UI element not yet covered is shown, you could expand the test to further confirm that no partial UI from OrgSettings is rendered.
src/screens/UserPortal/UserScreen/UserScreen.spec.tsx (1)
91-99: Use of beforeEach is sensible for resetting the test environment.
Resetting mockID and mockLocation ensures each test starts with a consistent state, preventing interference across tests. Keep an eye on any future expansions that might require more nuanced per-test setup.
src/components/LeftDrawer/LeftDrawer.test.tsx (3)
98-98: Switch to 'text-black' class is consistent with the color scheme update.
Ensuring that the superadmin’s “My Organizations” button has 'text-black' when active helps reflect the updated color design. Looks good from a styling perspective.
182-182: Responsive test ensures color class correctness on small screens.
Verifying that 'text-black' is applied under 820px ensures the design consistency for smaller screens. This is a solid approach to ensuring responsive styling, as many issues appear at breakpoints.
212-212: ADMIN view logic seems accurate.
The condition gating rolesBtn from admin users is tested, aligning with project requirements. If future roles or permissions expand, consider adding more granular tests to capture updated roles and UI interactions.
src/screens/UserPortal/Volunteer/UpcomingEvents/UpcomingEvents.spec.tsx (1)
24-24: Transition to vitest mocking is consistent with the broader testing shift.
Using vi.spyOn and vi.mock is aligned with the updated approach in this PR, ensuring minimal friction with other test files migrating from Jest.
src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.tsx (1)
102-102: Optional style usage check
Using the card style from the CSS module is good for consistent spacing and layout. Ensure the class name is correctly applied in all relevant places (for example, if Card is used in sibling components, replicate the approach for uniform styling).
src/components/OrgSettings/ActionItemCategories/OrgActionItemCategories.test.tsx (1)
219-227: Validate search behavior after pressing ENTER
This block correctly tests that pressing ENTER filters categories by name. It is well-written for user-event flows. Confirm this behavior is fully aligned with user requirements (e.g., whether a “search” button click is also required or if ENTER alone suffices).
[approve]
src/components/AddOn/core/AddOnEntry/AddOnEntry.spec.tsx (3)
147-190: Toggle install/uninstall states
This test thoroughly checks the toggling from “Uninstall” to “Install” states and the associated success messages. Good job. Just confirm that the real environment calls the correct mutations or Redux actions behind the scenes.
192-224: Edge case: Uninstalled orgs
This block rightfully tests the scenario when the current org is marked as uninstalled. Make sure the code in the main component gracefully handles any updates if an organization’s state changes mid-session (e.g., from uninstalled to installed).
50-54: Mock caution
Mocking react-router-dom is fine for testing. Ensure that your mocks won't misrepresent complex routing logic in more advanced real-world navigation scenarios. If you need more elaborate tests, consider integration tests that don’t rely on mocks.
✅ Verification successful
Let me analyze the test file and related routing logic to verify this concern.
Let me try again with the correct file type flags.
Let me check the actual implementation of AddOnEntry component and its test file to understand the routing complexity.
Based on the code analysis, I can now provide the final response:
Mock implementation is appropriate for this use case
The current mock of useParams is simple and focused, only providing the orgId parameter which is the only route parameter used by the component. The component's routing logic is straightforward - it either uses the orgId for plugin installation/uninstallation or redirects to /orglist if orgId is missing. The tests comprehensively cover both scenarios, and the mock doesn't hide any complex routing behavior.
🏁 Scripts executed
The following scripts were executed for the analysis:
Error: No shell scripts found
Script:
#!/bin/bash
# Check the test file and its routing implementation
rg -l "useParams.*orgId" --type tsx
# Look for router setup and navigation logic
rg -l "BrowserRouter|Routes|Route" --type tsx
# Check for other test files that mock react-router-dom
rg -l "vi\.mock.*react-router-dom" --type tsx
Length of output: 217
Script:
#!/bin/bash
# Check the test file and its routing implementation
rg -l "useParams.*orgId"
# Look for router setup and navigation logic
rg -l "BrowserRouter|Routes|Route"
# Check for other test files that mock react-router-dom
rg -l "vi\.mock.*react-router-dom"
# Look for the actual component implementation
fd "AddOnEntry.tsx"
Length of output: 13242
Script:
#!/bin/bash
# Check the AddOnEntry component implementation
cat src/components/AddOn/core/AddOnEntry/AddOnEntry.tsx
# Check the test file content
cat src/components/AddOn/core/AddOnEntry/AddOnEntry.spec.tsx
Length of output: 12195
src/components/Venues/VenueModal.tsx (1)
165-165: Improve consistency in naming
Renaming the old close button class to styles.closeButton is consistent with your global styling adoption. Just ensure all references are updated across your codebase, especially if multiple modals rely on a similarly named closeButton style.
src/screens/OrganizationVenues/OrganizationVenues.tsx (3)
4-4: Transition to a unified styling approach
Importing from "../../style/app.module.css" indicates a shift to a centralized styling strategy. Ensure that related components or style rules are updated accordingly so that styling remains consistent throughout the application.
150-150: Added custom input styling
You applied styles.inputField to the Form.Control component. Verify that any custom styling (e.g., borders, spacing, colors) matches the design guidelines while preserving accessibility for users.
✅ Verification successful
Let me gather information about the styling to verify the concern.
Based on the shell script results, I can see the styling definition for .inputField in the OrganizationVenues styles:
.inputField {
margin-top: 10px;
margin-bottom: 10px;
background-color: white;
box-shadow: 0 1px 1px #31bb6b;
}The custom styling appears to follow the project's style guidelines:
- It uses CSS modules (styles.inputField) as required
- The styling is minimal and consistent with the project's color scheme (#31bb6b is used throughout)
- The properties (margin, background-color, box-shadow) are standard and don't override any critical accessibility features
- The styling maintains proper spacing with 10px margins
Custom styling follows guidelines and maintains accessibility
The applied styles.inputField class follows the project's CSS module pattern and implements subtle, accessible styling that enhances visual hierarchy without compromising usability.
🏁 Scripts executed
The following scripts were executed for the analysis:
Error: No shell scripts found
Script:
#!/bin/bash
# Check the styles file content
fd -e scss -e css -e module.scss -e module.css OrganizationVenues --exec cat {}
# Look for any design system or theme files that might contain global styles
fd -e ts -e tsx -e js -e jsx "theme|styles|design" --exec cat {}
# Check if there are any style guidelines or documentation
fd "README|STYLE|DESIGN" --exec cat {}
Length of output: 30611
172-172: Dropdown styling check
className={styles.dropdown} replaces default or Bootstrap styling. Confirm that the new class does not conflict with existing layouts or introduce visual regressions.
✅ Verification successful
Let me gather information about the styling to verify potential conflicts.
Let me check the specific dropdown styles in the relevant CSS module file.
Based on the analysis of the CSS files, I can now generate the final response:
Dropdown styling is properly implemented
The styles.dropdown class is defined in both the component's module CSS and app.module.css with consistent styling. The implementation:
- Uses CSS modules to prevent style conflicts
- Maintains consistent styling with other dropdowns in the application
- Properly handles hover and focus states
- Follows the application's design system with defined colors and borders
🏁 Scripts executed
The following scripts were executed for the analysis:
Error: No shell scripts found
Script:
#!/bin/bash
# First, let's find the styles file that contains the dropdown class
fd -e scss -e css -e module.scss -e module.css | xargs rg "\.dropdown"
# Also check for any other dropdown-related styles that might conflict
rg "dropdown" -t css -t scss
# Let's also see the component file content for context
cat src/screens/OrganizationVenues/OrganizationVenues.tsx
Length of output: 17658
Script:
#!/bin/bash
# Let's see the specific dropdown styles in both the component's module CSS and the app module CSS
cat src/screens/OrganizationVenues/OrganizationVenues.module.css
cat src/style/app.module.css
Length of output: 29066
src/screens/OrganizationFunds/FundModal.tsx (2)
5-5: Refactored path to app.module.css
Switching from a local module file to a global app.module.css fosters consistency. Double-check that no specialized rules from the old file are lost.
275-275: More descriptive button styling
className={styles.addButton} is clearer than a generic naming approach. Validate that the styling aligns well with your brand’s guidelines for primary actions (color, hover, focus states).
src/components/AddOn/core/AddOnStore/AddOnStore.test.tsx (1)
25-29: New interface for plugin objects
Declaring InterfacePlugin is advantageous for better type safety. Verify usage consistency across the test suite and ensure all plugin objects match the declared shape.
src/screens/Requests/Requests.spec.tsx (1)
23-50: Mocking localStorage and window location
Stubbing localStorage and defining window.location ensures stable test behavior. Confirm that the stubs are reset or restored after tests to avoid potential cross-test pollution.
src/screens/Requests/Requests.tsx (3)
16-16: Use of unified styles.
Importing from a centralized app.css file fosters more consistent styling across multiple screens. This approach helps reduce duplication and ensures uniform UI elements.
234-237: Good use of Bootstrap utility classes.
Appending gap-4 and flex-wrap classes can enhance layout control and responsiveness. Continue to ensure these classes do not conflict with custom styling from the CSS modules.
238-238: Consistent spacing.
Adding "mb-1" helps maintain spacing consistency with other elements. Keep an eye out for any potential overlap or misalignment when used in conjunction with the inputField class.
src/screens/UserPortal/Donate/Donate.spec.tsx (4)
1-6: Informative JSDoc block.
Providing high-level documentation about test file purpose is a good practice. Keep the doc block updated if new scenarios are tested.
11-11: Migration to Vitest.
Switching to 'vi' from 'jest' is consistent with the broader test framework migration. Ensure all test utilities align with Vitest (e.g., vi.mock, vi.spyOn).
146-149: Refactored toast mocking.
This ensures that error and success calls are tracked correctly. Confirm that all relevant toast variants (info, warning, etc.) are handled if used in other test cases.
169-169: Clearing mocks.
Using vi.clearAllMocks() helps maintain a pristine environment between test cases. Double-check for any additional teardown steps needed (e.g., localStorage).
src/screens/OrganizationFunds/OrganizationFunds.tsx (3)
17-17: Global styling import.
Moving to a centralized styling approach unifies UI design and fosters maintainability. Verify removal of any unused module CSS imports to keep the file lean.
274-274: Consistent button styling.
Using styles.editButton fosters uniform button styles. Ensure consistent naming across the codebase to reduce confusion.
341-341: Create button styling.
Replaces variant usage with a custom class. This is beneficial for design consistency. Keep verifying that default button states (hover, focus) are clearly defined.
src/screens/UserPortal/Campaigns/Campaigns.spec.tsx (8)
23-23: Migrate from Jest to Vitest Confirmed
No functional issues are spotted. This update aligns with the required testing framework change.
30-34: Mocking with Vitest
The mocking of “react-toastify” using Vitest’s “vi.mock” works correctly.
39-44: Refined DateTimePicker Mock
Good approach to import the actual module and re-export the DesktopDateTimePicker. This ensures consistent behavior across tests.
109-118: Router Mocking
Mocking “react-router-dom” for URL parameters is correct and consistent with Vitest.
122-122: Clear All Mocks
Using vi.clearAllMocks() properly handles the new mocking approach in Vitest.
152-156: Conditional Unmock
The call to vi.unmock('react-router-dom') for testing fallback URLs is a valid approach to restore real routing behavior.
Line range hint 225-229: Dropdown Toggles
Switching to “createButton” and “dropdownItem” classes is consistent with the new style patterns. This aids in maintaining uniform styling throughout the project.
Also applies to: 236-236, 244-244, 254-258, 268-268, 275-275
Line range hint 304-308: Custom Table Styling
Applying “styles.custom_table” to the
src/screens/BlockUser/BlockUser.tsx (1)
17-17: Centralized Styles
Importing “app.module.css” aligns with the new global styling structure. This helps reduce scattered CSS files.
src/screens/OrganizationDashboard/OrganizationDashboard.tsx (2)
34-34: Use of Global Styles
Switching from a local “OrganizationDashboard.module.css” to the shared “style/app.module.css” organizes CSS better.
Also applies to: 44-44
302-302: Container Body Class Updates
Reusing “styles.containerBody” fosters a standard layout style across the application. This improves maintainability by centralizing styling in one place.
Also applies to: 344-344, 395-395, 438-441
src/screens/OrganizationActionItems/OrganizationActionItems.tsx (1)
369-370: Button Container & Search Field
Removing extra spacing classes (e.g., “gap-4”) and adjusting the search button’s tabIndex can yield a tidier layout. No conflicts identified.
Also applies to: 386-386, 390-390
src/screens/OrgList/OrgList.tsx (7)
30-30: Consistent style import looks good.
This maintains uniformity in how styles are handled across the codebase.
52-52: Inline arrow function for toggling dialogs.
The toggle function is concise and clear, making for easy toggling of modal visibility.
338-338: No functional change, purely cosmetic.
Switching from a template literal to a simple string is acceptable.
347-347: Button re-styling with CSS modules.
Switching to a module-based class name keeps styling consistent. Looks good.
362-362: Dropdown style hooked to CSS modules.
This aligns with the new styling pattern and helps keep the code modular.
529-529: Modal header style using modules.
Replacing a hard-coded class (e.g., bg-primary) with a module-based class ensures a consistent UI scheme.
546-546: Adopting CSS modules for plugin store link.
Great to see that the new classes maintain consistent styling across elements.
src/screens/OrgPost/OrgPost.tsx (10)
22-22: Switch to shared app.module.css.
Consolidating styles fosters uniformity across components. Ensure no leftover references to the old module remain.
293-293: Custom inputField class usage.
Using a dedicated style class helps keep the code base consistent and maintainable.
300-300: Search button styling.
The newly introduced className for the search button is consistent with the rest of the module-based approach.
313-313: Dropdown styling updated.
Using CSS modules for the dropdown improves maintainability and scoping.
349-349: Refining sort post dropdown styling.
Again, consistent with the new approach in styling.
375-375: Combined createButton and margin adjust.
Using existing module classes is simpler and ensures uniform styling.
417-417: Pagination: previous page button.
Utilizing module-based button styling keeps the appearance consistent with the rest of the app.
429-429: Pagination: next page button.
Similar consistency in styling. Good approach.
446-447: Modal header: removing extra color classes.
Switching to a simpler approach for the header can help keep the visual tidy and unify the code.
554-565: Adopting module classes for modal footer buttons.
Implementation properly decouples from bootstrap color classes, applying consistent styling sitewide.
src/components/Advertisements/Advertisements.test.tsx (1)
464-464: Verifying correct date element index.
Ensure that accessing date[0] aligns with the intended test condition for completed campaigns. If additional date elements are present, consider clarifying which one is tested.
✅ Verification successful
Let me gather more information about the date elements and test context to verify this concern.
Let me gather more context about the test implementation and the date elements.
Let me fix the regex and try one more search to understand how the test ID is used in the component.
Let me try one final search with a corrected pattern to find the test ID usage.
Using index [0] is correct as there are two date elements per advertisement entry
The code inspection reveals that each AdvertisementEntry component renders two date elements with the same test ID 'Ad_end_date':
- Start date:
<Card.Text data-testid="Ad_end_date">Starts on {startDate?.toDateString()}</Card.Text> - End date:
<Card.Text data-testid="Ad_end_date">Ends on {endDate?.toDateString()}</Card.Text>
Since the test is accessing the first element with date[0], it's consistently getting the start date of the advertisement, which is the intended behavior. The index usage is correct and aligned with the component's structure.
🏁 Scripts executed
The following scripts were executed for the analysis:
Error: No shell scripts found
Script:
#!/bin/bash
# First, let's look at the test file content around this line for context
rg -B 5 -A 5 "const dateString = date\[0\]" src/components/Advertisements/Advertisements.test.tsx
# Let's also search for other date-related patterns in the test file
rg "date\[" src/components/Advertisements/Advertisements.test.tsx
# Let's see the component implementation for date-related elements
ast-grep --pattern 'const $_ = $$.date'
Length of output: 582
Script:
#!/bin/bash
# Let's find the test case setup and the testid usage
rg -B 10 -A 2 "findAllByTestId\('Ad_end_date'\)" src/components/Advertisements/Advertisements.test.tsx
# Let's also check how this testid is used in the component
rg "data-testid=[\'\"]Ad_end_date" src/components/Advertisements/
# Let's see if there are multiple date elements rendered
ast-grep --pattern 'data-testid="Ad_end_date"'
Length of output: 677
Script:
#!/bin/bash
# Search for the test ID in the component with fixed regex
rg "data-testid=(\"|\')Ad_end_date" src/components/Advertisements/Advertisements.tsx
# Let's also see the test case description for context
rg -B 5 "it\(" src/components/Advertisements/Advertisements.test.tsx
Length of output: 877
Script:
#!/bin/bash
# Search for the test ID with a simpler pattern
rg -B 5 -A 5 'Ad_end_date' src/components/Advertisements/
# Look for the specific test case where this date check is happening
rg -B 15 -A 5 'const dateString = date\[0\]' src/components/Advertisements/Advertisements.test.tsx
Length of output: 3395
src/screens/LoginPage/LoginPage.tsx (5)
199-199: reCAPTCHA check before signup.
Good approach to ensure the reCAPTCHA verification is performed early. This avoids unnecessary processing if the user fails verification.
283-283: reCAPTCHA check before login.
Similarly, verifying the token upfront is a good security measure.
440-440: Email button next to input.
The inlined button icon is a nice UX improvement. Steering styling through CSS modules is consistent with other adjustments.
501-501: Dedicated login button style.
Adopting a custom CSS module class instead of relying solely on Bootstrap classes ensures consistent branding.
514-514: Register button style.
Provides a neat visual distinction between primary and secondary actions on the login page.
src/components/LoginPortalToggle/LoginPortalToggle.module.css (1)
27-27: LGTM! Clean transition to CSS variables
The changes properly implement the new CSS variable system while maintaining the existing transition effects for a smooth user experience.
Also applies to: 32-32
public/locales/hi/errors.json (1)
11-15: LGTM! Well-structured error messages.
The new Hindi error messages are properly formatted and provide clear validation feedback for:
- Phone number validation
- Education grade selection
- Employment status selection
- Marital status selection
- Form submission errors (400)
Let's verify consistency with other language files:
✅ Verification successful
Perfect consistency across all language files ✓
The verification confirms that all error message keys (invalidPhoneNumber, invalidEducationGrade, invalidEmploymentStatus, invalidMaritalStatus, error400) are present and consistently structured across all language files (en, fr, sp, zh). The Hindi translations maintain parity with other language files in terms of available error messages.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Check if these error keys exist in all language files
for lang in en fr sp zh; do
echo "Checking $lang translations..."
jq -r 'keys' "public/locales/$lang/errors.json"
done
Length of output: 1787
src/components/Advertisements/core/AdvertisementRegister/AdvertisementRegister.module.css (1)
10-11: LGTM! Improved button icon styling.
The changes improve button aesthetics by:
- Using
min-contentheight for proper icon scaling - Reducing right margin from 8px to 4px for better icon-text spacing
src/components/Advertisements/Advertisements.module.css (2)
4-10: LGTM! Well-structured grid layout.
The .listBox class implements a responsive 6-column grid with appropriate spacing.
26-30: LGTM! Clean grid container implementation.
The .justifysp class provides a good foundation for grid-based layouts.
src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.module.css (1)
23-23: Verify media content display with reduced height
The height reduction from 20rem to 16rem might affect the aspect ratio of media content. Please ensure that:
- Content isn't being cropped
- Images maintain proper aspect ratios
✅ Verification successful
Let me gather information about the advertisement component and its media handling to verify the concern about content cropping and aspect ratios.
Let me check the actual implementation of AdvertisementEntry component and its media handling to understand how the height change might affect the content.
Height change is safe due to object-fit implementation
The height reduction from 20rem to 16rem is safe because:
- The
.admediaclass usesobject-fit: coverwhich ensures images and videos maintain their aspect ratios without cropping important content - The component handles both images (
Card.Img) and videos with the same CSS class, applying consistent sizing - The media container is part of a responsive Bootstrap grid system (
RowandColcomponents) that adapts to different screen sizes
🏁 Scripts executed
The following scripts were executed for the analysis:
Error: No shell scripts found
Script:
#!/bin/bash
# Search for related CSS files and JSX/TSX components
fd -e css -e jsx -e tsx . -x grep -l "admedia\|advertisement" {}
# Look for image/media handling in the Advertisement components
rg -l "img|image|media" --type=tsx --type=jsx src/components/Advertisements
# Check for any responsive design implementations
rg "(max-width|min-width)" src/components/Advertisements
Length of output: 1148
Script:
#!/bin/bash
# Check the AdvertisementEntry component implementation
cat src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.tsx
# Check the complete CSS module to understand the context of height change
cat src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.module.css
Length of output: 8792
.github/workflows/codeql-codescan.yml (1)
35-35: LGTM! CodeQL actions updated to latest major version
The upgrade to v3 for all CodeQL actions is a good practice that ensures access to the latest security features and improvements.
Also applies to: 41-41, 44-44
src/components/AddOn/core/AddOnStore/AddOnStore.module.css (1)
49-71: LGTM! Well-implemented responsive grid layout
The grid layout with media queries is well-structured and properly handles responsive design:
- Uses grid template columns for larger screens
- Switches to single column on mobile
- Maintains proper spacing and alignment
.github/workflows/stale.yml (1)
28-28: Consider GitHub API rate limits with increased operations
The changes look good, but increasing operations-per-run from 30 to 50 might impact API rate limits if there are many stale issues/PRs. Please verify:
- The repository's typical stale issue/PR volume
- GitHub API rate limit headroom
Also applies to: 43-43
✅ Verification successful
Increasing operations-per-run is safe for API limits
The increased operations limit (50) is safe based on the evidence:
- High volume of issues (1000+) and PRs (1000+) with significant stale items (100 issues, 35 PRs)
- Stale workflow has been running successfully without any failures
- Consistent execution times (15-25s) indicate no rate limiting issues
- Daily scheduled runs provide sufficient spacing between API calls
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Check current stale issues and PRs count
echo "Stale Issues and PRs count:"
gh issue list --label "no-issue-activity" --state all --limit 100 | wc -l
gh pr list --label "no-pr-activity" --state all --limit 100 | wc -l
Length of output: 213
Script:
#!/bin/bash
# Check total issues and PRs count to understand the proportion of stale ones
echo "Total Issues and PRs count:"
gh issue list --state all --limit 1000 | wc -l
gh pr list --state all --limit 1000 | wc -l
# Check stale workflow history to see if there were any failures or rate limit issues
gh run list --workflow stale.yml --limit 10
Length of output: 1625
.github/pull_request_template.md (1)
47-55: LGTM! Great improvements to the PR template
The new checklist sections for CodeRabbit AI review and test coverage are excellent additions that will help maintain code quality. They provide clear expectations for contributors.
.github/workflows/issue.yml (1)
29-29: LGTM! Good practice to keep actions updated
The update to actions/github-script@v7 is a good practice for security and maintaining access to the latest features.
.github/workflows/pull-request-target.yml (1)
22-22: LGTM! Good updates to action version and parameter name
The update to v3 and the parameter rename to use kebab-case are good improvements.
Also applies to: 24-24
.eslintrc.json (1)
56-56: LGTM! Good addition of TypeScript linting rule.
Adding @typescript-eslint/no-unused-vars as an error will help maintain cleaner code by catching unused variables early in development.
package.json (1)
78-80: Ensure test migration strategy from Jest to Vitest
The addition of Vitest test scripts alongside existing Jest scripts suggests a gradual migration. Consider:
- Running both test suites in parallel during migration
- Documenting the migration strategy
- Updating CI/CD pipelines to accommodate both test runners
✅ Verification successful
Migration from Jest to Vitest is already in progress
The diff output shows that the codebase has already undergone significant migration from Jest (.spec.ts/tsx files) to Vitest (.test.ts/tsx files). There are:
- 12 remaining Jest spec files
- 186 Vitest test files
The migration appears to be nearly complete, with most test files already using the Vitest format. The parallel test runners setup in package.json is appropriate during this transition phase.
Recommendations:
- Complete migration of remaining spec files:
- src/Constant/constant.spec.ts
- src/components/AddOn/AddOn.spec.tsx
- src/components/Avatar/Avatar.spec.tsx
- src/screens/* (8 spec files)
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Check for existing Jest test files and compare with Vitest
echo "Checking test files..."
rg -g "*.spec.{ts,tsx}" "describe|test|it" -l | sort > jest_files.txt
rg -g "*.test.{ts,tsx}" "describe|test|it" -l | sort > vitest_files.txt
diff jest_files.txt vitest_files.txt
Length of output: 11691
src/components/Advertisements/Advertisements.tsx (1)
116-120: 🛠️ Refactor suggestion
Improve tab configuration and fix spelling
Two issues need attention:
- "archievedAds" is set as the default tab, which is counter-intuitive as users typically want to see active ads first
- Spelling inconsistency: "archievedAds" should be "archivedAds"
Apply this fix:
-defaultActiveKey="archievedAds"
+defaultActiveKey="activeAds"
-eventKey="archievedAds"
+eventKey="archivedAds"Likely invalid or redundant comment.
.github/workflows/pull-request.yml (1)
381-398: 🛠️ Refactor suggestion
Fix shell script quoting in health check
The health check script has potential issues with shell globbing and word splitting.
Apply proper quoting:
- while ! nc -z localhost ${port} && [ $timeout -gt 0 ]; do
+ while ! nc -z localhost "${port}" && [ "${timeout}" -gt 0 ]; doLikely invalid or redundant comment.
🧰 Tools
🪛 actionlint (1.7.4)
381-381: shellcheck reported issue in this script: SC2086:info:3:35: Double quote to prevent globbing and word splitting
(shellcheck)
381-381: shellcheck reported issue in this script: SC2086:info:10:6: Double quote to prevent globbing and word splitting
(shellcheck)
src/screens/LoginPage/LoginPage.module.css (1)
75-86: Verify parent element positioning for absolute positioning
The .email_button class uses absolute positioning which requires its parent element to have position: relative to work correctly.
✅ Verification successful
Let me check the parent container's positioning in the LoginPage component.
Let me check the entire LoginPage.module.css file to find the parent container's styles.
Let me check the JSX file to understand where this email_button is being used and its parent container.
Let me check the complete context of where the email_button is being used in the LoginPage component.
Let me check the parent div's styling to ensure proper positioning context.
Let me try a different approach to find the parent container's structure.
Let me try one final approach to check the form structure.
Position relative is properly set on parent container
The .email_button class is used within a div that has className="position-relative", which provides the correct positioning context for the absolute positioning. The implementation is correct and follows best practices:
<div className="position-relative">
<Form.Control ... />
<Button tabIndex={-1} className={styles.email_button}>
<EmailOutlinedIcon />
</Button>
</div>🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Search for parent element's CSS to verify positioning
rg -l "position:\s*relative" --type css
Length of output: 2901
Script:
#!/bin/bash
# Check the content of LoginPage.module.css to find the parent container
rg -A 5 "email_button" src/screens/LoginPage/LoginPage.module.css
Length of output: 159
Script:
#!/bin/bash
# Get the full content of LoginPage.module.css
cat src/screens/LoginPage/LoginPage.module.css
Length of output: 4583
Script:
#!/bin/bash
# Search for email_button usage in LoginPage component
rg -A 5 "email_button" src/screens/LoginPage/
Length of output: 1359
Script:
#!/bin/bash
# Get more context around the email_button usage
rg -B 5 -A 5 "email_button" src/screens/LoginPage/LoginPage.tsx
Length of output: 965
Script:
#!/bin/bash
# Get the complete Form.Control component and its parent div context
rg -B 10 -A 10 "Form\.Control.*autoComplete=\"username\"" src/screens/LoginPage/LoginPage.tsx
Length of output: 93
Script:
#!/bin/bash
# Search for Form.Control usage in the login component with different quotes
rg -B 10 -A 10 "Form\.Control.*username" src/screens/LoginPage/LoginPage.tsx
Length of output: 78
Script:
#!/bin/bash
# Get a broader context around the email button to understand the form structure
rg -B 15 -A 15 "<Form" src/screens/LoginPage/LoginPage.tsx
Length of output: 9726
| } else if ( | ||
| val.pluginName | ||
| ?.toLowerCase() | ||
| .includes(searchText.toLowerCase()) | ||
| ) { | ||
| return val; | ||
| } | ||
| }, | ||
| ).length === 0 ? ( | ||
| <h4>{t('pMessage')} </h4> | ||
| ) : ( | ||
| data.getPlugins | ||
| .filter( | ||
| (plugin: any) => !plugin.uninstalledOrgs.includes(orgId), | ||
| ) | ||
| .filter( | ||
| (val: { | ||
| _id: string; | ||
| pluginName: string | undefined; | ||
| pluginDesc: string | undefined; | ||
| pluginCreatedBy: string; | ||
| pluginInstallStatus: boolean | undefined; | ||
| getInstalledPlugins: () => any; | ||
| }) => { | ||
| if (searchText == '') { | ||
| return val; | ||
| } else if ( | ||
| val.pluginName | ||
| ?.toLowerCase() | ||
| .includes(searchText.toLowerCase()) | ||
| ) { | ||
| return val; | ||
| } | ||
| }, | ||
| ) | ||
| .map( | ||
| ( | ||
| plug: { | ||
| _id: string; | ||
| pluginName: string | undefined; | ||
| pluginDesc: string | undefined; | ||
| pluginCreatedBy: string; | ||
| uninstalledOrgs: string[]; | ||
| pluginInstallStatus: boolean | undefined; | ||
| getInstalledPlugins: () => any; | ||
| }, | ||
| i: React.Key | null | undefined, | ||
| ): JSX.Element => ( | ||
| <AddOnEntry | ||
| id={plug._id} | ||
| key={i} | ||
| title={plug.pluginName} | ||
| description={plug.pluginDesc} | ||
| createdBy={plug.pluginCreatedBy} | ||
| // isInstalled={plug.pluginInstallStatus} | ||
| // configurable={plug.pluginInstallStatus} | ||
| component={'Special Component'} | ||
| modified={true} | ||
| getInstalledPlugins={getInstalledPlugins} | ||
| uninstalledOrgs={plug.uninstalledOrgs} | ||
| /> | ||
| ), | ||
| ) | ||
| )} | ||
| </Tab> | ||
| </Tabs> | ||
| </div> | ||
| </Col> | ||
| <div className={styles.justifysp}> | ||
| {(() => { | ||
| const installedPlugins = (data?.getPlugins || []).filter( | ||
| (plugin) => !plugin.uninstalledOrgs.includes(orgId ?? ''), | ||
| ); | ||
| const filteredPlugins = filterPlugins( | ||
| installedPlugins, | ||
| searchText, | ||
| ); | ||
|
|
||
| if (filteredPlugins.length === 0) { | ||
| return <h4>{t('pMessage')}</h4>; | ||
| } | ||
|
|
||
| return filteredPlugins.map((plug, i) => ( | ||
| <div className={styles.cardGridItem} key={i}> | ||
| <AddOnEntry | ||
| id={plug._id} | ||
| title={plug.pluginName} | ||
| description={plug.pluginDesc} | ||
| createdBy={plug.pluginCreatedBy} | ||
| component={'Special Component'} | ||
| modified={true} | ||
| getInstalledPlugins={getInstalledPlugins} | ||
| uninstalledOrgs={plug.uninstalledOrgs} | ||
| /> | ||
| </div> | ||
| )); | ||
| })()} | ||
| </div> | ||
| </Tab> | ||
| </Tabs> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Duplicate logic in installed tab.
The installed plugins rendering mirrors the available tab’s approach. Extract shared functionalities to a reusable function to adhere to DRY.
| const { data, loading } = useQuery<{ getPlugins: InterfacePluginHelper[] }>( | ||
| PLUGIN_GET, | ||
| ); |
There was a problem hiding this comment.
💡 Codebase verification
Based on the search results, I can now generate the final response as I have enough information to verify the concern. The code shows that other components in the codebase do handle error states from useQuery, but this component doesn't.
Add error handling to the useQuery hook
The component only handles the loading state but not potential query errors. Other components in the codebase (like OrgProfileFieldSettings, EventAttendance) properly destructure the error state from useQuery. Consider:
- Destructure the error state:
const { data, loading, error } = useQuery<...> - Add error handling UI similar to how loading state is handled
🔗 Analysis chain
Handle query errors or empty data states.
Currently you only check 'loading'; ensure error states are handled or displayed to the user.
Let me gather more information about how errors are handled in this component and related files.
🏁 Scripts executed
The following scripts were executed for the analysis:
Error: No shell scripts found
Script:
#!/bin/bash
# First, let's look at the complete AddOnStore.tsx file to understand the context
fd "AddOnStore.tsx" --exec cat {}
# Let's also search for any error handling patterns in the codebase
ast-grep --pattern 'useQuery<$_>($_, {
$$$
onError: $_,
$$$
})'
# Check for error state handling in components
rg "error\s*[}|,].*useQuery" -A 2
Length of output: 9960
| # CORS should be made strict before deployment (currently allows access from any origin) | ||
| add_header Access-Control-Allow-Origin *; |
There was a problem hiding this comment.
CORS wildcard can be a potential security risk.
In production, limit Access-Control-Allow-Origin to known domains to protect your backend from unauthorized requests.
| })), | ||
| })); | ||
|
|
||
| describe('Testing AddOn component', () => { |
There was a problem hiding this comment.
💡 Codebase verification
Edge cases need to be tested for props validation and error handling
The current test suite only covers basic rendering scenarios. Based on the component implementation, the following test cases are missing:
- Testing with invalid
extrasprop type - Testing with invalid
nameprop type - Testing with undefined/null props
- Testing with empty objects in
extras.componentsandextras.actions
🔗 Analysis chain
Include edge-case coverage.
Additional negative or error-condition tests might strengthen confidence in the component’s reliability.
Let me check the test coverage and test cases in the AddOn component to verify if edge cases are missing.
🏁 Scripts executed
The following scripts were executed for the analysis:
Error: No shell scripts found
Script:
#!/bin/bash
# First, let's see the full test file content
cat src/components/AddOn/AddOn.spec.tsx
# Also check the component implementation to understand what scenarios should be tested
cat src/components/AddOn/AddOn.tsx
Length of output: 3258
| @@ -81,15 +81,13 @@ describe('Testing OrganizationScreen', () => { | |||
| fireEvent.click(closeButton); | |||
|
|
|||
| // Check for contract class after closing | |||
| expect(screen.getByTestId('mainpageright')).toHaveClass('_expand_ccl5z_8'); | |||
| expect(screen.getByTestId('mainpageright')).toHaveClass(styles.expand); | |||
There was a problem hiding this comment.
Check toggle logic.
The comment indicates we’re expecting the “contract” class, but the test asserts styles.expand. Verify that the class used matches the intended behavior (contract vs. expand).
-expect(screen.getByTestId('mainpageright')).toHaveClass(styles.expand);
+expect(screen.getByTestId('mainpageright')).toHaveClass(styles.contract);Committable suggestion skipped: line range outside the PR's diff.
| <div className={styles.input}> | ||
| <Form.Control | ||
| type="name" | ||
| id="searchname" | ||
| className={styles.actioninput} | ||
| placeholder={'Search..'} | ||
| autoComplete="off" | ||
| required | ||
| // onChange={(e): void => setSearchText("search")} | ||
| /> |
There was a problem hiding this comment.
Implement the commented out search functionality
The search input field is present but the functionality is not implemented as the onChange handler is commented out. This could lead to user confusion.
Would you like me to help implement the search functionality? I can provide a solution that includes:
- State management for search text
- Filtering logic for advertisements
- Proper error handling
| @@ -224,7 +228,7 @@ | |||
| (ad: Ad) => new Date(ad.endDate) < new Date(), | |||
| ).length !== 0 && ( | |||
| <div className={'w-100 text-center my-4'}> | |||
| <h5 className="m-0 ">{tCommon('endOfResults')}</h5> | |||
| <h5 className="m-0 ">{t('endOfResults')}</h5> | |||
There was a problem hiding this comment.
🛠️ Refactor suggestion
Maintain consistency in translation key usage
The archived tab uses t('endOfResults') while the active tab uses tCommon('endOfResults'). This inconsistency could lead to different messages being displayed.
Choose one approach and apply it consistently:
-<h5 className="m-0 ">{t('endOfResults')}</h5>
+<h5 className="m-0 ">{tCommon('endOfResults')}</h5>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <h5 className="m-0 ">{t('endOfResults')}</h5> | |
| <h5 className="m-0 ">{tCommon('endOfResults')}</h5> |
| uses: VeryGoodOpenSource/very_good_coverage@v3 | ||
| with: | ||
| path: "./coverage/lcov.info" | ||
| min_coverage: 95.0 | ||
| min_coverage: 0.0 |
There was a problem hiding this comment.
Critical: Coverage threshold set to 0%
Setting min_coverage to 0.0 effectively disables the code coverage requirements. This could lead to untested code being merged into the codebase.
Consider maintaining a reasonable coverage threshold (e.g., 80-95%) to ensure code quality.
- min_coverage: 0.0
+ min_coverage: 95.0📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| uses: VeryGoodOpenSource/very_good_coverage@v3 | |
| with: | |
| path: "./coverage/lcov.info" | |
| min_coverage: 95.0 | |
| min_coverage: 0.0 | |
| uses: VeryGoodOpenSource/very_good_coverage@v3 | |
| with: | |
| path: "./coverage/lcov.info" | |
| min_coverage: 95.0 |
| ````bash | ||
| docker build -t talawa-admin . | ||
| ```bash | ||
|
|
||
| 3. Run the Docker container: | ||
|
|
||
| After the build is complete, run the Docker container using this command: | ||
|
|
||
| ```bash | ||
| docker run -p 4321:4321 talawa-admin | ||
| ```bash | ||
|
|
||
| The application will be accessible at `http://localhost:4321` |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Fix code block formatting in Docker installation section
There are several formatting issues in the Docker installation instructions:
- Incorrect backtick usage
- Duplicate closing tags
Apply these fixes:
-````bash
-docker build -t talawa-admin .
-```bash
+```bash
+docker build -t talawa-admin .
+```
-```bash
-docker run -p 4321:4321 talawa-admin
-```bash
+```bash
+docker run -p 4321:4321 talawa-admin
+```| --table-head-bg: var(--bs-primary, blue); | ||
| /* Assuming var(--bs-primary) is defined elsewhere */ | ||
| --table-head-color: white; | ||
| --table-header-color: var(--bs-greyish-black, black); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Fix inconsistent variable references
The table head background color references a potentially undefined variable and includes an unnecessary comment.
Apply this fix:
- --table-head-bg: var(--bs-primary, blue);
- /* Assuming var(--bs-primary) is defined elsewhere */
- --table-head-color: white;
- --table-header-color: var(--bs-greyish-black, black);
+ --table-head-bg: var(--bs-primary);
+ --table-head-color: var(--bs-white);
+ --table-head-text-color: var(--bs-greyish-black);📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| --table-head-bg: var(--bs-primary, blue); | |
| /* Assuming var(--bs-primary) is defined elsewhere */ | |
| --table-head-color: white; | |
| --table-header-color: var(--bs-greyish-black, black); | |
| --table-head-bg: var(--bs-primary); | |
| --table-head-color: var(--bs-white); | |
| --table-head-text-color: var(--bs-greyish-black); |
|
Please fix the conflicting files and ensure coderabbit.ai approves the changes |
What kind of change does this PR introduce?
Issue Number:
Fixes #2352
Did you add tests for your changes?
Snapshots/Videos:
If relevant, did you update the documentation?
Summary
Does this PR introduce a breaking change?
Other information
Have you read the contributing guide?
Summary by CodeRabbit
New Features
Bug Fixes
Documentation
Tests
Chores