Add latest changes from gitlab-org/gitlab@master

4 files changed, 60 insertions, 11 deletions

diff --git a/app/assets/javascripts/google_cloud/databases/index.js b/app/assets/javascripts/google_cloud/databases/index.js
deleted file mode 100644
index e240a1116e8..00000000000
--- a/app/assets/javascripts/google_cloud/databases/index.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import Vue from 'vue';
-import Panel from './panel.vue';
-
-export default (containerId = '#js-google-cloud-databases') => {
-  const element = document.querySelector(containerId);
-  const { ...attrs } = JSON.parse(element.getAttribute('data'));
-  return new Vue({
-    el: element,
-    render: (createElement) => createElement(Panel, { attrs }),
-  });
-};
diff --git a/app/assets/javascripts/google_cloud/databases/init_index.js b/app/assets/javascripts/google_cloud/databases/init_index.js
new file mode 100644
index 00000000000..931143833cb
--- /dev/null
+++ b/app/assets/javascripts/google_cloud/databases/init_index.js
@@ -0,0 +1,11 @@
+import Vue from 'vue';
+import Panel from './panel.vue';
+
+export default () => {
+  const element = document.querySelector('#js-google-cloud-databases');
+  const attrs = JSON.parse(element.getAttribute('data'));
+  return new Vue({
+    el: element,
+    render: (createElement) => createElement(Panel, { attrs }),
+  });
+};
diff --git a/app/assets/javascripts/google_cloud/databases/init_new.js b/app/assets/javascripts/google_cloud/databases/init_new.js
new file mode 100644
index 00000000000..3feb2dc2f98
--- /dev/null
+++ b/app/assets/javascripts/google_cloud/databases/init_new.js
@@ -0,0 +1,11 @@
+import Vue from 'vue';
+import Form from './cloudsql/create_instance_form.vue';
+
+export default () => {
+  const element = document.querySelector('#js-google-cloud-databases-cloudsql-form');
+  const attrs = JSON.parse(element.getAttribute('data'));
+  return new Vue({
+    el: element,
+    render: (createElement) => createElement(Form, { attrs }),
+  });
+};
diff --git a/app/assets/javascripts/google_cloud/databases/panel.vue b/app/assets/javascripts/google_cloud/databases/panel.vue
index e2f18c286a5..8b91c508871 100644
--- a/app/assets/javascripts/google_cloud/databases/panel.vue
+++ b/app/assets/javascripts/google_cloud/databases/panel.vue
@@ -1,11 +1,15 @@
 <script>
 import GoogleCloudMenu from '../components/google_cloud_menu.vue';
 import IncubationBanner from '../components/incubation_banner.vue';
+import InstanceTable from './cloudsql/instance_table.vue';
+import ServiceTable from './service_table.vue';
 
 export default {
   components: {
     IncubationBanner,
+    InstanceTable,
     GoogleCloudMenu,
+    ServiceTable,
   },
   props: {
     configurationUrl: {
@@ -20,6 +24,26 @@ export default {
       type: String,
       required: true,
     },
+    cloudsqlPostgresUrl: {
+      type: String,
+      required: true,
+    },
+    cloudsqlMysqlUrl: {
+      type: String,
+      required: true,
+    },
+    cloudsqlSqlserverUrl: {
+      type: String,
+      required: true,
+    },
+    cloudsqlInstances: {
+      type: Array,
+      required: true,
+    },
+    emptyIllustrationUrl: {
+      type: String,
+      required: true,
+    },
   },
 };
 </script>
@@ -34,5 +58,19 @@ export default {
       :deployments-url="deploymentsUrl"
       :databases-url="databasesUrl"
     />
+
+    <service-table
+      alloydb-postgres-url="#"
+      :cloudsql-mysql-url="cloudsqlMysqlUrl"
+      :cloudsql-postgres-url="cloudsqlPostgresUrl"
+      :cloudsql-sqlserver-url="cloudsqlSqlserverUrl"
+      firestore-url="#"
+      memorystore-redis-url="#"
+    />
+
+    <instance-table
+      :cloudsql-instances="cloudsqlInstances"
+      :empty-illustration-url="emptyIllustrationUrl"
+    />
   </div>
 </template>