Merge pull request #9921 from demarches-simplifiees/add_curl_example_to_token_creation

ETQ Administrateur, j'ai un premier exemple d'appel api à la création d'un jeton

app/assets/stylesheets/code_example.scss

@@ -0,0 +1,22 @@
+@import "constants";
+@import "colors";
+
+.code-example {
+  background-color: var(--background-contrast-grey);
+
+  .example-header {
+    display: flex;
+    background-color: var(--background-alt-grey);
+    align-items: center;
+
+    .lang {
+      margin-right: auto;
+      padding: $default-padding;
+    }
+
+  }
+
+  pre {
+    padding: 0 $default-padding;
+  }
+}

app/controllers/administrateurs/api_tokens_controller.rb

@@ -30,6 +30,8 @@ module Administrateurs
 
       @api_token.update!(name:, write_access:,
                          allowed_procedure_ids:, authorized_networks:, expires_at:)
+
+      @curl_command = curl_command(@packed_token, @api_token.procedure_ids.first)
     end
 
     def edit
@@ -60,6 +62,16 @@ module Administrateurs
 
     private
 
+    def curl_command(packed_token, procedure_id)
+      <<~EOF
+        curl \\
+        -H 'Content-Type: application/json' \\
+        -H 'Authorization: Bearer #{packed_token}' \\
+        --data '{ "query": "{ demarche(number: #{procedure_id}) { title } }" }' \\
+        '#{api_v2_graphql_url}'
+      EOF
+    end
+
     def all_params
       [:name, :access, :target, :targets, :networkFiltering, :networks, :lifetime, :customLifetime]
         .index_with { |param| params[param] }

app/javascript/controllers/clipboard_controller.ts

@@ -4,11 +4,13 @@ const SUCCESS_MESSAGE_TIMEOUT = 1000;
 
 export class ClipboardController extends Controller {
   static values = { text: String };
-  static targets = ['success'];
+  static targets = ['success', 'toHide'];
 
   declare readonly textValue: string;
   declare readonly successTarget: HTMLElement;
+  declare readonly toHideTarget: HTMLElement;
   declare readonly hasSuccessTarget: boolean;
+  declare readonly hasToHideTarget: boolean;
 
   #timer?: ReturnType<typeof setTimeout>;
 
@@ -23,12 +25,22 @@ export class ClipboardController extends Controller {
   }
 
   private displayCopyConfirmation() {
+    if (this.hasToHideTarget) {
+      this.toHideTarget.classList.add('hidden');
+    }
     if (this.hasSuccessTarget) {
       this.successTarget.classList.remove('hidden');
-      clearTimeout(this.#timer);
-      this.#timer = setTimeout(() => {
-        this.successTarget.classList.add('hidden');
-      }, SUCCESS_MESSAGE_TIMEOUT);
     }
+
+    clearTimeout(this.#timer);
+
+    this.#timer = setTimeout(() => {
+      if (this.hasSuccessTarget) {
+        this.successTarget.classList.add('hidden');
+      }
+      if (this.hasToHideTarget) {
+        this.toHideTarget.classList.remove('hidden');
+      }
+    }, SUCCESS_MESSAGE_TIMEOUT);
   }
 }

app/views/administrateurs/api_tokens/create.html.haml

@@ -14,7 +14,22 @@
 
   %p{ data: { controller: 'clipboard', clipboard_text_value: @packed_token } }
     %code= @packed_token
-    %button.fr-btn.fr-btn-primary.fr-btn-small.fr-ml-2w{ data: { action: 'clipboard#copy' }, title: 'Copier dans le presse-papier' } Copier
+    %button.fr-btn.fr-btn-primary.fr-btn-small.fr-ml-2w{ data: { action: 'clipboard#copy', clipboard_target: 'toHide' }, title: 'Copier dans le presse-papier' } Copier
+    %button.fr-btn.fr-btn-primary.fr-btn-small.fr-ml-2w.hidden{ data: { clipboard_target: 'success' } } Copié !
+
+  %p.fr-mt-4w Voici un premier exemple d'utilisation de votre jeton d'API. Il vous permet de récupérer le titre de l'une de vos démarches :
+
+  .code-example{ data: { controller: 'clipboard', clipboard_text_value: @curl_command } }
+    .example-header
+      %span.lang bash
+      %button.fr-btn.fr-btn--icon-left.fr-icon-clipboard-line.fr-btn--sm.fr-btn--tertiary-no-outline{ data: { action: 'clipboard#copy', clipboard_target: 'toHide' }, title: 'Copier dans le presse-papier' } Copier
+      %button.fr-btn.fr-btn--icon-left.fr-icon-checkbox-line.fr-btn--sm.fr-btn--tertiary-no-outline.hidden{ data: { clipboard_target: 'success' } } Copié !
+    %pre
+      %code= @curl_command
+
+  %p.fr-text--sm.fr-text-mention--grey
+    Pour continuer, vous pouvez consulter
+    = link_to("notre documentation sur l'API", API_DOC_URL, **external_link_attributes)
 
   %p.fr-mt-4w Résumé des informations du jeton :
   %ul