R11/release11-tools
4
2
Fork 0
Code Issues 9 Pull Requests 4 Packages Projects Releases 6 Wiki Activity

Improved legibility of REST Mock interface and various fixes (#266)

Browse Source 
Reviewed-on: #266
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>
This commit is contained in:
Adam Bem
2023-11-15 07:54:14 +01:00
committed by Adam Bem
parent 5febb10d22
commit 252cadea16
21 changed files with 193 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
Frontend/src/components/mock/HeadersComponent.vue
View File

@@ -55,6 +55,7 @@ function addNewHeader(name : string, value : string){
<template>
<div class="flex flex-col gap-4">
<label>Response Headers</label>
<div class="flex flex-row gap-4">
<div class="w-full">Header name</div>
<div class="w-full">Header value</div>

6
Frontend/src/components/mock/HeadersDetailComponent.vue
View File

@@ -10,14 +10,14 @@ const props = defineProps(
</script>
<template>
<div class="w-full text-center text-white mt-2 flex flex-col gap-4 ">
<div class="w-full text-center dark: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 class="w-1/2 break-words">{{ name }}</div>
<div class="w-1/2 break-words">{{ value }}</div>
</div>
</div>
</template>

5
Frontend/src/components/mock/HistoryComponent.vue
View File

@@ -34,8 +34,9 @@ function showHeaders(headers: object, index: number){
<template>
<div class="flex flex-1 flex-col justify-items-stretch gap-y-4">
<HistoryRecords class="xl:h-1/3 overflow-y-scroll" @click:show-headers="showHeaders" @click:show-body="showBody"></HistoryRecords>
<div class="flex flex-1 flex-col xl:w-3/12 justify-items-stretch gap-y-4">
<label class="dark:text-white text-center"><span class="font-bold">Attention! </span>History doesn't refresh automatically! Use refresh button (⟳) on the right!</label>
<HistoryRecords class="xl:h-1/3 overflow-y-auto" @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>

6
Frontend/src/components/mock/HistoryRecords.vue
View File

@@ -49,8 +49,8 @@ function refreshHistory(){
<table class="w-full">
<tr>
<th>Time</th>
<th>HTTP Method</th>
<th>Headers</th>
<th>Request <br>HTTP Method</th>
<th>Request Headers</th>
<th>Request Body</th>
<th class="text-2xl"><button @click="refreshHistory()">⟳</button></th>
</tr>
@@ -60,7 +60,7 @@ function refreshHistory(){
<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'])" class="underline">Show Body</button>
<span v-else>Empty Body</span>
<span v-else>Empty</span>
</td>
</tr>
</table>

12
Frontend/src/components/mock/RestMockMessageComponent.vue
View File

@@ -44,10 +44,10 @@ function showUpdatedCode(newCode : string){
</script>
<template>
<div class="flex flex-col flex-none w-full xl:w-3/5 text-center dark:text-white gap-6 p-1">
<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">Link</label><br/>
<label for="link">REST Service URL</label><br/>
<div class="p-2 w-full border-slate-400 border-2 rounded-lg">
<a class="underline" :href="mockMessageLink">{{ mockMessageLink }}</a>
</div>
@@ -57,18 +57,18 @@ function showUpdatedCode(newCode : string){
</div>
<div class="flex flex-col md:flex-row w-full gap-4">
<div class="w-full">
<label for="contentType">Content Type</label><br/>
<label for="contentType">Response 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/>
<label for="httpStatus">Response HTTP Status</label><br/>
<input class="text-field" id="httpStatus" type="text" v-model="messageData.httpStatus"/>
</div>
</div>
<div class="flex text-left flex-col overflow-scroll h-3/4">
<label for="messageBody text-center">Body</label>
<div class="flex text-left flex-col overflow-auto gap-2 h-3/4">
<label class="text-center" for="messageBody text-center">Response Body</label>
<CodeEditorComponent
@update:updated-code="showUpdatedCode"
v-model="messageData.messageBody"