feat: Implement rebac feature flag via query params #1871
Conversation
Demo
Jenkins 
demos.haus 
Coverage Report
File Coverage
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||
There was a problem hiding this comment.
Don't mind me, just passing through here 😄
I recently implemented localStorage based feature flags in Canonical Console so as soon as I read "feature flag" in the PR title, I became interested to see how other devs implement it.
Flags in query parameter is an interesting way to implement feature flagging. Definitely a lot easier to explain to end users then to have them open the dev tools and run a command to update the local storage xD
Great work!
| @@ -293,6 +294,7 @@ describe("model poller", () => { | |||
| }); | |||
|
|
|||
| it("updates the controller features if JIMM >= 4", async () => { | |||
| localStorage.setItem("rebac", JSON.stringify("true")); | |||
There was a problem hiding this comment.
You don't have to use JSON.stringify here as "true" is already a string.
| localStorage.setItem("rebac", JSON.stringify("true")); | |
| localStorage.setItem("rebac", "true"); |
There was a problem hiding this comment.
Thanks for the review! We ended up changing the approach a bit but I will keep this in mind for future haha
src/components/LogIn/LogIn.tsx
Outdated
| @@ -26,6 +28,8 @@ import UserPassForm from "./UserPassForm"; | |||
| import { ErrorResponse, Label, TestId } from "./types"; | |||
|
|
|||
| export default function LogIn() { | |||
| const { getEnabledFlag, getDisabledFlag } = useFeatureFlags(); | |||
There was a problem hiding this comment.
I think it might be better to move this hook into the App component as it isn't related to authentication.
There was a problem hiding this comment.
Somehow, I first implemented this in App component but it wouldn't work. Will retry.
There was a problem hiding this comment.
we cannot place the useFeatureFlags hook in App.tsx because it uses useQueryParam hook that in turn uses useSearchParams hook. These hooks can only be placed in a component that is wrapped in a router, which essentially, comes under the App.tsx
a different approach could be to use BrowserRouter from react-router-dom but that would require a lot of refactor
Thank you @fasih-mehmood ! The idea for this was Huw's so its all thanks to him haha. |
Ninfa-Jeon
force-pushed
the
feature-flag-rebac
branch
from
06987dc to
32d9e8f
Compare
Done
This commit introduces query parameter-based feature flags to control the enabling and disabling of rebac
useFeatureFlagshook to manageenable-flaganddisable-flagquery parameters.BREAKING CHANGE: The rebac logic is now controlled by query parameters. Existing behaviour may be affected if the query parameters are not set appropriately.
QA
enable-flag=rebacflagskey with value["rebac"]disable-flag=rebacflagskey with value[]Details
https://warthogs.atlassian.net/browse/WD-18923