Add latest changes from gitlab-org/gitlab@master

2 files changed, 64 insertions, 0 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');
+    },
+  });
+};