Feature Flags

Feature Flags

RedisInsight has its own feature flag system. Flags are defined in a remote JSON config, fetched by the backend, and served to the frontend via API. This skill covers how to add, promote, and remove flags.

Flag Types

Files to Change

Every new flag touches these files (in order):

Backend (required)

1. `redisinsight/api/config/features-config.json` Add the flag entry with flag, perc, optional filters and data. Bump the version number.

2. `redisinsight/api/src/modules/feature/constants/index.ts` Add to the KnownFeatures enum.

3. `redisinsight/api/src/modules/feature/constants/known-features.ts` Add entry to the knownFeatures record with name and storage (usually FeatureStorage.Database).

4. `redisinsight/api/src/modules/feature/providers/feature-flag/feature-flag.provider.ts` Register the flag with its strategy (see Strategy Types below).

Frontend (required if the flag gates UI)

5. `redisinsight/ui/src/constants/featureFlags.ts` Add to the FeatureFlags enum.

6. `redisinsight/ui/src/slices/app/features.ts` Add default state entry in initialState.featureFlags.features with { flag: false }.

Consuming code

7. Use the flag in components/hooks to gate functionality.

Strategy Selection

Choose the strategy based on what the flag needs:

CommonFlagStrategy        → Most flags (dev and regular on/off)
WithDataFlagStrategy      → Flag needs to carry extra data payload
SwitchableFlagStrategy    → Flag should be overridable via local config.json

Register in feature-flag.provider.ts:

this.strategies.set(
  KnownFeatures.YourFeature,
  new CommonFlagStrategy(this.featuresConfigService, this.settingsService),
);

Config JSON Structure

Minimal (dev flag)

"dev-myFeature": {
  "flag": false,
  "perc": [[0, 100]]
}

With filters (Electron-only)

"myFeature": {
  "flag": true,
  "perc": [[0, 100]],
  "filters": [
    { "name": "config.server.buildType", "value": "ELECTRON", "cond": "eq" }
  ]
}

Gradual rollout (10% of users)

"myFeature": {
  "flag": true,
  "perc": [[0, 10]]
}

With data payload

"myFeature": {
  "flag": true,
  "perc": [[0, 100]],
  "data": { "strategy": "ioredis" }
}

Filter Conditions

Filters compare a value from server state against the filter value.

Common name paths: config.server.buildType (ELECTRON, DOCKER_ON_PREMISE, REDIS_STACK), config.server.packageVersion (uses semver), agreements.analytics, env.<VAR_NAME>.

Filters support and/or composition for complex conditions.

Workflows

Add a dev feature flag

Use for features under active development that should not be visible in production.

1. features-config.json → add "dev-myFeature": { "flag": false, "perc": [[0, 100]] } 2. constants/index.ts → add DevMyFeature = 'dev-myFeature' to KnownFeatures 3. constants/known-features.ts → add record entry 4. feature-flag.provider.ts → register with CommonFlagStrategy 5. ui/src/constants/featureFlags.ts → add devMyFeature = 'dev-myFeature' 6. ui/src/slices/app/features.ts → add default { flag: false }

Promote dev flag to regular flag

When the feature is complete and ready for rollout.

1. Rename dev-myFeature → myFeature in all the files above 2. Set flag: true in features-config.json 3. Optionally set perc for gradual rollout (e.g. [[0, 10]]) 4. Change strategy if needed (e.g. to SwitchableFlagStrategy for overridable) 5. Bump config version

Clean up a flag

When a feature is fully rolled out and the flag is no longer needed.

1. Remove from features-config.json 2. Remove from KnownFeatures enum 3. Remove from knownFeatures record 4. Remove strategy registration from feature-flag.provider.ts 5. Remove from FE FeatureFlags enum 6. Remove default state from features.ts 7. Remove all gating code (conditionals, FeatureFlagComponent wrappers) in consuming components

FE Usage Patterns

Check flag in a component

import { FeatureFlags } from 'uiSrc/constants';
import { appFeatureFlagsFeaturesSelector } from 'uiSrc/slices/app/features';

const features = useSelector(appFeatureFlagsFeaturesSelector);
const isEnabled = features[FeatureFlags.myFeature]?.flag;

Custom selector for complex logic

export const isMyFeatureEnabledSelector = (state: RootState): boolean => {
  const features = state.app.features.featureFlags.features;
  return features[FeatureFlags.myFeature]?.flag ?? false;
};