feat(ui): Settings > Option to disable tab view

flawiddsouza · Oct 9, 2024 · e9cbb46 · e9cbb46
1 parent 031c5dd
commit e9cbb46
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 1 deletion.
diff --git a/packages/ui/src/components/TabBar.vue b/packages/ui/src/components/TabBar.vue
@@ -1,6 +1,6 @@
 <script>
 import ContextMenu from './ContextMenu.vue'
-import { arrayMove } from '@/helpers'
+import { arrayMove, getSettingsConfig } from '@/helpers'
 
 export default {
     components: {
@@ -75,9 +75,13 @@ export default {
                     },
                 ]
             }
+        },
+        showTabs() {
+            return getSettingsConfig().tabMode
         }
     },
     methods: {
+        getSettingsConfig,
         setActiveTab(tab) {
             this.$store.dispatch('setActiveTab', tab)
         },
@@ -208,6 +212,7 @@ export default {
 
 <template>
     <div
+        v-if="showTabs"
         class="tabs-container"
         ref="tabContainer"
         @wheel.prevent="scrollTabs"

diff --git a/packages/ui/src/components/modals/SettingsModal.vue b/packages/ui/src/components/modals/SettingsModal.vue
@@ -56,6 +56,12 @@
                 </label>
                 <div style="margin-left: 1.3rem; margin-top: 0.3rem;">Ticking this will remove iframe sandbox restrictions. See <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#sandbox" target="_blank">this link</a> for more info.</div>
             </div>
+            <div>
+                <label style="padding-top: 1rem; display: flex;">
+                    <input type="checkbox" v-model="disableShowTabs"> <div style="margin-left: 0.5rem;">Tab view</div> <div style="margin-left: 0.5rem;"></div>
+                </label>
+                <div style="margin-left: 1.3rem; margin-top: 0.3rem;">Un-ticking this will not show tabs when clicking on either request or folder. Please refresh the app for the changes to take effect.</div>
+            </div>
             <template v-if="flags.isElectron || flags.isWebStandalone">
                 <div style="padding-top: 1rem"></div>
                 <div>
@@ -117,6 +123,7 @@ export default {
             disableAutoUpdate: false,
             globalUserAgent: '',
             indentSize: constants.EDITOR_CONFIG.indent_size,
+            disableShowTabs: false,
         }
     },
     computed: {
@@ -166,6 +173,9 @@ export default {
         },
         indentSize() {
             localStorage.setItem(constants.LOCAL_STORAGE_KEY.INDENT_SIZE, this.indentSize)
+        },
+        disableShowTabs() {
+            localStorage.setItem(constants.LOCAL_STORAGE_KEY.SHOW_TAB_MODE, this.disableShowTabs)
         }
     },
     methods: {
@@ -230,6 +240,7 @@ export default {
             const savedDisableAutoUpdate = localStorage.getItem(constants.LOCAL_STORAGE_KEY.DISABLE_AUTO_UPDATE)
             const savedGlobalUserAgent = localStorage.getItem(constants.LOCAL_STORAGE_KEY.GLOBAL_USER_AGENT)
             const savedIndentSize = localStorage.getItem(constants.LOCAL_STORAGE_KEY.INDENT_SIZE) || 4
+            const savedShowTabs = localStorage.getItem(constants.LOCAL_STORAGE_KEY.SHOW_TAB_MODE) || true
 
             if(savedSidebarWidth) {
                 this.sidebarWidth = savedSidebarWidth
@@ -286,6 +297,9 @@ export default {
             if(savedIndentSize) {
                 this.indentSize = savedIndentSize
             }
+            if(savedShowTabs) {
+                this.disableShowTabs = savedShowTabs
+            }
         },
         getCurentUserAgent() {
             this.globalUserAgent = navigator.userAgent

diff --git a/packages/ui/src/constants.ts b/packages/ui/src/constants.ts
@@ -30,6 +30,7 @@ export default {
         GENERATE_CODE_CLIENT: 'Restfox-GenerateCodeClient',
         GLOBAL_USER_AGENT: 'Restfox-GlobalUserAgent',
         INDENT_SIZE: 'Restfox-IndentSize',
+        SHOW_TAB_MODE: 'Restfox-ShowTabMode',
     },
     HOTKEYS: {
         SEND_REQUEST: 'Ctrl + Enter',
@@ -330,6 +331,9 @@ export default {
     EDITOR_CONFIG: {
         indent_size: '4',
     },
+    APP_CONFIG: {
+        tab_mode: true,
+    },
     GRANT_TYPES: {
         'password_credentials': 'password',
         'client_credentials': 'client_credentials',

diff --git a/packages/ui/src/global.d.ts b/packages/ui/src/global.d.ts
@@ -255,3 +255,7 @@ export interface OpenApiSpecPathParams {
 export interface EditorConfig {
     indentSize: number
 }
+
+export interface AppConfig {
+    tabMode: boolean | string
+}
diff --git a/packages/ui/src/helpers.ts b/packages/ui/src/helpers.ts
@@ -20,6 +20,7 @@ import {
     State,
     OpenApiSpecPathParams,
     EditorConfig,
+    AppConfig,
 } from './global'
 import { ActionContext } from 'vuex'
 import { version } from '../../electron/package.json'
@@ -1844,3 +1845,9 @@ export function getSpaces(value: string | number): string {
 export function deepClone(obj: any) {
     return JSON.parse(JSON.stringify(obj))
 }
+
+export function getSettingsConfig(): AppConfig {
+    return {
+        tabMode: localStorage.getItem(constants.LOCAL_STORAGE_KEY.SHOW_TAB_MODE) ? (localStorage.getItem(constants.LOCAL_STORAGE_KEY.SHOW_TAB_MODE) === 'true') : constants.APP_CONFIG.tab_mode
+    }
+}