@startinblox/components-ds4go 3.3.5 → 3.3.7

package/src/components/modal/ds4go-catalog-modal.ts

@@ -24,15 +24,9 @@ export class Ds4goCatalogModal extends TemsObjectHandler {
   @property({ attribute: false })
   dspStore?: any;
 
-  @property({ attribute: false })
-  apiGatewayConfig?: any;
-
   @property({ attribute: false })
   participantId?: string;
 
-  @property({ attribute: false, type: Boolean })
-  displayServiceTest = true;
-
   @state()
   negotiationStatus:
     | "idle"
@@ -60,33 +54,9 @@ export class Ds4goCatalogModal extends TemsObjectHandler {
   @state()
   maxAttempts?: number;
 
-  @state()
-  apiGatewayToken?: string;
-
-  @state()
-  apiGatewayError?: string;
-
-  @state()
-  gettingToken = false;
-
-  @state()
-  testingService = false;
-
-  @state()
-  testResult?: any;
-
   @state()
   existingAgreementChecked = false;
 
-  @state()
-  transferId?: string;
-
-  @state()
-  edrToken?: string;
-
-  @state()
-  edrEndpoint?: string;
-
   @state()
   showPolicySelection = false;
 
@@ -96,29 +66,6 @@ export class Ds4goCatalogModal extends TemsObjectHandler {
   @state()
   availablePolicies?: any[];
 
-  @state()
-  transferError?: string;
-
-  @state()
-  gettingEDR = false;
-
-  @state()
-  accessingData = false;
-
-  @state()
-  dataAccessAttempt?: number;
-
-  @state()
-  dataAccessMaxAttempts?: number;
-
-  @state()
-  countdown?: number;
-
-  @state()
-  dataResult?: any;
-
-  @state()
-  dataAccessError?: string;
 
   /**
    * Check for existing agreement when component connects
@@ -435,11 +382,6 @@ export class Ds4goCatalogModal extends TemsObjectHandler {
     this.contractId = undefined;
     this.negotiationId = undefined;
     this.negotiationError = undefined;
-    this.apiGatewayToken = undefined;
-    this.apiGatewayError = undefined;
-    this.gettingToken = false;
-    this.testingService = false;
-    this.testResult = undefined;
     this.existingAgreementChecked = false;
     this.requestUpdate();
   }
@@ -833,415 +775,6 @@ export class Ds4goCatalogModal extends TemsObjectHandler {
     this.requestUpdate();
   }
 
-  /**
-   * Get the current OIDC access token from the session.
-   * This retrieves the token from localStorage where oidc-client stores it.
-   */
-  _getOidcAccessToken(apiGatewayConfig: any): string {
-    const { oidcAuthority, oidcClientId } = apiGatewayConfig;
-
-    if (!oidcAuthority || !oidcClientId) {
-      throw new Error(
-        "OIDC configuration (oidcAuthority, oidcClientId) required for API Gateway",
-      );
-    }
-
-    // The OIDC library stores the user session in localStorage
-    const storageKey = `oidc.user:${oidcAuthority}:${oidcClientId}`;
-    const stored = localStorage.getItem(storageKey);
-
-    if (!stored) {
-      throw new Error("No OIDC session found. Please log in first.");
-    }
-
-    try {
-      const oidcUser = JSON.parse(stored);
-
-      // Check if token is expired
-      if (oidcUser.expires_at && oidcUser.expires_at * 1000 < Date.now()) {
-        throw new Error("OIDC token has expired. Please log in again.");
-      }
-
-      if (!oidcUser.access_token) {
-        throw new Error("No access token in OIDC session");
-      }
-
-      return oidcUser.access_token;
-    } catch (e) {
-      if (e instanceof SyntaxError) {
-        throw new Error("Failed to parse OIDC session data");
-      }
-      throw e;
-    }
-  }
-
-  async _getApiGatewayToken(
-    apiGatewayConfig: any,
-    accessToken: string,
-    contractAgreementId: string,
-  ): Promise<string> {
-    const { apiGatewayBaseUrl } = apiGatewayConfig;
-
-    if (!apiGatewayBaseUrl) {
-      throw new Error("API Gateway base URL not configured");
-    }
-
-    // Use the TEMS API Gateway token endpoint
-    const tokenUrl = `${apiGatewayBaseUrl}/temsapigateway/token`;
-
-    const response = await fetch(tokenUrl, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-        Authorization: `Bearer ${accessToken}`,
-      },
-      body: JSON.stringify({
-        agreementId: contractAgreementId,
-      }),
-    });
-
-    if (!response.ok) {
-      const errorText = await response.text();
-      console.error("❌ Failed to get API Gateway token:", {
-        status: response.status,
-        statusText: response.statusText,
-        errorText,
-      });
-      throw new Error(
-        `Failed to get API Gateway token: ${response.status} - ${errorText}`,
-      );
-    }
-
-    const data = await response.json();
-    // Support multiple possible field names for the token
-    const token = data.apiGatewayToken || data.token || data.access_token;
-
-    if (!token) {
-      console.error("❌ No token found in response:", data);
-      throw new Error(
-        "API Gateway response did not contain a token. Response keys: " +
-          Object.keys(data).join(", "),
-      );
-    }
-
-    return token;
-  }
-
-  async _getGatewayToken() {
-    try {
-      this.gettingToken = true;
-      this.apiGatewayError = undefined;
-      this.requestUpdate();
-
-      // Use API Gateway configuration passed as property
-      if (!this.apiGatewayConfig) {
-        throw new Error(
-          "API Gateway not configured. Please provide api-gateway-config attribute.",
-        );
-      }
-
-      const apiGatewayConfig = this.apiGatewayConfig;
-
-      if (!this.contractId) {
-        throw new Error(
-          "No contract ID available. Please complete contract negotiation first.",
-        );
-      }
-
-      // Step 1: Get access token from current OIDC session
-      const oidcAccessToken = this._getOidcAccessToken(apiGatewayConfig);
-
-      // Step 2: Get API Gateway token using the contract agreement ID
-      const apiGatewayToken = await this._getApiGatewayToken(
-        apiGatewayConfig,
-        oidcAccessToken,
-        this.contractId,
-      );
-
-      this.apiGatewayToken = apiGatewayToken;
-      this.requestUpdate();
-    } catch (error) {
-      console.error("Failed to get API Gateway token:", error);
-      this.apiGatewayError = (error as Error).message;
-    } finally {
-      this.gettingToken = false;
-      this.requestUpdate();
-    }
-  }
-
-  async _testService() {
-    try {
-      this.testingService = true;
-      this.apiGatewayError = undefined;
-      this.testResult = undefined;
-      this.requestUpdate();
-
-      // Check if we have the API Gateway token
-      if (!this.apiGatewayToken) {
-        throw new Error(
-          'No API Gateway token available. Please click "Get gateway token" first.',
-        );
-      }
-
-      const apiGatewayToken = this.apiGatewayToken;
-
-      // Step 3: Access the service via API Gateway
-      // The service endpoint URL from dcat:endpointURL already includes the full API Gateway path
-      const serviceEndpointUrl = (this.object as any).url;
-
-      if (!serviceEndpointUrl) {
-        throw new Error(
-          "No service endpoint URL found in service object. " +
-            "The dcat:service in the self-description must include a dcat:endpointURL field. " +
-            'Example: "dcat:endpointURL": "https://participant-a.tems-dataspace.eu/apigateway/v2/store/inventory"',
-        );
-      }
-
-      // The dcat:endpointURL already points to the correct URL with API Gateway included
-      // No need to reconstruct - use it directly
-
-      const response = await fetch(serviceEndpointUrl, {
-        method: "GET",
-        headers: {
-          "X-API-Gateway-Token": apiGatewayToken,
-        },
-      });
-
-      if (!response.ok) {
-        const errorText = await response.text();
-        throw new Error(
-          `Failed to fetch data via API Gateway: ${response.status} - ${errorText}`,
-        );
-      }
-
-      const data = await response.json();
-      this.testResult = data;
-    } catch (error) {
-      console.error("❌ Service test failed:", error);
-      this.apiGatewayError = (error as Error).message;
-    } finally {
-      this.testingService = false;
-      this.requestUpdate();
-    }
-  }
-
-  // ============================================================================
-  // EDR (Endpoint Data Reference) Data Access Methods
-  // ============================================================================
-  // These methods provide UI coordination for EDR-based data access when no
-  // API Gateway is configured. They delegate business logic to the
-  // DataspaceConnectorStore (sib-core) and focus on UI state management.
-  //
-  // Architecture:
-  // - tems-modal: UI layer (state, progress, errors, user interaction)
-  // - dspStore (DataspaceConnectorStore): Business logic (HTTP calls, polling, auth)
-  //
-  // Flow:
-  // 1. _initiateEDRTransfer() → dspStore.initiateEDRTransfer() + getEDRToken()
-  // 2. _accessData() → _fetchDataWithLongPolling() → dspStore.fetchWithEDRToken()
-  // ============================================================================
-
-  /**
-   * Initiate EDR transfer for HTTP Pull data access
-   * Delegates to the DataspaceConnectorStore
-   */
-  async _initiateEDRTransfer() {
-    try {
-      this.gettingEDR = true;
-      this.transferError = undefined;
-      this.requestUpdate();
-
-      // Use the DSP store passed as property
-      if (!this.dspStore) {
-        throw new Error("DSP connector not configured.");
-      }
-
-      const obj = this.object as any;
-      const assetId = obj.datasetId || obj.assetId;
-      const counterPartyAddress = obj.counterPartyAddress;
-
-      if (!assetId) {
-        throw new Error("No asset ID found in service object");
-      }
-
-      if (!counterPartyAddress) {
-        throw new Error("No provider endpoint address found");
-      }
-
-      if (!this.contractId) {
-        throw new Error(
-          "No contract agreement available. Please complete contract negotiation first.",
-        );
-      }
-
-      // Get providerParticipantId to properly key the agreement mapping
-      const providerId =
-        obj.counterPartyId || obj._providerParticipantId || obj._provider || "";
-
-      // Store delegates to DataspaceConnectorStore.initiateEDRTransfer()
-      // which handles the transfer process creation
-      const transferId = await this.dspStore.initiateEDRTransfer(
-        assetId,
-        counterPartyAddress,
-        this.contractId,
-        providerId,
-      );
-
-      // Store delegates to DataspaceConnectorStore.getEDRToken()
-      // which handles polling (10 attempts × 2s) and returns EDR data address
-      const edrDataAddress = await this.dspStore.getEDRToken(transferId);
-
-      if (!edrDataAddress) {
-        throw new Error("Failed to retrieve EDR token");
-      }
-
-      // Transform localhost endpoint to public provider address if needed
-      let transformedEndpoint = edrDataAddress.endpoint;
-      if (
-        transformedEndpoint.includes("localhost") ||
-        transformedEndpoint.includes("127.0.0.1")
-      ) {
-        const providerBase = counterPartyAddress.replace("/protocol", "");
-        const localUrl = new URL(transformedEndpoint);
-        transformedEndpoint = `${providerBase}${localUrl.pathname}${localUrl.search}`;
-      }
-
-      // Store the EDR information for data access
-      this.transferId = transferId;
-      this.edrToken = edrDataAddress.authorization;
-      this.edrEndpoint = transformedEndpoint;
-    } catch (error) {
-      console.error("❌ EDR transfer failed:", error);
-      this.transferError = (error as Error).message;
-    } finally {
-      this.gettingEDR = false;
-      this.requestUpdate();
-    }
-  }
-
-  /**
-   * Access data using EDR token with long-polling strategy
-   * Delegates to the DataspaceConnectorStore for actual data fetching
-   */
-  async _accessData() {
-    try {
-      this.accessingData = true;
-      this.dataAccessError = undefined;
-      this.dataResult = undefined;
-      this.requestUpdate();
-
-      if (!this.dspStore) {
-        throw new Error("DSP connector not configured.");
-      }
-
-      if (!this.edrToken || !this.edrEndpoint) {
-        throw new Error(
-          'No EDR token available. Please click "Get EDR Token" first.',
-        );
-      }
-
-      const obj = this.object as any;
-      const counterPartyAddress = obj.counterPartyAddress;
-
-      // Transform localhost endpoint to public provider address if needed
-      let transformedEndpoint = this.edrEndpoint;
-      if (
-        transformedEndpoint.includes("localhost") ||
-        transformedEndpoint.includes("127.0.0.1")
-      ) {
-        const providerBase = counterPartyAddress.replace("/protocol", "");
-        const localUrl = new URL(transformedEndpoint);
-        transformedEndpoint = `${providerBase}${localUrl.pathname}${localUrl.search}`;
-      }
-
-      // Build EDR data address object for the store
-      const edrDataAddress = {
-        endpoint: transformedEndpoint,
-        authorization: this.edrToken,
-        authType: "bearer",
-        type: "https://w3id.org/idsa/v4.1/HTTP",
-        endpointType: "https://w3id.org/idsa/v4.1/HTTP",
-      };
-
-      // Implement UI-level long-polling with progress feedback
-      // The store's fetchWithEDRToken handles the actual HTTP request
-      const data = await this._fetchDataWithLongPolling(edrDataAddress);
-
-      this.dataResult = data;
-    } catch (error) {
-      console.error("❌ Data access failed:", error);
-      this.dataAccessError = (error as Error).message;
-    } finally {
-      this.accessingData = false;
-      this.dataAccessAttempt = undefined;
-      this.dataAccessMaxAttempts = undefined;
-      this.countdown = undefined;
-      this.requestUpdate();
-    }
-  }
-
-  /**
-   * Fetch data with long-polling retry logic and UI progress updates
-   * Delegates actual fetching to DataspaceConnectorStore.fetchWithEDRToken()
-   */
-  async _fetchDataWithLongPolling(
-    edrDataAddress: any,
-    maxAttempts = 12, // 12 attempts over 1 minute
-    pollInterval = 5000, // 5 seconds between attempts
-  ): Promise<any> {
-    this.dataAccessMaxAttempts = maxAttempts;
-
-    for (let attempt = 1; attempt <= maxAttempts; attempt++) {
-      this.dataAccessAttempt = attempt;
-      this.requestUpdate();
-
-      try {
-        // Delegate to store's fetchWithEDRToken method
-        // Store handles the actual HTTP request with proper headers
-        const data = await this.dspStore.fetchWithEDRToken(edrDataAddress);
-
-        if (data) {
-          return data;
-        }
-      } catch (error) {
-        const errorMessage = (error as Error).message;
-        console.warn(
-          `⚠️ Data access attempt ${attempt}/${maxAttempts} failed:`,
-          errorMessage,
-        );
-
-        // Check for specific error types that might resolve with waiting
-        const isRetryableError =
-          errorMessage.includes("404") ||
-          errorMessage.includes("503") ||
-          errorMessage.includes("502") ||
-          errorMessage.includes("timeout") ||
-          errorMessage.includes("not ready") ||
-          errorMessage.includes("processing");
-
-        // If this is the last attempt or not a retryable error, throw
-        if (attempt === maxAttempts || !isRetryableError) {
-          console.error(`❌ Final data access attempt failed: ${errorMessage}`);
-          throw error;
-        }
-      }
-
-      // Wait before next attempt (except on the last iteration)
-      if (attempt < maxAttempts) {
-        // Show countdown in UI during wait
-        for (let countdown = pollInterval / 1000; countdown > 0; countdown--) {
-          this.countdown = countdown;
-          this.requestUpdate();
-          await new Promise((resolve) => setTimeout(resolve, 1000));
-        }
-        this.countdown = undefined;
-      }
-    }
-
-    throw new Error(
-      `Data access failed after ${maxAttempts} attempts over ${(maxAttempts * pollInterval) / 1000} seconds`,
-    );
-  }
 
   _renderBoolean(field: boolean): TemplateResultOrSymbol {
     if (field) {
@@ -1545,88 +1078,6 @@ export class Ds4goCatalogModal extends TemsObjectHandler {
     </div>`;
   }
 
-  _renderApiAccessGuide(): TemplateResultOrSymbol {
-    // Only show for services with API Gateway configuration
-    if (!this.apiGatewayConfig) {
-      return nothing;
-    }
-
-    const obj = this.object as any;
-    const serviceUrl = obj.url;
-    const agreementId = this.contractId || "<your-agreement-id>";
-
-    const { keycloakUrl, realm, clientId, apiGatewayBaseUrl } =
-      this.apiGatewayConfig;
-
-    return html`
-      <div style="margin-top: 16px; padding: 16px; background: #f5f5f5; border-radius: 8px; font-family: monospace; font-size: 0.9em;">
-        ${this._renderDivision("h4", msg("API Access Guide"))}
-
-        <div style="margin-bottom: 16px;">
-          <strong>Step 1: Get Keycloak Access Token</strong>
-          <pre style="background: #fff; padding: 12px; border-radius: 4px; overflow-x: auto; margin-top: 8px;"><code>curl -X POST '${keycloakUrl}/realms/${realm}/protocol/openid-connect/token' \\
-  -H 'Content-Type: application/x-www-form-urlencoded' \\
-  -d 'grant_type=password' \\
-  -d 'client_id=${clientId}' \\
-  -d 'client_secret=<your-client-secret>' \\
-  -d 'username=<your-username>' \\
-  -d 'password=<your-password>' \\
-  -d 'scope=openid'</code></pre>
-          <div style="margin-top: 8px; color: #666; font-size: 0.9em;">
-            Response: <code>{ "access_token": "eyJhbGc...", ... }</code>
-          </div>
-        </div>
-
-        <div style="margin-bottom: 16px;">
-          <strong>Step 2: Get API Gateway Token</strong>
-          <pre style="background: #fff; padding: 12px; border-radius: 4px; overflow-x: auto; margin-top: 8px;"><code>curl -X POST '${apiGatewayBaseUrl}/token' \\
-  -H 'Content-Type: application/json' \\
-  -H 'Authorization: Bearer <access_token_from_step_1>' \\
-  -d '{
-    "agreementId": "${agreementId}"
-  }'</code></pre>
-          <div style="margin-top: 8px; color: #666; font-size: 0.9em;">
-            Response: <code>{ "apiGatewayToken": "xxx...", ... }</code>
-          </div>
-        </div>
-
-        <div style="margin-bottom: 16px;">
-          <strong>Step 3: Call the Service</strong>
-          <pre style="background: #fff; padding: 12px; border-radius: 4px; overflow-x: auto; margin-top: 8px;"><code>curl -X GET '${serviceUrl || "<service-endpoint>"}' \\
-  -H 'X-API-Gateway-Token: <apiGatewayToken_from_step_2>'</code></pre>
-          <div style="margin-top: 8px; color: #666; font-size: 0.9em;">
-            ${
-              this.negotiationStatus === "granted" && this.contractId
-                ? html`✅ <strong>Agreement ID:</strong>
-                    <code>${this.contractId}</code>`
-                : html`⚠️ You need to complete contract negotiation first to get
-                  an agreement ID.`
-            }
-          </div>
-        </div>
-
-        ${
-          this.apiGatewayToken
-            ? html`
-                <div
-                  style="margin-top: 16px; padding: 12px; background: #e8f5e9; border-radius: 4px;"
-                >
-                  <strong>🎉 Your Current Session:</strong>
-                  <div style="margin-top: 8px;">
-                    <code
-                      style="word-break: break-all; display: block; background: #fff; padding: 8px; border-radius: 4px;"
-                    >
-                      X-API-Gateway-Token:
-                      ${this.apiGatewayToken.substring(0, 40)}...
-                    </code>
-                  </div>
-                </div>
-              `
-            : nothing
-        }
-      </div>
-    `;
-  }
 
   _renderServiceSpecificModal(): TemplateResultOrSymbol {
     return html` ${this._renderColumns(
@@ -1674,14 +1125,6 @@ export class Ds4goCatalogModal extends TemsObjectHandler {
           msg("Last Update"),
           formatDate(this.object.last_update),
         ),
-      )}${this.renderTemplateWhenWith(["url"], () =>
-        this._renderButton(
-          undefined,
-          "sm",
-          "Access the service",
-          "outline-gray",
-          this.object.url,
-        ),
       )}${this.renderTemplateWhenWith(["documentation_url"], () =>
         this._renderButton(
           undefined,
@@ -1691,9 +1134,7 @@ export class Ds4goCatalogModal extends TemsObjectHandler {
           this.object.documentation_url,
         ),
       )}
-      ${this._renderPolicyDescription()} ${this._renderAgreementInfo()}
-      ${this._renderApiAccessGuide()} ${this._renderApiTestingSection()}
-      ${this._renderEDRDataAccessSection()}`,
+      ${this._renderPolicyDescription()} ${this._renderAgreementInfo()}`,
     )}`;
   }
 
@@ -1871,294 +1312,6 @@ export class Ds4goCatalogModal extends TemsObjectHandler {
     `;
   }
 
-  _renderEDRDataAccessSection(): TemplateResultOrSymbol {
-    // Only show for services with negotiated access and NO API Gateway config
-    if (this.negotiationStatus !== "granted" || this.apiGatewayConfig) {
-      return nothing;
-    }
-
-    const storedInfo = this._loadAgreementInfo();
-    const agreementDate = storedInfo?.timestamp
-      ? new Date(storedInfo.timestamp).toLocaleString()
-      : null;
-
-    return html`
-      <div
-        style="margin-top: 24px; padding: 16px; background: #f5f5f5; border-radius: 8px;"
-      >
-        ${this._renderDivision("h4", msg("EDR Data Access (HTTP Pull)"))}
-        ${this.contractId
-          ? html`
-              <div
-                style="font-size: 0.85em; opacity: 0.8; padding: 8px; background: rgba(0,128,0,0.05); border-radius: 4px; margin-bottom: 12px;"
-              >
-                <div><strong>Agreement ID:</strong> ${this.contractId}</div>
-                ${agreementDate
-                  ? html`<div style="margin-top: 4px;">
-                      <strong>Agreed on:</strong> ${agreementDate}
-                    </div>`
-                  : nothing}
-                ${this.transferId
-                  ? html`<div style="margin-top: 4px;">
-                      <strong>Transfer ID:</strong> ${this.transferId}
-                    </div>`
-                  : nothing}
-              </div>
-            `
-          : nothing}
-
-        <div style="display: flex; flex-direction: column; gap: 8px;">
-          <!-- Step 1: Get EDR Token -->
-          ${this.gettingEDR
-            ? html`<tems-button disabled="">
-                <span
-                  style="display: inline-block; animation: spin 1s linear infinite;"
-                  >⏳</span
-                >
-                ${msg("Getting EDR token...")}
-              </tems-button>`
-            : !this.edrToken
-              ? html`<tems-button
-                  @click=${this._initiateEDRTransfer}
-                  type="outline-gray"
-                >
-                  🚀 ${msg("Get EDR Token")}
-                </tems-button>`
-              : html`
-                  <div
-                    style="color: green; font-size: 0.85em; padding: 8px; background: rgba(0,128,0,0.05); border-radius: 4px;"
-                  >
-                    <strong>✅ ${msg("EDR Token Ready")}</strong>
-                    ${this.edrEndpoint
-                      ? html`<div
-                          style="margin-top: 4px; font-family: monospace; font-size: 0.8em; word-break: break-all;"
-                        >
-                          <strong>Endpoint:</strong> ${this.edrEndpoint}
-                        </div>`
-                      : nothing}
-                  </div>
-                `}
-          ${this.transferError
-            ? html`
-                <div
-                  style="color: red; font-size: 0.85em; padding: 8px; background: rgba(255,0,0,0.05); border-radius: 4px;"
-                >
-                  ⚠️ ${this.transferError}
-                  <tems-button
-                    @click=${this._initiateEDRTransfer}
-                    type="outline-gray"
-                    style="margin-top: 8px;"
-                  >
-                    🔄 ${msg("Retry")}
-                  </tems-button>
-                </div>
-              `
-            : nothing}
-
-          <!-- Step 2: Access Data -->
-          ${this.edrToken
-            ? this.accessingData
-              ? html`<tems-button disabled="">
-                  <span
-                    style="display: inline-block; animation: spin 1s linear infinite;"
-                    >📡</span
-                  >
-                  ${msg("Accessing data")}
-                  ${this.dataAccessAttempt
-                    ? ` (${this.dataAccessAttempt}/${this.dataAccessMaxAttempts})`
-                    : "..."}
-                  ${this.countdown
-                    ? html`<br /><span style="font-size: 0.8em;"
-                          >⏳ Next retry in ${this.countdown}s</span
-                        >`
-                    : nothing}
-                </tems-button>`
-              : html`<tems-button @click=${this._accessData} type="primary">
-                  📁 ${msg("Access Data")}
-                </tems-button>`
-            : nothing}
-          ${this.dataAccessError
-            ? html`
-                <div
-                  style="color: red; font-size: 0.85em; padding: 8px; background: rgba(255,0,0,0.05); border-radius: 4px;"
-                >
-                  ⚠️ ${this.dataAccessError}
-                </div>
-              `
-            : nothing}
-          ${this.dataResult
-            ? html`
-                <div
-                  style="color: green; font-size: 0.85em; padding: 8px; background: rgba(0,128,0,0.05); border-radius: 4px; max-height: 300px; overflow-y: auto;"
-                >
-                  <strong>✅ ${msg("Data retrieved successfully:")}</strong>
-                  <pre
-                    style="margin-top: 8px; font-size: 0.9em; white-space: pre-wrap; word-wrap: break-word; background: white; padding: 8px; border-radius: 4px;"
-                  >
-${JSON.stringify(this.dataResult, null, 2)}</pre
-                  >
-                </div>
-              `
-            : nothing}
-        </div>
-
-        <div
-          style="margin-top: 16px; padding: 12px; background: rgba(0,0,0,0.05); border-radius: 4px; font-size: 0.85em;"
-        >
-          <div style="margin-bottom: 4px;">
-            <strong>ℹ️ ${msg("About EDR (Endpoint Data Reference)")}</strong>
-          </div>
-          <div>
-            ${msg(
-              "EDR is the Eclipse Dataspace Protocol's HTTP Pull mechanism for accessing data. The EDR token provides temporary, authorized access to the provider's data endpoint.",
-            )}
-          </div>
-        </div>
-
-        ${storedInfo
-          ? html`
-              <div
-                style="margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(0,0,0,0.1);"
-              >
-                <button
-                  @click=${this._renewContract}
-                  style="font-size: 0.85em; color: #666; background: none; border: none; cursor: pointer; text-decoration: underline; padding: 0;"
-                >
-                  🔄 ${msg("Renegotiate contract")}
-                </button>
-              </div>
-            `
-          : nothing}
-      </div>
-
-      <style>
-        @keyframes spin {
-          0% {
-            transform: rotate(0deg);
-          }
-          100% {
-            transform: rotate(360deg);
-          }
-        }
-      </style>
-    `;
-  }
-
-  _renderApiTestingSection(): TemplateResultOrSymbol {
-    // Only show for services with negotiated access AND API Gateway config
-    if (this.negotiationStatus !== "granted" || !this.apiGatewayConfig) {
-      return nothing;
-    }
-
-    const storedInfo = this._loadAgreementInfo();
-    const agreementDate = storedInfo?.timestamp
-      ? new Date(storedInfo.timestamp).toLocaleString()
-      : null;
-
-    return html`
-      <div
-        style="margin-top: 24px; padding: 16px; background: #f5f5f5; border-radius: 8px;"
-      >
-        ${this._renderDivision("h4", msg("API Testing"))}
-        ${this.contractId
-          ? html`
-              <div
-                style="font-size: 0.85em; opacity: 0.8; padding: 8px; background: rgba(0,128,0,0.05); border-radius: 4px; margin-bottom: 12px;"
-              >
-                <div><strong>Agreement ID:</strong> ${this.contractId}</div>
-                ${agreementDate
-                  ? html`<div style="margin-top: 4px;">
-                      <strong>Agreed on:</strong> ${agreementDate}
-                    </div>`
-                  : nothing}
-              </div>
-            `
-          : nothing}
-
-        <div style="display: flex; flex-direction: column; gap: 8px;">
-          <!-- Button 1: Get Gateway Token -->
-          ${this.gettingToken
-            ? html`<tems-button disabled="">
-                ${msg("Getting token...")}
-              </tems-button>`
-            : html`<tems-button
-                @click=${this._getGatewayToken}
-                type="outline-gray"
-                ?disabled=${!!this.apiGatewayToken}
-              >
-                🔑 ${msg("Get gateway token")}
-              </tems-button>`}
-
-          <!-- Button 2: Test Service (only if displayServiceTest is enabled) -->
-          ${this.displayServiceTest
-            ? this.testingService
-              ? html`<tems-button disabled="">
-                  ${msg("Testing service...")}
-                </tems-button>`
-              : html`<tems-button
-                  @click=${this._testService}
-                  type="primary"
-                  ?disabled=${!this.apiGatewayToken}
-                >
-                  🧪 ${msg("Test service")}
-                </tems-button>`
-            : nothing}
-          ${this.apiGatewayError
-            ? html`
-                <div style="color: red; font-size: 0.85em;">
-                  ⚠️ ${this.apiGatewayError}
-                </div>
-              `
-            : nothing}
-          ${this.apiGatewayToken
-            ? html`
-                <div
-                  style="color: green; font-size: 0.85em; padding: 8px; background: rgba(0,128,0,0.05); border-radius: 4px;"
-                >
-                  <div style="margin-bottom: 4px;">
-                    <strong>✅ ${msg("API Gateway token obtained")}</strong>
-                  </div>
-                  <div
-                    style="word-break: break-all; font-family: monospace; font-size: 0.9em;"
-                  >
-                    <strong>X-API-Gateway-Token:</strong><br />
-                    ${this.apiGatewayToken}
-                  </div>
-                </div>
-              `
-            : nothing}
-          ${this.displayServiceTest && this.testResult
-            ? html`
-                <div
-                  style="color: green; font-size: 0.85em; padding: 8px; background: rgba(0,128,0,0.05); border-radius: 4px; max-height: 200px; overflow-y: auto;"
-                >
-                  <strong>✅ ${msg("Service response:")}</strong>
-                  <pre
-                    style="margin-top: 4px; font-size: 0.9em; white-space: pre-wrap; word-wrap: break-word;"
-                  >
-${JSON.stringify(this.testResult, null, 2)}</pre
-                  >
-                </div>
-              `
-            : nothing}
-          ${storedInfo
-            ? html`
-                <div
-                  style="margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(0,0,0,0.1);"
-                >
-                  <button
-                    @click=${this._renewContract}
-                    style="font-size: 0.85em; color: #666; background: none; border: none; cursor: pointer; text-decoration: underline; padding: 0;"
-                  >
-                    🔄 ${msg("Renegotiate contract")}
-                  </button>
-                </div>
-              `
-            : nothing}
-        </div>
-      </div>
-    `;
-  }
 
   _closeModal() {
     this.dispatchEvent(new CustomEvent("close"));