@gravity-ui/querieskit 1.0.4 → 1.2.0

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/QueriesList/QueriesList.scss

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

package/src/modules/QueriesList/QueriesList.tsx

@@ -0,0 +1,98 @@
+import React from 'react';
+import cn from 'bem-cn-lite';
+import {FieldsSelector} from '../../components';
+import {getListKey} from '../../helpers/getListKey';
+import {
+    QueryListComparisonConfig,
+    QueryListEditingConfig,
+    QueryListFilterConfig,
+    QueryListItem,
+    QueryListRow,
+    QueryListRowAction,
+    QueryListRowRenderData,
+    QueryListSearchConfig,
+    QueryListVisibleFieldsConfig,
+} from '../../types/queryList';
+import {HistoryComparisonActions} from '../HistoryComparisonActions';
+import {HistoryHeader} from '../HistoryHeader';
+import {HistoryLayout} from '../HistoryLayout';
+import {RowsList} from '../RowsList';
+import './QueriesList.scss';
+
+const block = cn('qp-queries-list');
+
+export type QueriesListProps<T extends QueryListRow> = {
+    className?: string;
+    title: React.ReactNode;
+    logo?: React.ReactNode;
+    search: QueryListSearchConfig;
+    filter?: QueryListFilterConfig;
+    items: QueryListItem<T>[];
+    selectedRowId?: T['id'];
+    editing?: QueryListEditingConfig<T>;
+    comparison?: QueryListComparisonConfig<T>;
+    visibleFields?: QueryListVisibleFieldsConfig<T>;
+    getRowActions?: (item: T) => QueryListRowAction<T>[];
+    renderRow: (data: QueryListRowRenderData<T>) => React.ReactNode;
+    onListItemClick?: (item: QueryListItem<T>) => void;
+};
+
+export const QueriesList = <T extends QueryListRow>({
+    title,
+    logo,
+    search,
+    filter,
+    items,
+    selectedRowId,
+    editing,
+    comparison,
+    visibleFields,
+    getRowActions,
+    renderRow,
+    onListItemClick,
+    className,
+}: QueriesListProps<T>) => {
+    const showSearchResults = Boolean(search.fullSearch && search.value?.trim());
+    const rowVariant = showSearchResults ? 'search' : 'default';
+
+    return (
+        <HistoryLayout
+            className={block(null, className)}
+            title={title}
+            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 && (
+                    <HistoryComparisonActions
+                        comparison={comparison}
+                        className={block('comparison-actions')}
+                    />
+                )
+            }
+        >
+            <RowsList
+                key={getListKey(items, rowVariant)}
+                items={items}
+                rowVariant={rowVariant}
+                selectedRowId={selectedRowId}
+                visibleFields={visibleFields}
+                editing={editing}
+                comparison={comparison}
+                getRowActions={getRowActions}
+                renderRow={renderRow}
+                showFiltersHint={Boolean(filter)}
+                onItemClick={onListItemClick}
+            />
+        </HistoryLayout>
+    );
+};

package/src/modules/QueriesList/index.ts

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

package/src/modules/RowsList/RowsList.tsx

@@ -1,38 +1,37 @@
 import React from 'react';
-import {List} from '@gravity-ui/uikit';
 import cn from 'bem-cn-lite';
 import {
-    BaseHistoryRow,
-    QueryHistoryComparisonConfig,
-    QueryHistoryEditingConfig,
-    QueryHistoryItem,
-    QueryHistoryRowAction,
-    QueryHistoryRowRenderData,
-    QueryHistoryRowVariant,
-    QueryHistoryVisibleFieldsConfig,
-} from '../../types/history';
-import {HistoryListEmpty} from '../../components';
+    QueryListComparisonConfig,
+    QueryListEditingConfig,
+    QueryListItem,
+    QueryListRow,
+    QueryListRowAction,
+    QueryListRowRenderData,
+    QueryListRowVariant,
+    QueryListVisibleFieldsConfig,
+} from '../../types/queryList';
+import {EmptyContent, LazyList} from '../../components';
 import {prepareRowData} from './helpers/prepareRowData';
 import {SEARCH_ROW_HEIGHT} from '../../constants/row';
 import './RowsList.scss';
 
 const block = cn('qp-rows-list');
 
-export type RowsListProps<T extends BaseHistoryRow> = {
-    items: QueryHistoryItem<T>[];
+export type RowsListProps<T extends QueryListRow> = {
+    items: QueryListItem<T>[];
     selectedRowId?: T['id'];
-    rowVariant?: QueryHistoryRowVariant;
-    visibleFields?: QueryHistoryVisibleFieldsConfig<T>;
-    editing?: QueryHistoryEditingConfig<T>;
-    comparison?: QueryHistoryComparisonConfig<T>;
-    getRowActions?: (item: T) => QueryHistoryRowAction<T>[];
-    renderRow: (data: QueryHistoryRowRenderData<T>) => React.ReactNode;
+    rowVariant?: QueryListRowVariant;
+    visibleFields?: QueryListVisibleFieldsConfig<T>;
+    editing?: QueryListEditingConfig<T>;
+    comparison?: QueryListComparisonConfig<T>;
+    getRowActions?: (item: T) => QueryListRowAction<T>[];
+    renderRow: (data: QueryListRowRenderData<T>) => React.ReactNode;
     showFiltersHint?: boolean;
     className?: string;
-    onItemClick?: (item: QueryHistoryItem<T>, index: number) => void;
+    onItemClick?: (item: QueryListItem<T>, index: number) => void;
 };
 
-export const RowsList = <T extends BaseHistoryRow>({
+export const RowsList = <T extends QueryListRow>({
     items,
     selectedRowId,
     rowVariant = 'default',
@@ -45,10 +44,14 @@ export const RowsList = <T extends BaseHistoryRow>({
     className,
     onItemClick,
 }: RowsListProps<T>) => {
-    const getItemHeight = (item: QueryHistoryItem<T>) =>
+    const getItemHeight = (item: QueryListItem<T>) =>
         rowVariant === 'search' && !('header' in item) ? SEARCH_ROW_HEIGHT : item.height;
+    const selectedItemIndex =
+        selectedRowId === undefined
+            ? undefined
+            : items.findIndex((item) => !('header' in item) && item.id === selectedRowId);
 
-    const handleItemClick = (item: QueryHistoryItem<T>, index: number) => {
+    const handleItemClick = (item: QueryListItem<T>, index: number) => {
         if ('header' in item || !comparison?.enabled) {
             onItemClick?.(item, index);
             return;
@@ -59,18 +62,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<QueryListItem<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({
@@ -85,7 +89,7 @@ export const RowsList = <T extends BaseHistoryRow>({
                     }),
                 )
             }
-            selectedItemIndex={selectedRowId}
+            selectedItemIndex={selectedItemIndex}
             onItemClick={handleItemClick}
         />
     );

package/src/modules/RowsList/helpers/prepareRowData.ts

@@ -1,26 +1,26 @@
 import {
-    BaseHistoryRow,
-    QueryHistoryComparisonConfig,
-    QueryHistoryEditingConfig,
-    QueryHistoryItem,
-    QueryHistoryRowAction,
-    QueryHistoryRowRenderData,
-    QueryHistoryRowVariant,
-    QueryHistoryVisibleFieldsConfig,
-} from '../../../types/history';
+    QueryListComparisonConfig,
+    QueryListEditingConfig,
+    QueryListItem,
+    QueryListRow,
+    QueryListRowAction,
+    QueryListRowRenderData,
+    QueryListRowVariant,
+    QueryListVisibleFieldsConfig,
+} from '../../../types/queryList';
 
-type Props<T extends BaseHistoryRow> = {
-    item: QueryHistoryItem<T>;
+type Props<T extends QueryListRow> = {
+    item: QueryListItem<T>;
     isActive: boolean;
     index: number;
-    variant: QueryHistoryRowVariant;
-    visibleFields?: QueryHistoryVisibleFieldsConfig<T>;
-    editing?: QueryHistoryEditingConfig<T>;
-    comparison?: QueryHistoryComparisonConfig<T>;
-    getRowActions?: (item: T) => QueryHistoryRowAction<T>[];
+    variant: QueryListRowVariant;
+    visibleFields?: QueryListVisibleFieldsConfig<T>;
+    editing?: QueryListEditingConfig<T>;
+    comparison?: QueryListComparisonConfig<T>;
+    getRowActions?: (item: T) => QueryListRowAction<T>[];
 };
 
-export const prepareRowData = <T extends BaseHistoryRow>({
+export const prepareRowData = <T extends QueryListRow>({
     item,
     isActive,
     index,
@@ -29,7 +29,7 @@ export const prepareRowData = <T extends BaseHistoryRow>({
     editing,
     comparison,
     getRowActions,
-}: Props<T>): QueryHistoryRowRenderData<T> => {
+}: Props<T>): QueryListRowRenderData<T> => {
     const isRow = !('header' in item);
     const actions = isRow && getRowActions ? getRowActions(item) : undefined;
     const editingData =

package/src/modules/SavedQueryRow/SavedQueryRow.scss

@@ -0,0 +1,20 @@
+.qp-saved-query-row {
+  height: 100%;
+
+  &_compared {
+    background-color: var(--g-color-base-utility-light);
+  }
+
+  &__content {
+    min-width: 0;
+  }
+
+  &__header {
+    height: 20px;
+    min-width: 0;
+  }
+
+  &__metadata {
+    min-width: 0;
+  }
+}

package/src/modules/SavedQueryRow/SavedQueryRow.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import {Avatar, Flex, Text} from '@gravity-ui/uikit';
+import cn from 'bem-cn-lite';
+import {EditableRowTitle, RowActionsMenu, RowLink} from '../../components';
+import {formatDateCanonical} from '../../helpers/time';
+import {QueryListRowRenderData} from '../../types/queryList';
+import {SavedQuery} from '../../types/savedQueries';
+import './SavedQueryRow.scss';
+
+const block = cn('qp-saved-query-row');
+
+export type SavedQueryRowProps<T extends SavedQuery = SavedQuery> = {
+    item: T;
+    renderAuthor?: (item: T) => React.ReactNode;
+} & Omit<QueryListRowRenderData<T>, 'item' | 'variant'>;
+
+export const SavedQueryRow = <T extends SavedQuery>({
+    item,
+    actions,
+    isActive,
+    comparison,
+    editing,
+    visibleFields,
+    renderAuthor,
+}: SavedQueryRowProps<T>) => {
+    const {author, engine, href, savedAt} = item;
+    const isEditing = Boolean(editing?.enabled);
+    const isComparisonMode = Boolean(comparison?.enabled);
+    const isChecked = Boolean(comparison?.checked);
+    const showMenu = isActive && Boolean(actions?.length) && !isComparisonMode;
+    const isFieldVisible = (field: string) =>
+        visibleFields === undefined || (visibleFields.value as string[]).includes(field);
+    const authorContent =
+        renderAuthor?.(item) ??
+        (author ? <Avatar size="3xs" text={author} title={author} /> : null);
+
+    return (
+        <RowLink
+            href={href}
+            disabled={isEditing || isComparisonMode}
+            className={block({compared: isChecked})}
+        >
+            <Flex direction="column" gap={1} className={block('content')}>
+                <Flex justifyContent="space-between" className={block('header')}>
+                    <EditableRowTitle item={item} editing={editing} />
+                    {showMenu && <RowActionsMenu item={item} actions={actions} />}
+                </Flex>
+                <Flex gap={2} alignItems="center" className={block('metadata')}>
+                    {isFieldVisible('savedAt') && savedAt && (
+                        <Text color="complementary">{formatDateCanonical(savedAt)}</Text>
+                    )}
+                    {isFieldVisible('engine') && engine && (
+                        <Text color="complementary">{engine}</Text>
+                    )}
+                    {isFieldVisible('author') && authorContent}
+                </Flex>
+            </Flex>
+        </RowLink>
+    );
+};

package/src/modules/SavedQueryRow/index.ts

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

package/src/modules/SavedQuerySearchRow/SavedQuerySearchRow.scss

@@ -0,0 +1,15 @@
+.qp-saved-query-search-row {
+  &__header {
+    min-width: 0;
+    width: 100%;
+  }
+
+  &__title {
+    flex: 1;
+    min-width: 0;
+  }
+
+  &__fixed-metadata {
+    flex-shrink: 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,13 +1,36 @@
 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 {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';

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>;
-};