♻️ : migrate the modules page

src/main/client/app/pages/modules/modules.vue

@@ -1,13 +1,77 @@
 <template>
-  <div>This is not the final modules page xD</div>
+  <b-card-group columns>
+    <b-card
+      v-for="module in modules"
+      :key="module.id"
+      :title="module.name"
+    >
+      <b-card-text>
+        <app-cli-badge
+          :cli="module.terraformImage"
+          badge-style="flat-square"
+          style="margin-bottom: .75rem"
+        />
+        <p>{{ module.description }}</p>
+
+        <p v-if="module.estimatedMonthlyCost">
+          Estimated monthly cost :
+          <b-badge variant="info">
+            {{ module.estimatedMonthlyCost }} $
+          </b-badge>
+        </p>
+      </b-card-text>
+
+      <b-button
+        :to="'/modules/'+module.id"
+        title="Edit this module"
+        variant="primary"
+        class="mr-1"
+      >
+        <font-awesome-icon icon="edit" />
+      </b-button>
+
+      <b-button
+        :to="'/modules/'+module.id+'/description'"
+        title="Detail of this module"
+        variant="primary"
+        class="mr-1"
+      >
+        <font-awesome-icon icon="info" />
+      </b-button>
+
+      <b-button
+        :to="'/modules/'+module.id+'/run'"
+        title="Run this module"
+        variant="primary"
+        class="mr-1"
+      >
+        <font-awesome-icon icon="rocket" />
+      </b-button>
+    </b-card>
+  </b-card-group>
 </template>
 
 <script>
+  import axios from 'axios';
+  import { AppCliBadge } from '@/shared/components';
+
   export default {
     name: 'AppModules',
-  };
-</script>
 
-<style scoped>
+    components: {
+      AppCliBadge,
+    },
+
+    data: function data() {
+      return {
+        modules: [],
+      };
+    },
+
+    async created() {
+      const response = await axios.get('/api/modules');
+      this.modules = response.data;
+    },
 
-</style>
+  };
+</script>

src/main/client/app/shared/components/cli-badge.vue

@@ -0,0 +1,28 @@
+<template>
+  <img
+    :src="'https://img.shields.io/badge/terraform-' + version + '-blue.svg?style=' + badgeStyle"
+    :alt="version"
+    :title="version"
+  >
+</template>
+
+<script>
+  export default {
+    name: 'AppCliBadge',
+    props: {
+      cli: {
+        type: Object,
+        required: true,
+      },
+      badgeStyle: {
+        type: String,
+        required: true,
+      },
+    },
+    computed: {
+      version() {
+        return this.cli.repository === 'hashicorp/terraform' ? this.cli.tag : 'custom';
+      },
+    },
+  };
+</script>

src/main/client/app/shared/components/index.js

@@ -3,3 +3,4 @@ export { default as AppPageForbidden } from '@/shared/components/error-pages/pag
 export { default as AppTopBar } from '@/shared/components/topbar/top-bar.vue';
 export { default as AppSideBar } from '@/shared/components/sidebar/side-bar.vue';
 export { default as AppBreadcrumb } from '@/shared/components/breadcrumb/breadcrumb.vue';
+export { default as AppCliBadge } from '@/shared/components/cli-badge.vue';

src/main/client/app/shared/config/bootstrap-vue-config.js

@@ -1,6 +1,8 @@
 import Vue from 'vue';
 import {
   BreadcrumbPlugin,
+  ButtonPlugin,
+  CardPlugin,
   DropdownPlugin,
   FormCheckboxPlugin,
   FormInputPlugin,
@@ -12,6 +14,8 @@ import {
 
 export default {
   init: () => {
+    Vue.use(ButtonPlugin);
+    Vue.use(CardPlugin);
     Vue.use(FormPlugin);
     Vue.use(FormInputPlugin);
     Vue.use(FormCheckboxPlugin);

src/main/client/app/shared/config/fontawesome-config.js

@@ -4,6 +4,7 @@ import {
   faAngleDoubleLeft,
   faAngleDoubleRight,
   faCog,
+  faEdit,
   faLayerGroup,
   faLock,
   faObjectGroup,
@@ -12,6 +13,8 @@ import {
   faTag,
   faUser,
   faUserFriends,
+  faInfo,
+  faRocket,
 } from '@fortawesome/free-solid-svg-icons';
 import {
   faGithub,
@@ -23,6 +26,7 @@ import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 export default {
   init: () => {
     library.add(
+      faEdit,
       faUser,
       faLock,
       faGithub,
@@ -37,6 +41,8 @@ export default {
       farUser,
       faAngleDoubleLeft,
       faAngleDoubleRight,
+      faInfo,
+      faRocket,
     );
     Vue.component('font-awesome-icon', FontAwesomeIcon);
   },

src/main/java/io/codeka/gaia/modules/controller/ModulesMVCController.java

@@ -30,11 +30,6 @@ public ModulesMVCController(
         this.terraformModuleGitRepository = terraformModuleGitRepository;
     }
 
-//    @GetMapping("/modules")
-    public String modulesList(){
-        return "modules";
-    }
-
 //    @GetMapping("/modules/import")
     public String importModule() {
         return "modules_import";

src/test/java/io/codeka/gaia/modules/controller/ModulesMVCControllerTest.java

@@ -101,15 +101,6 @@ void readme_shouldThrowExceptionIfModuleNotFound() {
         verifyNoInteractions(moduleGitRepository);
     }
 
-    @Test
-    void modulesList_shouldShowModulesView(){
-        // when
-        var res = controller.modulesList();
-
-        // then
-        assertEquals("modules", res);
-    }
-
     @Test
     void importModule_shouldShowImportModuleView(){
         // when