Add 'Manage' tab to Digital Twins page preview

client/config/test.js

@@ -10,8 +10,8 @@ if (typeof window !== 'undefined') {
     REACT_APP_WORKBENCHLINK_JUPYTERLAB: '/lab',
     REACT_APP_WORKBENCHLINK_JUPYTERNOTEBOOK: '',
 
-    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',

client/jest.config.json

@@ -51,6 +51,7 @@
     "<rootDir>/src/"
   ],
   "moduleNameMapper": {
-    "^test/(.*)$": "<rootDir>/test/$1"
+    "^test/(.*)$": "<rootDir>/test/$1",
+    "\\.(css|less|scss)$": "<rootDir>/test/preview/__mocks__/styleMock.ts"
   }
-}
+}

client/package.json

@@ -51,9 +51,13 @@
     "@emotion/styled": "^11.11.0",
     "@fontsource/roboto": "^5.0.8",
     "@gitbeaker/rest": "^40.1.2",
+    "@monaco-editor/react": "^4.6.0",
     "@mui/icons-material": "^5.14.8",
     "@mui/material": "^5.14.8",
+    "@mui/x-tree-view": "^7.19.0",
     "@reduxjs/toolkit": "^1.9.7",
+    "@types/react-syntax-highlighter": "^15.5.13",
+    "@types/remarkable": "^2.0.8",
     "@types/styled-components": "^5.1.32",
     "@typescript-eslint/eslint-plugin": "^6.12.0",
     "@typescript-eslint/parser": "^6.12.0",
@@ -66,6 +70,8 @@
     "eslint-plugin-jest": "^27.6.0",
     "eslint-plugin-jsx-a11y": "^6.8.0",
     "eslint-plugin-react": "^7.33.2",
+    "katex": "^0.16.11",
+    "markdown-it-katex": "^2.0.3",
     "oidc-client-ts": "^2.2.2",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
@@ -76,8 +82,11 @@
     "react-redux": "^8.1.3",
     "react-router-dom": "^6.20.0",
     "react-scripts": "^5.0.1",
+    "react-syntax-highlighter": "^15.5.0",
     "react-tabs": "^6.0.2",
     "redux": "^4.2.1",
+    "remarkable": "^2.0.1",
+    "remarkable-katex": "^1.2.1",
     "resize-observer-polyfill": "^1.5.1",
     "serve": "^14.2.1",
     "styled-components": "^6.1.1",

client/src/page/Layout.tsx

@@ -27,13 +27,16 @@ function MenuLayout(props: { children: React.ReactNode }) {
   );
 }
 
-function Layout(props: { children: React.ReactNode }) {
+function Layout(props: {
+  children: React.ReactNode;
+  sx?: React.CSSProperties;
+}) {
   return (
     <Box sx={{ display: 'flex', minHeight: '100vh' }}>
       <MenuLayout>
         <Container
           maxWidth="lg"
-          sx={{ mt: 1, mb: 1, flexGrow: 1, display: 'flex' }}
+          sx={{ mt: 1, mb: 1, flexGrow: 1, ...props.sx }}
           className="content"
         >
           <Grid container spacing={3} sx={{ minHeight: '100%' }}>

client/src/preview/components/asset/Asset.ts

@@ -1,5 +1,4 @@
 export interface Asset {
   name: string;
-  description?: string;
   path: string;
 }

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

@@ -1,8 +1,9 @@
 import * as React from 'react';
 import { Grid } from '@mui/material';
-import { useSelector } from 'react-redux';
+import { useSelector, useDispatch } from 'react-redux';
 import { RootState } from 'store/store';
-import AssetCardExecute from './AssetCard';
+import { deleteAsset } from 'preview/store/assets.slice';
+import { AssetCardExecute, AssetCardManage } from './AssetCard';
 import { Asset } from './Asset';
 
 const outerGridContainerProps = {
@@ -24,7 +25,8 @@ interface AssetBoardProps {
 const AssetGridItem: React.FC<{
   asset: Asset;
   tab: string;
-}> = ({ asset }) => (
+  onDelete: (path: string) => void;
+}> = ({ asset, tab, onDelete }) => (
   <Grid
     key={asset.path}
     item
@@ -34,21 +36,35 @@ const AssetGridItem: React.FC<{
     lg={3}
     sx={{ minWidth: 250 }}
   >
-    <AssetCardExecute asset={asset} />
+    {tab === 'Execute' ? (
+      <AssetCardExecute asset={asset} />
+    ) : (
+      <AssetCardManage asset={asset} onDelete={() => onDelete(asset.path)} />
+    )}
   </Grid>
 );
 
 const AssetBoard: React.FC<AssetBoardProps> = ({ tab, error }) => {
   const assets = useSelector((state: RootState) => state.assets.items);
+  const dispatch = useDispatch();
+
+  const handleDelete = (deletedAssetPath: string) => {
+    dispatch(deleteAsset(deletedAssetPath));
+  };
 
   if (error) {
     return <em style={{ textAlign: 'center' }}>{error}</em>;
   }
 
   return (
     <Grid {...outerGridContainerProps}>
-      {assets.map((asset: Asset) => (
-        <AssetGridItem key={asset.path} asset={asset} tab={tab} />
+      {assets.map((asset) => (
+        <AssetGridItem
+          key={asset.path}
+          asset={asset}
+          tab={tab}
+          onDelete={handleDelete}
+        />
       ))}
     </Grid>
   );

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

@@ -11,15 +11,34 @@ import { useSelector } from 'react-redux';
 import { selectDigitalTwinByName } from 'preview/store/digitalTwin.slice';
 import { RootState } from 'store/store';
 import LogDialog from 'preview/route/digitaltwins/execute/LogDialog';
+import DetailsDialog from 'preview/route/digitaltwins/manage/DetailsDialog';
+import ReconfigureDialog from 'preview/route/digitaltwins/manage/ReconfigureDialog';
+import DeleteDialog from 'preview/route/digitaltwins/manage/DeleteDialog';
 import StartStopButton from './StartStopButton';
 import LogButton from './LogButton';
 import { Asset } from './Asset';
+import DetailsButton from './DetailsButton';
+import ReconfigureButton from './ReconfigureButton';
+import DeleteButton from './DeleteButton';
 
 interface AssetCardProps {
   asset: Asset;
   buttons?: React.ReactNode;
 }
 
+interface AssetCardManageProps {
+  asset: Asset;
+  buttons?: React.ReactNode;
+  onDelete: () => void;
+}
+
+interface CardButtonsContainerManageProps {
+  assetName: string;
+  setShowDetails: Dispatch<SetStateAction<boolean>>;
+  setShowReconfigure: Dispatch<SetStateAction<boolean>>;
+  setShowDelete: Dispatch<SetStateAction<boolean>>;
+}
+
 interface CardButtonsContainerExecuteProps {
   assetName: string;
   setShowLog: Dispatch<SetStateAction<boolean>>;
@@ -67,6 +86,21 @@ function CardActionAreaContainer(asset: Asset) {
   );
 }
 
+function CardButtonsContainerManage({
+  assetName,
+  setShowDetails,
+  setShowReconfigure,
+  setShowDelete,
+}: CardButtonsContainerManageProps) {
+  return (
+    <CardActions style={{ justifyContent: 'flex-end' }}>
+      <DetailsButton assetName={assetName} setShowDetails={setShowDetails} />
+      <ReconfigureButton setShowReconfigure={setShowReconfigure} />
+      <DeleteButton setShowDelete={setShowDelete} />
+    </CardActions>
+  );
+}
+
 function CardButtonsContainerExecute({
   assetName,
   setShowLog,
@@ -105,6 +139,48 @@ function AssetCard({ asset, buttons }: AssetCardProps) {
   );
 }
 
+function AssetCardManage({ asset, onDelete }: AssetCardManageProps) {
+  const [showDetailsLog, setShowDetailsLog] = useState(false);
+  const [showDeleteLog, setShowDeleteLog] = useState(false);
+  const [showReconfigure, setShowReconfigure] = useState(false);
+  const digitalTwin = useSelector(selectDigitalTwinByName(asset.name));
+
+  return (
+    digitalTwin && (
+      <>
+        <AssetCard
+          asset={asset}
+          buttons={
+            <CardButtonsContainerManage
+              assetName={asset.name}
+              setShowDelete={setShowDeleteLog}
+              setShowDetails={setShowDetailsLog}
+              setShowReconfigure={setShowReconfigure}
+            />
+          }
+        />
+        <CustomSnackbar />
+        <DetailsDialog
+          showDialog={showDetailsLog}
+          setShowDialog={setShowDetailsLog}
+          name={asset.name}
+        />
+        <ReconfigureDialog
+          showDialog={showReconfigure}
+          setShowDialog={setShowReconfigure}
+          name={asset.name}
+        />
+        <DeleteDialog
+          showDialog={showDeleteLog}
+          setShowDialog={setShowDeleteLog}
+          name={asset.name}
+          onDelete={onDelete}
+        />
+      </>
+    )
+  );
+}
+
 function AssetCardExecute({ asset }: AssetCardProps) {
   useState<AlertColor>('success');
   const [showLog, setShowLog] = useState(false);
@@ -133,4 +209,4 @@ function AssetCardExecute({ asset }: AssetCardProps) {
   );
 }
 
-export default AssetCardExecute;
+export { AssetCardManage, AssetCardExecute };

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

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { Dispatch, SetStateAction } from 'react';
+import { Button } from '@mui/material';
+
+interface DeleteButtonProps {
+  setShowDelete: Dispatch<React.SetStateAction<boolean>>;
+}
+
+const handleToggleDeleteDialog = (
+  setShowDelete: Dispatch<SetStateAction<boolean>>,
+) => {
+  setShowDelete(true);
+};
+
+function DeleteButton({ setShowDelete }: DeleteButtonProps) {
+  return (
+    <Button
+      variant="contained"
+      size="small"
+      color="primary"
+      onClick={() => handleToggleDeleteDialog(setShowDelete)}
+    >
+      Delete
+    </Button>
+  );
+}
+
+export default DeleteButton;

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

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { Dispatch, SetStateAction } from 'react';
+import { Button } from '@mui/material';
+import { useSelector } from 'react-redux';
+import { selectDigitalTwinByName } from '../../store/digitalTwin.slice';
+import DigitalTwin from '../../util/gitlabDigitalTwin';
+
+interface DialogButtonProps {
+  assetName: string;
+  setShowDetails: Dispatch<React.SetStateAction<boolean>>;
+}
+
+export const handleToggleDetailsDialog = async (
+  digitalTwin: DigitalTwin,
+  setShowDetails: Dispatch<SetStateAction<boolean>>,
+) => {
+  await digitalTwin.getFullDescription();
+  setShowDetails(true);
+};
+
+function DetailsButton({ assetName, setShowDetails }: DialogButtonProps) {
+  const digitalTwin = useSelector(selectDigitalTwinByName(assetName));
+  return (
+    <Button
+      variant="contained"
+      size="small"
+      color="primary"
+      onClick={() => handleToggleDetailsDialog(digitalTwin, setShowDetails)}
+    >
+      Details
+    </Button>
+  );
+}
+
+export default DetailsButton;

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

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { Button } from '@mui/material';
+import { Dispatch, SetStateAction } from 'react';
+
+interface ReconfigureButtonProps {
+  setShowReconfigure: Dispatch<SetStateAction<boolean>>;
+}
+
+export const handleToggleReconfigureDialog = (
+  setShowReconfigure: Dispatch<SetStateAction<boolean>>,
+) => {
+  setShowReconfigure((prev) => !prev);
+};
+
+function ReconfigureButton({ setShowReconfigure }: ReconfigureButtonProps) {
+  return (
+    <Button
+      variant="contained"
+      size="small"
+      color="primary"
+      onClick={() => handleToggleReconfigureDialog(setShowReconfigure)}
+    >
+      Reconfigure
+    </Button>
+  );
+}
+
+export default ReconfigureButton;

client/src/preview/route/digitaltwins/DigitalTwinTabDataPreview.ts

@@ -7,11 +7,11 @@ const tabs: ITabs[] = [
   },
   {
     label: 'Manage',
-    body: `Read the complete description of digital twins. If necessary, users can delete a digital twin, removing it from the workspace with all its associated data. Users can also reconfigure the digital twin, through a link that redirects to the Create tab.`,
+    body: `Read the complete description of digital twins. If necessary, users can delete a digital twin, removing it from the workspace with all its associated data. Users can also reconfigure the digital twin.`,
   },
   {
     label: 'Execute',
-    body: 'This page demonstrates integration of DTaaS with gitlab CI/CD workflows. The feature is experimental and requires certain gitlab setup in order for it to work.',
+    body: 'Execute the Digital Twins using Gitlab CI/CD workflows.',
   },
   {
     label: 'Analyze',

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

@@ -16,7 +16,7 @@ import tabs from './DigitalTwinTabDataPreview';
 
 export const createDTTab = (error: string | null): TabData[] =>
   tabs
-    .filter((tab) => tab.label === 'Execute')
+    .filter((tab) => tab.label === 'Manage' || tab.label === 'Execute')
     .map((tab) => ({
       label: tab.label,
       body: (
@@ -61,7 +61,7 @@ export const createDigitalTwinsForAssets = async (
     );
     await gitlabInstance.init();
     const digitalTwin = new DigitalTwin(asset.name, gitlabInstance);
-    digitalTwin.description = asset.description;
+    await digitalTwin.getDescription();
     dispatch(setDigitalTwin({ assetName: asset.name, digitalTwin }));
   });
 };
@@ -85,6 +85,11 @@ export const DTContent = () => {
 
   return (
     <Layout>
+      <Typography variant="body1" style={{ marginBottom: 0 }}>
+        This page demonstrates integration of DTaaS with gitlab CI/CD workflows.
+        The feature is experimental and requires certain gitlab setup in order
+        for it to work.
+      </Typography>
       <TabComponent assetType={createDTTab(error)} scope={[]} />
     </Layout>
   );