From a3ffaa242bb3b9b4c95a8223ca800126887e3a82 Mon Sep 17 00:00:00 2001
From: GitLab Bot <gitlab-bot@gitlab.com>
Date: Mon, 22 Aug 2022 18:10:26 +0000
Subject: Add latest changes from gitlab-org/gitlab@master

---
 .../javascripts/google_cloud/databases/index.js    | 11 -------
 .../google_cloud/databases/init_index.js           | 11 +++++++
 .../javascripts/google_cloud/databases/init_new.js | 11 +++++++
 .../javascripts/google_cloud/databases/panel.vue   | 38 ++++++++++++++++++++++
 4 files changed, 60 insertions(+), 11 deletions(-)
 delete mode 100644 app/assets/javascripts/google_cloud/databases/index.js
 create mode 100644 app/assets/javascripts/google_cloud/databases/init_index.js
 create mode 100644 app/assets/javascripts/google_cloud/databases/init_new.js

(limited to 'app/assets/javascripts/google_cloud')

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>
-- 
cgit v1.2.3