Add latest changes from gitlab-org/gitlab@master

6 files changed, 77 insertions, 32 deletions

diff --git a/app/assets/javascripts/registry/settings/components/settings_form.vue b/app/assets/javascripts/registry/settings/components/settings_form.vue
index 402763e2e21..55a6a1ace55 100644
--- a/app/assets/javascripts/registry/settings/components/settings_form.vue
+++ b/app/assets/javascripts/registry/settings/components/settings_form.vue
@@ -1,6 +1,6 @@
 <script>
-import { mapActions } from 'vuex';
-import { GlFormGroup, GlToggle, GlFormSelect, GlFormTextarea, GlButton } from '@gitlab/ui';
+import { mapActions, mapState } from 'vuex';
+import { GlFormGroup, GlToggle, GlFormSelect, GlFormTextarea, GlButton, GlCard } from '@gitlab/ui';
 import { s__, __, sprintf } from '~/locale';
 import { NAME_REGEX_LENGTH } from '../constants';
 import { mapComputed } from '~/vuex_shared/bindings';
@@ -12,19 +12,25 @@ export default {
     GlFormSelect,
     GlFormTextarea,
     GlButton,
+    GlCard,
   },
   labelsConfig: {
     cols: 3,
     align: 'right',
   },
   computed: {
-    ...mapComputed('settings', 'updateSettings', [
-      'enabled',
-      'cadence',
-      'older_than',
-      'keep_n',
-      'name_regex',
-    ]),
+    ...mapState(['formOptions']),
+    ...mapComputed(
+      [
+        'enabled',
+        { key: 'cadence', getter: 'getCadence' },
+        { key: 'older_than', getter: 'getOlderThan' },
+        { key: 'keep_n', getter: 'getKeepN' },
+        'name_regex',
+      ],
+      'updateSettings',
+      'settings',
+    ),
     policyEnabledText() {
       return this.enabled ? __('enabled') : __('disabled');
     },
@@ -66,12 +72,12 @@ export default {
 </script>
 
 <template>
-  <div class="card">
-    <form ref="form-element" @submit.prevent="saveSettings" @reset.prevent="resetSettings">
-      <div class="card-header">
+  <form ref="form-element" @submit.prevent="saveSettings" @reset.prevent="resetSettings">
+    <gl-card>
+      <template #header>
         {{ s__('ContainerRegistry|Tag expiration policy') }}
-      </div>
-      <div class="card-body">
+      </template>
+      <template>
         <gl-form-group
           id="expiration-policy-toggle-group"
           :label-cols="$options.labelsConfig.cols"
@@ -92,9 +98,10 @@ export default {
           label-for="expiration-policy-interval"
           :label="s__('ContainerRegistry|Expiration interval:')"
         >
-          <gl-form-select id="expiration-policy-interval" v-model="older_than">
-            <option value="1">{{ __('Option 1') }}</option>
-            <option value="2">{{ __('Option 2') }}</option>
+          <gl-form-select id="expiration-policy-interval" v-model="older_than" :disabled="!enabled">
+            <option v-for="option in formOptions.olderThan" :key="option.key" :value="option.key">
+              {{ option.label }}
+            </option>
           </gl-form-select>
         </gl-form-group>
 
@@ -105,9 +112,10 @@ export default {
           label-for="expiration-policy-schedule"
           :label="s__('ContainerRegistry|Expiration schedule:')"
         >
-          <gl-form-select id="expiration-policy-schedule" v-model="cadence">
-            <option value="1">{{ __('Option 1') }}</option>
-            <option value="2">{{ __('Option 2') }}</option>
+          <gl-form-select id="expiration-policy-schedule" v-model="cadence" :disabled="!enabled">
+            <option v-for="option in formOptions.cadence" :key="option.key" :value="option.key">
+              {{ option.label }}
+            </option>
           </gl-form-select>
         </gl-form-group>
 
@@ -118,9 +126,10 @@ export default {
           label-for="expiration-policy-latest"
           :label="s__('ContainerRegistry|Expiration latest:')"
         >
-          <gl-form-select id="expiration-policy-latest" v-model="keep_n">
-            <option value="1">{{ __('Option 1') }}</option>
-            <option value="2">{{ __('Option 2') }}</option>
+          <gl-form-select id="expiration-policy-latest" v-model="keep_n" :disabled="!enabled">
+            <option v-for="option in formOptions.keepN" :key="option.key" :value="option.key">
+              {{ option.label }}
+            </option>
           </gl-form-select>
         </gl-form-group>
 
@@ -140,19 +149,30 @@ export default {
             v-model="name_regex"
             :placeholder="nameRegexPlaceholder"
             :state="nameRegexState"
+            :disabled="!enabled"
             trim
           />
           <template #description>
             <span ref="regex-description" v-html="regexHelpText"></span>
           </template>
         </gl-form-group>
-      </div>
-      <div class="card-footer text-right">
-        <gl-button ref="cancel-button" type="reset">{{ __('Cancel') }}</gl-button>
-        <gl-button ref="save-button" type="submit" :disabled="formIsValid" variant="success">
-          {{ __('Save Expiration Policy') }}
-        </gl-button>
-      </div>
-    </form>
-  </div>
+      </template>
+      <template #footer>
+        <div class="d-flex justify-content-end">
+          <gl-button ref="cancel-button" type="reset" class="mr-2 d-block">{{
+            __('Cancel')
+          }}</gl-button>
+          <gl-button
+            ref="save-button"
+            type="submit"
+            :disabled="formIsValid"
+            variant="success"
+            class="d-block"
+          >
+            {{ __('Save expiration policy') }}
+          </gl-button>
+        </div>
+      </template>
+    </gl-card>
+  </form>
 </template>
diff --git a/app/assets/javascripts/registry/settings/store/getters.js b/app/assets/javascripts/registry/settings/store/getters.js
new file mode 100644
index 00000000000..fc32a9f08e4
--- /dev/null
+++ b/app/assets/javascripts/registry/settings/store/getters.js
@@ -0,0 +1,8 @@
+import { findDefaultOption } from '../utils';
+
+export const getCadence = state =>
+  state.settings.cadence || findDefaultOption(state.formOptions.cadence);
+export const getKeepN = state =>
+  state.settings.keep_n || findDefaultOption(state.formOptions.keepN);
+export const getOlderThan = state =>
+  state.settings.older_than || findDefaultOption(state.formOptions.olderThan);
diff --git a/app/assets/javascripts/registry/settings/store/index.js b/app/assets/javascripts/registry/settings/store/index.js
index 91a35aac149..c2500454d8e 100644
--- a/app/assets/javascripts/registry/settings/store/index.js
+++ b/app/assets/javascripts/registry/settings/store/index.js
@@ -2,6 +2,7 @@ import Vue from 'vue';
 import Vuex from 'vuex';
 import * as actions from './actions';
 import mutations from './mutations';
+import * as getters from './getters';
 import state from './state';
 
 Vue.use(Vuex);
@@ -11,6 +12,7 @@ export const createStore = () =>
     state,
     actions,
     mutations,
+    getters,
   });
 
 export default createStore();
diff --git a/app/assets/javascripts/registry/settings/store/mutations.js b/app/assets/javascripts/registry/settings/store/mutations.js
index b8384fd4a45..25a67cc6973 100644
--- a/app/assets/javascripts/registry/settings/store/mutations.js
+++ b/app/assets/javascripts/registry/settings/store/mutations.js
@@ -3,6 +3,11 @@ import * as types from './mutation_types';
 export default {
   [types.SET_INITIAL_STATE](state, initialState) {
     state.projectId = initialState.projectId;
+    state.formOptions = {
+      cadence: JSON.parse(initialState.cadenceOptions),
+      keepN: JSON.parse(initialState.keepNOptions),
+      olderThan: JSON.parse(initialState.olderThanOptions),
+    };
   },
   [types.UPDATE_SETTINGS](state, settings) {
     state.settings = { ...state.settings, ...settings };
diff --git a/app/assets/javascripts/registry/settings/store/state.js b/app/assets/javascripts/registry/settings/store/state.js
index c3a26083c9f..50c882e1839 100644
--- a/app/assets/javascripts/registry/settings/store/state.js
+++ b/app/assets/javascripts/registry/settings/store/state.js
@@ -23,4 +23,8 @@ export default () => ({
    * Same structure as settings, above but Frozen object and used only in case the user clicks 'cancel'
    */
   original: {},
+  /*
+   * Contains the options used to populate the form selects
+   */
+  formOptions: {},
 });
diff --git a/app/assets/javascripts/registry/settings/utils.js b/app/assets/javascripts/registry/settings/utils.js
new file mode 100644
index 00000000000..75af401e96d
--- /dev/null
+++ b/app/assets/javascripts/registry/settings/utils.js
@@ -0,0 +1,6 @@
+export const findDefaultOption = options => {
+  const item = options.find(o => o.default);
+  return item ? item.key : null;
+};
+
+export default () => {};