From d6f74af49076b0bcb48a67c42d017bb3d8e7ef68 Mon Sep 17 00:00:00 2001
From: Steve Rydz <steve.rydz@canonical.com>
Date: Wed, 13 Dec 2023 16:48:15 +0000
Subject: [PATCH] Add architecture filter

---
 package.json                                  |  2 +-
 .../js/store/components/Packages/Packages.tsx | 41 +++++++++++++++++++
 yarn.lock                                     |  8 ++--
 3 files changed, 46 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 66fe0491ad..29a9e1df16 100644
--- a/package.json
+++ b/package.json
@@ -33,7 +33,7 @@
     "@canonical/global-nav": "3.6.2",
     "@canonical/latest-news": "1.5.0",
     "@canonical/react-components": "0.47.1",
-    "@canonical/store-components": "0.45.0",
+    "@canonical/store-components": "0.46.0",
     "@dnd-kit/core": "6.0.8",
     "@dnd-kit/sortable": "7.0.2",
     "@dnd-kit/utilities": "3.2.1",
diff --git a/static/js/store/components/Packages/Packages.tsx b/static/js/store/components/Packages/Packages.tsx
index a258e00b36..88cfe56504 100644
--- a/static/js/store/components/Packages/Packages.tsx
+++ b/static/js/store/components/Packages/Packages.tsx
@@ -118,6 +118,47 @@ function Packages() {
                     searchParams.delete("page");
                     setSearchParams(searchParams);
                   }}
+                  architectures={[
+                    {
+                      name: "",
+                      display_name: "All",
+                    },
+                    {
+                      name: "amd64",
+                      display_name: "AMD64",
+                    },
+                    {
+                      name: "arm64",
+                      display_name: "ARM64",
+                    },
+                    {
+                      name: "armhf",
+                      display_name: "ARMHF",
+                    },
+                    {
+                      name: "i386",
+                      display_name: "I386",
+                    },
+                    {
+                      name: "ppc64el",
+                      display_name: "PPC64EL",
+                    },
+                    {
+                      name: "s390x",
+                      display_name: "S390X",
+                    },
+                  ]}
+                  selectedArchitecture={searchParams.get("architecture") || ""}
+                  setSelectedArchitecture={(item: string) => {
+                    if (item) {
+                      searchParams.set("architecture", item);
+                    } else {
+                      searchParams.delete("architecture");
+                    }
+
+                    searchParams.delete("page");
+                    setSearchParams(searchParams);
+                  }}
                   disabled={isFetching}
                   showFeatured={true}
                   order={[
diff --git a/yarn.lock b/yarn.lock
index 85f1dd80bb..d4d418d3fd 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1089,10 +1089,10 @@
     react-table "7.8.0"
     react-useportal "1.0.18"
 
-"@canonical/store-components@0.45.0":
-  version "0.45.0"
-  resolved "https://registry.yarnpkg.com/@canonical/store-components/-/store-components-0.45.0.tgz#70da0c14fc373cd41146ef5b3e011b1b1e08d9a4"
-  integrity sha512-x9nyYG0qjcWUtPDISaS0Bxvjr1fbkxXq5fUOXjoUG36TMXOhennoA84k8WI2/MwF6gBD6gwBCVIPWIXJHvTxqw==
+"@canonical/store-components@0.46.0":
+  version "0.46.0"
+  resolved "https://registry.yarnpkg.com/@canonical/store-components/-/store-components-0.46.0.tgz#26a3f510678e2bd6b1b4167b5275a019e62e44a0"
+  integrity sha512-BdRGfLq+iTxgHkdECFWwNeR9qUzEPRPVD8jnI0gLcKTdoAO6pKg4Hck5XglOrXkl1d3o9El7Co+3/GWbqOTCTg==
   dependencies:
     "@canonical/react-components" "0.47.1"
     "@types/jest" "27.5.2"