@gravity-ui/querieskit 1.0.4 → 1.2.0

package/src/modules/NavigationMeta/NavigationMeta.tsx

@@ -0,0 +1,81 @@
+import React, {useMemo} from 'react';
+import {Flex, Text} from '@gravity-ui/uikit';
+import cn from 'bem-cn-lite';
+import {EmptyContent, SkeletonRows} from '../../components';
+import type {NavigationMetaConfig, NavigationMetaItem} from '../../types/navigation';
+import {buildMetaGroups} from './helpers/buildMetaGroups';
+import i18n from './i18n';
+import './NavigationMeta.scss';
+
+const block = cn('qp-navigation-meta');
+
+export type NavigationMetaViewConfig<TItem extends NavigationMetaItem = NavigationMetaItem> = {
+    render?: (data: NavigationMetaConfig<TItem>) => React.ReactNode;
+    extraContent?: React.ReactNode;
+};
+
+export type NavigationMetaProps<TItem extends NavigationMetaItem = NavigationMetaItem> = {
+    data: NavigationMetaConfig<TItem>;
+    view?: NavigationMetaViewConfig<TItem>;
+    className?: string;
+};
+
+export function NavigationMeta<TItem extends NavigationMetaItem = NavigationMetaItem>({
+    data,
+    view,
+    className,
+}: NavigationMetaProps<TItem>) {
+    const {groups, loading, loaded, errorContent} = data;
+    const {render, extraContent} = view ?? {};
+
+    const preparedGroups = useMemo(() => buildMetaGroups(groups, i18n), [groups]);
+
+    if (render) {
+        return <div className={block(null, className)}>{render(data)}</div>;
+    }
+
+    if (errorContent) {
+        return (
+            <Text color="danger" className={block('error')}>
+                {errorContent}
+            </Text>
+        );
+    }
+
+    if (loading && !loaded) {
+        return (
+            <SkeletonRows className={block(null, className)} rowClassName={block('skeleton-row')} />
+        );
+    }
+
+    const isEmpty = preparedGroups.every((group) => group.items.length === 0);
+
+    if (isEmpty && !extraContent) {
+        return <EmptyContent variant="no-data" className={block('empty')} />;
+    }
+
+    return (
+        <Flex direction="column" gap={4} className={block(null, className)}>
+            {preparedGroups.map((group, groupIndex) =>
+                group.items.length === 0 ? null : (
+                    <div key={groupIndex} className={block('group')}>
+                        {group.title ? (
+                            <Text variant="subheader-1" className={block('group-title')}>
+                                {group.title}
+                            </Text>
+                        ) : null}
+                        <div className={block('group-body')}>
+                            {group.items.map(({name, value}) => (
+                                <>
+                                    <Text color="secondary">{name}</Text>
+                                    <div>{value}</div>
+                                </>
+                            ))}
+                        </div>
+                    </div>
+                ),
+            )}
+            {extraContent}
+        </Flex>
+    );
+}

package/src/modules/NavigationMeta/helpers/buildMetaGroups.tsx

@@ -0,0 +1,27 @@
+import type {ReactNode} from 'react';
+import {isEmptyValue} from '../../../helpers/isEmptyValue';
+import type {NavigationMetaGroup, NavigationMetaItem} from '../../../types/navigation';
+import type metaI18n from '../i18n';
+
+export type PreparedMetaItem = {
+    name: string;
+    value: ReactNode;
+};
+
+export type PreparedMetaGroup = {
+    title?: string;
+    items: PreparedMetaItem[];
+};
+
+export function buildMetaGroups<TItem extends NavigationMetaItem>(
+    groups: Array<NavigationMetaGroup<TItem>>,
+    i18n: typeof metaI18n,
+): PreparedMetaGroup[] {
+    return groups.map((group) => ({
+        title: group.title,
+        items: group.items.map((item) => ({
+            name: item.name,
+            value: isEmptyValue(item.value) ? i18n('value_empty') : item.value,
+        })),
+    }));
+}

package/src/modules/NavigationMeta/i18n/dicts.ts

@@ -0,0 +1,4 @@
+import en from './en.json';
+import ru from './ru.json';
+
+export default {en, ru};

package/src/modules/NavigationMeta/i18n/en.json

@@ -0,0 +1,4 @@
+{
+    "value_empty": "—",
+    "context_empty": "No metadata"
+}

package/src/modules/NavigationMeta/i18n/index.ts

@@ -0,0 +1,5 @@
+import {addI18Keysets} from '../../../i18n';
+
+import dicts from './dicts';
+
+export default addI18Keysets('qp:navigation-meta', dicts);

package/src/modules/NavigationMeta/i18n/ru.json

@@ -0,0 +1,4 @@
+{
+    "value_empty": "—",
+    "context_empty": "Нет метаданных"
+}

package/src/modules/NavigationMeta/index.ts

@@ -0,0 +1,3 @@
+export {NavigationMeta} from './NavigationMeta';
+export type {NavigationMetaProps, NavigationMetaViewConfig} from './NavigationMeta';
+export {buildMetaGroups} from './helpers/buildMetaGroups';

package/src/modules/NavigationMeta/story/NavigationMeta.stories.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import type {Meta, StoryObj} from '@storybook/react';
+import {Label, Text} from '@gravity-ui/uikit';
+import {NavigationMeta} from '..';
+import {META_GROUPS} from './mockData';
+
+const meta: Meta<typeof NavigationMeta> = {
+    title: 'Modules/NavigationMeta',
+    component: NavigationMeta,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'padded',
+    },
+    decorators: [
+        (Story) => (
+            <div style={{width: 560}}>
+                <Story />
+            </div>
+        ),
+    ],
+};
+
+export default meta;
+type Story = StoryObj<typeof NavigationMeta>;
+
+export const Default: Story = {
+    args: {
+        data: {groups: META_GROUPS, loaded: true},
+    },
+};
+
+export const Loading: Story = {
+    args: {
+        data: {groups: [], loading: true},
+    },
+};
+
+export const Empty: Story = {
+    args: {
+        data: {groups: [], loaded: true},
+    },
+};
+
+export const Error: Story = {
+    args: {
+        data: {groups: [], errorContent: 'Failed to load table metadata'},
+    },
+};
+
+export const WithExtraContent: Story = {
+    args: {
+        data: {groups: META_GROUPS, loaded: true},
+        view: {
+            extraContent: (
+                <Text color="secondary" variant="caption-2">
+                    Additional info rendered below the default groups
+                </Text>
+            ),
+        },
+    },
+};
+
+export const CustomRender: Story = {
+    args: {
+        data: {groups: META_GROUPS, loaded: true},
+        view: {
+            render: (data) => (
+                <div style={{display: 'flex', flexWrap: 'wrap', gap: 8}}>
+                    {data.groups
+                        .flatMap((group) => group.items)
+                        .map((item, index) => (
+                            <Label key={index}>
+                                {item.name}: {String(item.value)}
+                            </Label>
+                        ))}
+                </div>
+            ),
+        },
+    },
+};

package/src/modules/NavigationMeta/story/mockData.ts

@@ -0,0 +1,22 @@
+import type {NavigationMetaConfig} from '../../../types/navigation';
+
+export const META_GROUPS: NavigationMetaConfig['groups'] = [
+    {
+        title: 'General',
+        items: [
+            {name: 'Type', value: 'table'},
+            {name: 'ID', value: '1-2-3-abcdef'},
+            {name: 'Account', value: 'production'},
+            {name: 'Owner', value: 'robot-yt'},
+        ],
+    },
+    {
+        title: 'Storage',
+        items: [
+            {name: 'Compression', value: 'zstd_5'},
+            {name: 'Erasure codec', value: 'none'},
+            {name: 'Disk space', value: '1.2 TB'},
+            {name: 'Chunk count', value: '42'},
+        ],
+    },
+];

package/src/modules/NavigationPreview/NavigationPreview.scss

@@ -0,0 +1,24 @@
+.qp-navigation-preview {
+  --data-table-border-color: var(--g-color-line-generic);
+
+  min-width: 0;
+
+  &__error {
+    display: block;
+  }
+
+  &__table {
+    overflow-x: auto;
+  }
+
+  .data-table__row,
+  .data-table__head {
+    height: 40px;
+  }
+
+  .data-table__th,
+  .data-table__td {
+    border-width: 0 0 1px;
+    vertical-align: middle;
+  }
+}

package/src/modules/NavigationPreview/NavigationPreview.tsx

@@ -0,0 +1,110 @@
+import React, {useMemo} from 'react';
+import {Flex, Text} from '@gravity-ui/uikit';
+import cn from 'bem-cn-lite';
+import {type Column, DataTable, FieldsSearchToolbar} from '../../components';
+import {useVisibleColumns} from '../../helpers/useVisibleColumns';
+import type {NavigationPreviewConfig, NavigationPreviewRow} from '../../types/navigation';
+import {buildPreviewColumns} from './helpers/buildPreviewColumns';
+import {filterPreviewRows} from './helpers/filterPreviewRows';
+import i18n from './i18n';
+import './NavigationPreview.scss';
+
+const block = cn('qp-navigation-preview');
+
+export type NavigationPreviewViewConfig<TRow extends NavigationPreviewRow = NavigationPreviewRow> =
+    {
+        tableColumns?: Array<Column<TRow>>;
+        extraColumns?: Array<Column<TRow>>;
+    };
+
+export type NavigationPreviewProps<TRow extends NavigationPreviewRow = NavigationPreviewRow> = {
+    data: NavigationPreviewConfig<TRow>;
+    view?: NavigationPreviewViewConfig<TRow>;
+    search?: string;
+    onSearchUpdate?: (value: string) => void;
+    searchPlaceholder?: string;
+    visibleColumns?: string[];
+    onVisibleColumnsChange?: (value: string[]) => void;
+    defaultVisibleColumns?: string[];
+    hideToolbar?: boolean;
+    hideFieldsSelector?: boolean;
+    className?: string;
+};
+
+export function NavigationPreview<TRow extends NavigationPreviewRow = NavigationPreviewRow>({
+    data,
+    view,
+    search,
+    onSearchUpdate,
+    searchPlaceholder,
+    visibleColumns,
+    onVisibleColumnsChange,
+    defaultVisibleColumns,
+    hideToolbar,
+    hideFieldsSelector,
+    className,
+}: NavigationPreviewProps<TRow>) {
+    const {columns, rows, loading, loaded, errorContent} = data;
+    const {tableColumns, extraColumns} = view ?? {};
+
+    const [activeVisibleColumns, handleVisibleColumnsChange] = useVisibleColumns(columns, {
+        value: visibleColumns,
+        onChange: onVisibleColumnsChange,
+        defaultValue: defaultVisibleColumns,
+    });
+
+    const displayedColumnNames = useMemo(
+        () => columns.filter((column) => activeVisibleColumns.includes(column)),
+        [columns, activeVisibleColumns],
+    );
+
+    const resolvedColumns = useMemo(() => {
+        if (tableColumns) {
+            return tableColumns;
+        }
+        return [...buildPreviewColumns<TRow>(displayedColumnNames, i18n), ...(extraColumns ?? [])];
+    }, [tableColumns, extraColumns, displayedColumnNames]);
+
+    const fieldsOptions = useMemo(
+        () => columns.map((column) => ({id: column, title: column})),
+        [columns],
+    );
+
+    const filteredRows = useMemo(
+        () => filterPreviewRows(rows, displayedColumnNames, search),
+        [rows, displayedColumnNames, search],
+    );
+
+    if (errorContent) {
+        return (
+            <Text color="danger" className={block('error')}>
+                {errorContent}
+            </Text>
+        );
+    }
+
+    return (
+        <Flex direction="column" gap={2} className={block(null, className)}>
+            {!hideToolbar && (
+                <FieldsSearchToolbar
+                    search={search}
+                    onSearchUpdate={onSearchUpdate}
+                    searchPlaceholder={searchPlaceholder}
+                    fields={fieldsOptions}
+                    visibleFields={activeVisibleColumns}
+                    onVisibleFieldsChange={handleVisibleColumnsChange}
+                    hideFieldsSelector={hideFieldsSelector}
+                />
+            )}
+            <DataTable<TRow>
+                columns={resolvedColumns}
+                data={filteredRows}
+                loading={loading}
+                loaded={loaded}
+                emptyVariant={search ? 'nothing-found' : 'no-data'}
+                settings={{displayIndices: false}}
+                className={block('table')}
+            />
+        </Flex>
+    );
+}

package/src/modules/NavigationPreview/helpers/buildPreviewColumns.tsx

@@ -0,0 +1,11 @@
+import type {Column} from '../../../components';
+import {buildColumnsFromKeys} from '../../../helpers/buildColumnsFromKeys';
+import type {NavigationPreviewRow} from '../../../types/navigation';
+import type previewI18n from '../i18n';
+
+export function buildPreviewColumns<TRow extends NavigationPreviewRow>(
+    columns: string[],
+    i18n: typeof previewI18n,
+): Array<Column<TRow>> {
+    return buildColumnsFromKeys<TRow>(columns, i18n('value_empty'));
+}

package/src/modules/NavigationPreview/helpers/filterPreviewRows.ts

@@ -0,0 +1,29 @@
+import type {NavigationPreviewRow} from '../../../types/navigation';
+
+const stringifyCell = (value: unknown): string => {
+    if (value === undefined || value === null) {
+        return '';
+    }
+    if (typeof value === 'string') {
+        return value;
+    }
+    if (typeof value === 'number' || typeof value === 'boolean') {
+        return String(value);
+    }
+    return '';
+};
+
+export function filterPreviewRows<TRow extends NavigationPreviewRow>(
+    rows: TRow[],
+    columns: string[],
+    search?: string,
+): TRow[] {
+    const query = search?.trim().toLowerCase();
+    if (!query) {
+        return rows;
+    }
+
+    return rows.filter((row) =>
+        columns.some((column) => stringifyCell(row[column]).toLowerCase().includes(query)),
+    );
+}

package/src/modules/NavigationPreview/i18n/dicts.ts

@@ -0,0 +1,4 @@
+import en from './en.json';
+import ru from './ru.json';
+
+export default {en, ru};

package/src/modules/NavigationPreview/i18n/en.json

@@ -0,0 +1,3 @@
+{
+    "value_empty": "—"
+}

package/src/modules/NavigationPreview/i18n/index.ts

@@ -0,0 +1,5 @@
+import {addI18Keysets} from '../../../i18n';
+
+import dicts from './dicts';
+
+export default addI18Keysets('qp:navigation-preview', dicts);

package/src/modules/NavigationPreview/i18n/ru.json

@@ -0,0 +1,3 @@
+{
+    "value_empty": "—"
+}

package/src/modules/NavigationPreview/index.ts

@@ -0,0 +1,4 @@
+export {NavigationPreview} from './NavigationPreview';
+export type {NavigationPreviewProps, NavigationPreviewViewConfig} from './NavigationPreview';
+export {buildPreviewColumns} from './helpers/buildPreviewColumns';
+export {filterPreviewRows} from './helpers/filterPreviewRows';

package/src/modules/NavigationPreview/story/NavigationPreview.stories.tsx

@@ -0,0 +1,98 @@
+import React, {useState} from 'react';
+import type {Meta, StoryObj} from '@storybook/react';
+import {Icon, Label} from '@gravity-ui/uikit';
+import LockIcon from '@gravity-ui/icons/svgs/lock.svg';
+import {NavigationPreview} from '..';
+import type {NavigationPreviewRow} from '../../../types/navigation';
+import {PREVIEW_COLUMNS, PREVIEW_ROWS} from './mockData';
+
+const meta: Meta<typeof NavigationPreview> = {
+    title: 'Modules/NavigationPreview',
+    component: NavigationPreview,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'padded',
+    },
+    decorators: [
+        (Story) => (
+            <div style={{width: 560}}>
+                <Story />
+            </div>
+        ),
+    ],
+};
+
+export default meta;
+type Story = StoryObj<typeof NavigationPreview>;
+
+export const Default: Story = {
+    args: {
+        data: {columns: PREVIEW_COLUMNS, rows: PREVIEW_ROWS, loaded: true},
+    },
+};
+
+const ControlledStory = () => {
+    const [search, setSearch] = useState('');
+    const [visibleColumns, setVisibleColumns] = useState<string[]>(['id', 'title', 'status']);
+
+    return (
+        <NavigationPreview
+            data={{columns: PREVIEW_COLUMNS, rows: PREVIEW_ROWS, loaded: true}}
+            search={search}
+            onSearchUpdate={setSearch}
+            visibleColumns={visibleColumns}
+            onVisibleColumnsChange={setVisibleColumns}
+        />
+    );
+};
+
+export const ControlledSearchAndColumns: Story = {
+    render: () => <ControlledStory />,
+};
+
+export const Loading: Story = {
+    args: {
+        data: {columns: [], rows: [], loading: true},
+    },
+};
+
+export const Empty: Story = {
+    args: {
+        data: {columns: PREVIEW_COLUMNS, rows: [], loaded: true},
+    },
+};
+
+export const Error: Story = {
+    args: {
+        data: {columns: [], rows: [], errorContent: 'Failed to load table preview'},
+    },
+};
+
+type CustomRow = NavigationPreviewRow & {lock?: string};
+
+const CUSTOM_ROWS: CustomRow[] = PREVIEW_ROWS.map((row, index) => ({
+    ...row,
+    lock: index % 2 === 0 ? 'shared' : undefined,
+}));
+
+export const CustomColumns: Story = {
+    args: {
+        data: {columns: PREVIEW_COLUMNS, rows: CUSTOM_ROWS, loaded: true},
+        view: {
+            extraColumns: [
+                {
+                    name: 'lock',
+                    header: 'Lock',
+                    render: ({row}) =>
+                        (row as CustomRow).lock ? (
+                            <Label icon={<Icon data={LockIcon} size={12} />}>
+                                {(row as CustomRow).lock}
+                            </Label>
+                        ) : (
+                            '—'
+                        ),
+                },
+            ],
+        },
+    },
+};

package/src/modules/NavigationPreview/story/mockData.ts

@@ -0,0 +1,9 @@
+import type {NavigationPreviewRow} from '../../../types/navigation';
+
+export const PREVIEW_COLUMNS = ['id', 'created_at', 'title', 'status'];
+
+export const PREVIEW_ROWS: NavigationPreviewRow[] = [
+    {id: '1', created_at: '2024-01-01T10:00:00Z', title: 'First row', status: 'active'},
+    {id: '2', created_at: '2024-01-02T11:30:00Z', title: 'Second row', status: 'active'},
+    {id: '3', created_at: '2024-01-03T09:15:00Z', title: 'Third row', status: 'archived'},
+];

package/src/modules/NavigationSchema/NavigationSchema.scss

@@ -0,0 +1,24 @@
+.qp-navigation-schema {
+  --data-table-border-color: var(--g-color-line-generic);
+
+  min-width: 0;
+
+  &__error {
+    display: block;
+  }
+
+  &__table {
+    overflow-x: auto;
+  }
+
+  .data-table__row,
+  .data-table__head {
+    height: 40px;
+  }
+
+  .data-table__th,
+  .data-table__td {
+    border-width: 0 0 1px;
+    vertical-align: middle;
+  }
+}