Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use API V3 #132

Merged
merged 9 commits into from
Mar 27, 2023
Merged

Use API V3 #132

merged 9 commits into from
Mar 27, 2023

Conversation

stsewd
Copy link
Member

@stsewd stsewd commented Mar 9, 2023

  • Added 2 new options: rtd_sphinx_search_default_filter and rtd_sphinx_search_filters.
  • The options are passed as a JSON object to be read by our JS code.
  • The default filter defaults to the current project and version (extracted from the RTD env vars)
  • Filters are implemented as check boxes, we only support one filter at a time (when a filter is selected, we uncheck all others)

How to test locally:

cd docs
make clean html
  • Open the _build/index.html file.

showcase

showcase.webm

Closes #129
Closes #130
Closes #131

@stsewd stsewd marked this pull request as ready for review March 14, 2023 22:12
@humitos
Copy link
Member

humitos commented Mar 15, 2023

I haven't tested this, but I just skimmed the code thinking about readthedocs/readthedocs.org#10127 and how we are going to integrate it there. It seems that the only relevant change is the addition of two new configs. We can get those from the user (.readthedocs.yaml) or the doctool itself (readthedocs-build.yaml). I think it looks good and we will be able to integrate it properly 👍🏼

Filters are implemented as check boxes, we only support one filter at a time (when a filter is selected, we uncheck all others)

Instead of using check boxes, I'd say we should use radio buttons then, which provide this UX natively.

@stsewd
Copy link
Member Author

stsewd commented Mar 15, 2023

Instead of using check boxes, I'd say we should use radio buttons then, which provide this UX natively.

Radio buttons don't allow you to uncheck them.

Search by <a href="https://readthedocs.org/">Read the Docs</a> & <a href="https://readthedocs-sphinx-search.readthedocs.io/en/latest/">readthedocs-sphinx-search</a> \
</div>';
const generateAndReturnInitialHtml = (filters) => {
let innerHTML = `
Copy link
Member Author

Choose a reason for hiding this comment

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

HTML is mostly the same, diff shows like all changed, but only the trailing \ was removed to just use a multine string. The new addition is everything inside <div class="search__filters">

Copy link
Member

@ericholscher ericholscher left a comment

Choose a reason for hiding this comment

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

This looks reasonable, but I haven't looked at the JS super heavily. I need to spend a bit more time looking over this, but the high-level seems reasonable?

We're looking at a bunch of other ways to pass data around in the readthedocs-client, but the JS approach here looks workable to start.

sphinx_search/static/js/rtd_sphinx_search.js Show resolved Hide resolved
Copy link
Member

@humitos humitos left a comment

Choose a reason for hiding this comment

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

I think this is good to move forward. I didn't find anything where I would block this PR. I really want to get this PR merged so I can continue working on the js client.

@stsewd @ericholscher are there specific things you want to double-check before merging?

# sphinx-js isn't compatible with python 3.10.
# https://github.com/mozilla/sphinx-js/issues/186
python: "3.9"
python: "3.11"
Copy link
Member

Choose a reason for hiding this comment

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

Suggested change
python: "3.11"
python: "3"

sphinx_search/extension.py Show resolved Hide resolved
sphinx_search/static/js/rtd_sphinx_search.js Show resolved Hide resolved
sphinx_search/static/js/rtd_sphinx_search.js Show resolved Hide resolved
const config = getConfig();
// Add filters below the search box if present.
if (filters.length > 0) {
let li = createDomNode("li", {"class": "search__filters__title"});
Copy link
Member

Choose a reason for hiding this comment

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

I don't like too much the pattern of "generating nodes on the fly" a lot and I'd prefer to use literal strings if possible. This way is a lot easier to read and follow the code.

Copy link
Member Author

Choose a reason for hiding this comment

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

If you mean building the strings manually, we need to be more cautious about user input, a better pattern can be just building the skeleton first, and then change that (#117 (comment))

sphinx_search/static/js/rtd_sphinx_search.js Show resolved Hide resolved
@stsewd
Copy link
Member Author

stsewd commented Mar 23, 2023

are there specific things you want to double-check before merging?

Well, I need to fix the test :D, but wanted a review first, before dealing with selenium

@ericholscher
Copy link
Member

ericholscher commented Mar 23, 2023

I'm 👍 on shipping this, since it's not super heavily used, if it's been reviewed. I think user feedback will be the main thing that we care about. I agree this is a really exciting addition, so let's ship it and get it running on our docs, and then we'll get lots more feedback I imagine :)

If the tests are super brittle or annoying, we can also discuss changing them up in some fashion. I don't have a ton of context about how complex they are, but I feel like selenium is probably overkill, and we could be using some lighter weight JS test stuff? Though again, I don't have much knowledge there..

@stsewd
Copy link
Member Author

stsewd commented Mar 23, 2023

If the tests are super brittle or annoying, we can also discuss changing them up in some fashion. I don't have a ton of context about how complex they are, but I feel like selenium is probably overkill, and we could be using some lighter weight JS test stuff? Though again, I don't have much knowledge there..

Yeah, I'd prefer more unit tests here at the js level. But we do have some UI logic that selenium helps to test, but also, it's small, so it isn't hard to manually test that.

humitos added a commit to readthedocs/addons that referenced this pull request Mar 25, 2023
- update styles
- integrate under `/`

I copied all the code from
readthedocs/readthedocs-sphinx-search#132.
However, there are lot of things that are not required for this stage.
I removed some of them and make the integration nicer with the client we are
creating.

These changes are related to the HTML structure and the CSS style. The
functionality is exactly the same.

Related #19
humitos added a commit to readthedocs/addons that referenced this pull request Mar 25, 2023
- update styles
- integrate under `/`

I copied all the code from
readthedocs/readthedocs-sphinx-search#132.
However, there are lot of things that are not required for this stage.
I removed some of them and make the integration nicer with the client we are
creating.

These changes are related to the HTML structure and the CSS style. The
functionality is exactly the same.

Related #19
@humitos
Copy link
Member

humitos commented Mar 27, 2023

Cool! Since only tests were left here, I started using the .js file from this repository in the new client. See readthedocs/addons#19. I had to modify some part of it to allow me to move forward with the new integration. However, I don't think that's a problem since it's already using the APIv3 backend -- which is the work done in this PR.

@stsewd stsewd merged commit ca36a15 into main Mar 27, 2023
@stsewd stsewd deleted the use-api-v3 branch March 27, 2023 18:18
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.

Update to use Search api V3 Add filtering UI to search Support default filters
3 participants