NGSTACK-991 add better visibility info for content and its locations

bundle/Controller/Content/LastModifiedInfo.php

@@ -0,0 +1,25 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Netgen\Bundle\IbexaAdminUIExtraBundle\Controller\Content;
+
+use Ibexa\Contracts\AdminUi\Controller\Controller;
+use Ibexa\Contracts\Core\Repository\Values\Content\Content;
+use Symfony\Component\HttpFoundation\Response;
+
+class LastModifiedInfo extends Controller
+{
+    public function __invoke(Content $content): Response
+    {
+        $lastContributor = $content->getVersionInfo()->getCreator();
+
+        return $this->render(
+            '@NetgenIbexaAdminUIExtra/themes/ngadmin/ui/last_modified_info.html.twig',
+            [
+                'last_contributor_name' => $lastContributor->getName(),
+                'content_info' => $content->getContentInfo(),
+            ],
+        );
+    }
+}

bundle/Controller/Content/VisibilityInfo.php

@@ -0,0 +1,110 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Netgen\Bundle\IbexaAdminUIExtraBundle\Controller\Content;
+
+use Ibexa\Contracts\AdminUi\Controller\Controller;
+use Ibexa\Contracts\Core\Repository\ContentService;
+use Ibexa\Contracts\Core\Repository\Exceptions\BadStateException;
+use Ibexa\Contracts\Core\Repository\LocationService;
+use Symfony\Component\HttpFoundation\Request;
+use Symfony\Component\HttpFoundation\Response;
+use Symfony\Contracts\Translation\TranslatorInterface;
+
+use function implode;
+
+class VisibilityInfo extends Controller
+{
+    public function __construct(
+        private readonly LocationService $locationService,
+        private readonly TranslatorInterface $translator,
+        private readonly ContentService $contentService,
+    ) {}
+
+    public function __invoke(int $contentId, Request $request): Response
+    {
+        $iconPath = $request->attributes->get('iconPath') ?? $request->query->get('iconPath');
+
+        $content = $this->contentService->loadContent($contentId);
+
+        $extraContent = [];
+        if ($content->getContentInfo()->isHidden() === true) {
+            $extraContent[] = $this->translator->trans('content.visibility.content_hidden', [], 'locationview');
+        }
+
+        try {
+            $locations = $this->locationService->loadLocations($content->getContentInfo());
+
+            $explicitlyHiddenLocations = 0;
+            $hiddenByAncestorLocations = 0;
+            foreach ($locations as $location) {
+                if ($location->explicitlyHidden) {
+                    $explicitlyHiddenLocations++;
+                }
+
+                if ($location->isInvisible() && $location->getParentLocation()?->isInvisible()) {
+                    $hiddenByAncestorLocations++;
+                }
+            }
+
+            $explicitlyHiddenLocationsMessage = '';
+            $hiddenByAncestorLocationsMessage = '';
+            if (count($locations) === 1) {
+                if ($explicitlyHiddenLocations !== 0) {
+                    $explicitlyHiddenLocationsMessage = $this->translator->trans('content.visibility.location_hidden', [], 'locationview');
+                }
+
+                if ($hiddenByAncestorLocations !== 0) {
+                    $hiddenByAncestorLocationsMessage = $this->translator->trans('content.visibility.location_hidden_by_ancestor', [], 'locationview');
+                }
+            } else {
+                if ($explicitlyHiddenLocations !== 0) {
+                    $explicitlyHiddenLocationsMessage = $this->translator->trans(
+                        'content.visibility.locations_hidden',
+                        [
+                            '%hidden%' => $explicitlyHiddenLocations,
+                            '%total%' => count($locations),
+                        ],
+                        'locationview',
+                    );
+                }
+
+                if ($hiddenByAncestorLocations !== 0) {
+                    $hiddenByAncestorLocationsMessage = $this->translator->trans(
+                        'content.visibility.locations_hidden_by_ancestor',
+                        [
+                            '%hidden%' => $hiddenByAncestorLocations,
+                            '%total%' => count($locations),
+                        ],
+                        'locationview',
+                    );
+                }
+            }
+
+            if ($explicitlyHiddenLocationsMessage !== '') {
+                $extraContent[] = $explicitlyHiddenLocationsMessage;
+            }
+
+            if ($hiddenByAncestorLocationsMessage !== '') {
+                $extraContent[] = $hiddenByAncestorLocationsMessage;
+            }
+        } catch (BadStateException $e) {
+            $extraContent[] = $this->translator->trans('content.visibility.cannot_fetch_locations', [], 'locationview');
+        }
+
+        if ($extraContent === []) {
+            return new Response('', Response::HTTP_NO_CONTENT);
+        }
+
+        return $this->render('@IbexaAdminUi/themes/admin/ui/component/alert/alert.html.twig',
+            [
+                'type' => 'info',
+                'title' => $this->translator->trans('content.visibility.info', [], 'locationview'),
+                'extra_content' => implode('<br>', $extraContent),
+                'icon_path' => $iconPath,
+                'class' => 'mt-4',
+            ],
+        );
+    }
+}

bundle/Resources/config/routing.yaml

@@ -9,3 +9,10 @@ netgen.ibexa_admin_ui_extra.queues.list:
     path: /queues/list
     methods: [ 'GET' ]
     controller: 'Netgen\Bundle\IbexaAdminUIExtraBundle\Controller\Queues'
+
+netgen.ibexa_admin_ui_extra.content.visibility.locations:
+    path: /content/{contentId}/locations/visibility_info
+    methods: ['GET']
+    controller: 'Netgen\Bundle\IbexaAdminUIExtraBundle\Controller\Content\VisibilityInfo'
+    requirements:
+        contentId: \d+

bundle/Resources/config/services/controllers.yaml

@@ -7,6 +7,16 @@ services:
             - '@Netgen\Bundle\IbexaAdminUIExtraBundle\Form\FormFactory'
             - '@Ibexa\Core\Helper\TranslationHelper'
 
+    Netgen\Bundle\IbexaAdminUIExtraBundle\Controller\Content\VisibilityInfo:
+        parent: Ibexa\Contracts\AdminUi\Controller\Controller
+        arguments:
+            - '@ibexa.api.service.location'
+            - '@Symfony\Contracts\Translation\TranslatorInterface'
+            - '@ibexa.api.service.content'
+
+    Netgen\Bundle\IbexaAdminUIExtraBundle\Controller\Content\LastModifiedInfo:
+        parent: Ibexa\Contracts\AdminUi\Controller\Controller
+
     Netgen\Bundle\IbexaAdminUIExtraBundle\Controller\Queues:
         parent: Ibexa\Contracts\AdminUi\Controller\Controller
         arguments:

bundle/Resources/encore/ibexa.config.manager.js

@@ -4,6 +4,9 @@ module.exports = (ibexaConfig, ibexaConfigManager) => {
     ibexaConfigManager.add({
         ibexaConfig,
         entryName: 'ibexa-admin-ui-location-view-js',
-        newItems: [path.resolve(__dirname, '../public/js/scripts/admin.content.always_available.js')],
+        newItems: [
+            path.resolve(__dirname, '../public/js/scripts/admin.content.always_available.js'),
+            path.resolve(__dirname, '../public/js/scripts/admin.content.location.visibility_info.js'),
+        ],
     });
 };

bundle/Resources/public/js/scripts/admin.content.location.visibility_info.js

@@ -0,0 +1,54 @@
+(function (global, doc, ibexa) {
+    "use strict";
+    const SELECTOR_VISIBILITY_ALERT_WRAPPER = '#ng-visibility-alert';
+    const handleRefreshError = () => {}
+    const handleRefreshResponse = (response) => {
+        if (response.status === 204) {
+            return { isEmpty: true };
+        }
+
+        if (!response.ok) {
+            throw new Error(response.statusText);
+        }
+
+        return response.text().then((html) => ({ isEmpty: false, html }));
+    };
+    const updateAlertContent = (wrapper, { isEmpty, html }) => {
+        wrapper.innerHTML = isEmpty ? '' : html;
+    };
+    const refreshAlert = (wrapper, url) => {
+        const request = new Request(url, {
+            method: 'GET',
+            credentials: 'same-origin',
+            headers: { 'X-Requested-With': 'XMLHttpRequest' },
+        });
+
+        fetch(request)
+            .then(handleRefreshResponse)
+            .then(updateAlertContent.bind(null, wrapper))
+            .catch(handleRefreshError);
+    };
+    const onReady = () => {
+        const wrapper = doc.querySelector(SELECTOR_VISIBILITY_ALERT_WRAPPER);
+        if (!wrapper) {
+            return;
+        }
+
+        const url = wrapper.dataset.url;
+        if (!url) {
+            return;
+        }
+
+        doc.body.addEventListener(
+            'ibexa-content-tree-refresh',
+            refreshAlert.bind(null, wrapper, url),
+            false
+        );
+    };
+
+    if (doc.readyState === 'loading') {
+        doc.addEventListener('DOMContentLoaded', onReady);
+    } else {
+        onReady();
+    }
+})(window, window.document, window.ibexa);

bundle/Resources/translations/locationview.en.yaml

@@ -3,3 +3,15 @@ content.update_always_available.success.available: "Content '%name%' marked as a
 content.update_always_available.success.not_available: "Content '%name%' unmarked as always available."
 content.update_always_available.toggle_widget.label.on: "On"
 content.update_always_available.toggle_widget.label.off: "Off"
+
+content.last_modified: "Last modified:"
+
+content.visibility.info: "This content might not be visible"
+content.visibility.content_hidden: "Content is hidden"
+content.visibility.location_hidden: "Location is hidden"
+content.visibility.location_hidden_by_ancestor: "Location is hidden by parent or ancestor location"
+content.visibility.locations_hidden: "%hidden% of %total% location(s) are hidden"
+content.visibility.locations_hidden_by_ancestor: "%hidden% of %total% location(s) are hidden by parent or ancestor location"
+content.visibility.cannot_fetch_locations: "Can't fetch locations for this content!"
+
+content.tab.locations.visibility_toggle: "One of the ancestors is hidden"

bundle/Resources/views/themes/ngadmin/content/location_view.html.twig

@@ -20,33 +20,41 @@
             {% endif %}
         {% endblock %}
         {% block bottom %}
-            <span class="ibexa-icon-tag">
-                {% set url = path('ibexa.content_type.view', { 'contentTypeId': content_type.id, 'contentTypeGroupId': content_type.contentTypeGroups|first.id }) %}
-                <a href="{{ url }}">
-                    <svg class="ibexa-icon ibexa-icon--small ibexa-icon--{{ content_type.identifier }}">
-                        <use xlink:href="{{ ibexa_content_type_icon(content_type.identifier) }}"></use>
-                    </svg>
-                </a>
-                <a href="{{ url }}">{{ content_type.name }}</a>
-            </span>
-            {% set language_names = [] %}
-            {% for language in content.versionInfo.languages %}
-                {% set language_names = language_names|merge([language.name]) %}
-            {% endfor %}
-            {{ language_names|join(', ') }}
+            <div style="display: flex; justify-content: space-between;">
+                <div style="flex-basis: 50%; max-width: 50%;">
+                    <span class="ibexa-icon-tag">
+                        {% set url = path('ibexa.content_type.view', { 'contentTypeId': content_type.id, 'contentTypeGroupId': content_type.contentTypeGroups|first.id }) %}
+                        <a href="{{ url }}">
+                            <svg class="ibexa-icon ibexa-icon--small ibexa-icon--{{ content_type.identifier }}">
+                                <use xlink:href="{{ ibexa_content_type_icon(content_type.identifier) }}"></use>
+                            </svg>
+                        </a>
+                        <a href="{{ url }}">{{ content_type.name }}</a>
+                    </span>
+                    {% set language_names = [] %}
+                    {% for language in content.versionInfo.languages %}
+                        {% set language_names = language_names|merge([language.name]) %}
+                    {% endfor %}
+                    {{ language_names|join(', ') }}
+                </div>
+                <div style="flex-basis: 50%; display: flex; justify-content: flex-end">
+                    {{ render(controller('Netgen\\Bundle\\IbexaAdminUIExtraBundle\\Controller\\Content\\LastModifiedInfo', {
+                        'content': content,
+                    })) }}
+                </div>
+            </div>
         {% endblock %}
     {% endembed %}
 
-    {% if location.hidden or location.invisible %}
-        <div class="pb-4">
-            {% include '@ibexadesign/ui/component/alert/alert.html.twig' with {
-                type: 'info',
-                title: 'content.hidden.message'|trans()|desc('This Content item or its Location is hidden.'),
-                icon_path: ibexa_icon_path('hide'),
-                class: 'mb-4',
-            } only %}
-        </div>
-    {% endif %}
+    <div id="ng-visibility-alert"
+         data-url="{{ path('netgen.ibexa_admin_ui_extra.content.visibility.locations', { contentId: content.id, iconPath: ibexa_icon_path('hide') }) }}"
+    >
+        {{ render(controller('Netgen\\Bundle\\IbexaAdminUIExtraBundle\\Controller\\Content\\VisibilityInfo', {
+            'contentId': content.id,
+            'iconPath': ibexa_icon_path('hide'),
+        })) }}
+    </div>
+
     {{ ibexa_render_component_group(
         'location-view-content-alerts',
         {