Resolve "Add shipping into the data portal via iframe"

Closes #14 (closed)

This MR is not supposed to be merged! It is just exploratory work to find out the best way to interact with multiple MF

Iframe

The iframe is a html element tag allows to embed another document (html remote site, for instance). The size (height and width) needs to be specified:

 <iframe src="demo_iframe.htm" height="200" width="300" title="Iframe Example"></iframe> 

The development consists on creating a 2nd tab so we can compare both implementations (integrated in the data portal) and iframe

Example of iframe

This is the result as it is with no modification:

Conclusion

It is easy to embed in microfrontend but the size needs to be known beforehand if you want a seamless integration and a nice look and feel

Standalone micro-frontend

This approach is a link to a button that open a brand new front-end in the browser. It is like an independent application with the pros and cons.

Navigation

A button is added to the investigation's table that allows to navigate to the logistics application

Example with external app

My Conclusion

This is easier and more nice than the iframe however it has to have a very narrow scope otherwise the user can be lost easily.

apps/E-DataPortal/src/containers/ShippingEmbedded.js

@@ -28,7 +28,7 @@ function ShippingEmbedded() {
             id="testId"
             src={`${UI.apps.logistics.url}/investigation/${investigationId}`}
             title="description"
-            style={{ width: '100%' }}
+            style={{ width: '100%', height: '600px' }}
           ></iframe>
         </Col>
       </Row>