@uxland/primary-shell 8.0.0-rc.0 → 8.0.0-rc.2

package/src/UI/internal-views/doctor-nav-menu.ts

@@ -1,5 +1,6 @@
 import { shellApi } from "../../api/api";
 import { getPatientCip } from "../../features/get-patient-cip/action";
+import { getVisiId } from "../../features/get-visi-id/action";
 import { navigateToEcap } from "../../features/navigate-to-ecap/navigate-to-ecap";
 import { ClinicalPathwaysActionMenu } from "../components/clinical-pathways-action-menu/clinical-pathways-action-menu";
 import { PetitionerActionMenu } from "../components/petitioner-action-menu/petitioner-action-menu";
@@ -69,7 +70,10 @@ const doctorNavMenuItems: MenuItemConfig[] = [
       {
         icon: "open_in_new",
         label: "Prescripció",
-        callbackFn: () => navigateToEcap("PRESCRIPCIO_ACTIVA"),
+        callbackFn: async () => {
+          const visiId = await getVisiId(shellApi);
+          navigateToEcap("PRESCRIPCIO_ACTIVA", "NO_TANCAR", visiId ? { VisiId: visiId } : {});
+        },
       },
       {
         icon: "open_in_new",
@@ -102,7 +106,10 @@ const doctorNavMenuItems: MenuItemConfig[] = [
     label: "Incapacitat temporal",
     type: "item",
     sortHint: "0100",
-    callbackFn: () => navigateToEcap("REV_IT"),
+    callbackFn: async () => {
+      const visiId = await getVisiId(shellApi);
+      navigateToEcap("REV_IT", "NO_TANCAR", visiId ? { VisiId: visiId } : {});
+    },
   },
   {
     id: "visits",

package/src/UI/shared-components/bootstrapper.ts

@@ -12,5 +12,7 @@ export const useSharedUI = () => {
   customElement("primaria-rich-text-editor")(PrimariaRichTextEditor);
   customElement("primaria-nav-tree-menu")(PrimariaNavTreeMenu);
   customElement("primaria-character-limit-badge")(PrimariaCharacterLimitBadge);
-   customElement("primaria-region")(PrimariaRegion);
+  // @ts-ignore: `PrimariaRegion` estén el mixin `PrimariaRegionHost`, que està tipat com a
+  // `any`, així que TypeScript no el reconeix com a `CustomElementClass`.
+  customElement("primaria-region")(PrimariaRegion);
 };

package/src/UI/shared-components/primaria-nav-item/primaria-nav-item.ts

@@ -48,7 +48,9 @@ export class PrimariaNavItem extends regionView(LitElement) {
 
   _subscribeEvents() {
     const subscription = shellApi.broker.subscribe(BROKER_EVENTS.shell.mainViewChanged, (payload: { viewId: string }) => {
-      this.isActive = payload.viewId === this.view?.id;
+      // `ViewDefinition` de @uxland/regions no declara `id`, però el shell només hi registra
+      // vistes que en porten.
+      this.isActive = payload.viewId === (this.view as { id?: string } | undefined)?.id;
     });
     this.subscriptions.push(subscription);
   }

package/src/UI/shared-components/primaria-text-editor/primaria-rich-text-editor.ts

@@ -7,6 +7,31 @@ import { fixSpellCheckerIssue } from "./utils";
 
 fixSpellCheckerIssue(Quill);
 
+/**
+ * Una opció de la barra d'eines de Quill: el nom solt (`"bold"`), un objecte de configuració
+ * (`{ header: 1 }`) o un grup d'opcions, que és com Quill separa els blocs de la barra.
+ */
+type ToolbarOption = string | Record<string, unknown> | (string | Record<string, unknown>)[];
+
+/**
+ * Opcions de la barra d'eines que Quill espera com a objecte de configuració en lloc del nom
+ * solt. Abans era una cadena d'`else if`.
+ */
+const TOOLBAR_OPTION_ALIASES: Record<string, ToolbarOption> = {
+  color: { color: [] },
+  ol: { list: "ordered" },
+  ul: { list: "bullet" },
+  subindex: { script: "sub" },
+  superindex: { script: "super" },
+  // outdent: { indent: "-1" },
+  // indent: { indent: "+1" },
+  size: { size: ["small", false, "large", "huge"] },
+  header: { header: [1, 2, 3, 4, 5, 6, false] },
+  background: { background: [] },
+  font: { font: [] },
+  align: { align: [] },
+};
+
 export class PrimariaRichTextEditor extends LitElement {
   private textChangeTimeout: number | null = null;
 
@@ -124,7 +149,8 @@ export class PrimariaRichTextEditor extends LitElement {
   formats: string;
 
   _getOptions() {
-    let toolbarOptions = [];
+    // Sense anotar, `[]` s'infereix com a `never[]` i totes les assignacions posteriors fallen.
+    let toolbarOptions: ToolbarOption[] = [];
     const availableOpts = this.availableOptions;
     if (this.options === undefined || this.options.length === 0) {
       toolbarOptions = [
@@ -145,26 +171,13 @@ export class PrimariaRichTextEditor extends LitElement {
         // ["clean"],
       ];
     } else {
-      toolbarOptions = this.options.split(",");
-      toolbarOptions.forEach((option) => {
-        if (availableOpts.indexOf(option) <= -1) toolbarOptions.splice(toolbarOptions.indexOf(option), 1);
-      });
-      toolbarOptions = toolbarOptions.map(function (option) {
-        if (option == "color") return { color: [] };
-        else if (option == "ol") return { list: "ordered" };
-        else if (option == "ul") return { list: "bullet" };
-        else if (option == "subindex") return { script: "sub" };
-        else if (option == "superindex") return { script: "super" };
-        // else if (option == 'outdent') return {indent: '-1'};
-        // else if (option == 'indent') return {indent: '+1'};
-        else if (option == "size") return { size: ["small", false, "large", "huge"] };
-        else if (option == "header") return { header: [1, 2, 3, 4, 5, 6, false] };
-        else if (option == "background") return { background: [] };
-        else if (option == "font") return { font: [] };
-        else if (option == "align") return { align: [] };
-        /*         else if (option == 'undo') return {undo: undo_icon};
-        else if (option == 'redo') return {redo: redo_icon}; */ else return option;
-      });
+      // Abans això filtrava amb un `splice` dins d'un `forEach`, que salta elements quan n'hi ha
+      // dos d'invàlids seguits. Amb `filter` el resultat és el que la intenció demanava.
+      toolbarOptions = this.options
+        .split(",")
+        .filter((option) => availableOpts.indexOf(option) > -1)
+        // Les opcions amb configuració es tradueixen; la resta passen tal com són.
+        .map((option) => TOOLBAR_OPTION_ALIASES[option] ?? option);
       // if (toolbarOptions.indexOf("clean") < 0) {
       // toolbarOptions.push("clean");
       // }

package/src/api/activity-monitor/activity-monitor.test.ts

@@ -1,3 +1,4 @@
+// @vitest-environment happy-dom
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { ActivityMonitorImpl } from "./activity-monitor";
 
@@ -63,5 +64,4 @@ describe("ActivityMonitor", () => {
 
     expect(monitor.getLastActivityTimestamp()).toBe(timestampBeforeStop);
   });
-
 });

package/src/api/broker/broker-events.ts

@@ -1,8 +1,17 @@
+import { PLUGIN_BROKER_EVENTS } from "@primaria/plugins-core";
+
 /**
  * Diccionari centralitzat d'events del broker.
  * Events agrupats per plugin/iniciativa per facilitar l'organització i escalabilitat.
+ *
+ * Els grups que hi ha aquí escrits són els que el shell publica o consumeix. Els
+ * contractes entre iniciatives, en què el shell no és part, es declaren a
+ * `@primaria/plugins-core` i s'hi escampen a sota: el shell només fa de canal de
+ * distribució, perquè és l'únic paquet que instal·len les iniciatives externes.
+ * Els que porten resposta no són aquí, sinó a `BROKER_REQUESTS`.
  */
 export const BROKER_EVENTS = {
+  ...PLUGIN_BROKER_EVENTS,
   activityHistory: {
     refreshDataRequested: "refresh_history_data_requested",
     errorLoadingData: "error_loading_activity_history_data",

package/src/api/broker/broker-requests.ts

@@ -0,0 +1,20 @@
+import { PLUGIN_BROKER_REQUESTS } from "@primaria/plugins-core";
+
+/**
+ * Diccionari centralitzat de requests del broker: els missatges que porten
+ * resposta i es criden amb `send` / `registerRequest`.
+ *
+ * Separat de `BROKER_EVENTS` a propòsit. Un event (`publish`/`subscribe`) i una
+ * request (`send`/`registerRequest`) són mecanismes diferents, i barrejar-los
+ * en una constant que es diu "events" deixa qui l'autocompleta sense saber quin
+ * dels dos ha de cridar.
+ *
+ * Ara mateix només conté contractes entre iniciatives, declarats a
+ * `@primaria/plugins-core`. Si algun dia el shell exposa requests pròpies,
+ * s'escriuen aquí al costat, igual que a `BROKER_EVENTS`.
+ */
+export const BROKER_REQUESTS = {
+  ...PLUGIN_BROKER_REQUESTS,
+} as const;
+
+export type BrokerRequests = typeof BROKER_REQUESTS;

package/src/api/broker/factory.ts

@@ -1,5 +1,6 @@
 import { IEvent, IEventClass, IRequest, IRequestClass } from "@uxland/harmonix";
 import { BROKER_EVENTS } from "./broker-events";
+import { BROKER_REQUESTS } from "./broker-requests";
 import type { BrokerDisposableHandler, PrimariaBroker } from "./primaria-broker";
 
 /**
@@ -30,6 +31,7 @@ type Handler = (message: any) => unknown;
 
 class Broker implements PrimariaBroker {
   public readonly events = BROKER_EVENTS;
+  public readonly requests = BROKER_REQUESTS;
 
   /** One handler per request type (request/response). */
   private readonly requestHandlers = new Map<MessageKey, Handler>();

package/src/api/broker/primaria-broker.ts

@@ -1,8 +1,12 @@
 import { HarmonixBroker } from "@uxland/harmonix";
 import { type BrokerEvents } from "./broker-events";
+import { type BrokerRequests } from "./broker-requests";
 
 export interface PrimariaBroker extends HarmonixBroker {
+  /** Noms dels events: `publish` / `subscribe`. */
   events: BrokerEvents;
+  /** Noms de les requests: `send` / `registerRequest`. */
+  requests: BrokerRequests;
   /** Internal: removes every registration (shell teardown only). */
   _clear(): void;
 }

package/src/api/ecap-event-manager/ecap-event-manager.test.ts

@@ -1,3 +1,4 @@
+// @vitest-environment happy-dom
 import { describe, it, expect, vi, beforeEach } from "vitest";
 import { createEcapEventManager, LAST_WORKED_DIAGNOSTICS_KEY } from "./ecap-event-manager";
 
@@ -8,6 +9,13 @@ const createMockGlobalStateManager = (data: Record<string, unknown> = {}) =>
     clearData: vi.fn(),
   }) as any;
 
+/** `mock.calls[0][0]` és `unknown | undefined` amb `noUncheckedIndexedAccess`. */
+const firstPostedMessage = (spy: { mock: { calls: unknown[][] } }): string => {
+  const payload = spy.mock.calls[0]?.[0];
+  if (typeof payload !== "string") throw new Error("s'esperava un missatge publicat");
+  return payload;
+};
+
 describe("EcapEventManagerImpl", () => {
   const mockPostMessage = vi.fn();
   const mockConsoleLog = vi.fn();
@@ -31,7 +39,7 @@ describe("EcapEventManagerImpl", () => {
 
     eventManager.publish("click", "navigate", payload);
 
-    const postedEvent = JSON.parse(mockPostMessage.mock.calls[0][0]);
+    const postedEvent = JSON.parse(firstPostedMessage(mockPostMessage));
     expect(postedEvent.DIAGNOSTICS).toBeUndefined();
     expect(globalStateManager.getData).not.toHaveBeenCalled();
   });
@@ -43,7 +51,7 @@ describe("EcapEventManagerImpl", () => {
 
     eventManager.publish("PRESCRIPCIO_ACTIVA", "NO_TANCAR", {});
 
-    const postedEvent = JSON.parse(mockPostMessage.mock.calls[0][0]);
+    const postedEvent = JSON.parse(firstPostedMessage(mockPostMessage));
     expect(postedEvent.DIAGNOSTICS).toEqual(diagnostics);
     expect(globalStateManager.getData).toHaveBeenCalledWith(LAST_WORKED_DIAGNOSTICS_KEY);
   });
@@ -63,7 +71,7 @@ describe("EcapEventManagerImpl", () => {
 
     eventManager.publish(eventType, "NO_TANCAR", {});
 
-    const postedEvent = JSON.parse(mockPostMessage.mock.calls[0][0]);
+    const postedEvent = JSON.parse(firstPostedMessage(mockPostMessage));
     expect(postedEvent.DIAGNOSTICS).toEqual(diagnostics);
   });
 
@@ -73,7 +81,7 @@ describe("EcapEventManagerImpl", () => {
 
     eventManager.publish("ORDRE_TRACTAMENT", "NO_TANCAR", {});
 
-    const postedEvent = JSON.parse(mockPostMessage.mock.calls[0][0]);
+    const postedEvent = JSON.parse(firstPostedMessage(mockPostMessage));
     expect(postedEvent.DIAGNOSTICS).toEqual([]);
   });
 

package/src/api/ecap-event-manager/ecap-event-manager.ts

@@ -1,7 +1,11 @@
+import { LAST_WORKED_DIAGNOSTICS_KEY } from "@primaria/plugins-core";
 import type { PrimariaGlobalStateManager } from "../global-state/global-state";
 import { IEcapEvent } from "./typings";
 
-export const LAST_WORKED_DIAGNOSTICS_KEY = "lastWorkedDiagnostics";
+// La clau la declara `@primaria/plugins-core`: qui l'escriu és clinical-course i
+// qui la llegeix és aquest mànager, així que no pot viure a cap dels dos costats.
+// Es re-exporta perquè els imports que ja hi havia segueixin funcionant.
+export { LAST_WORKED_DIAGNOSTICS_KEY };
 
 const EVENTS_WITH_DIAGNOSTICS = [
   "PROVES_ORDRES_CLINIQUES_CONSULTAR",

package/src/api/http-client/http-client.test.ts

@@ -1,3 +1,4 @@
+// @vitest-environment happy-dom
 import axios, { AxiosInstance } from "axios";
 import AxiosMockAdapter from "axios-mock-adapter";
 import { beforeEach, describe, expect, it, vi } from "vitest";
@@ -14,7 +15,7 @@ const newAccessToken =
   "eyJhbGciOiJSUzI1NiIsInR5cCIgOiAiSldUIiwia2lkIiA6ICJidFZxNnRMWGpmcXdzbm5MR2FXMXdhdU9McDNiTmY4bWZ3Rm1SZ0lBS2VJIn0.eyJleHAiOjE3NDI5MTAzNzgsImlhdCI6MTc0MjkwOTQ3OCwianRpIjoiMTg4OTE3ZDYtNmM0OS00YWY0LTlhYjItZjEzYTM4MGY5OTgyIiwiaXNzIjoiaHR0cHM6Ly9wcmVwcm9kdWNjaW8ucGRzLmhlcy5jYXRzYWx1dC5nZW5jYXQuY2F0L2F1dGgvcmVhbG1zL0hFUyIsInN1YiI6Ijk1OGUyZWQ5LTJkNmUtNDZjOC1hOTE5LTU5MDQ0ZTYwMzVjMiIsInR5cCI6IkJlYXJlciIsImF6cCI6ImV0Yy1jY2YtcHJlIiwic2Vzc2lvbl9zdGF0ZSI6IjY5ODdhMzExLWM1NzQtNDc1Ni1hMzY0LWY1ZjQzZmViZjNhYiIsInJlYWxtX2FjY2VzcyI6eyJyb2xlcyI6WyJkZWZhdWx0LXJvbGVzLWhlcyIsIlJPTEVfSEVTX0VUQyIsIlJPTEVfSEVTX0xBTkRJTkciXX0sInNjb3BlIjoiIiwic2lkIjoiNjk4N2EzMTEtYzU3NC00NzU2LWEzNjQtZjVmNDNmZWJmM2FiIiwiY2xpZW50SG9zdCI6IjEwLjUzLjI1NC4xNTAiLCJhY2Nlc3NfcnVsZXMiOnt9LCJhY2Nlc3NfaW5mbyI6eyJtb2R1bGVfY29kZSI6IkEwMDEiLCJyb2xlX3R5cGUiOiJOT1JNIiwidHJhY2VfdXNlcl9pZCI6IlVzZXJfSUQiLCJjZW50ZXJfdHlwZSI6IkUiLCJtcGlfcGF0aWVudF9pZCI6IjVlYzc0YzdiLTVhYTUtNGE4NC1iM2I0LWYwMmVkZGZkZjZkYyIsInVwX2NvZGUiOiIwNzczMyIsInRyYWNlX3VzZXJfZ2l2ZW5fbmFtZSI6IkdpdmVuIE5hbWUiLCJ0cmFjZV91c2VyX2ZhbWlseV9uYW1lIjoiRmFtaWx5IE5hbWUiLCJ1c2VyX3R5cGUiOiJBRE0iLCJjZW50ZXJfY29kZSI6IkUwODU4Njk2MyIsInByb2Zlc3Npb25hbF9jYXRlZ29yeSI6IjMwOTM0MzAwNiIsInNlcnZpY2VfY29kZSI6IjVTMDg5IiwiZXBfY29kZSI6IjAyMDgiLCJpZGVudGlmaWVyIjpbeyJ0eXBlIjoiRE5JIiwidmFsdWUiOiI3MzI4ODIxOUEifSx7InR5cGUiOiJOVU1DT0wiLCJ2YWx1ZSI6IjIifV0sImFsdF9pZGVudGlmaWVyIjpbeyJ0eXBlIjoiTVBJIiwidmFsdWUiOiIwNjIxY2Y3ZC03ZDYzLTQ5ZWMtODAwNi04YzA1NjkyZWQzNzcifV19LCJjbGllbnRBZGRyZXNzIjoiMTAuNTMuMjU0LjE1MCIsImNsaWVudF9pZCI6ImV0Yy1jY2YtcHJlIn0.zPxoN5d8_uxdbxeH7ly9sQdlnDxNp8_eWDzNSzjzkUPsRVkLxgjQw_WcjZfns-LNgGr0FToS6uSDIC7uj2hPpKqD7HPWbI6UPa7g-43Jf9rh-KSOXEHJWhlASi2w0n3xQHFSxHDYBwhyXlvWQ_Tr1Vh37MroWmEL84fdwqhcfZHmD9Ek52EuRRrB-XkymCmN1ZvO2GPU04LbBvQxLVzdAaKRzr1cUqHTnsEdgRduyKShPcyth01L_X7m128SIwjJsa1lYxFE_DbSDKz8dPTsxoS1DgwRxeArrkMlIdTHyxmDRezZUGhamyLuWpXLDXJCFfrTUB8-j_JnVlILHeR6O";
 
 describe("HTTP Client", () => {
-  let broker = createBroker();
+  const broker = createBroker();
   let tokenManager: TokenManager;
   let axiosInstance: AxiosInstance;
   let axiosMockInstance: AxiosMockAdapter;
@@ -43,9 +44,7 @@ describe("HTTP Client", () => {
       expect(response.data).toBe("success");
       expect(axiosMockInstance.history.get?.length).toBe(1);
       // @ts-ignore
-      expect(axiosMockInstance.history.get?.[0]?.headers.Authorization).toBe(
-        `Bearer ${access_token}`,
-      );
+      expect(axiosMockInstance.history.get?.[0]?.headers.Authorization).toBe(`Bearer ${access_token}`);
     });
 
     it("should retry request with  new token if failed with 401 after token refresh, and requests after that have new token", async () => {
@@ -71,12 +70,8 @@ describe("HTTP Client", () => {
       expect(response.status).toBe(200);
       expect(response.data).toBe("success");
       expect(axiosMockInstance.history.get?.length).toBe(3); // 3 Calls 2 for the first request (request and retry), 1 for the second request
-      expect(axiosMockInstance.history.get?.[1]?.headers?.Authorization).toBe(
-        "Bearer " + newAccessToken,
-      );
-      expect(axiosMockInstance.history.get?.[2]?.headers?.Authorization).toBe(
-        "Bearer " + newAccessToken,
-      );
+      expect(axiosMockInstance.history.get?.[1]?.headers?.Authorization).toBe(`Bearer ${newAccessToken}`);
+      expect(axiosMockInstance.history.get?.[2]?.headers?.Authorization).toBe(`Bearer ${newAccessToken}`);
     });
 
     it("should fail request if token refresh fails and publish an event", async () => {
@@ -86,9 +81,7 @@ describe("HTTP Client", () => {
       const brokerSpy = vi.spyOn(broker, "publish");
       axiosMockInstance.onGet("/api/clinical-course").replyOnce(401, "Unauthorized");
 
-      await expect(axiosInstance.get("/api/clinical-course")).rejects.toThrow(
-        "Request failed with status code 401",
-      );
+      await expect(axiosInstance.get("/api/clinical-course")).rejects.toThrow("Request failed with status code 401");
 
       expect(axiosMockInstance.history.get?.length).toBe(1); // No retry happened
       expect(brokerSpy).toHaveBeenCalledWith(BROKER_EVENTS.shell.refreshTokenFailed, {});
@@ -121,9 +114,7 @@ describe("HTTP Client", () => {
       const brokerSpy = vi.spyOn(broker, "publish");
 
       // Perform the request
-      await expect(axiosInstance.get("/api/clinical-course")).rejects.toThrow(
-        "Mpid header is missing",
-      );
+      await expect(axiosInstance.get("/api/clinical-course")).rejects.toThrow("Mpid header is missing");
       expect(brokerSpy).not.toHaveBeenCalled();
     });
 
@@ -133,9 +124,7 @@ describe("HTTP Client", () => {
       });
       const brokerSpy = vi.spyOn(broker, "publish");
       // Perform the request
-      await expect(axiosInstance.get("/api/clinical-course")).rejects.toThrow(
-        "Mpid header value is invalid",
-      );
+      await expect(axiosInstance.get("/api/clinical-course")).rejects.toThrow("Mpid header value is invalid");
       expect(brokerSpy).toHaveBeenCalledWith(BROKER_EVENTS.shell.mpidHeaderInvalid, expect.any(Object));
     });
 
@@ -148,9 +137,7 @@ describe("HTTP Client", () => {
       expect(response.data).toBe("success");
       expect(axiosMockInstance.history.get?.length).toBe(1);
       // @ts-ignore
-      expect(axiosMockInstance.history.get?.[0]?.headers.Authorization).toBe(
-        `Bearer ${access_token}`,
-      );
+      expect(axiosMockInstance.history.get?.[0]?.headers.Authorization).toBe(`Bearer ${access_token}`);
     });
 
     it("should retry request with  new token if failed with 401 after token refresh, and requests after that have new token", async () => {
@@ -177,12 +164,8 @@ describe("HTTP Client", () => {
       expect(response.status).toBe(200);
       expect(response.data).toBe("success");
       expect(axiosMockInstance.history.get?.length).toBe(3); // 3 Calls 2 for the first request (request and retry), 1 for the second request
-      expect(axiosMockInstance.history.get?.[1]?.headers?.Authorization).toBe(
-        "Bearer " + newAccessToken,
-      );
-      expect(axiosMockInstance.history.get?.[2]?.headers?.Authorization).toBe(
-        "Bearer " + newAccessToken,
-      );
+      expect(axiosMockInstance.history.get?.[1]?.headers?.Authorization).toBe(`Bearer ${newAccessToken}`);
+      expect(axiosMockInstance.history.get?.[2]?.headers?.Authorization).toBe(`Bearer ${newAccessToken}`);
     });
 
     it("should fail request if token refresh fails and publish an event", async () => {
@@ -192,9 +175,7 @@ describe("HTTP Client", () => {
       const brokerSpy = vi.spyOn(broker, "publish");
       axiosMockInstance.onGet("/api/clinical-course").replyOnce(401, "Unauthorized");
 
-      await expect(axiosInstance.get("/api/clinical-course")).rejects.toThrow(
-        "Request failed with status code 401",
-      );
+      await expect(axiosInstance.get("/api/clinical-course")).rejects.toThrow("Request failed with status code 401");
 
       expect(axiosMockInstance.history.get?.length).toBe(1); // No retry happened
       expect(brokerSpy).toHaveBeenCalledWith(BROKER_EVENTS.shell.refreshTokenFailed, {});

package/src/api/import-data-manager/component/component.ts

@@ -10,6 +10,9 @@ export class ImportDataManagerModal extends LitElement implements ConfirmationCo
   setResult: (result: undefined) => void;
   setIsValid: (isValid: boolean) => void;
   confirm: () => void;
+  // Injectat pel servei d'interacció igual que la resta; faltava des que es va afegir a la
+  // interfície.
+  confirmResult: (result: undefined) => void;
   cancel: () => void;
 
   render() {

package/src/api/import-data-manager/component/styles.css

@@ -9,28 +9,31 @@
   overflow: hidden;
 }
 
-/* .header {
-  display: flex;
-  flex-direction: row;
+/* Three columns so the title is centred on the modal, not on the space left
+   over by the close button. */
+.header {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
   align-items: center;
-  justify-content: space-between;
-  text-align: center;
   color: black;
   padding: var(--dss-spacing-sm);
+}
 
-  .title {
-    display: flex;
-    flex-direction: row;
-    gap: 8px;
-  }
-} */
+.header__title {
+  grid-column: 2;
+  text-align: center;
+}
+
+.header__close {
+  grid-column: 3;
+  justify-self: end;
+}
 
 .content{
   display: grid;
   flex: 1;
   min-height: 0;
-  grid-template-columns: 1fr 1fr;
-  gap: 16px;
+  grid-template-columns: 50% 50%;
   padding: 16px;
 }
 
@@ -43,42 +46,32 @@
 .content primaria-region > div {
   width: 100%;
   height: 100%;
-  border: 1px solid var(--color-neutral-200);
   border-radius: 8px;
-  padding: 16px;
+  padding: 0 16px;
   box-sizing: border-box;
 }
 
-/* Right column: stacks plugin cards and scrolls as a whole. */
-.content > primaria-region[name="import-data-region"] > div {
-  overflow-y: auto;
-}
-
-/* Left column: vertical stack of multiple views with a gap. The last view
-   takes the remaining space and handles its own scroll; preceding views
-   keep their natural height. */
-.content > primaria-region[name="import-data-activity-history-region"] > div {
+/* Both columns are a vertical stack of injected views, 16px apart, that scrolls
+   as a whole. Each view keeps its natural height and bounds its own inner
+   scroll, and must not shrink — otherwise the column squeezes the views instead
+   of scrolling. */
+.content > primaria-region > div {
   display: flex;
   flex-direction: column;
   gap: 16px;
-  overflow: hidden;
+  overflow-y: auto;
 }
 
-.content > primaria-region[name="import-data-activity-history-region"] > div > * {
+.content > primaria-region > div > * {
   flex-shrink: 0;
 }
 
-.content > primaria-region[name="import-data-activity-history-region"] > div > *:last-child {
-  flex: 1;
-  min-height: 0;
-}
-
 .footer {
   display: flex;
   flex-direction: row;
   align-items: center;
   background: white;
-  justify-content: end;
+  justify-content: center;
   gap: 12px;
   height: 56px;
   border-top: 1px solid var(--color-neutral-100);

package/src/api/import-data-manager/component/template.ts

@@ -6,6 +6,21 @@ import { ImportDataManagerModal } from "./component";
 export const template = (props: ImportDataManagerModal) => {
   return html`
     <div class="container">
+      <div class="header">
+        <dss-typography class="header__title" tag="h2" variant="headline-4">
+          ${translate("importDataManager.title")}
+        </dss-typography>
+        <dss-icon-button
+          class="header__close"
+          icon="close"
+          size="lg"
+          variant="neutral"
+          label="${translate("importDataManager.actions.close")}"
+          @onClick="${() => {
+            props.cancel();
+          }}"
+        ></dss-icon-button>
+      </div>
       <div class="content">
         <primaria-region name="${shellApi.regionManager.regions.shell.importDataActivityHistory}"></primaria-region>
         <primaria-region name="${shellApi.regionManager.regions.shell.importData}"></primaria-region>
@@ -20,6 +35,7 @@ export const template = (props: ImportDataManagerModal) => {
           variant="secondary"
         ></dss-button>
         <dss-button
+          icon="add_circle"
           label="${translate("importDataManager.actions.import")}"
           @click="${() => {
             props._accept();

package/src/api/import-data-manager/import-data-manager-impl.test.ts

@@ -11,6 +11,8 @@ import {
 class MockInteractionService extends PrimariaInteractionService {
   private mockConfirmResult: { confirmed: boolean; result?: unknown } = { confirmed: true };
 
+  dispose(): void {}
+
   // Mètode per configurar el resultat del mock
   setMockConfirmResult(result: { confirmed: boolean; result?: unknown }) {
     this.mockConfirmResult = result;

package/src/api/interaction-service/interaction-service-impl.tsx

@@ -17,6 +17,14 @@ const defaultOptions: ConfirmationOptions = {
   hideIcon: false,
 };
 
+/**
+ * Un diàleg pot ser un component de React o un web component. Només el primer es pot renderitzar
+ * com a JSX, i cal un predicat de tipus perquè TypeScript ho estrenyi al punt d'ús: guardar el
+ * resultat en un booleà no li serveix.
+ */
+const isWebComponentConstructor = (component: unknown): component is new () => HTMLElement =>
+  typeof component === "function" && component.prototype instanceof HTMLElement;
+
 export class PrimariaInteractionServiceImpl extends PrimariaInteractionService {
   private readonly openDialogCancellers = new Set<() => void>();
 
@@ -44,13 +52,13 @@ export class PrimariaInteractionServiceImpl extends PrimariaInteractionService {
       }
 
       const DialogWrapper = () => {
-        const [result, setResult] = useState<ConfirmationResult<TResult | undefined>>();
+        const [result, setResult] = useState<TResult>();
         const [isValid, setIsValid] = useState(true);
-        const dialogComponentRef = useRef(null);
+        const dialogComponentRef = useRef<HTMLDivElement>(null);
         const dialogRef = useRef<HTMLDivElement>(null);
         const modalRef = useRef<HTMLDivElement>(null);
 
-        const isWebComponent = typeof DialogComponent === "function" && DialogComponent.prototype instanceof HTMLElement;
+        const isWebComponent = isWebComponentConstructor(DialogComponent);
 
         useEffect(() => {
           window.addEventListener("keydown", handleKeydown);
@@ -73,7 +81,7 @@ export class PrimariaInteractionServiceImpl extends PrimariaInteractionService {
             handleClose(false);
           }
         };
-        const handleOutsideClick = (event: Event) => {
+        const handleOutsideClick = (event: React.MouseEvent<HTMLDivElement>) => {
           if (dialogRef.current) {
             if (event.target === modalRef.current && finalOptions.closeOnOutsideClick) {
               handleClose(false);
@@ -81,6 +89,9 @@ export class PrimariaInteractionServiceImpl extends PrimariaInteractionService {
           }
         };
 
+        // L'efecte només ha de crear el web component quan canvia el component o les dades.
+        // Afegir-hi els handlers i `isValid` el faria recrear a cada render, perdent l'estat.
+        // biome-ignore lint/correctness/useExhaustiveDependencies: recrear-lo perdria l'estat
         useEffect(() => {
           if (isWebComponent && dialogComponentRef.current) {
             const parent = dialogComponentRef.current;
@@ -113,7 +124,7 @@ export class PrimariaInteractionServiceImpl extends PrimariaInteractionService {
           resolvePromise(finalResult, true);
         };
 
-        const resolvePromise = (finalResult: TResult, confirmed: boolean) => {
+        const resolvePromise = (finalResult: TResult | undefined, confirmed: boolean) => {
           if (isClosing) return;
 
           isClosing = true;
@@ -153,7 +164,7 @@ export class PrimariaInteractionServiceImpl extends PrimariaInteractionService {
         };
 
         const _renderContent = () => {
-          return isWebComponent ? (
+          return isWebComponentConstructor(DialogComponent) ? (
             <div ref={dialogComponentRef} />
           ) : (
             <DialogComponent
@@ -181,7 +192,7 @@ export class PrimariaInteractionServiceImpl extends PrimariaInteractionService {
                           fill
                           class={`dss-dialog-header-state--${getHeadIconVariantClass()}`}
                           icon={getHeadIcon()}
-                        ></dss-icon>
+                        />
                       )}
                       {finalOptions.title}
                     </div>
@@ -193,7 +204,7 @@ export class PrimariaInteractionServiceImpl extends PrimariaInteractionService {
                       variant="neutral"
                       icon="close"
                       onClick={() => handleClose(false)}
-                    ></dss-icon-button>
+                    />
                   )}
                 </div>
               )}