Automatic merge of gitlab-org/gitlab master

.gitlab/CODEOWNERS

@@ -1255,68 +1255,68 @@ lib/api/entities/project.rb @gitlab-org/manage/manage-workspace/backend-approver
 ee/lib/ee/api/entities/project.rb @gitlab-org/manage/manage-workspace/backend-approvers
 
 [Compliance]
-/ee/app/services/audit_events/build_service.rb @gitlab-org/manage/compliance
-/ee/spec/services/audit_events/custom_audit_event_service_spec.rb @gitlab-org/manage/compliance
-/app/models/audit_event.rb @gitlab-org/manage/compliance
-/app/services/audit_event_service.rb @gitlab-org/manage/compliance
-/app/services/concerns/audit_event_save_type.rb @gitlab-org/manage/compliance
-/app/views/profiles/audit_log.html.haml @gitlab-org/manage/compliance
-/ee/app/assets/javascripts/audit_events/components/audit_events_app.vue @gitlab-org/manage/compliance
-/ee/app/assets/javascripts/audit_events/components/audit_events_export_button.vue @gitlab-org/manage/compliance
-/ee/app/assets/javascripts/audit_events/components/audit_events_filter.vue @gitlab-org/manage/compliance
-/ee/app/assets/javascripts/audit_events/components/audit_events_log.vue @gitlab-org/manage/compliance
-/ee/app/assets/javascripts/audit_events/components/audit_events_stream.vue @gitlab-org/manage/compliance
-/ee/app/assets/javascripts/audit_events/components/audit_events_table.vue @gitlab-org/manage/compliance
-/ee/app/assets/javascripts/audit_events/components/tokens/shared/ @gitlab-org/manage/compliance
-/ee/app/assets/javascripts/audit_events/init_audit_events.js @gitlab-org/manage/compliance
-/ee/app/controllers/admin/audit_log_reports_controller.rb @gitlab-org/manage/compliance
-/ee/app/controllers/admin/audit_logs_controller.rb @gitlab-org/manage/compliance
-/ee/app/controllers/concerns/audit_events/audit_events_params.rb @gitlab-org/manage/compliance
-/ee/app/controllers/groups/audit_events_controller.rb @gitlab-org/manage/compliance
-/ee/app/controllers/projects/audit_events_controller.rb @gitlab-org/manage/compliance
-/ee/app/finders/audit_event_finder.rb @gitlab-org/manage/compliance
-/ee/app/graphql/types/audit_events/external_audit_event_destination_type.rb @gitlab-org/manage/compliance
-/ee/app/helpers/audit_events_helper.rb @gitlab-org/manage/compliance
-/ee/app/helpers/auditor_user_helper.rb @gitlab-org/manage/compliance
-/ee/app/models/audit_events/external_audit_event_destination.rb @gitlab-org/manage/compliance
-/ee/app/models/concerns/auditable.rb @gitlab-org/manage/compliance
-/ee/app/models/ee/audit_event.rb @gitlab-org/manage/compliance
-/ee/app/policies/audit_events/external_audit_event_destination_policy.rb @gitlab-org/manage/compliance
-/ee/app/presenters/audit_event_presenter.rb @gitlab-org/manage/compliance
-/ee/app/serializers/audit_event_entity.rb @gitlab-org/manage/compliance
-/ee/app/serializers/audit_event_serializer.rb @gitlab-org/manage/compliance
-/ee/app/services/ci/audit_variable_change_service.rb @gitlab-org/manage/compliance
-/ee/app/services/ee/audit_event_service.rb @gitlab-org/manage/compliance
-/ee/app/views/admin/users/_auditor_access_level_radio.html.haml @gitlab-org/manage/compliance
-/ee/app/views/admin/users/_auditor_user_badge.html.haml @gitlab-org/manage/compliance
-/ee/app/views/shared/icons/_icon_audit_events_purple.svg @gitlab-org/manage/compliance
-/ee/app/views/shared/promotions/_promote_audit_events.html.haml @gitlab-org/manage/compliance
-/ee/app/workers/audit_events/audit_event_streaming_worker.rb @gitlab-org/manage/compliance
-/ee/config/events/1652263097_groups__audit_events__index_click_streams_tab.yml @gitlab-org/manage/compliance
-/ee/config/events/202108302307_admin_audit_logs_index_click_date_range_button.yml @gitlab-org/manage/compliance
-/ee/config/events/202108302307_groups__audit_events_controller_search_audit_event.yml @gitlab-org/manage/compliance
-/ee/config/events/202108302307_profiles_controller_search_audit_event.yml @gitlab-org/manage/compliance
-/ee/config/events/202108302307_projects__audit_events_controller_search_audit_event.yml @gitlab-org/manage/compliance
-/ee/config/events/202111041910_admin__audit_logs_controller_search_audit_event.yml @gitlab-org/manage/compliance
-/ee/config/feature_flags/development/audit_event_streaming_git_operations.yml @gitlab-org/manage/compliance
-/ee/config/feature_flags/development/audit_log_group_level.yml @gitlab-org/manage/compliance
-/ee/config/metrics/counts_28d/20210216183930_g_compliance_audit_events_monthly.yml @gitlab-org/manage/compliance
-/ee/config/metrics/counts_28d/20210216183934_i_compliance_audit_events_monthly.yml @gitlab-org/manage/compliance
-/ee/config/metrics/counts_28d/20210216183942_a_compliance_audit_events_api_monthly.yml @gitlab-org/manage/compliance
-/ee/config/metrics/counts_28d/20211130085433_g_manage_compliance_audit_event_destinations.yml @gitlab-org/manage/compliance
-/ee/config/metrics/counts_7d/20210216183906_g_compliance_audit_events.yml @gitlab-org/manage/compliance
-/ee/config/metrics/counts_7d/20210216183908_i_compliance_audit_events.yml @gitlab-org/manage/compliance
-/ee/config/metrics/counts_7d/20210216183912_a_compliance_audit_events_api.yml @gitlab-org/manage/compliance
-/ee/config/metrics/counts_7d/20210216183928_g_compliance_audit_events_weekly.yml @gitlab-org/manage/compliance
-/ee/config/metrics/counts_7d/20210216183932_i_compliance_audit_events_weekly.yml @gitlab-org/manage/compliance
-/ee/config/metrics/counts_7d/20210216183940_a_compliance_audit_events_api_weekly.yml @gitlab-org/manage/compliance
-/ee/config/metrics/counts_all/20211130085433_g_manage_compliance_audit_event_destinations.yml @gitlab-org/manage/compliance
-/ee/lib/api/audit_events.rb @gitlab-org/manage/compliance
-/ee/lib/audit/external_status_check_changes_auditor.rb @gitlab-org/manage/compliance
-/ee/lib/audit/group_merge_request_approval_setting_changes_auditor.rb @gitlab-org/manage/compliance
-/ee/lib/audit/group_push_rules_changes_auditor.rb @gitlab-org/manage/compliance
-/ee/lib/ee/api/entities/audit_event.rb @gitlab-org/manage/compliance
-/ee/lib/ee/audit/ @gitlab-org/manage/compliance
-/ee/lib/ee/gitlab/audit/ @gitlab-org/manage/compliance
-/lib/gitlab/audit/auditor.rb @gitlab-org/manage/compliance
-/lib/gitlab/audit_json_logger.rb @gitlab-org/manage/compliance
+/ee/app/services/audit_events/build_service.rb @gitlab-org/govern/compliance
+/ee/spec/services/audit_events/custom_audit_event_service_spec.rb @gitlab-org/govern/compliance
+/app/models/audit_event.rb @gitlab-org/govern/compliance
+/app/services/audit_event_service.rb @gitlab-org/govern/compliance
+/app/services/concerns/audit_event_save_type.rb @gitlab-org/govern/compliance
+/app/views/profiles/audit_log.html.haml @gitlab-org/govern/compliance
+/ee/app/assets/javascripts/audit_events/components/audit_events_app.vue @gitlab-org/govern/compliance
+/ee/app/assets/javascripts/audit_events/components/audit_events_export_button.vue @gitlab-org/govern/compliance
+/ee/app/assets/javascripts/audit_events/components/audit_events_filter.vue @gitlab-org/govern/compliance
+/ee/app/assets/javascripts/audit_events/components/audit_events_log.vue @gitlab-org/govern/compliance
+/ee/app/assets/javascripts/audit_events/components/audit_events_stream.vue @gitlab-org/govern/compliance
+/ee/app/assets/javascripts/audit_events/components/audit_events_table.vue @gitlab-org/govern/compliance
+/ee/app/assets/javascripts/audit_events/components/tokens/shared/ @gitlab-org/govern/compliance
+/ee/app/assets/javascripts/audit_events/init_audit_events.js @gitlab-org/govern/compliance
+/ee/app/controllers/admin/audit_log_reports_controller.rb @gitlab-org/govern/compliance
+/ee/app/controllers/admin/audit_logs_controller.rb @gitlab-org/govern/compliance
+/ee/app/controllers/concerns/audit_events/audit_events_params.rb @gitlab-org/govern/compliance
+/ee/app/controllers/groups/audit_events_controller.rb @gitlab-org/govern/compliance
+/ee/app/controllers/projects/audit_events_controller.rb @gitlab-org/govern/compliance
+/ee/app/finders/audit_event_finder.rb @gitlab-org/govern/compliance
+/ee/app/graphql/types/audit_events/external_audit_event_destination_type.rb @gitlab-org/govern/compliance
+/ee/app/helpers/audit_events_helper.rb @gitlab-org/govern/compliance
+/ee/app/helpers/auditor_user_helper.rb @gitlab-org/govern/compliance
+/ee/app/models/audit_events/external_audit_event_destination.rb @gitlab-org/govern/compliance
+/ee/app/models/concerns/auditable.rb @gitlab-org/govern/compliance
+/ee/app/models/ee/audit_event.rb @gitlab-org/govern/compliance
+/ee/app/policies/audit_events/external_audit_event_destination_policy.rb @gitlab-org/govern/compliance
+/ee/app/presenters/audit_event_presenter.rb @gitlab-org/govern/compliance
+/ee/app/serializers/audit_event_entity.rb @gitlab-org/govern/compliance
+/ee/app/serializers/audit_event_serializer.rb @gitlab-org/govern/compliance
+/ee/app/services/ci/audit_variable_change_service.rb @gitlab-org/govern/compliance
+/ee/app/services/ee/audit_event_service.rb @gitlab-org/govern/compliance
+/ee/app/views/admin/users/_auditor_access_level_radio.html.haml @gitlab-org/govern/compliance
+/ee/app/views/admin/users/_auditor_user_badge.html.haml @gitlab-org/govern/compliance
+/ee/app/views/shared/icons/_icon_audit_events_purple.svg @gitlab-org/govern/compliance
+/ee/app/views/shared/promotions/_promote_audit_events.html.haml @gitlab-org/govern/compliance
+/ee/app/workers/audit_events/audit_event_streaming_worker.rb @gitlab-org/govern/compliance
+/ee/config/events/1652263097_groups__audit_events__index_click_streams_tab.yml @gitlab-org/govern/compliance
+/ee/config/events/202108302307_admin_audit_logs_index_click_date_range_button.yml @gitlab-org/govern/compliance
+/ee/config/events/202108302307_groups__audit_events_controller_search_audit_event.yml @gitlab-org/govern/compliance
+/ee/config/events/202108302307_profiles_controller_search_audit_event.yml @gitlab-org/govern/compliance
+/ee/config/events/202108302307_projects__audit_events_controller_search_audit_event.yml @gitlab-org/govern/compliance
+/ee/config/events/202111041910_admin__audit_logs_controller_search_audit_event.yml @gitlab-org/govern/compliance
+/ee/config/feature_flags/development/audit_event_streaming_git_operations.yml @gitlab-org/govern/compliance
+/ee/config/feature_flags/development/audit_log_group_level.yml @gitlab-org/govern/compliance
+/ee/config/metrics/counts_28d/20210216183930_g_compliance_audit_events_monthly.yml @gitlab-org/govern/compliance
+/ee/config/metrics/counts_28d/20210216183934_i_compliance_audit_events_monthly.yml @gitlab-org/govern/compliance
+/ee/config/metrics/counts_28d/20210216183942_a_compliance_audit_events_api_monthly.yml @gitlab-org/govern/compliance
+/ee/config/metrics/counts_28d/20211130085433_g_manage_compliance_audit_event_destinations.yml @gitlab-org/govern/compliance
+/ee/config/metrics/counts_7d/20210216183906_g_compliance_audit_events.yml @gitlab-org/govern/compliance
+/ee/config/metrics/counts_7d/20210216183908_i_compliance_audit_events.yml @gitlab-org/govern/compliance
+/ee/config/metrics/counts_7d/20210216183912_a_compliance_audit_events_api.yml @gitlab-org/govern/compliance
+/ee/config/metrics/counts_7d/20210216183928_g_compliance_audit_events_weekly.yml @gitlab-org/govern/compliance
+/ee/config/metrics/counts_7d/20210216183932_i_compliance_audit_events_weekly.yml @gitlab-org/govern/compliance
+/ee/config/metrics/counts_7d/20210216183940_a_compliance_audit_events_api_weekly.yml @gitlab-org/govern/compliance
+/ee/config/metrics/counts_all/20211130085433_g_manage_compliance_audit_event_destinations.yml @gitlab-org/govern/compliance
+/ee/lib/api/audit_events.rb @gitlab-org/govern/compliance
+/ee/lib/audit/external_status_check_changes_auditor.rb @gitlab-org/govern/compliance
+/ee/lib/audit/group_merge_request_approval_setting_changes_auditor.rb @gitlab-org/govern/compliance
+/ee/lib/audit/group_push_rules_changes_auditor.rb @gitlab-org/govern/compliance
+/ee/lib/ee/api/entities/audit_event.rb @gitlab-org/govern/compliance
+/ee/lib/ee/audit/ @gitlab-org/govern/compliance
+/ee/lib/ee/gitlab/audit/ @gitlab-org/govern/compliance
+/lib/gitlab/audit/auditor.rb @gitlab-org/govern/compliance
+/lib/gitlab/audit_json_logger.rb @gitlab-org/govern/compliance

.rubocop_todo/layout/space_inside_parens.yml

@@ -161,26 +161,6 @@ Layout/SpaceInsideParens:
     - 'qa/spec/scenario/template_spec.rb'
     - 'spec/dependencies/omniauth_saml_spec.rb'
     - 'spec/factories/usage_data.rb'
-    - 'spec/features/boards/board_filters_spec.rb'
-    - 'spec/features/boards/user_visits_board_spec.rb'
-    - 'spec/features/dashboard/datetime_on_tooltips_spec.rb'
-    - 'spec/features/graphql_known_operations_spec.rb'
-    - 'spec/features/groups/activity_spec.rb'
-    - 'spec/features/groups/board_sidebar_spec.rb'
-    - 'spec/features/groups/empty_states_spec.rb'
-    - 'spec/features/groups/issues_spec.rb'
-    - 'spec/features/groups/milestone_spec.rb'
-    - 'spec/features/groups/milestones_sorting_spec.rb'
-    - 'spec/features/issues/create_issue_for_discussions_in_merge_request_spec.rb'
-    - 'spec/features/merge_request/user_edits_assignees_sidebar_spec.rb'
-    - 'spec/features/profiles/two_factor_auths_spec.rb'
-    - 'spec/features/projects/branches/user_views_branches_spec.rb'
-    - 'spec/features/projects/fork_spec.rb'
-    - 'spec/features/projects/issues/viewing_issues_with_external_authorization_enabled_spec.rb'
-    - 'spec/features/projects/jobs_spec.rb'
-    - 'spec/features/projects/pipeline_schedules_spec.rb'
-    - 'spec/features/projects/releases/user_views_edit_release_spec.rb'
-    - 'spec/features/projects/releases/user_views_releases_spec.rb'
     - 'spec/finders/alert_management/http_integrations_finder_spec.rb'
     - 'spec/finders/events_finder_spec.rb'
     - 'spec/finders/labels_finder_spec.rb'

app/assets/javascripts/packages_and_registries/infrastructure_registry/list/components/packages_list.vue

 <script>
-import { GlPagination, GlModal, GlSprintf } from '@gitlab/ui';
+import { GlPagination } from '@gitlab/ui';
 import { mapState, mapGetters } from 'vuex';
-import { __, s__ } from '~/locale';
+import { s__ } from '~/locale';
 import Tracking from '~/tracking';
+import DeletePackageModal from '~/packages_and_registries/shared/components/delete_package_modal.vue';
 import PackagesListRow from '~/packages_and_registries/infrastructure_registry/shared/package_list_row.vue';
 import PackagesListLoader from '~/packages_and_registries/shared/components/packages_list_loader.vue';
 import { TRACKING_ACTIONS } from '~/packages_and_registries/shared/constants';
@@ -11,8 +12,7 @@ import { TRACK_CATEGORY } from '~/packages_and_registries/infrastructure_registr
 export default {
   components: {
     GlPagination,
-    GlModal,
-    GlSprintf,
+    DeletePackageModal,
     PackagesListLoader,
     PackagesListRow,
   },
@@ -42,22 +42,6 @@ export default {
     isListEmpty() {
       return !this.list || this.list.length === 0;
     },
-    deletePackageName() {
-      return this.itemToBeDeleted?.name ?? '';
-    },
-    deleteModalActionPrimaryProps() {
-      return {
-        text: this.$options.i18n.modalAction,
-        attributes: {
-          variant: 'danger',
-        },
-      };
-    },
-    deleteModalActionCancelProps() {
-      return {
-        text: __('Cancel'),
-      };
-    },
     tracking() {
       return {
         category: TRACK_CATEGORY,
@@ -68,7 +52,6 @@ export default {
     setItemToBeDeleted(item) {
       this.itemToBeDeleted = { ...item };
       this.track(TRACKING_ACTIONS.REQUEST_DELETE_PACKAGE);
-      this.$refs.packageListDeleteModal.show();
     },
     deleteItemConfirmation() {
       this.$emit('package:delete', this.itemToBeDeleted);
@@ -116,22 +99,11 @@ export default {
         class="gl-w-full gl-mt-3"
       />
 
-      <gl-modal
-        ref="packageListDeleteModal"
-        size="sm"
-        modal-id="confirm-delete-package"
-        :action-primary="deleteModalActionPrimaryProps"
-        :action-cancel="deleteModalActionCancelProps"
+      <delete-package-modal
+        :item-to-be-deleted="itemToBeDeleted"
         @ok="deleteItemConfirmation"
         @cancel="deleteItemCanceled"
-      >
-        <template #modal-title>{{ $options.i18n.modalTitle }}</template>
-        <gl-sprintf :message="$options.i18n.deleteModalContent">
-          <template #name>
-            <strong>{{ deletePackageName }}</strong>
-          </template>
-        </gl-sprintf>
-      </gl-modal>
+      />
     </template>
   </div>
 </template>

app/assets/javascripts/packages_and_registries/package_registry/components/list/packages_list.vue

 <script>
-import { GlAlert, GlModal, GlSprintf, GlKeysetPagination } from '@gitlab/ui';
-import { __, s__, sprintf } from '~/locale';
+import { GlAlert, GlKeysetPagination } from '@gitlab/ui';
+import { s__, sprintf } from '~/locale';
+import DeletePackageModal from '~/packages_and_registries/shared/components/delete_package_modal.vue';
 import PackagesListRow from '~/packages_and_registries/package_registry/components/list/package_list_row.vue';
 import PackagesListLoader from '~/packages_and_registries/shared/components/packages_list_loader.vue';
 import {
@@ -16,8 +17,7 @@ export default {
   components: {
     GlAlert,
     GlKeysetPagination,
-    GlModal,
-    GlSprintf,
+    DeletePackageModal,
     PackagesListLoader,
     PackagesListRow,
   },
@@ -49,9 +49,6 @@ export default {
     isListEmpty() {
       return !this.list || this.list.length === 0;
     },
-    deletePackageName() {
-      return this.itemToBeDeleted?.name ?? '';
-    },
     tracking() {
       const category = this.itemToBeDeleted
         ? packageTypeToTrackCategory(this.itemToBeDeleted.packageType)
@@ -63,29 +60,6 @@ export default {
     showPagination() {
       return this.pageInfo.hasPreviousPage || this.pageInfo.hasNextPage;
     },
-    showDeleteModal: {
-      get() {
-        return Boolean(this.itemToBeDeleted);
-      },
-      set(value) {
-        if (!value) {
-          this.itemToBeDeleted = null;
-        }
-      },
-    },
-    deleteModalActionPrimaryProps() {
-      return {
-        text: this.$options.i18n.modalAction,
-        attributes: {
-          variant: 'danger',
-        },
-      };
-    },
-    deleteModalActionCancelProps() {
-      return {
-        text: __('Cancel'),
-      };
-    },
     errorTitleAlert() {
       return sprintf(
         s__('PackageRegistry|There was an error publishing a %{packageName} package'),
@@ -113,18 +87,17 @@ export default {
     deleteItemConfirmation() {
       this.$emit('package:delete', this.itemToBeDeleted);
       this.track(DELETE_PACKAGE_TRACKING_ACTION);
+      this.itemToBeDeleted = null;
     },
     deleteItemCanceled() {
       this.track(CANCEL_DELETE_PACKAGE_TRACKING_ACTION);
+      this.itemToBeDeleted = null;
     },
     showConfirmationModal() {
       this.setItemToBeDeleted(this.errorPackages[0]);
     },
   },
   i18n: {
-    deleteModalContent: s__('PackageRegistry|You are about to delete %{name}, are you sure?'),
-    modalTitle: s__('PackageRegistry|Delete package'),
-    modalAction: s__('PackageRegistry|Permanently delete'),
     errorMessageBodyAlert: s__(
       'PackageRegistry|There was a timeout and the package was not published. Delete this package and try again.',
     ),
@@ -169,22 +142,11 @@ export default {
         />
       </div>
 
-      <gl-modal
-        v-model="showDeleteModal"
-        modal-id="confirm-delete-package"
-        size="sm"
-        :action-primary="deleteModalActionPrimaryProps"
-        :action-cancel="deleteModalActionCancelProps"
+      <delete-package-modal
+        :item-to-be-deleted="itemToBeDeleted"
         @ok="deleteItemConfirmation"
         @cancel="deleteItemCanceled"
-      >
-        <template #modal-title>{{ $options.i18n.modalTitle }}</template>
-        <gl-sprintf :message="$options.i18n.deleteModalContent">
-          <template #name>
-            <strong>{{ deletePackageName }}</strong>
-          </template>
-        </gl-sprintf>
-      </gl-modal>
+      />
     </template>
   </div>
 </template>

app/assets/javascripts/packages_and_registries/package_registry/index.js

@@ -36,6 +36,7 @@ export default () => {
   const attachMainComponent = () =>
     new Vue({
       el,
+      name: 'PackageRegistery',
       router,
       apolloProvider,
       provide: {

app/assets/javascripts/packages_and_registries/shared/components/delete_package_modal.vue

+<script>
+import { GlModal, GlSprintf } from '@gitlab/ui';
+import { __ } from '~/locale';
+import {
+  DELETE_PACKAGE_MODAL_CONTENT_MESSAGE,
+  DELETE_PACKAGE_MODAL_TITLE,
+  DELETE_PACKAGE_MODAL_ACTION,
+} from '~/packages_and_registries/shared/constants';
+import { TRACK_CATEGORY } from '~/packages_and_registries/infrastructure_registry/shared/constants';
+
+export default {
+  components: {
+    GlModal,
+    GlSprintf,
+  },
+  props: {
+    itemToBeDeleted: {
+      type: Object,
+      required: false,
+      default: null,
+    },
+  },
+  computed: {
+    isModalVisible() {
+      return Boolean(this.itemToBeDeleted);
+    },
+    deletePackageName() {
+      return this.itemToBeDeleted?.name ?? '';
+    },
+    deleteModalActionPrimaryProps() {
+      return {
+        text: this.$options.i18n.modalAction,
+        attributes: {
+          variant: 'danger',
+        },
+      };
+    },
+    deleteModalActionCancelProps() {
+      return {
+        text: __('Cancel'),
+      };
+    },
+    tracking() {
+      return {
+        category: TRACK_CATEGORY,
+      };
+    },
+  },
+  methods: {
+    deleteItemConfirmation() {
+      this.$emit('ok');
+    },
+    onChangeModalVisibility(isVisible) {
+      if (!isVisible) this.$emit('cancel');
+    },
+  },
+  i18n: {
+    modalTitle: DELETE_PACKAGE_MODAL_TITLE,
+    modalDescription: DELETE_PACKAGE_MODAL_CONTENT_MESSAGE,
+    modalAction: DELETE_PACKAGE_MODAL_ACTION,
+  },
+};
+</script>
+
+<template>
+  <gl-modal
+    :visible="isModalVisible"
+    size="sm"
+    modal-id="confirm-delete-package"
+    :title="$options.i18n.modalTitle"
+    :action-primary="deleteModalActionPrimaryProps"
+    :action-cancel="deleteModalActionCancelProps"
+    @ok="deleteItemConfirmation"
+    @change="onChangeModalVisibility"
+  >
+    <template #modal-title>{{ $options.i18n.modalTitle }}</template>
+    <gl-sprintf :message="$options.i18n.modalDescription">
+      <template #name>
+        <strong>{{ deletePackageName }}</strong>
+      </template>
+    </gl-sprintf>
+  </gl-modal>
+</template>

app/assets/javascripts/packages_and_registries/shared/constants/package_registry.js

@@ -39,6 +39,12 @@ export const DELETE_PACKAGE_FILE_SUCCESS_MESSAGE = s__(
   'PackageRegistry|Package asset deleted successfully',
 );
 
+export const DELETE_PACKAGE_MODAL_CONTENT_MESSAGE = s__(
+  'PackageRegistry|You are about to delete %{name}, are you sure?',
+);
+export const DELETE_PACKAGE_MODAL_TITLE = s__('PackageRegistry|Delete package');
+export const DELETE_PACKAGE_MODAL_ACTION = s__('PackageRegistry|Permanently delete');
+
 export const PACKAGE_ERROR_STATUS = 'error';
 export const PACKAGE_DEFAULT_STATUS = 'default';
 export const PACKAGE_HIDDEN_STATUS = 'hidden';

app/assets/stylesheets/page_bundles/design_management.scss

+@import 'mixins_and_variables_and_functions';
+
+$design-pin-diameter: 28px;
+$design-pin-diameter-sm: 24px;
+$t-gray-a-16-design-pin: rgba($black, 0.16);
+
+.design-card-header {
+  background: transparent;
+}
+
+.design-checkbox {
+  position: absolute;
+  top: $gl-padding;
+  left: 30px;
+}
+
+.layout-page.design-detail-layout {
+  max-height: 100vh;
+}
+
+.design-detail {
+  background-color: rgba($modal-backdrop-bg, $modal-backdrop-opacity);
+
+  .with-performance-bar & {
+    top: 35px;
+  }
+
+  .comment-indicator {
+    border-radius: 50%;
+  }
+
+  .comment-indicator,
+  .frame .design-note-pin {
+    &:active {
+      cursor: grabbing;
+    }
+  }
+}
+
+.design-list-item {
+  height: 280px;
+  text-decoration: none;
+
+  .icon-version-status {
+    position: absolute;
+    right: 10px;
+    top: 10px;
+  }
+
+  .card-body {
+    height: 230px;
+  }
+}
+
+// This is temporary class to be removed after feature flag removal: https://gitlab.com/gitlab-org/gitlab/-/issues/223197
+.design-list-item-new {
+  height: 210px;
+}
+
+.design-note-pin {
+  display: flex;
+  height: $design-pin-diameter;
+  width: $design-pin-diameter;
+  box-sizing: content-box;
+  background-color: var(--purple-500, $purple-500);
+  color: var(--white, $white);
+  font-weight: $gl-font-weight-bold;
+  border-radius: 50%;
+  z-index: 1;
+  padding: 0;
+  border: 0;
+
+  &.draft {
+    background-color: var(--orange-500, $orange-500);
+  }
+
+  &.resolved {
+    background-color: var(--gray-500, $gray-500);
+  }
+
+  &.on-image {
+    box-shadow: 0 2px 4px $t-gray-a-08, 0 0 1px $t-gray-a-24;
+    border: var(--white, $white) 2px solid;
+    will-change: transform, box-shadow, opacity;
+    // NOTE: verbose transition property required for Safari
+    transition: transform $general-hover-transition-duration linear, box-shadow $general-hover-transition-duration linear, opacity $general-hover-transition-duration linear;
+    transform-origin: 0 0;
+    transform: translate(-50%, -50%);
+
+    &:hover {
+      transform: scale(1.2) translate(-50%, -50%);
+    }
+
+    &:active {
+      box-shadow: 0 0 4px $t-gray-a-16-design-pin, 0 4px 12px $t-gray-a-16-design-pin;
+    }
+
+    &.inactive {
+      @include gl-opacity-5;
+
+      &:hover {
+        @include gl-opacity-10;
+      }
+    }
+  }
+
+  &.small {
+    position: absolute;
+    border: 1px solid var(--white, $white);
+    height: $design-pin-diameter-sm;
+    width: $design-pin-diameter-sm;
+  }
+
+  &.user-avatar {
+    top: 25px;
+    right: 8px;
+  }
+}
+
+.design-scaler-wrapper {
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.image-notes {
+  overflow-y: scroll;
+  padding: $gl-padding;
+  padding-top: 50px;
+  background-color: var(--white, $white);
+  flex-shrink: 0;
+  min-width: 400px;
+  flex-basis: 28%;
+
+  .link-inherit-color {
+    &:hover,
+    &:active,
+    &:focus {
+      color: inherit;
+      text-decoration: none;
+    }
+  }
+
+  .toggle-comments {
+    line-height: 20px;
+    border-top: 1px solid var(--border-color, $border-color);
+
+    &.expanded {
+      border-bottom: 1px solid var(--border-color, $border-color);
+    }
+
+    .toggle-comments-button:focus {
+      text-decoration: none;
+      color: var(--blue-600, $blue-600);
+    }
+  }
+
+  .design-note-pin {
+    margin-left: $gl-padding;
+  }
+
+  .design-discussion {
+    margin: $gl-padding 0;
+
+    &::before {
+      content: '';
+      border-left: 1px solid var(--gray-100, $gray-100);
+      position: absolute;
+      left: 28px;
+      top: -17px;
+      height: 17px;
+    }
+
+    .design-note {
+      padding: $gl-padding;
+      list-style: none;
+      transition: background $gl-transition-duration-medium $general-hover-transition-curve;
+      border-top-left-radius: $border-radius-default; // same border radius used by .bordered-box
+      border-top-right-radius: $border-radius-default;
+
+      a {
+        color: inherit;
+      }
+
+      .note-text a {
+        color: var(--blue-600, $blue-600);
+      }
+    }
+
+    .reply-wrapper {
+      padding: $gl-padding;
+    }
+  }
+
+  .reply-wrapper {
+    border-top: 1px solid var(--border-color, $border-color);
+  }
+
+  .new-discussion-disclaimer {
+    line-height: 20px;
+  }
+}
+
+@media (max-width: map-get($grid-breakpoints, lg)) {
+  .design-detail {
+    overflow-y: scroll;
+  }
+
+  .image-notes {
+    overflow-y: auto;
+    min-width: 100%;
+    flex-grow: 1;
+    flex-basis: auto;
+  }
+}

app/assets/stylesheets/page_bundles/issues_show.scss

 @import 'mixins_and_variables_and_functions';
 
-$design-pin-diameter: 28px;
-$design-pin-diameter-sm: 24px;
-$t-gray-a-16-design-pin: rgba($black, 0.16);
-
 .description {
   li {
     position: relative;
@@ -27,216 +23,6 @@ $t-gray-a-16-design-pin: rgba($black, 0.16);
   }
 }
 
-.design-card-header {
-  background: transparent;
-}
-
-.design-checkbox {
-  position: absolute;
-  top: $gl-padding;
-  left: 30px;
-}
-
-.layout-page.design-detail-layout {
-  max-height: 100vh;
-}
-
-.design-detail {
-  background-color: rgba($modal-backdrop-bg, $modal-backdrop-opacity);
-
-  .with-performance-bar & {
-    top: 35px;
-  }
-
-  .comment-indicator {
-    border-radius: 50%;
-  }
-
-  .comment-indicator,
-  .frame .design-note-pin {
-    &:active {
-      cursor: grabbing;
-    }
-  }
-}
-
-.design-list-item {
-  height: 280px;
-  text-decoration: none;
-
-  .icon-version-status {
-    position: absolute;
-    right: 10px;
-    top: 10px;
-  }
-
-  .card-body {
-    height: 230px;
-  }
-}
-
-// This is temporary class to be removed after feature flag removal: https://gitlab.com/gitlab-org/gitlab/-/issues/223197
-.design-list-item-new {
-  height: 210px;
-}
-
-.design-note-pin {
-  display: flex;
-  height: $design-pin-diameter;
-  width: $design-pin-diameter;
-  box-sizing: content-box;
-  background-color: var(--purple-500, $purple-500);
-  color: var(--white, $white);
-  font-weight: $gl-font-weight-bold;
-  border-radius: 50%;
-  z-index: 1;
-  padding: 0;
-  border: 0;
-
-  &.draft {
-    background-color: var(--orange-500, $orange-500);
-  }
-
-  &.resolved {
-    background-color: var(--gray-500, $gray-500);
-  }
-
-  &.on-image {
-    box-shadow: 0 2px 4px $t-gray-a-08, 0 0 1px $t-gray-a-24;
-    border: var(--white, $white) 2px solid;
-    will-change: transform, box-shadow, opacity;
-    // NOTE: verbose transition property required for Safari
-    transition: transform $general-hover-transition-duration linear, box-shadow $general-hover-transition-duration linear, opacity $general-hover-transition-duration linear;
-    transform-origin: 0 0;
-    transform: translate(-50%, -50%);
-
-    &:hover {
-      transform: scale(1.2) translate(-50%, -50%);
-    }
-
-    &:active {
-      box-shadow: 0 0 4px $t-gray-a-16-design-pin, 0 4px 12px $t-gray-a-16-design-pin;
-    }
-
-    &.inactive {
-      @include gl-opacity-5;
-
-      &:hover {
-        @include gl-opacity-10;
-      }
-    }
-  }
-
-  &.small {
-    position: absolute;
-    border: 1px solid var(--white, $white);
-    height: $design-pin-diameter-sm;
-    width: $design-pin-diameter-sm;
-  }
-
-  &.user-avatar {
-    top: 25px;
-    right: 8px;
-  }
-}
-
-.design-scaler-wrapper {
-  bottom: 0;
-  left: 50%;
-  transform: translateX(-50%);
-}
-
-.image-notes {
-  overflow-y: scroll;
-  padding: $gl-padding;
-  padding-top: 50px;
-  background-color: var(--white, $white);
-  flex-shrink: 0;
-  min-width: 400px;
-  flex-basis: 28%;
-
-  .link-inherit-color {
-    &:hover,
-    &:active,
-    &:focus {
-      color: inherit;
-      text-decoration: none;
-    }
-  }
-
-  .toggle-comments {
-    line-height: 20px;
-    border-top: 1px solid var(--border-color, $border-color);
-
-    &.expanded {
-      border-bottom: 1px solid var(--border-color, $border-color);
-    }
-
-    .toggle-comments-button:focus {
-      text-decoration: none;
-      color: var(--blue-600, $blue-600);
-    }
-  }
-
-  .design-note-pin {
-    margin-left: $gl-padding;
-  }
-
-  .design-discussion {
-    margin: $gl-padding 0;
-
-    &::before {
-      content: '';
-      border-left: 1px solid var(--gray-100, $gray-100);
-      position: absolute;
-      left: 28px;
-      top: -17px;
-      height: 17px;
-    }
-
-    .design-note {
-      padding: $gl-padding;
-      list-style: none;
-      transition: background $gl-transition-duration-medium $general-hover-transition-curve;
-      border-top-left-radius: $border-radius-default; // same border radius used by .bordered-box
-      border-top-right-radius: $border-radius-default;
-
-      a {
-        color: inherit;
-      }
-
-      .note-text a {
-        color: var(--blue-600, $blue-600);
-      }
-    }
-
-    .reply-wrapper {
-      padding: $gl-padding;
-    }
-  }
-
-  .reply-wrapper {
-    border-top: 1px solid var(--border-color, $border-color);
-  }
-
-  .new-discussion-disclaimer {
-    line-height: 20px;
-  }
-}
-
-@media (max-width: map-get($grid-breakpoints, lg)) {
-  .design-detail {
-    overflow-y: scroll;
-  }
-
-  .image-notes {
-    overflow-y: auto;
-    min-width: 100%;
-    flex-grow: 1;
-    flex-basis: auto;
-  }
-}
-
 .is-ghost {
   opacity: 0.3;
   pointer-events: none;

app/views/projects/incidents/show.html.haml

@@ -2,6 +2,7 @@
 - add_to_breadcrumbs _("Incidents"), project_incidents_path(@project)
 - breadcrumb_title @issue.to_reference
 - page_title "#{@issue.title} (#{@issue.to_reference})", _("Incidents")
+- add_page_specific_style 'page_bundles/design_management'
 - add_page_specific_style 'page_bundles/incidents'
 - add_page_specific_style 'page_bundles/issues_show'
 

app/views/projects/issues/show.html.haml

@@ -2,6 +2,7 @@
 - add_to_breadcrumbs _("Issues"), project_issues_path(@project)
 - breadcrumb_title @issue.to_reference
 - page_title "#{@issue.title} (#{@issue.to_reference})", _("Issues")
+- add_page_specific_style 'page_bundles/design_management'
 - add_page_specific_style 'page_bundles/incidents'
 - add_page_specific_style 'page_bundles/issues_show'
 - add_page_specific_style 'page_bundles/work_items'

app/views/projects/merge_requests/show.html.haml

@@ -8,6 +8,7 @@
 - page_card_attributes @merge_request.card_attributes
 - suggest_changes_help_path = help_page_path('user/project/merge_requests/reviews/suggestions.md')
 - mr_action = j(params[:tab].presence || 'show')
+- add_page_specific_style 'page_bundles/design_management'
 - add_page_specific_style 'page_bundles/merge_requests'
 - add_page_specific_style 'page_bundles/pipelines'
 - add_page_specific_style 'page_bundles/reports'

config/application.rb

@@ -269,6 +269,7 @@ class Application < Rails::Application
     config.assets.precompile << "page_bundles/clusters.css"
     config.assets.precompile << "page_bundles/cycle_analytics.css"
     config.assets.precompile << "page_bundles/dashboard_projects.css"
+    config.assets.precompile << "page_bundles/design_management.css"
     config.assets.precompile << "page_bundles/dev_ops_reports.css"
     config.assets.precompile << "page_bundles/editor.css"
     config.assets.precompile << "page_bundles/environments.css"

doc/administration/packages/container_registry.md

 ---
 stage: Package
-group: Package
+group: Container Registry
 info: To determine the technical writer assigned to the Stage/Group associated with this page, see https://about.gitlab.com/handbook/product/ux/technical-writing/#assignments
 ---
 

doc/administration/packages/dependency_proxy.md

 ---
 stage: Package
-group: Package
+group: Container Registry
 info: To determine the technical writer assigned to the Stage/Group associated with this page, see https://about.gitlab.com/handbook/product/ux/technical-writing/#assignments
 ---
 

doc/administration/packages/index.md

 ---
 stage: Package
-group: Package
+group: Package Registry
 info: To determine the technical writer assigned to the Stage/Group associated with this page, see https://about.gitlab.com/handbook/product/ux/technical-writing/#assignments
 ---
 

doc/api/container_registry.md

 ---
 stage: Package
-group: Package
+group: Container Registry
 info: To determine the technical writer assigned to the Stage/Group associated with this page, see https://about.gitlab.com/handbook/product/ux/technical-writing/#assignments
 ---
 

doc/api/dependency_proxy.md

 ---
 stage: Package
-group: Package
+group: Container Registry
 info: To determine the technical writer assigned to the Stage/Group associated with this page, see https://about.gitlab.com/handbook/product/ux/technical-writing/#assignments
 ---
 

doc/api/packages.md

 ---
 stage: Package
-group: Package
+group: Package Registry
 info: To determine the technical writer assigned to the Stage/Group associated with this page, see https://about.gitlab.com/handbook/product/ux/technical-writing/#assignments
 ---
 

doc/api/packages/composer.md

 ---
 stage: Package
-group: Package
+group: Package Registry
 info: To determine the technical writer assigned to the Stage/Group associated with this page, see https://about.gitlab.com/handbook/product/ux/technical-writing/#assignments
 ---