From e7f2af6f0b71b353dea1092e7af751f6ed470b9a Mon Sep 17 00:00:00 2001
From: brendanlaschke <brendan.laschke@googlemail.com>
Date: Tue, 30 Jan 2024 09:50:13 +0100
Subject: [PATCH] Document feature flags (#3655)

* document feature flags

* .
---
 .../server/others/feature-flags.mdx           | 52 +++++++++++++++++++
 .../docs/contributor/server/others/zapier.mdx |  2 +-
 packages/twenty-docs/src/theme/icons.js       |  1 +
 3 files changed, 54 insertions(+), 1 deletion(-)
 create mode 100644 packages/twenty-docs/docs/contributor/server/others/feature-flags.mdx

diff --git a/packages/twenty-docs/docs/contributor/server/others/feature-flags.mdx b/packages/twenty-docs/docs/contributor/server/others/feature-flags.mdx
new file mode 100644
index 000000000..9ccbf049b
--- /dev/null
+++ b/packages/twenty-docs/docs/contributor/server/others/feature-flags.mdx
@@ -0,0 +1,52 @@
+---
+title: Feature Flags
+sidebar_position: 1
+sidebar_custom_props:
+  icon: TbFlag
+---
+
+Feature flags are used to hide experimental features. For twenty they are set on workspace level and not on a user level.
+
+## Adding a new feature flag
+
+In `FeatureFlagKey.ts` add the feature flag:
+
+```ts
+type FeatureFlagKey =
+  | 'IS_FEATURENAME_ENABLED'
+  | ...;
+```
+
+Also add it to the enum in `feature-flag.entity.ts`:
+
+```ts
+enum FeatureFlagKeys {
+    IsFeatureNameEnabled = 'IS_FEATURENAME_ENABLED',
+    ...
+}
+```
+
+
+
+To apply a feature flag on a **backend** feature use:
+
+```ts
+@Gate({
+  featureFlag: 'IS_FEATURENAME_ENABLED',
+})
+```
+
+To apply a feature flag on a **frontend** feature use:
+
+```ts
+const isFeatureNameEnabled = useIsFeatureEnabled('IS_FEATURENAME_ENABLED');
+```
+
+
+## Configure feature flags for the deployment
+
+Change the corresponding record in the Table `core.featureFlag`:
+
+| id       | key                      | workspaceId   | value  |
+|----------|--------------------------|---------------|--------|
+|  Random  | `IS_FEATURENAME_ENABLED` |  WorkspaceID  | `true` |
diff --git a/packages/twenty-docs/docs/contributor/server/others/zapier.mdx b/packages/twenty-docs/docs/contributor/server/others/zapier.mdx
index c57adb625..4407474ce 100644
--- a/packages/twenty-docs/docs/contributor/server/others/zapier.mdx
+++ b/packages/twenty-docs/docs/contributor/server/others/zapier.mdx
@@ -1,6 +1,6 @@
 ---
 title: Zapier App
-sidebar_position: 1
+sidebar_position: 2
 sidebar_custom_props:
   icon: TbBrandZapier
 ---
diff --git a/packages/twenty-docs/src/theme/icons.js b/packages/twenty-docs/src/theme/icons.js
index 2e5e77f35..f375fb28f 100644
--- a/packages/twenty-docs/src/theme/icons.js
+++ b/packages/twenty-docs/src/theme/icons.js
@@ -72,4 +72,5 @@ export {
   TbTemplate,
   TbRectangle,
   TbCircleCheckFilled,
+  TbFlag
 } from "react-icons/tb";