IBX-7841: DS components

.gitignore

@@ -11,3 +11,9 @@ package-lock.json
 composer.lock
 /var
 tsconfig.json
+.button-migration/*.log
+
+# Migration tool runtime state
+.button-migration/
+migrations/*/.migration-state/
+*.migration.log

composer.json

@@ -27,6 +27,7 @@
         "ibexa/content-forms": "~6.0.x-dev",
         "ibexa/core": "~6.0.x-dev",
         "ibexa/design-engine": "~6.0.x-dev",
+        "ibexa/design-system-twig": "~6.0.x-dev",
         "ibexa/rest": "~6.0.x-dev",
         "ibexa/search": "~6.0.x-dev",
         "ibexa/twig-components": "~6.0.x-dev",

dependencies.json

@@ -0,0 +1,11 @@
+{
+    "recipesEndpoint": "",
+    "packages": [
+        {
+            "requirement": "dev-IBX-11332-link-c as 5.0.x-dev",
+            "repositoryUrl": "https://github.com/ibexa/design-system-twig",
+            "package": "ibexa/design-system-twig",
+            "shouldBeAddedAsVCS": false
+        }
+    ]
+}

features/standard/UserCreation.feature

@@ -37,8 +37,8 @@ Feature: User management
       | First name  | testuseredited |
       | Last name   | lastnameedited |
     And I set content fields for user
-      | label         | Username  | Password    | Confirm password  | Email          |
-      | User account  | testuser  | Test123456  | Test123456        | test@test.org  |
+      | label         | Username  | Password    | Confirm password  | Email          | Enabled |
+      | User account  | testuser  | Test123456  | Test123456        | test@test.org  | Yes     | 
     And I perform the "Update" action
     Then I should be on Content view Page for "Users/testuseredited lastnameedited"
     And content attributes equal

src/bundle/Resources/encore/ibexa.css.config.js

@@ -5,6 +5,7 @@ module.exports = (Encore) => {
         path.resolve(__dirname, '../public/scss/ibexa-bootstrap.scss'),
         path.resolve(__dirname, '../public/scss/ibexa.scss'),
         path.resolve(__dirname, '../public/scss/ui/ibexa-modules.scss'),
+        path.resolve(__dirname, '../public/scss/ibexa-ids-assets.scss'),
         path.resolve('./vendor/ibexa/admin-ui-assets/src/bundle/Resources/public/vendors/flatpickr/dist/flatpickr.min.css'),
         path.resolve(
             './vendor/ibexa/admin-ui-assets/src/bundle/Resources/public/vendors/flatpickr/dist/plugins/confirmDate/confirmDate.css',
@@ -18,6 +19,7 @@ module.exports = (Encore) => {
         ])
         .addEntry('ibexa-admin-ui-security-base-css', [
             path.resolve(__dirname, '../public/scss/ibexa-bootstrap.scss'),
+            path.resolve('./vendor/ibexa/admin-ui-assets/src/bundle/Resources/public/vendors/ids-assets/dist/css/styles.css'),
             path.resolve(__dirname, '../public/scss/ibexa.scss'),
         ]);
 };

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

@@ -49,6 +49,7 @@ const layout = [
     path.resolve(__dirname, '../public/js/scripts/admin.focus.mode.js'),
     path.resolve(__dirname, '../public/js/scripts/sidebar/main.menu.js'),
     path.resolve(__dirname, '../public/js/scripts/admin.input.text.js'),
+    path.resolve('./vendor/ibexa/design-system-twig/src/bundle/Resources/public/ts/init_components.ts'),
     path.resolve(__dirname, '../public/js/scripts/admin.table.js'),
     path.resolve(__dirname, '../public/js/scripts/core/collapse.js'),
     path.resolve(__dirname, '../public/js/scripts/admin.dropdown.js'),
@@ -247,9 +248,13 @@ module.exports = (Encore) => {
         ])
         .addEntry('ibexa-admin-ui-login-js', [
             path.resolve(__dirname, '../public/js/scripts/admin.input.text.js'),
+            path.resolve('./vendor/ibexa/design-system-twig/src/bundle/Resources/public/ts/init_components.ts'),
             path.resolve(__dirname, '../public/js/scripts/login.js'),
         ])
-        .addEntry('ibexa-admin-ui-reset-password-js', [path.resolve(__dirname, '../public/js/scripts/admin.input.text.js')])
+        .addEntry('ibexa-admin-ui-reset-password-js', [
+            path.resolve(__dirname, '../public/js/scripts/admin.input.text.js'),
+            path.resolve('./vendor/ibexa/design-system-twig/src/bundle/Resources/public/ts/init_components.ts'),
+        ])
         .addEntry('ibexa-admin-ui-user-invitation-modal', [path.resolve(__dirname, '../public/js/scripts/user.invitation.modal.js')])
         .addEntry('ibexa-admin-ui-tabs-js', [
             path.resolve(__dirname, '../public/js/scripts/admin.location.tab.js'),

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

@@ -1,5 +1,5 @@
 (function (global, doc, ibexa, Routing) {
-    const copyButtons = doc.querySelectorAll('.ibexa-btn--copy-content-type');
+    const copyButtons = doc.querySelectorAll('.ids-btn--copy-content-type');
     const copyContentType = ({ currentTarget }) => {
         const contentTypeCopyForm = doc.querySelector('form[name="content_type_copy"]');
         const contentTypeIdentifierInput = contentTypeCopyForm.querySelector('#content_type_copy_content_type');

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

@@ -381,7 +381,7 @@
         const isMatrixColumnId = input.classList.contains('ibexa-input--matrix-column-identifier');
         const isMatrixColumnIdInvalid = !isInputEmpty && isMatrixColumnId && !MATRIX_COLUMN_ID_PATTERN.test(input.value);
         const field = input.closest('.form-group');
-        const labelNode = field?.querySelector('.ibexa-label');
+        const labelNode = field?.querySelector('.ids-label');
         const errorNode = field?.querySelector('.ibexa-form-error');
         const isInvalid = isInputEmpty || isMatrixColumnIdInvalid;
 

src/bundle/Resources/public/js/scripts/admin.contenttype.relation.default.location.js

@@ -53,7 +53,7 @@ import * as middleEllipsisHelper from '@ibexa-admin-ui/src/bundle/Resources/publ
     };
     const resetStartingLocation = ({ currentTarget }) => {
         const container = currentTarget.closest('.ibexa-default-location');
-        const udwBtn = container.querySelector('.ibexa-btn--udw-relation-default-location');
+        const udwBtn = container.querySelector('.ids-btn--udw-relation-default-location');
         const pathSelector = container.querySelector('.ibexa-default-location__path-selector');
         const { relationRootInputSelector } = udwBtn.dataset;
 
@@ -62,7 +62,7 @@ import * as middleEllipsisHelper from '@ibexa-admin-ui/src/bundle/Resources/publ
         pathSelector.classList.remove('ibexa-default-location__path-selector--filled');
     };
     const attachEvents = (container) => {
-        const udwBtn = container.querySelector('.ibexa-btn--udw-relation-default-location');
+        const udwBtn = container.querySelector('.ids-btn--udw-relation-default-location');
         const deleteBtn = container.querySelector(SELECTOR_RESET_STARTING_LOCATION_BTN);
         const choices = container.querySelectorAll('input[type="radio"]');
 
@@ -71,12 +71,15 @@ import * as middleEllipsisHelper from '@ibexa-admin-ui/src/bundle/Resources/publ
         choices.forEach((choice) => choice.addEventListener('change', toggleDisabledState.bind(null, container), false));
     };
     const toggleDisabledState = (container) => {
-        const locationBtn = container.querySelector('.ibexa-btn--udw-relation-default-location');
+        const locationBtn = container.querySelector('.ids-btn--udw-relation-default-location');
         const deleteBtn = container.querySelector(SELECTOR_RESET_STARTING_LOCATION_BTN);
         const isDisabled = !container.querySelector('input[value="1"]').checked;
 
-        locationBtn.classList.toggle('disabled', isDisabled);
-        deleteBtn?.classList.toggle('disabled', isDisabled);
+        locationBtn.disabled = isDisabled;
+
+        if (deleteBtn) {
+            deleteBtn.disabled = isDisabled;
+        }
     };
 
     doc.body.addEventListener(

src/bundle/Resources/public/js/scripts/admin.context.menu.js

@@ -7,11 +7,13 @@
 
     const menuButtons = [
         ...adaptedItemsContainer.querySelectorAll(
-            '.ibexa-context-menu__item > .ibexa-btn:not(.ibexa-btn--more), .ibexa-context-menu__item > .ibexa-split-btn',
+            '.ibexa-context-menu__item > .ibexa-btn:not(.ibexa-btn--more), .ibexa-context-menu__item > .ids-btn:not(.ibexa-btn--more), .ibexa-context-menu__item > .ibexa-split-btn',
         ),
     ];
     const popupMenuElement = adaptedItemsContainer.querySelector('.ibexa-context-menu__item--more .ibexa-multilevel-popup-menu');
     const showPopupButton = adaptedItemsContainer.querySelector('.ibexa-btn--more');
+    const getButtonLabel = (button) => button.querySelector('.ids-btn__label, .ibexa-btn__label')?.textContent ?? '';
+    const getItemButton = (item) => item.querySelector('.ids-btn, .ibexa-btn');
 
     if (!showPopupButton) {
         return;
@@ -24,7 +26,7 @@
             return adaptedItemsContainer.querySelector('.ibexa-context-menu__item');
         },
         onAdapted: (visibleItems, hiddenItems) => {
-            const hiddenButtonsIds = [...hiddenItems].map((item) => item.querySelector('.ibexa-btn').id);
+            const hiddenButtonsIds = [...hiddenItems].map((item) => getItemButton(item)?.id).filter(Boolean);
             const topBranchItems = multilevelPopupMenu.getBranchItems(topBranch);
 
             topBranchItems.forEach((branchItem) => {
@@ -51,7 +53,7 @@
             const mainBtn = menuButton.querySelector('.ibexa-split-btn__main-btn');
             const splitBtn = menuButton.querySelector('.ibexa-split-btn__toggle-btn');
             const relatedMainBtnId = mainBtn.id;
-            const mainBtnLabel = mainBtn.querySelector('.ibexa-btn__label').textContent;
+            const mainBtnLabel = getButtonLabel(mainBtn);
             const {
                 alternativeMainBtnLabel: mainBtnAlternativeLabel,
                 alternativeMainBtnSublabel: mainBtnAlternativeSublabel,
@@ -60,7 +62,7 @@
             const subitemsBtns = [...splitBtn.branchElement.querySelectorAll('.ibexa-popup-menu__item-content')];
 
             const subitems = subitemsBtns.map((subitemBtn) => {
-                const subitemLabel = subitemBtn.querySelector('.ibexa-btn__label').textContent;
+                const subitemLabel = getButtonLabel(subitemBtn);
                 const relatedSubitemBtnId = subitemBtn.id;
 
                 return {
@@ -108,7 +110,7 @@
         }
 
         const relatedBtnId = menuButton.id;
-        const label = menuButton.querySelector('.ibexa-btn__label').textContent;
+        const label = getButtonLabel(menuButton);
 
         return {
             label,

src/bundle/Resources/public/js/scripts/admin.limitation.pick.js

@@ -176,7 +176,7 @@
         udwRoot = ReactDOMClient.createRoot(udwContainer);
         udwRoot.render(
             React.createElement(ibexa.modules.UniversalDiscovery, {
-                onConfirm: handleUdwConfirm.bind(this, event.target),
+                onConfirm: handleUdwConfirm.bind(this, event.currentTarget),
                 onCancel: closeUDW,
                 title,
                 multiple: true,

src/bundle/Resources/public/js/scripts/admin.location.add.custom_url.js

@@ -4,27 +4,45 @@
     if (modal) {
         const discardBtns = modal.querySelectorAll('[data-bs-dismiss="modal"]');
         const submitBtn = modal.querySelector('#custom_url_add_add');
-        const input = modal.querySelector('[required="required"]');
+        const input = modal.querySelector('#custom_url_add_path') || modal.querySelector('[name="custom_url_add[path]"]');
         const siteRootCheckbox = modal.querySelector('[name="custom_url_add[site_root]"]');
         const toggleButtonState = () => {
+            if (!input || !submitBtn) {
+                return;
+            }
+
             const hasValue = input.value.trim().length !== 0;
             const methodName = hasValue ? 'removeAttribute' : 'setAttribute';
 
             submitBtn[methodName]('disabled', true);
         };
         const clearValues = () => {
+            if (!input) {
+                return;
+            }
+
             input.value = '';
             toggleButtonState();
         };
         const toggleSiteAccessSelect = (event) => {
             const isChecked = event.target.checked;
             const siteAccessSelect = modal.querySelector('.ibexa-custom-url-from__item--siteacces .ibexa-dropdown');
 
+            if (!siteAccessSelect) {
+                return;
+            }
+
             siteAccessSelect.classList.toggle('ibexa-dropdown--is-disabled', isChecked);
         };
 
-        input.addEventListener('input', toggleButtonState, false);
-        siteRootCheckbox.addEventListener('change', toggleSiteAccessSelect, false);
+        if (input) {
+            input.addEventListener('input', toggleButtonState, false);
+        }
+
+        if (siteRootCheckbox) {
+            siteRootCheckbox.addEventListener('change', toggleSiteAccessSelect, false);
+        }
+
         discardBtns.forEach((btn) => btn.addEventListener('click', clearValues, false));
     }
 })(window, window.document);

src/bundle/Resources/public/js/scripts/admin.location.add.translation.js

@@ -9,7 +9,7 @@
         if (!modal) {
             return;
         }
-        const buttonCreate = modal.querySelector('.ibexa-btn--create-translation');
+        const buttonCreate = modal.querySelector('.ids-btn--create-translation');
         if (!buttonCreate) {
             return;
         }

src/bundle/Resources/public/js/scripts/admin.location.view.js

@@ -29,15 +29,15 @@ import { checkIsContainer } from './helpers/content.type.helper';
             bootstrap.Modal.getOrCreateInstance(doc.querySelector('#version-draft-conflict-modal')).hide();
         };
         const attachModalListeners = (wrapper) => {
-            const addDraftButton = wrapper.querySelector('.ibexa-btn--add-draft');
+            const addDraftButton = wrapper.querySelector('.ids-btn--add-draft');
             const conflictModal = doc.querySelector('#version-draft-conflict-modal');
 
             if (addDraftButton) {
                 addDraftButton.addEventListener('click', addDraft, false);
             }
 
             wrapper
-                .querySelectorAll('.ibexa-btn--prevented')
+                .querySelectorAll('.ids-btn--prevented')
                 .forEach((btn) => btn.addEventListener('click', (event) => event.preventDefault(), false));
 
             if (conflictModal) {

src/bundle/Resources/public/js/scripts/admin.notifications.filters.js

@@ -1,8 +1,9 @@
 (function (global, doc) {
+    const SELECTOR_FILTER_CHECKBOX = '.ids-input--checkbox:not([name="dropdown-checkbox"])';
     const searchForm = doc.querySelector('.ibexa-list-search-form');
     const filtersContainerNode = doc.querySelector('.ibexa-list-filters');
-    const applyFiltersBtn = filtersContainerNode.querySelector('.ibexa-btn--apply');
-    const clearFiltersBtn = filtersContainerNode.querySelector('.ibexa-btn--clear');
+    const applyFiltersBtn = filtersContainerNode.querySelector('.ids-btn--apply');
+    const clearFiltersBtn = filtersContainerNode.querySelector('.ids-btn--clear');
     const statusFilterNode = filtersContainerNode.querySelector('.ibexa-list-filters__item--statuses');
     const typeFilterNode = filtersContainerNode.querySelector('.ibexa-list-filters__item--type');
     const datetimeFilterNodes = filtersContainerNode.querySelectorAll('.ibexa-list-filters__item--date-time .ibexa-picker');
@@ -13,9 +14,7 @@
         }
 
         const sourceSelect = filterNode.querySelector('.ibexa-list-filters__item-content .ibexa-dropdown__source .ibexa-input--select');
-        const checkboxes = filterNode.querySelectorAll(
-            '.ibexa-list-filters__item-content .ibexa-input--checkbox:not([name="dropdown-checkbox"])',
-        );
+        const checkboxes = filterNode.querySelectorAll(`.ibexa-list-filters__item-content ${SELECTOR_FILTER_CHECKBOX}`);
         const timePicker = filterNode.querySelector('.ibexa-date-time-picker__input');
 
         if (sourceSelect) {
@@ -45,9 +44,7 @@
             return;
         }
 
-        const checkboxes = filterNode.querySelectorAll(
-            '.ibexa-list-filters__item-content .ibexa-input--checkbox:not([name="dropdown-checkbox"])',
-        );
+        const checkboxes = filterNode.querySelectorAll(`.ibexa-list-filters__item-content ${SELECTOR_FILTER_CHECKBOX}`);
         checkboxes.forEach((checkbox) => {
             checkbox.addEventListener('change', filterChange, false);
         });
@@ -80,7 +77,7 @@
         }
 
         const select = filterNode.querySelector('.ibexa-dropdown__source .ibexa-input--select');
-        const checkedCheckboxes = filterNode.querySelectorAll('.ibexa-input--checkbox:checked');
+        const checkedCheckboxes = filterNode.querySelectorAll(`${SELECTOR_FILTER_CHECKBOX}:checked`);
 
         if (isNodeDatePicker(filterNode)) {
             const timePicker = filterNode.querySelector('.ibexa-date-time-picker__input');

src/bundle/Resources/public/js/scripts/admin.notifications.list.js

@@ -1,6 +1,7 @@
 import { isFirefox } from '@ibexa-admin-ui/src/bundle/Resources/public/js/scripts/helpers/browser.helper.js';
 
 (function (global, doc, ibexa, Translator, Routing) {
+    const SELECTOR_NOTIFICATION_CHECKBOX = '.ibexa-notification-list__mark-row-checkbox';
     const SELECTOR_MODAL_ITEM = '.ibexa-notifications-modal__item';
     const SELECTOR_GO_TO_NOTIFICATION = '.ibexa-notification-view-all__show';
     const SELECTOR_TOGGLE_NOTIFICATION = '.ibexa-notification-view-all__mail';
@@ -10,7 +11,7 @@ import { isFirefox } from '@ibexa-admin-ui/src/bundle/Resources/public/js/script
     const markAsReadBtn = doc.querySelector('.ibexa-notification-list__btn-mark-as-read');
     const deleteBtn = doc.querySelector('.ibexa-notification-list__btn-delete');
     const notificationsCheckboxes = [
-        ...doc.querySelectorAll('.ibexa-notification-list .ibexa-table__cell--has-checkbox .ibexa-input--checkbox'),
+        ...doc.querySelectorAll(`.ibexa-notification-list .ibexa-table__cell--has-checkbox ${SELECTOR_NOTIFICATION_CHECKBOX}`),
     ];
     const notificationsTable = doc.querySelector('.ibexa-table--notifications');
     const uncheckCheckboxesEvent = new CustomEvent('ibexa-uncheck-checkboxes', {

src/bundle/Resources/public/js/scripts/admin.search.autocomplete.js

@@ -10,7 +10,7 @@
     }
 
     const globalSearchInput = globalSearch.querySelector('.ibexa-global-search__input');
-    const clearBtn = globalSearch.querySelector(' .ibexa-input-text-wrapper__action-btn--clear');
+    const clearBtn = globalSearch.querySelector('.ids-clear-btn, .ibexa-input-text-wrapper__action-btn--clear');
     const autocompleteNode = globalSearch.querySelector('.ibexa-global-search__autocomplete');
     const autocompleteListNode = globalSearch.querySelector('.ibexa-global-search__autocomplete-list');
     const autocompleteResultsCountNumber = globalSearch.querySelector('.ibexa-global-search__autocomplete-total-count-number');
@@ -152,6 +152,6 @@
     };
 
     globalSearchInput.addEventListener('keyup', handleTyping, false);
-    clearBtn.addEventListener('click', hideAutocomplete, false);
+    clearBtn?.addEventListener('click', hideAutocomplete, false);
     doc.addEventListener('keydown', focusSearch, false);
 })(window, document, window.ibexa, window.Routing, window.Translator);