IBX-6597: Content type pickers are inconsistent (#914)

Co-authored-by: katarzynazawada <>

src/bundle/Resources/public/js/scripts/sidebar/btn/location.create.js

@@ -7,8 +7,31 @@
 
     createActions.forEach((container) => {
         const radioInputs = container.querySelectorAll('.form-check [type="radio"]');
-        const form = container.querySelector('form');
+        const submitBtn = container.querySelector('.ibexa-extra-actions__btn--confirm');
+        const cancelBtn = container.querySelector('.ibexa-extra-actions__btn--cancel');
+        const closeBtn = container.querySelector('.ibexa-extra-actions__header .ibexa-btn--close');
 
-        radioInputs.forEach((radioInput) => radioInput.addEventListener('change', () => form.submit(), false));
+        cancelBtn.addEventListener(
+            'click',
+            () => {
+                closeBtn.click();
+            },
+            false,
+        );
+        radioInputs.forEach((radioInput) =>
+            radioInput.addEventListener(
+                'change',
+                (event) => {
+                    const selectedItems = container.querySelectorAll('.ibexa-instant-filter__group-item--selected');
+                    const itemToSelect = event.currentTarget.closest('.ibexa-instant-filter__group-item');
+
+                    selectedItems.forEach((selectedItem) => selectedItem.classList.remove('ibexa-instant-filter__group-item--selected'));
+                    itemToSelect.classList.add('ibexa-instant-filter__group-item--selected');
+
+                    submitBtn.removeAttribute('disabled');
+                },
+                false,
+            ),
+        );
     });
 })(window, window.document);

src/bundle/Resources/public/scss/_extra-actions.scss

@@ -82,6 +82,13 @@
         }
     }
 
+    &__confirm-wrapper {
+        margin-top: calculateRem(4px);
+        padding: calculateRem(16px) calculateRem(32px);
+        display: flex;
+        gap: calculateRem(16px);
+    }
+
     &--edit-user,
     &--edit {
         .form-check {
@@ -126,7 +133,7 @@
     &--create {
         .ibexa-extra-actions {
             &__content {
-                max-height: calc(100% - #{calculateRem(89px)});
+                max-height: calc(100% - #{calculateRem(157px)});
                 overflow: auto;
             }
 

src/bundle/Resources/translations/locationview.en.xliff

@@ -16,6 +16,11 @@
         <target state="new">Content Type</target>
         <note>key: bulk_action.failed.modal.content_type_name</note>
       </trans-unit>
+      <trans-unit id="fdc7d270cec1081be5a6888bf565ff03eebc6ce9" resname="content.create.cancel_btn.label">
+        <source>Discard</source>
+        <target state="new">Discard</target>
+        <note>key: content.create.cancel_btn.label</note>
+      </trans-unit>
       <trans-unit id="61c309bd68782746767f9165eb574f111b50a727" resname="content.create.create_content">
         <source>Create content</source>
         <target state="new">Create content</target>

src/bundle/Resources/translations/universal_discovery_widget.en.xliff

@@ -56,10 +56,10 @@
         <target state="new">Or choose from list</target>
         <note>key: content.create.filters.desc</note>
       </trans-unit>
-      <trans-unit id="1713d0deb6344882cf915babb2df574556a3f82c" resname="content_create.cancel.label">
-        <source>Cancel</source>
-        <target state="new">Cancel</target>
-        <note>key: content_create.cancel.label</note>
+      <trans-unit id="698796eecd8fcb7c7ffb1fcc8499b6e47f23ffb2" resname="content_create.discard.label">
+        <source>Discard</source>
+        <target state="new">Discard</target>
+        <note>key: content_create.discard.label</note>
       </trans-unit>
       <trans-unit id="6597ed9c77295271a62deaf86cddcab2a332af8d" resname="content_create.label">
         <source>Content create</source>
@@ -97,9 +97,14 @@
         <note>key: copy.title</note>
       </trans-unit>
       <trans-unit id="a7d7c06aff739180272f50e51f2100e7b5d9cfbf" resname="create_content.create">
+        <source>Create</source>
+        <target state="new">Create</target>
+        <note>key: create_content.create</note>
+      </trans-unit>
+      <trans-unit id="5d20065105a998b69655e3e67b028b61590d42af" resname="create_content.create_new">
         <source>Create new</source>
         <target state="new">Create new</target>
-        <note>key: create_content.create</note>
+        <note>key: create_content.create_new</note>
       </trans-unit>
       <trans-unit id="23fa7d97ea65916659849b0ed9b1e148df62fd08" resname="create_content.label">
         <source>Create new content</source>

src/bundle/Resources/views/themes/admin/content/widget/content_create.html.twig

@@ -1,27 +1,30 @@
 {% trans_default_domain 'locationview' %}
 
 {% set data_actions = data_actions|default('create') %}
+{% set action = action is defined ? action : path('ibexa.content.create') %}
 
-<div class="ibexa-extra-actions ibexa-extra-actions--create ibexa-extra-actions--hidden" data-actions="{{ data_actions }}">
-    <div class="ibexa-extra-actions__header">
-        <h2>{{ 'content.create.create_content'|trans|desc('Create content') }}</h2>
-        <button class="btn ibexa-btn ibexa-btn--ghost ibexa-btn--small ibexa-btn--no-text ibexa-btn--close">
-            <svg class="ibexa-icon ibexa-icon--small">
-                <use xlink:href="{{ ibexa_icon_path('discard') }}"></use>
-            </svg>
-        </button>
-        <div class="ibexa-extra-actions__header-subtitle">
-            {% if content is defined %}
-                {{ 'content.create.editing_details'|trans({ '%content_name%': ibexa_content_name(content) })|desc('under %content_name%') }}
-            {% endif %}
+{{ form_start(form, {
+    action,
+    attr: { autocomplete: 'off' }
+}) }}
+    <div class="ibexa-extra-actions ibexa-extra-actions--create ibexa-extra-actions--hidden" data-actions="{{ data_actions }}">
+        <div class="ibexa-extra-actions__header">
+            <h2>{{ 'content.create.create_content'|trans|desc('Create content') }}</h2>
+            <button
+                type="button"
+                class="btn ibexa-btn ibexa-btn--ghost ibexa-btn--small ibexa-btn--no-text ibexa-btn--close"
+            >
+                <svg class="ibexa-icon ibexa-icon--small">
+                    <use xlink:href="{{ ibexa_icon_path('discard') }}"></use>
+                </svg>
+            </button>
+            <div class="ibexa-extra-actions__header-subtitle">
+                {% if content is defined %}
+                    {{ 'content.create.editing_details'|trans({ '%content_name%': ibexa_content_name(content) })|desc('under %content_name%') }}
+                {% endif %}
+            </div>
         </div>
-    </div>
-    <div class="ibexa-extra-actions__content ibexa-extra-actions__content--create">
-        {% set action = action is defined ? action : path('ibexa.content.create') %}
-        {{ form_start(form, {
-            'action': action,
-            'attr': { 'autocomplete': 'off' }
-        }) }}
+        <div class="ibexa-extra-actions__content ibexa-extra-actions__content--create">
             <label class="ibexa-label ibexa-extra-actions__section-header">{{ 'content.create.select_language'|trans|desc('Select a language:') }}</label>
             <div class="ibexa-extra-actions__section-content">
                 {% if form.language.vars.choices|length == 1 %}
@@ -49,7 +52,17 @@
                     </div>
                 </div>
             </div>
-            {{ form_widget(form.create, {'attr': {'hidden': 'hidden'}}) }}
-        {{ form_end(form) }}
+        </div>
+        <div class="ibexa-extra-actions__confirm-wrapper">
+            {{ form_widget(form.create, {
+                attr: {
+                    disabled: true,
+                    class: 'ibexa-btn ibexa-btn--primary ibexa-extra-actions__btn ibexa-extra-actions__btn--confirm'
+                }
+            }) }}
+            <button class="btn ibexa-btn ibexa-btn--secondary ibexa-extra-actions__btn ibexa-extra-actions__btn--cancel" type="button">
+                {{ 'content.create.cancel_btn.label'|trans|desc('Discard') }}
+            </button>
+        </div>
     </div>
-</div>
+{{ form_end(form) }}

src/bundle/ui-dev/src/modules/universal-discovery/components/content-create-button/content.create.button.js

@@ -23,7 +23,7 @@ const ContentCreateButton = ({ isDisabled }) => {
     const [multiple, multipleItemsLimit] = useContext(MultipleConfigContext);
     const { hidden, allowedLocations } = useContext(ContentOnTheFlyConfigContext);
     const contentTypesMap = useContext(ContentTypesMapContext);
-    const createLabel = Translator.trans(/*@Desc("Create new")*/ 'create_content.create', {}, 'universal_discovery_widget');
+    const createLabel = Translator.trans(/*@Desc("Create new")*/ 'create_content.create_new', {}, 'universal_discovery_widget');
     const toggleContentCreateVisibility = () => {
         ibexa.helpers.tooltips.hideAll();
         setCreateContentVisible((prevState) => !prevState);

src/bundle/ui-dev/src/modules/universal-discovery/components/content-create-widget/content.create.widget.js

@@ -77,9 +77,9 @@ const ContentCreateWidget = () => {
         {},
         'universal_discovery_widget',
     );
-    const createLabel = Translator.trans(/*@Desc("Create new")*/ 'create_content.create', {}, 'universal_discovery_widget');
+    const createLabel = Translator.trans(/*@Desc("Create")*/ 'create_content.create', {}, 'universal_discovery_widget');
     const closeLabel = Translator.trans(/*@Desc("Close")*/ 'popup.close.label', {}, 'universal_discovery_widget');
-    const cancelLabel = Translator.trans(/*@Desc("Cancel")*/ 'content_create.cancel.label', {}, 'universal_discovery_widget');
+    const cancelLabel = Translator.trans(/*@Desc("Discard")*/ 'content_create.discard.label', {}, 'universal_discovery_widget');
     const placeholder = Translator.trans(/*@Desc("Type to refine")*/ 'content_create.placeholder', {}, 'universal_discovery_widget');
     const filtersDescLabel = Translator.trans(
         /*@Desc("Or choose from list")*/ 'content.create.filters.desc',

src/lib/Behat/Component/ContentTypePicker.php

@@ -55,7 +55,7 @@ public function verifyIsLoaded(): void
 
     public function confirm(): void
     {
-        $this->getHTMLPage()->find($this->getLocator('createNewButtonInUDW'))->click();
+        $this->getHTMLPage()->find($this->getLocator('createButton'))->click();
     }
 
     protected function specifyLocators(): array
@@ -65,7 +65,7 @@ protected function specifyLocators(): array
             new VisibleCSSLocator('filteredItem', '.ibexa-content-menu-wrapper .ibexa-extra-actions__section-content--content-type .ibexa-instant-filter__group-item:not([hidden]) .form-check-label, .c-udw-tab .ibexa-extra-actions__section-content--content-type .ibexa-instant-filter__group-item:not([hidden]) .form-check-label'),
             new VisibleCSSLocator('header', '.ibexa-content-menu-wrapper .ibexa-extra-actions--create .ibexa-extra-actions__header h2'),
             new VisibleCSSLocator('languageDropdown', '.ibexa-content-menu-wrapper .ibexa-dropdown__selection-info'),
-            new VisibleCSSLocator('createNewButtonInUDW', '.c-content-create__confirm-button'),
+            new VisibleCSSLocator('createButton', '.c-content-create__confirm-button, [id="content_create_create"]'),
         ];
     }
 }

src/lib/Behat/Page/ContentViewPage.php

@@ -132,13 +132,15 @@ public function startCreatingContent(string $contentTypeName, string $language =
             $this->contentTypePicker->selectLanguage($language);
         }
         $this->contentTypePicker->select($contentTypeName);
+        $this->contentTypePicker->confirm();
     }
 
     public function startCreatingUser(string $contentTypeName)
     {
         $this->contentActionsMenu->clickButton('Create content');
         $this->contentTypePicker->verifyIsLoaded();
         $this->contentTypePicker->select($contentTypeName);
+        $this->contentTypePicker->confirm();
     }
 
     public function switchToTab(string $tabName): void