Adds Digital Twin create and Library features (#1081)

- Refactors the classes interacting with gitlab so that the exploration of existing digital assets in a gitlab repository are possible - Adds library page which allows to browse existing assets in a gitlab repository and select them to create new digital twin - Adds feature to create digital twins from clean slate - Adds ability to create composite, fleet and hierarchical digital twins --------- Co-authored-by: vanessa <vanessascherma@gmail.com>
INTO-CPS-Association · Dec 8, 2024 · 1b0e8d6 · 1b0e8d6
1 parent 510ebe2
commit 1b0e8d6
Show file tree

Hide file tree

Showing 98 changed files with 4,472 additions and 1,329 deletions.
diff --git a/client/DEVELOPER.md b/client/DEVELOPER.md
@@ -118,6 +118,7 @@ if (typeof window !== 'undefined') {
     REACT_APP_WORKBENCHLINK_VSCODE: '/tools/vscode/',
     REACT_APP_WORKBENCHLINK_JUPYTERLAB: '/lab',
     REACT_APP_WORKBENCHLINK_JUPYTERNOTEBOOK: '',
+    REACT_APP_WORKBENCHLINK_LIBRARY_PREVIEW: '/preview/library',
     REACT_APP_WORKBENCHLINK_DT_PREVIEW: '/preview/digitaltwins',
 
     REACT_APP_CLIENT_ID: '1be55736756190b3ace4c2c4fb19bde386d1dcc748d20b47ea8cfb5935b8446c',
@@ -148,6 +149,7 @@ if (typeof window !== 'undefined') {
     REACT_APP_WORKBENCHLINK_VSCODE: '/tools/vscode/',
     REACT_APP_WORKBENCHLINK_JUPYTERLAB: '/lab',
     REACT_APP_WORKBENCHLINK_JUPYTERNOTEBOOK: '',
+    REACT_APP_WORKBENCHLINK_LIBRARY_PREVIEW: '/preview/library',
     REACT_APP_WORKBENCHLINK_DT_PREVIEW: '/preview/digitaltwins',
 
     REACT_APP_CLIENT_ID: '1be55736756190b3ace4c2c4fb19bde386d1dcc748d20b47ea8cfb5935b8446c',

diff --git a/client/config/dev.js b/client/config/dev.js
@@ -9,6 +9,7 @@ if (typeof window !== 'undefined') {
     REACT_APP_WORKBENCHLINK_VSCODE: '/tools/vscode/',
     REACT_APP_WORKBENCHLINK_JUPYTERLAB: '/lab',
     REACT_APP_WORKBENCHLINK_JUPYTERNOTEBOOK: '',
+    REACT_APP_WORKBENCHLINK_LIBRARY_PREVIEW: '/preview/library',
     REACT_APP_WORKBENCHLINK_DT_PREVIEW: '/preview/digitaltwins',
 
     REACT_APP_CLIENT_ID: '1be55736756190b3ace4c2c4fb19bde386d1dcc748d20b47ea8cfb5935b8446c',

diff --git a/client/config/local.js b/client/config/local.js
@@ -9,6 +9,7 @@ if (typeof window !== 'undefined') {
     REACT_APP_WORKBENCHLINK_VSCODE: '/tools/vscode/',
     REACT_APP_WORKBENCHLINK_JUPYTERLAB: '/lab',
     REACT_APP_WORKBENCHLINK_JUPYTERNOTEBOOK: '',
+    REACT_APP_WORKBENCHLINK_LIBRARY_PREVIEW: '/preview/library',
     REACT_APP_WORKBENCHLINK_DT_PREVIEW: '/preview/digitaltwins',
 
     REACT_APP_CLIENT_ID: '1be55736756190b3ace4c2c4fb19bde386d1dcc748d20b47ea8cfb5935b8446c',

diff --git a/client/config/prod.js b/client/config/prod.js
@@ -9,6 +9,7 @@ if (typeof window !== 'undefined') {
     REACT_APP_WORKBENCHLINK_VSCODE: '/tools/vscode/',
     REACT_APP_WORKBENCHLINK_JUPYTERLAB: '/lab',
     REACT_APP_WORKBENCHLINK_JUPYTERNOTEBOOK: '',
+    REACT_APP_WORKBENCHLINK_LIBRARY_PREVIEW: '/preview/library',
     REACT_APP_WORKBENCHLINK_DT_PREVIEW: '/preview/digitaltwins',
 
     REACT_APP_CLIENT_ID: '1be55736756190b3ace4c2c4fb19bde386d1dcc748d20b47ea8cfb5935b8446c',

diff --git a/client/config/test.js b/client/config/test.js
@@ -9,10 +9,11 @@ if (typeof window !== 'undefined') {
     REACT_APP_WORKBENCHLINK_VSCODE: '/tools/vscode/',
     REACT_APP_WORKBENCHLINK_JUPYTERLAB: '/lab',
     REACT_APP_WORKBENCHLINK_JUPYTERNOTEBOOK: '',
+    REACT_APP_WORKBENCHLINK_LIBRARY_PREVIEW: '/preview/library',
     REACT_APP_WORKBENCHLINK_DT_PREVIEW: '/preview/digitaltwins',
 
-    REACT_APP_CLIENT_ID: '1be55736756190b3ace4c2c4fb19bde386d1dcc748d20b47ea8cfb5935b8446c',
-    REACT_APP_AUTH_AUTHORITY: 'https://gitlab.com/',
+    REACT_APP_CLIENT_ID: '38bf4764fad5ebb2ebbf49b4f57c7720145b61266f13bf4891ff7851dd5c6563',
+    REACT_APP_AUTH_AUTHORITY: 'https://maestro.cps.digit.au.dk/gitlab',
     REACT_APP_REDIRECT_URI: 'http://localhost:4000/Library',
     REACT_APP_LOGOUT_REDIRECT_URI: 'http://localhost:4000/',
     REACT_APP_GITLAB_SCOPES: 'openid profile read_user read_repository api',

diff --git a/client/env.d.ts b/client/env.d.ts
@@ -12,6 +12,7 @@ declare global {
       REACT_APP_WORKBENCHLINK_VSCODE: string;
       REACT_APP_WORKBENCHLINK_JUPYTERLAB: string;
       REACT_APP_WORKBENCHLINK_JUPYTERNOTEBOOK: string;
+      REACT_APP_WORKBENCHLINK_LIBRARY_PREVIEW: string;
       REACT_APP_WORKBENCHLINK_DT_PREVIEW: string;
 
       REACT_APP_CLIENT_ID: string;

diff --git a/client/package.json b/client/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@into-cps-association/dtaas-web",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "Web client for Digital Twin as a Service (DTaaS)",
   "main": "index.tsx",
   "author": "prasadtalasila <prasad.talasila@gmail.com> (http://prasad.talasila.in/)",
@@ -56,6 +56,7 @@
     "@mui/material": "^6.1.1",
     "@mui/x-tree-view": "^7.19.0",
     "@reduxjs/toolkit": "^2.2.7",
+    "@testing-library/react-hooks": "^8.0.1",
     "@types/react-syntax-highlighter": "^15.5.13",
     "@types/remarkable": "^2.0.8",
     "@types/styled-components": "^5.1.32",
@@ -70,6 +71,7 @@
     "eslint-plugin-jest": "^28.8.3",
     "eslint-plugin-jsx-a11y": "^6.8.0",
     "eslint-plugin-react": "^7.33.2",
+    "jest-fetch-mock": "^3.0.3",
     "katex": "^0.16.11",
     "markdown-it-katex": "^2.0.3",
     "oidc-client-ts": "^3.0.1",
@@ -87,6 +89,7 @@
     "redux": "^5.0.1",
     "remarkable": "^2.0.1",
     "remarkable-katex": "^1.2.1",
+    "reselect": "^5.1.1",
     "resize-observer-polyfill": "^1.5.1",
     "serve": "^14.2.1",
     "styled-components": "^6.1.1",

diff --git a/client/src/components/LinkIconsLib.tsx b/client/src/components/LinkIconsLib.tsx
@@ -7,6 +7,7 @@ import OpenInNewIcon from '@mui/icons-material/OpenInNew';
 import GitHubIcon from '@mui/icons-material/GitHub';
 import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
 import TabIcon from '@mui/icons-material/Tab';
+import LibraryBooksOutlined from '@mui/icons-material/LibraryBooksOutlined';
 
 type LinkIconsType = {
   [key: string]: { icon: React.ReactElement; name: string | undefined };
@@ -29,6 +30,10 @@ const LinkIcons: LinkIconsType = {
     icon: <NoteAltOutlinedIcon />,
     name: 'Jupyter Notebook',
   },
+  LIBRARY_PREVIEW: {
+    icon: <LibraryBooksOutlined />,
+    name: 'Library page preview',
+  },
   DT_PREVIEW: {
     icon: <TabIcon />,
     name: 'Digital Twins page preview',

diff --git a/client/src/preview/components/asset/AddToCartButton.tsx b/client/src/preview/components/asset/AddToCartButton.tsx
@@ -0,0 +1,50 @@
+import * as React from 'react';
+import { Button } from '@mui/material';
+import LibraryAsset from 'preview/util/libraryAsset';
+import useCart from 'preview/store/CartAccess';
+import { useSelector } from 'react-redux';
+import { selectAssetByPathAndPrivacy } from 'preview/store/assets.slice';
+
+interface AddToCartButtonProps {
+  assetPath: string;
+  assetPrivacy: boolean;
+}
+
+function AddToCartButton({ assetPath, assetPrivacy }: AddToCartButtonProps) {
+  const { state: cartState, actions } = useCart();
+  const asset = useSelector(
+    selectAssetByPathAndPrivacy(assetPath, assetPrivacy),
+  ) as LibraryAsset;
+
+  const isInCart = cartState.assets.some(
+    (item: LibraryAsset) =>
+      item.path === asset.path && item.isPrivate === asset.isPrivate,
+  );
+
+  const handleAddToCart = async () => {
+    actions.add(asset);
+  };
+
+  const handleRemoveFromCart = async () => {
+    actions.remove(asset);
+  };
+
+  return (
+    <Button
+      variant="contained"
+      size="small"
+      color="primary"
+      onClick={() => {
+        if (isInCart) {
+          handleRemoveFromCart();
+        } else {
+          handleAddToCart();
+        }
+      }}
+    >
+      {isInCart ? 'Remove' : 'Add'}
+    </Button>
+  );
+}
+
+export default AddToCartButton;
diff --git a/client/src/preview/components/asset/Asset.ts b/client/src/preview/components/asset/Asset.ts
@@ -1,4 +1,10 @@
+import GitlabInstance from 'preview/util/gitlab';
+
 export interface Asset {
   name: string;
   path: string;
+  type: string;
+  isPrivate: boolean;
+  gitlabInstance?: GitlabInstance;
+  fullDescription?: string;
 }
diff --git a/client/src/preview/components/asset/AssetBoard.tsx b/client/src/preview/components/asset/AssetBoard.tsx
@@ -1,9 +1,14 @@
 import * as React from 'react';
-import { Grid } from '@mui/material';
+import { Grid, CircularProgress } from '@mui/material';
 import { useSelector, useDispatch } from 'react-redux';
+import {
+  deleteAsset,
+  selectAssetsByTypeAndPrivacy,
+} from 'preview/store/assets.slice';
+import { fetchDigitalTwins } from 'preview/util/init';
+import { setShouldFetchDigitalTwins } from 'preview/store/digitalTwin.slice';
 import { RootState } from 'store/store';
-import { deleteAsset } from 'preview/store/assets.slice';
-import { fetchAssets } from 'preview/util/init';
+import Filter from './Filter';
 import { Asset } from './Asset';
 import { AssetCardExecute, AssetCardManage } from './AssetCard';
 
@@ -45,36 +50,74 @@ const AssetGridItem: React.FC<{
 );
 
 const AssetBoard: React.FC<AssetBoardProps> = ({ tab }) => {
-  const assets = useSelector((state: RootState) => state.assets.items);
+  const allAssets = useSelector(
+    selectAssetsByTypeAndPrivacy('Digital Twins', true),
+  );
+  const [filter, setFilter] = React.useState<string>('');
   const [error, setError] = React.useState<string | null>(null);
+  const shouldFetchDigitalTwins = useSelector(
+    (state: RootState) => state.digitalTwin.shouldFetchDigitalTwins,
+  );
+  const [loading, setLoading] = React.useState<boolean>(true);
   const dispatch = useDispatch();
 
   React.useEffect(() => {
     const fetchData = async () => {
-      await fetchAssets(dispatch, setError);
+      setLoading(true);
+      try {
+        await fetchDigitalTwins(dispatch, setError);
+      } finally {
+        setLoading(false);
+        dispatch(setShouldFetchDigitalTwins(false));
+      }
     };
-    fetchData();
-  }, [dispatch]);
+
+    if (shouldFetchDigitalTwins === true) {
+      fetchData();
+    } else {
+      setLoading(false);
+    }
+  }, [dispatch, shouldFetchDigitalTwins]);
 
   const handleDelete = (deletedAssetPath: string) => {
     dispatch(deleteAsset(deletedAssetPath));
   };
 
+  const filteredAssets = allAssets.filter((asset) =>
+    asset.name.toLowerCase().includes(filter.toLowerCase()),
+  );
+
   if (error) {
     return <em style={{ textAlign: 'center' }}>{error}</em>;
   }
 
   return (
-    <Grid {...outerGridContainerProps}>
-      {assets.map((asset) => (
-        <AssetGridItem
-          key={asset.path}
-          asset={asset}
-          tab={tab}
-          onDelete={handleDelete}
-        />
-      ))}
-    </Grid>
+    <>
+      {loading ? (
+        <Grid
+          container
+          justifyContent="center"
+          alignItems="center"
+          sx={{ minHeight: '10rem' }}
+        >
+          <CircularProgress />
+        </Grid>
+      ) : (
+        <>
+          <Filter value={filter} onChange={setFilter} />
+          <Grid {...outerGridContainerProps}>
+            {filteredAssets.map((asset) => (
+              <AssetGridItem
+                key={asset.path}
+                asset={asset}
+                tab={tab}
+                onDelete={handleDelete}
+              />
+            ))}
+          </Grid>
+        </>
+      )}
+    </>
   );
 };