feature(web): redesign network connection form with improved UX

web/package.json

@@ -96,6 +96,7 @@
     "@patternfly/patternfly": "^6.4.0",
     "@patternfly/react-core": "^6.4.1",
     "@patternfly/react-table": "^6.4.1",
+    "@tanstack/react-form": "^1.28.4",
     "@tanstack/react-query": "^5.90.21",
     "axios": "^1.13.6",
     "fast-sort": "^3.4.1",

web/package/agama-web-ui.changes

@@ -1,3 +1,9 @@
+-------------------------------------------------------------------
+Tue Apr 14 15:40:28 UTC 2026 - David Diaz <dgonzalez@suse.com>
+
+- Redesign network connection form with improved user experience
+  (related to gh#agama-project/agama#3386 and bsc#1259067).
+
 -------------------------------------------------------------------
 Mon Apr 13 15:25:11 UTC 2026 - José Iván López González <jlopez@suse.com>
 

web/src/components/core/Interpolate.test.tsx

@@ -0,0 +1,190 @@
+/*
+ * Copyright (c) [2026] SUSE LLC
+ *
+ * All Rights Reserved.
+ *
+ * This program is free software; you can redistribute it and/or modify it
+ * under the terms of the GNU General Public License as published by the Free
+ * Software Foundation; either version 2 of the License, or (at your option)
+ * any later version.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License for
+ * more details.
+ *
+ * You should have received a copy of the GNU General Public License along
+ * with this program; if not, contact SUSE LLC.
+ *
+ * To contact SUSE LLC about this file by physical or electronic mail, you may
+ * find current contact information at www.suse.com.
+ */
+
+import React from "react";
+import { plainRender } from "~/test-utils";
+import Interpolate from "./Interpolate";
+
+describe("Interpolate", () => {
+  describe("with a printf placeholder", () => {
+    it("renders surrounding text for %s", () => {
+      const { container } = plainRender(
+        <Interpolate sentence="Go to %s page">{() => <strong>settings</strong>}</Interpolate>,
+      );
+      expect(container.textContent).toBe("Go to settings page");
+    });
+
+    it("renders surrounding text for %d", () => {
+      const { container } = plainRender(
+        <Interpolate sentence="There are %d issues">{() => <strong>3</strong>}</Interpolate>,
+      );
+      expect(container.textContent).toBe("There are 3 issues");
+    });
+
+    it("calls children with an empty string", () => {
+      const received: string[] = [];
+      plainRender(
+        <Interpolate sentence="Go to %s page">
+          {(text) => {
+            received.push(text);
+            return <strong>{text}</strong>;
+          }}
+        </Interpolate>,
+      );
+      expect(received).toEqual([""]);
+    });
+
+    it("works when the placeholder is at the start", () => {
+      const { container } = plainRender(
+        <Interpolate sentence="%s is at the start">{() => <strong>This</strong>}</Interpolate>,
+      );
+      expect(container.textContent).toBe("This is at the start");
+    });
+
+    it("works when the placeholder is at the end", () => {
+      const { container } = plainRender(
+        <Interpolate sentence="At the end: %s">{() => <strong>here</strong>}</Interpolate>,
+      );
+      expect(container.textContent).toBe("At the end: here");
+    });
+
+    it("works when the whole sentence is the placeholder", () => {
+      const { container } = plainRender(
+        <Interpolate sentence="%s">{() => <strong>everything</strong>}</Interpolate>,
+      );
+      expect(container.textContent).toBe("everything");
+    });
+
+    it("throws when multiple placeholders are present", () => {
+      expect(() =>
+        plainRender(
+          <Interpolate sentence="First %s and second %d">{() => <strong>X</strong>}</Interpolate>,
+        ),
+      ).toThrow("Interpolate: only one printf placeholder is supported.");
+    });
+  });
+
+  describe("with a [marker] placeholder", () => {
+    it("renders the surrounding text", () => {
+      const { container } = plainRender(
+        <Interpolate sentence="Go to [settings] page">
+          {(text) => <strong>{text}</strong>}
+        </Interpolate>,
+      );
+      expect(container.textContent).toBe("Go to settings page");
+    });
+
+    it("passes the extracted text to children", () => {
+      const { container } = plainRender(
+        <Interpolate sentence="Go to [settings] page">
+          {(text) => <strong>{text}</strong>}
+        </Interpolate>,
+      );
+      expect(container.querySelector("strong")).toHaveTextContent("settings");
+    });
+
+    it("works when the placeholder is at the start", () => {
+      const { container } = plainRender(
+        <Interpolate sentence="[Start] of the sentence">
+          {(text) => <strong>{text}</strong>}
+        </Interpolate>,
+      );
+      expect(container.textContent).toBe("Start of the sentence");
+      expect(container.querySelector("strong")).toHaveTextContent("Start");
+    });
+
+    it("works when the placeholder is at the end", () => {
+      const { container } = plainRender(
+        <Interpolate sentence="End of the [sentence]">
+          {(text) => <strong>{text}</strong>}
+        </Interpolate>,
+      );
+      expect(container.textContent).toBe("End of the sentence");
+      expect(container.querySelector("strong")).toHaveTextContent("sentence");
+    });
+
+    it("works when the whole sentence is the placeholder", () => {
+      const { container } = plainRender(
+        <Interpolate sentence="[only]">{(text) => <strong>{text}</strong>}</Interpolate>,
+      );
+      expect(container.textContent).toBe("only");
+      expect(container.querySelector("strong")).toHaveTextContent("only");
+    });
+
+    it("passes an empty string to children when the brackets are empty", () => {
+      const { container } = plainRender(
+        <Interpolate sentence="Click [] to continue">
+          {(text) => <strong aria-label="injected">{text}</strong>}
+        </Interpolate>,
+      );
+      expect(container.querySelector("strong")).toBeEmptyDOMElement();
+    });
+
+    it("throws when multiple placeholders are present", () => {
+      expect(() =>
+        plainRender(
+          <Interpolate sentence="[first] and [second]">
+            {(text) => <strong>{text}</strong>}
+          </Interpolate>,
+        ),
+      ).toThrow("Interpolate: exactly one [marker] placeholder is supported.");
+    });
+
+    it("throws when a bracket is unmatched", () => {
+      expect(() =>
+        plainRender(
+          <Interpolate sentence="[unclosed">{(text) => <strong>{text}</strong>}</Interpolate>,
+        ),
+      ).toThrow("Interpolate: exactly one [marker] placeholder is supported.");
+    });
+  });
+
+  describe("without a placeholder", () => {
+    it("renders the sentence as plain text", () => {
+      const { container } = plainRender(
+        <Interpolate sentence="No placeholder here">
+          {(text) => <strong>{text}</strong>}
+        </Interpolate>,
+      );
+      expect(container.textContent).toBe("No placeholder here");
+    });
+
+    it("does not render any injected content", () => {
+      const { container } = plainRender(
+        <Interpolate sentence="No placeholder here">
+          {(text) => <strong>{text}</strong>}
+        </Interpolate>,
+      );
+      expect(container.querySelector("strong")).toBeNull();
+    });
+  });
+
+  describe("when children returns null", () => {
+    it("renders the surrounding text without the injected node", () => {
+      const { container } = plainRender(
+        <Interpolate sentence="Before [marker] after">{() => null}</Interpolate>,
+      );
+      expect(container.textContent).toBe("Before  after");
+      expect(container.querySelector("strong")).toBeNull();
+    });
+  });
+});