@gravity-ui/querieskit 1.2.0 → 1.3.0

package/src/modules/index.ts

@@ -16,6 +16,7 @@ export type {SavedQueryRowProps} from './SavedQueryRow';
 export {SavedQuerySearchRow} from './SavedQuerySearchRow';
 export type {SavedQuerySearchRowProps} from './SavedQuerySearchRow';
 export * from './ChartEditor';
+export * from './Attachments';
 export {TutorialRow} from './TutorialRow';
 export type {TutorialRowProps} from './TutorialRow';
 export {TutorialSearchRow} from './TutorialSearchRow';
@@ -28,6 +29,19 @@ export {NavigationDetail} from './NavigationDetail';
 export type {NavigationDetailProps} from './NavigationDetail';
 export {NavigationSchema, buildSchemaColumns, filterSchema} from './NavigationSchema';
 export type {NavigationSchemaProps, NavigationSchemaViewConfig} from './NavigationSchema';
+export {QueryStatistics} from './QueryStatistics';
+export type {
+    QueryStatisticsColumn,
+    QueryStatisticsColumnConfig,
+    QueryStatisticsExtraColumn,
+    QueryStatisticsExtraColumnContext,
+    QueryStatisticsFormatValueContext,
+    QueryStatisticsGroup,
+    QueryStatisticsItem,
+    QueryStatisticsMetric,
+    QueryStatisticsProps,
+    QueryStatisticsValues,
+} from './QueryStatistics';
 export {NavigationPreview, buildPreviewColumns, filterPreviewRows} from './NavigationPreview';
 export type {NavigationPreviewProps, NavigationPreviewViewConfig} from './NavigationPreview';
 export {NavigationMeta, buildMetaGroups} from './NavigationMeta';

package/src/types/declarations.d.ts

@@ -13,3 +13,13 @@ declare module '*.svg' {
     const ReactComponent: FC<React.SVGProps<SVGSVGElement>>;
     export default ReactComponent;
 }
+
+declare module '@gravity-ui/unipika' {
+    type UnipikaSettings = Record<string, unknown>;
+
+    type Unipika = {
+        formatFromYQL(data: [unknown, unknown], settings?: UnipikaSettings): string;
+    };
+
+    export default function createUnipika(settings?: UnipikaSettings): Unipika;
+}

package/src/types/errorTree.ts

@@ -0,0 +1,30 @@
+import type React from 'react';
+
+export type ErrorTreeSeverity = 'error' | 'warning' | 'info';
+
+export type ErrorTreePosition = {
+    row: number;
+    column: number;
+};
+
+export type ErrorTreeItem = {
+    id: string;
+    severity: ErrorTreeSeverity;
+    message: string;
+    code?: string | number;
+    position?: ErrorTreePosition;
+    attributes?: Record<string, unknown>;
+    children?: ErrorTreeItem[];
+};
+
+export type ErrorTreeProps = {
+    root: ErrorTreeItem;
+    className?: string;
+    defaultExpanded?: boolean;
+    defaultInfoExpanded?: boolean;
+    renderAttributes?: (
+        attributes: Record<string, unknown>,
+        item: ErrorTreeItem,
+    ) => React.ReactNode;
+    onPositionClick?: (item: ErrorTreeItem, position: ErrorTreePosition) => void;
+};

package/src/types/navigation.ts

@@ -1,4 +1,5 @@
 import {ReactNode} from 'react';
+import type {QueryResultColumn, QueryResultFormatterSettings} from './queryResults';
 import type {LoadPathSuggestions} from './pathEditor';
 
 export type NavigationLocation = {
@@ -103,12 +104,21 @@ export type NavigationCellValue = ReactNode;
 
 export type NavigationPreviewRow = Record<string, NavigationCellValue>;
 
+export type NavigationPreviewColumn<TRow extends NavigationPreviewRow = NavigationPreviewRow> =
+    string | QueryResultColumn<TRow>;
+
 export type NavigationPreviewConfig<TRow extends NavigationPreviewRow = NavigationPreviewRow> =
     NavigationAsyncConfig & {
-        columns: string[];
+        columns: Array<NavigationPreviewColumn<TRow>>;
         rows: TRow[];
     };
 
+export type NavigationPreviewFormatterConfig = {
+    /** Applied when every displayed preview column declares a YQL type. */
+    formatterSettings?: QueryResultFormatterSettings;
+    maxVisibleLines?: number;
+};
+
 export type NavigationViewRow = NavigationPreviewRow;
 
 export type NavigationViewSectionAction<TRow extends NavigationViewRow = NavigationViewRow> =

package/src/types/queryResults.ts

@@ -0,0 +1,48 @@
+import type {ReactNode} from 'react';
+import type {AlignType} from '@gravity-ui/react-data-table';
+
+export type QueryResultDataTypeParameter =
+    | string
+    | number
+    | boolean
+    | null
+    | QueryResultDataType
+    | readonly QueryResultDataType[]
+    | readonly [string, QueryResultDataType][];
+
+/** A YQL type tuple accepted by @gravity-ui/unipika. */
+export type QueryResultDataType = readonly [string, ...QueryResultDataTypeParameter[]];
+
+export type QueryResultFormatterSettings = {
+    escapeWhitespace?: boolean;
+    decodeUTF8?: boolean;
+    showDecoded?: boolean;
+    binaryAsHex?: boolean;
+    escapeYQLStrings?: boolean;
+    omitStructNull?: boolean;
+    maxListSize?: number;
+    maxStringSize?: number;
+    compact?: boolean;
+};
+
+export type QueryResultColumn<TRow extends Record<string, unknown>> = {
+    name: Extract<keyof TRow, string> | string;
+    type: QueryResultDataType;
+    header?: ReactNode;
+    width?: number | string;
+    align?: AlignType;
+    render?: (context: QueryResultCellRenderContext<TRow>) => ReactNode;
+};
+
+export type QueryResultCellRenderContext<TRow extends Record<string, unknown>> = {
+    row: TRow;
+    value: unknown;
+    index: number;
+    column: QueryResultColumn<TRow>;
+};
+
+export type QueryResultsView = 'result' | 'schema';
+
+export type QueryResultsSchemaRenderContext<TRow extends Record<string, unknown>> = {
+    columns: Array<QueryResultColumn<TRow>>;
+};

package/src/types/queryStatistics.ts

@@ -0,0 +1,67 @@
+import type {ReactNode} from 'react';
+
+export type QueryStatisticsColumn = 'min' | 'max' | 'avg' | 'sum' | 'count' | 'last';
+
+export type QueryStatisticsValues = Partial<Record<QueryStatisticsColumn, number>>;
+
+type QueryStatisticsItemBase = {
+    id: string;
+    name: string;
+    description?: string;
+    unit?: string;
+};
+
+export type QueryStatisticsMetric = QueryStatisticsItemBase & {
+    values: QueryStatisticsValues;
+    children?: never;
+};
+
+export type QueryStatisticsGroup = QueryStatisticsItemBase & {
+    children: QueryStatisticsItem[];
+    values?: never;
+};
+
+export type QueryStatisticsItem = QueryStatisticsMetric | QueryStatisticsGroup;
+
+export type QueryStatisticsFormatValueContext = {
+    column: QueryStatisticsColumn;
+    item: QueryStatisticsMetric;
+};
+
+export type QueryStatisticsColumnConfig = {
+    title?: ReactNode;
+    width?: string;
+};
+
+export type QueryStatisticsExtraColumnContext = {
+    item: QueryStatisticsItem;
+    level: number;
+};
+
+export type QueryStatisticsExtraColumn = {
+    id: string;
+    title: ReactNode;
+    width?: string;
+    render: (context: QueryStatisticsExtraColumnContext) => ReactNode;
+};
+
+export type QueryStatisticsProps = {
+    data: QueryStatisticsItem[];
+    visibleColumns?: QueryStatisticsColumn[];
+    columnConfig?: Partial<Record<QueryStatisticsColumn, QueryStatisticsColumnConfig>>;
+    extraColumns?: QueryStatisticsExtraColumn[];
+    className?: string;
+    virtual?: boolean;
+    fixedHeader?: boolean;
+    formatValue?: (
+        value: number | undefined,
+        context: QueryStatisticsFormatValueContext,
+    ) => ReactNode;
+    search?: string;
+    defaultSearch?: string;
+    onSearchUpdate?: (value: string) => void;
+    expandedIds?: string[];
+    defaultExpandedIds?: string[];
+    onExpandedIdsChange?: (ids: string[]) => void;
+    searchDebounceMs?: number;
+};

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