Merge branch 'ms2/new-documentation-page-e2e' of github.com:PROCEED-L…

…abs/proceed into ms2/new-documentation-page-e2e

src/engine/native/node/native-vm2/package.json

@@ -8,6 +8,6 @@
   "dependencies": {
     "@proceed/native-module": "^1.0.0",
     "vm2": "^3.8.4",
-    "neo-bpmn-engine": "^8.2.2"
+    "neo-bpmn-engine": "^8.2.3"
   }
 }

src/engine/universal/core/package.json

@@ -16,7 +16,7 @@
     "@proceed/system": "^1.0.0",
     "@proceed/ui": "^1.0.0",
     "bpmn-moddle": "^5.1.6",
-    "neo-bpmn-engine": "^8.2.2",
+    "neo-bpmn-engine": "^8.2.3",
     "vm2": "3.8.4"
   },
   "devDependencies": {

src/management-system-v2/app/(dashboard)/[environmentId]/processes/[processId]/_user-task-builder/DragAndDropHandler.tsx

@@ -11,7 +11,7 @@ import {
 } from '@dnd-kit/core';
 import { Active, DroppableContainer, RectMap } from '@dnd-kit/core/dist/store';
 import { Coordinates } from '@dnd-kit/utilities';
-import { useCallback, useRef, useState } from 'react';
+import React, { useCallback, useRef, useState } from 'react';
 import { Row } from './elements';
 import { createPortal } from 'react-dom';
 
@@ -356,7 +356,7 @@ const EditorDnDHandler: React.FC<EditorDnDHandlerProps> = ({
       sensors={sensors}
       measuring={{
         droppable: {
-          measure: (element) => {
+          measure: () => {
             // deactivating the default measuring since it sometimes runs before the required data is ready in craft js
             return { top: 0, bottom: 0, left: 0, right: 0, height: 0, width: 0 };
           },
@@ -366,15 +366,20 @@ const EditorDnDHandler: React.FC<EditorDnDHandlerProps> = ({
         cachedDroppableRects.current = null;
         needNewHistoryBundle.current = true;
         setActive(event.active.id.toString());
-        if (isCreating) iframeRef.current!.style.pointerEvents = 'none';
+        const isCreating = /^create-.*-button$/.test(event.active.id.toString());
+        if (isCreating && iframeRef.current) {
+          iframeRef.current.style.pointerEvents = 'none';
+        }
       }}
       onDragCancel={() => {
-        if (isCreating) iframeRef.current!.style.pointerEvents = '';
+        if (isCreating && iframeRef.current?.contentDocument?.body)
+          iframeRef.current.style.pointerEvents = '';
         setActive('');
       }}
       onDragEnd={(event) => {
         const { active, collisions } = event;
-        if (isCreating) iframeRef.current!.style.pointerEvents = '';
+        if (isCreating && iframeRef.current?.contentDocument?.body)
+          iframeRef.current.style.pointerEvents = '';
         else return;
         setActive('');
 

src/management-system-v2/app/(dashboard)/[environmentId]/processes/[processId]/_user-task-builder/elements/Image.tsx

@@ -38,8 +38,8 @@ const Image: UserComponent<ImageProps> = ({ src, reloadParam, width }) => {
   const params = useParams<{ processId: string }>();
   const environment = useEnvironment();
 
-  const baseUrl = `/api/private/${environment.spaceId}/processes/${params.processId}/images`;
-  console.log(src);
+  const baseUrl =
+    editingEnabled && `/api/private/${environment.spaceId}/processes/${params.processId}/images`;
 
   return (
     <ContextMenu menu={[]}>
@@ -61,7 +61,7 @@ const Image: UserComponent<ImageProps> = ({ src, reloadParam, width }) => {
           style={{ width: width && `${width}%` }}
           src={src ? `${src}?${reloadParam}` : fallbackImage}
         />
-        {editingEnabled && isHovered && (
+        {editingEnabled && baseUrl && isHovered && (
           <ImageUpload
             imageExists={!!src}
             onReload={() => setProp((props: ImageProps) => (props.reloadParam = Date.now()))}

src/management-system-v2/app/(dashboard)/[environmentId]/processes/[processId]/_user-task-builder/index.tsx

@@ -13,7 +13,7 @@ import Sidebar from './_sidebar';
 
 import * as Elements from './elements';
 
-import { iframeDocument, defaultForm } from './utils';
+import { iframeDocument, defaultForm, toHtml } from './utils';
 
 import CustomEventhandlers from './CustomCommandhandlers';
 import useBoundingClientRect from '@/lib/useBoundingClientRect';
@@ -109,7 +109,8 @@ const EditorModal: React.FC<BuilderModalProps> = ({
             implementation: getUserTaskImplementationString(),
           });
         }
-        saveProcessUserTask(processId, filename!, json, environment.spaceId).then(
+        const html = toHtml(json);
+        saveProcessUserTask(processId, filename!, json, html, environment.spaceId).then(
           (res) => res && console.error(res.error),
         );
         onSave();

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

@@ -20,7 +20,7 @@ import { useRouter, useSearchParams } from 'next/navigation';
 import ProcessExportModal from '@/components/process-export';
 import VersionCreationButton from '@/components/version-creation-button';
 import useMobileModeler from '@/lib/useMobileModeler';
-import { createVersion, updateProcess } from '@/lib/data/processes';
+import { createVersion, updateProcess, getProcessBPMN } from '@/lib/data/processes';
 import { Root } from 'bpmn-js/lib/model/Types';
 import { useEnvironment } from '@/components/auth-can';
 import ModelerShareModalButton from './modeler-share-modal';
@@ -82,6 +82,8 @@ const ModelerToolbar = ({
     }
   }, [modeler, showProcessExportModal, showUserTaskEditor]);
 
+  const selectedVersionId = query.get('version');
+
   const createProcessVersion = async (values: {
     versionName: string;
     versionDescription: string;
@@ -104,7 +106,14 @@ const ModelerToolbar = ({
       )
         throw new Error();
 
-      // TODO: navigate to new version?
+      // reimport the new version since the backend has added versionBasedOn information that would
+      // be overwritten by following changes
+      if (!selectedElementId) {
+        const newBpmn = await getProcessBPMN(processId, environment.spaceId);
+        if (newBpmn && typeof newBpmn === 'string') {
+          await modeler?.loadBPMN(newBpmn);
+        }
+      }
       router.refresh();
     } catch (_) {
       message.error('Something went wrong');
@@ -154,8 +163,6 @@ const ModelerToolbar = ({
     setShowProcessExportModal(!showProcessExportModal);
   };
 
-  const selectedVersionId = query.get('version');
-
   const handleUndo = () => {
     modeler?.undo();
   };

src/management-system-v2/components/item-list-view.module.scss

@@ -14,11 +14,21 @@
   max-width: 20dvw;
 }
 
-.HoverableTableCell:not(th) {
-  opacity: 0;
-  transition: opacity 0.2s ease !important;
+.HoverableTableCell {
+  // border: 1px solid black;
+  width: 100%;
+
+  &:not(th) {
+    opacity: 0;
+    transition: opacity 0.2s ease !important;
+  }
 }
 
-tr:has(.HoverableTableCell):hover .HoverableTableCell {
+tr:hover .HoverableTableCell {
   opacity: 1;
 }
+
+.ActionButton {
+  margin-left: 8px;
+  // background-color: red;
+}

src/management-system-v2/components/item-list-view.tsx

@@ -5,6 +5,7 @@ import { PropsWithChildren, ReactNode, SetStateAction, useMemo, useRef } from 'r
 import cn from 'classnames';
 import styles from './item-list-view.module.scss';
 import { MoreOutlined } from '@ant-design/icons';
+import { ResizeableTitle } from '@/lib/useColumnWidth';
 import { getUniqueObjects } from '@/lib/utils';
 
 type ElementListProps<T extends { id: string }> = PropsWithChildren<{
@@ -105,10 +106,11 @@ const ElementList = <T extends { id: string }>({
   }
 
   const selectedElementsKeys = elementSelection?.selectedElements.map(({ id }) => id);
+  const { components } = tableProps || {};
 
   return (
     <Table
-      size={breakpoint.xs ? 'large' : 'middle'}
+      // size={breakpoint.xs ? 'large' : 'middle'}
       pagination={{ position: ['bottomCenter'], pageSize: numberOfRows }}
       {...tableProps}
       rowSelection={
@@ -199,6 +201,13 @@ const ElementList = <T extends { id: string }>({
       columns={columns}
       dataSource={data}
       className={cn(breakpoint.xs ? styles.MobileTable : '')}
+      components={{
+        ...components,
+        header: {
+          ...components?.header,
+          cell: ResizeableTitle,
+        },
+      }}
     />
   );
 };

src/management-system-v2/components/process-list.tsx

@@ -28,12 +28,13 @@ import { ProcessActions, ProcessListProcess } from './processes';
 import ConfirmationButton from './confirmation-button';
 import { Folder } from '@/lib/data/folder-schema';
 import ElementList from './item-list-view';
-import { useColumnWidth } from '@/lib/useColumnWidth';
+import { useResizeableColumnWidth } from '@/lib/useColumnWidth';
 import SpaceLink from './space-link';
 import useFavouriteProcesses from '@/lib/useFavouriteProcesses';
 import FavouriteStar from './favouriteStar';
 import { contextMenuStore } from './processes/context-menu';
 import { DraggableElementGenerator } from './processes/draggable-element';
+import classNames from 'classnames';
 
 /** respects sorting function, but always keeps folders at the beginning */
 function folderAwareSort(sortFunction: (a: ProcessListProcess, b: ProcessListProcess) => number) {
@@ -112,40 +113,50 @@ const BaseProcessList: FC<BaseProcessListProps> = ({
           {record.type !== 'folder' && (
             <AuthCan {...resource} create>
               <Tooltip placement="top" title={'Copy'}>
-                <CopyOutlined
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    copyItem([record]);
-                  }}
+                <Button
+                  className={classNames(styles.ActionButton)}
+                  type="text"
+                  icon={<CopyOutlined />}
+                  onClick={() => copyItem([record])}
                 />
               </Tooltip>
             </AuthCan>
           )}
 
           {record.type !== 'folder' && (
             <Tooltip placement="top" title={'Export'}>
-              <ExportOutlined onClick={() => onExportProcess(record)} />
+              <Button
+                className={classNames(styles.ActionButton)}
+                type="text"
+                icon={<ExportOutlined />}
+                onClick={() => onExportProcess(record)}
+              />
             </Tooltip>
           )}
 
           <AuthCan {...resource} update>
             <Tooltip placement="top" title={'Edit'}>
-              <EditOutlined onClick={() => editItem(record)} />
+              <Button
+                className={classNames(styles.ActionButton)}
+                type="text"
+                icon={<EditOutlined />}
+                onClick={() => editItem(record)}
+              />
             </Tooltip>
           </AuthCan>
 
           <AuthCan delete {...resource}>
-            <Tooltip placement="top" title={'Delete'}>
-              <ConfirmationButton
-                title={`Delete ${record.type === 'folder' ? 'Folder' : 'Process'}`}
-                description="Are you sure you want to delete the selected process?"
-                onConfirm={() => deleteItems([record])}
-                buttonProps={{
-                  icon: <DeleteOutlined />,
-                  type: 'text',
-                }}
-              />
-            </Tooltip>
+            <ConfirmationButton
+              tooltip="Delete"
+              title={`Delete ${record.type === 'folder' ? 'Folder' : 'Process'}`}
+              description="Are you sure you want to delete the selected process?"
+              onConfirm={() => deleteItems([record])}
+              buttonProps={{
+                icon: <DeleteOutlined />,
+                type: 'text',
+                className: styles.ActionButton,
+              }}
+            />
           </AuthCan>
         </>
       );
@@ -184,8 +195,8 @@ const BaseProcessList: FC<BaseProcessListProps> = ({
             color: 'inherit' /* or any color you want */,
             textDecoration: 'none' /* removes underline */,
             display: 'block',
-            whiteSpace: 'nowrap',
-            textOverflow: 'ellipsis',
+            // whiteSpace: 'nowrap',
+            // textOverflow: 'ellipsis',
           }}
         >
           <div
@@ -263,8 +274,10 @@ const BaseProcessList: FC<BaseProcessListProps> = ({
     {
       title: 'File Size',
       key: 'File Size',
-      sorter: folderAwareSort((a, b) => (a < b ? -1 : 1)),
+      // dataIndex:  /* TODO: */,
+      // sorter: folderAwareSort((a, b) => (parseInt(a) < parseInt(b) ? -1 : 1)),
       responsive: ['md'],
+      render: (_, __, rowIndex) => <>{rowIndex} MB</> /* TODO: */,
     },
     {
       title: 'Owner',
@@ -304,9 +317,11 @@ const BaseProcessList: FC<BaseProcessListProps> = ({
     : columns.filter((c) => processListColumnsMobile.includes(c?.key as string));
 
   /* Add functionality for changing width of columns */
-  columnsFiltered = useColumnWidth(columnsFiltered, 'columns-in-table-view-process-list', [
-    'Favorites',
-  ]);
+  columnsFiltered = useResizeableColumnWidth(
+    columnsFiltered,
+    'columns-in-table-view-process-list',
+    ['Favorites'],
+  );
 
   return (
     <ElementList
@@ -332,15 +347,25 @@ const BaseProcessList: FC<BaseProcessListProps> = ({
         selectedColumnTitles: selectedColumns.map((col: any) => col.name) as string[],
         allColumnTitles: ['Description', 'Last Edited', 'Created On', 'File Size', 'Owner'],
         columnProps: {
-          width: 'fit-content',
+          width: '200px',
           responsive: ['xl'],
           render: (id, record, index) =>
             columnCustomRenderer['customProps']
               ? columnCustomRenderer['customProps'](id, record, index)
               : id !== folder.parentId && (
-                  <Row justify="space-evenly" className={styles.HoverableTableCell}>
-                    {actionBarGenerator(record)}
-                  </Row>
+                  <div
+                    style={{
+                      width: '100%',
+                      height: '100%',
+                      display: 'flex',
+                    }}
+                  >
+                    <span style={{ flex: 1 }} />
+                    <Row justify="end" wrap={false} className={styles.HoverableTableCell}>
+                      {actionBarGenerator(record)}
+                    </Row>
+                    <span style={{ width: '15%' }} />
+                  </div>
                 ),
         },
       }}
@@ -373,6 +398,7 @@ const ProcessManagementList: FC<ProcessManagementListProps> = ({
   setShowMobileMetaData,
 }) => {
   const setContextMenuItem = contextMenuStore((store) => store.setSelected);
+  const metaPanelisOpened = useUserPreferences.use['process-meta-data']().open;
 
   return (
     <BaseProcessList
@@ -383,6 +409,7 @@ const ProcessManagementList: FC<ProcessManagementListProps> = ({
       onExportProcess={onExportProcess}
       processActions={processActions}
       tableProps={{
+        scroll: { x: metaPanelisOpened ? '71vw' : '85.5vw' },
         onRow: (item) => ({
           // onDoubleClick: () =>
           //   router.push(