Display attributes with correct capitalization

[CaroFG]

Description

Attributes are uppercased. It's prettier but it can be confusing. Recently, a free-trial customer was getting 0 search results, because he had copied the searchable attributes from the mini-dashboard.

As @guimachiavelli pointed out:

You could argue meilisearch/documentation#2 is not super necessary, but it still seems like an easy enough thing to do and might serve as a subtle way of signalling capitalization is important.

Expected behavior

Attributes should be shown as they were sent, with the original case.

Current behavior

They are uppercased.

Screenshots or Logs
If applicable, add screenshots or logs to help explain your problem.

Environment (please complete the following information):

• Meilisearch version: [e.g. v.0.24.0]
• Browser: [e.g. Chrome version 90.0]

[curquiza]

Thanks
I put this issue as good first issue for the community. Feel free to open a PR

[tacman]

@curquiza Can you point to the file where this happens? Indeed, it's a good first issue, as it's almost certainly removing something. I looked for :::to_ascii_uppercase but didn't find it.

[curquiza]

Pinging @mdubus when you have time to guide the user please 😊

[mdubus]

Hey @tacman 👋

Thanks for your interest in this repo 🙏

The file you're looking for is the src/components/Results/Hit.js one. You can see in the file that it has a HitKey component. The HitKey has a typo10 variant which has the text-transform: uppercase css class, causing our issue.

I guess the way to resolve it would be to override this class to have a text-transform: none here instead (I see in the codebase that it's used elsewhere so we don't want to break anything by removing it).

Let me know if you have any questions, I'd be happy to help you with it 😊

[tacman]

Only Donald Trump thinks that all caps is easier to read. I think the css in type10 should be changed.

It appears that the only other place it's used is in the Version string. Personally, I think v1 is easier to read than V1, and in fact it's overwritten there too.

I've made a PR that mimics how the version is rendered, but since the only 2 places I can find type10 overrides the text transformation, it would make more sense to remove it in the css. But perhaps these type definitions are used elsewhere.

[mdubus]

@tacman indeed I just checked and it would make more sense to just remove the text-transform from the CSS.
I've seen you've opened a PR, could you make the change there? You can also remove the override in the header too 👍

Thanks for your help 🙌 🙏

[tacman]

Done!