Fix locals packages list

.changeset/all-pandas-hide.md

@@ -0,0 +1,5 @@
+---
+"landscape-ui": patch
+---
+
+Sort the local repositories packages list so it stays consistent

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();
   });
 });

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 paginated data", 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();
   });
 });

src/features/local-repositories/components/LocalRepositoryPackagesList/LocalRepositoryPackagesList.tsx

@@ -13,20 +13,26 @@
   packages,
   header = "Package name",
 }) => {
   const [currentPage, setCurrentPage] = useState(1);
   const pageSize = 10;
 
-  const formattedPackages: LocalPackage[] = packages.map((name) => ({ name }));
+  const formattedPackages = useMemo<LocalPackage[]>(
+    () =>
+      packages
+        .map((name) => ({ name }))
+        .toSorted((a, b) => a.name.localeCompare(b.name)),
+    [packages],
+  );
   const pagedPackages = useMemo(
     () =>
       formattedPackages.slice(
         (currentPage - 1) * pageSize,
         currentPage * pageSize,
       ),
     [formattedPackages, currentPage, pageSize],
   );
 
   const columns = useMemo<Column<LocalPackage>[]>(
     () => [
       {
         Header: header,
@@ -37,30 +43,30 @@
           row: {
             original: { name },
           },
         }: CellProps<LocalPackage>) => name,
       },
     ],
     [header],
   );
 
   const maxPage = Math.ceil(formattedPackages.length / pageSize);
 
   return (
     <>
       <ResponsiveTable
         columns={columns}
         data={pagedPackages}
         emptyMsg={"No packages associated with this local repository."}
         minWidth={320}
       />
       <ModalTablePagination
         current={currentPage}
         max={maxPage}
         onPrev={() => {
           setCurrentPage((p) => Math.max(1, p - 1));
         }}
         onNext={() => {
           setCurrentPage((p) => Math.min(maxPage, p + 1));
         }}
       />
     </>

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();
   });
 });

src/features/overview/components/DonutChart/DonutChart.test.tsx

@@ -136,29 +136,17 @@ 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);
   });
 
   it("uses dark-mode default colors when dark mode is active", () => {
     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,19 +287,15 @@ 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",
     );
   });
 
   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);
   });
 });

src/features/saved-searches/components/SavedSearchList/SavedSearchList.tsx

@@ -28,38 +28,38 @@
   activeIndex = null,
   itemIdPrefix,
 }) => {
   const { setSidePanelContent } = useSidePanel();
   const isLargeScreen = useMediaQuery(`(min-width: ${BREAKPOINT_PX["lg"]}px)`);
 
   // aria-activedescendant doesn't move DOM focus, so scroll the active item ourselves.
   useEffect(() => {
     if (activeIndex === null || !itemIdPrefix) {
       return;
     }
     const activeItem = document.getElementById(
       `${itemIdPrefix}-${activeIndex}`,
     );
     activeItem?.scrollIntoView({ block: "nearest" });
   }, [activeIndex, itemIdPrefix]);
 
   if (!savedSearches.length) {
     return null;
   }
 
   const handleManageSavedSearches = () => {
     onManageSearches();
     setSidePanelContent(
       "Manage saved searches",
       <Suspense fallback={<LoadingState />}>
         <ManageSavedSearchesSidePanel />
       </Suspense>,
       SIDEPANEL_SIZE,
     );
   };
 
   return (
     <div className={classes.container}>
       <div className={classes.header}>
         <p className="p-text--small-caps u-text--muted p-text--small">
           Saved searches
         </p>
@@ -73,58 +73,56 @@
         </Button>
       </div>
       <ul
         className={classNames(
           "p-list--divided u-no-margin--bottom",
           classes.list,
         )}
       >
         {savedSearches.map((savedSearch, index) => (
           <li key={savedSearch.name}>
             <div
               className={classNames(classes.listItem, {
                 [classes.activeItem]: index === activeIndex,
               })}
             >
               <Button
                 type="button"
                 appearance="base"
-                id={
-                  itemIdPrefix ? `${itemIdPrefix}-${index}` : undefined
-                }
+                id={itemIdPrefix ? `${itemIdPrefix}-${index}` : undefined}
                 aria-selected={index === activeIndex || undefined}
                 className={classes.search}
                 onClick={() => {
                   onSavedSearchClick(savedSearch);
                 }}
               >
                 <Row className={classes.row}>
                   <Col size={4}>
                     <Tooltip
                       message={savedSearch.title}
                       positionElementClassName={classes.truncated}
                     >
                       <span>{savedSearch.title}</span>
                     </Tooltip>
                   </Col>
                   <Col
                     size={8}
                     className={classNames(
                       !isLargeScreen && classes.searchQuery,
                     )}
                   >
                     <Tooltip
                       message={savedSearch.search}
                       positionElementClassName={classes.truncated}
                     >
                       <code>{savedSearch.search}</code>
                     </Tooltip>
                   </Col>
                 </Row>
               </Button>
               <div className={classes.actions}>
                 <SavedSearchActions
                   savedSearch={savedSearch}
                   onSavedSearchRemove={onSavedSearchRemove}
                 />
               </div>
             </div>

src/features/saved-searches/components/SearchBoxWithSavedSearches/SearchBoxWithSavedSearches.tsx

@@ -2,7 +2,7 @@
 import usePageParams from "@/hooks/usePageParams";
 import { Form, SearchBox } from "@canonical/react-components";
 import classNames from "classnames";
 import type { FC, FocusEvent, KeyboardEvent } from "react";
 import { useEffect, useId, useMemo, useRef, useState } from "react";
 import { useOnClickOutside } from "usehooks-ts";
 import { useGetSavedSearches } from "../../api";
@@ -30,36 +30,36 @@
   onChange,
 }) => {
   const { query, setPageParams } = usePageParams();
   const [inputText, setInputText] = useState(query);
   const [showDropdown, setShowDropdown] = useState(false);
 
   const { savedSearches, isLoadingSavedSearches } = useGetSavedSearches();
 
   const containerRef = useRef<HTMLDivElement>(null);
   const chipsContainerRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLInputElement>(null);
   const suppressFocusOpenRef = useRef(false);
   const panelId = useId();
   const itemIdPrefix = `${panelId}-item`;
   const [activeIndex, setActiveIndex] = useState<number | null>(null);
 
   const closeDropdown = () => {
     setShowDropdown(false);
     setActiveIndex(null);
   };
 
   const handleDropdownClose = (event: MouseEvent | TouchEvent | FocusEvent) => {
     if (isInsideModalPortal(event.target as Node)) {
       return;
     }
     closeDropdown();
   };
 
   useOnClickOutside(containerRef, handleDropdownClose);
 
   const handleContainerBlur = (event: FocusEvent<HTMLDivElement>) => {
     const next = event.relatedTarget as Node | null;
     if (next && containerRef.current?.contains(next)) {
       return;
     }
     if (next && isInsideModalPortal(next)) {
@@ -69,221 +69,218 @@
   };
 
   const handleContainerKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
     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();
       }
     }
   };
 
   useEffect(() => {
     setInputText(query);
   }, [query]);
 
   const filteredSearches = useMemo(
     () =>
       getFilteredSavedSearches({
         inputText,
         savedSearches,
         search: query,
       }),
     [savedSearches, inputText, query],
   );
 
   // Clamp during render so a removed saved search doesn't leave a stale highlight.
   const effectiveActiveIndex =
     activeIndex !== null && activeIndex < filteredSearches.length
       ? activeIndex
       : null;
 
   const handleSearch = () => {
     const nextQuery = inputText.trim();
 
     const searches = getFilteredSavedSearches({
       inputText: "",
       savedSearches,
       search: query,
     });
 
     const prefix = searches.some(
       ({ name }) => name.toLowerCase() === nextQuery.toLowerCase(),
     )
       ? "search:"
       : "";
 
     setPageParams({ query: `${prefix}${nextQuery}` });
     onChange?.();
   };
 
   const handleSavedSearchClick = (savedSearch: SavedSearch) => {
     setPageParams({ query: `search:${savedSearch.name}` });
     onChange?.();
   };
 
   const handleKeysOnSearchBox = (event: KeyboardEvent<HTMLInputElement>) => {
     const { key } = event;
 
     if (showDropdown) {
       if (key === "Enter") {
         const highlighted =
           effectiveActiveIndex !== null
             ? filteredSearches[effectiveActiveIndex]
             : undefined;
         if (highlighted) {
           handleSavedSearchClick(highlighted);
         } else {
           handleSearch();
         }
       }
     } else if (key === "Enter") {
       setShowDropdown(true);
     }
   };
 
   const handleArrowKeysOnSearchBox = (
     event: KeyboardEvent<HTMLInputElement>,
   ) => {
     const itemCount = filteredSearches.length;
 
     if (event.key === "ArrowDown") {
       if (!showDropdown) {
         setShowDropdown(true);
         return;
       }
       if (itemCount === 0) {
         return;
       }
       event.preventDefault();
       setActiveIndex((current) => {
         if (current === null) {
           return 0;
         }
         return Math.min(current + 1, itemCount - 1);
       });
     } else if (event.key === "ArrowUp") {
       if (!showDropdown || itemCount === 0) {
         return;
       }
       event.preventDefault();
       setActiveIndex((current) => {
         if (current === null) {
           return itemCount - 1;
         }
         return Math.max(current - 1, 0);
       });
     } else if (event.key === "Home" && showDropdown && itemCount > 0) {
       event.preventDefault();
       setActiveIndex(0);
     } else if (event.key === "End" && showDropdown && itemCount > 0) {
       event.preventDefault();
       setActiveIndex(itemCount - 1);
     }
   };
 
   return (
     <div
       className="p-search-and-filter"
       ref={containerRef}
       onBlur={handleContainerBlur}
       onKeyDown={handleContainerKeyDown}
     >
       <div
         className={classNames(
           "p-search-and-filter__search-container",
           classes.searchContainer,
         )}
         aria-expanded={showDropdown}
         ref={chipsContainerRef}
         onClick={() => {
           setShowDropdown(true);
         }}
       >
         <Form
           onSubmit={(event) => {
             event.preventDefault();
             handleSearch();
           }}
           className={classNames("p-search-and-filter__box", classes.form)}
         >
           <div className={classes.searchBoxContainer}>
             <SearchBox
               ref={inputRef}
               externallyControlled
               shouldRefocusAfterReset
               autocomplete="off"
               className={classes.input}
               value={inputText}
               aria-expanded={showDropdown}
               aria-controls={showDropdown ? panelId : undefined}
               aria-activedescendant={
                 showDropdown && effectiveActiveIndex !== null
                   ? `${itemIdPrefix}-${effectiveActiveIndex}`
                   : undefined
               }
               onChange={(inputValue) => {
                 setInputText(inputValue);
                 setActiveIndex(null);
               }}
               onClear={() => {
                 setInputText("");
                 setActiveIndex(null);
                 setPageParams({ query: "" });
                 onChange?.();
               }}
               onSearch={handleSearch}
               onClick={() => {
                 setShowDropdown(true);
               }}
               onFocus={() => {
                 if (suppressFocusOpenRef.current) {
                   suppressFocusOpenRef.current = false;
                   return;
                 }
                 setShowDropdown(true);
               }}
               onKeyDown={handleArrowKeysOnSearchBox}
               onKeyUp={handleKeysOnSearchBox}
             />
           </div>
         </Form>
         <SearchInfoBox onHelpButtonClick={onHelpButtonClick} />
       </div>
       {showDropdown && isLoadingSavedSearches && <LoadingState />}
       {showDropdown && !isLoadingSavedSearches && (
         <div
           id={panelId}
           role="group"
           aria-label={SAVED_SEARCHES_PANEL_LABEL}
           className="p-search-and-filter__panel"
         >
           <SearchPrompt
             onSearchSave={() => {
               setInputText("");
             }}
             search={inputText.trim()}
           />
 
           <SavedSearchList
             onSavedSearchClick={handleSavedSearchClick}
             onManageSearches={closeDropdown}
             onSavedSearchRemove={() => {
               setShowDropdown(true);
             }}
             savedSearches={filteredSearches}
             activeIndex={effectiveActiveIndex}
             itemIdPrefix={itemIdPrefix}
           />
           {filteredSearches.length > 0 && (
             <p
               className={classNames(
                 "p-text--small u-text--muted u-no-margin--bottom",
                 classes.keyboardHint,
               )}
             >
               Use <kbd>↑</kbd> <kbd>↓</kbd> to navigate, <kbd>Enter</kbd> to

src/tests/mocks/localRepositories.ts

@@ -30,3 +30,7 @@ export const paginatedPackages = Array.from(
   { length: 25 },
   (_, i) => `package-${i + 1}`,
 );
+
+export const sortedPackages = paginatedPackages.toSorted((a, b) =>
+  a.localeCompare(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",