Add latest changes from gitlab-org/gitlab@master

4 files changed, 121 insertions, 68 deletions

diff --git a/spec/frontend/registry/settings/components/__snapshots__/settings_form_spec.js.snap b/spec/frontend/registry/settings/components/__snapshots__/settings_form_spec.js.snap
index 9724033f3c9..bef4674bd8b 100644
--- a/spec/frontend/registry/settings/components/__snapshots__/settings_form_spec.js.snap
+++ b/spec/frontend/registry/settings/components/__snapshots__/settings_form_spec.js.snap
@@ -1,10 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Settings Form renders 1`] = `
-<div
-  class="card"
->
-  <form>
+<form>
+  <div
+    class="card"
+  >
+    <!---->
     <div
       class="card-header"
     >
@@ -12,11 +13,13 @@ exports[`Settings Form renders 1`] = `
       Tag expiration policy
     
     </div>
-     
     <div
       class="card-body"
     >
-      <gl-form-group-stub
+      <!---->
+      <!---->
+        
+      <glformgroup-stub
         id="expiration-policy-toggle-group"
         label="Expiration policy:"
         label-align="right"
@@ -26,7 +29,7 @@ exports[`Settings Form renders 1`] = `
         <div
           class="d-flex align-items-start"
         >
-          <gl-toggle-stub
+          <gltoggle-stub
             id="expiration-policy-toggle"
             labeloff="Toggle Status: OFF"
             labelon="Toggle Status: ON"
@@ -41,81 +44,96 @@ exports[`Settings Form renders 1`] = `
             </strong>
           </span>
         </div>
-      </gl-form-group-stub>
+      </glformgroup-stub>
        
-      <gl-form-group-stub
+      <glformgroup-stub
         id="expiration-policy-interval-group"
         label="Expiration interval:"
         label-align="right"
         label-cols="3"
         label-for="expiration-policy-interval"
       >
-        <gl-form-select-stub
+        <glformselect-stub
+          disabled="true"
           id="expiration-policy-interval"
+          value="bar"
         >
           <option
-            value="1"
+            value="foo"
           >
-            Option 1
+            
+            Foo
+          
           </option>
-           
           <option
-            value="2"
+            value="bar"
           >
-            Option 2
+            
+            Bar
+          
           </option>
-        </gl-form-select-stub>
-      </gl-form-group-stub>
+        </glformselect-stub>
+      </glformgroup-stub>
        
-      <gl-form-group-stub
+      <glformgroup-stub
         id="expiration-policy-schedule-group"
         label="Expiration schedule:"
         label-align="right"
         label-cols="3"
         label-for="expiration-policy-schedule"
       >
-        <gl-form-select-stub
+        <glformselect-stub
+          disabled="true"
           id="expiration-policy-schedule"
+          value="bar"
         >
           <option
-            value="1"
+            value="foo"
           >
-            Option 1
+            
+            Foo
+          
           </option>
-           
           <option
-            value="2"
+            value="bar"
           >
-            Option 2
+            
+            Bar
+          
           </option>
-        </gl-form-select-stub>
-      </gl-form-group-stub>
+        </glformselect-stub>
+      </glformgroup-stub>
        
-      <gl-form-group-stub
+      <glformgroup-stub
         id="expiration-policy-latest-group"
         label="Expiration latest:"
         label-align="right"
         label-cols="3"
         label-for="expiration-policy-latest"
       >
-        <gl-form-select-stub
+        <glformselect-stub
+          disabled="true"
           id="expiration-policy-latest"
+          value="bar"
         >
           <option
-            value="1"
+            value="foo"
           >
-            Option 1
+            
+            Foo
+          
           </option>
-           
           <option
-            value="2"
+            value="bar"
           >
-            Option 2
+            
+            Bar
+          
           </option>
-        </gl-form-select-stub>
-      </gl-form-group-stub>
+        </glformselect-stub>
+      </glformgroup-stub>
        
-      <gl-form-group-stub
+      <glformgroup-stub
         id="expiration-policy-name-matching-group"
         invalid-feedback="The value of this input should be less than 255 characters"
         label="Expire Docker tags with name matching:"
@@ -123,33 +141,41 @@ exports[`Settings Form renders 1`] = `
         label-cols="3"
         label-for="expiration-policy-name-matching"
       >
-        <gl-form-textarea-stub
+        <glformtextarea-stub
+          disabled="true"
           id="expiration-policy-name-matching"
           placeholder=".*"
           trim=""
           value=""
         />
-      </gl-form-group-stub>
+      </glformgroup-stub>
+       
     </div>
-     
     <div
-      class="card-footer text-right"
+      class="card-footer"
     >
-      <gl-button-stub
-        type="reset"
-      >
-        Cancel
-      </gl-button-stub>
-       
-      <gl-button-stub
-        type="submit"
-        variant="success"
+      <div
+        class="d-flex justify-content-end"
       >
+        <glbutton-stub
+          class="mr-2 d-block"
+          type="reset"
+        >
+          Cancel
+        </glbutton-stub>
+         
+        <glbutton-stub
+          class="d-block"
+          type="submit"
+          variant="success"
+        >
+          
+          Save expiration policy
         
-        Save Expiration Policy
-      
-      </gl-button-stub>
+        </glbutton-stub>
+      </div>
     </div>
-  </form>
-</div>
+    <!---->
+  </div>
+</form>
 `;
diff --git a/spec/frontend/registry/settings/components/settings_form_spec.js b/spec/frontend/registry/settings/components/settings_form_spec.js
index b944e5a2cea..bd733e965a4 100644
--- a/spec/frontend/registry/settings/components/settings_form_spec.js
+++ b/spec/frontend/registry/settings/components/settings_form_spec.js
@@ -1,8 +1,10 @@
 import Vuex from 'vuex';
-import { shallowMount, createLocalVue } from '@vue/test-utils';
+import { mount, createLocalVue } from '@vue/test-utils';
+import stubChildren from 'helpers/stub_children';
 import component from '~/registry/settings/components/settings_form.vue';
 import { createStore } from '~/registry/settings/store/';
 import { NAME_REGEX_LENGTH } from '~/registry/settings/constants';
+import { stringifiedFormOptions } from '../mock_data';
 
 const localVue = createLocalVue();
 localVue.use(Vuex);
@@ -13,7 +15,6 @@ describe('Settings Form', () => {
   let saveSpy;
   let resetSpy;
 
-  const helpPagePath = 'foo';
   const findFormGroup = name => wrapper.find(`#expiration-policy-${name}-group`);
   const findFormElements = (name, father = wrapper) => father.find(`#expiration-policy-${name}`);
   const findCancelButton = () => wrapper.find({ ref: 'cancel-button' });
@@ -23,7 +24,11 @@ describe('Settings Form', () => {
   const mountComponent = (options = {}) => {
     saveSpy = jest.fn();
     resetSpy = jest.fn();
-    wrapper = shallowMount(component, {
+    wrapper = mount(component, {
+      stubs: {
+        ...stubChildren(component),
+        GlCard: false,
+      },
       store,
       methods: {
         saveSettings: saveSpy,
@@ -35,7 +40,7 @@ describe('Settings Form', () => {
 
   beforeEach(() => {
     store = createStore();
-    store.dispatch('setInitialState', { helpPagePath });
+    store.dispatch('setInitialState', stringifiedFormOptions);
     mountComponent();
   });
 
@@ -48,13 +53,13 @@ describe('Settings Form', () => {
   });
 
   describe.each`
-    elementName        | modelName       | value
-    ${'toggle'}        | ${'enabled'}    | ${true}
-    ${'interval'}      | ${'older_than'} | ${'foo'}
-    ${'schedule'}      | ${'cadence'}    | ${'foo'}
-    ${'latest'}        | ${'keep_n'}     | ${'foo'}
-    ${'name-matching'} | ${'name_regex'} | ${'foo'}
-  `('%s form element', ({ elementName, modelName, value }) => {
+    elementName        | modelName       | value    | disabledByToggle
+    ${'toggle'}        | ${'enabled'}    | ${true}  | ${'not disabled'}
+    ${'interval'}      | ${'older_than'} | ${'foo'} | ${'disabled'}
+    ${'schedule'}      | ${'cadence'}    | ${'foo'} | ${'disabled'}
+    ${'latest'}        | ${'keep_n'}     | ${'foo'} | ${'disabled'}
+    ${'name-matching'} | ${'name_regex'} | ${'foo'} | ${'disabled'}
+  `('$elementName form element', ({ elementName, modelName, value, disabledByToggle }) => {
     let formGroup;
     beforeEach(() => {
       formGroup = findFormGroup(elementName);
@@ -89,6 +94,12 @@ describe('Settings Form', () => {
         expect(wrapper.vm[modelName]).toBe(value);
       });
     });
+
+    it(`${elementName} is ${disabledByToggle} by enabled set to false`, () => {
+      store.dispatch('updateSettings', { enabled: false });
+      const expectation = disabledByToggle === 'disabled' ? 'true' : undefined;
+      expect(findFormElements(elementName, formGroup).attributes('disabled')).toBe(expectation);
+    });
   });
 
   describe('form actions', () => {
diff --git a/spec/frontend/registry/settings/mock_data.js b/spec/frontend/registry/settings/mock_data.js
new file mode 100644
index 00000000000..411363c2c95
--- /dev/null
+++ b/spec/frontend/registry/settings/mock_data.js
@@ -0,0 +1,12 @@
+export const options = [{ key: 'foo', label: 'Foo' }, { key: 'bar', label: 'Bar', default: true }];
+export const stringifiedOptions = JSON.stringify(options);
+export const stringifiedFormOptions = {
+  cadenceOptions: stringifiedOptions,
+  keepNOptions: stringifiedOptions,
+  olderThanOptions: stringifiedOptions,
+};
+export const formOptions = {
+  cadence: options,
+  keepN: options,
+  olderThan: options,
+};
diff --git a/spec/frontend/registry/settings/store/mutations_spec.js b/spec/frontend/registry/settings/store/mutations_spec.js
index a8c7ed3bafa..1a0effbe125 100644
--- a/spec/frontend/registry/settings/store/mutations_spec.js
+++ b/spec/frontend/registry/settings/store/mutations_spec.js
@@ -1,6 +1,7 @@
 import mutations from '~/registry/settings/store/mutations';
 import * as types from '~/registry/settings/store/mutation_types';
 import createState from '~/registry/settings/store/state';
+import { formOptions, stringifiedFormOptions } from '../mock_data';
 
 describe('Mutations Registry Store', () => {
   let mockState;
@@ -11,11 +12,14 @@ describe('Mutations Registry Store', () => {
 
   describe('SET_INITIAL_STATE', () => {
     it('should set the initial state', () => {
-      const payload = { helpPagePath: 'foo', projectId: 'bar' };
-      const expectedState = { ...mockState, ...payload };
-      mutations[types.SET_INITIAL_STATE](mockState, payload);
+      const expectedState = { ...mockState, projectId: 'foo', formOptions };
+      mutations[types.SET_INITIAL_STATE](mockState, {
+        projectId: 'foo',
+        ...stringifiedFormOptions,
+      });
 
       expect(mockState.projectId).toEqual(expectedState.projectId);
+      expect(mockState.formOptions).toEqual(expectedState.formOptions);
     });
   });