@gravity-ui/querieskit 1.1.0 → 1.3.0

package/src/widgets/QueriesHistory/QueriesHistory.tsx

@@ -1,37 +1,35 @@
 import React from 'react';
-import {HistoryHeader, HistoryLayout, HistoryList} from '../../modules';
+import cn from 'bem-cn-lite';
+import {QueriesList} from '../../modules';
 import i18n from './i18n';
 import {
-    QueryHistoryComparisonConfig,
-    QueryHistoryEditingConfig,
-    QueryHistoryFilterConfig,
-    QueryHistoryItem,
-    QueryHistoryRow,
-    QueryHistoryRowAction,
-    QueryHistoryRowRenderData,
-    QueryHistorySearchConfig,
-    QueryHistoryVisibleFieldsConfig,
-} from '../../types/history';
-import {FieldsSelector} from '../../components';
-import {getListKey} from '../../helpers/getListKey';
-import {ComparisonActions} from './ComparisonActions';
-import cn from 'bem-cn-lite';
+    QueryListComparisonConfig,
+    QueryListEditingConfig,
+    QueryListFilterConfig,
+    QueryListItem,
+    QueryListRowAction,
+    QueryListRowRenderData,
+    QueryListSearchConfig,
+    QueryListVisibleFieldsConfig,
+} from '../../types/queryList';
+import {QueryHistoryRow} from '../../types/history';
+import {HistoryRowContent} from './internal/HistoryRowContent';
 import './QueriesHistory.scss';
 
 export type QueriesHistoryProps<T extends QueryHistoryRow = QueryHistoryRow> = {
     className?: string;
     title?: string;
     logo?: React.ReactNode;
-    search: QueryHistorySearchConfig;
-    filter?: QueryHistoryFilterConfig;
-    items: QueryHistoryItem<T>[];
+    search: QueryListSearchConfig;
+    filter?: QueryListFilterConfig;
+    items: QueryListItem<T>[];
     selectedRowId?: T['id'];
-    editing?: QueryHistoryEditingConfig<T>;
-    comparison?: QueryHistoryComparisonConfig<T>;
-    visibleFields?: QueryHistoryVisibleFieldsConfig<T>;
-    renderRowItem?: (data: QueryHistoryRowRenderData<T>) => React.ReactNode;
-    getRowActions?: (item: T) => QueryHistoryRowAction<T>[];
-    onListItemClick?: (item: QueryHistoryItem<T>) => void;
+    editing?: QueryListEditingConfig<T>;
+    comparison?: QueryListComparisonConfig<T>;
+    visibleFields?: QueryListVisibleFieldsConfig<T>;
+    renderRowItem?: (data: QueryListRowRenderData<T>) => React.ReactNode;
+    getRowActions?: (item: T) => QueryListRowAction<T>[];
+    onListItemClick?: (item: QueryListItem<T>) => void;
 };
 
 const block = cn('qp-query-history');
@@ -51,47 +49,23 @@ export const QueriesHistory = <T extends QueryHistoryRow>({
     onListItemClick,
     className,
 }: QueriesHistoryProps<T>) => {
-    const showSearchResults = Boolean(search.fullSearch && search.value?.trim());
-    const rowVariant = showSearchResults ? 'search' : 'default';
-
     return (
-        <HistoryLayout
+        <QueriesList
             className={block(null, className)}
             title={title || i18n('title_history')}
             logo={logo}
-            actions={visibleFields && <FieldsSelector {...visibleFields} />}
-            header={
-                <HistoryHeader
-                    className={block('header')}
-                    search={search.value}
-                    fullSearch={search.fullSearch}
-                    hasClear={search.hasClear}
-                    filter={filter}
-                    onUpdate={search.onUpdate}
-                />
-            }
-            footer={
-                comparison && (
-                    <ComparisonActions
-                        comparison={comparison}
-                        className={block('comparison-actions')}
-                    />
-                )
+            search={search}
+            filter={filter}
+            items={items}
+            selectedRowId={selectedRowId}
+            visibleFields={visibleFields}
+            editing={editing}
+            comparison={comparison}
+            getRowActions={getRowActions}
+            renderRow={(data) =>
+                renderRowItem ? renderRowItem(data) : <HistoryRowContent {...data} />
             }
-        >
-            <HistoryList
-                key={getListKey(items, rowVariant)}
-                items={items}
-                rowVariant={rowVariant}
-                selectedRowId={selectedRowId}
-                visibleFields={visibleFields}
-                editing={editing}
-                comparison={comparison}
-                renderRowItem={renderRowItem}
-                getRowActions={getRowActions}
-                showFiltersHint={Boolean(filter)}
-                onItemClick={onListItemClick}
-            />
-        </HistoryLayout>
+            onListItemClick={onListItemClick}
+        />
     );
 };

package/src/{modules/HistoryList → widgets/QueriesHistory/internal}/HistoryRowContent.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
-import {QueryHistoryRow, QueryHistoryRowRenderData} from '../../types/history';
-import {HistoryGroupHeader} from '../../components';
-import {HistoryRow} from '../HistoryRow';
-import {HistorySearchRow} from '../HistorySearchRow';
+import {HistoryGroupHeader} from '../../../components';
+import {HistoryRow, HistorySearchRow} from '../../../modules';
+import {QueryListRowRenderData} from '../../../types/queryList';
+import {QueryHistoryRow} from '../../../types/history';
 
 export const HistoryRowContent = <T extends QueryHistoryRow>({
     variant,
     ...data
-}: QueryHistoryRowRenderData<T>) => {
+}: QueryListRowRenderData<T>) => {
     const {item} = data;
 
     if ('header' in item) {

package/src/widgets/QueriesNavigation/QueriesNavigation.scss

@@ -1,4 +1,6 @@
 .qp-queries-navigation {
+  height: 100%;
+
   &__empty,
   &__error {
     padding: var(--g-spacing-2);

package/src/widgets/QueriesNavigation/QueriesNavigation.stories.tsx

@@ -53,64 +53,64 @@ const defaultActions: NavigationHeaderAction[] = [
 
 const CLUSTERS: NavigationCluster[] = [
     {
-        id: 'arnold',
-        title: 'Arnold',
+        id: 'northstar',
+        title: 'Northstar',
         color: 'white',
         backgroundColor: 'rgba(218, 68, 83, 1)',
         description: 'Production',
     },
     {
-        id: 'freud',
-        title: 'Freud',
+        id: 'cedar',
+        title: 'Cedar',
         color: 'white',
         backgroundColor: 'rgba(127, 130, 133, 1)',
         description: 'Production',
     },
     {
-        id: 'hahn',
-        title: 'Hahn',
+        id: 'sequoia',
+        title: 'Sequoia',
         color: 'white',
         backgroundColor: 'rgba(215, 112, 173, 1)',
         description: 'Production',
     },
     {
-        id: 'yp-sas-test',
-        title: 'YP-Sas-Test',
+        id: 'pioneer-test',
+        title: 'Pioneer-Test',
         color: 'white',
         backgroundColor: 'rgba(150, 122, 220, 1)',
         description: 'Testing',
     },
     {
-        id: 'zeno',
-        title: 'Zeno',
+        id: 'orbit',
+        title: 'Orbit',
         color: 'white',
         backgroundColor: 'rgba(233, 87, 63, 1)',
         description: 'Production',
     },
     {
-        id: 'ada',
-        title: 'Ada',
+        id: 'lighthouse',
+        title: 'Lighthouse',
         color: 'white',
         backgroundColor: 'rgba(67, 68, 69, 1)',
         description: 'Production',
     },
     {
-        id: 'arnold-gnd',
-        title: 'Arnold-GND',
+        id: 'northstar-gnd',
+        title: 'Northstar-GND',
         color: 'white',
         backgroundColor: 'rgba(140, 193, 82, 1)',
         description: 'tesdting',
     },
     {
-        id: 'deimos',
-        title: 'Deimos',
+        id: 'harbor',
+        title: 'Harbor',
         color: 'white',
         backgroundColor: 'rgba(55, 188, 155, 1)',
         description: 'Production',
     },
     {
-        id: 'freud-gnd',
-        title: 'Freud-GND',
+        id: 'cedar-gnd',
+        title: 'Cedar-GND',
         color: 'white',
         backgroundColor: 'rgba(140, 193, 82, 1)',
         description: 'Prestable',
@@ -129,18 +129,27 @@ const ITEM_NAMES: Array<Pick<NavigationItem, 'title' | 'kind' | 'hasChildren' |
 const getPathDepth = (path: string | undefined): number =>
     (path ?? '').split('/').filter(Boolean).length;
 
-const getItemsForPath = (path: string | undefined): NavigationItem[] => {
+const getItemsForPath = (
+    path: string | undefined,
+    sort: NavigationSortOrder = 'asc',
+): NavigationItem[] => {
     if (getPathDepth(path) > 1) {
         return [];
     }
 
-    return ITEM_NAMES.map(({title, kind, hasChildren, disabled}) => ({
-        path: `${path ?? ''}/${title}`,
-        title,
-        kind,
-        hasChildren,
-        disabled,
-    }));
+    return [...ITEM_NAMES]
+        .sort(({title: leftTitle}, {title: rightTitle}) =>
+            sort === 'asc'
+                ? leftTitle.localeCompare(rightTitle)
+                : rightTitle.localeCompare(leftTitle),
+        )
+        .map(({title, kind, hasChildren, disabled}) => ({
+            path: `${path ?? ''}/${title}`,
+            title,
+            kind,
+            hasChildren,
+            disabled,
+        }));
 };
 
 export default meta;
@@ -190,7 +199,7 @@ const useLocationState = (initial: NavigationLocation) => {
 const useNavigationStoryState = (initial: NavigationLocation) => {
     const {location, onUpdate} = useLocationState(initial);
     const [sort, setSort] = useState<NavigationSortOrder>('asc');
-    const items = getItemsForPath(location.path);
+    const items = getItemsForPath(location.path, sort);
 
     return {location, onUpdate, sort, setSort, items};
 };
@@ -257,7 +266,7 @@ const LoadingStory = () => {
 };
 
 const EmptyStory = () => {
-    const {location, onUpdate} = useLocationState({cluster: 'arnold', path: '/home/empty'});
+    const {location, onUpdate} = useLocationState({cluster: 'northstar', path: '/home/empty'});
 
     return (
         <div style={{width: 300, height: 500}}>
@@ -272,7 +281,7 @@ const EmptyStory = () => {
 };
 
 const EmptySearchStory = () => {
-    const {location, onUpdate} = useLocationState({cluster: 'arnold', path: '/home'});
+    const {location, onUpdate} = useLocationState({cluster: 'northstar', path: '/home'});
     const [search, setSearch] = useState('no-such-item');
 
     return (
@@ -312,8 +321,8 @@ const CUSTOM_CLUSTERS: CustomCluster[] = CLUSTERS.map((cluster) => ({
     env: cluster.description ?? 'Unknown',
 }));
 
-const getCustomItemsForPath = (path: string | undefined): CustomItem[] =>
-    getItemsForPath(path).map((item, index) => ({
+const getCustomItemsForPath = (path: string | undefined, sort: NavigationSortOrder): CustomItem[] =>
+    getItemsForPath(path, sort).map((item, index) => ({
         ...item,
         owner: index % 2 === 0 ? 'robot' : 'user',
     }));
@@ -329,7 +338,7 @@ const CustomRowsStory = () => {
                 header={{actions: defaultActions, onLoadSuggestions: mockLoadPathSuggestions}}
                 onUpdate={onUpdate}
                 clusters={CUSTOM_CLUSTERS}
-                items={getCustomItemsForPath(location.path)}
+                items={getCustomItemsForPath(location.path, sort)}
                 sort={{value: sort, onUpdate: setSort}}
                 renderClusterItem={({cluster}) => (
                     <Flex alignItems="center" gap={2} style={{width: '100%', padding: '0 8px'}}>
@@ -359,7 +368,7 @@ const CustomRowsStory = () => {
 };
 
 const CustomDetailResolverStory = () => {
-    const {location, onUpdate} = useLocationState({cluster: 'arnold', path: '/home'});
+    const {location, onUpdate} = useLocationState({cluster: 'northstar', path: '/home'});
     const [openedItem, setOpenedItem] = useState<NavigationItem | undefined>(undefined);
 
     const resolveDetail = createNavigationDetailResolver({

package/src/widgets/QueryResults/QueryResults.scss

@@ -0,0 +1,25 @@
+.qp-query-results {
+    min-width: 0;
+
+    &__toolbar {
+        min-width: 0;
+    }
+
+    &__views,
+    &__rows-info,
+    &__actions {
+        flex-shrink: 0;
+    }
+
+    &__toolbar-content {
+        min-width: 0;
+    }
+
+    &__actions {
+        margin-left: auto;
+    }
+
+    &__content {
+        min-width: 0;
+    }
+}

package/src/widgets/QueryResults/QueryResults.stories.tsx

@@ -0,0 +1,155 @@
+import React, {useState} from 'react';
+import type {Meta, StoryObj} from '@storybook/react';
+import {
+    ArrowDownToLine,
+    ArrowUpFromLine,
+    ArrowUpRightFromSquare,
+    DatabaseArrowRight,
+    Gear,
+    LayoutColumns,
+} from '@gravity-ui/icons';
+import {Button, Flex, Icon, Link} from '@gravity-ui/uikit';
+import {action} from 'storybook/actions';
+import {QueryResults} from './QueryResults';
+import type {QueryResultColumn, QueryResultsView} from '../../types/queryResults';
+
+type Row = {
+    age: number;
+    ip: string;
+    last_url: string;
+    last_visit_time: number;
+    name: unknown;
+    region: number;
+    user_agent: string;
+};
+
+const columns: Array<QueryResultColumn<Row>> = [
+    {name: 'age', header: 'age', type: ['DataType', 'Int32'], width: 70},
+    {name: 'ip', header: 'ip', type: ['DataType', 'String'], width: 180},
+    {name: 'last_url', header: 'last_url', type: ['DataType', 'Utf8'], width: 420},
+    {
+        name: 'last_visit_time',
+        header: 'last_visit_time',
+        type: ['DataType', 'Timestamp'],
+        width: 160,
+    },
+    {name: 'name', header: 'name', type: ['OptionalType', ['DataType', 'Utf8']], width: 160},
+    {name: 'region', header: 'region', type: ['DataType', 'Uint32'], width: 100},
+    {name: 'user_agent', header: 'user_agent', type: ['DataType', 'String'], width: 360},
+];
+
+const rows: Row[] = [
+    {
+        age: 15,
+        ip: '95.106.17.32',
+        last_url:
+            'http://avia-talk.ru/otzyvy-o-aviakompaniyax-rossii/otzyvy-aviakompaniya-s7-sibir/comments2',
+        last_visit_time: 1447027200,
+        name: ['Anya'],
+        region: 213,
+        user_agent: 'Mozilla/5.0',
+    },
+    {
+        age: 25,
+        ip: '88.78.248.151',
+        last_url:
+            'http://www.arrivo.ru/statii/sovety/kak-puteshestvovat-s-peresadkami-vazhney-sovety.html',
+        last_visit_time: 1447113600,
+        name: ['Petr'],
+        region: 225,
+        user_agent:
+            'Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.2; Win64; x64; Trident/4.0; .NET CLR 2.0.50727; .NET CLR 3.0.04506.648)',
+    },
+    {
+        age: 17,
+        ip: '93.94.183.63',
+        last_url: 'http://www.avia77.ru/advices/change%20of%20plane/',
+        last_visit_time: 1447160400,
+        name: ['Masha'],
+        region: 1,
+        user_agent: 'Opera/9.80 (Windows NT 5.1) Presto/2.12.388 Version/12.17',
+    },
+];
+
+const meta: Meta<typeof QueryResults> = {
+    title: 'Widgets/QueryResults',
+    component: QueryResults,
+    tags: ['autodocs'],
+    parameters: {layout: 'padded'},
+};
+
+export default meta;
+type Story = StoryObj<typeof QueryResults<Row>>;
+
+export const Default: Story = {
+    args: {
+        columns,
+        rows,
+        totalRows: 6,
+        toolbarContent: (
+            <Flex gap={2} alignItems="center">
+                <Link href="#">markov: `tmp/yql/mbobelyuk/result`</Link>
+                <Button view="flat-secondary" size="s" onClick={action('insert')}>
+                    <Icon data={DatabaseArrowRight} size={16} />
+                    Insert
+                </Button>
+                <Button view="flat-secondary" size="s" onClick={action('go-to-yt')}>
+                    Go to YT
+                    <Icon data={ArrowUpRightFromSquare} size={16} />
+                </Button>
+            </Flex>
+        ),
+        actions: (
+            <Flex gap={1} alignItems="center">
+                <Button view="flat-secondary" size="s" onClick={action('export')}>
+                    <Icon data={ArrowUpFromLine} size={16} />
+                    Export
+                </Button>
+                <Button view="flat-secondary" size="s" onClick={action('download')}>
+                    <Icon data={ArrowDownToLine} size={16} />
+                    Download
+                </Button>
+                <Button
+                    view="flat-secondary"
+                    size="s"
+                    aria-label="Configure columns"
+                    onClick={action('configure-columns')}
+                >
+                    <Icon data={LayoutColumns} size={16} />
+                </Button>
+                <Button
+                    view="flat-secondary"
+                    size="s"
+                    aria-label="Settings"
+                    onClick={action('settings')}
+                >
+                    <Icon data={Gear} size={16} />
+                </Button>
+            </Flex>
+        ),
+    },
+};
+
+const ControlledViewStory = () => {
+    const [view, setView] = useState<QueryResultsView>('schema');
+
+    return <QueryResults columns={columns} rows={rows} view={view} onViewChange={setView} />;
+};
+
+export const ControlledView: Story = {render: () => <ControlledViewStory />};
+
+export const Loading: Story = {args: {columns, rows: [], loading: true}};
+
+export const Error: Story = {
+    args: {columns, rows: [], errorContent: 'Failed to load query results'},
+};
+
+export const CustomSchema: Story = {
+    args: {
+        columns,
+        rows,
+        renderSchema: ({columns: schemaColumns}) => (
+            <div>{`The result contains ${schemaColumns.length} columns.`}</div>
+        ),
+    },
+};

package/src/widgets/QueryResults/QueryResults.tsx

@@ -0,0 +1,121 @@
+import React, {useCallback, useState} from 'react';
+import {Flex, SegmentedRadioGroup, Text} from '@gravity-ui/uikit';
+import cn from 'bem-cn-lite';
+import {QueryResultsTable} from '../../components';
+import type {
+    QueryResultColumn,
+    QueryResultFormatterSettings,
+    QueryResultsSchemaRenderContext,
+    QueryResultsView,
+} from '../../types/queryResults';
+import {QueryResultsSchema} from './internal/QueryResultsSchema';
+import i18n from './i18n';
+
+import './QueryResults.scss';
+
+const block = cn('qp-query-results');
+
+export type QueryResultsProps<TRow extends Record<string, unknown>> = {
+    columns: Array<QueryResultColumn<TRow>>;
+    /** Values use the YQL wire representation consumed by @gravity-ui/unipika. */
+    rows: TRow[];
+    totalRows?: number;
+    loading?: boolean;
+    errorContent?: React.ReactNode;
+    rowKey?: (row: TRow, index: number) => string | number;
+    formatterSettings?: QueryResultFormatterSettings;
+    maxVisibleLines?: number;
+    title?: React.ReactNode;
+    toolbarContent?: React.ReactNode;
+    actions?: React.ReactNode;
+    view?: QueryResultsView;
+    defaultView?: QueryResultsView;
+    onViewChange?: (view: QueryResultsView) => void;
+    renderSchema?: (context: QueryResultsSchemaRenderContext<TRow>) => React.ReactNode;
+    className?: string;
+};
+
+export function QueryResults<TRow extends Record<string, unknown>>({
+    columns,
+    rows,
+    totalRows = rows.length,
+    loading,
+    errorContent,
+    rowKey,
+    formatterSettings,
+    maxVisibleLines,
+    title,
+    toolbarContent,
+    actions,
+    view: controlledView,
+    defaultView = 'result',
+    onViewChange,
+    renderSchema,
+    className,
+}: QueryResultsProps<TRow>) {
+    const [uncontrolledView, setUncontrolledView] = useState<QueryResultsView>(defaultView);
+    const view = controlledView ?? uncontrolledView;
+
+    const handleViewChange = useCallback(
+        (nextView: string) => {
+            const next = nextView as QueryResultsView;
+            if (controlledView === undefined) {
+                setUncontrolledView(next);
+            }
+            onViewChange?.(next);
+        },
+        [controlledView, onViewChange],
+    );
+
+    const schema = renderSchema?.({columns});
+    let content: React.ReactNode;
+
+    if (errorContent) {
+        content = <Text color="danger">{errorContent}</Text>;
+    } else if (view === 'schema') {
+        content = schema ?? <QueryResultsSchema columns={columns} loading={loading} />;
+    } else {
+        content = (
+            <QueryResultsTable
+                columns={columns}
+                rows={rows}
+                loading={loading}
+                rowKey={rowKey}
+                formatterSettings={formatterSettings}
+                maxVisibleLines={maxVisibleLines}
+            />
+        );
+    }
+
+    return (
+        <Flex direction="column" gap={2} className={block(null, className)}>
+            {title && <Text variant="subheader-1">{title}</Text>}
+            <Flex gap={2} alignItems="center" className={block('toolbar')}>
+                <SegmentedRadioGroup
+                    value={view}
+                    onUpdate={handleViewChange}
+                    width="auto"
+                    size="s"
+                    className={block('views')}
+                >
+                    <SegmentedRadioGroup.Option value="result">
+                        {i18n('tab_result')}
+                    </SegmentedRadioGroup.Option>
+                    <SegmentedRadioGroup.Option value="schema">
+                        {i18n('tab_schema')}
+                    </SegmentedRadioGroup.Option>
+                </SegmentedRadioGroup>
+                <Text color="secondary" className={block('rows-info')}>
+                    {i18n('context_rows-info', {
+                        count: totalRows,
+                        visible: rows.length,
+                        total: totalRows,
+                    })}
+                </Text>
+                {toolbarContent && <div className={block('toolbar-content')}>{toolbarContent}</div>}
+                {actions && <div className={block('actions')}>{actions}</div>}
+            </Flex>
+            <div className={block('content')}>{content}</div>
+        </Flex>
+    );
+}

package/src/widgets/QueryResults/i18n/dicts.ts

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

package/src/widgets/QueryResults/i18n/en.json

@@ -0,0 +1,10 @@
+{
+  "tab_result": "Full result",
+  "tab_schema": "Schema",
+  "field_name": "Name",
+  "field_type": "Type",
+  "context_rows-info": {
+    "one": "{{visible}} of {{total}} row",
+    "other": "{{visible}} of {{total}} rows"
+  }
+}

package/src/widgets/QueryResults/i18n/index.ts

@@ -0,0 +1,4 @@
+import {addI18Keysets} from '../../../i18n';
+import dicts from './dicts';
+
+export default addI18Keysets('qp:query-results', dicts);

package/src/widgets/QueryResults/i18n/ru.json

@@ -0,0 +1,12 @@
+{
+  "tab_result": "Результат",
+  "tab_schema": "Схема",
+  "field_name": "Название",
+  "field_type": "Тип",
+  "context_rows-info": {
+    "one": "{{visible}} из {{total}} строки",
+    "few": "{{visible}} из {{total}} строк",
+    "many": "{{visible}} из {{total}} строк",
+    "other": "{{visible}} из {{total}} строки"
+  }
+}

package/src/widgets/QueryResults/index.ts

@@ -0,0 +1,2 @@
+export {QueryResults} from './QueryResults';
+export type {QueryResultsProps} from './QueryResults';