refactor(emcn): own shared resource row and tile chrome

Author: Bill Leoutsakos

apps/sim/app/workspace/[workspaceId]/components/resource-tile/index.ts

@@ -3,4 +3,4 @@ export {
   RESOURCE_TILE_FILL,
   RESOURCE_TILE_PLAIN,
   ResourceTile,
-} from '@/app/workspace/[workspaceId]/components/resource-tile/resource-tile'
+} from '@sim/emcn'

apps/sim/app/workspace/[workspaceId]/components/resource-tile/resource-tile.tsx

@@ -26,8 +26,41 @@ vi.mock('@sim/browser-protocol', () => ({
 }))
 
 vi.mock('@sim/emcn', () => ({
-  /** `SettingsResourceRow` composes its tile classes with `cn`. */
   cn: (...classes: unknown[]) => classes.filter(Boolean).join(' '),
+  ResourceRow: ({
+    title,
+    description,
+    icon,
+    trailing,
+    onClick,
+    clickLabel,
+    disabled,
+  }: {
+    title: ReactNode
+    description?: ReactNode
+    icon?: ReactNode
+    trailing?: ReactNode
+    onClick?: () => void
+    clickLabel?: string
+    disabled?: boolean
+  }) => (
+    <div>
+      {onClick && !disabled ? (
+        <button type='button' aria-label={clickLabel} onClick={onClick}>
+          {icon}
+          {title}
+          {description}
+        </button>
+      ) : (
+        <span>
+          {icon}
+          {title}
+          {description}
+        </span>
+      )}
+      {trailing}
+    </div>
+  ),
   Chip: ({
     children,
     disabled,

apps/sim/app/workspace/[workspaceId]/settings/components/browser/browser.test.tsx

@@ -15,8 +15,41 @@ const { mockBridge, mockSearch, mockToast } = vi.hoisted(() => ({
 }))
 
 vi.mock('@sim/emcn', () => ({
-  /** `SettingsResourceRow` composes its tile classes with `cn`. */
   cn: (...classes: unknown[]) => classes.filter(Boolean).join(' '),
+  ResourceRow: ({
+    title,
+    description,
+    icon,
+    trailing,
+    onClick,
+    clickLabel,
+    disabled,
+  }: {
+    title: ReactNode
+    description?: ReactNode
+    icon?: ReactNode
+    trailing?: ReactNode
+    onClick?: () => void
+    clickLabel?: string
+    disabled?: boolean
+  }) => (
+    <div>
+      {onClick && !disabled ? (
+        <button type='button' aria-label={clickLabel} onClick={onClick}>
+          {icon}
+          {title}
+          {description}
+        </button>
+      ) : (
+        <span>
+          {icon}
+          {title}
+          {description}
+        </span>
+      )}
+      {trailing}
+    </div>
+  ),
   ArrowLeft: () => <span />,
   ArrowRight: () => <span />,
   ChipConfirmModal: ({

apps/sim/app/workspace/[workspaceId]/settings/components/browser/components/passwords-view/passwords-view.test.tsx

@@ -1,6 +1,2 @@
-export {
-  RESOURCE_LIST_GRID,
-  RESOURCE_LIST_STACK,
-  RESOURCE_ROW_ARROW_CLASSES,
-  SettingsResourceRow,
-} from './settings-resource-row'
+export { RESOURCE_LIST_GRID, RESOURCE_LIST_STACK, RESOURCE_ROW_ARROW_CLASSES } from '@sim/emcn'
+export { SettingsResourceRow } from './settings-resource-row'

apps/sim/app/workspace/[workspaceId]/settings/components/settings-resource-row/index.ts

@@ -0,0 +1,31 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, it } from 'vitest'
+import { SettingsResourceRow } from './settings-resource-row'
+
+describe('SettingsResourceRow', () => {
+  it('renders a real Next link beside interactive trailing controls', () => {
+    const html = renderToStaticMarkup(
+      <SettingsResourceRow
+        title='Knowledge base'
+        description='Connected resource'
+        href='/workspace/example/knowledge'
+        clickLabel='Open knowledge base'
+        navigable
+        trailing={<button type='button'>More actions</button>}
+      />
+    )
+    const container = document.createElement('div')
+    container.innerHTML = html
+
+    const link = container.querySelector('a')
+    const action = container.querySelector('button')
+    expect(link?.getAttribute('href')).toBe('/workspace/example/knowledge')
+    expect(link?.getAttribute('aria-label')).toBe('Open knowledge base')
+    expect(link?.getAttribute('aria-describedby')).toBe(container.querySelector('span[id]')?.id)
+    expect(link?.contains(action ?? null)).toBe(false)
+    expect(action?.textContent).toBe('More actions')
+  })
+})