Add latest changes from gitlab-org/gitlab@master

3 files changed, 428 insertions, 0 deletions

diff --git a/app/assets/javascripts/google_cloud/components/cloudsql/create_instance_form.vue b/app/assets/javascripts/google_cloud/components/cloudsql/create_instance_form.vue
new file mode 100644
index 00000000000..0ac561b6132
--- /dev/null
+++ b/app/assets/javascripts/google_cloud/components/cloudsql/create_instance_form.vue
@@ -0,0 +1,132 @@
+<script>
+import { GlButton, GlFormCheckbox, GlFormGroup, GlFormSelect } from '@gitlab/ui';
+import { s__ } from '~/locale';
+
+const i18n = {
+  gcpProjectLabel: s__('CloudSeed|Google Cloud project'),
+  gcpProjectDescription: s__(
+    'CloudSeed|Database instance is generated within the selected Google Cloud project',
+  ),
+  refsLabel: s__('CloudSeed|Refs'),
+  refsDescription: s__(
+    'CloudSeed|Generated database instance is linked to the selected branch or tag',
+  ),
+  databaseVersionLabel: s__('CloudSeed|Database version'),
+  tierLabel: s__('CloudSeed|Machine type'),
+  tierDescription: s__('CloudSeed|Determines memory and virtual cores available to your instance'),
+  checkboxLabel: s__(
+    'CloudSeed|I accept Google Cloud pricing and responsibilities involved with managing database instances',
+  ),
+  cancelLabel: s__('CloudSeed|Cancel'),
+  submitLabel: s__('CloudSeed|Create instance'),
+  all: s__('CloudSeed|All'),
+};
+
+export default {
+  ALL_REFS: '*',
+  components: {
+    GlButton,
+    GlFormCheckbox,
+    GlFormGroup,
+    GlFormSelect,
+  },
+  props: {
+    cancelPath: { required: true, type: String },
+    gcpProjects: { required: true, type: Array },
+    refs: { required: true, type: Array },
+    formTitle: { required: true, type: String },
+    formDescription: { required: true, type: String },
+    databaseVersions: { required: true, type: Array },
+    tiers: { required: true, type: Array },
+  },
+  i18n,
+};
+</script>
+<template>
+  <div>
+    <header class="gl-my-5 gl-border-b-1 gl-border-b-gray-100 gl-border-b-solid">
+      <h2 class="gl-font-size-h1">{{ formTitle }}</h2>
+      <p>{{ formDescription }}</p>
+    </header>
+
+    <gl-form-group
+      data-testid="form_group_gcp_project"
+      label-for="gcp_project"
+      :label="$options.i18n.gcpProjectLabel"
+      :description="$options.i18n.gcpProjectDescription"
+    >
+      <gl-form-select id="gcp_project" data-testid="select_gcp_project" name="gcp_project" required>
+        <option
+          v-for="gcpProject in gcpProjects"
+          :key="gcpProject.project_id"
+          :value="gcpProject.project_id"
+        >
+          {{ gcpProject.name }}
+        </option>
+      </gl-form-select>
+    </gl-form-group>
+
+    <gl-form-group
+      data-testid="form_group_environments"
+      label-for="ref"
+      :label="$options.i18n.refsLabel"
+      :description="$options.i18n.refsDescription"
+    >
+      <gl-form-select id="ref" data-testid="select_environments" name="ref" required>
+        <option :value="$options.ALL_REFS">{{ $options.i18n.all }}</option>
+        <option v-for="ref in refs" :key="ref" :value="ref">
+          {{ ref }}
+        </option>
+      </gl-form-select>
+    </gl-form-group>
+
+    <gl-form-group
+      data-testid="form_group_tier"
+      label-for="tier"
+      :label="$options.i18n.tierLabel"
+      :description="$options.i18n.tierDescription"
+    >
+      <gl-form-select id="tier" data-testid="select_tier" name="tier" required>
+        <option v-for="tier in tiers" :key="tier.value" :value="tier.value">
+          {{ tier.label }}
+        </option>
+      </gl-form-select>
+    </gl-form-group>
+
+    <gl-form-group
+      data-testid="form_group_database_version"
+      label-for="database-version"
+      :label="$options.i18n.databaseVersionLabel"
+    >
+      <gl-form-select
+        id="database-version"
+        data-testid="select_database_version"
+        name="database_version"
+        required
+      >
+        <option
+          v-for="databaseVersion in databaseVersions"
+          :key="databaseVersion.value"
+          :value="databaseVersion.value"
+        >
+          {{ databaseVersion.label }}
+        </option>
+      </gl-form-select>
+    </gl-form-group>
+
+    <gl-form-group>
+      <gl-form-checkbox name="confirmation" required>
+        {{ $options.i18n.checkboxLabel }}
+      </gl-form-checkbox>
+    </gl-form-group>
+
+    <div class="form-actions row">
+      <gl-button type="submit" category="primary" variant="confirm" data-testid="submit-button">
+        {{ $options.i18n.submitLabel }}
+      </gl-button>
+      <gl-button class="gl-ml-1" :href="cancelPath" data-testid="cancel-button">{{
+        $options.i18n.cancelLabel
+      }}</gl-button>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/google_cloud/components/cloudsql/instance_table.vue b/app/assets/javascripts/google_cloud/components/cloudsql/instance_table.vue
new file mode 100644
index 00000000000..823895214df
--- /dev/null
+++ b/app/assets/javascripts/google_cloud/components/cloudsql/instance_table.vue
@@ -0,0 +1,75 @@
+<script>
+import { GlEmptyState, GlLink, GlTable } from '@gitlab/ui';
+import { encodeSaferUrl, setUrlParams } from '~/lib/utils/url_utility';
+import { s__ } from '~/locale';
+
+const i18n = {
+  noInstancesTitle: s__('CloudSeed|No instances'),
+  noInstancesDescription: s__('CloudSeed|There are no instances to display.'),
+  title: s__('CloudSeed|Instances'),
+  description: s__('CloudSeed|Database instances associated with this project'),
+};
+
+export default {
+  components: { GlEmptyState, GlLink, GlTable },
+  props: {
+    cloudsqlInstances: {
+      type: Array,
+      required: true,
+    },
+    emptyIllustrationUrl: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    tableData() {
+      return this.cloudsqlInstances.filter((instance) => instance.instance_name);
+    },
+  },
+  methods: {
+    gcpProjectUrl(id) {
+      return setUrlParams({ project: id }, 'https://console.cloud.google.com/sql/instances');
+    },
+    instanceUrl(name, id) {
+      const saferName = encodeSaferUrl(name);
+
+      return setUrlParams(
+        { project: id },
+        `https://console.cloud.google.com/sql/instances/${saferName}/overview`,
+      );
+    },
+  },
+  fields: [
+    { key: 'ref', label: s__('CloudSeed|Environment') },
+    { key: 'gcp_project', label: s__('CloudSeed|Google Cloud Project') },
+    { key: 'instance_name', label: s__('CloudSeed|CloudSQL Instance') },
+    { key: 'version', label: s__('CloudSeed|Version') },
+  ],
+  i18n,
+};
+</script>
+
+<template>
+  <div class="gl-mx-3">
+    <gl-empty-state
+      v-if="tableData.length === 0"
+      :title="$options.i18n.noInstancesTitle"
+      :description="$options.i18n.noInstancesDescription"
+      :svg-path="emptyIllustrationUrl"
+    />
+
+    <div v-else>
+      <h2 class="gl-font-size-h2">{{ $options.i18n.title }}</h2>
+      <p>{{ $options.i18n.description }}</p>
+      <gl-table :fields="$options.fields" :items="tableData">
+        <template #cell(gcp_project)="{ value }">
+          <gl-link :href="gcpProjectUrl(value)">{{ value }}</gl-link>
+        </template>
+        <template #cell(instance_name)="{ item: { instance_name, gcp_project } }">
+          <a :href="instanceUrl(instance_name, gcp_project)">{{ instance_name }}</a>
+        </template>
+      </gl-table>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/google_cloud/components/databases/service_table.vue b/app/assets/javascripts/google_cloud/components/databases/service_table.vue
new file mode 100644
index 00000000000..80bd6ef28fb
--- /dev/null
+++ b/app/assets/javascripts/google_cloud/components/databases/service_table.vue
@@ -0,0 +1,221 @@
+<script>
+import { GlAlert, GlButton, GlLink, GlSprintf, GlTable } from '@gitlab/ui';
+import { helpPagePath } from '~/helpers/help_page_helper';
+import { s__ } from '~/locale';
+
+const KEY_CLOUDSQL_POSTGRES = 'cloudsql-postgres';
+const KEY_CLOUDSQL_MYSQL = 'cloudsql-mysql';
+const KEY_CLOUDSQL_SQLSERVER = 'cloudsql-sqlserver';
+const KEY_ALLOYDB_POSTGRES = 'alloydb-postgres';
+const KEY_MEMORYSTORE_REDIS = 'memorystore-redis';
+const KEY_FIRESTORE = 'firestore';
+
+const i18n = {
+  columnService: s__('CloudSeed|Service'),
+  columnDescription: s__('CloudSeed|Description'),
+  cloudsqlPostgresTitle: s__('CloudSeed|Cloud SQL for Postgres'),
+  cloudsqlPostgresDescription: s__(
+    'CloudSeed|Fully managed relational database service for PostgreSQL',
+  ),
+  cloudsqlMysqlTitle: s__('CloudSeed|Cloud SQL for MySQL'),
+  cloudsqlMysqlDescription: s__('CloudSeed|Fully managed relational database service for MySQL'),
+  cloudsqlSqlserverTitle: s__('CloudSeed|Cloud SQL for SQL Server'),
+  cloudsqlSqlserverDescription: s__(
+    'CloudSeed|Fully managed relational database service for SQL Server',
+  ),
+  alloydbPostgresTitle: s__('CloudSeed|AlloyDB for Postgres'),
+  alloydbPostgresDescription: s__(
+    'CloudSeed|Fully managed PostgreSQL-compatible service for high-demand workloads',
+  ),
+  memorystoreRedisTitle: s__('CloudSeed|Memorystore for Redis'),
+  memorystoreRedisDescription: s__(
+    'CloudSeed|Scalable, secure, and highly available in-memory service for Redis',
+  ),
+  firestoreTitle: s__('CloudSeed|Cloud Firestore'),
+  firestoreDescription: s__(
+    'CloudSeed|Flexible, scalable NoSQL cloud database for client- and server-side development',
+  ),
+  createInstance: s__('CloudSeed|Create instance'),
+  createCluster: s__('CloudSeed|Create cluster'),
+  createDatabase: s__('CloudSeed|Create database'),
+  title: s__('CloudSeed|Services'),
+  description: s__('CloudSeed|Available database services through which instances may be created'),
+  pricingAlert: s__(
+    'CloudSeed|Learn more about pricing for %{cloudsqlPricingStart}Cloud SQL%{cloudsqlPricingEnd}, %{alloydbPricingStart}Alloy DB%{alloydbPricingEnd}, %{memorystorePricingStart}Memorystore%{memorystorePricingEnd} and %{firestorePricingStart}Firestore%{firestorePricingEnd}.',
+  ),
+  secretManagersDescription: s__(
+    'CloudSeed|Enhance security by storing database variables in secret managers - learn more about %{docLinkStart}secret management with GitLab%{docLinkEnd}',
+  ),
+};
+
+const helpUrlSecrets = helpPagePath('ee/ci/secrets');
+
+export default {
+  components: { GlAlert, GlButton, GlLink, GlSprintf, GlTable },
+  props: {
+    cloudsqlPostgresUrl: {
+      type: String,
+      required: true,
+    },
+    cloudsqlMysqlUrl: {
+      type: String,
+      required: true,
+    },
+    cloudsqlSqlserverUrl: {
+      type: String,
+      required: true,
+    },
+    alloydbPostgresUrl: {
+      type: String,
+      required: true,
+    },
+    memorystoreRedisUrl: {
+      type: String,
+      required: true,
+    },
+    firestoreUrl: {
+      type: String,
+      required: true,
+    },
+  },
+  methods: {
+    actionUrl(key) {
+      switch (key) {
+        case KEY_CLOUDSQL_POSTGRES:
+          return this.cloudsqlPostgresUrl;
+        case KEY_CLOUDSQL_MYSQL:
+          return this.cloudsqlMysqlUrl;
+        case KEY_CLOUDSQL_SQLSERVER:
+          return this.cloudsqlSqlserverUrl;
+        case KEY_ALLOYDB_POSTGRES:
+          return this.alloydbPostgresUrl;
+        case KEY_MEMORYSTORE_REDIS:
+          return this.memorystoreRedisUrl;
+        case KEY_FIRESTORE:
+          return this.firestoreUrl;
+        default:
+          return '#';
+      }
+    },
+  },
+  fields: [
+    { key: 'title', label: i18n.columnService },
+    { key: 'description', label: i18n.columnDescription },
+    { key: 'action', label: '' },
+  ],
+  items: [
+    {
+      title: i18n.cloudsqlPostgresTitle,
+      description: i18n.cloudsqlPostgresDescription,
+      action: {
+        key: KEY_CLOUDSQL_POSTGRES,
+        title: i18n.createInstance,
+        testId: 'button-cloudsql-postgres',
+      },
+    },
+    {
+      title: i18n.cloudsqlMysqlTitle,
+      description: i18n.cloudsqlMysqlDescription,
+      action: {
+        disabled: false,
+        key: KEY_CLOUDSQL_MYSQL,
+        title: i18n.createInstance,
+        testId: 'button-cloudsql-mysql',
+      },
+    },
+    {
+      title: i18n.cloudsqlSqlserverTitle,
+      description: i18n.cloudsqlSqlserverDescription,
+      action: {
+        disabled: false,
+        key: KEY_CLOUDSQL_SQLSERVER,
+        title: i18n.createInstance,
+        testId: 'button-cloudsql-sqlserver',
+      },
+    },
+    {
+      title: i18n.alloydbPostgresTitle,
+      description: i18n.alloydbPostgresDescription,
+      action: {
+        disabled: true,
+        key: KEY_ALLOYDB_POSTGRES,
+        title: i18n.createCluster,
+        testId: 'button-alloydb-postgres',
+      },
+    },
+    {
+      title: i18n.memorystoreRedisTitle,
+      description: i18n.memorystoreRedisDescription,
+      action: {
+        disabled: true,
+        key: KEY_MEMORYSTORE_REDIS,
+        title: i18n.createInstance,
+        testId: 'button-memorystore-redis',
+      },
+    },
+    {
+      title: i18n.firestoreTitle,
+      description: i18n.firestoreDescription,
+      action: {
+        disabled: true,
+        key: KEY_FIRESTORE,
+        title: i18n.createDatabase,
+        testId: 'button-firestore',
+      },
+    },
+  ],
+  helpUrlSecrets,
+  i18n,
+};
+</script>
+
+<template>
+  <div class="gl-mx-3">
+    <h2 class="gl-font-size-h2">{{ $options.i18n.title }}</h2>
+    <p>{{ $options.i18n.description }}</p>
+
+    <gl-table :fields="$options.fields" :items="$options.items">
+      <template #cell(action)="{ value }">
+        <gl-button
+          block
+          :disabled="value.disabled"
+          :href="actionUrl(value.key)"
+          :data-testid="value.testId"
+          category="secondary"
+          variant="confirm"
+        >
+          {{ value.title }}
+        </gl-button>
+      </template>
+    </gl-table>
+
+    <gl-alert class="gl-mt-5" :dismissible="false" variant="tip">
+      <gl-sprintf :message="$options.i18n.pricingAlert">
+        <template #cloudsqlPricing="{ content }">
+          <gl-link href="https://cloud.google.com/sql/pricing">{{ content }}</gl-link>
+        </template>
+        <template #alloydbPricing="{ content }">
+          <gl-link href="https://cloud.google.com/alloydb/pricing">{{ content }}</gl-link>
+        </template>
+        <template #memorystorePricing="{ content }">
+          <gl-link href="https://cloud.google.com/memorystore/docs/redis/pricing">{{
+            content
+          }}</gl-link>
+        </template>
+        <template #firestorePricing="{ content }">
+          <gl-link href="https://cloud.google.com/firestore/pricing">{{ content }}</gl-link>
+        </template>
+      </gl-sprintf>
+    </gl-alert>
+
+    <gl-alert class="gl-mt-5" :dismissible="false" variant="tip">
+      <gl-sprintf :message="$options.i18n.secretManagersDescription">
+        <template #docLink="{ content }">
+          <gl-link :href="$options.helpUrlSecrets">
+            {{ content }}
+          </gl-link>
+        </template>
+      </gl-sprintf>
+    </gl-alert>
+  </div>
+</template>