@gravity-ui/querieskit 1.0.1

package/src/modules/HistoryHeader/HistoryHeader.tsx

@@ -0,0 +1,27 @@
+import React, {FC} from 'react';
+import {Flex} from '@gravity-ui/uikit';
+import {HistorySearch} from './HistorySearch';
+import {HistoryFilter} from '../../components/HistoryFilter';
+import {QueryHistoryFilterConfig} from '../../types/history';
+
+type Props = {
+    search?: string;
+    fullSearch?: boolean;
+    hasClear?: boolean;
+    filter?: QueryHistoryFilterConfig;
+    onUpdate: (data: {value: string; fullSearch: boolean}) => void;
+};
+
+export const HistoryHeader: FC<Props> = ({search, fullSearch, hasClear, filter, onUpdate}) => {
+    return (
+        <Flex gap={1}>
+            <HistorySearch
+                value={search}
+                fullSearch={fullSearch}
+                hasClear={hasClear}
+                onUpdate={onUpdate}
+            />
+            {filter && <HistoryFilter {...filter} />}
+        </Flex>
+    );
+};

package/src/modules/HistoryHeader/HistorySearch.scss

@@ -0,0 +1,5 @@
+.qp-history-search {
+  &__full-search {
+    margin-right: 4px;
+  }
+}

package/src/modules/HistoryHeader/HistorySearch.tsx

@@ -0,0 +1,54 @@
+import React, {FC, useEffect, useState} from 'react';
+import {Button, Icon, TextInput} from '@gravity-ui/uikit';
+import cn from 'bem-cn-lite';
+import ChevronsExpandHorizontalIcon from '@gravity-ui/icons/svgs/chevrons-expand-horizontal.svg';
+import './HistorySearch.scss';
+
+type Props = {
+    value?: string;
+    fullSearch?: boolean;
+    hasClear?: boolean;
+    onUpdate: (data: {value: string; fullSearch: boolean}) => void;
+};
+
+const block = cn('qp-history-search');
+
+export const HistorySearch: FC<Props> = ({value, fullSearch, hasClear, onUpdate}) => {
+    const [search, setSearch] = useState(value || '');
+    const [isFullSearch, setFullSearch] = useState(fullSearch || false);
+
+    useEffect(() => {
+        setSearch(value || '');
+        setFullSearch(fullSearch || false);
+    }, [value, fullSearch]);
+
+    const handleOnUpdate = (newValue: string) => {
+        setSearch(newValue);
+        onUpdate({value: newValue, fullSearch: isFullSearch});
+    };
+
+    const handleModeChange = () => {
+        const newValue = !isFullSearch;
+        setFullSearch(newValue);
+        onUpdate({value: search, fullSearch: newValue});
+    };
+
+    return (
+        <TextInput
+            className={block()}
+            value={search}
+            onUpdate={handleOnUpdate}
+            hasClear={hasClear}
+            endContent={
+                <Button
+                    className={block('full-search')}
+                    size="xs"
+                    view={isFullSearch ? 'action' : undefined}
+                    onClick={handleModeChange}
+                >
+                    <Icon data={ChevronsExpandHorizontalIcon} size={12} />
+                </Button>
+            }
+        />
+    );
+};

package/src/modules/HistoryHeader/index.ts

@@ -0,0 +1 @@
+export {HistoryHeader} from './HistoryHeader';

package/src/modules/HistoryLayout/HistoryLayout.scss

@@ -0,0 +1,3 @@
+.qp-history-layout {
+  position: relative;
+}

package/src/modules/HistoryLayout/HistoryLayout.tsx

@@ -0,0 +1,41 @@
+import React, {FC, ReactNode} from 'react';
+import {Flex, Text} from '@gravity-ui/uikit';
+import cn from 'bem-cn-lite';
+import './HistoryLayout.scss';
+
+const block = cn('qp-history-layout');
+
+export type HistoryLayoutProps = {
+    title: ReactNode;
+    logo?: ReactNode;
+    actions?: ReactNode;
+    header?: ReactNode;
+    footer?: ReactNode;
+    className?: string;
+    children: ReactNode;
+};
+
+export const HistoryLayout: FC<HistoryLayoutProps> = ({
+    title,
+    logo,
+    actions,
+    header,
+    footer,
+    className,
+    children,
+}) => {
+    return (
+        <Flex direction="column" gap={1} className={block(null, className)}>
+            {(logo || actions) && (
+                <Flex alignItems="center" justifyContent={logo ? 'space-between' : 'flex-end'}>
+                    {logo}
+                    {actions}
+                </Flex>
+            )}
+            <Text variant="subheader-1">{title}</Text>
+            {header}
+            {children}
+            {footer}
+        </Flex>
+    );
+};

package/src/modules/HistoryLayout/index.ts

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

package/src/modules/HistoryList/HistoryList.stories.tsx

@@ -0,0 +1,181 @@
+import React, {useState} from 'react';
+import type {Meta, StoryObj} from '@storybook/react';
+import {HistoryList} from './HistoryList';
+import {QueryHistoryItem, QueryHistoryRow} from '../../types/history';
+
+const now = Date.now();
+const min = 60 * 1000;
+
+const ITEMS: QueryHistoryItem<QueryHistoryRow>[] = [
+    {header: 'Today', height: 28},
+    {
+        id: 1,
+        title: 'Query 1',
+        status: 'completed',
+        engine: 'YQL',
+        startTime: now - 2 * min,
+        endTime: now - min,
+        height: 52,
+    },
+    {
+        id: 2,
+        title: 'Query 2',
+        status: 'failed',
+        engine: 'YQL',
+        startTime: now - 10 * min,
+        endTime: now - 9 * min,
+        height: 52,
+    },
+    {
+        id: 3,
+        title: 'Query 3',
+        status: 'running',
+        engine: 'YQL',
+        startTime: now - min,
+        height: 52,
+    },
+    {header: 'Yesterday', height: 28},
+    {
+        id: 4,
+        title: 'Query 4',
+        status: 'aborted',
+        engine: 'YQL',
+        startTime: now - 25 * 60 * min,
+        endTime: now - 24 * 60 * min,
+        height: 52,
+    },
+    {
+        id: 5,
+        title: 'Query 5',
+        status: 'draft',
+        engine: 'YQL',
+        startTime: now - 30 * 60 * min,
+        height: 52,
+    },
+];
+
+const meta: Meta<typeof HistoryList> = {
+    title: 'Modules/HistoryList',
+    component: HistoryList,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'padded',
+    },
+    decorators: [
+        (Story) => (
+            <div style={{width: 420, height: 480}}>
+                <Story />
+            </div>
+        ),
+    ],
+};
+
+export default meta;
+type Story = StoryObj<typeof HistoryList>;
+
+/** Basic list with groups and all statuses */
+export const Default: Story = {
+    args: {
+        items: ITEMS,
+    },
+};
+
+/** Empty list */
+export const Empty: Story = {
+    args: {
+        items: [],
+    },
+};
+
+/** With row actions (visible on hover) */
+export const WithActions: Story = {
+    args: {
+        items: ITEMS,
+        getRowActions: (_item) => [
+            {text: 'Run again', onClick: (row) => alert(`Run: ${row.title}`)},
+            {text: 'Copy', onClick: (row) => alert(`Copy: ${row.title}`)},
+            {text: 'Delete', onClick: (row) => alert(`Delete: ${row.title}`)},
+        ],
+    },
+};
+
+/** Interactive row comparison mode */
+const WithComparisonStory = () => {
+    const [comparedRowIds, setComparedRowIds] = useState<number[]>([2]);
+
+    const handleChange = (item: QueryHistoryRow, selected: boolean) => {
+        setComparedRowIds((prev) =>
+            selected ? [...prev, item.id] : prev.filter((id) => id !== item.id),
+        );
+    };
+
+    return (
+        <div style={{width: 420, height: 480}}>
+            <div style={{marginBottom: 8, fontSize: 12, color: '#888'}}>
+                Compared ids: {comparedRowIds.join(', ') || 'none'}
+            </div>
+            <HistoryList
+                items={ITEMS}
+                comparison={{
+                    enabled: true,
+                    comparedRowIds,
+                    onChange: handleChange,
+                    onCancel: () => setComparedRowIds([]),
+                    onCompare: () => alert(`Compare: ${comparedRowIds.join(', ')}`),
+                }}
+            />
+        </div>
+    );
+};
+
+export const WithComparison: Story = {render: () => <WithComparisonStory />};
+
+/** Row highlighted via selectedRowId */
+const WithSelectedRowStory = () => {
+    const [selectedRowId, setSelectedRowId] = useState<number | undefined>(1);
+
+    return (
+        <div style={{width: 420, height: 480}}>
+            <div style={{marginBottom: 8, fontSize: 12, color: '#888'}}>
+                Selected row id: {selectedRowId ?? 'none'}
+            </div>
+            <HistoryList
+                items={ITEMS}
+                selectedRowId={selectedRowId}
+                onItemClick={(item, index) => {
+                    if (!('header' in item)) {
+                        setSelectedRowId(index);
+                    }
+                }}
+            />
+        </div>
+    );
+};
+
+export const WithSelectedRow: Story = {render: () => <WithSelectedRowStory />};
+
+/** Interactive row title editing mode */
+const WithEditingStory = () => {
+    const [editingRowId, setEditingRowId] = useState<number | undefined>(1);
+
+    return (
+        <div style={{width: 420, height: 480}}>
+            <div style={{marginBottom: 8, fontSize: 12, color: '#888'}}>
+                Editing row id: {editingRowId ?? 'none'} (row #1 is open for editing)
+            </div>
+            <HistoryList
+                items={ITEMS}
+                editing={{
+                    rowId: editingRowId,
+                    onSubmit: (item, title) => {
+                        alert(`Saved row ${item.id}: "${title}"`);
+                        setEditingRowId(undefined);
+                    },
+                    onCancel: () => setEditingRowId(undefined),
+                }}
+            />
+        </div>
+    );
+};
+
+export const WithEditing: Story = {render: () => <WithEditingStory />};

package/src/modules/HistoryList/HistoryList.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import {
+    QueryHistoryComparisonConfig,
+    QueryHistoryEditingConfig,
+    QueryHistoryItem,
+    QueryHistoryRow,
+    QueryHistoryRowAction,
+    QueryHistoryRowRenderData,
+    QueryHistoryRowVariant,
+    QueryHistoryVisibleFieldsConfig,
+} from '../../types/history';
+import {RowsList} from '../RowsList';
+import {HistoryRowContent} from './HistoryRowContent';
+
+export type HistoryListProps<T extends QueryHistoryRow> = {
+    selectedRowId?: T['id'];
+    items: QueryHistoryItem<T>[];
+    rowVariant?: QueryHistoryRowVariant;
+    visibleFields?: QueryHistoryVisibleFieldsConfig<T>;
+    editing?: QueryHistoryEditingConfig<T>;
+    comparison?: QueryHistoryComparisonConfig<T>;
+    getRowActions?: (item: T) => QueryHistoryRowAction<T>[];
+    renderRowItem?: (data: QueryHistoryRowRenderData<T>) => React.ReactNode;
+    showFiltersHint?: boolean;
+    className?: string;
+    onItemClick?: (item: QueryHistoryItem<T>, index: number) => void;
+};
+
+export const HistoryList = <T extends QueryHistoryRow>({
+    renderRowItem,
+    ...props
+}: HistoryListProps<T>) => {
+    return (
+        <RowsList
+            {...props}
+            renderRow={(data) =>
+                renderRowItem ? renderRowItem(data) : <HistoryRowContent {...data} />
+            }
+        />
+    );
+};

package/src/modules/HistoryList/HistoryRowContent.tsx

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

package/src/modules/HistoryList/index.ts

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

package/src/modules/HistoryRow/HistoryRow.scss

@@ -0,0 +1,32 @@
+.qp-history-row {
+  height: 100%;
+  display: grid;
+  grid-template-columns: 20px 1fr;
+  gap: 4px;
+
+  &_compared {
+    background-color: var(--g-color-base-utility-light);
+  }
+
+  &__icon {
+    flex: 0 0 20px;
+  }
+
+  &__header {
+    height: 20px;
+  }
+
+  &__right-column {
+    overflow: hidden;
+  }
+
+  &__data {
+    display: grid;
+    grid-template-columns: 52px 1fr;
+    grid-gap: 8px;
+  }
+
+  &__duration {
+    text-align: center;
+  }
+}

package/src/modules/HistoryRow/HistoryRow.stories.tsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import type {Meta, StoryObj} from '@storybook/react';
+import {HistoryRow} from './HistoryRow';
+import {QueryHistoryRow, QueryHistoryRowAction} from '../../types/history';
+
+const now = Date.now();
+const min = 60 * 1000;
+
+const makeRow = (overrides: Partial<QueryHistoryRow>): QueryHistoryRow => ({
+    id: 1,
+    title: 'Query 1',
+    status: 'completed',
+    engine: 'YQL',
+    mode: 'batch',
+    isPrivate: false,
+    startTime: now - 5 * min,
+    endTime: now - min,
+    height: 64,
+    ...overrides,
+});
+
+const defaultActions: Array<QueryHistoryRowAction<QueryHistoryRow>> = [
+    {text: 'Run again', onClick: (row) => alert(`Run: ${row.title}`)},
+    {text: 'Copy', onClick: (row) => alert(`Copy: ${row.title}`)},
+    {text: 'Delete', onClick: (row) => alert(`Delete: ${row.title}`)},
+];
+
+const meta: Meta<typeof HistoryRow> = {
+    title: 'Modules/HistoryRow',
+    component: HistoryRow,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'padded',
+    },
+    args: {
+        item: makeRow({}),
+        isActive: false,
+        index: 0,
+        actions: defaultActions,
+    },
+    decorators: [
+        (Story) => (
+            <div style={{width: 380}}>
+                <Story />
+            </div>
+        ),
+    ],
+};
+
+export default meta;
+type Story = StoryObj<typeof HistoryRow>;
+
+/** Default row with a ready-to-use actions menu */
+export const Default: Story = {
+    args: {
+        item: makeRow({isPrivate: true}),
+        isActive: true,
+    },
+};
+
+/** Comparison mode — row highlighted as checked, menu is hidden */
+export const ComparisonMode: Story = {
+    args: {
+        comparison: {
+            enabled: true,
+            checked: true,
+        },
+    },
+};
+
+/** Comparison mode is enabled globally, but this row is not checked yet */
+export const ComparisonModeUnchecked: Story = {
+    args: {
+        comparison: {
+            enabled: true,
+            checked: false,
+        },
+    },
+};
+
+/** Title editing mode */
+export const EditingMode: Story = {
+    args: {
+        editing: {
+            enabled: true,
+            onSubmit: (_item, title) => alert(`Saved: ${title}`),
+            onCancel: () => alert('Cancelled'),
+        },
+    },
+};

package/src/modules/HistoryRow/HistoryRow.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import {QueryHistoryRow, QueryHistoryRowRenderData} from '../../types/history';
+import {Flex, Text} from '@gravity-ui/uikit';
+import './HistoryRow.scss';
+import cn from 'bem-cn-lite';
+import {HistoryPrivateIcon, QueryDuration, QueryStatusIcon, RowLink} from '../../components';
+import {formatTime} from '../../helpers/time';
+import {isFieldVisible} from '../../helpers/isFieldVisible';
+import {HistoryRowTitle} from './HistoryRowTitle';
+import {HistoryRowMenu} from './HistoryRowMenu';
+
+export type Props<T extends QueryHistoryRow> = {
+    item: T;
+} & Omit<QueryHistoryRowRenderData<T>, 'item' | 'variant'>;
+
+const block = cn('qp-history-row');
+
+export const HistoryRow = <T extends QueryHistoryRow>({
+    item,
+    actions,
+    isActive,
+    comparison,
+    editing,
+    visibleFields,
+}: Props<T>) => {
+    const {href, status, mode, startTime, endTime, engine, isPrivate} = item;
+    const isEditing = Boolean(editing?.enabled);
+    const isComparisonMode = Boolean(comparison?.enabled);
+    const isChecked = Boolean(comparison?.checked);
+    const showMenu = isActive && Boolean(actions?.length) && !isComparisonMode;
+
+    return (
+        <RowLink
+            href={href}
+            disabled={isEditing || isComparisonMode}
+            className={block({[status]: true, compared: isChecked})}
+        >
+            <QueryStatusIcon status={status} />
+            <Flex direction="column" gap={1} className={block('right-column')}>
+                <Flex justifyContent="space-between" className={block('header')}>
+                    <HistoryRowTitle item={item} editing={editing} />
+                    {showMenu && <HistoryRowMenu item={item} actions={actions} />}
+                </Flex>
+                <div className={block('data')}>
+                    {isFieldVisible(visibleFields, 'duration') && startTime && (
+                        <QueryDuration
+                            className={block('duration')}
+                            status={status}
+                            startTime={startTime}
+                            endTime={endTime}
+                        />
+                    )}
+                    <Flex gap={2}>
+                        {isFieldVisible(visibleFields, 'mode') && mode && (
+                            <Text color="complementary">{mode}</Text>
+                        )}
+                        {isFieldVisible(visibleFields, 'startTime') && startTime && (
+                            <Text color="complementary">{formatTime(startTime)}</Text>
+                        )}
+                        {isFieldVisible(visibleFields, 'engine') && engine && (
+                            <Text color="complementary">{engine}</Text>
+                        )}
+                        {isFieldVisible(visibleFields, 'isPrivate') && (
+                            <HistoryPrivateIcon isPrivate={isPrivate} />
+                        )}
+                    </Flex>
+                </div>
+            </Flex>
+        </RowLink>
+    );
+};

package/src/modules/HistoryRow/HistoryRowMenu.tsx

@@ -0,0 +1,47 @@
+import React, {MouseEvent, useMemo} from 'react';
+import {Button, DropdownMenu, DropdownMenuItem, Icon} from '@gravity-ui/uikit';
+import EllipsisIcon from '@gravity-ui/icons/svgs/ellipsis.svg';
+import {QueryHistoryRow, QueryHistoryRowAction} from '../../types/history';
+
+type Props<T extends QueryHistoryRow> = {
+    item: T;
+    actions?: QueryHistoryRowAction<T>[];
+};
+
+export const HistoryRowMenu = <T extends QueryHistoryRow>({item, actions}: Props<T>) => {
+    const items = useMemo(() => {
+        return actions?.map<DropdownMenuItem>(({icon, text, hidden, disabled, onClick}) => {
+            return {
+                text,
+                hidden,
+                disabled,
+                iconStart: icon,
+                action: () => {
+                    onClick(item);
+                },
+            };
+        });
+    }, [actions, item]);
+
+    if (!actions || !actions.length) return null;
+
+    const handleClick = (e: MouseEvent<HTMLDivElement>) => {
+        e.preventDefault();
+    };
+
+    return (
+        <div onClick={handleClick}>
+            <DropdownMenu
+                size="s"
+                renderSwitcher={(props) => {
+                    return (
+                        <Button {...props} size="xs">
+                            <Icon data={EllipsisIcon} size={12} />
+                        </Button>
+                    );
+                }}
+                items={items}
+            />
+        </div>
+    );
+};