IBX-6680: Disabled add field action in field definition form when translating content type (#1094)

Co-authored-by: Robert Swoboda <53216935+Gengar-i@users.noreply.github.com>

Author: adamwojs

src/bundle/Resources/public/js/scripts/admin.contenttype.edit.js

@@ -54,8 +54,9 @@
         const areAllAddGroupBtnsDisabled = [...addGroupBtns].every((btn) =>
             btn.classList.contains('ibexa-popup-menu__item-content--disabled'),
         );
+        const isAddGroupTriggerBtnDisabled = addGroupTriggerBtn.dataset.isDisabled == 'true';
 
-        addGroupTriggerBtn.disabled = areAllAddGroupBtnsDisabled;
+        addGroupTriggerBtn.disabled = isAddGroupTriggerBtnDisabled || areAllAddGroupBtnsDisabled;
     };
     const searchField = (event) => {
         const fieldFilterQueryLowerCase = event.currentTarget.value.toLowerCase();

src/bundle/Resources/public/scss/mixins/_drag-and-drop.scss

@@ -117,7 +117,7 @@
         margin-bottom: calculateRem(24px);
     }
 
-    &:hover:not(&--unavailable) {
+    &:hover:not(&--unavailable, &--immovable) {
         #{$self}__content {
             border-color: $ibexa-color-dark;
             transform: scale(1.02) translateX(-10px);
@@ -189,6 +189,21 @@
         }
     }
 
+    &--immovable {
+        cursor: not-allowed;
+
+        #{$self}__content {
+            color: $ibexa-color-dark-300;
+            fill: $ibexa-color-dark-300;
+            border-color: $ibexa-color-light-300;
+            box-shadow: none;
+        }
+
+        #{$self}__drag-icon {
+            fill: $ibexa-color-dark-300;
+        }
+    }
+
     &--is-dragging-out {
         #{$self}__content {
             opacity: 0;

src/bundle/Resources/views/themes/admin/content_type/available_field_types.html.twig

@@ -17,7 +17,7 @@
     <ul class="ibexa-available-field-types__list">
         {% for item in field_type_toolbar %}
             <li
-                class="ibexa-available-field-type"
+                class="ibexa-available-field-type {{ is_draggable is defined and is_draggable == false ? 'ibexa-available-field-type--immovable' }}"
                 data-item-identifier="{{ item.identifier }}"
             >
                 <div

src/bundle/Resources/views/themes/admin/content_type/field_definitions.html.twig

@@ -24,6 +24,7 @@
         })|e('html_attr') }}"
     >
         {% set should_show_first = true %}
+        {% set is_field_definitions_draggable = is_draggable ?? true %}
 
         {% for field_defintions in grouped_field_defintions %}
             {% if field_defintions is not empty %}
@@ -36,7 +37,6 @@
                 'ibexa-collapse--field-definitions-group ibexa-field-definitions-group-%s'|format(id),
                 field_defintions is empty and not loop.first or loop.first and not should_show_first and field_defintions is empty ? 'ibexa-collapse--hidden'
             ] %}
-            {% set is_field_definition_draggable = is_draggable ?? true %}
 
             {%- embed "@ibexadesign/ui/component/collapse.html.twig" with {
                 'class': field_definitions_group_class|join(' '),
@@ -57,24 +57,27 @@
             } -%}
                 {% block body_content_wrapper %}
                     <div
-                        class="ibexa-collapse__body-content ibexa-content-type-edit__field-definition-drop-zone"
+                        class="ibexa-collapse__body-content {% if is_field_definitions_draggable %}ibexa-content-type-edit__field-definition-drop-zone{% endif %}"
                         data-placeholder="{{ include('@ibexadesign/content_type/field_definitions_placeholder.html.twig')|e('html_attr') }}"
                     >
                         {% block body_content %}
                             {%- include "@ibexadesign/content_type/field_definitions_empty_group.html.twig" -%}
 
                             {% for field_definition in field_defintions %}
-                                {{ include('@ibexadesign/content_type/field_definition.html.twig', { is_draggable: is_field_definition_draggable }) }}
+                                {{ include('@ibexadesign/content_type/field_definition.html.twig', { is_draggable: is_field_definitions_draggable }) }}
                             {% endfor %}
                         {% endblock %}
                     </div>
                 {% endblock %}
             {%- endembed -%}
         {% endfor %}
     </div>
-
     <div class="ibexa-content-type-edit__add-field-definitions-group">
-        <button type="button" class="ibexa-content-type-edit__add-field-definitions-group-btn btn ibexa-btn ibexa-btn ibexa-btn--info">
+        <button
+            type="button"
+            class="ibexa-content-type-edit__add-field-definitions-group-btn btn ibexa-btn ibexa-btn ibexa-btn--info"
+            data-is-disabled="{{ is_field_definitions_draggable ? 'false' : 'true' }}"
+        >
             <svg class="ibexa-icon ibexa-icon--small">
                 <use xlink:href="{{ ibexa_icon_path('create') }}"></use>
             </svg>
@@ -84,8 +87,8 @@
         {{ include('@ibexadesign/ui/component/popup_menu/popup_menu.html.twig', {
             'items': grouped_field_defintions|keys|map(group => {
                 'label': group | ibexa_field_group_name,
-                'content_class': grouped_field_defintions[group] is not empty or (group is same as(grouped_field_defintions|keys|first) and should_show_first) 
-                    ? 'ibexa-popup-menu__item-content--disabled ' 
+                'content_class': grouped_field_defintions[group] is not empty or (group is same as(grouped_field_defintions|keys|first) and should_show_first)
+                    ? 'ibexa-popup-menu__item-content--disabled '
                     : '',
                 'action_attr': {
                     'data-related-collapse-selector': '.ibexa-field-definitions-group-' ~ group