chore: merge executor worktree (10-08 admin views wiring)
This commit is contained in:
curo1305
@@ -0,0 +1,131 @@
|
||||
---
|
||||
phase: 10-ux-interaction
|
||||
plan: "08"
|
||||
subsystem: frontend/views
|
||||
tags: [skeleton, breadcrumb, empty-state, tdd, admin, ux]
|
||||
dependency_graph:
|
||||
requires: [10-02, 10-03, 10-05]
|
||||
provides: [AdminAuditView-skeleton, AdminUsersView-skeleton, AdminAuditView-EmptyState, SharedView-EmptyState, CloudStorageView-EmptyState, BreadcrumbBar-in-all-admin-views]
|
||||
affects: [AdminAuditView.vue, AdminUsersView.vue, AdminQuotasView.vue, AdminAiView.vue, AdminOverviewView.vue, SettingsView.vue, SharedView.vue, CloudStorageView.vue]
|
||||
tech_stack:
|
||||
added: []
|
||||
patterns: [skeleton-tbody-v-for, EmptyState-named-cta-slot, BreadcrumbBar-showRoot-false, computed-breadcrumbSegments]
|
||||
key_files:
|
||||
created: []
|
||||
modified:
|
||||
- frontend/src/views/admin/AdminAuditView.vue
|
||||
- frontend/src/views/admin/AdminUsersView.vue
|
||||
- frontend/src/views/admin/AdminQuotasView.vue
|
||||
- frontend/src/views/admin/AdminAiView.vue
|
||||
- frontend/src/views/admin/AdminOverviewView.vue
|
||||
- frontend/src/views/SettingsView.vue
|
||||
- frontend/src/views/SharedView.vue
|
||||
- frontend/src/views/CloudStorageView.vue
|
||||
- frontend/src/views/admin/__tests__/AdminAuditView.skeleton.test.js
|
||||
- frontend/src/views/admin/__tests__/AdminUsersView.skeleton.test.js
|
||||
decisions:
|
||||
- "CloudStorageView BreadcrumbBar placed inside the toolbar div (replaces static span text) to preserve existing layout structure"
|
||||
- "AdminOverviewView keeps existing h2 heading alongside the empty-segments BreadcrumbBar (plan permits this when heading exists)"
|
||||
- "CTA slot test for AdminAuditView mounts without stubbing EmptyState so #cta slot content renders"
|
||||
- "Worktree symlinks node_modules to main repo for test execution"
|
||||
metrics:
|
||||
duration: "394s (~6.5 minutes)"
|
||||
completed: "2026-06-15T18:27:30Z"
|
||||
tasks_completed: 3
|
||||
tasks_total: 3
|
||||
files_created: 0
|
||||
files_modified: 10
|
||||
requirements: [UX-04, UX-01, UX-12]
|
||||
---
|
||||
|
||||
# Phase 10 Plan 08: Admin Skeletons, EmptyStates, and BreadcrumbBar Wiring Summary
|
||||
|
||||
**One-liner:** Skeleton tbody rows (8 for audit / 5 for users), BreadcrumbBar added to all 5 admin views + SettingsView + SharedView + CloudStorageView, and EmptyState components replacing inline empty divs in AdminAuditView / SharedView / CloudStorageView.
|
||||
|
||||
## Tasks Completed
|
||||
|
||||
| Task | Name | Commit | Files |
|
||||
|------|------|--------|-------|
|
||||
| 1 | Promote AdminAuditView + AdminUsersView skeleton test stubs | ec5fd23 | AdminAuditView.skeleton.test.js, AdminUsersView.skeleton.test.js |
|
||||
| 2 | Update AdminAuditView.vue and AdminUsersView.vue | 8e360f4 | AdminAuditView.vue, AdminUsersView.vue, AdminAuditView.skeleton.test.js (CTA fix) |
|
||||
| 3 | BreadcrumbBar in remaining admin views + SettingsView; EmptyState in SharedView + CloudStorageView | 3e79423 | AdminQuotasView.vue, AdminAiView.vue, AdminOverviewView.vue, SettingsView.vue, SharedView.vue, CloudStorageView.vue |
|
||||
|
||||
## What Was Built
|
||||
|
||||
### UX-04: Skeleton Table Rows
|
||||
|
||||
**AdminAuditView.vue** — The top-level loading spinner (`Loading audit log…` text + animate-spin div) has been replaced. The `<tbody>` now renders 8 skeleton rows (5 `<td>` cells each, all `animate-pulse`) when `loading=true`. When loading is false and entries is empty, an `EmptyState` renders in a colspan=5 cell. When entries exist, the real rows render.
|
||||
|
||||
**AdminUsersView.vue** — Same pattern: 5 skeleton rows x 6 `<td>` cells each. The `v-if="loading"` spinner div is gone. The existing empty/real rendering is now inside a single always-visible table.
|
||||
|
||||
### UX-01: EmptyState Components
|
||||
|
||||
| View | icon | headline | CTA |
|
||||
|------|------|----------|-----|
|
||||
| AdminAuditView | clipboardList | No entries found | Clear filters button |
|
||||
| SharedView | inbox | Nothing shared with you yet | (none) |
|
||||
| CloudStorageView | cloud | No cloud storage connected | Go to Settings router-link |
|
||||
|
||||
### UX-12: BreadcrumbBar Static Segments
|
||||
|
||||
| View | segments | showRoot |
|
||||
|------|----------|----------|
|
||||
| AdminOverviewView | `[]` | false |
|
||||
| AdminUsersView | `[{ label: 'Users' }]` | false |
|
||||
| AdminQuotasView | `[{ label: 'Quotas' }]` | false |
|
||||
| AdminAiView | `[{ label: 'AI Config' }]` | false |
|
||||
| AdminAuditView | `[{ label: 'Audit Log' }]` | false |
|
||||
| SettingsView | `[{ label: 'Settings' }, { label: activeTabLabel }]` | false |
|
||||
| SharedView | `[{ label: 'Shared with me' }]` | false |
|
||||
| CloudStorageView | `[{ label: 'Cloud Storage' }]` | false |
|
||||
|
||||
SettingsView uses a `breadcrumbSegments` computed that maps `activeTab.value` → `tabs.find(t => t.id === activeTab.value).label`.
|
||||
|
||||
## TDD Compliance
|
||||
|
||||
| Gate | Commit | Status |
|
||||
|------|--------|--------|
|
||||
| RED — 8 failing tests | ec5fd23 | PASS |
|
||||
| GREEN — all 8 tests pass | 8e360f4 | PASS |
|
||||
|
||||
## Deviations from Plan
|
||||
|
||||
### Auto-fixed Issues
|
||||
|
||||
**1. [Rule 1 - Bug] CTA slot test required EmptyState not to be stubbed**
|
||||
- **Found during:** Task 2 (GREEN verification)
|
||||
- **Issue:** The test `EmptyState includes a Clear filters CTA button` used `EmptyState: true` (full stub). When an EmptyState is stubbed as `true`, Vue Test Utils renders the component as `<emptystate-stub/>` — named slots are discarded. The `#cta` slot content (the Clear filters button) never rendered, so `wrapper.text()` did not contain 'Clear filters'.
|
||||
- **Fix:** The CTA test mounts AdminAuditView with `EmptyState` NOT stubbed (only `BreadcrumbBar` and `AppIcon` are stubbed). The real EmptyState renders, which renders the slot content.
|
||||
- **Files modified:** `AdminAuditView.skeleton.test.js`
|
||||
- **Commit:** 8e360f4
|
||||
|
||||
**2. [Rule 3 - Layout preservation] CloudStorageView BreadcrumbBar placed inside toolbar**
|
||||
- **Found during:** Task 3
|
||||
- **Issue:** CloudStorageView has a sticky toolbar div with a static `<span>Cloud Storage</span>` label. Adding BreadcrumbBar as a separate element would create visual duplication with the existing toolbar.
|
||||
- **Fix:** Replaced the `<span class="text-sm font-medium text-gray-700">Cloud Storage</span>` with `<BreadcrumbBar :segments="[{ label: 'Cloud Storage' }]" :show-root="false" />` directly in the toolbar, preserving the sticky header layout.
|
||||
- **Files modified:** `CloudStorageView.vue`
|
||||
- **Commit:** 3e79423
|
||||
|
||||
## Known Stubs
|
||||
|
||||
None. All EmptyState usages are fully wired with real data conditions. The BreadcrumbBar segments are static strings derived from the view's own label — no async data needed.
|
||||
|
||||
## Threat Flags
|
||||
|
||||
None. All changes are presentational — no new network endpoints, no auth paths, no file access. The EmptyState components display static strings.
|
||||
|
||||
## Self-Check: PASSED
|
||||
|
||||
- [x] `frontend/src/views/admin/AdminAuditView.vue` — FOUND, contains BreadcrumbBar + EmptyState (clipboardList)
|
||||
- [x] `frontend/src/views/admin/AdminUsersView.vue` — FOUND, contains BreadcrumbBar + 5-row skeleton tbody
|
||||
- [x] `frontend/src/views/admin/AdminQuotasView.vue` — FOUND, contains BreadcrumbBar
|
||||
- [x] `frontend/src/views/admin/AdminAiView.vue` — FOUND, contains BreadcrumbBar
|
||||
- [x] `frontend/src/views/admin/AdminOverviewView.vue` — FOUND, contains BreadcrumbBar
|
||||
- [x] `frontend/src/views/SettingsView.vue` — FOUND, contains BreadcrumbBar + breadcrumbSegments computed
|
||||
- [x] `frontend/src/views/SharedView.vue` — FOUND, contains BreadcrumbBar + EmptyState (inbox)
|
||||
- [x] `frontend/src/views/CloudStorageView.vue` — FOUND, contains BreadcrumbBar + EmptyState (cloud)
|
||||
- [x] Commit ec5fd23 (RED tests) — FOUND
|
||||
- [x] Commit 8e360f4 (GREEN implementation) — FOUND
|
||||
- [x] Commit 3e79423 (Task 3 remaining views) — FOUND
|
||||
- [x] All 8 skeleton tests pass — 8/8
|
||||
- [x] Full suite (worktree): 178/178 pass, 0 failures
|
||||
@@ -4,7 +4,7 @@
|
||||
<!-- Toolbar -->
|
||||
<div class="sticky top-0 z-10 bg-white border-b border-gray-100">
|
||||
<div class="px-6 py-3 flex items-center gap-3">
|
||||
<span class="text-sm font-medium text-gray-700">Cloud Storage</span>
|
||||
<BreadcrumbBar :segments="[{ label: 'Cloud Storage' }]" :show-root="false" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -20,12 +20,18 @@
|
||||
|
||||
<div v-if="loading" class="text-sm text-gray-400 py-8 text-center">Loading…</div>
|
||||
|
||||
<div v-else-if="connections.length === 0" class="text-center py-12 text-gray-400">
|
||||
<p class="text-sm">No cloud storage connected.</p>
|
||||
<router-link to="/settings" class="text-sm text-indigo-600 hover:underline mt-1 inline-block">
|
||||
Add a connection in Settings
|
||||
</router-link>
|
||||
</div>
|
||||
<EmptyState
|
||||
v-else-if="connections.length === 0"
|
||||
icon="cloud"
|
||||
headline="No cloud storage connected"
|
||||
subtext="Connect Google Drive, OneDrive, Nextcloud, or a WebDAV server in Settings."
|
||||
>
|
||||
<template #cta>
|
||||
<router-link to="/settings" class="mt-3 inline-block text-sm text-indigo-600 hover:underline">
|
||||
Go to Settings
|
||||
</router-link>
|
||||
</template>
|
||||
</EmptyState>
|
||||
|
||||
<div v-else class="flex flex-col divide-y divide-gray-100 border border-gray-100 rounded-xl overflow-hidden">
|
||||
<div
|
||||
@@ -63,6 +69,8 @@ import { computed } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useCloudConnectionsStore } from '../stores/cloudConnections.js'
|
||||
import { providerColor, providerBg } from '../utils/formatters.js'
|
||||
import BreadcrumbBar from '../components/ui/BreadcrumbBar.vue'
|
||||
import EmptyState from '../components/ui/EmptyState.vue'
|
||||
|
||||
const router = useRouter()
|
||||
const cloudStore = useCloudConnectionsStore()
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
<template>
|
||||
<div class="p-8 max-w-3xl mx-auto">
|
||||
<BreadcrumbBar :segments="breadcrumbSegments" :show-root="false" class="mb-4" />
|
||||
|
||||
<h2 class="text-2xl font-semibold text-gray-900 mb-1">Settings</h2>
|
||||
<p class="text-sm text-gray-500 mb-6">Account-level options for your DocuVault workspace.</p>
|
||||
|
||||
@@ -84,12 +86,13 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import SettingsPreferencesTab from '../components/settings/SettingsPreferencesTab.vue'
|
||||
import SettingsAiTab from '../components/settings/SettingsAiTab.vue'
|
||||
import SettingsCloudTab from '../components/settings/SettingsCloudTab.vue'
|
||||
import SettingsAccountTab from '../components/settings/SettingsAccountTab.vue'
|
||||
import BreadcrumbBar from '../components/ui/BreadcrumbBar.vue'
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
@@ -101,6 +104,11 @@ const tabs = [
|
||||
]
|
||||
|
||||
const activeTab = ref('preferences')
|
||||
|
||||
const breadcrumbSegments = computed(() => {
|
||||
const tab = tabs.find(t => t.id === activeTab.value)
|
||||
return [{ label: 'Settings' }, { label: tab?.label ?? activeTab.value }]
|
||||
})
|
||||
const oauthSuccessProvider = ref(null)
|
||||
const oauthError = ref(null)
|
||||
|
||||
|
||||
@@ -1,15 +1,19 @@
|
||||
<template>
|
||||
<div class="p-8 max-w-4xl mx-auto">
|
||||
<BreadcrumbBar :segments="[{ label: 'Shared with me' }]" :show-root="false" class="mb-4" />
|
||||
|
||||
<h2 class="text-2xl font-bold text-gray-900 mb-1">Shared with me</h2>
|
||||
<p class="text-gray-500 text-sm mb-6">Documents other users have shared with you.</p>
|
||||
|
||||
<div v-if="loading" class="text-sm text-gray-400">Loading…</div>
|
||||
|
||||
<!-- Empty state -->
|
||||
<div v-else-if="sharedDocs.length === 0" class="text-center py-12 text-gray-400">
|
||||
<p class="text-sm font-medium text-gray-500">No documents shared with you yet.</p>
|
||||
<p class="text-xs mt-1">When someone shares a document with you, it will appear here.</p>
|
||||
</div>
|
||||
<EmptyState
|
||||
v-else-if="sharedDocs.length === 0"
|
||||
icon="inbox"
|
||||
headline="Nothing shared with you yet"
|
||||
subtext="When someone shares a document with you, it will appear here."
|
||||
/>
|
||||
|
||||
<!-- Shared documents list -->
|
||||
<div v-else class="grid gap-3">
|
||||
@@ -51,6 +55,8 @@
|
||||
import { ref, onMounted } from 'vue'
|
||||
import * as api from '../api/client.js'
|
||||
import { formatDate, formatSize } from '../utils/formatters.js'
|
||||
import BreadcrumbBar from '../components/ui/BreadcrumbBar.vue'
|
||||
import EmptyState from '../components/ui/EmptyState.vue'
|
||||
|
||||
const sharedDocs = ref([])
|
||||
const loading = ref(false)
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
<template>
|
||||
<div>
|
||||
<BreadcrumbBar :segments="[{ label: 'AI Config' }]" :show-root="false" class="mb-4" />
|
||||
|
||||
<section class="bg-white rounded-xl border border-gray-200 overflow-hidden mb-6">
|
||||
<div class="px-6 py-4 border-b border-gray-200">
|
||||
<h2 class="text-sm font-semibold text-gray-900">System AI Providers (Global)</h2>
|
||||
@@ -207,6 +209,7 @@ import { ref, reactive, onMounted } from 'vue'
|
||||
import * as api from '../../api/client.js'
|
||||
import { getAiConfig, saveAiConfig, testAiConnection } from '../../api/client.js'
|
||||
import SearchableModelSelect from '../../components/ui/SearchableModelSelect.vue'
|
||||
import BreadcrumbBar from '../../components/ui/BreadcrumbBar.vue'
|
||||
|
||||
|
||||
const _PROVIDER_DEFAULTS = {
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
<template>
|
||||
<div>
|
||||
<BreadcrumbBar :segments="[{ label: 'Audit Log' }]" :show-root="false" class="mb-4" />
|
||||
|
||||
<div class="flex flex-wrap gap-3 mb-4 items-end">
|
||||
<div>
|
||||
<label class="block text-xs font-semibold text-gray-500 mb-1">From</label>
|
||||
@@ -75,20 +77,9 @@
|
||||
<p v-if="exportError" class="text-xs text-red-600 self-center">{{ exportError }}</p>
|
||||
</div>
|
||||
|
||||
<div v-if="loading" class="bg-white rounded-xl border border-gray-200 p-8 text-center">
|
||||
<div class="flex items-center justify-center gap-2 text-gray-400 text-sm">
|
||||
<span class="animate-spin rounded-full border-2 border-current border-t-transparent w-4 h-4"></span>
|
||||
Loading audit log…
|
||||
</div>
|
||||
</div>
|
||||
<p v-if="fetchError" class="text-xs text-red-600 mt-1">{{ fetchError }}</p>
|
||||
|
||||
<p v-else-if="fetchError" class="text-xs text-red-600 mt-1">{{ fetchError }}</p>
|
||||
|
||||
<div v-else-if="entries.length === 0" class="text-center py-12 text-gray-400 text-sm">
|
||||
No audit log entries match the selected filters.
|
||||
</div>
|
||||
|
||||
<div v-else class="bg-white rounded-xl border border-gray-200 overflow-hidden">
|
||||
<div v-if="!fetchError" class="bg-white rounded-xl border border-gray-200 overflow-hidden">
|
||||
<table class="w-full text-sm border-collapse">
|
||||
<thead>
|
||||
<tr class="bg-gray-50 border-b border-gray-200">
|
||||
@@ -100,33 +91,53 @@
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="entry in entries"
|
||||
:key="entry.id"
|
||||
class="border-b border-gray-100 hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
<td class="px-4 py-3 font-mono text-xs text-gray-500">{{ formatTimestamp(entry.created_at) }}</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700">{{ entry.user_handle || entry.user_id || '—' }}</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-500">
|
||||
<span v-if="entry.user_email">{{ entry.user_email }}</span>
|
||||
<span v-else-if="entry.metadata_?.attempted_email_hash" class="text-amber-600 font-mono text-xs">hash:{{ entry.metadata_.attempted_email_hash }} <span class="text-xs not-italic">(attempted)</span></span>
|
||||
<span v-else>—</span>
|
||||
<template v-if="loading">
|
||||
<tr v-for="n in 8" :key="`sk-${n}`" class="border-b border-gray-100">
|
||||
<td class="px-4 py-3"><div class="h-3 bg-gray-100 rounded animate-pulse w-32"></div></td>
|
||||
<td class="px-4 py-3"><div class="h-3 bg-gray-100 rounded animate-pulse w-20"></div></td>
|
||||
<td class="px-4 py-3"><div class="h-3 bg-gray-100 rounded animate-pulse w-36"></div></td>
|
||||
<td class="px-4 py-3"><div class="h-4 bg-gray-100 rounded-full animate-pulse w-16"></div></td>
|
||||
<td class="px-4 py-3"><div class="h-3 bg-gray-100 rounded animate-pulse w-24"></div></td>
|
||||
</tr>
|
||||
</template>
|
||||
<tr v-else-if="entries.length === 0">
|
||||
<td colspan="5" class="px-0 py-0">
|
||||
<EmptyState icon="clipboardList" headline="No entries found" subtext="Try adjusting your filters or date range.">
|
||||
<template #cta>
|
||||
<button @click="clearFilters" class="mt-3 text-sm text-indigo-600 hover:underline">Clear filters</button>
|
||||
</template>
|
||||
</EmptyState>
|
||||
</td>
|
||||
<td class="px-4 py-3">
|
||||
<span
|
||||
class="text-xs px-2 py-1 rounded-full font-medium"
|
||||
:class="actionTypeClass(entry.event_type)"
|
||||
>
|
||||
{{ entry.event_type }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700 font-mono text-xs">{{ entry.ip_address || '—' }}</td>
|
||||
</tr>
|
||||
<template v-else>
|
||||
<tr
|
||||
v-for="entry in entries"
|
||||
:key="entry.id"
|
||||
class="border-b border-gray-100 hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
<td class="px-4 py-3 font-mono text-xs text-gray-500">{{ formatTimestamp(entry.created_at) }}</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700">{{ entry.user_handle || entry.user_id || '—' }}</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-500">
|
||||
<span v-if="entry.user_email">{{ entry.user_email }}</span>
|
||||
<span v-else-if="entry.metadata_?.attempted_email_hash" class="text-amber-600 font-mono text-xs">hash:{{ entry.metadata_.attempted_email_hash }} <span class="text-xs not-italic">(attempted)</span></span>
|
||||
<span v-else>—</span>
|
||||
</td>
|
||||
<td class="px-4 py-3">
|
||||
<span
|
||||
class="text-xs px-2 py-1 rounded-full font-medium"
|
||||
:class="actionTypeClass(entry.event_type)"
|
||||
>
|
||||
{{ entry.event_type }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700 font-mono text-xs">{{ entry.ip_address || '—' }}</td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div v-if="!loading && entries.length > 0" class="flex items-center justify-between mt-4">
|
||||
<div v-if="!loading && !fetchError && entries.length > 0" class="flex items-center justify-between mt-4">
|
||||
<button
|
||||
@click="prevPage"
|
||||
:disabled="page <= 1"
|
||||
@@ -187,6 +198,8 @@
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted, computed } from 'vue'
|
||||
import * as api from '../../api/client.js'
|
||||
import BreadcrumbBar from '../../components/ui/BreadcrumbBar.vue'
|
||||
import EmptyState from '../../components/ui/EmptyState.vue'
|
||||
|
||||
const entries = ref([])
|
||||
const total = ref(0)
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
<template>
|
||||
<div>
|
||||
<BreadcrumbBar :segments="[]" :show-root="false" class="mb-4" />
|
||||
|
||||
<h2 class="text-xl font-semibold text-gray-900 mb-6">Overview</h2>
|
||||
|
||||
<div v-if="loading" class="text-gray-500">Loading overview…</div>
|
||||
@@ -71,6 +73,7 @@
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { getAdminOverview } from '../../api/admin.js'
|
||||
import { formatSize, formatDate } from '../../utils/formatters.js'
|
||||
import BreadcrumbBar from '../../components/ui/BreadcrumbBar.vue'
|
||||
|
||||
const loading = ref(false)
|
||||
const error = ref(null)
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
<template>
|
||||
<div>
|
||||
<BreadcrumbBar :segments="[{ label: 'Quotas' }]" :show-root="false" class="mb-4" />
|
||||
|
||||
<div v-if="loading" class="bg-white rounded-xl border border-gray-200 p-8 text-center">
|
||||
<div class="flex items-center justify-center gap-2 text-gray-400 text-sm">
|
||||
<span class="animate-spin rounded-full border-2 border-current border-t-transparent w-4 h-4"></span>
|
||||
@@ -87,6 +89,7 @@
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import * as api from '../../api/client.js'
|
||||
import BreadcrumbBar from '../../components/ui/BreadcrumbBar.vue'
|
||||
|
||||
const rows = ref([])
|
||||
const loading = ref(false)
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
<template>
|
||||
<div>
|
||||
<BreadcrumbBar :segments="[{ label: 'Users' }]" :show-root="false" class="mb-4" />
|
||||
|
||||
<div v-if="showCreateForm" class="bg-white border border-gray-200 rounded-xl p-6 mb-4">
|
||||
<h3 class="text-sm font-semibold text-gray-900 mb-4">Create user</h3>
|
||||
<div class="space-y-3">
|
||||
@@ -90,19 +92,7 @@
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-if="loading" class="bg-white rounded-xl border border-gray-200 p-8 text-center">
|
||||
<div class="flex items-center justify-center gap-2 text-gray-400 text-sm">
|
||||
<span class="animate-spin rounded-full border-2 border-current border-t-transparent w-4 h-4"></span>
|
||||
Loading users…
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else-if="users.length === 0" class="bg-white rounded-xl border border-gray-200 p-12 text-center">
|
||||
<h3 class="text-sm font-semibold text-gray-900 mb-1">No users yet</h3>
|
||||
<p class="text-sm text-gray-500">Create the first user account to get started.</p>
|
||||
</div>
|
||||
|
||||
<div v-else class="bg-white rounded-xl border border-gray-200 overflow-hidden divide-y divide-gray-200">
|
||||
<div class="bg-white rounded-xl border border-gray-200 overflow-hidden divide-y divide-gray-200">
|
||||
<table class="w-full">
|
||||
<thead>
|
||||
<tr class="bg-gray-50 text-left">
|
||||
@@ -115,6 +105,23 @@
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-200">
|
||||
<template v-if="loading">
|
||||
<tr v-for="n in 5" :key="`sk-${n}`" class="border-b border-gray-100">
|
||||
<td class="px-4 py-3"><div class="h-3 bg-gray-100 rounded animate-pulse w-36"></div></td>
|
||||
<td class="px-4 py-3"><div class="h-3 bg-gray-100 rounded animate-pulse w-20"></div></td>
|
||||
<td class="px-4 py-3"><div class="h-4 bg-gray-100 rounded-full animate-pulse w-12"></div></td>
|
||||
<td class="px-4 py-3"><div class="h-4 bg-gray-100 rounded-full animate-pulse w-16"></div></td>
|
||||
<td class="px-4 py-3"><div class="h-3 bg-gray-100 rounded animate-pulse w-24"></div></td>
|
||||
<td class="px-4 py-3"><div class="h-3 bg-gray-100 rounded animate-pulse w-28"></div></td>
|
||||
</tr>
|
||||
</template>
|
||||
<tr v-else-if="users.length === 0">
|
||||
<td colspan="6" class="px-8 py-12 text-center">
|
||||
<h3 class="text-sm font-semibold text-gray-900 mb-1">No users yet</h3>
|
||||
<p class="text-sm text-gray-500">Create the first user account to get started.</p>
|
||||
</td>
|
||||
</tr>
|
||||
<template v-else>
|
||||
<tr
|
||||
v-for="user in users"
|
||||
:key="user.id"
|
||||
@@ -252,6 +259,7 @@
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -264,6 +272,7 @@
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { formatDate } from '../../utils/formatters.js'
|
||||
import * as api from '../../api/client.js'
|
||||
import BreadcrumbBar from '../../components/ui/BreadcrumbBar.vue'
|
||||
|
||||
const users = ref([])
|
||||
const loading = ref(false)
|
||||
|
||||
@@ -1,12 +1,91 @@
|
||||
import { describe, it } from 'vitest'
|
||||
import { describe, it, expect, vi, beforeEach } from 'vitest'
|
||||
import { mount } from '@vue/test-utils'
|
||||
import { setActivePinia, createPinia } from 'pinia'
|
||||
|
||||
vi.mock('../../../api/client.js', () => ({
|
||||
adminListAuditLog: vi.fn().mockResolvedValue({ items: [], total: 0 }),
|
||||
adminExportAuditLogCsv: vi.fn().mockResolvedValue({}),
|
||||
adminListDailyExports: vi.fn().mockResolvedValue({ items: [] }),
|
||||
adminDownloadDailyExport: vi.fn().mockResolvedValue({}),
|
||||
}))
|
||||
|
||||
const stubs = {
|
||||
BreadcrumbBar: true,
|
||||
EmptyState: true,
|
||||
AppIcon: true,
|
||||
}
|
||||
|
||||
async function mountAudit(overrides = {}) {
|
||||
const { default: AdminAuditView } = await import('../AdminAuditView.vue')
|
||||
return mount(AdminAuditView, {
|
||||
global: { stubs, plugins: [createPinia()] },
|
||||
...overrides,
|
||||
})
|
||||
}
|
||||
|
||||
describe('UX-04: AdminAuditView shows skeleton table rows during loading', () => {
|
||||
it.todo('renders 5+ skeleton <tr> rows when loading=true')
|
||||
it.todo('skeleton rows have 5 columns matching the real table header')
|
||||
it.todo('animated spinner Loading audit log… text is removed')
|
||||
beforeEach(() => {
|
||||
setActivePinia(createPinia())
|
||||
vi.resetModules()
|
||||
})
|
||||
|
||||
it('renders 8 skeleton <tr> rows when loading=true', async () => {
|
||||
const { adminListAuditLog } = await import('../../../api/client.js')
|
||||
adminListAuditLog.mockReturnValue(new Promise(() => {})) // never resolves => loading stays true
|
||||
const wrapper = await mountAudit()
|
||||
const tbody = wrapper.find('tbody')
|
||||
expect(tbody.exists()).toBe(true)
|
||||
const rows = tbody.findAll('tr')
|
||||
expect(rows.length).toBeGreaterThanOrEqual(8)
|
||||
})
|
||||
|
||||
it('skeleton rows have exactly 5 <td> cells matching column count', async () => {
|
||||
const { adminListAuditLog } = await import('../../../api/client.js')
|
||||
adminListAuditLog.mockReturnValue(new Promise(() => {}))
|
||||
const wrapper = await mountAudit()
|
||||
const rows = wrapper.find('tbody').findAll('tr')
|
||||
rows.forEach(row => {
|
||||
expect(row.findAll('td').length).toBe(5)
|
||||
})
|
||||
})
|
||||
|
||||
it('Loading audit log text is absent when loading=true', async () => {
|
||||
const { adminListAuditLog } = await import('../../../api/client.js')
|
||||
adminListAuditLog.mockReturnValue(new Promise(() => {}))
|
||||
const wrapper = await mountAudit()
|
||||
expect(wrapper.text()).not.toContain('Loading audit log')
|
||||
})
|
||||
})
|
||||
|
||||
describe('UX-01 (audit empty): EmptyState renders when entries is empty after load', () => {
|
||||
it.todo('EmptyState icon=clipboardList headline="No entries found" appears when entries.length===0 and not loading')
|
||||
it.todo('clear-filters button rendered in #cta slot')
|
||||
beforeEach(() => {
|
||||
setActivePinia(createPinia())
|
||||
vi.resetModules()
|
||||
})
|
||||
|
||||
it('renders <EmptyState icon="clipboardList" headline="No entries found"> when entries empty and not loading', async () => {
|
||||
const { adminListAuditLog } = await import('../../../api/client.js')
|
||||
adminListAuditLog.mockResolvedValue({ items: [], total: 0 })
|
||||
const wrapper = await mountAudit()
|
||||
await new Promise(r => setTimeout(r, 50))
|
||||
await wrapper.vm.$nextTick()
|
||||
const emptyState = wrapper.findComponent({ name: 'EmptyState' })
|
||||
expect(emptyState.exists()).toBe(true)
|
||||
expect(emptyState.attributes('icon') ?? emptyState.props('icon')).toBe('clipboardList')
|
||||
const headline = emptyState.attributes('headline') ?? emptyState.props('headline')
|
||||
expect(headline).toBe('No entries found')
|
||||
})
|
||||
|
||||
it('EmptyState includes a Clear filters CTA button', async () => {
|
||||
const { adminListAuditLog } = await import('../../../api/client.js')
|
||||
adminListAuditLog.mockResolvedValue({ items: [], total: 0 })
|
||||
// Mount with EmptyState NOT stubbed so slot content renders
|
||||
const { default: AdminAuditView } = await import('../AdminAuditView.vue')
|
||||
const wrapper = mount(AdminAuditView, {
|
||||
global: { stubs: { BreadcrumbBar: true, AppIcon: true }, plugins: [createPinia()] },
|
||||
})
|
||||
await new Promise(r => setTimeout(r, 50))
|
||||
await wrapper.vm.$nextTick()
|
||||
expect(wrapper.text()).toContain('Clear filters')
|
||||
})
|
||||
})
|
||||
|
||||
@@ -1,7 +1,60 @@
|
||||
import { describe, it } from 'vitest'
|
||||
import { describe, it, expect, vi, beforeEach } from 'vitest'
|
||||
import { mount } from '@vue/test-utils'
|
||||
import { setActivePinia, createPinia } from 'pinia'
|
||||
|
||||
vi.mock('../../../api/client.js', () => ({
|
||||
adminListUsers: vi.fn().mockResolvedValue({ items: [] }),
|
||||
adminCreateUser: vi.fn().mockResolvedValue({}),
|
||||
adminDeactivateUser: vi.fn().mockResolvedValue({}),
|
||||
adminReactivateUser: vi.fn().mockResolvedValue({}),
|
||||
adminDeleteUser: vi.fn().mockResolvedValue({}),
|
||||
adminResetUserPassword: vi.fn().mockResolvedValue({}),
|
||||
}))
|
||||
|
||||
const stubs = {
|
||||
BreadcrumbBar: true,
|
||||
EmptyState: true,
|
||||
AppIcon: true,
|
||||
}
|
||||
|
||||
async function mountUsers(overrides = {}) {
|
||||
const { default: AdminUsersView } = await import('../AdminUsersView.vue')
|
||||
return mount(AdminUsersView, {
|
||||
global: { stubs, plugins: [createPinia()] },
|
||||
...overrides,
|
||||
})
|
||||
}
|
||||
|
||||
describe('UX-04: AdminUsersView shows skeleton table rows during loading', () => {
|
||||
it.todo('renders 5+ skeleton <tr> rows when loading=true')
|
||||
it.todo('skeleton rows have 6 columns matching the real table header')
|
||||
it.todo('animated spinner Loading users… text is removed')
|
||||
beforeEach(() => {
|
||||
setActivePinia(createPinia())
|
||||
vi.resetModules()
|
||||
})
|
||||
|
||||
it('renders 5 skeleton <tr> rows when loading=true', async () => {
|
||||
const { adminListUsers } = await import('../../../api/client.js')
|
||||
adminListUsers.mockReturnValue(new Promise(() => {})) // never resolves => loading stays true
|
||||
const wrapper = await mountUsers()
|
||||
const tbody = wrapper.find('tbody')
|
||||
expect(tbody.exists()).toBe(true)
|
||||
const rows = tbody.findAll('tr')
|
||||
expect(rows.length).toBeGreaterThanOrEqual(5)
|
||||
})
|
||||
|
||||
it('skeleton rows have exactly 6 <td> cells', async () => {
|
||||
const { adminListUsers } = await import('../../../api/client.js')
|
||||
adminListUsers.mockReturnValue(new Promise(() => {}))
|
||||
const wrapper = await mountUsers()
|
||||
const rows = wrapper.find('tbody').findAll('tr')
|
||||
rows.forEach(row => {
|
||||
expect(row.findAll('td').length).toBe(6)
|
||||
})
|
||||
})
|
||||
|
||||
it('Loading users text is absent when loading=true', async () => {
|
||||
const { adminListUsers } = await import('../../../api/client.js')
|
||||
adminListUsers.mockReturnValue(new Promise(() => {}))
|
||||
const wrapper = await mountUsers()
|
||||
expect(wrapper.text()).not.toContain('Loading users')
|
||||
})
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user