Update error message with importing container repository

Importing container repositories are read only. As such, tags
destruction is not allowed. Error message is updated to link the
appropriate epic related to container repositories migration.

Changelog: changed

app/assets/javascripts/packages_and_registries/container_registry/explorer/components/details_page/delete_alert.vue

 <script>
 import { GlSprintf, GlAlert, GlLink } from '@gitlab/ui';
 
-import { ALERT_MESSAGES, ADMIN_GARBAGE_COLLECTION_TIP } from '../../constants/index';
+import {
+  ALERT_MESSAGES,
+  ADMIN_GARBAGE_COLLECTION_TIP,
+  ALERT_DANGER_IMPORTING,
+} from '../../constants/index';
 
 export default {
   components: {
@@ -23,6 +27,7 @@ export default {
       },
     },
     garbageCollectionHelpPagePath: { type: String, required: false, default: '' },
+    containerRegistryImportingHelpPagePath: { type: String, required: false, default: '' },
     isAdmin: {
       type: Boolean,
       default: false,
@@ -48,6 +53,11 @@ export default {
       }
       return config;
     },
+    alertHref() {
+      return this.deleteAlertType === ALERT_DANGER_IMPORTING
+        ? this.containerRegistryImportingHelpPagePath
+        : this.garbageCollectionHelpPagePath;
+    },
   },
 };
 </script>
@@ -61,7 +71,7 @@ export default {
   >
     <gl-sprintf :message="deleteAlertConfig.message">
       <template #docLink="{ content }">
-        <gl-link :href="garbageCollectionHelpPagePath" target="_blank">
+        <gl-link :href="alertHref" target="_blank">
           {{ content }}
         </gl-link>
       </template>

app/assets/javascripts/packages_and_registries/container_registry/explorer/constants/details.js

@@ -93,6 +93,10 @@ export const DETAILS_DELETE_IMAGE_ERROR_MESSAGE = s__(
   'ContainerRegistry|Something went wrong while scheduling the image for deletion.',
 );
 
+export const DETAILS_IMPORTING_ERROR_MESSAGE = s__(
+  'ContainerRegistry|Tags temporarily cannot be marked for deletion. Please try again in a few minutes. %{docLinkStart}More details%{docLinkEnd}.',
+);
+
 export const DELETE_IMAGE_CONFIRMATION_TITLE = s__('ContainerRegistry|Delete image repository?');
 export const DELETE_IMAGE_CONFIRMATION_TEXT = s__(
   'ContainerRegistry|Deleting the image repository will delete all images and tags inside. This action cannot be undone. Please type the following to confirm: %{code}',
@@ -133,6 +137,7 @@ export const ALERT_DANGER_TAG = 'danger_tag';
 export const ALERT_SUCCESS_TAGS = 'success_tags';
 export const ALERT_DANGER_TAGS = 'danger_tags';
 export const ALERT_DANGER_IMAGE = 'danger_image';
+export const ALERT_DANGER_IMPORTING = 'danger_importing';
 
 export const DELETE_SCHEDULED = 'DELETE_SCHEDULED';
 export const DELETE_FAILED = 'DELETE_FAILED';
@@ -143,6 +148,7 @@ export const ALERT_MESSAGES = {
   [ALERT_SUCCESS_TAGS]: DELETE_TAGS_SUCCESS_MESSAGE,
   [ALERT_DANGER_TAGS]: DELETE_TAGS_ERROR_MESSAGE,
   [ALERT_DANGER_IMAGE]: DETAILS_DELETE_IMAGE_ERROR_MESSAGE,
+  [ALERT_DANGER_IMPORTING]: DETAILS_IMPORTING_ERROR_MESSAGE,
 };
 
 export const UNFINISHED_STATUS = 'UNFINISHED';

app/assets/javascripts/packages_and_registries/container_registry/explorer/pages/details.vue

@@ -20,6 +20,7 @@ import {
   ALERT_SUCCESS_TAGS,
   ALERT_DANGER_TAGS,
   ALERT_DANGER_IMAGE,
+  ALERT_DANGER_IMPORTING,
   FETCH_IMAGES_LIST_ERROR_MESSAGE,
   UNFINISHED_STATUS,
   MISSING_OR_DELETED_IMAGE_BREADCRUMB,
@@ -32,6 +33,8 @@ import deleteContainerRepositoryTagsMutation from '../graphql/mutations/delete_c
 import getContainerRepositoryDetailsQuery from '../graphql/queries/get_container_repository_details.query.graphql';
 import getContainerRepositoryTagsQuery from '../graphql/queries/get_container_repository_tags.query.graphql';
 
+const REPOSITORY_IMPORTING_ERROR_MESSAGE = 'repository importing';
+
 export default {
   name: 'RegistryDetailsPage',
   components: {
@@ -147,12 +150,17 @@ export default {
         });
 
         if (data?.destroyContainerRepositoryTags?.errors[0]) {
-          throw new Error();
+          throw new Error(data.destroyContainerRepositoryTags.errors[0]);
         }
         this.deleteAlertType =
           itemsToBeDeleted.length === 0 ? ALERT_SUCCESS_TAG : ALERT_SUCCESS_TAGS;
       } catch (e) {
-        this.deleteAlertType = itemsToBeDeleted.length === 0 ? ALERT_DANGER_TAG : ALERT_DANGER_TAGS;
+        if (e.message === REPOSITORY_IMPORTING_ERROR_MESSAGE) {
+          this.deleteAlertType = ALERT_DANGER_IMPORTING;
+        } else {
+          this.deleteAlertType =
+            itemsToBeDeleted.length === 0 ? ALERT_DANGER_TAG : ALERT_DANGER_TAGS;
+        }
       }
 
       this.mutationLoading = false;
@@ -188,6 +196,7 @@ export default {
       <delete-alert
         v-model="deleteAlertType"
         :garbage-collection-help-page-path="config.garbageCollectionHelpPagePath"
+        :container-registry-importing-help-page-path="config.containerRegistryImportingHelpPagePath"
         :is-admin="config.isAdmin"
         class="gl-my-2"
       />

app/views/groups/registry/repositories/index.html.haml

@@ -12,6 +12,7 @@
     "registry_host_url_with_port" => escape_once(registry_config.host_port),
     "garbage_collection_help_page_path" => help_page_path('administration/packages/container_registry', anchor: 'container-registry-garbage-collection'),
     "run_cleanup_policies_help_page_path" => help_page_path('administration/packages/container_registry', anchor: 'run-the-cleanup-policy-now'),
+    "container_registry_importing_help_page_path" => help_page_path('user/packages/container_registry/index', anchor: 'tags-temporarily-cannot-be-marked-for-deletion'),
     "is_admin": current_user&.admin.to_s,
     is_group_page: "true",
     "group_path": @group.full_path,

app/views/projects/registry/repositories/index.html.haml

@@ -15,6 +15,7 @@
     "expiration_policy_help_page_path" => help_page_path('user/packages/container_registry/reduce_container_registry_storage', anchor: 'cleanup-policy'),
     "garbage_collection_help_page_path" => help_page_path('administration/packages/container_registry', anchor: 'container-registry-garbage-collection'),
     "run_cleanup_policies_help_page_path" => help_page_path('administration/packages/container_registry', anchor: 'run-the-cleanup-policy-now'),
+    "container_registry_importing_help_page_path" => help_page_path('user/packages/container_registry/index', anchor: 'tags-temporarily-cannot-be-marked-for-deletion'),
     "project_path": @project.full_path,
     "gid_prefix": container_repository_gid_prefix,
     "is_admin": current_user&.admin.to_s,

doc/user/packages/container_registry/index.md

@@ -695,3 +695,10 @@ There may be some errors not properly cached. Follow these steps to investigate
    Once adjusted, trigger another tag deletion. You should be able to successfully delete tags.
 
 Follow [this issue](https://gitlab.com/gitlab-org/container-registry/-/issues/551) for details.
+
+### Tags temporarily cannot be marked for deletion
+
+GitLab is [migrating to the next generation of the Container Registry](https://gitlab.com/groups/gitlab-org/-/epics/5523). 
+During the migration, you may encounter difficulty deleting tags. 
+If you encounter an error, it's likely that your image repository is in the process of being migrated. 
+Please wait a few minutes and try again.

locale/gitlab.pot

@@ -9665,6 +9665,9 @@ msgstr ""
 msgid "ContainerRegistry|Tags successfully marked for deletion."
 msgstr ""
 
+msgid "ContainerRegistry|Tags temporarily cannot be marked for deletion. Please try again in a few minutes. %{docLinkStart}More details%{docLinkEnd}."
+msgstr ""
+
 msgid "ContainerRegistry|Tags that match these rules are %{strongStart}kept%{strongEnd}, even if they match a removal rule below. The %{secondStrongStart}latest%{secondStrongEnd} tag is always kept."
 msgstr ""
 

spec/features/groups/container_registry_spec.rb

@@ -97,6 +97,8 @@ RSpec.describe 'Container Registry', :js do
         expect(find('.modal .modal-title')).to have_content _('Remove tag')
         find('.modal .modal-footer .btn-danger').click
       end
+
+      it_behaves_like 'rejecting tags destruction for an importing repository on', tags: ['latest']
     end
   end
 

spec/features/projects/container_registry_spec.rb

@@ -103,6 +103,8 @@ RSpec.describe 'Container Registry', :js do
         find('.modal .modal-footer .btn-danger').click
       end
 
+      it_behaves_like 'rejecting tags destruction for an importing repository on', tags: ['1']
+
       it('pagination navigate to the second page') do
         visit_next_page
 

spec/frontend/packages_and_registries/container_registry/explorer/components/details_page/delete_alert_spec.js

@@ -6,6 +6,7 @@ import {
   DELETE_TAG_ERROR_MESSAGE,
   DELETE_TAGS_SUCCESS_MESSAGE,
   DELETE_TAGS_ERROR_MESSAGE,
+  DETAILS_IMPORTING_ERROR_MESSAGE,
   ADMIN_GARBAGE_COLLECTION_TIP,
 } from '~/packages_and_registries/container_registry/explorer/constants';
 
@@ -76,6 +77,7 @@ describe('Delete alert', () => {
         });
       });
     });
+
     describe('error states', () => {
       describe.each`
         deleteAlertType  | message
@@ -105,6 +107,25 @@ describe('Delete alert', () => {
       });
     });
 
+    describe('importing repository error state', () => {
+      beforeEach(() => {
+        mountComponent({
+          deleteAlertType: 'danger_importing',
+          containerRegistryImportingHelpPagePath: 'https://foobar',
+        });
+      });
+
+      it('alert exist and text is appropriate', () => {
+        expect(findAlert().text()).toMatchInterpolatedText(DETAILS_IMPORTING_ERROR_MESSAGE);
+      });
+
+      it('alert body contains link', () => {
+        const alertLink = findLink();
+        expect(alertLink.exists()).toBe(true);
+        expect(alertLink.attributes('href')).toBe('https://foobar');
+      });
+    });
+
     describe('dismissing alert', () => {
       it('GlAlert dismiss event triggers a change event', () => {
         mountComponent({ deleteAlertType: 'success_tags' });

spec/frontend/packages_and_registries/container_registry/explorer/mock_data.js

@@ -239,6 +239,15 @@ export const graphQLDeleteImageRepositoryTagsMock = {
   },
 };
 
+export const graphQLDeleteImageRepositoryTagImportingErrorMock = {
+  data: {
+    destroyContainerRepositoryTags: {
+      errors: ['repository importing'],
+      __typename: 'DestroyContainerRepositoryTagsPayload',
+    },
+  },
+};
+
 export const dockerCommands = {
   dockerBuildCommand: 'foofoo',
   dockerPushCommand: 'barbar',

spec/frontend/packages_and_registries/container_registry/explorer/pages/details_spec.js

@@ -18,6 +18,7 @@ import {
   UNFINISHED_STATUS,
   DELETE_SCHEDULED,
   ALERT_DANGER_IMAGE,
+  ALERT_DANGER_IMPORTING,
   MISSING_OR_DELETED_IMAGE_BREADCRUMB,
   ROOT_IMAGE_TEXT,
   MISSING_OR_DELETED_IMAGE_TITLE,
@@ -33,6 +34,7 @@ import Tracking from '~/tracking';
 import {
   graphQLImageDetailsMock,
   graphQLDeleteImageRepositoryTagsMock,
+  graphQLDeleteImageRepositoryTagImportingErrorMock,
   containerRepositoryMock,
   graphQLEmptyImageDetailsMock,
   tagsMock,
@@ -329,6 +331,7 @@ describe('Details Page', () => {
     const config = {
       isAdmin: true,
       garbageCollectionHelpPagePath: 'baz',
+      containerRegistryImportingHelpPagePath: 'https://foobar',
     };
     const deleteAlertType = 'success_tag';
 
@@ -353,6 +356,35 @@ describe('Details Page', () => {
 
       expect(findDeleteAlert().props()).toEqual({ ...config, deleteAlertType });
     });
+
+    describe('importing repository error', () => {
+      let mutationResolver;
+      let tagsResolver;
+
+      beforeEach(async () => {
+        mutationResolver = jest
+          .fn()
+          .mockResolvedValue(graphQLDeleteImageRepositoryTagImportingErrorMock);
+        tagsResolver = jest.fn().mockResolvedValue(graphQLImageDetailsMock(imageTagsMock));
+
+        mountComponent({ mutationResolver, tagsResolver });
+        await waitForApolloRequestRender();
+      });
+
+      it('displays the proper alert', async () => {
+        findTagsList().vm.$emit('delete', [cleanTags[0]]);
+        await nextTick();
+
+        findDeleteModal().vm.$emit('confirmDelete');
+        await waitForPromises();
+
+        expect(tagsResolver).toHaveBeenCalled();
+
+        const deleteAlert = findDeleteAlert();
+        expect(deleteAlert.exists()).toBe(true);
+        expect(deleteAlert.props('deleteAlertType')).toBe(ALERT_DANGER_IMPORTING);
+      });
+    });
   });
 
   describe('Partial Cleanup Alert', () => {

spec/support/shared_examples/features/container_registry_shared_examples.rb

@@ -7,3 +7,20 @@ RSpec.shared_examples 'handling feature network errors with the container regist
     expect(page).to have_content 'We are having trouble connecting to the Container Registry'
   end
 end
+
+RSpec.shared_examples 'rejecting tags destruction for an importing repository on' do |tags: []|
+  it 'rejects the tag destruction operation' do
+    service = instance_double('Projects::ContainerRepository::DeleteTagsService')
+    expect(service).to receive(:execute).with(container_repository) { { status: :error, message: 'repository importing' } }
+    expect(Projects::ContainerRepository::DeleteTagsService).to receive(:new).with(container_repository.project, user, tags: tags) { service }
+
+    first('[data-testid="additional-actions"]').click
+    first('[data-testid="single-delete-button"]').click
+    expect(find('.modal .modal-title')).to have_content _('Remove tag')
+    find('.modal .modal-footer .btn-danger').click
+
+    alert_body = find('.gl-alert-body')
+    expect(alert_body).to have_content('Tags temporarily cannot be marked for deletion. Please try again in a few minutes.')
+    expect(alert_body).to have_link('More details', href: help_page_path('user/packages/container_registry/index', anchor: 'tags-temporarily-cannot-be-marked-for-deletion'))
+  end
+end