Merge pull request #1881 from etalab/improve_token_list_ui

Improve token list UI

Author: JeSuisUnCaillou

app/assets/stylesheets/commons.scss

@@ -91,3 +91,8 @@ summary {
   }
 }
 
+.loading-gif {
+  width: 100px;
+  height: 100px;
+  margin: 20px;
+}

app/views/shared/_modal.html.erb

@@ -8,7 +8,7 @@
           </div>
 
           <turbo-frame id="main-modal-content">
-            <%= image_tag('loading.gif') %>
+            <%= image_tag('loading.gif', class: 'loading-gif') %>
           </turbo-frame>
         </div>
       </div>

app/views/shared/authorization_requests/actions/_prolong.html.erb

@@ -2,15 +2,15 @@
   <a
     href="<%= token_prolong_path(id: authorization_request.token.id) %>"
     id="<%= dom_id(authorization_request, :prolong_token_modal_link) %>"
-    class="fr-btn fr-icon-arrow-right-line fr-btn--icon-right fr-mt-2w"
+    class="fr-btn fr-icon-arrow-right-line fr-btn--icon-right"
   >
     <%= label %>
   </a>
 <% else %>
   <a
     href="<%= token_prolong_path(id: authorization_request.token.id) %>"
     id="<%= dom_id(authorization_request, :prolong_token_modal_link) %>"
-    class="fr-btn fr-icon-arrow-right-line fr-btn--icon-right fr-mt-2w"
+    class="fr-btn fr-icon-arrow-right-line fr-btn--icon-right"
     aria-controls="main-modal"
     data-fr-opened="false"
     data-turbo-frame="main-modal-content"

app/views/shared/authorization_requests/index.html.erb

@@ -17,23 +17,23 @@
     <div class="fr-col-12">
       <div class="fr-container fr-container--bordered fr-p-0">
         <div class="fr-grid-row fr-p-4v fr-grid-row--middle fr-grid-row--gutters">
-          <div class="fr-col-12 fr-col-sm-3 center">
+          <div class="fr-col-12 fr-col-sm-3">
             <strong><%= t('.table.head.authorization_request') %></strong>
           </div>
-          <div class="fr-col-12 fr-col-sm-4 center">
+          <div class="fr-col-12 fr-col-sm-4">
             <strong><%= t('.table.head.token') %></strong>
           </div>
-          <div class="fr-col-12 fr-col-sm-3 center">
+          <div class="fr-col-12 fr-col-sm">
               <strong><%= t('.table.head.actions') %></strong>
           </div>
-          <div class="fr-col-12 fr-col-sm-2 center">
+          <div class="fr-col-12 fr-col-sm">
               <strong><%= t('.table.head.detail') %></strong>
           </div>
         </div>
         <% @authorization_requests.each do |authorization_request| %>
           <div id="<%= dom_id(authorization_request) %>" class="fr-grid-row fr-grid-row--gutters fr-grid-row--middle fr-p-4v">
-            <div class="fr-col-12 fr-col-sm-3 fr-p-0 center">
-            <h2 class="fr-h6 fr-mb-0"><%= authorization_request.intitule %></h2>
+            <div class="fr-col-12 fr-col-sm-3">
+              <h2 class="fr-h6 fr-mb-0"><%= authorization_request.intitule %></h2>
               <%= authorization_request_status_badge(authorization_request) %>
               <span class="fr-hint-text">
                 <%= link_to t('.links.to_datapass', external_id: authorization_request.external_id).html_safe,
@@ -50,9 +50,9 @@
                 %>
               </span>
             </div>
-            <div class="fr-col-12 fr-col-sm-4 fr-p-0 center">
+            <div class="fr-col-12 fr-col-sm-4">
               <% if authorization_request.token %>
-                <div id="<%= dom_id(authorization_request.token) %>" class="fr-pt-6v">
+                <div id="<%= dom_id(authorization_request.token) %>">
                   <%= render partial: 'shared/tokens/detail_short',
                     locals: {
                       token: authorization_request.token.decorate
@@ -71,13 +71,13 @@
                 </div>
             <% end %>
             </div>
-            <div class="fr-col-12 fr-col-sm-3 center">
+            <div class="fr-col-12 fr-col-sm">
               <% authorization_request_expected_actions(authorization_request, current_user).each do |action| %>
                 <%= render partial: "shared/authorization_requests/actions/#{action[:action]}", locals: { label: action[:label], authorization_request:, to_datapass_reopen: action[:to_datapass_reopen] } %>
               <% end %>
             </div>
-            <div class="fr-col-12 fr-col-sm-2 center">
-              <%= link_to "", authorization_request_path(authorization_request), class: %w[fr-btn fr-btn--lg fr-btn--tertiary-no-outline fr-icon-arrow-right-line] %>
+            <div class="fr-col-12 fr-col-sm">
+              <%= link_to "Voir plus de détails", authorization_request_path(authorization_request), class: %w[fr-btn fr-btn--tertiary center] %>
             </div>
           </div>
         <% end %>

app/views/shared/authorization_requests/show.html.erb

@@ -76,16 +76,7 @@
             <% end %>
             <ul class="fr-btns-group--right fr-btns-group--inline-sm fr-btns-group--inline-reverse fr-btns-group--icon-right">
               <li>
-                <a
-                  href="<%= token_path(id: @main_token.id) %>"
-                  id="show-token-modal-link"
-                  class="fr-btn fr-btn--secondary fr-icon-eye-fill fr-btn--icon-right fr-mt-2w"
-                  aria-controls="main-modal"
-                  data-fr-opened="false"
-                  data-turbo-frame="main-modal-content"
-                >
-                  <%= t('.modal.show.display_cta') %>
-                </a>
+                <%= render partial: "shared/tokens/reveal_token_button", locals: { token: @main_token } %>
               </li>
               <% if policy(@main_token).prolong? %>
                 <li>

app/views/shared/tokens/_detail_short.html.erb

@@ -11,4 +11,5 @@
       expiration_date: friendly_date_from_timestamp(token.end_timestamp)
     ).html_safe %>
   </span>
+  <%= render partial: "shared/tokens/reveal_token_button", locals: { token: token } %>
 <% end %>

app/views/shared/tokens/_reveal_token_button.html.erb

@@ -0,0 +1,10 @@
+<a
+  href="<%= token_path(id: token.id) %>"
+  id="show-token-modal-link"
+  class="fr-btn fr-btn--secondary fr-icon-eye-fill fr-btn--icon-right fr-mt-2w"
+  aria-controls="main-modal"
+  data-fr-opened="false"
+  data-turbo-frame="main-modal-content"
+>
+  <%= t('shared.authorization_requests.show.modal.show.display_cta') %>
+</a>

config/locales/fr.yml

@@ -374,10 +374,12 @@ fr:
         contacts: Contacts
       status:
         color:
+          refused: pink-tuile
           revoked: pink-tuile
           archived: no-specific-color
           validated: green-emeraude
         label:
+          refused: 📃 Demande refusée
           revoked: 📃 Habilitation révoquée
           archived: 📃 Habilitation archivée
           validated: 📃 Habilitation active