Refactor Save search modal #603

chrtorres · 2024-09-09T18:43:36Z

🗣 Description

Refactored Save Search modal from legacy dependency libraries to Material UI.
Applied form validation to prevent empty strings or duplicate entries when entering a new saved search.
Updated the 'Update Saved Search' functionality.
Removed 'vulnerabilityTemplate' and 'createVulnerability' from saved-search. Functionality no longer needed.

💭 Motivation and context

Prior to this fix, save search was reliant on legacy dependency libraries. In an effort to make the application uniform and simplified, this modal has been refactored using Material UI components. Also, When a user is able to save a search, there should be some sort of check to prevent the entry of duplicate names and/or empty names. With this fix, form validation is now present to avoid invalid entries.

This resolves CRASM-629

🧪 Testing

📷 Screenshots

Save Search Modal Before

Save Search Modal Refactored

Inventory page

Saving a new search

Apply any filter to enable the "Save Search" button.

Applying saved search

Updating a saved search

When updating a saved search, select the search you would like to update, apply or remove desired filters, click "Update Saved Search".

Form Validation against empty strings

Form validation against duplicate entries

✅ Pre-approval checklist

This PR has an informative and human-readable title.
Changes are limited to a single goal - eschew scope creep!
All future TODOs are captured in issues, which are referenced
in code comments.
All relevant type-of-change labels have been added.
I have read the CONTRIBUTING document.
These code changes follow cisagov code standards.
All relevant repo and/or project documentation has been updated
to reflect the changes in this PR.
Tests have been added and/or modified to cover the changes in this PR.
All new and existing tests pass.

✅ Pre-merge checklist

Revert dependencies to default branches.
Finalize version.

✅ Post-merge checklist

Create a release.

…h-modal

- moved props, state, and api call from Dashboard to new Saved Search Modal. - still need to clean up code. - still need to round out create vuln functionality.

…to save-search-modal

- Stack is now spaced between. - Added Save end icon to button. - Changed button variant to contained for better visibility.

jayjaybunce

Looks and feels great, one small comment on the hard reload of the view.

frontend/src/components/SaveSearchModal/SaveSearchModal.tsx

…console logs

- Removed use of local storage. - No need as search term, filters, and sort are in context and stored in state. - Saved Searches are in context and have their own state. - Created boolean based in state to determine if radio button is checked.

…r saved-search in models

- activeSearch is now stored in SavedSearchContext. - selectedSearch is now stored in SavedSearchContext. - activeSearchId is now stored in SavedSearchContext. - activeSearchId is determined in DrawerInterior and used to determine activeSearch and selectedSearch. - those are then passed to SaveSearchModal.

…tingSearch from SortBar

- Removed unused state from SavedSearchContext and SavedSearchContextProvider. - Added boolean check to allow user to resuse a name for a saved search if it is the same search. - Added disbale props to the update search dialogue.

- Saved Search list is now sorted ascending by name. - Removed unused imports from SaveSearchModal and Inventory. - Changed names of dialogs to be more descriptive. - update handler is now handleUpdate.

jayjaybunce

Tested locally, LGTM

ameliav

Overall the code and UI look a lot cleaner to me. As for the removed functionality "create a vulnerability", we may want to discuss as a team whether we want to keep it commented or completely remove it.

frontend/src/components/DrawerInterior.tsx

cduhn17

As mentioned in the review. Lets get some comments regarding commented out code i.e. the plan for the deprecation of the commented code.

nickviola

👍 LGTM!

chrtorres · 2024-09-11T17:41:14Z

As mentioned in the review. Lets get some comments regarding commented out code i.e. the plan for the deprecation of the commented code.

Comments have been added referencing the deprecated code and plans to remove in future versions.

ameliav

LGTM with the added reference to the comments!

frontend/src/components/SaveSearchModal/SaveSearchModal.tsx

chrtorres and others added 16 commits August 28, 2024 15:50

Created SaveSearchModal; testing in inventory

5055d8a

Merge branch '543-refactor-of-saved-search-accordion' into save-searc…

f46759e

…h-modal

Remove unused import

d0595dc

Troubleshooting modal functions

3c40209

Troubeshooting API requests Save Search Modal

37a4875

Merge remote-tracking branch 'origin' into save-search-modal

4a98b7e

Save Search modal now saves user defined Search

6fca51d

- moved props, state, and api call from Dashboard to new Saved Search Modal. - still need to clean up code. - still need to round out create vuln functionality.

Merge branch 'save-search-modal' of https://github.com/cisagov/XFD in…

a09b482

…to save-search-modal

Restored SaveSearchModal and Stack to Inventory

27a6439

Merge remote-tracking branch 'origin/develop' into save-search-modal

6b7f42a

Modified Save Search button

9d3b047

- Stack is now spaced between. - Added Save end icon to button. - Changed button variant to contained for better visibility.

Implemented form validation on save search modal

f5c72b1

Added form validation for duplicate entries

0c97205

Update saved search fixed

5e526a0

Code cleanup; remove unused imports

16967f9

Code cleanup; remove unused variable

bc49d5e

chrtorres self-assigned this Sep 9, 2024

chrtorres added improvement This issue or pull request will add or improve functionality, maintainability, or ease of use frontend labels Sep 9, 2024

Code cleanup; remove unused useRef

0cd9799

chrtorres marked this pull request as ready for review September 9, 2024 20:20

chrtorres requested review from aloftus23, cduhn17, Matthew-Grayson, nickviola, rapidray12 and schmelz21 as code owners September 9, 2024 20:20

jayjaybunce reviewed Sep 9, 2024

View reviewed changes

frontend/src/components/SaveSearchModal/SaveSearchModal.tsx Outdated Show resolved Hide resolved

frontend/src/components/SaveSearchModal/SaveSearchModal.tsx Outdated Show resolved Hide resolved

chrtorres and others added 2 commits September 9, 2024 17:42

Removed window.reload with use of state instead; removed unnecessary …

ab4f3ea

…console logs

Refactored Save Search Accordion

aebcf5b

- Removed use of local storage. - No need as search term, filters, and sort are in context and stored in state. - Saved Searches are in context and have their own state. - Created boolean based in state to determine if radio button is checked.

hawkishpolicy and others added 3 commits September 10, 2024 10:42

More test edits

56dec3e

Updated saved-search snapshots; commented out vulnerability fields fo…

9b5d31b

…r saved-search in models

chrtorres marked this pull request as draft September 10, 2024 19:31

chrtorres and others added 4 commits September 10, 2024 16:07

Fixed update save search; removed search from Inventory; removed exis…

cf4afea

…tingSearch from SortBar

Cleaned up Saved Search Context and Modal

f119e9e

- Removed unused state from SavedSearchContext and SavedSearchContextProvider. - Added boolean check to allow user to resuse a name for a saved search if it is the same search. - Added disbale props to the update search dialogue.

Edits to save src modal, drawer int, & inventory

f343aad

- Saved Search list is now sorted ascending by name. - Removed unused imports from SaveSearchModal and Inventory. - Changed names of dialogs to be more descriptive. - update handler is now handleUpdate.

Fixed save search/update search placeholder text

ea1e13a

chrtorres marked this pull request as ready for review September 11, 2024 13:40

Fixed new save search not clearing placeholder text

4c45b9e

jayjaybunce approved these changes Sep 11, 2024

View reviewed changes

ameliav reviewed Sep 11, 2024

View reviewed changes

frontend/src/components/DrawerInterior.tsx Outdated Show resolved Hide resolved

Removed unnecessary log

47c38e3

cduhn17 approved these changes Sep 11, 2024

View reviewed changes

nickviola approved these changes Sep 11, 2024

View reviewed changes

documented deprecation of create vulnerability function

54c1440

chrtorres assigned chrtorres and unassigned chrtorres Sep 11, 2024

ameliav self-requested a review September 11, 2024 18:09

ameliav approved these changes Sep 11, 2024

View reviewed changes

Added onKeyDown for SaveSearchModal; address 508 compliance requirements

5044045

github-advanced-security bot found potential problems Sep 11, 2024

View reviewed changes

frontend/src/components/SaveSearchModal/SaveSearchModal.tsx Fixed Show fixed Hide fixed

chrtorres added 4 commits September 11, 2024 15:49

Fixed onKeyDown event not working; Updated onKeyDown to submit form

6021f16

Added aria labels to forms and buttons within SaveSearchModal

b66f357

Removed deprecated code

ab3030c

Removed commented code

a143154

schmelz21 approved these changes Sep 12, 2024

View reviewed changes

schmelz21 merged commit c9983d2 into develop Sep 12, 2024
19 of 22 checks passed

schmelz21 deleted the save-search-modal branch September 12, 2024 16:58

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Refactor Save search modal #603

Refactor Save search modal #603

chrtorres commented Sep 9, 2024 •

edited

Loading

jayjaybunce left a comment

jayjaybunce left a comment

ameliav left a comment

cduhn17 left a comment

nickviola left a comment

chrtorres commented Sep 11, 2024

ameliav left a comment

Refactor Save search modal #603

Refactor Save search modal #603

Conversation

chrtorres commented Sep 9, 2024 • edited Loading

🗣 Description

💭 Motivation and context

🧪 Testing

📷 Screenshots

Save Search Modal Before

Save Search Modal Refactored

Inventory page

Saving a new search

Applying saved search

Updating a saved search

Form Validation against empty strings

Form validation against duplicate entries

✅ Pre-approval checklist

✅ Pre-merge checklist

✅ Post-merge checklist

jayjaybunce left a comment

Choose a reason for hiding this comment

jayjaybunce left a comment

Choose a reason for hiding this comment

ameliav left a comment

Choose a reason for hiding this comment

cduhn17 left a comment

Choose a reason for hiding this comment

nickviola left a comment

Choose a reason for hiding this comment

chrtorres commented Sep 11, 2024

ameliav left a comment

Choose a reason for hiding this comment

chrtorres commented Sep 9, 2024 •

edited

Loading