PR2: Added search UI by Pikalot · Pull Request #1716 · SCE-Development/Clark

Pikalot · 2025-06-19T04:39:57Z

This PR introduces a search feature triggered by a shortcut key.

Adds a SearchModal component
Shortcut key opens the search bar
Depends on PR1: Moved the routes array to RouteConfig.js #1715 (moved routes array to RouteConfig.js)

⚠️ Please merge PR #1715 first.

2. Suggestions instantly display hardcoded pages recommendations. 3. Suggestions show user search results after a short delay for authorized users only and if there is any user matched

…fficer is Officer and Manager

…ection logic

Co-authored-by: Evan Ugarte <36345325+evanugarte@users.noreply.github.com>

evanugarte · 2025-07-03T17:32:07Z

+        {suggestions.length > 0 && (
+          <ul className={`${style['suggestion-list']}`}>
+            {suggestions.map((r, index) => (
+              <li
+                key={index}
+                className={`${style['suggestion-item']} ${index === selectItem ? style['active'] : ''}`}
+                onMouseEnter={() => setSelectItem(index)}
+                onClick={() => {
+                  window.location.href = r.path;
+                  setOpen(false);
+                }}
+              >
+                <span style={{ marginRight: '0.5rem' }}>
+                  {r.type === 'user' ? '👤' : '📄'}
+                </span>
+                {r.pageName}
+                <div className={style['hidden-tab']}>{selectItem === index && `${window.location.origin}${r.path}`}</div>
+              </li>
+            )).slice(0, 5)}


can we move this to a function, like

getSuggestions()

it returns an empty tag if suggestions.length === 0, else it gets the first 5 suggesitons, and returns the <li> elements after using a map function

im not sure if this comment was addressed, maybe some commits need to be pushed to github?

sorry, I was delaying it because I wanted to push it together with the scoped CSS. It should be live now.

evanugarte · 2025-07-03T17:35:09Z

@@ -0,0 +1,65 @@
+.modal {


we should scope the css, so every element in the search modal should be inside of a div called "search-modal",

that way we dont accidentally apply this css to other components in clark with the same class name

an example of this issue, and resolving this issue with scoping is in the below pr

https://github.com/SCE-Development/Clark/pull/1256/files

Done, please review

can the class name be shortcut-search-modal,

modal is kind of generic, we might use this class name somewhere else on accident

I renamed it to search-modal before seeing your suggestion. I can still rename it to shortcut-search-modal if you prefer that name for clarity.

Co-authored-by: Evan Ugarte <36345325+evanugarte@users.noreply.github.com>

evanugarte · 2025-07-03T19:37:39Z

+        {suggestions.length > 0 && (
+          <ul className={`${style['suggestion-list']}`}>
+            {suggestions.map((r, index) => (
+              <li
+                key={index}
+                className={`${style['suggestion-item']} ${index === selectItem ? style['active'] : ''}`}
+                onMouseEnter={() => setSelectItem(index)}
+                onClick={() => {
+                  window.location.href = r.path;
+                  setOpen(false);
+                }}
+              >
+                <span style={{ marginRight: '0.5rem' }}>
+                  {r.type === 'user' ? '👤' : '📄'}
+                </span>
+                {r.pageName}
+                <div className={style['hidden-tab']}>{selectItem === index && `${window.location.origin}${r.path}`}</div>
+              </li>
+            )).slice(0, 5)}


im not sure if this comment was addressed, maybe some commits need to be pushed to github?

evanugarte · 2025-07-03T19:37:55Z

@@ -0,0 +1,65 @@
+.modal {


can the class name be shortcut-search-modal,

modal is kind of generic, we might use this class name somewhere else on accident

…d CSS and renamed the class from modal to search-modal. Added a check for an empty suggestions list before handling search.

* chore: move routes array to its own file * Removed search UI * Re-commit for PR 1 * Added search UI * update: Only 5 search suggestions are shown at once. Scroll to see more. * Debug: remove dessert pages * Fixed bug: user should land homepage after loggin in * Update: Prevent unnecessary API calls — user data is now fetched only when the search input actually changes. * Resolved conflict when merging with latest dev * Resolved incoming conflict when merging with dev * Removed search UI codes and improved permission check logic by implementing Lookup table * Fixed irrelevant permission check * Fixed lookup table to prevent excessive fetching * Improved routes caching in SearchModal using useMemo * 1. Removed scrollable dropdown codes. Just shows top 5 results. 2. Suggestions instantly display hardcoded pages recommendations. 3. Suggestions show user search results after a short delay for authorized users only and if there is any user matched * removed e.key === 'K', only implement api fetch for users list when officer is Officer and Manager * Fix: hide search suggestions when input is empty * Refactor: removed duplicate route filtering and improved keyboard selection logic * Update src/Components/ShortcutKeyModal/SearchModal.js Co-authored-by: Evan Ugarte <36345325+evanugarte@users.noreply.github.com> * Update src/Components/ShortcutKeyModal/SearchModal.js Co-authored-by: Evan Ugarte <36345325+evanugarte@users.noreply.github.com> * Committed changes as suggestions * Undo the changes in Home.js * Removed a space in line 1 of Home.js * Spitted PR and moved searching debounce logic to the new PR * Updated PERMISSION_LOOKUP_TABLE in Private Route -> no more functions mapping, cleaner code * Removed the commented out section - old SpeakerPage component * Removed unnecessary pageName prop * Resolved conflicts due to auto correction * Fixed typo: signedInRoutes * Added more arrays to RouteConfig.js * Changed RouteConfig.js to Routes.js and fixed linting errors * Merged with Aidan's routes.js code * Update src/index.js Co-authored-by: Evan Ugarte <36345325+evanugarte@users.noreply.github.com> * Update src/Components/ShortcutKeyModal/SearchModal.js Co-authored-by: Evan Ugarte <36345325+evanugarte@users.noreply.github.com> * Used scoped CSS * Moved suggestions rendering to a separate function. Switched to scoped CSS and renamed the class from modal to search-modal. Added a check for an empty suggestions list before handling search. * Rerversed merging with PR2. Waiting for approval * Recreated PR2 * Changed className: search-modal -> shortcut-search-modal * Update src/Components/ShortcutKeyModal/SearchModal.js Co-authored-by: Evan Ugarte <36345325+evanugarte@users.noreply.github.com> * Changed key to r.path and slice top 5 suggestions before rendering * Changes: close search modal when users click outside of the modal content, clear out search box when modal is closed * Added dark mode, refined UI, and showed default signedOutRoutes suggestions when keyword is empty * Changed background color of suggestion list to be more neutral in Light mode * Rebased with main * Renamed getSuggestions to SuggestionsList and converted all functions to arrow functions * Removed 'Get Started row' and filtered out Edit User Info page * Fix: correct dependencies in useMemo for routes --------- Co-authored-by: Evan Ugarte <36345325+evanugarte@users.noreply.github.com> Co-authored-by: Aidan Spies <spiesaidan@gmail.com>

…E-Development#1748) * chore: move routes array to its own file * Removed search UI * Re-commit for PR 1 * Added search UI * update: Only 5 search suggestions are shown at once. Scroll to see more. * Debug: remove dessert pages * Fixed bug: user should land homepage after loggin in * Update: Prevent unnecessary API calls — user data is now fetched only when the search input actually changes. * Resolved conflict when merging with latest dev * Resolved incoming conflict when merging with dev * Removed search UI codes and improved permission check logic by implementing Lookup table * Fixed irrelevant permission check * Fixed lookup table to prevent excessive fetching * Improved routes caching in SearchModal using useMemo * 1. Removed scrollable dropdown codes. Just shows top 5 results. 2. Suggestions instantly display hardcoded pages recommendations. 3. Suggestions show user search results after a short delay for authorized users only and if there is any user matched * removed e.key === 'K', only implement api fetch for users list when officer is Officer and Manager * Fix: hide search suggestions when input is empty * Refactor: removed duplicate route filtering and improved keyboard selection logic * Update src/Components/ShortcutKeyModal/SearchModal.js Co-authored-by: Evan Ugarte <36345325+evanugarte@users.noreply.github.com> * Update src/Components/ShortcutKeyModal/SearchModal.js Co-authored-by: Evan Ugarte <36345325+evanugarte@users.noreply.github.com> * Committed changes as suggestions * Undo the changes in Home.js * Removed a space in line 1 of Home.js * Spitted PR and moved searching debounce logic to the new PR * Updated PERMISSION_LOOKUP_TABLE in Private Route -> no more functions mapping, cleaner code * Removed the commented out section - old SpeakerPage component * Removed unnecessary pageName prop * Resolved conflicts due to auto correction * Fixed typo: signedInRoutes * Added more arrays to RouteConfig.js * Changed RouteConfig.js to Routes.js and fixed linting errors * Merged with Aidan's routes.js code * Update src/index.js Co-authored-by: Evan Ugarte <36345325+evanugarte@users.noreply.github.com> * Update src/Components/ShortcutKeyModal/SearchModal.js Co-authored-by: Evan Ugarte <36345325+evanugarte@users.noreply.github.com> * Used scoped CSS * Moved suggestions rendering to a separate function. Switched to scoped CSS and renamed the class from modal to search-modal. Added a check for an empty suggestions list before handling search. * Rerversed merging with PR2. Waiting for approval * Recreated PR2 * Changed className: search-modal -> shortcut-search-modal * Update src/Components/ShortcutKeyModal/SearchModal.js Co-authored-by: Evan Ugarte <36345325+evanugarte@users.noreply.github.com> * Changed key to r.path and slice top 5 suggestions before rendering * Changes: close search modal when users click outside of the modal content, clear out search box when modal is closed * Added dark mode, refined UI, and showed default signedOutRoutes suggestions when keyword is empty * Changed background color of suggestion list to be more neutral in Light mode * Rebased with main * Renamed getSuggestions to SuggestionsList and converted all functions to arrow functions * Removed 'Get Started row' and filtered out Edit User Info page * Fix: correct dependencies in useMemo for routes --------- Co-authored-by: Evan Ugarte <36345325+evanugarte@users.noreply.github.com> Co-authored-by: Aidan Spies <spiesaidan@gmail.com>

Added search UI

f34c797

Pikalot requested review from evanugarte and weslayer June 19, 2025 04:41

Pikalot added 5 commits June 21, 2025 12:58

update: Only 5 search suggestions are shown at once. Scroll to see more.

747b736

Resolved incoming conflict when merging with dev

e217247

Resolved incoming conflict when merging with dev

ad090a9

Merge branch 'devTA_shortcut_key' into devTA_search_ui

1d7812b

Merge branch 'devTA_shortcut_key' into devTA_search_ui

f82d85d

Pikalot changed the base branch from dev to devTA_shortcut_key June 26, 2025 05:25

Pikalot added 7 commits June 27, 2025 14:44

Improved routes caching in SearchModal using useMemo

dbf556d

Resolved conflict when merge with devTA_shortcut_key

1900dfc

Merge branch 'devTA_shortcut_key' into devTA_search_ui

c4d15f6

1. Removed scrollable dropdown codes. Just shows top 5 results.

03ab038

2. Suggestions instantly display hardcoded pages recommendations. 3. Suggestions show user search results after a short delay for authorized users only and if there is any user matched

removed e.key === 'K', only implement api fetch for users list when o…

6da541d

…fficer is Officer and Manager

Fix: hide search suggestions when input is empty

2474714

Refactor: removed duplicate route filtering and improved keyboard sel…

fb40204

…ection logic

evanugarte reviewed Jul 1, 2025

View reviewed changes

Pikalot and others added 11 commits July 1, 2025 01:43

Update src/Components/ShortcutKeyModal/SearchModal.js

28db66d

Co-authored-by: Evan Ugarte <36345325+evanugarte@users.noreply.github.com>

Update src/Components/ShortcutKeyModal/SearchModal.js

3f4f280

Co-authored-by: Evan Ugarte <36345325+evanugarte@users.noreply.github.com>

Committed changes as suggestions

eaf4153

Undo the changes in Home.js

57283fc

Removed a space in line 1 of Home.js

e770ff9

Spitted PR and moved searching debounce logic to the new PR

eab0ca0

Merged with latest devTA_shortcut_key

01cc796

Merge branch 'devTA_shortcut_key' into devTA_search_ui

129b8fd

Merge branch 'devTA_shortcut_key' into devTA_search_ui

93f19d9

Merged with Aidan's routes.js code

8cd5787

Merge branch 'devTA_shortcut_key' into devTA_search_ui

25fdbde

evanugarte reviewed Jul 3, 2025

View reviewed changes

Pikalot and others added 2 commits July 3, 2025 11:11

Update src/index.js

b94ae33

Co-authored-by: Evan Ugarte <36345325+evanugarte@users.noreply.github.com>

Update src/Components/ShortcutKeyModal/SearchModal.js

444f3b3

Co-authored-by: Evan Ugarte <36345325+evanugarte@users.noreply.github.com>

evanugarte reviewed Jul 3, 2025

View reviewed changes

Pikalot added 2 commits July 3, 2025 12:52

Used scoped CSS

4a72502

Moved suggestions rendering to a separate function. Switched to scope…

ed3f51b

…d CSS and renamed the class from modal to search-modal. Added a check for an empty suggestions list before handling search.

Pikalot merged commit ed3f51b into devTA_shortcut_key Jul 3, 2025

Pikalot deleted the devTA_search_ui branch July 3, 2025 20:54

Pikalot restored the devTA_search_ui branch July 3, 2025 21:03

Pikalot mentioned this pull request Jul 3, 2025

Recreated PR2: Added search UI (replaced PR #1716) #1748

Merged

Conversation

Pikalot commented Jun 19, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants