Fix #107 and refactor

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

@@ -1,48 +1,201 @@
 'use client';
 
 import styles from './page.module.scss';
-import { FC, useEffect, useState } from 'react';
-import { useParams, usePathname, useRouter } from 'next/navigation';
+import { FC, useEffect, useMemo, useState } from 'react';
+import { useParams, usePathname, useRouter, useSearchParams } from 'next/navigation';
 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 {
+  Breadcrumb,
+  BreadcrumbProps,
+  Button,
+  Divider,
+  Select,
+  SelectProps,
+  Space,
+  Tooltip,
+  theme,
+} from 'antd';
+import { PlusOutlined } from '@ant-design/icons';
+import useModelerStateStore from '@/lib/use-modeler-state-store';
+import { useProcessesStore } from '@/lib/use-local-process-store';
+import { createNewProcessVersion } from '@/lib/helpers';
+import VersionCreationButton from '@/components/version-creation-button';
+import { SelectionSelectFn } from 'antd/es/table/interface';
 
 type ProcessProps = {
   params: { processId: string };
 };
 
+const LATEST_VERSION = { version: 'latest', name: 'Latest Version', description: '' };
+
 const Processes: FC<ProcessProps> = () => {
   // TODO: check if params is correct after fix release. And maybe don't need
   // refresh in processes.tsx anymore?
   const { processId } = useParams();
   const pathname = usePathname();
-  const minimized = pathname !== `/processes/${processId}`;
+  const query = useSearchParams();
   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}', {
+    params: { path: { definitionId: processId as string } },
+  });
+  const {
+    data: processes,
+    isLoading: processesIsLoading,
+    isError: processesIsError,
+    isSuccess: processesIsSuccess,
+  } = useGetAsset('/process', {
+    params: {
+      query: { noBpmn: true },
+    },
+  });
+  const {
+    token: { fontSizeHeading1 },
+  } = theme.useToken();
 
-  const { data } = useGetAsset('/process', { params: { query: { noBpmn: true } } });
+  /// Derived State
 
-  const process = data?.find((p) => p.definitionId === processId);
+  const minimized = pathname !== `/processes/${processId}`;
+  const selectedVersionId = query.get('version');
+  const selectedVersion =
+    process?.versions.find((version) => version.version === selectedVersionId) ?? LATEST_VERSION;
 
   useEffect(() => {
     // Reset closed state when page is not minimized anymore.
     if (!minimized) {
       setClosed(false);
     }
-  }, [minimized, router]);
+  }, [minimized]);
+
+  const createProcess = () => {
+    console.log('create process');
+  };
+
+  const createProcessVersion = async (values: {
+    versionName: string;
+    versionDescription: string;
+  }) => {
+    const saveXMLResult = await modeler?.saveXML({ format: true });
+
+    if (saveXMLResult?.xml) {
+      await createNewProcessVersion(
+        saveXMLResult.xml,
+        values.versionName,
+        values.versionDescription,
+      );
+    }
+  };
+
+  const filterOption: SelectProps['filterOption'] = (input, option) =>
+    ((option?.label as string) ?? '').toLowerCase().includes(input.toLowerCase());
+
+  const breadcrumItems: BreadcrumbProps['items'] = [
+    /* Processes: */
+    {
+      title: (
+        <Select
+          bordered={false}
+          popupMatchSelectWidth={false}
+          placeholder="Select Process"
+          showSearch
+          filterOption={filterOption}
+          value={{
+            value: process?.definitionId,
+            label: process?.definitionName,
+          }}
+          onSelect={(_, option) => {
+            router.push(`/processes/${option.value}`);
+          }}
+          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>
+            </>
+          )}
+          options={processes?.map(({ definitionId, definitionName }) => ({
+            value: definitionId,
+            label: definitionName,
+          }))}
+        />
+      ),
+    },
+    /* Versions: */
+    {
+      title: (
+        <Select
+          bordered={false}
+          popupMatchSelectWidth={false}
+          placeholder="Select Version"
+          showSearch
+          filterOption={filterOption}
+          value={{
+            value: selectedVersion.version,
+            label: selectedVersion.name,
+          }}
+          onSelect={(_, option) => {
+            if (option.value === 'latest') {
+              router.push(`/processes/${processId as string}`);
+            } else {
+              router.push(`/processes/${processId as string}?version=${option.value}`);
+            }
+          }}
+          dropdownRender={(menu) => (
+            <>
+              {menu}
+              <Divider style={{ margin: '4px 0' }} />
+              <Space style={{ display: 'flex', justifyContent: 'center' }}>
+                <VersionCreationButton
+                  type="text"
+                  icon={<PlusOutlined />}
+                  createVersion={createProcessVersion}
+                >
+                  Create new version
+                </VersionCreationButton>
+              </Space>
+            </>
+          )}
+          options={process?.versions?.concat(LATEST_VERSION).map(({ version, name }) => ({
+            value: version,
+            label: name,
+          }))}
+        />
+      ),
+    },
+  ];
 
   if (closed) {
     return null;
   }
 
   return (
     <Content
+      title={
+        !processIsLoading && (
+          <Breadcrumb
+            style={{ fontSize: fontSizeHeading1, color: 'black' }}
+            separator={<span style={{ fontSize: '20px' }}>/</span>}
+            items={breadcrumItems}
+          />
+        )
+      }
       compact
-      wrapperClass={cn(styles.Wrapper, { [styles.minimized]: minimized }, 'modeler-page-content')}
+      wrapperClass={cn(styles.Wrapper, { [styles.minimized]: minimized })}
       headerClass={cn(styles.HF, { [styles.minimizedHF]: minimized })}
-      footerClass={cn(styles.HF, { [styles.minimizedHF]: minimized })}
     >
       <Modeler className={styles.Modeler} minimized={minimized} />
       {minimized ? (

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

@@ -11,8 +11,8 @@
   z-index: 100;
 
   &.minimized {
-    height: 400px;
-    width: 30%;
+    height: min(30vh, 30vw);
+    width: min(55vh, 55vw);
     right: 30px;
     box-shadow: 0 0 31px -10px #a2a2a285;
     border: 1px solid #e0e0e0;

src/management-system-v2/app/(dashboard)/projects/page.tsx

@@ -2,13 +2,12 @@ import Processes from '@/components/processes';
 import { FC } from 'react';
 import ProjectStats from './project-stats';
 import Content from '@/components/content';
-import HeaderActions from './header-actions';
 import Auth from '@/lib/AuthCanWrapper';
 import { Space } from 'antd';
 
 const Projects: FC = () => {
   return (
-    <Content title="Projects" rightNode={<HeaderActions />}>
+    <Content title="Projects">
       <Space direction="vertical" size="large" style={{ display: 'flex' }}>
         <ProjectStats />
         <Processes />

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

@@ -2,20 +2,14 @@
 
 import styles from './content.module.scss';
 import { FC, PropsWithChildren, ReactNode } from 'react';
-import { Layout as AntLayout, theme, Typography, Grid, Button } from 'antd';
+import { Layout as AntLayout, Grid, Button } from 'antd';
 import { MenuOutlined } from '@ant-design/icons';
 import cn from 'classnames';
-import Link from 'next/link';
-import Image from 'next/image';
 import HeaderActions from './header-actions';
 
-const { Title } = Typography;
-
 type ContentProps = PropsWithChildren<{
   /** Top left title in the header (or custom node). */
   title?: ReactNode;
-  /** Top right node in the header. */
-  rightNode?: ReactNode;
   /** If true, the content won't have any padding. */
   compact?: boolean;
   /** If true, the content won't have a header. */
@@ -24,44 +18,34 @@ type ContentProps = PropsWithChildren<{
   wrapperClass?: string;
   /** Class name for the header. */
   headerClass?: string;
-  /** Class name for the footer. */
-  footerClass?: string;
-  /* Whether the header is fixed or not */
-  fixedHeader?: boolean;
 }>;
 
 const Content: FC<ContentProps> = ({
   children,
   title,
-  rightNode,
   compact = false,
   noHeader = false,
   wrapperClass,
   headerClass,
-  fixedHeader = false,
 }) => {
   const breakpoint = Grid.useBreakpoint();
 
   return (
     <AntLayout className={cn(styles.Main, wrapperClass)}>
       {noHeader ? null : (
-        <AntLayout.Header className={styles.Header}>
+        <AntLayout.Header className={cn(styles.Header, headerClass)}>
           <div className={styles.Title}>{title}</div>
           {breakpoint.xs ? (
             // Hamburger menu for mobile view
-            <>
-              <Button
-                type="text"
-                size="large"
-                style={{ marginTop: '20px', marginLeft: '15px' }}
-                icon={<MenuOutlined style={{ fontSize: '170%' }} />}
-              />
-            </>
+            <Button
+              type="text"
+              size="large"
+              style={{ marginTop: '20px', marginLeft: '15px' }}
+              icon={<MenuOutlined style={{ fontSize: '170%' }} />}
+            />
           ) : (
             // Logout and User Profile in header for screens larger than 412px
-            <>
-              <HeaderActions />
-            </>
+            <HeaderActions />
           )}
         </AntLayout.Header>
       )}

src/management-system-v2/components/header-actions.tsx

@@ -11,7 +11,9 @@ const HeaderActions: FC = () => {
   const loggedIn = useAuthStore((store) => store.loggedIn);
   const user = useAuthStore((store) => store.user);
 
-  if (!process.env.NEXT_PUBLIC_USE_AUTH) return null;
+  if (!process.env.NEXT_PUBLIC_USE_AUTH) {
+    return null;
+  }
 
   if (!loggedIn) {
     return (