All files / ee/app/assets/javascripts/maintenance_mode_settings/components app.vue

100% Statements 5/5
100% Branches 2/2
100% Functions 1/1
100% Lines 5/5

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67  1x 1x 1x 1x                                                                   34x                                                        
<script>
import { GlForm, GlToggle, GlFormGroup, GlFormTextarea, GlButton, GlLoadingIcon } from '@gitlab/ui';
import { mapActions, mapState } from 'vuex';
import { __ } from '~/locale';
import { mapComputed } from '~/vuex_shared/bindings';
 
export default {
  name: 'MaintenanceModeSettingsApp',
  i18n: {
    toggleLabel: __('Enable maintenance mode'),
    toggleHelpText: __(
      'Non-admin users are restricted to read-only access, in both GitLab UI and API.',
    ),
    bannerMessagePlaceholder: __(
      'GitLab is undergoing maintenance and is operating in read-only mode.',
    ),
    buttonText: __('Save changes'),
  },
  components: {
    GlForm,
    GlToggle,
    GlFormGroup,
    GlFormTextarea,
    GlButton,
    GlLoadingIcon,
  },
  computed: {
    ...mapState(['loading']),
    ...mapComputed([
      { key: 'maintenanceEnabled', updateFn: 'setMaintenanceEnabled' },
      { key: 'bannerMessage', updateFn: 'setBannerMessage' },
    ]),
  },
  methods: {
    ...mapActions(['updateMaintenanceModeSettings']),
  },
};
</script>
<template>
  <section>
    <gl-loading-icon v-if="loading" size="xl" />
    <gl-form v-else @submit.prevent="updateMaintenanceModeSettings">
      <div class="gl-display-flex gl-align-items-center gl-mb-4">
        <gl-toggle
          v-model="maintenanceEnabled"
          :label="$options.i18n.toggleLabel"
          label-position="hidden"
        />
        <div class="gl-ml-3">
          <p class="gl-mb-0">{{ $options.i18n.toggleLabel }}</p>
          <p class="gl-mb-0 gl-text-gray-500">
            {{ $options.i18n.toggleHelpText }}
          </p>
        </div>
      </div>
      <gl-form-group label="Banner Message" label-for="maintenanceBannerMessage">
        <gl-form-textarea
          id="maintenanceBannerMessage"
          v-model="bannerMessage"
          :placeholder="$options.i18n.bannerMessagePlaceholder"
        />
      </gl-form-group>
      <gl-button variant="confirm" type="submit">{{ $options.i18n.buttonText }}</gl-button>
    </gl-form>
  </section>
</template>