Add latest changes from gitlab-org/gitlab@master

15 files changed, 224 insertions, 44 deletions

diff --git a/app/assets/javascripts/flash.js b/app/assets/javascripts/flash.js
index 741171b185a..1287a7ed746 100644
--- a/app/assets/javascripts/flash.js
+++ b/app/assets/javascripts/flash.js
@@ -9,6 +9,8 @@ const FLASH_TYPES = {
   WARNING: 'warning',
 };
 
+const FLASH_CLOSED_EVENT = 'flashClosed';
+
 const getCloseEl = (flashEl) => {
   return flashEl.querySelector('.js-close-icon');
 };
@@ -26,6 +28,7 @@ const hideFlash = (flashEl, fadeTransition = true) => {
     () => {
       flashEl.remove();
       window.dispatchEvent(new Event('resize'));
+      flashEl.dispatchEvent(new Event(FLASH_CLOSED_EVENT));
       if (document.body.classList.contains('flash-shown'))
         document.body.classList.remove('flash-shown');
     },
@@ -132,4 +135,5 @@ export {
   hideFlash,
   removeFlashClickListener,
   FLASH_TYPES,
+  FLASH_CLOSED_EVENT,
 };
diff --git a/app/assets/javascripts/integrations/constants.js b/app/assets/javascripts/integrations/constants.js
index 8a8d38b295c..d214ee4ded6 100644
--- a/app/assets/javascripts/integrations/constants.js
+++ b/app/assets/javascripts/integrations/constants.js
@@ -1,4 +1,4 @@
-import { s__ } from '~/locale';
+import { s__, __ } from '~/locale';
 
 export const TEST_INTEGRATION_EVENT = 'testIntegration';
 export const SAVE_INTEGRATION_EVENT = 'saveIntegration';
@@ -21,3 +21,9 @@ export const overrideDropdownDescriptions = {
     'Integrations|Default settings are inherited from the instance level.',
   ),
 };
+
+export const I18N_FETCH_TEST_SETTINGS_DEFAULT_ERROR_MESSAGE = s__(
+  'Integrations|Connection failed. Please check your settings.',
+);
+export const I18N_DEFAULT_ERROR_MESSAGE = __('Something went wrong on our end.');
+export const I18N_SUCCESSFUL_CONNECTION_MESSAGE = s__('Integrations|Connection successful.');
diff --git a/app/assets/javascripts/integrations/integration_settings_form.js b/app/assets/javascripts/integrations/integration_settings_form.js
index f33364d5545..f519fc87c46 100644
--- a/app/assets/javascripts/integrations/integration_settings_form.js
+++ b/app/assets/javascripts/integrations/integration_settings_form.js
@@ -1,5 +1,4 @@
 import { delay } from 'lodash';
-import { __, s__ } from '~/locale';
 import toast from '~/vue_shared/plugins/global_toast';
 import axios from '../lib/utils/axios_utils';
 import initForm from './edit';
@@ -10,6 +9,9 @@ import {
   GET_JIRA_ISSUE_TYPES_EVENT,
   TOGGLE_INTEGRATION_EVENT,
   VALIDATE_INTEGRATION_FORM_EVENT,
+  I18N_FETCH_TEST_SETTINGS_DEFAULT_ERROR_MESSAGE,
+  I18N_DEFAULT_ERROR_MESSAGE,
+  I18N_SUCCESSFUL_CONNECTION_MESSAGE,
 } from './constants';
 
 export default class IntegrationSettingsForm {
@@ -104,11 +106,7 @@ export default class IntegrationSettingsForm {
     return this.fetchTestSettings(formData)
       .then(
         ({
-          data: {
-            issuetypes,
-            error,
-            message = s__('Integrations|Connection failed. Please check your settings.'),
-          },
+          data: { issuetypes, error, message = I18N_FETCH_TEST_SETTINGS_DEFAULT_ERROR_MESSAGE },
         }) => {
           if (error || !issuetypes?.length) {
             eventHub.$emit(VALIDATE_INTEGRATION_FORM_EVENT);
@@ -118,7 +116,7 @@ export default class IntegrationSettingsForm {
           dispatch('receiveJiraIssueTypesSuccess', issuetypes);
         },
       )
-      .catch(({ message = __('Something went wrong on our end.') }) => {
+      .catch(({ message = I18N_DEFAULT_ERROR_MESSAGE }) => {
         dispatch('receiveJiraIssueTypesError', message);
       });
   }
@@ -140,11 +138,11 @@ export default class IntegrationSettingsForm {
           toast(`${data.message} ${data.service_response}`);
         } else {
           this.vue.$store.dispatch('receiveJiraIssueTypesSuccess', data.issuetypes);
-          toast(s__('Integrations|Connection successful.'));
+          toast(I18N_SUCCESSFUL_CONNECTION_MESSAGE);
         }
       })
       .catch(() => {
-        toast(__('Something went wrong on our end.'));
+        toast(I18N_DEFAULT_ERROR_MESSAGE);
       })
       .finally(() => {
         this.vue.$store.dispatch('setIsTesting', false);
diff --git a/app/assets/javascripts/pages/users/terms/index/index.js b/app/assets/javascripts/pages/users/terms/index/index.js
new file mode 100644
index 00000000000..29ddde6da94
--- /dev/null
+++ b/app/assets/javascripts/pages/users/terms/index/index.js
@@ -0,0 +1,4 @@
+import { initTermsApp } from '~/terms';
+import { waitForCSSLoaded } from '~/helpers/startup_css_helper';
+
+waitForCSSLoaded(initTermsApp);
diff --git a/app/assets/javascripts/terms/components/app.vue b/app/assets/javascripts/terms/components/app.vue
new file mode 100644
index 00000000000..aedf5b6acfe
--- /dev/null
+++ b/app/assets/javascripts/terms/components/app.vue
@@ -0,0 +1,117 @@
+<script>
+import $ from 'jquery';
+import { GlButton, GlIntersectionObserver, GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';
+
+import { FLASH_TYPES, FLASH_CLOSED_EVENT } from '~/flash';
+import { isLoggedIn } from '~/lib/utils/common_utils';
+import { __ } from '~/locale';
+import csrf from '~/lib/utils/csrf';
+import '~/behaviors/markdown/render_gfm';
+
+export default {
+  name: 'TermsApp',
+  i18n: {
+    accept: __('Accept terms'),
+    continue: __('Continue'),
+    decline: __('Decline and sign out'),
+  },
+  flashElements: [],
+  csrf,
+  directives: {
+    SafeHtml,
+  },
+  components: { GlButton, GlIntersectionObserver },
+  inject: ['terms', 'permissions', 'paths'],
+  data() {
+    return {
+      acceptDisabled: true,
+    };
+  },
+  computed: {
+    isLoggedIn,
+  },
+  mounted() {
+    this.renderGFM();
+    this.setScrollableViewportHeight();
+
+    this.$options.flashElements = [
+      ...document.querySelectorAll(
+        Object.values(FLASH_TYPES)
+          .map((flashType) => `.flash-${flashType}`)
+          .join(','),
+      ),
+    ];
+
+    this.$options.flashElements.forEach((flashElement) => {
+      flashElement.addEventListener(FLASH_CLOSED_EVENT, this.handleFlashClose);
+    });
+  },
+  beforeDestroy() {
+    this.$options.flashElements.forEach((flashElement) => {
+      flashElement.removeEventListener(FLASH_CLOSED_EVENT, this.handleFlashClose);
+    });
+  },
+  methods: {
+    renderGFM() {
+      $(this.$refs.gfmContainer).renderGFM();
+    },
+    handleBottomReached() {
+      this.acceptDisabled = false;
+    },
+    setScrollableViewportHeight() {
+      // Reset `max-height` inline style
+      this.$refs.scrollableViewport.style.maxHeight = '';
+
+      const { scrollHeight, clientHeight } = document.documentElement;
+
+      // Set `max-height` to 100vh minus all elements that are NOT the scrollable viewport (header, footer, alerts, etc)
+      this.$refs.scrollableViewport.style.maxHeight = `calc(100vh - ${
+        scrollHeight - clientHeight
+      }px)`;
+    },
+    handleFlashClose(event) {
+      this.setScrollableViewportHeight();
+      event.target.removeEventListener(FLASH_CLOSED_EVENT, this.handleFlashClose);
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <div class="gl-card-body gl-relative gl-pb-0 gl-px-0" data-qa-selector="terms_content">
+      <div
+        class="terms-fade gl-absolute gl-left-5 gl-right-5 gl-bottom-0 gl-h-11 gl-pointer-events-none"
+      ></div>
+      <div
+        ref="scrollableViewport"
+        data-testid="scrollable-viewport"
+        class="gl-h-100vh gl-overflow-y-auto gl-pb-11 gl-px-5"
+      >
+        <div ref="gfmContainer" v-safe-html="terms"></div>
+        <gl-intersection-observer @appear="handleBottomReached">
+          <div></div>
+        </gl-intersection-observer>
+      </div>
+    </div>
+    <div v-if="isLoggedIn" class="gl-card-footer gl-display-flex gl-justify-content-end">
+      <form v-if="permissions.canDecline" method="post" :action="paths.decline">
+        <gl-button type="submit">{{ $options.i18n.decline }}</gl-button>
+        <input :value="$options.csrf.token" type="hidden" name="authenticity_token" />
+      </form>
+      <form v-if="permissions.canAccept" class="gl-ml-3" method="post" :action="paths.accept">
+        <gl-button
+          type="submit"
+          variant="confirm"
+          :disabled="acceptDisabled"
+          data-qa-selector="accept_terms_button"
+          >{{ $options.i18n.accept }}</gl-button
+        >
+        <input :value="$options.csrf.token" type="hidden" name="authenticity_token" />
+      </form>
+      <gl-button v-else class="gl-ml-3" :href="paths.root" variant="confirm">{{
+        $options.i18n.continue
+      }}</gl-button>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/terms/index.js b/app/assets/javascripts/terms/index.js
new file mode 100644
index 00000000000..dc4f1190eb8
--- /dev/null
+++ b/app/assets/javascripts/terms/index.js
@@ -0,0 +1,23 @@
+import Vue from 'vue';
+
+import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
+import TermsApp from './components/app.vue';
+
+export const initTermsApp = () => {
+  const el = document.getElementById('js-terms-of-service');
+
+  if (!el) return false;
+
+  const { terms, permissions, paths } = convertObjectPropsToCamelCase(
+    JSON.parse(el.dataset.termsData),
+    { deep: true },
+  );
+
+  return new Vue({
+    el,
+    provide: { terms, permissions, paths },
+    render(createElement) {
+      return createElement(TermsApp);
+    },
+  });
+};
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_info.vue b/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_info.vue
index cbace1ad57c..f4f611dfd1b 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_info.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_info.vue
@@ -12,13 +12,12 @@ import {
   CANCELED,
   SKIPPED,
 } from './constants';
-import MemoryUsage from './memory_usage.vue';
 
 export default {
   name: 'DeploymentInfo',
   components: {
     GlLink,
-    MemoryUsage,
+    MemoryUsage: () => import('./memory_usage.vue'),
     TooltipOnTruncate,
   },
   directives: {
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_list.vue b/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_list.vue
index d3384903cce..655acf28253 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_list.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_list.vue
@@ -2,10 +2,11 @@
 import { GlSprintf } from '@gitlab/ui';
 import { n__ } from '~/locale';
 import MrCollapsibleExtension from '../mr_collapsible_extension.vue';
+import Deployment from './deployment.vue';
 
 export default {
   components: {
-    Deployment: () => import('./deployment.vue'),
+    Deployment,
     GlSprintf,
     MrCollapsibleExtension,
   },
diff --git a/app/assets/stylesheets/framework.scss b/app/assets/stylesheets/framework.scss
index 06a8694eb3d..c1c8bfffff7 100644
--- a/app/assets/stylesheets/framework.scss
+++ b/app/assets/stylesheets/framework.scss
@@ -62,7 +62,6 @@
 @import 'framework/sortable';
 @import 'framework/ci_variable_list';
 @import 'framework/feature_highlight';
-@import 'framework/terms';
 @import 'framework/read_more';
 @import 'framework/flex_grid';
 @import 'framework/system_messages';
diff --git a/app/assets/stylesheets/framework/terms.scss b/app/assets/stylesheets/page_bundles/terms.scss
index b07d6023127..8eb66e58aed 100644
--- a/app/assets/stylesheets/framework/terms.scss
+++ b/app/assets/stylesheets/page_bundles/terms.scss
@@ -1,18 +1,22 @@
+@import 'mixins_and_variables_and_functions';
+
 .terms {
+  .with-system-header &,
+  .with-system-header.with-performance-bar &,
   .with-performance-bar & {
     margin-top: 0;
   }
 
-  .alert-wrapper {
-    min-height: $header-height + $gl-padding;
+  .terms-fade {
+    background: linear-gradient(0deg, $white 0%, rgba($white, 0.5) 100%);
   }
 
   .content {
     padding-top: $gl-padding;
   }
 
-  .card {
-    .card-header {
+  .gl-card {
+    .gl-card-header {
       display: flex;
       align-items: center;
       justify-content: space-between;
diff --git a/app/helpers/terms_helper.rb b/app/helpers/terms_helper.rb
new file mode 100644
index 00000000000..5f321551413
--- /dev/null
+++ b/app/helpers/terms_helper.rb
@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module TermsHelper
+  def terms_data(terms, redirect)
+    redirect_params = { redirect: redirect } if redirect
+
+    {
+      terms: markdown_field(terms, :terms),
+      permissions: {
+        can_accept: can?(current_user, :accept_terms, terms),
+        can_decline: can?(current_user, :decline_terms, terms)
+      },
+      paths: {
+        accept: accept_term_path(terms, redirect_params),
+        decline: decline_term_path(terms, redirect_params),
+        root: root_path
+      }
+    }.to_json
+  end
+end
diff --git a/app/models/clusters/applications/runner.rb b/app/models/clusters/applications/runner.rb
index 25ae0b30486..59a9251d6b7 100644
--- a/app/models/clusters/applications/runner.rb
+++ b/app/models/clusters/applications/runner.rb
@@ -3,7 +3,7 @@
 module Clusters
   module Applications
     class Runner < ApplicationRecord
-      VERSION = '0.31.0'
+      VERSION = '0.34.0'
 
       self.table_name = 'clusters_applications_runners'
 
diff --git a/app/views/layouts/terms.html.haml b/app/views/layouts/terms.html.haml
index 4d5c354388f..caa46b7bc56 100644
--- a/app/views/layouts/terms.html.haml
+++ b/app/views/layouts/terms.html.haml
@@ -1,21 +1,22 @@
 !!! 5
+- add_page_specific_style 'page_bundles/terms'
 - @hide_breadcrumbs = true
 %html{ lang: I18n.locale, class: page_class }
   = render "layouts/head"
 
   %body{ data: { page: body_data_page } }
     .layout-page.terms{ class: page_class }
-      .content-wrapper
+      .content-wrapper.gl-pb-5
         .mobile-overlay
         .alert-wrapper
           = render "layouts/broadcast"
           = render 'layouts/header/read_only_banner'
-          = render "layouts/flash", extra_flash_class: 'limit-container-width'
+          = render "layouts/flash"
 
         %div{ class: "#{container_class} limit-container-width" }
           .content{ id: "content-body" }
-            .card
-              .card-header
+            .gl-card
+              .gl-card-header
                 = brand_header_logo
                 - logo_text = brand_header_logo_type
                 - if logo_text.present?
diff --git a/app/views/notify/in_product_marketing_email.html.haml b/app/views/notify/in_product_marketing_email.html.haml
index 575e967d5f8..a85fa7c519f 100644
--- a/app/views/notify/in_product_marketing_email.html.haml
+++ b/app/views/notify/in_product_marketing_email.html.haml
@@ -166,10 +166,11 @@
                         = about_link('mailers/in_product_marketing/gitlab-logo-gray-rgb.png', 200)
                     %tr
                       %td{ "aria-hidden" => "true", height: "30", style: "font-size: 0; line-height: 0;" }
-                    %tr{ style: "background-color: #ffffff;" }
-                      %td{ style: "color: #424242; padding: 10px 30px; text-align: center; font-family: 'Source Sans Pro', helvetica, arial, sans-serif;font-size: 16px; line-height: 22px; border: 1px solid #dddddd" }
-                        %p
-                          = @message.progress.html_safe
+                    - if @message.series?
+                      %tr{ style: "background-color: #ffffff;" }
+                        %td{ style: "color: #424242; padding: 10px 30px; text-align: center; font-family: 'Source Sans Pro', helvetica, arial, sans-serif;font-size: 16px; line-height: 22px; border: 1px solid #dddddd" }
+                          %p
+                            = @message.progress.html_safe
                     %tr
                       %td{ bgcolor: "#ffffff", height: "auto", style: "max-width: 600px; width: 100%; text-align: center; height: 200px; padding: 25px 15px; mso-line-height-rule: exactly; min-height: 40px; font-family: 'Source Sans Pro', helvetica, arial, sans-serif;", valign: "middle", width: "100%" }
                         = inline_image_link(@message.logo_path, { width: '150', style: 'width: 150px;' })
diff --git a/app/views/users/terms/index.html.haml b/app/views/users/terms/index.html.haml
index 771ee693120..92095e78f69 100644
--- a/app/views/users/terms/index.html.haml
+++ b/app/views/users/terms/index.html.haml
@@ -1,20 +1,23 @@
 - redirect_params = { redirect: @redirect } if @redirect
 - accept_term_link = accept_term_path(@term, redirect_params)
 
-.card-body.rendered-terms{ data: { qa_selector: 'terms_content' } }
-  = markdown_field(@term, :terms)
-- if current_user
-  = render_if_exists 'devise/shared/form_phone_verification', accept_term_link: accept_term_link, inline: true
-  .card-footer.footer-block.clearfix
-    - if can?(current_user, :accept_terms, @term)
-      .float-right
-        = button_to accept_term_link, class: 'gl-button btn btn-confirm gl-ml-3', data: { qa_selector: 'accept_terms_button' } do
-          = _('Accept terms')
-    - else
-      .float-right
-        = link_to root_path, class: 'gl-button btn btn-confirm gl-ml-3' do
-          = _('Continue')
-    - if can?(current_user, :decline_terms, @term)
-      .float-right
-        = button_to decline_term_path(@term, redirect_params), class: 'gl-button btn btn-default gl-ml-3' do
-          =  _('Decline and sign out')
+- if Feature.enabled?(:terms_of_service_vue, current_user, default_enabled: :yaml)
+  #js-terms-of-service{ data: { terms_data: terms_data(@term, @redirect) } }
+- else
+  .card-body.rendered-terms{ data: { qa_selector: 'terms_content' } }
+    = markdown_field(@term, :terms)
+  - if current_user
+    = render_if_exists 'devise/shared/form_phone_verification', accept_term_link: accept_term_link, inline: true
+    .card-footer.footer-block.clearfix
+      - if can?(current_user, :accept_terms, @term)
+        .float-right
+          = button_to accept_term_link, class: 'gl-button btn btn-confirm gl-ml-3', data: { qa_selector: 'accept_terms_button' } do
+            = _('Accept terms')
+      - else
+        .float-right
+          = link_to root_path, class: 'gl-button btn btn-confirm gl-ml-3' do
+            = _('Continue')
+      - if can?(current_user, :decline_terms, @term)
+        .float-right
+          = button_to decline_term_path(@term, redirect_params), class: 'gl-button btn btn-default gl-ml-3' do
+            =  _('Decline and sign out')