From 4d88b6a51e286b41583c04fe49b8c98bfdb4a79e Mon Sep 17 00:00:00 2001 From: AdrienClairembault Date: Fri, 17 Apr 2026 16:17:20 +0200 Subject: [PATCH 1/7] Rework permission UI --- ajax/subvisibility.php | 25 +- ajax/visibility.php | 43 +- css/includes/components/_kb.scss | 12 + css/includes/components/_utils.scss | 4 + js/glpi_dialog.js | 2 +- js/modules/Ajax.js | 25 +- js/modules/Knowbase/ArticleController.js | 5 +- .../Knowbase/PermissionsFormController.js | 191 +++++++++ .../SidePanel/PermissionsRenderer.php | 14 +- src/KnowbaseItem.php | 9 +- .../tools/kb/modal/permissions.html.twig | 233 +++++----- tests/e2e/pages/KnowbaseItemPage.ts | 11 + tests/e2e/specs/Knowbase/permissions.spec.ts | 349 +++++++++++++-- tests/e2e/utils/Api.ts | 2 +- tests/e2e/utils/KnowbaseApi.ts | 14 + tests/e2e/utils/Random.ts | 38 ++ tests/e2e/utils/WorkerEntities.ts | 6 + .../SidePanel/PermissionsRendererTest.php | 401 ++++++++++++++++++ 18 files changed, 1185 insertions(+), 199 deletions(-) create mode 100644 js/modules/Knowbase/PermissionsFormController.js create mode 100644 tests/e2e/utils/Random.ts create mode 100644 tests/functional/Glpi/Knowbase/SidePanel/PermissionsRendererTest.php diff --git a/ajax/subvisibility.php b/ajax/subvisibility.php index 9a9608451f6..ebb12167a8f 100644 --- a/ajax/subvisibility.php +++ b/ajax/subvisibility.php @@ -36,7 +36,7 @@ header("Content-Type: text/html; charset=UTF-8"); Html::header_nocache(); -if (!empty($_POST['type']) && isset($_POST['items_id']) && ($_POST['items_id'] > 0)) { +if (!empty($_POST['type'])) { $prefix = ''; $suffix = ''; if (!empty($_POST['prefix'])) { @@ -47,21 +47,26 @@ switch ($_POST['type']) { case 'Group': case 'Profile': - $params = ['value' => $_SESSION['glpiactive_entity'], + $rand = mt_rand(); + $params = [ + 'value' => $_SESSION['glpiactive_entity'], 'name' => $prefix . 'entities_id' . $suffix, + 'width' => '100%', + 'rand' => $rand, ]; if (Session::canViewAllEntities()) { $params['toadd'] = [-1 => __('No restriction')]; } - echo "
"; - echo htmlescape(Entity::getTypeName(1)); - echo ""; + echo '
'; + echo ""; Entity::dropdown($params); - echo "
"; - echo __s('Child entities'); - echo ""; - Dropdown::showYesNo($prefix . 'is_recursive' . $suffix); - echo "
"; + echo ""; + echo "
"; + echo ""; + Dropdown::showYesNo($prefix . 'is_recursive' . $suffix, 1, params: [ + 'rand' => $rand, + ]); + echo "
"; break; } } diff --git a/ajax/visibility.php b/ajax/visibility.php index 78b0b2864fc..9cc27bb8c3b 100644 --- a/ajax/visibility.php +++ b/ajax/visibility.php @@ -55,33 +55,26 @@ $_POST['prefix'] = ''; } - echo "
"; switch ($_POST['type']) { case 'User': $params = [ 'right' => isset($_POST['allusers']) ? 'all' : $_POST['right'], - 'name' => $prefix . 'users_id' . $suffix, + 'name' => $prefix . 'users_id' . $suffix, + 'width' => '100%', + 'aria_label' => User::getTypeName(1), ]; User::dropdown($params); $display = true; break; case 'Group': - $params = ['rand' => $rand, - 'name' => $prefix . 'groups_id' . $suffix, - ]; - $params['toupdate'] = ['value_fieldname' - => 'value', - 'to_update' => "subvisibility$rand", - 'url' => $CFG_GLPI["root_doc"] . "/ajax/subvisibility.php", - 'moreparams' => ['items_id' => '__VALUE__', - 'type' => $_POST['type'], - 'prefix' => $_POST['prefix'], - ], + $params = [ + 'rand' => $rand, + 'name' => $prefix . 'groups_id' . $suffix, + 'width' => '100%', + 'aria_label' => Group::getTypeName(1), ]; - Group::dropdown($params); - echo ""; $display = true; break; @@ -91,9 +84,9 @@ 'name' => $prefix . 'entities_id' . $suffix, 'entity' => $_POST['entity'] ?? -1, 'entity_sons' => $_POST['is_recursive'] ?? false, + 'width' => '100%', + 'aria_label' => Entity::getTypeName(1), ]); - echo '
' . __s('Child entities') . '
'; - Dropdown::showYesNo($prefix . 'is_recursive' . $suffix); $display = true; break; @@ -104,26 +97,17 @@ $righttocheck = 'knowbase'; $checkright = KnowbaseItem::READFAQ; } - $params = [ + $params = [ 'rand' => $rand, 'name' => $prefix . 'profiles_id' . $suffix, + 'width' => '100%', 'condition' => [ 'glpi_profilerights.name' => $righttocheck, 'glpi_profilerights.rights' => ['&', $checkright], ], + 'aria_label' => Profile::getTypeName(1), ]; - $params['toupdate'] = ['value_fieldname' - => 'value', - 'to_update' => "subvisibility$rand", - 'url' => $CFG_GLPI["root_doc"] . "/ajax/subvisibility.php", - 'moreparams' => ['items_id' => '__VALUE__', - 'type' => $_POST['type'], - 'prefix' => $_POST['prefix'], - ], - ]; - Profile::dropdown($params); - echo ""; $display = true; break; } @@ -132,5 +116,4 @@ echo ""; } - echo "
"; } diff --git a/css/includes/components/_kb.scss b/css/includes/components/_kb.scss index bde2fdc6c91..147b557165b 100644 --- a/css/includes/components/_kb.scss +++ b/css/includes/components/_kb.scss @@ -710,3 +710,15 @@ padding: 1rem 1.25rem; border-top: 1px solid var(--tblr-border-color); } + +.visibility-type-col .select2-selection { + // Merge borders with dropdown to its right + border-top-right-radius: 0 !important; + border-bottom-right-radius: 0 !important; +} + +.visibility-item-col .select2-selection { + // Merge borders with dropdown to its left + border-top-left-radius: 0 !important; + border-bottom-left-radius: 0 !important; +} diff --git a/css/includes/components/_utils.scss b/css/includes/components/_utils.scss index cf3e43ad9f4..9afd5fc3039 100644 --- a/css/includes/components/_utils.scss +++ b/css/includes/components/_utils.scss @@ -77,6 +77,10 @@ font-size: 5em !important; } +.flex-grow-30 { + flex-grow: 30; +} + .opacity-100-hover:hover { opacity: 1 !important; } diff --git a/js/glpi_dialog.js b/js/glpi_dialog.js index 79d610a2e11..ff013384d81 100644 --- a/js/glpi_dialog.js +++ b/js/glpi_dialog.js @@ -110,7 +110,7 @@ var glpi_html_dialog = function({
- +
diff --git a/js/modules/Ajax.js b/js/modules/Ajax.js index 37203f1e7d4..aa96ccf57e2 100644 --- a/js/modules/Ajax.js +++ b/js/modules/Ajax.js @@ -36,23 +36,36 @@ * Perform a POST request to a GLPI endpoint. * * @param {string} url - The relative URL path (without root_doc prefix). - * @param {Object | null} values - The data to send as JSON in the request body or null if the request doens't send any data. + * @param {Object | FormData | URLSearchParams | null} values - The data to send + * in the request body, or null if no data. + * Plain objects are serialized as JSON. FormData and URLSearchParams are sent + * as-is (form data). * @returns {Promise} The fetch Response object. * @throws {Error} If the request fails or returns a non-ok status. */ export async function post(url, values = null) { try { + const is_plain_object = values !== null + && !(values instanceof FormData) + && !(values instanceof URLSearchParams) + ; + + const headers = { + 'X-Requested-With': 'XMLHttpRequest', + }; + + if (is_plain_object) { + headers['Content-Type'] = 'application/json'; + } + const params = { method: 'POST', - headers: { - 'Content-Type': 'application/json', - 'X-Requested-With': 'XMLHttpRequest', - }, + headers, }; if (values !== null) { - params.body = JSON.stringify(values); + params.body = is_plain_object ? JSON.stringify(values) : values; } const response = await fetch(`${CFG_GLPI.root_doc}/${url}`, params); diff --git a/js/modules/Knowbase/ArticleController.js b/js/modules/Knowbase/ArticleController.js index c02eecf0707..eeb2d706adc 100644 --- a/js/modules/Knowbase/ArticleController.js +++ b/js/modules/Knowbase/ArticleController.js @@ -178,8 +178,8 @@ export class GlpiKnowbaseArticleController try { this.#executeAction(e); } catch (e) { - console.error(e); glpi_toast_error(__("An unexpected error occurred.")); + throw e; } }); } @@ -468,7 +468,7 @@ export class GlpiKnowbaseArticleController this.#deleteItem(params.id); break; case EditorActionType.OPEN_MODAL: - this.#openModal(params.id, params.key, params.title, params.icon); + this.#openModal(params.id, params.key, params.title, params.icon ?? null); break; } } @@ -546,6 +546,7 @@ export class GlpiKnowbaseArticleController * @param {number} id * @param {string} key * @param {string} title + * @param {string | null} icon */ #openModal(id, key, title, icon = null) { diff --git a/js/modules/Knowbase/PermissionsFormController.js b/js/modules/Knowbase/PermissionsFormController.js new file mode 100644 index 00000000000..06bc37ecdd2 --- /dev/null +++ b/js/modules/Knowbase/PermissionsFormController.js @@ -0,0 +1,191 @@ +/** + * --------------------------------------------------------------------- + * + * GLPI - Gestionnaire Libre de Parc Informatique + * + * http://glpi-project.org + * + * @copyright 2015-2026 Teclib' and contributors. + * @licence https://www.gnu.org/licenses/gpl-3.0.html + * + * --------------------------------------------------------------------- + * + * LICENSE + * + * This file is part of GLPI. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + * + * --------------------------------------------------------------------- + */ + +import { post } from '/js/modules/Ajax.js'; + +const show_label = __('Show advanced options'); +const hide_label = __('Hide advanced options'); + +export class GlpiKnowbasePermissionsFormController +{ + /** + * @type {object} + */ + #visibilityDropdownParams; + + /** + * @type {HTMLElement} + */ + #dropdown; + + /** + * @type {HTMLElement} + */ + #visibility; + + /** + * @type {HTMLElement} + */ + #visibilityRecursive; + + /** + * @type {HTMLElement} + */ + #submitBtn; + + /** + * @type {HTMLElement} + */ + #advancedToggle; + + /** + * @type {HTMLElement} + */ + #advancedBlock; + + /** + * @type {HTMLElement} + */ + #advancedContent; + + /** + * @type {HTMLElement} + */ + #advancedVisible = false; + + /** + * @param {HTMLElement} container + * @param {string} rand + * @param {object} visibilityDropdownParams + */ + constructor(container, rand, visibilityDropdownParams) + { + this.#visibilityDropdownParams = visibilityDropdownParams; + + this.#dropdown = document.getElementById(`dropdown__type${rand}`); + this.#visibility = document.getElementById(`visibility${rand}`); + this.#visibilityRecursive = document.getElementById(`visibility-recursive${rand}`); + this.#submitBtn = document.getElementById(`visibility-submit-btn${rand}`); + this.#advancedToggle = document.getElementById(`visibility-advanced-toggle${rand}`); + this.#advancedBlock = document.getElementById(`visibility-advanced${rand}`); + this.#advancedContent = document.getElementById(`visibility-advanced-content${rand}`); + + this.#bindEvents(); + } + + #resetAdvanced() + { + this.#advancedVisible = false; + this.#advancedBlock.classList.add('d-none'); + this.#advancedContent.innerHTML = ''; + this.#advancedToggle.innerHTML = `${show_label}`; + } + + async #loadVisibility(type) + { + const params = new URLSearchParams({ + ...this.#visibilityDropdownParams, + type, + nobutton: 1, + }); + const response = await post('ajax/visibility.php', params); + const html = await response.text(); + $(this.#visibility).html(html); + } + + async #loadSubvisibility(type) + { + const params = new URLSearchParams({ type }); + const response = await post('ajax/subvisibility.php', params); + const html = await response.text(); + $(this.#advancedContent).html(html); // jQuery is needed here to run scripts + } + + #bindEvents() + { + // Handle itemtype changes + // Note: select2 events only work with jQuery handlers + $(this.#dropdown).on('change', async (e) => { + this.#resetAdvanced(); + + // No type selected: hide item dropdown + if (e.target.value === '') { + this.#visibility.innerHTML = ''; + this.#visibility.classList.add('d-none'); + this.#visibilityRecursive.classList.add('d-none'); + this.#submitBtn.classList.add('d-none'); + this.#advancedToggle.classList.add('d-none'); + return; + } + + const type = e.target.value; + + await this.#loadVisibility(type); + this.#visibility.classList.remove('d-none'); + this.#submitBtn.classList.remove('d-none'); + + if (type === 'Entity') { + // Specific layout for entities (child entities dropdown) + this.#visibilityRecursive.classList.remove('d-none'); + this.#advancedToggle.classList.add('d-none'); + } else { + // Groups and profiles have access to advanced options + this.#visibilityRecursive.classList.add('d-none'); + + if (type === 'Group' || type === 'Profile') { + this.#advancedToggle.classList.remove('d-none'); + } else { + this.#advancedToggle.classList.add('d-none'); + } + } + }); + + // Handle advanced options toggle + this.#advancedToggle.addEventListener('click', async () => { + this.#advancedVisible = !this.#advancedVisible; + + if (this.#advancedVisible) { + // Show advanced options + this.#advancedBlock.classList.remove('d-none'); + await this.#loadSubvisibility(this.#dropdown.value); + const html = `${hide_label}`; + this.#advancedToggle.innerHTML = html; + } else { + // Hide advanced options + this.#advancedBlock.classList.add('d-none'); + this.#advancedContent.innerHTML = ''; + const html = `${show_label}`; + this.#advancedToggle.innerHTML = html; + } + }); + } +} diff --git a/src/Glpi/Knowbase/SidePanel/PermissionsRenderer.php b/src/Glpi/Knowbase/SidePanel/PermissionsRenderer.php index d7b28b3785c..0bc8dbe2f4b 100644 --- a/src/Glpi/Knowbase/SidePanel/PermissionsRenderer.php +++ b/src/Glpi/Knowbase/SidePanel/PermissionsRenderer.php @@ -65,7 +65,7 @@ public function getParams(KnowbaseItem $item): array $rand = mt_rand(); $owner_id = (int) $item->fields['users_id']; - $entries = $this->buildEntries($item, $owner_id); + $entries = $this->buildEntries($item); $visiblity_dropdown_params = [ 'type' => '__VALUE__', @@ -84,10 +84,6 @@ public function getParams(KnowbaseItem $item): array 'rand' => $rand, 'can_edit' => $can_edit, 'is_owner' => ($owner_id === Session::getLoginUserID()), - 'owner' => [ - 'name' => getUserName($owner_id), - 'users_id' => $owner_id, - ], 'entries' => $entries, 'visiblity_dropdown_params' => $visiblity_dropdown_params, ]; @@ -97,10 +93,9 @@ public function getParams(KnowbaseItem $item): array * Build entries array for the permissions list * * @param KnowbaseItem $item - * @param int $owner_id * @return array */ - private function buildEntries(KnowbaseItem $item, int $owner_id): array + private function buildEntries(KnowbaseItem $item): array { $id = $item->getID(); $entries = []; @@ -108,9 +103,6 @@ private function buildEntries(KnowbaseItem $item, int $owner_id): array $users = KnowbaseItem_User::getUsers($id); foreach ($users as $val) { foreach ($val as $data) { - if ((int) $data['users_id'] === $owner_id) { - continue; // Owner displayed separately in footer - } $entries[] = [ 'itemtype' => KnowbaseItem_User::class, 'id' => $data['id'], @@ -141,6 +133,7 @@ private function buildEntries(KnowbaseItem $item, int $owner_id): array 'icon' => 'ti-users-group', 'badge_class' => 'bg-green-lt', 'entity_name' => $entity_name, + 'entities_id' => $data['entities_id'], 'is_recursive' => (bool) $data['is_recursive'], ]; } @@ -179,6 +172,7 @@ private function buildEntries(KnowbaseItem $item, int $owner_id): array 'icon' => 'ti-id-badge-2', 'badge_class' => 'bg-purple-lt', 'entity_name' => $entity_name, + 'entities_id' => $data['entities_id'], 'is_recursive' => (bool) $data['is_recursive'], ]; } diff --git a/src/KnowbaseItem.php b/src/KnowbaseItem.php index d79c15ef401..58456e3d301 100644 --- a/src/KnowbaseItem.php +++ b/src/KnowbaseItem.php @@ -1069,14 +1069,17 @@ private function getEditorActions(): array ], ); + $label = __('Permissions'); + $icon = "ti ti-lock"; $actions[] = new EditorAction( - label: _n('Target', 'Targets', Session::getPluralNumber()), - icon: "ti ti-eye", + label: $label, + icon: $icon, type: EditorActionType::OPEN_MODAL, params: [ 'id' => $this->fields['id'], 'key' => 'SidePanel/permissions', - 'title' => _n('Target', 'Targets', Session::getPluralNumber()), + 'title' => $label, + 'icon' => $icon, ], ); $actions[] = new EditorAction( diff --git a/templates/pages/tools/kb/modal/permissions.html.twig b/templates/pages/tools/kb/modal/permissions.html.twig index f00db140240..c1b9dca7919 100644 --- a/templates/pages/tools/kb/modal/permissions.html.twig +++ b/templates/pages/tools/kb/modal/permissions.html.twig @@ -30,119 +30,154 @@ # --------------------------------------------------------------------- #} -{% import "components/form/fields_macros.html.twig" as fields %} +{% set has_entries = entries|length > 0 %} -{# Add target form #} -{% if can_edit %} -
-
- -
- {{ fields.dropdownItemTypes('_type', '', __('Add a target'), { - types: ['Entity', 'Group', 'Profile', 'User'], - rand: rand, - mb: '', - }) }} -
-
-
-
- -
-
- -
-
-
-{% endif %} +{# Status label #} +

+ {{ __('Visible by:') }} +

{# Permissions list #} -
+
+ {% if not has_entries %} +
+ {{ __('This article is not yet visible to anyone.') }} +
+ {% endif %} + {% for entry in entries %} -
+
- {# Avatar: user picture for Users, typed icon for others #} - {% if entry.type == 'User' %} - {{ include('components/user/picture.html.twig', { - users_id: entry.users_id, - avatar_size: 'avatar-sm', - with_link: false, - enable_anonymization: false, - }) }} - {% else %} - - - - {% endif %} + {# Avatar: user picture for Users, typed icon for others #} + {% if entry.type == 'User' %} + {{ include('components/user/picture.html.twig', { + users_id: entry.users_id, + avatar_size: 'avatar-sm', + with_link: false, + enable_anonymization: false, + }) }} + {% else %} + + + + {% endif %} - {# Info #} -
-
- {{ entry.name }} - {% if entry.is_recursive %} - - R - - {% endif %} -
-
{{ __('Can view') }}
- {% if entry.entity_name %} -
{{ entry.entity_name }}
+ {# Info #} +
+
+ {{ entry.name }} + {% if entry.type == "Entity" and entry.is_recursive %} + ({{ __("recursive") }}) {% endif %}
- - {# Delete button #} - {% if can_edit %} - + {% if entry.entity_name and (entry.entities_id != 0 or entry.is_recursive != 1) %} +
+ {{ entry.entity_name }} + {% if entry.type != "Entity" and entry.is_recursive %} + ({{ __("recursive") }}) + {% endif %} +
{% endif %}
+ + {# Delete button #} + {% if can_edit %} + + {% endif %} +
{% endfor %}
-{# Owner footer (full-width, differentiated background) #} -
- {{ include('components/user/picture.html.twig', { - users_id: owner.users_id, - avatar_size: 'avatar-sm', - with_link: false, - enable_anonymization: false, - }) }} -
- {{ owner.name }} -
{{ __('Owner') }}
+{# Add target form #} +{% if can_edit %} +
+
+ + {% set add_label = __('Add access for...') %} +
+ {# Row 1: type + item dropdowns + Entity child entities inline #} +
+
+
+ +
+
+ {% do call('Dropdown::showItemTypes', ['_type', ['Entity', 'Group', 'Profile', 'User'], { + 'rand': rand, + 'value': '', + 'emptylabel': __('Select a type...'), + 'aria_label': add_label, + 'width': '100%', + }]) %} +
+
+
+
+
+ + {% do call('Dropdown::showYesNo', ['is_recursive', 1, -1, { + rand: rand, + }]) %} +
+
+
+ {# Advanced options #} +
+
+
+ {# Toggle + Submit #} +
+ +
+ +
+
+
+ +
-
+{% endif %} {% if can_edit %}