Add advanced search options to user profile

[flodolo]

Fixes #4008

The Python part feels straightforward, the front-end not so much (likely because of my lack of love for JS and React).

One surprise was the amount of places where we hardcoded a default false value for these settings. I tried to define them in one place, so we can change them more easily in the future (well, one for Python and one for JS).

Profile settings are also used on the new /search page.

[mathjazz]

The changes made in the frontend should also be stored in the DB, otherwise the behaviour is inconsistent with how editor settings work.

I haven't looked at all the code yet.

[flodolo]

The changes made in the frontend should also be stored in the DB, otherwise the behaviour is inconsistent with how editor settings work.

Not sure I agree on this? That behavior would be very annoying for these settings.

For example: I want to include IDs by default. For a specific search, I go in the menu and disable them. I shouldn't have to then click the menu again to restore my default preference.

Also, I think the menu should reflect the current options coming from the URL (e.g. all-resources/?search=new-tab&string=6430 shouldn't show any option selected), not my profile default. The current code seems to have a bug around that, at least in some cases 🤔

[mathjazz]

Also, I think the menu should reflect the current options coming from the URL (e.g. all-resources/?search=new-tab&string=6430 shouldn't show any option selected), not my profile default.

Ah, that's a good point. Let's keep it that way.

I would add a link to setting, though. And redesign the search menu accordingly:

[flodolo]

Not sure if I took it too far 😓

Given there is no APPLY SEARCH OPTIONS button anymore, when you click one of the options it will perform a new search and close the dropdown.

Added two commands at the bottom:

• One to restore your default. That will also perform the search using your defaults. Maybe we could just load the defaults, but I assume you also want to perform a search when you do that. Or maybe I should call that Search with default settings?
• Open search settings.

Scenarios

Scenario 1

I open translate view, and search for something. This will automatically use my personal defaults. If one of the settings doesn't match Pontoon's default, it will encode the parameter in the URL, so I can share it with other users.
The dropdown also reflects my personal defaults.

As an example, I set my default to include string identifiers. When I search for new-tab, the URL will be http://localhost:8000/it/firefox/all-resources/?search_identifiers=true&search=new-tab&string=6430.

Scenario 2

I load a URL with a search, e.g. http://localhost:8000/it/firefox/all-resources/?search=new-tab. The menu will show Pontoon's default, and will use them for the search.

For example, if I open http://localhost:8000/it/firefox/all-resources/?search=new-tab&string=6430, all search options will be disabled.

If I open http://localhost:8000/it/firefox/all-resources/?search_identifiers=true&search_match_case=true&search=new-tab&string=6430, two options (match case, include IDs) will be selected.

[mathjazz]

Given there is no APPLY SEARCH OPTIONS button anymore, when you click one of the options it will perform a new search and close the dropdown.

This is not an ideal UX. If you click the wrong button, or just want to switch between options, the interaction cost to make a change is high. I would keep the current behaviour and possibly restore the button.

One to restore your default. That will also perform the search using your defaults. Maybe we could just load the defaults, but I assume you also want to perform a search when you do that. Or maybe I should call that Search with default settings?

I like the restore to default entry. But you don't see what the defaults are if you click on it, so triggerring search immediatelly is (like above) not the best UX.

[flodolo]

I would keep the current behaviour and possibly restore the button.

If clicking an option doesn't trigger the search, I can't see a way without the button. If I click around with the mouse, I don't want to have to click in the field and then switch to keyboard to press enter to start the search.

[flodolo]

Note: still trying to tidy things up, because I feel like I might have introduced unnecessary duplication or complexity through all the back and forth. Will re-flag for review once ready and tested.

[mathjazz]

Nice job - it works great.

Left a couple of comments.

Please apply these changes to the CSS and then I'll take another pass at the frontend code.

/* translate.css | http://localhost:8000/static/translate.css */

.search-panel {
  & .search-button {
    width: 100%;
    line-height: 22px;
    padding: 3px;
  }
  & .menu {
    & li {
      &.action-item {
        /* padding: 4px 2px; */
        padding: 2px 4px;
      }
      /* padding: 4px 2px; */
      padding: 2px 4px;
      line-height: 22px;
    }
  }
  & .visibility-switch {
    & .fa-caret-down {
      /* transform: translate(35%, -25%); */
      transform: translate(40%, -25%);
    }
  }
}

& .fas {
  /* margin-left: 1px; */
  margin-left: -5px;
}

[mathjazz]

LGTM

Seems like these changes are not applied yet. Since they are not directly related to the PR, I can also land them separately:

/* translate.css | http://localhost:8000/static/translate.css */

.search-panel {
  & .visibility-switch {
    & .fa-caret-down {
      /* transform: translate(35%, -25%); */
      transform: translate(40%, -25%);
    }
  }
}

& .fas {
  /* margin-left: 1px; */
  margin-left: -5px;
}

[flodolo]

LGTM

Seems like these changes are not applied yet. Since they are not directly related to the PR, I can also land them separately:

/* translate.css | http://localhost:8000/static/translate.css */

.search-panel {
  & .visibility-switch {
    & .fa-caret-down {
      /* transform: translate(35%, -25%); */
      transform: translate(40%, -25%);
    }
  }
}

& .fas {
  /* margin-left: 1px; */
  margin-left: -5px;
}

I didn't scroll down 🤦🏼

[flodolo]

Updated CSS, let me know if I missed anything else.

[flodolo]

Are the options too cramped compared to the 2 commands at the bottom?

[mathjazz]

Great work, thanks!

[mathjazz]

That's what you just fixed in your latest attempt :)