Feature: replace RnDiffApp with entered AppName

[Naturalclar]

Summary

This PR is part of #108
This adds a text input in the header which allows user to enter their AppName.
All the RnDiffApp and rndiffapp will be replaced with the entered AppName (in lowercase if needed)

Test Plan

What are the steps to reproduce?

Checklist

• I tested this thoroughly

[pvinis]

so good! awesome. I'll test it when I'm home before merging.

[lucasbento]

Hi @Naturalclar, thank you for opening this PR.

The functionality is pretty useful, however, I would rather have the input for the application name to be under a button (the cog on the top right, for instance) as this is not required for everyone and can be just noise for most of the users.

About the warning on the bottom, I like it, I would suggest having it:

• Only showing when the user clicks on the Show me how to upgrade! button;
• As an info alert, you can check it here;
• With a button to close it which will only show it again if the user reloads/reopens the page (using state).

What do you think?

[Naturalclar]

@lucasbento @pvinis
Thanks for the feedback!
I've placed the AppName input inside the setting PopOver.
What do you think?

As for the warning on the bottom, it's not part of this PR, but I'll gladly make another PR that makes the change you request for :)

[pvinis]

Pretty great! I have two things to comment on.

• I would like a placeholder for the input field, some like MyAwesomeApp, so users can see the usual capitalization.
• When I type fast in there, the whole diff view refreshes and some of the time the result is not correct, like

[Naturalclar]

I would like a placeholder for the input field, some like MyAwesomeApp, so users can see the usual capitalization.

Sounds good! I've added a placeholder to the input form.

When I type fast in there, the whole diff view refreshes and some of the time the result is not correct

I'm wondering what would be the best way to make the form without this error happening.
Should I place a buton inside settings to set the AppName so that refetching won't happen during input?

[lucasbento]

Awesome PR, thank you for your work!

A few things that I would like to be changed:

• The input label doesn't match the others (the version selectors), it currently says Your AppName:, I would recommend changing it to What's your app name?;
• The spacing between the input and the label doesn't match the selectors either, it would be nice to keep UI consistency.

I'm wondering what would be the best way to make the form without this error happening.

You can use a timeout to only set the app name after the user stops typing: https://stackoverflow.com/a/7849308/4252781, we can try this to see how it looks like, I recommend using 750 instead of 1000 ms.

[Naturalclar]

@pvinis @lucasbento
Thanks so much for the feedback!
I've adjusted the style of the input a bit, and fixed the problem for typing fast.
the setTimeout seem to have done the trick! So awesome!

[lucasbento]

This looks terrific, if I could approve twice I would.

Thanks for this contribution @Naturalclar!

[kelset]

This looks so great ❤️ thanks @Naturalclar 👏

[pvinis]

awesome!