Add status page url to setting form in UI

Adds a form field to the status page setting form
under Settings > Operations > Status page. This
will enable the addition of features which depend
on the GitLab project knowing the url of the status
page to communicate to the user and make it easy
to navigate to the status page.

ee/app/assets/javascripts/status_page_settings/components/settings_form.vue

@@ -34,6 +34,10 @@ export default {
     ),
     introLinkText: s__('StatusPage|your status page frontend.'),
     activeLabel: s__('StatusPage|Active'),
+    url: {
+      label: s__('StatusPage|Status page URL'),
+      linkText: s__('StatusPage|Status page frontend documentation'),
+    },
     bucket: {
       label: s__('StatusPage|S3 Bucket name'),
       helpText: s__('StatusPage|Bucket %{docsLink}'),
@@ -55,6 +59,7 @@ export default {
     ...mapState(['loading']),
     ...mapComputed([
       { key: 'enabled', updateFn: 'setStatusPageEnabled' },
+      { key: 'url', updateFn: 'setStatusPageUrl' },
       { key: 'bucketName', updateFn: 'setStatusPageBucketName' },
       { key: 'region', updateFn: 'setStatusPageRegion' },
       { key: 'awsAccessKey', updateFn: 'setStatusPageAccessKey' },
@@ -99,6 +104,20 @@ export default {
           >
         </gl-form-group>
 
+        <gl-form-group
+          :label="$options.i18n.url.label"
+          label-size="sm"
+          label-for="status-page-url"
+          class="col-8 col-md-9 gl-pl-0 mb-3"
+        >
+          <gl-form-input id="status-page-url" v-model="url" />
+          <p class="form-text text-muted">
+            <gl-link href="/help/user/project/status_page/index.html">
+              {{ $options.i18n.url.linkText }}
+            </gl-link>
+          </p>
+        </gl-form-group>
+
         <gl-form-group
           :label="$options.i18n.bucket.label"
           label-size="sm"
@@ -147,7 +166,7 @@ export default {
         <gl-form-group
           :label="$options.i18n.accessKey.label"
           label-size="sm"
-          label-for="status-page-aws-access-key-id"
+          label-for="status-page-aws-access-key"
           class="col-8 col-md-9 gl-pl-0 mb-3"
         >
           <gl-form-input id="status-page-aws-access-key " v-model="awsAccessKey" />

ee/app/assets/javascripts/status_page_settings/store/actions.js

@@ -6,6 +6,8 @@ import * as mutationTypes from './mutation_types';
 
 export const setStatusPageEnabled = ({ commit }, { enabled }) =>
   commit(mutationTypes.SET_STATUS_PAGE_ENABLED, enabled);
+export const setStatusPageUrl = ({ commit }, { url }) =>
+  commit(mutationTypes.SET_STATUS_PAGE_URL, url);
 export const setStatusPageBucketName = ({ commit }, { bucketName }) =>
   commit(mutationTypes.SET_BUCKET_NAME, bucketName);
 export const setStatusPageRegion = ({ commit }, { region }) =>
@@ -23,6 +25,7 @@ export const updateStatusPageSettings = ({ state, dispatch, commit }) => {
       project: {
         status_page_setting_attributes: {
           enabled: state.enabled,
+          status_page_url: state.url,
           aws_s3_bucket_name: state.bucketName,
           aws_region: state.region,
           aws_access_key: state.awsAccessKey,

ee/app/assets/javascripts/status_page_settings/store/mutation_types.js

 export const SET_STATUS_PAGE_ENABLED = 'SET_STATUS_PAGE_ENABLED';
+export const SET_STATUS_PAGE_URL = 'SET_STATUS_PAGE_URL';
 export const SET_BUCKET_NAME = 'SET_BUCKET_NAME';
 export const SET_REGION = 'SET_REGION';
 export const SET_ACCESS_KEY_ID = 'SET_ACCESS_KEY_ID';

ee/app/assets/javascripts/status_page_settings/store/mutations.js

@@ -4,6 +4,9 @@ export default {
   [types.SET_STATUS_PAGE_ENABLED](state, enabled) {
     state.enabled = enabled;
   },
+  [types.SET_STATUS_PAGE_URL](state, url) {
+    state.url = url;
+  },
   [types.SET_BUCKET_NAME](state, bucketName) {
     state.bucketName = bucketName;
   },

ee/app/assets/javascripts/status_page_settings/store/state.js

@@ -2,6 +2,7 @@ import { parseBoolean } from '~/lib/utils/common_utils';
 
 export default (initialState = {}) => ({
   enabled: parseBoolean(initialState.enabled) || false,
+  url: initialState.url || '',
   bucketName: initialState.bucketName || '',
   region: initialState.region || '',
   awsAccessKey: initialState.awsAccessKey || '',

ee/changelogs/unreleased/sy-write-status-page-url-field.yml

+---
+title: Add status page url to setting form in UI
+merge_request: 29359
+author:
+type: added

ee/spec/frontend/status_page_settings/__snapshots__/settings_form_spec.js.snap

@@ -53,6 +53,30 @@ exports[`Status Page settings form default state should match the default snapsh
         </gl-form-checkbox-stub>
       </gl-form-group-stub>
        
+      <gl-form-group-stub
+        class="col-8 col-md-9 gl-pl-0 mb-3"
+        label="Status page URL"
+        label-for="status-page-url"
+        label-size="sm"
+      >
+        <gl-form-input-stub
+          id="status-page-url"
+          value=""
+        />
+         
+        <p
+          class="form-text text-muted"
+        >
+          <gl-link-stub
+            href="/help/user/project/status_page/index.html"
+          >
+            
+            Status page frontend documentation
+          
+          </gl-link-stub>
+        </p>
+      </gl-form-group-stub>
+       
       <gl-form-group-stub
         class="col-8 col-md-9 gl-pl-0 mb-3"
         label="S3 Bucket name"
@@ -97,7 +121,7 @@ exports[`Status Page settings form default state should match the default snapsh
       <gl-form-group-stub
         class="col-8 col-md-9 gl-pl-0 mb-3"
         label="AWS access key ID"
-        label-for="status-page-aws-access-key-id"
+        label-for="status-page-aws-access-key"
         label-size="sm"
       >
         <gl-form-input-stub

ee/spec/frontend/status_page_settings/store/actions_spec.js

@@ -28,12 +28,13 @@ describe('Status Page actions', () => {
   };
 
   it.each`
-    mutation                         | action                            | value          | key
-    ${types.SET_STATUS_PAGE_ENABLED} | ${'setStatusPageEnabled'}         | ${true}        | ${'enabled'}
-    ${types.SET_BUCKET_NAME}         | ${'setStatusPageBucketName'}      | ${'my-bucket'} | ${'bucketName'}
-    ${types.SET_REGION}              | ${'setStatusPageRegion'}          | ${'us-west'}   | ${'region'}
-    ${types.SET_ACCESS_KEY_ID}       | ${'setStatusPageAccessKey'}       | ${'key-id'}    | ${'awsAccessKey'}
-    ${types.SET_SECRET_ACCESS_KEY}   | ${'setStatusPageSecretAccessKey'} | ${'secret'}    | ${'awsSecretKey'}
+    mutation                         | action                            | value                 | key
+    ${types.SET_STATUS_PAGE_ENABLED} | ${'setStatusPageEnabled'}         | ${true}               | ${'enabled'}
+    ${types.SET_STATUS_PAGE_URL}     | ${'setStatusPageUrl'}             | ${'http://status.io'} | ${'url'}
+    ${types.SET_BUCKET_NAME}         | ${'setStatusPageBucketName'}      | ${'my-bucket'}        | ${'bucketName'}
+    ${types.SET_REGION}              | ${'setStatusPageRegion'}          | ${'us-west'}          | ${'region'}
+    ${types.SET_ACCESS_KEY_ID}       | ${'setStatusPageAccessKey'}       | ${'key-id'}           | ${'awsAccessKey'}
+    ${types.SET_SECRET_ACCESS_KEY}   | ${'setStatusPageSecretAccessKey'} | ${'secret'}           | ${'awsSecretKey'}
   `('$action will commit $mutation with $value', ({ mutation, action, value, key }) => {
     testAction(
       actions[action],

locale/gitlab.pot

@@ -19727,6 +19727,12 @@ msgstr ""
 msgid "StatusPage|Status page"
 msgstr ""
 
+msgid "StatusPage|Status page URL"
+msgstr ""
+
+msgid "StatusPage|Status page frontend documentation"
+msgstr ""
+
 msgid "StatusPage|To publish incidents to an external status page, GitLab will store a JSON file in your Amazon S3 account in a location accessible to your external status page service. Make sure to also set up %{docsLink}"
 msgstr ""