Add Library page preview

[VanessaScherma]

Title

Add Library page preview

Type of Change

• New feature
• Bug fix
• Documentation update
• Refactoring
• Security patch
• UI/UX improvement

Description

PR with the aim of solving issue #1080. It adds the Library page preview and integrates it with the existing creation functionality.

The Library page shows users the various assets by type and privacy. It displays a card for each asset, in a board similar to those used in the Manage tab and the Execute tab. The user can view the details (README.md file, if present) and add one or more assets to the shopping cart. The shopping cart keeps track of the assets added so that, when clicking on the Proceed button or opening the Create tab, the Editor sidebar presents new sections, one for each asset added. These sections contain the configuration files of the relevant asset so that the user can modify them to suit the use of the new digital twin.

When a digital twin is created with assets, the relevant DT folder that is created in the user's GitLab profile will include both the DT files and a folder for each asset added, with the relevant files (the configuration files are updated with the content specified by the user during creation).

The Create tab now includes a switch to specify whether to make the new DT common or private. If the DT is common, it is also added to the common/digital_twins folder in the user's GitLab profile.

A board search filter has also been added to simplify the search for assets or digital twins.

Testing

Unit and integration tests are currently in progress.

Impact

This change adds and integrates the use of the Library, completing the Build-Use-Share model on which the application is based.

Additional Information

None.

Checklist

• My code adheres to the coding and style guidelines of the project.
• I have added tests for all the new code and any changes made to
  existing code.
• I have made corresponding changes to the documentation.

[prasadtalasila]

@VanessaScherma This is a really good PR. I will post observations and suggestions over multiple reviews. Preliminary comments.

About the common assets

The common assets are to be visible to all users. And they come from another git repository named common in dtaas group. For the example setup on gitlab.com, you see private user1 and a common repository. I am not sure of the amount of refactoring needed to achieve this change. As an immediate step, I suggest removing the common part for now and focus on merging the library feature private assets.

Can you please share a screen recording of the different possibilities that this PR brings? This is to understand the requirements for each of the assets (as you implemented them) and the end result including DT execution.

Rephrasing terms

Shopping cart --> Selection
Clear Cart --> Clear

This is to keep the context a bit neutral. We don't have the accounting / payment feature yet. So "selection" might be a better word.

Other comments

1. Please rebase now to avoid future projects.
2. Remove the "private - common" toggle on "DT Create" page

[prasadtalasila]

@VanessaScherma Github can't handle such huge code changes. It is difficult to provide review comments in the code. Please rebase at the earliest.

[VanessaScherma]

@prasadtalasila

Files .ts, concerning code logic and added in this PR, ordered by most important:

• CartAccess.ts: custom useCart hook that provides cart status and actions using Redux to manage the addition, removal, and cleaning of assets from the cart.
• cart.slice.ts: slice Redux to manage cart status, including actions to add and remove assets, and empty the cart.
• libraryConfigFiles.ts: slice Redux to manage library configuration files, with actions to add, update, remove files and selectors to filter modified files.
• libraryAsset.ts: represents a library asset. Similar to DigitalTwin, but handles only descriptions and configuration files.
• libraryManager.ts: analogous to DTAssets for a DigitalTwin. Class that interfaces with fileHandler, handles the logic in more detail.
• sidebarFunctions.ts: file management functions for the sidebar including click, create, configure, and add dialogs.
• sidebarFetchers.ts: functions to fetch and/or update the contents of a file (shown in the sidebar) of a digital twin or library asset.
• LibraryTabDataPreview.ts: types (functions, models, tools, etc.) and privacy (common/private) of assets, with detailed labels and descriptions

Files .ts, concerning code logic and modified in this PR:

• DigitalTwin.ts: adds a new property assetFiles, along with modifying the getAssetFiles method to update this property with the retrieved data. Stores the path and configuration file names of the Library assets that were used to create the digital twin.
• DTAssets.ts: adds features to manage library files and folders used for a DigitalTwin configuration, such as retrieving file names, file contents...
• fileHandler.ts: adds specific methods for managing files and folders in the library
• digitalTwinUtils.ts: adds the getUpdatedLibraryFile function, returning the modified library configuration file that matches a given asset name and path, or null if not found.
• init.ts: adds the fetchLibraryAssets function, retrieving assets to show in the library

[prasadtalasila]

why are Reconfigure, Save and Close functions in this file?

[prasadtalasila]

how is this used in the createTabs()?

[prasadtalasila]

@VanessaScherma I found the following bugs in the code.

1. When a DT includes other DT, only .gitlab-ci.yml file is copied. It is beneficial to copy all configuration files - yaml and json. Actually these files are shown in the Create page but are not saved in the gitlab repository. A good way to check this would be to include mass-spring-damper DT and then see the result. However, when I add a data asset with a json config file, it copies the json file and works as expected.
2. A subtle bug is that the create page shows the following error even when the corresponding files are not empty.
   
   But when I click on the files and see them in the monaco editor, and then click save button, it works correctly.

[prasadtalasila]

@VanessaScherma An update on the copying of config files. The problem happens only with mass-spring-damper example. If I put a json file in hello-world example, it gets copied into the new DT.