feat:Added tags sort filter

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

src/__tests__/RepoPage/Tags.test.js

@@ -73,4 +73,15 @@ describe('Tags component', () => {
     await waitFor(() => expect(screen.queryByText(/latest/i)).not.toBeInTheDocument());
     expect(await screen.findByText(/bullseye/i)).toBeInTheDocument();
   });
+
+  it('should sort tags based on the picked sort criteria', async () => {
+    render(<Tags tags={mockedTagsData} />);
+    const selectFilter = await screen.findByText('Newest');
+    expect(selectFilter).toBeInTheDocument();
+    userEvent.click(selectFilter);
+    const newOption = await screen.findByText('A - Z');
+    userEvent.click(newOption);
+    expect(await screen.findByText('A - Z')).toBeInTheDocument();
+    expect(await screen.queryByText('Newest')).not.toBeInTheDocument();
+  });
 });

src/components/Tags.jsx

@@ -3,9 +3,10 @@ import React, { useState } from 'react';
 
 // components
 import Typography from '@mui/material/Typography';
-import { Card, CardContent, Divider, Stack, Input } from '@mui/material';
+import { Card, CardContent, Divider, Stack, Input, FormControl, Select, InputLabel, MenuItem } from '@mui/material';
 import { makeStyles } from '@mui/styles';
 import TagCard from './TagCard';
+import { tagsSortByCriteria } from 'utilities/sortCriteria';
 
 const useStyles = makeStyles(() => ({
   tagCard: {
@@ -51,24 +52,28 @@ export default function Tags(props) {
   const classes = useStyles();
   const { tags } = props;
   const [tagsFilter, setTagsFilter] = useState('');
+  const [sortFilter, setSortFilter] = useState(tagsSortByCriteria.updateTimeDesc.value);
   const renderTags = (tags) => {
+    const selectedSort = Object.values(tagsSortByCriteria).find((sc) => sc.value === sortFilter);
+    const filteredTags = tags.filter((t) => t.Tag?.includes(tagsFilter));
+    if (selectedSort) {
+      filteredTags.sort(selectedSort.func);
+    }
     return (
       tags &&
-      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}
-            />
-          );
-        })
+      filteredTags.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}
+          />
+        );
+      })
     );
   };
 
@@ -77,6 +82,11 @@ export default function Tags(props) {
     setTagsFilter(value);
   };
 
+  const handleTagsSortChange = (e) => {
+    const { value } = e.target;
+    setSortFilter(value);
+  };
+
   return (
     <Card className={classes.tagCard} data-testid="tags-container">
       <CardContent className={classes.content}>
@@ -90,7 +100,24 @@ export default function Tags(props) {
           >
             Tags History
           </Typography>
-          <Input placeholder="Filter Tags" type="text" value={tagsFilter} onChange={handleTagsFilterChange}></Input>
+          <div>
+            <FormControl sx={{ m: '1', minWidth: '4.6875rem' }} className={classes.sortForm} size="small">
+              <InputLabel>Sort</InputLabel>
+              <Select
+                label="Sort"
+                value={sortFilter}
+                onChange={handleTagsSortChange}
+                MenuProps={{ disableScrollLock: true }}
+              >
+                {Object.values(tagsSortByCriteria).map((el) => (
+                  <MenuItem key={el.value} value={el.value}>
+                    {el.label}
+                  </MenuItem>
+                ))}
+              </Select>
+            </FormControl>
+            <Input placeholder="Filter Tags" type="text" value={tagsFilter} onChange={handleTagsFilterChange}></Input>
+          </div>
         </Stack>
         <Divider
           variant="fullWidth"

src/utilities/sortCriteria.js

@@ -1,3 +1,5 @@
+import { DateTime } from 'luxon';
+
 export const sortByCriteria = {
   relevance: {
     value: 'RELEVANCE',
@@ -24,3 +26,34 @@ export const sortByCriteria = {
     label: 'Most downloaded'
   }
 };
+
+export const tagsSortByCriteria = {
+  updateTimeDesc: {
+    value: 'UPDATETIME_DESC',
+    label: 'Newest',
+    func: (a, b) => {
+      return DateTime.fromISO(b.LastUpdated).diff(DateTime.fromISO(a.LastUpdated));
+    }
+  },
+  updateTime: {
+    value: 'UPDATETIME',
+    label: 'Oldest',
+    func: (a, b) => {
+      return DateTime.fromISO(a.LastUpdated).diff(DateTime.fromISO(b.LastUpdated));
+    }
+  },
+  alphabetic: {
+    value: 'ALPHABETIC',
+    label: 'A - Z',
+    func: (a, b) => {
+      return a.Tag?.localeCompare(b.Tag);
+    }
+  },
+  alphabeticDesc: {
+    value: 'ALPHABETIC_DESC',
+    label: 'Z - A',
+    func: (a, b) => {
+      return b.Tag?.localeCompare(a.Tag);
+    }
+  }
+};