@gravity-ui/querieskit 1.0.4 → 1.2.0

package/src/modules/NavigationSchema/NavigationSchema.tsx

@@ -0,0 +1,118 @@
+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 {NavigationSchemaColumn, NavigationSchemaConfig} from '../../types/navigation';
+import {buildSchemaColumns} from './helpers/buildSchemaColumns';
+import {filterSchema} from './helpers/filterSchema';
+import i18n from './i18n';
+import './NavigationSchema.scss';
+
+const block = cn('qp-navigation-schema');
+
+export type NavigationSchemaViewConfig<
+    TColumn extends NavigationSchemaColumn = NavigationSchemaColumn,
+> = {
+    tableColumns?: Array<Column<TColumn>>;
+    extraColumns?: Array<Column<TColumn>>;
+};
+
+export type NavigationSchemaProps<TColumn extends NavigationSchemaColumn = NavigationSchemaColumn> =
+    {
+        data: NavigationSchemaConfig<TColumn>;
+        view?: NavigationSchemaViewConfig<TColumn>;
+        search?: string;
+        onSearchUpdate?: (value: string) => void;
+        searchPlaceholder?: string;
+        visibleColumns?: string[];
+        onVisibleColumnsChange?: (value: string[]) => void;
+        defaultVisibleColumns?: string[];
+        hideToolbar?: boolean;
+        hideFieldsSelector?: boolean;
+        className?: string;
+    };
+
+export function NavigationSchema<TColumn extends NavigationSchemaColumn = NavigationSchemaColumn>({
+    data,
+    view,
+    search,
+    onSearchUpdate,
+    searchPlaceholder,
+    visibleColumns,
+    onVisibleColumnsChange,
+    defaultVisibleColumns,
+    hideToolbar,
+    hideFieldsSelector,
+    className,
+}: NavigationSchemaProps<TColumn>) {
+    const {columns, loading, loaded, errorContent} = data;
+    const {tableColumns, extraColumns} = view ?? {};
+
+    const resolvedColumns = useMemo(() => {
+        if (tableColumns) {
+            return tableColumns;
+        }
+        return [...buildSchemaColumns<TColumn>(i18n), ...(extraColumns ?? [])];
+    }, [tableColumns, extraColumns]);
+
+    const allColumnNames = useMemo(
+        () => resolvedColumns.map((column) => column.name),
+        [resolvedColumns],
+    );
+
+    const [activeVisibleColumns, handleVisibleColumnsChange] = useVisibleColumns(allColumnNames, {
+        value: visibleColumns,
+        onChange: onVisibleColumnsChange,
+        defaultValue: defaultVisibleColumns,
+    });
+
+    const displayedColumns = useMemo(
+        () => resolvedColumns.filter((column) => activeVisibleColumns.includes(column.name)),
+        [resolvedColumns, activeVisibleColumns],
+    );
+
+    const fieldsOptions = useMemo(
+        () =>
+            resolvedColumns.map((column) => ({
+                id: column.name,
+                title: column.header ?? column.name,
+            })),
+        [resolvedColumns],
+    );
+
+    const rows = useMemo(() => filterSchema(columns, search), [columns, 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<TColumn>
+                columns={displayedColumns}
+                data={rows}
+                loading={loading}
+                loaded={loaded}
+                emptyVariant={search ? 'nothing-found' : 'no-data'}
+                settings={{displayIndices: false}}
+                className={block('table')}
+            />
+        </Flex>
+    );
+}

package/src/modules/NavigationSchema/helpers/buildSchemaColumns.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import {Flex, Icon, Text} from '@gravity-ui/uikit';
+import ArrowUpIcon from '@gravity-ui/icons/svgs/arrow-up.svg';
+import ArrowDownIcon from '@gravity-ui/icons/svgs/arrow-down.svg';
+import CheckIcon from '@gravity-ui/icons/svgs/check.svg';
+import type {Column} from '../../../components';
+import type {NavigationSchemaColumn, NavigationSchemaSortOrder} from '../../../types/navigation';
+import type schemaI18n from '../i18n';
+
+const SORT_ICONS: Record<NavigationSchemaSortOrder, typeof ArrowUpIcon> = {
+    ascending: ArrowUpIcon,
+    descending: ArrowDownIcon,
+};
+
+export function buildSchemaColumns<TColumn extends NavigationSchemaColumn>(
+    i18n: typeof schemaI18n,
+): Array<Column<TColumn>> {
+    return [
+        {
+            name: 'name',
+            header: i18n('title_column-name'),
+            render: ({row}) => (
+                <Flex inline gap={1} alignItems="center">
+                    <Text>{row.name}</Text>
+                    {row.sortOrder && <Icon data={SORT_ICONS[row.sortOrder]} size={14} />}
+                </Flex>
+            ),
+        },
+        {
+            name: 'type',
+            header: i18n('title_column-type'),
+            render: ({row}) => row.type ?? i18n('value_empty'),
+        },
+        {
+            name: 'sortOrder',
+            header: i18n('title_column-sort-order'),
+            render: ({row}) =>
+                row.sortOrder
+                    ? i18n(
+                          row.sortOrder === 'ascending'
+                              ? 'value_sort-ascending'
+                              : 'value_sort-descending',
+                      )
+                    : i18n('value_empty'),
+        },
+        {
+            name: 'required',
+            header: i18n('title_column-required'),
+            align: 'center',
+            render: ({row}) =>
+                row.required ? <Icon data={CheckIcon} size={16} /> : i18n('value_empty'),
+        },
+    ];
+}

package/src/modules/NavigationSchema/helpers/filterSchema.ts

@@ -0,0 +1,18 @@
+import type {NavigationSchemaColumn} from '../../../types/navigation';
+
+export function filterSchema<TColumn extends NavigationSchemaColumn>(
+    columns: TColumn[],
+    search?: string,
+): TColumn[] {
+    const query = search?.trim().toLowerCase();
+    if (!query) {
+        return columns;
+    }
+
+    return columns.filter((column) => {
+        return (
+            column.name.toLowerCase().includes(query) ||
+            (column.type?.toLowerCase().includes(query) ?? false)
+        );
+    });
+}

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

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

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

@@ -0,0 +1,9 @@
+{
+    "title_column-name": "Name",
+    "title_column-type": "Type",
+    "title_column-sort-order": "Sort order",
+    "title_column-required": "Required",
+    "value_sort-ascending": "Ascending",
+    "value_sort-descending": "Descending",
+    "value_empty": "—"
+}

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

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

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

@@ -0,0 +1,9 @@
+{
+    "title_column-name": "Имя",
+    "title_column-type": "Тип",
+    "title_column-sort-order": "Сортировка",
+    "title_column-required": "Обязательное",
+    "value_sort-ascending": "По возрастанию",
+    "value_sort-descending": "По убыванию",
+    "value_empty": "—"
+}

package/src/modules/NavigationSchema/index.ts

@@ -0,0 +1,4 @@
+export {NavigationSchema} from './NavigationSchema';
+export type {NavigationSchemaProps, NavigationSchemaViewConfig} from './NavigationSchema';
+export {buildSchemaColumns} from './helpers/buildSchemaColumns';
+export {filterSchema} from './helpers/filterSchema';

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

@@ -0,0 +1,112 @@
+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 {NavigationSchema} from '..';
+import type {NavigationSchemaColumn} from '../../../types/navigation';
+import {SCHEMA_COLUMNS} from './mockData';
+
+const meta: Meta<typeof NavigationSchema> = {
+    title: 'Modules/NavigationSchema',
+    component: NavigationSchema,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'padded',
+    },
+    decorators: [
+        (Story) => (
+            <div style={{width: 480}}>
+                <Story />
+            </div>
+        ),
+    ],
+};
+
+export default meta;
+type Story = StoryObj<typeof NavigationSchema>;
+
+export const Default: Story = {
+    args: {
+        data: {columns: SCHEMA_COLUMNS, loaded: true},
+    },
+};
+
+export const Loading: Story = {
+    args: {
+        data: {columns: [], loading: true},
+    },
+};
+
+export const Empty: Story = {
+    args: {
+        data: {columns: [], loaded: true},
+    },
+};
+
+const NothingFoundStory = () => {
+    const [search, setSearch] = useState('no-such-field');
+
+    return (
+        <NavigationSchema
+            data={{columns: SCHEMA_COLUMNS, loaded: true}}
+            search={search}
+            onSearchUpdate={setSearch}
+        />
+    );
+};
+
+export const NothingFound: Story = {render: () => <NothingFoundStory />};
+
+const ControlledVisibleColumnsStory = () => {
+    const [search, setSearch] = useState('');
+    const [visibleColumns, setVisibleColumns] = useState<string[]>(['name', 'type']);
+
+    return (
+        <NavigationSchema
+            data={{columns: SCHEMA_COLUMNS, loaded: true}}
+            search={search}
+            onSearchUpdate={setSearch}
+            visibleColumns={visibleColumns}
+            onVisibleColumnsChange={setVisibleColumns}
+        />
+    );
+};
+
+export const ControlledVisibleColumns: Story = {
+    render: () => <ControlledVisibleColumnsStory />,
+};
+
+export const Error: Story = {
+    args: {
+        data: {columns: [], errorContent: 'Failed to load table schema'},
+    },
+};
+
+type CustomColumn = NavigationSchemaColumn & {lock?: string};
+
+const CUSTOM_COLUMNS: CustomColumn[] = SCHEMA_COLUMNS.map((column, index) => ({
+    ...column,
+    lock: index % 2 === 0 ? 'shared' : undefined,
+}));
+
+export const CustomColumns: Story = {
+    args: {
+        data: {columns: CUSTOM_COLUMNS, loaded: true},
+        view: {
+            extraColumns: [
+                {
+                    name: 'lock',
+                    header: 'Lock',
+                    render: ({row}) =>
+                        (row as CustomColumn).lock ? (
+                            <Label icon={<Icon data={LockIcon} size={12} />}>
+                                {(row as CustomColumn).lock}
+                            </Label>
+                        ) : (
+                            '—'
+                        ),
+                },
+            ],
+        },
+    },
+};

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

@@ -0,0 +1,9 @@
+import type {NavigationSchemaColumn} from '../../../types/navigation';
+
+export const SCHEMA_COLUMNS: NavigationSchemaColumn[] = [
+    {name: 'id', type: 'int64', sortOrder: 'ascending', required: true},
+    {name: 'created_at', type: 'string', sortOrder: 'descending', required: true},
+    {name: 'title', type: 'string', required: true},
+    {name: 'status', type: 'string'},
+    {name: 'payload', type: 'any'},
+];

package/src/modules/NavigationView/NavigationView.scss

@@ -0,0 +1,44 @@
+.qp-navigation-view {
+  --data-table-border-color: var(--g-color-line-generic);
+
+  min-width: 0;
+
+  &__error {
+    display: block;
+  }
+
+  &__skeleton-row {
+    height: 24px;
+  }
+
+  &__empty {
+    height: 100%;
+  }
+
+  &__section {
+    width: 100%;
+  }
+
+  &__action {
+    color: var(--g-color-text-secondary);
+  }
+
+  &__summary {
+    width: 100%;
+  }
+
+  &__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/NavigationView/NavigationView.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import {Flex, Text} from '@gravity-ui/uikit';
+import cn from 'bem-cn-lite';
+import {type Column, EmptyContent, SkeletonRows} from '../../components';
+import type {NavigationViewConfig, NavigationViewRow} from '../../types/navigation';
+import {NavigationViewSectionItem} from './internal/NavigationViewSectionItem';
+import './NavigationView.scss';
+
+const block = cn('qp-navigation-view');
+
+export type NavigationViewViewConfig<TRow extends NavigationViewRow = NavigationViewRow> = {
+    tableColumns?: Array<Column<TRow>>;
+    extraColumns?: Array<Column<TRow>>;
+};
+
+export type NavigationViewProps<TRow extends NavigationViewRow = NavigationViewRow> = {
+    data: NavigationViewConfig<TRow>;
+    view?: NavigationViewViewConfig<TRow>;
+    className?: string;
+};
+
+export function NavigationView<TRow extends NavigationViewRow = NavigationViewRow>({
+    data,
+    view,
+    className,
+}: NavigationViewProps<TRow>) {
+    const {sections, loading, loaded, errorContent} = data;
+    const {tableColumns, extraColumns} = view ?? {};
+
+    if (errorContent) {
+        return (
+            <Text color="danger" className={block('error')}>
+                {errorContent}
+            </Text>
+        );
+    }
+
+    if (loading && !loaded) {
+        return (
+            <SkeletonRows className={block(null, className)} rowClassName={block('skeleton-row')} />
+        );
+    }
+
+    if (sections.length === 0) {
+        return <EmptyContent variant="no-data" className={block('empty')} />;
+    }
+
+    return (
+        <Flex direction="column" gap={2} className={block(null, className)}>
+            {sections.map((section) => (
+                <NavigationViewSectionItem<TRow>
+                    key={section.id}
+                    section={section}
+                    tableColumns={tableColumns}
+                    extraColumns={extraColumns}
+                />
+            ))}
+        </Flex>
+    );
+}

package/src/modules/NavigationView/helpers/buildViewColumns.tsx

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

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

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

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

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

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

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

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

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

package/src/modules/NavigationView/index.ts

@@ -0,0 +1,3 @@
+export {NavigationView} from './NavigationView';
+export type {NavigationViewProps, NavigationViewViewConfig} from './NavigationView';
+export {buildViewColumns} from './helpers/buildViewColumns';

package/src/modules/NavigationView/internal/NavigationViewSectionItem.tsx

@@ -0,0 +1,70 @@
+import React, {useMemo} from 'react';
+import {Disclosure, Flex, Text} from '@gravity-ui/uikit';
+import cn from 'bem-cn-lite';
+import {type Column, DataTable, NavigationActionButtons} from '../../../components';
+import type {NavigationViewRow, NavigationViewSection} from '../../../types/navigation';
+import {buildViewColumns} from '../helpers/buildViewColumns';
+import i18n from '../i18n';
+
+const block = cn('qp-navigation-view');
+
+export type NavigationViewSectionItemProps<TRow extends NavigationViewRow = NavigationViewRow> = {
+    section: NavigationViewSection<TRow>;
+    tableColumns?: Array<Column<TRow>>;
+    extraColumns?: Array<Column<TRow>>;
+};
+
+export function NavigationViewSectionItem<TRow extends NavigationViewRow = NavigationViewRow>({
+    section,
+    tableColumns,
+    extraColumns,
+}: NavigationViewSectionItemProps<TRow>) {
+    const resolvedColumns = useMemo(() => {
+        if (tableColumns) {
+            return tableColumns;
+        }
+        return [...buildViewColumns<TRow>(section.columns, i18n), ...(extraColumns ?? [])];
+    }, [tableColumns, extraColumns, section.columns]);
+
+    return (
+        <Disclosure
+            summary={section.title}
+            expanded={section.expanded}
+            defaultExpanded={section.defaultExpanded}
+            onUpdate={section.onExpandedChange}
+            className={block('section')}
+        >
+            <Disclosure.Summary>
+                {(_props, defaultButton) => (
+                    <Flex
+                        gap={2}
+                        justifyContent="flex-start"
+                        alignItems="center"
+                        className={block('summary')}
+                    >
+                        <Flex minWidth={0}>{defaultButton}</Flex>
+                        <NavigationActionButtons
+                            actions={section.actions}
+                            arg={section}
+                            buttonClassName={block('action')}
+                        />
+                    </Flex>
+                )}
+            </Disclosure.Summary>
+            <Disclosure.Details>
+                {section.errorContent ? (
+                    <Text color="danger">{section.errorContent}</Text>
+                ) : (
+                    <DataTable<TRow>
+                        columns={resolvedColumns}
+                        data={section.rows}
+                        loading={section.loading}
+                        loaded={section.loaded}
+                        settings={{displayIndices: false}}
+                        className={block('table')}
+                    />
+                )}
+            </Disclosure.Details>
+        </Disclosure>
+    );
+}

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

@@ -0,0 +1,110 @@
+import React, {useState} from 'react';
+import type {Meta, StoryObj} from '@storybook/react';
+import {Icon} from '@gravity-ui/uikit';
+import ArrowUpRightFromSquareIcon from '@gravity-ui/icons/svgs/arrow-up-right-from-square.svg';
+import CodeIcon from '@gravity-ui/icons/svgs/code.svg';
+import GearIcon from '@gravity-ui/icons/svgs/gear.svg';
+import PlayIcon from '@gravity-ui/icons/svgs/play.svg';
+import {action} from 'storybook/actions';
+import {NavigationView} from '..';
+import type {NavigationViewSection} from '../../../types/navigation';
+import {VIEW_SECTIONS} from './mockData';
+
+const meta: Meta<typeof NavigationView> = {
+    title: 'Modules/NavigationView',
+    component: NavigationView,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'padded',
+    },
+    decorators: [
+        (Story) => (
+            <div style={{width: 640}}>
+                <Story />
+            </div>
+        ),
+    ],
+};
+
+export default meta;
+type Story = StoryObj<typeof NavigationView>;
+
+export const Default: Story = {
+    args: {
+        data: {sections: VIEW_SECTIONS, loaded: true},
+    },
+};
+
+export const Loading: Story = {
+    args: {
+        data: {sections: [], loading: true},
+    },
+};
+
+export const Empty: Story = {
+    args: {
+        data: {sections: [], loaded: true},
+    },
+};
+
+export const Error: Story = {
+    args: {
+        data: {sections: [], errorContent: 'Failed to load view'},
+    },
+};
+
+const SECTIONS_WITH_ACTIONS: NavigationViewSection[] = VIEW_SECTIONS.map((section) => ({
+    ...section,
+    actions: [
+        {
+            id: 'export',
+            title: 'Export',
+            content: <Icon data={ArrowUpRightFromSquareIcon} size={14} />,
+            onClick: (s) => action('exportClick')(s.id),
+        },
+        {
+            id: 'code',
+            title: 'Show code',
+            content: <Icon data={CodeIcon} size={14} />,
+            onClick: (s) => action('codeClick')(s.id),
+        },
+        {
+            id: 'run',
+            title: 'Run',
+            content: <Icon data={PlayIcon} size={14} />,
+            onClick: (s) => action('runClick')(s.id),
+        },
+        {
+            id: 'settings',
+            title: 'Settings',
+            content: <Icon data={GearIcon} size={14} />,
+            onClick: (s) => action('settingsClick')(s.id),
+        },
+    ],
+}));
+
+export const WithActions: Story = {
+    args: {
+        data: {sections: SECTIONS_WITH_ACTIONS, loaded: true},
+    },
+};
+
+const ControlledExpandStory = () => {
+    const [expandedId, setExpandedId] = useState<string>('general');
+
+    const sections: NavigationViewSection[] = VIEW_SECTIONS.map((section) => ({
+        ...section,
+        expanded: section.id === expandedId,
+        defaultExpanded: undefined,
+        onExpandedChange: (expanded) => {
+            action('onExpandedChange')(section.id, expanded);
+            setExpandedId(expanded ? section.id : '');
+        },
+    }));
+
+    return <NavigationView data={{sections, loaded: true}} />;
+};
+
+export const ControlledExpand: Story = {
+    render: () => <ControlledExpandStory />,
+};