From e2f9f6abcb9c0afc60a53029b085cadd480c4769 Mon Sep 17 00:00:00 2001 From: HAKIZIMANA Franck Date: Fri, 3 May 2024 15:31:10 +0200 Subject: [PATCH 1/2] add tooltip on project feature flags --- .../Iaso/domains/app/translations/en.json | 16 ++++ .../Iaso/domains/app/translations/fr.json | 16 ++++ .../components/ProjectFeatureFlags.tsx | 45 +++++++++-- .../js/apps/Iaso/domains/projects/messages.ts | 80 +++++++++++++++++++ 4 files changed, 151 insertions(+), 6 deletions(-) diff --git a/hat/assets/js/apps/Iaso/domains/app/translations/en.json b/hat/assets/js/apps/Iaso/domains/app/translations/en.json index 2d7ceb3343..d205e7ee72 100644 --- a/hat/assets/js/apps/Iaso/domains/app/translations/en.json +++ b/hat/assets/js/apps/Iaso/domains/app/translations/en.json @@ -998,6 +998,22 @@ "iaso.projects.needsAuthentication": "Requires authentication", "iaso.projects.true": "User needs authentication", "iaso.projects.update": "Update project", + "iaso.projets.featureflag.tooltip.check_position_for_forms": "Downloads only the geo data of the zone assigned to the user (for offline use)", + "iaso.projets.featureflag.tooltip.data_collection": "Tab enabling to propose changes to org units and their reference form(s)", + "iaso.projets.featureflag.tooltip.entity": "Track the user's position every 15 minutes over a period of time", + "iaso.projets.featureflag.tooltip.gps_tracking": "Tab enabling to see the assigned data collection points via the Planning feature", + "iaso.projets.featureflag.tooltip.limit_ou_download_to_roots": "Propose changes to org units and their related reference form(s)", + "iaso.projets.featureflag.tooltip.mobile_check_forms_update": "Notify the user when changes to the geo data (Org units) have been done on the web", + "iaso.projets.featureflag.tooltip.mobile_check_ou_update": "Forms are automatically synchronized provided the user has connectivity", + "iaso.projets.featureflag.tooltip.mobile_finalized_form_are_read": "Tab in the mobile application to show the geographic information available for the selected Org Unit", + "iaso.projets.featureflag.tooltip.mobile_force_forms_update": "Notify and force the user tp update when changes to the geo data (Org units) have been done on the web", + "iaso.projets.featureflag.tooltip.mobile_force_ou_update": "Blocks the edition of forms from the mobile app once finalized", + "iaso.projets.featureflag.tooltip.planning": "Notify and force the user to update when new form versions have been uploaded on the web", + "iaso.projets.featureflag.tooltip.reports": "Tab enabling the feature to collect data from the IASO mobile application", + "iaso.projets.featureflag.tooltip.require_authentication": "Users have to enter their login and password on the mobile application before proceeding to the data collection", + "iaso.projets.featureflag.tooltip.show_detail_map_on_mobile": "Notify the user when new form versions have been uploaded on the web", + "iaso.projets.featureflag.tooltip.take_gps_on_form": "A GPS point is automatically taken and associated to the form submission", + "iaso.projets.featureflag.tooltip.transport_tracking": "Users have to be 50m away max to the Org Unit GPS point for the form to open", "iaso.projets.label.appIdError": "\", ?, /, %, &, - and whitespace are not allowed in app id", "iaso.province": "Province", "iaso.queryBuilder.supportedTypeFields": "Supported type of fields", diff --git a/hat/assets/js/apps/Iaso/domains/app/translations/fr.json b/hat/assets/js/apps/Iaso/domains/app/translations/fr.json index de1e25d82a..3b63c9461c 100644 --- a/hat/assets/js/apps/Iaso/domains/app/translations/fr.json +++ b/hat/assets/js/apps/Iaso/domains/app/translations/fr.json @@ -998,6 +998,22 @@ "iaso.projects.needsAuthentication": "Nécessite une authentification", "iaso.projects.true": "L'utilisateur a besoin d'une authentification", "iaso.projects.update": "Modifier un projet", + "iaso.projets.featureflag.tooltip.check_position_for_forms": "Télécharge uniquement les données géographiques de la zone attribuée à l'utilisateur (pour une utilisation hors connexion)", + "iaso.projets.featureflag.tooltip.data_collection": "Onglet permettant de proposer des modifications aux unités d'organisations et à leur(s) formulaire(s) de référence", + "iaso.projets.featureflag.tooltip.entity": "Suivez la position de l'utilisateur toutes les 15 minutes sur une période donnée", + "iaso.projets.featureflag.tooltip.gps_tracking": "Onglet permettant de visualiser les points de collecte de données attribués via la fonctionnalité de planification", + "iaso.projets.featureflag.tooltip.limit_ou_download_to_roots": "Proposer des modifications aux unités d'organisations et à leur(s) formulaire(s) de référence associé(s)", + "iaso.projets.featureflag.tooltip.mobile_check_forms_update": "Avertir l'utilisateur lorsque des modifications ont été apportées aux données géographiques (unités d'organisations) sur le Web", + "iaso.projets.featureflag.tooltip.mobile_check_ou_update": "Les formulaires sont automatiquement synchronisés à condition que l'utilisateur dispose d'une connectivité", + "iaso.projets.featureflag.tooltip.mobile_finalized_form_are_read": "Onglet dans l'application mobile pour afficher les informations géographiques disponibles pour l'unité d'organisation sélectionnée", + "iaso.projets.featureflag.tooltip.mobile_force_forms_update": "Notifier et forcer l'utilisateur à se mettre à jour lorsque des modifications ont été apportées aux données géographiques (unités d'organisations) sur le Web", + "iaso.projets.featureflag.tooltip.mobile_force_ou_update": "Bloque l'édition des formulaires depuis l'application mobile une fois finalisés", + "iaso.projets.featureflag.tooltip.planning": "Avertir et forcer l'utilisateur à mettre à jour lorsque de nouvelles versions de formulaire ont été téléchargées sur le Web", + "iaso.projets.featureflag.tooltip.reports": "Onglet permettant la fonctionnalité de collecte de données depuis l'application mobile IASO", + "iaso.projets.featureflag.tooltip.require_authentication": "Les utilisateurs doivent saisir leur identifiant et leur mot de passe sur l'application mobile avant de procéder à la collecte des données.", + "iaso.projets.featureflag.tooltip.show_detail_map_on_mobile": "Avertir l'utilisateur lorsque de nouvelles versions de formulaire ont été téléchargées sur le Web", + "iaso.projets.featureflag.tooltip.take_gps_on_form": "Un point GPS est automatiquement pris et associé à la soumission du formulaire", + "iaso.projets.featureflag.tooltip.transport_tracking": "Les utilisateurs doivent se trouver à 50 m maximum du point GPS de l'unité d'organisation pour que le formulaire s'ouvre", "iaso.projets.label.appIdError": "Les symboles \", ?, /, %, &, - et les espaces ne sont pas autorisés dans l'app id", "iaso.province": "Province", "iaso.queryBuilder.supportedTypeFields": "Type de champ supportés", diff --git a/hat/assets/js/apps/Iaso/domains/projects/components/ProjectFeatureFlags.tsx b/hat/assets/js/apps/Iaso/domains/projects/components/ProjectFeatureFlags.tsx index 5a63260d40..9c7ebb44b3 100644 --- a/hat/assets/js/apps/Iaso/domains/projects/components/ProjectFeatureFlags.tsx +++ b/hat/assets/js/apps/Iaso/domains/projects/components/ProjectFeatureFlags.tsx @@ -1,5 +1,7 @@ +/* eslint-disable react/jsx-props-no-spreading */ import React, { FunctionComponent } from 'react'; - +import { Chip, Tooltip } from '@mui/material'; +import { useSafeIntl } from 'bluesquare-components'; import InputComponent from '../../../components/forms/InputComponent'; import { commaSeparatedIdsToArray } from '../../../utils/forms'; import MESSAGES from '../messages'; @@ -29,14 +31,43 @@ const ProjectFeatureFlags: FunctionComponent = ({ featureFlags, isFetchingFeatureFlag, }) => { + const { formatMessage } = useSafeIntl(); const options = React.useMemo( () => - featureFlags?.map(fF => ({ - label: fF.name, - value: fF.id, - })), - [featureFlags], + featureFlags?.map(fF => { + return { + label: fF.name, + value: fF.id, + tooltip: + formatMessage( + MESSAGES[`${fF.code.toLowerCase()}_tooltip`], + ) || fF.name, + }; + }), + [featureFlags, formatMessage], + ); + const renderOption = (props, option) => ( + + {option.label} + ); + + const renderTags = (value, getTagProps) => + value.map((option, index) => ( + + + + )); return ( = ({ type="select" options={options} label={MESSAGES.featureFlags} + renderOption={renderOption} + renderTags={renderTags} /> ); }; diff --git a/hat/assets/js/apps/Iaso/domains/projects/messages.ts b/hat/assets/js/apps/Iaso/domains/projects/messages.ts index a1d3f0fa1e..c180e1d871 100644 --- a/hat/assets/js/apps/Iaso/domains/projects/messages.ts +++ b/hat/assets/js/apps/Iaso/domains/projects/messages.ts @@ -62,6 +62,86 @@ const MESSAGES = defineMessages({ defaultMessage: '", ?, /, %, &, - and whitespace are not allowed in app id', }, + require_authentication_tooltip: { + id: 'iaso.projets.featureflag.tooltip.require_authentication', + defaultMessage: + 'Users have to enter their login and password on the mobile application before proceeding to the data collection', + }, + reports_tooltip: { + id: 'iaso.projets.featureflag.tooltip.reports', + defaultMessage: + 'Tab enabling the feature to collect data from the IASO mobile application', + }, + take_gps_on_form_tooltip: { + id: 'iaso.projets.featureflag.tooltip.take_gps_on_form', + defaultMessage: + 'A GPS point is automatically taken and associated to the form submission', + }, + transport_tracking_tooltip: { + id: 'iaso.projets.featureflag.tooltip.transport_tracking', + defaultMessage: + 'Users have to be 50m away max to the Org Unit GPS point for the form to open', + }, + gps_tracking_tooltip: { + id: 'iaso.projets.featureflag.tooltip.gps_tracking', + defaultMessage: + 'Tab enabling to see the assigned data collection points via the Planning feature', + }, + check_position_for_forms_tooltip: { + id: 'iaso.projets.featureflag.tooltip.check_position_for_forms', + defaultMessage: + 'Downloads only the geo data of the zone assigned to the user (for offline use)', + }, + mobile_finalized_form_are_read_tooltip: { + id: 'iaso.projets.featureflag.tooltip.mobile_finalized_form_are_read', + defaultMessage: + 'Tab in the mobile application to show the geographic information available for the selected Org Unit', + }, + limit_ou_download_to_roots_tooltip: { + id: 'iaso.projets.featureflag.tooltip.limit_ou_download_to_roots', + defaultMessage: + 'Propose changes to org units and their related reference form(s)', + }, + data_collection_tooltip: { + id: 'iaso.projets.featureflag.tooltip.data_collection', + defaultMessage: + 'Tab enabling to propose changes to org units and their reference form(s)', + }, + entity_tooltip: { + id: 'iaso.projets.featureflag.tooltip.entity', + defaultMessage: + "Track the user's position every 15 minutes over a period of time", + }, + show_detail_map_on_mobile_tooltip: { + id: 'iaso.projets.featureflag.tooltip.show_detail_map_on_mobile', + defaultMessage: + 'Notify the user when new form versions have been uploaded on the web', + }, + planning_tooltip: { + id: 'iaso.projets.featureflag.tooltip.planning', + defaultMessage: + 'Notify and force the user to update when new form versions have been uploaded on the web', + }, + mobile_check_forms_update_tooltip: { + id: 'iaso.projets.featureflag.tooltip.mobile_check_forms_update', + defaultMessage: + 'Notify the user when changes to the geo data (Org units) have been done on the web', + }, + mobile_force_forms_update_tooltip: { + id: 'iaso.projets.featureflag.tooltip.mobile_force_forms_update', + defaultMessage: + 'Notify and force the user tp update when changes to the geo data (Org units) have been done on the web', + }, + mobile_check_ou_update_tooltip: { + id: 'iaso.projets.featureflag.tooltip.mobile_check_ou_update', + defaultMessage: + 'Forms are automatically synchronized provided the user has connectivity', + }, + mobile_force_ou_update_tooltip: { + id: 'iaso.projets.featureflag.tooltip.mobile_force_ou_update', + defaultMessage: + 'Blocks the edition of forms from the mobile app once finalized', + }, }); export default MESSAGES; From be74b3e99b4d85d2f5e3908e4ea4b566260ea360 Mon Sep 17 00:00:00 2001 From: HAKIZIMANA Franck Date: Tue, 7 May 2024 08:30:59 +0200 Subject: [PATCH 2/2] remove renderOption and renderTags from inside the component --- .../components/ProjectFeatureFlags.tsx | 43 ++++++++++--------- 1 file changed, 22 insertions(+), 21 deletions(-) diff --git a/hat/assets/js/apps/Iaso/domains/projects/components/ProjectFeatureFlags.tsx b/hat/assets/js/apps/Iaso/domains/projects/components/ProjectFeatureFlags.tsx index 9c7ebb44b3..e1dfc2bff3 100644 --- a/hat/assets/js/apps/Iaso/domains/projects/components/ProjectFeatureFlags.tsx +++ b/hat/assets/js/apps/Iaso/domains/projects/components/ProjectFeatureFlags.tsx @@ -25,6 +25,28 @@ type Props = { isFetchingFeatureFlag: boolean; }; +const renderOption = (props, option) => ( + + {option.label} + +); + +const renderTags = (value, getTagProps) => + value.map((option, index) => ( + + + + )); + const ProjectFeatureFlags: FunctionComponent = ({ setFieldValue, currentProject, @@ -46,28 +68,7 @@ const ProjectFeatureFlags: FunctionComponent = ({ }), [featureFlags, formatMessage], ); - const renderOption = (props, option) => ( - - {option.label} - - ); - const renderTags = (value, getTagProps) => - value.map((option, index) => ( - - - - )); return (