Fix JS error when using workflow instance list view in standalone mode

Fixes #1235

src/designer/elsa-workflows-studio/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elsa-workflows/elsa-workflows-studio",
-  "version": "2.1.3",
+  "version": "2.1.4",
   "description": "Elsa Workflow Studio is a collection of web components to manage Elsa workflows stored on an Elsa Workflows server.",
   "repository": {
     "type": "git",

src/designer/elsa-workflows-studio/src/components.d.ts

@@ -5,7 +5,7 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
-import { ActivityDefinitionProperty, ActivityDescriptor, ActivityModel, ActivityPropertyDescriptor, SelectListItem, VersionOptions, WorkflowBlueprint, WorkflowDefinition, WorkflowExecutionLogRecord, WorkflowModel } from "./models";
+import { ActivityDefinitionProperty, ActivityDescriptor, ActivityModel, ActivityPropertyDescriptor, OrderBy, SelectListItem, VersionOptions, WorkflowBlueprint, WorkflowDefinition, WorkflowExecutionLogRecord, WorkflowModel, WorkflowStatus } from "./models";
 import { LocationSegments, MatchResults, RouterHistory } from "@stencil/router";
 import { MenuItem } from "./components/controls/elsa-context-menu/models";
 import { ActivityContextMenuState, LayoutDirection, WorkflowDesignerMode } from "./components/designers/tree/elsa-designer-tree/models";
@@ -14,6 +14,7 @@ import { AxiosInstance, AxiosRequestConfig } from "axios";
 import { Service } from "axios-middleware";
 import { MonacoValueChangedArgs } from "./components/controls/elsa-monaco/elsa-monaco";
 import { Map } from "./utils/utils";
+import { PagerData } from "./components/controls/elsa-pager/elsa-pager";
 import { ToastNotificationOptions } from "./components/shared/elsa-toast-notification/elsa-toast-notification";
 import { WebhookDefinition } from "./models/webhook";
 export namespace Components {
@@ -252,7 +253,10 @@ export namespace Components {
     }
     interface ElsaWorkflowInstanceListScreen {
         "history"?: RouterHistory;
+        "orderBy"?: OrderBy;
         "serverUrl": string;
+        "workflowId"?: string;
+        "workflowStatus"?: WorkflowStatus;
     }
     interface ElsaWorkflowInstanceViewerScreen {
         "getServerUrl": () => Promise<string>;
@@ -734,6 +738,7 @@ declare namespace LocalJSX {
     interface ElsaPager {
         "history"?: RouterHistory;
         "location"?: LocationSegments;
+        "onPaged"?: (event: CustomEvent<PagerData>) => void;
         "page"?: number;
         "pageSize"?: number;
         "totalCount"?: number;
@@ -850,7 +855,10 @@ declare namespace LocalJSX {
     }
     interface ElsaWorkflowInstanceListScreen {
         "history"?: RouterHistory;
+        "orderBy"?: OrderBy;
         "serverUrl"?: string;
+        "workflowId"?: string;
+        "workflowStatus"?: WorkflowStatus;
     }
     interface ElsaWorkflowInstanceViewerScreen {
         "serverUrl"?: string;

src/designer/elsa-workflows-studio/src/components/controls/elsa-pager/elsa-pager.tsx

@@ -1,172 +1,183 @@
 import {Component, Event, EventEmitter, h, Prop} from '@stencil/core';
-import {LocationSegments, RouterHistory, injectHistory } from "@stencil/router";
+import {LocationSegments, RouterHistory, injectHistory} from "@stencil/router";
 import {parseQuery, queryToString} from "../../../utils/utils";
 
+export interface PagerData {
+  page: number;
+  pageSize: number;
+  totalCount: number;
+}
+
 @Component({
-    tag: 'elsa-pager',
-    shadow: false,
+  tag: 'elsa-pager',
+  shadow: false,
 })
 export class ElsaPager {
 
-    @Prop() page: number;
-    @Prop() pageSize: number;
-    @Prop() totalCount: number;
-    @Prop() location: LocationSegments;
-    @Prop() history?: RouterHistory;
+  @Prop() page: number;
+  @Prop() pageSize: number;
+  @Prop() totalCount: number;
+  @Prop() location: LocationSegments;
+  @Prop() history?: RouterHistory;
 
-    basePath: string;
+  @Event() paged: EventEmitter<PagerData>
 
-    componentWillLoad() {
-        this.basePath = !!this.location ? this.location.pathname : document.location.pathname;
-    }
+  basePath: string;
 
-    navigate(path: string) {
-        if (this.history) {
-            this.history.push(path);
-            return;
-        }
+  componentWillLoad() {
+    this.basePath = !!this.location ? this.location.pathname : document.location.pathname;
+  }
 
-        document.location.pathname = path;
+  navigate(path: string, page: number) {
+
+    if (this.history) {
+      this.history.push(path);
+      return;
     }
-
-    onNavigateClick(e: Event) {
-        const anchor = e.currentTarget as HTMLAnchorElement;
-
-        e.preventDefault();
-        this.navigate(`${anchor.pathname}${anchor.search}`);
+    else {
+      this.paged.emit({page, pageSize: this.pageSize, totalCount: this.totalCount});
+    }
+  }
+
+  onNavigateClick(e: Event, page: number) {
+    const anchor = e.currentTarget as HTMLAnchorElement;
+
+    e.preventDefault();
+    this.navigate(`${anchor.pathname}${anchor.search}`, page);
+  }
+
+  render() {
+    const page = this.page;
+    const pageSize = this.pageSize;
+    const totalCount = this.totalCount;
+    const basePath = this.basePath;
+
+    const from = page * pageSize + 1;
+    const to = Math.min(from + pageSize, totalCount);
+    const pageCount = Math.round(((totalCount - 1) / pageSize) + 0.5);
+
+    const maxPageButtons = 10;
+    const fromPage = Math.max(0, page - maxPageButtons / 2);
+    const toPage = Math.min(pageCount, fromPage + maxPageButtons);
+    const self = this;
+    const currentQuery = !!this.history ? parseQuery(this.history.location.search) : {page, pageSize};
+
+    currentQuery['pageSize'] = pageSize;
+
+    const getNavUrl = (page: number) => {
+      const query = {...currentQuery, 'page': page};
+      return `${basePath}?${queryToString(query)}`;
+    };
+
+    const renderPreviousButton = function () {
+      if (page <= 0)
+        return;
+
+      return <a href={`${getNavUrl(page - 1)}`}
+                onClick={e => self.onNavigateClick(e, page - 1)}
+                class="elsa-relative elsa-inline-flex elsa-items-center elsa-px-4 elsa-py-2 elsa-border elsa-border-gray-300 elsa-text-sm elsa-leading-5 elsa-font-medium elsa-rounded-md elsa-text-gray-700 elsa-bg-white hover:elsa-text-gray-500 focus:elsa-outline-none focus:elsa-shadow-outline-blue focus:elsa-border-blue-300 active:elsa-bg-gray-100 active:elsa-text-gray-700 elsa-transition elsa-ease-in-out elsa-duration-150">
+        Previous
+      </a>
     }
 
-    render() {
-        const page = this.page;
-        const pageSize = this.pageSize;
-        const totalCount = this.totalCount;
-        const basePath = this.basePath;
-
-        const from = page * pageSize + 1;
-        const to = Math.min(from + pageSize, totalCount);
-        const pageCount = Math.round(((totalCount - 1) / pageSize) + 0.5);
-
-        const maxPageButtons = 10;
-        const fromPage = Math.max(0, page - maxPageButtons / 2);
-        const toPage = Math.min(pageCount, fromPage + maxPageButtons);
-        const self = this;
-        const currentQuery = parseQuery(this.history.location.search);
-
-        currentQuery['pageSize'] = pageSize;
-
-        const getNavUrl = (page: number) => {
-            const query = {...currentQuery, 'page': page};
-            return `${basePath}?${queryToString(query)}`;
-        };
-
-        const renderPreviousButton = function () {
-            if (page <= 0)
-                return;
-
-            return <a href={`${getNavUrl(page - 1)}`}
-                      onClick={e => self.onNavigateClick(e)}
-                      class="elsa-relative elsa-inline-flex elsa-items-center elsa-px-4 elsa-py-2 elsa-border elsa-border-gray-300 elsa-text-sm elsa-leading-5 elsa-font-medium elsa-rounded-md elsa-text-gray-700 elsa-bg-white hover:elsa-text-gray-500 focus:elsa-outline-none focus:elsa-shadow-outline-blue focus:elsa-border-blue-300 active:elsa-bg-gray-100 active:elsa-text-gray-700 elsa-transition elsa-ease-in-out elsa-duration-150">
-                Previous
-            </a>
-        }
-
-        const renderNextButton = function () {
-            if (page >= pageCount)
-                return;
+    const renderNextButton = function () {
+      if (page >= pageCount)
+        return;
 
-            return <a href={`/${getNavUrl(page + 1)}`}
-                      onClick={e => self.onNavigateClick(e)}
-                      class="elsa-ml-3 elsa-relative elsa-inline-flex elsa-items-center elsa-px-4 elsa-py-2 elsa-border elsa-border-gray-300 elsa-text-sm elsa-leading-5 elsa-font-medium elsa-rounded-md elsa-text-gray-700 elsa-bg-white hover:elsa-text-gray-500 focus:elsa-outline-none focus:elsa-shadow-outline-blue focus:elsa-border-blue-300 active:elsa-bg-gray-100 active:elsa-text-gray-700 elsa-transition elsa-ease-in-out elsa-duration-150">
-                Next
-            </a>
-        }
+      return <a href={`/${getNavUrl(page + 1)}`}
+                onClick={e => self.onNavigateClick(e, page + 1)}
+                class="elsa-ml-3 elsa-relative elsa-inline-flex elsa-items-center elsa-px-4 elsa-py-2 elsa-border elsa-border-gray-300 elsa-text-sm elsa-leading-5 elsa-font-medium elsa-rounded-md elsa-text-gray-700 elsa-bg-white hover:elsa-text-gray-500 focus:elsa-outline-none focus:elsa-shadow-outline-blue focus:elsa-border-blue-300 active:elsa-bg-gray-100 active:elsa-text-gray-700 elsa-transition elsa-ease-in-out elsa-duration-150">
+        Next
+      </a>
+    }
 
-        const renderChevronLeft = function () {
-            if (page <= 0)
-                return;
-
-            return (
-                <a href={`${getNavUrl(page - 1)}`}
-                   onClick={e => self.onNavigateClick(e)}
-                   class="elsa-relative elsa-inline-flex elsa-items-center elsa-px-2 elsa-py-2 elsa-rounded-l-md elsa-border elsa-border-gray-300 elsa-bg-white elsa-text-sm elsa-leading-5 elsa-font-medium elsa-text-gray-500 hover:elsa-text-gray-400 focus:elsa-z-10 focus:elsa-outline-none focus:elsa-border-blue-300 focus:elsa-shadow-outline-blue active:elsa-bg-gray-100 active:elsa-text-gray-500 elsa-transition elsa-ease-in-out elsa-duration-150"
-                   aria-label="Previous">
-                    <svg class="elsa-h-5 elsa-w-5" x-description="Heroicon name: chevron-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
-                        <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd"/>
-                    </svg>
-                </a>);
-        }
+    const renderChevronLeft = function () {
+      if (page <= 0)
+        return;
+
+      return (
+        <a href={`${getNavUrl(page - 1)}`}
+           onClick={e => self.onNavigateClick(e, page - 1)}
+           class="elsa-relative elsa-inline-flex elsa-items-center elsa-px-2 elsa-py-2 elsa-rounded-l-md elsa-border elsa-border-gray-300 elsa-bg-white elsa-text-sm elsa-leading-5 elsa-font-medium elsa-text-gray-500 hover:elsa-text-gray-400 focus:elsa-z-10 focus:elsa-outline-none focus:elsa-border-blue-300 focus:elsa-shadow-outline-blue active:elsa-bg-gray-100 active:elsa-text-gray-500 elsa-transition elsa-ease-in-out elsa-duration-150"
+           aria-label="Previous">
+          <svg class="elsa-h-5 elsa-w-5" x-description="Heroicon name: chevron-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+            <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd"/>
+          </svg>
+        </a>);
+    }
 
-        const renderChevronRight = function () {
-            if (page >= pageCount - 1)
-                return;
-
-            return (
-                <a href={`${getNavUrl(page + 1)}`}
-                   onClick={e => self.onNavigateClick(e)}
-                   class="-elsa-ml-px elsa-relative elsa-inline-flex elsa-items-center elsa-px-2 elsa-py-2 elsa-rounded-r-md elsa-border elsa-border-gray-300 elsa-bg-white elsa-text-sm elsa-leading-5 elsa-font-medium elsa-text-gray-500 hover:elsa-text-gray-400 focus:elsa-z-10 focus:elsa-outline-none focus:elsa-border-blue-300 focus:elsa-shadow-outline-blue active:elsa-bg-gray-100 active:elsa-text-gray-500 elsa-transition elsa-ease-in-out elsa-duration-150"
-                   aria-label="Next">
-                    <svg class="elsa-h-5 elsa-w-5" x-description="Heroicon name: chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
-                        <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"/>
-                    </svg>
-                </a>
-            );
-        }
+    const renderChevronRight = function () {
+      if (page >= pageCount - 1)
+        return;
+
+      return (
+        <a href={`${getNavUrl(page + 1)}`}
+           onClick={e => self.onNavigateClick(e, page + 1)}
+           class="-elsa-ml-px elsa-relative elsa-inline-flex elsa-items-center elsa-px-2 elsa-py-2 elsa-rounded-r-md elsa-border elsa-border-gray-300 elsa-bg-white elsa-text-sm elsa-leading-5 elsa-font-medium elsa-text-gray-500 hover:elsa-text-gray-400 focus:elsa-z-10 focus:elsa-outline-none focus:elsa-border-blue-300 focus:elsa-shadow-outline-blue active:elsa-bg-gray-100 active:elsa-text-gray-500 elsa-transition elsa-ease-in-out elsa-duration-150"
+           aria-label="Next">
+          <svg class="elsa-h-5 elsa-w-5" x-description="Heroicon name: chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+            <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"/>
+          </svg>
+        </a>
+      );
+    }
 
-        const renderPagerButtons = function () {
-            const buttons = [];
+    const renderPagerButtons = function () {
+      const buttons = [];
 
-            for (let i = fromPage; i < toPage; i++) {
-                const isCurrent = page == i;
-                const isFirst = i == fromPage;
-                const isLast = i == toPage - 1;
-                const leftRoundedClass = isFirst && isCurrent ? 'elsa-rounded-l-md' : '';
-                const rightRoundedClass = isLast && isCurrent ? 'elsa-rounded-r-md' : '';
+      for (let i = fromPage; i < toPage; i++) {
+        const isCurrent = page == i;
+        const isFirst = i == fromPage;
+        const isLast = i == toPage - 1;
+        const leftRoundedClass = isFirst && isCurrent ? 'elsa-rounded-l-md' : '';
+        const rightRoundedClass = isLast && isCurrent ? 'elsa-rounded-r-md' : '';
 
-                if (isCurrent) {
-                    buttons.push(<span class={`-elsa-ml-px elsa-relative elsa-inline-flex elsa-items-center elsa-px-4 elsa-py-2 elsa-border elsa-border-gray-300 elsa-text-sm elsa-leading-5 elsa-font-medium elsa-bg-blue-600 elsa-text-white ${leftRoundedClass} ${rightRoundedClass}`}>
+        if (isCurrent) {
+          buttons.push(<span
+            class={`-elsa-ml-px elsa-relative elsa-inline-flex elsa-items-center elsa-px-4 elsa-py-2 elsa-border elsa-border-gray-300 elsa-text-sm elsa-leading-5 elsa-font-medium elsa-bg-blue-600 elsa-text-white ${leftRoundedClass} ${rightRoundedClass}`}>
                         {i + 1}
                     </span>);
-                } else {
-                    buttons.push(<a href={`${getNavUrl(i)}`}
-                                    onClick={e => self.onNavigateClick(e)}
-                                    class={`-elsa-ml-px elsa-relative elsa-inline-flex elsa-items-center elsa-px-4 elsa-py-2 elsa-border elsa-border-gray-300 elsa-bg-white elsa-text-sm elsa-leading-5 elsa-font-medium elsa-text-gray-700 hover:elsa-text-gray-500 focus:elsa-z-10 focus:elsa-outline-none active:elsa-bg-gray-100 active:elsa-text-gray-700 elsa-transition elsa-ease-in-out elsa-duration-150 ${leftRoundedClass}`}>
-                        {i + 1}
-                    </a>)
-                }
-            }
-
-            return buttons;
+        } else {
+          buttons.push(<a href={`${getNavUrl(i)}`}
+                          onClick={e => self.onNavigateClick(e, i)}
+                          class={`-elsa-ml-px elsa-relative elsa-inline-flex elsa-items-center elsa-px-4 elsa-py-2 elsa-border elsa-border-gray-300 elsa-bg-white elsa-text-sm elsa-leading-5 elsa-font-medium elsa-text-gray-700 hover:elsa-text-gray-500 focus:elsa-z-10 focus:elsa-outline-none active:elsa-bg-gray-100 active:elsa-text-gray-700 elsa-transition elsa-ease-in-out elsa-duration-150 ${leftRoundedClass}`}>
+            {i + 1}
+          </a>)
         }
+      }
 
-        return (
-            <div class="elsa-bg-white elsa-px-4 elsa-py-3 elsa-flex elsa-items-center elsa-justify-between elsa-border-t elsa-border-gray-200 sm:elsa-px-6">
-                <div class="elsa-flex-1 elsa-flex elsa-justify-between sm:elsa-hidden">
-                    {renderPreviousButton()}
-                    {renderNextButton()}
-                </div>
-                <div class="hidden sm:elsa-flex-1 sm:elsa-flex sm:elsa-items-center sm:elsa-justify-between">
-                    <div>
-                        <p class="elsa-text-sm elsa-leading-5 elsa-text-gray-700 elsa-space-x-0-5">
-                            <span>Showing</span>
-                            <span class="elsa-font-medium">{from}</span>
-                            <span>to</span>
-                            <span class="elsa-font-medium">{to}</span>
-                            <span>of</span>
-                            <span class="elsa-font-medium">{totalCount}</span>
-                            <span>results</span>
-                        </p>
-                    </div>
-                    <div>
-                        <nav class="elsa-relative elsa-z-0 elsa-inline-flex elsa-shadow-sm">
-                            {renderChevronLeft()}
-                            {renderPagerButtons()}
-                            {renderChevronRight()}
-                        </nav>
-                    </div>
-                </div>
-            </div>
-        );
+      return buttons;
     }
+
+    return (
+      <div class="elsa-bg-white elsa-px-4 elsa-py-3 elsa-flex elsa-items-center elsa-justify-between elsa-border-t elsa-border-gray-200 sm:elsa-px-6">
+        <div class="elsa-flex-1 elsa-flex elsa-justify-between sm:elsa-hidden">
+          {renderPreviousButton()}
+          {renderNextButton()}
+        </div>
+        <div class="hidden sm:elsa-flex-1 sm:elsa-flex sm:elsa-items-center sm:elsa-justify-between">
+          <div>
+            <p class="elsa-text-sm elsa-leading-5 elsa-text-gray-700 elsa-space-x-0-5">
+              <span>Showing</span>
+              <span class="elsa-font-medium">{from}</span>
+              <span>to</span>
+              <span class="elsa-font-medium">{to}</span>
+              <span>of</span>
+              <span class="elsa-font-medium">{totalCount}</span>
+              <span>results</span>
+            </p>
+          </div>
+          <div>
+            <nav class="elsa-relative elsa-z-0 elsa-inline-flex elsa-shadow-sm">
+              {renderChevronLeft()}
+              {renderPagerButtons()}
+              {renderChevronRight()}
+            </nav>
+          </div>
+        </div>
+      </div>
+    );
+  }
 }
 
 injectHistory(ElsaPager);