Added manual page to REST Mock (#267)

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

Backend/mocked-services/src/main/resources/application.properties

@@ -11,6 +11,6 @@ spring.redis.host=redis
 spring.redis.port=6379
 
 #retention
-retention.minutes-to-delete-message=120
+retention.minutes-to-delete-message=1440
 retention.minutes-to-delete-history-record=1440
 retention.retention-cooldown=1440

Frontend/src/components/man/ElementDescription.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+
+import { ref } from 'vue'
+
+
+
+const props = defineProps(
+    {
+        name: {type: String, required: true}
+    }
+)
+
+</script>
+
+<template>
+    <h3 class="text-lg font-medium mt-2">{{ name }}</h3>
+    <p><slot></slot></p>
+</template>

Frontend/src/components/man/ImgMan.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+
+import { ref } from 'vue'
+
+
+
+const props = defineProps(
+    {
+        imgPath: {type: String, required: true},
+        label: {type: String, required: true}
+    }
+)
+
+</script>
+
+<template>
+    <div class="flex flex-col gap-2 w-fit h-fit shadow-sm bg-slate-200 dark:bg-slate-800 p-2 rounded-md my-2 text-center self-center">
+        <img id="url_section" class="rounded-md" :src="imgPath" />
+        <label for="url_section" class="text-sm mb-0 text-slate-600 dark:text-slate-300">{{ label }}</label>
+    </div>
+</template>

Frontend/src/components/man/RestMockManComponent.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+
+import ImgMan from './ImgMan.vue';
+import ElementDescription from './ElementDescription.vue';
+
+
+</script>
+
+<template>
+  <div class="flex flex-col h-full gap-4">
+    <div class="flex flex-row">
+      <a href="/rest/mock" class="tool-button">Back to REST Mock</a>
+    </div>
+    <div class="flex flex-col dark:text-slate-100 w-full h-full text-justify overflow-auto px-2">
+      <h2 class="text-2xl font-bold mt-4 mb-2">Description</h2>
+      <p><span class="font-medium">REST Mock</span> is a tool allowing to create temporary REST endpoint called REST Mock, that allows to test REST clients.</p>
+      <br>
+      <p>Its main functions are:</p>
+      <ul class="list-disc ml-5">
+        <li>Generating random URL for each user, one per user, with persistence for 24h.</li>
+        <li>Customizable HTTP response status code</li>
+        <li>Customizable response body and its content type</li>
+        <li>Customizable response headers</li>
+        <li>History of connections to generated endpoint with ability to look into request method, headers and body</li>
+      </ul>
+      <h2 class="text-2xl font-bold mt-4 mb-2">GUI elements</h2>
+      <p>This section describe how certain elements of the application work:</p>
+      <ElementDescription name="URL field">This field contains autogenerated URL for your REST Mock. All links are removed every 24h.</ElementDescription>
+      <ElementDescription name="'Save' button">Applies every change made on this page and saves it between sessions.</ElementDescription>
+      <ElementDescription name="Response Content Type field">Its just convenient way to set "Content-Type" header in the response.</ElementDescription>
+      <ElementDescription name="Response HTTP Status field">This field sets HTTP status that will be sent to client. Any valid HTTP status can be used, by default it's 200 OK.</ElementDescription>
+      <ElementDescription name="Response Body field">Here you can set response body. This is sophisticated text editor with syntax-highlighting based on detected language. It works both with JSON and XML data.</ElementDescription>
+      <ElementDescription name="Response Headers section">This section contains three default and unremovable headers ("Connection", "Date", "Keep-Alive") as well as empty field used to adding custom header. Adding header with empty value is possible, but every header has to have a name. When adding new header is possible, the "Add" button becomes active. New header is added after "Add" button is clicked.</ElementDescription>
+      <ElementDescription name="History">This section allows to look into history of requests sent to current REST Mock. Entries are sorted by descending by date (newer are first). If request has body, "Show body" button appears in its entry. Also there is option to look into every request's headers by clicking "Show Headers" button. For now, History doesn't refresh automatically. To refresh it, click small refresh button on the right-hand side.</ElementDescription>
+
+
+      <h2 class="text-2xl font-bold mt-4 mb-2">Example</h2>
+      <p>Let's say we want to create temporary endpoint that returns code 200 with body:</p>
+      <div class="w-fit p-2 my-2 bg-slate-200 dark:bg-slate-800 rounded-md self-center"><pre>{
+  "status": "completed", 
+  "warnings": "none"
+}</pre></div>
+      <p>Additionally we want to set some headers:</p>
+      <div class="w-fit p-2 my-2 bg-slate-200 dark:bg-slate-800 rounded-md self-center"><pre>  Name       Value
+operation   addition
+priority     urgent
+</pre></div>
+      <p>In this example we will focus on the left-hand side panel first as it contains most of the settings. On the top you see autogenerated URL link to your REST Mock service and the "Save" button that saves every setting on this page.</p>
+      
+      <ImgMan imgPath="../../src/assets/man/rest-mock/URL_section.png" label="Screenshot of Rest Mock URL bar and Save button"></ImgMan>
+      
+      <p>Next, down from REST Mock URL are two text fields. One for content type of a response and second for the HTTP status of a response. </p>
+      
+      <ImgMan imgPath="../../src/assets/man/rest-mock/Status_section.png" label='Screenshot of "Response Content Type" and "Response HTTP Status"'></ImgMan>
+      
+      <p>These two fields are first things that we will set in this example. Out content type is JSON, so we will put "application/json" in "Response Content Type" field. The "Response HTTP Status" field we'll leave 
+      unchanged for now.</p><br/>
+      <p>Next element of this tool is big "Response Body" text field. Here you can put data that you want your REST Mock to respond with. In this example we will put JSON from few lines above.</p>
+      
+      <ImgMan imgPath="../../src/assets/man/rest-mock/Body_section.png" label='Screenshot of Response Body field filled with example JSON'></ImgMan>
+      
+      <p>Last thing that we have to set are headers. Those we can set in Headers section.</p>
+      
+      <ImgMan imgPath="../../src/assets/man/rest-mock/Header_section.png" label='Screenshot of Headers Section with added custom headers.'></ImgMan>
+    </div>
+  </div>
+  
+  
+  
+</template>
+
+<style scoped></style>

Frontend/src/components/mock/RestMockMessageComponent.vue

@@ -47,12 +47,12 @@ function showUpdatedCode(newCode : string){
   <div class="flex flex-col flex-none w-full xl:w-3/5 text-center dark:text-white gap-3 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">REST Service URL</label><br/>
+        <label for="link">REST Service URL</label>
         <div class="p-2 w-full border-slate-400 border-2 rounded-lg">
           <a class="underline" :href="mockMessageLink">{{ mockMessageLink }}</a>
         </div>
       </div>
-      
+      <a class="tool-button" href="/man/rest-mock">Help</a>
       <SaveComponent v-bind:message-data="messageData"></SaveComponent>
     </div>
     <div class="flex flex-col md:flex-row w-full gap-4">

Frontend/src/router/index.ts

@@ -15,6 +15,8 @@ const xqueryTool = import("@views/XQueryView.vue")
 const base64Encoder = import("@views/Base64EncoderView.vue")
 const urlEncoder = import("@views/UrlEncoderView.vue")
 
+const restMockMan = import("@views/man/RestMockManView.vue")
+
 const routes = [
   {
     path: '/',
@@ -70,6 +72,11 @@ const routes = [
     path: '/encoder/url',
     name: 'urlEncoder',
     component: () => urlEncoder
+  },
+  {
+    path: '/man/rest-mock',
+    name: 'RestMockManView',
+    component: () => restMockMan
   }
 ]
 

Frontend/src/views/man/RestMockManView.vue

@@ -0,0 +1,15 @@
+<script lang="ts">
+import RestMockManComponent from '@man/RestMockManComponent.vue'
+
+
+export default {
+    name:"RestMockManView",
+    components: {RestMockManComponent}
+}
+</script>
+
+
+<template>
+    <RestMockManComponent></RestMockManComponent>
+</template>
+

Frontend/vite.config.ts

@@ -35,6 +35,7 @@ export default defineConfig({
       '@components': fileURLToPath(new URL('./src/components', import.meta.url)),
       '@views': fileURLToPath(new URL('./src/views', import.meta.url)),
       '@assets': fileURLToPath(new URL('./src/assets', import.meta.url)),
+      '@man': fileURLToPath(new URL('./src/components/man', import.meta.url)),
     }
   }
 })