From cfdab014c739c994f4a9399b62ab229a07b9eaa9 Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Tue, 28 Jun 2022 16:33:39 +0530
Subject: [PATCH] refactor: allow smart tabs to render inactive tabs as an
 option

---
 .../components/collections/ChooseType.vue     |  6 +++++-
 .../components/graphql/RequestOptions.vue     |  1 +
 .../components/graphql/Sidebar.vue            |  2 ++
 .../components/http/RequestOptions.vue        |  1 +
 .../components/http/Sidebar.vue               |  1 +
 .../lenses/ResponseBodyRenderer.vue           |  1 +
 .../components/realtime/LogEntry.vue          |  6 +++++-
 .../hoppscotch-app/components/smart/Tab.vue   | 19 ++++++++++++++++---
 .../hoppscotch-app/components/smart/Tabs.vue  |  7 +++++++
 packages/hoppscotch-app/pages/profile.vue     |  2 +-
 .../pages/realtime/Socketio.vue               |  2 ++
 .../pages/realtime/Websocket.vue              |  1 +
 12 files changed, 43 insertions(+), 6 deletions(-)

diff --git a/packages/hoppscotch-app/components/collections/ChooseType.vue b/packages/hoppscotch-app/components/collections/ChooseType.vue
index 4ecdb7fc4..bd9cce100 100644
--- a/packages/hoppscotch-app/components/collections/ChooseType.vue
+++ b/packages/hoppscotch-app/components/collections/ChooseType.vue
@@ -1,6 +1,10 @@
 <template>
   <div v-if="show">
-    <SmartTabs :id="'collections_tab'" v-model="selectedCollectionTab">
+    <SmartTabs
+      :id="'collections_tab'"
+      v-model="selectedCollectionTab"
+      render-inactive-tabs
+    >
       <SmartTab
         :id="'my-collections'"
         :label="`${$t('collection.my_collections')}`"
diff --git a/packages/hoppscotch-app/components/graphql/RequestOptions.vue b/packages/hoppscotch-app/components/graphql/RequestOptions.vue
index 4d5763fcc..094840692 100644
--- a/packages/hoppscotch-app/components/graphql/RequestOptions.vue
+++ b/packages/hoppscotch-app/components/graphql/RequestOptions.vue
@@ -3,6 +3,7 @@
     <SmartTabs
       v-model="selectedOptionTab"
       styles="sticky bg-primary top-upperPrimaryStickyFold z-10"
+      render-inactive-tabs
     >
       <SmartTab
         :id="'query'"
diff --git a/packages/hoppscotch-app/components/graphql/Sidebar.vue b/packages/hoppscotch-app/components/graphql/Sidebar.vue
index d7b2b293d..d66063cc6 100644
--- a/packages/hoppscotch-app/components/graphql/Sidebar.vue
+++ b/packages/hoppscotch-app/components/graphql/Sidebar.vue
@@ -3,6 +3,7 @@
     v-model="selectedNavigationTab"
     styles="sticky bg-primary z-10 top-0"
     vertical
+    render-inactive-tabs
   >
     <SmartTab :id="'history'" icon="clock" :label="`${t('tab.history')}`">
       <History
@@ -64,6 +65,7 @@
         <SmartTabs
           v-model="selectedGqlTab"
           styles="border-t border-b border-dividerLight bg-primary sticky z-10 top-sidebarPrimaryStickyFold"
+          render-inactive-tabs
         >
           <SmartTab
             v-if="queryFields.length > 0"
diff --git a/packages/hoppscotch-app/components/http/RequestOptions.vue b/packages/hoppscotch-app/components/http/RequestOptions.vue
index 3dec44d16..c9dc954ba 100644
--- a/packages/hoppscotch-app/components/http/RequestOptions.vue
+++ b/packages/hoppscotch-app/components/http/RequestOptions.vue
@@ -2,6 +2,7 @@
   <SmartTabs
     v-model="selectedRealtimeTab"
     styles="sticky bg-primary top-upperMobilePrimaryStickyFold sm:top-upperPrimaryStickyFold z-10"
+    render-inactive-tabs
   >
     <SmartTab
       :id="'params'"
diff --git a/packages/hoppscotch-app/components/http/Sidebar.vue b/packages/hoppscotch-app/components/http/Sidebar.vue
index a9fec6e15..871c93883 100644
--- a/packages/hoppscotch-app/components/http/Sidebar.vue
+++ b/packages/hoppscotch-app/components/http/Sidebar.vue
@@ -3,6 +3,7 @@
     v-model="selectedNavigationTab"
     styles="sticky bg-primary z-10 top-0"
     vertical
+    render-inactive-tabs
   >
     <SmartTab :id="'history'" icon="clock" :label="`${$t('tab.history')}`">
       <History ref="historyComponent" :page="'rest'" />
diff --git a/packages/hoppscotch-app/components/lenses/ResponseBodyRenderer.vue b/packages/hoppscotch-app/components/lenses/ResponseBodyRenderer.vue
index 84f940a7b..0e9bdf782 100644
--- a/packages/hoppscotch-app/components/lenses/ResponseBodyRenderer.vue
+++ b/packages/hoppscotch-app/components/lenses/ResponseBodyRenderer.vue
@@ -3,6 +3,7 @@
     v-if="response"
     v-model="selectedLensTab"
     styles="sticky z-10 bg-primary top-lowerPrimaryStickyFold"
+    render-inactive-tabs
   >
     <SmartTab
       v-for="(lens, index) in validLenses"
diff --git a/packages/hoppscotch-app/components/realtime/LogEntry.vue b/packages/hoppscotch-app/components/realtime/LogEntry.vue
index f11854395..bfbbed2cc 100644
--- a/packages/hoppscotch-app/components/realtime/LogEntry.vue
+++ b/packages/hoppscotch-app/components/realtime/LogEntry.vue
@@ -51,7 +51,11 @@
       </div>
     </div>
     <div v-if="!minimized" class="overflow-hidden bg-primaryLight">
-      <SmartTabs v-model="selectedTab" styles="bg-primaryLight">
+      <SmartTabs
+        v-model="selectedTab"
+        styles="bg-primaryLight"
+        render-inactive-tabs
+      >
         <SmartTab v-if="isJSON(entry.payload)" id="json" label="JSON" />
         <SmartTab id="raw" label="Raw" />
       </SmartTabs>
diff --git a/packages/hoppscotch-app/components/smart/Tab.vue b/packages/hoppscotch-app/components/smart/Tab.vue
index 18d79fcdc..8990ffbfa 100644
--- a/packages/hoppscotch-app/components/smart/Tab.vue
+++ b/packages/hoppscotch-app/components/smart/Tab.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-show="active" class="flex flex-col flex-1">
+  <div v-if="shouldRender" v-show="active" class="flex flex-col flex-1">
     <slot></slot>
   </div>
 </template>
@@ -33,11 +33,24 @@ const tabMeta = computed<TabMeta>(() => ({
   label: props.label,
 }))
 
-const { activeTabID, addTabEntry, updateTabEntry, removeTabEntry } =
-  inject<TabProvider>("tabs-system")!
+const {
+  activeTabID,
+  renderInactive,
+  addTabEntry,
+  updateTabEntry,
+  removeTabEntry,
+} = inject<TabProvider>("tabs-system")!
 
 const active = computed(() => activeTabID.value === props.id)
 
+const shouldRender = computed(() => {
+  // If render inactive is true, then it should be rendered nonetheless
+  if (renderInactive.value) return true
+
+  // Else, return whatever is the active state
+  return active.value
+})
+
 onMounted(() => {
   addTabEntry(props.id, tabMeta.value)
 })
diff --git a/packages/hoppscotch-app/components/smart/Tabs.vue b/packages/hoppscotch-app/components/smart/Tabs.vue
index 54f5a4e4e..214c1dfc1 100644
--- a/packages/hoppscotch-app/components/smart/Tabs.vue
+++ b/packages/hoppscotch-app/components/smart/Tabs.vue
@@ -80,6 +80,8 @@ export type TabMeta = {
 }
 
 export type TabProvider = {
+  // Whether inactive tabs should remain rendered
+  renderInactive: ComputedRef<boolean>
   activeTabID: ComputedRef<string>
   addTabEntry: (tabID: string, meta: TabMeta) => void
   updateTabEntry: (tabID: string, newMeta: TabMeta) => void
@@ -91,6 +93,10 @@ const props = defineProps({
     type: String,
     default: "",
   },
+  renderInactiveTabs: {
+    type: Boolean,
+    default: false,
+  },
   vertical: {
     type: Boolean,
     default: false,
@@ -144,6 +150,7 @@ const removeTabEntry = (tabID: string) => {
 }
 
 provide<TabProvider>("tabs-system", {
+  renderInactive: computed(() => props.renderInactiveTabs),
   activeTabID: computed(() => props.value),
   addTabEntry,
   updateTabEntry,
diff --git a/packages/hoppscotch-app/pages/profile.vue b/packages/hoppscotch-app/pages/profile.vue
index 77276936d..21ec30056 100644
--- a/packages/hoppscotch-app/pages/profile.vue
+++ b/packages/hoppscotch-app/pages/profile.vue
@@ -83,7 +83,7 @@
               <FirebaseLogout outline />
             </div>
           </div>
-          <SmartTabs v-model="selectedProfileTab">
+          <SmartTabs v-model="selectedProfileTab" render-inactive-tabs>
             <SmartTab :id="'sync'" :label="t('settings.account')">
               <div class="grid grid-cols-1">
                 <section class="p-4">
diff --git a/packages/hoppscotch-app/pages/realtime/Socketio.vue b/packages/hoppscotch-app/pages/realtime/Socketio.vue
index 6650892c5..cb4a05e1f 100644
--- a/packages/hoppscotch-app/pages/realtime/Socketio.vue
+++ b/packages/hoppscotch-app/pages/realtime/Socketio.vue
@@ -86,10 +86,12 @@
       <SmartTabs
         v-model="selectedTab"
         styles="sticky bg-primary top-upperPrimaryStickyFold z-10"
+        render-inactive-tabs
       >
         <SmartTab
           :id="'communication'"
           :label="`${t('websocket.communication')}`"
+          render-inactive-tabs
         >
           <RealtimeCommunication
             :show-event-field="true"
diff --git a/packages/hoppscotch-app/pages/realtime/Websocket.vue b/packages/hoppscotch-app/pages/realtime/Websocket.vue
index 753bcf283..750c2b7cc 100644
--- a/packages/hoppscotch-app/pages/realtime/Websocket.vue
+++ b/packages/hoppscotch-app/pages/realtime/Websocket.vue
@@ -38,6 +38,7 @@
       <SmartTabs
         v-model="selectedTab"
         styles="sticky bg-primary top-upperPrimaryStickyFold z-10"
+        render-inactive-tabs
       >
         <SmartTab
           :id="'communication'"