Check and redirect to search query from 404 page, if results exist

[suprith-hub]

@jcscottiii Could you please review this?

I have two main points to discuss:

1. Handling Bad IDs:
Currently, I'm making an API call to fetch a single feature with the bad ID.
Based on the response, I either show "Go to home" or "Search similar names" options.
Other implementations I've seen seem to directly redirect to the homepage instead of a dedicated 404 page.
Do you think this approach is better, or should we handle it differently?

2. Placement of handleNotFound function:
I've placed handleNotFound in [mention file name].
Is this the right place, or would it be better suited elsewhere?
This fix addressing the issue: #1214

[jcscottiii]

I will try to review this by the end of the day. You will probably need to update or add playwright tests to cover both the badID provided and not provided cases. And will want to add some unit tests too since this is now adding logic to the feature not found page.

Could you also chime in on #1263 with your specs and settings?

[suprith-hub]

I will try to review this by the end of the day. You will probably need to update or add playwright tests to cover both the badID provided and not provided cases. And will want to add some unit tests too since this is now adding logic to the feature not found page.

Could you also chime in on #1263 with your specs and settings?

@jcscottiii I will add playwright test for Search for similar names.
Should I also have a test case for matching the screenshot?
I have some doubts regarding GSoC project: Search UI enhancements.

To implement search in webstatus and chrome-dashboard, can I use RediSearch or is ElasticSearch better.
I am planning to research on RediSearch.
Am I in right direction, am I supposed to use these tools ?
Where can I ask doubts like these

[jcscottiii]

@suprith-hub

GSoC project: Search UI enhancements

The work for that proposal will happen primarily in https://github.com/GoogleChrome/chromium-dashboard then later be ported to here.

You should create an issue in https://github.com/GoogleChrome/chromium-dashboard

As a heads up, we try to use managed services in GCP. This reduces the maintenance burden. So if you're looking into RediSearch, check if Memorystore for Redis supports it (docs). Plus, the chromium-dashboard already uses redis so it simplifies the changes needed to the infrastructure.

I don't think there's a managed version of ElasticSearch in GCP. But feel free to see if there are other GCP managed services that could help.

These are all just some of my thoughts. But you should create the issue in that repo to start the discussion before diving too deep.

cc: @jrobbins for context

[jcscottiii]

@suprith-hub For this change, I see that you are calling getFeatures to check if there are any features with similar names.

All that said, I would prefer to show suggestions like mentioned in #1214 but I'm not sure how much time you have to commit to this. But I appreciate any and all contributions. If you don't have much time, just show the second button to search for similar features.

---

If we are going to call getFeatures, we should present some of the options. Otherwise, we could just add the second button alongside the existing go home button.

Also, you should use Lit's Task for making asynchronous network calls like that instead of using the apiclient directly. More about it here: https://lit.dev/docs/data/task/

Also, I would move the API client call itself to the notfound error page.

Other notes:

We should move the creation of the 404 feature page URL string to https://github.com/GoogleChrome/webstatus.dev/blob/main/frontend/src/static/js/utils/urls.ts

Also inside that URL.ts helper, you should do the retrieval of the feature ID instead of pulling from the window object directly.

[suprith-hub]

@suprith-hub For this change, I see that you are calling getFeatures to check if there are any features with similar names.

All that said, I would prefer to show suggestions like mentioned in #1214 but I'm not sure how much time you have to commit to this. But I appreciate any and all contributions. If you don't have much time, just show the second button to search for similar features.

If we are going to call getFeatures, we should present some of the options. Otherwise, we could just add the second button alongside the existing go home button.

Also, you should use Lit's Task for making asynchronous network calls like that instead of using the apiclient directly. More about it here: https://lit.dev/docs/data/task/

Also, I would move the API client call itself to the notfound error page.

Other notes:

We should move the creation of the 404 feature page URL string to https://github.com/GoogleChrome/webstatus.dev/blob/main/frontend/src/static/js/utils/urls.ts

Also inside that URL.ts helper, you should do the retrieval of the feature ID instead of pulling from the window object directly.

@jcscottiii about showing similar results,
if there are more results then there has to be pagiination. So, should I make a UI which will just have names with pagination ?
If yes: What will be the page size(should it be dynamic)
Or should we say here are some similar results and display max 25 results?

[jcscottiii]

It is not meant to replace the overview page. But only include suggestions. It does not need to show all of the possible results like the overview page.

Instead, it could:

• Show up to 5 results. The phrasing could be like:

We could not find Feature ID: <featureID>

Here are some similar features:
- A
- B
- C
- D
- E

Button to Search for more similar features | Button to return home | Button to report bugs

The list and the first button would only appear if it found features.

Hopefully that makes sense. Let me know if you have any questions.

[suprith-hub]

It is not meant to replace the overview page. But only include suggestions. It does not need to show all of the possible results like the overview page.

Instead, it could:

• Show up to 5 results. The phrasing could be like:

We could not find Feature ID: <featureID>

Here are some similar features:
- A
- B
- C
- D
- E

Button to Search for more similar features | Button to return home | Button to report bugs

The list and the first button would only appear if it found features.

Hopefully that makes sense. Let me know if you have any questions.

@jcscottiii I will make the changes by tomorrow, and
I have raised an issue regarding GSoC Search tool suggestion. I previously sent an email asjing doubts regarding the project, but I’m not sure if it was received. Could there be any domain restrictions on emails? If there’s a preferred way to contact you, please let me know.

[suprith-hub]

@jcscottiii does these look good ?
Can you suggest if changes are necessary...
I will make a draft commit which I will revert after suggestions

[jcscottiii]

@suprith-hub Thank you for the updates with the three screenshots/cases. We should ignore the second case for now. If there are no suggestions, there's no need to show the Search for similar features button.

[suprith-hub]

@suprith-hub Thank you for the updates with the three screenshots/cases. We should ignore the second case for now. If there are no suggestions, there's no need to show the Search for similar features button.

@jcscottiii I have written tests and made latest push, I think the feature is almost complete now. Can you review it...

[jcscottiii]

@suprith-hub I have not forgotten about this. I will get around to reviewing this tomorrow.

[suprith-hub]

@suprith-hub I have not forgotten about this. I will get around to reviewing this tomorrow.

Yeah, no worries at all! I figured you might’ve scheduled it — thanks for letting me know! 😊

[jcscottiii]

Thanks for the contribution. Take a look at these comments and let me know if you have any questions.

[suprith-hub]

@jcscottiii Can I declares variables to check statuses, here... is it a good way?

[suprith-hub]

@jcscottiii I have made the changes.
Merged snapshot test and removed API call in this test shows similar features and all buttons when results exist.
Use lit Task.render() instead of property similarResults.
I have 2 doubts:

1. Is is correct to define variables for classNames styling.
2. Can I use classnames like gap-16, gap-32 ?

[suprith-hub]

@jcscottiii I have rebased the branch and made latest changes, I think the PR can be reviewed now.