moved delete and edit model and group buttons to icons on show pages w/ burnettk cullerton
This commit is contained in:
parent
fa1dd2d6d0
commit
148964b55d
|
@ -5,7 +5,6 @@ import { Button, ButtonSet, Form, Stack, TextInput } from '@carbon/react';
|
|||
import { modifyProcessIdentifierForPathParam, slugifyString } from '../helpers';
|
||||
import HttpService from '../services/HttpService';
|
||||
import { ProcessGroup } from '../interfaces';
|
||||
import ButtonWithConfirmation from './ButtonWithConfirmation';
|
||||
|
||||
type OwnProps = {
|
||||
mode: string;
|
||||
|
@ -35,24 +34,10 @@ export default function ProcessGroupForm({
|
|||
}
|
||||
};
|
||||
|
||||
const navigateToProcessGroups = (_result: any) => {
|
||||
navigate(`/admin/process-groups`);
|
||||
};
|
||||
|
||||
const hasValidIdentifier = (identifierToCheck: string) => {
|
||||
return identifierToCheck.match(/^[a-z0-9][0-9a-z-]+[a-z0-9]$/);
|
||||
};
|
||||
|
||||
const deleteProcessGroup = () => {
|
||||
HttpService.makeCallToBackend({
|
||||
path: `/process-groups/${modifyProcessIdentifierForPathParam(
|
||||
processGroup.id
|
||||
)}`,
|
||||
successCallback: navigateToProcessGroups,
|
||||
httpMethod: 'DELETE',
|
||||
});
|
||||
};
|
||||
|
||||
const handleFormSubmission = (event: any) => {
|
||||
const searchParams = new URLSearchParams(document.location.search);
|
||||
const parentGroupId = searchParams.get('parentGroupId');
|
||||
|
@ -172,17 +157,6 @@ export default function ProcessGroupForm({
|
|||
|
||||
const formButtons = () => {
|
||||
const buttons = [<Button type="submit">Submit</Button>];
|
||||
if (mode === 'edit') {
|
||||
buttons.push(
|
||||
<ButtonWithConfirmation
|
||||
data-qa="delete-process-group-button"
|
||||
description={`Delete Process Group ${processGroup.id}?`}
|
||||
onConfirmation={deleteProcessGroup}
|
||||
buttonLabel="Delete"
|
||||
confirmButtonLabel="Delete"
|
||||
/>
|
||||
);
|
||||
}
|
||||
return <ButtonSet>{buttons}</ButtonSet>;
|
||||
};
|
||||
|
||||
|
|
|
@ -56,6 +56,7 @@ type OwnProps = {
|
|||
processModelFullIdentifier?: string;
|
||||
paginationQueryParamPrefix?: string;
|
||||
perPageOptions?: number[];
|
||||
showReports?: boolean;
|
||||
};
|
||||
|
||||
interface dateParameters {
|
||||
|
@ -67,6 +68,7 @@ export default function ProcessInstanceListTable({
|
|||
processModelFullIdentifier,
|
||||
paginationQueryParamPrefix,
|
||||
perPageOptions,
|
||||
showReports = true,
|
||||
}: OwnProps) {
|
||||
const params = useParams();
|
||||
const [searchParams] = useSearchParams();
|
||||
|
@ -704,12 +706,15 @@ export default function ProcessInstanceListTable({
|
|||
};
|
||||
|
||||
const reportSearchComponent = () => {
|
||||
if (showReports) {
|
||||
return (
|
||||
<ProcessInstanceReportSearch
|
||||
onChange={processInstanceReportDidChange}
|
||||
selectedItem={processInstanceReportSelection}
|
||||
/>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
const filterComponent = () => {
|
||||
|
|
|
@ -1,5 +1,15 @@
|
|||
import { useEffect, useState } from 'react';
|
||||
import { Link, useSearchParams, useParams } from 'react-router-dom';
|
||||
import {
|
||||
Link,
|
||||
useSearchParams,
|
||||
useParams,
|
||||
useNavigate,
|
||||
} from 'react-router-dom';
|
||||
import {
|
||||
TrashCan,
|
||||
Edit,
|
||||
// @ts-ignore
|
||||
} from '@carbon/icons-react';
|
||||
// @ts-ignore
|
||||
import { Button, Table, Stack } from '@carbon/react';
|
||||
import { Can } from '@casl/react';
|
||||
|
@ -20,11 +30,13 @@ import {
|
|||
import { useUriListForPermissions } from '../hooks/UriListForPermissions';
|
||||
import { usePermissionFetcher } from '../hooks/PermissionService';
|
||||
import ProcessGroupListTiles from '../components/ProcessGroupListTiles';
|
||||
import ButtonWithConfirmation from '../components/ButtonWithConfirmation';
|
||||
// import ProcessModelListTiles from '../components/ProcessModelListTiles';
|
||||
|
||||
export default function ProcessGroupShow() {
|
||||
const params = useParams();
|
||||
const [searchParams] = useSearchParams();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const [processGroup, setProcessGroup] = useState<ProcessGroup | null>(null);
|
||||
const [processModels, setProcessModels] = useState([]);
|
||||
|
@ -34,7 +46,7 @@ export default function ProcessGroupShow() {
|
|||
const { targetUris } = useUriListForPermissions();
|
||||
const permissionRequestData: PermissionsToCheck = {
|
||||
[targetUris.processGroupListPath]: ['POST'],
|
||||
[targetUris.processGroupShowPath]: ['PUT'],
|
||||
[targetUris.processGroupShowPath]: ['PUT', 'DELETE'],
|
||||
[targetUris.processModelCreatePath]: ['POST'],
|
||||
};
|
||||
const { ability } = usePermissionFetcher(permissionRequestData);
|
||||
|
@ -99,6 +111,22 @@ export default function ProcessGroupShow() {
|
|||
);
|
||||
};
|
||||
|
||||
const navigateToProcessGroups = (_result: any) => {
|
||||
navigate(`/admin/process-groups`);
|
||||
};
|
||||
|
||||
const deleteProcessGroup = () => {
|
||||
if (processGroup) {
|
||||
HttpService.makeCallToBackend({
|
||||
path: `/process-groups/${modifyProcessIdentifierForPathParam(
|
||||
processGroup.id
|
||||
)}`,
|
||||
successCallback: navigateToProcessGroups,
|
||||
httpMethod: 'DELETE',
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
if (processGroup && modelPagination) {
|
||||
const { page, perPage } = getPageInfoFromSearchParams(searchParams);
|
||||
const modifiedProcessGroupId = modifyProcessIdentifierForPathParam(
|
||||
|
@ -112,7 +140,35 @@ export default function ProcessGroupShow() {
|
|||
['', `process_group:${processGroup.id}`],
|
||||
]}
|
||||
/>
|
||||
<h1>Process Group: {processGroup.display_name}</h1>
|
||||
<Stack orientation="horizontal" gap={1}>
|
||||
<h1 className="with-icons">
|
||||
Process Group: {processGroup.display_name}
|
||||
</h1>
|
||||
<Can I="PUT" a={targetUris.processGroupShowPath} ability={ability}>
|
||||
<Button
|
||||
kind="ghost"
|
||||
data-qa="edit-process-group-button"
|
||||
renderIcon={Edit}
|
||||
iconDescription="Edit Process Group"
|
||||
hasIconOnly
|
||||
href={`/admin/process-groups/${modifiedProcessGroupId}/edit`}
|
||||
>
|
||||
Edit process group
|
||||
</Button>
|
||||
</Can>
|
||||
<Can I="DELETE" a={targetUris.processGroupShowPath} ability={ability}>
|
||||
<ButtonWithConfirmation
|
||||
kind="ghost"
|
||||
data-qa="delete-process-group-button"
|
||||
renderIcon={TrashCan}
|
||||
iconDescription="Delete Process Group"
|
||||
hasIconOnly
|
||||
description={`Delete process group: ${processGroup.display_name}`}
|
||||
onConfirmation={deleteProcessGroup}
|
||||
confirmButtonLabel="Delete"
|
||||
/>
|
||||
</Can>
|
||||
</Stack>
|
||||
<p className="process-description">{processGroup.description}</p>
|
||||
<ul>
|
||||
<Stack orientation="horizontal" gap={3}>
|
||||
|
@ -134,13 +190,6 @@ export default function ProcessGroupShow() {
|
|||
Add a process model
|
||||
</Button>
|
||||
</Can>
|
||||
<Can I="PUT" a={targetUris.processGroupShowPath} ability={ability}>
|
||||
<Button
|
||||
href={`/admin/process-groups/${modifiedProcessGroupId}/edit`}
|
||||
>
|
||||
Edit process group
|
||||
</Button>
|
||||
</Can>
|
||||
</Stack>
|
||||
<br />
|
||||
<br />
|
||||
|
|
|
@ -563,7 +563,18 @@ export default function ProcessModelShow() {
|
|||
<h1 className="with-icons">
|
||||
Process Model: {processModel.display_name}
|
||||
</h1>
|
||||
|
||||
<Can I="PUT" a={targetUris.processModelShowPath} ability={ability}>
|
||||
<Button
|
||||
kind="ghost"
|
||||
data-qa="edit-process-model-button"
|
||||
renderIcon={Edit}
|
||||
iconDescription="Edit Process Model"
|
||||
hasIconOnly
|
||||
href={`/admin/process-models/${modifiedProcessModelId}/edit`}
|
||||
>
|
||||
Edit process model
|
||||
</Button>
|
||||
</Can>
|
||||
<Can I="DELETE" a={targetUris.processModelShowPath} ability={ability}>
|
||||
<ButtonWithConfirmation
|
||||
kind="ghost"
|
||||
|
@ -589,14 +600,6 @@ export default function ProcessModelShow() {
|
|||
onSuccessCallback={setProcessInstance}
|
||||
/>
|
||||
</Can>
|
||||
<Can I="PUT" a={targetUris.processModelShowPath} ability={ability}>
|
||||
<Button
|
||||
href={`/admin/process-models/${modifiedProcessModelId}/edit`}
|
||||
variant="secondary"
|
||||
>
|
||||
Edit process model
|
||||
</Button>
|
||||
</Can>
|
||||
</Stack>
|
||||
<br />
|
||||
<br />
|
||||
|
@ -608,6 +611,7 @@ export default function ProcessModelShow() {
|
|||
filtersEnabled={false}
|
||||
processModelFullIdentifier={processModel.id}
|
||||
perPageOptions={[2, 5, 25]}
|
||||
showReports={false}
|
||||
/>
|
||||
<br />
|
||||
</Can>
|
||||
|
|
Loading…
Reference in New Issue