From c1d939e5602b3dc526ee426c404214ad2294f4a4 Mon Sep 17 00:00:00 2001
From: Julien WITTOUCK <julien.wittouck@gmail.com>
Date: Tue, 10 Mar 2020 13:31:01 +0100
Subject: [PATCH] :recycle: : migrate the modules page

---
 src/main/client/app/pages/modules/modules.vue |  74 ++++++++++++-
 .../app/shared/components/cli-badge.vue       |  28 +++++
 .../client/app/shared/components/index.js     |   1 +
 .../app/shared/config/bootstrap-vue-config.js |   4 +
 .../app/shared/config/fontawesome-config.js   |   6 +
 .../controller/ModulesMVCController.java      |   5 -
 src/main/resources/templates/modules.html     | 103 ------------------
 .../controller/ModulesMVCControllerTest.java  |   9 --
 8 files changed, 108 insertions(+), 122 deletions(-)
 create mode 100644 src/main/client/app/shared/components/cli-badge.vue
 delete mode 100644 src/main/resources/templates/modules.html

diff --git a/src/main/client/app/pages/modules/modules.vue b/src/main/client/app/pages/modules/modules.vue
index 6db09990b..627ff53ae 100644
--- a/src/main/client/app/pages/modules/modules.vue
+++ b/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>
diff --git a/src/main/client/app/shared/components/cli-badge.vue b/src/main/client/app/shared/components/cli-badge.vue
new file mode 100644
index 000000000..74cc85d12
--- /dev/null
+++ b/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>
diff --git a/src/main/client/app/shared/components/index.js b/src/main/client/app/shared/components/index.js
index 4c844aa6c..d69b15436 100644
--- a/src/main/client/app/shared/components/index.js
+++ b/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';
diff --git a/src/main/client/app/shared/config/bootstrap-vue-config.js b/src/main/client/app/shared/config/bootstrap-vue-config.js
index c0ca330c4..ad2d447cf 100644
--- a/src/main/client/app/shared/config/bootstrap-vue-config.js
+++ b/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);
diff --git a/src/main/client/app/shared/config/fontawesome-config.js b/src/main/client/app/shared/config/fontawesome-config.js
index c694563ee..d000ea962 100644
--- a/src/main/client/app/shared/config/fontawesome-config.js
+++ b/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);
   },
diff --git a/src/main/java/io/codeka/gaia/modules/controller/ModulesMVCController.java b/src/main/java/io/codeka/gaia/modules/controller/ModulesMVCController.java
index 6a5dcd034..f03ec99c3 100644
--- a/src/main/java/io/codeka/gaia/modules/controller/ModulesMVCController.java
+++ b/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";
diff --git a/src/main/resources/templates/modules.html b/src/main/resources/templates/modules.html
deleted file mode 100644
index 91c62e95e..000000000
--- a/src/main/resources/templates/modules.html
+++ /dev/null
@@ -1,103 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" xmlns:th="http://www.thymeleaf.org">
-<head th:replace="layout/header :: header(~{::title})">
-
-    <title>Gaia - Modules</title>
-
-</head>
-<body class="dashboard dashboard_2">
-
-<div th:replace="layout/include_scripts"></div>
-
-<div class="full_container">
-    <div class="inner_container">
-
-        <div id="sidebar" th:class="${sidebar_collapsed ? 'active' : ''}"></div>
-
-        <!-- right content -->
-        <div id="content">
-
-            <div th:replace="~{layout/topbar}"></div>
-
-            <div class="container-fluid">
-                <div class="row column_title">
-                    <div class="col-md-12">
-                        <div class="page_title">
-                            <div id="navigation"></div>
-                        </div>
-                    </div>
-                </div>
-                <div class="row column_title">
-                    <div class="col-md-12">
-                        <div id="controls">
-                            <div class="page_controls">
-                                <a href="/modules/import" class="btn btn-success"><i class="far fa-save"></i> Import Module</a>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div id="modules"></div>
-            </div>
-
-        </div>
-    </div>
-</div>
-
-<template id="template-navigation">
-    <breadcrumb :page="page"></breadcrumb>
-</template>
-
-<template id="modules-template">
-    <b-card-group columns>
-        <b-card v-for="module in modules"
-                :title="module.name">
-            <b-card-text>
-                <cli-badge :cli="module.terraformImage" badge-style="flat-square" style="margin-bottom: .75rem"></cli-badge>
-                <p>{{module.description}}</p>
-
-                <p v-if="module.estimatedMonthlyCost">Estimated monthly cost : <b-badge variant="info">{{module.estimatedMonthlyCost}} $</b-badge></p>
-            </b-card-text>
-
-            <a href="#" v-if="isAuthorized(module)" :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>
-        </b-card>
-    </b-card-group>
-</template>
-
-<div th:replace="vue_templates/components/breadcrumb"></div>
-<div th:replace="vue_templates/components/sidebar"></div>
-<div th:replace="vue_templates/components/cli-badge"></div>
-
-<script type="application/ecmascript" th:inline="javascript">
-    $(document).ready(function () {
-        $(function () {
-            $('[data-toggle="tooltip"]').tooltip()
-        });
-    });
-
-    Vue.prototype.$user = [[${user}]];
-
-    $.get("/api/modules").then(modules => {
-       new Vue({
-           el: "#modules",
-           data: () => ({modules}),
-           template: "#modules-template",
-           methods: {
-               isAuthorized(module){
-                   return module.moduleMetadata.createdBy.username === this.$user.username
-                       || this.$user.username === 'admin'
-               }
-           }
-       });
-    });
-
-    new Vue({
-        el: "#navigation",
-        data: () => ({ page: 'modules' }),
-        template: "#template-navigation",
-    });
-</script>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/src/test/java/io/codeka/gaia/modules/controller/ModulesMVCControllerTest.java b/src/test/java/io/codeka/gaia/modules/controller/ModulesMVCControllerTest.java
index df480db19..402853cd9 100644
--- a/src/test/java/io/codeka/gaia/modules/controller/ModulesMVCControllerTest.java
+++ b/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