From a5ba7cf09a8a005a47c1004fd436661b895aa571 Mon Sep 17 00:00:00 2001
From: kobenguyent <kobenguyent@gmail.com>
Date: Thu, 10 Oct 2024 10:03:32 +0200
Subject: [PATCH] fix: address CRs and code styles

---
 packages/ui/.eslintrc.js                      |  4 ++
 packages/ui/src/components/Frame.vue          |  4 +-
 .../src/components/GraphQLSchemaFetcher.vue   |  2 +-
 packages/ui/src/components/ResponsePanel.vue  |  2 +-
 .../ui/src/components/SnippetDropdown.vue     | 16 +++---
 packages/ui/src/components/TabBar.vue         | 55 +++++++++----------
 .../ui/src/components/modals/LogsModal.vue    |  2 +-
 .../modals/ResponseFilteringHelpModal.vue     |  2 +-
 .../src/components/modals/SettingsModal.vue   | 21 +++----
 packages/ui/src/constants.ts                  |  4 +-
 packages/ui/src/global.d.ts                   |  2 +-
 packages/ui/src/helpers.ts                    |  8 ++-
 packages/ui/src/plugin.ts                     |  2 +-
 packages/ui/src/store.ts                      |  4 +-
 .../ui/src/utils/codemirror-extensions.ts     |  2 +-
 15 files changed, 68 insertions(+), 62 deletions(-)

diff --git a/packages/ui/.eslintrc.js b/packages/ui/.eslintrc.js
index fc833154..e5c0a6c9 100644
--- 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
index f5dbd6ec..9c998df0 100644
--- 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
index b4ae0176..7908c954 100644
--- 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
index 6761a03e..bfec2372 100644
--- 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
index 36983435..7ba6175e 100644
--- 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
index 52068d21..0bd8f091 100644
--- a/packages/ui/src/components/TabBar.vue
+++ b/packages/ui/src/components/TabBar.vue
@@ -1,6 +1,30 @@
+<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, getSettingsConfig } from '@/helpers'
+import { arrayMove } from '@/helpers'
 
 export default {
     components: {
@@ -76,12 +100,8 @@ export default {
                 ]
             }
         },
-        showTabs() {
-            return getSettingsConfig().tabMode
-        }
     },
     methods: {
-        getSettingsConfig,
         setActiveTab(tab) {
             this.$store.dispatch('setActiveTab', tab)
         },
@@ -210,31 +230,6 @@ export default {
 }
 </script>
 
-<template>
-    <div
-        v-if="showTabs"
-        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
index bd758b99..4060dded 100644
--- 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
index e1946a43..91341443 100644
--- 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
index 8b6c274c..0032feed 100644
--- 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"
@@ -58,9 +58,9 @@
             </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>
+                    <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 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. 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>
@@ -102,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: {
@@ -123,7 +123,7 @@ export default {
             disableAutoUpdate: false,
             globalUserAgent: '',
             indentSize: constants.EDITOR_CONFIG.indent_size,
-            disableShowTabs: false,
+            showTabs: false,
         }
     },
     computed: {
@@ -174,11 +174,12 @@ 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)
+        showTabs() {
+            localStorage.setItem(constants.LOCAL_STORAGE_KEY.SHOW_TABS, this.showTabs)
         }
     },
     methods: {
+        refreshPage,
         getVersion,
         resetWidths() {
             localStorage.removeItem(constants.LOCAL_STORAGE_KEY.SIDEBAR_WIDTH)
@@ -240,7 +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_TAB_MODE) || true
+            const savedShowTabs = localStorage.getItem(constants.LOCAL_STORAGE_KEY.SHOW_TABS) || true
 
             if(savedSidebarWidth) {
                 this.sidebarWidth = savedSidebarWidth
@@ -298,10 +299,10 @@ export default {
                 this.indentSize = savedIndentSize
             }
             if(savedShowTabs) {
-                this.disableShowTabs = savedShowTabs
+                this.showTabs = savedShowTabs
             }
         },
-        getCurentUserAgent() {
+        getCurrentUserAgent() {
             this.globalUserAgent = navigator.userAgent
         }
     }
diff --git a/packages/ui/src/constants.ts b/packages/ui/src/constants.ts
index caa598e6..14bbac14 100644
--- a/packages/ui/src/constants.ts
+++ b/packages/ui/src/constants.ts
@@ -30,7 +30,7 @@ export default {
         GENERATE_CODE_CLIENT: 'Restfox-GenerateCodeClient',
         GLOBAL_USER_AGENT: 'Restfox-GlobalUserAgent',
         INDENT_SIZE: 'Restfox-IndentSize',
-        SHOW_TAB_MODE: 'Restfox-ShowTabMode',
+        SHOW_TABS: 'Restfox-ShowTabs',
     },
     HOTKEYS: {
         SEND_REQUEST: 'Ctrl + Enter',
@@ -332,7 +332,7 @@ export default {
         indent_size: '4',
     },
     APP_CONFIG: {
-        tab_mode: true,
+        show_tabs: true,
     },
     GRANT_TYPES: {
         'password_credentials': 'password',
diff --git a/packages/ui/src/global.d.ts b/packages/ui/src/global.d.ts
index 9ab2c52b..5e09dc9e 100644
--- a/packages/ui/src/global.d.ts
+++ b/packages/ui/src/global.d.ts
@@ -257,5 +257,5 @@ export interface EditorConfig {
 }
 
 export interface AppConfig {
-    tabMode: boolean | string
+    showTabs: boolean
 }
diff --git a/packages/ui/src/helpers.ts b/packages/ui/src/helpers.ts
index 082af1c9..f53902d9 100644
--- a/packages/ui/src/helpers.ts
+++ b/packages/ui/src/helpers.ts
@@ -1377,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 }
 }
 
@@ -1848,6 +1848,10 @@ export function deepClone(obj: any) {
 
 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
+        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
index d471d9c4..e33af59d 100644
--- 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
index 5b6fa8aa..0a44c349 100644
--- 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
index 8d56cf67..bba1c607 100644
--- 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)
                 }