From 76b510c01910c816b354d28a10babc76b8e730f0 Mon Sep 17 00:00:00 2001
From: Gabe Esquivel Gaghi <gabe.gaghi@canonical.com>
Date: Tue, 12 May 2026 11:03:22 +0200
Subject: [PATCH 1/4] sort locals packages for consistent ordering

---
 .changeset/all-pandas-hide.md                                | 5 +++++
 .../LocalRepositoryPackagesList.tsx                          | 4 +++-
 2 files changed, 8 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/all-pandas-hide.md

diff --git a/.changeset/all-pandas-hide.md b/.changeset/all-pandas-hide.md
new file mode 100644
index 0000000000..657654830b
--- /dev/null
+++ b/.changeset/all-pandas-hide.md
@@ -0,0 +1,5 @@
+---
+"landscape-ui": patch
+---
+
+Sort the local repositories packages list so it stays consistent
diff --git a/src/features/local-repositories/components/LocalRepositoryPackagesList/LocalRepositoryPackagesList.tsx b/src/features/local-repositories/components/LocalRepositoryPackagesList/LocalRepositoryPackagesList.tsx
index 08328ee24f..ec898467c0 100644
--- a/src/features/local-repositories/components/LocalRepositoryPackagesList/LocalRepositoryPackagesList.tsx
+++ b/src/features/local-repositories/components/LocalRepositoryPackagesList/LocalRepositoryPackagesList.tsx
@@ -16,7 +16,9 @@ const LocalRepositoryPackagesList: FC<LocalRepositoryPackagesListProps> = ({
   const [currentPage, setCurrentPage] = useState(1);
   const pageSize = 10;
 
-  const formattedPackages: LocalPackage[] = packages.map((name) => ({ name }));
+  const formattedPackages: LocalPackage[] = packages
+    .map((name) => ({ name }))
+    .sort((a, b) => a.name.localeCompare(b.name));
   const pagedPackages = useMemo(
     () =>
       formattedPackages.slice(

From c6b109d452a9b80c9732a6224a81cf5c3ca8887d Mon Sep 17 00:00:00 2001
From: Gabe Esquivel Gaghi <gabe.gaghi@canonical.com>
Date: Tue, 12 May 2026 11:03:33 +0200
Subject: [PATCH 2/4] run prettier

---
 .../components/DonutChart/DonutChart.test.tsx | 54 +++++--------------
 .../SavedSearchList/SavedSearchList.tsx       |  4 +-
 .../SearchBoxWithSavedSearches.tsx            |  5 +-
 3 files changed, 16 insertions(+), 47 deletions(-)

diff --git a/src/features/overview/components/DonutChart/DonutChart.test.tsx b/src/features/overview/components/DonutChart/DonutChart.test.tsx
index 6028c50c13..bf361e9e3d 100644
--- a/src/features/overview/components/DonutChart/DonutChart.test.tsx
+++ b/src/features/overview/components/DonutChart/DonutChart.test.tsx
@@ -136,14 +136,8 @@ describe("DonutChart", () => {
   it("uses light-mode default colors by default", () => {
     const { container } = renderChart();
     const arcs = getArcs(container);
-    expect(arcs[0]).toHaveAttribute(
-      "stroke",
-      colorMap.green.light.default,
-    );
-    expect(arcs[1]).toHaveAttribute(
-      "stroke",
-      colorMap.orange.light.default,
-    );
+    expect(arcs[0]).toHaveAttribute("stroke", colorMap.green.light.default);
+    expect(arcs[1]).toHaveAttribute("stroke", colorMap.orange.light.default);
     expect(arcs[2]).toHaveAttribute("stroke", colorMap.red.light.default);
   });
 
@@ -151,14 +145,8 @@ describe("DonutChart", () => {
     localStorage.setItem("_landscape_dark_theme", "true");
     const { container } = renderChart();
     const arcs = getArcs(container);
-    expect(arcs[0]).toHaveAttribute(
-      "stroke",
-      colorMap.green.dark.default,
-    );
-    expect(arcs[2]).toHaveAttribute(
-      "stroke",
-      colorMap.red.dark.default,
-    );
+    expect(arcs[0]).toHaveAttribute("stroke", colorMap.green.dark.default);
+    expect(arcs[2]).toHaveAttribute("stroke", colorMap.red.dark.default);
   });
 
   it("keeps default colors on every ring when one is hovered (dim via CSS opacity, not palette swap)", async () => {
@@ -168,14 +156,8 @@ describe("DonutChart", () => {
     await user.hover(getRingGroup(0));
 
     const arcs = getArcs(container);
-    expect(arcs[0]).toHaveAttribute(
-      "stroke",
-      colorMap.green.light.default,
-    );
-    expect(arcs[1]).toHaveAttribute(
-      "stroke",
-      colorMap.orange.light.default,
-    );
+    expect(arcs[0]).toHaveAttribute("stroke", colorMap.green.light.default);
+    expect(arcs[1]).toHaveAttribute("stroke", colorMap.orange.light.default);
     expect(arcs[2]).toHaveAttribute("stroke", colorMap.red.light.default);
   });
 
@@ -185,9 +167,7 @@ describe("DonutChart", () => {
 
     await user.hover(getRingGroup(0));
 
-    expect(getRingGroup(0).getAttribute("class") ?? "").toMatch(
-      /ring--active/,
-    );
+    expect(getRingGroup(0).getAttribute("class") ?? "").toMatch(/ring--active/);
     expect(getRingGroup(0).getAttribute("class") ?? "").not.toMatch(
       /ring--inactive/,
     );
@@ -211,9 +191,7 @@ describe("DonutChart", () => {
     expect(getRingGroup(1).getAttribute("class") ?? "").toMatch(
       /ring--inactive/,
     );
-    expect(getRingGroup(2).getAttribute("class") ?? "").toMatch(
-      /ring--active/,
-    );
+    expect(getRingGroup(2).getAttribute("class") ?? "").toMatch(/ring--active/);
   });
 
   it("resets state when the inner container loses pointer", async () => {
@@ -228,7 +206,9 @@ describe("DonutChart", () => {
     ) as HTMLElement;
     fireEvent.mouseLeave(inner);
 
-    expect(getRingGroup(0).getAttribute("class") ?? "").not.toMatch(/ring--active/);
+    expect(getRingGroup(0).getAttribute("class") ?? "").not.toMatch(
+      /ring--active/,
+    );
   });
 
   it("activates a ring on keyboard focus and clears on blur", () => {
@@ -291,9 +271,7 @@ describe("DonutChart", () => {
       ],
     });
 
-    expect(screen.getByTestId("donut-center-number").textContent).toBe(
-      "12.3K",
-    );
+    expect(screen.getByTestId("donut-center-number").textContent).toBe("12.3K");
   });
 
   it("formats compactly when a large ring is hovered", async () => {
@@ -309,9 +287,7 @@ describe("DonutChart", () => {
 
     await user.hover(getRingGroup(0));
 
-    expect(screen.getByTestId("donut-center-number").textContent).toBe(
-      "87.4K",
-    );
+    expect(screen.getByTestId("donut-center-number").textContent).toBe("87.4K");
     expect(screen.getByTestId("donut-center-sublabel").textContent).toBe(
       "of 100K",
     );
@@ -319,9 +295,7 @@ describe("DonutChart", () => {
 
   it("renders a track circle behind each ring with the track class", () => {
     const { container } = renderChart();
-    const tracks = container.querySelectorAll(
-      `circle[class*='track']`,
-    );
+    const tracks = container.querySelectorAll(`circle[class*='track']`);
     expect(tracks).toHaveLength(3);
   });
 });
diff --git a/src/features/saved-searches/components/SavedSearchList/SavedSearchList.tsx b/src/features/saved-searches/components/SavedSearchList/SavedSearchList.tsx
index ffd496fb0d..6ccc3f91f4 100644
--- a/src/features/saved-searches/components/SavedSearchList/SavedSearchList.tsx
+++ b/src/features/saved-searches/components/SavedSearchList/SavedSearchList.tsx
@@ -88,9 +88,7 @@ const SavedSearchList: FC<SavedSearchListProps> = ({
               <Button
                 type="button"
                 appearance="base"
-                id={
-                  itemIdPrefix ? `${itemIdPrefix}-${index}` : undefined
-                }
+                id={itemIdPrefix ? `${itemIdPrefix}-${index}` : undefined}
                 aria-selected={index === activeIndex || undefined}
                 className={classes.search}
                 onClick={() => {
diff --git a/src/features/saved-searches/components/SearchBoxWithSavedSearches/SearchBoxWithSavedSearches.tsx b/src/features/saved-searches/components/SearchBoxWithSavedSearches/SearchBoxWithSavedSearches.tsx
index 24af8604ea..0621cfc6be 100644
--- a/src/features/saved-searches/components/SearchBoxWithSavedSearches/SearchBoxWithSavedSearches.tsx
+++ b/src/features/saved-searches/components/SearchBoxWithSavedSearches/SearchBoxWithSavedSearches.tsx
@@ -72,10 +72,7 @@ const SearchBoxWithSavedSearches: FC<SearchBoxWithSavedSearchesProps> = ({
     if (event.key === "Escape" && showDropdown) {
       event.stopPropagation();
       closeDropdown();
-      if (
-        inputRef.current &&
-        document.activeElement !== inputRef.current
-      ) {
+      if (inputRef.current && document.activeElement !== inputRef.current) {
         suppressFocusOpenRef.current = true;
         inputRef.current.focus();
       }

From 3773d011a005e43050c6d5ad82048e551a2ced8f Mon Sep 17 00:00:00 2001
From: Gabe Esquivel Gaghi <gabe.gaghi@canonical.com>
Date: Thu, 14 May 2026 11:37:41 +0200
Subject: [PATCH 3/4] fix broken tests

---
 .../ValidationResult.test.tsx                 |  8 +--
 .../LocalRepositoryPackagesList.test.tsx      | 54 +++++++++----------
 .../LocalRepositoryPackagesList.tsx           | 10 ++--
 .../ViewRepositoryPackagesTab.test.tsx        |  7 ++-
 src/tests/mocks/localRepositories.ts          |  4 ++
 src/tests/mocks/operations.ts                 |  4 +-
 6 files changed, 42 insertions(+), 45 deletions(-)

diff --git a/src/features/local-repositories/components/ImportRepositoryPackagesSidePanel/ValidationResult/ValidationResult.test.tsx b/src/features/local-repositories/components/ImportRepositoryPackagesSidePanel/ValidationResult/ValidationResult.test.tsx
index ad819ded92..cd4ae1705a 100644
--- a/src/features/local-repositories/components/ImportRepositoryPackagesSidePanel/ValidationResult/ValidationResult.test.tsx
+++ b/src/features/local-repositories/components/ImportRepositoryPackagesSidePanel/ValidationResult/ValidationResult.test.tsx
@@ -85,9 +85,7 @@ describe("ValidationResult", () => {
     ).toBeInTheDocument();
 
     expect(screen.getByText(/packages to import/i)).toBeInTheDocument();
-    expect(
-      screen.getByText("python3-snap-http_1.4.0-0ubuntu0_all"),
-    ).toBeInTheDocument();
+    expect(screen.getByText("package1-0.2.1")).toBeInTheDocument();
     expect(screen.getByText(/page 1 of 10/i)).toBeInTheDocument();
   });
 
@@ -97,9 +95,7 @@ describe("ValidationResult", () => {
     );
 
     expect(screen.getByText(/packages to import/i)).toBeInTheDocument();
-    expect(
-      screen.getByText("python3-snap-http_1.4.0-0ubuntu0_all"),
-    ).toBeInTheDocument();
+    expect(screen.getByText("package1-0.2.1")).toBeInTheDocument();
     expect(screen.getByText("package2-1.0.0")).toBeInTheDocument();
   });
 });
diff --git a/src/features/local-repositories/components/LocalRepositoryPackagesList/LocalRepositoryPackagesList.test.tsx b/src/features/local-repositories/components/LocalRepositoryPackagesList/LocalRepositoryPackagesList.test.tsx
index 98506e10c0..5c5b1e9888 100644
--- a/src/features/local-repositories/components/LocalRepositoryPackagesList/LocalRepositoryPackagesList.test.tsx
+++ b/src/features/local-repositories/components/LocalRepositoryPackagesList/LocalRepositoryPackagesList.test.tsx
@@ -1,27 +1,34 @@
 import { renderWithProviders } from "@/tests/render";
 import { describe, it, expect } from "vitest";
 import LocalRepositoryPackagesList from "./LocalRepositoryPackagesList";
-import { paginatedPackages } from "@/tests/mocks/localRepositories";
+import {
+  paginatedPackages,
+  sortedPackages,
+} from "@/tests/mocks/localRepositories";
 import { screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
-const singlePagePackages = paginatedPackages.slice(0, 10);
-
 describe("LocalRepositoryPackagesList", () => {
-  it("renders table with default column header", async () => {
+  it("renders table with default column header and paginateddata", async () => {
     renderWithProviders(
-      <LocalRepositoryPackagesList packages={singlePagePackages} />,
+      <LocalRepositoryPackagesList packages={paginatedPackages} />,
     );
 
     expect(
       await screen.findByRole("columnheader", { name: "Package name" }),
     ).toBeInTheDocument();
+
+    for (const pkg of sortedPackages.slice(0, 10)) {
+      expect(await screen.findByText(pkg)).toBeInTheDocument();
+    }
+
+    expect(await screen.findByText(/page 1 of 3/i)).toBeInTheDocument();
   });
 
   it("renders custom header when provided", async () => {
     renderWithProviders(
       <LocalRepositoryPackagesList
-        packages={singlePagePackages}
+        packages={paginatedPackages}
         header="Packages to import"
       />,
     );
@@ -31,15 +38,6 @@ describe("LocalRepositoryPackagesList", () => {
     ).toBeInTheDocument();
   });
 
-  it("renders package names in table rows", async () => {
-    renderWithProviders(
-      <LocalRepositoryPackagesList packages={singlePagePackages} />,
-    );
-
-    expect(await screen.findByText("package-1")).toBeInTheDocument();
-    expect(screen.getByText("package-2")).toBeInTheDocument();
-  });
-
   it("renders empty message when no packages", async () => {
     renderWithProviders(<LocalRepositoryPackagesList packages={[]} />);
 
@@ -48,28 +46,22 @@ describe("LocalRepositoryPackagesList", () => {
     ).toBeInTheDocument();
   });
 
-  it("renders pagination info if more than 1 page", async () => {
-    renderWithProviders(
-      <LocalRepositoryPackagesList packages={paginatedPackages} />,
-    );
-
-    expect(await screen.findByText(/page 1 of 3/i)).toBeInTheDocument();
-  });
-
   it("navigates to next page on click", async () => {
     const user = userEvent.setup();
     renderWithProviders(
       <LocalRepositoryPackagesList packages={paginatedPackages} />,
     );
 
-    await screen.findByText("package-1");
-    expect(screen.queryByText("package-11")).not.toBeInTheDocument();
+    assert(sortedPackages[0]);
+    assert(sortedPackages[10]);
+    await screen.findByText(sortedPackages[0]);
+    expect(screen.queryByText(sortedPackages[10])).not.toBeInTheDocument();
 
     const nextButton = screen.getByRole("button", { name: /next/i });
     await user.click(nextButton);
 
-    expect(screen.getByText("package-11")).toBeInTheDocument();
-    expect(screen.queryByText("package-1")).not.toBeInTheDocument();
+    expect(screen.getByText(sortedPackages[10])).toBeInTheDocument();
+    expect(screen.queryByText(sortedPackages[0])).not.toBeInTheDocument();
   });
 
   it("navigates to previous page on click", async () => {
@@ -78,16 +70,18 @@ describe("LocalRepositoryPackagesList", () => {
       <LocalRepositoryPackagesList packages={paginatedPackages} />,
     );
 
-    await screen.findByText("package-1");
+    assert(sortedPackages[0]);
+    assert(sortedPackages[10]);
+    await screen.findByText(sortedPackages[0]);
 
     const nextButton = screen.getByRole("button", { name: /next/i });
     await user.click(nextButton);
 
-    expect(screen.getByText("package-11")).toBeInTheDocument();
+    expect(screen.getByText(sortedPackages[10])).toBeInTheDocument();
 
     const prevButton = screen.getByRole("button", { name: /previous/i });
     await user.click(prevButton);
 
-    expect(screen.getByText("package-1")).toBeInTheDocument();
+    expect(screen.getByText(sortedPackages[0])).toBeInTheDocument();
   });
 });
diff --git a/src/features/local-repositories/components/LocalRepositoryPackagesList/LocalRepositoryPackagesList.tsx b/src/features/local-repositories/components/LocalRepositoryPackagesList/LocalRepositoryPackagesList.tsx
index ec898467c0..a4c25604aa 100644
--- a/src/features/local-repositories/components/LocalRepositoryPackagesList/LocalRepositoryPackagesList.tsx
+++ b/src/features/local-repositories/components/LocalRepositoryPackagesList/LocalRepositoryPackagesList.tsx
@@ -16,9 +16,13 @@ const LocalRepositoryPackagesList: FC<LocalRepositoryPackagesListProps> = ({
   const [currentPage, setCurrentPage] = useState(1);
   const pageSize = 10;
 
-  const formattedPackages: LocalPackage[] = packages
-    .map((name) => ({ name }))
-    .sort((a, b) => a.name.localeCompare(b.name));
+  const formattedPackages = useMemo<LocalPackage[]>(
+    () =>
+      packages
+        .map((name) => ({ name }))
+        .sort((a, b) => a.name.localeCompare(b.name)),
+    [packages],
+  );
   const pagedPackages = useMemo(
     () =>
       formattedPackages.slice(
diff --git a/src/features/local-repositories/components/ViewLocalRepositorySidePanel/components/ViewRepositoryPackagesTab/ViewRepositoryPackagesTab.test.tsx b/src/features/local-repositories/components/ViewLocalRepositorySidePanel/components/ViewRepositoryPackagesTab/ViewRepositoryPackagesTab.test.tsx
index 607a536cd8..20b0993b05 100644
--- a/src/features/local-repositories/components/ViewLocalRepositorySidePanel/components/ViewRepositoryPackagesTab/ViewRepositoryPackagesTab.test.tsx
+++ b/src/features/local-repositories/components/ViewLocalRepositorySidePanel/components/ViewRepositoryPackagesTab/ViewRepositoryPackagesTab.test.tsx
@@ -2,7 +2,7 @@ import { renderWithProviders } from "@/tests/render";
 import { describe, it, expect } from "vitest";
 import { screen } from "@testing-library/react";
 import ViewRepositoryPackagesTab from "./ViewRepositoryPackagesTab";
-import { repositories } from "@/tests/mocks/localRepositories";
+import { repositories, sortedPackages } from "@/tests/mocks/localRepositories";
 
 describe("ViewRepositoryPackagesTab", () => {
   it("renders table with correct header after loading", async () => {
@@ -16,8 +16,7 @@ describe("ViewRepositoryPackagesTab", () => {
       await screen.findByRole("columnheader", { name: "Package name" }),
     ).toBeInTheDocument();
 
-    expect(await screen.findByText("package-1")).toBeInTheDocument();
-    expect(screen.getByText("package-2")).toBeInTheDocument();
-    expect(screen.getByText("package-3")).toBeInTheDocument();
+    assert(sortedPackages[0]);
+    expect(await screen.findByText(sortedPackages[0])).toBeInTheDocument();
   });
 });
diff --git a/src/tests/mocks/localRepositories.ts b/src/tests/mocks/localRepositories.ts
index da24fb28a0..addd23fe8d 100644
--- a/src/tests/mocks/localRepositories.ts
+++ b/src/tests/mocks/localRepositories.ts
@@ -30,3 +30,7 @@ export const paginatedPackages = Array.from(
   { length: 25 },
   (_, i) => `package-${i + 1}`,
 );
+
+export const sortedPackages = paginatedPackages.sort((a, b) =>
+  a.localeCompare(b),
+);
diff --git a/src/tests/mocks/operations.ts b/src/tests/mocks/operations.ts
index ace1379408..bd3cda8412 100644
--- a/src/tests/mocks/operations.ts
+++ b/src/tests/mocks/operations.ts
@@ -32,7 +32,7 @@ export const succeededOperation: PackagesValidationOperation = {
     "@type":
       "type.googleapis.com/canonical.landscape.debarchive.v1beta1.TaskResponse",
     output:
-      "Would add: python3-snap-http_1.4.0-0ubuntu0_all\nWould add: package2-1.0.0\nTotal packages that would be added: 2\n",
+      "Would add: package1-0.2.1\nWould add: package2-1.0.0\nTotal packages that would be added: 2\n",
   },
 };
 
@@ -122,7 +122,7 @@ export const overCountOperation: PackagesValidationOperation = {
     "@type":
       "type.googleapis.com/canonical.landscape.debarchive.v1beta1.TaskResponse",
     output: [
-      "Would add: python3-snap-http_1.4.0-0ubuntu0_all",
+      "Would add: package1-0.2.1",
       "Would add: package2-1.0.0",
       "Would add: package3-2.1.0",
       "Would add: package4-0.9.1",

From e50b0964ff9f52c9647565b313970c5fea0b39dc Mon Sep 17 00:00:00 2001
From: Gabe Esquivel Gaghi <gabe.gaghi@canonical.com>
Date: Thu, 14 May 2026 12:18:40 +0200
Subject: [PATCH 4/4] address feedback

---
 .../LocalRepositoryPackagesList.test.tsx                        | 2 +-
 .../LocalRepositoryPackagesList/LocalRepositoryPackagesList.tsx | 2 +-
 src/tests/mocks/localRepositories.ts                            | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/features/local-repositories/components/LocalRepositoryPackagesList/LocalRepositoryPackagesList.test.tsx b/src/features/local-repositories/components/LocalRepositoryPackagesList/LocalRepositoryPackagesList.test.tsx
index 5c5b1e9888..bbd2b022fb 100644
--- a/src/features/local-repositories/components/LocalRepositoryPackagesList/LocalRepositoryPackagesList.test.tsx
+++ b/src/features/local-repositories/components/LocalRepositoryPackagesList/LocalRepositoryPackagesList.test.tsx
@@ -9,7 +9,7 @@ import { screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
 describe("LocalRepositoryPackagesList", () => {
-  it("renders table with default column header and paginateddata", async () => {
+  it("renders table with default column header and paginated data", async () => {
     renderWithProviders(
       <LocalRepositoryPackagesList packages={paginatedPackages} />,
     );
diff --git a/src/features/local-repositories/components/LocalRepositoryPackagesList/LocalRepositoryPackagesList.tsx b/src/features/local-repositories/components/LocalRepositoryPackagesList/LocalRepositoryPackagesList.tsx
index a4c25604aa..a497dafa25 100644
--- a/src/features/local-repositories/components/LocalRepositoryPackagesList/LocalRepositoryPackagesList.tsx
+++ b/src/features/local-repositories/components/LocalRepositoryPackagesList/LocalRepositoryPackagesList.tsx
@@ -20,7 +20,7 @@ const LocalRepositoryPackagesList: FC<LocalRepositoryPackagesListProps> = ({
     () =>
       packages
         .map((name) => ({ name }))
-        .sort((a, b) => a.name.localeCompare(b.name)),
+        .toSorted((a, b) => a.name.localeCompare(b.name)),
     [packages],
   );
   const pagedPackages = useMemo(
diff --git a/src/tests/mocks/localRepositories.ts b/src/tests/mocks/localRepositories.ts
index addd23fe8d..59686e9c04 100644
--- a/src/tests/mocks/localRepositories.ts
+++ b/src/tests/mocks/localRepositories.ts
@@ -31,6 +31,6 @@ export const paginatedPackages = Array.from(
   (_, i) => `package-${i + 1}`,
 );
 
-export const sortedPackages = paginatedPackages.sort((a, b) =>
+export const sortedPackages = paginatedPackages.toSorted((a, b) =>
   a.localeCompare(b),
 );