Merge branch...

Merge branch '198520-tag-expiration-only-show-the-cancel-button-when-a-change-has-been-made' into 'master'

Docker expiration policy settings: disable cancel button with no changes

See merge request gitlab-org/gitlab!23958

app/assets/javascripts/registry/settings/components/settings_form.vue

 <script>
-import { mapActions, mapState } from 'vuex';
+import { mapActions, mapState, mapGetters } from 'vuex';
 import {
   GlFormGroup,
   GlToggle,
@@ -42,6 +42,7 @@ export default {
   },
   computed: {
     ...mapState(['formOptions', 'isLoading']),
+    ...mapGetters({ isEdited: 'getIsEdited' }),
     ...mapComputed(
       [
         'enabled',
@@ -92,6 +93,9 @@ export default {
     isSubmitButtonDisabled() {
       return this.formIsInvalid || this.isLoading;
     },
+    isCancelButtonDisabled() {
+      return !this.isEdited || this.isLoading;
+    },
   },
   methods: {
     ...mapActions(['resetSettings', 'saveSettings']),
@@ -211,7 +215,12 @@ export default {
       </template>
       <template #footer>
         <div class="d-flex justify-content-end">
-          <gl-button ref="cancel-button" type="reset" class="mr-2 d-block" :disabled="isLoading">
+          <gl-button
+            ref="cancel-button"
+            type="reset"
+            :disabled="isCancelButtonDisabled"
+            class="mr-2 d-block"
+          >
             {{ __('Cancel') }}
           </gl-button>
           <gl-button

app/assets/javascripts/registry/settings/store/getters.js

+import { isEqual } from 'lodash';
 import { findDefaultOption } from '../utils';
 
 export const getCadence = state =>
@@ -6,3 +7,4 @@ export const getKeepN = state =>
   state.settings.keep_n || findDefaultOption(state.formOptions.keepN);
 export const getOlderThan = state =>
   state.settings.older_than || findDefaultOption(state.formOptions.olderThan);
+export const getIsEdited = state => !isEqual(state.original, state.settings);

spec/frontend/registry/settings/components/__snapshots__/settings_form_spec.js.snap

@@ -159,6 +159,7 @@ exports[`Settings Form renders 1`] = `
       >
         <glbutton-stub
           class="mr-2 d-block"
+          disabled="true"
           size="md"
           type="reset"
           variant="secondary"

spec/frontend/registry/settings/components/settings_form_spec.js

@@ -124,11 +124,35 @@ describe('Settings Form', () => {
       form = findForm();
     });
 
-    describe('form cancel event', () => {
+    describe('cancel button', () => {
       it('has type reset', () => {
         expect(findCancelButton().attributes('type')).toBe('reset');
       });
 
+      it('is disabled the form was not changed from his original value', () => {
+        store.dispatch('receiveSettingsSuccess', { foo: 'bar' });
+        return wrapper.vm.$nextTick().then(() => {
+          expect(findCancelButton().attributes('disabled')).toBe('true');
+        });
+      });
+
+      it('is disabled when the form data is loading', () => {
+        store.dispatch('toggleLoading');
+        return wrapper.vm.$nextTick().then(() => {
+          expect(findCancelButton().attributes('disabled')).toBe('true');
+        });
+      });
+
+      it('is enabled when the user changed something in the form and the data is not being loaded', () => {
+        store.dispatch('receiveSettingsSuccess', { foo: 'bar' });
+        store.dispatch('updateSettings', { foo: 'baz' });
+        return wrapper.vm.$nextTick().then(() => {
+          expect(findCancelButton().attributes('disabled')).toBe(undefined);
+        });
+      });
+    });
+
+    describe('form cancel event', () => {
       it('calls the appropriate function', () => {
         dispatchSpy.mockReturnValue();
         form.trigger('reset');

spec/frontend/registry/settings/store/getters_spec.js

+import * as getters from '~/registry/settings/store/getters';
+import * as utils from '~/registry/settings/utils';
+import { formOptions } from '../mock_data';
+
+describe('Getters registry settings store', () => {
+  const settings = {
+    cadence: 'foo',
+    keep_n: 'bar',
+    older_than: 'baz',
+  };
+
+  describe.each`
+    getter            | variable        | formOption
+    ${'getCadence'}   | ${'cadence'}    | ${'cadence'}
+    ${'getKeepN'}     | ${'keep_n'}     | ${'keepN'}
+    ${'getOlderThan'} | ${'older_than'} | ${'olderThan'}
+  `('Options getter', ({ getter, variable, formOption }) => {
+    beforeEach(() => {
+      utils.findDefaultOption = jest.fn();
+    });
+
+    it(`${getter} returns ${variable} when ${variable} exists in settings`, () => {
+      expect(getters[getter]({ settings })).toBe(settings[variable]);
+    });
+
+    it(`${getter} calls findDefaultOption when ${variable} does not exists in settings`, () => {
+      getters[getter]({ settings: {}, formOptions });
+      expect(utils.findDefaultOption).toHaveBeenCalledWith(formOptions[formOption]);
+    });
+  });
+
+  describe('getIsDisabled', () => {
+    it('returns false when original is equal to settings', () => {
+      const same = { foo: 'bar' };
+      expect(getters.getIsEdited({ original: same, settings: same })).toBe(false);
+    });
+
+    it('returns true when original is different from settings', () => {
+      expect(getters.getIsEdited({ original: { foo: 'bar' }, settings: { foo: 'baz' } })).toBe(
+        true,
+      );
+    });
+  });
+});