Skip to content

Commit

Permalink
✨ : add import module screen
Browse files Browse the repository at this point in the history
  • Loading branch information
@juwit
juwit committed Jan 9, 2020
1 parent 1a6647e commit e2075ed
Show file tree
Hide file tree
Showing 6 changed files with 260 additions and 8 deletions.
5 changes: 5 additions & 0 deletions src/main/java/io/codeka/gaia/modules/controller/ModulesMVCController.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,11 @@ public String modulesList(){
return "modules";
}

@GetMapping("/modules/import")
public String importModule() {
return "modules_import";
}

@GetMapping("/modules/{id}")
public String module(@PathVariable String id, Model model, User user){
var module = terraformModuleRepository.findById(id).orElseThrow(ModuleNotFoundException::new);
Expand Down
2 changes: 1 addition & 1 deletion src/main/resources/static/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2274,7 +2274,7 @@ i.icon {
/** button section **/

.btn {
font-size: 14px;
/*font-size: 14px;*/
}

.button_sction {
Expand Down
11 changes: 9 additions & 2 deletions src/main/resources/templates/modules.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,9 +27,16 @@
</div>
</div>
</div>
<div id="modules">

<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>
Expand Down
235 changes: 235 additions & 0 deletions src/main/resources/templates/modules_import.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,235 @@
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="layout/header :: header(~{::title})">

<title>Gaia - Import Module</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>
</div>
</div>
<div id="app"></div>
</div>

</div>
</div>
</div>

<style>
.btn-gitlab {
color: #fca326;
}

.btn-gitlab:hover {
background-color: #fca326;
border-color: #fca326;
color: #fff;
}

.btn-github {
color: #333;
}

.btn-github:hover {
background-color: #333;
border-color: #333;
color: #fff;
}
</style>

<template id="template">
<div class="row">
<div class="col-md-4">
<b-card no-body>
<b-button size="lg" variant="outline-secondary" class="btn-github" squared @click="toggle('github')">
<i class="fab fa-github"></i> from Github
</b-button>

<repository-import v-if="selected == 'github'" :registry="'github'"></repository-import>

<template v-slot:footer>
<em>Import an existing module code from existing Github repository</em>
</template>
</b-card>
</div>
<!-- <div class="col-md-4">-->
<!-- <b-card no-body>-->
<!-- <b-button size="lg" variant="outline-secondary" class="btn-gitlab" squared @click="toggle('gitlab')">-->
<!-- <i class="fab fa-gitlab"></i> from Gitlab-->
<!-- </b-button>-->

<!-- <repository-import v-if="selected == 'gitlab'" :registry="'gitlab'"></repository-import>-->

<!-- <template v-slot:footer>-->
<!-- <em>Import an existing module code from existing Gitlab repository</em>-->
<!-- </template>-->
<!-- </b-card>-->
<!-- </div>-->
<div class="col-md-4">
<b-card no-body>
<b-button size="lg" variant="outline-danger" squared @click="toggle('manual')">
<i class="fab fa-superpowers"></i> manually
</b-button>

<manual-import v-if="selected == 'manual'"></manual-import>

<template v-slot:footer>
<em>Import a module manually (only for users with superpowers)</em>
</template>
</b-card>
</div>
</div>
</template>

<template id="repository-import">
<b-card>
<b-card-text>
<label for="repoSelect">Select your {{registry}} repository</label>
<vue-multiselect
v-model="selectedRepository"
id="repoSelect"
placeholder="Type to search"
:options="repositories"
:loading="isLoading"
@open="search">
<span slot="noResult">Oops! No repository found. </span>
</vue-multiselect>
</b-card-text>

<b-button :disabled="! selectedRepository" href="#" variant="primary" @click="importRepository">Import this repository !</b-button>
</b-card>
</template>

<template id="manual-import">
<b-card>
<b-card-text>
<b-form-group
label="Enter the module name"
label-for="module-name">
<b-form-input id="module-name" v-model="moduleName" trim></b-form-input>
</b-form-group>
</b-card-text>

<b-button :disabled="! moduleName" href="#" variant="primary" @click="createModule">Import manually</b-button>
</b-card>
</template>

<template id="template-navigation">
<breadcrumb :page="page"></breadcrumb>
</template>

<div th:replace="vue_templates/sidebar"></div>

<div th:replace="helpers/messenger"></div>

<div th:replace="vue_templates/breadcrumb"></div>

<script src="/js/ansi_to_html.js"></script>

<script th:inline="javascript" type="application/ecmascript">
Vue.component('vue-multiselect', window.VueMultiselect.default);

Vue.component('manual-import', {
template: "#manual-import",
data: () => ({
moduleName: null,
}
),
methods: {
createModule: function(){
let module = {
name: this.moduleName
};
$.ajax({
url: `/api/modules`,
data: JSON.stringify(module),
contentType: "application/json",
method: "POST"
}).then(module => {
window.location = `/modules/${module.id}`
});
}
}
});

Vue.component('repository-import', {
template: "#repository-import",
props: ["registry"],
data: () => ({
selectedRepository: null,
repositories: [],
isLoading: false,
loaded: false,
isImporting: false
}
),
methods: {
search(query) {
if(! this.loaded){
this.isLoading = true;
$.get(`/api/registries/${this.registry}/repositories`).then(response => {
this.repositories = response;
this.loaded = true;
this.isLoading = false;
})
}
},
importRepository: function() {
this.isImporting = true;
$.get(`/api/registries/${this.registry}/repositories/${this.selectedRepository}/import`).then(module => {
window.location = `/modules/${module.id}`
})
}
}
});

new Vue({
el: "#app",
template: "#template",
data: () => ({
selected: "none"
}),
methods: {
toggle: function(type) {
this.selected = type
}
}
});


</script>

<script th:inline="javascript" type="application/ecmascript">
new Vue({
el: "#navigation",
data: () => ({page: 'module_import'}),
template: "#template-navigation",
});
</script>

</body>
</html>
1 change: 1 addition & 0 deletions src/main/resources/templates/vue_templates/breadcrumb.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
new_stack: [{text: 'Modules', href: '/modules'}, {text: 'Stack creation'}],
module: [{text: 'Modules', href: '/modules'}, {text: 'Module edition'}],
module_description: [{text: 'Modules', href: '/modules'}, {text: 'Module description'},],
module_import: [{text: 'Modules', href: '/modules'}, {text: 'Module import'},],
stacks: [{text: 'Stacks'}],
stack: [{text: 'Stacks', href: '/stacks'}, {text: 'Stack'}],
users: [{text: 'Users'}],
Expand Down
14 changes: 9 additions & 5 deletions src/test/java/io/codeka/gaia/modules/controller/ModulesMVCControllerTest.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,8 +92,6 @@ void readme_shouldReturnReadmeContent() {

@Test
void readme_shouldThrowExceptionIfModuleNotFound() {
// given

// when
when(moduleRepository.findById(anyString())).thenReturn(Optional.empty());
assertThrows(NoSuchElementException.class, () -> controller.readme("TEST"));
Expand All @@ -105,16 +103,22 @@ void readme_shouldThrowExceptionIfModuleNotFound() {

@Test
void modulesList_shouldShowModulesView(){
// given
var model = mock(Model.class);

// when
var res = controller.modulesList();

// then
assertEquals("modules", res);
}

@Test
void importModule_shouldShowImportModuleView(){
// when
var res = controller.importModule();

// then
assertEquals("modules_import", res);
}

@Test
void module_shouldShowModule_forAuthorizedUser(){
// given
Expand Down

0 comments on commit e2075ed

Please sign in to comment.