Add userCannotModify field to flag control (#2966)

CHANGELOG.md

@@ -19,6 +19,7 @@ The types of changes are:
 
 ### Added
 * Access support for Shippo [#2484](https://github.com/ethyca/fides/pull/2484)
+* Feature flags can be set such that they cannot be modified by the user [#2966](https://github.com/ethyca/fides/pull/2966)
 
 ## [2.10.0](https://github.com/ethyca/fides/compare/2.9.2...2.10.0)
 

clients/admin-ui/README.md

@@ -38,6 +38,8 @@ running the app, for example:
 
 Or you can configure the environment using `env.local` as described by the [Next.js docs](https://nextjs.org/docs/basic-features/environment-variables#loading-environment-variables).
 
+In addition, you can mark a flag as `userCannotModify: true` in `flags.json`. This will prevent the user from seeing that flag as an override-able option in the Beta Features section. However, the values given to the various environments will still be in effect. Therefore, you can still control the flag with the same level of granularity via the `flags.json` file, but not via the UI.
+
 ## Preparing for production
 
 To view a production version of this site, including the backend:

clients/admin-ui/src/features/common/features/FlagControl.tsx

@@ -29,6 +29,11 @@ export const FlagControl = ({
     );
   }
 
+  // Do not render a toggle if the flag is marked as not able to be modified by the user
+  if (FLAG_CONFIG[flag].userCannotModify) {
+    return null;
+  }
+
   return (
     <FormControl display="contents">
       <Box justifySelf="center">

clients/admin-ui/src/features/common/features/types.ts

@@ -13,6 +13,10 @@ export type FlagEnvs<Value> = {
   test: Value;
   production: Value;
   description?: string;
+  /**
+   * If true, this flag will not show up in the UI as a toggle
+   */
+  userCannotModify?: boolean;
 };
 
 /**