make Files half-width and add link to file

This commit is contained in:
burnettk 2022-11-09 21:24:51 -05:00
parent e87b954793
commit 0530c63c75

View File

@ -13,6 +13,8 @@ import {
Accordion, Accordion,
AccordionItem, AccordionItem,
Button, Button,
Grid,
Column,
Stack, Stack,
ButtonSet, ButtonSet,
Modal, Modal,
@ -233,17 +235,22 @@ export default function ProcessModelShow() {
}); });
}; };
const navigateToFileEdit = (processModelFile: ProcessFile) => { const profileModelFileEditUrl = (processModelFile: ProcessFile) => {
if (processModel) { if (processModel) {
if (processModelFile.name.match(/\.(dmn|bpmn)$/)) { if (processModelFile.name.match(/\.(dmn|bpmn)$/)) {
navigate( return `/admin/process-models/${modifiedProcessModelId}/files/${processModelFile.name}`;
`/admin/process-models/${modifiedProcessModelId}/files/${processModelFile.name}`
);
} else if (processModelFile.name.match(/\.(json|md)$/)) {
navigate(
`/admin/process-models/${modifiedProcessModelId}/form/${processModelFile.name}`
);
} }
if (processModelFile.name.match(/\.(json|md)$/)) {
return `/admin/process-models/${modifiedProcessModelId}/form/${processModelFile.name}`;
}
}
return null;
};
const navigateToFileEdit = (processModelFile: ProcessFile) => {
const url = profileModelFileEditUrl(processModelFile);
if (url) {
navigate(url);
} }
}; };
@ -324,10 +331,15 @@ export default function ProcessModelShow() {
if (isPrimaryBpmnFile) { if (isPrimaryBpmnFile) {
primarySuffix = '- Primary File'; primarySuffix = '- Primary File';
} }
let fileLink = null;
const fileUrl = profileModelFileEditUrl(processModelFile);
if (fileUrl) {
fileLink = <Link to={fileUrl}>{processModelFile.name}</Link>;
}
constructedTag = ( constructedTag = (
<TableRow key={processModelFile.name}> <TableRow key={processModelFile.name}>
<TableCell key={`${processModelFile.name}-cell`}> <TableCell key={`${processModelFile.name}-cell`}>
{processModelFile.name} {fileLink}
{primarySuffix} {primarySuffix}
</TableCell> </TableCell>
{actionsTableCell} {actionsTableCell}
@ -440,63 +452,67 @@ export default function ProcessModelShow() {
return null; return null;
} }
return ( return (
<Accordion> <Grid fullWidth>
<AccordionItem <Column md={4} lg={8}>
data-qa="files-accordion" <Accordion align="end">
title={ <AccordionItem
<Stack orientation="horizontal"> data-qa="files-accordion"
<span> title={
<Button size="sm" kind="ghost"> <Stack orientation="horizontal">
Files <span>
<Button size="sm" kind="ghost">
Files
</Button>
</span>
</Stack>
}
>
<ButtonSet>
<Button
renderIcon={Upload}
data-qa="upload-file-button"
onClick={() => setShowFileUploadModal(true)}
size="sm"
kind=""
className="button-white-background"
>
Upload File
</Button> </Button>
</span> <Button
</Stack> renderIcon={Add}
} href={`/admin/process-models/${modifiedProcessModelId}/files?file_type=bpmn`}
> size="sm"
<ButtonSet> >
<Button New BPMN File
renderIcon={Upload} </Button>
data-qa="upload-file-button" <Button
onClick={() => setShowFileUploadModal(true)} renderIcon={Add}
size="sm" href={`/admin/process-models/${modifiedProcessModelId}/files?file_type=dmn`}
kind="" size="sm"
className="button-white-background" >
> New DMN File
Upload File </Button>
</Button> <Button
<Button renderIcon={Add}
renderIcon={Add} href={`/admin/process-models/${modifiedProcessModelId}/form?file_ext=json`}
href={`/admin/process-models/${modifiedProcessModelId}/files?file_type=bpmn`} size="sm"
size="sm" >
> New JSON File
New BPMN File </Button>
</Button> <Button
<Button renderIcon={Add}
renderIcon={Add} href={`/admin/process-models/${modifiedProcessModelId}/form?file_ext=md`}
href={`/admin/process-models/${modifiedProcessModelId}/files?file_type=dmn`} size="sm"
size="sm" >
> New Markdown File
New DMN File </Button>
</Button> </ButtonSet>
<Button <br />
renderIcon={Add} {processModelFileList()}
href={`/admin/process-models/${modifiedProcessModelId}/form?file_ext=json`} </AccordionItem>
size="sm" </Accordion>
> </Column>
New JSON File </Grid>
</Button>
<Button
renderIcon={Add}
href={`/admin/process-models/${modifiedProcessModelId}/form?file_ext=md`}
size="sm"
>
New Markdown File
</Button>
</ButtonSet>
<br />
{processModelFileList()}
</AccordionItem>
</Accordion>
); );
}; };