officerdev/platform
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

inputs and data views keyed: search, select, tabs, state blocks, data table

Browse Source 
The DataTable's pagination carries the only interpolated strings in this area
('Showing page {{current}} of {{total}}', '{{size}} / page'). No plural forms:
nothing here is a count-varying noun, so inventing one would only add a key
nobody uses.

DataTable.test.tsx now renders inside an I18nProvider with the real en-GB
catalog, so it still asserts the English a user sees rather than a dot-path.

Left/right utilities became logical (ms-/me-/ps-/pe-/start-) per D3.
This commit is contained in:
pastilhas
2026-08-23 04:10:33 +00:00
parent 339d31f05c
commit 5ce1a2928e
7 changed files with 86 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/workspaces/components/Data/StateBlock.tsx
+10 -6
View File
@@ -2,6 +2,7 @@ import type { LucideIcon } from 'lucide-react';
import type { ReactNode } from 'react';
import { Loader2, TriangleAlert } from 'lucide-react';
import { cn } from 'helpers/cn';
import { useTranslation } from '@/components/locales';
// Loading, failed, empty. See docs/design-language-interface.md § 6.
//
@@ -19,12 +20,15 @@ const Shell = ({ children, className }: { children: ReactNode; className?: strin
</div>
);
export const LoadingBlock = ({ label = 'Loading…' }: { label?: string }) => (
<Shell>
<Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
<p className="text-sm text-muted-foreground">{label}</p>
</Shell>
);
export const LoadingBlock = ({ label }: { label?: string }) => {
const { t } = useTranslation();
return (
<Shell>
<Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
<p className="text-sm text-muted-foreground">{label ?? t('state.loading')}</p>
</Shell>
);
};
/**
* The real message is shown, not a friendly substitute for it. On a self-hosted platform the person
src/workspaces/components/DataTable/DataTable.test.tsx
+43 -29
View File
@@ -1,7 +1,21 @@
import type { Column } from './DataTable';
import type { ReactNode } from 'react';
import { describe, expect, test } from 'bun:test';
import { render, screen, fireEvent, within } from '@testing-library/react';
import { I18nProvider } from 'i18n';
import { DataTable, useDataControl } from './DataTable';
import enGB from '../locales/en-GB.json';
/**
* The table's own chrome ("Next", "No Data Found.") comes from the `ui.*` catalog now, so these
* assertions only hold inside a provider — the same one the app mounts. Asserting the English a user
* actually sees, rather than a key, is the point of wrapping rather than loosening the expectations.
*/
const withI18n = (ui: ReactNode) => (
<I18nProvider translations={{ 'en-GB': { ui: enGB } }} locale="en-GB" fallbackLocale="en-GB">
{ui}
</I18nProvider>
);
type TestItem = {
id: number;
@@ -55,7 +69,7 @@ const TestWrapper = ({
describe('DataTable', () => {
describe('rendering', () => {
test('renders table with data', () => {
render(<TestWrapper />);
render(withI18n(<TestWrapper />));
expect(screen.getByRole('table')).toBeDefined();
expect(screen.getByText('Alpha')).toBeDefined();
@@ -63,7 +77,7 @@ describe('DataTable', () => {
});
test('renders column headers', () => {
render(<TestWrapper />);
render(withI18n(<TestWrapper />));
// Component renders both desktop and mobile versions (hidden via CSS)
// so we use getAllByText and verify at least one exists
@@ -74,7 +88,7 @@ describe('DataTable', () => {
});
test('renders correct number of rows based on page size', () => {
render(<TestWrapper pageSize={3} />);
render(withI18n(<TestWrapper pageSize={3} />));
const rows = screen.getAllByRole('row');
// 1 header row + 3 data rows
@@ -82,20 +96,20 @@ describe('DataTable', () => {
});
test('shows no data message when data is empty', () => {
render(<TestWrapper data={[]} noDataMessage="No items found" />);
render(withI18n(<TestWrapper data={[]} noDataMessage="No items found" />));
expect(screen.getByText('No items found')).toBeDefined();
expect(screen.queryByRole('table')).toBeNull();
});
test('shows default no data message', () => {
render(<TestWrapper data={[]} />);
render(withI18n(<TestWrapper data={[]} />));
expect(screen.getByText('No Data Found.')).toBeDefined();
});
test('renders noDataCTA when provided', () => {
render(<TestWrapper data={[]} noDataCTA={<button>Add Item</button>} />);
render(withI18n(<TestWrapper data={[]} noDataCTA={<button>Add Item</button>} />));
expect(screen.getByRole('button', { name: 'Add Item' })).toBeDefined();
});
@@ -106,7 +120,7 @@ describe('DataTable', () => {
return <DataTable dataController={controller} columns={columns} />;
};
const { container } = render(<NullWrapper />);
const { container } = render(withI18n(<NullWrapper />));
expect(container.innerHTML).toBe('');
});
});
@@ -118,7 +132,7 @@ describe('DataTable', () => {
return <DataTable dataController={controller} />;
};
render(<AutoColumnsWrapper />);
render(withI18n(<AutoColumnsWrapper />));
// Should generate columns from object keys (rendered for both mobile/desktop)
expect(screen.getAllByText('Id').length).toBeGreaterThan(0);
@@ -130,7 +144,7 @@ describe('DataTable', () => {
describe('sorting', () => {
test('clicking sortable column header triggers sort', () => {
render(<TestWrapper pageSize={10} />);
render(withI18n(<TestWrapper pageSize={10} />));
// Get the first "Name" element (desktop version)
const nameHeaders = screen.getAllByText('Name');
@@ -143,7 +157,7 @@ describe('DataTable', () => {
});
test('clicking same column twice reverses sort order', () => {
render(<TestWrapper pageSize={10} />);
render(withI18n(<TestWrapper pageSize={10} />));
const nameHeaders = screen.getAllByText('Name');
fireEvent.click(nameHeaders[0]!); // asc
@@ -156,7 +170,7 @@ describe('DataTable', () => {
});
test('sort icon is displayed for sortable columns', () => {
render(<TestWrapper />);
render(withI18n(<TestWrapper />));
// Each sortable column should have the ArrowUpDown icon
const headers = screen.getAllByRole('columnheader');
@@ -169,19 +183,19 @@ describe('DataTable', () => {
describe('pagination', () => {
test('shows pagination bar when data exceeds page size', () => {
render(<TestWrapper pageSize={5} />);
render(withI18n(<TestWrapper pageSize={5} />));
expect(screen.getByText(/Showing page 1 of 2/)).toBeDefined();
});
test('does not show pagination when all data fits on one page', () => {
render(<TestWrapper pageSize={10} />);
render(withI18n(<TestWrapper pageSize={10} />));
expect(screen.queryByText(/Showing page/)).toBeNull();
});
test('next button navigates to next page', () => {
render(<TestWrapper pageSize={5} />);
render(withI18n(<TestWrapper pageSize={5} />));
const nextButton = screen.getByRole('button', { name: 'Next' });
fireEvent.click(nextButton);
@@ -192,7 +206,7 @@ describe('DataTable', () => {
});
test('previous button navigates to previous page', () => {
render(<TestWrapper pageSize={5} />);
render(withI18n(<TestWrapper pageSize={5} />));
const nextButton = screen.getByRole('button', { name: 'Next' });
fireEvent.click(nextButton);
@@ -205,7 +219,7 @@ describe('DataTable', () => {
});
test('first button goes to first page', () => {
render(<TestWrapper pageSize={5} />);
render(withI18n(<TestWrapper pageSize={5} />));
const nextButton = screen.getByRole('button', { name: 'Next' });
fireEvent.click(nextButton);
@@ -217,7 +231,7 @@ describe('DataTable', () => {
});
test('last button goes to last page', () => {
render(<TestWrapper pageSize={5} />);
render(withI18n(<TestWrapper pageSize={5} />));
const lastButton = screen.getByRole('button', { name: 'Last' });
fireEvent.click(lastButton);
@@ -226,7 +240,7 @@ describe('DataTable', () => {
});
test('navigation buttons are disabled at boundaries', () => {
render(<TestWrapper pageSize={5} />);
render(withI18n(<TestWrapper pageSize={5} />));
const firstBtn = screen.getByRole('button', { name: 'First' });
const prevBtn = screen.getByRole('button', { name: 'Prev' });
@@ -258,7 +272,7 @@ describe('DataTable', () => {
{ field: 'status', label: 'Status', condition: false },
];
render(<TestWrapper cols={conditionalColumns} />);
render(withI18n(<TestWrapper cols={conditionalColumns} />));
expect(screen.getAllByText('ID').length).toBeGreaterThan(0);
expect(screen.getAllByText('Name').length).toBeGreaterThan(0);
@@ -271,7 +285,7 @@ describe('DataTable', () => {
{ field: 'status', label: 'Status', condition: true },
];
render(<TestWrapper cols={conditionalColumns} />);
render(withI18n(<TestWrapper cols={conditionalColumns} />));
expect(screen.getAllByText('Status').length).toBeGreaterThan(0);
});
@@ -283,11 +297,11 @@ describe('DataTable', () => {
{ field: 'status', label: 'Status', condition: () => showStatus },
];
const { rerender } = render(<TestWrapper cols={conditionalColumns} />);
const { rerender } = render(withI18n(<TestWrapper cols={conditionalColumns} />));
expect(screen.queryByText('Status')).toBeNull();
showStatus = true;
rerender(<TestWrapper cols={conditionalColumns} />);
rerender(withI18n(<TestWrapper cols={conditionalColumns} />));
expect(screen.getAllByText('Status').length).toBeGreaterThan(0);
});
});
@@ -303,7 +317,7 @@ describe('DataTable', () => {
},
];
render(<TestWrapper cols={formattedColumns} />);
render(withI18n(<TestWrapper cols={formattedColumns} />));
const formattedNames = screen.getAllByTestId('formatted-name');
expect(formattedNames.length).toBeGreaterThan(0);
@@ -319,7 +333,7 @@ describe('DataTable', () => {
},
];
render(<TestWrapper cols={formattedColumns} />);
render(withI18n(<TestWrapper cols={formattedColumns} />));
// Each row should have a unique test ID based on item.id
expect(screen.getByTestId('item-1')).toBeDefined();
@@ -337,7 +351,7 @@ describe('DataTable', () => {
},
];
render(<TestWrapper cols={actionColumns} />);
render(withI18n(<TestWrapper cols={actionColumns} />));
expect(screen.getByTestId('action-1')).toBeDefined();
expect(screen.getByText('Edit Alpha')).toBeDefined();
@@ -351,7 +365,7 @@ describe('DataTable', () => {
{ field: 'name', label: 'Name' },
];
render(<TestWrapper cols={tooltipColumns} />);
render(withI18n(<TestWrapper cols={tooltipColumns} />));
// The tooltip indicator (ⓘ) should be present in the ID column headers
const idHeaders = screen.getAllByText(/ID/);
@@ -367,7 +381,7 @@ describe('DataTable', () => {
{ field: 'name', label: 'Full Name', labelMobile: 'Name' },
];
render(<TestWrapper cols={mobileColumns} />);
render(withI18n(<TestWrapper cols={mobileColumns} />));
// Both desktop and mobile labels should be in the DOM (hidden/shown via CSS)
expect(screen.getAllByText('Identifier').length).toBeGreaterThan(0);
@@ -396,7 +410,7 @@ describe('DataTable', () => {
);
};
render(<SearchableTable />);
render(withI18n(<SearchableTable />));
const searchInput = screen.getByTestId('search-input');
fireEvent.change(searchInput, { target: { value: 'Alpha' } });
@@ -420,7 +434,7 @@ describe('DataTable', () => {
);
};
render(<ExternalSortTable />);
render(withI18n(<ExternalSortTable />));
fireEvent.click(screen.getByTestId('sort-btn'));
src/workspaces/components/DataTable/DataTable.tsx
+4 -2
View File
@@ -6,8 +6,10 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/comp
import { useDataControl, type UseDataControlReturn } from 'hooks/useDataControl';
import { PaginationBar } from './PaginationBar';
import { cn } from 'helpers/cn';
import { useTranslation } from '@/components/locales';
export const DataTable = <T,>(props: DataTableProps<T>) => {
const { t } = useTranslation();
const [columns, setColumns] = useState<Column<T>[]>([]);
const { dataController, uniqueKey, noDataCTA, noDataMessage } = props;
const theUniqueKey = uniqueKey || 'id';
@@ -58,7 +60,7 @@ export const DataTable = <T,>(props: DataTableProps<T>) => {
if (rawData.length === 0) {
return (
<div className="py-12 text-center">
<div className="text-muted-foreground">{noDataMessage || 'No Data Found.'}</div>
<div className="text-muted-foreground">{noDataMessage || t('dataTable.empty')}</div>
{noDataCTA && <>{noDataCTA}</>}
</div>
);
@@ -94,7 +96,7 @@ export const DataTable = <T,>(props: DataTableProps<T>) => {
<span className="min-[500px]:hidden">
{String(labelMobile || label || field || '')} {tooltip ? <sup>ⓘ</sup> : ''}
</span>
{sortKey && <ArrowUpDown className={cn('ml-2 h-4 w-4')} />}
{sortKey && <ArrowUpDown className={cn('ms-2 h-4 w-4')} />}
</div>
</TooltipTrigger>
{tooltip && (
src/workspaces/components/DataTable/PaginationBar.tsx
+13 -11
View File
@@ -3,12 +3,14 @@ import type { UseDataControlReturn } from 'hooks/useDataControl';
import { useMemo } from 'react';
import { Button } from '@/components/ui/button';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { useTranslation } from '@/components/locales';
type PaginationBarProps<T> = {
dataManager: UseDataControlReturn<T>;
};
export const PaginationBar = <T,>(props: PaginationBarProps<T>) => {
const { t } = useTranslation();
const { currentPage, pageCount, changePage, pageSize, setPageSize } = props.dataManager;
const pageSizeOptions = useMemo(() => [5, 10, 15, 20], []);
@@ -28,10 +30,10 @@ export const PaginationBar = <T,>(props: PaginationBarProps<T>) => {
{/* LEFT */}
<div className="flex items-center gap-2 min-[500px]:gap-3 text-sm text-muted-foreground whitespace-nowrap">
<span className="hidden min-[500px]:inline">
Showing page {currentPage} of {pageCount}
{t('dataTable.pagination.showingPage', { current: currentPage, total: pageCount })}
</span>
<span className="min-[500px]:hidden">
p {currentPage}/{pageCount}
{t('dataTable.pagination.showingPageShort', { current: currentPage, total: pageCount })}
</span>
<span className="bg-border h-5 w-px" aria-hidden="true" />
@@ -47,11 +49,11 @@ export const PaginationBar = <T,>(props: PaginationBarProps<T>) => {
hover:bg-background
data-[state=open]:bg-muted
"
aria-label="Rows per page"
aria-label={t('dataTable.pagination.rowsPerPage')}
>
<SelectValue className="text-muted-foreground">
<span className="hidden min-[500px]:inline">{pageSize} / page</span>
<span className="min-[500px]:hidden">{pageSize}/p</span>
<span className="hidden min-[500px]:inline">{t('dataTable.pagination.perPage', { size: pageSize })}</span>
<span className="min-[500px]:hidden">{t('dataTable.pagination.perPageShort', { size: pageSize })}</span>
</SelectValue>
</SelectTrigger>
@@ -66,8 +68,8 @@ export const PaginationBar = <T,>(props: PaginationBarProps<T>) => {
data-[state=checked]:text-muted-foreground
"
>
<span className="hidden min-[500px]:inline">{n} / page</span>
<span className="min-[500px]:hidden">{n}/p</span>
<span className="hidden min-[500px]:inline">{t('dataTable.pagination.perPage', { size: n })}</span>
<span className="min-[500px]:hidden">{t('dataTable.pagination.perPageShort', { size: n })}</span>
</SelectItem>
))}
</SelectContent>
@@ -82,7 +84,7 @@ export const PaginationBar = <T,>(props: PaginationBarProps<T>) => {
className={buttonClass}
onClick={() => changePage(1)}
disabled={currentPage === 1}
aria-label="First"
aria-label={t('dataTable.pagination.first')}
>
«
</Button>
@@ -92,7 +94,7 @@ export const PaginationBar = <T,>(props: PaginationBarProps<T>) => {
className={buttonClass}
onClick={() => changePage(currentPage - 1)}
disabled={currentPage === 1}
aria-label="Prev"
aria-label={t('dataTable.pagination.prev')}
>
‹
</Button>
@@ -102,7 +104,7 @@ export const PaginationBar = <T,>(props: PaginationBarProps<T>) => {
className={buttonClass}
onClick={() => changePage(currentPage + 1)}
disabled={currentPage === pageCount}
aria-label="Next"
aria-label={t('dataTable.pagination.next')}
>
›
</Button>
@@ -112,7 +114,7 @@ export const PaginationBar = <T,>(props: PaginationBarProps<T>) => {
className={buttonClass}
onClick={() => changePage(pageCount)}
disabled={currentPage === pageCount}
aria-label="Last"
aria-label={t('dataTable.pagination.last')}
>
»
</Button>
src/workspaces/components/SearchInput.tsx
+10 -8
View File
@@ -3,6 +3,7 @@ import { Button } from '@/components/ui/button';
import { Search as SearchIcon, X as ClearIcon } from 'lucide-react';
import { Input } from '@/components/ui/input';
import { cn } from 'helpers/cn';
import { useTranslation } from '@/components/locales';
type SearchInputProps = {
className?: string;
@@ -12,7 +13,8 @@ type SearchInputProps = {
};
export function SearchInput(props: SearchInputProps) {
const { className, handleSearch, value = '', placeholder = 'Search' } = props;
const { t } = useTranslation();
const { className, handleSearch, value = '', placeholder = t('search.placeholder') } = props;
const [isMobileSearchOpen, setIsMobileSearchOpen] = useState(false);
const inputRef = useRef<HTMLInputElement | null>(null);
@@ -22,14 +24,14 @@ export function SearchInput(props: SearchInputProps) {
type="button"
variant="outline"
size="icon"
aria-label={isMobileSearchOpen ? 'Close search' : 'Open search'}
aria-label={isMobileSearchOpen ? t('search.close') : t('search.open')}
onClick={() => {
setIsMobileSearchOpen((v) => !v);
if (!isMobileSearchOpen) {
setTimeout(() => inputRef.current?.focus(), 160);
}
}}
className="ml-auto shrink-0 md:hidden"
className="ms-auto shrink-0 md:hidden"
>
{isMobileSearchOpen ? <ClearIcon className="h-5 w-5" /> : <SearchIcon className="h-5 w-5" />}
</Button>
@@ -37,7 +39,7 @@ export function SearchInput(props: SearchInputProps) {
className={cn(
'relative w-fit max-w-lg',
isMobileSearchOpen
? 'absolute left-0 mt-4 block w-full md:relative md:mt-0 md:w-fit'
? 'absolute start-0 mt-4 block w-full md:relative md:mt-0 md:w-fit'
: 'hidden w-auto md:block',
className,
)}
@@ -45,14 +47,14 @@ export function SearchInput(props: SearchInputProps) {
{!!value ? (
<button
type="button"
aria-label="Clear search"
aria-label={t('search.clear')}
onClick={() => handleSearch('')}
className="absolute left-3 top-1/2 -translate-y-1/2 z-10 rounded p-1 hover:bg-muted"
className="absolute start-3 top-1/2 -translate-y-1/2 z-10 rounded p-1 hover:bg-muted"
>
<ClearIcon className="h-4 w-4 text-muted-foreground" />
</button>
) : (
<span className="pointer-events-none absolute left-3 top-1/2 z-10 -translate-y-1/2">
<span className="pointer-events-none absolute start-3 top-1/2 z-10 -translate-y-1/2">
<SearchIcon className="text-muted-foreground h-4 w-4" />
</span>
)}
@@ -62,7 +64,7 @@ export function SearchInput(props: SearchInputProps) {
placeholder={placeholder}
value={value}
onChange={(ev) => handleSearch(ev.target.value)}
className="pl-10 pr-4 text-sm"
className="ps-10 pe-4 text-sm"
/>
</div>
</div>
src/workspaces/components/Select.tsx
+3 -1
View File
@@ -1,10 +1,12 @@
import { Select as ShadSelect, SelectContent, SelectGroup } from '@/components/ui/select';
import { SelectItem, SelectLabel, SelectTrigger, SelectValue } from '@/components/ui/select';
import { cn } from 'helpers/cn';
import { useTranslation } from '@/components/locales';
export const Select = (props: SelectProps) => {
const { t } = useTranslation();
const { options, value, onChange, onValueChange, label } = props;
const { name = '', className, placeholder = 'Select...', update } = props;
const { name = '', className, placeholder = t('select.placeholder'), update } = props;
if (!options) return null;
src/workspaces/components/Tabs/Tabs.tsx
+3 -1
View File
@@ -1,6 +1,7 @@
import { useRef } from 'react';
import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '@/components/ui/select';
import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { useTranslation } from '@/components/locales';
type TabsProps = {
tabList: { value: string; label: string }[];
@@ -8,6 +9,7 @@ type TabsProps = {
setActiveTab: (tab: string) => void;
};
const TabsComponent = (props: TabsProps) => {
const { t } = useTranslation();
const { tabList, activeTab, setActiveTab } = props;
const tabsListRef = useRef<HTMLDivElement>(null);
return (
@@ -38,7 +40,7 @@ const TabsComponent = (props: TabsProps) => {
<div className="block lg:hidden">
<Select value={activeTab} onValueChange={(v) => setActiveTab(v)}>
<SelectTrigger className="w-40">
<SelectValue placeholder="Filter" />
<SelectValue placeholder={t('tabs.filterPlaceholder')} />
</SelectTrigger>
<SelectContent>
{tabList.map((f) => (