added github stars and npm downloads sort options

2025-12-27 15:13:21 +00:00 · 2022-11-08 15:39:50 +01:00 · 2022-11-08 15:39:50 +01:00 · 0d47e454e4
commit 0d47e454e4
parent 511a024b1e
3 changed files with 331 additions and 307 deletions
--- a/packages/core/admin/admin/src/pages/MarketplacePage/components/SortSelect/index.js
+++ b/packages/core/admin/admin/src/pages/MarketplacePage/components/SortSelect/index.js
@ -37,6 +37,26 @@ const SortSelect = ({ sortQuery, handleSelectChange }) => {
        defaultMessage: 'Newest',
      },
    },
+    'githubStars:desc': {
+      selected: {
+        id: 'admin.pages.MarketPlacePage.sort.githubStars.selected',
+        defaultMessage: 'Sort by github stars',
+      },
+      option: {
+        id: 'admin.pages.MarketPlacePage.sort.githubStars',
+        defaultMessage: 'Number of GitHub stars',
+      },
+    },
+    'npmDownloads:desc': {
+      selected: {
+        id: 'admin.pages.MarketPlacePage.sort.npmDownloads.selected',
+        defaultMessage: 'Sort by npm downloads',
+      },
+      option: {
+        id: 'admin.pages.MarketPlacePage.sort.npmDownloads',
+        defaultMessage: 'Number of downloads',
+      },
+    },
  };

  return (
--- a/packages/core/admin/admin/src/pages/MarketplacePage/tests/snapshots/index.test.js.snap
+++ b/packages/core/admin/admin/src/pages/MarketplacePage/tests/snapshots/index.test.js.snap
@ -1,185 +1,46 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

 exports[`Marketplace page - layout renders the online layout 1`] = `
-.c36 {
+.c17 {
+  padding-bottom: 16px;
+  width: 25%;
+}
+
+.c29 {
  padding-bottom: 16px;
 }

-.c62 {
-  background: #ffffff;
+.c51 {
+  padding-top: 4px;
+  padding-bottom: 4px;
+}
+
+.c65 {
+  border-radius: 4px;
+  width: 64px;
+  height: 64px;
+}
+
+.c76 {
  padding-top: 16px;
-  padding-right: 16px;
-  padding-bottom: 16px;
-  padding-left: 16px;
-  border-radius: 4px;
-  box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
-  height: 100%;
 }

-.c93 {
-  background: #ffffff;
-  padding: 24px;
-  border-radius: 4px;
-  box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
+.c79 {
+  padding-top: 8px;
 }

-.c94 {
-  background: #f6ecfc;
-  padding: 12px;
-  border-radius: 4px;
-}
-
-.c37 {
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  gap: 8px;
-}
-
-.c63 {
-  -webkit-align-items: normal;
-  -webkit-box-align: normal;
-  -ms-flex-align: normal;
-  align-items: normal;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-}
-
-.c64 {
-  -webkit-align-items: flex-start;
-  -webkit-box-align: flex-start;
-  -ms-flex-align: flex-start;
-  align-items: flex-start;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-}
-
-.c78 {
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c82 {
-  padding-top: 24px;
-}
-
-.c66 {
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c96 {
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-}
-
-.c97 > * {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-.c67 > * {
-  margin-left: 0;
-  margin-right: 0;
-}
-
-.c67 > * + * {
+.c88 {
  margin-left: 4px;
+  width: 24px;
+  height: auto;
 }

-.c83 > * {
-  margin-left: 0;
-  margin-right: 0;
+.c89 {
+  padding-left: 16px;
 }

-.c83 > * + * {
-  margin-left: 8px;
-}
-
-.c72 {
-  color: #32324d;
-  font-size: 0.75rem;
-  line-height: 1.33;
-}
-
-.c77 {
-  color: #32324d;
-  font-weight: 500;
-  font-size: 1rem;
-  line-height: 1.25;
-}
-
-.c80 {
-  color: #666687;
-  font-size: 0.875rem;
-  line-height: 1.43;
-}
-
-.c91 {
-  font-weight: 600;
-  color: #328048;
-  font-size: 0.875rem;
-  line-height: 1.43;
-}
-
-.c98 {
-  font-weight: 500;
-  color: #32324d;
-  font-size: 0.75rem;
-  line-height: 1.33;
+.c92 {
+  padding-top: 32px;
 }

 .c59 {
@ -409,91 +270,35 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
  fill: #271fe0;
 }

-.c17 {
-  padding-bottom: 16px;
-  width: 25%;
-}
-
-.c29 {
+.c36 {
  padding-bottom: 16px;
 }

-.c51 {
-  padding-top: 4px;
-  padding-bottom: 4px;
-}
-
-.c65 {
-  border-radius: 4px;
-  width: 64px;
-  height: 64px;
-}
-
-.c76 {
+.c62 {
+  background: #ffffff;
  padding-top: 16px;
-}
-
-.c79 {
-  padding-top: 8px;
-}
-
-.c88 {
-  margin-left: 4px;
-  width: 24px;
-  height: auto;
-}
-
-.c89 {
-  padding-left: 16px;
-}
-
-.c92 {
-  padding-top: 32px;
-}
-
-.c43 {
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  top: 0;
-  width: 100%;
-  background: transparent;
-  border: none;
-}
-
-.c43:focus {
-  outline: none;
-}
-
-.c43[aria-disabled='true'] {
-  cursor: not-allowed;
-}
-
-.c46 {
  padding-right: 16px;
+  padding-bottom: 16px;
  padding-left: 16px;
+  border-radius: 4px;
+  box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
+  height: 100%;
 }

-.c48 {
-  padding-left: 12px;
+.c93 {
+  background: #ffffff;
+  padding: 24px;
+  border-radius: 4px;
+  box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
 }

-.c39 {
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
+.c94 {
+  background: #f6ecfc;
+  padding: 12px;
+  border-radius: 4px;
 }

-.c41 {
+.c37 {
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
@ -505,13 +310,32 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
+  gap: 8px;
 }

-.c44 {
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
+.c63 {
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+}
+
+.c64 {
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
@ -525,73 +349,18 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
  justify-content: space-between;
 }

-.c47 {
-  color: #32324d;
-  display: block;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  font-size: 0.875rem;
-  line-height: 1.43;
-}
-
-.c40 > * {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-.c42 {
-  position: relative;
-  border: 1px solid #dcdce4;
-  padding-right: 12px;
-  border-radius: 4px;
-  background: #ffffff;
-  overflow: hidden;
-  min-height: 2rem;
-  outline: none;
-  box-shadow: 0;
-  -webkit-transition-property: border-color,box-shadow,fill;
-  transition-property: border-color,box-shadow,fill;
-  -webkit-transition-duration: 0.2s;
-  transition-duration: 0.2s;
-}
-
-.c42:focus-within {
-  border: 1px solid #4945ff;
-  box-shadow: #4945ff 0px 0px 0px 2px;
-}
-
-.c49 {
-  background: transparent;
-  border: none;
-  position: relative;
-  z-index: 1;
-}
-
-.c49 svg {
-  height: 0.6875rem;
-  width: 0.6875rem;
-}
-
-.c49 svg path {
-  fill: #666687;
-}
-
-.c50 {
+.c78 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
-  background: none;
-  border: none;
-}
-
-.c50 svg {
-  width: 0.375rem;
-}
-
-.c45 {
-  width: 100%;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
 }

 .c68 {
@ -782,6 +551,237 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
  box-shadow: #4945ff 0px 0px 0px 2px;
 }

+.c43 {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  width: 100%;
+  background: transparent;
+  border: none;
+}
+
+.c43:focus {
+  outline: none;
+}
+
+.c43[aria-disabled='true'] {
+  cursor: not-allowed;
+}
+
+.c46 {
+  padding-right: 16px;
+  padding-left: 16px;
+}
+
+.c48 {
+  padding-left: 12px;
+}
+
+.c39 {
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+.c41 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+}
+
+.c44 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+}
+
+.c47 {
+  color: #32324d;
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 0.875rem;
+  line-height: 1.43;
+}
+
+.c40 > * {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.c42 {
+  position: relative;
+  border: 1px solid #dcdce4;
+  padding-right: 12px;
+  border-radius: 4px;
+  background: #ffffff;
+  overflow: hidden;
+  min-height: 2rem;
+  outline: none;
+  box-shadow: 0;
+  -webkit-transition-property: border-color,box-shadow,fill;
+  transition-property: border-color,box-shadow,fill;
+  -webkit-transition-duration: 0.2s;
+  transition-duration: 0.2s;
+}
+
+.c42:focus-within {
+  border: 1px solid #4945ff;
+  box-shadow: #4945ff 0px 0px 0px 2px;
+}
+
+.c49 {
+  background: transparent;
+  border: none;
+  position: relative;
+  z-index: 1;
+}
+
+.c49 svg {
+  height: 0.6875rem;
+  width: 0.6875rem;
+}
+
+.c49 svg path {
+  fill: #666687;
+}
+
+.c50 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  background: none;
+  border: none;
+}
+
+.c50 svg {
+  width: 0.375rem;
+}
+
+.c45 {
+  width: 100%;
+}
+
+.c82 {
+  padding-top: 24px;
+}
+
+.c66 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+}
+
+.c96 {
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+.c97 > * {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.c67 > * {
+  margin-left: 0;
+  margin-right: 0;
+}
+
+.c67 > * + * {
+  margin-left: 4px;
+}
+
+.c83 > * {
+  margin-left: 0;
+  margin-right: 0;
+}
+
+.c83 > * + * {
+  margin-left: 8px;
+}
+
+.c72 {
+  color: #32324d;
+  font-size: 0.75rem;
+  line-height: 1.33;
+}
+
+.c77 {
+  color: #32324d;
+  font-weight: 500;
+  font-size: 1rem;
+  line-height: 1.25;
+}
+
+.c80 {
+  color: #666687;
+  font-size: 0.875rem;
+  line-height: 1.43;
+}
+
+.c91 {
+  font-weight: 600;
+  color: #328048;
+  font-size: 0.875rem;
+  line-height: 1.43;
+}
+
+.c98 {
+  font-weight: 500;
+  color: #32324d;
+  font-size: 0.75rem;
+  line-height: 1.33;
+}
+
 .c14 {
  font-weight: 600;
  color: #32324d;
--- a/packages/core/admin/admin/src/translations/en.json
+++ b/packages/core/admin/admin/src/translations/en.json
@ -290,6 +290,10 @@
  "admin.pages.MarketPlacePage.sort.newest": "Newest",
  "admin.pages.MarketPlacePage.sort.alphabetical.selected": "Sort by alphabetical order",
  "admin.pages.MarketPlacePage.sort.newest.selected": "Sort by newest",
+  "admin.pages.MarketPlacePage.sort.githubStars": "Number of GitHub stars",
+  "admin.pages.MarketPlacePage.sort.githubStars.selected": "Sort by github stars",
+  "admin.pages.MarketPlacePage.sort.npmDownloads": "Number of downloads",
+  "admin.pages.MarketPlacePage.sort.npmDownloads.selected": "Sort by npm downloads",
  "admin.pages.MarketPlacePage.filters.collections": "Collections",
  "admin.pages.MarketPlacePage.filters.collectionsSelected": "{count, plural, =0 {No collections} one {# collection} other {# collections}} selected",
  "admin.pages.MarketPlacePage.filters.categories": "Categories",