##

##When will this be important?

There will be a situation where we have completed features in `main` branch that we do not want to release to production. So rather than cherry picking when we are creating the `release` branch or commenting out the route/feature in the `release` branch, we can use the feature flag to do that.

Once the feature is ready to be released, we can just toggle the flag.

Other than that, each environment has their own file. This is to prevent conflicts from the different branches. For instance, when you comment out the route in the `release` branch, when the `release` branch is then merged, the commented out lines will be affecting the `main` branch and will cause unwanted result.

##Caveats

The feature flags main purpose is to hide unrelease features in the different environment. So the first assumption is that, **only unreleased features are feature flagged**. Those features that are released to production, should be available in all other environments as well. The only exception to that if there is a revamp to the existing released features.

So most of the time, the flags under the production file will be `false`, and the flags under dev will be `true`.

##How to use?

1. Add the flag to the correct environment file in this folder: `featureFlags.<env>.ts`. The file should export a Plain JavaScript Object. It can be nested up to the engineers who add. The flags should be grouped by system. For example:

// featureFlags.dev.ts
export default {
  quality: {
    defects: false,
    inspection: true,
  },
  safety: {
    inspection: true,
    permit_to_work: {
      reports: false,
      bulk_import: true,
    },
  },
}

2. In your component/screen file, you can import the featureFlags and use the `hasFeatureFlag` function which will return `true` or `false` depending on the flag. If the flag does not exist, it will return `false` by default. Don't forget that BOTH the Route/Component and the menu need to be handled with the flag.

import hasFeatureFlag from 'featureFlags';
import React from 'react';
...

const component = () => {
  return (
    <whateverComponent>
      {hasFeatureFlag('quality.defects') && (
        <QualityDefects />
      )}
    </whateverComponent>
  )
};

export default component;

3. If you are using `PageWithSidebar` component, such as in `features/Projects/Main`, you can just add an attribute `featureFlag: string` to the menuItems. If the flag is true, the menu will be rendered, otherwise it will be hidden. You can check the `DetailedMenuItem` type.

##How do I determine the environment?

The environment is determined by the `location.host` of the current site you are at.
You can check this out from `RouteEnvironmentMap` inside `constants.ts`. By default, it will be development. When you are working on localhost, you can configure the environment from the `.env` file by adding `FEATURE_FLAGS_ENVIRONMENT=staging`, if you need to use the other environment's flags. The available environments:

- `development`
- `staging`
- `fix`
- `demo`
- `production`