Page Comparison

...

1. Inside FeatureFlagKey.java, add the enum value representing the Feature Flag.

2. If not done already, inject FeatureFlagConfig inside the class where the Feature Flag will be used.

3. Apply conditional statements referencing the enum value to use the feature flag.

   Code Block
   if (featureFlagConfig.isFeatureEnabled(FeatureFlagKey.PROVENANCE_V2_VISUALIZATION.getKey()){}

Applying Feature Flag in

...

synapse-react-client

SRC utilizes react-query library and Applications using synapse-react-client will fetch the configuration from the SWC servlet to retrieve feature flags from AWS AppConfig. React components utilize react-query to retrieve and cache the configuration within the React application’s lifecycle.

The steps to apply feature flags inside SRC are as followedfollows:

1. Inside FeatureFlags.ts under synapse-types, add an enum value representing the Feature Flag.

2. Build synapse-types using pnpm or command under package.json

3. Navigate to the file where the feature flag will be used and add imports

   Code Block
   import { useGetFeatureFlag } from '../../../../synapse-queries' import { FeatureFlagEnum } from '@sage-bionetworks/synapse-types'

4. Apply conditional statements referencing the enum value to use the feature flag.

   Code Block
   useGetFeatureFlag(FeatureFlagEnum.DESCRIPTION_FIELD)

5. Validation Process

   1. Add your stack to the list of Storybook stacks.

      1. In packages/synapse-react-client/src/utils/functions/getEndpoint.ts, add a stack to the STACK_MAP and use the endpoints for your dev stack (Reference the validation process for applying feature flag in SWC) or prod/staging/dev stack with the wanted configurations inside AWS AppConfig.

      2. Then in packages/synapse-react-client/.storybook/preview.tsx you can add it so you can pick that stack in Storybook (L94)

...