From 4b1af58cd4cfb41d316cf84646de06213281b413 Mon Sep 17 00:00:00 2001 From: Dhiren-Mhatre Date: Tue, 31 Dec 2024 20:09:22 +0530 Subject: [PATCH 1/6] refactor/VolunteerViewModal-css-#2893 --- .../Volunteers/VolunteerViewModal.tsx | 62 +++++++--------- src/style/app.module.css | 73 +++++++++++++++++++ 2 files changed, 100 insertions(+), 35 deletions(-) diff --git a/src/screens/EventVolunteers/Volunteers/VolunteerViewModal.tsx b/src/screens/EventVolunteers/Volunteers/VolunteerViewModal.tsx index 830bacf8cc..96d58ca614 100644 --- a/src/screens/EventVolunteers/Volunteers/VolunteerViewModal.tsx +++ b/src/screens/EventVolunteers/Volunteers/VolunteerViewModal.tsx @@ -52,22 +52,22 @@ const VolunteerViewModal: React.FC = ({ const { user, hasAccepted, hoursVolunteered, groups } = volunteer; return ( - + -

{t('volunteerDetails')}

+

{t('volunteerDetails')}

 -
+ {/* Volunteer Name & Avatar */} - + = ({ src={user.image} alt="Volunteer" data-testid="volunteer_image" - className={styles.TableImages} + className={styles.tableImage} /> ) : (
= ({ {/* Status and hours volunteered */} - + = ({ startAdornment: ( <> {hasAccepted ? ( - + ) : ( - + )} ), - style: { - color: hasAccepted ? 'green' : '#ed6c02', - }, - }} - inputProps={{ - style: { - WebkitTextFillColor: hasAccepted ? 'green' : '#ed6c02', - }, + className: hasAccepted + ? styles.acceptedStatus + : styles.pendingStatus, }} disabled /> @@ -134,7 +132,7 @@ const VolunteerViewModal: React.FC = ({ @@ -142,13 +140,7 @@ const VolunteerViewModal: React.FC = ({ {/* Table for Associated Volunteer Groups */} {groups && groups.length > 0 && ( - + Volunteer Groups Joined @@ -160,9 +152,13 @@ const VolunteerViewModal: React.FC = ({ - Sr. No. - Group Name - + + Sr. No. + + + Group Name + + No. of Members @@ -171,12 +167,7 @@ const VolunteerViewModal: React.FC = ({ {groups.map((group, index) => { const { _id, name, volunteers } = group; return ( - + {index + 1} @@ -199,4 +190,5 @@ const VolunteerViewModal: React.FC = ({ ); }; + export default VolunteerViewModal; diff --git a/src/style/app.module.css b/src/style/app.module.css index 65e80a2ddd..e2e92a1e07 100644 --- a/src/style/app.module.css +++ b/src/style/app.module.css @@ -4117,3 +4117,76 @@ button[data-testid='createPostBtn'] { overflow-y: scroll; overflow-x: hidden; } + +/* VolunteerViewModal.tsx */ + +.modalTitle { + margin: 0; +} + +.modalForm { + padding: 1rem; +} + +.formGroup { + margin-bottom: 1rem; +} + +.tableImage { + width: 40px; + height: 40px; + border-radius: 50%; + margin-right: 8px; +} + +.statusGroup { + display: flex; + gap: 1rem; + margin: 0 auto; + margin-bottom: 0.5rem; +} + +.statusIcon { + margin-right: 0.5rem; +} + +.acceptedStatus { + color: var(--bs-primary); + -webkit-text-fill-color: var(--bs-primary); + /* Add checkmark icon */ + &::before { + content: '✓'; + margin-right: 0.25rem; + } +} + +.pendingStatus { + color: var(--bs-warning); + -webkit-text-fill-color: var(--bs-warning); + /* Add clock icon */ + &::before { + content: '⏳'; + margin-right: 0.25rem; + } +} + +.hoursField { + width: 100%; +} + +.groupsLabel { + font-weight: lighter; + margin-left: 0.5rem; + margin-bottom: 0; + font-size: 0.8rem; + color: var(--bs-secondary); +} + +.tableHeader { + font-weight: bold; +} + +.tableRow:last-child td, +.tableRow:last-child th { + border: 0; +} From a61c6a7a7cab1ecfb235a4fb2ee8128421d982f0 Mon Sep 17 00:00:00 2001 From: Dhiren-Mhatre Date: Tue, 31 Dec 2024 20:29:44 +0530 Subject: [PATCH 2/6] added --bs-warning color variable --- src/style/app.module.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/style/app.module.css b/src/style/app.module.css index e2e92a1e07..7cc6590372 100644 --- a/src/style/app.module.css +++ b/src/style/app.module.css @@ -83,6 +83,7 @@ --search-button-bg: #a8c7fa; --search-button-border: var(--brown-color); --bs-primary: #0056b3; + --bs-warning: #ffc107; --bs-white: #fff; --bs-gray-600: #4b5563; --bs-gray-400: #9ca3af; From ab48cc7915028a083e1dbcb71de5dace947f9957 Mon Sep 17 00:00:00 2001 From: Aadhil Ahamed Date: Tue, 31 Dec 2024 21:36:08 +0530 Subject: [PATCH 3/6] Improved Code Coverage in src/components/UserPortal/OrganizationSidebar/OrganizationSidebar.tsx (#3096) * Improved Code Coverage in src/components/UserPortal/OrganizationSidebar/OrganizationSidebar.tsx * Unit test documentation --- .../OrganizationSidebar.spec.tsx | 59 +++++++++++++++++++ .../OrganizationSidebar.tsx | 2 - 2 files changed, 59 insertions(+), 2 deletions(-) diff --git a/src/components/UserPortal/OrganizationSidebar/OrganizationSidebar.spec.tsx b/src/components/UserPortal/OrganizationSidebar/OrganizationSidebar.spec.tsx index 2559eaae14..06ef53c6f6 100644 --- a/src/components/UserPortal/OrganizationSidebar/OrganizationSidebar.spec.tsx +++ b/src/components/UserPortal/OrganizationSidebar/OrganizationSidebar.spec.tsx @@ -24,6 +24,9 @@ import { vi } from 'vitest'; * 1. **Component renders properly when members and events lists are empty**: Verifies the correct display of "No Members to show" and "No Events to show" when both lists are empty. * 2. **Component renders properly when events list is not empty**: Tests that the events section is rendered correctly when events are available, and "No Events to show" is not displayed. * 3. **Component renders properly when members list is not empty**: Verifies the correct display of members when available, ensuring "No Members to show" is not displayed. + * 4. **Handles GraphQL errors properly**: Validates that the component properly handles GraphQL query errors by displaying appropriate fallback content ("No Members to show" and "No Events to show") when data fetching fails. + * 5. **Should show Loading state initially** : Checks that loading indicators are properly displayed while data is being fetched, verifying that "Loading..." text appears in both the members and events sections before data loads. + * 6. **Should render Member images properly** : Validates the correct rendering of member profile images, ensuring that default images are shown when no custom image is provided and that custom images are properly displayed when available. * * Mocked GraphQL queries simulate backend responses for members and events lists. */ @@ -175,4 +178,60 @@ describe('Testing OrganizationSidebar Component [User Portal]', () => { expect(screen.queryByText('No Members to show')).not.toBeInTheDocument(); expect(screen.queryByText('No Events to show')).toBeInTheDocument(); }); + + it('Handles GraphQL errors properly', async () => { + mockId = 'error'; + render( + + + + + + + + + , + ); + await wait(); + expect(screen.queryByText('No Members to show')).toBeInTheDocument(); + expect(screen.queryByText('No Events to show')).toBeInTheDocument(); + }); + + it('Should show Loading state initially', () => { + render( + + + + + + + + + , + ); + expect(screen.getAllByText('Loading...').length).toBe(2); + }); + + it('Should render Member images properly', async () => { + mockId = 'members'; + render( + + + + + + + + + , + ); + await wait(); + const images = screen.getAllByRole('img'); + expect(images).toHaveLength(2); + expect(images[0]).toHaveAttribute( + 'src', + expect.stringContaining('defaultImg.png'), + ); + expect(images[1]).toHaveAttribute('src', 'mockImage'); + }); }); diff --git a/src/components/UserPortal/OrganizationSidebar/OrganizationSidebar.tsx b/src/components/UserPortal/OrganizationSidebar/OrganizationSidebar.tsx index 796d30d568..0837f9e78d 100644 --- a/src/components/UserPortal/OrganizationSidebar/OrganizationSidebar.tsx +++ b/src/components/UserPortal/OrganizationSidebar/OrganizationSidebar.tsx @@ -80,7 +80,6 @@ export default function organizationSidebar(): JSX.Element { * * Sets the members state with the data from the query. */ - /* istanbul ignore next */ useEffect(() => { if (memberData) { setMembers(memberData.organizationsMemberConnection.edges); @@ -92,7 +91,6 @@ export default function organizationSidebar(): JSX.Element { * * Sets the events state with the data from the query. */ - /* istanbul ignore next */ useEffect(() => { if (eventsData) { setEvents(eventsData.eventsByOrganizationConnection); From 6371f56a781c22e3f80e308988f4c8a329db25ba Mon Sep 17 00:00:00 2001 From: Peter Harrison <16875803+palisadoes@users.noreply.github.com> Date: Tue, 31 Dec 2024 08:49:04 -0800 Subject: [PATCH 4/6] Update pull-request.yml --- .github/workflows/pull-request.yml | 1 + 1 file changed, 1 insertion(+) diff --git a/.github/workflows/pull-request.yml b/.github/workflows/pull-request.yml index 32fb5d5861..a8b944b334 100644 --- a/.github/workflows/pull-request.yml +++ b/.github/workflows/pull-request.yml @@ -80,6 +80,7 @@ jobs: echo "Source Branch ${{ github.event.pull_request.head.ref }}" echo "Target Branch ${{ github.event.pull_request.base.ref }}" echo "Error: Source and Target Branches are the same. Please ensure they are different." + echo "Error: Close this PR and try again." exit 1 Check-Sensitive-Files: From 3b92dc0e93105c42e3b90401df9b72d2966805fe Mon Sep 17 00:00:00 2001 From: Dhiren-Mhatre Date: Tue, 31 Dec 2024 22:59:58 +0530 Subject: [PATCH 5/6] Revert "Update pull-request.yml" This reverts commit 6371f56a781c22e3f80e308988f4c8a329db25ba. --- .github/workflows/pull-request.yml | 1 - 1 file changed, 1 deletion(-) diff --git a/.github/workflows/pull-request.yml b/.github/workflows/pull-request.yml index a8b944b334..32fb5d5861 100644 --- a/.github/workflows/pull-request.yml +++ b/.github/workflows/pull-request.yml @@ -80,7 +80,6 @@ jobs: echo "Source Branch ${{ github.event.pull_request.head.ref }}" echo "Target Branch ${{ github.event.pull_request.base.ref }}" echo "Error: Source and Target Branches are the same. Please ensure they are different." - echo "Error: Close this PR and try again." exit 1 Check-Sensitive-Files: From e1e38ea555d9c20f1b5dacca6d30a243697a5b10 Mon Sep 17 00:00:00 2001 From: Dhiren-Mhatre Date: Tue, 31 Dec 2024 23:08:23 +0530 Subject: [PATCH 6/6] added coderabbit's suggestions --- src/style/app.module.css | 17 +++++++---------- 1 file changed, 7 insertions(+), 10 deletions(-) diff --git a/src/style/app.module.css b/src/style/app.module.css index 7cc6590372..25e5c4b678 100644 --- a/src/style/app.module.css +++ b/src/style/app.module.css @@ -4145,6 +4145,7 @@ button[data-testid='createPostBtn'] { gap: 1rem; margin: 0 auto; margin-bottom: 0.5rem; + role: 'status'; } .statusIcon { @@ -4154,21 +4155,17 @@ button[data-testid='createPostBtn'] { .acceptedStatus { color: var(--bs-primary); -webkit-text-fill-color: var(--bs-primary); - /* Add checkmark icon */ - &::before { - content: '✓'; - margin-right: 0.25rem; - } + outline: 1px solid currentColor; + border-radius: 4px; + padding: 2px 4px; } .pendingStatus { color: var(--bs-warning); -webkit-text-fill-color: var(--bs-warning); - /* Add clock icon */ - &::before { - content: '⏳'; - margin-right: 0.25rem; - } + outline: 1px solid currentColor; + border-radius: 4px; + padding: 2px 4px; } .hoursField {