Fixes #1380 by simplifying the modal closure mechanism in the 'Manage Features' modal. #1393

harshpreet14 · 2024-01-06T20:14:50Z

What kind of change does this PR introduce?

This PR addresses issue #1380 by simplifying the modal closure mechanism in the 'Manage Features' modal in OrgList.tsx.

Changes Made:

Replaced the title div of the Modal with 'Modal Header', aligning it with other modals in the application for consistency.
Removed the 'Cancel' button and retained the 'X' icon for closing the modal.
Updated the OrgList.test.tsx file to reflect these changes by removing tests related to the 'CloseOrganizationModal' button.

Issue Number:
Fixes #1380

Did you add tests for your changes?
-Verified that - On clicking cross button the modal should close, on clicking outside the modal the modal should close, on pressing escape key on keyboard the modal should close.

No, there was no need for redundant tests for Modal Header.
Executed individual file tests using npm run test --watchAll=false /src/screens/OrgList/OrgList.test.tsx.
Measured code coverage for changes with npm run test -- --collectCoverageFrom="src/screens/OrgList/*" /src/screens/OrgList/OrgList.test.tsx.

Snapshots/Videos:
Before-

After-

OrgList.test.tsx -

Code coverage-

If relevant, did you update the documentation?
NA

Summary
Simplifies the modal interface, enhancing the overall user experience and reducing potential confusion.

Does this PR introduce a breaking change?

NA

Other information
If further tests are required for the specific modal in OrgList.tsx, please let me know, and I'll be more than happy to add them. Thank you for considering my contribution!

Have you read the contributing guide?

Yes

Addressed the issue of UI redundancy as discussed in Issue PalisadoesFoundation#1380. What: - Removed the 'Cancel' button, and added the 'Manage Features' header for the Modal leaving the 'X' icon as the sole close option. Impact: - Simplifies the modal interface, enhancing the overall user experience and reducing potential confusion. Tests: - Tested the individual file by running this command: `npm run test --watchAll=false /path/to/test/file` - Tested code coverage for this file with : `npm run test -- --collectCoverageFrom="src/screens/OrgList/*" /src/screens/OrgList/OrgList.test.tsx`

github-actions · 2024-01-06T20:15:21Z

Our Pull Request Approval Process

We have these basic policies to make the approval process smoother for our volunteer team.

Testing Your Code

Please make sure your code passes all tests. Our test code coverage system will fail if these conditions occur:

The overall code coverage drops below the target threshold of the repository
Any file in the pull request has code coverage levels below the repository threshold
Merge conflicts

The process helps maintain the overall reliability of the code base and is a prerequisite for getting your PR approved. Assigned reviewers regularly review the PR queue and tend to focus on PRs that are passing.

Reviewers

When your PR has been assigned reviewers contact them to get your code reviewed and approved via:

comments in this PR or
our slack channel

Reviewing Your Code

Your reviewer(s) will have the following roles:

arbitrators of future discussions with other contributors about the validity of your changes
point of contact for evaluating the validity of your work
person who verifies matching issues by others that should be closed.
person who gives general guidance in fixing your tests

CONTRIBUTING.md

Read our CONTRIBUTING.md file. Most importantly:

PRs with issues not assigned to you will be closed by the reviewer
Fix the first comment in the PR so that each issue listed automatically closes

Other

🎯 Please be considerate of our volunteers' time. Contacting the person who assigned the reviewers is not advised unless they ask for your input. Do not @ the person who did the assignment otherwise.
Read the CONTRIBUTING.md file make

github-actions

Congratulations on making your first PR! 🎊 If you haven't already, check out our Contributing Guidelines and PR Reporting Guidelines to ensure that you are following our guidelines for contributing and creating PR.

codecov · 2024-01-06T20:54:00Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (e04e50a) 97.44% compared to head (9b7b3c2) 97.20%.
Report is 35 commits behind head on develop.

Additional details and impacted files

@@             Coverage Diff             @@
##           develop    #1393      +/-   ##
===========================================
- Coverage    97.44%   97.20%   -0.25%     
===========================================
  Files          138      133       -5     
  Lines         3683     3396     -287     
  Branches      1076     1038      -38     
===========================================
- Hits          3589     3301     -288     
- Misses          89       90       +1     
  Partials         5        5

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

package-lock.json

rishav-jha-mech · 2024-01-07T05:53:15Z

@harshpreet14 Remove the custom CSS from the modal buttons and make them look like the other buttons we are using (Bootstrap buttons)

Also remove all the changes made to Orglist.module.css in this PR
https://github.com/PalisadoesFoundation/talawa-admin/pull/951/files#diff-6d92acde99b887d1558bf07492bfac03d6fdffcab0f3f9b4a52a14df094dbe6c

Changes Made: -Replaced existing buttons in the OrgList component with Bootstrap buttons for a more consistent and modern UI. -Removed unused CSS classes (greenredbtn, cancel, secondbtn) from OrgList.module.css. -Added new CSS classes enableEverythingBtn and pluginStoreBtn for specific button styling. -Implemented a new test to verify the functionality of the 'Go to Plugin Store' button. Tests: - Tested the individual file by running this command: `npm run test --watchAll=false /src/screens/OrgList/OrgList.test.tsx` - Tested code coverage for this file with : `npm run test -- --collectCoverageFrom="src/screens/OrgList/*" /src/screens/OrgList/OrgList.test.tsx`

harshpreet14 · 2024-01-07T14:32:35Z

Hi Rishav, I have implemented the changes as suggested. The modifications include updating the buttons to Bootstrap versions, cleaning up unused CSS classes, adding new classes for specific buttons, and implementing an additional test for the 'Go to Plugin Store' button.

rishav-jha-mech · 2024-01-16T04:57:20Z

@harshpreet14 share the updated Screenshot

harshpreet14 · 2024-01-16T13:31:09Z

Here's the screenshot @rishav-jha-mech

src/screens/OrgList/OrgList.tsx

beingnoble03

@harshpreet14 please address the comment. Rest lgtm.

noman2002 · 2024-01-21T16:11:07Z

@harshpreet14 Any update on this ?

replaced with pluginNotificationHeader accodrdingly fixed tests

harshpreet14 · 2024-01-21T20:24:14Z

@noman2002 fixed the redundant test-id.

beingnoble03

lgtm, thanks @harshpreet14!

noman2002 · 2024-01-22T13:03:19Z

@beingnoble03 Should this be merged ?

beingnoble03 · 2024-01-22T13:45:20Z

@beingnoble03 Should this be merged ?

Yes

…anism in the 'Manage Features' modal. (PalisadoesFoundation#1393) * Fix: Addressed the issue of UI redundancy as discussed in Issue PalisadoesFoundation#1380. What: - Removed the 'Cancel' button, and added the 'Manage Features' header for the Modal leaving the 'X' icon as the sole close option. Impact: - Simplifies the modal interface, enhancing the overall user experience and reducing potential confusion. Tests: - Tested the individual file by running this command: `npm run test --watchAll=false /path/to/test/file` - Tested code coverage for this file with : `npm run test -- --collectCoverageFrom="src/screens/OrgList/*" /src/screens/OrgList/OrgList.test.tsx` * reverted changes made to package-lock.json file * Fix:Replacing Modal Buttons with Bootstrap buttons. Changes Made: -Replaced existing buttons in the OrgList component with Bootstrap buttons for a more consistent and modern UI. -Removed unused CSS classes (greenredbtn, cancel, secondbtn) from OrgList.module.css. -Added new CSS classes enableEverythingBtn and pluginStoreBtn for specific button styling. -Implemented a new test to verify the functionality of the 'Go to Plugin Store' button. Tests: - Tested the individual file by running this command: `npm run test --watchAll=false /src/screens/OrgList/OrgList.test.tsx` - Tested code coverage for this file with : `npm run test -- --collectCoverageFrom="src/screens/OrgList/*" /src/screens/OrgList/OrgList.test.tsx` * fixed redundant test id- modalOrganisationHeader replaced with pluginNotificationHeader accodrdingly fixed tests * Update OrgList.test.tsx

github-actions bot reviewed Jan 6, 2024

View reviewed changes

palisadoes changed the title ~~Fix: issue #1380 by simplifying the modal closure mechanism in the 'Manage Features' modal.~~ Fixes #1380 by simplifying the modal closure mechanism in the 'Manage Features' modal. Jan 6, 2024

palisadoes requested review from noman2002, yasharth291, rishav-jha-mech and aashimawadhwa January 6, 2024 20:49

rishav-jha-mech reviewed Jan 7, 2024

View reviewed changes

package-lock.json Outdated Show resolved Hide resolved

harshpreet14 added 3 commits January 7, 2024 16:34

reverted changes made to package-lock.json file

6de4d4e

Merge branch 'develop' into bugfix/redundant-close

1f5cdba

harshpreet14 requested a review from rishav-jha-mech January 7, 2024 14:26

beingnoble03 reviewed Jan 17, 2024

View reviewed changes

src/screens/OrgList/OrgList.tsx Outdated Show resolved Hide resolved

beingnoble03 requested changes Jan 17, 2024

View reviewed changes

harshpreet14 added 2 commits January 22, 2024 01:46

fixed redundant test id- modalOrganisationHeader

315b915

replaced with pluginNotificationHeader accodrdingly fixed tests

Update OrgList.test.tsx

9b7b3c2

noman2002 requested a review from beingnoble03 January 22, 2024 10:02

beingnoble03 approved these changes Jan 22, 2024

View reviewed changes

noman2002 approved these changes Jan 22, 2024

View reviewed changes

palisadoes merged commit e8be2da into PalisadoesFoundation:develop Jan 22, 2024
8 of 10 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fixes #1380 by simplifying the modal closure mechanism in the 'Manage Features' modal. #1393

Fixes #1380 by simplifying the modal closure mechanism in the 'Manage Features' modal. #1393

harshpreet14 commented Jan 6, 2024 •

edited

Loading

github-actions bot commented Jan 6, 2024

github-actions bot left a comment

codecov bot commented Jan 6, 2024 •

edited

Loading

rishav-jha-mech commented Jan 7, 2024

harshpreet14 commented Jan 7, 2024

rishav-jha-mech commented Jan 16, 2024

harshpreet14 commented Jan 16, 2024

beingnoble03 left a comment

noman2002 commented Jan 21, 2024

harshpreet14 commented Jan 21, 2024

beingnoble03 left a comment

noman2002 commented Jan 22, 2024

beingnoble03 commented Jan 22, 2024

Fixes #1380 by simplifying the modal closure mechanism in the 'Manage Features' modal. #1393

Fixes #1380 by simplifying the modal closure mechanism in the 'Manage Features' modal. #1393

Conversation

harshpreet14 commented Jan 6, 2024 • edited Loading

github-actions bot commented Jan 6, 2024

Our Pull Request Approval Process

Testing Your Code

Reviewers

Reviewing Your Code

CONTRIBUTING.md

Other

github-actions bot left a comment

Choose a reason for hiding this comment

codecov bot commented Jan 6, 2024 • edited Loading

Codecov Report

rishav-jha-mech commented Jan 7, 2024

harshpreet14 commented Jan 7, 2024

rishav-jha-mech commented Jan 16, 2024

harshpreet14 commented Jan 16, 2024

beingnoble03 left a comment

Choose a reason for hiding this comment

noman2002 commented Jan 21, 2024

harshpreet14 commented Jan 21, 2024

beingnoble03 left a comment

Choose a reason for hiding this comment

noman2002 commented Jan 22, 2024

beingnoble03 commented Jan 22, 2024

harshpreet14 commented Jan 6, 2024 •

edited

Loading

codecov bot commented Jan 6, 2024 •

edited

Loading