Drapeaux de fonctionnalité

Les fonctionnalités en cours de développement peuvent être cachées derrière des feature flags. C’est utile pour des fonctionnalités complexes qui nécessitent du temps et plusieurs itérations avant d’être entièrement prêtes.

Un feature flag peut être activé ou désactivé depuis l’onglet « Feature Flags » des Implementer Tools. Ce choix est stocké dans le localStorage du navigateur, il s’applique donc à ce profil de navigateur plutôt qu’à un compte utilisateur OpenMRS. Les feature flags peuvent aussi être activés pour tout le monde avec la clé de configuration de l’app shell Enabled feature flags; voir l’aperçu de la configuration O3 pour la configuration côté implémenteur. L’app shell ne peut activer que les flags déjà enregistrés. Si un flag configuré n’a pas été enregistré, l’app shell consigne une erreur et laisse ce flag désactivé.

Les principales API des feature flags sont registerFeatureFlag, useFeatureFlag et getFeatureFlag. Utilisez getFeatureFlag seulement après l’enregistrement du flag. Pour l’interface React, préférez useFeatureFlag; il renvoie false sans erreur quand un flag est absent.

Utiliser les feature flags

Supposons que vous ayez construit une page pour une clinique d’optométrie laser et que vous ajoutiez une fonctionnalité pour un service à venir : offrir des yeux laser. Cette fonctionnalité est contenue dans le composant LaserEyeInstallation. Nous allons créer un feature flag appelé laser-eyes, qui permettra aux administrateurs de prévisualiser le composant avant son déploiement pour tout le monde.

Il y a deux étapes : enregistrer le feature flag, puis l’utiliser avec useFeatureFlag. Pour les modules Core v5+, privilégiez la déclaration du feature flag dans routes.json, afin qu’il soit disponible dès le traitement du registre de routes.

{
  "featureFlags": [
    {
      "flagName": "laser-eyes",
      "label": "Laser Eye Installation Service",
      "description": "Adds a form and relevant patient diagnostic information relating to the planned Laser Eye Installation Service to the laser optometry clinic management page."
    }
  ]
}

Si vous devez enregistrer un flag depuis le code, registerFeatureFlag(flagName, label, description) reste disponible dans @openmrs/esm-framework. L’enregistrement conserve l’état activé actuel, il est donc sûr d’enregistrer le même flag plusieurs fois pendant le démarrage de l’app.

Vous pouvez aussi rattacher un flag enregistré directement à une extension dans routes.json :

{
  "extensions": [
    {
      "name": "laser-eye-installation-link",
      "slot": "laser-optometry-actions-slot",
      "component": "laserEyeInstallationLink",
      "featureFlag": "laser-eyes"
    }
  ]
}

Le système d’extensions omettra cette extension jusqu’à l’activation du flag.

Le feature flag apparaîtra alors dans les Implementer Tools comme ci‑dessous :

Une fois le feature flag enregistré, on peut l’utiliser pour contrôler la visibilité du composant LaserEyeInstallation.

import { useFeatureFlag } from "@openmrs/esm-framework";
 
export default function LaserOptometryClinicManagement() {
  const isLaserEyeInstallationEnabled = useFeatureFlag("laser-eyes");
 
  return (
    <div>
      <h1>Laser Optometry Clinic</h1>
      <AstygmatismTreatment />
      <MyopiaTreatment />
 
      {/* Work in progress */}
      {isLaserEyeInstallationEnabled ? <LaserEyeInstallation /> : null}
    </div>
  );
}

useFeatureFlag renvoie false lorsque le flag est désactivé ou n’a pas été enregistré. L’interface protégée par un flag doit donc continuer à se comporter normalement lorsque le flag est absent.

Vous pouvez maintenant déployer des changements dans l’app d’optométrie laser qui incluent ce code en cours, sans que les utilisateurs ne voient la fonctionnalité masquée par le flag. Les administrateurs peuvent ouvrir les Implementer Tools et activer le feature flag « Laser Eye Installation Service » dans leur navigateur pour prévisualiser la fonctionnalité localement. Les implémenteurs peuvent ensuite activer le même flag enregistré pour tout le monde via la configuration de l’app shell.

Voici une vidéo explicative sur les feature flags par Brandon :