allow markdown uploads and add some different ux options for adding files
This commit is contained in:
burnettk
parent
8befc5092f
commit
e5a37b3cfe
|
|
@ -1,12 +1,11 @@
|
|||
import { useEffect, useState } from 'react';
|
||||
import { Link, useNavigate, useParams } from 'react-router-dom';
|
||||
import {
|
||||
Add,
|
||||
Download,
|
||||
Edit,
|
||||
Favorite,
|
||||
TrashCan,
|
||||
Upload,
|
||||
NextOutline,
|
||||
View,
|
||||
// @ts-ignore
|
||||
} from '@carbon/icons-react';
|
||||
|
|
@ -14,8 +13,8 @@ import {
|
|||
Accordion,
|
||||
AccordionItem,
|
||||
Button,
|
||||
ButtonSet,
|
||||
Column,
|
||||
Dropdown,
|
||||
FileUploader,
|
||||
Grid,
|
||||
Modal,
|
||||
|
|
@ -106,6 +105,12 @@ export default function ProcessModelShow() {
|
|||
});
|
||||
}, [reloadModel, modifiedProcessModelId]);
|
||||
|
||||
// these options are just here as a sort of A/B test to see which UX is better.
|
||||
// they will be removed once we learn which UX to go with.
|
||||
const newUx1 = true;
|
||||
const newUx2 = false;
|
||||
const newUx2PublishAsIcon = false;
|
||||
|
||||
const processInstanceRunResultTag = () => {
|
||||
if (processInstance) {
|
||||
return (
|
||||
|
|
@ -483,13 +488,13 @@ export default function ProcessModelShow() {
|
|||
>
|
||||
<FileUploader
|
||||
labelTitle="Upload files"
|
||||
labelDescription="Max file size is 500mb. Only .bpmn, .dmn, and .json files are supported."
|
||||
labelDescription="Max file size is 500mb. Only .bpmn, .dmn, .json, and .md files are supported."
|
||||
buttonLabel="Add file"
|
||||
buttonKind="primary"
|
||||
size="md"
|
||||
filenameStatus="edit"
|
||||
role="button"
|
||||
accept={['.bpmn', '.dmn', '.json']}
|
||||
accept={['.bpmn', '.dmn', '.json', '.md']}
|
||||
disabled={false}
|
||||
iconDescription="Delete file"
|
||||
name=""
|
||||
|
|
@ -501,6 +506,53 @@ export default function ProcessModelShow() {
|
|||
);
|
||||
};
|
||||
|
||||
const items = [
|
||||
'Upload File',
|
||||
'New BPMN File',
|
||||
'New DMN File',
|
||||
'New JSON File',
|
||||
'New Markdown File',
|
||||
].map((item) => ({
|
||||
text: item,
|
||||
}));
|
||||
|
||||
const addFileComponent = () => {
|
||||
return (
|
||||
<Dropdown
|
||||
id="inline"
|
||||
titleText=""
|
||||
size="lg"
|
||||
label="Add File"
|
||||
type="inline"
|
||||
onChange={(a: any) => {
|
||||
if (a.selectedItem.text === 'New BPMN File') {
|
||||
navigate(
|
||||
`/admin/process-models/${modifiedProcessModelId}/files?file_type=bpmn`
|
||||
);
|
||||
} else if (a.selectedItem.text === 'Upload File') {
|
||||
setShowFileUploadModal(true);
|
||||
} else if (a.selectedItem.text === 'New DMN File') {
|
||||
navigate(
|
||||
`/admin/process-models/${modifiedProcessModelId}/files?file_type=dmn`
|
||||
);
|
||||
} else if (a.selectedItem.text === 'New JSON File') {
|
||||
navigate(
|
||||
`/admin/process-models/${modifiedProcessModelId}/form?file_ext=json`
|
||||
);
|
||||
} else if (a.selectedItem.text === 'New Markdown File') {
|
||||
navigate(
|
||||
`/admin/process-models/${modifiedProcessModelId}/form?file_ext=md`
|
||||
);
|
||||
} else {
|
||||
console.log('a.selectedItem.text', a.selectedItem.text);
|
||||
}
|
||||
}}
|
||||
items={items}
|
||||
itemToString={(item: any) => (item ? item.text : '')}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const processModelFilesSection = () => {
|
||||
return (
|
||||
<Grid
|
||||
|
|
@ -531,46 +583,7 @@ export default function ProcessModelShow() {
|
|||
a={targetUris.processModelFileCreatePath}
|
||||
ability={ability}
|
||||
>
|
||||
<ButtonSet>
|
||||
<Button
|
||||
renderIcon={Upload}
|
||||
data-qa="upload-file-button"
|
||||
onClick={() => setShowFileUploadModal(true)}
|
||||
size="sm"
|
||||
kind=""
|
||||
className="button-white-background"
|
||||
>
|
||||
Upload File
|
||||
</Button>
|
||||
<Button
|
||||
renderIcon={Add}
|
||||
href={`/admin/process-models/${modifiedProcessModelId}/files?file_type=bpmn`}
|
||||
size="sm"
|
||||
>
|
||||
New BPMN File
|
||||
</Button>
|
||||
<Button
|
||||
renderIcon={Add}
|
||||
href={`/admin/process-models/${modifiedProcessModelId}/files?file_type=dmn`}
|
||||
size="sm"
|
||||
>
|
||||
New DMN File
|
||||
</Button>
|
||||
<Button
|
||||
renderIcon={Add}
|
||||
href={`/admin/process-models/${modifiedProcessModelId}/form?file_ext=json`}
|
||||
size="sm"
|
||||
>
|
||||
New JSON File
|
||||
</Button>
|
||||
<Button
|
||||
renderIcon={Add}
|
||||
href={`/admin/process-models/${modifiedProcessModelId}/form?file_ext=md`}
|
||||
size="sm"
|
||||
>
|
||||
New Markdown File
|
||||
</Button>
|
||||
</ButtonSet>
|
||||
{newUx1 && addFileComponent()}
|
||||
<br />
|
||||
</Can>
|
||||
{processModelFileList()}
|
||||
|
|
@ -642,6 +655,22 @@ export default function ProcessModelShow() {
|
|||
confirmButtonLabel="Delete"
|
||||
/>
|
||||
</Can>
|
||||
{newUx2PublishAsIcon && (
|
||||
<Can
|
||||
I="POST"
|
||||
a={targetUris.processModelPublishPath}
|
||||
ability={ability}
|
||||
>
|
||||
<Button
|
||||
kind="ghost"
|
||||
data-qa="publish-process-model-button"
|
||||
renderIcon={NextOutline}
|
||||
iconDescription="Publish Changes"
|
||||
hasIconOnly
|
||||
onClick={publishProcessModel}
|
||||
/>
|
||||
</Can>
|
||||
)}
|
||||
</Stack>
|
||||
<p className="process-description">{processModel.description}</p>
|
||||
<Stack orientation="horizontal" gap={3}>
|
||||
|
|
@ -664,9 +693,27 @@ export default function ProcessModelShow() {
|
|||
a={targetUris.processModelPublishPath}
|
||||
ability={ability}
|
||||
>
|
||||
<Button disabled={publishDisabled} onClick={publishProcessModel}>
|
||||
Publish Changes
|
||||
</Button>
|
||||
{!newUx2PublishAsIcon ? (
|
||||
<Can
|
||||
I="POST"
|
||||
a={targetUris.processModelPublishPath}
|
||||
ability={ability}
|
||||
>
|
||||
<Button
|
||||
disabled={publishDisabled}
|
||||
onClick={publishProcessModel}
|
||||
>
|
||||
Publish Changes
|
||||
</Button>
|
||||
</Can>
|
||||
) : null}
|
||||
<Can
|
||||
I="POST"
|
||||
a={targetUris.processModelFileCreatePath}
|
||||
ability={ability}
|
||||
>
|
||||
{newUx2 ? addFileComponent() : null}
|
||||
</Can>
|
||||
</Can>
|
||||
<Can I="POST" a={targetUris.processModelTestsPath} ability={ability}>
|
||||
{hasTestCaseFiles ? (
|
||||
|
|
|
|||
Loading…
Reference in New Issue