FOUR-30918: Platform Performance Tentpole Project

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@processmaker/screen-builder",
-  "version": "3.8.43",
+  "version": "3.8.43-branch-290641fe",
   "scripts": {
     "dev": "VITE_COVERAGE=true vite",
     "build": "vite build",
@@ -61,8 +61,8 @@
     "@fortawesome/fontawesome-free": "^5.6.1",
     "@originjs/vite-plugin-commonjs": "^1.0.3",
     "@panter/vue-i18next": "^0.15.2",
-    "@processmaker/vue-form-elements": "0.65.11",
-    "@processmaker/vue-multiselect": "2.3.2",
+    "@processmaker/vue-form-elements": "0.65.11-branch-2c6a640",
+    "@processmaker/vue-multiselect": "2.3.3",
     "@storybook/addon-essentials": "^7.6.13",
     "@storybook/addon-interactions": "^7.6.13",
     "@storybook/addon-links": "^7.6.13",
@@ -125,7 +125,7 @@
   },
   "peerDependencies": {
     "@panter/vue-i18next": "^0.15.0",
-    "@processmaker/vue-form-elements": "0.65.11",
+    "@processmaker/vue-form-elements": "0.65.11-branch-2c6a640",
     "i18next": "^15.0.8",
     "vue": "^2.6.12",
     "vuex": "^3.1.1"
@@ -156,6 +156,8 @@
     ]
   },
   "processmaker": {
-    "downstream": ["modeler"]
+    "downstream": [
+      "modeler"
+    ]
   }
 }

src/DataProvider.js

@@ -228,6 +228,7 @@ export default {
     const normalizedDataSourceId = normalizeDataSourceId(dataSourceId);
     // keep backwards compatibility
     if (
+      !params.cache &&
       !window.ProcessMaker.screen.cacheEnabled &&
       !window.ProcessMaker.screen.cacheTimeout
     ) {
@@ -242,6 +243,7 @@ export default {
     url += this.authQueryString();
     return this.get(url, {
       useCache: window.ProcessMaker.screen.cacheEnabled,
+      cache: params.cache,
       params: {
         pmds_config: JSON.stringify(params.config),
         pmds_data: JSON.stringify(params.data)

src/components/task.vue

@@ -283,10 +283,7 @@ export default {
         url += `&screen_version=${this.screenVersion}`;
       }
 
-      // For Vocabularies
-      if (window.ProcessMaker && window.ProcessMaker.packages && window.ProcessMaker.packages.includes('package-vocabularies')) {
-        window.ProcessMaker.VocabulariesSchemaUrl = `vocabularies/task_schema/${this.taskId}`;
-      }
+      this.setVocabulariesSchemaUrl();
 
       return this.beforeLoadTask(this.taskId, this.nodeId).then(() => {
         this.$dataProvider
@@ -704,6 +701,19 @@ export default {
 
       return this.$dataProvider.getTasks(`?${queryString}`);
     },
+    setVocabulariesSchemaUrl() {
+      if (
+        window.ProcessMaker
+        && window.ProcessMaker.packages
+        && window.ProcessMaker.packages.includes("package-vocabularies")
+      ) {
+        const schemaUrl = `vocabularies/task_schema/${this.taskId}`;
+        if (window.ProcessMaker.VocabulariesSchemaUrl !== schemaUrl) {
+          window.ProcessMaker.VocabulariesSchemaCache = null;
+        }
+        window.ProcessMaker.VocabulariesSchemaUrl = schemaUrl;
+      }
+    },
     /**
      * Parses a JSON string and returns the result.
      * @param {string} jsonString - The JSON string to parse.

src/main.js

@@ -203,6 +203,17 @@ window.ProcessMaker = {
               }
             }
           });
+        } else if (url === "/requests/data_sources/1/resources/list/data") {
+          resolve({
+            data: {
+              response: [
+                { value: 1, content: "James" },
+                { value: 2, content: "John" },
+                { value: 3, content: "Mary" },
+                { value: 4, content: "Patricia" }
+              ]
+            }
+          });
         } else if (url === "/data_sources") {
           resolve({
             data: {

src/mixins/ScreenBase.js

@@ -10,25 +10,52 @@ import { findRootScreen } from "./DataReference";
 const stringFormats = ['string', 'datetime', 'date', 'password'];
 const parentReference = [];
 
+const getVocabulariesSchema = () => {
+  if (window.ProcessMaker?.packages?.includes("package-vocabularies")) {
+    if (window.ProcessMaker.VocabulariesSchemaUrl) {
+      const schemaUrl = window.ProcessMaker.VocabulariesSchemaUrl;
+      const cache = window.ProcessMaker.VocabulariesSchemaCache;
+
+      if (cache && cache.url === schemaUrl) {
+        return cache.promise || cache.data;
+      }
+
+      const promise = window.ProcessMaker.apiClient
+        .get(schemaUrl)
+        .then((response) => {
+          if (window.ProcessMaker.VocabulariesSchemaUrl === schemaUrl) {
+            window.ProcessMaker.VocabulariesSchemaCache = {
+              url: schemaUrl,
+              data: response.data
+            };
+          }
+          return response.data;
+        })
+        .catch((error) => {
+          if (window.ProcessMaker.VocabulariesSchemaCache?.url === schemaUrl) {
+            window.ProcessMaker.VocabulariesSchemaCache = null;
+          }
+          throw error;
+        });
+
+      window.ProcessMaker.VocabulariesSchemaCache = {
+        url: schemaUrl,
+        promise
+      };
+
+      return promise;
+    }
+    if (window.ProcessMaker.VocabulariesPreview) {
+      return window.ProcessMaker.VocabulariesPreview;
+    }
+  }
+  return {};
+};
+
 export default {
   name: "ScreenContent",
   mixins: [DataReference, computedFields, VariablesToSubmitFilter],
-  schema: [
-    function() {
-      if (window.ProcessMaker && window.ProcessMaker.packages && window.ProcessMaker.packages.includes('package-vocabularies')) {
-        if (window.ProcessMaker.VocabulariesSchemaUrl) {
-          let response = window.ProcessMaker.apiClient.get(window.ProcessMaker.VocabulariesSchemaUrl);
-          return response.then(response => {
-            return response.data;
-          });
-        }
-        if (window.ProcessMaker.VocabulariesPreview) {
-          return window.ProcessMaker.VocabulariesPreview;
-        }
-      }
-      return {};
-    },
-  ],
+  schema: [getVocabulariesSchema],
   data() {
     return {
       ValidationRules__: {},

tests/e2e/specs/SelectListCollection.spec.js

@@ -3,80 +3,87 @@ describe("select list mustache", () => {
   beforeEach(() => {
     cy.clearLocalStorage();
     cy.clearCookies();
-    cy.intercept(
-      "POST",
-      "/api/1.0/requests/data_sources/2",
-      JSON.stringify({
-        status: 200,
-        response: {
-          data: [
-            {
-              id: 1,
-              created_by_id: 2,
-              updated_by_id: 2,
-              created_at: "2021-11-08 10:29:56",
-              updated_at: "2021-11-08 10:29:56",
-              data: {
-                dni: "1234",
-                name: {
-                  last: "Smith",
-                  first: "Oliver"
-                },
-                id: 1
+    const dataSourceResponse = {
+      status: 200,
+      response: {
+        data: [
+          {
+            id: 1,
+            created_by_id: 2,
+            updated_by_id: 2,
+            created_at: "2021-11-08 10:29:56",
+            updated_at: "2021-11-08 10:29:56",
+            data: {
+              dni: "1234",
+              name: {
+                last: "Smith",
+                first: "Oliver"
               },
-              collection_id: 1,
-              title: "1",
-              created_by: {
-                id: 2,
-                email: "admin@processmaker.com"
-              },
-              updated_by: {
-                id: 2,
-                email: "admin@processmaker.com"
-              }
+              id: 1
             },
-            {
+            collection_id: 1,
+            title: "1",
+            created_by: {
               id: 2,
-              created_by_id: 2,
-              updated_by_id: 2,
-              created_at: "2021-11-08 10:29:56",
-              updated_at: "2021-11-08 10:29:56",
-              data: {
-                dni: "5678",
-                name: {
-                  last: "Doe",
-                  first: "John"
-                },
-                id: 2
-              },
-              collection_id: 1,
-              title: "2",
-              created_by: {
-                id: 2,
-                email: "admin@processmaker.com"
+              email: "admin@processmaker.com"
+            },
+            updated_by: {
+              id: 2,
+              email: "admin@processmaker.com"
+            }
+          },
+          {
+            id: 2,
+            created_by_id: 2,
+            updated_by_id: 2,
+            created_at: "2021-11-08 10:29:56",
+            updated_at: "2021-11-08 10:29:56",
+            data: {
+              dni: "5678",
+              name: {
+                last: "Doe",
+                first: "John"
               },
-              updated_by: {
-                id: 2,
-                email: "admin@processmaker.com"
-              }
+              id: 2
+            },
+            collection_id: 1,
+            title: "2",
+            created_by: {
+              id: 2,
+              email: "admin@processmaker.com"
+            },
+            updated_by: {
+              id: 2,
+              email: "admin@processmaker.com"
             }
-          ],
-          meta: {
-            filter: "",
-            sort_by: "",
-            sort_order: "",
-            count: 2,
-            total_pages: 1,
-            current_page: 1,
-            from: 1,
-            last_page: 1,
-            path: "/api/1.0/collections/1/records",
-            per_page: 9223372036854775807,
-            to: 2,
-            total: 2
           }
+        ],
+        meta: {
+          filter: "",
+          sort_by: "",
+          sort_order: "",
+          count: 2,
+          total_pages: 1,
+          current_page: 1,
+          from: 1,
+          last_page: 1,
+          path: "/api/1.0/collections/1/records",
+          per_page: 9223372036854775807,
+          to: 2,
+          total: 2
         }
-      })
+      }
+    };
+
+    cy.intercept(
+      "POST",
+      "/api/1.0/requests/data_sources/2",
+      JSON.stringify(dataSourceResponse)
+    ).as("executeScript");
+    cy.intercept(
+      "GET",
+      "/api/1.0/requests/data_sources/2/resources/ListAll/data*",
+      JSON.stringify(dataSourceResponse)
     ).as("executeScript");
     cy.visit("/");
   });

tests/e2e/specs/SelectListDataSource.spec.js

@@ -2,8 +2,8 @@ describe("Select List with DataSource", () => {
   beforeEach(() => {
     cy.visit("/");
     cy.intercept(
-      "POST",
-      "/api/1.0/requests/data_sources/2",
+      "GET",
+      "/api/1.0/requests/data_sources/2/resources/ListAll/data*",
       JSON.stringify({
         status: 200,
         response: {