feat(tiles): Mark tiles as deprecated

Currently, we're ignoring the deprecated property from camel components.

This commit replaces the header tags with `Deprecated` when applicable

fixes: #287

packages/ui/src/camel-utils/camel-to-tile.adapter.test.ts

@@ -56,6 +56,19 @@ describe('camelComponentToTile', () => {
 
     expect(tile.tags).toEqual(['consumerOnly', 'producerOnly']);
   });
+
+  it('should replace the supportLevel header tag if the component is deprecated', () => {
+    const componentDef = {
+      component: {
+        supportLevel: 'Stable',
+        deprecated: true,
+      },
+    } as ICamelComponentDefinition;
+
+    const tile = camelComponentToTile(componentDef);
+
+    expect(tile.headerTags).toEqual(['Deprecated']);
+  });
 });
 
 describe('camelProcessorToTile', () => {

packages/ui/src/camel-utils/camel-to-tile.adapter.ts

@@ -6,8 +6,10 @@ export const camelComponentToTile = (componentDef: ICamelComponentDefinition): I
   const headerTags: string[] = [];
   const tags: string[] = [];
 
-  if (supportLevel) {
+  if (supportLevel && !componentDef.component.deprecated) {
     headerTags.push(supportLevel);
+  } else {
+    headerTags.push('Deprecated');
   }
   if (label) {
     tags.push(...label.split(','));

packages/ui/src/components/Catalog/Tags/tag-color-resolver.ts

@@ -6,6 +6,8 @@ export const getTagColor = (tag: string): COLOR => {
       return 'green';
     case 'preview':
       return 'orange';
+    case 'deprecated':
+      return 'red';
     default:
       return 'grey';
   }