Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix the feature flags in production on hydration #4084

Merged
merged 6 commits into from Apr 13, 2024
Merged

Conversation

obulat
Copy link
Contributor

@obulat obulat commented Apr 9, 2024

Fixes

Fixes #4082 by @obulat

Description

The feature flag store was using the env variable to get the deployment environment and the flag state for this environment. However, the env variable is not available on the client. I moved the setting to publicRuntimeConfig. To use the config in the feature flag store functions (getFlagStatus, getFeatureState), I had to move them inside the store itself. Because this was not available in some getters that used these functions, I converted them to actions.

I also updated the e2e setup to only set the feature cookies when we explicitly set some feature state in preparePageForTests, otherwise we don't set it to not change the default state.

Testing Instructions

On main, run the app in production mode using just frontend/run build and then DEPLOYMENT_ENV=production just frontend/run start.
Go to http://localhost:8443/preferences and open console. You should see the errors mentioned in the linked issue in the console. When you attempt to click on the switchable input, the inner circle disappears.

Do the same in this branch, and you should be able to change the state of the switchable flags without errors. You can check the cookie state to confirm the flag was set. You can also see that additional search views are visible when you turn them on.

Checklist

  • My pull request has a descriptive title (not a vague title likeUpdate index.md).
  • My pull request targets the default branch of the repository (main) or a parent feature branch.
  • My commit messages follow best practices.
  • My code follows the established code style of the repository.
  • I added or updated tests for the changes I made (if applicable).
  • I added or updated documentation (if applicable).
  • I tried running the project locally and verified that there are no visible errors.
  • I ran the DAG documentation generator (if applicable).

Developer Certificate of Origin

Developer Certificate of Origin
Developer Certificate of Origin
Version 1.1

Copyright (C) 2004, 2006 The Linux Foundation and its contributors.
1 Letterman Drive
Suite D4700
San Francisco, CA, 94129

Everyone is permitted to copy and distribute verbatim copies of this
license document, but changing it is not allowed.


Developer's Certificate of Origin 1.1

By making a contribution to this project, I certify that:

(a) The contribution was created in whole or in part by me and I
    have the right to submit it under the open source license
    indicated in the file; or

(b) The contribution is based upon previous work that, to the best
    of my knowledge, is covered under an appropriate open source
    license and I have the right under that license to submit that
    work with modifications, whether created in whole or in part
    by me, under the same open source license (unless I am
    permitted to submit under a different license), as indicated
    in the file; or

(c) The contribution was provided directly to me by some other
    person who certified (a), (b) or (c) and I have not modified
    it.

(d) I understand and agree that this project and the contribution
    are public and that a record of the contribution (including all
    personal information I submit with it, including my sign-off) is
    maintained indefinitely and may be redistributed consistent with
    this project or the open source license(s) involved.

@obulat obulat requested a review from a team as a code owner April 9, 2024 18:08
@openverse-bot openverse-bot added 🟧 priority: high Stalls work on the project or its dependents 🛠 goal: fix Bug fix 💻 aspect: code Concerns the software code in the repository 🚦 status: awaiting triage Has not been triaged & therefore, not ready for work labels Apr 9, 2024
@github-actions github-actions bot added 🧱 stack: documentation Related to Sphinx documentation 🧱 stack: frontend Related to the Nuxt frontend labels Apr 9, 2024
@obulat obulat removed the 🚦 status: awaiting triage Has not been triaged & therefore, not ready for work label Apr 9, 2024
@obulat obulat requested a review from dhruvkb April 9, 2024 18:59
Copy link

Full-stack documentation: https://docs.openverse.org/_preview/4084

Please note that GitHub pages takes a little time to deploy newly pushed code, if the links above don't work or you see old versions, wait 5 minutes and try again.

You can check the GitHub pages deployment action list to see the current status of the deployments.

@zackkrida zackkrida self-assigned this Apr 9, 2024
@zackkrida zackkrida requested review from sarayourfriend and removed request for AetherUnbound April 9, 2024 20:18
@sarayourfriend
Copy link
Contributor

Unfortunately I don't see the error on main ☹️ . I've checked and made sure that I am on the latest commit on main, and don't see anything between d25fa3a ("(tag: frontend-2024.04.09.03.50.12, tag: api-2024.04.09.03.50.11) Turn on additional search views frontend (#4043)") and HEAD that would influence this.

I've also tried enabling and disabling the feature, going back and forth between different pages, and I never get the error described in the issue.

It turns out I didn't understand these instructions correctly:

On main, run the app in production mode using just frontend/run build and then just frontend/run start.

I was just running the app using build and start, but did not pass DEPLOYMENT_ENV=production to the environment. I'll update the testing instructions to clarify this. I realised this after remembering the environment variable being involved in the code changes.

The error shows up for me now, so I'll get back to testing this.

Copy link
Contributor

@sarayourfriend sarayourfriend left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This mostly LGTM. I was nervous about this change when I saw the line count, but in reviewing the code, I see that it is mostly moving things around, rather than actually making changes to the logic in any way.

As I mentioned private, I still think it is best not to deploy new features to production in the second half of the week, and I did think this was our agreed approach (which is why we target Tuesdays for releases).

However, I am requesting changes, because one of the tests added in prefereces.spec.ts is incorrect. The requested change is either to (a) also fix the checkbox bug in this PR, (b) fix the checkbox bug in another PR that blocks this one, or (c) remove that test from this PR, fix the checkbox bug in a critical a11y PR, and in that PR add the test back.

The test as it stands should not be committed to main, though, no more than any other factually and logically incorrect test should.

frontend/test/playwright/utils/navigation.ts Outdated Show resolved Hide resolved
frontend/test/playwright/e2e/preferences.spec.ts Outdated Show resolved Hide resolved
frontend/test/playwright/e2e/preferences.spec.ts Outdated Show resolved Hide resolved
frontend/test/playwright/e2e/preferences.spec.ts Outdated Show resolved Hide resolved
Copy link
Contributor

@sarayourfriend sarayourfriend left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sorry, I meant to request changes, no approve.

Copy link
Member

@dhruvkb dhruvkb left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM, the changes work as expected locally. I am able to toggle all the preferences and see their effect in the app as well as in the cookies.

Copy link
Member

@zackkrida zackkrida left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this looks good 👍 Looking forward to a future approach where we do not need to specify a list of feature flag values in frontend/test/playwright/utils/navigation.ts

@obulat obulat dismissed sarayourfriend’s stale review April 13, 2024 04:38

Change requests were adressed

Signed-off-by: Olga Bulat <obulat@gmail.com>
Signed-off-by: Olga Bulat <obulat@gmail.com>
Signed-off-by: Olga Bulat <obulat@gmail.com>
Signed-off-by: Olga Bulat <obulat@gmail.com>
@obulat obulat merged commit 63af1af into main Apr 13, 2024
40 checks passed
@obulat obulat deleted the fix/feature-flags branch April 13, 2024 16:19
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
💻 aspect: code Concerns the software code in the repository 🛠 goal: fix Bug fix 🟧 priority: high Stalls work on the project or its dependents 🧱 stack: documentation Related to Sphinx documentation 🧱 stack: frontend Related to the Nuxt frontend
Projects
Archived in project
Development

Successfully merging this pull request may close these issues.

Switchable flags don't work in production
5 participants