fix(configurator): persist catalogue selection and filter role choices

Author: lweberru

landing-zone-configurator/app/apps/web/src/components/CloudCatalogues.tsx

@@ -6,9 +6,39 @@ import {
   useRef,
   useState,
 } from "react";
+import { workspaceKey } from "../workspace";
 import type { Session } from "./Account";
 import { type CloudCatalogue, catalogueField } from "./cloud-catalogue-fields";
 
+type CatalogueSelection = {
+  profileId: string;
+  projectId: string;
+  region: string;
+};
+
+function readSelection(key: string | null): CatalogueSelection | null {
+  try {
+    const raw = key && localStorage.getItem(`${key}:catalogue`);
+    if (!raw || raw.length > 1024) return null;
+    const value = JSON.parse(raw);
+    if (
+      typeof value.profileId !== "string" ||
+      value.profileId.length > 36 ||
+      typeof value.projectId !== "string" ||
+      value.projectId.length > 64 ||
+      !["eu01", "eu02"].includes(value.region)
+    )
+      return null;
+    return {
+      profileId: value.profileId,
+      projectId: value.projectId,
+      region: value.region,
+    };
+  } catch {
+    return null;
+  }
+}
+
 type CatalogueState = {
   data: CloudCatalogue | null;
   setData: (data: CloudCatalogue | null) => void;
@@ -51,13 +81,30 @@ export function CloudCataloguePanel({ session }: { session: Session | null }) {
   const activeRequest = useRef<AbortController | null>(null);
   useEffect(() => () => activeRequest.current?.abort(), []);
   const [error, setError] = useState("");
+  const [storageWarning, setStorageWarning] = useState("");
+  function remember(selection: CatalogueSelection) {
+    const key = workspaceKey(session);
+    if (!key) return;
+    try {
+      localStorage.setItem(`${key}:catalogue`, JSON.stringify(selection));
+      setStorageWarning("");
+    } catch {
+      setStorageWarning(
+        "Die Katalogauswahl konnte in diesem Browser nicht gespeichert werden.",
+      );
+    }
+  }
   useEffect(() => {
     activeRequest.current?.abort();
     setBusy(false);
     setData(null);
     setProfiles([]);
     setProfileId("");
-    setProjectId("");
+    const saved = readSelection(workspaceKey(session));
+    setProjectId(saved?.projectId ?? "");
+    setRegion(saved?.region ?? "eu01");
+    setError("");
+    setStorageWarning("");
     if (!session) return;
     const controller = new AbortController();
     void fetch("/api/v1/credentials", { signal: controller.signal })
@@ -66,8 +113,14 @@ export function CloudCataloguePanel({ session }: { session: Session | null }) {
         const body = (await response.json()) as {
           profiles: { id: string; name: string; state: string }[];
         };
-        setProfiles(
-          body.profiles.filter((profile) => profile.state === "stored"),
+        const stored = body.profiles.filter(
+          (profile) => profile.state === "stored",
+        );
+        setProfiles(stored);
+        setProfileId(
+          stored.some((profile) => profile.id === saved?.profileId)
+            ? (saved?.profileId ?? "")
+            : "",
         );
       })
       .catch(() => {
@@ -131,6 +184,7 @@ export function CloudCataloguePanel({ session }: { session: Session | null }) {
             value={profileId}
             onChange={(event) => {
               setProfileId(event.target.value);
+              remember({ profileId: event.target.value, projectId, region });
               setData(null);
             }}
           >
@@ -150,6 +204,7 @@ export function CloudCataloguePanel({ session }: { session: Session | null }) {
             placeholder="UUID eines vorhandenen STACKIT-Projekts"
             onChange={(event) => {
               setProjectId(event.target.value);
+              remember({ profileId, projectId: event.target.value, region });
               setData(null);
             }}
           />
@@ -162,6 +217,7 @@ export function CloudCataloguePanel({ session }: { session: Session | null }) {
             value={region}
             onChange={(event) => {
               setRegion(event.target.value);
+              remember({ profileId, projectId, region: event.target.value });
               setData(null);
             }}
           >
@@ -185,6 +241,7 @@ export function CloudCataloguePanel({ session }: { session: Session | null }) {
         {busy ? "Wird geladen …" : "Produktoptionen aktualisieren"}
       </button>
       {error && <p role="alert">{error}</p>}
+      {storageWarning && <p role="status">{storageWarning}</p>}
       {data && (
         <>
           <p role="status">

landing-zone-configurator/app/apps/web/src/components/TemplateParameters.tsx

@@ -241,6 +241,8 @@ export function TemplateParameters({
   }) => void;
 }) {
   const [inputs, setInputs] = useState<Record<string, JsonValue>>({});
+  const [roleSearch, setRoleSearch] = useState("");
+  const [selectedRolesOnly, setSelectedRolesOnly] = useState(false);
   const catalogue = useCatalogueOptions(
     "landing_zones[*].observability.plan_name",
     template.region,
@@ -305,7 +307,12 @@ export function TemplateParameters({
               ...customRoles,
               ...assigned,
             ]),
-          ];
+          ].sort((leftRole, rightRole) => leftRole.localeCompare(rightRole));
+          const visibleRoles = roleOptions.filter(
+            (role) =>
+              role.toLowerCase().includes(roleSearch.trim().toLowerCase()) &&
+              (!selectedRolesOnly || assigned.includes(role)),
+          );
           return (
             <details key={field.path} className="parameter-card">
               <summary>
@@ -355,27 +362,66 @@ export function TemplateParameters({
                       </option>
                     </select>
                   </div>
-                  <fieldset>
+                  <fieldset className="role-options">
                     <legend>
                       Rollen für die projektverantwortliche Person
                     </legend>
-                    {roleOptions.map((role) => (
-                      <label key={role} className="parameter-choice">
+                    <div className="role-filters">
+                      <div className="field">
+                        <label htmlFor={`${template.id}-role-search`}>
+                          Projektrollen durchsuchen
+                        </label>
+                        <input
+                          id={`${template.id}-role-search`}
+                          type="search"
+                          value={roleSearch}
+                          onChange={(event) =>
+                            setRoleSearch(event.target.value)
+                          }
+                        />
+                      </div>
+                      <label className="parameter-choice">
                         <input
                           type="checkbox"
-                          checked={assigned.includes(role)}
+                          checked={selectedRolesOnly}
                           onChange={(event) =>
-                            setPolicy(field.path, {
-                              ...rule,
-                              roles: event.target.checked
-                                ? [...assigned, role]
-                                : assigned.filter((value) => value !== role),
-                            })
+                            setSelectedRolesOnly(event.target.checked)
                           }
                         />
-                        {role}
+                        Nur ausgewählte Rollen
                       </label>
-                    ))}
+                    </div>
+                    <p className="field-hint" role="status">
+                      {assigned.length} ausgewählt · {visibleRoles.length} von{" "}
+                      {roleOptions.length} Rollen
+                    </p>
+                    <div className="role-list">
+                      {visibleRoles.map((role) => (
+                        <label key={role} className="parameter-choice">
+                          <input
+                            type="checkbox"
+                            checked={assigned.includes(role)}
+                            disabled={
+                              !assigned.includes(role) && assigned.length >= 100
+                            }
+                            onChange={(event) =>
+                              setPolicy(field.path, {
+                                ...rule,
+                                roles: event.target.checked
+                                  ? [...assigned, role]
+                                  : assigned.filter((value) => value !== role),
+                              })
+                            }
+                          />
+                          <span>{role}</span>
+                        </label>
+                      ))}
+                    </div>
+                    {!visibleRoles.length && roleOptions.length > 0 && (
+                      <p className="field-hint">
+                        Keine Rollen für diesen Filter.
+                      </p>
+                    )}
                   </fieldset>
                   {!roleOptions.length && (
                     <p className="field-hint">

landing-zone-configurator/app/apps/web/src/style.css

@@ -1060,3 +1060,47 @@ pre {
   margin: 4px 0 12px;
   overflow-wrap: anywhere;
 }
+
+.role-options {
+  min-width: 0;
+  margin-block: 16px;
+  padding: 12px;
+  border: 1px solid var(--border);
+  border-radius: 4px;
+}
+.role-filters {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 12px 24px;
+}
+.role-filters .field {
+  flex: 1 1 240px;
+  min-width: 0;
+}
+.role-list {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
+  align-content: start;
+  gap: 8px 16px;
+  max-height: 320px;
+  overflow: auto;
+  scrollbar-gutter: stable;
+}
+.role-options .parameter-choice {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  min-width: 0;
+  min-height: 36px;
+  padding: 6px;
+  font-weight: 400;
+  overflow-wrap: anywhere;
+  cursor: pointer;
+}
+.role-options .parameter-choice input {
+  flex: 0 0 16px;
+  width: 16px;
+  height: 16px;
+  margin: 2px 0 0;
+}

landing-zone-configurator/app/e2e/cloud-catalogues.spec.ts

@@ -2,7 +2,7 @@ import { expect, test } from "@playwright/test";
 
 test("product choices preserve imported values and restore manual fields when catalogue access fails", async ({
   page,
-}) => {
+}, testInfo) => {
   const session = {
     user: { id: "catalogue-user", login: "alice" },
     tenant: { id: "personal-one" },
@@ -68,7 +68,13 @@ test("product choices preserve imported values and restore manual fields when ca
         },
         projectRoles: {
           status: "available",
-          options: [{ value: "viewer", label: "viewer" }],
+          options: [
+            { value: "viewer", label: "viewer" },
+            ...Array.from({ length: 150 }, (_, index) => ({
+              value: `service-${index}.reader`,
+              label: `service-${index}.reader`,
+            })),
+          ],
         },
         projectPermissions: {
           status: "available",
@@ -315,11 +321,81 @@ test("product choices preserve imported values and restore manual fields when ca
     })
     .selectOption("context");
   await template.getByLabel("application-viewer", { exact: true }).check();
+  const roleList = await template.locator(".role-list").evaluate((element) => ({
+    height: element.clientHeight,
+    scrollHeight: element.scrollHeight,
+    width: element.clientWidth,
+    scrollWidth: element.scrollWidth,
+  }));
+  expect(roleList.height).toBeLessThanOrEqual(320);
+  expect(roleList.scrollHeight).toBeGreaterThan(roleList.height);
+  expect(roleList.scrollWidth).toBeLessThanOrEqual(roleList.width);
+  await template
+    .locator(".role-options")
+    .screenshot({ path: testInfo.outputPath("role-picker.png") });
+  await template
+    .getByLabel("Projektrollen durchsuchen", { exact: true })
+    .fill("application");
+  await expect(template.locator(".role-list input")).toHaveCount(1);
+  await template
+    .getByLabel("Projektrollen durchsuchen", { exact: true })
+    .fill("");
+  await template.getByLabel("Nur ausgewählte Rollen", { exact: true }).check();
+  await expect(template.locator(".role-list input")).toHaveCount(1);
+  await expect(
+    template.getByLabel("application-viewer", { exact: true }),
+  ).toBeChecked();
   await template.getByText("Bestellung testen", { exact: true }).click();
   await expect(template.locator(".parameter-preview")).toContainText(
     "Projektverantwortliche Person wird bei der Instanziierung zugeordnet",
   );
   await expect(template.locator(".parameter-preview")).toContainText(
     "verifizierten STACKIT-Identität",
   );
+  await page.getByLabel("Katalogregion", { exact: true }).selectOption("eu02");
+  await page.reload();
+  await expect(
+    page.getByRole("button", { name: "Abmelden", exact: true }),
+  ).toBeVisible();
+  await page
+    .locator("summary")
+    .filter({ hasText: "STACKIT-Produktoptionen laden" })
+    .click();
+  await expect(page.getByLabel("Katalogzugang", { exact: true })).toHaveValue(
+    "11111111-1111-4111-8111-111111111111",
+  );
+  await expect(page.getByLabel("Referenzprojekt-ID")).toHaveValue(
+    "22222222-2222-4222-8222-222222222222",
+  );
+  await expect(page.getByLabel("Katalogregion", { exact: true })).toHaveValue(
+    "eu02",
+  );
+  const saved = await page.evaluate(() =>
+    JSON.parse(
+      localStorage.getItem(
+        "lzc-workspace-v1:personal-one:catalogue-user:catalogue",
+      ) ?? "null",
+    ),
+  );
+  expect(Object.keys(saved).sort()).toEqual([
+    "profileId",
+    "projectId",
+    "region",
+  ]);
+  session.tenant.id = "personal-two";
+  await page.reload();
+  await expect(
+    page.getByRole("button", { name: "Abmelden", exact: true }),
+  ).toBeVisible();
+  await page
+    .locator("summary")
+    .filter({ hasText: "STACKIT-Produktoptionen laden" })
+    .click();
+  await expect(page.getByLabel("Katalogzugang", { exact: true })).toHaveValue(
+    "",
+  );
+  await expect(page.getByLabel("Referenzprojekt-ID")).toHaveValue("");
+  await expect(page.getByLabel("Katalogregion", { exact: true })).toHaveValue(
+    "eu01",
+  );
 });

landing-zone-configurator/docs/cloud-product-catalogues.md

@@ -38,6 +38,15 @@ Alle Cloud-Ziele sind fest definiert; Redirects sind verboten, Antworten sind au
 
 Der erste Abschnitt gilt im persönlichen Arbeitsbereich. Organisationstenants bleiben bis zur Einführung freigegebener Plattformzugänge im Entwurfsmodus; sie übernehmen keine Credentials aus persönlichen Arbeitsbereichen.
 
+Katalogzugang, Referenzprojekt-ID und Region werden in diesem Browser pro Benutzer
+und Arbeitsbereich gespeichert und beim erneuten Öffnen wiederhergestellt.
+Gespeichert werden ausschließlich diese drei Auswahlwerte, keine Schlüssel,
+Tokens oder Katalogantworten. Das Profil wird erneut gegen die zugänglichen,
+gespeicherten Credential-Profile geprüft; ein gelöschtes Profil wird nicht mehr
+vorausgewählt. Kataloge werden weiterhin nur nach expliziter Aktualisierung
+abgerufen. Die Einstellung wird nicht zwischen Geräten synchronisiert; blockierter
+Browser-Speicher erzeugt einen sichtbaren Hinweis.
+
 ## Erweiterung: Observability und Diagnose-Bastion
 
 - [x] `observability.plan_name` und die Observability-Blöcke von Plattform-Clustern, Landing Zones und Sandboxes verwenden `plans[].name` als Terraform-Eingabe, nicht die abweichende Plan-UUID.