From 155f07d7230f94b7b0032256a4ddba20928c98a9 Mon Sep 17 00:00:00 2001 From: jasquat <2487833+jasquat@users.noreply.github.com> Date: Thu, 9 Nov 2023 10:49:26 -0500 Subject: [PATCH] Feature/first five minutes (#601) * added helpful text if no process groups and models, do not show start button on model tile if no primary file, and do not make unnecessary calls in ListTiles when we already have the info w/ burnettk * added some help text to process model show page if not files are there w/ burnettk --------- Co-authored-by: jasquat --- .../src/components/ProcessGroupListTiles.tsx | 35 +++++--- .../src/components/ProcessModelListTiles.tsx | 57 ++++++++---- .../src/routes/ProcessGroupList.tsx | 10 ++- .../src/routes/ProcessGroupShow.tsx | 90 +++---------------- .../src/routes/ProcessModelShow.tsx | 63 ++++++++----- 5 files changed, 122 insertions(+), 133 deletions(-) diff --git a/spiffworkflow-frontend/src/components/ProcessGroupListTiles.tsx b/spiffworkflow-frontend/src/components/ProcessGroupListTiles.tsx index a1e5c837d..60829366e 100644 --- a/spiffworkflow-frontend/src/components/ProcessGroupListTiles.tsx +++ b/spiffworkflow-frontend/src/components/ProcessGroupListTiles.tsx @@ -16,13 +16,17 @@ import { } from '../helpers'; type OwnProps = { + defaultProcessGroups?: ProcessGroup[]; processGroup?: ProcessGroup; headerElement?: ReactElement; + showNoItemsDisplayText?: boolean; }; export default function ProcessGroupListTiles({ + defaultProcessGroups, processGroup, headerElement, + showNoItemsDisplayText, }: OwnProps) { const [searchParams] = useSearchParams(); @@ -34,15 +38,20 @@ export default function ProcessGroupListTiles({ const setProcessGroupsFromResult = (result: any) => { setProcessGroups(result.results); }; - let queryParams = '?per_page=1000'; - if (processGroup) { - queryParams = `${queryParams}&process_group_identifier=${processGroup.id}`; + + if (defaultProcessGroups) { + setProcessGroups(defaultProcessGroups); + } else { + let queryParams = '?per_page=1000'; + if (processGroup) { + queryParams = `${queryParams}&process_group_identifier=${processGroup.id}`; + } + HttpService.makeCallToBackend({ + path: `/process-groups${queryParams}`, + successCallback: setProcessGroupsFromResult, + }); } - HttpService.makeCallToBackend({ - path: `/process-groups${queryParams}`, - successCallback: setProcessGroupsFromResult, - }); - }, [searchParams, processGroup]); + }, [searchParams, processGroup, defaultProcessGroups]); const processGroupDirectChildrenCount = (pg: ProcessGroup) => { return (pg.process_models || []).length + (pg.process_groups || []).length; @@ -76,13 +85,19 @@ export default function ProcessGroupListTiles({ ); }); } else { - displayText =

No Groups To Display

; + displayText = ( +

+ There are no process groups to display. You can add one by clicking + the "Add a process group" button. Process groups can contain + additional process groups and / or process models. +

+ ); } return displayText; }; const processGroupArea = () => { - if (processGroups && (!processGroup || processGroups.length > 0)) { + if (processGroups && (showNoItemsDisplayText || processGroups.length > 0)) { return ( <> {headerElement} diff --git a/spiffworkflow-frontend/src/components/ProcessModelListTiles.tsx b/spiffworkflow-frontend/src/components/ProcessModelListTiles.tsx index 5c55b5ec7..d69787f0b 100644 --- a/spiffworkflow-frontend/src/components/ProcessModelListTiles.tsx +++ b/spiffworkflow-frontend/src/components/ProcessModelListTiles.tsx @@ -13,15 +13,21 @@ import { import ProcessInstanceRun from './ProcessInstanceRun'; type OwnProps = { + defaultProcessModels?: ProcessModel[]; headerElement?: ReactElement; processGroup?: ProcessGroup; checkPermissions?: boolean; + onLoadFunction?: Function; + showNoItemsDisplayText?: boolean; }; export default function ProcessModelListTiles({ + defaultProcessModels, headerElement, processGroup, checkPermissions = true, + onLoadFunction, + showNoItemsDisplayText, }: OwnProps) { const [searchParams] = useSearchParams(); const [processModels, setProcessModels] = useState( @@ -31,19 +37,27 @@ export default function ProcessModelListTiles({ useEffect(() => { const setProcessModelsFromResult = (result: any) => { setProcessModels(result.results); + if (onLoadFunction) { + onLoadFunction(result); + } }; - // only allow 10 for now until we get the backend only returning certain models for user execution - let queryParams = '?per_page=1000'; - if (processGroup) { - queryParams = `${queryParams}&process_group_identifier=${processGroup.id}`; + + if (defaultProcessModels) { + setProcessModels(defaultProcessModels); } else { - queryParams = `${queryParams}&recursive=true&filter_runnable_by_user=true`; + // only allow 10 for now until we get the backend only returning certain models for user execution + let queryParams = '?per_page=1000'; + if (processGroup) { + queryParams = `${queryParams}&process_group_identifier=${processGroup.id}`; + } else { + queryParams = `${queryParams}&recursive=true&filter_runnable_by_user=true`; + } + HttpService.makeCallToBackend({ + path: `/process-models${queryParams}`, + successCallback: setProcessModelsFromResult, + }); } - HttpService.makeCallToBackend({ - path: `/process-models${queryParams}`, - successCallback: setProcessModelsFromResult, - }); - }, [searchParams, processGroup]); + }, [searchParams, processGroup, onLoadFunction, defaultProcessModels]); const processModelsDisplayArea = () => { let displayText = null; @@ -69,23 +83,32 @@ export default function ProcessModelListTiles({

{truncateString(row.description || '', 100)}

- + {row.primary_file_name ? ( + + ) : null} ); }); } else { - displayText =

No Models To Display

; + displayText = ( +

+ There are no process models to display. You can add one by clicking + the "Add a process model" button. Process models will + contain the bpmn diagrams and supporting files needed to create a + runnable workflow. +

+ ); } return displayText; }; const processModelArea = () => { - if (processModels && processModels.length > 0) { + if (processModels && (showNoItemsDisplayText || processModels.length > 0)) { return ( <> {headerElement} diff --git a/spiffworkflow-frontend/src/routes/ProcessGroupList.tsx b/spiffworkflow-frontend/src/routes/ProcessGroupList.tsx index 675e01579..2840c05bd 100644 --- a/spiffworkflow-frontend/src/routes/ProcessGroupList.tsx +++ b/spiffworkflow-frontend/src/routes/ProcessGroupList.tsx @@ -1,5 +1,5 @@ import { useEffect, useState } from 'react'; -import { useNavigate, useSearchParams } from 'react-router-dom'; +import { useNavigate } from 'react-router-dom'; import { Button, // @ts-ignore @@ -15,7 +15,6 @@ import ProcessModelSearch from '../components/ProcessModelSearch'; import ProcessGroupListTiles from '../components/ProcessGroupListTiles'; export default function ProcessGroupList() { - const [searchParams] = useSearchParams(); const navigate = useNavigate(); const [processModelAvailableItems, setProcessModelAvailableItems] = useState( @@ -43,9 +42,12 @@ export default function ProcessGroupList() { successCallback: processResultForProcessModels, }); setPageTitle(['Process Groups']); - }, [searchParams]); + }, []); const processModelSearchArea = () => { + if (processModelAvailableItems.length < 1) { + return null; + } const processModelSearchOnChange = (selection: CarbonComboBoxSelection) => { const processModel = selection.selectedItem; navigate( @@ -77,7 +79,7 @@ export default function ProcessGroupList() {
{processModelSearchArea()}
- + ); } diff --git a/spiffworkflow-frontend/src/routes/ProcessGroupShow.tsx b/spiffworkflow-frontend/src/routes/ProcessGroupShow.tsx index ca96e8585..e676173c9 100644 --- a/spiffworkflow-frontend/src/routes/ProcessGroupShow.tsx +++ b/spiffworkflow-frontend/src/routes/ProcessGroupShow.tsx @@ -1,10 +1,5 @@ import { useEffect, useState } from 'react'; -import { - // Link, - useSearchParams, - useParams, - useNavigate, -} from 'react-router-dom'; +import { useParams, useNavigate } from 'react-router-dom'; import { TrashCan, Edit, @@ -15,14 +10,8 @@ import { Button, Stack } from '@carbon/react'; import { Can } from '@casl/react'; import ProcessBreadcrumb from '../components/ProcessBreadcrumb'; import HttpService from '../services/HttpService'; +import { modifyProcessIdentifierForPathParam, setPageTitle } from '../helpers'; import { - getPageInfoFromSearchParams, - modifyProcessIdentifierForPathParam, - unModifyProcessIdentifierForPathParam, - setPageTitle, -} from '../helpers'; -import { - PaginationObject, PermissionsToCheck, ProcessGroup, // ProcessModel, @@ -35,13 +24,9 @@ import ProcessModelListTiles from '../components/ProcessModelListTiles'; export default function ProcessGroupShow() { const params = useParams(); - const [searchParams] = useSearchParams(); const navigate = useNavigate(); const [processGroup, setProcessGroup] = useState(null); - // const [processModels, setProcessModels] = useState([]); - const [modelPagination, setModelPagination] = - useState(null); const { targetUris } = useUriListForPermissions(); const permissionRequestData: PermissionsToCheck = { @@ -52,65 +37,15 @@ export default function ProcessGroupShow() { const { ability } = usePermissionFetcher(permissionRequestData); useEffect(() => { - const { page, perPage } = getPageInfoFromSearchParams(searchParams); - - const setProcessModelFromResult = (result: any) => { - // setProcessModels(result.results); - setModelPagination(result.pagination); - }; const processResult = (result: any) => { setProcessGroup(result); setPageTitle([result.display_name]); - const unmodifiedProcessGroupId = unModifyProcessIdentifierForPathParam( - (params as any).process_group_id - ); - HttpService.makeCallToBackend({ - path: `/process-models?process_group_identifier=${unmodifiedProcessGroupId}&per_page=${perPage}&page=${page}`, - successCallback: setProcessModelFromResult, - }); }; HttpService.makeCallToBackend({ path: `/process-groups/${params.process_group_id}`, successCallback: processResult, }); - }, [params, searchParams]); - - // const buildModelTable = () => { - // if (processGroup === null) { - // return null; - // } - // const rows = processModels.map((row: ProcessModel) => { - // const modifiedProcessModelId: String = - // modifyProcessIdentifierForPathParam((row as any).id); - // return ( - // - // - // - // {row.id} - // - // - // {row.display_name} - // - // ); - // }); - // return ( - //
- //

Process Models

- // - // - // - // - // - // - // - // {rows} - //
Process Model IdDisplay Name
- //
- // ); - // }; + }, [params.process_group_id]); const navigateToProcessGroups = (_result: any) => { navigate(`/process-groups`); @@ -128,11 +63,13 @@ export default function ProcessGroupShow() { } }; - if (processGroup && modelPagination) { - // const { page, perPage } = getPageInfoFromSearchParams(searchParams); + if (processGroup) { const modifiedProcessGroupId = modifyProcessIdentifierForPathParam( processGroup.id ); + const showNoItemsDisplayText = + (processGroup.process_groups || []).length < 1 && + (processGroup.process_models || []).length < 1; return ( <> Process Models} processGroup={processGroup} + defaultProcessModels={processGroup.process_models} + showNoItemsDisplayText={showNoItemsDisplayText} /> - {/* eslint-disable-next-line sonarjs/no-gratuitous-expressions */} - {/* {modelPagination && modelPagination.total > 0 && ( - - )} */}

Process Groups} + defaultProcessGroups={processGroup.process_groups} + showNoItemsDisplayText={showNoItemsDisplayText} /> diff --git a/spiffworkflow-frontend/src/routes/ProcessModelShow.tsx b/spiffworkflow-frontend/src/routes/ProcessModelShow.tsx index af00ad003..47950e4f5 100644 --- a/spiffworkflow-frontend/src/routes/ProcessModelShow.tsx +++ b/spiffworkflow-frontend/src/routes/ProcessModelShow.tsx @@ -371,29 +371,32 @@ export default function ProcessModelShow() { return constructedTag; }); - return ( - - - - - Name - - - Actions - - - - {tags} -
- ); + if (tags.length > 0) { + return ( + + + + + Name + + + Actions + + + + {tags} +
+ ); + } + return null; }; const [fileUploadEvent, setFileUploadEvent] = useState(null); @@ -619,6 +622,19 @@ export default function ProcessModelShow() { return null; } + let helpText = null; + if (processModel.files.length === 0) { + helpText = ( +

+ + **This process model does not have any files associated with it. Try + creating a bpmn file by selecting "New BPMN File" in the + dropdown below.** + +

+ ); + } + return ( @@ -636,6 +652,7 @@ export default function ProcessModelShow() { a={targetUris.processModelFileCreatePath} ability={ability} > + {helpText}
Files {processModel &&