Updating Elastic UI

[jusa3]

Pros:

• usage of new parameters e.g. truncationProps in EuiComboBox (AutocompleteWidget: better display in small layouts #98)
• support of consumer apps that use later Eui versions (e.g. NFDI4Health Study Hub)

Cons:

• possible deprecations of functions/parameters - check change logs
• a lot of work to check all widgets after update

[jusa3]

In the current Elastic UI version (^97), the package includes some JSON files (like logicals.json), which define styles or other configuration data. These files are not JavaScript files, but the esbuild-dynamic-import plugin in esbuild (to build the JS widgets) is by default trying to process them as if they were. As a result, when it tries to parse these JSON files, it encounters an invalid syntax and we get the error:

Building terminology-service-suite.min.js
✘ [ERROR] Expected ";" but found ":"

    node_modules/@elastic/eui/es/global_styling/functions/logicals.json:2:10:
      2 │   "height": "block-size",
        │           ^
        ╵           ;

✘ [ERROR] Expected ";" but found ":"

We need to modify the esbuild-dynamic-import plugin source code to allow JS and JSON files to be processed. This is the first try: ts4nfdi/esbuild-dynamic-import@1012415

[jusa3]

The error with the HTML Widgets:

Uncaught TypeError: Cannot set properties of undefined (setting 'Symbol(Symbol.toStringTag)')
    at Vsn (terminology-service-suite.min.js:377:17232)

Could be solved with ts4nfdi/esbuild-dynamic-import@cca171f

[jusa3]

The icons are not visible in the HTML Storybook and we get the error:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'icon')
    at terminology-service-suite.min.js:374:21172

Solved by ts4nfdi/esbuild-dynamic-import@4d38ce3