feat(ui): Request Panel > Script tab > script active indicator (#196)

flawiddsouza · Jul 25, 2024 · fee195d · fee195d
1 parent 6fb1225
commit fee195d
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 4 deletions.
diff --git a/packages/ui/src/components/RequestPanel.vue b/packages/ui/src/components/RequestPanel.vue
@@ -29,7 +29,7 @@
         </div>
         <div class="request-panel-tabs" v-show="tabView === 'full'">
             <div class="request-panel-tab" :class="{ 'request-panel-tab-active': activeRequestPanelTab === requestPanelTab.name }" @click="activeRequestPanelTab = requestPanelTab.name" v-for="requestPanelTab in requestPanelTabs" :data-testid="`request-panel-tab-${requestPanelTab.name}`">
-                <RequestPanelTabTitle :request-panel-tab="requestPanelTab" :active-tab="activeTab"></RequestPanelTabTitle>
+                <RequestPanelTabTitle :request-panel-tab="requestPanelTab" :active-tab="activeTab" :script-indicator="script.pre_request !== '' || script.post_request !== ''"></RequestPanelTabTitle>
             </div>
             <div class="request-panel-tab-fill"></div>
         </div>
@@ -305,7 +305,7 @@
             <template v-if="activeRequestPanelTab === 'Script'">
                 <div style="height: 100%; display: grid; grid-template-rows: auto 1fr auto 1fr;">
                     <div style="margin-bottom: var(--label-margin-bottom); display: flex; justify-content: space-between; align-items: flex-end;">
-                        <div><i class="fa fa-file-import" /> Pre Request</div>
+                        <div><i class="fa fa-file-import" /> Pre Request <i class="fa fa-circle active-script" v-if="script.pre_request !== ''"></i></div>
                         <div style="display: flex">
                             <ReferencesButton />
                             <SnippetDropdown @optionSelected="insertSnippetPreScript" type="preScripts" style="margin-left: 0.5rem"/>
@@ -320,7 +320,7 @@
                     ></CodeMirrorEditor>
 
                     <div style="margin-bottom: var(--label-margin-bottom); display: flex; justify-content: space-between; align-items: flex-end;">
-                        <div><i class="fa fa-file-export" /> Post Request</div>
+                        <div><i class="fa fa-file-export" /> Post Request <i class="fa fa-circle active-script" v-if="script.post_request !== ''"></i></div>
                         <div style="display: flex; margin-top: 0.5rem">
                             <SnippetDropdown @optionSelected="insertSnippetPostScript" type="postScripts" />
                         </div>

diff --git a/packages/ui/src/components/RequestPanelTabTitle.vue b/packages/ui/src/components/RequestPanelTabTitle.vue
@@ -1,5 +1,5 @@
 <template>
-    <span>{{ requestPanelTab.name }}</span>
+    <span>{{ requestPanelTab.name }}<i class="fa fa-circle active-script" v-if="scriptIndicator && requestPanelTab.name === 'Script'" style="margin-left: 0.2rem"></i></span>
     <template v-if="requestPanelTab.name === 'Body'">
         <template v-if="activeTab.body.mimeType === 'application/x-www-form-urlencoded'">
             <template v-if="'params' in activeTab.body && activeTab.body.params.filter(item => item.disabled === undefined || item.disabled === false).length > 0">
@@ -43,6 +43,9 @@ export default {
         activeTab: {
             type: Object,
             required: true
+        },
+        scriptIndicator: {
+            type: Boolean
         }
     },
     methods: {

diff --git a/packages/ui/src/styles/main.css b/packages/ui/src/styles/main.css
@@ -719,3 +719,8 @@ select {
     margin-left: 0.5rem;
     vertical-align: center;
 }
+
+.active-script {
+    color: rgba(76, 237, 39, 0.65);
+    font-size: 0.6rem !important;
+}