Maintenance Mode - First Iteration

This MR adds the Maintenance Mode
settings to the Admin/Application settings.

The Backend has not been implemented yet,
so this MR is stricly the UI behind a
feature flag :maintenance_mode.

This MR sets up the Vue bootstrapping
and fields for when the backend is ready.

app/assets/javascripts/maintenance_mode_settings/components/app.vue

+<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>

app/assets/javascripts/maintenance_mode_settings/index.js

+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');
+    },
+  });
+};

app/assets/javascripts/pages/admin/application_settings/index.js

 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();

app/views/admin/application_settings/general.html.haml

@@ -104,6 +104,18 @@
 
       = f.submit _('Save changes'), class: "btn btn-success"
 
+- if Feature.enabled?(:maintenance_mode)
+  %section.settings.no-animate#js-maintenance-mode-toggle{ class: ('expanded' if expanded_by_default?) }
+    .settings-header
+      %h4
+        = _('Maintenance mode')
+      %button.btn.btn-default.js-settings-toggle{ type: 'button' }
+        = expanded_by_default? ? _('Collapse') : _('Expand')
+      %p
+        = _('Prevent users from performing write operations on GitLab while performing maintenance.')
+    .settings-content
+      #js-maintenance-mode-settings
+
 - if Feature.enabled?(:instance_level_integrations)
   = render_if_exists 'admin/application_settings/elasticsearch_form'
   = render 'admin/application_settings/plantuml'

locale/gitlab.pot

@@ -7488,6 +7488,9 @@ msgstr ""
 msgid "Enable header and footer in emails"
 msgstr ""
 
+msgid "Enable maintenance mode"
+msgstr ""
+
 msgid "Enable mirror configuration"
 msgstr ""
 
@@ -9630,6 +9633,9 @@ msgstr ""
 msgid "GitLab is obtaining a Let's Encrypt SSL certificate for this domain. This process can take some time. Please try again later."
 msgstr ""
 
+msgid "GitLab is undergoing maintenance and is operating in a read-only mode."
+msgstr ""
+
 msgid "GitLab member or Email address"
 msgstr ""
 
@@ -12124,6 +12130,9 @@ msgstr ""
 msgid "Made this issue confidential."
 msgstr ""
 
+msgid "Maintenance mode"
+msgstr ""
+
 msgid "Make and review changes in the browser with the Web IDE"
 msgstr ""
 
@@ -13474,6 +13483,9 @@ msgstr ""
 msgid "Nodes"
 msgstr ""
 
+msgid "Non-admin users can sign in with read-only access and make read-only API requests."
+msgstr ""
+
 msgid "None"
 msgstr ""
 
@@ -14847,6 +14859,9 @@ msgstr ""
 msgid "Prevent users from modifing merge request approvers list"
 msgstr ""
 
+msgid "Prevent users from performing write operations on GitLab while performing maintenance."
+msgstr ""
+
 msgid "Preview"
 msgstr ""
 

spec/frontend/maintenance_mode_settings/components/app_spec.js

+import { shallowMount } from '@vue/test-utils';
+import MaintenanceModeSettingsApp from '~/maintenance_mode_settings/components/app.vue';
+import { GlToggle, GlFormTextarea, GlButton } from '@gitlab/ui';
+
+describe('MaintenanceModeSettingsApp', () => {
+  let wrapper;
+
+  const createComponent = () => {
+    wrapper = shallowMount(MaintenanceModeSettingsApp);
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  const findMaintenanceModeSettingsContainer = () => wrapper.find('article');
+  const findGlToggle = () => wrapper.find(GlToggle);
+  const findGlFormTextarea = () => wrapper.find(GlFormTextarea);
+  const findGlButton = () => wrapper.find(GlButton);
+
+  describe('template', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('renders the Maintenance Mode Settings container', () => {
+      expect(findMaintenanceModeSettingsContainer().exists()).toBe(true);
+    });
+
+    it('renders the GlToggle', () => {
+      expect(findGlToggle().exists()).toBe(true);
+    });
+
+    it('renders the GlFormTextarea', () => {
+      expect(findGlFormTextarea().exists()).toBe(true);
+    });
+
+    it('renders the GlButton', () => {
+      expect(findGlButton().exists()).toBe(true);
+    });
+  });
+});

spec/views/admin/application_settings/general.html.haml_spec.rb

@@ -33,4 +33,32 @@ describe 'admin/application_settings/general.html.haml' do
       end
     end
   end
+
+  describe 'Maintenance mode' do
+    let(:maintenance_mode_flag) { true }
+
+    before do
+      assign(:application_setting, app_settings)
+      stub_feature_flags(maintenance_mode: maintenance_mode_flag)
+      allow(view).to receive(:current_user).and_return(user)
+    end
+
+    context 'when maintenance_mode feature is enabled' do
+      it 'show the Maintenance mode section' do
+        render
+
+        expect(rendered).to have_css('#js-maintenance-mode-toggle')
+      end
+    end
+
+    context 'when maintenance_mode feature is disabled' do
+      let(:maintenance_mode_flag) { false }
+
+      it 'hide the Maintenance mode section' do
+        render
+
+        expect(rendered).not_to have_css('#js-maintenance-mode-toggle')
+      end
+    end
+  end
 end