Add callout config to view pages

- project
- group
- bundle.js

app/assets/javascripts/registry/explorer/index.js

@@ -29,7 +29,14 @@ export default () => {
     return null;
   }
 
-  const { endpoint, expirationPolicy, isGroupPage, isAdmin, ...config } = el.dataset;
+  const {
+    endpoint,
+    expirationPolicy,
+    isGroupPage,
+    isAdmin,
+    showUnfinishedTagCleanupCallout,
+    ...config
+  } = el.dataset;
 
   // This is a mini state to help the breadcrumb have the correct name in the details page
   const breadCrumbState = Vue.observable({
@@ -57,6 +64,7 @@ export default () => {
             expirationPolicy: expirationPolicy ? JSON.parse(expirationPolicy) : undefined,
             isGroupPage: parseBoolean(isGroupPage),
             isAdmin: parseBoolean(isAdmin),
+            showUnfinishedTagCleanupCallout: parseBoolean(showUnfinishedTagCleanupCallout),
           },
           /* eslint-disable @gitlab/require-i18n-strings */
           dockerBuildCommand: `docker build -t ${config.repositoryUrl} .`,

app/assets/javascripts/registry/explorer/pages/details.vue

@@ -3,6 +3,7 @@ import { GlKeysetPagination, GlResizeObserverDirective } from '@gitlab/ui';
 import { GlBreakpointInstance } from '@gitlab/ui/dist/utils';
 import createFlash from '~/flash';
 import Tracking from '~/tracking';
+import axios from '~/lib/utils/axios_utils';
 import { joinPaths } from '~/lib/utils/url_utility';
 import DeleteAlert from '../components/details_page/delete_alert.vue';
 import PartialCleanupAlert from '../components/details_page/partial_cleanup_alert.vue';
@@ -68,7 +69,7 @@ export default {
       isMobile: false,
       mutationLoading: false,
       deleteAlertType: null,
-      dismissPartialCleanupWarning: false,
+      hidePartialCleanupWarning: false,
     };
   },
   computed: {
@@ -86,8 +87,9 @@ export default {
     },
     showPartialCleanupWarning() {
       return (
+        this.config.showUnfinishedTagCleanupCallout &&
         this.image?.expirationPolicyCleanupStatus === UNFINISHED_STATUS &&
-        !this.dismissPartialCleanupWarning
+        !this.hidePartialCleanupWarning
       );
     },
     tracking() {
@@ -168,6 +170,12 @@ export default {
         });
       }
     },
+    dismissPartialCleanupWarning() {
+      this.hidePartialCleanupWarning = true;
+      axios.post(this.config.userCalloutsPath, {
+        feature_name: this.config.userCalloutId,
+      });
+    },
   },
 };
 </script>
@@ -185,7 +193,7 @@ export default {
       v-if="showPartialCleanupWarning"
       :run-cleanup-policies-help-page-path="config.runCleanupPoliciesHelpPagePath"
       :cleanup-policies-help-page-path="config.cleanupPoliciesHelpPagePath"
-      @dismiss="dismissPartialCleanupWarning = true"
+      @dismiss="dismissPartialCleanupWarning"
     />
 
     <details-header :image="image" :metadata-loading="isLoading" />

app/helpers/user_callouts_helper.rb

@@ -11,6 +11,7 @@ module UserCalloutsHelper
   CUSTOMIZE_HOMEPAGE = 'customize_homepage'
   FEATURE_FLAGS_NEW_VERSION = 'feature_flags_new_version'
   REGISTRATION_ENABLED_CALLOUT = 'registration_enabled_callout'
+  UNFINISHED_TAG_CLEANUP_CALLOUT = 'unfinished_tag_cleanup_callout'
 
   def show_admin_integrations_moved?
     !user_dismissed?(ADMIN_INTEGRATIONS_MOVED)
@@ -56,6 +57,10 @@ module UserCalloutsHelper
     !user_dismissed?(FEATURE_FLAGS_NEW_VERSION)
   end
 
+  def show_unfinished_tag_cleanup_callout?
+    !user_dismissed?(UNFINISHED_TAG_CLEANUP_CALLOUT)
+  end
+
   def show_registration_enabled_user_callout?
     !Gitlab.com? &&
     current_user&.admin? &&

app/models/user_callout.rb

@@ -27,7 +27,8 @@ class UserCallout < ApplicationRecord
     customize_homepage: 23,
     feature_flags_new_version: 24,
     registration_enabled_callout: 25,
-    new_user_signups_cap_reached: 26           # EE-only
+    new_user_signups_cap_reached: 26,           # EE-only
+    unfinished_tag_cleanup_callout: 27
   }
 
   validates :user, presence: true

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

@@ -17,4 +17,7 @@
     is_group_page: "true",
     "group_path": @group.full_path,
     "gid_prefix": container_repository_gid_prefix,
-    character_error: @character_error.to_s } }
+    character_error: @character_error.to_s,
+    user_callouts_path: user_callouts_path,
+    user_callout_id: UserCalloutsHelper::UNFINISHED_TAG_CLEANUP_CALLOUT,
+    show_unfinished_tag_cleanup_callout: show_unfinished_tag_cleanup_callout?.to_s } }

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

@@ -19,4 +19,7 @@
     "project_path": @project.full_path,
     "gid_prefix": container_repository_gid_prefix,
     "is_admin": current_user&.admin.to_s,
-    character_error: @character_error.to_s } }
+    character_error: @character_error.to_s,
+    user_callouts_path: user_callouts_path,
+    user_callout_id: UserCalloutsHelper::UNFINISHED_TAG_CLEANUP_CALLOUT,
+    show_unfinished_tag_cleanup_callout: show_unfinished_tag_cleanup_callout?.to_s, } }

changelogs/unreleased/291048-allow-unfinished-tag-cleanup-alert-to-be-permanently-dismissible-f.yml

+---
+title: Add callout disabling feature to cleanup policy alert
+merge_request: 52327
+author:
+type: changed

spec/frontend/registry/explorer/pages/details_spec.js

@@ -4,6 +4,7 @@ import VueApollo from 'vue-apollo';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import Tracking from '~/tracking';
+import axios from '~/lib/utils/axios_utils';
 import component from '~/registry/explorer/pages/details.vue';
 import DeleteAlert from '~/registry/explorer/components/details_page/delete_alert.vue';
 import PartialCleanupAlert from '~/registry/explorer/components/details_page/partial_cleanup_alert.vue';
@@ -401,6 +402,9 @@ describe('Details Page', () => {
     const config = {
       runCleanupPoliciesHelpPagePath: 'foo',
       cleanupPoliciesHelpPagePath: 'bar',
+      userCalloutsPath: 'call_out_path',
+      userCalloutId: 'call_out_id',
+      showUnfinishedTagCleanupCallout: true,
     };
 
     describe(`when expirationPolicyCleanupStatus is ${UNFINISHED_STATUS}`, () => {
@@ -413,8 +417,9 @@ describe('Details Page', () => {
           }),
         );
       });
+
       it('exists', async () => {
-        mountComponent({ resolver });
+        mountComponent({ resolver, config });
 
         await waitForApolloRequestRender();
 
@@ -426,11 +431,16 @@ describe('Details Page', () => {
 
         await waitForApolloRequestRender();
 
-        expect(findPartialCleanupAlert().props()).toEqual({ ...config });
+        expect(findPartialCleanupAlert().props()).toEqual({
+          runCleanupPoliciesHelpPagePath: config.runCleanupPoliciesHelpPagePath,
+          cleanupPoliciesHelpPagePath: config.cleanupPoliciesHelpPagePath,
+        });
       });
 
       it('dismiss hides the component', async () => {
-        mountComponent({ resolver });
+        jest.spyOn(axios, 'post').mockReturnValue();
+
+        mountComponent({ resolver, config });
 
         await waitForApolloRequestRender();
 
@@ -440,13 +450,25 @@ describe('Details Page', () => {
 
         await wrapper.vm.$nextTick();
 
+        expect(axios.post).toHaveBeenCalledWith(config.userCalloutsPath, {
+          feature_name: config.userCalloutId,
+        });
+        expect(findPartialCleanupAlert().exists()).toBe(false);
+      });
+
+      it('is hidden if the callout is dismissed', async () => {
+        mountComponent({ resolver });
+
+        await waitForApolloRequestRender();
+
         expect(findPartialCleanupAlert().exists()).toBe(false);
       });
     });
 
     describe(`when expirationPolicyCleanupStatus is not ${UNFINISHED_STATUS}`, () => {
       it('the component is hidden', async () => {
-        mountComponent();
+        mountComponent({ config });
+
         await waitForApolloRequestRender();
 
         expect(findPartialCleanupAlert().exists()).toBe(false);

spec/helpers/user_callouts_helper_spec.rb

@@ -222,4 +222,24 @@ RSpec.describe UserCalloutsHelper do
       it { is_expected.to be true }
     end
   end
+
+  describe '.show_unfinished_tag_cleanup_callout?' do
+    subject { helper.show_unfinished_tag_cleanup_callout? }
+
+    before do
+      allow(helper).to receive(:user_dismissed?).with(described_class::UNFINISHED_TAG_CLEANUP_CALLOUT) { dismissed }
+    end
+
+    context 'when user has not dismissed' do
+      let(:dismissed) { false }
+
+      it { is_expected.to be true }
+    end
+
+    context 'when user dismissed' do
+      let(:dismissed) { true }
+
+      it { is_expected.to be false }
+    end
+  end
 end