From c0fcd53d3571d7f79af9ec7e50b09942e8c07818 Mon Sep 17 00:00:00 2001
From: widlam <mikolaj.widla@gmail.com>
Date: Fri, 16 Jun 2023 14:49:56 +0200
Subject: [PATCH 1/7] Added dev server options Implemented basic structure for
 mock service

---
 Frontend/Dockerfile                           | 10 +++
 Frontend/package.json                         |  2 +-
 .../src/components/mock/HeadersComponent.vue  | 53 +++++++++++++
 .../src/components/mock/HistoryComponent.vue  |  0
 .../src/components/mock/RestMockComponent.vue | 10 ---
 .../mock/RestMockMessageComponent.vue         | 69 +++++++++++++++++
 Frontend/src/router/index.ts                  | 10 +++
 Frontend/src/views/RestMockView.vue           | 12 ++-
 Frontend/vite.config.ts                       | 21 ++++++
 docker-compose.dev.yml                        | 75 +++++++++++++++++++
 docker-compose.yml                            |  4 +-
 readme.md                                     |  3 +
 12 files changed, 254 insertions(+), 15 deletions(-)
 create mode 100644 Frontend/src/components/mock/HeadersComponent.vue
 create mode 100644 Frontend/src/components/mock/HistoryComponent.vue
 delete mode 100644 Frontend/src/components/mock/RestMockComponent.vue
 create mode 100644 Frontend/src/components/mock/RestMockMessageComponent.vue
 create mode 100644 docker-compose.dev.yml

diff --git a/Frontend/Dockerfile b/Frontend/Dockerfile
index 0af9ce9..0b44b57 100644
--- a/Frontend/Dockerfile
+++ b/Frontend/Dockerfile
@@ -18,3 +18,13 @@ COPY ./nginx.conf /etc/nginx/conf.d/default.conf
 
 EXPOSE 80
 EXPOSE 443
+
+
+FROM node:latest as dev
+WORKDIR /app
+COPY package*.json ./
+RUN npm install
+ENV HOST=0.0.0.0
+COPY . .
+EXPOSE 8080
+CMD ["npm", "run", "dev"]
diff --git a/Frontend/package.json b/Frontend/package.json
index 37b53fe..dc3c3f1 100644
--- a/Frontend/package.json
+++ b/Frontend/package.json
@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "private": true,
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --host",
     "build": "run-p type-check build-only",
     "preview": "vite preview",
     "build-only": "vite build",
diff --git a/Frontend/src/components/mock/HeadersComponent.vue b/Frontend/src/components/mock/HeadersComponent.vue
new file mode 100644
index 0000000..a711a20
--- /dev/null
+++ b/Frontend/src/components/mock/HeadersComponent.vue
@@ -0,0 +1,53 @@
+<script setup>
+import {ref} from 'vue';
+
+const props = defineProps(
+    {
+        headersObject : Object
+    } 
+)
+const headerData = ref( props.headersObject )
+
+const newHeaderName = ref('');
+const newHeaderValue = ref('');
+
+function isHeaderEssential(headerName){
+    return headerName == "Keep-Alive" || headerName == "Connection" || headerName == "Date"
+}
+
+function setEssentialHeaderStyle(headerName){
+return isHeaderEssential(headerName) ? "text-gray-400" : "text-red-400";
+}
+
+function deleteHeader(index){
+    if(!isHeaderEssential(index)){
+        delete headerData.value[index]
+    }
+}
+
+function addNewHeader(name, value){
+    headerData.value[name] = value;
+    newHeaderName.value = "";
+    newHeaderValue.value = "";
+}
+
+</script>
+
+<template>
+    <div class="w-full flex">
+        <div class="w-full">Header name</div>
+        <div class="w-full">Header value</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="w-full bg-gray-600 p-2" />
+            <input type="text" :value="item" class="w-full bg-gray-600 p-2" />
+            <button @click="deleteHeader(index)" :class="setEssentialHeaderStyle(index)">X</button>
+        </div>
+        <div class="flex gap-9 flex-row">
+            <input type="text" v-model="newHeaderName" class="w-full p-2 bg-gray-600"  />
+            <input type="text" v-model="newHeaderValue" class="w-full p-2 bg-gray-600"  />
+            <button class="text-2xl" @click="addNewHeader(newHeaderName, newHeaderValue)" > + </button>
+        </div>
+    </div>
+</template>
\ No newline at end of file
diff --git a/Frontend/src/components/mock/HistoryComponent.vue b/Frontend/src/components/mock/HistoryComponent.vue
new file mode 100644
index 0000000..e69de29
diff --git a/Frontend/src/components/mock/RestMockComponent.vue b/Frontend/src/components/mock/RestMockComponent.vue
deleted file mode 100644
index 25212f2..0000000
--- a/Frontend/src/components/mock/RestMockComponent.vue
+++ /dev/null
@@ -1,10 +0,0 @@
-<script setup lang="ts">
-
-
-</script>
-
-<template>
-  <h1>RestMock</h1>
-</template>
-
-<style scoped></style>
diff --git a/Frontend/src/components/mock/RestMockMessageComponent.vue b/Frontend/src/components/mock/RestMockMessageComponent.vue
new file mode 100644
index 0000000..8e7f1c4
--- /dev/null
+++ b/Frontend/src/components/mock/RestMockMessageComponent.vue
@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import {ref, onBeforeMount , type Ref} from 'vue';
+import HeadersComponent from './HeadersComponent.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: object;
+  httpHeaders: object;
+  httpStatus: number;
+}
+
+const exampleData : mockedMessageData = {
+  clientUUID : "exampleUUID",
+  contentType: "application/json",
+  messageBody: {message: "hello!"},
+  httpHeaders: {Connection:"keep-alive"},
+  httpStatus: 200,
+}
+let messageData : Ref<mockedMessageData> = ref(exampleData) ;
+
+
+onBeforeMount( () => {
+  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-3/5 text-center gap-6">
+    <div>
+      <label for="link">Link</label><br/>
+    <div class="p-2 border-white border-2">
+      <a class="underline" :href="mockMessageLink">{{ mockMessageLink }}</a>
+    </div>
+    </div>
+    <div class="flex flex-row w-full gap-64">
+      <div class="w-full">
+        <label for="contentType">Content Type</label><br/>
+        <input class="bg-gray-600 w-full" id="contentType" type="text" :value="messageData.contentType"/>
+      </div>
+      <div class=" w-full">
+        <label for="httpStatus">HttpStatus</label><br/>
+        <input class="bg-gray-600 w-full" id="httpStatus" type="text" :value="messageData.httpStatus"/>
+      </div>
+    </div>
+    <div class="flex flex-col">
+      <label for="messageBody">Body</label>
+      <textarea class="bg-gray-600 h-64" id="messageBody" :value="messageData.messageBody.toString()"></textarea>
+    </div>
+    <HeadersComponent :key="JSON.stringify(messageData.httpHeaders)" :headers-object="messageData.httpHeaders"></HeadersComponent>
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/Frontend/src/router/index.ts b/Frontend/src/router/index.ts
index b935285..76f64a8 100644
--- a/Frontend/src/router/index.ts
+++ b/Frontend/src/router/index.ts
@@ -34,6 +34,16 @@ const routes = [
     name: 'xslt',
     component: () => xsltTool
   },
+  {
+    path: '/xml/xpath',
+    name: 'xpath',
+    component: () => restMock
+  },
+  {
+    path: '/rest/mock',
+    name: 'restmock',
+    component: () => restMock
+  }
 ]
 
 
diff --git a/Frontend/src/views/RestMockView.vue b/Frontend/src/views/RestMockView.vue
index df7008f..e85ee3b 100644
--- a/Frontend/src/views/RestMockView.vue
+++ b/Frontend/src/views/RestMockView.vue
@@ -1,14 +1,20 @@
 <script lang="ts">
-import RestMockComponent from '@components/mock/RestMockComponent.vue'
+import RestMockMessageComponent from '@components/mock/RestMockMessageComponent.vue'
+import mockedMessageData from '@components/mock/RestMockMessageComponent.vue'
 
 export default {
     name:"RestMockView",
-    components: {RestMockComponent}
+    components: {RestMockMessageComponent}
 }
+
+
 </script>
 
 
 <template>
-    <RestMockComponent></RestMockComponent>
+    <div class="flex w-full h-screen items-center flex-col">
+        <RestMockMessageComponent></RestMockMessageComponent>
+    </div>
+    
 </template>
 
diff --git a/Frontend/vite.config.ts b/Frontend/vite.config.ts
index a096036..adf0c13 100644
--- a/Frontend/vite.config.ts
+++ b/Frontend/vite.config.ts
@@ -8,6 +8,27 @@ export default defineConfig({
   plugins: [
     vue(),
   ],
+  server:{
+    port: 80,
+    host: '0.0.0.0',
+    proxy : {
+      '/java': {
+        target:'http://xmltools-backend:8081/',
+        rewrite: (path) => path.replace(/^\/java/, ''),
+      },
+      '/libxml': {
+        target:'http://xmltools-libxml-backend/',
+        rewrite: (path) => path.replace(/^\/libxml/, ''), 
+      },
+      '/mock': {
+        target:'http://xmltools-mocked-services:8097/',
+        rewrite: (path) => path.replace(/^\/mock/, ''),
+      },
+      '/api/mock': {
+        target: 'http://xmltools-mocked-services:8097/'
+      }
+    },
+  },
   resolve: {
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url)),
diff --git a/docker-compose.dev.yml b/docker-compose.dev.yml
new file mode 100644
index 0000000..8aa4ac8
--- /dev/null
+++ b/docker-compose.dev.yml
@@ -0,0 +1,75 @@
+version: "3"
+
+services:
+    redis:
+        container_name: xmltools-redis
+        build: ./Redis
+        restart: "no"
+
+    xmltools-frontend:
+        build: 
+          context: ./Frontend
+          target: dev
+        container_name: xmltools-frontend
+        image: xmltools-frontend
+        ports:
+            - 80:80
+        volumes:
+            - ./Frontend:/app
+            - /app/node_modules
+    xmltools-backend:
+        build: ./Backend/tools-services
+        container_name: xmltools-backend
+        image: xmltools-backend
+        ports:
+            - 8081:8081
+
+    xmltools-libxml-backend:
+        build: ./Backend-libXML
+        container_name: xmltools-libxml-backend
+        image: xmltools-libxml-backend
+        ports:
+            - 8082:80
+
+    xmltools-mocked-services:
+        build:
+            context: ./Backend/mocked-services
+            dockerfile: Dockerfile
+        container_name: xmltools-mocked-services
+        restart: "no"
+        ports:
+            - "8097:8097"
+        depends_on:
+            - redis
+        environment:
+            SPRING_PROFILES_ACTIVE: DEV
+            TZ: Europe/Warsaw
+
+    swagger:
+        image: "swaggerapi/swagger-ui:latest"
+        container_name: xmltools-swagger
+        ports:
+            - "8000:8080"
+        environment:
+            - BASE_URL=/swagger
+            - SWAGGER_JSON=/Swagger/swagger.json
+        volumes:
+            - ./Swagger:/Swagger
+
+    filebeat:
+        build: ./Filebeat
+        container_name: xmltools-filebeat
+        user: root
+        volumes:
+            - "./Filebeat/filebeat.docker.yml:/usr/share/filebeat/filebeat.yml:ro"
+            - "/var/lib/docker/containers:/var/lib/docker/containers:ro"
+            - "/var/run/docker.sock:/var/run/docker.sock:ro"
+        environment:
+            - ENV_TYPE
+        command:
+            - "-e"
+            - "--strict.perms=false"
+
+networks:
+    default:
+        name: tools_network
diff --git a/docker-compose.yml b/docker-compose.yml
index 4345161..01f9948 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -7,7 +7,9 @@ services:
         restart: "no"
 
     xmltools-frontend:
-        build: ./Frontend
+        build:
+            context: ./Frontend
+            target: production-stage
         container_name: xmltools-frontend
         image: xmltools-frontend
         ports:
diff --git a/readme.md b/readme.md
index e0e9ba1..2d61997 100644
--- a/readme.md
+++ b/readme.md
@@ -41,6 +41,9 @@ within created container.
 
 ## How to run
 
+Dev server(with hot-reload frontend): docker-compose -f docker-compose.dev.yml  up --build
+Prod: docker-compose up --build
+
 ### Localy
 In order to run application use
 ```aidl
-- 
2.51.0


From 3a3073d236975907a4716bf42fe7f86dee20dcce Mon Sep 17 00:00:00 2001
From: widlam <mikolaj.widla@gmail.com>
Date: Mon, 19 Jun 2023 15:31:15 +0200
Subject: [PATCH 2/7] Implemented most of logic behind REST Mock Services Added
 dev.sh script to run r11-tools in dev-mode with hot-reload for frontend

---
 .../r11/tools/controller/MockController.java  |  6 +--
 .../src/components/mock/HeadersComponent.vue  | 32 +++++++-----
 .../src/components/mock/HistoryComponent.vue  | 49 +++++++++++++++++++
 .../mock/MockedMessageToastComponent.vue      | 36 ++++++++++++++
 .../mock/RestMockMessageComponent.vue         | 37 +++++++-------
 .../src/components/mock/SaveComponent.vue     | 45 +++++++++++++++++
 Frontend/src/router/index.ts                  |  5 --
 Frontend/src/views/RestMockView.vue           | 14 ++----
 dev.sh                                        |  1 +
 9 files changed, 177 insertions(+), 48 deletions(-)
 create mode 100644 Frontend/src/components/mock/MockedMessageToastComponent.vue
 create mode 100644 Frontend/src/components/mock/SaveComponent.vue
 create mode 100755 dev.sh

diff --git a/Backend/mocked-services/src/main/java/com/r11/tools/controller/MockController.java b/Backend/mocked-services/src/main/java/com/r11/tools/controller/MockController.java
index a9af2c3..108815b 100644
--- a/Backend/mocked-services/src/main/java/com/r11/tools/controller/MockController.java
+++ b/Backend/mocked-services/src/main/java/com/r11/tools/controller/MockController.java
@@ -36,14 +36,12 @@ public class MockController {
 
     /**
      * Updates queried message with given set of data
-     * @param body {@link MockedMessageDto} json representation
+     * @param message {@link MockedMessageDto} json representation
      * @return confirmation and 200 OK
      */
     @SneakyThrows
     @PutMapping
-    public ResponseEntity<String> updateMessage(@RequestBody String body){
-        ObjectMapper mapper = new ObjectMapper();
-        MockedMessageDto message = mapper.readValue(body, MockedMessageDto.class);
+    public ResponseEntity<String> updateMessage(@RequestBody MockedMessageDto message){
         return klausService.setMockedResponse(message);
     }
 
diff --git a/Frontend/src/components/mock/HeadersComponent.vue b/Frontend/src/components/mock/HeadersComponent.vue
index a711a20..c31c3b7 100644
--- a/Frontend/src/components/mock/HeadersComponent.vue
+++ b/Frontend/src/components/mock/HeadersComponent.vue
@@ -1,34 +1,42 @@
-<script setup>
-import {ref} from 'vue';
+<script setup lang="ts">
+import { ref} from 'vue';
 
 const props = defineProps(
     {
         headersObject : Object
     } 
 )
-const headerData = ref( props.headersObject )
 
+const emit = defineEmits([
+    'update:httpHeaders'
+])
+
+const headerData  = ref(props.headersObject)
 const newHeaderName = ref('');
 const newHeaderValue = ref('');
 
-function isHeaderEssential(headerName){
+function isHeaderEssential(headerName : string){
     return headerName == "Keep-Alive" || headerName == "Connection" || headerName == "Date"
 }
 
-function setEssentialHeaderStyle(headerName){
-return isHeaderEssential(headerName) ? "text-gray-400" : "text-red-400";
+function setEssentialHeaderStyle(headerName : string){
+    return isHeaderEssential(headerName) ? "text-gray-400" : "text-red-400";
 }
 
-function deleteHeader(index){
-    if(!isHeaderEssential(index)){
+function deleteHeader(index : string){
+    if(!isHeaderEssential(index) && headerData.value != undefined){
         delete headerData.value[index]
+        emit('update:httpHeaders',headerData.value)
     }
 }
 
-function addNewHeader(name, value){
-    headerData.value[name] = value;
-    newHeaderName.value = "";
-    newHeaderValue.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>
diff --git a/Frontend/src/components/mock/HistoryComponent.vue b/Frontend/src/components/mock/HistoryComponent.vue
index e69de29..2fc769b 100644
--- a/Frontend/src/components/mock/HistoryComponent.vue
+++ b/Frontend/src/components/mock/HistoryComponent.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { ref, type Ref } from 'vue';
+
+interface historyRecord {
+    clientUUID : String,
+    dateTimeStamp: String,
+    headers : Object,
+    httpMethod: String,
+    requestBody: String
+}
+
+
+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){
+
+}
+
+function showBody(body : String){
+
+}
+
+</script>
+
+
+<template>
+    <table class="text-white h-28 w-5/12 text-center border-l-4 border-b-2">
+        <tr>
+            <th>Time</th>
+            <th>HTTP Method</th>
+            <th>HTTP Headers</th>
+            <th>Request Body</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);">Show Headers</button> </td>
+            <td> <button @click="showBody(item.requestBody)">Show Body</button> </td>
+        </tr>
+    </table>
+
+</template>
\ No newline at end of file
diff --git a/Frontend/src/components/mock/MockedMessageToastComponent.vue b/Frontend/src/components/mock/MockedMessageToastComponent.vue
new file mode 100644
index 0000000..c246fa7
--- /dev/null
+++ b/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="visible" class="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" 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>
\ No newline at end of file
diff --git a/Frontend/src/components/mock/RestMockMessageComponent.vue b/Frontend/src/components/mock/RestMockMessageComponent.vue
index 8e7f1c4..0590bf7 100644
--- a/Frontend/src/components/mock/RestMockMessageComponent.vue
+++ b/Frontend/src/components/mock/RestMockMessageComponent.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import {ref, onBeforeMount , type Ref} from 'vue';
+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";
@@ -21,15 +22,12 @@ const exampleData : mockedMessageData = {
   httpHeaders: {Connection:"keep-alive"},
   httpStatus: 200,
 }
-let messageData : Ref<mockedMessageData> = ref(exampleData) ;
 
-
-onBeforeMount( () => {
-  if ( localStorage.clientUUID != undefined ){
+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));
-} )
+}
+fetch(host + '/api/mock/' + clientUUID.value).then( response => response.json() ).then(data => {putDataInFields(data);  });
 
 function putDataInFields(data: mockedMessageData){
   clientUUID.value = data.clientUUID;
@@ -41,28 +39,33 @@ function putDataInFields(data: mockedMessageData){
 </script>
 
 <template>
-  <div class="flex flex-col w-3/5 text-center gap-6">
+  <div class="flex flex-col w-3/5 text-center dark:text-white gap-6">
     <div>
       <label for="link">Link</label><br/>
-    <div class="p-2 border-white border-2">
-      <a class="underline" :href="mockMessageLink">{{ mockMessageLink }}</a>
-    </div>
+      <div class="flex gap-4">
+        <div class="p-2 w-full border-white border-2">
+          <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="bg-gray-600 w-full" id="contentType" type="text" :value="messageData.contentType"/>
+        <input  class="bg-gray-600 w-full" id="contentType" type="text" v-model="messageData.contentType"/>
       </div>
-      <div class=" w-full">
+      
+      <div class="w-full">
         <label for="httpStatus">HttpStatus</label><br/>
-        <input class="bg-gray-600 w-full" id="httpStatus" type="text" :value="messageData.httpStatus"/>
+        <input class="bg-gray-600 w-full" id="httpStatus" type="text" v-model="messageData.httpStatus"/>
       </div>
+      
     </div>
     <div class="flex flex-col">
       <label for="messageBody">Body</label>
-      <textarea class="bg-gray-600 h-64" id="messageBody" :value="messageData.messageBody.toString()"></textarea>
+      <textarea class="bg-gray-600 h-64" id="messageBody" v-model="messageData.messageBody"></textarea>
     </div>
-    <HeadersComponent :key="JSON.stringify(messageData.httpHeaders)" :headers-object="messageData.httpHeaders"></HeadersComponent>
+    <HeadersComponent @update:httpHeaders="(newHeaders: object) => {messageData.httpHeaders = newHeaders }" :key="JSON.stringify(messageData.httpHeaders)" :headers-object="messageData.httpHeaders"></HeadersComponent>
   </div>
 </template>
 
diff --git a/Frontend/src/components/mock/SaveComponent.vue b/Frontend/src/components/mock/SaveComponent.vue
new file mode 100644
index 0000000..c1cc2ab
--- /dev/null
+++ b/Frontend/src/components/mock/SaveComponent.vue
@@ -0,0 +1,45 @@
+<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";
+}
+
+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>
\ No newline at end of file
diff --git a/Frontend/src/router/index.ts b/Frontend/src/router/index.ts
index 76f64a8..c614f20 100644
--- a/Frontend/src/router/index.ts
+++ b/Frontend/src/router/index.ts
@@ -34,11 +34,6 @@ const routes = [
     name: 'xslt',
     component: () => xsltTool
   },
-  {
-    path: '/xml/xpath',
-    name: 'xpath',
-    component: () => restMock
-  },
   {
     path: '/rest/mock',
     name: 'restmock',
diff --git a/Frontend/src/views/RestMockView.vue b/Frontend/src/views/RestMockView.vue
index e85ee3b..65a7220 100644
--- a/Frontend/src/views/RestMockView.vue
+++ b/Frontend/src/views/RestMockView.vue
@@ -1,20 +1,14 @@
-<script lang="ts">
+<script setup lang="ts">
 import RestMockMessageComponent from '@components/mock/RestMockMessageComponent.vue'
-import mockedMessageData from '@components/mock/RestMockMessageComponent.vue'
-
-export default {
-    name:"RestMockView",
-    components: {RestMockMessageComponent}
-}
-
+import HistoryComponent from '@components/mock/HistoryComponent.vue'
 
 </script>
 
 
 <template>
-    <div class="flex w-full h-screen items-center flex-col">
+    <div class="flex gap-6 w-full h-screen">
         <RestMockMessageComponent></RestMockMessageComponent>
+        <HistoryComponent></HistoryComponent>
     </div>
-    
 </template>
 
diff --git a/dev.sh b/dev.sh
new file mode 100755
index 0000000..0a22208
--- /dev/null
+++ b/dev.sh
@@ -0,0 +1 @@
+docker-compose -f docker-compose.dev.yml  up --build
\ No newline at end of file
-- 
2.51.0


From 5c2516797b485c750ed274c17f46417f089b7677 Mon Sep 17 00:00:00 2001
From: Adam Bem <adam.bem@zoho.eu>
Date: Tue, 20 Jun 2023 12:18:21 +0200
Subject: [PATCH 3/7] Added styling and RWD

---
 .../src/components/mock/HeadersComponent.vue  | 14 ++++-----
 .../src/components/mock/HistoryComponent.vue  | 31 ++++++++++---------
 .../mock/RestMockMessageComponent.vue         | 10 +++---
 Frontend/src/style.css                        |  4 +++
 Frontend/src/views/RestMockView.vue           |  4 ++-
 5 files changed, 36 insertions(+), 27 deletions(-)

diff --git a/Frontend/src/components/mock/HeadersComponent.vue b/Frontend/src/components/mock/HeadersComponent.vue
index c31c3b7..c5dc457 100644
--- a/Frontend/src/components/mock/HeadersComponent.vue
+++ b/Frontend/src/components/mock/HeadersComponent.vue
@@ -20,7 +20,7 @@ function isHeaderEssential(headerName : string){
 }
 
 function setEssentialHeaderStyle(headerName : string){
-    return isHeaderEssential(headerName) ? "text-gray-400" : "text-red-400";
+    return isHeaderEssential(headerName) ? "text-gray-400" : "tool-button text-red-400";
 }
 
 function deleteHeader(index : string){
@@ -48,14 +48,14 @@ function addNewHeader(name : string, value : string){
     </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="w-full bg-gray-600 p-2" />
-            <input type="text" :value="item" class="w-full bg-gray-600 p-2" />
-            <button @click="deleteHeader(index)" :class="setEssentialHeaderStyle(index)">X</button>
+            <input type="text" :value="index" class="text-field" />
+            <input type="text" :value="item" class="text-field" />
+            <button @click="deleteHeader(index)" class="tool-button" :class="setEssentialHeaderStyle(index)">X</button>
         </div>
         <div class="flex gap-9 flex-row">
-            <input type="text" v-model="newHeaderName" class="w-full p-2 bg-gray-600"  />
-            <input type="text" v-model="newHeaderValue" class="w-full p-2 bg-gray-600"  />
-            <button class="text-2xl" @click="addNewHeader(newHeaderName, newHeaderValue)" > + </button>
+            <input type="text" v-model="newHeaderName" class="text-field"  />
+            <input type="text" v-model="newHeaderValue" class="text-field"  />
+            <button class="tool-button" @click="addNewHeader(newHeaderName, newHeaderValue)" >+</button>
         </div>
     </div>
 </template>
\ No newline at end of file
diff --git a/Frontend/src/components/mock/HistoryComponent.vue b/Frontend/src/components/mock/HistoryComponent.vue
index 2fc769b..fed0035 100644
--- a/Frontend/src/components/mock/HistoryComponent.vue
+++ b/Frontend/src/components/mock/HistoryComponent.vue
@@ -31,19 +31,22 @@ function showBody(body : String){
 
 
 <template>
-    <table class="text-white h-28 w-5/12 text-center border-l-4 border-b-2">
-        <tr>
-            <th>Time</th>
-            <th>HTTP Method</th>
-            <th>HTTP Headers</th>
-            <th>Request Body</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);">Show Headers</button> </td>
-            <td> <button @click="showBody(item.requestBody)">Show Body</button> </td>
-        </tr>
-    </table>
+    <div class="w-full xl:w-5/12">
+        <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>
+            </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);">Show Headers</button> </td>
+                <td> <button @click="showBody(item.requestBody)">Show Body</button> </td>
+            </tr>
+        </table>
+    </div>
+    
 
 </template>
\ No newline at end of file
diff --git a/Frontend/src/components/mock/RestMockMessageComponent.vue b/Frontend/src/components/mock/RestMockMessageComponent.vue
index 0590bf7..9428699 100644
--- a/Frontend/src/components/mock/RestMockMessageComponent.vue
+++ b/Frontend/src/components/mock/RestMockMessageComponent.vue
@@ -39,11 +39,11 @@ function putDataInFields(data: mockedMessageData){
 </script>
 
 <template>
-  <div class="flex flex-col w-3/5 text-center dark:text-white gap-6">
+  <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-white border-2">
+        <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>
@@ -52,18 +52,18 @@ function putDataInFields(data: mockedMessageData){
     <div class="flex flex-row w-full gap-64">
       <div class="w-full">
         <label for="contentType">Content Type</label><br/>
-        <input  class="bg-gray-600 w-full" id="contentType" type="text" v-model="messageData.contentType"/>
+        <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="bg-gray-600 w-full" id="httpStatus" type="text" v-model="messageData.httpStatus"/>
+        <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="bg-gray-600 h-64" id="messageBody" v-model="messageData.messageBody"></textarea>
+      <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>
diff --git a/Frontend/src/style.css b/Frontend/src/style.css
index f884ed7..f342b81 100644
--- a/Frontend/src/style.css
+++ b/Frontend/src/style.css
@@ -4,4 +4,8 @@
 
 .tool-button {
     @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 dark:text-slate-100 dark:bg-gray-600 border border-slate-400 p-2 rounded-lg
 }
\ No newline at end of file
diff --git a/Frontend/src/views/RestMockView.vue b/Frontend/src/views/RestMockView.vue
index 65a7220..93d2bb5 100644
--- a/Frontend/src/views/RestMockView.vue
+++ b/Frontend/src/views/RestMockView.vue
@@ -6,9 +6,11 @@ import HistoryComponent from '@components/mock/HistoryComponent.vue'
 
 
 <template>
-    <div class="flex gap-6 w-full h-screen">
+    <div class="flex flex-col xl:flex-row gap-6 w-full h-full">
         <RestMockMessageComponent></RestMockMessageComponent>
         <HistoryComponent></HistoryComponent>
+
+        
     </div>
 </template>
 
-- 
2.51.0


From 356dffdbcd919fe70a61c433ce6b7e6f1a0536e9 Mon Sep 17 00:00:00 2001
From: widlam <mikolaj.widla@gmail.com>
Date: Thu, 22 Jun 2023 10:26:19 +0200
Subject: [PATCH 4/7] Implemented history module

---
 Frontend/nginx.conf                           |  5 +++
 .../components/mock/BodyDetailComponent.vue   | 15 ++++++++
 .../mock/HeadersDetailComponent.vue           | 20 +++++++++++
 .../src/components/mock/HistoryComponent.vue  | 34 ++++++++++++++++++-
 .../src/components/mock/HistoryRecords.vue    | 21 +++++++-----
 5 files changed, 86 insertions(+), 9 deletions(-)
 create mode 100644 Frontend/src/components/mock/BodyDetailComponent.vue
 create mode 100644 Frontend/src/components/mock/HeadersDetailComponent.vue

diff --git a/Frontend/nginx.conf b/Frontend/nginx.conf
index f2d3d8d..144dee5 100644
--- a/Frontend/nginx.conf
+++ b/Frontend/nginx.conf
@@ -18,6 +18,11 @@ server {
         proxy_set_header Host $host;
     }
 
+    location /api/mock {
+        proxy_pass http://xmltools-mocked-services:8097/api/mock;
+        proxy_set_header Host $host;
+    }
+
     location /libxml/ {
         proxy_pass http://xmltools-libxml-backend/;
         proxy_set_header Host $host;
diff --git a/Frontend/src/components/mock/BodyDetailComponent.vue b/Frontend/src/components/mock/BodyDetailComponent.vue
new file mode 100644
index 0000000..90fc97c
--- /dev/null
+++ b/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">
+        {{ props.data.replace(/\\n/g,"") }}
+    </span>
+</template>
\ No newline at end of file
diff --git a/Frontend/src/components/mock/HeadersDetailComponent.vue b/Frontend/src/components/mock/HeadersDetailComponent.vue
new file mode 100644
index 0000000..7c277d8
--- /dev/null
+++ b/Frontend/src/components/mock/HeadersDetailComponent.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+
+const props = defineProps(
+    {
+        data: {type:String, required:true}
+    }
+)
+
+
+</script>
+
+<template>
+    <table class="w-full text-center text-white mt-2">
+        <tr> <th>Name</th> <th>Value</th> </tr>
+        <tr v-for="(value,name) in JSON.parse(data)" :key="name">
+            <td>{{ name }}</td>
+            <td>{{ value }}</td>
+        </tr>
+    </table>
+</template>
\ No newline at end of file
diff --git a/Frontend/src/components/mock/HistoryComponent.vue b/Frontend/src/components/mock/HistoryComponent.vue
index f15d3dc..4872807 100644
--- a/Frontend/src/components/mock/HistoryComponent.vue
+++ b/Frontend/src/components/mock/HistoryComponent.vue
@@ -1,8 +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>
-    <HistoryRecords></HistoryRecords>
+    <div class="w-full xl:w-5/12 flex flex-col gap-y-4">
+    <HistoryRecords @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>
\ No newline at end of file
diff --git a/Frontend/src/components/mock/HistoryRecords.vue b/Frontend/src/components/mock/HistoryRecords.vue
index f9bb1e8..31703c2 100644
--- a/Frontend/src/components/mock/HistoryRecords.vue
+++ b/Frontend/src/components/mock/HistoryRecords.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { h, ref, type Ref } from 'vue';
+import {ref, type Ref } from 'vue';
 
 interface historyRecord {
     clientUUID : String,
@@ -24,32 +24,37 @@ function parseTimeStamp(timestamp : String){
     return timestamp.substring(10,19).replace("T"," ");
 }
 
-function showHeaders(headers: object){
-    emit('click:showHeaders',headers)
+function showHeaders(headers: Object, index : number){
+    emit('click:showHeaders',headers, index)
 }
 
-function showBody(body: String){
+function showBody(body: String , index : number){
     console.log(body)
-    emit('click:showBody',body)
+    emit('click:showBody',body, index)
+}
+
+function refreshHistory(){
+    fetch(fetchLink+"/"+clientUUID).then(response => response.json()).then(data => { historyRecords.value = data });
 }
 
 </script>
 
 <template>
-    <div class="w-full xl:w-5/12">
+    <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)">Show Headers</button> </td>
+                <td> <button @click="showHeaders(item.headers, index)">Show Headers</button> </td>
                 <td> 
-                    <button v-if="item.requestBody.length != 0" @click="showBody(item.requestBody)">Show Headers</button> 
+                    <button v-if="item.requestBody.length != 0" @click="showBody(item.requestBody, index)">Show Body</button> 
                     <span v-else>Empty Body</span>
                 </td>
             </tr>
-- 
2.51.0


From 84389be20369064984338cd12c0f2fc5fbdafac7 Mon Sep 17 00:00:00 2001
From: widlam <mikolaj.widla@gmail.com>
Date: Thu, 22 Jun 2023 10:27:06 +0200
Subject: [PATCH 5/7] remove unused whitespaces

---
 Frontend/src/views/RestMockView.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/Frontend/src/views/RestMockView.vue b/Frontend/src/views/RestMockView.vue
index 93d2bb5..173a884 100644
--- a/Frontend/src/views/RestMockView.vue
+++ b/Frontend/src/views/RestMockView.vue
@@ -9,8 +9,6 @@ import HistoryComponent from '@components/mock/HistoryComponent.vue'
     <div class="flex flex-col xl:flex-row gap-6 w-full h-full">
         <RestMockMessageComponent></RestMockMessageComponent>
         <HistoryComponent></HistoryComponent>
-
-        
     </div>
 </template>
 
-- 
2.51.0


From 8a7160bfd7a25e31095011a3d243305326cbe7d8 Mon Sep 17 00:00:00 2001
From: widlam <mikolaj.widla@gmail.com>
Date: Thu, 22 Jun 2023 13:54:09 +0200
Subject: [PATCH 6/7] Fixed problems with REST Mock

---
 Frontend/src/App.vue                            |  2 +-
 .../src/components/mock/BodyDetailComponent.vue |  2 +-
 .../src/components/mock/HeadersComponent.vue    |  7 ++++---
 .../components/mock/HeadersDetailComponent.vue  | 17 ++++++++++-------
 .../src/components/mock/HistoryComponent.vue    |  2 +-
 .../mock/MockedMessageToastComponent.vue        |  6 +++---
 Frontend/src/components/mock/SaveComponent.vue  |  1 +
 Frontend/src/views/RestMockView.vue             |  2 +-
 8 files changed, 22 insertions(+), 17 deletions(-)

diff --git a/Frontend/src/App.vue b/Frontend/src/App.vue
index 2a93a0a..31e6146 100644
--- a/Frontend/src/App.vue
+++ b/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>
diff --git a/Frontend/src/components/mock/BodyDetailComponent.vue b/Frontend/src/components/mock/BodyDetailComponent.vue
index 90fc97c..1273e12 100644
--- a/Frontend/src/components/mock/BodyDetailComponent.vue
+++ b/Frontend/src/components/mock/BodyDetailComponent.vue
@@ -9,7 +9,7 @@ const props = defineProps(
 </script>
 
 <template>
-    <span class="text-white text-center h-screen">
+    <span class="text-white text-center h-screen overflow-x-scroll ">
         {{ props.data.replace(/\\n/g,"") }}
     </span>
 </template>
\ No newline at end of file
diff --git a/Frontend/src/components/mock/HeadersComponent.vue b/Frontend/src/components/mock/HeadersComponent.vue
index c5dc457..b5af03a 100644
--- a/Frontend/src/components/mock/HeadersComponent.vue
+++ b/Frontend/src/components/mock/HeadersComponent.vue
@@ -42,20 +42,21 @@ function addNewHeader(name : string, value : string){
 </script>
 
 <template>
-    <div class="w-full flex">
+    <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" :class="setEssentialHeaderStyle(index)">X</button>
+            <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" @click="addNewHeader(newHeaderName, newHeaderValue)" >+</button>
+            <button class="tool-button w-1/5" @click="addNewHeader(newHeaderName, newHeaderValue)" >Add</button>
         </div>
     </div>
 </template>
\ No newline at end of file
diff --git a/Frontend/src/components/mock/HeadersDetailComponent.vue b/Frontend/src/components/mock/HeadersDetailComponent.vue
index 7c277d8..ce1ad41 100644
--- a/Frontend/src/components/mock/HeadersDetailComponent.vue
+++ b/Frontend/src/components/mock/HeadersDetailComponent.vue
@@ -10,11 +10,14 @@ const props = defineProps(
 </script>
 
 <template>
-    <table class="w-full text-center text-white mt-2">
-        <tr> <th>Name</th> <th>Value</th> </tr>
-        <tr v-for="(value,name) in JSON.parse(data)" :key="name">
-            <td>{{ name }}</td>
-            <td>{{ value }}</td>
-        </tr>
-    </table>
+    <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>
\ No newline at end of file
diff --git a/Frontend/src/components/mock/HistoryComponent.vue b/Frontend/src/components/mock/HistoryComponent.vue
index 4872807..3dbf0c8 100644
--- a/Frontend/src/components/mock/HistoryComponent.vue
+++ b/Frontend/src/components/mock/HistoryComponent.vue
@@ -33,7 +33,7 @@ function showHeaders(headers: object, index: number){
 
 <template>
     <div class="w-full xl:w-5/12 flex flex-col gap-y-4">
-    <HistoryRecords @click:show-headers="showHeaders" @click:show-body="showBody"></HistoryRecords>
+    <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>
diff --git a/Frontend/src/components/mock/MockedMessageToastComponent.vue b/Frontend/src/components/mock/MockedMessageToastComponent.vue
index c246fa7..d3d17d3 100644
--- a/Frontend/src/components/mock/MockedMessageToastComponent.vue
+++ b/Frontend/src/components/mock/MockedMessageToastComponent.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { ref} from 'vue';
+import { ref } from 'vue';
 
 const emit = defineEmits([
-    'closed:toast_closed'
+    'closed:toast_closed',
 ])
 
 const props = defineProps(
@@ -22,7 +22,7 @@ function hideToast(){
 
 
 <template>
-    <div id="toast-success" :class="visible" class="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" role="alert">
+    <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>
diff --git a/Frontend/src/components/mock/SaveComponent.vue b/Frontend/src/components/mock/SaveComponent.vue
index c1cc2ab..897ec98 100644
--- a/Frontend/src/components/mock/SaveComponent.vue
+++ b/Frontend/src/components/mock/SaveComponent.vue
@@ -27,6 +27,7 @@ function prepareAndSendData(){
 
 function showToast(){
     visible.value = "visible";
+    setTimeout( () => { visible.value = "opacity-0" } , 1500 )
 }
 
 function hideToast(){
diff --git a/Frontend/src/views/RestMockView.vue b/Frontend/src/views/RestMockView.vue
index 173a884..771d134 100644
--- a/Frontend/src/views/RestMockView.vue
+++ b/Frontend/src/views/RestMockView.vue
@@ -6,7 +6,7 @@ import HistoryComponent from '@components/mock/HistoryComponent.vue'
 
 
 <template>
-    <div class="flex flex-col xl:flex-row gap-6 w-full h-full">
+    <div class="flex flex-col xl:flex-row gap-6 w-full overflow-hidden h-full">
         <RestMockMessageComponent></RestMockMessageComponent>
         <HistoryComponent></HistoryComponent>
     </div>
-- 
2.51.0


From 494d5e9756c4c0172bcf1f68ae6ccd51d10c1b68 Mon Sep 17 00:00:00 2001
From: Adam Bem <adam.bem@zoho.eu>
Date: Thu, 22 Jun 2023 14:10:15 +0200
Subject: [PATCH 7/7] Fixed styling

---
 Frontend/src/components/xml/XmlInputFieldComponent.vue | 2 +-
 Frontend/src/style.css                                 | 2 +-
 Frontend/src/views/JsonFormatterView.vue               | 2 +-
 Frontend/src/views/XmlFormatterView.vue                | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/Frontend/src/components/xml/XmlInputFieldComponent.vue b/Frontend/src/components/xml/XmlInputFieldComponent.vue
index f4fd53a..c83470e 100644
--- a/Frontend/src/components/xml/XmlInputFieldComponent.vue
+++ b/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>
\ No newline at end of file
diff --git a/Frontend/src/style.css b/Frontend/src/style.css
index f342b81..9f2f873 100644
--- a/Frontend/src/style.css
+++ b/Frontend/src/style.css
@@ -7,5 +7,5 @@
 }
 
 .text-field {
-    @apply w-full dark:text-slate-100 dark:bg-gray-600 border border-slate-400 p-2 rounded-lg
+    @apply w-full font-mono dark:text-slate-100 dark:bg-gray-600 border border-slate-400 p-2 rounded-lg
 }
\ No newline at end of file
diff --git a/Frontend/src/views/JsonFormatterView.vue b/Frontend/src/views/JsonFormatterView.vue
index 5c4f345..a389db3 100644
--- a/Frontend/src/views/JsonFormatterView.vue
+++ b/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>
\ No newline at end of file
diff --git a/Frontend/src/views/XmlFormatterView.vue b/Frontend/src/views/XmlFormatterView.vue
index 853c0e2..583c334 100644
--- a/Frontend/src/views/XmlFormatterView.vue
+++ b/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>
\ No newline at end of file
-- 
2.51.0