ms2/share modal improvements (#437)

* fix(ms2/process-page): throw UnauthorizedError -> correct error message

* feat(ms2/share-modal): select version of process in share modal

* fix(ms2/legacy-store): parse dates of processes

* fix(ms2/process-documentation): don't mutate state variable directly

* quickfix(ms2/documentation-page): creatorId not defined on legacy store

* fix(ms2/process-document): if processHierarchy changes pages should start as an empty array

* Fixed type error

---------

Co-authored-by: Janis Joderi Shoferi <janis.joderi@web.de>

Author: FelipeTrost

src/management-system-v2/app/(dashboard)/[environmentId]/processes/[processId]/modeler-share-modal-option-public-link.tsx

@@ -1,5 +1,5 @@
 'use client';
-import { App, Button, Checkbox, Col, Flex, Input, QRCode, Row } from 'antd';
+import { App, Button, Checkbox, Col, Flex, Input, QRCode, Row, Select, Space } from 'antd';
 import { DownloadOutlined, CopyOutlined } from '@ant-design/icons';
 import { useEffect, useRef, useState } from 'react';
 import { useParams, useSearchParams } from 'next/navigation';
@@ -10,21 +10,24 @@ import {
 import { useEnvironment } from '@/components/auth-can';
 
 import styles from './modeler-share-modal-option-public-link.module.scss';
+import { Process } from '@/lib/data/process-schema';
 
 type ModelerShareModalOptionPublicLinkProps = {
   sharedAs: 'public' | 'protected';
   shareTimestamp: number;
   refresh: () => void;
+  processVersions: Process['versions'];
 };
 
 const ModelerShareModalOptionPublicLink = ({
   sharedAs,
   shareTimestamp,
   refresh,
+  processVersions,
 }: ModelerShareModalOptionPublicLinkProps) => {
   const { processId } = useParams();
   const query = useSearchParams();
-  const selectedVersionId = query.get('version');
+  const [selectedVersionId, setSelectedVersionId] = useState<string | null>(query.get('version'));
   const environment = useEnvironment();
 
   const [shareLink, setShareLink] = useState('');
@@ -185,95 +188,104 @@ const ModelerShareModalOptionPublicLink = ({
   };
 
   return (
-    <>
-      <div style={{ marginBottom: '5px' }}>
+    <Space direction="vertical">
+      <Select
+        defaultValue={selectedVersionId || '-1'}
+        options={[
+          { value: '-1', label: 'Latest Version' },
+          ...processVersions.map((version) => ({ value: version.id, label: version.name })),
+        ]}
+        onChange={(value) => {
+          setSelectedVersionId(value === '-1' ? null : value);
+        }}
+      />
+
+      <div>
         <Checkbox checked={isShareLinkChecked} onChange={handleShareLinkChecked}>
           Share Process with Public Link
         </Checkbox>
       </div>
-      <div>
-        <Row>
-          <Col span={18} style={{ paddingBottom: '10px', paddingLeft: '25px' }}>
-            <Flex vertical gap="small" justify="left" align="left">
-              <Checkbox
-                checked={registeredUsersonlyChecked}
-                onChange={handlePermissionChanged}
-                disabled={isShareLinkEmpty}
-              >
-                Visible only for registered user
-              </Checkbox>
-            </Flex>
-          </Col>
-          <Col span={18}>
-            <Input
-              type={'text'}
-              value={shareLink}
+      <Row>
+        <Col span={18} style={{ paddingBottom: '10px', paddingLeft: '25px' }}>
+          <Flex vertical gap="small" justify="left" align="left">
+            <Checkbox
+              checked={registeredUsersonlyChecked}
+              onChange={handlePermissionChanged}
               disabled={isShareLinkEmpty}
-              name="generated share link"
-              style={{ border: '1px solid #000' }}
-            />
-          </Col>
-          <Col span={12}>
-            <Flex
-              vertical={false}
-              style={{ paddingTop: '10px', flexWrap: 'wrap-reverse' }}
-              justify="center"
-              align="center"
             >
-              {isShareLinkChecked && (
-                <div id="qrcode" ref={canvasRef}>
-                  <QRCode
-                    style={{
-                      border: '1px solid #000',
-                    }}
-                    value={shareLink}
-                    size={130}
-                  />
-                </div>
-              )}
-            </Flex>
-          </Col>
-          <Col span={6} style={{ paddingTop: '10px' }}>
-            <Flex vertical gap={10}>
-              <Button
-                className={styles.OptionButton}
-                onClick={handleCopyLink}
-                disabled={isShareLinkEmpty}
-              >
-                Copy link
-              </Button>
-              <Button
-                className={styles.OptionButton}
-                onClick={handleOpenSharedPage}
-                disabled={isShareLinkEmpty}
-              >
-                Open
-              </Button>
-              <Button
-                icon={<DownloadOutlined />}
-                title="Save as PNG"
-                className={styles.OptionButton}
-                hidden={isShareLinkEmpty}
-                onClick={() => handleQRCodeAction('download')}
-                disabled={isShareLinkEmpty}
-              >
-                Save QR Code
-              </Button>
-              <Button
-                icon={<CopyOutlined />}
-                title="Copy as PNG"
-                className={styles.OptionButton}
-                hidden={isShareLinkEmpty}
-                onClick={() => handleQRCodeAction('copy')}
-                disabled={isShareLinkEmpty}
-              >
-                Copy QR Code
-              </Button>
-            </Flex>
-          </Col>
-        </Row>
-      </div>
-    </>
+              Visible only for registered user
+            </Checkbox>
+          </Flex>
+        </Col>
+        <Col span={18}>
+          <Input
+            type={'text'}
+            value={shareLink}
+            disabled={isShareLinkEmpty}
+            name="generated share link"
+            style={{ border: '1px solid #000' }}
+          />
+        </Col>
+        <Col span={12}>
+          <Flex
+            vertical={false}
+            style={{ paddingTop: '10px', flexWrap: 'wrap-reverse' }}
+            justify="center"
+            align="center"
+          >
+            {isShareLinkChecked && (
+              <div id="qrcode" ref={canvasRef}>
+                <QRCode
+                  style={{
+                    border: '1px solid #000',
+                  }}
+                  value={shareLink}
+                  size={130}
+                />
+              </div>
+            )}
+          </Flex>
+        </Col>
+        <Col span={6} style={{ paddingTop: '10px' }}>
+          <Flex vertical gap={10}>
+            <Button
+              className={styles.OptionButton}
+              onClick={handleCopyLink}
+              disabled={isShareLinkEmpty}
+            >
+              Copy link
+            </Button>
+            <Button
+              className={styles.OptionButton}
+              onClick={handleOpenSharedPage}
+              disabled={isShareLinkEmpty}
+            >
+              Open
+            </Button>
+            <Button
+              icon={<DownloadOutlined />}
+              title="Save as PNG"
+              className={styles.OptionButton}
+              hidden={isShareLinkEmpty}
+              onClick={() => handleQRCodeAction('download')}
+              disabled={isShareLinkEmpty}
+            >
+              Save QR Code
+            </Button>
+            <Button
+              icon={<CopyOutlined />}
+              title="Copy as PNG"
+              className={styles.OptionButton}
+              hidden={isShareLinkEmpty}
+              onClick={() => handleQRCodeAction('copy')}
+              disabled={isShareLinkEmpty}
+            >
+              Copy QR Code
+            </Button>
+          </Flex>
+        </Col>
+      </Row>
+    </Space>
   );
 };
 

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

@@ -32,10 +32,15 @@ import { set } from 'zod';
 type ShareModalProps = {
   onExport: () => void;
   onExportMobile: (type: ProcessExportOptions['type']) => void;
+  versions: Process['versions'];
 };
 type SharedAsType = 'public' | 'protected';
 
-const ModelerShareModalButton: FC<ShareModalProps> = ({ onExport, onExportMobile }) => {
+const ModelerShareModalButton: FC<ShareModalProps> = ({
+  onExport,
+  onExportMobile,
+  versions: processVersions,
+}) => {
   const { processId } = useParams();
   const environment = useEnvironment();
   const [isOpen, setIsOpen] = useState(false);
@@ -276,6 +281,7 @@ const ModelerShareModalButton: FC<ShareModalProps> = ({ onExport, onExportMobile
           sharedAs={sharedAs as SharedAsType}
           shareTimestamp={shareTimestamp}
           refresh={checkIfProcessShared}
+          processVersions={processVersions}
         />
       ),
     },

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

@@ -39,7 +39,7 @@ type ModelerToolbarProps = {
   onOpenXmlEditor: () => void;
   canUndo: boolean;
   canRedo: boolean;
-  versions: { id: string; name: string; description: string }[];
+  versions: { id: string; name: string; description: string; createdOn: Date }[];
 };
 const ModelerToolbar = ({
   processId,
@@ -317,6 +317,7 @@ const ModelerToolbar = ({
               <ModelerShareModalButton
                 onExport={handleProcessExportModalToggle}
                 onExportMobile={handleProcessExportModalToggleMobile}
+                versions={versions}
               />
               <Tooltip title="Open Documentation">
                 <Button icon={<FilePdfOutlined />} onClick={handleOpenDocumentation} />

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

@@ -27,7 +27,7 @@ import { useSession } from 'next-auth/react';
 type ModelerProps = React.HTMLAttributes<HTMLDivElement> & {
   versionName?: string;
   process: { name: string; id: string; bpmn: string };
-  versions: { id: string; name: string; description: string }[];
+  versions: { id: string; name: string; description: string; createdOn: Date }[];
 };
 
 const Modeler = ({ versionName, process, versions, ...divProps }: ModelerProps) => {

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

@@ -6,6 +6,7 @@ import { toCaslResource } from '@/lib/ability/caslAbility';
 import AddUserControls from '@/components/add-user-controls';
 import { getProcess, getProcesses } from '@/lib/data/DTOs';
 import { getProcessBPMN } from '@/lib/data/processes';
+import { UnauthorizedError } from '@/lib/ability/abilityHelper';
 
 type ProcessProps = {
   params: { processId: string; environmentId: string };
@@ -24,7 +25,7 @@ const Process = async ({ params: { processId, environmentId }, searchParams }: P
   const processes = await getProcesses(activeEnvironment.spaceId, ability, false);
 
   if (!ability.can('view', toCaslResource('Process', process))) {
-    throw new Error('Forbidden.');
+    throw new UnauthorizedError();
   }
 
   const selectedVersionBpmn = selectedVersionId

src/management-system-v2/app/shared-viewer/process-document.tsx

@@ -267,7 +267,7 @@ const ProcessDocument: React.FC<ProcessDocumentProps> = ({
               <div className={cn(styles.Title, { [styles.TitlePage]: settings.titlepage })}>
                 <Title>{processData.name}</Title>
                 <div className={styles.TitleInfos}>
-                  <div>Owner: {processData.creatorId.split('|').pop()}</div>
+                  <div>Owner: {processData.creatorId?.split('|').pop()}</div>
                   {version.id ? (
                     <>
                       <div>Version: {version.name || version.id}</div>

src/management-system-v2/lib/data/legacy/_process.ts

@@ -57,13 +57,23 @@ export function getProcessMetaObjects() {
   return processMetaObjects;
 }
 
+function parseDates<T extends ProcessMetadata>(process: T) {
+  // The type says these fields are dates, but they're turned into a string when stored
+  process.lastEditedOn = new Date(process.lastEditedOn);
+  process.createdOn = new Date(process.createdOn);
+
+  return process;
+}
+
 /** Returns all processes for a user */
 export async function getProcesses(environmentId: string, ability?: Ability, includeBPMN = false) {
   const spaceProcesses = Object.values(processMetaObjects).filter(
     (process) => process.environmentId === environmentId,
   );
 
-  const processes = ability ? ability.filter('view', 'Process', spaceProcesses) : spaceProcesses;
+  const processes = (
+    ability ? ability.filter('view', 'Process', spaceProcesses) : spaceProcesses
+  ).map(parseDates);
 
   if (!includeBPMN) return processes;
   return processes.map((process) => ({ ...process, bpmn: getProcessBpmn(process.id) }));
@@ -76,7 +86,7 @@ export async function getProcess(processDefinitionsId: string, includeBPMN = fal
   }
 
   const bpmn = includeBPMN ? await getProcessBpmn(processDefinitionsId) : null;
-  return { ...process, bpmn };
+  return parseDates({ ...process, bpmn });
 }
 
 /**
@@ -236,7 +246,7 @@ export async function updateProcessMetaData(
 
   const newMetaData = {
     ...processMetaObjects[processDefinitionsId],
-    lastEdited: new Date().toUTCString(),
+    lastEditedOn: new Date(),
   };
 
   mergeIntoObject(newMetaData, metaChanges, true, true, true);