IBX-3523: Introduced tabs to left sidebar in Content Edit interface #526

webhdx · 2022-08-03T13:31:53Z

Question	Answer
Tickets	https://issues.ibexa.co/browse/IBX-3523
Complementary PR	https://github.com/ibexa/taxonomy/pull/142
Bug fix?	no
New feature?	yes
BC breaks?	no
Tests pass?	yes
Doc needed?	yes
License	GPL-2.0

This PR changes sidebar menu in content editing interface to use tabs. Idea behind this is to separate typical fieldtypes from fieldtypes enriching content with new functionality. Good example is SEO - it isn't a field per se but rather a fieldtype handling functionality for the whole Content object. Taxonomy is another good example. Items assigned to Meta tabs are configured using semantic configuration:

ibexa:
    system:
        admin_group:
            admin_ui_forms:
                content_edit:
                    fieldtypes:
                        ibexa_taxonomy_entry_assignment: 	# fieldtype identifier
                            meta: true 						# put this fieldtype under Meta tab

Extending the menu

<?php

namespace App\EventListener;

use Ibexa\AdminUi\Menu\ContentEditAnchorMenuBuilder;
use Ibexa\AdminUi\Menu\Event\ConfigureMenuEvent;
use Symfony\Component\EventDispatcher\EventSubscriberInterface;

class MyMenuListener implements EventSubscriberInterface
{
    public static function getSubscribedEvents(): array
    {
        return [ConfigureMenuEvent::CONTENT_EDIT_ANCHOR_MENU => 'onAnchorMenuConfigure'];
    }

    public function onAnchorMenuConfigure(ConfigureMenuEvent $event): void
    {
        $menu = $event->getMenu(); // root
        
        $menu[ContentEditAnchorMenuBuilder::ITEM__CONTENT]; // Content tab
        
        $menu[ContentEditAnchorMenuBuilder::ITEM__META]; // Meta tab
        
        // add new tab
        $menu->addChild('item', ['attributes' => ['data-target-id' => 'ibexa-edit-content-sections-item']]); // data-target-id has to match with component
        
        // add 2nd level menu
        $menu['item']->addChild('item_2', ['attributes' => ['data-target-id' => 'ibexa-edit-content-sections-item-item_2']]); // data-target-id has to match with secondary section id's
    }
}

For new tabs it's also required to render its section in content editing form. This is done with UI Component:

    app.my_component:
        parent: Ibexa\AdminUi\Component\TwigComponent
        arguments:
            $template: 'my_component.html.twig'
        tags:
            - { name: ibexa.admin_ui.component, group: 'content-edit-sections' } # note the group name

# my_component.html.twig

{% extends '@ibexadesign/ui/component/anchor_navigation/primary_section.html.twig' %}

{% set data_id = 'ibexa-edit-content-sections-item' %}

{% block sections %}
    {% embed '@ibexadesign/ui/component/anchor_navigation/secondary_section.html.twig' %}
        {% set data_id = 'ibexa-edit-content-sections-item-item_2' %}
        {% block content %}
			Contents of 'item_2' secondary section
        {% endblock %}
    {% endembed %}
{% endblock %}

Deprecations

I've deprecated admin_ui_forms.content_edit_form_templates config setting in favor of making content_edit an array where we can add more settings related to content editing form (i.e. content_edit.fieldtypes as in this PR)

system:
    admin_group:
        admin_ui_forms:

            # deprecated setting:
            content_edit_form_templates: 
                    - { template: '@ibexadesign/content/form_fields.html.twig', priority: 0 }
            
            # use config below instead:
            content_edit:
                form_templates:
                    - { template: '@ibexadesign/content/form_fields.html.twig', priority: 0 }

Both notations will work until deprecation is removed in 5.0. Matching siteaccess aware parameters have not been renamed as it's more difficult to provide backwards compatibility on those.

Checklist:

Coding standards ($ composer fix-cs)
Ready for Code Review

…Meta fields in Content category

…_edit.form_templates notation

src/bundle/DependencyInjection/Configuration/Parser/AdminUiForms.php

src/lib/Component/Content/ContentEditMetaFieldsComponent.php

lserwatka · 2022-08-04T08:04:58Z

@webhdx you must fix SonarCloud issues too.

dew326 · 2022-08-04T09:13:07Z

src/bundle/Resources/public/js/scripts/admin.anchor.sections.navigation.js

+        contentContainer.style.paddingBottom = '0px';
+
+        if (!firstSection.isSameNode(lastSection) && lastSection && lastSection.offsetHeight) {
+            const headerContainer = doc.querySelector('.ibexa-edit-header .ibexa-edit-header__container');


Do we need this parent in selector? .ibexa-edit-header

dew326 · 2022-08-04T09:15:21Z

src/bundle/Resources/public/js/scripts/admin.anchor.sections.navigation.js

+        items.forEach((item) => item.classList.toggle('ibexa-navigation-menu__secondary--active', item.isSameNode(node)));
+    };
+    const onSelectPrimaryMenuList = (event) => {
+        const { targetId } = event.target.dataset;


Suggested change

const { targetId } = event.target.dataset;

const { targetId } = event.currentTarget.dataset;

dew326 · 2022-08-04T09:15:37Z

src/bundle/Resources/public/js/scripts/admin.anchor.sections.navigation.js

+        }
+    };
+    const onSelectPrimaryMenuDropdown = (event) => {
+        const targetId = event.target.value;


Suggested change

const targetId = event.target.value;

const targetId = event.currentTarget.value;

dew326 · 2022-08-04T09:19:33Z

src/bundle/Resources/views/themes/admin/ui/anchor_navigation_menu.html.twig

+                        {% set sanitized_item = item|slug %}
+                        <li class="ibexa-anchor-navigation-menu__item">
+                            <button
+                                    type="button"


dew326 · 2022-08-04T09:19:46Z

src/bundle/Resources/views/themes/admin/content/edit_base.html.twig

+                    data-id="ibexa-edit-content-sections-content-fields"
+                >
+                    {% block form_fields %}
+                            <div class="ibexa-anchor-navigation-sections">


dew326 · 2022-08-04T09:20:02Z

...bundle/Resources/views/themes/admin/ui/component/anchor_navigation/primary_section.html.twig

@@ -0,0 +1,8 @@
+<div
+        class="ibexa-edit-content__primary-section"


dew326 · 2022-08-04T09:20:10Z

...ndle/Resources/views/themes/admin/ui/component/anchor_navigation/secondary_section.html.twig

@@ -0,0 +1,6 @@
+<div
+        data-id="{{ data_id }}"


src/lib/Component/Content/ContentEditMetaFieldsComponent.php

src/lib/Form/Provider/GroupedNonMetaFormFieldsProvider.php

src/lib/Menu/ContentEditAnchorMenuBuilder.php

tests/bundle/DependencyInjection/Configuration/Parser/AdminUiFormsTest.php

tests/lib/EventListener/SetViewParametersListenerTest.php

alongosz · 2022-08-04T10:56:46Z

@webhdx nice description. If it lands in the Doc, I'd have one small nitpick for it - service name should follow our and SF guidelines, so rather app.my_component

alongosz

+1 for backend side, but other Reviewers had important remarks.

src/lib/Component/Content/ContentEditMetaFieldsComponent.php

konradoboza

#526 (comment) was left behind, other than this 👍

tischsoic · 2022-08-05T09:03:02Z

src/bundle/Resources/public/js/scripts/admin.anchor.sections.navigation.js

+        }
+    };
+
+    bindPrimaryMenuListEvents();


Why not attach<...> as we have in other places?

tischsoic · 2022-08-05T09:22:38Z

src/bundle/Resources/public/js/scripts/admin.anchor.sections.navigation.js

+        const firstSection = primarySection.querySelector('.ibexa-edit-content__secondary-section:first-child');
+        const lastSection = primarySection.querySelector('.ibexa-edit-content__secondary-section:last-child');


This can be confusing because :first-child and :last-child "ignore" the class. This will return null in case .ibexa-edit-content__secondary-section is not first/last element, but it is assumed below that firstSection will never be null, so:

Suggested change

const firstSection = primarySection.querySelector('.ibexa-edit-content__secondary-section:first-child');

const lastSection = primarySection.querySelector('.ibexa-edit-content__secondary-section:last-child');

const firstSection = primarySection.firstElementChild;

const lastSection = primarySection.lastElementChild;

tischsoic · 2022-08-05T09:24:10Z

src/bundle/Resources/public/js/scripts/admin.anchor.sections.navigation.js

+
+        contentContainer.style.paddingBottom = '0px';
+
+        if (!firstSection.isSameNode(lastSection) && lastSection && lastSection.offsetHeight) {


I think that lastSection will never be null, given firstSection is not null.

Suggested change

if (!firstSection.isSameNode(lastSection) && lastSection && lastSection.offsetHeight) {

if (!firstSection.isSameNode(lastSection) && lastSection.offsetHeight) {

tischsoic · 2022-08-05T09:29:58Z

src/bundle/Resources/public/js/scripts/admin.anchor.sections.navigation.js

+        const lastSection = primarySection.querySelector('.ibexa-edit-content__secondary-section:last-child');
+        const contentContainer = contentColumn.querySelector('.ibexa-edit-content__container');
+
+        contentContainer.style.paddingBottom = '0px';


Do we have to set it even for a case in which we are setting it below again?

It's kinda of a reset, notice that we set this style after two ifs, in all other cases it should be set to 0

tischsoic · 2022-08-05T09:44:18Z

src/bundle/Resources/public/js/scripts/admin.anchor.sections.navigation.js

+    };
+    let currentlyVisibleSections = getSecondarySectionActiveItems();
+    const fitSecondarySections = () => {
+        const primarySection = doc.querySelector('.ibexa-edit-content__primary-section--active');


Sometimes you are using formContainerNode and sometimes not, is there any reason behind it?

tischsoic · 2022-08-05T09:46:15Z

src/bundle/Resources/public/js/scripts/admin.anchor.sections.navigation.js

+
+        fitSecondarySections();
+    };
+    const showSecondaryMenu = (node) => {


It would be nice to have such a function also for the primary menu.

tischsoic · 2022-08-05T09:48:48Z

src/bundle/Resources/public/scss/_navigation-menu.scss

+            color: $ibexa-color-info;
+            font-weight: 600;
+
+            &:before {


here and in other places below:

Suggested change

&:before {

&::before {

tischsoic · 2022-08-05T09:50:43Z

src/bundle/Resources/views/themes/admin/content/edit/edit.html.twig

@@ -51,6 +51,34 @@
    </div>
 {% endblock %}

+{% block anchor_menu %}
+    {% set content_edit_anchor_menu = knp_menu_get('ibexa.admin_ui.menu.content_edit.anchor_menu', [], {
+        'content': content,


nitpick here and in other places:

Suggested change

'content': content,

content,

… array

micszo · 2022-08-05T13:43:37Z

Small frontend issue: http://g.recordit.co/W2X0mTjQbM.gif

micszo · 2022-08-05T14:54:21Z

@GrabowskiM the second level menu item width still changes
also the new menu does not behave correctly when switching tabs
http://g.recordit.co/jcAeY6GdGq.gif

sonarcloud · 2022-08-08T11:02:06Z

Kudos, SonarCloud Quality Gate passed!

0 Bugs
0 Vulnerabilities
0 Security Hotspots
5 Code Smells

No Coverage information
0.0% Duplication

micszo

QA Approved on Ibexa Commerce 4.2.x-dev.

webhdx added 6 commits August 3, 2022 13:57

IBX-3523: Introduced tabs to left sidebar in Content Edit interface

6829ced

IBX-3523: Created new menu content_edit_anchor_menu

10bc683

IBX-3523: Created new component displaying meta fieldtypes form

2a018db

IBX-3523: Refactored admin_ui_forms configuration

df7594b

IBX-3523: Added GroupedNonMetaFormFieldsProvider to avoid displaying …

8b0fd9f

…Meta fields in Content category

IBX-3523: Fixed uninitialized $items variable

603b4c2

webhdx added Doc needed The changes require some documentation Feature New feature request Ready for review labels Aug 3, 2022

webhdx requested review from a team August 3, 2022 13:31

webhdx self-assigned this Aug 3, 2022

github-actions bot assigned mikadamczyk, Nattfarinn and dew326 Aug 3, 2022

IBX-3523: Refactored default config to use new admin_ui_forms.content…

bb364f6

…_edit.form_templates notation

webhdx mentioned this pull request Aug 3, 2022

SEO menu front #457

Closed

2 tasks

IBX-3523: Removed unnecessary doc blocks

6f9fe19

adamwojs reviewed Aug 3, 2022

View reviewed changes

src/bundle/DependencyInjection/Configuration/Parser/AdminUiForms.php Outdated Show resolved Hide resolved

src/lib/Component/Content/ContentEditMetaFieldsComponent.php Outdated Show resolved Hide resolved

IBX-3523: Fixed SetViewParametersListenerTest

65eb399

webhdx added 2 commits August 4, 2022 10:26

Addressed review comments

d80ea28

IBX-3523: Moved anchor menu rendering to edit.html.twig template

b5370b4

GrabowskiM self-assigned this Aug 4, 2022

dew326 requested changes Aug 4, 2022

View reviewed changes

webhdx requested a review from a team August 4, 2022 09:37

konradoboza reviewed Aug 4, 2022

View reviewed changes

alongosz reviewed Aug 4, 2022

View reviewed changes

src/lib/Component/Content/ContentEditMetaFieldsComponent.php Outdated Show resolved Hide resolved

alongosz requested a review from a team August 4, 2022 11:04

Addresses review comments

9f6499b

konradoboza approved these changes Aug 4, 2022

View reviewed changes

alongosz approved these changes Aug 4, 2022

View reviewed changes

Added missing return types in SetViewParametersListenerTest

0f38e93

lucasOsti approved these changes Aug 4, 2022

View reviewed changes

fixes after cr

f08c3d4

GrabowskiM requested a review from dew326 August 5, 2022 08:41

micszo self-assigned this Aug 5, 2022

dew326 approved these changes Aug 5, 2022

View reviewed changes

tischsoic reviewed Aug 5, 2022

View reviewed changes

micszo mentioned this pull request Aug 5, 2022

Run regression for IBX-3523 ibexa/experience#59

Closed

IBX-3523: Fixed issue where fields overwrote previous elements in the…

7e3e188

… array

fix menu elements width

a0d2bda

damianz5 approved these changes Aug 8, 2022

View reviewed changes

GrabowskiM added 2 commits August 8, 2022 11:34

fix to active menu and cr

4226b86

fix to scroll

e160597

micszo approved these changes Aug 8, 2022

View reviewed changes

micszo removed their assignment Aug 8, 2022

micszo added QA approved and removed Ready for review labels Aug 8, 2022

webhdx merged commit 3fefb3e into main Aug 8, 2022

webhdx deleted the IBX-3523_As_an_Editor_I_want_to_organize_fieldtypes_in_different_tabs_in_Content_Edit_sidebar branch August 8, 2022 12:01

juskora removed the Doc needed The changes require some documentation label Aug 18, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

IBX-3523: Introduced tabs to left sidebar in Content Edit interface #526

IBX-3523: Introduced tabs to left sidebar in Content Edit interface #526

webhdx commented Aug 3, 2022 •

edited

Loading

lserwatka commented Aug 4, 2022

dew326 Aug 4, 2022

dew326 Aug 4, 2022

dew326 Aug 4, 2022

dew326 Aug 4, 2022

dew326 Aug 4, 2022

dew326 Aug 4, 2022

dew326 Aug 4, 2022

alongosz commented Aug 4, 2022

alongosz left a comment

konradoboza left a comment

tischsoic Aug 5, 2022

tischsoic Aug 5, 2022

tischsoic Aug 5, 2022

tischsoic Aug 5, 2022

GrabowskiM Aug 8, 2022

tischsoic Aug 5, 2022

tischsoic Aug 5, 2022

tischsoic Aug 5, 2022

tischsoic Aug 5, 2022

micszo commented Aug 5, 2022

micszo commented Aug 5, 2022

sonarcloud bot commented Aug 8, 2022

micszo left a comment

	const { targetId } = event.target.dataset;
	const { targetId } = event.currentTarget.dataset;

	const targetId = event.target.value;
	const targetId = event.currentTarget.value;

		@@ -0,0 +1,8 @@
		<div
		class="ibexa-edit-content__primary-section"

		const firstSection = primarySection.querySelector('.ibexa-edit-content__secondary-section:first-child');
		const lastSection = primarySection.querySelector('.ibexa-edit-content__secondary-section:last-child');


		contentContainer.style.paddingBottom = '0px';

		if (!firstSection.isSameNode(lastSection) && lastSection && lastSection.offsetHeight) {

IBX-3523: Introduced tabs to left sidebar in Content Edit interface #526

IBX-3523: Introduced tabs to left sidebar in Content Edit interface #526

Conversation

webhdx commented Aug 3, 2022 • edited Loading

Extending the menu

Deprecations

Checklist:

lserwatka commented Aug 4, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

alongosz commented Aug 4, 2022

alongosz left a comment

Choose a reason for hiding this comment

konradoboza left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

micszo commented Aug 5, 2022

micszo commented Aug 5, 2022

sonarcloud bot commented Aug 8, 2022

micszo left a comment

Choose a reason for hiding this comment

webhdx commented Aug 3, 2022 •

edited

Loading