Merge branch '214476-fix-missing-form' into 'master'

Fix missing form and default option in Cleanup policy form

See merge request gitlab-org/gitlab!44030

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

 <script>
 import { GlAlert, GlSprintf, GlLink } from '@gitlab/ui';
-import { isEqual } from 'lodash';
+import { isEqual, get } from 'lodash';
 import expirationPolicyQuery from '../graphql/queries/get_expiration_policy.graphql';
 import { FETCH_SETTINGS_ERROR_MESSAGE } from '../../shared/constants';
 
@@ -35,7 +35,7 @@ export default {
       },
       update: data => data.project?.containerExpirationPolicy,
       result({ data }) {
-        this.workingCopy = { ...data.project?.containerExpirationPolicy };
+        this.workingCopy = { ...get(data, 'project.containerExpirationPolicy', {}) };
       },
       error(e) {
         this.fetchSettingsError = e;
@@ -74,7 +74,7 @@ export default {
 <template>
   <div>
     <settings-form
-      v-if="containerExpirationPolicy"
+      v-if="!isDisabled"
       v-model="workingCopy"
       :is-loading="$apollo.queries.containerExpirationPolicy.loading"
       :is-edited="isEdited"

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

@@ -55,6 +55,14 @@ export default {
     };
   },
   computed: {
+    prefilledForm() {
+      return {
+        ...this.value,
+        cadence: this.findDefaultOption('cadence'),
+        keepN: this.findDefaultOption('keepN'),
+        olderThan: this.findDefaultOption('olderThan'),
+      };
+    },
     showLoadingIcon() {
       return this.isLoading || this.mutationLoading;
     },
@@ -77,6 +85,9 @@ export default {
     },
   },
   methods: {
+    findDefaultOption(option) {
+      return this.value[option] || this.$options.formOptions[option].find(f => f.default)?.key;
+    },
     reset() {
       this.track('reset_form');
       this.apiErrors = null;
@@ -135,7 +146,7 @@ export default {
       </template>
       <template #default>
         <expiration-policy-fields
-          :value="value"
+          :value="prefilledForm"
           :form-options="$options.formOptions"
           :is-loading="isLoading"
           :api-errors="apiErrors"

app/assets/javascripts/registry/settings/registry_settings_bundle.js

 import Vue from 'vue';
 import { GlToast } from '@gitlab/ui';
 import Translate from '~/vue_shared/translate';
+import { parseBoolean } from '~/lib/utils/common_utils';
 import RegistrySettingsApp from './components/registry_settings_app.vue';
 import { apolloProvider } from './graphql/index';
 
@@ -21,9 +22,9 @@ export default () => {
     },
     provide: {
       projectPath,
-      isAdmin,
+      isAdmin: parseBoolean(isAdmin),
       adminSettingsPath,
-      enableHistoricEntries,
+      enableHistoricEntries: parseBoolean(enableHistoricEntries),
     },
     render(createElement) {
       return createElement('registry-settings-app', {});

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

@@ -11,7 +11,7 @@ import {
   UNAVAILABLE_USER_FEATURE_TEXT,
 } from '~/registry/settings/constants';
 
-import { expirationPolicyPayload } from '../mock_data';
+import { expirationPolicyPayload, emptyExpirationPolicyPayload } from '../mock_data';
 
 const localVue = createLocalVue();
 
@@ -115,4 +115,23 @@ describe('Registry Settings App', () => {
       expect(findAlert().html()).toContain(FETCH_SETTINGS_ERROR_MESSAGE);
     });
   });
+
+  describe('empty API response', () => {
+    it.each`
+      enableHistoricEntries | isShown
+      ${true}               | ${true}
+      ${false}              | ${false}
+    `('is $isShown that the form is shown', async ({ enableHistoricEntries, isShown }) => {
+      const requests = mountComponentWithApollo({
+        provide: {
+          ...defaultProvidedValues,
+          enableHistoricEntries,
+        },
+        resolver: jest.fn().mockResolvedValue(emptyExpirationPolicyPayload()),
+      });
+      await Promise.all(requests);
+
+      expect(findSettingsComponent().exists()).toBe(isShown);
+    });
+  });
 });

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

@@ -123,6 +123,15 @@ describe('Settings Form', () => {
       findFields().vm.$emit('input', { newValue: 'foo', modified: 'baz' });
       expect(findFields().props('apiErrors')).toEqual({});
     });
+
+    it('shows the default option when none are selected', () => {
+      mountComponent({ props: { value: {} } });
+      expect(findFields().props('value')).toEqual({
+        cadence: 'EVERY_DAY',
+        keepN: 'TEN_TAGS',
+        olderThan: 'NINETY_DAYS',
+      });
+    });
   });
 
   describe('form', () => {

spec/frontend/registry/settings/mock_data.js

@@ -14,6 +14,14 @@ export const expirationPolicyPayload = override => ({
   },
 });
 
+export const emptyExpirationPolicyPayload = () => ({
+  data: {
+    project: {
+      containerExpirationPolicy: {},
+    },
+  },
+});
+
 export const expirationPolicyMutationPayload = ({ override, errors = [] } = {}) => ({
   data: {
     updateContainerExpirationPolicy: {