From 5b2ef99b7c2a0dc3a6dd63249fa74c9a8f26ca00 Mon Sep 17 00:00:00 2001
From: Julien WITTOUCK <julien.wittouck@gmail.com>
Date: Sat, 27 Jun 2020 16:42:04 +0200
Subject: [PATCH] :sparkles: : add create credentials page

---
 .../pages/credentials/credentials-list.vue    | 83 ++++------------
 .../pages/credentials/credentials-routes.js   | 10 ++
 .../app/pages/credentials/credentials.vue     | 95 ++++++-------------
 .../app/pages/credentials/new-credentials.vue | 66 +++++++++++++
 .../client/app/shared/components/index.js     |  1 +
 .../components/providers/provider-header.vue  | 66 +++++++++++++
 6 files changed, 192 insertions(+), 129 deletions(-)
 create mode 100644 src/main/client/app/pages/credentials/new-credentials.vue
 create mode 100644 src/main/client/app/shared/components/providers/provider-header.vue

diff --git a/src/main/client/app/pages/credentials/credentials-list.vue b/src/main/client/app/pages/credentials/credentials-list.vue
index 9e4b25fc0..aeddb9c78 100644
--- a/src/main/client/app/pages/credentials/credentials-list.vue
+++ b/src/main/client/app/pages/credentials/credentials-list.vue
@@ -14,31 +14,21 @@
         v-for="credentials in credentialsList"
         :key="credentials.id"
         :title="credentials.name"
-        style="max-width: 20rem;"
-        :header-class="credentials.provider"
       >
         <template v-slot:header>
-          <b-img
-            :src="imageUrl(credentials)"
-            class="rounded-logo"
-            rounded="circle"
-            width="80px"
-            height="80px"
-            left
-          />
-          <p class="providerName">
-            {{ providerName(credentials) }}
-          </p>
+          <app-provider-header :provider="credentials.provider" />
         </template>
 
-        <b-button
-          :to="{ name: 'credentials', params: { credentialsId: credentials.id } }"
-          title="Edit this credentials"
-          variant="primary"
-          class="mr-1"
-        >
-          <font-awesome-icon icon="edit" />
-        </b-button>
+        <template v-slot:footer>
+          <b-button
+            :to="{ name: 'credentials', params: { credentialsId: credentials.id } }"
+            title="Edit this credentials"
+            variant="primary"
+            class="mr-1"
+          >
+            <font-awesome-icon icon="edit" />
+          </b-button>
+        </template>
       </b-card>
     </b-card-group>
   </div>
@@ -47,9 +37,15 @@
 <script>
   import { getCredentialsList } from '@/shared/api/credentials-api';
 
+  import { AppProviderHeader } from '@/shared/components';
+
   export default {
     name: 'Credentials',
 
+    components: {
+      AppProviderHeader,
+    },
+
     data: function data() {
       return {
         credentialsList: [],
@@ -59,54 +55,15 @@
     async created() {
       this.credentialsList = await getCredentialsList();
     },
-
-    methods: {
-      imageUrl(credentials) {
-        // eslint-disable-next-line global-require, import/no-dynamic-require
-        return require(`@/assets/images/providers/logos/${credentials.provider}.png`);
-      },
-
-      providerName(credentials) {
-        return {
-          aws: 'AWS',
-          google: 'GCP',
-          azurerm: 'Azure',
-        }[credentials.provider];
-      },
-    },
-
   };
 </script>
 
 <style scoped>
   .card-header {
-    display: flex;
-    align-items: center;
-  }
-
-  .card-header img {
-    margin-right: 1rem;
-  }
-
-  .card-header.google {
-    background-color: #2f6fd8;
-  }
-
-  .card-header.aws {
-    background-color: #ea8c00;
-  }
-
-  .card-header.azurerm {
-    background-color: #007cc1;
-  }
-
-  .rounded-logo {
-    background-color: white;
+    padding: 0;
   }
 
-  .providerName {
-    color: white;
-    font-weight: bold;
-    font-size: x-large;
+  .card-title {
+    margin: 0;
   }
 </style>
diff --git a/src/main/client/app/pages/credentials/credentials-routes.js b/src/main/client/app/pages/credentials/credentials-routes.js
index 7274aab51..ff84f6d62 100644
--- a/src/main/client/app/pages/credentials/credentials-routes.js
+++ b/src/main/client/app/pages/credentials/credentials-routes.js
@@ -9,6 +9,16 @@ const credentialsRoutes = [
       title: 'Gaia - Credentials',
     },
   },
+  {
+    path: '/credentials/new',
+    name: 'new_credentials',
+    component: () => import(/* webpackChunkName: "chunk-credentials" */ '@/pages/credentials/new-credentials'),
+    meta: {
+      authorities: ['ROLE_USER'],
+      breadcrumb: [{ text: 'Credentials', to: { name: 'credentialsList' } }, { text: 'New Credentials' }],
+      title: 'Gaia - New credentials edition',
+    },
+  },
   {
     path: '/credentials/:credentialsId',
     name: 'credentials',
diff --git a/src/main/client/app/pages/credentials/credentials.vue b/src/main/client/app/pages/credentials/credentials.vue
index 4dadc025d..5466e85c6 100644
--- a/src/main/client/app/pages/credentials/credentials.vue
+++ b/src/main/client/app/pages/credentials/credentials.vue
@@ -2,24 +2,13 @@
   <div>
     <b-card
       v-if="credentials"
-      :header-class="credentials.provider"
     >
       <b-card-title>
         Credentials : {{ credentials.name }}
       </b-card-title>
 
       <template v-slot:header>
-        <b-img
-          :src="imageUrl"
-          class="rounded-logo"
-          rounded="circle"
-          width="80px"
-          height="80px"
-          left
-        />
-        <p class="providerName">
-          {{ providerName(credentials) }}
-        </p>
+        <app-provider-header :provider="credentials.provider" />
       </template>
 
       <b-form-group
@@ -47,22 +36,24 @@
         :credentials="credentials"
       />
 
-      <b-button
-        title="Save"
-        variant="success"
-        class="mb-4"
-        @click="save"
-      >
-        <font-awesome-icon icon="save" /> Save
-      </b-button>
+      <template v-slot:footer>
+        <b-button
+          title="Save"
+          variant="success"
+          @click="save"
+        >
+          <font-awesome-icon icon="save" /> Save
+        </b-button>
+      </template>
     </b-card>
   </div>
 </template>
 
 <script>
-  import { getCredentials, updateCredentials } from '@/shared/api/credentials-api';
+  import { getCredentials, createCredentials, updateCredentials } from '@/shared/api/credentials-api';
   import { displayNotification } from '@/shared/services/modal-service';
 
+  import AppProviderHeader from '@/shared/components/providers/provider-header.vue';
   import AppCredentialsAws from '@/pages/credentials/providers/credentials-aws.vue';
   import AppCredentialsAzurerm from '@/pages/credentials/providers/credentials-azurerm.vue';
   import AppCredentialsGoogle from '@/pages/credentials/providers/credentials-google.vue';
@@ -74,50 +65,43 @@
       AppCredentialsAws,
       AppCredentialsAzurerm,
       AppCredentialsGoogle,
+      AppProviderHeader,
     },
 
     props: {
       credentialsId: {
         type: String,
-        required: true,
+        default: null,
       },
-    },
-
-    data: function data() {
-      return {
-        credentials: null,
-      };
-    },
-
-    computed: {
-      imageUrl() {
-        // eslint-disable-next-line global-require, import/no-dynamic-require
-        return require(`@/assets/images/providers/logos/${this.credentials.provider}.png`);
+      credentials: {
+        type: Object,
+        default: () => null,
       },
     },
 
     async created() {
-      this.credentials = await getCredentials(this.credentialsId);
+      if (this.credentialsId) {
+        this.credentials = await getCredentials(this.credentialsId);
+      }
     },
 
     methods: {
-      providerName(credentials) {
-        return {
-          aws: 'AWS',
-          google: 'GCP',
-          azurerm: 'Azure',
-        }[credentials.provider];
-      },
-
       notEmpty(field) {
         return typeof field !== 'undefined' && field !== null && field.trim() !== '';
       },
 
       async save() {
-        await updateCredentials(this.credentials)
+        await this.createOrUpdate()
           .then(() => displayNotification(this, { message: 'Credentials saved', variant: 'success' }))
           .catch(({ error, message }) => displayNotification(this, { title: error, message, variant: 'danger' }));
       },
+
+      async createOrUpdate() {
+        if (!this.credentials.id) {
+          return createCredentials(this.credentials);
+        }
+        return updateCredentials(this.credentials);
+      },
     },
 
   };
@@ -127,31 +111,10 @@
   .card-header {
     display: flex;
     align-items: center;
+    padding: 0;
   }
 
   .card-header img {
     margin-right: 1rem;
   }
-
-  .card-header.google {
-    background-color: #2f6fd8;
-  }
-
-  .card-header.aws {
-    background-color: #ea8c00;
-  }
-
-  .card-header.azurerm {
-    background-color: #007cc1;
-  }
-
-  .rounded-logo {
-    background-color: white;
-  }
-
-  .providerName {
-    color: white;
-    font-weight: bold;
-    font-size: x-large;
-  }
 </style>
diff --git a/src/main/client/app/pages/credentials/new-credentials.vue b/src/main/client/app/pages/credentials/new-credentials.vue
new file mode 100644
index 000000000..d9eb44314
--- /dev/null
+++ b/src/main/client/app/pages/credentials/new-credentials.vue
@@ -0,0 +1,66 @@
+<template>
+  <div>
+    <div v-if="credentials.provider == null">
+      <h1>Choose Terraform provider</h1>
+      <b-card-group columns>
+        <a
+          v-for="provider in providerList"
+          :key="provider"
+          @click="credentials.provider = provider"
+        >
+          <b-card
+            header-class="provider-card"
+            no-body
+          >
+            <template slot="header">
+              <app-provider-header
+                :provider="provider"
+                style="width: 100%;"
+              />
+            </template>
+          </b-card>
+        </a>
+      </b-card-group>
+    </div>
+    <app-credentials
+      v-if="credentials.provider != null"
+      :credentials="credentials"
+    />
+  </div>
+</template>
+
+<script>
+  import { AppProviderHeader } from '@/shared/components';
+  import AppCredentials from '@/pages/credentials/credentials.vue';
+
+  export default {
+    name: 'NewCredentials',
+    components: {
+      AppProviderHeader,
+      AppCredentials,
+    },
+    data: () => (
+      {
+        credentials: {
+          provider: null,
+        },
+        providerList: ['aws', 'azurerm', 'google'],
+      }
+    ),
+  };
+</script>
+
+<style>
+  .card-header {
+    display: flex;
+    align-items: center;
+  }
+
+  a {
+    cursor: pointer;
+  }
+
+  .provider-card {
+    padding: 0;
+  }
+</style>
diff --git a/src/main/client/app/shared/components/index.js b/src/main/client/app/shared/components/index.js
index 6ba9217ab..9a20f3f68 100644
--- a/src/main/client/app/shared/components/index.js
+++ b/src/main/client/app/shared/components/index.js
@@ -8,3 +8,4 @@ export { default as AppFormTypeahead } from '@/shared/components/typeahead/form-
 export { default as AppMarkdown } from '@/shared/components/markdown/markdown.vue';
 export { default as AppConsole } from '@/shared/components/console/console.vue';
 export { default as AppProviderLogo } from '@/shared/components/providers/provider-logo.vue';
+export { default as AppProviderHeader } from '@/shared/components/providers/provider-header.vue';
diff --git a/src/main/client/app/shared/components/providers/provider-header.vue b/src/main/client/app/shared/components/providers/provider-header.vue
new file mode 100644
index 000000000..4b310f4cf
--- /dev/null
+++ b/src/main/client/app/shared/components/providers/provider-header.vue
@@ -0,0 +1,66 @@
+<template>
+  <div
+    :class="provider"
+    style="width: 100%; padding: 1.25rem;"
+  >
+    <app-provider-logo
+      :provider="provider"
+      size="80px"
+      style="margin-right: 1rem"
+    />
+    <p class="providerName mb-0">
+      {{ providerName }}
+    </p>
+  </div>
+</template>
+
+<script>
+  import { AppProviderLogo } from '@/shared/components';
+
+  export default {
+    name: 'ProviderHeader',
+    components: {
+      AppProviderLogo,
+    },
+    props: {
+      provider: {
+        type: String,
+        required: true,
+      },
+    },
+    computed: {
+      providerName() {
+        return {
+          aws: 'AWS',
+          google: 'GCP',
+          azurerm: 'Azure',
+        }[this.provider];
+      },
+    },
+  };
+</script>
+
+<style scoped>
+  div {
+    display: flex;
+    align-items: center;
+  }
+
+  .aws {
+    background-color: #ea8c00;
+  }
+
+  .azurerm {
+    background-color: #007cc1;
+  }
+
+  .google {
+    background-color: #2f6fd8;
+  }
+
+  .providerName {
+    color: white;
+    font-weight: bold;
+    font-size: x-large;
+  }
+</style>