The product consists of dozens of screens built from a range of complex UI components, such as trees, editable tables, modals, dropdowns, buttons. It was important to not just implement these screens, but make development of new ones faster, thus cheaper. So we developed a robust and extensible component library.

Drop-down list

Two-pane selector

Our universal table component built for this project is capable of client and server-side pagination, search and sorting, row and column grouping, inline editing and custom cells rendering with links and action menus, some of which would only appear on hover.

Other features: special scrolling behavior like sticky rows or columns or independently scrollable cell content.

The tree component can have thousands of nodes at each depth, so all the contents have to be loaded on demand.

More actions for every node are available in the context menu on right click

The tree in a simple mode only shows the current directory

Quick search in the tree

Most pages consist of forms. We have built a dynamic forms system to address sync and async validation, styling, and dependent fields.

Form

Integrated code editor

If an expression is correct, it displays a human-readable time for next run

Another example of custom component is a cron expression validator and parser.

All state changes in the application are reflected in the URL. If you refresh a page, you get prefilled values in forms, same location in the tree, and correct active tab.