From 926b571204009f0b3ecbb5d9e0339c17348ccf7f Mon Sep 17 00:00:00 2001 From: Daniel Aschwanden Date: Mon, 28 Oct 2024 13:43:32 +0100 Subject: [PATCH 01/13] feat(feature-flags): create basic support for feature flags --- ui/index.html | 2 +- ui/package.json | 4 + ui/src/App.tsx | 167 ++++++++++++++++++----------------- ui/src/FeatureFlags.tsx | 36 ++++++++ ui/src/components/Navbar.tsx | 8 +- ui/yarn.lock | 49 ++++++++++ 6 files changed, 181 insertions(+), 85 deletions(-) create mode 100644 ui/src/FeatureFlags.tsx 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 ecd43073..29dba042 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..cb927492 --- /dev/null +++ b/ui/src/FeatureFlags.tsx @@ -0,0 +1,36 @@ +import { EvaluationContext, OpenFeatureProvider, OpenFeature, InMemoryProvider } from "@openfeature/react-sdk"; +import { FliptWebProvider } from "@openfeature/flipt-web-provider"; + +import { PropsWithChildren, useEffect } from "react"; + +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; + useEffect(() => { + const fliptProvider = new FliptWebProvider("sitrep-ui", { url: "https://flipt.sitrep.ch" }); + OpenFeature.setLogger(console); + OpenFeature.setProvider("local", new InMemoryProvider(localFlagConfig)); + console.log("setting origin", document.location.host); + OpenFeature.setProvider(fliptProvider, { domain: document.location.host.split(":")[0] }); + }, []); + + return {children}; +}; + +export { Provider }; diff --git a/ui/src/components/Navbar.tsx b/ui/src/components/Navbar.tsx index b621284b..eee9dd0c 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 (