Merge branch 'main' into ms2-role-permissions

src/management-system-v2/app/(dashboard)/layout.module.scss

@@ -46,6 +46,7 @@
   /* Need this for the absolute editor page to work in non-parallel route. */
   //min-height: 70vh;
   max-width: calc(100vw - 200px);
+  height: calc(100vh - 150px);
 
   &.collapsed {
     margin-left: 25px;

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 }) => ({
@@ -162,7 +163,7 @@ const Processes: FC<ProcessProps> = () => {
                   icon={<PlusOutlined />}
                   createVersion={createProcessVersion}
                 >
-                  Create new version
+                  Create New Version
                 </VersionCreationButton>
               </Space>
             </>

src/management-system-v2/app/globals.css

@@ -68,7 +68,6 @@
   }
 }
 
-/* TODO: Move to module */
 .ant-menu-light.ant-menu-root.ant-menu-inline,
 .ant-menu-light > .ant-menu.ant-menu-root.ant-menu-inline,
 .ant-menu-light.ant-menu-root.ant-menu-vertical,
@@ -110,8 +109,8 @@
 }
 
 .card-selected {
-  background-color: #ebf8ff;
-  border: 1px solid #1976d2;
+  background-color: #ebf8ff !important;
+  border: 1px solid #1976d2 !important;
 }
 
 .no-select {
@@ -124,3 +123,21 @@
 .fit-height {
   height: calc(100vh - 64px - 70px);
 }
+
+/* Adapt BPMN.js toolbar styles */
+.djs-palette {
+  background-color: white !important;
+  border: solid 1px #d9d9d9 !important;
+  border-radius: 8px !important;
+  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.02) !important;
+}
+
+.group .entry {
+  border-bottom: solid 1px #d9d9d9;
+}
+.group .entry :last-child {
+  border-bottom: none;
+}
+.group .separator {
+  display: none;
+}

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/content.module.scss

@@ -1,6 +1,6 @@
 .Main {
-  min-height: 100vh !important;
   max-height: 100vh !important;
+  min-height: calc(100vh - 70px) !important;
 
   .Header {
     display: flex;
@@ -25,6 +25,7 @@
     padding: 40px 20px;
     max-width: 100%;
     background-color: white;
+    height: calc(100vh - 150px);
 
     &.compact {
       padding: 0;

src/management-system-v2/components/layout.module.scss

@@ -1,6 +1,6 @@
 .Sider {
   overflow: auto;
-  height: 100vh;
+  height: calc(100vh - 70px);
   //position: fixed !important;
   left: 0;
   top: 0;
@@ -42,7 +42,7 @@
   flex: auto;
   position: relative;
   /* Need this for the absolute editor page to work in non-parallel route. */
-  min-height: 100vh;
+  // min-height: 100vh;
 }
 
 .Footer {

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}