From 6fd93b9f5d021cc91d7f4e846f5f2c2a718fa78d Mon Sep 17 00:00:00 2001
From: Nivedin <53208152+nivedin@users.noreply.github.com>
Date: Thu, 19 Dec 2024 15:22:30 +0530
Subject: [PATCH] chore: run collection modal updates (#4633)

Adds loading state for the runner modal and enables the `CLI` tab for personal collections.
---
 packages/hoppscotch-common/locales/en.json    |  1 +
 .../src/components/http/test/RunnerModal.vue  | 72 ++++++++++---------
 2 files changed, 39 insertions(+), 34 deletions(-)

diff --git a/packages/hoppscotch-common/locales/en.json b/packages/hoppscotch-common/locales/en.json
index 685c3951..45f20231 100644
--- a/packages/hoppscotch-common/locales/en.json
+++ b/packages/hoppscotch-common/locales/en.json
@@ -1215,6 +1215,7 @@
     "cli_environment_id_description": "This environment ID will be used by the CLI collection runner for Hoppscotch.",
     "include_active_environment": "Include active environment:",
     "cli": "CLI",
+    "cli_comming_soon_for_personal_collection": "Collection Runner for personal collections in CLI is coming soon.",
     "delay": "Delay",
     "negative_delay": "Delay cannot be negative",
     "ui": "Runner",
diff --git a/packages/hoppscotch-common/src/components/http/test/RunnerModal.vue b/packages/hoppscotch-common/src/components/http/test/RunnerModal.vue
index 55a6440b..b1b0b970 100644
--- a/packages/hoppscotch-common/src/components/http/test/RunnerModal.vue
+++ b/packages/hoppscotch-common/src/components/http/test/RunnerModal.vue
@@ -86,41 +86,44 @@
             </section>
           </div>
         </HoppSmartTab>
-        <HoppSmartTab
-          id="cli"
-          :label="`${t('collection_runner.cli')} ${
-            !CLICommand ? '(Team Collections Only)' : ''
-          }`"
-          :disabled="!CLICommand"
-        >
-          <HttpTestEnv :show="false" @select-env="setCurrentEnv" />
-
-          <div class="space-y-4 p-4">
-            <p
-              class="p-4 mb-4 border rounded-md text-amber-500 border-amber-600"
-            >
-              {{ cliCommandGenerationDescription }}
+        <HoppSmartTab id="cli" :label="t('collection_runner.cli')">
+          <div v-if="!CLICommand" class="p-4">
+            <p class="p-4 border rounded-md text-amber-500 border-amber-600">
+              {{
+                t("collection_runner.cli_comming_soon_for_personal_collection")
+              }}
             </p>
-
-            <div v-if="environmentID" class="flex gap-x-2 items-center">
-              <HoppSmartCheckbox
-                :on="includeEnvironmentID"
-                @change="toggleIncludeEnvironment"
-              />
-              <span class="truncate"
-                >{{ t("collection_runner.include_active_environment") }}
-                <span class="text-secondaryDark">
-                  {{ currentEnv?.name }}
-                </span>
-              </span>
-            </div>
-
-            <div
-              class="p-4 rounded-md bg-primaryLight text-secondaryDark select-text"
-            >
-              {{ CLICommand }}
-            </div>
           </div>
+          <template v-else>
+            <HttpTestEnv :show="false" @select-env="setCurrentEnv" />
+
+            <div class="space-y-4 p-4">
+              <p
+                class="p-4 mb-4 border rounded-md text-amber-500 border-amber-600"
+              >
+                {{ cliCommandGenerationDescription }}
+              </p>
+
+              <div v-if="environmentID" class="flex gap-x-2 items-center">
+                <HoppSmartCheckbox
+                  :on="includeEnvironmentID"
+                  @change="toggleIncludeEnvironment"
+                />
+                <span class="truncate"
+                  >{{ t("collection_runner.include_active_environment") }}
+                  <span class="text-secondaryDark">
+                    {{ currentEnv?.name }}
+                  </span>
+                </span>
+              </div>
+
+              <div
+                class="p-4 rounded-md bg-primaryLight text-secondaryDark select-text"
+              >
+                {{ CLICommand }}
+              </div>
+            </div>
+          </template>
         </HoppSmartTab>
         <template #actions>
           <HoppButtonSecondary
@@ -141,12 +144,13 @@
           v-if="activeTab === 'gui'"
           :label="`${t('test.run')}`"
           :disabled="config.delay < 0"
+          :loading="loadingCollection"
           :icon="IconPlay"
           outline
           @click="runTests"
         />
         <HoppButtonPrimary
-          v-else
+          v-else-if="CLICommand"
           :label="`${t('action.copy')}`"
           :icon="copyIcon"
           outline