feat: add flagsmith support to the playground

README.md

@@ -368,9 +368,41 @@ Follow these steps to setup LaunchDarkly for the demo:
 
 Now that everything is configured, you should be able to [start the demo](#how-to-run-the-demo). Once it's started, select `launchdarkly` from the provider list located at the bottom right of your screen. You should now be able to control the demo app via LaunchDarkly!
 
-### Flagsmith Provider Demo
+### Flagsmith
 
-Documentation coming soon
+[Flagsmith](https://flagsmith.com/) is a open-source feature flag and remote config service. They offer many deployment options including: SaaS, private cloud, or on-prem.
+
+Follow these steps to setup Flagsmith for the demo:
+
+1. Sign-in to your Flagsmith account. If you don't already have an account, you can sign up for the [free plan](https://flagsmith.com/pricing/).
+1. Navigate to `Environment` > `Development` > `Features`.
+1. Create a new feature with the id `new-welcome-message`. Enabled the feature and add a `true` and `false` variation values. Confirm that `true` is the control value and set to 100%.
+
+    <img src="./images/flagsmith/new-welcome-message.png" width="50%">
+
+1. Create a new feature with the id `hex-color`. Enabled the feature and add a `c05543`, `2f5230` and `0d507b` variation values. Confirm that `c05543` is the control value and set to 100%.
+
+    <img src="./images/flagsmith/hex-color.png" width="50%">
+
+1. Create a new feature with the id `fib-algo`. Enabled the feature and add a `recursive`, `memo`, `loop`, `binet`, and `default` variation values. Confirm that `recursive` is the control value and set to 100%.
+
+    <img src="./images/flagsmith/fib-algo.png" width="50%">
+
+1. Create a new segment called `fib3r_employees` and add a rule that checks if email trait `email` contains `@faas.com`.
+
+    <img src="./images/launchdarkly/segment-config.png" width="50%">
+
+1. Select the `fib-algo` feature under the development environment and add a segment override. Select the `fib3r_employees` override, enable the override, and confirm the control is set to `binet`.
+
+    <img src="./images/launchdarkly/segment-override.png" width="50%">
+
+1. Navigate to `Environments` > `Development` > `Settings` and create a new server-side environment key.
+
+    <img src="./images/launchdarkly/server-side-key.png" width="50%">
+
+1. Open the `.env` file and make the value of `FLAGSMITH_ENV_KEY` the key copied above.
+
+Now that everything is configured, you should be able to [start the demo](#how-to-run-the-demo). Once it's started, select `flagsmith` from the provider list located at the bottom right of your screen. You should now be able to control the demo app via Flagsmith!
 
 ## Experimenting beyond the demo
 

packages/app/src/app/provider.service.ts

@@ -86,15 +86,22 @@ export class ProviderService {
           const client = new Flagsmith({
             environmentKey: process.env.FLAGSMITH_ENV_KEY as string,
             enableLocalEvaluation: true,
+            /**
+             * Overriding the default API URL because it was returning a 502.
+             */
+            apiUrl: 'https://api.flagsmith.com/api/v1/',
+            /**
+             * Refresh aggressively for demo purposes.
+             * The Default value in Flagsmith is 60 seconds.
+             */
             environmentRefreshIntervalSeconds: 5,
           });
           return new FlagsmithProvider({
             client,
           });
         }
       },
-      // getting 401s from flagsmith at the moment.
-      available: () => false,
+      available: () => !!process.env.FLAGSMITH_ENV_KEY,
     },
     harness: {
       factory: () => {

packages/js-flagsmith-provider/src/lib/flagsmith.ts

@@ -1,5 +1,5 @@
 import { ParseError, parseValidJsonObject, TypeMismatchError } from '@openfeature/extra';
-import { EvaluationContextValue, JsonValue } from '@openfeature/js-sdk';
+import { EvaluationContextValue, JsonValue, FlagNotFoundError } from '@openfeature/js-sdk';
 import { EvaluationContext, Provider, ResolutionDetails } from '@openfeature/js-sdk';
 import Flagsmith from 'flagsmith-nodejs';
 
@@ -109,12 +109,16 @@ export class FlagsmithProvider implements Provider {
   }
 
   private async evaluate<T>(flagKey: string, identity: Identity): Promise<ResolutionDetails<T>> {
-    const value = identity.identifier
-      ? (await this.client.getIdentityFlags(identity.identifier, identity.traits)).getFeatureValue(flagKey)
-      : (await this.client.getEnvironmentFlags()).getFeatureValue(flagKey);
-    return {
-      value,
-    };
+    const flags = await (identity.identifier
+      ? this.client.getIdentityFlags(identity.identifier, identity.traits)
+      : this.client.getEnvironmentFlags());
+
+    if (!flags.isFeatureEnabled(flagKey)) {
+      throw new FlagNotFoundError('The exists but is disabled.');
+    }
+    const value = flags.getFeatureValue(flagKey);
+    console.log(JSON.stringify(value, null, 2));
+    return { value };
   }
 
   private getFlagTypeErrorMessage(flagKey: string, value: unknown, expectedType: string) {