feat: starred repos implementation

Signed-off-by: Andreea-Lupu <[email protected]>

.github/workflows/end-to-end-test.yml

@@ -94,7 +94,7 @@ jobs:
     - name: Build zot
       run: |
         cd $GITHUB_WORKSPACE/zot
-        make binary
+        make binary ZUI_BUILD_PATH=$GITHUB_WORKSPACE/build
         ls -l bin/
 
     - name: Bringup zot server

src/__tests__/HomePage/Home.test.js

@@ -178,33 +178,33 @@ describe('Home component', () => {
     jest.spyOn(api, 'get').mockResolvedValueOnce({ status: 200, data: { data: mockImageList } });
     jest.spyOn(api, 'get').mockResolvedValue({ status: 200, data: { data: mockImageListRecent } });
     render(<HomeWrapper />);
-    await waitFor(() => expect(screen.getAllByText(/alpine/i)).toHaveLength(3));
-    await waitFor(() => expect(screen.getAllByText(/mongo/i)).toHaveLength(3));
+    await waitFor(() => expect(screen.getAllByText(/alpine/i)).toHaveLength(4));
+    await waitFor(() => expect(screen.getAllByText(/mongo/i)).toHaveLength(4));
     await waitFor(() => expect(screen.getAllByText(/node/i)).toHaveLength(1));
   });
 
   it('renders signature icons', async () => {
     jest.spyOn(api, 'get').mockResolvedValueOnce({ status: 200, data: { data: mockImageList } });
     jest.spyOn(api, 'get').mockResolvedValue({ status: 200, data: { data: mockImageListRecent } });
     render(<HomeWrapper />);
-    expect(await screen.findAllByTestId('unverified-icon')).toHaveLength(3);
-    expect(await screen.findAllByTestId('verified-icon')).toHaveLength(4);
+    expect(await screen.findAllByTestId('unverified-icon')).toHaveLength(4);
+    expect(await screen.findAllByTestId('verified-icon')).toHaveLength(5);
   });
 
   it('renders vulnerability icons', async () => {
     jest.spyOn(api, 'get').mockResolvedValueOnce({ status: 200, data: { data: mockImageList } });
     jest.spyOn(api, 'get').mockResolvedValue({ status: 200, data: { data: mockImageListRecent } });
     render(<HomeWrapper />);
-    expect(await screen.findAllByTestId('low-vulnerability-icon')).toHaveLength(3);
-    expect(await screen.findAllByTestId('high-vulnerability-icon')).toHaveLength(3);
+    expect(await screen.findAllByTestId('low-vulnerability-icon')).toHaveLength(4);
+    expect(await screen.findAllByTestId('high-vulnerability-icon')).toHaveLength(4);
     expect(await screen.findAllByTestId('critical-vulnerability-icon')).toHaveLength(1);
   });
 
   it("should log an error when data can't be fetched", async () => {
     jest.spyOn(api, 'get').mockRejectedValue({ status: 500, data: {} });
     const error = jest.spyOn(console, 'error').mockImplementation(() => {});
     render(<HomeWrapper />);
-    await waitFor(() => expect(error).toBeCalledTimes(3));
+    await waitFor(() => expect(error).toBeCalledTimes(4));
   });
 
   it('should redirect to explore page when clicking view all popular', async () => {

src/api.js

@@ -84,7 +84,7 @@ const endpoints = {
   repoList: ({ pageNumber = 1, pageSize = 15 } = {}) =>
     `/v2/_zot/ext/search?query={RepoListWithNewestImage(requestedPage: {limit:${pageSize} offset:${
       (pageNumber - 1) * pageSize
-    }}){Results {Name LastUpdated Size Platforms {Os Arch}  NewestImage { Tag Vulnerabilities {MaxSeverity Count} Description  Licenses Title Source IsSigned SignatureInfo { Tool IsTrusted Author } Documentation Vendor Labels} IsStarred IsBookmarked DownloadCount}}}`,
+    }}){Results {Name LastUpdated Size Platforms {Os Arch}  NewestImage { Tag Vulnerabilities {MaxSeverity Count} Description  Licenses Title Source IsSigned SignatureInfo { Tool IsTrusted Author } Documentation Vendor Labels} IsStarred IsBookmarked StarCount DownloadCount}}}`,
   detailedRepoInfo: (name) =>
     `/v2/_zot/ext/search?query={ExpandedRepoInfo(repo:"${name}"){Images {Manifests {Digest Platform {Os Arch} Size} Vulnerabilities {MaxSeverity Count} Tag LastUpdated Vendor } Summary {Name LastUpdated Size Platforms {Os Arch} Vendors IsStarred IsBookmarked NewestImage {RepoName IsSigned SignatureInfo { Tool IsTrusted Author } Vulnerabilities {MaxSeverity Count} Manifests {Digest} Tag Vendor Title Documentation DownloadCount Source Description Licenses}}}}`,
   detailedImageInfo: (name, tag) =>
@@ -134,9 +134,10 @@ const endpoints = {
     if (filter.Arch) filterParam += ` Arch:${!isEmpty(filter.Arch) ? `${JSON.stringify(filter.Arch)}` : '""'}`;
     if (filter.HasToBeSigned) filterParam += ` HasToBeSigned: ${filter.HasToBeSigned}`;
     if (filter.IsBookmarked) filterParam += ` IsBookmarked: ${filter.IsBookmarked}`;
+    if (filter.IsStarred) filterParam += ` IsStarred: ${filter.IsStarred}`;
     filterParam += '}';
     if (Object.keys(filter).length === 0) filterParam = '';
-    return `/v2/_zot/ext/search?query={GlobalSearch(${searchParam}, ${paginationParam} ${filterParam}) {Page {TotalCount ItemCount} Repos {Name LastUpdated Size Platforms { Os Arch } IsStarred IsBookmarked NewestImage { Tag Vulnerabilities {MaxSeverity Count} Description IsSigned SignatureInfo { Tool IsTrusted Author } Licenses Vendor Labels } DownloadCount}}}`;
+    return `/v2/_zot/ext/search?query={GlobalSearch(${searchParam}, ${paginationParam} ${filterParam}) {Page {TotalCount ItemCount} Repos {Name LastUpdated Size Platforms { Os Arch } IsStarred IsBookmarked NewestImage { Tag Vulnerabilities {MaxSeverity Count} Description IsSigned SignatureInfo { Tool IsTrusted Author } Licenses Vendor Labels } StarCount DownloadCount}}}`;
   },
   imageSuggestions: ({ searchQuery = '""', pageNumber = 1, pageSize = 15 }) => {
     const searchParam = searchQuery !== '' ? `query:"${searchQuery}"` : `query:""`;
@@ -145,7 +146,8 @@ const endpoints = {
   },
   referrers: ({ repo, digest, type = '' }) =>
     `/v2/_zot/ext/search?query={Referrers(repo: "${repo}" digest: "${digest}" type: "${type}"){MediaType ArtifactType Size Digest Annotations{Key Value}}}`,
-  bookmarkToggle: (repo) => `/v2/_zot/ext/userprefs?repo=${repo}&action=toggleBookmark`
+  bookmarkToggle: (repo) => `/v2/_zot/ext/userprefs?repo=${repo}&action=toggleBookmark`,
+  starToggle: (repo) => `/v2/_zot/ext/userprefs?repo=${repo}&action=toggleStar`
 };
 
 export { api, endpoints };

src/components/Explore/Explore.jsx

@@ -220,9 +220,11 @@ function Explore({ searchInputValue }) {
             version={item.latestVersion}
             description={item.description}
             downloads={item.downloads}
+            stars={item.stars}
             isSigned={item.isSigned}
             signatureInfo={item.signatureInfo}
             isBookmarked={item.isBookmarked}
+            isStarred={item.isStarred}
             vendor={item.vendor}
             platforms={item.platforms}
             key={index}

src/components/Home/Home.jsx

@@ -8,7 +8,12 @@ import { mapToRepo } from 'utilities/objectModels';
 import Loading from '../Shared/Loading';
 import { useNavigate, createSearchParams } from 'react-router-dom';
 import { sortByCriteria } from 'utilities/sortCriteria';
-import { HOME_POPULAR_PAGE_SIZE, HOME_RECENT_PAGE_SIZE, HOME_BOOKMARKS_PAGE_SIZE } from 'utilities/paginationConstants';
+import {
+  HOME_POPULAR_PAGE_SIZE,
+  HOME_RECENT_PAGE_SIZE,
+  HOME_BOOKMARKS_PAGE_SIZE,
+  HOME_STARS_PAGE_SIZE
+} from 'utilities/paginationConstants';
 import { isEmpty } from 'lodash';
 import NoDataComponent from 'components/Shared/NoDataComponent';
 
@@ -89,6 +94,8 @@ function Home() {
   const [isLoadingRecent, setIsLoadingRecent] = useState(true);
   const [bookmarkData, setBookmarkData] = useState([]);
   const [isLoadingBookmarks, setIsLoadingBookmarks] = useState(true);
+  const [starData, setStarData] = useState([]);
+  const [isLoadingStars, setIsLoadingStars] = useState(true);
 
   const navigate = useNavigate();
   const abortController = useMemo(() => new AbortController(), []);
@@ -185,12 +192,44 @@ function Home() {
       });
   };
 
+  const getStars = () => {
+    setIsLoadingStars(true);
+    api
+      .get(
+        `${host()}${endpoints.globalSearch({
+          searchQuery: '',
+          pageNumber: 1,
+          pageSize: HOME_STARS_PAGE_SIZE,
+          sortBy: sortByCriteria.relevance?.value,
+          filter: { IsStarred: true }
+        })}`,
+        abortController.signal
+      )
+      .then((response) => {
+        if (response.data && response.data.data) {
+          let repoList = response.data.data.GlobalSearch.Repos;
+          let repoData = repoList.map((responseRepo) => {
+            return mapToRepo(responseRepo);
+          });
+          setStarData(repoData);
+          setIsLoading(false);
+          setIsLoadingStars(false);
+        }
+      })
+      .catch((e) => {
+        setIsLoading(false);
+        setIsLoadingStars(false);
+        console.error(e);
+      });
+  };
+
   useEffect(() => {
     window.scrollTo(0, 0);
     setIsLoading(true);
     getPopularData();
     getRecentData();
     getBookmarks();
+    getStars();
     return () => {
       abortController.abort();
     };
@@ -203,9 +242,11 @@ function Home() {
   const isNoData = () =>
     !isLoading &&
     !isLoadingBookmarks &&
+    !isLoadingStars &&
     !isLoadingPopular &&
     !isLoadingRecent &&
     bookmarkData.length === 0 &&
+    starData.length === 0 &&
     popularData.length === 0 &&
     recentData.length === 0;
 
@@ -219,9 +260,11 @@ function Home() {
             version={item.latestVersion}
             description={item.description}
             downloads={item.downloads}
+            stars={item.stars}
             isSigned={item.isSigned}
             signatureInfo={item.signatureInfo}
             isBookmarked={item.isBookmarked}
+            isStarred={item.isStarred}
             vendor={item.vendor}
             platforms={item.platforms}
             key={index}
@@ -294,6 +337,27 @@ function Home() {
             {isLoadingBookmarks ? <Loading /> : renderCards(bookmarkData, isLoadingBookmarks)}
           </>
         )}
+        {!isEmpty(starData) && (
+          <>
+            <Stack className={classes.sectionHeaderContainer}>
+              <div>
+                <Typography variant="h4" align="left" className={classes.sectionTitle}>
+                  Stars
+                </Typography>
+              </div>
+              <div>
+                <Typography
+                  variant="body2"
+                  className={classes.viewAll}
+                  onClick={() => handleClickViewAll('filter', 'IsStarred')}
+                >
+                  View all
+                </Typography>
+              </div>
+            </Stack>
+            {isLoadingStars ? <Loading /> : renderCards(starData, isLoadingStars)}
+          </>
+        )}
       </Stack>
     );
   };

src/components/Repo/RepoDetails.jsx

@@ -14,6 +14,8 @@ import { useParams, useNavigate, createSearchParams } from 'react-router-dom';
 import { Card, CardContent, CardMedia, Chip, Grid, Stack, Tooltip, Typography, IconButton } from '@mui/material';
 import BookmarkIcon from '@mui/icons-material/Bookmark';
 import BookmarkBorderIcon from '@mui/icons-material/BookmarkBorder';
+import StarIcon from '@mui/icons-material/Star';
+import StarBorderIcon from '@mui/icons-material/StarBorder';
 import makeStyles from '@mui/styles/makeStyles';
 
 // placeholder images
@@ -230,6 +232,17 @@ function RepoDetails() {
     });
   };
 
+  const handleStarClick = () => {
+    api.put(`${host()}${endpoints.starToggle(name)}`, abortController.signal).then((response) => {
+      if (response.status === 200) {
+        setRepoDetailData((prevState) => ({
+          ...prevState,
+          isStarred: !prevState.isStarred
+        }));
+      }
+    });
+  };
+
   const getVendor = () => {
     return `${repoDetailData.newestTag?.Vendor || 'Vendor not available'} •`;
   };
@@ -276,15 +289,26 @@ function RepoDetails() {
                           signatureInfo={repoDetailData.signatureInfo}
                         />
                       </Stack>
-                      {isAuthenticated() && (
-                        <IconButton component="span" onClick={handleBookmarkClick} data-testid="bookmark-button">
-                          {repoDetailData?.isBookmarked ? (
-                            <BookmarkIcon data-testid="bookmarked" />
-                          ) : (
-                            <BookmarkBorderIcon data-testid="not-bookmarked" />
-                          )}
-                        </IconButton>
-                      )}
+                      <Stack alignItems="center" sx={{ width: { xs: '100%', md: 'auto' } }} direction="row" spacing={1}>
+                        {isAuthenticated() && (
+                          <IconButton component="span" onClick={handleStarClick} data-testid="star-button">
+                            {repoDetailData?.isStarred ? (
+                              <StarIcon data-testid="starred" />
+                            ) : (
+                              <StarBorderIcon data-testid="not-starred" />
+                            )}
+                          </IconButton>
+                        )}
+                        {isAuthenticated() && (
+                          <IconButton component="span" onClick={handleBookmarkClick} data-testid="bookmark-button">
+                            {repoDetailData?.isBookmarked ? (
+                              <BookmarkIcon data-testid="bookmarked" />
+                            ) : (
+                              <BookmarkBorderIcon data-testid="not-bookmarked" />
+                            )}
+                          </IconButton>
+                        )}
+                      </Stack>
                     </Stack>
                     <Typography gutterBottom className={classes.repoTitle}>
                       {repoDetailData?.title || 'Title not available'}

src/components/Shared/RepoCard.jsx

@@ -28,6 +28,8 @@ import {
 import makeStyles from '@mui/styles/makeStyles';
 import BookmarkIcon from '@mui/icons-material/Bookmark';
 import BookmarkBorderIcon from '@mui/icons-material/BookmarkBorder';
+import StarIcon from '@mui/icons-material/Star';
+import StarBorderIcon from '@mui/icons-material/StarBorder';
 import { useTheme } from '@emotion/react';
 
 // placeholder images
@@ -183,17 +185,24 @@ function RepoCard(props) {
     platforms,
     description,
     downloads,
+    stars,
     isSigned,
     signatureInfo,
     lastUpdated,
     version,
     vulnerabilityData,
-    isBookmarked
+    isBookmarked,
+    isStarred
   } = props;
 
   // keep a local bookmark state to display in the ui dynamically on updates
   const [currentBookmarkValue, setCurrentBookmarkValue] = useState(isBookmarked);
 
+  // keep a local star state to display in the ui dynamically on updates
+  const [currentStarValue, setCurrentStarValue] = useState(isStarred);
+
+  const [currentStarCount, setCurrentStarCount] = useState(stars);
+
   const goToDetails = () => {
     navigate(`/image/${encodeURIComponent(name)}`);
   };
@@ -215,6 +224,23 @@ function RepoCard(props) {
     });
   };
 
+  const handleStarClick = (event) => {
+    event.stopPropagation();
+    event.preventDefault();
+    api.put(`${host()}${endpoints.starToggle(name)}`, abortController.signal).then((response) => {
+      if (response.status === 200) {
+        setCurrentStarValue((prevState) => !prevState);
+        currentStarValue
+          ? setCurrentStarCount((prevState) => {
+              return !isNaN(prevState) ? prevState - 1 : prevState;
+            })
+          : setCurrentStarCount((prevState) => {
+              return !isNaN(prevState) ? prevState + 1 : prevState;
+            });
+      }
+    });
+  };
+
   const platformChips = () => {
     const filteredPlatforms = uniq(platforms?.flatMap((platform) => [platform.Os, platform.Arch]));
     const hiddenChips = filteredPlatforms.length - MAX_PLATFORM_CHIPS;
@@ -260,6 +286,16 @@ function RepoCard(props) {
     );
   };
 
+  const renderStar = () => {
+    return (
+      isAuthenticated() && (
+        <IconButton component="span" onClick={handleStarClick} data-testid="star-button">
+          {currentStarValue ? <StarIcon data-testid="starred" /> : <StarBorderIcon data-testid="not-starred" />}
+        </IconButton>
+      )
+    );
+  };
+
   return (
     <Card variant="outlined" className={classes.card} data-testid="repo-card">
       <CardActionArea
@@ -337,6 +373,15 @@ function RepoCard(props) {
                     #1
                   </Typography>
                 </Grid> */}
+              <Grid item xs={12}>
+                {renderStar()}
+                <Typography variant="body2" component="span" className={classes.contentRightLabel}>
+                  Stars •
+                </Typography>
+                <Typography variant="body2" component="span" className={classes.contentRightValue}>
+                  {!isNaN(currentStarCount) ? currentStarCount : `not available`}
+                </Typography>
+              </Grid>
               <Grid container item xs={12} className={classes.contentRightActions}>
                 <Grid item>{renderBookmark()}</Grid>
               </Grid>

src/utilities/filterConstants.js

@@ -19,6 +19,11 @@ const imageFilters = [
     label: 'Bookmarks',
     value: 'IsBookmarked',
     type: 'boolean'
+  },
+  {
+    label: 'Starred Repositories',
+    value: 'IsStarred',
+    type: 'boolean'
   }
 ];