Lf 4375 spotlight animals add animals beta spotlight

[Duncan-Brain]

Description

Adds animals beta spotlight

Notes:

• I filled in missing for only some strings as I learned other aren't adding MISSING anymore!
• I don't love prop drilling the open Feedback Survey state -- if we get more of these it might be worth making a provider.
• 600px issue (see video) really stumps me
  • there is some interplay with the animation of the side menu (commenting out the keyframes prevents this) -- in most circumstances the side menu animation has been run before getting to the animals screen (eg on home page). One can track the animationend event but its messy for not much value.

Screen.Recording.2024-11-22.at.11.36.20.AM.mov

Jira link:LF-4375

Type of change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update

How Has This Been Tested?

Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration

• Passes test case
• UI components visually reviewed on desktop view
• UI components visually reviewed on mobile view
• Other (please explain)

Checklist:

• I have commented my code, particularly in hard-to-understand areas
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes
• The precommit and linting ran successfully
• I have added or updated language tags for text that's part of the UI
• I have added "MISSING" for all new language tags to languages I don't speak
• I have added the GNU General Public License to all new files

[antsgar]

Looks great! 🎉 left one minor comment but not a blocker.

My only thought is that the location for this spotlight means that the user won't see it unless they navigate to the Animals section, and by that point they have already noticed it so there's less impact to having a spotlight. It seems to me it'd be more useful to have it on the "Animals" text in the menu?

[antsgar]

Since we'll likely be needing similar "beta" spotlights for upcoming features, I could see value in having a BetaSpotlight reusable component with only the more specific parameters as props, and then having that component be a child of this one. Not a blocker for merge though, can be done when we have an upcoming beta feature!

[kathyavini]

@antsgar did you have any thoughts on the failure at 599-600px Duncan mentioned because it has me totally stumped! Or is it safe to say we don't care if one particular screen width is non-functional?

Edit: actually it might be even more niche than that. It was definitely reproducible for me but only with window resize, which seems like nothing we have to worry about.

[kathyavini]

I also had the same initial thought as Anto regarding the spotlight requiring Animal Inventory to be clicked (it's almost too late at that point to be spotlighting) but I guess if it targets the menu, there wouldn't be anything to highlight in mobile view? Well, I guess until the menu is opened for the first time? 🤔

@Duncan-Brain I like your idea about a provider for those props! For the next iteration / beta feature!

[kathyavini]

Okay, it's a little too late but I think we'll want to avoid this in the future -- renaming strings that right now are only in CrowdIn -- because CrowdIn UX is not good for it.

I think the original translation was preserved (only and a bit cryptically) in the TM & ML suggestion, but its lost the authorship metadata and there appears to be no way to search for it 🫤

[Duncan-Brain]

Yeahhh, I knew it as I was doing it but figured we will need to be able to change key names. This one is particularly long I should have checked first. But was maybe hoping they hadn't got to it in the couple days badge was in for.

[Duncan-Brain]

@antsgar @kathyavini

In the designs it seems to be shown on inventory, I think one of the nice thing about the placement is that it isn't obtrusive unless you navigate to animals. Until then it is a curiosity you can find out about when you click the menu.

For the 600px thing -- yeah I tried to describe its a very weird thing that only happens essentially when you navigate directly to the inventory screen bypassing the menu animation on all other screens. If you see the menu animation anywhere else, it shouldn't happen.