React Bootstrap Lib Update

[tdipisa]

Description

React Bootstrap - Missing doc

• Bootstrap 4 (used in beta): to analyze. Probably very hard

Other useful information (optional):

[allyoucanmap]

@tdipisa @giohappy @offtherailz @mbarto @MV88

Conclusion

I think it's not possible to migrate react bootstrap in one move so I propose these steps:

• [1 breaking change] migrate the style from .less to .scss language without change the react-bootstrap or bootstrap versions. MapStore should results the same as before. (there is an official port of boostrap for sass for the version 3 https://github.com/twbs/bootstrap-sass)
• focalize on every single editor: map viewer, dashboard and geostory and make our custom style isolated from bootstrap as much as we can in particular removing the layout component of bootstrap. With this approach we will be able to import only the part of the style we need in our project. (eg; in geonode_mapstore_client we could import only the style related to the map viewer and see what happen and what we need to change in mapstore)
• [2 breaking change] when the editor are isolated enough from bootstrap we could update react-bootstrap to the most recent version (the version 5 of boostrap is currently in beta)

The first step is needed only if we want to move foorward with the next ones anyway it seems sass language it will be used also in the version 5 of bootstrap so I don't think it's a bad idea move to .scss. I was able to make a complete migration of the code during the investigation https://github.com/allyoucanmap/MapStore2/tree/bootstrap-sass

Investigation

The update to react-bootstrap 4 requires to major breaking change for mapstore:

• migrate all the style from the .less to .scss language
• update all the component for react-bootstrap https://react-bootstrap.github.io/migrating/ means code refactoring on mapstore

The react bootstrap 4 change some component behaviour and structures:

• Dropdowns
• Menu Items
• Tabs
• Grid Layout
• Input Addons

and remove others components, here some revelant for mapstore:

• Panel
• Glyphicon

Here the result with custom styles in scss, bootstrap v4 and react bootrap v1:

Here the result with custom styles in scss and react bootrap v1 removing bootstrap style:

Interisting note: it seems the structure of the editor here still there this probably means that we have a lot of custom style that fight against bootstrap

[allyoucanmap]

@tdipisa After a discussion we decided to start with the 2 point focalize on every single editor: map viewer, dashboard and geostory and make our custom style. The aim is to isolate as much as possible the custom theme of mapstore from the bootstrap one. If this process will be successfully we could think to migrate to the latest version of bootstrap if it will be still necessary.

[alexander-fedorenko]

update all the component for react-bootstrap https://react-bootstrap.github.io/migrating/ means code refactoring on mapstore

Following spreadsheet could be useful and handy during the process of components migration as it lists all the places where react-bootstrap components are used: https://docs.google.com/spreadsheets/d/1DDyScCv9htif-apZHDhyqP_8qf6UGLBPxj9g7MJ5YI4/edit?usp=sharing