Refactor CreatePage

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

@@ -10,7 +10,15 @@ import { addNewFile } from 'preview/store/file.slice';
 import tabs from './DigitalTwinTabDataPreview';
 import CreatePage from './create/CreatePage';
 
-export const createDTTab = (): TabData[] =>
+interface DTTabProps {
+  newDigitalTwinName: string;
+  setNewDigitalTwinName: React.Dispatch<React.SetStateAction<string>>;
+}
+
+export const createDTTab = ({
+  newDigitalTwinName,
+  setNewDigitalTwinName,
+}: DTTabProps): TabData[] =>
   tabs
     .filter(
       (tab) =>
@@ -20,24 +28,25 @@ export const createDTTab = (): TabData[] =>
     )
     .map((tab) => ({
       label: tab.label,
-      body: (
-        <>
-          {tab.label === 'Create' ? (
-            <>
-              <Typography variant="body1">{tab.body}</Typography>
-              <CreatePage />
-            </>
-          ) : (
-            <>
-              <Typography variant="body1">{tab.body}</Typography>
-              <AssetBoard tab={tab.label} />
-            </>
-          )}
-        </>
-      ),
+      body:
+        tab.label === 'Create' ? (
+          <>
+            <Typography variant="body1">{tab.body}</Typography>
+            <CreatePage
+              newDigitalTwinName={newDigitalTwinName}
+              setNewDigitalTwinName={setNewDigitalTwinName}
+            />
+          </>
+        ) : (
+          <>
+            <Typography variant="body1">{tab.body}</Typography>
+            <AssetBoard tab={tab.label} />
+          </>
+        ),
     }));
 
 export const DTContent = () => {
+  const [newDigitalTwinName, setNewDigitalTwinName] = React.useState('');
   const dispatch = useDispatch();
 
   useEffect(() => {
@@ -53,12 +62,15 @@ 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
+      <Typography variant="body1" sx={{ 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()} scope={[]} />
+      <TabComponent
+        assetType={createDTTab({ newDigitalTwinName, setNewDigitalTwinName })}
+        scope={[]}
+      />
     </Layout>
   );
 };

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

@@ -0,0 +1,73 @@
+import * as React from 'react';
+import {
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  TextField,
+  Button,
+} from '@mui/material';
+import { renameFile } from 'preview/store/file.slice';
+import { useDispatch } from 'react-redux';
+import { useEffect, useState } from 'react';
+
+interface ChangeFileNameDialogProps {
+  open: boolean;
+  onClose: () => void;
+  fileName: string;
+  setFileName: (name: string) => void;
+  setFileType: (type: string) => void;
+}
+
+const ChangeFileNameDialog: React.FC<ChangeFileNameDialogProps> = ({
+  open,
+  onClose,
+  fileName,
+  setFileName,
+  setFileType,
+}) => {
+  const [modifiedFileName, setModifiedFileName] = useState(fileName);
+
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    setModifiedFileName(fileName);
+  }, [fileName]);
+
+  const handleChangeFileName = () => {
+    dispatch(renameFile({ oldName: fileName, newName: modifiedFileName }));
+    setFileName(modifiedFileName);
+
+    const extension = modifiedFileName.split('.').pop();
+    setFileType(extension || '');
+
+    onClose();
+  };
+
+  return (
+    <Dialog open={open} onClose={onClose}>
+      <DialogTitle>Change the file name</DialogTitle>
+      <DialogContent>
+        <TextField
+          autoFocus
+          margin="dense"
+          label="New File Name"
+          fullWidth
+          variant="outlined"
+          value={modifiedFileName}
+          onChange={(e) => setModifiedFileName(e.target.value)}
+        />
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onClose} color="primary">
+          Cancel
+        </Button>
+        <Button onClick={handleChangeFileName} color="secondary">
+          Change
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default ChangeFileNameDialog;

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

@@ -0,0 +1,68 @@
+import * as React from 'react';
+import { Dialog, DialogActions, DialogContent, Button } from '@mui/material';
+import { removeAllCreationFiles, addNewFile } from 'preview/store/file.slice';
+import { useDispatch, useSelector } from 'react-redux';
+import { RootState } from 'store/store';
+
+interface ConfirmDeleteDialogProps {
+  open: boolean;
+  onClose: () => void;
+  setFileName: (name: string) => void;
+  setFileContent: (content: string) => void;
+  setFileType: (type: string) => void;
+  setNewDigitalTwinName: (name: string) => void;
+}
+
+const ConfirmDeleteDialog: React.FC<ConfirmDeleteDialogProps> = ({
+  open,
+  onClose,
+  setFileName,
+  setFileContent,
+  setFileType,
+  setNewDigitalTwinName,
+}) => {
+  const dispatch = useDispatch();
+
+  const files = useSelector((state: RootState) => state.files);
+
+  console.log(files);
+
+  const handleConfirmCancel = () => {
+    setFileName('');
+    setFileContent('');
+    setFileType('');
+    setNewDigitalTwinName('');
+    dispatch(removeAllCreationFiles());
+
+    const defaultFiles = [
+      { name: 'description.md', type: 'description' },
+      { name: 'README.md', type: 'description' },
+      { name: '.gitlab-ci.yml', type: 'config' },
+    ];
+
+    defaultFiles.forEach((file) => {
+      const fileExists = files.some(
+        (f) => f.name === file.name && f.isNew === true,
+      );
+      if (!fileExists) {
+        dispatch(addNewFile(file));
+      }
+    });
+
+    onClose();
+  };
+
+  return (
+    <Dialog open={open} onClose={onClose}>
+      <DialogContent>
+        Are you sure you want to delete the inserted files and their content?
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onClose}>Cancel</Button>
+        <Button onClick={handleConfirmCancel}>Yes</Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default ConfirmDeleteDialog;

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

@@ -0,0 +1,125 @@
+import * as React from 'react';
+import {
+  Dialog,
+  DialogActions,
+  DialogContent,
+  Typography,
+  Button,
+} from '@mui/material';
+import {
+  addNewFile,
+  FileState,
+  removeAllCreationFiles,
+} from 'preview/store/file.slice';
+import { useDispatch, useSelector } from 'react-redux';
+import { RootState } from 'store/store';
+import GitlabInstance from 'preview/util/gitlab';
+import { getAuthority } from 'util/envUtil';
+import DigitalTwin from 'preview/util/gitlabDigitalTwin';
+import { showSnackbar } from 'preview/store/snackbar.slice';
+import { setDigitalTwin } from 'preview/store/digitalTwin.slice';
+
+interface CreateDTDialogProps {
+  open: boolean;
+  onClose: () => void;
+  newDigitalTwinName: string;
+  setNewDigitalTwinName: (name: string) => void;
+  errorMessage: string;
+  setErrorMessage: (message: string) => void;
+  setFileName: (name: string) => void;
+  setFileContent: (content: string) => void;
+  setFileType: (type: string) => void;
+  setOpenInputDialog: (open: boolean) => void;
+}
+
+const defaultFiles = [
+  { name: 'description.md', type: 'description' },
+  { name: 'README.md', type: 'description' },
+  { name: '.gitlab-ci.yml', type: 'config' },
+];
+
+const InputDialog: React.FC<CreateDTDialogProps> = ({
+  open,
+  onClose,
+  newDigitalTwinName,
+  setNewDigitalTwinName,
+  errorMessage,
+  setErrorMessage,
+  setFileName,
+  setFileContent,
+  setFileType,
+  setOpenInputDialog,
+}) => {
+  const files: FileState[] = useSelector((state: RootState) => state.files);
+  const dispatch = useDispatch();
+
+  const handleInputDialogClose = () => {
+    setOpenInputDialog(false);
+  };
+
+  const handleInputDialogConfirm = async () => {
+    const emptyNewFiles = files
+      .filter((file) => file.isNew && file.content === '')
+      .map((file) => file.name);
+
+    if (emptyNewFiles.length > 0) {
+      setErrorMessage(
+        `The following files have empty content: ${emptyNewFiles.join(', ')}. Edit them in order to create the new digital twin.`,
+      );
+      return;
+    }
+
+    const gitlabInstance = new GitlabInstance(
+      sessionStorage.getItem('username') || '',
+      getAuthority(),
+      sessionStorage.getItem('access_token') || '',
+    );
+    await gitlabInstance.init();
+    const digitalTwin = new DigitalTwin(newDigitalTwinName, gitlabInstance);
+    const result = await digitalTwin.createDT(files);
+    if (result.startsWith('Error')) {
+      dispatch(showSnackbar({ message: result, severity: 'error' }));
+    } else {
+      dispatch(
+        showSnackbar({
+          message: `Digital twin ${newDigitalTwinName} created successfully`,
+          severity: 'success',
+        }),
+      );
+      dispatch(setDigitalTwin({ assetName: newDigitalTwinName, digitalTwin }));
+      dispatch(removeAllCreationFiles());
+
+      defaultFiles.forEach((file) => {
+        const fileExists = files.some(
+          (existingFile) => existingFile.name === file.name,
+        );
+        if (!fileExists) {
+          dispatch(addNewFile(file));
+        }
+      });
+    }
+    handleInputDialogClose();
+    setFileName('');
+    setFileContent('');
+    setFileType('');
+    setNewDigitalTwinName('');
+  };
+
+  return (
+    <Dialog open={open} onClose={onClose}>
+      <DialogContent>
+        <Typography>
+          Are you sure you want to create the{' '}
+          <strong>{newDigitalTwinName}</strong> digital twin?
+        </Typography>
+        <Typography style={{ color: 'red' }}>{errorMessage}</Typography>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={handleInputDialogClose}>Cancel</Button>
+        <Button onClick={handleInputDialogConfirm}>Confirm</Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default InputDialog;