Add latest changes from gitlab-org/gitlab@master

4 files changed, 132 insertions, 41 deletions

diff --git a/app/assets/javascripts/clusters/clusters_bundle.js b/app/assets/javascripts/clusters/clusters_bundle.js
index d0a4073cc00..2324cc5dafb 100644
--- a/app/assets/javascripts/clusters/clusters_bundle.js
+++ b/app/assets/javascripts/clusters/clusters_bundle.js
@@ -8,14 +8,7 @@ import Flash from '../flash';
 import Poll from '../lib/utils/poll';
 import initSettingsPanels from '../settings_panels';
 import eventHub from './event_hub';
-import {
-  APPLICATION_STATUS,
-  INGRESS,
-  INGRESS_DOMAIN_SUFFIX,
-  CROSSPLANE,
-  KNATIVE,
-  FLUENTD,
-} from './constants';
+import { APPLICATION_STATUS, CROSSPLANE, KNATIVE, FLUENTD } from './constants';
 import ClustersService from './services/clusters_service';
 import ClustersStore from './stores/clusters_store';
 import Applications from './components/applications.vue';
@@ -120,10 +113,6 @@ export default class Clusters {
     this.errorReasonContainer = this.errorContainer.querySelector('.js-error-reason');
     this.successApplicationContainer = document.querySelector('.js-cluster-application-notice');
     this.tokenField = document.querySelector('.js-cluster-token');
-    this.ingressDomainHelpText = document.querySelector('.js-ingress-domain-help-text');
-    this.ingressDomainSnippet =
-      this.ingressDomainHelpText &&
-      this.ingressDomainHelpText.querySelector('.js-ingress-domain-snippet');
 
     initProjectSelectDropdown();
     Clusters.initDismissableCallout();
@@ -327,13 +316,6 @@ export default class Clusters {
     this.checkForNewInstalls(prevApplicationMap, this.store.state.applications);
     this.updateContainer(prevStatus, this.store.state.status, this.store.state.statusReason);
 
-    if (this.ingressDomainHelpText) {
-      this.toggleIngressDomainHelpText(
-        prevApplicationMap[INGRESS],
-        this.store.state.applications[INGRESS],
-      );
-    }
-
     if (this.store.state.applications[KNATIVE]?.status === APPLICATION_STATUS.INSTALLED) {
       initServerlessSurveyBanner();
     }
@@ -505,13 +487,6 @@ export default class Clusters {
     });
   }
 
-  toggleIngressDomainHelpText({ externalIp }, { externalIp: newExternalIp }) {
-    if (externalIp !== newExternalIp) {
-      this.ingressDomainHelpText.classList.toggle('hide', !newExternalIp);
-      this.ingressDomainSnippet.textContent = `${newExternalIp}${INGRESS_DOMAIN_SUFFIX}`;
-    }
-  }
-
   saveKnativeDomain(data) {
     const appId = data.id;
     this.store.updateApplication(appId);
diff --git a/app/assets/javascripts/clusters/forms/components/integration_form.vue b/app/assets/javascripts/clusters/forms/components/integration_form.vue
index 1ac9a4ee59e..53e004b4fc0 100644
--- a/app/assets/javascripts/clusters/forms/components/integration_form.vue
+++ b/app/assets/javascripts/clusters/forms/components/integration_form.vue
@@ -1,50 +1,84 @@
 <script>
-import { GlFormGroup, GlToggle, GlTooltipDirective } from '@gitlab/ui';
+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']),
+    ...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 align-items-center">
+  <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>
-        <input
-          id="cluster_enabled"
-          class="js-project-feature-toggle-input"
-          type="hidden"
-          :value="toggleEnabled"
-          name="cluster[enabled]"
-        />
-        <div id="tooltipcontainer" class="js-cluster-enable-toggle-area">
+        <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="__('Toggle Kubernetes cluster')"
+            aria-describedby="toggleCluster"
             :disabled="!editable"
-            :is_checked="toggleEnabled"
             :title="
               s__(
                 'ClusterIntegration|Enable or disable GitLab\'s connection to your Kubernetes cluster.',
@@ -54,5 +88,76 @@ export default {
         </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>
diff --git a/app/assets/javascripts/clusters/forms/show/index.js b/app/assets/javascripts/clusters/forms/show/index.js
index 26a6ab5f0e3..47a3016c777 100644
--- a/app/assets/javascripts/clusters/forms/show/index.js
+++ b/app/assets/javascripts/clusters/forms/show/index.js
@@ -9,13 +9,19 @@ export default () => {
     return;
   }
 
+  const { autoDevopsHelpPath, externalEndpointHelpPath } = entryPoint.dataset;
+
   // eslint-disable-next-line no-new
   new Vue({
     el: entryPoint,
     store: createStore(entryPoint.dataset),
+    provide: {
+      autoDevopsHelpPath,
+      externalEndpointHelpPath,
+    },
 
     render(createElement) {
-      return createElement(IntegrationForm);
+      return createElement(IntegrationForm, {});
     },
   });
 };
diff --git a/app/assets/javascripts/clusters/forms/stores/state.js b/app/assets/javascripts/clusters/forms/stores/state.js
index a88954d5b94..2a96590b5e7 100644
--- a/app/assets/javascripts/clusters/forms/stores/state.js
+++ b/app/assets/javascripts/clusters/forms/stores/state.js
@@ -4,5 +4,10 @@ export default (initialState = {}) => {
   return {
     enabled: parseBoolean(initialState.enabled),
     editable: parseBoolean(initialState.editable),
+    environmentScope: initialState.environmentScope,
+    baseDomain: initialState.baseDomain,
+    applicationIngressExternalIp: initialState.applicationIngressExternalIp,
+    autoDevopsHelpPath: initialState.autoDevopsHelpPath,
+    externalEndpointHelpPath: initialState.externalEndpointHelpPath,
   };
 };