From 2b5c7d138ef9e708df177a9e49581d2ec636619c Mon Sep 17 00:00:00 2001 From: jasquat Date: Fri, 11 Nov 2022 10:33:57 -0500 Subject: [PATCH] Squashed 'spiffworkflow-frontend/' changes from 3ab257b81..ab6cf2817 ab6cf2817 Merge commit '7a36189cbf9db07b735903625b23ea23b9fa8de7' 55bf14202 pass in perm file for acceptance tests w/ burnettk 6ba87954c Merge branch 'main' into feature/nested-groups-2 86fd7a388 Merge branch 'main' into feature/nested-groups-2 53a56abfa Nested group UI stuff git-subtree-dir: spiffworkflow-frontend git-subtree-split: ab6cf281724b3a63f901506d25baf2f4009d30d0 --- cypress/e2e/process_instances.cy.js | 2 +- src/components/ProcessGroupForm.tsx | 26 ++++++++--- src/components/ProcessModelForm.tsx | 2 +- src/helpers.tsx | 4 +- src/routes/ProcessGroupShow.tsx | 70 ++++++++++++++++++++++++++--- 5 files changed, 88 insertions(+), 16 deletions(-) diff --git a/cypress/e2e/process_instances.cy.js b/cypress/e2e/process_instances.cy.js index a04ebd68..6999acc2 100644 --- a/cypress/e2e/process_instances.cy.js +++ b/cypress/e2e/process_instances.cy.js @@ -165,7 +165,7 @@ describe('process-instances', () => { cy.basicPaginationTest(); }); - it.only('can filter', () => { + it('can filter', () => { cy.getBySel('process-instance-list-link').click(); cy.assertAtLeastOneItemInPaginatedResults(); diff --git a/src/components/ProcessGroupForm.tsx b/src/components/ProcessGroupForm.tsx index 7f83923f..09f2cecc 100644 --- a/src/components/ProcessGroupForm.tsx +++ b/src/components/ProcessGroupForm.tsx @@ -2,7 +2,7 @@ import { useState } from 'react'; import { useNavigate } from 'react-router-dom'; // @ts-ignore import { Button, ButtonSet, Form, Stack, TextInput } from '@carbon/react'; -import { slugifyString } from '../helpers'; +import {modifyProcessModelPath, slugifyString} from '../helpers'; import HttpService from '../services/HttpService'; import { ProcessGroup } from '../interfaces'; import ButtonWithConfirmation from './ButtonWithConfirmation'; @@ -23,10 +23,13 @@ export default function ProcessGroupForm({ useState(false); const [displayNameInvalid, setDisplayNameInvalid] = useState(false); const navigate = useNavigate(); + let newProcessGroupId = processGroup.id; const navigateToProcessGroup = (_result: any) => { - if (processGroup) { - navigate(`/admin/process-groups/${processGroup.id}`); + if (newProcessGroupId) { + navigate( + `/admin/process-groups/${modifyProcessModelPath(newProcessGroupId)}` + ); } }; @@ -40,13 +43,16 @@ export default function ProcessGroupForm({ const deleteProcessGroup = () => { HttpService.makeCallToBackend({ - path: `/process-groups/${processGroup.id}`, + path: `/process-groups/${modifyProcessModelPath(processGroup.id)}`, successCallback: navigateToProcessGroups, httpMethod: 'DELETE', }); }; const handleFormSubmission = (event: any) => { + const searchParams = new URLSearchParams(document.location.search); + const parentGroupId = searchParams.get('parentGroupId'); + event.preventDefault(); let hasErrors = false; if (!hasValidIdentifier(processGroup.id)) { @@ -73,7 +79,17 @@ export default function ProcessGroupForm({ description: processGroup.description, }; if (mode === 'new') { - Object.assign(postBody, { id: processGroup.id }); + console.log(`parentGroupId: ${parentGroupId}`); + console.log(`processGroup.id: ${processGroup.id}`); + if (parentGroupId) { + newProcessGroupId = `${parentGroupId}/${processGroup.id}`; + } + console.log(`newProcessGroupId: ${newProcessGroupId}`); + Object.assign(postBody, { + id: parentGroupId + ? `${parentGroupId}/${processGroup.id}` + : `${processGroup.id}`, + }); } HttpService.makeCallToBackend({ diff --git a/src/components/ProcessModelForm.tsx b/src/components/ProcessModelForm.tsx index 9764bad9..8cca5793 100644 --- a/src/components/ProcessModelForm.tsx +++ b/src/components/ProcessModelForm.tsx @@ -88,7 +88,7 @@ export default function ProcessModelForm({ }; if (mode === 'new') { Object.assign(postBody, { - id: `${processGroupId}/${processModel.id}`, + id: `${processGroupId}:${processModel.id}`, }); } diff --git a/src/helpers.tsx b/src/helpers.tsx index eb5902e3..564c99f1 100644 --- a/src/helpers.tsx +++ b/src/helpers.tsx @@ -116,11 +116,11 @@ export const truncateString = (text: string, len: number) => { // Because of limitations in the way openapi defines parameters, we have to modify process models ids // which are basically paths to the models export const modifyProcessModelPath = (path: string) => { - return path.replace('/', ':') || ''; + return path.replace(/\//g, ':') || ''; }; export const unModifyProcessModelPath = (path: string) => { - return path.replace(':', '/') || ''; + return path.replace(/:/g, '/') || ''; }; export const getGroupFromModifiedModelId = (modifiedId: string) => { diff --git a/src/routes/ProcessGroupShow.tsx b/src/routes/ProcessGroupShow.tsx index 2c6be43c..60127dff 100644 --- a/src/routes/ProcessGroupShow.tsx +++ b/src/routes/ProcessGroupShow.tsx @@ -5,7 +5,7 @@ import { Button, Table, Stack } from '@carbon/react'; import ProcessBreadcrumb from '../components/ProcessBreadcrumb'; import PaginationForTable from '../components/PaginationForTable'; import HttpService from '../services/HttpService'; -import { getPageInfoFromSearchParams } from '../helpers'; +import {getPageInfoFromSearchParams, modifyProcessModelPath, unModifyProcessModelPath} from '../helpers'; import { ProcessGroup } from '../interfaces'; export default function ProcessGroupShow() { @@ -14,6 +14,7 @@ export default function ProcessGroupShow() { const [processGroup, setProcessGroup] = useState(null); const [processModels, setProcessModels] = useState([]); + const [processGroups, setProcessGroups] = useState([]); const [pagination, setPagination] = useState(null); useEffect(() => { @@ -24,12 +25,15 @@ export default function ProcessGroupShow() { setPagination(result.pagination); }; const processResult = (result: any) => { - console.log(result); setProcessGroup(result); + const unmodifiedProcessGroupId = unModifyProcessModelPath( + (params as any).process_group_id + ); HttpService.makeCallToBackend({ - path: `/process-models?process_group_identifier=${params.process_group_id}&per_page=${perPage}&page=${page}`, + path: `/process-models?process_group_identifier=${unmodifiedProcessGroupId}&per_page=${perPage}&page=${page}`, successCallback: setProcessModelFromResult, }); + setProcessGroups(result.process_groups); }; HttpService.makeCallToBackend({ path: `/process-groups/${params.process_group_id}`, @@ -37,7 +41,7 @@ export default function ProcessGroupShow() { }); }, [params, searchParams]); - const buildTable = () => { + const buildModelTable = () => { if (processGroup === null) { return null; } @@ -73,8 +77,45 @@ export default function ProcessGroupShow() { ); }; + const buildGroupTable = () => { + if (processGroup === null) { + return null; + } + const rows = processGroups.map((row) => { + const modifiedProcessGroupId: String = modifyProcessModelPath((row as any).id); + return ( + + + + {(row as any).id} + + + {(row as any).display_name} + + ); + }); + return ( +
+

Process Groups

+ + + + + + + + {rows} +
Process Group IdDisplay Name
+
+ ); + }; + if (processGroup && pagination) { const { page, perPage } = getPageInfoFromSearchParams(searchParams); + const modifiedProcessGroupId = modifyProcessModelPath((processGroup as any).id); return ( <> +