@gravity-ui/querieskit 1.2.0 → 1.3.1

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

@@ -1,276 +0,0 @@
-import React, {useState} from 'react';
-import type {Meta, StoryObj} from '@storybook/react';
-import {QueriesHistory} from './QueriesHistory';
-import {
-    QueryListFieldKey,
-    QueryListFilterConfig,
-    QueryListItem,
-    QueryListVisibleFieldsConfig,
-} from '../../types/queryList';
-import {QueryHistoryRow} 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: QueryListItem<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 = QueryListVisibleFieldsConfig<QueryHistoryRow>['fields'];
-const activeFields: QueryListFieldKey<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: QueryListFilterConfig['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<QueryListFieldKey<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

@@ -1,71 +0,0 @@
-import React from 'react';
-import cn from 'bem-cn-lite';
-import {QueriesList} from '../../modules';
-import i18n from './i18n';
-import {
-    QueryListComparisonConfig,
-    QueryListEditingConfig,
-    QueryListFilterConfig,
-    QueryListItem,
-    QueryListRowAction,
-    QueryListRowRenderData,
-    QueryListSearchConfig,
-    QueryListVisibleFieldsConfig,
-} from '../../types/queryList';
-import {QueryHistoryRow} from '../../types/history';
-import {HistoryRowContent} from './internal/HistoryRowContent';
-import './QueriesHistory.scss';
-
-export type QueriesHistoryProps<T extends QueryHistoryRow = QueryHistoryRow> = {
-    className?: string;
-    title?: string;
-    logo?: React.ReactNode;
-    search: QueryListSearchConfig;
-    filter?: QueryListFilterConfig;
-    items: QueryListItem<T>[];
-    selectedRowId?: T['id'];
-    editing?: QueryListEditingConfig<T>;
-    comparison?: QueryListComparisonConfig<T>;
-    visibleFields?: QueryListVisibleFieldsConfig<T>;
-    renderRowItem?: (data: QueryListRowRenderData<T>) => React.ReactNode;
-    getRowActions?: (item: T) => QueryListRowAction<T>[];
-    onListItemClick?: (item: QueryListItem<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>) => {
-    return (
-        <QueriesList
-            className={block(null, className)}
-            title={title || i18n('title_history')}
-            logo={logo}
-            search={search}
-            filter={filter}
-            items={items}
-            selectedRowId={selectedRowId}
-            visibleFields={visibleFields}
-            editing={editing}
-            comparison={comparison}
-            getRowActions={getRowActions}
-            renderRow={(data) =>
-                renderRowItem ? renderRowItem(data) : <HistoryRowContent {...data} />
-            }
-            onListItemClick={onListItemClick}
-        />
-    );
-};

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

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

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

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

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

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

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

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

package/src/widgets/QueriesHistory/index.ts

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

package/src/widgets/QueriesHistory/internal/HistoryRowContent.tsx

@@ -1,22 +0,0 @@
-import React from 'react';
-import {HistoryGroupHeader} from '../../../components';
-import {HistoryRow, HistorySearchRow} from '../../../modules';
-import {QueryListRowRenderData} from '../../../types/queryList';
-import {QueryHistoryRow} from '../../../types/history';
-
-export const HistoryRowContent = <T extends QueryHistoryRow>({
-    variant,
-    ...data
-}: QueryListRowRenderData<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/widgets/QueriesNavigation/QueriesNavigation.scss

@@ -1,9 +0,0 @@
-.qp-queries-navigation {
-  height: 100%;
-
-  &__empty,
-  &__error {
-    padding: var(--g-spacing-2);
-    text-align: center;
-  }
-}