Merge pull request #9097 from mfo/US/improve-api-token-acl-ux

amelioration(users/profil): ETQ admin, j'ai du mal a comprendre l'interface qui me permet de gerer les autorisations qu'un jeton a

app/components/profile/api_token_component/api_token_component.en.yml

@@ -3,11 +3,13 @@ en:
   allowed_procedures_html:
     zero: This token has no access to <strong>any</strong> process.
     one: This token has access to a selected process
-    other: This token has access to %{count} selected steps
+    other: This token has access to %{count} selected procedures
   security_one: For security reasons, it will not be re-posted, please note.
   security_two: For security reasons, we can only show it to you when it is created.
+  prompt_choose_procedure: "-- Please, choose a procedure --"
+  security_title: "Security options"
   action_all: Allow access to all procedures
-  action_choice: Allow access only to selected steps
+  action_choice: "If you want to grant access to selected procedures only :"
   add: Add
   delete: Delete
   token_procedures: This token has access to the procedures

app/components/profile/api_token_component/api_token_component.fr.yml

@@ -6,8 +6,10 @@ fr:
     other: Ce jeton a accès a %{count} démarches sélectionnées
   security_one: Pour des raisons de sécurité, il ne sera plus ré-affiché, notez-le bien.
   security_two: Pour des raisons de sécurité, nous ne pouvons vous l’afficher que lors de sa création.
+  security_title: "Options de sécurité"
   action_all: Autoriser l’accès a toutes les démarches
-  action_choice: Autoriser l’accès seulement a des démarches choisies
+  prompt_choose_procedure: "-- Veuillez sélectionner une procédure à ajouter --"
+  action_choice: Si vous souhaitez autoriser l’accès seulement a des démarches choisies, ajouter les au jeton
   add: Ajouter
   delete: Supprimer
   token_procedures: Ce jeton a accès aux démarches

app/components/profile/api_token_component/api_token_component.html.haml

@@ -20,22 +20,24 @@
     %p
       = t('.security_two')
 
-  - if @api_token.full_access?
-    %p.fr-text--lg
-      = t('.allowed_full_access_html')
-  - else
-    %p.fr-text--lg
-      = t('.allowed_procedures_html', count: @api_token.allowed_procedures.size)
+  = render Dsfr::AlertComponent.new(state: :info, title: t(".security_title"), heading_level: :h4) do |c|
+    - c.body do
+      - if @api_token.full_access?
+        %p.fr-text--lg
+          = t('.allowed_full_access_html')
+      - else
+        %p.fr-text--lg
+          = t('.allowed_procedures_html', count: @api_token.allowed_procedures.size)
 
-    - if @api_token.allowed_procedures.empty?
-      = button_to t('.action_all'), @api_token, method: :patch, params: { api_token: { disallow_procedure_id: '0' } }, class: "fr-btn fr-btn--secondary"
-    - else
-      %ul
-        - @api_token.allowed_procedures.each do |procedure|
-          %li.flex.justify-between.align-center
-            .truncate-80
-              = "#{procedure.id} – #{procedure.libelle}"
-            = button_to t('.delete'), @api_token, method: :patch, params: { api_token: { disallow_procedure_id: procedure.id } }, class: "fr-btn fr-btn--secondary"
+        - if @api_token.allowed_procedures.empty?
+          = button_to t('.action_all'), @api_token, method: :patch, params: { api_token: { disallow_procedure_id: '0' } }, class: "fr-btn fr-btn--secondary"
+        - else
+          %ul
+            - @api_token.allowed_procedures.each do |procedure|
+              %li.flex.justify-between.align-center
+                .truncate-80
+                  = "#{procedure.id} – #{procedure.libelle}"
+                = button_to t('.delete'), @api_token, method: :patch, params: { api_token: { disallow_procedure_id: procedure.id } }, class: "fr-btn fr-btn--secondary"
 
 .fr-card__end
   = form_for @api_token, namespace: dom_id(@api_token, :allowed_procedures), html: { class: 'form form-ds-fr-white mb-3', data: { turbo: true } } do |f|
@@ -44,7 +46,7 @@
     - @api_token.allowed_procedures.each do |procedure|
       = f.hidden_field :allowed_procedure_ids, value: procedure.id, multiple: true, id: dom_id(procedure, :allowed_procedure)
     .flex.justify-between.align-center{ 'data-turbo-force': true }
-      = f.select :allowed_procedure_ids, procedures_to_allow_options, procedures_to_allow_select_options, { class: 'no-margin width-66 small', name: "api_token[allowed_procedure_ids][]" }
+      = f.select :allowed_procedure_ids, procedures_to_allow_options, {prompt: t('.prompt_choose_procedure')}, { class: 'no-margin width-66 small', name: "api_token[allowed_procedure_ids][]" }
       = f.button type: :submit, class: "fr-btn fr-btn--secondary" do
         = t('.add')