feat: Added filter for tags tab

Signed-off-by: Raul Kele <raulkeleblk@gmail.com>

src/__tests__/RepoPage/Tags.test.js

@@ -1,4 +1,5 @@
 import { fireEvent, waitFor, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import Tags from 'components/Tags';
 import React from 'react';
 
@@ -19,16 +20,38 @@ const mockedTagsData = [
       Os: 'linux',
       Arch: 'amd64'
     }
+  },
+  {
+    Digest: 'sha256:adca4815c494becc1bf053af0c4640b2d81ab1a779e6d649e1b8b92a75f1d559',
+    Tag: 'bullseye',
+    LastUpdated: '2022-07-19T18:06:18.818788283Z',
+    Vendor: 'test1',
+    Size: '569130088',
+    Platform: {
+      Os: 'linux',
+      Arch: 'amd64'
+    }
+  },
+  {
+    Digest: 'sha256:adca4815c494becc1bf053af0c4640b2d81ab1a779e6d649e1b8b92a75f1d559',
+    Tag: '1.5.2',
+    LastUpdated: '2022-07-19T18:06:18.818788283Z',
+    Vendor: 'test1',
+    Size: '569130088',
+    Platform: {
+      Os: 'linux',
+      Arch: 'amd64'
+    }
   }
 ];
 
 describe('Tags component', () => {
   it('should open and close details dropdown for tags', async () => {
     render(<Tags tags={mockedTagsData} />);
-    const openBtn = screen.getByText(/digest/i);
-    fireEvent.click(openBtn);
+    const openBtn = screen.getAllByText(/digest/i);
+    fireEvent.click(openBtn[0]);
     expect(screen.getByText(/OS\/ARCH/i)).toBeInTheDocument();
-    fireEvent.click(openBtn);
+    fireEvent.click(openBtn[0]);
     await waitFor(() => expect(screen.queryByText(/OS\/ARCH/i)).not.toBeInTheDocument());
   });
 
@@ -40,4 +63,14 @@ describe('Tags component', () => {
       expect(mockedUsedNavigate).toHaveBeenCalledWith('tag/latest');
     });
   });
+
+  it('should filter tag list based on user input', async () => {
+    render(<Tags tags={mockedTagsData} />);
+    const tagFilterInput = await screen.findByPlaceholderText(/Filter tags/i);
+    expect(await screen.findByText(/latest/i)).toBeInTheDocument();
+    expect(await screen.findByText(/bullseye/i)).toBeInTheDocument();
+    userEvent.type(tagFilterInput, 'bull');
+    await waitFor(() => expect(screen.queryByText(/latest/i)).not.toBeInTheDocument());
+    expect(await screen.findByText(/bullseye/i)).toBeInTheDocument();
+  });
 });

src/components/Tags.jsx

@@ -1,9 +1,9 @@
 // react global
-import * as React from 'react';
+import React, { useState } from 'react';
 
 // components
 import Typography from '@mui/material/Typography';
-import { Card, CardContent, Divider } from '@mui/material';
+import { Card, CardContent, Divider, Stack, Input } from '@mui/material';
 import { makeStyles } from '@mui/styles';
 import TagCard from './TagCard';
 
@@ -50,37 +50,48 @@ const useStyles = makeStyles(() => ({
 export default function Tags(props) {
   const classes = useStyles();
   const { tags } = props;
+  const [tagsFilter, setTagsFilter] = useState('');
   const renderTags = (tags) => {
-    const cmp =
+    return (
       tags &&
-      tags.map((tag) => {
-        return (
-          <TagCard
-            key={tag.Tag}
-            tag={tag.Tag}
-            lastUpdated={tag.LastUpdated}
-            digest={tag.Digest}
-            vendor={tag.Vendor}
-            size={tag.Size}
-            platform={tag.Platform}
-          />
-        );
-      });
-    return cmp;
+      tags
+        .filter((t) => t.Tag?.includes(tagsFilter))
+        .map((tag) => {
+          return (
+            <TagCard
+              key={tag.Tag}
+              tag={tag.Tag}
+              lastUpdated={tag.LastUpdated}
+              digest={tag.Digest}
+              vendor={tag.Vendor}
+              size={tag.Size}
+              platform={tag.Platform}
+            />
+          );
+        })
+    );
+  };
+
+  const handleTagsFilterChange = (e) => {
+    const { value } = e.target;
+    setTagsFilter(value);
   };
 
   return (
     <Card className={classes.tagCard} data-testid="tags-container">
       <CardContent className={classes.content}>
-        <Typography
-          variant="h4"
-          gutterBottom
-          component="div"
-          align="left"
-          style={{ color: 'rgba(0, 0, 0, 0.87)', fontSize: '1.5rem', fontWeight: '600' }}
-        >
-          Tags History
-        </Typography>
+        <Stack direction="row" justifyContent="space-between">
+          <Typography
+            variant="h4"
+            gutterBottom
+            component="div"
+            align="left"
+            style={{ color: 'rgba(0, 0, 0, 0.87)', fontSize: '1.5rem', fontWeight: '600' }}
+          >
+            Tags History
+          </Typography>
+          <Input placeholder="Filter Tags" type="text" value={tagsFilter} onChange={handleTagsFilterChange}></Input>
+        </Stack>
         <Divider
           variant="fullWidth"
           sx={{