Skip to content

Commit

Permalink
feat(feature-flags): use flipt as feature flag service (#486)
Browse files Browse the repository at this point in the history 
* 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
  • Loading branch information
@nimdanitro
nimdanitro authored Oct 29, 2024
1 parent e571e7c commit fad5799
Show file tree
Hide file tree
Showing 11 changed files with 267 additions and 91 deletions.
3 changes: 3 additions & 0 deletions .flipt.yml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
version: "1.0"
include:
- "ui/features.yaml"
17 changes: 17 additions & 0 deletions .github/workflows/main.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
13 changes: 11 additions & 2 deletions docs/development/FeatureFlag.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.
32 changes: 32 additions & 0 deletions ui/features.yaml
View file
Original file line number Diff line number Diff line change
@@ -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
2 changes: 1 addition & 1 deletion ui/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
Expand Down
4 changes: 4 additions & 0 deletions ui/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
167 changes: 85 additions & 82 deletions ui/src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"));

Expand Down Expand Up @@ -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>
);
Expand Down
51 changes: 51 additions & 0 deletions ui/src/FeatureFlags.tsx
View file
Original file line number Diff line number Diff line change
@@ -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 };
Loading

0 comments on commit fad5799

Please sign in to comment.