@gravity-ui/querieskit 1.0.4 → 1.1.0

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 />,
+};

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

@@ -0,0 +1,35 @@
+import type {NavigationViewSection} from '../../../types/navigation';
+
+export const VIEW_COLUMNS = ['Name and Title', 'Type', 'Datacatalog description'];
+
+export const makeViewRows = (count: number) =>
+    Array.from({length: count}, (_, index) => ({
+        'Name and Title': `field_${index + 1}`,
+        Type: index % 2 === 0 ? 'string' : 'int64',
+        'Datacatalog description': index % 3 === 0 ? 'Primary identifier' : '',
+    }));
+
+export const VIEW_SECTIONS: NavigationViewSection[] = [
+    {
+        id: 'general',
+        title: 'General',
+        columns: VIEW_COLUMNS,
+        rows: makeViewRows(4),
+        loaded: true,
+        defaultExpanded: true,
+    },
+    {
+        id: 'attributes',
+        title: 'Attributes',
+        columns: VIEW_COLUMNS,
+        rows: makeViewRows(3),
+        loaded: true,
+    },
+    {
+        id: 'computed',
+        title: 'Computed fields',
+        columns: VIEW_COLUMNS,
+        rows: [],
+        loaded: true,
+    },
+];

package/src/modules/RowsList/RowsList.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import {List} from '@gravity-ui/uikit';
 import cn from 'bem-cn-lite';
 import {
     BaseHistoryRow,
@@ -11,7 +10,7 @@ import {
     QueryHistoryRowVariant,
     QueryHistoryVisibleFieldsConfig,
 } from '../../types/history';
-import {HistoryListEmpty} from '../../components';
+import {EmptyContent, LazyList} from '../../components';
 import {prepareRowData} from './helpers/prepareRowData';
 import {SEARCH_ROW_HEIGHT} from '../../constants/row';
 import './RowsList.scss';
@@ -59,18 +58,19 @@ export const RowsList = <T extends BaseHistoryRow>({
     };
 
     if (!items.length) {
-        return <HistoryListEmpty showFiltersHint={showFiltersHint} className={className} />;
+        return (
+            <EmptyContent
+                variant={showFiltersHint ? 'nothing-found' : 'no-files'}
+                className={className}
+            />
+        );
     }
 
     return (
-        <List
+        <LazyList<QueryHistoryItem<T>>
             className={block(null, className)}
-            filterable={false}
             items={items}
             itemHeight={getItemHeight}
-            itemsHeight={(listItems) =>
-                listItems.reduce((totalHeight, item) => totalHeight + getItemHeight(item), 0)
-            }
             renderItem={(item, isActive, index) =>
                 renderRow(
                     prepareRowData({

package/src/modules/index.ts

@@ -1,5 +1,7 @@
 export {HistoryHeader} from './HistoryHeader';
 export {HistoryLayout} from './HistoryLayout';
+export {NavigationHeader} from './NavigationHeader';
+export type {NavigationHeaderProps} from './NavigationHeader';
 export type {HistoryLayoutProps} from './HistoryLayout';
 export {RowsList} from './RowsList';
 export type {RowsListProps} from './RowsList';
@@ -7,7 +9,22 @@ export {HistoryRow} from './HistoryRow';
 export {HistoryList} from './HistoryList';
 export type {HistoryListProps} from './HistoryList';
 export {HistorySearchRow} from './HistorySearchRow';
+export * from './ChartEditor';
 export {TutorialRow} from './TutorialRow';
 export type {TutorialRowProps} from './TutorialRow';
 export {TutorialSearchRow} from './TutorialSearchRow';
 export type {TutorialSearchRowProps} from './TutorialSearchRow';
+export {ClustersList} from './ClustersList';
+export type {ClustersListProps} from './ClustersList';
+export {NavigationItemsList} from './NavigationItemsList';
+export type {NavigationItemsListProps} from './NavigationItemsList';
+export {NavigationDetail} from './NavigationDetail';
+export type {NavigationDetailProps} from './NavigationDetail';
+export {NavigationSchema, buildSchemaColumns, filterSchema} from './NavigationSchema';
+export type {NavigationSchemaProps, NavigationSchemaViewConfig} from './NavigationSchema';
+export {NavigationPreview, buildPreviewColumns, filterPreviewRows} from './NavigationPreview';
+export type {NavigationPreviewProps, NavigationPreviewViewConfig} from './NavigationPreview';
+export {NavigationMeta, buildMetaGroups} from './NavigationMeta';
+export type {NavigationMetaProps, NavigationMetaViewConfig} from './NavigationMeta';
+export {NavigationView, buildViewColumns} from './NavigationView';
+export type {NavigationViewProps, NavigationViewViewConfig} from './NavigationView';