Implemented REST Mock tool

Co-authored-by: widlam <mikolaj.widla@gmail.com>
Co-authored-by: Adam Bem <adam.bem@zoho.eu>
Reviewed-on: #231
Reviewed-by: Adam Bem <bema@noreply.example.com>
Co-authored-by: Mikolaj Widla <widlam@noreply.example.com>
Co-committed-by: Mikolaj Widla <widlam@noreply.example.com>

Frontend/src/App.vue

@@ -8,7 +8,7 @@ import SidebarComponent from '@components/sidebar/SidebarComponent.vue';
 <template>
   <div id="layout" class="flex h-screen bg-gradient-to-r from-white to-sky-200 dark:from-slate-800 dark:to-indigo-950">
     <SidebarComponent />
-    <div class="relative p-6 w-full m-4 bg-blue-50 dark:bg-gray-700 rounded-2xl shadow-lg">
+    <div class="relative p-6 w-full m-4 bg-blue-50 dark:bg-gray-700 rounded-2xl overflow-hidden shadow-lg">
       <RouterView></RouterView>
     </div>
   </div>

Frontend/src/components/mock/BodyDetailComponent.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+
+const props = defineProps(
+    {
+        data: {required: true, type: String}
+    }
+)
+
+</script>
+
+<template>
+    <span class="text-white text-center h-screen overflow-x-scroll ">
+        {{ props.data.replace(/\\n/g,"") }}
+    </span>
+</template>

Frontend/src/components/mock/HeadersComponent.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { ref} from 'vue';
+
+const props = defineProps(
+    {
+        headersObject : Object
+    } 
+)
+
+const emit = defineEmits([
+    'update:httpHeaders'
+])
+
+const headerData  = ref(props.headersObject)
+const newHeaderName = ref('');
+const newHeaderValue = ref('');
+
+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";
+}
+
+function deleteHeader(index : string){
+    if(!isHeaderEssential(index) && headerData.value != undefined){
+        delete headerData.value[index]
+        emit('update:httpHeaders',headerData.value)
+    }
+}
+
+function addNewHeader(name : string, value : string){
+    if (headerData.value != undefined){
+        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>
+        <div class="flex gap-9 flex-row">
+            <input type="text" v-model="newHeaderName" 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>
+        </div>
+    </div>
+</template>

Frontend/src/components/mock/HeadersDetailComponent.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+
+const props = defineProps(
+    {
+        data: {type:String, required:true}
+    }
+)
+
+
+</script>
+
+<template>
+    <div class="w-full text-center text-white mt-2 flex flex-col gap-4 ">
+        <div class="flex flex-row gap-4"> 
+            <div class="w-full font-bold">Name</div> 
+            <div class="w-full font-bold">Value</div> 
+        </div >
+        <div class="flex flex-row gap-4" v-for="(value,name) in JSON.parse(data)" :key="name">
+            <div class="w-full overflow-hidden">{{ name }}</div>
+            <div class="w-full overflow-hidden">{{ value }}</div>
+        </div>
+    </div>
+</template>

Frontend/src/components/mock/HistoryComponent.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import HistoryRecords from './HistoryRecords.vue';
+import BodyDetailComponent from './BodyDetailComponent.vue';
+import HeadersDetailComponent from './HeadersDetailComponent.vue';
+
+const shownDetail = ref('none');
+const currentShownData = ref('');
+const currentIndex = ref(-1);
+
+function showBody(body : string, index: number){
+    if( currentIndex.value == index && shownDetail.value == "body" ){
+        shownDetail.value = "none";
+    } else {
+        currentIndex.value = index;
+        shownDetail.value = "body";
+        currentShownData.value = body;
+    }
+}
+
+function showHeaders(headers: object, index: number){
+    if(currentIndex.value == index && shownDetail.value == "headers" ){
+        shownDetail.value = "none";
+    } else {
+        currentIndex.value = index;
+        shownDetail.value = "headers";
+        currentShownData.value = JSON.stringify(headers);
+    }
+}
+
+</script>
+
+
+<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>
+    <BodyDetailComponent :data="currentShownData" v-if="shownDetail == 'body' "></BodyDetailComponent>
+    <HeadersDetailComponent :data="currentShownData"  v-if="shownDetail == 'headers' "></HeadersDetailComponent>
+    </div>
+</template>

Frontend/src/components/mock/HistoryRecords.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import {ref, type Ref } from 'vue';
+
+interface historyRecord {
+    clientUUID : String,
+    dateTimeStamp: String,
+    headers : Object,
+    httpMethod: String,
+    requestBody: String
+}
+
+const emit = defineEmits([
+    'click:showHeaders',
+    'click:showBody',
+])
+
+
+const clientUUID = localStorage.getItem("clientUUID")
+const fetchLink = window.location.protocol + "//" + window.location.hostname + "/mock/api/event";
+const historyRecords : Ref<Array<historyRecord>> = ref([])
+fetch(fetchLink+"/"+clientUUID).then(response => response.json()).then(data => { historyRecords.value = data });
+
+function parseTimeStamp(timestamp : String){
+    return timestamp.substring(10,19).replace("T"," ");
+}
+
+function showHeaders(headers: Object, index : number){
+    emit('click:showHeaders',headers, index)
+}
+
+function showBody(body: String , index : number){
+    console.log(body)
+    emit('click:showBody',body, index)
+}
+
+function refreshHistory(){
+    fetch(fetchLink+"/"+clientUUID).then(response => response.json()).then(data => { historyRecords.value = data });
+}
+
+</script>
+
+<template>
+    <div>
+        <table class="text-white h-28 w-full text-center">
+            <tr>
+                <th>Time</th>
+                <th>HTTP Method</th>
+                <th>HTTP Headers</th>
+                <th>Request Body</th>
+                <th class="text-2xl"><button @click="refreshHistory()">⟳</button></th>
+            </tr>
+            <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 v-if="item.requestBody.length != 0" @click="showBody(item.requestBody, index)">Show Body</button> 
+                    <span v-else>Empty Body</span>
+                </td>
+            </tr>
+        </table>
+    </div>
+</template>

Frontend/src/components/mock/MockedMessageToastComponent.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const emit = defineEmits([
+    'closed:toast_closed',
+])
+
+const props = defineProps(
+    {
+        message: {type: String, required: true},
+        visible: {type: String, required: true},
+    }
+)
+
+function hideToast(){
+    emit('closed:toast_closed',"hidden")
+}
+
+
+
+</script>
+
+
+<template>
+    <div id="toast-success" class="transition-opacity duration-1000 flex items-center w-full max-w-xs p-4 mb-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800 " :class="visible" role="alert">
+    <div class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-green-500 bg-green-100 rounded-lg dark:bg-green-800 dark:text-green-200">
+        <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
+        <span class="sr-only">Check icon</span>
+    </div>
+    <div class="ml-3 text-sm font-normal">{{ props.message }}</div>
+    <button @click="hideToast"  type="button" class="ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700">
+        <span class="sr-only">Close</span>
+        <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+    </button>
+    </div>
+</template>

Frontend/src/components/mock/RestMockComponent.vue

@@ -1,10 +0,0 @@
-<script setup lang="ts">
-
-
-</script>
-
-<template>
-  <h1>RestMock</h1>
-</template>
-
-<style scoped></style>

Frontend/src/components/mock/RestMockMessageComponent.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import {ref, type Ref} from 'vue';
+import HeadersComponent from './HeadersComponent.vue';
+import SaveComponent from './SaveComponent.vue';
+
+const clientUUID = ref('');
+const host = window.location.protocol + "//" + window.location.hostname + "/mock";
+const mockMessageLink = ref("www.google.com");
+
+interface mockedMessageData {
+  clientUUID: string;
+  contentType: string;
+  messageBody: string;
+  httpHeaders: object;
+  httpStatus: number;
+}
+
+const exampleData : mockedMessageData = {
+  clientUUID : "exampleUUID",
+  contentType: "application/json",
+  messageBody: "hello",
+  httpHeaders: {Connection:"keep-alive"},
+  httpStatus: 200,
+}
+
+let messageData : Ref<mockedMessageData> = ref(exampleData);
+if ( localStorage.clientUUID != undefined ){
+    clientUUID.value = localStorage.clientUUID;
+}
+fetch(host + '/api/mock/' + clientUUID.value).then( response => response.json() ).then(data => {putDataInFields(data);  });
+
+function putDataInFields(data: mockedMessageData){
+  clientUUID.value = data.clientUUID;
+  localStorage.clientUUID = clientUUID.value
+  mockMessageLink.value = host.replace("/mock","/api/mock")+"/r/"+clientUUID.value
+  messageData = ref( data )
+}
+
+</script>
+
+<template>
+  <div class="flex 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="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>
+    </div>
+    <div class="flex flex-row w-full gap-64">
+      <div class="w-full">
+        <label for="contentType">Content Type</label><br/>
+        <input  class="text-field" id="contentType" type="text" v-model="messageData.contentType"/>
+      </div>
+      
+      <div class="w-full">
+        <label for="httpStatus">HttpStatus</label><br/>
+        <input class="text-field" id="httpStatus" type="text" v-model="messageData.httpStatus"/>
+      </div>
+      
+    </div>
+    <div class="flex flex-col">
+      <label for="messageBody">Body</label>
+      <textarea class="text-field h-64" id="messageBody" v-model="messageData.messageBody"></textarea>
+    </div>
+    <HeadersComponent @update:httpHeaders="(newHeaders: object) => {messageData.httpHeaders = newHeaders }" :key="JSON.stringify(messageData.httpHeaders)" :headers-object="messageData.httpHeaders"></HeadersComponent>
+  </div>
+</template>
+
+<style scoped></style>

Frontend/src/components/mock/SaveComponent.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import MockedMessageToastComponent from './MockedMessageToastComponent.vue';
+
+
+const props = defineProps(
+    {
+    messageData : {type: Object, required:true}
+    }
+)
+
+
+const message = ref('');
+const visible = ref('hidden');
+const fetchLink = window.location.protocol + "//" + window.location.hostname + "/mock/api/mock"
+
+function prepareAndSendData(){
+    if (props.messageData != null|| props.messageData != undefined ){
+        fetch(fetchLink, { method: "put", body:JSON.stringify(props.messageData), headers: { "Content-Type" : "application/json" }})
+        .then( response => response.text() )
+        .then( data =>  {message.value = data} )
+        .catch(exception => {message.value = exception})
+
+        showToast();
+    }
+}
+
+function showToast(){
+    visible.value = "visible";
+    setTimeout( () => { visible.value = "opacity-0" } , 1500 )
+}
+
+function hideToast(){
+    visible.value = "hidden";
+}
+
+
+</script>
+
+<template>
+    <button @click="prepareAndSendData()" class="w-2/12 tool-button">Save</button>
+
+    <div class="fixed bottom-5 right-12">
+        <MockedMessageToastComponent @closed:toast_closed="hideToast()" v-bind:visible="visible" v-bind:message="message"/>
+    </div>
+</template>

Frontend/src/components/xml/XmlInputFieldComponent.vue

@@ -44,6 +44,6 @@ function canBeFormatted() {
                 <button class="tool-button" @click="clear">Clear</button>
             </div>
         </div>
-        <textarea id="xmlField" v-model="data" @input="sendValue()" class="text-field"></textarea>
+        <textarea id="xmlField" v-model="data" @input="sendValue()" class="text-field h-full"></textarea>
     </div>
 </template>

Frontend/src/router/index.ts

@@ -47,6 +47,11 @@ const routes = [
     name: 'xslt',
     component: () => xsltTool
   },
+  {
+    path: '/rest/mock',
+    name: 'restmock',
+    component: () => restMock
+  }
 ]
 
 

Frontend/src/style.css

@@ -3,9 +3,9 @@
 @tailwind utilities;
 
 .tool-button {
-    @apply py-1 px-4 rounded-full w-fit bg-gradient-to-r from-blue-400 to-blue-300 dark:text-white dark:from-sky-600 dark:to-sky-800 hover:bg-blue-400
+    @apply py-1 px-4 rounded-full bg-gradient-to-r from-blue-300 to-sky-200  dark:text-white dark:from-sky-600 dark:to-sky-800 hover:bg-blue-400
 }
 
 .text-field {
-    @apply w-full h-full resize-none font-mono bg-white dark:text-slate-100 dark:bg-gray-600 border border-slate-400 p-2 rounded-md
+    @apply w-full font-mono dark:text-slate-100 dark:bg-gray-600 border border-slate-400 p-2 rounded-lg
 }

Frontend/src/views/JsonFormatterView.vue

@@ -31,6 +31,6 @@ function clear() {
                 <JsonButtonFormatterComponent :json="json" @update:result="(data: any) => format(data)"></JsonButtonFormatterComponent>
             </div>
         </div>
-        <textarea name="data" id="data" :value="json" class="text-field"></textarea>
+        <textarea name="data" id="data" :value="json" class="text-field h-full"></textarea>
     </div>
 </template>

Frontend/src/views/RestMockView.vue

@@ -1,14 +1,14 @@
-<script lang="ts">
-import RestMockComponent from '@components/mock/RestMockComponent.vue'
+<script setup lang="ts">
+import RestMockMessageComponent from '@components/mock/RestMockMessageComponent.vue'
+import HistoryComponent from '@components/mock/HistoryComponent.vue'
 
-export default {
-    name:"RestMockView",
-    components: {RestMockComponent}
-}
 </script>
 
 
 <template>
-    <RestMockComponent></RestMockComponent>
+    <div class="flex flex-col xl:flex-row gap-6 w-full overflow-hidden h-full">
+        <RestMockMessageComponent></RestMockMessageComponent>
+        <HistoryComponent></HistoryComponent>
+    </div>
 </template>
 

Frontend/src/views/XmlFormatterView.vue

@@ -31,6 +31,6 @@ function clear() {
                 <XMLButtonFormatterComponent :xml="xml" @update:result="(data: any) => format(data)"></XMLButtonFormatterComponent>
             </div>
         </div>
-        <textarea name="data" id="data" :value="xml" class="text-field"></textarea>
+        <textarea name="data" id="data" :value="xml" class="text-field h-full"></textarea>
     </div>
 </template>