Full width search bar + explicit action buttons for search facets

[Ingvord]

Sync up master with release_search_ui

This one will basically introduce full width search bar, instead of having it in the facets, see #1147

[Ingvord]

I believe the remaining failing test is elastic search bound:

index-ec1c3da3.js:133634 CypressError: `cy.request()` failed on:

http://localhost:3000/api/v3/elastic-search/delete-index?index=test

The response we received from your web server was:

  > 400: Bad Request

This was considered a failure because the status code was not `2xx` or `3xx`.

If you do not want status codes to cause failures pass the option: `failOnStatusCode: false`

-----------------------------------------------------------

The request we sent was:

Method: POST
URL: http://localhost:3000/api/v3/elastic-search/delete-index?index=test
Headers: {
  "Connection": "keep-alive",
  "Authorization": "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJfaWQiOiI2NjNmMmRlNTY4NDczOWZmZGYwZWMxMmUiLCJ1c2VybmFtZSI6ImFkbWluIiwiZW1haWwiOiJhZG1pbkB5b3VyLnNpdGUiLCJhdXRoU3RyYXRlZ3kiOiJsb2NhbCIsIl9fdiI6MCwiaWQiOiI2NjNmMmRlNTY4NDczOWZmZGYwZWMxMmUiLCJpYXQiOjE3MTU0MTY2MDAsImV4cCI6MTcxNTQyMDIwMH0.X6V5RR6sSXEdy7QkaLsko4p1q6_Y3ucvz_IiwKi23YM",
  "Content-Type": "application/json",
  "user-agent": "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36",
  "accept": "application/json",
  "accept-encoding": "gzip, deflate",
  "content-length": 0
}

-----------------------------------------------------------

The response we got was:

Status: 400 - Bad Request
Headers: {
  "x-powered-by": "Express",
  "access-control-allow-origin": "*",
  "content-type": "application/json; charset=utf-8",
  "content-length": "139",
  "etag": "W/\"8b-GT2GRHXQxRi8Bfyq4HNnE6sHijM\"",
  "date": "Sat, 11 May 2024 08:36:40 GMT",
  "connection": "keep-alive",
  "keep-alive": "timeout=5"
}
Body: {
  "statusCode": 400,
  "message": "deleteIndex failed-> ElasticSearchService TypeError: Cannot read properties of undefined (reading 'indices')"
}


Because this error occurred during a `after each` hook we are skipping the remaining tests in the current suite: `Elastic search`
    at <unknown> (http://127.0.0.1:4200/__cypress/runner/cypress_runner.js:133028:72)
    at tryCatcher (http://127.0.0.1:4200/__cypress/runner/cypress_runner.js:1807:23)
    at Promise._settlePromiseFromHandler (http://127.0.0.1:4200/__cypress/runner/cypress_runner.js:1519:31)
    at Promise._settlePromise (http://127.0.0.1:4200/__cypress/runner/cypress_runner.js:1576:18)
    at Promise._settlePromise0 (http://127.0.0.1:4200/__cypress/runner/cypress_runner.js:1621:10)
    at Promise._settlePromises (http://127.0.0.1:4200/__cypress/runner/cypress_runner.js:1701:18)
    at <unknown> (http://127.0.0.1:4200/__cypress/runner/cypress_runner.js:2392:25)
From previous event:
    at Promise.longStackTracesCaptureStackTrace [as _captureStackTrace] (http://127.0.0.1:4200/__cypress/runner/cypress_runner.js:3486:19)
    at Promise._then (http://127.0.0.1:4200/__cypress/runner/cypress_runner.js:1239:17)
    at Promise.then (http://127.0.0.1:4200/__cypress/runner/cypress_runner.js:1132:17)
    at next (http://127.0.0.1:4200/__cypress/runner/cypress_runner.js:144353:64)
    at <unknown> (http://127.0.0.1:4200/__cypress/runner/cypress_runner.js:144374:16)
    at tryCatcher (http://127.0.0.1:4200/__cypress/runner/cypress_runner.js:1807:23)
    at Promise._settlePromiseFromHandler (http://127.0.0.1:4200/__cypress/runner/cypress_runner.js:1519:31)
    at Promise._settlePromise (http://127.0.0.1:4200/__cypress/runner/cypress_runner.js:1576:18)
    at Promise._settlePromise0 (http://127.0.0.1:4200/__cypress/runner/cypress_runner.js:1621:10)
    at Promise._settlePromises (http://127.0.0.1:4200/__cypress/runner/cypress_runner.js:1701:18)
    at <unknown> (http://127.0.0.1:4200/__cypress/runner/cypress_runner.js:2392:25)
From Your Spec Code:
    at Context.eval (webpack://scicat-frontend/./cypress/support/commands.js:371:7)

Let's discuss this at the upcoming meeting

[Junjiequan]

I tested the changes locally and I see that the search query sends only fullquery request, where the fullfacet request is also needed to show the count number correctly.
The e2e fail I believe is due to the UI changes. The fix is to include steps to trigger search before checking the search result.

[Ingvord]

@Junjiequan I have implemented a few fixes including facets count and clicking the search button, however elastic search still fails. Will it be possible to have a zoom chat, so I can learn how to setup and run elastic search tests locally? Thanks

[Junjiequan]

@Junjiequan I have implemented a few fixes including facets count and clicking the search button, however elastic search still fails. Will it be possible to have a zoom chat, so I can learn how to setup and run elastic search tests locally? Thanks

Yes I will be available all day tomorrow or next week after Monday if you prefer. [email protected] is my email you can send me an invite.

One of the common elasticsearch test failing issue I face for local setup, is due to the wrong admin & archiveManager credentials in the root cypress.config.ts that does not align with the credentials stored in DB

[nitrosx]

@Ingvord after I reviewed this PR with @Junjiequan, I realized that there are some open issues that I did not consider.
Please post on the PR

[nitrosx]

This PR initiated a discussion in our team. @Junjiequan and myself had a brainstorm session while reviewing your design.
The current design and the full width search bar is not using efficiently the space on the page and, as consequence, there is plenty of space not used.

I collected thoughts and suggestions and I took the liberty to come up with a proof of concept for the revised design of the datasets page.

I will ask feedback from the community.
@Ingvord I was wondering what we can implement as a part of this PR while you address the comments prior being approved and merged in master

[Ingvord]

@nitrosx , @Junjiequan Thanks for your efforts dedicated to this PR! First of all, I have finally managed to deal with the test.

Concerning the design. I do not have strong opinion on that, to my taste though your proposal seems a bit too dense. I mean I sit in front of 4K display and do not feel wasted space. But I agree that the design is not final, and this PR is more about functionality not look-n-feel.

So I agree - let's ask the community. But I would love to merge this one anyway, and then create another PR focused on the design aspect. Otherwise we risk to stuck in an endless limbo of moving inputs and buttons around ;)

Your thoughts?

[nitrosx]

@Junjiequan will review the PR tomorrow and if nothing major comes up, we will merge, although we should work quickly to address the address the need to optimize the space usage.

I created a new issue to collect feedback about the image that I posted above: #1479

[Junjiequan]

I have two comments would love to hear your thoughts before we merge this.

1. Wouldn't it be better to fully stretch the search bar + button to align with content width below? I agree that we should make major layout improvements in another PR.
2. Two clear button works differently. one resets dataset table, the other one clear filter texts only. I wonder wouldn't it be better that both buttons work the same.

[Ingvord]

@Junjiequan thanks for your comments!

1. The truth is that css is still a voodoo magic for me. If you could commit directly into this branch the way you want it, that would be great! You will save tons of my nerve cells, and I will learn something 🤠

2. As a user I would be confused if innocent clear action on the input will reload the whole table. Maybe we should name the other button "Reset" or something, to avoid mental mapping between these two

[Ingvord]

Thanks @Junjiequan

[Junjiequan]

Here is the screenshot of the css changes. And in the commit, I've also done refactoring slightly, so it follows the pattern of the other components.
If @Ingvord & @nitrosx also think it's ready then maybe we can merge it.