1 files changed, 163 insertions, 0 deletions
diff --git a/app/assets/javascripts/clusters/forms/components/integration_form.vue b/app/assets/javascripts/clusters/forms/components/integration_form.vue
new file mode 100644
index 00000000000..53e004b4fc0
--- /dev/null
+++ b/app/assets/javascripts/clusters/forms/components/integration_form.vue
@@ -0,0 +1,163 @@
+<script>
+import {
+  GlFormGroup,
+  GlFormInput,
+  GlToggle,
+  GlTooltipDirective,
+  GlSprintf,
+  GlLink,
+  GlButton,
+} from '@gitlab/ui';
+import { mapState } from 'vuex';
+
+export default {
+  components: {
+    GlFormGroup,
+    GlToggle,
+    GlFormInput,
+    GlSprintf,
+    GlLink,
+    GlButton,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+  inject: {
+    autoDevopsHelpPath: {
+      type: String,
+    },
+    externalEndpointHelpPath: {
+      type: String,
+    },
+  },
+  data() {
+    return {
+      toggleEnabled: true,
+      envScope: '*',
+      baseDomainField: '',
+      externalIp: '',
+    };
+  },
+  computed: {
+    ...mapState([
+      'enabled',
+      'editable',
+      'environmentScope',
+      'baseDomain',
+      'applicationIngressExternalIp',
+    ]),
+    canSubmit() {
+      return (
+        this.enabled !== this.toggleEnabled ||
+        this.environmentScope !== this.envScope ||
+        this.baseDomain !== this.baseDomainField
+      );
+    },
+  },
+  mounted() {
+    this.toggleEnabled = this.enabled;
+    this.envScope = this.environmentScope;
+    this.baseDomainField = this.baseDomain;
+    this.externalIp = this.applicationIngressExternalIp;
+  },
+};
+</script>
+
+<template>
+  <div class="d-flex gl-flex-direction-column">
+    <gl-form-group>
+      <div class="gl-display-flex gl-align-items-center">
+        <h4 class="gl-pr-3 gl-m-0">{{ s__('ClusterIntegration|GitLab Integration') }}</h4>
+
+        <div class="js-cluster-enable-toggle-area">
+          <gl-toggle
+            id="toggleCluster"
+            v-model="toggleEnabled"
+            v-gl-tooltip:tooltipcontainer
+            name="cluster[enabled]"
+            class="gl-mb-0 js-project-feature-toggle"
+            data-qa-selector="integration_status_toggle"
+            aria-describedby="toggleCluster"
+            :disabled="!editable"
+            :title="
+              s__(
+                'ClusterIntegration|Enable or disable GitLab\'s connection to your Kubernetes cluster.',
+              )
+            "
+          />
+        </div>
+      </div>
+    </gl-form-group>
+
+    <gl-form-group
+      :label="s__('ClusterIntegration|Environment scope')"
+      label-size="sm"
+      label-for="cluster_environment_scope"
+      :description="
+        s__('ClusterIntegration|Choose which of your environments will use this cluster.')
+      "
+    >
+      <gl-form-input
+        id="cluster_environment_scope"
+        v-model="envScope"
+        name="cluster[environment_scope]"
+        class="col-md-6"
+        type="text"
+      />
+    </gl-form-group>
+
+    <gl-form-group
+      :label="s__('ClusterIntegration|Base domain')"
+      label-size="sm"
+      label-for="cluster_base_domain"
+    >
+      <gl-form-input
+        id="cluster_base_domain"
+        v-model="baseDomainField"
+        name="cluster[base_domain]"
+        data-qa-selector="base_domain_field"
+        class="col-md-6"
+        type="text"
+      />
+      <div class="form-text text-muted inline">
+        <gl-sprintf
+          :message="
+            s__(
+              'ClusterIntegration|Specifying a domain will allow you to use Auto Review Apps and Auto Deploy stages for %{linkStart}Auto DevOps.%{linkEnd} The domain should have a wildcard DNS configured matching the domain. ',
+            )
+          "
+        >
+          <template #link="{ content }">
+            <gl-link :href="autoDevopsHelpPath" target="_blank">{{ content }}</gl-link>
+          </template>
+        </gl-sprintf>
+        <div v-if="applicationIngressExternalIp" class="js-ingress-domain-help-text inline">
+          {{ s__('ClusterIntegration|Alternatively, ') }}
+          <gl-sprintf :message="s__('ClusterIntegration|%{externalIp}.nip.io')">
+            <template #externalIp>{{ externalIp }}</template>
+          </gl-sprintf>
+          {{ s__('ClusterIntegration|can be used instead of a custom domain. ') }}
+        </div>
+        <gl-sprintf
+          class="inline"
+          :message="s__('ClusterIntegration|%{linkStart}More information%{linkEnd}')"
+        >
+          <template #link="{ content }">
+            <gl-link :href="externalEndpointHelpPath" target="_blank">{{ content }}</gl-link>
+          </template>
+        </gl-sprintf>
+      </div>
+    </gl-form-group>
+    <div v-if="editable" class="form group gl-display-flex gl-justify-content-end">
+      <gl-button
+        category="primary"
+        variant="success"
+        type="submit"
+        :disabled="!canSubmit"
+        :aria-disabled="!canSubmit"
+        data-qa-selector="save_changes_button"
+        >{{ s__('ClusterIntegration|Save changes') }}</gl-button
+      >
+    </div>
+  </div>
+</template>