Making copy and paste possible again. Shared consent card. Link to

metrics from User

Author: simonredfern

apps/api-manager/src/lib/components/ConsentCard.svelte

@@ -167,7 +167,6 @@
     font-size: 0.8rem;
     font-weight: 500;
     white-space: nowrap;
-    user-select: none;
   }
 
   :global([data-mode="dark"]) .qf-inline span {

apps/api-manager/src/lib/components/metrics/AggregateMetricsQueryForm.svelte

@@ -221,7 +221,6 @@
     font-size: 0.8rem;
     font-weight: 500;
     white-space: nowrap;
-    user-select: none;
   }
 
   :global([data-mode="dark"]) .qf-inline span {

apps/api-manager/src/lib/components/metrics/MetricsQueryForm.svelte

@@ -1087,7 +1087,6 @@
     font-size: 0.8rem;
     font-weight: 500;
     white-space: nowrap;
-    user-select: none;
   }
 
   :global([data-mode="dark"]) .hf span {

apps/api-manager/src/routes/(protected)/metrics/+page.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { Accordion } from "@skeletonlabs/skeleton-svelte";
   import { type SessionData } from "svelte-kit-sessions";
-  import ConsentCard from "$lib/components/ConsentCard.svelte";
+  import { ConsentCard } from "@obp/shared/components";
   import { toast } from "$lib/utils/toastService.js";
   import { Clock } from "@lucide/svelte";
   import { userPreferences, DATE_FORMAT_OPTIONS, THEME_OPTIONS, type DateFormat, type Theme } from "$lib/stores/userPreferences.svelte";

apps/api-manager/src/routes/(protected)/user/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import ConsentCard from "$lib/components/ConsentCard.svelte";
+  import { ConsentCard } from "@obp/shared/components";
 
   let { data } = $props();
 

apps/api-manager/src/routes/(protected)/user/consents/+page.svelte

@@ -11,6 +11,12 @@
   let hasApiAccess = $derived(data.hasApiAccess);
   let pageError = $derived(data.error);
 
+  // from_date for the "View API Metrics" link: one week ago, in the
+  // datetime-local format (yyyy-MM-ddTHH:mm) the metrics query form expects.
+  const metricsFromDate = new Date(Date.now() - 7 * 24 * 60 * 60 * 1000)
+    .toISOString()
+    .slice(0, 16);
+
   $effect(() => {
     if (user) {
       const entitlements = user.entitlements?.length || 0;
@@ -71,7 +77,20 @@
         <div class="info-grid">
           <div class="info-item">
             <div class="info-label">User ID</div>
-            <div class="info-value font-mono">{user.user_id || "N/A"}</div>
+            <div class="info-value">
+              <span class="font-mono">{user.user_id || "N/A"}</span>
+              {#if user.user_id}
+                <a
+                  href="/metrics?user_id={encodeURIComponent(
+                    user.user_id,
+                  )}&from_date={encodeURIComponent(metricsFromDate)}"
+                  class="action-link"
+                  data-testid="user-metrics-link"
+                >
+                  View API Metrics
+                </a>
+              {/if}
+            </div>
           </div>
           <div class="info-item">
             <div class="info-label">Email</div>

apps/api-manager/src/routes/(protected)/users/[user_id]/+page.svelte

@@ -357,12 +357,15 @@
   .search-box input {
     flex: 1;
     border: none;
-    outline: none;
     background: transparent;
     font-size: 0.875rem;
     color: #111827;
   }
 
+  .search-box:focus-within {
+    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.4);
+  }
+
   :global([data-mode="dark"]) .search-box input {
     color: var(--color-surface-100);
   }