Add latest changes from gitlab-org/gitlab@master

6 files changed, 121 insertions, 42 deletions

diff --git a/app/assets/javascripts/registry/settings/store/getters.js b/app/assets/javascripts/registry/settings/store/getters.js
index ef4b4f0ba02..ac1a931d8e0 100644
--- a/app/assets/javascripts/registry/settings/store/getters.js
+++ b/app/assets/javascripts/registry/settings/store/getters.js
@@ -16,6 +16,7 @@ export const getSettings = (state, getters) => ({
   older_than: getters.getOlderThan,
   keep_n: getters.getKeepN,
   name_regex: state.settings.name_regex,
+  name_regex_keep: state.settings.name_regex_keep,
 });
 
 export const getIsEdited = state => !isEqual(state.original, state.settings);
diff --git a/app/assets/javascripts/registry/shared/components/expiration_policy_fields.vue b/app/assets/javascripts/registry/shared/components/expiration_policy_fields.vue
index 26dfd11b55c..04a547db07e 100644
--- a/app/assets/javascripts/registry/shared/components/expiration_policy_fields.vue
+++ b/app/assets/javascripts/registry/shared/components/expiration_policy_fields.vue
@@ -1,8 +1,23 @@
 <script>
 import { uniqueId } from 'lodash';
 import { GlFormGroup, GlToggle, GlFormSelect, GlFormTextarea, GlSprintf } from '@gitlab/ui';
-import { s__, __ } from '~/locale';
-import { NAME_REGEX_LENGTH } from '../constants';
+import {
+  NAME_REGEX_LENGTH,
+  ENABLED_TEXT,
+  DISABLED_TEXT,
+  TEXT_AREA_INVALID_FEEDBACK,
+  EXPIRATION_INTERVAL_LABEL,
+  EXPIRATION_SCHEDULE_LABEL,
+  KEEP_N_LABEL,
+  NAME_REGEX_LABEL,
+  NAME_REGEX_PLACEHOLDER,
+  NAME_REGEX_DESCRIPTION,
+  NAME_REGEX_KEEP_LABEL,
+  NAME_REGEX_KEEP_PLACEHOLDER,
+  NAME_REGEX_KEEP_DESCRIPTION,
+  ENABLE_TOGGLE_LABEL,
+  ENABLE_TOGGLE_DESCRIPTION,
+} from '../constants';
 import { mapComputedToEvent } from '../utils';
 
 export default {
@@ -40,42 +55,73 @@ export default {
       default: 'right',
     },
   },
-  nameRegexPlaceholder: '.*',
+  i18n: {
+    textAreaInvalidFeedback: TEXT_AREA_INVALID_FEEDBACK,
+    enableToggleLabel: ENABLE_TOGGLE_LABEL,
+    enableToggleDescription: ENABLE_TOGGLE_DESCRIPTION,
+  },
   selectList: [
     {
       name: 'expiration-policy-interval',
-      label: s__('ContainerRegistry|Expiration interval:'),
+      label: EXPIRATION_INTERVAL_LABEL,
       model: 'older_than',
       optionKey: 'olderThan',
     },
     {
       name: 'expiration-policy-schedule',
-      label: s__('ContainerRegistry|Expiration schedule:'),
+      label: EXPIRATION_SCHEDULE_LABEL,
       model: 'cadence',
       optionKey: 'cadence',
     },
     {
       name: 'expiration-policy-latest',
-      label: s__('ContainerRegistry|Number of tags to retain:'),
+      label: KEEP_N_LABEL,
       model: 'keep_n',
       optionKey: 'keepN',
     },
   ],
+  textAreaList: [
+    {
+      name: 'expiration-policy-name-matching',
+      label: NAME_REGEX_LABEL,
+      model: 'name_regex',
+      placeholder: NAME_REGEX_PLACEHOLDER,
+      stateVariable: 'nameRegexState',
+      description: NAME_REGEX_DESCRIPTION,
+    },
+    {
+      name: 'expiration-policy-keep-name',
+      label: NAME_REGEX_KEEP_LABEL,
+      model: 'name_regex_keep',
+      placeholder: NAME_REGEX_KEEP_PLACEHOLDER,
+      stateVariable: 'nameKeepRegexState',
+      description: NAME_REGEX_KEEP_DESCRIPTION,
+    },
+  ],
   data() {
     return {
       uniqueId: uniqueId(),
     };
   },
   computed: {
-    ...mapComputedToEvent(['enabled', 'cadence', 'older_than', 'keep_n', 'name_regex'], 'value'),
+    ...mapComputedToEvent(
+      ['enabled', 'cadence', 'older_than', 'keep_n', 'name_regex', 'name_regex_keep'],
+      'value',
+    ),
     policyEnabledText() {
-      return this.enabled ? __('enabled') : __('disabled');
+      return this.enabled ? ENABLED_TEXT : DISABLED_TEXT;
     },
-    nameRegexState() {
-      return this.name_regex ? this.name_regex.length <= NAME_REGEX_LENGTH : null;
+    textAreaState() {
+      return {
+        nameRegexState: this.validateNameRegex(this.name_regex),
+        nameKeepRegexState: this.validateNameRegex(this.name_regex_keep),
+      };
     },
     fieldsValidity() {
-      return this.nameRegexState !== false;
+      return (
+        this.textAreaState.nameRegexState !== false &&
+        this.textAreaState.nameKeepRegexState !== false
+      );
     },
     isFormElementDisabled() {
       return !this.enabled || this.isLoading;
@@ -94,6 +140,9 @@ export default {
     },
   },
   methods: {
+    validateNameRegex(value) {
+      return value ? value.length <= NAME_REGEX_LENGTH : null;
+    },
     idGenerator(id) {
       return `${id}_${this.uniqueId}`;
     },
@@ -111,7 +160,7 @@ export default {
       :label-cols="labelCols"
       :label-align="labelAlign"
       :label-for="idGenerator('expiration-policy-toggle')"
-      :label="s__('ContainerRegistry|Expiration policy:')"
+      :label="$options.i18n.enableToggleLabel"
     >
       <div class="d-flex align-items-start">
         <gl-toggle
@@ -120,9 +169,7 @@ export default {
           :disabled="isLoading"
         />
         <span class="mb-2 ml-1 lh-2">
-          <gl-sprintf
-            :message="s__('ContainerRegistry|Docker tag expiration policy is %{toggleStatus}')"
-          >
+          <gl-sprintf :message="$options.i18n.enableToggleDescription">
             <template #toggleStatus>
               <strong>{{ policyEnabledText }}</strong>
             </template>
@@ -157,35 +204,34 @@ export default {
     </gl-form-group>
 
     <gl-form-group
-      :id="idGenerator('expiration-policy-name-matching-group')"
+      v-for="textarea in $options.textAreaList"
+      :id="idGenerator(`${textarea.name}-group`)"
+      :key="textarea.name"
       :label-cols="labelCols"
       :label-align="labelAlign"
-      :label-for="idGenerator('expiration-policy-name-matching')"
-      :label="
-        s__('ContainerRegistry|Docker tags with names matching this regex pattern will expire:')
-      "
-      :state="nameRegexState"
-      :invalid-feedback="
-        s__('ContainerRegistry|The value of this input should be less than 255 characters')
-      "
+      :label-for="idGenerator(textarea.name)"
+      :state="textAreaState[textarea.stateVariable]"
+      :invalid-feedback="$options.i18n.textAreaInvalidFeedback"
     >
+      <template #label>
+        <gl-sprintf :message="textarea.label">
+          <template #italic="{content}">
+            <i>{{ content }}</i>
+          </template>
+        </gl-sprintf>
+      </template>
       <gl-form-textarea
-        :id="idGenerator('expiration-policy-name-matching')"
-        v-model="name_regex"
-        :placeholder="$options.nameRegexPlaceholder"
-        :state="nameRegexState"
+        :id="idGenerator(textarea.name)"
+        :value="value[textarea.model]"
+        :placeholder="textarea.placeholder"
+        :state="textAreaState[textarea.stateVariable]"
         :disabled="isFormElementDisabled"
         trim
+        @input="updateModel($event, textarea.model)"
       />
       <template #description>
         <span ref="regex-description">
-          <gl-sprintf
-            :message="
-              s__(
-                'ContainerRegistry|Regular expressions such as %{codeStart}.*-test%{codeEnd} or %{codeStart}dev-.*%{codeEnd} are supported.  To select all tags, use %{codeStart}.*%{codeEnd}',
-              )
-            "
-          >
+          <gl-sprintf :message="textarea.description">
             <template #code="{content}">
               <code>{{ content }}</code>
             </template>
diff --git a/app/assets/javascripts/registry/shared/constants.js b/app/assets/javascripts/registry/shared/constants.js
index c0dac466b29..7a839e4a3ed 100644
--- a/app/assets/javascripts/registry/shared/constants.js
+++ b/app/assets/javascripts/registry/shared/constants.js
@@ -1,4 +1,4 @@
-import { s__ } from '~/locale';
+import { s__, __ } from '~/locale';
 
 export const FETCH_SETTINGS_ERROR_MESSAGE = s__(
   'ContainerRegistry|Something went wrong while fetching the expiration policy.',
@@ -13,3 +13,33 @@ export const UPDATE_SETTINGS_SUCCESS_MESSAGE = s__(
 );
 
 export const NAME_REGEX_LENGTH = 255;
+
+export const ENABLED_TEXT = __('enabled');
+export const DISABLED_TEXT = __('disabled');
+
+export const ENABLE_TOGGLE_LABEL = s__('ContainerRegistry|Expiration policy:');
+export const ENABLE_TOGGLE_DESCRIPTION = s__(
+  'ContainerRegistry|Docker tag expiration policy is %{toggleStatus}',
+);
+
+export const TEXT_AREA_INVALID_FEEDBACK = s__(
+  'ContainerRegistry|The value of this input should be less than 255 characters',
+);
+
+export const EXPIRATION_INTERVAL_LABEL = s__('ContainerRegistry|Expiration interval:');
+export const EXPIRATION_SCHEDULE_LABEL = s__('ContainerRegistry|Expiration schedule:');
+export const KEEP_N_LABEL = s__('ContainerRegistry|Number of tags to retain:');
+export const NAME_REGEX_LABEL = s__(
+  'ContainerRegistry|Tags with names matching this regex pattern will %{italicStart}expire:%{italicEnd}',
+);
+export const NAME_REGEX_PLACEHOLDER = '.*';
+export const NAME_REGEX_DESCRIPTION = s__(
+  'ContainerRegistry|Regular expressions such as %{codeStart}.*-test%{codeEnd} or %{codeStart}dev-.*%{codeEnd} are supported. To select all tags, use %{codeStart}.*%{codeEnd}',
+);
+export const NAME_REGEX_KEEP_LABEL = s__(
+  'ContainerRegistry|Tags with names matching this regex pattern will %{italicStart}be preserved:%{italicEnd}',
+);
+export const NAME_REGEX_KEEP_PLACEHOLDER = '';
+export const NAME_REGEX_KEEP_DESCRIPTION = s__(
+  'ContainerRegistry|Regular expressions such as %{codeStart}.*-test%{codeEnd} or %{codeStart}dev-.*%{codeEnd} are supported',
+);
diff --git a/app/assets/javascripts/static_site_editor/components/saved_changes_message.vue b/app/assets/javascripts/static_site_editor/components/saved_changes_message.vue
index 41cb901720c..dd907570114 100644
--- a/app/assets/javascripts/static_site_editor/components/saved_changes_message.vue
+++ b/app/assets/javascripts/static_site_editor/components/saved_changes_message.vue
@@ -28,7 +28,8 @@ export default {
     },
     returnUrl: {
       type: String,
-      required: true,
+      required: false,
+      default: '',
     },
   },
 };
@@ -46,7 +47,7 @@ export default {
         }}
       </p>
       <div class="d-flex justify-content-end">
-        <gl-button ref="returnToSiteButton" :href="returnUrl">{{
+        <gl-button v-if="returnUrl" ref="returnToSiteButton" :href="returnUrl">{{
           s__('StaticSiteEditor|Return to site')
         }}</gl-button>
         <gl-button ref="mergeRequestButton" class="ml-2" :href="mergeRequest.url" variant="success">
@@ -60,7 +61,7 @@ export default {
       <ul>
         <li>
           {{ s__('StaticSiteEditor|You created a new branch:') }}
-          <span ref="branchLink">{{ branch.label }}</span>
+          <gl-link ref="branchLink" :href="branch.url">{{ branch.label }}</gl-link>
         </li>
         <li>
           {{ s__('StaticSiteEditor|You created a merge request:') }}
diff --git a/app/assets/javascripts/static_site_editor/components/static_site_editor.vue b/app/assets/javascripts/static_site_editor/components/static_site_editor.vue
index d45c3d08ef4..79e4b4a4581 100644
--- a/app/assets/javascripts/static_site_editor/components/static_site_editor.vue
+++ b/app/assets/javascripts/static_site_editor/components/static_site_editor.vue
@@ -48,6 +48,7 @@ export default {
     <!-- Success view -->
     <saved-changes-message
       v-if="savedContentMeta"
+      class="w-75"
       :branch="savedContentMeta.branch"
       :commit="savedContentMeta.commit"
       :merge-request="savedContentMeta.mergeRequest"
diff --git a/app/assets/javascripts/static_site_editor/services/submit_content_changes.js b/app/assets/javascripts/static_site_editor/services/submit_content_changes.js
index ff591e4b245..b4e4e94d4f2 100644
--- a/app/assets/javascripts/static_site_editor/services/submit_content_changes.js
+++ b/app/assets/javascripts/static_site_editor/services/submit_content_changes.js
@@ -56,8 +56,8 @@ const submitContentChanges = ({ username, projectId, sourcePath, content }) => {
   const meta = {};
 
   return createBranch(projectId, branch)
-    .then(() => {
-      Object.assign(meta, { branch: { label: branch } });
+    .then(({ data: { web_url: url } }) => {
+      Object.assign(meta, { branch: { label: branch, url } });
 
       return commitContent(projectId, mergeRequestTitle, branch, sourcePath, content);
     })
@@ -67,7 +67,7 @@ const submitContentChanges = ({ username, projectId, sourcePath, content }) => {
       return createMergeRequest(projectId, mergeRequestTitle, branch);
     })
     .then(({ data: { iid: label, web_url: url } }) => {
-      Object.assign(meta, { mergeRequest: { label, url } });
+      Object.assign(meta, { mergeRequest: { label: label.toString(), url } });
 
       return meta;
     });