Merge pull request #734 from PROCEED-Labs/instance/documentation

Documentation Page: Features & Refactoring

Author: jjoderis

src/management-system-v2/app/(dashboard)/[environmentId]/(automation)/executions/[processId]/instance-coloring.ts

@@ -23,7 +23,7 @@ export const colorOptions = [
 ] as const;
 export type ColorOptions = (typeof colorOptions)[number]['key'];
 
-function getExecutionColor(executionState: string, wasInterrupted: boolean) {
+export function getExecutionColor(executionState: string, wasInterrupted: boolean) {
   switch (executionState) {
     case 'COMPLETED':
       return wasInterrupted ? 'yellow' : 'green';

src/management-system-v2/app/(dashboard)/[environmentId]/(automation)/executions/[processId]/instance-tokens.ts

@@ -6,7 +6,10 @@ import type { Connection } from 'diagram-js/lib/util/Elements';
 
 type TokenInfo = InstanceInfo['tokens'][number];
 
-function getTokenPosition(token: TokenInfo, bpmnViewer: BPMNCanvasRef) {
+export function getTokenPosition(
+  token: TokenInfo,
+  bpmnViewer: { getElement: (id: string) => Element | undefined },
+) {
   let targetFlowElement: Element | Connection | undefined = bpmnViewer.getElement(
     token.currentFlowElementId,
   );
@@ -108,7 +111,7 @@ function getTokenTooltip(token: InstanceInfo['tokens'][number], instance: Instan
   return token.state;
 }
 
-function getTokenColor(token: TokenInfo, instance: InstanceInfo) {
+export function getTokenColor(token: TokenInfo, instance: InstanceInfo) {
   if (isPausingToken(token, instance)) {
     return '#faad14';
   }

src/management-system-v2/app/(dashboard)/[environmentId]/(automation)/executions/[processId]/process-deployment-view.tsx

@@ -42,6 +42,9 @@ import {
 import { useSession } from 'next-auth/react';
 import { useEnvironment } from '@/components/auth-can';
 
+import { GrDocumentUser } from 'react-icons/gr';
+import { handleOpenDocumentation } from '../../../processes/processes-helper';
+
 export default function ProcessDeploymentView({
   processId,
   initialDeploymentInfo,
@@ -488,6 +491,23 @@ export default function ProcessDeploymentView({
 
             <Space style={{ alignItems: 'start' }}>
               <ToolbarGroup>
+                {selectedInstance && (
+                  <Tooltip title="View Instance Documentation">
+                    <Button
+                      aria-label="view-instance-documentation"
+                      icon={<GrDocumentUser />}
+                      onClick={() =>
+                        handleOpenDocumentation(
+                          processId,
+                          spaceId,
+                          selectedInstance.processVersion,
+                          selectedInstance.processInstanceId,
+                          selectedColoring,
+                        )
+                      }
+                    />
+                  </Tooltip>
+                )}
                 <Tooltip title={infoPanelOpen ? 'Close Info Panel' : 'Open Info Panel'}>
                   <Button
                     icon={<InfoCircleOutlined />}

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

@@ -419,7 +419,11 @@ const ModelerToolbar = ({
                   aria-label="view-documentation"
                   icon={<GrDocumentUser />}
                   onClick={() => {
-                    handleOpenDocumentation(processId, selectedVersionId || undefined);
+                    handleOpenDocumentation(
+                      processId,
+                      environment.spaceId,
+                      selectedVersionId || undefined,
+                    );
                   }}
                 />
               </Tooltip>

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

@@ -1,20 +1,30 @@
 import { generateSharedViewerUrl } from '@/lib/sharing/process-sharing';
 import { message } from 'antd';
+import { ColorOptions } from '../(automation)/executions/[processId]/instance-coloring';
 
 export async function handleOpenDocumentation(
   processId: string,
-  selectedVersionId?: string | null,
+  spaceId: string,
+  versionId?: string | null,
+  instanceId?: string,
+  coloring?: ColorOptions,
 ) {
   // the timestamp does not matter here since it is overridden by the user being an owner of the process
   try {
     const url = await generateSharedViewerUrl(
-      { processId, timestamp: 0 },
-      selectedVersionId || undefined,
+      { processId, timestamp: 0, spaceId },
+      versionId || undefined,
+      undefined,
+      instanceId,
+      coloring,
     );
 
     // open the documentation page in a new tab (unless it is already open in which case just show the tab)
     if (typeof url === 'string') {
-      window.open(url, `${processId}-${selectedVersionId}-tab`);
+      const tabKey = instanceId
+        ? `${processId}-${instanceId}-tab`
+        : `${processId}-${versionId}-tab`;
+      window.open(url, tabKey);
     } else {
       message.error('Failed to generate the documentation URL.');
     }

…ared-viewer/process-document.module.scss …ared-viewer/document-content.module.scsssrc/management-system-v2/app/shared-viewer/process-document.module.scss renamed to src/management-system-v2/app/shared-viewer/document-content.module.scss src/management-system-v2/app/shared-viewer/process-document.module.scss renamed to src/management-system-v2/app/shared-viewer/document-content.module.scss

@@ -4,8 +4,22 @@
   max-width: 1200px;
   background-color: white;
 
+  overflow: hidden;
   margin: 0 auto;
 
+  @media print {
+    table {
+      width: 100%;
+      max-width: 100%;
+      table-layout: fixed;
+      word-break: break-word;
+    }
+    td,
+    th {
+      word-break: break-word;
+      overflow-wrap: break-word;
+    }
+  }
   @media print {
     // needed so that the table header workaround below actually works
     display: table;
@@ -34,6 +48,11 @@
   }
 
   .Main {
+    @media print {
+      :global(.bpmn-root-svg) {
+        max-height: fit-content;
+      }
+    }
     @media screen {
       width: 95%;
       margin: auto;
@@ -42,6 +61,7 @@
     @media print {
       padding: 0 40pt 0 40pt;
       box-sizing: border-box;
+      display: block;
     }
 
     .Title {
@@ -52,6 +72,19 @@
         flex-direction: column;
         justify-content: center;
       }
+
+      .TitleHeader {
+        text-align: center;
+      }
+
+      .TitleProcessId {
+        font-size: 1.3em;
+        color: #666;
+        margin-bottom: 4px;
+        letter-spacing: 0.05em;
+        font-weight: 500;
+        text-align: center;
+      }
     }
 
     // used when the option that the title should be its own page is selected
@@ -71,7 +104,7 @@
       }
 
       div {
-        font-size: 1.3em;
+        font-size: 14px;
       }
     }
 
@@ -94,32 +127,18 @@
     }
 
     .ElementPage {
-      margin-top: 7dvh;
+      margin-top: 2.7dvh;
 
       .ElementOverview {
         break-inside: avoid;
-
-        .ElementCanvas {
-          display: flex;
-          justify-content: center;
-
-          @media print {
-            max-height: 95%;
-            width: 100%;
-          }
-
-          svg {
-            max-width: 100%;
-            height: 100%;
-          }
-        }
       }
 
       .MetaInformation {
-        margin-top: 50px;
+        margin-top: 20px;
 
         // prevent the header from being put at the end of a page with the content starting on the next page
-        h3 {
+        h3,
+        h4 {
           break-after: avoid;
         }
 
@@ -134,15 +153,48 @@
     .ContainerPage {
       // start a new page for elements that contain other new elements and start with the container element at the top of the page
       break-before: always;
+      page-break-before: always;
 
       @media print {
-        margin-top: 0;
+        display: block;
       }
     }
 
+    // Print-specific styles
+    @media print {
+      // Page breaks for H1 sections
+      :global(h1.ant-typography) {
+        page-break-before: always;
+        break-before: always;
+      }
+
+      // First H1 should not have a page break before it
+      :global(h1.ant-typography:first-of-type) {
+        page-break-before: avoid;
+        break-before: avoid;
+      }
+      // Prevent headings from being orphaned at page bottom
+      :global(h2.ant-typography),
+      :global(h3.ant-typography),
+      :global(h4.ant-typography),
+      :global(h5.ant-typography) {
+        break-after: avoid;
+      }
+
+      p {
+        margin-top: 2pt;
+        margin-bottom: 2pt;
+      }
+    }
     :nth-child(1 of .ContainerPage) {
       // the first page containing the main process diagram might follow directly after the table of contents based on the settings selected by the user
       break-before: auto;
     }
   }
+  .ElementPage.SubprocessChild {
+    margin-top: 2dvh;
+    @media print {
+      margin-top: 20pt;
+    }
+  }
 }