Merge branch '15398-finalise-settings-app' into 'master'

Finalise Container registry expiration policy settings app

See merge request gitlab-org/gitlab!22969

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

@@ -37,7 +37,7 @@ export default {
         }}
       </li>
     </ul>
-    <gl-loading-icon v-if="isLoading" ref="loading-icon" />
+    <gl-loading-icon v-if="isLoading" ref="loading-icon" size="xl" />
     <settings-form v-else ref="settings-form" />
   </div>
 </template>

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

@@ -46,7 +46,7 @@ export default {
     regexHelpText() {
       return sprintf(
         s__(
-          'ContainerRegistry|Wildcards such as %{codeStart}*-stable%{codeEnd} or %{codeStart}production/*%{codeEnd} are supported',
+          'ContainerRegistry|Wildcards such as %{codeStart}*-stable%{codeEnd} or %{codeStart}production/*%{codeEnd} are supported.  To select all tags, use %{codeStart}.*%{codeEnd}',
         ),
         {
           codeStart: '<code>',
@@ -61,7 +61,7 @@ export default {
     nameRegexState() {
       return this.name_regex ? this.name_regex.length <= NAME_REGEX_LENGTH : null;
     },
-    formIsValid() {
+    formIsInvalid() {
       return this.nameRegexState === false;
     },
   },
@@ -124,7 +124,7 @@ export default {
           :label-cols="$options.labelsConfig.cols"
           :label-align="$options.labelsConfig.align"
           label-for="expiration-policy-latest"
-          :label="s__('ContainerRegistry|Expiration latest:')"
+          :label="s__('ContainerRegistry|Number of tags to retain:')"
         >
           <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">
@@ -138,7 +138,7 @@ export default {
           :label-cols="$options.labelsConfig.cols"
           :label-align="$options.labelsConfig.align"
           label-for="expiration-policy-name-matching"
-          :label="s__('ContainerRegistry|Expire Docker tags with name matching:')"
+          :label="s__('ContainerRegistry|Expire Docker tags that match this regex:')"
           :state="nameRegexState"
           :invalid-feedback="
             s__('ContainerRegistry|The value of this input should be less than 255 characters')
@@ -165,7 +165,7 @@ export default {
           <gl-button
             ref="save-button"
             type="submit"
-            :disabled="formIsValid"
+            :disabled="formIsInvalid"
             variant="success"
             class="d-block"
           >

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

@@ -18,8 +18,8 @@ export const resetSettings = ({ commit }) => commit(types.RESET_SETTINGS);
 export const fetchSettings = ({ dispatch, state }) => {
   dispatch('toggleLoading');
   return Api.project(state.projectId)
-    .then(({ tag_expiration_policies }) =>
-      dispatch('receiveSettingsSuccess', tag_expiration_policies),
+    .then(({ data: { container_expiration_policy } }) =>
+      dispatch('receiveSettingsSuccess', container_expiration_policy),
     )
     .catch(() => dispatch('receiveSettingsError'))
     .finally(() => dispatch('toggleLoading'));
@@ -27,10 +27,12 @@ export const fetchSettings = ({ dispatch, state }) => {
 
 export const saveSettings = ({ dispatch, state }) => {
   dispatch('toggleLoading');
-  return Api.updateProject(state.projectId, { tag_expiration_policies: state.settings })
-    .then(({ tag_expiration_policies }) => {
-      dispatch('receiveSettingsSuccess', tag_expiration_policies);
-      createFlash(UPDATE_SETTINGS_SUCCESS_MESSAGE);
+  return Api.updateProject(state.projectId, {
+    container_expiration_policy_attributes: state.settings,
+  })
+    .then(({ data: { container_expiration_policy } }) => {
+      dispatch('receiveSettingsSuccess', container_expiration_policy);
+      createFlash(UPDATE_SETTINGS_SUCCESS_MESSAGE, 'success');
     })
     .catch(() => dispatch('updateSettingsError'))
     .finally(() => dispatch('toggleLoading'));

app/views/projects/settings/ci_cd/show.html.haml

@@ -60,7 +60,7 @@
     = render 'projects/triggers/index'
 
 - if Feature.enabled?(:registry_retention_policies_settings, @project)
-  %section.settings.no-animate#js-registry-polcies{ class: ('expanded' if expanded) }
+  %section.settings.no-animate#js-registry-policies{ class: ('expanded' if expanded) }
     .settings-header
       %h4
         = _("Container Registry tag expiration policy")

locale/gitlab.pot

@@ -4918,9 +4918,6 @@ msgstr ""
 msgid "ContainerRegistry|Expiration interval:"
 msgstr ""
 
-msgid "ContainerRegistry|Expiration latest:"
-msgstr ""
-
 msgid "ContainerRegistry|Expiration policy successfully saved."
 msgstr ""
 
@@ -4930,7 +4927,7 @@ msgstr ""
 msgid "ContainerRegistry|Expiration schedule:"
 msgstr ""
 
-msgid "ContainerRegistry|Expire Docker tags with name matching:"
+msgid "ContainerRegistry|Expire Docker tags that match this regex:"
 msgstr ""
 
 msgid "ContainerRegistry|If you are not already logged in, you need to authenticate to the Container Registry by using your GitLab username and password. If you have %{twofaDocLinkStart}Two-Factor Authentication%{twofaDocLinkEnd} enabled, use a %{personalAccessTokensDocLinkStart}Personal Access Token%{personalAccessTokensDocLinkEnd} instead of a password."
@@ -4945,6 +4942,9 @@ msgstr ""
 msgid "ContainerRegistry|Last Updated"
 msgstr ""
 
+msgid "ContainerRegistry|Number of tags to retain:"
+msgstr ""
+
 msgid "ContainerRegistry|Quick Start"
 msgstr ""
 
@@ -4995,7 +4995,7 @@ msgstr ""
 msgid "ContainerRegistry|We are having trouble connecting to Docker, which could be due to an issue with your project name or path. %{docLinkStart}More Information%{docLinkEnd}"
 msgstr ""
 
-msgid "ContainerRegistry|Wildcards such as %{codeStart}*-stable%{codeEnd} or %{codeStart}production/*%{codeEnd} are supported"
+msgid "ContainerRegistry|Wildcards such as %{codeStart}*-stable%{codeEnd} or %{codeStart}production/*%{codeEnd} are supported.  To select all tags, use %{codeStart}.*%{codeEnd}"
 msgstr ""
 
 msgid "ContainerRegistry|With the Container Registry, every project can have its own space to store its Docker images. %{docLinkStart}More Information%{docLinkEnd}"

spec/features/projects/settings/registry_settings_spec.rb

+# frozen_string_literal: true
+
+require 'spec_helper'
+
+describe 'Project > Settings > CI/CD > Container registry tag expiration policy', :js do
+  let(:user) { create(:user) }
+  let(:project) { create(:project, namespace: user.namespace) }
+
+  context 'as owner' do
+    before do
+      sign_in(user)
+      visit project_settings_ci_cd_path(project)
+    end
+
+    it 'section is available' do
+      settings_block = find('#js-registry-policies')
+      expect(settings_block).to have_text 'Container Registry tag expiration policy'
+    end
+
+    it 'Save expiration policy submit the form', :js do
+      within '#js-registry-policies' do
+        within '.card-body' do
+          click_button(class: 'gl-toggle')
+          select('7 days until tags are automatically removed', from: 'expiration-policy-interval')
+          select('Every day', from: 'expiration-policy-schedule')
+          select('50 tags per image name', from: 'expiration-policy-latest')
+          fill_in('expiration-policy-name-matching', with: '*-production')
+        end
+        submit_button = find('.card-footer .btn.btn-success')
+        expect(submit_button).not_to be_disabled
+        submit_button.click
+      end
+      flash_text = find('.flash-text')
+      expect(flash_text).to have_content('Expiration policy successfully saved.')
+    end
+  end
+end

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

@@ -106,7 +106,7 @@ exports[`Settings Form renders 1`] = `
        
       <glformgroup-stub
         id="expiration-policy-latest-group"
-        label="Expiration latest:"
+        label="Number of tags to retain:"
         label-align="right"
         label-cols="3"
         label-for="expiration-policy-latest"
@@ -136,7 +136,7 @@ exports[`Settings Form renders 1`] = `
       <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:"
+        label="Expire Docker tags that match this regex:"
         label-align="right"
         label-cols="3"
         label-for="expiration-policy-name-matching"

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

@@ -44,7 +44,9 @@ describe('Actions Registry Store', () => {
     };
 
     const payload = {
-      tag_expiration_policies: 'foo',
+      data: {
+        container_expiration_policy: 'foo',
+      },
     };
 
     it('should fetch the data from the API', done => {
@@ -56,7 +58,7 @@ describe('Actions Registry Store', () => {
         [],
         [
           { type: 'toggleLoading' },
-          { type: 'receiveSettingsSuccess', payload: payload.tag_expiration_policies },
+          { type: 'receiveSettingsSuccess', payload: payload.data.container_expiration_policy },
           { type: 'toggleLoading' },
         ],
         done,
@@ -83,7 +85,9 @@ describe('Actions Registry Store', () => {
     };
 
     const payload = {
-      tag_expiration_policies: 'foo',
+      data: {
+        tag_expiration_policies: 'foo',
+      },
     };
 
     it('should fetch the data from the API', done => {
@@ -95,11 +99,11 @@ describe('Actions Registry Store', () => {
         [],
         [
           { type: 'toggleLoading' },
-          { type: 'receiveSettingsSuccess', payload: payload.tag_expiration_policies },
+          { type: 'receiveSettingsSuccess', payload: payload.data.container_expiration_policy },
           { type: 'toggleLoading' },
         ],
         () => {
-          expect(createFlash).toHaveBeenCalledWith(UPDATE_SETTINGS_SUCCESS_MESSAGE);
+          expect(createFlash).toHaveBeenCalledWith(UPDATE_SETTINGS_SUCCESS_MESSAGE, 'success');
           done();
         },
       );