add process model file name validation for new files w/ burnettk

This commit is contained in:
jasquat 2023-01-24 11:35:30 -05:00
parent 4e0ddc7ea5
commit c2a4d8480b
2 changed files with 41 additions and 11 deletions

View File

@ -173,6 +173,10 @@ h1.with-icons {
margin-top: 1.3em;
}
.with-top-margin-for-label-next-to-text-input {
margin-top: 2.3em;
}
.with-tiny-top-margin {
margin-top: 4px;
}

View File

@ -14,6 +14,9 @@ import {
Tab,
TabPanels,
TabPanel,
TextInput,
Grid,
Column,
// @ts-ignore
} from '@carbon/react';
import Row from 'react-bootstrap/Row';
@ -60,6 +63,8 @@ export default function ProcessModelEditDiagram() {
const [processes, setProcesses] = useState<ProcessReference[]>([]);
const [displaySaveFileMessage, setDisplaySaveFileMessage] =
useState<boolean>(false);
const [processModelFileInvalidText, setProcessModelFileInvalidText] =
useState<string>('');
const handleShowMarkdownEditor = () => setShowMarkdownEditor(true);
@ -160,6 +165,7 @@ export default function ProcessModelEditDiagram() {
const handleFileNameCancel = () => {
setShowFileNameEditor(false);
setNewFileName('');
setProcessModelFileInvalidText('');
};
const navigateToProcessModelFile = (_result: any) => {
@ -251,6 +257,11 @@ export default function ProcessModelEditDiagram() {
const handleFileNameSave = (event: any) => {
event.preventDefault();
if (!newFileName) {
setProcessModelFileInvalidText('Process Model file name is required.');
return;
}
setProcessModelFileInvalidText('');
setShowFileNameEditor(false);
saveDiagram(bpmnXmlForDiagramRendering);
};
@ -267,17 +278,32 @@ export default function ProcessModelEditDiagram() {
onRequestSubmit={handleFileNameSave}
onRequestClose={handleFileNameCancel}
>
<label>File Name:</label>
<span>
<input
name="file_name"
type="text"
value={newFileName}
onChange={(e) => setNewFileName(e.target.value)}
autoFocus
/>
{fileExtension}
</span>
<Grid
condensed
fullWidth
className="megacondensed process-model-files-section"
>
<Column md={4} lg={8} sm={4}>
<TextInput
id="process_model_file_name"
labelText="File Name:"
value={newFileName}
onChange={(e: any) => setNewFileName(e.target.value)}
invalidText={processModelFileInvalidText}
invalid={!!processModelFileInvalidText}
size="sm"
autoFocus
/>
</Column>
<Column
md={4}
lg={8}
sm={4}
className="with-top-margin-for-label-next-to-text-input"
>
{fileExtension}
</Column>
</Grid>
</Modal>
);
};