KB : optional icon (#24290)

Author: f2cmb

js/modules/IllustrationPicker/Controller.js

@@ -216,39 +216,49 @@ export class GlpiIllustrationPickerController
     {
         // Gets details of the newly selected item.
         const illustration_id = illustration.dataset['glpiIconPickerValue'];
-        const illustration_title = illustration
-            .querySelector('svg')
-            .querySelector('title')
-        ;
 
         // Apply the new illustration id to the hidden input.
         this.#getSelectedIllustrationsInput().value = illustration_id;
 
-        // Update the preview of the selected item.
-        const selected_svg = this.#container
-            .querySelector('[data-glpi-icon-picker-value-preview]')
-            .querySelector('svg')
-        ;
-        const title = selected_svg.querySelector('title');
-        const use = selected_svg.querySelector('use');
-        const xlink = use.getAttribute('xlink:href');
+        if (illustration_id === '') {
+            // Empty selection: show placeholder, hide both preview slots.
+            this.#setEmptyPreview();
+            return;
+        }
 
-        use.setAttribute(
-            'xlink:href',
-            xlink.replace(/#.*/, `#${illustration_id}`)
-        );
-        title.innerHTML = illustration_title.innerHTML;
+        // Clone the clicked illustration's SVG into the native preview slot.
+        // Cloning (vs in-place mutation) handles the transition from an empty
+        // article — where the slot has no SVG to mutate — without requiring
+        // the template to pre-render a skeleton SVG.
+        const native_slot = this.#getNativePreviewSlot();
+        const clicked_svg = illustration.querySelector('svg');
+        native_slot.replaceChildren(clicked_svg.cloneNode(true));
+
+        native_slot.classList.remove('d-none');
+        this.#getCustomPreviewSlot().classList.add('d-none');
+        this.#getPlaceholderSlot()?.classList.add('d-none');
+    }
 
-        this.#container
-            .querySelector('[data-glpi-icon-picker-value-preview-native]')
-            .classList
-            .remove('d-none')
-        ;
-        this.#container
-            .querySelector('[data-glpi-icon-picker-value-preview-custom]')
-            .classList
-            .add('d-none')
-        ;
+    #setEmptyPreview()
+    {
+        this.#getNativePreviewSlot()?.classList.add('d-none');
+        this.#getCustomPreviewSlot()?.classList.add('d-none');
+        this.#getPlaceholderSlot()?.classList.remove('d-none');
+    }
+
+    #getNativePreviewSlot()
+    {
+        return this.#container.querySelector('[data-glpi-icon-picker-value-preview-native]');
+    }
+
+    #getCustomPreviewSlot()
+    {
+        return this.#container.querySelector('[data-glpi-icon-picker-value-preview-custom]');
+    }
+
+    #getPlaceholderSlot()
+    {
+        return this.#container.querySelector('[data-glpi-icon-picker-value-preview-placeholder]');
     }
 
     #setCustomIllustration(file_id)
@@ -257,21 +267,12 @@ export class GlpiIllustrationPickerController
         this.#getSelectedIllustrationsInput().value = icon_id;
 
         // Update preview
-        this.#container
-            .querySelector('[data-glpi-icon-picker-value-preview-custom]')
-            .querySelector('img')
-            .src = `${CFG_GLPI.root_doc}/UI/Illustration/CustomIllustration/${file_id}`
-        ;
-        this.#container
-            .querySelector('[data-glpi-icon-picker-value-preview-custom]')
-            .classList
-            .remove('d-none')
-        ;
-        this.#container
-            .querySelector('[data-glpi-icon-picker-value-preview-native]')
-            .classList
-            .add('d-none')
-        ;
+        const custom_slot = this.#getCustomPreviewSlot();
+        custom_slot.querySelector('img').src
+            = `${CFG_GLPI.root_doc}/UI/Illustration/CustomIllustration/${file_id}`;
+        custom_slot.classList.remove('d-none');
+        this.#getNativePreviewSlot().classList.add('d-none');
+        this.#getPlaceholderSlot()?.classList.add('d-none');
     }
 
     /**

js/modules/Knowbase/ArticleController.js

@@ -858,13 +858,27 @@ export class GlpiKnowbaseArticleController
 
     #setIllustrationEditable(editable)
     {
-        const picker = this.#container.querySelector(
-            '[data-glpi-kb-illustration-container] [data-glpi-illustration-picker]'
+        const container = this.#container.querySelector(
+            '[data-glpi-kb-illustration-container]'
         );
+        const picker = container?.querySelector('[data-glpi-illustration-picker]');
         if (!picker) {
             return;
         }
 
+        // Reveal the container when entering edit mode so the user can pick an
+        // illustration even when none was previously set. When leaving edit
+        // mode with an empty value, hide the container again so the title
+        // realigns to the left.
+        if (editable) {
+            container.classList.remove('d-none');
+        } else {
+            const input = picker.querySelector('[data-glpi-icon-picker-value]');
+            if (!input?.value) {
+                container.classList.add('d-none');
+            }
+        }
+
         if (picker.glpiIllustrationPicker) {
             picker.glpiIllustrationPicker.setEditable(editable);
             return;
@@ -1121,7 +1135,7 @@ export class GlpiKnowbaseArticleController
             '[data-glpi-kb-illustration-container] [data-glpi-icon-picker-value]'
         );
         const illustration = illustration_input?.value ?? '';
-        if (illustration && illustration !== 'kb-faq') {
+        if (illustration) {
             fields.illustration = illustration;
         }
 

src/Glpi/Knowbase/Aside/Builder.php

@@ -62,7 +62,7 @@ private function populateNode(Node $node, int $category_id): void
             $node->addArticle(new Article(
                 id: (int) $article_data['id'],
                 title: $article_data['name'] ?? '',
-                illustration: $article_data['illustration'] ?? 'kb-faq',
+                illustration: $article_data['illustration'] ?? '',
                 link: KnowbaseItem::getFormURLWithID($article_data['id']),
                 is_current: $this->current_id > 0 && (int) $article_data['id'] === $this->current_id,
             ));
@@ -74,7 +74,7 @@ private function populateNode(Node $node, int $category_id): void
         foreach ($categories as $cat_data) {
             $category = new Category(
                 title: $cat_data['name'] ?? '',
-                illustration: $cat_data['illustration'] ?: 'kb-faq',
+                illustration: $cat_data['illustration'] ?? '',
             );
             $this->populateNode($category, (int) $cat_data['id']);
             $node->addCategory($category);

src/Glpi/Knowbase/History/HistoryBuilder.php

@@ -505,14 +505,16 @@ private function addIllustrationChangesToHistory(): void
         ]);
 
         foreach ($logs as $row) {
-            $is_custom = str_starts_with(
+            if ($row['new_value'] === '') {
+                $description = __("Illustration removed by");
+            } elseif (str_starts_with(
                 $row['new_value'],
                 IllustrationManager::CUSTOM_ILLUSTRATION_PREFIX
-            );
-            $description = $is_custom
-                ? __("Custom illustration set by")
-                : __("Native illustration set by")
-            ;
+            )) {
+                $description = __("Custom illustration set by");
+            } else {
+                $description = __("Native illustration set by");
+            }
 
             $this->history->addEvent(new LogEvent(
                 label: __("Illustration updated"),

src/Glpi/UI/IllustrationManager.php

@@ -109,6 +109,10 @@ public function getCustomIconIdFromPrefixedString(string $prefixed_id): string
      */
     public function renderIcon(string $icon_id, ?int $size = null): string
     {
+        if ($icon_id === '') {
+            return '';
+        }
+
         $custom_icon_prefix = self::CUSTOM_ILLUSTRATION_PREFIX;
         if (str_starts_with($icon_id, $custom_icon_prefix)) {
             return $this->renderCustomIcon(
@@ -147,6 +151,24 @@ public function getAllIconsIds(): array
         return array_keys($this->getIconsDefinitions());
     }
 
+    /**
+     * Tell whether a string is a valid illustration value: empty (no
+     * illustration), a known native icon id, or an existing custom file.
+     */
+    public function isKnownIllustrationValue(string $value): bool
+    {
+        if ($value === '') {
+            return true;
+        }
+
+        if (str_starts_with($value, self::CUSTOM_ILLUSTRATION_PREFIX)) {
+            $custom_id = substr($value, strlen(self::CUSTOM_ILLUSTRATION_PREFIX));
+            return $this->getCustomIllustrationFile($custom_id) !== null;
+        }
+
+        return in_array($value, $this->getAllIconsIds(), true);
+    }
+
     public function countIcons(string $filter = ""): int
     {
         if ($filter == "") {

src/KnowbaseItem.php

@@ -899,23 +899,8 @@ private function prepareIllustrationInput(array $input): array
             return $input;
         }
 
-        $value = (string) $input['illustration'];
-        if ($value === '') {
-            return $input;
-        }
-
         $manager = new IllustrationManager();
-        $prefix  = IllustrationManager::CUSTOM_ILLUSTRATION_PREFIX;
-
-        if (str_starts_with($value, $prefix)) {
-            $custom_id = substr($value, strlen($prefix));
-            if ($manager->getCustomIllustrationFile($custom_id) === null) {
-                unset($input['illustration']);
-            }
-            return $input;
-        }
-
-        if (!in_array($value, $manager->getAllIconsIds(), true)) {
+        if (!$manager->isKnownIllustrationValue((string) $input['illustration'])) {
             unset($input['illustration']);
         }
 
@@ -1047,7 +1032,7 @@ public function showFull($options = [])
             // General fields
             $params['views']        = $this->fields['view'];
             $params['can_edit']     = $can_update;
-            $params['illustration'] = $this->fields['illustration'] ?: 'kb-faq';
+            $params['illustration'] = $this->fields['illustration'] ?? '';
 
             // Translations informations
             $params['translations_count']    = KnowbaseItemTranslation::getNumberOfTranslationsForItem($this);
@@ -1068,7 +1053,7 @@ public function showFull($options = [])
             $params['actions'] = $this->getEditorActions();
         } elseif ($mode === "add") {
             $params['can_edit']     = $this->can(-1, CREATE);
-            $params['illustration'] = 'kb-faq';
+            $params['illustration'] = '';
         }
 
         $out = TemplateRenderer::getInstance()->render(
@@ -2833,7 +2818,7 @@ private function getCurrentArticleAndFavorites(int $current_id = 0): array
             $articles[] = new Article(
                 id: (int) $data['id'],
                 title: $data['name'] ?? '',
-                illustration: $data['illustration'] ?: 'kb-faq',
+                illustration: $data['illustration'] ?? '',
                 link: self::getFormURLWithID($data['id']),
                 // Take note of the current article as we will render it in
                 // the favorite list even if it is not yet a favorite.

src/KnowbaseItemCategory.php

@@ -33,6 +33,8 @@
  * ---------------------------------------------------------------------
  */
 
+use Glpi\UI\IllustrationManager;
+
 /// Class KnowbaseItemCategory
 class KnowbaseItemCategory extends CommonTreeDropdown
 {
@@ -71,14 +73,55 @@ public function getAdditionalFields()
         $fields = parent::getAdditionalFields();
 
         $fields[] = [
-            'name'  => 'illustration',
-            'type'  => 'illustration',
-            'label' => __('Illustration'),
+            'name'                 => 'illustration',
+            'type'                 => 'illustration',
+            'label'                => __('Illustration'),
+            'default_illustration' => '',
         ];
 
         return $fields;
     }
 
+    public function prepareInputForAdd($input)
+    {
+        $input = parent::prepareInputForAdd($input);
+        if (!is_array($input)) {
+            return $input;
+        }
+        return $this->prepareIllustrationInput($input);
+    }
+
+    public function prepareInputForUpdate($input)
+    {
+        $input = parent::prepareInputForUpdate($input);
+        if (!is_array($input)) {
+            return $input;
+        }
+        return $this->prepareIllustrationInput($input);
+    }
+
+    /**
+     * Drop the `illustration` field from $input when it is neither a known
+     * native icon nor an existing custom illustration file. The picker UI
+     * always submits valid values; this guards against direct POSTs.
+     *
+     * @param array<string, mixed> $input
+     * @return array<string, mixed>
+     */
+    private function prepareIllustrationInput(array $input): array
+    {
+        if (!array_key_exists('illustration', $input)) {
+            return $input;
+        }
+
+        $manager = new IllustrationManager();
+        if (!$manager->isKnownIllustrationValue((string) $input['illustration'])) {
+            unset($input['illustration']);
+        }
+
+        return $input;
+    }
+
     public function cleanDBonPurge()
     {
         $this->deleteChildrenAndRelationsFromDb(

templates/components/illustration/icon_picker.html.twig

@@ -84,25 +84,36 @@
     >
         <div class="{{ preview_inner_css_classes }}">
             {% set is_custom_file = value starts with custom_icon_prefix %}
+            {% set is_empty = value is empty %}
+
+            {# Placeholder: visible when no illustration is set. #}
+            <div
+                class="d-flex align-items-center justify-content-center{% if not is_empty %} d-none{% endif %}"
+                data-glpi-icon-picker-value-preview-placeholder
+                style="width: {{ size }}px; height: {{ size }}px;"
+            >
+                <i class="ti ti-photo-plus text-muted" style="font-size: {{ (size * 0.6)|round }}px;" aria-hidden="true"></i>
+            </div>
+
+            {# Native illustration preview slot. #}
             <div
-                {% if is_custom_file %}
-                    data-glpi-icon-picker-value-preview-custom
-                    data-testid="illustration-custom-preview"
-                {% else %}
-                    data-glpi-icon-picker-value-preview-native
+                class="{% if is_custom_file or is_empty %}d-none{% endif %}"
+                data-glpi-icon-picker-value-preview-native
+                style="width: {{ size }}px; height: {{ size }}px;"
+            >
+                {% if not is_custom_file and not is_empty %}
+                    {{ render_illustration(value, size) }}
                 {% endif %}
+            </div>
+
+            {# Custom illustration preview slot. #}
+            <div
+                class="{% if not is_custom_file %}d-none{% endif %}"
+                data-glpi-icon-picker-value-preview-custom
+                data-testid="illustration-custom-preview"
             >
-                {{ render_illustration(value, size) }}
+                {{ render_illustration(is_custom_file ? value : custom_icon_prefix, size) }}
             </div>
-            {% if is_custom_file %}
-                <div class="d-none" data-glpi-icon-picker-value-preview-native>
-                    {{ render_illustration('', size) }}
-                </div>
-            {% else %}
-                <div class="d-none" data-glpi-icon-picker-value-preview-custom data-testid="illustration-custom-preview">
-                    {{ render_illustration(custom_icon_prefix, size) }}
-                </div>
-            {% endif %}
         </div>
     </div>