diff --git a/src/management-system-v2/app/(dashboard)/[environmentId]/layout.tsx b/src/management-system-v2/app/(dashboard)/[environmentId]/layout.tsx index 768777ae6..132b5b72b 100644 --- a/src/management-system-v2/app/(dashboard)/[environmentId]/layout.tsx +++ b/src/management-system-v2/app/(dashboard)/[environmentId]/layout.tsx @@ -59,20 +59,20 @@ const DashboardLayout = async ({ let children: MenuProps['items'] = []; children.push({ key: 'processes-editor', - label: Editor, + label: Editor, icon: , }); children = [ { key: 'processes-list', - label: List, + label: List, icon: , }, ...children, { - key: 'processes-templates', - label: Templates, + key: 'templates', + label: Templates, icon: , }, ]; diff --git a/src/management-system-v2/app/(dashboard)/[environmentId]/processes/[processId]/custom-property-section.tsx b/src/management-system-v2/app/(dashboard)/[environmentId]/processes/[processId]/custom-property-section.tsx index 0e0461a6f..7e292f1a4 100644 --- a/src/management-system-v2/app/(dashboard)/[environmentId]/processes/[processId]/custom-property-section.tsx +++ b/src/management-system-v2/app/(dashboard)/[environmentId]/processes/[processId]/custom-property-section.tsx @@ -11,12 +11,14 @@ type CustomPropertyFormProperties = { customMetaData: { [key: string]: any }; initialValues: { name: string; value: string }; onChange: (name: string, value?: any, oldName?: string) => void; + readOnly?: boolean; }; const CustomPropertyForm: React.FC = ({ isCreationForm, customMetaData, onChange, initialValues, + readOnly = false, }) => { const [form] = Form.useForm<{ name: string; value: any }>(); @@ -73,6 +75,7 @@ const CustomPropertyForm: React.FC = ({ marginBottom: '1rem', flexWrap: 'nowrap', }} + disabled={readOnly} > = ({ type CustomPropertySectionProperties = { metaData: { [key: string]: any }; onChange: (name: string, value: any, oldName?: string) => void; + readOnly?: boolean; }; const CustomPropertySection: React.FC = ({ metaData, onChange, + readOnly = false, }) => { const { overviewImage, @@ -207,6 +212,7 @@ const CustomPropertySection: React.FC = ({ updateProperty(name, value, oldName); } }} + readOnly={readOnly} > ))} @@ -215,7 +221,7 @@ const CustomPropertySection: React.FC = ({ type="text" size="small" style={{ padding: 0, fontSize: '0.75rem' }} - disabled={customProperties.length > Object.keys(customMetaData).length} + disabled={readOnly || customProperties.length > Object.keys(customMetaData).length} icon={} onClick={() => { setCustomProperties([...customProperties, { name: '', value: '' }]); diff --git a/src/management-system-v2/app/(dashboard)/[environmentId]/processes/[processId]/description-section.tsx b/src/management-system-v2/app/(dashboard)/[environmentId]/processes/[processId]/description-section.tsx index c8854122d..cbf95d6dc 100644 --- a/src/management-system-v2/app/(dashboard)/[environmentId]/processes/[processId]/description-section.tsx +++ b/src/management-system-v2/app/(dashboard)/[environmentId]/processes/[processId]/description-section.tsx @@ -9,7 +9,10 @@ import ScrollBar from '@/components/scrollbar'; const TextViewer = dynamic(() => import('@/components/text-viewer'), { ssr: false }); const TextEditor = dynamic(() => import('@/components/text-editor'), { ssr: false }); -const DescriptionSection: React.FC<{ selectedElement: any }> = ({ selectedElement }) => { +const DescriptionSection: React.FC<{ selectedElement: any; readOnly?: boolean }> = ({ + selectedElement, + readOnly = false, +}) => { const [description, setDescription] = useState(''); useEffect(() => { @@ -73,11 +76,19 @@ const DescriptionSection: React.FC<{ selectedElement: any }> = ({ selectedElemen }} >
- { - setShowPopupEditor(true); - }} - > +
= ({ selectedElemen onClick={() => { setShowPopupEditor(true); }} + disabled={readOnly} > Add Description diff --git a/src/management-system-v2/app/(dashboard)/[environmentId]/processes/[processId]/image-selection-section.tsx b/src/management-system-v2/app/(dashboard)/[environmentId]/processes/[processId]/image-selection-section.tsx index 689fb272d..cdf9a3bfe 100644 --- a/src/management-system-v2/app/(dashboard)/[environmentId]/processes/[processId]/image-selection-section.tsx +++ b/src/management-system-v2/app/(dashboard)/[environmentId]/processes/[processId]/image-selection-section.tsx @@ -14,6 +14,7 @@ import { EntityType } from '@/lib/helpers/fileManagerHelpers'; type ImageSelectionSectionProperties = { imageFileName?: string; onImageUpdate: (imageFileName?: string) => void; + readOnly?: boolean; }; export const fallbackImage = @@ -22,6 +23,7 @@ export const fallbackImage = const ImageSelectionSection: React.FC = ({ imageFileName, onImageUpdate, + readOnly = false, }) => { const { processId } = useParams(); const { fileUrl: imageUrlfm, download: getImageURL } = useFileManager({ @@ -85,6 +87,7 @@ const ImageSelectionSection: React.FC = ({ useDefaultRemoveFunction: true, fileName: imageFileName, }} + readOnly={readOnly} /> ), }} diff --git a/src/management-system-v2/app/(dashboard)/[environmentId]/processes/[processId]/milestone-selection-section.tsx b/src/management-system-v2/app/(dashboard)/[environmentId]/processes/[processId]/milestone-selection-section.tsx index f6fe5b877..ce09eb4da 100644 --- a/src/management-system-v2/app/(dashboard)/[environmentId]/processes/[processId]/milestone-selection-section.tsx +++ b/src/management-system-v2/app/(dashboard)/[environmentId]/processes/[processId]/milestone-selection-section.tsx @@ -136,9 +136,13 @@ const MilestoneDescriptionViewer: React.FC type MilestoneSelectionProperties = { selectedElement: ElementLike; + readOnly?: boolean; }; -const MilestoneSelection: React.FC = ({ selectedElement }) => { +const MilestoneSelection: React.FC = ({ + selectedElement, + readOnly = false, +}) => { const [isMilestoneModalOpen, setIsMilestoneModalOpen] = useState(false); const [initialMilestoneValues, setInitialMilestoneValues] = useState< | { @@ -239,11 +243,13 @@ const MilestoneSelection: React.FC = ({ selectedEl onClick={() => { openMilestoneModal(record); }} + disabled={readOnly} /> { removeMilestone(record.id); }} + disabled={readOnly} /> ), @@ -261,6 +267,7 @@ const MilestoneSelection: React.FC = ({ selectedEl size="small" style={{ fontSize: '0.75rem' }} icon={} + disabled={readOnly} > Add Milestone diff --git a/src/management-system-v2/app/(dashboard)/[environmentId]/processes/[processId]/modeler-toolbar.tsx b/src/management-system-v2/app/(dashboard)/[environmentId]/processes/[processId]/modeler-toolbar.tsx index 1babccc1b..1c2fa7076 100644 --- a/src/management-system-v2/app/(dashboard)/[environmentId]/processes/[processId]/modeler-toolbar.tsx +++ b/src/management-system-v2/app/(dashboard)/[environmentId]/processes/[processId]/modeler-toolbar.tsx @@ -16,7 +16,7 @@ import Icon, { import { SvgXML } from '@/components/svg'; import PropertiesPanel from './properties-panel'; import useModelerStateStore from './use-modeler-state-store'; -import { useRouter, useSearchParams } from 'next/navigation'; +import { usePathname, useRouter, useSearchParams } from 'next/navigation'; import ProcessExportModal from '@/components/process-export'; import VersionCreationButton from '@/components/version-creation-button'; import useMobileModeler from '@/lib/useMobileModeler'; @@ -50,6 +50,7 @@ const ModelerToolbar = ({ versions, }: ModelerToolbarProps) => { const router = useRouter(); + const pathname = usePathname(); const environment = useEnvironment(); const { message } = App.useApp(); const env = use(EnvVarsContext); @@ -67,6 +68,9 @@ const ModelerToolbar = ({ const query = useSearchParams(); const subprocessId = query.get('subprocess'); + const processContextPath = pathname.split('/').slice(0, -1).join('/'); // Component can be used in /processes/list or /processes/editor route + const isReadOnlyListView = processContextPath.includes('/list'); + const modeler = useModelerStateStore((state) => state.modeler); const selectedElementId = useModelerStateStore((state) => state.selectedElementId); const selectedElement = modeler @@ -244,16 +248,18 @@ const ModelerToolbar = ({ router.push( spaceURL( environment, - `/processes/${processId as string}${ + `${processContextPath}/${processId as string}${ searchParams.size ? '?' + searchParams.toString() : '' }`, ), ); }} - options={[LATEST_VERSION].concat(versions ?? []).map(({ id, name }) => ({ - value: id, - label: name, - }))} + options={(isReadOnlyListView ? [] : [LATEST_VERSION]) + .concat(versions ?? []) + .map(({ id, name }) => ({ + value: id, + label: name, + }))} /> {!showMobileView && ( <> @@ -261,6 +267,7 @@ const ModelerToolbar = ({ } createVersion={createProcessVersion} + disabled={isReadOnlyListView} > @@ -282,11 +289,13 @@ const ModelerToolbar = ({ {selectedElement && - ((env.PROCEED_PUBLIC_ENABLE_EXECUTION && bpmnIs(selectedElement, 'bpmn:UserTask') && ( - -
} > - + ); }; diff --git a/src/management-system-v2/app/(dashboard)/[environmentId]/processes/[processId]/version-toolbar.tsx b/src/management-system-v2/app/(dashboard)/[environmentId]/processes/[processId]/version-toolbar.tsx index efc001c23..0cc044252 100644 --- a/src/management-system-v2/app/(dashboard)/[environmentId]/processes/[processId]/version-toolbar.tsx +++ b/src/management-system-v2/app/(dashboard)/[environmentId]/processes/[processId]/version-toolbar.tsx @@ -10,9 +10,9 @@ import { copyProcesses, setVersionAsLatest } from '@/lib/data/processes'; import { spaceURL } from '@/lib/utils'; import { wrapServerCall } from '@/lib/wrap-server-call'; -type VersionToolbarProps = { processId: string }; +type VersionToolbarProps = { processId: string; readOnly?: boolean }; -const VersionToolbar = ({ processId }: VersionToolbarProps) => { +const VersionToolbar = ({ processId, readOnly }: VersionToolbarProps) => { const router = useRouter(); const query = useSearchParams(); const environment = useEnvironment(); @@ -54,6 +54,7 @@ const VersionToolbar = ({ processId }: VersionToolbarProps) => { return result; } }} + disabled={readOnly} > @@ -76,6 +77,7 @@ const VersionToolbar = ({ processId }: VersionToolbarProps) => { }} buttonProps={{ icon: , + disabled: readOnly, }} /> diff --git a/src/management-system-v2/app/(dashboard)/[environmentId]/processes/editor/[processId]/page.tsx b/src/management-system-v2/app/(dashboard)/[environmentId]/processes/editor/[processId]/page.tsx new file mode 100644 index 000000000..cac5c6fb0 --- /dev/null +++ b/src/management-system-v2/app/(dashboard)/[environmentId]/processes/editor/[processId]/page.tsx @@ -0,0 +1,3 @@ +import Page from '../../[processId]/page'; + +export default Page; diff --git a/src/management-system-v2/app/(dashboard)/[environmentId]/processes/editor/_loading.tsx b/src/management-system-v2/app/(dashboard)/[environmentId]/processes/editor/_loading.tsx new file mode 100644 index 000000000..7f898630c --- /dev/null +++ b/src/management-system-v2/app/(dashboard)/[environmentId]/processes/editor/_loading.tsx @@ -0,0 +1,14 @@ +import Content from '@/components/content'; +import { Skeleton, Space } from 'antd'; + +const ProcessesSkeleton = () => { + return ( + + + + + + ); +}; + +export default ProcessesSkeleton; diff --git a/src/management-system-v2/app/(dashboard)/[environmentId]/processes/editor/folder/[folderId]/not-logged-in-fallback.tsx b/src/management-system-v2/app/(dashboard)/[environmentId]/processes/editor/folder/[folderId]/not-logged-in-fallback.tsx new file mode 100644 index 000000000..c7a2e12a2 --- /dev/null +++ b/src/management-system-v2/app/(dashboard)/[environmentId]/processes/editor/folder/[folderId]/not-logged-in-fallback.tsx @@ -0,0 +1,20 @@ +'use client'; + +import { Button, Result } from 'antd'; +import { signIn } from 'next-auth/react'; +import { LoginOutlined } from '@ant-design/icons'; + +const NotLoggedInFallback = () => ( + } onClick={() => signIn()}> + Login + + } + /> +); + +export default NotLoggedInFallback; diff --git a/src/management-system-v2/app/(dashboard)/[environmentId]/processes/editor/folder/[folderId]/page.tsx b/src/management-system-v2/app/(dashboard)/[environmentId]/processes/editor/folder/[folderId]/page.tsx new file mode 100644 index 000000000..b3d82dbf2 --- /dev/null +++ b/src/management-system-v2/app/(dashboard)/[environmentId]/processes/editor/folder/[folderId]/page.tsx @@ -0,0 +1,78 @@ +import Processes from '@/components/processes'; +import Content from '@/components/content'; +import { Button, Space } from 'antd'; +import { getCurrentEnvironment } from '@/components/auth'; +// This is a workaround to enable the Server Actions in that file to return any +// client components. This is not possible with the current nextjs compiler +// otherwise. It might be possible in the future with turbopack without this +// import. +import '@/lib/data/processes'; +import { getUsersFavourites } from '@/lib/data/users'; +import { ProcessMetadata } from '@/lib/data/process-schema'; +import { Folder } from '@/lib/data/folder-schema'; +import Link from 'next/link'; +import { LeftOutlined } from '@ant-design/icons'; +import EllipsisBreadcrumb from '@/components/ellipsis-breadcrumb'; +import { ComponentProps } from 'react'; +import { spaceURL } from '@/lib/utils'; +import { getFolderById, getRootFolder, getFolderContents } from '@/lib/data/DTOs'; +export type ListItem = ProcessMetadata | (Folder & { type: 'folder' }); + +const ProcessesPage = async ({ + params, +}: { + params: { environmentId: string; folderId?: string }; +}) => { + const { ability, activeEnvironment } = await getCurrentEnvironment(params.environmentId); + + const favs = await getUsersFavourites(); + + const rootFolder = await getRootFolder(activeEnvironment.spaceId, ability); + + const folder = await getFolderById( + params.folderId ? decodeURIComponent(params.folderId) : rootFolder.id, + ); + + const folderContents = await getFolderContents(folder.id, ability); + + const pathToFolder: ComponentProps['items'] = []; + let currentFolder: Folder | null = folder; + do { + pathToFolder.push({ + title: ( + + {currentFolder.parentId ? currentFolder.name : 'Processes'} + + ), + }); + currentFolder = currentFolder.parentId ? await getFolderById(currentFolder.parentId) : null; + } while (currentFolder); + pathToFolder.reverse(); + + return ( + <> + + {folder.parentId && ( + + + + )} + + + } + > + + + + + + ); +}; + +export default ProcessesPage; diff --git a/src/management-system-v2/app/(dashboard)/[environmentId]/processes/editor/page.tsx b/src/management-system-v2/app/(dashboard)/[environmentId]/processes/editor/page.tsx new file mode 100644 index 000000000..3d21c60dc --- /dev/null +++ b/src/management-system-v2/app/(dashboard)/[environmentId]/processes/editor/page.tsx @@ -0,0 +1,3 @@ +import Page from './folder/[folderId]/page'; + +export default Page; diff --git a/src/management-system-v2/app/(dashboard)/[environmentId]/processes/list/[processId]/page.tsx b/src/management-system-v2/app/(dashboard)/[environmentId]/processes/list/[processId]/page.tsx new file mode 100644 index 000000000..cac5c6fb0 --- /dev/null +++ b/src/management-system-v2/app/(dashboard)/[environmentId]/processes/list/[processId]/page.tsx @@ -0,0 +1,3 @@ +import Page from '../../[processId]/page'; + +export default Page; diff --git a/src/management-system-v2/app/(dashboard)/[environmentId]/processes/list/_loading.tsx b/src/management-system-v2/app/(dashboard)/[environmentId]/processes/list/_loading.tsx new file mode 100644 index 000000000..7f898630c --- /dev/null +++ b/src/management-system-v2/app/(dashboard)/[environmentId]/processes/list/_loading.tsx @@ -0,0 +1,14 @@ +import Content from '@/components/content'; +import { Skeleton, Space } from 'antd'; + +const ProcessesSkeleton = () => { + return ( + + + + + + ); +}; + +export default ProcessesSkeleton; diff --git a/src/management-system-v2/app/(dashboard)/[environmentId]/processes/list/folder/[folderId]/not-logged-in-fallback.tsx b/src/management-system-v2/app/(dashboard)/[environmentId]/processes/list/folder/[folderId]/not-logged-in-fallback.tsx new file mode 100644 index 000000000..c7a2e12a2 --- /dev/null +++ b/src/management-system-v2/app/(dashboard)/[environmentId]/processes/list/folder/[folderId]/not-logged-in-fallback.tsx @@ -0,0 +1,20 @@ +'use client'; + +import { Button, Result } from 'antd'; +import { signIn } from 'next-auth/react'; +import { LoginOutlined } from '@ant-design/icons'; + +const NotLoggedInFallback = () => ( + } onClick={() => signIn()}> + Login + + } + /> +); + +export default NotLoggedInFallback; diff --git a/src/management-system-v2/app/(dashboard)/[environmentId]/processes/list/folder/[folderId]/page.tsx b/src/management-system-v2/app/(dashboard)/[environmentId]/processes/list/folder/[folderId]/page.tsx new file mode 100644 index 000000000..38103a4a4 --- /dev/null +++ b/src/management-system-v2/app/(dashboard)/[environmentId]/processes/list/folder/[folderId]/page.tsx @@ -0,0 +1,85 @@ +import Processes from '@/components/processes'; +import Content from '@/components/content'; +import { Button, Space } from 'antd'; +import { getCurrentEnvironment } from '@/components/auth'; +// This is a workaround to enable the Server Actions in that file to return any +// client components. This is not possible with the current nextjs compiler +// otherwise. It might be possible in the future with turbopack without this +// import. +import '@/lib/data/processes'; +import { getUsersFavourites } from '@/lib/data/users'; +import { ProcessMetadata } from '@/lib/data/process-schema'; +import { Folder } from '@/lib/data/folder-schema'; +import Link from 'next/link'; +import { LeftOutlined } from '@ant-design/icons'; +import EllipsisBreadcrumb from '@/components/ellipsis-breadcrumb'; +import { ComponentProps } from 'react'; +import { spaceURL } from '@/lib/utils'; +import { getFolderById, getRootFolder, getFolderContents } from '@/lib/data/DTOs'; +export type ListItem = ProcessMetadata | (Folder & { type: 'folder' }); + +const ProcessesPage = async ({ + params, +}: { + params: { environmentId: string; folderId?: string }; +}) => { + const { ability, activeEnvironment } = await getCurrentEnvironment(params.environmentId); + + const favs = await getUsersFavourites(); + + const rootFolder = await getRootFolder(activeEnvironment.spaceId, ability); + + const folder = await getFolderById( + params.folderId ? decodeURIComponent(params.folderId) : rootFolder.id, + ); + + const folderContents = await getFolderContents(folder.id, ability); + + const folderContentsWithoutVersionlessProcesses = folderContents.filter( + (folderContent) => folderContent.type === 'folder' || folderContent.versions.length > 0, + ); + + const pathToFolder: ComponentProps['items'] = []; + let currentFolder: Folder | null = folder; + do { + pathToFolder.push({ + title: ( + + {currentFolder.parentId ? currentFolder.name : 'Processes'} + + ), + }); + currentFolder = currentFolder.parentId ? await getFolderById(currentFolder.parentId) : null; + } while (currentFolder); + pathToFolder.reverse(); + + return ( + <> + + {folder.parentId && ( + + + + )} + + + } + > + + + + + + ); +}; + +export default ProcessesPage; diff --git a/src/management-system-v2/app/(dashboard)/[environmentId]/processes/list/page.tsx b/src/management-system-v2/app/(dashboard)/[environmentId]/processes/list/page.tsx new file mode 100644 index 000000000..3d21c60dc --- /dev/null +++ b/src/management-system-v2/app/(dashboard)/[environmentId]/processes/list/page.tsx @@ -0,0 +1,3 @@ +import Page from './folder/[folderId]/page'; + +export default Page; diff --git a/src/management-system-v2/components/image-upload.tsx b/src/management-system-v2/components/image-upload.tsx index 0c8f57920..5bb501e26 100644 --- a/src/management-system-v2/components/image-upload.tsx +++ b/src/management-system-v2/components/image-upload.tsx @@ -23,6 +23,7 @@ interface ImageUploadProps { useDefaultRemoveFunction: boolean; //set true if delete should be automatically handled by file maanger fileName?: string; }; + readOnly?: boolean; } const ImageUpload: React.FC = ({ @@ -32,6 +33,7 @@ const ImageUpload: React.FC = ({ onReload, endpoints, config, + readOnly = false, }) => { const { upload, remove, replace } = useFileManager({ entityType: config.entityType }); @@ -119,8 +121,9 @@ const ImageUpload: React.FC = ({ onUploadFail?.(); } }} + disabled={readOnly} > - @@ -146,6 +149,7 @@ const ImageUpload: React.FC = ({ }} type="default" ghost + disabled={readOnly} > diff --git a/src/management-system-v2/components/process-creation-button.tsx b/src/management-system-v2/components/process-creation-button.tsx index 09f2b6781..8f13b14dd 100644 --- a/src/management-system-v2/components/process-creation-button.tsx +++ b/src/management-system-v2/components/process-creation-button.tsx @@ -34,7 +34,7 @@ export const ProcessCreationModal: React.FC< setOpen(false); if (process && 'id' in process) { - router.push(spaceURL(environment, `/processes/${process.id}`)); + router.push(spaceURL(environment, `/processes/editor/${process.id}`)); } else { router.refresh(); } diff --git a/src/management-system-v2/components/process-list.tsx b/src/management-system-v2/components/process-list.tsx index 4862146e3..9f79f7ca6 100644 --- a/src/management-system-v2/components/process-list.tsx +++ b/src/management-system-v2/components/process-list.tsx @@ -22,10 +22,11 @@ import { FolderOutlined as FolderFilled, FileOutlined as FileFilled, } from '@ant-design/icons'; +import { BiShow } from 'react-icons/bi'; import styles from './item-list-view.module.scss'; -import { generateDateString } from '@/lib/utils'; +import { generateDateString, spaceURL } from '@/lib/utils'; import { useUserPreferences } from '@/lib/user-preferences'; -import { AuthCan } from '@/components/auth-can'; +import { AuthCan, useEnvironment } from '@/components/auth-can'; import { ProcessActions, ProcessListProcess } from './processes'; import ConfirmationButton from './confirmation-button'; import { Folder } from '@/lib/data/folder-schema'; @@ -38,6 +39,8 @@ import { contextMenuStore } from './processes/context-menu'; import { DraggableElementGenerator } from './processes/draggable-element'; import classNames from 'classnames'; import { set } from 'zod'; +import { usePathname } from 'next/navigation'; +import { useRouter } from 'next/navigation'; /** respects sorting function, but always keeps folders at the beginning */ function folderAwareSort(sortFunction: (a: ProcessListProcess, b: ProcessListProcess) => number) { @@ -81,14 +84,22 @@ const BaseProcessList: FC = ({ elementSelection, onExportProcess = () => {}, tableProps, - processActions: { deleteItems, editItem, copyItem } = { - deleteItems: () => {}, - editItem: () => {}, - copyItem: () => {}, - }, + processActions, setShowMobileMetaData, columnCustomRenderer = {}, }) => { + const { deleteItems, editItem, copyItem } = processActions || { + deleteItems: () => {}, + editItem: () => {}, + copyItem: () => {}, + }; + + const space = useEnvironment(); + const router = useRouter(); + const pathname = usePathname(); + const processContextPath = decodeURIComponent(pathname); // Component can be used in /processes/list or /processes/editor route + const isReadOnlyListView = processContextPath.includes('/list'); + const breakpoint = Grid.useBreakpoint(); const selectedColumns = useUserPreferences.use['columns-in-table-view-process-list'](); @@ -113,7 +124,7 @@ const BaseProcessList: FC = ({ const resource = record.type === 'folder' ? { Folder: record } : { Process: record }; return ( <> - {record.type !== 'folder' && ( + {record.type !== 'folder' && processActions && ( {/* Edit (only if one selected) */} - {selectedRowKeys.length === 1 && canEditSelected && (