feat(ui): make package endpoints links (#136)

ui/src/lib/features/k8s/configs/uds-packages/links/component.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  export let endpoints: string[]
+</script>
+
+{#each endpoints as endpoint}
+  <a
+    href={`https://${endpoint}`}
+    target="_blank"
+    rel="noopener noreferrer"
+    on:click|stopPropagation
+    class="font-medium text-blue-600 dark:text-blue-500 hover:underline pr-4">{endpoint}</a
+  >
+{/each}

ui/src/lib/features/k8s/configs/uds-packages/links/component.test.ts

@@ -0,0 +1,14 @@
+import { render } from '@testing-library/svelte'
+
+import EndpointLinks from './component.svelte'
+
+describe('ExemptionElement', () => {
+  test('renders exemption title', () => {
+    const endpoints = ['grafana', 'keycloak']
+    const { getAllByRole } = render(EndpointLinks, { props: { endpoints } })
+    const links = getAllByRole('link')
+    expect(links).toHaveLength(2)
+    expect(links[0]).toHaveTextContent('grafana')
+    expect(links[1]).toHaveTextContent('keycloak')
+  })
+})

ui/src/lib/features/k8s/configs/uds-packages/store.ts

@@ -5,10 +5,11 @@ import type { Package as Resource } from 'uds-core-types/src/pepr/operator/crd/g
 
 import { ResourceStore, transformResource } from '$features/k8s/store'
 import { type ColumnWrapper, type CommonRow, type ResourceStoreInterface } from '$features/k8s/types'
+import EndpointLinks from './links/component.svelte'
 
 interface Row extends CommonRow {
   monitors: string
-  endpoints: string
+  endpoints: { component: typeof EndpointLinks; props: { endpoints: string[] } }
   ssoClients: string
   networkPolicies: number
   status: string
@@ -22,7 +23,7 @@ export function createStore(): ResourceStoreInterface<Resource, Row> {
 
   const transform = transformResource<Resource, Row>((r) => ({
     monitors: r.status?.monitors?.join(', ') ?? '',
-    endpoints: r.status?.endpoints?.join(', ') ?? '',
+    endpoints: { component: EndpointLinks, props: { endpoints: r.status?.endpoints || [] } },
     ssoClients: r.status?.ssoClients?.join(', ') ?? '',
     networkPolicies: r.status?.networkPolicyCount ?? 0,
     status: r.status?.phase ?? '',