diff --git a/client/src/preview/route/digitaltwins/create/ChangeFileNameDialog.tsx b/client/src/preview/route/digitaltwins/create/ChangeFileNameDialog.tsx index 690abc635..9cb219a9c 100644 --- a/client/src/preview/route/digitaltwins/create/ChangeFileNameDialog.tsx +++ b/client/src/preview/route/digitaltwins/create/ChangeFileNameDialog.tsx @@ -9,14 +9,14 @@ import { } from '@mui/material'; import { renameFile } from 'preview/store/file.slice'; import { useDispatch } from 'react-redux'; -import { useEffect, useState } from 'react'; +import { Dispatch, SetStateAction, useEffect, useState } from 'react'; interface ChangeFileNameDialogProps { open: boolean; onClose: () => void; fileName: string; - setFileName: (name: string) => void; - setFileType: (type: string) => void; + setFileName: Dispatch>; + setFileType: Dispatch>; } const ChangeFileNameDialog: React.FC = ({ diff --git a/client/src/preview/route/digitaltwins/create/ConfirmDeleteDialog.tsx b/client/src/preview/route/digitaltwins/create/ConfirmDeleteDialog.tsx index f104a2a4b..df65267ec 100644 --- a/client/src/preview/route/digitaltwins/create/ConfirmDeleteDialog.tsx +++ b/client/src/preview/route/digitaltwins/create/ConfirmDeleteDialog.tsx @@ -1,4 +1,5 @@ import * as React from 'react'; +import { Dispatch, SetStateAction } from 'react'; import { Dialog, DialogActions, DialogContent, Button } from '@mui/material'; import { removeAllCreationFiles, addNewFile } from 'preview/store/file.slice'; import { useDispatch, useSelector } from 'react-redux'; @@ -7,10 +8,10 @@ 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; + setFileName: Dispatch>; + setFileContent: Dispatch>; + setFileType: Dispatch>; + setNewDigitalTwinName: Dispatch>; } const ConfirmDeleteDialog: React.FC = ({ @@ -25,8 +26,6 @@ const ConfirmDeleteDialog: React.FC = ({ const files = useSelector((state: RootState) => state.files); - console.log(files); - const handleConfirmCancel = () => { setFileName(''); setFileContent(''); diff --git a/client/src/preview/route/digitaltwins/create/CreateDTDialog.tsx b/client/src/preview/route/digitaltwins/create/CreateDTDialog.tsx index 361411fbd..8fda94e87 100644 --- a/client/src/preview/route/digitaltwins/create/CreateDTDialog.tsx +++ b/client/src/preview/route/digitaltwins/create/CreateDTDialog.tsx @@ -1,16 +1,7 @@ import * as React from 'react'; -import { - Dialog, - DialogActions, - DialogContent, - Typography, - Button, -} from '@mui/material'; -import { - addNewFile, - FileState, - removeAllCreationFiles, -} from 'preview/store/file.slice'; +import { Dispatch, SetStateAction } 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'; @@ -23,13 +14,13 @@ interface CreateDTDialogProps { open: boolean; onClose: () => void; newDigitalTwinName: string; - setNewDigitalTwinName: (name: string) => void; + setNewDigitalTwinName: Dispatch>; errorMessage: string; - setErrorMessage: (message: string) => void; - setFileName: (name: string) => void; - setFileContent: (content: string) => void; - setFileType: (type: string) => void; - setOpenInputDialog: (open: boolean) => void; + setErrorMessage: Dispatch>; + setFileName: Dispatch>; + setFileContent: Dispatch>; + setFileType: Dispatch>; + setOpenCreateDTDialog: Dispatch>; } const defaultFiles = [ @@ -38,7 +29,7 @@ const defaultFiles = [ { name: '.gitlab-ci.yml', type: 'config' }, ]; -const InputDialog: React.FC = ({ +const CreateDTDialog: React.FC = ({ open, onClose, newDigitalTwinName, @@ -48,56 +39,63 @@ const InputDialog: React.FC = ({ setFileName, setFileContent, setFileType, - setOpenInputDialog, + setOpenCreateDTDialog, }) => { const files: FileState[] = useSelector((state: RootState) => state.files); const dispatch = useDispatch(); const handleInputDialogClose = () => { - setOpenInputDialog(false); + setOpenCreateDTDialog(false); }; - const handleInputDialogConfirm = async () => { - const emptyNewFiles = files + const checkEmptyNewFiles = (): boolean => { + const emptyFiles = files .filter((file) => file.isNew && file.content === '') .map((file) => file.name); - if (emptyNewFiles.length > 0) { + if (emptyFiles.length > 0) { setErrorMessage( - `The following files have empty content: ${emptyNewFiles.join(', ')}. Edit them in order to create the new digital twin.`, + `The following files have empty content: ${emptyFiles.join(', ')}. Edit them in order to create the new digital twin.` ); - return; + return true; } + return false; + }; + const initializeDigitalTwin = async () => { const gitlabInstance = new GitlabInstance( sessionStorage.getItem('username') || '', getAuthority(), - sessionStorage.getItem('access_token') || '', + sessionStorage.getItem('access_token') || '' ); await gitlabInstance.init(); - const digitalTwin = new DigitalTwin(newDigitalTwinName, gitlabInstance); + return new DigitalTwin(newDigitalTwinName, gitlabInstance); + }; + + const addMissingDefaultFiles = () => { + defaultFiles.forEach((file) => { + const fileExists = files.some((existingFile) => existingFile.name === file.name); + if (!fileExists) { + dispatch(addNewFile(file)); + } + }); + }; + + const handleInputDialogConfirm = async () => { + if (checkEmptyNewFiles()) return; + + const digitalTwin = await initializeDigitalTwin(); 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(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)); - } - }); + addMissingDefaultFiles(); } + handleInputDialogClose(); setFileName(''); setFileContent(''); @@ -109,8 +107,7 @@ const InputDialog: React.FC = ({ - Are you sure you want to create the{' '} - {newDigitalTwinName} digital twin? + Are you sure you want to create the {newDigitalTwinName} digital twin? {errorMessage} @@ -122,4 +119,4 @@ const InputDialog: React.FC = ({ ); }; -export default InputDialog; +export default CreateDTDialog; diff --git a/client/src/preview/route/digitaltwins/create/CreateDialogs.tsx b/client/src/preview/route/digitaltwins/create/CreateDialogs.tsx index ab5871a3b..f4f5afb02 100644 --- a/client/src/preview/route/digitaltwins/create/CreateDialogs.tsx +++ b/client/src/preview/route/digitaltwins/create/CreateDialogs.tsx @@ -1,4 +1,5 @@ import * as React from 'react'; +import { Dispatch, SetStateAction } from 'react'; import ChangeFileNameDialog from './ChangeFileNameDialog'; import DeleteFileDialog from './DeleteFileDialog'; import ConfirmDeleteDialog from './ConfirmDeleteDialog'; @@ -8,19 +9,19 @@ interface CreateDialogsProps { openChangeFileNameDialog: boolean; onCloseChangeFileNameDialog: () => void; fileName: string; - setFileName: (name: string) => void; - setFileContent: (content: string) => void; - setFileType: (type: string) => void; + setFileName: Dispatch>; + setFileContent: Dispatch>; + setFileType: Dispatch>; openDeleteFileDialog: boolean; onCloseDeleteFileDialog: () => void; openConfirmDeleteDialog: boolean; - setOpenConfirmDeleteDialog: (open: boolean) => void; - openInputDialog: boolean; - setOpenInputDialog: (open: boolean) => void; + setOpenConfirmDeleteDialog: Dispatch>; + openCreateDTDialog: boolean; + setOpenCreateDTDialog: Dispatch>; newDigitalTwinName: string; - setNewDigitalTwinName: (name: string) => void; + setNewDigitalTwinName: Dispatch>; errorMessage: string; - setErrorMessage: (message: string) => void; + setErrorMessage: Dispatch>; } const CreateDialogs: React.FC = (props) => ( @@ -42,8 +43,8 @@ const CreateDialogs: React.FC = (props) => ( /> props.setOpenInputDialog(false)} + open={props.openCreateDTDialog} + onClose={() => props.setOpenCreateDTDialog(false)} newDigitalTwinName={props.newDigitalTwinName} setNewDigitalTwinName={props.setNewDigitalTwinName} errorMessage={props.errorMessage} @@ -51,7 +52,7 @@ const CreateDialogs: React.FC = (props) => ( setFileName={props.setFileName} setFileContent={props.setFileContent} setFileType={props.setFileType} - setOpenInputDialog={props.setOpenInputDialog} + setOpenCreateDTDialog={props.setOpenCreateDTDialog} /> { @@ -113,7 +113,7 @@ function CreatePage({ const confirmSave = () => { setErrorMessage(''); - setOpenInputDialog(true); + setOpenCreateDTDialog(true); }; return ( @@ -167,8 +167,8 @@ function CreatePage({ onCloseDeleteFileDialog={() => setOpenDeleteFileDialog(false)} openConfirmDeleteDialog={openConfirmDeleteDialog} setOpenConfirmDeleteDialog={setOpenConfirmDeleteDialog} - openInputDialog={openInputDialog} - setOpenInputDialog={setOpenInputDialog} + openCreateDTDialog={openCreateDTDialog} + setOpenCreateDTDialog={setOpenCreateDTDialog} newDigitalTwinName={newDigitalTwinName} setNewDigitalTwinName={setNewDigitalTwinName} errorMessage={errorMessage} diff --git a/client/src/preview/route/digitaltwins/create/DeleteFileDialog.tsx b/client/src/preview/route/digitaltwins/create/DeleteFileDialog.tsx index 815267862..a927f30b9 100644 --- a/client/src/preview/route/digitaltwins/create/DeleteFileDialog.tsx +++ b/client/src/preview/route/digitaltwins/create/DeleteFileDialog.tsx @@ -1,4 +1,5 @@ import * as React from 'react'; +import { Dispatch, SetStateAction } from 'react'; import { Dialog, DialogActions, DialogContent, Button } from '@mui/material'; import { deleteFile } from 'preview/store/file.slice'; import { useDispatch } from 'react-redux'; @@ -7,8 +8,8 @@ interface DeleteFileDialogProps { open: boolean; onClose: () => void; fileName: string; - setFileName: (name: string) => void; - setFileContent: (content: string) => void; + setFileName: Dispatch>; + setFileContent: Dispatch>; } const DeleteFileDialog: React.FC = ({