♻️ : use vue components for module cards

replacing thymeleaf templating

src/main/java/io/codeka/gaia/controller/TerraformModuleController.java → src/main/java/io/codeka/gaia/controller/ModulesMVCController.java

@@ -16,28 +16,21 @@
 import java.util.Optional;
 
 @Controller
-public class TerraformModuleController {
+public class ModulesMVCController {
 
     private TerraformModuleRepository terraformModuleRepository;
     private TerraformModuleGitRepository terraformModuleGitRepository;
 
     @Autowired
-    public TerraformModuleController(
+    public ModulesMVCController(
             TerraformModuleRepository terraformModuleRepository,
             TerraformModuleGitRepository terraformModuleGitRepository) {
         this.terraformModuleRepository = terraformModuleRepository;
         this.terraformModuleGitRepository = terraformModuleGitRepository;
     }
 
     @GetMapping("/modules")
-    public String modulesList(Model model, User user){
-        if(user.isAdmin()){
-            model.addAttribute("modules", terraformModuleRepository.findAll());
-        }
-        else{
-            model.addAttribute("modules", terraformModuleRepository.findAllByAuthorizedTeamsContaining(user.getTeam()));
-        }
-
+    public String modulesList(){
         return "modules";
     }
 
@@ -55,7 +48,7 @@ public String module(@PathVariable String id, Model model, User user){
     @PostMapping("/modules/{id}")
     public String saveModule(@ModelAttribute TerraformModule module, Model model, User user){
         terraformModuleRepository.save(module);
-        return modulesList(model, user);
+        return modulesList();
     }
 
     @GetMapping("/modules/{id}/description")

src/main/resources/templates/modules.html

@@ -24,19 +24,8 @@
                         </div>
                     </div>
                 </div>
-                <div class="row column1">
-                    <div class="card-columns">
-                        <div th:each="module: ${modules}" class="card" style="width: 18rem;">
-                            <div class="card-body">
-                                <h5 class="card-title" th:text="${module.name}">Card title</h5>
-                                <img sec:authorize="hasRole('ADMIN')" th:attr="src=@{https://img.shields.io/badge/terraform-{version}-blue.svg?style=flat-square(version=${module.cliVersion})},alt=${module.cliVersion},title=${module.cliVersion}" style="margin-bottom: .75rem" />
-                                <p class="card-text" th:text="${module.description}">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
-                                <a href="#" sec:authorize="hasRole('ADMIN')" th:href="@{/modules/{moduleId}(moduleId=${module.id})}" data-toggle="tooltip" title="Edit this module" class="btn btn-primary"><i class="far fa-edit"></i></a>
-                                <a href="#" th:href="@{/modules/{moduleId}/description(moduleId=${module.id})}" data-toggle="tooltip" title="Detail of this module" class="btn btn-primary"><i class="fas fa-info"></i></a>
-                                <a href="#" th:href="@{/modules/{moduleId}/run(moduleId=${module.id})}" data-toggle="tooltip" title="Run this module" class="btn btn-primary"><i class="fas fa-rocket"></i></a>
-                            </div>
-                        </div>
-                    </div>
+                <div id="modules">
+
                 </div>
             </div>
 
@@ -48,6 +37,21 @@ <h5 class="card-title" th:text="${module.name}">Card title</h5>
     <breadcrumb :page="page"></breadcrumb>
 </template>
 
+<template id="modules-template">
+    <b-card-group deck>
+        <b-card v-for="module in modules"
+                :title="module.name">
+            <b-card-text>
+                <img sec:authorize="hasRole('ADMIN')" :src="'https://img.shields.io/badge/terraform-'+module.cliVersion+'-blue.svg?style=flat-square,alt='+module.cliVersion+',title='+module.cliVersion" style="margin-bottom: .75rem" />
+                <p :text="module.description">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+                <a href="#" sec:authorize="hasRole('ADMIN')" :href="'/modules/'+module.id" data-toggle="tooltip" title="Edit this module" class="btn btn-primary"><i class="far fa-edit"></i></a>
+                <a href="#" :href="'/modules/'+module.id+'/description'" data-toggle="tooltip" title="Detail of this module" class="btn btn-primary"><i class="fas fa-info"></i></a>
+                <a href="#" :href="'/modules/'+module.id+'/run'" data-toggle="tooltip" title="Run this module" class="btn btn-primary"><i class="fas fa-rocket"></i></a>
+            </div>
+        </b-card-text>
+    </b-card-group>
+</template>
+
 <!-- jQuery & bootstrap-->
 <script src="/webjars/jquery/3.0.0/jquery.min.js"></script>
 <script src="/webjars/popper.js/1.14.3/umd/popper.min.js"></script>
@@ -69,6 +73,14 @@ <h5 class="card-title" th:text="${module.name}">Card title</h5>
         });
     });
 
+    $.get("/api/modules").then(modules => {
+       new Vue({
+           el: "#modules",
+           data: () => ({modules}),
+           template: "#modules-template"
+       });
+    });
+
     new Vue({
         el: "#navigation",
         data: () => ({ page: 'modules' }),

src/test/java/io/codeka/gaia/controller/TerraformModuleControllerTest.java → src/test/java/io/codeka/gaia/controller/ModulesMVCControllerTest.java

@@ -16,14 +16,15 @@
 import java.util.Optional;
 
 import static org.assertj.core.api.Assertions.assertThat;
+import static org.junit.jupiter.api.Assertions.assertEquals;
 import static org.junit.jupiter.api.Assertions.assertThrows;
 import static org.mockito.ArgumentMatchers.anyString;
 import static org.mockito.Mockito.*;
 
 @ExtendWith(MockitoExtension.class)
-class TerraformModuleControllerTest {
+class ModulesMVCControllerTest {
 
-    private TerraformModuleController controller;
+    private ModulesMVCController controller;
 
     @Mock
     private TerraformModuleRepository moduleRepository;
@@ -39,7 +40,7 @@ class TerraformModuleControllerTest {
 
     @BeforeEach
     void setup() {
-        controller = new TerraformModuleController(moduleRepository, moduleGitRepository);
+        controller = new ModulesMVCController(moduleRepository, moduleGitRepository);
         standardUser.setTeam(userTeam);
     }
 
@@ -104,29 +105,15 @@ void readme_shouldThrowExceptionIfModuleNotFound() {
     }
 
     @Test
-    void modulesList_shouldShowAllModules_forAdminUser(){
+    void modulesList_shouldShowModulesView(){
         // given
         var model = mock(Model.class);
 
         // when
-        controller.modulesList(model, admin);
+        var res = controller.modulesList();
 
         // then
-        verify(moduleRepository).findAll();
-        verify(model).addAttribute(eq("modules"), any());
-    }
-
-    @Test
-    void modulesList_shouldShowUserTeamModules_forStandardUser(){
-        // given
-        var model = mock(Model.class);
-
-        // when
-        controller.modulesList(model, standardUser);
-
-        // then
-        verify(moduleRepository).findAllByAuthorizedTeamsContaining(userTeam);
-        verify(model).addAttribute(eq("modules"), any());
+        assertEquals("modules", res);
     }
 
     @Test