Add latest changes from gitlab-org/gitlab@master

35 files changed, 246 insertions, 192 deletions

diff --git a/app/assets/javascripts/admin/users/components/actions/activate.vue b/app/assets/javascripts/admin/users/components/actions/activate.vue
index 74e9c60a57b..3a54035c587 100644
--- a/app/assets/javascripts/admin/users/components/actions/activate.vue
+++ b/app/assets/javascripts/admin/users/components/actions/activate.vue
@@ -1,6 +1,7 @@
 <script>
 import { GlDropdownItem } from '@gitlab/ui';
 import { sprintf, s__, __ } from '~/locale';
+import eventHub, { EVENT_OPEN_CONFIRM_MODAL } from '~/vue_shared/components/confirm_modal_eventhub';
 import { I18N_USER_ACTIONS } from '../../constants';
 
 // TODO: To be replaced with <template> content in https://gitlab.com/gitlab-org/gitlab/-/issues/320922
@@ -26,16 +27,15 @@ export default {
       required: true,
     },
   },
-  computed: {
-    modalAttributes() {
-      return {
-        'data-path': this.path,
-        'data-method': 'put',
-        'data-modal-attributes': JSON.stringify({
+  methods: {
+    onClick() {
+      eventHub.$emit(EVENT_OPEN_CONFIRM_MODAL, {
+        path: this.path,
+        method: 'put',
+        modalAttributes: {
           title: sprintf(s__('AdminUsers|Activate user %{username}?'), {
             username: this.username,
           }),
-          messageHtml,
           actionCancel: {
             text: __('Cancel'),
           },
@@ -43,15 +43,16 @@ export default {
             text: I18N_USER_ACTIONS.activate,
             attributes: [{ variant: 'confirm' }],
           },
-        }),
-      };
+          messageHtml,
+        },
+      });
     },
   },
 };
 </script>
 
 <template>
-  <gl-dropdown-item button-class="js-confirm-modal-button" v-bind="{ ...modalAttributes }">
+  <gl-dropdown-item @click="onClick">
     <slot></slot>
   </gl-dropdown-item>
 </template>
diff --git a/app/assets/javascripts/admin/users/components/actions/approve.vue b/app/assets/javascripts/admin/users/components/actions/approve.vue
index 77a9be8eec2..ff1ac5a0995 100644
--- a/app/assets/javascripts/admin/users/components/actions/approve.vue
+++ b/app/assets/javascripts/admin/users/components/actions/approve.vue
@@ -1,6 +1,7 @@
 <script>
 import { GlDropdownItem } from '@gitlab/ui';
 import { sprintf, s__, __ } from '~/locale';
+import eventHub, { EVENT_OPEN_CONFIRM_MODAL } from '~/vue_shared/components/confirm_modal_eventhub';
 import { I18N_USER_ACTIONS } from '../../constants';
 
 // TODO: To be replaced with <template> content in https://gitlab.com/gitlab-org/gitlab/-/issues/320922
@@ -28,12 +29,12 @@ export default {
       required: true,
     },
   },
-  computed: {
-    attributes() {
-      return {
-        'data-path': this.path,
-        'data-method': 'put',
-        'data-modal-attributes': JSON.stringify({
+  methods: {
+    onClick() {
+      eventHub.$emit(EVENT_OPEN_CONFIRM_MODAL, {
+        path: this.path,
+        method: 'put',
+        modalAttributes: {
           title: sprintf(s__('AdminUsers|Approve user %{username}?'), {
             username: this.username,
           }),
@@ -45,16 +46,16 @@ export default {
             attributes: [{ variant: 'confirm', 'data-qa-selector': 'approve_user_confirm_button' }],
           },
           messageHtml,
-        }),
-        'data-qa-selector': 'approve_user_button',
-      };
+          'data-qa-selector': 'approve_user_button',
+        },
+      });
     },
   },
 };
 </script>
 
 <template>
-  <gl-dropdown-item button-class="js-confirm-modal-button" v-bind="{ ...attributes }">
+  <gl-dropdown-item @click="onClick">
     <slot></slot>
   </gl-dropdown-item>
 </template>
diff --git a/app/assets/javascripts/admin/users/components/actions/ban.vue b/app/assets/javascripts/admin/users/components/actions/ban.vue
index e5ab0f9123f..55938832dce 100644
--- a/app/assets/javascripts/admin/users/components/actions/ban.vue
+++ b/app/assets/javascripts/admin/users/components/actions/ban.vue
@@ -2,6 +2,7 @@
 import { GlDropdownItem } from '@gitlab/ui';
 import { helpPagePath } from '~/helpers/help_page_helper';
 import { sprintf, s__, __ } from '~/locale';
+import eventHub, { EVENT_OPEN_CONFIRM_MODAL } from '~/vue_shared/components/confirm_modal_eventhub';
 import { I18N_USER_ACTIONS } from '../../constants';
 
 // TODO: To be replaced with <template> content in https://gitlab.com/gitlab-org/gitlab/-/issues/320922
@@ -39,12 +40,12 @@ export default {
       required: true,
     },
   },
-  computed: {
-    modalAttributes() {
-      return {
-        'data-path': this.path,
-        'data-method': 'put',
-        'data-modal-attributes': JSON.stringify({
+  methods: {
+    onClick() {
+      eventHub.$emit(EVENT_OPEN_CONFIRM_MODAL, {
+        path: this.path,
+        method: 'put',
+        modalAttributes: {
           title: sprintf(s__('AdminUsers|Ban user %{username}?'), {
             username: this.username,
           }),
@@ -56,15 +57,15 @@ export default {
             attributes: [{ variant: 'confirm' }],
           },
           messageHtml,
-        }),
-      };
+        },
+      });
     },
   },
 };
 </script>
 
 <template>
-  <gl-dropdown-item button-class="js-confirm-modal-button" v-bind="{ ...modalAttributes }">
+  <gl-dropdown-item @click="onClick">
     <slot></slot>
   </gl-dropdown-item>
 </template>
diff --git a/app/assets/javascripts/admin/users/components/actions/block.vue b/app/assets/javascripts/admin/users/components/actions/block.vue
index 03557008a89..d25dd400f9b 100644
--- a/app/assets/javascripts/admin/users/components/actions/block.vue
+++ b/app/assets/javascripts/admin/users/components/actions/block.vue
@@ -1,6 +1,7 @@
 <script>
 import { GlDropdownItem } from '@gitlab/ui';
 import { sprintf, s__, __ } from '~/locale';
+import eventHub, { EVENT_OPEN_CONFIRM_MODAL } from '~/vue_shared/components/confirm_modal_eventhub';
 import { I18N_USER_ACTIONS } from '../../constants';
 
 // TODO: To be replaced with <template> content in https://gitlab.com/gitlab-org/gitlab/-/issues/320922
@@ -29,12 +30,12 @@ export default {
       required: true,
     },
   },
-  computed: {
-    modalAttributes() {
-      return {
-        'data-path': this.path,
-        'data-method': 'put',
-        'data-modal-attributes': JSON.stringify({
+  methods: {
+    onClick() {
+      eventHub.$emit(EVENT_OPEN_CONFIRM_MODAL, {
+        path: this.path,
+        method: 'put',
+        modalAttributes: {
           title: sprintf(s__('AdminUsers|Block user %{username}?'), { username: this.username }),
           actionCancel: {
             text: __('Cancel'),
@@ -44,15 +45,15 @@ export default {
             attributes: [{ variant: 'confirm' }],
           },
           messageHtml,
-        }),
-      };
+        },
+      });
     },
   },
 };
 </script>
 
 <template>
-  <gl-dropdown-item button-class="js-confirm-modal-button" v-bind="{ ...modalAttributes }">
+  <gl-dropdown-item @click="onClick">
     <slot></slot>
   </gl-dropdown-item>
 </template>
diff --git a/app/assets/javascripts/admin/users/components/actions/deactivate.vue b/app/assets/javascripts/admin/users/components/actions/deactivate.vue
index 640c8fefc20..c85f3f01675 100644
--- a/app/assets/javascripts/admin/users/components/actions/deactivate.vue
+++ b/app/assets/javascripts/admin/users/components/actions/deactivate.vue
@@ -1,6 +1,7 @@
 <script>
 import { GlDropdownItem } from '@gitlab/ui';
 import { sprintf, s__, __ } from '~/locale';
+import eventHub, { EVENT_OPEN_CONFIRM_MODAL } from '~/vue_shared/components/confirm_modal_eventhub';
 import { I18N_USER_ACTIONS } from '../../constants';
 
 // TODO: To be replaced with <template> content in https://gitlab.com/gitlab-org/gitlab/-/issues/320922
@@ -36,12 +37,12 @@ export default {
       required: true,
     },
   },
-  computed: {
-    modalAttributes() {
-      return {
-        'data-path': this.path,
-        'data-method': 'put',
-        'data-modal-attributes': JSON.stringify({
+  methods: {
+    onClick() {
+      eventHub.$emit(EVENT_OPEN_CONFIRM_MODAL, {
+        path: this.path,
+        method: 'put',
+        modalAttributes: {
           title: sprintf(s__('AdminUsers|Deactivate user %{username}?'), {
             username: this.username,
           }),
@@ -53,15 +54,15 @@ export default {
             attributes: [{ variant: 'confirm' }],
           },
           messageHtml,
-        }),
-      };
+        },
+      });
     },
   },
 };
 </script>
 
 <template>
-  <gl-dropdown-item button-class="js-confirm-modal-button" v-bind="{ ...modalAttributes }">
+  <gl-dropdown-item @click="onClick">
     <slot></slot>
   </gl-dropdown-item>
 </template>
diff --git a/app/assets/javascripts/admin/users/components/actions/reject.vue b/app/assets/javascripts/admin/users/components/actions/reject.vue
index 901306455fa..bac08de1d5e 100644
--- a/app/assets/javascripts/admin/users/components/actions/reject.vue
+++ b/app/assets/javascripts/admin/users/components/actions/reject.vue
@@ -2,6 +2,7 @@
 import { GlDropdownItem } from '@gitlab/ui';
 import { helpPagePath } from '~/helpers/help_page_helper';
 import { sprintf, s__, __ } from '~/locale';
+import eventHub, { EVENT_OPEN_CONFIRM_MODAL } from '~/vue_shared/components/confirm_modal_eventhub';
 import { I18N_USER_ACTIONS } from '../../constants';
 
 // TODO: To be replaced with <template> content in https://gitlab.com/gitlab-org/gitlab/-/issues/320922
@@ -39,12 +40,12 @@ export default {
       required: true,
     },
   },
-  computed: {
-    modalAttributes() {
-      return {
-        'data-path': this.path,
-        'data-method': 'delete',
-        'data-modal-attributes': JSON.stringify({
+  methods: {
+    onClick() {
+      eventHub.$emit(EVENT_OPEN_CONFIRM_MODAL, {
+        path: this.path,
+        method: 'delete',
+        modalAttributes: {
           title: sprintf(s__('AdminUsers|Reject user %{username}?'), {
             username: this.username,
           }),
@@ -56,15 +57,15 @@ export default {
             attributes: [{ variant: 'danger' }],
           },
           messageHtml,
-        }),
-      };
+        },
+      });
     },
   },
 };
 </script>
 
 <template>
-  <gl-dropdown-item button-class="js-confirm-modal-button" v-bind="{ ...modalAttributes }">
+  <gl-dropdown-item @click="onClick">
     <slot></slot>
   </gl-dropdown-item>
 </template>
diff --git a/app/assets/javascripts/admin/users/components/actions/unban.vue b/app/assets/javascripts/admin/users/components/actions/unban.vue
index 8083e26177e..beede2d37d7 100644
--- a/app/assets/javascripts/admin/users/components/actions/unban.vue
+++ b/app/assets/javascripts/admin/users/components/actions/unban.vue
@@ -1,6 +1,7 @@
 <script>
 import { GlDropdownItem } from '@gitlab/ui';
 import { sprintf, s__, __ } from '~/locale';
+import eventHub, { EVENT_OPEN_CONFIRM_MODAL } from '~/vue_shared/components/confirm_modal_eventhub';
 import { I18N_USER_ACTIONS } from '../../constants';
 
 // TODO: To be replaced with <template> content in https://gitlab.com/gitlab-org/gitlab/-/issues/320922
@@ -22,12 +23,12 @@ export default {
       required: true,
     },
   },
-  computed: {
-    modalAttributes() {
-      return {
-        'data-path': this.path,
-        'data-method': 'put',
-        'data-modal-attributes': JSON.stringify({
+  methods: {
+    onClick() {
+      eventHub.$emit(EVENT_OPEN_CONFIRM_MODAL, {
+        path: this.path,
+        method: 'put',
+        modalAttributes: {
           title: sprintf(s__('AdminUsers|Unban user %{username}?'), {
             username: this.username,
           }),
@@ -39,15 +40,15 @@ export default {
             attributes: [{ variant: 'confirm' }],
           },
           messageHtml,
-        }),
-      };
+        },
+      });
     },
   },
 };
 </script>
 
 <template>
-  <gl-dropdown-item button-class="js-confirm-modal-button" v-bind="{ ...modalAttributes }">
+  <gl-dropdown-item @click="onClick">
     <slot></slot>
   </gl-dropdown-item>
 </template>
diff --git a/app/assets/javascripts/admin/users/components/actions/unblock.vue b/app/assets/javascripts/admin/users/components/actions/unblock.vue
index 7de6653e0cd..720f2efd932 100644
--- a/app/assets/javascripts/admin/users/components/actions/unblock.vue
+++ b/app/assets/javascripts/admin/users/components/actions/unblock.vue
@@ -1,6 +1,7 @@
 <script>
 import { GlDropdownItem } from '@gitlab/ui';
 import { sprintf, s__, __ } from '~/locale';
+import eventHub, { EVENT_OPEN_CONFIRM_MODAL } from '~/vue_shared/components/confirm_modal_eventhub';
 import { I18N_USER_ACTIONS } from '../../constants';
 
 export default {
@@ -17,12 +18,13 @@ export default {
       required: true,
     },
   },
-  computed: {
-    modalAttributes() {
-      return {
-        'data-path': this.path,
-        'data-method': 'put',
-        'data-modal-attributes': JSON.stringify({
+
+  methods: {
+    onClick() {
+      eventHub.$emit(EVENT_OPEN_CONFIRM_MODAL, {
+        path: this.path,
+        method: 'put',
+        modalAttributes: {
           title: sprintf(s__('AdminUsers|Unblock user %{username}?'), { username: this.username }),
           message: s__('AdminUsers|You can always block their account again if needed.'),
           actionCancel: {
@@ -32,15 +34,15 @@ export default {
             text: I18N_USER_ACTIONS.unblock,
             attributes: [{ variant: 'confirm' }],
           },
-        }),
-      };
+        },
+      });
     },
   },
 };
 </script>
 
 <template>
-  <gl-dropdown-item button-class="js-confirm-modal-button" v-bind="{ ...modalAttributes }">
+  <gl-dropdown-item @click="onClick">
     <slot></slot>
   </gl-dropdown-item>
 </template>
diff --git a/app/assets/javascripts/admin/users/components/actions/unlock.vue b/app/assets/javascripts/admin/users/components/actions/unlock.vue
index 10d4fb06d61..55ea3e0aba7 100644
--- a/app/assets/javascripts/admin/users/components/actions/unlock.vue
+++ b/app/assets/javascripts/admin/users/components/actions/unlock.vue
@@ -1,6 +1,7 @@
 <script>
 import { GlDropdownItem } from '@gitlab/ui';
 import { sprintf, s__, __ } from '~/locale';
+import eventHub, { EVENT_OPEN_CONFIRM_MODAL } from '~/vue_shared/components/confirm_modal_eventhub';
 import { I18N_USER_ACTIONS } from '../../constants';
 
 export default {
@@ -17,12 +18,12 @@ export default {
       required: true,
     },
   },
-  computed: {
-    modalAttributes() {
-      return {
-        'data-path': this.path,
-        'data-method': 'put',
-        'data-modal-attributes': JSON.stringify({
+  methods: {
+    onClick() {
+      eventHub.$emit(EVENT_OPEN_CONFIRM_MODAL, {
+        path: this.path,
+        method: 'put',
+        modalAttributes: {
           title: sprintf(s__('AdminUsers|Unlock user %{username}?'), { username: this.username }),
           message: __('Are you sure?'),
           actionCancel: {
@@ -32,15 +33,15 @@ export default {
             text: I18N_USER_ACTIONS.unlock,
             attributes: [{ variant: 'confirm' }],
           },
-        }),
-      };
+        },
+      });
     },
   },
 };
 </script>
 
 <template>
-  <gl-dropdown-item button-class="js-confirm-modal-button" v-bind="{ ...modalAttributes }">
+  <gl-dropdown-item @click="onClick">
     <slot></slot>
   </gl-dropdown-item>
 </template>
diff --git a/app/assets/javascripts/design_management/components/design_notes/design_discussion.vue b/app/assets/javascripts/design_management/components/design_notes/design_discussion.vue
index 813f87452d8..10976202d06 100644
--- a/app/assets/javascripts/design_management/components/design_notes/design_discussion.vue
+++ b/app/assets/javascripts/design_management/components/design_notes/design_discussion.vue
@@ -1,11 +1,12 @@
 <script>
-import { GlTooltipDirective, GlIcon, GlLoadingIcon, GlLink, GlBadge } from '@gitlab/ui';
+import { GlTooltipDirective, GlIcon, GlLoadingIcon, GlLink } from '@gitlab/ui';
 import { ApolloMutation } from 'vue-apollo';
 import createFlash from '~/flash';
 import { s__ } from '~/locale';
 import ReplyPlaceholder from '~/notes/components/discussion_reply_placeholder.vue';
 import { updateGlobalTodoCount } from '~/vue_shared/components/sidebar/todo_toggle/utils';
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
+import DesignNotePin from '~/vue_shared/components/design_management/design_note_pin.vue';
 import { ACTIVE_DISCUSSION_SOURCE_TYPES } from '../../constants';
 import createNoteMutation from '../../graphql/mutations/create_note.mutation.graphql';
 import toggleResolveDiscussionMutation from '../../graphql/mutations/toggle_resolve_discussion.mutation.graphql';
@@ -30,7 +31,7 @@ export default {
     GlLink,
     ToggleRepliesWidget,
     TimeAgoTooltip,
-    GlBadge,
+    DesignNotePin,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -213,12 +214,7 @@ export default {
 
 <template>
   <div class="design-discussion-wrapper">
-    <gl-badge
-      class="gl-display-flex gl-align-items-center gl-justify-content-center gl-cursor-pointer"
-      :class="{ resolved: discussion.resolved }"
-    >
-      {{ discussion.index }}
-    </gl-badge>
+    <design-note-pin :is-resolved="discussion.resolved" :label="discussion.index" />
     <ul
       class="design-discussion bordered-box gl-relative gl-p-0 gl-list-style-none"
       data-qa-selector="design_discussion_content"
diff --git a/app/assets/javascripts/design_management/components/design_overlay.vue b/app/assets/javascripts/design_management/components/design_overlay.vue
index 7815a57ce18..b058709b316 100644
--- a/app/assets/javascripts/design_management/components/design_overlay.vue
+++ b/app/assets/javascripts/design_management/components/design_overlay.vue
@@ -1,9 +1,9 @@
 <script>
 import { __ } from '~/locale';
+import DesignNotePin from '~/vue_shared/components/design_management/design_note_pin.vue';
 import { ACTIVE_DISCUSSION_SOURCE_TYPES } from '../constants';
 import updateActiveDiscussionMutation from '../graphql/mutations/update_active_discussion.mutation.graphql';
 import activeDiscussionQuery from '../graphql/queries/active_discussion.query.graphql';
-import DesignNotePin from './design_note_pin.vue';
 
 export default {
   name: 'DesignOverlay',
@@ -251,9 +251,6 @@ export default {
         !discussionNotes.some(({ id }) => id === this.activeDiscussion.id)
       );
     },
-    designPinClass(note) {
-      return { inactive: this.isNoteInactive(note), resolved: note.resolved };
-    },
   },
   i18n: {
     newCommentButtonLabel: __('Add comment to design'),
@@ -287,7 +284,8 @@ export default {
           ? getNotePositionStyle(movingNoteNewPosition)
           : getNotePositionStyle(note.position)
       "
-      :class="designPinClass(note)"
+      :is-inactive="isNoteInactive(note)"
+      :is-resolved="note.resolved"
       @mousedown.stop="onNoteMousedown($event, note)"
       @mouseup.stop="onNoteMouseup(note)"
     />
diff --git a/app/assets/javascripts/environments/components/new_environment_folder.vue b/app/assets/javascripts/environments/components/new_environment_folder.vue
index 0615bdef537..fe3d6f1e8ca 100644
--- a/app/assets/javascripts/environments/components/new_environment_folder.vue
+++ b/app/assets/javascripts/environments/components/new_environment_folder.vue
@@ -1,9 +1,11 @@
 <script>
-import { GlCollapse, GlIcon, GlBadge, GlLink } from '@gitlab/ui';
+import { GlButton, GlCollapse, GlIcon, GlBadge, GlLink } from '@gitlab/ui';
+import { __, s__ } from '~/locale';
 import folderQuery from '../graphql/queries/folder.query.graphql';
 
 export default {
   components: {
+    GlButton,
     GlCollapse,
     GlIcon,
     GlBadge,
@@ -26,12 +28,20 @@ export default {
       },
     },
   },
+  i18n: {
+    collapse: __('Collapse'),
+    expand: __('Expand'),
+    link: s__('Environments|Show all'),
+  },
   computed: {
     icons() {
       return this.visible
         ? { caret: 'angle-down', folder: 'folder-open' }
         : { caret: 'angle-right', folder: 'folder-o' };
     },
+    label() {
+      return this.visible ? this.$options.i18n.collapse : this.$options.i18n.expand;
+    },
     count() {
       return this.folder?.availableCount ?? 0;
     },
@@ -51,18 +61,21 @@ export default {
 </script>
 <template>
   <div class="gl-border-b-solid gl-border-gray-100 gl-border-1 gl-px-3 gl-pt-3 gl-pb-5">
-    <div class="gl-w-full gl-display-flex gl-align-items-center" @click="toggleCollapse">
-      <gl-icon
-        class="gl-mr-2 gl-fill-current-color gl-text-gray-500"
-        :name="icons.caret"
-        :size="12"
+    <div class="gl-w-full gl-display-flex gl-align-items-center">
+      <gl-button
+        class="gl-mr-4 gl-fill-current-color gl-text-gray-500"
+        :aria-label="label"
+        :icon="icons.caret"
+        size="small"
+        category="tertiary"
+        @click="toggleCollapse"
       />
       <gl-icon class="gl-mr-2 gl-fill-current-color gl-text-gray-500" :name="icons.folder" />
       <div class="gl-mr-2 gl-text-gray-500" :class="folderClass">
         {{ nestedEnvironment.name }}
       </div>
       <gl-badge size="sm" class="gl-mr-auto">{{ count }}</gl-badge>
-      <gl-link v-if="visible" :href="folderPath">{{ s__('Environments|Show all') }}</gl-link>
+      <gl-link v-if="visible" :href="folderPath">{{ $options.i18n.link }}</gl-link>
     </div>
     <gl-collapse :visible="visible" />
   </div>
diff --git a/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/details_page/delete_modal.vue b/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/details_page/delete_modal.vue
index f857c96c9d1..7a8a1bbcf09 100644
--- a/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/details_page/delete_modal.vue
+++ b/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/details_page/delete_modal.vue
@@ -82,6 +82,7 @@ export default {
     ref="deleteModal"
     modal-id="delete-tag-modal"
     ok-variant="danger"
+    size="sm"
     :action-primary="{
       text: __('Delete'),
       attributes: [{ variant: 'danger' }, { disabled: disablePrimaryButton }],
diff --git a/app/assets/javascripts/packages_and_registries/container_registry/explorer/pages/list.vue b/app/assets/javascripts/packages_and_registries/container_registry/explorer/pages/list.vue
index 73b957f42f2..3274de05803 100644
--- a/app/assets/javascripts/packages_and_registries/container_registry/explorer/pages/list.vue
+++ b/app/assets/javascripts/packages_and_registries/container_registry/explorer/pages/list.vue
@@ -388,6 +388,7 @@ export default {
         <template #default="{ doDelete }">
           <gl-modal
             ref="deleteModal"
+            size="sm"
             modal-id="delete-image-modal"
             :action-primary="{ text: __('Remove'), attributes: { variant: 'danger' } }"
             @primary="doDelete"
diff --git a/app/assets/javascripts/packages_and_registries/infrastructure_registry/details/components/app.vue b/app/assets/javascripts/packages_and_registries/infrastructure_registry/details/components/app.vue
index 00f3cb09a78..c60e0ff794f 100644
--- a/app/assets/javascripts/packages_and_registries/infrastructure_registry/details/components/app.vue
+++ b/app/assets/javascripts/packages_and_registries/infrastructure_registry/details/components/app.vue
@@ -203,6 +203,7 @@ export default {
 
     <gl-modal
       ref="deleteModal"
+      size="sm"
       modal-id="delete-modal"
       :action-primary="$options.modal.packageDeletePrimaryAction"
       :action-cancel="$options.modal.cancelAction"
@@ -223,6 +224,7 @@ export default {
 
     <gl-modal
       ref="deleteFileModal"
+      size="sm"
       modal-id="delete-file-modal"
       :action-primary="$options.modal.fileDeletePrimaryAction"
       :action-cancel="$options.modal.cancelAction"
diff --git a/app/assets/javascripts/packages_and_registries/infrastructure_registry/list/components/infrastructure_search.vue b/app/assets/javascripts/packages_and_registries/infrastructure_registry/list/components/infrastructure_search.vue
index 4928da862ea..c611f92036d 100644
--- a/app/assets/javascripts/packages_and_registries/infrastructure_registry/list/components/infrastructure_search.vue
+++ b/app/assets/javascripts/packages_and_registries/infrastructure_registry/list/components/infrastructure_search.vue
@@ -1,7 +1,7 @@
 <script>
 import { mapState, mapActions } from 'vuex';
-import { LIST_KEY_PACKAGE_TYPE } from '~/packages/list/constants';
-import { sortableFields } from '~/packages/list/utils';
+import { LIST_KEY_PACKAGE_TYPE } from '~/packages_and_registries/infrastructure_registry/list/constants';
+import { sortableFields } from '~/packages_and_registries/infrastructure_registry/list/utils';
 import RegistrySearch from '~/vue_shared/components/registry/registry_search.vue';
 import UrlSync from '~/vue_shared/components/url_sync.vue';
 
diff --git a/app/assets/javascripts/packages_and_registries/infrastructure_registry/list/components/packages_list.vue b/app/assets/javascripts/packages_and_registries/infrastructure_registry/list/components/packages_list.vue
index cd15909e6b8..06ec193546a 100644
--- a/app/assets/javascripts/packages_and_registries/infrastructure_registry/list/components/packages_list.vue
+++ b/app/assets/javascripts/packages_and_registries/infrastructure_registry/list/components/packages_list.vue
@@ -111,6 +111,7 @@ export default {
 
       <gl-modal
         ref="packageListDeleteModal"
+        size="sm"
         modal-id="confirm-delete-pacakge"
         ok-variant="danger"
         @ok="deleteItemConfirmation"
diff --git a/app/assets/javascripts/packages_and_registries/infrastructure_registry/list/components/packages_list_app.vue b/app/assets/javascripts/packages_and_registries/infrastructure_registry/list/components/packages_list_app.vue
index c4927a24d33..6bfcc1268b2 100644
--- a/app/assets/javascripts/packages_and_registries/infrastructure_registry/list/components/packages_list_app.vue
+++ b/app/assets/javascripts/packages_and_registries/infrastructure_registry/list/components/packages_list_app.vue
@@ -10,7 +10,7 @@ import { getQueryParams, extractFilterAndSorting } from '~/packages_and_registri
 import InfrastructureTitle from '~/packages_and_registries/infrastructure_registry/list/components/infrastructure_title.vue';
 import InfrastructureSearch from '~/packages_and_registries/infrastructure_registry/list/components/infrastructure_search.vue';
 import PackageList from '~/packages_and_registries/infrastructure_registry/list/components/packages_list.vue';
-import { DELETE_PACKAGE_SUCCESS_MESSAGE } from '~/packages/list/constants';
+import { DELETE_PACKAGE_SUCCESS_MESSAGE } from '~/packages_and_registries/infrastructure_registry/list/constants';
 
 export default {
   components: {
diff --git a/app/assets/javascripts/packages/list/constants.js b/app/assets/javascripts/packages_and_registries/infrastructure_registry/list/constants.js
index 4f5071e784b..7af3fc1c2db 100644
--- a/app/assets/javascripts/packages/list/constants.js
+++ b/app/assets/javascripts/packages_and_registries/infrastructure_registry/list/constants.js
@@ -1,10 +1,8 @@
-import { __, s__ } from '~/locale';
-import { PackageType } from '../shared/constants';
+import { __ } from '~/locale';
 
 export const FETCH_PACKAGES_LIST_ERROR_MESSAGE = __(
   'Something went wrong while fetching the packages list.',
 );
-export const FETCH_PACKAGE_ERROR_MESSAGE = __('Something went wrong while fetching the package.');
 export const DELETE_PACKAGE_SUCCESS_MESSAGE = __('Package deleted successfully');
 
 export const DEFAULT_PAGE = 1;
@@ -17,14 +15,12 @@ export const LIST_KEY_PROJECT = 'project_path';
 export const LIST_KEY_VERSION = 'version';
 export const LIST_KEY_PACKAGE_TYPE = 'type';
 export const LIST_KEY_CREATED_AT = 'created_at';
-export const LIST_KEY_ACTIONS = 'actions';
 
 export const LIST_LABEL_NAME = __('Name');
 export const LIST_LABEL_PROJECT = __('Project');
 export const LIST_LABEL_VERSION = __('Version');
 export const LIST_LABEL_PACKAGE_TYPE = __('Type');
 export const LIST_LABEL_CREATED_AT = __('Published');
-export const LIST_LABEL_ACTIONS = '';
 
 // The following is not translated because it is used to build a JavaScript exception error message
 export const MISSING_DELETE_PATH_ERROR = 'Missing delete_api_path link';
@@ -52,48 +48,4 @@ export const SORT_FIELDS = [
   },
 ];
 
-export const PACKAGE_TYPES = [
-  {
-    title: s__('PackageRegistry|Composer'),
-    type: PackageType.COMPOSER,
-  },
-  {
-    title: s__('PackageRegistry|Conan'),
-    type: PackageType.CONAN,
-  },
-  {
-    title: s__('PackageRegistry|Generic'),
-    type: PackageType.GENERIC,
-  },
-
-  {
-    title: s__('PackageRegistry|Maven'),
-    type: PackageType.MAVEN,
-  },
-  {
-    title: s__('PackageRegistry|npm'),
-    type: PackageType.NPM,
-  },
-  {
-    title: s__('PackageRegistry|NuGet'),
-    type: PackageType.NUGET,
-  },
-  {
-    title: s__('PackageRegistry|PyPI'),
-    type: PackageType.PYPI,
-  },
-  {
-    title: s__('PackageRegistry|RubyGems'),
-    type: PackageType.RUBYGEMS,
-  },
-  {
-    title: s__('PackageRegistry|Debian'),
-    type: PackageType.DEBIAN,
-  },
-  {
-    title: s__('PackageRegistry|Helm'),
-    type: PackageType.HELM,
-  },
-];
-
 export const TERRAFORM_SEARCH_TYPE = Object.freeze({ value: { data: 'terraform_module' } });
diff --git a/app/assets/javascripts/packages/list/stores/actions.js b/app/assets/javascripts/packages_and_registries/infrastructure_registry/list/stores/actions.js
index 81f587971c2..81f587971c2 100644
--- a/app/assets/javascripts/packages/list/stores/actions.js
+++ b/app/assets/javascripts/packages_and_registries/infrastructure_registry/list/stores/actions.js
diff --git a/app/assets/javascripts/packages/list/stores/getters.js b/app/assets/javascripts/packages_and_registries/infrastructure_registry/list/stores/getters.js
index 482c111b58b..e7708efab83 100644
--- a/app/assets/javascripts/packages/list/stores/getters.js
+++ b/app/assets/javascripts/packages_and_registries/infrastructure_registry/list/stores/getters.js
@@ -1,4 +1,4 @@
-import { beautifyPath } from '../../shared/utils';
+import { beautifyPath } from '~/packages/shared/utils';
 import { LIST_KEY_PROJECT } from '../constants';
 
 export default (state) =>
diff --git a/app/assets/javascripts/packages/list/stores/index.js b/app/assets/javascripts/packages_and_registries/infrastructure_registry/list/stores/index.js
index 1d6a4bf831d..1d6a4bf831d 100644
--- a/app/assets/javascripts/packages/list/stores/index.js
+++ b/app/assets/javascripts/packages_and_registries/infrastructure_registry/list/stores/index.js
diff --git a/app/assets/javascripts/packages/list/stores/mutation_types.js b/app/assets/javascripts/packages_and_registries/infrastructure_registry/list/stores/mutation_types.js
index 561ad97f7e3..561ad97f7e3 100644
--- a/app/assets/javascripts/packages/list/stores/mutation_types.js
+++ b/app/assets/javascripts/packages_and_registries/infrastructure_registry/list/stores/mutation_types.js
diff --git a/app/assets/javascripts/packages/list/stores/mutations.js b/app/assets/javascripts/packages_and_registries/infrastructure_registry/list/stores/mutations.js
index 98165e581b0..98165e581b0 100644
--- a/app/assets/javascripts/packages/list/stores/mutations.js
+++ b/app/assets/javascripts/packages_and_registries/infrastructure_registry/list/stores/mutations.js
diff --git a/app/assets/javascripts/packages/list/stores/state.js b/app/assets/javascripts/packages_and_registries/infrastructure_registry/list/stores/state.js
index 60f02eddc9f..60f02eddc9f 100644
--- a/app/assets/javascripts/packages/list/stores/state.js
+++ b/app/assets/javascripts/packages_and_registries/infrastructure_registry/list/stores/state.js
diff --git a/app/assets/javascripts/packages/list/utils.js b/app/assets/javascripts/packages_and_registries/infrastructure_registry/list/utils.js
index 537b30d2ca4..537b30d2ca4 100644
--- a/app/assets/javascripts/packages/list/utils.js
+++ b/app/assets/javascripts/packages_and_registries/infrastructure_registry/list/utils.js
diff --git a/app/assets/javascripts/packages_and_registries/infrastructure_registry/list_app_bundle.js b/app/assets/javascripts/packages_and_registries/infrastructure_registry/list_app_bundle.js
index 764603cebe0..1467218dd41 100644
--- a/app/assets/javascripts/packages_and_registries/infrastructure_registry/list_app_bundle.js
+++ b/app/assets/javascripts/packages_and_registries/infrastructure_registry/list_app_bundle.js
@@ -1,7 +1,7 @@
 import Vue from 'vue';
 import { s__ } from '~/locale';
 import PackagesListApp from '~/packages_and_registries/infrastructure_registry/list/components/packages_list_app.vue';
-import { createStore } from '~/packages/list/stores';
+import { createStore } from '~/packages_and_registries/infrastructure_registry/list/stores';
 import Translate from '~/vue_shared/translate';
 
 Vue.use(Translate);
diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/details/app.vue b/app/assets/javascripts/packages_and_registries/package_registry/components/details/app.vue
index bcbeec72961..d0d653bdf08 100644
--- a/app/assets/javascripts/packages_and_registries/package_registry/components/details/app.vue
+++ b/app/assets/javascripts/packages_and_registries/package_registry/components/details/app.vue
@@ -304,6 +304,7 @@ export default {
       <template #default="{ deletePackage }">
         <gl-modal
           ref="deleteModal"
+          size="sm"
           modal-id="delete-modal"
           data-testid="delete-modal"
           :action-primary="$options.modal.packageDeletePrimaryAction"
@@ -327,6 +328,7 @@ export default {
 
     <gl-modal
       ref="deleteFileModal"
+      size="sm"
       modal-id="delete-file-modal"
       :action-primary="$options.modal.fileDeletePrimaryAction"
       :action-cancel="$options.modal.cancelAction"
diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/list/packages_list.vue b/app/assets/javascripts/packages_and_registries/package_registry/components/list/packages_list.vue
index 2a946544c2f..601ccbc5c5f 100644
--- a/app/assets/javascripts/packages_and_registries/package_registry/components/list/packages_list.vue
+++ b/app/assets/javascripts/packages_and_registries/package_registry/components/list/packages_list.vue
@@ -124,6 +124,7 @@ export default {
       <gl-modal
         v-model="showDeleteModal"
         modal-id="confirm-delete-pacakge"
+        size="sm"
         ok-variant="danger"
         @ok="deleteItemConfirmation"
         @cancel="deleteItemCanceled"
diff --git a/app/assets/javascripts/vue_shared/components/confirm_modal.vue b/app/assets/javascripts/vue_shared/components/confirm_modal.vue
index 7c1d3772acd..72504e5bc50 100644
--- a/app/assets/javascripts/vue_shared/components/confirm_modal.vue
+++ b/app/assets/javascripts/vue_shared/components/confirm_modal.vue
@@ -2,10 +2,13 @@
 import { GlModal, GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';
 import { uniqueId } from 'lodash';
 import csrf from '~/lib/utils/csrf';
+import eventHub, { EVENT_OPEN_CONFIRM_MODAL } from './confirm_modal_eventhub';
+import DomElementListener from './dom_element_listener.vue';
 
 export default {
   components: {
     GlModal,
+    DomElementListener,
   },
   directives: {
     SafeHtml,
@@ -30,18 +33,35 @@ export default {
     };
   },
   mounted() {
-    document.querySelectorAll(this.selector).forEach((button) => {
-      button.addEventListener('click', (e) => {
-        e.preventDefault();
-
-        this.path = button.dataset.path;
-        this.method = button.dataset.method;
-        this.modalAttributes = JSON.parse(button.dataset.modalAttributes);
-        this.openModal();
-      });
-    });
+    eventHub.$on(EVENT_OPEN_CONFIRM_MODAL, this.onOpenEvent);
+  },
+  destroyed() {
+    eventHub.$off(EVENT_OPEN_CONFIRM_MODAL, this.onOpenEvent);
   },
   methods: {
+    onButtonPress(e) {
+      const element = e.currentTarget;
+
+      if (!element.dataset.path) {
+        return;
+      }
+
+      const modalAttributes = element.dataset.modalAttributes
+        ? JSON.parse(element.dataset.modalAttributes)
+        : {};
+
+      this.onOpenEvent({
+        path: element.dataset.path,
+        method: element.dataset.method,
+        modalAttributes,
+      });
+    },
+    onOpenEvent({ path, method, modalAttributes }) {
+      this.path = path;
+      this.method = method;
+      this.modalAttributes = modalAttributes;
+      this.openModal();
+    },
     openModal() {
       this.$refs.modal.show();
     },
@@ -61,21 +81,23 @@ export default {
 </script>
 
 <template>
-  <gl-modal
-    ref="modal"
-    :modal-id="modalId"
-    v-bind="modalAttributes"
-    @primary="submitModal"
-    @cancel="closeModal"
-  >
-    <form ref="form" :action="path" method="post">
-      <!-- Rails workaround for <form method="delete" />
+  <dom-element-listener :selector="selector" @click.prevent="onButtonPress">
+    <gl-modal
+      ref="modal"
+      :modal-id="modalId"
+      v-bind="modalAttributes"
+      @primary="submitModal"
+      @cancel="closeModal"
+    >
+      <form ref="form" :action="path" method="post">
+        <!-- Rails workaround for <form method="delete" />
       https://github.com/rails/rails/blob/master/actionview/app/assets/javascripts/rails-ujs/features/method.coffee
       -->
-      <input type="hidden" name="_method" :value="method" />
-      <input type="hidden" name="authenticity_token" :value="$options.csrf.token" />
-      <div v-if="modalAttributes.messageHtml" v-safe-html="modalAttributes.messageHtml"></div>
-      <div v-else>{{ modalAttributes.message }}</div>
-    </form>
-  </gl-modal>
+        <input type="hidden" name="_method" :value="method" />
+        <input type="hidden" name="authenticity_token" :value="$options.csrf.token" />
+        <div v-if="modalAttributes.messageHtml" v-safe-html="modalAttributes.messageHtml"></div>
+        <div v-else>{{ modalAttributes.message }}</div>
+      </form>
+    </gl-modal>
+  </dom-element-listener>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/confirm_modal_eventhub.js b/app/assets/javascripts/vue_shared/components/confirm_modal_eventhub.js
new file mode 100644
index 00000000000..f8d9d410ace
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/confirm_modal_eventhub.js
@@ -0,0 +1,5 @@
+import createEventHub from '~/helpers/event_hub_factory';
+
+export default createEventHub();
+
+export const EVENT_OPEN_CONFIRM_MODAL = Symbol('OPEN');
diff --git a/app/assets/javascripts/design_management/components/design_note_pin.vue b/app/assets/javascripts/vue_shared/components/design_management/design_note_pin.vue
index 320e0654aab..cb038a8c4e1 100644
--- a/app/assets/javascripts/design_management/components/design_note_pin.vue
+++ b/app/assets/javascripts/vue_shared/components/design_management/design_note_pin.vue
@@ -10,13 +10,24 @@ export default {
   props: {
     position: {
       type: Object,
-      required: true,
+      required: false,
+      default: null,
     },
     label: {
       type: Number,
       required: false,
       default: null,
     },
+    isResolved: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    isInactive: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   computed: {
     isNewNote() {
@@ -36,10 +47,13 @@ export default {
     :style="position"
     :aria-label="pinLabel"
     :class="{
-      'btn-transparent comment-indicator gl-p-0': isNewNote,
-      'js-image-badge badge badge-pill': !isNewNote,
+      'btn-transparent comment-indicator': isNewNote,
+      'js-image-badge design-note-pin': !isNewNote,
+      resolved: isResolved,
+      inactive: isInactive,
+      'gl-absolute': position,
     }"
-    class="gl-absolute gl-display-flex gl-align-items-center gl-justify-content-center gl-font-lg gl-outline-0!"
+    class="gl-display-flex gl-align-items-center gl-justify-content-center gl-font-sm"
     type="button"
     @mousedown="$emit('mousedown', $event)"
     @mouseup="$emit('mouseup', $event)"
diff --git a/app/assets/javascripts/vue_shared/components/dom_element_listener.vue b/app/assets/javascripts/vue_shared/components/dom_element_listener.vue
new file mode 100644
index 00000000000..ca427ed4897
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/dom_element_listener.vue
@@ -0,0 +1,28 @@
+<script>
+export default {
+  props: {
+    selector: {
+      type: String,
+      required: true,
+    },
+  },
+  mounted() {
+    this.disposables = Array.from(document.querySelectorAll(this.selector)).flatMap((button) => {
+      return Object.entries(this.$listeners).map(([key, value]) => {
+        button.addEventListener(key, value);
+        return () => {
+          button.removeEventListener(key, value);
+        };
+      });
+    });
+  },
+  destroyed() {
+    this.disposables.forEach((x) => {
+      x();
+    });
+  },
+  render() {
+    return this.$slots.default;
+  },
+};
+</script>
diff --git a/app/assets/stylesheets/components/design_management/design.scss b/app/assets/stylesheets/components/design_management/design.scss
index a3cbdb9ae86..377d5130571 100644
--- a/app/assets/stylesheets/components/design_management/design.scss
+++ b/app/assets/stylesheets/components/design_management/design.scss
@@ -12,7 +12,7 @@ $t-gray-a-16-design-pin: rgba($black, 0.16);
     top: 35px;
   }
 
-  .badge.badge-pill {
+  .design-note-pin {
     display: flex;
     height: $design-pin-diameter;
     width: $design-pin-diameter;
@@ -23,6 +23,7 @@ $t-gray-a-16-design-pin: rgba($black, 0.16);
     border-radius: 50%;
     z-index: 1;
     padding: 0;
+    border: 0;
 
     &.resolved {
       background-color: $gray-500;
@@ -34,7 +35,7 @@ $t-gray-a-16-design-pin: rgba($black, 0.16);
   }
 
   .comment-indicator,
-  .frame .badge.badge-pill {
+  .frame .design-note-pin {
     &:active {
       cursor: grabbing;
     }
@@ -43,7 +44,7 @@ $t-gray-a-16-design-pin: rgba($black, 0.16);
   /**
    * Design pin that overlays the design
    */
-  .frame .badge.badge-pill {
+  .frame .design-note-pin {
     box-shadow: 0 2px 4px $t-gray-a-08, 0 0 1px $t-gray-a-24;
     border: $white 2px solid;
     will-change: transform, box-shadow, opacity;
@@ -114,7 +115,7 @@ $t-gray-a-16-design-pin: rgba($black, 0.16);
     }
   }
 
-  .badge.badge-pill {
+  .design-note-pin {
     margin-left: $gl-padding;
   }
 
diff --git a/app/finders/merge_requests_finder.rb b/app/finders/merge_requests_finder.rb
index 13696add965..ba709d3bdfc 100644
--- a/app/finders/merge_requests_finder.rb
+++ b/app/finders/merge_requests_finder.rb
@@ -174,8 +174,8 @@ class MergeRequestsFinder < IssuableFinder
 
   def by_deployments(items)
     env = params[:environment]
-    before = params[:deployed_before]
-    after = params[:deployed_after]
+    before = parse_datetime(params[:deployed_before])
+    after = parse_datetime(params[:deployed_after])
     id = params[:deployment_id]
 
     return items if !env && !before && !after && !id
@@ -218,6 +218,13 @@ class MergeRequestsFinder < IssuableFinder
       items.none
     end
   end
+
+  def parse_datetime(input)
+    # To work around http://www.ruby-lang.org/en/news/2021/11/15/date-parsing-method-regexp-dos-cve-2021-41817/
+    DateTime.parse(input.byteslice(0, 128)) if input
+  rescue Date::Error
+    nil
+  end
 end
 
 MergeRequestsFinder.prepend_mod_with('MergeRequestsFinder')