fix(ui): Settings > Option to disable tabs (#276)

flawiddsouza · Oct 11, 2024 · a41ee9c · a41ee9c
1 parent 763a4b5
commit a41ee9c
Show file tree

Hide file tree

Showing 7 changed files with 36 additions and 26 deletions.
diff --git a/packages/ui/src/App.vue b/packages/ui/src/App.vue
@@ -336,6 +336,7 @@ export default {
         const savedElectronSwitchToChromiumFetch = localStorage.getItem(constants.LOCAL_STORAGE_KEY.ELECTRON_SWITCH_TO_CHROMIUM_FETCH)
         const savedDisableIframeSandbox = localStorage.getItem(constants.LOCAL_STORAGE_KEY.DISABLE_IFRAME_SANDBOX)
         const savedDisableAutoUpdate = localStorage.getItem(constants.LOCAL_STORAGE_KEY.DISABLE_AUTO_UPDATE)
+        const savedShowTabs = localStorage.getItem(constants.LOCAL_STORAGE_KEY.SHOW_TABS)
 
         if(savedTheme) {
             this.$store.state.theme = savedTheme
@@ -403,6 +404,14 @@ export default {
             }
         }
 
+        if(savedShowTabs) {
+            try {
+                this.$store.state.flags.showTabs = JSON.parse(savedShowTabs)
+            } catch(e) {
+                this.$store.state.flags.showTabs = true
+            }
+        }
+
         emitter.on('error', this.handleError)
 
         if(import.meta.env.MODE === 'desktop-electron') {

diff --git a/packages/ui/src/components/Frame.vue b/packages/ui/src/components/Frame.vue
@@ -8,11 +8,10 @@ import ImportModal from '@/components/ImportModal.vue'
 import { computed, onMounted, onBeforeUnmount, ref } from 'vue'
 import { useStore } from 'vuex'
 import constants from '../constants'
-import { getSettingsConfig } from '@/helpers'
 
 const store = useStore()
 const activeTab = computed(() => store.state.activeTab)
-const showTabs = computed(() => getSettingsConfig().showTabs)
+const showTabs = computed(() => store.state.flags.showTabs)
 const requestResponseLayoutTopBottom = computed(() => store.state.requestResponseLayout === 'top-bottom')
 const detachedTabs = computed({
     get() {

diff --git a/packages/ui/src/components/modals/SettingsModal.vue b/packages/ui/src/components/modals/SettingsModal.vue
@@ -58,9 +58,9 @@
             </div>
             <div>
                 <label style="padding-top: 1rem; display: flex;">
-                    <input type="checkbox" v-model="showTabs"> <div style="margin-left: 0.5rem;">Tab view</div> <div style="margin-left: 0.5rem;"></div>
+                    <input type="checkbox" v-model="showTabs"> <div style="margin-left: 0.5rem;">Show Tabs</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 or click <button type="button" class="button" @click="refreshPage()">Refresh</button> for the changes to take effect.</div>
+                <div style="margin-left: 1.3rem; margin-top: 0.3rem;">Un-ticking this will not show tabs when clicking on either request or folder.</div>
             </div>
             <template v-if="flags.isElectron || flags.isWebStandalone">
                 <div style="padding-top: 1rem"></div>
@@ -102,7 +102,7 @@
 <script>
 import Modal from '@/components/Modal.vue'
 import constants from '../../constants'
-import { getVersion, refreshPage } from '@/helpers'
+import { getVersion } from '@/helpers'
 
 export default {
     props: {
@@ -176,10 +176,10 @@ export default {
         },
         showTabs() {
             localStorage.setItem(constants.LOCAL_STORAGE_KEY.SHOW_TABS, this.showTabs)
-        }
+            this.$store.state.flags.showTabs = this.showTabs
+        },
     },
     methods: {
-        refreshPage,
         getVersion,
         resetWidths() {
             localStorage.removeItem(constants.LOCAL_STORAGE_KEY.SIDEBAR_WIDTH)
@@ -208,6 +208,14 @@ export default {
             localStorage.removeItem(constants.LOCAL_STORAGE_KEY.GLOBAL_USER_AGENT)
             this.globalUserAgent = ''
         },
+        resetIndentSize() {
+            localStorage.removeItem(constants.LOCAL_STORAGE_KEY.INDENT_SIZE)
+            this.indentSize = constants.EDITOR_CONFIG.indent_size
+        },
+        resetShowTabs() {
+            localStorage.removeItem(constants.LOCAL_STORAGE_KEY.SHOW_TABS)
+            this.showTabs = true
+        },
         resetSettings(target = null) {
             if(target) {
                 if(target === 'widths') {
@@ -227,6 +235,8 @@ export default {
             this.resetDisableIframeSandbox()
             this.resetDisableAutoUpdate()
             this.resetGlobalUserAgent()
+            this.resetIndentSize()
+            this.resetShowTabs()
 
             document.location.reload()
         },
@@ -278,28 +288,37 @@ export default {
                     this.electronSwitchToChromiumFetch = false
                 }
             }
+
             if(savedDisableIframeSandbox) {
                 try {
                     this.disableIframeSandbox = JSON.parse(savedDisableIframeSandbox)
                 } catch (e) {
                     this.disableIframeSandbox = false
                 }
             }
+
             if(savedDisableAutoUpdate) {
                 try {
                     this.disableAutoUpdate = JSON.parse(savedDisableAutoUpdate)
                 } catch (e) {
                     this.disableAutoUpdate = false
                 }
             }
+
             if(savedGlobalUserAgent) {
                 this.globalUserAgent = savedGlobalUserAgent
             }
+
             if(savedIndentSize) {
                 this.indentSize = savedIndentSize
             }
+
             if(savedShowTabs) {
-                this.showTabs = savedShowTabs
+                try {
+                    this.showTabs = JSON.parse(savedShowTabs)
+                } catch (e) {
+                    this.showTabs = true
+                }
             }
         },
         getCurrentUserAgent() {

diff --git a/packages/ui/src/constants.ts b/packages/ui/src/constants.ts
@@ -331,9 +331,6 @@ export default {
     EDITOR_CONFIG: {
         indent_size: '4',
     },
-    APP_CONFIG: {
-        show_tabs: 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,7 +255,3 @@ export interface OpenApiSpecPathParams {
 export interface EditorConfig {
     indentSize: number
 }
-
-export interface AppConfig {
-    showTabs: boolean
-}
diff --git a/packages/ui/src/helpers.ts b/packages/ui/src/helpers.ts
@@ -20,7 +20,6 @@ import {
     State,
     OpenApiSpecPathParams,
     EditorConfig,
-    AppConfig,
 } from './global'
 import { ActionContext } from 'vuex'
 import { version } from '../../electron/package.json'
@@ -1845,13 +1844,3 @@ export function getSpaces(value: string | number): string {
 export function deepClone(obj: any) {
     return JSON.parse(JSON.stringify(obj))
 }
-
-export function getSettingsConfig(): AppConfig {
-    return {
-        showTabs: localStorage.getItem(constants.LOCAL_STORAGE_KEY.SHOW_TABS) ? (localStorage.getItem(constants.LOCAL_STORAGE_KEY.SHOW_TABS) === 'true') : constants.APP_CONFIG.show_tabs
-    }
-}
-
-export function refreshPage(): void {
-    location.reload()
-}
diff --git a/packages/ui/src/store.ts b/packages/ui/src/store.ts
@@ -346,6 +346,7 @@ export const store = createStore<State>({
                 electronSwitchToChromiumFetch: false,
                 disableIframeSandbox : false,
                 disableAutoUpdate : false,
+                showTabs: true,
             },
             openContextMenuElement: null,
             sockets: {},