fix(settings): fix list spacing #5464 (#5470)

- Update the parsing logic to correctly split the values and remove any leading or trailing spaces

src/app/settings/views/Repositories/RepositoryForm/RepositoryForm.test.tsx

@@ -338,4 +338,52 @@ describe("RepositoryForm", () => {
     ).toBe(true);
     expect(actions.some((action) => action.type === "message/add")).toBe(true);
   });
+
+  it("correctly parses comma-separated distributions and components", async () => {
+    const store = mockStore(state);
+    render(
+      <Provider store={store}>
+        <MemoryRouter
+          initialEntries={[{ pathname: "/repositories/add", key: "testKey" }]}
+        >
+          <RepositoryForm type="repository" />
+        </MemoryRouter>
+      </Provider>
+    );
+
+    await userEvent.type(
+      screen.getByRole("textbox", { name: RepositoryFormLabels.Name }),
+      "name"
+    );
+    await userEvent.type(
+      screen.getByRole("textbox", { name: RepositoryFormLabels.URL }),
+      "http://www.website.com"
+    );
+    await userEvent.type(
+      screen.getByRole("textbox", { name: RepositoryFormLabels.Distributions }),
+      "focal, jammy, noble"
+    );
+    await userEvent.type(
+      screen.getByRole("textbox", { name: RepositoryFormLabels.Components }),
+      "main, universe, restricted"
+    );
+
+    await userEvent.click(
+      screen.getByRole("button", { name: "Save repository" })
+    );
+
+    const createAction = store
+      .getActions()
+      .find((action) => action.type === "packagerepository/create");
+    expect(createAction.payload.params.distributions).toEqual([
+      "focal",
+      "jammy",
+      "noble",
+    ]);
+    expect(createAction.payload.params.components).toEqual([
+      "main",
+      "universe",
+      "restricted",
+    ]);
+  });
 });

src/app/settings/views/Repositories/RepositoryForm/RepositoryForm.tsx

@@ -25,20 +25,30 @@ import type {
   PackageRepository,
 } from "@/app/store/packagerepository/types";
 import { getRepoDisplayName } from "@/app/store/packagerepository/utils";
+import { parseCommaSeparatedValues } from "@/app/utils";
 
 type Props = {
   repository?: PackageRepository | null;
   type: "ppa" | "repository";
 };
 
+const commaSeparated = Yup.string()
+  .transform((value) =>
+    value
+      .split(",")
+      .map((s: string) => s.trim())
+      .join(", ")
+  )
+  .matches(/^(?:[^,\s]+(?:,\s*[^,\s]+)*)?$/, "Must be comma-separated.");
+
 const RepositorySchema = Yup.object().shape({
   arches: Yup.array(),
-  components: Yup.string(),
+  components: commaSeparated,
   default: Yup.boolean().required(),
   disable_sources: Yup.boolean().required(),
   disabled_components: Yup.array(),
   disabled_pockets: Yup.array(),
-  distributions: Yup.string(),
+  distributions: commaSeparated,
   enabled: Yup.boolean().required(),
   key: Yup.string(),
   name: Yup.string().required("Name field required."),
@@ -150,12 +160,12 @@ export const RepositoryForm = ({ type, repository }: Props): JSX.Element => {
                 params.disabled_components = values.disabled_components;
                 params.disabled_pockets = values.disabled_pockets;
               } else {
-                params.components = values.components
-                  .split(" ,")
-                  .filter(Boolean);
-                params.distributions = values.distributions
-                  .split(" ,")
-                  .filter(Boolean);
+                params.components = parseCommaSeparatedValues(
+                  values.components
+                );
+                params.distributions = parseCommaSeparatedValues(
+                  values.distributions
+                );
                 params.enabled = values.enabled;
               }
 

src/app/utils/index.ts

@@ -35,3 +35,4 @@ export {
   timeSpanToSeconds,
   timeSpanToMinutes,
 } from "./timeSpan";
+export { parseCommaSeparatedValues } from "./parseCommaSeparatedValues";

src/app/utils/parseCommaSeparatedValues.test.ts

@@ -0,0 +1,39 @@
+import { parseCommaSeparatedValues } from "./parseCommaSeparatedValues";
+
+describe("parseCommaSeparatedValues", () => {
+  it("should correctly parse a single value with no spaces", () => {
+    expect(parseCommaSeparatedValues("value")).toEqual(["value"]);
+  });
+
+  it("should correctly parse multiple values with spaces", () => {
+    expect(parseCommaSeparatedValues("apple, banana, cherry")).toEqual([
+      "apple",
+      "banana",
+      "cherry",
+    ]);
+  });
+
+  it("should handle leading and trailing spaces", () => {
+    expect(parseCommaSeparatedValues("  apple, banana ,  cherry ")).toEqual([
+      "apple",
+      "banana",
+      "cherry",
+    ]);
+  });
+
+  it("should ignore empty strings between commas", () => {
+    expect(parseCommaSeparatedValues("apple,,banana, ,cherry")).toEqual([
+      "apple",
+      "banana",
+      "cherry",
+    ]);
+  });
+
+  it("should return an empty array if the input is only commas or spaces", () => {
+    expect(parseCommaSeparatedValues(" , , , ")).toEqual([]);
+  });
+
+  it("should return an empty array if the input is an empty string", () => {
+    expect(parseCommaSeparatedValues("")).toEqual([]);
+  });
+});

src/app/utils/parseCommaSeparatedValues.ts

@@ -0,0 +1,6 @@
+export const parseCommaSeparatedValues = (input: string): string[] => {
+  return input
+    .split(",")
+    .map((s) => s.trim())
+    .filter(Boolean);
+};