1 files changed, 20 insertions, 4 deletions
diff --git a/app/assets/javascripts/packages_and_registries/dependency_proxy/components/manifest_row.vue b/app/assets/javascripts/packages_and_registries/dependency_proxy/components/manifest_row.vue
index 78880b6e3f4..1bbd0c32dc4 100644
--- a/app/assets/javascripts/packages_and_registries/dependency_proxy/components/manifest_row.vue
+++ b/app/assets/javascripts/packages_and_registries/dependency_proxy/components/manifest_row.vue
@@ -1,5 +1,6 @@
 <script>
-import { GlSprintf } from '@gitlab/ui';
+import { GlIcon, GlSprintf } from '@gitlab/ui';
+import { MANIFEST_PENDING_DESTRUCTION_STATUS } from '~/packages_and_registries/dependency_proxy/constants';
 import ListItem from '~/vue_shared/components/registry/list_item.vue';
 import TimeagoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 import { s__ } from '~/locale';
@@ -7,6 +8,7 @@ import { s__ } from '~/locale';
 export default {
   name: 'ManifestRow',
   components: {
+    GlIcon,
     GlSprintf,
     ListItem,
     TimeagoTooltip,
@@ -24,17 +26,31 @@ export default {
     version() {
       return this.manifest?.imageName.split(':')[1];
     },
+    isErrorStatus() {
+      return this.manifest?.status === MANIFEST_PENDING_DESTRUCTION_STATUS;
+    },
+    disabledRowStyle() {
+      return this.isErrorStatus ? 'gl-font-weight-normal gl-text-gray-500' : '';
+    },
   },
   i18n: {
     cachedAgoMessage: s__('DependencyProxy|Cached %{time}'),
+    scheduledForDeletion: s__('DependencyProxy|Scheduled for deletion'),
   },
 };
 </script>
 
 <template>
-  <list-item>
-    <template #left-primary> {{ name }} </template>
-    <template #left-secondary> {{ version }} </template>
+  <list-item :disabled="isErrorStatus">
+    <template #left-primary>
+      <span :class="disabledRowStyle">{{ name }}</span>
+    </template>
+    <template #left-secondary>
+      {{ version }}
+      <span v-if="isErrorStatus" class="gl-ml-4" data-testid="status"
+        ><gl-icon name="clock" /> {{ $options.i18n.scheduledForDeletion }}</span
+      >
+    </template>
     <template #right-primary> &nbsp; </template>
     <template #right-secondary>
       <timeago-tooltip :time="manifest.createdAt" data-testid="cached-message">