diff --git a/.flipt.yml b/.flipt.yml
new file mode 100644
index 00000000..5b37d1ae
--- /dev/null
+++ b/.flipt.yml
@@ -0,0 +1,3 @@
+version: "1.0"
+include:
+ - "ui/features.yaml"
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index c2f96902..6439aaef 100644
--- a/.github/workflows/main.yml
+++ b/.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/setup-action@v0.1.0
+ - 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"
diff --git a/docs/development/FeatureFlag.md b/docs/development/FeatureFlag.md
index 1e40c633..cbc20545 100644
--- a/docs/development/FeatureFlag.md
+++ b/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.
diff --git a/ui/features.yaml b/ui/features.yaml
new file mode 100644
index 00000000..dba57182
--- /dev/null
+++ b/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
diff --git a/ui/index.html b/ui/index.html
index 6b12cde5..5e72f7bb 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -5,7 +5,7 @@
diff --git a/ui/package.json b/ui/package.json
index 8c751603..6233d292 100644
--- a/ui/package.json
+++ b/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",
diff --git a/ui/src/App.tsx b/ui/src/App.tsx
index 0dfb07a2..6039ea6c 100644
--- a/ui/src/App.tsx
+++ b/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 (
-
-
-
-
-
-
- }
- />
-
-
-
- }
- />
-
-
+
+
+
+
-
+
+
+ }
+ />
+
+
}
/>
-
+
-
+
}
/>
+
+
+
+
+
+ }
+ />
+
+
+
+ }
+ />
+
+
+
+ }
+ />
+
+
+
+ }
+ />
+
+
+
+ }
+ />
+
+
-
+
}
/>
+ }>
+
+
+
+ }
+ />
+
-
+
}
/>
-
+
}
/>
-
+
}
/>
-
-
-
-
- }
- />
-
- }>
-
-
-
- }
- />
-
-
-
- }
- />
-
-
-
- }
- />
-
-
-
- }
- />
-
- } />
-
-
+ } />
+
+
+
);
diff --git a/ui/src/FeatureFlags.tsx b/ui/src/FeatureFlags.tsx
new file mode 100644
index 00000000..b53169f9
--- /dev/null
+++ b/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 {children};
+};
+
+export { Provider };
diff --git a/ui/src/components/Navbar.tsx b/ui/src/components/Navbar.tsx
index 95de0094..16b061d6 100644
--- a/ui/src/components/Navbar.tsx
+++ b/ui/src/components/Navbar.tsx
@@ -20,6 +20,7 @@ import {
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import classNames from "classnames";
import { FunctionComponent, useContext, useEffect, useState } from "react";
+import { useBooleanFlagValue } from "@openfeature/react-sdk";
import { faCalendar, faClock } from "@fortawesome/free-regular-svg-icons";
import logo from "assets/logo.svg";
@@ -39,6 +40,9 @@ const Navbar: FunctionComponent<{ isActive?: boolean }> = ({ isActive = false })
"is-active": isMenuActive,
});
+ const showResources = useBooleanFlagValue("show-resources", false);
+ const showTasks = useBooleanFlagValue("show-tasks", false);
+
return (