2 files changed, 56 insertions, 1 deletions
diff --git a/app/assets/javascripts/packages_and_registries/shared/components/cleanup_policy_enabled_alert.vue b/app/assets/javascripts/packages_and_registries/shared/components/cleanup_policy_enabled_alert.vue
new file mode 100644
index 00000000000..d51c62e0623
--- /dev/null
+++ b/app/assets/javascripts/packages_and_registries/shared/components/cleanup_policy_enabled_alert.vue
@@ -0,0 +1,54 @@
+<script>
+import { GlSprintf, GlAlert, GlLink } from '@gitlab/ui';
+import { s__ } from '~/locale';
+import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue';
+
+export default {
+  components: {
+    GlAlert,
+    GlLink,
+    GlSprintf,
+    LocalStorageSync,
+  },
+  props: {
+    projectPath: {
+      type: String,
+      required: true,
+    },
+    cleanupPoliciesSettingsPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      dismissed: false,
+    };
+  },
+  computed: {
+    storageKey() {
+      return `cleanup_policy_enabled_for_project_${this.projectPath}`;
+    },
+  },
+  i18n: {
+    message: s__(
+      'ContainerRegistry|Cleanup policies are now available for this project. %{linkStart}Click here to get started.%{linkEnd}',
+    ),
+  },
+};
+</script>
+
+<template>
+  <local-storage-sync v-model="dismissed" :storage-key="storageKey">
+    <gl-alert v-if="!dismissed" class="gl-mt-2" dismissible @dismiss="dismissed = true">
+      <gl-sprintf :message="$options.i18n.message">
+        <template #link="{ content }">
+          <gl-link v-if="cleanupPoliciesSettingsPath" :href="cleanupPoliciesSettingsPath">{{
+            content
+          }}</gl-link>
+        </template>
+      </gl-sprintf>
+    </gl-alert>
+  </local-storage-sync>
+</template>
diff --git a/app/assets/javascripts/packages_and_registries/shared/utils.js b/app/assets/javascripts/packages_and_registries/shared/utils.js
index cc5c7ce82bf..93eb90535d1 100644
--- a/app/assets/javascripts/packages_and_registries/shared/utils.js
+++ b/app/assets/javascripts/packages_and_registries/shared/utils.js
@@ -1,7 +1,8 @@
 import { queryToObject } from '~/lib/utils/url_utility';
 import { FILTERED_SEARCH_TERM } from './constants';
 
-export const getQueryParams = (query) => queryToObject(query, { gatherArrays: true });
+export const getQueryParams = (query) =>
+  queryToObject(query, { gatherArrays: true, legacySpacesDecode: true });
 
 export const keyValueToFilterToken = (type, data) => ({ type, value: { data } });