From 1546d46d5b53c6e840eef9b226bffa3f05b77232 Mon Sep 17 00:00:00 2001
From: luNunezProcessmaker <luciana.nunez@processmaker.com>
Date: Wed, 15 Nov 2023 09:04:31 -0400
Subject: [PATCH 01/21] feature/FOUR-12352

---
 .../processes/scripts/components/CreateScriptModal.vue | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/resources/js/processes/scripts/components/CreateScriptModal.vue b/resources/js/processes/scripts/components/CreateScriptModal.vue
index 10dc5ec963..1fcc04402d 100644
--- a/resources/js/processes/scripts/components/CreateScriptModal.vue
+++ b/resources/js/processes/scripts/components/CreateScriptModal.vue
@@ -236,6 +236,9 @@ export default {
       projects: [],
     };
   },
+  mounted() {
+    this.getAdminUser();
+  },
   computed: {
     modalSetUp() {
       if (this.copyAssetMode) {
@@ -261,6 +264,13 @@ export default {
     show() {
       this.$bvModal.show("createScript");
     },
+    getAdminUser() {
+      ProcessMaker.apiClient
+        .get("/users/1")
+        .then((response) => {
+          this.selectedUser = response.data;
+        });
+    },
     /**
        * Check if the search params contains create=true which means is coming from the Modeler as a Quick Asset Creation
        * @returns {boolean}

From df8581c3734ff15d4583c899f2871ace32b27b7a Mon Sep 17 00:00:00 2001
From: luNunezProcessmaker <luciana.nunez@processmaker.com>
Date: Wed, 15 Nov 2023 10:05:07 -0400
Subject: [PATCH 02/21] feature/FOUR-12352

---
 .../js/processes/scripts/components/CreateScriptModal.vue      | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/resources/js/processes/scripts/components/CreateScriptModal.vue b/resources/js/processes/scripts/components/CreateScriptModal.vue
index 1fcc04402d..38a7ba5dc8 100644
--- a/resources/js/processes/scripts/components/CreateScriptModal.vue
+++ b/resources/js/processes/scripts/components/CreateScriptModal.vue
@@ -234,6 +234,7 @@ export default {
       createScriptHooks: [],
       script: null,
       projects: [],
+      userRunScript: 1,
     };
   },
   mounted() {
@@ -266,7 +267,7 @@ export default {
     },
     getAdminUser() {
       ProcessMaker.apiClient
-        .get("/users/1")
+        .get(`/users/${this.userRunScript}`)
         .then((response) => {
           this.selectedUser = response.data;
         });

From 25d573cec9450162680c0490aa0ef78462625225 Mon Sep 17 00:00:00 2001
From: luNunezProcessmaker <luciana.nunez@processmaker.com>
Date: Wed, 15 Nov 2023 10:06:55 -0400
Subject: [PATCH 03/21] feature/FOUR-12352

---
 .../js/processes/scripts/components/CreateScriptModal.vue      | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/resources/js/processes/scripts/components/CreateScriptModal.vue b/resources/js/processes/scripts/components/CreateScriptModal.vue
index 38a7ba5dc8..c9786c740e 100644
--- a/resources/js/processes/scripts/components/CreateScriptModal.vue
+++ b/resources/js/processes/scripts/components/CreateScriptModal.vue
@@ -270,6 +270,9 @@ export default {
         .get(`/users/${this.userRunScript}`)
         .then((response) => {
           this.selectedUser = response.data;
+        })
+        .catch((e) => {
+          ProcessMaker.alert(e.response.data.errors.delete[0], "danger");
         });
     },
     /**

From 3f3f011dadc333a0a6116e8cb59c7f69e63fe8a1 Mon Sep 17 00:00:00 2001
From: luNunezProcessmaker <luciana.nunez@processmaker.com>
Date: Wed, 15 Nov 2023 10:08:35 -0400
Subject: [PATCH 04/21] feature/FOUR-12352

---
 .../js/processes/scripts/components/CreateScriptModal.vue      | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/resources/js/processes/scripts/components/CreateScriptModal.vue b/resources/js/processes/scripts/components/CreateScriptModal.vue
index c9786c740e..8b6b0d82e8 100644
--- a/resources/js/processes/scripts/components/CreateScriptModal.vue
+++ b/resources/js/processes/scripts/components/CreateScriptModal.vue
@@ -271,9 +271,6 @@ export default {
         .then((response) => {
           this.selectedUser = response.data;
         })
-        .catch((e) => {
-          ProcessMaker.alert(e.response.data.errors.delete[0], "danger");
-        });
     },
     /**
        * Check if the search params contains create=true which means is coming from the Modeler as a Quick Asset Creation

From 8ca4f2f7789b138c514c943b6727bc0a83234651 Mon Sep 17 00:00:00 2001
From: Fabio <frguachallab@gmail.com>
Date: Wed, 15 Nov 2023 15:05:50 +0000
Subject: [PATCH 05/21] FOUR-11498:Initial script Modal

---
 .../scripts/components/CreateScriptModal.vue  | 339 +++++++++---------
 1 file changed, 174 insertions(+), 165 deletions(-)

diff --git a/resources/js/processes/scripts/components/CreateScriptModal.vue b/resources/js/processes/scripts/components/CreateScriptModal.vue
index 10dc5ec963..64869941b7 100644
--- a/resources/js/processes/scripts/components/CreateScriptModal.vue
+++ b/resources/js/processes/scripts/components/CreateScriptModal.vue
@@ -11,176 +11,185 @@
     </b-button>
     <modal
       id="createScript"
+      size="xl"
+      scrollable
       :ok-disabled="disabled"
       :title="modalSetUp"
       @hidden="onClose"
       @ok.prevent="onSubmit"
     >
-      <template v-if="countCategories">
-        <required />
-        <b-form-group
-          :description="
-            formDescription(
-              'The script name must be unique.',
-              'title',
-              addError
-            )
-          "
-          :invalid-feedback="errorMessage('title', addError)"
-          :label="$t('Name')"
-          :state="errorState('title', addError)"
-          required
-        >
-          <b-form-input
-            v-model="title"
-            :state="errorState('title', addError)"
-            autocomplete="off"
-            autofocus
-            name="title"
-            required
-          />
-        </b-form-group>
-        <b-form-group
-          :invalid-feedback="errorMessage('description', addError)"
-          :label="$t('Description')"
-          :state="errorState('description', addError)"
-          required
-        >
-          <b-form-textarea
-            v-model="description"
-            :state="errorState('description', addError)"
-            autocomplete="off"
-            name="description"
-            required
-            rows="2"
-          />
-        </b-form-group>
-        <category-select
-          v-show="!projectAsset"
-          v-model="script_category_id"
-          :errors="addError.script_category_id"
-          :label="$t('Category')"
-          api-get="script_categories"
-          api-list="script_categories"
-          name="script_category_id"
-        />
-        <project-select
-          v-if="isProjectsInstalled"
-          v-model="projects"
-          :errors="addError.projects"
-          :label="$t('Project')"
-          :required="isProjectSelectionRequired"
-          api-get="projects"
-          api-list="projects"
-          name="project"
-          :project-id="projectId"
-        />
-        <b-form-group
-          :invalid-feedback="errorMessage('script_executor_id', addError)"
-          :label="$t('Language')"
-          :state="errorState('script_executor_id', addError)"
-          :disabled="copyAssetMode"
-          required
-        >
-          <b-form-select
-            v-model="script_executor_id"
-            :options="scriptExecutors"
-            :state="errorState('script_executor_id', addError)"
-            :disabled="copyAssetMode"
-            name="script_executor_id"
-            required
-          />
-        </b-form-group>
-        <b-form-group
-          :description="
-            formDescription(
-              'Select a user to set the API access of the Script',
-              'run_as_user_id',
-              addError
-            )
-          "
-          :invalid-feedback="errorMessage('run_as_user_id', addError)"
-          :label="$t('Run script as')"
-          :state="errorState('run_as_user_id', addError)"
-          required
-        >
-          <select-user
-            v-model="selectedUser"
-            :class="{
-              'is-invalid': errorState('run_as_user_id', addError) == false,
-            }"
-            :multiple="false"
-            name="run_as_user_id"
-          />
-        </b-form-group>
-        <slider-with-input
-          :description="
-            $t(
-              'How many seconds the script should be allowed to run (0 is unlimited).'
-            )
-          "
-          :error="
-            errorState('timeout', addError)
-              ? null
-              : errorMessage('timeout', addError)
-          "
-          :label="$t('Timeout')"
-          :max="300"
-          :min="0"
-          :value="timeout"
-          @input="timeout = $event"
-        />
-        <slider-with-input
-          :description="
-            $t(
-              'Number of times to retry. Leave empty to use script default. Set to 0 for no retry attempts.'
-            )
-          "
-          :error="
-            errorState('retry_attempts', addError)
-              ? null
-              : errorMessage('retry_attempts', addError)
-          "
-          :label="$t('Retry Attempts')"
-          :max="10"
-          :min="0"
-          :value="retry_attempts"
-          @input="retry_attempts = $event"
-        />
-        <slider-with-input
-          :description="
-            $t(
-              'Seconds to wait before retrying. Leave empty to use script default. Set to 0 for no retry wait time.'
-            )
-          "
-          :error="
-            errorState('retry_wait_time', addError)
-              ? null
-              : errorMessage('retry_wait_time', addError)
-          "
-          :label="$t('Retry Wait Time')"
-          :max="3600"
-          :min="0"
-          :value="retry_wait_time"
-          @input="retry_wait_time = $event"
-        />
-        <component
-          :is="cmp"
-          v-for="(cmp, index) in createScriptHooks"
-          :key="`create-script-hook-${index}`"
-          ref="createScriptHooks"
-          :script="script"
-        />
-      </template>
-      <template v-else>
-        <div>{{ $t("Categories are required to create a script") }}</div>
-        <a
-          class="btn btn-primary container mt-2"
-          href="/designer/scripts/categories"
-        >
-          {{ $t("Add Category") }}
-        </a>
-      </template>
+      <b-row>
+        <b-col cols="4">
+          <!-- TODO -->
+        </b-col>
+        <b-col cols="8">
+          <template v-if="countCategories">
+            <required />
+            <b-form-group
+              :description="
+                formDescription(
+                  'The script name must be unique.',
+                  'title',
+                  addError
+                )
+              "
+              :invalid-feedback="errorMessage('title', addError)"
+              :label="$t('Name')"
+              :state="errorState('title', addError)"
+              required
+            >
+              <b-form-input
+                v-model="title"
+                :state="errorState('title', addError)"
+                autocomplete="off"
+                autofocus
+                name="title"
+                required
+              />
+            </b-form-group>
+            <b-form-group
+              :invalid-feedback="errorMessage('description', addError)"
+              :label="$t('Description')"
+              :state="errorState('description', addError)"
+              required
+            >
+              <b-form-textarea
+                v-model="description"
+                :state="errorState('description', addError)"
+                autocomplete="off"
+                name="description"
+                required
+                rows="2"
+              />
+            </b-form-group>
+            <category-select
+              v-show="!projectAsset"
+              v-model="script_category_id"
+              :errors="addError.script_category_id"
+              :label="$t('Category')"
+              api-get="script_categories"
+              api-list="script_categories"
+              name="script_category_id"
+            />
+            <project-select
+              v-if="isProjectsInstalled"
+              v-model="projects"
+              :errors="addError.projects"
+              :label="$t('Project')"
+              :required="isProjectSelectionRequired"
+              api-get="projects"
+              api-list="projects"
+              name="project"
+              :project-id="projectId"
+            />
+            <b-form-group
+              :invalid-feedback="errorMessage('script_executor_id', addError)"
+              :label="$t('Language')"
+              :state="errorState('script_executor_id', addError)"
+              :disabled="copyAssetMode"
+              required
+            >
+              <b-form-select
+                v-model="script_executor_id"
+                :options="scriptExecutors"
+                :state="errorState('script_executor_id', addError)"
+                :disabled="copyAssetMode"
+                name="script_executor_id"
+                required
+              />
+            </b-form-group>
+            <b-form-group
+              :description="
+                formDescription(
+                  'Select a user to set the API access of the Script',
+                  'run_as_user_id',
+                  addError
+                )
+              "
+              :invalid-feedback="errorMessage('run_as_user_id', addError)"
+              :label="$t('Run script as')"
+              :state="errorState('run_as_user_id', addError)"
+              required
+            >
+              <select-user
+                v-model="selectedUser"
+                :class="{
+                  'is-invalid': errorState('run_as_user_id', addError) == false,
+                }"
+                :multiple="false"
+                name="run_as_user_id"
+              />
+            </b-form-group>
+            <slider-with-input
+              :description="
+                $t(
+                  'How many seconds the script should be allowed to run (0 is unlimited).'
+                )
+              "
+              :error="
+                errorState('timeout', addError)
+                  ? null
+                  : errorMessage('timeout', addError)
+              "
+              :label="$t('Timeout')"
+              :max="300"
+              :min="0"
+              :value="timeout"
+              @input="timeout = $event"
+            />
+            <slider-with-input
+              :description="
+                $t(
+                  'Number of times to retry. Leave empty to use script default. Set to 0 for no retry attempts.'
+                )
+              "
+              :error="
+                errorState('retry_attempts', addError)
+                  ? null
+                  : errorMessage('retry_attempts', addError)
+              "
+              :label="$t('Retry Attempts')"
+              :max="10"
+              :min="0"
+              :value="retry_attempts"
+              @input="retry_attempts = $event"
+            />
+            <slider-with-input
+              :description="
+                $t(
+                  'Seconds to wait before retrying. Leave empty to use script default. Set to 0 for no retry wait time.'
+                )
+              "
+              :error="
+                errorState('retry_wait_time', addError)
+                  ? null
+                  : errorMessage('retry_wait_time', addError)
+              "
+              :label="$t('Retry Wait Time')"
+              :max="3600"
+              :min="0"
+              :value="retry_wait_time"
+              @input="retry_wait_time = $event"
+            />
+            <component
+              :is="cmp"
+              v-for="(cmp, index) in createScriptHooks"
+              :key="`create-script-hook-${index}`"
+              ref="createScriptHooks"
+              :script="script"
+            />
+          </template>
+          <template v-else>
+            <div>{{ $t("Categories are required to create a script") }}</div>
+            <a
+              class="btn btn-primary container mt-2"
+              href="/designer/scripts/categories"
+            >
+              {{ $t("Add Category") }}
+            </a>
+          </template>
+        </b-col>
+      </b-row>
     </modal>
   </div>
 </template>

From 7f45cea691d253d4bc7b9aef7ae9e093cc5eba4f Mon Sep 17 00:00:00 2001
From: luNunezProcessmaker <luciana.nunez@processmaker.com>
Date: Thu, 16 Nov 2023 12:14:54 -0400
Subject: [PATCH 06/21] feature/FOUR-12189

---
 .../scripts/components/CreateScriptModal.vue  | 173 +++++++++++-------
 1 file changed, 102 insertions(+), 71 deletions(-)

diff --git a/resources/js/processes/scripts/components/CreateScriptModal.vue b/resources/js/processes/scripts/components/CreateScriptModal.vue
index cea0712564..ac773f8ad9 100644
--- a/resources/js/processes/scripts/components/CreateScriptModal.vue
+++ b/resources/js/processes/scripts/components/CreateScriptModal.vue
@@ -98,79 +98,103 @@
                 required
               />
             </b-form-group>
-            <b-form-group
-              :description="
-                formDescription(
-                  'Select a user to set the API access of the Script',
-                  'run_as_user_id',
-                  addError
-                )
-              "
-              :invalid-feedback="errorMessage('run_as_user_id', addError)"
-              :label="$t('Run script as')"
-              :state="errorState('run_as_user_id', addError)"
-              required
+            <div class="d-flex justify-content-end w-100">
+              <button
+                class="btn btn-link text-capitalize collapsed"
+                type="button"
+                data-toggle="collapse"
+                data-target="#collapseAdvancedOptions"
+                aria-expanded="false"
+                aria-controls="collapseAdvancedOptions"
+              >
+                <p class="closed">
+                  {{ $t('Advanced Options') }}
+                  <i class="fas fa-angle-double-down" />
+                </p>
+                <p class="opened">
+                  {{ $t('Less Options') }}
+                  <i class="fas fa-angle-double-up" />
+                </p>
+              </button>
+            </div>
+            <div
+              id="collapseAdvancedOptions"
+              class="collapse"
             >
-              <select-user
-                v-model="selectedUser"
-                :class="{
-                  'is-invalid': errorState('run_as_user_id', addError) == false,
-                }"
-                :multiple="false"
-                name="run_as_user_id"
+              <b-form-group
+                :description="
+                  formDescription(
+                    'Select a user to set the API access of the Script',
+                    'run_as_user_id',
+                    addError
+                  )
+                "
+                :invalid-feedback="errorMessage('run_as_user_id', addError)"
+                :label="$t('Run script as')"
+                :state="errorState('run_as_user_id', addError)"
+                required
+              >
+                <select-user
+                  v-model="selectedUser"
+                  :class="{
+                    'is-invalid': errorState('run_as_user_id', addError) == false,
+                  }"
+                  :multiple="false"
+                  name="run_as_user_id"
+                />
+              </b-form-group>
+              <slider-with-input
+                :description="
+                  $t(
+                    'How many seconds the script should be allowed to run (0 is unlimited).'
+                  )
+                "
+                :error="
+                  errorState('timeout', addError)
+                    ? null
+                    : errorMessage('timeout', addError)
+                "
+                :label="$t('Timeout')"
+                :max="300"
+                :min="0"
+                :value="timeout"
+                @input="timeout = $event"
               />
-            </b-form-group>
-            <slider-with-input
-              :description="
-                $t(
-                  'How many seconds the script should be allowed to run (0 is unlimited).'
-                )
-              "
-              :error="
-                errorState('timeout', addError)
-                  ? null
-                  : errorMessage('timeout', addError)
-              "
-              :label="$t('Timeout')"
-              :max="300"
-              :min="0"
-              :value="timeout"
-              @input="timeout = $event"
-            />
-            <slider-with-input
-              :description="
-                $t(
-                  'Number of times to retry. Leave empty to use script default. Set to 0 for no retry attempts.'
-                )
-              "
-              :error="
-                errorState('retry_attempts', addError)
-                  ? null
-                  : errorMessage('retry_attempts', addError)
-              "
-              :label="$t('Retry Attempts')"
-              :max="10"
-              :min="0"
-              :value="retry_attempts"
-              @input="retry_attempts = $event"
-            />
-            <slider-with-input
-              :description="
-                $t(
-                  'Seconds to wait before retrying. Leave empty to use script default. Set to 0 for no retry wait time.'
-                )
-              "
-              :error="
-                errorState('retry_wait_time', addError)
-                  ? null
-                  : errorMessage('retry_wait_time', addError)
-              "
-              :label="$t('Retry Wait Time')"
-              :max="3600"
-              :min="0"
-              :value="retry_wait_time"
-              @input="retry_wait_time = $event"
-            />
+              <slider-with-input
+                :description="
+                  $t(
+                    'Number of times to retry. Leave empty to use script default. Set to 0 for no retry attempts.'
+                  )
+                "
+                :error="
+                  errorState('retry_attempts', addError)
+                    ? null
+                    : errorMessage('retry_attempts', addError)
+                "
+                :label="$t('Retry Attempts')"
+                :max="10"
+                :min="0"
+                :value="retry_attempts"
+                @input="retry_attempts = $event"
+              />
+              <slider-with-input
+                :description="
+                  $t(
+                    'Seconds to wait before retrying. Leave empty to use script default. Set to 0 for no retry wait time.'
+                  )
+                "
+                :error="
+                  errorState('retry_wait_time', addError)
+                    ? null
+                    : errorMessage('retry_wait_time', addError)
+                "
+                :label="$t('Retry Wait Time')"
+                :max="3600"
+                :min="0"
+                :value="retry_wait_time"
+                @input="retry_wait_time = $event"
+              />
+            </div>
             <component
               :is="cmp"
               v-for="(cmp, index) in createScriptHooks"
@@ -369,3 +393,10 @@ export default {
   },
 };
 </script>
+
+<style scoped>
+  .collapsed > .opened,
+  :not(.collapsed) > .closed {
+      display: none;
+  }
+</style>

From 0c14d7ecf80adc16fd72c2a366e56e5139a2fce6 Mon Sep 17 00:00:00 2001
From: luNunezProcessmaker <luciana.nunez@processmaker.com>
Date: Fri, 17 Nov 2023 12:35:30 -0400
Subject: [PATCH 07/21] feature/FOUR-12430

---
 .../scripts/components/CreateScriptModal.vue  | 132 +++++++++++++-----
 1 file changed, 96 insertions(+), 36 deletions(-)

diff --git a/resources/js/processes/scripts/components/CreateScriptModal.vue b/resources/js/processes/scripts/components/CreateScriptModal.vue
index cea0712564..774e91eda6 100644
--- a/resources/js/processes/scripts/components/CreateScriptModal.vue
+++ b/resources/js/processes/scripts/components/CreateScriptModal.vue
@@ -120,57 +120,102 @@
                 name="run_as_user_id"
               />
             </b-form-group>
-            <slider-with-input
-              :description="
-                $t(
-                  'How many seconds the script should be allowed to run (0 is unlimited).'
-                )
-              "
+            <b-form-group
+              class="form-group-border"
+              :invalid-feedback="errorMessage('timeout', addError)"
               :error="
                 errorState('timeout', addError)
                   ? null
                   : errorMessage('timeout', addError)
               "
-              :label="$t('Timeout')"
-              :max="300"
-              :min="0"
-              :value="timeout"
-              @input="timeout = $event"
-            />
-            <slider-with-input
-              :description="
-                $t(
-                  'Number of times to retry. Leave empty to use script default. Set to 0 for no retry attempts.'
-                )
-              "
+            >
+              <div class="d-flex d-flex justify-content-between align-items-center mb-3">
+                <div class="label-description">
+                  <label
+                    class="label-number"
+                    for="inputTimeout"
+                  >
+                    {{ $t('Timeout') }}
+                  </label>
+                  <p class="text-muted m-0">
+                    {{ $t('How many seconds the script should be allowed to run (0 is unlimited).') }}
+                  </p>
+                </div>
+                <b-form-input
+                  id="inputTimeout"
+                  v-model="timeout"
+                  class="input-number"
+                  type="number"
+                  :max="300"
+                  :min="0"
+                  name="timeout"
+                />
+              </div>
+            </b-form-group>
+            <b-form-group
+              class="form-group-border"
+              :invalid-feedback="errorMessage('retry_attempts', addError)"
               :error="
                 errorState('retry_attempts', addError)
                   ? null
                   : errorMessage('retry_attempts', addError)
               "
-              :label="$t('Retry Attempts')"
-              :max="10"
-              :min="0"
-              :value="retry_attempts"
-              @input="retry_attempts = $event"
-            />
-            <slider-with-input
-              :description="
-                $t(
-                  'Seconds to wait before retrying. Leave empty to use script default. Set to 0 for no retry wait time.'
-                )
-              "
+            >
+              <div class="d-flex d-flex justify-content-between align-items-center mb-3">
+                <div class="label-description">
+                  <label
+                    class="label-number"
+                    for="inputRetryAttempts"
+                  >
+                    {{ $t('Retry Attempts') }}
+                  </label>
+                  <p class="text-muted m-0">
+                    {{ $t('Number of times to retry. Leave empty to use script default. Set to 0 for no retry attempts.') }}
+                  </p>
+                </div>
+                <b-form-input
+                  id="inputRetryAttempts"
+                  v-model="retry_attempts"
+                  class="input-number"
+                  type="number"
+                  :max="10"
+                  :min="0"
+                  name="retry_attempts"
+                />
+              </div>
+            </b-form-group>
+            <b-form-group
+              class="form-group-border"
+              :invalid-feedback="errorMessage('retry_wait_time', addError)"
               :error="
                 errorState('retry_wait_time', addError)
                   ? null
                   : errorMessage('retry_wait_time', addError)
               "
-              :label="$t('Retry Wait Time')"
-              :max="3600"
-              :min="0"
-              :value="retry_wait_time"
-              @input="retry_wait_time = $event"
-            />
+            >
+              <div class="d-flex d-flex justify-content-between align-items-center mb-3">
+                <div class="label-description">
+                  <label
+                    class="label-number"
+                    for="inputRetryWaitTime"
+                  >
+                    {{ $t('Retry Wait Time') }}
+                  </label>
+                  <p class="text-muted m-0">
+                    {{ $t('Seconds to wait before retrying. Leave empty to use script default. Set to 0 for no retry wait time.') }}
+                  </p>
+                </div>
+                <b-form-input
+                  id="inputRetryWaitTime"
+                  v-model="retry_wait_time"
+                  class="input-number"
+                  type="number"
+                  :max="3600"
+                  :min="0"
+                  name="retry_wait_time"
+                />
+              </div>
+            </b-form-group>
             <component
               :is="cmp"
               v-for="(cmp, index) in createScriptHooks"
@@ -369,3 +414,18 @@ export default {
   },
 };
 </script>
+
+<style scoped>
+  .label-description {
+    width: 80%;
+  }
+  .input-number {
+    width: 15%;
+  }
+  .label-number {
+    font-weight: 600;
+  }
+  .form-group-border{
+    border-bottom: 1px solid #CDDDEE;
+  }
+</style>

From 6aaff0e9cdcd990cafe7cad84673f27839c68e7d Mon Sep 17 00:00:00 2001
From: Fabio <frguachallab@gmail.com>
Date: Fri, 17 Nov 2023 16:18:49 +0000
Subject: [PATCH 08/21] FOUR-12188:Create a New Dropdwon-Card component with
 preview Icons

sonar
---
 ProcessMaker/Models/ScriptExecutor.php        |  2 +-
 resources/img/script_lang/default.svg         |  5 ++
 resources/img/script_lang/javascript.svg      |  5 ++
 resources/img/script_lang/lua.svg             |  5 ++
 resources/img/script_lang/php.svg             |  9 +++
 .../scripts/components/CreateScriptModal.vue  | 23 +++---
 .../scripts/components/LanguageScript.vue     | 77 +++++++++++++++++++
 webpack.mix.js                                |  1 +
 8 files changed, 116 insertions(+), 11 deletions(-)
 create mode 100644 resources/img/script_lang/default.svg
 create mode 100644 resources/img/script_lang/javascript.svg
 create mode 100644 resources/img/script_lang/lua.svg
 create mode 100644 resources/img/script_lang/php.svg
 create mode 100644 resources/js/processes/scripts/components/LanguageScript.vue

diff --git a/ProcessMaker/Models/ScriptExecutor.php b/ProcessMaker/Models/ScriptExecutor.php
index cc86f6f5e1..055374973b 100644
--- a/ProcessMaker/Models/ScriptExecutor.php
+++ b/ProcessMaker/Models/ScriptExecutor.php
@@ -154,7 +154,7 @@ public static function list($language = null)
         }
 
         foreach ($executors->get() as $executor) {
-            $list[$executor->id] = $executor->language . ' - ' . $executor->title;
+            $list[$executor->id] = $executor->language;
         }
 
         return $list;
diff --git a/resources/img/script_lang/default.svg b/resources/img/script_lang/default.svg
new file mode 100644
index 0000000000..f2e3da27cf
--- /dev/null
+++ b/resources/img/script_lang/default.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Frame 1171275567">
+<path id="Vector" d="M9.2 16.2L10.8333 14.5375L8.29583 12L10.8333 9.4625L9.2 7.8L5 12L9.2 16.2ZM14.8 16.2L19 12L14.8 7.8L13.1667 9.4625L15.7042 12L13.1667 14.5375L14.8 16.2ZM3.83333 22.5C3.19167 22.5 2.64217 22.2713 2.18484 21.814C1.7275 21.3567 1.49922 20.8076 1.5 20.1667V3.83333C1.5 3.19167 1.72867 2.64217 2.186 2.18484C2.64334 1.7275 3.19245 1.49922 3.83333 1.5H20.1667C20.8083 1.5 21.3578 1.72867 21.8152 2.186C22.2725 2.64334 22.5008 3.19245 22.5 3.83333V20.1667C22.5 20.8083 22.2713 21.3578 21.814 21.8152C21.3567 22.2725 20.8076 22.5008 20.1667 22.5H3.83333Z" fill="#1572C2"/>
+</g>
+</svg>
diff --git a/resources/img/script_lang/javascript.svg b/resources/img/script_lang/javascript.svg
new file mode 100644
index 0000000000..bc0e4d5fa2
--- /dev/null
+++ b/resources/img/script_lang/javascript.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Frame 1171275565">
+<path id="Vector" d="M4.66667 1C3.69421 1 2.76158 1.36875 2.07394 2.02513C1.38631 2.6815 1 3.57174 1 4.5V18.5C1 19.4283 1.38631 20.3185 2.07394 20.9749C2.76158 21.6313 3.69421 22 4.66667 22H19.3333C20.3058 22 21.2384 21.6313 21.9261 20.9749C22.6137 20.3185 23 19.4283 23 18.5V4.5C23 3.57174 22.6137 2.6815 21.9261 2.02513C21.2384 1.36875 20.3058 1 19.3333 1H4.66667ZM13.6304 16.2308C14.5104 16.9075 15.388 17.24 16.2656 17.2318C16.8033 17.2318 17.2164 17.1385 17.5024 16.9495C17.636 16.8668 17.7446 16.7522 17.8177 16.6172C17.8908 16.4822 17.9258 16.3313 17.9192 16.1795C17.921 16.0139 17.8847 15.8499 17.8129 15.6991C17.7411 15.5484 17.6356 15.4145 17.5037 15.3068C17.2164 15.0677 16.6738 14.8285 15.8757 14.5882C14.9174 14.3233 14.1768 13.9815 13.6573 13.5615C13.1464 13.1415 12.8873 12.5558 12.8776 11.8033C12.8776 11.0928 13.2002 10.499 13.8456 10.0195C14.4738 9.54117 15.2756 9.30083 16.2533 9.30083C17.6149 9.30083 18.7088 9.617 19.5326 10.2505L18.5914 11.6493C18.2526 11.3978 17.8639 11.2144 17.4487 11.1103C17.0755 10.9912 16.6858 10.9263 16.2924 10.9178C15.828 10.9178 15.4552 10.9995 15.1766 11.1617C14.8991 11.325 14.761 11.5385 14.761 11.8033C14.761 12.095 14.9309 12.3423 15.2707 12.5477C15.6129 12.7448 16.1947 12.963 17.0184 13.2022C18.0133 13.4845 18.7222 13.8613 19.1427 14.3315C19.5643 14.8017 19.7746 15.4013 19.7746 16.1282C19.7746 16.8725 19.4751 17.5142 18.8738 18.0532C18.2822 18.584 17.4218 18.8617 16.2924 18.8873C14.8136 18.8873 13.5767 18.4638 12.5818 17.6168L13.6304 16.2308ZM6.87156 16.9752C7.15878 17.1467 7.50344 17.2318 7.90678 17.2318C8.32844 17.2318 8.67678 17.1163 8.95544 16.8853C9.23289 16.6462 9.37222 16.2308 9.37222 15.6405V9.45483H11.1872V15.9742C11.1603 16.9833 10.856 17.7113 10.273 18.1558C9.9549 18.414 9.58406 18.6063 9.184 18.7205C8.81346 18.8283 8.42857 18.8845 8.04122 18.8873C7.369 18.8873 6.77256 18.7765 6.25311 18.5537C5.697 18.3145 5.23133 17.891 4.85489 17.2832L6.11867 16.295C6.35089 16.5948 6.60267 16.8212 6.87156 16.9752Z" fill="#1572C2"/>
+</g>
+</svg>
diff --git a/resources/img/script_lang/lua.svg b/resources/img/script_lang/lua.svg
new file mode 100644
index 0000000000..b4ed3b20ee
--- /dev/null
+++ b/resources/img/script_lang/lua.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Frame 1171275564">
+<path id="Vector" d="M10.2 3.8771C7.4948 3.8771 4.90039 4.95174 2.98751 6.86462C1.07464 8.77749 0 11.3719 0 14.0771C0 16.7823 1.07464 19.3767 2.98751 21.2896C4.90039 23.2025 7.4948 24.2771 10.2 24.2771C11.5395 24.2771 12.8659 24.0133 14.1034 23.5007C15.3409 22.9881 16.4653 22.2368 17.4125 21.2896C18.3597 20.3425 19.111 19.218 19.6236 17.9805C20.1362 16.743 20.4 15.4166 20.4 14.0771C20.4 11.3719 19.3254 8.77749 17.4125 6.86462C15.4996 4.95174 12.9052 3.8771 10.2 3.8771ZM13.8 13.4771C13.0044 13.4771 12.2413 13.161 11.6787 12.5984C11.1161 12.0358 10.8 11.2728 10.8 10.4771C10.8 9.68146 11.1161 8.9184 11.6787 8.35579C12.2413 7.79318 13.0044 7.47711 13.8 7.47711C14.5957 7.47711 15.3587 7.79318 15.9213 8.35579C16.4839 8.9184 16.8 9.68146 16.8 10.4771C16.8 11.2728 16.4839 12.0358 15.9213 12.5984C15.3587 13.161 14.5957 13.4771 13.8 13.4771ZM21 0.2771C20.2044 0.2771 19.4413 0.59317 18.8787 1.15578C18.3161 1.71839 18 2.48145 18 3.2771C18 4.07275 18.3161 4.83581 18.8787 5.39842C19.4413 5.96103 20.2044 6.27711 21 6.27711C21.394 6.27711 21.7841 6.19951 22.1481 6.04874C22.512 5.89798 22.8428 5.677 23.1213 5.39842C23.3999 5.11985 23.6209 4.78913 23.7717 4.42515C23.9224 4.06118 24 3.67107 24 3.2771C24 2.48145 23.684 1.71839 23.1213 1.15578C22.5587 0.59317 21.7957 0.2771 21 0.2771Z" fill="#1572C2"/>
+</g>
+</svg>
diff --git a/resources/img/script_lang/php.svg b/resources/img/script_lang/php.svg
new file mode 100644
index 0000000000..05d8c7574a
--- /dev/null
+++ b/resources/img/script_lang/php.svg
@@ -0,0 +1,9 @@
+<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Frame 1171275566">
+<g id="Subtract">
+<path d="M7.02752 10.748C7.57952 10.748 7.93952 10.844 8.13152 11.06C8.32352 11.252 8.34752 11.612 8.25152 12.092C8.15552 12.596 7.96352 12.98 7.67552 13.196C7.38752 13.412 6.95552 13.532 6.37952 13.532H5.49152L6.01952 10.748H7.02752Z" fill="#1572C2"/>
+<path d="M19.8195 11.06C19.6275 10.844 19.2675 10.748 18.7155 10.748H17.7075L17.1795 13.532H18.0675C18.6435 13.532 19.0755 13.412 19.3635 13.196C19.6515 12.98 19.8435 12.596 19.9395 12.092C20.0355 11.612 20.0115 11.252 19.8195 11.06Z" fill="#1572C2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24.3795 12.5C24.3795 19.1274 19.0069 24.5 12.3795 24.5C5.7521 24.5 0.379517 19.1274 0.379517 12.5C0.379517 5.87258 5.7521 0.5 12.3795 0.5C19.0069 0.5 24.3795 5.87258 24.3795 12.5ZM11.2035 7.94H12.6435L12.3075 9.716H13.5795C14.3715 9.716 14.9475 9.86 15.2355 10.148C15.5475 10.436 15.6435 10.892 15.4995 11.516L14.8995 14.612H13.4355L14.0115 11.684C14.0835 11.348 14.0595 11.132 13.9395 11.012C13.8195 10.892 13.5795 10.82 13.2195 10.82H12.0675L11.3235 14.612H9.88352L11.2035 7.94ZM3.49952 16.34H4.93952L5.27552 14.564H6.52352C7.07552 14.564 7.50752 14.516 7.86752 14.396C8.22752 14.276 8.53952 14.084 8.82752 13.82C9.06752 13.604 9.25952 13.34 9.42752 13.076C9.57152 12.812 9.69152 12.5 9.73952 12.188C9.88352 11.396 9.78752 10.796 9.40352 10.34C9.01952 9.908 8.41952 9.692 7.57952 9.692H4.79552L3.49952 16.34ZM16.6275 16.34H15.1875L16.4835 9.692H19.2675C20.1075 9.692 20.7075 9.908 21.0915 10.34C21.4755 10.796 21.5715 11.396 21.4275 12.188C21.3795 12.5 21.2595 12.812 21.1155 13.076C20.9475 13.34 20.7555 13.604 20.5155 13.82C20.2275 14.084 19.9155 14.276 19.5555 14.396C19.1955 14.516 18.7635 14.564 18.2115 14.564H16.9635L16.6275 16.34Z" fill="#1572C2"/>
+</g>
+</g>
+</svg>
diff --git a/resources/js/processes/scripts/components/CreateScriptModal.vue b/resources/js/processes/scripts/components/CreateScriptModal.vue
index ac773f8ad9..e534347104 100644
--- a/resources/js/processes/scripts/components/CreateScriptModal.vue
+++ b/resources/js/processes/scripts/components/CreateScriptModal.vue
@@ -20,7 +20,10 @@
     >
       <b-row>
         <b-col cols="4">
-          <!-- TODO -->
+          <language-script
+            :languages="scriptExecutors"
+            :select="onSelect"
+          />
         </b-col>
         <b-col cols="8">
           <template v-if="countCategories">
@@ -225,6 +228,7 @@ import Required from "../../../components/shared/Required.vue";
 import ProjectSelect from "../../../components/shared/ProjectSelect.vue";
 import SliderWithInput from "../../../components/shared/SliderWithInput.vue";
 import { isQuickCreate as isQuickCreateFunc } from "../../../utils/isQuickCreate";
+import LanguageScript from "./LanguageScript.vue";
 
 const channel = new BroadcastChannel("assetCreation");
 
@@ -234,6 +238,7 @@ export default {
     Required,
     SliderWithInput,
     ProjectSelect,
+    LanguageScript,
   },
   mixins: [FormErrorsMixin],
   props: [
@@ -305,15 +310,7 @@ export default {
         .get(`/users/${this.userRunScript}`)
         .then((response) => {
           this.selectedUser = response.data;
-        })
-    },
-    /**
-       * Check if the search params contains create=true which means is coming from the Modeler as a Quick Asset Creation
-       * @returns {boolean}
-       */
-    isQuickCreate() {
-      const searchParams = new URLSearchParams(window.location.search);
-      return searchParams?.get("create") === "true";
+        });
     },
     onClose() {
       this.title = "";
@@ -390,6 +387,12 @@ export default {
           }
         });
     },
+    /**
+     * Set the ID of the language selected
+     */
+    onSelect(langId) {
+      this.script_executor_id = langId;
+    },
   },
 };
 </script>
diff --git a/resources/js/processes/scripts/components/LanguageScript.vue b/resources/js/processes/scripts/components/LanguageScript.vue
new file mode 100644
index 0000000000..1217706307
--- /dev/null
+++ b/resources/js/processes/scripts/components/LanguageScript.vue
@@ -0,0 +1,77 @@
+<template>
+  <div class="container-lang">
+    <label class="choose-lang m-2 text-uppercase">
+      {{ $t("Choose a language") }}
+    </label>
+    <div
+      v-for="(lang, index) in languages"
+      :key="index"
+    >
+      <b-card
+        :ref="`${lang}`"
+        class="mt-2 card-lang"
+        @click="selectLanguage(lang, index)"
+      >
+        <b-card-text>
+          <img
+            :src="getImage(lang)"
+            :alt="lang"
+          >
+          <span class="text-uppercase ml-2">
+            {{ lang }}
+          </span>
+        </b-card-text>
+      </b-card>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["languages", "select"],
+  methods: {
+    /**
+     * Check the language selected and emit to modal
+     */
+    selectLanguage(lang, index) {
+      this.selectedLang(lang);
+      this.select(index);
+    },
+    /**
+     * Get the Icon of the language
+     */
+    getImage(lang) {
+      return `/img/script_lang/${lang}.svg`;
+    },
+    /**
+     * Add the border to the item selected
+     */
+    selectedLang(lang) {
+      for (const item in this.$refs) {
+        this.$refs[item][0].className = "card mb-2 card-lang";
+      }
+      this.$refs[lang][0].className = "card mb-2 card-lang selected";
+    },
+  },
+};
+</script>
+
+<style scoped>
+  .selected {
+    border: 3px solid #1572C2;
+    background-color: #EDF6FF;
+  }
+  .card-lang {
+    cursor: pointer;
+    width: 90%;
+    margin-left: 5%;
+  }
+  .container-lang {
+    background-color: #F6F9FB;
+    height: 100%;
+    font-size: 14px;
+  }
+  .choose-lang {
+    color: #6A7888;
+  }
+</style>
diff --git a/webpack.mix.js b/webpack.mix.js
index 5d729dde12..5fa355a8ed 100644
--- a/webpack.mix.js
+++ b/webpack.mix.js
@@ -54,6 +54,7 @@ mix.extract([
   "@fortawesome/vue-fontawesome"
 ])
   .copy("resources/img/*", "public/img")
+  .copy("resources/img/script_lang/*", "public/img/script_lang")
   .copy("node_modules/snapsvg/dist/snap.svg.js", "public/js")
   .copy("resources/js/components/CustomActions.vue", "public/js")
   .copy("resources/js/components/DetailRow.vue", "public/js")

From 0a12b7764802c08256471e5dc72fbd06ca8e8957 Mon Sep 17 00:00:00 2001
From: luNunezProcessmaker <luciana.nunez@processmaker.com>
Date: Fri, 17 Nov 2023 12:55:33 -0400
Subject: [PATCH 09/21] feature/FOUR-12430

---
 .../scripts/components/CreateScriptModal.vue  | 51 +++++--------------
 1 file changed, 14 insertions(+), 37 deletions(-)

diff --git a/resources/js/processes/scripts/components/CreateScriptModal.vue b/resources/js/processes/scripts/components/CreateScriptModal.vue
index 519258920a..fcad5bfbd6 100644
--- a/resources/js/processes/scripts/components/CreateScriptModal.vue
+++ b/resources/js/processes/scripts/components/CreateScriptModal.vue
@@ -62,15 +62,6 @@
                 rows="2"
               />
             </b-form-group>
-            <category-select
-              v-show="!projectAsset"
-              v-model="script_category_id"
-              :errors="addError.script_category_id"
-              :label="$t('Category')"
-              api-get="script_categories"
-              api-list="script_categories"
-              name="script_category_id"
-            />
             <project-select
               v-if="isProjectsInstalled"
               v-model="projects"
@@ -82,25 +73,18 @@
               name="project"
               :project-id="projectId"
             />
-            <b-form-group
-              :invalid-feedback="errorMessage('script_executor_id', addError)"
-              :label="$t('Language')"
-              :state="errorState('script_executor_id', addError)"
-              :disabled="copyAssetMode"
-              required
-            >
-              <b-form-select
-                v-model="script_executor_id"
-                :options="scriptExecutors"
-                :state="errorState('script_executor_id', addError)"
-                :disabled="copyAssetMode"
-                name="script_executor_id"
-                required
-              />
-            </b-form-group>
+            <category-select
+              v-show="!projectAsset"
+              v-model="script_category_id"
+              :errors="addError.script_category_id"
+              :label="$t('Category')"
+              api-get="script_categories"
+              api-list="script_categories"
+              name="script_category_id"
+            />
             <div class="d-flex justify-content-end w-100">
               <button
-                class="btn btn-link text-capitalize collapsed"
+                class="btn btn-link text-capitalize weight-600 collapsed"
                 type="button"
                 data-toggle="collapse"
                 data-target="#collapseAdvancedOptions"
@@ -122,13 +106,6 @@
               class="collapse"
             >
               <b-form-group
-                :description="
-                  formDescription(
-                    'Select a user to set the API access of the Script',
-                    'run_as_user_id',
-                    addError
-                  )
-                "
                 :invalid-feedback="errorMessage('run_as_user_id', addError)"
                 :label="$t('Run script as')"
                 :state="errorState('run_as_user_id', addError)"
@@ -155,7 +132,7 @@
                 <div class="d-flex d-flex justify-content-between align-items-center mb-3">
                   <div class="label-description">
                     <label
-                      class="label-number"
+                      class="weight-600"
                       for="inputTimeout"
                     >
                       {{ $t('Timeout') }}
@@ -187,7 +164,7 @@
                 <div class="d-flex d-flex justify-content-between align-items-center mb-3">
                   <div class="label-description">
                     <label
-                      class="label-number"
+                      class="weight-600"
                       for="inputRetryAttempts"
                     >
                       {{ $t('Retry Attempts') }}
@@ -219,7 +196,7 @@
                 <div class="d-flex d-flex justify-content-between align-items-center mb-3">
                   <div class="label-description">
                     <label
-                      class="label-number"
+                      class="weight-600"
                       for="inputRetryWaitTime"
                     >
                       {{ $t('Retry Wait Time') }}
@@ -446,7 +423,7 @@ export default {
   .input-number {
     width: 15%;
   }
-  .label-number {
+  .weight-600{
     font-weight: 600;
   }
   .form-group-border{

From 47fbcded64855cd763bf2c167532408cdef3e0a9 Mon Sep 17 00:00:00 2001
From: luNunezProcessmaker <luciana.nunez@processmaker.com>
Date: Fri, 17 Nov 2023 14:52:52 -0400
Subject: [PATCH 10/21] feature/FOUR-12430

---
 .../scripts/components/CreateScriptModal.vue     | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/resources/js/processes/scripts/components/CreateScriptModal.vue b/resources/js/processes/scripts/components/CreateScriptModal.vue
index fcad5bfbd6..8c5a7ff6c8 100644
--- a/resources/js/processes/scripts/components/CreateScriptModal.vue
+++ b/resources/js/processes/scripts/components/CreateScriptModal.vue
@@ -9,14 +9,12 @@
     >
       <i class="fas fa-plus" /> {{ $t("Script") }}
     </b-button>
-    <modal
+    <b-modal
       id="createScript"
       size="xl"
       scrollable
       :ok-disabled="disabled"
       :title="modalSetUp"
-      @hidden="onClose"
-      @ok.prevent="onSubmit"
     >
       <b-row>
         <b-col cols="4">
@@ -24,7 +22,6 @@
         </b-col>
         <b-col cols="8">
           <template v-if="countCategories">
-            <required />
             <b-form-group
               :description="
                 formDescription(
@@ -236,7 +233,16 @@
           </template>
         </b-col>
       </b-row>
-    </modal>
+      <div slot="modal-footer" class="w-100 m-0 d-flex d-flex align-items-center">
+        <required />
+        <button type="button" class="btn btn-outline-secondary ml-auto" @click="onClose">
+          {{ $t('Cancel') }}
+        </button>
+        <button type="button" class="btn btn-secondary ml-3" @click="onSubmit">
+          {{ $t('Save') }}
+        </button>
+      </div>
+    </b-modal>
   </div>
 </template>
 

From 8a3e42a5cf9fb06878c79612c9645adb7753433f Mon Sep 17 00:00:00 2001
From: luNunezProcessmaker
 <123644082+luNunezProcessmaker@users.noreply.github.com>
Date: Fri, 17 Nov 2023 20:37:59 +0000
Subject: [PATCH 11/21] feature/FOUR-12430

---
 resources/js/processes/scripts/components/CreateScriptModal.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/resources/js/processes/scripts/components/CreateScriptModal.vue b/resources/js/processes/scripts/components/CreateScriptModal.vue
index 8c5a7ff6c8..aa3a437a52 100644
--- a/resources/js/processes/scripts/components/CreateScriptModal.vue
+++ b/resources/js/processes/scripts/components/CreateScriptModal.vue
@@ -13,6 +13,7 @@
       id="createScript"
       size="xl"
       scrollable
+      centered
       :ok-disabled="disabled"
       :title="modalSetUp"
     >

From 4fede8f6e89df8eec63b68d9d93bc92f6132ed3b Mon Sep 17 00:00:00 2001
From: luNunezProcessmaker <luciana.nunez@processmaker.com>
Date: Fri, 17 Nov 2023 16:49:34 -0400
Subject: [PATCH 12/21] feature/FOUR-12430

---
 .../scripts/components/CreateScriptModal.vue          | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/resources/js/processes/scripts/components/CreateScriptModal.vue b/resources/js/processes/scripts/components/CreateScriptModal.vue
index aa3a437a52..398955c6c8 100644
--- a/resources/js/processes/scripts/components/CreateScriptModal.vue
+++ b/resources/js/processes/scripts/components/CreateScriptModal.vue
@@ -21,7 +21,10 @@
         <b-col cols="4">
           <!-- TODO -->
         </b-col>
-        <b-col cols="8">
+        <b-col
+          cols="8"
+          class="script-form"
+        >
           <template v-if="countCategories">
             <b-form-group
               :description="
@@ -440,4 +443,10 @@ export default {
   :not(.collapsed) > .closed {
       display: none;
   }
+  .script-form {
+    overflow-y: scroll;
+    display: block;
+    height: 100%;
+    max-height: 470px;
+  }
 </style>

From b6c3cb3a03cb82169f58d1112e340511aabb70ca Mon Sep 17 00:00:00 2001
From: luNunezProcessmaker <luciana.nunez@processmaker.com>
Date: Mon, 20 Nov 2023 10:49:05 -0400
Subject: [PATCH 13/21] feature/FOUR-12430

---
 .../js/processes/scripts/components/CreateScriptModal.vue      | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/resources/js/processes/scripts/components/CreateScriptModal.vue b/resources/js/processes/scripts/components/CreateScriptModal.vue
index 398955c6c8..6860ec97ea 100644
--- a/resources/js/processes/scripts/components/CreateScriptModal.vue
+++ b/resources/js/processes/scripts/components/CreateScriptModal.vue
@@ -444,9 +444,8 @@ export default {
       display: none;
   }
   .script-form {
-    overflow-y: scroll;
     display: block;
     height: 100%;
-    max-height: 470px;
+    max-height: 446px;
   }
 </style>

From 9eaefdbb85760fda519c2299cec34f47b6eac605 Mon Sep 17 00:00:00 2001
From: Paula Quispe <paula.quispe@processmaker.com>
Date: Mon, 20 Nov 2023 15:55:50 -0400
Subject: [PATCH 14/21] FOUR-12488

---
 resources/js/processes/scripts/components/CreateScriptModal.vue | 2 +-
 resources/views/processes/scripts/edit.blade.php                | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/js/processes/scripts/components/CreateScriptModal.vue b/resources/js/processes/scripts/components/CreateScriptModal.vue
index 3a49f1a810..493159fd47 100644
--- a/resources/js/processes/scripts/components/CreateScriptModal.vue
+++ b/resources/js/processes/scripts/components/CreateScriptModal.vue
@@ -111,7 +111,7 @@
             >
               <b-form-group
                 :invalid-feedback="errorMessage('run_as_user_id', addError)"
-                :label="$t('Run script as')"
+                :label="$t('Run Script As')"
                 :state="errorState('run_as_user_id', addError)"
                 required
               >
diff --git a/resources/views/processes/scripts/edit.blade.php b/resources/views/processes/scripts/edit.blade.php
index 0c29391e64..9868efb929 100644
--- a/resources/views/processes/scripts/edit.blade.php
+++ b/resources/views/processes/scripts/edit.blade.php
@@ -59,7 +59,7 @@
                           :errors="errors.projects">
                         </project-select>
                         <div class="form-group">
-                            <label class="typo__label">{{__('Run script as')}}<small class="ml-1">*</small></label>
+                            <label class="typo__label">{{__('Run Script As')}}<small class="ml-1">*</small></label>
                             <select-user v-model="selectedUser" :multiple="false" :class="{'is-invalid': errors.run_as_user_id}">
                             </select-user>
                             <div class="invalid-feedback" role="alert" v-if="errors.run_as_user_id">@{{errors.run_as_user_id[0]}}</div>

From cdcaf9d20cd299198d9bee30d347d792f3c32176 Mon Sep 17 00:00:00 2001
From: Fabio <frguachallab@gmail.com>
Date: Mon, 20 Nov 2023 20:04:13 +0000
Subject: [PATCH 15/21] FOUR-12482:Integration: New Script Modal Redesign

---
 .../scripts/components/CreateScriptModal.vue  | 26 ++++++--
 .../scripts/components/LanguageScript.vue     | 62 ++++++++++++-------
 2 files changed, 61 insertions(+), 27 deletions(-)

diff --git a/resources/js/processes/scripts/components/CreateScriptModal.vue b/resources/js/processes/scripts/components/CreateScriptModal.vue
index 3a49f1a810..891385c5d9 100644
--- a/resources/js/processes/scripts/components/CreateScriptModal.vue
+++ b/resources/js/processes/scripts/components/CreateScriptModal.vue
@@ -14,6 +14,7 @@
       size="xl"
       scrollable
       centered
+      no-close-on-backdrop
       :ok-disabled="disabled"
       :title="modalSetUp"
     >
@@ -22,6 +23,7 @@
           <language-script
             :languages="scriptExecutors"
             :select="onSelect"
+            :invalid_feedback="errorMessage('script_executor_id', addError)"
           />
         </b-col>
         <b-col
@@ -240,12 +242,23 @@
           </template>
         </b-col>
       </b-row>
-      <div slot="modal-footer" class="w-100 m-0 d-flex d-flex align-items-center">
+      <div
+        slot="modal-footer"
+        class="w-100 m-0 d-flex d-flex align-items-center"
+      >
         <required />
-        <button type="button" class="btn btn-outline-secondary ml-auto" @click="onClose">
+        <button
+          type="button"
+          class="btn btn-outline-secondary ml-auto"
+          @click="onClose"
+        >
           {{ $t('Cancel') }}
         </button>
-        <button type="button" class="btn btn-secondary ml-3" @click="onSubmit">
+        <button
+          type="button"
+          class="btn btn-secondary ml-3"
+          @click="onSubmit"
+        >
           {{ $t('Save') }}
         </button>
       </div>
@@ -309,9 +322,6 @@ export default {
       userRunScript: 1,
     };
   },
-  mounted() {
-    this.getAdminUser();
-  },
   computed: {
     modalSetUp() {
       if (this.copyAssetMode) {
@@ -333,6 +343,9 @@ export default {
       return this.$t("Create Script");
     },
   },
+  mounted() {
+    this.getAdminUser();
+  },
   methods: {
     show() {
       this.$bvModal.show("createScript");
@@ -356,6 +369,7 @@ export default {
       this.retry_attempts = 0;
       this.retry_wait_time = 5;
       this.addError = {};
+      this.close();
     },
     close() {
       this.$bvModal.hide("createScript");
diff --git a/resources/js/processes/scripts/components/LanguageScript.vue b/resources/js/processes/scripts/components/LanguageScript.vue
index 1217706307..a81de50ec9 100644
--- a/resources/js/processes/scripts/components/LanguageScript.vue
+++ b/resources/js/processes/scripts/components/LanguageScript.vue
@@ -3,32 +3,50 @@
     <label class="choose-lang m-2 text-uppercase">
       {{ $t("Choose a language") }}
     </label>
-    <div
-      v-for="(lang, index) in languages"
-      :key="index"
-    >
-      <b-card
-        :ref="`${lang}`"
-        class="mt-2 card-lang"
-        @click="selectLanguage(lang, index)"
+    <div class="content-lang">
+      <template
+        v-for="(lang, index) in languages"
       >
-        <b-card-text>
-          <img
-            :src="getImage(lang)"
-            :alt="lang"
-          >
-          <span class="text-uppercase ml-2">
-            {{ lang }}
-          </span>
-        </b-card-text>
-      </b-card>
+        <b-card
+          :key="index"
+          :ref="`${lang}`"
+          class="mt-2"
+          @click="selectLanguage(lang, index)"
+        >
+          <b-card-text>
+            <img
+              :src="getImage(lang)"
+              :alt="lang"
+            >
+            <span class="text-uppercase ml-2">
+              {{ lang }}
+            </span>
+          </b-card-text>
+        </b-card>
+      </template>
+      <span
+        v-if="showError !== ''"
+        class="d-block invalid-feedback"
+      >
+        {{ invalid_feedback }}
+      </span>
     </div>
   </div>
 </template>
 
 <script>
 export default {
-  props: ["languages", "select"],
+  props: ["languages", "select", "invalid_feedback"],
+  data() {
+    return {
+      showError: false,
+    };
+  },
+  watch: {
+    invalid_feedback(newVal) {
+      this.showError = newVal === "";
+    },
+  },
   methods: {
     /**
      * Check the language selected and emit to modal
@@ -63,8 +81,6 @@ export default {
   }
   .card-lang {
     cursor: pointer;
-    width: 90%;
-    margin-left: 5%;
   }
   .container-lang {
     background-color: #F6F9FB;
@@ -74,4 +90,8 @@ export default {
   .choose-lang {
     color: #6A7888;
   }
+  .content-lang {
+    width: 90%;
+    margin-left: 5%;
+  }
 </style>

From 0ab280301145c3ed5fbb5300a4165e515672ef15 Mon Sep 17 00:00:00 2001
From: Fabio <frguachallab@gmail.com>
Date: Tue, 21 Nov 2023 17:39:36 +0000
Subject: [PATCH 16/21] FOUR-12505:Other script executor does not have an icon
 on the modal script list

---
 ProcessMaker/Models/ScriptExecutor.php        |  5 ++++-
 .../scripts/components/LanguageScript.vue     | 20 ++++++++++++++-----
 2 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/ProcessMaker/Models/ScriptExecutor.php b/ProcessMaker/Models/ScriptExecutor.php
index 055374973b..e36a90b580 100644
--- a/ProcessMaker/Models/ScriptExecutor.php
+++ b/ProcessMaker/Models/ScriptExecutor.php
@@ -154,7 +154,10 @@ public static function list($language = null)
         }
 
         foreach ($executors->get() as $executor) {
-            $list[$executor->id] = $executor->language;
+            $list[$executor->id] = [
+                'language' => $executor->language,
+                'title' => $executor->title,
+            ];
         }
 
         return $list;
diff --git a/resources/js/processes/scripts/components/LanguageScript.vue b/resources/js/processes/scripts/components/LanguageScript.vue
index a81de50ec9..133517d434 100644
--- a/resources/js/processes/scripts/components/LanguageScript.vue
+++ b/resources/js/processes/scripts/components/LanguageScript.vue
@@ -9,17 +9,17 @@
       >
         <b-card
           :key="index"
-          :ref="`${lang}`"
+          :ref="`${lang.title}`"
           class="mt-2"
           @click="selectLanguage(lang, index)"
         >
           <b-card-text>
             <img
               :src="getImage(lang)"
-              :alt="lang"
+              :alt="lang.title"
             >
             <span class="text-uppercase ml-2">
-              {{ lang }}
+              {{ lang.language }}
             </span>
           </b-card-text>
         </b-card>
@@ -59,7 +59,17 @@ export default {
      * Get the Icon of the language
      */
     getImage(lang) {
-      return `/img/script_lang/${lang}.svg`;
+      let srcImage = "";
+      switch (lang.language) {
+        case "php":
+        case "javascript":
+        case "lua":
+          srcImage = `/img/script_lang/${lang.language}.svg`;
+          break;
+        default:
+          srcImage = "/img/script_lang/default.svg";
+      }
+      return srcImage;
     },
     /**
      * Add the border to the item selected
@@ -68,7 +78,7 @@ export default {
       for (const item in this.$refs) {
         this.$refs[item][0].className = "card mb-2 card-lang";
       }
-      this.$refs[lang][0].className = "card mb-2 card-lang selected";
+      this.$refs[lang.title][0].className = "card mb-2 card-lang selected";
     },
   },
 };

From fda293e1802b9e1e16ee1402ab7b2ede3595bb00 Mon Sep 17 00:00:00 2001
From: CarliPinell <carlos.pinell@processmaker.com>
Date: Tue, 21 Nov 2023 15:34:28 -0400
Subject: [PATCH 17/21] Fixing QA Observation Close Modal

---
 .../js/processes/scripts/components/CreateScriptModal.vue     | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/resources/js/processes/scripts/components/CreateScriptModal.vue b/resources/js/processes/scripts/components/CreateScriptModal.vue
index 891385c5d9..7fe4c94f27 100644
--- a/resources/js/processes/scripts/components/CreateScriptModal.vue
+++ b/resources/js/processes/scripts/components/CreateScriptModal.vue
@@ -17,6 +17,7 @@
       no-close-on-backdrop
       :ok-disabled="disabled"
       :title="modalSetUp"
+      @hidden="modalHidden"
     >
       <b-row>
         <b-col cols="4">
@@ -347,6 +348,9 @@ export default {
     this.getAdminUser();
   },
   methods: {
+    modalHidden() {
+      this.onClose();
+    },
     show() {
       this.$bvModal.show("createScript");
     },

From eeb77e2f8daefeaba2c64ad286889586a53fc629 Mon Sep 17 00:00:00 2001
From: CarliPinell <carlos.pinell@processmaker.com>
Date: Wed, 22 Nov 2023 10:22:56 -0400
Subject: [PATCH 18/21] Solving Default Admin user after close window

---
 .../js/processes/scripts/components/CreateScriptModal.vue   | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/resources/js/processes/scripts/components/CreateScriptModal.vue b/resources/js/processes/scripts/components/CreateScriptModal.vue
index 7fe4c94f27..220a464e22 100644
--- a/resources/js/processes/scripts/components/CreateScriptModal.vue
+++ b/resources/js/processes/scripts/components/CreateScriptModal.vue
@@ -17,7 +17,7 @@
       no-close-on-backdrop
       :ok-disabled="disabled"
       :title="modalSetUp"
-      @hidden="modalHidden"
+      @hidden="onClose"
     >
       <b-row>
         <b-col cols="4">
@@ -348,9 +348,6 @@ export default {
     this.getAdminUser();
   },
   methods: {
-    modalHidden() {
-      this.onClose();
-    },
     show() {
       this.$bvModal.show("createScript");
     },
@@ -373,6 +370,7 @@ export default {
       this.retry_attempts = 0;
       this.retry_wait_time = 5;
       this.addError = {};
+      this.getAdminUser();
       this.close();
     },
     close() {

From 50307644a12f9be42a2a030a682f35b76d651ef3 Mon Sep 17 00:00:00 2001
From: Fabio <frguachallab@gmail.com>
Date: Wed, 22 Nov 2023 15:15:58 +0000
Subject: [PATCH 19/21] FOUR-12504:It is not possible to recognize the new
 custom script executor created

---
 .../scripts/components/LanguageScript.vue     | 32 +++++++++++++++----
 1 file changed, 25 insertions(+), 7 deletions(-)

diff --git a/resources/js/processes/scripts/components/LanguageScript.vue b/resources/js/processes/scripts/components/LanguageScript.vue
index 133517d434..95e4799691 100644
--- a/resources/js/processes/scripts/components/LanguageScript.vue
+++ b/resources/js/processes/scripts/components/LanguageScript.vue
@@ -13,14 +13,24 @@
           class="mt-2"
           @click="selectLanguage(lang, index)"
         >
-          <b-card-text>
-            <img
-              :src="getImage(lang)"
-              :alt="lang.title"
+          <b-card-text class="row">
+            <b-col cols="2">
+              <img
+                :src="getImage(lang)"
+                :alt="lang.title"
+              >
+            </b-col>
+            <b-col
+              class="d-flex flex-column"
+              cols="10"
             >
-            <span class="text-uppercase ml-2">
-              {{ lang.language }}
-            </span>
+              <span class="text-uppercase">
+                {{ lang.language }}
+              </span>
+              <span class="text-title text-muted font-italic">
+                {{ lang.title }}
+              </span>
+            </b-col>
           </b-card-text>
         </b-card>
       </template>
@@ -95,7 +105,9 @@ export default {
   .container-lang {
     background-color: #F6F9FB;
     height: 100%;
+    max-height: 450px;
     font-size: 14px;
+    overflow-y: auto;
   }
   .choose-lang {
     color: #6A7888;
@@ -104,4 +116,10 @@ export default {
     width: 90%;
     margin-left: 5%;
   }
+  .card-body {
+    padding: 12px;
+  }
+  .text-title {
+    font-size: 12px;
+  }
 </style>

From 97c2caa34720a727ce84e6f143230cd323e43f5e Mon Sep 17 00:00:00 2001
From: Fabio <frguachallab@gmail.com>
Date: Wed, 22 Nov 2023 19:42:04 +0000
Subject: [PATCH 20/21] FOUR-12525:The language selected on the script is not
 shown in settings

---
 resources/views/processes/scripts/edit.blade.php | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/resources/views/processes/scripts/edit.blade.php b/resources/views/processes/scripts/edit.blade.php
index 0c29391e64..c835fc0839 100644
--- a/resources/views/processes/scripts/edit.blade.php
+++ b/resources/views/processes/scripts/edit.blade.php
@@ -64,10 +64,15 @@
                             </select-user>
                             <div class="invalid-feedback" role="alert" v-if="errors.run_as_user_id">@{{errors.run_as_user_id[0]}}</div>
                         </div>
-
+                        @php
+                            $scriptExecutorsLang = [];
+                            foreach ($scriptExecutors as $key => $value) {
+                                $scriptExecutorsLang[$key] = $value["language"] . " - " . $value["title"];
+                            }
+                        @endphp
                         <div class="form-group">
                             {!!Form::label('script_executor_id', __('Script Executor'))!!}<small class="ml-1">*</small>
-                            {!!Form::select('script_executor_id', [''=>__('Select')] + $scriptExecutors, null, ['class'=>
+                            {!!Form::select('script_executor_id', [''=>__('Select')] + $scriptExecutorsLang, null, ['class'=>
                             'form-control', 'v-model'=> 'formData.script_executor_id', 'v-bind:class' => '{\'form-control\':true,
                             \'is-invalid\':errors.script_executor_id}', 'required', 'aria-required' => 'true']);!!}
                             <div class="invalid-feedback" role="alert" v-if="errors.script_executor_id">@{{errors.script_executor_id[0]}}</div>

From 4aeec7023cb0143db48c84404e952c9106e08eae Mon Sep 17 00:00:00 2001
From: CarliPinell <carlos.pinell@processmaker.com>
Date: Thu, 23 Nov 2023 09:02:13 -0400
Subject: [PATCH 21/21] QA Observations solved

---
 resources/js/processes/scripts/components/CreateScriptModal.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/resources/js/processes/scripts/components/CreateScriptModal.vue b/resources/js/processes/scripts/components/CreateScriptModal.vue
index 220a464e22..486f6e628b 100644
--- a/resources/js/processes/scripts/components/CreateScriptModal.vue
+++ b/resources/js/processes/scripts/components/CreateScriptModal.vue
@@ -371,6 +371,7 @@ export default {
       this.retry_wait_time = 5;
       this.addError = {};
       this.getAdminUser();
+      this.projects = [];
       this.close();
     },
     close() {