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

flawiddsouza · Oct 10, 2024 · 763a4b5 · 763a4b5
1 parent 031c5dd
commit 763a4b5
Show file tree

Hide file tree

Showing 15 changed files with 86 additions and 46 deletions.
diff --git a/packages/ui/.eslintrc.js b/packages/ui/.eslintrc.js
@@ -71,5 +71,9 @@ module.exports = {
         'vue/singleline-html-element-content-newline': 'off',
         'vue/order-in-components': 'off',
         'vue/require-explicit-emits': 'off',
+        'object-curly-spacing': [
+            "error",
+            "always"
+        ],
     }
 }
diff --git a/packages/ui/src/components/Frame.vue b/packages/ui/src/components/Frame.vue
@@ -8,9 +8,11 @@ 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 requestResponseLayoutTopBottom = computed(() => store.state.requestResponseLayout === 'top-bottom')
 const detachedTabs = computed({
     get() {
@@ -93,7 +95,7 @@ onBeforeUnmount(() => {
             <NavBar nav="collection" />
         </header>
 
-        <section class="tab-bar" v-if="activeTab">
+        <section class="tab-bar" v-if="activeTab && showTabs">
             <TabBar />
         </section>
 

diff --git a/packages/ui/src/components/GraphQLSchemaFetcher.vue b/packages/ui/src/components/GraphQLSchemaFetcher.vue
@@ -79,7 +79,7 @@
 <script>
 import { ref, onMounted, computed, watch } from 'vue'
 import { gql, GraphQLClient } from 'graphql-request'
-import { resolveAuthentication} from '@/helpers'
+import { resolveAuthentication } from '@/helpers'
 
 export default {
     name: 'SchemaSlideOut',

diff --git a/packages/ui/src/components/ResponsePanel.vue b/packages/ui/src/components/ResponsePanel.vue
@@ -518,7 +518,7 @@ export default {
             if(originalRequestBody.mimeType === 'multipart/form-data' && 'params' in originalRequestBody) {
                 let params = []
                 for(const param of originalRequestBody.params) {
-                    let paramExtracted = {...param}
+                    let paramExtracted = { ...param }
                     if('files' in paramExtracted) {
                         paramExtracted.files = [...paramExtracted.files]
                     }

diff --git a/packages/ui/src/components/SnippetDropdown.vue b/packages/ui/src/components/SnippetDropdown.vue
@@ -83,7 +83,7 @@ export default defineComponent ({
         }
     },
 
-    setup(props, {emit}) {
+    setup(props, { emit }) {
         const contextMenuVisible = ref (false)
         const contextMenuX = ref (0)
         const contextMenuY = ref (0)
@@ -165,11 +165,11 @@ export default defineComponent ({
             {
                 type: 'option',
                 label: 'Returns the HTTP method of the request',
-                value: 'rf.request.getMethod()'},
+                value: 'rf.request.getMethod()' },
             {
                 type: 'option',
                 label: 'Retrieves the URL of the request',
-                value: 'rf.request.getURL()'},
+                value: 'rf.request.getURL()' },
             {
                 type: 'option',
                 label: 'Gets a specific header\'s value by name from the request',
@@ -183,7 +183,7 @@ export default defineComponent ({
             {
                 type: 'option',
                 label: 'Gets all the headers from the request',
-                value: 'rf.request.getHeaders()'},
+                value: 'rf.request.getHeaders()' },
             {
                 type: 'option',
                 label: 'Replaces all headers with the provided array',
@@ -192,7 +192,7 @@ export default defineComponent ({
             {
                 type: 'option',
                 label: 'Gets the request body',
-                value: 'rf.request.getBody()'},
+                value: 'rf.request.getBody()' },
             {
                 type: 'option',
                 label: 'Sets the request body with the provided object',
@@ -221,7 +221,7 @@ export default defineComponent ({
             {
                 type: 'option',
                 label: 'Retrieves the URL from the response',
-                value: 'rf.response.getURL()'},
+                value: 'rf.response.getURL()' },
             {
                 type: 'option',
                 label: 'Gets a specific header\'s value by name from the response',
@@ -235,7 +235,7 @@ export default defineComponent ({
             {
                 type: 'option',
                 label: 'Retrieves the response body as an ArrayBuffer',
-                value: 'rf.response.getBody()'},
+                value: 'rf.response.getBody()' },
             {
                 type: 'option',
                 label: 'Sets the response body with the provided ArrayBuffer',
@@ -244,7 +244,7 @@ export default defineComponent ({
             {
                 type: 'option',
                 label: 'Returns the response body as text',
-                value: 'rf.response.getBodyText()'},
+                value: 'rf.response.getBodyText()' },
             {
                 type: 'option',
                 label: 'Sets the given text as the response body',

diff --git a/packages/ui/src/components/TabBar.vue b/packages/ui/src/components/TabBar.vue
@@ -1,3 +1,27 @@
+<template>
+    <div
+        class="tabs-container"
+        ref="tabContainer"
+        @wheel.prevent="scrollTabs"
+    >
+        <div
+            class="tab"
+            :class="{ 'tab-active': activeTab && activeTab._id === tab._id }"
+            v-for="tab in tabs"
+            @click="setActiveTab(tab)"
+            @mousedown.middle.prevent="closeTab(tab)"
+            :data-id="tab._id"
+            draggable="true"
+            @contextmenu.prevent="handleTabContextMenu($event, tab)"
+        >
+            <span :class="`request-method--${getTabMethodName(tab)}`">{{ getTabMethodName(tab) }}</span> <template v-if="tab._id in sidebarItemTemporaryName">{{ sidebarItemTemporaryName[tab._id] }}</template><template v-else>{{ tab.name }}</template>
+            <span style="margin-left: 0.5rem" @click.stop="closeTab(tab)" class="tab-close"><i class="fas fa-times"></i></span>
+        </div>
+    </div>
+    <!-- <div class="tab-add" @click="addTab" style="visibility: hidden">+</div> -->
+    <ContextMenu :options="tabContextMenuOptions" :element="tabContextMenuElement" v-model:show="showTabContextMenu" @click="handleTabContextMenuItemClick" />
+</template>
+
 <script>
 import ContextMenu from './ContextMenu.vue'
 import { arrayMove } from '@/helpers'
@@ -75,7 +99,7 @@ export default {
                     },
                 ]
             }
-        }
+        },
     },
     methods: {
         setActiveTab(tab) {
@@ -206,30 +230,6 @@ export default {
 }
 </script>
 
-<template>
-    <div
-        class="tabs-container"
-        ref="tabContainer"
-        @wheel.prevent="scrollTabs"
-    >
-        <div
-            class="tab"
-            :class="{ 'tab-active': activeTab && activeTab._id === tab._id }"
-            v-for="tab in tabs"
-            @click="setActiveTab(tab)"
-            @mousedown.middle.prevent="closeTab(tab)"
-            :data-id="tab._id"
-            draggable="true"
-            @contextmenu.prevent="handleTabContextMenu($event, tab)"
-        >
-            <span :class="`request-method--${getTabMethodName(tab)}`">{{ getTabMethodName(tab) }}</span> <template v-if="tab._id in sidebarItemTemporaryName">{{ sidebarItemTemporaryName[tab._id] }}</template><template v-else>{{ tab.name }}</template>
-            <span style="margin-left: 0.5rem" @click.stop="closeTab(tab)" class="tab-close"><i class="fas fa-times"></i></span>
-        </div>
-    </div>
-    <!-- <div class="tab-add" @click="addTab" style="visibility: hidden">+</div> -->
-    <ContextMenu :options="tabContextMenuOptions" :element="tabContextMenuElement" v-model:show="showTabContextMenu" @click="handleTabContextMenuItemClick" />
-</template>
-
 <style scoped>
 .tab-bar .tabs-container {
     display: flex;

diff --git a/packages/ui/src/components/modals/LogsModal.vue b/packages/ui/src/components/modals/LogsModal.vue
@@ -17,7 +17,7 @@ import { mapState } from 'vuex'
 import Modal from '@/components/Modal.vue'
 
 export default {
-    components: {Modal},
+    components: { Modal },
     props: {
         showModal: Boolean,
     },

diff --git a/packages/ui/src/components/modals/ResponseFilteringHelpModal.vue b/packages/ui/src/components/modals/ResponseFilteringHelpModal.vue
@@ -35,7 +35,7 @@
 import Modal from '@/components/Modal.vue'
 
 export default {
-    components: {Modal},
+    components: { Modal },
     props: {
         showModal: Boolean,
         isXml: Boolean,

diff --git a/packages/ui/src/components/modals/SettingsModal.vue b/packages/ui/src/components/modals/SettingsModal.vue
@@ -23,7 +23,7 @@
                 <input type="text" v-model="globalUserAgent" class="full-width-input" placeholder="Enter user agent string">
                 <button
                     class="button"
-                    @click="getCurentUserAgent"
+                    @click="getCurrentUserAgent"
                     style="margin-top: 0.5rem"
                     aria-label="Get the current browser's UserAgent string"
                     title="Get the current browser's UserAgent string"
@@ -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="showTabs"> <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 or click <button type="button" class="button" @click="refreshPage()">Refresh</button> for the changes to take effect.</div>
+            </div>
             <template v-if="flags.isElectron || flags.isWebStandalone">
                 <div style="padding-top: 1rem"></div>
                 <div>
@@ -96,7 +102,7 @@
 <script>
 import Modal from '@/components/Modal.vue'
 import constants from '../../constants'
-import { getVersion } from '@/helpers'
+import { getVersion, refreshPage } from '@/helpers'
 
 export default {
     props: {
@@ -117,6 +123,7 @@ export default {
             disableAutoUpdate: false,
             globalUserAgent: '',
             indentSize: constants.EDITOR_CONFIG.indent_size,
+            showTabs: false,
         }
     },
     computed: {
@@ -166,9 +173,13 @@ export default {
         },
         indentSize() {
             localStorage.setItem(constants.LOCAL_STORAGE_KEY.INDENT_SIZE, this.indentSize)
+        },
+        showTabs() {
+            localStorage.setItem(constants.LOCAL_STORAGE_KEY.SHOW_TABS, this.showTabs)
         }
     },
     methods: {
+        refreshPage,
         getVersion,
         resetWidths() {
             localStorage.removeItem(constants.LOCAL_STORAGE_KEY.SIDEBAR_WIDTH)
@@ -230,6 +241,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_TABS) || true
 
             if(savedSidebarWidth) {
                 this.sidebarWidth = savedSidebarWidth
@@ -286,8 +298,11 @@ export default {
             if(savedIndentSize) {
                 this.indentSize = savedIndentSize
             }
+            if(savedShowTabs) {
+                this.showTabs = savedShowTabs
+            }
         },
-        getCurentUserAgent() {
+        getCurrentUserAgent() {
             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_TABS: 'Restfox-ShowTabs',
     },
     HOTKEYS: {
         SEND_REQUEST: 'Ctrl + Enter',
@@ -330,6 +331,9 @@ 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,3 +255,7 @@ 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,6 +20,7 @@ import {
     State,
     OpenApiSpecPathParams,
     EditorConfig,
+    AppConfig,
 } from './global'
 import { ActionContext } from 'vuex'
 import { version } from '../../electron/package.json'
@@ -1376,7 +1377,7 @@ export function uriParse(urlString: string): {
     hash: string | null;
     search: string | null;
 } {
-    const { protocol, host, port, pathname, hash, search}  = new URL(urlString)
+    const { protocol, host, port, pathname, hash, search }  = new URL(urlString)
     return { protocol, host, port, pathname, hash, search }
 }
 
@@ -1844,3 +1845,13 @@ 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/plugin.ts b/packages/ui/src/plugin.ts
@@ -73,7 +73,7 @@ export async function createRequestContextForPlugin(cacheId: string, request: Co
     if(request.body?.params) {
         const params: RequestParam[] = []
         for(const param of request.body.params) {
-            const paramExtracted = {...param}
+            const paramExtracted = { ...param }
             if(paramExtracted.files) {
                 paramExtracted.files = [...paramExtracted.files] as File[]
             }

diff --git a/packages/ui/src/store.ts b/packages/ui/src/store.ts
@@ -432,7 +432,7 @@ export const store = createStore<State>({
             if('body' in collectionItem && 'params' in collectionItem.body) {
                 const params: RequestParam[] = []
                 for(const param of collectionItem.body.params) {
-                    const paramExtracted = {...param}
+                    const paramExtracted = { ...param }
                     if('files' in paramExtracted) {
                         paramExtracted.files = [...paramExtracted.files].filter(file => file instanceof File)
                     }
@@ -680,7 +680,7 @@ export const store = createStore<State>({
                     if('params' in tab.body) {
                         const params: RequestParam[] = []
                         for(const param of tab.body.params) {
-                            const paramExtracted = {...param}
+                            const paramExtracted = { ...param }
                             if('files' in paramExtracted) {
                                 paramExtracted.files = [...paramExtracted.files]
                             }

diff --git a/packages/ui/src/utils/codemirror-extensions.ts b/packages/ui/src/utils/codemirror-extensions.ts
@@ -36,7 +36,7 @@ export function envVarDecoration(envVariables: any) {
                     const titleText = isInEnv ? envVariables[varName] : 'Environment variable not found'
                     const decoration = Decoration.mark({
                         class: className,
-                        attributes: {title: titleText}
+                        attributes: { title: titleText }
                     })
                     builder.add(start, end, decoration)
                 }