Add latest changes from gitlab-org/gitlab@master

12 files changed, 36 insertions, 20 deletions

diff --git a/app/assets/javascripts/registry/explorer/components/details_page/details_header.vue b/app/assets/javascripts/registry/explorer/components/details_page/details_header.vue
index 3eeb7b29386..37b2865444e 100644
--- a/app/assets/javascripts/registry/explorer/components/details_page/details_header.vue
+++ b/app/assets/javascripts/registry/explorer/components/details_page/details_header.vue
@@ -7,6 +7,7 @@ import timeagoMixin from '~/vue_shared/mixins/timeago';
 import { DETAILS_PAGE_TITLE, UPDATED_AT } from '../../constants/index';
 
 export default {
+  name: 'DetailsHeader',
   components: { GlSprintf, TitleArea, MetadataItem },
   mixins: [timeagoMixin],
   props: {
diff --git a/app/assets/javascripts/registry/explorer/components/details_page/tags_list.vue b/app/assets/javascripts/registry/explorer/components/details_page/tags_list.vue
index ad39a898e7b..1e0736c4a53 100644
--- a/app/assets/javascripts/registry/explorer/components/details_page/tags_list.vue
+++ b/app/assets/javascripts/registry/explorer/components/details_page/tags_list.vue
@@ -4,6 +4,7 @@ import TagsListRow from './tags_list_row.vue';
 import { REMOVE_TAGS_BUTTON_TITLE, TAGS_LIST_TITLE } from '../../constants/index';
 
 export default {
+  name: 'TagsList',
   components: {
     GlButton,
     TagsListRow,
@@ -31,10 +32,10 @@ export default {
   },
   computed: {
     hasSelectedItems() {
-      return this.tags.some(tag => this.selectedItems[tag.name]);
+      return this.tags.some((tag) => this.selectedItems[tag.name]);
     },
     showMultiDeleteButton() {
-      return this.tags.some(tag => tag.canDelete) && !this.isMobile;
+      return this.tags.some((tag) => tag.canDelete) && !this.isMobile;
     },
   },
   methods: {
diff --git a/app/assets/javascripts/registry/explorer/components/list_page/image_list_row.vue b/app/assets/javascripts/registry/explorer/components/list_page/image_list_row.vue
index 3fe61dc231a..f37bc987eb9 100644
--- a/app/assets/javascripts/registry/explorer/components/list_page/image_list_row.vue
+++ b/app/assets/javascripts/registry/explorer/components/list_page/image_list_row.vue
@@ -18,7 +18,7 @@ import {
 } from '../../constants/index';
 
 export default {
-  name: 'ImageListrow',
+  name: 'ImageListRow',
   components: {
     ClipboardButton,
     DeleteButton,
diff --git a/app/assets/javascripts/registry/explorer/components/list_page/registry_header.vue b/app/assets/javascripts/registry/explorer/components/list_page/registry_header.vue
index bad804ad172..f01e3c9d24a 100644
--- a/app/assets/javascripts/registry/explorer/components/list_page/registry_header.vue
+++ b/app/assets/javascripts/registry/explorer/components/list_page/registry_header.vue
@@ -13,6 +13,7 @@ import {
 } from '../../constants/index';
 
 export default {
+  name: 'ListHeader',
   components: {
     TitleArea,
     MetadataItem,
diff --git a/app/assets/javascripts/registry/explorer/components/registry_breadcrumb.vue b/app/assets/javascripts/registry/explorer/components/registry_breadcrumb.vue
index 1cedcc41b2b..b0861ea1a2e 100644
--- a/app/assets/javascripts/registry/explorer/components/registry_breadcrumb.vue
+++ b/app/assets/javascripts/registry/explorer/components/registry_breadcrumb.vue
@@ -14,10 +14,10 @@ export default {
   },
   computed: {
     parsedCrumbs() {
-      return this.crumbs.map(c => ({ ...c, innerHTML: sanitize(c.innerHTML) }));
+      return this.crumbs.map((c) => ({ ...c, innerHTML: sanitize(c.innerHTML) }));
     },
     rootRoute() {
-      return this.$router.options.routes.find(r => r.meta.root);
+      return this.$router.options.routes.find((r) => r.meta.root);
     },
     isRootRoute() {
       return this.$route.name === this.rootRoute.name;
diff --git a/app/assets/javascripts/registry/explorer/index.js b/app/assets/javascripts/registry/explorer/index.js
index d887b6a1b15..ed6d99c62fb 100644
--- a/app/assets/javascripts/registry/explorer/index.js
+++ b/app/assets/javascripts/registry/explorer/index.js
@@ -2,6 +2,7 @@ import Vue from 'vue';
 import { GlToast } from '@gitlab/ui';
 import Translate from '~/vue_shared/translate';
 import { parseBoolean } from '~/lib/utils/common_utils';
+import PerformancePlugin from '~/performance/vue_performance_plugin';
 import RegistryExplorer from './pages/index.vue';
 import RegistryBreadcrumb from './components/registry_breadcrumb.vue';
 import createRouter from './router';
@@ -10,6 +11,17 @@ import { apolloProvider } from './graphql/index';
 Vue.use(Translate);
 Vue.use(GlToast);
 
+Vue.use(PerformancePlugin, {
+  components: [
+    'RegistryListPage',
+    'ListHeader',
+    'ImageListRow',
+    'RegistryDetailsPage',
+    'DetailsHeader',
+    'TagsList',
+  ],
+});
+
 export default () => {
   const el = document.getElementById('js-container-registry');
 
diff --git a/app/assets/javascripts/registry/explorer/pages/details.vue b/app/assets/javascripts/registry/explorer/pages/details.vue
index 540f02d58d4..779b2c5a108 100644
--- a/app/assets/javascripts/registry/explorer/pages/details.vue
+++ b/app/assets/javascripts/registry/explorer/pages/details.vue
@@ -25,6 +25,7 @@ import {
 } from '../constants/index';
 
 export default {
+  name: 'RegistryDetailsPage',
   components: {
     DeleteAlert,
     PartialCleanupAlert,
@@ -97,7 +98,7 @@ export default {
   },
   methods: {
     deleteTags(toBeDeleted) {
-      this.itemsToBeDeleted = this.tags.filter(tag => toBeDeleted[tag.name]);
+      this.itemsToBeDeleted = this.tags.filter((tag) => toBeDeleted[tag.name]);
       this.track('click_button');
       this.$refs.deleteModal.show();
     },
@@ -111,7 +112,7 @@ export default {
           mutation: deleteContainerRepositoryTagsMutation,
           variables: {
             id: this.queryVariables.id,
-            tagNames: itemsToBeDeleted.map(i => i.name),
+            tagNames: itemsToBeDeleted.map((i) => i.name),
           },
           awaitRefetchQueries: true,
           refetchQueries: [
diff --git a/app/assets/javascripts/registry/explorer/pages/list.vue b/app/assets/javascripts/registry/explorer/pages/list.vue
index 270c01ea60f..2aa28d450d7 100644
--- a/app/assets/javascripts/registry/explorer/pages/list.vue
+++ b/app/assets/javascripts/registry/explorer/pages/list.vue
@@ -38,7 +38,7 @@ import {
 } from '../constants/index';
 
 export default {
-  name: 'RegistryListApp',
+  name: 'RegistryListPage',
   components: {
     GlEmptyState,
     ProjectEmptyState,
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 35c7a8be4ea..66eb681784e 100644
--- a/app/assets/javascripts/registry/settings/components/registry_settings_app.vue
+++ b/app/assets/javascripts/registry/settings/components/registry_settings_app.vue
@@ -33,7 +33,7 @@ export default {
           projectPath: this.projectPath,
         };
       },
-      update: data => data.project?.containerExpirationPolicy,
+      update: (data) => data.project?.containerExpirationPolicy,
       result({ data }) {
         this.workingCopy = { ...get(data, 'project.containerExpirationPolicy', {}) };
       },
diff --git a/app/assets/javascripts/registry/settings/components/settings_form.vue b/app/assets/javascripts/registry/settings/components/settings_form.vue
index 1ef0170a7f6..7043cea49ba 100644
--- a/app/assets/javascripts/registry/settings/components/settings_form.vue
+++ b/app/assets/javascripts/registry/settings/components/settings_form.vue
@@ -96,7 +96,7 @@ export default {
       return this.isLoading || this.mutationLoading;
     },
     fieldsAreValid() {
-      return Object.values(this.localErrors).every(error => error);
+      return Object.values(this.localErrors).every((error) => error);
     },
     isSubmitButtonDisabled() {
       return !this.fieldsAreValid || this.showLoadingIcon;
@@ -121,7 +121,7 @@ export default {
   },
   methods: {
     findDefaultOption(option) {
-      return this.value[option] || this.$options.formOptions[option].find(f => f.default)?.key;
+      return this.value[option] || this.$options.formOptions[option].find((f) => f.default)?.key;
     },
     reset() {
       this.track('reset_form');
@@ -131,7 +131,7 @@ export default {
     },
     setApiErrors(response) {
       this.apiErrors = response.graphQLErrors.reduce((acc, curr) => {
-        curr.extensions.problems.forEach(item => {
+        curr.extensions.problems.forEach((item) => {
           acc[item.path[0]] = item.message;
         });
         return acc;
@@ -163,7 +163,7 @@ export default {
             this.$toast.show(UPDATE_SETTINGS_SUCCESS_MESSAGE, { type: 'success' });
           }
         })
-        .catch(error => {
+        .catch((error) => {
           this.setApiErrors(error);
           this.$toast.show(UPDATE_SETTINGS_ERROR_MESSAGE, { type: 'error' });
         })
diff --git a/app/assets/javascripts/registry/settings/graphql/utils/cache_update.js b/app/assets/javascripts/registry/settings/graphql/utils/cache_update.js
index 05b4125a2fc..6becaa38c7e 100644
--- a/app/assets/javascripts/registry/settings/graphql/utils/cache_update.js
+++ b/app/assets/javascripts/registry/settings/graphql/utils/cache_update.js
@@ -1,14 +1,14 @@
 import { produce } from 'immer';
 import expirationPolicyQuery from '../queries/get_expiration_policy.query.graphql';
 
-export const updateContainerExpirationPolicy = projectPath => (client, { data: updatedData }) => {
+export const updateContainerExpirationPolicy = (projectPath) => (client, { data: updatedData }) => {
   const queryAndParams = {
     query: expirationPolicyQuery,
     variables: { projectPath },
   };
   const sourceData = client.readQuery(queryAndParams);
 
-  const data = produce(sourceData, draftState => {
+  const data = produce(sourceData, (draftState) => {
     // eslint-disable-next-line no-param-reassign
     draftState.project.containerExpirationPolicy = {
       ...updatedData.updateContainerExpirationPolicy.containerExpirationPolicy,
diff --git a/app/assets/javascripts/registry/settings/utils.js b/app/assets/javascripts/registry/settings/utils.js
index 51b4fb6bdb8..4a2d7c7d466 100644
--- a/app/assets/javascripts/registry/settings/utils.js
+++ b/app/assets/javascripts/registry/settings/utils.js
@@ -1,18 +1,18 @@
 import { n__ } from '~/locale';
 import { KEEP_N_OPTIONS, CADENCE_OPTIONS, OLDER_THAN_OPTIONS } from './constants';
 
-export const findDefaultOption = options => {
-  const item = options.find(o => o.default);
+export const findDefaultOption = (options) => {
+  const item = options.find((o) => o.default);
   return item ? item.key : null;
 };
 
-export const olderThanTranslationGenerator = variable => n__('%d day', '%d days', variable);
+export const olderThanTranslationGenerator = (variable) => n__('%d day', '%d days', variable);
 
-export const keepNTranslationGenerator = variable =>
+export const keepNTranslationGenerator = (variable) =>
   n__('%d tag per image name', '%d tags per image name', variable);
 
 export const optionLabelGenerator = (collection, translationFn) =>
-  collection.map(option => ({
+  collection.map((option) => ({
     ...option,
     label: translationFn(option.variable),
   }));