Merge pull request #126 from PROCEED-Labs/ms2/process-editor

Ms2/process editor

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

@@ -7,7 +7,7 @@ import Modeler from '@/components/modeler';
 import cn from 'classnames';
 import Content from '@/components/content';
 import Overlay from './overlay';
-import { useGetAsset } from '@/lib/fetch-data';
+import { useGetAsset, useInvalidateAsset } from '@/lib/fetch-data';
 import {
   Breadcrumb,
   BreadcrumbProps,
@@ -20,9 +20,11 @@ import {
 } from 'antd';
 import { PlusOutlined } from '@ant-design/icons';
 import useModelerStateStore from '@/lib/use-modeler-state-store';
-import { createNewProcessVersion } from '@/lib/helpers';
+import { createNewProcessVersion } from '@/lib/helpers/processVersioning';
 import VersionCreationButton from '@/components/version-creation-button';
 import Auth from '@/lib/AuthCanWrapper';
+import ProcessCreationButton from '@/components/process-creation-button';
+import { AuthCan } from '@/lib/iamComponents';
 
 type ProcessProps = {
   params: { processId: string };
@@ -39,24 +41,23 @@ const Processes: FC<ProcessProps> = () => {
   const [closed, setClosed] = useState(false);
   const router = useRouter();
   const modeler = useModelerStateStore((state) => state.modeler);
-  const {
-    isSuccess,
-    data: process,
-    refetch: refetchProcess,
-    isLoading: processIsLoading,
-  } = useGetAsset('/process/{definitionId}', {
+  const { data: process, isLoading: processIsLoading } = useGetAsset('/process/{definitionId}', {
     params: { path: { definitionId: processId as string } },
   });
-  const {
-    data: processes,
-    isLoading: processesIsLoading,
-    isError: processesIsError,
-    isSuccess: processesIsSuccess,
-  } = useGetAsset('/process', {
+  const { data: processes } = useGetAsset('/process', {
     params: {
       query: { noBpmn: true },
     },
   });
+
+  const invalidateVersions = useInvalidateAsset('/process/{definitionId}/versions', {
+    params: { path: { definitionId: processId as string } },
+  });
+
+  const invalidateProcesses = useInvalidateAsset('/process/{definitionId}', {
+    params: { path: { definitionId: processId as string } },
+  });
+
   const {
     token: { fontSizeHeading1 },
   } = theme.useToken();
@@ -75,10 +76,6 @@ const Processes: FC<ProcessProps> = () => {
     }
   }, [minimized]);
 
-  const createProcess = () => {
-    console.log('create process');
-  };
-
   const createProcessVersion = async (values: {
     versionName: string;
     versionDescription: string;
@@ -91,6 +88,8 @@ const Processes: FC<ProcessProps> = () => {
         values.versionName,
         values.versionDescription,
       );
+      await invalidateVersions();
+      await invalidateProcesses();
     }
   };
 
@@ -117,12 +116,14 @@ const Processes: FC<ProcessProps> = () => {
           dropdownRender={(menu) => (
             <>
               {menu}
-              <Divider style={{ margin: '4px 0' }} />
-              <Space style={{ display: 'flex', justifyContent: 'center' }}>
-                <Button type="text" icon={<PlusOutlined />} onClick={createProcess}>
-                  Create new process
-                </Button>
-              </Space>
+              <AuthCan action="create" resource="Process">
+                <Divider style={{ margin: '4px 0' }} />
+                <Space style={{ display: 'flex', justifyContent: 'center' }}>
+                  <ProcessCreationButton type="text" icon={<PlusOutlined />}>
+                    Create new process
+                  </ProcessCreationButton>
+                </Space>
+              </AuthCan>
             </>
           )}
           options={processes?.map(({ definitionId, definitionName }) => ({

src/management-system-v2/components/ProcessSider.tsx

@@ -0,0 +1,74 @@
+'use client';
+
+import { FC, PropsWithChildren } from 'react';
+import { Menu } from 'antd';
+const { SubMenu, Item, ItemGroup } = Menu;
+import { EditOutlined, ProfileOutlined, FileAddOutlined, StarOutlined } from '@ant-design/icons';
+import { usePathname, useRouter } from 'next/navigation';
+import { useAuthStore } from '@/lib/iam';
+import ProcessCreationButton from './process-creation-button';
+
+const ProcessSider: FC<PropsWithChildren> = () => {
+  const router = useRouter();
+  const activeSegment = usePathname().slice(1) || 'processes';
+  const ability = useAuthStore((state) => state.ability);
+
+  return (
+    <>
+      <ItemGroup key="processes" title="Processes">
+        {ability.can('view', 'Process') ? (
+          <SubMenu
+            key="processes"
+            title={
+              <span
+                onClick={() => {
+                  router.push(`/processes`);
+                }}
+              >
+                Process List
+              </span>
+            }
+            className={activeSegment === 'processes' ? 'SelectedSegment' : ''}
+            icon={
+              <EditOutlined
+                onClick={() => {
+                  router.push(`/processes`);
+                }}
+              />
+            }
+          >
+            <Item
+              key="newProcess"
+              icon={<FileAddOutlined />}
+              hidden={!ability.can('create', 'Process')}
+            >
+              <ProcessCreationButton
+                wrapperElement={<span>New Process</span>}
+              ></ProcessCreationButton>
+            </Item>
+            <Item key="processFavorites" icon={<StarOutlined />}>
+              Favorites
+            </Item>
+          </SubMenu>
+        ) : null}
+
+        {ability.can('view', 'Template') ? (
+          <SubMenu key="templates" title="Templates" icon={<ProfileOutlined />}>
+            <Item
+              key="newTemplate"
+              icon={<FileAddOutlined />}
+              hidden={!ability.can('create', 'Template')}
+            >
+              New Template
+            </Item>
+            <Item key="templateFavorites" icon={<StarOutlined />}>
+              Favorites
+            </Item>
+          </SubMenu>
+        ) : null}
+      </ItemGroup>
+    </>
+  );
+};
+
+export default ProcessSider;

src/management-system-v2/components/layout.tsx

@@ -2,44 +2,15 @@
 
 import styles from './layout.module.scss';
 import { FC, PropsWithChildren, useState } from 'react';
-import { Layout as AntLayout, Grid, Menu, MenuProps } from 'antd';
-const { SubMenu, Item, Divider, ItemGroup } = Menu;
-import Logo from '@/public/proceed.svg';
-import {
-  EditOutlined,
-  UnorderedListOutlined,
-  ProfileOutlined,
-  FileAddOutlined,
-  SettingOutlined,
-  ApiOutlined,
-  UserOutlined,
-  StarOutlined,
-  UnlockOutlined,
-} from '@ant-design/icons';
+import { Layout as AntLayout, Grid, Menu } from 'antd';
+const { Item, Divider, ItemGroup } = Menu;
+import { SettingOutlined, ApiOutlined, UserOutlined, UnlockOutlined } from '@ant-design/icons';
 import Image from 'next/image';
-import { usePathname, useRouter } from 'next/navigation';
+import { usePathname } from 'next/navigation';
 import cn from 'classnames';
 import { useAuthStore } from '@/lib/iam';
 import Link from 'next/link';
-
-const items: MenuProps['items'] = [
-  {
-    key: 'processes',
-    icon: <EditOutlined />,
-    label: 'Processes',
-  },
-  {
-    key: 'projects',
-    icon: <UnorderedListOutlined />,
-    label: 'Projects',
-  },
-  {
-    key: 'templates',
-    icon: <ProfileOutlined />,
-    label: 'Templates',
-    disabled: true,
-  },
-];
+import ProcessSider from './ProcessSider';
 
 /**
  * The main layout of the application. It defines the sidebar and footer. Note
@@ -51,7 +22,6 @@ const items: MenuProps['items'] = [
  * page content in parallel routes.
  */
 const Layout: FC<PropsWithChildren> = ({ children }) => {
-  const router = useRouter();
   const activeSegment = usePathname().slice(1) || 'processes';
   const [collapsed, setCollapsed] = useState(false);
   const ability = useAuthStore((state) => state.ability);
@@ -88,68 +58,10 @@ const Layout: FC<PropsWithChildren> = ({ children }) => {
             </Link>
           </div>
           {loggedIn ? (
-            <Menu
-              theme="light"
-              mode="inline"
-              selectedKeys={[activeSegment]}
-              onClick={({ key }) => {
-                const path = key.split(':').at(-1);
-                router.push(`/${path}`);
-              }}
-            >
+            <Menu theme="light" mode="inline" selectedKeys={[activeSegment]}>
               {ability.can('view', 'Process') || ability.can('view', 'Template') ? (
                 <>
-                  <ItemGroup key="processes" title="Processes">
-                    {ability.can('view', 'Process') ? (
-                      <SubMenu
-                        key="processes"
-                        title={
-                          <span
-                            onClick={() => {
-                              router.push(`/processes`);
-                            }}
-                          >
-                            Process List
-                          </span>
-                        }
-                        className={activeSegment === 'processes' ? 'SelectedSegment' : ''}
-                        icon={
-                          <EditOutlined
-                            onClick={() => {
-                              router.push(`/processes`);
-                            }}
-                          />
-                        }
-                      >
-                        <Item
-                          key="newProcess"
-                          icon={<FileAddOutlined />}
-                          hidden={!ability.can('create', 'Process')}
-                        >
-                          New Process
-                        </Item>
-                        <Item key="processFavorites" icon={<StarOutlined />}>
-                          Favorites
-                        </Item>
-                      </SubMenu>
-                    ) : null}
-
-                    {ability.can('view', 'Template') ? (
-                      <SubMenu key="templates" title="Templates" icon={<ProfileOutlined />}>
-                        <Item
-                          key="newTemplate"
-                          icon={<FileAddOutlined />}
-                          hidden={!ability.can('create', 'Template')}
-                        >
-                          New Template
-                        </Item>
-                        <Item key="templateFavorites" icon={<StarOutlined />}>
-                          Favorites
-                        </Item>
-                      </SubMenu>
-                    ) : null}
-                  </ItemGroup>
-
+                  <ProcessSider></ProcessSider>
                   <Divider />
                 </>
               ) : null}

src/management-system-v2/components/modeler-toolbar.tsx

@@ -24,8 +24,10 @@ import { useParams, useSearchParams } from 'next/navigation';
 
 import ProcessExportModal from './process-export';
 
-import { createNewProcessVersion } from '@/lib/helpers';
+import { createNewProcessVersion } from '@/lib/helpers/processVersioning';
 import VersionCreationButton from './version-creation-button';
+import { useQueryClient } from '@tanstack/react-query';
+import { useInvalidateAsset } from '@/lib/fetch-data';
 
 type ModelerToolbarProps = {
   onOpenXmlEditor: () => void;
@@ -41,9 +43,18 @@ const ModelerToolbar: React.FC<ModelerToolbarProps> = ({ onOpenXmlEditor }) => {
   const modeler = useModelerStateStore((state) => state.modeler);
   const selectedElementId = useModelerStateStore((state) => state.selectedElementId);
 
-  // const [index, setIndex] = useState(0);
   const { processId } = useParams();
 
+  const invalidateVersions = useInvalidateAsset('/process/{definitionId}/versions', {
+    params: { path: { definitionId: processId as string } },
+  });
+
+  const invalidateProcesses = useInvalidateAsset('/process/{definitionId}', {
+    params: { path: { definitionId: processId as string } },
+  });
+
+  // const [index, setIndex] = useState(0);
+
   let selectedElement;
 
   if (modeler) {
@@ -66,6 +77,8 @@ const ModelerToolbar: React.FC<ModelerToolbarProps> = ({ onOpenXmlEditor }) => {
         values.versionName,
         values.versionDescription,
       );
+      await invalidateVersions();
+      await invalidateProcesses();
     }
   };
   const handlePropertiesPanelToggle = () => {

src/management-system-v2/components/modeler.tsx

@@ -45,7 +45,6 @@ const Modeler: FC<ModelerProps> = ({ minimized, ...props }) => {
 
   const setModeler = useModelerStateStore((state) => state.setModeler);
   const setSelectedElementId = useModelerStateStore((state) => state.setSelectedElementId);
-  const editingDisabled = useModelerStateStore((state) => state.editingDisabled);
 
   /// Derived State
   const selectedVersionId = query.get('version');
@@ -61,7 +60,7 @@ const Modeler: FC<ModelerProps> = ({ minimized, ...props }) => {
       // This is not the most recent instance, so don't do anything.
       if (active !== modeler.current) return;
 
-      if (editingDisabled) {
+      if (selectedVersionId !== null) {
         modeler.current = new Viewer!({
           container: canvas.current!,
           moddleExtensions: {
@@ -103,7 +102,7 @@ const Modeler: FC<ModelerProps> = ({ minimized, ...props }) => {
       modeler.current?.destroy();
     };
     // only reset the modeler if we switch between editing being enabled or disabled
-  }, [setModeler, editingDisabled, processId, updateProcessMutation]);
+  }, [setModeler, selectedVersionId, processId, updateProcessMutation]);
 
   const { data: processBpmn } = useProcessBpmn(processId as string, selectedVersionId);