MS2/Templates

src/helper-modules/bpmn-helper/customSchema.json

@@ -327,11 +327,22 @@
       ]
     },
     {
-      "name": "templateId",
+      "name": "basedOnTemplateId",
       "extends": ["bpmn:Definitions"],
       "properties": [
         {
-          "name": "templateId",
+          "name": "basedOnTemplateId",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "basedOnTemplateVersion",
+      "extends": ["bpmn:Definitions"],
+      "properties": [
+        {
+          "name": "basedOnTemplateVersion",
           "isAttr": true,
           "type": "String"
         }

src/helper-modules/bpmn-helper/index.d.ts

@@ -24,6 +24,8 @@ declare const _exports: {
   validateCalledProcess(xml: string, processId: string): Promise<boolean>;
   setDefinitionsId(bpmn: string | object, id: string): Promise<string | object>;
   setDefinitionsName(bpmn: string | object, name: string): Promise<string | object>;
+  setDefinitionsTemplateId(bpmn: string | object, id: string): Promise<string | object>;
+  setDefinitionsTemplateVersion(bpmn: string | object, id: string): Promise<string | object>;
   setDefinitionsVersionInformation(
     bpmn: string | object,
     {
@@ -168,6 +170,8 @@ declare const _exports: {
   getIdentifyingInfos(bpmn: string | object): Promise<{
     id: string;
     originalId?: string;
+    basedOnTemplateId: string;
+    basedOnTemplateVersion: string;
     processIds: string[];
     name: string;
     description: string;

src/helper-modules/bpmn-helper/src/getters.d.ts

@@ -11,6 +11,14 @@ export type DefinitionsInfos = {
    * - definitions original id
    */
   originalId?: string;
+  /**
+   * - definitions template id
+   */
+  basedOnTemplateId?: string;
+  /**
+   * - definitions template version
+   */
+  basedOnTemplateVersion?: string;
   /**
    * - definitions name
    */
@@ -221,6 +229,8 @@ export function getDefinitionsName(bpmn: string | object): Promise<string | unde
  * @type {object}
  * @property {string} id - definitions id
  * @property {string} [originalId] - definitions original id
+ * @property {string} [basedOnTemplateId] - definitions template id
+ * @property {string} [basedOnTemplateVersion] - definitions template version
  * @property {string} [name] - definitions name
  * @property {string} [exporter] - definitions exporter
  * @property {string} [exporterVersion] - definitions exporterVersion
@@ -480,11 +490,13 @@ export function getTaskConstraintMapping(bpmn: string | object): Promise<{
  * and its name and description for human identification
  *
  * @param {(string|object)} bpmn - the process definition as XML string or BPMN-Moddle Object
- * @returns { Promise.<{ id: string, originalId?: string, processIds: string[], name: string, description: string }> } object containing the identifying information
+ * @returns { Promise.<{ id: string, originalId?: string, basedOnTemplateId: string, basedOnTemplateVersion: string, processIds: string[], name: string, description: string }> } object containing the identifying information
  */
 export function getIdentifyingInfos(bpmn: string | object): Promise<{
   id: string;
   originalId?: string;
+  basedOnTemplateId: string;
+  basedOnTemplateVersion: string;
   processIds: string[];
   name: string;
   description: string;

src/helper-modules/bpmn-helper/src/getters.js

@@ -49,6 +49,30 @@ async function getOriginalDefinitionsId(bpmn) {
   return bpmnObj.originalId;
 }
 
+/**
+ * Returns the value of the basedOnTemplateId attribute in the given process definition
+ * the basedOnTemplateId is the id the process has which was used as a template
+ *
+ * @param {(string|object)} bpmn - the process definition as XML string or BPMN-Moddle Object
+ * @returns {(Promise.<string|undefined>)} The basedOnTemplateId stored in the definitions field of the given bpmn process
+ */
+async function getDefinitionsTemplateId(bpmn) {
+  const bpmnObj = typeof bpmn === 'string' ? await toBpmnObject(bpmn) : bpmn;
+  return bpmnObj.basedOnTemplateId;
+}
+
+/**
+ * Returns the value of the basedOnTemplateVersion attribute in the given process definition
+ * the basedOnTemplateVersion is the id the process version has which was used as a template
+ *
+ * @param {(string|object)} bpmn - the process definition as XML string or BPMN-Moddle Object
+ * @returns {(Promise.<string|undefined>)} The basedOnTemplateVersion stored in the definitions field of the given bpmn process
+ */
+async function getDefinitionsTemplateVersion(bpmn) {
+  const bpmnObj = typeof bpmn === 'string' ? await toBpmnObject(bpmn) : bpmn;
+  return bpmnObj.basedOnTemplateVersion;
+}
+
 /**
  * Returns the name of the given bpmn process definition
  *
@@ -129,6 +153,8 @@ function getProcessDocumentationByObject(processObject) {
  * @type {object}
  * @property {string} id - definitions id
  * @property {string} [originalId] - definitions original id
+ * @property {string} [basedOnTemplateId] - definitions template id
+ * @property {string} [basedOnTemplateVersion] - definitions template version
  * @property {string} [name] - definitions name
  * @property {string} [exporter] - definitions exporter
  * @property {string} [exporterVersion] - definitions exporterVersion
@@ -146,6 +172,8 @@ async function getDefinitionsInfos(bpmn) {
   return {
     id: await getDefinitionsId(bpmnObj),
     originalId: await getOriginalDefinitionsId(bpmnObj),
+    basedOnTemplateId: await getDefinitionsTemplateId(bpmnObj),
+    basedOnTemplateVersion: await getDefinitionsTemplateVersion(bpmnObj),
     name: await getDefinitionsName(bpmnObj),
     exporter: bpmnObj.exporter,
     exporterVersion: bpmnObj.exporterVersion,
@@ -606,12 +634,13 @@ async function getProcessConstraints(bpmn) {
  * and its name and description for human identification
  *
  * @param {(string|object)} bpmn - the process definition as XML string or BPMN-Moddle Object
- * @returns { Promise.<{ id: string, originalId?: string, processIds: string[], name: string, description: string }> } object containing the identifying information
+ * @returns { Promise.<{ id: string, originalId?: string, basedOnTemplateId: string, basedOnTemplateVersion: string, processIds: string[], name: string, description: string }> } object containing the identifying information
  */
 async function getIdentifyingInfos(bpmn) {
   const bpmnObj = typeof bpmn === 'string' ? await toBpmnObject(bpmn) : bpmn;
 
-  const { id, originalId, name } = await getDefinitionsInfos(bpmnObj);
+  const { id, originalId, name, basedOnTemplateId, basedOnTemplateVersion } =
+    await getDefinitionsInfos(bpmnObj);
 
   const processes = getElementsByTagName(bpmnObj, 'bpmn:Process');
 
@@ -624,7 +653,15 @@ async function getIdentifyingInfos(bpmn) {
     description = '';
   }
 
-  return { id, originalId, processIds, name, description };
+  return {
+    id,
+    originalId,
+    basedOnTemplateId,
+    basedOnTemplateVersion,
+    processIds,
+    name,
+    description,
+  };
 }
 
 /**

src/helper-modules/bpmn-helper/src/setters.d.ts

@@ -17,6 +17,26 @@ export function setDefinitionsId(bpmn: string | object, id: string): Promise<str
  * @returns {Promise<string|object>} the modified BPMN process as bpmn-moddle object or XML string based on input
  */
 export function setDefinitionsName(bpmn: string | object, name: string): Promise<string | object>;
+/**
+ *  Sets basedOnTemplateId in definitions element to given id,
+ * @param {(string|object)} bpmn - the process definition as XML string or BPMN-Moddle Object
+ * @param {string} id - the id we want to set the definitions element to
+ * @returns {Promise<string|object>} the modified BPMN process as bpmn-moddle object or XML string based on input
+ */
+export function setDefinitionsTemplateId(
+  bpmn: string | object,
+  id: string,
+): Promise<string | object>;
+/**
+ *  Sets basedOnTemplateId in definitions element to given id,
+ * @param {(string|object)} bpmn - the process definition as XML string or BPMN-Moddle Object
+ * @param {string} id - the id we want to set the definitions element to
+ * @returns {Promise<string|object>} the modified BPMN process as bpmn-moddle object or XML string based on input
+ */
+export function setDefinitionsTemplateVersion(
+  bpmn: string | object,
+  id: string,
+): Promise<string | object>;
 /**
  * Will set a version in the definitions element
  *

src/helper-modules/bpmn-helper/src/setters.js

@@ -54,6 +54,30 @@ async function setDefinitionsName(bpmn, name) {
   });
 }
 
+/**
+ *  Sets basedOnTemplateId in definitions element to given id,
+ * @param {(string|object)} bpmn - the process definition as XML string or BPMN-Moddle Object
+ * @param {string} id - the id we want to set the definitions element to
+ * @returns {Promise<string|object>} the modified BPMN process as bpmn-moddle object or XML string based on input
+ */
+async function setDefinitionsTemplateId(bpmn, id) {
+  return await manipulateElementsByTagName(bpmn, 'bpmn:Definitions', (definitions) => {
+    definitions.basedOnTemplateId = id;
+  });
+}
+
+/**
+ *  Sets basedOnTemplateId in definitions element to given id,
+ * @param {(string|object)} bpmn - the process definition as XML string or BPMN-Moddle Object
+ * @param {string} id - the id we want to set the definitions element to
+ * @returns {Promise<string|object>} the modified BPMN process as bpmn-moddle object or XML string based on input
+ */
+async function setDefinitionsTemplateVersion(bpmn, id) {
+  return await manipulateElementsByTagName(bpmn, 'bpmn:Definitions', (definitions) => {
+    definitions.basedOnTemplateVersion = id;
+  });
+}
+
 /**
  * Will set a version in the definitions element
  *
@@ -578,6 +602,8 @@ async function removeColorFromAllElements(bpmn) {
 module.exports = {
   setDefinitionsId,
   setDefinitionsName,
+  setDefinitionsTemplateId,
+  setDefinitionsTemplateVersion,
   setDefinitionsVersionInformation,
   setProcessId,
   setTemplateId,

src/management-system-v2/app/(auth)/signin/layout.tsx

@@ -63,6 +63,7 @@ const SigninLayout: FC<PropsWithChildren> = ({ children }) => {
               createdBy: '',
               lastEditedOn: new Date(),
               environmentId: '',
+              category: 'process',
             }}
           />
         </Content>

src/management-system-v2/app/(dashboard)/[environmentId]/executions/deployments-modal.tsx

@@ -182,6 +182,7 @@ const DeploymentsModal = ({
         createdBy: '',
         lastEditedOn: null,
         environmentId: '',
+        category: 'process',
       },
       ...initialProcesses,
     ];
@@ -234,13 +235,14 @@ const DeploymentsModal = ({
           createdBy: '',
           lastEditedOn: new Date(),
           environmentId: '',
+          category: 'process',
         },
         ...folderContents,
       ]);
     } else {
       setProcesses(folderContents);
     }
-    setFolder(folder);
+    setFolder(folder as Folder);
   };
 
   const dropdownItems: MenuProps['items'] = [

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

@@ -41,7 +41,7 @@ async function Executions({ environmentId }: { environmentId: string }) {
     await Promise.all([
       getUsersFavourites(),
       (async () => {
-        const rootFolder = await getRootFolder(activeEnvironment.spaceId, ability);
+        const rootFolder = await getRootFolder(activeEnvironment.spaceId, 'process', ability);
         const folder = await getFolderById(rootFolder.id);
         const folderContents = await getFolderContents(folder.id, ability);
         return [folder, folderContents];

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

@@ -75,7 +75,7 @@ const DashboardLayout = async ({
       ...children,
       {
         key: 'processes-templates',
-        label: <Link href={spaceURL(activeEnvironment, `/processes`)}>Templates</Link>,
+        label: <Link href={spaceURL(activeEnvironment, `/templates`)}>Templates</Link>,
         icon: <SnippetsOutlined />,
       },
     ];

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

@@ -43,6 +43,7 @@ const VersionToolbar = ({ processId }: VersionToolbarProps) => {
                       ...values,
                       originalId: processId as string,
                       originalVersion: selectedVersionId,
+                      type: 'process',
                     },
                   ],
                   environment.spaceId,

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

@@ -140,7 +140,7 @@ const Wrapper = ({
                   <AuthCan create Process>
                     <Divider style={{ margin: '4px 0' }} />
                     <Space style={{ display: 'flex', justifyContent: 'center' }}>
-                      <ProcessCreationButton type="text" icon={<PlusOutlined />}>
+                      <ProcessCreationButton icon={<PlusOutlined />}>
                         Create new process
                       </ProcessCreationButton>
                     </Space>

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

@@ -1,4 +1,4 @@
-import Processes from '@/components/processes';
+import Processes, { Template } from '@/components/processes';
 import Content from '@/components/content';
 import { Button, Space } from 'antd';
 import { getCurrentEnvironment } from '@/components/auth';
@@ -16,6 +16,7 @@ import EllipsisBreadcrumb from '@/components/ellipsis-breadcrumb';
 import { ComponentProps } from 'react';
 import { spaceURL } from '@/lib/utils';
 import { getFolderById, getRootFolder, getFolderContents } from '@/lib/data/db/folders';
+import { getReleasedProcessTemplates } from '@/lib/data/db/process';
 export type ListItem = ProcessMetadata | (Folder & { type: 'folder' });
 
 const ProcessesPage = async ({
@@ -27,14 +28,17 @@ const ProcessesPage = async ({
 
   const favs = await getUsersFavourites();
 
-  const rootFolder = await getRootFolder(activeEnvironment.spaceId, ability);
+  const rootFolderProcessPage = await getRootFolder(activeEnvironment.spaceId, 'process', ability);
 
   const folder = await getFolderById(
-    params.folderId ? decodeURIComponent(params.folderId) : rootFolder.id,
+    params.folderId ? decodeURIComponent(params.folderId) : rootFolderProcessPage.id,
   );
 
   const folderContents = await getFolderContents(folder.id, ability);
 
+  const releasedTemplates = await getReleasedProcessTemplates(activeEnvironment.spaceId, ability);
+
+  //folderContents.push(...templateFolderContents);
   const pathToFolder: ComponentProps<typeof EllipsisBreadcrumb>['items'] = [];
   let currentFolder: Folder | null = folder;
   do {
@@ -66,7 +70,12 @@ const ProcessesPage = async ({
         }
       >
         <Space direction="vertical" size="large" style={{ display: 'flex', height: '100%' }}>
-          <Processes processes={folderContents} favourites={favs as string[]} folder={folder} />
+          <Processes
+            processes={folderContents}
+            favourites={favs as string[]}
+            folder={folder}
+            releasedTemplates={releasedTemplates}
+          />
         </Space>
       </Content>
     </>

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

@@ -23,6 +23,7 @@ const Projects = async ({ params }: { params: { environmentId: string } }) => {
             createdBy: '',
             lastEditedOn: new Date(),
             environmentId: '',
+            category: 'process',
           }}
         />
       </Space>

src/management-system-v2/app/(dashboard)/[environmentId]/templates/_loading.tsx

@@ -0,0 +1,14 @@
+import Content from '@/components/content';
+import { Skeleton, Space } from 'antd';
+
+const TemplatesSkeleton = () => {
+  return (
+    <Content title="Templates">
+      <Space direction="vertical" size="large" style={{ display: 'flex', height: '100%' }}>
+        <Skeleton active />
+      </Space>
+    </Content>
+  );
+};
+
+export default TemplatesSkeleton;

src/management-system-v2/app/(dashboard)/[environmentId]/templates/folder/[folderId]/not-logged-in-fallback.tsx

@@ -0,0 +1,20 @@
+'use client';
+
+import { Button, Result } from 'antd';
+import { signIn } from 'next-auth/react';
+import { LoginOutlined } from '@ant-design/icons';
+
+const NotLoggedInFallback = () => (
+  <Result
+    status="403"
+    title="You're not logged in"
+    subTitle="Sorry, you have to be logged in to use the app"
+    extra={
+      <Button type="primary" icon={<LoginOutlined />} onClick={() => signIn()}>
+        Login
+      </Button>
+    }
+  />
+);
+
+export default NotLoggedInFallback;