@gravity-ui/querieskit 1.0.1

package/src/types/history.ts

@@ -0,0 +1,103 @@
+import {ReactNode} from 'react';
+import {RegisteredFormFields} from './forms';
+
+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;
+    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/tutorial.ts

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

package/src/widgets/QueriesHistory/ComparisonActions.scss

@@ -0,0 +1,4 @@
+.qp-query-history-comparison-action {
+  padding: 12px 20px;
+  background: var(--g-color-base-background);
+}

package/src/widgets/QueriesHistory/ComparisonActions.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import {Button, Flex, Icon} from '@gravity-ui/uikit';
+import {QueryHistoryComparisonConfig, QueryHistoryRow} from '../../types/history';
+import ArrowRotateRightIcon from '@gravity-ui/icons/svgs/arrow-rotate-right.svg';
+import ArrowRightArrowLeftIcon from '@gravity-ui/icons/svgs/arrow-right-arrow-left.svg';
+import './ComparisonActions.scss';
+import cn from 'bem-cn-lite';
+
+type Props<T extends QueryHistoryRow> = {
+    comparison: QueryHistoryComparisonConfig<T>;
+    className?: string;
+};
+
+const block = cn('qp-query-history-comparison-action');
+
+export const ComparisonActions = <T extends QueryHistoryRow>({
+    comparison: {enabled, comparedRowIds, onCompare, onCancel},
+    className,
+}: Props<T>) => {
+    if (!enabled) return null;
+
+    return (
+        <Flex
+            gap={3}
+            alignItems="center"
+            justifyContent="center"
+            className={block(null, className)}
+        >
+            <Button onClick={onCancel} width="max">
+                <Icon data={ArrowRotateRightIcon} size={16} />
+            </Button>
+            <Button
+                view="action"
+                onClick={onCompare}
+                disabled={comparedRowIds.length < 2}
+                width="max"
+            >
+                <Icon data={ArrowRightArrowLeftIcon} size={16} />
+            </Button>
+        </Flex>
+    );
+};

package/src/widgets/QueriesHistory/QueriesHistory.scss

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

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

@@ -0,0 +1,276 @@
+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';
+import {action} from 'storybook/actions';
+
+const now = Date.now();
+const min = 60 * 1000;
+
+const QUERY = `use test;
+
+SELECT
+    "test_session" AS session_id,
+    "test_task" AS task_id,
+    SUBSTRING("test", 1, 1) AS truncated_char`;
+
+const BASE_ITEMS: QueryHistoryItem<QueryHistoryRow>[] = [
+    {header: 'Today', height: 28},
+    {
+        id: 1,
+        title: 'Query 1',
+        status: 'completed',
+        engine: 'YQL',
+        mode: 'Validation',
+        startTime: now - 2 * min,
+        endTime: now - min,
+        query: QUERY,
+        height: 52,
+    },
+    {
+        id: 2,
+        title: 'Query 2',
+        status: 'failed',
+        engine: 'YQL',
+        mode: 'Test',
+        startTime: now - 10 * min,
+        endTime: now - 9 * min,
+        query: QUERY,
+        height: 52,
+    },
+    {
+        id: 3,
+        title: 'Query 3',
+        status: 'running',
+        engine: 'YQL',
+        mode: 'Test',
+        startTime: now - min,
+        query: QUERY,
+        height: 52,
+    },
+    {header: 'Yesterday', height: 28},
+    {
+        id: 4,
+        title: 'Query 4',
+        status: 'aborted',
+        engine: 'YQL',
+        mode: 'Validation',
+        startTime: now - 25 * 60 * min,
+        endTime: now - 24 * 60 * min,
+        query: 'SELECT 1',
+        height: 52,
+    },
+    {
+        id: 5,
+        title: 'Query 5',
+        status: 'draft',
+        engine: 'YQL',
+        mode: 'Test',
+        startTime: now - 30 * 60 * min,
+        query: QUERY,
+        height: 52,
+    },
+];
+
+type VisibleFields = QueryHistoryVisibleFieldsConfig<QueryHistoryRow>['fields'];
+const activeFields: QueryHistoryFieldKey<QueryHistoryRow>[] = [
+    'duration',
+    'mode',
+    'startTime',
+    'engine',
+    'isPrivate',
+];
+const fields: VisibleFields = [
+    {
+        id: 'duration',
+        title: 'Duration',
+    },
+    {
+        id: 'mode',
+        title: 'Mode',
+    },
+    {
+        id: 'startTime',
+        title: 'Start time',
+    },
+    {
+        id: 'engine',
+        title: 'Engine',
+    },
+    {
+        id: 'isPrivate',
+        title: 'ACO',
+    },
+];
+
+const filterFields: QueryHistoryFilterConfig['fields'] = [
+    {id: 'onlyMine', type: 'switch', title: 'My queries only', initialValue: true},
+    {id: 'range', type: 'rangeDatePicker', title: 'Period'},
+    {
+        id: 'dialect',
+        type: 'checkboxGroup',
+        title: 'Dialect',
+        initialValue: [],
+        items: [
+            {id: 'yql', title: 'YQL'},
+            {id: 'sql', title: 'SQL'},
+        ],
+    },
+];
+
+const logFilterApply = action('onFilterApply');
+const logFilterReset = action('onFilterReset');
+
+const meta: Meta<typeof QueriesHistory> = {
+    title: 'Widgets/QueriesHistory',
+    component: QueriesHistory,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'padded',
+    },
+};
+
+export default meta;
+type Story = StoryObj<typeof QueriesHistory>;
+
+const DefaultStory = () => {
+    const [items, setItems] = useState([...BASE_ITEMS]);
+    const [search, setSearch] = useState({value: '', fullSearch: false});
+    const [visibleFields, setVisibleFields] =
+        useState<QueryHistoryFieldKey<QueryHistoryRow>[]>(activeFields);
+    const [compareMode, setCompareMode] = useState(false);
+    const [comparedRows, setComparedRows] = useState<number[]>([]);
+    const [editingId, setEditingId] = useState<number | undefined>(undefined);
+
+    const handleCompareChange = (item: QueryHistoryRow, selected: boolean) => {
+        const result = selected
+            ? [...comparedRows.slice(0, 1), item.id]
+            : comparedRows.filter((id) => id !== item.id);
+        setComparedRows(result);
+
+        if (!result.length) setCompareMode(false);
+    };
+
+    const handleCompareCancel = () => {
+        setComparedRows([]);
+        setCompareMode(false);
+    };
+
+    const handleEditSubmit = (item: QueryHistoryRow, title: string) => {
+        const index = items.findIndex((i) => 'id' in i && i.id === item.id);
+        if (index < 0) return;
+
+        const result = [...items];
+        result[index] = {...result[index], title};
+        setItems(result);
+        setEditingId(undefined);
+    };
+
+    const handleEditCancel = () => {
+        setEditingId(undefined);
+    };
+
+    const handleCompare = () => {
+        action('onCompare')(comparedRows);
+    };
+
+    const handleOnSearch = (data: {value: string; fullSearch: boolean}) => {
+        setSearch(data);
+
+        if (!data.value) {
+            setItems(BASE_ITEMS);
+            return;
+        }
+
+        const newItems = BASE_ITEMS.filter((item) => {
+            if (!('id' in item)) return false;
+
+            const title = item.title.toLowerCase();
+            const query = item.query?.toLowerCase();
+            const searchValue = data.value.toLowerCase();
+
+            if (data.fullSearch) {
+                return title.includes(searchValue) || query?.includes(searchValue);
+            }
+
+            return title.includes(searchValue);
+        });
+        setItems(newItems);
+    };
+
+    return (
+        <div style={{width: 300, height: 500}}>
+            <QueriesHistory
+                title="History"
+                items={items}
+                visibleFields={{value: visibleFields, fields, onChange: setVisibleFields}}
+                search={{
+                    value: search.value,
+                    fullSearch: search.fullSearch,
+                    hasClear: true,
+                    onUpdate: handleOnSearch,
+                }}
+                filter={{
+                    fields: filterFields,
+                    onApply: logFilterApply,
+                    onReset: logFilterReset('reset'),
+                }}
+                getRowActions={() => [
+                    {
+                        text: 'Compare',
+                        onClick: (item) => {
+                            setCompareMode(true);
+                            setComparedRows([item.id]);
+                        },
+                    },
+                    {
+                        text: 'Edit',
+                        onClick: (item) => {
+                            setEditingId(item.id);
+                        },
+                    },
+                ]}
+                comparison={{
+                    enabled: compareMode,
+                    comparedRowIds: comparedRows,
+                    onChange: handleCompareChange,
+                    onCancel: handleCompareCancel,
+                    onCompare: handleCompare,
+                }}
+                editing={{
+                    rowId: editingId,
+                    onSubmit: handleEditSubmit,
+                    onCancel: handleEditCancel,
+                }}
+            />
+        </div>
+    );
+};
+
+const EmptyStory = () => {
+    const [search, setSearch] = useState({value: '', fullSearch: false});
+
+    return (
+        <div style={{width: 300, height: 500}}>
+            <QueriesHistory
+                title="History"
+                items={[]}
+                search={{
+                    value: search.value,
+                    fullSearch: search.fullSearch,
+                    hasClear: true,
+                    onUpdate: setSearch,
+                }}
+            />
+        </div>
+    );
+};
+
+export const Default: Story = {render: () => <DefaultStory />};
+export const Empty: Story = {render: () => <EmptyStory />};

package/src/widgets/QueriesHistory/QueriesHistory.tsx

@@ -0,0 +1,96 @@
+import React from 'react';
+import {HistoryHeader, HistoryLayout, HistoryList} 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';
+import './QueriesHistory.scss';
+
+export type QueriesHistoryProps<T extends QueryHistoryRow = QueryHistoryRow> = {
+    className?: string;
+    title?: string;
+    logo?: React.ReactNode;
+    search: QueryHistorySearchConfig;
+    filter?: QueryHistoryFilterConfig;
+    items: QueryHistoryItem<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;
+};
+
+const block = cn('qp-query-history');
+
+export const QueriesHistory = <T extends QueryHistoryRow>({
+    title,
+    logo,
+    search,
+    filter,
+    items,
+    selectedRowId,
+    editing,
+    comparison,
+    visibleFields,
+    renderRowItem,
+    getRowActions,
+    onListItemClick,
+    className,
+}: QueriesHistoryProps<T>) => {
+    const showSearchResults = Boolean(search.fullSearch && search.value?.trim());
+    const rowVariant = showSearchResults ? 'search' : 'default';
+
+    return (
+        <HistoryLayout
+            className={block(null, className)}
+            title={title || i18n('title_history')}
+            logo={logo}
+            actions={visibleFields && <FieldsSelector {...visibleFields} />}
+            header={
+                <HistoryHeader
+                    search={search.value}
+                    fullSearch={search.fullSearch}
+                    hasClear={search.hasClear}
+                    filter={filter}
+                    onUpdate={search.onUpdate}
+                />
+            }
+            footer={
+                comparison && (
+                    <ComparisonActions
+                        comparison={comparison}
+                        className={block('comparison-actions')}
+                    />
+                )
+            }
+        >
+            <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>
+    );
+};

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

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

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

@@ -0,0 +1,3 @@
+{
+    "title_history": "History"
+}

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

@@ -0,0 +1,5 @@
+import {addI18Keysets} from '../../../i18n';
+
+import dicts from './dicts';
+
+export default addI18Keysets('qp:queries-history', dicts);

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

@@ -0,0 +1,3 @@
+{
+    "title_history": "История"
+}

package/src/widgets/QueriesHistory/index.ts

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

package/src/widgets/TutorialsHistory/TutorialRowContent.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import {QueryHistoryRowRenderData} from '../../types/history';
+import {TutorialHistoryRow} from '../../types/tutorial';
+import {HistoryGroupHeader} from '../../components';
+import {TutorialRow, TutorialSearchRow} from '../../modules';
+
+export const TutorialRowContent = <T extends TutorialHistoryRow>({
+    item,
+    variant,
+}: QueryHistoryRowRenderData<T>) => {
+    if ('header' in item) {
+        return <HistoryGroupHeader title={item.header} />;
+    }
+
+    return variant === 'search' ? <TutorialSearchRow item={item} /> : <TutorialRow item={item} />;
+};