@gravity-ui/querieskit 1.1.0 → 1.3.0

package/src/modules/SavedQuerySearchRow/SavedQuerySearchRow.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import {Avatar, Flex, Text} from '@gravity-ui/uikit';
+import cn from 'bem-cn-lite';
+import {MonacoLanguage, SearchRowLayout} from '../../components';
+import {formatDateCanonical} from '../../helpers/time';
+import {QueryListRowRenderData} from '../../types/queryList';
+import {SavedQuery} from '../../types/savedQueries';
+import './SavedQuerySearchRow.scss';
+
+const block = cn('qp-saved-query-search-row');
+
+export type SavedQuerySearchRowProps<T extends SavedQuery = SavedQuery> = {
+    item: T;
+    renderAuthor?: (item: T) => React.ReactNode;
+} & Omit<QueryListRowRenderData<T>, 'item' | 'variant'>;
+
+export const SavedQuerySearchRow = <T extends SavedQuery>({
+    item,
+    comparison,
+    editing,
+    visibleFields,
+    renderAuthor,
+}: SavedQuerySearchRowProps<T>) => {
+    const {author, engine, href, query, savedAt} = item;
+    const authorContent =
+        renderAuthor?.(item) ??
+        (author ? <Avatar size="3xs" text={author} title={author} /> : null);
+    const isFieldVisible = (field: string) =>
+        visibleFields === undefined || (visibleFields.value as string[]).includes(field);
+
+    return (
+        <SearchRowLayout
+            query={query}
+            language={MonacoLanguage.YQL}
+            href={href}
+            disabled={Boolean(editing?.enabled) || Boolean(comparison?.enabled)}
+            className={block()}
+            header={
+                <Flex gap={2} alignItems="center" className={block('header')}>
+                    <Text variant="subheader-1" ellipsis className={block('title')}>
+                        {item.title}
+                    </Text>
+                    {isFieldVisible('savedAt') && savedAt && (
+                        <Text color="complementary" className={block('fixed-metadata')}>
+                            {formatDateCanonical(savedAt)}
+                        </Text>
+                    )}
+                    {isFieldVisible('engine') && engine && (
+                        <Text color="complementary" className={block('fixed-metadata')}>
+                            {engine}
+                        </Text>
+                    )}
+                    {isFieldVisible('author') && authorContent}
+                </Flex>
+            }
+        />
+    );
+};

package/src/modules/SavedQuerySearchRow/index.ts

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

package/src/modules/index.ts

@@ -1,15 +1,22 @@
 export {HistoryHeader} from './HistoryHeader';
 export {HistoryLayout} from './HistoryLayout';
+export {HistoryComparisonActions} from './HistoryComparisonActions';
+export type {HistoryComparisonActionsProps} from './HistoryComparisonActions';
 export {NavigationHeader} from './NavigationHeader';
 export type {NavigationHeaderProps} from './NavigationHeader';
 export type {HistoryLayoutProps} from './HistoryLayout';
 export {RowsList} from './RowsList';
 export type {RowsListProps} from './RowsList';
+export {QueriesList} from './QueriesList';
+export type {QueriesListProps} from './QueriesList';
 export {HistoryRow} from './HistoryRow';
-export {HistoryList} from './HistoryList';
-export type {HistoryListProps} from './HistoryList';
 export {HistorySearchRow} from './HistorySearchRow';
+export {SavedQueryRow} from './SavedQueryRow';
+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';
@@ -22,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/history.ts

@@ -1,103 +1,12 @@
-import {ReactNode} from 'react';
-import {RegisteredFormFields} from './forms';
+import {QueryListRow, QueryTimestamp} from './queryList';
 
 export type QueryStatus = 'completed' | 'failed' | 'aborted' | 'draft' | 'running';
 
-/** ISO 8601 date string or Unix timestamp in milliseconds. */
-export type QueryHistoryTimestamp = string | number;
-
-export type HistoryRowRenderProps = {height: number};
-
-export type QueryHistoryHeader = {header: string} & HistoryRowRenderProps;
-
-export type BaseHistoryRow = {
-    id: number;
-    title: string;
-    query?: string;
-    href?: string;
-} & HistoryRowRenderProps;
-
-export type QueryHistoryRow = BaseHistoryRow & {
-    startTime?: QueryHistoryTimestamp;
-    endTime?: QueryHistoryTimestamp;
+export type QueryHistoryRow = QueryListRow & {
+    startTime?: QueryTimestamp;
+    endTime?: QueryTimestamp;
     engine?: string;
     mode?: string;
     isPrivate?: boolean;
     status: QueryStatus;
 };
-
-export type QueryHistoryItem<T extends BaseHistoryRow = BaseHistoryRow> = QueryHistoryHeader | T;
-
-export type QueryHistoryRowVariant = 'default' | 'search';
-
-export type QueryHistoryRowAction<T extends BaseHistoryRow = BaseHistoryRow> = {
-    text: ReactNode;
-    icon?: ReactNode;
-    hidden?: boolean;
-    disabled?: boolean;
-    onClick: (item: T) => void;
-};
-
-export type QueryHistorySearchConfig = {
-    value?: string;
-    fullSearch?: boolean;
-    hasClear?: boolean;
-    onUpdate: (data: {value: string; fullSearch: boolean}) => void;
-};
-
-export type QueryHistoryFilterConfig = {
-    fields?: RegisteredFormFields[];
-    values?: Record<string, any>;
-    initialValues?: Record<string, any>;
-    isChanged?: boolean;
-    onApply?: (values: Record<string, any>) => void;
-    onReset?: () => void;
-};
-
-export type QueryHistoryEditingConfig<T extends BaseHistoryRow = BaseHistoryRow> = {
-    rowId?: T['id'];
-    onSubmit?: (item: T, title: string) => void;
-    onCancel?: (item: T) => void;
-};
-
-export type QueryHistoryComparisonConfig<T extends BaseHistoryRow = BaseHistoryRow> = {
-    enabled: boolean;
-    comparedRowIds: T['id'][];
-    onChange: (item: T, selected: boolean) => void;
-    onCancel: () => void;
-    onCompare: () => void;
-};
-
-type RowFieldKey<T extends BaseHistoryRow> = Exclude<keyof T & string, keyof HistoryRowRenderProps>;
-
-export type QueryHistoryFieldKey<T extends BaseHistoryRow = BaseHistoryRow> =
-    RowFieldKey<T> | 'duration';
-
-export type QueryHistoryFieldOption<K extends string = string> = {
-    id: K;
-    title: ReactNode;
-};
-
-export type QueryHistoryVisibleFieldsConfig<T extends BaseHistoryRow = BaseHistoryRow> = {
-    value: QueryHistoryFieldKey<T>[];
-    fields: QueryHistoryFieldOption<QueryHistoryFieldKey<T>>[];
-    onChange: (value: QueryHistoryFieldKey<T>[]) => void;
-};
-
-export type QueryHistoryEditingRenderData<T extends BaseHistoryRow = BaseHistoryRow> = {
-    enabled: boolean;
-} & Pick<QueryHistoryEditingConfig<T>, 'onSubmit' | 'onCancel'>;
-
-export type QueryHistoryRowRenderData<T extends BaseHistoryRow = BaseHistoryRow> = {
-    item: QueryHistoryItem<T>;
-    index: number;
-    isActive: boolean;
-    variant: QueryHistoryRowVariant;
-    comparison?: {
-        enabled: boolean;
-        checked: boolean;
-    };
-    visibleFields?: QueryHistoryVisibleFieldsConfig<T>;
-    actions?: QueryHistoryRowAction<T>[];
-    editing?: QueryHistoryEditingRenderData<T>;
-};

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/queryList.ts

@@ -0,0 +1,92 @@
+import {ReactNode} from 'react';
+import {RegisteredFormFields} from './forms';
+
+/** ISO 8601 date string or Unix timestamp in milliseconds. */
+export type QueryTimestamp = string | number;
+
+export type QueryListRowRenderProps = {height: number};
+
+export type QueryListHeader = {header: string} & QueryListRowRenderProps;
+
+export type QueryListRow = {
+    id: number;
+    title: string;
+    query?: string;
+    href?: string;
+} & QueryListRowRenderProps;
+
+export type QueryListItem<T extends QueryListRow = QueryListRow> = QueryListHeader | T;
+
+export type QueryListRowVariant = 'default' | 'search';
+
+export type QueryListRowAction<T extends QueryListRow = QueryListRow> = {
+    text: ReactNode;
+    icon?: ReactNode;
+    theme?: 'normal' | 'danger';
+    hidden?: boolean;
+    disabled?: boolean;
+    onClick: (item: T) => void;
+};
+
+export type QueryListSearchConfig = {
+    value?: string;
+    fullSearch?: boolean;
+    hasClear?: boolean;
+    onUpdate: (data: {value: string; fullSearch: boolean}) => void;
+};
+
+export type QueryListFilterConfig = {
+    fields?: RegisteredFormFields[];
+    values?: Record<string, any>;
+    initialValues?: Record<string, any>;
+    isChanged?: boolean;
+    onApply?: (values: Record<string, any>) => void;
+    onReset?: () => void;
+};
+
+export type QueryListEditingConfig<T extends QueryListRow = QueryListRow> = {
+    rowId?: T['id'];
+    onSubmit?: (item: T, title: string) => void;
+    onCancel?: (item: T) => void;
+};
+
+export type QueryListComparisonConfig<T extends QueryListRow = QueryListRow> = {
+    enabled: boolean;
+    comparedRowIds: T['id'][];
+    onChange: (item: T, selected: boolean) => void;
+    onCancel: () => void;
+    onCompare: () => void;
+};
+
+type RowFieldKey<T extends QueryListRow> = Exclude<keyof T & string, keyof QueryListRowRenderProps>;
+
+export type QueryListFieldKey<T extends QueryListRow = QueryListRow> = RowFieldKey<T> | 'duration';
+
+export type QueryListFieldOption<K extends string = string> = {
+    id: K;
+    title: ReactNode;
+};
+
+export type QueryListVisibleFieldsConfig<T extends QueryListRow = QueryListRow> = {
+    value: QueryListFieldKey<T>[];
+    fields: QueryListFieldOption<QueryListFieldKey<T>>[];
+    onChange: (value: QueryListFieldKey<T>[]) => void;
+};
+
+export type QueryListEditingRenderData<T extends QueryListRow = QueryListRow> = {
+    enabled: boolean;
+} & Pick<QueryListEditingConfig<T>, 'onSubmit' | 'onCancel'>;
+
+export type QueryListRowRenderData<T extends QueryListRow = QueryListRow> = {
+    item: QueryListItem<T>;
+    index: number;
+    isActive: boolean;
+    variant: QueryListRowVariant;
+    comparison?: {
+        enabled: boolean;
+        checked: boolean;
+    };
+    visibleFields?: QueryListVisibleFieldsConfig<T>;
+    actions?: QueryListRowAction<T>[];
+    editing?: QueryListEditingRenderData<T>;
+};

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/types/savedQueries.ts

@@ -0,0 +1,7 @@
+import {QueryListRow, QueryTimestamp} from './queryList';
+
+export type SavedQuery = QueryListRow & {
+    savedAt?: QueryTimestamp;
+    engine?: string;
+    author?: string;
+};

package/src/types/tutorial.ts

@@ -1,3 +1,3 @@
-import {BaseHistoryRow} from './history';
+import {QueryListRow} from './queryList';
 
-export type TutorialHistoryRow = BaseHistoryRow;
+export type TutorialHistoryRow = QueryListRow;

package/src/widgets/QueriesHistory/QueriesHistory.scss

@@ -1,10 +1,3 @@
 .qp-query-history {
   height: 100%;
-
-  &__comparison-actions {
-    position: absolute;
-    left: 0;
-    bottom: 0;
-    width: 100%;
-  }
-}
+}

package/src/widgets/QueriesHistory/QueriesHistory.stories.tsx

@@ -2,12 +2,12 @@ import React, {useState} from 'react';
 import type {Meta, StoryObj} from '@storybook/react';
 import {QueriesHistory} from './QueriesHistory';
 import {
-    QueryHistoryFieldKey,
-    QueryHistoryFilterConfig,
-    QueryHistoryItem,
-    QueryHistoryRow,
-    QueryHistoryVisibleFieldsConfig,
-} from '../../types/history';
+    QueryListFieldKey,
+    QueryListFilterConfig,
+    QueryListItem,
+    QueryListVisibleFieldsConfig,
+} from '../../types/queryList';
+import {QueryHistoryRow} from '../../types/history';
 import {action} from 'storybook/actions';
 
 const now = Date.now();
@@ -20,7 +20,7 @@ SELECT
     "test_task" AS task_id,
     SUBSTRING("test", 1, 1) AS truncated_char`;
 
-const BASE_ITEMS: QueryHistoryItem<QueryHistoryRow>[] = [
+const BASE_ITEMS: QueryListItem<QueryHistoryRow>[] = [
     {header: 'Today', height: 28},
     {
         id: 1,
@@ -78,8 +78,8 @@ const BASE_ITEMS: QueryHistoryItem<QueryHistoryRow>[] = [
     },
 ];
 
-type VisibleFields = QueryHistoryVisibleFieldsConfig<QueryHistoryRow>['fields'];
-const activeFields: QueryHistoryFieldKey<QueryHistoryRow>[] = [
+type VisibleFields = QueryListVisibleFieldsConfig<QueryHistoryRow>['fields'];
+const activeFields: QueryListFieldKey<QueryHistoryRow>[] = [
     'duration',
     'mode',
     'startTime',
@@ -109,7 +109,7 @@ const fields: VisibleFields = [
     },
 ];
 
-const filterFields: QueryHistoryFilterConfig['fields'] = [
+const filterFields: QueryListFilterConfig['fields'] = [
     {id: 'onlyMine', type: 'switch', title: 'My queries only', initialValue: true},
     {id: 'range', type: 'rangeDatePicker', title: 'Period'},
     {
@@ -143,7 +143,7 @@ const DefaultStory = () => {
     const [items, setItems] = useState([...BASE_ITEMS]);
     const [search, setSearch] = useState({value: '', fullSearch: false});
     const [visibleFields, setVisibleFields] =
-        useState<QueryHistoryFieldKey<QueryHistoryRow>[]>(activeFields);
+        useState<QueryListFieldKey<QueryHistoryRow>[]>(activeFields);
     const [compareMode, setCompareMode] = useState(false);
     const [comparedRows, setComparedRows] = useState<number[]>([]);
     const [editingId, setEditingId] = useState<number | undefined>(undefined);