Merge branch 'sy-write-status-page-url-field' into 'master'

Add status page url to setting form in UI

See merge request gitlab-org/gitlab!29359

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

@@ -19766,6 +19766,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 ""