Add latest changes from gitlab-org/gitlab@master

5 files changed, 45 insertions, 29 deletions

diff --git a/app/assets/javascripts/registry/settings/components/expiration_textarea.vue b/app/assets/javascripts/registry/settings/components/expiration_input.vue
index 3f817e37dca..2dbd9d26f60 100644
--- a/app/assets/javascripts/registry/settings/components/expiration_textarea.vue
+++ b/app/assets/javascripts/registry/settings/components/expiration_input.vue
@@ -1,11 +1,11 @@
 <script>
-import { GlFormGroup, GlFormTextarea, GlSprintf, GlLink } from '@gitlab/ui';
+import { GlFormGroup, GlFormInput, GlSprintf, GlLink } from '@gitlab/ui';
 import { NAME_REGEX_LENGTH, TEXT_AREA_INVALID_FEEDBACK } from '../constants';
 
 export default {
   components: {
     GlFormGroup,
-    GlFormTextarea,
+    GlFormInput,
     GlSprintf,
     GlLink,
   },
@@ -48,7 +48,7 @@ export default {
     textAreaLengthErrorMessage() {
       return this.isInputValid(this.value) ? '' : TEXT_AREA_INVALID_FEEDBACK;
     },
-    textAreaValidation() {
+    inputValidation() {
       const nameRegexErrors = this.error || this.textAreaLengthErrorMessage;
       return {
         state: nameRegexErrors === null ? null : !nameRegexErrors,
@@ -77,8 +77,8 @@ export default {
   <gl-form-group
     :id="`${name}-form-group`"
     :label-for="name"
-    :state="textAreaValidation.state"
-    :invalid-feedback="textAreaValidation.message"
+    :state="inputValidation.state"
+    :invalid-feedback="inputValidation.message"
   >
     <template #label>
       <span data-testid="label">
@@ -89,11 +89,11 @@ export default {
         </gl-sprintf>
       </span>
     </template>
-    <gl-form-textarea
+    <gl-form-input
       :id="name"
       v-model="internalValue"
       :placeholder="placeholder"
-      :state="textAreaValidation.state"
+      :state="inputValidation.state"
       :disabled="disabled"
       trim
     />
diff --git a/app/assets/javascripts/registry/settings/components/expiration_run_text.vue b/app/assets/javascripts/registry/settings/components/expiration_run_text.vue
index 186ad2f34b9..fd9ca6a54c5 100644
--- a/app/assets/javascripts/registry/settings/components/expiration_run_text.vue
+++ b/app/assets/javascripts/registry/settings/components/expiration_run_text.vue
@@ -13,6 +13,16 @@ export default {
       required: false,
       default: NOT_SCHEDULED_POLICY_TEXT,
     },
+    enabled: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  computed: {
+    parsedValue() {
+      return this.enabled ? this.value : NOT_SCHEDULED_POLICY_TEXT;
+    },
   },
   i18n: {
     NEXT_CLEANUP_LABEL,
@@ -26,6 +36,11 @@ export default {
     :label="$options.i18n.NEXT_CLEANUP_LABEL"
     label-for="expiration-policy-info-text"
   >
-    <gl-form-input id="expiration-policy-info-text" class="gl-pl-0!" plaintext :value="value" />
+    <gl-form-input
+      id="expiration-policy-info-text"
+      class="gl-pl-0!"
+      plaintext
+      :value="parsedValue"
+    />
   </gl-form-group>
 </template>
diff --git a/app/assets/javascripts/registry/settings/components/expiration_toggle.vue b/app/assets/javascripts/registry/settings/components/expiration_toggle.vue
index 9dabe8ac51a..7f045244926 100644
--- a/app/assets/javascripts/registry/settings/components/expiration_toggle.vue
+++ b/app/assets/javascripts/registry/settings/components/expiration_toggle.vue
@@ -1,6 +1,6 @@
 <script>
 import { GlFormGroup, GlToggle, GlSprintf } from '@gitlab/ui';
-import { ENABLED_TEXT, DISABLED_TEXT, ENABLE_TOGGLE_DESCRIPTION } from '../constants';
+import { ENABLED_TOGGLE_DESCRIPTION, DISABLED_TOGGLE_DESCRIPTION } from '../constants';
 
 export default {
   components: {
@@ -20,9 +20,6 @@ export default {
       default: false,
     },
   },
-  i18n: {
-    ENABLE_TOGGLE_DESCRIPTION,
-  },
   computed: {
     enabled: {
       get() {
@@ -32,8 +29,8 @@ export default {
         this.$emit('input', value);
       },
     },
-    toggleStatusText() {
-      return this.enabled ? ENABLED_TEXT : DISABLED_TEXT;
+    toggleText() {
+      return this.enabled ? ENABLED_TOGGLE_DESCRIPTION : DISABLED_TOGGLE_DESCRIPTION;
     },
   },
 };
@@ -44,9 +41,9 @@ export default {
     <div class="gl-display-flex">
       <gl-toggle id="expiration-policy-toggle" v-model="enabled" :disabled="disabled" />
       <span class="gl-ml-5 gl-line-height-24" data-testid="description">
-        <gl-sprintf :message="$options.i18n.ENABLE_TOGGLE_DESCRIPTION">
-          <template #toggleStatus>
-            <strong>{{ toggleStatusText }}</strong>
+        <gl-sprintf :message="toggleText">
+          <template #strong="{content}">
+            <strong>{{ content }}</strong>
           </template>
         </gl-sprintf>
       </span>
diff --git a/app/assets/javascripts/registry/settings/components/settings_form.vue b/app/assets/javascripts/registry/settings/components/settings_form.vue
index d0a8081e455..3eab7e6d038 100644
--- a/app/assets/javascripts/registry/settings/components/settings_form.vue
+++ b/app/assets/javascripts/registry/settings/components/settings_form.vue
@@ -25,7 +25,7 @@ import { formOptionsGenerator } from '~/registry/shared/utils';
 import updateContainerExpirationPolicyMutation from '~/registry/settings/graphql/mutations/update_container_expiration_policy.graphql';
 import { updateContainerExpirationPolicy } from '~/registry/settings/graphql/utils/cache_update';
 import ExpirationDropdown from './expiration_dropdown.vue';
-import ExpirationTextarea from './expiration_textarea.vue';
+import ExpirationInput from './expiration_input.vue';
 import ExpirationToggle from './expiration_toggle.vue';
 import ExpirationRunText from './expiration_run_text.vue';
 
@@ -35,7 +35,7 @@ export default {
     GlButton,
     GlSprintf,
     ExpirationDropdown,
-    ExpirationTextarea,
+    ExpirationInput,
     ExpirationToggle,
     ExpirationRunText,
   },
@@ -202,7 +202,11 @@ export default {
         data-testid="cadence-dropdown"
         @input="onModelChange($event, 'cadence')"
       />
-      <expiration-run-text :value="prefilledForm.nextRunAt" class="gl-mb-0!" />
+      <expiration-run-text
+        :value="prefilledForm.nextRunAt"
+        :enabled="prefilledForm.enabled"
+        class="gl-mb-0!"
+      />
     </div>
     <gl-card class="gl-mt-7">
       <template #header>
@@ -229,14 +233,14 @@ export default {
             data-testid="keep-n-dropdown"
             @input="onModelChange($event, 'keepN')"
           />
-          <expiration-textarea
+          <expiration-input
             v-model="prefilledForm.nameRegexKeep"
             :error="apiErrors.nameRegexKeep"
             :disabled="isFieldDisabled"
             :label="$options.i18n.NAME_REGEX_KEEP_LABEL"
             :description="$options.i18n.NAME_REGEX_KEEP_DESCRIPTION"
             name="keep-regex"
-            data-testid="keep-regex-textarea"
+            data-testid="keep-regex-input"
             @input="onModelChange($event, 'nameRegexKeep')"
             @validation="setLocalErrors($event, 'nameRegexKeep')"
           />
@@ -268,7 +272,7 @@ export default {
             data-testid="older-than-dropdown"
             @input="onModelChange($event, 'olderThan')"
           />
-          <expiration-textarea
+          <expiration-input
             v-model="prefilledForm.nameRegex"
             :error="apiErrors.nameRegex"
             :disabled="isFieldDisabled"
@@ -276,7 +280,7 @@ export default {
             :placeholder="$options.i18n.NAME_REGEX_PLACEHOLDER"
             :description="$options.i18n.NAME_REGEX_DESCRIPTION"
             name="remove-regex"
-            data-testid="remove-regex-textarea"
+            data-testid="remove-regex-input"
             @input="onModelChange($event, 'nameRegex')"
             @validation="setLocalErrors($event, 'nameRegex')"
           />
diff --git a/app/assets/javascripts/registry/settings/constants.js b/app/assets/javascripts/registry/settings/constants.js
index ba5820196ff..1dd533ce665 100644
--- a/app/assets/javascripts/registry/settings/constants.js
+++ b/app/assets/javascripts/registry/settings/constants.js
@@ -37,11 +37,11 @@ export const NAME_REGEX_DESCRIPTION = s__(
   'ContainerRegistry|Tags with names that match this regex pattern are removed. %{linkStart}More information%{linkEnd}',
 );
 
-export const ENABLED_TEXT = __('Enabled');
-export const DISABLED_TEXT = __('Disabled');
-
-export const ENABLE_TOGGLE_DESCRIPTION = s__(
-  'ContainerRegistry|%{toggleStatus} - Tags that match the rules on this page are automatically scheduled for deletion.',
+export const ENABLED_TOGGLE_DESCRIPTION = s__(
+  'ContainerRegistry|%{strongStart}Enabled%{strongEnd} - Tags that match the rules on this page are automatically scheduled for deletion.',
+);
+export const DISABLED_TOGGLE_DESCRIPTION = s__(
+  'ContainerRegistry|%{strongStart}Disabled%{strongEnd} - Tags will not be automatically deleted.',
 );
 
 export const CADENCE_LABEL = s__('ContainerRegistry|Run cleanup:');