Add side panel (without unrelated changes)

[Strift]

Hi @mdubus, apologies for the huge PR earlier.

This PR should be easier to review. It replaces #580.

Related issue

Fixes partially meilisearch/meilisearch#5361

What does this PR do?

Adds a side-panel on the right of the app which contains

• The link to Meilisearch Cloud
• The help center
• A form to register to the newsletter

Removes

• the Meilisearch Cloud banner
• the help center button

Address the first round of feedback on #580

The Modal is still displayed even if I entered my API Key. I think it should be preferable to hide it if the API key is valid, as it was the case before.

☑️ Removed all changes on the API key modal, so I restored the previous behavior.

On a 13" screen, I'm unable to see the input to add my email address

☑️ Added the ability to scroll in the side panel.

By reading this I was expecting a closing icon, but in fact I see the hamburger icon instead. Maybe we want to dynamically change the icon from hamburger <> cross. WDYT?

☑️ The side panel now uses a close (cross) icon instead of a hamburger.

I suggest you create a Cypress command for this, to avoid repeating it from file to file ;)

☑️ Created a Cypress command to store the API token to local storage.

[mdubus]

Thank you so much for having split the big PR in different ones, it makes a huge difference for me 🥺

Below are a few feedback:

You're missing a background-color on the panel ;)

---

I don't know what "heroicons" is, but here is how I managed icons in this repository:

• I put my svg in the icons/svg folder
• I run yarn icons
• It transforms the SVG into react components that I can use in my app

I'm not against using a different system, but I'd be in favor or consistency especially since this repo is an open-source one :)

---

I submitted a weird email address for the newletter (like [email protected]) and it got submitted successfully. I don't know how we plan to handle those but raising it just in case :)

---

I submitted the newsletter form successfully and wanted to fill it again, but even when I closed the panel and reopened it, I didn't have the input anymore, just the success message. Should we "reset" the state when we close the panel ?

---

The panel is opened by default. If I refresh my page, it opens. I'm afraid this behaviour could be annoying for our users. What would you think of opening it by default unless the user previously closed it? We could store a variable in the localStorage for that :)

---

Apart from those small things it's working well 🚀
Thanks a lot for your work here 🙌

[mdubus]

Out of curiosity, why didn't you use the Input component and override its style if needed?

[mdubus]

Same question as for the Input :)

[Strift]

Hey, thanks for the review.

I fixed the errors. For the improvements, I would recommend doing that in an update if they're not essential. Especially since @curquiza wants to do the release today.

---

You're missing a background-color on the panel ;)

☑️ Indeed, the theme.js was missing the white color. Added!

---

I'm not against using a different system, but I'd be in favor or consistency especially since this repo is an open-source one

I didn't see the point of keeping both the SVG and the components. So I directly saved the SVGs in components.
What was the motivation behind that?

(Heroicons is just an icon library, I named the folder like this so it's more self-documenting.)

---

I submitted a weird email address and it got submitted successfully

Yes, we agreed to roll it out like this and update it later if needed.

Should we "reset" the state when we close the panel ?

I don't think it's an important user journey, so I would recommend doing that in an update.

If I refresh my page, it opens. I'm afraid this behaviour could be annoying for our users. What would you think of opening it by default unless the user previously closed it? We could store a variable in the localStorage for that :)

I'm not sure that's what @meilisearch/product-team wants. But I think it would be a welcome improvement.

[mdubus]

Approving since I don't want to block the release, but I suggest to keep track of the enhancements in an issue so that we can tackle them later :)

[Strift]

Thanks for the quick review! I create the following issues to track the possible enhancements:

• Streamline SVG icons workflow #586
• Add email validation to form submissions #587
• Reset the side panel form registration on modal close #588
• Save panel state in localStorage #589