@gravity-ui/querieskit 1.1.0 → 1.2.0

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,15 +1,15 @@
 import React from 'react';
 import cn from 'bem-cn-lite';
 import {
-    BaseHistoryRow,
-    QueryHistoryComparisonConfig,
-    QueryHistoryEditingConfig,
-    QueryHistoryItem,
-    QueryHistoryRowAction,
-    QueryHistoryRowRenderData,
-    QueryHistoryRowVariant,
-    QueryHistoryVisibleFieldsConfig,
-} from '../../types/history';
+    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';
@@ -17,21 +17,21 @@ 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',
@@ -44,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;
@@ -67,7 +71,7 @@ export const RowsList = <T extends BaseHistoryRow>({
     }
 
     return (
-        <LazyList<QueryHistoryItem<T>>
+        <LazyList<QueryListItem<T>>
             className={block(null, className)}
             items={items}
             itemHeight={getItemHeight}
@@ -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,14 +1,20 @@
 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';

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/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/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%;
-  }
-}
+}