IBX-9109: Enabling TypeScript (ts-loader) with Webpack Encore

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

@@ -126,7 +126,7 @@ module.exports = (Encore) => {
             path.resolve(__dirname, '../public/js/scripts/button.content.edit.js'),
             path.resolve(__dirname, '../public/js/scripts/admin.search.filters.js'),
             path.resolve(__dirname, '../public/js/scripts/admin.search.sorting.js'),
-            path.resolve(__dirname, '../public/js/scripts/admin.search.js'),
+            path.resolve(__dirname, '../public/ts/admin.search.ts'),
             path.resolve(__dirname, '../public/js/scripts/udw/select.location.js'),
             path.resolve(__dirname, '../public/js/scripts/button.translation.edit.js'),
         ])

src/bundle/Resources/public/ts/admin.search.ts

@@ -0,0 +1,26 @@
+(function (document) {
+    const searchForm = document.querySelector('.ibexa-search-form') as HTMLFormElement | null;
+    const searchInput = document.querySelector('.ibexa-search-form__search-input') as HTMLInputElement | null;
+    const headerSearchInput = document.querySelector('.ibexa-global-search__input') as HTMLInputElement | null;
+    const languageSelector = document.querySelector('.ibexa-filters__item--language-selector .ibexa-filters__select') as HTMLSelectElement | null;
+    const headerSearchSubmitBtn = document.querySelector('.ibexa-main-header .ibexa-input-text-wrapper__action-btn--search') as HTMLButtonElement | null;
+
+    if (!headerSearchInput || !searchInput || !searchForm) {
+        return;
+    }
+
+    const submitForm = () => {
+        searchInput.value = headerSearchInput.value;
+        searchForm.submit();
+    };
+    const handleHeaderSearchBtnClick = (event: MouseEvent) => {
+        event.preventDefault();
+
+        submitForm();
+    };
+
+    headerSearchInput.value = searchInput.value;
+
+    headerSearchSubmitBtn?.addEventListener('click', handleHeaderSearchBtnClick, false);
+    languageSelector?.addEventListener('change', submitForm, false);
+})(document);

src/bundle/ui-dev/src/modules/common/thumbnail/thumbnail.js → src/bundle/ui-dev/src/modules/common/thumbnail/thumbnail.tsx

@@ -1,9 +1,15 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
 import Icon from '../icon/icon';
 
-const Thumbnail = ({ thumbnailData, iconExtraClasses, contentTypeIconPath }) => {
+interface ThumbnailProps {
+    thumbnailData: {
+        mimeType: string,
+        resource: string,
+    }
+    iconExtraClasses?: string,
+    contentTypeIconPath?: string | null,
+}
+
+const Thumbnail = ({ thumbnailData, iconExtraClasses = '', contentTypeIconPath = null }: ThumbnailProps) => {
     const renderContentTypeIcon = () => {
         if (!contentTypeIconPath) {
             return null;
@@ -32,18 +38,4 @@ const Thumbnail = ({ thumbnailData, iconExtraClasses, contentTypeIconPath }) =>
     );
 };
 
-Thumbnail.propTypes = {
-    thumbnailData: PropTypes.shape({
-        mimeType: PropTypes.string.isRequired,
-        resource: PropTypes.string.isRequired,
-    }).isRequired,
-    iconExtraClasses: PropTypes.string,
-    contentTypeIconPath: PropTypes.string,
-};
-
-Thumbnail.defaultProps = {
-    iconExtraClasses: null,
-    contentTypeIconPath: null,
-};
-
 export default Thumbnail;

tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "ts-config-ibexa/tsconfig.json",
+}