Add latest changes from gitlab-org/gitlab@master

32 files changed, 162 insertions, 73 deletions

diff --git a/app/assets/javascripts/alert_management/components/alert_details.vue b/app/assets/javascripts/alert_management/components/alert_details.vue
index 733c012c4f8..324103c482f 100644
--- a/app/assets/javascripts/alert_management/components/alert_details.vue
+++ b/app/assets/javascripts/alert_management/components/alert_details.vue
@@ -19,7 +19,7 @@ import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 import highlightCurrentUser from '~/behaviors/markdown/highlight_current_user';
 import initUserPopovers from '~/user_popovers';
 import { ALERTS_SEVERITY_LABELS, trackAlertsDetailsViewsOptions } from '../constants';
-import createIssueMutation from '../graphql/mutations/create_issue_from_alert.graphql';
+import createIssueMutation from '../graphql/mutations/create_issue_from_alert.mutation.graphql';
 import toggleSidebarStatusMutation from '../graphql/mutations/toggle_sidebar_status.mutation.graphql';
 import { visitUrl, joinPaths } from '~/lib/utils/url_utility';
 import Tracking from '~/tracking';
diff --git a/app/assets/javascripts/alert_management/components/alert_status.vue b/app/assets/javascripts/alert_management/components/alert_status.vue
index c464dda4572..c26dc7b63a0 100644
--- a/app/assets/javascripts/alert_management/components/alert_status.vue
+++ b/app/assets/javascripts/alert_management/components/alert_status.vue
@@ -3,7 +3,7 @@ import { GlDropdown, GlDropdownItem, GlButton } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import Tracking from '~/tracking';
 import { trackAlertStatusUpdateOptions } from '../constants';
-import updateAlertStatus from '../graphql/mutations/update_alert_status.graphql';
+import updateAlertStatus from '../graphql/mutations/update_alert_status.mutation.graphql';
 
 export default {
   statuses: {
diff --git a/app/assets/javascripts/alert_management/components/sidebar/sidebar_assignees.vue b/app/assets/javascripts/alert_management/components/sidebar/sidebar_assignees.vue
index 165cc978274..7a6bb79c010 100644
--- a/app/assets/javascripts/alert_management/components/sidebar/sidebar_assignees.vue
+++ b/app/assets/javascripts/alert_management/components/sidebar/sidebar_assignees.vue
@@ -12,7 +12,7 @@ import {
 } from '@gitlab/ui';
 import axios from '~/lib/utils/axios_utils';
 import { s__, __ } from '~/locale';
-import alertSetAssignees from '../../graphql/mutations/alert_set_assignees.graphql';
+import alertSetAssignees from '../../graphql/mutations/alert_set_assignees.mutation.graphql';
 import SidebarAssignee from './sidebar_assignee.vue';
 import { debounce } from 'lodash';
 
diff --git a/app/assets/javascripts/alert_management/graphql/mutations/alert_set_assignees.graphql b/app/assets/javascripts/alert_management/graphql/mutations/alert_set_assignees.mutation.graphql
index 40b4b6ae854..40b4b6ae854 100644
--- a/app/assets/javascripts/alert_management/graphql/mutations/alert_set_assignees.graphql
+++ b/app/assets/javascripts/alert_management/graphql/mutations/alert_set_assignees.mutation.graphql
diff --git a/app/assets/javascripts/alert_management/graphql/mutations/create_issue_from_alert.graphql b/app/assets/javascripts/alert_management/graphql/mutations/create_issue_from_alert.mutation.graphql
index 18c9652b262..18c9652b262 100644
--- a/app/assets/javascripts/alert_management/graphql/mutations/create_issue_from_alert.graphql
+++ b/app/assets/javascripts/alert_management/graphql/mutations/create_issue_from_alert.mutation.graphql
diff --git a/app/assets/javascripts/alert_management/graphql/mutations/update_alert_status.graphql b/app/assets/javascripts/alert_management/graphql/mutations/update_alert_status.mutation.graphql
index d07d65bd76c..d07d65bd76c 100644
--- a/app/assets/javascripts/alert_management/graphql/mutations/update_alert_status.graphql
+++ b/app/assets/javascripts/alert_management/graphql/mutations/update_alert_status.mutation.graphql
diff --git a/app/assets/javascripts/gl_field_error.js b/app/assets/javascripts/gl_field_error.js
index 04301c9ce12..ac4c8d28ee4 100644
--- a/app/assets/javascripts/gl_field_error.js
+++ b/app/assets/javascripts/gl_field_error.js
@@ -114,7 +114,7 @@ export default class GlFieldError {
     this.state.empty = currentValue === '';
     this.state.submitted = true;
     this.renderValidity();
-    this.form.focusOnFirstInvalid.apply(this.form);
+    this.form.focusInvalid.apply(this.form);
 
     // For UX, wait til after first invalid submission to check each keyup
     this.inputElement
diff --git a/app/assets/javascripts/gl_field_errors.js b/app/assets/javascripts/gl_field_errors.js
index c4fd719c8d0..ad79483d5ec 100644
--- a/app/assets/javascripts/gl_field_errors.js
+++ b/app/assets/javascripts/gl_field_errors.js
@@ -52,10 +52,23 @@ export default class GlFieldErrors {
     });
   }
 
-  focusOnFirstInvalid() {
-    const firstInvalid = this.state.inputs.filter(
-      input => !input.inputDomElement.validity.valid,
-    )[0];
-    firstInvalid.inputElement.focus();
+  get invalidInputs() {
+    return this.state.inputs.filter(
+      ({
+        inputDomElement: {
+          validity: { valid },
+        },
+      }) => !valid,
+    );
+  }
+
+  get focusedInvalidInput() {
+    return this.invalidInputs.find(({ inputElement }) => inputElement.is(':focus'));
+  }
+
+  focusInvalid() {
+    if (this.focusedInvalidInput) return;
+
+    this.invalidInputs[0].inputElement.focus();
   }
 }
diff --git a/app/assets/javascripts/ide/components/commit_sidebar/empty_state.vue b/app/assets/javascripts/ide/components/commit_sidebar/empty_state.vue
index a13ca0cd138..6a399fc352c 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/empty_state.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/empty_state.vue
@@ -12,7 +12,7 @@ export default {
   <div v-if="!lastCommitMsg" class="multi-file-commit-panel-section ide-commit-empty-state">
     <div class="ide-commit-empty-state-container">
       <div class="svg-content svg-80"><img :src="noChangesStateSvgPath" /></div>
-      <div class="append-right-default prepend-left-default">
+      <div class="append-right-default gl-ml-3">
         <div class="text-content text-center">
           <h4>{{ __('No changes') }}</h4>
           <p>{{ __('Edit files in the editor and commit changes here') }}</p>
diff --git a/app/assets/javascripts/ide/components/commit_sidebar/success_message.vue b/app/assets/javascripts/ide/components/commit_sidebar/success_message.vue
index 137f8bb18c7..35c8e5fb479 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/success_message.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/success_message.vue
@@ -13,7 +13,7 @@ export default {
     <div class="svg-content svg-80">
       <img :src="committedStateSvgPath" :alt="s__('IDE|Successful commit')" />
     </div>
-    <div class="append-right-default prepend-left-default">
+    <div class="append-right-default gl-ml-3">
       <div class="text-content text-center">
         <h4>{{ __('All changes are committed') }}</h4>
         <p v-html="lastCommitMsg"></p>
diff --git a/app/assets/javascripts/integrations/edit/components/dynamic_field.vue b/app/assets/javascripts/integrations/edit/components/dynamic_field.vue
index 29edd18cef2..f9a1671b615 100644
--- a/app/assets/javascripts/integrations/edit/components/dynamic_field.vue
+++ b/app/assets/javascripts/integrations/edit/components/dynamic_field.vue
@@ -162,6 +162,7 @@ export default {
       autocomplete="new-password"
       :placeholder="placeholder"
       :required="passwordRequired"
+      :data-qa-selector="`${fieldId}_field`"
     />
     <gl-form-input
       v-else
@@ -170,6 +171,7 @@ export default {
       :type="type"
       :placeholder="placeholder"
       :required="required"
+      :data-qa-selector="`${fieldId}_field`"
     />
   </gl-form-group>
 </template>
diff --git a/app/assets/javascripts/issuable_bulk_update_actions.js b/app/assets/javascripts/issuable_bulk_update_actions.js
index 01ea3eee16e..005fe8f69fa 100644
--- a/app/assets/javascripts/issuable_bulk_update_actions.js
+++ b/app/assets/javascripts/issuable_bulk_update_actions.js
@@ -86,6 +86,7 @@ export default {
         milestone_id: this.form.find('input[name="update[milestone_id]"]').val(),
         issuable_ids: this.form.find('input[name="update[issuable_ids]"]').val(),
         subscription_event: this.form.find('input[name="update[subscription_event]"]').val(),
+        health_status: this.form.find('input[name="update[health_status]"]').val(),
         add_label_ids: [],
         remove_label_ids: [],
       },
diff --git a/app/assets/javascripts/issuable_bulk_update_sidebar.js b/app/assets/javascripts/issuable_bulk_update_sidebar.js
index 50562688c53..3ff3646edd7 100644
--- a/app/assets/javascripts/issuable_bulk_update_sidebar.js
+++ b/app/assets/javascripts/issuable_bulk_update_sidebar.js
@@ -7,6 +7,8 @@ import MilestoneSelect from './milestone_select';
 import issueStatusSelect from './issue_status_select';
 import subscriptionSelect from './subscription_select';
 import LabelsSelect from './labels_select';
+import HealthStatusSelect from 'ee_else_ce/vue_shared/components/sidebar/health_status_select/health_status_bundle';
+
 import issueableEventHub from './issuables_list/eventhub';
 
 const HIDDEN_CLASS = 'hidden';
@@ -63,6 +65,10 @@ export default class IssuableBulkUpdateSidebar {
     new MilestoneSelect();
     issueStatusSelect();
     subscriptionSelect();
+
+    if (HealthStatusSelect) {
+      HealthStatusSelect();
+    }
   }
 
   setupBulkUpdateActions() {
diff --git a/app/assets/javascripts/pages/projects/pipelines/index/index.js b/app/assets/javascripts/pages/projects/pipelines/index/index.js
index 0bae2984c45..bed9a751d4c 100644
--- a/app/assets/javascripts/pages/projects/pipelines/index/index.js
+++ b/app/assets/javascripts/pages/projects/pipelines/index/index.js
@@ -40,6 +40,7 @@ document.addEventListener(
           props: {
             store: this.store,
             endpoint: this.dataset.endpoint,
+            pipelineScheduleUrl: this.dataset.pipelineScheduleUrl,
             helpPagePath: this.dataset.helpPagePath,
             emptyStateSvgPath: this.dataset.emptyStateSvgPath,
             errorStateSvgPath: this.dataset.errorStateSvgPath,
diff --git a/app/assets/javascripts/pages/sessions/new/length_validator.js b/app/assets/javascripts/pages/sessions/new/length_validator.js
index 3d687ca08cc..92482c81f3c 100644
--- a/app/assets/javascripts/pages/sessions/new/length_validator.js
+++ b/app/assets/javascripts/pages/sessions/new/length_validator.js
@@ -21,11 +21,24 @@ export default class LengthValidator extends InputValidator {
     );
 
     const { value } = this.inputDomElement;
-    const { maxLengthMessage, maxLength } = this.inputDomElement.dataset;
-
-    this.errorMessage = maxLengthMessage;
-
-    this.invalidInput = value.length > parseInt(maxLength, 10);
+    const {
+      minLength,
+      minLengthMessage,
+      maxLengthMessage,
+      maxLength,
+    } = this.inputDomElement.dataset;
+
+    this.invalidInput = false;
+
+    if (value.length > parseInt(maxLength, 10)) {
+      this.invalidInput = true;
+      this.errorMessage = maxLengthMessage;
+    }
+
+    if (value.length < parseInt(minLength, 10)) {
+      this.invalidInput = true;
+      this.errorMessage = minLengthMessage;
+    }
 
     this.setValidationStateAndMessage();
   }
diff --git a/app/assets/javascripts/pages/sessions/new/username_validator.js b/app/assets/javascripts/pages/sessions/new/username_validator.js
index 1048e3b4548..ecb5e677290 100644
--- a/app/assets/javascripts/pages/sessions/new/username_validator.js
+++ b/app/assets/javascripts/pages/sessions/new/username_validator.js
@@ -39,7 +39,7 @@ export default class UsernameValidator extends InputValidator {
   static validateUsernameInput(inputDomElement) {
     const username = inputDomElement.value;
 
-    if (inputDomElement.checkValidity() && username.length > 0) {
+    if (inputDomElement.checkValidity() && username.length > 1) {
       UsernameValidator.setMessageVisibility(inputDomElement, pendingMessageSelector);
       UsernameValidator.fetchUsernameAvailability(username)
         .then(usernameTaken => {
diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_triggerer.vue b/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_triggerer.vue
index 740b54cd8e0..35fd9837b3e 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_triggerer.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_triggerer.vue
@@ -26,9 +26,9 @@ export default {
       :img-src="user.avatar_url"
       :img-size="26"
       :tooltip-text="user.name"
-      class="prepend-left-default js-pipeline-url-user"
+      class="gl-ml-3 js-pipeline-url-user"
     />
-    <span v-else class="prepend-left-default js-pipeline-url-api api">
+    <span v-else class="gl-ml-3 js-pipeline-url-api api">
       {{ s__('Pipelines|API') }}
     </span>
   </div>
diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_url.vue b/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_url.vue
index 6c977b841af..2905b2ca26f 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_url.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_url.vue
@@ -1,6 +1,7 @@
 <script>
 import { GlLink, GlTooltipDirective } from '@gitlab/ui';
 import { escape } from 'lodash';
+import { SCHEDULE_ORIGIN } from '../../constants';
 import { __, sprintf } from '~/locale';
 import popover from '~/vue_shared/directives/popover';
 
@@ -27,6 +28,10 @@ export default {
       type: Object,
       required: true,
     },
+    pipelineScheduleUrl: {
+      type: String,
+      required: true,
+    },
     autoDevopsHelpPath: {
       type: String,
       required: true,
@@ -36,6 +41,9 @@ export default {
     user() {
       return this.pipeline.user;
     },
+    isScheduled() {
+      return this.pipeline.source === SCHEDULE_ORIGIN;
+    },
     popoverOptions() {
       return {
         html: true,
@@ -61,16 +69,28 @@ export default {
     <gl-link
       :href="pipeline.path"
       class="js-pipeline-url-link js-onboarding-pipeline-item"
+      data-testid="pipeline-url-link"
       data-qa-selector="pipeline_url_link"
     >
       <span class="pipeline-id">#{{ pipeline.id }}</span>
     </gl-link>
     <div class="label-container">
+      <gl-link v-if="isScheduled" :href="pipelineScheduleUrl" target="__blank">
+        <span
+          v-gl-tooltip
+          :title="__('This pipeline was triggered by a schedule.')"
+          class="badge badge-info"
+          data-testid="pipeline-url-scheduled"
+        >
+          {{ __('Scheduled') }}
+        </span>
+      </gl-link>
       <span
         v-if="pipeline.flags.latest"
         v-gl-tooltip
         :title="__('Latest pipeline for the most recent commit on this branch')"
         class="js-pipeline-url-latest badge badge-success"
+        data-testid="pipeline-url-latest"
       >
         {{ __('latest') }}
       </span>
@@ -79,6 +99,7 @@ export default {
         v-gl-tooltip
         :title="pipeline.yaml_errors"
         class="js-pipeline-url-yaml badge badge-danger"
+        data-testid="pipeline-url-yaml"
       >
         {{ __('yaml invalid') }}
       </span>
@@ -87,6 +108,7 @@ export default {
         v-gl-tooltip
         :title="pipeline.failure_reason"
         class="js-pipeline-url-failure badge badge-danger"
+        data-testid="pipeline-url-failure"
       >
         {{ __('error') }}
       </span>
@@ -95,10 +117,15 @@ export default {
         v-popover="popoverOptions"
         tabindex="0"
         class="js-pipeline-url-autodevops badge badge-info autodevops-badge"
+        data-testid="pipeline-url-autodevops"
         role="button"
         >{{ __('Auto DevOps') }}</gl-link
       >
-      <span v-if="pipeline.flags.stuck" class="js-pipeline-url-stuck badge badge-warning">
+      <span
+        v-if="pipeline.flags.stuck"
+        class="js-pipeline-url-stuck badge badge-warning"
+        data-testid="pipeline-url-stuck"
+      >
         {{ __('stuck') }}
       </span>
       <span
@@ -110,6 +137,7 @@ export default {
           )
         "
         class="js-pipeline-url-detached badge badge-info"
+        data-testid="pipeline-url-detached"
       >
         {{ __('detached') }}
       </span>
diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/pipelines.vue b/app/assets/javascripts/pipelines/components/pipelines_list/pipelines.vue
index 2f5577e80a8..0c531650fd2 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_list/pipelines.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_list/pipelines.vue
@@ -42,6 +42,11 @@ export default {
       type: String,
       required: true,
     },
+    pipelineScheduleUrl: {
+      type: String,
+      required: false,
+      default: '',
+    },
     helpPagePath: {
       type: String,
       required: true,
@@ -340,6 +345,7 @@ export default {
       <div v-else-if="stateToRender === $options.stateMap.tableList" class="table-holder">
         <pipelines-table-component
           :pipelines="state.pipelines"
+          :pipeline-schedule-url="pipelineScheduleUrl"
           :update-graph-dropdown="updateGraphDropdown"
           :auto-devops-help-path="autoDevopsPath"
           :view-type="viewType"
diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_table.vue b/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_table.vue
index e29219f8f88..b8112149778 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_table.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_table.vue
@@ -22,6 +22,11 @@ export default {
       type: Array,
       required: true,
     },
+    pipelineScheduleUrl: {
+      type: String,
+      required: false,
+      default: '',
+    },
     updateGraphDropdown: {
       type: Boolean,
       required: false,
@@ -91,6 +96,7 @@ export default {
       v-for="model in pipelines"
       :key="model.id"
       :pipeline="model"
+      :pipeline-schedule-url="pipelineScheduleUrl"
       :update-graph-dropdown="updateGraphDropdown"
       :auto-devops-help-path="autoDevopsHelpPath"
       :view-type="viewType"
diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_table_row.vue b/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_table_row.vue
index 733ebbf81ec..c63d4f10e0a 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_table_row.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_table_row.vue
@@ -35,6 +35,11 @@ export default {
       type: Object,
       required: true,
     },
+    pipelineScheduleUrl: {
+      type: String,
+      required: false,
+      default: '',
+    },
     updateGraphDropdown: {
       type: Boolean,
       required: false,
@@ -274,7 +279,11 @@ export default {
       </div>
     </div>
 
-    <pipeline-url :pipeline="pipeline" :auto-devops-help-path="autoDevopsHelpPath" />
+    <pipeline-url
+      :pipeline="pipeline"
+      :pipeline-schedule-url="pipelineScheduleUrl"
+      :auto-devops-help-path="autoDevopsHelpPath"
+    />
     <pipeline-triggerer :pipeline="pipeline" />
 
     <div class="table-section section-wrap section-20">
diff --git a/app/assets/javascripts/pipelines/constants.js b/app/assets/javascripts/pipelines/constants.js
index c709f329728..abe5e1060c8 100644
--- a/app/assets/javascripts/pipelines/constants.js
+++ b/app/assets/javascripts/pipelines/constants.js
@@ -7,6 +7,7 @@ export const FILTER_PIPELINES_SEARCH_DELAY = 200;
 export const ANY_TRIGGER_AUTHOR = 'Any';
 export const SUPPORTED_FILTER_PARAMETERS = ['username', 'ref', 'status'];
 export const FILTER_TAG_IDENTIFIER = 'tag';
+export const SCHEDULE_ORIGIN = 'schedule';
 
 export const TestStatus = {
   FAILED: 'failed',
diff --git a/app/assets/javascripts/registry/settings/components/registry_settings_app.vue b/app/assets/javascripts/registry/settings/components/registry_settings_app.vue
index b4a59fd0178..2ee7bbef4c6 100644
--- a/app/assets/javascripts/registry/settings/components/registry_settings_app.vue
+++ b/app/assets/javascripts/registry/settings/components/registry_settings_app.vue
@@ -1,11 +1,16 @@
 <script>
 import { mapActions, mapGetters, mapState } from 'vuex';
 import { GlAlert, GlSprintf, GlLink } from '@gitlab/ui';
-import { s__ } from '~/locale';
 
 import { FETCH_SETTINGS_ERROR_MESSAGE } from '../../shared/constants';
 
 import SettingsForm from './settings_form.vue';
+import {
+  UNAVAILABLE_FEATURE_TITLE,
+  UNAVAILABLE_FEATURE_INTRO_TEXT,
+  UNAVAILABLE_USER_FEATURE_TEXT,
+  UNAVAILABLE_ADMIN_FEATURE_TEXT,
+} from '../constants';
 
 export default {
   components: {
@@ -15,17 +20,9 @@ export default {
     GlLink,
   },
   i18n: {
-    unavailableFeatureTitle: s__(
-      `ContainerRegistry|Container Registry tag expiration and retention policy is disabled`,
-    ),
-    unavailableFeatureIntroText: s__(
-      `ContainerRegistry|The Container Registry tag expiration and retention policies for this project have not been enabled.`,
-    ),
-    unavailableUserFeatureText: s__(`ContainerRegistry|Please contact your administrator.`),
-    unavailableAdminFeatureText: s__(
-      `ContainerRegistry| Please visit the %{linkStart}administration settings%{linkEnd} to enable this feature.`,
-    ),
-    fetchSettingsErrorText: FETCH_SETTINGS_ERROR_MESSAGE,
+    UNAVAILABLE_FEATURE_TITLE,
+    UNAVAILABLE_FEATURE_INTRO_TEXT,
+    FETCH_SETTINGS_ERROR_MESSAGE,
   },
   data() {
     return {
@@ -42,9 +39,7 @@ export default {
       return this.isDisabled && !this.fetchSettingsError;
     },
     unavailableFeatureMessage() {
-      return this.isAdmin
-        ? this.$options.i18n.unavailableAdminFeatureText
-        : this.$options.i18n.unavailableUserFeatureText;
+      return this.isAdmin ? UNAVAILABLE_ADMIN_FEATURE_TEXT : UNAVAILABLE_USER_FEATURE_TEXT;
     },
   },
   mounted() {
@@ -60,39 +55,24 @@ export default {
 
 <template>
   <div>
-    <p>
-      {{ s__('ContainerRegistry|Tag expiration policy is designed to:') }}
-    </p>
-    <ul>
-      <li>{{ s__('ContainerRegistry|Keep and protect the images that matter most.') }}</li>
-      <li>
-        {{
-          s__(
-            "ContainerRegistry|Automatically remove extra images that aren't designed to be kept.",
-          )
-        }}
-      </li>
-    </ul>
     <settings-form v-if="showSettingForm" />
     <template v-else>
       <gl-alert
         v-if="showDisabledFormMessage"
         :dismissible="false"
-        :title="$options.i18n.unavailableFeatureTitle"
+        :title="$options.i18n.UNAVAILABLE_FEATURE_TITLE"
         variant="tip"
       >
-        {{ $options.i18n.unavailableFeatureIntroText }}
+        {{ $options.i18n.UNAVAILABLE_FEATURE_INTRO_TEXT }}
 
         <gl-sprintf :message="unavailableFeatureMessage">
           <template #link="{ content }">
-            <gl-link :href="adminSettingsPath" target="_blank">
-              {{ content }}
-            </gl-link>
+            <gl-link :href="adminSettingsPath" target="_blank">{{ content }}</gl-link>
           </template>
         </gl-sprintf>
       </gl-alert>
       <gl-alert v-else-if="fetchSettingsError" variant="warning" :dismissible="false">
-        <gl-sprintf :message="$options.i18n.fetchSettingsErrorText" />
+        <gl-sprintf :message="$options.i18n.FETCH_SETTINGS_ERROR_MESSAGE" />
       </gl-alert>
     </template>
   </div>
diff --git a/app/assets/javascripts/registry/settings/components/settings_form.vue b/app/assets/javascripts/registry/settings/components/settings_form.vue
index afd502109bf..63dc4430d18 100644
--- a/app/assets/javascripts/registry/settings/components/settings_form.vue
+++ b/app/assets/javascripts/registry/settings/components/settings_form.vue
@@ -2,12 +2,13 @@
 import { mapActions, mapState, mapGetters } from 'vuex';
 import { GlCard, GlDeprecatedButton, GlLoadingIcon } from '@gitlab/ui';
 import Tracking from '~/tracking';
+import { mapComputed } from '~/vuex_shared/bindings';
 import {
   UPDATE_SETTINGS_ERROR_MESSAGE,
   UPDATE_SETTINGS_SUCCESS_MESSAGE,
 } from '../../shared/constants';
-import { mapComputed } from '~/vuex_shared/bindings';
 import ExpirationPolicyFields from '../../shared/components/expiration_policy_fields.vue';
+import { SET_CLEANUP_POLICY_BUTTON, CLEANUP_POLICY_CARD_HEADER } from '../constants';
 
 export default {
   components: {
@@ -21,6 +22,10 @@ export default {
     cols: 3,
     align: 'right',
   },
+  i18n: {
+    CLEANUP_POLICY_CARD_HEADER,
+    SET_CLEANUP_POLICY_BUTTON,
+  },
   data() {
     return {
       tracking: {
@@ -60,7 +65,7 @@ export default {
   <form ref="form-element" @submit.prevent="submit" @reset.prevent="reset">
     <gl-card>
       <template #header>
-        {{ s__('ContainerRegistry|Tag expiration policy') }}
+        {{ $options.i18n.CLEANUP_POLICY_CARD_HEADER }}
       </template>
       <template #default>
         <expiration-policy-fields
@@ -88,7 +93,7 @@ export default {
             variant="success"
             class="d-flex justify-content-center align-items-center js-no-auto-disable"
           >
-            {{ __('Save expiration policy') }}
+            {{ $options.i18n.SET_CLEANUP_POLICY_BUTTON }}
             <gl-loading-icon v-if="isLoading" class="ml-2" />
           </gl-deprecated-button>
         </div>
diff --git a/app/assets/javascripts/registry/settings/constants.js b/app/assets/javascripts/registry/settings/constants.js
new file mode 100644
index 00000000000..e790658f491
--- /dev/null
+++ b/app/assets/javascripts/registry/settings/constants.js
@@ -0,0 +1,14 @@
+import { s__, __ } from '~/locale';
+
+export const SET_CLEANUP_POLICY_BUTTON = s__('ContainerRegistry|Set cleanup policy');
+export const CLEANUP_POLICY_CARD_HEADER = s__('ContainerRegistry|Tag expiration policy');
+export const UNAVAILABLE_FEATURE_TITLE = s__(
+  `ContainerRegistry|Cleanup policy for tags is disabled`,
+);
+export const UNAVAILABLE_FEATURE_INTRO_TEXT = s__(
+  `ContainerRegistry|This project's cleanup policy for tags is not enabled.`,
+);
+export const UNAVAILABLE_USER_FEATURE_TEXT = __(`Please contact your administrator.`);
+export const UNAVAILABLE_ADMIN_FEATURE_TEXT = s__(
+  `ContainerRegistry| Please visit the %{linkStart}administration settings%{linkEnd} to enable this feature.`,
+);
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 04a547db07e..4cce006c4a3 100644
--- a/app/assets/javascripts/registry/shared/components/expiration_policy_fields.vue
+++ b/app/assets/javascripts/registry/shared/components/expiration_policy_fields.vue
@@ -168,7 +168,7 @@ export default {
           v-model="enabled"
           :disabled="isLoading"
         />
-        <span class="mb-2 ml-1 lh-2">
+        <span class="mb-2 ml-2 lh-2">
           <gl-sprintf :message="$options.i18n.enableToggleDescription">
             <template #toggleStatus>
               <strong>{{ policyEnabledText }}</strong>
diff --git a/app/assets/javascripts/registry/shared/constants.js b/app/assets/javascripts/registry/shared/constants.js
index 4689d01b1c8..380c417f00e 100644
--- a/app/assets/javascripts/registry/shared/constants.js
+++ b/app/assets/javascripts/registry/shared/constants.js
@@ -1,25 +1,25 @@
 import { s__, __ } from '~/locale';
 
 export const FETCH_SETTINGS_ERROR_MESSAGE = s__(
-  'ContainerRegistry|Something went wrong while fetching the expiration policy.',
+  'ContainerRegistry|Something went wrong while fetching the cleanup policy.',
 );
 
 export const UPDATE_SETTINGS_ERROR_MESSAGE = s__(
-  'ContainerRegistry|Something went wrong while updating the expiration policy.',
+  'ContainerRegistry|Something went wrong while updating the cleanup policy.',
 );
 
 export const UPDATE_SETTINGS_SUCCESS_MESSAGE = s__(
-  'ContainerRegistry|Expiration policy successfully saved.',
+  'ContainerRegistry|Cleanup policy successfully saved.',
 );
 
 export const NAME_REGEX_LENGTH = 255;
 
-export const ENABLED_TEXT = __('enabled');
-export const DISABLED_TEXT = __('disabled');
+export const ENABLED_TEXT = __('Enabled');
+export const DISABLED_TEXT = __('Disabled');
 
-export const ENABLE_TOGGLE_LABEL = s__('ContainerRegistry|Expiration policy:');
+export const ENABLE_TOGGLE_LABEL = s__('ContainerRegistry|Cleanup policy:');
 export const ENABLE_TOGGLE_DESCRIPTION = s__(
-  'ContainerRegistry|Docker tag expiration policy is %{toggleStatus}',
+  'ContainerRegistry|%{toggleStatus} - Tags matching the patterns defined below will be scheduled for deletion',
 );
 
 export const TEXT_AREA_INVALID_FEEDBACK = s__(
@@ -34,12 +34,12 @@ export const NAME_REGEX_LABEL = s__(
 );
 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}',
+  'ContainerRegistry|Wildcards 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}.*-master%{codeEnd} or %{codeStart}release-.*%{codeEnd} are supported',
+  'ContainerRegistry|Wildcards such as %{codeStart}.*-master%{codeEnd} or %{codeStart}release-.*%{codeEnd} are supported',
 );
diff --git a/app/assets/javascripts/serverless/components/environment_row.vue b/app/assets/javascripts/serverless/components/environment_row.vue
index 089e0550583..c46dfb66afe 100644
--- a/app/assets/javascripts/serverless/components/environment_row.vue
+++ b/app/assets/javascripts/serverless/components/environment_row.vue
@@ -54,7 +54,7 @@ export default {
       <div class="folder-toggle-wrap d-flex align-items-center">
         <item-caret :is-group-open="isOpen" />
       </div>
-      <div class="group-text flex-grow title namespace-title prepend-left-default">
+      <div class="group-text flex-grow title namespace-title gl-ml-3">
         {{ envName }}
       </div>
     </div>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue
index 9c821be7490..db0f225da8f 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue
@@ -126,7 +126,7 @@ export default {
       <div class="add-border ci-status-icon ci-status-icon-failed ci-error js-ci-error">
         <icon :size="24" name="status_failed_borderless" />
       </div>
-      <div class="media-body prepend-left-default" v-html="errorText"></div>
+      <div class="media-body gl-ml-3" v-html="errorText"></div>
     </template>
     <template v-else-if="hasPipeline">
       <a :href="status.details_path" class="align-self-start append-right-default">
diff --git a/app/assets/javascripts/vue_shared/components/file_finder/index.vue b/app/assets/javascripts/vue_shared/components/file_finder/index.vue
index 9f6f3d2d63a..fa69a4abb21 100644
--- a/app/assets/javascripts/vue_shared/components/file_finder/index.vue
+++ b/app/assets/javascripts/vue_shared/components/file_finder/index.vue
@@ -261,7 +261,7 @@ export default {
             </li>
           </template>
           <li v-else class="dropdown-menu-empty-item">
-            <div class="append-right-default prepend-left-default gl-mt-3 gl-mb-3">
+            <div class="append-right-default gl-ml-3 gl-mt-3 gl-mb-3">
               <template v-if="loading">
                 {{ __('Loading...') }}
               </template>
diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss
index 6435d7a8fa0..2c17af8d4ae 100644
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -403,7 +403,6 @@ img.emoji {
 .prepend-left-5 { margin-left: 5px; }
 .prepend-left-10 { margin-left: 10px; }
 .prepend-left-15 { margin-left: 15px; }
-.prepend-left-default { margin-left: $gl-padding; }
 .prepend-left-20 { margin-left: 20px; }
 .prepend-left-64 { margin-left: 64px; }
 .append-right-5 { margin-right: 5px; }
diff --git a/app/assets/stylesheets/pages/labels.scss b/app/assets/stylesheets/pages/labels.scss
index 5fc21df5ee6..73d2c3ca2f8 100644
--- a/app/assets/stylesheets/pages/labels.scss
+++ b/app/assets/stylesheets/pages/labels.scss
@@ -134,6 +134,11 @@
   }
 }
 
+.label-description-wrapper {
+  margin-right: 8px;
+  margin-left: 8px;
+}
+
 .prioritized-labels {
   margin-bottom: 30px;
 
@@ -385,7 +390,7 @@
       order: 3;
       width: 100%;
 
-      > .append-right-default.prepend-left-default {
+      > .label-description-wrapper {
         margin-left: 0;
         margin-right: 0;
       }