@flowuent-org/diagramming-core 1.3.10 → 1.4.1

package/packages/diagrams/src/lib/templates/sequence/components/AddMessageDialog.tsx

@@ -1,302 +1,302 @@
-import React, { useState, useEffect } from 'react';
-import '@xyflow/react/dist/style.css';
-import {
-  Box,
-  Button,
-  FormControl,
-  InputLabel,
-  Select,
-  MenuItem,
-  TextField,
-  Dialog,
-  DialogTitle,
-  DialogContent,
-  DialogActions,
-  SelectChangeEvent,
-} from '@mui/material';
-import { useTranslation } from 'react-i18next';
-import { AddMessageDialogProps, SequenceMessageType } from '../../../types/sequence-types';
-
-const AddMessageDialog: React.FC<AddMessageDialogProps> = ({
-  open,
-  onClose,
-  onAddMessage,
-  entities,
-}) => {
-  const { t } = useTranslation();
-  const [sourceId, setSourceId] = useState<string>('');
-  const [targetId, setTargetId] = useState<string>('');
-  const [messageType, setMessageType] = useState<SequenceMessageType>('sync');
-  const [messageLabel, setMessageLabel] = useState<string>('');
-
-  // Reset form when dialog opens
-  React.useEffect(() => {
-    if (open && entities.length > 0) {
-      setSourceId(entities[0].id);
-      setTargetId(entities.length > 1 ? entities[1].id : entities[0].id);
-      setMessageType('sync');
-      setMessageLabel('New Message');
-    }
-  }, [open, entities]);
-
-  const handleSubmit = () => {
-    // If source and target are same and type is not 'self', set to 'self'
-    let effectiveMessageType = messageType;
-    if (sourceId === targetId && messageType !== 'self') {
-      effectiveMessageType = 'self';
-    }
-
-    onAddMessage(sourceId, targetId, effectiveMessageType, messageLabel);
-    onClose();
-  };
-
-  // Handle message type pre-selection when source/target changes
-  const handleSourceTargetChange = (
-    newSourceId: string,
-    newTargetId: string,
-  ) => {
-    // If source and target are the same, automatically select 'self' message type
-    if (newSourceId === newTargetId && messageType !== 'self') {
-      setMessageType('self');
-    }
-  };
-
-  // Update source with validation
-  const handleSourceChange = (event: SelectChangeEvent) => {
-    const newSourceId = event.target.value as string;
-    setSourceId(newSourceId);
-    handleSourceTargetChange(newSourceId, targetId);
-  };
-
-  // Update target with validation
-  const handleTargetChange = (event: SelectChangeEvent) => {
-    const newTargetId = event.target.value as string;
-    setTargetId(newTargetId);
-    handleSourceTargetChange(sourceId, newTargetId);
-  };
-
-  return (
-    <Dialog
-      open={open}
-      onClose={onClose}
-      maxWidth="sm"
-      fullWidth
-      PaperProps={{
-        sx: {
-          bgcolor: '#242424',
-          color: '#fff',
-          border: '1px solid #333',
-          '& .MuiDialogTitle-root': {
-            color: '#61dafb',
-            borderBottom: '1px solid #333',
-          },
-          '& .MuiDialogContent-root': {
-            bgcolor: '#242424',
-          },
-          '& .MuiDialogActions-root': {
-            bgcolor: '#242424',
-            borderTop: '1px solid #333',
-          },
-          '& .MuiFormControl-root': {
-            '& .MuiInputLabel-root': {
-              color: '#999',
-            },
-            '& .MuiOutlinedInput-root': {
-              color: '#fff',
-              '& fieldset': {
-                borderColor: '#444',
-              },
-              '&:hover fieldset': {
-                borderColor: '#61dafb',
-              },
-              '&.Mui-focused fieldset': {
-                borderColor: '#61dafb',
-              },
-            },
-            '& .MuiSelect-icon': {
-              color: '#61dafb',
-            },
-            '& .MuiMenuItem-root': {
-              color: '#fff',
-              '&:hover': {
-                bgcolor: 'rgba(97, 218, 251, 0.1)',
-              },
-              '&.Mui-selected': {
-                bgcolor: 'rgba(97, 218, 251, 0.2)',
-                '&:hover': {
-                  bgcolor: 'rgba(97, 218, 251, 0.3)',
-                },
-              },
-            },
-          },
-          '& .MuiTextField-root': {
-            '& .MuiInputLabel-root': {
-              color: '#999',
-            },
-            '& .MuiOutlinedInput-root': {
-              color: '#fff',
-              '& fieldset': {
-                borderColor: '#444',
-              },
-              '&:hover fieldset': {
-                borderColor: '#61dafb',
-              },
-              '&.Mui-focused fieldset': {
-                borderColor: '#61dafb',
-              },
-            },
-          },
-          '& .MuiButton-contained': {
-            bgcolor: '#61dafb',
-            color: '#000',
-            '&:hover': {
-              bgcolor: '#4db6d6',
-            },
-            '&:disabled': {
-              bgcolor: '#2a2a2a',
-              color: '#666',
-            },
-          },
-          '& .MuiButton-text': {
-            color: '#fff',
-            '&:hover': {
-              bgcolor: 'rgba(255, 255, 255, 0.1)',
-            },
-          },
-        },
-      }}
-    >
-      <DialogTitle>{t('addMessageDialog.title')}</DialogTitle>
-      <DialogContent>
-        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, my: 2 }}>
-          <FormControl fullWidth>
-            <InputLabel>{t('addMessageDialog.sourceEntity')}</InputLabel>
-            <Select
-              value={sourceId}
-              onChange={handleSourceChange}
-              label={t('addMessageDialog.sourceEntity')}
-              MenuProps={{
-                PaperProps: {
-                  sx: {
-                    bgcolor: '#242424',
-                    border: '1px solid #333',
-                    '& .MuiMenuItem-root': {
-                      color: '#fff',
-                      '&:hover': {
-                        bgcolor: 'rgba(97, 218, 251, 0.1)',
-                      },
-                      '&.Mui-selected': {
-                        bgcolor: 'rgba(97, 218, 251, 0.2)',
-                        '&:hover': {
-                          bgcolor: 'rgba(97, 218, 251, 0.3)',
-                        },
-                      },
-                    },
-                  },
-                },
-              }}
-            >
-              {entities.map((entity) => (
-                <MenuItem key={`source-${entity.id}`} value={entity.id}>
-                  {entity.data.label as string}
-                </MenuItem>
-              ))}
-            </Select>
-          </FormControl>
-
-          <FormControl fullWidth>
-            <InputLabel>{t('addMessageDialog.targetEntity')}</InputLabel>
-            <Select
-              value={targetId}
-              onChange={handleTargetChange}
-              label={t('addMessageDialog.targetEntity')}
-              MenuProps={{
-                PaperProps: {
-                  sx: {
-                    bgcolor: '#242424',
-                    border: '1px solid #333',
-                    '& .MuiMenuItem-root': {
-                      color: '#fff',
-                      '&:hover': {
-                        bgcolor: 'rgba(97, 218, 251, 0.1)',
-                      },
-                      '&.Mui-selected': {
-                        bgcolor: 'rgba(97, 218, 251, 0.2)',
-                        '&:hover': {
-                          bgcolor: 'rgba(97, 218, 251, 0.3)',
-                        },
-                      },
-                    },
-                  },
-                },
-              }}
-            >
-              {entities.map((entity) => (
-                <MenuItem key={`target-${entity.id}`} value={entity.id}>
-                  {entity.data.label as string}
-                </MenuItem>
-              ))}
-            </Select>
-          </FormControl>
-
-          <FormControl fullWidth>
-            <InputLabel>{t('addMessageDialog.messageType')}</InputLabel>
-            <Select
-              value={messageType}
-              onChange={(e) => setMessageType(e.target.value as SequenceMessageType)}
-              label={t('addMessageDialog.messageType')}
-              disabled={sourceId === targetId} // Disable if source = target (force self message)
-              MenuProps={{
-                PaperProps: {
-                  sx: {
-                    bgcolor: '#242424',
-                    border: '1px solid #333',
-                    '& .MuiMenuItem-root': {
-                      color: '#fff',
-                      '&:hover': {
-                        bgcolor: 'rgba(97, 218, 251, 0.1)',
-                      },
-                      '&.Mui-selected': {
-                        bgcolor: 'rgba(97, 218, 251, 0.2)',
-                        '&:hover': {
-                          bgcolor: 'rgba(97, 218, 251, 0.3)',
-                        },
-                      },
-                    },
-                  },
-                },
-              }}
-            >
-              <MenuItem value="sync">{t('sequenceDiagram.messageTypes.synchronous')}</MenuItem>
-              <MenuItem value="async">{t('sequenceDiagram.messageTypes.asynchronous')}</MenuItem>
-              <MenuItem value="return">{t('sequenceDiagram.messageTypes.return')}</MenuItem>
-              <MenuItem value="self">{t('sequenceDiagram.messageTypes.selfMessage')}</MenuItem>
-            </Select>
-          </FormControl>
-
-          <TextField
-            label={t('addMessageDialog.messageLabel')}
-            value={messageLabel}
-            onChange={(e) => setMessageLabel(e.target.value)}
-            fullWidth
-          />
-        </Box>
-      </DialogContent>
-      <DialogActions>
-        <Button onClick={onClose} color="primary">
-          {t('addMessageDialog.buttons.cancel')}
-        </Button>
-        <Button
-          onClick={handleSubmit}
-          color="primary"
-          variant="contained"
-          disabled={!sourceId || !targetId || !messageLabel}
-        >
-          {t('addMessageDialog.buttons.addMessage')}
-        </Button>
-      </DialogActions>
-    </Dialog>
-  );
-};
-
-export default AddMessageDialog;
+import React, { useState, useEffect } from 'react';
+import '@xyflow/react/dist/style.css';
+import {
+  Box,
+  Button,
+  FormControl,
+  InputLabel,
+  Select,
+  MenuItem,
+  TextField,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  SelectChangeEvent,
+} from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { AddMessageDialogProps, SequenceMessageType } from '../../../types/sequence-types';
+
+const AddMessageDialog: React.FC<AddMessageDialogProps> = ({
+  open,
+  onClose,
+  onAddMessage,
+  entities,
+}) => {
+  const { t } = useTranslation();
+  const [sourceId, setSourceId] = useState<string>('');
+  const [targetId, setTargetId] = useState<string>('');
+  const [messageType, setMessageType] = useState<SequenceMessageType>('sync');
+  const [messageLabel, setMessageLabel] = useState<string>('');
+
+  // Reset form when dialog opens
+  React.useEffect(() => {
+    if (open && entities.length > 0) {
+      setSourceId(entities[0].id);
+      setTargetId(entities.length > 1 ? entities[1].id : entities[0].id);
+      setMessageType('sync');
+      setMessageLabel('New Message');
+    }
+  }, [open, entities]);
+
+  const handleSubmit = () => {
+    // If source and target are same and type is not 'self', set to 'self'
+    let effectiveMessageType = messageType;
+    if (sourceId === targetId && messageType !== 'self') {
+      effectiveMessageType = 'self';
+    }
+
+    onAddMessage(sourceId, targetId, effectiveMessageType, messageLabel);
+    onClose();
+  };
+
+  // Handle message type pre-selection when source/target changes
+  const handleSourceTargetChange = (
+    newSourceId: string,
+    newTargetId: string,
+  ) => {
+    // If source and target are the same, automatically select 'self' message type
+    if (newSourceId === newTargetId && messageType !== 'self') {
+      setMessageType('self');
+    }
+  };
+
+  // Update source with validation
+  const handleSourceChange = (event: SelectChangeEvent) => {
+    const newSourceId = event.target.value as string;
+    setSourceId(newSourceId);
+    handleSourceTargetChange(newSourceId, targetId);
+  };
+
+  // Update target with validation
+  const handleTargetChange = (event: SelectChangeEvent) => {
+    const newTargetId = event.target.value as string;
+    setTargetId(newTargetId);
+    handleSourceTargetChange(sourceId, newTargetId);
+  };
+
+  return (
+    <Dialog
+      open={open}
+      onClose={onClose}
+      maxWidth="sm"
+      fullWidth
+      PaperProps={{
+        sx: {
+          bgcolor: '#242424',
+          color: '#fff',
+          border: '1px solid #333',
+          '& .MuiDialogTitle-root': {
+            color: '#61dafb',
+            borderBottom: '1px solid #333',
+          },
+          '& .MuiDialogContent-root': {
+            bgcolor: '#242424',
+          },
+          '& .MuiDialogActions-root': {
+            bgcolor: '#242424',
+            borderTop: '1px solid #333',
+          },
+          '& .MuiFormControl-root': {
+            '& .MuiInputLabel-root': {
+              color: '#999',
+            },
+            '& .MuiOutlinedInput-root': {
+              color: '#fff',
+              '& fieldset': {
+                borderColor: '#444',
+              },
+              '&:hover fieldset': {
+                borderColor: '#61dafb',
+              },
+              '&.Mui-focused fieldset': {
+                borderColor: '#61dafb',
+              },
+            },
+            '& .MuiSelect-icon': {
+              color: '#61dafb',
+            },
+            '& .MuiMenuItem-root': {
+              color: '#fff',
+              '&:hover': {
+                bgcolor: 'rgba(97, 218, 251, 0.1)',
+              },
+              '&.Mui-selected': {
+                bgcolor: 'rgba(97, 218, 251, 0.2)',
+                '&:hover': {
+                  bgcolor: 'rgba(97, 218, 251, 0.3)',
+                },
+              },
+            },
+          },
+          '& .MuiTextField-root': {
+            '& .MuiInputLabel-root': {
+              color: '#999',
+            },
+            '& .MuiOutlinedInput-root': {
+              color: '#fff',
+              '& fieldset': {
+                borderColor: '#444',
+              },
+              '&:hover fieldset': {
+                borderColor: '#61dafb',
+              },
+              '&.Mui-focused fieldset': {
+                borderColor: '#61dafb',
+              },
+            },
+          },
+          '& .MuiButton-contained': {
+            bgcolor: '#61dafb',
+            color: '#000',
+            '&:hover': {
+              bgcolor: '#4db6d6',
+            },
+            '&:disabled': {
+              bgcolor: '#2a2a2a',
+              color: '#666',
+            },
+          },
+          '& .MuiButton-text': {
+            color: '#fff',
+            '&:hover': {
+              bgcolor: 'rgba(255, 255, 255, 0.1)',
+            },
+          },
+        },
+      }}
+    >
+      <DialogTitle>{t('addMessageDialog.title')}</DialogTitle>
+      <DialogContent>
+        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, my: 2 }}>
+          <FormControl fullWidth>
+            <InputLabel>{t('addMessageDialog.sourceEntity')}</InputLabel>
+            <Select
+              value={sourceId}
+              onChange={handleSourceChange}
+              label={t('addMessageDialog.sourceEntity')}
+              MenuProps={{
+                PaperProps: {
+                  sx: {
+                    bgcolor: '#242424',
+                    border: '1px solid #333',
+                    '& .MuiMenuItem-root': {
+                      color: '#fff',
+                      '&:hover': {
+                        bgcolor: 'rgba(97, 218, 251, 0.1)',
+                      },
+                      '&.Mui-selected': {
+                        bgcolor: 'rgba(97, 218, 251, 0.2)',
+                        '&:hover': {
+                          bgcolor: 'rgba(97, 218, 251, 0.3)',
+                        },
+                      },
+                    },
+                  },
+                },
+              }}
+            >
+              {entities.map((entity) => (
+                <MenuItem key={`source-${entity.id}`} value={entity.id}>
+                  {entity.data.label as string}
+                </MenuItem>
+              ))}
+            </Select>
+          </FormControl>
+
+          <FormControl fullWidth>
+            <InputLabel>{t('addMessageDialog.targetEntity')}</InputLabel>
+            <Select
+              value={targetId}
+              onChange={handleTargetChange}
+              label={t('addMessageDialog.targetEntity')}
+              MenuProps={{
+                PaperProps: {
+                  sx: {
+                    bgcolor: '#242424',
+                    border: '1px solid #333',
+                    '& .MuiMenuItem-root': {
+                      color: '#fff',
+                      '&:hover': {
+                        bgcolor: 'rgba(97, 218, 251, 0.1)',
+                      },
+                      '&.Mui-selected': {
+                        bgcolor: 'rgba(97, 218, 251, 0.2)',
+                        '&:hover': {
+                          bgcolor: 'rgba(97, 218, 251, 0.3)',
+                        },
+                      },
+                    },
+                  },
+                },
+              }}
+            >
+              {entities.map((entity) => (
+                <MenuItem key={`target-${entity.id}`} value={entity.id}>
+                  {entity.data.label as string}
+                </MenuItem>
+              ))}
+            </Select>
+          </FormControl>
+
+          <FormControl fullWidth>
+            <InputLabel>{t('addMessageDialog.messageType')}</InputLabel>
+            <Select
+              value={messageType}
+              onChange={(e) => setMessageType(e.target.value as SequenceMessageType)}
+              label={t('addMessageDialog.messageType')}
+              disabled={sourceId === targetId} // Disable if source = target (force self message)
+              MenuProps={{
+                PaperProps: {
+                  sx: {
+                    bgcolor: '#242424',
+                    border: '1px solid #333',
+                    '& .MuiMenuItem-root': {
+                      color: '#fff',
+                      '&:hover': {
+                        bgcolor: 'rgba(97, 218, 251, 0.1)',
+                      },
+                      '&.Mui-selected': {
+                        bgcolor: 'rgba(97, 218, 251, 0.2)',
+                        '&:hover': {
+                          bgcolor: 'rgba(97, 218, 251, 0.3)',
+                        },
+                      },
+                    },
+                  },
+                },
+              }}
+            >
+              <MenuItem value="sync">{t('sequenceDiagram.messageTypes.synchronous')}</MenuItem>
+              <MenuItem value="async">{t('sequenceDiagram.messageTypes.asynchronous')}</MenuItem>
+              <MenuItem value="return">{t('sequenceDiagram.messageTypes.return')}</MenuItem>
+              <MenuItem value="self">{t('sequenceDiagram.messageTypes.selfMessage')}</MenuItem>
+            </Select>
+          </FormControl>
+
+          <TextField
+            label={t('addMessageDialog.messageLabel')}
+            value={messageLabel}
+            onChange={(e) => setMessageLabel(e.target.value)}
+            fullWidth
+          />
+        </Box>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onClose} color="primary">
+          {t('addMessageDialog.buttons.cancel')}
+        </Button>
+        <Button
+          onClick={handleSubmit}
+          color="primary"
+          variant="contained"
+          disabled={!sourceId || !targetId || !messageLabel}
+        >
+          {t('addMessageDialog.buttons.addMessage')}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default AddMessageDialog;