DevContainer User
96 lines
2.6 KiB
TypeScript
96 lines
2.6 KiB
TypeScript
/**
|
|
* Lightweight mock implementations of @kinvolk/headlamp-plugin/lib/CommonComponents.
|
|
* Used via vi.mock('@kinvolk/headlamp-plugin/lib/CommonComponents', () => commonComponentsMock).
|
|
*
|
|
* Uses React.createElement instead of JSX since this file is .ts (not .tsx).
|
|
*/
|
|
|
|
import React from 'react';
|
|
|
|
type RC = React.ReactNode;
|
|
|
|
export const Loader = ({ title }: { title?: string }) =>
|
|
React.createElement('div', { 'data-testid': 'loader' }, title);
|
|
|
|
export const SectionBox = ({ title, children }: { title?: string; children?: RC }) =>
|
|
React.createElement(
|
|
'div',
|
|
{ 'data-testid': 'section-box', 'data-title': title },
|
|
title ? React.createElement('h3', null, title) : null,
|
|
children
|
|
);
|
|
|
|
export const SectionHeader = ({ title }: { title: string }) =>
|
|
React.createElement('h1', { 'data-testid': 'section-header' }, title);
|
|
|
|
export const SimpleTable = ({
|
|
columns,
|
|
data,
|
|
emptyMessage,
|
|
}: {
|
|
columns: Array<{ label: string; getter: (item: unknown) => RC }>;
|
|
data: unknown[];
|
|
emptyMessage?: string;
|
|
}) => {
|
|
if (data.length === 0 && emptyMessage) {
|
|
return React.createElement('div', { 'data-testid': 'empty-table' }, emptyMessage);
|
|
}
|
|
return React.createElement(
|
|
'table',
|
|
{ 'data-testid': 'simple-table' },
|
|
React.createElement(
|
|
'thead',
|
|
null,
|
|
React.createElement(
|
|
'tr',
|
|
null,
|
|
columns.map(col => React.createElement('th', { key: col.label }, col.label))
|
|
)
|
|
),
|
|
React.createElement(
|
|
'tbody',
|
|
null,
|
|
data.map((item, i) =>
|
|
React.createElement(
|
|
'tr',
|
|
{ key: i },
|
|
columns.map(col => React.createElement('td', { key: col.label }, col.getter(item)))
|
|
)
|
|
)
|
|
)
|
|
);
|
|
};
|
|
|
|
export const NameValueTable = ({ rows }: { rows: Array<{ name: string; value: RC }> }) =>
|
|
React.createElement(
|
|
'table',
|
|
{ 'data-testid': 'name-value-table' },
|
|
React.createElement(
|
|
'tbody',
|
|
null,
|
|
rows.map(row =>
|
|
React.createElement(
|
|
'tr',
|
|
{ key: row.name },
|
|
React.createElement('td', null, row.name),
|
|
React.createElement('td', null, row.value)
|
|
)
|
|
)
|
|
)
|
|
);
|
|
|
|
export const StatusLabel = ({ status, children }: { status: string; children?: RC }) =>
|
|
React.createElement('span', { 'data-testid': 'status-label', 'data-status': status }, children);
|
|
|
|
export const PercentageBar = ({
|
|
data,
|
|
}: {
|
|
data: Array<{ name: string; value: number }>;
|
|
total: number;
|
|
}) =>
|
|
React.createElement(
|
|
'div',
|
|
{ 'data-testid': 'percentage-bar' },
|
|
data.map(d => React.createElement('span', { key: d.name }, `${d.name}: ${d.value}`))
|
|
);
|