Link existing document to KB without page reload (#24365)

Author: AdrienClairembault

js/modules/Knowbase/ArticleController.js

@@ -629,8 +629,22 @@ export class GlpiKnowbaseArticleController
         const badge = this.#container.querySelector(
             `[data-glpi-document-assoc-id="${assoc_id}"]`
         );
-        if (badge) {
-            badge.remove();
+        const document_id = parseInt(badge.dataset.glpiDocumentId);
+        badge.remove();
+
+        // Make the document available again in the link dropdown
+        if (this.#document_link_controller) {
+            // Controller exist, call dedicated method
+            this.#document_link_controller.removeFromUsed(document_id);
+        } else {
+            // Controller has not yet been initialized, modify its dataset
+            const link_pane = document.getElementById('kb-modal-link-pane');
+            const used = JSON.parse(link_pane.dataset.glpiKbLinkUsedIds);
+            const idx = used.indexOf(document_id);
+            if (idx !== -1) {
+                used.splice(idx, 1);
+                link_pane.dataset.glpiKbLinkUsedIds = JSON.stringify(used);
+            }
         }
 
         this.#updateDocumentCount(-1);

js/modules/Knowbase/DocumentLinkController.js

@@ -274,7 +274,7 @@ export class DocumentLinkController
             });
             const result = await response.json();
 
-            this.#onSuccess(result.linked_count);
+            this.#onSuccess(result.documents ?? []);
         } catch (error) {
             glpi_toast_error(__('Linking failed'));
             throw error;
@@ -284,10 +284,15 @@ export class DocumentLinkController
     }
 
     /**
-     * @param {number} count
+     * @param {Array<{html: string}>} documents
      */
-    #onSuccess(count)
+    #onSuccess(documents)
     {
+        const count = documents.length;
+
+        // Persist newly linked IDs so the dropdown stays correct after reset
+        this.#container.dataset.glpiKbLinkUsedIds = JSON.stringify(this.#usedIds);
+
         if (this.#modal) {
             const modalInstance = bootstrap.Modal.getInstance(this.#modal);
             if (modalInstance) {
@@ -301,7 +306,10 @@ export class DocumentLinkController
                 : __('%d documents linked successfully').replace('%d', count)
         );
 
-        window.location.reload();
+        this.#container.dispatchEvent(new CustomEvent('documents:uploaded', {
+            bubbles: true,
+            detail: { count, documents },
+        }));
     }
 
     /**
@@ -325,6 +333,20 @@ export class DocumentLinkController
         }
     }
 
+    /**
+     * Remove a document ID from the used list so it reappears in the dropdown.
+     * Called by ArticleController after a document is unlinked from the article.
+     * @param {number} documentId
+     */
+    removeFromUsed(documentId)
+    {
+        const idx = this.#usedIds.indexOf(documentId);
+        if (idx !== -1) {
+            this.#usedIds.splice(idx, 1);
+        }
+        this.#container.dataset.glpiKbLinkUsedIds = JSON.stringify(this.#usedIds);
+    }
+
     #reset()
     {
         this.#selectedDocuments.clear();

src/Glpi/Controller/AbstractDocumentUploadController.php

@@ -113,6 +113,7 @@ final protected function createDocuments(
 
             $created[] = [
                 'assoc_id'     => $doc_item->getID(),
+                'id'           => $doc_id,
                 'filename'     => $filename,
                 'download_url' => $document->getDownloadUrl(),
                 'extension'    => $extension,

src/Glpi/Controller/Knowbase/LinkDocumentController.php

@@ -34,7 +34,9 @@
 
 namespace Glpi\Controller\Knowbase;
 
+use Document;
 use Document_Item;
+use Glpi\Application\View\TemplateRenderer;
 use Glpi\Controller\AbstractController;
 use Glpi\Controller\CrudControllerTrait;
 use Glpi\Exception\Http\AccessDeniedHttpException;
@@ -73,7 +75,8 @@ public function __invoke(int $id, Request $request): JsonResponse
             throw new BadRequestHttpException();
         }
 
-        $linked_count = 0;
+        $linked = [];
+        $twig = TemplateRenderer::getInstance();
 
         foreach ($documents_ids as $doc_id) {
             $doc_id = (int) $doc_id;
@@ -82,18 +85,40 @@ public function __invoke(int $id, Request $request): JsonResponse
             }
 
             try {
-                $this->add(Document_Item::class, [
+                $doc_item = $this->add(Document_Item::class, [
                     'documents_id' => $doc_id,
                     'itemtype'     => KnowbaseItem::class,
                     'items_id'     => $id,
                 ]);
-                $linked_count++;
             } catch (\RuntimeException) {
                 // Skip documents that fail (duplicates, permission issues, etc.)
                 continue;
             }
+
+            $document = new Document();
+            if (!$document->getFromDB($doc_id)) {
+                continue;
+            }
+
+            $filename  = (string) ($document->fields['filename'] ?? '');
+            $extension = strtolower(pathinfo($filename, PATHINFO_EXTENSION));
+            $styles    = KnowbaseItem::getDocumentIconAndColor($extension);
+
+            $linked[] = [
+                'html' => $twig->render('pages/tools/kb/document_badge.html.twig', [
+                    'doc'      => [
+                        'assoc_id'     => $doc_item->getID(),
+                        'id'           => $doc_id,
+                        'filename'     => $filename,
+                        'download_url' => $document->getDownloadUrl(),
+                        'icon_class'   => $styles['icon_class'],
+                        'color_class'  => $styles['color_class'],
+                    ],
+                    'can_edit' => true,
+                ]),
+            ];
         }
 
-        return new JsonResponse(['linked_count' => $linked_count]);
+        return new JsonResponse(['documents' => $linked]);
     }
 }

templates/pages/tools/kb/document_badge.html.twig

@@ -33,6 +33,7 @@
 <span
     class="kb-item-badge badge bg-light text-dark d-flex align-items-center gap-2"
     data-glpi-document-assoc-id="{{ doc.assoc_id }}"
+    data-glpi-document-id="{{ doc.id }}"
     data-testid="document-chip"
 >
     <a