feat(feature-flags): use flipt as feature flag service

.flipt.yml

@@ -0,0 +1,3 @@
+version: "1.0"
+include:
+  - "ui/features.yaml"

.github/workflows/main.yml

@@ -11,6 +11,23 @@ on:
       - "main"
       - "develop"
 jobs:
+  featureflags:
+    runs-on: ubuntu-latest
+    name: "Validate & Push Feature Flags"
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - uses: flipt-io/[email protected]
+      - run: flipt validate
+      - name: Build and Push bundle
+        # only build and push feature flags from the develop branch
+        if: github.ref == 'refs/heads/develop'
+        env:
+          FLIPT_STORAGE_OCI_AUTHENTICATION_USERNAME: ${{ github.actor }}
+          FLIPT_STORAGE_OCI_AUTHENTICATION_PASSWORD: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          flipt bundle build sitrep-featureflags:latest
+          flipt bundle push sitrep-featureflags:latest ghcr.io/f-eld-ch/sitrep/featureflags:develop
   build:
     runs-on: ubuntu-latest
     name: "Test and Build"

docs/development/FeatureFlag.md

@@ -9,11 +9,20 @@ We intend to implement and use Feature Flags to enable continuous development an
 
 ## Sitrep Feature Flags Policy:
 1. Responsibility for each Feature Flag and adherence to this policy lies with the developer implementing it.
-2. Feature Flags shall only be implemented in frontend UI-elements, to enable or disable access to certain functionalities. 
+2. Feature Flags shall only be implemented in frontend UI-elements, to enable or disable access to certain functionalities.
 3. No Feature Flags must be implemented in back-end code. However, this does not apply to backend API endpoints needed for frontend Feature Flags.
 4. A list of all prior and currently active Feature Flags shall be kept (specifics tbd) and include at least the following information: intended Use Case, intended life-span, date implemented, date removed, @f-eld-ch/core-development member name.
-5. The intended life-span of every Feature Flag must not exceed 3 months as of integration of the Feature Flag. Furthermore, it must be appropriately documented in the code using line comments and in the list (point 4). 
+5. The intended life-span of every Feature Flag must not exceed 3 months as of integration of the Feature Flag. Furthermore, it must be appropriately documented in the code using line comments and in the list (point 4).
 6. In case an extension of the life-span is warranted (at least 2 members of the development-team concur), the life-span may be prolonged once by a maximum of 3 months. The extension must be documented in the list (point 4). After this, no further extensions must be made.
 7. If a Feature Flag is used for feature testing, the organization/user who requested the feature shall be the early-adopter for said feature. If no request was made, early-adopters are chosen by the development team.
 8. When a Feature is released to all users, the corresponding Feature Flag shall be removed within the next 7 days, regardless if the intended life-span is up or not.
 9. All members of @f-eld-ch/core-development must at all times have access to all features under Feature Flags irrespective of their status.
+
+
+## How to add new Feature Flags
+
+1. Update the feature flag file in the corresponding directory, e.g. ui/features.yaml according to the flipt documentation.
+2. Create a new PR and the syntax will be checked by the CI/CD pipeline.
+3. After the PR is merged, the feature flag container (ghcr.io/f-eld-ch/sitrep/featureflags:develop) will be build and automatically pulled by the flipt service.
+
+This means that if you want to use a new feature flag, create it first, make a PR and only then start the development works that depend on the feature flag.

ui/features.yaml

@@ -0,0 +1,32 @@
+version: "1.2"
+namespace: sitrep-ui
+flags:
+  # nimdanitro: flag for rolling out tasks Module, remove after tasks modules is GA
+  - key: show-tasks
+    name: Show Tasks
+    type: BOOLEAN_FLAG_TYPE
+    description: Show the task module (Pendenzen)
+    enabled: false
+    rollouts:
+      - segment:
+          key: Development
+          value: true
+  # nimdanitro: flag for rolling out Resources Module, remove after resources modules is GA
+  - key: show-resources
+    name: Show Resources
+    type: BOOLEAN_FLAG_TYPE
+    description: Show the resources module (Mittel)
+    enabled: false
+    rollouts:
+      - segment:
+          key: Development
+          value: true
+segments:
+  - key: Development
+    name: Development
+    constraints:
+      - type: STRING_COMPARISON_TYPE
+        property: domain
+        operator: isoneof
+        value: '["dev.sitrep.ch","localhost","127.0.0.1"]'
+    match_type: ALL_MATCH_TYPE

ui/index.html

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta
       http-equiv="Content-Security-Policy"
-      content="default-src 'self'; img-src 'self' data:; style-src 'self' 'unsafe-inline'; style-src-attr 'self'; child-src 'none'; worker-src 'self' blob:; script-src-elem 'self' https://api.mapbox.com; connect-src 'self' ws://* wss://* https://*;"
+      content="default-src 'self'; img-src 'self' data:; style-src 'self' 'unsafe-inline'; style-src-attr 'self'; child-src 'none'; worker-src 'self' blob:; script-src 'self' 'wasm-unsafe-eval'; script-src-elem 'self' https://api.mapbox.com; connect-src 'self' ws://* wss://* https://*;"
     />
     <meta name="description" content="SitRep" />
     <link rel="icon" href="/favicon-48x48.ico" sizes="48x48" />

ui/package.json

@@ -12,6 +12,10 @@
     "@fortawesome/free-solid-svg-icons": "^6.6.0",
     "@fortawesome/react-fontawesome": "^0.2.2",
     "@mapbox/mapbox-gl-draw": "~1.4.3",
+    "@openfeature/core": "^1.4.0",
+    "@openfeature/flipt-web-provider": "^0.1.0",
+    "@openfeature/react-sdk": "^0.4.6",
+    "@openfeature/web-sdk": "^1.2.4",
     "@turf/bearing": "^7.1.0",
     "@turf/center": "^7.1.0",
     "@turf/helpers": "^7.1.0",

ui/src/App.tsx

@@ -23,7 +23,8 @@ import { UserState } from "types";
 import { UserContext } from "utils";
 import MessageSheet from "views/journal/MessageSheet";
 import { Layout, LayoutMarginLess } from "views/Layout";
-import { default as client } from "./client";
+import { default as client } from "client";
+import { Provider as FeatureFlagProvider } from "FeatureFlags";
 
 const Map = lazy(() => import("views/map"));
 
@@ -65,126 +66,128 @@ function App() {
   return (
     <UserContext.Provider value={userState}>
       <ApolloProvider client={client}>
-        <Router>
-          <Routes>
-            <Route path="/incident">
-              <Route
-                path="list"
-                element={
-                  <Layout>
-                    <IncidentList />
-                  </Layout>
-                }
-              />
-              <Route
-                path="new"
-                element={
-                  <Layout>
-                    <IncidentNew />
-                  </Layout>
-                }
-              />
-
-              <Route path=":incidentId">
+        <FeatureFlagProvider>
+          <Router>
+            <Routes>
+              <Route path="/incident">
                 <Route
-                  path="edit"
+                  path="list"
                   element={
                     <Layout>
-                      <IncidentEditor />
+                      <IncidentList />
+                    </Layout>
+                  }
+                />
+                <Route
+                  path="new"
+                  element={
+                    <Layout>
+                      <IncidentNew />
                     </Layout>
                   }
                 />
 
-                <Route path="journal">
+                <Route path=":incidentId">
                   <Route
-                    path="view"
+                    path="edit"
                     element={
                       <Layout>
-                        <JournalOverview />
+                        <IncidentEditor />
                       </Layout>
                     }
                   />
+
+                  <Route path="journal">
+                    <Route
+                      path="view"
+                      element={
+                        <Layout>
+                          <JournalOverview />
+                        </Layout>
+                      }
+                    />
+                    <Route
+                      path="new"
+                      element={
+                        <Layout>
+                          <JournalNew />
+                        </Layout>
+                      }
+                    />
+                    <Route
+                      path=":journalId/edit"
+                      element={
+                        <Layout>
+                          <JournalEditor />
+                        </Layout>
+                      }
+                    />
+                    <Route
+                      path=":journalId"
+                      element={
+                        <Layout>
+                          <JournalMessageList showControls={false} autoScroll={true} />
+                        </Layout>
+                      }
+                    />
+                    <Route
+                      path=":journalId/messages/:messageId"
+                      element={
+                        <Layout>
+                          <MessageSheet />
+                        </Layout>
+                      }
+                    />
+                  </Route>
+
                   <Route
-                    path="new"
+                    path="resources"
                     element={
                       <Layout>
-                        <JournalNew />
+                        <ResourcesList />
                       </Layout>
                     }
                   />
                   <Route
-                    path=":journalId/edit"
+                    path="map"
+                    element={
+                      <LayoutMarginLess>
+                        <Suspense fallback={<Spinner />}>
+                          <Map />
+                        </Suspense>
+                      </LayoutMarginLess>
+                    }
+                  />
+                  <Route
+                    path="tasks"
                     element={
                       <Layout>
-                        <JournalEditor />
+                        <TaskList />
                       </Layout>
                     }
                   />
                   <Route
-                    path=":journalId"
+                    path="requests"
                     element={
                       <Layout>
-                        <JournalMessageList showControls={false} autoScroll={true} />
+                        <RequestList />
                       </Layout>
                     }
                   />
                   <Route
-                    path=":journalId/messages/:messageId"
+                    path="soma"
                     element={
                       <Layout>
-                        <MessageSheet />
+                        <ImmediateMeasuresList />
                       </Layout>
                     }
                   />
                 </Route>
-
-                <Route
-                  path="resources"
-                  element={
-                    <Layout>
-                      <ResourcesList />
-                    </Layout>
-                  }
-                />
-                <Route
-                  path="map"
-                  element={
-                    <LayoutMarginLess>
-                      <Suspense fallback={<Spinner />}>
-                        <Map />
-                      </Suspense>
-                    </LayoutMarginLess>
-                  }
-                />
-                <Route
-                  path="tasks"
-                  element={
-                    <Layout>
-                      <TaskList />
-                    </Layout>
-                  }
-                />
-                <Route
-                  path="requests"
-                  element={
-                    <Layout>
-                      <RequestList />
-                    </Layout>
-                  }
-                />
-                <Route
-                  path="soma"
-                  element={
-                    <Layout>
-                      <ImmediateMeasuresList />
-                    </Layout>
-                  }
-                />
               </Route>
-            </Route>
-            <Route path="/" element={<Navigate to="/incident/list" />} />
-          </Routes>
-        </Router>
+              <Route path="/" element={<Navigate to="/incident/list" />} />
+            </Routes>
+          </Router>
+        </FeatureFlagProvider>
       </ApolloProvider>
     </UserContext.Provider>
   );

ui/src/FeatureFlags.tsx

@@ -0,0 +1,51 @@
+import { EvaluationContext, OpenFeatureProvider, OpenFeature, InMemoryProvider } from "@openfeature/react-sdk";
+import { FliptWebProvider } from "@openfeature/flipt-web-provider";
+import { PropsWithChildren, useEffect, useContext } from "react";
+
+import { UserContext } from "utils";
+
+const localFlagConfig = {
+  "new-message": {
+    disabled: false,
+    variants: {
+      on: true,
+      off: false,
+    },
+    defaultVariant: "on",
+    contextEvaluator: (context: EvaluationContext) => {
+      if (context.silly) {
+        return "on";
+      }
+      return "off";
+    },
+  },
+};
+
+const Provider = (props: PropsWithChildren) => {
+  const { children } = props;
+  const userState = useContext(UserContext);
+
+  useEffect(() => {
+    const fliptProvider = new FliptWebProvider("sitrep-ui", { url: "https://flipt.sitrep.ch" });
+    OpenFeature.setProvider("local", new InMemoryProvider(localFlagConfig));
+    OpenFeature.setProvider(fliptProvider);
+  }, []);
+
+  // sync the evaulation context here, so far only depends on domain and UserContext state
+  useEffect(() => {
+    const context = {
+      domain: document.location.host.split(":")[0],
+      email: userState.email,
+    };
+    OpenFeature.setContext(context);
+
+    return () => {
+      console.log("closing openfeature provider");
+      OpenFeature.close();
+    };
+  }, [userState]);
+
+  return <OpenFeatureProvider>{children}</OpenFeatureProvider>;
+};
+
+export { Provider };