Made expandable man in REST Mock (#269)

Reviewed-on: #269
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>

Frontend/src/components/man/ManTooltipComponent.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+
+// const props = defineProps({
+//     version: {
+//         type: String,
+//         required: true
+//     },
+//     toolType: {
+//         type: String,
+//         required: true
+//     }
+// })
+
+const emit = defineEmits([
+    "update:visible"
+])
+
+const areTooltipsHidden = ref(true)
+
+function toggleTooltips() {
+    areTooltipsHidden.value = !areTooltipsHidden.value;
+    emit("update:visible", !areTooltipsHidden.value)
+}
+
+</script>
+
+<template>
+    <div :class="areTooltipsHidden ? 'w-fit' : 'w-5/12'" class="hidden xl:flex items-stretch p-2 flex-row rounded-xl shadow-lg bg-gradient-to-r from-blue-400 to-blue-300 dark:from-sky-600 dark:to-sky-800 ">
+        <button :class="{'mr-2' : !areTooltipsHidden }" class="text-xl w-6 dark:text-slate-100" @click="toggleTooltips()">
+            T<br/>o<br/>o<br/>l<br/>t<br/>i<br/>p<br/>s
+        </button>
+        <div id="content" :class="{'hidden' : areTooltipsHidden}" class="w-full flex flex-col gap-4 p-2 overflow-auto rounded-xl dark:text-white bg-indigo-50 dark:bg-gray-700" >
+            <slot></slot>
+        </div>
+    </div>
+</template>

Frontend/src/components/man/RestMockManComponent.vue

@@ -10,10 +10,7 @@ import headerSectionImg from '@assets/man/rest-mock/Header_section.png';
 </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>
@@ -66,7 +63,6 @@ priority     urgent
       
       <ImgMan :imgPath="headerSectionImg" label='Screenshot of Headers Section with added custom headers.'></ImgMan>
     </div>
-  </div>
   
   
   

Frontend/src/components/mock/HeadersDetailComponent.vue

@@ -10,7 +10,7 @@ const props = defineProps(
 </script>
 
 <template>
-    <div class="w-full text-center dark:text-white mt-2 flex flex-col gap-4 ">
+    <div class="w-full h-2/3 text-center dark:text-white mt-2 flex flex-col gap-4 overflow-auto">
         <div class="flex flex-row gap-4"> 
             <div class="w-full font-bold">Name</div> 
             <div class="w-full font-bold">Value</div> 

Frontend/src/components/mock/RestMockMessageComponent.vue

@@ -52,7 +52,6 @@ function showUpdatedCode(newCode : string){
           <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/components/xml/tooltips/TooltipCategoryComponent.vue

@@ -13,7 +13,7 @@ function toggleTooltips() {
 </script>
 
 <template>
-    <div class="flex p-2 flex-col rounded-xl shadow-lg bg-gradient-to-r from-gray-300 to-slate-300 dark:from-slate-600 dark:to-slate-700">
+    <div class="flex p-2 flex-col rounded-xl shadow-lg bg-gradient-to-r from-gray-300 to-slate-300 dark:from-slate-500 dark:to-slate-600">
         <button :class="{ 'mb-2' : !isCategoryHidden }" class="dark:text-slate-100 hover:font-bold" @click="toggleTooltips()">{{ props.name }}</button>
         <div id="content" :class="{'hidden' : isCategoryHidden}" class="flex flex-col gap-4 w-full h-fit p-2 rounded-xl dark:text-white bg-indigo-50 dark:bg-slate-800" >
             <slot></slot>

Frontend/src/components/xml/tooltips/TooltipComponent.vue

@@ -62,7 +62,7 @@ function toggleTooltips() {
         <button :class="{'mr-2' : !areTooltipsHidden }" class="text-xl w-6 dark:text-slate-100" @click="toggleTooltips()">
             T<br/>o<br/>o<br/>l<br/>t<br/>i<br/>p<br/>s
         </button>
-        <div id="content" :class="{'hidden' : areTooltipsHidden}" class="w-full flex flex-col gap-4 p-2 overflow-auto rounded-xl dark:text-white bg-indigo-50 dark:bg-slate-800" >
+        <div id="content" :class="{'hidden' : areTooltipsHidden}" class="w-full flex flex-col gap-4 p-2 overflow-auto rounded-xl dark:text-white bg-indigo-50 dark:bg-gray-700" >
             <TooltipDiffsComponent :tool-name="toolType" :tool-version="props.version"></TooltipDiffsComponent>
             <div class="w-full h-2"> </div>
             <tooltipCategoryComponent v-for="category in selectTooltip()" :key="category.name" :name="category.name">

Frontend/src/views/RestMockView.vue

@@ -1,14 +1,29 @@
 <script setup lang="ts">
 import RestMockMessageComponent from '@components/mock/RestMockMessageComponent.vue'
 import HistoryComponent from '@components/mock/HistoryComponent.vue'
+import ManTooltipComponent from '@/components/man/ManTooltipComponent.vue';
+import RestMockManComponent from '@/components/man/RestMockManComponent.vue';
+import { ref } from 'vue';
+
+
+const historyVisibility = ref(true);
+
+function setHistoryVisibility(visibility : boolean) {
+    historyVisibility.value = !visibility;
+}
 
 </script>
 
-
 <template>
     <div class="flex flex-col xl:flex-row gap-6 w-full overflow-y-auto overflow-x-hidden h-full">
         <RestMockMessageComponent></RestMockMessageComponent>
-        <HistoryComponent></HistoryComponent>
+        <HistoryComponent :class="{'hidden': !historyVisibility}"></HistoryComponent>
+        <ManTooltipComponent @update:visible="setHistoryVisibility">
+            <div class="mt-2">
+                <a class="tool-button" href="/man/rest-mock">Expand</a>
+            </div>
+            <RestMockManComponent></RestMockManComponent>
+        </ManTooltipComponent>
     </div>
 </template>
 

Frontend/src/views/man/RestMockManView.vue

@@ -10,6 +10,11 @@ export default {
 
 
 <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>
         <RestMockManComponent></RestMockManComponent>
+    </div>
 </template>