Fix homepage template kind chip (#2110)

* fix(homepage): inconsistent usage of resource kind chip on template section on homepage

* add category tag to the templates

* remove template tag

* remove template tag

Author: Eswaraiahsapram

workspaces/homepage/.changeset/yellow-impalas-melt.md

@@ -0,0 +1,5 @@
+---
+'@red-hat-developer-hub/backstage-plugin-dynamic-home-page': patch
+---
+
+Fix inconsistent usage of resource kind chip on template homepage

workspaces/homepage/plugins/dynamic-home-page/src/components/TemplateSection/TemplateCard.test.tsx

@@ -24,7 +24,7 @@ describe('TemplateCard', () => {
     title: 'Sample Template',
     description:
       'This is a description of the sample template used for testing.',
-    kind: 'Template',
+    type: 'website',
   };
 
   const renderComponent = () =>
@@ -52,8 +52,8 @@ describe('TemplateCard', () => {
     expect(screen.getByText(/this is a description/i)).toBeInTheDocument();
   });
 
-  it('should display the correct kind in the Chip', () => {
+  it('should display the correct type in the Chip', () => {
     renderComponent();
-    expect(screen.getByText(props.kind)).toBeInTheDocument();
+    expect(screen.getByText(props.type)).toBeInTheDocument();
   });
 });

workspaces/homepage/plugins/dynamic-home-page/src/components/TemplateSection/TemplateCard.tsx

@@ -28,14 +28,14 @@ interface TemplateCardProps {
   link: string;
   title: string;
   description: string;
-  kind: string;
+  type?: string;
 }
 
 const TemplateCard: FC<TemplateCardProps> = ({
   link,
   title,
   description,
-  kind,
+  type,
 }) => {
   return (
     <Card
@@ -55,17 +55,6 @@ const TemplateCard: FC<TemplateCardProps> = ({
           backgroundColor: 'transparent',
         }}
       >
-        <Box sx={{ padding: '8px 0' }}>
-          <Chip
-            label={
-              <Typography sx={{ fontSize: '0.8rem', fontWeight: 400 }}>
-                {kind}
-              </Typography>
-            }
-            key={kind}
-            size="small"
-          />
-        </Box>
         <Box sx={{ margin: '8px 0', height: '21px', overflow: 'hidden' }}>
           <Link
             to={link}
@@ -107,6 +96,19 @@ const TemplateCard: FC<TemplateCardProps> = ({
             <MarkdownContent content={description} />
           </Typography>
         </Box>
+        <Box sx={{ pt: 2 }}>
+          {type && (
+            <Chip
+              label={
+                <Typography sx={{ fontSize: '0.8rem', fontWeight: 400 }}>
+                  {type}
+                </Typography>
+              }
+              key={type}
+              size="small"
+            />
+          )}
+        </Box>
       </CardContent>
     </Card>
   );

workspaces/homepage/plugins/dynamic-home-page/src/components/TemplateSection/TemplateSection.tsx

@@ -95,7 +95,7 @@ export const TemplateSection = () => {
                   link={`/create/templates/${item.metadata.namespace}/${item.metadata.name}`}
                   title={item.metadata.title}
                   description={item.metadata.description}
-                  kind="Template"
+                  type={item.spec.type}
                 />
               </Grid>
             ))}