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