431 process list view

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: <Link href={spaceURL(activeEnvironment, `/processes`)}>Editor</Link>,
+      label: <Link href={spaceURL(activeEnvironment, `/processes/editor`)}>Editor</Link>,
       icon: <EditOutlined />,
     });
 
     children = [
       {
         key: 'processes-list',
-        label: <Link href={spaceURL(activeEnvironment, `/processes`)}>List</Link>,
+        label: <Link href={spaceURL(activeEnvironment, `/processes/list`)}>List</Link>,
         icon: <CopyOutlined />,
       },
       ...children,
       {
-        key: 'processes-templates',
-        label: <Link href={spaceURL(activeEnvironment, `/processes`)}>Templates</Link>,
+        key: 'templates',
+        label: <Link href={spaceURL(activeEnvironment, `/templates`)}>Templates</Link>,
         icon: <SnippetsOutlined />,
       },
     ];

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<CustomPropertyFormProperties> = ({
   isCreationForm,
   customMetaData,
   onChange,
   initialValues,
+  readOnly = false,
 }) => {
   const [form] = Form.useForm<{ name: string; value: any }>();
 
@@ -73,6 +75,7 @@ const CustomPropertyForm: React.FC<CustomPropertyFormProperties> = ({
         marginBottom: '1rem',
         flexWrap: 'nowrap',
       }}
+      disabled={readOnly}
     >
       <Space direction="vertical" size={0} style={{ flexGrow: 1 }}>
         <Form.Item
@@ -119,11 +122,13 @@ const CustomPropertyForm: React.FC<CustomPropertyFormProperties> = ({
 type CustomPropertySectionProperties = {
   metaData: { [key: string]: any };
   onChange: (name: string, value: any, oldName?: string) => void;
+  readOnly?: boolean;
 };
 
 const CustomPropertySection: React.FC<CustomPropertySectionProperties> = ({
   metaData,
   onChange,
+  readOnly = false,
 }) => {
   const {
     overviewImage,
@@ -207,6 +212,7 @@ const CustomPropertySection: React.FC<CustomPropertySectionProperties> = ({
                 updateProperty(name, value, oldName);
               }
             }}
+            readOnly={readOnly}
           ></CustomPropertyForm>
         ))}
       </div>
@@ -215,7 +221,7 @@ const CustomPropertySection: React.FC<CustomPropertySectionProperties> = ({
           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={<PlusOutlined />}
           onClick={() => {
             setCustomProperties([...customProperties, { name: '', value: '' }]);

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
           }}
         >
           <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
-            <EditOutlined
-              onClick={() => {
-                setShowPopupEditor(true);
-              }}
-            ></EditOutlined>
+            <Button
+              style={{ fontSize: '0.75rem' }}
+              type="text"
+              size="small"
+              icon={
+                <EditOutlined
+                  onClick={() => {
+                    setShowPopupEditor(true);
+                  }}
+                ></EditOutlined>
+              }
+              disabled={readOnly}
+            ></Button>
           </div>
           <ScrollBar>
             <div
@@ -102,6 +113,7 @@ const DescriptionSection: React.FC<{ selectedElement: any }> = ({ selectedElemen
             onClick={() => {
               setShowPopupEditor(true);
             }}
+            disabled={readOnly}
           >
             Add Description
           </Button>

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<ImageSelectionSectionProperties> = ({
   imageFileName,
   onImageUpdate,
+  readOnly = false,
 }) => {
   const { processId } = useParams();
   const { fileUrl: imageUrlfm, download: getImageURL } = useFileManager({
@@ -85,6 +87,7 @@ const ImageSelectionSection: React.FC<ImageSelectionSectionProperties> = ({
                 useDefaultRemoveFunction: true,
                 fileName: imageFileName,
               }}
+              readOnly={readOnly}
             />
           ),
         }}

src/management-system-v2/app/(dashboard)/[environmentId]/processes/[processId]/milestone-selection-section.tsx

@@ -136,9 +136,13 @@ const MilestoneDescriptionViewer: React.FC<MilestoneDescriptionViewerProperties>
 
 type MilestoneSelectionProperties = {
   selectedElement: ElementLike;
+  readOnly?: boolean;
 };
 
-const MilestoneSelection: React.FC<MilestoneSelectionProperties> = ({ selectedElement }) => {
+const MilestoneSelection: React.FC<MilestoneSelectionProperties> = ({
+  selectedElement,
+  readOnly = false,
+}) => {
   const [isMilestoneModalOpen, setIsMilestoneModalOpen] = useState(false);
   const [initialMilestoneValues, setInitialMilestoneValues] = useState<
     | {
@@ -239,11 +243,13 @@ const MilestoneSelection: React.FC<MilestoneSelectionProperties> = ({ selectedEl
                       onClick={() => {
                         openMilestoneModal(record);
                       }}
+                      disabled={readOnly}
                     />
                     <DeleteOutlined
                       onClick={() => {
                         removeMilestone(record.id);
                       }}
+                      disabled={readOnly}
                     />
                   </Space>
                 ),
@@ -261,6 +267,7 @@ const MilestoneSelection: React.FC<MilestoneSelectionProperties> = ({ selectedEl
             size="small"
             style={{ fontSize: '0.75rem' }}
             icon={<PlusOutlined />}
+            disabled={readOnly}
           >
             <span>Add Milestone</span>
           </Button>

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,23 +248,26 @@ 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 && (
               <>
                 <Tooltip title="Create New Version">
                   <VersionCreationButton
                     icon={<PlusOutlined />}
                     createVersion={createProcessVersion}
+                    disabled={isReadOnlyListView}
                   ></VersionCreationButton>
                 </Tooltip>
                 <Tooltip title="Back to parent">
@@ -282,11 +289,13 @@ const ModelerToolbar = ({
 
           <ToolbarGroup>
             {selectedElement &&
-              ((env.PROCEED_PUBLIC_ENABLE_EXECUTION && bpmnIs(selectedElement, 'bpmn:UserTask') && (
-                <Tooltip title="Edit User Task Form">
-                  <Button icon={<FormOutlined />} onClick={() => setShowUserTaskEditor(true)} />
-                </Tooltip>
-              )) ||
+              ((env.PROCEED_PUBLIC_ENABLE_EXECUTION &&
+                bpmnIs(selectedElement, 'bpmn:UserTask') &&
+                !isReadOnlyListView && (
+                  <Tooltip title="Edit User Task Form">
+                    <Button icon={<FormOutlined />} onClick={() => setShowUserTaskEditor(true)} />
+                  </Tooltip>
+                )) ||
                 (bpmnIs(selectedElement, 'bpmn:SubProcess') && selectedElement.collapsed && (
                   <Tooltip title="Open Subprocess">
                     <Button style={{ fontSize: '0.875rem' }} onClick={handleOpeningSubprocess}>
@@ -295,7 +304,8 @@ const ModelerToolbar = ({
                   </Tooltip>
                 )) ||
                 (env.PROCEED_PUBLIC_ENABLE_EXECUTION &&
-                  bpmnIs(selectedElement, 'bpmn:ScriptTask') && (
+                  bpmnIs(selectedElement, 'bpmn:ScriptTask') &&
+                  !isReadOnlyListView && (
                     <Tooltip title="Edit Script Task">
                       <Button
                         icon={<FormOutlined />}
@@ -346,6 +356,7 @@ const ModelerToolbar = ({
                 isOpen={showPropertiesPanel}
                 close={handlePropertiesPanelToggle}
                 selectedElement={selectedElement}
+                readOnly={isReadOnlyListView}
               />
             )}
           </Space>

src/management-system-v2/app/(dashboard)/[environmentId]/processes/[processId]/modeler.tsx

@@ -79,12 +79,14 @@ const Modeler = ({ versionName, process, versions, ...divProps }: ModelerProps)
   /// Derived State
   const minimized = !decodeURIComponent(pathname).includes(process.id);
 
+  const isReadOnlyListView = decodeURIComponent(pathname).includes('/list/');
+
   const selectedVersionId = query.get('version');
   const subprocessId = query.get('subprocess');
 
   const showMobileView = useMobileModeler();
 
-  const canEdit = !selectedVersionId && !showMobileView;
+  const canEdit = !selectedVersionId && !showMobileView && !isReadOnlyListView;
 
   const saveDebounced = useMemo(
     () =>
@@ -328,7 +330,9 @@ const Modeler = ({ versionName, process, versions, ...divProps }: ModelerProps)
               canUndo={canUndo}
             />
           )}
-          {selectedVersionId && !showMobileView && <VersionToolbar processId={process.id} />}
+          {selectedVersionId && !showMobileView && (
+            <VersionToolbar processId={process.id} readOnly={isReadOnlyListView} />
+          )}
           <ModelerZoombar></ModelerZoombar>
           {!!xmlEditorBpmn && (
             <XmlEditor

src/management-system-v2/app/(dashboard)/[environmentId]/processes/[processId]/planned-cost-input.tsx

@@ -8,11 +8,13 @@ import worldCurrencies from '@/lib/worldCurrencies';
 type PlannedCostInputProperties = {
   costsPlanned: { value?: number; currency?: string };
   onInput: (costsPlanned: { value?: number; currency: string }) => void;
+  readOnly?: boolean;
 };
 
 const PlannedCostInput: React.FC<PlannedCostInputProperties> = ({
   costsPlanned: { value, currency = 'EUR' },
   onInput,
+  readOnly = false,
 }) => {
   const [costsPlanned, setCostsPlanned] = useState<{ value?: number; currency: string }>({
     value,
@@ -69,6 +71,7 @@ const PlannedCostInput: React.FC<PlannedCostInputProperties> = ({
             }).format(costsPlanned.value)
           : costsPlanned.value
       }
+      disabled={readOnly}
     />
   );
 };

src/management-system-v2/app/(dashboard)/[environmentId]/processes/[processId]/planned-duration-input.tsx

@@ -106,11 +106,13 @@ const PlannedDurationModal: React.FC<PlannedDurationModalProperties> = ({
 type PlannedDurationInputProperties = {
   timePlannedDuration: string;
   onChange: (changedTimePlannedDuration: string) => void;
+  readOnly?: boolean;
 };
 
 const PlannedDurationInput: React.FC<PlannedDurationInputProperties> = ({
   timePlannedDuration,
   onChange,
+  readOnly = false,
 }) => {
   const [isPlannedDurationModalOpen, setIsPlannedDurationModalOpen] = useState(false);
 
@@ -154,6 +156,7 @@ const PlannedDurationInput: React.FC<PlannedDurationInputProperties> = ({
         value={durationString}
         placeholder="Planned Duration"
         onClick={() => setIsPlannedDurationModalOpen(true)}
+        disabled={readOnly}
       />
       <PlannedDurationModal
         durationValues={durationValues}