Add latest changes from gitlab-org/gitlab@master

12 files changed, 120 insertions, 45 deletions

diff --git a/app/assets/javascripts/clusters/clusters_bundle.js b/app/assets/javascripts/clusters/clusters_bundle.js
index dc1328a2236..e20c87ed8a0 100644
--- a/app/assets/javascripts/clusters/clusters_bundle.js
+++ b/app/assets/javascripts/clusters/clusters_bundle.js
@@ -256,6 +256,7 @@ export default class Clusters {
     eventHub.$on('uninstallApplication', data => this.uninstallApplication(data));
     eventHub.$on('setCrossplaneProviderStack', data => this.setCrossplaneProviderStack(data));
     eventHub.$on('setIngressModSecurityEnabled', data => this.setIngressModSecurityEnabled(data));
+    eventHub.$on('resetIngressModSecurityEnabled', id => this.resetIngressModSecurityEnabled(id));
     // Add event listener to all the banner close buttons
     this.addBannerCloseHandler(this.unreachableContainer, 'unreachable');
     this.addBannerCloseHandler(this.authenticationFailureContainer, 'authentication_failure');
@@ -270,6 +271,7 @@ export default class Clusters {
     eventHub.$off('setCrossplaneProviderStack');
     eventHub.$off('uninstallApplication');
     eventHub.$off('setIngressModSecurityEnabled');
+    eventHub.$off('resetIngressModSecurityEnabled');
   }
 
   initPolling(method, successCallback, errorCallback) {
@@ -523,6 +525,10 @@ export default class Clusters {
     this.store.updateAppProperty(id, 'modsecurity_enabled', modSecurityEnabled);
   }
 
+  resetIngressModSecurityEnabled(id) {
+    this.store.updateAppProperty(id, 'isEditingModSecurityEnabled', false);
+  }
+
   destroy() {
     this.destroyed = true;
 
diff --git a/app/assets/javascripts/clusters/components/applications.vue b/app/assets/javascripts/clusters/components/applications.vue
index 9058f1c0141..442c52110f2 100644
--- a/app/assets/javascripts/clusters/components/applications.vue
+++ b/app/assets/javascripts/clusters/components/applications.vue
@@ -119,9 +119,6 @@ export default {
     ingressInstalled() {
       return this.applications.ingress.status === APPLICATION_STATUS.INSTALLED;
     },
-    ingressEnableModsecurity() {
-      return this.applications.ingress.modsecurity_enabled;
-    },
     ingressExternalEndpoint() {
       return this.applications.ingress.externalIp || this.applications.ingress.externalHostname;
     },
diff --git a/app/assets/javascripts/clusters/components/ingress_modsecurity_settings.vue b/app/assets/javascripts/clusters/components/ingress_modsecurity_settings.vue
index c30015f31de..98a783aab6e 100644
--- a/app/assets/javascripts/clusters/components/ingress_modsecurity_settings.vue
+++ b/app/assets/javascripts/clusters/components/ingress_modsecurity_settings.vue
@@ -1,19 +1,22 @@
 <script>
 import _ from 'lodash';
 import { __ } from '../../locale';
-import LoadingButton from '~/vue_shared/components/loading_button.vue';
 import { APPLICATION_STATUS, INGRESS } from '~/clusters/constants';
-import { GlAlert, GlSprintf, GlLink } from '@gitlab/ui';
+import { GlAlert, GlSprintf, GlLink, GlToggle, GlButton } from '@gitlab/ui';
 import eventHub from '~/clusters/event_hub';
+import modSecurityLogo from 'images/cluster_app_logos/modsecurity.png';
 
-const { UPDATING, UNINSTALLING } = APPLICATION_STATUS;
+const { UPDATING, UNINSTALLING, INSTALLING, INSTALLED, UPDATED } = APPLICATION_STATUS;
 
 export default {
+  title: 'ModSecurity Web Application Firewall',
+  modsecurityUrl: 'https://modsecurity.org/about.html',
   components: {
-    LoadingButton,
     GlAlert,
     GlSprintf,
     GlLink,
+    GlToggle,
+    GlButton,
   },
   props: {
     ingress: {
@@ -26,6 +29,10 @@ export default {
       default: '',
     },
   },
+  data: () => ({
+    modSecurityLogo,
+    hasValueChanged: false,
+  }),
   computed: {
     modSecurityEnabled: {
       get() {
@@ -36,6 +43,11 @@ export default {
           id: INGRESS,
           modSecurityEnabled: isEnabled,
         });
+        if (this.hasValueChanged) {
+          this.resetStatus();
+        } else {
+          this.hasValueChanged = true;
+        }
       },
     },
     ingressModSecurityDescription() {
@@ -45,13 +57,21 @@ export default {
       return [UPDATING].includes(this.ingress.status);
     },
     saveButtonDisabled() {
-      return [UNINSTALLING, UPDATING].includes(this.ingress.status);
+      return [UNINSTALLING, UPDATING, INSTALLING].includes(this.ingress.status);
     },
     saveButtonLabel() {
       return this.saving ? __('Saving') : __('Save changes');
     },
-    ingressInstalled() {
-      return this.ingress.installed;
+    /**
+     * Returns true either when:
+     *   - The application is getting updated.
+     *   - The user has changed some of the settings for an application which is
+     *     neither getting installed nor updated.
+     */
+    showButtons() {
+      return (
+        this.saving || (this.hasValueChanged && [INSTALLED, UPDATED].includes(this.ingress.status))
+      );
     },
   },
   methods: {
@@ -60,6 +80,11 @@ export default {
         id: INGRESS,
         params: { modsecurity_enabled: this.ingress.modsecurity_enabled },
       });
+      this.resetStatus();
+    },
+    resetStatus() {
+      eventHub.$emit('resetIngressModSecurityEnabled', INGRESS);
+      this.hasValueChanged = false;
     },
   },
 };
@@ -75,42 +100,65 @@ export default {
       @dismiss="alert = null"
     >
       {{
-        s__('ClusterIntegration|Something went wrong while updating the Web Application Firewall.')
+        s__(
+          'ClusterIntegration|Something went wrong while trying to save your settings. Please try again.',
+        )
       }}
     </gl-alert>
-    <div class="form-group">
-      <div class="form-check form-check-inline">
-        <input
-          v-model="modSecurityEnabled"
-          type="checkbox"
-          autocomplete="off"
-          class="form-check-input"
+    <div class="gl-responsive-table-row-layout" role="row">
+      <div class="table-section append-right-8 section-align-top" role="gridcell">
+        <img
+          :src="modSecurityLogo"
+          :alt="`${$options.title} logo`"
+          class="cluster-application-logo avatar s40"
         />
-        <label class="form-check-label label-bold" for="ingress-enable-modsecurity">
-          {{ s__('ClusterIntegration|Enable Web Application Firewall') }}
-        </label>
       </div>
-      <p class="form-text text-muted">
+      <div class="table-section section-wrap" role="gridcell">
         <strong>
-          <gl-sprintf
-            :message="s__('ClusterIntegration|Learn more about %{linkStart}ModSecurity%{linkEnd}')"
-          >
-            <template #link="{ content }">
-              <gl-link :href="ingressModSecurityDescription" target="_blank"
-                >{{ content }}
-              </gl-link>
-            </template>
-          </gl-sprintf>
+          <gl-link :href="$options.modsecurityUrl" target="_blank">{{ $options.title }} </gl-link>
         </strong>
-      </p>
-      <loading-button
-        v-if="ingressInstalled"
-        class="btn-success mt-1"
-        :loading="saving"
-        :disabled="saveButtonDisabled"
-        :label="saveButtonLabel"
-        @click="updateApplication"
-      />
+        <div class="form-group">
+          <p class="form-text text-muted">
+            <strong>
+              <gl-sprintf
+                :message="
+                  s__(
+                    'ClusterIntegration|Real-time web application monitoring, logging and access control. %{linkStart}More information%{linkEnd}',
+                  )
+                "
+              >
+                <template #link="{ content }">
+                  <gl-link :href="ingressModSecurityDescription" target="_blank"
+                    >{{ content }}
+                  </gl-link>
+                </template>
+              </gl-sprintf>
+            </strong>
+          </p>
+          <div class="form-check form-check-inline mt-3">
+            <gl-toggle
+              v-model="modSecurityEnabled"
+              :label-on="__('Enabled')"
+              :label-off="__('Disabled')"
+              :disabled="saveButtonDisabled"
+              label-position="right"
+            />
+          </div>
+          <div v-if="showButtons">
+            <gl-button
+              class="btn-success inline mr-1"
+              :loading="saving"
+              :disabled="saveButtonDisabled"
+              @click="updateApplication"
+            >
+              {{ saveButtonLabel }}
+            </gl-button>
+            <gl-button :disabled="saveButtonDisabled" @click="resetStatus">
+              {{ __('Cancel') }}
+            </gl-button>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
diff --git a/app/assets/javascripts/clusters/stores/clusters_store.js b/app/assets/javascripts/clusters/stores/clusters_store.js
index ffe71455b2d..1d17170cea1 100644
--- a/app/assets/javascripts/clusters/stores/clusters_store.js
+++ b/app/assets/javascripts/clusters/stores/clusters_store.js
@@ -211,9 +211,7 @@ export default class ClusterStore {
         this.state.applications.ingress.externalIp = serverAppEntry.external_ip;
         this.state.applications.ingress.externalHostname = serverAppEntry.external_hostname;
         if (!this.state.applications.ingress.isEditingModSecurityEnabled) {
-          this.state.applications.ingress.modsecurity_enabled =
-            serverAppEntry.modsecurity_enabled ||
-            this.state.applications.ingress.modsecurity_enabled;
+          this.state.applications.ingress.modsecurity_enabled = serverAppEntry.modsecurity_enabled;
         }
       } else if (appId === CERT_MANAGER) {
         this.state.applications.cert_manager.email =
diff --git a/app/assets/javascripts/notes/components/discussion_counter.vue b/app/assets/javascripts/notes/components/discussion_counter.vue
index 515d513e3ee..577612de06a 100644
--- a/app/assets/javascripts/notes/components/discussion_counter.vue
+++ b/app/assets/javascripts/notes/components/discussion_counter.vue
@@ -77,6 +77,9 @@ export default {
           v-gl-tooltip
           title="Jump to next unresolved thread"
           class="btn btn-default discussion-next-btn"
+          data-track-event="click_button"
+          data-track-label="mr_next_unresolved_thread"
+          data-track-property="click_next_unresolved_thread_top"
           @click="jumpToNextDiscussion"
         >
           <icon name="comment-next" />
diff --git a/app/assets/javascripts/notes/components/discussion_jump_to_next_button.vue b/app/assets/javascripts/notes/components/discussion_jump_to_next_button.vue
index e66abcfddbb..b71ce1b6a0a 100644
--- a/app/assets/javascripts/notes/components/discussion_jump_to_next_button.vue
+++ b/app/assets/javascripts/notes/components/discussion_jump_to_next_button.vue
@@ -28,6 +28,9 @@ export default {
       v-gl-tooltip
       class="btn btn-default discussion-next-btn"
       :title="s__('MergeRequests|Jump to next unresolved thread')"
+      data-track-event="click_button"
+      data-track-label="mr_next_unresolved_thread"
+      data-track-property="click_next_unresolved_thread"
       @click="jumpToNextRelativeDiscussion(fromDiscussionId)"
     >
       <icon name="comment-next" />
diff --git a/app/assets/javascripts/pages/admin/integrations/edit/index.js b/app/assets/javascripts/pages/admin/integrations/edit/index.js
new file mode 100644
index 00000000000..2d77f2686f7
--- /dev/null
+++ b/app/assets/javascripts/pages/admin/integrations/edit/index.js
@@ -0,0 +1,16 @@
+import IntegrationSettingsForm from '~/integrations/integration_settings_form';
+import PrometheusMetrics from '~/prometheus_metrics/prometheus_metrics';
+import initAlertsSettings from '~/alerts_service_settings';
+
+document.addEventListener('DOMContentLoaded', () => {
+  const prometheusSettingsWrapper = document.querySelector('.js-prometheus-metrics-monitoring');
+  const integrationSettingsForm = new IntegrationSettingsForm('.js-integration-settings-form');
+  integrationSettingsForm.init();
+
+  if (prometheusSettingsWrapper) {
+    const prometheusMetrics = new PrometheusMetrics('.js-prometheus-metrics-monitoring');
+    prometheusMetrics.loadActiveMetrics();
+  }
+
+  initAlertsSettings(document.querySelector('.js-alerts-service-settings'));
+});
diff --git a/app/assets/javascripts/pages/projects/snippets/show/index.js b/app/assets/javascripts/pages/projects/snippets/show/index.js
index 738bf08f1bf..d8fbb851ffb 100644
--- a/app/assets/javascripts/pages/projects/snippets/show/index.js
+++ b/app/assets/javascripts/pages/projects/snippets/show/index.js
@@ -14,5 +14,6 @@ document.addEventListener('DOMContentLoaded', () => {
     snippetEmbed();
   } else {
     initSnippetsApp();
+    initNotes();
   }
 });
diff --git a/app/assets/javascripts/pages/snippets/show/index.js b/app/assets/javascripts/pages/snippets/show/index.js
index 6e00c14f43e..3bc9d4f957f 100644
--- a/app/assets/javascripts/pages/snippets/show/index.js
+++ b/app/assets/javascripts/pages/snippets/show/index.js
@@ -14,5 +14,6 @@ document.addEventListener('DOMContentLoaded', () => {
     snippetEmbed();
   } else {
     initSnippetsApp();
+    initNotes();
   }
 });
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment.vue b/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment.vue
index 6f77d2fa779..9c476d5b2e0 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment.vue
@@ -64,7 +64,7 @@ export default {
             :deployment="deployment"
             :computed-deployment-status="computedDeploymentStatus"
             :show-visual-review-app="showVisualReviewApp"
-            :visual-review-app-metadata="visualReviewAppMeta"
+            :visual-review-app-meta="visualReviewAppMeta"
           />
         </div>
       </div>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_actions.vue b/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_actions.vue
index a11e62b048a..573fc388cca 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_actions.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_actions.vue
@@ -173,7 +173,7 @@ export default {
       :app-button-text="appButtonText"
       :deployment="deployment"
       :show-visual-review-app="showVisualReviewApp"
-      :visual-review-app-metadata="visualReviewAppMeta"
+      :visual-review-app-meta="visualReviewAppMeta"
     />
     <deployment-action-button
       v-if="stopUrl"
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_view_button.vue b/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_view_button.vue
index e1a1b1022e3..5dabd9fe5fe 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_view_button.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_view_button.vue
@@ -93,8 +93,10 @@ export default {
     />
     <visual-review-app-link
       v-if="showVisualReviewApp"
+      :view-app-display="appButtonText"
       :link="deploymentExternalUrl"
       :app-metadata="visualReviewAppMeta"
+      :changes="deployment.changes"
     />
   </span>
 </template>