feat(frontend/feature-flags): Add LaunchDarkly feature flagging UI

[aarushik93]

This PR allows us to feature flag on the frontend, this means we can rollout features in stages, hide features, do AB testing etc.

Changes 🏗️

Added a LaunchDarkly Provider
Added a withFeatureFlag component
Added two env vars for:

• enabling LD
• specifying the public client side key

Usage:

'use client'

import { useFlags } from 'launchdarkly-react-client-sdk'
import { withFeatureFlag } from '@/components/feature-flag/with-feature-flag'

function TestFlagPage() {
  const flags = useFlags()

  return (
    <div className="p-4">
      <h1>If you can see this, the feature flag is ON</h1>
      <pre>Current flag value: {JSON.stringify(flags, null, 2)}</pre>
    </div>
  )
}

export default withFeatureFlag(TestFlagPage, 'test-flag')

Checklist 📋

For code changes:

• I have clearly listed my changes in the PR description
• I have made a test plan
• I have tested my changes according to the test plan:
  • ...

Test plan

- Set LD to false - Navigate to a test page, should not be visible - Set LD to true - Navigate to same test page, should be visible

For configuration changes:

• .env.example is updated or already compatible with my changes
• I have included a list of my configuration changes in the PR description (under Changes)
• I have updated infra repo

Examples of configuration changes

• Changing ports
• Adding new services that need to communicate with each other
• Secrets or environment variable changes
• New or infrastructure changes such as databases

[github-actions]

This pull request has conflicts with the base branch, please resolve those so we can evaluate the pull request.

[github-actions]

Conflicts have been resolved! 🎉 A maintainer will review the pull request shortly.

[Pwuts]

Could you update the checklists in the description? Especially relevant since this PR has a config change.

[Pwuts]

Nice & simple! Just a question: does this only work for enabling/disabling full pages or also individual components?

The PR description also mentions A/B testing. How would you do that using withFeatureFlags?

[github-actions]

This pull request has conflicts with the base branch, please resolve those so we can evaluate the pull request.

[aarushik93]

does this only work for enabling/disabling full pages or also individual components?

rn, just for full pages - we can expand later to individual components too, I'll add a ticket

The PR description also mentions A/B testing. How would you do that using withFeatureFlags?

We can configure/control on the launch darkly side how many users we show what feature to. We'll probably at some point want to extend to choosing specific users, but haven't had that requirement yet. I'll add docs for the launch darkly side as well on notion so it's clear how to use it.

[github-actions]

Conflicts have been resolved! 🎉 A maintainer will review the pull request shortly.