Feat: New Feature Popover

[cadeban]

Description

AVO-554: We have a lot of planned changes for our app, and we need a way to let people know about all of our cool new features.

Changes:

• Adds New Feature Popover component
  • Only supports 1 popover at a time
  • This component supports a portal version and a non-portal version
• Adds popover content and atomsWithStorage for Date Picker feature (not finalized)

Todo:

• Dark Mode 🕶️
• more tests
• storybook

Open for discussion:

• How do we want to handle multiple? Changelog, walkthrough (with max # of popovers)? -> just 1
• Do we want modal background? -> probably not

Preview

Date Picker example (portal):

Desktop view	Mobile view

Future Price example (non-portal):

Desktop view	Mobile view*

*Note how the in the non-portal version the popover is behind the TimeController

Dark mode:

Double check

• I have tested my parser changes locally with poetry run test_parser "zone_key"
• I have run pnpx prettier@2 --write . and poetry run format in the top level directory to format my changes.

[cadeban]

@tonypls This PR still needs some tests, but you can take a look at the code whenever you have time

[silkeholmebonnen]

Looks really good! Just a couple of questions and comments

[silkeholmebonnen]

Do you think we should add another layer in this if we will add more feature popovers in the future?
Maybe something like this:

Suggested change

	"new-feature-popover": {
	"title": "Select a Date to Explore",
	"content": "Use the date picker to view historical data on electricity sources, CO2 emissions, and prices."
	},
	"new-feature-popover": {
	"date-picker": {
	"title": "Select a Date to Explore,"
	"content": "Use the date picker to view historical data on electricity sources, CO2 emissions, and prices."
	},
	},

[cadeban]

I think we're only adding a single new feature popover for now, since we don't want to overwhelm the user with a bunch of popovers when they first arrive

[silkeholmebonnen]

This should not be showing until we actually implement it. Meanwhile, should we just add it in a FF or what do you think?

Also, do you think we should add an end date for when it should not show up for any users anymore? e.g a month after the release of the new feature?

[silkeholmebonnen]

Why is this needed when it wasn't before?

If it is needed, then we could use useAtomValue to match the other atom values in the component

[cadeban]

At the time I originally wrote this, the popover was displaying over the loading screen. However, that no longer seems to be an issue, so I will remove the isLoadingMap check

EDIT: I think it's because I removed portal as the default behavior on the popover

[silkeholmebonnen]

Depending on how we decide to do the translation (see en.json comment), then it might be necessary to give the translation strings as props

[cadeban]

Will make a follow up PR to automatically dismiss the popover if someone clicks elsewhere on the app

[cadeban]

@silkeholmebonnen @tonypls would y'all please take another look at this PR? Thanks!

Copilot reviewed 6 out of 8 changed files in this pull request and generated no suggestions.

Files not reviewed (2)

• web/package.json: Language not supported
• web/src/locales/en.json: Language not supported

[VIKTORVAV99]

@cadeban to fix the lockfile just merge master and run pnpm install before committing it to git. PNPM has built in merge resolution for the lockfiles :)