Merge branch 'func/xpath_tooltips'

Frontend/src/components/mock/HeadersComponent.vue

@@ -15,12 +15,20 @@ const headerData  = ref(props.headersObject)
 const newHeaderName = ref('');
 const newHeaderValue = ref('');
 
+function setAddButtonStyle() {
+    return isNewHeaderEmpty() ? "inactive-button" : "tool-button";
+}
+
+function isNewHeaderEmpty() {
+    return newHeaderName.value.trim().length == 0;
+}
+
 function isHeaderEssential(headerName : string){
     return headerName == "Keep-Alive" || headerName == "Connection" || headerName == "Date"
 }
 
 function setEssentialHeaderStyle(headerName : string){
-    return isHeaderEssential(headerName) ? "text-gray-400" : "tool-button text-red-400";
+    return isHeaderEssential(headerName) ? "inactive-button" : "tool-button";
 }
 
 function deleteHeader(index : string){
@@ -31,32 +39,36 @@ function deleteHeader(index : string){
 }
 
 function addNewHeader(name : string, value : string){
-    if (headerData.value != undefined){
-        headerData.value[name] = value;
-        newHeaderName.value = "";
-        newHeaderValue.value = "";
-        emit('update:httpHeaders',headerData.value)
-    }
+    if (headerData.value == undefined)
+        return;
+
+    if (isNewHeaderEmpty()) return;
+
+    headerData.value[name] = value;
+    newHeaderName.value = "";
+    newHeaderValue.value = "";
+    emit('update:httpHeaders',headerData.value);
 }
 
 </script>
 
 <template>
-    <div class="w-full gap-4 flex">
-        <div class="w-full">Header name</div>
-        <div class="w-full">Header value</div>
-        <div class="w-1/5"></div>
-    </div>
+    
     <div class="flex flex-col gap-4">
-        <div class="flex gap-9 flex-row" v-for="(item, index) in headerData" :key="index">
-            <input type="text" :value="index" class="text-field" />
-            <input type="text" :value="item" class="text-field" />
-            <button @click="deleteHeader(index)" class="tool-button w-1/5" :class="setEssentialHeaderStyle(index)">Remove</button>
+        <div class="flex flex-row gap-4">
+            <div class="w-full">Header name</div>
+            <div class="w-full">Header value</div>
+            <div class="w-52 px-4"></div>
+        </div>  
+        <div class="flex flex-row gap-4" v-for="(item, index) in headerData" :key="index">
+            <input type="text" :value="index" class="text-field" disabled/>
+            <input type="text" :value="item" class="text-field" disabled/>
+            <button @click="deleteHeader(index)" class="w-56" :class="setEssentialHeaderStyle(index)">Remove</button>
         </div>
-        <div class="flex gap-9 flex-row">
-            <input type="text" v-model="newHeaderName" class="text-field"  />
+        <div class="flex flex-row gap-4">
+            <input type="text" v-model="newHeaderName" @change="() => setAddButtonStyle()" class="text-field"  />
             <input type="text" v-model="newHeaderValue" class="text-field"  />
-            <button class="tool-button w-1/5" @click="addNewHeader(newHeaderName, newHeaderValue)" >Add</button>
+            <button @click="addNewHeader(newHeaderName, newHeaderValue)" :class="setAddButtonStyle()" class="w-56">Add</button>
         </div>
     </div>
 </template>

Frontend/src/components/mock/HistoryComponent.vue

@@ -35,7 +35,7 @@ function showHeaders(headers: object, index: number){
 
 <template>
     <div class="w-full xl:w-5/12 flex flex-col gap-y-4">
-    <HistoryRecords class="h-1/3 overflow-y-scroll" @click:show-headers="showHeaders" @click:show-body="showBody"></HistoryRecords>
+    <HistoryRecords class="xl:h-1/3 overflow-y-scroll" @click:show-headers="showHeaders" @click:show-body="showBody"></HistoryRecords>
     <BodyDetailComponent :content-type="currentContentType" :data="currentShownData" v-if="shownDetail == 'body' "></BodyDetailComponent>
     <HeadersDetailComponent :data="currentShownData"  v-if="shownDetail == 'headers' "></HeadersDetailComponent>
     </div>

Frontend/src/components/mock/HistoryRecords.vue

@@ -57,9 +57,9 @@ function refreshHistory(){
             <tr v-for="(item , index) in historyRecords" :key="index">
                 <td> {{ parseTimeStamp(item.dateTimeStamp) }} </td>
                 <td> {{ item.httpMethod }} </td>
-                <td> <button @click="showHeaders(item.headers, index)">Show Headers</button> </td>
+                <td> <button @click="showHeaders(item.headers, index)" class="underline">Show Headers</button> </td>
                 <td> 
-                    <button v-if="item.requestBody.length != 0" @click="showBody(item.requestBody, index, item.headers['content-type'])">Show Body</button> 
+                    <button v-if="item.requestBody.length != 0" @click="showBody(item.requestBody, index, item.headers['content-type'])" class="underline">Show Body</button> 
                     <span v-else>Empty Body</span>
                 </td>
             </tr>

Frontend/src/components/mock/RestMockMessageComponent.vue

@@ -44,17 +44,18 @@ function showUpdatedCode(newCode : string){
 </script>
 
 <template>
-  <div class="flex overflow-y-scroll flex-col w-full xl:w-3/5 text-center dark:text-white gap-6">
-    <div>
-      <label for="link">Link</label><br/>
-      <div class="flex gap-4">
+  <div class="flex flex-col w-full xl:w-3/5 text-center dark:text-white gap-6 p-1">
+    <div class="flex flex-col md:flex-row gap-4 items-center md:justify-stretch md:items-end">
+      <div class="flex flex-col w-full">
+        <label for="link">Link</label><br/>
         <div class="p-2 w-full border-slate-400 border-2 rounded-lg">
           <a class="underline" :href="mockMessageLink">{{ mockMessageLink }}</a>
         </div>
-        <SaveComponent v-bind:message-data="messageData"></SaveComponent>
       </div>
+      
+      <SaveComponent v-bind:message-data="messageData"></SaveComponent>
     </div>
-    <div class="flex flex-row w-full gap-64">
+    <div class="flex flex-col md:flex-row w-full gap-4">
       <div class="w-full">
         <label for="contentType">Content Type</label><br/>
         <input  class="text-field" id="contentType" type="text" v-model="messageData.contentType"/>

Frontend/src/components/mock/SaveComponent.vue

@@ -38,7 +38,7 @@ function hideToast(){
 </script>
 
 <template>
-    <button @click="prepareAndSendData()" class="w-2/12 tool-button">Save</button>
+    <button @click="prepareAndSendData()" class="tool-button w-full md:w-32">Save</button>
 
     <div class="fixed bottom-5 right-12">
         <MockedMessageToastComponent @closed:toast_closed="hideToast()" v-bind:visible="visible" v-bind:message="message"/>