dashboard: Add search box and link to URL

[afinn12]

Needed

• Merge PR dashboard: small enhancements #20 before this

Description

• Implemented form component that handles searching.
  • Appends search terms to URL.
    • matchMode= matchAny/matchAll (or/and)
    • Filters job based on "value" --> contains only
  • "Keep Search Terms" button keeps the existing search terms in the URL, adding the new rule.
    • If not selected, the search erases the previous search terms, only searching for the new rule.
  • "Clear Search" button clears the search terms, if they exist.

Possible Feature

• Could implement a button "Change Match Mode" that keeps the current search parameters, but toggles between Match Any/Match All
• Could implement an excludes option (currently, only contains)

Testing

• Tested in dev
• Tested in prod

in prod:

Default:

Searching with the form appends to URL:

Adding another search with "Keep Search Terms" appends to the URL:
(will update matchMode (and/or) if it changes)

Adding another search without "Keep Search Terms" appends to the URL:

Selecting "Clear Search":

[a1icja]

Minor changes again - Sorry D:

[a1icja]

Is there not already an existing implementation for this somewhere? Just curious

[afinn12]

How do you mean? Besides .some/.every?
We could pull the values out of the URL before passing them into the function. Then, it's just a filter. A little simpler maybe?

[afinn12]

Changes

• Removed Clear Search/Keep Search Terms
• Removed matchMode (any/all)
  • Only supports 1 term at a time

To reimplement, define clearSearch:

// Clear the search parameters, but only if they exist.
  const clearSearch = () => {
    if(window.location.href.includes("matchMode")){
      const path = new URLSearchParams();
      path.append("display", display);
      if (display === "prsingle" && selectedPR) {
        path.append("pr", selectedPR);
      }
      window.location.assign(`${basePath}/?${path.toString()}`);
    }
  };

Modify handleSearch:

const handleSearch= (e) => {
    // Prevent the default behavior so that we can keep search terms.
    e.preventDefault();
    const matchMode = e.target.matchMode.value;
    const value = e.target.value.value.trimEnd(); 
    if (value) {  
      // Append the new matchMode regardless of if search terms were kept.
      const path = new URLSearchParams();
      path.append("display", display);
      if(display === "prsingle" && selectedPR){
        path.append("pr", selectedPR);
      }
      path.append("matchMode", matchMode);
      if (keepSearch) {
        // If keepSearch is true, add existing parameters in the URL.
        const urlParams = new URLSearchParams(window.location.search);
        urlParams.getAll("value").forEach((val) => {
          path.append("value", val); 
        });
      }
      //Add the search term from the form and redirect. 
      path.append("value", encodeURIComponent(value)); 
      window.location.assign(`${basePath}/?${path.toString()}`);
    }
  };

Add buttons to use:

      <button 
              className={buttonClass()} 
              onClick={() => clearSearch()}>
              Clear Search
            </button>
            <button 
              className={buttonClass(keepSearch)} 
              onClick={() => setKeepSearch(!keepSearch)}>
              Keep URL Search Terms
       </button>

• Users don't have to manually clear the URL

• Tested in dev and prod