(ui) add tooltip to FormInput

+ add tooltip for auth_provider/mappings/API field input

app/frontend/src/javascript/components/authentication-provider/data-mapping-form.tsx

@@ -10,6 +10,7 @@ import { useTranslation } from 'react-i18next';
 import { FabButton } from '../base/fab-button';
 import { TypeMappingModal } from './type-mapping-modal';
 import { useImmer } from 'use-immer';
+import { HtmlTranslate } from '../base/html-translate';
 
 export interface DataMappingFormProps<TFieldValues, TContext extends object> {
   register: UseFormRegister<TFieldValues>,
@@ -136,6 +137,7 @@ export const DataMappingForm = <TFieldValues extends FieldValues, TContext exten
                          register={register}
                          rules={{ required: true }}
                          placeholder="field_name..."
+                         tooltip={<HtmlTranslate trKey="app.shared.oauth2.api_field_help_html" />}
                          label={t('app.shared.oauth2.api_fields')} />
             </div>
           </div>

app/frontend/src/javascript/components/form/form-input.tsx

@@ -7,7 +7,7 @@ import { FormComponent } from '../../models/form-component';
 interface FormInputProps<TFieldValues> extends InputHTMLAttributes<HTMLInputElement>, FormComponent<TFieldValues>{
   id: string,
   label?: string,
-  tooltip?: string,
+  tooltip?: ReactNode,
   icon?: ReactNode,
   addOn?: ReactNode,
   addOnClassName?: string,
@@ -30,8 +30,10 @@ export const FormInput = <TFieldValues extends FieldValues>({ id, register, labe
     <label className={classNames}>
       {label && <div className='form-item-header'>
         <p>{label}</p>
-        {/* TODO: Create tooltip component */}
-        {tooltip && <span>{tooltip}</span>}
+        {tooltip && <div className="item-tooltip">
+          <span className="trigger"><i className="fa fa-question-circle" /></span>
+          <div className="content">{tooltip}</div>
+        </div>}
       </div>}
       <div className='form-item-field'>
         {icon && <span className="icon">{icon}</span>}

app/frontend/src/stylesheets/modules/form/form-item.scss

@@ -8,10 +8,39 @@
     justify-content: space-between;
     align-items: flex-start;
     margin-bottom: 0.8rem;
+    position: relative;
     p {
       @include text-sm;
       margin: 0;
     }
+
+    .item-tooltip {
+      position: absolute;
+      width: 100%;
+      .trigger {
+        position: absolute;
+        right: 0;
+        &:hover + .content {
+          display: block;
+        }
+      }
+      .content {
+        display: none;
+        position: absolute;
+        right: 0;
+        top: 0;
+        background-color: black;
+        color: white;
+        border-radius: 8px;
+        padding: 1rem;
+        font-size: 12px;
+        width: auto;
+
+        &:hover {
+          display: block;
+        }
+      }
+    }
   }
   &.is-hidden {
     display: none;

config/locales/app.shared.en.yml

@@ -297,7 +297,7 @@ en:
         api_endpoint_url: "API endpoint URL"
         api_type: "API type"
         api_fields: "API fields"
-        api_field_help: "JsonPath syntax is supported.\n If many fields are selected, the first one will be used.\n Example: $.data[*].name"
+        api_field_help_html: '<a href="https://jsonpath.com/" target="_blank">JsonPath</a> syntax is supported.<br> If many fields are selected, the first one will be used.<br> Example: $.data[*].name"'
       #machine/training slot modification modal
       confirm_modify_slot_modal:
         change_the_slot: "Change the slot"

config/locales/app.shared.fr.yml

@@ -275,7 +275,7 @@ fr:
         api_endpoint_url: "Point d'accès/URL de l'API"
         api_type: "Type d'API"
         api_fields: "Champ de l'API"
-        api_field_help: "La syntaxe JsonPath est prise en charge.\n Si plusieurs champs sont sélectionnés, le premier sera utilisé.\n Exemple : $.data[*].name"
+        api_field_help_html: '<p>La syntaxe <a href="https://jsonpath.com/" target="_blank">JsonPath</a> est prise en charge.\n Si plusieurs champs sont sélectionnés, le premier sera utilisé.\n Exemple : $.data[*].name</p>'
       #machine/training slot modification modal
       confirm_modify_slot_modal:
         change_the_slot: "Modifier le créneau"