From fad57995b3c265165cb2b872e14ee7bc563c1495 Mon Sep 17 00:00:00 2001 From: Dani Aschwanden Date: Tue, 29 Oct 2024 09:10:38 +0100 Subject: [PATCH] feat(feature-flags): use flipt as feature flag service (#486) * feat(feature-flags): create basic support for feature flags * feat(feature-flags): add github actions for feature flags * feat(feature-flags): make feature flag evaluation context easier * fix(triage): properly hide tasks behind feature flag for triage editor * docs(feature-flags): update development docs for feature flags * fix: properly close the provider --- .flipt.yml | 3 + .github/workflows/main.yml | 17 +++ docs/development/FeatureFlag.md | 13 ++- ui/features.yaml | 32 +++++ ui/index.html | 2 +- ui/package.json | 4 + ui/src/App.tsx | 167 ++++++++++++++------------- ui/src/FeatureFlags.tsx | 51 ++++++++ ui/src/components/Navbar.tsx | 8 +- ui/src/views/journal/TriageModal.tsx | 12 +- ui/yarn.lock | 49 ++++++++ 11 files changed, 267 insertions(+), 91 deletions(-) create mode 100644 .flipt.yml create mode 100644 ui/features.yaml create mode 100644 ui/src/FeatureFlags.tsx 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 (