UUID switching, and add new message button fix (#96)

Co-authored-by: mikolaj widla <mikolaj.widla@gmail.com>
Co-authored-by: Adam Bem <adam.bem@zoho.eu>
Reviewed-on: R11/release11-tools-web#96
Co-authored-by: Mikolaj Widla <widlam@noreply.example.com>
Co-committed-by: Mikolaj Widla <widlam@noreply.example.com>

Backend/mocked-services/src/main/java/com/r11/tools/controller/MockController.java

@@ -5,19 +5,15 @@ import com.r11.tools.model.MockedMessageDto;
 import com.r11.tools.service.KlausService;
 import com.r11.tools.utilis.BusinessKey;
 import com.r11.tools.utilis.TrackingClient;
-import java.time.LocalDateTime;
-import java.util.Collections;
-import java.util.HashMap;
-import java.util.List;
-import java.util.Map;
-import java.util.Objects;
-import java.util.UUID;
 import lombok.AllArgsConstructor;
 import lombok.SneakyThrows;
 import lombok.extern.slf4j.Slf4j;
 import org.springframework.http.*;
 import org.springframework.web.bind.annotation.*;
 
+import java.time.LocalDateTime;
+import java.util.*;
+
 /**
  * Returns the homepage and provides the api for javascript async requests.
  * @author Gabriel Modzelewski
@@ -64,6 +60,32 @@ public class MockController {
         return messages;
     }
 
+    /**
+    * If provided UUID does not exist in database returns ResponseEntity with new generated UUID(if previous UUID is not provided),
+    * or old UUID(if previous UUID is provided). If provided UUID exists function returns provided UUID.
+    * @param givenUUIDValue the UUID client wants to check exsitance in database
+    * @param previousUUIDValue the previous UUID used by client(optional variable)
+    * @return ResponseEntity with UUID
+     */
+    @RequestMapping(
+            method = RequestMethod.GET ,
+            path = {"/check/{givenUUIDValue}/{previousUUIDValue}",
+                    "/check/{givenUUIDValue}"})
+    public ResponseEntity<String> checkUUID(
+            @PathVariable String givenUUIDValue
+            ,@PathVariable(required = false) String previousUUIDValue  ){
+        try{
+            UUID.fromString(givenUUIDValue);
+        } catch (IllegalArgumentException ex){
+            if (previousUUIDValue == null || previousUUIDValue.equals("")){
+                UUID newUUID = UUID.randomUUID();
+                return ResponseEntity.ok(newUUID.toString());
+            }
+            return ResponseEntity.ok(previousUUIDValue);
+        }
+        return ResponseEntity.ok(givenUUIDValue);
+    }
+
     /**
      * Accepts empty post request and creates new message in given set. The new message has default set of data,
      * which is constructed in {@link #buildDefaultMessage(UUID, int)} method.

Backend/mocked-services/src/main/java/com/r11/tools/repository/MockedResponseRepository.java

@@ -2,6 +2,7 @@ package com.r11.tools.repository;
 
 import com.r11.tools.model.MockedMessage;
 import java.util.List;
+import java.util.Optional;
 import java.util.UUID;
 import org.springframework.data.repository.CrudRepository;
 import org.springframework.stereotype.Repository;
@@ -17,7 +18,7 @@ public interface MockedResponseRepository extends CrudRepository<MockedMessage,
     /**
      * Finds all messages by their uuid
      * @param clientUUID the key-uuid of given set of messages
-     * @return list of {@link com.r11.tools.model.MockedMessage}
+     * @return Optional of list of {@link com.r11.tools.model.MockedMessage}
      */
-    List<MockedMessage> findAllByClientUUID(UUID clientUUID);
+    Optional<List<MockedMessage>> findAllByClientUUID(UUID clientUUID);
 }

Backend/mocked-services/src/main/java/com/r11/tools/service/KlausServiceImpl.java

@@ -5,10 +5,6 @@ import com.r11.tools.mappers.MockedMessageMapper;
 import com.r11.tools.model.MockedMessage;
 import com.r11.tools.model.MockedMessageDto;
 import com.r11.tools.repository.MockedResponseRepository;
-import java.util.List;
-import java.util.Optional;
-import java.util.UUID;
-import java.util.stream.Collectors;
 import lombok.AllArgsConstructor;
 import lombok.SneakyThrows;
 import lombok.extern.slf4j.Slf4j;
@@ -16,6 +12,10 @@ import org.springframework.http.HttpHeaders;
 import org.springframework.http.HttpStatus;
 import org.springframework.http.ResponseEntity;
 import org.springframework.stereotype.Service;
+import java.util.List;
+import java.util.Optional;
+import java.util.UUID;
+import java.util.stream.Collectors;
 
 /**
  * Service for {@link com.r11.tools.controller.MockController} and {@link com.r11.tools.controller.MockController}
@@ -52,10 +52,11 @@ public class KlausServiceImpl implements KlausService {
      * @return List of {@link MockedMessageDto}
      */
     @Override
-    public List<MockedMessageDto> getAllMockedResponses(UUID clientUUID) {
-        return mockedResponseRepository.findAllByClientUUID(clientUUID).stream()
+    public List<MockedMessageDto> getAllMockedResponses(UUID clientUUID){
+        Optional<List<MockedMessage>> listOptional = mockedResponseRepository.findAllByClientUUID(clientUUID);
+        return listOptional.map(mockedMessages -> mockedMessages.stream()
                 .map(mockedMessageMapper::mockedMessageToMockedMessageDto)
-                .collect(Collectors.toList());
+                .collect(Collectors.toList())).orElse(List.of());
     }
 
     /**

Backend/mocked-services/src/main/resources/static/css/common.css

@@ -1,6 +1,8 @@
 @import url('https://necolas.github.io/normalize.css/8.0.1/normalize.css');
+@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
 @import url('r11addons.css');
 @import url('r11tables.css');
 @import url('r11tool.css');
 @import url('r11tooltip.css');
 @import url('r11modal.css');
+@import url('r11flexbox.css')

Backend/mocked-services/src/main/resources/static/css/r11addons.css

@@ -14,6 +14,19 @@
     color: #00000030;
 }
 
+.modification-button.btn-copy {
+    width: 24px;
+    height: 24px;
+    align-content: center;
+    display: grid;
+    justify-content: center;
+}
+
+.modification-button.btn-copy img {
+    width: 100%;
+    height: 100%;
+}
+
 .modification-button.btn-addtile:hover {
     color: #58ac43;
 }
@@ -56,4 +69,4 @@
 .content p {
     margin: 0;
     padding: 0;
-}
+}

Backend/mocked-services/src/main/resources/static/css/r11flexbox.css

@@ -0,0 +1,57 @@
+#editable-block {
+    flex-grow: 0;
+    flex-shrink: 0;
+}
+
+#uuid-edit {
+    display: flex;
+    align-items: center;
+    margin-bottom: 15px;
+}
+
+#uuid-edit-field {
+    display: flex;
+    width: fit-content;
+    align-items: center;
+    width: 70%;
+    margin-right: 10px;
+    
+}
+
+#uuid-edit-field .uuid-inputField-icon{
+    background: none;
+    color: black;
+    border: 0;
+}
+
+#uuid-edit-field .uuid-inputField-icon:hover{
+    color: #2A93B0;
+}
+
+#uuid-input {
+    border: none;
+    width: 100%
+}
+
+#uuid-input:focus {
+    outline: none;
+    
+}
+
+#uuid-validation-strategy input {
+    margin-left: 10px;
+}
+
+.disabled {
+    background-color: #CCD1CF;
+
+}
+
+.disabled #uuid-input {
+    background-color: #CCD1CF;
+
+}
+
+.uuid-inputField-icon-span {
+    font-size: x-large;
+}

Backend/mocked-services/src/main/resources/static/css/r11tool.css

@@ -199,7 +199,7 @@ body {
 }
 
 .action-button {
-    background: rgba(155, 165, 160, 0.507);
+    background: #CCD1CF;
     border:1px solid rgba(186, 197, 191, 0.507);
     border-radius: 5px;
     color: white;

Backend/mocked-services/src/main/resources/static/html/mock.html

@@ -17,6 +17,32 @@
                 <div>
                     <h1>MockedServices <span class="version-span">v1.0.0</span></h1>
                 </div>
+                <div>
+                    <label for="uuid-input" class="block-display">UUID</label>
+                    <div id="uuid-edit">
+                        <div id="uuid-edit-field" class="bordered-field disabled">
+                            <input id="uuid-input" disabled onfocusout="changeUUID(this);" value="UUID" />
+                            <button onclick="copyUUIDToClipboard();" class="uuid-inputField-icon modification-button flex-item btn-copy action-button"> 
+                                <span class="material-icons uuid-inputField-icon-span ">content_copy</span> 
+                            </button>
+                        </div>
+                        <div id="editableBlock">
+                            <input type="checkbox" onchange="changeEditionOfUUID(this)" name="editable" id="editable" value="false"/>
+                            <label for="editable">Editable</label>
+                        </div>
+                    </div>
+                    
+                    <div class="hiddable" id="uuid-validation-strategy">
+                        <label><b>UUID generation strategy:</b></label>
+                        
+                        <input type="radio" checked name="uuid-validation-type" value="new" id="generateNew"/>
+                        <label for="generateNew">Generate new UUID</label>
+                        
+                        <input type="radio" name="uuid-validation-type" value="restore" id="restore"/>
+                        <label for="restore">Restore previous UUID</label>
+                    </div>
+
+                </div>
                 <div>
                     <!-- h2 -->
                     <div id="basicItemData" class="hiddable active"><h2>Your Message</h2></div>
@@ -196,6 +222,25 @@
                         <p>This button adds new message.</p>
                     </div>
                 </div>
+                <div class="large-vertical-margin">
+                    <div id="UUIDFieldTip" class="tip">
+                        <h3>UUID</h3>
+                        <p>UUID is an Unique ID that represents you in API. By UUID your messages is saved in database. You can change it to access your previous configuration of mocked messages</p>
+                    </div>
+                </div>
+                <div class="large-vertical-margin">
+                    <div id="UUIDValidationStrategyTip" class="tip">
+                        <h3>UUID Checking Strategy</h3>
+                        <p>When you provide invalid UUID you can choose what do with it. You can generate new UUID or restore previous.</p>
+                    </div>
+                </div>
+                <div class="large-vertical-margin">
+                    <div id="UUIDEditionTip" class="tip">
+                        <h3>UUID Edition</h3>
+                        <p>Unlocks you ability to edit UUID</p>
+                    </div>
+                </div>
+
                 <div class="large-vertical-margin">
                     <div id="messagesTip" class="tip">
                         <h3>Message</h3>
@@ -242,6 +287,16 @@
         </div>
     </div>
     <div id="overlay"></div>
+    <div id="modal-uuidChanged" class="modal">
+        <div class="header">
+            <div>Change UUID info<i class="r-exclamation"></i></div>
+            <button onclick="window.location.reload();">&times;</button>
+        </div>
+        <div id="changeUUIDSuccess" class="body hiddable uuid-modal-body">Your message UUID has been changed successfully.</div>
+        <div id="newUUID" class="body hiddable uuid-modal-body">You provided wrong UUID! <br> New UUID has been generated!</div>
+        <div id="restoredUUID" class="body hiddable uuid-modal-body">You provided wrong UUID! <br> Old UUID has been restored!</div>
+        <div id="noChgUUID" class="body hiddable uuid-modal-body">You doesn't provide any change to UUID!</div>
+    </div>
     <div id="modal-confirm" class="modal">
         <div class="header">
             <div>Message saved<i class="r-exclamation"></i></div>
@@ -260,10 +315,10 @@
             <button>No</button>
         </div>
     </div>
-    <script type="text/javascript" src="/js/modal.js"></script>
-    <script type="text/javascript" src="/js/uianimation.js"></script>
-    <script type="text/javascript" src="/js/datatransfer.js"></script>
-    <script type="text/javascript" src="/js/historyloader.js"></script>
-    <script type="text/javascript" src="/js/fiddle.js"></script>
+    <script type="text/javascript" src="../js/modal.js"></script>
+    <script type="text/javascript" src="../js/uianimation.js"></script>
+    <script type="text/javascript" src="../js/datatransfer.js"></script>
+    <script type="text/javascript" src="../js/historyloader.js"></script>
+    <script type="text/javascript" src="../js/fiddle.js"></script>
 </body>
 </html>

Backend/mocked-services/src/main/resources/static/js/datatransfer.js

@@ -102,6 +102,7 @@ const idToDisplay = function(){
 }
 
 function refreshData(){
+    $("#uuid-input").val(clientUUID);
     fillMessageList();
     console.log("List initiated");
     let id = idToDisplay();
@@ -226,12 +227,99 @@ function fillStaticFields(uuid, id, mediaType, body, httpStatus){
     let linkHtml = '<a class="hyperlink" target="_blank" href="'+link+'">'+link+'</a>';
     $('#messageLink').html(linkHtml);
     $('#httpStatus').val(httpStatus);
+    $('#uuid-input').val(uuid);
     $('#typeSelector').val(mediaType);
     $('#bodyEditor').val(body);
     $('#mockedMessageId').html(id);
 
 }
 
+function changeEditionOfUUID(element){
+
+    var inputFieldId= "#uuid-input"
+    var inputFieldDiv = "#uuid-edit-field"
+    if(element.checked){
+        $(inputFieldId).removeAttr('disabled');
+        $(inputFieldDiv).removeClass('disabled');
+    } else{
+        $(inputFieldId).attr('disabled', true);
+        $(inputFieldDiv).addClass('disabled');
+    }
+}
+
+function copyUUIDToClipboard(){
+    navigator.clipboard.writeText( document.getElementById('uuid-input').value );
+}
+
+
+async function fetchUUIDCheck(givenUUID , strategy){
+    var newUUID = "UUID" ;
+    url = host + "/api/mock/check/";
+
+    switch(strategy){
+        case "new":{
+            await fetch(url + givenUUID+ "/", { method : "GET" })
+                .then ( response => response.text() )
+                .then ( data => {
+                    newUUID = data;
+                    console.log("newUUID: "+newUUID);
+                } )
+            break;
+        }
+        case "restore":{
+            await fetch(url + givenUUID + "/" + clientUUID + "/" , { method: "GET" })
+                .then (response => response.text() )
+                .then (data => {
+                    newUUID = data;
+                    console.log("restoreUUID: "+newUUID);
+                } )
+            break;
+        }
+    }
+    return newUUID ;
+}
+
+function checkUUIDChars(uuid) {
+    console.log("UUID in check: " + uuid);
+    const regex = new RegExp("^[A-z0-9-]+$");
+    if(regex.test(uuid)){
+        return uuid ;
+    } 
+    return "invalid";
+ }
+
+function changeUUID(element){
+
+    const uuidStrategy = $('input[name="uuid-validation-type"]:checked').val();
+    // const givenUUID = checkUUIDChars(element.value);
+    const givenUUID = element.value;
+    console.log(givenUUID);
+
+    if( givenUUID == clientUUID ){
+        $("#uuid-input").attr("disabled", true);
+        uuidChangeModalDisplay("noChg");
+        return;
+    }
+
+    var newUUID = fetchUUIDCheck(givenUUID , uuidStrategy);
+    var changeMessage = uuidStrategy;
+    newUUID
+    .then( data => {
+        if (givenUUID == data) { 
+            changeMessage = "success";
+        }
+        clientUUID = data;
+        $("#uuid-input").attr("disabled", true);
+        $("#editable").attr("checked", false);
+        
+        uuidChangeModalDisplay(changeMessage);
+        document.cookie = C_UUID + '=' + data ;
+    } )
+    loadCookies();
+    refreshData();
+}
+
+
 function createLink(uuid, id){
     var link =  host + '/api/mock/r/'+uuid+'/'+id;
     return link;

Backend/mocked-services/src/main/resources/static/js/modal.js

@@ -7,6 +7,7 @@ var methodToCall = {
 const overlay = $('#overlay');
 const savedModal = $('#modal-confirm');
 const dataLossModal = $('#modal-query');
+const uuidChangeModal = $('#modal-uuidChanged')
 const dataLossModalYes = dataLossModal.children().eq(2).children().eq(0);
 const dataLossModalNo = dataLossModal.children().eq(2).children().eq(1);
 const allModals = $('.modal');
@@ -23,6 +24,37 @@ const dataLossModalDisplay = function(){
     showModal(dataLossModal);
 }
 
+const uuidChangeModalDisplay = function(addidionalMessage){
+
+    switch(addidionalMessage){
+        case "success":{
+            console.log("success");
+            $(".uuid-modal-body").removeClass("active");
+            $("#changeUUIDSuccess").addClass("active");
+            break;
+        }
+        case "new":{
+            console.log("new UUID");
+            $(".uuid-modal-body").removeClass("active");
+            $("#newUUID").addClass("active");
+            break;
+        }
+        case "restore":{
+            console.log("restoredUUID");
+            $(".uuid-modal-body").removeClass("active");
+            $("#restoredUUID").addClass("active");
+            break;
+        }
+        case "noChg":{
+            console.log("No changes");
+            $(".uuid-modal-body").removeClass("active");
+            $("#noChgUUID").addClass("active");
+            break;
+        }
+    }
+    showModal(uuidChangeModal);
+}
+
 function setMethodToCall(name, id){
     methodToCall.name = name;
     methodToCall.id = id;

Backend/mocked-services/src/main/resources/static/js/uianimation.js

@@ -3,12 +3,14 @@ var selectMenu = $("#selectMenuContent");
 var advancedTab = $("#advanced");
 var basicID = $("#basicItemData")
 var advancedID = $("#advancedItemData");
+var advancedUUIDOptions = $("#uuid-validation-strategy");
 var focusedField = false;
 function changeAdvancedVisibility(){
     if(advancedVisibility){
         selectMenu.removeClass('active');
         advancedTab.removeClass('active');
         advancedID.removeClass('active');
+        advancedUUIDOptions.removeClass('active');
         basicID.addClass('active');
         advancedVisibility = false;
     }
@@ -16,6 +18,7 @@ function changeAdvancedVisibility(){
         selectMenu.addClass('active');
         advancedTab.addClass('active');
         advancedID.addClass('active');
+        advancedUUIDOptions.addClass('active');
         basicID.removeClass('active');
         advancedVisibility = true;
     }
@@ -121,11 +124,18 @@ $('#btnSave').mouseleave(function(){hidTip('btnSaveTip')});
 $('#btnSave').focusout(function(){focusOutTip('btnSaveTip')});
 
 $('#new-tile').mouseover(function(){showTip('btn-newTileTip');});
-$('#new-tile').focusin(function(){focusInTip('btn-newTileTip')});
 $('#new-tile').mouseleave(function(){hidTip('btn-newTileTip')});
 $('#new-tile').focusout(function(){focusOutTip('btn-newTileTip')});
 
 $('#listItems').mouseover(function(){showTip('messagesTip');});
-$('#listItems').focusin(function(){focusInTip('messagesTip')});
 $('#listItems').mouseleave(function(){hidTip('messagesTip')});
-$('#listItems').focusout(function(){focusOutTip('messagesTip')});
+
+
+$('#uuid-edit-field').mouseover(function(){ showTip('UUIDFieldTip') });
+$('#uuid-edit-field').mouseleave(function(){ hidTip('UUIDFieldTip') });
+
+$('#uuid-validation-strategy').mouseover(function(){ showTip('UUIDValidationStrategyTip') });
+$('#uuid-validation-strategy').mouseleave(function(){ hidTip('UUIDValidationStrategyTip') });
+
+$('#editableBlock').mouseover( function(){ showTip('UUIDEditionTip') } );
+$('#editableBlock').mouseleave(function(){ hidTip('UUIDEditionTip') });