Skip to content

Improve Global Searching in admin panel#2327

Open
notAreYouScared wants to merge 1 commit into
mainfrom
charles/better-search
Open

Improve Global Searching in admin panel#2327
notAreYouScared wants to merge 1 commit into
mainfrom
charles/better-search

Conversation

@notAreYouScared
Copy link
Copy Markdown
Member

Added filament global search plugin to improve on filaments stock global search.

@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented May 9, 2026

Review Change Stack

📝 Walkthrough

Walkthrough

The PR integrates a third-party global search modal plugin by adding the Composer dependency, registering it in the admin panel provider, bundling compiled Tailwind CSS styling with theme variables and utilities, and implementing JavaScript modules for localStorage-backed search history/favorites management and DOM event-driven modal interaction.

Changes

Global Search Modal Feature

Layer / File(s) Summary
Dependencies
composer.json
Adds charrafimed/global-search-modal at version ^5.0 to require section.
Plugin Registration
app/Providers/Filament/AdminPanelProvider.php
Imports GlobalSearchModalPlugin and registers it in the admin panel's plugin list via GlobalSearchModalPlugin::make().
CSS Styling
public/css/charrafimed/global-search-modal/global-search-modal.css
Compiled Tailwind CSS v4 stylesheet defining theme variables (fonts, colors, spacing, radii), base resets, utility classes, modal-scoped selectors for positioning/sizing/scrollbars, @property registrations, and conditional property initialization.
Search State
public/js/charrafimed/global-search-modal/components/global-search-modal-search.js
Exports searchComponent factory managing two localStorage-persisted lists: search_history and favorite_items, with deduplication, length capping, and auto-sync via watchers; provides CRUD methods and optional history removal when favoriting.
Modal Interaction
public/js/charrafimed/global-search-modal/components/global-search-modal-observer.js
Exports observer() function that disables the search input field, intercepts user interactions to dispatch open-global-search-modal custom events, and re-enables the field when receiving modal-closed window events.
🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 66.67% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed The title accurately summarizes the main change—adding a global search plugin to enhance the admin panel's search functionality, which aligns with the changeset.
Description check ✅ Passed The description is directly related to the changeset, explaining that a Filament global search plugin was added to improve the stock global search.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

Tip

💬 Introducing Slack Agent: The best way for teams to turn conversations into code.

Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.

  • Generate code and open pull requests
  • Plan features and break down work
  • Investigate incidents and troubleshoot customer tickets together
  • Automate recurring tasks and respond to alerts with triggers
  • Summarize progress and report instantly

Built for teams:

  • Shared memory across your entire org—no repeating context
  • Per-thread sandboxes to safely plan and execute work
  • Governance built-in—scoped access, auditability, and budget controls

One agent for your entire SDLC. Right inside Slack.

👉 Get started


Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Copy Markdown

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

🧹 Nitpick comments (4)
public/js/charrafimed/global-search-modal/components/global-search-modal-observer.js (3)

25-28: 💤 Low value

Consider removing redundant keypress handler.

The keypress event listener is redundant since keydown (registered at line 18) already covers all keyboard input including character keys. The keypress event is also a legacy event that's been deprecated in favor of keydown and beforeinput.

♻️ Proposed fix
         inputElement.setAttribute("readonly", true);
         inputElement.setAttribute("tabindex", "-1");
       }
     },
-        inputElement.addEventListener("keypress", (event) => {
-          event.preventDefault();
-          event.stopPropagation();
-        }, true);
-
         inputElement.setAttribute("readonly", true);
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In
`@public/js/charrafimed/global-search-modal/components/global-search-modal-observer.js`
around lines 25 - 28, Remove the redundant "keypress" listener on inputElement:
locate the inputElement.addEventListener("keypress", ...) block and delete it,
leaving the existing "keydown" listener (registered earlier) to handle keyboard
input; ensure no other code depends on the keypress handler before removal and
keep event.preventDefault()/stopPropagation() behavior in the "keydown" handler
if needed.

57-57: 💤 Low value

Pass string value to setAttribute.

setAttribute expects string values. While the number 0 will be coerced to the string "0", it's better to be explicit and pass the string directly for consistency.

♻️ Proposed fix
           inputElement.disabled = false;
           inputElement.readOnly = false;
-          inputElement.setAttribute("tabindex", 0);
+          inputElement.setAttribute("tabindex", "0");
         }
       });
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In
`@public/js/charrafimed/global-search-modal/components/global-search-modal-observer.js`
at line 57, The call inputElement.setAttribute("tabindex", 0) passes a number;
change it to pass a string by using "0" so setAttribute receives a string value
(update the setAttribute invocation on inputElement to use "0" instead of 0).

4-4: 💤 Low value

Remove unused property.

The observer property is declared but never used in this module. Consider removing it to keep the code clean.

♻️ Proposed fix
 function observer() {
   return {
-    observer: null,
     modalOpen: false,
     init: function() {
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In
`@public/js/charrafimed/global-search-modal/components/global-search-modal-observer.js`
at line 4, The exported object in global-search-modal-observer.js declares an
unused property named "observer"; remove the "observer" property declaration
from the object (and any related/commented code in that module) so the module no
longer contains an unused symbol, and run a quick grep for "observer" in that
file to confirm there are no remaining references before committing.
public/css/charrafimed/global-search-modal/global-search-modal.css (1)

1-1215: ⚡ Quick win

Consider excluding compiled CSS from linting.

This file is compiled Tailwind CSS output (as indicated by the header comment). Stylelint violations in generated/compiled files are expected and should not be manually fixed, as changes would be overwritten on rebuild.

Consider adding this file to your .stylelintignore or similar linting configuration to suppress false positives.

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@public/css/charrafimed/global-search-modal/global-search-modal.css` around
lines 1 - 1215, This is generated Tailwind output (see header "/*! tailwindcss
v4.1.12" and large compiled rules like :root, :host), so instead of editing it,
add public/css/charrafimed/global-search-modal/global-search-modal.css to the
stylelint ignore list (or update your lint config to exclude compiled CSS
directories) or add an appropriate generated-file ignore rule; alternatively, if
you prefer a per-file suppression, prepend a stylelint disable directive to the
generated file as part of your build step so lint rules no longer run on this
compiled output.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In
`@public/js/charrafimed/global-search-modal/components/global-search-modal-observer.js`:
- Line 29: The code incorrectly uses inputElement.setAttribute("readonly", true)
and later sets readonly to "false" in listenForModalClose; change these to use
the DOM property or proper boolean attribute handling: replace
setAttribute("readonly", true) with inputElement.readOnly = true, and replace
the code that sets readonly to false (in listenForModalClose) with
inputElement.readOnly = false (or use removeAttribute("readonly") if you prefer
attribute manipulation) so the readonly state is toggled correctly without
creating readonly="false".

In
`@public/js/charrafimed/global-search-modal/components/global-search-modal-search.js`:
- Around line 23-24: The getLocalStorage method currently calls
localStorage.getItem and JSON.parse directly and can throw in private mode,
quota/security errors, or on invalid JSON; wrap the localStorage.getItem +
JSON.parse sequence in a try-catch inside getLocalStorage, catch any exception,
optionally log the error, and return an empty array as the safe fallback so
callers of getLocalStorage (refer to getLocalStorage) never receive a thrown
exception or undefined.

---

Nitpick comments:
In `@public/css/charrafimed/global-search-modal/global-search-modal.css`:
- Around line 1-1215: This is generated Tailwind output (see header "/*!
tailwindcss v4.1.12" and large compiled rules like :root, :host), so instead of
editing it, add
public/css/charrafimed/global-search-modal/global-search-modal.css to the
stylelint ignore list (or update your lint config to exclude compiled CSS
directories) or add an appropriate generated-file ignore rule; alternatively, if
you prefer a per-file suppression, prepend a stylelint disable directive to the
generated file as part of your build step so lint rules no longer run on this
compiled output.

In
`@public/js/charrafimed/global-search-modal/components/global-search-modal-observer.js`:
- Around line 25-28: Remove the redundant "keypress" listener on inputElement:
locate the inputElement.addEventListener("keypress", ...) block and delete it,
leaving the existing "keydown" listener (registered earlier) to handle keyboard
input; ensure no other code depends on the keypress handler before removal and
keep event.preventDefault()/stopPropagation() behavior in the "keydown" handler
if needed.
- Line 57: The call inputElement.setAttribute("tabindex", 0) passes a number;
change it to pass a string by using "0" so setAttribute receives a string value
(update the setAttribute invocation on inputElement to use "0" instead of 0).
- Line 4: The exported object in global-search-modal-observer.js declares an
unused property named "observer"; remove the "observer" property declaration
from the object (and any related/commented code in that module) so the module no
longer contains an unused symbol, and run a quick grep for "observer" in that
file to confirm there are no remaining references before committing.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: bac01114-6adb-405b-8d21-2e9b36136975

📥 Commits

Reviewing files that changed from the base of the PR and between 38620a9 and ca0fd55.

⛔ Files ignored due to path filters (1)
  • composer.lock is excluded by !**/*.lock
📒 Files selected for processing (5)
  • app/Providers/Filament/AdminPanelProvider.php
  • composer.json
  • public/css/charrafimed/global-search-modal/global-search-modal.css
  • public/js/charrafimed/global-search-modal/components/global-search-modal-observer.js
  • public/js/charrafimed/global-search-modal/components/global-search-modal-search.js

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant