feat(ui): adding row components

ui/eslint.config.js

@@ -33,4 +33,9 @@ export default [
   {
     ignores: ['build/', '.svelte-kit/', 'dist/'],
   },
+  {
+    rules: {
+      'svelte/no-at-html-tags': 'off',
+    },
+  },
 ]

ui/package.json

@@ -27,11 +27,13 @@
     "autoprefixer": "10.4.19",
     "carbon-icons-svelte": "12.10.0",
     "date-fns": "3.6.0",
+    "dompurify": "^3.1.6",
     "eslint": "9.7.0",
     "eslint-config-prettier": "9.1.0",
     "eslint-plugin-svelte": "2.43.0",
     "flowbite": "2.4.1",
     "globals": "15.8.0",
+    "highlight.js": "^11.10.0",
     "jsdom": "24.1.1",
     "prettier": "3.3.3",
     "prettier-plugin-organize-imports": "^4.0.0",
@@ -45,7 +47,8 @@
     "typescript-eslint": "8.0.0-alpha.52",
     "uds-core-types": "defenseunicorns/uds-core#1f2005b",
     "vite": "5.3.4",
-    "vitest": "2.0.4"
+    "vitest": "2.0.4",
+    "yaml": "^2.5.0"
   },
   "type": "module"
 }

ui/src/lib/components/Drawer/Row.svelte

@@ -0,0 +1,79 @@
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+<!-- SPDX-FileCopyrightText: 2024-Present The UDS Authors -->
+
+<script context="module" lang="ts">
+  export type VariantType = 'text' | 'icon-text' | 'external-link' | 'internal-link' | 'input-copy' | 'badges'
+</script>
+
+<script lang="ts">
+  import { CopyFile } from 'carbon-icons-svelte'
+
+  import RowItem from './RowItem.svelte'
+
+  export let label: string = 'text'
+
+  type Props = {} & (
+    | { variant: 'text'; value: string }
+    | { variant: 'icon-text'; value: string }
+    | { variant: 'external-link'; value: string }
+    | { variant: 'internal-link'; value: string }
+    | { variant: 'input-copy'; value: string[] }
+    | { variant: 'badges'; value: string[] }
+  )
+
+  export let data: Props
+</script>
+
+{#if data.variant === 'text' || data.variant === 'icon-text'}
+  <RowItem {label} variant={data.variant}>
+    <div class="text-gray-300 text-base font-extralight leading-normal">Value string</div>
+  </RowItem>
+{:else if data.variant === 'external-link'}
+  <RowItem {label} variant={data.variant}>
+    <div class="text-base font-extralight text-blue-600 leading-normal underline">
+      <a href={data.value}> Value string </a>
+    </div>
+  </RowItem>
+{:else if data.variant === 'internal-link'}
+  <RowItem {label} variant={data.variant}>
+    <div class="text-base font-extralight text-blue-600 leading-normal">
+      <button on:click={() => console.log('clicked')}> Value string </button>
+    </div>
+  </RowItem>
+{:else if data.variant === 'input-copy'}
+  <RowItem {label} variant={data.variant}>
+    <div class="text-base leading-normal text-white flex flex-col">
+      {#each data.value as path}
+        <div class="w-[364px] justify-start items-start gap-1 mb-2">
+          <div
+            class="self-stretch px-4 py-1 bg-gray-700 rounded-md border border-gray-600 justify-start items-center gap-2.5 inline-flex mb-2"
+          >
+            <div class="grow shrink basis-0 h-[21px] justify-start items-center gap-2.5 flex w-[450px]">
+              <div class="grow shrink basis-0 text-gray-400 text-sm font-normal leading-[21px]">
+                {path}
+              </div>
+
+              <div class="w-2.5 h-3.5 relative bg-white/0 text-gray-400">
+                <CopyFile />
+              </div>
+            </div>
+          </div>
+
+          <div class="self-stretch text-gray-400 text-xs font-normal leading-[15px]">from what resource</div>
+        </div>
+      {/each}
+    </div>
+  </RowItem>
+{:else if data.variant === 'badges'}
+  <RowItem {label} variant={data.variant}>
+    <div class="text-base leading-normal text-white flex">
+      {#each data.value as badge}
+        <span
+          class="bg-gray-100 text-gray-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-gray-300"
+        >
+          {badge}
+        </span>
+      {/each}
+    </div>
+  </RowItem>
+{/if}

ui/src/lib/components/Drawer/RowItem.svelte

@@ -0,0 +1,23 @@
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+<!-- SPDX-FileCopyrightText: 2024-Present The UDS Authors -->
+
+<script lang="ts">
+  import { Db2Database } from 'carbon-icons-svelte'
+
+  import { type VariantType } from './Row.svelte'
+
+  export let label: string
+  export let variant: VariantType
+</script>
+
+<div class="py-1 border-b border-gray-700 gap-9 flex mt-3">
+  <div class="h-6 justify-start items-center gap-1.5 flex my-1 w-[180px]">
+    {#if variant === 'icon-text'}
+      <Db2Database color="white" />
+    {/if}
+    <div class="text-white text-base font-semibold leading-normal">{label}</div>
+  </div>
+  <div class="justify-start items-center gap-1.5 flex">
+    <slot />
+  </div>
+</div>

ui/src/lib/components/index.ts

@@ -2,5 +2,7 @@
 // SPDX-FileCopyrightText: 2024-Present The UDS Authors
 
 export { default as AnsiDisplay } from './AnsiDisplay/component.svelte'
+export { default as Row } from './Drawer/Row.svelte'
+export { default as RowItem } from './Drawer/RowItem.svelte'
 export { default as DataTable } from './k8s/DataTable/component.svelte'
 export { default as Drawer } from './k8s/Drawer/component.svelte'

ui/src/lib/components/k8s/Drawer/component.svelte

@@ -5,6 +5,10 @@
   import type { KubernetesObject } from '@kubernetes/client-node'
   import { Close } from 'carbon-icons-svelte'
   import { onMount } from 'svelte'
+  import * as YAML from 'yaml'
+  import hljs from 'highlight.js/lib/core'
+  import yaml from 'highlight.js/lib/languages/yaml'
+  import DOMPurify from 'dompurify'
 
   import { goto } from '$app/navigation'
   import './styles.postcss'
@@ -15,6 +19,9 @@
   type Tab = 'metadata' | 'yaml' | 'events'
 
   onMount(() => {
+    // initialize highlight language
+    hljs.registerLanguage('yaml', yaml)
+
     const handleKeydown = (e: KeyboardEvent) => {
       const tabList: Tab[] = ['metadata', 'yaml', 'events']
       let targetTab: string | undefined
@@ -55,11 +62,13 @@
     return new Date(dateString).toLocaleString()
   }
 
+  const { metadata, ...rest } = resource
+
   const details = [
-    { label: 'Created', value: formatDate(resource.metadata?.creationTimestamp as unknown as string) },
-    { label: 'Name', value: resource.metadata?.name },
-    { label: 'Namespace', value: resource.metadata?.namespace },
-    { label: 'Controller', value: resource.metadata?.ownerReferences?.[0]?.name },
+    { label: 'Created', value: formatDate(metadata?.creationTimestamp as unknown as string) },
+    { label: 'Name', value: metadata?.name },
+    { label: 'Namespace', value: metadata?.namespace },
+    { label: 'Controller', value: metadata?.ownerReferences?.[0]?.name },
   ]
 
   let activeTab: Tab = 'metadata'
@@ -71,13 +80,13 @@
 </script>
 
 <div
-  class="fixed top-16 right-0 z-40 h-screen overflow-y-auto transition-transform w-1/2 dark:bg-gray-800 shadow-2xl shadow-black/80 transform transition-transform duration-300 ease-in-out"
+  class="fixed top-16 right-0 z-40 h-screen overflow-y-auto w-1/2 dark:bg-gray-800 shadow-2xl shadow-black/80 transform transition-transform duration-300 ease-in-out"
 >
   <div class="flex flex-col h-full">
     <!-- Dark header -->
     <div class="bg-gray-900 text-white p-4">
       <div class="flex justify-between items-center">
-        <h2 class="text-xl font-semibold">{resource.metadata?.name}</h2>
+        <h2 class="text-xl font-semibold">{metadata?.name}</h2>
         <button
           type="button"
           class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 absolute top-2.5 end-2.5 inline-flex items-center justify-center dark:hover:bg-gray-600 dark:hover:text-white"
@@ -121,7 +130,7 @@
               <dt class="font-bold text-sm sm:w-1/3">Labels</dt>
               <dd class="sm:w-2/3">
                 <div class="flex flex-wrap gap-2">
-                  {#each Object.entries(resource.metadata?.labels || {}) as [key, value]}
+                  {#each Object.entries(metadata?.labels || {}) as [key, value]}
                     <span class="bg-gray-600 px-2 py-0.5 rounded text-white text-xs">{key}: {value}</span>
                   {/each}
                 </div>
@@ -132,7 +141,7 @@
               <dt class="font-bold text-sm sm:w-1/3">Annotations</dt>
               <dd class="sm:w-2/3">
                 <div class="flex flex-wrap gap-2">
-                  {#each Object.entries(resource.metadata?.annotations || {}) as [key, value]}
+                  {#each Object.entries(metadata?.annotations || {}) as [key, value]}
                     <span class="bg-gray-600 px-2 py-0.5 rounded text-white text-xs">{key}: {value}</span>
                   {/each}
                 </div>
@@ -142,7 +151,12 @@
         </div>
       {:else if activeTab === 'yaml'}
         <!-- YAML tab -->
-        <pre class="bg-gray-800 p-6 rounded-lg shadow-lg">{JSON.stringify(resource, null, 2)}</pre>
+        <div class="bg-black text-gray-200 p-4 pb-20">
+          <code class="text-sm text-gray-500 dark:text-gray-400 whitespace-pre">
+            <!-- We turned off svelte/no-at-html-tags eslint rule because we are using DOMPurify to sanitize -->
+            {@html DOMPurify.sanitize(hljs.highlight(YAML.stringify(rest), { language: 'yaml' }).value)}
+          </code>
+        </div>
       {:else if activeTab === 'events'}
         <!-- Events tab -->
         <div class="bg-gray-800 text-gray-200 p-6 rounded-lg shadow-lg">

ui/src/lib/components/k8s/Drawer/styles.postcss

@@ -6,3 +6,16 @@
     @apply text-blue-500 border-b-2 border-blue-500;
   }
 }
+
+.hljs-attr {
+  color: #33bbc8 !important;
+}
+
+.hljs-code,
+.hljs-addition,
+.hljs-title.class_.inherited__,
+.hljs-number,
+.hljs-literal,
+.hljs-string {
+  color: #d338d3 !important;
+}

ui/src/routes/+page.svelte

@@ -2,6 +2,19 @@
 <!-- SPDX-FileCopyrightText: 2024-Present The UDS Authors -->
 
 <script lang="ts">
+  import Row from '$components/Drawer/Row.svelte'
 </script>
 
-<h1 class="text-white text-5xl">Home</h1>
+<h1 class="text-white text-5xl mb-7">Home</h1>
+<Row label="Label" data={{ variant: 'text', value: 'something' }} />
+<Row label="Label" data={{ variant: 'icon-text', value: 'something' }} />
+<Row label="Link" data={{ variant: 'external-link', value: 'something' }} />
+<Row label="Link" data={{ variant: 'internal-link', value: 'something' }} />
+<Row
+  label="Link"
+  data={{
+    variant: 'input-copy',
+    value: ['/etc/link-1', '/etc/bin/link-2', '/var/run/secrets/kubernetes.io/serviceaccount'],
+  }}
+/>
+<Row label="Link" data={{ variant: 'badges', value: ['badge', 'badge', 'badge', 'badge', 'badge', 'badge'] }} />