Add latest changes from gitlab-org/gitlab@master

7 files changed, 137 insertions, 4 deletions

diff --git a/app/assets/javascripts/maintenance_mode_settings/components/app.vue b/app/assets/javascripts/maintenance_mode_settings/components/app.vue
new file mode 100644
index 00000000000..47150c9dc95
--- /dev/null
+++ b/app/assets/javascripts/maintenance_mode_settings/components/app.vue
@@ -0,0 +1,44 @@
+<script>
+import { GlToggle, GlFormGroup, GlFormTextarea, GlButton } from '@gitlab/ui';
+
+export default {
+  name: 'MaintenanceModeSettingsApp',
+  components: {
+    GlToggle,
+    GlFormGroup,
+    GlFormTextarea,
+    GlButton,
+  },
+  data() {
+    return {
+      inMaintenanceMode: false,
+      bannerMessage: '',
+    };
+  },
+};
+</script>
+<template>
+  <article>
+    <div class="d-flex align-items-center mb-3">
+      <gl-toggle v-model="inMaintenanceMode" class="mb-0" />
+      <div class="ml-2">
+        <p class="mb-0">{{ __('Enable maintenance mode') }}</p>
+        <p class="mb-0 text-secondary-500">
+          {{
+            __('Non-admin users can sign in with read-only access and make read-only API requests.')
+          }}
+        </p>
+      </div>
+    </div>
+    <gl-form-group label="Banner Message" label-for="maintenanceBannerMessage">
+      <gl-form-textarea
+        id="maintenanceBannerMessage"
+        v-model="bannerMessage"
+        :placeholder="__(`GitLab is undergoing maintenance and is operating in a read-only mode.`)"
+      />
+    </gl-form-group>
+    <div class="mt-4">
+      <gl-button variant="success">{{ __('Save changes') }}</gl-button>
+    </div>
+  </article>
+</template>
diff --git a/app/assets/javascripts/maintenance_mode_settings/index.js b/app/assets/javascripts/maintenance_mode_settings/index.js
new file mode 100644
index 00000000000..7a80233faf0
--- /dev/null
+++ b/app/assets/javascripts/maintenance_mode_settings/index.js
@@ -0,0 +1,20 @@
+import Vue from 'vue';
+import Translate from '~/vue_shared/translate';
+import MaintenanceModeSettingsApp from './components/app.vue';
+
+Vue.use(Translate);
+
+export default () => {
+  const el = document.getElementById('js-maintenance-mode-settings');
+
+  return new Vue({
+    el,
+    components: {
+      MaintenanceModeSettingsApp,
+    },
+
+    render(createElement) {
+      return createElement('maintenance-mode-settings-app');
+    },
+  });
+};
diff --git a/app/assets/javascripts/pages/admin/application_settings/index.js b/app/assets/javascripts/pages/admin/application_settings/index.js
index 78b7e29ae53..493c216cc6e 100644
--- a/app/assets/javascripts/pages/admin/application_settings/index.js
+++ b/app/assets/javascripts/pages/admin/application_settings/index.js
@@ -1,9 +1,11 @@
 import initSettingsPanels from '~/settings_panels';
 import projectSelect from '~/project_select';
 import selfMonitor from '~/self_monitor';
+import maintenanceModeSettings from '~/maintenance_mode_settings';
 
 document.addEventListener('DOMContentLoaded', () => {
   selfMonitor();
+  maintenanceModeSettings();
   // Initialize expandable settings panels
   initSettingsPanels();
   projectSelect();
diff --git a/app/assets/javascripts/pages/projects/labels/components/promote_label_modal.vue b/app/assets/javascripts/pages/projects/labels/components/promote_label_modal.vue
index dadb20e511b..12e16b79d37 100644
--- a/app/assets/javascripts/pages/projects/labels/components/promote_label_modal.vue
+++ b/app/assets/javascripts/pages/projects/labels/components/promote_label_modal.vue
@@ -37,7 +37,8 @@ export default {
     text() {
       return sprintf(
         s__(`Labels|Promoting %{labelTitle} will make it available for all projects inside %{groupName}.
-        Existing project labels with the same title will be merged. This action cannot be reversed.`),
+        Existing project labels with the same title will be merged. If a group label with the same title exists,
+        it will also be merged. This action cannot be reversed.`),
         {
           labelTitle: this.labelTitle,
           groupName: this.groupName,
diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss
index 4d8ae8a5652..0aae2f20671 100644
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -483,6 +483,34 @@ img.emoji {
 }
 
 /** COMMON SPACING CLASSES **/
+/**
+  🚨 Do not use these classes — they are deprecated and being removed. 🚨
+  See https://gitlab.com/gitlab-org/gitlab/issues/36857 for more details.
+
+  Instead, if you need a spacing class, add it below using the following values.
+    $gl-spacing-scale-0: 0;
+    $gl-spacing-scale-1: 2px;
+    $gl-spacing-scale-2: 4px;
+    $gl-spacing-scale-3: 8px;
+    $gl-spacing-scale-4: 12px;
+    $gl-spacing-scale-5: 16px;
+    $gl-spacing-scale-6: 24px;
+    $gl-spacing-scale-7: 32px;
+    $gl-spacing-scale-8: 40px;
+    $gl-spacing-scale-9: 48px;
+    $gl-spacing-scale-10: 56px;
+    $gl-spacing-scale-11: 64px;
+    $gl-spacing-scale-12: 80px;
+    $gl-spacing-scale-13: 96px;
+
+  E.g., a padding top of 96px can be added using:
+  .gl-shim-pt-13 {
+    padding-top: 96px;
+  }
+
+  Please use -shim- so it can be differentiated from the old scale classes.
+  These will be replaced when the Gitlab UI utilities are included.
+**/
 @each $index, $padding in $spacing-scale {
   #{'.gl-p-#{$index}'} { padding: $padding; }
   #{'.gl-pl-#{$index}'} { padding-left: $padding; }
@@ -583,13 +611,11 @@ img.emoji {
 .gl-font-size-large { font-size: $gl-font-size-large; }
 
 .gl-line-height-24 { line-height: $gl-line-height-24; }
-.gl-line-height-14 { line-height: $gl-line-height-14; }
 
 .gl-font-size-0 { font-size: 0; }
 .gl-font-size-12 { font-size: $gl-font-size-12; }
 .gl-font-size-14 { font-size: $gl-font-size-14; }
 .gl-font-size-16 { font-size: $gl-font-size-16; }
-.gl-font-size-20 { font-size: $gl-font-size-20; }
 .gl-font-size-28 { font-size: $gl-font-size-28; }
 .gl-font-size-42 { font-size: $gl-font-size-42; }
 
@@ -599,3 +625,10 @@ img.emoji {
 
   border-top: 1px solid $border-color;
 }
+
+/**
+🚨 Do not use these classes — they clash with the Gitlab UI design system and will be removed. 🚨
+See https://gitlab.com/gitlab-org/gitlab/issues/36857 for more details.
+**/
+.gl-line-height-14 { line-height: $gl-line-height-14; }
+.gl-font-size-20 { font-size: $gl-font-size-20; }
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 4d858f88921..86b65ea34f3 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -11,6 +11,38 @@ $default-transition-duration: 0.15s;
 $contextual-sidebar-width: 220px;
 $contextual-sidebar-collapsed-width: 50px;
 $toggle-sidebar-height: 48px;
+
+/**
+  🚨 Do not use this spacing scale — it is deprecated and being removed. 🚨
+  See https://gitlab.com/gitlab-org/gitlab/issues/36857 for more details.
+
+  Instead, if you need a spacing class, add it to app/assets/stylesheets/framework/common.scss,
+  using the following values.
+
+    $gl-spacing-scale-0: 0;
+    $gl-spacing-scale-1: 2px;
+    $gl-spacing-scale-2: 4px;
+    $gl-spacing-scale-3: 8px;
+    $gl-spacing-scale-4: 12px;
+    $gl-spacing-scale-5: 16px;
+    $gl-spacing-scale-6: 24px;
+    $gl-spacing-scale-7: 32px;
+    $gl-spacing-scale-8: 40px;
+    $gl-spacing-scale-9: 48px;
+    $gl-spacing-scale-10: 56px;
+    $gl-spacing-scale-11: 64px;
+    $gl-spacing-scale-12: 80px;
+    $gl-spacing-scale-13: 96px;
+
+  E.g., a padding top of 96px can be added using:
+  .gl-shim-pt-13 {
+    padding-top: 96px;
+  }
+
+  Please use -shim- so it can be differentiated from the old scale classes.
+
+  These will be replaced when the Gitlab UI utilities are included.
+**/
 $spacing-scale: (
   0: 0,
   1: #{0.5 * $grid-size},
diff --git a/app/assets/stylesheets/utilities.scss b/app/assets/stylesheets/utilities.scss
index f161d76c623..925c15262e9 100644
--- a/app/assets/stylesheets/utilities.scss
+++ b/app/assets/stylesheets/utilities.scss
@@ -67,7 +67,8 @@
 .gl-bg-purple-light { background-color: $purple-light; }
 
 // Classes using mixins coming from @gitlab-ui
-// can be removed once https://gitlab.com/gitlab-org/gitlab/merge_requests/19021 has been merged
+// can be removed once the mixins are added.
+// See https://gitlab.com/gitlab-org/gitlab/issues/36857 for more details.
 .gl-bg-blue-50 { @include gl-bg-blue-50; }
 .gl-bg-red-100 { @include gl-bg-red-100; }
 .gl-bg-orange-100 { @include gl-bg-orange-100; }