Add Create tab into Digital Twins page preview #1005

VanessaScherma · 2024-10-25T22:25:21Z

Title

Add Create tab into Digital Twins page preview

Type of Change

Description

PR with the aim of solving issue #1002.

When opening, the Create page shows the Editor and three files already placed in the sidebar:

description.md
README.md
.gitlab-ci.yml

The user can:

insert a new file via the ‘Add new file’ button (it is not possible to insert files with the same name, but the extension can be different)
delete a file (either inserted by him or one of the predefined ones, but it is not possible to delete .gitlab-ci.yml as it is necessary for the execution of the DT)
rename a file inserted by him

By clicking on the ‘Create’ button, the user can enter the name of the DT, which will correspond to the name of the sub-folder within his GitLab digitaltwins folder, and confirm the operation.
At the end of the operation, the Snackbar informs of success or failure.

By switching to one of the other tabs, the DT is already visible.

Testing

Unit and integration tests are currently in progress.

Impact

These changes add a new functionality, allowing the user to insert new digital twins.

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.

client/src/preview/route/digitaltwins/editor/Sidebar.tsx

client/src/preview/route/digitaltwins/editor/Editor.tsx

prasadtalasila · 2024-10-26T09:59:53Z

@VanessaScherma Thanks for the PR. A very top-level review.

What works:

Saving of skeletal DT in the gitlab repository

What does not work:

The newly created DT does not show up in Manage and Execute pages
The new DT is not shown even after restarting the client and also not after relogin

What are the suggested improvements:

Have a field for name of DT
Permit users to save DTs even if the files are empty

VanessaScherma · 2024-10-26T10:49:06Z

@prasadtalasila

The DT created should be immediately visible within the page, as shown in these screenshots:

In the example shown, I created a digital twin called ‘testDT’, correctly created as informed by the Snackbar at the bottom of the page after confirming the save. As soon as I changed tabs to Manage, it was immediately visible.

Regarding suggestions, I can move the field for the DT name from the Dialog to above the Editor, so that it is always visible. For empty files, on the other hand, I had initially left this option but a problem had arisen with Editor Monaco. In fact, if the file is empty, the text shown on EditorTab cannot be updated, showing the contents of the previously selected file. This is probably due to the ‘read-only’ option I added to avoid writing without having selected a file first. I can look for some alternative solution if you think the possibility of creating empty files is more suitable.

prasadtalasila · 2024-10-26T13:02:25Z

@VanessaScherma

In the example shown, I created a digital twin called ‘testDT’, correctly created as informed by the Snackbar at the bottom of the page after confirming the save. As soon as I changed tabs to Manage, it was immediately visible.

Strange. I've created two new DTs, namely "new-dt" and "new-digital-twin". But they don't show up in Manage and Execute tabs.

Regarding suggestions, I can move the field for the DT name from the Dialog to above the Editor, so that it is always visible.

Ok thanks

For empty files, on the other hand, I had initially left this option but a problem had arisen with Editor Monaco. In fact, if the file is empty, the text shown on EditorTab cannot be updated, showing the contents of the previously selected file. This is probably due to the ‘read-only’ option I added to avoid writing without having selected a file first. I can look for some alternative solution if you think the possibility of creating empty files is more suitable.

It is alright for now. Please focus on completing the PR.

client/src/preview/util/gitlabDigitalTwin.ts

client/src/preview/route/digitaltwins/editor/Editor.tsx

client/src/preview/route/digitaltwins/editor/Sidebar.tsx

client/src/preview/util/digitalTwinUtils.ts

client/src/preview/route/digitaltwins/editor/Sidebar.tsx

client/src/preview/route/digitaltwins/create/CreatePage.tsx

client/src/preview/route/digitaltwins/create/CreateDialogs.tsx

client/src/preview/route/digitaltwins/create/CreateDTDialog.tsx

client/src/preview/route/digitaltwins/editor/sidebarFunctions.ts

codeclimate · 2024-10-28T19:15:51Z

Code Climate has analyzed commit 28c38a7 and detected 3 issues on this pull request.

Here's the issue category breakdown:

Category	Count
Complexity	3

View more on Code Climate.

prasadtalasila

@VanessaScherma Thanks for the updates. Broader suggestions are:

The Execute and Manage pages refer to default branch while the create page refers to the main branch. Please make the create page refer to the default branch as well.
When the tab is changed, the execution status of the DTs is lost. If it is easily doable, please retain the execution status including the waiting loop icon. Otherwise, skip it for now.
The execution fails for a newly created DT
Suggested text for different tabs in DigitalTwinTabDataPreview.ts is:

Create: Create and save new digital twins. The new digital twins are saved in the linked gitlab repository. Remember to add valid `.gitlab-ci.yml` configuration as it is used for execution of digital twin.

Manage: Explore, edit and delete existing digital twins. The changes get saved in the linked gitlab repository.

Execute: Execute existing digital twins using CI/CD pipelines of the linked gitlab repository. Availability of gitlab runners is required for execution of digital twins.

In addition, please see the comments.

prasadtalasila · 2024-10-27T15:12:19Z

client/src/preview/route/digitaltwins/editor/Sidebar.tsx

This file requires significant reorganization. Perhaps it is better to split it into two independent files/modules.

The file was split in this way:

Sidebar.tsx: contains the Sidebar layout and the logic to manage the rendering of files

SidebarDialog.tsx: contains the dialog for adding a new file

prasadtalasila · 2024-10-29T13:36:19Z

client/src/preview/route/digitaltwins/DigitalTwinsPreview.tsx

-    dispatch(setDigitalTwin({ assetName: asset.name, digitalTwin }));
-  });
-};
-
 export const DTContent = () => {


This is only creating new DT. Can this intent be made more clear with a restructuring of code?

The purpose of this file has remained unchanged, I have only added the necessary logic for the Create page (the useState newDigitalTwinName) while I have moved the pre-existing logic in the function fetchAssetsAndCreateTwins to the AssetBoard, as it no longer has to be called up only when the main component (DigitalTwinsPreview) is opened, but each time an AssetBoard is rendered, i.e. when switching to the Manage or Execute tabs. This is necessary in order to allow the new DT to be displayed immediately after creation by switching to one of the aforementioned tabs.

The AssetBoard is a react component. It is better to move the actual logic out of it.

prasadtalasila · 2024-10-29T13:43:26Z

client/src/preview/components/asset/AssetBoard.tsx

  const dispatch = useDispatch();

+  const gitlabInstance = new GitlabInstance(


This code has been moved from DigitalTwinsPreview.tsx to here. The non-react part of code belongs to some file in preview/util module.

It has been moved to init.ts in preview/util.

prasadtalasila · 2024-10-29T14:22:54Z

client/src/preview/route/digitaltwins/create/ChangeFileNameDialog.tsx

File handling relates to operations on gitlab repo from frontend. Perhaps separating all the file handling operations into one module, say util/File.ts helps with modularity of the code?

Functions with file-related operations have been moved to file.ts in preview/util.

client/src/preview/route/digitaltwins/create/ConfirmDeleteDialog.tsx

client/src/preview/util/gitlabDigitalTwin.ts

client/src/preview/route/digitaltwins/create/CreateDialogs.tsx

client/src/preview/route/digitaltwins/create/CreatePage.tsx

prasadtalasila · 2024-10-29T14:48:31Z

client/src/preview/route/digitaltwins/editor/sidebarFunctions.tsx

The broader problem I see is this.
We need the user to forget the existence of gitlab but understand DT abstraction. In addition, user knows (rightly) that a DT consists of multiple files including configuration file(s). Thus we need to have a dedicated code for modifying files which can be accessed by DT class and if needed gitlab class. The code dependency graph I see is:

DigitalTwin (create, reconfigure, execute) ---> GitlabInstance (files, commits, jobs etc) | | |----> Files (create, update, delete) <-------------------|

The Files code can be in preview/utils/

prasadtalasila · 2024-10-29T14:53:40Z

client/src/preview/store/file.slice.ts

@@ -12,28 +14,132 @@ const filesSlice = createSlice({
  name: 'files',
  initialState,
  reducers: {
-    addOrUpdateFile: (state, action: PayloadAction<FileState>) => {
+    addNewFile: (


Please remove duplication and restructure these three reducers.

Done. Now there is only the addOrUpdateFile reducer, capable to handle these three cases.

prasadtalasila · 2024-10-30T13:29:29Z

The correct dependency graph is:

DigitalTwin (create, reconfigure, execute) ---> GitlabInstance (files, commits, jobs etc)
         |                                                        ^
         |                                                        |
         |----> Files (create, update, delete) -------------------|

You can create an interface IFiles and then have both GitlabInstance and Files implement this interface.

prasadtalasila · 2024-10-30T13:33:18Z

The current code structure requires addition of child pipeline in parent pipeline. Thus each new DT created must have an entry in top-level .gitlab-ci.yml. Otherwise, the execution of new DTs fails.

The solution is to have the create step has update the .gitlab-ci.yml at the root-level. Otherwise, the new DTs do not get executed.

VanessaScherma added 3 commits October 25, 2024 10:08

Start create page

8d1d846

Complete start page

2db9646

Little fix

fb72ff4

codeclimate bot reviewed Oct 25, 2024

View reviewed changes

VanessaScherma added 2 commits October 26, 2024 17:26

Move field for DT name

54985e5

Fix reconfigure

b9a0c62

codeclimate bot reviewed Oct 27, 2024

View reviewed changes

Refactor gitlabDigitalTwin

15654df

codeclimate bot reviewed Oct 27, 2024

View reviewed changes

client/src/preview/util/digitalTwinUtils.ts Outdated Show resolved Hide resolved

client/src/preview/route/digitaltwins/editor/Sidebar.tsx Outdated Show resolved Hide resolved

VanessaScherma added 2 commits October 27, 2024 13:03

Fix codeclimate issue (gitlabDigitalTwin)

b6dff7d

Refactor CreatePage

0d06bdb

codeclimate bot reviewed Oct 27, 2024

View reviewed changes

client/src/preview/route/digitaltwins/create/CreatePage.tsx Outdated Show resolved Hide resolved

client/src/preview/route/digitaltwins/create/CreateDialogs.tsx Outdated Show resolved Hide resolved

client/src/preview/route/digitaltwins/create/CreateDialogs.tsx Outdated Show resolved Hide resolved

Refactor CreatePage

8289011

codeclimate bot reviewed Oct 28, 2024

View reviewed changes

client/src/preview/route/digitaltwins/create/CreateDTDialog.tsx Outdated Show resolved Hide resolved

client/src/preview/route/digitaltwins/create/CreateDTDialog.tsx Outdated Show resolved Hide resolved

Refactor Create dialogs

e4d9dc6

codeclimate bot reviewed Oct 28, 2024

View reviewed changes

client/src/preview/route/digitaltwins/create/CreateDTDialog.tsx Show resolved Hide resolved

VanessaScherma added 3 commits October 28, 2024 18:13

Fix codeclimate issues

70e1565

Refactor Sidebar

ae4a9a8

Fix codeclimate issues

28c38a7

codeclimate bot reviewed Oct 28, 2024

View reviewed changes

client/src/preview/route/digitaltwins/editor/sidebarFunctions.ts Outdated Show resolved Hide resolved

client/src/preview/route/digitaltwins/editor/sidebarFunctions.ts Outdated Show resolved Hide resolved

Fix codeclimate issues

86159b1

prasadtalasila reviewed Oct 29, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add Create tab into Digital Twins page preview #1005

Add Create tab into Digital Twins page preview #1005

VanessaScherma commented Oct 25, 2024

prasadtalasila commented Oct 26, 2024

VanessaScherma commented Oct 26, 2024

prasadtalasila commented Oct 26, 2024

codeclimate bot commented Oct 28, 2024

prasadtalasila left a comment

prasadtalasila Oct 27, 2024

VanessaScherma Oct 30, 2024

prasadtalasila Oct 29, 2024

VanessaScherma Oct 30, 2024

prasadtalasila Oct 31, 2024

prasadtalasila Oct 29, 2024

VanessaScherma Oct 30, 2024

prasadtalasila Oct 29, 2024

VanessaScherma Oct 31, 2024

prasadtalasila Oct 29, 2024

prasadtalasila Oct 29, 2024

VanessaScherma Oct 31, 2024

prasadtalasila commented Oct 30, 2024

prasadtalasila commented Oct 30, 2024

		const dispatch = useDispatch();

		const gitlabInstance = new GitlabInstance(

Add Create tab into Digital Twins page preview #1005

Are you sure you want to change the base?

Add Create tab into Digital Twins page preview #1005

Conversation

VanessaScherma commented Oct 25, 2024

Title

Type of Change

Description

Testing

Impact

Additional Information

Checklist

prasadtalasila commented Oct 26, 2024

What works:

What does not work:

What are the suggested improvements:

VanessaScherma commented Oct 26, 2024

prasadtalasila commented Oct 26, 2024

codeclimate bot commented Oct 28, 2024

prasadtalasila left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

prasadtalasila commented Oct 30, 2024

prasadtalasila commented Oct 30, 2024